/* ============================================================
   MOTHER INDIA CITY SHELTERS — THEME CONFIG
   ------------------------------------------------------------
   Every raw value lives here. Components below ONLY use var().
   Change a token once → it changes everywhere.
   ============================================================ */

/* Clash Display — self-hosted from /fonts/clash-display (see var(--font-clash)).
   Imported and ready to use, not applied to anything by default. */
@font-face {
  font-family: "Clash Display";
  src: url("fonts/clash-display/ClashDisplay-Regular.woff2") format("woff2"),
    url("fonts/clash-display/ClashDisplay-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("fonts/clash-display/ClashDisplay-Medium.woff2") format("woff2"),
    url("fonts/clash-display/ClashDisplay-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("fonts/clash-display/ClashDisplay-Semibold.woff2") format("woff2"),
    url("fonts/clash-display/ClashDisplay-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("fonts/clash-display/ClashDisplay-Bold.woff2") format("woff2"),
    url("fonts/clash-display/ClashDisplay-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ---------- 1. BRAND COLOR PRIMITIVES ----------
     Sampled directly from images/logo.png + logo2.png:
     swoosh lime #AFCB1F, script red #E31E25, wordmark ink #1B1C17.
     The ramp below is built on those two hues (lime ~70°, red ~1°)
     instead of a generic forest-green so the site actually matches
     the mark. Keep sourcing new brand colors from the logo files,
     not from memory of "real estate site" defaults. */
  --green-950: #0F1509;
  /* darkest surface (footer, hero overlay) */
  --green-900: #1A2410;
  /* dark section background */
  --green-800: #2B3A18;
  /* deep brand green (logo hue, darkened) */
  --green-700: #3E5322;
  /* primary hover */
  --green-600: #5D7A2C;
  /* lighter hover / lively accents */
  --green-100: #E9F0D6;
  /* green tint chips */
  --green-050: #F5F8ED;
  /* soft green wash background */

  --lime-500: #AFCB1F;
  /* true logo lime — signature highlight only */
  --lime-600: #93AC19;
  /* darkened lime, safe for text on light bg */
  --lime-100: #F1F6DD;
  /* lime wash for chips/badges */

  --red-700: #B8151B;
  /* red hover / pressed */
  --red-600: #E31E25;
  /* brand red (logo script) — CTA only */
  --red-100: #FBE2E1;
  /* red tint */

  --ink-900: #181B14;
  /* headings — matches logo wordmark black */
  --ink-700: #34392F;
  /* body text — darkened for legibility */
  --ink-500: #5A6153;
  /* muted text — darkened, was borderline on contrast */
  --ink-300: #A4AB9C;
  /* placeholders / disabled */

  --line-200: #E5E7DE;
  /* borders, dividers */
  --sand-100: #F5F1E8;
  /* warm alt section background */
  --paper: #FFFFFF;
  /* base background */
  --paper-soft: #F8F9F4;
  /* soft section background */

  /* ---------- 2. SEMANTIC COLOR TOKENS ---------- */
  --color-bg: var(--paper);
  --color-bg-soft: var(--paper-soft);
  --color-bg-sand: var(--sand-100);
  --color-bg-dark: var(--green-900);
  --color-bg-darkest: var(--green-950);

  --color-primary: var(--green-800);
  --color-primary-hover: var(--green-700);
  --color-primary-tint: var(--green-050);
  --color-primary-chip: var(--green-100);

  --color-lime: var(--lime-500);
  --color-lime-text: var(--lime-600);
  --color-lime-tint: var(--lime-100);

  --color-accent: var(--red-600);
  --color-accent-hover: var(--red-700);
  --color-accent-tint: var(--red-100);

  --color-heading: var(--ink-900);
  --color-text: var(--ink-700);
  --color-muted: var(--ink-500);
  --color-faint: var(--ink-300);
  --color-line: var(--line-200);

  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: rgba(255, 255, 255, 0.72);
  --color-on-dark-faint: rgba(255, 255, 255, 0.45);
  --color-on-dark-line: rgba(255, 255, 255, 0.14);

  /* ---------- 3. TYPOGRAPHY ---------- */
  /* Change the font combo for the whole site from right here. */
  --font-display2: "Archivo Black", Arial, Helvetica, sans-serif;
  --font-display: "Clash Display", sans-serif;
  --font-body: "Inter", Arial, Helvetica, sans-serif;

  /* Imported and ready to use, not applied to anything by default. */
  --font-clash: "Clash Display", "Archivo Black", Arial, sans-serif;

  /* Utility face for coordinate/data-style captions (survey grid motif) */
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  /* 12 — micro labels   */
  --text-sm: 0.875rem;
  /* 14 — captions, meta */
  --text-base: 1rem;
  /* 16 — body           */
  --text-md: 1.125rem;
  /* 18 — lead body      */
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  /* card titles  */
  --text-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  /* h3           */
  --text-2xl: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
  /* h2 sections  */
  --text-3xl: clamp(2.5rem, 1.8rem + 3.2vw, 4.25rem);
  /* h1 hero      */

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-body: 1.65;

  --tracking-tight: -0.025em;
  --tracking-wide: 0.14em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- 4. SPACING SCALE (4px base) ---------- */
  --space-1: 0.25rem;
  /*  4 */
  --space-2: 0.5rem;
  /*  8 */
  --space-3: 0.75rem;
  /* 12 */
  --space-4: 1rem;
  /* 16 */
  --space-5: 1.5rem;
  /* 24 */
  --space-6: 2rem;
  /* 32 */
  --space-7: 2.5rem;
  /* 40 */
  --space-8: 3rem;
  /* 48 */
  --space-9: 4rem;
  /* 64 */
  --space-10: 5rem;
  /* 80 */
  --space-11: 6.5rem;
  /* 104 */

  --section-pad: clamp(4.5rem, 8vw, 7.5rem);
  /* vertical rhythm between sections */
  --section-gap-head: clamp(2.5rem, 5vw, 4rem);
  /* heading → content gap */

  /* ---------- 5. LAYOUT ---------- */
  --container-max: 80rem;
  /* 1200px */
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --nav-height: 5rem;

  /* ---------- 6. RADII ---------- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  /* ---------- 7. SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(16, 33, 24, 0.06);
  --shadow-md: 0 6px 24px -6px rgba(16, 33, 24, 0.12);
  --shadow-lg: 0 24px 60px -18px rgba(16, 33, 24, 0.22);
  --shadow-nav: 0 8px 30px -12px rgba(16, 33, 24, 0.16);

  /* ---------- 8. Z-INDEX SCALE ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 40;
  --z-fab: 80;
  --z-nav: 100;
  --z-drawer: 200;

  /* ---------- 9. MOTION ---------- */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  /* slow settle          */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  /* ui micro-interaction */
  --ease-drawer-open: cubic-bezier(0.16, 1, 0.3, 1);
  /* expo-out — smooth glide in  */
  --ease-drawer-close: cubic-bezier(0.4, 0, 1, 1);
  /* quick, decisive exit        */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* back-out — slight overshoot */
  --dur-fast: 180ms;
  --dur-med: 340ms;
  --dur-reveal: 1000ms;
  /* scroll reveals       */
  --dur-reveal-slow: 1400ms;
  --anim-distance: 2.5rem;
  /* travel for fade-up etc. */
  --stagger-step: 110ms;

  /* text-reveal (word/line mask animation) */
  --dur-text: 1100ms;
  --stagger-word: 45ms;
  --stagger-word-cap: 14;
  /* words beyond this share the last delay */

  /* ---------- 10. SIGNATURE PATTERN ----------
     Recurring motif across dark surfaces (page-hero, CTA band):
     faint topographic contour lines in the logo lime, standing in
     for surveyed land/plot boundaries — reused instead of the
     generic blurred-blob gradient. */
  --pattern-contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23AFCB1F' stroke-width='1.1'%3E%3Cpath d='M-20 40 Q 90 0 210 40 T 460 40'/%3E%3Cpath d='M-20 100 Q 90 60 210 100 T 460 100'/%3E%3Cpath d='M-20 160 Q 90 120 210 160 T 460 160'/%3E%3Cpath d='M-20 220 Q 90 180 210 220 T 460 220'/%3E%3Cpath d='M-20 280 Q 90 240 210 280 T 460 280'/%3E%3Cpath d='M-20 340 Q 90 300 210 340 T 460 340'/%3E%3Cpath d='M-20 400 Q 90 360 210 400 T 460 400'/%3E%3C/g%3E%3C/svg%3E");
}


/* ============================================================
   BASE
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--space-4));
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: overflow-x:hidden forces overflow-y to a computed
     auto (per spec, when one axis isn't visible the other can't stay
     visible), which turns body into a scroll container and silently
     breaks position:sticky for every descendant on the page. overflow:
     clip is exempt from that pairing rule. */
  overflow-x: clip;
}

img {
  max-width: 100%;
  display: block;
}

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

.link:hover {
  font-weight: 500;
  color: black;
  text-decoration: underline;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
}

h1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-xl);
}

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

::selection {
  background: var(--green-100);
  color: var(--green-900);
}

/* Thin theme-matching scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--green-700) var(--color-bg-soft);
}

::-webkit-scrollbar {
  width: 0.6rem;
  height: 0.6rem;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-soft);
}

::-webkit-scrollbar-thumb {
  background: var(--green-700);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-bg-soft);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}


/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.cta-unique {
  margin-top: 17rem;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--section-pad);
}

.section--soft {
  background: var(--color-bg-soft);
}

.section--sand {
  background: var(--color-bg-sand);
}

.section--dark {
  background: var(--color-bg-dark);
}

/* --- Parallax banner: a fixed-attachment photo the section content
   scrolls over, rather than a plain flat-color section background.
   Pair with .section--dark for correctly-themed on-photo text.
   background-attachment: fixed is unsupported on iOS Safari (it just
   silently falls back to a normal scrolling background there — not
   broken, just not pinned), and janks on some Android browsers, so it's
   disabled outright below the tablet breakpoint rather than left to
   chance. --- */
.section--parallax {
  position: relative;
  /* --parallax-image is set inline in index.html so the photo can be
     swapped there without touching this file */
  background-image: linear-gradient(to bottom, rgba(11, 36, 26, 0.82), rgba(11, 36, 26, 0.72)),
    var(--parallax-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.section--parallax>.container {
  position: relative;
  z-index: var(--z-raised);
}

@media (max-width: 48rem) {
  .section--parallax {
    background-attachment: scroll;
  }
}

/* Section heading block — consistent spacing everywhere */
.section-head {
  max-width: 40rem;
  margin-bottom: var(--section-gap-head);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.section-head--split>div {
  max-width: "25rem";
}

.section-head p {
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: var(--text-md);
}

.section--dark h2 {
  color: var(--color-on-dark);
}

.section--dark .section-head p {
  color: var(--color-on-dark-muted);
}

/* Full-width centered prose — normal paragraph size/weight, not the
   narrower section-head lead style above, for multi-paragraph copy
   blocks. Theme-aware: light text/muted-grey by default, switches to
   on-dark-muted inside a .section--dark section. */
.section-prose {
  text-align: center;
  color: var(--color-muted);
  font-size: var(--text-md);
  margin-bottom: var(--section-gap-head);
}

.section-prose p+p {
  margin-top: var(--space-4);
}

.section--dark .section-prose {
  color: var(--color-on-dark-muted);
}

.section-prose:last-child {
  margin-bottom: 0;
}

/* Eyebrow tag above headings */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.eyebrow::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

.section-head--center .eyebrow::after {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

.section--dark .eyebrow {
  color: var(--color-on-dark-muted);
}

.section--dark .eyebrow::before,
.section--dark .eyebrow::after {
  background: var(--color-accent);
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  transition: background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.btn:active {
  transform: scale(0.97);
}

.btn svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.btn:hover svg {
  transform: translateX(3px);
}

/* .btn--accent is the ONE style for every call-to-action on the site
   (hero buttons, nav CTA, drawer CTA, CTA bands, etc). It ships with its
   own shine sweep baked in via ::before, so applying it to any new CTA
   is just: <a class="btn btn--accent">Label</a> — no extra markup. */
.btn--accent {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--red-600), var(--red-700));
  color: var(--color-on-dark);
  box-shadow: 0 10px 24px -8px rgba(184, 21, 27, 0.55), var(--shadow-md);
}

.btn--accent::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: btn-accent-shine 6s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes btn-accent-shine {

  0%,
  15% {
    left: -60%;
  }

  30%,
  100% {
    left: 130%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn--accent::before {
    animation: none;
  }
}

.btn--accent:hover {
  background: linear-gradient(135deg, var(--red-700), var(--red-700));
  box-shadow: 0 14px 30px -8px rgba(184, 21, 27, 0.65), var(--shadow-md);
  transform: translateY(-2px);
}

.btn--accent:hover::before {
  animation-duration: 850ms;
  animation-delay: 0s;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-dark);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
}

.btn--ghost-light {
  border: 1px solid var(--color-on-dark-line);
  color: var(--color-on-dark);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}

.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--color-on-dark-faint);
}

.btn--ghost-dark {
  border: 1px solid var(--color-line);
  color: var(--color-heading);
  background: transparent;
}

.btn--ghost-dark:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--white {
  background: var(--color-on-dark);
  color: var(--color-primary);
}

.btn--white:hover {
  background: var(--green-050);
}


/* ============================================================
   NAVBAR
   ------------------------------------------------------------
   Two states, toggled by JS adding `.is-scrolled` to #site-header
   past 40px of scroll (see main.js → initChrome):

   1. TOP (over the hero / page-banner) — fully transparent,
      no capsule, plain links with a drop-shadow for legibility.
   2. SCROLLED — the whole bar detaches from the viewport edges
      and becomes a floating frosted-glass capsule ("hanging
      glass" pill). This is why the nav row is wrapped in an
      inner `.nav-shell`: `.site-header` stays a full-width
      fixed strip (so it never clips), while `.nav-shell` is the
      element that actually shrinks/insets/blurs.
   ============================================================ */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  padding-top: 0.85rem;
}

.nav-shell {
  margin-inline: auto;
  max-width: var(--container-max);
  padding-inline: var(--container-pad);
  border-radius: 0;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: max-width var(--dur-med) var(--ease-smooth),
    padding var(--dur-med) var(--ease-smooth),
    border-radius var(--dur-med) var(--ease-smooth),
    background-color var(--dur-med) var(--ease-standard),
    border-color var(--dur-med) var(--ease-standard),
    box-shadow var(--dur-med) var(--ease-standard),
    backdrop-filter var(--dur-med) var(--ease-standard);
}

.nav {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  transition: height var(--dur-med) var(--ease-smooth);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-brand img {
  height: 3.3rem;
  width: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
  transition: filter var(--dur-med) var(--ease-standard), height var(--dur-med) var(--ease-smooth);
}

.site-header.is-scrolled .nav-brand img {
  filter: none;
  height: 2.4rem;
}

/* Plain text links at top — no pill, just spacing + an underline cue */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-on-dark);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease-standard);
}

