/* =============================================================================
   INAROCK INFRA — Design System
   -----------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout
   5.  Buttons & links
   6.  Forms
   7.  Navigation
   8.  Hero
   9.  Stats
   10. Editorial sections
   11. Project cards & grids
   12. Process / pillars
   13. Location map
   14. Calculator
   15. Testimonials
   16. Insights
   17. Accordion / FAQ
   18. Modal & overlays
   19. Footer
   20. Mobile action bar
   21. Motion
   22. Utilities
   ========================================================================== */

/* =============================================================================
   0. FONTS
   -----------------------------------------------------------------------------
   Self-hosted so they load from our own origin (no third-party connection,
   and they can be preloaded). Both families are variable fonts, so one file
   covers the whole weight range.

   The "Fallback" faces below carry metric overrides measured against the real
   webfonts by tools/font-metrics.mjs. Matching the metrics means the fallback
   occupies exactly the same space, so the swap causes no layout shift.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/playfair-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/playfair-latin-italic-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Metric-matched fallbacks -------------------------------------------
   Values measured against the real webfonts by tools/font-metrics.mjs — do
   not hand-edit. Re-run that script if either font file is replaced.        */

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 104.55%;
  ascent-override: 92.78%;
  descent-override: 22.96%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Playfair Fallback';
  src: local('Georgia');
  size-adjust: 97.06%;
  ascent-override: 111.27%;
  descent-override: 25.76%;
  line-gap-override: 0%;
}

/* Windows machines without Georgia fall back to Times New Roman, which needs
   its own adjustment to land on the same metrics. */
@font-face {
  font-family: 'Playfair Fallback';
  src: local('Times New Roman');
  size-adjust: 103.06%;
  ascent-override: 104.79%;
  descent-override: 24.26%;
  line-gap-override: 0%;
}

/* =============================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- Brand -------------------------------------------------------------
     Primary sampled directly from the official INAROCK INFRA logo artwork. */
  --primary:        #A83236;
  --primary-dark:   #7C2427;
  --primary-light:  #C4413F;
  --primary-soft:   #F5E9E9;

  /* Premium accent — brass. Used sparingly: rules, eyebrows, numerals. */
  --accent:         #C0A062;
  --accent-dark:    #9A7E45;
  --accent-soft:    #F5EEE0;

  /* Neutrals — warm, never pure grey */
  --dark:           #14100E;
  --dark-2:         #1F1A17;
  --dark-3:         #2E2723;
  --light:          #FAF7F2;
  --surface:        #FFFFFF;
  --surface-2:      #F3EEE7;
  --muted:          #736C64;
  --muted-light:    #A29A91;
  --border:         #E5DED4;
  --border-strong:  #D3C9BC;
  --border-dark:    rgba(255, 255, 255, 0.14);

  /* Semantic */
  --text:           var(--dark);
  --text-invert:    #F7F3EE;
  --bg:             var(--light);

  /* --- Typography --------------------------------------------------------- */
  --font-display: 'Playfair Display', 'Playfair Fallback', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale — 320px → 1440px */
  /* 12px floor: below this, letterspaced uppercase labels stop being
     comfortably legible on a phone. */
  --fs-eyebrow: 0.75rem;
  --fs-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);
  --fs-base: clamp(0.9375rem, 0.90rem + 0.20vw, 1.0625rem);
  --fs-lg:   clamp(1.0625rem, 1.00rem + 0.35vw, 1.25rem);
  --fs-xl:   clamp(1.25rem,  1.13rem + 0.55vw, 1.5rem);
  --fs-h4:   clamp(1.375rem, 1.20rem + 0.80vw, 1.875rem);
  --fs-h3:   clamp(1.625rem, 1.35rem + 1.30vw, 2.5rem);
  --fs-h2:   clamp(2rem,     1.55rem + 2.10vw, 3.5rem);
  /* Minimums are sized so the longest authored line still fits a 320px screen. */
  --fs-h1:   clamp(2.125rem, 1.55rem + 3.60vw, 5.5rem);
  --fs-hero: clamp(2.25rem,  1.35rem + 5.20vw, 7rem);

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-body:  1.72;

  --ls-tight:  -0.03em;
  --ls-normal: -0.011em;
  --ls-wide:   0.14em;
  --ls-wider:  0.22em;

  /* --- Space -------------------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6.5rem;  --sp-12: 8rem;

  --section-y: clamp(4rem, 2.4rem + 7vw, 9rem);
  --gutter:    clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --maxw:      1360px;
  --maxw-text: 68ch;

  /* --- Form ---------------------------------------------------------------- */
  --radius-xs: 2px;
  --radius:    3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(20, 16, 14, 0.05);
  --shadow:    0 4px 16px -4px rgba(20, 16, 14, 0.08), 0 1px 3px rgba(20, 16, 14, 0.05);
  --shadow-md: 0 12px 32px -8px rgba(20, 16, 14, 0.12), 0 2px 6px rgba(20, 16, 14, 0.05);
  --shadow-lg: 0 30px 70px -18px rgba(20, 16, 14, 0.22), 0 4px 12px rgba(20, 16, 14, 0.06);
  --shadow-xl: 0 50px 110px -30px rgba(20, 16, 14, 0.34);

  /* --- Motion --------------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  180ms;
  --dur:       320ms;
  --dur-slow:  620ms;
  --dur-image: 900ms;

  --nav-h: 84px;
  --z-nav: 100;
  --z-modal: 300;
}

@media (max-width: 900px) {
  :root { --nav-h: 68px; }
}

/* =============================================================================
   2. RESET & BASE
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  /* Needed alongside the body rule — clipping only on body still lets the
     root element scroll horizontally. */
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  overflow-x: hidden;
  min-height: 100vh;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; padding: 0; cursor: pointer; }

/* Body copy may break a long word rather than overflow. Headings must not —
   a shattered display headline looks broken, so they wrap at spaces only and
   we size their containers to suit instead. */
p { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { overflow-wrap: normal; hyphens: none; }

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

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

hr { border: 0; border-top: 1px solid var(--border); }

::selection { background: var(--primary); color: #fff; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.on-dark :focus-visible,
.footer :focus-visible { outline-color: var(--accent); }

/* Screen-reader only, but focusable for skip links */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 999;
  background: var(--dark); color: var(--text-invert);
  padding: 0.85rem 1.75rem;
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* =============================================================================
   3. TYPOGRAPHY
   ========================================================================== */

/* `inherit`, not a fixed colour: every dark surface (.section--dark, .page-head,
   .cta-band, .footer, .pcard …) sets its own text colour, and headings must
   follow it. A hard-coded colour here renders near-black on near-black. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: inherit;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

h5, h6 {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1.4;
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 400;
}

/* Italic serif for emphasis inside display headings — a signature detail */
.display em, h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--primary);
  font-weight: 400;
}

