/* ============================================================
   CREIGHTON OAKS — styles.css
   Fonts: Fraunces (serif) + DM Sans (sans)
   ============================================================ */

:root {
  --serif: "Fraunces", Georgia, serif;
  --sans:  "DM Sans", system-ui, sans-serif;

  --cream:      #f6eee1;
  --cream-2:    #efe4cf;
  --cream-3:    #e7d8bd;
  --frame:      #a85b3f;
  --frame-dark: #8f4c36;
  --rust:       #b8694a;
  --rust-ink:   #8a4a32;
  --ink:        #2b211b;
  --ink-soft:   #4a3d34;
  --mute:       #7a6a5c;
  --rule:       rgba(43, 33, 27, 0.12);

  --on-dark-em:    #b8694a;
  --on-dark-body:  #f6e3cf;
  --on-dark-muted: rgba(255, 244, 230, 0.75);
  --on-dark-rule:  rgba(246, 227, 207, 0.18);

  --glass-bg:           rgba(255, 255, 255, 0.18);
  --glass-bg-hover:     rgba(255, 255, 255, 0.26);
  --glass-border:       rgba(255, 255, 255, 0.45);
  --glass-border-hover: rgba(255, 255, 255, 0.60);
  --glass-blur:         14px;

  --radius-xl: 36px;
  --radius-md: 22px;
  --radius-sm: 14px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Horizontal scroll lock: must be on BOTH html and body. On iOS Safari the
   html element is the scroll root, so body's overflow-x is ignored unless
   html also clips. The .conveyor uses width:100vw + negative margins to
   break out of the section padding — without html clipping, those subpixel
   bleed-overs let the user swipe the whole page horizontally on mobile. */
html { scroll-behavior: smooth; overflow-x: clip; max-width: 100vw; }
body { background: var(--cream); color: var(--ink); font-family: var(--sans); font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; max-width: 100vw; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--rust); color: #fff4e6; }

/* ============================================================
   PAGE LOADER — word-reveal phrase montage (ported from CPA, RTC palette)
   ============================================================ */
html.is-loading,
html.is-loading body { overflow: hidden; }
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 40px);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-loader.is-out { opacity: 0; pointer-events: none; }
.page-loader[hidden] { display: none; }
.page-loader-mark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--ink);
}
.page-loader-mark em { font-style: italic; font-weight: 500; color: var(--rust); }
.page-loader-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  min-height: 3em;
  padding: 0 clamp(20px, 5vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-loader-phrase {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 0.32em;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--rust);
  opacity: 0;
  transition:
    opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
    font-size 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.page-loader-phrase.is-on { opacity: 1; }
.page-loader-phrase.is-final {
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.page-loader-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.25em, 0);
  transition:
    opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.page-loader-phrase.is-on .page-loader-word {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.page-loader-progress {
  position: relative;
  width: 240px;
  height: 2px;
  background: var(--rule);
  border-radius: 999px;
  overflow: hidden;
}
.page-loader-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--rust);
  border-radius: 999px;
}
@media (prefers-reduced-motion: reduce) {
  .page-loader { transition: none; }
  .page-loader-phrase { transition: opacity 200ms linear; }
  .page-loader-word {
    transition: opacity 200ms linear;
    transform: none;
    transition-delay: 0ms;
  }
  .page-loader-phrase.is-on .page-loader-word { transform: none; }
}

/* ============================================================
   HERO — SCROLL-CONTROLLED VIDEO BANNER
   ============================================================ */

/* Scroll surface size logistics ported from CPA Website (950vh desktop,
   450vh mobile, 100vh when reduce-motion is on). Long surface + lerp =
   buttery scrub. */
.hero-zone {
  position: relative;
  height: 950vh;
  background: transparent;
  padding: 0;
}
@media (max-width: 768px) {
  .hero-zone { height: 450vh; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-zone { height: 100vh; height: 100dvh; }
}

.hero-pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: #0e0a08;
  overflow: hidden;
}

.hero-canvas-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: #0e0a08;
  isolation: isolate;
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Promote to its own GPU layer so paint isn't blocked by anything else
     scrolling under it. */
  will-change: transform;
  transform: translateZ(0);
}

/* Floating glass nav — hidden over hero, slides in when scrolled past */
.floating-nav {
  position: fixed;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-radius: 999px;
  backdrop-filter: blur(28px) saturate(200%) brightness(1.06);
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.06);
  background: rgba(255, 251, 246, 0.62);
  border: 0.5px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 2px 0 0 rgba(255,255,255,0.7) inset,
    0 12px 40px -12px rgba(43, 33, 27, 0.14),
    0 1px 0 0 rgba(43,33,27,0.06);
  transform: translateY(-140%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s var(--ease), opacity 0.45s var(--ease);
}
.floating-nav.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav-toggle { display: none; }
#mobile-menu { display: none; }
.floating-nav.solid {
  background: rgba(255, 251, 246, 0.72);
}
.floating-nav .logo-word { color: var(--ink); font-family: var(--serif); font-size: 20px; letter-spacing: 0.2px; }
.floating-nav .nav-links { display: flex; gap: 28px; list-style: none; }
.floating-nav .nav-links a { font-size: clamp(13px, 0.78rem + 0.2vw, 15px); color: var(--ink-soft); position: relative; padding: 4px 0; transition: color 0.3s var(--ease); }
.floating-nav .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--rust); transition: width 0.35s var(--ease); }
.floating-nav .nav-links a:hover { color: var(--ink); }
.floating-nav .nav-links a:hover::after { width: 100%; }

/* Inner-page variant — visible from page load, doesn't wait for scroll */
.floating-nav--inner { transform: translateY(0); opacity: 1; pointer-events: auto; background: rgba(255, 251, 246, 0.72); }

/* Facility dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger::before { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 14px; }
.nav-dropdown-trigger .caret { display: inline-block; margin-left: 4px; font-size: 9px; transition: transform 0.3s var(--ease); vertical-align: middle; }
.nav-dropdown:hover .nav-dropdown-trigger .caret,
.nav-dropdown:focus-within .nav-dropdown-trigger .caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 240px;
  list-style: none;
  padding: 10px;
  margin: 0;
  border-radius: 18px;
  background: rgba(255, 251, 246, 0.92);
  backdrop-filter: blur(28px) saturate(200%) brightness(1.04);
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.04);
  border: 0.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 18px 50px -18px rgba(43, 33, 27, 0.22), 0 1px 0 0 rgba(43, 33, 27, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.35s;
  z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0s;
}
.nav-dropdown-menu li { list-style: none; }
.nav-dropdown-menu a {
  display: block;
  padding: 12px 14px;
  min-height: 44px;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.1px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), padding-left 0.3s var(--ease);
}
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a:hover { background: rgba(184, 105, 74, 0.12); color: var(--rust-ink); padding-left: 18px; }

/* ============================================================
   SCROLL-PINNED HORIZONTAL CARDS (used on /about-us/)

   Pattern: vertical scroll drives horizontal card translation.
   - .scroll-cards-zone is tall (height = viewport + N×60vh) so the user
     scrolls through it
   - .scroll-cards-pin is sticky-pinned at top: 0, full viewport height
   - .scroll-cards-track is moved horizontally by JS in proportion to how
     far the zone has been scrolled past
   - Mobile (<=900px): JS bails, layout falls back to a vertical stack
   ============================================================ */

.scroll-cards-zone {
  position: relative;
  background: var(--cream);
  /* Set inline via style="--cards: N" — height grows with card count */
  height: calc(100vh + var(--cards, 5) * 64vh);
}
.scroll-cards-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-left: clamp(28px, 5vw, 80px);
}
/* Single horizontal rail — title block + cards all scroll together.
   The title block is the first item in the track and exits to the left
   as the user scrolls; cards come in from the right and pass it. */
.scroll-cards-track {
  display: flex;
  align-items: stretch;
  height: clamp(440px, 72vh, 620px);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
/* Title block as a track item */
.scroll-cards-intro {
  flex: 0 0 clamp(380px, 38vw, 560px);
  margin-right: clamp(40px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* z-index lower than cards so cards visually pass over the title (the
     "in the back" feel). Margin-right is the gap before the first card. */
  z-index: 1;
}
.scroll-cards-intro .eyebrow { margin-bottom: 20px; }
.scroll-cards-intro .display { margin-bottom: 24px; max-width: 14ch; }
.scroll-cards-intro .lede { margin-bottom: 28px; max-width: 42ch; }
/* Fade the intro out as it exits left. JS sets --exit:0..1 based on scroll. */
.scroll-cards-intro {
  opacity: calc(1 - var(--exit, 0) * 0.7);
  transform: translateX(calc(var(--exit, 0) * -10px));
  transition: none;
}
.scroll-card {
  position: relative;
  flex: 0 0 clamp(320px, 30vw, 460px);
  margin-right: 28px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 14px 38px -22px rgba(43, 33, 27, 0.18);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  z-index: 2;          /* sit above the intro block as cards pass over it */
}
.scroll-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -22px rgba(43, 33, 27, 0.32);
}
.scroll-card-img {
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;          /* uniform image area across all cards on desktop */
  width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  isolation: isolate;
}
.scroll-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.16));
  pointer-events: none;
}
.scroll-card-body {
  padding: 28px 30px 32px;
  background: #fff;
  border-top: 1px solid var(--rule);
}
.scroll-card-num {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--rust-ink);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.scroll-card-title {
  font-family: var(--serif);
  font-size: clamp(22px, 1.7vw, 28px);
  font-weight: 500;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.scroll-card-desc {
  font-family: var(--sans);
  font-size: clamp(14px, 0.86rem + 0.25vw, 16px);
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
}

/* Indicator: subtle scroll hint that fades during the pin */
.scroll-cards-cue {
  position: absolute;
  bottom: 28px;
  left: clamp(28px, 5vw, 80px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--mute);
  opacity: 0.85;
}
.scroll-cards-cue .progress {
  display: inline-block;
  width: 80px;
  height: 1px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
}
.scroll-cards-cue .progress::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--p, 0%);
  background: var(--rust);
  transition: width 0.15s linear;
}

