/* ============================================================
   STAFFY — FLAME HERO (scoped, town/service pages)
   Brings the homepage's signature pilot-light + ember band to the
   local landing pages, WITHOUT the full-screen night takeover or
   the homepage's scroll-narrative JS. Every rule is namespaced under
   `.hero.flame` so it can only affect a hero that opts in with that
   class; its tokens live on the wrapper so nothing leaks to :root.
   Load AFTER local.css. Reduced-motion safe.
   ============================================================ */
.hero.flame{
  --fl-ink:#161009; --fl-paper:#f9f2e3; --fl-flame:#f6a33c;
  --fl-gold:#f2c368; --fl-steel:#a3968a; --fl-copper:#b96a35;
  position:relative; z-index:2; overflow:hidden;
  background:var(--fl-ink); color:var(--fl-paper);
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:auto;
  padding:calc(96px + env(safe-area-inset-top)) 0 clamp(44px,7vw,72px);
  text-align:center;
}
.hero.flame .hero-media{display:none} /* flame band replaces the photo hero */
.hero.flame .hero-night{position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(140% 54% at 50% -8%,rgba(246,163,60,.34),rgba(227,93,37,.14) 44%,transparent 66%),
  radial-gradient(90% 46% at 12% 112%,rgba(72,101,122,.26),transparent 60%),
  linear-gradient(180deg,#1b1209 0%,var(--fl-ink) 56%,#120c06 100%)}
.hero.flame .hero-bloom{position:absolute; top:-10%; left:50%; transform:translateX(-50%);
  width:130vw; height:130vw; max-width:720px; max-height:720px; border-radius:50%;
  pointer-events:none; mix-blend-mode:screen; filter:blur(20px);
  background:radial-gradient(circle at 50% 42%,rgba(246,163,60,.4),rgba(227,93,37,.18) 44%,rgba(227,93,37,.05) 62%,transparent 72%);
  animation:fl-bloom 8.5s ease-in-out infinite}
@keyframes fl-bloom{0%,100%{opacity:.7}50%{opacity:1}}
.hero.flame .spark{position:absolute; bottom:34%; width:3px; height:3px; border-radius:50%;
  background:var(--fl-flame); opacity:0; pointer-events:none; animation:fl-sparkup 7s linear infinite}
.hero.flame .spark.s1{left:50%}
.hero.flame .spark.s2{left:57%; animation-delay:2.3s; animation-duration:8.5s}
.hero.flame .spark.s3{left:44%; animation-delay:4.6s; animation-duration:6.2s}
.hero.flame .spark.s4{left:53%; animation-delay:1.2s; animation-duration:9.4s; width:2px; height:2px}
.hero.flame .spark.s5{left:47%; animation-delay:5.8s; animation-duration:7.6s; width:2px; height:2px}
@keyframes fl-sparkup{0%{transform:translateY(0);opacity:0}12%{opacity:.7}60%{opacity:.25}100%{transform:translateY(-30vh) translateX(9px);opacity:0}}
.hero.flame .wrap{position:relative; z-index:2}

/* breadcrumb on the dark band */
.hero.flame .crumbs{justify-content:center; color:var(--fl-steel); margin-bottom:6px}
.hero.flame .crumbs a{color:var(--fl-steel)}
.hero.flame .crumbs a:hover{color:var(--fl-paper)}
.hero.flame .crumbs .sep{color:rgba(163,150,138,.5)}
.hero.flame .crumbs [aria-current]{color:var(--fl-gold)}

/* THE PILOT LIGHT — the brand's beating heart (five flicker layers on a sway) */
.hero.flame .pilot{display:flex; justify-content:center; align-items:flex-end;
  margin:0 auto clamp(6px,1.4vh,12px); position:relative; width:72px; min-height:50px;
  padding:2px 0; background:none; border:0}
.hero.flame .pilot-glow{position:absolute; left:50%; top:54%; width:130px; height:130px;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; mix-blend-mode:screen; filter:blur(10px);
  background:radial-gradient(circle at 50% 46%,rgba(246,163,60,.42),rgba(227,93,37,.16) 45%,transparent 70%);
  animation:fl-bloom 4.6s ease-in-out infinite}
.hero.flame .pilot .haze{position:absolute; left:50%; top:-24px; width:32px; height:38px; margin-left:-16px;
  pointer-events:none; mix-blend-mode:screen; filter:blur(7px);
  background:radial-gradient(50% 62% at 50% 82%,rgba(255,214,150,.17),transparent 75%);
  animation:fl-haze 3.2s ease-in-out infinite}
@keyframes fl-haze{0%,100%{transform:translateY(0) scaleX(1);opacity:.45}35%{transform:translateY(-6px) scaleX(1.22) skewX(4deg);opacity:.8}70%{transform:translateY(-11px) scaleX(.84) skewX(-5deg);opacity:.25}}
.hero.flame .pilot .emb{position:absolute; left:50%; top:30%; width:2.5px; height:2.5px; border-radius:50%;
  background:var(--fl-gold); opacity:0; pointer-events:none; animation:fl-emb 4s ease-in infinite; --ex:0}
.hero.flame .pilot .e2{left:44%; width:2px; height:2px; animation-delay:1.9s; animation-duration:4.2s; --ex:-9}
.hero.flame .pilot .e3{left:56%; width:2px; height:2px; animation-delay:3s; animation-duration:3.8s; --ex:5}
@keyframes fl-emb{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}100%{transform:translate(calc(var(--ex)*1px),-40px);opacity:0}}
.hero.flame .pilot svg{width:44px; height:56px; overflow:visible}
.hero.flame .pilot .f-sway{transform-box:fill-box; transform-origin:50% 96%; animation:fl-sway 5.6s ease-in-out 1.1s infinite}
@keyframes fl-sway{0%,100%{transform:rotate(0)}30%{transform:rotate(2.2deg)}62%{transform:rotate(-1.8deg)}}
.hero.flame .pilot .f-out,.hero.flame .pilot .f-mid,.hero.flame .pilot .f-in,.hero.flame .pilot .f-core,.hero.flame .pilot .f-blue{transform-box:fill-box; transform-origin:50% 100%}
.hero.flame .pilot .f-out{animation:fl-flickA 2.8s ease-in-out infinite}
.hero.flame .pilot .f-mid{animation:fl-flickB 2.05s ease-in-out infinite}
.hero.flame .pilot .f-in{animation:fl-flickC 1.35s ease-in-out infinite}
.hero.flame .pilot .f-core{animation:fl-core .9s ease-in-out infinite}
.hero.flame .pilot .f-blue{mix-blend-mode:screen; animation:fl-blue 1.7s ease-in-out infinite}
@keyframes fl-flickA{0%,100%{transform:scale(1) rotate(0)}45%{transform:scale(1.06,.94) rotate(-1.8deg)}70%{transform:scale(.96,1.06) rotate(1.4deg)}}
@keyframes fl-flickB{0%,100%{transform:scale(1)}38%{transform:scale(.92,1.1) rotate(1.6deg)}72%{transform:scale(1.08,.92) rotate(-1.2deg)}}
@keyframes fl-flickC{0%,100%{transform:scaleY(1);opacity:.98}50%{transform:scaleY(1.16) scaleX(.94);opacity:.8}}
@keyframes fl-core{0%,100%{transform:scaleY(1);opacity:1}45%{transform:scale(.88,1.22);opacity:.85}70%{transform:scale(1.06,.9);opacity:1}}
@keyframes fl-blue{0%,100%{transform:scaleX(1);opacity:.75}40%{transform:scaleX(1.14);opacity:.95}65%{transform:scaleX(.88);opacity:.55}}

/* entrance — MUST end at opacity:1 and HOLD (fill `both`): local.css sets these
   hero elements to opacity:0 as their base and relies on a forwards-filling
   animation to reveal them; a non-holding fill would revert them to invisible. */
.hero.flame .rise{animation:fl-rise .7s cubic-bezier(.2,.7,.25,1) both}
.hero.flame .rise.r1{animation-delay:.30s}.hero.flame .rise.r2{animation-delay:.42s}
.hero.flame .rise.r3{animation-delay:.54s}.hero.flame .rise.r4{animation-delay:.66s}
.hero.flame .rise.r5{animation-delay:.78s}
@keyframes fl-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* type — masthead weight, town H1 stays the ranking string */
.hero.flame .kicker{font-family:var(--mono,'IBM Plex Mono',monospace); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fl-gold); font-weight:500; margin-bottom:2px}
.hero.flame h1{font-family:var(--disp,'Fraunces',Georgia,serif); font-weight:560;
  font-size:clamp(2.1rem,8.5vw,3.6rem); line-height:.98; letter-spacing:-.03em;
  color:var(--fl-paper); margin:6px auto 0; max-width:16ch; text-wrap:balance}
