/* PRIME KINETIC SYSTEMS Co., Ltd.
   Visual system: deep navy, white, graphite and cool gray. Large site photography,
   hairline rules and a steady flexbox rhythm. One steel-blue accent marks links and small details.
   Layout is flexbox only. Every colour, font family, size and spacing value is a token in :root.
   Media query breakpoints cannot read custom properties, so they are the only literal sizes here:
   tablet below 1024px, mobile below 640px. */

:root {
  /* Colour */
  --color-navy: #0c2340;
  --color-navy-deep: #081a31;
  --color-navy-line: #23395a;
  --color-graphite: #2b3036;
  --color-graphite-line: #41474e;
  --color-ink: #16202b;
  --color-ink-soft: #4a5562;
  --color-gray: #6f7a86;
  --color-gray-line: #d8dee4;
  --color-gray-wash: #f2f4f6;
  --color-white: #ffffff;
  --color-on-dark: #ffffff;
  --color-on-dark-soft: #b9c4d0;
  --color-accent: #3a78b5;
  --color-accent-strong: #2b5f93;
  --color-accent-on-dark: #8fb8e0;
  --color-focus: #3a78b5;
  --color-clear: transparent;

  /* Font families */
  --font-display: "Archivo", "IBM Plex Sans", "Helvetica Neue", "Arial", sans-serif;
  --font-body: "IBM Plex Sans", "IBM Plex Sans Thai", "Helvetica Neue", "Arial", sans-serif;
  --font-thai: "IBM Plex Sans Thai", "IBM Plex Sans", "Tahoma", sans-serif;
  --font-latin: "IBM Plex Sans", "Helvetica Neue", "Arial", sans-serif;
  --font-mono: "IBM Plex Mono", "Menlo", "Consolas", monospace;

  /* Type scale */
  --size-2xs: 0.6875rem;
  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-base: 1rem;
  --size-md: 1.125rem;
  --size-lg: 1.375rem;
  --size-xl: 1.75rem;
  --size-2xl: 2.5rem;
  --size-3xl: 3.25rem;
  --size-hero: clamp(2.5rem, 1.5rem + 3.4vw, 4.25rem);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-body: 1.65;
  --tracking-label: 0.12em;
  --tracking-switch: 0.06em;
  --tracking-tight: -0.015em;

  /* Spacing scale */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --gutter: 2.5rem;
  --section-space: var(--space-9);

  /* Sizes, borders, ratios */
  --width-content: 78rem;
  --width-text: 40rem;
  --width-full: 100%;
  --height-screen: 100vh;
  --border-thin: 1px;
  --border-mid: 2px;
  --border-thick: 3px;
  --radius: 2px;
  --radius-pill: 999px;
  --mark-width: 2rem;
  --mark-height: 2px;
  --dot-size: 0.375rem;
  --bar-width: 1.25rem;
  --bar-height: 2px;
  --control-height: 3rem;
  --switch-height: 2.25rem;
  --switch-option: 2.75rem;
  --textarea-height: 9rem;
  --ratio-photo: 4 / 3;
  --ratio-wide: 16 / 10;
  --ratio-hero: 21 / 8;
  --width-hero-text: 52rem;
  --rule-heavy: 4px;
  --basis-zero: 0;
  --basis-half: calc((100% - var(--space-5)) / 2);
  --basis-quarter: calc((100% - 3 * var(--space-5)) / 4);
  --grow-one: 1;
  --grow-two: 2;
  --layer-header: 10;
  --duration-fast: 150ms;

  color-scheme: light;
}

/* Thai pages: Thai faces, taller lines for stacked vowels and tone marks, no letter-spacing */
html[lang="th"] {
  --font-display: "IBM Plex Sans Thai", "Archivo", "Tahoma", sans-serif;
  --font-body: "IBM Plex Sans Thai", "IBM Plex Sans", "Tahoma", sans-serif;
  --font-mono: "IBM Plex Sans Thai", "IBM Plex Mono", "Tahoma", sans-serif;
  --leading-tight: 1.35;
  --leading-body: 1.8;
  --tracking-label: 0;
  --tracking-tight: 0;
}

