@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@10..48,75..100,400..800&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --ink: #101010;
  --ink-2: #181714;
  --paper: #F8F6EA;
  --cream: #EFE3D0;
  --mist: #E9FFE8;
  --lilac: #EFE3FF;
  --lime: #DFFF3F;
  --coral: #FF7247;
  --blue: #89D8FF;
  --line: rgba(248,246,234,.16);
  --line-dark: rgba(16,16,16,.13);
  --muted: rgba(248,246,234,.66);
  --muted-dark: rgba(16,16,16,.58);
  --max: 1480px;
  --gutter: 24px;
  --sans: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--sans);
  text-rendering: geometricPrecision;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  opacity: .17;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.46'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
::selection { background: var(--lime); color: var(--ink); }
.grid { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.kicker { margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: .15em; font-size: 12px; font-weight: 900; }
.kicker.dark { color: var(--muted-dark); }
.skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip-link:focus { position: fixed; z-index: 200; top: 14px; left: 14px; width: auto; height: auto; clip: auto; padding: 12px 16px; border-radius: 999px; background: var(--lime); color: var(--ink); font-weight: 900; }

.cursor { position: fixed; z-index: 130; left: 0; top: 0; width: 70px; height: 70px; display: grid; place-items: center; pointer-events: none; border-radius: 50%; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.72); background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 950; letter-spacing: -.04em; transition: opacity .18s var(--ease), transform .18s var(--ease); mix-blend-mode: difference; }
.cursor.is-active { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.cursor.is-small { width: 48px; height: 48px; font-size: 10px; }

.site-head { position: fixed; z-index: 90; top: 18px; left: 50%; transform: translateX(-50%); width: min(calc(100% - 32px), var(--max)); display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(16,16,16,.58); backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 18px 60px rgba(0,0,0,.22); }
.site-head.is-scrolled { background: rgba(16,16,16,.82); }
.brand { display: inline-flex; align-items: center; gap: 10px; padding-right: 12px; font-size: 15px; font-weight: 850; letter-spacing: -.04em; }
.brand-mark { width: 42px; height: 42px; overflow: hidden; border-radius: 50%; background: var(--paper); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.desktop-nav { justify-self: center; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid rgba(248,246,234,.10); border-radius: 999px; }
.desktop-nav a { padding: 10px 14px; border-radius: 999px; color: rgba(248,246,234,.72); font-size: 13px; font-weight: 780; }
.desktop-nav a:hover { color: var(--ink); background: var(--paper); }
.menu-button, .head-brief { height: 42px; display: inline-grid; place-items: center; border: 0; border-radius: 999px; padding: 0 17px; font-size: 13px; font-weight: 900; }
.menu-button { display: none; background: rgba(248,246,234,.10); }
.head-brief { background: var(--paper); color: var(--ink); }
.menu-panel { position: fixed; z-index: 80; top: 86px; left: 16px; right: 16px; display: none; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 28px; background: rgba(16,16,16,.92); backdrop-filter: blur(20px); transform: translateY(-14px); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.menu-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.menu-panel a { min-height: 46px; display: grid; place-items: center; border-radius: 20px; background: rgba(248,246,234,.08); font-weight: 850; }

.hero { position: relative; min-height: 100svh; overflow: hidden; padding: 126px 0 86px; isolation: isolate; background: radial-gradient(circle at 18% 22%, rgba(223,255,63,.13), transparent 30rem), radial-gradient(circle at 76% 16%, rgba(255,114,71,.11), transparent 34rem), linear-gradient(180deg, #101010, #17140F 58%, #101010); }
.idea-canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: .86; }
.hero::before { content: ""; position: absolute; inset: 74px 18px 96px; z-index: -1; border: 1px solid rgba(248,246,234,.08); border-radius: 54px; background: linear-gradient(rgba(248,246,234,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(248,246,234,.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle at 56% 46%, black, transparent 72%); }
.hero-mesh { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.mesh-ball { position: absolute; width: 34vw; aspect-ratio: 1; border-radius: 44% 56% 62% 38%; filter: blur(14px); mix-blend-mode: screen; opacity: .46; animation: morph 13s var(--ease) infinite alternate; }
.mesh-ball.lime { right: -16vw; top: 12vh; background: var(--lime); }
.mesh-ball.coral { right: 18vw; bottom: 12vh; width: 20vw; background: var(--coral); animation-delay: -4s; }
.mesh-ball.blue { left: -16vw; bottom: 13vh; width: 32vw; background: var(--blue); animation-delay: -7s; opacity: .34; }
@keyframes morph { to { transform: rotate(18deg) scale(1.08); border-radius: 62% 38% 44% 56%; } }
.hero-grid { min-height: calc(100svh - 212px); align-items: center; }
.hero-copy { grid-column: 1 / span 7; position: relative; z-index: 3; }
.hero-copy .kicker { margin-bottom: 22px; }
.hero h1 { margin: 0; max-width: 980px; font-size: clamp(76px, 11vw, 178px); line-height: .78; letter-spacing: -.105em; font-weight: 820; }
.hero h1::first-line { color: var(--paper); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
.showreel { width: 144px; height: 144px; display: grid; place-items: center; position: relative; border: 1px solid rgba(248,246,234,.24); border-radius: 50%; background: rgba(248,246,234,.07); color: var(--paper); font-size: 15px; font-weight: 900; letter-spacing: -.04em; text-align: center; transition: transform .28s var(--ease), background .28s var(--ease), color .28s var(--ease); }
.showreel span { position: absolute; width: 18px; height: 18px; top: 30px; right: 32px; border-radius: 50%; background: var(--coral); }
.showreel:hover { transform: rotate(-5deg) scale(1.03); background: var(--paper); color: var(--ink); }
.brief-link { display: inline-flex; align-items: center; min-height: 58px; padding: 0 24px; border-radius: 999px; background: var(--lime); color: var(--ink); font-weight: 950; letter-spacing: -.04em; }
.hero-lab { grid-column: 8 / -1; position: relative; min-height: min(65vw, 690px); perspective: 1200px; transform-style: preserve-3d; }
.lab-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(248,246,234,.24); border-radius: 50%; transform-style: preserve-3d; animation: spin 18s linear infinite; }
.orbit-a { width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(68deg); }
.orbit-b { width: 84%; aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(58deg) rotateY(18deg); animation-duration: 25s; animation-direction: reverse; opacity: .55; }
@keyframes spin { to { rotate: 0 0 1 360deg; } }
.lab-card, .lab-pill, .lab-icon { position: absolute; will-change: transform; box-shadow: 0 34px 90px rgba(0,0,0,.28); }
.lab-card { width: min(80%, 482px); min-height: 306px; padding: 12px; border: 1px solid rgba(248,246,234,.18); border-radius: 36px; background: rgba(248,246,234,.88); color: var(--ink); }
.lab-card img { width: 100%; height: 222px; object-fit: contain; border-radius: 26px; background: #fff; }
.lab-card b { display: block; padding: 16px 12px 4px; font-size: 22px; line-height: .95; letter-spacing: -.055em; }
.lab-card-tabs { left: 0; top: 9%; transform: rotate(-8deg); }
.lab-card-seo { right: 0; bottom: 8%; transform: rotate(7deg); background: #141414; color: var(--paper); }
.lab-pill { padding: 12px 16px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 14px; font-weight: 950; letter-spacing: -.04em; }
.pill-idea { right: 11%; top: 4%; transform: rotate(7deg); }
.pill-ship { left: 8%; bottom: 3%; background: var(--blue); transform: rotate(-7deg); }
.lab-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 20px; background: var(--paper); }
.lab-icon img { width: 42px; height: 42px; border-radius: 14px; }
.icon-capsule { left: 10%; top: 63%; transform: rotate(-7deg); }
.icon-type { right: 8%; top: 47%; transform: rotate(8deg); }
.ticker { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 78px; display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--line); background: rgba(16,16,16,.56); backdrop-filter: blur(16px); }
.ticker-track { display: flex; align-items: center; gap: 20px; min-width: max-content; animation: ticker 30s linear infinite; }
.ticker span { font-size: clamp(30px, 4.5vw, 64px); line-height: 1; font-weight: 830; letter-spacing: -.065em; white-space: nowrap; }
.ticker i { width: 18px; height: 18px; border-radius: 50%; background: var(--coral); }
@keyframes ticker { to { transform: translateX(-50%); } }


.work { background: var(--paper); color: var(--ink); padding: 128px 0 96px; }
.section-head { align-items: end; margin-bottom: 34px; }
.section-head .kicker { grid-column: 1 / span 3; }
.section-head h2 { grid-column: 4 / -1; margin: 0; max-width: 980px; font-size: clamp(58px, 8.2vw, 138px); line-height: .86; letter-spacing: -.088em; font-weight: 830; }
.work-gallery { align-items: stretch; }
.work-card { grid-column: span 6; min-height: 620px; border-radius: 42px; overflow: hidden; color: var(--ink); box-shadow: 0 26px 80px rgba(16,16,16,.11); }
.work-card.feature { grid-column: span 12; min-height: 620px; }
.work-card a { min-height: inherit; display: grid; grid-template-columns: 90px 1fr minmax(320px, .78fr); grid-template-rows: auto 1fr auto; gap: 22px; padding: clamp(28px, 4vw, 58px); }
.work-card:not(.feature) a { grid-template-columns: 62px 1fr; grid-template-rows: auto auto auto auto; }
.work-card.lime { background: var(--lime); }
.work-card.coral { background: var(--coral); }
.work-card.blue { background: var(--blue); }
.work-card.cream { background: var(--cream); }
.work-meta { grid-column: 1; grid-row: 1 / 4; display: grid; align-content: start; gap: 12px; }
.work-meta span { font-size: 16px; font-weight: 950; }
.work-meta em { writing-mode: vertical-rl; transform: rotate(180deg); font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 900; opacity: .62; }
.work-card h3 { grid-column: 2; grid-row: 2; align-self: end; margin: 0; max-width: 720px; font-size: clamp(56px, 7.8vw, 132px); line-height: .8; letter-spacing: -.105em; font-weight: 830; }
.work-card p { grid-column: 2; grid-row: 3; margin: 0; color: rgba(16,16,16,.66); font-size: clamp(18px, 1.55vw, 24px); line-height: 1.1; letter-spacing: -.04em; font-weight: 760; }
.work-media { grid-column: 3; grid-row: 1 / 4; align-self: center; justify-self: end; width: min(100%, 560px); aspect-ratio: 1 / .78; display: grid; place-items: center; padding: 18px; border-radius: 32px; background: rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 22px 54px rgba(16,16,16,.13); transform: rotate(3deg); }
.work-card:not(.feature) .work-media { grid-column: 1 / 3; grid-row: 4; justify-self: stretch; width: 100%; margin-top: 28px; transform: rotate(-3deg); }
.work-media img { width: 100%; height: 100%; object-fit: contain; border-radius: 23px; }
.work-media.phone { height: 380px; aspect-ratio: auto; }
.work-media.phone img { width: auto; max-height: 100%; }
.work-media.type-object { display: flex; flex-direction: column; gap: 16px; }
.work-media.type-object img { width: 96px; height: 96px; border-radius: 28px; }
.work-media.type-object b { font-size: clamp(110px, 12vw, 190px); line-height: .72; letter-spacing: -.12em; }

.expertise { padding: 128px 0; background: #101010; color: var(--paper); }
.expertise-title { grid-column: 1 / span 5; }
.expertise-title .kicker { margin-bottom: 22px; }
.expertise-title h2 { margin: 0; font-size: clamp(54px, 7.6vw, 124px); line-height: .86; letter-spacing: -.085em; font-weight: 830; }
.expertise-menu { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.expertise-menu article { min-height: 270px; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: 30px; background: rgba(248,246,234,.055); }
.expertise-menu h3 { margin: 0 0 auto; color: var(--lime); font-size: 13px; text-transform: uppercase; letter-spacing: .13em; }
.expertise-menu span { display: block; padding: 9px 0; border-top: 1px solid rgba(248,246,234,.10); color: rgba(248,246,234,.80); font-size: clamp(22px, 2.6vw, 40px); line-height: .92; letter-spacing: -.06em; font-weight: 760; }

.proof { padding: 118px 0; background: var(--mist); color: var(--ink); }
.proof-head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: end; margin-bottom: 30px; }
.proof-head .kicker { grid-column: 1 / span 3; }
.proof-head h2 { grid-column: 4 / -1; margin: 0; font-size: clamp(54px, 7vw, 116px); line-height: .88; letter-spacing: -.088em; font-weight: 830; }
.proof article { grid-column: span 4; min-height: 310px; display: flex; flex-direction: column; justify-content: space-between; padding: 26px; border: 1px solid rgba(16,16,16,.14); border-radius: 32px; background: rgba(255,255,255,.48); }
.proof article span { color: rgba(16,16,16,.48); font-weight: 950; }
.proof article h3 { margin: 0; font-size: clamp(34px, 4.2vw, 68px); line-height: .88; letter-spacing: -.08em; }

.contact { position: relative; overflow: hidden; padding: 128px 0 48px; background: var(--ink); color: var(--paper); }
.contact::before { content: ""; position: absolute; width: 52vw; aspect-ratio: 1; right: -20vw; top: -16vw; border-radius: 50%; background: var(--coral); opacity: .76; }
.contact-grid { position: relative; align-items: end; }
.contact-grid .kicker { grid-column: 1 / -1; }
.contact h2 { grid-column: 1 / span 9; margin: 0; max-width: 1100px; font-size: clamp(60px, 9.5vw, 156px); line-height: .82; letter-spacing: -.095em; font-weight: 830; }
.contact-actions { grid-column: 10 / -1; display: grid; justify-items: end; gap: 18px; }
.big-brief { width: 190px; height: 190px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 20px; font-weight: 950; letter-spacing: -.055em; text-align: center; transition: transform .24s var(--ease); }
.big-brief:hover { transform: rotate(-8deg) scale(1.04); }
.mail { font-size: 18px; font-weight: 850; border-bottom: 1px solid rgba(248,246,234,.38); }
.footer-ticker { position: relative; display: flex; width: max-content; gap: 16px; margin-top: 70px; animation: footerTicker 28s linear infinite; }
.footer-ticker span { font-size: clamp(70px, 15vw, 220px); line-height: .74; font-weight: 830; letter-spacing: -.115em; color: transparent; -webkit-text-stroke: 1.2px rgba(248,246,234,.30); }
@keyframes footerTicker { to { transform: translateX(-50%); } }
.footer { padding: 34px 0 42px; background: var(--ink); color: rgba(248,246,234,.68); border-top: 1px solid var(--line); }
.footer-inner { align-items: center; }
.footer .brand { grid-column: 1 / span 3; }
.footer p:nth-child(2) { grid-column: 4 / span 5; margin: 0; }
.footer p:nth-child(3) { grid-column: 11 / -1; justify-self: end; margin: 0; }

.motion-ready [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .72s var(--ease), transform .72s var(--ease); }
.motion-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.motion-ready .hero-copy, .motion-ready .hero-lab { animation: rise .9s var(--ease) both; }
.motion-ready .hero-lab { animation-delay: .08s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1100px) {
  .grid { width: min(calc(100% - 36px), var(--max)); grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px; }
  .hero-copy, .hero-lab, .flow-copy, .flow-visual-wrap, .expertise-title, .expertise-menu, .section-head .kicker, .section-head h2, .proof-head, .contact-grid .kicker, .contact h2, .contact-actions { grid-column: 1 / -1; }
  .hero-grid { min-height: auto; }
  .hero-lab { min-height: 560px; }
  .flow-visual-wrap { grid-row: 1; height: 58svh; min-height: 500px; order: -1; top: 0; }
  .flow-copy { grid-row: 2; }
  .flow-step { min-height: 76svh; padding: 8vh 0; }
  .flow-scene { width: min(100%, 650px); height: 500px; min-height: 480px; }
  .section-head, .proof-head { display: grid; grid-template-columns: repeat(8, 1fr); }
  .section-head h2, .proof-head h2 { grid-column: 1 / -1; }
  .work-card, .work-card.feature, .proof article { grid-column: 1 / -1; }
  .work-card a, .work-card:not(.feature) a { grid-template-columns: 60px 1fr; grid-template-rows: auto auto auto auto; }
  .work-meta { grid-column: 1; grid-row: 1 / 4; }
  .work-card h3 { grid-column: 2; grid-row: 2; margin-top: 64px; }
  .work-card p { grid-column: 2; grid-row: 3; }
  .work-media, .work-card:not(.feature) .work-media { grid-column: 1 / 3; grid-row: 4; justify-self: stretch; width: 100%; margin-top: 26px; }
  .expertise-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-actions { justify-items: start; }
  .footer .brand, .footer p:nth-child(2), .footer p:nth-child(3) { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 760px) {
  .grid { width: min(calc(100% - 30px), var(--max)); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .cursor { display: none; }
  .site-head { top: 10px; width: min(calc(100% - 20px), var(--max)); grid-template-columns: auto 1fr auto auto; padding: 7px; background: rgba(16,16,16,.86); }
  .brand span:last-child { display: none; }
  .brand-mark { width: 38px; height: 38px; }
  .desktop-nav { display: none; }
  .menu-button { display: inline-grid; justify-self: end; height: 38px; padding: 0 13px; }
  .head-brief { height: 38px; padding: 0 14px; }
  .menu-panel { display: grid; top: 72px; grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 86px 0 92px; }
  .idea-canvas { opacity: .42; }
  .hero::before { inset: 62px 10px 58px; border-radius: 34px; background-size: 34px 34px; }
  .hero h1 { font-size: clamp(58px, 19vw, 92px); line-height: .82; letter-spacing: -.095em; }
  .hero-actions { margin-top: 22px; gap: 10px; }
  .showreel { width: 112px; height: 112px; font-size: 13px; }
  .showreel span { width: 13px; height: 13px; top: 24px; right: 24px; }
  .brief-link { min-height: 50px; padding: 0 18px; }
  .hero-lab { min-height: 430px; margin-top: 22px; }
  .lab-card { width: 72%; min-height: 196px; border-radius: 26px; padding: 8px; }
  .lab-card img { height: 128px; border-radius: 19px; }
  .lab-card b { padding: 11px 8px 0; font-size: 17px; }
  .lab-card-tabs { left: 1%; top: 6%; }
  .lab-card-seo { right: 1%; bottom: 1%; }
  .lab-pill, .lab-icon { display: none; }
  .ticker { height: 52px; }
  .ticker span { font-size: 32px; }
  .ticker i { width: 12px; height: 12px; }
  .flow-visual-wrap { top: 66px; height: 40svh; min-height: 310px; align-items: center; }
  .flow-scene { width: 100%; height: 320px; min-height: 300px; transform: scale(.78); transform-origin: center center; }
  .flow-step { min-height: 100svh; justify-content: flex-end; padding: 50svh 0 10vh; }
  .flow-step h2 { max-width: 100%; font-size: clamp(44px, 14.4vw, 66px); line-height: .88; letter-spacing: -.075em; }
  .flow-step p:last-child { margin-top: 13px; font-size: 19px; }
  .flow-node { width: 58px; height: 58px; font-size: 11px; }
  .flow-product { padding: 8px; }
  .flow-product span, .flow-product { font-size: 0; }
  .flow-product img { width: 30px; height: 30px; }
  .flow-progress { right: 4px; height: 120px; }
  .work, .expertise, .proof { padding: 78px 0 58px; }
  .section-head { margin-bottom: 22px; }
  .section-head h2, .expertise-title h2, .proof-head h2, .contact h2 { font-size: clamp(48px, 15.8vw, 78px); line-height: .88; letter-spacing: -.08em; }
  .work-gallery { width: min(calc(100% - 24px), var(--max)); }
  .work-card, .work-card.feature { min-height: auto; border-radius: 28px; }
  .work-card a, .work-card:not(.feature) a { grid-template-columns: 40px 1fr; gap: 12px; padding: 22px; }
  .work-meta em { display: none; }
  .work-card h3 { margin-top: 48px; font-size: clamp(45px, 15.5vw, 72px); line-height: .82; }
  .work-card p { font-size: 17px; }
  .work-media, .work-card:not(.feature) .work-media { aspect-ratio: 1 / .78; border-radius: 24px; padding: 12px; }
  .work-media.phone { height: 320px; }
  .work-media.type-object img { width: 72px; height: 72px; }
  .work-media.type-object b { font-size: 108px; }
  .expertise-menu { grid-template-columns: 1fr; }
  .expertise-menu article { min-height: 220px; border-radius: 26px; }
  .proof article { min-height: 220px; border-radius: 26px; }
  .proof article h3 { font-size: 40px; }
  .contact { padding: 76px 0 42px; }
  .contact::before { display: none; }
  .contact-actions { display: grid; justify-items: start; gap: 14px; }
  .big-brief { width: auto; height: 52px; padding: 0 20px; border-radius: 999px; font-size: 15px; white-space: nowrap; }
  .mail { max-width: 100%; font-size: 14px; overflow-wrap: anywhere; }
  .footer-ticker { margin-top: 48px; }
  .footer-ticker span { font-size: 76px; }
  .footer-inner { align-items: start; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 54px; }
  .showreel { width: 104px; height: 104px; }
  .brief-link { min-height: 46px; padding: 0 14px; font-size: 14px; }
  .hero-lab { min-height: 390px; }
  .lab-card { width: 72%; }
  .lab-card img { height: 112px; }
  .flow-scene { transform: scale(.70); }
}

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

/* v7 full-homepage flow stages */
.flow { background: #101010; color: var(--paper); overflow: hidden; }
.flow-stage { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 118px 0; border-top: 1px solid rgba(248,246,234,.10); }
.flow-stage:nth-child(even) { background: rgba(248,246,234,.025); }
.stage-grid { align-items: center; }
.stage-copy { grid-column: 1 / span 5; }
.stage-copy .kicker { margin-bottom: 22px; }
.stage-copy h2 { margin: 0; max-width: 760px; font-size: clamp(62px, 8vw, 132px); line-height: .84; letter-spacing: -.09em; font-weight: 830; }
.stage-copy p:last-child { margin: 20px 0 0; color: var(--muted); font-size: clamp(20px, 2vw, 32px); line-height: 1.04; letter-spacing: -.06em; font-weight: 760; }
.stage-scene { --accent: var(--lime); grid-column: 6 / -1; justify-self: stretch; position: relative; height: min(72vh, 720px); min-height: 540px; perspective: 1100px; transform-style: preserve-3d; overflow: hidden; border: 1px solid rgba(248,246,234,.10); border-radius: 48px; background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%), rgba(248,246,234,.035); }
.stage-floor { position: absolute; left: 50%; bottom: 8%; width: 74%; height: 44%; transform: translateX(-50%) rotateX(70deg); transform-origin: center bottom; border-radius: 34px; background: linear-gradient(rgba(248,246,234,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(248,246,234,.13) 1px, transparent 1px); background-size: 34px 34px; opacity: .34; mask-image: radial-gradient(ellipse at center, black, transparent 74%); }
.stage-ring { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(248,246,234,.22); border-radius: 50%; transform-style: preserve-3d; animation: spin 18s linear infinite; }
.stage-ring.ring-a { width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(68deg); }
.stage-ring.ring-b { width: 72%; aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(58deg) rotateY(18deg); animation-duration: 25s; animation-direction: reverse; opacity: .55; }
.stage-cube { position: absolute; left: 50%; top: 50%; width: 156px; height: 156px; transform-style: preserve-3d; transform: translate3d(-50%, -50%, 120px) rotateX(-17deg) rotateY(27deg) rotateZ(-4deg); }
.cube-side { position: absolute; inset: 0; display: grid; place-items: center; border: 1px solid rgba(248,246,234,.24); border-radius: 30px; background: color-mix(in srgb, var(--accent) 78%, #fff 10%); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 28px 74px rgba(0,0,0,.30); font-size: 26px; font-weight: 950; letter-spacing: -.08em; backface-visibility: hidden; }
.cube-side img { width: 100%; height: 100%; object-fit: cover; border-radius: 29px; }
.cube-side.front { transform: translateZ(78px); }
.cube-side.back { transform: rotateY(180deg) translateZ(78px); background: var(--blue); }
.cube-side.left { transform: rotateY(-90deg) translateZ(78px); background: var(--coral); }
.cube-side.right { transform: rotateY(90deg) translateZ(78px); background: var(--lime); }
.cube-side.top { transform: rotateX(90deg) translateZ(78px); background: var(--paper); }
.cube-side.bottom { transform: rotateX(-90deg) translateZ(78px); background: #1C1C1C; color: var(--paper); }
.stage-node, .stage-product { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; transform-style: preserve-3d; }
.stage-node { width: 78px; height: 78px; border-radius: 50%; background: var(--accent); color: var(--ink); box-shadow: 0 20px 58px rgba(0,0,0,.26); font-size: 13px; font-weight: 950; letter-spacing: -.04em; }
.stage-product { grid-auto-flow: column; gap: 9px; padding: 10px 13px 10px 10px; border: 1px solid rgba(248,246,234,.20); border-radius: 999px; background: rgba(248,246,234,.88); color: var(--ink); box-shadow: 0 22px 64px rgba(0,0,0,.22); font-size: 12px; font-weight: 920; }
.stage-product img { width: 34px; height: 34px; border-radius: 12px; }
.stage-beam { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--accent) 52%, transparent); transform: translate(-50%, -50%) rotateX(72deg); opacity: .64; animation: spin 14s linear infinite; }
.stage-spark .stage-scene { --accent: var(--lime); }
.stage-spark .stage-cube { transform: translate3d(-50%, -50%, 120px) rotateX(-17deg) rotateY(27deg) rotateZ(-4deg); }
.stage-spark .node-one { transform: translate3d(-250px, -148px, 60px); }
.stage-spark .node-two { transform: translate3d(210px, -94px, 110px); background: var(--blue); }
.stage-spark .node-three { transform: translate3d(-190px, 156px, 92px); background: var(--coral); }
.stage-spark .node-four { transform: translate3d(230px, 152px, 46px); background: var(--paper); }
.stage-spark .stage-product { opacity: .46; }
.stage-spark .product-tabs { transform: translate3d(-226px, 20px, 180px) rotate(-8deg); }
.stage-spark .product-seo { transform: translate3d(168px, 34px, 160px) rotate(7deg); }
.stage-spark .product-prompt { transform: translate3d(10px, 218px, 120px) rotate(-2deg); }
.stage-shape .stage-scene { --accent: var(--blue); }
.stage-shape .stage-cube { transform: translate3d(-50%, -50%, 132px) rotateX(-22deg) rotateY(118deg) rotateZ(6deg) scale(1.07); }
.stage-shape .node-one { transform: translate3d(-130px, -190px, 130px) scale(.82); }
.stage-shape .node-two { transform: translate3d(230px, -80px, 190px) scale(1.14); background: var(--blue); }
.stage-shape .node-three { transform: translate3d(-210px, 150px, 72px); background: var(--coral); }
.stage-shape .node-four { transform: translate3d(210px, 150px, 60px); background: var(--paper); }
.stage-shape .product-tabs { transform: translate3d(-220px, 30px, 180px) rotate(-8deg); }
.stage-shape .product-seo { transform: translate3d(170px, 20px, 160px) rotate(7deg); }
.stage-shape .product-prompt { transform: translate3d(0, 220px, 120px) rotate(-2deg); }
.stage-system .stage-scene { --accent: var(--coral); }
.stage-system .stage-cube { transform: translate3d(-50%, -50%, 134px) rotateX(-8deg) rotateY(214deg) rotateZ(-6deg) scale(1.03); }
.stage-system .node-one { transform: translate3d(-230px, -150px, 80px) scale(.78); opacity: .55; }
.stage-system .node-two { transform: translate3d(230px, -132px, 160px) scale(.92); background: var(--blue); }
.stage-system .node-three { transform: translate3d(-240px, 142px, 160px) scale(1.08); background: var(--coral); }
.stage-system .node-four { transform: translate3d(230px, 132px, 80px) scale(.92); background: var(--paper); }
.stage-system .product-tabs { transform: translate3d(-280px, -28px, 180px) rotate(-10deg) scale(1.04); }
.stage-system .product-seo { transform: translate3d(220px, -2px, 182px) rotate(8deg) scale(1.04); }
.stage-system .product-prompt { transform: translate3d(-28px, 238px, 160px) rotate(-3deg) scale(1.04); }
.stage-ship .stage-scene { --accent: var(--paper); }
.stage-ship .stage-cube { transform: translate3d(-50%, -50%, 150px) rotateX(-20deg) rotateY(318deg) rotateZ(9deg) scale(.94); }
.stage-ship .stage-node { opacity: .32; }
.stage-ship .node-four { transform: translate3d(0, -210px, 230px) scale(1.26); background: var(--lime); opacity: 1; }
.stage-ship .product-tabs { transform: translate3d(-228px, 108px, 210px) rotate(0deg) scale(1.08); }
.stage-ship .product-seo { transform: translate3d(16px, 168px, 210px) rotate(0deg) scale(1.08); }
.stage-ship .product-prompt { transform: translate3d(244px, 100px, 210px) rotate(0deg) scale(1.08); }

@media (max-width: 1100px) {
  .flow-stage { min-height: auto; padding: 92px 0; }
  .stage-copy, .stage-scene { grid-column: 1 / -1; }
  .stage-copy { order: 1; }
  .stage-scene { order: 2; height: 520px; min-height: 500px; margin-top: 24px; }
}
@media (max-width: 760px) {
  .flow-stage { padding: 72px 0; }
  .stage-scene { height: 360px; min-height: 350px; border-radius: 32px; }
  .stage-copy h2 { font-size: clamp(44px, 14.4vw, 68px); line-height: .88; letter-spacing: -.075em; }
  .stage-copy p:last-child { margin-top: 13px; font-size: 19px; }
  .stage-cube { width: 124px; height: 124px; }
  .cube-side { border-radius: 24px; font-size: 20px; }
  .cube-side img { border-radius: 23px; }
  .cube-side.front { transform: translateZ(62px); }
  .cube-side.back { transform: rotateY(180deg) translateZ(62px); }
  .cube-side.left { transform: rotateY(-90deg) translateZ(62px); }
  .cube-side.right { transform: rotateY(90deg) translateZ(62px); }
  .cube-side.top { transform: rotateX(90deg) translateZ(62px); }
  .cube-side.bottom { transform: rotateX(-90deg) translateZ(62px); }
  .stage-node { width: 56px; height: 56px; font-size: 11px; }
  .stage-product { padding: 8px; font-size: 0; }
  .stage-product img { width: 30px; height: 30px; }
  .stage-ring.ring-a { width: 58%; }
  .stage-ring.ring-b { width: 82%; }
  .stage-spark .node-one { transform: translate3d(-108px, -100px, 60px); }
  .stage-spark .node-two { transform: translate3d(104px, -78px, 110px); }
  .stage-spark .node-three { transform: translate3d(-104px, 104px, 92px); }
  .stage-spark .node-four { transform: translate3d(106px, 104px, 46px); }
  .stage-spark .product-tabs { transform: translate3d(-104px, 18px, 160px) rotate(-8deg); }
  .stage-spark .product-seo { transform: translate3d(86px, 32px, 150px) rotate(7deg); }
  .stage-spark .product-prompt { transform: translate3d(0, 124px, 120px) rotate(-2deg); }
  .stage-shape .node-one { transform: translate3d(-76px, -114px, 130px) scale(.82); }
  .stage-shape .node-two { transform: translate3d(108px, -70px, 170px) scale(1.08); }
  .stage-shape .node-three { transform: translate3d(-106px, 104px, 72px); }
  .stage-shape .node-four { transform: translate3d(106px, 104px, 60px); }
  .stage-shape .product-tabs { transform: translate3d(-106px, 22px, 160px) rotate(-8deg); }
  .stage-shape .product-seo { transform: translate3d(86px, 18px, 150px) rotate(7deg); }
  .stage-shape .product-prompt { transform: translate3d(0, 124px, 120px) rotate(-2deg); }
  .stage-system .node-one { transform: translate3d(-108px, -100px, 80px) scale(.78); }
  .stage-system .node-two { transform: translate3d(106px, -96px, 150px) scale(.92); }
  .stage-system .node-three { transform: translate3d(-106px, 104px, 150px) scale(1.04); }
  .stage-system .node-four { transform: translate3d(106px, 104px, 80px) scale(.92); }
  .stage-system .product-tabs { transform: translate3d(-108px, -4px, 160px) rotate(-10deg) scale(1.02); }
  .stage-system .product-seo { transform: translate3d(88px, 2px, 160px) rotate(8deg) scale(1.02); }
  .stage-system .product-prompt { transform: translate3d(0, 124px, 140px) rotate(-3deg) scale(1.02); }
  .stage-ship .node-four { transform: translate3d(0, -112px, 200px) scale(1.16); }
  .stage-ship .product-tabs { transform: translate3d(-106px, 88px, 180px) rotate(0deg) scale(1.02); }
  .stage-ship .product-seo { transform: translate3d(0, 118px, 180px) rotate(0deg) scale(1.02); }
  .stage-ship .product-prompt { transform: translate3d(106px, 88px, 180px) rotate(0deg) scale(1.02); }
}


/* v8 Lazyweb MCP-informed refinement */
.hero-copy { align-self: center; }
.hero-sub {
  width: min(680px, 94%);
  margin: 24px 0 0;
  color: rgba(248,246,234,.78);
  font-size: clamp(21px, 2.05vw, 34px);
  line-height: 1.02;
  letter-spacing: -.058em;
  font-weight: 720;
}
.hero-actions .brief-link {
  min-height: 62px;
  padding: 0 28px;
  background: var(--lime);
  box-shadow: 0 18px 56px rgba(223,255,63,.18);
}
.hero-actions .showreel {
  width: auto;
  height: 62px;
  min-width: 136px;
  padding: 0 22px 0 18px;
  grid-auto-flow: column;
  gap: 10px;
  border-radius: 999px;
  background: rgba(248,246,234,.08);
  color: rgba(248,246,234,.92);
  transform: none;
}
.hero-actions .showreel span {
  position: static;
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--blue);
}
.hero-actions .showreel:hover { transform: translateY(-2px); }
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.hero-proof span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(248,246,234,.14);
  border-radius: 999px;
  background: rgba(248,246,234,.055);
  color: rgba(248,246,234,.72);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -.025em;
}
.lab-card { background: rgba(248,249,246,.92); }
.lab-card-seo { background: #111; }

.proof-band {
  padding: 88px 0;
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid rgba(16,16,16,.08);
}
.proof-band-grid { align-items: stretch; }
.proof-band-copy { grid-column: 1 / span 5; align-self: center; }
.proof-band-copy .kicker { margin-bottom: 18px; }
.proof-band-copy h2 {
  margin: 0;
  font-size: clamp(42px, 5.6vw, 96px);
  line-height: .88;
  letter-spacing: -.085em;
  font-weight: 830;
}
.proof-band article {
  grid-column: span 2;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  border: 1px solid rgba(16,16,16,.12);
  border-radius: 30px;
  background: rgba(255,255,255,.42);
}
.proof-band article span { color: rgba(16,16,16,.42); font-size: 13px; font-weight: 950; }
.proof-band article b { display: block; margin-top: auto; font-size: clamp(32px, 3.4vw, 54px); line-height: .88; letter-spacing: -.075em; }
.proof-band article p { margin: 12px 0 0; color: rgba(16,16,16,.62); font-size: 15px; line-height: 1.22; letter-spacing: -.025em; font-weight: 680; }
.proof-band article:nth-child(3) { background: var(--mist); }
.proof-band article:nth-child(4) { background: var(--cream); }

.stage-output {
  width: fit-content;
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px 0 8px;
  border: 1px solid rgba(248,246,234,.16);
  border-radius: 999px;
  background: rgba(248,246,234,.07);
  color: rgba(248,246,234,.88);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -.03em;
}
.stage-output span {
  display: inline-grid;
  place-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.stage-copy p:last-child { max-width: 520px; }
.stage-scene::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 34px;
  pointer-events: none;
  background:
    linear-gradient(rgba(248,246,234,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,246,234,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 72%);
}
.signal-stack,
.interface-board,
.system-map,
.launch-window {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}
.signal-stack {
  left: 8%;
  top: 13%;
  display: grid;
  gap: 9px;
  transform: rotate(-8deg);
}
.signal-stack span {
  width: 116px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(16,16,16,.12);
  border-radius: 16px;
  background: rgba(248,249,246,.92);
  color: var(--ink);
  box-shadow: 0 18px 44px rgba(0,0,0,.20);
  font-size: 12px;
  font-weight: 900;
}
.interface-board {
  right: 8%;
  top: 13%;
  width: 220px;
  height: 260px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  border: 1px solid rgba(248,246,234,.18);
  border-radius: 28px;
  background: rgba(248,249,246,.12);
  backdrop-filter: blur(12px);
  transform: rotate(7deg);
}
.interface-board i {
  border-radius: 18px;
  background: rgba(248,249,246,.88);
  box-shadow: inset 0 -18px 34px rgba(137,216,255,.28);
}
.interface-board i:nth-child(1) { grid-column: 1 / -1; }
.interface-board i:nth-child(4) { background: var(--blue); }
.system-map {
  left: 8%;
  right: 8%;
  bottom: 11%;
  height: 160px;
}
.system-map::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 50%;
  border-top: 1px dashed rgba(255,114,71,.68);
}
.system-map i {
  position: absolute;
  width: 74px;
  height: 74px;
  border-radius: 24px;
  background: rgba(248,249,246,.90);
  box-shadow: 0 18px 44px rgba(0,0,0,.20);
}
.system-map i:nth-child(1) { left: 5%; top: 10%; }
.system-map i:nth-child(2) { left: 27%; bottom: 0; background: var(--coral); }
.system-map i:nth-child(3) { left: 48%; top: 0; background: var(--blue); }
.system-map i:nth-child(4) { right: 20%; bottom: 4%; background: var(--lime); }
.system-map i:nth-child(5) { right: 4%; top: 18%; }
.launch-window {
  right: 8%;
  top: 13%;
  width: min(46%, 320px);
  min-height: 190px;
  padding: 20px;
  border: 1px solid rgba(248,246,234,.18);
  border-radius: 30px;
  background: rgba(248,249,246,.92);
  color: var(--ink);
  box-shadow: 0 26px 70px rgba(0,0,0,.25);
  transform: rotate(5deg);
}
.launch-window b { display: block; font-size: 22px; line-height: .95; letter-spacing: -.055em; }
.launch-window span { display: block; margin-top: 12px; color: rgba(16,16,16,.58); font-size: 13px; font-weight: 820; }
.launch-window i {
  display: block;
  width: 88px;
  height: 88px;
  margin-top: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--lime) 54%, #111 56%);
}
.stage-spark .stage-node { border-radius: 34% 66% 53% 47%; }
.stage-shape .stage-node { opacity: .38; }
.stage-shape .stage-product { opacity: .72; }
.stage-system .stage-node { border-radius: 24px; }
.stage-system .stage-ring { opacity: .32; }
.stage-ship .stage-beam { border-style: solid; box-shadow: 0 0 52px rgba(223,255,63,.18); }

.work-tags {
  grid-column: 2;
  grid-row: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  align-self: start;
}
.work-card.feature .work-tags { grid-row: 4; }
.work-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(16,16,16,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.24);
  color: rgba(16,16,16,.68);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.work-card.feature a { grid-template-rows: auto 1fr auto auto; }
.work-card:not(.feature) a { grid-template-rows: auto auto auto auto auto; }
.work-card:not(.feature) .work-tags { grid-column: 2; grid-row: 4; }
.work-card:not(.feature) .work-media { grid-row: 5; }
.work-card p { max-width: 560px; }

.proof article p {
  margin: 16px 0 0;
  color: rgba(16,16,16,.62);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.025em;
  font-weight: 680;
}
.contact-sub {
  grid-column: 1 / span 7;
  margin: 26px 0 0;
  color: rgba(248,246,234,.72);
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 680;
}
.contact-actions { align-self: end; }

@media (max-width: 1100px) {
  .proof-band-copy, .proof-band article { grid-column: 1 / -1; }
  .proof-band-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .proof-band article { min-height: 180px; }
  .proof-band article:nth-child(n+3) { grid-column: span 4; }
  .work-card.feature .work-tags,
  .work-card:not(.feature) .work-tags { grid-column: 2; grid-row: 4; }
  .work-media,
  .work-card:not(.feature) .work-media { grid-row: 5; }
  .contact-sub { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .hero-sub {
    width: 100%;
    margin-top: 18px;
    font-size: 19px;
    line-height: 1.12;
    letter-spacing: -.045em;
  }
  .hero-actions .brief-link,
  .hero-actions .showreel { min-height: 48px; height: 48px; padding: 0 16px; font-size: 14px; }
  .hero-actions .showreel { min-width: auto; }
  .hero-proof { margin-top: 16px; gap: 6px; }
  .hero-proof span { min-height: 30px; font-size: 11px; }
  .proof-band { padding: 64px 0; }
  .proof-band-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proof-band-copy, .proof-band article, .proof-band article:nth-child(n+3) { grid-column: 1 / -1; }
  .proof-band article { min-height: 150px; padding: 18px; border-radius: 24px; }
  .proof-band-copy h2 { font-size: clamp(42px, 13.8vw, 64px); }
  .stage-output { margin-top: 18px; min-height: 36px; font-size: 12px; }
  .stage-scene::after { inset: 12px; border-radius: 24px; background-size: 34px 34px; }
  .signal-stack { left: 6%; top: 8%; gap: 6px; transform: rotate(-6deg) scale(.82); transform-origin: left top; }
  .signal-stack span { width: 94px; min-height: 34px; border-radius: 13px; font-size: 10px; }
  .interface-board { right: 5%; top: 7%; width: 148px; height: 184px; padding: 10px; border-radius: 22px; }
  .system-map { left: 2%; right: 2%; bottom: 6%; height: 122px; transform: scale(.82); transform-origin: center bottom; }
  .system-map i { width: 54px; height: 54px; border-radius: 18px; }
  .launch-window { right: 5%; top: 7%; width: 178px; min-height: 142px; padding: 14px; border-radius: 22px; }
  .launch-window b { font-size: 17px; }
  .launch-window i { width: 56px; height: 56px; margin-top: 14px; }
  .work-tags { gap: 6px; margin-top: 12px; }
  .work-tags span { min-height: 26px; padding: 0 8px; font-size: 10px; }
  .work-card.feature .work-tags,
  .work-card:not(.feature) .work-tags { grid-column: 2; grid-row: 4; }
  .work-media,
  .work-card:not(.feature) .work-media { grid-row: 5; }
  .contact-sub { grid-column: 1 / -1; margin-top: 18px; font-size: 17px; }
}

@media (max-width: 380px) {
  .hero-sub { font-size: 17px; }
  .hero-proof span { font-size: 10px; }
  .stage-output { align-items: flex-start; flex-direction: column; gap: 5px; border-radius: 20px; padding: 8px; }
}



/* v8 polish pass after visual QA */
.ticker { height: 86px; padding-block: 6px; }
.ticker span { line-height: .92; }
.stage-scene { overflow: hidden; }

@media (max-width: 760px) {
  .hero { padding: 82px 0 74px; }
  .hero-copy .kicker { margin-bottom: 16px; }
  .hero h1 { font-size: clamp(52px, 17.2vw, 84px); }
  .hero-lab { min-height: 390px; margin-top: 16px; }
  .lab-card { width: 68%; min-height: 178px; }
  .lab-card img { height: 116px; }
  .ticker { height: 58px; padding-block: 9px; }
  .ticker span { font-size: 28px; line-height: .9; }
  .stage-scene { height: 340px; min-height: 330px; }
  .stage-node { transform-origin: center; }
  .stage-product { transform-origin: center; }
  .stage-spark .product-tabs { transform: translate3d(-96px, 16px, 150px) rotate(-8deg) scale(.9); }
  .stage-spark .product-seo { transform: translate3d(78px, 28px, 140px) rotate(7deg) scale(.9); }
  .stage-spark .product-prompt { transform: translate3d(0, 108px, 110px) rotate(-2deg) scale(.9); }
  .stage-shape .product-tabs { transform: translate3d(-96px, 20px, 150px) rotate(-8deg) scale(.9); }
  .stage-shape .product-seo { transform: translate3d(78px, 16px, 140px) rotate(7deg) scale(.9); }
  .stage-shape .product-prompt { transform: translate3d(0, 108px, 110px) rotate(-2deg) scale(.9); }
  .stage-system .product-tabs { transform: translate3d(-96px, -4px, 150px) rotate(-10deg) scale(.9); }
  .stage-system .product-seo { transform: translate3d(78px, 2px, 150px) rotate(8deg) scale(.9); }
  .stage-system .product-prompt { transform: translate3d(0, 108px, 130px) rotate(-3deg) scale(.9); }
  .stage-ship .product-tabs { transform: translate3d(-92px, 78px, 170px) rotate(0deg) scale(.9); }
  .stage-ship .product-seo { transform: translate3d(0, 104px, 170px) rotate(0deg) scale(.9); }
  .stage-ship .product-prompt { transform: translate3d(92px, 78px, 170px) rotate(0deg) scale(.9); }
  .work-card h3 { margin-top: 38px; font-size: clamp(40px, 13.2vw, 64px); line-height: .88; }
  .work-card p { margin-top: 4px; line-height: 1.18; }
  .footer-ticker { display: none; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 48px; }
  .hero-lab { min-height: 360px; }
  .ticker span { font-size: 25px; }
  .stage-scene { height: 318px; min-height: 310px; }
  .work-card h3 { font-size: 39px; }
}



/* v8 flow-stage clipping fix */
.stage-shape .node-two { transform: translate3d(204px, -126px, 190px) scale(1.08); }
.stage-ship .product-prompt { transform: translate3d(198px, 88px, 210px) rotate(0deg) scale(1.04); }
@media (max-width: 760px) {
  .stage-shape .node-two { transform: translate3d(96px, -82px, 160px) scale(.98); }
  .stage-ship .product-prompt { transform: translate3d(78px, 74px, 170px) rotate(0deg) scale(.86); }
}

/* v10 real-time WebGL launch flow — current CSS 3D implementation removed */
.flow-sequence {
  --flow-active: var(--lime);
  --flow-active-rgb: 223, 255, 63;
  position: relative;
  min-height: 205svh;
  padding: 0;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 20%, rgba(223,255,63,.11), transparent 32rem),
    radial-gradient(circle at 86% 44%, rgba(137,216,255,.13), transparent 34rem),
    radial-gradient(circle at 52% 92%, rgba(255,114,71,.10), transparent 30rem),
    linear-gradient(180deg, #0e0e0d 0%, #14110f 52%, #0e0e0d 100%);
  border-top: 1px solid rgba(248,246,234,.12);
}
.flow-sequence[data-step="1"] { --flow-active: var(--blue); --flow-active-rgb: 137, 216, 255; }
.flow-sequence[data-step="2"] { --flow-active: var(--lime); --flow-active-rgb: 223, 255, 63; }
.flow-atmosphere {
  position: absolute;
  inset: 34px 18px;
  z-index: -1;
  border: 1px solid rgba(248,246,234,.075);
  border-radius: 58px;
  background:
    linear-gradient(rgba(248,246,234,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,246,234,.028) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 62% 46%, black, transparent 78%);
}
.flow-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--flow-pointer-x, 62%) var(--flow-pointer-y, 46%), rgba(var(--flow-active-rgb), .13), transparent 26rem);
}
.flow-link-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.flow-link-layer path {
  fill: none;
  stroke: rgba(var(--flow-active-rgb), .58);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 10 14;
  filter: drop-shadow(0 0 14px rgba(var(--flow-active-rgb), .36));
}
.flow-sequence .flow-grid {
  position: sticky;
  top: 0;
  min-height: 100svh;
  align-items: center;
  padding: 110px 0 76px;
}
.flow-sequence .flow-copy {
  grid-column: 1 / span 5;
  position: relative;
  z-index: 5;
}
.flow-sequence .flow-copy h2 {
  margin: 18px 0 0;
  max-width: 690px;
  font-size: clamp(58px, 7.7vw, 126px);
  line-height: .84;
  letter-spacing: -.09em;
  font-weight: 830;
}
.flow-intro {
  max-width: 540px;
  margin: 22px 0 0;
  color: rgba(248,246,234,.80);
  font-size: clamp(19px, 1.65vw, 28px);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 700;
}
.sequence-rail {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 34px 0 0;
  padding: 0;
}
.sequence-label {
  --rail-x: 0px;
  --rail-y: 0px;
  --rail-scale: .985;
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px 14px;
  align-items: center;
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid rgba(248,246,234,.11);
  border-radius: 28px;
  background: rgba(248,246,234,.046);
  color: rgba(248,246,234,.62);
  opacity: .72;
  transform: translate3d(var(--rail-x), var(--rail-y), 0) scale(var(--rail-scale));
  transition: color .32s var(--ease), border-color .32s var(--ease), background .32s var(--ease), opacity .32s var(--ease);
  will-change: transform, opacity;
  cursor: pointer;
}
.sequence-label::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateY(-50%) scale(.6);
  background: var(--flow-active);
  opacity: 0;
  box-shadow: 0 0 18px rgba(var(--flow-active-rgb), .7);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.sequence-label:hover,
.sequence-label:focus-visible {
  border-color: rgba(var(--flow-active-rgb), .34);
  background: rgba(248,246,234,.07);
  color: rgba(248,246,234,.86);
}
.sequence-label span {
  grid-row: span 2;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(248,246,234,.08);
  color: currentColor;
  font-size: 13px;
  font-weight: 950;
}
.sequence-label b {
  font-size: clamp(25px, 2.2vw, 38px);
  line-height: .9;
  letter-spacing: -.075em;
}
.sequence-label em {
  color: rgba(248,246,234,.58);
  font-style: normal;
  font-size: 14px;
  font-weight: 760;
  letter-spacing: -.02em;
}
.flow-sequence[data-step="0"] .sequence-label[data-flow-step="0"],
.flow-sequence[data-step="1"] .sequence-label[data-flow-step="1"],
.flow-sequence[data-step="2"] .sequence-label[data-flow-step="2"] {
  opacity: 1;
  color: var(--paper);
  border-color: rgba(var(--flow-active-rgb), .46);
  background: linear-gradient(135deg, rgba(var(--flow-active-rgb), .16), rgba(248,246,234,.052));
}
.flow-sequence[data-step="0"] .sequence-label[data-flow-step="0"]::after,
.flow-sequence[data-step="1"] .sequence-label[data-flow-step="1"]::after,
.flow-sequence[data-step="2"] .sequence-label[data-flow-step="2"]::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.flow-sequence[data-step="0"] .sequence-label[data-flow-step="0"] span,
.flow-sequence[data-step="1"] .sequence-label[data-flow-step="1"] span,
.flow-sequence[data-step="2"] .sequence-label[data-flow-step="2"] span {
  background: var(--flow-active);
  color: var(--ink);
}
.flow-sequence .flow-visual-wrap {
  top: auto;
  grid-column: 6 / -1;
  position: relative;
  height: min(76svh, 810px);
  min-height: 590px;
  display: grid;
  place-items: center;
  overflow: visible;
}
.flow-sequence .flow-scene-webgl {
  transform: none;
  --accent: var(--lime);
  position: relative;
  width: min(100%, 860px);
  height: 100%;
  min-height: 560px;
  border: 1px solid rgba(248,246,234,.13);
  border-radius: 54px;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--scene-glow-x, 50%) var(--scene-glow-y, 48%), rgba(var(--flow-active-rgb), .24), transparent 52%),
    linear-gradient(142deg, rgba(248,246,234,.08), rgba(248,246,234,.018));
  box-shadow: inset 0 1px 0 rgba(248,246,234,.14), 0 38px 120px rgba(0,0,0,.34);
  contain: layout paint;
  cursor: grab;
  touch-action: none;
}
.flow-sequence .flow-scene-webgl.is-dragging {
  cursor: grabbing;
}
.flow-scene-webgl::before,
.flow-scene-webgl::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.flow-scene-webgl::before {
  inset: 20px;
  border-radius: 38px;
  background:
    linear-gradient(rgba(248,246,234,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,246,234,.055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 52%, black, transparent 74%);
  opacity: .62;
}
.flow-scene-webgl::after {
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%, transparent 78%, rgba(0,0,0,.20));
  mix-blend-mode: screen;
  opacity: .55;
}
.flow-webgl-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}
.flow-depth-labels {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  perspective: 900px;
}
.flow-depth-label {
  --label-x: 50%;
  --label-y: 50%;
  --label-scale: 1;
  --label-opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  max-width: min(330px, 46%);
  padding: 13px 15px 14px;
  border: 1px solid rgba(248,246,234,.16);
  border-radius: 22px;
  background: rgba(16,16,16,.52);
  color: var(--paper);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  transform: translate3d(calc(var(--label-x) - 50%), calc(var(--label-y) - 50%), 0) scale(var(--label-scale));
  opacity: var(--label-opacity);
  filter: blur(var(--label-blur, 0px));
  will-change: transform, opacity, filter;
}
.flow-depth-label b {
  display: block;
  font-size: clamp(20px, 1.72vw, 30px);
  line-height: .9;
  letter-spacing: -.07em;
  font-weight: 890;
}
.flow-depth-label em {
  display: block;
  margin-top: 7px;
  color: rgba(248,246,234,.62);
  font-style: normal;
  font-size: 12px;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 760;
}
.flow-face-panel {
  --face-accent: var(--lime);
  position: absolute;
  z-index: 8;
  left: 22px;
  bottom: 22px;
  width: min(350px, 48%);
  padding: 15px 16px 16px;
  border: 1px solid color-mix(in srgb, var(--face-accent) 42%, transparent);
  border-radius: 24px;
  background: rgba(16,16,16,.56);
  color: var(--paper);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 82px rgba(0,0,0,.28), inset 0 1px 0 rgba(248,246,234,.10);
  pointer-events: none;
}
.flow-face-panel span {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--face-accent);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 950;
}
.flow-face-panel b {
  display: block;
  margin-top: 10px;
  font-size: clamp(22px, 1.9vw, 32px);
  line-height: .9;
  letter-spacing: -.07em;
  font-weight: 900;
}
.flow-face-panel em {
  display: block;
  margin-top: 8px;
  color: rgba(248,246,234,.68);
  font-style: normal;
  font-size: 13px;
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 750;
}
.flow-drag-hint {
  position: absolute;
  z-index: 8;
  right: 22px;
  top: 22px;
  min-height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0 14px;
  border: 1px solid rgba(248,246,234,.14);
  border-radius: 999px;
  background: rgba(16,16,16,.42);
  color: rgba(248,246,234,.74);
  backdrop-filter: blur(14px);
  font-size: 12px;
  font-weight: 880;
  letter-spacing: -.03em;
  pointer-events: none;
}
.flow-telemetry,
.flow-live-readout {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  border: 1px solid rgba(248,246,234,.15);
  background: rgba(16,16,16,.48);
  color: var(--paper);
  backdrop-filter: blur(16px);
}
.flow-telemetry {
  left: 22px;
  top: 22px;
  min-width: 180px;
  padding: 14px 15px;
  border-radius: 22px;
}
.flow-telemetry span,
.flow-live-readout span {
  display: block;
  color: rgba(248,246,234,.48);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 10px;
  font-weight: 920;
}
.flow-telemetry b {
  display: block;
  margin-top: 7px;
  font-size: 18px;
  line-height: .95;
  letter-spacing: -.055em;
}
.flow-live-readout {
  right: 22px;
  bottom: 22px;
  min-width: min(330px, 48%);
  padding: 15px 18px;
  border-radius: 999px;
}
.flow-live-readout b {
  display: block;
  margin-top: 5px;
  color: var(--lime);
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: .95;
  letter-spacing: -.06em;
}
.flow-progress {
  display: none;
  position: absolute;
  z-index: 7;
  right: 18px;
  top: 50%;
  width: 3px;
  height: 184px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(248,246,234,.14);
  overflow: hidden;
}
.flow-progress span {
  display: block;
  width: 100%;
  height: 33.333%;
  border-radius: inherit;
  background: var(--flow-active);
  box-shadow: 0 0 22px rgba(var(--flow-active-rgb), .58);
  transform-origin: top;
  transition: height .42s var(--ease), background .42s var(--ease);
}
.flow-scene-webgl noscript img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 36px;
}

@media (max-width: 1100px) {
  .flow-link-layer path { stroke-width: 2; stroke-dasharray: 7 12; opacity: .72; }
  .flow-sequence { min-height: 190svh; }
  .flow-sequence .flow-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); padding: 92px 0 64px; align-content: center; }
  .flow-sequence .flow-copy { grid-column: 1 / -1; }
  .flow-sequence .flow-copy { grid-column: 1 / -1; grid-row: auto; order: 0; }
  .flow-sequence .flow-visual-wrap { grid-column: 1 / -1; grid-row: auto; order: 0; height: 56svh; min-height: 500px; margin-top: 24px; }
  .sequence-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sequence-label { grid-template-columns: 1fr; min-height: 132px; align-content: start; }
  .sequence-label span { grid-row: auto; }
}
@media (max-width: 760px) {
  .flow-sequence { min-height: 188svh; }
  .flow-atmosphere { inset: 18px 10px; border-radius: 34px; background-size: 34px 34px; }
  .flow-sequence .flow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 80px 0 42px; }
  .flow-sequence .flow-copy h2 { font-size: clamp(44px, 14.4vw, 68px); line-height: .88; letter-spacing: -.075em; }
  .flow-intro { font-size: 17px; }
  .sequence-rail { grid-template-columns: 1fr; gap: 8px; margin-top: 22px; }
  .sequence-label { grid-template-columns: 42px 1fr; min-height: 76px; padding: 12px 13px; border-radius: 22px; }
  .sequence-label span { width: 42px; height: 42px; border-radius: 14px; grid-row: span 2; }
  .sequence-label b { font-size: 24px; }
  .sequence-label em { font-size: 12px; }
  .flow-sequence .flow-visual-wrap { height: 440px; min-height: 420px; margin-top: 18px; }
  .flow-sequence .flow-scene-webgl { border-radius: 34px; min-height: 420px; }
  .flow-scene-webgl::before { inset: 12px; border-radius: 25px; background-size: 32px 32px; }
  .flow-depth-label { max-width: 58%; padding: 10px 11px; border-radius: 18px; }
  .flow-depth-label b { font-size: 18px; }
  .flow-depth-label em { display: none; }
  .flow-telemetry { left: 14px; top: 14px; min-width: 138px; padding: 10px 11px; border-radius: 17px; }
  .flow-telemetry b { font-size: 14px; }
  .flow-drag-hint { right: 14px; top: 14px; min-height: 34px; padding: 0 10px; font-size: 11px; }
  .flow-face-panel { left: 14px; bottom: 14px; width: min(258px, 68%); padding: 11px 12px 12px; border-radius: 19px; }
  .flow-face-panel b { font-size: 19px; }
  .flow-face-panel em { display: none; }
  .flow-live-readout { right: 14px; bottom: 14px; min-width: 0; max-width: 58%; padding: 11px 13px; }
  .flow-live-readout b { font-size: 14px; }
  .flow-progress { right: 12px; height: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-depth-label,
  .sequence-label { transition: none; }
}