/* ============================================================
   J&E HOMES · shared stylesheet (site.css)
   Navy-gold cinematic editorial · Instrument Serif + Figtree
   Loaded by every page. Homepage + reusable subpage components.
   ============================================================ */

/* Fonts are self-hosted, like GSAP and intl-tel-input. The Google Fonts <link>
   was a render-blocking stylesheet on one third-party origin whose font files
   then came from a second, so first paint waited on two DNS+TLS handshakes
   before a single glyph could be requested.
   Figtree is a VARIABLE font: Google serves the same file for every weight, so
   asking for 400/500/600/700 as separate URLs made the browser fetch identical
   bytes four times. One file, one weight range. */
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;
  src:url("assets/fonts/figtree-var.woff2") format("woff2")}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/instrument-serif-400.woff2") format("woff2")}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url("assets/fonts/instrument-serif-400-italic.woff2") format("woff2")}
:root{
  --ivory:#F6F2EA; --ivory-raised:#FBF8F2; --ivory-sunk:#EFE8DB;
  --navy:#031440;  --navy-2:#08215E; --heritage:#2D405E;
  --warm-dark:16,14,12;               /* warm charcoal for cinematic scrims (less blue) */
  --gold:#E8D4A9;  --gold-hi:#F2E4C4;
  /* Bronze carries every micro-label on the site. At #8A6D2F it measured
     4.00:1 on ivory-sunk and 4.36:1 on ivory, so all 15 .cap chips and role
     meta lines failed AA. One step deeper clears it everywhere (4.88:1 on the
     worst ground) and reads as the same bronze. */
  --bronze:#7A6029;
  --soft-blue:#E9F0F8; --soft-gold:#F4ECD8; --glow-blue:#3F62B3;
  --ink:#1C2536;   --ink-muted:#5A6377;
  --on-navy:#F6F2EA; --on-navy-muted:#BAC1CF;
  --line:#E4DBCA; --line-strong:#D3C7AE;

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --fs-display:clamp(2.8rem,6vw,5.4rem);
  --fs-h1:clamp(2.2rem,4.2vw,3.6rem);
  --fs-h2:clamp(1.85rem,3.1vw,2.8rem);
  --fs-h3:clamp(1.3rem,1.9vw,1.7rem);
  --fs-lead:clamp(.98rem,1vw,1.06rem);
  --fs-body:1.0625rem;
  --fs-cap:.68rem;

  --wrap:1240px; --wrap-narrow:940px; --edge:clamp(1.25rem,6vw,96px);
  --r-btn:10px; --r-sm:8px; --r-md:14px; --r-lg:22px;
  --sh-1:0 1px 2px rgba(3,20,64,.06);
  --sh-2:0 14px 34px -16px rgba(3,20,64,.20);
  --sh-3:0 34px 70px -28px rgba(3,20,64,.34);

  --pad-tight:clamp(3rem,6vw,4.5rem);
  --pad-base:clamp(4.5rem,9vw,8rem);
  --pad-editorial:clamp(6rem,12vw,11rem);
}
*{box-sizing:border-box}
html{scrollbar-color:var(--heritage) var(--ivory-sunk);scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* clip, NOT hidden. overflow-x:hidden turns body into a scroll container,
     and in iOS Safari that stops position:sticky working for its descendants,
     so the sticky hero would scroll away mid-sequence and show its own bottom
     edge. overflow:clip does the same clipping without the scroll container.
     Nothing on either page actually overflows, so older engines that ignore
     `clip` lose nothing. */
  overflow-x:clip}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;
  letter-spacing:-.01em;color:var(--navy);margin:0}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
em,.i{font-style:italic}
::selection{background:var(--navy);color:var(--gold)}
::-webkit-scrollbar{width:13px}
::-webkit-scrollbar-track{background:var(--ivory-sunk)}
::-webkit-scrollbar-thumb{background:var(--heritage);border-radius:999px;border:3px solid var(--ivory-sunk)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,.hero :focus-visible,.page-hero :focus-visible,.foot :focus-visible{outline-color:var(--gold)}
input,textarea,select{caret-color:var(--bronze);font-family:inherit}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.narrow{max-width:var(--wrap-narrow)}

/* caption chips */
.cap{display:inline-block;font:500 var(--fs-cap)/1 var(--sans);text-transform:uppercase;
  letter-spacing:.15em;color:var(--bronze);border:1px solid var(--line-strong);
  border-radius:7px;padding:.4rem .65rem}
.on-dark .cap,.cap.on-dark{color:var(--gold);border-color:rgba(232,212,169,.45)}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-muted)}
.measure{max-width:62ch}

.skip{position:fixed;left:1rem;top:-100px;z-index:999;background:var(--navy);color:var(--on-navy);
  padding:.7rem 1.1rem;border-radius:var(--r-sm);transition:top .2s}
.skip:focus{top:1rem}
:target{scroll-margin-top:100px}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;
  font:600 .92rem/1 var(--sans);letter-spacing:.005em;
  padding:.85rem 1.4rem;border-radius:var(--r-btn);border:1px solid transparent;isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),background .35s,color .3s,border-color .3s,box-shadow .35s;
  white-space:nowrap}
.btn svg{width:16px;height:16px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--gold);color:var(--navy);box-shadow:var(--sh-1)}
.btn--primary::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:linear-gradient(90deg,var(--glow-blue),var(--gold) 26%,var(--gold-hi) 50%,var(--gold) 74%,var(--glow-blue));
  background-size:220% 100%;background-position:50% 0;opacity:0;filter:blur(8px);transition:opacity .45s ease}
