/* =============================================================================
   THEME: "Tribhuja Cinematic" — bespoke stylesheet for Zuari Gangothri Tribhuja
   Site:  sites/zuari-gangothri-tribhuja  (zuarigangothritribhuja.in)

   Palette source: builders/gangothri-group/gangothri-group.json -> branding.colors
   The nine canonical brand tokens below are copied verbatim from that file and
   are the ONLY colours in this sheet. There are no decorative alias tokens and
   no colour literals outside the token block: every tint, shade and scrim is a
   color-mix() over two of the nine. The single sanctioned exception is the pair
   of form-validation state colours, declared alongside them.

   Idiom: full-bleed and warm. A tall cinematic hero under a two-layer gradient,
   a classical high-contrast display face (Playfair Display) set against a
   neutral sans (Inter), a warm blush off-white as the page ground, and a 3px
   brand strip as the mark that recurs at every structural seam — the nav's top
   edge, under every section heading, above the closing band, above the footer,
   under every table head, and down the flank of an open FAQ row.

   Because the palette is fixed, the identity is carried by typography, rhythm,
   geometry and ornament: a near-square 2px radius, a 44rem measure inside a
   1180px shell, serif H2 against micro-caps sans H3, and a three-ground band
   alternation (blush / white / blush-accent) rather than a two-ground one.

   Contrast: every pairing used below was computed, not assumed. The ratios are
   noted inline wherever a decision is not self-evident, and every dark band is
   walked explicitly — body, links, strong, em, captions, table rules and the
   updated line all get their dark-band ink.
   ========================================================================== */

/* ============================ 1. FONTS =====================================
   Self-hosted, both genuine variable fonts (fvar confirmed in both files), so
   one face per family covers the whole weight range instead of shipping the
   same file under several names. font-display: optional per fleet policy — a
   cold first paint uses the fallback stack and never reflows.               */

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../assets/fonts/playfair-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: optional;
}

/* ============================ 2. TOKENS ==================================== */

:root {
  --brand-primary: #E90404;
  --brand-secondary: #9E0303;
  --brand-tertiary: #FEF0F0;
  --dark-primary: #171717;
  --dark-secondary: #4a4a4a;
  --dark-tertiary: #d8d8d8;
  --light-primary: #f8f8f8;
  --light-secondary: #ffffff;
  --light-tertiary: #eeeeee;
  --state-success: #1A6B35;
  --state-error: #7A1F2B;
  --max-w: 1180px;
  --measure: 44rem;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-pad: clamp(3.25rem, 6.5vw, 6rem);
  --nav-h: 4.5rem;
  --r-sharp: 2px;
  --r-card: 3px;
  --strip: 3px;
  --t-fast: 150ms ease;
  --t-med: 260ms ease;
  --font-display: 'Playfair Display', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;


  /* Aliases for the generated related-projects block, which reads
     --font-body / --font-headline / --font-display. Without these it
     falls back to Georgia and breaks the page's type. */
  --font-headline: var(--font-display);
}

/* Notes on the nine, because two of the names are misleading:
   - brand-primary is a vivid red. Measured on the light grounds it is 4.68:1 on
     light-secondary but only 4.41:1 on light-primary and 4.22:1 on
     brand-tertiary. It is therefore a FILL and RULE colour only; it is never
     used as text on a light ground anywhere in this sheet.
   - brand-secondary is the red INK for light grounds (8.5:1 on light-secondary,
     7.7:1 on brand-tertiary).
   - dark-tertiary is a near-white grey despite its name. It is muted ink for
     DARK bands (12.6:1 on dark-primary) and a hairline on light grounds. It is
     never used as text on a light ground.
   - brand-tertiary is the warm blush that serves as the page ground, and as the
     link/accent ink inside dark bands (16.2:1 on dark-primary).
   - state-error is a desaturated maroon, deliberately moved off the brand hue:
     it is far darker and far duller than brand-primary so a validation error
     does not read as brand chrome. It is also reinforced non-chromatically,
     with a warning glyph and a heavier weight, so hue is never the only signal.
     10.2:1 on light-secondary. */

/* ============================ 3. RESET ===================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.72;
  color: var(--dark-primary);
  background: var(--brand-tertiary); /* the warm off-white ground */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* The page body must never scroll sideways; wide children scroll themselves. */
  overflow-x: hidden;
}

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

img { height: auto; }

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

button { cursor: pointer; }

/* One focus ring for every ground in the sheet. brand-primary measures 4.68:1
   on light-secondary, 4.41:1 on light-primary, 4.22:1 on brand-tertiary and
   3.83:1 on dark-primary — all comfortably over the 3:1 floor for a non-text
   indicator, so a single declaration is visible on light AND dark bands.
   Elements FILLED with brand-primary get the double ring further down, because
   a red ring on a red button would be invisible. */
:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Anchors sit under a fixed nav on every page. */
#main-content,
#hero,
#faq,
#faq-heading,
#contact,
#contact-form,
#footer,
#section-overview,
#section-location,
#section-master-plan,
#section-floor-plans,
#section-plot-options,
#section-gallery,
#section-amenities,
#section-pricing,
#section-reviews,
#section-builder,
#section-cta { scroll-margin-top: calc(var(--nav-h) + 1rem); }

#main-content { display: block; }

/* ============================ 4. TYPE ====================================== */

h1, h2, h3, h4, h5, h6 { margin: 0 0 0.6em; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--dark-primary);
}

h1 {
  font-size: clamp(1.95rem, 4.4vw, 3.35rem);
  font-weight: 700;
  line-height: 1.06;
}

h2 { font-size: clamp(1.6rem, 3.2vw, 2.45rem); }

