/* ============================================================
   ANKUR — Brand stylesheet
   Inkwell Black / Parchment / Field Green (scalpel, not paint)
   Cormorant Garamond + Courier New
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  /* palette */
  --inkwell:#1A1A1A;
  --parchment:#F5F3EE;
  --field:#2D5016;
  --field-light:#3A6B1C;
  --sage:#C8D8B8;
  --granite:#4A4744;
  --stone:#E8E4DC;
  --muted:#6A6764;

  /* deep field-green used for contrast/feature sections (replaces harsh black) */
  --feature-bg:#23401A;
  --footer-bg:#1C2E15;
  --feature-num:#D7E7AF;

  /* derived */
  --accent:var(--field);
  --hairline:#DAD5CB;            /* hairline on parchment */
  --hairline-dark:rgba(245,243,238,.14);

  /* type */
  --serif:'Cormorant Garamond', Georgia, serif;
  --body-serif:'Cormorant Garamond', Georgia, serif;
  --mono:'Courier New', Courier, monospace;

  /* rhythm */
  --maxw:1240px;
  --measure:62ch;
  --pad-x:clamp(22px, 5vw, 80px);
  --section-y:clamp(40px, 5vw, 76px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* body font swap via tweak */
html[data-bodyfont="eb"]{ --body-serif:'EB Garamond', Georgia, serif; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scrollbar-width:none; }
html::-webkit-scrollbar{ width:0; height:0; display:none; }
body{
  margin:0;
  background:var(--parchment);
  color:var(--inkwell);
  font-family:var(--body-serif);
  font-size:18px;
  line-height:1.5;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }

/* ---------- type primitives ---------- */
.label{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--granite);
  font-weight:400;
}
.label--green{ color:var(--field); }
.label--light{ color:rgba(245,243,238,.6); }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  margin:0;
  text-wrap:balance;
}
.display{
  font-size:clamp(2.1rem, 4.4vw, 3.7rem);
  line-height:1.03;
  letter-spacing:-.022em;
  font-weight:600;
}
.h2{
  font-size:clamp(1.7rem, 3.4vw, 2.7rem);
  line-height:1.08;
  letter-spacing:-.018em;
  font-weight:600;
}
.h3{
  font-size:clamp(1.2rem, 1.8vw, 1.55rem);
  line-height:1.18;
  letter-spacing:-.01em;
  font-weight:600;
}
.lede{
  font-size:clamp(1.1rem, 1.5vw, 1.35rem);
  line-height:1.48;
  font-weight:500;
  color:var(--granite);
  letter-spacing:-.005em;
}
.prose{ max-width:var(--measure); }
.prose p{ margin:0 0 1em; }
.prose p:last-child{ margin-bottom:0; }
.muted{ color:var(--muted); }
em{ font-style:italic; }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad-x); }
.section{ padding-block:var(--section-y); position:relative; }
/* clear the fixed nav when jumping to an anchor (top-aligned sections only;
   the full-height centered sections center their own content) */
#story, #model, #why, #traction, #team, #partners{ scroll-margin-top:60px; }
.section--ink{ background:var(--feature-bg); color:var(--parchment); }
.section--ink .label{ color:rgba(245,243,238,.55); }
.section--ink .lede{ color:rgba(245,243,238,.72); }
.section--ink .muted{ color:rgba(245,243,238,.5); }
.eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.eyebrow::before{
  content:""; width:34px; height:1px; background:var(--field);
}
.section--ink .eyebrow::before{ background:var(--field-light); opacity:.9; }
.idx{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--muted); }
.section--ink .idx{ color:rgba(245,243,238,.4); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:15px 26px; border-radius:2px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:.45s var(--ease);
  font-weight:400;
}
.btn .arrow{ transition:transform .45s var(--ease); }
.btn:hover .arrow{ transform:translateX(5px); }
.btn--primary{ background:var(--field); color:var(--parchment); }
.btn--primary:hover{ background:var(--field-light); }
.btn--ghost{ background:transparent; color:var(--inkwell); border-color:var(--hairline); }
.btn--ghost:hover{ border-color:var(--inkwell); }
.btn--ghost-light{ background:transparent; color:var(--parchment); border-color:rgba(245,243,238,.3); }
.btn--ghost-light:hover{ border-color:rgba(245,243,238,.8); }

/* text link */
.tlink{
  font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--field); display:inline-flex; align-items:center; gap:.55em;
  border-bottom:1px solid transparent; padding-bottom:3px; transition:.4s var(--ease);
}
.tlink .arrow{ transition:transform .4s var(--ease); }
.tlink:hover{ border-color:var(--field); }
.tlink:hover .arrow{ transform:translateX(4px); }
.section--ink .tlink{ color:var(--sage); }
.section--ink .tlink:hover{ border-color:var(--sage); }

/* ============================================================
   NAV
   ============================================================ */
:root{ --safe-top: env(safe-area-inset-top, 0px); }
#nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad-x);
  padding-top:calc(18px + var(--safe-top));
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
#nav.scrolled{
  background:rgba(245,243,238,.86);
  backdrop-filter:saturate(1.1) blur(12px);
  border-bottom-color:var(--hairline);
  padding-block:13px;
  padding-top:calc(13px + var(--safe-top));
}
/* over dark hero -> light text */
#nav.on-dark{ --nav-fg:var(--parchment); }
#nav{ --nav-fg:var(--inkwell); }
#nav.on-dark.scrolled{ background:rgba(26,26,26,.82); border-bottom-color:var(--hairline-dark); }

.nav-logo{ height:24px; width:auto; transition:filter .4s var(--ease); }
#nav.on-dark .nav-logo{ filter:invert(1); }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--nav-fg); opacity:.62; transition:.35s var(--ease);
  position:relative; padding-block:4px;
}
.nav-links a:hover{ opacity:1; }
.nav-links a.active{ opacity:1; }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--field);
}
#nav.on-dark .nav-links a.active::after{ background:var(--sage); }
.nav-cta{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; padding:11px 20px; border:1px solid var(--field); border-radius:2px;
  background:var(--field); color:var(--parchment); transition:.35s var(--ease);
}
.nav-cta:hover{ background:var(--field-light); border-color:var(--field-light); }

