:root {
  --ink: #05070b;
  --night: #000515;
  --night-2: #06102a;
  --paper: #f3f2ee;
  --white: #f8f8f7;
  --muted: #969ba7;
  --line: rgba(255, 255, 255, 0.14);
  --dark-line: rgba(5, 7, 11, 0.16);
  --cyan: #00e8f2;
  --blue: #168cff;
  --violet: #695cff;
  --purple: #bd4cf2;
  --gradient: linear-gradient(105deg, var(--cyan) 0%, var(--blue) 39%, var(--violet) 70%, var(--purple) 100%);
  --display: "Bricolage Grotesque", Arial, sans-serif;
  --body: "Inter", Arial, sans-serif;
  --mono: "JetBrains Mono", monospace;
  --shell: min(1380px, calc(100vw - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body { margin: 0; overflow-x: hidden; color: var(--white); background: var(--night); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
figure, h1, h2, h3, p { margin: 0; }
::selection { color: #020713; background: var(--cyan); }

.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 10px 14px; color: var(--ink); background: var(--white); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }

.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; height: 88px; display: flex; align-items: center; gap: 16px; padding: 8px 44px 0; background: linear-gradient(180deg,rgba(8,8,9,.98),rgba(8,8,9,.88) 70%,transparent); }
.site-header.is-scrolled { position: fixed; height: 74px; padding-top: 0; background: rgba(7,7,8,.9); border-bottom: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.scroll-progress { position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: var(--gradient); }
.wordmark { display: inline-flex; align-items: center; flex: none; gap: 9px; margin-right: 38px; color: white; }
.wordmark-wave { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 0 8px rgba(91,125,255,.38)); }
.wordmark-text { font: 800 27px/1 var(--display); letter-spacing: -.025em; }
.brand-lockup { position: relative; display: block; overflow: hidden; isolation: isolate; }
.brand-lockup img { position: absolute; height: auto; max-width: none; object-fit: initial; mix-blend-mode: normal; filter: brightness(1.34) contrast(1.08); -webkit-mask-image: url("assets/mareadef.png"); mask-image: url("assets/mareadef.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mask-mode: luminance; }
.desktop-nav { display: flex; align-items: center; gap: 2px; }
.desktop-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 11px 13px; border-radius: 8px; color: rgba(255,255,255,.86); font-size: 15px; font-weight: 550; white-space: nowrap; transition: color .18s ease, background .18s ease; }
.desktop-nav a:hover { color: white; background: rgba(255,255,255,.08); }
.nav-chevron { display: inline-block; font-size: 12px; line-height: 1; opacity: .7; transform: translateY(-2px); }
.nav-badge { padding: 4px 8px 3px; border-radius: 999px; color: #66ece9; background: rgba(46,231,240,.13); font: 700 10px/1 var(--display); font-style: italic; letter-spacing: .08em; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.header-actions { margin-left: auto; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
.menu-toggle span { display: block; width: 22px; height: 1px; margin: 6px auto; background: white; transition: transform .25s ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 95; display: none; flex-direction: column; justify-content: center; gap: 18px; padding: 110px 32px 32px; background: rgba(7,7,8,.98); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu a { font: 600 clamp(34px,8vw,62px)/1 var(--display); }

.pill { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 0 22px; border-radius: 999px; font-size: 12px; font-weight: 600; transition: transform .25s ease, background .25s ease, color .25s ease; }
.pill:hover { transform: translateY(-2px); }
.pill-light { color: var(--ink); background: var(--white); }
.pill-light:hover { background: var(--cyan); }
.pill-gradient { color: #020713; background: var(--gradient); box-shadow: 0 0 38px rgba(80,115,255,.24); }
.header-cta { min-height: 48px; padding-inline: 24px; font-size: 15px; }
.text-link { display: inline-flex; gap: 12px; padding: 8px 0; color: #d9dce4; border-bottom: 1px solid rgba(255,255,255,.38); font-size: 12px; font-weight: 500; }
.arrow-link { display: inline-flex; justify-content: space-between; gap: 40px; width: 100%; padding: 18px 0; border-top: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line); font-size: 13px; font-weight: 600; }
.eyebrow { font: 500 10px/1.35 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.section-shell { width: var(--shell); margin: 0 auto; }
.section-dark { background: var(--ink); }
.section-light { color: var(--ink); background: var(--paper); }
.section-index { display: flex; align-items: center; gap: 18px; padding-bottom: 25px; border-bottom: 1px solid var(--dark-line); font: 500 10px/1 var(--mono); letter-spacing: .13em; }
.section-index span:first-child { color: var(--violet); }
.section-index--light { color: #c4c8d1; border-color: var(--line); }
.display-title { max-width: 1000px; font: 600 clamp(52px,5.8vw,92px)/.94 var(--display); letter-spacing: -.055em; }
.display-title--light { color: var(--white); }
.body-large { color: #4c5059; font-size: clamp(17px,1.45vw,22px); line-height: 1.5; letter-spacing: -.02em; }
.body-large--muted { color: var(--muted); }
.gradient-text { color: transparent; background: var(--gradient); background-clip: text; -webkit-background-clip: text; }

.hero { position: relative; min-height: 920px; height: 100svh; max-height: 1120px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 114px 24px 74px; background: #080809; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 49%,rgba(8,8,9,.02) 0 28%,rgba(8,8,9,.12) 46%,rgba(8,8,9,.45) 82%,rgba(8,8,9,.76)); }
.hero-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-tile { position: absolute; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; box-shadow: 0 28px 80px rgba(0,0,0,.42); background: #111217; will-change: transform; animation: hero-drift 9s ease-in-out infinite alternate; }
.hero-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
@keyframes hero-drift { from { margin-top: 0; } to { margin-top: -12px; } }
.tile-a { top: 12%; left: 8%; width: 17%; aspect-ratio: 3/4; animation-delay: -1s; }
.tile-b { top: 9%; left: 51%; width: 26%; aspect-ratio: 16/10; animation-delay: -4s; }
.tile-c { top: 13%; right: 2%; width: 21%; aspect-ratio: 4/5; animation-delay: -2.5s; }
.tile-d { top: 40%; left: -3%; width: 23%; aspect-ratio: 16/10; animation-delay: -6s; }
.tile-e { bottom: 3%; left: 14%; width: 17%; aspect-ratio: 1/1; animation-delay: -3s; }
.tile-f { bottom: -4%; left: 44%; width: 20%; aspect-ratio: 4/3; animation-delay: -7s; }
.tile-g { bottom: 7%; right: 3%; width: 19%; aspect-ratio: 3/4; animation-delay: -5s; }
.hero-copy { position: relative; z-index: 3; width: min(940px,78vw); display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-title { font: 800 clamp(64px,7.15vw,126px)/.9 var(--display); letter-spacing: -.06em; text-transform: uppercase; text-wrap: balance; }
.hero-title, .hero-lede { width: 100%; }
.hero-title span { display: block; }
.hero-lede { max-width: 540px; margin-top: 36px; color: rgba(230,233,235,.62); font-size: clamp(15px,1.15vw,18px); line-height: 1.55; letter-spacing: -.018em; }
.hero-actions { display: flex; justify-content: center; margin-top: 34px; }
.hero-actions .pill-gradient { min-height: 58px; padding-inline: 38px; color: white; font-size: 16px; box-shadow: inset 0 1px rgba(255,255,255,.3),0 12px 38px rgba(91,125,255,.48); }
.hero .reveal { opacity: 1; transform: none; }

.showreel { overflow: hidden; padding: 82px 0 110px; border-top: 1px solid var(--line); }
.showreel-heading { display: flex; justify-content: space-between; margin-bottom: 34px; }
.showreel-note { color: #747986; font: 400 9px/1 var(--mono); letter-spacing: .08em; }
.reel-row { display: flex; gap: 14px; width: max-content; padding-inline: 22px; }
.reel-row + .reel-row { margin-top: 14px; margin-left: -170px; }
.reel-card { position: relative; width: 300px; height: 220px; overflow: hidden; flex: none; border-radius: 10px; background: #10131a; }
.reel-card--portrait { width: 180px; }
.reel-card--wide { width: 430px; }
.reel-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 58%,rgba(0,0,0,.68)); pointer-events: none; }
.reel-card img, .reel-card video { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.reel-card:hover img, .reel-card:hover video { transform: scale(1.04); }
.reel-card span { position: absolute; z-index: 2; left: 15px; bottom: 13px; color: #e9e9ec; font: 500 8px/1 var(--mono); letter-spacing: .1em; }

.why { padding: 130px 0; }
.why-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(400px,.8fr); gap: 8vw; align-items: center; padding: 74px 0 105px; }
.why-copy .eyebrow { margin-bottom: 25px; color: #6d7180; }
.why-copy .display-title { font-size: clamp(48px,5.2vw,82px); }
.why-copy .body-large { max-width: 710px; margin-top: 30px; }
.why-copy .arrow-link { max-width: 500px; margin-top: 42px; }
.why-film { position: relative; height: 700px; overflow: hidden; border-radius: 14px; background: #0d1017; }
.why-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 56%,rgba(3,6,13,.88)); }
.why-film figcaption { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 27px; display: flex; flex-direction: column; gap: 12px; color: white; }
.why-film figcaption span { font: 500 9px/1 var(--mono); letter-spacing: .12em; color: #8efffb; }
.why-film figcaption strong { max-width: 450px; font: 500 26px/1.12 var(--display); letter-spacing: -.03em; }
.value-strip { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line); }
.value-strip article { min-height: 260px; padding: 28px 42px 32px 0; }
.value-strip article + article { padding-left: 42px; border-left: 1px solid var(--dark-line); }
.value-strip span { color: var(--violet); font: 500 9px/1 var(--mono); }
.value-strip h3 { margin-top: 72px; font: 600 30px/1 var(--display); letter-spacing: -.035em; }
.value-strip p { max-width: 360px; margin-top: 13px; color: #646872; font-size: 14px; line-height: 1.55; }

.capabilities { padding: 130px 0 150px; }
.split-heading { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.58fr); gap: 8vw; align-items: end; padding: 72px 0; }
.split-heading .eyebrow { margin-bottom: 24px; color: #8e95a3; }
.filter-bar { display: flex; gap: 8px; margin-bottom: 30px; }
.filter-button { padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; color: #9298a4; background: transparent; font: 500 9px/1 var(--mono); text-transform: uppercase; cursor: pointer; transition: .25s ease; }
.filter-button:hover, .filter-button.active { color: #020713; border-color: transparent; background: var(--gradient); }
.media-wall { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-flow: dense; gap: 12px; }
.media-card { position: relative; min-height: 290px; overflow: hidden; border-radius: 10px; background: #11141a; transition: opacity .3s ease, transform .3s ease; }
.media-card--landscape { grid-column: span 2; }
.media-card--portrait { grid-row: span 2; min-height: 592px; }
.media-card.is-hidden { display: none; }
.media-card img, .media-card video { transition: transform .75s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.media-card:hover img, .media-card:hover video { transform: scale(1.035); }
.media-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 58%,rgba(0,0,0,.82)); pointer-events: none; }
.media-card > div { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 7px; }
.media-card > div span { grid-column: 1 / -1; color: #8bf8ff; font: 500 8px/1 var(--mono); letter-spacing: .11em; }
.media-card > div strong { font: 500 20px/1.1 var(--display); letter-spacing: -.025em; }
.media-card > div em { color: #9fa4af; font: 400 8px/1 var(--mono); font-style: normal; }

.brand-statement { position: relative; min-height: 740px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 110px 32px; text-align: center; color: #020713; background: var(--gradient); }
.brand-statement::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%,rgba(255,255,255,.3),transparent 58%); }
.statement-wave { position: absolute; inset: -26% -10%; opacity: .14; mix-blend-mode: multiply; }
.statement-wave img { object-fit: cover; }
.brand-statement > *:not(.statement-wave) { position: relative; z-index: 2; }
.brand-statement .eyebrow { margin-bottom: 34px; }
.brand-statement h2 { max-width: 1180px; font: 650 clamp(62px,7.5vw,122px)/.87 var(--display); letter-spacing: -.07em; }
.brand-statement > p:last-child { margin-top: 30px; font-size: clamp(18px,2vw,28px); font-weight: 600; letter-spacing: -.03em; }

.process { padding: 130px 0 160px; }
.process-heading { padding: 76px 0 90px; }
.process-heading .eyebrow { margin-bottom: 24px; color: #8b919e; }
.process-stories { display: flex; flex-direction: column; gap: 22px; }
.process-story { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 610px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #0b0d13; }
.process-story--reverse figure { order: 2; }
.process-story figure { position: relative; min-height: 580px; overflow: hidden; }
.process-story figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.3),transparent 55%); }
.media-chip { position: absolute; z-index: 2; top: 22px; left: 22px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(3,8,21,.55); backdrop-filter: blur(8px); font: 500 8px/1 var(--mono); letter-spacing: .1em; }
.media-chip--winner { color: #020713; border: 0; background: var(--gradient); }
.process-story > div { display: flex; flex-direction: column; justify-content: center; padding: clamp(38px,5vw,82px); }
.story-no { color: #6e72ff; font: 500 10px/1 var(--mono); }
.process-story h3 { max-width: 570px; margin-top: 90px; font: 600 clamp(40px,4.2vw,68px)/.95 var(--display); letter-spacing: -.055em; }
.process-story p { max-width: 560px; margin-top: 25px; color: #9ca1ac; font-size: 17px; line-height: 1.55; }
.process-story ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 32px 0 0; list-style: none; }
.process-story li { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: #c7cad1; font: 400 8px/1 var(--mono); text-transform: uppercase; }

.impact { padding: 130px 0 150px; }
.impact .split-heading { grid-template-columns: 1.1fr .6fr; }
.impact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; align-items: start; }
.impact-card { padding: 12px 12px 34px; border: 1px solid var(--dark-line); border-radius: 13px; background: #ecebe7; }
.impact-card figure { height: 390px; overflow: hidden; border-radius: 8px; background: #10131a; }
.impact-card--tall figure { height: 520px; }
.impact-card > span { display: block; margin: 24px 6px 0; color: #5c5fff; font: 500 9px/1 var(--mono); letter-spacing: .1em; }
.impact-card h3 { margin: 50px 6px 0; font: 600 clamp(30px,2.6vw,45px)/.97 var(--display); letter-spacing: -.045em; }
.impact-card p { margin: 17px 6px 0; color: #666a73; font-size: 14px; line-height: 1.55; }

.economics { position: relative; min-height: 900px; overflow: hidden; padding: 140px 0; }
.economics-film, .economics-shade { position: absolute; inset: 0; }
.economics-film video { filter: saturate(.75) brightness(.5); }
.economics-shade { background: linear-gradient(90deg,rgba(3,8,21,.96) 0 34%,rgba(3,8,21,.68) 65%,rgba(3,8,21,.88)); }
.economics-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr .78fr; gap: 10vw; align-items: center; }
.economics-copy .section-index { margin-bottom: 82px; }
.economics-copy .eyebrow { margin-bottom: 22px; color: #a2a7b2; }
.economics-copy .display-title { font-size: clamp(48px,5vw,80px); }
.economics-copy .body-large { max-width: 650px; margin-top: 28px; }
.cost-lab { overflow: hidden; border: 1px solid rgba(255,255,255,.23); border-radius: 16px; background: rgba(6,9,17,.78); backdrop-filter: blur(18px); box-shadow: 0 35px 100px rgba(0,0,0,.4); }
.cost-lab-top { display: flex; justify-content: space-between; padding: 19px 22px; border-bottom: 1px solid var(--line); color: #afb4bf; font: 500 8px/1 var(--mono); letter-spacing: .08em; }
.live-dot { display: inline-flex; align-items: center; gap: 7px; color: #81f5ee; }
.live-dot i { width: 6px; height: 6px; border-radius: 50%; background: #5dfff3; box-shadow: 0 0 12px #5dfff3; }
.cost-output { padding: 48px 28px 28px; }
.cost-output span { display: block; color: #8c929e; font: 400 9px/1 var(--mono); }
.cost-output strong { display: block; margin-top: 12px; font: 600 clamp(72px,8vw,128px)/.82 var(--display); letter-spacing: -.07em; }
.cost-output em { display: block; margin-top: 18px; color: #88fff4; font-size: 13px; font-style: normal; }
.attempt-stack { height: 72px; display: flex; align-items: flex-end; gap: 5px; padding: 0 28px; }
.attempt-stack i { flex: 1; min-width: 4px; border-radius: 3px 3px 0 0; background: linear-gradient(to top,#6656ff,#3be8f2); opacity: .85; }
.cost-control { display: block; padding: 30px 28px; border-top: 1px solid var(--line); }
.cost-control > span { display: flex; justify-content: space-between; color: #b9bdc6; font-size: 12px; }
.cost-control output { color: white; font-family: var(--mono); }
.cost-control input { width: 100%; margin-top: 25px; accent-color: #6465ff; }
.lab-note { padding: 0 28px 25px; color: #686e7b; font-size: 10px; line-height: 1.5; }

.definition { position: relative; min-height: 900px; overflow: hidden; display: flex; align-items: flex-end; padding: 100px max(32px,calc((100vw - 1380px)/2)); }
.definition > video, .definition-overlay { position: absolute; inset: 0; }
.definition-overlay { background: linear-gradient(90deg,rgba(2,5,13,.92),rgba(2,5,13,.32) 66%,rgba(2,5,13,.65)),linear-gradient(to top,rgba(2,5,13,.8),transparent 55%); }
.definition-copy { position: relative; z-index: 2; max-width: 900px; }
.definition-copy .eyebrow { color: #91faf4; }
.definition-copy .display-title { margin-top: 28px; }
.definition-copy .body-large { max-width: 650px; margin: 26px 0 34px; }

.join { position: relative; min-height: 940px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 120px 32px; text-align: center; background: var(--night); }
.join-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1.15fr .7fr 1.15fr; gap: 6px; opacity: .5; }
.join-grid > * { min-width: 0; }
.join-overlay { position: absolute; inset: 0; background: radial-gradient(circle at center,rgba(3,8,21,.25),rgba(3,8,21,.88) 67%),linear-gradient(to bottom,rgba(3,8,21,.65),transparent 40%,rgba(3,8,21,.85)); }
.join-copy { position: relative; z-index: 2; max-width: 1000px; display: flex; flex-direction: column; align-items: center; }
.brand-lockup--join { width: 430px; height: 180px; margin-bottom: 34px; }
.brand-lockup--join img { width: 760px; left: -168px; top: -140px; }
.join-copy .eyebrow { color: #a9afbd; }
.join-copy h2 { margin-top: 30px; font: 650 clamp(64px,8vw,128px)/.84 var(--display); letter-spacing: -.07em; }
.join-copy > p:not(.eyebrow) { max-width: 680px; margin-top: 30px; color: #b6bbc6; font-size: 18px; line-height: 1.55; }
.join-actions { display: flex; align-items: center; gap: 28px; margin-top: 36px; }

footer { overflow: hidden; padding: 70px 32px 0; color: #b7bbc4; background: #01040b; border-top: 1px solid var(--line); }
.footer-top, .footer-bottom { width: var(--shell); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand-lockup--footer { width: 280px; height: 110px; }
.brand-lockup--footer img { width: 480px; left: -105px; top: -90px; }
.footer-top p { max-width: 300px; font-size: 13px; }
.footer-bottom { padding: 36px 0; border-top: 1px solid var(--line); font: 400 9px/1 var(--mono); letter-spacing: .07em; }
.footer-bottom div { display: flex; gap: 24px; }
.footer-bottom a:hover { color: var(--cyan); }
.footer-word { margin: 20px -1vw -3vw; color: #080c17; font: 700 24vw/.72 var(--display); letter-spacing: -.08em; text-align: center; }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.75,.2,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  :root { --shell: calc(100vw - 40px); }
  .site-header { padding-inline: 20px; }
  .wordmark { margin-right: 18px; }
  .desktop-nav { gap: 0; }
  .desktop-nav a { padding-inline: 10px; font-size: 14px; }
  .hero { min-height: 850px; }
  .hero-title { font-size: clamp(60px,8.7vw,100px); }
  .why-grid { grid-template-columns: 1fr .72fr; gap: 5vw; }
  .why-film { height: 590px; }
  .media-wall { grid-template-columns: repeat(3,1fr); }
  .process-story { grid-template-columns: 1fr 1fr; }
  .economics-grid { gap: 5vw; }
}

@media (max-width: 820px) {
  .desktop-nav, .header-cta { display: none; }
  .site-header { height: 72px; padding-top: 0; }
  .wordmark { margin-right: 0; }
  .wordmark-wave { width: 34px; height: 34px; }
  .wordmark-text { font-size: 25px; }
  .menu-toggle { display: block; }
  .mobile-menu { display: flex; }
  .hero { min-height: 860px; height: 100svh; padding-inline: 20px; }
  .hero-copy { width: min(680px,90vw); }
  .hero-title { font-size: clamp(54px,12.2vw,88px); }
  .hero-lede { max-width: 520px; }
  .tile-a { top: 13%; left: -7%; width: 31%; }
  .tile-b { top: 8%; left: 34%; width: 39%; }
  .tile-c { top: 15%; right: -8%; width: 31%; }
  .tile-d { top: auto; bottom: 15%; left: -9%; width: 43%; }
  .tile-e { bottom: 2%; left: 20%; width: 29%; }
  .tile-f { display: none; }
  .tile-g { bottom: 6%; right: -8%; width: 30%; }
  .showreel { padding-block: 70px; }
  .reel-card { width: 250px; height: 190px; }
  .reel-card--portrait { width: 155px; }
  .reel-card--wide { width: 350px; }
  .why, .capabilities, .process, .impact { padding-block: 90px; }
  .why-grid, .split-heading, .economics-grid { grid-template-columns: 1fr; }
  .why-grid { gap: 60px; }
  .why-film { height: 700px; }
  .value-strip { grid-template-columns: 1fr; }
  .value-strip article { min-height: auto; padding: 30px 0 34px; }
  .value-strip article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--dark-line); }
  .value-strip h3 { margin-top: 36px; }
  .split-heading { gap: 30px; }
  .media-wall { grid-template-columns: repeat(2,1fr); }
  .media-card--portrait { min-height: 570px; }
  .brand-statement { min-height: 620px; }
  .process-story, .process-story--reverse { grid-template-columns: 1fr; }
  .process-story--reverse figure { order: initial; }
  .process-story figure { min-height: 520px; }
  .process-story > div { min-height: 470px; }
  .process-story h3 { margin-top: 60px; }
  .impact-grid { grid-template-columns: 1fr 1fr; }
  .impact-card:last-child { grid-column: 1 / -1; }
  .economics { padding-block: 100px; }
  .economics-grid { gap: 70px; }
  .economics-copy .section-index { margin-bottom: 60px; }
  .definition { min-height: 760px; }
  .join { min-height: 820px; }
  .join-grid { grid-template-columns: 1fr 1fr; }
  .join-grid > :last-child { display: none; }
}

@media (max-width: 560px) {
  :root { --shell: calc(100vw - 28px); }
  .site-header { padding-inline: 14px; }
  .wordmark-wave { width: 32px; height: 32px; }
  .wordmark-text { font-size: 24px; }
  .hero { min-height: 790px; padding: 110px 14px 64px; }
  .hero-copy { width: calc(100vw - 32px); max-width: calc(100vw - 32px); min-width: 0; }
  .hero-title { font-size: clamp(36px,10.2vw,48px); line-height: .92; letter-spacing: -.06em; }
  .hero-title span { white-space: nowrap; }
  .hero-lede { max-width: min(310px,calc(100vw - 48px)); margin-top: 28px; font-size: 13.5px; }
  .hero-actions { margin-top: 26px; }
  .hero-actions .pill-gradient { min-height: 52px; padding-inline: 30px; font-size: 14px; }
  .tile-a { top: 12%; left: -13%; width: 37%; }
  .tile-b { display: none; }
  .tile-c { top: 14%; right: -13%; width: 37%; }
  .tile-d { bottom: 11%; left: -14%; width: 48%; }
  .tile-e { bottom: -2%; left: 33%; width: 36%; }
  .tile-g { display: none; }
  .showreel-heading { align-items: flex-end; gap: 20px; }
  .showreel-note { max-width: 130px; text-align: right; line-height: 1.45; }
  .reel-row { gap: 8px; padding-inline: 10px; }
  .reel-row + .reel-row { margin-top: 8px; margin-left: -130px; }
  .reel-card { width: 220px; height: 170px; }
  .reel-card--portrait { width: 135px; }
  .reel-card--wide { width: 300px; }
  .display-title { font-size: clamp(43px,12.3vw,60px); }
  .why, .capabilities, .process, .impact { padding-block: 76px; }
  .why-grid { padding: 55px 0 70px; }
  .why-film { height: 570px; }
  .why-film figcaption { left: 20px; right: 20px; bottom: 20px; }
  .filter-bar { overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
  .filter-button { flex: none; }
  .media-wall { grid-template-columns: 1fr 1fr; gap: 7px; }
  .media-card { min-height: 210px; }
  .media-card--landscape { grid-column: 1 / -1; min-height: 250px; }
  .media-card--portrait { grid-row: span 2; min-height: 427px; }
  .media-card > div { left: 12px; right: 12px; bottom: 12px; }
  .media-card > div strong { font-size: 16px; }
  .brand-statement { min-height: 550px; padding-inline: 18px; }
  .brand-statement h2 { font-size: clamp(52px,14vw,72px); }
  .process-heading { padding: 58px 0 65px; }
  .process-story { min-height: 0; }
  .process-story figure { min-height: 360px; }
  .process-story > div { min-height: 420px; padding: 34px 24px 42px; }
  .process-story h3 { margin-top: 48px; font-size: 42px; }
  .process-story p { font-size: 15px; }
  .impact-grid { grid-template-columns: 1fr; }
  .impact-card:last-child { grid-column: auto; }
  .impact-card figure, .impact-card--tall figure { height: 440px; }
  .economics { min-height: 1050px; }
  .economics-shade { background: rgba(3,8,21,.82); }
  .cost-output { padding-inline: 20px; }
  .cost-output strong { font-size: 82px; }
  .attempt-stack, .cost-control { padding-inline: 20px; }
  .definition { min-height: 720px; padding: 80px 18px; }
  .definition-overlay { background: linear-gradient(to top,rgba(2,5,13,.95),rgba(2,5,13,.28) 80%); }
  .join { min-height: 790px; padding-inline: 18px; }
  .join-grid { grid-template-columns: 1fr; }
  .join-grid > :not(:first-child) { display: none; }
  .brand-lockup--join { width: 300px; height: 125px; }
  .brand-lockup--join img { width: 520px; left: -115px; top: -96px; }
  .join-copy h2 { font-size: clamp(56px,16vw,78px); }
  .join-copy > p:not(.eyebrow) { font-size: 15px; }
  .join-actions { flex-direction: column; gap: 12px; }
  footer { padding-inline: 14px; }
  .footer-top { align-items: flex-start; flex-direction: column; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 24px; }
  .footer-word { font-size: 28vw; margin-top: 35px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}