/* ==========================================================================
   Omega Properties Care — design system
   Dark-first. Every colour is a token; nothing is hardcoded below :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces — near-black, slightly warm: the gallery wall */
  --bg-base:      #0B0C0E;
  --bg-raised:    #131519;
  --bg-overlay:   #1A1D22;
  --bg-inset:     #08090A;
  --bg-scrim:     rgba(0, 0, 0, .62);

  /* Borders. --border-strong carries meaning (input edges), so it clears 3:1
     against the inset field background; --border-subtle is decorative only. */
  --border-subtle: #22262C;
  --border-strong: #5F6A78;

  /* Text — every value clears 4.5:1 on the lightest dark surface (--bg-overlay),
     so it holds on every darker one too. */
  --text-primary:   #F2F4F7;
  --text-secondary: #A8B0BC;
  --text-tertiary:  #7C8694;

  /* Accent — honed brass, echoing limestone and travertine */
  --accent:        #C8A96A;
  --accent-hover:  #D9BE84;
  --accent-press:  #B8985A;
  --accent-muted:  rgba(200, 169, 106, .12);
  --accent-line:   rgba(200, 169, 106, .32);
  --on-accent:     #0B0C0E;

  /* Status */
  --success: #4ADE80;
  --warning: #FBBF24;
  --danger:  #F87171;

  /* Typography */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --text-3xl:  clamp(2rem, 1.6rem + 2vw, 3rem);
  --text-4xl:  clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
  --text-hero: clamp(2.75rem, 1.6rem + 5.4vw, 6.5rem);

  /* Spacing */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-8: 48px;  --space-10: 64px;
  --space-12: 96px; --space-16: 128px; --space-20: 160px;

  --section-y: clamp(64px, 9vh, 144px);
  --gutter: clamp(20px, 4vw, 48px);
  --maxw: 1280px;
  --maxw-prose: 68ch;

  /* Radius */
  --radius-sm: 6px;  --radius-md: 10px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-full: 999px;

  /* Elevation — surface + top highlight first, shadow last */
  --hl: inset 0 1px 0 rgba(255, 255, 255, .06);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .6);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, .72);
  --glow: 0 0 0 1px var(--accent-line), 0 8px 32px -8px rgba(200, 169, 106, .28);

  /* Motion */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  --nav-h: 84px;
  color-scheme: dark;
}

/* Light theme — the same tokens, re-pointed. Dark stays the default. */
:root[data-theme="light"] {
  --bg-base:      #FAF9F7;
  --bg-raised:    #FFFFFF;
  --bg-overlay:   #FFFFFF;
  --bg-inset:     #F1EFEB;
  --bg-scrim:     rgba(24, 22, 18, .48);

  --border-subtle: #E4E0D9;
  --border-strong: #8B877F;

  --text-primary:   #14161A;
  --text-secondary: #4E545E;
  --text-tertiary:  #666D75;

  /* Status colours re-tuned for a light ground — the dark-mode pastels
     fall well below 4.5:1 on white. */
  --success: #297B47;
  --warning: #876713;
  --danger:  #AD4F4F;

  --accent:       #876721;
  --accent-hover: #6F5518;
  --accent-press: #5A4512;
  --accent-muted: rgba(135, 103, 33, .1);
  --accent-line:  rgba(135, 103, 33, .28);
  --on-accent:    #FFFFFF;

  --hl: inset 0 1px 0 rgba(255, 255, 255, .9);
  --shadow-sm: 0 1px 2px rgba(24, 22, 18, .06);
  --shadow-md: 0 8px 24px -8px rgba(24, 22, 18, .14);
  --shadow-lg: 0 24px 60px -16px rgba(24, 22, 18, .18);
  --glow: 0 0 0 1px var(--accent-line), 0 8px 28px -10px rgba(138, 106, 34, .3);

  color-scheme: light;
}

/* Flipping the theme repoints every colour token at once. Without this, each
   element would independently animate its own transition and the switch would
   look like a slow smear rather than a change of lighting. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); letter-spacing: -.01em; }
h6 { font-size: var(--text-base); letter-spacing: -.01em; }

p { margin: 0 0 var(--space-4); max-width: var(--maxw-prose); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

img, svg, video { display: block; max-width: 100%; height: auto; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-8) 0; }

strong, b { color: var(--text-primary); font-weight: 600; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute; top: -100px; left: var(--space-4); z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius-md); font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: 1560px; }
.wrap-narrow { max-width: 860px; }

.section { padding-block: var(--section-y); position: relative; }
.section-sm { padding-block: calc(var(--section-y) * .6); }
.section-flush { padding-block: 0; }
.section-raised { background: var(--bg-raised); }
.section-inset { background: var(--bg-inset); }

/* Grid children must be allowed to shrink below their content width,
   otherwise a wide descendant (a nested grid, a table) pushes the page sideways. */
