.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--ink);color:var(--paper);padding:12px 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;}
.skip-link:focus{left:8px;top:8px;}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;}



/* ============================================================
   TOKENS — Swiss modernist construction system
   Swap these four to re-skin everything.
   ============================================================ */
:root{
  --paper:#EDE8DB;      /* warm off-white paper */
  --ink:#16150F;        /* neo-grotesque black */
  --accent:#3C7A6B;     /* muted teal / mint */
  --muted:#B4AC9B;      /* warm grey (photo duotone) */

  --mint:#8FBAAD;       /* light mint tint */
  --line:rgba(22,21,15,.22);  /* thin guide line */
  --hair:rgba(22,21,15,.14);  /* hairline */
  --edge:clamp(20px,5vw,80px);
  --h-font:"Helvetica Neue",Helvetica,"Arial Nova",Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--h-font);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,p{margin:0;font-weight:inherit;}
a{color:inherit;text-decoration:none;}

/* printed grain overlay */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- typography ---------- */
.display{font-weight:800;line-height:.9;letter-spacing:-.035em;}
.label{font-size:11px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;}
.label.thin{font-weight:400;opacity:.6;}
.built-by{border-bottom:1px solid currentColor;padding-bottom:1px;opacity:.85;transition:color .25s ease,border-color .25s ease,opacity .25s ease;}
.built-by:hover{color:var(--mint);border-color:var(--mint);opacity:1;}

.mono{font-variant-numeric:tabular-nums;}

/* ---------- harness ---------- */
.scene{position:relative;height:640vh;}
.scene.short{height:400vh;}
.scene.tall{height:760vh;}
.pin{position:relative;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.frame{position:relative;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.shape{position:absolute;top:0;left:0;will-change:transform,clip-path,opacity;}
.fills-ink{background:var(--ink);}
.fills-paper{background:var(--paper);}
.fills-accent{background:var(--accent);}

/* ---------- construction primitives ---------- */
.reg{position:absolute;width:16px;height:16px;pointer-events:none;z-index:40;}
.reg::before,.reg::after{content:"";position:absolute;background:var(--ink);}
.reg::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px);}
.reg::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px);}
.corner-labels{position:absolute;inset:0;z-index:40;pointer-events:none;}
.cl-tl,.cl-tr,.cl-bl,.cl-br{position:absolute;pointer-events:auto;}
.cl-tl{left:var(--edge);top:clamp(62px,8vh,100px);}
.cl-tr{right:var(--edge);top:clamp(62px,8vh,100px);text-align:right;}
.cl-bl{left:var(--edge);bottom:var(--edge);}
.cl-br{right:var(--edge);bottom:var(--edge);text-align:right;}

/* mobile — left/right corner labels collide on narrow screens; keep the left pair. */
@media(max-width:760px){
  .cl-tr,.cl-br{display:none;}
  .cl-tl,.cl-bl{max-width:74vw;}
}


/* ---------- fixed nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:9997;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px var(--edge);mix-blend-mode:difference;color:#fff;
}
.nav .brand{font-weight:800;letter-spacing:-.02em;font-size:15px;}
.nav .links{display:flex;gap:26px;}
.nav .links a{font-size:11px;letter-spacing:.24em;text-transform:uppercase;}
@media(max-width:640px){.nav .links{display:none;}}

/* ---------- cover ---------- */
.cover-hero{position:relative;height:100vh;overflow:hidden;background:var(--paper);}
/* Miami photo fragment, clipped to the construction ring (duotone, restrained) */
.cv-photo{border-radius:50%;overflow:hidden;}
.cv-photo-img{position:absolute;inset:0;background-position:center;background-size:cover;filter:grayscale(1) contrast(1.08) brightness(1.04);}
.cv-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--accent),var(--ink));mix-blend-mode:multiply;opacity:.55;}
.cv-photo::before{content:"";position:absolute;inset:0;border:1.5px solid var(--ink);border-radius:50%;z-index:2;opacity:.35;}
.cover-hero .frame{position:absolute;inset:0;}
/* live cursor reticle — technical measurement cursor over the cover */
.cv-reticle{position:absolute;inset:0;z-index:35;pointer-events:none;opacity:0;transition:opacity .4s ease;}
.cv-reticle .ret-line{position:absolute;background:var(--accent);opacity:.45;will-change:transform;}
.cv-reticle .ret-v{top:0;left:0;width:1px;height:100%;}
.cv-reticle .ret-h{left:0;top:0;height:1px;width:100%;}
.cv-reticle .ret-dot{position:absolute;left:0;top:0;width:11px;height:11px;border:1.5px solid var(--accent);border-radius:50%;will-change:transform;}
.cv-reticle .ret-coord{position:absolute;left:0;top:0;color:var(--accent);opacity:.9;font-size:10px;letter-spacing:.16em;white-space:nowrap;will-change:transform;}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.55;}
.scroll-cue .bar{width:1px;height:34px;background:var(--ink);transform-origin:top;animation:cue 2s ease-in-out infinite;}
@keyframes cue{0%,100%{transform:scaleY(.3);opacity:.4;}50%{transform:scaleY(1);opacity:.9;}}
.cover-headline{position:absolute;left:var(--edge);top:50%;transform:translateY(-50%);z-index:30;}
.cover-headline h1{font-size:clamp(64px,17vw,240px);}
.cover-sub{font-size:clamp(14px,1.6vw,20px);letter-spacing:.02em;max-width:34ch;opacity:.8;margin-top:26px;}

