/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --canvas:#0E1A0F;
  --canvas-deep:#0A130B;
  --panel:#16251A;
  --panel-2:#1D3021;
  --accent:#F5B921;
  --accent-hover:#FFD261;
  --accent-muted:rgba(245,185,33,.18);
  --ember:#C4451F;
  --leaf:#7FB13C;
  --leaf-dim:rgba(127,177,60,.32);
  --text-primary:#F7F2E4;
  --text-secondary:#B9C3AC;
  --hair:rgba(183,195,172,.16);

  --display:'Fraunces',Georgia,serif;
  --body:'Karla',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,.02,.18,1);

  --tshadow:0 1px 2px rgba(4,10,5,.95),0 3px 12px rgba(4,10,5,.78),0 10px 44px rgba(4,10,5,.85);
  --gutter:clamp(16px,4vw,64px);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:clamp(16px,1.05vw,18px);line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--display);font-weight:700;line-height:1.04;margin:0;
  font-variation-settings:'SOFT' 100,'WONK' 1;letter-spacing:-.015em;
}
p{margin:0}
/* a figure carries a 40px side margin by default, which sits inside its own
   grid cell and reads as a gap between the pictures */
figure,figcaption{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

.skip{
  position:absolute;left:-9999px;top:12px;z-index:200;background:var(--accent);color:#2A1A06;
  padding:12px 20px;border-radius:10px;font-weight:600;text-decoration:none;
}
.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ============================================================
   ENVIRONMENT: one fixed layer behind everything
   ============================================================ */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 18% 12%,rgba(127,177,60,.11),transparent 62%),
    radial-gradient(ellipse 60% 44% at 84% 78%,rgba(245,185,33,.075),transparent 60%);
  animation:envdrift 92s var(--ease-soft) -24s infinite alternate;
}
@keyframes envdrift{
  from{transform:translate3d(-2.2%,-1.4%,0) scale(1.04)}
  to{transform:translate3d(2.2%,1.6%,0) scale(1.1)}
}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   THE SIGNATURE: the banana leaf rib
   ============================================================ */
.spine{
  position:fixed;left:clamp(18px,3.2vw,52px);top:0;width:120px;height:100vh;z-index:2;
  pointer-events:none;overflow:visible;
}
.spine .mid{stroke:var(--leaf-dim);stroke-width:2;fill:none}
.spine .vein{stroke:var(--leaf-dim);stroke-width:1.1;fill:none;opacity:.7}
@media(max-width:1180px){.spine{display:none}}