/* H3 is the counterpoint to the serif H2: neutral sans, micro-caps, tracked
   out, in the red ink that is safe on light grounds (7.7:1 on brand-tertiary,
   8.5:1 on light-secondary). It carries the brand strip above it, which is the
   sheet's recurring mark. */
h3 {
  margin: 2.4rem 0 0.7rem;
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--brand-secondary);
}

h4 {
  margin: 1.6rem 0 0.5rem;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--dark-primary);
}

p { margin: 0 0 1.15rem; }

ul, ol { margin: 0 0 1.35rem; padding-left: 1.25rem; }

li { margin-bottom: 0.45rem; }

/* Marker colour is decorative, so brand-primary is allowed here. */
ul li::marker { color: var(--brand-primary); }
ol li::marker { color: var(--brand-secondary); font-weight: 700; }

/* strong NEVER carries its own colour. A global dark ink on strong is the most
   repeated bug in this fleet: it turns bold words invisible inside every dark
   band (hero, page hero, closing CTA, contact, footer, FAQ answers). Emphasis
   here is carried entirely by weight, so it inverts correctly for free. */
strong, b {
  font-weight: 680;
  color: inherit;
}

em, i {
  font-style: italic;
  color: inherit;
}

/* Inline code appears in prose on the builder and contact pages. Guarded so a
   token string cannot blow out the measure or inherit a band's display face. */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 0.1em 0.38em;
  border-radius: var(--r-sharp);
  background: color-mix(in srgb, var(--brand-primary) 7%, var(--light-tertiary));
  color: var(--dark-primary);
  overflow-wrap: anywhere;
}

/* hr is the recurring brand strip in its plainest form. */
hr {
  width: 4rem;
  height: var(--strip);
  margin: 2.5rem 0;
  border: 0;
  background: var(--brand-primary);
}

a {
  color: var(--brand-secondary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}

/* brand-primary is not a safe ink on any light ground here, so hover deepens
   toward dark-primary (17.9:1) and thickens the rule instead of brightening. */
a:hover { color: var(--dark-primary); text-decoration-thickness: 2px; }

/* Dark-band fallback for any link a component rule does not already claim — a
   stray anchor in .hero-sub, .footer-tagline or a disclaimer would otherwise
   inherit the light-ground red ink (brand-secondary on dark-primary is 1.5:1,
   and the hover would be 1.06:1). :where() keeps this at zero specificity for
   the scope, so every component rule below still wins on its own elements.
   brand-tertiary is 16.2:1 on dark-primary; the hover lifts to 17.9:1. */
:where(#hero, .page-hero, .closing-cta, #contact, #footer, #mobile-menu) a:not(.btn) {
  color: var(--brand-tertiary);
}
:where(#hero, .page-hero, .closing-cta, #contact, #footer, #mobile-menu) a:not(.btn):hover {
  color: var(--light-secondary);
  text-decoration-thickness: 2px;
}

p, li, td, th, figcaption, address { overflow-wrap: break-word; }

/* ============================ 5. LAYOUT =================================== */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 0.8rem 1.3rem;
  background: var(--brand-secondary);
  color: var(--light-secondary); /* 8.5:1 */
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 0 0 var(--r-sharp) 0;
}
/* The ink has to be re-stated here. A bare `.skip-link` is (0,1,0) and the
   global `a:hover` is (0,1,1), so hovering the revealed skip link handed it
   dark-primary on brand-secondary — 2.11:1 on the one control a keyboard user
   hits first. Restated at (0,2,0), it stays light-secondary at 8.5:1. */
.skip-link:hover,
.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  color: var(--light-secondary);
  outline: 3px solid var(--light-secondary);
  outline-offset: -6px;
}

/* The dateline. Base is for light grounds (dark-secondary = 8.9:1 on
   light-secondary, 8.0:1 on brand-tertiary); the dark-band override is below. */
.page-updated {
  margin: 0 0 1.1rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dark-secondary);
}
.page-updated time { font-weight: 700; color: inherit; }

/* ============================ 6. NAV ======================================
   The nav is fixed and sits over the hero on eleven of twelve pages. It cannot
   be transparent, because on any page whose first band is light the links would
   vanish. Instead it carries its own top-down scrim, which is dark enough that
   the link ink clears AA over ANY ground beneath it. The governing figure is
   the WEAKEST stop over a pure-white page, which composites to luminance
   0.0686: dark-tertiary links measure 6.21:1 and light-secondary 8.86:1 on it.
   Over the hero image the same inks are better than 12:1.                   */

#nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--nav-h);
  padding: 0.7rem var(--gutter);
  border-top: var(--strip) solid var(--brand-primary); /* the mark, top edge */
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--dark-primary) 96%, transparent) 0%,
      color-mix(in srgb, var(--dark-primary) 88%, transparent) 55%,
      color-mix(in srgb, var(--dark-primary) 78%, transparent) 100%
    );
  transition: background var(--t-med), box-shadow var(--t-med), min-height var(--t-med);
}

/* Once scrolled the bar goes fully opaque; every ratio below becomes the clean
   on-dark-primary figure. */
#nav.scrolled {
  min-height: 4rem;
  background: var(--dark-primary);
  box-shadow: 0 1px 26px color-mix(in srgb, var(--dark-primary) 45%, transparent);
}

.nav-logo,
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  min-width: 0;
  text-decoration: none;
  color: var(--light-secondary);
}
.nav-logo:hover,
.footer-logo:hover { color: var(--light-secondary); }

.brand-logo-img {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  border-radius: var(--r-sharp);
}

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
  color: inherit;
}