/* On every dark surface the accent brass carries the emphasis instead — brand
   crimson on near-black does not clear a readable contrast ratio. */
.on-dark :is(h1, h2, h3, h4, .display) em,
.section--dark :is(h1, h2, h3, h4, .display) em,
.page-head :is(h1, h2, h3, h4) em,
.cta-band :is(h1, h2, h3, h4) em,
.footer :is(h1, h2, h3, h4) em,
.hero :is(h1, h2, h3) em {
  color: var(--accent);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;   /* wide letter-spacing overflows narrow screens otherwise */
  gap: 0.7rem;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--sp-5);
}
.eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--accent);
  flex: none;
}
.on-dark .eyebrow { color: var(--accent); }
.on-dark .eyebrow::before { background: var(--accent); opacity: 0.55; }

.lede {
  font-size: var(--fs-lg);
  line-height: 1.62;
  color: var(--muted);
  max-width: 56ch;
}

.prose { max-width: var(--maxw-text); }
.prose p + p { margin-top: 1.35em; }
.prose p { color: var(--muted); }

.text-muted { color: var(--muted); }
.on-dark { color: var(--text-invert); }

/* --- Dark-surface secondary text ----------------------------------------
   --muted is tuned for the warm-white ground and disappears on near-black,
   so every dark container lifts its secondary copy in one place. */
:is(.on-dark, .section--dark, .page-head, .cta-band, .footer, .stats)
  :is(.lede, .prose p, .text-muted) {
  color: rgba(247, 243, 238, 0.72);
}
:is(.on-dark, .section--dark, .page-head, .cta-band) .form-note {
  color: rgba(247, 243, 238, 0.5);
}

/* Numerals — tabular where alignment matters */
.tnum { font-variant-numeric: tabular-nums; }

/* =============================================================================
   4. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 940px; }
.container--wide   { max-width: 1600px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--dark  { background: var(--dark); color: var(--text-invert); }
.section--surface { background: var(--surface); }
.section--alt   { background: var(--surface-2); }

/* Hairline rule that sits above a section heading */
.section-rule { border-top: 1px solid var(--border); }
.on-dark .section-rule, .section--dark .section-rule { border-color: var(--border-dark); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-9);
}
@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: end;
    gap: var(--sp-8);
  }
  .section-head--split .section-head__aside { padding-bottom: 0.4rem; }
}
.section-head__title { max-width: 24ch; }
.section-head--center { text-align: center; justify-items: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .section-head__title { max-width: 24ch; margin-inline: auto; }
.section-head--center .lede { margin-inline: auto; }

.grid { display: grid; gap: var(--sp-6); }
.stack > * + * { margin-top: var(--sp-4); }

/* =============================================================================
   5. BUTTONS & LINKS
   ========================================================================== */

.btn {
  --btn-bg: var(--dark);
  --btn-fg: var(--text-invert);
  --btn-bd: var(--dark);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.05rem 2rem;
  min-height: 52px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: transform;
}

/* Wipe fill — the premium hover, no gradient involved */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur) var(--ease-out);
  z-index: -1;
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.btn:hover, .btn:focus-visible { color: #fff; border-color: var(--primary); }
.btn:active { transform: translateY(1px); }

.btn--primary { --btn-bg: var(--primary); --btn-bd: var(--primary); --btn-fg: #fff; }
.btn--primary::before { background: var(--dark); }
.btn--primary:hover, .btn--primary:focus-visible { border-color: var(--dark); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--dark);
  --btn-bd: var(--border-strong);
}
.btn--ghost:hover { border-color: var(--primary); }

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: var(--text-invert);
  --btn-bd: rgba(255, 255, 255, 0.34);
}
.btn--outline-light::before { background: var(--text-invert); }
.btn--outline-light:hover, .btn--outline-light:focus-visible {
  color: var(--dark);
  border-color: var(--text-invert);
}

.btn--light { --btn-bg: var(--light); --btn-fg: var(--dark); --btn-bd: var(--light); }
.btn--light::before { background: var(--primary); }

.btn--block { width: 100%; }
.btn--sm { padding: 0.75rem 1.35rem; min-height: 44px; font-size: var(--fs-xs); }
.btn--lg { padding: 1.2rem 2.5rem; min-height: 58px; }

.btn__arrow {
  flex: none;
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Text link with an animated underline */
.link-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 26px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  /* inherit, so the link follows whatever surface it sits on — it appears on
     both the warm-white sections and the near-black ones. */
  color: inherit;
  padding-bottom: 0.35rem;
}
.link-line::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.link-line:hover::after { transform: scaleX(0); }
.link-line svg { transition: transform var(--dur) var(--ease-out); }
.link-line:hover svg { transform: translateX(4px); }
.on-dark .link-line { color: var(--text-invert); }

/* Magnetic wrapper — JS adds translation, CSS handles the easing back */
.magnetic { display: inline-block; transition: transform var(--dur-slow) var(--ease-out); }

/* =============================================================================
   6. FORMS
   ========================================================================== */

.field { position: relative; display: flex; flex-direction: column; gap: 0.45rem; }

.field__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
}
.field__label .req { color: var(--primary); margin-left: 0.15em; }

.field__control {
  width: 100%;
  padding: 0.95rem 1rem;
  min-height: 52px;
  font-size: var(--fs-sm);
  color: var(--dark);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  appearance: none;
}
.field__control::placeholder { color: var(--muted-light); }
.field__control:hover { border-color: var(--border-strong); }
.field__control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
textarea.field__control { min-height: 118px; resize: vertical; line-height: 1.6; }

select.field__control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23736C64' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.field__error {
  font-size: var(--fs-xs);
  color: var(--primary);
  min-height: 0;
}
.field__control[aria-invalid='true'] { border-color: var(--primary); }

.field-row { display: grid; gap: var(--sp-4); }
@media (min-width: 560px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--muted);
  cursor: pointer;
}
.checkbox input {
  flex: none;
  width: 24px; height: 24px;
  margin-top: 0.02rem;
  accent-color: var(--primary);
  cursor: pointer;
}
/* The whole label is clickable, so the effective target is the full row. */
.checkbox { min-height: 26px; padding-block: 0.15rem; }
.checkbox a { text-decoration: underline; text-underline-offset: 2px; }

