/* THE FILM — a single page that behaves like a title sequence.
   Dark by default, type-led, one idea per screen. Nothing here is a "component": every rule
   exists to serve a beat in the script. */

:root{
  --ink:#f4f7f4;
  --ink-dim:rgba(244,247,244,.62);
  --ink-faint:rgba(244,247,244,.34);
  --green:#5ce49b;
  --green-deep:#12a150;
  --gold:#f5c069;
  --black:#040a07;
  --film-ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box}
html{background:var(--black)}
body{margin:0;background:var(--black);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,88vw);margin:0 auto}

/* Lenis wants this; without it the wheel feels normal and the whole point is lost. */
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}

/* ── grain over the entire film, like a print ─────────────────────────────── */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  background-size:150px 150px;mix-blend-mode:screen}

/* Letterbox bars that close in at the very start and open again — the title-sequence trick. */
.bars i{position:fixed;left:0;right:0;height:0;background:#000;z-index:80;pointer-events:none;
  transition:height 1.4s var(--film-ease)}
.bars i:first-child{top:0}
.bars i:last-child{bottom:0}
body.curtain .bars i{height:12vh}

/* ── the opening title ────────────────────────────────────────────────────── */
.title-card{position:relative;height:100vh;display:grid;place-items:center;text-align:center;overflow:hidden;
  padding:12vh 4vw 18vh}
.title-card .plate{position:absolute;inset:0;object-fit:cover;opacity:0;transform:scale(1.18);
  filter:saturate(.9) brightness(.55)}
.title-card .vig{position:absolute;inset:0;background:
  radial-gradient(70% 60% at 50% 45%,transparent,rgba(4,10,7,.86) 78%),
  linear-gradient(0deg,var(--black),transparent 40%)}
.title-card .line{position:relative;z-index:2;font-size:clamp(26px,4.6vw,62px);line-height:1.06;
  letter-spacing:-2px;font-weight:850;max-width:22ch;margin:0 auto}
.title-card .line .w{display:inline-block;opacity:0;transform:translateY(.4em)}
.title-card .sub{position:relative;z-index:2;margin-top:24px;font-size:15px;letter-spacing:3px;
  text-transform:uppercase;color:var(--ink-faint);opacity:0}
.scroll-cue{position:absolute;bottom:4.5vh;left:50%;transform:translateX(-50%);z-index:3;
  font-size:10.5px;letter-spacing:3.4px;text-transform:uppercase;color:var(--ink-faint);opacity:0}
.scroll-cue::after{content:"";display:block;width:1px;height:38px;margin:12px auto 0;
  background:linear-gradient(180deg,var(--ink-faint),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.5);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ── a scene: one photograph, one sentence ────────────────────────────────── */
.scene{position:relative;min-height:100vh;display:grid;align-items:center;overflow:clip}
.scene .plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);will-change:transform;filter:saturate(.92)}
.scene .grade{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,10,7,.94),rgba(4,10,7,.6) 46%,rgba(4,10,7,.2) 78%),
             linear-gradient(0deg,rgba(4,10,7,.9),transparent 52%)}
.scene--right .grade{background:linear-gradient(270deg,rgba(4,10,7,.94),rgba(4,10,7,.6) 46%,rgba(4,10,7,.2) 78%),
             linear-gradient(0deg,rgba(4,10,7,.9),transparent 52%)}
.scene--center .grade{background:radial-gradient(60% 55% at 50% 50%,rgba(4,10,7,.35),rgba(4,10,7,.9) 80%)}
.scene .body{position:relative;z-index:2;width:min(620px,84vw)}
.scene--right .body{margin-left:auto;text-align:right}
.scene--center .body{margin:0 auto;text-align:center;width:min(880px,88vw)}
.chapter{display:block;font-size:11px;letter-spacing:3.6px;text-transform:uppercase;color:var(--green);
  margin-bottom:18px}
.scene h2{font-size:clamp(30px,5vw,64px);line-height:1.04;letter-spacing:-2px;font-weight:850;margin:0}
.scene p{margin:22px 0 0;font-size:clamp(16px,1.4vw,19px);line-height:1.62;color:var(--ink-dim);max-width:46ch}
.scene--right p{margin-left:auto}
.scene--center p{margin-left:auto;margin-right:auto}

/* One word inside a sentence can carry the whole line. */
.hi{color:var(--green)}
.hi-gold{color:var(--gold)}

/* ── the held word: black frame, one sentence, nothing else ───────────────── */
.beat{min-height:86vh;display:grid;place-items:center;text-align:center;background:var(--black)}
.beat p{font-size:clamp(26px,4.2vw,56px);line-height:1.12;letter-spacing:-1.6px;font-weight:820;
  max-width:20ch;margin:0}