.veins{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.veins path{
  stroke:var(--leaf-dim);stroke-width:1.2;fill:none;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 1.9s var(--ease-soft);
}
.in .veins path{stroke-dashoffset:0}
.in .veins path:nth-child(2){transition-delay:.14s}
.in .veins path:nth-child(3){transition-delay:.28s}
.in .veins path:nth-child(4){transition-delay:.42s}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:20px;
  padding:14px var(--gutter);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(10,19,11,.82);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--hair);
}
.nav .brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.nav .brand img{width:clamp(148px,15vw,208px);filter:drop-shadow(0 2px 10px rgba(4,10,5,.6))}
.nav ul{display:flex;gap:clamp(14px,2vw,30px);list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{
  text-decoration:none;color:var(--text-secondary);font-size:.86rem;font-weight:500;
  letter-spacing:.01em;transition:color .3s var(--ease);
}
.nav ul a:hover{color:var(--text-primary)}
.nav .btn{margin-left:clamp(10px,1.6vw,22px)}
@media(max-width:820px){.nav ul{display:none}.nav .btn{margin-left:auto}}
@media(max-width:560px){
  .nav{padding:10px var(--gutter);gap:8px}
  .nav .brand img{width:108px}
  .nav > .btn{padding:11px 14px;font-size:.8rem;white-space:nowrap;gap:6px}
  .nav > .btn svg{width:15px;height:15px}
}

/* ------------------------------------------------------------
   THE PHONE MENU
   The link list above is hidden below 820px, which left a phone
   with no way out of the home page. This button opens a panel
   that slides down from behind the bar with every page on it.
   ------------------------------------------------------------ */
.menu-btn{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;margin-left:8px;padding:0;
  background:rgba(10,19,11,.6);border:1px solid var(--hair);border-radius:12px;
  color:var(--text-primary);cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.menu-btn:hover,.nav.menu-open .menu-btn{border-color:var(--accent);color:var(--accent)}
.menu-btn .bars{display:block;position:relative;width:19px;height:13px}
.menu-btn i{
  position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
  transition:transform .34s var(--ease),opacity .18s var(--ease);
}
.menu-btn i:nth-child(1){top:0}
.menu-btn i:nth-child(2){top:50%;margin-top:-1px}
.menu-btn i:nth-child(3){bottom:0}
.nav.menu-open .menu-btn i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav.menu-open .menu-btn i:nth-child(2){opacity:0}
.nav.menu-open .menu-btn i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.menu-panel{
  display:none;position:fixed;top:0;left:0;right:0;z-index:-1;
  padding:calc(var(--navh,76px) + 12px) var(--gutter) 24px;
  background:#070D08;                     /* solid: the page must not read through it */
  border-bottom:1px solid var(--hair);
  box-shadow:0 26px 70px rgba(4,10,5,.62);
  max-height:100svh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(-101%);visibility:hidden;
  transition:transform .44s var(--ease),visibility 0s .44s;
}
.nav.menu-open .menu-panel{
  transform:none;visibility:visible;
  transition:transform .44s var(--ease),visibility 0s 0s;
}
/* the bar itself must be opaque while the panel is out, or the panel
   shows through it on the way down */
.nav.menu-open{background:#070D08;border-bottom-color:transparent}
/* and the rest of the page goes quiet behind it. Tapping here closes. */
.nav.menu-open::after{
  content:"";position:fixed;inset:0;z-index:-2;background:rgba(4,10,5,.66);
}
.menu-panel ul{display:block;list-style:none;margin:0;padding:0}
.menu-panel li{border-bottom:1px solid var(--hair)}
.menu-panel li:first-child{border-top:1px solid var(--hair)}
.menu-panel a{
  display:block;padding:15px 2px;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:1.08rem;letter-spacing:-.01em;
  color:var(--text-primary);
}
.menu-panel a[aria-current="page"]{color:var(--accent)}
.menu-cta{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.menu-cta .btn{width:100%;margin-left:0}   /* .nav .btn adds a left margin */
@media(max-width:820px){.menu-btn{display:inline-flex}.menu-panel{display:block}}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:999px;border:0;cursor:pointer;
  background:var(--accent);color:#2A1A06;
  font-family:var(--body);font-weight:600;font-size:.93rem;letter-spacing:.005em;
  text-decoration:none;text-shadow:none;
  transition:background .34s var(--ease),transform .34s var(--ease),box-shadow .34s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 1px rgba(245,185,33,.5),0 10px 34px rgba(245,185,33,.34);
  opacity:0;transition:opacity .34s var(--ease);
}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn:hover::after{opacity:1}
.btn.ghost{
  background:transparent;color:var(--text-primary);
  box-shadow:inset 0 0 0 1px var(--leaf);
}
.btn.ghost:hover{background:rgba(127,177,60,.12);color:var(--text-primary)}
.btn.ghost::after{box-shadow:0 0 0 1px var(--leaf),0 10px 30px rgba(127,177,60,.2)}
.btn svg{width:17px;height:17px;flex:0 0 auto}
@media(pointer:coarse){
  .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
}

/* ============================================================
   HERO: pinned scrub stage
   ============================================================ */
.hero{position:relative;height:560vh;z-index:3}
.pin{position:sticky;top:0;height:100vh;overflow:hidden}
.stage{position:absolute;inset:0;background:var(--canvas-deep)}

.poster{
  position:absolute;inset:0;background-size:cover;background-position:50% 50%;
  transform:scale(1.02);
}
#hero{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .85s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.stage.video-ready #hero{opacity:1}
.stage.video-failed #hero{display:none}

.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 92% at 50% 44%,rgba(6,14,8,0) 34%,rgba(6,14,8,.66) 100%);
}
.vig{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(6,14,8,.5) 0%,rgba(6,14,8,0) 22%,rgba(6,14,8,0) 66%,rgba(6,14,8,.58) 100%);
}
/* the bloom guard: the footage passes through a veil of steam near the end and
   goes pale for about half a second, exactly where the settle text arrives.
   This layer deepens across that scroll window only, so contrast holds. */
.bloom{
  position:absolute;inset:0;pointer-events:none;
  background:rgba(5,12,7,.62);opacity:var(--bg,0);
}

/* loading ring */
.ring{
  position:absolute;right:calc(var(--gutter) + 2px);bottom:calc(var(--gutter) + 2px);
  width:44px;height:44px;color:var(--accent);opacity:.9;transform:rotate(-90deg);
  transition:opacity .5s var(--ease);
}
.stage.video-ready .ring{opacity:0}
.chev{
  position:absolute;right:var(--gutter);bottom:var(--gutter);
  width:44px;height:44px;color:var(--accent);opacity:.85;
  animation:bob 2.6s var(--ease-soft) -.6s infinite alternate;
}
@keyframes bob{from{transform:translateY(-4px)}to{transform:translateY(4px)}}

/* caption bands */
.bands{position:absolute;inset:0}
.band{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  display:flex;align-items:center;
  padding:0 var(--gutter);
  text-shadow:var(--tshadow);
}
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
}
/* peak alphas are tuned per band against that band's own worst frame,
   never against its average frame */
