/* ═══════════════════════════════════════════════════════════════════
   Wi — website v2 · "The Quiet"
   One ground: white. Navy #13314F carries the type and the one solid
   button. Lime #8FC31F is the signal only — the dot, the underline.
   The photographs are the only large areas of colour on the page.
   Bricolage Grotesque (display 600–800) · Hanken Grotesk (body 300–700)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · tokens ─────────────────────────────────────────────────── */

:root{
  --white:#FFFFFF;
  --paper:#F8F8F5;        /* the only off-white, for the input field */
  --mist:#EFEFEA;         /* image placeholder while loading */
  --navy:#13314F;
  --navy-deep:#0E2438;
  --green:#8FC31F;

  --fg:#13314F;
  --fg-soft:rgba(14,36,56,.66);
  --fg-mute:rgba(19,49,79,.36);
  --fg-line:rgba(19,49,79,.12);

  --disp:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;

  --shell:1240px;
  --gut:clamp(20px,5vw,72px);

  /* squircle scale — the layout signature */
  --r-sm:14px;
  --r-md:22px;
  --r-lg:30px;
  --r-xl:clamp(24px,3.4vw,44px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  margin:0;
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.6;
  color:var(--fg);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-loading{overflow:hidden}

img,video,svg{display:block;max-width:100%}
h1,h2,h3,p,figure,figcaption,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}

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

/* ── 2 · shell & type scale ─────────────────────────────────────── */

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.display{
  font-family:var(--disp);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:.98;
  color:var(--fg);
  text-wrap:balance;
  font-variation-settings:"wdth" 100;
}
/* the xl size is capped by viewport HEIGHT as well as width, so the hero
   headline and its call to action always fit above the fold on a short screen */
.display--xl{font-size:clamp(2.7rem,min(8vw,11vh),7rem)}
.display--lg{font-size:clamp(2.4rem,5.8vw,4.9rem)}
.display--md{font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.02}
.display--sm{font-size:clamp(1.55rem,2.7vw,2.3rem);line-height:1.06}

.lede{
  font-size:clamp(1.05rem,1.3vw,1.28rem);
  line-height:1.64;
  font-weight:350;
  color:var(--fg-soft);
  max-width:46ch;
}
.lede em{font-style:normal;color:var(--fg);font-weight:500}

/* a short lime rule opens each section instead of a bullet */
.eyebrow{
  display:inline-flex;align-items:center;gap:.95em;
  font-size:.74rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--fg-mute);
}
.eyebrow::before{
  content:"";
  width:clamp(20px,2.4vw,32px);
  height:2px;
  border-radius:2px;
  background:var(--green);
  flex:none;
}

/* the full stop that ends a headline is the green mark — the brand's dot,
   living where a dot belongs rather than sitting in front of a label */
.stop{
  font-style:normal;
  color:var(--green);
}

.aside{
  margin-top:1.7rem;padding-top:1.4rem;
  border-top:1px solid var(--fg-line);
  font-size:.94rem;font-weight:350;
  color:var(--fg-mute);
  max-width:34ch;
}

/* the green dot — every section opens with one */
.dot{
  display:inline-block;
  width:.5em;height:.5em;
  min-width:7px;min-height:7px;
  border-radius:50%;
  background:var(--green);
  flex:none;
}

/* ── 3 · buttons & links ────────────────────────────────────────── */

.btn{
  --pad:1.05em 1.5em;
  display:inline-flex;align-items:center;gap:.8em;
  padding:var(--pad);
  border:1px solid var(--fg-line);
  border-radius:999px;
  background:transparent;
  font-family:var(--body);
  font-size:.95rem;font-weight:500;
  color:var(--fg);
  cursor:pointer;position:relative;overflow:hidden;
  transition:border-color .6s var(--ease),color .6s var(--ease);
}
.btn span,.btn .dot{position:relative;z-index:1}
.btn .dot{transition:transform .7s var(--ease-out)}
.btn::before{
  content:"";position:absolute;inset:0;
  background:var(--navy);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .7s var(--ease-out);
}
.btn:hover::before{transform:scaleY(1)}
.btn:hover{color:var(--white);border-color:var(--navy)}
.btn:hover .dot{transform:translateX(3px)}

.btn--sm{--pad:.7em 1.1em;font-size:.86rem}
.btn--lg{--pad:1.18em 1.9em;font-size:1rem}

.btn--solid{
  background:var(--navy-deep);
  border-color:var(--navy-deep);
  color:var(--white);
  box-shadow:0 12px 30px -18px rgba(14,36,56,.7);
}
.btn--solid::before{background:var(--navy)}
.btn--solid:hover{color:var(--white);border-color:var(--navy)}