/* ---------- statement ---------- */
.stmt-wrap{position:relative;width:min(1000px,90vw);z-index:20;}
.stmt-wrap h2{font-size:clamp(26px,4.4vw,62px);line-height:1.04;letter-spacing:-.02em;font-weight:700;}
.stmt-wrap .sub{font-size:clamp(14px,1.5vw,18px);line-height:1.55;opacity:.75;max-width:60ch;margin-top:30px;}

/* ---------- divider text ---------- */
.dv-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;z-index:20;}
.dv-text h2{font-size:clamp(30px,7vw,96px);color:var(--paper);mix-blend-mode:difference;}
.dv-lead{max-width:32ch;font-size:clamp(14px,1.7vw,20px);line-height:1.5;color:var(--paper);opacity:.82;margin-top:10px;}
/* seeded previous-section content behind a divider's wiping shape */
.dv-seed{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:0 var(--edge);z-index:5;}
.dv-seed h2{font-weight:800;line-height:.98;letter-spacing:-.025em;}

/* ---------- channels grid ---------- */
.chan-wrap{width:min(1160px,92vw);}
.chan-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1.5px solid var(--ink);padding-bottom:14px;}
.chan-head h2{font-size:clamp(22px,3vw,40px);font-weight:800;letter-spacing:-.02em;}
.chan-grid{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line);}
.chan-card{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:24px 22px 20px;min-height:236px;display:flex;flex-direction:column;
  justify-content:space-between;position:relative;transition:background .3s;
}
.chan-card:hover{background:rgba(60,122,107,.07);}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;}
.card-title{font-size:clamp(18px,1.8vw,23px);font-weight:800;letter-spacing:-.02em;margin-bottom:9px;}
.card-desc{font-size:13px;line-height:1.5;opacity:.72;max-width:32ch;}
.card-go{opacity:.5;margin-top:16px;}
.chan-card:hover .card-go{opacity:1;color:var(--accent);}
/* geometric markers (no icons) */
.mk{width:26px;height:26px;position:relative;flex:0 0 auto;}
.mk-node::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--ink);}
.mk-ring{border:1.5px solid var(--ink);border-radius:50%;}
.mk-ring::after{content:"";position:absolute;inset:7px;border:1.5px solid var(--ink);border-radius:50%;}
.mk-slash::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(45deg,transparent 44%,var(--ink) 44% 56%,transparent 56%);}
.mk-cross::before,.mk-cross::after{content:"";position:absolute;background:var(--ink);}
.mk-cross::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-.75px);}
.mk-cross::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-.75px);}
.mk-bars::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 8px);}
.mk-half{border:1.5px solid var(--ink);border-radius:50%;overflow:hidden;}
.mk-half::after{content:"";position:absolute;left:0;top:0;width:50%;height:100%;background:var(--ink);}
@media(max-width:820px){.chan-grid{grid-template-columns:1fr;}.chan-card{min-height:auto;}}

/* ---------- what we do (index) ---------- */
.do-wrap{width:min(1080px,92vw);position:relative;}
.do-head{border-bottom:1.5px solid var(--ink);padding-bottom:12px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:flex-end;}
.do-row{display:flex;align-items:center;gap:clamp(16px,3vw,42px);padding:clamp(16px,2.4vh,26px) 0;border-bottom:1px solid var(--line);}
.do-idx{font-size:11px;letter-spacing:.24em;opacity:.5;width:34px;flex:0 0 auto;}
.do-node{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ink);flex:0 0 auto;position:relative;}
.do-fill{position:absolute;inset:3px;border-radius:50%;background:var(--accent);transform:scale(0);transform-origin:50% 50%;}
.do-dot{position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(60,122,107,.16);z-index:6;pointer-events:none;}
.do-txt{font-size:clamp(19px,2.8vw,38px);font-weight:700;letter-spacing:-.02em;}