/* Base */
* { box-sizing: border-box; }
html { background: var(--color-white); }
body {
  margin: var(--space-0);
  display: flex;
  flex-direction: column;
  min-height: var(--height-screen);
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--leading-body);
}
h1, h2, h3, h4 {
  margin: var(--space-0);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
p, ul, ol, dl, dd, figure { margin: var(--space-0); }
ul, ol { padding: var(--space-0); list-style: none; }
img { display: block; max-width: var(--width-full); }
a { color: inherit; }
:focus-visible { outline: var(--border-thick) solid var(--color-focus); outline-offset: var(--border-mid); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

site-header, site-footer { display: contents; }
main { display: flex; flex-direction: column; flex-grow: var(--grow-one); }

/* Section shell */
.section {
  display: flex;
  justify-content: center;
  padding-block: var(--section-space);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.section-wash { background: var(--color-gray-wash); }
.section-hero { padding-bottom: var(--space-7); }
.section-navy { background: var(--color-navy); color: var(--color-on-dark); }
.section-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  width: var(--width-full);
  max-width: var(--width-content);
  min-width: var(--basis-zero);
}

/* Section heading: eyebrow with a real mark, title, lead */
.section-heading { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--width-text); }
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
}
.eyebrow-mark { width: var(--mark-width); height: var(--mark-height); background: var(--color-accent); flex-shrink: var(--basis-zero); }
.section-navy .eyebrow { color: var(--color-accent-on-dark); }
.section-navy .eyebrow-mark { background: var(--color-accent-on-dark); }
.section-title { font-size: var(--size-2xl); color: var(--color-navy); }
.section-navy .section-title { color: var(--color-on-dark); }
.section-lead { font-size: var(--size-md); color: var(--color-ink-soft); }
.section-navy .section-lead { color: var(--color-on-dark-soft); }

/* Buttons and links */
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding-inline: var(--space-5);
  border: var(--border-thin) solid var(--color-clear);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.button-primary { background: var(--color-navy); color: var(--color-on-dark); }
.button-primary:hover { background: var(--color-navy-deep); }
.button-secondary { background: var(--color-clear); color: var(--color-navy); border-color: var(--color-navy); }
.button-secondary:hover { background: var(--color-gray-wash); }
.section-navy .button-primary { background: var(--color-white); color: var(--color-navy); }
.section-navy .button-primary:hover { background: var(--color-gray-wash); }
.section-navy .button-secondary { color: var(--color-on-dark); border-color: var(--color-on-dark-soft); }
.section-navy .button-secondary:hover { background: var(--color-navy-line); }
.text-link { display: inline-flex; align-self: flex-start; padding-bottom: var(--space-1); border-bottom: var(--border-thin) solid var(--color-accent); font-size: var(--size-sm); font-weight: var(--weight-semibold); color: var(--color-accent-strong); text-decoration: none; }
.text-link:hover { color: var(--color-navy); border-bottom-color: var(--color-navy); }

/* Photograph */
.photo-frame { display: flex; flex-direction: column; gap: var(--space-2); width: var(--width-full); min-width: var(--basis-zero); }
.photo { width: var(--width-full); height: auto; aspect-ratio: var(--ratio-photo); object-fit: cover; background: var(--color-gray-wash); }
.photo-wide { aspect-ratio: var(--ratio-wide); }
.photo-hero { aspect-ratio: var(--ratio-hero); }
.photo-caption { font-size: var(--size-sm); color: var(--color-gray); }

/* Bullet list with real bullet elements */
.list-bullet { display: flex; flex-direction: column; gap: var(--space-2); }
.list-bullet-item { display: flex; align-items: baseline; gap: var(--space-3); }
.bullet { flex-shrink: var(--basis-zero); width: var(--dot-size); height: var(--dot-size); background: var(--color-accent); transform: translateY(calc(-1 * var(--space-1) / 2)); }

/* Header */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: var(--layer-header);
  display: flex;
  justify-content: center;
  background: var(--color-white);
  border-bottom: var(--border-thin) solid var(--color-gray-line);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); width: var(--width-full); max-width: var(--width-content); padding-block: var(--space-4); }
.brand { display: flex; flex-direction: column; color: var(--color-navy); text-decoration: none; }
.brand-name { font-family: var(--font-display); font-size: var(--size-md); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); line-height: var(--leading-tight); }
.brand-legal { font-family: var(--font-mono); font-size: var(--size-2xs); letter-spacing: var(--tracking-label); color: var(--color-gray); }
.nav-main { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; order: 1; }
.nav-list { display: flex; align-items: center; gap: var(--space-5); }
.nav-link { display: flex; padding-block: var(--space-2); border-bottom: var(--border-mid) solid var(--color-clear); font-size: var(--size-sm); font-weight: var(--weight-medium); color: var(--color-ink-soft); text-decoration: none; }
.nav-link:hover { color: var(--color-navy); }
.nav-link[aria-current="page"] { color: var(--color-navy); border-bottom-color: var(--color-navy); }
.header-tools { display: flex; align-items: center; gap: var(--space-3); order: 2; }

