/* ============================================================
   TALBERN - Consolidated Stylesheet
   Building what comes next.
   ============================================================ */

/* ------------ 1. TOKENS & RESET ------------ */
:root {
  --navy:    #0E1B2E;
  --navy-2:  #16263b;
  --navy-3:  #0a1422;
  --charcoal:#2B2E33;
  --bronze:  #B08D57;
  --bronze-d:#9a7a47;
  --stone:   #F7F5F1;
  --sand:    #ece8df;
  --paper:   #fbfaf7;
  --text:    #1a2433;
  --muted:   #64707b;
  --line:    #dbd8d1;
  --line-dk: rgba(247,245,241,.13);
  --container: 1200px;
  --r: 16px;
  --shadow: 0 18px 52px rgba(14,27,46,.10);
  --shadow-lg: 0 32px 80px rgba(14,27,46,.18);
  --ease: cubic-bezier(.22,1,.36,1);
  --section: clamp(5.5rem,9vw,9rem);
}

*,*::before,*::after { box-sizing:border-box; margin:0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  max-width: 100%;
  overflow-x: clip;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar { display:none; width:0; height:0; }

body {
  background: var(--stone);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(1rem,1rem + .12vw,1.14rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before {
  position: fixed; z-index:200; top:0; left:0;
  width: var(--scroll-progress,0); height: 2px;
  background: var(--bronze); content:'';
}
body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img,svg { display: block; max-width: 100%; }
button,input,select,textarea { font: inherit; }
button { color: inherit; }
p { max-width: 66ch; margin-top:0; }
h1,h2,h3,h4 { margin-top:0; line-height:1.06; letter-spacing:-.04em; font-weight:600; }
h1 { font-size: clamp(3.6rem,6vw,6.8rem); max-width: 12ch; margin-bottom:1.5rem; }
h2 { font-size: clamp(2.5rem,4.2vw,4.8rem); max-width: 18ch; margin-bottom:1.25rem; }
h3 { font-size: clamp(1.3rem,1.8vw,1.75rem); margin-bottom:.65rem; }
::selection { background: #d9c39e; color: var(--navy); }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }

/* ------------ 2. UTILITIES ------------ */
.container { width: min(calc(100% - 3rem), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section-compact { padding-block: clamp(3.5rem,6vw,6.5rem); }
.surface { background: var(--paper); }
.sand { background: var(--sand); }
.dark { background: var(--navy); color: var(--stone); }
.eyebrow {
  margin:0 0 1.1rem; color: var(--bronze);
  font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.lede { color: var(--muted); font-size: clamp(1.1rem,1.3vw,1.28rem); line-height:1.52; }
.dark .lede, .dark .muted { color: rgba(247,245,241,.66); }
.section-head {
  margin-bottom: clamp(2.5rem,5vw,4.5rem);
  max-width: 52rem;
}
.section-head > * { margin-bottom:0; }
.section-head .lede { margin-top:.9rem; }
.skip-link {
  position:fixed; z-index:300; top:1rem; left:1rem;
  padding:.6rem 1rem; background:var(--paper);
  transform:translateY(-200%); transition: transform .2s;
}
.skip-link:focus { transform:none; }

/* Call to action block */
.cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
}
.cta h2 { margin-bottom: 0.6rem; }
@media(max-width: 640px) {
  .cta { display: block; }
  .cta .button { margin-top: 1.4rem; }
}

/* ------------ 3. HEADER & NAV ------------ */
.site-header {
  position:fixed; z-index:100; top:0; width:100%;
  border-bottom:1px solid rgba(14,27,46,.07);
  background: rgba(247,245,241,.94);
  backdrop-filter: blur(18px);
  transition: box-shadow .25s ease;
  color: var(--navy);
}
.site-header.scrolled { box-shadow: 0 6px 28px rgba(14,27,46,.07); }
.nav {
  display:flex; min-height:78px; align-items:center;
  justify-content:space-between; gap:2rem;
}
.wordmark {
  position:relative; z-index:3;
  display:inline-flex; align-items:center; gap:.68rem;
  font-size:.88rem; font-weight:750; letter-spacing:.2em;
}
.brand-symbol { width:32px; height:32px; flex:none; object-fit:contain; }
.nav-links {
  display:flex; align-items:center; gap:clamp(1rem,2vw,2rem);
  margin:0; padding:0; list-style:none; font-size:.88rem;
}
.nav-links a:not(.button) { position:relative; }
.nav-links a:not(.button)::after {
  position:absolute; right:0; bottom:-.3rem; left:0;
  height:1px; background:var(--bronze); content:'';
  transform:scaleX(0); transform-origin:right;
  transition: transform .25s ease;
}
.nav-links a:hover::after,
.nav-links a[aria-current=page]::after {
  transform:scaleX(1); transform-origin:left;
}
.menu-toggle {
  display:none; position:relative; z-index:3;
  width:44px; height:44px; padding:0;
  border:1px solid var(--line); border-radius:50%;
  background:transparent; cursor:pointer;
}
.menu-toggle span {
  display:block; width:16px; height:1.5px;
  margin:5px auto; background:currentColor;
  transition: transform .25s ease;
}

/* ------------ 4. BUTTONS ------------ */
.button {
  display:inline-flex; min-height:44px; align-items:center;
  justify-content:center; gap:.55rem; padding:.62rem 1.1rem;
  border:1px solid var(--navy); border-radius:999px;
  background:var(--navy); color:var(--stone);
  font-size:.86rem; font-weight:650;
  transition: background .25s, color .25s, transform .25s var(--ease), border-color .25s;
  cursor:pointer;
}
.button:hover { transform:translateY(-2px); }
.button .arrow { transition: transform .25s var(--ease); }
.button:hover .arrow { transform: translate(.15rem,-.15rem); }
.button.light { border-color:var(--stone); background:var(--stone); color:var(--navy); }
.button.outline { background:transparent; color:var(--navy); }
.dark .button.outline { border-color: rgba(247,245,241,.5); color:var(--stone); }
.button-row { display:flex; flex-wrap:wrap; gap:.7rem; }

/* ------------ 5. REVEALS ------------ */
[data-reveal] {
  opacity:0; transform:translateY(22px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  transition-delay: var(--delay,0ms);
}
[data-reveal].revealed { opacity:1; transform:none; }
[data-reveal="scale"]         { transform:scale(.94); transition-duration:.8s; }
[data-reveal="scale"].revealed { transform:scale(1); }
[data-reveal="system"]         { transform:translateX(30px) scale(.97); transition-duration:.9s; }
[data-reveal="system"].revealed { transform:none; }
[data-reveal="text"] {
  clip-path:inset(0 0 100% 0); transform:none;
  transition: clip-path .7s var(--ease), opacity .5s ease;
}
[data-reveal="text"].revealed { clip-path:inset(0); }
[data-reveal="line"] { transform:none; }

/* ------------ 6. HOMEPAGE HERO ------------ */
.m-hero {
  position:relative; overflow:hidden; padding-top:78px;
  background:var(--navy); color:var(--stone);
}
.m-hero::after {
  position:absolute; right:-20vw; bottom:-38vw;
  width:70vw; height:70vw;
  border:1px solid rgba(176,141,87,.1); border-radius:50%; content:''; pointer-events:none;
}
.m-hero-grid {
  display:grid; gap:clamp(2rem,4.5vw,5rem);
  grid-template-columns: minmax(0,.82fr) minmax(460px,1.18fr);
  min-height:calc(100svh - 78px);
  align-items:center;
  padding-block: clamp(3rem,5.5vw,5.5rem);
}
.m-hero h1 { max-width:10ch; font-size:clamp(3.8rem,5.8vw,6.8rem); }
.m-hero .lede { max-width:36rem; margin-bottom:1.8rem; color:rgba(247,245,241,.68); }
.m-hero-context {
  margin-bottom:1rem; color:#d4b98c;
  font-size:.7rem; font-weight:700; letter-spacing:.14em;
}
.m-hero-context span { color:rgba(247,245,241,.28); }
.m-hero .button.outline { border-color:rgba(247,245,241,.45); color:var(--stone); }
.hero-copy > * { opacity:0; animation:enter .65s var(--ease) forwards; }
.hero-copy > :nth-child(1) { animation-delay:.07s; }
.hero-copy > :nth-child(2) { animation-delay:.14s; }
.hero-copy > :nth-child(3) { animation-delay:.22s; }
.hero-copy > :nth-child(4) { animation-delay:.3s; }
.hero-copy > :nth-child(5) { animation-delay:.38s; }
@keyframes enter { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* Hero visual stage */
.m-hero-visual { position:relative; min-height:520px; perspective:1300px; }
.m-stage {
  position:absolute; inset:3% 0 0 2%;
  transform-style:preserve-3d;
  transition: transform .22s ease-out;
  opacity:1; animation:system-enter .8s .18s var(--ease) backwards;
}
@keyframes system-enter { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:none; } }

/* Desktop hero refinement: retain the composition with a safer visual boundary. */
@media(min-width:1025px) {
  .m-hero h1 { font-size:clamp(3.55rem,5.4vw,6.35rem); }
  .m-hero-visual { width:100%; min-width:0; max-width:690px; justify-self:end; }
  .m-stage { inset:4% 3% 3%; transform-origin:center; }
}
@media(min-width:1025px) and (max-width:1280px) {
  .m-hero-grid { grid-template-columns:minmax(0,.86fr) minmax(450px,1.14fr); gap:clamp(1.5rem,3vw,2.5rem); }
  .m-hero-visual { min-height:480px; }
  .m-stage { inset:5% 3.5% 4% 2%; }
}
.m-orbit {
  position:absolute; inset:4% 0 1% 6%;
  border:1px solid rgba(247,245,241,.08); border-radius:47% 53% 48% 52%;
  animation: soft-orbit 20s linear infinite; pointer-events:none;
}
.m-orbit:nth-child(2) { inset:17% 9% 7% 0; animation-direction:reverse; animation-duration:27s; }
@keyframes soft-orbit { to { transform:rotate(360deg); } }

.m-panel {
  position:absolute; overflow:hidden;
  border:1px solid rgba(247,245,241,.14); background:#152540;
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
  opacity:0; animation:panel-in .7s var(--ease) forwards;
}
@keyframes panel-in {
  from { opacity:0; transform:translateY(26px) rotateX(7deg); }
  to   { opacity:1; transform:none; }
}
.m-ui { z-index:3; top:7%; left:2%; width:56%; height:48%; border-radius:13px; animation-delay:.24s; }
.m-ui-top { height:28px; border-bottom:1px solid rgba(247,245,241,.11); }
.m-ui-body { display:grid; height:calc(100% - 28px); grid-template-columns:42px 1fr; }
.m-ui-nav { border-right:1px solid rgba(247,245,241,.09); background:#0b1c2e; }
.m-ui-content { padding:16px; }
.m-ui-line { width:54%; height:7px; margin-bottom:12px; border-radius:4px; background:rgba(247,245,241,.6); }
.m-ui-line.small { width:33%; background:var(--bronze); }
.m-ui-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.m-ui-cards i { height:40px; border:1px solid rgba(247,245,241,.11); border-radius:5px; background:rgba(247,245,241,.04); }
.m-ui-wave { position:relative; height:68px; margin-top:9px; overflow:hidden; border:1px solid rgba(247,245,241,.09); border-radius:5px; }
.m-ui-wave svg { width:100%; height:100%; }
.m-ui-wave path {
  fill:none; stroke:var(--bronze); stroke-width:1.5;
  stroke-dasharray:330; stroke-dashoffset:330;
  animation:path-draw 1.4s 1s var(--ease) forwards;
}
.m-code {
  z-index:2; top:17%; right:1%; width:43%; height:34%;
  padding:18px; border-radius:10px;
  color:#a6b4c4; font:500 .6rem/1.85 ui-monospace,monospace;
  animation-delay:.4s;
}
.m-code b { color:#d4b176; }
.m-data { z-index:4; right:13%; bottom:12%; width:33%; height:31%; border-radius:50%; background:#101d2e; animation-delay:.56s; }
.m-data svg { width:100%; height:100%; }
.m-data line { stroke:rgba(247,245,241,.22); stroke-width:1; stroke-dasharray:100; animation:path-draw 1s 1.1s var(--ease) both; }
.m-data circle {
  fill:var(--navy); stroke:var(--bronze); stroke-width:2;
  transform-box:fill-box; transform-origin:center;
  animation:node-pop .4s var(--d) var(--ease) both;
}
.m-data circle:nth-of-type(1){--d:1s} .m-data circle:nth-of-type(2){--d:1.1s}
.m-data circle:nth-of-type(3){--d:1.2s} .m-data circle:nth-of-type(4){--d:1.3s}
.m-data circle:nth-of-type(5){--d:1.4s}
@keyframes node-pop { from { opacity:0; transform:scale(0); } to { opacity:1; transform:scale(1); } }
.m-device {
  z-index:5; bottom:4%; left:9%; width:31%; height:28%;
  border-radius:17px; animation-delay:.7s;
}
.m-device::before { position:absolute; inset:20%; border:1px solid var(--bronze); border-radius:6px; content:''; }
.m-device::after {
  position:absolute; top:50%; left:50%; width:7px; height:7px;
  border-radius:50%; background:var(--bronze); content:'';
  box-shadow:0 0 0 0 rgba(176,141,87,.4);
  animation:node-pulse 2s infinite;
}
@keyframes node-pulse { 50% { box-shadow:0 0 0 10px rgba(176,141,87,0); } }
.m-frame { z-index:1; right:0; bottom:0; width:24%; height:48%; border-radius:7px; background:linear-gradient(145deg,#354a61,#14263c); animation-delay:.88s; }
.m-frame::before {
  position:absolute; inset:9px; border:1px solid rgba(247,245,241,.16);
  content:'08 / 24'; display:flex; align-items:flex-end; padding:8px;
  color:rgba(247,245,241,.48); font:600 .52rem monospace;
}
.m-path { position:absolute; z-index:6; pointer-events:none; }
.m-path svg { overflow:visible; }
.m-path path { fill:none; stroke:var(--bronze); stroke-width:1; stroke-dasharray:5 8; animation:dash 18s linear infinite; }
.path-a { top:47%; left:35%; width:37%; }
.path-b { bottom:26%; left:33%; width:28%; transform:rotate(18deg); }
@keyframes path-draw { to { stroke-dashoffset:0; } }
@keyframes dash { to { stroke-dashoffset:-300; } }
.hero-index { position:absolute; right:2%; bottom:1%; color:rgba(247,245,241,.3); font:.56rem monospace; letter-spacing:.12em; }

/* ------------ 7. REEL / TICKER ------------ */
.reel {
  overflow:hidden; border-top:1px solid rgba(247,245,241,.1);
  background:var(--navy); color:rgba(247,245,241,.52);
}
.reel-track { display:flex; width:max-content; animation:reel 38s linear infinite; }
.reel-track div { flex:none; padding:12px 0; font:600 .62rem monospace; letter-spacing:.13em; }
.reel-track span { margin-inline:1.4rem; color:var(--bronze); }
@keyframes reel { to { transform:translateX(-50%); } }

/* ------------ 8. SHOWCASE / WORK PREVIEWS (HOME) ------------ */
.showcase { overflow:hidden; background:#091422; color:var(--stone); }
.showcase-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2.5rem; margin-bottom:3rem;
}
.showcase-head h2 { margin:0; }
.case-stack { display:grid; gap:clamp(2rem,4.5vw,4.5rem); }
.case-panel { display:grid; grid-template-columns:1.28fr .72fr; gap:clamp(2rem,4.5vw,4.5rem); align-items:center; }
.case-panel:nth-child(even) { grid-template-columns:.72fr 1.28fr; }
.case-panel:nth-child(even) .case-visual { order:2; }
.case-visual {
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:16px; background:#172940;
  clip-path:inset(0 100% 0 0 round 16px);
  transition: clip-path .9s var(--ease);
}
.case-panel.revealed .case-visual { clip-path:inset(0 0 0 0 round 16px); }
.case-visual::before {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(247,245,241,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.05) 1px,transparent 1px);
  background-size:48px 48px; content:'';
}
.case-one .case-core {
  position:absolute; inset:14%;
  border:1px solid rgba(247,245,241,.16); border-radius:10px;
  background:#0e1b2e; box-shadow:0 20px 42px rgba(0,0,0,.24);
  transition: transform .55s var(--ease);
}
.case-one:hover .case-core { transform:scale(1.025); }
.case-core::before {
  position:absolute; top:16%; left:8%; width:40%; height:7px;
  border-radius:5px; background:var(--bronze); content:'';
}
.case-core::after {
  position:absolute; right:8%; bottom:11%; left:8%; height:46%;
  border:1px solid rgba(247,245,241,.11); border-radius:6px;
  background:linear-gradient(120deg,transparent 50%,rgba(176,141,87,.14)); content:'';
}
.case-two { background:#d5cfc3; }
.case-device {
  position:absolute; top:16%; left:15%; width:36%; height:66%;
  border:2px solid var(--navy); border-radius:24px;
  background:var(--paper); box-shadow:var(--shadow);
  transform:rotate(-5deg); transition: transform .6s var(--ease);
}
.case-device::after { position:absolute; inset:20%; border:1px solid var(--bronze); border-radius:8px; content:''; }
.case-two:hover .case-device { transform:rotate(-2deg) translateY(-8px); }
.case-signal {
  position:absolute; top:50%; right:12%; width:34%; height:1px; background:var(--bronze);
}
.case-signal::after {
  position:absolute; right:0; top:-4px; width:9px; height:9px;
  border-radius:50%; background:var(--bronze); content:'';
  animation:node-pulse 2s infinite;
}
.case-three { background:#2b2e33; }
.case-frame-grid { position:absolute; inset:12%; display:grid; grid-template-columns:1fr 1fr; gap:8px; transform:rotate(2deg); }
.case-frame-grid i { border-radius:5px; background:#182a40; }
.case-frame-grid i:nth-child(2) { background:#b08d57; }
.case-frame-grid i:nth-child(3) { grid-column:span 2; background:#f7f5f1; }
.case-info .case-no { color:var(--bronze); font:.62rem monospace; letter-spacing:.12em; }
.case-info h3 { margin-top:.9rem; font-size:clamp(1.9rem,3.2vw,3.6rem); }
.case-info p { color:rgba(247,245,241,.6); }
.case-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:1.1rem; }
.case-tags span { padding:4px 9px; border:1px solid rgba(247,245,241,.18); border-radius:99px; font-size:.63rem; }

/* ------------ 9. CAPABILITY STORY (HOME) ------------ */
.cap-story { position:relative; background:var(--stone); }
.cap-layout {
  display:grid; grid-template-columns:minmax(280px,.72fr) minmax(460px,1.28fr);
  gap:clamp(2.5rem,6vw,6.5rem);
}
.cap-scroll { padding-bottom:12vh; }
.cap-intro { margin-bottom:6vh; }
.cap-item {
  min-height:65vh; display:flex; flex-direction:column; justify-content:center;
  padding-block:3.5rem; border-bottom:1px solid var(--line);
  opacity:.35; transition: opacity .4s ease;
}
.cap-item.is-active { opacity:1; }
.cap-count { color:var(--bronze); font:.62rem monospace; }
.cap-item h3 { margin-top:.9rem; font-size:clamp(2.2rem,3.8vw,4.2rem); }
.cap-item p { color:var(--muted); }
.cap-item ul { display:flex; flex-wrap:wrap; gap:6px; margin:1rem 0 0; padding:0; list-style:none; }
.cap-item li { padding:4px 9px; border-radius:99px; background:#e7e3db; font-size:.65rem; }
.cap-visual-wrap { position:sticky; top:100px; height:calc(100vh - 130px); min-height:500px; align-self:start; }
.cap-visual { position:absolute; inset:0; overflow:hidden; border-radius:20px; background:var(--navy); box-shadow:var(--shadow-lg); }
.cap-scene {
  position:absolute; inset:0; padding:8%;
  color:var(--stone); opacity:0; transform:scale(.96);
  transition: opacity .5s ease, transform .6s var(--ease);
  pointer-events:none;
}
.cap-scene.active { opacity:1; transform:none; }
.cap-scene:not(.active) * { animation-play-state:paused; }
.scene-meta { display:flex; justify-content:space-between; color:rgba(247,245,241,.38); font:.55rem monospace; letter-spacing:.1em; }

/* Scene: Software */
.scene-software .assembly { position:absolute; inset:20% 12% 12%; border:1px solid rgba(247,245,241,.15); border-radius:12px; background:#14263e; }
.assembly .piece {
  position:absolute; border:1px solid rgba(247,245,241,.13); border-radius:5px;
  background:rgba(247,245,241,.04);
  transform:translate(var(--x),var(--y)); transition:transform .8s var(--ease);
}
.active .assembly .piece { transform:none; }
.piece.p1 { inset:8% 72% 8% 4%; --x:-48px; --y:0; }
.piece.p2 { inset:8% 4% 72% 32%; --x:0; --y:-48px; }
.piece.p3 { inset:30% 4% 8% 32%; --x:42px; --y:18px; }

/* Scene: AI */
.scene-ai .ai-flow { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:center; height:80%; }
.ai-node {
  position:relative; display:grid; aspect-ratio:1; place-items:center;
  border:1px solid rgba(247,245,241,.17); border-radius:50%;
  font:.56rem monospace;
}
.ai-node:not(:last-child)::after {
  position:absolute; left:100%; width:16px; height:1px;
  background:var(--bronze); content:'';
  transform:scaleX(0); transform-origin:left;
  transition: transform .35s var(--d) ease;
}
.active .ai-node::after { transform:scaleX(1); }
.ai-node:nth-child(1){--d:.1s} .ai-node:nth-child(2){--d:.25s} .ai-node:nth-child(3){--d:.4s}

/* Scene: Embedded */
.scene-embedded .device-map { position:absolute; inset:22% 10%; }
.device-map svg { width:100%; height:100%; }
.device-map path { fill:none; stroke:var(--bronze); stroke-width:1; stroke-dasharray:7 8; animation:dash 16s linear infinite; }
.device-map rect,.device-map circle { fill:#152940; stroke:rgba(247,245,241,.28); }

/* Scene: Design */
.scene-design .design-stages { position:absolute; inset:19% 9%; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.stage-wire,.stage-finish { border:1px solid rgba(247,245,241,.14); border-radius:10px; }
.stage-wire {
  background-image:linear-gradient(rgba(247,245,241,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.07) 1px,transparent 1px);
  background-size:25px 25px; transform:translateX(33px); transition: transform .7s var(--ease);
}
.stage-finish { padding:18px; background:var(--paper); transform:translateX(-33px); transition: transform .7s var(--ease); }
.active .stage-wire,.active .stage-finish { transform:none; }
.stage-finish i { display:block; height:8px; margin-bottom:11px; border-radius:4px; background:var(--navy); }
.stage-finish i:nth-child(2) { width:60%; background:var(--bronze); }
.stage-finish i:nth-child(3) { height:85px; background:#e3ddd4; }

/* Scene: Media - full motion composition */
.scene-media .media-comp { position:absolute; inset:10% 7%; }

/* ------------ 10. MOTION COMPOSITION ------------ */
.motion-composition {
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border:1px solid rgba(247,245,241,.14); border-radius:14px;
  background:#0b1727; color:var(--stone); isolation:isolate;
}
.motion-composition::before {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(247,245,241,.042) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.042) 1px,transparent 1px);
  background-size:7.5% 13.33%; content:'';
}
.mc-meta {
  position:absolute; z-index:8; top:5%; right:5%; left:5%;
  display:flex; justify-content:space-between;
  color:rgba(247,245,241,.4); font:600 clamp(.48rem,.9vw,.62rem)/1 ui-monospace,monospace; letter-spacing:.12em;
}
.mc-stage { position:absolute; inset:11% 5% 24%; overflow:hidden; border:1px solid rgba(247,245,241,.11); background:#13253a; }
.mc-crop { position:absolute; z-index:7; width:20px; height:20px; border-color:var(--bronze); }
.mc-crop.tl { top:7px; left:7px; border-top:1px solid; border-left:1px solid; }
.mc-crop.br { right:7px; bottom:7px; border-right:1px solid; border-bottom:1px solid; }
.mc-title {
  position:absolute; z-index:5; top:50%; left:7%; overflow:hidden;
  font-size:clamp(2.5rem,7.5vw,7rem); font-weight:670; line-height:.82;
  letter-spacing:-.08em; opacity:0; clip-path:inset(0 100% 0 0);
  transform:translateY(-50%);
}
.mc-title.secondary { left:auto; right:7%; font-size:clamp(2rem,6vw,5.5rem); text-align:right; }
.mc-plane { position:absolute; z-index:2; opacity:0; transform:translate3d(0,18%,0); }
.mc-plane.one { top:15%; right:8%; width:26%; height:46%; background:var(--bronze); }
.mc-plane.two { right:25%; bottom:7%; width:22%; height:24%; border:1px solid rgba(247,245,241,.32); background:#233951; }
.mc-plane.three { top:10%; left:38%; width:1px; height:74%; background:rgba(247,245,241,.26); transform:scaleY(0); transform-origin:top; }
.mc-path { position:absolute; z-index:6; right:4%; bottom:4%; width:48%; height:44%; }
.mc-path path { fill:none; stroke:var(--stone); stroke-width:1; stroke-dasharray:260; stroke-dashoffset:260; }
.mc-path circle { fill:var(--bronze); opacity:0; }
.mc-frame { position:absolute; z-index:8; right:4%; bottom:4%; color:rgba(247,245,241,.52); font:600 .54rem/1 ui-monospace,monospace; letter-spacing:.1em; }
.mc-timeline { position:absolute; z-index:8; right:5%; bottom:6%; left:5%; height:12%; }
.mc-track { display:grid; grid-template-columns:1.1fr .45fr .8fr 1.35fr; gap:4px; margin-bottom:5px; }
.mc-track i { height:7px; background:#354a61; }
.mc-track i:nth-child(2) { background:var(--bronze); }
.mc-playhead { position:absolute; top:-4px; bottom:-4px; left:0; width:1px; background:var(--stone); transform:translateX(0); }
.mc-playhead::before { position:absolute; top:-4px; left:-3px; width:7px; height:7px; background:var(--stone); content:''; transform:rotate(45deg); }
.mc-key { position:absolute; bottom:-1px; width:6px; height:6px; border:1px solid var(--bronze); transform:rotate(45deg); }
.mc-key.k1{left:24%} .mc-key.k2{left:54%} .mc-key.k3{left:81%}

/* Motion composition animations */
.motion-composition.is-playing .mc-title.primary  { animation:mc-title-a 8.4s var(--ease) infinite; }
.motion-composition.is-playing .mc-title.secondary { animation:mc-title-b 8.4s var(--ease) infinite; }
.motion-composition.is-playing .mc-plane.one       { animation:mc-plane-one 8.4s var(--ease) infinite; }
.motion-composition.is-playing .mc-plane.two       { animation:mc-plane-two 8.4s var(--ease) infinite; }
.motion-composition.is-playing .mc-plane.three     { animation:mc-rule 8.4s var(--ease) infinite; }
.motion-composition.is-playing .mc-path path       { animation:mc-draw 8.4s var(--ease) infinite; }
.motion-composition.is-playing .mc-path circle     { animation:mc-dot 8.4s var(--ease) infinite; }
.motion-composition.is-playing .mc-playhead        { animation:mc-playhead 8.4s linear infinite; }

@keyframes mc-title-a {
  0%,7%   { opacity:0; clip-path:inset(0 100% 0 0); transform:translateY(-44%); }
  13%,43% { opacity:1; clip-path:inset(0);           transform:translateY(-50%); }
  49%,100%{ opacity:0; clip-path:inset(0 0 0 100%);  transform:translateY(-56%); }
}
@keyframes mc-title-b {
  0%,47%  { opacity:0; clip-path:inset(0 100% 0 0); transform:translateY(-45%); }
  55%,87% { opacity:1; clip-path:inset(0);           transform:translateY(-50%); }
  93%,100%{ opacity:0; clip-path:inset(0 0 0 100%);  transform:translateY(-56%); }
}
@keyframes mc-plane-one { 0%,14%{opacity:0;transform:translate3d(0,18%,0)} 22%,47%{opacity:1;transform:none} 53%,100%{opacity:0;transform:translate3d(14%,0,0)} }
@keyframes mc-plane-two { 0%,26%{opacity:0;transform:translate3d(0,24%,0)} 34%,83%{opacity:1;transform:none} 90%,100%{opacity:0;transform:translate3d(0,-16%,0)} }
@keyframes mc-rule { 0%,17%{opacity:0;transform:scaleY(0)} 24%,87%{opacity:1;transform:scaleY(1)} 94%,100%{opacity:0;transform:scaleY(0)} }
@keyframes mc-draw { 0%,52%{stroke-dashoffset:260;opacity:0} 60%,86%{stroke-dashoffset:0;opacity:1} 93%,100%{opacity:0} }
@keyframes mc-dot { 0%,59%{opacity:0;transform:scale(0)} 66%,87%{opacity:1;transform:scale(1)} 94%,100%{opacity:0} }
@keyframes mc-playhead { 0%{transform:translateX(0)} 92%,100%{transform:translateX(var(--mc-travel,480px))} }

/* Static state (before JS init) */
.motion-composition:not(.motion-ready) .mc-title.primary { opacity:1; clip-path:none; transform:translateY(-50%); }
.motion-composition:not(.motion-ready) .mc-plane.one,
.motion-composition:not(.motion-ready) .mc-plane.two { opacity:1; transform:none; }
.motion-composition:not(.motion-ready) .mc-plane.three { opacity:1; transform:scaleY(1); }
.motion-composition:not(.motion-ready) .mc-path path { stroke-dashoffset:0; }
.motion-composition:not(.motion-ready) .mc-path circle { opacity:1; }

.motion-composition.compact {
  position:absolute; inset:16% 7% 9%; width:auto; aspect-ratio:auto;
}
.motion-composition.compact .mc-meta { font-size:.46rem; }
.motion-composition.compact .mc-title { font-size:clamp(1.9rem,4vw,3.8rem); }
.motion-composition.compact .mc-title.secondary { font-size:clamp(1.5rem,3vw,3rem); }
.motion-composition.compact .mc-track i { height:5px; }

/* ------------ 11. SIGNAL SECTION (HOME) ------------ */
.signal-section { background:#0b1727; color:var(--stone); }
.signal-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(3rem,7.5vw,7.5rem); }
.signal-visual { position:sticky; top:108px; height:calc(100vh - 140px); min-height:480px; align-self:start; }
.signal-board {
  position:absolute; inset:0; display:grid; place-items:center;
  overflow:hidden; border:1px solid rgba(247,245,241,.11); border-radius:18px; background:#101f33;
}
.signal-board svg { width:84%; height:84%; }
.signal-board path { fill:none; stroke:rgba(247,245,241,.15); stroke-width:1; }
.signal-board .live { stroke:var(--bronze); stroke-dasharray:9 10; animation:dash 15s linear infinite; }
.signal-board circle {
  fill:#101f33; stroke:rgba(247,245,241,.2); stroke-width:2;
  transition: stroke .35s, fill .35s, r .3s;
}
.signal-board[data-stage="0"] circle:nth-of-type(1),
.signal-board[data-stage="1"] circle:nth-of-type(2),
.signal-board[data-stage="2"] circle:nth-of-type(3),
.signal-board[data-stage="3"] circle:nth-of-type(4),
.signal-board[data-stage="4"] circle:nth-of-type(5),
.signal-board[data-stage="5"] circle:nth-of-type(6) { fill:var(--bronze); stroke:var(--bronze); r:17px; }
.signal-status {
  position:absolute; right:22px; bottom:20px; left:22px;
  display:flex; justify-content:space-between;
  color:rgba(247,245,241,.4); font:.56rem monospace;
}
.signal-copy { padding-block:10vh; }
.signal-step {
  min-height:52vh; display:flex; flex-direction:column; justify-content:center;
  opacity:.28; transition:opacity .4s;
}
.signal-step.is-active { opacity:1; }
.signal-step span { color:var(--bronze); font:.62rem monospace; }
.signal-step h3 { margin-top:.9rem; font-size:clamp(2rem,3.5vw,3.8rem); }
.signal-step p { color:rgba(247,245,241,.62); }

/* ------------ 12. TOGETHER SECTION (HOME) ------------ */
.together { overflow:hidden; background:var(--paper); }
.together-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(3rem,7vw,7rem); align-items:center; }
.build-visual { position:relative; min-height:480px; }
.build-plane {
  position:absolute; width:66%; height:60%;
  border:1px solid var(--line); border-radius:13px;
  background:var(--stone); box-shadow:var(--shadow);
  transition: transform .7s var(--ease);
}
.build-wire {
  top:3%; left:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:28px 28px; transform:rotate(-5deg);
}
.build-system { top:20%; right:0; background:var(--navy); transform:rotate(4deg); }
.build-system::before { position:absolute; inset:12%; border:1px solid rgba(247,245,241,.15); content:''; }
.build-finish { right:10%; bottom:0; padding:26px; background:var(--paper); transform:rotate(-1deg); }
.build-finish::before { display:block; width:54%; height:10px; margin-bottom:16px; border-radius:4px; background:var(--navy); content:''; }
.build-finish::after { display:block; height:52%; border-radius:7px; background:linear-gradient(135deg,var(--navy),#314964); content:''; }
.build-visual.revealed .build-wire { transform:translate(-10px,-7px) rotate(-5deg); }
.build-visual.revealed .build-system { transform:translate(10px,-3px) rotate(4deg); }

/* ------------ 13. MOTION SECTION (HOME) ------------ */
.motion-section { overflow:hidden; background:var(--charcoal); color:var(--stone); }
.motion-grid { display:grid; grid-template-columns:.65fr 1.35fr; gap:clamp(2.5rem,6.5vw,6.5rem); align-items:center; }
.motion-section .motion-composition {
  box-shadow: 0 32px 70px rgba(0,0,0,.28);
}

/* ------------ 14. PROCESS SECTION (HOME) ------------ */
.process { background:var(--stone); }
.process-line {
  position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; margin-top:3rem;
}
.process-line::before {
  position:absolute; top:14px; right:12.5%; left:12.5%;
  height:1px; background:var(--line); content:'';
}
.process-line::after {
  position:absolute; top:14px; left:12.5%;
  width:var(--process,0%); height:1px; background:var(--bronze); content:'';
  transition:width 1.2s var(--ease);
}
.process-line.revealed { --process:75%; }
.process-step { position:relative; padding:0 22px; text-align:center; }
.process-dot {
  position:relative; z-index:2; display:grid; width:28px; height:28px;
  margin:0 auto 28px; border:1px solid var(--line); border-radius:50%;
  background:var(--stone); place-items:center;
  color:var(--bronze); font-size:.55rem;
  transition:background .3s var(--d), color .3s var(--d);
}
.revealed .process-dot { background:var(--navy); color:var(--stone); }
.process-step:nth-child(1) .process-dot{--d:.1s}
.process-step:nth-child(2) .process-dot{--d:.25s}
.process-step:nth-child(3) .process-dot{--d:.4s}
.process-step:nth-child(4) .process-dot{--d:.55s}
.process-step h3 { font-size:1.3rem; }
.process-step p { color:var(--muted); font-size:.88rem; }

/* ------------ 15. ABOUT BAND (HOME) - INTEGRATION CONSOLE ------------ */
.about-band { position:relative; overflow:hidden; background:var(--sand); }
.about-band-grid { display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(2.5rem,6.5vw,6rem); align-items:center; }
.integration-console {
  position:relative; overflow:hidden;
  border:1px solid rgba(14,27,46,.18); border-radius:18px;
  background:var(--navy); color:var(--stone);
  box-shadow:var(--shadow-lg); padding:clamp(1.4rem,3vw,2.2rem);
}
.integration-console::before {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(247,245,241,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.035) 1px,transparent 1px);
  background-size:24px 24px; content:''; pointer-events:none;
}
.ic-header {
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:1.1rem; margin-bottom:1.4rem;
  border-bottom:1px solid rgba(247,245,241,.12);
  font:600 .58rem/1 ui-monospace,monospace; letter-spacing:.12em;
  color:rgba(247,245,241,.55);
}
.ic-status-live {
  display:inline-flex; align-items:center; gap:7px; color:#d4b98c;
}
.ic-status-live::before {
  width:6px; height:6px; border-radius:50%; background:var(--bronze);
  content:''; animation:node-pulse 2s infinite;
}
.ic-matrix {
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px;
  margin-bottom:1.2rem;
}
.ic-pillar {
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  min-height:116px; padding:12px 10px; border:1px solid rgba(247,245,241,.12);
  border-radius:10px; background:#13253b; transition:transform .3s var(--ease), border-color .3s;
}
.ic-pillar:hover { transform:translateY(-3px); border-color:var(--bronze); background:#172c47; }
.ic-pillar-no { font:.56rem monospace; color:var(--bronze); }
.ic-pillar-name { font-size:.76rem; font-weight:700; margin-top:auto; letter-spacing:-.01em; line-height:1.15; }
.ic-pillar-role { font-size:.52rem; color:rgba(247,245,241,.5); margin-top:4px; font-family:ui-monospace,monospace; }
.ic-circuit {
  position:relative; z-index:2; height:46px; margin-bottom:1.2rem;
  border:1px solid rgba(247,245,241,.09); border-radius:8px;
  background:#0b1625; overflow:hidden;
}
.ic-circuit svg { width:100%; height:100%; }
.ic-circuit path { fill:none; stroke:rgba(247,245,241,.15); stroke-width:1; }
.ic-circuit .ic-bus { stroke:var(--bronze); stroke-width:1.5; stroke-dasharray:12 12; animation:dash 12s linear infinite; }
.ic-circuit circle { fill:var(--bronze); }
.ic-footer {
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  padding-top:1rem; border-top:1px solid rgba(247,245,241,.1);
  font:.56rem monospace; color:rgba(247,245,241,.45);
}

/* ------------ 16. FOOTER (RICH BALANCED 4-COLUMN) ------------ */
.footer-signal { height:1px; margin-bottom:2.2rem; overflow:hidden; background:rgba(247,245,241,.09); }
.footer-signal::after {
  display:block; width:18%; height:100%; background:var(--bronze); content:'';
  animation:footer-pass 8s ease-in-out infinite;
}
@keyframes footer-pass { 0%{transform:translateX(-100%)} 100%{transform:translateX(650%)} }
.site-footer { padding-block:3.5rem 1.55rem; background:#08111e; color:var(--stone); }
.footer-grid {
  display:grid; grid-template-columns:1.55fr 0.85fr 1.15fr 1.15fr;
  gap:clamp(2rem,4.5vw,4.5rem); padding-bottom:2.8rem;
}
.footer-brand p { color:rgba(247,245,241,.62); font-size:.88rem; line-height:1.6; margin-top:.75rem; }
.footer-brand .footer-mission { color:rgba(247,245,241,.42); font-size:.8rem; margin-top:.5rem; }
.site-footer .wordmark { color:var(--stone); }
.site-footer .brand-symbol { filter:brightness(1.08); }
.footer-col-title {
  margin-bottom:1.1rem; color:var(--bronze);
  font-size:.65rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.footer-nav-list { display:grid; gap:.55rem; margin:0; padding:0; list-style:none; font-size:.85rem; }
.footer-nav-list a { color:rgba(247,245,241,.68); transition:color .2s, transform .2s var(--ease); display:inline-block; }
.footer-nav-list a:hover { color:var(--stone); transform:translateX(3px); }
.footer-contact-block p { font-size:.85rem; color:rgba(247,245,241,.68); margin-bottom:.5rem; }
.footer-contact-block a { color:var(--stone); text-decoration:none; transition:color .2s; }
.footer-contact-block a:hover { color:var(--bronze); }
.footer-contact-note { color:rgba(247,245,241,.42); font-size:.76rem; line-height:1.45; margin-top:.75rem; }
.footer-socials { display:flex; gap:.6rem; margin-top:1.15rem; }
.footer-social-link {
  display:grid; width:40px; height:40px; border:1px solid rgba(247,245,241,.17);
  border-radius:50%; background:rgba(247,245,241,.025); place-items:center;
  transition:color .22s,border-color .22s,background .22s,transform .25s var(--ease) !important;
}
.footer-social-link svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.footer-social-link:hover { border-color:var(--bronze); background:rgba(176,141,87,.1); transform:translateY(-3px); }
.footer-social-link:focus-visible { outline:2px solid var(--bronze); outline-offset:3px; }
.footer-bottom-bar {
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding-top:1.4rem; border-top:1px solid rgba(247,245,241,.09);
  color:rgba(247,245,241,.56); font-size:.72rem;
}
.footer-bottom-bar span:nth-child(2) { color:rgba(247,245,241,.43); }

/* ------------ 17. PAGE TRANSITION ------------ */
.page-transition {
  position:fixed; z-index:500; inset:0;
  background:var(--navy); pointer-events:none;
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .3s var(--ease);
}
body.page-leaving .page-transition { transform:scaleY(1); transform-origin:top; }

/* ------------ 18. SECONDARY PAGES SHARED ------------ */
.page-shell { overflow-x:clip; }
.s-hero {
  position:relative; overflow:hidden; padding-top:78px;
  background:var(--navy); color:var(--stone);
}
.s-hero-grid {
  display:grid; min-height:min(760px,calc(100svh - 78px));
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(2.5rem,6vw,6rem);
  align-items:center; padding-block:clamp(3.5rem,7vw,7rem);
}
.s-hero h1 { font-size:clamp(3.6rem,5.8vw,6.8rem); }
.s-hero .lede { color:rgba(247,245,241,.66); }
.s-hero-copy > * { opacity:0; animation:secondary-enter .65s var(--ease) forwards; }
.s-hero-copy > :nth-child(1){animation-delay:.07s}
.s-hero-copy > :nth-child(2){animation-delay:.16s}
.s-hero-copy > :nth-child(3){animation-delay:.26s}
.s-hero-copy > :nth-child(4){animation-delay:.36s}
@keyframes secondary-enter { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.s-hero-visual { position:relative; min-height:440px; opacity:0; animation:secondary-system .9s .18s var(--ease) forwards; }
@keyframes secondary-system { from { opacity:0; transform:scale(.96) translateY(18px); } to { opacity:1; transform:none; } }
.s-index { position:absolute; right:0; bottom:0; color:rgba(247,245,241,.3); font:.56rem monospace; letter-spacing:.12em; }

/* ------------ 19. ABOUT HERO: COMPANY NEXUS ------------ */
.company-nexus {
  position:relative; overflow:hidden;
  border:1px solid rgba(247,245,241,.14); border-radius:18px;
  background:#0c182b; box-shadow:var(--shadow-lg);
  padding:clamp(1.2rem,2.8vw,2rem); color:var(--stone);
  min-height:440px; display:flex; flex-direction:column; justify-content:space-between;
}
.company-nexus::before {
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 50% 50%,rgba(176,141,87,.08) 0,transparent 70%),
                   linear-gradient(rgba(247,245,241,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(247,245,241,.035) 1px,transparent 1px);
  background-size:100% 100%, 28px 28px, 28px 28px; content:''; pointer-events:none;
}
.nexus-top {
  position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center;
  padding-bottom:.9rem; border-bottom:1px solid rgba(247,245,241,.1);
  font:600 .58rem monospace; letter-spacing:.12em; color:rgba(247,245,241,.5);
}
.nexus-top span:last-child { color:#d4b98c; }
.nexus-body {
  position:relative; z-index:2; margin-block:1.2rem;
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px; align-items:stretch;
}
.nexus-node {
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  padding:14px 10px; border:1px solid rgba(247,245,241,.11); border-radius:10px;
  background:#13263e; transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.nexus-node:hover {
  transform:translateY(-4px); border-color:var(--bronze);
  background:#183150; box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.nexus-node-index { font:.56rem monospace; color:var(--bronze); }
.nexus-node-title { font-size:.78rem; font-weight:700; margin-top:1rem; line-height:1.15; }
.nexus-node-detail { font-size:.56rem; color:rgba(247,245,241,.55); margin-top:4px; font-family:ui-monospace,monospace; }
.nexus-bus {
  position:relative; z-index:2; height:54px;
  border:1px solid rgba(247,245,241,.1); border-radius:10px;
  background:#091423; overflow:hidden;
}
.nexus-bus svg { width:100%; height:100%; }
.nexus-bus path { fill:none; stroke:rgba(247,245,241,.16); stroke-width:1.5; }
.nexus-bus .live-signal { stroke:var(--bronze); stroke-width:2; stroke-dasharray:16 16; animation:dash 14s linear infinite; }
.nexus-bus circle { fill:var(--bronze); }
.nexus-bottom {
  position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center;
  padding-top:.9rem; border-top:1px solid rgba(247,245,241,.1);
  font:.56rem monospace; color:rgba(247,245,241,.45);
}

/* Story section */
.story-year { display:grid; grid-template-columns:.5fr 1.5fr; gap:clamp(2.5rem,7vw,7rem); align-items:start; }
.year-mark {
  position:sticky; top:110px;
  color:var(--navy); font-size:clamp(5rem,12vw,11rem);
  font-weight:650; line-height:.8; letter-spacing:-.1em;
}
.year-mark span { display:block; margin-top:1.4rem; color:var(--bronze); font:.62rem monospace; letter-spacing:.12em; }
.story-line { position:relative; padding-left:36px; }
.story-line::before { position:absolute; top:8px; bottom:0; left:0; width:1px; background:var(--line); content:''; }
.story-line::after {
  position:absolute; top:8px; left:0; width:1px;
  height:var(--story-progress,0); background:var(--bronze); content:'';
  transition:height 1.1s var(--ease);
}
.story-line.revealed { --story-progress:100%; }
.story-block { min-height:40vh; display:flex; flex-direction:column; justify-content:center; }
.story-block strong { color:var(--bronze); font:.62rem monospace; }
.story-block h3 { margin-top:.9rem; font-size:clamp(1.9rem,3.2vw,3.5rem); }
.story-block p { color:var(--muted); }

/* Principles Grid - Modern Architectural Card Matrix */
.principles-head { margin-bottom:2.5rem; max-width:48rem; }
.principles-head h2 { margin-bottom:.8rem; }
.principles-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:1.5rem; align-items:stretch;
}
.principle-card {
  position:relative; display:flex; flex-direction:column;
  padding:2rem 1.8rem; border:1px solid var(--line); border-radius:14px;
  background:var(--paper); box-shadow:0 6px 20px rgba(14,27,46,.04);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.principle-card:hover {
  transform:translateY(-4px); border-color:var(--bronze);
  box-shadow:0 18px 40px rgba(14,27,46,.09);
}
.principle-card-top {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:1.4rem;
}
.principle-card-no {
  display:inline-block; font:700 .68rem monospace; color:var(--bronze); letter-spacing:.12em;
}
.principle-card-badge {
  width:7px; height:7px; border-radius:50%; background:var(--line);
  transition:background .3s;
}
.principle-card:hover .principle-card-badge { background:var(--bronze); }
.principle-card h3 {
  font-size:clamp(1.25rem,1.7vw,1.5rem); margin-bottom:.85rem; line-height:1.2;
}
.principle-card p {
  color:var(--muted); font-size:.9rem; line-height:1.6; margin:0;
}

/* Capability map (about) */
.physical-map {
  position:relative; display:grid; grid-template-columns:1fr 1.12fr 1fr;
  gap:38px; align-items:center; min-height:300px; margin-top:3rem;
}
.physical-map::before {
  position:absolute; top:50%; right:12%; left:12%;
  height:1px; background:var(--bronze); content:'';
}
.map-unit {
  position:relative; z-index:2; min-height:180px; padding:22px;
  border:1px solid var(--line); border-radius:13px;
  background:var(--paper); box-shadow:0 14px 36px rgba(14,27,46,.06);
}
.map-unit.core { min-height:248px; background:var(--navy); color:var(--stone); }
.map-label { color:var(--bronze); font:700 .62rem monospace; letter-spacing:.1em; }
.map-unit h3 { margin-top:32px; }
.map-dot {
  position:absolute; z-index:3; top:calc(50% - 4px); left:12%;
  width:8px; height:8px; border-radius:50%; background:var(--bronze);
  animation:travel 3.2s linear infinite;
}
@keyframes travel { to{left:88%} }

/* Facts */
.facts { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line); }
.fact { padding:22px; border-right:1px solid var(--line); }
.fact:last-child { border-right:0; }
.fact small { display:block; margin-bottom:14px; color:var(--muted); }
.fact strong { font-size:clamp(1.4rem,2.5vw,2rem); }

/* ------------ ABOUT PAGE: INTEGRATED EDITORIAL SYSTEM ------------ */
.about-hero { position:relative;overflow:hidden;padding-top:78px;background:#091625;color:var(--stone); }
.about-hero::before { position:absolute;inset:0;background:radial-gradient(circle at 78% 42%,rgba(176,141,87,.1),transparent 32%);content:'';pointer-events:none; }
.about-hero-grid { position:relative;display:grid;min-height:calc(100svh - 78px);grid-template-columns:minmax(0,.82fr) minmax(500px,1.18fr);gap:clamp(2.5rem,5.5vw,5.5rem);align-items:center;padding-block:clamp(4rem,7vw,7rem); }
.about-hero-copy h1 { max-width:10ch;font-size:clamp(3.8rem,5.7vw,6.7rem); }
.about-hero-copy .lede { max-width:36rem;margin-bottom:1.8rem;color:rgba(247,245,241,.67); }
.about-hero-copy>* { opacity:0;animation:enter .65s var(--ease) forwards; }
.about-hero-copy>:nth-child(1){animation-delay:.06s}.about-hero-copy>:nth-child(2){animation-delay:.14s}.about-hero-copy>:nth-child(3){animation-delay:.23s}.about-hero-copy>:nth-child(4){animation-delay:.32s}
.about-hero .text-link { display:inline-flex;min-height:46px;align-items:center;gap:10px;padding-inline:.65rem;color:rgba(247,245,241,.66);font-size:.73rem;font-weight:650; }
.about-hero .text-link span { color:var(--bronze);transition:transform .25s var(--ease); }
.about-hero .text-link:hover span { transform:translateY(4px); }

.about-blueprint { position:relative;min-height:520px;overflow:hidden;border:1px solid rgba(247,245,241,.14);border-radius:18px;background:#0d1d30;box-shadow:0 30px 75px rgba(0,0,0,.28); }
.about-blueprint::before { position:absolute;inset:0;background-image:linear-gradient(rgba(247,245,241,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.035) 1px,transparent 1px);background-size:27px 27px;content:'';animation:ab-grid 18s linear infinite; }
@keyframes ab-grid{to{background-position:27px 27px}}
.about-blueprint::after { position:absolute;top:0;bottom:0;width:35%;background:linear-gradient(90deg,transparent,rgba(176,141,87,.055),transparent);content:'';animation:ab-sweep 6.5s ease-in-out infinite; }
@keyframes ab-sweep{0%,12%{left:-45%;opacity:0}24%{opacity:1}78%{opacity:.8}92%,100%{left:110%;opacity:0}}
.ab-top,.ab-bottom { position:absolute;z-index:6;right:clamp(1rem,2vw,1.6rem);left:clamp(1rem,2vw,1.6rem);display:flex;justify-content:space-between;color:rgba(247,245,241,.42);font:600 .52rem ui-monospace,monospace;letter-spacing:.1em; }
.ab-top { top:1.3rem;padding-bottom:.9rem;border-bottom:1px solid rgba(247,245,241,.1); }
.ab-bottom { bottom:1.3rem;padding-top:.9rem;border-top:1px solid rgba(247,245,241,.1); }
.ab-live { display:flex;align-items:center;gap:7px;color:#d4b98c; }
.ab-live i { width:5px;height:5px;border-radius:50%;background:var(--bronze);animation:node-pulse 2s infinite; }
.ab-stage { position:absolute;z-index:2;inset:14% 4% 15%; }
.ab-stage svg { position:absolute;inset:0;width:100%;height:100%; }
.ab-stage path { fill:none;stroke:rgba(247,245,241,.15);stroke-width:1;vector-effect:non-scaling-stroke; }
.ab-stage .ab-signal { stroke:var(--bronze);stroke-width:1.5;stroke-dasharray:10 13;animation:dash 14s linear infinite; }
.ab-core { position:absolute;z-index:4;top:50%;left:50%;display:flex;width:116px;height:116px;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--bronze);border-radius:50%;background:#0a1828;box-shadow:0 0 45px rgba(176,141,87,.12);transform:translate(-50%,-50%); }
.ab-core i { position:absolute;inset:-13px;border:1px dashed rgba(176,141,87,.3);border-radius:50%;animation:ab-spin 15s linear infinite; }
.ab-core i:nth-child(2){inset:-27px;border-color:rgba(247,245,241,.11);animation-direction:reverse;animation-duration:22s}
@keyframes ab-spin{to{transform:rotate(360deg)}}
.ab-core strong { font:.66rem monospace;letter-spacing:.08em; }.ab-core span{margin-top:4px;color:rgba(247,245,241,.4);font:.43rem monospace}
.ab-node { position:absolute;z-index:4;width:132px;padding:10px 12px;border:1px solid rgba(247,245,241,.13);border-radius:8px;background:rgba(18,39,63,.94);box-shadow:0 12px 28px rgba(0,0,0,.18);opacity:0;transform:translateY(12px);animation:ab-node-in .55s var(--d) var(--ease) forwards; }
@keyframes ab-node-in{to{opacity:1;transform:none}}
.ab-node small { color:var(--bronze);font:.45rem monospace; }.ab-node strong{display:block;margin-top:4px;font-size:.7rem}.ab-node span{display:block;margin-top:2px;color:rgba(247,245,241,.42);font:.45rem monospace}
.ab-node.n1{top:4%;left:0;--d:.4s}.ab-node.n2{top:50%;left:0;--d:.52s;transform:translateY(calc(-50% + 12px));animation-name:ab-node-mid-in}.ab-node.n3{bottom:4%;left:0;--d:.64s}.ab-node.n4{top:13%;right:0;--d:.76s}.ab-node.n5{right:0;bottom:13%;--d:.88s}
@keyframes ab-node-mid-in{to{opacity:1;transform:translateY(-50%)}}

.about-manifesto { background:var(--stone); }
.about-manifesto-grid { display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(3rem,9vw,9rem);align-items:start; }
.about-manifesto h2 { max-width:11ch; }
.manifesto-copy>p:first-child { color:var(--navy);font-size:clamp(1.35rem,2.15vw,2.05rem);line-height:1.42;letter-spacing:-.025em; }
.manifesto-copy>p:nth-child(2){margin-top:1.5rem;color:var(--muted)}
.manifesto-note { display:flex;flex-wrap:wrap;gap:.75rem 1.4rem;margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--muted);font:.65rem monospace;letter-spacing:.06em;text-transform:uppercase; }
.manifesto-note i { width:6px;height:6px;align-self:center;border-radius:50%;background:var(--bronze); }

.about-system-section { overflow:hidden;background:#0a1726;color:var(--stone); }
.about-system-section .section-head .lede{color:rgba(247,245,241,.58)}
.about-layers { position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem);margin-top:3.4rem; }
.about-layers::before { position:absolute;z-index:0;top:50%;right:5%;left:5%;height:1px;background:rgba(176,141,87,.32);content:''; }
.about-layer { position:relative;z-index:2;min-height:390px;padding:clamp(1.3rem,2.2vw,2rem);overflow:hidden;border:1px solid rgba(247,245,241,.12);border-radius:15px;background:#102238;transition:transform .35s var(--ease),border-color .3s; }
.about-layer:hover { transform:translateY(-7px);border-color:rgba(176,141,87,.55); }
.about-layer.system{background:#142a43}.about-layer.physical{background:#0d2033}
.layer-meta { display:flex;justify-content:space-between;padding-bottom:1rem;border-bottom:1px solid rgba(247,245,241,.1);color:var(--bronze);font:.52rem monospace;letter-spacing:.08em; }
.layer-meta i { width:6px;height:6px;border-radius:50%;background:var(--bronze);animation:node-pulse 2.4s infinite; }
.about-layer h3 { margin-top:2rem;font-size:clamp(1.45rem,2.2vw,2.1rem); }.about-layer>p{color:rgba(247,245,241,.52);font-size:.8rem;line-height:1.6}
.layer-ui { position:absolute;right:1.5rem;bottom:1.5rem;left:1.5rem;height:105px;padding:16px;border:1px solid rgba(247,245,241,.13);border-radius:8px;background:#0b1929; }
.layer-ui span{display:block;width:45%;height:5px;margin-bottom:11px;border-radius:4px;background:rgba(247,245,241,.17)}.layer-ui span:nth-child(2){width:70%;background:var(--bronze)}.layer-ui span:nth-child(3){width:30%}.layer-ui strong{position:absolute;right:12px;bottom:10px;color:rgba(247,245,241,.26);font:.46rem monospace}
.layer-code { position:absolute;right:1.5rem;bottom:1.5rem;left:1.5rem;display:grid;grid-template-columns:24px 1fr;gap:7px 10px;padding:13px;border:1px solid rgba(247,245,241,.12);border-radius:8px;background:#091725;font:.48rem monospace; }
.layer-code span{color:var(--bronze)}.layer-code b{color:rgba(247,245,241,.46);font-weight:500}
.layer-circuit { position:absolute;right:1.5rem;bottom:1.5rem;left:1.5rem;height:105px;border:1px solid rgba(247,245,241,.11);border-radius:8px;background-image:linear-gradient(rgba(247,245,241,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.035) 1px,transparent 1px);background-size:18px 18px; }
.layer-circuit::before { position:absolute;top:50%;right:12%;left:12%;height:1px;background:var(--bronze);content:''; }.layer-circuit i{position:absolute;top:calc(50% - 7px);width:14px;height:14px;border:1px solid var(--bronze);border-radius:3px;background:#0d2033}.layer-circuit i:nth-child(1){left:10%}.layer-circuit i:nth-child(2){left:35%}.layer-circuit i:nth-child(3){left:61%}.layer-circuit i:nth-child(4){right:9%}.layer-circuit span{position:absolute;top:calc(50% - 4px);left:10%;width:8px;height:8px;border-radius:50%;background:var(--stone);box-shadow:0 0 12px var(--bronze);animation:layer-packet 3.6s linear infinite}
@keyframes layer-packet{to{left:88%}}
.layer-signal { position:absolute;z-index:3;top:calc(50% - 4px);left:5%;width:8px;height:8px;border-radius:50%;background:var(--bronze);box-shadow:0 0 14px rgba(176,141,87,.8);animation:layer-signal 5s linear infinite; }
@keyframes layer-signal{to{left:94%}}

.about-principles-grid { display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(3rem,8vw,8rem);align-items:start; }
.about-principles-intro { position:sticky;top:116px; }.about-principles-intro h2{max-width:10ch}.about-principles-intro .lede{margin-top:1rem}
.about-principle-list { border-top:1px solid rgba(14,27,46,.22); }
.about-principle-list article { display:grid;grid-template-columns:48px 1fr;gap:1.2rem;padding:clamp(1.6rem,3.2vw,2.8rem) 0;border-bottom:1px solid rgba(14,27,46,.18); }
.about-principle-list article>span{color:var(--bronze);font:.6rem monospace}.about-principle-list h3{font-size:clamp(1.35rem,2vw,1.8rem)}.about-principle-list p{margin-top:.5rem;color:var(--muted)}

.about-method { scroll-margin-top:78px;background:var(--paper); }
.about-method .section-head { width:min(calc(100% - 3rem),var(--container));max-width:70rem;overflow:visible; }
.about-method .section-head h2 { max-width:17ch; }
.method-track { position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:3rem;border-top:1px solid var(--line); }
.method-track::before { position:absolute;z-index:1;top:-1px;left:0;width:var(--method-progress,0);height:2px;background:var(--bronze);content:'';transition:width 1.4s var(--ease); }.method-track.revealed{--method-progress:100%}
.method-track article { position:relative;min-height:330px;padding:2.2rem 1.4rem 1.5rem;border-right:1px solid var(--line); }.method-track article:last-child{border-right:0}
.method-track article>span{position:absolute;z-index:3;top:-14px;display:grid;width:28px;height:28px;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--paper);box-shadow:0 0 0 6px var(--paper);color:var(--bronze);font:.53rem monospace}.method-track small{color:var(--bronze);font:.56rem monospace;letter-spacing:.1em}.method-track h3{margin-top:3.4rem;font-size:clamp(1.3rem,1.8vw,1.65rem)}.method-track p{margin-top:.8rem;color:var(--muted);font-size:.82rem}

.about-signature { position:relative;overflow:hidden;padding-block:clamp(5rem,8vw,8rem);background:#091625;color:var(--stone); }
.about-signature::before { position:absolute;inset:0;background-image:linear-gradient(rgba(247,245,241,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.025) 1px,transparent 1px);background-size:34px 34px;content:''; }
.about-signature::after { position:absolute;top:8%;right:3%;width:46%;height:84%;background:radial-gradient(circle,rgba(176,141,87,.1),transparent 68%);content:'';pointer-events:none; }
.about-signature-grid { position:relative;z-index:2;display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(3rem,7vw,7rem);align-items:center; }
.about-signature-copy h2 { max-width:11ch;font-size:clamp(2.8rem,4.5vw,5.2rem); }
.about-signature-copy>p:not(.eyebrow){max-width:34rem;margin:1.2rem 0 2rem;color:rgba(247,245,241,.58)}
.signature-system { position:relative;min-height:500px;overflow:hidden;border:1px solid rgba(247,245,241,.14);border-radius:18px;background:rgba(13,29,48,.94);box-shadow:0 30px 70px rgba(0,0,0,.25); }
.signature-system::before { position:absolute;inset:0;background-image:linear-gradient(rgba(247,245,241,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.03) 1px,transparent 1px);background-size:26px 26px;content:'';animation:ab-grid 18s linear infinite; }
.sig-top,.sig-bottom { position:absolute;z-index:5;right:1.5rem;left:1.5rem;display:flex;justify-content:space-between;color:rgba(247,245,241,.38);font:600 .5rem monospace;letter-spacing:.1em; }
.sig-top { top:1.35rem;padding-bottom:.9rem;border-bottom:1px solid rgba(247,245,241,.1); }.sig-bottom{bottom:1.35rem;padding-top:.9rem;border-top:1px solid rgba(247,245,241,.1)}
.sig-top span:last-child { display:flex;align-items:center;gap:7px;color:#d4b98c; }.sig-top span:last-child i{width:5px;height:5px;border-radius:50%;background:var(--bronze);animation:node-pulse 2s infinite}
.sig-stack { position:absolute;z-index:3;top:19%;bottom:18%;left:6%;display:grid;width:56%;gap:8px; }
.sig-stack>div { display:grid;grid-template-columns:28px minmax(90px,.8fr) 1fr;gap:9px;align-items:center;padding:8px 10px;border:1px solid rgba(247,245,241,.1);border-radius:7px;background:#122740;opacity:0;transform:translateX(-18px);animation:sig-row-in .5s var(--d) var(--ease) forwards; }
.sig-stack>div:nth-child(1){--d:.25s}.sig-stack>div:nth-child(2){--d:.37s}.sig-stack>div:nth-child(3){--d:.49s}.sig-stack>div:nth-child(4){--d:.61s}.sig-stack>div:nth-child(5){--d:.73s}
@keyframes sig-row-in{to{opacity:1;transform:none}}
.sig-stack span{color:var(--bronze);font:.48rem monospace}.sig-stack strong{font-size:.67rem}.sig-stack i{position:relative;height:1px;overflow:visible;background:rgba(176,141,87,.4)}.sig-stack i::after{position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--bronze);box-shadow:0 0 12px rgba(176,141,87,.7);content:'';animation:sig-packet 3s var(--d) ease-in-out infinite}
@keyframes sig-packet{0%,12%{left:0;opacity:0}30%{opacity:1}85%,100%{left:calc(100% - 7px);opacity:0}}
.sig-output { position:absolute;z-index:4;top:50%;right:5%;display:flex;width:150px;height:150px;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--bronze);border-radius:50%;background:#0a1828;text-align:center;transform:translateY(-50%);box-shadow:0 0 48px rgba(176,141,87,.12); }
.sig-output::before,.sig-output::after{position:absolute;border:1px dashed rgba(176,141,87,.24);border-radius:50%;content:'';animation:ab-spin 16s linear infinite}.sig-output::before{inset:-13px}.sig-output::after{inset:-27px;border-color:rgba(247,245,241,.1);animation-direction:reverse;animation-duration:24s}
.sig-output span{color:var(--bronze);font:.46rem monospace;letter-spacing:.1em}.sig-output strong{max-width:10ch;margin-top:7px;font-size:.82rem;line-height:1.3}.sig-output>i{width:6px;height:6px;margin-top:10px;border-radius:50%;background:var(--bronze);animation:node-pulse 2s infinite}

@media(max-width:1024px){
  .about-hero-grid{grid-template-columns:1fr;min-height:auto}.about-blueprint{min-height:520px}
  .about-manifesto-grid,.about-principles-grid{grid-template-columns:1fr;gap:3rem}.about-principles-intro{position:relative;top:auto}
  .about-layers{grid-template-columns:1fr}.about-layers::before{top:4%;bottom:4%;left:28px;width:1px;height:auto}.about-layer{min-height:330px;padding-left:3.2rem}.layer-signal{top:4%;left:25px;animation-name:layer-signal-mobile}
  .about-signature-grid{grid-template-columns:1fr}.about-signature-copy{max-width:44rem}.signature-system{min-height:480px}
  @keyframes layer-signal-mobile{to{top:94%;left:25px}}
}
@media(max-width:768px){
  .about-method{scroll-margin-top:72px}
  .about-hero{padding-top:72px}.about-hero-grid{padding-block:3.2rem 4rem}.about-hero-copy h1{font-size:clamp(3.1rem,12vw,5rem)}
  .about-blueprint{min-height:430px}.ab-node{width:108px;padding:8px}.ab-node strong{font-size:.6rem}.ab-node span{font-size:.39rem}.ab-core{width:90px;height:90px}.ab-core i{inset:-9px}.ab-core i:nth-child(2){inset:-18px}
  .method-track{grid-template-columns:1fr 1fr}.method-track article{min-height:250px;border-bottom:1px solid var(--line)}.method-track article:nth-child(2){border-right:0}
  .about-method .section-head{width:calc(100% - 2rem)}
  .signature-system{min-height:430px}.sig-stack{top:18%;bottom:18%;left:4%;width:58%}.sig-output{right:4%;width:122px;height:122px}.sig-output::after{inset:-18px}.sig-output::before{inset:-9px}
}
@media(max-width:480px){
  .about-hero-copy h1{font-size:clamp(2.7rem,13vw,3.5rem)}.about-blueprint{min-height:390px}.ab-top,.ab-bottom{font-size:.43rem;letter-spacing:.05em}.ab-bottom span:last-child{display:none}
  .ab-stage{inset:16% 2%}.ab-stage svg{opacity:.7}.ab-node{width:86px}.ab-node small,.ab-node span{display:none}.ab-node strong{margin:0;font-size:.52rem}.ab-core{width:76px;height:76px}.ab-core strong{font-size:.52rem}.ab-core span{font-size:.36rem}
  .about-layer{min-height:350px;padding-left:2.5rem}.method-track{grid-template-columns:1fr}.method-track article{min-height:220px;border-right:0}.method-track article>span{left:0}.method-track h3{margin-top:2.5rem}
  .manifesto-note{display:grid;grid-template-columns:10px 1fr}.about-signature-copy h2{font-size:clamp(2.45rem,12vw,3.5rem)}
  .about-method .section-head{width:calc(100% - 1.5rem)}.signature-system{min-height:400px}.sig-top,.sig-bottom{right:1rem;left:1rem;font-size:.4rem}.sig-bottom span:last-child{display:none}.sig-stack{top:18%;left:4%;width:60%;gap:6px}.sig-stack>div{grid-template-columns:20px minmax(70px,1fr);padding:7px}.sig-stack strong{font-size:.55rem}.sig-stack i{display:none}.sig-output{right:4%;width:104px;height:104px}.sig-output::after{display:none}.sig-output strong{font-size:.66rem}.sig-output span{font-size:.38rem}
}

/* ------------ 20. CAPABILITIES HERO: CAPABILITIES MATRIX ------------ */
.capabilities-matrix {
  position:relative; overflow:hidden;
  border:1px solid rgba(247,245,241,.14); border-radius:18px;
  background:#0c182a; box-shadow:var(--shadow-lg);
  padding:clamp(1.2rem,2.8vw,2rem); color:var(--stone);
  min-height:440px; display:flex; flex-direction:column; justify-content:space-between;
  transform:perspective(1100px) rotateX(var(--cm-rx,0deg)) rotateY(var(--cm-ry,0deg));
  transform-style:preserve-3d; will-change:transform;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.capabilities-matrix:hover { border-color:rgba(176,141,87,.32); box-shadow:0 30px 70px rgba(0,0,0,.3); }
.capabilities-matrix::before {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(247,245,241,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.035) 1px,transparent 1px);
  background-size:26px 26px; content:''; pointer-events:none;
  animation:cm-grid-drift 16s linear infinite;
}
@keyframes cm-grid-drift { to { background-position:26px 26px; } }
.capabilities-matrix::after {
  position:absolute; z-index:1; top:-35%; right:-10%; width:70%; height:65%;
  background:radial-gradient(ellipse,rgba(176,141,87,.1),transparent 68%);
  content:''; pointer-events:none; animation:cm-ambient 7s ease-in-out infinite alternate;
}
@keyframes cm-ambient { to { transform:translate(-46%,72%) scale(1.18); opacity:.45; } }
.cm-scan {
  position:absolute; z-index:3; right:0; left:0; height:1px; top:12%;
  background:linear-gradient(90deg,transparent,rgba(176,141,87,.1) 18%,rgba(212,185,140,.75) 50%,rgba(176,141,87,.1) 82%,transparent);
  box-shadow:0 0 22px rgba(176,141,87,.22); pointer-events:none;
  animation:cm-scan-pass 5.8s 1.2s var(--ease) infinite;
}
@keyframes cm-scan-pass { 0%,12%{transform:translateY(0);opacity:0} 20%{opacity:1} 78%{opacity:.7} 90%,100%{transform:translateY(325px);opacity:0} }
.cm-top {
  position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center;
  padding-bottom:.9rem; border-bottom:1px solid rgba(247,245,241,.1);
  font:600 .58rem monospace; letter-spacing:.12em; color:rgba(247,245,241,.5);
}
.cm-top span:last-child { color:#d4b98c; }
.cm-state { display:inline-flex; align-items:center; gap:7px; }
.cm-state i,.cm-throughput i { width:5px; height:5px; border-radius:50%; background:var(--bronze); box-shadow:0 0 0 rgba(176,141,87,.45); animation:cm-status 2s ease-out infinite; }
@keyframes cm-status { 60%,100% { box-shadow:0 0 0 8px rgba(176,141,87,0); } }
.cm-stack {
  position:relative; z-index:2; display:grid; gap:9px; margin-block:1rem;
}
.cm-stack::before {
  position:absolute; top:14px; bottom:14px; left:30px; width:1px;
  background:linear-gradient(transparent,var(--bronze) 14%,var(--bronze) 86%,transparent);
  opacity:.45; content:''; pointer-events:none;
}
.cm-row {
  position:relative; overflow:hidden; display:grid; grid-template-columns:34px 1.2fr 1.6fr 40px; gap:12px; align-items:center;
  padding:11px 14px; border:1px solid rgba(247,245,241,.1); border-radius:9px;
  background:#13263d; transition:transform .25s var(--ease), border-color .25s, background .25s;
  opacity:0; transform:translateX(28px); animation:cm-row-enter .65s var(--ease) forwards;
}
.cm-row:nth-child(1){animation-delay:.42s}.cm-row:nth-child(2){animation-delay:.54s}.cm-row:nth-child(3){animation-delay:.66s}.cm-row:nth-child(4){animation-delay:.78s}.cm-row:nth-child(5){animation-delay:.9s}
@keyframes cm-row-enter { to { opacity:1; transform:none; } }
.cm-row::after {
  position:absolute; inset:0; width:35%; transform:translateX(-145%);
  background:linear-gradient(90deg,transparent,rgba(247,245,241,.055),transparent);
  content:''; pointer-events:none; animation:cm-row-signal 6s linear infinite;
}
.cm-row:nth-child(2)::after{animation-delay:1.1s}.cm-row:nth-child(3)::after{animation-delay:2.2s}.cm-row:nth-child(4)::after{animation-delay:3.3s}.cm-row:nth-child(5)::after{animation-delay:4.4s}
@keyframes cm-row-signal { 0%,62%{transform:translateX(-145%)} 88%,100%{transform:translateX(430%)} }
.cm-row:hover {
  transform:translateX(5px); border-color:var(--bronze); background:#17304e;
}
.cm-row:focus-visible { outline:2px solid var(--bronze); outline-offset:2px; }
.cm-idx { position:relative; z-index:1; font:.6rem monospace; color:var(--bronze); font-weight:700; }
.cm-idx::before {
  position:absolute; top:50%; left:14px; width:5px; height:5px; border-radius:50%;
  background:var(--bronze); box-shadow:0 0 10px rgba(176,141,87,.7); content:''; transform:translateY(-50%);
}
.cm-name { font-size:.82rem; font-weight:700; }
.cm-tech { font-size:.65rem; color:rgba(247,245,241,.58); font-family:ui-monospace,monospace; }
.cm-link { font:.6rem monospace; color:var(--bronze); text-align:right; }
.cm-bottom {
  position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center;
  padding-top:.9rem; border-top:1px solid rgba(247,245,241,.1);
  font:.56rem monospace; color:rgba(247,245,241,.45);
}
.cm-throughput { display:inline-flex; align-items:center; gap:7px; color:#d4b98c; }

/* Local nav */
.local-nav {
  position:sticky; z-index:20; top:78px;
  border-bottom:1px solid var(--line);
  background:rgba(247,245,241,.94); backdrop-filter:blur(14px);
}
.local-nav-inner {
  display:flex; align-items:center; gap:clamp(.9rem,2.6vw,2.2rem);
  min-height:56px; overflow-x:auto; scrollbar-width:none;
}
.local-nav a {
  position:relative; flex:none; padding-block:17px;
  color:var(--muted); font-size:.7rem; font-weight:660;
}
.local-nav a::after {
  position:absolute; right:0; bottom:0; left:0; height:2px;
  background:var(--bronze); content:''; transform:scaleX(0);
  transition:transform .3s;
}
.local-nav a.active { color:var(--navy); }
.local-nav a.active::after { transform:scaleX(1); }

.cap-page-section { position:relative; min-height:84vh; padding-block:clamp(5.5rem,9vw,9rem); overflow:hidden; }
.cap-page-section:nth-of-type(even) { background:var(--paper); }
.cap-page-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(3rem,7.5vw,7.5rem); align-items:center; }
.cap-number { color:var(--bronze); font:.64rem monospace; letter-spacing:.12em; }
.cap-page-copy h2 { margin-top:.9rem; }
.service-lines {
  display:grid; grid-template-columns:1fr 1fr; gap:0 1.4rem;
  margin:1.8rem 0 0; padding:0;
  border-top:1px solid var(--line); list-style:none;
}
.service-lines li { padding:.72rem 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:.78rem; }
.cap-art {
  position:relative; min-height:480px; overflow:hidden; isolation:isolate; border-radius:18px;
  background-color:var(--navy); box-shadow:var(--shadow-lg);
  background-image:linear-gradient(rgba(247,245,241,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.025) 1px,transparent 1px);
  background-size:32px 32px;
}
.cap-art::before {
  position:absolute; z-index:10; top:20px; left:22px;
  color:rgba(247,245,241,.32); font:600 .54rem monospace; letter-spacing:.1em;
  content:attr(data-label);
}

/* Software art */
.software-art .app-shell {
  position:absolute; z-index:2; inset:14% 8% 9%; overflow:hidden;
  border:1px solid rgba(247,245,241,.17); border-radius:12px; background:#101f32;
  box-shadow:0 24px 55px rgba(0,0,0,.3); opacity:0; transform:translateY(24px) scale(.965);
  transition:opacity .55s .05s,transform .8s .05s var(--ease);
}
.software-art.revealed .app-shell { opacity:1; transform:none; }
.app-chrome {
  display:flex; height:34px; align-items:center; justify-content:space-between; padding:0 12px;
  border-bottom:1px solid rgba(247,245,241,.1); color:rgba(247,245,241,.4);
  font:600 .48rem ui-monospace,monospace; letter-spacing:.1em;
}
.app-chrome > span { display:flex; gap:5px; }
.app-chrome > span i { width:5px;height:5px;border-radius:50%;background:rgba(247,245,241,.25); }
.app-chrome > span i:first-child { background:var(--bronze); }
.app-chrome em { display:flex; align-items:center; gap:6px; color:#d4b98c; font-style:normal; }
.app-chrome em::before { width:5px;height:5px;border-radius:50%;background:var(--bronze);content:'';animation:app-live 1.8s ease-out infinite; }
@keyframes app-live { 70%,100%{box-shadow:0 0 0 8px rgba(176,141,87,0)} 0%{box-shadow:0 0 0 0 rgba(176,141,87,.5)} }
.software-art .app-nav {
  position:absolute; top:34px; bottom:0; left:0; width:16%; display:flex; flex-direction:column; align-items:center; gap:18px; padding-top:17px;
  border-right:1px solid rgba(247,245,241,.1); background:#0b192a;
  transform:translateX(-100%); transition:transform .7s .14s var(--ease);
}
.software-art.revealed .app-nav { transform:none; }
.app-nav strong { display:grid;width:24px;height:24px;place-items:center;border:1px solid var(--bronze);border-radius:6px;color:var(--bronze);font:.62rem monospace; }
.app-nav i { width:22px;height:3px;border-radius:3px;background:rgba(247,245,241,.16); }
.app-nav i:nth-of-type(2){width:15px}.app-nav i:nth-of-type(3){width:19px}.app-nav i:nth-of-type(4){width:12px}
.app-nav span { width:7px;height:7px;margin-top:auto;margin-bottom:16px;border-radius:50%;background:#5e9d83;box-shadow:0 0 12px rgba(94,157,131,.55); }
.app-workspace { position:absolute; top:34px; right:0; bottom:0; left:16%; padding:17px; }
.software-art .app-head {
  display:flex; align-items:center; justify-content:space-between; color:rgba(247,245,241,.7);font:650 .65rem monospace;
  opacity:0;transform:translateY(8px);transition:opacity .45s .3s,transform .45s .3s var(--ease);
}
.software-art.revealed .app-head { opacity:1;transform:none; }
.app-head i { width:27%;height:5px;border-radius:4px;background:rgba(247,245,241,.1); }
.app-metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px; }
.app-metrics > div { position:relative;overflow:hidden;padding:10px;border:1px solid rgba(247,245,241,.09);border-radius:6px;background:#142a43;opacity:0;transform:translateY(12px); }
.software-art.revealed .app-metrics > div { animation:app-card-in .48s var(--ease) forwards; }
.software-art.revealed .app-metrics > div:nth-child(1){animation-delay:.42s}.software-art.revealed .app-metrics > div:nth-child(2){animation-delay:.54s}.software-art.revealed .app-metrics > div:nth-child(3){animation-delay:.66s}
@keyframes app-card-in{to{opacity:1;transform:none}}
.app-metrics small{display:block;color:rgba(247,245,241,.36);font:.42rem monospace}.app-metrics strong{display:block;margin-top:5px;color:var(--stone);font:650 .84rem monospace}
.app-metrics i{position:absolute;right:8px;bottom:8px;width:18px;height:3px;background:var(--bronze);transform:scaleX(.2);transform-origin:left;animation:app-meter 2.8s ease-in-out infinite alternate}
@keyframes app-meter{to{transform:scaleX(1)}}
.software-art .app-blocks {
  display:grid; min-height:148px; grid-template-columns:1.45fr .8fr; gap:9px; margin-top:9px;
}
.app-chart,.app-terminal{position:relative;overflow:hidden;padding:10px;border:1px solid rgba(247,245,241,.1);border-radius:6px;background:#0d1c2e;opacity:0;transform:translateY(16px);transition:opacity .5s var(--d),transform .6s var(--d) var(--ease)}
.app-chart{--d:.68s}.app-terminal{--d:.82s}
.software-art.revealed .app-chart,.software-art.revealed .app-terminal{opacity:1;transform:none}
.app-chart>span,.app-terminal>span{color:rgba(247,245,241,.38);font:.43rem monospace;letter-spacing:.08em}
.app-chart svg{position:absolute;right:8px;bottom:9px;left:8px;width:calc(100% - 16px);height:72%}
.app-chart .chart-line{fill:none;stroke:var(--bronze);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:420;stroke-dashoffset:420}
.software-art.revealed .chart-line{animation:app-chart-draw 1.4s 1s var(--ease) forwards}
@keyframes app-chart-draw{to{stroke-dashoffset:0}}
.app-chart .chart-area{fill:rgba(176,141,87,.09)}.app-chart circle{fill:var(--bronze);stroke:#d4b98c;stroke-width:2;animation:app-point 2s 1.4s ease-in-out infinite}
@keyframes app-point{50%{r:7;opacity:.45}}
.app-terminal{display:flex;flex-direction:column;gap:11px}.app-terminal code{color:rgba(247,245,241,.52);font:.45rem monospace;white-space:nowrap}.app-terminal code b{color:#72b494}.app-terminal>i{position:absolute;left:10px;bottom:10px;width:5px;height:9px;background:var(--bronze);animation:app-cursor .8s steps(1) infinite}
@keyframes app-cursor{50%{opacity:0}}
.software-art::after{position:absolute;right:3%;bottom:18%;width:8%;height:1px;background:rgba(176,141,87,.35);content:''}
.software-art .api-path {
  position:absolute; z-index:3; right:1%; bottom:17%; width:12%; height:22px;
  border-top:1px solid var(--bronze); color:#d4b98c; font:.42rem monospace;
  transform:scaleX(0); transform-origin:left; transition:transform .6s 1.05s;
}
.software-art.revealed .api-path { transform:scaleX(1); }
.api-path span{position:absolute;top:5px;right:0}.api-path i{position:absolute;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--bronze);animation:api-packet 2.2s 1.3s linear infinite}.api-path i:last-child{animation-delay:2.35s}
@keyframes api-packet{from{left:0;opacity:0}15%{opacity:1}to{left:100%;opacity:0}}

/* Intelligence art */
.intelligence-art{background-color:#091625;background-image:radial-gradient(circle at 50% 50%,rgba(176,141,87,.08),transparent 38%),linear-gradient(rgba(247,245,241,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.025) 1px,transparent 1px)}
.ai-mesh{position:absolute;inset:6%;width:88%;height:88%}.ai-mesh path{fill:none;stroke:rgba(247,245,241,.09);stroke-width:1;stroke-dasharray:8 10;animation:dash 20s linear infinite}.ai-mesh circle{fill:var(--bronze);opacity:.5;animation:ai-node-pulse 3s ease-in-out infinite}.ai-mesh circle:nth-of-type(even){animation-delay:1.1s}
@keyframes ai-node-pulse{50%{opacity:1;r:7}}
.ai-core{position:absolute;z-index:1;top:50%;left:50%;display:grid;width:130px;height:130px;place-items:center;transform:translate(-50%,-50%)}
.ai-core i{position:absolute;inset:0;border:1px solid rgba(176,141,87,.22);border-radius:50%;animation:ai-ring 12s linear infinite}.ai-core i::before,.ai-core i::after{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--bronze);content:''}.ai-core i::before{top:8%;left:20%}.ai-core i::after{right:12%;bottom:20%}.ai-core i:nth-child(2){inset:17%;border-style:dashed;animation-direction:reverse;animation-duration:8s}
@keyframes ai-ring{to{transform:rotate(360deg)}}
.ai-core span{display:grid;width:68px;height:68px;place-items:center;border:1px solid var(--bronze);border-radius:50%;background:#0c1b2c;color:#d4b98c;font:600 .5rem/1.4 monospace;text-align:center;box-shadow:0 0 30px rgba(176,141,87,.09)}
.intelligence-art .flow {
  position:absolute; z-index:3; inset:17% 6%; display:grid;
  grid-template-columns:repeat(4,1fr); gap:18px; align-items:center;
}
.flow-node {
  position:relative; display:flex; aspect-ratio:1; flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px solid rgba(247,245,241,.18); border-radius:50%;
  background:rgba(13,30,49,.9);color:rgba(247,245,241,.7); font:.55rem monospace;
  opacity:0; transform:scale(.5);
  transition:opacity .35s var(--d), transform .45s var(--d) var(--ease);
}
.intelligence-art.revealed .flow-node { opacity:1; transform:scale(1); }
.flow-node::before{position:absolute;inset:7px;border:1px dashed rgba(176,141,87,.18);border-radius:50%;content:'';animation:ai-ring 15s linear infinite}.flow-node strong{position:relative;font-size:.52rem;letter-spacing:.05em}.flow-node small{position:relative;color:rgba(247,245,241,.36);font:.38rem monospace}
.flow-node:nth-child(1){--d:.1s} .flow-node:nth-child(2){--d:.25s}
.flow-node:nth-child(3){--d:.4s} .flow-node:nth-child(4){--d:.55s}
.flow-node:not(:last-child)::after {
  position:absolute; left:100%; width:18px; height:1px; background:var(--bronze); content:'';
}
.flow-packet {
  position:absolute;z-index:5;top:50%;left:9%;width:7px;height:7px;border-radius:50%;background:var(--bronze);box-shadow:0 0 16px var(--bronze);animation:packet 4.8s ease-in-out infinite;
}
.flow-packet.packet-b{animation-delay:2.4s}
@keyframes packet { 0%{left:9%;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{left:90%;opacity:0} }
.ai-readout{position:absolute;z-index:4;right:6%;bottom:7%;left:6%;display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid rgba(247,245,241,.1);color:rgba(247,245,241,.35);font:.46rem monospace}.ai-readout b{margin-left:5px;color:#d4b98c;font-weight:600}

/* Embedded art */
.embedded-art{background-color:#0a1828}.embedded-status{position:absolute;z-index:4;top:19px;right:22px;display:flex;gap:18px;color:rgba(247,245,241,.42);font:.46rem monospace}.embedded-status span:first-child{display:flex;align-items:center;gap:6px;color:#d4b98c}.embedded-status i{width:5px;height:5px;border-radius:50%;background:#69ad8c;box-shadow:0 0 10px #69ad8c;animation:app-live 1.8s infinite}
.embedded-art svg { position:absolute; inset:10% 5% 14%; width:90%; height:76%; overflow:visible; }
.embedded-art path { fill:none; }
.embedded-art .trace.ghost{stroke:rgba(247,245,241,.12);stroke-width:4}.embedded-art .trace.live{stroke:var(--bronze);stroke-width:1.5;stroke-dasharray:9 10;animation:dash 12s linear infinite}.embedded-art .circuit-branch{stroke:rgba(176,141,87,.35);stroke-width:1;stroke-dasharray:4 7;animation:dash 18s linear infinite reverse}
.embedded-art rect,.embedded-art circle { fill:#13273e; stroke:rgba(247,245,241,.32); stroke-width:2;transform-box:fill-box;transform-origin:center }
.embedded-art text { fill:rgba(247,245,241,.56); font:10px monospace; }
.embedded-art .node-ring{fill:none;stroke:rgba(176,141,87,.28);stroke-dasharray:5 7;animation:embedded-ring 10s linear infinite}.embedded-art .node-ring:nth-of-type(4){animation-direction:reverse}
@keyframes embedded-ring{to{transform:rotate(360deg)}}
.embedded-art .branch-node{fill:var(--bronze);stroke:none;animation:embedded-pulse 2.2s ease-in-out infinite}.embedded-art .branch-node:nth-of-type(2){animation-delay:.6s}.embedded-art .branch-node:nth-of-type(3){animation-delay:1.2s}
@keyframes embedded-pulse{50%{transform:scale(1.7);opacity:.45}}
.embedded-art .signal-dot {
  fill:var(--bronze); stroke:none;
  offset-path:path("M70 210 H500");filter:drop-shadow(0 0 6px #b08d57);animation:signal-travel 3.8s linear infinite;
}
.embedded-art .signal-two{animation-delay:1.9s}
@keyframes signal-travel { to{offset-distance:100%} }
.telemetry-strip{position:absolute;z-index:3;right:7%;bottom:7%;left:7%;display:flex;height:28px;align-items:flex-end;gap:5px;border-bottom:1px solid rgba(247,245,241,.12)}.telemetry-strip i{width:5px;height:var(--h,35%);background:var(--bronze);opacity:.65;animation:telemetry 1.1s ease-in-out infinite alternate}.telemetry-strip i:nth-child(2){--h:75%;animation-delay:.12s}.telemetry-strip i:nth-child(3){--h:48%;animation-delay:.25s}.telemetry-strip i:nth-child(4){--h:92%;animation-delay:.38s}.telemetry-strip i:nth-child(5){--h:60%;animation-delay:.5s}.telemetry-strip i:nth-child(6){--h:30%;animation-delay:.64s}.telemetry-strip i:nth-child(7){--h:82%;animation-delay:.76s}.telemetry-strip i:nth-child(8){--h:52%;animation-delay:.9s}
@keyframes telemetry{to{height:18%}}
.telemetry-strip span{margin:0 0 6px auto;color:rgba(247,245,241,.34);font:.45rem monospace;letter-spacing:.08em}

/* Design art */
.design-art .design-flow {
  position:absolute; z-index:2; inset:14% 6% 22%; display:grid;
  grid-template-columns:repeat(3,1fr); gap:11px; align-items:center;
}
.design-step {
  position:relative;height:78%;overflow:hidden;border:1px solid rgba(247,245,241,.15); border-radius:8px;
  opacity:0; transform:translateX(28px);
  transition:opacity .45s var(--d), transform .65s var(--d) var(--ease);
}
.design-art.revealed .design-step { opacity:1; transform:none; }
.design-step:nth-child(1){--d:.1s} .design-step:nth-child(2){--d:.26s} .design-step:nth-child(3){--d:.42s}
.design-step>span{position:absolute;z-index:3;top:9px;left:10px;color:rgba(247,245,241,.42);font:.42rem monospace;letter-spacing:.06em}
.design-step.wire {
  padding:38px 12px 12px;
  background-image:linear-gradient(rgba(247,245,241,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.07) 1px,transparent 1px);
  background-size:21px 21px;
}
.design-step.wire>i{display:block;height:9px;margin-bottom:12px;border:1px solid rgba(247,245,241,.19)}.design-step.wire>i:nth-of-type(1){width:58%}.design-step.wire>i:nth-of-type(2){height:62px}.design-step.wire>i:nth-of-type(3){width:72%}.design-step.wire>i:nth-of-type(4){width:38%}
.design-step.structure { padding:36px 12px 12px;background:#102238; }
.design-step.structure .ds-header,.design-step.structure .ds-footer{display:block;height:18px;border:1px solid rgba(247,245,241,.15)}.design-step.structure .ds-main{display:grid;height:78px;grid-template-columns:.35fr 1fr;gap:6px;margin-block:7px}.design-step.structure .ds-main i{border:1px solid rgba(247,245,241,.13)}.design-step.structure .ds-main i:nth-child(2){display:grid;grid-row:span 2}.design-step.structure .ds-footer{height:30px}
.design-step.finish { padding:38px 13px 12px; background:var(--paper); color:var(--navy); }
.design-step.finish>span{color:rgba(14,27,46,.48)}.design-step.finish .ds-header{display:flex;gap:5px}.design-step.finish .ds-header i{width:25%;height:4px;border-radius:4px;background:rgba(14,27,46,.25)}.design-step.finish .ds-main{display:flex;height:90px;flex-direction:column;align-items:flex-start;justify-content:center;margin-block:10px;padding:10px;border-radius:5px;background:linear-gradient(135deg,#12243a,#304b68);color:var(--stone)}.design-step.finish .ds-main strong{font-size:.68rem}.design-step.finish .ds-button{position:static;margin-top:8px;padding:4px 8px;border-radius:99px;background:var(--bronze);color:var(--navy);font:.42rem monospace}.design-step.finish .ds-footer{display:flex;gap:5px}.design-step.finish .ds-footer i{flex:1;height:30px;border:1px solid rgba(14,27,46,.12);border-radius:4px}
.design-route{position:absolute;z-index:1;right:7%;bottom:12%;left:7%;width:86%;height:14%}.design-route path{fill:none;stroke:rgba(247,245,241,.18);stroke-width:1}.design-route circle{fill:var(--navy);stroke:var(--bronze);stroke-width:1.5}
.design-cursor{position:absolute;z-index:5;bottom:17%;left:7%;width:12px;height:16px;background:var(--stone);clip-path:polygon(0 0,100% 70%,58% 72%,41% 100%);filter:drop-shadow(0 0 7px rgba(247,245,241,.5));animation:design-cursor 5.8s 1s var(--ease) infinite}
@keyframes design-cursor{0%,8%{left:7%;transform:translateY(0)}32%{left:48%;transform:translateY(-12px)}57%{left:48%;transform:translateY(0)}82%,100%{left:89%;transform:translateY(-8px)}}
.design-tokens{position:absolute;z-index:3;right:7%;bottom:6%;left:7%;display:flex;align-items:center;gap:7px;color:rgba(247,245,241,.35);font:.43rem monospace}.design-tokens i{width:10px;height:10px;border-radius:2px;background:var(--stone)}.design-tokens i:nth-of-type(2){background:var(--bronze)}.design-tokens i:nth-of-type(3){background:#39536e}.design-tokens i:nth-of-type(4){background:#5e9d83}.design-tokens b{margin-left:auto;color:rgba(247,245,241,.38);font-weight:500}

/* Media art (capabilities page) */
.media-art {
  display:flex; align-items:center; padding:7%;
  background:var(--navy); overflow:hidden;
}
.media-art .motion-composition {
  width:100%; box-shadow: 0 28px 64px rgba(0,0,0,.3);
}
.media-wave{position:absolute;z-index:4;right:4%;bottom:8%;left:4%;display:flex;height:24%;align-items:center;gap:4px;opacity:.36}.media-wave i{flex:1;height:18%;background:var(--stone);transform-origin:center;animation:media-wave 1.3s ease-in-out infinite alternate}.media-wave i:nth-child(2n){height:65%;animation-delay:.12s}.media-wave i:nth-child(3n){height:90%;animation-delay:.24s}.media-wave i:nth-child(5n){height:42%;animation-delay:.38s}
@keyframes media-wave{to{transform:scaleY(.3);opacity:.35}}
.media-rec{position:absolute;z-index:9;top:8%;right:3%;display:flex;align-items:center;gap:5px;color:rgba(247,245,241,.6);font:.45rem monospace}.media-rec i{width:6px;height:6px;border-radius:50%;background:#d36f62;animation:app-cursor 1s steps(1) infinite}

/* ------------ 21. WORK PAGE ------------ */
.work-page { background:#091422; color:var(--stone); }
.work-list { display:grid; gap:clamp(5rem,9vw,10rem); }
.work-entry { display:grid; grid-template-columns:1.22fr .78fr; gap:clamp(2rem,5.5vw,5.5rem); align-items:start; }
.work-entry:nth-child(even) { grid-template-columns:.78fr 1.22fr; }
.work-entry:nth-child(even) .work-art { order:2; }
.work-art {
  position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:16px;
  background:#172b43; clip-path:inset(0 100% 0 0 round 16px);
  transition: clip-path .9s var(--ease);
}
.work-entry.revealed .work-art { clip-path:inset(0 0 0 0 round 16px); }
.work-art::before {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(247,245,241,.048) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.048) 1px,transparent 1px);
  background-size:44px 44px; content:'';
}
.work-art.ai .inner-window {
  position:absolute; inset:12%;
  border:1px solid rgba(247,245,241,.18); border-radius:9px; background:#0f1e31;
  transition:transform .6s var(--ease);
}
.work-art.ai:hover .inner-window { transform:scale(1.025); }
.work-art.ai .inner-window::before {
  position:absolute; inset:14%;
  background:linear-gradient(var(--bronze) 0 7px,transparent 7px 28px,rgba(247,245,241,.08) 28px 29px,transparent 29px); content:'';
}
.work-art.device { background:#d4cfc3; }
.work-art.device::after {
  position:absolute; top:14%; left:19%; width:38%; height:68%;
  border:2px solid var(--navy); border-radius:26px;
  background:var(--paper); box-shadow:var(--shadow); content:'';
  transform:rotate(-5deg); transition:transform .6s var(--ease);
}
.work-art.device:hover::after { transform:rotate(-2deg) translateY(-8px); }
.work-art.experience { background:var(--charcoal); }
.work-art.experience .frames { position:absolute; inset:10%; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.work-art.experience .frames i { background:#193049; }
.work-art.experience .frames i:nth-child(2) { background:var(--bronze); }
.work-art.experience .frames i:nth-child(3) { grid-column:span 2; background:var(--paper); }
.work-art.motion-study { background:var(--charcoal); }
.work-art.motion-study .motion-composition { position:absolute; inset:6%; width:auto; aspect-ratio:auto; }
.work-art .system-caption { position:absolute; z-index:5; right:16px; bottom:14px; color:rgba(247,245,241,.45); font:.53rem ui-monospace,monospace; letter-spacing:.1em; }
.work-copy .work-label { color:var(--bronze); font:.6rem monospace; }
.work-copy h2 { margin-top:.9rem; font-size:clamp(2.4rem,3.8vw,4.5rem); }
.work-copy p { color:rgba(247,245,241,.62); }
.work-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:1.2rem; }
.work-meta span { padding:4px 9px; border:1px solid rgba(247,245,241,.17); border-radius:99px; font-size:.63rem; }

/* Work montage (hero) */
.work-montage { position:absolute; inset:2% 0; }
.montage-card {
  position:absolute; overflow:hidden;
  border:1px solid rgba(247,245,241,.14); border-radius:11px;
  background:#172b43; box-shadow:0 22px 52px rgba(0,0,0,.22);
  opacity:0; animation:montage-in .7s var(--delay) var(--ease) forwards;
}
.montage-card::before {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(247,245,241,.048) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.048) 1px,transparent 1px);
  background-size:33px 33px; content:'';
}
.montage-card.m1{inset:2% 38% 42% 1%;--delay:.28s}
.montage-card.m2{inset:22% 1% 13% 56%;--delay:.48s;background:#d3cdc1}
.montage-card.m3{inset:60% 48% 1% 14%;--delay:.68s;background:var(--charcoal)}
@keyframes montage-in { from{opacity:0;transform:translateY(22px) rotate(3deg)} to{opacity:1;transform:none} }

/* Work detail panels */
.work-controls { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.5rem; }
.work-details-toggle {
  display:inline-flex; min-height:44px; align-items:center; gap:.6rem;
  padding:.5rem 0; border:0; border-bottom:1px solid rgba(247,245,241,.3);
  background:transparent; color:var(--stone); cursor:pointer; font-size:.76rem; font-weight:650;
}
.work-details-toggle::after { font-size:1rem; content:'+'; transition:transform .25s var(--ease); }
.work-details-toggle[aria-expanded="true"]::after { transform:rotate(45deg); }
.work-detail-panel {
  grid-column:1/-1; order:3;
  display:grid; grid-template-rows:0fr; overflow:hidden;
  border-top:1px solid rgba(247,245,241,.12);
  transition:grid-template-rows .48s var(--ease), padding .48s var(--ease);
  padding-top:0;
}
.work-detail-panel[aria-hidden="false"] { grid-template-rows:1fr; padding-top:1.5rem; }
.work-detail-inner { min-height:0; }
.work-architecture { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; padding-bottom:1rem; }
.architecture-node {
  position:relative; display:grid; min-height:86px; place-items:center;
  padding:9px; border:1px solid rgba(247,245,241,.16); border-radius:7px;
  color:rgba(247,245,241,.7); font:.58rem ui-monospace,monospace; text-align:center;
}
.architecture-node:not(:last-child)::after {
  position:absolute; left:100%; width:9px; height:1px; background:var(--bronze); content:'';
}
.work-page.dark { background:#091422; }

/* ------------ 22. CONTACT PAGE ------------ */
.contact-intro { position:relative;overflow:hidden;padding-top:78px;background:#091625;color:var(--stone); }
.contact-intro::before { position:absolute;inset:0;background:radial-gradient(circle at 76% 48%,rgba(176,141,87,.1),transparent 34%);content:'';pointer-events:none; }
.contact-intro-grid { position:relative;display:grid;min-height:min(760px,calc(100svh - 78px));grid-template-columns:.82fr 1.18fr;gap:clamp(3rem,6vw,6rem);align-items:center;padding-block:clamp(4.5rem,7vw,7rem); }
.contact-intro-copy h1 { max-width:11ch;font-size:clamp(3.8rem,5.5vw,6.5rem); }
.contact-intro-copy .lede { max-width:34rem;color:rgba(247,245,241,.64); }
.contact-intro-copy>* { opacity:0;animation:enter .65s var(--ease) forwards; }.contact-intro-copy>:nth-child(1){animation-delay:.06s}.contact-intro-copy>:nth-child(2){animation-delay:.14s}.contact-intro-copy>:nth-child(3){animation-delay:.23s}.contact-intro-copy>:nth-child(4){animation-delay:.32s}
.contact-availability { display:flex;align-items:center;gap:10px;margin-top:1.7rem;color:rgba(247,245,241,.52);font:.61rem monospace;letter-spacing:.08em;text-transform:uppercase; }
.contact-availability i { width:7px;height:7px;border-radius:50%;background:#69ad8c;box-shadow:0 0 13px rgba(105,173,140,.7);animation:node-pulse 2s infinite; }

.contact-signal-board { position:relative;min-height:480px;overflow:hidden;border:1px solid rgba(247,245,241,.14);border-radius:18px;background:#0d1d30;box-shadow:0 30px 75px rgba(0,0,0,.28); }
.contact-signal-board::before { position:absolute;inset:0;background-image:linear-gradient(rgba(247,245,241,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.035) 1px,transparent 1px);background-size:27px 27px;content:'';animation:ab-grid 18s linear infinite; }
.cs-top,.cs-bottom { position:absolute;z-index:6;right:1.5rem;left:1.5rem;display:flex;justify-content:space-between;color:rgba(247,245,241,.4);font:600 .5rem monospace;letter-spacing:.1em; }
.cs-top{top:1.3rem;padding-bottom:.9rem;border-bottom:1px solid rgba(247,245,241,.1)}.cs-bottom{bottom:1.3rem;padding-top:.9rem;border-top:1px solid rgba(247,245,241,.1)}
.cs-top span:last-child{display:flex;align-items:center;gap:7px;color:#d4b98c}.cs-top i{width:5px;height:5px;border-radius:50%;background:var(--bronze);animation:node-pulse 2s infinite}
.cs-stage { position:absolute;z-index:2;inset:15% 5%; }.cs-stage svg{position:absolute;inset:0;width:100%;height:100%}.cs-stage path{fill:none;stroke:rgba(247,245,241,.13);stroke-width:1;vector-effect:non-scaling-stroke}.cs-stage .cs-live-path{stroke:var(--bronze);stroke-width:1.5;stroke-dasharray:9 12;animation:dash 14s linear infinite}
.cs-node { position:absolute;z-index:4;width:118px;padding:10px;border:1px solid rgba(247,245,241,.13);border-radius:8px;background:#122740;box-shadow:0 12px 26px rgba(0,0,0,.2);opacity:0;animation:cs-node-in .55s var(--d) var(--ease) forwards; }
@keyframes cs-node-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cs-node span{color:var(--bronze);font:.43rem monospace}.cs-node strong{display:block;margin-top:3px;font-size:.68rem}.cs-node small{display:block;margin-top:2px;color:rgba(247,245,241,.4);font:.4rem monospace}.cs-node.brief{top:50%;left:0;--d:.38s;translate:0 -50%}.cs-node.align{top:0;left:50%;--d:.52s;translate:-50% 0}.cs-node.build{top:50%;right:0;--d:.66s;translate:0 -50%}
.cs-core { position:absolute;z-index:5;bottom:0;left:50%;display:flex;width:100px;height:100px;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--bronze);border-radius:50%;background:#091725;transform:translateX(-50%);box-shadow:0 0 36px rgba(176,141,87,.12); }.cs-core>i{position:absolute;inset:-12px;border:1px dashed rgba(176,141,87,.26);border-radius:50%;animation:ab-spin 14s linear infinite}.cs-core strong{font:.62rem monospace}.cs-core small{margin-top:3px;color:rgba(247,245,241,.38);font:.38rem monospace}
.cs-packet{position:absolute;z-index:6;top:50%;left:12%;width:7px;height:7px;border-radius:50%;background:var(--bronze);box-shadow:0 0 14px rgba(176,141,87,.8);animation:cs-packet 4.2s linear infinite}.cs-packet.two{animation-delay:2.1s}
@keyframes cs-packet{0%{left:12%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:87%;opacity:0}}

.contact-workspace { background:var(--sand); }
.contact-workspace-head { max-width:54rem;margin-bottom:clamp(2.5rem,5vw,4.5rem); }.contact-workspace-head h2{max-width:13ch}.contact-workspace-head .lede{margin-top:.8rem}
.contact-workspace-grid { display:grid;grid-template-columns:.68fr 1.32fr;gap:clamp(1.5rem,3.5vw,3.5rem);align-items:start; }
.contact-details { overflow:hidden;border:1px solid rgba(247,245,241,.12);border-radius:16px;background:#0c1a2b;color:var(--stone);box-shadow:var(--shadow-lg); }
.contact-direct,.contact-fit { padding:clamp(1.4rem,2.5vw,2.1rem); }.contact-direct{border-bottom:1px solid rgba(247,245,241,.1)}
.contact-card-label { color:var(--bronze);font:600 .55rem monospace;letter-spacing:.12em; }.contact-details h3{margin-top:1.1rem;font-size:clamp(1.4rem,2vw,1.8rem)}
.contact-email { display:flex;align-items:center;justify-content:space-between;margin-top:2rem;padding-bottom:.8rem;border-bottom:1px solid rgba(247,245,241,.16);font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:650; }.contact-email span,.contact-phone span{color:var(--bronze);transition:transform .25s var(--ease)}.contact-email:hover span,.contact-phone:hover span{transform:translate(3px,-3px)}
.contact-phone { display:flex;align-items:center;justify-content:space-between;margin-top:1.2rem;color:rgba(247,245,241,.68);font-size:.79rem; }
.copy-email-btn { display:inline-flex;align-items:center;margin-top:.8rem;padding:6px 10px;border:1px solid rgba(247,245,241,.16);border-radius:99px;background:transparent;color:rgba(247,245,241,.52);font-size:.63rem;cursor:pointer;transition:border-color .2s,color .2s,background .2s; }.copy-email-btn:hover{border-color:var(--bronze);color:var(--stone)}.copy-email-btn.copied{border-color:#69ad8c;background:rgba(105,173,140,.1);color:#9ed2b9}
.contact-fit ul { margin:1.3rem 0 0;padding:0;list-style:none; }.contact-fit li{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:.75rem 0;border-bottom:1px solid rgba(247,245,241,.09);color:rgba(247,245,241,.58);font-size:.73rem}.contact-fit li i{color:var(--bronze);font:.49rem monospace;font-style:normal}
.contact-response { display:flex;align-items:center;gap:9px;padding:1rem clamp(1.4rem,2.5vw,2.1rem);background:rgba(247,245,241,.035);color:rgba(247,245,241,.42);font:.55rem monospace;letter-spacing:.05em}.contact-response i{width:6px;height:6px;border-radius:50%;background:#69ad8c;box-shadow:0 0 9px rgba(105,173,140,.6)}

.contact-form-v2 { padding:clamp(1.5rem,3.2vw,3rem);border:1px solid rgba(14,27,46,.12);border-radius:16px;background:var(--stone);box-shadow:0 24px 60px rgba(14,27,46,.1); }
.form-heading { display:flex;align-items:center;justify-content:space-between;margin-bottom:1.8rem;padding-bottom:1rem;border-bottom:1px solid var(--line); }.form-heading span,.project-field legend>span,.message-field label>span{color:var(--bronze);font:650 .57rem monospace;letter-spacing:.1em}.form-heading small,.project-field legend small,.message-field label small{color:var(--muted);font-size:.62rem;font-weight:450}
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
.field { display:grid;gap:.5rem;position:relative;margin:0; }.field label{font-size:.67rem;font-weight:650}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--text);outline:none;transition:border-color .22s,box-shadow .22s,background .22s}.field input,.field select{min-height:52px;padding:.75rem .9rem}.field textarea{min-height:165px;padding:.9rem;resize:vertical;line-height:1.55}.field input::placeholder,.field textarea::placeholder{color:#8994a0}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bronze);background:#fff;box-shadow:0 0 0 3px rgba(176,141,87,.1)}
fieldset.field{margin:1.8rem 0 0;padding:0;border:0}fieldset.field legend{display:flex;width:100%;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.project-types{display:flex;flex-wrap:wrap;gap:7px}.type-chip{min-height:38px;padding:7px 13px;border:1px solid var(--line);border-radius:99px;background:var(--paper);color:var(--muted);font-size:.69rem;cursor:pointer;transition:background .22s,color .22s,border-color .22s,transform .22s}.type-chip:hover{border-color:var(--bronze);transform:translateY(-2px)}.type-chip[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:var(--stone)}
.message-field{margin-top:1.8rem}.message-field label{display:flex;align-items:center;justify-content:space-between}.form-actions{display:flex;align-items:center;gap:1.2rem;margin-top:1.2rem}.form-note{max-width:37ch;color:var(--muted);font-size:.65rem;line-height:1.45}.form-status{min-height:1.4rem;margin-top:.6rem;color:var(--muted);font-size:.76rem}
.submit-state{position:relative;flex:none;overflow:hidden}.submit-state.loading{pointer-events:none}.submit-state.loading .button-label,.submit-state.loading .arrow{opacity:0}.submit-state.loading::after{position:absolute;width:16px;height:16px;border:2px solid rgba(247,245,241,.3);border-top-color:var(--stone);border-radius:50%;content:'';animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.submit-state.success{background:#2e5d4a;border-color:#2e5d4a}

/* ------------ HOMEPAGE MOTION UPGRADE ------------ */
.home-page .m-hero::before { position:absolute;z-index:0;width:34rem;height:34rem;border-radius:50%;background:radial-gradient(circle,rgba(176,141,87,.13),transparent 68%);content:'';pointer-events:none;left:var(--hero-glow-x,72%);top:var(--hero-glow-y,42%);transform:translate(-50%,-50%);transition:left .3s ease-out,top .3s ease-out; }
.home-page .m-hero-grid{position:relative;z-index:1}
.m-hud{position:absolute;z-index:10;top:0;right:1%;left:2%;display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid rgba(247,245,241,.1);color:rgba(247,245,241,.38);font:600 .48rem monospace;letter-spacing:.1em}.m-hud span:last-child{display:flex;align-items:center;gap:7px;color:#d4b98c}.m-hud i{width:5px;height:5px;border-radius:50%;background:var(--bronze);animation:node-pulse 2s infinite}
.m-stage-grid{position:absolute;z-index:0;inset:8% 1% 3% 2%;background-image:linear-gradient(rgba(247,245,241,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.025) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);animation:home-grid 18s linear infinite}
@keyframes home-grid{to{background-position:28px 28px}}
.m-scanline{position:absolute;z-index:8;top:10%;right:1%;left:2%;height:1px;background:linear-gradient(90deg,transparent,rgba(212,185,140,.8),transparent);box-shadow:0 0 20px rgba(176,141,87,.25);opacity:0;animation:home-scan 6s 1.4s var(--ease) infinite;pointer-events:none}
@keyframes home-scan{0%,12%{top:10%;opacity:0}22%{opacity:1}80%{opacity:.65}92%,100%{top:92%;opacity:0}}
.m-ui-top{display:flex;align-items:center;justify-content:space-between;padding-inline:10px;color:rgba(247,245,241,.35);font:600 .42rem monospace}.m-ui-top>span{display:flex;gap:4px}.m-ui-top>span i{width:4px;height:4px;border-radius:50%;background:rgba(247,245,241,.24)}.m-ui-top>span i:first-child{background:var(--bronze)}.m-ui-top em{display:flex;align-items:center;gap:5px;color:#8fc9ab;font-style:normal}.m-ui-top em::before{width:4px;height:4px;border-radius:50%;background:#69ad8c;content:''}
.m-ui-nav{display:flex;flex-direction:column;align-items:center;gap:15px;padding-top:17px}.m-ui-nav i{width:18px;height:3px;border-radius:3px;background:rgba(247,245,241,.14)}.m-ui-nav i:nth-child(2){width:12px}.m-ui-nav i:nth-child(3){width:16px}.m-ui-nav i:nth-child(4){width:9px}
.m-ui-cards i{position:relative;overflow:hidden;animation:hero-card 3.2s var(--d) ease-in-out infinite}.m-ui-cards i:nth-child(1){--d:0s}.m-ui-cards i:nth-child(2){--d:.4s}.m-ui-cards i:nth-child(3){--d:.8s}.m-ui-cards i::after{position:absolute;right:7px;bottom:7px;left:7px;height:3px;border-radius:2px;background:var(--bronze);content:'';transform:scaleX(.2);transform-origin:left;animation:hero-meter 2.4s var(--d) ease-in-out infinite alternate}
@keyframes hero-card{50%{border-color:rgba(176,141,87,.38);background:rgba(176,141,87,.06)}}@keyframes hero-meter{to{transform:scaleX(1)}}
.m-code-head{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 8px;padding-bottom:7px;border-bottom:1px solid rgba(247,245,241,.1);color:rgba(247,245,241,.35);font-size:.46rem;letter-spacing:.08em}.m-code-head i{width:5px;height:5px;border-radius:50%;background:#69ad8c;box-shadow:0 0 9px rgba(105,173,140,.6);animation:app-cursor 1.2s steps(1) infinite}
.m-data-ring{position:absolute;border:1px dashed rgba(176,141,87,.25);border-radius:50%;animation:ab-spin 13s linear infinite}.m-data-ring.one{inset:8%}.m-data-ring.two{inset:18%;animation-direction:reverse;animation-duration:9s}
.m-device .m-device-screen{position:absolute;inset:16%;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(176,141,87,.48);border-radius:7px;color:rgba(247,245,241,.52);font:.45rem monospace}.m-device-screen>i{width:6px;height:6px;border-radius:50%;background:#69ad8c;box-shadow:0 0 10px rgba(105,173,140,.7)}.m-device .m-device-wave{position:absolute;right:8%;bottom:8%;display:flex;align-items:flex-end;gap:2px;height:18px}.m-device-wave i{width:3px;height:35%;background:var(--bronze);animation:telemetry 1s ease-in-out infinite alternate}.m-device-wave i:nth-child(2){height:90%;animation-delay:.2s}.m-device-wave i:nth-child(3){height:60%;animation-delay:.4s}.m-device::before,.m-device::after{display:none}
.m-frame>span{position:absolute;z-index:2;top:12px;left:12px;color:rgba(247,245,241,.42);font:.45rem monospace}.m-frame-play{position:absolute;z-index:2;top:50%;left:50%;width:30px;height:30px;border:1px solid rgba(247,245,241,.28);border-radius:50%;transform:translate(-50%,-50%)}.m-frame-play::after{position:absolute;top:50%;left:53%;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--bronze);content:'';transform:translate(-50%,-50%)}
.m-flow-packet{position:absolute;z-index:9;width:7px;height:7px;border-radius:50%;background:var(--bronze);box-shadow:0 0 15px rgba(176,141,87,.85);pointer-events:none}.m-flow-packet.packet-one{top:48%;left:35%;animation:hero-packet-a 4s 1.4s ease-in-out infinite}.m-flow-packet.packet-two{bottom:27%;left:33%;animation:hero-packet-b 4.8s 2s ease-in-out infinite}
@keyframes hero-packet-a{0%{transform:translate(0,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(150px,38px);opacity:0}}@keyframes hero-packet-b{0%{transform:translate(0,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(120px,-12px);opacity:0}}
.hero-scroll-cue{position:absolute;right:0;bottom:-4px;display:flex;align-items:center;gap:9px;color:rgba(247,245,241,.34);font:.46rem monospace;letter-spacing:.1em}.hero-scroll-cue i{position:relative;width:42px;height:1px;background:rgba(247,245,241,.2)}.hero-scroll-cue i::after{position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:var(--bronze);content:'';animation:scroll-cue 2.2s ease-in-out infinite}@keyframes scroll-cue{to{left:calc(100% - 5px)}}

.case-dashboard-top{display:flex;height:30px;align-items:center;justify-content:space-between;padding:0 11px;border-bottom:1px solid rgba(247,245,241,.1);color:rgba(247,245,241,.35);font:.42rem monospace}.case-dashboard-top>span{display:flex;gap:4px}.case-dashboard-top i{width:4px;height:4px;border-radius:50%;background:rgba(247,245,241,.25)}.case-dashboard-top i:first-child{background:var(--bronze)}
.case-one .case-core::before,.case-one .case-core::after{display:none}.case-dashboard-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px}.case-dashboard-metrics i{height:44px;border:1px solid rgba(247,245,241,.1);border-radius:5px;background:rgba(247,245,241,.025);animation:case-metric 2.8s var(--d) ease-in-out infinite alternate}.case-dashboard-metrics i:nth-child(2){--d:.35s}.case-dashboard-metrics i:nth-child(3){--d:.7s}@keyframes case-metric{to{border-color:rgba(176,141,87,.45);background:rgba(176,141,87,.07)}}
.case-core>svg{position:absolute;right:14px;bottom:13px;left:14px;width:calc(100% - 28px);height:45%}.case-core>svg path{fill:none;stroke:var(--bronze);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:520;stroke-dashoffset:520}.case-panel.revealed .case-core>svg path{animation:case-chart 1.5s .6s var(--ease) forwards}@keyframes case-chart{to{stroke-dashoffset:0}}.case-core>svg circle{fill:var(--bronze);animation:app-point 2s 1.4s infinite}
.case-device>span{position:absolute;top:8%;right:9%;left:9%;display:flex;align-items:center;gap:6px;color:var(--navy);font:.42rem monospace}.case-device>span i{width:5px;height:5px;border-radius:50%;background:#69ad8c}.case-device>div{position:absolute;inset:27% 13% 13%;display:flex;align-items:flex-end;justify-content:center;gap:6px;border:1px solid rgba(14,27,46,.15);border-radius:7px}.case-device>div i{width:8px;height:35%;background:var(--bronze);animation:telemetry 1.2s ease-in-out infinite alternate}.case-device>div i:nth-child(2){height:78%;animation-delay:.2s}.case-device>div i:nth-child(3){height:54%;animation-delay:.4s}.case-device::after{display:none}
.case-signal{overflow:visible}.case-signal i{position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--bronze);animation:case-signal 2.7s linear infinite}.case-signal i:last-child{animation-delay:1.35s}@keyframes case-signal{from{left:0;opacity:0}15%{opacity:1}to{left:100%;opacity:0}}
.case-cloud{position:absolute;top:36%;right:9%;display:flex;width:110px;height:110px;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(14,27,46,.2);border-radius:50%;background:rgba(247,245,241,.55);color:var(--navy)}.case-cloud>i{width:7px;height:7px;margin-bottom:7px;border-radius:50%;background:#69ad8c;box-shadow:0 0 0 rgba(105,173,140,.5);animation:node-pulse 2s infinite}.case-cloud strong{font:.55rem monospace}.case-cloud small{margin-top:3px;color:rgba(14,27,46,.5);font:.4rem monospace}
.case-frame-grid i{position:relative;overflow:hidden}.case-frame-grid span{position:absolute;left:10px;bottom:8px;color:rgba(247,245,241,.5);font:.46rem monospace;letter-spacing:.08em}.case-frame-grid i:nth-child(2) span{color:var(--navy)}.case-frame-grid i:nth-child(3) span{color:var(--navy);font-size:.58rem}.case-frame-grid i{animation:case-frame 5.5s var(--d) var(--ease) infinite}.case-frame-grid i:nth-child(2){--d:.35s}.case-frame-grid i:nth-child(3){--d:.7s}@keyframes case-frame{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.case-timeline{position:absolute;z-index:5;right:12%;bottom:7%;left:12%;display:grid;grid-template-columns:1.2fr .6fr 1fr;gap:4px}.case-timeline>i{height:6px;background:#40526a}.case-timeline>i:nth-child(2){background:var(--bronze)}.case-timeline>span{position:absolute;top:-5px;bottom:-5px;left:0;width:1px;background:var(--stone);animation:case-playhead 5.5s linear infinite}@keyframes case-playhead{to{left:100%}}

.cap-scene.active::before{position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(176,141,87,.055),transparent 72%);content:'';animation:scene-sweep 2s var(--ease) both}@keyframes scene-sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.scene-software.active .piece{animation:piece-breathe 4s 1s ease-in-out infinite alternate}@keyframes piece-breathe{to{border-color:rgba(176,141,87,.42);box-shadow:0 0 24px rgba(176,141,87,.08)}}
.scene-ai.active::after{position:absolute;z-index:5;top:50%;left:14%;width:7px;height:7px;border-radius:50%;background:var(--bronze);box-shadow:0 0 15px var(--bronze);content:'';animation:scene-ai-packet 3.4s linear infinite}@keyframes scene-ai-packet{to{left:86%}}
.scene-ai.active .ai-node{animation:scene-ai-node 2.4s var(--d) ease-in-out infinite alternate}@keyframes scene-ai-node{to{border-color:var(--bronze);box-shadow:0 0 28px rgba(176,141,87,.09)}}
.device-map::after{position:absolute;top:50%;left:8%;width:8px;height:8px;border-radius:50%;background:var(--bronze);box-shadow:0 0 14px var(--bronze);content:'';offset-path:path('M 0 0 H 120 C 170 0 160 -75 220 -75 H 380');animation:device-packet 3.8s linear infinite}@keyframes device-packet{to{offset-distance:100%}}
.scene-design.active::after{position:absolute;z-index:5;bottom:23%;left:12%;width:13px;height:17px;background:var(--stone);clip-path:polygon(0 0,100% 68%,58% 72%,40% 100%);content:'';filter:drop-shadow(0 0 7px rgba(247,245,241,.5));animation:scene-cursor 4.5s 1s var(--ease) infinite}@keyframes scene-cursor{50%,100%{left:80%;transform:translateY(-30px)}}

/* Home capability story: applied intelligence */
.scene-ai.active::after{display:none}
.story-ai-map{position:absolute;inset:13% 5% 15%}.story-ai-map>svg{position:absolute;inset:0;width:100%;height:100%}.story-ai-map>svg path{fill:none;stroke:rgba(247,245,241,.12);stroke-width:1;vector-effect:non-scaling-stroke}.story-ai-map>svg .ai-route-live{stroke:var(--bronze);stroke-width:1.5;stroke-dasharray:9 12;animation:dash 14s linear infinite}.story-ai-map>svg circle{fill:#0f2035;stroke:var(--bronze);stroke-width:1.5;vector-effect:non-scaling-stroke}
.story-ai-core{position:absolute;z-index:4;top:50%;left:50%;display:flex;width:116px;height:116px;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--bronze);border-radius:50%;background:#0a1829;box-shadow:0 0 44px rgba(176,141,87,.13);transform:translate(-50%,-50%)}.story-ai-core>i{position:absolute;inset:-12px;border:1px dashed rgba(176,141,87,.26);border-radius:50%;animation:ab-spin 13s linear infinite}.story-ai-core>i:nth-child(2){inset:-25px;border-color:rgba(247,245,241,.1);animation-direction:reverse;animation-duration:21s}.story-ai-core strong{font:.68rem monospace;letter-spacing:.08em}.story-ai-core span{margin-top:4px;color:rgba(247,245,241,.38);font:.4rem monospace}
.story-ai-node{position:absolute;z-index:4;width:144px;padding:11px 12px;border:1px solid rgba(247,245,241,.13);border-radius:9px;background:rgba(18,39,64,.96);box-shadow:0 12px 28px rgba(0,0,0,.2);opacity:0;transform:translateY(12px)}.scene-ai.active .story-ai-node{animation:story-node-in .52s var(--d) var(--ease) forwards}@keyframes story-node-in{to{opacity:1;transform:none}}.story-ai-node small{color:var(--bronze);font:.42rem monospace}.story-ai-node strong{display:block;margin-top:3px;font-size:.72rem}.story-ai-node span{display:block;margin-top:2px;color:rgba(247,245,241,.4);font:.4rem monospace}.story-ai-node.input{top:50%;left:0;--d:.12s;translate:0 -50%}.story-ai-node.knowledge{top:0;left:50%;--d:.25s;translate:-50% 0}.story-ai-node.reasoning{bottom:0;left:50%;--d:.38s;translate:-50% 0}.story-ai-node.action{top:50%;right:0;--d:.51s;translate:0 -50%}
.story-ai-packet{position:absolute;z-index:7;width:7px;height:7px;border-radius:50%;background:var(--bronze);box-shadow:0 0 15px rgba(176,141,87,.85);opacity:0}.scene-ai.active .story-ai-packet.p1{top:50%;left:14%;animation:story-ai-flow-x 3.8s .8s ease-in-out infinite}.scene-ai.active .story-ai-packet.p2{top:18%;left:50%;animation:story-ai-flow-y 4.2s 1.7s ease-in-out infinite}@keyframes story-ai-flow-x{0%{left:14%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:86%;opacity:0}}@keyframes story-ai-flow-y{0%{top:18%;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:82%;opacity:0}}
.story-ai-stats{position:absolute;z-index:6;right:8%;bottom:7%;left:8%;display:flex;justify-content:space-between;padding-top:11px;border-top:1px solid rgba(247,245,241,.1);color:rgba(247,245,241,.34);font:.44rem monospace}.story-ai-stats b{margin-left:5px;color:#d4b98c;font-weight:600}

/* Home capability story: connected device architecture */
.story-device-map{position:absolute;inset:13% 4% 16%}.story-device-map>svg{position:absolute;inset:0;width:100%;height:100%}.story-device-map>svg path{fill:none;stroke:rgba(247,245,241,.13);stroke-width:1;vector-effect:non-scaling-stroke}.story-device-map>svg .device-route-live{stroke:var(--bronze);stroke-width:1.5;stroke-dasharray:9 12;animation:dash 14s linear infinite}.story-device-map>svg circle{fill:#102238;stroke:var(--bronze);stroke-width:1.5;vector-effect:non-scaling-stroke}
.device-node{position:absolute;z-index:4;display:flex;width:112px;min-height:118px;flex-direction:column;align-items:center;justify-content:center;padding:10px;border:1px solid rgba(247,245,241,.13);border-radius:11px;background:rgba(17,37,60,.96);box-shadow:0 12px 28px rgba(0,0,0,.2);opacity:0;transform:translateY(12px)}.scene-embedded.active .device-node{animation:story-node-in .52s var(--d) var(--ease) forwards}.device-node>small{position:absolute;top:7px;left:8px;color:var(--bronze);font:.4rem monospace}.device-node>strong{margin-top:8px;font-size:.66rem}.device-node>span{margin-top:2px;color:rgba(247,245,241,.4);font:.38rem monospace;text-align:center}.dn-sensor{top:50%;left:0;--d:.1s;translate:0 -50%}.dn-edge{top:50%;left:25%;--d:.22s;translate:0 -50%}.dn-cloud{top:0;left:50%;--d:.34s}.dn-logic{bottom:0;left:50%;--d:.46s}.dn-app{top:50%;right:0;--d:.58s;translate:0 -50%}
.sensor-icon,.chip-icon,.cloud-icon,.logic-icon,.app-icon{position:relative;width:38px;height:38px}.sensor-icon{border:1px solid var(--bronze);border-radius:50%}.sensor-icon i:first-child{position:absolute;inset:8px;border:1px dashed rgba(176,141,87,.5);border-radius:50%;animation:ab-spin 7s linear infinite}.sensor-icon i:last-child{position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background:var(--bronze);transform:translate(-50%,-50%);animation:node-pulse 2s infinite}
.chip-icon{border:1px solid rgba(247,245,241,.3);border-radius:5px;background:#0c1b2d}.chip-icon::before,.chip-icon::after{position:absolute;top:5px;bottom:5px;width:5px;background:repeating-linear-gradient(to bottom,var(--bronze) 0 3px,transparent 3px 8px);content:''}.chip-icon::before{left:-6px}.chip-icon::after{right:-6px}.chip-icon i{position:absolute;inset:9px;border:1px solid var(--bronze);border-radius:2px}
.cloud-icon{border:1px solid rgba(247,245,241,.28);border-radius:50%}.cloud-icon i{position:absolute;border:1px solid var(--bronze);border-radius:50%}.cloud-icon i:first-child{inset:7px}.cloud-icon i:last-child{top:50%;right:-8px;left:-8px;height:1px;border:0;border-top:1px solid rgba(176,141,87,.55);border-radius:0}
.logic-icon{display:flex;align-items:center;justify-content:center;gap:3px}.logic-icon i{width:7px;height:var(--lh,45%);background:var(--bronze);animation:telemetry 1.1s ease-in-out infinite alternate}.logic-icon i:nth-child(2){--lh:90%;animation-delay:.2s}.logic-icon i:nth-child(3){--lh:65%;animation-delay:.4s}
.app-icon{border:1px solid rgba(247,245,241,.32);border-radius:7px}.app-icon i:first-child{position:absolute;inset:6px;border:1px solid rgba(176,141,87,.5);border-radius:3px}.app-icon i:last-child{position:absolute;right:14px;bottom:2px;width:8px;height:2px;background:var(--bronze)}
.device-flow-packet{position:absolute;z-index:7;width:7px;height:7px;border-radius:50%;background:var(--bronze);box-shadow:0 0 15px rgba(176,141,87,.85);opacity:0}.scene-embedded.active .device-flow-packet.d1{top:50%;left:12%;animation:device-flow-top 4.4s .7s var(--ease) infinite}.scene-embedded.active .device-flow-packet.d2{top:50%;left:35%;animation:device-flow-bottom 4.4s 2.4s var(--ease) infinite}@keyframes device-flow-top{0%{left:12%;top:50%;opacity:0}12%{opacity:1}50%{left:53%;top:18%}88%{opacity:1}100%{left:88%;top:50%;opacity:0}}@keyframes device-flow-bottom{0%{left:35%;top:50%;opacity:0}12%{opacity:1}50%{left:56%;top:82%}88%{opacity:1}100%{left:88%;top:50%;opacity:0}}
.device-telemetry{position:absolute;z-index:6;right:8%;bottom:6%;left:8%;display:flex;height:28px;align-items:flex-end;gap:5px;border-bottom:1px solid rgba(247,245,241,.1);color:rgba(247,245,241,.38);font:.42rem monospace}.device-telemetry>span{display:flex;align-items:center;align-self:center;gap:6px;margin-right:8px;color:#8fc9ab}.device-telemetry>span i{width:5px;height:5px;border-radius:50%;background:#69ad8c;box-shadow:0 0 8px rgba(105,173,140,.7)}.device-telemetry>b{width:4px;height:var(--th,35%);background:var(--bronze);animation:telemetry 1s var(--td) ease-in-out infinite alternate}.device-telemetry>b:nth-of-type(2){--th:75%;--td:.15s}.device-telemetry>b:nth-of-type(3){--th:50%;--td:.3s}.device-telemetry>b:nth-of-type(4){--th:90%;--td:.45s}.device-telemetry>b:nth-of-type(5){--th:62%;--td:.6s}.device-telemetry em{align-self:center;margin-left:auto;font-style:normal}

@media(max-width:1150px) and (min-width:769px){
  .story-ai-node{width:102px;padding:8px}.story-ai-node span{display:none}.story-ai-node strong{font-size:.61rem}.story-ai-core{width:84px;height:84px}.story-ai-core>i:nth-child(2){inset:-17px}.story-ai-stats span:nth-child(2){display:none}
  .device-node{width:82px;min-height:94px;padding:7px}.device-node>span{display:none}.device-node>strong{font-size:.56rem}.sensor-icon,.chip-icon,.cloud-icon,.logic-icon,.app-icon{width:30px;height:30px}.dn-edge{left:23%}.dn-cloud,.dn-logic{left:49%}.device-telemetry em{display:none}
}

.signal-board::before{position:absolute;inset:0;background-image:linear-gradient(rgba(247,245,241,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.025) 1px,transparent 1px);background-size:30px 30px;content:'';animation:home-grid 18s linear infinite}.signal-board svg{position:relative;z-index:2}.signal-packet{position:absolute;z-index:5;top:50%;left:11.7%;width:8px;height:8px;border-radius:50%;background:var(--bronze);box-shadow:0 0 16px rgba(176,141,87,.9);transform:translate(-50%,-50%);transition:left .55s var(--ease)}.signal-board[data-stage="0"] .signal-packet{left:11.7%}.signal-board[data-stage="1"] .signal-packet{left:28.3%}.signal-board[data-stage="2"] .signal-packet{left:45%}.signal-board[data-stage="3"] .signal-packet{left:61.7%}.signal-board[data-stage="4"] .signal-packet{left:78.3%}.signal-board[data-stage="5"] .signal-packet{left:91.7%}.signal-labels{position:absolute;z-index:4;top:calc(50% + 30px);right:7%;left:7%;display:grid;grid-template-columns:repeat(6,1fr);color:rgba(247,245,241,.28);font:.4rem monospace;text-align:center}.signal-labels span{transition:color .35s}.signal-board[data-stage="0"] .signal-labels span:nth-child(1),.signal-board[data-stage="1"] .signal-labels span:nth-child(2),.signal-board[data-stage="2"] .signal-labels span:nth-child(3),.signal-board[data-stage="3"] .signal-labels span:nth-child(4),.signal-board[data-stage="4"] .signal-labels span:nth-child(5),.signal-board[data-stage="5"] .signal-labels span:nth-child(6){color:#d4b98c}

/* Signal-to-experience system */
.signal-board{display:block;background:linear-gradient(145deg,#0f2137,#0b192a);box-shadow:0 30px 75px rgba(0,0,0,.25)}
.signal-board-top{position:absolute;z-index:8;top:1.35rem;right:1.4rem;left:1.4rem;display:flex;align-items:center;justify-content:space-between;padding-bottom:.85rem;border-bottom:1px solid rgba(247,245,241,.1);color:rgba(247,245,241,.42);font:600 .48rem ui-monospace,monospace;letter-spacing:.1em}
.signal-board-top span:last-child{display:flex;align-items:center;gap:7px;color:#d4b98c}.signal-board-top i{width:6px;height:6px;border-radius:50%;background:#69ad8c;box-shadow:0 0 10px rgba(105,173,140,.75);animation:node-pulse 2s infinite}
.signal-system{position:absolute;z-index:3;top:15%;right:5%;left:5%;height:39%}
.signal-rail{position:absolute;z-index:1;top:50%;right:7.5%;left:7.5%;height:1px;background:rgba(247,245,241,.13)}
.signal-rail::before{position:absolute;top:0;left:0;width:var(--signal-progress,0%);height:1px;background:linear-gradient(90deg,var(--bronze),#d4b98c);box-shadow:0 0 13px rgba(176,141,87,.35);content:'';transition:width .75s var(--ease)}
.signal-board[data-stage="0"]{--signal-progress:0%}.signal-board[data-stage="1"]{--signal-progress:20%}.signal-board[data-stage="2"]{--signal-progress:40%}.signal-board[data-stage="3"]{--signal-progress:60%}.signal-board[data-stage="4"]{--signal-progress:80%}.signal-board[data-stage="5"]{--signal-progress:100%}
.signal-rail .signal-packet{position:absolute;z-index:7;top:0;left:var(--signal-progress);width:9px;height:9px;border:0;border-radius:50%;background:#d4b98c;box-shadow:0 0 0 5px rgba(176,141,87,.1),0 0 18px rgba(176,141,87,.9);transform:translate(-50%,-50%);transition:left .75s var(--ease);animation:signal-packet-pulse 1.8s ease-in-out infinite}
.signal-board[data-stage] .signal-rail .signal-packet{left:var(--signal-progress)}
@keyframes signal-packet-pulse{50%{box-shadow:0 0 0 9px rgba(176,141,87,0),0 0 22px rgba(176,141,87,.95)}}
.signal-nodes{position:absolute;z-index:2;inset:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(5px,1vw,12px);align-items:center}
.sb-node{position:relative;display:flex;min-width:0;min-height:142px;flex-direction:column;align-items:center;justify-content:center;padding:1rem .4rem;border:1px solid rgba(247,245,241,.11);border-radius:12px;background:rgba(12,29,48,.92);box-shadow:0 12px 28px rgba(0,0,0,.16);color:rgba(247,245,241,.52);text-align:center;transition:border-color .45s,background .45s,color .45s,transform .55s var(--ease),box-shadow .45s}
.sb-node>span{position:absolute;top:8px;left:9px;color:rgba(247,245,241,.28);font:600 .4rem ui-monospace,monospace}.sb-node>i{position:relative;display:grid;width:42px;height:42px;margin-bottom:.7rem;border:1px solid rgba(247,245,241,.24);border-radius:50%;place-items:center;transition:border-color .4s,background .4s,transform .55s var(--ease)}.sb-node>i::before{width:7px;height:7px;border-radius:50%;background:currentColor;content:''}.sb-node>i b{position:absolute;inset:5px;border:1px dashed currentColor;border-radius:50%;opacity:.35;animation:ab-spin 9s linear infinite}.sb-node>strong{font-size:clamp(.62rem,.8vw,.76rem);letter-spacing:.03em}.sb-node>small{margin-top:4px;color:rgba(247,245,241,.3);font:500 .36rem ui-monospace,monospace;letter-spacing:.08em}
.signal-board[data-stage="0"] .sb-node[data-node="0"],.signal-board[data-stage="1"] .sb-node[data-node="1"],.signal-board[data-stage="2"] .sb-node[data-node="2"],.signal-board[data-stage="3"] .sb-node[data-node="3"],.signal-board[data-stage="4"] .sb-node[data-node="4"],.signal-board[data-stage="5"] .sb-node[data-node="5"]{border-color:rgba(176,141,87,.8);background:linear-gradient(145deg,rgba(176,141,87,.16),rgba(14,35,58,.96));box-shadow:0 18px 38px rgba(0,0,0,.3),0 0 30px rgba(176,141,87,.08);color:#f3dfbd;transform:translateY(-8px)}
.signal-board[data-stage="0"] .sb-node[data-node="0"]>i,.signal-board[data-stage="1"] .sb-node[data-node="1"]>i,.signal-board[data-stage="2"] .sb-node[data-node="2"]>i,.signal-board[data-stage="3"] .sb-node[data-node="3"]>i,.signal-board[data-stage="4"] .sb-node[data-node="4"]>i,.signal-board[data-stage="5"] .sb-node[data-node="5"]>i{border-color:var(--bronze);background:rgba(176,141,87,.12);transform:scale(1.12)}
.signal-readouts{position:absolute;z-index:5;right:5%;bottom:9%;left:5%;height:27%}
.signal-readouts article{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,31%);gap:1.2rem;align-items:center;padding:clamp(.9rem,2vw,1.35rem);overflow:hidden;border:1px solid rgba(247,245,241,.11);border-radius:12px;background:rgba(7,20,34,.94);box-shadow:0 16px 34px rgba(0,0,0,.2);opacity:0;pointer-events:none;transform:translateY(12px) scale(.985);transition:opacity .4s,transform .55s var(--ease)}
.signal-readouts article>div:first-child span{color:var(--bronze);font:600 .43rem ui-monospace,monospace;letter-spacing:.11em}.signal-readouts article h4{margin:.35rem 0 0;color:var(--stone);font-size:clamp(1rem,1.65vw,1.45rem);line-height:1.08}.signal-readouts article p{margin:.35rem 0 0;color:rgba(247,245,241,.46);font-size:clamp(.56rem,.75vw,.68rem);line-height:1.45}
.signal-board[data-stage="0"] .signal-readouts article[data-readout="0"],.signal-board[data-stage="1"] .signal-readouts article[data-readout="1"],.signal-board[data-stage="2"] .signal-readouts article[data-readout="2"],.signal-board[data-stage="3"] .signal-readouts article[data-readout="3"],.signal-board[data-stage="4"] .signal-readouts article[data-readout="4"],.signal-board[data-stage="5"] .signal-readouts article[data-readout="5"]{opacity:1;pointer-events:auto;transform:none}
.readout-wave,.readout-bars{display:flex;height:58px;align-items:center;justify-content:center;gap:6px}.readout-wave i{width:3px;height:var(--wh,35%);border-radius:3px;background:var(--bronze);animation:signal-wave .8s var(--wd,0s) ease-in-out infinite alternate}.readout-wave i:nth-child(2),.readout-wave i:nth-child(8){--wh:55%;--wd:.1s}.readout-wave i:nth-child(3),.readout-wave i:nth-child(7){--wh:82%;--wd:.2s}.readout-wave i:nth-child(4),.readout-wave i:nth-child(6){--wh:48%;--wd:.3s}.readout-wave i:nth-child(5){--wh:100%;--wd:.4s}@keyframes signal-wave{to{height:18%;opacity:.45}}
.readout-bars i{width:15%;height:var(--bh,35%);border:1px solid rgba(176,141,87,.42);border-radius:3px 3px 0 0;background:rgba(176,141,87,.14);transform-origin:bottom;animation:signal-bars 1.5s var(--bd,0s) ease-in-out infinite alternate}.readout-bars i:nth-child(2){--bh:82%;--bd:.15s}.readout-bars i:nth-child(3){--bh:55%;--bd:.3s}.readout-bars i:nth-child(4){--bh:100%;--bd:.45s}@keyframes signal-bars{to{transform:scaleY(.45)}}
.readout-code{display:grid;gap:7px}.readout-code i{display:block;width:var(--cw,75%);height:4px;border-radius:3px;background:rgba(247,245,241,.15);overflow:hidden}.readout-code i::after{display:block;width:45%;height:100%;background:var(--bronze);content:'';animation:signal-code 1.8s ease-in-out infinite alternate}.readout-code i:nth-child(2){--cw:100%}.readout-code i:nth-child(3){--cw:62%}.readout-code i:nth-child(4){--cw:86%}@keyframes signal-code{to{transform:translateX(120%)}}
.readout-rings{position:relative;width:74px;height:74px;margin:auto;border:1px solid rgba(247,245,241,.13);border-radius:50%}.readout-rings i{position:absolute;inset:10px;border:1px dashed var(--bronze);border-radius:50%;animation:ab-spin 8s linear infinite}.readout-rings i:nth-child(2){inset:22px;border-style:solid;animation-direction:reverse;animation-duration:4s}.readout-rings b{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background:var(--bronze);box-shadow:0 0 15px var(--bronze);transform:translate(-50%,-50%)}
.readout-ui{display:grid;gap:7px;padding:10px;border:1px solid rgba(247,245,241,.14);border-radius:7px}.readout-ui i{height:8px;border-radius:3px;background:rgba(247,245,241,.13)}.readout-ui i:nth-child(1){width:45%;background:var(--bronze)}.readout-ui i:nth-child(2){height:30px}.readout-ui i:nth-child(3){width:68%}
.readout-complete{position:relative;display:grid;width:74px;height:74px;margin:auto;border:1px solid rgba(105,173,140,.42);border-radius:50%;place-items:center;color:#9ed2b9;box-shadow:0 0 25px rgba(105,173,140,.08)}.readout-complete i{position:absolute;width:8px;height:15px;border-right:2px solid #9ed2b9;border-bottom:2px solid #9ed2b9;transform:translateY(-7px) rotate(45deg)}.readout-complete strong{margin-top:30px;font:.42rem ui-monospace,monospace;letter-spacing:.08em}
.signal-board .signal-status{z-index:8;right:1.4rem;bottom:1rem;left:1.4rem;color:rgba(247,245,241,.3);font:600 .43rem ui-monospace,monospace;letter-spacing:.09em}

.build-plane>span{position:absolute;z-index:3;top:14px;left:16px;color:var(--bronze);font:.48rem monospace;letter-spacing:.08em}.build-wire{padding:48px 18px 18px}.build-wire>i{display:block;width:55%;height:7px;margin-bottom:12px;border:1px solid rgba(14,27,46,.16)}.build-wire>i:nth-of-type(2){width:82%;height:70px}.build-wire>i:nth-of-type(3){width:38%}.build-system{padding:50px 20px 20px}.build-system::before{display:none}.build-system>i{display:block;height:6px;margin-bottom:13px;background:rgba(247,245,241,.15)}.build-system>i:nth-of-type(1){width:45%;background:var(--bronze)}.build-system>i:nth-of-type(2){width:78%}.build-system>i:nth-of-type(3){height:62px;border:1px solid rgba(247,245,241,.13);background:transparent}.build-finish::before,.build-finish::after{display:none}.build-finish{padding:52px 25px 22px}.build-finish>i{display:block;height:8px;margin-bottom:13px;border-radius:4px;background:var(--navy)}.build-finish>i:nth-of-type(1){width:56%}.build-finish>i:nth-of-type(2){height:74px;background:linear-gradient(135deg,var(--navy),#3b5773)}.build-flow{position:absolute;z-index:8;top:47%;left:22%;width:8px;height:8px;border-radius:50%;background:var(--bronze);box-shadow:0 0 14px rgba(176,141,87,.8);animation:build-flow 5s var(--ease) infinite}@keyframes build-flow{0%{transform:translate(0,0)}45%{transform:translate(250px,-55px)}100%{transform:translate(120px,115px)}}
.ic-scan{position:absolute;z-index:4;top:0;right:0;left:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,185,140,.75),transparent);box-shadow:0 0 16px rgba(176,141,87,.22);animation:ic-scan 5.4s ease-in-out infinite;pointer-events:none}@keyframes ic-scan{to{top:100%;opacity:0}}
.integration-console.revealed .ic-pillar{animation:ic-pillar-in .55s var(--d) var(--ease) both}.integration-console.revealed .ic-pillar:nth-child(1){--d:.12s}.integration-console.revealed .ic-pillar:nth-child(2){--d:.24s}.integration-console.revealed .ic-pillar:nth-child(3){--d:.36s}.integration-console.revealed .ic-pillar:nth-child(4){--d:.48s}.integration-console.revealed .ic-pillar:nth-child(5){--d:.6s}@keyframes ic-pillar-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media(max-width:768px){
  .m-hud,.hero-scroll-cue,.m-scanline{display:none}.m-ui-top b{display:none}.m-code-head{font-size:.38rem}.m-flow-packet.packet-one{animation-name:hero-packet-a-mobile}.m-flow-packet.packet-two{animation-name:hero-packet-b-mobile}
  @keyframes hero-packet-a-mobile{0%{transform:translate(0,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(95px,24px);opacity:0}}
  @keyframes hero-packet-b-mobile{0%{transform:translate(0,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(78px,-8px);opacity:0}}
  .case-cloud{width:88px;height:88px}.signal-labels{font-size:.34rem}.build-flow{animation-name:build-flow-mobile}
  @keyframes build-flow-mobile{0%{transform:translate(0,0)}45%{transform:translate(150px,-35px)}100%{transform:translate(78px,75px)}}
}
@media(max-width:480px){
  .m-code-head,.m-data-ring.two{display:none}.case-dashboard-top b{font-size:.36rem}.case-cloud{width:76px;height:76px}.case-cloud small{display:none}.signal-labels{display:none}.build-plane>span{font-size:.4rem}
}

@media(max-width:1024px){
  .contact-intro-grid{grid-template-columns:1fr;min-height:auto}.contact-intro-copy{max-width:48rem}.contact-signal-board{min-height:480px}
  .contact-workspace-grid{grid-template-columns:1fr}.contact-details{display:grid;grid-template-columns:1fr 1fr}.contact-response{grid-column:1/-1}.contact-direct{border-right:1px solid rgba(247,245,241,.1);border-bottom:0}
}
@media(max-width:768px){
  .contact-intro{padding-top:72px}.contact-intro-grid{gap:2.5rem;padding-block:3.2rem 4rem}.contact-intro-copy h1{font-size:clamp(3rem,12vw,4.8rem)}.contact-signal-board{min-height:410px}
  .contact-details{display:block}.contact-direct{border-right:0;border-bottom:1px solid rgba(247,245,241,.1)}.contact-workspace-head{margin-bottom:2rem}
  .form-grid{grid-template-columns:1fr}.contact-form-v2{padding:1.3rem}.form-actions{align-items:flex-start;flex-direction:column}.form-note{max-width:50ch}
}
@media(max-width:480px){
  .contact-intro-copy h1{font-size:clamp(2.7rem,13vw,3.55rem)}.contact-signal-board{min-height:360px}.cs-top,.cs-bottom{right:1rem;left:1rem;font-size:.4rem}.cs-bottom span:last-child{display:none}.cs-stage{inset:17% 3%}.cs-node{width:84px;padding:7px}.cs-node small{display:none}.cs-node strong{font-size:.55rem}.cs-core{width:76px;height:76px}.cs-core>i{inset:-8px}.cs-core strong{font-size:.5rem}.cs-core small{font-size:.32rem}
  .contact-workspace-head h2{font-size:clamp(2.3rem,11vw,3rem)}.form-heading,.project-field legend,.message-field label{align-items:flex-start;flex-direction:column;gap:.35rem}.form-actions .button{width:100%}.contact-email{font-size:1rem}
}

/* ------------ 23. RESPONSIVE BREAKPOINTS ------------ */

/* --- 1024px --- */
@media(max-width:1024px) {
  :root { --section: clamp(4.8rem,8vw,7rem); }
  .container { width:min(calc(100% - 2.5rem),var(--container)); }
  h1 { font-size:clamp(3.4rem,8vw,5.5rem); }
  h2 { font-size:clamp(2.3rem,6vw,4rem); }
  .m-hero-grid,.s-hero-grid {
    grid-template-columns:1fr; gap:2.5rem; min-height:auto;
    padding-block:4.8rem;
  }
  .m-hero-visual,.s-hero-visual { width:100%; min-height:clamp(360px,55vw,520px); }
  .m-stage { inset:0 4%; }
  .cap-page-grid,.work-entry,.work-entry:nth-child(even) {
    grid-template-columns:minmax(0,1fr); gap:2.5rem;
  }
  .work-entry:nth-child(even) .work-art { order:0; }
  .work-copy { width:min(100%,44rem); }
  .motion-grid { grid-template-columns:1fr; gap:2.5rem; }
  .motion-grid .motion-composition { order:-1; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
  .signal-layout,.together-grid,.about-band-grid { grid-template-columns:1fr; }
  .signal-visual { position:relative; top:auto; height:auto; min-height:0; aspect-ratio:1.1/1; }
  .signal-copy { padding:2rem 0 0; }
  .signal-step { min-height:auto; padding-block:2.5rem; opacity:1; border-bottom:1px solid rgba(247,245,241,.1); }
  .cap-layout { grid-template-columns:minmax(260px,.78fr) minmax(360px,1.22fr); gap:2rem; }
  .nexus-body { grid-template-columns:repeat(3,1fr); }
  .ic-matrix { grid-template-columns:repeat(3,1fr); }
}

/* --- 768px --- */
@media(max-width:768px) {
  :root { --section:4.5rem; }
  html { scroll-padding-top:72px; }
  body { font-size:1rem; }
  .container { width:calc(100% - 2rem); }
  .menu-toggle { display:block; }
  .nav { min-height:72px; }
  .m-hero,.s-hero { padding-top:72px; }
  .nav-links {
    position:fixed; z-index:2; inset:0; isolation:isolate;
    width:100vw; height:100dvh; right:auto; bottom:auto;
    display:flex; visibility:hidden; flex-direction:column;
    align-items:stretch; justify-content:flex-start;
    gap:0;
    padding:clamp(6.7rem,15vh,8rem) max(1.25rem,calc((100vw - 42rem)/2)) max(4.5rem,env(safe-area-inset-bottom));
    overflow-x:hidden; overflow-y:auto; counter-reset:mobile-nav;
    background:
      radial-gradient(circle at 92% 10%,rgba(176,141,87,.12),transparent 26%),
      linear-gradient(145deg,#0e1b2e 0%,#0a1727 100%);
    color:var(--stone); opacity:0; transform:translateX(100%);
    transition:transform .48s var(--ease),opacity .28s ease,visibility 0s linear .48s;
  }
  .nav-links::before {
    position:absolute; z-index:-1; top:72px; right:1rem; left:1rem; height:1px;
    background:linear-gradient(90deg,var(--bronze) 0 24%,rgba(247,245,241,.12) 24%); content:'';
    transform:scaleX(0); transform-origin:left; transition:transform .65s .18s var(--ease);
  }
  .nav-links::after {
    position:absolute; right:1.25rem; bottom:max(1.3rem,env(safe-area-inset-bottom)); left:1.25rem;
    padding-top:.8rem; border-top:1px solid rgba(247,245,241,.1);
    color:rgba(247,245,241,.32); content:'TALBERN / BUILDING WHAT COMES NEXT';
    font:600 .46rem ui-monospace,monospace; letter-spacing:.11em;
  }
  .nav-links.open { visibility:visible; opacity:1; transform:none; transition-delay:0s; }
  .nav-links.open::before { transform:scaleX(1); }
  .nav-links li { width:100%; opacity:0; transform:translateX(24px); transition:opacity .32s ease,transform .48s var(--ease); }
  .nav-links li:not(:last-child) { counter-increment:mobile-nav; border-bottom:1px solid rgba(247,245,241,.1); }
  .nav-links.open li { opacity:1; transform:none; }
  .nav-links.open li:nth-child(1){transition-delay:.12s}.nav-links.open li:nth-child(2){transition-delay:.17s}.nav-links.open li:nth-child(3){transition-delay:.22s}.nav-links.open li:nth-child(4){transition-delay:.27s}.nav-links.open li:nth-child(5){transition-delay:.33s}
  .nav-links a:not(.button) {
    display:grid; width:100%; min-height:clamp(60px,9.5vh,76px); grid-template-columns:2.25rem 1fr;
    align-items:center; padding:.35rem .2rem; font-size:clamp(1.65rem,6.5vw,2.25rem);
    font-weight:540; letter-spacing:-.035em; transition:color .22s,background .22s,padding .25s var(--ease);
  }
  .nav-links a:not(.button)::before { color:var(--bronze); content:'0' counter(mobile-nav); font:600 .48rem ui-monospace,monospace; letter-spacing:.08em; }
  .nav-links a:not(.button)::after { display:none; }
  .nav-links a:not(.button):hover,.nav-links a:not(.button):focus-visible { padding-left:.65rem; background:rgba(247,245,241,.035); color:#fff; }
  .nav-links a:not(.button):active { background:rgba(176,141,87,.1); color:#d4b98c; }
  .nav-links li:last-child { margin-top:clamp(1.3rem,4vh,2rem); }
  .nav-links .button {
    width:100%; min-height:60px; justify-content:space-between; margin:0; padding:.85rem 1.25rem;
    border-color:var(--stone); background:var(--stone); color:var(--navy);
    font-size:1rem; font-weight:720; box-shadow:0 16px 35px rgba(0,0,0,.22);
  }
  .nav-links .button:hover,.nav-links .button:focus-visible { border-color:#d9c39e; background:#d9c39e; transform:translateY(-2px); }
  .nav-links .button:active { transform:scale(.985); }
  body.menu-open .site-header { border-bottom-color:rgba(247,245,241,.11); background:transparent; box-shadow:none; backdrop-filter:none; }
  body.menu-open .wordmark { color:var(--stone); }
  .menu-toggle { transition:color .22s,border-color .22s,background .22s,transform .25s var(--ease); }
  .menu-toggle:active { transform:scale(.94); }
  .menu-toggle[aria-expanded="true"] { color:var(--stone); border-color:rgba(247,245,241,.22); background:rgba(247,245,241,.035); }
  .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3px) rotate(-45deg); }
  @media(max-height:600px) {
    .nav-links { padding-top:5.3rem; padding-bottom:3.4rem; }
    .nav-links a:not(.button) { min-height:48px; font-size:1.35rem; }
    .nav-links li:last-child { margin-top:.8rem; }
    .nav-links .button { min-height:50px; }
    .nav-links::after { display:none; }
  }
  .section-head { margin-bottom:2.25rem; }
  .section-head > .lede { margin-top:.85rem; }
  .button-row { display:grid; grid-template-columns:1fr; gap:.6rem; }
  .button-row .button { width:100%; }
  .m-hero-grid,.s-hero-grid { padding-block:3rem 3.8rem; gap:2rem; }
  .m-hero-visual { min-height:310px; }
  .m-stage { inset:0; }
  .m-ui { top:2%; left:0; width:68%; height:48%; }
  .m-code { top:16%; right:0; width:46%; height:34%; padding:11px; font-size:.47rem; }
  .m-data { right:3%; bottom:7%; width:44%; height:38%; }
  .m-device { bottom:1%; left:0; width:41%; height:29%; }
  .m-frame,.hero-index { display:none; }
  .m-path { max-width:44%; }
  .showcase-head { display:block; }
  .showcase-head .lede { margin-top:.9rem; }
  .case-panel,.case-panel:nth-child(even) { grid-template-columns:1fr; gap:1.4rem; }
  .case-panel:nth-child(even) .case-visual { order:0; }
  .case-info h3 { font-size:clamp(1.8rem,8.5vw,2.6rem); }
  .cap-layout { display:block; }
  .cap-scroll { padding:0; }
  .cap-intro { margin-bottom:1.5rem; }
  .cap-item { min-height:auto; padding-block:2.75rem; opacity:1; }
  .cap-item::after {
    display:block; height:140px; margin-top:1.4rem; border-radius:11px;
    background:var(--navy); content:'';
  }
  .cap-item:nth-child(2)::after { background:linear-gradient(120deg,var(--navy) 50%,#253c55); }
  .cap-item:nth-child(3)::after { background:radial-gradient(circle at 16% 50%,var(--bronze) 0 5px,transparent 6px),radial-gradient(circle at 39% 50%,#19314d 0 16px,var(--bronze) 17px 18px,transparent 19px),radial-gradient(circle at 63% 50%,#19314d 0 16px,var(--bronze) 17px 18px,transparent 19px),radial-gradient(circle at 86% 50%,var(--bronze) 0 5px,transparent 6px),linear-gradient(90deg,transparent 14%,rgba(176,141,87,.65) 14% 86%,transparent 86%) center/100% 1px no-repeat,linear-gradient(rgba(247,245,241,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.035) 1px,transparent 1px),var(--navy);background-size:auto,auto,auto,auto,100% 1px,24px 24px,24px 24px,auto; }
  .cap-item:nth-child(4)::after { background:radial-gradient(circle at 15% 50%,var(--bronze) 0 6px,transparent 7px),radial-gradient(circle at 42% 50%,#19314d 0 18px,var(--bronze) 19px 20px,transparent 21px),radial-gradient(circle at 78% 28%,var(--bronze) 0 6px,transparent 7px),radial-gradient(circle at 78% 72%,var(--bronze) 0 6px,transparent 7px),linear-gradient(25deg,transparent 49.5%,rgba(176,141,87,.55) 50%,transparent 50.5%),linear-gradient(-25deg,transparent 49.5%,rgba(176,141,87,.55) 50%,transparent 50.5%),linear-gradient(rgba(247,245,241,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,241,.035) 1px,transparent 1px),var(--navy);background-size:auto,auto,auto,auto,46% 100%,46% 100%,24px 24px,24px 24px,auto;background-position:center,center,center,center,42% center,42% center,center,center,center;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat,no-repeat; }
  .cap-item:nth-child(5)::after { background:linear-gradient(90deg,#1e354d 0 47%,var(--stone) 47% 53%,#1e354d 53%); }
  .cap-item:nth-child(6)::after { background:linear-gradient(135deg,var(--navy) 0 38%,var(--bronze) 38% 42%,var(--charcoal) 42%); }
  .cap-visual-wrap { display:none; }
  .process-line { display:block; }
  .process-line::before,.process-line::after { top:0; bottom:0; left:14px; width:1px; height:auto; }
  .process-line.revealed { --process:100%; }
  .process-step { display:grid; grid-template-columns:42px minmax(0,1fr); text-align:left; padding:0 0 2.2rem; }
  .process-dot { grid-row:1/3; margin:0; }
  .process-step h3,.process-step p { margin-bottom:.3rem; }
  .build-visual { min-height:310px; }
  .s-hero-visual { min-height:290px; }
  .capabilities-matrix { min-height:380px; padding:1rem; }
  .cm-scan { display:none; }
  .cap-page-section { min-height:auto; padding-block:4.5rem; }
  .cap-page-grid { gap:1.8rem; }
  .service-lines { grid-template-columns:1fr; }
  .cap-art { min-height:0; aspect-ratio:1.12/1; border-radius:13px; }
  .software-art .app-shell { inset:13% 4% 8%; }
  .app-workspace { padding:10px; }
  .app-metrics { margin-top:9px; gap:5px; }
  .app-metrics > div { padding:7px; }
  .software-art .app-blocks { min-height:105px; margin-top:6px; gap:6px; }
  .app-terminal { gap:6px; padding:7px; }
  .app-terminal code { font-size:.38rem; }
  .intelligence-art .flow { inset:18% 7%; grid-template-columns:1fr 1fr; gap:10px; }
  .flow-node { font-size:.46rem; }
  .flow-node:not(:last-child)::after,.flow-packet { display:none; }
  .ai-core { width:100px; height:100px; }
  .ai-core span { width:54px; height:54px; font-size:.42rem; }
  .ai-readout { right:5%; bottom:5%; left:5%; font-size:.4rem; }
  .embedded-art svg { inset:7% 3%; width:94%; height:86%; }
  .embedded-status { top:15px; right:16px; gap:10px; font-size:.4rem; }
  .design-art .design-flow { inset:14% 4% 23%; gap:5px; }
  .design-step { height:86%; }
  .design-step.structure { padding:34px 8px 8px; }
  .design-step.structure .ds-main { height:55px; }
  .design-step.finish { padding:36px 8px 8px; }
  .design-step.finish .ds-main { height:58px; margin-block:6px; padding:7px; }
  .design-step.finish .ds-footer i { height:19px; }
  .media-art { padding:4%; }
  .local-nav { top:72px; }
  .local-nav-inner { gap:1.4rem; min-height:50px; }
  .local-nav a { min-height:46px; padding-block:13px; }
  .work-list { gap:4.5rem; }
  .work-art { aspect-ratio:4/3; border-radius:11px; }
  .work-copy h2 { font-size:clamp(2rem,9vw,2.9rem); }
  .work-architecture { grid-template-columns:1fr; }
  .architecture-node { min-height:52px; }
  .architecture-node:not(:last-child)::after { top:100%; left:50%; width:1px; height:9px; }
  .work-detail-panel { grid-column:auto; }
  .work-art.motion-study .motion-composition { inset:4%; }
  .story-year { grid-template-columns:1fr; gap:2.25rem; }
  .year-mark { position:relative; top:auto; font-size:clamp(5rem,22vw,7.5rem); }
  .physical-map { display:block; margin-top:1.8rem; }
  .physical-map::before { top:7%; bottom:7%; left:18px; width:1px; height:auto; }
  .map-unit,.map-unit.core { min-height:140px; margin:0 0 .9rem; padding:1.25rem 1.25rem 1.25rem 3rem; }
  .map-dot { display:none; }
  .facts { grid-template-columns:1fr 1fr; }
  .fact:nth-child(2) { border-right:0; }
  .contact-layout { grid-template-columns:1fr; gap:2.25rem; }
  .contact-aside { position:relative; top:auto; }
  .form-grid { grid-template-columns:1fr; }
  .contact-form { padding:1.2rem; border-radius:12px; }
  .contact-hero { min-height:auto; }
  .reel { display:none; }
  .site-footer { padding-block:3rem 1.4rem; }
  .footer-signal { margin-bottom:1.8rem; }
  .footer-grid { grid-template-columns:1fr; gap:1.8rem; padding-bottom:2.3rem; }
  .footer-bottom-bar { display:grid; gap:.5rem; }
  .motion-composition .mc-title { font-size:clamp(1.9rem,11vw,4rem); }
  .motion-composition .mc-title.secondary { font-size:clamp(1.5rem,8.5vw,3.2rem); }
  .motion-composition.compact { inset:11% 4% 5%; }
  .nexus-body { grid-template-columns:repeat(2,1fr); }
  .cm-row { grid-template-columns:28px 1fr auto; gap:8px; }
  .cm-tech { display:none; }
  .ic-matrix { grid-template-columns:repeat(2,1fr); }
  .principles-grid { grid-template-columns:1fr; }
}

/* --- 480px --- */
@media(max-width:480px) {
  :root { --section:4rem; }
  .container { width:calc(100% - 1.5rem); }
  h1 { font-size:clamp(2.75rem,13.5vw,3.6rem); line-height:1.02; }
  h2 { font-size:clamp(2rem,10.5vw,2.75rem); }
  .m-hero-grid,.s-hero-grid { padding-block:2.6rem 3.2rem; }
  .m-hero-visual { min-height:268px; }
  .m-code { display:none; }
  .m-ui { width:74%; height:52%; }
  .m-data { width:50%; height:44%; }
  .m-device { width:45%; }
  .s-hero-visual { min-height:250px; }
  .capabilities-matrix { min-height:345px; border-radius:14px; }
  .cm-top,.cm-bottom { font-size:.48rem; letter-spacing:.07em; }
  .cm-top > span:first-child,.cm-bottom > span:first-child { max-width:22ch; }
  .cm-row { padding:10px 11px; }
  .cap-art { aspect-ratio:1/1; }
  .app-chrome b { display:none; }
  .app-nav { gap:13px; }
  .app-metrics > div:nth-child(3) { display:none; }
  .app-metrics { grid-template-columns:1fr 1fr; }
  .software-art .app-blocks { grid-template-columns:1fr; min-height:96px; }
  .app-terminal { display:none; }
  .flow-node small { display:none; }
  .ai-readout span:nth-child(2) { display:none; }
  .embedded-status span:last-child,.telemetry-strip span { display:none; }
  .design-step>span { left:6px; font-size:.34rem; }
  .design-step.wire { padding-inline:7px; }
  .design-step.wire>i:nth-of-type(4),.design-step.finish .ds-footer { display:none; }
  .design-step.finish .ds-main strong { font-size:.5rem; }
  .design-step.finish .ds-button { font-size:.34rem; }
  .embedded-art text { display:none; }
  .work-art { aspect-ratio:1.05/1; }
  .mc-meta { font-size:.42rem; letter-spacing:.06em; }
  .mc-crop { width:13px; height:13px; }
  .facts { grid-template-columns:1fr; }
  .fact { border-right:0; border-bottom:1px solid var(--line); }
  .brand-symbol { width:26px; height:26px; }
  .nexus-body { grid-template-columns:1fr; }
  .ic-matrix { grid-template-columns:1fr; }
  .cm-row { grid-template-columns:24px 1fr; }
  .cm-link { display:none; }
}

/* Signal system: compact 3 x 2 mobile composition */
@media(max-width:768px) {
  .signal-visual{min-height:560px;aspect-ratio:auto}
  .signal-board-top{top:1rem;right:1rem;left:1rem;font-size:.4rem;letter-spacing:.06em}
  .signal-system{top:13%;right:4%;left:4%;height:48%}
  .signal-rail{display:none}
  .signal-nodes{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px}
  .sb-node{min-height:0;height:100%;padding:.85rem .2rem;border-radius:9px}
  .sb-node>span{top:6px;left:7px;font-size:.34rem}
  .sb-node>i{width:32px;height:32px;margin-bottom:.45rem}.sb-node>i b{inset:4px}
  .sb-node>strong{font-size:.58rem}.sb-node>small{font-size:.3rem}
  .signal-board[data-stage="0"] .sb-node[data-node="0"],.signal-board[data-stage="1"] .sb-node[data-node="1"],.signal-board[data-stage="2"] .sb-node[data-node="2"],.signal-board[data-stage="3"] .sb-node[data-node="3"],.signal-board[data-stage="4"] .sb-node[data-node="4"],.signal-board[data-stage="5"] .sb-node[data-node="5"]{transform:translateY(-3px)}
  .signal-readouts{right:4%;bottom:8%;left:4%;height:25%}
  .signal-readouts article{grid-template-columns:minmax(0,1fr) 90px;gap:.7rem;padding:.85rem}
  .signal-readouts article h4{font-size:1rem}.signal-readouts article p{font-size:.56rem}
  .readout-rings,.readout-complete{width:58px;height:58px}.readout-rings i:nth-child(2){inset:17px}
  .signal-board .signal-status{right:1rem;bottom:.7rem;left:1rem;font-size:.36rem}
}
@media(max-width:480px) {
  .signal-visual{min-height:520px}
  .signal-board-top span:first-child{max-width:20ch}
  .signal-system{top:15%;height:44%}
  .sb-node>small{display:none}
  .signal-readouts{bottom:9%;height:26%}
  .signal-readouts article{grid-template-columns:1fr;padding:.8rem}
  .signal-readouts article>div:last-child{display:none}
  .signal-readouts article p{max-width:34ch}
}

/* --- 360px --- */
@media(max-width:360px) {
  h1 { font-size:clamp(2.4rem,13vw,3rem); }
  .container { width:calc(100% - 1rem); }
  .m-hero-visual { min-height:240px; }
  .s-hero-visual { min-height:210px; }
  .signal-visual{min-height:490px}
}

/* --- Wide 1600px --- */
@media(min-width:1600px) {
  :root { --container:1320px; }
  .m-hero-grid { grid-template-columns:.88fr 1.12fr; }
  .m-hero-visual { min-height:560px; }
}

/* Touch devices - disable hover-only transforms */
@media(hover:none) {
  .button:hover { transform:none; }
  .cap-module:hover { transform:none; box-shadow:none; }
  .case-one:hover .case-core,
  .case-two:hover .case-device,
  .work-art.ai:hover .inner-window,
  .work-art.device:hover::after { transform:none; }
  .ic-pillar:hover, .nexus-node:hover, .cm-row:hover, .principle-card:hover { transform:none; }
}

/* ------------ 24. REDUCED MOTION ------------ */
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
  [data-reveal] { opacity:1; transform:none; }
  [data-reveal="text"] { clip-path:none; }
  .hero-copy > *, .s-hero-copy > * { opacity:1; transform:none; animation:none !important; }
  .m-stage, .s-hero-visual { opacity:1; transform:none; animation:none !important; }
  .cap-item,.signal-step { opacity:1; }
  .cap-scene { transition:none; }
  .m-panel { opacity:1; }
  .case-visual { clip-path:none; }
  .work-art { clip-path:none; }
  .page-transition { display:none; }
  .motion-composition .mc-title,.motion-composition .mc-plane,
  .motion-composition .mc-path path,.motion-composition .mc-path circle { animation:none !important; }
  .motion-composition .mc-title.primary { opacity:1; clip-path:none; transform:translateY(-50%); }
  .motion-composition .mc-plane.one,.motion-composition .mc-plane.two { opacity:1; transform:none; }
  .motion-composition .mc-plane.three { opacity:1; transform:scaleY(1); }
  .motion-composition .mc-path path { stroke-dashoffset:0; }
  .motion-composition .mc-path circle { opacity:1; }
  .motion-composition .mc-playhead { animation:none !important; transform:translateX(55%); }
  .work-detail-panel { transition:none; }
  .montage-card { opacity:1; }
}