/* ============================================================
   HOLLY TEA - Ice Cream & Tea, Jakarta Pusat
   Kemitraan landing page

   Warna diambil piksel-exact dari assets/logo.png:
     red    #BD1522  wordmark "HOLLY TEA" + linework maskot
     navy   #1F2348  outline badge, mahkota, mata
     orange #F29200  hidung maskot - satu-satunya aksen hangat
     blush  #F08096  pipi maskot
     paper  #FDFBF9  latar halaman
   ============================================================ */

:root{
  --red:#BD1522;
  --red-deep:#96101B;
  --navy:#1F2348;
  --navy-deep:#141733;
  --orange:#F29200;
  --blush:#F08096;
  --paper:#FDFBF9;
  --paper-warm:#FAF2EA;
  --white:#FFFFFF;
  --wa:#0E7C3F;
  --wa-deep:#0A6231;

  --ink:var(--navy);
  --ink-soft:rgba(31,35,72,.74);
  --rule:rgba(31,35,72,.16);
  --rule-dark:rgba(253,251,249,.16);

  --sans:"Plus Jakarta Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --gut:clamp(20px,5vw,72px);
  --pin:460vh;
  --maxw:1400px;

  /* the logo is a vertical lockup (badge over wordmark), so it needs more
     height than a horizontal mark would. Adjust these three if you swap in
     a wider version. */
  --logo-nav:58px;
  --logo-foot:104px;
  --logo-boot:132px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-booting{overflow:hidden;height:100vh}

a{color:inherit}
::selection{background:var(--red);color:var(--white)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}

/* === SHARED TYPE === */
.eyebrow{
  margin:0;font:500 11px/1 var(--mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--red);
}
/* on navy the brand red drops to 2.4:1, so the mascot's orange carries it */
.creed .eyebrow,.foot .eyebrow{color:var(--orange)}

.h-display{
  margin:.24em 0 0;font-weight:800;
  font-size:clamp(38px,6.4vw,88px);line-height:1.0;
  letter-spacing:-.035em;
}
.h-display em{font-style:italic;font-weight:700;color:var(--red)}

.lede{
  margin:1.3em 0 0;max-width:46ch;font-size:clamp(16px,1.3vw,19px);
  line-height:1.62;color:var(--ink-soft);
}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:24px;padding:15px 26px;border:0;cursor:pointer;
  font:600 13px/1 var(--sans);letter-spacing:.02em;
  color:var(--white);background:var(--red);text-decoration:none;border-radius:999px;
  transition:background .35s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.2,.7,.2,1);
}
.btn:hover{background:var(--red-deep);transform:translateY(-2px)}
.btn--big{padding:18px 30px;font-size:15px}

/* ikon WhatsApp yang dipakai ulang lewat <use> */
.ico{width:18px;height:18px;flex:none;display:block}
.ico--lg{width:22px;height:22px}
.ico--fab{width:26px;height:26px}

/* === BRAND LOCKUP === */
.brand{display:inline-flex;align-items:center;text-decoration:none;line-height:1}
.brand__img{display:block;height:var(--logo-nav);width:auto}
.brand__txt{display:none;font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--red)}
.brand__txt i{
  display:block;margin-top:3px;font:400 9px/1 var(--mono);font-style:normal;
  letter-spacing:.22em;text-transform:uppercase;color:var(--navy);
}
/* fallback until assets/logo.png is dropped in */
.brand--nologo .brand__img{display:none}
.brand--nologo .brand__txt{display:block}
.brand--foot .brand__img{height:var(--logo-foot)}
.brand--foot .brand__txt{color:var(--white);font-size:26px}
.brand--foot .brand__txt i{color:var(--orange)}

/* === LOADER === */
.boot{
  position:fixed;inset:0;z-index:100;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .9s ease,visibility .9s;
}
.boot.is-done{opacity:0;visibility:hidden}
.boot__logo img{display:block;height:var(--logo-boot);width:auto}
.boot__fallback{display:none;font-weight:800;font-size:34px;letter-spacing:-.03em;color:var(--red)}
.boot__logo.nologo img{display:none}
.boot__logo.nologo .boot__fallback{display:block}
.boot__bar{width:min(260px,52vw);height:2px;background:var(--rule);overflow:hidden;border-radius:2px}
.boot__bar i{display:block;height:100%;width:0;background:var(--red);transition:width .25s linear}
.boot__pct{font:400 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--red)}