.btn--primary:hover{transform:translateY(-2px);
  background:linear-gradient(100deg,var(--gold-hi),var(--gold) 55%,#EAD8B0);box-shadow:var(--sh-2)}
.btn--primary:hover::before{opacity:.8;animation:glow 3s linear infinite}
@keyframes glow{to{background-position:250% 0}}
.btn--outline{background:transparent;color:var(--navy);border-color:var(--line-strong)}
.btn--outline:hover{background:var(--navy);color:var(--on-navy);border-color:var(--navy);transform:translateY(-2px)}
.btn--ghost{background:rgba(246,242,234,.08);color:var(--on-navy);border-color:rgba(246,242,234,.4);backdrop-filter:blur(4px)}
.btn--ghost:hover{background:rgba(246,242,234,.16);border-color:var(--on-navy);transform:translateY(-2px)}
.tlink{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.92rem;color:var(--bronze);
  padding-bottom:2px;border-bottom:1px solid rgba(138,109,47,.4);transition:gap .25s,border-color .25s}
.tlink svg{width:15px;height:15px;transition:transform .3s}
.tlink:hover{gap:.75rem;border-color:var(--bronze)}
.on-dark .tlink{color:var(--gold);border-color:rgba(232,212,169,.4)}
.on-dark .tlink:hover{border-color:var(--gold)}

/* ---------- header ---------- */
/* Two items only now (logo + CTA), so flex rather than the old 3-col grid:
   with the nav removed a grid would collapse the CTA into the middle column. */
.siteheader{position:fixed;inset:0 0 auto 0;z-index:200;display:flex;
  align-items:center;justify-content:space-between;gap:1rem;
  padding:1.55rem clamp(1.25rem,4vw,2.5rem) 1.15rem;
  transition:background .35s ease,box-shadow .35s ease,padding .35s ease,border-color .35s;
  border-bottom:1px solid transparent}
/* At the top of the page the header has no ground of its own, so the white
   logo sat straight on open sky: 1.6:1 on a phone, 2.6:1 on desktop. A short
   gradient band gives it one, and clears the moment the solid header takes
   over.
   --band is ramped up by the hero sequence: while the hero scrim is up it is
   only topping up an already dark ground, but once that scrim clears for the
   clean-photo beat the band is all the logo has, and on a desktop crop the
   sky behind it is bright enough to drop it to 2.4:1. */
.siteheader{--band:.50}
.siteheader::before{content:"";position:absolute;inset:0 0 auto 0;height:180%;z-index:-1;
  pointer-events:none;transition:opacity .35s ease;
  background:linear-gradient(to bottom,
    rgb(3 20 64 / calc(var(--band) * 100%)) 0%,
    rgb(3 20 64 / calc(var(--band) * 62%)) 42%,
    rgb(3 20 64 / 0%) 100%)}
.siteheader.solid::before,.siteheader.static-solid::before{opacity:0}
.siteheader.solid{background:rgba(246,242,234,.92);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:var(--sh-1);border-bottom-color:var(--line);padding-top:1rem;padding-bottom:.85rem}
/* page variant: header starts solid (for pages without a dark hero behind it) */
.siteheader.static-solid{background:rgba(246,242,234,.92);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:var(--sh-1);border-bottom-color:var(--line)}
.brand{justify-self:start;display:inline-flex;align-items:center;line-height:0;
  filter:drop-shadow(0 1px 10px rgba(0,0,0,.28))}
.siteheader.solid .brand,.siteheader.static-solid .brand{filter:none}
.brand img{height:32px;width:auto;transition:height .35s}
.siteheader.solid .brand img{height:29px}
.brand .logo-dark{display:block} .brand .logo-light{display:none}
.siteheader.solid .brand .logo-dark,.siteheader.static-solid .brand .logo-dark{display:none}
.siteheader.solid .brand .logo-light,.siteheader.static-solid .brand .logo-light{display:block}
.nav{justify-self:center;display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav>li>a,.nav .has-menu>button{position:relative;font:500 .85rem/1 var(--sans);color:var(--on-navy);
  background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;
  padding:.55rem .8rem;border-radius:var(--r-sm);transition:color .3s;
  text-shadow:0 1px 8px rgba(0,0,0,.25)}
.siteheader.solid .nav>li>a,.siteheader.solid .nav .has-menu>button,
.siteheader.static-solid .nav>li>a,.siteheader.static-solid .nav .has-menu>button{color:var(--ink);text-shadow:none}
.nav>li>a[aria-current="page"]{color:var(--gold)}
.siteheader.solid .nav>li>a[aria-current="page"],
.siteheader.static-solid .nav>li>a[aria-current="page"]{color:var(--bronze)}
.nav>li>a::after,.nav .has-menu>button::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.32rem;
  height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;opacity:.6;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nav>li>a:hover::after,.nav .has-menu:hover>button::after,.nav>li>a[aria-current="page"]::after{transform:scaleX(1)}
.caret{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .3s}
.has-menu{position:relative}
.has-menu:hover .caret,.has-menu:focus-within .caret{transform:rotate(180deg)}
.header-right{justify-self:end;display:flex;align-items:center;gap:.6rem}
.header-right .btn{padding:.68rem 1.1rem;font-size:.85rem}

.menu{position:absolute;top:calc(100% + 14px);left:0;list-style:none;margin:0;padding:.5rem;
  min-width:262px;max-width:calc(100vw - 32px);
  background:var(--ivory-raised);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translate(var(--mx,0),-8px);
  transition:opacity .22s ease,visibility .22s ease,transform .22s ease;z-index:60}
.has-menu.right .menu{left:auto;right:0}
.menu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.has-menu:hover .menu,.has-menu:focus-within .menu{opacity:1;visibility:visible;transform:translate(var(--mx,0),0)}
.menu a{display:block;padding:.6rem .8rem;border-radius:var(--r-sm);transition:background .2s}
.menu a:hover{background:var(--ivory-sunk)}
.menu .ml{display:block;font-weight:600;font-size:.92rem;color:var(--navy);line-height:1.2}
.menu .md{display:block;font-size:.78rem;color:var(--ink-muted);margin-top:.15rem}

.nav-scrim{position:fixed;inset:0;z-index:150;pointer-events:none;
  background:rgba(3,20,64,.12);backdrop-filter:blur(5px);opacity:0;transition:opacity .3s}
body.nav-open .nav-scrim{opacity:1}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem;color:var(--on-navy)}
.siteheader.solid .nav-toggle,.siteheader.static-solid .nav-toggle{color:var(--navy)}
.nav-toggle svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7}

/* ---------- homepage hero ---------- */
/* 100vh, not 110: anything taller pushes the CTAs under the fold once browser
   chrome and the taskbar take their cut. svh keeps mobile honest too.
   The bottom padding below is viewport-based, so it is unchanged by this. */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;
  color:var(--on-navy);overflow:hidden;isolation:isolate;--scrim:1}
/* Navy sits under the photo on every full-bleed surface. The copy over these
   is white, so if an image is slow, blocked, or the format is unsupported, the
   text still lands on a legible ground instead of the ivory page. */
.hero-media{position:absolute;inset:0;z-index:-2;will-change:opacity,transform;
  background:var(--navy) url("assets/hero-2000.webp") center 58%/cover no-repeat}
@media(max-width:700px){.hero-media{background-image:url("assets/hero-1100.webp")}}

/* ---- hero scroll sequence ----
   Three beats on one scroll track: the copy and its scrim clear so the
   building can be seen properly, the photo holds on its own, then it
   dissolves into the ivory of the next section.
   Sticky, not a ScrollTrigger pin: a pin rebuilds its spacer whenever the
   mobile URL bar changes the viewport height, and that lands as a jump in the
   middle of the sequence. Everything is gated on .anim, which is present only
   when GSAP is actually driving, so with no JS or reduced motion the stage is
   an inert wrapper and the hero is an ordinary full-screen section. */
.hero-stage{position:relative}
/* The negative margin pulls the next section up so it is already climbing the
   viewport while the photo is still dissolving, and the two cross over. Without
   it the photo faded to an empty ivory screen and the page read as finished.
   The number is set against the intro's HEADLINE, not its box: the section
   opens with up to 11rem of padding, so matching the box edge still left a
   near-empty screen. -62vh brings the headline into the viewport at roughly
   15% transparency and has it sitting comfortably in frame by the time the
   photo is gone. The sticky hero is given an explicit z-index so it always
   paints over that incoming section rather than under it. */
.anim .hero-stage{height:220vh;margin-bottom:-62vh}
/* dvh, not svh. svh is the viewport with the mobile URL bar SHOWING, so once
   the bar collapses the sticky hero is shorter than the screen and its bottom
   edge appears as a seam with the page showing under it. dvh tracks the live
   viewport, so the hero always reaches the bottom. svh first for engines
   without dvh. */
.anim .hero{position:sticky;top:0;height:100svh;height:100dvh;z-index:1;pointer-events:none}
/* the hero box still covers the incoming section while it climbs, so let
   pointers through it; only the copy itself needs to be hittable, and that is
   visibility:hidden by the time the next section is showing */