/* mobile hamburger + overlay menu */
.nav-burger{ display:none; width:44px; height:44px; padding:0; border:none; background:none; cursor:pointer; position:relative; flex:none; }
.nav-burger span{ position:absolute; left:11px; right:11px; height:1.5px; background:var(--nav-fg); transition:transform .35s var(--ease), opacity .25s var(--ease); }
.nav-burger span:nth-child(1){ top:17px; }
.nav-burger span:nth-child(2){ bottom:17px; }
body.nav-open .nav-burger span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2){ transform:translateY(-5px) rotate(-45deg); }
body.nav-open .nav-burger span{ background:var(--parchment); }
body.nav-open .nav-logo{ filter:invert(1); }
.nav-menu{ display:none; }
@media(max-width:760px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{ display:block; }
  .nav-menu{
    display:flex; flex-direction:column; justify-content:center; gap:8px;
    position:fixed; inset:0; z-index:45; background:var(--inkwell);
    padding:0 32px; opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  }
  body.nav-open{ overflow:hidden; }
  /* nav blends into the dark menu when open, even over light sections */
  body.nav-open #nav{ background:transparent !important; border-bottom-color:transparent !important; backdrop-filter:none !important; }
  body.nav-open .nav-menu{ opacity:1; visibility:visible; transform:none; }
  .nav-menu a{
    font-family:var(--serif); font-size:2rem; line-height:1.5; font-weight:600;
    letter-spacing:-.01em; color:var(--parchment); text-decoration:none; opacity:.78;
  }
  .nav-menu a.active{ opacity:1; color:var(--sage); }
  .nav-menu-cta{
    margin-top:22px; font-family:var(--mono)!important; font-size:13px!important; font-weight:400!important;
    letter-spacing:.14em!important; text-transform:uppercase; color:var(--parchment)!important;
    border:1px solid var(--field); background:var(--field); border-radius:2px;
    padding:14px 24px; align-self:flex-start; opacity:1!important;
  }
}
.nav-burger{ display:none; }
@media(max-width:760px){ .nav-burger{ display:block; } }

/* ============================================================
   HERO
   ============================================================ */
#hero{
  position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end;
  background:var(--inkwell); color:var(--parchment); overflow:hidden;
}
#hero .hero-bg{ position:absolute; inset:0; z-index:0; }
#hero .hero-bg image-slot{ width:100%; height:100%; }
#hero .hero-bg .hero-photo{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
#hero .hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(26,26,26,.55) 0%, rgba(26,26,26,.32) 35%, rgba(26,26,26,.66) 100%);
}
#hero .hero-grid-lines, #hero .hero-overlay-edit{ pointer-events:none; }
#hero .hero-inner{
  position:relative; z-index:2; width:100%;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x) clamp(40px,6vh,72px);
  display:flex; flex-direction:column; align-items:flex-start; pointer-events:none;
}
#hero .hero-inner .hero-actions, #hero .hero-inner .hero-actions a, #hero .hero-inner .powered a{ pointer-events:auto; }
.hero-wordmark{ height:clamp(48px, 8vw, 96px); width:auto; margin-bottom:clamp(28px,5vh,52px); }
#hero .display{ max-width:16ch; }
#hero .hero-sub{ max-width:40ch; margin-top:18px; margin-bottom:0; color:rgba(245,243,238,.82); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.powered{
  display:flex; align-items:center; gap:9px; margin-top:32px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(245,243,238,.5);
}
.powered::before{ content:""; width:24px; height:1px; background:rgba(245,243,238,.3); }
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(245,243,238,.45); display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue .line{ width:1px; height:38px; background:linear-gradient(rgba(245,243,238,.5), transparent); animation:cue 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%{transform:scaleY(0);opacity:0} 30%{opacity:1} 100%{transform:scaleY(1);opacity:0} }

/* hero variant: editorial (split) */
#hero[data-hero="editorial"]{ align-items:stretch; }
#hero[data-hero="editorial"] .hero-overlay{ display:none; }
#hero[data-hero="editorial"] .hero-bg{ left:auto; right:0; width:42%; }
#hero[data-hero="editorial"] .hero-bg .hero-overlay-edit{ position:absolute; inset:0; background:linear-gradient(90deg,var(--inkwell),transparent 30%); }
#hero[data-hero="editorial"] .hero-inner{ display:flex; align-items:flex-end; }
@media(max-width:860px){ #hero[data-hero="editorial"] .hero-bg{ width:100%; opacity:.4; } }

/* hero variant: type (no photo) */
#hero[data-hero="type"] .hero-bg{ display:none; }
#hero[data-hero="type"] .hero-overlay{
  display:block;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(45,80,22,.22), transparent 55%),
    var(--inkwell);
}
#hero[data-hero="type"]{ align-items:center; }
#hero[data-hero="type"] .display{ font-size:clamp(3rem, 8.5vw, 7rem); max-width:14ch; }
#hero[data-hero="type"] .hero-grid-lines{ display:block; }
.hero-grid-lines{ display:none; position:absolute; inset:0; z-index:1; opacity:.5;
  background-image:linear-gradient(rgba(245,243,238,.05) 1px, transparent 1px);
  background-size:100% 56px; mask-image:linear-gradient(transparent, #000 40%, transparent); }

/* ============================================================
   PROBLEM
   ============================================================ */
.problem-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,5vw,80px); align-items:center; }
#problem .display{ max-width:18ch; margin-bottom:22px; }
#problem .closer{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.35rem,2.2vw,1.85rem); line-height:1.3; color:var(--inkwell);
  margin-top:24px; max-width:24ch;
}
.problem-img image-slot{ width:100%; aspect-ratio:4/4.4; }
@media(max-width:880px){ .problem-grid{ grid-template-columns:1fr; } .problem-img{ order:-1; } .problem-img image-slot{ aspect-ratio:16/9; } }

/* ============================================================
   STORY
   ============================================================ */
#story{ background:var(--parchment); }
.story-head{ max-width:var(--maxw); margin:0 auto 32px; }
#story .display{ max-width:16ch; }
.story-body{ display:grid; grid-template-columns:1fr; gap:0; max-width:var(--maxw); margin:0 auto; }
.story-cols{ display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(36px,5vw,80px); align-items:start; }
.story-prose{ max-width:54ch; font-size:17px; line-height:1.46; }
.story-prose p{ margin:0 0 .85em; }
.story-media{ display:flex; flex-direction:column; gap:18px; position:sticky; top:88px; }
.story-media image-slot{ width:100%; }
.story-media .s1{ aspect-ratio:4/3; }
.story-media .s2{ aspect-ratio:5/4; }
.pullquote{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.2; letter-spacing:-.012em;
  padding:4px 0 4px 28px; border-left:3px solid var(--field); margin:24px 0;
  max-width:24ch; color:var(--inkwell);
}
@media(max-width:880px){ .story-cols{ grid-template-columns:1fr; } .story-media{ position:static; flex-direction:row; } .story-media image-slot{ flex:1; } }