.band.left::before{
  background:radial-gradient(ellipse 60% 74% at 27% 50%,
    rgba(4,10,5,var(--sp1,.72)) 0%,rgba(4,10,5,var(--sp2,.52)) 44%,rgba(4,10,5,0) 78%);
}
.band.settle::before{
  background:radial-gradient(ellipse 92% 84% at 50% 48%,
    rgba(4,10,5,var(--sp1,.86)) 0%,rgba(4,10,5,var(--sp2,.70)) 46%,rgba(4,10,5,0) 84%);
}
.band-inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto}
.band.left .band-inner{text-align:left}
.band.settle .band-inner{text-align:center}
/* containers get px/min(), text elements get ch: a ch on a container
   would resolve against the body font, not the display face */
.band .col{max-width:min(54vw,700px)}
.band.settle .col{max-width:min(90vw,860px);margin:0 auto}

.band h1,.band h2{
  font-size:clamp(2.4rem,6.4vw,5.4rem);line-height:.98;letter-spacing:-.028em;
  max-width:13ch;
}
.band.settle h1,.band.settle h2{max-width:none}
.band .sub{
  margin-top:clamp(14px,1.6vw,22px);color:var(--text-primary);opacity:.94;
  font-size:clamp(1rem,1.42vw,1.32rem);line-height:1.5;max-width:30ch;
}
.band.settle .sub{margin-left:auto;margin-right:auto;max-width:36ch}
.band .kicker{
  display:inline-block;margin-bottom:clamp(14px,1.8vw,24px);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);
}
.band .cta-row{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(22px,2.6vw,34px);
}
.band .btn{text-shadow:none}

/* text choreography primitives */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) word rise */
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*34px));
}
/* (b) word punch with overshoot */
.e-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(.62 + (.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* (c) drift down */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-30px));
}
/* staged settle */
.band.settle .sub{--ks:clamp(0,(var(--k,0) - .60)*3.6,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*16px))}
.band.settle .cta-row{--kb:clamp(0,(var(--k,0) - .76)*4.6,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*16px))}
.band.settle .kicker{--kk:clamp(0,var(--k,0)*4,1);opacity:var(--kk)}

/* steam whisper */
.steam{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.steam i{
  position:absolute;bottom:-8%;width:2px;height:2px;border-radius:50%;
  background:rgba(247,242,228,.5);filter:blur(1.5px);
  animation:rise 13s linear infinite;
}
@keyframes rise{
  0%{transform:translateY(0) translateX(0) scale(.6);opacity:0}
  14%{opacity:.5}
  100%{transform:translateY(-92vh) translateX(26px) scale(2.4);opacity:0}
}

/* ============================================================
   STATIC HERO (phones, reduced motion)
   ============================================================ */
/* The photo sits at the top at a size the source can fill sharply, and the
   words sit below on the canvas. Stretching one wide frame over a whole tall
   phone screen was blowing it up about three and a half times. */
.static{
  display:none;position:relative;z-index:3;min-height:100svh;
  flex-direction:column;background:var(--canvas);
  padding:0 0 clamp(34px,8vw,64px);
}
.static-pic{
  flex:0 0 auto;width:100%;aspect-ratio:4/3;
  background-image:
    linear-gradient(to bottom,rgba(6,14,8,.62) 0%,rgba(6,14,8,.14) 22%,rgba(6,14,8,0) 48%,rgba(14,26,15,.55) 86%,var(--canvas) 100%),
    url('../assets/hero-mobile.jpg?v=20260920h');
  background-size:cover;background-position:50% 44%;
}
.static .wrap{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:var(--maxw);margin:0 auto;width:100%;
  padding:clamp(16px,4vw,28px) var(--gutter) 0;
}
@media(min-width:900px){
  .static-pic{aspect-ratio:21/9;max-height:40svh}
}
.static h1{font-size:clamp(2.5rem,10vw,4rem);line-height:.98;letter-spacing:-.028em;max-width:13ch}
.static .sub{margin-top:18px;color:var(--text-primary);opacity:.94;max-width:32ch;font-size:1.04rem}
.static .cta-row{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px}
.static .btn{text-shadow:none}

/* ============================================================
   SECTION SHELL
   ============================================================ */
main{position:relative;z-index:3}
section{position:relative}
/* the nav is fixed, so an anchor jump has to stop clear of it */
.sec{padding:clamp(76px,10vw,150px) var(--gutter);scroll-margin-top:clamp(84px,9vw,134px)}
.wrap{max-width:var(--maxw);margin:0 auto;position:relative}
.eyebrow{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:18px;
}
.lede{color:var(--text-secondary);font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.62;max-width:52ch}

/* entrance choreography */
.rev{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.in .rev,.rev.in{opacity:1;transform:none}
.in .rev:nth-child(2){transition-delay:.08s}
.in .rev:nth-child(3){transition-delay:.16s}
.in .rev:nth-child(4){transition-delay:.24s}
.in .rev:nth-child(5){transition-delay:.32s}
/* retire the stagger so later hovers never lag (matches nth-child specificity) */
.in.done .rev:nth-child(2),.in.done .rev:nth-child(3),
.in.done .rev:nth-child(4),.in.done .rev:nth-child(5){transition-delay:0s}

/* ============================================================
   1. THE PROMISE (asymmetric: statement left, image right, offset)
   ============================================================ */
#tower{background:linear-gradient(to bottom,var(--canvas-deep),var(--canvas) 34%)}
.tower-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,80px);align-items:stretch}
.tower-say{align-self:center}
.tower-say h2{font-size:clamp(2.2rem,4.6vw,3.9rem);letter-spacing:-.025em;max-width:11ch}
.tower-say .lede{margin-top:22px}
.tower-say .rule{
  width:74px;height:2px;background:var(--accent);margin:30px 0;transform-origin:left;
  transform:scaleX(0);transition:transform 1.1s var(--ease) .2s;
}
.in .tower-say .rule{transform:scaleX(1)}
.tower-pic{position:relative;border-radius:18px;overflow:hidden;min-height:clamp(280px,34vw,440px);
  box-shadow:0 30px 80px rgba(4,10,5,.55)}
