:root{
  --paper:#E4E2DC; --ink:#111010; --white:#fff; --grey:#8B837C; --line:#cfcbc2;
  --display:"swear-display","Playfair Display",Georgia,serif;
  --ui:"Poppins",system-ui,sans-serif;
  --edge:clamp(16px,3vw,44px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink)}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--ui);overflow-x:hidden}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit}

/* ink flood layer — the black pours in (behind the type) */
#ink{position:fixed;inset:-16px;background:var(--ink);z-index:0;pointer-events:none;
  clip-path:inset(100% 0 0 0);will-change:clip-path;filter:blur(5px)}

/* chrome */
.chrome{position:fixed;z-index:60;font-family:var(--ui);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;color:var(--grey);transition:color .6s ease}
.chrome a{text-decoration:none}
#mark{top:var(--edge);left:var(--edge);font-weight:600;color:var(--ink)}
#topnav{top:var(--edge);left:50%;transform:translateX(-50%);display:flex;gap:1.6em}
#topnav a{color:var(--ink);transition:opacity .3s}
#topnav a:hover{opacity:.55}
#topnav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.38em;text-decoration-thickness:1px}
#prog{bottom:var(--edge);right:var(--edge)}
#credit{bottom:var(--edge);left:var(--edge)}
body.on-dark #mark,body.on-dark #topnav a{color:var(--paper)}
body.on-dark .chrome{color:#a49c92}
/* the bottom hairline = the floor the walker walks on; #pf = the trail filled behind it */
/* The Walker — a small brand figure that walks the bottom margin, one stride per section */
#walker{position:fixed;left:0;bottom:0;z-index:55;width:clamp(28px,3vw,42px);height:clamp(28px,3vw,42px);
  color:var(--ink);opacity:.66;pointer-events:none;will-change:transform;transition:color .6s ease,opacity .6s ease}
#walker svg{width:100%;height:100%;display:block}
body.on-dark #walker{color:var(--paper)}
@media(max-width:760px){#walker{width:28px;height:28px}}

/* a BLOCK = one Watson statement that fills the viewport; breathing lives between blocks */
.block{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:9vh var(--edge)}
.stmt{font-family:var(--display);font-weight:500;color:var(--ink);
  font-size:clamp(1.9rem,4.7vw,4.7rem);line-height:1.14;letter-spacing:-.013em;
  max-width:min(1200px,90vw);text-wrap:balance;text-align:center}
/* heading statements — sized so the LONGEST hand-broken line (origin's ~62 chars) fits on ONE line; wide measure + no balance/wrap so lines break only at the <br>s (follows the doc exactly) */
.stmt.big,.stmt.offer{font-size:clamp(1.7rem,min(3.4vw,7vh),3.5rem);line-height:1.14;max-width:97vw;text-wrap:normal}
.stmt.premise{max-width:min(1320px,95vw);text-wrap:normal}   /* fits "is for the people building" on one line */
.stmt.lead{font-size:clamp(3.2rem,10vw,10rem);line-height:.96;letter-spacing:-.024em;max-width:14ch}
/* long paragraphs: more words per line = fewer lines, stays inside one viewport */
.stmt.long{font-size:clamp(1.7rem,4.15vw,4.15rem);line-height:1.15;max-width:min(1420px,94vw)}
/* intro/body tier — small supporting copy (About premise), clearly under the heading statements */
.stmt.intro{font-size:clamp(1.2rem,2.5vw,2.4rem);line-height:1.4;letter-spacing:0;font-weight:400;max-width:min(1080px,86vw)}
/* About premise — two-column newspaper intro (caption + small body); fits one screen so Meet Isha is the 2nd scroll */
.premise{width:min(1180px,92vw);margin:0 auto;text-align:left}
.premise .tag{display:block;text-align:left;margin:0 0 1.7em}
.premise-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,5.5rem);align-items:stretch}
.premise-col{display:flex;flex-direction:column;justify-content:space-between;gap:1.6em}
.premise-cols p{font-family:var(--display);font-weight:400;font-size:clamp(1.02rem,1.5vw,1.4rem);line-height:1.5;letter-spacing:0;margin:0;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;color:var(--ink)}
.premise-cols em{font-style:italic;font-weight:500}
body.night .premise-cols p{color:#EDEBE6}
@media(max-width:760px){ .premise-cols{grid-template-columns:1fr;row-gap:1.6em} .premise-col{gap:1.6em} .premise-cols p{text-align:left;hyphens:manual} }
.logo{width:clamp(300px,58vw,720px);will-change:transform,opacity}
.logo img{width:100%;height:auto;display:block}
/* inline FTL wordmark (no figure) set into a sentence, e.g. "So we built [mark]." */
/* the FTL mark gets its own centred moment below "So we built" — Apple product-reveal spacing */
.origin .stmt.big{margin:0}
.ftl-mark{display:block;width:clamp(112px,12vw,172px);height:auto;margin:clamp(1.7rem,4.2vh,3.2rem) auto 0;will-change:transform,opacity}
.block.dark .ftl-mark,body.night .ftl-mark{filter:brightness(0) invert(1)}
@media(max-width:760px){ .ftl-mark{width:clamp(108px,30vw,150px);margin-top:clamp(1.3rem,3.6vh,2.3rem)} }
.hero-video{overflow:hidden}
.herovid{position:absolute;inset:0;z-index:0}
.herovid video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.herovid .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,16,16,.52),rgba(17,16,16,.26) 42%,rgba(17,16,16,.64))}
.hero-video .logo{position:relative;z-index:2}
.logo-light img{filter:brightness(0) invert(1)}
.hero-video .hero-stmt{color:var(--paper);font-size:clamp(1.2rem,2.4vw,1.9rem);line-height:1.16;max-width:min(680px,88vw)}
.hero-stmt .lnk{color:var(--paper);text-decoration-color:rgba(237,235,230,.55)}
/* Hero — Watson-style big-type statement on black; brand mark + line as one centred unit */
.hero-field{background:#0d0c0c}
/* the brand walking-figure block, set into the hero tagline — inherits .ph.tall sizing (matches the photo card); paper block + ink figure so it reads on the dark hero */
.hero-field .hero-dancer{box-sizing:border-box;background:var(--paper);border-radius:.07em;padding:.13em .09em;margin:0 .28em 0 0}
.hero-field .hero-dancer svg{position:static;width:100%;height:100%;display:block;fill:var(--ink)}
.hero-field .stmt{color:var(--paper)}
.hero-field .hero-lead{font-size:clamp(2.1rem,9vw,6.3rem);line-height:1.16;letter-spacing:-.02em;max-width:min(1180px,94vw);text-wrap:balance;margin:0}
.hero-field .nb{white-space:nowrap}   /* keep "For Tomorrow Labs" (+ figure) on one line, never split */
.hero-field .hero-lead .hero-dancer,.hero-field .hero-lead .hero-ph{height:1.1em;vertical-align:-.2em}   /* blocks ≤ line-height so no line is inflated → even leading */
@media(max-width:760px){ .hero-field .hb{display:none} }   /* desktop forces 3 lines (brand / is for the people building [gallery] / what's next); mobile wraps naturally */
.hero-field .lnk{text-decoration-color:#9c948b}
.hero-field .scrollcue{z-index:5}
.hero-ph{vertical-align:-.34em}
.hero-ph img{opacity:0}   /* intro flies big clones in, then reveals these in place */
.scrollcue{position:absolute;bottom:calc(var(--edge) + 6px);left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--ui);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--paper);
  text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:.8em;opacity:.85;cursor:pointer}
.scrollcue .arrow{font-size:1.05rem;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.ln{display:inline}
.stmt em{font-style:italic;font-weight:400}
.stmt strong{font-weight:700}
.block.dark .stmt{color:var(--paper)}
.tag{font-family:var(--ui);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--grey);font-weight:500;margin:0 0 2.2em}
.block.dark .tag{color:#a49c92}
/* role / credit line (About) */
.role{font-family:var(--ui);font-size:clamp(.66rem,.95vw,.82rem);letter-spacing:.13em;text-transform:uppercase;
  color:var(--grey);font-weight:500;margin:1.6em 0 0;max-width:min(760px,90vw)}
.block.dark .role{color:#a49c92}
/* Meet Isha — the portrait and the name as one founder-card unit */
.meet .tag{margin:0 0 clamp(1.3rem,2.8vh,2rem)}
.meet-portrait{margin:0 auto;height:clamp(300px,44vh,560px);aspect-ratio:4/5;max-width:86vw;overflow:hidden;background:#221f1e}
.meet-portrait img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) sepia(.12) contrast(1.03) brightness(1.02);transition:filter .6s ease}
.meet-portrait:hover img{filter:none}
.meet-name{margin:clamp(.9rem,2.4vh,1.6rem) 0 0}
.meet .role{margin:1em 0 0}
@media(max-width:760px){ .meet-portrait{height:clamp(280px,40vh,460px)} }

/* masked words */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .05em .22em;margin:-.14em -.05em -.22em}
.wi{display:inline-block;will-change:transform}