/* Mobile heading sits above the carousel — replaces the desktop intro
   slide that we hide on mobile so the carousel starts on card 01. */
.cards-mobile-heading { display: none; }

/* Mobile: release the desktop pin + JS-driven horizontal scroll, then
   turn the track into a horizontal snap carousel. Each card snaps to
   the centre of the viewport with smooth scroll. JS bails at this
   breakpoint via matchMedia so it never fights the native snap. */
@media (max-width: 900px) {
  .cards-mobile-heading {
    display: block;
    padding: 60px 22px 18px;
  }
  .cards-mobile-heading .display { margin: 12px 0 14px; }
  .cards-mobile-heading .lede    { max-width: 56ch; }

  .scroll-cards-zone {
    height: auto !important;          /* override the calc() that sets desktop runway */
    background: var(--cream);
    overflow: visible;
    padding: 0 !important;            /* base `section` rule adds 90/90 — heading + pin handle internal spacing */
  }
  .scroll-cards-pin {
    position: relative;
    top: auto;
    height: auto;
    padding: 0 0 24px;                /* heading covers top space; small bottom buffer before next section */
    overflow: visible;
    display: block;
  }

  /* Hide the desktop intro slide on mobile — the heading above the
     carousel covers the same content but doesn't steal a card slot. */
  .scroll-cards-intro { display: none !important; }

  /* Carousel: row-flex, x-overflow with mandatory scroll-snap.
     padding-inline acts as the lead-in / lead-out so the first and
     last cards can snap to the viewport centre instead of clamping
     to the container edge. */
  .scroll-cards-track {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    height: auto !important;
    transform: none !important;
    gap: 16px;
    padding: 18px 10vw 24px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox */
    overscroll-behavior-x: contain;   /* don't trigger browser back-swipe */
  }
  .scroll-cards-track::-webkit-scrollbar { display: none; }

  .scroll-card {
    flex: 0 0 80vw;
    width: 80vw;
    max-width: 420px;
    margin: 0 !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;         /* one card per swipe — no flying past */
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--rule);
    background: #fff;
    box-shadow: 0 14px 38px -22px rgba(43, 33, 27, 0.18);
  }

  .scroll-card-img { flex: 0 0 220px; height: 220px; aspect-ratio: auto; }
  .scroll-cards-cue { display: none; }
}
@media (max-width: 560px) {
  /* Phones: cards a touch wider (85vw) to maximise read area, and
     padding shrunk so the lead-in/lead-out doesn't waste viewport. */
  .scroll-cards-track  { padding: 18px 7.5vw 24px; gap: 14px; }
  .scroll-card         { flex: 0 0 85vw; width: 85vw; }
  .scroll-card-img     { flex: 0 0 200px; height: 200px; }
}

/* ============================================================
   QUOTE — scroll-controlled line dimming
   Each .quote-line span starts faint (opacity 0.16) and brightens to
   full as the section scrolls through the viewport. JS sets inline
   opacity per line based on scroll progress; CSS transition smooths
   between updates so micro-scrolls don't feel jittery.
   ============================================================ */
.quote-line {
  opacity: 0.16;
  transition: opacity 0.35s var(--ease);
}

/* ============================================================
   MISSION MANIFESTO — asymmetric kinetic typography (about-us)
   Keywords at huge italic-serif scale, connector copy small-uppercase,
   scattered across three column slots (left / center / right) for a
   magazine-cover feel. Each line reveals on scroll with staggered delay.
   ============================================================ */
.mission-manifesto {
  background: var(--cream-2);
  padding: clamp(120px, 16vh, 200px) clamp(28px, 5vw, 80px);
  position: relative;
  overflow: hidden;
}
.mission-manifesto-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.mission-manifesto .eyebrow {
  display: inline-flex;
  margin-bottom: clamp(40px, 6vh, 72px);
}
.manifesto-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 18px);
}
.manifesto-line {
  margin: 0;
  max-width: min(90%, 1100px);
}
.manifesto-grid > .col-left   { align-self: flex-start; }
.manifesto-grid > .col-mid    { align-self: center; text-align: center; }
.manifesto-grid > .col-right  { align-self: flex-end; text-align: right; }
.manifesto-grid > .col-indent { align-self: flex-start; padding-left: clamp(40px, 8vw, 140px); }

.manifesto-huge {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(64px, 11.5vw, 180px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.manifesto-huge.accent { color: var(--rust); }

.manifesto-medium {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.manifesto-small {
  font-family: var(--sans);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  max-width: 42ch;
  /* small connector copy doubles as a structural rule — adds a 32px line */
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.manifesto-small::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--rust);
  opacity: 0.7;
  flex: 0 0 32px;
}
.manifesto-small.no-rule::before { display: none; }

@media (max-width: 768px) {
  .mission-manifesto { padding: 90px 22px; }
  .manifesto-huge { font-size: clamp(44px, 14vw, 88px); }
  .manifesto-medium { font-size: clamp(22px, 6vw, 36px); }
  .manifesto-grid > * {
    align-self: flex-start !important;
    text-align: left !important;
    padding-left: 0 !important;
    max-width: 100%;
  }
  .manifesto-grid { gap: 10px; }
}

/* ============================================================
   VALUES BENTO — colorful 6-cell grid (used on /about-us/)
   Layout: 1 wide header + 1 tall feature card + 4 normal cards.
   Cards reuse the .faq-card vocabulary (.faq-card--header, --orange,
   --dark, --light) so we share the existing typography and color rules.
   ============================================================ */
.values-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1300px;
  margin: 0 auto;
  grid-auto-rows: minmax(220px, auto);
}
.values-bento > *:nth-child(1) { grid-column: 1 / 3; grid-row: 1;     } /* header (wide) */
.values-bento > *:nth-child(2) { grid-column: 3;     grid-row: 1 / 3; } /* feature (tall) */
.values-bento > *:nth-child(3) { grid-column: 1;     grid-row: 2;     }
.values-bento > *:nth-child(4) { grid-column: 2;     grid-row: 2;     }
.values-bento > *:nth-child(5) { grid-column: 1 / 3; grid-row: 3;     } /* wide bottom */
.values-bento > *:nth-child(6) { grid-column: 3;     grid-row: 3;     }

/* SERVE BENTO — 3-col × 2-row, 4 cells (1 header + 3 categories). */
.serve-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1300px;
  margin: 0 auto;
  grid-auto-rows: minmax(220px, auto);
}
.serve-bento > *:nth-child(1) { grid-column: 1 / 3; grid-row: 1; } /* header wide */
.serve-bento > *:nth-child(2) { grid-column: 3;     grid-row: 1; } /* card 1 right */
.serve-bento > *:nth-child(3) { grid-column: 1;     grid-row: 2; } /* card 2 left */
.serve-bento > *:nth-child(4) { grid-column: 2 / 4; grid-row: 2; } /* card 3 wide right */

@media (max-width: 768px) {
  .serve-bento {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .serve-bento > *:nth-child(n) { grid-column: auto; grid-row: auto; }
  .serve-bento > *:nth-child(1) { grid-column: 1 / 3; }
  .serve-bento > *:nth-child(4) { grid-column: 1 / 3; }
}

.value-num {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
  color: var(--rust-ink);
  opacity: 0.85;
}
.faq-card--orange .value-num { color: var(--cream); opacity: 0.85; }
.faq-card--dark .value-num   { color: var(--on-dark-em); opacity: 1; }

@media (max-width: 768px) {
  .values-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
  .values-bento > *:nth-child(n) { grid-column: auto; grid-row: auto; }
  .values-bento > *:nth-child(1) { grid-column: 1 / 3; }
  .values-bento > *:nth-child(2) { grid-column: 1 / 3; }
  .values-bento > *:nth-child(5) { grid-column: 1 / 3; }
}

/* ============================================================
   ABOUT — full-bleed photo hero with parallaxed text overlay
   ============================================================ */
.about-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 680px;
  overflow: hidden;
  background: #1a120e;
  isolation: isolate;
}
.about-hero-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  will-change: transform;
  animation: aboutHeroIntro 1.8s var(--ease) 0.1s both;
}
@keyframes aboutHeroIntro {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
.about-hero-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(20, 12, 8, 0.55) 0%, rgba(20, 12, 8, 0.20) 45%, rgba(20, 12, 8, 0.55) 100%),
    linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.45) 100%);
  z-index: 2;
}
.about-hero-content {
  position: absolute;
  left: clamp(28px, 6vw, 96px);
  bottom: clamp(80px, 12vh, 130px);
  right: clamp(28px, 6vw, 96px);
  z-index: 3;
  max-width: 1100px;
  color: #fff4e6;
}
.about-hero-content .eyebrow,
.about-hero-content .eyebrow-dark { margin-bottom: 22px; }
.about-hero-content .display-dark {
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.02;
  max-width: 14ch;
  margin-bottom: 26px;
}
.about-hero-content .lede-dark { max-width: 56ch; }

/* Floating stat strip pinned to the hero — three quick facts */
.about-hero-stats {
  position: absolute;
  right: clamp(28px, 6vw, 96px);
  top: clamp(120px, 18vh, 180px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 240px;
  text-align: right;
}
.about-hero-stat {
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 244, 230, 0.10);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 0.5px solid rgba(255, 244, 230, 0.25);
}
.about-hero-stat-num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(28px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1;
  color: var(--on-dark-em);
  letter-spacing: -0.01em;
}
.about-hero-stat-label {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 244, 230, 0.70);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .about-hero { min-height: 560px; height: 95vh; }
  /* Liquid-glass card so the eyebrow + h1 + lede stay readable
     over the bright family photo (matches the facility room-hero
     treatment on mobile). */
  .about-hero-content {
    bottom: 30px;
    right: 14px;
    left: 14px;
    padding: 22px 20px 24px;
    background: rgba(20, 14, 10, 0.46);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    box-shadow: 0 14px 40px -12px rgba(0,0,0,0.45);
  }
  .about-hero-content .display-dark { font-size: clamp(36px, 9vw, 56px); margin-bottom: 16px; }
  .about-hero-content .eyebrow,
  .about-hero-content .eyebrow-dark { margin-bottom: 14px; }
  .about-hero-stats { display: none; }
}

