/* ==========================================================================
   Sanctuary Insurance v2, PASS-1 faithful replica of the phantom.com system.
   Every token traces to design/brands/sanctuary.md (the kit), which traces to
   viz/phantom-ref/tokens.json (the capture). No value is from memory.
   House rule: no em or en dashes anywhere in this file.
   ========================================================================== */

/* ---- Fonts: Onest, the kit's FLAGGED free twin of the proprietary Phantom face
        (kit: Typography; substitutes.json row_type:font Phantom -> Onest, open) ---- */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/onest-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens (Round-13 palette rewrite 2026-07-13: Sanctuary brand colors = red, white, gray)
       The world system now runs white / charcoal / red, with the exact logo red as the anchor.
       Old blush/maroon/coral phantom palette retired; only --accent and --accent-cta are unchanged. */
:root {
  /* world ladder (Round-13: red/white/gray) */
  --world-light:  #FFFFFF; /* pure white canvas (was blush #FCF1F0) */
  --world-deep:   #1A1A1A; /* near-black charcoal (was maroon #593032) */
  --world-bright: #CC1518; /* deep Sanctuary red (was coral #F3A0A3) */
  --surface:      #F5F5F5; /* light gray surface (was cream #FFFDF8) */
  --media-dark:   #1C1C1C; /* hero/media card interior kept exact */

  /* ink (Round-13) */
  --ink:          #1A1A1A; /* charcoal ink on light worlds (was maroon) */
  --ink-inverse:  #FFFFFF; /* white ink on the deep or bright worlds */

  /* line / secondary fill */
  --line:         #E0E0E0; /* light gray hairline + secondary pill fill (was pink #FADEDE) */

  /* brand anchor (unchanged, this is Sanctuary's exact logo red) */
  --accent:       #EE1D23; /* Sanctuary red, exact logo sample */
  --accent-cta:   #C8161B; /* red CTA fill where white text sits (5.86:1 AA); hover #AE1217 */

  /* card fills (Round-13: gray variants replacing pastels) */
  --card-blush:   #F0F0F0; /* light gray card 1 (was pastel blush) */
  --card-coral:   #E5E5E5; /* medium-light gray card 2 (was coral) */
  --card-sand:    #EBEBEB; /* near-white gray card 3 (was sand) */
  --card-cream:   #F5F5F5; /* = surface (was cream) */

  /* motion (kit: house ease primary + secondary; ref transition frequency scan) */
  --ease-house:   cubic-bezier(.22, 1, .36, 1); /* kit: primary house curve, 26 uses in ref */
  --ease-soft:    cubic-bezier(.25, 1, .5, 1);  /* kit: secondary curve, 13 uses in ref */

  /* per-world component skins (light world defaults; ref: nav and ink ride the flip) */
  --page-bg:      var(--world-light);
  --page-ink:     var(--ink);
  --nav-pill-bg:  var(--surface);            /* reference-faithful: gray pill in light worlds */
  --nav-cta-bg:   var(--accent-cta);         /* kit: primary pill = accent-cta with white text */
  --nav-cta-ink:  #FFFFFF;                   /* kit: white on accent-cta, 5.86:1 */
  --chip-bg:      var(--surface);            /* reference-faithful: gray chip on light worlds */
  --chip-ink:     var(--ink);
  --muted-ink:    rgba(26, 26, 26, .68);     /* charcoal at 68 percent for WCAG AA on white/gray fills */
  --logo-filter:  none;
}

/* the color-world flip: page bg + ink painted by html theme classes
   (ref signature 1: transition background-color, color .4s cubic-bezier(.22,1,.36,1)) */
html.world-deep {
  --page-bg:     var(--world-deep);
  --page-ink:    var(--ink-inverse);
  --nav-pill-bg: #2D2D2D;                     /* Round-13: lifted charcoal (was lifted maroon #64383B) */
  --nav-cta-bg:  var(--line);                 /* light pill CTA in the deep world */
  --nav-cta-ink: var(--ink);
  --chip-bg:     rgba(255, 255, 255, .12);    /* white at 12 percent on the deep world */
  --chip-ink:    var(--ink-inverse);
  --muted-ink:   rgba(255, 255, 255, .65);    /* white at 65 percent for AA on charcoal */
  --logo-filter: brightness(0) invert(1);     /* kit: logo rides the flip; light variant via filter */
}
html.world-bright {
  --page-bg:     var(--world-bright);         /* deep Sanctuary red */
  --page-ink:    var(--ink-inverse);          /* white text on red */
  --nav-pill-bg: rgba(255, 255, 255, .15);    /* semi-transparent white on red */
  --nav-cta-bg:  var(--world-deep);           /* charcoal CTA on red world */
  --nav-cta-ink: var(--ink-inverse);
  --chip-bg:     rgba(255, 255, 255, .18);
  --chip-ink:    var(--ink-inverse);
  --muted-ink:   rgba(255, 255, 255, .80);   /* near-white on red for AA */
  --logo-filter: brightness(0) invert(1);    /* white logo on red */
}