/* Honeypot — visually hidden from humans, present for bots */
.hp-field {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form-note {
  font-size: var(--fs-xs);
  color: var(--muted-light);
  line-height: 1.55;
}

.form-status {
  padding: 0.9rem 1.1rem;
  font-size: var(--fs-sm);
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.form-status--ok    { background: #EDF6EF; border-color: #BEDCC6; color: #245C35; }
.form-status--error { background: var(--primary-soft); border-color: #E2BCBC; color: var(--primary-dark); }
.form-status[hidden] { display: none !important; }

/* =============================================================================
   7. NAVIGATION
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease),
              height var(--dur) var(--ease);
}

/* Solid state — set by JS on scroll, and always on interior pages */
.nav.is-solid,
.nav--solid {
  background: rgba(250, 247, 242, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--border);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav { transition-property: background-color, border-color, backdrop-filter, transform; }

.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.nav__logo { flex: none; display: block; }
.nav__logo img {
  height: 42px;
  width: auto;
  transition: filter var(--dur) var(--ease);
}
@media (max-width: 900px) { .nav__logo img { height: 34px; } }

/* Over the hero the logo needs to read on a dark image */
.nav:not(.is-solid):not(.nav--solid) .nav__logo img {
  filter: brightness(0) invert(1);
}

.nav__menu {
  display: none;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.4rem);
  margin-left: auto;
}
@media (min-width: 1080px) { .nav__menu { display: flex; } }

.nav__link {
  position: relative;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--dark);
  padding-block: 0.5rem;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.nav:not(.is-solid):not(.nav--solid) .nav__link { color: rgba(255, 255, 255, 0.9); }

.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }
.nav__link:hover { color: var(--primary); }
.nav:not(.is-solid):not(.nav--solid) .nav__link:hover { color: #fff; }

.nav__actions { display: none; align-items: center; gap: var(--sp-4); margin-left: var(--sp-2); }
@media (min-width: 1080px) { .nav__actions { display: flex; } }

.nav:not(.is-solid):not(.nav--solid) .nav__cta {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.4);
}
.nav:not(.is-solid):not(.nav--solid) .nav__cta::before { background: #fff; }
.nav:not(.is-solid):not(.nav--solid) .nav__cta:hover { color: var(--dark); border-color: #fff; }

/* --- Hamburger ----------------------------------------------------------- */

.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0 8px;
  cursor: pointer;
}
@media (min-width: 1080px) { .nav__toggle { display: none; } }

.nav__toggle span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--dark);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease),
              background-color var(--dur) var(--ease);
}
.nav:not(.is-solid):not(.nav--solid) .nav__toggle span { background: #fff; }
.nav__toggle span:nth-child(2) { width: 70%; }

body.menu-open .nav__toggle span { background: var(--text-invert); }
body.menu-open .nav__toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.menu-open .nav__toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
body.menu-open .nav__logo img { filter: brightness(0) invert(1); }

/* --- Mobile drawer -------------------------------------------------------- */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--dark);
  color: var(--text-invert);
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5%);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out),
              visibility 0s linear var(--dur);
}
body.menu-open .mobile-nav {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
@media (min-width: 1080px) { .mobile-nav { display: none; } }

.mobile-nav__list { display: flex; flex-direction: column; }
.mobile-nav__list li { border-bottom: 1px solid var(--border-dark); }

.mobile-nav__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: var(--text-invert);
  opacity: 0;
  transform: translateY(14px);
}
body.menu-open .mobile-nav__link {
  animation: navItemIn var(--dur-slow) var(--ease-out) forwards;
  animation-delay: calc(60ms * var(--i, 0) + 90ms);
}
.mobile-nav__link .idx {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--accent);
}
.mobile-nav__link[aria-current='page'] { color: var(--accent); }

@keyframes navItemIn { to { opacity: 1; transform: none; } }

.mobile-nav__foot {
  margin-top: auto;
  padding-top: var(--sp-7);
  display: grid;
  gap: var(--sp-4);
}
.mobile-nav__contact {
  font-size: var(--fs-sm);
  color: rgba(247, 243, 238, 0.65);
  line-height: 1.7;
}
.mobile-nav__contact a:hover { color: var(--accent); }

body.menu-open { overflow: hidden; }

/* =============================================================================
   8. HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: clamp(600px, 100svh, 1000px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  background: var(--dark);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.06);
  animation: heroPan 18s var(--ease-out) forwards;
}
@keyframes heroPan { to { transform: scale(1); } }

/* Layered scrim: vertical for text legibility, horizontal for depth */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(20, 16, 14, 0.82) 0%,
      rgba(20, 16, 14, 0.46) 30%,
      rgba(20, 16, 14, 0.14) 60%,
      rgba(20, 16, 14, 0.38) 100%),
    linear-gradient(to right,
      rgba(20, 16, 14, 0.66) 0%,
      rgba(20, 16, 14, 0.20) 48%,
      transparent 78%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--nav-h) + 3rem) var(--gutter) clamp(3rem, 7vh, 5.5rem);
  display: grid;
  gap: var(--sp-8);
  align-items: end;
}
@media (min-width: 1100px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--sp-9);
  }
}

/* No ch-based cap here: `ch` resolves against this element's own (body-sized)
   font, not the display headline inside it, which shreds the h1 mid-word.
   The grid column already provides the constraint. */
.hero__content { color: var(--text-invert); min-width: 0; }

.hero__eyebrow { color: var(--accent); }
.hero__eyebrow::before { background: var(--accent); }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 0.97;
  letter-spacing: -0.035em;
  color: var(--text-invert);
  margin-bottom: var(--sp-5);
  /* Line breaks are authored in the markup. Mid-word breaking is already
     prevented by the base heading rule; forcing nowrap here would overflow
     narrow phones, so lines stay free to wrap at a space if they must. */
  overflow-wrap: normal;
  hyphens: none;
}
.hero__title em { font-style: italic; color: var(--accent); }