/* ---- Story: interactive scrollytelling ---- */
#story[data-story-mode="interactive"] .story-cols{ display:none; }
#story[data-story-mode="prose"] .story-scrolly{ display:none; }
.story-scrolly{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:stretch; max-width:var(--maxw); margin:0 auto; }
.scrolly-stage{ position:relative; }
.stage-frame{ position:sticky; top:calc((100vh - min(74vh,580px)) / 2); height:min(74vh,580px); border:1px solid transparent; background:transparent; overflow:hidden; transition:border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), border-radius .4s var(--ease); }
/* diagram panel styles (tweakable) */
#story[data-diagram-panel="hairline"] .stage-frame{ border-color:var(--hairline); background:linear-gradient(180deg,#fbfaf7,#f1eee7); }
#story[data-diagram-panel="card"] .stage-frame{ background:linear-gradient(180deg,#fbfaf7,#f1eee7); border-radius:4px; box-shadow:0 22px 60px -32px rgba(26,26,26,.5); }
#story[data-diagram-panel="tint"] .stage-frame{ background:#EFEDE6; }
.frame-deco{ display:none; position:absolute; inset:0; pointer-events:none; z-index:5; --dc:var(--hairline); --ds:24px; --dt:1.5px; }
#story[data-diagram-panel="corners"] .frame-deco{ display:block;
  background:
    linear-gradient(var(--dc),var(--dc)) 0 0 / var(--ds) var(--dt) no-repeat,
    linear-gradient(var(--dc),var(--dc)) 0 0 / var(--dt) var(--ds) no-repeat,
    linear-gradient(var(--dc),var(--dc)) 100% 0 / var(--ds) var(--dt) no-repeat,
    linear-gradient(var(--dc),var(--dc)) 100% 0 / var(--dt) var(--ds) no-repeat,
    linear-gradient(var(--dc),var(--dc)) 0 100% / var(--ds) var(--dt) no-repeat,
    linear-gradient(var(--dc),var(--dc)) 0 100% / var(--dt) var(--ds) no-repeat,
    linear-gradient(var(--dc),var(--dc)) 100% 100% / var(--ds) var(--dt) no-repeat,
    linear-gradient(var(--dc),var(--dc)) 100% 100% / var(--dt) var(--ds) no-repeat; }
#story[data-diagram-panel="rules"] .frame-deco{ display:block;
  background:
    linear-gradient(var(--dc),var(--dc)) 0 0 / 100% var(--dt) no-repeat,
    linear-gradient(var(--dc),var(--dc)) 0 100% / 100% var(--dt) no-repeat; }
