:root {
  --ink: #08090a;
  --charcoal: #101113;
  --paper: #f0eee9;
  --muted: #8f8f8b;
  --orange: #ff5a0a;
  --orange-soft: #ff7a32;
  --ease: cubic-bezier(.2,.8,.2,1);
  --mx: 0;
  --my: 0;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
button, a { color: inherit; font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.preloader {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-content: center; gap: 18px;
  background: #070809;
  transition: opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__brand { font-weight: 800; font-size: clamp(26px, 3vw, 48px); letter-spacing: -.08em; }
.preloader__brand i { color: var(--orange); font-style: normal; letter-spacing: -.16em; margin-right: .28em; }
.preloader__line { width: min(360px, 64vw); height: 2px; overflow: hidden; background: #27282a; }
.preloader__line span { display: block; width: 0; height: 100%; background: var(--orange); transition: width .25s ease; }
.preloader p { margin: 0; color: #777; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }

#ambient { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .35; pointer-events: none; }
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation: grain .18s steps(2) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(2%,-3%)} 50%{transform:translate(-3%,2%)} 75%{transform:translate(3%,4%)} 100%{transform:translate(-2%,-2%)} }
.cursor-glow {
  position: fixed; z-index: 92; width: 380px; height: 380px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,90,10,.08), transparent 66%);
  transform: translate(-50%,-50%); opacity: 0; transition: opacity .3s ease;
}
body.has-pointer .cursor-glow { opacity: 1; }

.experience { position: fixed; inset: 0; isolation: isolate; }
.stage { position: absolute; inset: 0; perspective: 1400px; overflow: hidden; }
.slide {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translate3d(7%,0,-80px) scale(1.025);
  filter: blur(10px); transition: opacity .75s var(--ease), transform .95s var(--ease), filter .75s var(--ease), visibility .95s;
  will-change: transform, opacity, filter;
}
.slide.is-active { z-index: 3; opacity: 1; visibility: visible; transform: translate3d(0,0,0) scale(1); filter: none; }
.slide.is-before { transform: translate3d(-7%,0,-80px) scale(.96); }
.slide__inner {
  position: relative; overflow: hidden;
  width: min(100vw, 177.7778vh); height: min(100vh, 56.25vw); aspect-ratio: 16/9;
  background: #090a0b; box-shadow: 0 0 90px rgba(0,0,0,.85);
}
.slide--image img { width: 100%; height: 100%; display: block; object-fit: contain; transform: scale(1.035); clip-path: inset(0 100% 0 0); filter: brightness(.7); transition: transform 1.8s var(--ease), clip-path 1.15s var(--ease), filter 1.1s ease; }
.slide--image.is-active img { transform: scale(1); clip-path: inset(0 0 0 0); filter: brightness(1); }
.slide--image .slide__inner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

.chapter { isolation: isolate; background: #08090a; }
.chapter__image {
  position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover;
  transform: scale(1.06) translate(calc(var(--mx) * -7px), calc(var(--my) * -5px));
  transition: transform 6s var(--ease); will-change: transform;
}
.is-active .chapter__image { transform: scale(1.015) translate(calc(var(--mx) * -7px), calc(var(--my) * -5px)); }
.chapter__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,6,7,.96) 0%, rgba(5,6,7,.76) 35%, rgba(5,6,7,.08) 72%); }
.chapter--cycle .chapter__shade { background: linear-gradient(90deg, rgba(5,6,7,.1) 24%, rgba(5,6,7,.72) 58%, rgba(5,6,7,.98) 100%); }
.chapter--cases .chapter__shade { background: linear-gradient(90deg, rgba(5,6,7,.98) 0%, rgba(5,6,7,.7) 38%, rgba(5,6,7,.05) 72%); }
.chapter--methodology .chapter__shade { background: linear-gradient(90deg, rgba(5,6,7,.97) 0%, rgba(5,6,7,.72) 35%, rgba(5,6,7,.08) 70%); }
.chapter--closing .chapter__shade { background: linear-gradient(90deg, rgba(5,6,7,.98) 0%, rgba(5,6,7,.82) 42%, rgba(5,6,7,.04) 82%); }
.chapter__copy { position: absolute; z-index: 2; top: 17%; width: 51%; }
.chapter__copy--left { left: 6.7%; }
.chapter__copy--right { right: 6.7%; width: 39%; }
.eyebrow {
  margin: 0 0 2.2em; display: flex; align-items: center; gap: 12px;
  color: var(--orange-soft); font-size: clamp(7px, .68vw, 13px); font-weight: 750; letter-spacing: .18em; text-transform: uppercase;
}
.eyebrow span { display: inline-block; width: 28px; height: 1px; background: var(--orange); }
.chapter h1 {
  margin: 0; max-width: 970px; font-size: clamp(30px, 4.15vw, 80px); line-height: .97; letter-spacing: -.055em; font-weight: 420;
}
.chapter h1 em { color: var(--paper); font-style: normal; font-weight: 780; }
.chapter .lead {
  margin: 2.3em 0 0; width: min(560px, 86%); color: rgba(240,238,233,.68);
  font-size: clamp(9px, 1vw, 19px); line-height: 1.55;
}
.chapter__foot {
  margin-top: clamp(30px, 5.4vh, 72px); padding-top: 18px; width: min(560px, 88%);
  display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.58); font-size: clamp(7px,.72vw,14px); letter-spacing: .04em;
}
.chapter__foot span:first-child { color: var(--paper); font-weight: 650; }
.chapter__index {
  position: absolute; z-index: 2; right: 6.7%; top: 12%; color: rgba(255,255,255,.08);
  font-size: clamp(78px, 12vw, 230px); font-weight: 800; letter-spacing: -.09em; line-height: 1;
}
.chapter__index span { color: rgba(255,90,10,.38); }
.scroll-cue { position: absolute; z-index: 2; left: 6.7%; bottom: 7%; display: flex; align-items: center; gap: 12px; color: #707174; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.scroll-cue i { position: relative; width: 42px; height: 1px; overflow: hidden; background: #363739; }
.scroll-cue i::after { content:""; position:absolute; width: 40%; height:100%; background:var(--orange); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { from{transform:translateX(-110%)} to{transform:translateX(300%)} }

.discipline-list {
  position: absolute; z-index: 2; right: 6.7%; bottom: 8%; width: 57%; margin: 0; padding: 0;
  list-style: none; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.18);
}
.discipline-list li { padding: 16px 12px 0; border-right: 1px solid rgba(255,255,255,.14); }
.discipline-list li:first-child { padding-left: 0; }
.discipline-list li:last-child { border-right: 0; }
.discipline-list b { display: block; color: var(--orange); font-size: clamp(7px,.7vw,13px); margin-bottom: 8px; }
.discipline-list span { font-size: clamp(8px,.78vw,15px); font-weight: 650; }
.sector-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2.2em; width: 78%; }
.sector-tags span { padding: .65em 1em; border: 1px solid rgba(255,255,255,.16); border-radius: 99px; color: rgba(255,255,255,.7); font-size: clamp(7px,.68vw,13px); }