/* === NAV === */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px var(--gut);
  transition:background-color .5s ease,box-shadow .5s ease;
}
.nav.is-stuck{background:rgba(253,251,249,.88);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--rule)}
.nav.on-dark{color:var(--white)}
.nav.on-dark.is-stuck{background:rgba(20,23,51,.82);box-shadow:0 1px 0 var(--rule-dark)}
.nav.on-dark .brand--nologo .brand__txt{color:var(--white)}
.nav.on-dark .brand--nologo .brand__txt i{color:var(--orange)}
.nav__links{display:flex;gap:28px}
.nav__links a{
  font:500 13px/1 var(--sans);text-decoration:none;opacity:.78;
  padding:12px 0;                          /* 37px tall tap target */
  transition:opacity .3s;
}
.nav__links a:hover{opacity:1}
.nav__cta{
  font:600 12px/1 var(--sans);text-decoration:none;
  padding:14px 20px;border-radius:999px;   /* 40px tall tap target */
  color:var(--white);background:var(--red);
  transition:background .3s;
}
.nav__cta:hover{background:var(--red-deep)}

/* === HERO === */
.hero{height:var(--pin);position:relative}
.stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:grid;place-items:center;
}
/* colour is driven per scroll frame - a transition would only add lag */
.stage__ground{position:absolute;inset:0;background:var(--paper)}

/* oversized wordmark, read through the studio sweep behind the cup */
.stage__word{
  position:absolute;inset:0;display:grid;place-items:center;
  pointer-events:none;user-select:none;
}
.stage__word span{
  font-weight:800;font-size:clamp(56px,14.5vw,224px);line-height:1;
  letter-spacing:.42em;text-indent:.42em;
  color:#F7DFE1;white-space:nowrap;
}

/* the product - multiplied so the white sweep dissolves into the ground */
.stage__product{
  position:absolute;inset:0;display:grid;place-items:center;will-change:transform;
  transform:translate(var(--px,0),var(--py,0)) scale(var(--ps,1));
}
/* size is set inline per viewport - no max-width here, or it would
   cap the width without the height and squash the aspect ratio */
.stage__product canvas,.stage__product img{
  display:block;width:auto;height:auto;max-width:none;
  mix-blend-mode:multiply;
}
.stage__product img{height:70vh}

/* flanking display line */
.split{position:absolute;inset:0;pointer-events:none}
.split__l,.split__r{
  position:absolute;top:50%;
  font-weight:800;font-size:clamp(34px,6.2vw,86px);line-height:.98;
  letter-spacing:-.04em;color:var(--navy);opacity:0;
  will-change:transform,opacity;
}
.split__l{left:var(--gut);transform:translate(var(--tx,0),-50%);text-align:left}
.split__r{right:var(--gut);transform:translate(var(--tx,0),-50%);text-align:right}
.split__r em{font-style:normal;color:var(--red)}

/* eyebrow + intro paragraph */
.intro{
  position:absolute;left:var(--gut);bottom:84px;max-width:36ch;
  will-change:transform,opacity;
}
.intro__body{margin:13px 0 0;font-size:15px;line-height:1.6;color:var(--ink-soft)}

/* the numbers, drawn out of the product on hairlines */
.anno{position:absolute;inset:0;pointer-events:none}
.anno__row{
  position:absolute;top:var(--top);left:56%;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  max-width:min(38ch,38vw);
}
.anno__row i{
  display:block;height:1px;width:0;background:var(--red);
  align-self:center;
}
.anno__row b{
  font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);opacity:0;
}
.anno__row s{
  flex-basis:100%;margin-left:calc(var(--lead,0px) + 14px);
  text-decoration:none;font-size:15px;line-height:1.45;font-weight:600;
  color:var(--navy);opacity:0;
}

/* resolve card */
.card{
  position:absolute;right:var(--gut);top:50%;
  transform:translate(var(--tx,0),-50%);
  max-width:32ch;opacity:0;will-change:transform,opacity;
}
.card__name{
  margin:.22em 0 .36em;font-weight:800;
  font-size:clamp(34px,4.6vw,62px);line-height:1;letter-spacing:-.035em;
}
.card__body{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}

