@font-face{font-family:'IvyOra Text';src:url('fonts/ivyora-regular.woff2') format('woff2'),url('fonts/ivyora-regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IvyOra Text';src:url('fonts/ivyora-medium.woff2') format('woff2'),url('fonts/ivyora-medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IvyOra Text';src:url('fonts/ivyora-italic.woff2') format('woff2'),url('fonts/ivyora-italic.woff') format('woff');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Figtree';src:url('fonts/figtree-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('fonts/figtree-semibold.woff2') format('woff2'),url('fonts/figtree-semibold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('fonts/figtree-bold.woff2') format('woff2'),url('fonts/figtree-bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('fonts/cormorant-garamond-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('fonts/cormorant-garamond-medium-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
:root{
  --off:#f7f6f1; --green:#4c5b4e; --night:#151515; --leaf:#cae4d1; --orange:#ed5429;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--off);scroll-behavior:smooth}
body{font-family:'IvyOra Text','Cormorant Garamond',Georgia,serif;background:var(--off);color:var(--night);overflow-x:hidden}

/* ---- persistent wordmark ---- */
/* upper-left corner across the whole page; blend-difference adapts it
   per-pixel to whatever passes beneath — film, off-white, green */
#mark{position:fixed;top:26px;left:30px;z-index:50;pointer-events:none;mix-blend-mode:difference}
#mark img{height:13px;display:block}
#mark .m-black{display:none}
#mark .m-inv{opacity:0.95}

/* ---- the law of air ---- */
section{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:18vh 8vw;
  text-align:center;
}
/* large intentional side margins — every moment except the hero is inset from the edges */
section:not(#arrival){margin-left:12vw;margin-right:12vw}
/* ---- 3b · the trace, alone on white — full bleed, contour to the right ---- */
#trace-page{
  position:relative;overflow:hidden;
  flex-direction:row;justify-content:space-between;align-items:center;
  gap:5vw;
  padding:12vh 0;
  background:var(--off);
}
section#trace-page{margin:0}
#trace-page svg{height:76vh;width:auto;display:block;flex:0 0 auto}
/* the prototyping truth: Figtree at the statement scale, left of the mark */
.trace-note{
  flex:0 1 auto;
  margin-left:12vw;
  max-width:17em;
  font-family:'Figtree',sans-serif;font-weight:400;
  font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.5;
  text-align:left;
}
.trace-note strong{font-weight:700}

/* ---- 4 · the room: the film owns the whole page, hero-like ---- */
#room{
  position:relative;overflow:hidden;
  justify-content:center;align-items:center;
  padding:14vh 8vw;
  margin-top:14vh;margin-bottom:12vh;
  text-align:left;
}
section#room{margin-left:0;margin-right:0}
#room video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:0;
  background:var(--night);
}
.room-pair{
  position:relative;z-index:2;
  display:flex;justify-content:flex-start;align-items:center;
  gap:6vw;width:100%;
}
.room-text{
  flex:0 0 auto;
  display:flex;flex-direction:column;gap:6vh;
}
#room .statement{max-width:13em}
/* the slogan: three beats on three lines over the film — equal voices,
   Figtree twice then the Cormorant turn (x-height compensated), off-white */
.room-slogan{
  position:relative;z-index:2;
  font-family:'Figtree',sans-serif;font-weight:600;
  font-size:clamp(2rem,4.4vw,3.6rem);
  letter-spacing:0.02em;line-height:1.3;
  color:var(--off);
  text-shadow:0 1px 34px rgba(21,21,21,0.55);
}
.room-slogan span{display:block}
.room-slogan span + span{margin-top:0.175em}
.room-slogan .s3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.28em;line-height:1.15;letter-spacing:0}
.room-slogan .dot{display:inline}
.eyebrow{
  font-family:'Figtree',sans-serif;font-size:0.7rem;font-weight:600;
  letter-spacing:0.3em;text-transform:uppercase;
  color:var(--green);margin-bottom:7vh;
}
.statement{
  font-size:clamp(1.7rem,3.6vw,2.9rem);
  font-weight:500;line-height:1.5;
  max-width:21em;
}
.statement strong{font-weight:600}
.statement em{font-style:italic}

/* soft reveal — the only motion besides the films.
   Hidden state applies only when JS runs (html.js); without JS everything stays visible. */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1.4s ease, transform 1.4s ease}
.js .rv.in{opacity:1;transform:none}

/* choreography: grouped statements cascade in reading order instead of arriving at once */
.js #discipline .inner > .rv:nth-child(2){transition-delay:.12s}
.js #discipline .inner > .rv:nth-child(3){transition-delay:.24s}
.js #discipline .inner > .rv:nth-child(4){transition-delay:.36s}
.js .room-text > .rv:nth-child(2){transition-delay:.15s}
.js #door form.rv{transition-delay:.18s}
/* the slogan's three beats land one by one */
.js .room-slogan span{opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform .9s ease}
.js .room-slogan.in span{opacity:1;transform:none}
.js .room-slogan.in .s2{transition-delay:.35s}
.js .room-slogan.in .s3{transition-delay:.6s}
/* the four partners arrive left to right */
.js .partners figure{opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1s ease}
.js .partners.in figure{opacity:1;transform:none}
.js .partners.in figure:nth-child(2){transition-delay:.12s}
.js .partners.in figure:nth-child(3){transition-delay:.24s}
.js .partners.in figure:nth-child(4){transition-delay:.36s}

::selection{background:var(--leaf);color:var(--night)}

/* ---- language toggle: discreet, top right of the hero ---- */
#lang{
  position:absolute;top:26px;right:30px;z-index:3;
  display:flex;align-items:center;gap:0.5em;
  font-family:'Figtree',sans-serif;font-size:0.7rem;font-weight:600;
  letter-spacing:0.18em;color:var(--off);
}
#lang span{opacity:0.4}
#lang button{
  font:inherit;letter-spacing:inherit;color:inherit;
  background:none;border:none;padding:0.4em 0.2em;cursor:pointer;
  opacity:0.5;transition:opacity .3s ease;
}
#lang button[aria-pressed="true"]{opacity:1;text-decoration:underline;text-underline-offset:0.35em;text-decoration-thickness:1px}
#lang button:hover{opacity:0.85}
#lang button:focus-visible{outline:2px solid var(--leaf);outline-offset:3px;opacity:1}