.brand-developer {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--dark-tertiary); /* 12.6:1 on the scrim / on dark-primary */
}
/* The two lockup spans are block-level, and at least one engine concatenates
   adjacent block boxes with NO separator when it computes the link's
   accessible name ("Gangothri GroupZuari Gangothri Tribhuja"). This injects a
   guaranteed word break; it is a trailing space on its own line, so it is
   visually inert. */
.brand-developer::after { content: " "; }

.brand-project {
  display: block;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--light-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-links {
  display: none; /* collapsed to the hamburger below 1024 */
  align-items: center;
  gap: 1.05rem;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.nav-links li { margin: 0; }
.nav-links a {
  display: inline-block;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--dark-tertiary);
  transition: color var(--t-fast), border-color var(--t-fast);
}
/* Hover raises contrast rather than lowering it, and adds a non-chromatic
   underline so the state is not signalled by colour alone. */
.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--light-secondary);
  border-bottom-color: var(--light-secondary);
}

.nav-cta {
  display: none;
  padding: 0.58rem 1.35rem;
  border-radius: var(--r-sharp);
  background: var(--brand-primary);
  color: var(--light-secondary); /* 4.68:1 on brand-primary */
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--t-fast);
}
.nav-cta:hover {
  background: var(--brand-secondary);
  color: var(--light-secondary); /* 8.5:1 — contrast rises on hover */
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--light-secondary) 28%, transparent);
  border-radius: var(--r-sharp);
  background: transparent;
  z-index: 1100;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--light-secondary);
  transition: transform var(--t-fast), opacity var(--t-fast);
}
/* The two id hooks the shared script binds to. Sized here rather than left to
   the class alone, so both stay a 44px touch target whatever the class does. */
#hamburger,
#mobile-menu-close { min-width: 2.75rem; min-height: 2.75rem; }

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile menu overlay (opaque dark band: every ink below is inverted) --- */
#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 5rem 1.25rem 2.5rem;
  background: var(--dark-primary);
  color: var(--light-tertiary);
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity var(--t-med);
}
#mobile-menu.open { opacity: 1; pointer-events: auto; }

#mobile-menu a {
  padding: 0.65rem 0.5rem;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--light-tertiary); /* 15.5:1 on dark-primary */
  transition: color var(--t-fast);
}
#mobile-menu a:hover,
#mobile-menu a:focus-visible {
  color: var(--brand-tertiary); /* 16.2:1 */
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.menu-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--light-secondary) 26%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--light-secondary);
  font-size: 1.6rem;
  line-height: 1;
}
/* The tinted hover ground composites to luminance 0.0329 — light-secondary
   stays at 12.7:1 on it. */
.menu-close:hover {
  background: color-mix(in srgb, var(--light-secondary) 12%, transparent);
  border-color: var(--light-secondary);
}

/* Scoped to #mobile-menu ON PURPOSE. `#mobile-menu a` above is (1,0,1) and beats
   a bare `.menu-cta` at (0,1,0), so the menu's light-tertiary ink won and put
   4.04:1 on the red fill — a failing button that renders perfectly well and
   that no audit catches unless it measures the fill. Matching the id here puts
   this rule at (1,1,0) so the component keeps its own ink: 4.68:1 at rest,
   rising to 8.5:1 on hover. */
#mobile-menu .menu-cta {
  margin-top: 1.4rem;
  padding: 0.85rem 2.2rem;
  border-radius: var(--r-sharp);
  background: var(--brand-primary);
  color: var(--light-secondary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
/* (1,2,0) — must also outrank `#mobile-menu a:hover` at (1,1,1), which would
   otherwise paint brand-tertiary on brand-primary at 4.22:1. */
#mobile-menu .menu-cta:hover,
#mobile-menu .menu-cta:focus-visible {
  background: var(--brand-secondary);
  color: var(--light-secondary); /* 8.5:1 */
  text-decoration: none;
}

/* ============================ 7. HERO =====================================
   Full-bleed image under a two-layer gradient. The stacking order is explicit
   because a clone of this pattern once shipped with the scrim painting UNDER
   the image: .hero-bg is z 0, .hero-overlay is z 1, .hero-content is z 2.

   Scrim strength was chosen from the worst case, not from the render: assume a
   pure-white pixel under the WEAKEST part of the overlay (70% dark-primary at
   the very bottom of the stops). That composites to luminance 0.1084, which
   gives light-secondary 6.63:1, light-tertiary 5.71:1 and dark-tertiary 4.65:1.
   The real aerial render is mid-tone, so the shipped figures are far better.  */

#hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 640px;
  min-height: min(94svh, 880px);
  padding: calc(var(--nav-h) + 3rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
  border-bottom: var(--strip) solid var(--brand-primary); /* the mark */
  background: var(--dark-primary); /* ground if the image has not painted */
  color: var(--light-secondary);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg picture,
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* layer 1 — the depth gradient. The WEAKEST stop is the governing number,
       not the one where the copy happens to sit today: the hero grows with its
       own text, so on a narrow screen the copy rides further up and a scrim
       that only held where the text sits at 1280px would fail at 360px. Every
       stop is therefore strong enough on its own. Worst case is the 72% stop
       over a pure-white pixel, which composites to luminance 0.0975:
       light-secondary 7.12:1, light-tertiary 6.48:1, dark-tertiary 5.34:1.
       The real aerial render is mid-tone, so the shipped figures are better. */
    linear-gradient(
      to top,
      color-mix(in srgb, var(--dark-primary) 95%, transparent) 0%,
      color-mix(in srgb, var(--dark-primary) 85%, transparent) 70%,
      color-mix(in srgb, var(--dark-primary) 78%, transparent) 90%,
      color-mix(in srgb, var(--dark-primary) 72%, transparent) 100%
    ),
    /* layer 2 — the warm brand wash raking in from the left. Kept light enough
       that it tints the render rather than replacing it; it only ever darkens
       layer 1, so it cannot weaken the ratios above. */
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--brand-secondary) 34%, transparent) 0%,
      color-mix(in srgb, var(--brand-secondary) 8%, transparent) 45%,
      transparent 70%
    );
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
}