/* Language switch: a two-option segmented control, current language filled */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--switch-height);
  padding: var(--space-1);
  box-sizing: border-box;
  background: var(--color-gray-wash);
  border: var(--border-thin) solid var(--color-gray-line);
  border-radius: var(--radius-pill);
}
.lang-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--switch-option);
  height: var(--width-full);
  padding-inline: var(--space-2);
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  font-family: var(--font-latin);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-switch);
  color: var(--color-gray);
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.lang-option:hover { color: var(--color-navy); }
.lang-option[aria-current="true"] { background: var(--color-navy); color: var(--color-on-dark); }

.nav-toggle { display: none; align-items: center; gap: var(--space-3); min-height: var(--switch-height); padding-inline: var(--space-3); background: var(--color-clear); border: var(--border-thin) solid var(--color-gray-line); border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--size-sm); font-weight: var(--weight-medium); color: var(--color-navy); cursor: pointer; }
.nav-toggle-bars { display: flex; flex-direction: column; gap: var(--space-1); }
.nav-toggle-bar { width: var(--bar-width); height: var(--bar-height); background: var(--color-navy); }

/* Footer */
.site-footer {
  display: flex;
  justify-content: center;
  background: var(--color-graphite);
  color: var(--color-on-dark-soft);
  padding-block: var(--space-8) var(--space-6);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.footer-inner { display: flex; flex-direction: column; gap: var(--space-7); width: var(--width-full); max-width: var(--width-content); }
.footer-columns { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.footer-col { display: flex; flex-direction: column; gap: var(--space-3); flex: var(--grow-one) var(--grow-one) var(--basis-zero); min-width: var(--basis-zero); }
.footer-col-wide { flex-grow: var(--grow-two); }
.footer-brand { font-family: var(--font-display); font-size: var(--size-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); color: var(--color-on-dark); }
.footer-name { font-size: var(--size-sm); }
.footer-heading { font-family: var(--font-mono); font-size: var(--size-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-on-dark); }
.footer-links { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-link { font-size: var(--size-sm); text-decoration: none; }
.footer-link:hover { color: var(--color-on-dark); text-decoration: underline; }
.footer-text { font-size: var(--size-sm); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-5); border-top: var(--border-thin) solid var(--color-graphite-line); font-size: var(--size-xs); }

/* Home hero: white ground, headline above a full-width photo banner */
.hero { display: flex; flex-direction: column; gap: var(--space-7); }
.hero-text { display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--width-hero-text); }
.hero-title { font-size: var(--size-hero); color: var(--color-navy); }
.hero-lead { font-size: var(--size-md); color: var(--color-ink-soft); max-width: var(--width-text); }
.hero-media { display: flex; }

/* Fact strip: registered details in one row */
.fact-strip { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-8); padding-top: var(--space-6); border-top: var(--border-thin) solid var(--color-gray-line); }
.fact { display: flex; flex-direction: column; gap: var(--space-1); }
.fact-label { font-family: var(--font-mono); font-size: var(--size-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-gray); }
.fact-value { font-size: var(--size-base); font-weight: var(--weight-medium); color: var(--color-navy); }
.fact-value-thai { font-family: var(--font-thai); font-size: var(--size-base); font-weight: var(--weight-medium); color: var(--color-navy); }

/* Intro split */
.intro { display: flex; align-items: flex-start; gap: var(--space-8); }
.intro-heading { display: flex; flex-direction: column; gap: var(--space-4); flex: var(--grow-one) var(--grow-one) var(--basis-zero); min-width: var(--basis-zero); }
.intro-body { display: flex; flex-direction: column; gap: var(--space-4); flex: var(--grow-one) var(--grow-one) var(--basis-zero); min-width: var(--basis-zero); font-size: var(--size-md); color: var(--color-ink-soft); }