.nav-link:hover {
  color: var(--color-lime);
}

/* The Projects trigger is a <button>, not a link (see header.html) —
   the base button reset gives it cursor:pointer like it navigates
   somewhere on click, which it doesn't. Only the dropdown items do. */
button.nav-link {
  cursor: not-allowed;
}

.nav-link svg {
  width: 0.8rem;
  height: 0.8rem;
  transition: transform var(--dur-fast) var(--ease-standard);
}

/* active/hover cue — a small underline dash, not a filled pill */
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.25rem;
  translate: -50% 0;
  width: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-lime);
  transition: width var(--dur-fast) var(--ease-standard);
}

.nav-link:hover::after,
.nav-link.is-active::after {
  width: 1.1rem;
}

.nav-link.is-active {
  color: var(--color-on-dark);
  font-weight: var(--weight-semibold);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-cta {
  white-space: nowrap;
  /* shine sweep itself lives on .btn--accent, see BUTTONS section */
}

/* --- Scrolled state: detach + glass --- */
.site-header.is-scrolled .nav-shell {
  max-width: calc(var(--container-max) - 2rem);
  padding-inline: 0.65rem 0.65rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-nav), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}

.site-header.is-scrolled .nav {
  height: calc(var(--nav-height) - 0.75rem);
}

.site-header.is-scrolled .nav-link {
  color: var(--color-text);
  text-shadow: none;
}

.site-header.is-scrolled .nav-link:hover {
  color: var(--color-primary);
}

.site-header.is-scrolled .nav-link::after {
  background: var(--color-accent);
}

.site-header.is-scrolled .nav-link.is-active {
  color: var(--color-heading);
}

/* --- Dropdown (Projects) --- */
.nav-item {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 50%;
  translate: -50% 0;
  width: 21rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.6rem);
  transition: opacity var(--dur-med) var(--ease-smooth),
    transform var(--dur-med) var(--ease-smooth),
    visibility var(--dur-med);
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-item:hover .nav-link svg,
.nav-item:focus-within .nav-link svg {
  transform: rotate(180deg);
}

.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-standard);
}

.nav-dropdown a:hover {
  background: var(--color-primary-tint);
}

.nav-dropdown a:hover strong {
  color: var(--color-primary);
}

.nav-dropdown .dd-icon {
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-chip);
  color: var(--color-primary);
}

.nav-dropdown .dd-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.nav-dropdown strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  transition: color var(--dur-fast) var(--ease-standard);
}

.nav-dropdown span {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.nav-dropdown .dd-footer {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-line);
  display: flex;
  justify-content: center;
}

.nav-dropdown .dd-footer a {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.nav-dropdown .dd-footer a:hover {
  background: var(--color-accent-tint);
}

/* --- Hamburger: three independent bars so they can morph into an X,
   rather than an svg icon swap, which always looks a little abrupt --- */
.nav-toggle {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-on-dark);
  transition: background var(--dur-fast) var(--ease-standard);
}