.beat small{display:block;margin-top:22px;font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700}

/* ── the growth sequence: three lives, one platform ───────────────────────── */
.lives{padding:16vh 0;background:linear-gradient(180deg,var(--black),#071410 40%,var(--black))}
.lives-head{text-align:center;margin-bottom:9vh}
.lives-head h2{font-size:clamp(28px,4.4vw,58px);line-height:1.05;letter-spacing:-2px;font-weight:850;margin:0}
.lives-head p{margin:18px auto 0;max-width:52ch;color:var(--ink-dim);font-size:17px}
.life{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;
  padding:8vh 0;border-top:1px solid rgba(244,247,244,.08)}
.life:nth-child(even) .life-img{order:2}
@media(max-width:860px){.life{grid-template-columns:1fr}.life:nth-child(even) .life-img{order:0}}
.life-img{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9)}
.life-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--film-ease)}
.life:hover .life-img img{transform:scale(1.12)}
.life-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,10,7,.5),transparent 60%)}
.life .who{display:block;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--green);margin-bottom:14px}
.life h3{font-size:clamp(24px,3vw,38px);line-height:1.1;letter-spacing:-1.2px;font-weight:830;margin:0}
.life p{margin:18px 0 0;color:var(--ink-dim);font-size:16.5px;line-height:1.6;max-width:44ch}
.life .then{display:inline-block;margin-top:22px;padding:7px 14px;border-radius:100px;font-size:12.5px;
  font-weight:750;color:var(--green);background:rgba(92,228,155,.1);border:1px solid rgba(92,228,155,.3)}

/* ── the counter: the quiet fact after the feeling ────────────────────────── */
.fact{min-height:80vh;display:grid;place-items:center;text-align:center;position:relative;overflow:clip}
.fact .n{font-size:clamp(70px,15vw,190px);line-height:.9;font-weight:850;letter-spacing:-6px;
  background:linear-gradient(120deg,var(--green-deep),var(--green) 55%,#a8ffd0);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.fact .cap{margin-top:20px;font-size:clamp(16px,2vw,22px);color:var(--ink-dim);max-width:30ch}

/* ── closing ──────────────────────────────────────────────────────────────── */
.end{position:relative;min-height:100vh;display:grid;place-items:center;text-align:center;overflow:clip}
.end .plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.9)}
.end .grade{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,transparent,rgba(4,10,7,.9) 82%)}
.end .body{position:relative;z-index:2}
.end h2{font-size:clamp(30px,5.4vw,72px);line-height:1.04;letter-spacing:-2.4px;font-weight:850;margin:0;
  max-width:18ch}
.end p{margin:22px auto 0;max-width:44ch;color:var(--ink-dim);font-size:17px}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:34px;padding:16px 34px;border-radius:100px;
  background:linear-gradient(140deg,var(--green),var(--green-deep));color:#04140a;font-weight:850;font-size:16.5px;
  box-shadow:0 24px 60px -18px rgba(18,161,80,.9);transition:transform .25s var(--film-ease)}
.cta:hover{transform:translateY(-3px)}
.cta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.end-links{margin-top:26px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap;
  font-size:13.5px;color:var(--ink-faint)}
.end-links a:hover{color:var(--green)}

/* ── chrome: a mark, a progress thread, a chapter marker ──────────────────── */
.mark{position:fixed;top:22px;left:26px;z-index:70;display:flex;align-items:center;gap:10px;
  font-weight:800;font-size:15px;letter-spacing:.2px;mix-blend-mode:difference}
.mark img{width:26px;height:26px;object-fit:contain}
.thread{position:fixed;top:0;left:0;height:2px;width:0;z-index:75;
  background:linear-gradient(90deg,var(--green-deep),var(--green));box-shadow:0 0 14px var(--green)}
.marker{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:70;display:flex;
  flex-direction:column;gap:11px;align-items:flex-end}
.marker span{width:18px;height:2px;background:rgba(244,247,244,.22);transition:width .4s var(--film-ease),background .4s}
.marker span.on{width:34px;background:var(--green)}
@media(max-width:760px){.marker{display:none}.mark{top:16px;left:16px}}

/* ── motion defaults; JS adds .in when a beat arrives ─────────────────────── */
.rise{opacity:0;transform:translateY(30px)}
.rise.in{opacity:1;transform:none;transition:opacity 1s var(--film-ease),transform 1s var(--film-ease)}
.rise.d1{transition-delay:.12s}.rise.d2{transition-delay:.24s}.rise.d3{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none}
  .title-card .plate{opacity:1;transform:none}
  .title-card .line .w,.title-card .sub,.scroll-cue{opacity:1;transform:none}
  .scene .plate{transform:none}
  .bars i{display:none}
  .scroll-cue::after{animation:none}
}