/* Service card (overview) */
.service-row { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.service-card { display: flex; flex-direction: column; flex: var(--basis-zero) var(--basis-zero) var(--basis-quarter); min-width: var(--basis-zero); background: var(--color-white); border: var(--border-thin) solid var(--color-gray-line); border-top: var(--rule-heavy) solid var(--color-navy); }
.service-card-body { display: flex; flex-direction: column; gap: var(--space-3); flex-grow: var(--grow-one); padding: var(--space-5); }
.service-number { font-family: var(--font-mono); font-size: var(--size-xs); letter-spacing: var(--tracking-label); color: var(--color-accent); }
.service-title { font-size: var(--size-lg); color: var(--color-navy); }
.service-text { flex-grow: var(--grow-one); font-size: var(--size-sm); color: var(--color-ink-soft); }

/* Service detail (Services page) */
.service-detail { display: flex; align-items: flex-start; gap: var(--space-8); padding-block: var(--space-7); border-top: var(--border-thin) solid var(--color-gray-line); }
.service-detail-reverse { flex-direction: row-reverse; }
.service-detail-text { display: flex; flex-direction: column; gap: var(--space-5); flex: var(--grow-one) var(--grow-one) var(--basis-zero); min-width: var(--basis-zero); }
.service-detail-media { display: flex; flex: var(--grow-one) var(--grow-one) var(--basis-zero); min-width: var(--basis-zero); }
.service-detail-title { font-size: var(--size-xl); color: var(--color-navy); }
.service-detail-intro { color: var(--color-ink-soft); }
.service-value { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); background: var(--color-gray-wash); border-left: var(--border-thick) solid var(--color-navy); }
.service-value-label { font-family: var(--font-mono); font-size: var(--size-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-gray); }
.service-lists { display: flex; gap: var(--space-6); }
.service-list { display: flex; flex-direction: column; gap: var(--space-3); flex: var(--grow-one) var(--grow-one) var(--basis-zero); min-width: var(--basis-zero); font-size: var(--size-sm); }
.service-list-heading { font-family: var(--font-mono); font-size: var(--size-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-gray); }

/* Inner page hero */
.page-hero { display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--width-text); }
.page-title { font-size: var(--size-3xl); color: var(--color-navy); }
.page-lead { font-size: var(--size-md); color: var(--color-ink-soft); }

/* Gallery */
.gallery-group { display: flex; flex-direction: column; gap: var(--space-5); }
.gallery-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: var(--border-thin) solid var(--color-gray-line); }
.gallery-group-title { font-size: var(--size-xl); color: var(--color-navy); }
.gallery-count { font-family: var(--font-mono); font-size: var(--size-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-gray); }
.gallery-row { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.gallery-item { display: flex; flex: var(--basis-zero) var(--basis-zero) var(--basis-quarter); min-width: var(--basis-zero); }

/* Two-column split */
.split { display: flex; align-items: flex-start; gap: var(--space-8); }
.split-main { display: flex; flex-direction: column; gap: var(--space-5); flex: var(--grow-two) var(--grow-two) var(--basis-zero); min-width: var(--basis-zero); }
.split-side { display: flex; flex-direction: column; gap: var(--space-5); flex: var(--grow-one) var(--grow-one) var(--basis-zero); min-width: var(--basis-zero); }
.body-text { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--width-text); color: var(--color-ink-soft); }

/* Information list (label and value rows) */
.info-list { display: flex; flex-direction: column; border-top: var(--border-mid) solid var(--color-navy); }
.info-row { display: flex; flex-direction: column; gap: var(--space-1); padding-block: var(--space-4); border-bottom: var(--border-thin) solid var(--color-gray-line); }
.info-label { font-family: var(--font-mono); font-size: var(--size-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-gray); }
.info-value { font-weight: var(--weight-medium); color: var(--color-navy); }
.info-value-thai { font-family: var(--font-thai); font-weight: var(--weight-medium); color: var(--color-navy); }

/* Scope list (About) */
.scope-row { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.scope-item { display: flex; flex-direction: column; gap: var(--space-2); flex: var(--basis-zero) var(--basis-zero) var(--basis-half); min-width: var(--basis-zero); padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-gray-line); }
.scope-title { font-size: var(--size-md); color: var(--color-navy); }
.scope-text { font-size: var(--size-sm); color: var(--color-ink-soft); }

/* Call to action band */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.cta-text { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--width-text); }
.cta-title { font-size: var(--size-2xl); color: var(--color-on-dark); }