.site-header.is-scrolled .nav-toggle {
  background: var(--color-primary-tint);
  color: var(--color-heading);
}

.nav-toggle-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-pill);
  transition: transform 340ms var(--ease-smooth), opacity 160ms var(--ease-standard), width 160ms var(--ease-standard);
}

/* every state (closed + open) is expressed as one transform so the morph
   animates on that single property — mixing in top/margin would make the
   move and the rotate animate out of sync */
.nav-toggle-bar:nth-child(1) {
  transform: translate(-50%, calc(-50% - 0.36rem));
}

.nav-toggle-bar:nth-child(2) {
  transform: translate(-50%, -50%);
}

.nav-toggle-bar:nth-child(3) {
  transform: translate(-50%, calc(-50% + 0.36rem));
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
  width: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* --- Mobile drawer ---
   Opening and closing intentionally use different easing (set on the
   base rule for close, overridden under .drawer-open for open): a slow
   expo-out glide in, a quicker decisive exit — matches how sheet UIs
   on iOS/Android actually move, rather than one symmetric tween. */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(11, 36, 26, 0.55);
  opacity: 0;
  visibility: hidden;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: opacity 320ms var(--ease-drawer-close), visibility 320ms,
    backdrop-filter 320ms var(--ease-drawer-close);
}

body.drawer-open .drawer-scrim {
  opacity: 1;
  visibility: visible;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity 420ms var(--ease-drawer-open), visibility 420ms,
    backdrop-filter 420ms var(--ease-drawer-open);
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: min(22rem, 88vw);
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  transform: translateX(100%);
  transition: transform 340ms var(--ease-drawer-close);
  overflow-y: auto;
}

body.drawer-open .drawer {
  transform: translateX(0);
  transition: transform 480ms var(--ease-drawer-open);
}

body.drawer-open {
  overflow: hidden;
}

/* Menu items cascade in with a short stagger on open — a plain slide
   with everything arriving at once reads flat; a beat of sequence
   makes it feel considered instead of just "instant." Skipped on
   close so dismissing the drawer stays snappy. */
.drawer-menu>li,
.drawer-cta>* {
  opacity: 0;
  transform: translateX(0.85rem);
  transition: opacity 260ms var(--ease-standard), transform 260ms var(--ease-drawer-open);
}

body.drawer-open .drawer-menu>li,
body.drawer-open .drawer-cta>* {
  opacity: 1;
  transform: translateX(0);
}

body.drawer-open .drawer-menu>li:nth-child(1) {
  transition-delay: 90ms;
}

body.drawer-open .drawer-menu>li:nth-child(2) {
  transition-delay: 128ms;
}

body.drawer-open .drawer-menu>li:nth-child(3) {
  transition-delay: 166ms;
}

body.drawer-open .drawer-menu>li:nth-child(4) {
  transition-delay: 204ms;
}

body.drawer-open .drawer-menu>li:nth-child(5) {
  transition-delay: 242ms;
}

body.drawer-open .drawer-menu>li:nth-child(6) {
  transition-delay: 280ms;
}

body.drawer-open .drawer-cta>*:nth-child(1) {
  transition-delay: 320ms;
}

body.drawer-open .drawer-cta>*:nth-child(2) {
  transition-delay: 350ms;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}

.drawer-head img {
  height: 2.2rem;
  width: auto;
}

.drawer-close {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
}

.drawer-close svg {
  width: 1.2rem;
  height: 1.2rem;
}

.drawer-menu {
  flex: 1;
  padding-block: var(--space-5);
}

.drawer-menu>li+li {
  border-top: 1px solid var(--color-line);
}

.drawer-menu a,
.drawer-menu .drawer-sub-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
}

.drawer-sub-toggle svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-med) var(--ease-standard);
}

.drawer-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease-smooth);
}

.drawer-sub>div {
  overflow: hidden;
}

.drawer-sub a {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-muted);
  padding: var(--space-3) var(--space-5);
}

li.sub-open .drawer-sub {
  grid-template-rows: 1fr;
}

li.sub-open .drawer-sub-toggle svg {
  transform: rotate(180deg);
}

.drawer-cta {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.drawer-cta .drawer-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  padding: var(--space-3);
}

.drawer-cta .drawer-phone svg {
  width: 1.1rem;
  height: 1.1rem;
}


/* ============================================================
   HERO — full-bleed image, dark green wash
   ============================================================ */

.hero {
  position: relative;
  width: 100dvw;
  color: var(--color-on-dark);
  overflow: hidden;
}

.hero-media,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media img {
  transform: scale(1.08);
  transition: transform 6s var(--ease-smooth);
}

.hero.is-loaded .hero-media img {
  transform: scale(1);
}

/* Darkest near the top (headline/nav legibility), tapering off well
   before the bottom fade zone so the two don't mix into a muddy band. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(11, 36, 26, 0.62) 0%,
      rgba(11, 36, 26, 0.3) 38%,
      rgba(11, 36, 26, 0.16) 62%,
      rgba(11, 36, 26, 0.08) 100%);
}

/* Bottom of the hero dissolves into the page background so it blends
   straight into the section below instead of ending on a hard edge.
   Eased, multi-stop curve (slow start, faster middle, gentle settle)
   reads as a natural blend instead of a flat linear wash. */
.hero-fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: clamp(9rem, 30vh, 18rem);
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 15%,
      rgba(255, 255, 255, 0.28) 42%,
      rgba(255, 255, 255, 0.68) 68%,
      rgba(255, 255, 255, 0.92) 86%,
      var(--color-bg) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  text-align: left;
}

/* Reserves roughly a full screen so only the headline shows on first
   mount — the CTAs/stats below only come into view once the visitor
   scrolls (see .hero-bottom). */
.hero-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-6);
  min-height: calc(100dvh - var(--nav-height));
  padding-top: calc(var(--nav-height) + var(--space-11));
  margin-top: 7rem;
  margin-top: -3rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-on-dark-line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.hero-badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.hero h1 {
  color: var(--color-on-dark);
  max-width: 59rem;
  /* Steeper than the site-wide --text-3xl so it keeps to 2 lines down
     through tablet widths, then shrinks gracefully into a 3rd line on
     phones instead of overflowing or wrapping into 5-6 tiny lines. */
  font-size: clamp(1.9rem, 1rem + 3.6vw, 5.2rem);
  letter-spacing: 0.01em;
}

.hero h1 em {
  font-style: normal;
  /* color: #b61c1c; */
  color: transparent;
  -webkit-text-stroke: .7px #96b10b;
  -webkit-text-stroke: 1.7px #f0f0f0e4;
}

.hero-sub {
  font-size: var(--text-md);
  color: var(--color-on-dark-muted);
  max-width: 34rem;
  margin-bottom: var(--space-7);
}

/* Muted hairline under the headline — same quiet on-dark-muted token
   used for the stat labels, not a bright accent color. Lives in
   .hero-headline (visible before scroll, alongside the h1) — only the
   CTAs/stats in .hero-bottom wait for a scroll. */
.hero-divider {
  width: 3.5rem;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-on-dark-muted);
}

/* CTAs + stats — sits right after .hero-headline, so it's just past
   the first screen and reveals on scroll via the standard .anim
   system (no custom timing needed here, unlike the headline/divider). */
.hero-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  padding-block: var(--space-5) calc(var(--space-11) + var(--space-8));
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-4);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-8);
  margin-bottom: 3rem;
}

.hero-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-on-dark);
  line-height: var(--leading-tight);
}

.hero-stats strong,
.hero-stats span {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.hero-stats span {
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
}

/* Entrance choreography for the part of the hero visible before any
   scroll (headline + divider): background gets ~1s to settle (see
   .hero-media img above), then the words build up, then the divider
   eases in right on their heels — one continuous wave, not two
   disconnected beats. Specificity alone makes these win over the
   shared rules, regardless of where each lives in the file. */
.hero [data-split-text] .rt-word-inner {
  transition-delay: calc(1000ms + var(--stagger-word) * min(var(--i, 0), var(--stagger-word-cap)));
}

.hero-divider.anim {
  transition-duration: var(--dur-reveal-slow);
  transition-delay: 1900ms;
}

/* CTAs/stats live below the first screen and only reveal on scroll
   (standard IntersectionObserver-triggered .anim, see main.js), but
   share the same slow, unhurried pace as the headline/divider above
   instead of the snappier default used for scroll-reveals elsewhere. */
.hero-actions.anim,
.hero-stats.anim {
  transition-duration: var(--dur-reveal-slow);
}


/* ============================================================
   TRUST BAR
   ============================================================ */

.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--dur-med) var(--ease-standard),
    transform var(--dur-med) var(--ease-standard);
}

.trust-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.trust-item svg {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  padding: 0.7rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-chip);
  color: var(--color-primary);
}