.anim .hero-content{pointer-events:auto}
/* The daylight hero is bright, so the copy needs a scrim to stay legible.
   Stops are in PIXELS, not percentages. The copy is bottom-anchored, so it
   always lands ~515-535px above the hero base whatever the screen; expressed
   in percentages that same band was 57% up on a desktop but 81% up on a short
   phone, which pushed the text clean out of the gradient. Percentages tracked
   the viewport. Pixels track the text. */
/* The scrim clears ahead of the photo, so the building is seen without the
   navy wash over it. --scrim is driven by the sequence timeline; it stays at 1
   when there is no motion. */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:var(--scrim);
  background:linear-gradient(to top,
      rgba(3,20,64,.82) 0,
      rgba(3,20,64,.74) 140px,
      rgba(3,20,64,.62) 340px,
      rgba(3,20,64,.52) 520px,
      rgba(3,20,64,.24) 700px,
      rgba(3,20,64,0) 840px),
    linear-gradient(to right,rgba(3,20,64,.52) 0%,rgba(3,20,64,.14) 48%,rgba(3,20,64,0) 70%)}
/* The copy leaves first, and GSAP drives it with autoAlpha so it also goes
   visibility:hidden at zero. Plain opacity would leave the two CTAs clickable
   and focusable while invisible over the photo. */
.hero-content{width:100%;max-width:820px;
  padding:0 var(--edge) clamp(6.5rem,13vh,9rem)}
/* Filled rather than outlined: a light chip on open sky cannot carry its own
   contrast, and this one sits highest in the hero where the scrim is thinnest.
   .74 rather than .62 because the sky directly behind it reaches near-white on
   some crops, and gold on a thin navy wash only reached 3.55:1 there. */
.hero .cap{margin-bottom:1.4rem;background:rgba(3,20,64,.74);
  backdrop-filter:blur(6px);border-color:rgba(232,212,169,.5)}
.hero h1{color:#fff;font-size:var(--fs-display);line-height:1.02;max-width:15ch;
  text-shadow:0 2px 30px rgba(0,0,0,.4),0 1px 4px rgba(0,0,0,.3)}
.hero h1 em{color:var(--gold)}
/* Legibility comes from the scrim plus a tight shadow, not from bolding:
   the client asked for bold, but weight fights the Figtree/serif pairing and
   still fails over a bright sky. Contrast does the job without it. */
.hero p.sub{margin-top:1.4rem;max-width:52ch;font-size:clamp(.98rem,1vw,1.05rem);color:#FBF9F5;
  line-height:1.55;
  text-shadow:0 1px 2px rgba(3,20,64,.55),0 2px 14px rgba(3,20,64,.65),0 0 34px rgba(3,20,64,.45)}
.hero .cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.1rem}

/* Launch line. No container and no marker dot: one line of display serif,
   sitting under the CTAs. With nothing behind it the type carries its own
   separation from the photograph, so it gets a soft navy shadow. That shadow is
   legibility insurance only; the contrast claim is measured against the
   brightest pixel actually behind the glyphs. */
.hero-launch{margin:2.3rem 0 0;
  font:400 clamp(1.52rem,2.36vw,1.82rem)/1.15 var(--serif);
  color:var(--gold);letter-spacing:.012em;
  text-shadow:0 1px 3px rgba(3,20,64,.7),0 1px 14px rgba(3,20,64,.9),
    0 2px 28px rgba(3,20,64,.65)}
/* Same 560px breakpoint that makes the hero buttons full width, so the marker
   centres under them rather than hanging off the left edge of a centred stack. */
@media(max-width:560px){
  /* centred under the full-width buttons; a plain block of text, so
     text-align does the job */
  .hero-launch{text-align:center;margin-top:2.1rem}
}

/* ---------- intro ---------- */
.intro{padding:var(--pad-editorial) 0 var(--pad-base)}
.intro h2{font-size:clamp(2rem,3.7vw,3.3rem);line-height:1.1;max-width:24ch}
.intro .sub{margin-top:1.5rem;max-width:54ch;font-size:var(--fs-lead);color:var(--ink-muted)}

/* ---------- assurance trio ---------- */
.assur{padding:0 0 var(--pad-base)}
/* Four cards since "A New Home" joined the set. Four across only holds above
   1100px; below that they go 2x2 rather than squeezing to ~190px each, and
   stack on a phone. */
.assur-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem)}
@media(max-width:1100px){.assur-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.assur-grid{grid-template-columns:1fr}}
.assur-card{background:var(--ivory-raised);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(1.6rem,2.5vw,2.1rem);box-shadow:var(--sh-1);transition:transform .3s,box-shadow .3s}
.assur-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.assur-card .ic{display:flex;width:46px;height:46px;align-items:center;justify-content:center;
  border-radius:12px;background:var(--navy);color:var(--gold);margin-bottom:1.1rem}
.assur-card .ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.assur-card h3{font-size:1.4rem;margin-bottom:.4rem}
.assur-card p{color:var(--ink-muted);font-size:.95rem}

/* ---------- living rail ---------- */
.living{padding:var(--pad-base) 0;background:var(--ivory-sunk)}
.living .head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:2.4rem}
.living .head h2{max-width:16ch;margin-top:1rem}
.living .head .lead{max-width:44ch;margin-top:.7rem}
.rail{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.rail-track{display:flex;gap:1.4rem;width:max-content;animation:rail 56s linear infinite}
.rail:hover .rail-track{animation-play-state:paused}
@keyframes rail{from{transform:translateX(0)}to{transform:translateX(calc(-50% - .7rem))}}
.rcard{width:clamp(238px,25vw,310px);flex:0 0 auto}
.rcard .media{aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-2);position:relative}
.rcard .media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.rcard:hover .media img{transform:scale(1.06)}
.rcard h3{font-size:1.28rem;margin-top:1rem}
.rcard .meta{font:500 .72rem/1 var(--sans);text-transform:uppercase;letter-spacing:.13em;
  color:var(--bronze);margin-top:.4rem}

/* ---------- cinematic chapters ---------- */
.chapters{background:rgb(var(--warm-dark))}
.chapter{position:relative;min-height:80svh;display:flex;align-items:center;
  color:var(--on-navy);overflow:hidden;isolation:isolate}
.chapter .cmedia{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;will-change:transform}

/* Full-bleed artwork. These were inline styles pointing at the originals, one
   of which was 8256px wide behind a phone screen. Classes instead, so each one
   can serve a cut sized to the viewport. Navy underneath, since white copy
   sits on top. */
.cmedia,.ph-bg{background-color:var(--navy)}
/* The chapters sit several screens down, but a CSS background is not lazy: the
   browser fetches it as soon as the element renders, so all four were landing
   in the initial load. site.js adds .bg-on when they get close. Scoped to .js
   so that with scripting off they simply load as normal. */