.hero-badge {
  display: inline-block;
  margin-bottom: 1.3rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--r-sharp);
  background: var(--brand-primary); /* opaque, so the ratio is knowable */
  color: var(--light-secondary);    /* 4.68:1 */
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero-title {
  max-width: 20ch;
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--light-secondary);
  text-wrap: balance;
}

#hero .page-updated { color: var(--dark-tertiary); } /* 4.65:1 worst case */

.hero-sub {
  max-width: 52rem;
  margin: 0 0 1.9rem;
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  line-height: 1.78;
  color: var(--light-secondary); /* 6.63:1 worst case */
}
.hero-sub strong { font-weight: 680; color: inherit; }
.hero-sub em { color: inherit; }

.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 2.2rem;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Each chip lays a second opaque-ish pane over the scrim, so the ink inside is
   at 14:1 even over the worst-case white pixel. */
.hero-stat {
  padding: 0.55rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--light-secondary) 26%, transparent);
  border-left: var(--strip) solid var(--brand-primary);
  background: color-mix(in srgb, var(--dark-primary) 72%, transparent);
  color: var(--light-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================ 8. PAGE HERO (subpages) =====================
   An opaque dark band, so every ratio here is the clean on-dark-primary one.  */

.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(2.2rem, 5vw, 3.5rem)) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  border-bottom: var(--strip) solid var(--brand-primary);
  background: var(--dark-primary);
  color: var(--light-tertiary); /* 15.5:1 */
}
/* A single soft brand rake, echoing the hero's second layer. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    112deg,
    color-mix(in srgb, var(--brand-secondary) 34%, transparent) 0%,
    transparent 56%
  );
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.8rem, 4vw, 2.75rem);
  max-width: var(--max-w);
  margin-inline: auto;
}

.page-hero h1 {
  margin-bottom: 0.7rem;
  color: var(--light-secondary); /* 17.9:1 */
  text-wrap: balance;
}

.page-hero .page-updated { color: var(--dark-tertiary); } /* 12.6:1 */

.lead {
  max-width: var(--measure);
  margin: 0 0 1.6rem;
  font-size: clamp(0.98rem, 1.4vw, 1.1rem);
  line-height: 1.8;
  color: var(--light-tertiary); /* 15.5:1 */
}
.lead strong { color: inherit; }
.lead em { color: inherit; }
.lead a {
  color: var(--brand-tertiary); /* 16.2:1 — the red ink inverted for dark */
  text-decoration-thickness: 1px;
}
.lead a:hover { color: var(--light-secondary); text-decoration-thickness: 2px; }

.page-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.page-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 2rem 0 0;
  padding: 1.3rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--light-secondary) 18%, transparent);
}

.page-hero-stat { min-width: 0; }

/* Large display text on a dark band. brand-primary would be only 3.83:1 here,
   which clears the large-text floor but not by enough to be safe once the font
   shrinks on a narrow screen, so the number takes brand-tertiary at 16.2:1 and
   the red lives in the rule beneath instead. */
.page-hero-stat .num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.12;
  color: var(--brand-tertiary);
}
.page-hero-stat .lbl {
  display: block;
  margin-top: 0.35rem;
  padding-top: 0.4rem;
  border-top: var(--strip) solid var(--brand-primary);
  width: 1.8rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-tertiary); /* 12.6:1 */
  width: auto;
}

.page-hero-image {
  overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid color-mix(in srgb, var(--light-secondary) 16%, transparent);
  box-shadow: 0 26px 60px color-mix(in srgb, var(--dark-primary) 62%, transparent);
}
.page-hero-image img { width: 100%; }

/* ============================ 9. BUTTONS ================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.7rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--r-sharp);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

/* The primary CTA. Named .btn-gold by the generator; here it is the brand red.
   light-secondary on brand-primary = 4.68:1; hover deepens to brand-secondary
   at 8.5:1, so contrast RISES on hover rather than falling. */
.btn-gold {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--light-secondary);
}
.btn-gold:hover,
.btn-gold:focus-visible {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--light-secondary);
}

/* Ghost button for DARK grounds (hero and page hero). 17.9:1 as text, and the
   hover inversion is 17.9:1 the other way — neither state is invisible. */
.btn-outline {
  background: transparent;
  border-color: var(--light-secondary);
  color: var(--light-secondary);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--light-secondary);
  color: var(--dark-primary);
  border-color: var(--light-secondary);
}

/* Ghost button for LIGHT grounds (the in-prose CTA rows). brand-secondary is
   8.0:1 on brand-tertiary and 8.5:1 on light-secondary; the hover fill puts
   light-secondary on brand-secondary, which is the same 8.5:1. */
.btn-outline-dark {
  background: transparent;
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}
.btn-outline-dark:hover,
.btn-outline-dark:focus-visible {
  background: var(--brand-secondary);
  color: var(--light-secondary);
  border-color: var(--brand-secondary);
}

/* Any control FILLED with brand-primary needs a ring that is not brand-primary.
   A white ring is visible on the dark bands; the dark halo just outside it is
   visible on the light bands. One of the two always reads, on every ground. */
.btn-gold:focus-visible,
.nav-cta:focus-visible,
#mobile-menu .menu-cta:focus-visible,
.form-submit:focus-visible {
  outline: 3px solid var(--light-secondary);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--dark-primary) 88%, transparent);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin: 2.25rem 0 0;
}