.tower-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.6s var(--ease)}
.tower-pic:hover img{transform:scale(1.035)}
.tower-pic::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,14,8,.5),transparent 46%);
}
.tower-tag{
  position:absolute;left:18px;bottom:16px;z-index:2;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-primary);background:rgba(8,16,9,.6);border:1px solid var(--hair);
  border-radius:9px;padding:7px 12px;backdrop-filter:blur(8px);
}
@media(max-width:860px){.tower-grid{grid-template-columns:1fr;gap:34px}.tower-say h2{max-width:none}}

/* ============================================================
   1b. IN NUMBERS (a ruled band of three figures)
   ============================================================ */
#numbers{
  padding-top:clamp(34px,4.4vw,60px);padding-bottom:clamp(34px,4.4vw,60px);
  background:var(--canvas-deep);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.nums{display:grid;grid-template-columns:repeat(3,1fr)}
.num-cell{padding:clamp(14px,2vw,26px) clamp(18px,2.8vw,40px);border-left:1px solid var(--hair)}
.num-cell:first-child{border-left:0;padding-left:0}
.num-cell b{
  display:block;font-family:var(--display);font-weight:700;font-variation-settings:'SOFT' 100,'WONK' 1;
  font-size:clamp(2.5rem,5.2vw,4.3rem);line-height:1;color:var(--accent);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.num-cell .lab{
  display:block;margin-top:14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-primary);
}
.num-cell p{color:var(--text-secondary);font-size:.9rem;margin-top:8px;max-width:30ch}
@media(max-width:760px){
  .nums{grid-template-columns:1fr}
  .num-cell{border-left:0;border-top:1px solid var(--hair);padding:22px 0}
  .num-cell:first-child{border-top:0;padding-top:0}
}

/* ============================================================
   2. THE MENU (horizontal snap row, a different skeleton)
   ============================================================ */
#menu{padding-bottom:clamp(60px,8vw,110px)}
.menu-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:38px}
.menu-head h2{font-size:clamp(2rem,4.1vw,3.35rem);max-width:15ch}
.rail{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px calc(var(--gutter)) 24px;margin:0 calc(-1*var(--gutter));
  scrollbar-width:thin;scrollbar-color:var(--leaf-dim) transparent;
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--leaf-dim);border-radius:99px}
.crown{
  flex:0 0 clamp(268px,31vw,410px);scroll-snap-align:start;
  border-radius:16px;overflow:hidden;position:relative;background:var(--panel);
  box-shadow:0 20px 54px rgba(4,10,5,.45);
}
.crown img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.5s var(--ease)}
.crown:hover img{transform:scale(1.05)}
.crown .meta{padding:17px 19px 21px}
.crown h3{font-size:1.22rem;letter-spacing:-.012em}
.crown p{color:var(--text-secondary);font-size:.9rem;margin-top:7px;max-width:30ch}
.crown .num{
  position:absolute;top:13px;left:14px;z-index:2;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;color:var(--accent);
  background:rgba(8,16,9,.62);border:1px solid var(--hair);border-radius:8px;
  padding:5px 9px;backdrop-filter:blur(8px);
}

/* ============================================================
   3. THE SPREAD (grid, deliberately unlike the rail above)
   ============================================================ */
#spread{background:var(--canvas-deep);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.spread-head{max-width:min(62vw,760px);margin-bottom:44px}
.spread-head h2{font-size:clamp(1.95rem,3.9vw,3.1rem);max-width:17ch}
/* a row-unit mosaic. Every tile spans whole row units, so the bands line up
   across the grid. Per-tile aspect-ratio was leaving ragged gaps. */