/* hero chrome */
.hud{
  position:absolute;left:var(--gut);bottom:32px;right:var(--gut);
  display:flex;align-items:center;gap:16px;
  font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--red);
}
.hud__rule{flex:1;height:1px;background:var(--rule);max-width:320px}
.hud__rule i{display:block;height:100%;width:0;background:var(--red)}
.hint{
  position:absolute;right:var(--gut);bottom:32px;
  font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--red);
  animation:drift 2.6s ease-in-out infinite;
}
@keyframes drift{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

/* === REVEALS === */
.reveal{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js-reveal .reveal{opacity:0;transform:translateY(22px)}
.js-reveal .reveal.is-in{opacity:1;transform:none}

/* === CREED === */
.creed{
  background:var(--navy);color:var(--paper);
  padding:clamp(110px,18vh,200px) var(--gut);
}
.creed__eyebrow{margin-bottom:clamp(36px,6vw,72px)}
.creed__line{
  margin:0;max-width:19ch;font-weight:800;
  font-size:clamp(34px,5.6vw,84px);line-height:1.06;letter-spacing:-.038em;
}
.creed__line em{font-style:normal;color:var(--orange)}
.creed__sig{
  margin:clamp(36px,5vw,64px) 0 0;
  font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(253,251,249,.62);transition-delay:.15s;
}

/* === KENAPA / SPEC === */
.dossier{padding:clamp(88px,13vh,160px) var(--gut)}
.dossier__head{max-width:var(--maxw);margin:0 auto clamp(48px,7vw,88px)}
.spec{max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--rule)}
.spec__row{
  display:grid;grid-template-columns:minmax(110px,1fr) 3fr minmax(110px,1fr);
  gap:20px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--rule);
}
.spec dt{
  margin:0;font:500 11px/1.4 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);
}
.spec dd{margin:0;font-size:clamp(16px,1.6vw,21px);line-height:1.35;color:var(--ink-soft)}
.spec__num{
  font-family:var(--sans);font-weight:800;font-size:clamp(18px,2vw,26px);
  letter-spacing:-.02em;text-align:right;color:var(--navy);
}

/* === PEMBEDA / CTR ===
   Satu-satunya blok merah penuh di halaman. Dipakai sekali saja supaya
   tetap terasa sebagai ajakan, bukan dekorasi. */
.pitch{background:var(--red);color:var(--white);padding:clamp(80px,12vh,140px) var(--gut)}
.pitch__in{max-width:var(--maxw);margin:0 auto}
.pitch__eyebrow{color:rgba(255,255,255,.82)}
.pitch__h{
  margin:.3em 0 0;font-weight:800;
  font-size:clamp(32px,5.4vw,74px);line-height:1.02;letter-spacing:-.038em;
}
.pitch__lede{
  margin:1.1em 0 0;max-width:52ch;font-size:clamp(16px,1.35vw,19px);
  line-height:1.6;color:rgba(255,255,255,.88);
}
.pitch__grid{
  list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.28);
  border-top:1px solid rgba(255,255,255,.28);
  border-bottom:1px solid rgba(255,255,255,.28);
}
.pitch__item{background:var(--red);padding:26px 22px 28px}
.pitch__item:nth-child(2){transition-delay:.07s}
.pitch__item:nth-child(3){transition-delay:.14s}
.pitch__item:nth-child(4){transition-delay:.21s}
.pitch__num{
  display:block;font-weight:800;font-size:clamp(30px,3.4vw,44px);
  line-height:1;letter-spacing:-.04em;color:var(--white);
}
.pitch__item b{
  display:block;margin:.7em 0 .35em;font-weight:700;font-size:15px;color:var(--white);
}
.pitch__item s{
  display:block;text-decoration:none;font-size:14px;line-height:1.5;
  color:rgba(255,255,255,.84);
}
.pitch__cta{margin-top:clamp(36px,5vw,56px)}
/* di atas merah, hijau WhatsApp jadi kurang menonjol - pakai putih */
.pitch__cta .btn--wa{background:var(--white);color:var(--wa-deep);margin-top:0}
.pitch__cta .btn--wa:hover{background:var(--paper);color:var(--wa-deep)}
.pitch__micro{
  margin:14px 0 0;font:400 13px/1.5 var(--sans);color:rgba(255,255,255,.82);
}

