/* ==========================================================================
   First Family and Child Services — launch page
   Palette derived from the project pitch deck.
   ========================================================================== */

:root{
  /* ------------------------------------------------------------------
     Palette — chalkboard green drawn from the school building itself,
     with amber for the afternoon light through classroom glass.
     Every pairing below is contrast-checked against real backgrounds.
     ------------------------------------------------------------------ */
  --chalk:      #1E3A34;
  --chalk-deep: #142822;
  --room:       #2F5D52;
  --room-light: #3F7567;

  --amber:      #F2A65A;   /* CTAs and rules — pair with --ink, never white */
  --amber-soft: #F7C48F;
  --amber-text: #8A4E10;   /* amber as type, 6.18:1 on ivory */

  --brick:      #A8452F;   /* marks real photographs only */

  --ivory:      #FAF7F0;
  --ivory-alt:  #F3EEE3;
  --terrazzo:   #E4DCCB;

  --ink:        #1A211F;
  --muted:      #54605C;
  --muted-deep: #414B48;
  --line:       rgba(30,58,52,.15);

  --on-dark:      #EFEDE5;
  --on-dark-dim:  #C9DDD4;   /* 7.08:1 on the hero composite */
  --on-dark-mute: #9DB8AE;

  /* Glass — deliberately light so the photograph stays visible through it */
  --glass-panel: rgba(20,40,34,.18);
  --glass-line:  rgba(255,255,255,.26);
  --glass-blur:  saturate(150%) blur(16px);
  --nav-glass:   rgba(20,40,34,.86);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(3.25rem, 7vw, 5.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(20,40,34,.05), 0 2px 10px rgba(20,40,34,.045);
  --shadow-md: 0 8px 22px rgba(20,40,34,.09), 0 2px 8px rgba(20,40,34,.05);
  --shadow-lg: 0 22px 56px rgba(20,40,34,.15), 0 8px 20px rgba(20,40,34,.07);

  --banner-h: 48px;
  --header-h: 72px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* No scroll-behavior:smooth — Lenis owns the easing, and the two fight each
   other into a stutter. main.js falls back to native smooth scrolling for
   anchors when Lenis is absent. */
html{ -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
  margin:0;
  background:var(--ivory);
  font-optical-sizing:auto;
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{
  font-family:var(--serif); color:var(--chalk); margin:0 0 .5em;
  font-weight:600; line-height:1.1;
  /* Fraunces has a wonk axis; a touch of it gives the headings character
     without tipping into novelty. */
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 90;
}
h1{ font-size:clamp(2.1rem,1.4rem + 3.1vw,3.7rem); letter-spacing:-.026em; line-height:1.04; }
h2{ font-size:clamp(1.6rem,1.2rem + 1.8vw,2.5rem); letter-spacing:-.022em; line-height:1.08; }
h3{ font-size:clamp(1.06rem,1rem + .32vw,1.24rem); letter-spacing:-.012em; line-height:1.25; }
p{ margin:0 0 1.05em; }
a{ color:var(--room); }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:50%; top:-100px; transform:translateX(-50%);
  z-index:200; background:var(--chalk); color:#fff; padding:.7rem 1.2rem;
  border-radius:0 0 8px 8px; text-decoration:none; font-weight:600;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:0; }

:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; border-radius:6px; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:820px; }
.section{ padding-block:var(--sec-y); }
.section--terrazzo{ background:var(--terrazzo); }
.section--tint{ background:var(--ivory-alt); }
.section--chalk{ background:var(--chalk); color:#EFEDE5; }
.section--chalk h1,.section--chalk h2,.section--chalk h3{ color:#fff; }

.section__head{ max-width:760px; margin-bottom:clamp(2rem,4vw,3.25rem); }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__lede{ font-size:1.09em; color:var(--muted); margin-bottom:0; }
.section--chalk .section__lede{ color:#BBD0C8; }

.eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber-text); margin:0 0 .8rem;
}
.eyebrow--light{ color:var(--amber-soft); }

.prose{ font-size:1.09em; }
.prose--light{ color:#BBD0C8; }
.muted{ color:var(--muted); }
.section--chalk .muted{ color:#9DB8AE; }

.caption{
  margin:1.35rem auto 0; max-width:760px; text-align:center;
  font-size:.9rem; color:var(--muted); line-height:1.6;
}
.section--terrazzo .caption,
.section--terrazzo .compare__hint,
.section--terrazzo .section__lede,
.section--tint .section__lede{ color:var(--muted-deep); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  /* Near-opaque so the bar keeps its cream identity over every section
     background. A translucent header sampled the sand and navy bands and
     read as muddy grey. */
  background:rgba(250,247,240,.96);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .site-header{
    background:rgba(250,247,240,.72);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
  }
}
.site-header.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 4px 20px rgba(30,58,52,.07);
}
.site-header__inner{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
  min-height:var(--header-h);
  display:flex; align-items:center; gap:1rem;
  transition:min-height .3s var(--ease);
}
.site-header.is-stuck .site-header__inner{ min-height:62px; }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--chalk); margin-right:auto; }
.brand__mark{ color:var(--chalk); flex:none; display:grid; place-items:center; transition:transform .4s var(--ease); }
.brand:hover .brand__mark{ transform:rotate(-6deg) scale(1.05); }
.brand__mark svg{ width:34px; height:34px; }
.brand__words{ display:flex; flex-direction:column; line-height:1.15; }
.brand__name{
  font-family:var(--serif); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(.94rem,.86rem + .3vw,1.06rem); color:var(--chalk);
}
.brand__amp{ font-style:italic; font-weight:400; }
.brand__tag{
  font-size:.63rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-top:.15rem;
}

.nav{ display:flex; align-items:center; gap:1.6rem; }
.nav__list{ display:flex; gap:1.5rem; }
.nav__list a{
  position:relative; text-decoration:none; color:var(--chalk);
  font-size:.925rem; font-weight:600; padding-block:.4rem; display:inline-block;
}
.nav__list a{
  border-radius:999px; padding:.45rem .85rem;
  transition:background .26s var(--ease), color .26s var(--ease);
}
.nav__list a:hover{ background:rgba(30,58,52,.07); }
.nav__list a.is-current,
.nav__list a.is-active{
  background:rgba(242,166,90,.2); color:var(--amber-text);
}

.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--line);
  border-radius:10px; background:transparent; cursor:pointer; align-items:center;
  justify-content:center; color:var(--chalk);
}
.nav-toggle__bars{ display:grid; gap:5px; width:19px; }
.nav-toggle__bars i{ height:2px; background:currentColor; border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--chalk); --btn-fg:#fff; --btn-bd:var(--chalk);
  font-family:var(--sans);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.86rem 1.5rem; min-height:48px;
  background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd);
  border-radius:999px; text-decoration:none; font-weight:650; font-size:.95rem;
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); box-shadow:var(--shadow-sm); }
.btn--gold{ --btn-bg:var(--amber); --btn-fg:var(--ink); --btn-bd:var(--amber); }
.btn--gold:hover{ --btn-bg:var(--amber-soft); --btn-bd:var(--amber-soft); }
.btn--outline{ --btn-bg:transparent; --btn-fg:var(--chalk); --btn-bd:var(--chalk); }
.btn--outline:hover{ --btn-bg:var(--chalk); --btn-fg:#fff; }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--chalk); --btn-bd:transparent; box-shadow:none; text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--terrazzo); }
.btn--ghost:hover{ --btn-bd:var(--line); text-decoration-color:var(--amber); box-shadow:var(--shadow-sm); }
.btn--sm{ padding:.6rem 1.1rem; min-height:42px; font-size:.875rem; }
.btn--block{ width:100%; }





/* ==========================================================================
   Page-load sequence. One orchestrated moment on the stage rather than a
   fade-up on every section. Runs once, on load, and only when motion is
   welcome — the markup is fully visible without it.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js-motion .stage__media img{
    animation:stageSettle 1.6s var(--ease-out) both;
  }
  .js-motion .stage__panel{
    animation:panelIn .9s var(--ease-out) .15s both;
  }
  .js-motion .stage__status{ animation:riseIn .6s var(--ease-out) .38s both; }
  .js-motion .stage__title{  animation:riseIn .7s var(--ease-out) .46s both; }
  .js-motion .stage__lede{   animation:riseIn .7s var(--ease-out) .56s both; }
  .js-motion .stage__cta{    animation:riseIn .7s var(--ease-out) .66s both; }
  .js-motion .stage__facts{  animation:panelIn .8s var(--ease-out) .78s both; }
}
@keyframes stageSettle{
  from{ transform:scale(1.07); filter:saturate(.82); }
  to{   transform:none;        filter:none; }
}
@keyframes panelIn{
  from{ opacity:0; transform:translateY(20px); }
  to{   opacity:1; transform:none; }
}
@keyframes riseIn{
  from{ opacity:0; transform:translateY(12px); }
  to{   opacity:1; transform:none; }
}


/* ==========================================================================
   Depth layer. The page is built as lit glass over a living ground: an
   aurora field drifts behind everything, sections overlap rather than stack,
   and panels catch light along their top edge. This is where the design
   spends its boldness.
   ========================================================================== */

/* --- Aurora ground: slow-drifting colour fields the glass refracts --- */
body::before{
  content:""; position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38ch 32ch at 12% 18%, rgba(242,166,90,.30), transparent 60%),
    radial-gradient(42ch 36ch at 84% 26%, rgba(47,93,82,.34),   transparent 58%),
    radial-gradient(36ch 30ch at 26% 72%, rgba(63,117,103,.26), transparent 60%),
    radial-gradient(40ch 34ch at 78% 84%, rgba(242,166,90,.20), transparent 58%);
  filter:blur(26px);
  animation:aurora 34s var(--ease) infinite alternate;
}
@keyframes aurora{
  0%{   transform:translate3d(0,0,0) scale(1); }
  50%{  transform:translate3d(-2.5%,1.8%,0) scale(1.07); }
  100%{ transform:translate3d(2%,-1.5%,0) scale(1.03); }
}
/* A fine grain over the whole page stops the gradients banding and gives
   the glass something to sit on. */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* --- Sections become translucent shells, not solid bands --- */