.grid > *, .split > *, .steps > *, .tiles > *, .stats > * { min-width: 0; }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }

.stack > * + * { margin-top: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.split {
  display: grid; gap: clamp(var(--space-6), 5vw, var(--space-12));
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-aside { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .split-reverse > :first-child { order: 2; }
}

/* Section heading block */
.sec-head { margin-bottom: var(--space-8); max-width: 720px; }
.sec-head-center { margin-inline: auto; text-align: center; }
.sec-head p { color: var(--text-secondary); font-size: var(--text-lg); }
.sec-head-center p { margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--accent); opacity: .6;
}
.sec-head-center .eyebrow::after {
  content: ""; width: 28px; height: 1px; background: var(--accent); opacity: .6;
}

.lead { font-size: var(--text-lg); color: var(--text-secondary); }

/* Hairline divider with a faint vein of accent through the middle */
.vein {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg,
    transparent, var(--border-subtle) 15%, var(--accent-line) 50%, var(--border-subtle) 85%, transparent);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-py: 13px; --btn-px: 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: .01em; line-height: 1.2; text-align: center;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--accent-hover); box-shadow: var(--glow); }
.btn:active { background: var(--accent-press); transform: translateY(1px); box-shadow: none; }

.btn-secondary {
  background: transparent; color: var(--text-primary); border-color: var(--border-strong);
}
.btn-secondary:hover {
  background: var(--bg-raised); border-color: var(--accent); color: var(--text-primary);
  box-shadow: none;
}

.btn-ghost { background: transparent; color: var(--accent); padding-inline: var(--space-2); }
.btn-ghost:hover { background: var(--accent-muted); box-shadow: none; }

.btn-lg { --btn-py: 17px; --btn-px: 32px; font-size: var(--text-base); }
.btn-sm { --btn-py: 9px; --btn-px: 16px; font-size: var(--text-xs); }
.btn-block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; pointer-events: none;
}

/* Inline icons size to the text they sit beside. Without this an SVG with no
   intrinsic size falls back to the default 300x150 replaced-element box. */
.icon { width: 1em; height: 1em; flex: none; }
.btn .icon { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .icon-arrow { transform: translateX(3px); }

/* Inline spinner shown while a form submits */
.btn.is-loading { pointer-events: none; color: transparent; position: relative; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .25); border-top-color: var(--on-accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Text link with an underline that grows from the left */
.link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--accent); font-weight: 500; position: relative;
  padding-bottom: 2px;
}
.link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.link:hover::after { transform: scaleX(1); }
.link .icon { transition: transform var(--dur-fast) var(--ease-out); }
.link:hover .icon-arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */

.header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: var(--bg-base);
  border-bottom-color: var(--border-subtle);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header.is-stuck {
    background: color-mix(in srgb, var(--bg-base) 78%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
  }
}

.nav {
  display: flex; align-items: center; gap: var(--space-5);
  height: var(--nav-h);
  transition: height var(--dur-base) var(--ease-out);
}
.header.is-stuck .nav { height: 66px; }

.brand { flex: none; display: flex; align-items: center; }
.brand img {
  width: 156px; height: auto;
  transition: width var(--dur-base) var(--ease-out);
}
.header.is-stuck .brand img { width: 132px; }

/* The logo art is dark-on-transparent, so it needs lifting on a dark ground */
:root:not([data-theme="light"]) .brand img { filter: brightness(0) invert(1); }

.nav-list { display: none; align-items: center; gap: var(--space-1); margin-left: auto; }
@media (min-width: 1080px) { .nav-list { display: flex; } }

.nav-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm); font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  position: relative;
}
.nav-link:hover { color: var(--text-primary); }
.nav-link[aria-current="page"] { color: var(--text-primary); }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 2px;
  height: 1px; background: var(--accent);
}
.nav-link .chev { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.nav-item.is-open > .nav-link .chev { transform: rotate(180deg); }
.nav-item.is-open > .nav-link { color: var(--text-primary); }

.nav-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
@media (min-width: 1080px) { .nav-actions { margin-left: 0; } }
.nav-actions .btn { display: none; }
@media (min-width: 640px) { .nav-actions .btn { display: inline-flex; } }

/* Icon button — theme toggle, menu toggle, lightbox chrome */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: transparent; color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-raised); }
.icon-btn svg { width: 20px; height: 20px; }
@media (min-width: 1080px) { .nav-toggle { display: none; } }