/* === PAKET === */
.pack{background:var(--paper-warm);padding:clamp(88px,13vh,160px) var(--gut)}
.pack__head{max-width:var(--maxw);margin:0 auto clamp(44px,6vw,72px)}
.pack__grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.pack__card{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--rule);border-radius:18px;
  padding:30px 28px 28px;
}
.pack__badge{
  position:absolute;top:-13px;left:28px;
  padding:7px 14px;border-radius:999px;
  font:700 11px/1 var(--sans);letter-spacing:.04em;
  color:var(--white);background:var(--red);
}
.pack__sub{
  margin:0 0 20px;font-size:14px;line-height:1.5;color:var(--ink-soft);
}
.pack__price span{font-size:.7em;vertical-align:.15em;margin-left:1px}
.pack__card:nth-child(2){transition-delay:.08s}
.pack__card:nth-child(3){transition-delay:.16s}
.pack__card--lead{border-color:var(--red);box-shadow:0 18px 44px rgba(189,21,34,.11)}
.pack__tag{
  margin:0;font:500 10px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);
}
.pack__card h3{
  margin:.7em 0 .1em;font-weight:800;font-size:clamp(26px,2.8vw,34px);
  letter-spacing:-.03em;line-height:1;
}
.pack__price{
  margin:.3em 0 .5em;font-weight:800;font-size:clamp(22px,2.4vw,28px);
  letter-spacing:-.03em;color:var(--red);
}
.pack__list{list-style:none;margin:0 0 26px;padding:0;flex:1}
.pack__list li{
  position:relative;padding-left:22px;margin-bottom:9px;
  font-size:15px;line-height:1.5;color:var(--ink-soft);
}
.pack__list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:9px;height:2px;background:var(--red);
}
.pack__cta{
  align-self:stretch;text-align:center;text-decoration:none;
  font:600 14px/1 var(--sans);padding:16px 22px;border-radius:999px;
  color:var(--red);border:1px solid var(--red);
  transition:background .3s,color .3s;
}
.pack__cta:hover{background:var(--red);color:var(--white)}
.pack__card--lead .pack__cta{background:var(--red);color:var(--white)}
.pack__card--lead .pack__cta:hover{background:var(--red-deep);border-color:var(--red-deep)}
.pack__note{
  max-width:var(--maxw);margin:26px auto 0;
  font:400 13px/1.5 var(--sans);color:var(--ink-soft);
}

/* === CARA GABUNG === */
.rite{padding:clamp(88px,13vh,160px) var(--gut)}
.rite__head{max-width:var(--maxw);margin:0 auto clamp(48px,7vw,88px)}
.rite__list{
  list-style:none;max-width:var(--maxw);margin:0 auto;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.rite__step{background:var(--paper);padding:30px 26px 34px}
.rite__step:nth-child(2){transition-delay:.08s}
.rite__step:nth-child(3){transition-delay:.16s}
.rite__step:nth-child(4){transition-delay:.24s}
.rite__n{
  display:block;font:500 11px/1 var(--mono);letter-spacing:.2em;color:var(--red);
}
.rite__step h3{
  margin:.6em 0 .45em;font-weight:800;
  font-size:clamp(21px,2.2vw,27px);line-height:1.05;letter-spacing:-.028em;
}
.rite__step p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}

/* === FORM LEADS === */
.lead{
  background:var(--navy);color:var(--paper);
  padding:clamp(88px,13vh,160px) var(--gut);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);
  align-items:start;
}
.lead__intro{max-width:46ch}
.lead .h-display em{color:var(--orange)}
.lead .lede{color:rgba(253,251,249,.76)}
.lead__direct{
  margin:26px 0 0;font-size:15px;color:rgba(253,251,249,.76);
}
/* inline, but it is a primary conversion path - give it a real tap target */
.lead__direct a{
  display:inline-block;padding:4px 0;
  color:var(--white);font-weight:700;text-decoration:none;
  border-bottom:2px solid var(--orange);
}