/* ---------- rationale (vertical timeline) ---------- */
.rat-wrap{width:min(920px,92vw);position:relative;padding-left:clamp(38px,7vw,90px);}
.rat-rail{position:absolute;left:clamp(18px,3.5vw,45px);top:8px;bottom:8px;width:1.5px;background:var(--ink);transform-origin:top center;}
.rat-row{position:relative;padding:clamp(14px,2.2vh,24px) 0;}
.rat-node{position:absolute;left:calc(clamp(18px,3.5vw,45px) - clamp(38px,7vw,90px) - 8px);top:calc(clamp(14px,2.2vh,24px) + 6px);
  width:17px;height:17px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);}
.rat-node.hot{background:var(--accent);border-color:var(--accent);}
.rat-num{font-size:11px;letter-spacing:.24em;opacity:.5;margin-bottom:6px;}
.rat-txt{font-size:clamp(18px,2.4vw,32px);font-weight:700;letter-spacing:-.015em;line-height:1.05;}

/* ---------- creative studio (dossier photo) ---------- */
.cs-photo{background-size:cover;background-position:center;}
.cs-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(22,21,15,.15),rgba(22,21,15,.55));mix-blend-mode:multiply;}
.cs-cap{
  position:absolute;right:var(--edge);bottom:var(--edge);left:auto;top:auto;
  width:min(46ch,44vw);background:var(--paper);padding:26px 26px 22px;z-index:30;
  border-top:2px solid var(--ink);
}
.cs-cap h3{font-size:clamp(20px,2.6vw,34px);font-weight:800;letter-spacing:-.02em;margin:8px 0 10px;}
.cs-cap p{font-size:13.5px;line-height:1.55;opacity:.78;}
@media(max-width:640px){.cs-cap{width:calc(100vw - 2*var(--edge));}}

/* ---------- join panel ---------- */
.join-inner{position:absolute;inset:0;padding:var(--edge);display:flex;flex-direction:column;justify-content:center;gap:22px;color:var(--paper);}
.join-inner h2{font-size:clamp(32px,6vw,84px);}
.join-form{display:flex;flex-direction:column;gap:0;max-width:520px;border-top:1px solid rgba(237,232,219,.25);}
.join-field{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid rgba(237,232,219,.25);}
.join-field .label{opacity:.6;}
.join-field .ph{opacity:.4;font-size:13px;letter-spacing:.02em;}
.join-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;border:1px solid var(--paper);}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--paper);}
.btn.solid:hover{background:var(--mint);border-color:var(--mint);color:var(--ink);}
.btn.ghost:hover{background:var(--paper);color:var(--ink);}
.join-sub{display:inline-block;margin-top:16px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);opacity:.55;border-bottom:1px solid rgba(237,232,219,.35);padding-bottom:3px;width:fit-content;}
.join-sub:hover{opacity:1;color:var(--mint);border-color:var(--mint);}

/* ---------- footer ---------- */
.ft-content{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;flex-direction:column;justify-content:space-between;padding:12vh var(--edge) 6vh;z-index:3;}
.ft-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:30px;}
.ft-top h2{font-size:clamp(34px,8vw,110px);color:var(--paper);text-shadow:0 8px 40px rgba(0,0,0,.4);}
.ft-right{display:flex;flex-direction:column;align-items:flex-end;gap:14px;}
.ft-mail{font-size:clamp(16px,2vw,26px);font-weight:700;letter-spacing:-.01em;color:var(--paper);border-bottom:2px solid var(--paper);padding-bottom:2px;text-shadow:0 2px 16px rgba(0,0,0,.5);}
.ft-address{font-style:normal;font-size:12px;line-height:1.7;color:var(--paper);opacity:.7;text-align:right;text-shadow:0 2px 16px rgba(0,0,0,.5);}
.ft-bottom{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;border-top:1px solid rgba(237,232,219,.3);padding-top:20px;}
.ft-social{display:flex;gap:20px;flex-wrap:wrap;}
.ft-social a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);opacity:.75;}
.ft-social a:hover{opacity:1;color:var(--mint);}
.ft-bottom .label{color:var(--paper);opacity:.6;}