/* ---- 1 · arrival ---- */
/* 92vh, not 100: the off-white strip below the fold lets the film breathe and invites the scroll */
#arrival{position:relative;padding:0;overflow:hidden;background:var(--night);min-height:92vh}
#arrival video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
#arrival .veil{position:absolute;inset:0;background:rgba(21,21,21,0.26)}
#hero-trace{
  position:relative;z-index:2;
  height:min(40.8vh,360px);width:auto;
  margin-bottom:9vh;
  pointer-events:none;opacity:0.92;
}
#arrival .statement{
  position:relative;z-index:2;color:var(--off);
  font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.35;
  text-shadow:0 1px 34px rgba(21,21,21,0.5);
  max-width:16em;
}
/* two voices: bold sans states, the serif answers.
   Cormorant's small x-height is compensated with a 1.28em scale. */
.h-sans{font-family:'Figtree',sans-serif;font-weight:700;letter-spacing:-0.01em}
.h-serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.28em;line-height:1.15}
#arrival .h-serif{line-height:1.05}

/* ---- 3 · sun's truth / 4 · promise: film sections ---- */
.film-section{position:relative;padding:0;overflow:hidden;color:var(--off);background:var(--night)}
.film-section video,
.film-section .film-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* gradient scrim: strong at the top where the eyebrow meets the bright sky,
   light in the middle so the landscape breathes, gently weighted at the base */
.film-section .veil{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(21,21,21,0.88) 0%, rgba(21,21,21,0.78) 30%,
  rgba(21,21,21,0.24) 52%, rgba(21,21,21,0.24) 72%,
  rgba(21,21,21,0.5) 100%)}
.film-section .inner{position:relative;z-index:2;padding:18vh 8vw;display:flex;flex-direction:column;align-items:center}
.film-section .eyebrow{color:var(--leaf)}
.film-section .statement{text-shadow:0 1px 34px rgba(21,21,21,0.55)}
.film-section .statement + .statement{margin-top:5vh}
/* the discipline moment runs full bleed like the hero */
section#discipline{margin-left:0;margin-right:0}

/* ---- 3 · a new discipline: calmer type scale — one voice leads, the rest support ---- */
#discipline .statement{font-size:clamp(1.2rem,2.1vw,1.7rem);line-height:1.65;max-width:26em}
/* Cormorant voice for the supporting line, x-height compensated (x1.28) */
#discipline .statement.h-serif{font-size:clamp(1.55rem,2.7vw,2.2rem);line-height:1.55;max-width:24em}
#discipline .lead{font-size:clamp(1.6rem,2.9vw,2.3rem);line-height:1.45;max-width:19em}
/* the name is the peak of the section — larger than the lead that introduces it */
#discipline .closer{font-size:clamp(1.8rem,3.6vw,2.9rem);color:var(--leaf)}
/* lead-in in the eyebrow's voice, paired tight with the name it introduces */
#discipline .closer .call{
  display:block;
  font-family:'Figtree',sans-serif;font-size:0.7rem;font-weight:600;
  letter-spacing:0.3em;text-transform:uppercase;
  color:var(--leaf);
  margin-bottom:1.1em;
}

