/* ============================================================
   Syndicate Inner Circle — landing
   Palette sampled from the Syndicate brand file.
   Lime #CCFF00 · Signal green #04FE07 · Ink #FFFFFF
   ============================================================ */

:root{
  --black:#050506;
  --bg-2:#0A0B0C;
  --card:#131519;
  --card-2:#1A1D22;
  --line:rgba(255,255,255,.10);
  --line-lime:rgba(204,255,0,.22);

  --ink:#FFFFFF;
  --ink-2:rgba(255,255,255,.88);

  --lime:#CCFF00;
  --lime-soft:#E4FF6A;
  --green:#04FE07;

  --display:"Archivo","Arial Black",system-ui,sans-serif;
  --body:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1220px;
  --pad:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--black);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(15.5px,1.08vw,17.5px);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* height:auto is load-bearing. width/height attributes map to presentational
   hints; where CSS overrides only the width, the height hint would force fixed
   pixels and squash the image. */
img{max-width:100%;display:block;height:auto}
a{color:inherit}

/* ---------- overlays ---------- */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  background-image:url("assets/grunge.e3ae7b4b.jpg");
  background-size:600px;opacity:.05;mix-blend-mode:screen;
}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;pointer-events:none}
.progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--green),var(--lime));
  box-shadow:0 0 14px rgba(204,255,0,.7);
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}
.wrap--narrow{max-width:840px}
.section{position:relative;padding:clamp(78px,11vw,158px) 0;overflow:hidden}
/* Texture down the sides, clean through the reading column. Same trick as the
   light section, applied to every dark one. */