/* ══ v2 — three tempos, the drawn circle, the product, the trade, the gag ═════
   The diagnosis that drove this: every element entered the same way, so the page had one
   tempo, and one tempo reads as solemn however good the words are. */

.rise--snap.rise{transition-duration:.45s}
.rise--drift.rise{transition-duration:1.8s}
.scene--tight{min-height:92vh}
.scene--tightest{min-height:85vh}

/* the light in the room lags after the cursor — only on the title card, only with a mouse */
.beam{position:absolute;inset:-30%;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(245,192,105,.13),transparent 70%);
  mix-blend-mode:screen;transition:opacity 1.2s ease}
.beam.on{opacity:1}

/* the title is two lines with a held comma between them */
.title-card .line .l1{display:block}
.title-card .line .l2{display:block;margin-top:.12em}

/* an afterthought, dropped in after the paragraph has settled */
.aside{margin-top:18px !important;font-size:15px !important;color:var(--ink-faint) !important;
  font-style:italic;max-width:38ch}

/* a photograph inhales while you read it, and stops the moment you scroll */
.scene .plate.holding{transform:scale(1.135) !important;transition:transform 6s cubic-bezier(.22,.61,.36,1)}

/* the screen where even the interface leaves */
body.hush .mark,body.hush .marker,body.hush .thread{opacity:0;transition:opacity .7s ease}
.mark,.marker,.thread{transition:opacity .7s ease}

/* ── the turn: the circle, drawn ───────────────────────────────────────────── */
/* Stacked, not overlaid. The ring used to sit behind the words as decoration; now it carries the
   seventeen names and a middle you have to read, and text on top of it made both unreadable. */
.turn{position:relative;min-height:104vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(24px,4vh,52px);text-align:center;padding:12vh 0;
  background:radial-gradient(70% 60% at 50% 45%,#0a1a13,var(--black) 78%);overflow:clip}
.turn-body{position:relative;z-index:3;max-width:640px;padding:0 22px}
.turn h2{font-size:clamp(30px,5vw,64px);line-height:1.04;letter-spacing:-2px;font-weight:850;margin:0}
.turn p{margin:22px auto 0;max-width:46ch;color:var(--ink-dim);font-size:17px;line-height:1.6}
.ring-cap{display:block;margin-top:26px;font-size:12px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--green)}
/* The seventeen tools by name on one ring, wired to a middle that changes — the concentric
   journey view from the product, drawn at page scale. It contracts as the section passes, so the
   tools visibly close in on the goal while the words say they are already there.
   It does NOT rotate: the caption promises the tools never move. */
.ring{position:relative;flex:none;width:min(52vh,520px);aspect-ratio:1;
  transform:scale(var(--ring-scale,1.06));
  transition:transform .6s linear;z-index:1;pointer-events:none}
.ring::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px dashed rgba(92,228,155,.16)}

.ring-links{position:absolute;inset:0;width:100%;height:100%}
.ring-links line{stroke:rgba(92,228,155,.14);stroke-width:.22}

/* Each label sits on the circle and is counter-rotated, so the ring is round but the words stay
   level — a name you have to tilt your head for is not a name you read. */
.ring-tool{position:absolute;left:50%;top:50%;width:0;height:0;
  transform:rotate(calc(var(--i) * var(--step))) translateY(calc(-1 * min(26vh,260px)))}
.ring-tool b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)
    rotate(calc(-1 * var(--i) * var(--step)));
  display:block;white-space:nowrap;font-size:12.5px;font-weight:600;letter-spacing:.2px;
  color:rgba(233,255,242,.72);background:rgba(6,18,13,.72);
  border:1px solid rgba(92,228,155,.22);border-radius:999px;padding:5px 11px;
  box-shadow:0 0 18px rgba(92,228,155,.10)}

/* The middle. One goal at a time, cross-faded — the only thing in the diagram that changes. */
.ring-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  min-width:min(22vh,210px);min-height:min(22vh,210px);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:22px;text-align:center;
  background:radial-gradient(circle at 50% 42%,rgba(92,228,155,.16),rgba(6,18,13,.9) 68%);
  border:1px solid rgba(92,228,155,.34);
  box-shadow:0 0 60px rgba(92,228,155,.18) inset,0 0 40px rgba(92,228,155,.10)}
.ring-core small{position:absolute;left:50%;top:34%;transform:translateX(-50%);font-size:11px;letter-spacing:2.6px;text-transform:uppercase;
  color:rgba(92,228,155,.75)}