/* ---------- footer motion background — Miami waterfront, a yacht cruising past ---------- */
#foot .frame{background:linear-gradient(180deg,#2E6B5D 0%,var(--accent) 55%,#4a8b7a 100%);}
.mb-bg2{position:absolute;inset:0;overflow:hidden;z-index:0;}
.mb-horizon2{position:absolute;left:50%;top:50%;width:118%;will-change:transform;}
.mb-horizon2 img{display:block;width:100%;height:auto;}
.mb-palms2{position:absolute;left:-3%;top:-5%;width:32%;will-change:transform;}
.mb-palms2 img{display:block;width:100%;height:auto;}
/* yacht shares horizon2's exact width/anchor — same 1672x941 master canvas, so the boat
   renders at the correct scale relative to the skyline instead of being guessed at. */
.mb-yacht{position:absolute;left:50%;top:50%;width:118%;will-change:transform;}
.mb-yacht img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));}
.mb-scrim2{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(22,21,15,.72) 0%,rgba(22,21,15,.48) 30%,rgba(22,21,15,.16) 58%,rgba(22,21,15,0) 82%),
    linear-gradient(180deg,rgba(22,21,15,.34) 0%,rgba(22,21,15,0) 26%,rgba(22,21,15,0) 62%,rgba(22,21,15,.40) 100%);}
.mb-vignette2{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(22,21,15,.45) 100%);}
/* mobile — same full-bleed cover treatment as the page heroes; yacht shares the
   horizon's box so the boat keeps its correct scale against the skyline. */
@media(max-aspect-ratio:3/2){
  .mb-horizon2,.mb-yacht{width:150%;height:150%;}
  .mb-horizon2 img,.mb-yacht img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;}
  .mb-palms2{width:62%;}
}
.mb-grain2{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- static bands (non-pinned) ---------- */
.band{padding:clamp(60px,12vh,140px) var(--edge);}
.spec{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1.5px solid var(--ink);}
.spec .cell{padding:30px 20px;border-right:1px solid var(--line);}
.spec .cell:last-child{border-right:0;}
.spec .num{font-size:clamp(40px,7vw,88px);font-weight:800;letter-spacing:-.03em;line-height:1;}
.spec .num .u{color:var(--accent);}
.spec .cap{margin-top:14px;}
.spec .tick{height:10px;border-left:1px solid var(--ink);width:100%;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 28px);margin-bottom:18px;}
@media(max-width:720px){.spec{grid-template-columns:1fr;}.spec .cell{border-right:0;border-bottom:1px solid var(--line);}}

/* ================= v2 · editorial content layers ================= */
.eyebrow-band{font-size:11px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;opacity:.5;}
.wrap{width:min(1160px,92vw);margin:0 auto;}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1.5px solid var(--ink);padding-bottom:14px;margin-bottom:40px;flex-wrap:wrap;gap:12px;}
.sec-head h2{font-size:clamp(22px,3vw,40px);font-weight:800;letter-spacing:-.02em;}

/* hero CTAs + on-paper buttons */
.cover-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}
.btn.on-paper{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn.on-paper.solid{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn.on-paper.solid:hover{background:var(--accent);border-color:var(--accent);color:var(--paper);}
.btn.on-paper.ghost:hover{background:var(--ink);color:var(--paper);}

/* problem statement */
.big-statement{max-width:1120px;}
.big-statement h2{font-size:clamp(34px,6.5vw,86px);font-weight:800;letter-spacing:-.03em;line-height:.98;}
.big-statement .accent{color:var(--accent);}
.big-statement p{font-size:clamp(15px,1.7vw,20px);line-height:1.6;opacity:.76;max-width:64ch;margin-top:32px;}

/* model flow */
.model-flow{display:flex;align-items:stretch;flex-wrap:wrap;border-left:1px solid var(--line);border-top:1px solid var(--line);}
.model-step{flex:1 1 180px;min-width:168px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 22px;}
.model-step .n{width:15px;height:15px;border-radius:50%;background:var(--accent);margin-bottom:22px;}
.model-step h3{font-size:clamp(17px,1.7vw,21px);font-weight:800;letter-spacing:-.01em;margin-bottom:8px;}
.model-step p{font-size:12.5px;line-height:1.5;opacity:.72;}
.model-note{margin-top:24px;font-size:clamp(14px,1.5vw,17px);opacity:.72;max-width:64ch;line-height:1.55;}

/* who grid */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line);}
.who-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 22px;min-height:158px;display:flex;flex-direction:column;justify-content:space-between;}
.who-cell .k{font-size:11px;letter-spacing:.24em;opacity:.5;}
.who-cell h3{font-size:clamp(16px,1.7vw,21px);font-weight:800;letter-spacing:-.01em;margin:10px 0 6px;}
.who-cell p{font-size:12.5px;line-height:1.5;opacity:.72;}
@media(max-width:820px){.who-grid{grid-template-columns:1fr;}}

/* channel group tag + sharper cards */
.card-grp{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:10px;}