.tiles{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:116px;gap:14px}
.tile{position:relative;border-radius:13px;overflow:hidden;background:var(--panel)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.5s var(--ease),filter 1.1s var(--ease)}
.tile:hover img{transform:scale(1.06)}
.tile figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px 15px 14px;
  background:linear-gradient(to top,rgba(6,14,8,.92),transparent);
  font-size:.83rem;font-weight:500;letter-spacing:.005em;
}
.t-a{grid-column:span 5;grid-row:span 3}
.t-b{grid-column:span 4;grid-row:span 3}
.t-c{grid-column:span 3;grid-row:span 3}
.t-d{grid-column:span 3;grid-row:span 4}
.t-e{grid-column:span 5;grid-row:span 4}
.t-f{grid-column:span 4;grid-row:span 4}
.t-g{grid-column:span 4;grid-row:span 3}
.t-h{grid-column:span 4;grid-row:span 3}
.t-i{grid-column:span 4;grid-row:span 3}
@media(max-width:900px){
  /* nine tiles: one full-width, then four clean pairs. A second full-width
     tile mid-list would push its neighbour down and leave a hole beside it. */
  .tiles{grid-template-columns:repeat(6,1fr);grid-auto-rows:92px}
  .t-a{grid-column:span 6;grid-row:span 3}
  .t-b,.t-c,.t-d,.t-e,.t-f,.t-g,.t-h,.t-i{grid-column:span 3;grid-row:span 3}
}

/* ============================================================
   3b. WHERE WE SERVE (full bleed, captions over the image,
       deliberately unlike the tile grid above and the
       instrument below)
   ============================================================ */
#where{padding-left:0;padding-right:0}
#where .wrap{padding:0 var(--gutter)}
.where-head{max-width:min(60vw,720px);margin-bottom:40px}
.where-head h2{font-size:clamp(1.95rem,3.9vw,3.1rem);max-width:15ch}
.scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px}
.scene{position:relative;overflow:hidden;min-height:clamp(300px,31vw,470px)}
.scene img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  transition:transform 2s var(--ease),filter 1.2s var(--ease);filter:saturate(.96)}
.scene:hover img{transform:scale(1.06);filter:saturate(1.04)}
.scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(5,12,7,.96) 0%,rgba(5,12,7,.88) 22%,rgba(5,12,7,.5) 46%,rgba(5,12,7,.1) 76%);
}
.scene .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 clamp(18px,2.2vw,30px) clamp(22px,2.6vw,32px)}
.scene .cap span{
  font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#17110A;background:var(--accent);
  display:inline-block;border-radius:6px;padding:5px 10px;margin-bottom:11px;
  box-shadow:0 6px 18px rgba(4,10,5,.42);
}
.scene .dish{
  position:absolute;top:14px;left:14px;z-index:3;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-primary);background:rgba(8,16,9,.62);border:1px solid var(--hair);
  border-radius:8px;padding:6px 10px;backdrop-filter:blur(8px);
}
.scene .cap h3{font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.015em;text-shadow:var(--tshadow)}
.scene .cap p{color:var(--text-secondary);font-size:.89rem;margin-top:7px;max-width:26ch}
/* the scenes run full bleed to the section's bottom edge, so the section adds
   no padding of its own underneath them. Without this the last photo is
   followed by two stacked paddings before the headcount slider. */
#where{padding-bottom:0}
@media(max-width:1180px){.scenes{grid-template-columns:repeat(2,1fr)}.scene{min-height:clamp(300px,38vw,420px)}}
@media(max-width:700px){.scenes{grid-template-columns:1fr;gap:3px}.scene{min-height:300px}}

/* ============================================================
   4. THE COUNT (the interactive moment, its own skeleton)
   ============================================================ */
#count{overflow:hidden}
.count-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,90px);align-items:center}
.count-say h2{font-size:clamp(2rem,4.1vw,3.35rem);max-width:13ch}
.count-say .lede{margin-top:20px}

