:root {
  /* mid-tone studio backdrop (the 3D backdrop runs #9a9387 centre to #79726a edge): the white house separates from
     it by value, not only by hue, so the page holds its contrast on displays that lift light tones */
  --stone: #8f887d;
  --ink-2: #2c2a26;
  --bone: #eeebe5;
  --ink: #1b1a17;
  --muted: #5e594f;
  --paper: #f3f0ea;
  --hair: rgba(27, 26, 23, 0.18);
  --char: #1b1a17;
  --char-2: #26241f;
  --boneT: #ece8e1;
  --gut: clamp(20px, 3.4vw, 56px);
  --sans: "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--stone); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--stone); color: var(--ink); font-family: var(--sans);
  font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }

/* ---------- 3D canvas + drawing-sheet furniture ---------- */
#gl { position: fixed; inset: 0 auto auto 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; opacity: 0; transition: opacity 1.4s ease; }
#gl.ready { opacity: 1; }
.sheet { position: fixed; inset: 0; z-index: 1; pointer-events: none; color: var(--ink); }
.tick { position: absolute; width: 14px; height: 14px; border-color: var(--hair); border-style: solid; border-width: 0; }
.tick.tl { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.tick.tr { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.tick.bl { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.tick.br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }
.titleblock { position: absolute; right: var(--gut); bottom: 30px; display: flex; align-items: center; gap: 14px; color: var(--ink); }
.north { display: block; opacity: 0.8; will-change: transform; }
.tb-text { font-family: var(--mono); font-size: 11px; line-height: 1.55; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-left: 1px solid var(--hair); padding-left: 14px; }
.grid-labels { position: absolute; inset: 0; }
.gl-b { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 1px solid rgba(27,26,23,.8); border-radius: 50%;
  font: 500 10px/20px var(--mono); text-align: center; color: var(--ink); opacity: 0; will-change: transform, opacity; background: rgba(238,235,229,.7); }
/* floor callouts: every per-frame change is a transform (no layout, no repaint) */
.fl-t { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.fl-t i { position: absolute; left: 0; top: 0; width: 1px; height: 1px; background: rgba(27,26,23,.55); transform-origin: 0 0; will-change: transform; }
.fl-t b { position: absolute; left: -3.5px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); font-size: 0; }
.fl-t em { position: absolute; left: 0; top: -5px; white-space: nowrap; font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); will-change: transform; }
/* phone: numbered dots instead of leaders (legend sits in the caption) */
.fl-num i, .fl-num em { display: none; }
.fl-num b { left: -9px; top: -9px; width: 18px; height: 18px; font: 500 9.5px/18px var(--mono); text-align: center; color: var(--bone); }
.grain { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 28px;
  padding: 24px var(--gut); color: var(--ink); border-bottom: 1px solid transparent;
  transition: color .5s ease, background-color .5s ease, border-color .5s ease, padding .5s ease; }
.nav.solid { background: rgba(243,240,234,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: rgba(27,26,23,.08); padding-top: 16px; padding-bottom: 16px; }
.nav.on-dark { color: var(--boneT); }
.nav.solid.on-dark { background: rgba(27,26,23,.86); border-bottom-color: rgba(236,232,225,.08); }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; }
.links { display: flex; gap: 30px; margin-left: auto; font-size: 14px; }
.links a { opacity: .72; transition: opacity .3s; }
.links a:hover { opacity: 1; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; border-radius: 2px; background: var(--ink); color: var(--boneT);
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em; transition: background .3s, color .3s, transform .3s; }
.btn:hover { background: #000; }
.btn-sm { padding: 10px 16px; font-size: 13.5px; }
.nav.on-dark .btn-sm { background: var(--boneT); color: var(--ink); }
.btn-light { background: var(--boneT); color: var(--ink); }
.btn-light:hover { background: #fff; }

/* ---------- common ---------- */
main { position: relative; z-index: 2; }
.eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.line-mask { overflow: clip; }
.hero-title, .cap-line, .cta-title, .calm-statement { text-wrap: balance; }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; padding: 0 var(--gut); }
.hero-inner { position: absolute; inset: 0; will-change: transform, opacity; }
.hero .eyebrow { position: absolute; top: 17.5vh; left: var(--gut); }
.hero-title { position: absolute; left: var(--gut); top: calc(17.5vh + 26px); font-weight: 500;
  font-size: clamp(52px, 7.3vw, 136px); line-height: 0.94; letter-spacing: -0.047em; max-width: 9em; }
.hero-title .line { padding-bottom: 0.04em; }
.hero-foot { position: absolute; left: var(--gut); bottom: 8vh; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; max-width: 360px; }
.hero-lede { font-size: 17px; line-height: 1.45; color: #1f1d1a; }
/* text over the 3D scene sits on the mid-tone backdrop: muted text is darker there than on the paper sections */
.hero, .story, .sheet { --muted: var(--ink-2); --hair: rgba(27, 26, 23, 0.3); }
.scroll-cue { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.scroll-cue i { display: block; position: relative; width: 1px; height: 38px; overflow: hidden; background: rgba(27,26,23,.14); }
.scroll-cue i b { position: absolute; inset: 0; background: var(--ink); transform: translateY(-100%); }

/* ---------- story ---------- */
.story { position: relative; height: 650vh; }
.story-pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
.captions { position: absolute; left: var(--gut); top: 50%; transform: translateY(-48%); width: min(34vw, 560px); height: 1px; }
.cap { position: absolute; left: 0; top: 0; transform: translateY(-50%); visibility: hidden; }
.cap.is-on { visibility: visible; }
.cap-label { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.cap-label .num { color: var(--ink); }
.cap-label .sep { width: 28px; height: 1px; background: var(--hair); }
.cap-line { font-weight: 500; font-size: clamp(32px, 3.5vw, 60px); line-height: 1.0; letter-spacing: -0.04em; max-width: 11em; }
.cap-line .line { padding-bottom: 0.06em; }
.cap-legend { display: none; }
.rail { position: absolute; left: var(--gut); bottom: 30px; display: flex; gap: 22px; list-style: none; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rail li { display: flex; flex-direction: column; gap: 9px; min-width: 112px; opacity: .8; transition: opacity .6s ease, color .6s ease; }
.rail li span { color: var(--ink); margin-right: 4px; }
.rail li.on { opacity: 1; color: var(--ink); }
.rail i { display: block; height: 1px; background: var(--hair); position: relative; overflow: hidden; }
.rail b { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }

/* ---------- calm type section ---------- */
/* the "paper": a lighter sheet with a hairline edge and a soft shadow on the model as it slides over */
.calm { position: relative; z-index: 3; background: var(--paper); padding: 22vh var(--gut) 16vh; min-height: 100vh;
  border-top: 1px solid rgba(27,26,23,.12); box-shadow: 0 -50px 100px -30px rgba(40, 32, 22, 0.28); }
.calm .eyebrow { margin-bottom: 36px; }
.calm-statement { font-weight: 400; font-size: clamp(30px, 4.3vw, 76px); line-height: 1.03; letter-spacing: -0.042em; max-width: 17.5em; }
.calm-statement .line { padding-bottom: 0.05em; }
.elev { margin: 13vh 0 0; }
.elev svg { display: block; width: 100%; max-width: 1180px; height: auto; margin-left: auto; overflow: visible; }
/* stroke widths in screen px: --u = SVG user units per CSS px (set from JS) */
.e-ln { fill: none; stroke: var(--ink); stroke-width: calc(1.4px * var(--u, 1)); stroke-linejoin: round; }
.e-heavy { stroke-width: calc(2.2px * var(--u, 1)); }
.e-fine { stroke-width: calc(0.7px * var(--u, 1)); stroke: rgba(27,26,23,.45); }
.e-slat { stroke-width: calc(0.6px * var(--u, 1)); stroke: #8a6a45; }
.e-mark { fill: none; stroke-width: calc(1px * var(--u, 1)); }
.e-tree { fill: var(--paper); }
.e-tx { font-family: var(--mono); font-weight: 500; font-size: calc(11px * var(--u, 1)); fill: var(--muted); letter-spacing: .06em; }
.elev figcaption { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: right; margin-top: 18px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 12vh; border-top: 1px solid var(--hair); }
.pillar { padding-top: 22px; }
.pillar-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
.pillar-v { font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; color: #3b3832; max-width: 22em; }

/* ---------- CTA band ---------- */
.cta { position: relative; z-index: 3; background: var(--char); color: var(--boneT); padding: 20vh var(--gut) 18vh; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; gap: 5vw; }
.cta-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.cta .eyebrow { color: #9a948a; margin-bottom: 30px; }
.cta-title { font-weight: 500; font-size: clamp(40px, 6.2vw, 116px); line-height: 0.95; letter-spacing: -0.047em; max-width: 9em; }
.cta-title .line { padding-bottom: 0.05em; }
.cta-sub { margin: 34px 0 40px; color: #aaa49a; max-width: 30em; }
.btn-cta { gap: 0; padding: 0; background: var(--boneT); overflow: hidden; }
.btn-cta > span:first-child { padding: 17px 22px 17px 24px; }
.btn-cta .arr { align-self: stretch; display: grid; place-items: center; width: 54px; border-left: 1px solid rgba(27,26,23,.14); transition: transform .45s cubic-bezier(.2,.7,.2,1), background .3s; }
.btn-cta:hover .arr { transform: translateX(4px); }
/* the plan: same house, same drawing language, light ink on charcoal */
.cta-plan { flex: 0 0 40vw; max-width: 640px; margin: 0; }
.cta-plan svg { display: block; width: 100%; height: auto; overflow: visible; }
.p-ln { fill: none; stroke: rgba(236,232,225,.3); stroke-width: calc(1px * var(--u, 1)); stroke-linejoin: round; }
.p-edge { stroke: rgba(236,232,225,.22); }
.p-grid { stroke: rgba(236,232,225,.16); }
.p-fine { stroke: rgba(236,232,225,.16); stroke-width: calc(.7px * var(--u, 1)); }
.p-wall { stroke: rgba(236,232,225,.55); stroke-width: calc(1.3px * var(--u, 1)); fill: rgba(236,232,225,.14); }
.p-col { stroke: rgba(236,232,225,.55); fill: rgba(236,232,225,.3); }
.p-above { stroke: rgba(236,232,225,.3); stroke-dasharray: calc(5px * var(--u, 1)) calc(4px * var(--u, 1)); }
.p-grid { stroke-dasharray: calc(9px * var(--u, 1)) calc(3px * var(--u, 1)) calc(2px * var(--u, 1)) calc(3px * var(--u, 1)); }
.p-tree { stroke: rgba(236,232,225,.22); }
.p-bub { stroke: rgba(236,232,225,.4); }
.p-tx { font: 500 9px var(--mono); fill: rgba(236,232,225,.55); dominant-baseline: central; letter-spacing: 0; }
.cta-plan figcaption { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 12px; border-top: 1px solid rgba(236,232,225,.12);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8f897f; }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 3; background: var(--char); color: #8f897f; border-top: 1px solid rgba(236,232,225,.12);
  display: flex; align-items: center; gap: 28px; padding: 26px var(--gut) 30px; font-size: 13px; }
.foot-brand { display: flex; align-items: center; gap: 10px; color: var(--boneT); font-weight: 500; letter-spacing: 0.01em; }
.foot-note { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.demo { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--boneT); border: 1px solid rgba(236,232,225,.4); padding: 3px 7px 2px; border-radius: 2px; }
.foot-note a { color: var(--boneT); text-decoration: underline; text-decoration-color: rgba(236,232,225,.35); text-underline-offset: 3px; transition: text-decoration-color .3s; }
.foot-note a:hover { text-decoration-color: currentColor; }

/* ---------- the same practice in every package: a slim row just above the footer ---------- */
/* charcoal like the CTA and the footer, the label in the footer's mono; the package of this page is marked
   (aria-current, no link), the other two link to that package's home page. 44px to tap. */
.tiers { position: relative; z-index: 3; background: var(--char); color: #8f897f; border-top: 1px solid rgba(236,232,225,.12);
  display: flex; align-items: center; gap: 8px 28px; padding: 10px var(--gut); font-size: 13px; }
.tiers-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.tiers-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 -12px 0 auto; list-style: none; }
.tiers-list a, .tiers-on { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 2px; color: var(--boneT); }
.tiers-list a { text-decoration: underline; text-decoration-color: rgba(236,232,225,.35); text-underline-offset: 3px; transition: text-decoration-color .3s; }
.tiers-list a:hover { text-decoration-color: currentColor; }
.tiers-on { background: rgba(236,232,225,.1); }
@media (max-width: 760px) {
  .tiers { flex-wrap: wrap; padding: 18px var(--gut) 8px; font-size: 12.5px; }
  .tiers-k { width: 100%; }
  .tiers-list { margin: 0 0 0 -12px; }
}

.fps { position: fixed; right: 10px; top: 76px; z-index: 99; font: 11px var(--mono); background: rgba(0,0,0,.7); color: #fff; padding: 3px 6px; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav { padding: 18px var(--gut); gap: 14px; }
  .links { display: none; }
  .nav .btn-sm { margin-left: auto; padding: 9px 13px; font-size: 13px; }
  .brand { font-size: 14px; }
  /* Phone hero, stacked: headline at the top, the house centred in the space between (main.js measures that space
     and frames the camera into it), lede and button at the bottom. Sized in svh, the height that is visible while
     Safari's toolbars show: on an iPhone vh is the LARGE viewport (toolbars hidden), up to ~200 px taller than
     what is on screen at load, which pushed the lede up into the house. */
  .hero .eyebrow { top: 12.5vh; top: clamp(84px, 12.5svh, 120px); }
  .hero-title { top: calc(12.5vh + 22px); top: calc(clamp(84px, 12.5svh, 120px) + 22px); font-size: 13.4vw; right: var(--gut); }
  .hero-foot { bottom: 5vh; bottom: max(28px, 5svh); right: var(--gut); max-width: none; gap: 18px; }
  .hero-lede { font-size: 15.5px; max-width: 30em; }
  /* the CSS transform transition on .btn makes the intro reveal end 16 px low (ScrollTrigger.refresh() runs while it
     starts), so the button overflowed the foot towards Safari's toolbar; the phone hero has no transform hover */
  .hero-foot .btn { transition: background .3s, color .3s; }
  .scroll-cue { display: none; }
  .captions { left: var(--gut); right: var(--gut); width: auto; top: auto; bottom: 15vh; bottom: 15svh; transform: none; }
  .cap { top: auto; bottom: 0; transform: none; }
  .cap-label { margin-bottom: 14px; }
  .cap-line { font-size: 8.6vw; max-width: 12em; }
  .cap-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
  .cap-legend span { display: inline-flex; align-items: center; gap: 7px; }
  .cap-legend b { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: var(--bone); font: 500 9px/16px var(--mono); text-align: center; letter-spacing: 0; }
  .rail { bottom: 22px; gap: 10px; left: var(--gut); right: var(--gut); }
  .rail li { min-width: 0; flex: 1; font-size: 0; gap: 0; }
  .rail li span { font-size: 11px; margin-bottom: 8px; }
  .gl-b { width: 16px; height: 16px; margin: -8px 0 0 -8px; font-size: 9px; line-height: 14px; }
  .titleblock { bottom: auto; top: 70px; }
  .tb-text { display: none; }
  .north { width: 30px; height: 30px; }
  .tick { display: none; }
  .calm { padding: 16vh var(--gut) 12vh; }
  .calm-statement { font-size: 8.4vw; }
  .pillars { grid-template-columns: 1fr; gap: 0; margin-top: 10vh; }
  .pillar { padding: 20px 0 26px; border-bottom: 1px solid var(--hair); }
  .pillar-v { font-size: 17px; }
  .p-tx { display: none; }
  .cta { padding: 16vh var(--gut) 10vh; flex-direction: column; align-items: stretch; justify-content: center; gap: 9vh; }
  .cta-title { font-size: 12.6vw; }
  .cta-plan { flex: none; width: 100%; max-width: none; }
  .cta-plan figcaption { font-size: 10px; }
  .foot { flex-wrap: wrap; gap: 12px 20px; font-size: 12.5px; }
  .foot-note { margin-left: 0; order: 3; width: 100%; align-items: flex-start; }
  .foot-copy { margin-left: auto; }
}

/* ---------- reduced motion: finished model, static captions ---------- */
html.rm #gl { transition: none; }
html.rm .story { height: auto; }
html.rm .story-pin { position: relative; height: auto; padding: 16vh var(--gut) 10vh; background: transparent; }
html.rm .captions { position: static; transform: none; width: auto; height: auto; display: grid; gap: 56px; }
html.rm .cap { position: static; visibility: visible; transform: none; }
html.rm .rail, html.rm .scroll-cue, html.rm .grid-labels { display: none; }