.editorial { position: relative; padding: 12.5% 6.7% 7%; }
.editorial--paper { color: #121315; background: #eeece7; }
.editorial--paper::before { content:""; position:absolute; inset:0; opacity:.09; background-image:radial-gradient(#333 0.55px, transparent .7px); background-size:4px 4px; pointer-events:none; }
.editorial--dark { background: radial-gradient(circle at 72% 20%, #1c1d1f 0%, #0a0b0c 44%, #070809 78%); }
.editorial--dark::before { content:""; position:absolute; inset:-30%; opacity:.15; background:conic-gradient(from 90deg at 50% 50%,transparent,#ff5a0a22,transparent 20%); animation:slow-spin 18s linear infinite; }
@keyframes slow-spin { to { transform:rotate(360deg); } }
.editorial--orange { color:#111; background:#ff5a0a; }
.editorial--orange::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 65% 40%,rgba(255,255,255,.12),transparent 38%),linear-gradient(120deg,transparent 50%,rgba(0,0,0,.08)); pointer-events:none; }
.editorial__header { position:relative; z-index:2; }
.editorial__header .eyebrow { margin-bottom:1.5em; }
.editorial--paper .eyebrow, .editorial--orange .eyebrow { color:#9c3d16; }
.editorial--paper .eyebrow span, .editorial--orange .eyebrow span { background:#c74712; }
.editorial h2, .methodology__heading h2, .closing__copy h2 { margin:0; font-size:clamp(34px,4.2vw,82px); line-height:.98; letter-spacing:-.055em; font-weight:390; }
.editorial h2 strong, .methodology__heading h2 strong, .closing__copy h2 strong { font-weight:780; }
.editorial__header--compact h2 { font-size:clamp(34px,3.5vw,68px); }
.story-columns { position:relative; z-index:2; width:70%; margin:4.2% 0 3.2%; display:grid; grid-template-columns:1fr 1fr; gap:7%; }
.story-columns p { margin:0; color:#55534f; font-size:clamp(9px,.95vw,18px); line-height:1.58; }
.metric-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:82%; }
.metric-grid > div { min-height:clamp(64px,8.5vh,105px); padding:1.2% 2%; background:#f7f5f0; border-left:2px solid var(--orange); box-shadow:0 8px 24px #0000000c; }
.metric-grid strong { display:block; font-size:clamp(18px,2.1vw,40px); letter-spacing:-.05em; }
.metric-grid span { display:block; margin-top:5px; color:#77736d; font-size:clamp(6px,.58vw,11px); letter-spacing:.11em; text-transform:uppercase; }
.editorial__line { position:relative; z-index:2; width:82%; margin-top:1.4%; display:flex; align-items:center; gap:12px; color:#8c8983; font-size:clamp(6px,.55vw,10px); letter-spacing:.08em; text-transform:uppercase; }
.editorial__line i { position:absolute; left:0; right:0; top:50%; height:2px; background:linear-gradient(90deg,var(--orange),#ff8c4d); z-index:-1; opacity:.7; }
.editorial__line span,.editorial__line b { padding:0 7px; background:#eeece7; }
.editorial__line b { margin:auto; font-weight:500; }

.thesis-grid { position:relative; z-index:2; margin-top:5.3%; display:grid; grid-template-columns:repeat(3,1fr); gap:3.2%; }
.thesis-grid article { padding-top:2%; border-top:2px solid #171717; }
.thesis-grid b { font:700 clamp(10px,1vw,19px)/1 ui-monospace,SFMono-Regular,monospace; }
.thesis-grid h3 { margin:1.1em 0 .5em; font-size:clamp(16px,1.7vw,33px); letter-spacing:-.03em; }
.thesis-grid p { width:90%; min-height:3.2em; margin:0; font-size:clamp(8px,.9vw,17px); line-height:1.5; }
.thesis-grid > article > span { display:block; margin-top:.7em; font-size:clamp(6px,.55vw,10px); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.signal { display:block; width:100%; height:40px; margin-top:8%; background-repeat:no-repeat; background-position:left bottom; }
.signal--down { background-image:linear-gradient(90deg,#111 0 24%,transparent 24% 27%,#8f300e 27% 52%,transparent 52% 55%,#a63b11 55% 77%,transparent 77% 80%,#c74a15 80%); background-size:100% 55%; transform:skewY(-3deg); }
.signal--noise { background-image:linear-gradient(90deg,#7c280b 0 24%,transparent 24% 27%,#ad3b10 27% 50%,transparent 50% 53%,#111 53% 76%,transparent 76% 79%,#9f350e 79%); background-size:100% 72%; }
.signal--up { background-image:linear-gradient(90deg,#c74a15 0 24%,transparent 24% 27%,#9f350e 27% 52%,transparent 52% 55%,#722307 55% 77%,transparent 77% 80%,#111 80%); background-size:100% 78%; transform:skewY(3deg); }

.methodology__heading { position:absolute; z-index:2; left:6.7%; top:15%; width:44%; }
.methodology__heading .eyebrow { margin-bottom:1.6em; }
.methodology__steps { position:absolute; z-index:2; left:6.7%; right:6.7%; bottom:8%; margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.methodology__steps li { position:relative; min-height:clamp(98px,14vh,165px); padding:clamp(12px,1.5vw,26px); display:flex; gap:14px; overflow:hidden; background:rgba(9,10,11,.82); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(14px); }
.methodology__steps li::after { content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease) .15s; }
.methodology__steps li.is-revealed::after { transform:scaleX(1); }
.methodology__steps b { color:var(--orange); font:700 clamp(8px,.75vw,14px)/1 ui-monospace,SFMono-Regular,monospace; }
.methodology__steps div { display:flex; flex-direction:column; gap:12px; }
.methodology__steps strong { font-size:clamp(10px,1.1vw,21px); }
.methodology__steps span { color:#8e8f90; font-size:clamp(7px,.7vw,13px); line-height:1.45; }

.services-grid { position:relative; z-index:2; margin-top:4%; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.services-grid article { min-height:clamp(120px,20vh,220px); padding:clamp(15px,2vw,34px); background:rgba(19,20,22,.8); border:1px solid rgba(255,255,255,.07); transition:border-color .4s ease,background .4s ease; }
.services-grid article.is-revealed { border-color:rgba(255,90,10,.35); background:rgba(24,24,26,.9); }
.services-grid b { float:right; color:#333538; font-size:clamp(26px,4vw,72px); line-height:.8; letter-spacing:-.08em; }
.services-grid h3 { margin:0 0 1em; font-size:clamp(15px,1.45vw,28px); }
.services-grid h3::before { content:"//"; margin-right:8px; color:var(--orange); }
.services-grid p { margin:0; color:#929395; font-size:clamp(7px,.72vw,14px); line-height:1.75; }

.difference-grid { position:relative; z-index:2; margin-top:6%; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.difference-grid article { min-height:clamp(150px,23vh,250px); padding:clamp(15px,2vw,34px); background:#f8f6f1; border-top:2px solid #d8d4cc; box-shadow:0 8px 30px #0000000b; }
.difference-grid article.is-revealed { border-top-color:var(--orange); }
.difference-grid b { color:var(--orange); font:700 clamp(8px,.75vw,14px)/1 ui-monospace,SFMono-Regular,monospace; }
.difference-grid h3 { margin:1.6em 0 .7em; font-size:clamp(13px,1.3vw,25px); letter-spacing:-.03em; }
.difference-grid p { margin:0; color:#686560; font-size:clamp(8px,.78vw,15px); line-height:1.55; }
.difference__claim { position:relative; z-index:2; margin:2.6% 0 0; padding-top:1.5%; border-top:2px solid var(--orange); text-align:right; font-size:clamp(8px,.7vw,13px); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }

.closing__copy { position:absolute; z-index:2; top:17%; left:6.7%; width:58%; }
.closing__copy .eyebrow { margin-bottom:1.6em; }
.closing__steps { position:absolute; z-index:2; left:6.7%; right:6.7%; bottom:15%; display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0; padding:0; list-style:none; border-top:1px solid rgba(255,255,255,.2); }
.closing__steps li { padding:18px 8% 0 0; min-height:100px; border-right:1px solid rgba(255,255,255,.12); }
.closing__steps li + li { padding-left:8%; }
.closing__steps b,.closing__steps strong,.closing__steps span { display:block; }
.closing__steps b { margin-bottom:10px; color:var(--orange); font:700 clamp(8px,.72vw,13px)/1 ui-monospace,SFMono-Regular,monospace; }
.closing__steps strong { margin-bottom:8px; font-size:clamp(10px,1vw,19px); }
.closing__steps span { color:#8b8c8e; font-size:clamp(7px,.68vw,13px); line-height:1.45; }
.closing__brand { position:absolute; z-index:2; left:6.7%; bottom:6%; display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; }
.closing__brand > span { color:var(--orange); letter-spacing:-.16em; }
.closing__brand small { margin-left:8px; color:#68696b; font-size:7px; font-weight:500; letter-spacing:.11em; text-transform:uppercase; }

[data-fragment] { opacity:0; transform:translate3d(42px,0,0); filter:blur(7px); transition:opacity .65s var(--ease),transform .85s var(--ease),filter .65s ease; pointer-events:none; }
.slide.is-active [data-fragment].is-revealed { opacity:1; transform:translate3d(0,0,0); filter:none; pointer-events:auto; }
.slide.is-active [data-fragment].is-exiting { opacity:0; transform:translate3d(-30px,0,0); }

.hud { position: fixed; z-index: 100; left: 0; right: 0; display: flex; align-items: center; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud--top { top: 0; height: 70px; padding: 0 3.2vw; justify-content: space-between; background: linear-gradient(#08090ad9, transparent); }
.brand { display:flex; align-items:center; gap:7px; color:#f7f5ef; text-decoration:none; font-size:15px; font-weight:850; letter-spacing:-.06em; }
.brand__slashes { color:var(--orange); letter-spacing:-.16em; margin-right:.15em; transform:skew(-12deg); }
.context { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; color:#6e6f71; font-size:9px; letter-spacing:.17em; text-transform:uppercase; white-space:nowrap; }
.context__section { color:#d0cec8; }
.context__dot { width:3px; height:3px; border-radius:50%; background:var(--orange); }
.icon-button { width:38px; height:38px; display:grid; place-items:center; background:transparent; border:1px solid rgba(255,255,255,.12); border-radius:50%; }
.icon-button svg, .nav-button svg, .text-button svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.6; }

.hud--bottom { bottom:0; min-height:76px; padding:0 3.2vw 14px; justify-content:space-between; background:linear-gradient(transparent,#08090aee); align-items:flex-end; }
.counter { min-width:86px; display:flex; align-items:baseline; gap:7px; color:#66676a; font-variant-numeric:tabular-nums; }
.counter strong { color:var(--paper); font-size:22px; font-weight:520; letter-spacing:-.04em; }
.counter span { font-size:10px; }
.timeline { position:absolute; left:50%; bottom:30px; transform:translateX(-50%); display:flex; align-items:center; gap:7px; max-width:48vw; }
.timeline button { position:relative; width:14px; height:14px; padding:0; background:transparent; }
.timeline button::after { content:""; position:absolute; left:50%; top:50%; width:3px; height:3px; border-radius:50%; background:#4b4c4e; transform:translate(-50%,-50%); transition:.3s ease; }
.timeline button:hover::after { width:7px; height:7px; background:#a2a19d; }
.timeline button.is-active::after { width:16px; height:2px; border-radius:2px; background:var(--orange); }
.controls { display:flex; align-items:center; gap:8px; }
.nav-button { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:#17181a; border:1px solid rgba(255,255,255,.08); }
.nav-button:hover { background:#232426; }
.nav-button--accent { background:var(--orange); color:white; }
.nav-button--accent:hover { background:#ff6b20; }
.nav-button:disabled { opacity:.25; cursor:default; }
.text-button { height:42px; display:flex; align-items:center; gap:9px; padding:0 14px; background:transparent; color:#858689; font-size:10px; letter-spacing:.05em; }
.text-button:hover { color:white; }
.progress-track { position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.05); }
.progress-track span { display:block; width:0; height:100%; background:var(--orange); transition:width .7s var(--ease); }

.click-zone { position:fixed; z-index:50; top:16%; bottom:15%; width:9%; }
.click-zone--prev { left:0; cursor:w-resize; }
.click-zone--next { right:0; cursor:e-resize; }

.overview {
  position:fixed; inset:0; z-index:300; overflow:auto; padding:clamp(24px,4vw,72px);
  background:rgba(7,8,9,.97); backdrop-filter:blur(18px); opacity:0; visibility:hidden; transform:scale(1.025);
  transition:.5s var(--ease); user-select:auto;
}
.overview.is-open { opacity:1; visibility:visible; transform:scale(1); }
.overview header { display:flex; align-items:flex-start; justify-content:space-between; margin:0 auto 36px; max-width:1500px; }
.overview header p { margin:0 0 8px; color:var(--orange); font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.overview h2 { margin:0; font-size:clamp(28px,4vw,62px); font-weight:420; letter-spacing:-.05em; }
.close-button { width:44px; height:44px; border-radius:50%; background:#191a1c; font-size:28px; font-weight:200; }
.overview__grid { max-width:1500px; margin:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 14px; }
.overview-card { padding:0; text-align:left; background:transparent; }
.overview-card__preview { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#121315; border:1px solid transparent; transition:.35s var(--ease); }
.overview-card__preview img { width:100%; height:100%; object-fit:cover; filter:saturate(.7) brightness(.76); transition:.35s var(--ease); }
.overview-card:hover .overview-card__preview, .overview-card.is-current .overview-card__preview { border-color:var(--orange); transform:translateY(-3px); }
.overview-card:hover img, .overview-card.is-current img { filter:none; transform:scale(1.025); }
.overview-card__number { position:absolute; top:8px; left:8px; padding:4px 6px; background:#090a0bdb; color:var(--orange); font-size:9px; font-weight:700; }
.overview-card__title { display:block; margin-top:9px; color:#858689; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.overview-card.is-current .overview-card__title { color:white; }

.notes { position:fixed; z-index:250; right:28px; top:82px; width:min(390px,calc(100vw - 56px)); padding:26px; background:#17181aeF; border:1px solid rgba(255,255,255,.1); box-shadow:0 24px 80px #000; transform:translateX(calc(100% + 50px)); opacity:0; transition:.45s var(--ease); backdrop-filter:blur(16px); }
.notes.is-open { transform:none; opacity:1; }
.notes p { margin:0 0 8px; color:var(--orange); font-size:9px; letter-spacing:.18em; text-transform:uppercase; }
.notes h3 { margin:0 0 16px; font-size:22px; letter-spacing:-.03em; }
.notes div { color:#b2b1ad; font-size:13px; line-height:1.55; }
.notes > span { display:block; margin-top:22px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); color:#5e5f61; font-size:9px; text-transform:uppercase; letter-spacing:.12em; }

.hint { position:fixed; z-index:120; left:50%; top:82px; display:flex; gap:18px; transform:translateX(-50%); padding:9px 14px; border-radius:99px; background:rgba(12,13,14,.72); border:1px solid rgba(255,255,255,.08); color:#747578; font-size:9px; opacity:0; animation:hint 5s .8s both; pointer-events:none; backdrop-filter:blur(12px); }
.hint span { display:flex; align-items:center; gap:5px; white-space:nowrap; }
kbd { min-width:18px; padding:3px 5px; border:1px solid #3a3b3d; border-radius:4px; color:#aaa; font:9px inherit; text-align:center; }
@keyframes hint { 0%{opacity:0;transform:translate(-50%,-8px)} 12%,65%{opacity:1;transform:translate(-50%,0)} 100%{opacity:0;visibility:hidden} }
.toast { position:fixed; z-index:500; left:50%; bottom:96px; transform:translate(-50%,16px); padding:9px 16px; border-radius:99px; background:#f1efe9; color:#111; font-size:10px; opacity:0; transition:.3s ease; pointer-events:none; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

@media (max-width: 900px) {
  .overview__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .context span:last-child, .text-button span { display:none; }
  .timeline { gap:2px; max-width:53vw; }
  .timeline button { width:10px; }
  .discipline-list { width:65%; }
  .story-columns { width:88%; }
  .metric-grid,.editorial__line { width:100%; }
  .methodology__steps { grid-template-columns:1fr 1fr; }
  .methodology__steps li { min-height:84px; }
  .hint span:nth-child(n+2) { display:none; }
}
@media (max-width: 560px) {
  .hud--top { height:54px; }
  .context { display:none; }
  .hud--bottom { min-height:62px; }
  .overview__grid { grid-template-columns:1fr; }
  .timeline { display:none; }
  .chapter__copy { top:15%; }
  .chapter .lead { margin-top:1.5em; }
  .chapter__foot, .sector-tags { display:none; }
  .story-columns { grid-template-columns:1fr; gap:8px; margin-top:3%; }
  .metric-grid { gap:5px; }
  .thesis-grid { gap:2%; }
  .thesis-grid p { display:none; }
  .services-grid { gap:5px; }
  .services-grid article { min-height:90px; padding:10px; }
  .methodology__steps { gap:4px; }
  .methodology__steps span { display:none; }
  .difference-grid { gap:5px; }
  .difference-grid article { min-height:100px; padding:10px; }
  .closing__steps span { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}