.btn:focus-visible,.form__input:focus-visible,a:focus-visible{
  outline:2px solid var(--green);outline-offset:3px;
}

.quiet-link{
  position:relative;
  font-size:.95rem;font-weight:450;
  color:var(--fg-mute);
  padding-bottom:2px;
  transition:color .5s var(--ease);
}
.quiet-link::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .65s var(--ease-out);
}
.quiet-link:hover{color:var(--fg)}
.quiet-link:hover::after{transform:scaleX(1);transform-origin:left}

/* ── 4 · frames (photography) ───────────────────────────────────── */

.frame{
  position:relative;overflow:hidden;
  border-radius:var(--r-xl);
  background:var(--mist);
  isolation:isolate;
}
.frame picture{display:block;height:100%}
.frame__img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  will-change:transform;
}
/* if a photograph is ever missing, the frame still holds its shape */
.frame.is-empty{background:linear-gradient(155deg,var(--navy),#1A6BA8 62%,var(--navy))}
.frame.is-empty .frame__img{opacity:0}

/* ── 5 · nav ────────────────────────────────────────────────────── */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:clamp(15px,1.9vw,24px) var(--gut);
  transition:transform .8s var(--ease),opacity .5s var(--ease),
             background-color .6s var(--ease),backdrop-filter .6s var(--ease);
}
.nav.is-set{
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
}
.nav.is-hidden{transform:translateY(-115%);opacity:0}
.nav__actions{display:flex;align-items:center;gap:clamp(20px,2.6vw,32px)}
.nav__brand{display:flex;align-items:center}
.nav__brand img{
  height:clamp(34px,3.1vw,44px);width:auto;
  transition:transform .7s var(--ease-out);
}
.nav__brand:hover img{transform:scale(1.05)}

/* ── 6 · rail — the green dot is the scroll ─────────────────────── */

.rail{
  position:fixed;right:clamp(14px,2vw,30px);top:50%;
  transform:translateY(-50%);z-index:50;
  display:flex;align-items:center;justify-content:center;
  width:18px;height:min(36vh,280px);
  opacity:0;transition:opacity 1s var(--ease);
}
.rail.is-on{opacity:1}
.rail__line{position:relative;width:1px;height:100%;background:var(--fg-line)}
.rail__line i{position:absolute;top:0;left:0;width:100%;height:0%;background:var(--fg-mute)}

/* one tick per chapter, laid over the line. The tick you are standing in
   draws itself long and navy; the rest stay hairlines. The green dot is
   still the scroll — the ticks only say how far through the story it is. */
.rail__ticks{position:absolute;inset:0;pointer-events:none}
.rail__ticks i{
  position:absolute;left:50%;
  width:8px;height:2px;margin-left:-4px;
  border-radius:1px;
  background:rgba(19,49,79,.3);
  transition:width .55s var(--ease-out),
             margin-left .55s var(--ease-out),
             background .55s var(--ease),
             opacity .55s var(--ease);
}
.rail__ticks i.is-done{background:rgba(19,49,79,.6);opacity:1}
.rail__ticks i.is-at{
  width:17px;margin-left:-8.5px;
  background:var(--navy);opacity:1;
}

.rail__dot{
  position:absolute;top:0;left:50%;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:var(--green);
  box-shadow:0 0 0 4px rgba(143,195,31,.14);
}

/* ── 7 · loader ─────────────────────────────────────────────────── */

.loader{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  background:var(--white);
}
.loader__mark img{height:clamp(52px,6vw,68px);width:auto}
.loader__rule{width:min(180px,34vw);height:1px;background:rgba(19,49,79,.1);overflow:hidden}
.loader__rule i{display:block;height:100%;width:0%;background:var(--green)}
.loader.is-gone{pointer-events:none}

/* ── 8 · hero ───────────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding-block:clamp(104px,13vh,160px) clamp(52px,7vh,86px);
}
/* copy and photograph share one grid, so the space between them is a gap
   we control rather than whatever is left over on a wide screen */
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(28px,3.2vw,54px);
  align-items:center;
  max-width:1460px;
}
/* height-driven so the photograph can never push the CTA below the fold */
.hero__media{
  position:relative;      /* containing block for the absolutely-placed figure */
  justify-self:end;
  width:100%;
  max-width:100%;
  aspect-ratio:16/9;      /* the hero film is 16:9 — never crop its type */
  height:auto;
  max-height:78svh;
}
.frame--hero{position:absolute;inset:0}
.frame--hero picture,
.frame--hero .frame__img,
.frame--hero .frame__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Reveal the decoded film without blending two different caption positions. */
.frame--hero .frame__video{opacity:0}
.frame--hero .frame__video.is-on{opacity:1}