/* ---- Base ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  background-color: var(--page-bg);
  color: var(--page-ink);
  /* background-color fades; color snaps — prevents both values mid-transitioning to ~gray simultaneously (invisible text ~200ms window) */
  transition: background-color .4s var(--ease-house);
  scroll-behavior: smooth; /* reference-faithful: global smooth scroll, native scroll, no hijack */
  scroll-padding-top: 96px; /* clear the fixed 92px nav on anchor jumps */
  -webkit-text-size-adjust: 100%;
}
body {
  background-color: var(--page-bg);   /* same paint as html (the ref system paints html; body echoes it so a dropped stylesheet is detectable, 2026-07-11) */
  transition: background-color .4s var(--ease-house);   /* body must ride the world flip with html or the flip snaps */
  font-family: "Onest", -apple-system, "Helvetica Neue", Arial, sans-serif; /* kit: Onest, flagged twin */
  font-size: 16px;   /* ref typeScale body 16/400 */
  font-weight: 400;
  line-height: 1.5;
  color: inherit;
  overflow-x: clip;  /* clone-pipeline rule: clip, never hidden, on body */
  overscroll-behavior: none; /* prevents iOS bounce and pull-to-refresh jank during scroll */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/* surgical edit, pass-3 oracle-web-eng: skip-link accessibility utility.
   Off-screen at rest (zero effect on the frozen default rendering), reveals
   only on keyboard focus, kit tokens only (--surface, --ink, radius scale). */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 1000;
  background: var(--surface);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: 16px;
  font-size: 16px;
  transition: top .15s ease;
}
.skip-link:focus {
  top: 12px;
}

/* display type: hierarchy by SIZE at weight 400 (ref: display weight 400, never bold) */
.display {
  font-size: 96px;          /* ref h2SectionDesktop 96px */
  font-weight: 400;
  line-height: 1.1;         /* ref computed 105.6px */
  letter-spacing: -2.4px;   /* ref computed -2.4px */
  text-align: center;
}

/* mascot slot: empty inline placeholder sized like the ref's ~100px canvas glyphs;
   the asset track fills it (kit: identity mascot is a sourcing task, never drawn here) */
.mascot-slot {
  display: inline-block;
  width: 150px;   /* 2026-07-11 bump: the ref runs its glyph at ~2em of the 96px display; 104px read thin */
  height: 124px;  /* proportional to the 104x86 box (ratio held) */
  vertical-align: -17px;
}
.mascot-slot svg,
.mascot-slot canvas {
  /* pin the lottie render to the slot box (ref glyphs are display:block inside an
     inline-block wrapper at ~2em of the display size; unpinned renders collapsed
     to slivers mid-scroll, 2026-07-11 fix) */
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ---- Pills (ref shapeRoles.button: pill, filled, border none, shadow none) ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 96px;      /* ref radius scale member: 96px pills */
  font-size: 16px;
  font-weight: 500;
  padding: 0 32px;
  height: 68px;             /* ref hero CTA height 68 */
  transition: background-color .2s ease, opacity .2s ease;
}
.pill-hero  { background: var(--line);    color: var(--ink); }  /* reference-faithful: hero on-media CTA = line fill, ink text */
.pill-cream { background: var(--surface); color: var(--ink); }  /* reference-faithful: CTA-band cream pill */
.pill-more {
  /* reference-faithful: See more pill 150x49, radius 32, pad 12 20, fs 16 (mirror probe) */
  background: var(--line);
  color: var(--ink);
  height: 49px;
  padding: 12px 20px;
  border-radius: 32px;
  font-weight: 400;
}
.pill:hover { opacity: .88; }

/* ==========================================================================
   Header: floating cream pill nav (ref nav-pill: logo x48 y39, pill center
   y24 h60 r100 with the hairline glow, search circle + CTA pill right)
   ========================================================================== */