/* woven nav */
.lnk{cursor:pointer;white-space:nowrap;text-decoration:underline;text-decoration-thickness:.03em;
  text-underline-offset:.13em;text-decoration-color:var(--grey);transition:text-decoration-color .3s}
.lnk:hover{text-decoration-color:currentColor}
.block.dark .lnk{text-decoration-color:#a49c92}

/* inline photo (small, cycling) */
.ph{display:inline-block;height:1.02em;aspect-ratio:7/5;vertical-align:-.2em;margin:0 .13em;
  position:relative;overflow:hidden;background:var(--line);border-radius:1px}
.ph.tall{aspect-ratio:5/6;height:1.32em;vertical-align:-.34em}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) sepia(.12) contrast(1.03) brightness(1.02);transition:opacity .5s ease,filter .55s ease}
.ph:hover img{filter:none}
/* the dancing-figure block — one inline "screen" set into the origin line; the brand human dances inside it */
.origin .dancer{height:1.72em;aspect-ratio:5/6;vertical-align:-.46em;margin:0 .2em;
  background:var(--ink);border-radius:3px;padding:.16em .12em;box-sizing:border-box}
.origin .dancer svg{position:static;width:100%;height:100%;display:block;fill:var(--paper)}
@media(max-width:760px){ .origin .dancer{height:1.5em} }

/* big picture beat — sized by height so caption always stays in frame */
.bigpic{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:9vh var(--edge)}
.bigpic .pic{position:relative;aspect-ratio:4/5;height:56vh;max-width:88vw;overflow:hidden;background:var(--line);
  border-radius:2px;will-change:transform,clip-path}
.bigpic .pic.wide{aspect-ratio:16/10;height:52vh}
.bigpic .pic.square{aspect-ratio:1/1;height:60vh}
.bigpic .pic.band{aspect-ratio:1700/554;width:min(1060px,90vw);height:auto;max-width:90vw}
.bigpic .pic img,.bigpic .pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) sepia(.12) contrast(1.03) brightness(1.02);transition:opacity .6s ease,filter .6s ease}
.bigpic .pic:hover img,.bigpic .pic:hover video{filter:none}
.piccap{font-family:var(--display);font-weight:500;font-size:clamp(.95rem,1.65vw,1.5rem);line-height:1.3;
  letter-spacing:0;max-width:92vw;margin:1.1em 0 0;color:var(--ink);text-wrap:balance}
.bigpic .fig{font-family:var(--ui);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--grey);margin:0 0 1.3em}

/* CONTACT FORM — conversational, inline inputs in the scroll flow */
.cform{display:flex;flex-direction:column;align-items:center;text-align:center;width:min(1100px,92vw)}
.block.dark .cform{color:var(--paper)}          /* light form text on the dark contact block */
body.night .cform{color:#EDEBE6}
.cform-q{font-size:clamp(2rem,5.2vw,4.6rem);line-height:1.08;letter-spacing:-.022em;max-width:min(1000px,90vw)}
.cin{background:transparent;border:0;border-bottom:.05em solid currentColor;font:inherit;color:inherit;
  text-align:center;outline:none;padding:0 .12em;min-width:2ch;transition:border-color .3s ease}
.cin::placeholder{color:var(--grey);opacity:.75}
.cin:focus{border-bottom-color:currentColor}
.cin-lead{width:4ch}
.cline{font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,2.5vw,2.15rem);line-height:1.4;
  letter-spacing:-.01em;margin:1.3em 0 0;max-width:min(880px,92vw);color:inherit}
.cline .cin{min-width:5ch}.cin-em{min-width:11ch}.cin-ph{min-width:8ch}
.crow{display:flex;align-items:center;gap:1.5em;margin-top:2.2em;flex-wrap:wrap;justify-content:center;min-height:3em}
.csend{background:transparent;border:.05em solid currentColor;color:inherit;font-family:var(--ui);font-weight:500;
  font-size:clamp(.72rem,1vw,.9rem);letter-spacing:.05em;padding:.95em 1.6em;border-radius:2.4em;cursor:pointer;
  transition:background .35s ease,color .35s ease,opacity .3s ease;white-space:nowrap}