.trust-item strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.trust-item span {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ============================================================
   TRUST / INVEST — full-bleed image / copy / image layout
   ------------------------------------------------------------
   .trust-invest-row is NOT inside .container, so its grid
   spans the true 100vw — the two side images sit flush at the
   real browser edges, while the middle column keeps the copy
   centered and comfortably width-capped. This is the one
   intentional exception to the site's 1200px container rule.
   ============================================================ */

.trust-invest {
  position: relative;
  overflow-x: clip;
}

.trust-invest-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 50rem) minmax(8rem, 1fr);
  align-items: center;
  gap: clamp(var(--space-5), 4vw, var(--space-5));
  width: 100%;
}

/* Paragraph — a little wider than the old container-bound version,
   and given its own side padding since it's no longer protected by
   .container's padding-inline. */
.trust-invest-copy {
  max-width: 50rem;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  margin-bottom: 0;
}

.trust-invest-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3.2 / 3.3;
  box-shadow: var(--shadow-lg);
}

.trust-invest-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-smooth);
}

.trust-invest-media:hover img {
  transform: scale(1.06);
}

/* Rounded only on the inner edge (facing the text) — the outer edge
   stays square since it's meant to look "cut" by the viewport frame,
   the way the Wembley reference photos are. */
.trust-invest-media.side-left {
  justify-self: end;
  border-radius: 0 var(--radius-sm) 125px 0;
}

.trust-invest-media.side-right {
  justify-self: start;
  border-radius: 125px 0 0 var(--radius-sm);
}

/* Small floating stat chip on each image — same "badge overlapping a
   photo" language as .about-card / .projects-floating-badge elsewhere
   on the site, reused here instead of inventing a new visual pattern. */
.trust-invest-badge {
  position: absolute;
  z-index: 2;
  bottom: var(--space-5);
  background: var(--color-primary);
  color: var(--color-on-dark);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-lg);
  max-width: 11rem;
}

.trust-invest-media.side-left .trust-invest-badge {
  right: 0;
  border-radius: var(--radius-md) 10px 0 var(--radius-lg);
}

.trust-invest-media.side-right .trust-invest-badge {
  left: 20px;
  border-radius: 0 var(--radius-) var(--radius-lg) 0;
}

.trust-invest-badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.trust-invest-badge span {
  font-size: var(--text-xs);
  color: var(--color-on-dark-muted);
}

/* Entrance direction — left image drifts in from off-screen left,
   right image from off-screen right, reusing the site's existing
   .anim.fade-left / .anim.fade-right system. */
.trust-invest-media.fade-right {
  transform: translateX(calc(var(--anim-distance) * -2));
}

.trust-invest-media.fade-left {
  transform: translateX(calc(var(--anim-distance) * 2));
}

/* ---------- Responsive ---------- */

@media (max-width: 64rem) {

  /* ≤1024px — images shrink and pull in slightly so the middle
     column keeps enough room for comfortable line length */
  .trust-invest-row {
    grid-template-columns: minmax(6rem, 0.7fr) minmax(0, 34rem) minmax(6rem, 0.7fr);
    gap: var(--space-5);
  }

  .trust-invest-copy {
    max-width: 34rem;
  }
}

@media (max-width: 48rem) {

  /* ≤768px — stack: full-bleed image strip, copy, full-bleed image
     strip. Images stay edge-to-edge (still full-bleed!) but now sit
     above/below the text instead of beside it. */
  .trust-invest-row {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .trust-invest-media {
    justify-self: stretch;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
  }

  .trust-invest-media.side-left,
  .trust-invest-media.side-right {
    border-radius: 0;
  }

  .trust-invest-copy {
    max-width: 34rem;
    text-align: center;
  }

  .trust-invest-badge {
    bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
  }

  .trust-invest-media.side-left .trust-invest-badge,
  .trust-invest-media.side-right .trust-invest-badge {
    border-radius: 0;
  }
}

@media (max-width: 30rem) {

  /* ≤480px — trim badge further so it doesn't crowd small photos */
  .trust-invest-media {
    aspect-ratio: 4 / 3;
  }

  .trust-invest-badge {
    max-width: 9rem;
  }

  .trust-invest-badge strong {
    font-size: var(--text-lg);
  }
}

/* ============================================================
   ABOUT SPLIT
   ============================================================ */

/* Asymmetric split: a small, pinned image against a wide column of
   copy — shared shape with .projects-layout below (mirrored there).
   --split-fade-bg (set on #about) tints the image's dissolve mask,
   see .anim.img-reveal-side. */
#about {
  --split-fade-bg: var(--color-bg-soft);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 30%) 1fr;
  gap: clamp(var(--space-8), 6vw, var(--space-11));
  align-items: start;
}

.about-media {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-10));
}

.about-media .about-img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  --reveal-origin: right;
  --reveal-shift: -6%;
  --reveal-tilt: -2deg;
}

.about-media .about-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.about-media .about-card {
  position: absolute;
  bottom: var(--space-6);
  right: calc(var(--space-6) * -1);
  background: var(--color-primary);
  color: var(--color-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-lg);
  max-width: 15rem;
}

.about-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.about-card span {
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
}

/* Pushed down from the image's top edge on purpose — a shared top
   line for both columns reads as a plain two-column template; letting
   the copy start lower, staggered against the image, is what actually
   makes the pairing asymmetric instead of just "narrower column". */
.about-copy {
  margin-top: clamp(3.5rem, 11vw, 8rem);
}

.about-copy .eyebrow {
  margin-bottom: var(--space-4);
}

.about-copy p {
  color: var(--color-muted);
  font-size: var(--text-md);
  margin-top: var(--space-4);
}

.about-copy p a {
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-standard),
    text-decoration-color var(--dur-fast) var(--ease-standard);
}

.about-copy p a:hover,
.about-copy p a:focus-visible {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.about-checklist {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-3);
}

.about-checklist.cols-2 {
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-6);
}

.about-checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
}

.about-checklist svg {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  color: var(--color-primary);
}

.about-foot {
  margin-top: var(--space-7);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.about-phone {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.about-phone svg {
  width: 2.9rem;
  height: 2.9rem;
  padding: 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-tint);
  color: var(--color-accent);
}

.about-phone span {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.about-phone strong {
  font-size: var(--text-md);
  color: var(--color-heading);
}


/* ============================================================
   PROJECTS
   ============================================================ */

/* Mirror of .about-grid — copy on the left this time, small pinned
   image on the right, so the two teasers read as a deliberate pair
   rather than the same template repeated. --split-fade-bg falls back
   to plain --color-bg (this section has no --soft tint). */
.projects-layout {
  display: grid;
  grid-template-columns: 1fr minmax(14rem, 32%);
  gap: clamp(var(--space-8), 6vw, var(--space-11));
  align-items: start;
}

/* Same staggered rule as .about-copy — copy starts lower than the
   image's top edge, not on a shared line, so the pairing reads as a
   deliberate asymmetric composition either direction. */
.projects-copy {
  margin-top: clamp(3.5rem, 11vw, 8rem);
}

.projects-copy p {
  color: var(--color-muted);
  font-size: var(--text-md);
  margin-top: var(--space-4);
}

.projects-copy .btn {
  margin-top: var(--space-6);
}

/* Medium-format 2-image carousel + floating stat badge — same
   dark-badge-overlapping-a-photo language as .about-card, scaled down
   to a contained "box" rather than a full grid-column image. Pinned
   like .about-media, offset to a different top so the pair doesn't
   feel like a copy-pasted template. */
.projects-showcase {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
}

.projects-carousel {
  position: relative;
  aspect-ratio: 4 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  --reveal-origin: left;
  --reveal-shift: 6%;
  --reveal-tilt: 2deg;
  box-shadow: var(--shadow-lg);
}

.projects-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--ease-smooth);
}

.projects-carousel img.is-active {
  opacity: 1;
}

.projects-carousel-dots {
  position: absolute;
  z-index: 2;
  bottom: var(--space-4);
  left: 50%;
  translate: -50% 0;
  display: flex;
  gap: var(--space-2);
}

.projects-carousel-dots button {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: background var(--dur-fast) var(--ease-standard), width var(--dur-fast) var(--ease-standard);
}

.projects-carousel-dots button.is-active {
  width: 1.4rem;
  background: var(--color-on-dark);
}

.projects-floating-badge {
  position: absolute;
  z-index: 3;
  bottom: var(--space-6);
  right: calc(var(--space-6) * -1);
  background: var(--color-primary);
  color: var(--color-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-lg);
  max-width: 12rem;
}

.projects-floating-badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.projects-floating-badge span {
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
}

/* ============================================================
   DISTRICTS — full-bleed photo hub cards (ongoing-projects.html).
   Idle state: photo + title + a "click to view projects" prompt.
   Hover state: an accent border frames the card and the prompt
   swaps for the full description + CTA (grid-template-rows 0fr->1fr
   trick for a jank-free height animation — same pattern as the FAQ
   accordion elsewhere in this file).
   ============================================================ */

.district-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.district-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid transparent;
  box-shadow: var(--shadow-md);
  transition: box-shadow 550ms var(--ease-smooth),
    transform 550ms var(--ease-smooth),
    border-color 550ms var(--ease-smooth);
}

.district-card:hover,
.district-card:focus-visible {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  border-color: var(--color-accent);
}

