/* ═══════ Churchill FNC — hero slideshow ═══════
   Full-height stage under the nav; assets/hero.js cross-dissolves the stills and their
   captions. Brand: navy #0a2560/#123a8f, gold #ffc21a. Anton display / Oswald labels / Inter body. */

/* the announce bar and nav sit above the stage, so a flat 100svh pushed the CTA row
   and the dots below the fold — the stage takes the space that is actually left */
.hero-stage{
  position:relative;height:calc(100svh - var(--chrome-h,118px));min-height:min(560px,86svh);
  color:#fff;background:var(--navy,#0a2560);overflow:hidden;
}
.hero-stage .hs-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero-stage .hs-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.5s cubic-bezier(.4,0,.4,1);will-change:opacity,transform,clip-path;
  backface-visibility:hidden}
.hero-stage .hs-slide.hs-on{opacity:1}
/* the incoming frame sweeps open behind the fade — a move, not a blink */
.hero-stage .hs-slide.hs-wipe-a{animation:hsWipeA 1.5s cubic-bezier(.32,.9,.28,1) both}
.hero-stage .hs-slide.hs-wipe-b{animation:hsWipeB 1.5s cubic-bezier(.32,.9,.28,1) both}
@keyframes hsWipeA{from{clip-path:inset(0 0 0 22%)}to{clip-path:inset(0 0 0 0)}}
@keyframes hsWipeB{from{clip-path:inset(0 22% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){
  .hero-stage .hs-slide{transform:none!important;transition:none;animation:none!important;clip-path:none!important}
  .hero-stage .hs-slide:not(.hs-on){display:none}}
/* legibility: bottom-left gradient + faint top scrim under the nav — never a flat box */
.hero-stage .hs-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,12,40,.55) 0%,transparent 18%),
    linear-gradient(210deg,transparent 46%,rgba(4,12,40,.38) 74%,rgba(4,12,40,.72) 100%);
}

/* ---------- captions ---------- */
.hs-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:0 clamp(20px,5vw,72px) clamp(64px,9vh,104px);
  max-width:1180px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease,visibility .45s;
}
.hs-caption.hs-on{opacity:1;visibility:visible;pointer-events:auto}

/* slideshow dots */
.hs-dots{position:absolute;right:clamp(20px,5vw,72px);bottom:clamp(26px,4vh,44px);z-index:4;
  display:flex;gap:10px;align-items:center}
.hs-dot{width:42px;height:22px;border:0;padding:9px 0;cursor:pointer;background:none;
  display:block;line-height:0}
.hs-dot i{display:block;height:3px;border-radius:999px;background:rgba(255,255,255,.34);
  position:relative;overflow:hidden;transition:background .4s ease}
.hs-dot i::after{content:"";position:absolute;inset:0;border-radius:999px;
  background:var(--gold,#ffc21a);transform:scaleX(0);transform-origin:left center;
  transition:transform .25s linear}
.hs-dot.hs-on i::after{transform:scaleX(var(--fill,0))}
.hs-dot:hover i{background:rgba(255,255,255,.55)}
.hs-dot:focus-visible{outline:2px solid var(--gold,#ffc21a);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){.hs-dot.hs-on i{background:var(--gold,#ffc21a)}}
/* pause / play, at the end of the dots; 24px square so it stays an easy tap on a phone */
.hs-pause{width:24px;height:24px;border:0;padding:0;margin-left:2px;cursor:pointer;background:none;
  display:grid;place-items:center;color:rgba(255,255,255,.72);transition:color .25s ease;
  filter:drop-shadow(0 1px 2px rgba(4,12,40,.8))}
.hs-pause svg{fill:currentColor;display:block}
.hs-pause:hover,.hs-pause[aria-pressed="true"]{color:#fff}
.hs-pause:focus-visible{outline:2px solid var(--gold,#ffc21a);outline-offset:3px;border-radius:4px}
.hs-caption .hs-eyebrow{
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.34em;
  font-size:.72rem;color:#dbe4ff;margin-bottom:18px;display:block;
  text-shadow:0 1px 2px rgba(4,12,40,.9),0 2px 14px rgba(4,12,40,.7)}
.hs-caption .hs-eyebrow .amp,.hs-caption .hs-sub .amp{color:var(--gold,#ffc21a)}
.hs-caption h2{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2.6rem,7.5vw,7rem);line-height:.9;letter-spacing:.01em;color:#fff;
  margin:0 0 20px;text-wrap:balance}
.hs-caption h2 .hs-line{display:block}
.hs-caption.hs-mega h2{font-size:clamp(3.4rem,10vw,9rem)}
.hs-caption .hs-outline{color:transparent;-webkit-text-stroke:2px rgba(255,194,26,.85)}
.hs-caption .hs-sub{
  font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(1rem,1.6vw,1.2rem);
  color:#c9d4ee;max-width:34ch;line-height:1.6;margin:0}
.hs-caption .hs-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* nav over the stage: dark glass while the hero is on screen; solid white once it scrolls away */
html.hs-film .nav{background:rgba(7,22,63,.85);box-shadow:none;border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px)}
html.hs-film .nav .nav-links a,html.hs-film .nav .brand,html.hs-film .nav .brand *,
html.hs-film .nav .link-btn,html.hs-film .nav .cart-btn,html.hs-film .nav .hamb{color:#fff}
html.hs-film .nav .cart-btn svg,html.hs-film .nav .hamb svg{stroke:#fff}
html.hs-film .nav .cart-btn,html.hs-film .nav .hamb{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
html.hs-film .nav .nav-links a:hover,html.hs-film .nav .nav-links a:focus-visible{
  background:rgba(255,255,255,.14);color:#fff}

/* the slideshow has no place on paper (member cards, receipts) */
@media print{
  .hero-stage{display:none!important}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- walk-in editorial section ---------- */
#walk-in-story{background:var(--navy,#0a2560);color:#fff;padding:clamp(84px,12vh,150px) 0}
#walk-in-story .wis-eyebrow{font-family:'Oswald',sans-serif;text-transform:uppercase;
  letter-spacing:.34em;font-size:.7rem;color:var(--gold,#ffc21a);display:block;margin-bottom:18px}
#walk-in-story h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,4.6vw,3.6rem);line-height:.95;color:#fff;max-width:18ch;margin:0 0 54px;
  text-wrap:balance}
#walk-in-story .wis-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px)}
#walk-in-story .wis-col h3{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:1rem;color:#fff;margin:0 0 12px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.22)}
#walk-in-story .wis-col p{font-family:'Inter',sans-serif;font-weight:300;font-size:.95rem;
  line-height:1.7;color:#c9d4ee;margin:0}
#walk-in-story .wis-more{display:inline-block;margin-top:46px;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.28em;font-size:.7rem;
  color:#c9d4ee;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px}
#walk-in-story .wis-more:hover,#walk-in-story .wis-more:focus-visible{color:#fff;border-color:var(--gold,#ffc21a)}
@media(max-width:820px){#walk-in-story .wis-cols{grid-template-columns:1fr}}

@media(max-width:768px){
  .hs-caption{padding-bottom:calc(clamp(84px,12vh,128px) + env(safe-area-inset-bottom,0px))}
  .hs-caption h2{font-size:clamp(2rem,10vw,3.6rem)}
  .hs-caption.hs-mega h2{font-size:clamp(2.4rem,11.5vw,4.2rem)}
}