.hero.flame h1 em{font-style:italic; font-weight:480; color:var(--fl-flame);
  font-variation-settings:'SOFT' 100,'WONK' 1}
.hero.flame .lede,.hero.flame .hero-sub{font-size:15.5px; color:var(--fl-steel);
  margin:12px auto 0; max-width:34ch; line-height:1.5; text-wrap:balance}
.hero.flame .lede b,.hero.flame .hero-sub b{color:var(--fl-paper); font-weight:600}

/* actions on the dark band */
.hero.flame .herocta{margin:18px auto 0; display:flex; flex-direction:column; gap:10px;
  width:min(360px,100%); align-items:stretch}
.hero.flame .herocta .btn{width:100%; justify-content:center}
.hero.flame .btn-ghost{background:rgba(249,242,227,.06); color:var(--fl-paper);
  border:1.5px solid rgba(242,195,104,.5)}
.hero.flame .btn-ghost:active{transform:scale(.98)}

/* trust chips on dark */
.hero.flame .truststrip{margin:18px auto 0; justify-content:center}
.hero.flame .truststrip .chip{color:var(--fl-steel); border-color:rgba(242,195,104,.22)}
.hero.flame .truststrip .chip .d{background:var(--fl-flame)}

@media (prefers-reduced-motion:reduce){
  .hero.flame *,.hero.flame *::before,.hero.flame *::after{animation:none !important}
  .hero.flame .rise{opacity:1 !important; transform:none !important}
}