.hero__copy{position:relative;z-index:2}
.hero__copy .eyebrow{margin-bottom:clamp(16px,2.4vh,28px)}
.hero__copy .display{max-width:13ch}
.hero__copy .display .hl{color:var(--green)}
.hero__copy .lede{margin-top:clamp(18px,2.6vh,30px);max-width:36ch}

.hero__act{
  display:flex;align-items:center;
  gap:clamp(16px,2.4vw,30px);
  margin-top:clamp(24px,3.2vh,38px);
  flex-wrap:wrap;
}

.scroll-cue{
  position:absolute;left:var(--gut);bottom:clamp(18px,3vh,30px);
  display:flex;align-items:center;gap:.9rem;
  font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-mute);z-index:2;
}
.scroll-cue i{
  display:block;width:54px;height:1px;
  background:var(--fg-line);position:relative;overflow:hidden;
}
.scroll-cue i::after{
  content:"";position:absolute;inset:0;background:var(--green);
  transform:translateX(-100%);
  animation:cue 3.4s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* line-mask reveal */
.ln{display:block;overflow:hidden;padding-bottom:.04em}
.ln>span{display:block;will-change:transform}

/* ── 9 · the noise ──────────────────────────────────────────────── */

.noise{position:relative;height:190vh}
.noise__pin{
  position:sticky;top:0;
  height:100svh;overflow:hidden;
  display:flex;align-items:center;
}
.noise__grid{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
  width:100%;
}

.noise__say{position:relative;z-index:3}
.noise__say .display{margin-block:clamp(16px,2.4vh,26px) clamp(20px,3vh,32px)}

/* two headings share one spot — "got loud" gives way to "beautifully
   organised" once the field below has sorted itself out */
.noise__heads{position:relative}
.noise__head--calm{position:absolute;inset:0;opacity:0}

/* the chaos is contained — it never crosses into the copy */
.noise__field{
  position:relative;
  height:min(74svh,640px);
  overflow:hidden;
}
.noise__swarm{position:absolute;inset:0;z-index:2;pointer-events:none}

/* pure typography — no bubbles, no interface */
.frag{
  position:absolute;
  left:var(--x);top:var(--y);
  transform:rotate(var(--r));
  font-family:var(--body);
  font-size:calc(clamp(.72rem,.95vw,.92rem) * var(--fs,1));
  font-weight:400;
  line-height:1.3;
  letter-spacing:-.005em;
  color:var(--navy);
  opacity:0;
  white-space:nowrap;
  will-change:transform,opacity;
}

.noise__key{
  position:absolute;z-index:4;
  left:0;right:0;top:50%;
  transform:translateY(-50%);
  opacity:0;
  text-align:left;
  will-change:transform,opacity;
}
/* a breath of clean white so the one that mattered stays legible */
.noise__key::before{
  content:"";
  position:absolute;
  inset:-40% -25%;
  background:radial-gradient(58% 52% at 50% 50%,var(--white) 58%,rgba(255,255,255,0) 84%);
  z-index:-1;
}
.noise__key p{
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(1.35rem,2.6vw,2.3rem);
  line-height:1.12;
  letter-spacing:-.03em;
  color:var(--navy);
}
.noise__key span{
  display:inline-flex;align-items:center;gap:.6em;
  margin-top:1.1rem;
  font-size:.76rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-mute);
}

/* the flood sorts itself into these, arranged in a ring around Wi */
.noise__boxes{
  position:absolute;inset:0;z-index:5;
  pointer-events:none;
}
.noise__box{
  position:absolute;
  transform:translate(-50%,-50%);
  opacity:0;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(11px,1.5vw,18px) clamp(16px,2.4vw,26px);
  border-radius:6px;
  background:linear-gradient(155deg,#D7AD74 0%,#C89A5C 52%,#B4854A 100%);
  border:1px solid rgba(94,61,24,.4);
  box-shadow:
    0 14px 24px rgba(94,61,24,.22),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -3px 8px rgba(94,61,24,.2);
  font-family:var(--body);font-weight:700;
  font-size:clamp(.72rem,.92vw,.86rem);
  letter-spacing:.03em;
  color:#4A2E12;
  white-space:nowrap;
}
/* a strip of packing tape sealing the box shut */
.noise__box::before{
  content:"";
  position:absolute;
  left:50%;top:0;
  transform:translate(-50%,-45%);
  width:54%;height:11px;
  background:rgba(255,250,240,.6);
  border-inline:1px solid rgba(94,61,24,.15);
}
/* a ring around the centre, where Wi lands */
.noise__box[data-cat="finances"]{left:50%; top:8%}
.noise__box[data-cat="social"]  {left:81%; top:19%}
.noise__box[data-cat="work"]    {left:89%; top:53%}
.noise__box[data-cat="school"]  {left:71%; top:86%}
.noise__box[data-cat="sports"]  {left:29%; top:88%}
.noise__box[data-cat="travel"]  {left:11%; top:54%}
.noise__box[data-cat="other"]   {left:19%; top:20%}

.noise__logo{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:clamp(46px,5.2vw,74px);height:auto;
  opacity:0;
  z-index:6;
  filter:drop-shadow(0 8px 20px rgba(19,49,79,.2));
}

/* ── 11 · duo (the two things Wi does) ──────────────────────────── */

.duo{position:relative;padding-block:clamp(64px,10vh,120px)}
/* the rule for the whole page: words on the left, picture on the right.
   The photograph holds its own column and stays put while the copy moves. */
.duo__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.66fr);
  gap:clamp(40px,6vw,92px);
  align-items:start;
}
.duo__say .eyebrow{margin-bottom:clamp(16px,2.4vh,24px)}
.duo__say .display{margin-bottom:clamp(18px,2.6vh,26px)}
.duo__say .lede{max-width:40ch}