.site-header { height: 92px; /* ref header element 92px in flow */ }
.nav-bar {
  position: fixed;   /* reference-faithful: nav floats, never hides on scroll */
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;   /* ref page gutter 48 */
  pointer-events: none; /* children restore; lets the page scroll under the gaps */
}
.nav-bar > * { pointer-events: auto; }
.nav-logo {
  /* pill backing so the transparent lockup reads clean over any world/section
     (2026-07-12: the bare mark looked funky on scroll). Matches the nav pill
     exactly: same bg token (rides the world flip), radius, height, hairline
     glow, and vertical band (translateY 8px lands it on the pill's 24..84). */
  display: inline-flex;
  align-items: center;
  height: 60px;
  padding: 0 22px;
  background: var(--nav-pill-bg);
  border-radius: 100px;
  box-shadow: 0 0 4px 0 var(--line);
  transform: translateY(8px);
  transition: background-color .4s var(--ease-house);
}
.nav-logo img {
  width: 150px; height: 45px; /* real Sanctuary lockup 500x150 at nav scale */
  object-fit: contain;
  filter: var(--logo-filter);
  transition: filter .4s var(--ease-house); /* rides the world flip, reads on cream + maroon pill */
}
.nav-pill {
  position: absolute;
  left: 50%;
  top: 24px;                 /* ref pill y 24 */
  transform: translateX(-50%);
  background: var(--nav-pill-bg);
  border-radius: 100px;      /* ref navPill radius 100px */
  height: 60px;              /* ref navPill h 60 */
  box-shadow: 0 0 4px 0 var(--line); /* kit: the ONLY shadow, hairline glow on the nav pill */
  transition: background-color .4s var(--ease-house);
}
.nav-pill ul { display: flex; align-items: center; height: 100%; padding: 0 12px; }
.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  height: 60px;
  font-size: 16px;           /* ref nav item fs 16 */
  transition: opacity .15s ease;
}
.nav-item:hover { opacity: .7; }
.has-panel { position: relative; }
.has-panel .chev { transition: transform .2s ease; }
.has-panel.open .chev { transform: rotate(180deg); }
.nav-panel {
  /* reference-faithful: cream rounded panel drops from behind the pill (ref h ~308, r24) */
  position: absolute;
  top: 68px;
  left: 0;
  min-width: 260px;
  background: var(--surface);
  color: var(--ink);
  border-radius: 24px;       /* ref dropdown radius ~24 */
  padding: 16px 8px;
  display: none;
  flex-direction: column;
}
.has-panel.open .nav-panel { display: flex; }
.nav-panel::before {
  /* invisible hover bridge over the measured 8px trigger-to-panel dead zone
     (2026-07-11 fix: pointer walk survives; ref panel is gap-free, ours keeps
     the visual offset but hovers as one surface with the trigger) */
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-panel a {
  padding: 10px 16px;
  border-radius: 16px;       /* ref radius scale member */
  transition: background-color .15s ease;
}
.nav-panel a:hover { background: var(--line); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-search {
  width: 52px; height: 52px;
  border-radius: 50%;        /* ref search circle */
  background: var(--nav-pill-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 4px 0 var(--line); /* kit hairline glow */
  transition: background-color .4s var(--ease-house);
}
.nav-cta {
  /* reference-faithful: nav CTA pill ~137x52, radius 32 (mirror probe).
     Round-25 review redline, premium label setting: centered on the text
     itself (line-height 1 + justify-content), the pill system's CTA weight
     (500, matching .pill), 15px with a breath of tracking so it reads as a
     designed button, not a nav item wearing a background. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 26px;
  border-radius: 32px;
  background: var(--nav-cta-bg);
  color: var(--nav-cta-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  /* Round-25b review redline: shove the pill 16px right of the 48px gutter.
     Desktop only; the 820 block resets it, the burger owns the mobile corner. */
  margin-right: -16px;
  transition: background-color .4s var(--ease-house), color .4s var(--ease-house);
}
/* Round-13: quiet text link to the Member portal, sits left of the CTA pill and
   never competes with it. Hidden on mobile so the header stays clean. */
.nav-portal {
  font-size: 14px;
  font-weight: 500;
  opacity: .72;
  white-space: nowrap;
  padding: 6px 12px;
  transition: opacity .2s ease;
}
.nav-portal:hover { opacity: 1; }
@media (max-width: 768px) { .nav-portal { display: none; } }
.nav-burger { display: none; }

/* mobile menu sheet (ref: cream sheet r24 below header, in-sheet accordion) */
.menu-sheet {
  position: fixed;
  z-index: 90;
  left: 8px; right: 8px; top: 84px; bottom: 8px;
  background: var(--surface);
  color: var(--ink);
  /* Tyler amendment 2 (2026-07-14): the sheet is ALWAYS a light surface, so pin its
     text tokens to the dark values. Without this, --muted-ink flips white in the
     deep/red worlds and the Services submenu reads white-on-white when the menu is
     opened while scrolled to the footer. */
  --muted-ink: rgba(26, 26, 26, .68);
  border-radius: 24px;       /* ref sheet radius 24 */
  padding: 24px 20px;
  overflow-y: auto;
  transform: translateY(12px);
  opacity: 0;
}
.menu-sheet.open {
  transform: translateY(0);
  opacity: 1;
  /* spring-flavored settle standing in for the ref's measured decaying spring */
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), opacity .2s ease;
}
.sheet-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 18px 8px;
  font-size: 20px;
  text-align: left;
}
.sheet-sub { padding: 0 8px 12px; }
.sheet-sub a { display: block; padding: 10px 12px; color: var(--muted-ink); }
[data-acc].open .chev { transform: rotate(180deg); }

/* ==========================================================================
   Hero (ref section 0: h 805 at 1440x900, dark rounded media card inset 48,
   centered eyebrow 24 + h1 80/88 + CTA pill; z10)
   ========================================================================== */
main > section { position: relative; }
.hero {
  margin-top: 28px;   /* ref: header 92 to card top 120 */
  height: 805px;      /* ref hero section height 805 */
  padding: 0 48px;    /* ref card inset 48 from page edges */
}
.hero-card {
  /* reference-faithful: single large rounded dark media card (r32, #1C1C1C interior) */
  position: relative;
  height: 100%;
  border-radius: 32px;
  background: var(--media-dark);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-media,
.hero-media video,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media {
  /* poster placeholder block awaiting the generated loop (asset track). Round-13:
     charcoal + red glows replace old maroon+coral halos. */
  background:
    radial-gradient(120% 90% at 20% 110%, rgba(26, 26, 26, .55) 0%, rgba(28, 28, 28, 0) 55%),  /* charcoal glow on media-dark */
    radial-gradient(90% 70% at 85% -10%, rgba(204, 21, 24, .18) 0%, rgba(28, 28, 28, 0) 60%), /* red glow on media-dark */
    var(--media-dark);
}
/* Scrim OVER the hero video (child of .hero-media, paints above the video, below the
   sibling .hero-stack text): darkens the centre so white hero copy always reads,
   per Thomas's "make the background dark enough to see the text" (2026-07-14). */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(95% 75% at 50% 44%, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .3) 55%, rgba(0, 0, 0, .12) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .18) 40%, rgba(0, 0, 0, .42) 100%);
}
.hero-stack {
  /* reference-faithful: centered column stack, sits slightly above card center */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--ink-inverse); /* kit: ink over media */
  margin-top: -56px;
}
.hero-eyebrow {
  font-size: 24px;   /* ref computed hero eyebrow 24px (mirror probe; teardown prose said 36) */
  font-weight: 400;
  opacity: .82;      /* ref: eyebrow sits quieter than the h1 */
}
.hero h1 {
  font-size: 80px;          /* ref h1 80px */
  line-height: 88px;        /* ref 88px */
  letter-spacing: -2px;     /* ref -2px */
  font-weight: 400;         /* ref weight 400 */
  max-width: 700px;         /* tuned so the h1 sets 3 lines like the ref */
  margin: 28px 0 74px;      /* ref stack rhythm: eyebrow 248, h1 304..568, CTA 642 */
}