/* ---- 5 · founders ---- */
#founders{padding:20vh 8vw}
#founders blockquote{
  font-size:clamp(1.4rem,2.6vw,2rem);font-weight:600;line-height:1.5;
  max-width:22em;margin:0 auto 10vh;
  color:var(--night);
}
.partners{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2.6vw;
  width:100%;max-width:1100px;margin:0 auto 10vh;
}
.partners img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:8px;
  filter:saturate(0.85);
  transition:filter .5s ease;
}
.partners figure:hover img{filter:saturate(1)}
.partners figure{display:flex;flex-direction:column;align-items:center}
.partners figcaption{display:flex;flex-direction:column;gap:0.45em;margin-top:1.3em}
.p-name{font-size:clamp(1rem,1.5vw,1.15rem);font-weight:500}
.p-role{
  font-family:'Figtree',sans-serif;font-size:0.7rem;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--green);
}
.more-note{
  font-style:italic;font-size:clamp(1rem,1.6vw,1.2rem);
  color:var(--green);
  margin:-5vh auto 9vh;
}
.founders-body{
  font-size:clamp(1.15rem,1.9vw,1.4rem);font-weight:500;line-height:1.75;
  max-width:46em;margin:0 auto 5vh;
  text-wrap:balance;
}
.founders-body.italic{font-style:italic}

/* ---- 6 · door: a deep green room — off-white letters on #4c5b4e, full bleed ---- */
section#door{background:var(--green);color:var(--off);margin-left:0;margin-right:0}
#door .statement{margin-bottom:9vh}
/* the invitation speaks at the hero's scale */
#door .statement{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.35}
#door label{color:var(--off)}
#door input,#door textarea{color:var(--off);border-bottom-color:rgba(247,246,241,0.35)}
#door input:focus,#door textarea:focus{border-bottom-color:var(--orange)}
#door .field-note{color:var(--leaf)}
#door .once{color:var(--off);opacity:0.8}
#door .cta:focus-visible{outline-color:var(--leaf)}
form{width:100%;max-width:24em;text-align:left}
label{
  font-family:'Figtree',sans-serif;font-size:0.7rem;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--green);
  display:block;margin:2em 0 0.45em;
}
input,textarea{
  width:100%;font-family:'IvyOra Text','Cormorant Garamond',Georgia,serif;font-size:1.3rem;font-weight:500;
  color:var(--night);background:transparent;border:none;
  border-bottom:1px solid rgba(21,21,21,0.28);padding:0.45em 0;border-radius:0;
}
textarea{resize:vertical;line-height:1.5;min-height:5.5em}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--orange)}
.field-note{
  font-style:italic;font-size:1rem;line-height:1.5;
  color:var(--green);margin-top:0.6em;
}
.field-note:empty{display:none}
.cta{
  display:block;margin:3.4em auto 0;
  font-family:'Figtree',sans-serif;font-weight:600;font-size:1rem;letter-spacing:0.03em;
  color:var(--off);background:var(--orange);border:none;border-radius:999px;
  padding:1.15em 2.8em;cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(237,84,41,0.28)}
.cta:active{transform:scale(0.98);box-shadow:0 5px 18px rgba(237,84,41,0.22);transition-duration:.08s}
.cta:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.once{
  font-family:'Figtree',sans-serif;font-size:0.72rem;letter-spacing:0.16em;
  text-transform:uppercase;opacity:0.66;margin-top:2.2em;text-align:center;
}
/* ---- 7 · signature ---- */
#sig{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5vh}
#sig svg{width:min(39vw,264px);height:auto;opacity:0.92;overflow:visible}
/* the trace within the isotype: contour line first, then it fills the same black */
.js #sig-trace{
  fill-opacity:0;
  stroke:#151515;stroke-width:1.4;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.js #sig svg.in #sig-trace{
  animation:trace-draw 1.6s ease .4s forwards, trace-fill .9s ease 2.2s forwards;
}
@keyframes trace-draw{to{stroke-dashoffset:0}}
/* the contour dissolves as the fill arrives — the finished mark is the pure vector, no stroke */
@keyframes trace-fill{to{fill-opacity:1;stroke-opacity:0}}
#sig small{
  font-family:'Figtree',sans-serif;font-size:0.62rem;letter-spacing:0.2em;
  text-transform:uppercase;opacity:0.6;
}
#sig small a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}

@media (max-width:760px){
  .partners{grid-template-columns:repeat(2,1fr);gap:5vw}
  section{padding:16vh 7vw}
  section:not(#arrival){margin-left:6vw;margin-right:6vw}
  section#door{margin-left:0;margin-right:0}
  section#room{margin-left:0;margin-right:0}
  section#discipline{margin-left:0;margin-right:0}
  section#trace-page{margin:0;padding:10vh 7vw}
  #trace-page{flex-direction:column;justify-content:center;align-items:center;gap:7vh}
  #trace-page svg{height:auto;width:62vw;max-height:56vh;align-self:center}
  .trace-note{margin-left:0;text-align:center}
  #mark{left:24px}
  #lang{right:24px}
  #room{margin-top:10vh}
  .room-pair{flex-direction:column;gap:7vh}
  .room-text{flex:0 0 auto}
}
@media (prefers-reduced-motion: reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .js .room-slogan span,.js .partners figure{opacity:1;transform:none;transition:none}
  .cta{transition:none}
  .cta:hover{transform:none}
  .cta:active{transform:none}
  .partners img{transition:none}
  html{scroll-behavior:auto}
  .js #sig-trace{fill-opacity:1;stroke:none;stroke-dashoffset:0;animation:none !important}
}