/* the column stretches to the full row so the figure inside it has room to stick */
.duo__show{align-self:stretch}
.frame--tall{
  position:sticky;
  top:clamp(96px,13vh,140px);
  aspect-ratio:4/5;
}

/* — 01 · the ledger — */

.ledger{position:relative;margin-top:clamp(28px,4vh,40px)}
.ledger__hush{
  font-size:clamp(.92rem,1.1vw,1.05rem);
  font-weight:350;line-height:1.55;
  color:var(--fg-mute);
  max-width:34ch;
  padding-bottom:clamp(26px,3.6vh,38px);
}
.ledger__hush span{
  text-decoration:line-through;
  text-decoration-thickness:1px;
  text-decoration-color:var(--fg-line);
}
.ledger__hush em{font-style:normal;font-weight:500}

.ledger__lab{
  display:flex;align-items:center;gap:.95em;
  padding-bottom:clamp(16px,2vh,22px);
  border-bottom:1px solid var(--fg-line);
  font-size:.74rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--fg);
}
.ledger__lab::before{
  content:"";
  width:clamp(20px,2.4vw,32px);height:2px;
  border-radius:2px;background:var(--green);flex:none;
}

.ledger__list li{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:clamp(16px,2.2vw,28px);
  padding-block:clamp(20px,2.8vh,30px);
  border-bottom:1px solid var(--fg-line);
  opacity:0;
  will-change:transform,opacity;
}
.ledger__n{
  grid-row:1/3;
  font-size:.74rem;font-weight:600;letter-spacing:.14em;
  color:var(--green);
  padding-top:.55em;
}
.ledger__list b{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.18rem,1.9vw,1.62rem);
  letter-spacing:-.025em;line-height:1.2;
  color:var(--fg);
}
.ledger__list em{
  display:block;margin-top:.4rem;
  font-style:normal;font-size:.92rem;font-weight:350;
  color:var(--fg-mute);
}

/* — 02 · the circle — */

.circle{position:relative;margin-top:clamp(28px,4vh,40px)}
.circle__q{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.25rem,2.1vw,1.75rem);
  letter-spacing:-.028em;line-height:1.22;
  color:var(--fg);
  max-width:20ch;
  padding-bottom:clamp(26px,3.6vh,40px);
  border-bottom:1px solid var(--fg-line);
}

.circle__names{
  display:flex;flex-wrap:wrap;
  gap:clamp(.35em,1vw,.8em) clamp(.7em,1.8vw,1.4em);
  padding-block:clamp(28px,4vh,44px);
  font-family:var(--disp);font-weight:700;
  font-size:clamp(1.6rem,3.6vw,3rem);
  letter-spacing:-.035em;line-height:1.05;
}
.circle__names span{
  color:var(--fg);
  opacity:0;
  will-change:opacity;
}
.circle__names .is-it{position:relative;color:var(--navy)}
.circle__names .is-it::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-.1em;
  height:.09em;min-height:3px;
  border-radius:999px;
  background:var(--green);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--ease-out);
}
.circle__names .is-it.is-drawn::after{transform:scaleX(1)}

.circle__ans{
  position:relative;
  padding-top:clamp(22px,3vh,32px);
  border-top:2px solid var(--green);
  opacity:0;
  will-change:opacity;
}
.circle__ans b{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.05rem,1.5vw,1.28rem);
  letter-spacing:-.022em;color:var(--fg);
}
.circle__ans em{
  display:block;margin-top:.35rem;
  font-style:normal;font-size:.94rem;font-weight:350;
  color:var(--fg-mute);
}

/* ── 12 · everywhere (03 · channels) ────────────────────────────── */

.everywhere{position:relative;padding-block:clamp(56px,9vh,104px)}
.everywhere__head .eyebrow{margin-bottom:clamp(16px,2.4vh,24px)}
.everywhere__head .display{max-width:16ch}

.everywhere__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,36px);
  margin-top:clamp(50px,7vh,80px);
}
.everywhere__grid li{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(14px,2vh,18px);
}
.everywhere__icon{
  display:flex;align-items:center;justify-content:center;
  width:clamp(56px,6vw,68px);height:clamp(56px,6vw,68px);
  border-radius:var(--r-md);
  flex:none;
}
.everywhere__icon svg{width:52%;height:52%;fill:var(--white)}
.everywhere__icon--whatsapp{background:#25D366}
.everywhere__icon--imessage{background:#0A84FF}
.everywhere__icon--voice{background:var(--navy)}
.everywhere__icon--wi{background:var(--paper);border:2px solid var(--green)}
.everywhere__icon--wi img{width:58%;height:auto}
.everywhere__lab{
  font-size:.96rem;font-weight:600;
  letter-spacing:-.01em;
  color:var(--fg);
}

/* ── 13 · trust ─────────────────────────────────────────────────── */

.trust{position:relative;padding-block:clamp(64px,10vh,120px)}
.trust__head .eyebrow{margin-bottom:clamp(16px,2.4vh,24px)}
.trust__body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(40px,6vw,90px);
  align-items:start;
  margin-top:clamp(46px,7vh,84px);
}
.frame--trust{aspect-ratio:4/5}

/* three commitments, stated — not a checklist */
.pledge{
  margin-top:clamp(30px,4.2vh,44px);
  border-top:1px solid var(--fg-line);
}
.pledge li{
  position:relative;
  padding-block:clamp(20px,2.6vh,28px);
  padding-left:clamp(18px,2vw,26px);
  border-bottom:1px solid var(--fg-line);
}
/* a lime tick down the left edge, drawn on the rule rather than set as a bullet */
.pledge li::before{
  content:"";
  position:absolute;left:0;top:clamp(20px,2.6vh,28px);
  width:2px;height:1.1em;
  border-radius:2px;
  background:var(--green);
}
.pledge b{
  display:block;
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.14rem,1.75vw,1.5rem);
  letter-spacing:-.026em;line-height:1.24;
  color:var(--fg);
}
.pledge em{
  display:block;
  margin-top:.5rem;
  font-style:normal;
  font-size:.96rem;font-weight:350;line-height:1.6;
  color:var(--fg-soft);
  max-width:46ch;
}
.trust__words .quiet-link{display:inline-block}

/* headline-only sections: no trailing space under the last line */
.duo__say .display:last-child{margin-bottom:0}

/* ── 14 · the plan ──────────────────────────────────────────────── */

.plan{position:relative;padding-block:clamp(56px,9vh,104px)}
.plan__head .eyebrow{margin-bottom:clamp(16px,2.4vh,24px)}
.plan__head .display{margin-bottom:clamp(20px,3vh,30px)}

.plan__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,64px);
  margin-top:clamp(50px,7vh,86px);
}
.plan__grid li{
  padding-top:clamp(22px,2.8vh,30px);
  border-top:2px solid var(--green);
}
.plan__lab{
  font-size:.72rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--fg-mute);
}
.plan__big{
  font-family:var(--disp);
  font-weight:700;
  font-size:clamp(2.6rem,5vw,4.2rem);
  letter-spacing:-.04em;
  line-height:1;
  color:var(--fg);
  margin-block:clamp(14px,2vh,20px) clamp(12px,1.8vh,18px);
  font-variant-numeric:lining-nums tabular-nums;
}
.plan__sub{
  font-size:.94rem;font-weight:350;line-height:1.6;
  color:var(--fg-soft);
  max-width:34ch;
}

/* ── 15 · waitlist + scan ───────────────────────────────────────── */

.join{padding-block:clamp(52px,8vh,96px) clamp(64px,10vh,120px)}
.join__grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(46px,7vw,110px);
  align-items:center;
}
.join .eyebrow{margin-bottom:clamp(16px,2.4vh,24px)}
.join .display{margin-bottom:clamp(18px,2.6vh,26px)}

/* "I ♥ Wi." — the heart and the mark sit on the baseline of the type.
   Sized in em so the lockup tracks the display scale at every width. */
.joinmark .ln{padding-block:.1em .12em}
.joinmark .ln>span{
  display:flex;align-items:center;
  gap:.13em;
  line-height:1;
}
.joinmark__heart{
  width:.72em;height:.72em;flex:none;
  fill:#E4002B; /* I ❤ NY red — the one deliberate warm note against the navy/lime palette */
  transform:translateY(.03em);
}
.joinmark__logo{
  height:.9em;width:auto;flex:none;
}
/* the green stop belongs to the mark, so it hugs it */
.joinmark .stop{margin-left:-.06em}