.hero__text {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: rgba(247, 243, 238, 0.78);
  max-width: 46ch;
  margin-bottom: var(--sp-7);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Line-by-line masked reveal for the headline */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span {
  display: block;
  transform: translateY(105%);
  animation: lineUp 1s var(--ease-out) forwards;
  animation-delay: calc(110ms * var(--i, 0) + 180ms);
}
@keyframes lineUp { to { transform: none; } }

.fade-in-up {
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp var(--dur-slow) var(--ease-out) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* --- Scroll indicator ------------------------------------------------------ */

.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: 1.6rem;
  display: none;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
@media (min-width: 1100px) { .hero__scroll { display: flex; } }
.hero__scroll span {
  display: block; width: 64px; height: 1px;
  background: rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}
.hero__scroll span::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--accent);
  animation: scrollLine 2.4s var(--ease-in-out) infinite;
}
@keyframes scrollLine {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* --- Floating enquiry panel ------------------------------------------------ */

.hero-panel {
  background: rgba(250, 247, 242, 0.97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-xl);
}
.hero-panel__head { margin-bottom: var(--sp-5); }
.hero-panel__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-tight);
  margin-bottom: 0.3rem;
}
.hero-panel__sub { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.hero-panel form { display: grid; gap: 0.85rem; }
/* background-color, not the `background` shorthand — the shorthand would reset
   background-image and erase the select chevron. */
.hero-panel .field__control { background-color: var(--surface); }

/* =============================================================================
   9. STATS
   ========================================================================== */

.stats {
  background: var(--dark);
  color: var(--text-invert);
  border-top: 1px solid var(--border-dark);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat {
  padding: clamp(2rem, 4.5vw, 3.75rem) clamp(1.1rem, 2.5vw, 2.25rem);
  border-right: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}
.stat:nth-child(2n) { border-right: 0; }
@media (min-width: 900px) {
  .stat { border-bottom: 0; }
  .stat:nth-child(2n) { border-right: 1px solid var(--border-dark); }
  .stat:last-child { border-right: 0; }
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-invert);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.65rem;
}
.stat__value .suffix { color: var(--accent); }
.stat__value--word { font-size: clamp(1.5rem, 1rem + 2.1vw, 2.5rem); }

.stat__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(247, 243, 238, 0.9);
  margin-bottom: 0.4rem;
}
.stat__note { font-size: var(--fs-xs); color: rgba(247, 243, 238, 0.48); line-height: 1.5; }

/* =============================================================================
   10. EDITORIAL SECTIONS
   ========================================================================== */

.split {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
@media (min-width: 980px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--wide-left  { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .split--wide-right { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .split--reverse .split__media { order: 2; }
}

.split__media { position: relative; }

/* Clip-path image reveal, triggered by IntersectionObserver */
.img-reveal { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-2); }
.img-reveal img {
  width: 100%;
  transform: scale(1.14);
  transition: transform 1.4s var(--ease-out), clip-path 1.4s var(--ease-out);
  clip-path: inset(0 0 100% 0);
}
.img-reveal.is-visible img { transform: scale(1); clip-path: inset(0 0 0 0); }

.img-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.img-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(20, 16, 14, 0.07);
  border-radius: inherit;
  pointer-events: none;
}

/* Accent card that overlaps the image edge */
.overlap-card {
  position: relative;
  z-index: 2;
  background: var(--dark);
  color: var(--text-invert);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-width: 320px;
}
@media (min-width: 980px) {
  .overlap-card { margin-top: -5rem; margin-left: clamp(1rem, 4vw, 3.5rem); }
}
.overlap-card__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.overlap-card__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(247, 243, 238, 0.75);
}

/* --- Timeline -------------------------------------------------------------- */

.timeline { position: relative; margin-top: var(--sp-8); }
.timeline::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--border);
}
.on-dark .timeline::before, .section--dark .timeline::before { background: var(--border-dark); }

.timeline__item {
  position: relative;
  padding-left: clamp(1.75rem, 3vw, 2.75rem);
  padding-bottom: var(--sp-6);
}
.timeline__item:last-child { padding-bottom: 0; }

.timeline__item::before {
  content: '';
  position: absolute;
  left: -3.5px; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--light);
  border: 1.5px solid var(--border-strong);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease-out);
}
.timeline__item.is-visible::before {
  background: var(--primary);
  border-color: var(--primary);
  transform: scale(1.15);
}
.section--dark .timeline__item::before { background: var(--dark); }
.section--dark .timeline__item.is-visible::before { background: var(--accent); border-color: var(--accent); }

.timeline__year {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--primary);
  margin-bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.section--dark .timeline__year { color: var(--accent); }
.timeline__text { font-size: var(--fs-sm); color: var(--muted); line-height: 1.65; max-width: 46ch; }
.section--dark .timeline__text { color: rgba(247, 243, 238, 0.6); }

/* =============================================================================
   11. PROJECT CARDS & GRIDS
   ========================================================================== */

/* Asymmetric editorial grid: one hero card + stacked secondaries */
.projects-editorial {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 1000px) {
  .projects-editorial {
    grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
    grid-auto-rows: 1fr;
  }
  .projects-editorial > .pcard--feature { grid-row: span 2; }
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 430px;
  padding: clamp(1.35rem, 2.6vw, 2.25rem);
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
  color: var(--text-invert);
  background: var(--dark-2);
}
.pcard--feature { min-height: clamp(420px, 56vw, 640px); }

.pcard__media { position: absolute; inset: 0; z-index: -2; }
.pcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-image) var(--ease-out);
}
.pcard:hover .pcard__media img,
.pcard:focus-within .pcard__media img { transform: scale(1.07); }

/* The scrim has to stay readable behind the title block on a bright photograph,
   so it holds near-opaque well past the halfway mark before releasing. */
.pcard__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(20, 16, 14, 0.94) 0%,
    rgba(20, 16, 14, 0.86) 26%,
    rgba(20, 16, 14, 0.62) 46%,
    rgba(20, 16, 14, 0.28) 68%,
    rgba(20, 16, 14, 0.10) 86%,
    rgba(20, 16, 14, 0.28) 100%);
  transition: opacity var(--dur-slow) var(--ease);
}
.pcard:hover .pcard__media::after { opacity: 0.94; }

/* The feature card is tall enough that the ramp can start later. */
.pcard--feature .pcard__media::after {
  background: linear-gradient(to top,
    rgba(20, 16, 14, 0.94) 0%,
    rgba(20, 16, 14, 0.80) 22%,
    rgba(20, 16, 14, 0.45) 42%,
    rgba(20, 16, 14, 0.14) 66%,
    rgba(20, 16, 14, 0.06) 84%,
    rgba(20, 16, 14, 0.26) 100%);
}

