/* ══════════════════════════════════════════════════════════════════════════
   beyond.partners v2 — below-fold shell for the single landing page.
   Night Gallery: black canvas, off-white pills, tonal panels (Sequel + REKKI).
   Copy is short; features are shown as doors, tiles, and numbered rails.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#fafafa;
  --muted:#a7a6a6;
  --nav:#b6b5b5;
  --strip:#8b8a8a;
  --pill:#f5f5f0;
  --pill-ink:#050505;
  --rule:rgba(250,250,250,.10);
  --panel:rgba(255,255,255,.035);
  --panel-edge:rgba(255,255,255,.08);
  --ease:cubic-bezier(.22,1,.36,1);
  --pad: clamp(20px, 5vw, 75px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:#050505; color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
  font-size:17px; line-height:1.62;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }

.wrap{ max-width:1080px; margin:0 auto; padding:0 var(--pad); }

/* ── header ──────────────────────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:20;
  background:rgba(5,5,5,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.top-in{ display:flex; align-items:center; gap:28px; height:78px; }
.mark{ width:21px; height:32px; flex:none; }
.mark svg{ width:100%; height:100%; display:block; }
.nav{ display:flex; align-items:center; gap:24px; margin-left:auto;
  font-size:15px; color:var(--nav); }
.nav a:hover{ color:#fff; }
.nav a[aria-current="page"]{ color:#fff; }
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--pill); color:var(--pill-ink); border-radius:999px;
  padding:0 22px; height:44px; font-size:15px; font-weight:500; white-space:nowrap;
}
.pill:hover{ background:#eee; }
.pill-lg{ height:50px; padding:0 28px; font-size:16px; }
.ghost{ font-size:16px; font-weight:500; color:#fff; }
.ghost:hover{ opacity:.75; }
@media (max-width:760px){
  .nav{ display:none; }
  .top-in{ height:66px; }
}

/* ── page head ───────────────────────────────────────────────────────────── */
.head{ padding:clamp(56px,11vh,120px) 0 clamp(40px,7vh,72px); border-bottom:1px solid var(--rule); }
.kicker{
  margin:0 0 20px; font-size:12px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--strip);
}
h1{
  margin:0; font-size:clamp(38px,6.4vw,68px); line-height:1.04;
  font-weight:400; letter-spacing:-.012em;
}
h1 .soft{ color:var(--muted); }
.lede{ margin:24px 0 0; max-width:62ch; font-size:clamp(17px,2vw,20px); color:var(--muted); }
.head .acts{ margin-top:34px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }

/* ── sections ────────────────────────────────────────────────────────────── */
section{ padding:clamp(52px,9vh,92px) 0; border-bottom:1px solid var(--rule); }
h2{ margin:0 0 8px; font-size:clamp(26px,3.4vw,38px); line-height:1.12;
  font-weight:400; letter-spacing:-.01em; }
h3{ margin:0; font-size:20px; line-height:1.25; font-weight:500; letter-spacing:-.006em; }
p{ margin:14px 0 0; color:var(--muted); max-width:66ch; }
p.on{ color:var(--ink); }
.sec-lede{ margin:16px 0 0; max-width:62ch; font-size:18px; color:var(--muted); }

.grid{ display:grid; gap:40px; margin-top:44px; }
.g2{ grid-template-columns:1fr; }
.g3{ grid-template-columns:1fr; }
@media (min-width:720px){ .g2{ grid-template-columns:1fr 1fr; gap:48px; } }
@media (min-width:860px){ .g3{ grid-template-columns:repeat(3,1fr); gap:40px; } }

/* numbered steps: the mechanic, in order */
.step{ border-top:1px solid var(--rule); padding-top:20px; }
.step .n{ font-size:12px; letter-spacing:.14em; color:var(--strip); text-transform:uppercase; }
.step h3{ margin-top:10px; }

/* stat row */
.stats{ display:grid; gap:28px; grid-template-columns:1fr 1fr; margin-top:40px; }
@media (min-width:860px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat b{ display:block; font-size:clamp(28px,3.6vw,40px); font-weight:400; letter-spacing:-.015em; }
.stat span{ display:block; margin-top:10px; font-size:14px; color:var(--muted); }

/* operator */
.op h3{ font-size:24px; }
.op .role{ margin-top:6px; font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--strip); }
.op ul{ margin:18px 0 0; padding:0; list-style:none; }
.op li{ position:relative; margin-top:14px; padding-left:18px; color:var(--muted); max-width:52ch; }
.op li::before{ content:''; position:absolute; left:0; top:.68em; width:6px; height:1px; background:var(--strip); }

/* price rows */
.rows{ margin-top:36px; border-top:1px solid var(--rule); }
.row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;
  padding:20px 0; border-bottom:1px solid var(--rule); }
