/* =============================================================
   KEYS FOOD SERVICE — Design System v2 ($10M polish)
   Yellowtail (logo script) + Cormorant Garamond (display) + Jost (UI)
   ============================================================= */

:root{
  /* Foundation */
  --ivory:#F9F5EF;
  --ivory-deep:#F4EFE6;
  --charcoal:#2C2118;
  --charcoal-90:rgba(44,33,24,0.9);
  --charcoal-70:rgba(44,33,24,0.7);
  --charcoal-50:rgba(44,33,24,0.5);
  --sage:#7A8C6E;
  --sage-soft:#A4B398;
  --taupe:#C4B49A;
  --taupe-soft:#E0D4BD;
  --blush:#EDE4D8;
  --gold:#B8843A;
  /* KFS brand */
  --emerald:#1A7A4A;
  --teal:#2B8C8C;
  --teal-deep:#1F6E6E;
  --teal-bright:#36A8A8;
  --orange:#D95F2B;
  /* utility */
  --hairline:1px solid rgba(44,33,24,0.12);
  --hairline-light:1px solid rgba(249,245,239,0.18);
  --shadow-soft:0 1px 0 rgba(44,33,24,0.04), 0 12px 40px -20px rgba(44,33,24,0.18);
  --shadow-lift:0 1px 0 rgba(44,33,24,0.06), 0 30px 60px -30px rgba(44,33,24,0.35);
  --shadow-deep:0 1px 0 rgba(44,33,24,0.08), 0 60px 120px -40px rgba(44,33,24,0.45);
  /* type */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --script:"Yellowtail",cursive;
  /* layout */
  --max:1320px;
  --gutter:clamp(20px,4vw,48px);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
hr{border:0;border-top:var(--hairline);margin:0}
::selection{background:rgba(43,140,140,0.25);color:var(--charcoal)}

/* Skip link for a11y */
.skip-link{
  position:absolute;left:-9999px;top:8px;
  background:var(--charcoal);color:var(--ivory);
  padding:8px 14px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  z-index:1000;
}
.skip-link:focus{left:8px}

/* =============================================================
   PAGE-LOAD INTRO CURTAIN
============================================================= */
.intro{
  position:fixed;inset:0;z-index:200;
  background:
    radial-gradient(60% 45% at 50% 40%, rgba(232,190,110,.22), transparent 72%),
    radial-gradient(45% 40% at 50% 92%, rgba(43,140,140,.18), transparent 72%),
    linear-gradient(180deg, #1A140F 0%, #0F0B08 100%);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  pointer-events:none;
  animation:introExit 1.2s var(--ease-out) 4.6s forwards;
}

/* ============================================================

/* Decorative scrolling food bands behind the mark — transparent PNG, lets brand colors shine.
   On the new cream curtain we drop the dark drop-shadow (would smudge on light) and let
   the food artwork pop on its own with a touch of saturation. */
.intro-bg-band{
  position:absolute;left:-10%;right:-10%;height:104px;
  background:url("../icons/food-banner.png") repeat-x left center;
  background-size:auto 104px;
  opacity:0;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)) saturate(108%);
  pointer-events:none;
}
.intro-bg-band--top{
  top:3%;transform:rotate(-2.5deg);
  animation:introBandIn .9s var(--ease-out) .1s forwards, introBandSlide 28s linear .1s infinite;
}
.intro-bg-band--bottom{
  bottom:3%;transform:rotate(2.5deg);
  animation:introBandIn .9s var(--ease-out) .25s forwards, introBandSlideRev 32s linear .25s infinite;
}
@keyframes introBandSlide{
  from{background-position-x:0}
  to{background-position-x:-1200px}
}
@keyframes introBandSlideRev{
  from{background-position-x:0}
  to{background-position-x:1200px}
}
@keyframes introBandIn{
  from{opacity:0}
  to{opacity:.85}
}

.intro-inner{
  position:relative;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  color:var(--ivory);
  /* Defensive vertical padding so the stacked content (mark + wordmark + tagline)
     never bleeds behind the food bands on shorter viewports. */
  padding:6vh 1rem;
  max-width:min(560px, 92vw);
  text-align:center;
}
/* KFS round mark — large, crisp, centered. Soft halo behind (not on the logo)
   so the brand mark stays clean and the gold ring of the logo reads sharply. */
.intro-mark-stage{
  position:relative;
  width:clamp(200px, 28vh, 260px);
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.2rem;
}
/* Inner warm halo + shockwave: starts tiny inside the badge, then rapidly
   expands outward as the badge stamps in (golden ring shockwave), then
   settles into a static warm pool of light behind the coin. */
.intro-mark-stage::before{
  content:"";position:absolute;inset:-50px;border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(232,190,110,.55) 0%,
    rgba(184,132,58,.30) 28%,
    rgba(184,132,58,.10) 52%,
    transparent 72%);
  filter:blur(8px);
  opacity:0;transform:scale(.4);
  animation:introHaloShockwave 1.6s cubic-bezier(.18,.7,.25,1) .35s forwards;
  pointer-events:none;
}
/* Outer cool halo: wider, softer teal aura that breathes in and out subtly
   after the stamp, giving the coin a "living" presence on the dark stage. */
.intro-mark-stage::after{
  content:"";position:absolute;inset:-110px;border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(43,140,140,.22) 0%,
    rgba(43,140,140,.10) 40%,
    transparent 70%);
  filter:blur(14px);
  opacity:0;
  animation:introHaloIn 1.1s var(--ease-out) .15s forwards,
            introHaloPulse 5.5s ease-in-out 1.6s infinite;
  pointer-events:none;
  z-index:-1;
}
.intro-mark-img{
  position:relative;
  width:100%;height:100%;display:block;
  transform-origin:50% 50%;
  /* Vector source — infinitely sharp; drop shadow gives the coin lift off the stage. */
  filter:
    drop-shadow(0 24px 44px rgba(0,0,0,.55))
    drop-shadow(0 0 18px rgba(184,132,58,.35));
  opacity:0;transform:scale(.55) rotate(-22deg);
  animation:
    introMarkStamp 1.15s cubic-bezier(.22,1.25,.36,1) .35s forwards,
    introMarkBreathe 5s ease-in-out 1.6s infinite,
    introMarkSpin 18s linear 1.6s infinite;
  will-change: transform, filter, opacity;
}
@keyframes introMarkStamp{
  0%   { opacity:0; transform:scale(.55) rotate(-22deg);
         filter: drop-shadow(0 32px 60px rgba(0,0,0,.7))
                 drop-shadow(0 0 0 rgba(232,190,110,0)) blur(1.5px) }
  35%  { opacity:1; filter: drop-shadow(0 22px 40px rgba(0,0,0,.55))
                            drop-shadow(0 0 38px rgba(232,190,110,.85)) blur(0) }
  62%  { transform:scale(1.07) rotate(3deg) }
  82%  { transform:scale(.985) rotate(-1deg) }
  100% { opacity:1; transform:scale(1) rotate(0deg);
         filter: drop-shadow(0 24px 44px rgba(0,0,0,.55))
                 drop-shadow(0 0 18px rgba(184,132,58,.35)) }
}
@keyframes introMarkBreathe{
  0%,100%{filter:drop-shadow(0 24px 44px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(184,132,58,.35))}
  50%   {filter:drop-shadow(0 24px 44px rgba(0,0,0,.55)) drop-shadow(0 0 32px rgba(232,190,110,.6))}
}
/* Slow ambient drift — almost imperceptible, just enough to feel "alive". */
@keyframes introMarkSpin{
  0%   { transform: rotate(0deg)   scale(1) }
  50%  { transform: rotate(1.6deg) scale(1.012) }
  100% { transform: rotate(0deg)   scale(1) }
}
@keyframes introHaloShockwave{
  0%   { opacity:0; transform:scale(.4)  }
  20%  { opacity:.95; transform:scale(.85) }
  55%  { opacity:.55; transform:scale(1.35) }
  100% { opacity:.85; transform:scale(1)  }
}
@keyframes introHaloPulse{
  0%,100% { opacity:1;   transform:scale(1) }
  50%     { opacity:.65; transform:scale(1.06) }
}
@keyframes introHaloIn{
  to{opacity:1}
}

/* ============================================================
   INTRO LOGO — VIDEO VARIANT
   When .intro-mark-stage carries .intro-mark-stage--video, the
   centerpiece is a square mp4 logo loop. We circle-clip it,
   keep the existing halos, and disable the photo-badge stamp
   animations (since the video carries its own motion).
   ============================================================ */
.intro-mark-video{
  position:relative;
  width:100%;height:100%;display:block;
  border-radius:50%;
  object-fit:cover;
  /* Same drop-shadow language as the original badge so the coin lifts off the dark stage. */
  filter:
    drop-shadow(0 24px 44px rgba(0,0,0,.55))
    drop-shadow(0 0 18px rgba(184,132,58,.35));
  opacity:0;
  animation:introIn .8s var(--ease-out) .35s forwards;
}
/* When using the video variant, suppress the still-image stamp animation
   that would otherwise stack on top (it doesn't render here, but belt + braces). */
.intro-mark-stage--video .intro-mark-img{ display:none }

/* ============================================================
   MAGICAL INTRO ORBIT + SHOCKWAVE + SPARKLE LAYERS
   Stack of decorative rings, ripples and particles around the
   intro badge. All elements are siblings of .intro-mark-img
   inside .intro-mark-stage and absolutely centered.
   ============================================================ */
.intro-mark-stage > span{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  border-radius:50%;
}

/* --- Orbit ring 1: solid gold hairline, slow clockwise spin --- */
.intro-orbit--ring{
  width:118%;height:118%;
  border:1.5px solid rgba(232,190,110,.55);
  box-shadow:
    0 0 22px rgba(232,190,110,.35),
    inset 0 0 14px rgba(232,190,110,.18);
  opacity:0;
  animation:
    introOrbitFadeIn 1s ease-out 1s forwards,
    introOrbitSpin 22s linear 1s infinite;
}
/* --- Orbit ring 2: dashed gold, slow counter-clockwise --- */
.intro-orbit--dashed{
  width:138%;height:138%;
  border:1px dashed rgba(232,190,110,.4);
  opacity:0;
  animation:
    introOrbitFadeIn 1.1s ease-out 1.15s forwards,
    introOrbitSpinRev 38s linear 1.15s infinite;
}
/* --- Orbit ring 3: conic gradient sweep — a single bright arc that
       rotates around the badge like a lighthouse beam. Masked to a thin ring. --- */
.intro-orbit--conic{
  width:128%;height:128%;
  background:conic-gradient(from 0deg,
    rgba(232,190,110,0)   0%,
    rgba(232,190,110,0)   62%,
    rgba(255,222,150,.95) 78%,
    rgba(232,190,110,.55) 84%,
    rgba(232,190,110,0)   92%,
    rgba(232,190,110,0)   100%);
  -webkit-mask: radial-gradient(circle, transparent 47%, #000 49%, #000 50%, transparent 52%);
          mask: radial-gradient(circle, transparent 47%, #000 49%, #000 50%, transparent 52%);
  filter:blur(.5px);
  opacity:0;
  animation:
    introOrbitFadeIn .8s ease-out .9s forwards,
    introConicSpin 4s linear .9s infinite;
}

/* --- Three sequential shockwave rings that emanate outward and fade --- */
.intro-shockwave{
  width:100%;height:100%;
  border:1.5px solid rgba(232,190,110,.7);
  opacity:0;
  animation:introShockRing 2.2s cubic-bezier(.18,.7,.25,1) infinite;
}
.intro-shockwave--1{ animation-delay:.55s }
.intro-shockwave--2{ animation-delay:1.05s }
.intro-shockwave--3{ animation-delay:1.55s }

/* --- Six sparkles that twinkle around the badge --- */
.intro-spark{
  width:6px;height:6px;
  background:radial-gradient(circle,#fff 0%,rgba(255,222,150,.9) 35%,transparent 70%);
  filter:drop-shadow(0 0 8px rgba(255,222,150,.95));
  opacity:0;
}
.intro-spark--a{ left:18%;  top:22%;  animation:introSparkle 2.4s ease-in-out 1.4s infinite }
.intro-spark--b{ left:88%;  top:30%;  animation:introSparkle 2.8s ease-in-out 1.7s infinite }
.intro-spark--c{ left:8%;   top:72%;  animation:introSparkle 2.6s ease-in-out 2.0s infinite }
.intro-spark--d{ left:78%;  top:80%;  animation:introSparkle 3.0s ease-in-out 1.55s infinite }
.intro-spark--e{ left:48%;  top:6%;   animation:introSparkle 2.2s ease-in-out 1.85s infinite; width:5px;height:5px }
.intro-spark--f{ left:96%;  top:55%;  animation:introSparkle 2.5s ease-in-out 2.2s infinite; width:4px;height:4px }

@keyframes introOrbitFadeIn{ to{opacity:1} }
@keyframes introOrbitSpin{
  0%   { transform:translate(-50%,-50%) rotate(0deg)   }
  100% { transform:translate(-50%,-50%) rotate(360deg) }
}
@keyframes introOrbitSpinRev{
  0%   { transform:translate(-50%,-50%) rotate(0deg)    }
  100% { transform:translate(-50%,-50%) rotate(-360deg) }
}
@keyframes introConicSpin{
  0%   { opacity:1; transform:translate(-50%,-50%) rotate(0deg)   }
  100% { opacity:1; transform:translate(-50%,-50%) rotate(360deg) }
}
@keyframes introShockRing{
  0%   { opacity:0;   transform:translate(-50%,-50%) scale(.55) }
  10%  { opacity:.95; }
  100% { opacity:0;   transform:translate(-50%,-50%) scale(2.1) }
}
@keyframes introSparkle{
  0%, 80%, 100% { opacity:0; transform:translate(-50%,-50%) scale(.4) }
  40%           { opacity:1; transform:translate(-50%,-50%) scale(1.3) }
  55%           { opacity:.6; transform:translate(-50%,-50%) scale(1)   }
}

/* Reduced motion: kill all orbit/sparkle/shockwave loops, hold static */
@media (prefers-reduced-motion: reduce){
  .intro-orbit, .intro-shockwave, .intro-spark{
    animation:none !important; opacity:0 !important;
  }
}

/* Mobile: scale rings down with the badge */
@media (max-width:520px){
  .intro-shockwave{ border-width:1px }
  .intro-spark{ width:4px;height:4px }
  .intro-spark--e{ width:3px;height:3px }
}

/* Intro wordmark — uses the same official 2-color image used in the live nav,
   so the splash and the persistent header/footer are visually identical. */
.intro-wordmark-img{
  display:block;
  width:auto;
  height:clamp(48px, 7.6vw, 76px);
  /* Match the badge stage's drop-shadow language so the wordmark feels carved
     onto the same dark plate, not floating in front of it. */
  filter:
    drop-shadow(0 6px 14px rgba(0,0,0,.55))
    drop-shadow(0 0 18px rgba(184,132,58,.22));
  opacity:0;transform:translateY(10px);
  animation:introIn .7s var(--ease-out) 1.1s forwards;
}
.intro-tag{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.36em;
  color:var(--ivory);text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  opacity:0;transform:translateY(6px);
  animation:introIn .6s var(--ease-out) 1.45s forwards;
  /* Stack the gold rules above/below the text — works whether the tagline
     wraps to one or two lines, never floats inline next to a single word. */
  display:flex;flex-direction:column;align-items:center;gap:.85rem;
  text-align:center;
}
.intro-tag::before,
.intro-tag::after{
  content:"";display:block;
  width:48px;height:1px;background:var(--gold);
  opacity:.7;
}
@keyframes introIn{ to{opacity:1;transform:none} }
@keyframes introExit{
  0%{transform:translateY(0)}
  100%{transform:translateY(-101%)}
}
@media(max-width:520px){
  .intro-mark-stage{
    width:clamp(160px, 26vh, 200px);
    margin-bottom:.9rem;
  }
  .intro-mark-stage::before{inset:-32px;filter:blur(5px)}
  .intro-mark-stage::after{inset:-72px;filter:blur(10px)}
  .intro-wordmark-img{height:clamp(40px, 9vw, 56px)}
  .intro-tag{font-size:.6rem;letter-spacing:.28em;padding:0 1rem;gap:.7rem}
  .intro-tag::before,.intro-tag::after{width:40px}
  .intro-bg-band{height:72px;background-size:auto 72px}
}

/* =============================================================
   BRAND LOGO — official Keys Food Service lockup
   Official assets (keys-script + circular K F S badge):
   - keys-combination-dark.png   navy + peach badge (light backgrounds — nav)
   - keys-combination-light.png  ivory + peach badge (dark backgrounds — footer)
   - keys-badge.png              transparent K F S round badge (favicon, intro mark)
   The compact 1.58:1 combination lockup is preferred over the wide
   primary 2-color (which had a large internal gap that crushed
   "FOOD SERVICE" at small nav heights).
============================================================= */
.brand-img{
  display:block;
  width:auto;height:auto;
  object-fit:contain;
  user-select:none;-webkit-user-drag:none;
  flex-shrink:0;
}
.brand-img--nav{height:54px;width:54px;max-height:54px;flex:0 0 auto}
/* Swap badge variants based on nav background (dark over hero, light when scrolled) */
.brand-img--on-dark,.brand-img--on-light{transition:opacity .25s ease}
.nav.dark-mode .brand-img--on-light{display:none}
.nav:not(.dark-mode) .brand-img--on-dark{display:none}
.brand-img--foot{height:84px;width:84px;max-height:84px;flex:0 0 auto}
.brand-img--mark{height:280px;max-height:280px;width:auto}

/* Nav lockup: badge mark + typeset wordmark.
   Badge alone reads on both light and dark surfaces (no dual variant needed).
   Wordmark color follows nav surface state via CSS color tokens. */
.nav-brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none}
/* === KEYS WORDMARK — official 2-color logo image, recolored to brand palette ===
   Two variants live in the nav and swap based on whether the nav is over a
   dark surface (hero/page-header) or a light/cream surface (post-scroll glass).
   Mirrors the badge swap so the lockup is always legible. Footer is always dark
   so it uses the on-dark variant only. */
.brand-wordmark-img{
  display:inline-block;
  width:auto;
  height:38px;
  vertical-align:middle;
  transform-origin:left center;
  position:relative; z-index:1;
  /* Crisp scale-down on hi-DPI */
  image-rendering:auto;
}
.brand-wordmark-img--nav{ height:38px }
.brand-wordmark-img--foot{ height:64px }
/* Wordmark variant swap — same trigger as the badge swap above */
.brand-wordmark-img--on-dark,
.brand-wordmark-img--on-light{ transition:opacity .25s ease }
.nav.dark-mode .brand-wordmark-img--on-light{ display:none }
.nav:not(.dark-mode) .brand-wordmark-img--on-dark{ display:none }

@media(max-width:980px){
  .brand-img--nav{height:48px;width:48px;max-height:48px}
  .brand-img--foot{height:88px;max-height:88px}
  .brand-wordmark-img--nav{ height:32px }
  .brand-wordmark-img--foot{ height:56px }
}
@media(max-width:520px){
  .brand-img--nav{height:42px;width:42px;max-height:42px}
  .brand-img--foot{height:74px;max-height:74px}
  .nav-brand{gap:.5rem}
  .brand-wordmark-img--nav{ height:26px }
  .brand-wordmark-img--foot{ height:46px }
}

/* Hover lift */
.nav-brand:hover .brand-img,.foot-brand:hover .brand-img{
  transform:translateY(-1px);
  transition:transform .25s var(--ease-spring);
}

/* =============================================================
   TYPE SCALE
============================================================= */
h1,h2,h3,h4,h5{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.005em;
  margin:0 0 .35em;
  color:var(--charcoal);
}
h1{font-size:clamp(2.8rem,7vw,6.5rem);font-weight:500}
h2{font-size:clamp(2.1rem,4.6vw,3.8rem)}
h3{font-size:clamp(1.5rem,2.4vw,2rem)}
h4{font-size:clamp(1.15rem,1.6vw,1.4rem)}
.eyebrow{
  font-family:var(--sans);font-style:normal;
  font-size:.74rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--teal);
  display:inline-flex;align-items:center;gap:.7rem;
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:"";display:inline-block;width:34px;height:1px;background:var(--teal);
  transform-origin:left;animation:eyebrowGrow 1s var(--ease-out) .4s both;
}
@keyframes eyebrowGrow{from{transform:scaleX(0)}}
.lead{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.4;
  color:var(--charcoal-70);max-width:62ch;
}
p{margin:0 0 1em}

/* =============================================================
   BUTTONS
============================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:1.05rem 1.7rem;
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  border-radius:0;border:1px solid transparent;
  white-space:nowrap;
  position:relative;overflow:hidden;
  transition:transform .35s var(--ease-spring),background .3s ease,color .3s ease,border-color .3s ease;
}
.btn::before{
  content:"";position:absolute;inset:0;
  background:rgba(255,255,255,0.06);
  transform:translateX(-100%);transition:transform .5s var(--ease-out);
}
.btn:hover{transform:translateY(-1.5px)}
.btn:hover::before{transform:translateX(0)}
.btn-primary::before,.btn-gold::before,.btn-orange::before{background:rgba(255,255,255,0.14)}

.btn .arr{
  width:14px;height:1px;background:currentColor;position:relative;
  display:inline-block;transition:width .3s var(--ease-out);
}
.btn .arr::after{
  content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.btn:hover .arr{width:26px}

.btn-primary{background:var(--teal);color:var(--ivory)}
.btn-primary:hover{background:var(--teal-deep)}
.btn-gold{background:var(--gold);color:var(--ivory)}
.btn-gold:hover{background:#9a6e30}
.btn-orange{background:var(--orange);color:var(--ivory)}
.btn-orange:hover{background:#b34d20}
.btn-outline{border-color:var(--charcoal);color:var(--charcoal)}
.btn-outline:hover{background:var(--charcoal);color:var(--ivory)}
.btn-outline-light{border-color:rgba(249,245,239,.7);color:var(--ivory)}
.btn-outline-light:hover{background:var(--ivory);color:var(--charcoal);border-color:var(--ivory)}
.btn-ghost{padding:.4rem 0;border-bottom:1px solid currentColor;letter-spacing:.22em}
.btn-ghost:hover{color:var(--teal);border-color:var(--teal)}

/* =============================================================
   LAYOUT
============================================================= */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(72px,9vw,140px) 0;position:relative}
.section-tight{padding:clamp(56px,7vw,96px) 0;position:relative}
.dark{background:var(--charcoal);color:var(--ivory);position:relative;overflow:hidden}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--ivory)}
.dark .eyebrow{color:var(--taupe)}
.dark .eyebrow::before{background:var(--taupe)}
.dark .lead{color:rgba(249,245,239,0.8)}
.blush-bg{background:var(--blush)}
.sage-bg{
  background:var(--charcoal);
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(184,132,58,.08), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(43,140,140,.08), transparent 55%);
  position:relative;
}
.sage-bg::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(249,245,239,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249,245,239,.025) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
}
.sage-bg > .wrap{position:relative;z-index:1}
.taupe-line{border-top:var(--hairline)}

.grid{display:grid;gap:clamp(24px,3vw,48px)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .cols-3.keep-2-md{grid-template-columns:repeat(2,1fr)}
}

.center{text-align:center}
.muted{color:var(--charcoal-70)}
.flex{display:flex}
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:1.5rem}
.flex-wrap{flex-wrap:wrap}

/* Film grain overlay — subtle, on dark sections only */
.dark::after,.hero::after,.cta-block::after,.ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:.07;mix-blend-mode:overlay;
  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.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ph::after{opacity:.05}

/* =============================================================
   NAV
============================================================= */
.nav{
  position:sticky;top:0;z-index:50;
  /* Clean ivory frosted glass — let the logo be the hero. No color sweep, no top ribbon. */
  background:rgba(252,249,243,0.88);
  backdrop-filter:saturate(140%) blur(16px);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  border-bottom:1px solid rgba(44,33,24,.06);
  box-shadow:0 6px 18px -14px rgba(44,33,24,.18);
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
/* Rich, branded dark-mode nav (over hero / dark sections) */
.nav.dark-mode{
  background:
    /* warm gold rim along the very top */
    linear-gradient(180deg, rgba(184,132,58,.18) 0%, rgba(184,132,58,0) 3px),
    /* teal-to-gold horizontal sweep, very faint */
    linear-gradient(90deg, rgba(43,140,140,.18) 0%, rgba(43,140,140,.04) 35%, rgba(184,132,58,.04) 65%, rgba(184,132,58,.16) 100%),
    /* deepened, warmer base */
    linear-gradient(180deg, rgba(33,25,19,.92), rgba(28,22,18,.88));
  border-bottom:1px solid rgba(184,132,58,.22);
  box-shadow:
    0 1px 0 rgba(249,245,239,.06) inset,
    0 12px 32px -16px rgba(0,0,0,.55);
}
.nav.dark-mode .nav-link{color:var(--ivory)}
.nav.dark-mode .nav-link::after{background:var(--gold)}
.nav-inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;
  padding:14px var(--gutter);max-width:var(--max);margin:0 auto;
}
.nav-brand{display:flex;align-items:center;gap:14px;text-decoration:none;justify-self:start}
.nav-center{justify-self:center}
.nav-links{
  display:flex;align-items:center;gap:2.1rem;list-style:none;margin:0;padding:0;
}
.nav-link{
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--charcoal);
  position:relative;padding:6px 0;font-weight:500;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--teal);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out);
}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-cta-btn{justify-self:end}
.mobile-cta{display:none}
.nav-toggle{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;justify-self:end;
  background:transparent;border:0;cursor:pointer;
  color:var(--charcoal);
  position:relative;z-index:200;
  border-radius:50%;
  transition:color .3s ease,background .3s ease,box-shadow .3s ease,transform .3s ease;
}
.nav-toggle span{display:block;width:24px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease-out),opacity .2s,width .25s ease}
.nav.dark-mode .nav-toggle{color:var(--ivory, #F8F4EC)}
.nav.dark-mode .nav-toggle span{box-shadow:0 1px 3px rgba(0,0,0,.45)}
/* OPEN STATE — make the close button unmistakable:
   solid charcoal pill, ivory X strokes, slight scale + soft shadow.
   Stays visible regardless of underlying panel content. */
.nav.open .nav-toggle,
.nav.open.dark-mode .nav-toggle{
  color:var(--ivory);
  background:var(--charcoal);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.35), 0 0 0 1px rgba(184,132,58,.35);
}
.nav.open .nav-toggle span{box-shadow:none;height:2.5px;width:20px}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media(max-width:1080px){
  .nav-links{gap:1.4rem}
  .nav-link{font-size:.7rem;letter-spacing:.18em}
}
@media(max-width:980px){
  /* Disable backdrop-filter on mobile so it doesn't trap fixed menu */
  .nav{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(252,249,243,0.97);
    border-bottom:1px solid rgba(44,33,24,.06);
  }
  .nav.dark-mode{
    background:
      linear-gradient(180deg, rgba(184,132,58,.20) 0%, rgba(184,132,58,0) 3px),
      linear-gradient(90deg, rgba(43,140,140,.20), rgba(43,140,140,.04) 50%, rgba(184,132,58,.18)),
      linear-gradient(180deg, rgba(33,25,19,.95), rgba(28,22,18,.92));
    border-bottom:1px solid rgba(184,132,58,.22);
  }
  .nav-inner{
    grid-template-columns:1fr auto;
    gap:1rem;
    /* Generous edge breathing room — overrides --gutter on mobile */
    padding:18px clamp(22px, 6vw, 32px);
    align-items:center;
  }
  .nav-toggle{display:flex;width:44px;height:44px;margin-right:-6px}
  .nav-cta-btn{display:none}
  .nav-center{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    width:100%;
    height:100vh;height:100dvh;
    padding:88px clamp(26px, 7vw, 36px) 36px;
    box-sizing:border-box;
    background:
      /* warm gold ribbon at top */
      linear-gradient(180deg, rgba(184,132,58,.14) 0%, rgba(184,132,58,0) 120px),
      /* upper teal glow */
      radial-gradient(circle at 88% 10%, rgba(43,140,140,.22), transparent 48%),
      /* lower warm glow */
      radial-gradient(circle at 6% 92%, rgba(184,132,58,.18), transparent 50%),
      /* paper warmth */
      linear-gradient(170deg, #FBF7F0 0%, #F4ECDF 100%);
    z-index:110;
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(-100%);
    transition:transform .55s cubic-bezier(.7,0,.2,1);
    opacity:1;pointer-events:none;
    display:flex;flex-direction:column;
  }
  .nav.open .nav-center{transform:translateY(0);pointer-events:auto}

  /* subtle top hairline mark inside the panel */
  .nav-center::before{
    content:"";position:absolute;left:var(--gutter);top:64px;
    width:36px;height:1px;background:var(--gold);opacity:.6;
  }

  .nav-links{
    flex-direction:column;align-items:flex-start;gap:0;width:100%;
    margin-top:8px;flex:1;
  }
  .nav-link{
    display:block;width:100%;
    padding:18px 0;
    border-bottom:1px solid rgba(44,33,24,.09);
    font-family:var(--serif);
    font-style:italic;font-weight:500;
    font-size:clamp(1.7rem,6.6vw,2.2rem);
    letter-spacing:-.01em;text-transform:none;
    color:var(--charcoal);
    opacity:0;transform:translateY(18px);
    transition:opacity .5s var(--ease-out),transform .55s var(--ease-out),color .2s;
  }
  .nav-link::after{display:none} /* kill desktop underline */
  .nav.open .nav-link{opacity:1;transform:none}
  .nav.open .nav-link:nth-child(1){transition-delay:.18s}
  .nav.open .nav-link:nth-child(2){transition-delay:.24s}
  .nav.open .nav-link:nth-child(3){transition-delay:.30s}
  .nav.open .nav-link:nth-child(4){transition-delay:.36s}
  .nav.open .nav-link:nth-child(5){transition-delay:.42s}
  .nav.open .nav-link:nth-child(6){transition-delay:.48s}
  .nav-link.active{color:var(--teal)}

  .nav-center .mobile-cta{
    display:flex !important;flex-direction:column;gap:14px;
    width:100%;margin-top:auto;padding-top:32px;
    opacity:0;transform:translateY(12px);
    transition:opacity .5s ease .55s,transform .55s ease .55s;
  }
  .nav.open .nav-center .mobile-cta{opacity:1;transform:none}
  .nav-center .mobile-cta .btn{width:100%;padding:18px 24px;font-size:.78rem}
  .nav-center .mobile-cta .mobile-cta-meta{
    font-family:var(--serif);font-style:italic;color:var(--charcoal-50);
    font-size:.92rem;text-align:center;margin-top:4px;
  }

  /* Force readable text colors in mobile menu even when nav is in dark-mode (over hero). */
  .nav.dark-mode .nav-center .nav-link{color:var(--charcoal)}

  /* =============================================================
     MOBILE MENU CLOSE BUTTON — BULLETPROOF VARIANT
     ─────────────────────────────────────────────────────────────
     CRITICAL: .nav has position:sticky + z-index:50, which creates
     a stacking context. position:fixed on a CHILD does NOT escape
     that context — the child is still capped at z-index:50 globally
     regardless of its own z-index. So when the menu is open we
     ALSO raise .nav itself to z-index:99998 so the entire nav
     subtree (including the toggle inside it) lifts above any other
     fixed/absolute overlay on the page. Then the toggle is pinned
     to the viewport with position:fixed + z-index:99999, painted
     as a literal "✕" glyph (no CSS transforms), inside a 50×50
     charcoal pill with a triple shadow/ring so it's unmistakable
     on any background. Cannot be obscured, cannot fail to render.
  ============================================================= */
  .nav.open{z-index:99998 !important}
  .nav.open .nav-toggle{
    position:fixed !important;
    top:14px !important;
    right:clamp(16px, 5vw, 28px) !important;
    z-index:99999 !important;
    width:50px !important;
    height:50px !important;
    background:var(--charcoal) !important;
    border-radius:50% !important;
    box-shadow:
      0 10px 30px -8px rgba(0,0,0,.55),
      0 0 0 2px rgba(255,255,255,.18),
      0 0 0 4px rgba(184,132,58,.35) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    padding:0 !important;
    margin:0 !important;
    color:var(--ivory) !important;
  }
  /* Hide the three hamburger bars when open — the ✕ glyph takes over */
  .nav.open .nav-toggle span{display:none !important}
  /* Real X glyph as the close icon — no transforms, no rotation, no fragility */
  .nav.open .nav-toggle::before{
    content:"\00d7"; /* multiplication sign — visually a clean, bold X */
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size:36px;
    line-height:1;
    font-weight:300;
    color:var(--ivory);
    display:block;
    margin-top:-3px; /* optical centering for the glyph */
  }

  /* Lock body scroll while menu open */
  body.menu-open{overflow:hidden}

  /* =============================================================
     EDITORIAL MOBILE TAKEOVER — branded "magazine" treatment
     Adds: ghosted brand badge watermark, editorial header,
     bottom keywords marquee. All decorative pieces aria-hidden.
  ============================================================= */
  .nav-center{padding-bottom:64px}

  /* Ghost brand badge drifting in lower-right of takeover */
  .nav-panel-watermark{
    position:absolute;
    right:-110px;bottom:88px;
    width:380px;height:380px;
    background-image:url("../brand/keys-badge.png?v=6");
    background-size:contain;background-repeat:no-repeat;background-position:center;
    opacity:0;
    transform:translate(40px,40px) rotate(-8deg) scale(.92);
    transition:opacity 1.1s ease .35s,transform 1.4s var(--ease-out) .35s;
    pointer-events:none;
    will-change:transform,opacity;
    z-index:0;
  }
  .nav.open .nav-panel-watermark{
    opacity:.10;
    transform:translate(0,0) rotate(-4deg) scale(1);
    animation:navWatermarkDrift 18s ease-in-out 1.4s infinite;
  }
  @keyframes navWatermarkDrift{
    0%,100%{transform:translate(0,0) rotate(-4deg) scale(1)}
    50%{transform:translate(-12px,-10px) rotate(-1deg) scale(1.02)}
  }

  /* Editorial header: eyebrow + tagline above the link list */
  .nav-panel-header{
    position:relative;z-index:1;
    margin:0 0 18px;
    opacity:0;transform:translateY(12px);
    transition:opacity .55s var(--ease-out) .12s,transform .65s var(--ease-out) .12s;
  }
  .nav.open .nav-panel-header{opacity:1;transform:none}
  .nav-panel-eyebrow{
    display:inline-block;
    font-family:var(--sans);font-size:.7rem;font-weight:600;
    letter-spacing:.32em;text-transform:uppercase;
    color:var(--gold);margin-bottom:14px;
  }
  .nav-panel-tagline{
    font-family:var(--serif);font-style:italic;font-weight:400;
    font-size:clamp(1.05rem,4vw,1.25rem);
    line-height:1.45;color:var(--charcoal-70);
    margin:0;max-width:24ch;
  }
  .nav-panel-tagline em{color:var(--charcoal);font-style:italic}

  /* Adjust nav-links spacing now that header sits above */
  .nav-links{margin-top:0}

  /* All link list items position above the watermark */
  .nav-links{position:relative;z-index:1}

  /* Bottom keywords marquee — branded "ticker" */
  .nav-panel-marquee{
    position:absolute;left:0;right:0;bottom:0;
    height:36px;
    display:flex;align-items:center;
    overflow:hidden;
    border-top:1px solid rgba(184,132,58,.18);
    background:linear-gradient(180deg,rgba(184,132,58,.04),rgba(184,132,58,.10));
    opacity:0;
    transition:opacity .6s ease .65s;
    z-index:1;pointer-events:none;
  }
  .nav.open .nav-panel-marquee{opacity:1}
  .nav-panel-marquee-track{
    display:flex;flex-shrink:0;width:max-content;
    animation:navMarqueeRoll 38s linear infinite;
    animation-play-state:paused;
  }
  .nav.open .nav-panel-marquee-track{animation-play-state:running}
  .nav-panel-marquee span{
    display:inline-block;flex-shrink:0;padding-right:32px;
    font-family:var(--sans);font-size:.7rem;font-weight:500;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold);
    white-space:nowrap;
  }
  @keyframes navMarqueeRoll{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
  }

  /* Top hairline pulled down to sit above the new header */
  .nav-center::before{top:60px}
}

/* Ticker bar */
.ticker{
  background:var(--charcoal);color:var(--blush);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  padding:11px 0;overflow:hidden;border-bottom:1px solid rgba(249,245,239,0.06);
  position:relative;z-index:2;
}
.ticker-track{display:flex;gap:64px;animation:tickerSlide 50s linear infinite;width:max-content}
.ticker span{display:inline-flex;align-items:center;gap:18px;white-space:nowrap}
.ticker .dot{width:5px;height:5px;background:var(--gold);border-radius:50%;display:inline-block}
@keyframes tickerSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =============================================================
   HERO — full-bleed image with slow Ken Burns
============================================================= */
.hero{
  position:relative;
  background:var(--charcoal);
  color:var(--ivory);
  overflow:hidden;
  min-height:92vh;
  display:flex;align-items:flex-end;
}
.hero-media{
  position:absolute;inset:0;overflow:hidden;
}
.hero-image{
  width:100%;height:100%;
  object-fit:cover;
  /* Focal point favors the staff member on the right side of the photo so she
     stays visible behind the headline column on the left. */
  object-position:65% 50%;
  /* Pull saturation back so the photo sits behind type rather than competing with it */
  filter:saturate(92%) contrast(98%) brightness(.86);
  /* Slow Ken Burns: gentle zoom + slight horizontal drift for life without distraction */
  transform:scale(1.06);
  animation:heroImageDrift 28s ease-in-out infinite;
  will-change:transform;
}
@keyframes heroImageDrift{
  0%,100%{transform:scale(1.06) translate3d(0,0,0)}
  50%   {transform:scale(1.10) translate3d(-1.2%,-0.6%,0)}
}
@media(prefers-reduced-motion:reduce){
  .hero-image{animation:none;transform:scale(1.04)}
}
/* Cinematic, layered overlay: deep left scrim for text clarity,
   bottom darken for headline base, soft vignette around edges,
   and a brand-tinted wash so the photo reads as KEYS-coloured. */
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    /* Left scrim — deepest where the text lives, fully transparent past the headline column */
    linear-gradient(90deg,
      rgba(20,15,11,0.92) 0%,
      rgba(20,15,11,0.86) 25%,
      rgba(20,15,11,0.72) 50%,
      rgba(20,15,11,0.42) 70%,
      rgba(20,15,11,0.10) 88%,
      rgba(20,15,11,0.00) 100%),
    /* Bottom gradient — settles the headline and ties into the next section */
    linear-gradient(180deg,
      rgba(20,15,11,0.30) 0%,
      rgba(20,15,11,0.10) 35%,
      rgba(20,15,11,0.65) 80%,
      rgba(20,15,11,0.96) 100%),
    /* Subtle radial vignette — focuses the eye, kills bright corners */
    radial-gradient(140% 90% at 30% 45%, transparent 35%, rgba(20,15,11,0.55) 100%),
    /* Brand tint — warm charcoal/teal duotone wash */
    linear-gradient(135deg, rgba(43,140,140,0.06), rgba(184,132,58,0.05));
}
/* Hero needs bigger breathing room than the standard wrap gutter — the headline
   is huge and would feel claustrophobic against the viewport edge otherwise.
   We add extra inline padding ON TOP of the wrap gutter so text never touches the edge.
   Right side gets a bit of room too so headlines don't crowd the imagery. */
.hero-content{
  position:relative;z-index:3;width:100%;
  padding:clamp(96px,12vw,168px) clamp(20px,4vw,72px) clamp(64px,7vw,104px) clamp(20px,5vw,56px);
}
.hero h1{
  color:var(--ivory);
  max-width:16ch;
  margin:0 0 1.5rem;
  font-size:clamp(2.6rem,7vw,6.2rem);
  line-height:1.04;
  letter-spacing:-.014em;
  /* Soft drop-shadow as a safety net over moving video frames. Subtle on light areas, invisible on dark. */
  text-shadow:0 2px 24px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.35);
}
.hero h1 em{font-style:normal;color:#E9C77E} /* warm gold accent for "Done Right." */
.hero h1 .word{
  display:inline-block;
  opacity:0;transform:translateY(40px);
  animation:wordIn .9s var(--ease-out) forwards;
}
.hero h1 .word:nth-child(1){animation-delay:.20s}
.hero h1 .word:nth-child(2){animation-delay:.30s}
.hero h1 .word:nth-child(3){animation-delay:.40s}
.hero h1 .word:nth-child(4){animation-delay:.50s}
.hero h1 .word:nth-child(5){animation-delay:.60s}
.hero h1 .word:nth-child(6){animation-delay:.70s}
@keyframes wordIn{ to{opacity:1;transform:none} }
.hero-sub{
  font-family:var(--sans);
  font-size:clamp(1.02rem,1.25vw,1.18rem);
  line-height:1.7;
  color:rgba(249,245,239,0.94);
  /* Tighter measure (44ch) gives the reader a comfortable line length and
     forces the paragraph into a clean 4-line block on desktop. */
  max-width:44ch;
  margin:0 0 2.6rem;
  letter-spacing:.005em;
  opacity:0;animation:wordIn 1s var(--ease-out) .85s forwards;
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.hero-eyebrow{
  color:rgba(249,245,239,.82);
  margin-bottom:1.4rem;
  opacity:0;animation:wordIn 1s var(--ease-out) .1s forwards;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.hero-eyebrow::before{background:var(--gold);opacity:.85}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;opacity:0;animation:wordIn 1s var(--ease-out) 1.0s forwards}
.hero-meta{
  position:absolute;right:var(--gutter);bottom:32px;z-index:3;
  display:flex;gap:32px;align-items:center;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(249,245,239,.7);
  opacity:0;animation:wordIn 1s var(--ease-out) 1.2s forwards;
}
.hero-meta::before{content:"";width:60px;height:1px;background:rgba(249,245,239,0.4)}
@media(max-width:780px){.hero-meta{display:none}}

/* === Mobile hero refinements === */
@media(max-width:640px){
  .hero{min-height:auto}
  .hero-content{
    /* Comfortable inline gutter so text never crowds the screen edge on phones. */
    padding:96px clamp(22px,6vw,30px) 64px;
  }
  .hero h1{
    font-size:clamp(2.05rem,8.4vw,2.7rem);
    line-height:1.1;
    max-width:none;
    margin:0 0 1.15rem;
    letter-spacing:-.016em;
  }
  .hero-eyebrow{
    font-size:.6rem;letter-spacing:.22em;
    margin-bottom:1.05rem;
  }
  .hero-eyebrow::before{width:22px}
  .hero-sub{
    font-size:.98rem;line-height:1.65;
    max-width:38ch;
    margin:0 0 1.85rem;
    color:rgba(249,245,239,.92);
    letter-spacing:.005em;
  }
  .hero-ctas{gap:10px;flex-direction:column;align-items:stretch}
  .hero-ctas .btn{
    width:100%;justify-content:center;
    padding:16px 22px;font-size:.74rem;
  }
  .scroll-cue{display:none}
  /* On mobile the text takes the full column, so we need a strong vertical
     scrim rather than a left-side one. */
  .hero-overlay{
    background:
      linear-gradient(180deg,
        rgba(20,15,11,0.55) 0%,
        rgba(20,15,11,0.35) 22%,
        rgba(20,15,11,0.55) 55%,
        rgba(20,15,11,0.92) 88%,
        rgba(20,15,11,0.98) 100%),
      radial-gradient(120% 80% at 50% 35%, transparent 30%, rgba(20,15,11,0.45) 100%);
  }
}
@media(max-width:380px){
  .hero h1{font-size:1.95rem}
  .hero-sub{font-size:.93rem;line-height:1.6;max-width:none}
  .hero-content{padding:88px 22px 56px}
}

/* Sound/play control (optional pill) */
.video-mute{
  position:absolute;right:var(--gutter);top:calc(var(--gutter) + 80px);z-index:4;
  width:42px;height:42px;border-radius:50%;
  background:rgba(249,245,239,0.12);backdrop-filter:blur(10px);
  border:1px solid rgba(249,245,239,0.2);color:var(--ivory);
  display:none;align-items:center;justify-content:center;
}

/* Scroll cue */
.scroll-cue{
  position:absolute;left:var(--gutter);bottom:32px;z-index:3;
  display:flex;align-items:center;gap:12px;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(249,245,239,.7);
}
.scroll-cue .line{display:inline-block;width:48px;height:1px;background:rgba(249,245,239,0.4);position:relative;overflow:hidden}
.scroll-cue .line::after{content:"";position:absolute;inset:0;background:var(--ivory);transform:translateX(-100%);animation:cueSlide 2.6s ease-in-out infinite}
@keyframes cueSlide{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(120%)}}

/* =============================================================
   STATS BAR
============================================================= */
.stats{background:var(--ivory);border-bottom:var(--hairline);position:relative;z-index:5}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{
  padding:clamp(36px,4.5vw,64px) clamp(20px,2.5vw,40px);
  border-right:var(--hairline);
  position:relative;
  transition:background .3s ease;
  display:flex;flex-direction:column;
}
.stat:hover{background:#FBF8F2}
.stat:last-child{border-right:0}
.stat-num{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(2.6rem,5.4vw,4.8rem);
  line-height:1;color:var(--charcoal);
  display:block;margin-bottom:.8rem;
  letter-spacing:-.02em;
}
.stat-num .plus{color:var(--gold)}
.stat-label{
  display:block;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--charcoal-70);
  font-weight:500;line-height:1.5;
  min-height:3em; /* reserve 2 lines so all 4 dividers align horizontally */
}
.stat-sub{
  display:block;
  margin-top:1.4rem;
  padding-top:.95rem;
  border-top:1px solid rgba(44,33,24,.08);
  font-family:var(--serif);font-style:italic;color:var(--sage);font-size:1.05rem;line-height:1.45;
}
@media(max-width:900px){
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:var(--hairline)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:520px){
  .stats-inner{grid-template-columns:1fr}
  .stat{border-right:0}
}

/* =============================================================
   SECTION HEADERS
============================================================= */
.section-head{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,80px);align-items:end;margin-bottom:clamp(48px,5vw,80px)}
.section-head h2{margin:0;max-width:18ch}
.section-head .lead{margin:0}
@media(max-width:900px){.section-head{grid-template-columns:1fr}}

/* =============================================================
   CAPABILITY / SERVICE CARDS
============================================================= */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:var(--hairline)}
.cap{
  padding:clamp(32px,3.5vw,52px) clamp(24px,2.5vw,40px);
  border-bottom:var(--hairline);border-right:var(--hairline);
  position:relative;background:var(--ivory);
  transition:background .4s ease;overflow:hidden;
}
.cap::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.cap:hover{background:#FBF8F2}
.cap:hover::before{transform:scaleX(1)}
.cap:nth-child(3n){border-right:0}
.cap-icon{width:56px;height:56px;color:var(--teal);margin-bottom:1.4rem;transition:transform .5s var(--ease-spring)}
.cap:hover .cap-icon{transform:translateY(-3px)}
.cap-icon svg{width:100%;height:100%}
.cap h3{margin:0 0 .55rem;font-size:1.7rem}
.cap p{margin:0;color:var(--charcoal-70);font-size:.96rem;line-height:1.6}
.cap-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:1.4rem;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--charcoal);
  border-bottom:1px solid var(--charcoal);padding-bottom:5px;
  transition:color .3s,border-color .3s,transform .3s;
}
.cap-link:hover{color:var(--teal);border-color:var(--teal);transform:translateX(2px)}
@media(max-width:900px){
  .cap-grid{grid-template-columns:1fr}
  .cap,.cap:nth-child(3n){border-right:0}
}

/* Dietary cards — unified teal accent, varied via icon style */
.diet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px)}
.diet{
  background:var(--blush);
  padding:clamp(28px,3vw,40px);
  display:flex;flex-direction:column;gap:1rem;min-height:280px;
  position:relative;overflow:hidden;
  border-top:3px solid var(--teal);
  transition:transform .4s var(--ease-out),box-shadow .4s ease;
}
.diet:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.diet--vegan,.diet--veg,.diet--halal{border-top-color:var(--teal)}
.diet-badge{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--charcoal-70)}
.diet h3{font-size:2rem;margin:0}
.diet p{margin:0;color:var(--charcoal-70);font-size:.96rem;line-height:1.55}
.diet-icon{width:48px;height:48px;color:var(--teal);margin-top:auto;transition:transform .5s var(--ease-spring)}
.diet:hover .diet-icon{transform:rotate(-6deg) scale(1.05)}
@media(max-width:780px){.diet-grid{grid-template-columns:1fr}}

/* =============================================================
   SERVICE MODELS A & B
============================================================= */
.models{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:var(--hairline);border-bottom:var(--hairline)}
.model{
  padding:clamp(40px,5vw,72px);
  position:relative;
  display:flex;flex-direction:column;gap:1.2rem;
  transition:padding .4s ease;
}
.model-a{background:#E5EAE0;border-right:var(--hairline)}
.model-b{background:var(--charcoal);color:var(--ivory)}
.model-b h3{color:var(--ivory)}
.model-b p{color:rgba(249,245,239,0.78)}
.model-tag{
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;color:var(--charcoal-70);
}
.model-b .model-tag{color:var(--taupe)}
.model-tag::before{content:"";display:block;width:24px;height:1px;background:currentColor}
.model h3{font-size:clamp(1.7rem,2.8vw,2.4rem);margin:0}
.model ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.8rem}
.model li{padding-left:24px;position:relative;font-size:.98rem;line-height:1.55}
.model li::before{content:"";position:absolute;left:0;top:11px;width:14px;height:1px;background:var(--teal)}
.model-b li::before{background:var(--taupe)}
.model-foot{margin-top:auto;padding-top:1.5rem;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--charcoal-70)}
.model-b .model-foot{color:rgba(249,245,239,0.7)}
@media(max-width:880px){.models{grid-template-columns:1fr}.model-a{border-right:0;border-bottom:var(--hairline)}}

/* =============================================================
   SPLIT / EDITORIAL BLOCK
============================================================= */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.split.reverse{grid-template-columns:1fr 1.1fr}
.split.reverse .split-copy{order:2}
.split-copy h2{margin-top:0}
.split-img{position:relative;aspect-ratio:4/5;overflow:hidden}
.split-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.split-img:hover img{transform:scale(1.04)}
.split-img-tag{
  position:absolute;left:18px;bottom:18px;
  background:var(--ivory);color:var(--charcoal);
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  padding:8px 14px;
}
.split-meta{display:flex;gap:2.5rem;margin-top:2rem;padding-top:2rem;border-top:var(--hairline)}
.split-meta div span{display:block;font-family:var(--serif);font-style:italic;font-size:2.2rem;color:var(--charcoal);line-height:1}
.split-meta div small{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--charcoal-70);margin-top:6px;display:block}
@media(max-width:900px){.split,.split.reverse{grid-template-columns:1fr}.split.reverse .split-copy{order:0}}

/* =============================================================
   PROCESS — 4 steps
============================================================= */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:var(--hairline);position:relative;counter-reset:step}
.process-step{
  padding:clamp(32px,3.5vw,52px) clamp(24px,2.4vw,36px);
  border-right:var(--hairline);position:relative;
  transition:background .35s ease;counter-increment:step;
}
.process-step:last-child{border-right:0}
.process-step:hover{background:#FBF8F2}
.process-step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:1.6rem;color:var(--gold);display:block;margin-bottom:1.4rem;
  border-bottom:1px solid rgba(184,132,58,0.3);padding-bottom:1rem;
}
.process-step h4{font-size:1.3rem;margin:0 0 .55rem}
.process-step p{margin:0;font-size:.94rem;color:var(--charcoal-70);line-height:1.55}
@media(max-width:900px){.process{grid-template-columns:repeat(2,1fr)}.process-step:nth-child(2){border-right:0}.process-step{border-bottom:var(--hairline)}}
@media(max-width:520px){.process{grid-template-columns:1fr}.process-step{border-right:0}}

/* =============================================================
   TESTIMONIALS
============================================================= */
.tstm{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
.tstm-card{
  background:linear-gradient(180deg,#FBF7F0 0%, #F6EFE3 100%);
  padding:clamp(32px,3.2vw,44px) clamp(28px,3vw,40px);
  position:relative;border-radius:2px;
  border:1px solid rgba(184,132,58,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 28px -22px rgba(44,33,24,.35);
  overflow:hidden;
}
.tstm-card::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:48px;
  background:linear-gradient(90deg,var(--gold),var(--teal));
  transform-origin:left center;transition:width .55s var(--ease-out);
}
.tstm-card:hover::before{width:100%}
.tstm-mark{
  font-family:var(--serif);font-style:italic;font-size:4.5rem;line-height:.6;
  color:var(--gold);margin-bottom:1rem;display:block;
  text-shadow:0 2px 0 rgba(184,132,58,.08);
}
.tstm-quote{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.6vw,1.4rem);
  line-height:1.5;color:var(--charcoal);margin:0 0 1.6rem;
}
.tstm-meta{
  display:flex;align-items:center;gap:14px;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--charcoal-70);
}
.tstm-name{color:var(--charcoal);font-weight:500;letter-spacing:.18em}
@media(max-width:900px){.tstm{grid-template-columns:1fr}}

/* =============================================================
   PROVIDERS STRIP
============================================================= */
.providers{padding:clamp(48px,6vw,80px) 0;border-top:var(--hairline);border-bottom:var(--hairline);background:var(--ivory)}
.providers-head{text-align:center;margin-bottom:clamp(28px,3vw,48px)}
.providers-head .eyebrow{justify-content:center}
.providers-head .eyebrow::before{display:none}
.providers-head h2{font-size:clamp(1.5rem,2vw,1.8rem);font-style:normal;font-family:var(--sans);font-weight:300;letter-spacing:.04em;color:var(--charcoal-70)}
.providers-head h2 em{font-style:italic;font-family:var(--serif);color:var(--charcoal);font-size:1.3em}
.provider-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:48px;padding:0 var(--gutter)}
.provider{
  flex:1;min-width:140px;max-width:200px;
  display:flex;align-items:center;justify-content:center;
  height:60px;
  filter:grayscale(1);opacity:.5;
  transition:filter .5s ease,opacity .5s ease,transform .5s var(--ease-spring);
}
.provider:hover{filter:grayscale(0);opacity:1;transform:translateY(-3px)}
.provider svg{max-height:54px;width:auto;height:100%}

/* =============================================================
   MICHIGAN MAP (improved silhouette)
============================================================= */
.map-section{background:var(--charcoal);color:var(--ivory);position:relative;overflow:hidden}
.map-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,5vw,80px);align-items:center;position:relative;z-index:2}
@media(max-width:980px){.map-grid{grid-template-columns:1fr}}
.map-stage{position:relative}
.michigan-svg{width:100%;height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,0.45))}
.michigan-svg .land{fill:rgba(249,245,239,0.05);stroke:rgba(249,245,239,0.4);stroke-width:1.4}
.michigan-svg .land-shadow{fill:rgba(0,0,0,0.18);transform:translate(2px,4px)}
.pin{cursor:pointer;outline:none}
.pin .ring{
  fill:none;stroke:var(--teal);stroke-width:1.4;
  transform-origin:center;transform-box:fill-box;
  animation:pinPulse 2.6s ease-out infinite;
}
.pin.alt .ring{stroke:var(--gold);animation-delay:.6s}
.pin.alt2 .ring{stroke:var(--orange);animation-delay:1.2s}
.pin .dot{fill:var(--teal);transition:r .3s var(--ease-spring)}
.pin.alt .dot{fill:var(--gold)}
.pin.alt2 .dot{fill:var(--orange)}
.pin:hover .dot,.pin.active .dot,.pin:focus-visible .dot{r:9}
.pin .lbl{fill:var(--ivory);font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:0;transition:opacity .3s}
.pin:hover .lbl,.pin.active .lbl,.pin:focus-visible .lbl{opacity:1}
@keyframes pinPulse{
  0%{transform:scale(1);opacity:.9}
  70%{transform:scale(2.6);opacity:0}
  100%{transform:scale(2.6);opacity:0}
}
.locations{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;border-top:var(--hairline-light)}
.loc{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:center;
  padding:18px 4px;border-bottom:var(--hairline-light);cursor:pointer;
  transition:padding-left .35s var(--ease-out),background .35s ease;
}
.loc:hover,.loc.active{padding-left:18px;background:rgba(249,245,239,0.03)}
.loc-num{font-family:var(--serif);font-style:italic;color:var(--taupe);font-size:1.25rem;line-height:1;width:40px}
.loc-name{font-family:var(--serif);font-style:italic;font-size:1.45rem;line-height:1.2;color:var(--ivory)}
.loc-meta{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);text-align:right}
.loc-region{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe);margin-top:6px}
.map-legend{display:flex;gap:24px;margin-top:2rem;flex-wrap:wrap;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe)}
.lg-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;vertical-align:middle}

/* =============================================================
   LIVE DELIVERY NETWORK MAP (v2)
============================================================= */
.map-section--v2{padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(72px,8vw,120px)}
.map-section--v2 .section-head{position:relative;z-index:2}
.map-bg-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:
    linear-gradient(rgba(249,245,239,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249,245,239,.07) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.map-bg-glow{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.35;z-index:1}
.map-bg-glow--teal{background:radial-gradient(circle, rgba(60,138,138,.55), transparent 70%);top:-120px;left:-120px}
.map-bg-glow--gold{background:radial-gradient(circle, rgba(201,160,74,.45), transparent 70%);bottom:-160px;right:-160px}

/* Live ticker */
.map-ticker{
  display:inline-flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  margin:1.6rem 0 2.4rem;padding:.85rem 1.4rem;
  background:rgba(20,16,13,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(201,160,74,.22);
  box-shadow:0 16px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(249,245,239,.06);
  position:relative;z-index:3;
}
.map-ticker__item{display:inline-flex;align-items:baseline;gap:.5rem;font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;color:rgba(249,245,239,.78)}
.map-ticker__item strong{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.7rem;line-height:1;color:var(--gold)}
.map-ticker__item .plus{color:var(--gold);font-family:var(--serif);font-style:italic;font-size:1.2rem;margin-left:-2px}
.map-ticker__item em{font-style:normal;text-transform:uppercase;letter-spacing:.18em;font-size:.66rem;color:var(--taupe)}
.map-ticker__divider{width:1px;height:28px;background:linear-gradient(to bottom, transparent, rgba(201,160,74,.4), transparent)}
.map-ticker__dot{width:8px;height:8px;border-radius:50%;background:#5fd4a5;box-shadow:0 0 0 0 rgba(95,212,165,.7);animation:liveDotPulse 1.6s ease-out infinite;margin-right:.3rem}
@keyframes liveDotPulse{0%{box-shadow:0 0 0 0 rgba(95,212,165,.6)}70%{box-shadow:0 0 0 10px rgba(95,212,165,0)}100%{box-shadow:0 0 0 0 rgba(95,212,165,0)}}

.map-grid--v2{grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(32px,4vw,64px)}
@media(max-width:980px){.map-grid--v2{grid-template-columns:1fr}}

/* SVG enhancements */
.michigan-svg--v2{filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}
.michigan-svg--v2 .land{fill:rgba(249,245,239,.04);stroke:rgba(249,245,239,.32);stroke-width:1.2;stroke-dasharray:0}
.michigan-svg--v2 .lake{fill:#3c8a8a}

/* Routes — animated dashed supply lines */
.michigan-svg--v2 .route{
  stroke-width:2;
  stroke-dasharray:5 7;
  opacity:.85;
  animation:routeFlow 1.4s linear infinite;
}
@keyframes routeFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-24}}
.michigan-svg--v2 .route-pulses circle{filter:drop-shadow(0 0 6px rgba(255,238,200,.95))}

/* Hub pin (Detroit) */
.michigan-svg--v2 .pin-hub{cursor:pointer}
.michigan-svg--v2 .hub-dot{fill:var(--gold)}
.michigan-svg--v2 .hub-core{fill:#fff8e6}
.michigan-svg--v2 .sonar{
  fill:none;stroke:var(--gold);stroke-width:1.4;
  transform-origin:430px 450px;transform-box:view-box;
  opacity:.85;
}
.michigan-svg--v2 .sonar-1{animation:hubSonar 2.8s ease-out infinite}
.michigan-svg--v2 .sonar-2{animation:hubSonar 2.8s ease-out infinite .9s}
.michigan-svg--v2 .sonar-3{animation:hubSonar 2.8s ease-out infinite 1.8s}
@keyframes hubSonar{0%{transform:scale(.5);opacity:.95}80%{transform:scale(3.4);opacity:0}100%{transform:scale(3.4);opacity:0}}
.michigan-svg--v2 .lbl-hub{fill:var(--gold);font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;opacity:1}
.michigan-svg--v2 .lbl-hub-sub{fill:var(--ivory);font-family:var(--sans);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.72}

/* Spoke pins — always visible labels (subtle) */
.michigan-svg--v2 .pin .lbl{opacity:.55;font-weight:500}
.michigan-svg--v2 .pin:hover .lbl,
.michigan-svg--v2 .pin.active .lbl,
.michigan-svg--v2 .pin:focus-visible .lbl{opacity:1;font-weight:600}

.michigan-svg--v2 .pin.active .ring{stroke-width:2.2}
.michigan-svg--v2 .pin.active .dot{r:9}

/* Map legend (corner) */
.map-legend-v2{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  display:inline-flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;
  padding:.55rem 1rem;background:rgba(20,16,13,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(201,160,74,.2);
  font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(249,245,239,.78);
  pointer-events:none;
}
.map-legend-v2__item{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.map-legend-v2__dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.map-legend-v2__dot--gold{background:var(--gold);box-shadow:0 0 6px rgba(201,160,74,.7)}
.map-legend-v2__dot--teal{background:var(--teal)}
.map-legend-v2__dot--orange{background:var(--orange)}
@media(max-width:520px){
  .map-legend-v2{gap:.7rem;padding:.45rem .7rem;font-size:.55rem;letter-spacing:.16em}
}

/* Detail panel */
.map-detail{position:relative}
.map-detail__inner{
  background:linear-gradient(180deg, rgba(20,16,13,.65), rgba(20,16,13,.4));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(201,160,74,.22);
  padding:clamp(24px,3vw,36px);
  position:relative;overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(249,245,239,.06);
}
.map-detail__inner::before,.map-detail__inner::after{
  content:"";position:absolute;width:22px;height:22px;border:1.5px solid var(--gold);
}
.map-detail__inner::before{top:10px;left:10px;border-right:none;border-bottom:none}
.map-detail__inner::after{bottom:10px;right:10px;border-left:none;border-top:none}
.map-detail__eyebrow{display:inline-block;font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem}
.map-detail__name{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.1;color:var(--ivory);margin:0 0 .4rem;transition:opacity .35s ease, transform .35s var(--ease-out)}
.map-detail__region{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);margin:0 0 1.6rem}
.map-detail__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1rem 0;border-top:1px solid rgba(201,160,74,.18);border-bottom:1px solid rgba(201,160,74,.18);margin-bottom:1.4rem}
.map-detail__stats > div{text-align:left}
.map-detail__stats strong{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.4rem;line-height:1;color:var(--gold)}
.map-detail__stats em{display:block;font-style:normal;font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-top:.4rem}
.map-detail__copy{font-family:var(--sans);color:rgba(249,245,239,.78);font-size:.95rem;line-height:1.6;margin:0 0 1.6rem;min-height:5rem}
.map-detail__cta{margin-top:1rem}

/* fade transition when content updates */
.map-detail.is-swapping .map-detail__name,
.map-detail.is-swapping .map-detail__region,
.map-detail.is-swapping .map-detail__copy,
.map-detail.is-swapping .map-detail__stats,
.map-detail.is-swapping .map-detail__eyebrow{opacity:0;transform:translateY(6px)}

/* Pin chips */
.map-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.2rem}
.map-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:.55rem .9rem;background:rgba(20,16,13,.4);border:1px solid rgba(249,245,239,.12);
  color:rgba(249,245,239,.78);font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;transition:all .25s var(--ease-out);
}
.map-chip:hover{border-color:var(--gold);color:var(--ivory);transform:translateY(-1px)}
.map-chip.is-active{background:rgba(201,160,74,.18);border-color:var(--gold);color:var(--ivory);box-shadow:0 6px 16px rgba(201,160,74,.18)}
.map-chip__dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.map-chip__dot--gold{background:var(--gold);box-shadow:0 0 8px rgba(201,160,74,.7)}
.map-chip__dot--orange{background:var(--orange)}
.map-chip__dot--teal{background:var(--teal)}

@media(max-width:640px){
  .map-ticker{gap:.9rem;padding:.7rem 1rem;width:100%;justify-content:flex-start}
  .map-ticker__item strong{font-size:1.4rem}
  .map-ticker__divider{display:none}
  .map-detail__stats{grid-template-columns:repeat(3,1fr);gap:.6rem}
  .map-detail__stats strong{font-size:1.15rem}
  .map-detail__stats em{font-size:.56rem;letter-spacing:.16em}
}

@media(prefers-reduced-motion:reduce){
  .michigan-svg--v2 .route{animation:none}
  .michigan-svg--v2 .sonar,.michigan-svg--v2 .route-pulses circle{display:none}
  .map-ticker__dot{animation:none}
}

/* =============================================================
   NEWS CARDS
============================================================= */
.news-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,2.5vw,40px);align-items:start}
.news-grid .right{display:grid;grid-template-rows:auto auto;gap:clamp(24px,2.5vw,40px)}
.news-grid-archive{align-items:start}
.news{
  display:flex;flex-direction:column;background:var(--ivory);border:var(--hairline);
  overflow:hidden;transition:transform .4s var(--ease-out),box-shadow .4s ease;
}
.news:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.news-img{aspect-ratio:16/10;overflow:hidden;background:var(--blush);position:relative}
.news-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.news:hover .news-img img{transform:scale(1.06)}
.news-body{padding:clamp(20px,2vw,32px);display:flex;flex-direction:column;gap:.6rem;flex:1}
.news-cat{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);font-weight:500}
.news h3{margin:0;font-size:clamp(1.4rem,1.8vw,1.7rem);line-height:1.2}
.news-large h3{font-size:clamp(1.8rem,2.4vw,2.4rem)}
.news-meta{margin-top:auto;display:flex;align-items:center;gap:14px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--charcoal-70)}
@media(max-width:900px){
  .news-grid{grid-template-columns:1fr}
  .news-grid .right{grid-template-rows:auto auto}
}

/* =============================================================
   TURKEY DRIVE
============================================================= */
/* Homepage Community Outreach umbrella section */
.community-feature{background:linear-gradient(180deg,#F5E2D2 0%,#EFD3B9 100%);padding:clamp(60px,8vw,120px) 0;position:relative;overflow:hidden}
.community-feature__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}
.community-feature__img{aspect-ratio:5/6;overflow:hidden;position:relative}
.community-feature__img img{width:100%;height:100%;object-fit:cover}
.community-programs{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.community-programs li{display:flex;align-items:flex-start;gap:18px;padding:14px 0;border-top:1px solid rgba(44,33,24,.14)}
.community-programs li:last-child{border-bottom:1px solid rgba(44,33,24,.14)}
.community-programs__num{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.4rem;color:var(--orange);line-height:1;flex:0 0 auto;min-width:32px;padding-top:2px}
.community-programs strong{display:block;font-family:var(--sans);font-weight:500;font-size:.95rem;color:var(--charcoal);letter-spacing:.01em;margin-bottom:4px}
.community-programs small{display:block;font-size:.85rem;line-height:1.55;color:var(--charcoal-70)}
.community-feature__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:2rem 0 2.4rem;padding:1.6rem 0;border-top:1px solid rgba(44,33,24,0.18);border-bottom:1px solid rgba(44,33,24,0.18)}
.community-feature__stat span{font-family:var(--serif);font-style:italic;font-size:2.4rem;color:var(--orange);line-height:1;display:block}
.community-feature__stat small{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--charcoal-70);margin-top:8px;display:block}
@media(max-width:900px){.community-feature__grid{grid-template-columns:1fr}}
@media(max-width:520px){.community-programs__num{font-size:1.2rem;min-width:28px}.community-programs strong{font-size:.9rem}.community-programs small{font-size:.8rem}}

/* =============================================================
   POLICY CARD / SOCIAL / CTA
============================================================= */
.policy-card{background:var(--blush);padding:clamp(36px,4vw,56px);border-left:4px solid var(--gold);display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(32px,4vw,64px);align-items:center}
@media(max-width:900px){.policy-card{grid-template-columns:1fr}}
.policy-card h3{margin:0;font-size:clamp(1.6rem,2.4vw,2.2rem)}
.policy-card p{color:var(--charcoal-70)}

/* Iconic variant — adds a flat-illustration column */
.policy-card--iconic{
  grid-template-columns:auto 1.1fr auto;
  gap:clamp(28px,3.5vw,56px);
}
/* Icon tile — the source illustration has its own deep navy backdrop, so we
   embrace it as a deliberate brand element: a rounded charcoal tile with a
   subtle gold hairline ring + soft warm shadow makes it read as a polished
   badge rather than a flat sticker. */
.policy-card__icon{
  width:clamp(120px,13vw,168px);
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  border-radius:22px;
  overflow:hidden;
  background:#2C3340;
  border:1px solid rgba(184,132,58,.28);
  box-shadow:
    0 1px 0 rgba(249,245,239,.05) inset,
    0 18px 36px -18px rgba(20,15,11,.45),
    0 6px 14px -8px rgba(20,15,11,.35);
}
.policy-card__icon img{
  width:100%;height:100%;display:block;
  object-fit:cover;
}
.policy-card__actions{display:flex;flex-direction:column;gap:14px;min-width:220px}
@media(max-width:900px){
  .policy-card--iconic{grid-template-columns:1fr;text-align:center}
  .policy-card__icon{width:140px;margin:0 auto}
  .policy-card__actions{min-width:0}
}

.mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px}
.mosaic > a{position:relative;overflow:hidden;background:var(--blush);min-height:160px}
.mosaic > a:nth-child(1){grid-row:1/3;min-height:340px}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out),filter .35s}
.mosaic > a:hover img{transform:scale(1.07);filter:brightness(.7)}
.mosaic .meta{position:absolute;inset:auto 12px 12px 12px;color:var(--ivory);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.mosaic > a:hover .meta{opacity:1;transform:translateY(0)}
@media(max-width:780px){
  .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr)}
  .mosaic > a:nth-child(1){grid-row:1/2;grid-column:1/3}
}
@media(max-width:480px){
  .mosaic{grid-template-columns:1fr;grid-template-rows:auto;gap:10px}
  .mosaic > a:nth-child(1){grid-row:auto;grid-column:auto;min-height:240px}
  .mosaic > a{min-height:180px}
  .mosaic .meta{opacity:1;transform:none}
}

.cta-block{
  background:var(--charcoal);color:var(--ivory);
  padding:clamp(60px,8vw,120px) 0;text-align:center;
  position:relative;overflow:hidden;
}
.cta-block::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 50% 50%, rgba(43,140,140,0.20), transparent 70%);
  pointer-events:none;
}
.cta-block h2{color:var(--ivory);max-width:18ch;margin:0 auto 1.2rem;position:relative;z-index:2}
.cta-block .lead{margin:0 auto 2rem;color:rgba(249,245,239,0.85);position:relative;z-index:2}
.cta-block .btns{position:relative;z-index:2;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.cta-block__wrap{position:relative;z-index:2}
.cta-block__icon{
  width:clamp(110px,12vw,148px);
  aspect-ratio:1/1;
  margin:0 auto 1.5rem;
  display:flex;justify-content:center;align-items:center;
  border-radius:22px;
  overflow:hidden;
  background:#2C3340;
  border:1px solid rgba(184,132,58,.34);
  box-shadow:
    0 1px 0 rgba(249,245,239,.06) inset,
    0 22px 44px -20px rgba(0,0,0,.55),
    0 0 32px rgba(43,140,140,.15);
}
.cta-block__icon img{width:100%;height:100%;display:block;object-fit:cover}
.cta-block__body{position:relative;z-index:2}

/* Iconic providers head — flat illustration alongside the heading */
.providers-head--iconic{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(20px,2.5vw,32px);
  text-align:left;
  flex-wrap:wrap;
}
.providers-head__icon{
  width:clamp(72px,7vw,96px);
  aspect-ratio:1/1;
  flex:0 0 auto;
  border-radius:18px;
  overflow:hidden;
  background:#2C3340;
  border:1px solid rgba(184,132,58,.26);
  box-shadow:
    0 1px 0 rgba(249,245,239,.05) inset,
    0 14px 28px -16px rgba(20,15,11,.4);
}
.providers-head__icon img{width:100%;height:100%;display:block;object-fit:cover}
.providers-head__copy{max-width:560px}
.providers-head__lead{
  margin:14px 0 0;
  font-family:var(--sans);
  font-size:.96rem;line-height:1.65;
  color:var(--charcoal-70);
  font-weight:300;
  letter-spacing:.005em;
}
@media(max-width:560px){
  .providers-head--iconic{flex-direction:column;text-align:center;gap:14px}
  .providers-head__icon{width:64px}
  .providers-head__lead{font-size:.92rem;text-align:center}
}

/* Sourcing proof points — quiet stat row between header and marquee */
.providers-proof{
  list-style:none;margin:clamp(28px,3vw,40px) auto 0;padding:0;
  max-width:780px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,2vw,28px);
  text-align:center;
  position:relative;
}
.providers-proof::before,
.providers-proof::after{
  content:"";position:absolute;top:50%;width:14%;height:1px;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(44,33,24,.18),transparent);
}
.providers-proof::before{left:-2%}
.providers-proof::after{right:-2%}
.providers-proof li{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:6px 4px;
  border-left:1px solid rgba(44,33,24,.10);
}
.providers-proof li:first-child{border-left:0}
.providers-proof__num{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.55rem,2.4vw,2rem);line-height:1;
  color:var(--charcoal);
  letter-spacing:.005em;
  display:inline-flex;align-items:baseline;gap:2px;
}
.providers-proof__unit{
  font-family:var(--sans);font-style:normal;font-weight:400;
  font-size:.55em;letter-spacing:.08em;color:var(--charcoal-70);
  margin-left:2px;
}
.providers-proof__sep{
  font-family:var(--sans);font-style:normal;color:var(--gold);
  margin:0 2px;font-size:.85em;display:inline-block;transform:translateY(-1px);
}
.providers-proof__label{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--charcoal-70);font-weight:500;
}
@media(max-width:680px){
  .providers-proof{
    grid-template-columns:1fr;
    gap:22px 0;
    max-width:320px;
  }
  .providers-proof::before,.providers-proof::after{display:none}
  .providers-proof li{border-left:0;border-top:1px solid rgba(44,33,24,.10);padding-top:18px}
  .providers-proof li:first-child{border-top:0;padding-top:6px}
}

/* Hairline label that introduces the marquee */
.providers-marquee-label{
  display:flex;align-items:center;justify-content:center;
  gap:14px;
  margin:clamp(28px,3.4vw,44px) auto clamp(14px,1.6vw,20px);
  max-width:540px;
}
.providers-marquee-label__line{
  flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(44,33,24,.20),transparent);
}
.providers-marquee-label__text{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);font-weight:600;
  white-space:nowrap;
}

/* Bottom CTA link beneath the marquee */
.providers-foot{text-align:center;margin-top:clamp(20px,2.4vw,32px)}
.providers-foot__cta{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.24em;
  text-transform:uppercase;font-weight:600;
  color:var(--teal);text-decoration:none;
  padding:10px 4px;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease-out),border-color .25s var(--ease-out),gap .25s var(--ease-out);
}
.providers-foot__cta svg{
  width:22px;height:11px;display:block;
  transition:transform .25s var(--ease-out);
}
.providers-foot__cta:hover{color:var(--teal-bright);gap:18px;border-bottom-color:rgba(54,168,168,.4)}
.providers-foot__cta:hover svg{transform:translateX(3px)}
.providers-foot__cta:focus-visible{outline:2px solid var(--teal-bright);outline-offset:4px;border-radius:2px}

/* =============================================================
   FOOTER
============================================================= */
.foot{background:var(--charcoal);color:rgba(249,245,239,0.78);padding-top:clamp(64px,8vw,112px);border-top:1px solid rgba(249,245,239,0.06);position:relative;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(32px,4vw,56px);padding-bottom:48px;border-bottom:var(--hairline-light)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-brand{display:flex;flex-direction:row;align-items:center;gap:1rem;margin-bottom:1.2rem;text-decoration:none}
.foot p{font-size:.92rem;line-height:1.65;color:rgba(249,245,239,.7)}
.foot h5{font-family:var(--sans);font-style:normal;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe);margin:0 0 1.1rem;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.8rem}
.foot ul a{font-size:.92rem;color:rgba(249,245,239,.78);transition:color .3s,padding .3s}
.foot ul a:hover{color:var(--ivory);padding-left:6px}
.foot-social{display:flex;gap:14px;margin-top:1.2rem}
.foot-social a{width:40px;height:40px;border:1px solid rgba(249,245,239,0.2);display:inline-flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s,color .3s,transform .3s;color:var(--ivory)}
.foot-social a:hover{background:var(--teal);border-color:var(--teal);transform:translateY(-2px)}
.foot-usda{padding:32px 0;border-top:var(--hairline-light);font-size:.78rem;line-height:1.7;color:rgba(249,245,239,.65)}
.foot-usda strong{color:rgba(249,245,239,.92);display:block;margin-bottom:.4rem;font-weight:500;letter-spacing:.06em}
.foot-bottom{padding:24px 0 36px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(249,245,239,.5)}
.foot-bottom a:hover{color:var(--ivory)}
.foot-bottom-links{display:flex;gap:1.6rem;flex-wrap:wrap}
.foot-credit{color:rgba(201,160,74,.78);transition:color .3s ease}
.foot-credit:hover{color:var(--gold)}

/* =============================================================
   FORMS
============================================================= */
.form{display:grid;gap:1.2rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:680px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--charcoal-70)}
.field input,.field select,.field textarea{
  font:inherit;background:transparent;
  border:0;border-bottom:1px solid rgba(44,33,24,0.3);
  padding:.7rem 0;color:var(--charcoal);outline:none;border-radius:0;
  transition:border-color .3s;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--teal)}
.consent{display:flex;align-items:flex-start;gap:.7rem;font-size:.86rem;color:var(--charcoal-70)}
.consent input{width:18px;height:18px;margin-top:3px}

/* =============================================================
   PAGE HEADER (subpages)
============================================================= */
.ph{background:var(--charcoal);color:var(--ivory);padding:clamp(80px,9vw,140px) 0 clamp(48px,5vw,80px);position:relative;overflow:hidden}
.ph-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(40px,5vw,80px);align-items:end;position:relative;z-index:2}
@media(max-width:900px){.ph-grid{grid-template-columns:1fr}}
.ph h1{font-size:clamp(2.4rem,5vw,4.4rem);color:var(--ivory);max-width:18ch;margin:0}
.ph .crumb{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);margin-bottom:1.2rem;display:flex;gap:10px;align-items:center}
.ph .crumb a{border-bottom:1px solid transparent;transition:border-color .3s}
.ph .crumb a:hover{border-bottom-color:var(--taupe)}
.ph::before{content:"";position:absolute;right:-50px;top:60px;width:220px;height:220px;border:1px solid rgba(249,245,239,0.05);border-radius:50%;z-index:1}

/* =============================================================
   ABOUT VALUES
============================================================= */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:var(--hairline)}
.value{padding:clamp(28px,3vw,40px);border-right:var(--hairline);border-bottom:var(--hairline);transition:background .35s ease}
.value:hover{background:#FBF8F2}
.value:nth-child(4n){border-right:0}
.value h4{font-size:1.4rem;margin:0 0 .6rem}
.value p{margin:0;font-size:.92rem;color:var(--charcoal-70);line-height:1.55}
.value-num{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.2rem;margin-bottom:1rem;display:block}
@media(max-width:880px){
  .values{grid-template-columns:repeat(2,1fr)}
  .value:nth-child(2n){border-right:0}
}
@media(max-width:520px){
  .values{grid-template-columns:1fr}
  .value{border-right:0}
}

/* =============================================================
   ANIMATIONS — scroll reveal
============================================================= */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.delay-1{transition-delay:.10s}
.reveal.delay-2{transition-delay:.20s}
.reveal.delay-3{transition-delay:.30s}

/* Editorial mobile-takeover decorations — hidden by default,
   shown only inside the @media (max-width:980px) block above */
.nav-panel-watermark,.nav-panel-header,.nav-panel-marquee{display:none !important}
@media (max-width:980px){
  .nav-panel-watermark,.nav-panel-header{display:block !important}
  .nav-panel-marquee{display:flex !important}
}

/* =============================================================
   POLISH LAYER — magical micro-interactions (May 2026)
   Tasteful additions: cinematic image reveal, card hover depth,
   button shimmer, eyebrow underline draw, stat glow, badge breathe.
   All respect prefers-reduced-motion via the override below.
============================================================= */

/* Cinematic image reveal — mask wipes from bottom to top */
.split-img.reveal{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease-out)}
.split-img.reveal.in{clip-path:inset(0 0 0 0)}
.split-img.reveal img{transform:scale(1.08);transition:transform 1.6s var(--ease-out)}
.split-img.reveal.in img{transform:scale(1)}

/* Eyebrow underline grows when its parent reveals into view */
.reveal .eyebrow::before,
.reveal.eyebrow::before{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out) .15s}
.reveal.in .eyebrow::before,
.reveal.in.eyebrow::before{transform:scaleX(1)}

/* Card depth: subtle lift + warm shadow on .value and .process-step */
.value{transition:background .35s ease,transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.value:hover{transform:translateY(-3px);box-shadow:0 18px 38px -22px rgba(44,33,24,.28)}
.value:hover .value-num{color:var(--orange)}
.value-num{transition:color .35s ease}

.process-step{transition:background .35s ease,transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.process-step:hover{transform:translateY(-3px);box-shadow:0 18px 38px -22px rgba(44,33,24,.28)}

/* Cap card icon: gentle warm tint shift on hover */
.cap{transition:background .35s ease,transform .45s var(--ease-out)}
.cap:hover{transform:translateY(-2px)}
.cap-icon{transition:transform .55s var(--ease-spring),color .35s ease}
.cap:hover .cap-icon{color:var(--gold)}

/* Primary CTA: warmer gold gradient sheen on hover.
   Upgrades the existing .btn::before from a flat translucent layer to a
   directional shimmer sweep. We do NOT add a new ::after here because
   .hero-ctas .btn-primary::after is already used for the pulse ring. */
.btn-primary,.btn-gold,.btn-orange{position:relative;overflow:hidden}
.btn-primary::before,.btn-gold::before,.btn-orange::before{
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.30) 50%,transparent 100%) !important;
  transform:translateX(-100%) skewX(-18deg);
  transition:transform .8s cubic-bezier(.4,0,.2,1) !important;
}
.btn-primary:hover::before,.btn-gold:hover::before,.btn-orange:hover::before{transform:translateX(120%) skewX(-18deg)}

/* Stat number — gold underline draws in when stat enters view */
.stat{position:relative}
.stat .stat-num,.stat strong{display:inline-block;position:relative;padding-bottom:6px}
.stat .stat-num::after,.stat strong::after{
  content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease-out) .25s;
}
.stat.in .stat-num::after,.stat.in strong::after{transform:scaleX(1)}

/* Badge mark — subtle gold halo breathing in nav + footer */
@keyframes brandBadgeBreathe{
  0%,100%{filter:drop-shadow(0 0 0 rgba(184,132,58,0))}
  50%{filter:drop-shadow(0 0 6px rgba(184,132,58,.22))}
}
.foot-brand .brand-img{animation:brandBadgeBreathe 6s ease-in-out infinite;will-change:filter}
.foot-brand:hover .brand-img{animation-play-state:paused}
/* nav badge has its own richer entrance + breathe further down (search: MAGICAL BADGE ENTRANCE) */

/* Nav link: small gold dot beside the active page link */
.nav-link.active{position:relative}
.nav-link.active::before{
  content:"";position:absolute;left:-12px;top:50%;
  width:4px;height:4px;border-radius:50%;background:var(--gold);
  transform:translateY(-50%) scale(0);
  animation:navDotIn .5s var(--ease-spring) .4s forwards;
}
@keyframes navDotIn{to{transform:translateY(-50%) scale(1)}}