/* ============================ 10. SECTIONS / PROSE ========================
   Three grounds in rotation rather than two: blush (bg-light), white
   (bg-white), and the blush-accent FAQ band. dark-primary body ink measures
   16.2:1 on blush and 17.9:1 on white.                                       */

.prose-section { padding: var(--section-pad) var(--gutter); }
.prose-section.bg-light { background: var(--brand-tertiary); }
.prose-section.bg-white { background: var(--light-secondary); }

.prose-inner {
  max-width: var(--measure);
  margin-inline: auto;
}
.prose-inner.wide { max-width: var(--max-w); }

/* Inside the wide shell the running text still keeps a readable measure, while
   tables, figures, galleries and CTA rows use the full width. */
.prose-inner.wide > p,
.prose-inner.wide > ul,
.prose-inner.wide > ol,
.prose-inner.wide > h3,
.prose-inner.wide > h4 { max-width: var(--measure); }

/* The section mark: every H2 in a prose band sits over a 3px brand strip. */
.prose-inner > h2 {
  position: relative;
  margin: 0 0 1.35rem;
  padding-top: 1.15rem;
  text-wrap: balance;
}
.prose-inner > h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5rem;
  height: var(--strip);
  background: var(--brand-primary);
}
.prose-inner > h2:not(:first-child) { margin-top: 3rem; }

.prose-inner p {
  font-size: 1rem;
  line-height: 1.82;
  color: var(--dark-primary);
}
.prose-inner li {
  font-size: 0.98rem;
  line-height: 1.78;
  color: var(--dark-primary);
}
.prose-inner a {
  color: var(--brand-secondary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.prose-inner a:hover { color: var(--dark-primary); text-decoration-thickness: 2px; }

/* `.prose-inner a` is 0-2-0 and outranks `.btn-gold` at 0-1-0, which once
   repainted an in-prose CTA red-on-red at 1.76:1. Re-assert each button's own
   ink at matching or higher specificity. */
.prose-inner a.btn {
  font-weight: 700;
  text-decoration: none;
}
.prose-inner a.btn-gold { color: var(--light-secondary); }
.prose-inner a.btn-gold:hover { color: var(--light-secondary); }
.prose-inner a.btn-outline-dark { color: var(--brand-secondary); }
.prose-inner a.btn-outline-dark:hover { color: var(--light-secondary); }
/* Defensive: .btn-outline is a dark-band component. If the generator ever emits
   one inside a light prose band, light-on-light would be invisible, so it is
   re-skinned to the light-ground ghost rather than left to fail. */
.prose-inner a.btn-outline {
  color: var(--brand-secondary);
  border-color: var(--brand-secondary);
}
.prose-inner a.btn-outline:hover {
  background: var(--brand-secondary);
  color: var(--light-secondary);
}

/* Section eyebrow + title + rule, used by the FAQ header and the contact
   panel. Base values are the light-ground ones; #contact overrides them. */
.section-label {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-secondary); /* 7.7:1 on the blush FAQ band */
}

.section-title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.45rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--dark-primary);
  text-wrap: balance;
}

/* Named .gold-divider by the generator; here it is the brand strip again. */
.gold-divider {
  width: 3.5rem;
  height: var(--strip);
  margin: 0 0 1.6rem;
  background: var(--brand-primary);
}

/* ============================ 11. TABLES ==================================
   Wide statistical tables scroll inside their own box; the page never does.   */

.table-wrap {
  max-width: 100%;
  margin: 1.6rem 0 2.1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-bottom: 1px solid color-mix(in srgb, var(--dark-primary) 12%, transparent);
}

.data-table {
  width: 100%;
  min-width: 30rem; /* forces the wrapper to scroll instead of crushing cells */
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.6;
}

.data-table thead {
  /* the mark again, under every table head */
  border-bottom: var(--strip) solid var(--brand-primary);
}

.data-table th {
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: bottom;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-secondary); /* 8.5:1 on white, 8.0:1 on blush */
}

.data-table td {
  padding: 0.72rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid color-mix(in srgb, var(--dark-primary) 10%, transparent);
  color: var(--dark-primary);
}

/* Zebra tint is a 4% brand wash over the band ground; dark-primary on it still
   measures better than 16:1. */
.data-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--brand-primary) 4%, transparent);
}

.data-table td strong { color: inherit; }

/* ============================ 12. FIGURES =================================
   Both figure types carry an inline max-width of 720px, matching the intrinsic
   width of the source images; the cap is re-asserted here so a plan is never
   upscaled into a 1100px column and never goes soft.                         */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  margin: 2rem 0 1rem;
}

.plan-figure,
.content-figure {
  max-width: 720px;
  margin: 0 auto 1.5rem;
  padding: 0;
}

.plan-figure img,
.content-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
  border: 1px solid color-mix(in srgb, var(--dark-primary) 12%, transparent);
  background: var(--light-secondary);
}

.plan-figure figcaption,
.content-figure figcaption {
  margin-top: 0.7rem;
  padding-left: 0.75rem;
  border-left: var(--strip) solid var(--brand-primary);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--dark-secondary); /* 8.9:1 on white, 8.0:1 on blush */
}

.content-figure { margin-block: 2rem; }

/* ============================ 13. GALLERY ================================= */

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 2rem auto 1rem;
  padding-inline: 0;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--dark-primary);
  cursor: zoom-in;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-med);
}
.gallery-item:hover img,
.gallery-item:focus-visible img { transform: scale(1.045); }

.gallery-item-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--dark-primary) 58%, transparent);
  opacity: 0;
  transition: opacity var(--t-med);
}
.gallery-item:hover .gallery-item-overlay,
.gallery-item:focus-visible .gallery-item-overlay { opacity: 1; }