.district-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-smooth);
}

.district-card:hover img {
  transform: scale(1.1);
}

/* bottom-weighted dark wash (photo stays vivid up top, text stays
   legible at the bottom) plus enough tint overall to read as part of
   the same brand palette as the rest of the site, not a bare stock photo.
   Deepens further on hover since more text sits on top of it then. */
.district-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
      rgba(15, 21, 9, 0.15) 0%,
      rgba(15, 21, 9, 0.05) 30%,
      rgba(15, 21, 9, 0.72) 78%,
      rgba(15, 21, 9, 0.92) 100%);
  transition: background 550ms var(--ease-smooth);
}

.district-card:hover::before {
  background: linear-gradient(180deg,
      rgba(15, 21, 9, 0.3) 0%,
      rgba(15, 21, 9, 0.18) 25%,
      rgba(15, 21, 9, 0.88) 58%,
      rgba(15, 21, 9, 0.96) 100%);
}

.district-badge {
  position: absolute;
  z-index: 2;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-on-dark);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
}

.district-card-body {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-5);
}

.district-card-body h3 {
  color: var(--color-on-dark);
  font-size: var(--text-xl);
  transition: transform 550ms var(--ease-smooth);
}

.district-card:hover .district-card-body h3 {
  transform: translateY(-2px);
}

/* idle-state prompt — fades/collapses away on hover to make room for
   the description + CTA below */
.district-hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  max-height: 1.5rem;
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-on-dark-muted);
  transition: opacity 400ms var(--ease-smooth), transform 400ms var(--ease-smooth),
    max-height 400ms var(--ease-smooth), margin 400ms var(--ease-smooth);
}

.district-hint svg {
  width: 0.9rem;
  height: 0.9rem;
}

.district-card:hover .district-hint,
.district-card:focus-visible .district-hint {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  margin-top: 0;
}

.district-reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 650ms var(--ease-smooth);
}

.district-reveal-inner {
  overflow: hidden;
  min-height: 0;
}

.district-card:hover .district-reveal,
.district-card:focus-visible .district-reveal {
  grid-template-rows: 1fr;
}

.district-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-on-dark);
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 450ms var(--ease-smooth), transform 500ms var(--ease-smooth),
    gap var(--dur-fast) var(--ease-standard);
}

.district-card:hover .district-cta,
.district-card:focus-visible .district-cta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 220ms;
}

.district-card:hover .district-cta {
  gap: var(--space-3);
}

.district-cta svg {
  width: 1rem;
  height: 1rem;
}

/* ============================================================
   EXPLORE FEATURE — intro copy sitting between the section heading
   and the card grid below it. */
.explore-feature {
  margin-bottom: clamp(var(--space-8), 6vw, var(--space-10));
}

.explore-feature p {
  color: var(--color-muted);
  font-size: var(--text-md);
}

.explore-feature p+p {
  margin-top: var(--space-4);
}

/* Closing note after the card grid, still inside #explore — overrides
   .section-prose's centered alignment to match the rest of the page's
   left-aligned copy */
.explore-note {
  margin-top: clamp(var(--space-8), 6vw, var(--space-10));
  margin-bottom: 0;
  text-align: left;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.project-card {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-med) var(--ease-standard),
    transform var(--dur-med) var(--ease-standard);
}

.project-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.project-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10.5;
}

.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-smooth);
}

.project-card:hover .project-media img {
  transform: scale(1.06);
}

.project-status {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm);
}

.project-status--accent {
  color: var(--color-accent);
}

.project-body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project-title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.project-loc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-4);
}

.project-loc svg {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--color-accent);
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-4);
  margin-bottom: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.project-meta span {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  background: var(--color-primary-tint);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

.project-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.project-price span {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.project-price strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-heading);
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.project-link svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.project-link:hover svg {
  transform: translateX(4px);
}


/* ============================================================
   WHY US (dark section)
   ============================================================ */

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.why-card {
  padding: var(--space-6);
  border: 1px solid var(--color-on-dark-line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  transition: background var(--dur-med) var(--ease-standard),
    transform var(--dur-med) var(--ease-standard);
}

.why-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-4px);
}

.why-card svg {
  width: 3rem;
  height: 3rem;
  padding: 0.8rem;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-dark);
  margin-bottom: var(--space-5);
}

.why-card h3 {
  font-size: var(--text-lg);
  color: var(--color-on-dark);
  margin-bottom: var(--space-3);
}

.why-card p {
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
}

/* --- "Site-plan" layout: the why-us section reads like a surveyed
   record — a faint coordinate grid, registration crop-marks at the
   content corners, and a heading/copy split divided by a graduated
   ruler line, echoing the plot maps this business is built on. --- */
.why-us {
  position: relative;
}

.why-us::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 78%);
  pointer-events: none;
  animation: why-us-grid-pan 6s linear infinite;
}

@keyframes why-us-grid-pan {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 56px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-us::before {
    animation: none;
  }
}

.why-us-top {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) 1px minmax(0, 1.15fr);
  gap: var(--space-8);
  align-items: start;
}

.why-us-heading h2 {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
  color: var(--color-on-dark);
}

/* Vertical ruler between the heading and the copy. */
.why-us-ruler {
  position: relative;
  align-self: stretch;
  min-height: 12rem;
}

.why-us-ruler::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(to bottom,
      var(--color-on-dark-line) 0 5px,
      transparent 5px 13px);
}

.why-us-fields {
  display: flex;
  flex-direction: column;
}

.why-us-field {
  color: var(--color-on-dark-muted);
  font-size: var(--text-md);
}

.why-us-field+.why-us-field {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-on-dark-line);
}

.stats-band {
  margin-top: var(--space-9);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-on-dark-line);
  border: 1px solid var(--color-on-dark-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.stats-cell {
  background: var(--color-bg-dark);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  transition: background var(--dur-med) var(--ease-standard);
}

.stats-cell:hover {
  background: rgba(255, 255, 255, 0.035);
}

.stats-cell:hover strong {
  color: var(--color-lime);
}

.stats-band strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-on-dark);
  line-height: var(--leading-tight);
  transition: color var(--dur-fast) var(--ease-standard);
}

.stats-band strong em {
  font-style: normal;
  color: var(--color-accent);
}

.stats-band span {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}


/* ============================================================
   GALLERY — bento mosaic
   ============================================================ */

.gallery-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 12rem;
  grid-auto-flow: dense;
  gap: var(--space-4);
}

.gallery-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.gallery-tile.g1,
.gallery-tile.g4 {
  grid-row: span 2;
}

.gallery-tile.g2,
.gallery-tile.g8 {
  grid-column: span 2;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-smooth);
}

/* specificity must beat .anim.img-reveal.is-in img (0,3,1) which also sets transform */
.gallery-bento .gallery-tile.is-in:hover img {
  transform: scale(1.07);
}

.gallery-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(to top, rgba(11, 36, 26, 0.82) 0%, rgba(11, 36, 26, 0.15) 45%, transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-standard);
}

.gallery-tile:hover::before {
  opacity: 1;
}

.gallery-tile figcaption {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 5;
  color: var(--color-on-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity var(--dur-med) var(--ease-standard),
    transform var(--dur-med) var(--ease-standard);
}

.gallery-tile:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

.gallery-tile figcaption span {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  margin-bottom: 0.15rem;
}


/* ============================================================
   TESTIMONIALS
   ============================================================ */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.testimonial-card {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: box-shadow var(--dur-med) var(--ease-standard);
}

.testimonial-card:hover {
  box-shadow: var(--shadow-md);
}

.testimonial-stars {
  display: flex;
  gap: var(--space-1);
  color: #E8A33D;
}

.testimonial-stars svg {
  width: 1rem;
  height: 1rem;
}

.testimonial-card blockquote {
  color: var(--color-text);
  font-size: var(--text-base);
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}

.testimonial-person img {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

/* text-only avatar fallback — brand-initials circle, no external image request */
.avatar-initials {
  width: 2.9rem;
  height: 2.9rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-primary-chip);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

.testimonial-person strong {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-heading);
}

.testimonial-person span {
  font-size: var(--text-xs);
  color: var(--color-muted);
}


/* ============================================================
   CTA BAND
   ============================================================ */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-dark);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-8), 7vw, var(--space-11));
  text-align: center;
  color: var(--color-on-dark);
}

.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-pill);
  filter: blur(70px);
  opacity: 0.45;
}

.cta-band::before {
  width: 22rem;
  height: 22rem;
  background: var(--green-700);
  top: -8rem;
  left: -6rem;
}

.cta-band::after {
  width: 18rem;
  height: 18rem;
  background: var(--red-700);
  bottom: -9rem;
  right: -5rem;
  opacity: 0.3;
}

.cta-band>* {
  position: relative;
  z-index: var(--z-raised);
}

.cta-band h2 {
  color: var(--color-on-dark);
  max-width: 28ch;
  margin-inline: auto;
}

.cta-band p {
  color: var(--color-on-dark-muted);
  font-size: var(--text-md);
  max-width: 80rem;
  margin: var(--space-4) auto var(--space-7);
}