.pcard__badges {
  position: absolute;
  top: clamp(1.1rem, 2.2vw, 1.6rem);
  left: clamp(1.35rem, 2.6vw, 2.25rem);
  right: clamp(1.35rem, 2.6vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  min-height: 26px;
  max-width: 100%;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  background: rgba(250, 247, 242, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  /* Wrapping, not nowrap: a long label such as an anchor institution name
     would otherwise push the page wider than a 320px viewport. */
  white-space: normal;
  text-wrap: balance;
}
.badge--accent { background: var(--primary); border-color: var(--primary); }
.badge--solid  { background: var(--dark); border-color: var(--dark); }

/* Light-context badge, used on interior pages */
.badge--light {
  background: var(--surface);
  border-color: var(--border);
  color: var(--muted);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pcard__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.pcard__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--text-invert);
  margin-bottom: 0.55rem;
}
.pcard--feature .pcard__title { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); }

.pcard__desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(247, 243, 238, 0.72);
  max-width: 48ch;
  margin-bottom: var(--sp-4);
  /* Revealed on hover for non-feature cards to keep the grid calm */
  display: none;
}
.pcard--feature .pcard__desc { display: block; }
@media (hover: hover) and (min-width: 1000px) {
  .pcard:not(.pcard--feature) .pcard__desc {
    display: block;
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    overflow: hidden;
    transition: max-height var(--dur-slow) var(--ease-out),
                opacity var(--dur) var(--ease),
                margin-bottom var(--dur-slow) var(--ease-out);
  }
  .pcard:hover:not(.pcard--feature) .pcard__desc,
  .pcard:focus-within:not(.pcard--feature) .pcard__desc {
    max-height: 8rem;
    opacity: 1;
    margin-bottom: var(--sp-4);
  }
}

.pcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--fs-xs);
  color: rgba(247, 243, 238, 0.72);
}
.pcard__meta dt {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(247, 243, 238, 0.45);
  margin-bottom: 0.15rem;
}
.pcard__meta dd { margin: 0; font-weight: 600; color: var(--text-invert); }
.pcard__meta > div { min-width: 0; }

.pcard__arrow {
  position: absolute;
  right: clamp(1.35rem, 2.6vw, 2.25rem);
  bottom: clamp(1.35rem, 2.6vw, 2.25rem);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease-out);
}
.pcard:hover .pcard__arrow {
  background: var(--primary);
  border-color: var(--primary);
  transform: translate(3px, -3px);
}
.pcard__arrow svg { transition: transform var(--dur) var(--ease-out); }

/* Stretched link keeps the whole card clickable without nesting anchors */
.stretch::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* --- Listing grid ---------------------------------------------------------- */

.project-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

/* Horizontal swipe rail on mobile */
@media (max-width: 767px) {
  .swipe-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-bottom: var(--sp-4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .swipe-rail::-webkit-scrollbar { display: none; }
  .swipe-rail > * { scroll-snap-align: start; }
  .swipe-hint {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: var(--fs-xs); color: var(--muted-light);
    letter-spacing: var(--ls-wide); text-transform: uppercase;
    margin-top: var(--sp-2);
  }
}
@media (min-width: 768px) { .swipe-hint { display: none; } }

/* --- Filter bar ------------------------------------------------------------ */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: flex-end;
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-8);
}
.filters .field { min-width: 180px; flex: 1 1 180px; }
.filters__count {
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding-bottom: 0.9rem;
  margin-left: auto;
}

.empty-state {
  padding: var(--sp-10) var(--sp-5);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--muted);
}

/* =============================================================================
   12. PROCESS & PILLARS
   ========================================================================== */

.process { display: grid; gap: 0; counter-reset: step; }
@media (min-width: 900px) { .process { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.step {
  position: relative;
  padding: var(--sp-7) var(--sp-5) var(--sp-7) 0;
  border-top: 1px solid var(--border-dark);
}
@media (min-width: 900px) {
  .step { padding: var(--sp-8) var(--sp-6) var(--sp-8) 0; }
}
@media (max-width: 899px) {
  .step:last-child { border-bottom: 1px solid var(--border-dark); }
}

/* Animated connector that draws in on scroll */
.step__line {
  position: absolute;
  top: -1px; left: 0;
  height: 1px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(140ms * var(--i, 0));
}
.process.is-visible .step__line { transform: scaleX(1); }

.step__num {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-5);
  display: block;
}
.step__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-tight);
  color: var(--text-invert);
  margin-bottom: 0.7rem;
}
.step__text { font-size: var(--fs-sm); color: rgba(247, 243, 238, 0.6); line-height: 1.65; }

/* --- Pillars --------------------------------------------------------------- */

.pillars {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}
@media (min-width: 700px)  { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pillar {
  position: relative;
  padding: clamp(1.75rem, 3.2vw, 2.75rem) clamp(1.25rem, 2.4vw, 2.25rem);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  transition: background-color var(--dur) var(--ease);
}
@media (min-width: 700px)  { .pillar:nth-child(2n) { border-right: 0; } }
@media (min-width: 1060px) {
  .pillar:nth-child(2n) { border-right: 1px solid var(--border); }
  .pillar:nth-child(3n) { border-right: 0; }
}
@media (max-width: 699px) { .pillar { border-right: 0; } }

.pillar:hover { background: var(--surface); }

.pillar__num {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  color: var(--muted-light);
  font-variant-numeric: tabular-nums;
}
.pillar__icon {
  width: 30px; height: 30px;
  margin: var(--sp-5) 0 var(--sp-5);
  color: var(--primary);
  transition: transform var(--dur-slow) var(--ease-out);
}
.pillar:hover .pillar__icon { transform: translateY(-3px); }
.pillar__icon svg { width: 100%; height: 100%; }

.pillar__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-tight);
  margin-bottom: 0.6rem;
}
.pillar__text { font-size: var(--fs-sm); color: var(--muted); line-height: 1.68; }

/* =============================================================================
   13. LOCATION MAP
   ========================================================================== */

.locmap {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}
@media (min-width: 1000px) {
  .locmap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: var(--sp-9); }
}

.locmap__canvas {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--dark-2);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (max-width: 640px) { .locmap__canvas { aspect-ratio: 1 / 1; } }

/* Subtle survey grid — reads as cartography, not decoration */
.locmap__canvas::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.038) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
}
.locmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.locmap__pin {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.locmap__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  cursor: pointer;
  color: rgba(247, 243, 238, 0.85);
}
.locmap__dot::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--muted-light);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease);
}
.locmap__pin--active .locmap__dot::before {
  background: var(--primary);
  transform: scale(1.35);
  box-shadow: 0 0 0 6px rgba(168, 50, 54, 0.22);
}
.locmap__pin--has-project .locmap__dot::before { background: var(--accent); }
.locmap__pin--has-project.locmap__pin--active .locmap__dot::before { background: var(--primary); }