/* Cap-link arrow: subtle gold trail on hover */
.cap-link .arr,.cap-link::after{transition:transform .35s var(--ease-spring),color .35s ease}
.cap-link:hover{letter-spacing:.22em}

/* Soft scale-in for diet cards on reveal (community-feature does not use .reveal) */
.diet.reveal{transform:translateY(28px) scale(.985)}
.diet.reveal.in{transform:translateY(0) scale(1)}

/* Reduce badge breathing intensity — keep the magic restrained */
.nav-brand .brand-img,.foot-brand .brand-img{will-change:auto}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
  .reveal,.hero h1 .word,.hero-sub,.hero-eyebrow,.hero-ctas,.hero-meta,.intro{opacity:1;transform:none;clip-path:none;animation:none !important}
  /* Mobile takeover decorations: no drift, no marquee scroll */
  .nav-panel-watermark,.nav-panel-marquee-track,.nav-panel-header{animation:none !important;transition:none !important}
  .nav-panel-watermark{transform:none !important;opacity:.10}
  .nav-panel-header{opacity:1;transform:none}
  .intro{display:none}
}

/* =============================================================
   SCROLL-TO-TOP BUTTON
============================================================= */
.scroll-top{
  position:fixed;
  bottom:32px;right:32px;
  width:48px;height:48px;
  background:var(--charcoal);
  color:var(--ivory);
  border:1px solid rgba(249,245,239,0.18);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  opacity:0;visibility:hidden;
  transform:translateY(8px);
  transition:opacity .35s ease,transform .35s ease,visibility 0s .35s,background .25s,border-color .25s;
  z-index:80;
}
.scroll-top.visible{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .35s ease,transform .35s ease,background .25s,border-color .25s;
}
.scroll-top:hover{background:var(--teal);border-color:var(--teal)}
.scroll-top svg{width:18px;height:18px}
@media(max-width:600px){
  .scroll-top{bottom:18px;right:18px;width:42px;height:42px}
}

/* =============================================================
   UTILITIES
============================================================= */
.divider-rule{display:flex;align-items:center;gap:1rem;margin:2.4rem 0;color:var(--charcoal-70);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase}
.divider-rule::before,.divider-rule::after{content:"";flex:1;height:1px;background:rgba(44,33,24,0.18)}

.tag-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:rgba(43,140,140,0.1);color:var(--teal-deep);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.tag-pill.gold{background:rgba(184,132,58,0.1);color:var(--gold)}
.tag-pill.orange{background:rgba(217,95,43,0.1);color:var(--orange)}
.tag-pill.emerald{background:rgba(26,122,74,0.1);color:var(--emerald)}

/* =============================================================
   v5 — ENHANCEMENT LAYER (May 2026)
   Adds: scroll progress, magnetic CTAs, marquees, today's plate,
   food strip, story-pin, depth shadows, refined hero decor.
============================================================= */

/* ---- Scroll progress bar ---- */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:linear-gradient(90deg,var(--teal) 0%,var(--teal-bright) 60%,var(--gold) 100%);
  z-index:300;pointer-events:none;
  transition:width .08s linear;
  box-shadow:0 0 10px rgba(43,140,140,0.55);
}

/* ---- Cleaner intro: faster + stays out after first visit ---- */
.intro.intro-skip{display:none}

/* ---- Magnetic / CTA polish ---- */
.btn{will-change:transform}
.btn[data-magnetic]{transition:transform .35s var(--ease-spring),background-color .25s,border-color .25s,color .25s}
.btn[data-magnetic] .arr{transition:transform .35s var(--ease-spring),width .35s var(--ease-spring)}
.btn[data-magnetic]:hover .arr{transform:translateX(2px)}

/* ---- Universal card lift (applies to existing components without breaking them) ---- */
.cap, .news, .tstm-card, .diet, .model{
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),border-color .35s,background-color .35s;
  will-change:transform;
}
.cap:hover, .news:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lift);
}
.tstm-card:hover{
  transform:translateY(-3px);
  border-color:rgba(184,132,58,.32);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 22px 48px -28px rgba(44,33,24,.45), 0 6px 18px -10px rgba(184,132,58,.18);
}
.diet:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.model:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}

/* ---- Image hover refinement (slow ken-burns) ---- */
.split-img img,
.news-img img,
.community-feature__img img{
  transition:transform 1.4s var(--ease-out),filter .6s var(--ease-out);
}
.split-img:hover img,
.news:hover .news-img img,
.community-feature__img:hover img{
  transform:scale(1.04);
  filter:brightness(1.02) saturate(1.05);
}

/* =============================================================
   v5 · MARQUEE (infinite, hover-pause, edge-fade)
============================================================= */
.marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.marquee-track{
  display:flex;gap:clamp(36px,5vw,64px);
  animation:marqueeRoll var(--marquee-dur,38s) linear infinite;
  width:max-content;align-items:center;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
@keyframes marqueeRoll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* providers as marquee */
.providers .marquee{padding:6px 0}
.providers .marquee-item{
  transition:opacity .35s,transform .35s var(--ease-out),border-color .35s,color .35s;
}
.providers .marquee-item:hover{transform:translateY(-3px)}

/* Elegant typography pill — replaces fake-text SVGs.
   Same shape for every partner: italic display name + thin rule + small uppercase sub.
   Reads as a unified, intentional set rather than a logo zoo. */
.provider-pill{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:14px 28px;min-width:170px;
  border:1px solid rgba(44,33,24,.14);
  background:rgba(255,253,248,.5);
  text-decoration:none;
  transition:border-color .35s,background .35s,transform .35s var(--ease-out);
}
.provider-pill:hover{
  border-color:var(--teal);
  background:rgba(255,253,248,1);
}
.provider-pill__name{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:1.45rem;line-height:1;color:var(--charcoal);
  letter-spacing:.005em;
}
.provider-pill__name--sans{
  font-family:var(--sans);font-style:normal;font-weight:600;
  font-size:1.05rem;letter-spacing:.18em;
}
.provider-pill__rule{
  display:block;width:34px;height:1px;background:rgba(44,33,24,.25);
}
.provider-pill__sub{
  font-family:var(--sans);font-size:.62rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--charcoal-70);
}
@media(max-width:640px){
  .provider-pill{min-width:140px;padding:12px 20px}
  .provider-pill__name{font-size:1.2rem}
  .provider-pill__name--sans{font-size:.9rem}
  .provider-pill__sub{font-size:.58rem;letter-spacing:.22em}
}

/* food strip marquee */
.food-strip{padding:clamp(48px,6vw,80px) 0;background:var(--ivory-deep);border-top:var(--hairline);border-bottom:var(--hairline)}
.food-strip-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding:0 var(--gutter);max-width:var(--max);margin:0 auto clamp(20px,3vw,32px);
}
.food-strip-head h2{margin:0;font-size:clamp(1.6rem,2.6vw,2.4rem);font-style:italic;line-height:1.05}
.food-strip-head h2 em{font-style:normal;color:var(--teal)}
.food-strip-head p{max-width:38ch;color:var(--charcoal-70);margin:0}
.food-strip .marquee{--marquee-dur:55s}
.food-strip-card{
  flex:0 0 auto;
  width:clamp(220px,26vw,320px);
  aspect-ratio:4/5;
  position:relative;overflow:hidden;
  background:var(--blush);
  box-shadow:var(--shadow-soft);
}
.food-strip-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease-out),filter .5s;
}
.food-strip-card:hover img{transform:scale(1.06);filter:brightness(.78)}
.food-strip-card .meta{
  position:absolute;left:14px;right:14px;bottom:14px;
  color:var(--ivory);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;
}
.food-strip-card:hover .meta{opacity:1;transform:translateY(0)}
.food-strip-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(44,33,24,0.65) 100%);
  opacity:0;transition:opacity .35s;pointer-events:none;
}
.food-strip-card:hover::after{opacity:1}

/* =============================================================
   v5 · TODAY'S PLATE — featured rotating meal
============================================================= */
.plate{padding:clamp(60px,7vw,100px) 0;background:var(--ivory);border-top:var(--hairline);position:relative;overflow:hidden}
.plate::before{
  content:"";position:absolute;
  width:520px;height:520px;border-radius:50%;
  right:-180px;top:-160px;
  background:radial-gradient(circle at center,rgba(43,140,140,0.10),transparent 70%);
  pointer-events:none;
}
.plate-inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,80px);
  align-items:center;position:relative;
}
.plate-stage{position:relative;aspect-ratio:4/5;background:var(--blush);overflow:hidden;box-shadow:var(--shadow-deep)}
.plate-stage .plate-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity .9s var(--ease-out),transform 1.6s var(--ease-out);
}
.plate-stage .plate-img.is-active{opacity:1;transform:scale(1)}
.plate-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(44,33,24,0.45) 100%);
}
.plate-badge{
  position:absolute;left:18px;top:18px;
  padding:8px 14px;
  background:rgba(249,245,239,0.92);backdrop-filter:blur(6px);
  color:var(--charcoal);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  z-index:2;
}
.plate-badge i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal);margin-right:8px;vertical-align:middle;animation:platePulse 2s var(--ease-out) infinite}
@keyframes platePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}

.plate-copy h2{font-size:clamp(2rem,3.4vw,3rem);font-style:italic;line-height:1.05;margin:.6rem 0 1rem}
.plate-copy h2 em{font-style:normal;color:var(--teal)}
.plate-copy .lead{color:var(--charcoal-70);font-size:1.05rem;margin-bottom:1.4rem}
.plate-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.6rem}
.plate-thumbs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:1.8rem;
}
.plate-thumb{
  position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer;
  background:var(--blush);
  outline:1px solid transparent;outline-offset:0;
  transition:outline-color .25s,transform .35s var(--ease-out);
}
.plate-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out),filter .35s;filter:grayscale(.4) brightness(.78)}
.plate-thumb:hover img{transform:scale(1.06);filter:none}
.plate-thumb.is-active{outline:2px solid var(--teal);outline-offset:3px}
.plate-thumb.is-active img{filter:none}
.plate-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(44,33,24,0.4));opacity:0;transition:opacity .3s}
.plate-thumb:hover::after,.plate-thumb.is-active::after{opacity:1}
.plate-thumb-label{
  position:absolute;left:6px;right:6px;bottom:6px;
  font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory);
  z-index:1;line-height:1.1;
}

@media(max-width:880px){
  .plate-inner{grid-template-columns:1fr;gap:32px}
  .plate-stage{aspect-ratio:5/4}
  .plate-thumbs{grid-template-columns:repeat(4,1fr);gap:8px}
  .plate-thumb-label{font-size:.5rem;letter-spacing:.14em}
}

/* =============================================================
   Generic image slideshow — fades between sibling <img> elements
   Activated by adding [data-slideshow] + .img-slideshow on a container
============================================================= */
.img-slideshow{position:relative;overflow:hidden}
.img-slideshow > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s var(--ease-out);
}
.img-slideshow > img.is-active{opacity:1}
/* When applied to .split-img, give the container a sensible aspect
   ratio so the absolutely-positioned children have height to fill. */
.split-img.img-slideshow{aspect-ratio:5/6;height:auto}
@media(max-width:880px){
  .split-img.img-slideshow{aspect-ratio:4/3}
}

/* =============================================================
   v5 · STORY PIN — sticky scroll editorial reinforcement
   (additive class — wraps existing process section if used)
============================================================= */
.story-pin{position:relative}
.story-pin .story-pin-inner{position:sticky;top:96px}

/* =============================================================
   v5 · HERO DECOR — soft floating ornaments
============================================================= */
.hero-decor{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.hero-decor span{
  position:absolute;display:block;
  width:6px;height:6px;border-radius:50%;
  background:rgba(249,245,239,0.55);
  filter:blur(.3px);
  animation:heroFloat 14s var(--ease-out) infinite;
}
.hero-decor span:nth-child(1){left:8%;top:30%;animation-delay:.2s;background:rgba(43,140,140,.5);width:9px;height:9px}
.hero-decor span:nth-child(2){left:20%;top:74%;animation-delay:1.2s;width:4px;height:4px}
.hero-decor span:nth-child(3){left:55%;top:22%;animation-delay:.6s;background:rgba(184,132,58,.55);width:7px;height:7px}
.hero-decor span:nth-child(4){left:78%;top:62%;animation-delay:2.2s;width:5px;height:5px}
.hero-decor span:nth-child(5){left:88%;top:30%;animation-delay:1.8s;background:rgba(196,180,154,.6);width:6px;height:6px}
.hero-decor span:nth-child(6){left:38%;top:55%;animation-delay:3s;width:3px;height:3px}
@keyframes heroFloat{
  0%,100%{transform:translateY(0) translateX(0);opacity:.55}
  50%{transform:translateY(-22px) translateX(8px);opacity:1}
}

/* (Hero overlay is defined once at the top of the hero block — see ~line 481 for the
   layered scrim system that handles desktop + mobile readability.) */

/* Hero CTA anchor pulse for primary */
.hero-ctas .btn-primary{position:relative}
.hero-ctas .btn-primary::after{
  content:"";position:absolute;inset:-3px;
  border:1px solid rgba(43,140,140,.55);
  opacity:0;animation:ctaRing 2.6s var(--ease-out) infinite;animation-delay:1.6s;
  pointer-events:none;
}
@keyframes ctaRing{
  0%{opacity:.7;transform:scale(1)}
  100%{opacity:0;transform:scale(1.08)}
}

/* =============================================================
   v5 · SECTION DIVIDERS / EYEBROW POLISH
============================================================= */
.eyebrow.glow::before{box-shadow:0 0 12px var(--teal-bright)}

/* =============================================================
   v5 · STATS — ambient glow under each value
============================================================= */
.stat{position:relative}
.stat::after{
  content:"";position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  width:60%;height:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent);
  opacity:0;transition:opacity .8s var(--ease-out);
}
.stat.in::after, .stat .stat-num + .stat-label{opacity:1}
.stat:hover::after{opacity:.6}

/* =============================================================
   v5 · NAV — refined glass when scrolled
============================================================= */
/* When scrolled, deepen the same branded gradients (don't replace them with flat color). */
.nav.is-scrolled{
  background:
    linear-gradient(90deg, rgba(43,140,140,.06), transparent 35%, transparent 65%, rgba(184,132,58,.07)),
    rgba(249,245,239,0.86);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(44,33,24,0.08), 0 18px 40px -28px rgba(44,33,24,0.25);
}
.nav.dark-mode.is-scrolled{
  background:
    linear-gradient(180deg, rgba(184,132,58,.20) 0%, rgba(184,132,58,0) 3px),
    linear-gradient(90deg, rgba(43,140,140,.20) 0%, rgba(43,140,140,.04) 35%, rgba(184,132,58,.04) 65%, rgba(184,132,58,.18) 100%),
    linear-gradient(180deg, rgba(28,22,18,.86), rgba(24,18,14,.82));
  border-bottom:1px solid rgba(184,132,58,.24);
  box-shadow:
    0 1px 0 rgba(249,245,239,.07) inset,
    0 18px 40px -22px rgba(0,0,0,.55);
}

/* =============================================================
   v5 · CTA-BLOCK — luxury accents
============================================================= */
.cta-block{position:relative;overflow:hidden}
.cta-block::after{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--teal-bright),transparent);
}

/* =============================================================
   v5 · REDUCED MOTION GUARD
============================================================= */
@media (prefers-reduced-motion: reduce){
  .marquee-track,
  .hero-decor span,
  .hero-ctas .btn-primary::after,
  .plate-badge i,
  .plate-stage .plate-img{
    animation:none !important;
    transition:none !important;
  }
  .scroll-progress{display:none}

  /* Intro curtain: kill all motion. The curtain still appears as a static
     splash but auto-dismisses quickly via the JS reduced-motion path so
     users aren't trapped behind it. */
  .intro,
  .intro-bg-band,
  .intro-bg-band--top,
  .intro-bg-band--bottom,
  .intro-mark-stage::before,
  .intro-mark-stage::after,
  .intro-mark-img,
  .intro-wordmark-img,
  .intro-tag{
    animation:none !important;
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}


/* ====================================================================
   MAGICAL BADGE ENTRANCE — plays once on every page load
   Stamp-rotate the KEYS badge + double gold halo bloom + wordmark
   slide-up + ambient breathe. Honors prefers-reduced-motion.
   ==================================================================== */
@keyframes brandBadgeStampIn{
  0%   { opacity:0; transform: scale(.32) rotate(-220deg); filter: blur(6px) }
  55%  { opacity:1; transform: scale(1.12) rotate(12deg);  filter: blur(0)  }
  78%  {            transform: scale(.94) rotate(-5deg)                       }
  100% { opacity:1; transform: scale(1)   rotate(0);        filter: blur(0)  }
}
@keyframes brandHaloBloomA{
  0%   { opacity:0;   transform: translate(-50%,-50%) scale(.28) }
  18%  { opacity:.65;                                            }
  100% { opacity:0;   transform: translate(-50%,-50%) scale(3.1) }
}
@keyframes brandHaloBloomB{
  0%   { opacity:0;   transform: translate(-50%,-50%) scale(.32) }
  20%  { opacity:.42;                                            }
  100% { opacity:0;   transform: translate(-50%,-50%) scale(2.2) }
}
/* Handwriting wipe — clip-path reveals the wordmark left-to-right like a brush stroke */
@keyframes brandWordmarkWipe{
  0%   { opacity:0; clip-path: inset(0 100% -10% 0); transform: translateX(-6px) scale(.97) }
  18%  { opacity:1 }
  100% { opacity:1; clip-path: inset(0 0     -10% 0); transform: translateX(0)   scale(1)   }
}
@keyframes navBadgeBreatheRich{
  0%,100% { filter: drop-shadow(0 0 0 rgba(201,160,74,0))    }
  50%     { filter: drop-shadow(0 0 10px rgba(201,160,74,.4)) }
}

.nav-brand{ position:relative; isolation:isolate }

/* Twin gold halos — sequential bloom for richer feel */
.nav-brand::before,
.nav-brand::after{
  content:"";
  position:absolute;
  top:50%;
  left:27px;                /* half of default 54px badge */
  width:88px; height:88px;
  border-radius:50%;
  background: radial-gradient(circle,
    rgba(201,160,74,.55) 0%,
    rgba(201,160,74,.18) 45%,
    rgba(201,160,74,0)   72%);
  pointer-events:none;
  transform: translate(-50%,-50%) scale(.3);
  opacity:0;
  z-index:0;
}
.nav-brand::before{ animation: brandHaloBloomA 1.5s cubic-bezier(.16,.84,.3,1) .12s both }
.nav-brand::after { animation: brandHaloBloomB 1.7s cubic-bezier(.16,.84,.3,1) .35s both }

/* Badge: stamp in, then settle into ambient gold breathe */
.brand-img--nav{
  position:relative; z-index:1;
  transform-origin:50% 50%;
  animation: brandBadgeStampIn 1.15s cubic-bezier(.22,.85,.28,1.05) both,
             navBadgeBreatheRich 6s ease-in-out 1.5s infinite;
  will-change: transform, filter, opacity;
}

/* Official wordmark image: handwriting wipe reveals it left-to-right after the badge stamps in.
   Scoped to the on-dark variant so the on-light variant (which swaps in only after the user
   scrolls past the dark hero) is always pre-revealed — no race against the reveal animation
   when its sibling becomes visible. */
.brand-wordmark-img--nav.brand-wordmark-img--on-dark{
  animation: brandWordmarkWipe 1.2s cubic-bezier(.55,.08,.32,1) .5s both;
  will-change: clip-path, transform, opacity;
}

/* Halo position scales with badge size at narrower viewports
   Badge sizes: 54px default → 48px ≤980px → 42px ≤520px (matches existing breakpoints) */
@media (max-width: 980px){
  .nav-brand::before,
  .nav-brand::after{ left:24px; width:78px; height:78px }
}
@media (max-width: 520px){
  .nav-brand::before,
  .nav-brand::after{ left:21px; width:70px; height:70px }
}

/* Hover: a quick wink — replays whenever user re-enters */
.nav-brand:hover .brand-img--nav{
  animation: brandBadgeWink .55s ease both,
             navBadgeBreatheRich 6s ease-in-out 1.5s infinite;
}
@keyframes brandBadgeWink{
  0%   { transform: scale(1)    rotate(0)    }
  45%  { transform: scale(1.1)  rotate(-12deg) }
  100% { transform: scale(1)    rotate(0)    }
}

/* Accessibility — kill all motion if requested */
@media (prefers-reduced-motion: reduce){
  .brand-img--nav,
  .brand-wordmark-img,
  .nav-brand::before,
  .nav-brand::after{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* ====================================================================
   MOBILE POLISH — 375px / 768px refinements
   ==================================================================== */
/* Marquee performance — GPU-promote transforms to kill scroll jank on mobile */
.marquee-track,
.ticker-track{
  will-change: transform;
  backface-visibility: hidden;
}
/* Respect reduced motion for the infinite marquees */
@media (prefers-reduced-motion: reduce){
  .marquee-track,
  .ticker-track{ animation: none !important }
}
/* Stack hero CTAs earlier (768px) so the buttons get full tap-target width on tablets too */
@media (max-width: 768px){
  .hero-ctas{ flex-direction:column; align-items:stretch; gap:10px }
  .hero-ctas .btn{ width:100%; min-height:48px; padding:14px 22px; justify-content:center }
}
/* Short-screen hero (landscape phones, small laptops) — prevent content getting clipped at fold */
@media (max-height: 720px) and (max-width: 980px){
  .hero{ min-height:auto }
  .hero-content{ padding-top:72px; padding-bottom:48px }
}

/* ====================================================================
   NEWS — clickable cards, filter buttons, deep-link offsets
   ==================================================================== */
/* Anchor wrapper around news cards (homepage) — full card is clickable */
.news-link{
  display:block;
  color:inherit;
  text-decoration:none;
  border-radius:0;
  outline-offset:4px;
}
.news-link:focus-visible{ outline:2px solid var(--gold); outline-offset:4px }
/* Hover lift now triggers from the anchor wrapper */
.news-link:hover .news{ transform:translateY(-4px); box-shadow:var(--shadow-lift) }
.news-link:hover .news-img img{ transform:scale(1.06) }
/* Subtle gold sweep on the headline when card is hovered */
.news-link:hover .news h3{ color:var(--charcoal) }

/* news.html filter row */
.news-filter{ display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:3rem }
.btn-outline.is-active{
  background:var(--charcoal);
  color:var(--ivory);
  border-color:var(--charcoal);
}
.btn-outline.is-active:hover{ background:var(--charcoal); color:var(--ivory) }

/* news.html article footer (read-more link inside each card) */
.news-foot{ margin-top:1rem; padding-top:1rem; border-top:1px dashed rgba(44,33,24,.15) }
.news-readmore{
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--teal); font-weight:500; text-decoration:none;
  display:inline-flex; align-items:center; gap:.6rem;
  transition:color .25s ease, gap .25s ease;
}
.news-readmore:hover{ color:var(--charcoal); gap:.9rem }
.news-readmore .arr{
  display:inline-block; width:18px; height:1px; background:currentColor; position:relative;
}
.news-readmore .arr::after{
  content:""; position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg);
}

/* Deep-link scroll offset so anchored article isn't hidden under sticky nav */
.news[id]{ scroll-margin-top:120px }

/* Archive note styling (replaced internal Dylan note) */
.news-archive-note{ margin-top:2.4rem; font-size:.86rem; text-align:center }
.news-archive-note a{ color:var(--teal); border-bottom:1px solid var(--teal); transition:color .25s }
.news-archive-note a:hover{ color:var(--charcoal); border-bottom-color:var(--charcoal) }

/* ============================================================
   PARTNER SCHOOLS — SVG cluster + section grid + filters
   ============================================================ */

/* --- SVG: tiny gold dots scattered around the Detroit hub
       representing the 19 Detroit-area partner schools. Pulse softly. --- */
.michigan-svg .school-cluster .school-dot{
  fill:rgba(232,190,110,.85);
  filter:drop-shadow(0 0 3px rgba(232,190,110,.85));
  animation:schoolDotTwinkle 3.4s ease-in-out infinite;
}
.michigan-svg .school-cluster .school-dot:nth-child(2n){ animation-delay:.6s }
.michigan-svg .school-cluster .school-dot:nth-child(3n){ animation-delay:1.1s }
.michigan-svg .school-cluster .school-dot:nth-child(5n){ animation-delay:1.7s }
@keyframes schoolDotTwinkle{
  0%, 100% { opacity:.55; transform:scale(1) }
  50%      { opacity:1;   transform:scale(1.25) }
}
@media (prefers-reduced-motion: reduce){
  .michigan-svg .school-cluster .school-dot{ animation:none; opacity:.85 }
}

/* --- Schools section: light ivory, branded card grid --- */
.schools-section{ background:var(--ivory) }
.schools-section .section-head{ margin-bottom:2.4rem }

/* Region filter chip row */
.schools-filters{
  display:flex; flex-wrap:wrap; gap:.6rem;
  justify-content:center; margin:0 0 2rem;
}
.schools-chip{
  font-family:var(--sans); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.7rem 1.2rem; border-radius:999px;
  background:transparent; color:var(--charcoal);
  border:1px solid rgba(44,33,24,.18);
  display:inline-flex; align-items:center; gap:.6rem;
  cursor:pointer; transition:all .25s var(--ease-out);
}
.schools-chip:hover{ border-color:var(--teal); color:var(--teal) }
.schools-chip.is-active{
  background:var(--charcoal); color:var(--ivory); border-color:var(--charcoal);
  box-shadow:0 6px 18px rgba(44,33,24,.18);
}
.schools-chip__count{
  font-family:var(--serif); font-style:italic; letter-spacing:0;
  text-transform:none; font-size:.95rem; opacity:.75;
}
.schools-chip.is-active .schools-chip__count{ color:var(--gold); opacity:1 }

/* Card grid */
.schools-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:1rem;
}
.school-card{
  display:flex; align-items:center; gap:1rem;
  padding:1.1rem 1.2rem; background:#fff;
  border:1px solid rgba(44,33,24,.08);
  border-left:3px solid var(--gold);
  border-radius:6px;
  text-decoration:none; color:inherit;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s;
  position:relative; overflow:hidden;
}
.school-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, transparent 60%, rgba(232,190,110,.12));
  opacity:0; transition:opacity .35s;
  pointer-events:none;
}
.school-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(44,33,24,.12);
  border-left-color:var(--teal);
}
.school-card:hover::after{ opacity:1 }
.school-card[data-region="metro"]{ border-left-color:var(--orange) }
.school-card[data-region="west"]{ border-left-color:var(--teal) }
.school-card[hidden]{ display:none }

.school-card__mark{
  flex-shrink:0; width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg, var(--charcoal) 0%, #3d2f23 100%);
  color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:.78rem;
  letter-spacing:.05em;
  box-shadow:inset 0 0 0 1px rgba(232,190,110,.35), 0 4px 10px rgba(44,33,24,.18);
}
.school-card[data-region="metro"] .school-card__mark{ background:linear-gradient(135deg, #2C2118 0%, #4a2f15 100%) }
.school-card[data-region="west"]  .school-card__mark{ background:linear-gradient(135deg, #2C2118 0%, #1f4444 100%) }

.school-card__body{ display:flex; flex-direction:column; min-width:0 }
.school-card__body strong{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.08rem; line-height:1.2; color:var(--charcoal);
}
.school-card__body em{
  font-style:normal; font-family:var(--sans); font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--charcoal-70); margin-top:.35rem;
}

/* Bottom CTA row */
.schools-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1.2rem; margin-top:2.6rem; padding-top:2rem;
  border-top:1px solid rgba(44,33,24,.08);
}
.schools-cta p{
  font-family:var(--serif); font-style:italic; font-size:1.15rem;
  color:var(--charcoal-70); margin:0;
}

@media (max-width:640px){
  .schools-grid{ grid-template-columns:1fr }
  .schools-chip{ font-size:.66rem; padding:.6rem 1rem }
  .schools-cta{ flex-direction:column; text-align:center }
  .schools-cta p{ font-size:1rem }
}