/* Standalone-quote variant of the band (no h2, just the quoted line) —
   sized a step up from the default .cta-band p and fluid, rather than
   a fixed rem that stayed the same size no matter the viewport. */
.cta-band .cta-quote {
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  font-weight: var(--weight-medium);
  max-width: 46rem;
  color: var(--color-on-dark);
}

.cta-band .cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: var(--color-bg-darkest);
  color: var(--color-on-dark-muted);
  padding-top: var(--space-11);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.5fr;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
}

.footer-brand img {
  height: 3rem;
  width: auto;
  margin-bottom: var(--space-5);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

.footer-brand p {
  font-size: var(--text-sm);
  max-width: 30ch;
  margin-bottom: var(--space-5);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
}

.footer-social a {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-on-dark-line);
  color: var(--color-on-dark);
  transition: background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.footer-social a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.footer-social svg {
  width: 1.05rem;
  height: 1.05rem;
}

.footer-col h4 {
  color: var(--color-on-dark);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.footer-col ul {
  display: grid;
  gap: var(--space-3);
}

.footer-col ul a {
  font-size: var(--text-sm);
  transition: color var(--dur-fast) var(--ease-standard), padding-left var(--dur-fast) var(--ease-standard);
}

.footer-col ul a:hover {
  color: var(--color-on-dark);
  padding-left: var(--space-2);
}

.footer-contact li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.footer-contact svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--color-accent);
}

.footer-contact a:hover {
  color: var(--color-on-dark);
}

.footer-bottom {
  border-top: 1px solid var(--color-on-dark-line);
  padding-block: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-on-dark-faint);
}

.footer-bottom a:hover {
  color: var(--color-on-dark);
}


/* ============================================================
   ANIMATION SYSTEM
   ------------------------------------------------------------
   Usage:  <div class="anim fade-up d2"> … </div>
   JS adds .is-in when the element enters the viewport.
   Variants: fade-up | fade-down | fade-left | fade-right
             zoom-in | blur-in | img-reveal
   Modifiers: .slow (longer), .d1–.d8 (stagger delays)
   ============================================================ */

.anim {
  opacity: 0;
  transition:
    opacity var(--dur-reveal) var(--ease-smooth),
    transform var(--dur-reveal) var(--ease-smooth),
    filter var(--dur-reveal) var(--ease-smooth);
  will-change: opacity, transform;
}

.anim.slow {
  transition-duration: var(--dur-reveal-slow);
}

.anim.fade-up {
  transform: translateY(var(--anim-distance));
}

.anim.fade-down {
  transform: translateY(calc(var(--anim-distance) * -1));
}

.anim.fade-left {
  transform: translateX(var(--anim-distance));
}

.anim.fade-right {
  transform: translateX(calc(var(--anim-distance) * -1));
}

.anim.zoom-in {
  transform: scale(0.92);
}

.anim.blur-in {
  filter: blur(14px);
  transform: translateY(var(--space-3));
}

.anim.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* img-reveal — curtain wipe for image containers.
   Put the class on a wrapper DIV around the <img>. */
.anim.img-reveal {
  opacity: 1;
  transform: none;
  position: relative;
  overflow: hidden;
}

.anim.img-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  background: var(--green-100);
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform var(--dur-reveal-slow) var(--ease-smooth);
  transition-delay: inherit;
}

.anim.img-reveal img {
  transform: scale(1.12);
  transition: transform var(--dur-reveal-slow) var(--ease-smooth);
  transition-delay: inherit;
}

.anim.img-reveal.is-in::after {
  transform: scaleY(0);
}

.anim.img-reveal.is-in img {
  transform: scale(1);
}

/* img-reveal-side — sideways curtain + a slide-and-settle image move
   (same slight-rotate-to-0 language as the hero headline's word mask,
   see .rt-word-inner), for the small pinned images in .about-media /
   .projects-showcase. Direction is per-instance via --reveal-origin /
   --reveal-shift / --reveal-tilt (set on .about-img / .projects-carousel)
   so the two panels mirror each other instead of repeating identically.
   Also carries a permanent bottom mask that dissolves the image into
   its own section's background — see --split-fade-bg. */
.anim.img-reveal-side {
  opacity: 1;
  transform: none;
  position: relative;
  overflow: hidden;
}

.anim.img-reveal-side::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  background: var(--green-100);
  transform-origin: var(--reveal-origin, left);
  transition: transform var(--dur-reveal-slow) var(--ease-smooth);
  transition-delay: inherit;
}

.anim.img-reveal-side img {
  transform: translateX(var(--reveal-shift, -6%)) rotate(var(--reveal-tilt, -2deg)) scale(1.08);
  transition: transform var(--dur-reveal-slow) var(--ease-smooth);
  transition-delay: inherit;
}

.anim.img-reveal-side.is-in::after {
  transform: scaleX(0);
}

.anim.img-reveal-side.is-in img {
  transform: translateX(0) rotate(0deg) scale(1);
}

.anim.img-reveal-side::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 35%;
  z-index: var(--z-raised);
  background: linear-gradient(to bottom, transparent, var(--split-fade-bg, var(--color-bg)) 92%);
  pointer-events: none;
}

/* ------------------------------------------------------------
   TEXT REVEAL — slow word-mask animation for headings/lead lines
   ------------------------------------------------------------
   Markup (built by splitIntoWords() in main.js from data-split-text):
     <h2 class="anim" data-split-text>
       <span class="split-line">
         <span class="rt-word">                  ← overflow:hidden mask
           <span class="rt-word-inner">Word</span> ← the part that slides up
         </span> …
       </span>
     </h2>
   Each word gets its own mask/slide pair, so the line can wrap
   normally at any width — there's no line-detection step, the
   per-word transform is what makes it read as a reveal either way.
   JS sets --i (word index) inline; CSS turns that into a stagger
   delay so words settle in one slow unhurried wave instead of
   popping together. Skipped entirely under reduced motion, in
   which case the element just keeps its plain original text.
   ------------------------------------------------------------ */

[data-split-text] {
  opacity: 1;
}

/* overrides .anim's opacity:0 — words fade individually */

.split-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.rt-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.rt-word-inner {
  display: inline-block;
  transform: translateY(105%) rotate(2deg);
  opacity: 0;
  transition: transform var(--dur-text) var(--ease-smooth),
    opacity calc(var(--dur-text) * 0.8) var(--ease-smooth);
  transition-delay: calc(var(--stagger-word) * min(var(--i, 0), var(--stagger-word-cap)));
}

.is-in .rt-word-inner {
  transform: translateY(0) rotate(0deg);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .rt-word-inner {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* stagger delays */
.anim.d1 {
  transition-delay: calc(var(--stagger-step) * 1);
}

.anim.d2 {
  transition-delay: calc(var(--stagger-step) * 2);
}

.anim.d3 {
  transition-delay: calc(var(--stagger-step) * 3);
}

.anim.d4 {
  transition-delay: calc(var(--stagger-step) * 4);
}

.anim.d5 {
  transition-delay: calc(var(--stagger-step) * 5);
}

.anim.d6 {
  transition-delay: calc(var(--stagger-step) * 6);
}

.anim.d7 {
  transition-delay: calc(var(--stagger-step) * 7);
}

.anim.d8 {
  transition-delay: calc(var(--stagger-step) * 8);
}

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

  .anim,
  .anim.is-in {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .anim.img-reveal::after,
  .anim.img-reveal-side::after {
    display: none;
  }

  .anim.img-reveal img,
  .anim.img-reveal-side img {
    transform: none;
    transition: none;
  }

  .hero-media img {
    transform: none;
    transition: none;
  }
}


/* ============================================================
   SITE CHROME — scroll progress + back-to-top
   (shared across every page via the include.js partial system)
   ============================================================ */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-lime), var(--color-accent));
  z-index: calc(var(--z-nav) + 1);
  transition: width 100ms linear;
}

.back-to-top {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-dark);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-fab);
  opacity: 0;
  visibility: hidden;
  translate: 0 0.75rem;
  transition: opacity var(--dur-med) var(--ease-standard),
    translate var(--dur-med) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.back-to-top:hover {
  background: var(--color-primary-hover);
}

.back-to-top svg {
  width: 1.3rem;
  height: 1.3rem;
}


/* ============================================================
   PAGE HERO — full-bleed photo banner for every non-home page
   ------------------------------------------------------------
   Same structure as the homepage .hero (full 100dvh/100dvw photo +
   dark gradient wash + slow settle-in zoom), just with its own
   per-page image instead of the homepage's. Replaced the old
   compact dark-tone-plus-contour-pattern banner, which read as
   flat filler rather than a real page opener.
   ============================================================ */

.page-hero {
  position: relative;
  width: 100dvw;
  min-height: 80dvh;
  min-height: 80svh;
  /* fallback for browsers without dvh */
  display: flex;
  align-items: center;
  color: var(--color-on-dark);
  overflow: hidden;
}