.gallery-zoom-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 2px solid var(--light-secondary);
  border-radius: 999px;
  color: var(--light-secondary);
}
/* The inline SVG carries no presentation attributes, so the stroke has to come
   from CSS or the icon renders as a black blob. */
.gallery-zoom-icon svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* --- JS-built lightbox (created by js/script.js, no markup on the page) --- */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 3.5rem);
  background: color-mix(in srgb, var(--dark-primary) 94%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med);
}
#lightbox.open { opacity: 1; pointer-events: auto; }

.lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--r-card);
  object-fit: contain;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid color-mix(in srgb, var(--light-secondary) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--dark-primary) 70%, transparent);
  color: var(--light-secondary);
  font-size: 1.6rem;
  line-height: 1;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: var(--brand-primary);
  color: var(--light-secondary); /* 4.68:1 on the opaque red fill */
  border-color: var(--brand-primary);
}
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev { left: 0.75rem; }
.lightbox-next { right: 0.75rem; }

.lightbox-caption {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  width: min(56rem, calc(100% - 7rem));
  font-size: 0.85rem;
  line-height: 1.6;
  text-align: center;
  color: var(--light-tertiary); /* on a 94% dark scrim — better than 15:1 */
}

/* ============================ 14. FAQ =====================================
   The third ground in the rotation: an accented blush band with the cards
   lifted onto white.                                                         */

#faq {
  padding: var(--section-pad) var(--gutter);
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--brand-primary) 6%, var(--brand-tertiary)),
      var(--brand-tertiary)
    );
  border-top: 1px solid color-mix(in srgb, var(--brand-secondary) 16%, transparent);
}

.faq-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

.faq-header { margin-bottom: 2.25rem; }

.faq-list {
  display: grid;
  gap: 0.6rem;
}

.faq-item {
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 14%, var(--light-tertiary));
  border-left: var(--strip) solid transparent;
  border-radius: var(--r-sharp);
  background: var(--light-secondary);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.faq-item:hover { box-shadow: 0 6px 22px color-mix(in srgb, var(--dark-primary) 10%, transparent); }
/* The mark once more: an open row grows a brand strip down its flank. */
.faq-item.open {
  border-left-color: var(--brand-primary);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--dark-primary) 12%, transparent);
}

.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.05rem 1.15rem;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.5;
  color: var(--dark-primary); /* 17.9:1 on the white card */
  transition: color var(--t-fast);
}
.faq-q:hover { color: var(--brand-secondary); } /* 8.5:1 — still well over AA */
.faq-item.open .faq-q { color: var(--brand-secondary); }

.faq-q svg {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t-med);
}
.faq-item.open .faq-q svg { transform: rotate(180deg); }

/* display toggling rather than a max-height transition: several answers carry
   a full data table, and a height cap would clip them. */
.faq-a {
  display: none;
  padding: 0 1.15rem 1.15rem;
  border-top: 1px solid color-mix(in srgb, var(--dark-primary) 8%, transparent);
}
.faq-item.open .faq-a { display: block; animation: faq-open 220ms ease both; }
.faq-a p {
  margin: 1rem 0 0.9rem;
  font-size: 0.96rem;
  line-height: 1.8;
  color: var(--dark-primary);
}
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--brand-secondary); font-weight: 600; }
.faq-a a:hover { color: var(--dark-primary); }
.faq-a .table-wrap { margin-top: 1rem; }

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-0.35rem); }
  to   { opacity: 1; transform: none; }
}

/* ============================ 15. CLOSING CTA ============================= */

.closing-cta {
  padding: clamp(3rem, 6vw, 4.75rem) var(--gutter);
  border-top: var(--strip) solid var(--brand-primary); /* the mark */
  background: var(--dark-primary);
  color: var(--light-tertiary); /* 15.5:1 */
  text-align: center;
}

.closing-cta-inner {
  max-width: 46rem;
  margin-inline: auto;
}
.closing-cta-inner h2 {
  margin: 0 0 0.9rem;
  color: var(--light-secondary); /* 17.9:1 */
  text-wrap: balance;
}
.closing-cta-inner p {
  margin: 0 0 1.9rem;
  font-size: 1rem;
  line-height: 1.78;
  color: var(--light-tertiary);
}
.closing-cta-inner strong { color: inherit; }
.closing-cta-inner em { color: inherit; }
.closing-cta-inner a:not(.btn) { color: var(--brand-tertiary); } /* 16.2:1 */

/* ============================ 16. CONTACT ================================= */

#contact {
  padding: var(--section-pad) 0;
  background: var(--dark-primary);
  color: var(--light-tertiary); /* 15.5:1 */
  border-top: var(--strip) solid var(--brand-primary);
}

.contact-inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.contact-info { min-width: 0; }
/* Every ink in this panel is re-stated for the dark band. */
.contact-info .section-label { color: var(--brand-tertiary); } /* 16.2:1 */
.contact-info .section-title { color: var(--light-secondary); } /* 17.9:1 */
.contact-info p,
.contact-info li { color: var(--light-tertiary); }
.contact-info strong { color: inherit; }
.contact-info em { color: inherit; }
.contact-info a { color: var(--brand-tertiary); }
.contact-info a:hover { color: var(--light-secondary); }
.contact-info ul { padding-left: 1.15rem; }
.contact-info ul li::marker { color: var(--brand-primary); } /* 3.83:1, decorative */

.contact-detail {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid color-mix(in srgb, var(--light-secondary) 18%, transparent);
}