/* rationale sub-line */
.rat-sub{font-size:clamp(13px,1.4vw,15.5px);line-height:1.5;opacity:.66;max-width:54ch;margin-top:9px;font-weight:400;letter-spacing:0;}

/* studio deliverables + cta */
.cs-list{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 18px;}
.cs-list span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:6px 10px;opacity:.82;}
.cs-cta{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;background:var(--ink);color:var(--paper);border:1px solid var(--ink);}
.cs-cta:hover{background:var(--accent);border-color:var(--accent);}

/* roadmap */
.road{border-top:1.5px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr);}
.road .stop{border-right:1px solid var(--line);padding:28px 20px;}
.road .stop:last-child{border-right:0;}
.road .dot{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--ink);margin-bottom:20px;}
.road .stop.now .dot{background:var(--accent);border-color:var(--accent);}
.road .k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.45;margin-bottom:14px;}
.road .yr{font-size:clamp(26px,3.4vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1;}
.road .stop.now .yr{color:var(--accent);}
.road .rl{margin-top:12px;font-size:12.5px;line-height:1.45;opacity:.72;}
@media(max-width:820px){.road{grid-template-columns:1fr 1fr;}.road .stop:nth-child(2){border-right:0;}}
@media(max-width:520px){.road{grid-template-columns:1fr;}.road .stop{border-right:0;border-bottom:1px solid var(--line);}}

/* membership benefits */
.mem-benefits{list-style:none;padding:0;margin:4px 0;max-width:560px;}
.mem-benefits li{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid rgba(237,232,219,.2);font-size:14.5px;line-height:1.4;}
.mem-benefits li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint);flex:0 0 auto;transform:translateY(-1px);}

.reduce-note{position:fixed;bottom:8px;left:8px;font-size:9px;opacity:.25;z-index:9999;pointer-events:none;}

/* ---------- scroll progress rail ---------- */
.scroll-rail{position:fixed;top:16vh;bottom:16vh;right:14px;width:16px;z-index:9996;pointer-events:none;mix-blend-mode:difference;}
.scroll-rail .track{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#fff;opacity:.25;transform:translateX(-.5px);}
.scroll-rail .fill{position:absolute;top:0;left:50%;width:1px;height:100%;background:#fff;transform:translateX(-.5px) scaleY(0);transform-origin:top center;}
.scroll-rail .pct{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:9.5px;letter-spacing:.16em;color:#fff;white-space:nowrap;font-weight:600;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
@media(max-width:760px){.scroll-rail{display:none;}}

/* ============================================================
   VIEWPORT GUARDS — appended last so these win over the base rules above.
   (An earlier attempt sat near the top of the sheet and was silently
   overridden by the original .ed-mast / .ed-mast-frame declarations.)

   1. html needs overflow-x:hidden too; body alone still let the page drag
      sideways because the document element was the thing scrolling.
   2. The dossier corner labels are pinned to the hero's corners while the
      masthead copy is flex-centred. On short viewports (laptops at 768px
      tall, phones in landscape) the copy grew into the label band. Scale the
      display type to viewport HEIGHT as well as width, drop the big inner
      padding, and once there is genuinely no room, retire the decorative
      labels rather than let them collide.
   ============================================================ */
html{overflow-x:hidden;}

/* Applied unconditionally, NOT behind a max-height query: a 768px-tall laptop is
   the exact case that broke, and it sits just outside any sensible threshold.
   Sizing the display type against viewport height as well as width is what
   actually fixes it, at every size. */
.ed-mast-frame{padding-top:max(112px,11vh);padding-bottom:56px;}
.ed-mast{padding-top:0;}
.ed-mast h1{font-size:clamp(30px,min(9vw,13vh),120px);}
.ed-mast .dek{font-size:clamp(13px,1.6vw,20px);margin-top:clamp(14px,2.4vh,26px);}
.cover-headline h1{font-size:clamp(44px,min(17vw,19vh),240px);}

@media(max-height:620px){
  .ed-mast-frame{padding-top:106px;padding-bottom:40px;} /* clears the 2-line corner label (ends ~96px) */
  .ed-mast h1{font-size:clamp(26px,min(7vw,10.5vh),120px);}
  .ed-actions{margin-top:16px;}
}

/* genuinely no room left — retire the decorative framing rather than collide */
/* On the narrowest phones the corner label wraps to a taller block (~126px),
   so the fixed floor above is not enough. */
@media(max-width:400px){
  .ed-mast-frame{padding-top:148px;}
}

@media(max-height:560px){
  .cl-tl,.cl-tr,.cl-bl,.cl-br,.cl{display:none;}
}