.js .cmedia:not(.bg-on){background-image:none}
.bg-care{background-image:url("assets/chapter-care-2000.webp")}
.bg-living{background-image:url("assets/chapter-living-2000.webp")}
.bg-team{background-image:url("assets/chapter-team-2000.webp")}
.bg-wellbeing{background-image:url("assets/chapter-wellbeing-2000.webp")}
@media(max-width:700px){
  .bg-care{background-image:url("assets/chapter-care-1100.webp")}
  .bg-living{background-image:url("assets/chapter-living-1100.webp")}
  .bg-team{background-image:url("assets/chapter-team-1100.webp")}
  .bg-wellbeing{background-image:url("assets/chapter-wellbeing-1100.webp")}
}
.chapter .cveil{position:absolute;inset:0;z-index:-1}
.chapter:not(.right) .cveil{background:linear-gradient(90deg,rgba(var(--warm-dark),.9) 0%,rgba(var(--warm-dark),.6) 44%,rgba(var(--warm-dark),.08) 100%)}
.chapter.right .cveil{background:linear-gradient(270deg,rgba(var(--warm-dark),.9) 0%,rgba(var(--warm-dark),.6) 44%,rgba(var(--warm-dark),.08) 100%)}
.chapter .wrap{width:100%;padding-block:clamp(4rem,10vh,7rem)}
.chapter.right .cbox{margin-left:auto;text-align:right}
.chapter .cbox{max-width:33rem}
.chapter.right .cbox .tlink{margin-left:auto}
.chapter .cap{margin-bottom:1.2rem}
.chapter h2{color:#fff;font-size:clamp(2.1rem,4vw,3.3rem);line-height:1.06}
.chapter p{margin:1.1rem 0 1.7rem;color:#EDE7DC;font-size:clamp(.95rem,1vw,1.05rem);line-height:1.55}
.chapter.right p{margin-left:auto}

/* ---------- care + reassurance bento ---------- */
.bento-sec{padding:var(--pad-base) 0}
.bento-sec .head{max-width:34rem;margin-bottom:2.6rem}
.bento-sec .head h2{max-width:18ch;margin-top:1rem}
.bento-sec .head .lead{margin-top:1rem}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(158px,1fr);
  grid-auto-flow:row dense;gap:clamp(.85rem,1.4vw,1.2rem)}
.tile{position:relative;background:var(--ivory-raised);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(1.35rem,1.8vw,1.7rem);display:flex;flex-direction:column;box-shadow:var(--sh-1);
  overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.tile .ic{display:flex;width:42px;height:42px;align-items:center;justify-content:center;
  border-radius:11px;background:var(--ivory-sunk);color:var(--bronze);margin-bottom:.9rem;flex:0 0 auto;
  transition:background .3s,color .3s}
.tile:hover .ic{background:var(--navy);color:var(--gold)}
.tile .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.55;
  stroke-linecap:round;stroke-linejoin:round}
.tile h3{font-family:var(--serif);font-weight:400;font-size:1.36rem;color:var(--navy);margin:0 0 .4rem}
.tile p{color:var(--ink-muted);font-size:.92rem;line-height:1.5}
.tile .go{margin-top:auto;padding-top:1rem}
.col2{grid-column:span 2} .row2{grid-row:span 2}
.tile.feature{grid-column:span 2;grid-row:span 2;padding:0;border:0;color:var(--on-navy);
  min-height:330px;background:var(--navy)}
.tile.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tile.feature:hover img{transform:scale(1.06)}
.tile.feature .fveil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(3,20,64,.05) 0%,rgba(3,20,64,.4) 46%,rgba(3,20,64,.9) 100%)}
.tile.feature .ic{position:relative;z-index:2;background:rgba(246,242,234,.18);color:var(--gold);
  margin:clamp(1.5rem,2.2vw,2rem) clamp(1.5rem,2.2vw,2rem) 0}
.tile.feature:hover .ic{background:rgba(246,242,234,.26)}
.tile.feature .fbody{position:relative;z-index:2;margin-top:auto;padding:clamp(1.5rem,2.2vw,2rem)}
.tile.feature h3{color:#fff;font-size:clamp(1.55rem,2.3vw,1.95rem)}
.tile.feature p{color:#EDE7DC;max-width:40ch}

/* ---------- families / ghost-letterform ---------- */
.families{position:relative;background:var(--navy);color:var(--on-navy);overflow:hidden;padding:var(--pad-editorial) 0}
.ghost{position:absolute;right:-2vw;top:46%;transform:translateY(-50%);font-family:var(--serif);
  font-size:min(58vw,760px);line-height:.7;color:#fff;opacity:.05;pointer-events:none;user-select:none;
  z-index:0;font-style:italic}
.families .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.families .cap{margin-bottom:1.3rem}
.families blockquote{margin:0;font-family:var(--serif);font-style:italic;color:#fff;
  font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.12;max-width:18ch}
.families .body{margin-top:1.5rem;color:var(--on-navy-muted);max-width:52ch;font-size:var(--fs-lead);line-height:1.65}
.families .body b{color:var(--gold);font-weight:600}
.families .cta{margin-top:1.9rem}
.fam-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3);aspect-ratio:4/5}
.fam-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.fam-media:hover img{transform:scale(1.05)}

/* ---------- begin your journey / register form card ---------- */
.journey{padding:var(--pad-base) 0;background:var(--ivory)}
.journey .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.journey .lede h2{font-size:clamp(2rem,3.6vw,3.2rem);max-width:14ch;margin-top:1rem}
.journey .lede .sub{margin-top:1.3rem;max-width:46ch;font-size:var(--fs-lead);color:var(--ink-muted)}
.journey .assurances{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.5rem}
.journey .assurances span{font-size:.8rem;color:var(--ink-muted);background:var(--ivory-sunk);
  border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem}