.ring-goal{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);
  width:86%;font-size:clamp(16px,2.2vh,22px);font-weight:750;line-height:1.2;color:#eafff3;
  opacity:0;transition:opacity .5s ease}
.ring-goal.is-on{opacity:1}

@media(max-width:760px){
  .ring-tool b{font-size:10.5px;padding:4px 8px}
  .ring-core{min-width:min(19vh,160px);min-height:min(19vh,160px)}
}

/* ── the product, because a film that never shows the thing is an advert ───── */
.proof{padding:14vh 0;background:linear-gradient(180deg,var(--black),#06120d,var(--black))}
.proof .chapter{text-align:center}
.proof h2{text-align:center;font-size:clamp(26px,4vw,52px);line-height:1.06;letter-spacing:-1.8px;
  font-weight:850;margin:0}
.proof > .wrap > p{text-align:center;margin:20px auto 6vh;max-width:52ch;color:var(--ink-dim);font-size:17px}
.proof-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.proof-shot{margin:0;border-radius:14px;overflow:hidden;background:#0b1610;
  border:1px solid rgba(244,247,244,.1);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.proof-shot img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.proof-shot figcaption{padding:13px 15px;font-size:13px;color:var(--ink-faint)}

/* ── the trade: deliberately the plainest block on the page ────────────────── */
.trade{min-height:76vh;display:grid;place-items:center;background:var(--black);text-align:center}
.trade h2{font-size:clamp(26px,4vw,52px);letter-spacing:-1.8px;font-weight:850;margin:0}
.trade p{margin:22px auto 0;max-width:56ch;color:var(--ink-dim);font-size:17px;line-height:1.65}

/* ── lives: alternating entry direction, and the line that passes between them ─ */
.life--flip .life-img{order:2}
@media(max-width:860px){.life--flip .life-img{order:0}}
.life-img img{will-change:transform;transform:translateZ(0) scale(1.06)}
.warm{margin-top:16px !important;color:var(--green) !important;font-size:16px !important}

/* ── the gag ───────────────────────────────────────────────────────────────── */
.fact .cap{position:relative;min-height:3.2em}
.fact .cap-a,.fact .cap-b{position:absolute;left:50%;transform:translateX(-50%);width:min(30ch,86vw);
  transition:opacity .5s ease}
.fact .cap-b{opacity:0}
.fact.flipped .cap-a{opacity:0}
.fact.flipped .cap-b{opacity:1}
.cap-price{display:block;margin-top:5.2em;font-size:13.5px;color:var(--ink-faint)}

/* ── the ending ────────────────────────────────────────────────────────────── */
.end h2 .w{display:inline-block;opacity:0;transform:translateY(.35em)}
body.credits .bars i{height:8vh}
body.credits-out .bars i{height:12vh}
.thanks{margin-top:34px;font-size:12px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--ink-faint);opacity:0;transition:opacity 1.2s ease}
.thanks.on{opacity:1}
.cta{position:relative;overflow:hidden;opacity:0;transform:scale(.94)}
.cta.on{opacity:1;transform:none;transition:opacity .5s var(--film-ease),transform .6s cubic-bezier(.34,1.56,.64,1)}
.cta::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg)}
.cta.sheen::after{animation:sheen 1s ease-out 1}
.cta:hover::after{animation:sheen 1s ease-out 1}
@keyframes sheen{from{left:-60%}to{left:120%}}
.cta:hover svg{transform:translateX(4px);transition:transform .25s var(--film-ease)}

/* ── chapter marks that name themselves ───────────────────────────────────── */
.marker span{position:relative}
.marker b{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
  white-space:nowrap;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;
  color:var(--ink-faint);opacity:0;pointer-events:none;transition:opacity .3s ease}
.marker:hover b{opacity:1}
.marker span{cursor:pointer}

@media (prefers-reduced-motion:reduce){
  .ring{transform:scale(1)}
  .ring-goal{transition:none}
  .scene .plate.holding{transition:none}
  .cta{opacity:1;transform:none}
  .end h2 .w{opacity:1;transform:none}
  .thanks{opacity:1}
  .beam{display:none}
}

/* v2 blocks that the film needs but v1 never had */
.turn .chapter,.proof .chapter,.trade .chapter{margin-bottom:16px}
.trade .chapter{color:var(--gold)}

/* A growth arc needs two points and the distance between them. */
.span{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--ink-faint)}
.span i{font-style:normal;white-space:nowrap}
.span b{flex:1;height:1px;background:linear-gradient(90deg,rgba(244,247,244,.18),var(--green));
  position:relative}