.instrument{
  background:var(--panel);border:1px solid var(--hair);border-radius:22px;
  padding:clamp(24px,3vw,38px);position:relative;overflow:hidden;
  box-shadow:0 30px 80px rgba(4,10,5,.45);
}
.instrument::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(245,185,33,.1),transparent 60%);
}
.guest-line{display:flex;align-items:baseline;gap:11px;margin-bottom:6px}
.guest-num{
  font-family:var(--display);font-weight:700;font-size:clamp(3rem,6.6vw,4.6rem);
  line-height:1;color:var(--accent);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.guest-lab{color:var(--text-secondary);font-size:.95rem}

/* the pots: one icon per catering pot, lit as the headcount needs it.
   34 is the most the slider can ask for (2000 guests / 6 per kg / 10 kg per pot). */
.pots{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(4px,.7vw,8px);
  margin:24px 0 8px;padding:16px 14px 14px;border-radius:14px;
  background:linear-gradient(to bottom,rgba(69,111,43,.16),rgba(43,74,29,.3));
  border:1px solid rgba(127,177,60,.18);
}
.pot{
  width:100%;aspect-ratio:1/1;display:block;
  opacity:.16;transform:scale(.82) translateY(3px);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
}
.pot.on{opacity:1;transform:none}
.pot svg{width:100%;height:100%;display:block;overflow:visible}
@media(max-width:420px){.pots{grid-template-columns:repeat(9,1fr)}}
.readouts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.ro{
  background:var(--panel-2);border:1px solid var(--hair);border-radius:12px;padding:13px 14px;
  opacity:.42;transform:translateY(6px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .6s var(--ease);
}
.instrument.touched .ro{opacity:1;transform:none;border-color:var(--leaf-dim)}
.instrument.touched .ro:nth-child(2){transition-delay:.09s}
.instrument.touched .ro:nth-child(3){transition-delay:.18s}
.ro b{display:block;font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.1}
.ro span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);margin-top:5px}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;margin:10px 0 0;cursor:grab;
}
input[type=range]:active{cursor:grabbing}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(to right,var(--accent) 0 var(--pct,20%),rgba(183,195,172,.2) var(--pct,20%) 100%)}
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:linear-gradient(to right,var(--accent) 0 var(--pct,20%),rgba(183,195,172,.2) var(--pct,20%) 100%)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--accent);border:3px solid var(--panel);margin-top:-10px;
  box-shadow:0 3px 14px rgba(245,185,33,.45);transition:transform .22s var(--ease);
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.13)}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--accent);border:3px solid var(--panel);
  box-shadow:0 3px 14px rgba(245,185,33,.45);
}
.scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--text-secondary);margin-top:2px}
.instrument .btn{width:100%;margin-top:20px}
.fineprint{margin-top:12px;font-size:.78rem;color:var(--text-secondary);line-height:1.5}
@media(max-width:900px){.count-wrap{grid-template-columns:1fr;gap:34px}.count-say h2{max-width:none}}

/* ============================================================
   4b. ABOUT THE PRICE (centred statement over a market strip)
   ============================================================ */
#price{border-top:1px solid var(--hair)}
.price-wrap{text-align:center;max-width:980px}
.price-wrap h2{font-size:clamp(1.95rem,3.9vw,3.1rem);max-width:18ch;margin:0 auto}
.price-wrap .lede{margin:20px auto 0;max-width:60ch}
.market{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px;text-align:left}
.mk{
  background:var(--panel);border:1px solid var(--hair);border-radius:14px;
  padding:18px 18px 20px;position:relative;overflow:hidden;
}
.mk b{display:block;font-family:var(--display);font-weight:700;font-variation-settings:'SOFT' 100,'WONK' 1;font-size:1.2rem;margin-top:14px}
.mk span{display:block;color:var(--text-secondary);font-size:.88rem;margin-top:6px;max-width:30ch}
.wave{width:100%;height:30px;display:block;overflow:hidden}
.wave path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round;opacity:.75;vector-effect:non-scaling-stroke}
.wv{animation:wavepan 11s linear infinite;animation-play-state:paused}
#price.live .wv{animation-play-state:running}
@keyframes wavepan{to{transform:translateX(-120px)}}
.price-wrap .cta-row{display:flex;justify-content:center;margin-top:34px}
.price-wrap .fineprint{max-width:56ch;margin:14px auto 0}
@media(max-width:760px){.market{grid-template-columns:1fr}}

/* ============================================================
   5. HOW IT WORKS (a run along the rib, unlike anything above)
   ============================================================ */
#how{background:var(--canvas-deep);border-top:1px solid var(--hair)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px);margin-top:46px;position:relative}
.steps::before{
  content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:var(--hair);
  transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--ease) .15s;
}
.in .steps::before{transform:scaleX(1)}
.step{position:relative;padding-top:52px}
.step .dot{
  position:absolute;top:11px;left:0;width:17px;height:17px;border-radius:50%;
  background:var(--canvas-deep);border:2px solid var(--accent);
}
.step .dot::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent);
  opacity:0;transition:opacity .5s var(--ease);
}
.in .step .dot::after{opacity:1}
.in .step:nth-child(2) .dot::after{transition-delay:.16s}
.in .step:nth-child(3) .dot::after{transition-delay:.32s}
.step .n{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:9px}
.step h3{font-size:1.28rem;letter-spacing:-.012em}
.step p{color:var(--text-secondary);font-size:.93rem;margin-top:9px;max-width:26ch}
@media(max-width:860px){
  .steps{grid-template-columns:1fr;gap:28px}
  .steps::before{display:none}
}

/* ============================================================
   6. WHAT LANDS (list left, image bleeding right)
   ============================================================ */
.lands-grid{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(30px,5vw,72px);align-items:stretch}
.lands-list{list-style:none;margin:30px 0 0;padding:0}
.lands-list li{
  display:flex;gap:15px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--hair);
}
.lands-list li:first-child{border-top:1px solid var(--hair)}
.lands-list svg{width:19px;height:19px;flex:0 0 auto;margin-top:3px;color:var(--accent)}
.lands-list b{font-weight:600;font-size:1rem;display:block}
.lands-list span{color:var(--text-secondary);font-size:.89rem;display:block;margin-top:2px}
.lands-pic{position:relative;border-radius:18px;overflow:hidden;min-height:clamp(280px,34vw,440px);
  box-shadow:0 30px 80px rgba(4,10,5,.5)}