.journey .contact{margin-top:1.6rem;font-size:.92rem;color:var(--ink-muted)}
.journey .contact a{color:var(--bronze);border-bottom:1px solid rgba(138,109,47,.4)}
.journey .contact a:hover{border-color:var(--bronze)}
.reg-card{position:relative;border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden;
  background:linear-gradient(140deg,var(--soft-blue) 0%,#EEF0EE 48%,var(--soft-gold) 100%);
  border:1px solid rgba(3,20,64,.08);padding:clamp(2rem,3.4vw,2.8rem)}
.reg-card .cap{margin-bottom:1.3rem;background:rgba(255,255,255,.5)}
/* No max-width: 16ch was narrower than the card and broke "Tell us how we can
   help." across two lines for no reason. The success heading is a descendant of
   this card too, so it was inheriting the same constraint and wrapping with it.
   The card itself is the only limit either heading needs. */
.reg-card h3{font-size:clamp(1.5rem,2.2vw,2rem)}
.reg-form{display:flex;flex-direction:column;gap:.8rem;margin-top:1.4rem}
.reg-form input,.reg-form select,.reg-form textarea{font:400 1rem/1.2 var(--sans);color:var(--ink);
  background:rgba(255,255,255,.82);border:1px solid rgba(3,20,64,.14);border-radius:var(--r-sm);
  padding:.9rem 1rem;transition:border-color .25s,background .25s,box-shadow .25s;width:100%}
.reg-form textarea{min-height:120px;resize:vertical;line-height:1.5}
.reg-form input::placeholder,.reg-form textarea::placeholder{color:var(--ink-muted)}
/* The old indicator was a 1px border tint plus a 12%-alpha ring, which
   measured 1.17:1 against the field: a keyboard user could not tell a focused
   field from an unfocused one. Use the same 2px bronze outline the rest of the
   site uses, so focus looks identical everywhere. */
/* The native select arrow sits hard against the border and is drawn
   differently by every engine, so draw our own and give it the same breathing
   room as the text on the left.
   background-COLOR below, never the shorthand: `background:#fff` on focus
   would drop this chevron. */
.reg-form select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:2.75rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235A6377' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px 8px}
.reg-form select::-ms-expand{display:none}
.reg-form input:focus-visible,.reg-form select:focus-visible,.reg-form textarea:focus-visible{
  outline:2px solid var(--bronze);outline-offset:2px;border-color:var(--bronze);background-color:#fff}
.reg-form input:focus,.reg-form select:focus,.reg-form textarea:focus{
  border-color:var(--bronze);background-color:#fff;box-shadow:0 0 0 3px rgba(122,96,41,.16)}
/* First and last name share a row. Six fields stacked is a long scroll inside
   one card, and the two halves of a name read as one answer anyway. Each cell
   wraps its own input so an inserted error message stays in its column. */
.reg-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:480px){.reg-row{grid-template-columns:1fr}}
/* No flex gap inside a cell, so the error sits on its own small margin rather
   than the negative one that cancels the column gap elsewhere. Three classes
   deep on purpose: `.reg-form .field-error` carries that -.4rem and is declared
   further down the file, so an equal-specificity rule here would lose and the
   message would ride up over the input. */
.reg-form .reg-row .field-error{margin-top:.35rem}
/* The unselected first option should read as placeholder text, matching the
   inputs. A required select still holding "" is exactly :invalid, and the rule
   stops applying the moment a real reason is chosen. */
.reg-form select:invalid{color:var(--ink-muted)}
.reg-form .btn{margin-top:.3rem;justify-content:center}
.reg-form .fine{font-size:.78rem;color:var(--ink-muted);margin-top:.2rem;line-height:1.5}

/* ============================================================
   REUSABLE SUBPAGE COMPONENTS
   ============================================================ */

/* page hero (compact cinematic banner) */
.page-hero{position:relative;min-height:clamp(56vh,66vh,660px);display:flex;align-items:flex-end;
  color:var(--on-navy);overflow:hidden;isolation:isolate}
.page-hero .ph-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
/* Same pixel-anchored reasoning as the homepage hero. The old ramp thinned to
   .2 at 38% down, which is exactly the band the breadcrumb and chip sit in. */
.page-hero .ph-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    rgba(var(--warm-dark),.88) 0,
    rgba(var(--warm-dark),.82) 120px,
    rgba(var(--warm-dark),.72) 260px,
    rgba(var(--warm-dark),.62) 400px,
    rgba(var(--warm-dark),.52) 520px,
    rgba(var(--warm-dark),.46) 100%)}
.page-hero .wrap{width:100%;padding-block:clamp(3rem,7vh,5rem);padding-top:8rem}
.page-hero .cap{margin-bottom:1.2rem;background:rgba(3,20,64,.62);
  backdrop-filter:blur(6px);border-color:rgba(232,212,169,.5)}
.page-hero h1{color:#fff;font-size:var(--fs-h1);max-width:20ch;line-height:1.04;
  text-shadow:0 2px 26px rgba(0,0,0,.35)}
.page-hero h1 em{color:var(--gold)}
.page-hero .sub{margin-top:1.2rem;max-width:56ch;font-size:var(--fs-lead);color:#F1EDE4;
  line-height:1.55;text-shadow:0 1px 14px rgba(0,0,0,.4)}
/* Was #EDE7DC at 90% over a bright photo (1.57:1) with a transparent
   underline, so the link was distinguished by colour alone. Now full white,
   permanently underlined, and the tap target reaches the 24px floor. */
.crumb{font-size:.82rem;color:#fff;margin-bottom:1rem;
  text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 12px rgba(0,0,0,.45)}
.crumb a{border-bottom:1px solid rgba(255,255,255,.6);transition:border-color .2s;
  display:inline-block;padding:.3rem 0}
.crumb a:hover{border-color:#fff}

/* generic sections */
.sec{padding:var(--pad-base) 0}
.sec.tight{padding:var(--pad-tight) 0}
.sec.alt{background:var(--ivory-sunk)}
.sec.raised{background:var(--ivory-raised)}
.sec.dark{background:var(--navy);color:var(--on-navy)}
.sec.dark h1,.sec.dark h2,.sec.dark h3,.sec.dark h4{color:#fff}
.sec-head{max-width:40rem;margin-bottom:2.6rem}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{margin-top:1rem;max-width:20ch}
.sec-head.center h2{margin-inline:auto}
.sec-head .lead{margin-top:1rem}
/* A .cap is inline-block, so it sits in an anonymous line box that inherits
   body leading and drops a phantom half-line under the chip. Make it
   block-level (display:table keeps the shrink-to-fit width) and set the gap
   to the heading by hand. */
.sec>.wrap>.cap{display:table;margin-bottom:.9rem}

/* prose (long-form editorial copy) */
.prose{max-width:64ch}
.prose.wide{max-width:72ch}
.prose p{color:var(--ink);font-size:1.075rem;line-height:1.72;margin-bottom:1.15em}
.prose p:last-child{margin-bottom:0}
.prose p.big{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.24;
  color:var(--navy);margin:.2em 0 .7em}
.prose b,.prose strong{color:var(--navy);font-weight:600}
.prose h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2vw,1.6rem);
  color:var(--navy);margin:2.1rem 0 .7rem;line-height:1.2}
.prose h3:first-child{margin-top:0}
.prose ul{margin:0 0 1.15em;padding-left:1.15rem;display:flex;flex-direction:column;gap:.6rem}
.prose li{color:var(--ink);font-size:1.02rem;line-height:1.6}
.prose li::marker{color:var(--bronze)}
/* the note that carries the application address; the address itself is the
   only live action on the page now that the form has gone */
.applybox{margin-top:2.2rem;padding:clamp(1.2rem,2.4vw,1.7rem);
  background:var(--ivory-raised);border:1px solid var(--line);border-radius:var(--r-md)}
.applybox p{margin:0;color:var(--ink);font-size:1.03rem;line-height:1.6}
.applybox a{color:var(--bronze);font-weight:600;border-bottom:1px solid rgba(122,96,41,.4);
  display:inline-block;padding:.15rem 0;word-break:break-word}
.applybox a:hover{color:var(--navy);border-bottom-color:var(--navy)}

/* split: text + media */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.narrow-text{grid-template-columns:1.1fr .9fr}
.split.rev .split-media{order:-1}
.media-frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3);position:relative}
.media-frame img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.media-frame.tall{aspect-ratio:4/5}
.media-frame.wide{aspect-ratio:3/2}
.media-frame:hover img{transform:scale(1.04)}
/* overlapping editorial card (Robicorn device) */
.overlap{position:relative}
.overlap .card{position:absolute;left:clamp(1rem,3vw,2rem);bottom:clamp(-1.5rem,-3vw,-2.5rem);
  background:var(--ivory-raised);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-3);padding:1.3rem 1.5rem;max-width:74%}
.overlap .card h4{font-size:1.3rem} .overlap .card p{color:var(--ink-muted);font-size:.9rem;margin-top:.3rem}