/* ============================================================
   ROOM SUB-PAGE — hero banner + intro grid
   ============================================================ */

.room-hero {
  position: relative;
  width: 100%;
  height: 92vh;
  height: 92dvh;
  min-height: 620px;
  overflow: hidden;
  background: #1a120e;
  isolation: isolate;
}
.room-hero-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 1.6s var(--ease);
  z-index: 1;
}
.room-hero.in .room-hero-image { transform: scale(1); }
.room-hero-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 35%, rgba(0,0,0,0.38) 100%);
  z-index: 2;
}
.room-hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 80px clamp(28px, 5vw, 80px) 100px;
  z-index: 3;
  max-width: 1100px;
  color: #fff4e6;
}
.room-hero-content .display-dark { max-width: 18ch; margin-top: 14px; }
.room-hero-content .lede-dark { max-width: 56ch; margin-top: 18px; }

@media (max-width: 768px) {
  .room-hero { height: 80vh; min-height: 520px; }
  /* Tinted glass card so the eyebrow + h1 + lede stay readable
     over bright interior photos (the room photos blow out the
     terracotta italics otherwise). */
  .room-hero-content {
    left: 14px;
    right: 14px;
    bottom: 24px;
    padding: 22px 20px 24px;
    background: rgba(20, 14, 10, 0.46);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    box-shadow: 0 14px 40px -12px rgba(0,0,0,0.45);
  }
}

.room-intro-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 768px) {
  .room-intro-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ====== Liquid-glass hero copy card — right side, vertically centered ======
   IMPORTANT: backdrop-filter is OFF until .revealed. With it always on the
   GPU computes a 540px-wide blur of the canvas behind it on every paint —
   tanks the scrub framerate. Apply it only when actually visible. */
.hero-copy {
  position: absolute;
  right: clamp(20px, 4vw, 64px);
  top: 50%;
  transform: translate3d(40px, -50%, 0);
  width: min(480px, calc(100vw - 40px));
  padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.4vw, 38px);
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 22px;
  box-shadow: 0 24px 48px -22px rgba(0, 0, 0, 0.45);
  color: #fff4e6;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  z-index: 4;
  transition:
    opacity 0.95s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s linear 0.95s;
}
.hero-copy.revealed {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
  pointer-events: auto;
  visibility: visible;
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  transition:
    opacity 0.95s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s linear 0s;
}

/* Children stagger in after the card itself appears */
.hero-copy > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.hero-copy.revealed > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.hero-copy.revealed > .hero-eyebrow { transition-delay: 0.08s; }
.hero-copy.revealed > .hero-h1      { transition-delay: 0.20s; }
.hero-copy.revealed > .hero-sub     { transition-delay: 0.32s; }
.hero-copy.revealed > .hero-btns    { transition-delay: 0.44s; }
.hero-copy.revealed > .hero-stats   { transition-delay: 0.56s; }
.hero-copy.revealed > .hero-trust   { transition-delay: 0.68s; }

.hero-copy .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 244, 230, 0.78);
  margin-bottom: 18px;
}
.hero-copy .hero-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(255, 244, 230, 0.55);
}

.hero-copy .hero-h1 {
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 42px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: #fff;
  margin: 0 0 16px;
}
.hero-copy .hero-h1 em {
  font-style: italic;
  color: var(--on-dark-em);
  font-weight: 500;
}

.hero-copy .hero-sub {
  font-size: clamp(14px, 0.85rem + 0.25vw, 16px);
  line-height: 1.55;
  color: rgba(255, 244, 230, 0.82);
  margin: 0 0 18px;
}

.hero-copy .hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}

/* Stats grid inside the glass card */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 18px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 244, 230, 0.14);
}
@media (max-width: 560px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 14px 16px; }
  .hero-stat-num { font-size: clamp(20px, 5.6vw, 24px); }
  .hero-stat-label { font-size: clamp(10px, 2.6vw, 11px); line-height: 1.35; }
}
.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-stat-num {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  color: #fff4e6;
  letter-spacing: -0.01em;
}
.hero-stat-num sup {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--on-dark-em);
  vertical-align: super;
  margin-left: 2px;
  letter-spacing: 0.04em;
}
.hero-stat-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(255, 244, 230, 0.65);
  line-height: 1.4;
}

.hero-trust {
  margin-top: 16px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 244, 230, 0.5);
  line-height: 1.6;
}
.hero-trust .dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  background: var(--on-dark-em);
  border-radius: 50%;
  margin: 0 8px;
  vertical-align: middle;
  opacity: 0.7;
}

/* Mobile: card vertically centered, compressed to fit within 100dvh.
   Bottom-pinned was clipping the top of the h1 + eyebrow on 6.5" iPhones
   because the card grew taller than 100dvh - 6vh. Centering the card and
   compressing every child guarantees the full message is on-screen. */
@media (max-width: 768px) {
  .hero-copy {
    left: 14px;
    right: 14px;
    width: auto;
    top: 50%;
    bottom: auto;
    transform: translate3d(0, calc(-50% + 24px), 0);
    padding: 18px 18px;
  }
  .hero-copy.revealed {
    transform: translate3d(0, -50%, 0);
  }
  .hero-copy .hero-h1 {
    font-size: clamp(24px, 6.2vw, 32px);
    line-height: 1.1;
    margin: 0 0 12px;
  }
  .hero-copy .hero-sub {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 14px;
  }
  .hero-copy .hero-eyebrow { margin-bottom: 12px; }
  .hero-stats { gap: 12px 14px; margin-top: 14px; padding-top: 14px; }
  .hero-stat-num { font-size: 22px; line-height: 1; }
  .hero-stat-label { font-size: 9.5px; }
  .hero-trust { margin-top: 12px; font-size: 9px; }
  .hero-copy .btn,
  .hero-copy .btn-lg {
    padding: 12px 18px;
    font-size: 13.5px;
    min-height: 44px;
  }
}

/* Tighter compression on small phones — drop non-essential lines and
   stack the buttons so the core message + CTAs always fit. */
@media (max-width: 560px) {
  .hero-copy .hero-eyebrow { display: none; }
  .hero-copy .hero-trust { display: none; }
  .hero-copy .hero-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}

/* Scroll cue at bottom of hero */
.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,244,230,.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.4s;
  pointer-events: none;
}
.scroll-cue.visible { opacity: 1; }
.hero-copy.revealed ~ .scroll-cue { opacity: 0; }
.scroll-cue .line {
  width: 1px;
  height: 38px;
  background: rgba(255,244,230,.5);
  position: relative;
  overflow: hidden;
}
.scroll-cue .line::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--on-dark-em);
  animation: cueLine 1.8s ease-in-out infinite;
}
@keyframes cueLine {
  0%   { top: -100%; }
  100% { top: 200%; }
}

/* ============================================================
   FRAME RING + PAGE BODY
   ============================================================ */

.frame {
  background: var(--cream);
  position: relative;
  z-index: 10;
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  margin-top: -40px;            /* tuck under hero for soft transition */
  overflow: hidden;
}

/* BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; min-height: 44px; border-radius: 999px; font-family: var(--sans); font-size: clamp(14px, 0.85rem + 0.2vw, 16px); font-weight: 500; letter-spacing: 0.2px; border: 1px solid transparent; cursor: pointer; transition: transform 0.4s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease); text-decoration: none; }
.btn-lg { padding: 16px 28px; font-size: clamp(15px, 0.9rem + 0.25vw, 17px); }
.btn-solid { background: var(--rust); color: #fff4e6; border-color: var(--rust); }
.btn-solid:hover { background: var(--rust-ink); border-color: var(--rust-ink); transform: translateY(-1px); box-shadow: 0 12px 28px -16px rgba(138,74,50,.7); }
.btn-outline { background: transparent; border: 1.5px solid var(--rust); color: var(--rust); }
.btn-outline:hover { background: var(--rust); color: #fff4e6; }
.btn-ghost { background: transparent; border: 1px solid var(--rust); color: var(--rust); }
.btn-ghost:hover { background: var(--rust); color: #fff4e6; }
.btn-glass { backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); background: rgba(255,244,230,.16); border: 0.5px solid rgba(255,244,230,.45); color: #fff4e6; }
.btn-glass:hover { background: rgba(255,244,230,.26); border-color: rgba(255,244,230,.6); }
.btn-glass-dark { background: var(--ink); border: 0.5px solid var(--ink); color: #fff4e6; }
.btn-glass-dark:hover { background: var(--ink-soft); border-color: var(--ink-soft); transform: translateY(-1px); }

.btn .arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   SUBTLE BUTTON — bordered pill with animated dot, ping, shimmer.
   Ported from a React/Tailwind reference, adapted to brand palette.
   Two variants: default (over dark bg) and .btn-subtle--light (over cream).
   ============================================================ */
.btn-subtle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 24px;
  height: 52px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 244, 230, 0.55);
  background: transparent;
  color: #fff4e6;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    transform 0.5s var(--ease),
    border-color 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    color 0.4s var(--ease);
}

/* Shimmer sweep — slides from -100% to 100% on hover */
.btn-subtle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 244, 230, 0.18) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.75s var(--ease);
  z-index: 1;
  pointer-events: none;
}
.btn-subtle:hover::before { transform: translateX(100%); }

/* Subtle glow wash */
.btn-subtle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(243, 207, 183, 0.16) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  z-index: 0;
  pointer-events: none;
}
.btn-subtle:hover::after { opacity: 1; }

.btn-subtle:hover {
  border-color: rgba(255, 244, 230, 0.95);
  transform: scale(1.04);
  box-shadow: 0 0 30px -8px rgba(243, 207, 183, 0.45);
}
.btn-subtle:active { transform: scale(0.97); }

.btn-subtle-text {
  position: relative;
  z-index: 2;
  transition: color 0.4s var(--ease);
}
.btn-subtle:hover .btn-subtle-text { color: #fffbf2; }

/* Animated dot */
.btn-subtle-dot {
  position: relative;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--on-dark-em);
  flex-shrink: 0;
  transition:
    transform 0.5s var(--ease),
    background 0.4s var(--ease),
    box-shadow 0.5s var(--ease);
}
.btn-subtle:hover .btn-subtle-dot {
  background: #f5dcc3;
  transform: scale(1.18);
  box-shadow: 0 0 16px 0 rgba(243, 207, 183, 0.65);
}
.btn-subtle:active .btn-subtle-dot { transform: scale(0.92); }

/* Ping ripple — only animates while hovered */
.btn-subtle-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--on-dark-em);
  opacity: 0;
  transform: scale(1);
}
.btn-subtle:hover .btn-subtle-dot::before {
  animation: btn-subtle-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes btn-subtle-ping {
  0%   { transform: scale(1);   opacity: 0.7; }
  75%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Pulsing inner ring — appears on hover */
.btn-subtle-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(243, 207, 183, 0);
  z-index: 1;
  pointer-events: none;
  transition: border-color 0.5s var(--ease);
}
.btn-subtle:hover .btn-subtle-ring {
  border-color: rgba(243, 207, 183, 0.35);
  animation: btn-subtle-pulse 2s ease-in-out infinite;
}
@keyframes btn-subtle-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Light variant — for cream/light sections */
.btn-subtle--light {
  border-color: rgba(184, 105, 74, 0.55);
  color: var(--rust-ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.btn-subtle--light::before {
  background: linear-gradient(90deg, transparent 0%, rgba(184, 105, 74, 0.14) 50%, transparent 100%);
}
.btn-subtle--light::after {
  background: linear-gradient(90deg, transparent 0%, rgba(184, 105, 74, 0.10) 50%, transparent 100%);
}
.btn-subtle--light:hover {
  border-color: var(--rust);
  box-shadow: 0 0 30px -8px rgba(184, 105, 74, 0.35);
}
.btn-subtle--light:hover .btn-subtle-text { color: var(--rust-ink); }
.btn-subtle--light .btn-subtle-dot { background: var(--rust); }
.btn-subtle--light .btn-subtle-dot::before { background: var(--rust); }
.btn-subtle--light:hover .btn-subtle-dot {
  background: var(--rust-ink);
  box-shadow: 0 0 16px 0 rgba(184, 105, 74, 0.5);
}
.btn-subtle--light .btn-subtle-ring { border-color: transparent; }
.btn-subtle--light:hover .btn-subtle-ring { border-color: rgba(184, 105, 74, 0.32); }

@media (prefers-reduced-motion: reduce) {
  .btn-subtle, .btn-subtle:hover { transform: none; }
  .btn-subtle::before { transition: none; }
  .btn-subtle-dot::before, .btn-subtle:hover .btn-subtle-ring { animation: none; }
}

/* TYPOGRAPHY */
.eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rust-ink); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--rust); opacity: 0.6; }
.eyebrow-dark { color: var(--on-dark-em); }
.eyebrow-dark::before { background: var(--on-dark-em); }

.display { font-family: var(--serif); font-size: clamp(42px, 6vw, 88px); font-weight: 500; line-height: 1.04; letter-spacing: -0.005em; color: var(--ink); max-width: 20ch; }
.display em { font-style: italic; color: var(--rust); font-weight: 500; }
.display-dark { font-family: var(--serif); font-size: clamp(42px, 6vw, 88px); font-weight: 500; line-height: 1.04; letter-spacing: -0.005em; color: var(--cream); max-width: 20ch; }
.display-dark em { font-style: italic; color: var(--on-dark-em); font-weight: 500; }

.lede { font-size: clamp(17px, 1.02rem + 0.45vw, 21px); line-height: 1.7; color: var(--ink-soft); }
.lede-dark { font-size: clamp(17px, 1.02rem + 0.45vw, 21px); line-height: 1.7; color: var(--on-dark-body); }

/* SECTIONS */
/* overflow-x: clip on every section so any descendant that uses 100vw
   width or pre-reveal translateX(±110%) never bleeds into the page
   scroll context. Belt-and-braces with html/body overflow-x: clip. */
section { padding: 130px 56px; position: relative; overflow-x: clip; }
/* On the terracotta (--frame) background, the rust accent (--on-dark-em,
   #b8694a) is nearly the same hue as the bg and disappears (e.g. the italic
   "Forward." emphasis). Scope the accent to a light peach here so italics,
   eyebrows, and stat numerals stay legible. (Matches the .final-cta override.) */
.section-dark { background: var(--frame); color: var(--cream); --on-dark-em: #f3cfb7; }
.section-dark p { color: var(--on-dark-body); }
.section-cream { background: var(--cream); }
.section-cream-2 { background: var(--cream-2); }
.section-head-split { max-width: 1200px; margin: 0 auto 80px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: end; }

/* ============================================================
   STAT STRIP — text-only quick facts
   ============================================================ */

.stat-strip-section {
  background: var(--cream);
  padding: 100px 56px 0;
}
.stat-strip {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 44px 36px;
  border-right: 1px solid var(--rule);
  transition: background 0.4s var(--ease);
}
.stat-card:last-child { border-right: none; }
.stat-card:hover { background: rgba(184,105,74,.06); }
.stat-num {
  font-family: var(--serif);
  font-size: clamp(48px, 5.4vw, 76px);
  font-weight: 500;
  color: var(--ink);
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.stat-num sup {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  vertical-align: super;
  margin-left: 4px;
  color: var(--rust);
  letter-spacing: 0.04em;
}
.stat-divider {
  width: 28px;
  height: 1px;
  background: var(--rust);
  opacity: 0.5;
  margin-top: 4px;
}
.stat-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 18ch;
}

/* GRAIN */
.grain { position: relative; }
.grain::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"); opacity: 0.22; pointer-events: none; mix-blend-mode: soft-light; z-index: 4; }

/* COUNTER ROW — sits inside the right column under the body copy */
.counter-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 38px 0 0;
  border-top: 1px solid var(--on-dark-rule);
  padding-top: 28px;
}
.counter { text-align: left; }
.counter .count {
  font-family: var(--serif);
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-block;
}
.counter .plus {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  color: var(--cream);
  margin-left: 2px;
}
.counter p {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--on-dark-em);
  opacity: 0.85;
  line-height: 1.45;
}

/* APPROACH — large alternating cards, big serif numerals, slide-in from
   alternating sides (CPA "How It Works" pattern adapted to our palette). */
.approach-list {
  list-style: none;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.approach-item {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr;
  gap: 40px;
  align-items: center;
  background: #fff;
  border-radius: 28px;
  padding: 60px 70px;
  border: 1px solid var(--rule);
  box-shadow: 0 18px 40px -28px rgba(43, 33, 27, 0.28);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.approach-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -28px rgba(43, 33, 27, 0.38);
}
.approach-item--rev {
  grid-template-columns: 1fr minmax(160px, 240px);
}
.approach-item--rev .approach-body {
  text-align: right;
  align-items: flex-end;
}
.approach-num {
  font-family: var(--serif);
  font-size: clamp(72px, 9vw, 132px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: center;
}
.approach-item--rev .approach-num {
  text-align: center;
}
.approach-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.approach-kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--rust);
}
.approach-body h3 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.12;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.008em;
  margin: 0;
}
.approach-body p {
  font-size: clamp(15.5px, 0.95rem + 0.3vw, 17.5px);
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 60ch;
  margin: 0;
}
.approach-item--rev .approach-body p {
  margin-left: auto;
}

/* Slide-in animations — left/right alternating per card */
.slide-in-left {
  opacity: 0;
  transform: translateX(-72px);
  transition: opacity 0.95s var(--ease), transform 1s var(--ease);
}
.slide-in-right {
  opacity: 0;
  transform: translateX(72px);
  transition: opacity 0.95s var(--ease), transform 1s var(--ease);
}
.slide-in-left.in,
.slide-in-right.in {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 768px) {
  .approach-list { gap: 18px; }
  .approach-item,
  .approach-item--rev {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 36px 28px;
    border-radius: 22px;
  }
  .approach-item--rev .approach-body {
    text-align: left;
    align-items: flex-start;
  }
  .approach-item--rev .approach-body p { margin-left: 0; }
  .approach-num {
    text-align: left;
    font-size: clamp(54px, 14vw, 88px);
  }
  .approach-item--rev .approach-num { text-align: left; }
  /* On mobile the side-slide is too dramatic — short slide */
  .slide-in-left, .slide-in-right { transform: translateX(0) translateY(28px); }
  .slide-in-left.in, .slide-in-right.in { transform: translateX(0) translateY(0); }
}

/* SINGLE-ROW STEP GRID — boxes always visible, big synchronized offset.
   JS adds .in to all three blocks at once, 1s after the grid becomes
   visible. Then 01/03 lift up and 02 drops down with high amplitude. */
.stagger-grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  border: none;
  /* Reveal offsets lift odd cards 50px and drop the middle card 50px.
     overflow:hidden (below) clips the mobile translateX(±110%) entry, but
     it would also crop those vertical offsets — so pad top/bottom to give
     the ±50px shift room and keep every card border intact. */
  padding: 64px 0;
  overflow: hidden;
}
.stagger-block {
  min-height: 340px;
  padding: 42px 38px 46px;
  border: 1px solid rgba(246, 227, 207, 0.22);
  border-radius: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition:
    transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background 0.5s var(--ease),
    border-color 0.5s var(--ease);
}
.stagger-block:hover {
  border-color: rgba(246, 227, 207, 0.45);
}