.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }

/* Mega-menu — a contained panel centred under the bar, not a full-bleed slab. */
.mega {
  position: absolute; top: 100%; right: auto;
  left: 50%;
  width: min(880px, calc(100vw - 2 * var(--gutter)));
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
  pointer-events: none;
}
.nav-item.is-open .mega {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.mega-inner {
  margin-top: var(--space-2);
  /* Opaque by default so the panel is always readable; the translucent
     treatment is opt-in only where backdrop-filter actually composites. */
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--hl);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5) var(--space-6);
  /* the split group needs the extra width */
  grid-template-columns: 1.75fr 1fr 1fr;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mega-inner {
    background: color-mix(in srgb, var(--bg-overlay) 92%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    backdrop-filter: blur(20px) saturate(1.3);
  }
}

.mega-col + .mega-col {
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-6);
}

.mega-col-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-tertiary);
}

.mega-list { display: grid; gap: 1px; align-content: start; }
/* A group with more than four entries runs in two inner columns, so one long
   group cannot stretch the panel and leave the others sitting in empty space.
   Column flow keeps it reading top-to-bottom as two lists, not a zigzag. */
.mega-list.is-split {
  grid-template-rows: repeat(var(--rows, 3), auto);
  grid-auto-flow: column;
  column-gap: var(--space-4);
}

.mega-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.mega-link:hover {
  background: var(--bg-raised);
  border-left-color: var(--accent);
  color: var(--text-primary);
}

.mega-foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-1);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 150;
  visibility: hidden; pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }

.drawer-scrim {
  position: absolute; inset: 0;
  background: var(--bg-scrim);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.drawer.is-open .drawer-scrim { opacity: 1; }

.drawer-panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(420px, 88vw);
  background: var(--bg-raised);
  border-left: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-base) cubic-bezier(.32, .72, 0, 1);
}
.drawer.is-open .drawer-panel { transform: none; }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}
.drawer-body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); }
.drawer-foot {
  flex: none; padding: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-inset);
  display: grid; gap: var(--space-3);
}

.drawer-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: var(--text-lg); font-family: var(--font-display);
  width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer; text-align: left;
}
.drawer-link .chev { width: 18px; height: 18px; color: var(--text-tertiary); transition: transform var(--dur-base) var(--ease-out); }
.drawer-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Staggered entrance for drawer items */
.drawer.is-open .drawer-item {
  animation: drawerIn var(--dur-base) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 40ms + 80ms);
}
@keyframes drawerIn { from { opacity: 0; transform: translateX(16px); } }

.drawer-sub { display: grid; overflow: hidden; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.drawer-sub > div { min-height: 0; }
.drawer-link[aria-expanded="true"] + .drawer-sub { grid-template-rows: 1fr; }
.drawer-sub a {
  display: block; padding: var(--space-3) 0 var(--space-3) var(--space-4);
  color: var(--text-secondary); font-size: var(--text-sm);
  border-left: 1px solid var(--border-subtle);
}
.drawer-sub a:hover { color: var(--accent); border-left-color: var(--accent); }

/* Sticky mobile call bar */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg-overlay) 92%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-subtle);
  transform: translateY(110%);
  transition: transform var(--dur-base) var(--ease-out);
}
.callbar.is-visible { transform: none; }
@media (min-width: 640px) { .callbar { display: none; } }

/* --------------------------------------------------------------------------
   5b. Persistent WhatsApp button
   A circle at rest that grows into a labelled pill on hover or focus.
   -------------------------------------------------------------------------- */

.wa {
  --wa-green: #25D366;
  position: fixed; z-index: 95;
  right: var(--space-5); bottom: var(--space-5);
  display: inline-flex; align-items: center;
  height: 56px; padding-inline: 15px;
  border-radius: var(--radius-full);
  background: var(--wa-green);
  color: #06231A;
  box-shadow: 0 10px 28px -8px rgba(37, 211, 102, .5), 0 2px 10px rgba(0, 0, 0, .45);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              bottom var(--dur-base) var(--ease-out);
}
.wa svg { width: 26px; height: 26px; flex: none; }