/* value grid (icon + title + copy) */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(1rem,2vw,1.5rem)}
.value{background:var(--ivory-raised);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(1.4rem,2vw,1.9rem);box-shadow:var(--sh-1);transition:transform .3s,box-shadow .3s}
.value:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.value .ic{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:11px;
  background:var(--ivory-sunk);color:var(--bronze);margin-bottom:1rem;transition:background .3s,color .3s}
.value:hover .ic{background:var(--navy);color:var(--gold)}
.value .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.value h3{font-size:1.3rem;margin-bottom:.4rem}
.value p{color:var(--ink-muted);font-size:.95rem;line-height:1.55}
.sec.dark .value{background:rgba(246,242,234,.05);border-color:rgba(246,242,234,.12)}
.sec.dark .value p{color:var(--on-navy-muted)}
.sec.dark .value .ic{background:rgba(246,242,234,.1);color:var(--gold)}

/* credential cards: an icon tile per point, one drawn for its own subject.
   Four identical ticks read as a bullet list wearing boxes. */
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(.7rem,1.1vw,1rem)}
.check{display:flex;flex-direction:column;gap:1.05rem;background:var(--ivory-raised);
  border:1px solid var(--line);border-radius:var(--r-md);padding:1.35rem 1.3rem 1.5rem;
  box-shadow:var(--sh-1);transition:transform .3s,box-shadow .3s,border-color .3s}
.check:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-strong)}
.check .ic{display:flex;width:42px;height:42px;align-items:center;justify-content:center;
  border-radius:12px;background:var(--ivory-sunk);color:var(--bronze);
  transition:background .3s,color .3s}
.check:hover .ic{background:var(--navy);color:var(--gold)}
.check .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.check .ctext{font-size:.97rem;color:var(--ink);line-height:1.45}
/* one column on a phone, so lay the tile beside the line instead of above it */
@media(max-width:560px){
  .check{flex-direction:row;align-items:center;gap:.95rem;padding:1rem 1.1rem}
  .check .ic{width:38px;height:38px;border-radius:11px;flex:0 0 auto}
  .check .ic svg{width:19px;height:19px}
}

/* feature list rows (amenities: media + copy alternating) */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center;
  padding:clamp(2rem,4vw,3.5rem) 0;border-top:1px solid var(--line)}
.feature-row:first-of-type{border-top:0}
.feature-row.rev .fr-media{order:-1}
.feature-row .fr-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:3/2}
.feature-row .fr-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.feature-row .fr-media:hover img{transform:scale(1.04)}
.feature-row h3{font-size:clamp(1.5rem,2.2vw,2rem)}
.feature-row .cap{margin-bottom:.9rem}
.feature-row p{color:var(--ink-muted);margin-top:.8rem;font-size:1rem;line-height:1.65;max-width:52ch}

/* pull quote */
.pull{text-align:center;max-width:24ch;margin-inline:auto}
.pull blockquote{margin:0;font-family:var(--serif);font-style:italic;line-height:1.14;
  font-size:clamp(1.9rem,3.6vw,3rem);color:var(--navy)}
.sec.dark .pull blockquote{color:#fff}
.pull .by{margin-top:1.1rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.15em;color:var(--bronze)}
.sec.dark .pull .by{color:var(--gold)}

/* care service accordion / anchored blocks */
.care-block{scroll-margin-top:100px;padding:clamp(2.2rem,4vw,3.4rem) 0;border-top:1px solid var(--line)}
.care-block:first-of-type{border-top:0}
.care-block .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:start}
.care-block .num{font-family:var(--serif);font-size:1rem;color:var(--bronze);letter-spacing:.02em}
.care-block h2{margin:.5rem 0 1rem;font-size:clamp(1.7rem,2.6vw,2.3rem)}
.care-block .sub-lead{color:var(--navy);font-family:var(--serif);font-size:1.2rem;margin-bottom:1rem}

/* trust strip (credential row) */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem)}
.trust .cell{padding:1.4rem 0}
.trust .cell .ic{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:11px;
  background:var(--ivory-sunk);color:var(--bronze);margin-bottom:.9rem}
.sec.dark .trust .cell .ic{background:rgba(246,242,234,.1);color:var(--gold)}
.trust .cell .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.trust .cell b{display:block;font-family:var(--serif);font-weight:400;font-size:1.3rem;color:var(--navy)}
.sec.dark .trust .cell b{color:#fff}
.trust .cell span{font-size:.9rem;color:var(--ink-muted)}
.sec.dark .trust .cell span{color:var(--on-navy-muted)}

/* FAQ accordion */
.faq{max-width:800px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line);padding:.4rem 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;
  align-items:center;padding:1.1rem 0;font-family:var(--serif);font-size:1.25rem;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform .3s}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--bronze);
  border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)}
.faq summary .pm::before{width:14px;height:2px}
.faq summary .pm::after{width:2px;height:14px;transition:transform .3s}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.faq details p{color:var(--ink-muted);font-size:1rem;line-height:1.65;padding:0 0 1.2rem;max-width:64ch}