/* hide chrome during the full-frame question */
.stage-frame:has(.scene--statement.active){ border-color:transparent !important; background:none !important; box-shadow:none !important; }
.stage-frame:has(.scene--statement.active) .frame-deco{ display:none !important; }
.scene{ position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.985); transition:opacity .7s var(--ease), transform .7s var(--ease); pointer-events:none; }
.scene.active{ opacity:1; transform:none; }
.scene-svg{ width:88%; height:88%; }
.scene-svg .rule{ stroke:var(--hairline); stroke-width:1.5; }
.scene-svg .s-cap{ font-family:var(--mono); font-size:15px; letter-spacing:.12em; text-transform:uppercase; fill:var(--muted); }
.scene-svg .s-num{ font-family:var(--serif); font-size:34px; font-weight:600; fill:var(--field); }
.scene-svg .frame-bar{ fill:none; stroke:var(--hairline); stroke-width:1.5; }
.scene-svg .bar{ fill:var(--field); transform:scaleY(0); transform-box:fill-box; transform-origin:bottom; transition:transform 1s var(--ease); }
.scene-svg .bar.b2{ fill:var(--field-light); }
.scene.active .bar{ transform:scaleY(1); }
.scene.active .bar.b2{ transition-delay:.18s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadein{ to{ opacity:1; } }
/* scene 0 — India rising */
.scene-svg .growth-area{ fill:var(--field); opacity:0; transition:opacity 1.2s var(--ease) .35s; }
.scene.active .growth-area{ opacity:.13; }
.scene-svg .growth-line{ fill:none; stroke:var(--field); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:541; stroke-dashoffset:541; }
.scene.active .growth-line{ animation:draw 1.25s linear forwards; }
/* scene 2 — the question (full frame, no graphic) */
.stage-frame:has(.scene--statement.active){ border-color:transparent; background:none; }
.scene--statement{ position:fixed; inset:0; z-index:6; }
.scene--statement .statement{ text-align:center; width:min(88%, 760px); }
.statement-rule{ display:block; width:48px; height:3px; background:var(--field); margin:0 auto 30px; }
.statement-q{ font-family:var(--serif); font-weight:600; font-size:clamp(2rem,3.7vw,3.1rem); line-height:1.18; letter-spacing:-.014em; color:var(--inkwell); margin:0; text-wrap:balance; }
/* tweak: question full-frame vs in-text */
#story[data-question-mode="in-text"] .scene--statement{ display:none; }
#story[data-question-mode="full-frame"] .q-caption{ visibility:hidden; }
.q-caption{ max-width:46ch; opacity:.4; transition:opacity .5s var(--ease); }
.q-rule{ display:block; width:42px; height:3px; background:var(--field); margin-bottom:20px; }
.q-caption p{ font-family:var(--serif); font-weight:600; font-size:clamp(1.55rem,2.6vw,2.25rem); line-height:1.22; letter-spacing:-.012em; color:var(--inkwell); margin:0; text-wrap:pretty; }
.scrolly-step--q.current .q-caption{ opacity:1; }
/* scene 4 — the lone plot, sun rising over it (left to right) */
.scene-svg .arc{ fill:none; stroke:var(--hairline); stroke-width:1.5; stroke-dasharray:3 7; }
.scene-svg .horizon{ stroke:var(--hairline); stroke-width:1.5; }
.scene-svg .sun-core{ fill:var(--field-light); }
.scene-svg .sun-rays line{ stroke:var(--field-light); stroke-width:2.5; stroke-linecap:round; }
.scene-svg .sun-g{ offset-path:path("M100 344 A 180 180 0 0 1 460 344"); offset-distance:0%; offset-rotate:0deg; }
.scene.active .sun-g{ animation:arcmove 3.6s var(--ease) forwards; }
@keyframes arcmove{ from{ offset-distance:0%; } to{ offset-distance:100%; } }
.scene-svg .ghost{ fill:#b9b4a9; }
.scene-svg .lone{ fill:var(--field); }
/* scene 5 — fragmented */
.scene-svg .frags rect{ fill:var(--field); opacity:.34; stroke:#fbfaf7; stroke-width:3; transform:scale(.6); transform-box:fill-box; transform-origin:center; transition:transform .5s var(--ease), opacity .5s var(--ease); }
.scene.active .frags rect{ transform:none; }
.scene.active .frags rect:nth-child(odd){ opacity:.5; }
/* scene 6 — one precision zone + Ankur watermark */
.scene-svg .zone{ fill:var(--field); transform:scale(.7); transform-box:fill-box; transform-origin:center; opacity:0; transition:transform .9s var(--ease), opacity .9s var(--ease); }
.scene.active .zone{ transform:none; opacity:1; }
.scene-svg .zone-grid line{ stroke:rgba(245,243,238,.4); stroke-width:1.5; }
.scene-svg .zone-mark{ font-family:var(--serif); font-weight:600; font-size:104px; letter-spacing:-.01em; fill:var(--watermark-color, #F5F3EE); opacity:0; }
.scene.active .zone-mark{ animation:watermark 1.6s var(--ease) .5s forwards; }
@keyframes watermark{ to{ opacity:.2; } }
.scrolly-steps{ display:flex; flex-direction:column; padding-bottom:14vh; }
.scrolly-step{ min-height:72vh; display:flex; align-items:center; }
.scrolly-step:first-child{ min-height:72vh; align-items:center; }
.scrolly-step:last-child{ min-height:80vh; }
.step-card{ display:flex; gap:18px; max-width:46ch; opacity:.4; transition:opacity .5s var(--ease); }
.scrolly-step.current .step-card{ opacity:1; }
.step-num{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; color:var(--field); padding-top:9px; }
.step-card p{ font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.28; letter-spacing:-.01em; margin:0; color:var(--inkwell); font-weight:500; }
@media(max-width:880px){
  .story-scrolly{ display:block; position:relative; }
  /* diagram floats pinned at the top — no box; captions scroll up and fade beneath it */
  .scrolly-stage{ position:sticky; top:calc(var(--safe-top, 0px) + 50px); z-index:3; height:42vh; pointer-events:none;
    background:var(--parchment); border:none; box-shadow:none; }
  /* soft dissolve just below the diagram so captions fade as they slide under it */
  .scrolly-stage::after{ content:""; position:absolute; top:100%; left:0; right:0; height:70px;
    background:linear-gradient(to bottom, var(--parchment), rgba(245,243,238,0)); }
  .stage-frame{ position:static; top:auto; height:100%; z-index:1;
    background:transparent !important; border:none !important; box-shadow:none !important; }
  .frame-deco{ display:none !important; }
  .scrolly-steps{ position:relative; z-index:1; padding-top:4vh; padding-bottom:24vh; }
  .scrolly-step{ min-height:54vh; }
  .scrolly-step:first-child{ min-height:30vh; }
  .scrolly-step:last-child{ min-height:60vh; }
  .step-card{ opacity:.3; }
  .step-card p{ font-size:1.32rem; }
  .step-num{ font-size:11px; padding-top:6px; }
  /* full-frame question must be opaque so captions don't show through it */
  .scene--statement{ z-index:6; background:var(--parchment); }
}

/* ============================================================
   MODEL
   ============================================================ */
#model .model-head{ margin-bottom:40px; max-width:var(--maxw); }
#model .display{ max-width:14ch; }
.model-img{ margin:4px 0 32px; }
.model-img image-slot{ width:100%; aspect-ratio:24/7; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
.step{ background:var(--parchment); padding:clamp(24px,2.4vw,36px); display:flex; flex-direction:column; gap:14px; }
.step-top{ display:flex; align-items:center; gap:13px; }
.step-num{ font-family:var(--serif); font-size:2.4rem; line-height:1; color:var(--field); font-weight:600; }
.step-icon{ width:30px; height:30px; color:var(--field); margin:0; flex:none; transform:translateY(3px); }
.step h3{ margin-bottom:2px; }
.step p{ margin:0; color:var(--granite); font-size:17px; line-height:1.48; }
#model[data-model-icons="off"] .step-icon{ display:none; }

/* ---- Model layout: ROWS (editorial stacked) ---- */
#model[data-model-layout="rows"] .steps{ display:flex; flex-direction:column; gap:0; background:none; border:none; border-top:1px solid var(--hairline); }
#model[data-model-layout="rows"] .step{ background:none; display:grid; grid-template-columns:auto 1fr; column-gap:clamp(26px,5vw,72px); row-gap:8px; align-items:start; padding:clamp(24px,2.8vw,40px) 0; border-bottom:1px solid var(--hairline); }
#model[data-model-layout="rows"] .step-top{ grid-row:1 / span 2; flex-direction:column; align-items:flex-start; gap:14px; }
#model[data-model-layout="rows"] .step-num{ font-size:clamp(2.6rem,4vw,3.4rem); }
#model[data-model-layout="rows"] .step-icon{ width:30px; height:30px; }
#model[data-model-layout="rows"] .step h3{ grid-column:2; align-self:center; font-size:clamp(1.4rem,2vw,1.8rem); }
#model[data-model-layout="rows"] .step p{ grid-column:2; max-width:64ch; font-size:18px; }

/* ---- Model layout: FLOW (connected process) ---- */
#model[data-model-layout="flow"] .steps{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:none; border:none; align-items:start; padding-top:8px; }
/* connector line through the node centres */
#model[data-model-layout="flow"] .steps::before{ content:""; position:absolute; top:52px; left:16.66%; right:16.66%; height:1.5px; background:var(--hairline); z-index:0; }
#model[data-model-layout="flow"] .step{ position:relative; background:none; padding:0 clamp(20px,2.4vw,40px); text-align:center; align-items:center; gap:20px; }
/* the node: a ringed circle holding the icon, with a numbered badge */
#model[data-model-layout="flow"] .step-top{ position:relative; width:88px; height:88px; border-radius:50%; border:1.5px solid var(--field); background:var(--parchment); display:flex; align-items:center; justify-content:center; z-index:1; box-shadow:0 0 0 6px var(--parchment); }
#model[data-model-layout="flow"] .step-icon{ display:block; width:38px; height:38px; color:var(--field); margin:0; transform:none; }
#model[data-model-layout="flow"] .step-num{ position:absolute; right:-7px; bottom:-7px; width:30px; height:30px; border-radius:50%; background:var(--field); color:var(--parchment); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; font-weight:400; line-height:1; }
/* directional chevrons sitting on the connector, between nodes */
#model[data-model-layout="flow"] .step:not(:last-child)::after{ content:""; position:absolute; top:52px; right:-6px; width:9px; height:9px; border-top:1.5px solid var(--field); border-right:1.5px solid var(--field); transform:translateY(-50%) rotate(45deg); z-index:2; }
#model[data-model-layout="flow"] .step h3{ font-size:clamp(1.35rem,1.9vw,1.7rem); }
#model[data-model-layout="flow"] .step p{ text-align:center; max-width:34ch; margin-inline:auto; font-size:17px; }

/* ---- Model layout: MINIMAL (typographic, no boxes) ---- */
#model[data-model-layout="minimal"] .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(32px,4vw,68px); background:none; border:none; }
#model[data-model-layout="minimal"] .step{ background:none; padding:0; gap:14px; }
#model[data-model-layout="minimal"] .step-icon{ display:none; }
#model[data-model-layout="minimal"] .step-top{ border-bottom:1px solid var(--hairline); padding-bottom:16px; }
#model[data-model-layout="minimal"] .step-num{ font-size:clamp(3rem,5vw,4rem); }
#model[data-model-layout="minimal"] .step h3{ font-size:clamp(1.4rem,2vw,1.8rem); }
#model[data-model-layout="minimal"] .step p{ font-size:18px; }

/* ---- Model layout: PANEL (drastic — deep-green feature block) ---- */
#model[data-model-layout="panel"] .steps{ background:rgba(245,243,238,.16); border:1px solid rgba(245,243,238,.16); }
#model[data-model-layout="panel"] .step{ background:var(--feature-bg); color:var(--parchment); }
#model[data-model-layout="panel"] .step h3{ color:var(--parchment); }
#model[data-model-layout="panel"] .step p{ color:rgba(245,243,238,.74); }
#model[data-model-layout="panel"] .step-num, #model[data-model-layout="panel"] .step-icon{ color:var(--feature-num); }
@media(max-width:760px){ .steps{ grid-template-columns:1fr; } .model-img image-slot{ aspect-ratio:16/9; }
  #model[data-model-layout="flow"] .steps, #model[data-model-layout="minimal"] .steps{ grid-template-columns:1fr; }
  #model[data-model-layout="flow"] .steps{ gap:40px; }
  #model[data-model-layout="flow"] .steps::before, #model[data-model-layout="flow"] .step:not(:last-child)::after{ display:none; } }

/* ============================================================
   WHY (What we do differently)
   ============================================================ */
#why .why-head{ max-width:var(--maxw); margin:0 auto 30px; }
#why .display{ max-width:15ch; }
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
.card{ background:var(--parchment); padding:clamp(24px,2.2vw,36px); display:flex; flex-direction:column; gap:13px; min-height:200px; }
.card-icon{ width:30px; height:30px; color:var(--field); }
.card h3{ font-size:clamp(1.2rem,1.6vw,1.45rem); }
.card p{ margin:0; color:var(--granite); font-size:16.5px; line-height:1.46; }
.card--stat{ background:var(--inkwell); color:var(--parchment); justify-content:space-between; }
.card--stat .big{ font-family:var(--serif); font-size:clamp(3rem,5vw,4.2rem); color:var(--sage); line-height:.95; font-weight:600; }
.card--stat p{ color:rgba(245,243,238,.62); }
.card--stat .label{ color:rgba(245,243,238,.5); }
@media(max-width:560px){ .cards{ grid-template-columns:1fr; } }

/* ---- Why layout: OPEN (borderless, airy grid) ---- */
#why[data-why-layout="open"] .cards{ background:none; border:none; gap:clamp(30px,3.4vw,56px) clamp(34px,4vw,72px); }
#why[data-why-layout="open"] .card{ background:none; padding:0; min-height:0; gap:14px; }

/* ---- Why layout: LEDGER (stacked editorial rows) ---- */
#why[data-why-layout="ledger"] .cards{ display:flex; flex-direction:column; gap:0; background:none; border:none; border-top:1px solid var(--hairline); }
#why[data-why-layout="ledger"] .card{ background:none; min-height:0; padding:clamp(22px,2.4vw,34px) 0; border-bottom:1px solid var(--hairline); display:grid; grid-template-columns:40px minmax(200px,.9fr) 1.6fr; align-items:start; gap:clamp(20px,3vw,56px); }
#why[data-why-layout="ledger"] .card-icon{ width:30px; height:30px; margin-top:2px; }
#why[data-why-layout="ledger"] .card h3{ margin:0; align-self:start; font-size:clamp(1.25rem,1.7vw,1.5rem); }
#why[data-why-layout="ledger"] .card p{ font-size:17px; }
@media(max-width:720px){ #why[data-why-layout="ledger"] .card{ grid-template-columns:34px 1fr; } #why[data-why-layout="ledger"] .card p{ grid-column:2; } }

/* ---- Why layout: INDEX (numbered ledger, two columns) ---- */
#why[data-why-layout="index"] .cards{ counter-reset:cap; display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(40px,5vw,88px); gap:0; background:none; border:none; border-top:1px solid var(--hairline); }
#why[data-why-layout="index"] .card{ counter-increment:cap; background:none; min-height:0; border-bottom:1px solid var(--hairline); padding:clamp(20px,2vw,28px) 0; display:grid; grid-template-columns:auto 1fr; column-gap:20px; row-gap:8px; align-items:start; }
#why[data-why-layout="index"] .card-icon{ display:none; }
#why[data-why-layout="index"] .card::before{ content:counter(cap,decimal-leading-zero); grid-row:1 / span 2; font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--field); padding-top:5px; }
#why[data-why-layout="index"] .card h3{ grid-column:2; }
#why[data-why-layout="index"] .card p{ grid-column:2; }
@media(max-width:680px){ #why[data-why-layout="index"] .cards{ grid-template-columns:1fr; } }

/* ---- Why layout: PANEL (deep-green feature block) ---- */
#why[data-why-layout="panel"] .cards{ background:rgba(245,243,238,.16); border:1px solid rgba(245,243,238,.16); }
#why[data-why-layout="panel"] .card{ background:var(--feature-bg); color:var(--parchment); }
#why[data-why-layout="panel"] .card h3{ color:var(--parchment); }
#why[data-why-layout="panel"] .card p{ color:rgba(245,243,238,.74); }
#why[data-why-layout="panel"] .card-icon{ color:var(--feature-num); }

/* ---- Why: all four in one row (applies to the grid-based layouts) ---- */
#why[data-why-cols="4"][data-why-layout="grid"] .cards,
#why[data-why-cols="4"][data-why-layout="open"] .cards,
#why[data-why-cols="4"][data-why-layout="panel"] .cards{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){
  #why[data-why-cols="4"][data-why-layout="grid"] .cards,
  #why[data-why-cols="4"][data-why-layout="open"] .cards,
  #why[data-why-cols="4"][data-why-layout="panel"] .cards{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){
  #why[data-why-cols="4"][data-why-layout="grid"] .cards,
  #why[data-why-cols="4"][data-why-layout="open"] .cards,
  #why[data-why-cols="4"][data-why-layout="panel"] .cards{ grid-template-columns:1fr; } }

/* ============================================================
   TRACTION
   ============================================================ */
#traction{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding-block:clamp(28px,4vh,56px); }
#traction .display{ max-width:14ch; margin-bottom:8px; }
.stat-band{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:clamp(16px,2.4vh,28px); border-top:1px solid var(--hairline-dark); }
.stat{ padding:clamp(16px,2.2vh,26px) clamp(18px,2.4vw,38px) 6px; border-right:1px solid var(--hairline-dark); }
.stat:first-child{ padding-left:0; }
.stat:last-child{ border-right:none; }
/* tweak: dividing lines between the three stats on/off */
#traction[data-stat-rules="off"] .stat-band{ border-top-color:transparent; }
#traction[data-stat-rules="off"] .stat{ border-right-color:transparent; border-bottom-color:transparent; }
.stat .num{ font-family:var(--serif); font-weight:600; color:var(--feature-num); font-size:clamp(2.6rem,5vw,4.4rem); line-height:.86; letter-spacing:-.02em; }
.stat .num .unit{ display:block; font-family:var(--mono); font-size:12.5px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:rgba(245,243,238,.55); margin-top:12px; }
.stat .num.green-bright{ color:#5a9e2e; }
.stat .stat-label{ font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:rgba(245,243,238,.6); margin-top:14px; max-width:30ch; text-transform:none; line-height:1.5; }
/* media now a section-level child — align it to the content column */
.traction-media{ width:100%; max-width:var(--maxw); margin:clamp(20px,2.6vh,34px) auto 0; padding:clamp(18px,2.2vh,28px) var(--pad-x) 0; border-top:1px solid var(--hairline-dark); }
#traction[data-traction-img="none"] .traction-media{ display:none; }
.t-band{ display:none; width:100%; aspect-ratio:21/8; }
#traction[data-traction-img="band"] .t-band{ display:block; }
.t-photos{ display:none; }
.t-photos image-slot{ width:100%; }

/* strip — three equal tiles */
#traction[data-traction-img="strip"] .t-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
#traction[data-traction-img="strip"] .t-photos image-slot{ aspect-ratio:4/3; }

/* mosaic — tall portrait anchors the left, two wide tiles stack at right (sized to fit one screen) */
#traction[data-traction-img="mosaic"] .t-photos{ display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(2,1fr); gap:12px; height:min(38vh,420px); }
#traction[data-traction-img="mosaic"] .p1{ grid-column:1 / 5; grid-row:1 / 3; height:100%; }
#traction[data-traction-img="mosaic"] .p2{ grid-column:5 / 13; grid-row:1 / 2; height:100%; }
#traction[data-traction-img="mosaic"] .p3{ grid-column:5 / 13; grid-row:2 / 3; height:100%; }

/* stagger — offset gallery that keeps portraits tall and the tractor wide */
#traction[data-traction-img="stagger"] .t-photos{ display:flex; gap:clamp(16px,2.2vw,30px); align-items:flex-start; }
#traction[data-traction-img="stagger"] .p1{ flex:0 0 24%; margin-top:30px; }
#traction[data-traction-img="stagger"] .p1 image-slot{ aspect-ratio:3/4; }
#traction[data-traction-img="stagger"] .p2{ flex:1 1 auto; }
#traction[data-traction-img="stagger"] .p2 image-slot{ aspect-ratio:16/10; }
#traction[data-traction-img="stagger"] .p3{ flex:0 0 24%; margin-top:60px; }
#traction[data-traction-img="stagger"] .p3 image-slot{ aspect-ratio:3/4; }

/* backdrop — full-bleed photo montage behind the stats */
#traction[data-traction-img="backdrop"]{ position:relative; }
#traction[data-traction-img="backdrop"] > .wrap{ position:relative; z-index:2; pointer-events:none; max-width:none; margin-inline:0; padding-inline:var(--pad-x); }
#traction[data-traction-img="backdrop"] .traction-media{ position:absolute; inset:0; z-index:0; margin:0; padding:0; max-width:none; border-top:none; }
#traction[data-traction-img="backdrop"] .t-photos{ display:grid; grid-template-columns:repeat(3,1fr); height:100%; gap:0; }
#traction[data-traction-img="backdrop"] .t-photos image-slot{ height:100%; }
#traction[data-traction-img="backdrop"]::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(28,42,18,.9), rgba(28,42,18,.74) 45%, rgba(28,42,18,.92)); }
/* stat band is a section-level sibling, so it spans the same width as the images — columns align */
#traction[data-traction-img="backdrop"] .stat-band{ position:relative; z-index:2; pointer-events:none; grid-template-columns:repeat(3,1fr); gap:0; }
#traction[data-traction-img="backdrop"] .stat{ padding-inline:clamp(24px,3.5vw,56px); }
#traction[data-traction-img="backdrop"] .stat:first-child{ padding-left:var(--pad-x); }
/* tweak: centre the text box in each column — title stays left-aligned to the first box; numbers stay left-aligned */
#traction[data-stat-align="center"] .stat{ display:flex; flex-direction:column; align-items:flex-start; width:16rem; max-width:100%; justify-self:center; margin-inline:auto; padding-inline:0; text-align:left; }
#traction[data-stat-align="center"] .stat .num{ margin-inline:0; }
#traction[data-stat-align="center"] .stat .stat-label{ width:auto; max-width:none; margin-inline:0; }
/* align eyebrow + title with the first (centred) box: box sits at (colWidth - 16rem)/2 inside a full-bleed third */
#traction[data-stat-align="center"][data-traction-img="backdrop"] > .wrap{ padding-left:max(var(--pad-x), calc(16.6667vw - 8rem)); }
#traction[data-stat-align="center"][data-traction-img="backdrop"] .stat:first-child{ padding-left:0; }
/* while reframing a photo, lift the montage above the overlay + stats so it's editable/visible */
#traction[data-traction-img="backdrop"] .traction-media:has(image-slot[data-reframe]){ z-index:5; }
#traction[data-traction-img="backdrop"]:has(image-slot[data-reframe]) > .wrap,
#traction[data-traction-img="backdrop"]:has(image-slot[data-reframe]) > .stat-band,
#traction[data-traction-img="backdrop"]:has(image-slot[data-reframe])::after{ opacity:0; }

@media(max-width:760px){ #traction{ min-height:100vh; padding-block:var(--section-y); } .stat-band{ grid-template-columns:1fr; } .stat{ border-right:none; border-bottom:1px solid var(--hairline-dark); padding-block:24px; } .t-band{ aspect-ratio:16/9; }
  #traction[data-traction-img="strip"] .t-photos{ grid-template-columns:1fr; }
  #traction[data-traction-img="mosaic"] .t-photos{ display:flex; flex-direction:column; height:auto; }
  #traction[data-traction-img="mosaic"] .t-photos image-slot{ aspect-ratio:16/10; height:auto; }
  #traction[data-traction-img="stagger"] .t-photos{ flex-direction:column; }
  #traction[data-traction-img="stagger"] .p1, #traction[data-traction-img="stagger"] .p3{ margin-top:0; }
  #traction[data-traction-img="stagger"] image-slot{ aspect-ratio:16/10 !important; }
  /* stats stack into one readable column on mobile (overrides centred/backdrop 3-col) */
  #traction[data-traction-img="backdrop"] .stat-band,
  #traction[data-stat-align="center"] .stat-band{ grid-template-columns:1fr; }
  #traction[data-stat-align="center"] .stat{ width:100%; max-width:none; margin-inline:0; padding-inline:var(--pad-x); align-items:flex-start; text-align:left; }
  #traction[data-traction-img="backdrop"] .stat{ padding-inline:var(--pad-x); }
  #traction[data-traction-img="backdrop"] .stat:first-child,
  #traction[data-stat-align="center"][data-traction-img="backdrop"] .stat:first-child{ padding-left:var(--pad-x); }
  #traction[data-stat-align="center"][data-traction-img="backdrop"] > .wrap{ padding-left:var(--pad-x); }
  /* backdrop photo montage fills the section as a vertical stack behind the stats */
  #traction[data-traction-img="backdrop"]{ min-height:100vh; }
  /* mobile: a single photo (the desktop right-hand one) fills the backdrop, not all three */
  #traction[data-traction-img="backdrop"] .t-photos{ display:block; height:100%; }
  #traction[data-traction-img="backdrop"] .t-photos .p1,
  #traction[data-traction-img="backdrop"] .t-photos .p2{ display:none; }
  #traction[data-traction-img="backdrop"] .t-photos .p3{ display:block; width:100%; height:100%; }
  /* backdrop is decorative on mobile — let touches pass through so the page scrolls */
  #traction[data-traction-img="backdrop"] .traction-media,
  #traction[data-traction-img="backdrop"] .t-photos image-slot{ pointer-events:none; }
  /* over a single mobile photo, soften the deep-green wash to a near-neutral dark
     so the photo reads naturally (desktop montage keeps the green) */
  #traction[data-traction-img="backdrop"]::after{ background:linear-gradient(180deg, rgba(20,22,17,.6), rgba(20,22,17,.46) 40%, rgba(20,22,17,.82)); } }

/* ============================================================
   TEAM
   ============================================================ */
#team{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
#team .team-head{ max-width:var(--maxw); margin:0 auto 30px; }
#team .display{ max-width:16ch; }
.team-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); }
.member{ display:grid; grid-template-columns:120px 1fr; gap:24px; align-items:start; }
.member image-slot{ width:120px; height:148px; }
.member .role{ margin:8px 0 12px; }
.member h3{ margin:0; }
.member .bio{ font-size:16.5px; line-height:1.5; color:var(--granite); margin:0; }
.bio-bullets{ list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; }
.bio-bullets li{ position:relative; padding-left:18px; }
.bio-bullets li::before{ content:""; position:absolute; left:0; top:10px; width:5px; height:5px; border-radius:50%; background:var(--field); }
#team[data-bio-format="paragraph"] .bio-bullets{ display:none; }
#team[data-bio-format="bullets"] .bio-para{ display:none; }
.team-closing{ max-width:var(--maxw); margin:32px auto 0; padding-top:28px; border-top:1px solid var(--hairline); }
.team-closing p{ max-width:62ch; color:var(--granite); margin:0; font-size:17.5px; }
.backed{ display:flex; align-items:center; gap:0; margin-top:32px; padding:clamp(28px,3.4vw,48px); background:var(--feature-bg); color:var(--parchment); }
.backed .label{ color:var(--sage); }
.backed-logo{ flex:0 0 50%; display:flex; justify-content:center; }
.mglabs-logo{ width:min(85%, 264px); height:auto; display:block; }
.backed p{ flex:1 1 auto; padding-left:0; }
.backed p{ margin:0; color:rgba(245,243,238,.72); font-size:16.5px; line-height:1.52; }
.backed h3{ color:var(--parchment); margin:14px 0 0; max-width:18ch; }
.backed p{ margin:0; color:rgba(245,243,238,.72); font-size:16.5px; line-height:1.52; }
.backed .mg-mark{ font-family:var(--serif); font-size:1.6rem; font-weight:600; letter-spacing:-.01em; }
@media(max-width:880px){ .team-grid{ grid-template-columns:1fr; } }
@media(max-width:760px){
  .backed{ flex-direction:column; align-items:flex-start; gap:22px; }
  .backed-logo{ flex:none; width:auto; justify-content:flex-start; }
  .backed-logo a{ justify-content:flex-start; width:auto; }
  .mglabs-logo{ width:190px; }
  .backed p{ width:auto; }
}
@media(max-width:480px){ .member{ grid-template-columns:1fr; } .member image-slot{ width:130px; height:158px; } }

/* ============================================================
   PARTNERS
   ============================================================ */
/* PARTNERS / WORK WITH US — single free-flowing block */
#partners{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
#partners[data-work-size="compact"]{ min-height:0; padding-block:clamp(64px,10vw,120px); }
#partners .display{ max-width:18ch; }
.work-lede{ max-width:62ch; margin:24px 0 0; font-size:clamp(1.2rem,1.7vw,1.5rem); }
.work-tags{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(30px,4vw,48px); }
.work-tags span{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--sage); border:1px solid rgba(200,216,184,.32); border-radius:2px; padding:9px 16px; }
#partners .btn{ margin-top:clamp(32px,4vw,48px); }

/* ============================================================
   CAREERS
   ============================================================ */
#careers{ text-align:center; }
#careers .inner{ max-width:760px; margin:0 auto; }
#careers .display{ margin:0 auto 20px; }
#careers .lede{ margin:0 auto 28px; max-width:44ch; }

/* ============================================================
   CLOSING + FOOTER
   ============================================================ */
#closing{ text-align:center; padding-block:clamp(60px,8vw,108px) clamp(44px,6vw,76px); }
.closing-line{
  font-family:var(--serif); font-weight:600; font-size:clamp(2.4rem,6vw,5rem);
  line-height:1.04; letter-spacing:-.02em; max-width:18ch; margin:0 auto; color:var(--parchment);
}
footer{ background:var(--footer-bg); color:var(--parchment); padding-bottom:32px; }
.footer-rule{ max-width:var(--maxw); margin:0 auto; height:1px; background:var(--hairline-dark); }
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(28px,3vw,40px) var(--pad-x) 0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px 40px; text-align:left; }
.foot-brand{ display:flex; flex-direction:column; align-items:flex-start; }
.footer-inner .foot-logo{ height:24px; width:auto; filter:invert(1); }
.foot-tagline{ color:rgba(245,243,238,.82); font-size:16px; margin:12px 0 0; }
.foot-powered{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,243,238,.4); margin-top:8px; }
.foot-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; text-align:right; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; line-height:1.4; color:rgba(245,243,238,.6); }
.foot-meta a{ color:inherit; text-decoration:none; transition:color .3s var(--ease); }
.foot-meta a:hover{ color:var(--sage); }
.foot-sep{ color:rgba(245,243,238,.3); }
.mg-link{ color:inherit; text-decoration:none; transition:color .3s var(--ease); }
.mg-link:hover{ color:var(--sage); }
.foot-powered .mg-link{ display:inline; color:inherit; margin:0; font-size:inherit; }
.foot-powered .mg-link:hover{ color:var(--sage); }
.backed-logo a{ display:flex; justify-content:center; width:100%; }
.backed-logo a img{ transition:opacity .3s var(--ease); }
.backed-logo a:hover img{ opacity:.82; }
.footer-bottom{ max-width:var(--maxw); margin:clamp(24px,2.6vw,36px) auto 0; padding:18px var(--pad-x) 0; border-top:1px solid var(--hairline-dark); display:flex; justify-content:flex-start; }
.footer-bottom .copy{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:rgba(245,243,238,.5); }
@media(max-width:760px){
  .footer-inner{ flex-direction:column; align-items:flex-start; gap:22px; }
  .foot-meta{ align-items:flex-start; text-align:left; }
}
@media(max-width:520px){ .foot-sep{ display:none; } }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.has-js .reveal{ opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } .scroll-cue{ display:none; } }

/* image-slot empty-state polish */
image-slot{ background:var(--stone); }
.section--ink image-slot{ background:#2C4422; }
#hero .hero-bg image-slot{ background:#222220; }

/* ============================================================
   MOBILE PROPORTIONS — consistent vertical rhythm (mobile only)
   ============================================================ */
@media(max-width:760px){
  :root{ --section-y:64px; }
  /* hero fills the visible viewport (dynamic) so nothing is exposed or cropped */
  #hero{ min-height:100svh; min-height:100dvh; }
  .scroll-cue{ display:none !important; }
  /* sections that are full-height on desktop should size to content on mobile,
     with comfortable, consistent padding — no forced viewport gaps */
  #team, #partners{ min-height:0; display:block; padding-block:var(--section-y); }
  /* section intros sit closer to their content on a narrow screen */
  #model .model-head{ margin-bottom:24px; }
  #why .why-head{ margin-bottom:22px; }
  #team .team-head{ margin-bottom:24px; }
  #team .team-closing{ margin-top:28px; padding-top:24px; }
  #team .backed{ margin-top:26px; }
  /* Work with us: tighter, content-led spacing */
  #partners .work-lede{ margin-top:16px; }
  #partners .work-tags{ margin-top:26px; }
  #partners .btn{ margin-top:30px; }
  /* Traction stays immersive (full-height backdrop) but breathes evenly */
  #traction{ padding-block:64px; }
}

/* Landscape phone — hero fits a short viewport (no overlap) */
@media (orientation:landscape) and (max-height:560px){
  #hero{ min-height:100dvh; align-items:center; }
  #hero .hero-inner{ padding-top:calc(var(--safe-top,0px) + 64px); padding-bottom:28px; justify-content:center; }
  #hero .display{ font-size:clamp(1.7rem,4.6vw,2.6rem); max-width:24ch; }
  #hero .hero-sub{ font-size:15px; line-height:1.4; margin-top:10px; max-width:52ch; }
  .hero-actions{ margin-top:18px; }
  .powered{ margin-top:16px; }
  .scroll-cue{ display:none !important; }
}

/* Traction backdrop is decorative — never capture touch on touch devices
   (portrait AND landscape) so the page always scrolls over the photo */
@media (pointer:coarse){
  #traction[data-traction-img="backdrop"] .traction-media,
  #traction[data-traction-img="backdrop"] .t-photos image-slot{ pointer-events:none; }
}