.wa span {
  max-width: 0; margin-left: 0;
  overflow: hidden; white-space: nowrap;
  opacity: 0;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  transition: max-width var(--dur-base) var(--ease-out),
              margin-left var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.wa:hover, .wa:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(37, 211, 102, .6), 0 2px 10px rgba(0, 0, 0, .45); }
.wa:hover span, .wa:focus-visible span { max-width: 140px; margin-left: 10px; opacity: 1; }
.wa:active { transform: translateY(0); }

/* Lift clear of the mobile call bar whenever it is showing. */
.callbar.is-visible ~ .wa { bottom: calc(var(--space-5) + 76px); }

@media (max-width: 640px) {
  .wa { right: var(--space-4); bottom: var(--space-4); height: 52px; padding-inline: 13px; }
  .wa svg { width: 24px; height: 24px; }
  /* no hover on touch — keep it a clean circle */
  .wa span { display: none; }
  .callbar.is-visible ~ .wa { bottom: calc(var(--space-4) + 78px); }
}

@media print { .wa { display: none !important; } }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--nav-h) + var(--space-10));
  padding-bottom: var(--space-12);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s var(--ease-out);
}
.hero-media img.is-active { opacity: 1; }
/* Three stacked scrims so type always meets contrast wherever the photograph
   happens to be bright: a floor-up wash, a left wash behind the copy, and a
   top vignette that keeps the header legible. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      var(--bg-base) 3%,
      color-mix(in srgb, var(--bg-base) 72%, transparent) 45%,
      color-mix(in srgb, var(--bg-base) 34%, transparent) 100%),
    linear-gradient(to right,
      color-mix(in srgb, var(--bg-base) 84%, transparent),
      color-mix(in srgb, var(--bg-base) 24%, transparent) 70%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--bg-base) 72%, transparent),
      transparent 22%);
}
/* Portrait viewports have no horizontal room for the left wash to do its job. */
@media (max-width: 720px) {
  .hero-media::after {
    background:
      linear-gradient(to top,
        var(--bg-base) 3%,
        color-mix(in srgb, var(--bg-base) 82%, transparent) 55%,
        color-mix(in srgb, var(--bg-base) 58%, transparent) 100%),
      linear-gradient(to bottom,
        color-mix(in srgb, var(--bg-base) 80%, transparent),
        transparent 26%);
  }
}
.hero-inner { position: relative; z-index: 1; width: 100%; }
.hero h1 {
  font-size: var(--text-hero);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 15ch;
  margin-bottom: var(--space-5);
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero p { font-size: var(--text-lg); max-width: 52ch; color: var(--text-secondary); }
.hero .cluster { margin-top: var(--space-8); }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-8);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}
.hero-meta div { min-width: 120px; }
.hero-meta dt { color: var(--text-tertiary); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--space-1); }
.hero-meta dd {
  margin: 0; color: var(--text-primary);
  font-family: var(--font-display); font-size: var(--text-xl);
  font-variant-numeric: tabular-nums; /* digits keep a fixed width while counting */
}
.hero-meta dd .sym { color: var(--accent); }

/* Slide progress dots */
.hero-dots { display: flex; gap: var(--space-2); margin-top: var(--space-8); }
.hero-dots button {
  width: 36px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: var(--border-strong); border-radius: var(--radius-full);
  transition: background-color var(--dur-fast) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.hero-dots button[aria-selected="true"] { background: var(--accent); width: 56px; }

/* --------------------------------------------------------------------------
   6b. Typewriter headline
   Characters are split into spans but keep their space from the very first
   frame — they only fade in — so nothing below the headline ever reflows.
   -------------------------------------------------------------------------- */

/* Hide only until the script has split the line, never longer than the failsafe. */
html.js:not(.tw-failsafe) [data-typewriter]:not(.tw-ready) { visibility: hidden; }

/* Words stay unbreakable so per-character spans can't wrap mid-word. */
[data-typewriter] .tw-word { white-space: nowrap; }

[data-typewriter] .tw-char { position: relative; opacity: 0; }
[data-typewriter] .tw-char.is-on,
[data-typewriter].is-done .tw-char { opacity: 1; }

/* Caret sits on the trailing edge of the last revealed character. */
[data-typewriter] .tw-char.tw-caret::after {
  content: "";
  position: absolute;
  right: -.09em; top: .13em;
  width: .05em; height: .76em;
  background: var(--accent);
  animation: twBlink .8s steps(1) infinite;
}
[data-typewriter].is-finished .tw-char::after { display: none; }

@keyframes twBlink {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* No typing for reduced-motion users — the line is simply there. */
@media (prefers-reduced-motion: reduce) {
  [data-typewriter] .tw-char { opacity: 1; }
  [data-typewriter] .tw-char.tw-caret::after { display: none; }
  html.js [data-typewriter] { visibility: visible; }
}

/* --------------------------------------------------------------------------
   7. Page header (interior pages)
   -------------------------------------------------------------------------- */

.pagehead {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--space-10));
  padding-bottom: var(--space-10);
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
}
.pagehead-media { position: absolute; inset: 0; z-index: 0; }
.pagehead-media img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.pagehead-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg-base), color-mix(in srgb, var(--bg-base) 62%, transparent));
}
.pagehead .wrap { position: relative; z-index: 1; }
.pagehead h1 { margin-bottom: var(--space-3); max-width: 20ch; }
.pagehead p { color: var(--text-secondary); font-size: var(--text-lg); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); font-size: var(--text-sm); }
.crumbs a { color: var(--text-tertiary); transition: color var(--dur-fast) var(--ease-out); }
.crumbs a:hover { color: var(--accent); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: var(--space-2); color: var(--border-strong); }
.crumbs [aria-current] { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--hl);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md), var(--hl); }

