@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #f0eee8;
  --muted: rgba(240, 238, 232, .57);
  --line: rgba(240, 238, 232, .22);
  --red: #d5ff39;
  --black: #090a08;
  --paper: rgba(12, 13, 10, .86);
  --mono: "DM Mono", "Courier New", monospace;
  --sans: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--black); overscroll-behavior-y: none; }
body { margin: 0; background: var(--black); color: var(--ink); font-family: var(--sans); }
a { color: inherit; }
button, input, textarea { font: inherit; }

.story { height: 1000vh; position: relative; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: #0b0a09; }
#sequence { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -5; filter: saturate(.72) contrast(1.08) brightness(.94); }
.stage__shade { position: absolute; inset: 0; z-index: -4; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.42), transparent 31%, transparent 69%, rgba(0,0,0,.42)), linear-gradient(180deg, rgba(0,0,0,.27), transparent 24%, transparent 76%, rgba(0,0,0,.46)); }
.stage__noise { position: absolute; inset: -50%; z-index: 20; pointer-events: none; opacity: .035; 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); animation: noise .18s steps(2) infinite; }
.stage__scan { position: absolute; inset: 0; z-index: 19; pointer-events: none; opacity: .07; background: repeating-linear-gradient(0deg, transparent 0 3px, #000 4px); }

@keyframes noise { 0% { transform: translate(0); } 25% { transform: translate(2%,-1%); } 50% { transform: translate(-1%,2%); } 75% { transform: translate(1%,1%); } }

.topbar { position: absolute; z-index: 30; inset: 0 0 auto; height: 74px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.brand { display: flex; gap: 12px; align-items: center; text-decoration: none; }
.brand__mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--ink); font-weight: 500; }
.topbar__meta { display: flex; align-items: center; gap: 28px; }

.scene { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; visibility: hidden; transition: visibility 0s linear .35s; }
.scene.is-visible { visibility: visible; transition-delay: 0s; }
.scene a, .scene button, .scene input, .scene textarea { pointer-events: auto; }
.eyebrow, .scene-code { font: 400 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.scene--hero { padding: 114px 6vw 44px; display: flex; flex-direction: column; justify-content: space-between; }
.scene-code { align-self: flex-end; }
.hero-copy { width: min(640px, 48vw); margin-top: auto; margin-bottom: 6vh; }
.hero-copy h1, .case-heading h2, .contact-copy h2 { margin: 13px 0 22px; font-size: clamp(56px, 7.2vw, 128px); line-height: .79; letter-spacing: -.075em; text-transform: uppercase; }
.hero-copy h1 span, .case-heading h2 span, .contact-copy h2 span { color: transparent; -webkit-text-stroke: 1px rgba(240,238,232,.86); }
.hero-foot { display: flex; justify-content: space-between; max-width: 490px; padding-top: 16px; border-top: 1px solid var(--line); font: 400 11px/1.65 var(--mono); text-transform: uppercase; }
.hero-location { color: var(--muted); }
.scroll-cue { position: absolute; right: 34px; bottom: 38px; display: flex; align-items: center; gap: 12px; font: 400 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; transform: rotate(90deg) translateX(-100%); transform-origin: right bottom; }
.scroll-cue i { width: 56px; height: 1px; background: var(--ink); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--red); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { from { transform: translateX(-100%); } 55%, to { transform: translateX(100%); } }

.scene--case { padding: 116px 7vw 54px; display: grid; grid-template-columns: 1fr minmax(390px, 34vw); align-items: end; gap: 10vw; }
.case-heading { align-self: start; }
.case-heading h2 { font-size: clamp(68px, 8.5vw, 148px); }
.case-sheet { position: relative; padding: 20px 22px 23px; background: var(--paper); border: 1px solid rgba(240,238,232,.5); backdrop-filter: blur(13px); box-shadow: 0 24px 80px rgba(0,0,0,.3); }
.case-sheet::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(240,238,232,.09); pointer-events: none; }
.case-sheet__head, .record-card__top, .contact-form__head { display: flex; justify-content: space-between; padding-bottom: 13px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font: 400 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.case-sheet dl { margin: 0; }
.case-sheet dl > div { display: grid; grid-template-columns: 34% 1fr; padding: 11px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(7px); transition: opacity .35s ease, transform .35s ease; }
.case-sheet dl > div.is-revealed { opacity: 1; transform: none; }
.case-sheet dt, .case-sheet dd { margin: 0; font: 400 10px/1.4 var(--mono); text-transform: uppercase; }
.case-sheet dt { color: var(--muted); }
.case-sheet dd { letter-spacing: .045em; }
.red { color: var(--red); }
.case-sheet__actions { width: 75%; margin-top: 17px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 7px; }
.case-sheet__action { padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; color: var(--ink); border: 1px solid var(--line); font: 500 9px/1 var(--mono); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: color .2s, background .2s, border-color .2s; }
.case-sheet__action:hover { color: var(--black); background: var(--red); border-color: var(--red); }
.stamp { position: absolute; right: 18px; bottom: 14px; padding: 7px 9px; border: 2px solid var(--red); color: var(--red); font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-5deg); opacity: .9; }

.scene--records { padding: 105px 5vw 50px; }
.records-heading { text-align: center; }
.records-heading h2 { margin: 7px 0; font-size: clamp(42px, 5.5vw, 92px); line-height: .9; letter-spacing: -.065em; text-transform: uppercase; }
.records-heading > p:last-child { margin: 0; font: 400 10px var(--mono); color: var(--muted); }
.record-card { position: absolute; top: 37%; width: min(29vw, 420px); padding: 18px 19px; background: rgba(9,10,8,.82); border: 1px solid rgba(240,238,232,.52); backdrop-filter: blur(13px); transition: transform .32s ease, opacity .25s ease; }
.record-card--left { left: 4vw; }
.record-card--right { right: 4vw; }
.record-card.is-changing { opacity: 0; transform: translateY(12px); }
.record-card__type { margin: 18px 0 7px; color: var(--red); font: 400 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.record-card h3 { margin: 0 0 35px; font-size: clamp(27px, 2.6vw, 44px); line-height: .9; letter-spacing: -.055em; text-transform: uppercase; }
.record-card__copy { min-height: 54px; margin: 0 0 18px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.record-card a { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); font: 400 9px var(--mono); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.record-card a:hover { color: var(--red); }

.scene--contact { padding: 110px 3vw 55px 7vw; display: grid; grid-template-columns: 1fr minmax(320px, 26vw); align-items: center; gap: 8vw; }
.contact-copy { max-width: 650px; }
.contact-copy h2 { font-size: clamp(58px, 7vw, 118px); }
.contact-copy > p:last-child { max-width: 470px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.contact-form { width: min(100%, 370px); justify-self: end; padding: 16px 18px 18px; background: rgba(9,10,8,.88); border: 1px solid rgba(240,238,232,.6); backdrop-filter: blur(18px); }
.contact-form label { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
.contact-form label > span { display: block; margin-bottom: 6px; color: var(--muted); font: 400 8px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.contact-form input, .contact-form textarea { display: block; width: 100%; padding: 4px 0; color: var(--ink); background: transparent; border: 0; outline: 0; resize: none; font: 400 12px/1.4 var(--mono); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(240,238,232,.28); }
.contact-form input:focus, .contact-form textarea:focus { color: white; }
.contact-form button { width: 100%; margin-top: 18px; padding: 14px 15px; display: flex; justify-content: space-between; color: var(--black); background: var(--ink); border: 0; cursor: pointer; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: background .2s, color .2s; }
.contact-form button:hover { color: white; background: var(--red); }
.form-status { min-height: 13px; margin: 10px 0 0; color: var(--red); font: 400 9px var(--mono); text-transform: uppercase; }

.timeline { position: absolute; z-index: 25; right: 28px; top: 50%; display: grid; grid-template-columns: auto 1px auto; align-items: stretch; gap: 13px; height: 290px; transform: translateY(-50%); font-family: var(--mono); }
.timeline__label { position: absolute; top: -32px; right: 0; color: var(--muted); font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.timeline__rail { width: 1px; height: 100%; background: var(--line); overflow: hidden; }
.timeline__rail i { display: block; width: 100%; height: 100%; background: var(--red); transform: scaleY(0); transform-origin: top; }
.timeline ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; }
.timeline li { display: flex; align-items: center; gap: 7px; color: rgba(240,238,232,.28); font-size: 8px; text-transform: uppercase; transition: color .25s; }
.timeline li b { font-weight: 400; }
.timeline li span { display: none; }
.timeline li.is-active { color: var(--ink); }

.loader { position: fixed; z-index: 100; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 32px; background: #090909; color: var(--ink); transition: opacity .55s ease, visibility 0s linear .55s; }
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__top { display: flex; justify-content: space-between; font: 400 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.loader__center { width: min(440px, 86vw); margin: auto; }
.loader__center p, .loader__code { font: 400 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.loader__bar { height: 1px; margin-top: 13px; background: rgba(240,238,232,.17); }
.loader__bar i { display: block; height: 100%; width: 0; background: var(--red); transition: width .15s; }
.loader__code { margin: 0; }

@media (max-width: 860px) {
  .story { height: 850vh; }
  .topbar { height: 62px; padding: 0 18px; }
  .scene--hero { padding: 88px 20px 30px; }
  .scene-code { display: none; }
  .hero-copy { width: 90vw; margin-bottom: 13vh; }
  .hero-copy h1 { font-size: clamp(53px, 15vw, 82px); }
  .hero-foot { max-width: 90%; }
  .scroll-cue { right: 17px; bottom: 27px; }
  .timeline { right: 14px; height: 230px; }
  .timeline__label { display: none; }
  .scene--case { padding: 86px 20px 48px; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 10px; }
  .case-heading h2 { margin-top: 8px; font-size: clamp(60px, 18vw, 100px); }
  .case-sheet { width: calc(100% - 28px); align-self: flex-start; }
  .case-sheet__actions { width: 78%; gap: 5px; }
  .case-sheet__action { padding-inline: 9px; font-size: 8px; }
  .scene--records { padding: 82px 20px 48px; }
  .records-heading { text-align: left; }
  .records-heading h2 { max-width: 70vw; font-size: 43px; }
  .record-card { top: auto; bottom: 54px; width: calc(50% - 24px); min-height: 215px; padding: 13px; }
  .record-card--left { left: 14px; }
  .record-card--right { right: 14px; }
  .record-card h3 { margin-bottom: 20px; font-size: 22px; }
  .record-card__copy { font-size: 9px; }
  .scene--contact { padding: 84px 20px 45px; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 10px; }
  .contact-copy h2 { margin: 8px 0 12px; font-size: clamp(47px, 14vw, 74px); }
  .contact-copy > p:last-child { display: none; }
  .contact-form { width: calc(100% - 25px); padding: 14px 16px; }
}

@media (max-width: 520px) {
  .record-card { min-height: 198px; }
  .record-card__copy { display: none; }
  .record-card h3 { min-height: 43px; margin: 16px 0 18px; }
  .record-card__top span:last-child { display: none; }
  .case-sheet dl > div { padding: 8px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}