/* All three blocks move at once when JS adds .in (1s after visibility) */
.stagger-block:nth-child(odd).in  { transform: translateY(-50px); }
.stagger-block:nth-child(even).in { transform: translateY(50px); }
.stagger-num {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--on-dark-em);
  background: transparent;
  margin-bottom: 36px;
  flex-shrink: 0;
  transition: color 0.4s var(--ease);
}
.stagger-block h3 { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 36px); font-weight: 500; line-height: 1.1; color: var(--cream); margin-bottom: 18px; }
.stagger-block p { font-size: clamp(15px, 0.92rem + 0.3vw, 17px); line-height: 1.7; color: var(--on-dark-muted); max-width: 38ch; }
.stagger-block:hover { background: rgba(184,105,74,.14); }
.stagger-block:hover .stagger-num { color: #fff4e6; }
.stagger-block:hover p { color: var(--on-dark-body); }

/* CONVEYOR — auto-scrolling facility showcase, two opposing rows.
   Full-bleed via width:100vw + negative side-margins to escape section
   padding. Relies on html/body overflow-x:clip to absorb any subpixel
   bleed (without it, mobile users can swipe the page horizontally). */
.conveyor {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Soft warp at both edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 97%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 5%, black 97%, transparent 100%);
}

.conveyor-track {
  display: flex;
  /* margin-right per card instead of flex gap — flex gap only inserts space BETWEEN
     items (N-1 gaps for N items), so a -50% translate slides 0.5 gap short of one
     full set and leaves a visible empty slot at every wrap. With margin-right on
     every card, each set is N cards + N gaps wide, and -50% slides exactly one
     full period for a truly seamless loop. */
  width: max-content;
  will-change: transform;
  padding: 4px 0;
}

.conveyor-track--left {
  animation: conveyor-scroll-left 55s linear infinite;
}
.conveyor-track--right {
  animation: conveyor-scroll-right 70s linear infinite;
}
/* Pause on hover (desktop) and on touch (mobile) so users can read/swipe a card */
.conveyor:hover .conveyor-track,
.conveyor-track:active { animation-play-state: paused; }

@keyframes conveyor-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes conveyor-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.conveyor-card {
  position: relative;
  flex-shrink: 0;
  width: 540px;          /* wide — for landscape aerials */
  height: 340px;
  margin-right: 20px;    /* per-card trailing gap so the marquee loop is seamless (see .conveyor-track note) */
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
  background: #1a1310;
  box-shadow: 0 18px 38px -22px rgba(43,33,27,.4);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.conveyor-card--tall {
  width: 380px;          /* narrower — for portrait/interior shots */
}

.conveyor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -28px rgba(43,33,27,.5);
}

.conv-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.6s var(--ease);
  z-index: 1;
}
.conveyor-card:hover .conv-img { transform: scale(1.06); }

.conveyor-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.26) 0%, rgba(0,0,0,.06) 30%, transparent 55%);
  z-index: 2;
  pointer-events: none;
}

/* Liquid-glass CTA pill — sits at the top of the photo */
.conveyor-card figcaption {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  width: fit-content;
  max-width: calc(100% - 36px);

  /* Liquid glass surface */
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 100%);
  border: 1px solid rgba(255,255,255,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 14px 30px -12px rgba(0,0,0,0.45);

  color: #fff4e6;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition:
    background 0.45s var(--ease),
    border-color 0.45s var(--ease),
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease),
    padding-right 0.45s var(--ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conveyor-card figcaption::after {
  content: none;
}

.conveyor-card:hover figcaption {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.18) 100%);
  border-color: rgba(255,255,255,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    0 18px 38px -12px rgba(0,0,0,0.55);
}

/* Mini glass chip for the number */
.conv-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.26);
  border: 1px solid rgba(255,255,255,0.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  color: #fff4e6;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  flex-shrink: 0;
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .conveyor-track { animation: none; }
}

/* ARROW LINK */
.link-arrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 22px; color: var(--rust); font-style: italic; border-bottom: 1px solid var(--rust); padding-bottom: 6px; transition: gap 0.35s var(--ease); margin-top: 60px; }
.link-arrow .arrow { transition: transform 0.4s var(--ease); display: inline-block; }
.link-arrow:hover { gap: 18px; }
.link-arrow:hover .arrow { transform: translateX(6px); }

/* PULLQUOTE */
.pullquote-section { padding: 160px 56px; }
.quote-mark {
  font-family: var(--serif);
  font-size: 120px;
  line-height: 0.7;
  color: var(--rust);
  display: block;
  text-align: center;
  margin-bottom: 24px;
  opacity: 0.4;
}
.quote-text { font-family: var(--serif); font-size: clamp(32px, 4vw, 56px); font-weight: 400; line-height: 1.25; letter-spacing: -0.005em; color: var(--ink); text-align: center; max-width: 1100px; margin: 0 auto; }
.quote-text em { font-style: italic; color: var(--rust); font-weight: 500; }
.quote-attrib { margin-top: 40px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); display: block; text-align: center; }

/* FINAL CTA */
.final-cta {
  padding: 160px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--frame);
}

/* Unicorn Studio WebGL backdrop — fills the section, hue-rotated into rust */
.cta-unicorn {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Default project comes back blue; flip the hue ~170° to land in orange,
     soak saturation slightly so it doesn't read neon. */
  filter: hue-rotate(170deg) saturate(120%) brightness(0.85);
}
.cta-unicorn canvas,
.cta-unicorn > * {
  width: 100% !important;
  height: 100% !important;
}

/* Tint overlay — pushes the scene into our rust palette and guarantees
   readable contrast for headline + body copy on top */
.cta-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(168, 91, 63, 0.20) 0%, rgba(168, 91, 63, 0.62) 70%, rgba(43, 33, 27, 0.78) 100%),
    linear-gradient(180deg, rgba(43, 33, 27, 0.25) 0%, transparent 35%, transparent 65%, rgba(43, 33, 27, 0.4) 100%);
  mix-blend-mode: normal;
}

.cta-content {
  position: relative;
  z-index: 2;
}

.final-cta .display-dark { margin: 0 auto 28px; }
.final-cta .lede-dark    { max-width: 56ch; margin: 0 auto 40px; }
.final-cta .cta-btns     { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
/* The Unicorn Studio backdrop renders rust gradients across this section.
   The global --on-dark-em is rust (#b8694a), which disappears on the rust
   backdrop — both italic emphasis text and the outline-button border/color
   (set via inline `style="border-color: var(--on-dark-em); color: var(--on-dark-em);"`).
   Scope the variable back to cream-peach inside the CTA so both italics
   and buttons stay legible against the rust. */
.final-cta { --on-dark-em: #f3cfb7; }

/* ACCORDION PRINCIPLES — approach section */
#approach { padding-bottom: 80px; }

.accord-header {
  max-width: 1200px;
  margin: 0 auto 64px;
}
.accord-header .display {
  max-width: none;
  margin: 16px 0 24px;
}
.accord-sub { max-width: 54ch; }

.accord-list {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}

.accord-item { border-bottom: 1px solid var(--rule); }

.accord-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 88px 1fr 52px;
  align-items: center;
  padding: 28px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.accord-trigger:hover .accord-title { color: var(--rust); }

.accord-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 34px;
  font-weight: 500;
  color: var(--rust);
  line-height: 1;
}

.accord-meta {
  display: flex;
  align-items: center;
  gap: 28px;
}

.accord-kicker {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
  flex-shrink: 0;
  min-width: 64px;
}

.accord-title {
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 26px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  transition: color 0.3s var(--ease);
}

.accord-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff4e6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.55) rotate(45deg);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.accord-item.open .accord-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Smooth height via grid rows */
.accord-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.accord-item.open .accord-panel { grid-template-rows: 1fr; }

.accord-inner {
  overflow: hidden;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding-bottom: 52px;
  padding-left: 116px;
}

.accord-photo {
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  background: var(--cream-3);
  background-size: cover;
  background-position: center;
}