.span b::after{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;margin-top:-2.5px;
  border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.growth-beat h2{color:#fff}
.growth-beat .chapter{color:var(--green)}
.turn-after{margin-top:18px !important;font-size:15.5px !important;color:var(--ink-faint) !important;max-width:42ch}

/* ── why any of this works ─────────────────────────────────────────────────
   The only explanatory beat in the film, so it is set quieter than the ones around it: three
   columns, no image, nothing moving. The argument is the picture here. */
.senses{padding:15vh 0 13vh}
.senses h2{margin:0;font-size:clamp(28px,4.4vw,54px);line-height:1.08;letter-spacing:-1.6px;font-weight:850;
  max-width:19ch}
.senses > .wrap > p{margin:24px 0 0;max-width:60ch;font-size:clamp(15px,1.6vw,18.5px);line-height:1.62;
  color:rgba(244,247,244,.74)}
.senses-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:46px 0 0}
@media(max-width:820px){.senses-grid{grid-template-columns:1fr;gap:20px}}
.sense{padding:24px 22px 22px;border-radius:18px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1)}
.sense b{display:block;font-size:17px;font-weight:800;letter-spacing:-.3px;margin-bottom:9px;color:var(--green)}
.sense p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(244,247,244,.72)}
.senses-after{margin:34px 0 0;max-width:58ch;font-size:clamp(15px,1.6vw,18px);line-height:1.6;
  font-weight:650;color:rgba(244,247,244,.9)}
.sense{padding:0 0 22px;overflow:hidden}
.sense-plate{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:18px 18px 0 0;margin:-1px -1px 18px}
.sense-plate img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.85) contrast(1.05);transition:transform 1.2s var(--film-ease)}
.sense:hover .sense-plate img{transform:scale(1.04)}
.sense b,.sense p{padding:0 22px}

/* ── the bigger room ───────────────────────────────────────────────────────
   Full-bleed plate with the words low and left, so the U of screens keeps the top of the frame. */
.room{position:relative;min-height:92vh;display:grid;align-items:end;overflow:hidden}
.room .plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.room .grade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(4,10,7,.94) 8%,rgba(4,10,7,.55) 45%,rgba(4,10,7,.15) 100%)}
.room-body{padding:0 0 12vh;max-width:760px}
.room-body h2{margin:0;font-size:clamp(30px,5vw,62px);line-height:1.05;letter-spacing:-1.8px;font-weight:850}
.room-body p{margin:22px 0 0;max-width:56ch;font-size:clamp(15px,1.6vw,18.5px);line-height:1.62;
  color:rgba(244,247,244,.78)}

/* Which tools this goal reaches for. Dimming the rest rather than hiding it keeps the claim
   honest: all seventeen are still there, five of them are simply the ones in play. */
.ring-tool{transition:opacity .7s var(--film-ease),color .7s var(--film-ease),transform .7s var(--film-ease)}
.ring-tool:not(.is-lit){opacity:.3}
.ring-tool.is-lit{opacity:1;color:var(--green);transform:scale(1.06)}

/* ── everybody grows ───────────────────────────────────────────────────────
   Four rooms that are not offices. Set as a quiet grid: the argument is the range, and a range
   reads better as a list than as four paragraphs pretending to be scenes. */
.everybody{padding:14vh 0 12vh}
.everybody h2{margin:0;font-size:clamp(30px,5.2vw,64px);line-height:1.04;letter-spacing:-2px;font-weight:850}
.everybody > .wrap > p{margin:24px 0 0;max-width:58ch;font-size:clamp(15px,1.6vw,18.5px);line-height:1.62;
  color:rgba(244,247,244,.74)}
.everybody-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:46px 0 0}
@media(max-width:820px){.everybody-grid{grid-template-columns:1fr}}
.ecase{padding:24px 22px;border-radius:18px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1)}
.ecase b{display:block;font-size:16.5px;font-weight:800;margin-bottom:9px;color:var(--green)}
.ecase p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(244,247,244,.72)}
.everybody-after{margin:34px 0 0;max-width:56ch;font-size:clamp(15px,1.6vw,18px);line-height:1.6;
  font-weight:650;color:rgba(244,247,244,.9)}

/* The promise, with a room behind it. Darker grade than the other plates: the words are the
   point here and the photograph is only there to say who the hours are for. */
.growth-beat--lit{position:relative;isolation:isolate;overflow:hidden}
.growth-beat--lit .plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.growth-beat--lit .grade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(92deg,rgba(4,10,7,.95) 12%,rgba(4,10,7,.82) 52%,rgba(4,10,7,.5) 100%)}