/* ==========================================================================
   Feature sections (ref: 1671px, pinned sticky headline block over a rising
   carousel; slide 427x571 gap 32; chip row at 828 from section top)
   ========================================================================== */
.feature {
  /* REBUILT 2026-07-12 (Thomas): clean STACKED section. Headline sits at the top,
     the cards follow directly below it, both always fully visible. No pinning, no
     masking, nothing greyed behind anything. The parallax FEEL comes from app.js
     drifting the headline and card layers at slightly different scroll rates as
     the section passes through; the section keeps a single flat world colour so
     the page reads as one continuous scroll, not boxed sections. */
  position: relative;
  padding: 104px 48px;
}
.pin-track { display: contents; }
.pin {
  text-align: center;
  margin: 0 auto 44px;    /* headline at the TOP of the section; cards follow below */
  will-change: transform; /* subtle scroll parallax only; opacity stays 1 */
}
.pin .pill-more { margin-top: 24px; }
.slider-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px;
  border-radius: 96px;   /* ref radius scale member: pill */
  background: var(--chip-bg);
  color: var(--chip-ink);
  font-size: 16px;
  transition: background-color .4s var(--ease-house), color .4s var(--ease-house);
}
.arrows { display: flex; gap: 8px; }
.arrow {
  /* reference-faithful: chevron circles top-right of the slider */
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s ease, background-color .2s ease;
}
.arrow.prev { background: var(--line); color: var(--ink); }       /* kit: secondary fill */
.arrow.next { background: var(--accent-cta); color: #FFFFFF; }    /* kit: primary accent-cta */
.arrow:disabled { opacity: .4; cursor: default; }

.slider {
  /* full-bleed viewport so slides run to the page edges like the ref. Cards sit
     directly below the section headline now (stacked model, 2026-07-12). */
  position: relative;
  margin: 0 -48px;
  padding: 0 48px;
  overflow: hidden;
  will-change: transform;   /* subtle scroll parallax vs the headline layer */
}
.track {
  display: flex;
  gap: 32px;         /* ref slide gap 32 */
  will-change: transform;
  transition: transform .9s var(--ease-soft); /* ref: embla-style tween settles ~1.1s */
}
.slide {
  /* ref shapeRoles.card: flat filled, radius 32, border NONE, shadow NONE; 427x571 */
  flex: 0 0 427px;
  height: 571px;
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-cap {
  font-size: 26px;    /* ref card caption scale */
  line-height: 1.3;
  font-weight: 400;
  padding: 32px;
}
.card-media {
  flex: 1;
  margin-top: auto;
}
/* card fills: kit pastels + media-dark, the ref's flat-fill policy */
.card-dark  { background: var(--media-dark); color: var(--ink-inverse); }
.card-cream { background: var(--card-cream); color: var(--ink); }
.card-blush { background: var(--card-blush); color: var(--ink); }
.card-coral { background: var(--card-coral); color: var(--ink); }
.card-sand  { background: var(--card-sand);  color: var(--ink); }
/* placeholder gradients awaiting card media (asset track; data-asset-slot on each) */
.card-grad-a { background: linear-gradient(160deg, var(--card-blush) 0%, var(--card-coral) 100%); color: var(--ink); }
.card-grad-b { background: linear-gradient(160deg, var(--card-sand) 0%, var(--card-blush) 100%); color: var(--ink); }
.card-grad-c { background: linear-gradient(160deg, var(--card-coral) 0%, var(--card-sand) 100%); color: var(--ink); }
.card-dark .card-media {
  background: radial-gradient(110% 80% at 80% 100%, rgba(224, 224, 224, .16) 0%, rgba(28, 28, 28, 0) 60%); /* gray glow placeholder on media-dark */
}
.card-cream .card-media,
.card-blush .card-media,
.card-coral .card-media,
.card-sand .card-media {
  background: radial-gradient(110% 80% at 80% 100%, rgba(26, 26, 26, .10) 0%, rgba(26, 26, 26, 0) 60%); /* charcoal tint placeholder on gray fills */
}

/* ==========================================================================
   CTA band (ref cta-get-started: full viewport, centered trust line +
   display headline + cream pill on the bright world)
   ========================================================================== */
.cta-band {
  min-height: 100vh;  /* ref section 900 at 900 viewport */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 48px;
}
.trust-line {
  font-size: 24px;    /* ref trust line 24px */
  line-height: 1.4;
  color: var(--muted-ink);
}
.cta-band .display { margin: 48px 0; }

/* ==========================================================================
   Disclosure band (ref section-5 geometry: 452px desktop, italic centered)
   ========================================================================== */
.disclosure {
  min-height: 452px;  /* ref disclosure section 452 at 1440x900 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.disclosure p {
  width: 100%;        /* ref widest text box 1344 at 1440 */
  padding: 0 140px;   /* ref: measured line length ~1060 inside the 1344 box */
  text-align: center;
  font-size: 16px;
  line-height: 1.75;
}

/* ==========================================================================
   Footer (ref: cream rounded card inset on the bright world; bare 64px email
   input + Sign up pill; link columns; legal row outside the card)
   ========================================================================== */
.site-footer { padding: 0 48px 24px; }
.footer-card {
  background: #D5D5D5; /* Round-17: darkened from #EBEBEB (Alex request 2026-07-18) */
  color: var(--ink);
  --muted-ink: rgba(26, 26, 26, .68); /* pin dark: col-head readable on the always-light footer card */
  border-radius: 24px;        /* ref footer card radius 24 */
  padding: 48px;              /* ref footer card pad 48 */
}
.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}
.footer-mark {
  /* Round-13: full Sanctuary lockup replaces the S mark; wider aspect */
  width: auto;
  max-width: 180px;
  height: auto;
  max-height: 54px;
}
.signup {
  /* Round-13: soft charcoal-tinted panel behind the bare input */
  background: rgba(26, 26, 26, .05);
  border-radius: 16px;
  padding: 32px 40px;
  flex: 0 1 820px;
}
.signup input {
  /* ref shapeRoles.input: bare borderless display-size text, no box */
  width: 100%;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 64px;    /* ref footer email input 64px */
  font-weight: 400;
  color: var(--ink);
  caret-color: var(--ink);
}
.signup input::placeholder { color: rgba(26, 26, 26, .35); } /* charcoal at 35 percent */
.signup input:focus { outline: none; }
.signup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
}
.signup-note { color: var(--ink); }
.pill-signup {
  background: var(--line);  /* reference-faithful: Sign up pill = secondary fill */
  color: var(--ink);
  height: 52px;
  padding: 0 28px;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 64px;
  padding-left: calc(180px + 48px + 240px); /* Round-13: mark widened to full 180px lockup, offset updated */
}
.col { display: flex; flex-direction: column; gap: 14px; }
.col-head { color: var(--muted-ink); }
.col a { transition: opacity .15s ease; }
.col a:hover { opacity: .7; }
.legal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 4px 8px;
  font-size: 14px;
}
.legal-links { display: flex; gap: 24px; }