/* accent hairline that wipes in along the bottom edge */
.card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover::after { transform: scaleX(1); }

.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-inset); }
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card-media img { transform: scale(1.045); }

.card-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; gap: var(--space-3); }
.card-body h3 { margin: 0; font-size: var(--text-xl); }
.card-body p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; }
.card-body .link { margin-top: auto; padding-top: var(--space-2); }

.card-index {
  position: absolute; top: var(--space-4); right: var(--space-4); z-index: 1;
  padding: var(--space-1) var(--space-3);
  background: color-mix(in srgb, var(--bg-base) 72%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  color: var(--text-secondary); font-size: var(--text-xs);
  font-variant-numeric: tabular-nums; letter-spacing: .08em;
}

/* Stretched link: whole card is clickable, inner links still work */
.card-link::before { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Icon card — no image, for process/values */
.card-plain {
  background: transparent; border-color: transparent; box-shadow: none;
  border-radius: 0; border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-5);
}
.card-plain:hover { transform: none; box-shadow: none; border-color: transparent; border-top-color: var(--accent); }
.card-plain::after { display: none; }
.card-plain .num {
  display: block; margin-bottom: var(--space-3);
  color: var(--accent); font-family: var(--font-display); font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   9. Project grid & lightbox
   -------------------------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.chip {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  background: transparent; color: var(--text-secondary);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.tiles { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }

.tile {
  position: relative; display: block;
  aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-inset);
  cursor: zoom-in;
}
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.tile:hover img { transform: scale(1.06); }
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg-base) 92%, transparent) 4%, transparent 58%);
  opacity: .85; transition: opacity var(--dur-base) var(--ease-out);
}
.tile:hover::after { opacity: 1; }
.tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: var(--space-5);
  transform: translateY(6px); opacity: .92;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.tile:hover .tile-cap { transform: none; opacity: 1; }
.tile-cap strong { display: block; color: var(--text-primary); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; }
.tile-cap span { color: var(--accent); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; }
.tile.is-hidden { display: none; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg-inset) 94%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(92vw, 1400px); max-height: 82vh;
  object-fit: contain; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transform: scale(.97); transition: transform var(--dur-base) var(--ease-out);
}
.lightbox.is-open img { transform: none; }
.lightbox-cap {
  position: absolute; left: 0; right: 0; bottom: var(--space-8);
  text-align: center; color: var(--text-secondary); font-size: var(--text-sm);
}
.lightbox-cap strong { display: block; color: var(--text-primary); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; }
.lightbox-close { position: absolute; top: var(--space-5); right: var(--space-5); }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: var(--space-5); }
.lightbox-next { right: var(--space-5); }
.lightbox .icon-btn { background: color-mix(in srgb, var(--bg-overlay) 80%, transparent); }

/* Horizontal photo strip — CSS scroll-snap, no carousel library */
.shots {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(88%, 620px);
  gap: var(--space-4);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-8);
}
.shot {
  scroll-snap-align: start;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-inset);
  cursor: zoom-in;
  aspect-ratio: 16 / 10;
}
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.shot:hover img { transform: scale(1.04); }

/* --------------------------------------------------------------------------
   10. Before / after slider — the signature component
   -------------------------------------------------------------------------- */