/* "Wi's progress." — same lockup logic as the joinmark: the mark replaces
   the word, sized in em so it tracks the display scale. The .ln mask
   clips, so the line needs a little room above and below the glyphs.
   Unlike the joinmark, "'s" is a suffix, not the next word — the gap
   is just enough to clear the glyph, not a word-space. */
.planmark .ln{padding-block:.08em .12em}
.planmark .ln>span{display:flex;align-items:center;gap:.04em;line-height:1}
.planmark__logo{height:.82em;width:auto;flex:none;transform:translateY(.02em)}
.planmark .stop{margin-left:-.02em}
/* the word and its stop are one flex item, so the lockup gap only ever
   falls between the mark and the word — never inside the word. */
.planmark .ln>span>span{display:inline-block}

.form{width:100%;max-width:560px;margin-top:clamp(30px,4.5vh,46px)}
.form__row{
  display:flex;gap:10px;padding:8px;
  border:1px solid var(--fg-line);
  border-radius:999px;
  background:var(--paper);
  transition:border-color .6s var(--ease);
}
.form__row:focus-within{border-color:rgba(19,49,79,.42)}
.form__row.is-bad{border-color:#c0492f}
.form__input{
  flex:1;min-width:0;
  padding:.9em 1.3em;
  border:0;background:transparent;
  font-size:1rem;font-weight:400;outline:none;
}
.form__input::placeholder{color:var(--fg-mute)}
.form__note{
  margin-top:1.1rem;padding-left:1.4rem;
  font-size:.84rem;color:var(--fg-mute);
}
.form__note.is-bad{color:#c0492f}
.form__done{max-width:46ch}
.form__done .display{margin-bottom:.8rem}
.form__done .lede{font-size:1.05rem}

/* the waitlist overlay — join from anywhere on the page, no scrolling
   required. The bottom-of-page form (with its QR plaque) stays exactly
   as it was for anyone who scrolls there naturally; this is the fast
   path from the hero/nav call to action. */
.wl-modal{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  visibility:hidden;
  pointer-events:none;
}
.wl-modal.is-open{visibility:visible;pointer-events:auto}
.wl-modal__backdrop{
  position:absolute;inset:0;
  background:rgba(14,36,56,.55);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
}
.wl-modal__panel{
  position:relative;
  width:100%;max-width:420px;
  background:var(--white);
  border-radius:var(--r-xl);
  padding:clamp(32px,5vw,44px) clamp(26px,4.5vw,38px);
  text-align:center;
  box-shadow:0 40px 90px rgba(14,36,56,.35);
}
.wl-modal__close{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid var(--fg-line);
  background:none;
  font-size:1.3rem;line-height:1;
  color:var(--fg-mute);
  cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.wl-modal__close:hover{background:var(--paper);color:var(--fg)}
.wl-modal__mark{width:36px;height:auto;margin:0 auto 16px}
.wl-modal .lede{margin-inline:auto;font-size:.98rem;max-width:32ch}
.wl-modal .form{margin-inline:auto}
/* no boxed row at all here — a boxed container plus the input's own
   green focus rectangle read as two nested outlines, which is what
   looked wrong. Just a quiet underline instead: rests grey, goes green
   on focus, red if the address is bad — same signal, no box. */
.wl-modal .form__row{
  flex-direction:column;gap:16px;
  border:none;background:none;border-radius:0;padding:0 0 10px;
  border-bottom:1.5px solid var(--fg-line);
  transition:border-color .4s var(--ease);
}
.wl-modal .form__row:focus-within{border-color:var(--green)}
.wl-modal .form__row.is-bad{border-color:#c0492f}
.wl-modal .form__input{padding:.5em 0;text-align:center}
.wl-modal .form__input:focus-visible{outline:none}
.wl-modal .form .btn{justify-content:center;width:100%}
.wl-modal .form__note{padding-left:0;text-align:center;margin-top:1rem}
.wl-modal .form__done{margin-inline:auto}

/* the plaque — scan to join */
.join__scan{display:flex;justify-content:flex-end}
.plaque{
  width:min(100%,340px);
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--fg-line);
  border-radius:var(--r-xl);
  background:var(--white);
  box-shadow:0 40px 80px -60px rgba(19,49,79,.45);
}
.plaque__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding-bottom:clamp(16px,1.8vw,20px);
  border-bottom:1px solid var(--fg-line);
}
.plaque__top img{height:30px;width:auto}
.plaque__top span{
  font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-mute);
}
.plaque__code{
  position:relative;
  padding:clamp(18px,2.4vw,26px) 0;
}
.qr{width:100%;height:auto;fill:var(--navy);shape-rendering:crispEdges}
.qr__mark{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:22%;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  border-radius:26%;
  background:var(--white);
  box-shadow:0 0 0 4px var(--white);
}
.qr__mark img{width:74%;height:auto}
.plaque__bot{
  padding-top:clamp(14px,1.8vw,18px);
  border-top:1px solid var(--fg-line);
  font-size:.86rem;color:var(--fg-mute);
}
.plaque__bot a{
  color:var(--fg);font-weight:500;
  border-bottom:1px solid var(--green);
  padding-bottom:1px;
}

/* ── 16 · footer ────────────────────────────────────────────────── */

.foot{
  position:relative;
  padding-block:clamp(60px,9vh,100px) clamp(30px,5vh,50px);
}
.foot__bot{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.6rem;flex-wrap:wrap;
  padding-top:clamp(24px,4vh,34px);
  border-top:1px solid var(--fg-line);
}
.foot__logo{height:clamp(34px,3vw,40px);width:auto}
.foot__links{display:flex;gap:1.8rem}
.foot__links a{font-size:.88rem;color:var(--fg-mute);transition:color .5s var(--ease)}
.foot__links a:hover{color:var(--fg)}
.foot__meta{font-size:.77rem;color:var(--fg-mute)}

/* ── 17 · inner pages ───────────────────────────────────────────── */

.page{padding-block:clamp(130px,20vh,210px) clamp(80px,12vh,140px)}
.page__head .display{max-width:13ch}
.page__head .eyebrow{margin-bottom:clamp(16px,2.4vh,24px)}
.prose{max-width:62ch;margin-top:clamp(46px,7vh,80px)}
.prose h2,.prose h3{
  position:relative;
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.14rem,1.7vw,1.48rem);
  letter-spacing:-.025em;line-height:1.2;
  color:var(--fg);
  margin-top:clamp(38px,5.5vh,58px);margin-bottom:.7rem;
  padding-top:clamp(16px,2vh,22px);
  border-top:2px solid var(--green);
}
.prose p{
  font-size:1.05rem;font-weight:350;line-height:1.72;
  color:var(--fg-soft);margin-bottom:1rem;
}
.prose p strong{font-weight:500;color:var(--fg)}
.prose ul{margin:1rem 0 1.4rem}
.prose ul li{
  position:relative;padding-left:1.5rem;margin-bottom:.6rem;
  font-weight:350;color:var(--fg-soft);
}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.78em;
  width:12px;height:2px;border-radius:2px;background:var(--green);
}
.back{
  display:inline-flex;align-items:center;gap:.7em;
  margin-top:clamp(50px,7vh,80px);
  font-size:.92rem;color:var(--fg-mute);
  transition:color .5s var(--ease);
}
.back:hover{color:var(--fg)}