/* ==========================================================================
   Mobile (375 reference render: header 80, hero card full viewport,
   h1 28.125/30.9375, one-card-per-view slides 335x448, section 1288)
   ========================================================================== */
@media (max-width: 820px) {
  .site-header { height: 80px; }  /* ref mobile header 80 */
  .nav-bar { height: 80px; padding: 0 20px; }
  .nav-pill, .nav-search { display: none; } /* ref: burger replaces the pill items */
  .nav-logo img { width: 124px; height: 37px; }
  .nav-cta { height: 48px; margin-right: 0; } /* the shove is desktop-only */
  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 50px; height: 50px;
    border-radius: 50%;     /* ref: white circle burger */
    background: var(--nav-pill-bg);
    box-shadow: 0 0 4px 0 var(--line); /* kit hairline glow */
    transition: background-color .4s var(--ease-house);
  }
  .nav-burger span {
    width: 20px; height: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .display { font-size: 32px; letter-spacing: -0.8px; } /* ref mobile h2 32/35.2/-0.8 */
  .mascot-slot { width: 50px; height: 41px; vertical-align: -6px; } /* 2026-07-11 bump, proportional to the desktop 150x124 at the 32px display */

  .hero {
    margin-top: 0;                 /* ref mobile hero top 80 = header bottom */
    height: calc(100vh - 4px);     /* ref mobile hero section 808 at 812 viewport */
    padding: 105px 20px 183px;     /* ref mobile card 185..705 inside the 80..888 section (screenshot measure) */
  }
  .hero-stack { margin-top: 0; }
  .hero-eyebrow { font-size: 16px; } /* ref mobile eyebrow 16 */
  .hero h1 {
    font-size: 28.125px;           /* ref mobile h1 fingerprint */
    line-height: 30.9375px;
    letter-spacing: -0.703125px;
    max-width: 300px;
    margin: 12px 0 40px;
  }
  .pill { height: 68px; }          /* ref mobile CTA height 68 */

  .feature { padding: 72px 20px; } /* mobile stacked section (2026-07-12) */
  .pin { margin: 0 auto 32px; } /* headline at the top; cards follow */
  .slider { margin: 0 -20px; }
  .pin .pill-more { margin-top: 16px; }
  .chip { height: 44px; }             /* ref mobile chip 44 */
  .arrow { width: 44px; height: 44px; }
  .slider { margin: 24px -20px 0; padding: 0 20px; } /* mobile cards top at in-section 760 */
  .slide { flex: 0 0 335px; height: 448px; } /* ref mobile slide 335x448 */
  .card-cap { font-size: 16px; padding: 24px; } /* ref mobile caption 16 */

  .cta-band { padding: 0 20px; }
  .trust-line { font-size: 16px; }
  .cta-band .display { margin: 32px 0; }

  .disclosure { min-height: 352px; padding: 0 20px; } /* ref mobile disclosure 352; page gutter keeps text boxes at 335 like the ref */
  .disclosure p { padding: 0; font-size: 14px; }

  .site-footer { padding: 0 20px 16px; }
  .footer-card { padding: 24px; }
  .footer-top { flex-direction: column; gap: 24px; }
  .signup { padding: 20px; width: 100%; }
  .signup input { font-size: 28px; } /* ref mobile footer input 28 */
  .signup-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-cols { grid-template-columns: 1fr 1fr; padding-left: 0; margin-top: 40px; }
  .legal-row { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ---- Reduced motion: the ref does NOT handle this; we must (teardown build note) ---- */
@media (prefers-reduced-motion: reduce) {
  html, body { transition: none; scroll-behavior: auto; } /* kill the world-flip cross-fade (body echoes html's paint) */
  .track { transition: none; }                      /* carousel jumps instantly */
  .menu-sheet.open { transition: none; }            /* no spring settle */
  .nav-logo img, .nav-pill, .nav-search, .nav-cta, .chip, .nav-burger { transition: none; }
}

/* ---- Media wiring (post pass-1 asset integration, 2026-07-06) ---- */
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* kit: media fills the card's lower flex region; card overflow clips corners */
}

/* ==========================================================================
   Illustration set (2026-07-14): the full ill-*.webp set was REGENERATED via
   Seedream 5.0 Pro directly in the Sanctuary red/white/charcoal/gray palette,
   grown-up flat style (no faces, no hearts), on white. The interim Round-13
   CSS saturate/hue-rotate filter is now removed; the palette is baked into the
   assets, so no filter is applied.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Round-24 (2026-08-22, client ask 6): the quiet privacy pointer that sits
   beside the footer signup on every page, the one place the chrome asks for
   a personal detail. The notice itself is privacy.html.
   -------------------------------------------------------------------------- */
.signup-privacy { margin-top: 10px; font-size: 13px; opacity: .72; }
.signup-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.signup-privacy a:hover { color: var(--accent-cta); }

/* --------------------------------------------------------------------------
   Round-24 (2026-08-22): nav air for the 7-item pill in the 821 to 1360 band.
   Measured before this block (gap to nav-right, negative = overlap): 7 items
   read -1.9px at 1280, -65.9 at 1152, -129.9 at 1024; the shipped 6-item pill
   already overlapped below ~1180 (-36.8 at 1152), so this tier also repairs a
   pre-existing collision the 1280-only audits never saw. Two moves: compress
   item padding and size a step in the mid band, and surrender the Member
   portal link earlier (it lives in the mobile sheet's world via the footer
   and the quote page regardless). Burger still takes over at 820.
   -------------------------------------------------------------------------- */
@media (max-width: 1360px) {
  .nav-pill ul { padding: 0 10px; }
  .nav-item { padding: 0 14px; font-size: 15px; }
}
@media (max-width: 1200px) {
  /* walk-r24 measured -11px pill-to-portal at 1152 with the portal visible;
     surrendering it here keeps the whole 821 to 1200 band clear */
  .nav-portal { display: none; }
}
@media (max-width: 960px) {
  /* walk-r24 measured -5px at 900; four fewer pixels per item clears it */
  .nav-item { padding: 0 12px; }
}
@media (min-width: 821px) and (max-width: 900px) {
  /* Round-24: the 7-item pill's last sliver (walk-r24 measured -26px at 830 and -20px at 841).
     The burger takes the 821 to 900 window a step early; the full mobile system
     still starts at the reference's own 820, everything else stays desktop. */
  .nav-pill { display: none; }
  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--nav-pill-bg);
    box-shadow: 0 0 4px 0 var(--line);
    transition: background-color .4s var(--ease-house);
  }
  .nav-burger span { width: 20px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}