:root {
  --paper: #f3f0e8;
  --ink: #15120f;
  --accent: #8dff4f;
  --hot: #ff73d1;
  --violet: #a895ff;
  --panel: #d9d4cb;
  --line: rgba(21, 18, 15, 0.2);
  --gutter: clamp(18px, 3vw, 48px);
  --radius: 18px;
  --header-h: 78px;
  --display: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Helvetica Neue", Arial, sans-serif;
  --mono: "Courier New", monospace;
  --motion: 1;
  color-scheme: light;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); overflow-x: hidden; }
body.modal-open, body.mobile-menu-open { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }

.site-shell { position: relative; z-index: 2; min-height: 100vh; }
.site-header {
  position: relative; z-index: 50; height: var(--header-h); padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border-bottom: 1px solid var(--ink); background: var(--paper);
}
.brand { width: clamp(96px, 10vw, 145px); display: inline-flex; align-items: center; }
.brand img { width: 100%; max-height: 42px; object-fit: contain; object-position: left center; filter: brightness(0); }
.header-status { font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.header-status i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent); border: 1px solid var(--ink); }
.nav { justify-self: end; display: flex; align-items: center; gap: 22px; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { position: relative; font: 700 12px/1 var(--body); text-transform: uppercase; letter-spacing: .02em; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; background: var(--ink); transition: right .25s ease; }
.nav-links a:hover::after, .nav-links a.is-active::after { right: 0; }
.nav-arrow { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--hot); font-size: 20px; transition: transform .25s ease, background .25s ease; }
.nav-arrow:hover { transform: rotate(12deg); background: var(--accent); }
.menu-mark { display: none; width: 38px; height: 38px; padding: 10px; border: 1px solid var(--ink); border-radius: 50%; background: transparent; }
.menu-mark span { display: block; height: 1px; margin: 4px 0; background: var(--ink); transition: transform .2s, opacity .2s; }

