:root { --hero-gap: 24px; --header-height: 78px; }
html { scroll-padding-top: 24px; }
.site-header { height: var(--header-height); display: flex; justify-content: space-between; padding-inline: var(--hero-gap); }
.wordmark { font-size: 26px; letter-spacing: -.06em; }
.header-actions { display: flex; align-items: center; gap: 22px; }
.primary-cta { display: inline-flex; justify-content: center; align-items: center; gap: 28px; min-height: 44px; padding: 12px 20px; background: var(--signal); color: white; font-size: 14px; transition: background .2s; }
.primary-cta:hover { background: #163e2c; }
.primary-cta span { font-size: 20px; }
.sound-toggle { min-height: 44px; padding: 8px; border: 0; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.sound-toggle[aria-pressed=true] { color: var(--signal); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.hero { padding: var(--hero-gap); }
.hero-campaign { height: calc(100svh - var(--header-height) - var(--hero-gap) * 2); min-height: 0; }
.hero-center { top: 51%; width: 67%; max-width: 910px; }
.hero-title { font-size: clamp(65px, 8.3vw, 132px); line-height: .88; letter-spacing: -.05em; }
.hero-reframe { margin: 28px 0 0; color: var(--signal); font: italic clamp(25px,2.8vw,42px)/1.1 'Instrument Serif',serif; }
.hero-copy { margin-top: 20px; max-width: 470px; font-size: 18px; line-height: 1.5; }
.hero-objects-bottom { display: none; }

/* The two scenes deliberately share the same paper and row geometry. */
.before-work, .system { display: block; padding: 100px var(--pad); overflow: visible; }
.case-sheet { position: relative; max-width: 980px; margin: 35px auto; isolation: isolate; }
.case-sheet-back, .case-sheet-mid { position: absolute; z-index: -1; inset: 3px; border: 1px solid #cec9ba; background: #ded8c8; box-shadow: 3px 10px 20px #302e221c; transform: rotate(-3.5deg); }
.case-sheet-mid { background: #ebe5d7; transform: rotate(2.4deg); }
.case-sheet-paper { padding: 50px 52px 36px; background: repeating-linear-gradient(transparent 0 47px,#61705905 48px 49px),#fcfbf4; border: 1px solid #d3cdbd; box-shadow: 2px 8px 22px #302e222b; }
.case-sheet-paper::before { content: ''; position: absolute; top: -15px; right: 55px; width: 23px; height: 65px; border: 3px solid #868a79; border-radius: 15px; box-shadow: 1px 2px 2px #0002,inset 1px 0 1px #fff; transform: rotate(6deg); }
.case-sheet h2 { margin: 0 0 35px; text-align: center; font: 52px/1.06 'Instrument Serif',serif; letter-spacing: -.025em; }
.case-rows { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.case-row { display: grid; grid-template-columns: 34px minmax(0,1fr) minmax(0,1.28fr); align-items: center; gap: 20px; min-height: 85px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.row-number { color: #8e9180; font-size: 11px; }
.row-action,.row-context { position: relative; min-width: 0; font: 30px/1.15 'Instrument Serif',serif; }
.row-context { color: #898d7d; }
.row-outcome { color: var(--signal); }
.case-row-final { padding-block: 24px; }
.case-row-final .row-action { color: var(--signal); }
.case-row-final .row-context { font-size: 23px; }
.sheet-footnote { margin: 30px 0 0 54px; color: var(--signal); font: 29px/1.2 'Caveat',cursive; }
.write-text { display: inline-block; max-width: 100%; }
.motion-ready .case-row .write-text { clip-path: inset(0 100% 0 0); }
.motion-ready .case-row.is-written .write-text { animation: write-line .7s steps(16,end) forwards; }
.motion-ready .case-row.is-written .row-context .write-text { animation-delay: .16s; }
.strike-action { width: fit-content; }
.strike-action::after { content:''; position: absolute; top: 50%; left: -3%; width: 106%; height: 2px; background: #60745d; transform-origin: left; transform: scaleX(1) rotate(-2deg); }
.motion-ready .strike-action::after { transform: scaleX(0) rotate(-2deg); }
.motion-ready .is-written .strike-action::after { animation: strike-row .4s .65s ease forwards; }
.case-sheet-after .row-action { color: #97998c; }
.case-sheet-after .case-row-final .row-action { color: var(--signal); }
.case-sheet-after .sheet-footnote { color: var(--muted); font: 17px/1.5 'Manrope',sans-serif; }
.thesis { padding-top: 75px; }
.thesis-grid { margin-top: 0; }
.thesis-copy p { font-size: 20px; line-height: 1.55; }
.case-board .fragment-center strong { font-size: 48px; }

.rewrite-section { padding: 110px 30px; min-height: 700px; display: grid; place-items: center; }
.rewrite-copy { width: 100%; text-align: center; }
.rewrite-copy h2 { margin: 0; font-weight: 400; }
.rewrite-old,.rewrite-new { display: table; position: relative; margin-inline: auto; }
.rewrite-old { font: clamp(68px,10.5vw,165px)/1.1 'Instrument Serif',serif; letter-spacing: -.035em; color: #d6e2d3; }
.rewrite-new { margin-bottom: 12px; font: 500 clamp(78px,12vw,185px)/1.1 'Caveat',cursive; color: #fbf9dc; transform: rotate(-4deg); }
.rewrite-old::after { content: ''; position: absolute; left: -2%; top: 52%; width: 104%; height: 5px; background: #f3edc8; border-radius: 50%; transform-origin: left; transform: rotate(-3deg); }
.rewrite-copy > p { margin: 45px 0 0; font-size: 20px; color: #dae6d8; }
.motion-ready .rewrite-new { opacity: 0; clip-path: inset(0 100% 0 0); }
.motion-ready .rewrite-old::after { transform: rotate(-3deg) scaleX(0); }
.motion-ready .is-rewritten .rewrite-old::after { animation: strike-row .55s ease forwards; }
.motion-ready .is-rewritten .rewrite-new { opacity: 1; animation: write-line .95s .6s steps(20,end) forwards; }

.vision-story { height: 190svh; padding: 0 var(--pad); background: #172019; }
.vision-sticky { position: sticky; top: 0; height: 100svh; min-height: 550px; display: grid; align-items: center; }
.vision-brand { position: absolute; inset: 0; display: grid; place-items: center; font: 600 clamp(90px,19vw,310px)/1 'Manrope',sans-serif; letter-spacing: -.085em; color: #edf0e4; }
.vision-philosophy { position: relative; padding-block: 60px; text-align: center; }
.vision-philosophy h2 { margin: 0; font: clamp(56px,6.8vw,108px)/1.02 'Instrument Serif',serif; letter-spacing: -.03em; color: #eff0e4; }
.vision-philosophy h2 em { color: #b9d0b7; font-weight: 400; }
.vision-philosophy > p { margin: 32px auto 0; max-width: 750px; font-size: 22px; line-height: 1.55; color: #b9c3b6; }
.intelligence-thread { display: flex; align-items: center; justify-content: center; gap: 25px; margin: 65px auto 0; max-width: 1000px; }
.intelligence-thread span { font: 28px/1.2 'Instrument Serif',serif; color: #d8e5d2; }
.intelligence-thread i { width: 60px; height: 1px; background: #829d7d; }
.motion-ready .vision-brand { opacity: var(--brand-opacity,1); transform: translateY(var(--brand-offset,0)); }
.motion-ready .vision-philosophy { opacity: var(--story-opacity,0); transform: translateY(var(--story-offset,35px)); }
html:not(.motion-ready) .vision-brand { display: none; }
.case-journey { padding-block: 120px; }
.case-journey h2 { text-align: center; font-size: clamp(60px,7vw,108px); }
.journey-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 0; margin: 85px 0 0; list-style: none; }
.journey-steps li { position: relative; padding: 38px 25px 0 0; }
.journey-steps li::before { content: ''; position: absolute; top: 7px; left: 0; width: 100%; height: 1px; background: #9bab93; }
.journey-steps li:last-child::before { display: none; }
.journey-dot { position: absolute; left: 0; top: 0; height: 15px; width: 15px; border: 1px solid var(--signal); background: var(--paper); border-radius: 50%; }
.journey-steps li:last-child .journey-dot { background: var(--signal); }
.journey-steps h3 { margin: 0 0 14px; min-height: 2.14em; font: 31px/1.07 'Instrument Serif',serif; }
.journey-steps p { font-size: 16px; line-height: 1.55; margin: 0; color: var(--muted); max-width: 195px; }
.access { align-items: end; gap: 7vw; }
.access h2 { margin-top: 0; }
.access-copy > p { font-size: 22px; line-height: 1.55; }
.access-form label { font-size: 15px; text-transform: none; letter-spacing: 0; margin-bottom: 15px; }
.input-row { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px; }
.input-row input { font-size: 30px; padding: 15px 0; }
.input-row button { font-size: 14px; min-height: 48px; text-transform: none; letter-spacing: 0; }
.access-form > p { font-size: 12px; line-height: 1.5; margin-bottom: 0; }
footer p { font-size: 11px; }
@keyframes write-line { to { clip-path: inset(0 0 0 0); } }
@keyframes strike-row { to { transform: scaleX(1) rotate(-2deg); } }

@media(max-width:900px) {
  .hero-center { width: 74%; }.hero-title { font-size: 9.5vw; }
  .hero-objects { width: 110%; left: -5%; height: auto; clip-path: inset(0 0 54% 0); }
  .hero-objects-bottom { display: block; position: absolute; z-index: 1; width: 110%; max-width: none; height: auto; bottom: 0; left: -5%; clip-path: inset(54% 0 0 0); pointer-events: none; }
  .case-sheet-paper { padding: 40px 30px 30px; }.case-row { grid-template-columns: 26px minmax(0,1fr) minmax(0,1.3fr); gap: 15px; }.row-action,.row-context { font-size: 26px; }.case-row-final .row-context { font-size: 22px; }.sheet-footnote { margin-left: 41px; }
  .vision-philosophy > p { font-size: 20px; }.intelligence-thread { gap: 15px; }.intelligence-thread span { font-size: 23px; }.intelligence-thread i { width: 25px; }
  .journey-steps { grid-template-columns: 1fr; max-width: 570px; margin-inline: auto; }
  .journey-steps li { padding: 0 0 38px 42px; }.journey-steps li::before { left: 7px; width: 1px; height: 100%; }.journey-steps h3 { min-height: 0; }.journey-steps p { max-width: none; }.journey-dot { top: 4px; }
}
@media(max-width:600px) {
  :root { --hero-gap: 16px; --header-height: 72px; }
  .wordmark { font-size: 25px; }.header-actions { gap: 9px; }.primary-cta { gap: 12px; font-size: 12px; padding: 10px 13px; }.sound-toggle { font-size: 11px; padding-inline: 4px; }
  .hero-campaign { min-height: 0; }.hero-center { top: 49%; width: 90%; }.hero-title { font-size: clamp(43px,12vw,66px); }.hero-reframe { font-size: 26px; margin-top: 22px; }.hero-copy { font-size: 16px; max-width: 265px; margin-top: 18px; }.hero-objects,.hero-objects-bottom { width: 130%; left: -15%; }
  .before-work,.system { padding: 60px 22px; }.case-sheet { margin-block: 24px; }.case-sheet-paper { padding: 38px 18px 26px; }.case-sheet-paper::before { right: 25px; height: 50px; width: 18px; }.case-sheet h2 { font-size: 36px; margin-bottom: 26px; }.case-row { grid-template-columns: 18px minmax(0,1fr) minmax(0,1.25fr); gap: 10px; min-height: 88px; }.row-number { font-size: 9px; }.row-action,.row-context { font-size: 22px; }.case-row-final .row-context { font-size: 19px; }.sheet-footnote { margin-left: 28px; font-size: 25px; }.case-sheet-after .sheet-footnote { font-size: 15px; }.case-row-final .row-action { font-size: 22px; }
  .thesis-copy p { font-size: 19px; }.case-board .fragment-center strong { font-size: 34px; }
  .rewrite-section { min-height: 520px; padding: 80px 18px; }.rewrite-new { font-size: 19vw; }.rewrite-old { font-size: 14vw; }.rewrite-copy > p { font-size: 18px; }.rewrite-old::after { height: 3px; }
  .vision-story { height: 185svh; padding-inline: 22px; }.vision-sticky { min-height: 550px; }.vision-brand { font-size: 25vw; }.vision-philosophy h2 { font-size: 48px; }.vision-philosophy > p { font-size: 18px; }.desktop-break { display: none; }.intelligence-thread { flex-direction: column; gap: 15px; margin-top: 32px; }.intelligence-thread span { font-size: 26px; }.intelligence-thread i { width: 1px; height: 18px; }
  .case-journey { padding-block: 80px; }.case-journey h2 { font-size: 56px; }.journey-steps { margin-top: 55px; }.journey-steps h3 { font-size: 32px; }.journey-steps p { font-size: 17px; }
  .access { gap: 48px; }.access h2 { font-size: 58px; }.access-copy > p { font-size: 20px; }.input-row { grid-template-columns: 1fr; gap: 0; }.input-row input { font-size: 32px; }.input-row button { padding-block: 8px; }.access-form > p { font-size: 12px; }
}
@media(prefers-reduced-motion:reduce) {
  .motion-ready .case-row .write-text,.motion-ready .rewrite-new { clip-path: none; opacity: 1; }
  .motion-ready .strike-action::after,.motion-ready .rewrite-old::after { transform: scaleX(1) rotate(-2deg); }
  .vision-story { height: auto; }.vision-sticky { position: relative; height: auto; min-height: 0; padding-block: 60px; }.motion-ready .vision-brand { display: none; }.motion-ready .vision-philosophy { opacity: 1; transform: none; }
}
html:not(.motion-ready) .reveal { opacity: 1; transform: none; }
@media(max-height:550px) and (min-width:601px) {
  .hero-title { font-size: 15svh; }.hero-reframe { font-size: 25px; margin-top: 15px; }.hero-copy { font-size: 15px; margin-top: 12px; }
}