.accord-content p {
  font-size: clamp(15.5px, 0.95rem + 0.3vw, 17.5px);
  line-height: 1.72;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.accord-content p strong {
  color: var(--ink);
  font-weight: 600;
}

.accord-examples {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.accord-examples-kicker {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rust);
  display: block;
  margin-bottom: 18px;
}

.accord-examples-list {
  list-style: none;
  counter-reset: accord-counter;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.accord-examples-list li {
  counter-increment: accord-counter;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.accord-examples-list li::before {
  content: counter(accord-counter, lower-roman) ".";
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--rust);
  line-height: 1.62;
}

/* PRINCIPLES STICKY STACK */
.principles-stack {
  position: relative;
  padding-bottom: 0;
}
/* Cards have compensating padding-bottom so all 4 unstick simultaneously
   (top + height = constant), which prevents the unstick chaos where
   later cards visually cover earlier ones during scroll-out. */
.principle-card {
  position: sticky;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: 0 12px 48px -16px rgba(43, 33, 27, 0.14);
  margin-bottom: 0;
  background: #fff;
}
.principle-card:last-child { margin-bottom: 35vh; }

/* Sticky positions (60px apart so headers peek)
   + per-card padding-bottom that compensates for the top: difference,
   so card1.top + card1.height = card2.top + card2.height = ... */
.principle-card:nth-child(1) { top: 110px; z-index: 1; padding-bottom: 180px; }
.principle-card:nth-child(2) { top: 170px; z-index: 2; padding-bottom: 120px; }
.principle-card:nth-child(3) { top: 230px; z-index: 3; padding-bottom:  60px; }
.principle-card:nth-child(4) { top: 290px; z-index: 4; padding-bottom:   0;   }

/* Alternating tints so stacked card edges are distinguishable */
.principle-card:nth-child(odd)  { background: #fff; }
.principle-card:nth-child(even) { background: var(--cream); }

.principle-head {
  display: grid;
  grid-template-columns: 80px auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 44px;
  height: 60px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}

/* Reuse accord-num, accord-kicker, accord-title from accordion styles */

.principle-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* FIXED height (not min) so every card in the sticky pile is exactly the
     same total height. The compensating padding-bottom on each card assumes
     equal bodies; when copy length varies, a taller card's body peeks out
     between it and the next card as the stack scrolls. Card is overflow:hidden
     so the rare longer copy clips cleanly instead of opening a gap. Capped in
     px so short tablet-landscape viewports don't clip the copy. */
  height: min(62vh, 520px);
}

.principle-img {
  background-size: cover;
  background-position: center;
  height: 100%;
  min-height: 0;
}

.principle-copy {
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.principle-copy p {
  font-size: clamp(13.5px, 0.82rem + 0.2vw, 15px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 13px;
}
.principle-copy p strong {
  color: var(--ink);
  font-weight: 600;
}

/* MOBILE — swap sticky-pile for snap carousel (matches about-us values cards) */
@media (max-width: 960px) {
  .principles-stack {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    padding: 18px 10vw 24px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .principles-stack::-webkit-scrollbar { display: none; }

  .principle-card,
  .principle-card:nth-child(1),
  .principle-card:nth-child(2),
  .principle-card:nth-child(3),
  .principle-card:nth-child(4),
  .principle-card:last-child {
    position: relative;
    top: auto;
    z-index: auto;
    flex: 0 0 80vw;
    width: 80vw;
    max-width: 420px;
    margin: 0;
    padding-bottom: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--rule);
    background: #fff;
    box-shadow: 0 14px 38px -22px rgba(43, 33, 27, 0.18);
    display: flex;
    flex-direction: column;
  }

  .principle-head {
    grid-template-columns: 38px 1fr;
    padding: 14px 18px;
    gap: 14px;
    height: auto;
    min-height: 60px;
  }
  .principle-head .accord-kicker { display: none; }
  .principle-head .accord-title { font-size: 15px; line-height: 1.25; }
  .principle-head .accord-num { font-size: 26px; }

  .principle-body {
    grid-template-columns: 1fr;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  .principle-img {
    min-height: 0;
    height: 44vw;
    max-height: 220px;
    flex: 0 0 auto;
  }
  .principle-copy { padding: 22px 20px; }
  .principle-copy p { font-size: 14.5px; }
}
/* Carousel nav (arrows + dots) — visible only on mobile */
.carousel-nav { display: none; }
@media (max-width: 960px) {
  .carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 6px 22px 24px;
  }
  .carousel-arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: #fff;
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px -6px rgba(43, 33, 27, 0.2);
    transition: transform 180ms ease, background 180ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .carousel-arrow:active {
    transform: scale(0.92);
    background: var(--cream);
  }
  .carousel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(43, 33, 27, 0.22);
    transition: background 220ms ease, transform 220ms ease;
  }
  .carousel-dot.is-active {
    background: var(--rust);
    transform: scale(1.4);
  }
}

@media (max-width: 560px) {
  .principles-stack { padding: 18px 7.5vw 24px; gap: 14px; }
  .principle-card,
  .principle-card:nth-child(1),
  .principle-card:nth-child(2),
  .principle-card:nth-child(3),
  .principle-card:nth-child(4),
  .principle-card:last-child {
    flex: 0 0 85vw;
    width: 85vw;
  }
  .principle-img    { height: 50vw; max-height: 200px; }
  .principle-head   { padding: 14px 18px; min-height: 60px; }
  .principle-copy   { padding: 20px 18px; }
}

/* WHY WE EXIST — bento grid */
#why {
  background: var(--cream);
}

.bento-why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Cell placement */
.bento-why > .bento-card:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; } /* headline */
.bento-why > .bento-card:nth-child(2) { grid-column: 3; grid-row: 1; }          /* stat 50k */
.bento-why > .bento-card:nth-child(3) { grid-column: 3; grid-row: 2; }          /* stat 72  */
.bento-why > .bento-card:nth-child(4) { grid-column: 1; grid-row: 3; }          /* body 1   */
.bento-why > .bento-card:nth-child(5) { grid-column: 2; grid-row: 3; }          /* body 2   */
.bento-why > .bento-card:nth-child(6) { grid-column: 3; grid-row: 3; }          /* stat 100 */

.bento-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  overflow: hidden;
}

.bento-card--headline {
  background: var(--cream-2);
  border-color: transparent;
  justify-content: flex-end;
  gap: 22px;
  min-height: 380px;
}

.bento-card--orange {
  background: var(--frame);
  border-color: transparent;
  color: var(--cream);
}

.bento-card--dark {
  background: var(--ink);
  border-color: transparent;
  color: var(--on-dark-body);
}

.bento-card p {
  font-size: clamp(15px, 0.92rem + 0.3vw, 17px);
  line-height: 1.72;
  color: var(--ink-soft);
  margin-top: auto;
}

.bento-card--orange p,
.bento-card--dark p {
  color: var(--on-dark-body);
  opacity: 0.82;
  font-size: 13.5px;
}

.bento-kicker {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 227, 207, 0.6);
  margin-bottom: 6px;
}
.bento-kicker--light {
  color: var(--rust-ink);
  opacity: 0.65;
}

.bento-num {
  font-family: var(--serif);
  font-size: clamp(38px, 6.5vw, 84px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cream);
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  flex: 1;
  white-space: nowrap;
  max-width: 100%;
}
@media (max-width: 560px) {
  .bento-num { font-size: clamp(28px, 9vw, 44px); }
}
.bento-num--accent { color: var(--rust); }

.bento-plus {
  font-size: 0.48em;
  opacity: 0.72;
}

/* FAQ BENTO */
.faq-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Cell placement */
.faq-bento > *:nth-child(1) { grid-column: 1;     grid-row: 1; }      /* header     */
.faq-bento > *:nth-child(2) { grid-column: 2;     grid-row: 1; }      /* ages       */
.faq-cell-tall               { grid-column: 3;     grid-row: 1 / 3; }  /* referral   */
.faq-cell-wide               { grid-column: 1 / 3; grid-row: 2; }      /* therapies  */
.faq-bento > *:nth-child(5) { grid-column: 1;     grid-row: 3; }      /* stay       */
.faq-bento > *:nth-child(6) { grid-column: 2;     grid-row: 3; }      /* families   */
.faq-bento > *:nth-child(7) { grid-column: 3;     grid-row: 3; }      /* licensed   */

.faq-card {
  border-radius: 22px;
  padding: 38px 42px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
}

.faq-card--header {
  background: var(--cream-2);
  border: 1px solid var(--rule);
  justify-content: flex-end;
}
.faq-card--header .display { font-size: clamp(34px, 3.8vw, 56px); max-width: none; margin-top: 10px; }

.faq-card--orange {
  background: var(--frame);
  color: var(--cream);
}
.faq-card--dark {
  background: var(--ink);
  color: var(--on-dark-body);
}
.faq-card--light {
  background: #fff;
  border: 1px solid var(--rule);
  color: var(--ink);
}

.faq-q {
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: inherit;
}
.faq-card--dark .faq-q  { color: #fff4e6; }
.faq-card--orange .faq-q { color: var(--cream); }

.faq-card p {
  font-size: clamp(14.5px, 0.9rem + 0.25vw, 16.5px);
  line-height: 1.7;
  flex: 1;
}
.faq-card--light p  { color: var(--ink-soft); }
.faq-card--orange p { color: rgba(246,238,225,.82); }
.faq-card--dark p   { color: var(--on-dark-body); opacity: 0.82; }

.faq-card--dark p strong,
.faq-card--orange p strong { color: inherit; opacity: 1; font-weight: 600; }

.faq-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(246,238,225,.2);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--on-dark-em);
  transition: gap 0.35s var(--ease);
}
.faq-link:hover { gap: 14px; }
.faq-link .arrow { display: inline-block; transition: transform 0.35s var(--ease); }
.faq-link:hover .arrow { transform: translateX(4px); }