/* Radar pulse only on markets with a live listing */
.locmap__pin--has-project .locmap__dot::after {
  content: '';
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: pulse 2.8s var(--ease-out) infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 0.85; }
  70%  { transform: scale(3.6); opacity: 0; }
  100% { transform: scale(3.6); opacity: 0; }
}

.locmap__label {
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(247, 243, 238, 0.7);
  white-space: nowrap;
  pointer-events: none;
  transition: color var(--dur) var(--ease);
}
.locmap__pin--active .locmap__label { color: var(--text-invert); }

.locmap__panel { min-height: 300px; }
.locmap__pane { display: none; }
.locmap__pane.is-active { display: block; animation: fadeUp var(--dur-slow) var(--ease-out); }

.locmap__pane-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-tight);
  color: var(--text-invert);
  margin-bottom: 0.25rem;
}
.locmap__pane-state {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-5);
}
.locmap__thesis {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: rgba(247, 243, 238, 0.68);
  margin-bottom: var(--sp-5);
}

.locmap__facts { display: grid; gap: 0.55rem; margin-bottom: var(--sp-5); }
.locmap__facts li {
  display: flex; gap: 0.7rem;
  font-size: var(--fs-sm);
  color: rgba(247, 243, 238, 0.7);
  line-height: 1.5;
}
.locmap__facts li::before { content: '—'; color: var(--accent); flex: none; }
.locmap__facts a { display: inline-flex; align-items: center; min-height: 26px; }

/* Tab strip that doubles as the mobile control */
.locmap__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--sp-6);
}
.locmap__tab {
  padding: 0.5rem 0.95rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(247, 243, 238, 0.6);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-xs);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.locmap__tab:hover { color: var(--text-invert); border-color: rgba(255, 255, 255, 0.32); }
.locmap__tab[aria-selected='true'] {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

/* =============================================================================
   14. CALCULATOR
   ========================================================================== */

.calc {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}
@media (min-width: 980px) {
  .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: var(--sp-9); }
}

.calc__form { display: grid; gap: var(--sp-5); }

.calc__slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: 0.6rem;
}
.calc__slider-value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--border-strong);
  border-radius: 2px;
}
input[type='range']::-moz-range-track {
  height: 2px;
  background: var(--border-strong);
  border-radius: 2px;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--light);
  box-shadow: 0 1px 6px rgba(20, 16, 14, 0.24);
  transition: transform var(--dur-fast) var(--ease);
}
input[type='range']::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--light);
  box-shadow: 0 1px 6px rgba(20, 16, 14, 0.24);
}
input[type='range']:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--primary-soft); }

.calc__scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-eyebrow);
  color: var(--muted-light);
  letter-spacing: var(--ls-wide);
  margin-top: 0.3rem;
}

.calc__result {
  background: var(--dark);
  color: var(--text-invert);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  box-shadow: var(--shadow-lg);
}
.calc__result-label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(247, 243, 238, 0.5);
  margin-bottom: 0.5rem;
}
.calc__result-main {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-6);
}
.calc__rows {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border-dark);
  margin-bottom: var(--sp-5);
}
.calc__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--border-dark);
  font-size: var(--fs-sm);
}
.calc__row dt { color: rgba(247, 243, 238, 0.6); }
.calc__row dd {
  margin: 0;
  font-weight: 600;
  color: var(--text-invert);
  font-variant-numeric: tabular-nums;
}
.calc__row--gain dd { color: var(--accent); }

.calc__disclaimer {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(247, 243, 238, 0.42);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-dark);
}

/* =============================================================================
   15. TESTIMONIALS
   ========================================================================== */

.tslider { position: relative; }

.tslider__viewport { position: relative; min-height: 1px; }

.tslide {
  display: none;
  /* px-based: the quote inside is display-sized, so a ch cap set here (against
     the body font) would measure far narrower than intended. */
  max-width: min(100%, 54rem);
}
.tslide.is-active { display: block; animation: fadeUp var(--dur-slow) var(--ease-out); }

.tslide__mark {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 6rem);
  line-height: 0.6;
  color: var(--accent);
  opacity: 0.65;
  margin-bottom: var(--sp-4);
  display: block;
}

.tslide__quote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.95rem + 1.5vw, 2.125rem);
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: var(--text-invert);
  margin-bottom: var(--sp-7);
  font-style: italic;
}

.tslide__person { display: flex; align-items: center; gap: var(--sp-4); }

.tslide__avatar {
  flex: none;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(192, 160, 98, 0.14);
  border: 1px solid rgba(192, 160, 98, 0.4);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--accent);
  overflow: hidden;
}
.tslide__avatar img { width: 100%; height: 100%; object-fit: cover; }

.tslide__name {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-invert);
  letter-spacing: 0;
  line-height: 1.3;
}
.tslide__meta {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(247, 243, 238, 0.5);
}

.tslider__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-dark);
}

.tslider__btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--border-dark);
  border-radius: 50%;
  color: var(--text-invert);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.tslider__btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.tslider__btn:disabled { opacity: 0.35; cursor: not-allowed; }

.tslider__count {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: rgba(247, 243, 238, 0.5);
  font-variant-numeric: tabular-nums;
}
.tslider__count .cur { color: var(--accent); }

/* The arrows and counter are the primary control on a phone; the dot rail is a
   desktop affordance and would otherwise force the row to overflow. */
.tslider__dots { display: none; gap: 0.5rem; margin-left: auto; }
@media (min-width: 640px) { .tslider__dots { display: flex; } }
/* Thin rule visually, but a full-height hit area drawn by ::before so the
   control is actually usable. */
.tslider__dot {
  position: relative;
  width: 28px; height: 26px;
  background: none;
  cursor: pointer;
}
.tslider__dot::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  transition: background-color var(--dur) var(--ease);
}
.tslider__dot[aria-selected='true']::before { background: var(--accent); }

/* =============================================================================
   16. INSIGHTS
   ========================================================================== */

.insight-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.bcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease-out);
}
.bcard:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.bcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.bcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-image) var(--ease-out);
}
.bcard:hover .bcard__media img { transform: scale(1.05); }

.bcard__cat {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  padding: 0.35rem 0.7rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: var(--dark);
  color: var(--text-invert);
  border-radius: var(--radius-xs);
}

.bcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

.bcard__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 0.85rem;
}
.bcard__meta span + span::before { content: '·'; margin-right: 0.6rem; }