.form{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  background:var(--white);border-radius:20px;padding:clamp(24px,3vw,34px);
}
.field{display:flex;flex-direction:column;gap:7px}
.field--wide,.form__foot,.form__blocked{grid-column:1/-1}
.field label{
  font:600 12px/1 var(--sans);letter-spacing:.01em;color:var(--navy);
}
.field__opt{font-weight:400;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  width:100%;font:400 15px/1.4 var(--sans);color:var(--navy);
  padding:13px 14px;background:var(--paper);
  border:1px solid var(--rule);border-radius:11px;
  transition:border-color .25s,background .25s;
}
.field textarea{resize:vertical;min-height:84px}
.field input::placeholder,.field textarea::placeholder{color:rgba(31,35,72,.42)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--red);background:var(--white);outline:none;
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--red);outline-offset:1px;
}
.field.is-bad input,.field.is-bad textarea{border-color:var(--red);background:#FDF3F4}
.field__err{
  margin:0;font:500 12px/1.35 var(--sans);color:var(--red-deep);
}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:2px}
.form__foot .btn{margin-top:0}
/* WhatsApp green, darkened until white type clears AA (5.3:1) */
.btn--wa{background:var(--wa)}
.btn--wa:hover{background:var(--wa-deep)}
.form__note{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
.form__blocked{
  margin:0;padding:12px 14px;border-radius:11px;
  background:#FDF3F4;color:var(--red-deep);font-size:14px;
}
.form__blocked a{font-weight:700}

/* === FOOT === */
.foot{
  background:var(--navy-deep);color:var(--paper);
  padding:clamp(72px,10vh,120px) var(--gut) 40px;
}
.foot__top{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(36px,6vw,80px);
}
.foot__tag{
  margin:20px 0 0;max-width:32ch;font-size:15px;line-height:1.6;
  color:rgba(253,251,249,.72);
}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.foot__cols a,.foot__addr{
  display:block;margin-top:8px;padding:3px 0;
  font-size:14.5px;line-height:1.6;font-style:normal;
  text-decoration:none;color:rgba(253,251,249,.76);transition:color .3s;
}
.foot__cols a:hover{color:var(--white)}
.foot__fine{
  max-width:var(--maxw);margin:clamp(52px,8vw,90px) auto 0;padding-top:20px;
  border-top:1px solid var(--rule-dark);
  font:400 11px/1.6 var(--mono);letter-spacing:.1em;
  color:rgba(253,251,249,.58);
}

/* === WHATSAPP FAB === */
.wafab{
  position:fixed;right:20px;bottom:20px;z-index:70;
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 18px;border-radius:999px;text-decoration:none;
  font:600 13px/1 var(--sans);color:var(--white);background:var(--wa);
  box-shadow:0 10px 26px rgba(14,124,63,.34);
  transition:background .3s,transform .3s;
}
.wafab:hover{background:var(--wa-deep);transform:translateY(-2px)}

/* === RESPONSIVE === */
@media (max-width:1100px){
  :root{--pin:400vh}
  .rite__list{grid-template-columns:repeat(2,1fr)}
  .pitch__grid{grid-template-columns:repeat(2,1fr)}
  .pack__grid{grid-template-columns:1fr;max-width:560px}
  .lead{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr}
}

@media (max-width:860px){
  .anno__row{left:auto;right:var(--gut);max-width:32ch}
  .card{max-width:30ch}
  .nav__links{display:none}
}

@media (max-width:760px){
  :root{--pin:340vh}
  .stage__word span{letter-spacing:.3em;text-indent:.3em}
  .split__l,.split__r{top:auto;transform:translate(var(--tx,0),0);font-size:clamp(30px,10vw,50px)}
  .split__l{top:13vh}
  .split__r{bottom:27vh;top:auto}
  .intro{right:var(--gut);bottom:70px;max-width:none}
  .intro__body{font-size:14px}
  .anno{top:auto;height:auto;inset:auto 0 20vh 0}
  .anno__row{position:static;left:auto;right:auto;max-width:none;padding:0 var(--gut);margin-bottom:9px}
  .anno__row i{display:none}
  .anno__row s{margin-left:0;font-size:14px}
  .card{right:var(--gut);left:var(--gut);top:auto;bottom:9vh;transform:translate(var(--tx,0),0);max-width:none}
  .spec__row{grid-template-columns:1fr;gap:5px}
  .spec__num{text-align:left}
  .rite__list{grid-template-columns:1fr}
  .pitch__grid{grid-template-columns:1fr}
  .pitch__cta .btn--wa{width:100%;justify-content:center}
  .form{grid-template-columns:1fr}
  .form__foot .btn{width:100%;justify-content:center}
  .foot__cols{grid-template-columns:1fr;gap:26px}
  :root{--logo-nav:44px;--logo-foot:76px;--logo-boot:104px}
  .wafab span{display:none}
  .wafab{padding:15px;right:14px;bottom:14px}
  .nav{padding:12px var(--gut)}
  /* keep the hero readout clear of the floating WhatsApp button */
  .hud{right:82px}
  .hint{display:none}
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion:reduce){
  :root{--pin:100vh}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal,.js-reveal .reveal{opacity:1;transform:none}
  .stage{position:relative;height:auto;min-height:100vh;padding:110px 0 50px}
  .stage__word{display:none}
  .split__l,.split__r{position:static;opacity:1;transform:none;padding:0 var(--gut);text-align:left}
  .intro,.card{position:static;transform:none;opacity:1;max-width:52ch;padding:0 var(--gut);margin-top:28px}
  .anno{position:static}
  .anno__row{position:static;max-width:none;padding:0 var(--gut);margin-top:9px}
  .anno__row i{display:none}
  .anno__row b,.anno__row s{opacity:1;margin-left:0}
  .hud,.hint{display:none}
}