.section--tint{
  background:linear-gradient(180deg, rgba(243,238,227,.62), rgba(243,238,227,.86));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.section--terrazzo{
  background:linear-gradient(180deg, rgba(228,220,203,.66), rgba(228,220,203,.9));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
/* Overlapping seams: each band pulls up over the one before it and rounds its
   top corners, so the page reads as layered sheets rather than rows.
   `+` rather than a blanket rule: a band only overlaps another SECTION. Pulled
   up against a page hero it clipped the hero's own lede mid-sentence. */
.section + .section--tint,
.section + .section--terrazzo,
.section + .section--chalk{
  border-radius:clamp(20px,3vw,40px) clamp(20px,3vw,40px) 0 0;
  margin-top:clamp(-3.5rem,-4vw,-2rem);
  padding-top:calc(var(--sec-y) + clamp(2rem,4vw,3.5rem));
  border-block:0;
}
/* A band directly after a hero keeps its own top edge. Written at the same
   specificity as the overlap rule and forced, because `.section + .section--tint`
   would otherwise still win on source order and pull up over the hero's lede. */
.phero + .section--tint,
.phero + .section--terrazzo,
.phero + .section--chalk,
.phero + .section,
.stage + .section--tint,
.stage + .section--terrazzo,
.stage + .section--chalk,
.stage + .section{
  margin-top:0 !important;
  border-radius:0 !important;
  padding-top:var(--sec-y) !important;
}
.section--chalk{
  background:linear-gradient(180deg, var(--chalk) 0%, var(--chalk-deep) 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.1);
}

/* --- Panels catch light along the top edge --- */
.tile,.card,.backing__item,.cond,.quote,.contact__form,.peers li{
  position:relative;
}
.tile::after,.card::after,.backing__item::after,.contact__form::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 42%);
  opacity:.75;
}

/* --- Tiles get real dimension --- */
.tile{
  background:linear-gradient(150deg, rgba(255,255,255,.80), rgba(255,255,255,.52));
  border:1px solid rgba(255,255,255,.65);
  box-shadow:
    0 1px 2px rgba(20,40,34,.05),
    0 12px 28px rgba(20,40,34,.09),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.tile:hover{
  transform:translateY(-6px);
  background:linear-gradient(150deg, rgba(255,255,255,.94), rgba(255,255,255,.7));
  box-shadow:
    0 2px 4px rgba(20,40,34,.06),
    0 26px 52px rgba(20,40,34,.15),
    inset 0 1px 0 rgba(255,255,255,1);
}
/* The icon well is recessed, so the tile reads as a surface with depth. */
.tile__ico{
  background:linear-gradient(160deg, rgba(30,58,52,.09), rgba(30,58,52,.04));
  box-shadow:inset 0 1px 2px rgba(20,40,34,.12), 0 1px 0 rgba(255,255,255,.8);
  border-radius:14px;
}
.tile:hover .tile__ico{
  background:linear-gradient(160deg, var(--amber), var(--amber-soft));
  box-shadow:0 6px 16px rgba(242,166,90,.45), inset 0 1px 0 rgba(255,255,255,.6);
  color:var(--ink);
}

/* Section headings: the eyebrow becomes a short rule plus text, which
   encodes position rather than shouting a label. */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.82rem; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--amber-text); margin:0 0 .85rem;
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:var(--amber); flex:none;
}
.eyebrow--light{ color:var(--amber-soft); }
.eyebrow--light::before{ background:var(--amber); }

/* ==========================================================================
   Banner, header, hero
   ========================================================================== */

/* --- Banner: a full amber field, not a hairline strip --- */
.banner{
  background:linear-gradient(97deg,var(--amber) 0%,var(--amber-soft) 62%,var(--amber) 100%);
  color:var(--ink);
}
.banner__inner{
  min-height:var(--banner-h);
  max-width:var(--wrap); margin-inline:auto; padding:.7rem var(--gutter);
  display:flex; align-items:center; justify-content:center; gap:.85rem;
  flex-wrap:wrap; text-align:center;
}
.banner__dot{
  width:9px; height:9px; border-radius:50%; background:var(--ink); flex:none;
  animation:bannerPulse 2.8s var(--ease) infinite;
}
@keyframes bannerPulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.25); opacity:.55; }
}
.banner__lead{
  font-size:clamp(.8rem,.76rem + .16vw,.88rem); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.banner__rule{ width:1px; height:15px; background:rgba(26,33,31,.32); }
/* Once the banner wraps, the divider is stranded at the end of a line
   with nothing after it, so it reads as a stray mark rather than a
   separator. Below the wrap point the line break does its job. */
@media (max-width:620px){ .banner__rule{ display:none; } }
.banner__sub{ font-size:clamp(.8rem,.77rem + .14vw,.875rem); color:rgba(26,33,31,.82); }

/* --- Header: solid glass, so it never samples whatever sits behind it --- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--nav-glass);
  border-bottom:1px solid rgba(242,166,90,.26);
  transition:box-shadow .3s var(--ease);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .site-header{
    background:rgba(20,40,34,.86);
    backdrop-filter:saturate(160%) blur(20px);
    -webkit-backdrop-filter:saturate(160%) blur(20px);
  }
}
.site-header.is-stuck{ box-shadow:0 8px 26px rgba(10,22,18,.26); }
.site-header__inner{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
  min-height:var(--header-h);
  display:flex; align-items:center; gap:1rem;
  transition:min-height .3s var(--ease);
}
.site-header.is-stuck .site-header__inner{ min-height:60px; }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
/* The FFCS lockup is rebuilt from a disc image plus live text.

   Baking both lines into one 7.8:1 bitmap meant that inside a 72px header bar
   the subheading landed at roughly 4px tall — letter-spaced caps at that size
   smear into a grey band at any viewport width. As text it renders at whatever
   size we set, stays sharp on every display, and is selectable and searchable.

   The disc keeps its recoloured artwork: amber with deep-green "FFCS". */
.brand__mark-img{
  display:block; width:auto; height:clamp(34px,3.6vw,42px); flex:none;
  transition:transform .4s var(--ease);
}
.brand:hover .brand__mark-img{ transform:rotate(-4deg) scale(1.04); }
.brand__mark{
  width:36px; height:36px; border-radius:10px; flex:none;
  background:var(--amber); color:var(--chalk-deep);
  display:grid; place-items:center;
  font-family:var(--serif); font-weight:600; font-size:1.1rem;
  transition:transform .4s var(--ease);
}
.brand:hover .brand__mark{ transform:rotate(-5deg) scale(1.05); }
.brand__words{ display:flex; flex-direction:column; line-height:1.15; }
.brand__name{
  /* The artwork sets the name in a bold condensed sans, not the page serif —
     matching that keeps the header consistent with the logo in the union card
     and the printed material. */
  font-family:var(--sans); font-weight:700; color:var(--on-dark);
  font-size:clamp(.82rem,.72rem + .38vw,1rem);
  letter-spacing:.008em; text-transform:uppercase; line-height:1.1;
}
.brand__amp{ font-style:italic; font-weight:400; opacity:.86; }
.brand__tag-short{ display:none; }
.brand__tag{
  /* This is the line that was unreadable as bitmap. As text it gets a real
     size and its own tracking — small, but genuinely legible. */
  /* Subordinate to the name above it. The descriptor has far more characters,
     so even at 60% of the name's size the tracked-out line ran WIDER than the
     name — which is what made it read as oversized. Tighter tracking and a
     smaller size bring the line inside the name's measure. */
  font-size:clamp(.46rem,.4rem + .18vw,.54rem);
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--amber-soft); font-weight:600; margin-top:.2rem;
  line-height:1.25;
}

.nav{ display:flex; align-items:center; gap:1.1rem; }
.nav__list{ display:flex; gap:.2rem; }
.nav__list a{
  display:inline-block; text-decoration:none;
  color:#EFEDE5; font-size:.9rem; font-weight:500;
  padding:.5rem .8rem; border-radius:999px;
  text-shadow:0 1px 3px rgba(10,22,18,.6);
  transition:background .24s var(--ease), color .24s var(--ease);
}
.nav__list a:hover{ background:rgba(255,255,255,.1); color:#fff; }
.nav__list a.is-current{
  background:rgba(242,166,90,.3); color:#FFE8CE; font-weight:600;
  text-shadow:0 1px 3px rgba(10,22,18,.6);
}

/* --- Hero --- */
.stage{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(520px,82vh,780px);
  display:flex; align-items:flex-end;
  padding-block:clamp(3rem,7vw,5rem) clamp(4rem,8vw,5.5rem);
  background:var(--chalk-deep);
}
/* Oversized so a parallax shift never exposes an edge. */
.stage__media{ position:absolute; inset:-14% 0; z-index:-3; }
.stage__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  will-change:transform;
}
/* Vertical wash — keeps the top light so the building reads. */
.stage__wash{
  position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg,
    rgba(20,40,34,.58) 0%, rgba(20,40,34,.30) 34%, rgba(20,40,34,.92) 100%);
}
/* A pool of depth only where the copy sits. */
.stage__pool{
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120ch 62ch at 14% 88%, rgba(20,40,34,.72), transparent 62%);
}

.stage__inner{ position:relative; z-index:1; width:100%; }

/* The hero must never depend on JavaScript to be visible. GSAP's `from`
   tweens write opacity:0 the moment they are created, so this rule guarantees
   the copy renders when motion.js is absent, blocked, or still loading. */