.bcard__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.24;
  letter-spacing: var(--ls-tight);
  margin-bottom: 0.7rem;
}
.bcard:hover .bcard__title { color: var(--primary); }
.bcard__excerpt {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: var(--sp-5);
}
.bcard__foot { margin-top: auto; }

/* Featured editorial variant */
.bcard--wide { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .bcard--wide { flex-direction: row; }
  .bcard--wide .bcard__media { aspect-ratio: auto; flex: 0 0 52%; }
  .bcard--wide .bcard__body { justify-content: center; padding: clamp(2rem, 3.4vw, 3.25rem); }
  .bcard--wide .bcard__title { font-size: var(--fs-h3); }
}

/* --- Article body ---------------------------------------------------------- */

.article { max-width: 44rem; margin-inline: auto; }
.article h2 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-9);
  margin-bottom: var(--sp-4);
}
.article h2:first-child { margin-top: 0; }
.article p { margin-bottom: 1.35em; color: var(--dark-3); line-height: 1.82; }
.article p:last-child { margin-bottom: 0; }

.article ul { margin: 0 0 1.6em; display: grid; gap: 0.7rem; }
.article ul li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--dark-3);
  line-height: 1.7;
}
.article ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 8px; height: 1px;
  background: var(--primary);
}

.article blockquote {
  margin: var(--sp-8) 0;
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-style: italic;
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: var(--dark);
}

.article__lede {
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--muted);
  padding-bottom: var(--sp-7);
  margin-bottom: var(--sp-7);
  border-bottom: 1px solid var(--border);
}

/* =============================================================================
   17. ACCORDION / FAQ
   ========================================================================== */

.accordion { border-top: 1px solid var(--border); }
.on-dark .accordion, .section--dark .accordion { border-color: var(--border-dark); }

.acc__item { border-bottom: 1px solid var(--border); }
.section--dark .acc__item { border-color: var(--border-dark); }

.acc__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  padding: clamp(1.15rem, 2.2vw, 1.6rem) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--dark);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.section--dark .acc__trigger { color: var(--text-invert); }
.acc__trigger:hover { color: var(--primary); }
.section--dark .acc__trigger:hover { color: var(--accent); }

.acc__icon {
  flex: none;
  position: relative;
  width: 16px; height: 16px;
  margin-top: 0.4rem;
}
.acc__icon::before, .acc__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out);
}
.acc__icon::after { transform: rotate(90deg); }
.acc__trigger[aria-expanded='true'] .acc__icon::after { transform: rotate(0deg); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.acc__panel[data-open='true'] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__body {
  padding-bottom: clamp(1.15rem, 2.2vw, 1.6rem);
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--muted);
  max-width: 62ch;
}
.section--dark .acc__body { color: rgba(247, 243, 238, 0.62); }

/* =============================================================================
   18. MODAL & OVERLAYS
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 14, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: min(92vh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  padding: clamp(1.6rem, 3.6vw, 2.75rem);
  transform: translateY(20px) scale(0.985);
  transition: transform var(--dur-slow) var(--ease-out);
}
.modal.is-open .modal__dialog { transform: none; }

.modal__close {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--muted);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.modal__close:hover { background: var(--surface-2); color: var(--dark); }

.modal__head { margin-bottom: var(--sp-6); padding-right: 2.5rem; }
.modal__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-tight);
  margin-bottom: 0.4rem;
}
.modal__sub { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

.modal form { display: grid; gap: var(--sp-4); }

.modal__divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted-light);
  margin-block: var(--sp-2);
}
.modal__divider::before, .modal__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

body.modal-open { overflow: hidden; }

/* =============================================================================
   19. FOOTER
   ========================================================================== */

.footer {
  position: relative;
  background: var(--dark);
  color: var(--text-invert);
  padding-top: var(--section-y);
  isolation: isolate;
}

.footer__grid {
  display: grid;
  gap: var(--sp-8);
  padding-bottom: var(--sp-9);
}
@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-7); }
}

.footer__logo img { height: 46px; width: auto; filter: brightness(0) invert(1); margin-bottom: var(--sp-5); }
.footer__blurb {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: rgba(247, 243, 238, 0.6);
  max-width: 38ch;
  margin-bottom: var(--sp-6);
}

.footer__heading {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-5);
}

.footer__links { display: grid; gap: 0.4rem; }
.footer__links a {
  font-size: var(--fs-sm);
  color: rgba(247, 243, 238, 0.68);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out);
  /* ≥24px tall so the link clears the WCAG 2.5.8 minimum target size. */
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}
.footer__links a:hover { color: var(--text-invert); transform: translateX(3px); }

.footer__contact { display: grid; gap: var(--sp-4); font-size: var(--fs-sm); }
.footer__contact-item { display: flex; gap: 0.75rem; color: rgba(247, 243, 238, 0.68); line-height: 1.6; }
.footer__contact-item svg { flex: none; margin-top: 0.28em; color: var(--accent); }
.footer__contact-item a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}
.footer__contact-item a:hover { color: var(--text-invert); }

.footer__social { display: flex; gap: 0.65rem; }
.footer__social a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--border-dark);
  border-radius: 50%;
  color: rgba(247, 243, 238, 0.7);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.footer__social a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--border-dark);
  font-size: var(--fs-xs);
  color: rgba(247, 243, 238, 0.45);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}
.footer__legal a:hover { color: var(--text-invert); }

.footer__disclaimer {
  /* Real prose, not a label — keep it at body-small rather than label size. */
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: rgba(247, 243, 238, 0.32);
  padding-bottom: var(--sp-6);
  max-width: 90ch;
}

/* =============================================================================
   20. MOBILE ACTION BAR & FLOATING CTA
   ========================================================================== */

.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--dark);
  border-top: 1px solid var(--border-dark);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease-out);
}
.action-bar.is-visible { transform: none; }
@media (min-width: 1080px) { .action-bar { display: none; } }

.action-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.7rem 0.4rem;
  min-height: 60px;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(247, 243, 238, 0.82);
  border-right: 1px solid var(--border-dark);
}
.action-bar__item:last-child { border-right: 0; }
.action-bar__item svg { width: 19px; height: 19px; }
.action-bar__item--accent { background: var(--primary); color: #fff; }

/* Pad the page so the bar never covers content */
@media (max-width: 1079px) {
  body.has-action-bar { padding-bottom: 61px; }
}

/* Desktop floating WhatsApp */
.wa-float {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 90;
  display: none;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.25rem;
  background: #1FAE54;
  color: #fff;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
@media (min-width: 1080px) { .wa-float { display: inline-flex; } }
.wa-float:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); }

/* =============================================================================
   21. MOTION
   ========================================================================== */

/* Base scroll-reveal state, applied by JS only when it is safe to animate */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Fallback if JS never runs — never leave content invisible */
.no-js [data-reveal] { opacity: 1; transform: none; }

[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .reveal-line > span { transform: none !important; }
  .img-reveal img { transform: none !important; clip-path: none !important; }
  .hero__media img { animation: none !important; transform: none !important; }
  .locmap__pin--has-project .locmap__dot::after { display: none; }
  .step__line { transform: scaleX(1) !important; }
}

/* =============================================================================
   22. UTILITIES
   ========================================================================== */

.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.mb-0 { margin-bottom: 0 !important; }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-7 { margin-bottom: var(--sp-7); }

.text-center { text-align: center; }
.flex     { display: flex; }
.flex-wrap{ flex-wrap: wrap; }
.items-center { align-items: center; }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }

.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: revert; } }
@media (min-width: 768px) { .only-mobile { display: none !important; } }

/* Page header used on every interior page */
.page-head {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--dark);
  color: var(--text-invert);
  isolation: isolate;
  overflow: hidden;
}
.page-head--image::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(20, 16, 14, 0.95), rgba(20, 16, 14, 0.62));
}
.page-head__media { position: absolute; inset: 0; z-index: -2; }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; }

.page-head__title { max-width: 18ch; margin-bottom: var(--sp-5); }
.page-head__lede { color: rgba(247, 243, 238, 0.72); max-width: 54ch; }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(247, 243, 238, 0.5);
  margin-bottom: var(--sp-6);
}
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs li + li::before { content: '/'; margin-right: 0.5rem; opacity: 0.5; }
.breadcrumbs ol { display: contents; }
.breadcrumbs li { display: flex; align-items: center; min-height: 26px; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 26px; }
.breadcrumbs [aria-current] { color: rgba(247, 243, 238, 0.85); }

/* Light breadcrumb variant */
.breadcrumbs--light { color: var(--muted-light); }
.breadcrumbs--light a:hover { color: var(--primary); }
.breadcrumbs--light [aria-current] { color: var(--muted); }

/* Highlight grid — explicit columns so a six-item set lands 3+3 rather than
   the 5+1 that auto-fit produces at desktop widths. */
.hl-grid {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px)  { .hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hl-grid > * {
  padding: 1.75rem 1.5rem 1.75rem 0;
  border-top: 1px solid var(--border-dark);
}

/* Definition grid used for project specs */
.spec-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}
@media (min-width: 560px)  { .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px)  { .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.spec {
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding-right: var(--sp-5);
}
@media (max-width: 559px) { .spec { border-right: 0; } }
@media (min-width: 560px) and (max-width: 959px) { .spec:nth-child(2n) { border-right: 0; } }
@media (min-width: 960px) { .spec:nth-child(3n) { border-right: 0; } }

.spec__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 0.5rem;
}
.spec__value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-tight);
  color: inherit; /* reused on both the light spec grid and the dark highlights */
  line-height: 1.2;
}

/* Amenity list */
.amenities {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.amenity { display: flex; gap: var(--sp-4); }
.amenity__icon {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--primary);
  background: var(--surface);
}
.amenity__icon svg { width: 19px; height: 19px; }
.amenity__title { font-size: var(--fs-sm); font-weight: 600; color: var(--dark); margin-bottom: 0.2rem; }
.amenity__text  { font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }

/* Connectivity table */
.conn-list { border-top: 1px solid var(--border); }
.conn-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
}
.conn-row__place { font-size: var(--fs-base); font-weight: 600; color: var(--dark); }
.conn-row__note  { font-size: var(--fs-xs); color: var(--muted-light); }
.conn-row__dist {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Sticky in-page sub-navigation on project pages */
.subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: rgba(250, 247, 242, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.subnav__inner {
  display: flex;
  gap: var(--sp-6);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 1rem;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.subnav a:hover, .subnav a.is-active { color: var(--primary); border-bottom-color: var(--primary); }

/* Gallery */
.gallery {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.gallery__item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  cursor: zoom-in;
}
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-image) var(--ease-out);
}
.gallery__item:hover img { transform: scale(1.05); }
.gallery__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.75rem 1rem 0.85rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(20, 16, 14, 0.82), transparent);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 10);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(20, 16, 14, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox img {
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox__caption {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(247, 243, 238, 0.6);
  text-align: center;
}
.lightbox__close, .lightbox__nav {
  position: absolute;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #fff;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--primary); border-color: var(--primary); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__nav--prev { left: clamp(0.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: clamp(0.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }

/* Map embed */
.map-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .map-embed { aspect-ratio: 4 / 3; } }

/* Sticky enquiry rail on project pages */
.sticky-rail { position: sticky; top: calc(var(--nav-h) + 5rem); }

.enquiry-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  box-shadow: var(--shadow);
}
.enquiry-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-tight);
  color: var(--dark);
  line-height: 1.15;
}
.enquiry-card__price-label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 0.4rem;
}

/* Disclaimer block */
.disclaimer {
  padding: var(--sp-5);
  background: var(--surface-2);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--muted);
}
.section--dark .disclaimer {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(247, 243, 238, 0.55);
}

/* Final CTA */
.cta-band {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
  background: var(--dark);
  color: var(--text-invert);
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}
.cta-band__media { position: absolute; inset: 0; z-index: -2; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.46; }
.cta-band__media::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(20, 16, 14, 0.42) 0%, rgba(20, 16, 14, 0.88) 76%);
}
/* rem, not ch: a ch cap here measures against the body font and forces the
   authored headline lines to break again. */
.cta-band__title { max-width: min(100%, 52rem); margin-inline: auto; margin-bottom: var(--sp-5); }
.cta-band__text { margin-inline: auto; margin-bottom: var(--sp-7); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }

/* 404 */
.error-page {
  min-height: 78vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: var(--nav-h);
}
.error-code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 12rem);
  line-height: 0.85;
  color: var(--primary);
  opacity: 0.16;
  letter-spacing: -0.05em;
  margin-bottom: -0.15em;
}

/* Print */
@media print {
  .nav, .mobile-nav, .action-bar, .wa-float, .modal, .lightbox, .subnav, .hero-panel { display: none !important; }
  body { background: #fff; color: #000; }
  .section--dark, .footer, .stats { background: #fff !important; color: #000 !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}