:root {
  color-scheme: dark;
  --bg: #0b0c0d;
  --panel: #111214;
  --panel-2: #17191b;
  --ink: #f0f0ec;
  --muted: #96989a;
  --faint: #64686b;
  --line: rgba(232, 235, 240, .15);
  --line-strong: rgba(232, 235, 240, .30);
  --accent: #d9f36b;
  --blue: #174eff;
  --green: #23853f;
  --red: #b94324;
  --invert-bg: #f0f0ec;
  --invert-fg: #101113;
  --display: "Archivo", "Arial", sans-serif;
  --body: "Inter", "Arial", sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;
  --width: 1120px;
  --header-height: 54px;
  --page-gutter: clamp(22px, 4.2vw, 72px);
  --scroll-progress: 0;
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #eeede7;
  --panel: #e5e4de;
  --panel-2: #dbdad3;
  --ink: #17191a;
  --muted: #606366;
  --faint: #8a8b86;
  --line: rgba(25, 28, 30, .15);
  --line-strong: rgba(25, 28, 30, .30);
  --accent: #59740f;
  --blue: #174eff;
  --green: #23853f;
  --red: #b94324;
  --invert-bg: #151719;
  --invert-fg: #f0f0ec;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 14px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: var(--bg); background: var(--accent); }
.scroll-progress { position: fixed; inset: 0 auto auto 0; z-index: 130; width: 100%; height: 2px; transform: scaleX(var(--scroll-progress)); transform-origin: left; background: var(--accent); pointer-events: none; }
.skip-link { position: fixed; z-index: 200; top: 8px; left: -220px; padding: 10px 14px; background: var(--accent); color: var(--bg); }
.skip-link:focus { left: 8px; }

/* compact top navigation */
.site-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: stretch; min-height: var(--header-height); border-bottom: 1px solid var(--line-strong); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.wordmark { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 0 16px; border-right: 1px solid var(--line); font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: -.055em; white-space: nowrap; }
.mark { display: grid; place-items: center; width: 22px; height: 22px; background: var(--accent); color: var(--bg); font-size: 13px; letter-spacing: -.03em; }
.dot, .hero-period { color: var(--accent); }
.desktop-nav { display: flex; align-items: stretch; margin-right: auto; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; color: var(--muted); font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .09em; transition: color .2s ease, background .2s ease; }
.nav-link:hover, .nav-link.active { color: var(--ink); }
.nav-link.active::before { content: ""; width: 4px; height: 4px; background: var(--accent); }
.nav-tools { display: flex; align-items: stretch; }
.theme-toggle, .menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; padding: 0 12px; border: 0; border-left: 1px solid var(--line); background: transparent; cursor: pointer; transition: background .2s ease, color .2s ease; }
.theme-toggle:hover, .menu-toggle:hover { background: var(--invert-bg); color: var(--invert-fg); }
.theme-icon { font-size: 17px; line-height: 1; }
.nav-contact { display: inline-flex; align-items: center; gap: 16px; padding: 0 20px; background: var(--invert-bg); color: var(--invert-fg); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.nav-contact span { font-size: 15px; transition: transform .2s ease; }
.nav-contact:hover span { transform: translate(2px, -2px); }
.menu-toggle { display: none; }
.mobile-nav { display: none; }

/* fixed ruler / scroll chapter indicator */
.scroll-rail { position: fixed; z-index: 45; top: var(--header-height); right: 0; bottom: 0; width: 145px; pointer-events: none; color: var(--muted); }
.rail-percent { position: absolute; top: 22px; right: 8px; display: flex; align-items: baseline; gap: 2px; color: #6eacff; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; }
.rail-percent::before { content: ""; width: 28px; height: 1px; margin-right: 6px; background: #257aff; box-shadow: 0 0 8px #257aff; }
.rail-percent small { font-size: 7px; }
.rail-scale { position: absolute; top: 11%; right: 10px; bottom: 11%; width: 26px; border-right: 1px solid var(--line-strong); }
.rail-track { position: absolute; top: 0; right: -1px; bottom: 0; width: 2px; background: var(--line); }
.rail-fill { position: absolute; top: 0; right: 0; width: 2px; height: 100%; transform: scaleY(var(--scroll-progress)); transform-origin: top; background: #2b79ff; box-shadow: 0 0 8px rgba(43,121,255,.5); }
.rail-thumb { position: absolute; top: var(--scroll-progress-pct, 0%); right: -4px; width: 8px; height: 2px; background: #6eacff; box-shadow: 0 0 7px #257aff; }
.rail-tick { position: absolute; right: 0; display: flex; align-items: center; gap: 8px; transform: translateY(-50%); font-family: var(--mono); font-size: 7px; line-height: 1; }
.rail-tick i { width: 11px; height: 1px; background: var(--line-strong); }
.rail-tick b { min-width: 17px; font-weight: 400; text-align: right; }
.tick-0 { top: 0; }.tick-20 { top: 20%; }.tick-40 { top: 40%; }.tick-60 { top: 60%; }.tick-80 { top: 80%; }.tick-100 { top: 100%; }
.rail-chapter { position: absolute; top: 49%; right: 41px; max-height: 65%; color: var(--faint); font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .08em; line-height: 1.05; opacity: 0; writing-mode: vertical-rl; transform: rotate(180deg) translateY(-5px); transform-origin: center; transition: opacity .3s ease, color .3s ease, translate .35s ease; white-space: nowrap; }
.rail-chapter.is-active { color: var(--ink); opacity: .95; translate: 0 0; }

/* HERO: one immersive canvas, card movement is scroll-linked; inner details also drift on a timer */
.hero { position: relative; display: grid; place-items: center; min-height: max(680px, calc(100svh - var(--header-height))); padding: 70px var(--page-gutter) 56px; isolation: isolate; overflow: clip; border-bottom: 1px solid var(--line); }
.hero-canvas { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.hero-grid-lines { position: absolute; inset: 0; opacity: .26; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(ellipse at center, #000 0%, transparent 79%); }
.hero-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid transparent; border-radius: 50%; transform: translate(-50%,-50%) rotate(-25deg); pointer-events: none; }
.orbit-blue { width: min(85vw, 1320px); height: min(58vw, 850px); border-top-color: var(--blue); border-right-color: color-mix(in srgb, var(--blue) 55%, transparent); animation: orbit-turn 70s linear infinite; }
.orbit-green { width: min(70vw, 1060px); height: min(78vw, 1030px); border-right-color: var(--green); border-bottom-color: color-mix(in srgb, var(--green) 45%, transparent); transform: translate(-50%,-50%) rotate(24deg); animation: orbit-turn 82s linear infinite reverse; }
.orbit-red { width: min(63vw, 920px); height: min(83vw, 1110px); border-left-color: color-mix(in srgb, var(--red) 60%, transparent); border-top-color: color-mix(in srgb, var(--red) 35%, transparent); transform: translate(-50%,-50%) rotate(13deg); animation: orbit-turn 95s linear infinite; }
.orbit-dashed { width: min(58vw, 800px); height: min(48vw, 640px); border-color: rgba(245,245,245,.08); border-style: dashed; animation: orbit-turn 110s linear infinite reverse; }
.hero-center { position: relative; z-index: 3; width: min(100%, 740px); margin: 20px auto 0; text-align: center; }
.hero-center .kicker { justify-content: center; margin-bottom: 13px; }
.kicker, .mono-label { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .13em; line-height: 1.6; text-transform: uppercase; }
.kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.live-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 58%, transparent); animation: blink 2s ease-in-out infinite; }
.hero-title { margin: 0; font-family: var(--display); font-size: clamp(86px, 14vw, 198px); font-weight: 800; letter-spacing: -.075em; line-height: .88; white-space: nowrap; text-shadow: 0 8px 60px color-mix(in srgb, var(--bg) 72%, transparent); }
.hero-subtitle { margin: 14px 0 0; font-family: var(--display); font-size: clamp(24px, 3vw, 42px); font-weight: 600; line-height: 1.23; letter-spacing: -.045em; }
.hero-subtitle em, .about-title h2 em, .work-heading h2 em, .approach-heading h2 em, .contact-giant em { font-family: var(--serif); font-weight: 400; font-style: italic; }
.hero-subtitle em { color: var(--ink); }
.hero-lede { max-width: 470px; margin: 16px auto 0; color: var(--muted); font-size: clamp(12px, 1.1vw, 15px); line-height: 1.8; text-wrap: pretty; }
.hero-buttons { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 23px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 42px; padding: 0 15px; border: 1px solid transparent; font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.button:hover { transform: translateY(-2px); }
.button-invert { background: var(--invert-bg); color: var(--invert-fg); }
.button-invert span, .button-outline span { font-size: 14px; }
.button-outline { border-color: var(--line-strong); background: color-mix(in srgb, var(--bg) 55%, transparent); }
.button-outline:hover { background: var(--panel); border-color: var(--accent); }
.hero-meta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 30px; color: var(--faint); font-family: var(--mono); font-size: 7px; letter-spacing: .1em; }
.hero-meta i { width: 3px; height: 3px; background: var(--accent); }
.hero-bottom { position: absolute; right: var(--page-gutter); bottom: 14px; left: var(--page-gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--faint); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.hero-bottom b { margin: 0 7px; color: var(--accent); }
.hero-bottom a { display: inline-flex; align-items: center; gap: 13px; color: var(--muted); }
.scroll-arrow { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-strong); color: var(--accent); animation: nudge 1.8s ease-in-out infinite; }
.hero-coordinate { position: absolute; bottom: 53px; color: var(--faint); font-family: var(--mono); font-size: 7px; letter-spacing: .09em; }
.coordinate-left { left: var(--page-gutter); }.coordinate-right { right: var(--page-gutter); }
.hero-tile { position: absolute; z-index: 1; width: var(--tile-width, 160px); aspect-ratio: var(--tile-ratio, 1.55); left: var(--tile-left); top: var(--tile-top); opacity: .88; transform: translate3d(var(--pointer-x, 0px), calc(var(--scroll-shift, 0px) + var(--pointer-y, 0px)), 0); will-change: transform; transition: opacity .35s ease; }
.hero-tile:hover { opacity: 1; }
.tile-motion { width: 100%; height: 100%; animation: tile-drift var(--duration, 8s) ease-in-out var(--delay, 0s) infinite; }
.hero-tile > .tile-motion > div { position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 7px; box-shadow: 0 18px 48px rgba(0,0,0,.32); background: #151719; }
.tile-01 { --tile-width: clamp(105px, 13vw, 190px); --tile-left: 17%; --tile-top: 5%; --tile-ratio: 1.57; --duration: 9.2s; --delay: -.6s; }
.tile-02 { --tile-width: clamp(100px, 12vw, 175px); --tile-left: 78%; --tile-top: 13%; --tile-ratio: 1.24; --duration: 8.4s; --delay: -2.1s; }
.tile-03 { --tile-width: clamp(90px, 11vw, 158px); --tile-left: 31%; --tile-top: 69%; --tile-ratio: 1.15; --duration: 7.5s; --delay: -3.7s; }
.tile-04 { --tile-width: clamp(105px, 12vw, 175px); --tile-left: 60%; --tile-top: 73%; --tile-ratio: 1.4; --duration: 10.1s; --delay: -1.8s; }
.tile-05 { --tile-width: clamp(128px, 15vw, 215px); --tile-left: 3%; --tile-top: 38%; --tile-ratio: 1.42; --duration: 8.8s; --delay: -5s; }
.tile-06 { --tile-width: clamp(100px, 13vw, 185px); --tile-left: 84%; --tile-top: 44%; --tile-ratio: 1.48; --duration: 9.9s; --delay: -3s; }
.tile-07 { --tile-width: clamp(90px, 10vw, 145px); --tile-left: 51%; --tile-top: 9%; --tile-ratio: 1.55; --duration: 7.9s; --delay: -1.4s; }
.tile-08 { --tile-width: clamp(90px, 11vw, 160px); --tile-left: 8%; --tile-top: 74%; --tile-ratio: 1.48; --duration: 8.9s; --delay: -2.3s; }
.tile-09 { --tile-width: clamp(100px, 12vw, 175px); --tile-left: 69%; --tile-top: 2%; --tile-ratio: 1.2; --duration: 10.5s; --delay: -4.1s; }
.tile-10 { --tile-width: clamp(110px, 13vw, 185px); --tile-left: 80%; --tile-top: 79%; --tile-ratio: 1.5; --duration: 8.3s; --delay: -1.1s; }
.tile-11 { --tile-width: clamp(95px, 11vw, 150px); --tile-left: 43%; --tile-top: 80%; --tile-ratio: 1.35; --duration: 9.5s; --delay: -5.2s; }
.tile-12 { --tile-width: clamp(90px, 10vw, 140px); --tile-left: 25%; --tile-top: 25%; --tile-ratio: 1.5; --duration: 7.8s; --delay: -3.4s; }
/* mini artwork in the floating cards */
.mini-screen { background: radial-gradient(ellipse at 30% 35%, #385059 0, transparent 40%), linear-gradient(125deg,#070b0e,#1b2830 48%,#51392b); }
.mini-screen::before { content:""; position:absolute; left:16%; right:15%; bottom:18%; height:36%; background:linear-gradient(150deg,transparent 25%,rgba(240,240,236,.35) 26% 27%,transparent 28%),linear-gradient(30deg,#151919,#272d2b); clip-path:polygon(0 100%,18% 30%,42% 70%,66% 12%,100% 100%); }
.mini-screen i { position:absolute; bottom:14%; left:42%; width:2px; height:24%; background:#d9f36b; transform:rotate(15deg); }
.mini-screen i:nth-child(2) { left:50%; height:17%; opacity:.6; }.mini-screen b { position:absolute; top:8px; left:9px; font:6px var(--mono); letter-spacing:.1em; color:#e8e8df; }
.mini-chart { display:flex; align-items:end; gap:7%; padding:12% 10% 20%; background:radial-gradient(ellipse at 70% 20%,rgba(217,243,107,.18),transparent 55%),#17191a; }
.mini-chart::before { content:""; position:absolute; inset:17% 9% 20%; background:repeating-linear-gradient(to bottom,transparent 0 15px,rgba(235,235,235,.09) 16px); }
.mini-chart span { z-index:1; flex:1; background:var(--accent); opacity:.6; height:35%; }.mini-chart span:nth-child(2){height:65%}.mini-chart span:nth-child(3){height:49%}.mini-chart span:nth-child(4){height:82%}.mini-chart span:nth-child(5){height:72%}.mini-chart b { position:absolute; bottom:6px; left:8px; z-index:1; font:6px var(--mono); color:var(--muted); letter-spacing:.12em; }
.mini-paper { padding:10%; background:linear-gradient(130deg,#e9e8db,#b7b7a9); color:#1b1c1a; transform:none; }
.mini-paper b { display:block; font:800 18px var(--display); letter-spacing:-.08em; }.mini-paper b span{color:#68841b}.mini-paper i { display:block; width:85%; height:3px; margin-top:9%; background:#77796e; opacity:.5; }.mini-paper i:nth-of-type(2){width:64%}.mini-paper i:nth-of-type(3){width:74%}.mini-paper em { position:absolute; bottom:8px; right:8px; font:italic 10px var(--serif); color:#5c6e1c; }
.mini-grid-art { display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); gap:3px; padding:5px; background:#171e20; }.mini-grid-art span { display:grid; place-items:center; background:linear-gradient(135deg,#475f6c,#16191a 75%); color:#d8ddd2; font:8px var(--mono); }.mini-grid-art span:nth-child(2){background:linear-gradient(125deg,#8d4a37,#241a19)}.mini-grid-art span:nth-child(3){background:linear-gradient(125deg,#8e9b55,#283323)}.mini-grid-art span:nth-child(4){background:linear-gradient(125deg,#4b506f,#1c1d2a)}.mini-grid-art i {position:absolute;inset:12% 14%;border:1px solid var(--accent);border-radius:50%;opacity:.6}
.mini-workflow { display:flex; align-items:center; justify-content:center; gap:5px; padding:8px; background:#141719; }.mini-workflow i { padding:5px 4px; border:1px solid #676b65; color:#d9ded3; font:6px var(--mono); font-style:normal; }.mini-workflow i:nth-of-type(2){border-color:var(--accent);color:var(--accent)}.mini-workflow b{color:var(--accent);font:10px var(--mono)}
.mini-color-field { background:linear-gradient(125deg,#d1a184,#7d5e61 42%,#1e3540 43%); }.mini-color-field::before {content:"";position:absolute;inset:20% 15% 0;background:linear-gradient(120deg,transparent 20%,rgba(15,19,21,.7) 21% 50%,transparent 51%),radial-gradient(ellipse at 60% 20%,#edc8a5,transparent 28%)}.mini-color-field i{position:absolute;width:40%;height:55%;left:13%;top:31%;border:1px solid rgba(255,255,255,.32);transform:rotate(-8deg)}.mini-color-field i:nth-child(2){left:46%;top:11%;width:25%;height:75%;transform:rotate(13deg)}.mini-color-field i:nth-child(3){left:60%;top:52%;width:25%;height:30%;transform:rotate(-11deg)}.mini-color-field b{position:absolute;bottom:8px;left:8px;font:6px var(--mono);color:white;letter-spacing:.12em}
.mini-signal { padding:10%; background:linear-gradient(135deg,#1a2822,#101414); color:var(--accent); }.mini-signal b{display:block;font:italic 37px var(--serif);line-height:1}.mini-signal span{display:block;margin-top:7px;font:700 13px var(--display)}.mini-signal small{display:block;color:var(--muted);font:6px var(--mono);letter-spacing:.12em}
.mini-dashboard { background:#17191b; padding:14% 10%; }.mini-dashboard i{display:inline-block;width:18%;height:52%;margin-right:4%;border:1px solid var(--line-strong);background:linear-gradient(to top,rgba(217,243,107,.42) 35%,transparent 35%)}.mini-dashboard i:nth-child(2){background:linear-gradient(to top,rgba(217,243,107,.45) 68%,transparent 68%)}.mini-dashboard i:nth-child(3){background:linear-gradient(to top,rgba(217,243,107,.45) 49%,transparent 49%)}.mini-dashboard span{position:absolute;right:10%;top:14%;width:28%;aspect-ratio:1;border:1px solid var(--accent);border-radius:50%}.mini-dashboard b{position:absolute;bottom:7px;left:8px;font:6px var(--mono);color:var(--muted)}
.mini-wave { display:flex;align-items:center;justify-content:space-around;padding:20% 7%;background:linear-gradient(135deg,#182631,#15171b); }.mini-wave i{width:8%;background:#8bb0ca;border-radius:5px;height:25%}.mini-wave i:nth-child(2){height:55%}.mini-wave i:nth-child(3){height:80%;background:var(--accent)}.mini-wave i:nth-child(4){height:60%}.mini-wave i:nth-child(5){height:34%}.mini-wave b{position:absolute;bottom:8px;left:8px;font:6px var(--mono);color:var(--muted)}
.mini-nodes { background:radial-gradient(circle at 20% 20%,rgba(217,243,107,.12),transparent 40%),#141618; }.mini-nodes i{position:absolute;width:16px;height:16px;border:1px solid var(--accent);border-radius:50%;top:28%;left:20%}.mini-nodes i:nth-child(2){top:55%;left:54%;border-color:#6384ff}.mini-nodes i:nth-child(3){top:21%;left:76%;border-color:#4da56a}.mini-nodes span{position:absolute;left:28%;top:43%;width:29%;height:1px;background:var(--line-strong);transform:rotate(25deg)}.mini-nodes span:nth-of-type(2){left:63%;top:37%;width:21%;transform:rotate(-45deg)}.mini-nodes b{position:absolute;bottom:7px;left:8px;font:6px var(--mono);color:var(--muted)}
.mini-deck { display:flex;gap:3%;padding:10%;background:#1a1b1e; }.mini-deck i{flex:1;border:1px solid rgba(255,255,255,.17);background:linear-gradient(150deg,#4f6064,#1d2022 65%);transform:rotate(-5deg)}.mini-deck i:nth-child(2){background:linear-gradient(150deg,#8d9d68,#333c31);transform:translateY(-8px) rotate(2deg)}.mini-deck i:nth-child(3){background:linear-gradient(150deg,#915f50,#272021);transform:rotate(6deg)}.mini-deck b{position:absolute;bottom:7px;left:8px;font:6px var(--mono);color:var(--muted)}
.mini-orbit-art { background:radial-gradient(ellipse at 45% 45%,#292e2b,#121415 70%); }.mini-orbit-art i{position:absolute;left:25%;top:12%;width:50%;height:70%;border:1px solid var(--accent);border-radius:50%;transform:rotate(45deg)}.mini-orbit-art i:nth-child(2){transform:rotate(-45deg);border-color:#5776ff}.mini-orbit-art b{position:absolute;bottom:7px;left:8px;font:6px var(--mono);color:var(--muted)}

/* continuous ticker */
.ticker-band { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); }
.ticker-track { display: flex; width: max-content; will-change: transform; animation: ticker-slide 36s linear infinite; }
.ticker-group { display: flex; flex: 0 0 auto; align-items: center; gap: 18px; padding: 0 9px; white-space: nowrap; }
.ticker-group span { padding: 16px 0; color: var(--muted); font: 8px var(--mono); letter-spacing: .13em; }
.ticker-group b { color: var(--accent); font: 13px var(--mono); }
.ticker-band:hover .ticker-track { animation-play-state: paused; }

/* section system: each section has a labelled top bar but an intentionally different content grid */
.section-block { position: relative; border-bottom: 1px solid var(--line); }
.section-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 35px; padding: 0 var(--page-gutter); border-bottom: 1px solid var(--line); color: var(--faint); font: 8px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.section-bar span:first-child { color: var(--accent); }.section-bar span:last-child { text-align: right; }
.section-inner { width: 100%; max-width: calc(var(--width) + var(--page-gutter) + var(--page-gutter)); margin: 0 auto; padding-right: var(--page-gutter); padding-left: var(--page-gutter); }
.about { background: var(--bg); }
.about-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .75fr); column-gap: clamp(45px, 8vw, 130px); row-gap: 44px; padding-top: clamp(92px, 10vw, 148px); padding-bottom: clamp(76px, 8vw, 108px); }
.about-title { position: relative; min-width: 0; }.about-title .kicker { margin-bottom: 22px; }
.about-title h2, .work-heading h2, .approach-heading h2 { margin: 0; font-family: var(--display); font-size: clamp(42px, 5.2vw, 72px); font-weight: 600; line-height: 1.08; letter-spacing: -.055em; text-wrap: pretty; }
.about-title h2 em, .work-heading h2 em, .approach-heading h2 em { display: inline-block; max-width: 100%; padding-bottom: .08em; color: var(--accent); font-size: 1.09em; line-height: 1.14; letter-spacing: -.03em; vertical-align: baseline; }
.scribble-note { position: absolute; right: 6%; bottom: -20px; color: var(--faint); font: 8px/1.65 var(--mono); letter-spacing: .12em; transform: rotate(-7deg); }.scribble-note span { display: inline-block; margin-left: 20px; color: var(--accent); font-size: 19px; }
.about-copy { max-width: 430px; padding-top: 35px; }.about-copy p { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.9; }.about-copy .about-lede { margin-bottom: 22px; color: var(--ink); font-size: clamp(18px, 1.8vw, 25px); font-weight: 500; line-height: 1.48; letter-spacing: -.03em; }.about-copy .quiet-copy { margin-top: 24px; padding-left: 14px; border-left: 1px solid var(--accent); font-size: 10px; }
.underlined-link { display: inline-flex; align-items: center; gap: 24px; margin-top: 5px; padding: 10px 0 6px; border-bottom: 1px solid var(--line-strong); font-size: 11px; }.underlined-link span { color: var(--accent); }
.about-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-facts div { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 19px 16px 21px 0; border-right: 1px solid var(--line); }.about-facts div:not(:first-child) { padding-left: 20px; }.about-facts div:last-child { border-right: 0; }.about-facts span { color: var(--faint); font: 7px var(--mono); letter-spacing: .12em; }.about-facts b { font-family: var(--display); font-size: 13px; font-weight: 500; }

/* work: varied bento grid rather than repeating horizontal rows */
.work { background: var(--panel); }
.work-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; padding-top: clamp(76px, 8vw, 118px); padding-bottom: 37px; }.work-heading .kicker { margin-bottom: 18px; }.heading-note { max-width: 315px; margin: 0 0 5px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.project-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 14px; padding-bottom: 0; }
.project-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); background: var(--bg); transition: border-color .35s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.project-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.project-research { grid-column: span 7; }.project-proposal { grid-column: span 5; }.project-workflow { grid-column: span 5; }.project-brief { grid-column: span 7; }
.project-card-head, .project-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; color: var(--faint); font: 7px var(--mono); letter-spacing: .1em; }
.project-card-head { border-bottom: 1px solid var(--line); }.project-card-head span:first-child { color: var(--accent); }.project-card-head span:last-child { text-align: right; }
.project-art { position: relative; min-height: 245px; overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; }.project-research .project-art { min-height: 280px; }.project-workflow .project-art { min-height: 250px; }
.project-card-copy { flex: 1 1 auto; padding: 22px 24px 19px; }.project-card-copy .mono-label { margin-bottom: 10px; color: var(--accent); font-size: 8px; }.project-card-copy h3 { max-width: 560px; margin: 0 0 11px; font-family: var(--display); font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; line-height: 1.16; letter-spacing: -.045em; text-wrap: pretty; }.project-card-copy > p:not(.mono-label) { max-width: 470px; margin: 0 0 15px; color: var(--muted); font-size: 11px; line-height: 1.8; }.project-card-foot { margin-top: auto; border-top: 1px solid var(--line); }.round-arrow { display: grid; flex: 0 0 auto; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); font: 13px var(--body); transition: transform .25s ease, background .25s ease, color .25s ease; }.project-card:hover .round-arrow { transform: rotate(45deg); background: var(--accent); color: var(--bg); }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }.tag-row span { padding: 4px 6px; border: 1px solid var(--line); color: var(--muted); font: 7px/1.5 var(--mono); }
.work-note { padding-top: 15px; padding-bottom: clamp(76px,8vw,114px); color: var(--faint); font-size: 10px; line-height: 1.75; }
/* research visual */
.research-art { background: radial-gradient(ellipse at 64% 37%,rgba(217,243,107,.16),transparent 48%),#121516; }.research-grid { position:absolute;inset:10% 7% 13%;background:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(240,240,236,.11) 32px),repeating-linear-gradient(to right,transparent 0 54px,rgba(240,240,236,.035) 55px); }.research-bars { position:absolute;inset:23% 9% 13%;display:flex;align-items:end;gap:2%;border-bottom:1px solid var(--line-strong); }.research-bars i { display:block;flex:1;height:36%;background:var(--accent);opacity:.46;transform-origin:bottom; }.research-bars i:nth-child(2){height:57%}.research-bars i:nth-child(3){height:43%}.research-bars i:nth-child(4){height:72%}.research-bars i:nth-child(5){height:91%;opacity:.88}.research-bars i:nth-child(6){height:68%}.research-bars i:nth-child(7){height:80%}.research-line {position:absolute;left:8%;top:50%;width:90%;height:1px;background:var(--accent);opacity:.6;transform:rotate(-19deg);transform-origin:center}.line-two{top:72%;opacity:.25;transform:rotate(7deg)}.research-orb{position:absolute;top:17%;right:12%;width:27%;aspect-ratio:1;border:1px solid var(--accent);border-radius:50%;box-shadow:0 0 40px rgba(217,243,107,.08)}.art-axis-label{position:absolute;top:11px;left:13px;color:var(--muted);font:7px var(--mono);letter-spacing:.12em}
/* proposal visual */
.proposal-art { display:grid;place-items:center;background:radial-gradient(ellipse at 50% 45%,rgba(217,243,107,.09),transparent 53%),#141619; }.proposal-paper {position:relative;width:47%;min-width:150px;height:78%;padding:16px;border:1px solid #85877e;background:#e8e8dd;color:#1b1e1c;box-shadow:12px 13px 0 rgba(217,243,107,.16);transform:rotate(-4deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}.project-proposal:hover .proposal-paper{transform:rotate(0deg) translateY(-4px)}.paper-brand{display:block;font:800 28px var(--display);letter-spacing:-.08em}.paper-brand span{color:#718b25}.paper-eyebrow{display:block;margin:10px 0 15px;color:#6a6c62;font:6px var(--mono);letter-spacing:.12em}.paper-rule{display:block;height:4px;margin:9px 0;background:#a6a79a}.paper-rule.wide{width:93%;background:#454940}.paper-rule.medium{width:72%}.paper-rule.short{width:46%}.paper-blocks{display:flex;gap:5px;margin-top:23px}.paper-blocks i{width:30%;height:28px;background:#c4c7b9}.paper-blocks i:first-child{background:#6a7f2a}.paper-stamp{position:absolute;right:11px;bottom:12px;padding:5px;border:1px solid #7d8e3c;color:#58691d;font:7px/1.35 var(--mono);letter-spacing:.1em;transform:rotate(7deg)}.paper-shadow{position:absolute;width:49%;height:70%;border:1px solid var(--line-strong);transform:translate(18px,17px) rotate(3deg);z-index:-1}
/* workflow visual */
.workflow-art { display:grid;place-items:center;background-color:#131518;background-image:radial-gradient(rgba(240,240,236,.18) .7px,transparent .7px);background-size:15px 15px; }.workflow-window{position:relative;width:82%;height:67%;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--bg) 80%,transparent)}.workflow-top{display:flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-bottom:1px solid var(--line)}.workflow-top i{width:5px;height:5px;border-radius:50%;background:var(--faint)}.workflow-top b{margin-left:auto;color:var(--faint);font:6px var(--mono);letter-spacing:.12em}.workflow-node{position:absolute;padding:9px 10px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);font:7px var(--mono);letter-spacing:.08em}.node-input{top:42%;left:5%}.node-process{top:59%;left:38%;border-color:var(--accent);color:var(--accent)}.node-output{top:34%;right:4%}.workflow-connector{position:absolute;height:1px;background:var(--accent);opacity:.65;transform-origin:left center}.connect-one{top:55%;left:22%;width:28%;transform:rotate(17deg)}.connect-two{top:62%;left:61%;width:25%;transform:rotate(-28deg)}.workflow-pulse{position:absolute;top:50%;left:54%;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(217,243,107,.12);animation:blink 1.8s infinite}.workflow-caption{position:absolute;bottom:11px;left:13px;color:var(--faint);font:7px var(--mono);letter-spacing:.1em}
/* message map visual */
.brief-art{display:grid;place-items:center;background:linear-gradient(130deg,#1a201a,#101214 55%,#1d2022)}.brief-canvas{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:5px;width:76%;height:76%;padding:12px;border:1px solid var(--line-strong);background:#151819}.brief-label{padding:7px;border:1px solid var(--line);color:var(--muted);font:6px var(--mono);letter-spacing:.1em}.brief-label:nth-child(3){border-color:var(--accent);color:var(--accent)}.brief-lines{display:flex;flex-direction:column;gap:6px;padding:10px 3px}.brief-lines i{display:block;width:90%;height:3px;background:var(--line-strong)}.brief-lines i:nth-child(2){width:70%}.brief-lines i:nth-child(3){width:84%}.brief-lines i:nth-child(4){width:55%}.brief-lines i:nth-child(5){width:92%}.brief-lines i:nth-child(6){width:65%}.brief-highlight{position:absolute;right:0;bottom:0;display:flex;flex-direction:column;justify-content:center;width:42%;height:58%;padding:14px;background:var(--accent);color:#181a13;font:800 clamp(17px,2vw,27px)/.98 var(--display);letter-spacing:-.06em}.brief-highlight span{position:absolute;right:8px;bottom:7px;font:15px var(--body)}

/* process: editorial heading + numbered horizontal track */
.approach { overflow:hidden; background:var(--bg); }.approach-inner { position:relative;z-index:2;padding-top:clamp(78px,9vw,128px);padding-bottom:clamp(78px,9vw,128px); }.approach-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:50px}.approach-heading .kicker{margin-bottom:20px}.approach-heading h2{font-size:clamp(46px,6vw,83px)}.approach-heading>p{max-width:300px;margin:0 0 8px;color:var(--muted);font-size:11px;line-height:1.8}.process-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(45px,7vw,88px);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}.process-step{display:flex;flex-direction:column;min-height:270px;padding:17px 22px 0 0;border-right:1px solid var(--line);}.process-step:not(:first-child){padding-left:22px}.process-step:last-child{border-right:0}.process-top{display:flex;align-items:center;gap:11px;color:var(--faint);font:7px var(--mono);letter-spacing:.1em}.process-top span:first-child{color:var(--accent)}.process-top i{margin-left:auto;color:var(--accent);font:italic 24px var(--serif)}.process-step h3{margin:48px 0 9px;font:500 clamp(19px,2vw,25px)/1.22 var(--display);letter-spacing:-.035em}.process-step p{max-width:320px;margin:0;color:var(--muted);font-size:11px;line-height:1.8}.process-base{display:flex;align-items:center;gap:9px;margin-top:auto;padding:21px 0 16px;color:var(--faint);font:7px var(--mono);letter-spacing:.1em}.process-base i{display:block;width:22px;height:1px;background:var(--accent);transition:width .4s ease}.process-step:hover .process-base i{width:70px}.approach-ghost{position:absolute;right:-5%;bottom:7%;color:color-mix(in srgb,var(--ink) 3%,transparent);font:800 clamp(60px,12vw,170px)/.9 var(--display);letter-spacing:-.07em;white-space:nowrap;pointer-events:none}

/* contact: grid field + oversized type, distinct from other sections */
.contact { background:var(--panel); }.contact-inner{padding-top:clamp(44px,6vw,78px);padding-bottom:clamp(54px,7vw,90px)}.contact-panel{position:relative;display:flex;align-items:center;min-height:440px;overflow:hidden;border:1px solid var(--line-strong);background:var(--bg)}.contact-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:35px 35px;opacity:.48;mask-image:linear-gradient(90deg,#000,transparent 84%)}.contact-giant{position:absolute;top:50%;left:4%;z-index:1;transform:translateY(-52%);color:color-mix(in srgb,var(--ink) 7%,transparent);font:800 clamp(105px,17vw,230px)/.83 var(--display);letter-spacing:-.075em;white-space:nowrap;pointer-events:none;user-select:none}.contact-giant em{display:inline-block;padding:.04em .03em .12em;color:color-mix(in srgb,var(--accent) 14%,transparent);letter-spacing:-.03em;line-height:1.1}.contact-content{position:relative;z-index:2;width:min(42%,410px);margin:0 7% 0 auto}.contact-content .kicker{color:var(--accent)}.contact-content h2{margin:0;font:600 clamp(29px,3.4vw,47px)/1.08 var(--display);letter-spacing:-.05em;text-wrap:pretty}.contact-content>p:not(.kicker){margin:16px 0 20px;color:var(--muted);font-size:11px;line-height:1.8}.contact-domain{display:inline-flex;align-items:center;gap:16px;margin-left:13px;color:var(--muted);font:8px var(--mono);letter-spacing:.06em}.contact-domain span{color:var(--accent)}.contact-stamp{position:absolute;top:9%;right:8%;z-index:2;display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--bg) 80%,transparent);transform:rotate(4deg)}.contact-stamp>span{color:var(--accent);font:800 20px var(--display);letter-spacing:-.08em}.contact-stamp b{color:var(--muted);font:6px/1.4 var(--mono);letter-spacing:.1em}.contact-stamp i{color:var(--accent);font:normal 14px var(--body)}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:62px;border-top:1px solid var(--line);background:var(--bg)}.site-footer .wordmark{align-self:stretch}.site-footer>span,.back-top{color:var(--faint);font:7px var(--mono);letter-spacing:.09em}.site-footer>span b{color:var(--muted);font-weight:400}.back-top{padding-right:var(--page-gutter);transition:color .2s ease}.back-top:hover{color:var(--accent)}

/* scroll entry transitions: driven by viewport intersection, not a delay from page load */
.js-ready [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
.js-ready [data-reveal].is-visible{opacity:1;transform:translateY(0)}
.js-ready .project-card[data-reveal]{transform:translateY(32px) scale(.992)}.js-ready .project-card[data-reveal].is-visible{transform:translateY(0) scale(1)}
@keyframes ticker-slide{to{transform:translate3d(-50%,0,0)}}
@keyframes orbit-turn{to{rotate:360deg}}
@keyframes tile-drift{0%,100%{transform:translateY(0) rotate(var(--inner-rotate,0deg))}50%{transform:translateY(-9px) rotate(var(--inner-rotate,0deg))}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.42}}
@keyframes nudge{0%,100%{translate:0 0}50%{translate:0 3px}}

/* large laptop and tablet */
@media (min-width: 1550px){:root{--width:1160px}.hero-title{font-size:clamp(140px,13vw,205px)}.project-art{min-height:285px}}
@media (max-width: 1180px){.scroll-rail{width:94px}.rail-chapter{right:33px;font-size:11px}.hero-tile{opacity:.83}.tile-05{--tile-left:2%}.tile-06{--tile-left:82%}.section-inner{padding-right:clamp(24px,4vw,48px);padding-left:clamp(24px,4vw,48px)}.project-card-copy{padding:18px}.project-art{min-height:225px}.project-research .project-art{min-height:245px}}
@media (max-width: 900px){.scroll-rail{display:none}.hero{min-height:max(700px,calc(100svh - var(--header-height)));}.hero-title{font-size:clamp(94px,16vw,150px)}.hero-tile{opacity:.76}.tile-01{--tile-left:9%;--tile-top:8%}.tile-02{--tile-left:75%;--tile-top:14%}.tile-03{--tile-left:22%;--tile-top:74%}.tile-04{--tile-left:68%;--tile-top:76%}.tile-05{--tile-left:1%;--tile-top:40%}.tile-06{--tile-left:84%;--tile-top:45%}.tile-07{--tile-left:45%;--tile-top:8%}.tile-08{--tile-left:4%;--tile-top:78%}.tile-09{--tile-left:74%;--tile-top:4%}.tile-10{--tile-left:83%;--tile-top:78%}.tile-11{--tile-left:42%;--tile-top:83%}.tile-12{--tile-left:17%;--tile-top:27%}.about-layout{grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);column-gap:38px}.about-facts b{font-size:11px}.project-research,.project-proposal,.project-workflow,.project-brief{grid-column:span 6}.project-card-head{font-size:6px}.project-art,.project-research .project-art,.project-workflow .project-art{min-height:210px}.approach-heading{gap:30px}.contact-panel{min-height:400px}.contact-content{width:46%;margin-right:5%}.contact-giant{font-size:clamp(100px,18vw,170px)}}
@media (max-width: 700px){:root{--header-height:51px;--page-gutter:20px}.site-header{min-height:var(--header-height)}.desktop-nav{display:none}.nav-contact{gap:9px;padding:0 12px;font-size:8px}.theme-toggle{min-width:40px}.menu-toggle{display:flex;flex-direction:column;gap:5px;min-width:40px}.menu-toggle span{display:block;width:17px;height:1px;margin:0 auto;background:currentColor}.mobile-nav{position:absolute;top:100%;right:0;left:0;z-index:105;padding:9px 20px 17px;border-bottom:1px solid var(--line);background:var(--bg);box-shadow:0 18px 24px rgba(0,0,0,.18)}.mobile-nav.is-open{display:block}.mobile-nav a{display:flex;justify-content:space-between;gap:20px;padding:12px 1px;border-bottom:1px solid var(--line);font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase}.mobile-nav a:last-child{border-bottom:0}.mobile-nav span{color:var(--accent)}
  .hero{min-height:820px;min-height:max(760px,calc(100svh - var(--header-height)));padding:86px 17px 80px}.hero-center{width:100%;margin-top:0}.hero-title{font-size:clamp(78px,18vw,130px)}.hero-subtitle{font-size:clamp(23px,6vw,33px)}.hero-lede{max-width:370px;font-size:12px}.hero-center .kicker{font-size:7px;letter-spacing:.1em}.hero-meta{max-width:300px;margin:23px auto 0;font-size:6px;gap:7px}.hero-bottom{right:16px;left:16px;align-items:flex-end;font-size:6px}.hero-bottom a{gap:8px}.hero-bottom span:first-child{max-width:135px;line-height:1.6}.hero-coordinate{display:none}.hero-tile{opacity:.62}.tile-01{--tile-width:105px;--tile-left:3%;--tile-top:4%}.tile-02{--tile-width:100px;--tile-left:73%;--tile-top:13%}.tile-03{--tile-width:88px;--tile-left:16%;--tile-top:70%}.tile-04{--tile-width:99px;--tile-left:69%;--tile-top:74%}.tile-05{--tile-width:112px;--tile-left:-4%;--tile-top:37%}.tile-06{--tile-width:105px;--tile-left:80%;--tile-top:42%}.tile-07{--tile-width:95px;--tile-left:46%;--tile-top:8%}.tile-08{--tile-width:94px;--tile-left:1%;--tile-top:78%}.tile-09{--tile-width:92px;--tile-left:76%;--tile-top:3%}.tile-10{--tile-width:95px;--tile-left:79%;--tile-top:81%}.tile-11{--tile-width:90px;--tile-left:39%;--tile-top:84%}.tile-12{--tile-width:85px;--tile-left:7%;--tile-top:25%}.orbit-blue{width:145vw;height:95vw}.orbit-green{width:120vw;height:140vw}.orbit-red{width:110vw;height:145vw}.orbit-dashed{width:100vw;height:90vw}
  .ticker-group{gap:13px}.ticker-group span{padding:14px 0;font-size:7px}.ticker-group b{font-size:11px}.section-bar{min-height:32px;padding:0 15px;font-size:6px;letter-spacing:.08em}.section-bar span:nth-child(2){display:none}.section-inner{padding-right:20px;padding-left:20px}.about-layout{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:75px;padding-bottom:70px}.about-title h2,.work-heading h2{font-size:clamp(42px,10vw,61px)}.about-title .kicker{margin-bottom:17px}.scribble-note{right:2%;bottom:-38px}.about-copy{max-width:560px;padding-top:15px}.about-copy .about-lede{font-size:20px}.about-copy p{font-size:11px}.about-facts{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px}.about-facts div{padding:14px 10px 17px 0}.about-facts div:not(:first-child){padding-left:12px}.about-facts div:nth-child(2){border-right:0}.about-facts div:nth-child(3){padding-left:0}.about-facts div:nth-child(1),.about-facts div:nth-child(2){border-bottom:1px solid var(--line)}.about-facts b{font-size:12px}
  .work-heading{display:block;padding-top:75px;padding-bottom:27px}.work-heading .kicker{margin-bottom:14px}.heading-note{margin-top:18px;font-size:10px}.project-grid{grid-template-columns:minmax(0,1fr);gap:12px}.project-research,.project-proposal,.project-workflow,.project-brief{grid-column:auto}.project-art,.project-research .project-art,.project-workflow .project-art{min-height:235px}.project-card-copy{padding:18px 17px}.project-card-copy h3{font-size:26px}.project-card-copy>p:not(.mono-label){font-size:10px}.project-card-head,.project-card-foot{padding:10px;font-size:6px}.work-note{padding-top:12px;padding-bottom:70px;font-size:9px}
  .approach-inner{padding-top:75px;padding-bottom:70px}.approach-heading{display:block}.approach-heading h2{font-size:clamp(43px,10vw,62px)}.approach-heading>p{margin-top:20px;max-width:440px}.process-track{grid-template-columns:minmax(0,1fr);margin-top:35px}.process-step,.process-step:not(:first-child){min-height:0;padding:16px 0 0;border-right:0;border-bottom:1px solid var(--line)}.process-step:last-child{border-bottom:0}.process-step h3{margin:25px 0 9px;font-size:22px}.process-step p{font-size:10px}.process-base{padding:16px 0}.approach-ghost{bottom:3%;font-size:65px}
  .contact-inner{padding-top:25px;padding-bottom:42px}.contact-panel{display:block;min-height:510px;padding:25px 20px}.contact-giant{top:27px;left:12px;transform:none;font-size:clamp(86px,23vw,135px)}.contact-stamp{top:15px;right:13px;transform:rotate(4deg) scale(.83);transform-origin:top right}.contact-content{width:100%;max-width:440px;margin:222px 0 0}.contact-content h2{font-size:clamp(30px,8vw,42px)}.contact-content>p:not(.kicker){font-size:10px}.contact-domain{margin:15px 0 0 12px}.site-footer{display:grid;grid-template-columns:1fr auto;gap:10px 13px;padding:0}.site-footer .wordmark{padding:0 12px;min-height:52px}.site-footer>span,.back-top{font-size:6px}.site-footer>span:first-of-type{display:none}.site-footer>span:last-of-type{padding-left:12px}.back-top{padding-right:12px;text-align:right}}
@media (max-width: 390px){.wordmark{gap:7px;padding:0 11px;font-size:14px}.nav-contact{padding:0 9px;font-size:7px}.theme-toggle,.menu-toggle{min-width:34px;padding:0 7px}.hero-title{font-size:76px}.hero-buttons{gap:8px}.button{gap:13px;padding:0 10px;font-size:7px}.contact-panel{padding:22px 15px}.contact-stamp{right:8px}.contact-content .button{margin-right:0}}
@media (prefers-reduced-motion: reduce){html:not([data-motion-mode="full"]) *, html:not([data-motion-mode="full"]) *::before, html:not([data-motion-mode="full"]) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}html:not([data-motion-mode="full"]) .js-ready [data-reveal], html:not([data-motion-mode="full"]) .js-ready [data-reveal].is-visible{opacity:1!important;transform:none!important}html:not([data-motion-mode="full"]) .hero-tile{transform:none!important}}

/* readability pass: keep the main display hierarchy, improve everything beneath it */
body { font-size: 16px; line-height: 1.72; }
.kicker, .mono-label { font-size: 10.5px; letter-spacing: .105em; }
.nav-link { font-size: 10px; }
.nav-contact { font-size: 10px; }
.button { font-size: 9.5px; }
.hero-lede { font-size: clamp(14px, 1.05vw, 16px); }
.hero-meta { font-size: 9px; line-height: 1.8; }
.hero-bottom { font-size: 9px; }
.hero-coordinate { font-size: 9px; }
.rail-percent { font-size: 10px; }
.rail-percent small { font-size: 9px; }
.rail-tick { font-size: 9px; }
.rail-chapter { font-size: 14px; }
.ticker-group span { font-size: 10px; }
.ticker-group b { font-size: 14px; }
.section-bar { min-height: 39px; font-size: 10px; letter-spacing: .1em; }
.scribble-note { font-size: 9.5px; }
.about-copy p { font-size: 15px; }
.about-copy .quiet-copy { font-size: 13px; }
.about-facts span { font-size: 9px; }
.about-facts b { font-size: 15px; }
.heading-note { font-size: 15px; }
.project-card-head, .project-card-foot { font-size: 9px; }
.project-card-copy .mono-label { font-size: 10px; }
.project-card-copy h3 { font-size: clamp(24px, 2.75vw, 36px); }
.project-card-copy > p:not(.mono-label) { font-size: 15px; line-height: 1.75; }
.tag-row span { font-size: 9px; }
.work-note { font-size: 13px; }
.approach-heading > p { font-size: 15px; }
.process-top { font-size: 9px; }
.process-step h3 { font-size: clamp(22px, 2.15vw, 28px); }
.process-step p { font-size: 15px; line-height: 1.75; }
.process-base { font-size: 9px; }
/* The oversized words are a dedicated footer watermark, not a layer through the process cards. */
.approach-ghost {
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 108px;
  overflow: hidden;
  padding: 0 20px;
  color: color-mix(in srgb, var(--ink) 2.2%, transparent);
  font-size: clamp(48px, 7vw, 102px);
  line-height: 1;
  text-align: center;
}
.contact-content > p:not(.kicker) { font-size: 15px; }
.contact-domain { font-size: 10px; }
.contact-stamp b { font-size: 8px; }
.site-footer > span, .back-top { font-size: 9px; }

@media (max-width: 1180px) {
  .about-copy p { font-size: 14.5px; }
  .heading-note, .project-card-copy > p:not(.mono-label), .process-step p,
  .contact-content > p:not(.kicker) { font-size: 14.5px; }
  .project-card-copy h3 { font-size: clamp(23px, 2.8vw, 32px); }
}
@media (max-width: 900px) {
  .section-bar { font-size: 9px; }
  .about-copy p { font-size: 14.5px; }
  .about-facts span { font-size: 9px; }
  .about-facts b { font-size: 14px; }
  .project-card-head, .project-card-foot { font-size: 8.5px; }
  .project-card-copy .mono-label { font-size: 9.5px; }
  .project-card-copy > p:not(.mono-label), .process-step p,
  .contact-content > p:not(.kicker) { font-size: 14px; }
  .tag-row span { font-size: 8.5px; }
  .approach-ghost { height: 94px; font-size: clamp(42px, 7vw, 76px); }
}
@media (max-width: 700px) {
  .kicker, .mono-label { font-size: 9.5px; }
  .hero-center .kicker { font-size: 8.5px; }
  .hero-lede { font-size: 14px; }
  .hero-meta { max-width: 340px; font-size: 8px; }
  .hero-bottom { font-size: 8px; }
  .ticker-group { gap: 13px; }
  .ticker-group span { padding: 13px 0; font-size: 9px; }
  .section-bar { min-height: 36px; font-size: 8.5px; }
  .about-copy p { font-size: 14px; }
  .about-copy .about-lede { font-size: 20px; }
  .about-copy .quiet-copy { font-size: 13px; }
  .about-facts span { font-size: 8.5px; }
  .about-facts b { font-size: 13.5px; }
  .heading-note { font-size: 14px; }
  .project-card-head, .project-card-foot { font-size: 8.5px; }
  .project-card-copy .mono-label { font-size: 9px; }
  .project-card-copy h3 { font-size: 25px; }
  .project-card-copy > p:not(.mono-label) { font-size: 14px; }
  .tag-row span { font-size: 8.5px; }
  .work-note { font-size: 12.5px; }
  .process-top { font-size: 9px; }
  .process-step h3 { font-size: 23px; }
  .process-step p { font-size: 14px; }
  .process-base { font-size: 8.5px; }
  .approach-ghost { height: 76px; font-size: clamp(32px, 7.6vw, 54px); }
  .contact-content > p:not(.kicker) { font-size: 14px; }
  .contact-domain { font-size: 9px; }
  .contact-stamp b { font-size: 7.5px; }
  .site-footer > span, .back-top { font-size: 8px; }
}


/* Populated project cards and evidence-based case links */
.project-demand { grid-column: span 7; }
.project-whitepaper { grid-column: span 5; }
.project-rfp { grid-column: span 5; }
.project-automation { grid-column: span 7; }
.project-brand { grid-column: span 6; }
.project-posm { grid-column: span 6; }
.project-card-foot .case-link { display:inline-flex; align-items:center; gap:14px; color:var(--ink); font:600 9px var(--mono); letter-spacing:.09em; }
.project-card-foot .case-link:hover { color:var(--accent); }
.project-card-foot .case-link .round-arrow { margin-left:0; }
.project-brand .project-art, .project-posm .project-art { min-height:280px; }
.brand-art { display:flex; align-items:center; justify-content:center; gap:7%; padding:28px; background:radial-gradient(ellipse at 25% 70%,rgba(217,243,107,.12),transparent 45%),linear-gradient(135deg,#191d1b,#0d0f10); }
.brand-poster { position:relative; display:flex; flex-direction:column; justify-content:space-between; width:43%; aspect-ratio: .72; padding:14px; border:1px solid rgba(240,240,236,.3); background:linear-gradient(145deg,#d9f36b,#a7b66e 45%,#1f2927 45%); color:#111; transform:rotate(-4deg); box-shadow:15px 18px 0 rgba(0,0,0,.23); }
.brand-poster span,.brand-poster small { font:7px var(--mono); letter-spacing:.1em; }
.brand-poster b { font:800 clamp(20px,3vw,39px)/.88 var(--display); letter-spacing:-.07em; }
.brand-poster i { position:absolute; right:12%; top:27%; width:35%; aspect-ratio:1; border:1px solid rgba(17,17,17,.6); border-radius:50%; }
.brand-swatches { display:grid; grid-template-columns:repeat(2,44px); gap:7px; transform:rotate(8deg); }
.brand-swatches i { display:block; width:44px; aspect-ratio:1; border:1px solid rgba(240,240,236,.22); background:#d9f36b; }
.brand-swatches i:nth-child(2){background:#8d9e79}.brand-swatches i:nth-child(3){background:#8a5f4f}.brand-swatches i:nth-child(4){background:#252f35}
.brand-frame { position:absolute; right:8%; top:12%; width:19%; height:30%; border:1px solid rgba(240,240,236,.2); transform:rotate(12deg); }
.posm-art { padding:18px; background:linear-gradient(135deg,#1a1f1e,#101213); }
.posm-header { display:flex; justify-content:space-between; gap:12px; padding:5px 0 13px; border-bottom:1px solid var(--line-strong); color:var(--accent); font:8px var(--mono); letter-spacing:.1em; }
.posm-header b { color:var(--muted); font-weight:400; }
.posm-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:14px; height:calc(100% - 38px); padding-top:15px; }
.posm-store { position:relative; display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); gap:8px; padding:12px; border:1px solid var(--line); background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:18px 18px; }
.posm-store i { border:1px solid rgba(217,243,107,.6); background:linear-gradient(135deg,rgba(217,243,107,.35),rgba(217,243,107,.06)); }
.posm-store i:nth-child(2){background:linear-gradient(140deg,rgba(75,115,255,.4),rgba(75,115,255,.05));border-color:rgba(100,130,255,.6)}
.posm-store i:nth-child(3){background:linear-gradient(140deg,rgba(184,98,74,.35),rgba(184,98,74,.05));border-color:rgba(184,98,74,.6)}
.posm-store span { position:absolute; top:50%; left:50%; width:23%; aspect-ratio:1; border:1px solid var(--accent); border-radius:50%; transform:translate(-50%,-50%); }
.posm-list { display:flex; flex-direction:column; gap:13px; padding:17px 12px; border:1px solid var(--line); background:rgba(255,255,255,.015); }
.posm-list i { display:block; width:100%; height:1px; background:var(--line-strong); }
.posm-list i:nth-child(2){width:75%}.posm-list i:nth-child(3){width:88%}.posm-list i:nth-child(4){width:56%}
.posm-list b { margin-top:auto; color:var(--faint); font:7px var(--mono); letter-spacing:.1em; }

@media (max-width: 900px) {
  .project-demand,.project-whitepaper,.project-rfp,.project-automation,.project-brand,.project-posm { grid-column: span 6; }
}
@media (max-width: 640px) {
  .project-demand,.project-whitepaper,.project-rfp,.project-automation,.project-brand,.project-posm { grid-column: 1 / -1; }
  .project-brand .project-art,.project-posm .project-art { min-height:230px; }
  .brand-poster b { font-size:clamp(20px,8vw,35px); }
}