html:not(.js-hero) .stage__panel,
html:not(.js-hero) .stage__status,
html:not(.js-hero) .stage__lede,
html:not(.js-hero) .stage__cta,
html:not(.js-hero) .stage__note,
html:not(.js-hero) .stage__scroll{ opacity:1 !important; visibility:visible !important; }

/* The panel is deliberately light — 18% — so the rendering stays visible
   through it. Contrast is carried by the scrim beneath, not by the panel. */
.stage__panel{
  max-width:38rem;
  padding:clamp(1.5rem,3vw,2.1rem);
  border-radius:var(--radius);
  background:var(--glass-panel);
  border:1px solid var(--glass-line);
  box-shadow:0 20px 50px rgba(10,22,18,.3), inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .stage__panel{ background:rgba(20,40,34,.62); }
}

.stage__status{
  display:inline-flex; align-items:center; gap:.55rem;
  margin:0 0 1.1rem; padding:.4rem .9rem;
  border-radius:999px;
  background:rgba(242,166,90,.16); border:1px solid rgba(242,166,90,.46);
  color:var(--amber-soft);
  font-size:.78rem; font-weight:500; letter-spacing:.02em;
}
.stage__dot{
  width:7px; height:7px; border-radius:50%; background:var(--amber); flex:none;
  box-shadow:0 0 0 0 rgba(242,166,90,.7); animation:pulse 2.6s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(242,166,90,.6); }
  70%{ box-shadow:0 0 0 9px rgba(242,166,90,0); }
  100%{ box-shadow:0 0 0 0 rgba(242,166,90,0); }
}

.stage__title{
  margin:0 0 .55em; color:#fff; text-wrap:balance;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.1rem,1.4rem + 3vw,3.5rem);
  line-height:1.04; letter-spacing:-.026em;
}
.stage__title .line{ display:block; overflow:hidden; }
.stage__lede{
  margin:0 0 1.6rem; max-width:44ch;
  color:var(--on-dark-dim); font-size:clamp(1rem,.96rem + .3vw,1.12rem);
  line-height:1.6;
}
.stage__cta{ display:flex; flex-wrap:wrap; gap:.7rem; }

.stage__note{
  position:absolute; right:var(--gutter); bottom:1.1rem; z-index:2;
  font-size:.66rem; font-weight:500; color:rgba(255,255,255,.8);
  background:rgba(20,40,34,.66); border:1px solid rgba(255,255,255,.2);
  border-radius:999px; padding:.36rem .8rem;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.stage__scroll{
  position:absolute; left:var(--gutter); bottom:1.25rem; z-index:2;
  display:inline-flex; align-items:center; gap:.65rem;
  color:rgba(255,255,255,.62); text-decoration:none;
  font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  transition:color .25s var(--ease);
}
.stage__scroll:hover{ color:#fff; }
.stage__scroll-rule{
  width:32px; height:1px; background:rgba(255,255,255,.44);
  transition:width .3s var(--ease);
}
.stage__scroll:hover .stage__scroll-rule{ width:46px; }

/* --- Buttons --- */
.btn--amber{ --btn-bg:var(--amber); --btn-fg:var(--ink); --btn-bd:var(--amber); }
.btn--amber:hover{ --btn-bg:var(--amber-soft); --btn-bd:var(--amber-soft); }
.btn--glass{
  --btn-bg:rgba(255,255,255,.1); --btn-fg:#fff; --btn-bd:rgba(255,255,255,.34);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn--glass:hover{ --btn-bg:rgba(255,255,255,.2); --btn-bd:rgba(255,255,255,.6); }


/* ---------- Sub-page hero ---------- */
.phero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--chalk-deep); color:#fff;
  /* Generous and asymmetric: more room below the lede than above the eyebrow,
     so the copy sits optically centred rather than crowding the next band. */
  padding-block:clamp(4.5rem,9.5vw,7.5rem) clamp(5rem,10.5vw,8rem);
  /* Taller than before but still short of the home page's full-height stage:
     the home hero remains the site's biggest moment, these read as a clear
     second tier. */
  min-height:clamp(380px,56vh,560px);
  display:flex; align-items:center;
  z-index:2;
}
.phero__media{ position:absolute; inset:0; z-index:-2; }
.phero__media img{ width:100%; height:100%; object-fit:cover; }
.phero__wash{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(103deg,
    rgba(20,40,34,.94) 0%, rgba(20,40,34,.76) 48%, rgba(20,40,34,.42) 100%);
}
.phero .eyebrow{ color:var(--amber); }
.phero .eyebrow::before{ background:var(--amber); }
.phero h1{
  margin:0 0 .4em; color:#fff; text-wrap:balance; max-width:18ch;
  font-size:clamp(1.9rem,1.35rem + 2.4vw,3rem); line-height:1.06;
}
.phero__lede{
  margin:0; max-width:54ch; color:var(--on-dark-dim);
  font-size:clamp(1rem,.96rem + .28vw,1.1rem); line-height:1.62;
}

/* ---------- Services ----------
   Two leads at full size (the services a parent actually comes here for),
   then the remaining seven as a compact index. A flat 3x3 grid of identical
   cards gave every service the same weight and read as filler. */
.svc{
  display:grid; gap:clamp(1rem,2vw,1.4rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.svc__lead{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform .34s var(--ease-out), box-shadow .34s var(--ease-out);
}
.svc__lead:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }

.svc__shot{
  position:relative; aspect-ratio:16/10; overflow:hidden; flex:none;
  background:var(--terrazzo);
}
.svc__shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease-out);
}
.svc__lead:hover .svc__shot img{ transform:scale(1.045); }

.svc__body{ padding:clamp(1.3rem,2.6vw,1.75rem); display:flex; flex-direction:column; }
.svc__age{
  margin:0 0 .5rem; align-self:flex-start;
  background:var(--ivory-alt); border:1px solid var(--line);
  border-radius:999px; padding:.35rem .8rem;
  font-size:.76rem; font-weight:600; color:var(--amber-text);
}
.svc__body h3{
  margin:0 0 .45em; font-size:clamp(1.15rem,1.05rem + .45vw,1.42rem);
  line-height:1.2; color:var(--chalk);
}
.svc__body p{ margin:0 0 1.1rem; font-size:.95rem; line-height:1.64; color:#4A5551; }

.svc__link{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.9rem; font-weight:650; color:var(--room);
  text-decoration:none; padding-bottom:2px;
  border-bottom:1.5px solid transparent;
  transition:border-color .24s var(--ease), color .24s var(--ease);
}
.svc__link:hover{ color:var(--chalk); border-bottom-color:var(--amber); }
.svc__arrow{ display:grid; place-items:center; transition:transform .28s var(--ease-out); }
.svc__link:hover .svc__arrow{ transform:translateX(3px); }

/* The seven supporting services as cards — same family as the two leads,
   smaller and lighter so the hierarchy still reads. */
.svc__index{
  grid-column:1 / -1;
  display:grid; gap:clamp(.8rem,1.6vw,1.1rem);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
/* The Mothers & Infants page has five cards rather than seven, so they sit
   on a 3+2 grid: three across, then two centred beneath. */
.svc__index--five{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.svc__index--five > .svc__item{ grid-column:span 2; }
.svc__index--five > .svc__item:nth-child(4){ grid-column:2 / span 2; }
.svc__index--five > .svc__item:nth-child(5){ grid-column:4 / span 2; }
@media (max-width:900px){
  .svc__index--five{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .svc__index--five > .svc__item,
  .svc__index--five > .svc__item:nth-child(4),
  .svc__index--five > .svc__item:nth-child(5){ grid-column:auto; }
  .svc__index--five > .svc__item:last-child{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .svc__index--five{ grid-template-columns:1fr; }
  .svc__index--five > .svc__item:last-child{ grid-column:auto; }
}
.svc__item{
  position:relative; overflow:hidden;
  display:block;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.05rem,2vw,1.3rem);
  box-shadow:var(--shadow-sm);
  transition:transform .32s var(--ease-out), box-shadow .32s var(--ease-out),
             border-color .32s var(--ease-out);
}
.svc__item::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--amber),var(--amber-soft));
  transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--ease-out);
}
.svc__item:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent;
}
.svc__item:hover::before{ transform:scaleX(1); }