.row .what{ font-size:18px; min-width:190px; }
.row .cost{ font-size:18px; color:#fff; white-space:nowrap; }
.row .note{ flex:1 1 320px; font-size:15px; color:var(--muted); }

/* pull quote: the one sentence of the page */
.pull{ margin:0; padding:0; border-left:2px solid var(--rule); padding-left:24px; }
.pull p{ color:var(--ink); font-size:clamp(20px,2.6vw,27px); line-height:1.34; max-width:34ch; }

/* close */
.close{ border-bottom:0; }
.close .acts{ margin-top:30px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot{ padding:44px 0 60px; color:var(--strip); font-size:14px; }
.foot-in{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:baseline; }
.foot a:hover{ color:#fff; }
.foot .sp{ margin-left:auto; }

@media (prefers-reduced-motion: no-preference){
  @keyframes rise{ from{ opacity:0; transform:translateY(12px); } }
  .head .kicker{ animation:rise .7s var(--ease) both; }
  h1{ animation:rise .8s var(--ease) .05s both; }
  .head .lede{ animation:rise .8s var(--ease) .12s both; }
  .head .acts{ animation:rise .8s var(--ease) .19s both; }
}

/* ── the flow ────────────────────────────────────────────────────────────────
   Stacked, one column, generous. Headline plus one line each, which is the
   only format that survives eight of them. A three-up grid would turn the
   sequence into a menu, and the sequence is the argument. */
.flow{ list-style:none; margin:44px 0 0; padding:0; }
.flow li{ margin-top:38px; }
.flow li:first-child{ margin-top:0; }
.flow h3{ font-size:clamp(19px,2.1vw,22px); font-weight:500; letter-spacing:-.008em; }
.flow p{ margin-top:10px; max-width:56ch; }

/* The rule that carries the pitch. */
.stop{
  margin:48px 0; max-width:none; display:flex; align-items:center; gap:18px;
  font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--strip);
}
.stop::before,.stop::after{ content:''; height:1px; background:var(--rule); flex:1; }
.stop span{ flex:none; }

.learned{
  margin-top:52px; padding-top:26px; border-top:1px solid var(--rule);
  max-width:58ch; color:var(--ink); font-size:clamp(17px,1.9vw,19px);
}

/* ── two doors: the fork ─────────────────────────────────────────────────── */
.fork{
  display:grid; gap:16px; margin-top:36px;
  grid-template-columns:1fr;
}
@media (min-width:720px){ .fork{ grid-template-columns:1fr 1fr; gap:18px; } }
.door{
  display:flex; flex-direction:column; gap:14px;
  padding:28px 26px 26px;
  background:var(--panel);
  border:1px solid var(--panel-edge);
  border-radius:18px;
  transition:border-color .28s var(--ease), background .28s var(--ease);
}
.door:hover{ border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.05); }
.door .tag{
  margin:0; font-size:11px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--strip);
}
.door h3{ margin:0; font-size:clamp(22px,2.6vw,28px); font-weight:500; letter-spacing:-.02em; }
.door p{ margin:0; max-width:34ch; font-size:15px; line-height:1.5; color:var(--muted); }
.door .go{ margin-top:auto; padding-top:10px; display:flex; align-items:center; gap:10px; }
.door.primary{ background:rgba(245,245,240,.94); border-color:transparent; color:var(--pill-ink); }
.door.primary:hover{ background:#fff; }
.door.primary .tag{ color:rgba(5,5,5,.48); }
.door.primary h3{ color:var(--pill-ink); }
.door.primary p{ color:rgba(5,5,5,.62); }
.door.primary .pill{ background:var(--pill-ink); color:var(--pill); }
.door.primary .pill:hover{ background:#222; }

/* ── contrast tiles (agency / tool / us) ─────────────────────────────────── */
.tiles{
  display:grid; gap:14px; margin-top:40px;
  grid-template-columns:1fr;
}
@media (min-width:720px){ .tiles{ grid-template-columns:repeat(3,1fr); gap:16px; } }
.tile{
  padding:26px 24px 28px;
  background:var(--panel);
  border:1px solid var(--panel-edge);
  border-radius:16px;
  min-height:100%;
}
.tile .tag{
  margin:0; font-size:11px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--strip);
}
.tile h3{ margin:12px 0 0; font-size:20px; font-weight:500; letter-spacing:-.015em; }
.tile p{ margin:12px 0 0; max-width:28ch; font-size:15px; line-height:1.5; }
.tile.ours{
  background:rgba(245,245,240,.06);
  border-color:rgba(245,245,240,.16);
}
.tile.ours h3{ color:#fff; }

/* ── Bruce: four named parts ─────────────────────────────────────────────── */
.feats{
  display:grid; gap:14px; margin-top:40px;
  grid-template-columns:1fr;
}
@media (min-width:720px){ .feats{ grid-template-columns:1fr 1fr; gap:16px; } }
.feat{
  padding:28px 26px 30px;
  background:var(--panel);
  border:1px solid var(--panel-edge);
  border-radius:16px;
}
.feat .tag{
  margin:0; font-size:11px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--strip);
}
.feat h3{
  margin:12px 0 0;
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:500; letter-spacing:-.03em; line-height:1.05;
}
.feat p{ margin:14px 0 0; max-width:36ch; font-size:15px; line-height:1.5; }
.feat-live{
  background:rgba(245,245,240,.94);
  border-color:transparent;
  color:var(--pill-ink);
}
.feat-live .tag{ color:rgba(5,5,5,.48); }
.feat-live h3{ color:var(--pill-ink); }
.feat-live p{ color:rgba(5,5,5,.62); }

/* One sheet under the film. Names, not essays. */
.sheet{ padding:clamp(36px, 5vh, 52px) 0 44px; }
.sheet-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 32px;
}
.sheet-head .sec-lede{ margin:0; max-width:32ch; }
.works{
  list-style:none; margin:22px 0 0; padding:0;
  display:grid; grid-template-columns:1fr;
  border-top:1px solid var(--panel-edge);
}
.works li{
  display:grid; grid-template-columns:32px 1fr; column-gap:10px;
  padding:12px 0 13px; border-bottom:1px solid var(--panel-edge);
}
.works .n{
  grid-row:span 2; align-self:start; padding-top:3px;
  font-size:11px; letter-spacing:.12em; color:var(--strip);
  font-variant-numeric:tabular-nums;
}
.works b{ font-weight:500; font-size:16px; letter-spacing:-.02em; color:#fff; }
.works li > span:last-child{ font-size:13px; line-height:1.35; color:var(--muted); }
.works li.on{
  background:rgba(245,245,240,.94);
  margin:0 -12px; padding-left:12px; padding-right:12px;
  border-bottom-color:transparent;
}
.works li.on .n{ color:rgba(5,5,5,.42); }
.works li.on b{ color:#050505; }
.works li.on > span:last-child{ color:rgba(5,5,5,.58); }
.sheet-mid{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  margin-top:18px;
}
.sheet-mid .tag{
  margin:0; font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--strip);
}
.sheet-mid ul{
  display:flex; flex-wrap:wrap; gap:6px 0; list-style:none; margin:0; padding:0;
}
.sheet-mid li{ font-size:15px; color:#fff; }
.sheet-mid li + li::before{
  content:'·'; margin:0 10px; color:var(--strip);
}
.sheet-mid .pill{ margin-left:auto; height:40px; padding:0 18px; font-size:14px; }
.sheet .proof{ margin-top:22px; gap:18px 20px; }
.sheet .proof b{ font-size:clamp(28px, 3.2vw, 40px); }
.sheet .proof span{ margin-top:6px; font-size:13px; }
.sheet .fork{ margin-top:22px; }
.sheet .door{ padding:18px 20px 16px; gap:8px; }
.sheet .door p{ font-size:14px; }
@media (min-width:900px){
  .works{
    grid-template-columns:repeat(5, 1fr); gap:10px;
    border-top:none;
  }
  .works li{
    display:flex; flex-direction:column; gap:8px;
    padding:14px 12px 16px;
    background:var(--panel); border:1px solid var(--panel-edge); border-radius:14px;
  }
  .works .n{ padding-top:0; }
  .works b{ font-size:15px; line-height:1.2; }
  .works li.on{
    margin:0;
    background:rgba(245,245,240,.94); border-color:transparent;
  }
  .works li.on .n{ color:rgba(5,5,5,.4); }
  .works li.on b{ color:#050505; }
  .works li.on > span:last-child{ color:rgba(5,5,5,.58); }
  .sheet-head .sec-lede{ text-align:right; }
}

/* ── Bruce rail: four visible steps ──────────────────────────────────────── */
.rail{
  list-style:none; margin:40px 0 0; padding:0;
  display:grid; gap:14px;
  grid-template-columns:1fr;
}
@media (min-width:720px){ .rail{ grid-template-columns:1fr 1fr; gap:16px; } }
.rail li{
  position:relative;
  padding:28px 24px 28px;
  background:var(--panel);
  border:1px solid var(--panel-edge);
  border-radius:16px;
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.rail .num{
  flex:none;
  margin:0;
  font-size:clamp(36px,4.2vw,48px);
  font-weight:400;
  letter-spacing:-.04em;
  line-height:1;
  color:#fff;
  font-variant-numeric:tabular-nums;
  min-width:1.4em;
}
.rail .verb{
  display:block; margin:0 0 8px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--strip);
}
.rail h3{ margin:0; font-size:18px; font-weight:500; letter-spacing:-.01em; }
.rail p{ margin:10px 0 0; max-width:36ch; font-size:15px; line-height:1.5; }

/* big proof numbers */
.proof{
  display:grid; gap:28px; margin-top:8px;
  grid-template-columns:1fr 1fr;
}
@media (min-width:860px){ .proof{ grid-template-columns:repeat(4,1fr); gap:24px; } }
.proof b{
  display:block; font-size:clamp(36px,5vw,52px); font-weight:400;
  letter-spacing:-.03em; line-height:1; color:#fff;
  font-variant-numeric:tabular-nums;
}
.proof span{ display:block; margin-top:12px; font-size:14px; line-height:1.4; color:var(--muted); max-width:18ch; }

.below .acts{ margin-top:32px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }