/* ===== assets/css/style.css ===== */
: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); }
}


/* ===== assets/css/refined.css ===== */
/*
  Refined presentation layer.
  Stronger typographic hierarchy, contained grids and scroll-enter animations;
  the existing design language and reduced-motion behavior are preserved.
*/
:root { --content-max: 1320px; --reading-size: 17px; --meta-size: 11px; }
body { font-size: 16px; line-height: 1.75; }
img, svg, video, canvas { max-width: 100%; }
main, section, article, aside, nav, header, footer { min-width: 0; }
:is(h1,h2,h3,h4,p,small,span,b,strong,a) { overflow-wrap: break-word; }
:where(p) { text-wrap: pretty; }
.kicker, .mono-label { font-size: 11px; line-height: 1.55; }
.site-header { min-height: 56px; }
.nav-link { font-size: 10px; }
.nav-contact { font-size: 10px; }
.section-inner { max-width: min(calc(100% - 2 * var(--page-gutter)), var(--content-max)); }
.section-bar { min-height: 42px; font-size: 10px; padding-inline: clamp(16px, 3vw, 34px); }
.about-layout { max-width: min(calc(100% - 2 * var(--page-gutter)), 1280px); column-gap: clamp(48px, 7vw, 105px); row-gap: 52px; padding-top: clamp(100px, 10vw, 152px); padding-bottom: clamp(92px, 9vw, 130px); }
.about-title h2, .work-heading h2, .approach-heading h2 { font-size: clamp(50px, 5.5vw, 82px); line-height: 1.08; letter-spacing: -.06em; }
.about-title h2 em, .work-heading h2 em, .approach-heading h2 em { line-height: 1.22; padding-bottom: .12em; }
.about-copy { max-width: 520px; padding-top: 32px; }
.about-copy p { font-size: 16px; line-height: 1.82; margin-bottom: 20px; }
.about-copy .about-lede { font-size: clamp(23px, 2vw, 29px); line-height: 1.45; }
.about-copy .quiet-copy { font-size: 14px; line-height: 1.8; }
.underlined-link { font-size: 14px; }
.about-facts b { font-size: 17px; line-height: 1.4; }
.about-facts span { font-size: 10px; }
.work { background: var(--bg); }
.work-heading { max-width: min(calc(100% - 2 * var(--page-gutter)), var(--content-max)); padding-top: clamp(85px, 9vw, 125px); padding-bottom: 44px; }
.heading-note { max-width: 390px; font-size: 16px; line-height: 1.75; }
.project-grid { max-width: min(calc(100% - 2 * var(--page-gutter)), var(--content-max)); gap: clamp(14px, 1.5vw, 22px); align-items: stretch; }
.project-card { border-radius: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 54%, var(--bg)), var(--bg) 65%); }
.project-card-head, .project-card-foot { min-height: 43px; padding: 10px 15px; font-size: 10px; line-height: 1.5; letter-spacing: .08em; }
.project-card-head span:last-child, .project-card-foot > span { min-width: 0; }
.project-card-copy { padding: clamp(21px, 2.1vw, 29px); }
.project-card-copy .mono-label { font-size: 11px; margin-bottom: 12px; letter-spacing: .1em; }
.project-card-copy h3 { max-width: 610px; margin-bottom: 15px; font-size: clamp(28px, 2.8vw, 39px); line-height: 1.12; letter-spacing: -.055em; text-wrap: balance; }
.project-card-copy > p:not(.mono-label) { max-width: 600px; margin-bottom: 20px; font-size: 16px; line-height: 1.76; }
.tag-row { gap: 7px; }
.tag-row span { padding: 5px 8px; font-size: 10px; line-height: 1.55; }
.project-card-foot .case-link { font-size: 10px; white-space: nowrap; }
.round-arrow { width: 31px; height: 31px; }
.project-card:hover { border-color: color-mix(in srgb, var(--accent) 65%, var(--line-strong)); }
.project-featured { grid-column: 1 / -1; background: radial-gradient(ellipse at 78% 18%, rgba(34,80,255,.09), transparent 42%), linear-gradient(145deg, var(--panel), var(--bg) 66%); }
.featured-layout { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: clamp(24px, 3vw, 48px); padding: clamp(24px, 3vw, 42px); align-items: stretch; }
.featured-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 8px 0; }
.featured-copy .mono-label { color: var(--accent); font: 11px/1.6 var(--mono); letter-spacing: .1em; }
.featured-copy h3 { margin: 16px 0 18px; max-width: 560px; font: 600 clamp(36px, 4vw, 58px)/1.05 var(--display); letter-spacing: -.065em; text-wrap: balance; }
.featured-copy h3 em { color: var(--accent); font: italic 1.05em/1.17 var(--serif); letter-spacing: -.04em; }
.featured-copy > p:not(.mono-label) { max-width: 490px; font-size: 16px; line-height: 1.82; color: var(--muted); }
.featured-metrics { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: auto; padding: 25px 0 20px; }
.featured-metrics > div { min-width: 0; padding: 13px 9px 10px 0; border-top: 1px solid var(--line-strong); }
.featured-metrics strong { display: block; color: var(--ink); font: 700 clamp(26px, 2.5vw, 36px)/1.1 var(--display); letter-spacing: -.06em; }
.featured-metrics strong span { color: var(--accent); }
.featured-metrics small { display: block; max-width: 115px; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.featured-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 48px; padding: 0 16px; background: var(--accent); color: var(--bg); font: 700 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; transition: transform .25s ease, filter .25s ease; }
.featured-cta span { font-size: 17px; }
.featured-cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.home-system-map { position: relative; min-width: 0; overflow: hidden; padding: 16px; border: 1px solid var(--line-strong); background-color: color-mix(in srgb, var(--bg) 92%, transparent); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 34px 34px; }
.home-map-topline, .home-map-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--faint); font: 10px var(--mono); letter-spacing: .1em; }
.home-map-top { min-height: 22px; margin-bottom: 15px; }
.map-live { display: inline-flex; align-items: center; gap: 7px; }
.map-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 13px color-mix(in srgb, var(--accent) 65%, transparent); animation: map-pulse 2.4s ease-in-out infinite; }
.home-map-row { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr); gap: 5px; align-items: stretch; }
.home-map-node { min-width: 0; padding: 12px 11px 13px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 90%, transparent); transition: border-color .3s ease, transform .3s ease, background .3s ease; }
.home-map-node:hover { border-color: var(--accent); transform: translateY(-3px); background: var(--panel-2); }
.home-map-node > b { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; color: var(--accent); font: 10px var(--mono); }
.home-map-node > b small { color: var(--faint); font-size: 9px; font-weight: 400; letter-spacing: .06em; }
.home-map-node > strong { display: block; margin-top: 11px; font: 600 clamp(14px, 1.2vw, 17px)/1.25 var(--display); letter-spacing: -.03em; }
.home-map-node > span { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.home-map-node.signal { border-top: 2px solid #4e86ff; }
.home-map-node.research { border-top: 2px solid var(--accent); }
.home-map-node.decide { border-top: 2px solid #b89aff; }
.home-map-node.activation { border-top: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.home-map-node.handoff { border-top: 2px solid #62c99b; }
.map-arrow { display: grid; place-items: center; color: var(--accent); font: 22px var(--body); animation: arrow-nudge 2s ease-in-out infinite; }
.home-map-branch { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 0 9px; color: var(--faint); font: 9px var(--mono); letter-spacing: .1em; }
.home-map-branch span { display: block; width: 9%; height: 1px; background: var(--line-strong); }
.home-channel-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
.home-channel-row > div { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 1px 7px; min-width: 0; padding: 10px 9px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 84%, transparent); }
.channel-icon { grid-row: span 2; display: grid; place-items: center; width: 27px; height: 27px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font: 700 14px var(--display); font-style: normal; }
.home-channel-row b { color: var(--ink); font: 600 10px var(--mono); letter-spacing: .04em; }
.home-channel-row small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.home-crm-bar { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; margin: 9px 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 11%, var(--panel)), var(--panel)); overflow: hidden; }
.crm-orbit { color: var(--accent); font-size: 24px; line-height: 1; }
.home-crm-bar > strong { font: 700 12px var(--mono); letter-spacing: .07em; white-space: nowrap; }
.home-crm-bar > strong small { display: block; margin-top: 4px; color: var(--accent); font-size: 9px; font-weight: 500; }
.home-crm-bar > span:nth-of-type(2) { margin-left: auto; color: var(--muted); font-size: 12px; text-align: right; }
.crm-pulse { position: absolute; top: 0; bottom: 0; left: -35%; width: 28%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 13%, transparent), transparent); animation: crm-sweep 5s linear infinite; pointer-events: none; }
.home-rfp-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px 12px; margin-top: 12px; padding: 12px; border: 1px dashed var(--line-strong); background: color-mix(in srgb, var(--panel) 70%, transparent); }
.home-rfp-route > span { color: #8fbdff; font: 9px var(--mono); letter-spacing: .08em; }
.home-rfp-route > b { min-width: 0; font-size: 12px; font-weight: 500; line-height: 1.5; }
.home-rfp-route > i { color: var(--muted); font: normal 10px var(--mono); white-space: nowrap; }
.project-proposal { grid-column: span 5; }
.project-rfp { grid-column: span 7; }
.project-automation { grid-column: span 7; }
.project-brand { grid-column: span 5; }
.project-posm { grid-column: 1 / -1; }
.project-art { min-height: 300px; }
.project-whitepaper .project-art { min-height: 360px; }
.project-rfp .project-art { min-height: 340px; }
.project-automation .project-art { min-height: 330px; }
.project-brand .project-art { min-height: 390px; }
.project-posm .project-art { min-height: 350px; }
/* editorial cover stack */
.proposal-art { overflow: hidden; background: radial-gradient(ellipse at 50% 50%, rgba(217,243,107,.09), transparent 62%), linear-gradient(150deg,#141a17,#101112); }
.paper-stack { position: relative; width: min(70%,360px); height: 81%; min-height: 250px; }
.stack-page { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; width: 72%; height: 92%; padding: 18px; color: #161816; background: #e9e9df; border: 1px solid rgba(0,0,0,.25); box-shadow: 12px 15px 0 rgba(0,0,0,.24); transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.stack-page > small { color: #4e5942; font: 9px var(--mono); letter-spacing: .1em; }
.stack-page > b { margin-top: 20px; font: 700 clamp(22px,2.4vw,36px)/.95 var(--display); letter-spacing: -.07em; }
.stack-page > i { display: block; height: 4px; background: #9b9e90; }
.stack-page > i:nth-of-type(1) { width: 90%; margin-top: 15px; }
.stack-page > i:nth-of-type(2) { width: 71%; }
.stack-page > i:nth-of-type(3) { width: 47%; }
.stack-page > span { margin-top: auto; font: 10px var(--mono); }
.page-back { top: 3%; left: 7%; transform: rotate(-11deg); background: #a9b4a0; }
.page-mid { top: 0; left: 17%; transform: rotate(7deg); background: #d0d7c1; }
.page-front { top: 2%; left: 13%; transform: rotate(-2deg); }
.page-front .paper-brand { font-size: 38px; }
.page-front .paper-brand span { color: #809c2c; }
.page-front > b { font-size: clamp(32px,4vw,54px); }
.page-front > small { margin-top: 5px; font-size: 8px; }
.page-front .page-stamp { position: absolute; right: 12px; bottom: 15px; margin: 0; padding: 6px; border: 1px solid #738537; color: #54671c; font: 9px/1.25 var(--mono); letter-spacing: .05em; transform: rotate(4deg); }
.project-whitepaper:hover .page-back { transform: translate(-9px,5px) rotate(-15deg); }
.project-whitepaper:hover .page-mid { transform: translate(12px,-7px) rotate(10deg); }
.project-whitepaper:hover .page-front { transform: translate(0,-9px) rotate(0deg); }
.paper-side-index { position: absolute; right: 8%; bottom: 11%; color: var(--muted); font: 15px var(--mono); line-height: 1.6; }
.paper-side-index span { display: block; font-size: 8px; letter-spacing: .1em; }
/* requirement mapping board */
.brief-art { display: grid; place-items: center; padding: clamp(18px,3vw,34px); background: radial-gradient(ellipse at 25% 20%, rgba(217,243,107,.12), transparent 45%), #121416; }
.rfp-board { width: 100%; max-width: 690px; padding: 18px; border: 1px solid var(--line-strong); background: rgba(10,11,12,.65); transform: perspective(900px) rotateX(2deg); transition: transform .6s ease, border-color .4s ease; }
.project-rfp:hover .rfp-board { transform: perspective(900px) rotateX(0) translateY(-5px); border-color: var(--accent); }
.rfp-board-head, .rfp-board-foot { display: flex; justify-content: space-between; gap: 14px; color: var(--faint); font: 9px var(--mono); letter-spacing: .1em; }
.rfp-board-head { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.rfp-matrix { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 14px 0; }
.rfp-cell { display: flex; flex-direction: column; gap: 9px; min-width: 0; min-height: 92px; padding: 12px; border: 1px solid var(--line); background: var(--panel); }
.rfp-cell > i { color: var(--accent); font: 9px var(--mono); font-style: normal; }
.rfp-cell > b { font: 600 15px var(--display); }
.rfp-cell > span { display: block; height: 3px; width: 92%; background: var(--line-strong); }
.rfp-cell > span:last-child { width: 65%; }
.rfp-cell.is-focus { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.rfp-board-foot { padding-top: 12px; border-top: 1px solid var(--line); align-items: center; }
.rfp-board-foot b { color: var(--accent); font-size: 11px; }
.rfp-board-foot span { text-align: right; }
/* channel orchestration */
.workflow-art { padding: 25px; background-color: #111416; background-image: radial-gradient(rgba(240,240,236,.16) .8px,transparent .8px); background-size: 16px 16px; }
.ops-console { position: relative; width: 100%; max-width: 780px; padding: 14px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--bg) 88%, transparent); box-shadow: 0 22px 55px rgba(0,0,0,.24); }
.ops-top { display: flex; align-items: center; gap: 15px; padding: 0 0 13px; border-bottom: 1px solid var(--line); color: var(--faint); font: 9px var(--mono); letter-spacing: .08em; }
.ops-lights { display: flex; gap: 5px; }
.ops-lights i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.ops-top > span:last-child { margin-left: auto; }
.ops-channels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 17px 0 10px; }
.ops-channels > div { display: grid; grid-template-columns: 30px 1fr; gap: 3px 8px; align-items: center; padding: 11px; border: 1px solid var(--line); }
.ops-channels > div > i { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); font-style: normal; }
.ops-channels b { font: 600 10px var(--mono); }
.ops-channels small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.ops-link-line { display: flex; justify-content: center; gap: 22%; height: 24px; }
.ops-link-line i { display: block; width: 1px; height: 100%; background: var(--accent); opacity: .7; transform: rotate(0deg); }
.ops-crm { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid color-mix(in srgb,var(--accent) 50%,var(--line)); background: color-mix(in srgb,var(--accent) 8%,var(--panel)); }
.ops-crm > span { font-size: 25px; color: var(--accent); }
.ops-crm b { display: block; font: 700 12px var(--mono); }
.ops-crm small { color: var(--muted); font-size: 12px; }
.ops-crm em { margin-left: auto; color: var(--accent); font: normal 9px var(--mono); }
.ops-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--faint); font: 9px var(--mono); letter-spacing: .08em; }
/* brand formats */
.brand-art { padding: 25px; }
.brand-stage { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 22px; max-width: 650px; }
.brand-poster { width: 100%; max-width: 320px; aspect-ratio: .73; padding: 18px; }
.brand-poster span,.brand-poster small { font-size: 9px; }
.brand-poster b { font-size: clamp(30px,3.1vw,47px); }
.brand-swatches { grid-template-columns: repeat(2,52px); gap: 8px; }
.brand-swatches i { width: 52px; }
.brand-format-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: -8px; }
.brand-format-cards div { display: flex; flex-direction: column; justify-content: space-between; min-height: 67px; padding: 10px; border: 1px solid var(--line); color: var(--muted); font: 9px var(--mono); }
.brand-format-cards b { color: var(--accent); font: 700 23px var(--display); }
/* POSM dashboard */
.posm-art { padding: 25px; background: radial-gradient(ellipse at 20% 20%, rgba(217,243,107,.09), transparent 45%), #111416; }
.posm-dashboard { width: 100%; max-width: 850px; padding: 14px; border: 1px solid var(--line-strong); background: var(--bg); }
.posm-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.posm-header span { color: var(--accent); font: 11px var(--mono); letter-spacing: .1em; }
.posm-header b { color: var(--faint); font: 9px var(--mono); }
.posm-dashboard-grid { display: grid; grid-template-columns: 1.1fr 1fr .85fr; gap: 12px; margin-top: 13px; }
.posm-store, .posm-list, .posm-calendar { position: relative; min-width: 0; min-height: 220px; padding: 12px; border: 1px solid var(--line); background-color: var(--panel); background-image: linear-gradient(var(--line) 1px, transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 22px 22px; }
.store-label { display: block; color: var(--faint); font: 8px var(--mono); letter-spacing: .06em; }
.posm-store i { position: relative; display: inline-block; width: 28%; height: 65px; margin-top: 29px; border: 1px solid var(--line-strong); background: linear-gradient(145deg, color-mix(in srgb,var(--accent) 32%,var(--panel)),var(--panel)); }
.posm-store i:nth-of-type(2) { background: linear-gradient(145deg,rgba(47,88,255,.42),var(--panel)); }
.posm-store i:nth-of-type(3) { background: linear-gradient(145deg,rgba(165,104,80,.42),var(--panel)); }
.posm-store i:nth-of-type(4) { background: linear-gradient(145deg,rgba(217,243,107,.18),var(--panel)); }
.posm-store > b { position: absolute; bottom: 12px; left: 12px; color: var(--muted); font: 8px var(--mono); }
.posm-list > i { display: block; height: 7px; margin-top: 20px; border: 1px solid var(--line); background: color-mix(in srgb,var(--accent) 18%,var(--panel)); }
.posm-list > i:nth-of-type(2) { width: 72%; }
.posm-list > i:nth-of-type(3) { width: 84%; }
.posm-list > i:nth-of-type(4) { width: 56%; }
.posm-list > b { display: block; margin-top: 20px; color: var(--accent); font: 9px var(--mono); }
.posm-calendar { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: 23px; gap: 4px; align-content: start; }
.posm-calendar .store-label { grid-column: 1 / -1; margin-bottom: 3px; }
.posm-calendar > i { border: 1px solid var(--line); background: color-mix(in srgb,var(--accent) 15%,var(--panel)); }
.posm-calendar > i:nth-of-type(3n) { background: color-mix(in srgb,var(--blue) 29%,var(--panel)); }
/* large, balanced content hierarchy on every dedicated case page */
.case-shell { width: min(calc(100% - 145px), 1480px); max-width: 1480px; margin-left: auto; margin-right: 145px; padding: 0; }
.case-hero { padding: clamp(76px,8vw,120px) clamp(30px,4.7vw,72px) 42px; }
.case-hero-grid { grid-template-columns: minmax(0,1.2fr) minmax(290px,.72fr); gap: clamp(42px,5vw,82px); }
.case-hero h1 { font-size: clamp(54px,6.2vw,98px); line-height: 1.05; letter-spacing: -.065em; max-width: 1020px; }
.case-hero h1 em { line-height: 1.16; padding-bottom: .08em; }
.case-kicker { font-size: 11px; line-height: 1.55; margin-bottom: 25px; }
.case-deck { max-width: 510px; font-size: clamp(17px,1.35vw,20px); line-height: 1.8; }
.case-meta { gap: 10px 28px; margin-top: 38px; font-size: 11px; line-height: 1.6; }
.case-meta span { display: grid; gap: 5px; }
.case-meta b { font-size: 13px; text-transform: none; letter-spacing: 0; }
.case-stats { grid-template-columns: repeat(3,minmax(0,1fr)); margin-inline: clamp(30px,4.7vw,72px); border: 1px solid var(--line); background: var(--panel); }
.case-stat { min-width: 0; padding: 25px clamp(16px,2vw,28px); }
.case-stat strong { font-size: clamp(26px,3vw,44px); line-height: 1.12; overflow-wrap: anywhere; }
.case-stat span { font-size: 14px; line-height: 1.65; }
.case-content-section { grid-template-columns: minmax(150px,.36fr) minmax(0,1.25fr); gap: clamp(42px,6vw,95px); padding: clamp(72px,7.5vw,108px) clamp(30px,4.7vw,72px); }
.case-section-label { font-size: 11px; line-height: 1.55; }
.case-section-label small { font-size: 10px; line-height: 1.5; }
.case-section-body h2 { max-width: 940px; font-size: clamp(34px,3.5vw,54px); line-height: 1.12; letter-spacing: -.055em; margin-bottom: 23px; }
.case-section-body h3 { font-size: clamp(22px,2.3vw,31px); line-height: 1.2; margin-top: 38px; }
.case-section-body p { max-width: 900px; font-size: 17px; line-height: 1.82; margin-bottom: 21px; }
.case-note { padding: 18px 21px; font-size: 14px; line-height: 1.8; }
.case-flow { margin: 32px 0; }
.case-flow-item { min-height: 152px; padding: 18px 15px; }
.case-flow-item b { font-size: 10px; }
.case-flow-item span { font-size: 15px; line-height: 1.45; }
.case-flow-item small { font-size: 13px; line-height: 1.6; }
.case-channel-grid { gap: 14px; margin: 30px 0; }
.case-channel { padding: 22px; }
.case-channel .number { font-size: 11px; }
.case-channel h3 { font-size: 21px; }
.case-channel p { font-size: 15px; line-height: 1.7; }
.case-tags { gap: 9px; }
.case-tags span { padding: 8px 10px; font-size: 11px; }
.case-bottom-nav { padding: 25px clamp(24px,4vw,54px); font-size: 11px; }
.case-footer { font-size: 10px; }
.case-hero-visual { position: relative; z-index: 1; width: 100%; min-height: 270px; margin-top: 45px; overflow: hidden; border: 1px solid var(--line-strong); background-color: var(--panel); background-image: linear-gradient(var(--line) 1px, transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 38px 38px; }
/* all case art lives inside its own clipped, responsive field */
.editorial-hero-visual { min-height: 310px; background: radial-gradient(ellipse at 45% 55%,rgba(217,243,107,.11),transparent 55%),#111413; }
.editorial-visual-label, .response-visual-head, .posm-visual-top, .brand-visual-kicker { position: absolute; top: 15px; right: 18px; left: 18px; display: flex; justify-content: space-between; gap: 12px; color: var(--faint); font: 10px var(--mono); letter-spacing: .09em; }
.editorial-sheet { position: absolute; top: 21%; display: flex; flex-direction: column; width: clamp(145px,18vw,250px); height: 67%; padding: 15px; background: #e9e9df; color: #151816; border: 1px solid rgba(0,0,0,.18); box-shadow: 12px 14px 0 rgba(0,0,0,.27); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.editorial-sheet small { font: 9px var(--mono); color: #607040; }
.editorial-sheet b { margin-top: 25px; font: 800 clamp(24px,3vw,45px)/.9 var(--display); letter-spacing: -.075em; }
.editorial-sheet i { display: block; height: 4px; background: #a5a89a; margin-top: 10px; }
.editorial-sheet i:nth-of-type(1) { width: 91%; margin-top: 20px; }
.editorial-sheet i:nth-of-type(2) { width: 70%; }
.editorial-sheet i:nth-of-type(3) { width: 52%; }
.editorial-sheet span { margin-top: auto; font: 10px var(--mono); }
.sheet-a { left: 18%; transform: rotate(-11deg); background: #a8b79d; }
.sheet-b { left: 32%; transform: rotate(7deg); background: #d4dcc7; }
.sheet-c { left: 46%; transform: rotate(-2deg); }
.editorial-hero-visual:hover .sheet-a { transform: translate(-8px,4px) rotate(-14deg); }
.editorial-hero-visual:hover .sheet-b { transform: translate(9px,-5px) rotate(10deg); }
.editorial-hero-visual:hover .sheet-c { transform: translateY(-7px) rotate(0); }
.editorial-captions { position: absolute; right: 18px; bottom: 15px; left: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--muted); font: 10px var(--mono); letter-spacing: .1em; }
.response-hero-visual { min-height: 290px; padding: 58px 28px 24px; background: radial-gradient(ellipse at 25% 25%,rgba(217,243,107,.13),transparent 48%),#111315; }
.response-sheet-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; height: 165px; }
.response-sheet-grid > div { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 15px; border: 1px solid var(--line-strong); background: color-mix(in srgb,var(--panel) 90%,transparent); }
.response-sheet-grid small { color: var(--accent); font: 9px var(--mono); }
.response-sheet-grid b { font: 600 16px/1.25 var(--display); }
.response-sheet-grid i { display: block; height: 4px; width: 91%; background: var(--line-strong); }
.response-sheet-grid i:last-child { width: 63%; }
.response-sheet-grid .response-focus { background: color-mix(in srgb,var(--accent) 9%,var(--panel)); border-color: var(--accent); }
.response-checkline { display: flex; align-items: center; justify-content: center; gap: clamp(10px,3vw,42px); min-height: 45px; margin-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; }
.response-checkline i { color: var(--accent); font-style: normal; font-size: 17px; }
.orchestration-hero-visual { min-height: 300px; padding: 36px 28px 24px; background-color: #111415; }
.orchestration-sources { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; max-width: 750px; margin: 0 auto; }
.orchestration-sources > div { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); background: var(--panel); }
.orchestration-sources b { display: grid; place-items: center; width: 30px; height: 30px; background: color-mix(in srgb,var(--accent) 12%,transparent); color: var(--accent); font: 700 14px var(--display); }
.orchestration-sources span { font: 10px var(--mono); letter-spacing: .08em; }
.orchestration-connectors { display: flex; justify-content: space-around; max-width: 680px; height: 30px; margin: 0 auto; }
.orchestration-connectors i { width: 1px; height: 100%; background: var(--accent); opacity: .55; }
.orchestration-core { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px; width: min(100%,700px); margin: 0 auto; padding: 17px; border: 1px solid var(--accent); background: color-mix(in srgb,var(--accent) 8%,var(--panel)); }
.orchestration-core > span { color: var(--accent); font-size: 22px; }
.orchestration-core b { font: 700 16px var(--mono); }
.orchestration-core small { color: var(--muted); font-size: 13px; }
.orchestration-bottom { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 20px; color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; }
.orchestration-bottom i { color: var(--accent); font-size: 16px; font-style: normal; }
.brand-hero-visual { min-height: 360px; background: radial-gradient(ellipse at 30% 55%,rgba(217,243,107,.12),transparent 52%),#111413; }
.brand-visual-kicker { z-index: 2; }
.brand-hero-poster { position: absolute; top: 18%; left: 13%; display: flex; flex-direction: column; justify-content: space-between; width: clamp(170px,22vw,300px); height: 68%; padding: 17px; background: linear-gradient(145deg,#d9f36b 0 54%,#1d2925 54% 100%); color: #121513; border: 1px solid rgba(255,255,255,.24); transform: rotate(-4deg); box-shadow: 16px 17px 0 rgba(0,0,0,.3); transition: transform .55s ease; }
.brand-hero-poster small, .brand-hero-poster span { font: 9px var(--mono); letter-spacing: .09em; }
.brand-hero-poster strong { font: 800 clamp(28px,4vw,55px)/.88 var(--display); letter-spacing: -.08em; }
.brand-hero-visual:hover .brand-hero-poster { transform: translateY(-6px) rotate(0); }
.brand-hero-assets { position: absolute; left: 45%; right: 8%; top: 26%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.brand-hero-assets div { display: flex; flex-direction: column; justify-content: space-between; min-height: 80px; padding: 12px; border: 1px solid var(--line-strong); background: color-mix(in srgb,var(--panel) 86%,transparent); color: var(--muted); font: 9px var(--mono); }
.brand-hero-assets b { color: var(--accent); font: 700 28px var(--display); }
.brand-hero-palette { position: absolute; left: 45%; right: 8%; bottom: 13%; display: flex; gap: 7px; }
.brand-hero-palette i { flex: 1; height: 13px; background: #d9f36b; }
.brand-hero-palette i:nth-child(2) { background: #879b7b; }.brand-hero-palette i:nth-child(3) { background: #a7715a; }.brand-hero-palette i:nth-child(4) { background: #2c4240; }.brand-hero-palette i:nth-child(5) { background: #e4e3d7; }
.posm-hero-visual { min-height: 350px; padding: 58px 23px 25px; background: radial-gradient(ellipse at 15% 35%,rgba(217,243,107,.09),transparent 40%),#111416; }
.posm-visual-top { top: 15px; }
.posm-visual-shell { display: grid; grid-template-columns: 52px minmax(0,1fr); width: min(100%,1000px); min-height: 230px; margin: 0 auto; border: 1px solid var(--line-strong); background: var(--bg); }
.posm-visual-sidebar { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 15px 7px; border-right: 1px solid var(--line); background: var(--panel); }
.posm-visual-sidebar i { width: 22px; height: 22px; border: 1px solid var(--line); background: color-mix(in srgb,var(--accent) 12%,transparent); }
.posm-visual-sidebar i:first-child { background: var(--accent); }
.posm-visual-sidebar small { margin-top: auto; writing-mode: vertical-rl; color: var(--faint); font: 8px var(--mono); }
.posm-visual-main { min-width: 0; padding: 16px; }
.posm-visual-title { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.posm-visual-title b { font: 600 18px var(--display); }.posm-visual-title span { color: var(--accent); font: 9px var(--mono); }
.posm-visual-layout { display: grid; grid-template-columns: .9fr .9fr 1.3fr; gap: 10px; margin-top: 12px; }
.posm-store-card, .posm-asset-list { min-width: 0; padding: 10px; border: 1px solid var(--line); background: var(--panel); }
.posm-store-card small, .posm-asset-list small { display: block; color: var(--faint); font: 8px var(--mono); }
.posm-store-card i { display: inline-block; width: 24%; height: 49px; margin-top: 24px; border: 1px solid var(--line-strong); background: color-mix(in srgb,var(--accent) 25%,var(--panel)); }
.posm-store-card:nth-child(2) i:nth-of-type(2) { background: color-mix(in srgb,var(--blue) 34%,var(--panel)); }
.posm-asset-list b { display: flex; justify-content: space-between; gap: 5px; margin-top: 13px; font: 10px var(--body); }
.posm-asset-list b span { color: var(--accent); font: 8px var(--mono); }
.posm-visual-note { margin: 9px 0 0; color: var(--faint); font: 9px var(--mono); letter-spacing: .1em; }
.case-system { position: relative; padding: clamp(50px,6vw,88px) clamp(24px,4.7vw,72px); border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 85% 0%,rgba(23,78,255,.08),transparent 40%),linear-gradient(180deg,var(--panel),var(--bg)); }
.case-system-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.62fr); align-items: end; gap: clamp(35px,6vw,86px); margin: 0 auto 34px; max-width: 1360px; }
.case-system-heading h2 { margin: 0; font: 600 clamp(42px,5.1vw,74px)/1.04 var(--display); letter-spacing: -.065em; text-wrap: balance; }
.case-system-heading h2 em { color: var(--accent); font: italic 1.05em/1.18 var(--serif); letter-spacing: -.04em; }
.case-system-heading .case-kicker { display: block; margin-bottom: 19px; }
.case-system-heading > p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.8; }
.system-map-frame { max-width: 1420px; margin: 0 auto; border: 1px solid var(--line-strong); background: var(--bg); background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 35px 35px; }
.system-map-topline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-strong); color: var(--faint); font: 10px var(--mono); letter-spacing: .1em; }
.system-map-topline span:last-child { display: flex; align-items: center; gap: 8px; }
.system-map-topline i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.system-signal-band { padding: 18px 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb,var(--panel) 86%,transparent); }
.system-band-label { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.system-band-label span { color: var(--accent); font: 10px var(--mono); }
.system-band-label b { font: 600 16px var(--display); }
.system-signal-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.system-signal-pills span { padding: 8px 10px; border: 1px solid var(--line); color: var(--muted); background: var(--bg); font-size: 13px; }
.system-main-route { display: grid; grid-template-columns: minmax(0,1fr) 27px minmax(0,1fr) 27px minmax(0,1fr) 27px minmax(0,1fr); gap: 7px; align-items: stretch; padding: 18px; }
.system-stage { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 15px; border: 1px solid var(--line-strong); background: color-mix(in srgb,var(--panel) 88%,transparent); transition: border-color .35s ease, background .35s ease, translate .35s ease; }
.system-stage.is-visible { border-color: color-mix(in srgb,var(--accent) 54%,var(--line)); }
.system-stage:hover { translate: 0 -4px; border-color: var(--accent); }
.system-stage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--accent); font: 10px var(--mono); }
.system-stage-head > span { font-size: 17px; font-weight: 600; }
.system-stage-head small { color: var(--faint); font-size: 9px; }
.system-stage-glyph { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 88px; margin: 15px 0; padding: 12px 8px; border: 1px solid var(--line); background: color-mix(in srgb,var(--bg) 90%,transparent); overflow: hidden; }
.glyph-monitor { align-items: end; gap: 9px; }
.glyph-monitor i { width: 10%; background: var(--accent); opacity: .7; height: 32%; transform-origin: bottom; animation: bar-rise 3.6s ease-in-out infinite alternate; }
.glyph-monitor i:nth-child(2) { height: 61%; animation-delay: -.5s; }.glyph-monitor i:nth-child(3) { height: 43%; animation-delay: -1.2s; }.glyph-monitor i:nth-child(4) { height: 81%; animation-delay: -.8s; }
.glyph-monitor b { width: 27px; height: 27px; border: 1px solid #4e86ff; border-radius: 50%; box-shadow: 0 0 0 7px rgba(78,134,255,.08); }
.glyph-query { flex-direction: column; align-items: stretch; gap: 5px; }
.glyph-query i { display: block; padding: 5px 7px; border: 1px solid var(--line); color: var(--muted); font: normal 8px var(--mono); }
.glyph-query i:first-child { border-color: var(--accent); color: var(--accent); }
.glyph-profile { position: relative; }
.glyph-profile i { display: block; width: 17px; height: 38px; background: color-mix(in srgb,var(--accent) 25%,var(--panel)); border: 1px solid var(--line-strong); transform: skewY(-8deg); }
.glyph-profile i:nth-child(2) { height: 54px; background: color-mix(in srgb,var(--blue) 30%,var(--panel)); }.glyph-profile i:nth-child(3) { height: 30px; background: color-mix(in srgb,#b78365 30%,var(--panel)); }
.glyph-profile b { position: absolute; right: 10px; bottom: 10px; color: var(--accent); font: 8px var(--mono); }
.glyph-decision { flex-direction: column; gap: 4px; }
.glyph-decision i { width: 100%; padding: 5px; border: 1px solid var(--line); color: var(--muted); font: normal 8px var(--mono); text-align: center; }
.glyph-decision b { color: var(--accent); font: normal 13px var(--body); line-height: 1; }
.system-stage h3 { margin: 0 0 9px; font: 600 clamp(19px,1.55vw,25px)/1.15 var(--display); letter-spacing: -.04em; text-wrap: balance; }
.system-stage p { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.system-stage-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); color: var(--faint); font: 9px var(--mono); letter-spacing: .06em; }
.system-link { display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; align-items: center; color: var(--accent); min-width: 0; }
.system-link::before, .system-link::after { content: ""; width: 1px; min-height: 10px; background: color-mix(in srgb,var(--accent) 55%,var(--line)); }
.system-link b { font: 19px var(--body); animation: arrow-nudge 2s ease-in-out infinite; }
.system-route-break { display: flex; align-items: center; justify-content: center; gap: 15px; padding: 3px 22px 16px; color: var(--faint); font: 10px var(--mono); letter-spacing: .1em; text-align: center; }
.system-route-break span { display: block; flex: 1; max-width: 160px; height: 1px; background: var(--line-strong); }
.system-channels-panel { margin: 0 18px 18px; border: 1px solid var(--line-strong); background: color-mix(in srgb,var(--panel) 72%,var(--bg)); }
.system-panel-heading { display: grid; grid-template-columns: auto minmax(0,1fr) minmax(0,.85fr); align-items: center; gap: 14px 22px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.system-panel-heading > span { color: var(--accent); font: 10px var(--mono); }
.system-panel-heading h3 { margin: 0; font: 600 clamp(21px,2.2vw,30px)/1.15 var(--display); letter-spacing: -.04em; }
.system-panel-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.system-channel-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; border-bottom: 1px solid var(--line); }
.system-channel { min-width: 0; padding: 19px; border-right: 1px solid var(--line); background: color-mix(in srgb,var(--bg) 70%,transparent); transition: background .3s ease, transform .3s ease; }
.system-channel:last-child { border-right: 0; }
.system-channel:hover { background: color-mix(in srgb,var(--accent) 5%,var(--panel)); transform: translateY(-3px); }
.channel-symbol { display: grid; place-items: center; width: 35px; height: 35px; margin-bottom: 12px; border: 1px solid var(--line); color: var(--accent); font: 700 15px var(--display); }
.system-channel > span { color: var(--faint); font: 9px var(--mono); letter-spacing: .08em; }
.system-channel h4 { margin: 7px 0 9px; font: 600 21px var(--display); letter-spacing: -.04em; }
.system-channel p { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.system-channel small { color: var(--accent); font: 9px var(--mono); letter-spacing: .04em; }
.system-crm-spine { position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 15px; padding: 18px 20px; background: linear-gradient(90deg,color-mix(in srgb,var(--accent) 11%,var(--panel)),var(--panel)); overflow: hidden; }
.crm-spine-icon { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 27px; }
.crm-spine-copy > span { display: block; color: var(--accent); font: 9px var(--mono); letter-spacing: .1em; }
.crm-spine-copy > strong { display: block; margin: 5px 0; font: 700 20px var(--display); }
.crm-spine-copy > small { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }
.crm-stack { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.crm-stack b { padding: 7px 9px; border: 1px solid var(--line-strong); color: var(--muted); font: 9px var(--mono); }
.route-break-bottom { padding-top: 1px; }
.system-outcome-route { display: grid; grid-template-columns: minmax(0,1fr) 27px minmax(0,1fr) 27px minmax(0,1fr); gap: 8px; align-items: stretch; padding: 4px 18px 22px; }
.system-outcome { min-width: 0; padding: 18px; border: 1px solid var(--line-strong); background: var(--panel); }
.system-outcome > span { color: var(--accent); font: 10px var(--mono); letter-spacing: .08em; }
.outcome-number { float: right; color: color-mix(in srgb,var(--ink) 14%,transparent); font: 800 clamp(40px,5vw,65px)/.8 var(--display); letter-spacing: -.08em; }
.system-outcome h3 { margin: 17px 0 9px; max-width: 300px; font: 600 clamp(20px,1.8vw,27px)/1.15 var(--display); letter-spacing: -.04em; }
.system-outcome p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.system-outcome-active, .outcome-active { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 8%,var(--panel)); }
.system-rfp-branch { margin: 0 18px 18px; padding: 20px; border: 1px solid color-mix(in srgb,#7f9fff 54%,var(--line)); background: linear-gradient(120deg,rgba(40,76,175,.08),transparent 80%),var(--bg); }
.rfp-branch-title { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 9px 16px; }
.rfp-branch-title > span { color: #8fbdff; font: 9px var(--mono); letter-spacing: .1em; }
.rfp-branch-title h3 { margin: 0; font: 600 clamp(21px,2.2vw,30px)/1.2 var(--display); letter-spacing: -.04em; }
.rfp-branch-title p { grid-column: 2; max-width: 820px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.rfp-branch-steps { display: grid; grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr); align-items: center; gap: 8px; margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.rfp-branch-steps > div { display: grid; gap: 5px; min-width: 0; }
.rfp-branch-steps b { color: #8fbdff; font: 10px var(--mono); }
.rfp-branch-steps span { font: 600 15px/1.3 var(--display); }
.rfp-branch-steps small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.rfp-branch-steps > i { color: #8fbdff; font: normal 17px var(--body); }
.rfp-branch-metric { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--line); }
.rfp-branch-metric strong { color: var(--ink); font: 700 25px var(--display); letter-spacing: -.05em; }
.rfp-branch-metric strong:last-of-type { color: #8fbdff; }
.rfp-branch-metric span { margin-right: 22px; color: var(--muted); font-size: 12px; }
.system-map-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 13px 18px; border-top: 1px solid var(--line); color: var(--faint); font: 9px var(--mono); letter-spacing: .08em; }
/* scroll-triggered reveal and just-enough ambient motion */
@keyframes map-pulse { 0%,100% { opacity:.55; transform:scale(.85) } 50% { opacity:1; transform:scale(1.15) } }
@keyframes arrow-nudge { 0%,100% { transform:translateX(0) } 50% { transform:translateX(3px) } }
@keyframes crm-sweep { from { left:-35% } to { left:110% } }
@keyframes bar-rise { from { opacity:.35; scale:1 .78 } to { opacity:.86; scale:1 1 } }
.js-ready [data-reveal] { will-change: opacity, transform; }
.js-ready [data-reveal].is-visible { transition-timing-function: cubic-bezier(.2,.78,.2,1); }
.js-ready .system-stage, .js-ready .system-channel, .js-ready .system-outcome { transition: border-color .35s ease, background .35s ease, transform .65s cubic-bezier(.2,.78,.2,1), opacity .65s ease; }
@media (max-width: 1200px) {
  .featured-layout { grid-template-columns: minmax(0,1fr); }
  .featured-copy { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: 8px 24px; }
  .featured-copy .mono-label, .featured-copy h3, .featured-copy > p:not(.mono-label) { grid-column: 1; }
  .featured-copy h3 { margin: 8px 0; }
  .featured-metrics { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding-top: 0; align-self: stretch; }
  .featured-cta { grid-column: 1 / -1; justify-self: start; }
  .home-map-node { padding: 10px; }
  .home-map-node > strong { font-size: 15px; }
  .home-map-node > span { font-size: 12px; }
  .project-card-head, .project-card-foot { font-size: 9px; }
  .system-main-route { grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr); padding: 12px; }
  .system-stage { padding: 12px; }
  .system-stage p { font-size: 13px; }
  .system-channel { padding: 15px; }
}
@media (max-width: 900px) {
  .case-shell { width: calc(100% - 82px); margin-inline: auto; }
  .case-hero-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .case-hero-visual { margin-top: 33px; }
  .case-content-section { grid-template-columns: 1fr; gap: 18px; }
  .case-section-label { padding: 0 0 10px; border-bottom: 1px solid var(--line); }
  .case-system-heading { grid-template-columns: 1fr; gap: 20px; }
  .system-main-route { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .system-link { display: none; }
  .system-stage { min-height: 0; }
  .system-stage p { font-size: 14px; }
  .system-channel-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .system-channel:nth-child(2) { border-right: 0; }
  .system-channel:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .system-outcome-route { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .system-outcome-route .system-link { display: flex; height: 20px; }
  .system-outcome-route .system-link::before { display: none; }
  .system-outcome-route .system-link::after { min-height: 4px; }
  .system-outcome-route .system-link b { transform: rotate(90deg); }
  .rfp-branch-steps { grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr); row-gap: 20px; }
  .rfp-branch-steps > div:nth-of-type(3) { grid-column: 1; }
  .rfp-branch-steps > i:nth-of-type(2) { display: none; }
  .project-proposal, .project-rfp, .project-automation, .project-brand { grid-column: span 6; }
  .project-art, .project-whitepaper .project-art, .project-rfp .project-art, .project-automation .project-art, .project-brand .project-art, .project-posm .project-art { min-height: 290px; }
}
@media (max-width: 620px) {
  .section-bar { font-size: 8.5px; }
  .about-layout, .work-heading, .project-grid { max-width: 100%; }
  .about-title h2, .work-heading h2, .approach-heading h2 { font-size: clamp(43px,11vw,62px); }
  .about-copy { padding-top: 8px; }
  .about-copy p { font-size: 15px; }
  .about-copy .about-lede { font-size: 22px; }
  .about-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .about-facts b { font-size: 15px; }
  .work-heading { padding-top: 70px; display: block; }
  .heading-note { margin-top: 22px; font-size: 15px; }
  .project-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .project-featured, .project-proposal, .project-rfp, .project-automation, .project-brand, .project-posm { grid-column: 1; }
  .project-card-head, .project-card-foot { font-size: 8px; padding: 11px; gap: 8px; }
  .project-card-head span:last-child { max-width: 48%; }
  .project-card-copy { padding: 21px 18px; }
  .project-card-copy h3 { font-size: clamp(27px,7vw,34px); }
  .project-card-copy > p:not(.mono-label) { font-size: 15px; }
  .project-card-foot > span { max-width: 58%; font-size: 8px; }
  .featured-layout { padding: 17px; gap: 25px; }
  .featured-copy { display: flex; }
  .featured-copy h3 { font-size: clamp(35px,9vw,49px); }
  .featured-copy > p:not(.mono-label) { font-size: 15px; }
  .featured-metrics { padding: 10px 0 15px; }
  .featured-metrics strong { font-size: 28px; }
  .featured-metrics small { font-size: 11px; }
  .featured-cta { max-width: 100%; gap: 14px; font-size: 9px; }
  .home-system-map { padding: 10px; background-size: 28px 28px; }
  .home-map-top { font-size: 8px; }
  .home-map-row { grid-template-columns: minmax(0,1fr); gap: 7px; }
  .home-map-node { padding: 12px; }
  .home-map-node > strong { font-size: 16px; }
  .home-map-node > span { font-size: 13px; }
  .map-arrow { height: 16px; transform: rotate(90deg); }
  .home-map-branch { padding: 10px 0; font-size: 8px; }
  .home-channel-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-channel-row > div { padding: 9px 7px; }
  .home-crm-bar { flex-wrap: wrap; gap: 8px; padding: 10px; }
  .home-crm-bar > span:nth-of-type(2) { width: 100%; margin-left: 0; text-align: left; }
  .home-rfp-route { grid-template-columns: 1fr; }
  .home-rfp-route > i { white-space: normal; }
  .paper-stack { width: 70%; min-height: 235px; }
  .project-whitepaper .project-art, .project-rfp .project-art, .project-automation .project-art, .project-brand .project-art, .project-posm .project-art { min-height: 285px; }
  .rfp-board { padding: 10px; }
  .rfp-board-head, .rfp-board-foot { font-size: 8px; }
  .rfp-cell { min-height: 85px; padding: 9px; }
  .rfp-cell > b { font-size: 13px; }
  .ops-console { padding: 9px; }
  .ops-top { font-size: 8px; gap: 8px; }
  .ops-top > span:last-child { display: none; }
  .ops-channels { gap: 5px; }
  .ops-channels > div { grid-template-columns: 1fr; padding: 7px; gap: 5px; }
  .ops-channels > div > i { width: 23px; height: 23px; grid-row: auto; }
  .ops-channels b { font-size: 9px; }
  .ops-channels small { font-size: 10px; }
  .ops-crm { gap: 8px; padding: 8px; }
  .ops-crm em { display: none; }
  .ops-footer { font-size: 8px; }
  .brand-stage { grid-template-columns: 1fr auto; gap: 13px; }
  .brand-poster { width: 100%; padding: 12px; }
  .brand-poster b { font-size: clamp(25px,8vw,39px); }
  .brand-swatches { grid-template-columns: repeat(2,32px); gap: 5px; }
  .brand-swatches i { width: 32px; }
  .brand-format-cards { gap: 5px; }
  .brand-format-cards div { min-height: 55px; padding: 6px; font-size: 7px; }
  .brand-format-cards b { font-size: 19px; }
  .posm-dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .posm-calendar { grid-column: 1/-1; min-height: 80px; grid-template-columns: repeat(6,minmax(0,1fr)); grid-auto-rows: 14px; }
  .posm-calendar .store-label { grid-column: 1/-1; }
  .posm-store, .posm-list { min-height: 175px; padding: 8px; }
  .posm-store i { margin-top: 26px; height: 51px; }
  .posm-list > i { margin-top: 16px; }
  .site-footer > span, .back-top { font-size: 8px; }
  .case-shell { width: 100%; margin: 0; }
  .case-nav-links { gap: 10px; padding-inline: 12px; font-size: 8px; }
  .case-hero { padding: 60px 20px 25px; }
  .case-hero h1 { font-size: clamp(44px,11vw,65px); line-height: 1.06; }
  .case-hero h1 em { line-height: 1.18; }
  .case-deck { font-size: 16px; line-height: 1.75; }
  .case-meta { margin-top: 25px; font-size: 9px; gap: 12px 20px; }
  .case-meta b { font-size: 12px; }
  .case-hero-visual { min-height: 260px; margin-top: 28px; background-size: 28px 28px; }
  .case-stats { grid-template-columns: 1fr; margin-inline: 20px; }
  .case-stat { display: grid; grid-template-columns: minmax(100px,.6fr) minmax(0,1fr); align-items: center; gap: 14px; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .case-stat:last-child { border-bottom: 0; }
  .case-stat strong { font-size: 27px; }
  .case-stat span { font-size: 13px; }
  .case-content-section { grid-template-columns: minmax(0,1fr); gap: 18px; padding: 55px 20px; }
  .case-section-label { padding-bottom: 12px; font-size: 10px; }
  .case-section-label small { font-size: 9px; }
  .case-section-body h2 { font-size: clamp(30px,8vw,43px); line-height: 1.12; }
  .case-section-body h3 { font-size: 23px; }
  .case-section-body p { font-size: 15px; line-height: 1.78; }
  .case-note { font-size: 13px; padding: 15px; }
  .case-flow { grid-template-columns: minmax(0,1fr); }
  .case-flow-item, .case-flow-item:not(:first-child) { min-height: 0; padding: 15px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .case-flow-item:last-child { border-bottom: 0; }
  .case-flow-item:nth-child(n+2) { border-top: 0; }
  .case-flow-item span { font-size: 15px; }
  .case-flow-item small { font-size: 13px; }
  .case-channel-grid { grid-template-columns: minmax(0,1fr); }
  .case-channel p { font-size: 14px; }
  .case-system { padding: 55px 12px; }
  .case-system-heading { padding-inline: 7px; }
  .case-system-heading h2 { font-size: clamp(38px,10vw,53px); }
  .case-system-heading > p { font-size: 15px; }
  .system-map-topline { padding: 11px; font-size: 8px; }
  .system-signal-band { padding: 14px 11px; }
  .system-band-label { align-items: flex-start; }
  .system-band-label b { font-size: 14px; }
  .system-signal-pills span { font-size: 12px; padding: 6px 7px; }
  .system-main-route { grid-template-columns: minmax(0,1fr); padding: 10px; gap: 9px; }
  .system-stage { padding: 14px; }
  .system-stage-glyph { min-height: 72px; }
  .system-stage h3 { font-size: 22px; }
  .system-stage p { font-size: 14px; }
  .system-route-break { padding: 2px 10px 13px; font-size: 8px; }
  .system-channels-panel { margin: 0 10px 13px; }
  .system-panel-heading { grid-template-columns: 1fr; gap: 7px; padding: 14px; }
  .system-panel-heading h3 { font-size: 24px; }
  .system-channel-cards { grid-template-columns: minmax(0,1fr); }
  .system-channel { border-right: 0; border-bottom: 1px solid var(--line); padding: 15px; }
  .system-channel:last-child { border-bottom: 0; }
  .system-channel:nth-child(3) { border-bottom: 1px solid var(--line); }
  .system-channel h4 { font-size: 20px; }
  .system-channel p { font-size: 14px; }
  .system-crm-spine { grid-template-columns: 34px minmax(0,1fr); gap: 10px; padding: 13px; }
  .crm-spine-icon { width: 33px; height: 33px; font-size: 20px; }
  .crm-spine-copy > strong { font-size: 18px; }
  .crm-spine-copy > small { font-size: 12px; }
  .crm-stack { grid-column: 1/-1; justify-content: flex-start; }
  .crm-stack b { font-size: 8px; }
  .system-outcome-route { padding: 2px 10px 14px; }
  .system-outcome { padding: 15px; }
  .system-outcome h3 { font-size: 23px; }
  .system-outcome p { font-size: 14px; }
  .system-rfp-branch { margin: 0 10px 13px; padding: 13px; }
  .rfp-branch-title { grid-template-columns: 1fr; }
  .rfp-branch-title h3 { font-size: 24px; }
  .rfp-branch-title p { grid-column: 1; font-size: 14px; }
  .rfp-branch-steps { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .rfp-branch-steps > i { display: block !important; transform: rotate(90deg); justify-self: center; }
  .rfp-branch-steps > div:nth-of-type(3) { grid-column: auto; }
  .rfp-branch-metric { gap: 7px; }
  .rfp-branch-metric strong { font-size: 23px; }
  .rfp-branch-metric span { width: calc(100% - 70px); margin-right: 0; font-size: 12px; }
  .system-map-foot { padding: 11px; font-size: 8px; }
  .editorial-sheet { width: 47%; height: 66%; padding: 11px; }
  .sheet-a { left: 5%; }.sheet-b { left: 26%; }.sheet-c { left: 47%; }
  .editorial-sheet b { font-size: 25px; }
  .editorial-visual-label, .response-visual-head, .posm-visual-top, .brand-visual-kicker { left: 11px; right: 11px; top: 10px; font-size: 8px; }
  .editorial-captions { left: 10px; right: 10px; bottom: 9px; font-size: 8px; }
  .response-hero-visual { padding: 52px 10px 14px; }
  .response-sheet-grid { grid-template-columns: repeat(2,minmax(0,1fr)); height: auto; }
  .response-sheet-grid > div { min-height: 91px; padding: 9px; }
  .response-sheet-grid b { font-size: 13px; }
  .response-checkline { justify-content: space-between; gap: 5px; font-size: 8px; }
  .orchestration-hero-visual { padding: 40px 10px 18px; }
  .orchestration-sources { gap: 5px; }
  .orchestration-sources > div { flex-direction: column; align-items: flex-start; gap: 7px; padding: 8px; }
  .orchestration-sources span { font-size: 8px; }
  .orchestration-core { gap: 8px; padding: 11px; }
  .orchestration-core b { font-size: 13px; }
  .orchestration-core small { font-size: 11px; }
  .orchestration-bottom { gap: 7px; font-size: 8px; }
  .brand-hero-poster { left: 5%; width: 43%; padding: 10px; }
  .brand-hero-poster strong { font-size: clamp(23px,7.5vw,36px); }
  .brand-hero-poster small, .brand-hero-poster span { font-size: 7px; }
  .brand-hero-assets { left: 54%; right: 5%; gap: 6px; }
  .brand-hero-assets div { padding: 7px; min-height: 64px; font-size: 7px; }
  .brand-hero-assets b { font-size: 22px; }
  .brand-hero-palette { left: 54%; right: 5%; gap: 4px; }
  .brand-hero-palette i { height: 8px; }
  .posm-hero-visual { padding: 48px 9px 16px; }
  .posm-visual-shell { grid-template-columns: 34px minmax(0,1fr); }
  .posm-visual-sidebar { gap: 10px; padding: 10px 4px; }
  .posm-visual-sidebar i { width: 17px; height: 17px; }
  .posm-visual-main { padding: 10px; }
  .posm-visual-title b { font-size: 14px; }
  .posm-visual-title span { font-size: 7px; }
  .posm-visual-layout { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .posm-asset-list { grid-column: 1/-1; }
  .posm-store-card i { height: 35px; margin-top: 15px; }
  .posm-asset-list b { font-size: 9px; margin-top: 8px; }
  .posm-visual-note { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]) .map-live i, html:not([data-motion-mode="full"]) .map-arrow, html:not([data-motion-mode="full"]) .crm-pulse, html:not([data-motion-mode="full"]) .glyph-monitor i, html:not([data-motion-mode="full"]) .system-link b{ animation: none !important; }
  html:not([data-motion-mode="full"]) .home-map-node, html:not([data-motion-mode="full"]) .system-stage, html:not([data-motion-mode="full"]) .system-channel, html:not([data-motion-mode="full"]) .system-outcome{ transition: none !important; }
}


/* ===== assets/css/quality-fixes.css ===== */
/* Quality pass: illustration typography, consistent card grids, and a truly continuous ticker. */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
.project-grid, .project-card, .project-art, .case-shell, .case-content-section,
.case-hero-visual, .case-stats, .case-channel-grid, .case-flow, .case-monitor-grid { min-width: 0; }

/* Repeat the exact same ticker unit three times and travel by exactly one unit. */
.ticker-track {
  width: max-content;
  min-width: 0;
  animation: ticker-loop-three 42s linear infinite;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}
.ticker-group { flex: 0 0 auto; }
@keyframes ticker-loop-three {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-33.3333333333%,0,0); }
}

/* Use a repeatable two-column system for supporting work cards. The flagship remains full-width. */
.project-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row;
  align-items: stretch;
  column-gap: clamp(14px, 1.35vw, 20px);
  row-gap: clamp(18px, 1.7vw, 24px);
}
.project-grid > .project-card:not(.project-featured):not(.project-posm) {
  display: flex;
  flex-direction: column;
  grid-column: span 6;
  min-width: 0;
  height: 100%;
}
.project-grid > .project-featured { grid-column: 1 / -1; min-width: 0; }
.project-grid > .project-posm {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-areas: "head head" "art copy" "foot foot";
  align-items: stretch;
  min-width: 0;
  height: 100%;
}
.project-posm > .project-card-head { grid-area: head; }
.project-posm > .project-art { grid-area: art; height: 100%; min-height: 330px; border-right: 1px solid var(--line); border-bottom: 0; }
.project-posm > .project-card-copy { grid-area: copy; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(24px, 3vw, 44px); }
.project-posm > .project-card-foot { grid-area: foot; }
.project-card-head, .project-card-foot { min-width: 0; gap: 12px; }
.project-card-head span, .project-card-foot > span { min-width: 0; overflow-wrap: anywhere; }
.project-card:not(.project-featured):not(.project-posm) .project-art {
  flex: 0 0 auto;
  width: 100%;
  height: clamp(270px, 25vw, 350px);
  min-height: 0;
}
.project-card:not(.project-featured) .project-card-copy { flex: 1 1 auto; min-width: 0; }
.project-card:not(.project-featured) .project-card-copy h3 { max-width: 100%; overflow-wrap: normal; word-break: normal; hyphens: none; }
.project-card:not(.project-featured) .project-card-foot { margin-top: auto; }
.project-card .tag-row { align-items: flex-start; }
.project-card .tag-row span { max-width: 100%; }

/* Whitepaper cover: fewer layers, smaller title, clear edge and predictable proportions. */
.project-card.project-whitepaper .project-art {
  display: grid;
  place-items: center;
  height: clamp(270px, 25vw, 350px);
  min-height: 0;
  padding: 24px 18px;
}
.paper-stack {
  position: relative;
  width: min(72%, 330px);
  height: 86%;
  min-height: 0;
  aspect-ratio: .74;
  isolation: isolate;
}
.stack-page {
  width: 79%;
  height: 91%;
  padding: clamp(12px, 1.2vw, 17px);
  gap: 7px;
  box-shadow: 8px 10px 0 rgba(0,0,0,.2);
  overflow: hidden;
}
.stack-page > small { font-size: 9px; letter-spacing: .07em; }
.stack-page > b {
  margin-top: clamp(12px, 1.4vw, 20px);
  font-size: clamp(21px, 2.35vw, 33px);
  line-height: .98;
  letter-spacing: -.045em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.stack-page > i:nth-of-type(1) { margin-top: 8px; }
.page-back { top: 3%; left: 1%; transform: rotate(-7deg); z-index: 1; }
.page-mid { top: 1%; left: 10%; transform: rotate(4deg); z-index: 2; }
.page-front { top: 4%; left: 18%; transform: rotate(-1deg); z-index: 3; }
.page-front .paper-brand { font-size: 29px; }
.page-front > b { font-size: clamp(23px, 2.55vw, 36px); line-height: .98; }
.page-front > small { max-width: 100%; margin-top: 7px; font-size: 8px; line-height: 1.4; }
.page-front .page-stamp { right: 8px; bottom: 10px; font-size: 8px; }
.paper-side-index { right: 3%; bottom: 7%; font-size: 12px; line-height: 1.45; }
.paper-side-index span { font-size: 8px; }
.project-whitepaper:hover .page-back { transform: translate(-5px,3px) rotate(-9deg); }
.project-whitepaper:hover .page-mid { transform: translate(5px,-3px) rotate(5deg); }
.project-whitepaper:hover .page-front { transform: translate(0,-5px) rotate(0deg); }

/* Brand poster: never split MEMORABLE across a line or outside the printed area. */
.brand-stage {
  width: min(100%, 680px);
  max-width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px clamp(12px, 2vw, 22px);
}
.brand-poster {
  width: min(100%, 270px);
  max-width: 100%;
  min-width: 0;
  padding: clamp(12px, 1.35vw, 17px);
  aspect-ratio: .72;
}
.brand-poster b {
  max-width: 100%;
  font-size: clamp(23px, 2.4vw, 34px);
  line-height: .94;
  letter-spacing: -.055em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.brand-poster span, .brand-poster small { position: relative; z-index: 1; font-size: 8px; line-height: 1.45; }
.brand-poster b { position: relative; z-index: 1; }
.brand-poster i { z-index: 0; }
.brand-swatches { grid-template-columns: repeat(2, clamp(30px, 3.5vw, 44px)); gap: 7px; min-width: 0; }
.brand-swatches i { width: 100%; }
.brand-format-cards { width: 100%; grid-column: 1 / -1; gap: 8px; margin-top: 0; }
.brand-format-cards div { min-width: 0; padding: 9px; }

/* Case-study editorial sheets: deliberate spacing instead of a chaotic pile. */
.case-hero-visual { overflow: hidden; }
.editorial-hero-visual, .brand-hero-visual {
  height: clamp(300px, 30vw, 400px);
  min-height: 0;
}
.editorial-sheet {
  top: 50%;
  width: clamp(175px, 17vw, 228px);
  height: 70%;
  padding: clamp(12px, 1.2vw, 16px);
  overflow: hidden;
  box-shadow: 8px 10px 0 rgba(0,0,0,.2);
}
.editorial-sheet small { font-size: 9px; }
.editorial-sheet b {
  margin-top: clamp(14px, 1.8vw, 24px);
  font-size: clamp(22px, 2.45vw, 34px);
  line-height: .98;
  letter-spacing: -.045em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.sheet-a { left: 22%; z-index: 1; transform: translateY(-50%) rotate(-7deg); }
.sheet-b { left: 38%; z-index: 2; transform: translateY(-50%) rotate(4deg); }
.sheet-c { left: 54%; z-index: 3; transform: translateY(-50%) rotate(-1deg); }
.editorial-hero-visual:hover .sheet-a { transform: translate(-5px, calc(-50% + 3px)) rotate(-9deg); }
.editorial-hero-visual:hover .sheet-b { transform: translate(5px, calc(-50% - 3px)) rotate(5deg); }
.editorial-hero-visual:hover .sheet-c { transform: translateY(calc(-50% - 5px)) rotate(0); }

.brand-hero-poster {
  top: 50%;
  left: 13%;
  width: clamp(175px, 20vw, 275px);
  height: 70%;
  padding: clamp(12px, 1.4vw, 17px);
  transform: translateY(-50%) rotate(-3deg);
}
.brand-hero-poster strong {
  max-width: 100%;
  font-size: clamp(22px, 2.45vw, 34px);
  line-height: .98;
  letter-spacing: -.055em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.brand-hero-visual:hover .brand-hero-poster { transform: translateY(calc(-50% - 5px)) rotate(0); }
.brand-hero-assets { left: 45%; right: 7%; gap: 9px; }
.brand-hero-assets div { min-width: 0; min-height: 76px; padding: 11px; }
.brand-hero-assets div > span { overflow-wrap: normal; word-break: normal; font-size: 9px; }
.brand-hero-palette { left: 45%; right: 7%; gap: 7px; }

/* Align all statistic and explanatory card grids and keep every item contained. */
.case-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
}
.case-stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  height: 100%;
  padding: clamp(20px, 2vw, 28px) clamp(16px, 2vw, 28px);
}
.case-stat strong {
  font-size: clamp(25px, 2.7vw, 40px);
  line-height: 1.08;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.case-stat span { font-size: 14px; line-height: 1.65; overflow-wrap: break-word; }
.case-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.case-flow-item { min-width: 0; overflow-wrap: break-word; }
.case-channel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.case-channel { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.case-channel h3 { overflow-wrap: normal; word-break: normal; }
.case-channel p { flex: 1 1 auto; }
.case-monitor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.case-monitor-card { min-width: 0; height: 100%; }
.case-section-body, .case-section-body > *, .case-section-label { min-width: 0; }

@media (max-width: 900px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-grid > .project-featured, .project-grid > .project-posm { grid-column: 1 / -1; }
  .project-card:not(.project-featured):not(.project-posm) .project-art { height: 285px; }
  .project-card.project-whitepaper .project-art { height: 285px; }
  .brand-poster b { font-size: clamp(22px, 3vw, 30px); }
  .paper-stack { width: min(78%, 300px); }
  .stack-page > b, .page-front > b { font-size: clamp(22px, 3vw, 32px); }
  .editorial-sheet { width: 20%; min-width: 155px; }
  .sheet-a { left: 18%; }
  .sheet-b { left: 35%; }
  .sheet-c { left: 52%; }
  .editorial-sheet b { font-size: clamp(21px, 2.6vw, 30px); }
  .brand-hero-poster { width: clamp(165px, 24vw, 230px); }
  .brand-hero-poster strong { font-size: clamp(21px, 3vw, 30px); }
  .case-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .ticker-track { animation-duration: 32s; }
  .project-grid { grid-template-columns: minmax(0, 1fr); }
  .project-grid > .project-featured, .project-grid > .project-posm,
  .project-grid > .project-card:not(.project-featured):not(.project-posm) { grid-column: 1 / -1; }
  .project-grid > .project-posm {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "art" "copy" "foot";
  }
  .project-posm > .project-art { min-height: 0; height: 285px; border-right: 0; border-bottom: 1px solid var(--line); }
  .project-posm > .project-card-copy { padding: 22px 18px; }
  .project-card-head, .project-card-foot { font-size: 9px; line-height: 1.45; }
  .project-card:not(.project-featured):not(.project-posm) .project-art { height: 270px; }
  .project-card.project-whitepaper .project-art { height: 270px; padding: 18px 12px; }
  .paper-stack { width: min(77%, 250px); height: 84%; }
  .stack-page { padding: 10px; gap: 5px; }
  .stack-page > small { font-size: 7px; }
  .stack-page > b { margin-top: 12px; font-size: clamp(19px, 6vw, 25px); line-height: 1; }
  .page-front .paper-brand { font-size: 24px; }
  .page-front > b { font-size: clamp(21px, 6.4vw, 27px); line-height: 1; }
  .page-front > small { font-size: 7px; }
  .paper-side-index { right: 1%; bottom: 4%; font-size: 10px; }
  .brand-art { padding: 14px; }
  .brand-stage { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 10px; }
  .brand-poster { width: min(100%, 250px); padding: 10px; }
  .brand-poster b { font-size: clamp(20px, 6vw, 27px); line-height: .98; letter-spacing: -.06em; }
  .brand-poster span, .brand-poster small { font-size: 7px; }
  .brand-swatches { grid-template-columns: repeat(2, 30px); gap: 5px; }
  .brand-format-cards { gap: 5px; }
  .brand-format-cards div { min-height: 55px; padding: 6px; font-size: 8px; }
  .brand-format-cards b { font-size: 19px; }
  .case-stats { grid-template-columns: minmax(0, 1fr); }
  .case-stat { display: grid; grid-template-columns: minmax(90px, .65fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .case-stat:last-child { border-bottom: 0; }
  .case-stat strong { font-size: clamp(24px, 6vw, 30px); }
  .case-stat span { font-size: 13px; }
  .case-channel-grid, .case-monitor-grid { grid-template-columns: minmax(0, 1fr); }
  .case-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editorial-hero-visual, .brand-hero-visual { height: 290px; }
  .editorial-sheet { top: 50%; width: 39%; min-width: 0; height: 68%; padding: 9px; }
  .sheet-a { left: 4%; transform: translateY(-50%) rotate(-6deg); }
  .sheet-b { left: 29%; transform: translateY(-50%) rotate(3deg); }
  .sheet-c { left: 54%; transform: translateY(-50%) rotate(-1deg); }
  .editorial-sheet b { margin-top: 15px; font-size: clamp(17px, 5.4vw, 23px); line-height: 1; letter-spacing: -.04em; }
  .editorial-hero-visual:hover .sheet-a { transform: translate(-3px, calc(-50% + 2px)) rotate(-7deg); }
  .editorial-hero-visual:hover .sheet-b { transform: translate(3px, calc(-50% - 2px)) rotate(4deg); }
  .editorial-hero-visual:hover .sheet-c { transform: translateY(calc(-50% - 3px)) rotate(0); }
  .editorial-captions { gap: 5px; left: 10px; right: 10px; font-size: 7px; }
  .brand-hero-poster { top: 50%; left: 4%; width: 43%; height: 69%; padding: 9px; transform: translateY(-50%) rotate(-3deg); }
  .brand-hero-poster strong { font-size: clamp(18px, 5.5vw, 25px); line-height: 1; letter-spacing: -.055em; }
  .brand-hero-visual:hover .brand-hero-poster { transform: translateY(calc(-50% - 3px)) rotate(0); }
  .brand-hero-assets { left: 53%; right: 4%; top: 23%; gap: 5px; }
  .brand-hero-assets div { padding: 6px; min-height: 58px; font-size: 7px; }
  .brand-hero-assets div > span { font-size: 7px; }
  .brand-hero-assets b { font-size: 20px; }
  .brand-hero-palette { left: 53%; right: 4%; bottom: 13%; gap: 4px; }
  .brand-hero-palette i { height: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]) .ticker-track{ animation: none !important; transform: none !important; }
  html:not([data-motion-mode="full"]) .stack-page, html:not([data-motion-mode="full"]) .editorial-sheet, html:not([data-motion-mode="full"]) .brand-poster, html:not([data-motion-mode="full"]) .brand-hero-poster{ transition: none !important; }
}
/* Keep the headline on the light field; the dark lower field is reserved for the footer label. */
.brand-poster { background: linear-gradient(145deg, #d9f36b 0%, #a7b66e 70%, #1f2927 70% 100%); }
.brand-hero-poster { background: linear-gradient(145deg, #d9f36b 0%, #a7b66e 68%, #1d2925 68% 100%); }
/* Separate the cover wordmark and content stamp from generic page-number/rule styles. */
.page-front > .paper-brand {
  display: block;
  margin-top: 0;
  font: 800 clamp(25px, 2.1vw, 30px)/1 var(--display);
  letter-spacing: -.08em;
}
.page-front > .page-stamp {
  display: block;
  width: auto;
  height: auto;
  line-height: 1.25;
}
@media (max-width: 620px) {
  .page-front > .paper-brand { font-size: 23px; }
}


/* ===== assets/css/hero-ascii.css ===== */
/* Hero composition: restrained left-aligned identity + large, undistorted ASCII portrait on the right. */
.hero {
  position: relative;
  display: grid;
  place-items: center stretch;
  padding: clamp(36px, 5vh, 58px) var(--page-gutter) 62px;
  min-height: max(710px, calc(100svh - var(--header-height)));
  overflow: clip;
  isolation: isolate;
}

/* Keep the drawing surface architectural, not a pile of floating cards. */
.hero-canvas { z-index: -1; }
.hero-grid-lines {
  opacity: .15;
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse at 66% 50%, #000 0%, transparent 75%);
}
.hero-orbit { display: none !important; }
.hero-tile { display: none !important; }

.hero-main-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  align-items: center;
  gap: clamp(18px, 2.2vw, 38px);
  width: min(100%, 1540px);
  min-width: 0;
  margin: 0 auto;
  padding: 0 clamp(20px, 2.8vw, 48px) 12px clamp(22px, 3.2vw, 54px);
}
.hero-center {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 760px;
  min-width: 0;
  margin: 0;
  text-align: left;
}
.hero-center .kicker {
  justify-content: flex-start;
  margin-bottom: clamp(12px, 1.35vw, 20px);
}
.hero-title {
  width: max-content;
  max-width: 100%;
  font-size: clamp(78px, 8vw, 140px);
  letter-spacing: -.075em;
  line-height: .91;
  text-align: left;
  white-space: nowrap;
}
.hero-subtitle {
  max-width: 100%;
  margin-top: clamp(16px, 1.7vw, 25px);
  font-size: clamp(24px, 2.3vw, 38px);
  line-height: 1.17;
  text-wrap: pretty;
}
.hero-lede {
  max-width: 535px;
  margin: 18px 0 0;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.8;
  text-align: left;
}
.hero-buttons { justify-content: flex-start; margin-top: clamp(20px, 2vw, 28px); }
.hero-meta {
  justify-content: flex-start;
  max-width: 100%;
  margin-top: clamp(24px, 2.5vw, 34px);
  font-size: 9px;
  line-height: 1.8;
}

/* The ASCII art is kept as preformatted text in a true monospace face. No horizontal
   scaling or wrapping: each source character remains a consistent grid cell. */
.hero-ascii-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-self: center;
  width: calc(100% + clamp(24px, 3.5vw, 56px));
  min-width: 0;
  margin-right: calc(0px - clamp(24px, 3.5vw, 56px));
  height: clamp(500px, calc(100svh - 155px), 790px);
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 52% 45%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 58%),
    radial-gradient(ellipse at 54% 62%, color-mix(in srgb, var(--green) 8%, transparent), transparent 69%);
  mask-image: radial-gradient(ellipse at 53% 50%, #000 42%, rgba(0,0,0,.88) 68%, transparent 99%);
  -webkit-mask-image: radial-gradient(ellipse at 53% 50%, #000 42%, rgba(0,0,0,.88) 68%, transparent 99%);
}
.hero-ascii-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .22;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 74%);
}
.hero-ascii-wrap::after {
  content: "";
  position: absolute;
  inset: -35% 0 auto;
  height: 24%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 5%, transparent), transparent);
  pointer-events: none;
  animation: ascii-scan 14s ease-in-out infinite;
}
.hero-ascii-label,
.hero-ascii-footer { display: none !important; }
.hero-ascii-art {
  position: relative;
  z-index: 1;
  display: block;
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0;
  color: #aabac7;
  opacity: .40;
  font-family: "Share Tech Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;
  font-size: clamp(6px, .62vw, 10px);
  font-weight: 400;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  line-height: 1.10;
  letter-spacing: 0;
  white-space: pre;
  text-align: left;
  text-shadow: 0 0 18px rgba(110, 160, 190, .10);
  transform: translate3d(var(--ascii-pointer-x, 0px), var(--ascii-scroll-shift, 0px), 0) scale(var(--ascii-scroll-scale, 1));
  transform-origin: center;
  will-change: transform;
  user-select: none;
}
.hero-bottom { z-index: 4; }

@keyframes ascii-scan {
  0%, 12% { transform: translateY(0); opacity: 0; }
  24% { opacity: .7; }
  70% { opacity: .38; }
  100% { transform: translateY(560%); opacity: 0; }
}

@media (min-width: 1550px) {
  .hero-main-layout { grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); }
  .hero-title { font-size: clamp(126px, 8vw, 148px); }
  .hero-ascii-wrap { height: clamp(620px, calc(100svh - 125px), 840px); }
  .hero-ascii-art { font-size: clamp(8.5px, .62vw, 10.6px); }
}
@media (max-width: 1180px) {
  .hero-main-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
    gap: 16px;
    padding-right: 28px;
    padding-left: 22px;
  }
  .hero-title { font-size: clamp(70px, 7.9vw, 106px); }
  .hero-subtitle { font-size: clamp(22px, 2.5vw, 31px); }
  .hero-ascii-wrap { height: clamp(420px, calc(100svh - 270px), 600px); width: 100%; margin-right: 0; }
  .hero-ascii-art { font-size: clamp(4.5px, .52vw, 6.3px); }
}
@media (max-width: 900px) {
  .hero { min-height: max(710px, calc(100svh - var(--header-height))); padding-right: 24px; padding-left: 24px; }
  .hero-main-layout { grid-template-columns: minmax(0, 1fr) minmax(0, .76fr); gap: 10px; padding-right: 12px; padding-left: 12px; }
  .hero-title { font-size: clamp(62px, 7.5vw, 82px); }
  .hero-subtitle { font-size: clamp(20px, 2.5vw, 25px); }
  .hero-lede { font-size: 13px; }
  .hero-buttons { gap: 8px; }
  .hero-buttons .button { padding: 0 11px; gap: 12px; font-size: 7px; }
  .hero-ascii-wrap { height: 420px; width: 100%; margin-right: 0; }
  .hero-ascii-art { font-size: clamp(3.8px, .48vw, 4.8px); }
  .hero-meta { gap: 5px 8px; font-size: 7px; }
}
@media (max-width: 700px) {
  .hero { min-height: max(770px, calc(100svh - var(--header-height))); padding: 30px 20px 78px; align-items: start; }
  .hero-main-layout { display: block; width: 100%; min-height: 650px; padding: 104px 0 50px; margin: 0; }
  .hero-center { max-width: 610px; margin: 0; text-align: left; }
  .hero-center .kicker { justify-content: flex-start; font-size: 8px; }
  .hero-title { font-size: clamp(68px, 16.5vw, 112px); }
  .hero-subtitle { max-width: 540px; margin-top: 18px; font-size: clamp(23px, 5.9vw, 32px); }
  .hero-lede { max-width: 410px; margin: 15px 0 0; font-size: 14px; line-height: 1.7; }
  .hero-buttons { justify-content: flex-start; gap: 8px; margin-top: 20px; }
  .hero-buttons .button { min-height: 40px; padding: 0 11px; gap: 11px; font-size: 7px; }
  .hero-meta { justify-content: flex-start; max-width: 350px; margin-top: 20px; gap: 5px 8px; font-size: 7px; }
  .hero-ascii-wrap {
    position: absolute;
    z-index: 1;
    top: 20px;
    right: -16%;
    bottom: 55px;
    left: auto;
    width: 86%;
    height: auto;
    opacity: .40;
    mask-image: linear-gradient(90deg, transparent 0%, transparent 15%, #000 45%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 15%, #000 45%, #000 100%);
  }
  .hero-ascii-art { font-size: clamp(3.2px, .76vw, 5.1px); }
  .hero-bottom { right: 18px; left: 18px; }
  .hero-bottom span:first-child { max-width: 150px; }
}
@media (max-width: 390px) {
  .hero { padding-right: 16px; padding-left: 16px; }
  .hero-main-layout { padding-top: 102px; }
  .hero-title { font-size: clamp(64px, 16.8vw, 78px); }
  .hero-subtitle { font-size: 23px; }
  .hero-buttons { flex-wrap: wrap; }
  .hero-meta { max-width: 290px; }
  .hero-ascii-wrap { right: -25%; width: 92%; margin-right: 0; opacity: .32; }
  .hero-ascii-art { font-size: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]) .hero-ascii-wrap::after{ animation: none !important; }
  html:not([data-motion-mode="full"]) .hero-ascii-art{ transform: none !important; }
}


/* Desktop hero vertical balance: lift the intro and portrait together so the upper
   part of the hero is purposeful rather than an empty band. */
@media (min-width: 901px) {
  .hero-main-layout {
    transform: translate3d(0, clamp(-118px, -13vh, -88px), 0);
  }
}


/* ===== assets/css/ascii-scrollytelling.css ===== */
/* Scroll-story for the ASCII hero. The scene pins while glyphs reorganise. */
.hero {
  display: block !important;
  height: 175svh;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border-bottom: 0 !important;
  isolation: auto !important;
}
.hero-stage {
  position: sticky;
  top: var(--header-height);
  height: calc(100svh - var(--header-height));
  min-height: 620px;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.hero-canvas {
  z-index: 0 !important;
  opacity: 1;
}
.hero-grid-lines {
  opacity: var(--ascii-grid-opacity, .13) !important;
  background-size: 42px 42px !important;
  transition: none !important;
  will-change: opacity;
}
.hero-ascii-particles {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  transform: translate3d(var(--ascii-pointer-x, 0px), 0, 0);
  transform-origin: center;
  will-change: transform;
}
.hero-ascii-canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}
.ascii-particle {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  margin: 0;
  padding: 0;
  color: #aabac7;
  font-family: "Geist Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;
  font-size: var(--ascii-font-size, 9px);
  font-weight: 400;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  letter-spacing: 0;
  line-height: var(--ascii-line-height, 9.2px);
  white-space: pre;
  user-select: none;
  transform-origin: 0 0;
  text-shadow: 0 0 12px rgba(110, 160, 190, .09);
}
.hero-ascii-wrap {
  background:
    radial-gradient(ellipse at 52% 45%, color-mix(in srgb, var(--blue) 7%, transparent), transparent 58%),
    radial-gradient(ellipse at 54% 62%, color-mix(in srgb, var(--green) 7%, transparent), transparent 69%) !important;
}
.hero-ascii-wrap::after { display: none !important; }
.hero-ascii-wrap::before {
  opacity: .10 !important;
}
.hero-stage.ascii-enhanced .hero-ascii-art {
  visibility: hidden !important;
}
.hero-stage.ascii-enhanced .hero-ascii-particles {
  opacity: 1;
}
.hero-main-layout {
  z-index: 2 !important;
  height: 100%;
}
.hero-center { z-index: 3 !important; }
.hero-bottom { z-index: 4; }
.hero-coordinate { z-index: 4; }

@media (min-width: 1550px) {
  .hero-stage { min-height: 660px; }
}
@media (max-width: 1180px) {
  .hero-stage { min-height: 600px; }
}
@media (max-width: 900px) {
  .hero { height: 165svh; }
  .hero-stage { min-height: 620px; }
}
@media (max-width: 700px) {
  .hero { height: 158svh; }
  .hero-stage {
    height: max(760px, calc(100svh - var(--header-height)));
    min-height: 760px;
  }
  .hero-main-layout { height: 100%; }
  .hero-ascii-particles {
    opacity: .88;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 22%, #000 78%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 22%, #000 78%, #000 100%);
  }
  .ascii-particle { text-shadow: 0 0 8px rgba(110,160,190,.07); }
}
@media (max-width: 390px) {
  .hero { height: 155svh; }
  .hero-stage { min-height: 740px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]) .hero{ height: auto !important; min-height: 0 !important; }
  html:not([data-motion-mode="full"]) .hero-stage{
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: max(760px, calc(100svh - var(--header-height))) !important;
  }
  html:not([data-motion-mode="full"]) .hero-ascii-particles{ display: none !important; }
  html:not([data-motion-mode="full"]) .hero-ascii-art{ visibility: visible !important; transform: none !important; }
}
/* Fine desktop alignment: nudge the portrait slightly left without changing grid geometry. */
@media (min-width: 901px) {
  .hero-ascii-wrap { transform: translateX(-10px); }
}

/* Keep the source preview and its animated glyph layer on the exact same character grid. */
.hero-ascii-art {
  font-family: "Share Tech Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace !important;
  font-feature-settings: "liga" 0, "calt" 0 !important;
  font-variant-ligatures: none !important;
}


/* ===== assets/css/ascii-dissolve-title.css ===== */
/* Self-hosted ASCII wordmark. The left inset matches the first non-space glyph cell. */
.hero-title-dissolve {
  --dissolve-font-size: clamp(9px, 1.02vw, 14px);
  position: relative;
  display: block;
  width: min(100%, 64ch);
  max-width: 100%;
  min-width: 0;
  height: 14.04em;
  margin: 0;
  padding: 0;
  overflow: visible;
  font-size: var(--dissolve-font-size);
  line-height: 1.08;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
}
.hero-title-dissolve .ascii-dissolve-output {
  position: relative;
  display: block;
  width: 64ch;
  max-width: 100%;
  height: 14.04em;
  margin: 0;
  padding: 0;
  color: var(--ink, #f0f0ec);
  font-family: "Geist Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;
  font-size: var(--dissolve-font-size);
  font-weight: 400;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: left;
  white-space: pre;
  opacity: 0;
  overflow: hidden;
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent, #d8f568) 16%, transparent);
  transition: opacity .28s ease;
}
.hero-title-dissolve.ascii-dissolve-ready .ascii-dissolve-output { opacity: 1; }
.hero-title-dissolve .hero-title-fallback {
  position: absolute;
  z-index: 2;
  top: calc(var(--dissolve-font-size) * 4.65);
  left: calc(var(--dissolve-font-size) * .62);
  display: block;
  width: max-content;
  max-width: calc(100% - var(--dissolve-font-size));
  padding: 0;
  margin: 0;
  color: var(--ink, #f0f0ec);
  font-family: "Archivo", Inter, sans-serif;
  font-size: clamp(76px, 8vw, 136px);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: .91;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: ascii-fallback-delayed .62s ease 2.35s both;
}
.hero-title-dissolve .hero-period { color: var(--accent, #d8f568); }
@keyframes ascii-fallback-delayed {
  0% { opacity: 0; visibility: hidden; }
  1% { opacity: 0; visibility: visible; }
  100% { opacity: 1; visibility: visible; }
}
.hero-title-dissolve.ascii-dissolve-ready .hero-title-fallback {
  animation: none;
  opacity: 0;
  visibility: hidden;
}
.hero-title-dissolve.ascii-dissolve-failed .ascii-dissolve-output { opacity: 0; }
.hero-title-dissolve.ascii-dissolve-failed .hero-title-fallback {
  animation: ascii-fallback-delayed .62s ease .45s both;
  opacity: 0;
  visibility: hidden;
}
@media (min-width: 1550px) {
  .hero-title-dissolve { --dissolve-font-size: clamp(12px, .9vw, 15px); }
  .hero-title-dissolve .hero-title-fallback { font-size: clamp(100px, 8vw, 145px); }
}
@media (max-width: 1180px) {
  .hero-title-dissolve { --dissolve-font-size: clamp(8px, .94vw, 11px); }
  .hero-title-dissolve .hero-title-fallback { font-size: clamp(68px, 7.8vw, 100px); }
}
@media (max-width: 900px) {
  .hero-title-dissolve { --dissolve-font-size: clamp(7px, .93vw, 9px); height: 14.04em; }
  .hero-title-dissolve .hero-title-fallback { font-size: clamp(62px, 7.5vw, 82px); }
}
@media (max-width: 700px) {
  .hero-title-dissolve { --dissolve-font-size: clamp(12px, 3.8vw, 17px); width: 100%; height: 14.04em; }
  .hero-title-dissolve .ascii-dissolve-output { width: 64ch; max-width: 100%; }
  .hero-title-dissolve .hero-title-fallback {
    top: calc(var(--dissolve-font-size) * 4.65);
    font-size: clamp(62px, 16.2vw, 106px);
  }
}
@media (max-width: 390px) {
  .hero-title-dissolve { --dissolve-font-size: 12px; }
  .hero-title-dissolve .hero-title-fallback { font-size: clamp(58px, 15.6vw, 72px); }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]) .hero-title-dissolve .ascii-dissolve-output{ display: none; transition: none; }
  html:not([data-motion-mode="full"]) .hero-title-dissolve .hero-title-fallback{ animation-duration: .45s; animation-delay: 2.35s; }
}


/* ===== assets/css/section-markers.css ===== */
/* Section index markers: make the numbered navigation legible at a glance. */
.section-bar {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(0, 1.2fr) minmax(170px, .8fr);
  align-items: center;
  gap: clamp(12px, 1.8vw, 24px);
  min-height: 58px;
  padding: 0 clamp(20px, 4.2vw, 72px);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: .085em;
}

.section-bar > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  padding: 8px 12px 8px 13px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 92%);
  color: var(--accent);
  font: 600 clamp(13px, 1.12vw, 15px)/1.25 var(--mono);
  letter-spacing: .055em;
  white-space: nowrap;
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 15%, transparent);
}

.section-bar > span:nth-child(2) {
  justify-self: center;
  text-align: center;
  color: var(--muted);
  font-size: 10px;
}

.section-bar > span:last-child {
  justify-self: end;
  text-align: right;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

@media (max-width: 850px) {
  .section-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 56px;
  }
  .section-bar > span:nth-child(2) { display: none; }
  .section-bar > span:first-child {
    font-size: clamp(12px, 1.8vw, 14px);
  }
  .section-bar > span:last-child { font-size: 9px; }
}

@media (max-width: 460px) {
  .section-bar {
    min-height: 52px;
    padding-inline: 16px;
    gap: 8px;
  }
  .section-bar > span:first-child {
    min-height: 34px;
    padding: 7px 6px 7px 9px;
    border-left-width: 2px;
    font-size: clamp(11px, 3.05vw, 12.5px);
    letter-spacing: .015em;
  }
  .section-bar > span:last-child { font-size: 8px; letter-spacing: .04em; }
}

@media (max-width: 365px) {
  .section-bar > span:last-child { display: none; }
  .section-bar { grid-template-columns: minmax(0, 1fr); }
  .section-bar > span:first-child { font-size: 12px; }
}


/* Navigation labels mirror the numbered content sections on the page. */
.desktop-nav .nav-link,
.nav-contact { white-space: nowrap; }
.nav-contact[aria-current="location"] { box-shadow: inset 0 -3px var(--accent); }
.mobile-nav a.active { color: var(--ink); border-left: 2px solid var(--accent); padding-left: 10px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.mobile-nav a.active span { color: var(--accent); }
@media (max-width: 980px) and (min-width: 701px) {
  .nav-link { padding-right: 8px; padding-left: 8px; font-size: 8px; letter-spacing: .045em; }
  .nav-contact { gap: 8px; padding-right: 11px; padding-left: 11px; font-size: 8px; letter-spacing: .06em; }
  .theme-toggle { min-width: 40px; padding-right: 8px; padding-left: 8px; }
}


/* ===== assets/css/case-overlay.css ===== */
/* Selected-work case study overlay */
.case-overlay[hidden] { display: none !important; }
.case-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2vw, 28px);
  background: rgba(3, 5, 8, .48);
  -webkit-backdrop-filter: blur(0) saturate(.9);
  backdrop-filter: blur(0) saturate(.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease, backdrop-filter 360ms ease, -webkit-backdrop-filter 360ms ease, visibility 0s linear 360ms;
}
.case-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: rgba(3, 5, 8, .60);
  -webkit-backdrop-filter: blur(15px) saturate(.72);
  backdrop-filter: blur(15px) saturate(.72);
  transition: opacity 300ms ease, backdrop-filter 360ms ease, -webkit-backdrop-filter 360ms ease, visibility 0s;
}
.case-overlay-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1120px, calc(100vw - 48px));
  height: min(780px, calc(100vh - 48px));
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line-strong, #45484a) 92%, var(--accent, #d9f36b));
  background: var(--bg, #0b0c0d);
  box-shadow: 0 35px 120px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.025) inset;
  transform: translate3d(0, 22px, 0) scale(.972);
  opacity: 0;
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), opacity 280ms ease;
  will-change: transform, opacity;
}
.case-overlay.is-open .case-overlay-panel {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}
.case-overlay-header {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 94px;
  padding: 17px 20px 16px 27px;
  border-bottom: 1px solid var(--line, #303234);
  background: color-mix(in srgb, var(--panel, #111315) 94%, transparent);
}
.case-overlay-title-block { min-width: 0; }
.case-overlay-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  color: var(--faint, #777b7b);
  font: 10px/1.4 var(--mono, monospace);
  letter-spacing: .105em;
  text-transform: uppercase;
}
.case-overlay-live-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #d9f36b); box-shadow: 0 0 12px color-mix(in srgb, var(--accent, #d9f36b) 65%, transparent); }
.case-overlay-divider { color: var(--accent, #d9f36b); }
.case-overlay-header h2 {
  max-width: min(68vw, 800px);
  margin: 0;
  color: var(--ink, #f2f1ec);
  font: 600 clamp(20px, 2.2vw, 30px)/1.12 var(--display, Arial, sans-serif);
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
.case-overlay-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 17px; }
.case-overlay-fullpage {
  color: var(--muted, #a5a6a4);
  font: 10px/1.3 var(--mono, monospace);
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease;
}
.case-overlay-fullpage span { margin-left: 5px; color: var(--accent, #d9f36b); }
.case-overlay-fullpage:hover { color: var(--ink, #f2f1ec); }
.case-overlay-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line-strong, #505355);
  border-radius: 50%;
  color: var(--ink, #f2f1ec);
  background: rgba(255,255,255,.035);
  cursor: pointer;
  transition: transform 220ms ease, color 220ms ease, border-color 220ms ease, background 220ms ease;
}
.case-overlay-close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.case-overlay-close:hover { transform: rotate(90deg); color: #0b0c0d; border-color: var(--accent, #d9f36b); background: var(--accent, #d9f36b); }
.case-overlay-close:focus-visible, .case-overlay-fullpage:focus-visible { outline: 2px solid var(--accent, #d9f36b); outline-offset: 4px; }
.case-overlay-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--bg, #0b0c0d); }
.case-overlay-stage iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; background: var(--bg, #0b0c0d); opacity: 0; transition: opacity 320ms ease; }
.case-overlay-stage[data-load-state="ready"] iframe { opacity: 1; }
.case-overlay-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: var(--muted, #a5a6a4);
  font: 11px var(--mono, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: opacity 220ms ease;
}
.case-overlay-stage[data-load-state="ready"] .case-overlay-loading { opacity: 0; pointer-events: none; }
.case-loading-mark { color: var(--ink, #f2f1ec); font: 800 42px/.9 var(--display, Arial, sans-serif); letter-spacing: -.08em; }
.case-loading-mark span { color: var(--accent, #d9f36b); }
.case-overlay-loading i { position: relative; display: block; width: 100px; height: 1px; overflow: hidden; background: var(--line, #303234); }
.case-overlay-loading i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; background: var(--accent, #d9f36b); animation: case-loading-scan 1s ease-in-out infinite alternate; }
@keyframes case-loading-scan { from { transform: translateX(0); } to { transform: translateX(190%); } }
body.case-overlay-open { overflow: hidden !important; }
body.case-overlay-open .site-header { pointer-events: none; }
.project-card .case-link, .project-card .featured-cta { cursor: pointer; }
@media (max-width: 900px) {
  .case-overlay { padding: 12px; }
  .case-overlay-panel { width: calc(100vw - 24px); height: calc(100vh - 24px); }
  .case-overlay-header { min-height: 83px; padding: 13px 14px 13px 18px; gap: 12px; }
  .case-overlay-kicker { font-size: 9px; }
  .case-overlay-header h2 { font-size: clamp(19px, 3vw, 26px); }
  .case-overlay-fullpage { display: none; }
  .case-overlay-close { width: 42px; height: 42px; }
}
@media (max-width: 520px) {
  .case-overlay { padding: 8px; }
  .case-overlay-panel { width: calc(100vw - 16px); height: calc(100vh - 16px); }
  .case-overlay-header { align-items: center; padding: 12px; }
  .case-overlay-kicker { max-width: 100%; gap: 5px; font-size: 8px; }
  .case-overlay-divider, .case-overlay-kicker > span:last-child { display: none; }
  .case-overlay-header h2 { max-width: 65vw; font-size: 19px; }
  .case-overlay-close { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]) .case-overlay, html:not([data-motion-mode="full"]) .case-overlay-panel, html:not([data-motion-mode="full"]) .case-overlay iframe, html:not([data-motion-mode="full"]) .case-overlay-close, html:not([data-motion-mode="full"]) .case-overlay-loading, html:not([data-motion-mode="full"]) .case-overlay-loading i::after{ transition: none !important; animation: none !important; }
}

/* CV action and deliberately paced loading hand-off for all overlay documents. */
.case-overlay-save-pdf{display:inline-flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent,#d9f36b) 48%,var(--line-strong,#505355));background:color-mix(in srgb,var(--accent,#d9f36b) 9%,transparent);color:var(--ink,#f2f1ec);font:600 10px/1.2 var(--mono,monospace);letter-spacing:.075em;text-decoration:none;white-space:nowrap;transition:background 200ms ease,color 200ms ease,border-color 200ms ease,transform 200ms ease}
.case-overlay-save-pdf span{color:var(--accent,#d9f36b);font-size:14px}
.case-overlay-save-pdf:hover{background:var(--accent,#d9f36b);color:#0b0c0d;border-color:var(--accent,#d9f36b);transform:translateY(-1px)}
.case-overlay-save-pdf:hover span{color:#0b0c0d}
.case-overlay-save-pdf:focus-visible{outline:2px solid var(--accent,#d9f36b);outline-offset:4px}
.case-overlay-save-pdf[hidden]{display:none!important}
.case-overlay-loading{background:linear-gradient(135deg,rgba(16,19,19,.96),rgba(11,12,13,.96));opacity:1}
.case-overlay-loading>span:nth-child(2){transition:opacity 180ms ease,color 180ms ease}
.case-loading-mark{animation:case-mark-breathe 1.8s ease-in-out infinite alternate}
.case-overlay-loading i{width:124px;height:2px;background:rgba(255,255,255,.09);border-radius:2px}
.case-overlay-loading i::after{width:26%;border-radius:2px;animation:case-loading-scan 1.35s cubic-bezier(.4,0,.2,1) infinite alternate;box-shadow:0 0 10px color-mix(in srgb,var(--accent,#d9f36b) 28%,transparent)}
.case-overlay-stage[data-load-state="loading"] iframe{opacity:0;filter:blur(2px);transform:scale(.996);transition:opacity 460ms ease,filter 520ms ease,transform 520ms cubic-bezier(.2,.8,.2,1)}
.case-overlay-stage[data-load-state="ready"] iframe{opacity:1;filter:blur(0);transform:scale(1)}
@keyframes case-mark-breathe{from{opacity:.64;transform:translateY(1px)}to{opacity:1;transform:translateY(-2px)}}
@media(max-width:900px){.case-overlay-actions{gap:9px}.case-overlay-save-pdf{padding:11px 10px;font-size:9px}.case-overlay-fullpage{display:none}}
@media(max-width:520px){.case-overlay-actions{gap:7px}.case-overlay-save-pdf{padding:10px 8px;font-size:8px;letter-spacing:.025em}.case-overlay-save-pdf span{display:none}}
@media(prefers-reduced-motion:reduce){html:not([data-motion-mode="full"]) .case-overlay-save-pdf, html:not([data-motion-mode="full"]) .case-overlay-stage iframe, html:not([data-motion-mode="full"]) .case-overlay-loading>span:nth-child(2){transition:none!important}html:not([data-motion-mode="full"]) .case-loading-mark{animation:none!important}}


/* ===== assets/css/contact-cv.css ===== */
/* CV entry point beside the live domain in the contact panel. */
.contact-cv-link{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:46px;margin:14px 0 0 12px;padding:0 17px;border:1px solid var(--line-strong);color:var(--ink);background:color-mix(in srgb,var(--panel) 65%,transparent);font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:color 180ms ease,border-color 180ms ease,background 180ms ease,transform 180ms ease}
.contact-cv-link span{color:var(--accent);font-size:14px}
.contact-cv-link:hover{background:var(--accent);border-color:var(--accent);color:#11130d;transform:translateY(-2px)}
.contact-cv-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:560px){.contact-cv-link{min-height:42px;margin:14px 8px 0 0;padding:0 13px;font-size:9px}.contact-domain{margin-left:0!important}}


/* ===== assets/css/profile-ribbon-layout.css ===== */
/* Profile compacting + hero-integrated high-visibility expertise ticker. */
:root {
  --hero-ribbon-height: clamp(58px, 6.8vh, 72px);
}

/* Keep the ticker in the sticky hero scene so it fills the otherwise unused lower band. */
.hero-stage > .ticker-band {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: var(--hero-ribbon-height);
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line-strong));
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 26%, transparent 74%, color-mix(in srgb, var(--blue) 7%, transparent)),
    color-mix(in srgb, var(--panel-2) 96%, transparent);
  box-shadow: 0 -12px 35px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hero-stage > .ticker-band::before,
.hero-stage > .ticker-band::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: clamp(24px, 4vw, 56px);
  pointer-events: none;
}
.hero-stage > .ticker-band::before {
  left: 0;
  background: linear-gradient(90deg, var(--panel-2), transparent);
}
.hero-stage > .ticker-band::after {
  right: 0;
  background: linear-gradient(270deg, var(--panel-2), transparent);
}
.hero-stage > .ticker-band .ticker-track {
  align-items: center;
  height: 100%;
}
.hero-stage > .ticker-band .ticker-group {
  gap: clamp(18px, 2vw, 32px);
  padding-inline: clamp(12px, 1.7vw, 25px);
}
.hero-stage > .ticker-band .ticker-group span {
  padding: 0;
  color: color-mix(in srgb, var(--ink) 82%, var(--muted));
  font-size: clamp(11px, .82vw, 13px);
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1;
}
.hero-stage > .ticker-band .ticker-group b {
  color: var(--accent);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1;
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.hero-stage > .ticker-band:hover .ticker-track { animation-play-state: paused; }

/* Keep the footer metadata above the ribbon instead of allowing it to overlap. */
.hero-bottom {
  bottom: calc(var(--hero-ribbon-height) + 12px) !important;
}
.hero-coordinate {
  bottom: calc(var(--hero-ribbon-height) + 46px) !important;
}

/* The profile's longer copy now uses the wide canvas, reducing needless vertical height. */
.about-layout {
  max-width: min(calc(100% - 2 * var(--page-gutter)), 1380px) !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
  column-gap: clamp(38px, 5vw, 76px) !important;
  row-gap: clamp(28px, 3vw, 42px) !important;
  padding-top: clamp(72px, 7.2vw, 108px) !important;
  padding-bottom: clamp(56px, 5.5vw, 78px) !important;
}
.about-title h2 {
  max-width: 100%;
  font-size: clamp(46px, 4.6vw, 70px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.06em !important;
  text-wrap: balance;
}
.about-title h2 em {
  display: inline !important;
  font-size: 1.03em !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  padding-bottom: .05em !important;
  white-space: normal;
}
.about-copy {
  max-width: none !important;
  min-width: 0;
  padding-top: clamp(18px, 1.8vw, 28px) !important;
}
.about-copy p {
  font-size: clamp(14.5px, .98vw, 16px) !important;
  line-height: 1.68 !important;
  margin-bottom: 14px !important;
}
.about-copy .about-lede {
  max-width: 100%;
  font-size: clamp(21px, 1.7vw, 27px) !important;
  line-height: 1.38 !important;
  margin-bottom: 16px !important;
}
.about-copy .quiet-copy {
  margin-top: 17px !important;
  padding-left: 13px;
}
.about-facts div {
  gap: 8px !important;
  padding-top: 15px !important;
  padding-bottom: 17px !important;
}
.about-facts div:not(:first-child) { padding-left: clamp(12px, 1.4vw, 22px) !important; }
.about-facts span { font-size: 9px !important; }
.about-facts b { font-size: clamp(13px, 1vw, 16px) !important; line-height: 1.35; }
.scribble-note { right: 2%; bottom: -14px; }

@media (max-width: 1180px) {
  .about-layout {
    column-gap: clamp(28px, 3.4vw, 44px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, .94fr) !important;
  }
  .about-title h2 { font-size: clamp(44px, 4.9vw, 58px) !important; }
  .about-copy .about-lede { font-size: clamp(20px, 2vw, 24px) !important; }
  .hero-stage > .ticker-band .ticker-group { gap: 18px; }
}
@media (max-width: 900px) {
  :root { --hero-ribbon-height: 54px; }
  .hero-bottom { bottom: calc(var(--hero-ribbon-height) + 10px) !important; }
  .hero-coordinate { display: none !important; }
  .hero-stage > .ticker-band .ticker-group { gap: 15px; padding-inline: 12px; }
  .hero-stage > .ticker-band .ticker-group span { font-size: 10px; letter-spacing: .11em; }
  .hero-stage > .ticker-band .ticker-group b { font-size: 14px; }
  .about-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) !important;
    column-gap: 28px !important;
    padding-top: 64px !important;
    padding-bottom: 52px !important;
  }
  .about-title h2 { font-size: clamp(42px, 5vw, 50px) !important; }
  .about-copy { padding-top: 15px !important; }
  .about-copy p { font-size: 14px !important; }
  .about-copy .about-lede { font-size: 19px !important; }
  .about-facts b { font-size: 13px !important; }
}
@media (max-width: 700px) {
  :root { --hero-ribbon-height: 48px; }
  .hero-bottom { bottom: calc(var(--hero-ribbon-height) + 7px) !important; }
  .hero-stage > .ticker-band { background: color-mix(in srgb, var(--panel-2) 97%, transparent); }
  .hero-stage > .ticker-band .ticker-group { gap: 12px; padding-inline: 10px; }
  .hero-stage > .ticker-band .ticker-group span { font-size: 9px; }
  .hero-stage > .ticker-band .ticker-group b { font-size: 12px; }
  .about-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
    padding-top: 64px !important;
    padding-bottom: 50px !important;
  }
  .about-title h2 { font-size: clamp(42px, 10.5vw, 58px) !important; }
  .about-copy { padding-top: 0 !important; max-width: 660px !important; }
  .about-copy .about-lede { font-size: clamp(20px, 5vw, 24px) !important; }
  .about-copy p { font-size: 14px !important; }
  .about-facts { margin-top: 4px; }
  .scribble-note { right: 0; bottom: -12px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]) .hero-stage > .ticker-band .ticker-track{ animation: none !important; }
}


/* ===== assets/css/section-grid-background.css ===== */
/* Cursor-reactive grid backgrounds for 01 Profile, 02 Selected Work and 03 Approach only. */
.about, .work, .approach {
  position: relative;
  isolation: isolate;
}

.section-grid-base,
.section-grid-canvas,
.section-grid-matte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Static grid is deliberately low-contrast; the cursor cells are the only moving accent. */
.section-grid-base {
  z-index: 0;
  background-image:
    linear-gradient(rgba(119, 145, 154, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 145, 154, .055) 1px, transparent 1px);
  background-size: 82px 82px;
  opacity: .62;
}

.section-grid-canvas {
  z-index: 1;
  display: block;
  background: transparent;
}

/* Matte layer fades the pattern into the section colour at the edges and between content zones. */
.section-grid-matte {
  z-index: 2;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 70%, transparent) 0%,
      color-mix(in srgb, var(--bg) 38%, transparent) 16%,
      transparent 35%,
      color-mix(in srgb, var(--bg) 24%, transparent) 66%,
      color-mix(in srgb, var(--bg) 72%, transparent) 100%),
    radial-gradient(ellipse at center, transparent 20%, color-mix(in srgb, var(--bg) 42%, transparent) 100%);
}

/* Keep all textual/interactive section content in front of the matte. */
.about > .section-bar,
.about > .about-layout,
.work > .section-bar,
.work > .work-heading,
.work > .project-grid,
.work > .work-note,
.approach > .section-bar,
.approach > .approach-inner {
  position: relative;
  z-index: 3;
}

/* The five/six project cards remain opaque surfaces above the grid. */
.project-card {
  position: relative;
  z-index: 3;
  background: var(--bg);
  isolation: isolate;
}
.project-card-head,
.project-card-copy,
.project-card-foot {
  background-color: var(--bg);
}
.project-art {
  background-color: var(--panel);
}

/* The giant approach watermark is decorative and sits above the matte, below process content. */
.approach > .approach-ghost {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 700px) {
  .section-grid-base {
    background-size: 64px 64px;
    opacity: .48;
  }
  .section-grid-matte {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--bg) 76%, transparent),
        color-mix(in srgb, var(--bg) 44%, transparent) 22%,
        color-mix(in srgb, var(--bg) 28%, transparent) 55%,
        color-mix(in srgb, var(--bg) 78%, transparent)),
      radial-gradient(ellipse at center, transparent 10%, color-mix(in srgb, var(--bg) 48%, transparent) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]) .section-grid-canvas{ display: none; }
}


/* ===== assets/css/contact-card-motion.css ===== */
/* Restrained pointer-reactive tilt for the existing LET’S TALK contact panel. */
.contact-panel[data-reveal] {
  transform-style: preserve-3d;
  transform-origin: center center;
  /* Preserve the existing reveal fade while allowing the card's transform to reset smoothly. */
  transition:
    opacity 750ms cubic-bezier(.2,.7,.2,1),
    transform 460ms cubic-bezier(.2,.7,.2,1),
    border-color 320ms ease,
    box-shadow 320ms ease;
  will-change: transform;
}
.contact-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--contact-glow-x, 50%) var(--contact-glow-y, 50%),
    rgba(244, 248, 234, .085) 0,
    rgba(217, 243, 107, .035) 23%,
    transparent 62%
  );
  transition: opacity 360ms ease;
}
.contact-panel[data-reveal].is-tilting {
  transition-duration: 160ms, 140ms, 320ms, 320ms;
  transition-timing-function: ease-out, ease-out, ease, ease;
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line-strong));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .14), inset 0 0 0 1px rgba(217, 243, 107, .035);
}
.contact-panel.is-tilting .contact-glow { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .contact-panel[data-reveal] { will-change: auto; transition: none; }
  .contact-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]) .contact-panel, html:not([data-motion-mode="full"]) .contact-glow{ transition: none !important; }
  html:not([data-motion-mode="full"]) .contact-panel[data-reveal]{ will-change: auto; }
}


/* ===== assets/css/smooth-parallax.css ===== */
/* Reusable, restrained scroll parallax for the main page and embedded documents. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height, 54px) + 14px);
  -webkit-scroll-behavior: smooth;
}
body {
  overscroll-behavior-y: auto;
}
.smooth-parallax {
  --smooth-parallax-y: 0px;
  translate: 0 var(--smooth-parallax-y);
  will-change: translate;
  backface-visibility: hidden;
}
/* Keep the case-study hero's decorative orbital layer separate from its readable copy. */
.case-hero {
  --smooth-hero-orbit-y: 0px;
}
.case-hero::after {
  transform: translate3d(0, var(--smooth-hero-orbit-y), 0);
}
/* The CV sheet's fine grid glides independently from the text printed above it. */
.cv-sheet {
  --smooth-cv-grid-y: 0px;
}
.cv-sheet::before {
  transform: translate3d(0, var(--smooth-cv-grid-y), 0);
}
@media (max-width: 760px) {
  .smooth-parallax {
    will-change: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]){ scroll-behavior: auto !important; }
  html:not([data-motion-mode="full"]) .smooth-parallax{ translate: none !important; will-change: auto; }
  html:not([data-motion-mode="full"]) .case-hero::after, html:not([data-motion-mode="full"]) .cv-sheet::before{ transform: none !important; }
}
@media print {
  html { scroll-behavior: auto !important; }
  .smooth-parallax { translate: none !important; }
  .case-hero::after, .cv-sheet::before { transform: none !important; }
}
/* Keep scroll gestures inside an open document viewer instead of chaining to the page behind it. */
.case-overlay-stage { overscroll-behavior: contain; }


/* ===== assets/css/light-theme-overhaul.css ===== */
/*
  Light theme art direction: warm paper, deep graphite, botanical olive,
  and muted blueprint blue. Dark mode remains controlled by the base tokens.
*/
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f4ed;
  --panel: #fbfaf5;
  --panel-2: #e9e9df;
  --ink: #20261f;
  --muted: #566158;
  --faint: #747d72;
  --line: rgba(33, 42, 31, .14);
  --line-strong: rgba(33, 42, 31, .28);
  --accent: #536d13;
  --blue: #315bb0;
  --green: #3f7655;
  --red: #a04a37;
  --invert-bg: #20261f;
  --invert-fg: #f8f7f0;
  --ascii-ink: #fffdf5;
  --ascii-alpha-base: .88;
  --ascii-alpha-fade: .42;
  --focus-ring: #315bb0;
}

html[data-theme="light"] body {
  background: var(--bg);
  color: var(--ink);
}
html[data-theme="light"] ::selection {
  background: #dceaa5;
  color: #1f2914;
}
html[data-theme="light"] a:focus-visible,
html[data-theme="light"] button:focus-visible,
html[data-theme="light"] [tabindex]:focus-visible {
  outline-color: var(--focus-ring);
}
html[data-theme="light"] .site-header,
html[data-theme="light"] .case-nav {
  background: color-mix(in srgb, var(--bg) 91%, transparent);
  border-color: var(--line-strong);
  box-shadow: 0 5px 24px rgba(35, 43, 29, .035);
}
html[data-theme="light"] .wordmark,
html[data-theme="light"] .nav-link,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .menu-toggle {
  color: var(--ink);
}
html[data-theme="light"] .nav-link { color: var(--muted); }
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active { color: var(--ink); }
html[data-theme="light"] .nav-contact,
html[data-theme="light"] .button-invert,
html[data-theme="light"] .featured-cta {
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-color: var(--invert-bg);
}
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .menu-toggle:hover {
  background: var(--panel-2);
  color: var(--ink);
}
html[data-theme="light"] .mobile-nav {
  background: var(--panel);
  box-shadow: 0 18px 32px rgba(31, 39, 29, .12);
}
html[data-theme="light"] .scroll-progress { background: var(--accent); }

/* Instrument-like progress rail: blueprint blue, without a neon glow. */
html[data-theme="light"] .rail-percent { color: #315bb0; }
html[data-theme="light"] .rail-percent::before,
html[data-theme="light"] .rail-fill {
  background: #315bb0;
  box-shadow: 0 0 4px rgba(49, 91, 176, .15);
}
html[data-theme="light"] .rail-thumb {
  background: #315bb0;
  box-shadow: 0 0 4px rgba(49, 91, 176, .16);
}
html[data-theme="light"] .rail-chapter.is-active { color: var(--ink); }

/* Hero + ASCII portrait. The art becomes graphite/blue-grey over the paper surface. */
html[data-theme="light"] .hero,
html[data-theme="light"] .hero-stage,
html[data-theme="light"] .hero-canvas {
  background-color: var(--bg);
}
html[data-theme="light"] .hero-grid-lines {
  opacity: .36 !important;
  background-image:
    linear-gradient(rgba(43, 56, 43, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 56, 43, .085) 1px, transparent 1px);
}
html[data-theme="light"] .hero-ascii-wrap {
  background:
    radial-gradient(ellipse at 52% 45%, rgba(49, 91, 176, .055), transparent 58%),
    radial-gradient(ellipse at 54% 62%, rgba(63, 118, 85, .065), transparent 69%);
}
html[data-theme="light"] .hero-ascii-wrap::after {
  background: linear-gradient(180deg, transparent, rgba(83, 109, 19, .05), transparent);
}
html[data-theme="light"] .hero-ascii-art,
html[data-theme="light"] .ascii-particle {
  color: var(--ascii-ink);
  text-shadow: 0 0 10px rgba(91, 117, 128, .045);
}
html[data-theme="light"] .ascii-dissolve-output {
  color: var(--ink);
  text-shadow: 0 0 12px rgba(83, 109, 19, .08);
}
html[data-theme="light"] .hero-title-fallback { color: var(--ink); }
html[data-theme="light"] .hero-subtitle em { color: #435d14; }
html[data-theme="light"] .hero-bottom,
html[data-theme="light"] .hero-coordinate,
html[data-theme="light"] .hero-meta { color: var(--faint); }
html[data-theme="light"] .hero-stage > .ticker-band {
  background:
    linear-gradient(90deg, rgba(83, 109, 19, .06), transparent 27%, transparent 73%, rgba(49, 91, 176, .055)),
    color-mix(in srgb, var(--panel) 96%, transparent);
  border-top-color: color-mix(in srgb, var(--accent) 28%, var(--line-strong));
  border-bottom-color: var(--line-strong);
  box-shadow: 0 -8px 22px rgba(35, 43, 29, .055);
}
html[data-theme="light"] .hero-stage > .ticker-band::before,
html[data-theme="light"] .hero-stage > .ticker-band::after {
  background: linear-gradient(90deg, var(--panel), transparent);
}
html[data-theme="light"] .hero-stage > .ticker-band::after {
  background: linear-gradient(270deg, var(--panel), transparent);
}

/* Section canvases retain their texture, but the cursor cells become a muted sage. */
html[data-theme="light"] .section-grid-base {
  background-image:
    linear-gradient(rgba(76, 96, 72, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 96, 72, .09) 1px, transparent 1px);
  opacity: .56;
}
html[data-theme="light"] .section-grid-matte {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 78%, transparent) 0%,
      color-mix(in srgb, var(--bg) 45%, transparent) 16%,
      transparent 35%,
      color-mix(in srgb, var(--bg) 32%, transparent) 66%,
      color-mix(in srgb, var(--bg) 80%, transparent) 100%),
    radial-gradient(ellipse at center, transparent 22%, color-mix(in srgb, var(--bg) 46%, transparent) 100%);
}
html[data-theme="light"] .section-grid-canvas { opacity: .72; }

/* Profile, Selected Work, Approach and Contact surfaces. */
html[data-theme="light"] .about,
html[data-theme="light"] .work,
html[data-theme="light"] .approach,
html[data-theme="light"] .contact,
html[data-theme="light"] .site-footer {
  background-color: var(--bg);
  color: var(--ink);
}
html[data-theme="light"] .section-bar,
html[data-theme="light"] .about-facts,
html[data-theme="light"] .process-track,
html[data-theme="light"] .site-footer {
  border-color: var(--line);
}
html[data-theme="light"] .section-bar {
  background: color-mix(in srgb, var(--panel) 90%, transparent);
}
html[data-theme="light"] .about-title h2 em,
html[data-theme="light"] .work-heading h2 em,
html[data-theme="light"] .approach-heading h2 em,
html[data-theme="light"] .contact-giant em {
  color: var(--accent);
}
html[data-theme="light"] .scribble-note,
html[data-theme="light"] .about-copy .quiet-copy { color: var(--faint); }
html[data-theme="light"] .approach-ghost {
  color: color-mix(in srgb, var(--ink) 4%, transparent);
}
html[data-theme="light"] .contact-panel {
  background: #f9f8f2;
  border-color: rgba(32, 38, 31, .28);
  box-shadow: 0 22px 68px rgba(37, 43, 31, .07);
}
html[data-theme="light"] .contact-grid {
  background-image:
    linear-gradient(rgba(45, 55, 41, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 55, 41, .06) 1px, transparent 1px);
}
html[data-theme="light"] .contact-giant {
  color: rgba(32, 38, 31, .055);
}
html[data-theme="light"] .contact-giant em { color: rgba(83, 109, 19, .13); }
html[data-theme="light"] .contact-stamp {
  background: rgba(251, 250, 245, .82);
  border-color: var(--line-strong);
}
html[data-theme="light"] .contact-glow {
  background: radial-gradient(
    circle at var(--contact-glow-x, 50%) var(--contact-glow-y, 50%),
    rgba(255, 255, 255, .7) 0,
    rgba(174, 202, 91, .15) 25%,
    transparent 64%
  );
}
html[data-theme="light"] .contact-panel[data-reveal].is-tilting {
  box-shadow: 0 20px 54px rgba(37, 43, 31, .12), inset 0 0 0 1px rgba(83, 109, 19, .10);
}
html[data-theme="light"] .contact-cv-link {
  background: color-mix(in srgb, var(--panel) 90%, transparent);
}
html[data-theme="light"] .contact-cv-link:hover {
  background: var(--accent);
  color: #fffef7;
}

/* Cards and project art: bright paper surfaces around deliberate muted illustrations. */
html[data-theme="light"] .project-card {
  background: var(--panel);
  border-color: var(--line-strong);
  box-shadow: 0 8px 24px rgba(37, 43, 31, .025);
}
html[data-theme="light"] .project-card-head,
html[data-theme="light"] .project-card-copy,
html[data-theme="light"] .project-card-foot {
  background-color: var(--panel);
}
html[data-theme="light"] .project-card:hover {
  box-shadow: 0 14px 34px rgba(37, 43, 31, .07);
}
html[data-theme="light"] .project-art {
  background-color: #e8e9df;
  border-color: var(--line);
}
html[data-theme="light"] .research-art {
  background: radial-gradient(ellipse at 64% 37%, rgba(83, 109, 19, .12), transparent 48%), #e9ebe2;
}
html[data-theme="light"] .research-grid {
  background:
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(38, 50, 38, .14) 32px),
    repeating-linear-gradient(to right, transparent 0 54px, rgba(38, 50, 38, .06) 55px);
}
html[data-theme="light"] .research-bars { border-bottom-color: var(--line-strong); }
html[data-theme="light"] .research-orb { box-shadow: 0 0 28px rgba(83, 109, 19, .05); }
html[data-theme="light"] .proposal-art,
html[data-theme="light"] .brief-art {
  background: radial-gradient(ellipse at 50% 35%, rgba(83, 109, 19, .10), transparent 54%), #eaebe2;
}
html[data-theme="light"] .proposal-paper {
  background: #fffef8;
  border-color: #b7bdad;
  box-shadow: 12px 13px 0 rgba(83, 109, 19, .09);
}
html[data-theme="light"] .brief-canvas {
  background: #faf9f3;
  border-color: var(--line-strong);
}
html[data-theme="light"] .brief-label { background: rgba(255,255,255,.55); }
html[data-theme="light"] .workflow-art {
  background-color: #e8eae1;
  background-image: radial-gradient(rgba(42, 56, 43, .12) .8px, transparent .8px);
}
html[data-theme="light"] .ops-console,
html[data-theme="light"] .workflow-window {
  background: rgba(251, 250, 245, .92);
  box-shadow: 0 18px 38px rgba(36, 43, 31, .08);
}
html[data-theme="light"] .workflow-node,
html[data-theme="light"] .ops-crm,
html[data-theme="light"] .ops-channels > div {
  background: var(--panel);
  color: var(--ink);
}
html[data-theme="light"] .workflow-art .ops-top,
html[data-theme="light"] .workflow-art .ops-footer { color: var(--faint); }
html[data-theme="light"] .brand-art {
  background: radial-gradient(ellipse at 25% 70%, rgba(83, 109, 19, .13), transparent 45%), linear-gradient(135deg, #e9ebe1, #f7f6ef);
}
html[data-theme="light"] .brand-frame { border-color: rgba(37, 47, 37, .24); }
html[data-theme="light"] .brand-swatches i { border-color: rgba(37, 47, 37, .2); }
html[data-theme="light"] .posm-art {
  background: radial-gradient(ellipse at 20% 20%, rgba(83, 109, 19, .09), transparent 45%), #e9ebe2;
}
html[data-theme="light"] .posm-header { border-bottom-color: var(--line-strong); }
html[data-theme="light"] .posm-store,
html[data-theme="light"] .posm-list,
html[data-theme="light"] .posm-calendar,
html[data-theme="light"] .posm-store-card,
html[data-theme="light"] .posm-asset-list {
  background-color: rgba(251,250,245,.86);
  border-color: var(--line-strong);
}
html[data-theme="light"] .home-system-map {
  background-color: #eeeee5;
  background-image: linear-gradient(rgba(41, 54, 40, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(41, 54, 40, .11) 1px, transparent 1px);
  border-color: var(--line-strong);
}
html[data-theme="light"] .home-map-node,
html[data-theme="light"] .home-channel-row > div,
html[data-theme="light"] .home-rfp-route {
  background: rgba(251,250,245,.93);
  border-color: var(--line);
}
html[data-theme="light"] .home-map-node.signal { border-top-color: #4a66a6; }
html[data-theme="light"] .home-map-node.decide { border-top-color: #8270a8; }
html[data-theme="light"] .home-map-node.handoff { border-top-color: #4d8464; }
html[data-theme="light"] .home-rfp-route > span { color: #315bb0; }
html[data-theme="light"] .home-crm-bar {
  background: linear-gradient(90deg, rgba(83,109,19,.09), var(--panel));
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}
html[data-theme="light"] .crm-pulse {
  background: linear-gradient(90deg, transparent, rgba(83,109,19,.13), transparent);
}
html[data-theme="light"] .work-note { color: var(--muted); }

/* Full case-study pages, including those displayed inside the overlay iframe. */
html[data-theme="light"] .case-nav {
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}
html[data-theme="light"] .case-hero {
  background: radial-gradient(ellipse at 77% 30%, rgba(49,91,176,.06), transparent 38%), linear-gradient(180deg, var(--bg), var(--panel));
}
html[data-theme="light"] .case-hero::after {
  border-color: rgba(49, 91, 176, .25);
  box-shadow: 0 0 0 40px rgba(49,91,176,.025), 0 0 0 90px rgba(83,109,19,.018);
}
html[data-theme="light"] .case-system {
  background: radial-gradient(ellipse at 85% 0%, rgba(49,91,176,.045), transparent 40%), linear-gradient(180deg, var(--panel), var(--bg));
}
html[data-theme="light"] .system-map-frame {
  background-color: var(--bg);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
}
html[data-theme="light"] .system-signal-band,
html[data-theme="light"] .system-stage,
html[data-theme="light"] .system-channel,
html[data-theme="light"] .system-outcome,
html[data-theme="light"] .case-channel,
html[data-theme="light"] .case-monitor-card {
  background-color: rgba(251,250,245,.93);
}
html[data-theme="light"] .system-stage-glyph { background: #f0f0e7; }
html[data-theme="light"] .system-channel:hover { background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
html[data-theme="light"] .system-rfp-branch {
  border-color: color-mix(in srgb, #315bb0 38%, var(--line));
  background: linear-gradient(120deg, rgba(49,91,176,.055), transparent 80%), var(--bg);
}
html[data-theme="light"] .rfp-branch-title > span,
html[data-theme="light"] .rfp-branch-steps b,
html[data-theme="light"] .rfp-branch-steps > i,
html[data-theme="light"] .rfp-branch-metric strong:last-of-type { color: #315bb0; }
html[data-theme="light"] .glyph-monitor b { border-color: #315bb0; box-shadow: 0 0 0 7px rgba(49,91,176,.06); }
html[data-theme="light"] .case-note { background: #eeeee5; }
html[data-theme="light"] .case-tags span { background: rgba(251,250,245,.7); }
html[data-theme="light"] .case-flow-item { background: transparent; }
html[data-theme="light"] .case-system .system-crm-spine {
  background: linear-gradient(90deg, rgba(83,109,19,.08), var(--panel));
}

/* Overlays use a softer neutral scrim in light mode, with a bright, clean document surface. */
html[data-theme="light"] .case-overlay {
  background: rgba(31, 38, 29, .24);
  -webkit-backdrop-filter: blur(0) saturate(.98);
  backdrop-filter: blur(0) saturate(.98);
}
html[data-theme="light"] .case-overlay.is-open {
  background: rgba(31, 38, 29, .36);
  -webkit-backdrop-filter: blur(17px) saturate(.82);
  backdrop-filter: blur(17px) saturate(.82);
}
html[data-theme="light"] .case-overlay-panel {
  background: var(--bg);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line-strong));
  box-shadow: 0 30px 90px rgba(32, 42, 28, .19), 0 0 0 1px rgba(255,255,255,.65) inset;
}
html[data-theme="light"] .case-overlay-header {
  background: color-mix(in srgb, var(--panel) 97%, transparent);
}
html[data-theme="light"] .case-overlay-close {
  background: rgba(32,38,31,.025);
}
html[data-theme="light"] .case-overlay-close:hover {
  color: #fffef7;
  background: var(--accent);
  border-color: var(--accent);
}
html[data-theme="light"] .case-overlay-loading {
  background: linear-gradient(135deg, rgba(251,250,245,.98), rgba(239,239,230,.98));
  color: var(--muted);
}
html[data-theme="light"] .case-loading-mark { color: var(--ink); }
html[data-theme="light"] .case-overlay-save-pdf:hover {
  background: var(--accent);
  color: #fffef7;
  border-color: var(--accent);
}
html[data-theme="light"] .case-overlay-save-pdf:hover span { color: #fffef7; }

/* CV viewer: paper-on-paper in light mode, while preserving the original CV copy and layout. */
html[data-theme="light"] {
  --cv-paper: #fffef8;
  --cv-ink: #20261f;
  --cv-muted: #566158;
  --cv-line: #d5d9ce;
  --cv-accent: #d9e99a;
  --cv-accent-dark: #536d13;
  --cv-dark: #f5f4ed;
}
html[data-theme="light"] body:has(.cv-sheet) {
  background: #ebeae2;
  color: var(--ink);
}
html[data-theme="light"] .cv-sitebar { color: var(--muted); }
html[data-theme="light"] .cv-download {
  border-color: var(--line-strong);
  color: var(--ink);
}
html[data-theme="light"] .cv-download:hover { background: var(--accent); color: #fffef7; border-color: var(--accent); }
html[data-theme="light"] .cv-sheet {
  background: var(--cv-paper);
  color: var(--cv-ink);
  border-color: #d9dace;
  box-shadow: 0 22px 70px rgba(35,43,29,.08);
}
html[data-theme="light"].cv-in-overlay body { background: var(--bg); }

/* Ease the theme change itself without introducing a flash or moving layout geometry. */
html[data-theme="light"] body,
html[data-theme="light"] .site-header,
html[data-theme="light"] .case-nav,
html[data-theme="light"] .project-card,
html[data-theme="light"] .case-overlay-panel,
html[data-theme="light"] .contact-panel,
html[data-theme="light"] .contact-cv-link {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 220ms;
  transition-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"])[data-theme="light"] body, html:not([data-motion-mode="full"])[data-theme="light"] .site-header, html:not([data-motion-mode="full"])[data-theme="light"] .case-nav, html:not([data-motion-mode="full"])[data-theme="light"] .project-card, html:not([data-motion-mode="full"])[data-theme="light"] .case-overlay-panel, html:not([data-motion-mode="full"])[data-theme="light"] .contact-panel, html:not([data-motion-mode="full"])[data-theme="light"] .contact-cv-link{ transition-duration: 0.01ms !important; }
}

/* Light-mode hero art direction: deep botanical olive, white-only foreground.
   The rest of the site keeps its warm-paper palette. */
html[data-theme="light"] .hero {
  --bg: #35431f;
  --panel: #3d4b26;
  --panel-2: #46552d;
  --ink: #fffdf5;
  --muted: rgba(255, 253, 245, .82);
  --faint: rgba(255, 253, 245, .62);
  --line: rgba(255, 253, 245, .13);
  --line-strong: rgba(255, 253, 245, .27);
  --accent: #d9f36b;
  --blue: #8aa6ec;
  --green: #9bbf91;
  --red: #c77f6f;
  --invert-bg: #fffdf5;
  --invert-fg: #2e3a1b;
  color: #fffdf5;
  background: #35431f;
  border-bottom-color: rgba(255, 253, 245, .20);
}
html[data-theme="light"] .hero .hero-stage,
html[data-theme="light"] .hero .hero-canvas {
  background-color: #35431f !important;
}
html[data-theme="light"] .hero .hero-grid-lines {
  opacity: .42 !important;
  background-image:
    linear-gradient(rgba(255, 253, 245, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 253, 245, .055) 1px, transparent 1px) !important;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 82%);
}
html[data-theme="light"] .hero .hero-ascii-wrap {
  background:
    radial-gradient(ellipse at 52% 45%, rgba(255, 253, 245, .055), transparent 58%),
    radial-gradient(ellipse at 54% 62%, rgba(255, 253, 245, .035), transparent 69%) !important;
}
html[data-theme="light"] .hero .hero-ascii-wrap::before {
  opacity: .16 !important;
  background-image:
    linear-gradient(rgba(255, 253, 245, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 253, 245, .10) 1px, transparent 1px) !important;
}
html[data-theme="light"] .hero .hero-ascii-wrap::after {
  background: linear-gradient(180deg, transparent, rgba(217, 243, 107, .075), transparent) !important;
}
html[data-theme="light"] .hero .hero-ascii-art,
html[data-theme="light"] .hero .ascii-particle,
html[data-theme="light"] .hero .ascii-dissolve-output,
html[data-theme="light"] .hero .hero-title-fallback,
html[data-theme="light"] .hero .hero-title-dissolve .hero-period,
html[data-theme="light"] .hero .hero-subtitle,
html[data-theme="light"] .hero .hero-subtitle em,
html[data-theme="light"] .hero .hero-lede,
html[data-theme="light"] .hero .hero-center .kicker,
html[data-theme="light"] .hero .hero-meta,
html[data-theme="light"] .hero .hero-bottom,
html[data-theme="light"] .hero .hero-bottom a,
html[data-theme="light"] .hero .hero-coordinate {
  color: #fffdf5 !important;
}
html[data-theme="light"] .hero .hero-ascii-art,
html[data-theme="light"] .hero .ascii-particle {
  opacity: .86;
  text-shadow: 0 0 15px rgba(255, 253, 245, .075);
}
html[data-theme="light"] .hero .ascii-dissolve-output {
  text-shadow: 0 0 14px rgba(255, 253, 245, .12) !important;
}
html[data-theme="light"] .hero .hero-title-fallback { text-shadow: 0 8px 42px rgba(0, 0, 0, .12); }
html[data-theme="light"] .hero .live-dot,
html[data-theme="light"] .hero .hero-meta i,
html[data-theme="light"] .hero .hero-bottom b,
html[data-theme="light"] .hero .scroll-arrow {
  color: #d9f36b;
}
html[data-theme="light"] .hero .hero-ascii-footer,
html[data-theme="light"] .hero .hero-ascii-label { color: rgba(255, 253, 245, .66); }
html[data-theme="light"] .hero .button-invert {
  background: #fffdf5 !important;
  border-color: #fffdf5 !important;
  color: #2e3a1b !important;
}
html[data-theme="light"] .hero .button-outline {
  background: rgba(255, 253, 245, .035) !important;
  border-color: rgba(255, 253, 245, .45) !important;
  color: #fffdf5 !important;
}
html[data-theme="light"] .hero .button-outline:hover {
  background: rgba(255, 253, 245, .11) !important;
  border-color: #fffdf5 !important;
}
html[data-theme="light"] .hero .hero-stage > .ticker-band {
  color: #fffdf5;
  background:
    linear-gradient(90deg, rgba(217,243,107,.06), transparent 25%, transparent 75%, rgba(255,253,245,.04)),
    rgba(43, 54, 25, .95) !important;
  border-top-color: rgba(255, 253, 245, .21) !important;
  border-bottom-color: rgba(255, 253, 245, .21) !important;
  box-shadow: 0 -8px 24px rgba(15, 20, 8, .10) !important;
}
html[data-theme="light"] .hero .hero-stage > .ticker-band .ticker-group span {
  color: rgba(255, 253, 245, .91) !important;
}
html[data-theme="light"] .hero .hero-stage > .ticker-band .ticker-group b {
  color: #d9f36b !important;
}
html[data-theme="light"] .hero .hero-stage > .ticker-band::before,
html[data-theme="light"] .hero .hero-stage > .ticker-band::after {
  background: linear-gradient(90deg, #2b3619, transparent) !important;
}
html[data-theme="light"] .hero .hero-stage > .ticker-band::after {
  background: linear-gradient(270deg, #2b3619, transparent) !important;
}


/* ===== assets/css/mobile-hero.css ===== */
/*
 * Mobile-only art direction for the homepage hero.
 * Keeps the desktop layout and the existing scroll-story intact.
 */
@media (max-width: 700px) {
  .site-header { min-height: var(--header-height); }
  .site-header .nav-contact { display: none !important; }
  .site-header .wordmark { gap: 9px; padding-inline: 14px; font-size: 15px; }
  .site-header .mark { width: 24px; height: 24px; font-size: 14px; }
  .site-header .nav-tools { margin-left: auto; }
  .site-header .theme-toggle, .site-header .menu-toggle { min-width: 46px; padding-inline: 10px; }

  /* Reduce the oversized empty band while preserving the scroll-led scene. */
  .hero { height: 140svh !important; }
  .hero-stage {
    height: max(660px, calc(100svh - var(--header-height))) !important;
    min-height: 0 !important;
  }
  .hero-main-layout {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(34px, 5.5svh, 54px) 22px 70px !important;
  }
  .hero-center {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .hero-center .kicker {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start !important;
    max-width: 100%;
    margin: 0 0 20px !important;
    font-size: clamp(8px, 2.15vw, 9px) !important;
    line-height: 1.65;
    letter-spacing: .095em !important;
  }
  .hero-center .kicker .live-dot { margin-top: .65em; }

  /* Mobile keeps the original shaded renderer and its existing responsive type scale.
   Only remove the oversized fixed-size override; preserve the original glyph ramp. */
  .hero-title-dissolve {
    --dissolve-font-size: clamp(12px, 3.8vw, 17px) !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 14.04em !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    font-size: var(--dissolve-font-size) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }
  .hero-title-dissolve .ascii-dissolve-output {
    display: block !important;
    position: relative !important;
    width: 64ch !important;
    max-width: 100% !important;
    height: 14.04em !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Geist Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace !important;
    font-size: var(--dissolve-font-size) !important;
    font-weight: 400 !important;
    font-variant-ligatures: none !important;
    font-feature-settings: "liga" 0, "calt" 0 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    white-space: pre !important;
    overflow: hidden !important;
  }
  .hero-title-dissolve .hero-title-fallback { display: none !important; }

  .hero-subtitle {
    max-width: 22ch !important;
    margin: 21px 0 0 !important;
    font-size: clamp(26px, 7.1vw, 31px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance;
  }
  .hero-subtitle em { white-space: normal; }
  .hero-lede {
    width: 100%;
    max-width: 38ch !important;
    margin: 16px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    text-align: left !important;
    text-wrap: pretty;
  }

  .hero-buttons {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 340px);
    justify-content: stretch !important;
    align-items: stretch;
    gap: 9px !important;
    margin-top: 23px !important;
  }
  .hero-buttons .button {
    display: flex !important;
    width: 100% !important;
    min-width: 0;
    min-height: 49px !important;
    padding: 0 15px !important;
    gap: 16px !important;
    font-size: 9px !important;
    letter-spacing: .075em;
    white-space: nowrap;
  }
  .hero-meta {
    display: flex;
    justify-content: flex-start !important;
    align-items: center;
    max-width: 330px !important;
    margin: 22px 0 0 !important;
    gap: 7px 10px !important;
    font-size: 8px !important;
    line-height: 1.7 !important;
    letter-spacing: .08em !important;
  }
  .hero-meta i { flex: 0 0 3px; }

  .hero-bottom {
    right: 22px !important;
    bottom: 12px !important;
    left: 22px !important;
    align-items: center !important;
    gap: 12px;
    font-size: 7px !important;
    line-height: 1.55;
  }
  .hero-bottom span:first-child { max-width: 150px !important; }
  .hero-bottom a { flex: 0 0 auto; gap: 7px !important; white-space: nowrap; }
  .hero-bottom .scroll-arrow { width: 22px; height: 22px; }

  /* Recede the portrait so it adds atmosphere without fighting the text. */
  .hero-ascii-wrap {
    top: auto !important;
    right: -17% !important;
    bottom: 24px !important;
    left: auto !important;
    width: 96% !important;
    height: 38% !important;
    margin: 0 !important;
    opacity: .16 !important;
    transform: none !important;
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 22%, #000 66%, #000 100%) !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 22%, #000 66%, #000 100%) !important;
  }
  .hero-ascii-wrap .hero-ascii-art { font-size: 3px !important; opacity: .24 !important; transform: none !important; }
  .hero-ascii-particles {
    opacity: .18 !important;
    transform: none !important;
    mask-image: linear-gradient(180deg, transparent 0%, transparent 28%, rgba(0,0,0,.45) 55%, #000 100%) !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 28%, rgba(0,0,0,.45) 55%, #000 100%) !important;
  }
  .hero-grid-lines {
    opacity: .10 !important;
    background-size: 48px 48px !important;
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%) !important;
  }
  .hero-coordinate { display: none !important; }
  /* The first-screen heading is the mobile LCP candidate: paint it immediately instead of
     waiting for JavaScript to start the scroll-reveal observer. */
  .js-ready .hero-center[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

}

@media (max-width: 420px) {
  .hero-main-layout { padding-right: 18px !important; padding-left: 18px !important; }
  .hero-subtitle { max-width: 20ch !important; font-size: clamp(25px, 7.2vw, 29px) !important; }
  .hero-lede { max-width: 35ch !important; font-size: 14.5px !important; }
  .hero-buttons { width: 100%; }
  .hero-meta { max-width: 300px !important; }
  .hero-bottom { right: 18px !important; left: 18px !important; }
  .hero-bottom span:first-child { max-width: 128px !important; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
  html:not([data-motion-mode="full"]) .hero{ height: auto !important; }
  html:not([data-motion-mode="full"]) .hero-stage{ position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; }
  html:not([data-motion-mode="full"]) .hero-main-layout{ height: auto !important; }
  html:not([data-motion-mode="full"]) .hero-ascii-wrap, html:not([data-motion-mode="full"]) .hero-ascii-particles{ display: none !important; }
}


/* ===== assets/css/desktop-ascii-title.css ===== */
/* Larger animated ASCII wordmark on desktop only. Mobile retains its clean static PROMIT. */
@media (min-width: 901px) {
  .hero-title-dissolve {
    --dissolve-font-size: clamp(12px, 1.28vw, 19px) !important;
    width: min(75vw, 980px) !important;
    max-width: none !important;
    height: 14.04em !important;
    overflow: visible !important;
  }

  .hero-title-dissolve .ascii-dissolve-output {
    display: block !important;
    width: 64ch !important;
    max-width: none !important;
    height: 14.04em !important;
    font-size: var(--dissolve-font-size) !important;
    line-height: 1.08 !important;
    overflow: hidden !important;
  }

  .hero-title-dissolve .hero-title-fallback {
    font-size: clamp(104px, 10vw, 160px) !important;
  }
}


/* ===== assets/css/desktop-audit-fixes.css ===== */
/* Focused fixes for the desktop Lighthouse / Agentic Browsing report. */

/* Generic divs cannot carry aria-label without a named role. The ticker is marked role=group. */
.ticker-band[role="group"] {
  /* Keep the visual design unchanged; this rule documents the named group semantics. */
}

/* Raise the tiny footer labels above WCAG AA contrast thresholds on both themes. */
html[data-theme="dark"] .site-footer > span,
html[data-theme="dark"] .site-footer .back-top {
  color: #a2a6a8 !important;
}
html[data-theme="light"] .site-footer > span,
html[data-theme="light"] .site-footer .back-top {
  color: #555950 !important;
}

/* Avoid animating `color` on the scroll rail; opacity/translation still provide the reveal. */
.rail-chapter {
  transition: opacity .3s ease, translate .35s ease !important;
}

/* The CRM sweep previously animated `left`, which triggers layout on every frame.
   Keep the same approximate travel range using a compositor-friendly transform. */
.crm-pulse {
  left: 0 !important;
  animation-name: crm-sweep-composited !important;
  will-change: transform;
}
@keyframes crm-sweep-composited {
  from { transform: translateX(-125%); }
  to   { transform: translateX(393%); }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]) .crm-pulse{ animation: none !important; transform: translateX(0) !important; will-change: auto; }
  html:not([data-motion-mode="full"]) .rail-chapter{ transition: none !important; }
}

/* Focused portfolio UI refinements: contact actions, profile CTA, and empty blog section. */

/* Four contact destinations align as a predictable, responsive grid. */
.contact-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 24px;
}
.contact-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  color: var(--ink);
  font: 600 9px/1.35 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.contact-action > span { flex: 0 0 auto; color: var(--accent); font-size: 14px; }
.contact-action:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 5px 20px color-mix(in srgb, var(--accent) 12%, transparent);
}
.contact-action-primary {
  background: var(--invert-bg);
  border-color: var(--invert-bg);
  color: var(--invert-fg);
}
.contact-action-primary > span { color: var(--accent); }
.contact-action-primary:hover { background: var(--accent); color: #11130d; }
.contact-action:focus-visible, .profile-overlay-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* A steady, restrained glow is visible on desktop and touch devices, not only on pointer tilt. */
.contact-panel {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line-strong));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
              0 0 44px color-mix(in srgb, var(--accent) 9%, transparent),
              0 22px 64px rgba(0, 0, 0, .17);
}
.contact-panel .contact-glow { opacity: .22; }
.contact-panel[data-reveal].is-tilting {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
              0 0 62px color-mix(in srgb, var(--accent) 15%, transparent),
              0 22px 64px rgba(0, 0, 0, .2);
}
html[data-theme="light"] .contact-panel {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line-strong));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
              0 0 42px color-mix(in srgb, var(--accent) 13%, transparent),
              0 22px 64px rgba(37, 43, 31, .08);
}
html[data-theme="light"] .contact-panel[data-reveal].is-tilting {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
              0 0 58px color-mix(in srgb, var(--accent) 18%, transparent),
              0 22px 64px rgba(37, 43, 31, .12);
}

/* Make the full-profile action read as an intentional button within the profile copy. */
.about-copy .profile-overlay-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: fit-content;
  max-width: 100%;
  min-height: 46px;
  margin: 15px 0 0;
  padding: 0 15px;
  border-color: var(--line-strong);
  font: 600 9px/1.25 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
}
.about-copy .profile-overlay-cta span { color: var(--accent); font-size: 14px; }
.about-copy .profile-overlay-cta:hover { border-color: var(--accent); }

/* Empty blog index: designed as a deliberate reserved space, without placeholder articles. */
.blog { background: var(--bg); }
.blog-inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(300px, 1.1fr);
  align-items: stretch;
  gap: clamp(30px, 6vw, 90px);
  padding-top: clamp(52px, 7vw, 96px);
  padding-bottom: clamp(56px, 7vw, 100px);
}
.blog-heading { align-self: center; min-width: 0; }
.blog-heading .kicker { margin-bottom: 20px; color: var(--accent); }
.blog-heading h2 {
  max-width: 680px;
  margin: 0;
  font: 600 clamp(40px, 5vw, 68px)/1.04 var(--display);
  letter-spacing: -.06em;
  text-wrap: balance;
}
.blog-heading h2 em { font-family: var(--serif); font-weight: 400; }
.blog-heading > p:last-child { max-width: 440px; margin: 20px 0 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.blog-empty {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 260px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding: clamp(24px, 4vw, 48px);
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--line-strong));
  background: radial-gradient(ellipse at 85% 15%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 54%),
              color-mix(in srgb, var(--panel) 48%, transparent);
}
.blog-empty-index { position: absolute; top: 20px; left: 22px; color: var(--faint); font: 9px/1.4 var(--mono); letter-spacing: .12em; }
.blog-empty-mark { position: absolute; right: 20px; bottom: -24px; color: color-mix(in srgb, var(--accent) 9%, transparent); font: 800 190px/.9 var(--display); letter-spacing: -.1em; pointer-events: none; }
.blog-empty h3 { position: relative; z-index: 1; margin: 20px 0 8px; font: 600 clamp(23px, 2.8vw, 32px)/1.15 var(--display); letter-spacing: -.04em; }
.blog-empty p { position: relative; z-index: 1; max-width: 340px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.blog-empty-rule { position: relative; z-index: 1; width: 56px; height: 2px; margin-top: 24px; background: var(--accent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 30%, transparent); }

@media (max-width: 900px) {
  .blog-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .blog-heading h2 { max-width: 650px; }
  .blog-empty { min-height: 220px; }
}
@media (max-width: 700px) {
  .contact-link-grid { gap: 8px; margin-top: 20px; }
  .contact-action { min-height: 44px; padding: 9px 10px; font-size: 8px; letter-spacing: .035em; }
  .about-copy .profile-overlay-cta { min-height: 44px; margin-top: 13px; }
  .blog-inner { padding-top: 44px; padding-bottom: 54px; }
  .blog-heading h2 { font-size: clamp(36px, 10vw, 48px); }
  .blog-empty { min-height: 210px; padding: 25px 20px; }
  .blog-empty-index { left: 20px; }
}
@media (max-width: 360px) {
  .contact-action { padding-inline: 8px; font-size: 7.4px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]) .contact-action{ transition: none !important; }
}

/* Focused Portfolio UI refinements: contact actions, profile CTA, and infinite blog carousel. */

/* Four contact destinations align as a predictable, responsive grid. */
.contact-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 24px;
}
.contact-action {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 0; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--panel) 78%, transparent);
  color: var(--ink); font: 600 9px/1.35 var(--mono); letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; overflow-wrap: anywhere;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.contact-action > span { flex: 0 0 auto; color: var(--accent); font-size: 14px; }
.contact-action:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 5px 20px color-mix(in srgb, var(--accent) 12%, transparent); }
.contact-action-primary { background: var(--invert-bg); border-color: var(--invert-bg); color: var(--invert-fg); }
.contact-action-primary > span { color: var(--accent); }
.contact-action-primary:hover { background: var(--accent); color: #11130d; }
.contact-action:focus-visible, .profile-overlay-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* A steady, restrained olive glow remains visible on touch devices too. */
.contact-panel {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line-strong));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
              0 0 44px color-mix(in srgb, var(--accent) 9%, transparent), 0 22px 64px rgba(0, 0, 0, .17);
}
.contact-panel .contact-glow { opacity: .22; }
.contact-panel[data-reveal].is-tilting {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
              0 0 62px color-mix(in srgb, var(--accent) 15%, transparent), 0 22px 64px rgba(0, 0, 0, .2);
}
html[data-theme="light"] .contact-panel {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line-strong));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
              0 0 42px color-mix(in srgb, var(--accent) 13%, transparent), 0 22px 64px rgba(37, 43, 31, .08);
}
html[data-theme="light"] .contact-panel[data-reveal].is-tilting {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
              0 0 58px color-mix(in srgb, var(--accent) 18%, transparent), 0 22px 64px rgba(37, 43, 31, .12);
}

/* The full-profile action reads as a button and opens the shared overlay. */
.about-copy .profile-overlay-cta {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  width: fit-content; max-width: 100%; min-height: 46px; margin: 15px 0 0; padding: 0 15px;
  border-color: var(--line-strong); font: 600 9px/1.25 var(--mono); letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none;
}
.about-copy .profile-overlay-cta span { color: var(--accent); font-size: 14px; }
.about-copy .profile-overlay-cta:hover { border-color: var(--accent); }

/* Blog section: edge-to-edge marquee, angled cards, depth and feathered/blurred edges. */
.blog { overflow: hidden; background: var(--bg); }
.blog-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 30px;
  padding-top: clamp(58px, 7.5vw, 96px); padding-bottom: clamp(26px, 3.8vw, 46px);
}
.blog-heading-copy { min-width: 0; }
.blog-heading .kicker { margin-bottom: 18px; color: var(--accent); }
.blog-heading h2 {
  max-width: 780px; margin: 0; font: 600 clamp(40px, 5.5vw, 76px)/1.02 var(--display);
  letter-spacing: -.065em; text-wrap: balance;
}
.blog-heading h2 em { font-family: var(--serif); font-weight: 400; }
.blog-heading-copy > p:last-child { max-width: 620px; margin: 19px 0 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.blog-heading-index {
  display: flex; align-items: center; gap: 11px; flex: 0 0 auto; padding: 12px 14px;
  border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--panel) 68%, transparent); transform: rotate(3deg);
}
.blog-heading-index b { color: var(--accent); font: 800 27px/.9 var(--display); letter-spacing: -.08em; }
.blog-heading-index small { color: var(--muted); font: 8px/1.4 var(--mono); letter-spacing: .09em; }
.blog-heading-index i { color: var(--accent); font: normal 14px var(--body); }
.blog-archive-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.blog-archive-link:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  transform: rotate(0deg) translateY(-2px);
}
.blog-archive-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.blog-archive-link small { white-space: nowrap; }

.blog-carousel { position: relative; width: 100%; padding: 0 0 24px; isolation: isolate; }
.blog-carousel-viewport {
  position: relative; width: 100%; height: clamp(450px, 37vw, 520px); overflow: hidden;
  perspective: 1400px; outline: none;
}
.blog-carousel-viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.blog-carousel-viewport::before, .blog-carousel-viewport::after {
  content: ""; position: absolute; z-index: 5; top: 0; bottom: 0;
  width: clamp(52px, 11vw, 176px); pointer-events: none;
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.blog-carousel-viewport::before {
  left: 0; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 38%, transparent 100%);
}
.blog-carousel-viewport::after {
  right: 0; background: linear-gradient(270deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 38%, transparent 100%);
}
.blog-carousel-track {
  display: flex; align-items: stretch; width: max-content; height: 100%; transform: translate3d(0, 0, 0);
  animation: blog-marquee var(--blog-loop-duration, 42s) linear infinite; will-change: transform;
}
.blog-carousel-group {
  display: flex; align-items: stretch; flex: 0 0 auto; gap: clamp(16px, 2vw, 28px);
  padding: 14px 24px 34px; height: 100%;
}
.blog-card, .blog-empty-card {
  position: relative; display: flex; flex: 0 0 clamp(275px, 25vw, 345px); flex-direction: column;
  align-self: center; min-width: 0; min-height: 400px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line-strong)); background: var(--panel); color: var(--ink);
  box-shadow: 0 24px 62px rgba(0, 0, 0, .24), 0 0 32px color-mix(in srgb, var(--accent) 6%, transparent);
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), border-color 320ms ease, box-shadow 320ms ease;
}
.blog-card:nth-child(4n + 1) { transform: perspective(1300px) rotateY(6deg) rotateZ(-1.4deg) translateY(8px); }
.blog-card:nth-child(4n + 2) { transform: perspective(1300px) rotateY(-5deg) rotateZ(1.1deg) translateY(-4px); }
.blog-card:nth-child(4n + 3) { transform: perspective(1300px) rotateY(4deg) rotateZ(-.7deg) translateY(4px); }
.blog-card:nth-child(4n + 4) { transform: perspective(1300px) rotateY(-7deg) rotateZ(1.5deg) translateY(11px); }
.blog-card:hover, .blog-card:focus-within {
  z-index: 2; border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
  box-shadow: 0 28px 68px rgba(0, 0, 0, .3), 0 0 34px color-mix(in srgb, var(--accent) 11%, transparent);
  transform: perspective(1300px) rotateY(0) rotateZ(0) translateY(-7px) scale(1.015);
}
.blog-card-link { display: flex; flex: 1; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.blog-card-media {
  position: relative; display: flex; flex: 0 0 185px; flex-direction: column; justify-content: space-between;
  min-width: 0; overflow: hidden; padding: 16px 17px 14px; border-bottom: 1px solid var(--line-strong);
  background: radial-gradient(ellipse at 76% 28%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 46%),
              linear-gradient(135deg, color-mix(in srgb, var(--panel) 90%, #526045), var(--bg)); isolation: isolate;
}
.blog-card-media::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--line-strong) 44%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--line-strong) 44%, transparent) 1px, transparent 1px);
  background-size: 28px 28px; opacity: .38; mask-image: linear-gradient(135deg, #000 8%, transparent 88%);
}
.blog-card-media img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2,.8,.2,1), filter 500ms ease; }
.blog-card-media:has(img)::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(6,8,8,.3), transparent 36%, rgba(6,8,8,.74)); }
.blog-card:hover .blog-card-media img { transform: scale(1.055); filter: saturate(1.08); }
.blog-card-media-index, .blog-card-category {
  position: relative; z-index: 1; color: color-mix(in srgb, var(--ink) 82%, var(--accent));
  font: 8px/1.45 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.blog-card-category {
  align-self: flex-start; max-width: 100%; padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line-strong));
  background: color-mix(in srgb, var(--bg) 76%, transparent); overflow-wrap: anywhere;
}
.blog-card-body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 18px 19px 16px; }
.blog-card-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--faint); font: 8px/1.5 var(--mono); letter-spacing: .055em; text-transform: uppercase; }
.blog-card-body h3 { margin: 19px 0 10px; font: 600 clamp(21px, 2vw, 27px)/1.14 var(--display); letter-spacing: -.045em; text-wrap: pretty; }
.blog-card-body > p { margin: 0 0 20px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.blog-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); color: var(--faint); font: 8px/1.5 var(--mono); letter-spacing: .08em; }
.blog-card-arrow { display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; border: 1px solid var(--line-strong); color: var(--accent); font: 15px var(--body); transition: transform 220ms ease, color 220ms ease, background 220ms ease; }
.blog-card:hover .blog-card-arrow { transform: rotate(45deg); color: var(--bg); background: var(--accent); }
.blog-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.blog-empty-card { width: min(345px, calc(100% - 36px)); min-height: 410px; margin: 16px auto 28px; transform: perspective(1300px) rotateY(-6deg) rotateZ(-1deg); }
.blog-empty-media { flex-basis: 190px; }
.blog-empty-art { position: relative; display: flex; align-items: baseline; gap: 5px; margin: -2px 0 -1px; padding-left: 2px; color: color-mix(in srgb, var(--ink) 15%, transparent); line-height: .9; white-space: nowrap; }
.blog-empty-art-word { font: 800 clamp(40px, 5vw, 56px)/.9 var(--display); letter-spacing: -.095em; }
.blog-empty-art em { color: color-mix(in srgb, var(--accent) 73%, var(--ink)); font: italic clamp(37px, 4.6vw, 49px)/.9 var(--serif); letter-spacing: -.055em; }
.blog-empty-art i { position: absolute; top: 5px; right: 14%; width: 16px; height: 16px; border: 1px solid var(--accent); border-radius: 50%; box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 21%, transparent); }
.blog-empty-art b { position: absolute; right: 0; bottom: -25px; color: var(--faint); font: 7px/1.3 var(--mono); letter-spacing: .11em; }
.blog-empty-card .blog-card-body h3 { font-size: 25px; }
.blog-empty-card .blog-card-body > p { font-size: 12px; }
.blog-carousel[data-state="empty"] .blog-carousel-viewport { display: none; }
.blog-carousel[data-state="ready"] .blog-empty-card, .blog-carousel[data-state="static"] .blog-empty-card { display: none; }
.blog-carousel-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 0; }
.blog-carousel-status { margin: 0; color: var(--faint); font: 9px/1.5 var(--mono); letter-spacing: .09em; }
.blog-carousel-status span { margin: 0 6px; color: var(--accent); }
.blog-motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); color: var(--muted); background: transparent; cursor: pointer; font: 8px/1.2 var(--mono); letter-spacing: .08em; }
.blog-motion-toggle span { color: var(--accent); }
.blog-motion-toggle:hover { color: var(--ink); border-color: var(--accent); }
.blog-motion-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.blog-motion-toggle[hidden] { display: none !important; }
@keyframes blog-marquee { to { transform: translate3d(-50%, 0, 0); } }
.blog-carousel[data-paused="true"] .blog-carousel-track, .blog-carousel[data-inview="false"] .blog-carousel-track,
.blog-carousel:hover .blog-carousel-track, .blog-carousel:focus-within .blog-carousel-track { animation-play-state: paused; }
.blog-carousel[data-page-hidden="true"] .blog-carousel-track { animation-play-state: paused; }
html[data-theme="light"] .blog-card, html[data-theme="light"] .blog-empty-card {
  background: #f8f7f0; border-color: color-mix(in srgb, var(--accent) 31%, var(--line-strong));
  box-shadow: 0 24px 58px rgba(37, 43, 31, .12), 0 0 30px color-mix(in srgb, var(--accent) 10%, transparent);
}
html[data-theme="light"] .blog-card-media { background-color: #e9eadf; }
html[data-theme="light"] .blog-card-category { color: #e8edda; background: rgba(19, 23, 16, .82); }
html[data-theme="light"] .blog-empty-art-word { color: rgba(32, 38, 31, .18); }
html[data-theme="light"] .blog-empty-art em { color: #657b25; }
@media (max-width: 900px) {
  .blog-heading { align-items: start; } .blog-heading-index { display: none; }
  .blog-carousel-viewport { height: 470px; } .blog-card, .blog-empty-card { flex-basis: 305px; }
  .blog-card-body h3 { font-size: 24px; }
}
@media (max-width: 700px) {
  .contact-link-grid { gap: 8px; margin-top: 20px; }
  .contact-action { min-height: 44px; padding: 9px 10px; font-size: 8px; letter-spacing: .035em; }
  .about-copy .profile-overlay-cta { min-height: 44px; margin-top: 13px; }
  .blog-heading { padding-top: 48px; padding-bottom: 25px; }
  .blog-heading h2 { font-size: clamp(36px, 10vw, 49px); }
  .blog-heading-copy > p:last-child { font-size: 12px; }
  .blog-carousel-viewport { height: 450px; }
  .blog-carousel-group { gap: 15px; padding: 12px 15px 28px; }
  .blog-card, .blog-empty-card { flex-basis: min(78vw, 305px); min-height: 390px; }
  .blog-card-media { flex-basis: 165px; } .blog-empty-media { flex-basis: 175px; }
  .blog-card-body { padding: 16px 16px 14px; } .blog-card-body h3 { font-size: 23px; }
  .blog-carousel-viewport::before, .blog-carousel-viewport::after { width: 11vw; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
  .blog-carousel-bottom { align-items: start; padding-inline: 20px; }
  .blog-carousel-status { font-size: 8px; } .blog-empty-card { margin-top: 8px; margin-bottom: 20px; }
}
@media (max-width: 390px) {
  .blog-card, .blog-empty-card { flex-basis: 82vw; }
  .blog-carousel-bottom { gap: 8px; } .blog-carousel-status { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]) .blog-carousel[data-state="static"] .blog-carousel-viewport{ overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
  html:not([data-motion-mode="full"]) .blog-carousel-track{ animation: none !important; transform: none !important; will-change: auto; }
  html:not([data-motion-mode="full"]) .blog-card, html:not([data-motion-mode="full"]) .blog-empty-card, html:not([data-motion-mode="full"]) .blog-card-media img, html:not([data-motion-mode="full"]) .blog-card-arrow, html:not([data-motion-mode="full"]) .contact-action, html:not([data-motion-mode="full"]) .about-copy .profile-overlay-cta{ transition: none !important; }
  html:not([data-motion-mode="full"]) .blog-card, html:not([data-motion-mode="full"]) .blog-empty-card{ transform: none !important; }
}
/* BLOG OVERHAUL — FULL-WIDTH TITLE / FLEX CAROUSEL / MARKDOWN READER */
.blog { overflow: hidden; }
.blog-heading.section-inner {
  position: relative; display: block; width: 100%; max-width: none; margin: 0;
  padding: clamp(70px, 7.7vw, 106px) var(--page-gutter) clamp(24px, 3vw, 38px);
}
.blog-heading-copy { width: 100%; max-width: none; }
.blog-heading .kicker { margin: 0 0 clamp(12px, 1.5vw, 21px); }
.blog-heading h2 {
  display: flex; align-items: baseline; flex-wrap: nowrap; gap: .22em;
  width: 100%; max-width: none; margin: 0; white-space: nowrap;
  font-size: clamp(36px, 5.05vw, 82px); line-height: .99; letter-spacing: -.072em;
}
.blog-heading h2 > span, .blog-heading h2 > em { flex: 0 0 auto; }
.blog-heading h2 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.062em; }
.blog-heading-copy > p:last-child { max-width: 780px; margin-top: clamp(15px, 2vw, 25px); font-size: clamp(11px, .94vw, 13px); line-height: 1.8; }
.blog-heading-index { position: absolute; top: 58%; right: clamp(46px, 19vw, 310px); }
.blog-carousel { padding: 0 0 24px; }
.blog-carousel-viewport {
  width: 100%; height: clamp(360px, 47vh, 500px); overflow: hidden; perspective: 1400px; outline: none;
}
.blog-carousel-track {
  display: block; width: 100%; height: 100%; overflow: visible;
  transform: none !important; animation: none !important; will-change: auto;
}
.blog-carousel-group {
  position: relative; display: flex; align-items: stretch; justify-content: center;
  width: 100%; height: 100%; gap: clamp(5px, .8vw, 14px);
  padding: 8px var(--page-gutter) 20px; overflow: visible;
}
.blog-card {
  position: relative; display: block; flex: 1 1 0; align-self: stretch; min-width: 0; min-height: 0;
  height: 100%; margin: 0; overflow: hidden; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--accent) 23%, var(--line-strong));
  background: var(--panel); box-shadow: 0 22px 52px rgba(0,0,0,.25), 0 0 30px color-mix(in srgb, var(--accent) 5%, transparent);
  transform: perspective(1300px) rotateY(0) rotateZ(0) scale(.97);
  transition: flex-grow 680ms cubic-bezier(.2,.8,.2,1), flex-basis 680ms cubic-bezier(.2,.8,.2,1),
    transform 680ms cubic-bezier(.2,.8,.2,1), opacity 450ms ease, border-color 320ms ease, box-shadow 320ms ease;
}
.blog-card[hidden], .blog-empty-card[hidden] { display: none !important; }
.blog-card[data-distance="0"] { flex: 0 0 clamp(245px, 20.5vw, 350px); z-index: 2; transform: perspective(1300px) rotateY(0) rotateZ(0) scale(1); }
.blog-card[data-distance="-1"], .blog-card[data-distance="1"] { flex-grow: 1.45; transform: perspective(1300px) rotateY(var(--blog-side-tilt, 9deg)) rotateZ(0) scale(.98); }
.blog-card[data-distance="-1"] { --blog-side-tilt: 9deg; }
.blog-card[data-distance="1"] { --blog-side-tilt: -9deg; }
.blog-card[data-distance="-2"], .blog-card[data-distance="2"] { flex-grow: 1; opacity: .82; transform: perspective(1300px) rotateY(var(--blog-side-tilt, 16deg)) rotateZ(0) scale(.95); }
.blog-card[data-distance="-2"] { --blog-side-tilt: 16deg; }
.blog-card[data-distance="2"] { --blog-side-tilt: -16deg; }
.blog-card[data-distance="-3"], .blog-card[data-distance="3"] { flex-grow: .48; opacity: .55; transform: perspective(1300px) rotateY(var(--blog-side-tilt, 22deg)) rotateZ(0) scale(.92); }
.blog-card[data-distance="-3"] { --blog-side-tilt: 22deg; }
.blog-card[data-distance="3"] { --blog-side-tilt: -22deg; }
.blog-card:hover, .blog-card:focus-within { z-index: 3; transform: perspective(1300px) rotateY(0) rotateZ(0) scale(1.01); border-color: color-mix(in srgb, var(--accent) 60%, var(--line-strong)); box-shadow: 0 28px 68px rgba(0,0,0,.34), 0 0 34px color-mix(in srgb, var(--accent) 12%, transparent); }
.blog-card-link { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; color: inherit; text-decoration: none; outline-offset: -4px; }
.blog-card-link:focus-visible { outline: 2px solid var(--accent); }
.blog-card-media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; background: var(--panel); isolation: isolate; }
.blog-card-media::before {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb,var(--line-strong) 36%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--line-strong) 36%,transparent) 1px,transparent 1px);
  background-size: 27px 27px; opacity: .45; mask-image: linear-gradient(135deg,#000 8%,transparent 92%);
}
.blog-card-media img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.56) contrast(.94) brightness(.68); transition: transform 760ms cubic-bezier(.2,.8,.2,1), filter 500ms ease; }
.blog-card::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(5,7,7,.26) 0%,transparent 25%,rgba(6,8,8,.12) 50%,rgba(5,7,7,.9) 100%); opacity: .86; transition: opacity 450ms ease; }
.blog-card[data-distance="0"]::after { opacity: 1; }
.blog-card:hover .blog-card-media img, .blog-card:focus-within .blog-card-media img { transform: scale(1.055); filter: saturate(.9) contrast(1) brightness(.82); }
.blog-card-media-index { position: absolute; z-index: 2; top: 13px; left: 13px; color: #f0f0ec; font: 7px/1.5 var(--mono); letter-spacing: .1em; text-shadow: 0 1px 7px rgba(0,0,0,.75); }
.blog-card-category { position: absolute; z-index: 2; right: 12px; bottom: 12px; left: 12px; display: block; width: fit-content; max-width: calc(100% - 24px); padding: 5px 7px; overflow: hidden; border: 1px solid rgba(217,243,107,.44); background: rgba(7,9,8,.68); color: #f0f0ec; font: 7px/1.45 var(--mono); letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.blog-card-body { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; min-width: 0; padding: 16px clamp(13px,1.3vw,21px) 14px; background: linear-gradient(180deg,transparent,rgba(5,7,7,.88) 24%,rgba(5,7,7,.97)); opacity: 0; transform: translateY(13px); visibility: hidden; transition: opacity 360ms ease, transform 520ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 520ms; }
.blog-card[data-distance="0"] .blog-card-body { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.blog-card-body h3 { margin: 12px 0 7px; color: #f3f3ed; font: 650 clamp(19px,1.7vw,25px)/1.13 var(--display); letter-spacing: -.045em; text-wrap: pretty; }
.blog-card-body > p { margin: 0 0 14px; color: rgba(240,240,236,.77); font-size: 10px; line-height: 1.65; }
.blog-card-meta { display: flex; justify-content: space-between; gap: 10px; color: rgba(240,240,236,.57); font: 7px/1.45 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.blog-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(240,240,236,.2); color: rgba(240,240,236,.58); font: 7px/1.5 var(--mono); letter-spacing: .08em; }
.blog-card-arrow { display: grid; place-items: center; flex: 0 0 auto; width: 27px; height: 27px; border: 1px solid rgba(217,243,107,.6); color: var(--accent); font: 14px var(--body); }
.blog-carousel[data-state="ready"] .blog-empty-card, .blog-carousel[data-state="static"] .blog-empty-card { display: none; }
.blog-carousel[data-state="empty"] .blog-carousel-viewport, .blog-carousel[data-state="loading"] .blog-carousel-viewport { display: none; }
.blog-carousel-bottom.section-inner { width: auto; max-width: none; margin: 0; padding: 0 var(--page-gutter); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.blog-carousel-controls { display: inline-flex; align-items: center; gap: 7px; }
.blog-carousel-controls[hidden] { display: none !important; }
.blog-carousel-control { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; font: 8px/1.2 var(--mono); letter-spacing: .08em; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.blog-carousel-control:hover, .blog-carousel-control:focus-visible { border-color: var(--accent); color: var(--ink); }
.blog-carousel-control:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.blog-motion-toggle { min-height: 38px; }
.blog-carousel-status { font-size: 8px; }

/* Markdown article reader */
.blog-reader-overlay { position: fixed; z-index: 180; inset: 0; display: grid; place-items: center; padding: clamp(8px,2vw,24px); overflow: hidden; background: rgba(4,6,6,.78); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); opacity: 0; transition: opacity 300ms ease, backdrop-filter 300ms ease; }
.blog-reader-overlay[hidden] { display: none !important; }
.blog-reader-overlay.is-open { opacity: 1; -webkit-backdrop-filter: blur(15px) saturate(.78); backdrop-filter: blur(15px) saturate(.78); }
.blog-reader-panel { display: flex; flex-direction: column; width: min(1080px,100%); height: min(92dvh,1000px); max-height: 100%; overflow: hidden; border: 1px solid var(--line-strong); background: var(--bg); box-shadow: 0 30px 100px rgba(0,0,0,.48),0 0 48px color-mix(in srgb,var(--accent) 7%,transparent); transform: translateY(14px) scale(.99); transition: transform 380ms cubic-bezier(.2,.8,.2,1); }
.blog-reader-overlay.is-open .blog-reader-panel { transform: translateY(0) scale(1); }
.blog-reader-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 20px; min-height: 100px; padding: 19px clamp(17px,3vw,32px); border-bottom: 1px solid var(--line-strong); background: var(--panel); }
.blog-reader-title-block { min-width: 0; }
.blog-reader-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; color: var(--muted); font: 8px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.blog-reader-live-dot { width: 5px; height: 5px; flex: 0 0 auto; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb,var(--accent) 45%,transparent); }
.blog-reader-header h2 { max-width: 780px; margin: 0; font: 600 clamp(20px,2.6vw,34px)/1.1 var(--display); letter-spacing: -.05em; text-wrap: pretty; }
.blog-reader-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; }
.blog-reader-source { color: var(--muted); font: 8px/1.4 var(--mono); letter-spacing: .07em; white-space: nowrap; }
.blog-reader-source:hover { color: var(--accent); }
.blog-reader-close { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; }
.blog-reader-close:hover { border-color: var(--accent); color: var(--accent); }
.blog-reader-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.blog-reader-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.blog-reader-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-color: var(--accent) transparent; }
.blog-reader-body { width: min(760px,100%); margin: 0 auto; padding: clamp(25px,5.4vw,72px) clamp(20px,3vw,36px) 80px; color: var(--ink); }
.blog-reader-body > :first-child { margin-top: 0; }
.blog-reader-body h1, .blog-reader-body h2, .blog-reader-body h3, .blog-reader-body h4 { margin: 1.65em 0 .6em; color: var(--ink); font-family: var(--display); line-height: 1.14; letter-spacing: -.045em; text-wrap: pretty; }
.blog-reader-body h1 { font-size: clamp(32px,5vw,52px); }
.blog-reader-body h2 { font-size: clamp(25px,3.6vw,36px); }
.blog-reader-body h3 { font-size: clamp(20px,2.7vw,27px); }
.blog-reader-body p { margin: 0 0 1.25em; color: var(--muted); font-size: clamp(13px,1vw,15px); line-height: 1.95; }
.blog-reader-body strong { color: var(--ink); font-weight: 700; }
.blog-reader-body em { color: var(--ink); font-family: var(--serif); font-size: 1.06em; }
.blog-reader-body a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.blog-reader-body ul, .blog-reader-body ol { margin: 0 0 1.4em; padding-left: 1.4em; color: var(--muted); }
.blog-reader-body li { margin: .45em 0; padding-left: .25em; line-height: 1.85; }
.blog-reader-body blockquote { margin: 1.6em 0; padding: 5px 0 5px 20px; border-left: 2px solid var(--accent); }
.blog-reader-body blockquote p { color: var(--ink); font-family: var(--serif); font-size: 1.3em; line-height: 1.5; }
.blog-reader-body hr { height: 1px; margin: 2.3em 0; border: 0; background: var(--line-strong); }
.blog-reader-body code { padding: .15em .35em; border: 1px solid var(--line); background: var(--panel); font: .88em var(--mono); overflow-wrap: anywhere; }
.blog-reader-body pre { overflow: auto; margin: 1.5em 0; padding: 18px; border: 1px solid var(--line); background: var(--panel); }
.blog-reader-body pre code { padding: 0; border: 0; background: transparent; }
.blog-reader-table-wrap { width: 100%; margin: 1.5em 0; overflow: auto; }
.blog-reader-body table { width: 100%; border-collapse: collapse; font-size: 12px; }
.blog-reader-body th, .blog-reader-body td { padding: 10px 12px; border: 1px solid var(--line-strong); text-align: left; vertical-align: top; }
.blog-reader-body th { background: var(--panel); color: var(--ink); font: 8px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.blog-reader-footer { display: flex; flex: 0 0 auto; justify-content: space-between; gap: 12px; padding: 12px clamp(17px,3vw,32px); border-top: 1px solid var(--line); color: var(--faint); font: 7px/1.5 var(--mono); letter-spacing: .08em; }
.blog-reader-footer b { color: var(--accent); }
html[data-theme="light"] .blog-reader-overlay { background: rgba(31,38,29,.52); }
html[data-theme="light"] .blog-reader-panel { background: var(--bg); }
@media (max-width: 1000px) {
  .blog-heading h2 { flex-wrap: wrap; white-space: normal; gap: .05em .22em; font-size: clamp(37px,7.1vw,66px); }
  .blog-heading h2 > span, .blog-heading h2 > em { flex: 0 1 auto; max-width: 100%; }
  .blog-heading-index { display: none; }
  .blog-carousel-viewport { height: clamp(370px,49vh,480px); }
  .blog-card[data-distance="0"] { flex-basis: clamp(235px,32vw,320px); }
  .blog-reader-header h2 { font-size: clamp(19px,3vw,29px); }
}
@media (max-width: 700px) {
  .blog-heading.section-inner { padding-top: 52px; padding-bottom: 25px; }
  .blog-heading h2 { display: block; font-size: clamp(37px,10vw,53px); line-height: .98; letter-spacing: -.065em; }
  .blog-heading h2 > span, .blog-heading h2 > em { display: inline; }
  .blog-heading h2 em { margin-left: .14em; }
  .blog-heading-copy > p:last-child { max-width: 100%; margin-top: 15px; font-size: 12px; }
  .blog-carousel-viewport { height: clamp(330px,57vh,455px); }
  .blog-carousel-group { gap: 5px; padding: 8px 12px 18px; }
  .blog-card[data-distance="0"] { flex-basis: min(57vw,270px); }
  .blog-card[data-distance="-1"], .blog-card[data-distance="1"] { flex-grow: .48; }
  .blog-card[data-distance="-2"], .blog-card[data-distance="2"] { flex-grow: .2; opacity: .6; }
  .blog-card[data-distance="-3"], .blog-card[data-distance="3"] { flex-grow: .08; opacity: .28; }
  .blog-card-media-index { top: 8px; left: 7px; font-size: 6px; }
  .blog-card-category { display: none; }
  .blog-card-body { padding: 12px 11px 10px; }
  .blog-card-body h3 { margin: 9px 0 6px; font-size: 18px; }
  .blog-card-body > p { font-size: 9px; line-height: 1.55; }
  .blog-card-foot { font-size: 6px; padding-top: 7px; }
  .blog-card-arrow { width: 23px; height: 23px; }
  .blog-carousel-bottom.section-inner { flex-wrap: wrap; align-items: center; padding-inline: 16px; }
  .blog-carousel-controls { gap: 5px; }
  .blog-carousel-control, .blog-motion-toggle { min-height: 34px; padding-inline: 8px; font-size: 7px; }
  .blog-empty-card { width: min(345px, calc(100% - 32px)); }
  .blog-reader-overlay { padding: 7px; }
  .blog-reader-panel { width: 100%; height: 94dvh; }
  .blog-reader-header { align-items: flex-start; gap: 9px; min-height: 84px; padding: 14px 12px; }
  .blog-reader-kicker { font-size: 7px; letter-spacing: .06em; }
  .blog-reader-header h2 { max-width: 68vw; font-size: 19px; }
  .blog-reader-actions { gap: 8px; }
  .blog-reader-source { display: none; }
  .blog-reader-close { width: 38px; height: 38px; }
  .blog-reader-body { padding: 27px 18px 55px; }
  .blog-reader-footer { padding: 10px 12px; font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]) .blog-card, html:not([data-motion-mode="full"]) .blog-card *, html:not([data-motion-mode="full"]) .blog-reader-overlay, html:not([data-motion-mode="full"]) .blog-reader-panel, html:not([data-motion-mode="full"]) .blog-reader-close{ transition: none !important; animation: none !important; }
  html:not([data-motion-mode="full"]) .blog-card{ transform: none !important; }
}

/* BLOG LOOP / CENTER-NEWEST / READER SCROLL FIX */
.blog-carousel-group { justify-content: center; }
.blog-card[data-loop-copy="true"] { pointer-events: auto; }
.blog-reader-overlay:not([hidden]) { overflow: hidden; overscroll-behavior: contain; touch-action: auto; }
.blog-reader-panel {
  display: flex !important; flex-direction: column !important; min-height: 0;
  height: min(92dvh, 1000px); max-height: calc(100dvh - 16px);
  overflow: hidden; overscroll-behavior: contain;
}
.blog-reader-scroll {
  display: block; position: relative; flex: 1 1 0% !important; height: 0;
  min-height: 0 !important; max-height: 100%; width: 100%;
  overflow-x: hidden !important; overflow-y: scroll !important;
  overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
  touch-action: pan-y; scrollbar-gutter: stable;
}
.blog-reader-body { min-height: min-content; }
@media (max-width: 700px) {
  .blog-reader-panel { height: min(94dvh, 1000px); max-height: calc(100dvh - 14px); }
  .blog-reader-scroll { overscroll-behavior-y: contain; touch-action: pan-y; }
}

/* BLOG CAROUSEL / HORIZONTAL GESTURE NAVIGATION */
.blog-carousel-viewport {
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.blog-carousel-viewport img {
  -webkit-user-drag: none;
  user-select: none;
}
.blog-carousel[data-dragging="true"] .blog-carousel-viewport { cursor: grabbing; }
.blog-carousel[data-dragging="true"] .blog-card { pointer-events: none; transition-duration: 120ms; }
.blog-carousel[data-dragging="true"] { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]) .blog-carousel-viewport{ cursor: auto; touch-action: pan-y; }
  html:not([data-motion-mode="full"]) .blog-carousel[data-dragging="true"] .blog-card{ transition-duration: 0s; }
}
/* BLOG LENIS-STYLE HORIZONTAL MOTION V2 — EASED CARD LAYOUT */
.blog-carousel[data-smooth-motion="true"] .blog-card {
  flex: var(--blog-flex, 1 1 0px) !important;
  opacity: var(--blog-opacity, 1) !important;
  transform: perspective(1300px) rotateY(var(--blog-rotate, 0deg)) rotateZ(0deg) scale(var(--blog-scale, 1)) !important;
  transition-property: border-color, box-shadow !important;
  transition-duration: 320ms !important;
  will-change: flex-basis, flex-grow, transform, opacity;
}
.blog-carousel[data-smooth-motion="true"] .blog-card:hover,
.blog-carousel[data-smooth-motion="true"] .blog-card:focus-within {
  transform: perspective(1300px) rotateY(0deg) rotateZ(0deg) scale(1.015) !important;
}
.blog-carousel[data-smooth-motion="true"] .blog-card[data-distance="0"] { z-index: 5; }
.blog-carousel[data-smooth-motion="true"][data-dragging="true"] .blog-card {
  transition-property: border-color, box-shadow !important;
  cursor: grabbing;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]) .blog-carousel[data-smooth-motion="true"] .blog-card{ will-change: auto; }
}

/* BLOG CAROUSEL NO-SNAP VISUAL CONTINUITY V1 */
.blog-carousel[data-smooth-motion="true"] .blog-card::after {
  opacity: var(--blog-card-overlay-opacity, .86) !important;
  transition: none !important;
}
.blog-carousel[data-smooth-motion="true"] .blog-card .blog-card-body {
  opacity: var(--blog-body-opacity, 0) !important;
  visibility: visible !important;
  transform: translateY(var(--blog-body-y, 13px)) !important;
  transition: none !important;
}
.blog-carousel[data-smooth-motion="true"] .blog-card:hover,
.blog-carousel[data-smooth-motion="true"] .blog-card:focus-within {
  transform: perspective(1300px) rotateY(var(--blog-rotate, 0deg)) rotateZ(0deg)
    scale(var(--blog-scale, 1)) !important;
}


/* BLOG CAROUSEL EDGE-RECYCLE BUFFER V1 */
.blog-carousel[data-smooth-motion="true"] .blog-card[data-distance="4"],
.blog-carousel[data-smooth-motion="true"] .blog-card[data-distance="-4"] {
  pointer-events: none;
}


/* BLOG READER CLICK / LAYER FIX V1 */
.blog-reader-overlay:not([hidden]) {
  position: fixed !important;
  z-index: 9999 !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center;
  pointer-events: auto !important;
  visibility: visible !important;
}
.blog-reader-overlay:not([hidden]) .blog-reader-panel,
.blog-reader-overlay:not([hidden]) .blog-reader-close {
  pointer-events: auto !important;
}
.blog-reader-overlay[hidden] { display: none !important; }

/* HIDE NATIVE PAGE SCROLLBAR — KEEP CUSTOM BLUE RAIL */
/* Only hide the document/viewport scrollbar; keep scrolling and inner readers usable. */
html {
  scrollbar-width: none !important;
}
html::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* MOBILE BLOG READER TOUCH SCROLL FIX V1 */
.blog-reader-overlay:not([hidden]) {
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
.blog-reader-overlay:not([hidden]) .blog-reader-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: min(92vh, 1000px) !important;
  height: min(92dvh, 1000px) !important;
  max-height: calc(100vh - 16px) !important;
  max-height: calc(100dvh - 16px) !important;
  overflow: hidden !important;
}
.blog-reader-overlay:not([hidden]) .blog-reader-scroll {
  display: block !important;
  position: relative;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  scrollbar-gutter: auto;
  pointer-events: auto !important;
}
.blog-reader-overlay:not([hidden]) .blog-reader-body {
  min-height: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .blog-reader-overlay:not([hidden]) .blog-reader-panel {
    height: min(94vh, 1000px) !important;
    height: min(94dvh, 1000px) !important;
    max-height: calc(100vh - 14px) !important;
    max-height: calc(100dvh - 14px) !important;
  }
  .blog-reader-overlay:not([hidden]) .blog-reader-scroll {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y;
  }
}


/* Same-origin cross-page navigation transition for the portfolio and blog pages. */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: site-page-out 220ms cubic-bezier(.2,.7,.2,1) both;
}
::view-transition-new(root) {
  animation: site-page-in 420ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes site-page-out {
  to { opacity: .72; transform: translateY(-5px); }
}
@keyframes site-page-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"])::view-transition-old(root), html:not([data-motion-mode="full"])::view-transition-new(root){ animation: none !important; }
}


/* Blog grid matte must sit behind the blog content, not wash it out. */
.blog {
  position: relative;
  isolation: isolate;
}
.blog > .section-grid-base {
  z-index: 0;
}
.blog > .section-grid-matte {
  z-index: 1;
}
.blog > .section-bar,
.blog > .blog-heading,
.blog > .blog-carousel {
  position: relative;
  z-index: 2;
}

/* Mobile reveal fix: prevent content remaining faded */
@media (max-width: 700px) {
  .js-ready [data-reveal],
  .js-ready [data-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  .contact-panel[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* Mobile ASCII: preserve left anchor and allow four-cell right extension. */
@media (max-width: 700px) {
  .hero-title-dissolve {
    width: calc(100% + 4ch) !important;
    max-width: none !important;
    overflow: visible !important;
  }
  .hero-title-dissolve .ascii-dissolve-output {
    width: 64ch !important;
    max-width: none !important;
    overflow: visible !important;
  }
}