.csend span{display:inline-block;margin-left:.3em;transition:transform .35s ease}
.csend:hover{background:var(--ink);color:var(--paper)}
.csend:hover span{transform:translateX(5px)}
.block.dark .csend:hover{background:var(--paper);color:var(--ink)}
body.night .csend:hover{background:#EDEBE6;color:#100F0F}
.csend[disabled]{opacity:.5;cursor:default}
.cok{font-family:var(--ui);font-size:clamp(.82rem,1.1vw,.98rem);letter-spacing:.02em;color:var(--paper)}
.csub{margin-top:2.4em}
/* back to top */
.totop{margin:clamp(3.2rem,6.5vh,5.5rem) auto 0;background:transparent;border:0;color:var(--grey);opacity:.85;cursor:pointer;
  font-family:var(--ui);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  display:inline-flex;align-items:center;gap:.7em;transition:opacity .3s ease,color .3s ease}
.block.dark .totop,body.night .totop{color:#a49c92}
.totop:hover{opacity:1;color:var(--paper)}
body.night .totop:hover{color:#EDEBE6}
.totop .ta{font-size:1.1rem;line-height:1;display:inline-block;transition:transform .35s ease}
.totop:hover .ta{transform:translateY(-4px)}
.credit{font-family:var(--ui);font-size:.48rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin:2.6em 0 0;text-align:center}
.block.dark .credit,body.night .credit{color:#8a827a}
.credit .lnk{color:inherit;text-decoration-color:currentColor;text-underline-offset:.2em}
.contact{margin:2.8em auto 0;display:flex;gap:2em;flex-wrap:wrap;justify-content:center;
  font-family:var(--ui);font-size:clamp(.72rem,.9vw,.84rem);color:var(--grey);max-width:min(900px,92vw)}
.contact a{text-decoration:underline;text-underline-offset:.12em;text-decoration-color:var(--line)}
.block.dark .contact{color:#a49c92}
.block.dark .contact a{color:var(--paper);text-decoration-color:#555}

/* veil */
#veil{position:fixed;inset:0;background:#0d0c0c;z-index:100;display:flex;align-items:center;transition:opacity .6s ease;
  justify-content:center;transition:opacity .8s ease}
#veil.hide{opacity:0;pointer-events:none}
#veil .m{font-family:var(--ui);font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;color:var(--grey)}

/* ===== NIGHT — a fully dark page (About): no beige/black flip, just ink ground + light type ===== */
body.night{background:#100F0F;color:#EAE8E2}
body.night #ink{display:none}                       /* no flood on a page that's already dark */
body.night .stmt,body.night .stmt em,body.night .piccap{color:#EDEBE6}
body.night .tag,body.night .role,body.night .chrome,body.night .bigpic .fig,body.night .contact{color:#9c958b}
body.night #topnav a,body.night #walker{color:#EDEBE6}
body.night #topnav a:hover{opacity:.6}
body.night .lnk{text-decoration-color:#7f776d}
body.night .bigpic .pic{background:#221f1e}
body.night .contact a{color:#EDEBE6;text-decoration-color:#5a544c}
body.night ::selection{background:#EAE8E2;color:#100F0F}
body.night #veil{background:#100F0F}

@media(prefers-reduced-motion:reduce){ .wi{transform:none!important} }
@media(max-width:760px){ #topnav{font-size:.58rem;gap:1.4em} .stmt{font-size:7.4vw} .stmt.lead{font-size:13vw} .bigpic .pic{height:44vh}
  /* mobile: the hand-broken manifesto statements reflow naturally into balanced lines — the desktop <br>s are hidden here
     (a small script keeps a real space where each <br> was, so words never merge), and type is sized to stay readable */
  .stmt.big,.stmt.offer{font-size:6.6vw;line-height:1.18;max-width:88vw;text-wrap:balance}
  .stmt.intro{font-size:4.8vw;line-height:1.42;max-width:90vw;text-wrap:balance}
  .stmt.long{font-size:6vw;line-height:1.24;text-wrap:balance}
  .stmt.big br,.stmt.offer br:not(.hard),.stmt.intro br,.stmt.long br{display:none} }