/* Land-for-sale district pages (Coimbatore/Salem/Namakkal/Trichy): the
   banner pins in place for a full extra hero-height of scroll, while
   the section right after it — rounded top, higher stacking — slides
   up from below and masks over it, fully covering the hero by the end
   of that scroll distance. Nothing overlaps at rest (scroll 0); the
   cover only starts reaching the hero once the user actually scrolls,
   which is what makes it read as a scroll effect rather than a
   permanent overlap.

   Markup: .hero-pin (runway) > .page-hero.page-hero--land (sticky).
   Pure CSS (position:sticky, no fixed/JS scroll hijack), same behavior
   at every viewport size. */
.hero-pin {
  position: relative;
  /* double the hero's own height so the reveal has a full hero-height's
     worth of scroll to work with — the cover needs to travel that whole
     distance to go from "just peeking in at the bottom" to "fully over
     the hero", not just the last sliver of it. Kept as three matching
     literal 85dvh/85svh values (here, on .page-hero--land, and on the
     cover below) rather than one shared custom property: a custom prop
     can't carry a dvh/svh fallback pair through calc() (the whole
     calc() using it fails as a single unit if dvh isn't supported,
     instead of quietly keeping the last valid declaration the way two
     plain property lines do) — and it also doesn't cross the sibling
     boundary to the cover section below, which is the exact bug this
     replaced. */
  height: calc(85dvh * 2);
  height: calc(85svh * 2);
}

.page-hero--land {
  position: sticky;
  top: 0;
  height: 85dvh;
  height: 85svh;
  min-height: 0;
}

.hero-pin+section {
  position: relative;
  z-index: 1;
  margin-top: calc(85dvh * -1);
  margin-top: calc(85svh * -1);
  background: var(--color-bg);
  border-radius: clamp(1rem, 3vw, 1.75rem) clamp(1rem, 3vw, 1.75rem) 0 0;
  box-shadow: 0 -1.5rem 2.5rem -1.5rem rgba(15, 21, 9, 0.18);
}

.page-hero-media,
.page-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero-media img {
  transform: scale(1.08);
  transition: transform 6s var(--ease-smooth);
}

.page-hero.is-loaded .page-hero-media img {
  transform: scale(1);
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(11, 36, 26, 0.88) 0%, rgba(11, 36, 26, 0.4) 45%, rgba(11, 36, 26, 0.6) 100%);
}

.page-hero-content {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  padding-block: calc(var(--nav-height) + var(--space-9)) var(--space-10);
}

.page-hero h1 {
  color: var(--color-on-dark);
  margin-bottom: var(--space-4);
  max-width: 44rem;
}

/* Block-level (not inline) so the subtitle reliably starts its own
   line at every width, with its own responsive scale instead of a
   fixed size — a fixed px/rem value here looked fine on desktop but
   was oversized relative to the h1 once the h1 itself shrank via
   clamp() on narrower screens. */
.page-hero-h1-sub {
  display: block;
  font-size: clamp(1.15rem, 0.9rem + 1.1vw, 1.8rem);
  font-weight: var(--weight-semibold);
  word-spacing: 0.1em;
  letter-spacing: -0.01em;
  margin-top: var(--space-2);
}

.page-hero-lead {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.9);
  max-width: 38rem;
}

.page-hero-lead--wide {
  max-width: none;
}

/* Stat row for a page-hero, same number/label language as the
   homepage .hero-stats but with an added description line per stat. */
.page-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  margin-top: var(--space-8);
  margin-inline: auto;
  /* centers once max-width kicks in on wide screens */
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-on-dark-line);
  max-width: 56rem;
}

.page-hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-on-dark);
  line-height: var(--leading-tight);
}

.page-hero-stat h3 {
  color: var(--color-on-dark);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-1);
}

.page-hero-stat p {
  color: var(--color-on-dark-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-on-dark-faint);
  margin-bottom: var(--space-6);
}

.breadcrumb a {
  color: var(--color-on-dark-muted);
  transition: color var(--dur-fast) var(--ease-standard);
}

.breadcrumb a:hover {
  color: var(--color-on-dark);
}

.breadcrumb .bc-current {
  color: var(--color-lime);
}

.breadcrumb .bc-sep {
  opacity: 0.5;
}


/* ============================================================
   FAQ ACCORDION — native <details>/<summary>, no JS required
   to open/close (a small enhancement animates the reveal, see
   main.js → initFaq, but the accordion works with JS disabled)
   ============================================================ */

/* FAQ split: heading pinned in a narrow left column, accordion in
   the wide right column — an alternative to the centered FAQ layout
   used on the homepage, so the two don't read as the same template. */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(12rem, 28%) 1fr;
  gap: clamp(var(--space-6), 5vw, var(--space-9));
  align-items: start;
}

.faq-heading {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-8));
}

.faq-list {
  display: grid;
  gap: var(--space-4);
}

.faq-item {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

.faq-item[open] {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  color: var(--color-heading);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  transition: transform var(--dur-med) var(--ease-standard), background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  background: var(--color-accent);
  color: var(--color-on-dark);
}

.faq-icon svg {
  width: 1rem;
  height: 1rem;
}

.faq-answer {
  color: var(--color-muted);
  font-size: var(--text-md);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.faq-answer p+p {
  margin-top: var(--space-3);
}

.faq-answer.is-animating {
  animation: faqReveal var(--dur-med) var(--ease-smooth);
}

@keyframes faqReveal {
  from {
    opacity: 0;
    transform: translateY(-0.4rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glossary of land-buying terms — dl/dt/dd, good for SEO definitions */
.glossary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.glossary-item {
  padding: var(--space-5);
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-lime);
}

.glossary-item dt {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}

.glossary-item dd {
  font-size: var(--text-sm);
  color: var(--color-muted);
}


/* ============================================================
   LONG-FORM CONTENT COMPONENTS (about / projects — SEO copy)
   ============================================================ */

.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  padding-left: var(--space-7);
  border-left: 3px solid var(--color-lime);
  max-width: 42rem;
}

.timeline {
  position: relative;
  padding-left: var(--space-7);
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: rgba(235, 57, 57, 0.912);
}

.timeline-item {
  position: relative;
  padding-bottom: var(--space-8);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-7) * -1 + 0.05rem);
  top: 0.3rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--color-bg);
  border: 3px solid var(--color-accent);
}

.timeline-year {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.timeline-item h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.timeline-item p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  max-width: 42rem;
}

.credential-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

/* ============================================================
   REASON SCROLL — three text/image slides for the "Why Invest"
   section. Base rules below render a plain stacked list — that's
   the only state that exists without JS, with prefers-reduced-motion,
   or under 48rem, so the copy is always fully visible. main.js'
   initReasonScroll() adds .is-pinned on top of that (≥48rem, motion
   allowed) to turn it into a sticky viewport where slides crossfade
   as the tall .reason-scroll driver scrolls past. */
.reason-scroll-progress {
  display: none;
}

.reason-scroll-dot {
  width: 2rem;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-line);
  transition: background var(--dur-med) var(--ease-standard);
}

.reason-slide {
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) minmax(13rem, 34%);
  align-items: center;
  gap: clamp(var(--space-7), 6vw, var(--space-9));
}

.reason-slide-2 {
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: center;
  gap: clamp(var(--space-7), 6vw, var(--space-9));
}

.reason-slide+.reason-slide {
  margin-top: clamp(var(--space-9), 7vw, var(--space-11));
}

.reason-slide-copy p {
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--color-muted);
  max-width: 32rem;
}

.reason-slide-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* --- pinned / crossfade mode (JS-enabled, ≥48rem, motion allowed) --- */
.reason-scroll.is-pinned {
  position: relative;
}

.reason-scroll.is-pinned .reason-scroll-pin {
  position: sticky;
  top: var(--nav-height);
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.reason-scroll.is-pinned .reason-scroll-progress {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.reason-scroll.is-pinned .reason-scroll-dot.is-active {
  background: var(--color-accent);
}

.reason-scroll.is-pinned .reason-slide-stack {
  position: relative;
  min-height: min(26rem, 50vh);
}

.reason-scroll.is-pinned .reason-slide {
  position: absolute;
  inset: 0;
  margin-top: 0;
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--dur-reveal) var(--ease-smooth), transform var(--dur-reveal) var(--ease-smooth);
  pointer-events: none;
}

.reason-scroll.is-pinned .reason-slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.reason-scroll.is-pinned .reason-slide-media img {
  transform: scale(1.04);
  transition: transform var(--dur-reveal-slow) var(--ease-smooth);
}

.reason-scroll.is-pinned .reason-slide.is-active .reason-slide-media img {
  transform: scale(1);
}

.reason-scroll+.pull-quote,
.reason-scroll+.cta-band {
  margin-top: clamp(var(--space-8), 6vw, var(--space-10));
  margin-inline: auto;
}

.credential-card {
  display: flex;
  align-items: center;
  /* default (stretch) top-aligns the fixed-size
    icon against the text block whenever the heading wraps to 2 lines */
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.credential-card .cc-icon {
  flex-shrink: 0;
  width: 2.9rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--color-primary-chip);
  color: var(--color-primary);
}

.credential-card .cc-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.credential-card h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  letter-spacing: normal;
  /* margin-bottom: var(--space-1); */
}

.credential-card p {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Compact name + location tiles for project lists where we only have
   that much real data (no price/approval/photo per entry) — deliberately
   plainer than .project-card so it doesn't imply detail that isn't there. */
.project-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.project-mini-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  transition: box-shadow var(--dur-med) var(--ease-standard),
    transform var(--dur-med) var(--ease-standard);
}

.project-mini-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.project-mini-icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--color-primary-chip);
  color: var(--color-primary);
}

.project-mini-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.project-mini-card h3 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  margin-bottom: 0.2rem;
}

.project-mini-loc {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.project-mini-loc svg {
  width: 0.8rem;
  height: 0.8rem;
  flex-shrink: 0;
  color: var(--color-accent);
}

/* Groups the completed-projects mini-grids by district on the
   site-wide completed-projects.html page. */
.district-group+.district-group {
  margin-top: var(--space-8);
}

.district-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}

.district-group-head h3 {
  font-size: var(--text-lg);
  color: var(--color-heading);
}

.district-group-count {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.project-mini-grid--single {
  grid-template-columns: 1fr;
  max-width: 26rem;
}

.area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.area-card {
  padding: var(--space-6);
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
}

.area-card .area-tag {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-lime-text);
  background: var(--color-lime-tint);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
}

.area-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.area-card p {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.project-detail-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
}

.project-detail-list div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px dashed var(--color-line);
  font-size: var(--text-sm);
}

.project-detail-list dt {
  color: var(--color-muted);
}

.project-detail-list dd {
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}


/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--space-7), 5vw, var(--space-10));
  align-items: start;
}

.contact-info-list {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.contact-info-item {
  display: flex;
  gap: var(--space-4);
}

.contact-info-item .ci-icon {
  flex-shrink: 0;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-chip);
  color: var(--color-primary);
  display: grid;
  place-items: center;
}

.contact-info-item .ci-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.contact-info-item h3 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
  margin-bottom: 0.3rem;
}

.contact-info-item p,
.contact-info-item a {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
}

.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-line);
  aspect-ratio: 16 / 11;
  background: var(--color-bg-soft);
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.map-directions-link {
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.map-directions-link svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.map-directions-link:hover svg {
  transform: translateX(4px);
}

.contact-form-card {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  box-shadow: var(--shadow-md);
}

.contact-form {
  display: grid;
  gap: var(--space-4);
}

.form-row {
  display: grid;
  gap: var(--space-2);
}

.form-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-row label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.form-row input,
.form-row select,
.form-row textarea {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--dur-fast) var(--ease-standard);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.contact-form textarea {
  resize: vertical;
  min-height: 7.5rem;
}

.form-note {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.contact-form button[type="submit"] {
  margin-top: var(--space-2);
}


/* ============================================================
   FOOTER — watermark + CTA strip + WhatsApp callback form
   ============================================================ */

.site-footer {
  position: relative;
  overflow: hidden;
}

.footer-wordmark {
  position: absolute;
  left: 50%;
  bottom: -0.3em;
  translate: -50% 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(4rem, 17vw, 13rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.07);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

.footer-top,
.footer-grid,
.footer-bottom {
  position: relative;
  z-index: 1;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-on-dark-line);
}

.footer-top-copy {
  max-width: 26rem;
}

.footer-top-copy h2 {
  color: var(--color-on-dark);
}

.footer-top-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
  font-weight: var(--weight-semibold);
  color: var(--color-on-dark);
}

.footer-top-link svg {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--color-lime);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.footer-top-link:hover svg {
  transform: translate(3px, -3px);
}

.footer-callback {
  width: min(22rem, 100%);
}

.footer-callback p {
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
  margin-bottom: var(--space-4);
}

.footer-callback-row {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.footer-callback input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-on-dark-line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-on-dark);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}

.footer-callback input::placeholder {
  color: var(--color-on-dark-faint);
}

.footer-callback input:focus {
  outline: none;
  border-color: var(--color-lime);
  background: rgba(255, 255, 255, 0.08);
}

.footer-callback button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-lime);
  color: var(--green-950);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  transition: background var(--dur-fast) var(--ease-standard);
}

.footer-callback button:hover {
  background: #c3e02a;
}

.footer-callback button svg {
  width: 1rem;
  height: 1rem;
}

.footer-callback-note {
  font-size: var(--text-xs);
  color: var(--color-on-dark-faint);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 64rem) {

  /* ≤1024px */
  .nav-menu {
    display: none;
  }

  .nav-toggle {
    display: grid;
  }

  .site-header.is-scrolled .nav-shell {
    max-width: calc(100% - 1.5rem);
  }

  .trust-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-us-top {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .why-us-ruler {
    display: none;
  }

  .why-us-heading h2 {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-on-dark-line);
  }

  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-top {
    align-items: flex-start;
  }

  .gallery-bento {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 10rem;
  }

  .credential-grid,
  .area-grid,
  .project-mini-grid {
    grid-template-columns: 1fr 1fr;
  }

  .district-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {

  /* ≤768px */
  /* Asymmetric + pinned only makes sense with real width to play
     with — stacked and static reads much cleaner here: image first
     (full width, natural height), copy below, no sticky. */

  .cta-unique {
    margin-top: 12rem;
  }

  .about-grid,
  .projects-layout {
    grid-template-columns: 1fr;
  }

  .about-media,
  .projects-showcase {
    position: static;
    top: auto;
  }

  .explore-feature,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .faq-heading {
    position: static;
    top: auto;
  }

  .reason-slide {
    grid-template-columns: 1fr;
  }

  .reason-slide+.reason-slide {
    margin-top: var(--space-8);
  }

  /* Keep it medium and floated to one edge even stacked — not a
     full-bleed banner, and not centered like a generic hero image. */
  .about-img,
  .projects-carousel {
    max-width: 19rem;
  }

  .projects-carousel {
    margin-left: auto;
  }

  /* The staggered top-offset only makes sense next to the image;
     stacked, it's just a gap — use the normal section rhythm instead. */
  .about-copy,
  .projects-copy {
    margin-top: var(--space-7);
  }

  /* Simpler motion on mobile too: skip the sideways curtain + tilt
     (little room for it at this width, and less to animate is kinder
     to weaker devices) in favor of a plain fade-up. The bottom dissolve
     mask (::before) stays — it's static, not a motion cost. */
  .anim.img-reveal-side {
    opacity: 0;
    transform: translateY(var(--anim-distance));
    transition: opacity var(--dur-reveal-slow) var(--ease-smooth),
      transform var(--dur-reveal-slow) var(--ease-smooth);
  }

  .anim.img-reveal-side::after {
    display: none;
  }

  .anim.img-reveal-side img {
    transform: none;
    transition: none;
  }

  .anim.img-reveal-side.is-in {
    opacity: 1;
    transform: none;
  }

  .page-hero-stats {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .district-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .district-card {
    aspect-ratio: 4 / 3.2;
  }

  .district-card-body {
    padding: var(--space-5);
  }

  .district-card-body h3 {
    font-size: var(--text-xl);
  }

  .about-media {
    margin-inline: 0 var(--space-6);
  }

  .about-media .about-card {
    right: calc(var(--space-4) * -1);
  }

  .projects-floating-badge {
    right: var(--space-4);
    bottom: var(--space-3);
    max-width: 9rem;
    padding: var(--space-3) var(--space-4);
  }

  .projects-floating-badge strong {
    font-size: var(--text-xl);
  }

  .project-grid,
  .why-grid,
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .stats-band {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-cell {
    padding: var(--space-5) var(--space-3);
  }

  .hero-stats {
    gap: var(--space-6);
  }

  .gallery-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 9rem;
  }

  .gallery-tile.g2,
  .gallery-tile.g8 {
    grid-column: span 2;
  }

  .gallery-tile.g1,
  .gallery-tile.g4 {
    grid-row: span 2;
  }

  .gallery-tile figcaption {
    opacity: 1;
    transform: none;
  }

  .gallery-tile::before {
    opacity: 0.65;
  }

  .credential-grid,
  .area-grid,
  .glossary-grid,
  .project-detail-list,
  .project-mini-grid,
  .about-checklist.cols-2 {
    grid-template-columns: 1fr;
  }

  .footer-top {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-callback {
    width: 100%;
  }

  .back-to-top {
    right: var(--space-4);
    bottom: var(--space-4);
  }
}

@media (max-width: 30rem) {

  .cta-unique {
    margin-top: 5rem;
  }

  /* ≤480px */
  .nav {
    gap: var(--space-3);
  }

  .nav-cta {
    display: none;
  }

  .nav-brand img {
    height: 2rem;
  }

  .trust-bar {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .stats-band {
    grid-template-columns: 1fr 1fr;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .form-row-split {
    grid-template-columns: 1fr;
  }

  .gallery-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 7.5rem;
  }

  .footer-wordmark {
    display: none;
  }
}