.ba {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--border-subtle);
  aspect-ratio: 16 / 10; background: var(--bg-inset);
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  cursor: ew-resize;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 2px; background: var(--accent);
  transform: translateX(-1px);
  box-shadow: 0 0 24px rgba(200, 169, 106, .5);
}
.ba-knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-out);
}
.ba:hover .ba-knob { transform: translate(-50%, -50%) scale(1.08); }
.ba-knob svg { width: 22px; height: 22px; }
.ba-tag {
  position: absolute; bottom: var(--space-4); z-index: 2;
  padding: var(--space-1) var(--space-3);
  background: color-mix(in srgb, var(--bg-base) 76%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  color: var(--text-primary); font-size: var(--text-xs);
  letter-spacing: .12em; text-transform: uppercase;
}
.ba-tag-before { left: var(--space-4); }
.ba-tag-after { right: var(--space-4); }
.ba input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
}
.ba input[type="range"]:focus-visible ~ .ba-handle .ba-knob {
  outline: 2px solid var(--text-primary); outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   11. Client logo wall
   -------------------------------------------------------------------------- */

/* Column counts divide the logo count exactly, so the wall is always full.
   The rules are also written so a future odd count leaves invisible empty
   cells rather than a slab of border colour. */
.logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 700px) {
  .logos { grid-template-columns: repeat(5, 1fr); }
}

.logo-cell {
  display: grid; place-items: center;
  padding: var(--space-6) var(--space-5);
  /* lines come from the cells, so unused grid area stays invisible */
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  min-height: 120px;
  /* an opaque background the blended logos below can composite against,
     and its own stacking context so they never blend with the page */
  background: var(--bg-base);
  isolation: isolate;
  transition: background-color var(--dur-base) var(--ease-out);
}
.logo-cell:hover { background: var(--bg-raised); }

.logo-cell img {
  max-height: 52px; width: auto; object-fit: contain;
  filter: grayscale(1) brightness(1.9) contrast(.55);
  opacity: .62;
  transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.logo-cell:hover img { filter: none; opacity: 1; }

/* Artwork flattened onto white.
   Dark theme: invert turns the white plate black, then `screen` blending makes
   black transparent — the plate disappears completely instead of merely going
   dark, and only the (now light) mark remains. There is no real colour to
   reveal on hover, so these brighten instead. */
:root:not([data-theme="light"]) .logo-cell.is-flat img {
  filter: grayscale(1) invert(1) contrast(1.05);
  mix-blend-mode: screen;
  opacity: .72;
}
:root:not([data-theme="light"]) .logo-cell.is-flat:hover img {
  filter: grayscale(1) invert(1) contrast(1.15) brightness(1.08);
  opacity: 1;
}

/* Light theme: never invert — `multiply` drops the white plate into the light
   ground instead. The plate must stay pure white for that to work, so the flat
   logos skip the contrast reduction that would grey it down to a visible box. */
:root[data-theme="light"] .logo-cell img { filter: grayscale(1) contrast(.6); opacity: .72; }
:root[data-theme="light"] .logo-cell:hover img { filter: none; opacity: 1; }

:root[data-theme="light"] .logo-cell.is-flat img {
  filter: grayscale(1);
  mix-blend-mode: multiply;
  opacity: .68;
}
:root[data-theme="light"] .logo-cell.is-flat:hover img {
  filter: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   12. Stats
   -------------------------------------------------------------------------- */

.stats { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { border-top: 1px solid var(--border-subtle); padding-top: var(--space-5); }
.stat-num {
  display: flex; align-items: baseline; gap: 2px;
  margin: 0 0 var(--space-2);
  color: var(--text-primary); font-family: var(--font-display);
  font-size: var(--text-4xl); line-height: 1; font-variant-numeric: tabular-nums;
}
.stat-num .sym { color: var(--accent); }
.stat-label { margin: 0; color: var(--text-tertiary); font-size: var(--text-sm); letter-spacing: .06em; }

/* --------------------------------------------------------------------------
   13. Process / timeline
   -------------------------------------------------------------------------- */

.steps { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); counter-reset: step; }

.timeline { position: relative; padding-left: var(--space-8); }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(var(--accent-line), var(--border-subtle));
}
.timeline li { position: relative; padding-bottom: var(--space-8); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: calc(var(--space-8) * -1); top: 6px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg-base); border: 2px solid var(--accent);
}
.timeline .year {
  display: block; color: var(--accent); font-size: var(--text-sm);
  letter-spacing: .14em; margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.timeline h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }

/* --------------------------------------------------------------------------
   14. Tables
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
table.data {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-sm); min-width: 620px;
}
table.data th, table.data td {
  padding: var(--space-4) var(--space-5);
  text-align: left; border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
table.data thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-overlay);
  color: var(--text-primary);
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
table.data tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
table.data tbody tr:hover { background: var(--bg-raised); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td:first-child { color: var(--text-primary); font-weight: 500; }

/* Collapse to stacked cards on small screens */
@media (max-width: 640px) {
  .table-stack .table-scroll { border: 0; overflow: visible; }
  .table-stack table.data { min-width: 0; }
  .table-stack table.data thead { display: none; }
  .table-stack table.data tr {
    display: block; margin-bottom: var(--space-3);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    background: var(--bg-raised); padding: var(--space-2);
  }
  .table-stack table.data td { display: flex; gap: var(--space-4); border: 0; padding: var(--space-2) var(--space-3); }
  .table-stack table.data td::before {
    content: attr(data-label);
    flex: none; width: 40%; color: var(--text-tertiary);
    font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase;
  }
}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--space-5); }
.form > *, .form-row > * { min-width: 0; }

/* Single column by default; paired fields only once there is room for them. */
.form-row { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

.field { display: grid; gap: var(--space-2); min-width: 0; }
.field > label {
  color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500;
}
.field > label .req { color: var(--accent); }

.input, .select, .textarea {
  width: 100%;
  padding: 13px var(--space-4);
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body); font-size: var(--text-base);
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-tertiary); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
  background: var(--bg-raised);
}
.textarea { min-height: 140px; resize: vertical; }

.select {
  appearance: none; cursor: pointer;
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7480' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 18px;
}

/* Helper line reserves its own height so nothing jumps on validation */
.field-msg {
  min-height: 18px; font-size: var(--text-xs); line-height: 1.5;
  color: var(--text-tertiary);
}
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: var(--danger); }
.field.is-invalid .field-msg { color: var(--danger); }
.field.is-valid .input, .field.is-valid .select, .field.is-valid .textarea { border-color: var(--success); }

/* Honeypot */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

fieldset { border: 0; margin: 0; padding: 0; }

/* Multi-step progress */
.steps-bar { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); }
.steps-bar div { flex: 1; height: 3px; border-radius: var(--radius-full); background: var(--border-subtle); overflow: hidden; }
.steps-bar div.is-done { background: var(--accent); }

/* --------------------------------------------------------------------------
   16. Toasts
   -------------------------------------------------------------------------- */

.toasts {
  position: fixed; z-index: 300;
  /* clears the WhatsApp button, which shares this corner */
  bottom: calc(var(--space-5) + 68px); right: var(--space-5);
  display: grid; gap: var(--space-3);
  width: min(380px, calc(100vw - var(--space-8)));
  pointer-events: none;
}
@media (max-width: 640px) {
  .toasts { top: calc(var(--nav-h) + var(--space-2)); bottom: auto; left: var(--space-4); right: var(--space-4); width: auto; }
}
.toast {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), var(--hl);
  pointer-events: auto;
  animation: toastIn var(--dur-base) var(--ease-out);
}
.toast.is-out { animation: toastOut var(--dur-base) var(--ease-out) forwards; }
.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast strong { display: block; color: var(--text-primary); font-size: var(--text-sm); margin-bottom: 2px; }
.toast p { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.toast svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.toast-success svg { color: var(--success); }
.toast-error svg { color: var(--danger); }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); animation: toastBar 5s linear forwards; }
.toast:hover .toast-bar { animation-play-state: paused; }

@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes toastBar { from { width: 100%; } to { width: 0; } }

/* --------------------------------------------------------------------------
   17. Empty & skeleton states
   -------------------------------------------------------------------------- */

.empty {
  display: grid; place-items: center; gap: var(--space-4);
  padding: var(--space-12) var(--space-5);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  text-align: center;
}
.empty svg { width: 40px; height: 40px; color: var(--text-tertiary); }
.empty h3 { margin: 0; font-size: var(--text-lg); }
.empty p { margin: 0; color: var(--text-tertiary); font-size: var(--text-sm); }

.skeleton {
  position: relative; overflow: hidden;
  background: var(--bg-raised); border-radius: var(--radius-md);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-overlay) 90%, white 6%), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* Blur-up placeholder for lazy images */