.svc__ico{
  display:grid; place-items:center; width:40px; height:40px;
  border-radius:12px; margin-bottom:.8rem;
  background:var(--ivory-alt); color:var(--room);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.svc__item:hover .svc__ico{
  background:var(--amber); color:var(--ink); transform:translateY(-2px);
}
.svc__item h4{
  margin:0 0 .3em; font-family:var(--sans); font-weight:700;
  font-size:.95rem; line-height:1.3; color:var(--chalk); letter-spacing:-.004em;
}
.svc__item p{ margin:0; font-size:.855rem; line-height:1.55; color:#4A5551; }

/* Eight cells, seven cards: the last one spans two so the row closes evenly
   rather than leaving a hole. */
.svc__item:last-child{ grid-column:span 2; }

@media (max-width:1100px){
  .svc__index{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .svc__item:last-child{ grid-column:auto; }
}
@media (max-width:860px){
  .svc{ grid-template-columns:1fr; }
  .svc__index{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .svc__item:last-child{ grid-column:span 2; }
}
@media (max-width:560px){
  .svc__index{ grid-template-columns:1fr; }
  .svc__item:last-child{ grid-column:auto; }
}

.section__more{ margin:clamp(2rem,4vw,2.75rem) 0 0; text-align:center; }

/* ---------- Image frame + concept badge ---------- */
.frame{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--terrazzo); box-shadow:var(--shadow-lg);
}
.frame img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.badge-concept{
  position:absolute; left:.85rem; bottom:.85rem; z-index:2;
  background:rgba(30,58,52,.82); color:#fff;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:.34rem .66rem; border-radius:999px;
  opacity:.9; transition:opacity .3s var(--ease);
}
.frame:hover .badge-concept{ opacity:1; }


/* ---------- Before / after compare ---------- */
.compare{ position:relative; max-width:1000px; margin-inline:auto; }
.compare__viewport{
  position:relative; overflow:hidden; border-radius:var(--radius);
  box-shadow:var(--shadow-lg); background:var(--chalk);
  aspect-ratio:1316/395; touch-action:pan-y; user-select:none; cursor:ew-resize;
}
.compare__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
}
/* The clip narrows to reveal the "after" beneath it. The image inside is
   pinned to the viewport's full width so both halves stay in register —
   without this the before image would squash as the clip narrows. */
.compare__clip{
  position:absolute; top:0; left:0; bottom:0; overflow:hidden;
  width:var(--pos,50%);
  will-change:width;
}
.compare__clip .compare__img{
  width:var(--vpw,100%); max-width:none;
}

.compare__label{
  position:absolute; top:.9rem; z-index:3;
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.34rem .7rem; border-radius:999px; color:#fff;
  background:rgba(30,58,52,.78);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.compare__label--before{ left:.9rem; }
.compare__label--after{ right:.9rem; background:rgba(242,166,90,.9); }

.compare__handle{
  position:absolute; top:0; bottom:0; z-index:4;
  left:var(--pos,50%); width:3px; margin-left:-1.5px;
  background:rgba(255,255,255,.92); cursor:ew-resize;
  box-shadow:0 0 0 1px rgba(30,58,52,.2), 0 0 22px rgba(0,0,0,.3);
}
.compare__grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:#fff; color:var(--chalk);
  display:grid; place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.compare__viewport:hover .compare__grip{ transform:translate(-50%,-50%) scale(1.09); box-shadow:0 6px 22px rgba(0,0,0,.34); }
.compare__handle:focus-visible{ outline:none; }
.compare__handle:focus-visible .compare__grip{ outline:3px solid var(--amber); outline-offset:3px; transform:translate(-50%,-50%) scale(1.09); }
.compare.is-dragging .compare__grip{ transform:translate(-50%,-50%) scale(.95); }
.compare.is-dragging .compare__viewport{ cursor:grabbing; }

.compare__hint{
  text-align:center; margin:.9rem 0 0;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
  transition:opacity .4s var(--ease);
}
.compare.is-touched .compare__hint{ opacity:0; }

/* ---------- Split sections ---------- */
.split{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
}
.split--reverse .split__media{ order:-1; }
.split__media{ margin:0; }
.split__media .frame{ aspect-ratio:4/3; }

.ticks li{
  position:relative; padding-left:1.85rem; margin-bottom:.6rem; line-height:1.55;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:11px; height:6px; border-left:2px solid var(--room);
  border-bottom:2px solid var(--room); transform:rotate(-45deg);
}
.ticks--light li::before{ border-color:var(--amber); }

.chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.35rem; }
.chips li{
  background:var(--ivory); border:1px solid var(--line); color:var(--chalk);
  border-radius:999px; padding:.45rem .95rem; font-size:.875rem; font-weight:600;
  transition:transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.chips li:hover{ transform:translateY(-2px); background:#fff; border-color:var(--amber); }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); overflow:hidden; }
.stat{ background:var(--chalk); padding:clamp(1.4rem,3vw,2.1rem) clamp(1.1rem,2.5vw,1.6rem); text-align:center; }
.stat__num{
  display:block; font-family:var(--serif); font-weight:700; color:var(--amber);
  font-size:clamp(1.9rem,1.35rem + 2.1vw,2.9rem); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stat__lbl{
  display:block; margin-top:.6rem; font-size:.76rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:#9DB8AE; line-height:1.45;
}

/* ---------- Service cards ---------- */
.cards{
  display:grid; gap:clamp(1.4rem,2.6vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.card{
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.66);
  border:1px solid var(--glass-line); border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  transition:transform .38s var(--ease-out), box-shadow .38s var(--ease-out),
             background .38s var(--ease-out);
}
.card:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,.88);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.8);
}
.card__media{ aspect-ratio:16/10; border-radius:0; box-shadow:none; flex:none; }
.card:hover .card__media img{ transform:scale(1.045); }
.card__body{ padding:clamp(1.25rem,2.4vw,1.6rem); display:flex; flex-direction:column; flex:1 1 auto; }
.card__icon{
  display:grid; place-items:center; width:42px; height:42px; flex:none;
  border-radius:11px; background:var(--ivory-alt); color:var(--room);
  margin-bottom:.85rem;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.card:hover .card__icon{ background:var(--amber); color:var(--chalk); transform:translateY(-2px); }
.card__body h3{ margin-bottom:.45em; }
.card__body p{ margin:0; font-size:.95rem; color:#4A5551; line-height:1.62; }

/* ---------- Building today: real condition photos ---------- */
.badge-real{
  position:absolute; left:.7rem; top:.7rem; z-index:2;
  background:rgba(168,69,47,.9); color:#fff;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:999px;
}
.conds{
  display:grid; gap:clamp(1.2rem,2.4vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.cond{
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform .34s var(--ease), box-shadow .34s var(--ease);
}
.cond:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.cond__media{ aspect-ratio:4/3; border-radius:0; box-shadow:none; flex:none; }
.cond__media img{ filter:saturate(.82) contrast(1.03); }
.cond:hover .cond__media img{ transform:scale(1.04); }
.cond__body{ padding:1.05rem 1.15rem 1.25rem; flex:1 1 auto; }
.cond__body h3{ font-size:1.02rem; margin-bottom:.35em; }
.cond__body p{ margin:0; font-size:.89rem; color:#4A5551; line-height:1.58; }

/* ---------- Investment breakdown ---------- */
.invest{
  margin-top:clamp(2.25rem,5vw,3.5rem);
  background:var(--chalk); color:#BBD0C8; border-radius:var(--radius);
  padding:clamp(1.6rem,4vw,2.75rem);
  display:grid; gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:center;
}
.invest__head .eyebrow{ color:var(--amber-soft); }
.invest__total{
  font-family:var(--serif); font-weight:700; color:var(--amber);
  font-size:clamp(2.6rem,1.8rem + 3.4vw,4.2rem); line-height:1; margin:0 0 .3rem;
  letter-spacing:-.025em; font-variant-numeric:tabular-nums;
}
.invest__sub{ margin:0; font-size:.86rem; color:#9DB8AE; }
.invest__split{ display:grid; gap:1.35rem; }
.invest__split li{ display:grid; gap:.2rem; }
.invest__amt{
  font-family:var(--serif); font-weight:700; color:#fff;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); letter-spacing:-.015em;
}
.invest__lbl{ font-size:.9rem; font-weight:650; color:#BBD0C8; }
.invest__desc{ font-size:.82rem; color:#9DB8AE; line-height:1.5; }
.invest__bar{
  display:block; height:6px; border-radius:99px; margin-top:.45rem;
  background:rgba(255,255,255,.13); overflow:hidden;
}
.invest__bar i{
  display:block; height:100%; width:var(--pct,50%); border-radius:99px;
  background:linear-gradient(90deg,var(--amber),var(--amber-soft));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease) .15s;
}
.is-in .invest__bar i,
.invest.is-in .invest__bar i{ transform:scaleX(1); }
html:not(.js-reveal) .invest__bar i{ transform:scaleX(1); }

/* ---------- Jobs figures ---------- */
.jobs{
  display:grid; gap:1px; margin-top:clamp(2rem,4vw,3rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); overflow:hidden;
}
.jobs li{ background:var(--chalk); padding:clamp(1.3rem,3vw,2rem); text-align:center; }
.jobs__num{
  display:block; font-family:var(--serif); font-weight:700; color:var(--amber);
  font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.jobs__lbl{ display:block; margin-top:.5rem; font-size:.88rem; font-weight:650; color:#BBD0C8; }
.jobs__sub{ display:block; margin-top:.2rem; font-size:.78rem; color:#9DB8AE; }

/* ---------- Proven model / peers ---------- */
.peers{
  display:grid; gap:clamp(.9rem,2vw,1.25rem);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.peers li{
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--room-light);
  border-radius:10px; padding:1.05rem 1.15rem;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-left-color .26s var(--ease);
}
.peers li:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-left-color:var(--amber); }
.peers__name{ display:block; font-family:var(--serif); font-weight:650; color:var(--chalk); font-size:1rem; line-height:1.3; }
.peers__note{ display:block; margin-top:.3rem; font-size:.82rem; color:var(--muted); }

.coverage{
  margin-top:clamp(1.75rem,4vw,2.5rem);
  background:var(--ivory-alt); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(1.3rem,3vw,2rem);
}
.coverage__head{
  margin:0 0 1rem; font-size:.8rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--chalk); text-align:center;
}
.coverage__list{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; }
.coverage__list li{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:.45rem .95rem .45rem 2rem;
  font-size:.86rem; font-weight:600; color:var(--chalk);
  transition:transform .22s var(--ease), border-color .22s var(--ease);
}
.coverage__list li::before{
  content:""; position:absolute; left:.85rem; top:50%;
  width:9px; height:5px; margin-top:-3.5px;
  border-left:2px solid var(--room); border-bottom:2px solid var(--room);
  transform:rotate(-45deg);
}
.coverage__list li:hover{ transform:translateY(-2px); border-color:var(--room-light); }

/* ---------- Community backing ---------- */
.backing{
  display:grid; gap:clamp(1.25rem,2.6vw,1.9rem);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.backing__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.3rem,2.6vw,1.8rem);
  box-shadow:var(--shadow-sm);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
.backing__item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.backing__ico{
  display:grid; place-items:center; width:46px; height:46px;
  border-radius:12px; background:var(--ivory-alt); color:var(--room);
  margin-bottom:.9rem;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.backing__item:hover .backing__ico{ background:var(--amber); color:var(--chalk); transform:translateY(-2px) rotate(-4deg); }
.backing__item h3{ margin-bottom:.45em; }
.backing__item p{ margin:0; font-size:.93rem; color:#4A5551; line-height:1.62; }

/* ---------- Path to opening ---------- */
.path{
  counter-reset:none; display:grid; gap:0;
  grid-template-columns:repeat(7,minmax(0,1fr));
  position:relative; margin-top:.5rem;
}
.path::before{
  content:""; position:absolute; left:calc(100%/14); right:calc(100%/14); top:23px;
  height:2px; background:rgba(255,255,255,.16);
}
.path__step{
  position:relative; text-align:center; padding:0 .35rem;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
}
.path__num{
  position:relative; z-index:1;
  display:grid; place-items:center; width:46px; height:46px; flex:none;
  border-radius:50%; background:var(--chalk); color:#BBD0C8;
  border:2px solid rgba(255,255,255,.22);
  font-family:var(--serif); font-weight:700; font-size:1.05rem;
  transition:background .34s var(--ease), color .34s var(--ease),
             border-color .34s var(--ease), transform .34s var(--ease);
}
.path__step:hover .path__num{ transform:translateY(-3px); border-color:var(--amber); color:#fff; }
.path__step--last .path__num{ background:var(--amber); color:var(--chalk); border-color:var(--amber); }
.path__name{
  font-size:.82rem; font-weight:650; color:#BBD0C8; line-height:1.35; max-width:15ch;
}
.path__step--last .path__name{ color:#fff; }
.caption--light{ color:#9DB8AE; }

/* ---------- Gallery ---------- */
.gal__filters{
  display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
.gal__filter{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--ivory); border:1.5px solid var(--line); color:var(--chalk);
  border-radius:999px; padding:.6rem 1.15rem; min-height:44px;
  font-size:.9rem; font-weight:650; cursor:pointer;
  transition:background .24s var(--ease), border-color .24s var(--ease),
             color .24s var(--ease), transform .2s var(--ease);
}
.gal__filter:hover{ transform:translateY(-2px); border-color:var(--amber); background:#fff; }
.gal__filter.is-active{ background:var(--chalk); border-color:var(--chalk); color:#fff; }
.gal__count{
  font-size:.75rem; font-weight:700; padding:.1rem .45rem; border-radius:999px;
  background:rgba(30,58,52,.09); color:var(--muted-deep); min-width:1.5rem; text-align:center;
}
.gal__filter.is-active .gal__count{ background:rgba(255,255,255,.2); color:#fff; }

/* Row bands. Each band is its own grid, so every tile inside a row is exactly
   the same size, while different rows can carry different scales for rhythm.
   Filtering hides whole tiles; a band with nothing left collapses entirely,
   so a row can never end up half-empty. */
.gal{ display:grid; gap:clamp(.7rem,1.4vw,1.1rem); }

.gal__row{
  display:grid; gap:clamp(.7rem,1.4vw,1.1rem);
  grid-template-columns:repeat(var(--cols,4),1fr);
}
.gal__row[hidden]{ display:none; }

/* Band scales — the aspect ratio is set per row, never per tile. */
.gal__row--pair   { --cols:2; --ar:16/7;  }   /* before / after */
.gal__row--feature{ --cols:2; --ar:16/9;  }   /* two large moments */
.gal__row--trio   { --cols:3; --ar:3/2;   }
.gal__row--quad   { --cols:4; --ar:4/3;   }
.gal__row--tall   { --cols:4; --ar:4/5;   }   /* portrait sources */

.gal__item{ margin:0; }
/* Filtered-out items collapse without a layout jump. */
.gal__item[hidden]{ display:none; }

.gal__btn{
  position:relative; display:block; width:100%; padding:0; border:0;
  background:var(--terrazzo); border-radius:12px; overflow:hidden; cursor:zoom-in;
  aspect-ratio:var(--ar,4/3); box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gal__btn img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease), filter .35s var(--ease);
}
.gal__btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(30,58,52,0) 55%,rgba(30,58,52,.42));
  opacity:0; transition:opacity .3s var(--ease);
}
.gal__btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.gal__btn:hover img{ transform:scale(1.06); }
.gal__btn:hover::after{ opacity:1; }
.gal__btn:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }

.gal__zoom{
  position:absolute; right:.6rem; bottom:.6rem; z-index:3;
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--chalk);
  opacity:0; transform:translateY(6px) scale(.9);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.gal__btn:hover .gal__zoom,
.gal__btn:focus-visible .gal__zoom{ opacity:1; transform:none; }
.gal__btn .badge-concept,
.gal__btn .badge-real{ z-index:3; }

/* ---------- Lightbox ---------- */
.lb{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; }
.lb[hidden]{ display:none; }
.lb__backdrop{
  position:absolute; inset:0; background:rgba(16,30,26,.92);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:lbFade .28s var(--ease);
}
@keyframes lbFade{ from{ opacity:0; } to{ opacity:1; } }
.lb__dialog{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:.5rem;
  width:min(96vw,1180px); max-height:92dvh; padding:0 .5rem;
  animation:lbIn .34s var(--ease);
}
@keyframes lbIn{ from{ opacity:0; transform:scale(.97) translateY(8px); } to{ opacity:1; transform:none; } }
.lb__figure{
  margin:0; flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
}
.lb__figure img{
  max-width:100%; max-height:76dvh; width:auto; height:auto;
  border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.5);
  background:var(--chalk);
}
.lb__cap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.5rem .8rem; text-align:center; color:#BBD0C8; font-size:.9rem;
  max-width:70ch; line-height:1.55;
}
.lb__kind{
  font-size:.63rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:.28rem .6rem; border-radius:999px;
  background:rgba(242,166,90,.2); color:var(--amber-soft);
  border:1px solid rgba(242,166,90,.35);
}
.lb__pos{ font-size:.78rem; color:#9DB8AE; font-variant-numeric:tabular-nums; }

.lb__close,.lb__nav{
  flex:none; display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2);
  transition:background .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.lb__close:hover,.lb__nav:hover{ background:rgba(255,255,255,.22); transform:scale(1.06); border-color:rgba(255,255,255,.4); }
.lb__close:active,.lb__nav:active{ transform:scale(.96); }
.lb__close{ position:absolute; top:-4px; right:0; z-index:2; width:42px; height:42px; }
.lb__close:focus-visible,.lb__nav:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

body.lb-open{ overflow:hidden; }


/* ---------- Community leadership carousel ---------- */
.quotes{
  position:relative; max-width:1000px; margin-inline:auto;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(.5rem,2vw,1.25rem);
}
.quotes__viewport{ overflow:hidden; }
.quotes__track{ display:flex; transition:transform .6s var(--ease); }
/* Without JS the track never transforms, so show the slides stacked and fully
   legible rather than clipping two of the three statements out of view. */
html:not(.js-quotes) .quotes__viewport{ overflow:visible; }
html:not(.js-quotes) .quotes__track{ display:grid; gap:1.1rem; transform:none !important; }
html:not(.js-quotes) .quote{ flex:none; opacity:1; }
html:not(.js-quotes) .quotes__nav,
html:not(.js-quotes) .quotes__foot{ display:none; }

.quote{
  flex:0 0 100%; min-width:0;
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.25rem,3vw,2.25rem); align-items:center;
  padding:clamp(1.5rem,3.2vw,2.4rem);
  background:rgba(255,255,255,.68);
  border:1px solid var(--glass-line); border-radius:var(--radius);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  /* Slides are stacked by transform on the track; opacity gives the crossfade. */
  opacity:.25; transition:opacity .5s var(--ease);
}
.quote.is-active{ opacity:1; }

.quote__fig{ margin:0; text-align:center; width:clamp(120px,16vw,168px); }
.quote__portrait{
  width:clamp(110px,15vw,150px); aspect-ratio:1; margin:0 auto .9rem;
  border-radius:50%; overflow:hidden; background:var(--terrazzo);
  box-shadow:0 0 0 4px var(--ivory), 0 0 0 5px var(--line);
}
/* Portraits are pre-cropped square with consistent headroom, so no
   object-position nudge is needed — centring is correct for all three. */
.quote__portrait img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.quote__portrait--placeholder{
  display:grid; place-items:center;
  background:linear-gradient(145deg,var(--chalk) 0%,var(--room) 100%);
}
.quote__initials{
  font-family:var(--serif); font-weight:700; color:var(--amber);
  font-size:clamp(1.9rem,1.4rem + 1.6vw,2.5rem); letter-spacing:.02em;
}
.quote__who{ display:grid; gap:.2rem; }
.quote__name{
  font-family:var(--serif); font-weight:700; color:var(--chalk);
  font-size:clamp(.98rem,.92rem + .25vw,1.1rem); line-height:1.25;
}
.quote__title{ font-size:.78rem; color:var(--muted); font-weight:600; line-height:1.4; }

.quote__body{ margin:0; position:relative; }
.quote__mark{
  position:absolute; left:-.1em; top:-.42em;
  font-family:var(--serif); font-size:4.5rem; line-height:1;
  color:var(--amber); opacity:.32; pointer-events:none;
}
.quote__body p{
  margin:0; position:relative;
  font-family:var(--serif); font-size:clamp(1.02rem,.96rem + .5vw,1.3rem);
  line-height:1.55; color:var(--chalk); text-wrap:pretty;
}

.quotes__nav{
  flex:none; display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:#fff; color:var(--chalk); border:1.5px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.quotes__nav:hover{ background:var(--chalk); color:#fff; border-color:var(--chalk); transform:scale(1.06); }
.quotes__nav:active{ transform:scale(.96); }

.quotes__foot{
  grid-column:1/-1;
  display:flex; align-items:center; justify-content:center;
  margin-top:1.35rem;
}
.quotes__dots{ display:flex; gap:.5rem; }
.quotes__dot{
  width:32px; height:8px; padding:0; border-radius:99px; cursor:pointer;
  background:var(--terrazzo); border:0;
  transition:background .28s var(--ease), width .28s var(--ease);
}
.quotes__dot:hover{ background:var(--amber); }
.quotes__dot.is-active{ background:var(--chalk); width:46px; }



/* Small headings use the sans. Fraunces is a display face here — at 1rem its
   character becomes noise rather than personality. */
.card__body h3,
.cond__body h3,
.backing__item h3{
  font-family:var(--sans); font-variation-settings:normal;
  font-weight:700; letter-spacing:-.006em; color:var(--chalk);
}
/* ---------- Places ---------- */
.places{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; max-width:900px; margin-inline:auto; }
.places li{
  background:var(--ivory); border:1px solid var(--line);
  border-radius:999px; padding:.5rem 1.05rem; font-size:.9rem; font-weight:600; color:var(--chalk);
  transition:transform .24s var(--ease), background .24s var(--ease), border-color .24s var(--ease);
}
.places li:hover{ transform:translateY(-2px); background:#fff; border-color:var(--room-light); }
.places__home{ background:var(--chalk) !important; color:#fff !important; border-color:var(--chalk) !important; }
.places__more{ background:transparent !important; border-style:dashed !important; color:var(--muted) !important; font-weight:500; }


/* ---------- Service area map ---------- */
.area{
  display:grid; gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center;
}
.area__map{ margin:0; }
.map{
  width:100%; height:auto; display:block;
  border-radius:var(--radius); background:#F7F3E9;
  border:1px solid var(--line); box-shadow:var(--shadow-md);
  overflow:visible;
}
.map__lake{ fill:#CFDCE3; }
.map__water{
  font-family:var(--serif); font-size:11px; font-style:italic;
  fill:#5A7468; letter-spacing:.04em;
}
.map__land{ fill:#EFE7D6; stroke:rgba(30,58,52,.16); stroke-width:1.2; }

.map__reach{ fill:rgba(242,166,90,.10); stroke:rgba(242,166,90,.34); stroke-width:1.2; stroke-dasharray:5 5; }
.map__reach--inner{ fill:rgba(242,166,90,.13); stroke:none; }

.map__pt circle{
  r:5; fill:#fff; stroke:var(--room-light); stroke-width:2;
  transition:r .25s var(--ease), fill .25s var(--ease), stroke .25s var(--ease);
}
.map__pt text{
  font-family:var(--sans); font-size:9.5px; font-weight:650;
  fill:var(--muted-deep); text-anchor:middle; letter-spacing:.01em;
  transition:fill .25s var(--ease);
}
.map__pt.is-hot circle{ r:7.5; fill:var(--amber); stroke:var(--chalk); }
.map__pt.is-hot text{ fill:var(--chalk); font-weight:750; }

.map__home-halo{
  fill:rgba(242,166,90,.28); stroke:var(--amber); stroke-width:1.4;
  transform-origin:196px 212px;
  animation:homePulse 3.2s var(--ease) infinite;
}
@keyframes homePulse{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%{ transform:scale(1.22); opacity:.45; }
}
.map__pin{ fill:var(--chalk); }
.map__pin-dot{ fill:var(--amber); }
.map__home-lbl{
  font-family:var(--serif); font-size:12.5px; font-weight:700; fill:var(--chalk);
}
.map__home-sub{
  font-family:var(--sans); font-size:9px; font-weight:650; fill:var(--amber-text);
  letter-spacing:.04em;
}

.area__lede{ font-size:1.02em; color:var(--muted-deep); margin-bottom:1.1rem; }
.area__lede strong{ color:var(--chalk); }
.area .places{ justify-content:flex-start; margin-inline:0; }
.places li[data-place]{ cursor:default; }
.places li.is-hot{
  background:var(--amber) !important; border-color:var(--amber) !important;
  color:var(--chalk) !important; transform:translateY(-2px);
}
.places__home.is-hot{ background:var(--chalk) !important; color:#fff !important; }

.area__addr{
  display:flex; gap:.8rem; align-items:flex-start;
  margin:1.4rem 0 0; padding-top:1.25rem;
  border-top:1px solid var(--line);
  font-size:.94rem; line-height:1.55; color:var(--muted-deep);
}
.area__addr strong{ color:var(--chalk); }
.area__addr-ico{
  flex:none; width:34px; height:34px; border-radius:9px;
  display:grid; place-items:center; background:var(--ivory); color:var(--room);
  border:1px solid var(--line);
}
.area__cap{
  margin:.8rem 0 0; text-align:center;
  font-size:.78rem; color:var(--muted-deep);
}

/* ---------- Contact / form ---------- */
.contact{
  display:grid; gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  align-items:start;
}
.contact__details{ margin-top:1.9rem; display:grid; gap:1rem; }
.contact__details li{ display:flex; gap:.85rem; align-items:flex-start; line-height:1.55; }
.contact__ico{
  flex:none; width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; background:var(--ivory-alt); color:var(--room);
}
.contact__details a{ color:var(--room); text-decoration:none; border-bottom:1px solid var(--terrazzo); transition:border-color .2s; }
.contact__details a:hover{ border-color:var(--amber); }

.contact__form{
  background:rgba(255,255,255,.72);
  border:1px solid var(--glass-line); border-radius:var(--radius);
  padding:clamp(1.5rem,3.2vw,2.35rem);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.form__row{ margin-bottom:1.05rem; }
.form__row--2{ display:grid; gap:1.05rem; grid-template-columns:repeat(2,minmax(0,1fr)); }

.field{ position:relative; }
.field input,.field textarea{
  width:100%; font:inherit; font-size:.97rem; color:var(--ink);
  padding:1.35rem .95rem .55rem; border:1.5px solid var(--line);
  border-radius:10px; background:var(--ivory); resize:vertical;
  transition:border-color .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease);
}
.field textarea{ padding-top:1.45rem; }
.field label{
  position:absolute; left:.98rem; top:.95rem;
  font-size:.95rem; color:var(--muted); pointer-events:none;
  transform-origin:left top;
  transition:transform .22s var(--ease), color .22s var(--ease);
}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--amber); background:#fff;
  box-shadow:0 0 0 4px rgba(242,166,90,.16);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-.62rem) scale(.76); color:var(--room);
}
.field.is-invalid input,.field.is-invalid textarea{ border-color:#B5432F; background:#FDF6F4; }
.field__err{
  margin:.4rem 0 0; font-size:.82rem; color:#B5432F; font-weight:600;
  animation:slideIn .26s var(--ease);
}
@keyframes slideIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.req{ color:var(--amber-text); }
.opt{ color:var(--muted); font-weight:400; font-size:.85em; }

/* Honeypot: off-screen rather than display:none, so bots that skip hidden
   fields still fill it in. Never focusable, never announced. */
.gotcha{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; opacity:0; pointer-events:none;
}

.fieldset{ border:0; padding:0; margin:0 0 1.15rem; }
.fieldset legend{ font-size:.87rem; font-weight:700; color:var(--chalk); margin-bottom:.7rem; padding:0; }
.checks{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem .9rem; }
.check{ display:flex; align-items:center; gap:.6rem; cursor:pointer; font-size:.91rem; line-height:1.3; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{
  flex:none; width:20px; height:20px; border-radius:6px;
  border:1.5px solid var(--line); background:var(--ivory); position:relative;
  transition:background .22s var(--ease), border-color .22s var(--ease), transform .18s var(--ease);
}
.check__box::after{
  content:""; position:absolute; left:6px; top:2.5px;
  width:5px; height:10px; border-right:2px solid var(--chalk); border-bottom:2px solid var(--chalk);
  transform:rotate(45deg) scale(0); transform-origin:center;
  transition:transform .22s var(--ease);
}
.check input:checked + .check__box{ background:var(--amber); border-color:var(--amber); }
.check input:checked + .check__box::after{ transform:rotate(45deg) scale(1); }
.check:hover .check__box{ border-color:var(--amber); }
.check input:focus-visible + .check__box{ outline:3px solid var(--amber); outline-offset:2px; }

.btn__spin{
  width:17px; height:17px; border-radius:50%; display:none;
  border:2px solid rgba(30,58,52,.28); border-top-color:var(--chalk);
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn.is-loading{ pointer-events:none; opacity:.85; }
.btn.is-loading .btn__spin{ display:block; }

.form__note{ margin:.95rem 0 0; font-size:.8rem; color:var(--muted); line-height:1.55; }

.form__success{
  margin-top:1.1rem; padding:1.1rem 1.2rem; display:flex; align-items:center; gap:.9rem;
  background:#F1F7F2; border:1px solid #BFDCC6; border-radius:10px;
  animation:slideIn .34s var(--ease);
}
.form__success p{ margin:0; font-size:.94rem; }
.tick{ flex:none; }
.tick__circle{ stroke:var(--room); stroke-width:2.5; stroke-dasharray:151; stroke-dashoffset:151; animation:draw .55s var(--ease) forwards; }
.tick__check{ stroke:var(--room); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:draw .35s var(--ease) .45s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ---------- Foundation ---------- */
.foundation{ text-align:center; }
.foundation p{ max-width:62ch; margin-inline:auto; }
.pill{
  display:inline-block; margin-top:.4rem;
  background:rgba(30,58,52,.08); border:1px dashed rgba(30,58,52,.3);
  color:var(--chalk); border-radius:999px; padding:.45rem 1.05rem;
  font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}

/* ---------- Footer ---------- */
.footer{ background:var(--chalk); color:#BBD0C8; padding-block:clamp(2.75rem,6vw,4.25rem) 1.75rem; }
.footer__grid{
  display:grid; gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr) minmax(0,1.2fr);
}
.brand__name--footer{ font-size:1.18rem; color:#fff; display:block; margin-bottom:.6rem; }
.footer__tag{ max-width:38ch; font-size:.92rem; }
.footer__addr{ font-style:normal; font-size:.9rem; line-height:1.75; margin-top:1rem; }
.footer__h{ font-family:var(--sans); font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin:0 0 .9rem; }
.footer__nav ul{ display:grid; gap:.5rem; }
.footer a{ color:#BBD0C8; text-decoration:none; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.footer a:hover{ color:#fff; border-bottom-color:var(--amber); }
.footer__note p{ font-size:.83rem; line-height:1.65; color:#9DB8AE; }
.footer__base{
  margin-top:clamp(2rem,4vw,3rem); padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font-size:.82rem; color:#9DB8AE;
}
.footer__base p{ margin:0; }

/* ==========================================================================
   Scroll reveals. Deliberately quiet: a short fade with almost no travel,
   so content settles rather than performs. Content is visible by default;
   the hidden state only applies once JS can also observe it.
   ========================================================================== */
.js-reveal .reveal,
.js-reveal .reveal-card{ opacity:0; transform:translateY(10px); }
.js-reveal .reveal.is-in,
.js-reveal .reveal-card.is-in{
  opacity:1; transform:none;
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
}


/* ==========================================================================
   Micro-interaction polish
   ========================================================================== */


/* Anchor targets get a brief gold flash so a jump is legible. */
@keyframes tgtFlash{
  0%{ box-shadow:inset 0 0 0 0 rgba(242,166,90,0); }
  25%{ box-shadow:inset 0 3px 0 0 var(--amber); }
  100%{ box-shadow:inset 0 0 0 0 rgba(242,166,90,0); }
}
section:target{ animation:tgtFlash 1.4s var(--ease); }

/* Service card icons rotate very slightly with the lift. */
.card:hover .card__icon svg{ transform:scale(1.06); }
.card__icon svg{ transition:transform .3s var(--ease); }

/* Stat tiles warm on hover, hinting they are meaningful figures. */
.stat,.jobs li{ transition:background .3s var(--ease); }
.stat:hover,.jobs li:hover{ background:#26463E; }

/* Ticks draw themselves in as their block reveals. */
.js-reveal .ticks li::before{
  opacity:0; transform:rotate(-45deg) scale(.6);
  transition:opacity .3s var(--ease), transform .35s var(--ease);
}
.js-reveal .is-in .ticks li::before{ opacity:1; transform:rotate(-45deg) scale(1); }
.js-reveal .is-in .ticks li:nth-child(1)::before{ transition-delay:.10s; }
.js-reveal .is-in .ticks li:nth-child(2)::before{ transition-delay:.16s; }
.js-reveal .is-in .ticks li:nth-child(3)::before{ transition-delay:.22s; }
.js-reveal .is-in .ticks li:nth-child(4)::before{ transition-delay:.28s; }
.js-reveal .is-in .ticks li:nth-child(5)::before{ transition-delay:.34s; }
.js-reveal .is-in .ticks li:nth-child(6)::before{ transition-delay:.40s; }
.js-reveal .is-in .ticks li:nth-child(7)::before{ transition-delay:.46s; }

/* Path numbers pop in sequence as the timeline reveals. */
.js-reveal .path__step .path__num{ transform:scale(.7); opacity:0; }
.js-reveal .path__step.is-in .path__num{ transform:none; opacity:1; }
.js-reveal .path__step:nth-child(1).is-in .path__num{ transition-delay:.05s; }
.js-reveal .path__step:nth-child(2).is-in .path__num{ transition-delay:.13s; }
.js-reveal .path__step:nth-child(3).is-in .path__num{ transition-delay:.21s; }
.js-reveal .path__step:nth-child(4).is-in .path__num{ transition-delay:.29s; }
.js-reveal .path__step:nth-child(5).is-in .path__num{ transition-delay:.37s; }
.js-reveal .path__step:nth-child(6).is-in .path__num{ transition-delay:.45s; }
.js-reveal .path__step:nth-child(7).is-in .path__num{ transition-delay:.53s; }

/* Chips and place pills lift in a gentle wave on hover of the group. */
.chips li,.places li,.coverage__list li{ will-change:transform; }

/* Links in prose get an underline that grows from the left. */
.contact__details a,.footer a{ background-image:linear-gradient(var(--amber),var(--amber));
  background-size:0% 1.5px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .3s var(--ease), color .2s var(--ease); }
.contact__details a:hover,.footer a:hover{ background-size:100% 1.5px; }


/* ---------- Responsive ---------- */
@media (max-width:1080px){

  .path{ grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:1.9rem; }
  .path::before{ display:none; }
}

@media (max-width:960px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__figure{ order:-1; }
  .hero__figure .frame{ aspect-ratio:16/9; }
  .split,.split--reverse{ grid-template-columns:1fr; }
  .split--reverse .split__media{ order:0; }
  .contact{ grid-template-columns:1fr; }
  .area{ grid-template-columns:1fr; }
  .quote{ grid-template-columns:1fr; text-align:center; }
  .quote__fig{ width:auto; }
  .quote__mark{ position:static; display:block; margin-bottom:-.5rem; }
  .invest{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1/-1; }
}

@media (max-width:1080px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:62px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ivory); border-bottom:1px solid var(--line);
    padding:.5rem var(--gutter) 1.25rem;
    box-shadow:var(--shadow-lg);
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
    max-height:calc(100dvh - 62px); overflow-y:auto;
  }
  .nav.is-open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .nav__list{ flex-direction:column; gap:0; }
  /* The drop-down panel is ivory, but the nav links are coloured for the dark
     header bar — near-white type with a dark text-shadow. Left as-is that is
     #EFEDE5 on #FAF7F0, about 1.1:1: the menu looked empty. Re-colour for the
     light ground and drop the shadow. */
  .nav__list a{
    padding:.95rem 0; border-bottom:1px solid var(--line); width:100%;
    color:var(--chalk); text-shadow:none; font-weight:600;
    display:flex; align-items:center; min-height:44px;
  }
  .nav__list a:hover{ background:rgba(30,58,52,.06); color:var(--chalk-deep); }
  .nav__list a.is-current{
    background:none; color:var(--amber-text);
    border-bottom-color:var(--amber); text-shadow:none;
  }
  .nav__cta{ margin-top:1rem; width:100%; }
  .stage__cta .btn{ width:100%; }
  .checks{ grid-template-columns:1fr; }
  .form__row--2{ grid-template-columns:1fr; }
  .compare__viewport{ aspect-ratio:4/3; }
  .quotes{ grid-template-columns:1fr; }
  .quotes__nav{ display:none; }
  .gal__row{ --cols:2 !important; }
  .gal__row--pair,.gal__row--feature{ --cols:1 !important; }
  .path{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .jobs{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
}

@media (max-width:420px){
  .stats{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Mobile refinements
   Three stacked identity blocks — Foundation, Coming Soon, First Family and
   Child Services — cost 323px on a 390px-wide phone, 38% of the screen,
   before any content. The order is deliberate and stays; what changes is how
   much room each block takes.
   ========================================================================== */
@media (max-width:1080px){
  /* Tighten the Foundation bar: the logo carries the name, so the type
     beneath it can be smaller and closer without losing anything. */
  .orgbar__inner{ padding-block:.6rem .65rem; gap:.2rem; }
  .orgbar__logo{ height:clamp(38px,10vw,48px); }
  .orgbar__status{ font-size:.68rem; letter-spacing:.04em; line-height:1.35; }
  .orgbar__with{ font-size:.79rem; line-height:1.45; max-width:38ch; }

  /* The banner is one line of status, not a paragraph. */
  .banner__inner{ padding-block:.5rem; gap:.5rem; }
  .banner__lead{ font-size:.78rem; }
  .banner__sub{ font-size:.76rem; }

  /* Tap targets: the spec floor is 44px. The nav toggle and the brand plate
     are the two controls a thumb reaches for first. */
  .nav-toggle{ min-width:44px; min-height:44px; }

  /* The toggle inherited `color:var(--chalk)` from the desktop rule, which was
     written when the bar was light. On the dark green bar that put the bars at
     #1E3A34 over a #253529 composite — 1.05:1, so the control was effectively
     invisible. Gold reads clearly against the bar and matches the CTA.
     6.38:1 over the bar, 5.49:1 over the brightest part of the hero. */
  .nav-toggle{
    color:var(--amber);
    border-color:rgba(242,166,90,.45);
    background:rgba(242,166,90,.10);
  }
  .nav-toggle:hover{
    border-color:rgba(242,166,90,.7);
    background:rgba(242,166,90,.18);
  }
  .nav-toggle:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }
  /* Open state: the bars become an X over the ivory panel below, so the button
     sits on the panel's ground rather than the bar's. */
  .nav-toggle[aria-expanded="true"]{
    color:var(--chalk);
    border-color:var(--line);
    background:var(--ivory);
  }

  /* The full descriptor wraps to two lines and has to shrink to fit. The
     shortened form holds one line at a readable size — the full wording is
     still in the footer and the shared-mission card. */
  .brand__tag{ font-size:.55rem; letter-spacing:.05em; }
  .brand__tag .brand__tag-long{ display:none; }
  .brand__tag .brand__tag-short{ display:inline; }
  /* Compact artwork (no subheading) — its cap-height is ~2.4x the full
     lockup's at the same box height, so the box itself can be smaller. */
  .brand__logo{ height:clamp(24px,6.2vw,30px); }
  .brand{ min-height:44px; align-items:center; }

  /* Carousel dots were 8px tall — far below a comfortable thumb target. The
     visible pill stays slim; an invisible pad around it does the catching. */
  .quotes__dots{ gap:.15rem; }
  .quotes__dot{
    height:44px; width:44px; background:none; border-radius:0;
    display:grid; place-items:center; position:relative;
  }
  .quotes__dot::after{
    content:""; display:block; width:26px; height:8px; border-radius:99px;
    background:var(--terrazzo); transition:background .28s var(--ease), width .28s var(--ease);
  }
  .quotes__dot.is-active{ width:44px; background:none; }
  .quotes__dot.is-active::after{ background:var(--chalk); width:34px; }
  .quotes__dot:hover{ background:none; }
  .quotes__dot:hover::after{ background:var(--amber); }

  /* Inline links inside body copy sit in a run of text, so they cannot be
     padded to 44px without breaking the line. Give them a larger hit area
     vertically instead, which is where a thumb usually misses. */
  .svc__link, .section__more a, .footer__nav a{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .footer__nav li{ line-height:1.2; }

  /* Phone and email are how a parent actually makes contact from a phone,
     so they get full-size targets wherever they appear. */
  .footer__addr a, .contact__details a, address a{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .footer__base a{ display:inline-flex; align-items:center; min-height:44px; }
  /* This link sits mid-sentence, so it cannot become a block without breaking
     the paragraph. Extra vertical padding widens the hit area in place. */
  .footer__note p a{ padding-block:.5rem; }

  /* The hero's scroll cue is decorative and duplicated by the page itself;
     it needs no thumb target, but keep it from being a stray 18px hit. */
  .stage__scroll{ min-height:44px; display:inline-flex; align-items:center; }

  /* The governance disclosure is a primary control on a phone. */
  .gov__summary{ min-height:56px; }
  .gov__link{ font-size:1.08rem; }

  /* The headline's three lines are separate .line spans, each clipped for the
     staggered reveal — so wrapping happens INSIDE a span and strands a word on
     its own row. text-wrap can't help across spans; the type simply has to be
     small enough that the longest line ("early learning and") fits. */
  .stage__title{ font-size:clamp(1.75rem,1rem + 4.6vw,2.4rem); }
  .stage__title .line{ text-wrap:nowrap; }
  .stage__panel{ padding:clamp(1.25rem,4.5vw,1.6rem); }

  /* Page heroes: the taller desktop height would swallow a phone screen. */
  .phero{
    min-height:clamp(300px,44vh,380px);
    padding-block:clamp(3rem,9vw,4rem) clamp(3.25rem,10vw,4.5rem);
  }
}

/* Very small phones: the Foundation tagline is the first thing to give. */
@media (max-width:380px){
  .orgbar__with{ font-size:.76rem; }
  .orgbar__status{ font-size:.65rem; }
  .banner__sub{ font-size:.73rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js-reveal .reveal,
  .js-reveal .reveal-card{ opacity:1 !important; transform:none !important; }
  .frame img,.card:hover .card__media img{ transform:none !important; }
  /* New components: never leave anything scaled down or invisible. */
  .js-reveal .ticks li::before{ opacity:1 !important; transform:rotate(-45deg) !important; }
  .js-reveal .path__step .path__num{ opacity:1 !important; transform:none !important; }
  .invest__bar i{ transform:scaleX(1) !important; }
  .gal__btn:hover img,.gal__btn:hover{ transform:none !important; }
  .gal__zoom{ opacity:1; transform:none; }
  section:target{ animation:none; }
  .lb__backdrop,.lb__dialog{ animation:none; }
  .map__home-halo{ animation:none; }
  .soon__pulse{ animation:none; }
  .quote{ opacity:1 !important; }
}

/* ---------- Print ---------- */
@media print{
  .site-header,.nav,.compare__handle,.compare__hint,.btn{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding-block:1.5rem; break-inside:avoid; }
}


/* ==========================================================================
   Org bar — the Foundation leads the header
   The Foundation is the 501(c)(3) and the primary organization, so its mark
   and status sit above the site navigation on every page. Its logo is green
   and orange rather than navy and gold, so it is given a cream plate: the
   mark reads as its own identity instead of clashing with the page palette.
   ========================================================================== */
.orgbar{
  background:linear-gradient(180deg,var(--ivory) 0%,var(--ivory-alt) 100%);
  border-bottom:1px solid rgba(30,58,52,.1);
}
.orgbar__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:clamp(.85rem,1.6vw,1.15rem) var(--gutter);
  display:flex; flex-direction:column; align-items:center;
  gap:.3rem; text-align:center;
}
.orgbar__brand{ display:inline-block; text-decoration:none; border-radius:var(--radius-sm); }
.orgbar__logo{
  display:block; width:auto;
  height:clamp(52px,6.2vw,74px);
}
.orgbar__status{
  margin:.1rem 0 0; font-size:clamp(.74rem,.7rem + .17vw,.83rem);
  font-weight:700; letter-spacing:.055em; text-transform:uppercase;
  color:var(--amber-text);
}
.orgbar__with{
  margin:0; max-width:56ch; text-wrap:balance;
  font-size:clamp(.82rem,.79rem + .15vw,.9rem);
  line-height:1.5; color:var(--muted);
}
.orgbar__partner{ color:var(--chalk); font-weight:650; }

/* The org bar is a sibling of <header>; the header keeps the sticky rule
   defined earlier in this file. */

/* ==========================================================================
   Union — the two organizations meeting
   ========================================================================== */
.union{
  display:grid; align-items:stretch;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(1rem,2.4vw,2rem);
  margin-top:clamp(1.75rem,4vw,2.75rem);
}
.union__side{
  display:flex; flex-direction:column; align-self:stretch;
  background:var(--ivory);
  border:1px solid rgba(30,58,52,.1);
  border-radius:var(--radius);
  padding:clamp(1.35rem,2.6vw,1.9rem);
  box-shadow:var(--shadow-sm);
  text-align:center;
}
/* The two marks have very different proportions — the Foundation lockup is
   about 3.4:1, the FFCS one about 7.8:1 — so matching their heights would
   make the FFCS mark dominate. Each sits in a well of the same height and is
   sized to occupy a similar visual area instead. */
.union__well{
  display:grid; place-items:center;
  min-height:clamp(64px,7.4vw,88px);
  margin-bottom:clamp(.9rem,1.8vw,1.15rem);
}
.union__logo{ display:block; width:auto; max-width:100%; }
.union__side--a .union__logo{ height:clamp(52px,6vw,72px); }
.union__side--b .union__logo{ height:clamp(30px,3.4vw,40px); }
.union__role{
  margin:0 0 .5rem; font-size:.74rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--amber-text);
}
.union__desc{
  margin:0 auto; font-size:.92rem; line-height:1.62; color:var(--muted-deep);
  max-width:34ch;
}

.union__join{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--chalk); align-self:stretch; justify-content:center;
}
.union__line{
  flex:1 1 auto; width:2px; min-height:22px; border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(242,166,90,.55),transparent);
}
.union__node{
  display:grid; place-items:center;
  width:clamp(44px,5vw,54px); aspect-ratio:1; border-radius:50%;
  background:var(--chalk); color:var(--amber-soft);
  box-shadow:0 8px 20px rgba(30,58,52,.22);
  flex:none;
}

.union__foot{
  margin:clamp(1.4rem,3vw,2rem) auto 0; max-width:60ch;
  text-align:center; font-size:.95rem; line-height:1.66; color:var(--muted-deep);
}

@media (max-width:860px){
  .union{ grid-template-columns:1fr; }
  .union__join{ flex-direction:row; align-self:center; }
  .union__line{ width:auto; height:2px; min-height:0; min-width:28px;
    background:linear-gradient(90deg,transparent,rgba(242,166,90,.55),transparent); }
}

/* ==========================================================================
   Governance — a disclosure, so the statement is one click from any page
   ========================================================================== */
.gov{
  background:var(--ivory);
  border:1px solid rgba(30,58,52,.12);
  border-left:3px solid var(--amber);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.gov__summary{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding:clamp(1.1rem,2.2vw,1.45rem) clamp(1.2rem,2.6vw,1.75rem);
  cursor:pointer; list-style:none;
  border-radius:calc(var(--radius) - 1px);
}
.gov__summary::-webkit-details-marker{ display:none; }
.gov__link{
  font-family:var(--serif);
  font-size:clamp(1.12rem,1rem + .5vw,1.4rem);
  color:var(--chalk); font-weight:600;
  text-decoration:underline; text-decoration-color:rgba(242,166,90,.6);
  text-underline-offset:4px; text-decoration-thickness:2px;
}
.gov__summary:hover .gov__link{ text-decoration-color:var(--amber); }
.gov__hint{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.82rem; font-weight:650; color:var(--muted);
}
.gov__chev{ transition:transform .25s var(--ease); }
.gov__hint-close{ display:none; }
.gov[open] .gov__hint-open{ display:none; }
.gov[open] .gov__hint-close{ display:inline; }
.gov[open] .gov__chev{ transform:rotate(180deg); }
.gov__body{
  padding:0 clamp(1.2rem,2.6vw,1.75rem) clamp(1.3rem,2.6vw,1.75rem);
  border-top:1px solid rgba(30,58,52,.1);
  margin-top:-.2rem; padding-top:1.15rem;
}
.gov__body p{
  margin:0 0 .95rem; font-size:.93rem; line-height:1.72; color:var(--muted-deep);
  max-width:74ch;
}
.gov__body p:last-child{ margin-bottom:0; }
.gov__summary:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }

/* ---------- Foundation block: the mark above the heading ---------- */
.foundation__logo{
  display:block; margin:0 auto 1.1rem; width:auto;
  height:clamp(48px,5.6vw,66px);
}

/* ---------- Footer: the Foundation mark, reversed out ---------- */
.footer__logo{
  display:block; width:auto; height:clamp(40px,4.8vw,54px);
  margin-bottom:.85rem;
  /* The mark is dark-on-transparent, so on the navy footer it is given a
     cream plate rather than being recoloured — the logo keeps its own
     colours and stays legible. */
  background:var(--ivory);
  padding:.6rem .85rem; border-radius:var(--radius-sm);
  box-sizing:content-box;
}
.footer__status{
  margin:0 0 .6rem; font-size:.76rem; font-weight:700;
  letter-spacing:.055em; text-transform:uppercase; color:var(--amber-soft);
}