.contact-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.contact-detail-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid color-mix(in srgb, var(--light-secondary) 22%, transparent);
  border-radius: var(--r-sharp);
  color: var(--brand-tertiary); /* a red-family ink that survives the dark band */
}
.contact-detail-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-detail-text {
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--light-tertiary);
}
.contact-detail-text strong {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark-tertiary); /* 12.6:1 */
}
.contact-detail-text a { color: var(--brand-tertiary); }
.contact-detail-text a:hover { color: var(--light-secondary); }

/* --- The form card: a white surface inside the dark band ----------------- */

.form-card {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border-radius: var(--r-card);
  border-top: var(--strip) solid var(--brand-primary);
  background: var(--light-secondary);
  color: var(--dark-primary);
  box-shadow: 0 28px 60px color-mix(in srgb, var(--dark-primary) 55%, transparent);
}

#contact-form {
  display: grid;
  gap: 1.1rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0;
  min-width: 0;
}

.form-group label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dark-secondary); /* 8.9:1 on the white card */
}

#name,
#phone,
#email,
#message,
.form-group input,
.form-group textarea {
  width: 100%;
  min-width: 0;
  padding: 0.72rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--dark-primary) 26%, var(--light-tertiary));
  border-radius: var(--r-sharp);
  background: var(--light-primary);
  color: var(--dark-primary); /* 16.9:1 on light-primary */
  font-size: 0.95rem;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--dark-secondary); /* 8.3:1 on light-primary — a legible hint */
  opacity: 1;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--brand-secondary);
  background: var(--light-secondary);
}
#message,
.form-group textarea {
  min-height: 6.5rem;
  resize: vertical;
  line-height: 1.6;
}

/* Invalid state. Colour is only one of three signals: the border thickens, the
   field tints, and the message below leads with a warning glyph in bold. */
.form-group input.error,
.form-group textarea.error {
  border-color: var(--state-error);
  border-width: 2px;
  background: color-mix(in srgb, var(--state-error) 5%, var(--light-secondary));
}

#name-err,
#phone-err,
#email-err,
.field-error {
  display: none;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--state-error); /* 10.2:1 on the white card */
}
.field-error.show { display: block; }
.field-error::before {
  content: "\26A0\FE0E\00A0";
  font-weight: 700;
}

.form-submit {
  width: 100%;
  min-height: 3rem;
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: var(--r-sharp);
  background: var(--brand-primary);
  color: var(--light-secondary); /* 4.68:1 */
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: background var(--t-fast), color var(--t-fast);
}
.form-submit:hover:not(:disabled) {
  background: var(--brand-secondary);
  color: var(--light-secondary); /* 8.5:1 — contrast rises on hover */
}
/* The script disables the button until the required fields validate. Disabled
   controls are exempt from the contrast minimum, but this pairing still
   measures 6.2:1 so the label stays readable while it waits. */
.form-submit:disabled {
  background: var(--dark-tertiary);
  color: var(--dark-secondary);
  cursor: not-allowed;
}

#form-message,
.form-status {
  display: block;
  margin-top: 0.25rem;
  padding: 0.8rem 1rem;
  border-left: var(--strip) solid currentColor;
  border-radius: var(--r-sharp);
  font-size: 0.9rem;
  line-height: 1.5;
}
/* The element ships with the `hidden` attribute and the script clears it, so
   the display declaration above must not win while it is still hidden. */
.form-status[hidden] { display: none; }
.form-status.success {
  background: color-mix(in srgb, var(--state-success) 8%, var(--light-secondary));
  color: var(--state-success); /* 6.1:1 on that tint */
}
.form-status.error {
  background: color-mix(in srgb, var(--state-error) 8%, var(--light-secondary));
  color: var(--state-error); /* 8.9:1 on that tint */
}

/* ============================ 17. FOOTER ================================== */

#footer {
  padding: clamp(2.75rem, 5vw, 4rem) var(--gutter) 1.75rem;
  border-top: var(--strip) solid var(--brand-primary); /* the mark, last time */
  background: var(--dark-primary);
  color: var(--light-tertiary); /* 15.5:1 */
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  max-width: var(--max-w);
  margin-inline: auto;
}

.footer-brand { min-width: 0; }
.footer-logo { margin-bottom: 1rem; }

.footer-tagline {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--brand-tertiary); /* 16.2:1 */
}

.footer-about-text {
  margin: 0;
  max-width: 34rem;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--dark-tertiary); /* 12.6:1 */
}

.footer-col { min-width: 0; }

.footer-col-title {
  margin: 0 0 0.9rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--light-secondary) 18%, transparent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-tertiary); /* 16.2:1 */
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a {
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--light-tertiary); /* 15.5:1 */
  transition: color var(--t-fast);
}
.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--light-secondary); /* 17.9:1 — rises on hover */
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer-col address {
  font-style: normal;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--light-tertiary);
}

.footer-disclaimer {
  max-width: var(--max-w);
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--light-secondary) 16%, transparent);
}
/* The disclaimer is a <div> wrapping two <p>s. Nothing in this sheet sets a
   global colour on p, so the light ink inherits correctly, but the inherit is
   stated explicitly because a dark-band paragraph losing its ink to a global
   rule is a known failure in this fleet. */
.footer-disclaimer p {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  line-height: 1.65;
  color: inherit;
}
.footer-disclaimer p:last-child { margin-bottom: 0; }
.footer-disclaimer strong { color: inherit; }
.footer-disclaimer a { color: var(--brand-tertiary); }
.footer-disclaimer a:hover { color: var(--light-secondary); }

.footer-copy {
  max-width: var(--max-w);
  margin: 1.5rem auto 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--dark-tertiary); /* 12.6:1 */
}
.footer-copy a { color: var(--brand-tertiary); }