.hero { position: relative; min-height: calc(100svh - var(--header-h)); padding: clamp(34px, 5vw, 76px) var(--gutter) 34px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-bottom: 1px solid var(--ink); }
.hero-kicker { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 20px; font: 10px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.hero h1 { position: relative; z-index: 2; width: min(1020px, 88vw); margin: auto; text-align: center; font: 900 clamp(56px, 9.2vw, 150px)/.82 var(--display); letter-spacing: -.075em; text-transform: uppercase; text-wrap: balance; }
.hero h1 .headline-line { display: inline; }
.hero h1 .headline-small { font-size: .42em; letter-spacing: -.035em; vertical-align: .25em; }
.hero h1 .lime-word { position: relative; display: inline; padding: 0 .04em; color: var(--ink); font-style: italic; text-transform: none; }
.hero h1 .lime-word::after { content: ""; position: absolute; z-index: -1; left: -2%; right: -5%; bottom: 6%; height: 24%; background: var(--accent); transform: rotate(-2deg); }
.hero-scribble { position: absolute; z-index: 1; inset: 23% -8% auto; height: 32%; pointer-events: none; }
.hero-scribble svg { width: 100%; height: 100%; overflow: visible; }
.hero-scribble path { fill: none; stroke: var(--hot); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1650; animation: drawLine calc(2.3s * var(--motion)) cubic-bezier(.2,.7,.2,1) both; }
.hero-bottom { position: relative; z-index: 3; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.hero-bottom p { width: min(540px, 60vw); margin: 0; font-size: clamp(15px, 1.35vw, 21px); line-height: 1.35; letter-spacing: -.02em; }
.button-link { width: min(240px, 100%); min-height: 52px; padding: 8px 8px 8px 18px; display: flex; align-items: center; justify-content: space-between; border: 1px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.button-link strong { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; transition: transform .25s ease; }
.button-link:hover strong { transform: rotate(15deg); }
.button-link--dark { color: var(--paper); background: var(--ink); }
.button-link--dark strong { color: var(--ink); background: var(--hot); }
.button-link--light { color: var(--ink); background: var(--paper); }
.button-link--light strong { color: var(--paper); background: var(--ink); }
.hero-stamp { position: absolute; z-index: 2; right: 11%; top: 25%; width: 126px; padding: 12px; transform: rotate(7deg); border: 1px solid var(--ink); background: var(--violet); box-shadow: 5px 5px 0 var(--ink); }
.hero-stamp span { display: block; margin-bottom: 14px; font: 9px/1 var(--mono); }
.hero-stamp strong { font: 900 20px/.88 var(--display); }
.signal-notes { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.signal-chip { position: absolute; max-width: 190px; padding: 10px 13px; border: 1px solid var(--ink); border-radius: 4px; background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--hot); font: 10px/1.25 var(--mono); text-transform: uppercase; animation: noteIn calc(.65s * var(--motion)) cubic-bezier(.2,.8,.2,1) both; animation-delay: calc((.55s + var(--delay)) * var(--motion)); }
.signal-chip::before { content: "●"; margin-right: 7px; color: var(--hot); }
.signal-chip:nth-child(1) { left: 15%; top: 30%; transform: rotate(-3deg); }
.signal-chip:nth-child(2) { right: 18%; top: 49%; transform: rotate(2deg); }
.signal-chip:nth-child(3) { left: 27%; top: 67%; transform: rotate(1deg); }
.signal-chip:nth-child(4) { right: 9%; top: 66%; transform: rotate(-2deg); }

.manifesto-band { min-height: 78vh; padding: clamp(70px, 10vw, 150px) var(--gutter); display: grid; grid-template-columns: .4fr 1.6fr .7fr; gap: 30px; align-items: center; background: var(--ink); color: var(--paper); }
.manifesto-index, .section-heading span, .services-intro > span, .proof-card > span, .closing-cta > span { font: 10px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.manifesto-band h2 { margin: 0; font: 900 clamp(48px, 8vw, 128px)/.86 var(--display); letter-spacing: -.065em; text-transform: uppercase; }
.manifesto-band h2 em { color: var(--accent); text-transform: none; }
.manifesto-band p { align-self: end; margin: 0 0 7px; max-width: 350px; font-size: 16px; line-height: 1.45; }

.project-stage { padding: clamp(70px, 9vw, 130px) 0; overflow: hidden; border-bottom: 1px solid var(--ink); }
.section-heading { padding: 0 var(--gutter); display: grid; grid-template-columns: .65fr 1.35fr; gap: 30px; align-items: end; }
.section-heading > div p { max-width: 310px; margin: 18px 0 0; font-size: 13px; line-height: 1.4; }
.section-heading h2, .services-intro h2 { margin: 0; font: 900 clamp(54px, 8.4vw, 132px)/.82 var(--display); letter-spacing: -.07em; text-transform: uppercase; }
.section-heading h2 em, .services-intro h2 em { color: var(--hot); text-transform: none; }
.project-rail-wrap { width: 100%; margin-top: clamp(50px, 7vw, 90px); overflow-x: auto; scrollbar-width: none; cursor: grab; touch-action: pan-y; }
.project-rail-wrap::-webkit-scrollbar { display: none; }
.project-rail-wrap.is-dragging { cursor: grabbing; }
.project-rail { width: max-content; display: flex; }
.project-set { display: flex; gap: 10px; padding-right: 10px; }
.project-set:first-child { padding-left: var(--gutter); }
.project-card { position: relative; width: clamp(260px, 27vw, 430px); aspect-ratio: .8; padding: 18px; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; overflow: hidden; border: 1px solid var(--ink); border-radius: var(--radius); color: white; text-align: left; background-color: var(--panel); background-image: var(--cover); background-size: cover; background-position: center; cursor: pointer; touch-action: pan-y; isolation: isolate; transition: border-radius .3s ease, transform .3s ease; }
.project-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: rgba(0,0,0,.28); }
.project-card::after { content: "OPEN ↗"; position: absolute; right: 14px; bottom: 14px; width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--ink); font: 800 9px/1 var(--mono); transform: scale(0) rotate(-30deg); transition: transform .3s ease; }
.project-card:hover { border-radius: 42px; transform: translateY(-8px); }
.project-card:hover::after { transform: scale(1) rotate(0); }
.card-category, .card-meta { font: 10px/1 var(--mono); text-transform: uppercase; }
.card-category { align-self: flex-start; padding: 7px 10px; border-radius: 999px; color: var(--ink); background: var(--paper); }
.card-title { margin-top: auto; padding: 25px 55px 6px 0; font: 900 clamp(27px, 3vw, 44px)/.88 var(--display); letter-spacing: -.04em; text-transform: uppercase; text-wrap: balance; }
.card-meta { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,.6); padding-top: 10px; }
.text-link { margin: 34px var(--gutter) 0 auto; width: fit-content; display: flex; align-items: center; gap: 40px; border-bottom: 1px solid var(--ink); padding-bottom: 7px; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.text-link span { font-size: 18px; }

.proof-grid { padding: 10px; display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 10px; background: var(--ink); }
.proof-card { position: relative; min-height: 520px; padding: clamp(24px, 3vw, 48px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-radius: var(--radius); }
.proof-card--hot { background: var(--hot); }
.proof-card--hot h2 { width: 90%; margin: auto 0 0; font: 900 clamp(40px, 5vw, 80px)/.88 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.proof-meter { display: flex; gap: 5px; margin-top: 35px; }
.proof-meter i { flex: 1; height: 10px; border: 1px solid var(--ink); background: var(--ink); animation: meterPulse calc(2s * var(--motion)) steps(2) infinite; }
.proof-meter i:nth-child(2) { animation-delay: .15s; }.proof-meter i:nth-child(3) { animation-delay: .3s; }.proof-meter i:nth-child(4) { animation-delay: .45s; }.proof-meter i:nth-child(5) { animation-delay: .6s; }
.proof-card--image { color: var(--paper); background: var(--violet); }
.proof-card--image h3 { position: relative; z-index: 2; margin: auto 0 0; font: 900 clamp(30px, 3vw, 52px)/.9 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.proof-orbit { position: absolute; inset: 5%; border: 1px solid var(--ink); border-radius: 50%; animation: orbit calc(9s * var(--motion)) linear infinite; }
.proof-orbit i { position: absolute; width: 25px; height: 25px; border: 1px solid var(--ink); border-radius: 50%; background: var(--accent); }
.proof-orbit i:nth-child(1) { left: 8%; top: 18%; }.proof-orbit i:nth-child(2) { right: 3%; top: 42%; background: var(--hot); }.proof-orbit i:nth-child(3) { left: 40%; bottom: -12px; background: var(--paper); }
.proof-card--accent { background: var(--accent); }
.proof-card--accent strong { margin-top: auto; font: 900 clamp(52px, 5vw, 86px)/.78 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.proof-card--accent p { max-width: 330px; margin: 30px 0 0; font-size: 15px; line-height: 1.4; }

.process-section { padding: clamp(80px, 10vw, 150px) 0 10px; background: var(--ink); color: var(--paper); }
.section-heading--dark h2 em { color: var(--accent); }
.process-cards { margin-top: 80px; padding: 0 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.process-cards article { position: relative; min-height: 420px; padding: 28px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius); background: #211e1b; transition: transform .25s ease, background .25s ease, color .25s ease; }
.process-cards article:nth-child(2) { background: var(--violet); color: var(--ink); }.process-cards article:nth-child(3) { background: var(--hot); color: var(--ink); }
.process-cards article:hover { transform: translateY(-10px) rotate(-1deg); background: var(--accent); color: var(--ink); }
.process-cards article > span { font: 10px/1 var(--mono); }
.process-cards article h2 { margin: auto 0 18px; font: 900 clamp(34px, 3.8vw, 58px)/.88 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.process-cards article p { max-width: 390px; margin: 0; font-size: 14px; line-height: 1.42; }

.services-section { padding: clamp(90px, 10vw, 150px) var(--gutter); display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 8vw, 140px); border-bottom: 1px solid var(--ink); }
.services-intro { position: sticky; top: 30px; align-self: start; }
.services-intro h2 { margin-top: 30px; font-size: clamp(52px, 7vw, 105px); }
.services { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.services li { min-height: 112px; padding: 20px 0; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 18px; border-bottom: 1px solid var(--ink); transition: padding .25s ease, background .25s ease; }
.services li:hover { padding-left: 16px; padding-right: 16px; background: var(--hot); }
.service-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--accent); }
.service-icon svg { width: 23px; height: 23px; }.service-icon svg * { vector-effect: non-scaling-stroke; }.service-icon .svg-main { fill: none; stroke: currentColor; }.service-icon .svg-line { fill: none; stroke: currentColor; }.service-icon .svg-soft { fill: currentColor; opacity: .22; }
.service-copy strong { font: 800 clamp(20px, 2.1vw, 32px)/1 var(--display); text-transform: uppercase; }
.service-number { font: 10px/1 var(--mono); }

.trusted-section { padding: 70px 0; overflow: hidden; }
.brand-strip { padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.brand-strip span { height: 1px; background: var(--ink); }.brand-strip strong { font: 10px/1 var(--mono); text-transform: uppercase; }
.trusted-logos { width: max-content; margin-top: 50px; display: flex; animation: logoMove 24s linear infinite; will-change: transform; }
.trusted-logo-set { display: flex; align-items: center; }
.trusted-logo { width: 210px; height: 80px; padding: 20px; display: grid; place-items: center; border-right: 1px solid var(--line); font: 900 21px/1 var(--display); text-transform: uppercase; }
.trusted-logo img { max-width: 130px; max-height: 42px; object-fit: contain; filter: grayscale(1) contrast(1.3); }

.closing-cta { position: relative; min-height: 75vh; padding: clamp(70px, 10vw, 150px) var(--gutter); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: var(--hot); border-top: 1px solid var(--ink); }
.closing-cta h2 { position: relative; z-index: 2; max-width: 1200px; margin: 80px 0; font: 900 clamp(58px, 9.4vw, 152px)/.8 var(--display); letter-spacing: -.07em; text-transform: uppercase; }
.closing-line { position: absolute; left: -10%; right: -10%; top: 45%; height: 180px; border: 8px solid var(--accent); border-radius: 50%; transform: rotate(-7deg); }
.closing-cta .button-link { position: relative; z-index: 2; margin-left: auto; }
.site-footer { min-height: 86px; padding: 25px var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; border-top: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 10px/1.2 var(--mono); text-transform: uppercase; }
.site-footer > :last-child { justify-self: end; }

@keyframes drawLine { from { stroke-dashoffset: 1650; } to { stroke-dashoffset: 0; } }
@keyframes noteIn { from { opacity: 0; transform: translateY(24px) rotate(-5deg); } to { opacity: 1; } }
@keyframes meterPulse { 50% { background: transparent; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes logoMove { to { transform: translateX(-50%); } }
@keyframes aboutTickerMove { to { transform: translateX(-50%); } }

/* Inner pages */
.page-main, .admin-main { min-height: calc(100vh - var(--header-h)); }
.page-hero { min-height: 58vh; padding: clamp(70px, 9vw, 130px) var(--gutter) 50px; display: grid; grid-template-columns: 1.5fr .5fr; gap: 40px; align-items: end; border-bottom: 1px solid var(--ink); }
.page-hero h1, .about-hero h1, .collab h1 { margin: 20px 0 0; font: 900 clamp(64px, 10vw, 158px)/.8 var(--display); letter-spacing: -.075em; text-transform: uppercase; }
.page-hero p { max-width: 420px; margin: 0; font-size: 15px; line-height: 1.45; }
.page-hero-compact { min-height: 48vh; grid-template-columns: 1fr; }
.section-label { font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.project-list { padding: 0 var(--gutter) 90px; }
.project-list-item { width: 100%; min-height: 150px; padding: 24px 0; display: grid; grid-template-columns: 60px 1fr 240px; gap: 30px; align-items: center; border: 0; border-bottom: 1px solid var(--ink); color: inherit; background: transparent; text-align: left; cursor: pointer; transition: padding .25s ease, background .25s ease; }
.project-list-item:hover { padding-left: 22px; padding-right: 22px; background: var(--accent); }
.list-number, .list-meta { font: 10px/1.3 var(--mono); text-transform: uppercase; }.list-meta { text-align: right; }
.list-main { display: flex; flex-direction: column; gap: 12px; }.list-main strong { font: 900 clamp(30px, 4vw, 64px)/.9 var(--display); letter-spacing: -.05em; text-transform: uppercase; }.list-main small { max-width: 670px; font-size: 13px; line-height: 1.4; }
.about-hero { min-height: 82vh; padding: clamp(70px, 9vw, 130px) var(--gutter); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-bottom: 1px solid var(--ink); }.about-hero h1 { max-width: 1300px; }.about-hero > p { max-width: 650px; margin: 40px 0 0 auto; font-size: 18px; line-height: 1.45; }
.about-ticker { width: max-content; margin-top: 70px; display: flex; animation: aboutTickerMove 22s linear infinite; will-change: transform; }.about-ticker-set { display: flex; flex: none; gap: 8px; padding-right: 8px; }.about-ticker span { padding: 8px 13px; border: 1px solid var(--ink); border-radius: 999px; font: 10px/1 var(--mono); text-transform: uppercase; white-space: nowrap; }.about-ticker span:nth-child(2n) { background: var(--hot); }.about-ticker span:nth-child(3n) { background: var(--accent); }
.about-grid { padding: 90px var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; }.about-note p { max-width: 520px; font-size: clamp(24px, 3vw, 45px); line-height: 1.05; letter-spacing: -.04em; }.services-panel .services { margin-top: 25px; }
.collab { position: relative; min-height: calc(100vh - var(--header-h)); padding: clamp(60px, 8vw, 110px) var(--gutter); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: var(--hot); }.collab h1 { position: relative; z-index: 2; max-width: 1200px; }.collab > p { position: relative; z-index: 2; max-width: 540px; margin-left: auto; font-size: 18px; line-height: 1.45; }.mail-link { position: relative; z-index: 2; width: fit-content; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 800 clamp(24px, 4vw, 62px)/1 var(--display); }.collab-orbit { position: absolute; width: 70vw; aspect-ratio: 1; right: -20vw; top: -20vw; border: 8px solid var(--accent); border-radius: 50%; }.collab-orbit span { position: absolute; inset: 12%; border: 2px solid var(--ink); border-radius: 50%; }.collab-orbit span:nth-child(2) { inset: 26%; }.collab-orbit span:nth-child(3) { inset: 40%; }

/* Project viewer */
.flyout {
  position: fixed; z-index: 100; inset: 0; display: grid; place-items: end;
  pointer-events: none; background: rgba(21,18,15,.64); opacity: 0; transition: opacity .3s ease;
}
.flyout[aria-hidden="false"] { pointer-events: auto; opacity: 1; }
.flyout-panel {
  position: relative; width: min(1240px, 96vw); height: 100%; padding: 0; overflow-x: hidden; overflow-y: auto;
  background: var(--paper); border-left: 1px solid var(--ink); transform: translateX(100%);
  transition: transform .45s cubic-bezier(.2,.8,.2,1); overscroll-behavior: contain;
}
.flyout[aria-hidden="false"] .flyout-panel { transform: translateX(0); }
.flyout-close {
  position: fixed; z-index: 8; top: 20px; right: 20px; width: 48px; height: 48px;
  border: 1px solid var(--ink); border-radius: 50%; background: var(--hot); cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}
.flyout-close::before, .flyout-close::after { content: ""; position: absolute; left: 13px; right: 13px; top: 23px; height: 2px; background: var(--ink); transform: rotate(45deg); }
.flyout-close::after { transform: rotate(-45deg); }
.flyout-project-header {
  min-height: 44vh; padding: clamp(28px,4vw,62px) clamp(24px,5vw,76px) clamp(38px,5vw,72px);
  display: grid; grid-template-columns: minmax(0,1.55fr) minmax(240px,.45fr); column-gap: 50px; align-content: end;
  border-bottom: 1px solid var(--ink);
}
.flyout-kicker { grid-column: 1 / -1; margin-bottom: clamp(40px,8vh,100px); font: 10px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.flyout h2 { margin: 0; font: 900 clamp(58px,7vw,112px)/.8 var(--display); letter-spacing: -.07em; text-transform: uppercase; overflow-wrap: anywhere; }
.flyout-project-header p { align-self: end; max-width: 430px; margin: 0 68px 3px 0; font-size: 15px; line-height: 1.45; }
.video-viewer { padding: 26px 0 36px; overflow: hidden; background: var(--ink); color: var(--paper); }
.video-viewer-bar { padding: 0 clamp(20px,3vw,42px) 22px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 24px; }
.video-viewer-bar > span, .video-viewer-bar > strong, .video-viewer-hint { font: 10px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.video-viewer-actions { display: flex; gap: 7px; }
.video-viewer-actions button { width: 44px; height: 44px; border: 1px solid var(--paper); border-radius: 50%; background: transparent; color: var(--paper); font-size: 19px; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.video-viewer-actions button:hover { background: var(--accent); color: var(--ink); transform: rotate(-8deg); }
.video-viewer.is-single .video-viewer-actions { visibility: hidden; }
.video-carousel-viewport { width: 100%; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.video-carousel {
  --track-x: 0px; --drag-x: 0px; --video-gap: clamp(12px,1.5vw,22px);
  width: max-content; display: flex; align-items: center; gap: var(--video-gap); touch-action: pan-y; cursor: grab;
  transform: translate3d(calc(var(--track-x) + var(--drag-x)),0,0);
  transition: transform .52s cubic-bezier(.2,.82,.2,1); will-change: transform;
}
.video-carousel.is-dragging { cursor: grabbing; transition: none; }
.video-slide {
  position: relative; flex: 0 0 clamp(240px,58vw,720px); aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid rgba(243,240,232,.55); border-radius: var(--radius); background: #050505; opacity: .22;
  transform: scale(.88); transition: opacity .42s ease, transform .42s ease, border-color .42s ease; cursor: pointer;
}
.video-slide.is-prev, .video-slide.is-next { opacity: .42; transform: scale(.93); }
.video-slide.is-active { opacity: 1; transform: scale(1); border-color: var(--paper); cursor: default; }
.video-slide-inner, .video-slide-inner > img, .video-player-shell, .video-player-shell > video, .video-player-shell > iframe { width: 100%; height: 100%; }
.video-slide-inner > img, .video-player-shell > video, .video-player-shell > iframe { display: block; border: 0; object-fit: contain; background: #000; }
.video-player-shell { position: relative; overflow: hidden; }
.video-player-shell > video { pointer-events: none; }
.video-drive-popout-shield { position: absolute; z-index: 5; top: 0; right: 0; width: 58px; height: 58px; background: transparent; }
.video-player-controls { position: absolute; z-index: 4; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.video-player-controls button { min-height: 34px; padding: 8px 11px; border: 1px solid var(--paper); border-radius: 999px; background: rgba(21,18,15,.76); color: var(--paper); font: 9px/1 var(--mono); text-transform: uppercase; cursor: pointer; backdrop-filter: blur(8px); }
.video-player-controls button:hover { background: var(--accent); color: var(--ink); }
.video-player-error { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; padding: 30px; background: #050505; color: var(--paper); text-align: center; font: 10px/1.4 var(--mono); text-transform: uppercase; }
.video-player-error[hidden] { display: none; }
.video-slide:not(.is-active) .video-slide-inner > img { object-fit: cover; filter: saturate(.5); }
.video-slide-label { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 7px 9px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 10px/1 var(--mono); }
.video-viewer-hint { width: fit-content; margin: 20px auto 0; color: rgba(243,240,232,.58); }
.empty-state { margin: 24px; padding: 30px; border: 1px dashed var(--ink); }

/* Admin */
.admin-main { padding: 0 0 80px; }.admin-layout { padding: 20px var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.admin-panel { padding: 28px; border: 1px solid var(--ink); border-radius: var(--radius); background: #fff; }.admin-panel h2 { margin: 0 0 28px; font: 900 38px/1 var(--display); text-transform: uppercase; }.field { display: grid; gap: 8px; margin: 0 0 18px; font: 10px/1.3 var(--mono); text-transform: uppercase; }.field input, .field textarea { width: 100%; padding: 13px; border: 1px solid var(--ink); border-radius: 3px; background: var(--paper); color: var(--ink); font: 14px/1.4 var(--body); text-transform: none; }.field-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 12px; }.button-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }.button-row button, .file-button { min-height: 42px; padding: 11px 16px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 800; text-transform: uppercase; cursor: pointer; }.button-row .secondary, .file-button { background: transparent; color: var(--ink); }.file-button input { display: none; }.admin-projects { margin-top: 26px; }.admin-project { padding: 14px 0; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); }.admin-project div:first-child { display: flex; flex-direction: column; gap: 5px; }.admin-project span, .admin-note { font: 10px/1.4 var(--mono); }.admin-actions { display: flex; gap: 6px; }.admin-actions button { border: 1px solid var(--ink); background: transparent; cursor: pointer; }.admin-login-panel { width: min(520px, calc(100% - 40px)); margin: 12vh auto; }.admin-error { color: #b00020; }

/* Existing motion hooks */
.motion-field, .ambient-mesh { display: none; }.intro-loader { position: fixed; z-index: 999; inset: 0; display: grid; place-items: center; background: var(--ink); color: var(--paper); transition: opacity .5s ease, visibility .5s; }.intro-loader__mark { font: 900 clamp(80px, 18vw, 260px)/1 var(--display); letter-spacing: -.08em; }.intro-loader__line { position: absolute; left: 15%; right: 15%; bottom: 15%; height: 5px; background: var(--panel); }.intro-loader__line::after { content: ""; display: block; height: 100%; background: var(--hot); animation: loaderLine 1.1s ease both; }.intro-loader.is-done { opacity: 0; visibility: hidden; }.intro-loader__scan { position: absolute; inset: 0; border: 10px solid var(--accent); pointer-events: none; }.page-transition { position: fixed; z-index: 90; inset: 0; background: var(--hot); transform: translateY(100%); transition: transform .25s ease; }.is-leaving .page-transition { transform: translateY(0); }.is-ready [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .7s ease var(--reveal-delay), transform .7s ease var(--reveal-delay); }.is-ready [data-reveal].is-visible { opacity: 1; transform: none; }
@keyframes loaderLine { from { width: 0; } to { width: 100%; } }

@media (max-width: 900px) {
  :root { --header-h: 68px; --radius: 13px; }
  .site-header { grid-template-columns: 1fr auto; }.header-status { display: none; }.menu-mark { display: block; }.nav-arrow { display: none; }
  .nav-links { position: fixed; inset: var(--header-h) 0 0; padding: 30px var(--gutter); display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; background: var(--hot); transform: translateY(-120%); transition: transform .35s ease; }.nav.is-open .nav-links { transform: translateY(0); }.nav-links a { padding: 16px 0; border-bottom: 1px solid var(--ink); font: 900 clamp(38px, 11.8vw, 72px)/.9 var(--display); letter-spacing: -.055em; }.nav-links a::after { display: none; }
  .hero { min-height: auto; padding: 28px var(--gutter) 52px; display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; }
  .hero-kicker { order: 1; }.hero-kicker span:last-child { display: none; }
  .hero h1 { z-index: 3; order: 2; width: 100%; margin: 42px 0 4px; font-size: clamp(50px, 16.2vw, 82px); line-height: .84; text-align: left; }
  .hero-scribble { position: relative; z-index: 1; order: 3; inset: auto; width: calc(100% + 80px); height: 64px; margin: -20px -50px -16px 28%; opacity: .82; }
  .signal-notes { position: relative; z-index: 3; order: 4; inset: auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 9px; }
  .signal-chip, .signal-chip:nth-child(1), .signal-chip:nth-child(2), .signal-chip:nth-child(3) { position: relative; inset: auto; max-width: 145px; font-size: 8px; transform: none; }
  .signal-chip:nth-child(4) { display: none; }
  .hero-stamp { position: relative; z-index: 3; order: 5; inset: auto; justify-self: end; width: 104px; margin: -6px 5px 2px 0; }
  .hero-bottom { z-index: 3; order: 6; margin-top: 18px; align-items: stretch; flex-direction: column; gap: 24px; }.hero-bottom p { width: 100%; }.hero-bottom .button-link { margin-left: auto; }
  .manifesto-band { min-height: auto; padding: 78px var(--gutter); grid-template-columns: 1fr; align-content: start; gap: 62px; }.manifesto-band h2 { font-size: clamp(50px, 15vw, 82px); }.manifesto-band p { margin-left: auto; }
  .project-stage { padding: 72px 0; }.project-rail-wrap { margin-top: 38px; }.project-rail-wrap.is-native-scroll { overscroll-behavior-x: contain; touch-action: pan-x pan-y; }.project-rail.is-native-scroll .project-card { touch-action: pan-x pan-y; }.project-rail.is-native-scroll .project-set { padding-right: var(--gutter); }
  .section-heading { grid-template-columns: 1fr; }.section-heading h2 { font-size: clamp(52px, 15vw, 86px); }.project-card { width: min(82vw, 350px); }
  .proof-grid { grid-template-columns: 1fr; }.proof-card { min-height: clamp(290px, 92vw, 390px); padding: 25px; }.proof-card--hot h2 { font-size: clamp(37px, 12vw, 58px); }.proof-card--accent strong { font-size: clamp(49px, 15vw, 70px); }
  .process-section { padding-top: 74px; }.process-cards { margin-top: 48px; grid-template-columns: 1fr; }.process-cards article { min-height: 285px; padding: 24px; }.process-cards article h2 { font-size: clamp(34px, 11vw, 50px); }
  .services-section { padding: 74px var(--gutter); grid-template-columns: 1fr; gap: 48px; }.services-intro { position: static; }.services li { min-height: 88px; grid-template-columns: 42px 1fr auto; gap: 12px; }.service-icon { width: 38px; height: 38px; }.trusted-section { padding: 55px 0; }.trusted-logo { width: 155px; }
  .closing-cta { min-height: auto; padding: 76px var(--gutter); gap: 50px; }.closing-cta h2 { margin: 10px 0; font-size: clamp(54px, 15vw, 84px); }.closing-line { top: 40%; height: 110px; }
  .site-footer { grid-template-columns: 1fr 1fr; }.site-footer > :nth-child(2) { display: none; }
  .page-hero { min-height: 48vh; grid-template-columns: 1fr; }.page-hero h1, .about-hero h1, .collab h1 { font-size: clamp(58px, 17vw, 102px); }.project-list-item { grid-template-columns: 38px 1fr; }.list-meta { grid-column: 2; text-align: left; }.about-grid { grid-template-columns: 1fr; }.about-hero > p { margin-left: 0; }.admin-layout { grid-template-columns: 1fr; }.field-grid { grid-template-columns: 1fr; }.collab > p { margin-left: 0; }
  .flyout-panel { width: 100vw; border-left: 0; }
  .flyout-close { top: 13px; right: 13px; width: 44px; height: 44px; }
  .flyout-close::before, .flyout-close::after { top: 21px; }
  .flyout-project-header { min-height: 330px; padding: 28px 18px 32px; display: flex; flex-direction: column; justify-content: end; }
  .flyout-kicker { margin: 0 58px auto 0; }
  .flyout h2 { margin-top: 48px; font-size: clamp(46px,14vw,68px); }
  .flyout-project-header p { margin: 20px 0 0; font-size: 13px; }
  .video-viewer { padding-top: 18px; }
  .video-viewer-bar { padding: 0 16px 16px; grid-template-columns: 1fr auto; gap: 12px; }
  .video-viewer-bar > span { display: none; }
  .video-viewer-bar > strong { justify-self: start; }
  .video-viewer-actions button { width: 40px; height: 40px; }
  .video-slide { flex-basis: 80vw; aspect-ratio: 9 / 14; max-height: 64svh; transform: scale(.9); }
  .video-slide.is-prev, .video-slide.is-next { opacity: .38; transform: scale(.94); }
  .video-slide.is-active { transform: scale(1); }
  .video-viewer-hint { margin-top: 16px; }
  .video-player-controls { right: 9px; bottom: 9px; }.video-player-controls button { min-height: 32px; padding: 7px 9px; font-size: 8px; }
}

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