.section:not(.section--light)::after,
.circle-sec::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  /* the same paper speckle as the light section, inverted so the specks are
     light-on-dark; a dark texture in screen mode over a dark page adds nothing */
  background-image:url("assets/paper.65f1efb4.jpg");
  background-size:640px;background-repeat:repeat;
  filter:invert(1);opacity:.42;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 7%,transparent 25%,transparent 75%,#000 93%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 7%,transparent 25%,transparent 75%,#000 93%,#000 100%);
}
@media(max-width:940px){
  .section:not(.section--light)::after,.circle-sec::after{
    -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 18%,transparent 82%,#000 100%);
    mask-image:linear-gradient(90deg,#000 0%,transparent 18%,transparent 82%,#000 100%);
  }
}
.section--alt{
  background:var(--bg-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-weight:600;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lime);margin:0 0 20px;
}
.kicker b{
  font-weight:700;color:#000;background:var(--lime);
  padding:3px 8px;border-radius:3px;letter-spacing:.06em;
}
.h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 800;
  font-size:clamp(34px,5.4vw,64px);
  line-height:1.0;letter-spacing:-.025em;
  margin:0 0 30px;color:var(--ink);
}
.section__lede{
  max-width:64ch;color:var(--ink-2);
  font-size:clamp(16.5px,1.5vw,19.5px);margin:0 0 clamp(38px,5vw,62px);
}
.lead{font-size:clamp(17.5px,1.7vw,21.5px);line-height:1.5}
.accent{color:var(--lime)}
.swipe-hint{display:none}
/* inline emphasis inside body copy */
p em{font-style:normal;background:var(--lime);color:#000;padding:.02em .24em;font-weight:700;box-decoration-break:clone;-webkit-box-decoration-break:clone}
p strong{font-weight:700;color:var(--ink)}
.section--light p em{color:#0A0A0A;background:var(--lime);padding:0 .22em;font-weight:700}
.section--light p strong{color:#08080A}

/* split-text reveal */
.split .word{display:inline-block;overflow:hidden;vertical-align:top}
.split .word i{display:inline-block;font-style:normal;transform:translateY(105%);transition:transform .95s cubic-bezier(.22,.75,.28,1)}
.split.is-in .word i{transform:none}

/* ---------- notched shape helper ---------- */
@mixin-notch{}
.notch,.btn,.card,.quote,.perk,.pullquote{
  --n:16px;
  -webkit-mask:
    radial-gradient(var(--n) at 0 0,#0000 98%,#000) 0 0/51% 51% no-repeat,
    radial-gradient(var(--n) at 100% 0,#0000 98%,#000) 100% 0/51% 51% no-repeat,
    radial-gradient(var(--n) at 0 100%,#0000 98%,#000) 0 100%/51% 51% no-repeat,
    radial-gradient(var(--n) at 100% 100%,#0000 98%,#000) 100% 100%/51% 51% no-repeat;
  mask:
    radial-gradient(var(--n) at 0 0,#0000 98%,#000) 0 0/51% 51% no-repeat,
    radial-gradient(var(--n) at 100% 0,#0000 98%,#000) 100% 0/51% 51% no-repeat,
    radial-gradient(var(--n) at 0 100%,#0000 98%,#000) 0 100%/51% 51% no-repeat,
    radial-gradient(var(--n) at 100% 100%,#0000 98%,#000) 100% 100%/51% 51% no-repeat;
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:24px;padding:15px var(--pad);
  transition:background .35s,border-color .35s,backdrop-filter .35s,padding .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(5,5,6,.78);backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:var(--line);padding-top:11px;padding-bottom:11px;
}
.nav__brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav__seal{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 10px;border:1.5px solid var(--lime);border-radius:9px;
  box-shadow:0 0 16px rgba(204,255,0,.16);
}
.nav__seal .seal__a,.nav__seal .seal__b{
  font-family:var(--display);font-variation-settings:"wdth" 116,"wght" 900;
  font-size:12px;padding:.1em .26em;letter-spacing:-.01em;line-height:1;
}
.nav__seal .seal__a{color:var(--lime);background:none}
.nav__seal .seal__b{background:var(--lime);color:#000}
.nav__brand span{
  font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 600;
  font-size:14.5px;letter-spacing:.01em;color:var(--ink);
}
.nav__links{display:flex;gap:26px;margin-left:auto}
.nav__links a{
  text-decoration:none;font-size:13.5px;font-weight:500;color:var(--ink);
  opacity:.82;transition:opacity .2s,color .2s;
}
.nav__links a:hover{opacity:1;color:var(--lime)}
@media(max-width:980px){.nav__links{display:none}.nav__brand{margin-right:auto}}

/* ---------- buttons ---------- */
.btn{
  --n:11px;
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:17px 30px;background:var(--lime);color:#000;
  font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 800;
  font-size:15px;letter-spacing:.005em;text-decoration:none;border:0;cursor:pointer;
  filter:drop-shadow(0 8px 22px rgba(204,255,0,.22));
  transition:transform .22s cubic-bezier(.2,.8,.3,1),background .2s,filter .3s,color .2s,box-shadow .25s;
  will-change:transform;
}
/* chevron, drawn from borders so it needs no icon font */
.btn::after{
  content:"";width:8px;height:8px;flex:none;
  border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;
  rotate:45deg;translate:0 0;
  transition:translate .26s cubic-bezier(.2,.8,.3,1);
}
.btn:hover::after{translate:5px 0}
.btn:hover{background:var(--lime-soft);filter:drop-shadow(0 12px 34px rgba(204,255,0,.45))}
.btn:active{transform:translateY(1px)}

.btn--sm{padding:11px 20px;font-size:13.5px;gap:9px}
.btn--sm::after{width:7px;height:7px;border-width:2.2px}
.btn--lg{padding:20px 38px;font-size:16.5px}

.btn--ghost{
  background:transparent;color:var(--lime);
  box-shadow:inset 0 0 0 2px var(--lime);
  filter:none;
}
.btn--ghost:hover{background:var(--lime);color:#000;filter:drop-shadow(0 12px 34px rgba(204,255,0,.4))}

/* ---------- tag ---------- */
.tag{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px 7px 12px;margin-bottom:26px;
  border:1px solid var(--line-lime);border-radius:999px;
  background:rgba(204,255,0,.05);
  font-size:12.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:120px 0 0;overflow:hidden;
}
.hero__glow{
  position:absolute;left:66%;top:44%;translate:-50% -50%;
  width:min(940px,115vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(204,255,0,.22),rgba(4,254,7,.06) 40%,transparent 68%);
  filter:blur(30px);pointer-events:none;
}
.hero__tex{
  position:absolute;inset:0;pointer-events:none;
  background-image:url("assets/grunge.e3ae7b4b.jpg");
  background-size:820px;opacity:.16;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 95% 80% at 55% 45%,#000,transparent 82%);
  mask-image:radial-gradient(ellipse 95% 80% at 55% 45%,#000,transparent 82%);
}
.hero__inner{
  position:relative;z-index:2;width:100%;max-width:var(--wrap);
  margin:auto;padding:clamp(20px,4vh,56px) var(--pad);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  align-items:center;gap:clamp(20px,3vw,44px);
}
.hero__stage{position:relative;display:flex;justify-content:center;align-items:center}
.hero__ring{
  position:absolute;width:min(98%,450px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(204,255,0,.16);
  animation:spin 46s linear infinite;
}
.hero__ring::after{
  content:"";position:absolute;top:-4px;left:50%;translate:-50% 0;
  width:7px;height:7px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 14px var(--lime);
}
.hero__ring--2{width:min(74%,320px);border-color:rgba(4,254,7,.16);animation-duration:32s;animation-direction:reverse}
.hero__ring--2::after{background:var(--green);box-shadow:0 0 14px var(--green)}
@keyframes spin{to{rotate:360deg}}
.hero__art{
  position:relative;width:auto;max-width:82%;
  height:min(46vh,360px);object-fit:contain;
  mix-blend-mode:screen;
  pointer-events:none;user-select:none;will-change:transform;
  animation:float 13s ease-in-out infinite;
  filter:drop-shadow(0 30px 60px rgba(204,255,0,.18));
}
@keyframes float{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-22px,0) rotate(-2.2deg)}}
@media(max-width:940px){
  .hero__inner{grid-template-columns:1fr}
  .hero__stage{order:-1;margin-bottom:-6%}
  .hero__art{height:min(30vh,240px);max-width:60%}
  .hero__ring{width:min(74%,290px)}
  .hero__ring--2{width:min(54%,210px)}
  .hero__glow{left:50%;top:28%}
}

/* the signature two-tone lockup */
.lockup{font-family:var(--display);line-height:.9;letter-spacing:-.032em;margin:0 0 30px}
.lockup__top{
  display:block;color:var(--ink);
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(30px,5.1vw,60px);margin-bottom:.11em;padding-left:.03em;
}
.lockup__row{display:flex;flex-wrap:wrap;align-items:center;gap:.07em;font-size:clamp(30px,5.1vw,62px)}
.lockup__a,.lockup__b{display:inline-block;padding:.07em .15em .11em;font-variation-settings:"wdth" 118,"wght" 900}
.lockup__a{background:#15181C;color:var(--lime)}
.lockup__b{background:var(--lime);color:#000;box-shadow:0 0 44px rgba(204,255,0,.28)}

.hero__lede{font-size:clamp(18px,2vw,25px);line-height:1.34;max-width:25ch;margin:0 0 16px;color:var(--ink)}
.hero__sub{max-width:52ch;color:var(--ink-2);margin:0 0 36px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- ticker ---------- */
.ticker{
  position:relative;z-index:2;margin-top:auto;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(10,11,12,.6);padding:15px 0;
}
.ticker__row{
  display:flex;align-items:center;gap:24px;width:max-content;
  animation:slide 40s linear infinite;
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 700;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.ticker__row i{width:5px;height:5px;background:var(--lime);flex:none;rotate:45deg}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- story ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px)}
.story__col p{margin:0 0 20px;color:var(--ink-2)}
@media(max-width:840px){.story{grid-template-columns:1fr}}

/* ---------- avatars ---------- */
.av{
  border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 2px rgba(204,255,0,.35),0 4px 14px rgba(0,0,0,.5);
  background:#222;
}
.av--sm{width:38px;height:38px}
.av--lg{width:78px;height:78px;box-shadow:0 0 0 3px rgba(4,254,7,.4),0 6px 22px rgba(0,0,0,.6)}
.av--ph{
  display:grid;place-items:center;font-family:var(--display);
  font-variation-settings:"wght" 800;font-size:15px;color:#000;background:var(--lime);
}

/* ---------- section motifs ----------
   One large low-contrast graphic per block, all from the brand file.
   Dark sections get an inverted white silhouette, the light section a dark one. */
.motif{
  position:absolute;pointer-events:none;user-select:none;z-index:0;
  opacity:.08;will-change:transform;
}
/* ring.png and burst.png ship as white art, circle.png as black. Invert only
   what needs it for the surface it sits on. */
.motif--right{right:-5%;top:9%;width:min(400px,40vw)}
.motif--left{left:-8%;top:16%;width:min(500px,46vw);rotate:-14deg}
.motif--people{right:-10%;top:6%;width:min(700px,66vw);filter:invert(1);opacity:.07}
.motif--keys{right:-6%;bottom:5%;width:min(540px,50vw);opacity:.16;rotate:-8deg;filter:grayscale(1) brightness(1.5)}
.motif--door{left:-7%;top:14%;width:min(400px,42vw);opacity:.22;mix-blend-mode:screen}
.motif--ring2{left:-7%;bottom:3%;width:min(360px,38vw);rotate:18deg}
.motif--dark{filter:invert(1);opacity:.10}
@media(max-width:760px){.motif{opacity:.05}.motif--keys,.motif--door{opacity:.12}}

/* ---------- people cards ---------- */
/* The four cards share one set of row tracks, so Then and Now line up across all
   of them however long the copy is. Each card spans the three rows as a subgrid. */
.cards{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;margin-bottom:clamp(46px,6vw,74px);align-items:stretch;
}
@media(max-width:1060px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.cards{grid-template-columns:1fr}}
.card{
  grid-row:span 3;
  display:grid;grid-template-rows:subgrid;row-gap:0;
  background:var(--card);padding:24px 22px 26px;
  border-top:2px solid var(--lime);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background .3s,box-shadow .3s;
  will-change:transform;
}
.card::before,.quote::before,.perk::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("assets/paper.65f1efb4.jpg");background-size:420px;
  filter:invert(1);opacity:.3;mix-blend-mode:screen;
}
.card > *,.quote > *,.perk > *{position:relative;z-index:1}
.card:hover{background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line-lime)}
.card__top{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.card__x{
  margin-left:auto;flex:none;display:grid;place-items:center;
  width:34px;height:34px;border-radius:9px;
  color:var(--lime);background:rgba(204,255,0,.07);
  box-shadow:inset 0 0 0 1.5px rgba(204,255,0,.45);
  transition:color .2s,box-shadow .2s,transform .2s,background .2s;
}
.card__x:hover{color:#000;background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--lime),0 6px 18px rgba(204,255,0,.35);transform:translateY(-2px)}
.card__handle{
  font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 800;
  font-size:17px;margin:0;color:var(--ink);line-height:1.15;
}
.card__then,.card__now{margin:0 0 12px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.card__then span,.card__now span{
  display:block;font-family:var(--display);font-variation-settings:"wght" 700;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:4px;
}
.card__then span{color:rgba(255,255,255,.45)}
.card__now span{color:var(--green)}
.card__now{color:var(--ink)}

/* ---------- pullquote ---------- */
.pullquote{
  --n:20px;
  display:flex;gap:clamp(18px,3vw,34px);align-items:flex-start;
  margin:0;padding:clamp(28px,4vw,46px);
  background:linear-gradient(135deg,#141A0C,#0F1114);
  box-shadow:inset 0 0 0 1px var(--line-lime);
}
.pullquote__body{position:relative}
.pullquote__body::before{
  content:"\201C";
  position:absolute;left:-.06em;top:-.44em;
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 900;
  font-size:clamp(88px,11vw,150px);line-height:1;
  color:var(--lime);opacity:.16;pointer-events:none;user-select:none;
}
.pullquote p{position:relative;margin:0 0 18px;font-size:clamp(17px,1.85vw,22px);line-height:1.45;color:var(--ink)}
.pullquote cite{
  font-family:var(--display);font-style:normal;font-variation-settings:"wght" 700;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);
}
@media(max-width:640px){.pullquote{flex-direction:column}}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
@media(max-width:1060px){.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.quotes{grid-template-columns:1fr}}
.quote{
  display:flex;flex-direction:column;
  margin:0;background:var(--card);padding:26px 24px;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background .3s,box-shadow .3s;will-change:transform;
}
.quote:hover{background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line-lime)}
.quote blockquote{flex:1;margin:0 0 20px;font-size:15.5px;line-height:1.6;color:var(--ink)}
.quote figcaption{display:flex;align-items:center;gap:11px}
.quote figcaption img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(204,255,0,.3)}
.quote__x{
  margin-left:auto;flex:none;display:grid;place-items:center;
  width:30px;height:30px;border-radius:8px;
  color:var(--lime);background:rgba(204,255,0,.07);
  box-shadow:inset 0 0 0 1.5px rgba(204,255,0,.4);
  transition:color .2s,box-shadow .2s,transform .2s,background .2s;
}
.quote__x:hover{color:#000;background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--lime);transform:translateY(-2px)}
.quote figcaption span{
  font-family:var(--display);font-variation-settings:"wght" 700;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);
}

/* ---------- perks ---------- */
.perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
@media(max-width:1060px){.perks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.perks{grid-template-columns:1fr}}
.perk{
  background:var(--card);padding:26px 24px 28px;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background .3s,box-shadow .3s;will-change:transform;
}
.perk:hover{background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line-lime)}
.perk--hero{
  grid-column:span 2;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1A2207,#0F1114 62%);
  box-shadow:inset 0 0 0 1px var(--line-lime);
}
.perk__art{
  position:absolute;right:-8%;bottom:-28%;width:230px;
  opacity:.5;mix-blend-mode:screen;pointer-events:none;
}
@media(max-width:1060px){.perk--hero{grid-column:span 2}}
@media(max-width:640px){.perk--hero{grid-column:span 1}.perk__art{display:none}}
.perk__icon{
  width:46px;height:46px;margin:0 0 16px;
  opacity:.9;
  transition:transform .4s cubic-bezier(.2,.8,.3,1),opacity .3s,filter .3s;
}
.perk:hover .perk__icon{
  transform:translateY(-3px) scale(1.06);opacity:1;
  filter:drop-shadow(0 6px 18px rgba(204,255,0,.4));
}
.perk--hero .perk__icon{width:58px;height:58px;position:relative;z-index:1}
.perk h3{
  font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 800;
  font-size:17px;margin:0 0 12px;color:var(--lime);
}
.perk--hero h3{font-size:clamp(20px,2.4vw,27px)}
.perk p{margin:0;font-size:14.8px;line-height:1.6;color:var(--ink-2)}
.perk--hero p{font-size:16.5px;color:var(--ink);max-width:52ch;position:relative;z-index:1}

/* ---------- light section ---------- */
.section--light{
  background:#EFEFE9;color:#08080A;
  border-top:1px solid #000;border-bottom:1px solid #000;
}
/* Texture only along the edges. Behind the column where the text sits it is
   masked out, otherwise the speckle fights the copy. */
.section--light::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("assets/paper.65f1efb4.jpg");
  background-size:760px;background-repeat:repeat;
  opacity:.8;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 8%,transparent 26%,transparent 74%,#000 92%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 8%,transparent 26%,transparent 74%,#000 92%,#000 100%);
}
@media(max-width:940px){
  .section--light::before{
    -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 18%,transparent 82%,#000 100%);
    mask-image:linear-gradient(90deg,#000 0%,transparent 18%,transparent 82%,#000 100%);
  }
}
.section--light .kicker{color:#08080A}
.section--light .h2{color:#08080A}
.section--light .section__lede{color:#2E2E2C}

/* the handbook feature: dark artwork against the light section */
.method{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,52px);align-items:center;
  margin:0 0 clamp(48px,7vw,86px);
}
@media(max-width:940px){.method{grid-template-columns:1fr}}
.method__visual{
  --n:20px;margin:0;overflow:hidden;background:#050506;
  box-shadow:0 26px 60px rgba(0,0,0,.42);
  -webkit-mask:
    radial-gradient(var(--n) at 0 0,#0000 98%,#000) 0 0/51% 51% no-repeat,
    radial-gradient(var(--n) at 100% 0,#0000 98%,#000) 100% 0/51% 51% no-repeat,
    radial-gradient(var(--n) at 0 100%,#0000 98%,#000) 0 100%/51% 51% no-repeat,
    radial-gradient(var(--n) at 100% 100%,#0000 98%,#000) 100% 100%/51% 51% no-repeat;
  mask:
    radial-gradient(var(--n) at 0 0,#0000 98%,#000) 0 0/51% 51% no-repeat,
    radial-gradient(var(--n) at 100% 0,#0000 98%,#000) 100% 0/51% 51% no-repeat,
    radial-gradient(var(--n) at 0 100%,#0000 98%,#000) 0 100%/51% 51% no-repeat,
    radial-gradient(var(--n) at 100% 100%,#0000 98%,#000) 100% 100%/51% 51% no-repeat;
}
.method__visual img{
  width:100%;transition:transform .8s cubic-bezier(.2,.8,.3,1);
}
.method__visual:hover img{transform:scale(1.04)}
.method__body h3{
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;
  font-size:clamp(22px,2.7vw,32px);margin:0 0 16px;color:#08080A;
}
.method__body p{margin:0 0 16px;color:#2E2E2C;max-width:52ch}
.method__label{
  margin:26px 0 12px !important;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#6A6A64 !important;
}
.tracks{
  list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;margin:0;padding:0;border-top:1px solid rgba(0,0,0,.2);
}
@media(max-width:640px){.tracks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tracks li{
  padding:14px 0 0;background:none;color:#08080A;
  border-top:3px solid #08080A;margin-top:-1px;
}
.tracks b{
  display:block;font-family:var(--display);
  font-variation-settings:"wdth" 108,"wght" 800;
  font-size:15px;line-height:1.15;color:#08080A;margin-bottom:2px;
}
.tracks span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8A8A82}

/* Dense two-column index. Thirteen titles used to eat a whole screen. */
.drops{
  list-style:none;margin:0 0 30px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(20px,3vw,44px);
  border-top:1px solid rgba(0,0,0,.16);
}
@media(max-width:820px){.drops{grid-template-columns:1fr}}
.drops li{
  display:flex;align-items:baseline;gap:12px;
  padding:10px 10px;border-bottom:1px solid rgba(0,0,0,.12);
  transition:padding-left .28s cubic-bezier(.2,.8,.3,1),background .22s;
}
.drops li em{
  font-style:normal;font-weight:500;
  font-size:clamp(14px,1.15vw,15.5px);line-height:1.4;color:#18181A;
}
.drops li span{
  font-family:var(--display);font-variation-settings:"wght" 800;
  font-size:10.5px;letter-spacing:.08em;color:#A6A69E;flex:none;width:20px;
}
.drops li:hover{padding-left:18px;background:var(--lime)}
.drops li:hover span{color:#08080A}
.drops li:hover em{color:#08080A}
.drops__note{color:#2E2E2C;margin:0;max-width:58ch}

/* ---------- entry ---------- */
.section--entry{background:var(--bg-2);border-top:1px solid var(--line)}
.entry__cta{margin-top:clamp(34px,4vw,48px)}

.steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{
  --n:16px;position:relative;overflow:hidden;
  background:linear-gradient(165deg,#191D12,#131519 55%);
  padding:30px 26px 34px;
  border-top:2px solid var(--lime);
  box-shadow:inset 0 0 0 1px var(--line-lime);
  transition:background .3s,box-shadow .3s;will-change:transform;
  -webkit-mask:
    radial-gradient(var(--n) at 0 0,#0000 98%,#000) 0 0/51% 51% no-repeat,
    radial-gradient(var(--n) at 100% 0,#0000 98%,#000) 100% 0/51% 51% no-repeat,
    radial-gradient(var(--n) at 0 100%,#0000 98%,#000) 0 100%/51% 51% no-repeat,
    radial-gradient(var(--n) at 100% 100%,#0000 98%,#000) 100% 100%/51% 51% no-repeat;
  mask:
    radial-gradient(var(--n) at 0 0,#0000 98%,#000) 0 0/51% 51% no-repeat,
    radial-gradient(var(--n) at 100% 0,#0000 98%,#000) 100% 0/51% 51% no-repeat,
    radial-gradient(var(--n) at 0 100%,#0000 98%,#000) 0 100%/51% 51% no-repeat,
    radial-gradient(var(--n) at 100% 100%,#0000 98%,#000) 100% 100%/51% 51% no-repeat;
}
/* oversized ghost numeral bled into the corner */
.step::before{
  content:attr(data-n);position:absolute;right:-.08em;bottom:-.34em;
  font-family:var(--display);font-variation-settings:"wdth" 120,"wght" 900;
  font-size:clamp(96px,11vw,150px);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(204,255,0,.14);
  pointer-events:none;
}
.step:hover{background:linear-gradient(165deg,#20260F,#171A20 55%);box-shadow:inset 0 0 0 1px rgba(204,255,0,.45)}
.step__icon{
  width:44px;height:44px;margin-bottom:16px;opacity:.92;position:relative;z-index:1;
  transition:transform .4s cubic-bezier(.2,.8,.3,1),filter .3s;
}
.step:hover .step__icon{transform:translateY(-3px) scale(1.06);filter:drop-shadow(0 6px 18px rgba(204,255,0,.4))}
.step__n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:32px;padding:0 12px;margin-bottom:18px;
  background:var(--lime);color:#000;border-radius:6px;
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 900;
  font-size:16px;letter-spacing:.02em;position:relative;z-index:1;
}
.step h3{position:relative;z-index:1;
  font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 800;
  font-size:clamp(19px,2.1vw,24px);margin:0 0 10px;color:var(--ink);
}
.step p{position:relative;z-index:1;margin:0;color:var(--ink-2);font-size:15px;line-height:1.55}

/* ---------- farming season ---------- */
.section--season{background:var(--bg-2);border-top:1px solid var(--line)}
.motif--season{right:-9%;top:10%;width:min(460px,44vw);rotate:12deg}

/* This section runs tighter under its lede than the rest of the page: the lede is
   a single line of setup, not a section opener, so the usual 62px reads as a hole.
   Both margins are set because adjacent siblings collapse to the larger of the two,
   and lowering only one changes nothing. */
.section--season .section__lede{margin-bottom:clamp(20px,2.2vw,26px)}
.season{
  display:grid;grid-template-columns:1.35fr 1fr;
  gap:clamp(26px,4vw,56px);align-items:start;
  margin-top:clamp(20px,2.2vw,26px);
}
@media(max-width:920px){.season{grid-template-columns:1fr}}
.season__body p{margin:0 0 20px;color:var(--ink-2);font-size:clamp(15.5px,1.7vw,18px);line-height:1.62}
.season__cta{margin-top:clamp(24px,3vw,34px)}

.season__card{
  --n:16px;position:relative;overflow:hidden;
  background:linear-gradient(165deg,#191D12,#131519 55%);
  padding:28px 26px 24px;
  border-top:2px solid var(--lime);
  box-shadow:inset 0 0 0 1px var(--line-lime);
  will-change:transform;
  -webkit-mask:
    radial-gradient(var(--n) at 0 0,#0000 98%,#000) 0 0/51% 51% no-repeat,
    radial-gradient(var(--n) at 100% 0,#0000 98%,#000) 100% 0/51% 51% no-repeat,
    radial-gradient(var(--n) at 0 100%,#0000 98%,#000) 0 100%/51% 51% no-repeat,
    radial-gradient(var(--n) at 100% 100%,#0000 98%,#000) 100% 100%/51% 51% no-repeat;
  mask:
    radial-gradient(var(--n) at 0 0,#0000 98%,#000) 0 0/51% 51% no-repeat,
    radial-gradient(var(--n) at 100% 0,#0000 98%,#000) 100% 0/51% 51% no-repeat,
    radial-gradient(var(--n) at 0 100%,#0000 98%,#000) 0 100%/51% 51% no-repeat,
    radial-gradient(var(--n) at 100% 100%,#0000 98%,#000) 100% 100%/51% 51% no-repeat;
}
.season__label{
  margin:0 0 16px;font-family:var(--display);
  font-variation-settings:"wdth" 110,"wght" 800;
  font-size:clamp(18px,2vw,22px);color:var(--ink);
}
/* the ten badges of a season, as they are actually split: eight earned by
   working a drop, two granted by an elder. Decorative — the same split is
   spelled out in the legend and the prose above. */
.season__pips{
  list-style:none;margin:0 0 12px;padding:0;
  display:grid;grid-template-columns:repeat(10,1fr);gap:6px;
}
.season__pips li{
  aspect-ratio:1;border-radius:3px;
  background:var(--lime);box-shadow:0 0 12px rgba(204,255,0,.3);
}
.season__pips li.is-bless{background:var(--green);box-shadow:0 0 12px rgba(4,254,7,.35)}
.season__legend{
  display:flex;flex-wrap:wrap;gap:16px;margin:0 0 22px;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.season__legend span{display:inline-flex;align-items:center;gap:7px}
.season__legend i{width:9px;height:9px;border-radius:2px;background:var(--lime);flex:none}
.season__legend i.is-bless{background:var(--green)}

.season__facts{margin:0;padding:18px 0 0;border-top:1px solid var(--line)}
.season__facts>div{display:flex;justify-content:space-between;gap:18px;padding:9px 0}
.season__facts>div+div{border-top:1px solid rgba(255,255,255,.05)}
.season__facts dt{
  flex:none;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.5);padding-top:2px;
}
.season__facts dd{margin:0;text-align:right;font-size:14.5px;line-height:1.4;color:var(--ink)}

/* The section carries a lot for one screen, so on a phone everything tightens at
   once: the gap between the two halves, the paragraph rhythm, the card padding
   and every row of the table. Stacking the label above the value was tried and
   reverted, since it doubles the height of the table for no gain once the values
   are short enough to hold their line. */
@media(max-width:920px){
  .season{gap:24px}
  .season__body p{margin-bottom:15px;font-size:15.5px;line-height:1.55}
  .season__cta{margin-top:22px}
  .season__card{padding:22px 20px 18px}
  .season__label{margin-bottom:13px}
  .season__pips{gap:5px;margin-bottom:10px}
  .season__legend{gap:14px;margin-bottom:16px;font-size:11px}
  .season__facts{padding-top:13px}
  .season__facts>div{padding:7px 0;gap:12px}
  .season__facts dt{font-size:11px;letter-spacing:.1em}
  .season__facts dd{font-size:13.5px}
}

/* On a phone the card is dropped rather than shrunk. Stacked under the copy it
   was a second screenful of small print for a section that is one idea, and the
   two things worth keeping from it (the pool and the split into small payouts)
   are already in the paragraph above. Tablets keep it: there it stacks and reads.
   If a fact here ever stops being duplicated in the prose, it stops being safe
   to hide, so check the copy before adding a row. */
@media(max-width:760px){
  .season__card{display:none}
}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:21px 36px 21px 0;position:relative;
  font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 700;
  font-size:clamp(15.5px,1.6vw,18.5px);color:var(--ink);transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--lime)}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--lime);border-bottom:2px solid var(--lime);
  translate:0 -60%;rotate:45deg;transition:rotate .28s ease;
}
.faq details[open] summary::after{rotate:-135deg}
.faq details p{margin:0;color:var(--ink-2);max-width:64ch}

/* Smooth open and close. Native <details> snaps, so the answer is wrapped in a
   grid whose row goes 0fr -> 1fr. JS holds `open` on until the close finishes. */
.faq__body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s cubic-bezier(.2,.8,.3,1);
}
.faq__body > div{overflow:hidden;min-height:0}
.faq__body p{
  opacity:0;translate:0 -6px;padding-bottom:0;
  transition:opacity .3s ease,translate .38s cubic-bezier(.2,.8,.3,1),padding-bottom .42s;
}
/* open is held on permanently by the script; `.is-collapsed` drives the state,
   which is what makes the FIRST open animate like every other one */
.faq details[open] .faq__body{grid-template-rows:1fr}
.faq details[open] .faq__body p{opacity:1;translate:0;padding-bottom:26px;transition-delay:.06s}
.faq details.is-collapsed .faq__body{grid-template-rows:0fr}
.faq details.is-collapsed .faq__body p{opacity:0;translate:0 -6px;padding-bottom:0;transition-delay:0s}
.faq details.is-collapsed summary::after{rotate:45deg}
.faq details[open] summary::after{rotate:-135deg}

/* ---------- the circle: member wall ---------- */
/* The closing block: the wall and the call to action are one section. */
.circle-sec{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(46px,6vw,84px) 0 clamp(74px,10vw,132px);
  background:var(--bg-2);border-top:1px solid var(--line);
}
.circle-sec__glow{
  position:absolute;left:50%;bottom:-26%;translate:-50% 0;
  width:min(1100px,130vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(204,255,0,.16),rgba(4,254,7,.04) 44%,transparent 66%);
  filter:blur(28px);pointer-events:none;
}
.circle-sec__cta{margin-top:clamp(26px,3.5vw,42px)}
.h2--center{text-align:center}
.section__lede--center{margin-left:auto;margin-right:auto;text-align:center}

.wall{position:relative;margin:clamp(26px,3.5vw,42px) 0 0;z-index:2}
.wall__row{display:flex;gap:12px;width:max-content;margin-bottom:12px;animation:wall 58s linear infinite}
.wall__row--rev{animation-direction:reverse;animation-duration:72s}
.wall__row:nth-child(3){animation-duration:64s}
@keyframes wall{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wall__row img{
  width:clamp(48px,5.4vw,72px);height:clamp(48px,5.4vw,72px);
  border-radius:50%;object-fit:cover;flex:none;
  filter:grayscale(1) contrast(.92);opacity:.55;
  box-shadow:0 0 0 1px rgba(255,255,255,.09);
  transition:filter .35s,opacity .35s,transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s;
}
.wall__row img:hover{
  filter:none;opacity:1;transform:scale(1.22);
  box-shadow:0 0 0 2px var(--lime),0 10px 26px rgba(0,0,0,.6);
}
.wall__fade{position:absolute;top:0;bottom:0;width:16%;pointer-events:none;z-index:3}
.wall__fade--l{left:0;background:linear-gradient(90deg,var(--bg-2),transparent)}
.wall__fade--r{right:0;background:linear-gradient(270deg,var(--bg-2),transparent)}
.wall:hover .wall__row{animation-play-state:paused}

/* ---------- button shine sweep ---------- */
.btn::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none;
}
.btn:hover::before{animation:shine .72s ease-out}
@keyframes shine{0%{left:-60%;opacity:.9}100%{left:120%;opacity:0}}
.btn--ghost::before{background:linear-gradient(100deg,transparent,rgba(204,255,0,.45),transparent)}

/* ---------- drops scroll highlight ---------- */
.drops li{transition:padding-left .3s cubic-bezier(.2,.8,.3,1),background .3s,color .3s}
.drops li.is-active{background:rgba(204,255,0,.5);padding-left:26px}
.drops li.is-active span{color:#08080A}

/* ---------- closing call to action (lives inside .circle-sec) ---------- */
.seal{
  display:inline-flex;align-items:center;gap:6px;
  padding:14px 26px;margin-bottom:30px;
  border:2px solid var(--lime);border-radius:16px;
  box-shadow:0 0 32px rgba(204,255,0,.2),inset 0 0 24px rgba(204,255,0,.06);
}
.seal__a,.seal__b{
  font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 900;
  font-size:clamp(15px,2vw,22px);padding:.12em .3em;letter-spacing:-.01em;
}
.seal__a{color:var(--lime)}
.seal__b{background:var(--lime);color:#000}
.cta__title{
  font-family:var(--display);font-variation-settings:"wdth" 120,"wght" 900;
  font-size:clamp(38px,7.2vw,94px);line-height:.92;letter-spacing:-.035em;
  margin:0 0 26px;color:var(--ink);
}
.cta__lede{color:var(--ink-2);margin:0 auto 12px;max-width:48ch}
.nb{white-space:nowrap}
.cta__buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}

/* ---------- footer ---------- */
.footer{background:#000;border-top:1px solid var(--line);padding:clamp(52px,7vw,84px) 0 26px;position:relative;overflow:hidden}
.footer__grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(24px,4vw,54px);padding-bottom:clamp(40px,6vw,68px);
}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer__grid{grid-template-columns:1fr}}
.footer__logolink{display:inline-block;margin-bottom:18px;transition:opacity .25s,transform .25s}
.footer__logolink:hover{opacity:.82;transform:translateY(-2px)}
.footer__logo{width:186px;height:auto}
.footer__tagline{margin:0;color:var(--ink-2);max-width:34ch;font-size:15px}
.footer__col h4{
  font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 700;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);margin:0 0 16px;
}
.footer__col a{
  display:block;text-decoration:none;font-size:14.5px;color:var(--ink);
  opacity:.82;padding:5px 0;transition:opacity .2s,color .2s,translate .2s;
}
.footer__col a:hover{opacity:1;color:var(--lime);translate:4px 0}

.footer__mark{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(18px,3vw,34px) 0;overflow:hidden;text-align:center;
}
.footer__word{
  font-family:var(--display);font-variation-settings:"wdth" 125,"wght" 900;
  font-size:clamp(26px,8.1vw,116px);line-height:.9;letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:1px rgba(204,255,0,.36);
  display:block;white-space:nowrap;
}
.footer__mark{border-bottom:0;padding-bottom:0}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 1.05s cubic-bezier(.25,.6,.25,1),transform 1.05s cubic-bezier(.25,.6,.25,1)}
.reveal.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .split .word i{transform:none}
  }


/* ============================================================
   MOBILE
   ============================================================ */
@media(max-width:760px){

  .section{padding:clamp(52px,9vw,78px) 0}
  .cards.swipe{margin-bottom:0}

  /* --- hero: the mark sits behind the type, not above it --- */
  .hero{padding-top:96px}
  .hero__inner{
    display:block;position:relative;
    padding-top:clamp(40px,12vh,90px);padding-bottom:clamp(30px,8vh,60px);
  }
  .hero__stage{
    position:absolute;top:44%;left:50%;
    transform:translate(-50%,-50%);
    width:100%;margin:0;z-index:0;pointer-events:none;
  }
  .hero__art{height:min(46vh,340px);max-width:88%;opacity:.5}
  .hero__ring{width:min(88%,330px);opacity:.7}
  .hero__ring--2{width:min(64%,240px)}
  .hero__text{position:relative;z-index:2}
  .hero__glow{top:40%;left:50%}

  /* --- horizontal carousels --- */
  .swipe{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:12px;
    /* bleed to the screen edges so the next card peeks past the padding */
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .swipe::-webkit-scrollbar{display:none}
  /* spacers as flex items: padding on an overflow container is unreliable at
     the ends, a pseudo-element is not */
  .swipe > *{
    flex:0 0 86%;          /* the next card peeks past the right edge */
    scroll-snap-align:start;
    min-width:0;
  }
  /* subgrid row-linking only works in a grid, so drop it here */
  .cards.swipe > .card{grid-row:auto;display:block}
  .cards.swipe{margin-bottom:14px}
  .perks.swipe > .perk--hero{grid-column:auto}

  .swipe-hint{
    display:flex;align-items:center;justify-content:flex-end;gap:8px;
    margin:10px 0 0;
    transition:opacity .35s ease,visibility .35s;
    font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
    color:rgba(255,255,255,.5);font-weight:600;
  }
  .swipe.is-end + .swipe-hint{opacity:0;visibility:hidden}
  .swipe-hint span{
    width:7px;height:7px;flex:none;
    border-top:2px solid var(--lime);border-right:2px solid var(--lime);
    rotate:45deg;animation:nudge 1.6s ease-in-out infinite;
  }
  @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

  /* --- footer: columns, not a stack --- */
  /* the Syndicate column is dropped on phones: it landed alone on its own row
     and read like a leftover. Its destinations live in the main nav anyway. */
  .footer__col:last-of-type{display:none}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .footer__brand{grid-column:1 / -1}
  .footer__tagline{max-width:100%}
  .footer__col h4{font-size:11px;margin-bottom:10px}
  .footer__col a{font-size:13.5px;padding:4px 0}
}
@media(max-width:420px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* the desktop-mode-on-a-phone case: a very tall narrow viewport should not
   force a full-height hero */
@media(min-width:761px) and (max-height:520px),(min-aspect-ratio:1/2) and (max-width:1100px){
  .hero{min-height:auto;padding-bottom:40px}
}

@media(prefers-reduced-motion:reduce){
  .swipe-hint span{animation:none}
}