.img-load { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.img-load.is-loaded { opacity: 1; }

/* --------------------------------------------------------------------------
   18. Aside / service navigation
   -------------------------------------------------------------------------- */

.aside {
  position: sticky; top: calc(var(--nav-h) + var(--space-5));
  display: grid; gap: var(--space-6);
}
.aside-block {
  padding: var(--space-5);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--hl);
}
.aside-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-tertiary);
}
.aside-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary); font-size: var(--text-sm);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.aside-nav li:last-child a { border-bottom: 0; }
.aside-nav a:hover { color: var(--text-primary); padding-left: var(--space-2); }
.aside-nav a[aria-current] { color: var(--accent); }
.aside-nav a[aria-current]::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }

.contact-line { display: flex; gap: var(--space-3); padding: var(--space-3) 0; align-items: flex-start; }
.contact-line svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 3px; }
.contact-line dt { color: var(--text-tertiary); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.contact-line dd { margin: 0; color: var(--text-primary); font-size: var(--text-sm); }
.contact-line a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   19. Prose (long-form service copy)
   -------------------------------------------------------------------------- */

.prose { max-width: var(--maxw-prose); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2, .prose h3 { margin-top: var(--space-8); }
.prose h3 { font-size: var(--text-xl); }
.prose .lead {
  font-size: var(--text-xl); line-height: 1.5;
  color: var(--text-primary); font-family: var(--font-display);
  letter-spacing: -.015em;
  padding-left: var(--space-5);
  border-left: 2px solid var(--accent);
}
.prose ul { display: grid; gap: var(--space-2); }
.prose ul li { position: relative; padding-left: var(--space-5); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 1px; background: var(--accent); }

/* --------------------------------------------------------------------------
   20. Tabs & accordion
   -------------------------------------------------------------------------- */

.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-6); }
.tab {
  padding: var(--space-3) var(--space-4);
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-tertiary); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  cursor: pointer; margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--text-secondary); }
.tab[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--accent); }
.tabpanel[hidden] { display: none; }

.acc { border-top: 1px solid var(--border-subtle); }
.acc-item { border-bottom: 1px solid var(--border-subtle); }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--text-primary); font-family: var(--font-display); font-size: var(--text-lg);
  transition: color var(--dur-fast) var(--ease-out);
}
.acc-btn:hover { color: var(--accent); }
.acc-btn .chev { width: 20px; height: 20px; flex: none; color: var(--text-tertiary); transition: transform var(--dur-base) var(--ease-out); }
.acc-btn[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--accent); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.acc-panel > div { min-height: 0; overflow: hidden; }
.acc-btn[aria-expanded="true"] + .acc-panel { grid-template-rows: 1fr; }
.acc-panel p { padding-bottom: var(--space-5); color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   21. CTA band
   -------------------------------------------------------------------------- */

.cta {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  background: var(--bg-raised);
  padding: clamp(var(--space-8), 6vw, var(--space-12));
  box-shadow: var(--hl);
}
.cta::before {
  content: ""; position: absolute; z-index: 0;
  width: 640px; height: 640px; right: -180px; top: -320px;
  background: radial-gradient(circle, var(--accent-muted), transparent 68%);
  pointer-events: none;
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { max-width: 18ch; }
.cta p { color: var(--text-secondary); font-size: var(--text-lg); }

/* --------------------------------------------------------------------------
   22. Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-inset);
  padding-top: var(--section-y);
  padding-bottom: var(--space-8);
}
.footer-grid {
  display: grid; gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  padding-bottom: var(--space-10);
}
.footer-title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-tertiary);
}
.footer a { color: var(--text-secondary); transition: color var(--dur-fast) var(--ease-out); }
.footer a:hover { color: var(--accent); }
.footer-list { display: grid; gap: var(--space-3); font-size: var(--text-sm); }
.footer-brand img { width: 150px; margin-bottom: var(--space-5); }
:root:not([data-theme="light"]) .footer-brand img { filter: brightness(0) invert(1); }
.footer-brand p { font-size: var(--text-sm); color: var(--text-tertiary); }

.offices { display: grid; gap: var(--space-4); font-size: var(--text-sm); }
.offices div { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.offices dt { color: var(--text-tertiary); }
.offices dd { margin: 0; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: center; justify-content: space-between;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary); font-size: var(--text-xs);
}
.socials { display: flex; gap: var(--space-2); }
.socials a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  transition: all var(--dur-fast) var(--ease-out);
}
.socials a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-muted); }
.socials svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   23. Scroll reveal
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   24. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-media img { opacity: 1; }
  .hero-media img:not(.is-active) { display: none; }
}

/* --------------------------------------------------------------------------
   25. Print
   -------------------------------------------------------------------------- */

@media print {
  .header, .drawer, .callbar, .toasts, .cta, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
}