:root {
  --stage-background: #d8d1c7;
  --paper: #f6f3ee;
  --ink: #1b1b1d;
  --muted: #62605d;
  --line: #d8d1c7;
  --sage: #8fa99b;
  --mineral: #263238;
  --stage-surface:
    radial-gradient(circle at 18% 12%, rgba(246,243,238,.72), transparent 34%),
    radial-gradient(circle at 82% 88%, rgba(143,169,155,.2), transparent 32%),
    linear-gradient(155deg, #ded8cf 0%, var(--stage-background) 48%, #cec7bc 100%);
  --gesture-ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; background: var(--paper); }
body {
  min-width: 320px; margin: 0; color: var(--ink); background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a, button { -webkit-tap-highlight-color: transparent; }
.wrap { width: min(100% - 112px, 1240px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header {
  position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; min-height: 76px; padding: 14px 56px;
  background: rgba(246,243,238,.68); border-bottom: 1px solid rgba(255,255,255,.46);
  box-shadow: 0 10px 36px rgba(27,27,29,.055);
  -webkit-backdrop-filter: blur(24px) saturate(135%); backdrop-filter: blur(24px) saturate(135%);
}
.brand { display: block; width: 210px; line-height: 0; }
.brand img { width: 100%; height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.site-nav a, .lang-button {
  color: var(--muted); font: 600 .72rem/1.2 inherit; letter-spacing: .075em; text-decoration: none; text-transform: uppercase;
}
.site-nav a { position: relative; padding: 10px 0; transition: color 260ms ease; }
.site-nav a::after { position: absolute; right: 0; bottom: 4px; left: 0; height: 1px; content: ""; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform 420ms var(--gesture-ease); }
.site-nav a:hover, .site-nav a.is-active { color: var(--ink); }
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.language-switcher { justify-self: end; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .75rem; }
.lang-button { min-width: 44px; min-height: 44px; padding: 0; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 50%; transition: color 240ms ease, background 320ms ease, border-color 320ms ease, transform 320ms var(--gesture-ease); }
.lang-button:hover, .lang-button.is-active { color: var(--ink); background: rgba(255,255,255,.42); border-color: rgba(38,50,56,.14); transform: scale(1.04); }
:focus-visible { outline: 2px solid var(--mineral); outline-offset: 4px; }
.mobile-progress { display: none; }
.story, .story-stage, .story-cards { display: contents; }

.hero, .section, .closing { position: relative; min-height: 100svh; overflow: hidden; }
.hero { display: grid; min-height: calc(100svh - 76px); align-items: end; padding: clamp(104px, 15vh, 180px) 0 clamp(76px, 12vh, 138px); }
.hero::before { position: absolute; inset: 0; content: ""; background: linear-gradient(112deg, rgba(216,209,199,.18), transparent 58%), radial-gradient(circle at 86% 67%, rgba(143,169,155,.23), transparent 24%); }
.hero-orb { position: absolute; right: -10vw; bottom: -24vw; width: min(62vw, 800px); aspect-ratio: 1; border: 1px solid rgba(38,50,56,.1); border-radius: 50%; background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.7), transparent 20%), linear-gradient(145deg, rgba(143,169,155,.13), transparent 60%); }
.orb-ring { position: absolute; inset: 12%; border: 1px solid rgba(38,50,56,.1); border-radius: 50%; opacity: 0; transform: scale(.78); transition: opacity 850ms ease, transform 900ms var(--gesture-ease); }
.ring-two { inset: 28%; border-color: rgba(143,169,155,.32); transition-delay: 90ms; }
.hero-node { position: absolute; top: 19%; left: 8%; width: 9px; height: 9px; background: var(--mineral); border-radius: 50%; opacity: 0; transform: scale(.4); transition: opacity 180ms ease, transform 420ms var(--gesture-ease); }
.node-grid { position: absolute; top: 7%; left: -10%; width: 34%; height: 24%; opacity: 0; background-image: linear-gradient(rgba(38,50,56,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(38,50,56,.12) 1px, transparent 1px); background-size: 14px 14px; mask-image: radial-gradient(ellipse at 80% 80%, #000, transparent 70%); transition: opacity 620ms ease 140ms, transform 620ms var(--gesture-ease) 140ms; transform: translate(-4px, 3px); }
.hero.is-entered .orb-ring { opacity: 1; transform: scale(1); }
.motion-enabled .hero.is-entered .ring-one { animation: interaction-wave 1100ms var(--gesture-ease) both; }
.motion-enabled .hero.is-entered .ring-two { animation: interaction-wave 1100ms var(--gesture-ease) 110ms both; }
.hero.is-entered .hero-node { opacity: .78; transform: scale(1); }
.hero.is-entered .node-grid { opacity: .68; transform: translate(0); }
.hero-content, .section-grid, .closing-content { position: relative; }
.motion-enabled .hero-content > .eyebrow, .motion-enabled .section-body > .eyebrow, .motion-enabled .closing-content > .eyebrow,
.motion-enabled .hero-content > .intro, .motion-enabled .section-body > p:not(.eyebrow), .motion-enabled .side-note,
.motion-enabled .hero-content h1, .motion-enabled .section-body h2, .motion-enabled .closing-content h2 {
  opacity: 0; transform: translateY(10px); transition: opacity 520ms ease, transform 680ms var(--gesture-ease);
}
.motion-enabled .hero-content h1, .motion-enabled .section-body h2, .motion-enabled .closing-content h2 { transform: translateY(18px); transition-duration: 600ms, 720ms; transition-delay: 80ms; }
.motion-enabled .hero-content > .intro, .motion-enabled .section-body > p:not(.eyebrow) { transition-delay: 240ms; }
.motion-enabled .side-note { transition-delay: 320ms; }
.motion-enabled .is-entered .hero-content > *, .motion-enabled .section.is-entered .section-body > *, .motion-enabled .section.is-entered .side-note, .motion-enabled .closing.is-entered .closing-content > * { opacity: 1; transform: translateY(0); }
.eyebrow { margin: 0 0 26px; color: var(--muted); font-size: .73rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
h1, h2 { max-width: 1030px; margin: 0; font-weight: 540; line-height: .98; letter-spacing: -.052em; }
h1 { font-size: clamp(3.65rem, 8.2vw, 8.8rem); }
h2 { font-size: clamp(2.7rem, 5.25vw, 5.85rem); }
.intro { max-width: 620px; margin: 34px 0 0; color: var(--muted); font-size: clamp(1.08rem, 1.45vw, 1.36rem); line-height: 1.5; }
.section { display: grid; align-items: center; padding: clamp(104px, 14vw, 190px) 0; border-top: 1px solid var(--line); }
.section-grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(150px, 1.35fr); gap: clamp(28px, 8vw, 150px); }
.section-body { position: relative; }
.section-body > p:not(.eyebrow) { max-width: 635px; margin: 34px 0 0; color: var(--muted); font-size: clamp(1.08rem, 1.45vw, 1.32rem); line-height: 1.55; }
.side-note { align-self: end; padding-top: 18px; color: var(--muted); border-top: 1px solid var(--line); font-size: .92rem; line-height: 1.55; }
.context-signal { position: absolute; top: 56%; right: 0; width: min(45vw, 620px); height: 80px; overflow: hidden; pointer-events: none; }
.dust { position: absolute; display: block; width: 5px; height: 5px; opacity: 0; background: var(--sage); border-radius: 50%; box-shadow: 0 0 0 1px rgba(38,50,56,.12); transform: translate(-12px, 3px) scale(.5); transition: opacity 420ms ease, transform 620ms var(--gesture-ease); }
.dust-one { top: 13px; left: 14%; }.dust-two { top: 39px; left: 31%; width: 3px; height: 3px; background: var(--mineral); }.dust-three { top: 21px; left: 49%; width: 6px; height: 6px; }.dust-four { top: 51px; left: 64%; width: 3px; height: 3px; background: var(--mineral); }.dust-five { top: 10px; left: 79%; width: 4px; height: 4px; }
.dust-two { transition-delay: 55ms; }.dust-three { transition-delay: 110ms; }.dust-four { transition-delay: 165ms; }.dust-five { transition-delay: 220ms; }
.signal-line, .signal-trace { position: absolute; top: 40px; height: 1px; transform-origin: left center; }
.signal-line { left: 0; width: 58%; background: rgba(38,50,56,.3); transform: scaleX(0); transition: transform 680ms var(--gesture-ease); }
.signal-node { position: absolute; top: 35px; left: 57%; width: 11px; height: 11px; border: 1px solid rgba(38,50,56,.46); border-radius: 50%; background: var(--paper); opacity: 0; transform: scale(.45); transition: opacity 180ms ease 300ms, transform 380ms var(--gesture-ease) 300ms; }
.signal-trace { left: calc(57% + 10px); width: 43%; background: linear-gradient(90deg, rgba(38,50,56,.26), transparent); opacity: 0; transform: scaleX(.3); transition: opacity 260ms ease 430ms, transform 520ms var(--gesture-ease) 430ms; }
.approach.is-entered .dust { opacity: .78; transform: translate(0) scale(1); }
.approach.is-entered .signal-line { transform: scaleX(1); }.approach.is-entered .signal-node { opacity: 1; transform: scale(1); }.approach.is-entered .signal-trace { opacity: 1; transform: scaleX(1); }
.method { background: #e8e2da; isolation: isolate; }
.method-shapes span { position: absolute; z-index: -1; border: 1px solid rgba(38,50,56,.1); }
.method-shapes span:nth-child(1) { top: 13%; right: 8%; width: 22vw; height: 17vw; background: rgba(246,243,238,.38); }
.method-shapes span:nth-child(2) { right: 22%; bottom: -6%; width: 12vw; height: 25vw; background: rgba(143,169,155,.14); }
.method-shapes span:nth-child(3) { top: 44%; left: 5%; width: 11vw; height: 15vw; background: rgba(38,50,56,.04); }
.method-shapes .context-surface, .method-shapes .moment-surface, .method-shapes .need-surface { border-radius: 3px; transition: transform 900ms var(--gesture-ease), opacity 600ms ease; }
.method-shapes .context-surface { opacity: .46; transform: translate(52px, -34px) rotate(1.4deg); }
.method-shapes .moment-surface { opacity: .5; transform: translate(-42px, 38px) rotate(-1.8deg); }
.method-shapes .need-surface { opacity: .4; transform: translate(34px, 44px) rotate(2.2deg); }
.method-shapes .person-node { position: absolute; z-index: -1; top: 51%; right: 30%; width: 11px; height: 11px; border: 1px solid rgba(38,50,56,.5); border-radius: 50%; background: var(--paper); opacity: 0; transform: scale(.4); transition: opacity 200ms ease 110ms, transform 460ms var(--gesture-ease) 110ms; }
.method-link { position: absolute; z-index: -1; top: 52%; right: 30.5%; width: 24%; height: 1px; background: rgba(38,50,56,.2); transform: rotate(-22deg) scaleX(0); transform-origin: right center; transition: transform 680ms var(--gesture-ease) 190ms; }
.method.is-entered .context-surface { opacity: 1; transform: translate(-20px, 14px); }.method.is-entered .moment-surface { opacity: 1; transform: translate(14px, -16px); }.method.is-entered .need-surface { opacity: 1; transform: translate(26px, -8px); }.method.is-entered .person-node { opacity: 1; transform: scale(1); }.method.is-entered .method-link { transform: rotate(-22deg) scaleX(1); }
.criteria { color: var(--paper); background: linear-gradient(145deg, var(--mineral), #1b1b1d); }
.criteria::before { position: absolute; inset: 0; content: ""; background: linear-gradient(115deg, transparent 30%, rgba(143,169,155,.11) 30% 43%, transparent 43%); }
.criteria::after { position: absolute; top: 0; right: 0; left: 0; height: 20%; content: ""; pointer-events: none; background: linear-gradient(180deg, rgba(232,226,218,.25), transparent); }
.criteria .section-grid { z-index: 1; }
.criteria .eyebrow, .criteria .section-body > p:not(.eyebrow), .criteria .side-note { color: rgba(246,243,238,.72); }
.criteria .side-note { border-color: rgba(246,243,238,.2); }
.criteria-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wave { position: absolute; top: 50%; right: 9%; display: block; width: min(24vw, 300px); aspect-ratio: 1; opacity: 0; border: 1px solid rgba(143,169,155,.48); border-radius: 50%; transform: translateY(-50%) scale(.35); }
.wave-two { width: min(38vw, 470px); border-color: rgba(143,169,155,.32); }.wave-three { width: min(52vw, 640px); border-color: rgba(143,169,155,.2); }
.field-filter { position: absolute; inset: -15% 35% -10% -15%; background: linear-gradient(112deg, transparent 48%, rgba(143,169,155,.14) 48.2% 50%, transparent 50.2%); }
.field-line { position: absolute; right: -4%; display: block; height: 1px; background: rgba(246,243,238,.22); transform: scaleX(1); transform-origin: right center; transition: opacity 800ms ease, transform 1000ms cubic-bezier(.16, .8, .32, 1); }
.line-a { top: 18%; width: 32%; }.line-b { top: 27%; width: 44%; }.line-c { top: 39%; width: 27%; }.line-d { top: 61%; width: 38%; }.line-e { top: 73%; width: 49%; }
.field-node { position: absolute; right: 22%; width: 5px; height: 5px; border: 1px solid rgba(246,243,238,.6); border-radius: 50%; opacity: .8; transition: opacity 700ms ease, transform 900ms cubic-bezier(.16, .8, .32, 1); }.node-a { top: 27%; }.node-b { top: 39%; right: 18%; }.node-c { top: 73%; right: 31%; }
.clear-line { position: absolute; top: 52%; right: 0; width: 21%; height: 1px; background: rgba(246,243,238,.74); transform: scaleX(.1); transform-origin: right center; transition: transform 800ms var(--gesture-ease) 180ms; }
.criteria.is-entered .wave { opacity: .54; transform: translateY(-50%) scale(1); transition: opacity 700ms ease 120ms, transform 900ms var(--gesture-ease) 120ms; }
.criteria.is-entered .wave-two { opacity: .34; transition-delay: 190ms; }.criteria.is-entered .wave-three { opacity: .2; transition-delay: 260ms; }
.criteria.is-entered .field-line { opacity: .18; transform: scaleX(.32); }.criteria.is-entered .field-node { opacity: .16; transform: translateX(-34px); }.criteria.is-entered .clear-line { transform: scaleX(1); }
.complexity { background-color: var(--paper); background-image: linear-gradient(135deg, rgba(216,209,199,.62), rgba(246,243,238,.96)); isolation: isolate; }
.complexity-field { position: absolute; right: clamp(-120px, 4vw, 52px); bottom: 13%; z-index: -1; width: min(48vw, 620px); height: 34%; pointer-events: none; }
.complexity-field span { position: absolute; right: 0; display: block; height: clamp(12px, 1.8vw, 20px); border: 1px solid rgba(38,50,56,.12); background: linear-gradient(90deg, rgba(38,50,56,.08), rgba(143,169,155,.18)); transform: translateX(34px) scaleX(.78); transition: transform 760ms var(--gesture-ease), opacity 580ms ease; }
.complexity-field span:nth-child(1) { top: 0; width: 54%; }.complexity-field span:nth-child(2) { top: 27%; width: 78%; transition-delay: 60ms; }.complexity-field span:nth-child(3) { top: 54%; width: 64%; transition-delay: 110ms; }.complexity-field span:nth-child(4) { top: 81%; width: 91%; transition-delay: 160ms; }
.complexity-field i { position: absolute; top: 54%; right: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--mineral); opacity: 0; transform: scale(.4); transition: opacity 180ms ease 500ms, transform 360ms var(--gesture-ease) 500ms; }
.complexity.is-entered .complexity-field span { opacity: .82; transform: translateX(0) scaleX(1); }.complexity.is-entered .complexity-field i { opacity: .72; transform: scale(1); }
.closing { display: grid; align-items: center; color: var(--paper); background: #161719; padding: clamp(120px, 20vw, 260px) 0; }
.closing::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 75% 48%, rgba(143,169,155,.16), transparent 27%); }
.closing-content { position: relative; }.closing .eyebrow { color: rgba(246,243,238,.66); }
.closing h2 { max-width: 1060px; }
.identity-mark { position: absolute; right: -8vw; bottom: -24vw; width: min(66vw, 860px); aspect-ratio: 1; pointer-events: none; }
.identity-orbit { position: absolute; inset: 8%; border: 1px solid rgba(246,243,238,.18); border-radius: 50%; opacity: .1; transform: scale(.84); transition: opacity 760ms ease, transform 1000ms var(--gesture-ease); }
.identity-line { position: absolute; top: 38%; left: 5%; width: 54%; height: 1px; background: rgba(246,243,238,.45); transform: rotate(-16deg) scaleX(.2); transform-origin: left; transition: transform 900ms var(--gesture-ease) 80ms; }
.identity-surface { position: absolute; right: 28%; bottom: 23%; width: 22%; height: 34%; border: 1px solid rgba(143,169,155,.38); background: rgba(143,169,155,.08); opacity: 0; transform: translate(22px, -14px); transition: opacity 520ms ease 180ms, transform 850ms var(--gesture-ease) 180ms; }
.identity-node { position: absolute; top: 35%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); opacity: 0; transform: scale(.4); transition: opacity 220ms ease 300ms, transform 400ms var(--gesture-ease) 300ms; }
.identity-grid { position: absolute; top: 18%; left: 32%; width: 22%; height: 20%; opacity: 0; background-image: linear-gradient(rgba(246,243,238,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(246,243,238,.18) 1px, transparent 1px); background-size: 13px 13px; transform: translate(-10px, 8px); transition: opacity 600ms ease 250ms, transform 850ms var(--gesture-ease) 250ms; }
.closing.is-entered .identity-orbit { opacity: 1; transform: scale(1); }.closing.is-entered .identity-line { transform: rotate(-16deg) scaleX(1); }.closing.is-entered .identity-surface { opacity: 1; transform: translate(0); }.closing.is-entered .identity-node { opacity: .9; transform: scale(1); }.closing.is-entered .identity-grid { opacity: 1; transform: translate(0); }
.site-footer { color: rgba(246,243,238,.72); background: #161719; border-top: 1px solid rgba(246,243,238,.15); padding: 30px 0 34px; }
.footer-content { display: grid; grid-template-columns: 1fr 2fr auto; gap: 24px; align-items: baseline; font-size: .88rem; }
.footer-logo { display: block; width: 132px; height: auto; filter: invert(1) saturate(0) brightness(2.35); }.footer-content p { margin: 0; }.footer-content small { white-space: nowrap; }

@keyframes interaction-wave {
  0% { opacity: 0; transform: scale(.78); }
  72% { opacity: 1; transform: scale(1.025); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 800px) {
  html { --mobile-content-top: 90px; min-height: 100%; scrollbar-width: none; scroll-padding-top: var(--mobile-content-top); }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
  html, body {
    background-color: var(--stage-background);
    background-image: var(--stage-surface);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  body { min-height: 100dvh; }
  main { padding: 8px 10px max(12px, env(safe-area-inset-bottom, 0px)); background: transparent; }
  .story { display: grid; gap: 14px; }
  .wrap { width: auto; margin-right: max(52px, calc(env(safe-area-inset-right, 0px) + 44px)); margin-left: max(20px, calc(env(safe-area-inset-left, 0px) + 12px)); }
  .site-header { position: fixed; top: max(8px, calc(env(safe-area-inset-top, 0px) + 8px)); right: max(12px, calc(env(safe-area-inset-right, 0px) + 8px)); left: max(12px, calc(env(safe-area-inset-left, 0px) + 8px)); grid-template-columns: 1fr auto; min-height: 60px; margin: 0; padding: 8px 12px 8px 16px; overflow: hidden; color: var(--ink); background: rgba(246,243,238,.9); border: 1px solid rgba(255,255,255,.76); border-radius: 22px; box-shadow: 0 12px 38px rgba(27,27,29,.11), inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(38,50,56,.06); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header::before { position: absolute; z-index: 0; inset: 1px; content: ""; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.3), transparent 38% 68%, rgba(255,255,255,.08)); border-radius: inherit; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header > * { position: relative; z-index: 1; }
  .brand { display: flex; width: 150px; min-height: 44px; align-items: center; }.site-nav { display: none; }
  .mobile-progress { --reading-progress: 0; position: fixed; z-index: 9; top: 50%; right: max(6px, calc(env(safe-area-inset-right, 0px) + 4px)); display: grid; width: 44px; justify-items: center; gap: 0; padding: 8px 0; color: var(--mineral); background: rgba(246,243,238,.88); border: 1px solid rgba(255,255,255,.76); border-radius: 999px; box-shadow: 0 12px 36px rgba(27,27,29,.2), inset 0 0 0 1px rgba(38,50,56,.05); cursor: pointer; touch-action: manipulation; transform: translateY(-50%); -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%); }
  .mobile-progress::before, .mobile-progress::after { position: absolute; z-index: 0; top: 30px; bottom: 30px; left: 50%; width: 1px; content: ""; background: rgba(38,50,56,.28); transform: translateX(-50%); }
  .mobile-progress::before { transition: background-color 360ms ease; }
  .mobile-progress::after { width: 2px; background: var(--sage); transform: translateX(-50%) scaleY(var(--reading-progress)); transform-origin: top; transition: transform 80ms linear, background-color 360ms ease; }
  .progress-dot { position: relative; z-index: 1; display: grid; width: 44px; height: 44px; place-items: center; color: inherit; text-decoration: none; }
  .progress-dot::before { width: 7px; height: 7px; content: ""; background: var(--paper); border: 1px solid rgba(38,50,56,.64); border-radius: 999px; opacity: .7; transform: scale(.86); transition: opacity 280ms ease, transform 380ms var(--gesture-ease), background 280ms ease, border-color 280ms ease; }
  .progress-dot.is-visible::before { opacity: .9; transform: scale(1); }
  .progress-dot:hover::before, .progress-dot:focus-visible::before { opacity: 1; transform: scale(1.2); }
  .progress-dot.is-active::before { opacity: 1; background: var(--sage); border-color: var(--sage); transform: scale(1.35); }
  .story-card { width: 100%; min-height: calc(100svh - 20px); margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.34); border-radius: 28px; box-shadow: 0 16px 44px rgba(27,27,29,.16); }
  .hero { z-index: 0; min-height: calc(100svh - 16px); min-height: calc(100lvh - 16px); align-items: center; padding-top: max(144px, calc(env(safe-area-inset-top, 0px) + 118px)); padding-bottom: max(96px, calc(env(safe-area-inset-bottom, 0px) + 84px)); background: var(--paper); }.hero-orb { right: -44vw; bottom: -35vw; width: 104vw; }
  .section, .closing { min-height: calc(100svh - 20px); margin-top: 0; padding-top: max(104px, calc(env(safe-area-inset-top, 0px) + 76px)); padding-bottom: max(104px, calc(env(safe-area-inset-bottom, 0px) + 84px)); }
  .approach { z-index: 1; background: var(--paper); }.method { z-index: 2; }.criteria { z-index: 3; }.complexity { z-index: 4; }.closing { z-index: 5; }
  .criteria + .complexity { box-shadow: 0 -1px 0 rgba(246,243,238,.46), 0 -16px 42px rgba(246,243,238,.08); }
  h1 { font-size: clamp(3.15rem, 14vw, 5.4rem); } h2 { font-size: clamp(2.45rem, 11vw, 4.1rem); }.intro { margin-top: 26px; }
  .section-grid { grid-template-columns: 1fr; gap: 30px; }.side-note { max-width: 340px; }
  .approach .context-signal { top: 22%; right: -4vw; bottom: auto; width: 62vw; opacity: .82; }
  .method .context-surface { transform: translate(24px, -18px) rotate(1.4deg); }.method .moment-surface { transform: translate(-20px, 22px) rotate(-1.8deg); }
  .method.is-entered .context-surface, .method.is-entered .moment-surface, .method.is-entered .need-surface { transform: translate(0) rotate(0); }
  .method.is-entered .method-link { transform: rotate(-22deg) scaleX(.72); }
  .criteria-field { opacity: .72; }.field-filter { inset: -8% 10% -10% -30%; }.field-line { right: -16%; }
  .complexity-field { right: -18vw; bottom: 12%; width: 76vw; height: 24%; opacity: .72; }
  .identity-mark { right: -46vw; bottom: -14vw; width: 108vw; opacity: .82; }
  .method-shapes span:nth-child(1) { right: -10%; width: 50vw; height: 40vw; }.method-shapes span:nth-child(2) { right: 10%; width: 34vw; height: 50vw; }.method-shapes span:nth-child(3) { display: none; }
  .site-footer { display: none; }

  html.stack-ready main { padding: 0; }
  html.stack-ready .story { position: relative; display: block; }
  html.stack-ready .story-stage {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: grid;
    height: 100svh;
    height: 100lvh;
    overflow: hidden;
    background-color: var(--stage-background);
    background-image: var(--stage-surface);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    isolation: isolate;
    will-change: transform;
  }
  html.stack-ready .story-cards {
    display: grid;
    width: 100%;
    height: 100%;
    padding: max(84px, calc(var(--mobile-content-top) - 6px)) 10px max(46px, calc(env(safe-area-inset-bottom, 0px) + 18px));
    overflow: hidden;
    align-items: stretch;
  }
  html.stack-ready .story-card { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 0; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.34); border-radius: 28px; box-shadow: 0 16px 44px rgba(27,27,29,.16); backface-visibility: hidden; will-change: transform; }
  html.stack-ready .hero, html.stack-ready .section, html.stack-ready .closing { padding-top: clamp(58px, 8svh, 78px); padding-bottom: clamp(52px, 7svh, 72px); }
  html.stack-ready { overscroll-behavior-y: none; }

  html.scroll-driven-pinning.stack-ready body { timeline-scope: --story-stack; }
  html.scroll-driven-pinning.stack-ready .story {
    view-timeline-name: --story-stack;
    view-timeline-axis: block;
    view-timeline-inset: 0;
  }
  html.scroll-driven-pinning.stack-ready .story-stage {
    animation: pin-story-layer linear both;
    animation-timeline: --story-stack;
    animation-range: contain 0% contain 100%;
  }
}

@keyframes pin-story-layer {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, var(--stack-pin-distance), 0); }
}

@media (max-width: 800px) and (max-height: 699px) {
  html:not(.stack-ready) .section, html:not(.stack-ready) .closing { padding-top: 96px; padding-bottom: 88px; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header, .mobile-progress { background: rgba(246,243,238,.94); }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .site-header, .mobile-progress { background: rgba(246,243,238,.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-enabled) { scroll-behavior: auto; }
  html:not(.motion-enabled) *, html:not(.motion-enabled) *::before, html:not(.motion-enabled) *::after {
    transition: none !important;
    animation: none !important;
  }
  html:not(.motion-enabled) .section, html:not(.motion-enabled) .closing,
  html:not(.motion-enabled) .hero-orb, html:not(.motion-enabled) .context-signal, html:not(.motion-enabled) .method-shapes,
  html:not(.motion-enabled) .criteria-field, html:not(.motion-enabled) .complexity-field, html:not(.motion-enabled) .identity-mark { transform: none !important; }
}