.lands-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.6s var(--ease)}
.lands-pic:hover img{transform:scale(1.035)}
@media(max-width:900px){
  .lands-grid{grid-template-columns:1fr;gap:32px}
  .lands-pic,.tower-pic{min-height:clamp(240px,58vw,380px)}
}

/* ============================================================
   6b. IN THEIR WORDS (WhatsApp bubbles, real messages only)
   ============================================================ */
#said{background:var(--canvas-deep)}
.said-head{max-width:min(60vw,720px);margin-bottom:38px}
.said-head h2{font-size:clamp(1.95rem,3.9vw,3.1rem);max-width:16ch}
.chats{columns:3 290px;column-gap:20px}
.bubble{
  break-inside:avoid;margin:0 0 20px 10px;position:relative;
  background:#1E3325;border-radius:4px 16px 16px 16px;padding:12px 16px 9px;
  box-shadow:0 12px 30px rgba(4,10,5,.38);
}
.bubble::before{
  content:"";position:absolute;left:-9px;top:0;
  border-top:11px solid #1E3325;border-left:9px solid transparent;
}
.bubble figcaption{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bubble .who{font-weight:600;font-size:.86rem;color:var(--accent)}
.bubble .ev{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.bubble p{margin-top:6px;font-size:.96rem;line-height:1.56;color:var(--text-primary)}
.bubble time{display:block;text-align:right;font-size:.7rem;color:var(--text-secondary);margin-top:6px}
@media(max-width:760px){.said-head{max-width:none}}

/* ============================================================
   7. FAQ (narrow single column, unlike its neighbours)
   ============================================================ */
#faq{background:var(--canvas-deep);border-top:1px solid var(--hair)}
.faq-wrap{max-width:780px;margin:0 auto}
.faq-wrap h2{font-size:clamp(1.95rem,3.9vw,3.1rem);text-align:center;max-width:none}
.faq-wrap .lede{margin:18px auto 44px;text-align:center}
details{border-bottom:1px solid var(--hair)}
details summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(1.02rem,1.5vw,1.2rem);
  letter-spacing:-.008em;transition:color .3s var(--ease);
}
details summary::-webkit-details-marker{display:none}
details summary:hover{color:var(--accent)}
details summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--ease);
}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details .ans{padding:0 0 24px;color:var(--text-secondary);max-width:62ch;line-height:1.66}

/* ============================================================
   7b. READ MORE (the three pages lifted off the home page)
   These carry the detail a family wants once they are interested.
   Keeping them one click away leaves the home page a single
   readable run instead of a sixteen-screen scroll.
   ============================================================ */
#more{background:var(--canvas-deep);border-top:1px solid var(--hair)}
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
@media(max-width:1100px){.more-grid{grid-template-columns:repeat(2,1fr)}}
.more-card{
  display:flex;flex-direction:column;gap:7px;text-decoration:none;
  background:var(--panel);border:1px solid var(--hair);border-radius:16px;
  padding:clamp(20px,2.4vw,28px);position:relative;
  transition:border-color .4s var(--ease),transform .4s var(--ease),background .4s var(--ease);
}
.more-card:hover{border-color:var(--accent);transform:translateY(-3px);background:#1A2B1E}
.more-card .n{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.more-card b{font-family:var(--display);font-weight:600;font-size:1.22rem;letter-spacing:-.014em;color:var(--text-primary)}
.more-card span.d{color:var(--text-secondary);font-size:.89rem;line-height:1.5}
.more-card .go{
  margin-top:4px;font-size:.82rem;color:var(--accent);
  display:inline-flex;align-items:center;gap:7px;
}
.more-card .go svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.more-card:hover .go svg{transform:translateX(4px)}
@media(max-width:860px){.more-grid{grid-template-columns:1fr;gap:10px;margin-top:22px}
  .more-card{padding:17px 18px;gap:5px}.more-card b{font-size:1.08rem}}

/* ============================================================
   SUB PAGES (price, on the day, questions)
   One column, a way back at the top, and the same booking
   invitation at the foot as the home page.
   ============================================================ */
.subtop{padding:clamp(104px,12vw,150px) var(--gutter) 0}
.back{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-secondary);transition:color .3s var(--ease);
}
.back:hover{color:var(--accent)}
.back svg{width:14px;height:14px}
.subpage .sec:first-of-type{padding-top:clamp(26px,3vw,40px)}
.sub-end{
  border-top:1px solid var(--hair);background:var(--canvas-deep);text-align:center;
}
.sub-end h2{font-size:clamp(1.7rem,3.4vw,2.6rem);max-width:18ch;margin:0 auto}
.sub-end .lede{margin:18px auto 0;text-align:center;max-width:52ch}
.sub-end .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ============================================================
   8. BOOK (full bleed over the ending frame)
   ============================================================ */
#book{
  position:relative;overflow:hidden;
  background-image:linear-gradient(to bottom,rgba(6,14,8,.86),rgba(6,14,8,.7) 46%,rgba(6,14,8,.94)),url('../assets/hero-ending.jpg?v=20260920h');
  background-size:cover;background-position:50% 52%;
  text-align:center;
}
/* phones get the full-resolution photo instead of the film frame: sharper,
   and it is then the only picture they download */