/* — legal pages — */

/* the effective-date / entity block that opens a legal page */
.legal-meta{
  padding:1.1rem 1.3rem;
  border-radius:var(--r-sm);
  background:var(--paper);
  font-size:.94rem!important;
  line-height:1.85!important;
}

/* anything still to be filled in before publishing. Loud on purpose —
   an unfilled placeholder must never survive to production quietly. */
.fill{
  padding:.1em .45em;
  border-radius:4px;
  background:#FFE8A3;
  box-shadow:inset 0 0 0 1px #E0B930;
  color:#6B4E00;
  font-weight:500;
  font-size:.92em;
}

/* the Google scope disclosure table — the part a reviewer reads hardest.
   It breaks out past the 62ch prose column, and scrolls rather than
   squeezing when the viewport is narrow. */
/* width is set explicitly rather than with a percentage: a percentage
   would resolve against the 62ch prose column and clip the last column. */
.table-scroll{
  width:min(980px,calc(100vw - var(--gut) * 2));
  margin:1.6rem 0 2rem;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.scopes{
  border-collapse:collapse;
  width:100%;min-width:640px;
  font-size:.93rem;
  text-align:left;
}
.scopes caption{
  text-align:left;font-weight:500;color:var(--fg);
  font-size:1rem;margin-bottom:1rem;
}
.scopes th{
  padding:0 1.1rem .8rem 0;
  border-bottom:2px solid var(--green);
  font-family:var(--body);
  font-size:.875rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-mute);
  vertical-align:bottom;
}
.scopes td{
  padding:1.05rem 1.1rem 1.05rem 0;
  border-bottom:1px solid var(--fg-line);
  font-weight:350;line-height:1.6;
  color:var(--fg-soft);
  vertical-align:top;
}
.scopes td:first-child{width:26%}
.scopes td strong{font-weight:500;color:var(--fg)}
.scopes code,.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88em;
  color:var(--navy);
  overflow-wrap:anywhere;
}

/* ── 18 · reveal defaults (JS upgrades these) ───────────────────── */