/* Contact */
.contact-layout { display: flex; align-items: flex-start; gap: var(--space-8); }
.contact-details { display: flex; flex-direction: column; gap: var(--space-6); flex: var(--grow-one) var(--grow-one) var(--basis-zero); min-width: var(--basis-zero); }
.contact-form-wrap { display: flex; flex-direction: column; gap: var(--space-5); flex: var(--grow-two) var(--grow-two) var(--basis-zero); min-width: var(--basis-zero); padding: var(--space-7); background: var(--color-gray-wash); }
.form-title { font-size: var(--size-xl); color: var(--color-navy); }
.mockup-label { display: flex; align-self: flex-start; padding: var(--space-1) var(--space-3); border: var(--border-thin) solid var(--color-gray); font-family: var(--font-mono); font-size: var(--size-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-gray); }
.form-mockup { display: flex; flex-direction: column; gap: var(--space-4); }
.form-row { display: flex; gap: var(--space-4); }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); flex: var(--grow-one) var(--grow-one) var(--basis-zero); min-width: var(--basis-zero); }
.form-label { font-size: var(--size-sm); font-weight: var(--weight-semibold); color: var(--color-ink); }
.form-hint { font-size: var(--size-xs); color: var(--color-gray); }
.form-input { box-sizing: border-box; width: var(--width-full); min-height: var(--control-height); padding: var(--space-2) var(--space-3); background: var(--color-white); border: var(--border-thin) solid var(--color-gray-line); border-radius: var(--radius); font-family: var(--font-body); font-size: var(--size-base); color: var(--color-ink); }
.form-input:focus { border-color: var(--color-navy); }
.form-textarea { min-height: var(--textarea-height); resize: vertical; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* Tablet */
@media (max-width: 1023px) {
  :root {
    --size-2xl: 2rem;
    --size-3xl: 2.625rem;
    --gutter: 2rem;
    --section-space: var(--space-8);
  }
  .intro { flex-direction: column; gap: var(--space-5); }
  .service-card { flex-basis: var(--basis-half); }
  .service-detail,
  .service-detail-reverse { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .service-detail-media { order: -1; }
  .gallery-item { flex-basis: var(--basis-half); }
  .split { flex-direction: column; gap: var(--space-7); }
  .contact-layout { flex-direction: column; align-items: stretch; gap: var(--space-7); }
  .footer-col { flex: var(--basis-zero) var(--basis-zero) var(--basis-half); }
  .footer-col-wide { flex-basis: var(--width-full); }
  .cta-band { flex-direction: column; align-items: flex-start; }
}

/* Mobile */
@media (max-width: 639px) {
  :root {
    --size-md: 1.0625rem;
    --size-xl: 1.5rem;
    --size-2xl: 1.75rem;
    --size-3xl: 2.125rem;
    --size-hero: 2.25rem;
    --gutter: 1.25rem;
    --section-space: var(--space-7);
  }
  .brand-legal { display: none; }
  .header-tools { order: 1; margin-left: auto; gap: var(--space-2); }
  .nav-toggle { display: inline-flex; }
  .nav-main { order: 2; margin-left: var(--space-0); display: none; flex-basis: var(--width-full); flex-direction: column; align-items: stretch; gap: var(--space-4); padding-bottom: var(--space-4); }
  .site-header.is-open .nav-main { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: var(--space-0); }
  .nav-link { padding-block: var(--space-3); border-bottom: var(--border-thin) solid var(--color-gray-line); font-size: var(--size-base); }
  .nav-link[aria-current="page"] { border-bottom-color: var(--color-gray-line); color: var(--color-accent-strong); }
  .nav-main .button-primary { width: var(--width-full); box-sizing: border-box; }
  .photo-hero { aspect-ratio: var(--ratio-photo); }
  .button-row { flex-direction: column; }
  .button-row .button-primary,
  .button-row .button-secondary { width: var(--width-full); box-sizing: border-box; }
  .fact-strip { flex-direction: column; gap: var(--space-4); }
  .service-row { flex-direction: column; gap: var(--space-4); }
  .service-card { flex-basis: auto; flex-direction: row; }
  .service-card .photo-frame { flex: var(--basis-zero) var(--basis-zero) var(--basis-half); }
  .service-card .photo { aspect-ratio: auto; height: var(--width-full); }
  .service-card-body { padding: var(--space-4); gap: var(--space-2); }
  .service-card .service-text { display: none; }
  .service-lists { flex-direction: column; gap: var(--space-5); }
  .gallery-row { gap: var(--space-4); }
  .gallery-item { flex-basis: var(--basis-half); }
  .gallery-item .photo-caption { font-size: var(--size-xs); }
  .scope-item { flex-basis: var(--width-full); }
  .contact-form-wrap { padding: var(--space-5); }
  .form-row { flex-direction: column; }
  .form-actions .button-primary { width: var(--width-full); }
  .footer-columns { flex-direction: column; gap: var(--space-5); }
  .footer-col { flex-basis: auto; }
  .footer-base { flex-direction: column; }
}