/* generic CTA band (navy) */
.cta-band{background:var(--navy);color:var(--on-navy);text-align:center;padding:var(--pad-base) 0}
.cta-band h2{color:#fff;max-width:18ch;margin-inline:auto;font-size:clamp(2rem,3.4vw,3rem)}
.cta-band p{margin:1.1rem auto 0;max-width:48ch;color:var(--on-navy-muted);font-size:var(--fs-lead)}
.cta-band .cta{margin-top:2rem;display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* note / placeholder flag (interim content) */
.flag{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--ink-muted);
  background:var(--ivory-sunk);border:1px dashed var(--line-strong);border-radius:999px;padding:.4rem .9rem}

/* contact / info cards */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.info{background:var(--ivory-raised);border:1px solid var(--line);border-radius:var(--r-md);padding:1.5rem;box-shadow:var(--sh-1)}
.info .ic{display:flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:11px;
  background:var(--navy);color:var(--gold);margin-bottom:.9rem}
.info .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.info h4{font-size:1.2rem;margin-bottom:.3rem}
.info p,.info a{color:var(--ink-muted);font-size:.94rem;line-height:1.5}
.info a{color:var(--bronze)}

/* ---------- footer ---------- */
.foot{background:#04102E;color:var(--on-navy);padding:clamp(3.5rem,7vw,5.5rem) 0 2rem}
.foot .top{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:2.2rem;
  padding-bottom:2.8rem;border-bottom:1px solid rgba(246,242,234,.12)}
.foot .brand{filter:none;justify-self:start}
.foot .brand img{height:34px;width:auto}
.foot .tagline{color:var(--on-navy-muted);font-size:.92rem;margin-top:1.1rem;max-width:30ch;line-height:1.6}
.foot .tagline .loc{display:block;margin-top:1rem;color:var(--gold);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.14em}
.foot h4{font-family:var(--sans);font-weight:600;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--gold);margin:0 0 1.1rem}
/* Footer links were 18px tall, under the 24x24 floor in WCAG 2.2 SC 2.5.8.
   Padding grows the target without moving the text, so the gap absorbs it. */
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.foot ul a{color:var(--on-navy-muted);font-size:.93rem;transition:color .2s;
  display:inline-flex;align-items:center;min-height:32px;padding:.3rem 0}
.foot ul a:hover{color:#fff}
/* Social icons: 44px circles, above the WCAG 2.5.8 floor with room to spare,
   because a small icon is harder to hit than a line of text. Ivory at rest,
   gold on hover to match the rest of the footer's accents. */
.foot .social{flex-direction:row;gap:.75rem}
.foot .social a{width:44px;height:44px;min-height:0;padding:0;justify-content:center;
  border-radius:50%;border:1px solid rgba(246,242,234,.24);color:var(--on-navy);
  transition:background-color .2s,border-color .2s,color .2s}
.foot .social a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
/* the global focus style squares off corners (border-radius:2px), which would
   turn the circle into a square the moment it is tabbed to */
.foot .social a:focus-visible{border-radius:50%}
.foot .social svg{width:18px;height:18px;fill:currentColor}
.foot .bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  padding-top:1.8rem;color:var(--on-navy-muted);font-size:.84rem}
.foot .bottom .legal{display:flex;gap:1.3rem;flex-wrap:wrap;align-items:center}
.foot .bottom a{color:var(--on-navy-muted);display:inline-flex;align-items:center;min-height:28px}
.foot .bottom a:hover{color:#fff}

/* ---------- mobile menu ---------- */
.mobile-menu{position:fixed;inset:0;z-index:300;background:var(--ivory);
  transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;padding:5.5rem clamp(1.4rem,6vw,2.4rem) 3rem}
.mobile-menu.open{transform:translateX(0)}
.mm-close{position:absolute;top:1.3rem;right:1.3rem;background:none;border:1px solid var(--line-strong);
  color:var(--navy);border-radius:999px;padding:.55rem 1.1rem;font:500 .85rem/1 var(--sans);cursor:pointer}
.mobile-menu>a:not(.btn){display:block;font-family:var(--serif);font-size:1.8rem;color:var(--navy);
  padding:.65rem 0;border-bottom:1px solid var(--line)}
.mm-group{padding:.85rem 0;border-bottom:1px solid var(--line)}
.mm-group>span{display:block;font-family:var(--serif);font-size:1.8rem;color:var(--navy);margin-bottom:.55rem}
.mm-group ul{list-style:none;margin:0;padding:0 0 0 .2rem;display:flex;flex-direction:column;gap:.55rem}
.mm-group ul a{color:var(--ink-muted);font-size:1rem}
.mobile-menu .btn{margin-top:1.8rem;width:100%;justify-content:center}

/* ============================================================
   DUOTONE ICON SYSTEM (gold silhouette + navy/bronze line)
   ============================================================ */
svg .duo-fill{fill:var(--duo-fill, color-mix(in oklab, var(--gold) 58%, transparent));stroke:none}
svg .duo-line{fill:none;stroke:var(--duo-line, var(--bronze));stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* unified thin-ring chip (overrides the earlier per-component .ic fills) */
.assur-card .ic,.tile .ic,.value .ic,.trust .cell .ic,.info .ic{
  width:46px;height:46px;border-radius:13px;
  background:color-mix(in oklab, var(--gold) 15%, var(--ivory-raised));
  border:1px solid color-mix(in oklab, var(--bronze) 34%, transparent);
  color:var(--bronze);                          /* legacy currentColor icons */
  --duo-fill:color-mix(in oklab, var(--gold) 58%, transparent);
  --duo-line:var(--bronze);
  transition:background .35s var(--ease,cubic-bezier(.2,.7,.2,1)),border-color .35s,color .35s}
.assur-card .ic svg,.tile .ic svg,.value .ic svg,.trust .cell .ic svg,.info .ic svg{width:24px;height:24px}
.assur-card:hover .ic,.tile:hover .ic,.value:hover .ic{
  background:var(--navy);border-color:var(--navy);color:var(--gold);
  --duo-fill:color-mix(in oklab, var(--gold) 46%, transparent);--duo-line:var(--gold)}
/* dark contexts: gold-on-navy duotone */
.tile.feature .ic,.sec.dark .value .ic,.sec.dark .trust .cell .ic{
  background:color-mix(in oklab, var(--on-navy) 12%, transparent);
  border-color:color-mix(in oklab, var(--gold) 36%, transparent);color:var(--gold);
  --duo-fill:color-mix(in oklab, var(--gold) 42%, transparent);--duo-line:var(--gold)}
.tile.feature:hover .ic{background:color-mix(in oklab, var(--on-navy) 20%, transparent)}

/* ============================================================
   GSAP MOTION (progressive; .anim added only when GSAP will run)
   ============================================================ */
.anim [data-line-reveal]{opacity:0}
.anim [data-wipe]{clip-path:inset(100% 0 0 0);will-change:clip-path}
.anim [data-wipe="left"]{clip-path:inset(0 100% 0 0)}
.anim [data-wipe="right"]{clip-path:inset(0 0 0 100%)}
.anim [data-wipe="down"]{clip-path:inset(0 0 100% 0)}
.sc-line{will-change:transform}
/* pinned cinematic chapters (only when GSAP activates it) */
.chapters.is-pinning{position:relative}
.chapters.is-pinning .chapters-stage{height:100svh;position:relative;overflow:clip}
.chapters.is-pinning .chapter{min-height:0;height:100%}

/* ---------- scroll reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].is-in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .families .wrap{grid-template-columns:1fr}
  .fam-media{max-width:440px}
  .journey .grid{grid-template-columns:1fr}
  .split,.split.narrow-text,.feature-row,.care-block .grid{grid-template-columns:1fr;gap:1.8rem}
  .split.rev .split-media,.feature-row.rev .fr-media{order:0}
  .trust{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  /* phone header is the logo alone, centred; the hero CTA carries the action */
  .header-right{display:none}
  .siteheader{justify-content:center}
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile.feature{grid-column:span 2;grid-row:span 1;min-height:300px}
  .foot .top{grid-template-columns:1fr 1fr;gap:2rem}
  .foot .top>div:first-child{grid-column:1/-1}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr}
  .tile.feature,.col2{grid-column:auto}
  .foot .top{grid-template-columns:1fr}
  .hero .cta .btn{flex:1 1 auto;justify-content:center}
  .trust{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rail{overflow-x:auto}.rail-track{animation:none}
  .hero-media,.hero-content{opacity:1!important;transform:none!important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* ---------- one-page soft launch: anchor offsets for the fixed header ---------- */
#about,#living,#experience,#care,#families,#get-in-touch{scroll-margin-top:96px}
/* the one-page menu is short, so centre it instead of leaving the lower half empty
   ("safe center" falls back to top-aligned if it ever overflows, e.g. landscape) */
.mobile-menu{display:flex;flex-direction:column;justify-content:center;justify-content:safe center}


/* ---------- assurance cards: photo card, subtext opens on hover ----------
   Each card now carries its image the way the care feature tile does, so the
   resting state already reads as a photo card. Hover opens the subtext.
   Touch devices simply show the subtext, since there is no hover to trigger
   it and a stuck hover state would hide the copy for good. */
.assur-card{position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;
  min-height:clamp(300px,25vw,368px);
  background:var(--navy);box-shadow:var(--sh-2);
  border-color:transparent;              /* edge only appears on hover, in gold */
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .4s ease}
.assur-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--gold)}
/* .ac-img now sits on the <picture>. A picture is not a replaced element, so
   object-fit has to go on the <img> inside it or the crop is lost. */
.assur-card .ac-img{display:block;position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.assur-card .ac-img img{display:block;width:100%;height:100%;object-fit:cover}
.assur-card:hover .ac-img{transform:scale(1.04)}
.assur-card .ac-veil{display:block;position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(3,20,64,.93) 0%,rgba(3,20,64,.76) 32%,
    rgba(3,20,64,.38) 66%,rgba(3,20,64,.24) 100%)}
.assur-card .ic,.assur-card h3,.assur-card .ac-sub{position:relative;z-index:2}
/* Beats the shared duotone chip rule, which would turn this navy on navy.
   The chip sits over the lightest part of the veil, so it carries its own
   dark ground to stay readable whatever the photo does behind it. */
.assur-card .ic,.assur-card:hover .ic{background:rgba(3,20,64,.58);
  backdrop-filter:blur(5px);
  border-color:rgba(232,212,169,.5);color:var(--gold);
  --duo-fill:color-mix(in oklab, var(--gold) 52%, transparent);--duo-line:var(--gold)}
.assur-card h3{color:#fff;margin-top:auto}
.assur-card .ac-sub{color:var(--on-navy-muted);font-size:.95rem;margin-top:.55rem}
/* the inner span is what 0fr -> 1fr actually measures */
.assur-card .ac-sub>span{display:block;overflow:hidden;min-height:0}

@media (hover:hover) and (pointer:fine) and (min-width:901px){
  .assur-card .ac-sub{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
    transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1),
      opacity .4s ease,margin-top .55s cubic-bezier(.2,.7,.2,1)}
  .assur-card:hover .ac-sub,.assur-card:focus-within .ac-sub{
    grid-template-rows:1fr;opacity:1;margin-top:.55rem}
}

@media (prefers-reduced-motion:reduce){
  .assur-card,.assur-card .ac-img,.assur-card .ac-sub{transition:none}
}

/* ---------- registration form: states ---------- */
.reg-form input.is-invalid{border-color:#B3261E;background:rgba(179,38,30,.04)}
.reg-form .field-error{font-size:.78rem;color:#B3261E;margin-top:-.4rem;line-height:1.4}
.reg-form.is-sending{opacity:.6;pointer-events:none}
.reg-form,.reg-success{transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.reg-form.is-done{opacity:0;transform:translateY(-6px) scale(.985)}

.reg-success{margin-top:1.6rem}
.reg-success[hidden]{display:none}
.reg-success.is-in{opacity:1;transform:none}
.reg-success:not(.is-in){opacity:0;transform:translateY(8px)}
.reg-success .rs-mark{display:flex;width:46px;height:46px;align-items:center;justify-content:center;
  border-radius:50%;background:var(--navy);color:var(--gold);margin-bottom:1rem}
.reg-success .rs-mark svg{width:22px;height:22px}
.reg-success h3{font-size:clamp(1.4rem,2vw,1.8rem);margin-bottom:.5rem}
/* no max-width: the text runs to the card's own padding, so the space on the
   right always matches the space on the left */
.reg-success p{color:var(--ink-muted);font-size:.95rem}
.reg-success p+p{margin-top:.7rem}
/* a long address has no spaces to break at; let it wrap anywhere rather than
   push the card wider than the screen */
.reg-success .rs-email{color:var(--ink);font-weight:500;overflow-wrap:anywhere}

/* ---------- mobile hero: deeper scrim + roomier base ----------
   On a phone the copy runs nearly full width, so the side gradient does
   nothing and the text sits straight over the building. Deepen the bottom
   scrim instead, and hold the content clear of the bottom edge. */
@media(max-width:900px){
  .hero::after{
    background:linear-gradient(to top,
      rgba(3,20,64,.84) 0,
      rgba(3,20,64,.78) 150px,
      rgba(3,20,64,.68) 350px,
      rgba(3,20,64,.58) 530px,
      rgba(3,20,64,.28) 700px,
      rgba(3,20,64,0) 850px)}
  .hero-content{padding-bottom:15vh}   /* client asked for 10-20% */
}

/* ---------- phone field: country code + flag (intl-tel-input) ---------- */
.reg-form .iti{width:100%}
.reg-form .iti input[type=tel]{width:100%}
.iti__selected-country{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.iti--separate-dial-code .iti__selected-country{background:rgba(3,20,64,.045)}
.reg-form .iti__selected-dial-code{font:400 1rem/1.2 var(--sans);color:var(--ink)}
/* The country-search box is an <input> inside .reg-form, so `.reg-form input`
   (0,1,1) was outranking intl-tel-input's own `.iti__search-input` (0,1,0) and
   wiping the padding-left that reserves room for the magnifier. Re-assert it at
   (0,2,0), reusing the library's own spacing variables. */
.reg-form .iti__search-input{
  font:400 .95rem/1.2 var(--sans);
  padding-top:.62rem;padding-bottom:.62rem;
  padding-left:calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));
  padding-right:calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size,17px) + var(--iti-spacer-horizontal));
  border:0;border-radius:3px;background:#fff;box-shadow:none}
.iti__country-list,.iti__dropdown-content{border-radius:var(--r-sm);box-shadow:var(--sh-2);
  border:1px solid var(--line)}
.iti__country{font:400 .93rem/1.3 var(--sans);color:var(--ink)}
.iti__country.iti__highlight{background:color-mix(in oklab, var(--gold) 22%, #fff)}

/* ---------- Work for Us: role accordion ---------- */
.roles{max-width:900px}
.roles summary{align-items:flex-start;padding:1.3rem 0}
.roles .rtitle{display:flex;flex-direction:column;gap:.4rem}
.roles .rtitle h3{font-size:1.32rem;line-height:1.15;color:var(--navy)}
.roles .rmeta{font:500 .7rem/1 var(--sans);text-transform:uppercase;
  letter-spacing:.14em;color:var(--bronze)}
.roles details[open] summary .rtitle h3{color:var(--bronze)}
.roles .rbody{padding:0 0 1.7rem;max-width:66ch}
.roles .rbody p{padding:0;margin-bottom:.4rem;color:var(--ink-muted)}
.roles .rbody h4{font-family:var(--sans);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--navy);margin:1.35rem 0 .65rem}
.roles .rbody ul{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.45rem}
.roles .rbody li{color:var(--ink-muted);font-size:.98rem;line-height:1.6}
.roles .rbody li::marker{color:var(--bronze)}

/* Role actions. Only one panel is open at a time, so the gold button never
   repeats down the page. Wraps rather than shrinks: .btn is white-space:nowrap,
   so on a narrow phone the two stack instead of squashing. */
.roles .ractions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.7rem}
.roles .ractions .btn{padding:.78rem 1.25rem;font-size:.86rem}
/* the shared .btn hover slides its icon right, which reads wrong on an
   open-in-new-window glyph: send it up and to the right instead */
.roles .ractions .btn--primary:hover svg{transform:translate(2px,-2px)}
/* Below 560px the pair no longer fits on one line without the second button
   being squeezed against the edge, so stack them full width on purpose rather
   than letting flex-wrap drop a short orphan button under a long one. */
@media(max-width:560px){
  .roles .ractions{gap:.7rem}
  .roles .ractions .btn{flex:1 1 100%;justify-content:center}
}

/* invalid state applies to every control, not just text inputs */
.reg-form select.is-invalid,.reg-form textarea.is-invalid{
  border-color:#B3261E;background-color:rgba(179,38,30,.04)}