@media (max-width: 960px) {
  .faq-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }
  .faq-bento > *:nth-child(1) { grid-column: 1 / 3; grid-row: auto; }
  .faq-bento > *:nth-child(2) { grid-column: auto;  grid-row: auto; }
  .faq-cell-tall               { grid-column: auto;  grid-row: auto; }
  .faq-cell-wide               { grid-column: 1 / 3; grid-row: auto; }
  .faq-bento > *:nth-child(5),
  .faq-bento > *:nth-child(6),
  .faq-bento > *:nth-child(7) { grid-column: auto;  grid-row: auto; }
  .faq-card { padding: 28px 30px; min-height: 0; border-radius: 16px; }
}
@media (max-width: 640px) {
  .faq-bento {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .faq-bento > *:nth-child(n) { grid-column: 1; grid-row: auto; }
  .faq-card { padding: 22px 22px; }
}

/* SCROLL REVEALS */
.reveal-up { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0ms); }
.reveal-up.in { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity: 0; transform: translateY(36px) scale(.985); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.reveal-scale.in { opacity: 1; transform: translateY(0) scale(1); }
.reveal-lines .rl-word { opacity: 0; transform: translateY(40px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); transition-delay: var(--d, 0ms); will-change: transform, opacity; display: inline-block; }
.reveal-lines.in .rl-word { opacity: 1; transform: translateY(0); }

/* FOOTER */
.footer { background: #2b211b; color: #d9c9ad; padding: 100px 56px 50px; font-size: 14px; position: relative; z-index: 10; }
.foot-top { display: grid; grid-template-columns: 1.3fr 2fr; gap: 70px; padding-bottom: 70px; border-bottom: 1px solid rgba(217,201,173,.16); max-width: 1400px; margin: 0 auto; }
.foot-brand .logo-word { color: #fff4e6; font-family: var(--serif); font-size: 32px; display: block; margin-bottom: 14px; }
.foot-brand p { color: #b6a68f; line-height: 1.7; max-width: 40ch; font-size: 15px; margin-bottom: 24px; }
.foot-contact { font-size: 13px; color: #b6a68f; line-height: 1.9; }
.foot-contact strong { color: #f3cfb7; font-weight: 500; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.foot-cols h5 { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #f3cfb7; margin-bottom: 18px; font-weight: 500; }
.foot-cols a { display: block; padding: 8px 0; color: #d9c9ad; transition: color 0.3s var(--ease); font-size: clamp(14px, 0.85rem + 0.15vw, 15.5px); }
.foot-cols a:hover { color: #fff4e6; }
.foot-bot { padding-top: 30px; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; font-size: 12px; color: #8a7a6b; letter-spacing: 0.06em; }

/* SCROLL PROGRESS BAR */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}
.scroll-progress-fill {
  height: 100%;
  width: 0;
  background: var(--rust);
  transition: width 0.1s linear;
}

/* RESPONSIVE */
@media (max-width: 960px) {
  section { padding: 90px 24px; }
  .accord-trigger { grid-template-columns: 56px 1fr 44px; padding: 20px 0; }
  .accord-num { font-size: 24px; }
  .accord-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .accord-kicker { min-width: 0; }
  .accord-inner { grid-template-columns: 1fr; gap: 24px; padding-left: 0; padding-bottom: 36px; }
  .accord-photo { aspect-ratio: 16 / 9; }
  .bento-why {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .bento-why > .bento-card:nth-child(1) { grid-column: 1 / 3; grid-row: 1; min-height: 280px; }
  .bento-why > .bento-card:nth-child(2) { grid-column: 1; grid-row: 2; }
  .bento-why > .bento-card:nth-child(3) { grid-column: 2; grid-row: 2; }
  .bento-why > .bento-card:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }
  .bento-why > .bento-card:nth-child(5) { grid-column: 1 / 3; grid-row: 4; }
  .bento-why > .bento-card:nth-child(6) { grid-column: 1 / 3; grid-row: 5; }
  .bento-card,
  .faq-card { padding: 22px 18px; border-radius: 16px; }
  .bento-card p { font-size: 13.5px; line-height: 1.55; }
  .bento-eyebrow { font-size: 10px !important; letter-spacing: 0.16em; }
  .floating-nav { padding: 10px 14px 10px 20px; top: 14px; left: 14px; right: 14px; }
  .floating-nav nav,
  .floating-nav .nav-cta { display: none; }
  .floating-nav .caret { display: none; }

  /* Hamburger button */
  .nav-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
  }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Mobile menu — fixed overlay below the nav, ALPINE pattern */
  #mobile-menu {
    display: block;
    position: fixed;
    top: 78px;          /* below the floating nav (14px top + ~60px height + 4px gap) */
    left: 14px;
    right: 14px;
    max-height: calc(100dvh - 92px);
    z-index: 49;
    overflow-y: auto;
    background: rgba(255, 251, 246, 0.96);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 22px;
    padding: 16px 18px 22px;
    box-shadow: 0 16px 48px -8px rgba(43, 33, 27, 0.18);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s var(--ease), opacity 0.32s var(--ease);
  }
  #mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .m-links { list-style: none; margin: 0; padding: 0; }
  .m-links > li { border-bottom: 1px solid var(--rule); }
  .m-links > li:last-child { border-bottom: 0; }
  .m-links > li > a {
    display: block;
    padding: 14px 4px;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    min-height: 44px;
    line-height: 1.4;
    text-decoration: none;
  }
  .m-sublinks {
    list-style: none;
    margin: 0 0 6px;
    padding: 0 0 4px 14px;
  }
  .m-sublinks li { border-bottom: 0; }
  .m-sublinks a {
    display: block;
    padding: 10px 4px;
    font-size: 13px;
    color: var(--ink-soft);
    min-height: 40px;
    text-decoration: none;
  }
  .m-section-label {
    display: block;
    padding: 10px 4px 4px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .m-cta {
    display: block;
    margin-top: 16px;
    text-align: center;
    background: var(--ink);
    color: var(--cream);
    padding: 14px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-decoration: none;
    min-height: 48px;
    line-height: 20px;
  }
  /* Hero card padding handled in dedicated 768px block above; do not zero
     it out here or the glass card loses interior breathing room. */
  .section-head-split { grid-template-columns: 1fr; gap: 24px; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-card { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 32px 24px; }
  .stat-card:nth-child(2n) { border-right: none; }
  .stat-card:nth-last-child(-n+2) { border-bottom: none; }
  .stat-strip-section { padding: 70px 24px 0; }
  .conveyor { gap: 14px; }
  .conveyor-card { width: 360px; height: 230px; }
  .conveyor-card--tall { width: 250px; height: 230px; }
  .conveyor-track { gap: 14px; }
  .conveyor-track--left { animation-duration: 45s; }
  .conveyor-track--right { animation-duration: 55s; }
  .counter-row { grid-template-columns: 1fr; gap: 50px; }
  .foot-top { grid-template-columns: 1fr; gap: 50px; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .foot-bot { flex-direction: column; gap: 8px; }
  .footer { padding: 70px 24px 40px; }
  .stagger-grid { display: flex; flex-direction: column; gap: 16px; }
  .stagger-block { min-height: 0; padding: 40px 28px 44px; }
  .stagger-num { margin-bottom: 36px; }

  /* Mobile slide-in: odd cards (1, 3) from left, even card (2) from right */
  .stagger-block {
    transform: translateX(-110%);
    opacity: 0;
    transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.6s ease;
    will-change: transform, opacity;
  }
  .stagger-block:nth-child(even) {
    transform: translateX(110%);
  }
  .stagger-block.in,
  .stagger-block:nth-child(odd).in,
  .stagger-block:nth-child(even).in {
    transform: translateX(0) !important;
    opacity: 1;
  }
}
@media (max-width: 520px) {
  .foot-cols { grid-template-columns: 1fr; gap: 24px; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat-card { border-right: none; border-bottom: 1px solid var(--rule); }
  .stat-card:last-child { border-bottom: none; }
  .pullquote-section, .final-cta { padding: 100px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal-up, .reveal-scale, .reveal-lines .rl-word, .stagger-block, .slide-in-left, .slide-in-right { opacity: 1; transform: none; }
  /* Note: hero copy stays hidden until .revealed class is added, even with reduce-motion.
     The transition is just instant instead of animated. */
}

/* ============================================================
   v2 ADDITIONS — dual-CTA nav, mobile CTA spacing, Careers page,
   reveal-delay utilities. (Appended; no inline styles required.)
   ============================================================ */

/* Reveal-delay utilities — replace inline style="--d:.." usage */
.rd-1 { --d: 120ms; }
.rd-2 { --d: 240ms; }
.rd-3 { --d: 360ms; }

/* Small spacing helpers (Careers page) */
.lede-gap    { margin-top: 18px; }
.lede-gap-sm { margin-top: 16px; }

/* Nav now carries two CTAs: Foster Now + Make a Referral */
.nav-cta { display: flex; align-items: center; gap: 8px; }
.floating-nav .nav-cta .btn {
  padding: 9px 15px;
  min-height: 0;
  font-size: clamp(12.5px, 0.75rem + 0.15vw, 14px);
}

/* Mobile menu stacked CTAs */
#mobile-menu .m-cta + .m-cta { margin-top: 10px; }

/* ---- CAREERS PAGE ---- */
.careers-hero-image { background-image: url('assets/lifestyle/family_porch_swing.jpg'); }
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* Outline buttons sit on a dark photo here — force a light treatment so the
   rust border/text stays legible against the image. */
.careers-hero-call, .careers-cta-call {
  border-color: rgba(255, 244, 230, 0.6);
  color: #fff4e6;
  background: transparent;
}
.careers-hero-call:hover, .careers-cta-call:hover {
  background: rgba(255, 244, 230, 0.12);
  border-color: rgba(255, 244, 230, 0.9);
  color: #fff4e6;
}

.roles-grid {
  list-style: none;
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 0;
}
.role-chip {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 24px 26px;
  font-family: var(--serif);
  font-size: clamp(16px, 1rem + 0.3vw, 20px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.role-chip:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 18px 40px -24px rgba(43, 33, 27, 0.34);
}
.role-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--rust);
  flex-shrink: 0;
}
@media (max-width: 900px) { .roles-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .roles-grid { grid-template-columns: 1fr; }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
}

/* Tablet band (961–1100px): desktop nav still shows here but now carries a
   2nd CTA. Tighten logo / link gap / CTA padding so the single-row pill
   never crowds or wraps before the 960px hamburger takes over. */
@media (min-width: 961px) and (max-width: 1100px) {
  .floating-nav { padding: 8px 14px; }
  .floating-nav .logo-word { font-size: 16px; }
  .floating-nav .nav-links { gap: 16px; }
  .floating-nav .nav-links a { font-size: 12.5px; }
  .nav-cta { gap: 6px; }
  .floating-nav .nav-cta .btn { padding: 8px 12px; font-size: 12px; }
}
/* ============================================================
   CAMPUS PAGE — interactive aerial map + room index
   ============================================================ */
.campus-head .section-head-split { margin-bottom: 44px; }

.campus-map {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #1a120e;
  box-shadow: 0 24px 60px -30px rgba(43, 33, 27, .45);
  isolation: isolate;
}
.campus-map-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.campus-map-hint {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 3;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff4e6;
  background: rgba(43, 33, 27, .5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 7px 13px;
  border-radius: 999px;
  pointer-events: none;
}

/* PINS — transparent hit-target centred on each baked map marker, with a
   pulsing ring + centre dot to signal it is interactive. */
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.map-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(255, 59, 48, 0.9);
  box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.5);
  animation: map-pin-pulse 2.2s var(--ease) infinite;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.map-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.9);
}
.map-pin:hover::before,
.map-pin:focus-visible::before { border-color: #fff; transform: translate(-50%, -50%) scale(1.15); }
.map-pin.is-active::before { animation: none; border-color: #fff; transform: translate(-50%, -50%) scale(1.25); }
@keyframes map-pin-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 59, 48, .5); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 59, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}
@media (prefers-reduced-motion: reduce) { .map-pin::before { animation: none; } }

/* Pin positions (percent of the aerial image — tweak to taste) */
.map-pin[data-pin="admin"]    { left: 12.5%; top: 31%; }
.map-pin[data-pin="res2"]     { left: 21%;   top: 37%; }
.map-pin[data-pin="library"]  { left: 8.5%;  top: 58%; }
.map-pin[data-pin="res1"]     { left: 17.5%; top: 66%; }
.map-pin[data-pin="gameroom"] { left: 49%;   top: 31%; }
.map-pin[data-pin="res4"]     { left: 67%;   top: 31%; }
.map-pin[data-pin="res3"]     { left: 51%;   top: 69%; }
.map-pin[data-pin="res5"]     { left: 86.5%; top: 59%; }
.map-pin[data-pin="gym"]      { left: 63%;   top: 79%; }

/* POPOVER */
.map-popover {
  position: absolute;
  z-index: 6;
  width: min(320px, 80%);
  background: var(--cream);
  border-radius: 18px;
  padding: 20px 22px 22px;
  box-shadow: 0 24px 60px -20px rgba(43, 33, 27, .5);
  border: 1px solid rgba(255, 255, 255, .6);
  opacity: 0;
  transform: translateY(8px) scale(.97);
  transform-origin: top center;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  pointer-events: none;
}
.map-popover.is-open { opacity: 1; transform: none; pointer-events: auto; }
.map-popover[hidden] { display: none; }
.map-popover-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--mute);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}
.map-popover-close:hover { background: var(--cream-2); color: var(--ink); }
.map-popover-title {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 30px 8px 0;
}
.map-popover-text {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.map-popover-links { display: flex; flex-wrap: wrap; gap: 8px; }
.map-popover-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--rust-ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 13px;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.map-popover-link span { transition: transform .25s var(--ease); }
.map-popover-link:hover { background: var(--rust); color: #fff4e6; border-color: var(--rust); }
.map-popover-link:hover span { transform: translateX(3px); }

/* Mobile: popover becomes a bottom sheet so it never overflows a short map */
@media (max-width: 600px) {
  .map-popover {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    border-radius: 22px 22px 0 0;
    padding: 22px 22px calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }
  .map-popover.is-open { transform: none; }
  .campus-map-hint { font-size: 10px; left: 12px; bottom: 12px; }
  .map-pin { width: 52px; height: 52px; }
}

/* ROOM INDEX — playful bento grid of photo tiles (label overlaid on image) */
.room-index-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 14px;
  max-width: 1300px;
  margin: 0 auto;
}
.room-index-card {
  position: relative;
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #1a120e;
  border: 1px solid var(--rule);
  box-shadow: 0 14px 34px -24px rgba(43, 33, 27, .3);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.room-index-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease);
}
.room-index-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 12, 8, .78) 0%, rgba(20, 12, 8, .18) 42%, transparent 68%);
  transition: opacity .4s var(--ease);
}
.room-index-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -26px rgba(43, 33, 27, .42); }
.room-index-card:hover img { transform: scale(1.07); }
.room-index-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
}
.room-index-name { font-family: var(--serif); font-size: clamp(16px, 1.4vw, 21px); font-weight: 500; color: #fff4e6; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.room-index-go { font-family: var(--serif); font-style: italic; font-size: 18px; color: #fff4e6; transition: transform .35s var(--ease); }
.room-index-card:hover .room-index-go { transform: translateX(5px); }

/* Bento size modifiers — 1 big + 2 wide + 8 normal fills a clean 4x4 */
.room-index-card.is-big  { grid-column: span 2; grid-row: span 2; }
.room-index-card.is-wide { grid-column: span 2; }
.room-index-card.is-big .room-index-name { font-size: clamp(22px, 2vw, 30px); }

@media (max-width: 960px) {
  .room-index-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; }
}
@media (max-width: 680px) {
  .room-index-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 12px; }
  .room-index-card.is-big  { grid-column: span 2; grid-row: span 2; }
  .room-index-card.is-wide { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 430px) {
  .room-index-grid { grid-auto-rows: 132px; }
}
/* ============================================================
   CAMPUS PAGE v2 — quick-facts, map+panel stage, legend
   ============================================================ */
/* Quick facts */
.campus-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1500px;
  margin: 0 auto 40px;
}
.campus-stat { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; border-left: 2px solid var(--rust); }
.campus-stat-num { font-family: var(--serif); font-size: clamp(32px, 4vw, 50px); font-weight: 500; line-height: 1; color: var(--ink); letter-spacing: -0.01em; }
.campus-stat-num sup { font-family: var(--sans); font-size: 0.3em; color: var(--rust); vertical-align: super; margin-left: 2px; letter-spacing: 0.04em; }
.campus-stat-label { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--ink-soft); max-width: 20ch; }