/* opacity only — never a transform. GSAP owns the transform on .ln > span,
   and a CSS transform here would be absorbed as its base and stack. */
.js [data-anim]{opacity:0;will-change:transform,opacity}
.js .ln>span{opacity:0}

/* ── 19 · responsive ────────────────────────────────────────────── */

@media (max-width:1080px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
  .plan__grid{grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,42px)}
  .everywhere__grid{grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,44px)}
  .duo__grid{grid-template-columns:1fr;gap:clamp(34px,6vw,56px)}
  .duo__show{max-width:560px}
  .frame--tall{position:static}
  .trust__body{grid-template-columns:1fr;gap:clamp(34px,6vw,50px)}
  .frame--trust{aspect-ratio:3/2;max-width:540px}
  .join__grid{grid-template-columns:1fr;gap:clamp(44px,7vw,64px)}
  .join__scan{justify-content:flex-start}
}

@media (max-width:860px){
  .rail{display:none}

  /* headline first, then the film, then the CTA — the button reveals
     only once the video starts (see revealHeroAct in wi.js), so it
     belongs after the video, not stacked above it on the first screen.
     .hero__copy stays display:contents here purely so its children
     (eyebrow + h1) can take an independent `order` alongside the media
     and the CTA, which otherwise live one grid level up. */
  .hero{
    min-height:auto;display:block;
    padding-block:clamp(96px,13vh,132px) clamp(54px,8vh,80px);
  }
  .hero__grid{grid-template-columns:1fr;gap:0}
  .hero__copy{display:contents}
  .hero__copy>*{order:1}
  .hero__media{
    order:2;
    justify-self:stretch;
    width:100%;max-width:none;
    height:auto;aspect-ratio:16/9;max-height:62svh;
    margin-top:clamp(34px,6vh,52px);
  }
  .hero__act{order:3}
  .hero__copy .display,.hero__copy .lede{max-width:none}
  .hero .scroll-cue{
    position:static;justify-content:center;
    margin-top:clamp(34px,6vh,52px);
  }

  /* one swipe, one section. scroll-snap-stop:always is what makes this
     hold even on a hard, fast fling — the browser is required to land on
     every section in turn rather than letting momentum carry past one,
     which a JS "settle, then correct" approach can't reliably match.
     Lenis doesn't own touch scrolling (native passthrough unless
     syncTouch is on, which it isn't here), so it never fights this —
     it only ever calls lenis.stop()/start() to hard-block scrolling
     outright during .noise's own autoplay lock. */
  html{scroll-snap-type:y mandatory}
  .hero,.noise,.duo,.everywhere,.trust,.plan,.join,.foot{
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  .plan__grid{grid-template-columns:1fr;gap:clamp(24px,5vw,34px)}
  .everywhere__grid{grid-template-columns:1fr 1fr;gap:clamp(26px,6vw,36px)}

  /* exactly the pin's own height (100svh) — no extra buffer above that.
     the old 170vh carried a leftover scroll-scrub buffer from before the
     section autoplayed instead of being scroll-driven; scroll is now
     hard-locked for the whole autoplay regardless of section height, so
     that buffer just sat there as dead, unchanging screen once the lock
     released — a swipe through it read as a stall, not progress. */
  .noise{height:100svh}
  .noise__grid{grid-template-columns:1fr;gap:clamp(20px,4vh,34px);align-content:center}
  .noise__field{height:min(38svh,320px)}

  .form__row{flex-direction:column;border-radius:var(--r-lg);padding:10px}
  .form__input{padding:.9em 1rem}
  .form .btn{justify-content:center;width:100%}
  .form__note{padding-left:1rem}

  /* a QR code is for scanning with a different device — on the device
     you're already reading this on, it's just dead weight */
  .join__scan{display:none}

  .foot__bot{gap:1.2rem}
  .foot__meta{width:100%}
}

@media (max-width:520px){
  .frag:nth-child(n+13){display:none}
  .circle__names{font-size:clamp(1.45rem,8vw,2.1rem)}
}

/* ── 20 · motion off ────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .js [data-anim]{opacity:1}
  .js .ln>span{opacity:1;transform:none}
  .noise{height:auto}
  .noise__pin{position:static;height:auto;display:block;padding-block:clamp(90px,15vh,150px)}
  .noise__swarm,.scroll-cue{display:none}
  .noise__key{
    position:static;transform:none;opacity:1;
    width:auto;text-align:left;margin-top:2.6rem;
  }
  .noise__field{height:auto}
  .noise__boxes,.noise__logo{display:none}
  .noise__head--calm{position:static;opacity:1;margin-top:.6em}
  .ledger__list li,.circle__names span,.circle__ans{opacity:1}
  .circle__names .is-it::after{transform:scaleX(1)}
}