/* ============================ 18. CONTACT MODAL ===========================
   Injected by js/script.js (fleet rollout, tooling/add-contact-modal.mjs).
   Rebuilt here in the brand tokens: the donor copy of this block was written
   in slate hex literals and put dark ink on the brand fill at 3.83:1.        */

.cm-modal {
  /* Re-assert the UA's dialog centering, which a universal margin reset kills. */
  margin: auto;
  width: min(100%, 28rem);
  padding: 1rem;
  border: 0;
  background: transparent;
  overscroll-behavior: contain;
}
/* Browsers without <dialog> ignore [open] and would render the form inline. */
.cm-modal:not([open]) { display: none; }

.cm-modal::backdrop {
  background: color-mix(in srgb, var(--dark-primary) 72%, transparent);
}

.cm-modal__panel {
  position: relative;
  padding: 1.6rem;
  border-radius: var(--r-card);
  border-top: var(--strip) solid var(--brand-primary);
  background: var(--light-secondary);
  color: var(--dark-primary);
  font-family: var(--font-body);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--dark-primary) 50%, transparent);
}

.cm-modal__title {
  margin: 0 0 1.2rem;
  padding-right: 2.75rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--dark-primary);
}

.cm-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-sharp);
  background: transparent;
  color: var(--dark-secondary); /* 8.9:1 */
  font-size: 1.5rem;
  line-height: 1;
}
.cm-modal__close:hover {
  background: var(--light-tertiary);
  color: var(--dark-primary); /* 15.5:1 on that tint */
}

.cm-form { display: grid; gap: 0.9rem; }

.cm-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
}
.cm-form__field label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dark-secondary);
}

.cm-form input,
.cm-form textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--dark-primary) 26%, var(--light-tertiary));
  border-radius: var(--r-sharp);
  background: var(--light-primary);
  color: var(--dark-primary);
}
.cm-form input:focus,
.cm-form textarea:focus {
  border-color: var(--brand-secondary);
  background: var(--light-secondary);
}
.cm-form textarea { min-height: 5.5rem; resize: vertical; line-height: 1.6; }

.cm-form__submit {
  border: 0;
  border-radius: var(--r-sharp);
  background: var(--brand-primary);
  color: var(--light-secondary); /* 4.68:1 — the donor shipped 3.83:1 here */
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.8rem 1.5rem;
}
.cm-form__submit:hover {
  background: var(--brand-secondary);
  color: var(--light-secondary); /* 8.5:1 */
}
.cm-form__submit:focus-visible {
  outline: 3px solid var(--dark-primary);
  outline-offset: 2px;
}

.cm-form__status {
  margin-top: 0.25rem;
  padding: 0.7rem 0.9rem;
  border-left: var(--strip) solid currentColor;
  border-radius: var(--r-sharp);
  font-size: 0.88rem;
  line-height: 1.5;
}
.cm-form__status.success {
  background: color-mix(in srgb, var(--state-success) 8%, var(--light-secondary));
  color: var(--state-success);
}
.cm-form__status.error {
  background: color-mix(in srgb, var(--state-error) 8%, var(--light-secondary));
  color: var(--state-error);
}

.cm-form__hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--dark-secondary); /* 8.9:1 */
}
.cm-form__hint a { color: var(--brand-secondary); text-decoration: underline; }
.cm-form__hint a:hover { color: var(--dark-primary); }

/* Class-based, so it cannot fight an inline body.style.overflow. */
body.has-modal-open { overflow: hidden; }

/* ============================ 19. UTILITIES ===============================
   Hooks the shared script looks for. No page in this site emits them today,
   but the script is site-owned and a later page might, and an unstyled hook is
   worse than an unused rule.                                                 */

.reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 520ms ease, transform 520ms ease;
}
.reveal.visible { opacity: 1; transform: none; }

.highlight-num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--brand-secondary);
}

/* ============================ 20. MEDIA QUERIES =========================== */

@media (min-width: 520px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .hero-stat { font-size: 0.8rem; }
}

@media (min-width: 600px) {
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .page-hero-stats { gap: 1.25rem; }
}

@media (min-width: 768px) {
  body { font-size: 1.02rem; }
  .prose-inner p { font-size: 1.03rem; }
  .data-table { font-size: 0.94rem; }
  .plan-grid { gap: 2rem; }
  .faq-q { padding: 1.2rem 1.4rem; font-size: 1.05rem; }
  .faq-a { padding: 0 1.4rem 1.4rem; }
}

@media (min-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
  .footer-inner { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; }
  .contact-inner { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .page-hero-inner { grid-template-columns: 1.15fr 1fr; align-items: center; }
  .closing-cta-inner h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
}

/* Nav collapses to the hamburger below this width; above it the menu overlay is
   removed outright so a stale `.open` class can never trap a desktop viewer. */
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .hamburger { display: none; }
  #mobile-menu { display: none !important; }
  .hero-title { max-width: 22ch; }
  .prose-section { padding-inline: var(--gutter); }
}

@media (min-width: 1200px) {
  .nav-links { gap: 1.35rem; }
  .nav-links a { font-size: 0.83rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  #nav,
  #mobile-menu,
  .hamburger,
  .skip-link,
  .hero-btns,
  .page-hero-ctas,
  .cta-row,
  .closing-cta,
  #contact,
  #lightbox { display: none !important; }
  body { background: var(--light-secondary); color: var(--dark-primary); }
  #hero,
  .page-hero,
  #footer {
    background: var(--light-secondary);
    color: var(--dark-primary);
  }
  .hero-title,
  .page-hero h1,
  .lead,
  .hero-sub,
  .footer-col a,
  .footer-copy,
  .footer-about-text { color: var(--dark-primary); }
  .hero-overlay,
  .hero-bg { display: none; }
  .table-wrap { overflow: visible; }
  .faq-a { display: block; }
}