@media(max-width:900px){
  #book{
    background-image:linear-gradient(to bottom,rgba(6,14,8,.86),rgba(6,14,8,.7) 46%,rgba(6,14,8,.94)),url('../assets/hero-mobile.jpg?v=20260920h');
    background-position:50% 46%;
  }
}
#book h2{font-size:clamp(2.2rem,5.6vw,4.4rem);max-width:15ch;margin:0 auto;letter-spacing:-.028em}
#book .lede{margin:22px auto 0;text-align:center}
#book .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
#book .note{margin-top:22px;font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  position:relative;z-index:3;background:var(--canvas-deep);border-top:1px solid var(--hair);
  padding:clamp(50px,6vw,74px) var(--gutter) 34px;
}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;max-width:var(--maxw);margin:0 auto}
.foot-grid img{width:190px;margin-bottom:16px}
.foot-grid p{color:var(--text-secondary);font-size:.9rem;max-width:34ch}
.foot-grid h4{font-family:var(--mono);font-weight:400;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:9px}
.foot-grid a{color:var(--text-secondary);text-decoration:none;font-size:.9rem;transition:color .3s var(--ease)}
.foot-grid a:hover{color:var(--text-primary)}
.foot-grid address{
  font-style:normal;color:var(--text-secondary);font-size:.86rem;line-height:1.6;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--hair);max-width:28ch;
}
.foot-base{
  max-width:var(--maxw);margin:42px auto 0;padding-top:22px;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:.78rem;color:var(--text-secondary);
}
@media(max-width:780px){.foot-grid{grid-template-columns:1fr;gap:30px}}

/* ============================================================
   SWIPE RAIL
   Sits under a row you drag sideways. The script adds .on only while
   the row actually overflows, so it never shows on a desktop layout.
   Not to be confused with .rail above, which is the menu's card row.
   ============================================================ */
.swipe-rail{
  display:none;height:4px;border-radius:999px;background:var(--hair);
  margin:16px 0 0;overflow:hidden;
}
.swipe-rail.on{display:block}
.swipe-rail span{
  display:block;height:100%;width:40%;border-radius:inherit;
  background:var(--accent);transition:transform .1s linear;
}

/* ============================================================
   PHONE DENSITY
   On a phone the page is read one thumb-swipe at a time, so the
   stacked rhythm that suits a desktop turns into dead scrolling.
   Sections sit closer together, and the two lists that would
   otherwise run down the screen become swipeable rows instead.
   ============================================================ */
@media(max-width:860px){
  .sec{padding-top:58px;padding-bottom:58px}
  #count{padding-top:44px}

  /* three steps, side by side, one swipe each */
  .steps{
    display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:76%;
    gap:12px;margin-top:26px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);
    padding:0 var(--gutter) 6px;scrollbar-width:none;
  }
  .steps::-webkit-scrollbar{display:none}
  .step{
    scroll-snap-align:start;padding:34px 15px 17px;
    background:var(--panel);border:1px solid var(--hair);border-radius:14px;
  }
  .step .dot{top:15px;left:15px}
  .step h3{font-size:1.14rem}
  .step p{max-width:none;font-size:.89rem}

  /* the same for the WhatsApp messages */
  .said-head{margin-bottom:24px}
  .chats{
    columns:auto;display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 6px;scrollbar-width:none;
  }
  .chats::-webkit-scrollbar{display:none}
  .bubble{flex:0 0 78%;margin:0;scroll-snap-align:start}
  .bubble p{font-size:.9rem;line-height:1.5}
}

/* ============================================================
   SHORT SCREENS
   ============================================================ */
@media(max-height:560px){.ring,.chev,.steam{display:none}}

/* ============================================================
   THE FIVE STATIC-HERO GATES
   (these five strings match the JS list character for character)
   ============================================================ */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{display:none}
  .static{display:flex}
}

/* ============================================================
   REDUCED MOTION, HONOURED COMPLETELY
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0ms !important;
  }
  .rev{opacity:1;transform:none}
  .tower-say .rule{transform:scaleX(1)}
  .steps::before{transform:scaleX(1)}
  .step .dot::after{opacity:1}
  .veins path{stroke-dashoffset:0}
  .ro{opacity:1;transform:none}
  .env{animation:none}
  /* re-apply positional transforms that the blanket rule would strip */
  .pot.on{transform:none}
  details summary::after{transform:translateY(-70%) rotate(45deg)}
  details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
}

/* pause every loop on a hidden tab or an off-screen section */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}