/* Stage: map (≈70%) + side panel (≈30%) */
.campus-stage { display: flex; gap: 22px; max-width: 1500px; margin: 0 auto; align-items: stretch; }
.campus-stage .campus-map {
  flex: 0 0 70%;
  max-width: 70%;
  margin: 0;
  border: 1px solid var(--rule);
  /* framed gallery look — white mat + thin rule line + soft drop shadow */
  box-shadow: 0 0 0 7px #fff, 0 0 0 8px var(--rule), 0 30px 70px -34px rgba(43, 33, 27, .5);
}
.campus-panel {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--cream-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: clamp(24px, 2.2vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.campus-panel-inner { width: 100%; }
.campus-panel-eyebrow {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rust-ink);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.campus-panel-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--rust); opacity: .6; }
.campus-panel-title { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; line-height: 1.12; color: var(--ink); margin: 0 0 12px; }
.campus-panel-text  { font-family: var(--sans); font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 18px; }
.campus-panel-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* Pins now TRANSPARENT at rest (the baked red markers show through);
   a white ring appears on hover / focus / active for feedback. */
.map-pin::before { animation: none; border-color: transparent; box-shadow: none; width: 34px; height: 34px; }
.map-pin::after  { content: none; }
.map-pin:hover::before,
.map-pin:focus-visible::before,
.map-pin.is-active::before { border-color: #fff; transform: translate(-50%, -50%) scale(1.12); }

/* Legend chips */
.campus-legend { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 1100px; margin: 26px auto 0; }
.legend-chip {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink-soft); background: #fff;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 9px 18px; cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.legend-chip::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; margin-right: 8px; vertical-align: middle; }
.legend-chip:hover,
.legend-chip.is-active { transform: translateY(-2px); border-color: var(--rust); color: var(--rust-ink); box-shadow: 0 10px 24px -16px rgba(168, 91, 63, .6); }

/* Responsive: stack panel under the map, widen the map (incl. tablet portrait) */
@media (max-width: 960px) {
  .campus-stage { flex-direction: column; gap: 16px; }
  .campus-stage .campus-map { flex: auto; max-width: 100%; box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--rule), 0 22px 50px -30px rgba(43, 33, 27, .5); }
  .campus-panel { justify-content: flex-start; }
}
@media (max-width: 760px) { .campus-stats { grid-template-columns: 1fr 1fr; gap: 20px 16px; } }
@media (max-width: 400px) { .campus-stat-label { font-size: 12px; } }
/* ============================================================
   CAMPUS HEADER — tame the oversized headline + framed stat band
   ============================================================ */
.campus-head .section-head-split { align-items: end; margin-bottom: 38px; }
.campus-head h1.display {
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.05;
  max-width: 16ch;
  text-wrap: balance;
}
.campus-head .lede { font-size: clamp(16px, 1.05rem + 0.3vw, 19px); max-width: 46ch; }
/* The shared .stat-strip band, used here as the campus quick-facts row */
.campus-strip { margin-bottom: 48px; }
@media (max-width: 760px) { .campus-strip { margin-bottom: 36px; } }
/* ============================================================
   CAMPUS MAP — draggable canvas (enlarged + pan on mobile)
   ============================================================ */
.campus-map-canvas { position: relative; width: 100%; }
.campus-map-hint .hint-mobile { display: none; }

@media (max-width: 960px) {
  /* The map becomes a horizontal drag-scroller; the canvas is rendered
     taller + wider than the viewport so buildings + labels are legible. */
  .campus-stage .campus-map {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    cursor: grab;
    scroll-snap-type: x proximity;
  }
  .campus-stage .campus-map:active { cursor: grabbing; }
  .campus-stage .campus-map::-webkit-scrollbar { height: 0; }
  .campus-map-canvas { width: max-content; height: 58vh; max-height: 470px; }
  .campus-map-img { width: auto; height: 100%; max-width: none; aspect-ratio: auto; }
  .map-pin { width: 54px; height: 54px; }
  .map-pin::before { width: 40px; height: 40px; }
  .campus-map-hint { left: 12px; bottom: 12px; }
  .campus-map-hint .hint-desktop { display: none; }
  .campus-map-hint .hint-mobile { display: inline; }
}
/* ============================================================
   CAMPUS PANEL — bottom sheet on mobile (no page-scroll on tap)
   ============================================================ */
.campus-panel-close { display: none; }

@media (max-width: 960px) {
  .campus-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;
    max-height: 66svh;
    overflow-y: auto;
    border-radius: 22px 22px 0 0;
    border: 1px solid var(--rule);
    border-bottom: none;
    box-shadow: 0 -18px 50px -16px rgba(43, 33, 27, .42);
    transform: translateY(110%);
    transition: transform .38s var(--ease);
    padding: 30px 22px calc(26px + env(safe-area-inset-bottom, 0px));
    justify-content: flex-start;
  }
  .campus-panel::before {
    content: "";
    position: absolute;
    top: 9px; left: 50%;
    transform: translateX(-50%);
    width: 42px; height: 4px;
    border-radius: 999px;
    background: var(--rule);
  }
  .campus-panel.is-open { transform: translateY(0); }
  .campus-panel-close {
    display: flex;
    position: absolute;
    top: 14px; right: 14px;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--cream);
    color: var(--mute);
    font-size: 22px; line-height: 1;
    align-items: center; justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .campus-panel-close:hover { color: var(--ink); }
}