/* Dev Cavalry
   Layout: full-bleed WebGL heroes, editorial sections on a 82.5rem grid, one cream section per page for rhythm.
   Palette strictly from the brand doc; logo blue only lives inside the logo. */
:root {
  --ink: #252422;
  --char: #403d39;
  --sand: #ccc5b9;
  --cream: #fffcf2;
  --orange: #eb5e28;
  --line: rgba(204, 197, 185, 0.16);
  --line-strong: rgba(204, 197, 185, 0.32);
  --muted: #ccc5b9;
  --faint: rgba(204, 197, 185, 0.62);
  --logo-blue: #006dc4;
  --display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --radius: 1.125rem;
  color-scheme: dark;
}
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.3s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.45s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--display); font-size: 1.0625rem; line-height: 1.6; font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 0.125rem solid var(--orange); outline-offset: 0.1875rem; border-radius: 0.25rem; }
[hidden] { display: none !important; }
.wrap { max-width: 82.5rem; margin: 0 auto; padding-inline: 1.75rem; }
@media (max-width: 600px) { .wrap { padding-inline: 1.125rem; } }
.mono { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.dot { color: var(--orange); }
.sr-only { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Nav */
.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background 250ms var(--ease), transform 350ms var(--ease), border-color 250ms var(--ease); border-bottom: 0.0625rem solid transparent; }
.site-nav.scrolled { background: rgba(37, 36, 34, 0.82); backdrop-filter: blur(0.875rem); -webkit-backdrop-filter: blur(0.875rem); border-bottom-color: var(--line); }
.site-nav.hide { transform: translateY(-100%); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 4.75rem; }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }
.brand svg { width: 2.75rem; height: auto; }
.brand .cav { color: var(--logo-blue); }
.nav-links { display: flex; gap: 0.375rem; }
.nav-links a { padding: 0.5rem 0.875rem; border-radius: 6.25rem; font-size: 0.875rem; font-weight: 400; color: var(--muted); transition: color 150ms var(--ease), background 150ms var(--ease); }
.nav-links a:hover { color: var(--cream); background: rgba(255, 252, 242, 0.06); }
.nav-links a[aria-current="page"] { color: var(--cream); background: rgba(235, 94, 40, 0.14); }
.nav-toggle { display: none; background: none; border: 0.0625rem solid var(--line-strong); border-radius: 6.25rem; width: 2.875rem; height: 2.875rem; place-items: center; }
.nav-toggle span { display: block; width: 1.125rem; height: 0.0938rem; background: var(--cream); position: relative; transition: transform 200ms var(--ease); }
.nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; width: 1.125rem; height: 0.0938rem; background: var(--cream); transition: transform 200ms var(--ease); }
.nav-toggle span::before { top: -0.375rem; } .nav-toggle span::after { top: 0.375rem; }
.site-nav.open .nav-toggle span { background: transparent; }
.site-nav.open .nav-toggle span::before { transform: translateY(0.375rem) rotate(45deg); }
.site-nav.open .nav-toggle span::after { transform: translateY(-0.375rem) rotate(-45deg); }
@media (max-width: 1040px) {
  .nav-toggle { display: grid; }
  .nav-links { position: fixed; inset: 4.75rem 0 0 0; flex-direction: column; gap: 0.25rem; padding: 1.75rem; background: var(--ink); transform: translateY(-110%); transition: transform 350ms var(--ease); }
  .site-nav.open .nav-links { transform: none; }
  .nav-links a { font-size: 1.75rem; font-weight: 600; padding: 0.75rem 0.5rem; color: var(--cream); border-radius: 0.5rem; }
  .nav-cta { display: none; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.9375rem 1.625rem; border-radius: 6.25rem; font-weight: 600; font-size: 0.9375rem; border: 0.0938rem solid transparent; transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease); white-space: nowrap; }
.btn svg { width: 1rem; height: 1rem; transition: transform 150ms var(--ease); }
.btn:hover svg { transform: translateX(0.1875rem); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--orange); color: var(--cream); }
.btn-primary:hover { background: #f06e3c; }
.btn-ghost { border-color: var(--line-strong); color: var(--cream); }
.btn-ghost:hover { border-color: var(--cream); }
.btn-sm { padding: 0.625rem 1.125rem; font-size: 0.875rem; }
.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: var(--char); }

/* Type */
.kicker { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); }
.kicker::before { content: ''; width: 1.625rem; height: 0.125rem; background: var(--orange); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
.h1 { font-size: clamp(2.875rem, 7.4vw, 7.75rem); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; }
.h1 .ln { display: block; overflow: hidden; padding-bottom: 0.08em; }
.h1 .ln > span { display: inline-block; }
.h2 { font-size: clamp(2.125rem, 5vw, 4.75rem); margin-top: 1.125rem; }
.h3 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); letter-spacing: -0.02em; }
.lede { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--muted); max-width: 35rem; margin: 1.375rem 0 0; }
.sec { padding-block: clamp(5.625rem, 12vw, 10rem); position: relative; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sec-head .lede { margin: 0; }

/* Cream zone */
.light { background: var(--cream); color: var(--ink); --line: rgba(64, 61, 57, 0.16); --line-strong: rgba(64, 61, 57, 0.35); --muted: #403d39; --faint: rgba(64, 61, 57, 0.72); color-scheme: light; }
.light .kicker { color: var(--ink); }
.light .btn-ghost { color: var(--ink); }
.light .btn-ghost:hover { border-color: var(--ink); }

/* Heroes (full-bleed canvas) */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero-canvas, .fill-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-copy { position: relative; z-index: 2; padding-block: 8.125rem 5.625rem; width: 100%; pointer-events: none; }
.hero-copy > .wrap > * { pointer-events: auto; }
.hero-copy .h1 { max-width: 11ch; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2.25rem; }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 1.625rem; z-index: 2; pointer-events: none; }
.hero-foot .wrap { display: flex; justify-content: space-between; align-items: center; color: var(--faint); }
.scroll-cue { display: inline-flex; align-items: center; gap: 0.625rem; }
.scroll-cue i { width: 0.0625rem; height: 2.25rem; background: linear-gradient(var(--orange), transparent); animation: cue 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.page-hero { min-height: 88svh; }
.no-webgl { display: none !important; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 0.0625rem solid var(--line); }
.stat { padding: 2.125rem 1.625rem 0 0; }
.stat + .stat { padding-left: 1.625rem; border-left: 0.0625rem solid var(--line); }
.stat b { display: block; font-size: clamp(2.75rem, 6vw, 5.75rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat b sup { font-size: 0.45em; color: var(--orange); vertical-align: top; margin-left: 0.125rem; }
.stat > span { display: block; margin-top: 0.625rem; color: var(--muted); font-size: 0.9375rem; }

/* Home stats: large tiles with an orange sweep on hover/focus */
.stats-xl .stat { position: relative; padding: 2.25rem 1.625rem 2rem; overflow: hidden; isolation: isolate; cursor: default; transition: color 300ms var(--ease); }
.stats-xl .stat + .stat { padding-left: 1.625rem; }
.stats-xl .stat::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--orange); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 450ms var(--ease); }
.stats-xl .stat:hover::before, .stats-xl .stat:focus-visible::before { transform: scaleY(1); }
.stats-xl .stat:focus-visible { outline-offset: -0.1875rem; outline-color: var(--cream); }
.stats-xl .stat b { font-size: clamp(4rem, 9vw, 9.375rem); transition: transform 300ms var(--ease); }
.stats-xl .stat:hover b, .stats-xl .stat:focus-visible b { transform: translateY(-0.375rem); }
.stats-xl .stat:hover sup, .stats-xl .stat:focus-visible sup { color: var(--cream); }
.stats-xl .lbl { display: block; margin-top: 0.75rem; font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 400; color: var(--cream); }
.stats-xl .stat em { display: block; font-style: normal; font-size: 0.9375rem; line-height: 1.45; color: var(--cream); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 350ms var(--ease), opacity 300ms var(--ease), margin 300ms var(--ease); }
.stats-xl .stat:hover em, .stats-xl .stat:focus-visible em { max-height: 4.375rem; opacity: 0.92; margin-top: 0.5rem; }
@media (max-width: 820px) { .stats-xl .stat:nth-child(3) { padding-left: 1.625rem; } }
@media (max-width: 820px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { padding-left: 0; border-left: 0; } .stat:nth-child(n+3) { border-top: 0.0625rem solid var(--line); margin-top: 1.625rem; } }

/* Split: text + canvas */
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split.rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.split.rev > :first-child { order: 2; }
.stage { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 42.5rem; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage.wide { aspect-ratio: 16 / 11; }
@media (max-width: 900px) { .split, .split.rev { grid-template-columns: 1fr; } .split.rev > :first-child { order: 0; } .stage { max-height: 28.75rem; } }

/* Service list (home ring) */
.svc-list { list-style: none; margin: 2.25rem 0 0; padding: 0; border-top: 0.0625rem solid var(--line); }
.svc-list li { border-bottom: 0.0625rem solid var(--line); }
.svc-list a { display: grid; grid-template-columns: 1fr auto; gap: 0.375rem 1.25rem; padding: 1.375rem 0.25rem; transition: padding 200ms var(--ease); }
.svc-list h3 { font-size: clamp(1.375rem, 2.4vw, 2.125rem); color: var(--faint); transition: color 200ms var(--ease); }
.svc-list p { grid-column: 1 / -1; margin: 0; max-height: 0; overflow: hidden; color: var(--muted); font-size: 0.9375rem; transition: max-height 300ms var(--ease), opacity 300ms var(--ease); opacity: 0; }
.svc-list .mono { color: var(--faint); align-self: center; }
.svc-list li.on h3 { color: var(--cream); }
.svc-list li.on p { max-height: 5.625rem; opacity: 1; }
.svc-list li.on a { padding-left: 0.875rem; }
.svc-list li.on .mono { color: var(--orange); }

/* Any regular section that pins: fill the screen, centre the content, keep the 3D stage inside it */
.sec[data-pin] { min-height: 100svh; display: flex; align-items: center; padding-block: 6rem 2.5rem; overflow: hidden; }
.sec[data-pin] > .wrap { width: 100%; }
.sec[data-pin] .stage { max-height: calc(100svh - 11.25rem); }
@media (max-width: 900px) { .sec[data-pin] { align-items: flex-start; padding-block: 5.25rem 1.5rem; } .sec[data-pin] .stage { max-height: 38svh; order: -1; } }
@media (max-height: 760px) { .sec[data-pin] .h2 { font-size: clamp(1.875rem, 4vw, 3.375rem); } .sec[data-pin] .values li { padding: 0.875rem 1.125rem; } .sec[data-pin] .grid-2 { margin-top: 1.25rem !important; } }

/* Services, pinned on Home */
.svc-pin .h2 { font-size: clamp(1.875rem, 3.4vw, 3.25rem); }
.svc-pin .svc-list { margin-top: 1.5rem; }
.svc-pin .svc-list a { padding: 0.875rem 0.25rem; }
.svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.375rem; }
.svc-foot .ticks { margin: 0; flex: 1; }
.svc-pin .stage { max-height: min(37.5rem, calc(100svh - 10.625rem)); }
@media (max-width: 900px) { .svc-pin .stage { max-height: 34svh; order: -1; } .svc-pin { padding-block: 5rem 1.5rem; } .svc-pin .svc-list a { padding: 0.625rem 0.125rem; } }

/* Work arc, pinned on Home */
.work-pin { position: relative; height: 100svh; min-height: 37.5rem; display: flex; flex-direction: column; padding-top: 6.25rem; overflow: hidden; }
.work-pin .sec-head { margin-bottom: 0; }
.work-pin .arc { flex: 1; height: auto; min-height: 0; }
.arc-meta { display: flex; gap: 0.875rem; align-items: center; justify-content: center; margin-top: 0.625rem; }
.arc-meta .reel-bar { width: 10rem; }
@media (max-height: 700px) { .work-pin { padding-top: 5.25rem; } .work-pin .h2 { font-size: clamp(1.75rem, 4vw, 2.875rem); } }
@media (max-width: 700px) { .work-pin .sec-head .btn { display: none; } }

/* Technology cards with animated illustrations */
.tcard { position: relative; display: flex; flex-direction: column; overflow: hidden; color: inherit; }
.tcard::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(15rem circle at var(--mx, 50%) var(--my, 0%), rgba(235, 94, 40, 0.22), transparent 65%); opacity: 0; transition: opacity 250ms var(--ease); }
.tcard.on::before { opacity: 1; }
.tcard.on { border-color: var(--orange); }
.tcard .mono { margin-top: 0.25rem; }
.tcard h3 { margin: 0.5rem 0 0.5rem; }
.explore { margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.875rem; color: var(--orange); opacity: 0; transform: translateX(-0.5rem); transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.explore svg { width: 1rem; height: 1rem; }
.tcard.on .explore, .tcard:focus-visible .explore { opacity: 1; transform: none; }
.ill { width: 100%; height: auto; margin-bottom: 16px; overflow: visible; }
.ill .b > rect:first-child, .ill .term, .ill .cardx > rect:first-child, .ill .face { fill: var(--cream); stroke: var(--ink); stroke-width: 2; }
.ill .f { fill: var(--orange); }
.ill .g { fill: var(--sand); }
.ill .scr, .ill .slot, .ill .pin { fill: var(--ink); }
.ill .cnt { fill: var(--cream); font: 700 15px var(--display); }
.ill-chain .b { transition: transform 600ms var(--ease); }
.ill-chain .b1 { transform: translateX(-12px); }
.ill-chain .b3 { transform: translateX(12px); }
.ill-chain .lk { stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset 500ms var(--ease) 250ms; }
.on .ill-chain .b1, .on .ill-chain .b3 { transform: none; }
.on .ill-chain .lk { stroke-dashoffset: 0; }
.ill-pay .cardx { transition: transform 900ms var(--ease); }
.on .ill-pay .cardx { transform: translateX(64px); }
.ill-ai .ln line { stroke: var(--sand); stroke-width: 1.5; }
.ill-ai .nd circle { fill: var(--cream); stroke: var(--ink); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.on .ill-ai .nd circle { animation: nd-pulse 1.2s var(--ease) infinite; }
.on .ill-ai .nd circle:nth-child(2n) { animation-delay: 0.3s; }
.on .ill-ai .nd circle:nth-child(3n) { animation-delay: 0.6s; }
.ill-ai .sig { fill: var(--orange); opacity: 0; }
.on .ill-ai .sig { animation: sig 1.2s linear infinite; animation-delay: var(--d); }
@keyframes nd-pulse { 50% { transform: scale(1.3); fill: var(--orange); } }
@keyframes sig { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
.ill-clock .arc2 { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s var(--ease); }
.on .ill-clock .arc2 { stroke-dashoffset: 0; }
.ill-clock .tick { stroke: var(--ink); stroke-width: 2; }
.ill-clock .hand { stroke: var(--orange); stroke-width: 3; stroke-linecap: round; transform-origin: 100px 55px; transition: transform 1.2s var(--ease); }
.on .ill-clock .hand { transform: rotate(360deg); }

/* Closing call to action with 3D knight */
.cta-split .split { align-items: center; }
.cta-split .h2 { font-size: clamp(2.75rem, 7vw, 7rem); max-width: 10ch; }
.cta-split .stage { max-height: 36.25rem; }
.btn-glow { transition: box-shadow 300ms var(--ease), background 150ms var(--ease); }
.btn-glow:hover { box-shadow: 0 0 0 0.625rem rgba(235, 94, 40, 0.14), 0 0.875rem 2.75rem rgba(235, 94, 40, 0.45); }
@media (max-width: 900px) { .cta-split .stage { order: -1; max-height: 23.75rem; } }

/* Reel (scroll-scrubbed video) */
.reel { --pv: 14.375rem; position: relative; height: 100svh; min-height: 35rem; overflow: hidden; background: #1c1b19; }
.reel-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 6rem 1.75rem 7.5rem; }
.reel video { width: min(100%, calc((100svh - var(--pv)) * 16 / 9)); aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); border: 0.0625rem solid var(--line-strong); box-shadow: 0 2.5rem 7.5rem rgba(0, 0, 0, 0.55), 0 0 0 0.0625rem rgba(235, 94, 40, 0.08); background: #1c1b19; }
.reel-ui { position: absolute; left: 0; right: 0; bottom: 1.875rem; z-index: 2; }
.reel-ui .wrap { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.5rem; }
.caps { position: relative; min-height: 4rem; }
.cap { position: absolute; left: 0; bottom: 0; font-size: clamp(1.5rem, 3vw, 2.75rem); font-weight: 600; letter-spacing: -0.03em; opacity: 0; transform: translateY(0.75rem); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.cap.on { opacity: 1; transform: none; }
.reel-meta { display: grid; gap: 0.625rem; justify-items: end; color: var(--faint); }
.reel-bar { width: 13.75rem; height: 0.125rem; background: var(--line); }
.reel-bar i { display: block; height: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); }
.reel-head { position: absolute; top: 6.5rem; left: 0; right: 0; z-index: 2; }
@media (max-width: 900px) {
  .reel { --pv: 20rem; }
  .reel-stage { padding: 7.375rem 1rem 11.875rem; }
  .reel-head { top: 5.25rem; }
  .reel-ui { bottom: 1.375rem; }
  .reel-ui .wrap { grid-template-columns: 1fr; gap: 0.75rem; }
  .reel-meta { justify-items: start; grid-auto-flow: column; align-items: center; gap: 0.875rem; }
  .reel-bar { width: 8.75rem; }
  .caps { min-height: 4.5rem; }
  .cap { font-size: clamp(1.375rem, 6vw, 2rem); right: 0; }
}
@media (max-height: 600px) {
  .reel { --pv: 10.625rem; }
  .reel-stage { padding-block: 4.125rem 6.25rem; }
  .reel-head { top: 4.375rem; }
  .reel-ui { bottom: 0.875rem; }
  .cap { font-size: clamp(1.25rem, 2.6vw, 1.875rem); }
}
.reel-static { height: auto; padding-block: 7.5rem; }
.reel-static .reel-stage { position: relative; padding: 0 1.75rem; }
.reel-static .cap { position: static; opacity: 1; transform: none; font-size: 1.25rem; }
.reel-static .caps { display: grid; gap: 0.375rem; }
.reel-static .reel-head, .reel-static .reel-ui { position: relative; top: auto; bottom: auto; margin-block: 1.5rem; }

/* Work arc */
.arc { position: relative; height: 82svh; min-height: 32.5rem; }
.arc canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.arc canvas:active { cursor: grabbing; }
.arc-label { position: absolute; left: 0; right: 0; bottom: 1.125rem; z-index: 2; text-align: center; pointer-events: none; }
.arc-label b { display: block; font-size: clamp(1.375rem, 2.6vw, 2.125rem); font-weight: 600; letter-spacing: -0.03em; }
.arc-label span { color: var(--muted); font-size: 0.9375rem; }

/* Cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.card { padding: 1.875rem; border-radius: var(--radius); border: 0.0625rem solid var(--line); background: rgba(64, 61, 57, 0.28); transition: border-color 200ms var(--ease), background 200ms var(--ease); transform-style: preserve-3d; }
.card:hover { border-color: var(--line-strong); background: rgba(64, 61, 57, 0.45); }
.light .card { background: rgba(204, 197, 185, 0.25); }
.light .card:hover { background: rgba(204, 197, 185, 0.45); }
.card .mono { color: var(--orange); }
.light .card .mono { color: var(--char); }
.card h3 { font-size: 1.5rem; margin: 0.875rem 0 0.625rem; letter-spacing: -0.02em; }
.card p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.card .icon { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: rgba(235, 94, 40, 0.14); display: grid; place-items: center; color: var(--orange); }
.card .icon svg { width: 1.375rem; height: 1.375rem; }

/* Pinned step sections */
.pinned { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block: 6.25rem 3.125rem; overflow: hidden; }
.pinned > .wrap { width: 100%; }
.steps { position: relative; margin-top: 1.875rem; }
.steps.js-steps { min-height: 13.125rem; }
.steps.js-steps [data-step] { position: absolute; left: 0; right: 0; top: 0; }
.steps [data-step] + [data-step] { margin-top: 1.625rem; }
.steps.js-steps [data-step] + [data-step] { margin-top: 0; }
.steps [data-step] h3 { font-size: clamp(1.75rem, 3.2vw, 2.875rem); margin: 0.625rem 0 0.75rem; }
.steps [data-step] p { color: var(--muted); margin: 0; max-width: 30rem; }
.steps [data-step] .mono { color: var(--orange); }
.ticks { display: flex; gap: 0.5rem; margin-top: 1.75rem; }
.ticks i { flex: 1; max-width: 4.375rem; height: 0.1875rem; background: var(--line); transition: background 200ms var(--ease); }
.ticks i.on { background: var(--orange); }
.full-stage { position: absolute; inset: 0; }
.full-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.over { position: relative; z-index: 2; pointer-events: none; }
.over .panel { pointer-events: auto; max-width: 32.5rem; padding: 1.75rem; border-radius: var(--radius); background: rgba(37, 36, 34, 0.78); backdrop-filter: blur(0.625rem); border: 0.0625rem solid var(--line); }

/* Work page grid */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; perspective: 87.5rem; }
.work-card { position: relative; border-radius: var(--radius); overflow: hidden; border: 0.0625rem solid var(--line); background: var(--char); transform-style: preserve-3d; }
.work-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 600ms var(--ease); }
.work-card:hover img { transform: scale(1.04); }
.work-card .meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: 1.375rem 1.5rem; }
.work-card h3 { font-size: 1.625rem; letter-spacing: -0.02em; }
.work-card p { margin: 0.375rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.work-card .mono { color: var(--orange); white-space: nowrap; }
@media (max-width: 760px) { .work-grid { grid-template-columns: 1fr; } }
.device-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.625rem; }
.device-list button { padding: 0.5625rem 1rem; border-radius: 6.25rem; border: 0.0625rem solid var(--line-strong); background: transparent; font-size: 0.875rem; transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease); }
.device-list button:hover { border-color: var(--cream); }
.device-list button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--cream); }
.device-title { margin-top: 1.5rem; min-height: 3.75rem; }
.device-title b { display: block; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; }
.device-title span { color: var(--muted); }

/* About */
.values { list-style: none; margin: 1.875rem 0 0; padding: 0; display: grid; gap: 0.625rem; }
.values li { padding: 1.25rem 1.375rem; border-radius: 0.875rem; border: 0.0625rem solid var(--line); transition: border-color 200ms var(--ease), background 200ms var(--ease); }
.values li h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
.values li p { margin: 0.375rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.values li.on { border-color: var(--orange); background: rgba(235, 94, 40, 0.08); }
.people .card { text-align: left; }
.avatar { width: 100%; aspect-ratio: 1 / 1; border-radius: 0.875rem; display: grid; place-items: center; font-size: 4rem; font-weight: 700; letter-spacing: -0.05em; color: var(--cream); background: var(--char); margin-bottom: 1.125rem; position: relative; overflow: hidden; }
.avatar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 252, 242, 0.04) 0 0.75rem, transparent 0.75rem 1.5rem); }
.avatar.o { background: var(--orange); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 1.25rem; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.form { display: grid; gap: 1rem; padding: 2.125rem; border-radius: var(--radius); border: 0.0625rem solid var(--line); background: rgba(64, 61, 57, 0.28); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .fgrid { grid-template-columns: 1fr; } }
.fld { display: grid; gap: 0.4375rem; }
.fld.full { grid-column: 1 / -1; }
.fld label { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fld input, .fld select, .fld textarea { width: 100%; padding: 0.875rem 1rem; border-radius: 0.75rem; border: 0.0625rem solid var(--line-strong); background: rgba(37, 36, 34, 0.7); color: var(--cream); font-size: 1rem; transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); }
.fld textarea { min-height: 9.375rem; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 0.25rem rgba(235, 94, 40, 0.18); }
.fld [aria-invalid="true"] { border-color: #f0876a; }
.err { min-height: 1.125rem; font-size: 0.8125rem; color: #f0876a; }
.form-ok { padding: 0.875rem 1rem; border-radius: 0.75rem; border: 0.0625rem solid var(--orange); background: rgba(235, 94, 40, 0.1); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips label, .fld .chips label { position: relative; cursor: pointer; font-family: var(--display); font-size: 0.875rem; letter-spacing: 0; text-transform: none; color: var(--cream); }
.chips input { position: absolute; opacity: 0; width: 0.0625rem; height: 0.0625rem; }
.chips span { display: inline-block; padding: 0.5rem 0.9375rem; border-radius: 6.25rem; border: 0.0625rem solid var(--line-strong); font-size: 0.875rem; transition: background 150ms var(--ease), border-color 150ms var(--ease); }
.chips input:checked + span { background: var(--orange); border-color: var(--orange); }
.chips input:focus-visible + span { outline: 0.125rem solid var(--orange); outline-offset: 0.125rem; }
.info { display: grid; gap: 0.75rem; align-content: start; }
.info .card b { display: block; font-size: 1.25rem; font-weight: 600; margin-top: 0.5rem; letter-spacing: -0.01em; word-break: break-word; }
.copy-btn { margin-top: 0.75rem; }

/* CTA band */
.cta-band { text-align: left; }
.cta-band .h2 { font-size: clamp(2.75rem, 8vw, 8.25rem); letter-spacing: -0.05em; max-width: 12ch; }
.cta-band .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.75rem; flex-wrap: wrap; }

/* Footer */
.site-foot { position: relative; border-top: 0.0625rem solid var(--line); overflow: hidden; }
.foot-field { position: relative; height: 15rem; }
.foot-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; padding-block: 1.25rem 3.125rem; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 { margin: 0 0 0.875rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 400; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.foot-grid a { color: var(--muted); transition: color 150ms var(--ease); }
.foot-grid a:hover { color: var(--cream); }
.foot-grid p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.foot-bottom { border-top: 0.0625rem solid var(--line); padding-block: 1.375rem; }
.foot-bottom .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--faint); }
.foot-mark svg { width: 13.75rem; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Responsive foundations (loaded last so they win) ---------- */
/* Everything is in rem, so scaling the root scales the whole page: 16px up to 1740px wide, then 0.92vw (2K and 4K look like a larger 1080p). */
html { font-size: max(16px, 0.92vw); }
:root { --fs-h2: clamp(2rem, min(3.9vw, 7.2svh + 0.8rem), 4.5rem); }
.h2 { font-size: var(--fs-h2); }
.sec[data-pin] .h2, .split .h2 { font-size: min(var(--fs-h2), 3.6vw); }

/* Hero: the text column stops at 54% of the content width, so it can never reach the 3D on the right */
.hero-copy .wrap { container-type: inline-size; }
.hero-copy .wrap > * { max-width: 54cqw; }
.hero-copy .h1 { max-width: 54cqw !important; font-size: min(5.8cqw, 15svh); }
body[data-page="home"] .hero-copy .h1 { font-size: min(6.6cqw, 17svh); }
.hero-copy .lede { font-size: clamp(1rem, 1.5cqw, 1.5rem); }
@media (max-width: 900px) {
  .hero { align-items: flex-end; }
  .hero-copy { padding-block: 6rem 4.5rem; }
  .hero-copy .wrap > *, .hero-copy .h1 { max-width: 100cqw !important; }
  .hero-copy .h1 { font-size: min(11.2cqw, 8.5svh); }
  body[data-page="home"] .hero-copy .h1 { font-size: min(13cqw, 9svh); }
  .hero-copy .lede { font-size: 1rem; margin-top: 0.9rem; }
  .hero-actions { margin-top: 1.4rem; gap: 0.6rem; }
  .hero-foot { display: none; }
}
@media (max-height: 640px) and (min-width: 901px) { .hero-copy { padding-block: 6rem 3.5rem; } .hero-copy .lede { display: none; } .hero-actions { margin-top: 1.4rem; } }

/* Next-move band: heading stays inside its own column */
.cta-split .h2 { font-size: clamp(2.2rem, 4.6vw, 5.5rem); max-width: 11ch; }
.cta-split .lede { max-width: 30rem; }
@media (max-width: 900px) { .cta-split .h2 { font-size: clamp(2.2rem, 11vw, 3.4rem); max-width: none; } }

/* Larger content width on very large screens (rem scaling keeps it proportional) */
@media (min-width: 1740px) { .wrap { padding-inline: 2rem; } }
/* ---------- Services: menu illustrations (SVG user units, so pixel values stay) ---------- */
.ill-s { margin-bottom: 1rem; }
.ill-s .ln { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ill-s .wh { fill: var(--ink); }
.ill-s .it { fill: var(--orange); opacity: 0.35; transform-box: fill-box; transform-origin: center; transform: translateY(-8px); transition: transform 600ms var(--ease), opacity 400ms; }
.ill-s .i2 { transition-delay: 120ms; } .ill-s .i3 { transition-delay: 240ms; }
.on .s-cart .it { opacity: 1; transform: translateY(24px); }
.s-cart .tag { fill: var(--orange); font: 700 24px var(--display); opacity: 0.35; transition: opacity 400ms; }
.on .s-cart .tag { opacity: 1; }
.s-chart .ax { stroke: var(--ink); stroke-width: 2.5; }
.s-chart .bar { fill: var(--sand); transform-box: fill-box; transform-origin: bottom; transform: scaleY(0.4); transition: transform 600ms var(--ease), fill 300ms; }
.s-chart .b2 { transition-delay: 80ms; } .s-chart .b3 { transition-delay: 160ms; } .s-chart .b4 { transition-delay: 240ms; }
.on .s-chart .bar { transform: none; fill: var(--ink); } .on .s-chart .b4 { fill: var(--orange); }
.s-chart .trend { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 900ms var(--ease) 200ms; }
.on .s-chart .trend { stroke-dashoffset: 0; }
.s-build .bd { fill: var(--sand); stroke: var(--ink); stroke-width: 2; transform-box: fill-box; transform-origin: bottom; transform: scaleY(0.6); transition: transform 700ms var(--ease); }
.s-build .bd2 { transition-delay: 100ms; } .s-build .bd3 { transition-delay: 200ms; }
.on .s-build .bd { transform: none; }
.s-build .win rect { fill: var(--ink); opacity: 0.25; transition: fill 300ms, opacity 300ms; }
.on .s-build .win rect { fill: var(--orange); opacity: 1; }
.s-build .win rect:nth-child(2n) { transition-delay: 150ms; } .s-build .win rect:nth-child(3n) { transition-delay: 300ms; } .s-build .win rect:nth-child(5n) { transition-delay: 450ms; }
.s-design .fr { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 100; stroke-dashoffset: 60; transition: stroke-dashoffset 900ms var(--ease); }
.on .s-design .fr { stroke-dashoffset: 0; }
.s-design .bl { fill: var(--sand); transform-box: fill-box; transform-origin: left; transform: scaleX(0.3); transition: transform 600ms var(--ease); }
.s-design .bl2 { transition-delay: 120ms; } .s-design .bl3 { transition-delay: 240ms; fill: var(--orange); }
.on .s-design .bl { transform: none; }
.s-design .pen { fill: var(--orange); transition: transform 800ms var(--ease); }
.s-design .tip { fill: var(--ink); }
.on .s-design .pen { transform: translate(-72px, -16px); }
.s-qa .bx { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.s-qa .ln2 { fill: var(--sand); }
.s-qa .ck { fill: none; stroke: var(--orange); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 400ms var(--ease); }
.on .s-qa .r1 .ck { stroke-dashoffset: 0; } .on .s-qa .r2 .ck { stroke-dashoffset: 0; transition-delay: 250ms; } .on .s-qa .r3 .ck { stroke-dashoffset: 0; transition-delay: 500ms; }
.s-web .win0 { fill: var(--cream); stroke: var(--ink); stroke-width: 2.5; }
.s-web .bar0 { stroke: var(--ink); stroke-width: 2; }
.s-web .d1 { fill: var(--orange); } .s-web .d2, .s-web .d3 { fill: var(--sand); }
.s-web .hero0 { fill: var(--sand); transform-box: fill-box; transform-origin: left; transform: scaleX(0.5); transition: transform 600ms var(--ease), fill 300ms; }
.on .s-web .hero0 { transform: none; fill: var(--orange); }
.s-web .side { fill: var(--sand); opacity: 0.3; transform-box: fill-box; transform: translateX(14px); transition: transform 500ms var(--ease), opacity 400ms; }
.s-web .s2 { transition-delay: 100ms; } .s-web .s3 { transition-delay: 200ms; }
.on .s-web .side { transform: none; opacity: 1; }

/* ---------- Services: stack tiles ---------- */
.stack-grid { gap: 1rem; }
.stile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 17rem; padding: 1.75rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(64, 61, 57, 0.28); cursor: default; outline-offset: 3px; transition: border-color 300ms var(--ease); }
.stile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--orange); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 500ms var(--ease); }
.stile:is(.open, :focus-visible)::before { transform: scaleY(1); }
.stile:is(.open, :focus-visible) { border-color: var(--orange); }
.sico { width: 3.4rem; height: 3.4rem; fill: none; stroke: var(--cream); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: auto; }
.stile:is(.open, :focus-visible) .sico * { stroke-dasharray: 100; animation: sdraw 900ms var(--ease) both; }
@keyframes sdraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.stile .mono { margin-top: 1.4rem; transition: color 250ms; }
.stile h3 { font-size: clamp(1.7rem, 2.3vw, 2.6rem); letter-spacing: -0.03em; margin-top: 0.4rem; }
.stile ul { list-style: none; margin: 0; padding: 0; max-height: 0; opacity: 0; overflow: hidden; font-size: 0.95rem; transition: max-height 450ms var(--ease), opacity 300ms, margin 300ms; }
.stile li { padding: 0.3rem 0; border-top: 1px solid rgba(255, 252, 242, 0.4); }
.stile:is(.open, :focus-visible) ul { max-height: 10rem; opacity: 1; margin-top: 1rem; }
.stile:is(.open, :focus-visible) .mono { color: var(--cream); }

/* ---------- Technology: AI flip cards ---------- */
.flip-grid { align-items: stretch; }
.flip { perspective: 1400px; cursor: pointer; outline-offset: 4px; border-radius: var(--radius); }
.flip-in { display: grid; height: 100%; transform-style: preserve-3d; transition: transform 700ms var(--ease); }
.flip .face { grid-area: 1 / 1; display: flex; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .back { transform: rotateY(180deg); background: var(--orange); border-color: var(--orange); color: var(--ink); }
.flip .back .mono, .flip .back p { color: var(--ink); }
.flip .back h3 { color: var(--ink); }
.flip .back .btn { margin-top: auto; align-self: flex-start; }
.flip:is(.open, :focus-visible) .flip-in { transform: rotateY(180deg); }
.flip .hint { margin-top: auto; padding-top: 1rem; color: var(--faint); }
.flip .front:hover { background: rgba(204, 197, 185, 0.4); }
.ill-ml .ax { stroke: var(--ink); stroke-width: 2.5; }
.ill-ml .hist { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ill-ml .fc { fill: none; stroke: var(--orange); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; animation: fcdraw 3.4s var(--ease) infinite; }
.ill-ml .pt { fill: var(--orange); animation: ptp 3.4s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes fcdraw { 0% { stroke-dashoffset: 100; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes ptp { 0%, 40% { transform: scale(0); } 55% { transform: scale(1.4); } 70%, 100% { transform: scale(1); } }
.ill-dl .img { fill: var(--cream); stroke: var(--ink); stroke-width: 2.5; }
.ill-dl .det { fill: none; stroke: var(--orange); stroke-width: 3; stroke-dasharray: 100; animation: fcdraw 3.6s var(--ease) infinite; }
.ill-dl .d2 { animation-delay: 0.8s; }
.ill-dl .scan { stroke: var(--orange); stroke-width: 2; animation: scanmove 3.6s linear infinite; }
@keyframes scanmove { 0% { transform: translateY(0); } 100% { transform: translateY(74px); } }
.ill-wf .lk { stroke: var(--orange); stroke-width: 3; }
.ill-wf .nd { fill: var(--cream); stroke: var(--ink); stroke-width: 2.5; }
.ill-wf .n2 { animation: ndg 3s var(--ease) infinite 1s; }
.ill-wf .n3 { animation: ndg 3s var(--ease) infinite 2s; }
.ill-wf .sg { fill: var(--orange); animation: sgm 3s linear infinite; }
@keyframes ndg { 0%, 100% { fill: var(--cream); } 50% { fill: var(--orange); } }
@keyframes sgm { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateX(96px); opacity: 0; } }

/* ---------- Work: hero layout, smaller scrolling cards ---------- */
.work-hero { flex-direction: column; align-items: stretch; justify-content: flex-start; padding-top: 5.5rem; }
.work-hero .hero-copy { flex: none; padding-block: 1rem 0.2rem; }
.work-hero .hero-copy .h1 { font-size: clamp(2.2rem, min(6.2vw, 10svh), 6.2rem) !important; max-width: none !important; }
.work-hero .arc { flex: 1; min-height: 0; height: auto; }
.work-hero .arc-label { position: static; flex: none; padding: 0.4rem 1rem 1.3rem; text-align: center; }
.work-hero .arc-label b { font-size: clamp(1.2rem, 2.2vw, 2rem); }
.wgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; perspective: 1400px; }
.wcard { position: relative; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--char); overflow: hidden; transform-style: preserve-3d; outline-offset: 3px; cursor: default; transition: border-color 250ms var(--ease), box-shadow 300ms var(--ease); }
.wcard:is(.open, :focus-visible) { border-color: var(--orange); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35); }
.wcard .shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #1c1b19; }
.wcard .shot img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; transform: translateY(0); transition: transform 900ms var(--ease); will-change: transform; }
.wcard[data-axis="x"] .shot img { height: 100%; width: auto; }
.wcard:is(.open, :focus-visible)[data-axis="y"] .shot img { transform: translateY(var(--dy, 0px)); transition: transform var(--dur, 4s) cubic-bezier(0.45, 0.05, 0.35, 1); }
.wcard:is(.open, :focus-visible)[data-axis="x"] .shot img { transform: translateX(var(--dx, 0px)); transition: transform var(--dur, 4s) cubic-bezier(0.45, 0.05, 0.35, 1); }
.wcard .shot::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(14rem circle at var(--mx, 50%) var(--my, 50%), rgba(235, 94, 40, 0.28), transparent 65%); opacity: 0; transition: opacity 250ms; }
.wcard:is(.open, :focus-visible) .shot::before { opacity: 1; }
.wcard .go { position: absolute; right: 0.75rem; top: 0.75rem; z-index: 2; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: var(--cream); transform: scale(0.5); opacity: 0; transition: transform 300ms var(--ease), opacity 250ms; }
.wcard .go svg { width: 1rem; height: 1rem; }
.wcard .tip { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 2; font-size: 0.625rem; padding: 0.25rem 0.6rem; border-radius: 100px; background: rgba(37, 36, 34, 0.82); transition: opacity 250ms; }
.wcard:is(.open, :focus-visible) .go { transform: none; opacity: 1; }
.wcard:is(.open, :focus-visible) .tip { opacity: 0; }
.wcard .meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; padding: 1rem 1.1rem 1.2rem; }
.wcard h3 { font-size: 1.2rem; letter-spacing: -0.02em; }
.wcard p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.4; }
.wcard .meta .mono { color: var(--orange); font-size: 0.625rem; text-align: right; flex: none; max-width: 7rem; }
@media (max-width: 1000px) { .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wgrid { grid-template-columns: 1fr; } }

/* ---------- About: vision/mission panels, leadership, skyline ---------- */
.duo { display: flex; gap: 1rem; min-height: 22rem; }
.panel2 { position: relative; flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.9rem; padding: 2rem; border-radius: var(--radius); border: 1px solid var(--line-strong); background: rgba(204, 197, 185, 0.25); cursor: default; outline-offset: 3px; transition: flex 700ms var(--ease), background 400ms var(--ease), color 400ms, border-color 300ms; }
.panel2.on { flex: 2.4; background: var(--ink); color: var(--cream); border-color: var(--ink); }
.panel2 h3 { position: relative; z-index: 1; font-size: clamp(1.1rem, 1.8vw, 1.8rem); line-height: 1.28; font-weight: 600; letter-spacing: -0.02em; }
.panel2 .mono { position: relative; z-index: 1; color: var(--orange); }
.panel2 .bgword { position: absolute; right: -0.4rem; top: -0.35em; font-size: clamp(5rem, 11vw, 10rem); font-weight: 800; letter-spacing: -0.06em; line-height: 1; text-transform: uppercase; color: rgba(64, 61, 57, 0.07); pointer-events: none; transition: transform 800ms var(--ease), color 500ms; }
.panel2.on .bgword { color: rgba(235, 94, 40, 0.2); transform: translateX(-1rem); }
.panel2 .rule { display: block; height: 3px; width: 3rem; background: var(--orange); transition: width 700ms var(--ease); }
.panel2.on .rule { width: 100%; }
.panel2 .more { opacity: 0; transform: translateY(0.5rem); transition: opacity 400ms 150ms, transform 400ms 150ms; color: var(--sand); }
.panel2.on .more { opacity: 1; transform: none; }
@media (max-width: 900px) { .duo { flex-direction: column; min-height: 0; } .panel2, .panel2.on { flex: none; padding: 1.5rem; } .panel2 .bgword { font-size: 5rem; } }
.lead-grid { gap: 1.25rem; }
.lcard { padding: 1.2rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(204, 197, 185, 0.25); cursor: default; outline-offset: 3px; transform-style: preserve-3d; transition: border-color 250ms var(--ease), background 250ms; }
.lcard:is(.open, :focus-visible) { border-color: var(--orange); background: rgba(204, 197, 185, 0.45); }
.lcard h3 { font-size: 1.5rem; margin-top: 0.3rem; letter-spacing: -0.02em; }
.lcard .mono { color: var(--char); }
.lcard .avatar span { transition: transform 500ms var(--ease); }
.lcard:is(.open, :focus-visible) .avatar span { transform: scale(0.7) translateY(-2.2rem); }
.lcard .reveal { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1rem 1.1rem; background: var(--ink); color: var(--cream); font-size: 0.95rem; font-weight: 400; letter-spacing: 0; line-height: 1.4; text-align: left; transform: translateY(101%); transition: transform 500ms var(--ease); }
.lcard .reveal p { margin: 0; color: var(--cream); }
.lcard .reveal a { display: inline-block; margin-top: 0.6rem; color: var(--orange); }
.lcard:is(.open, :focus-visible) .reveal { transform: none; }
.skywrap { position: relative; padding: 1rem 1rem 1.3rem; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: linear-gradient(#1b1a18, #252422 72%); }
.sky { width: 100%; height: auto; display: block; overflow: visible; }
.sky .sun { fill: var(--orange); opacity: 0.92; transform: translateY(130px); transition: transform 1800ms var(--ease); }
.skywrap.in .sun { transform: translateY(50px); }
.skywrap:hover .sun { transform: translateY(0); }
.sky .stars circle { fill: var(--cream); opacity: 0.15; animation: twk 2.4s ease-in-out infinite alternate; }
.sky .stars circle:nth-child(2n) { animation-delay: 0.8s; } .sky .stars circle:nth-child(3n) { animation-delay: 1.5s; }
@keyframes twk { to { opacity: 0.95; } }
.sky .bd { fill: var(--char); stroke: rgba(204, 197, 185, 0.22); stroke-width: 1; transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform 1100ms var(--ease); }
.skywrap.in .bd { transform: none; }
.sky .bd:nth-child(2n) { transition-delay: 150ms; } .sky .bd:nth-child(3n) { transition-delay: 300ms; } .sky .bd:nth-child(5n) { transition-delay: 450ms; }
.sky .lm { cursor: pointer; outline: none; }
.sky .lm path, .sky .lm polygon { fill: var(--ink); stroke: var(--orange); stroke-width: 2; transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform 1200ms var(--ease), fill 250ms; }
.sky .l2 polygon { transition-delay: 150ms; } .sky .l3 path { transition-delay: 300ms; }
.skywrap.in .lm path, .skywrap.in .lm polygon { transform: none; }
.sky .lm line { stroke: var(--orange); stroke-width: 2; }
.sky .lm:is(:hover, :focus-visible) path, .sky .lm:is(:hover, :focus-visible) polygon { fill: rgba(235, 94, 40, 0.3); }
.sky .lm text { fill: var(--cream); font: 500 11px var(--mono); letter-spacing: 0.04em; opacity: 0; transition: opacity 250ms; }
.sky .lm:is(:hover, :focus-visible) text { opacity: 1; }
.sky .lt { fill: var(--orange); opacity: 0.1; animation: win 2.6s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes win { to { opacity: 0.95; } }
.sky .water { stroke: var(--orange); stroke-width: 1.5; opacity: 0.5; stroke-dasharray: 6 8; animation: flowl 6s linear infinite; }
.sky .w2 { opacity: 0.3; animation-duration: 9s; }
@keyframes flowl { to { stroke-dashoffset: -56; } }
.badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.badges span { font: 500 0.75rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35rem 0.8rem; border: 1px solid var(--line-strong); border-radius: 100px; opacity: 0.25; transform: translateY(0.4rem); transition: opacity 500ms var(--ease), transform 500ms var(--ease), background 250ms, border-color 250ms; }
.skywrap.in .badges span { opacity: 1; transform: none; }
.skywrap.in .badges span:nth-child(2) { transition-delay: 150ms; } .skywrap.in .badges span:nth-child(3) { transition-delay: 300ms; }
.skywrap:hover .badges span { border-color: var(--orange); background: rgba(235, 94, 40, 0.14); }
#events .split.rev { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
@media (max-width: 900px) { #events .split.rev { grid-template-columns: 1fr; } }

.pinned .stage { max-height: calc(100svh - 11rem); }
@media (max-width: 900px) { .pinned .stage { max-height: 38svh; order: -1; } .pinned { align-items: flex-start; padding-block: 5.25rem 1.5rem; } }

/* Small screens: keep pinned sections inside the viewport */
@media (max-width: 900px) {
  .sec[data-pin] .stage, .pinned .stage, .svc-pin .stage { max-height: 30svh; }
  .sec[data-pin]:not(.cta-split) .lede { display: none; }
  .sec[data-pin] .values li { padding: 0.65rem 0.9rem; }
  .sec[data-pin] .values li p { display: none; }
  .sec[data-pin] .values { margin-top: 1rem; gap: 0.5rem; }
  .sec[data-pin] .grid-2 { margin-top: 1rem !important; gap: 0.6rem; }
  .sec[data-pin] .card { padding: 1rem; }
  .sec[data-pin] .card h3 { margin: 0.4rem 0 0.2rem; font-size: 1.3rem; }
  .svc-pin .h2, .sec[data-pin] .h2, .pinned .h2 { font-size: clamp(1.7rem, 7.2vw, 2.4rem); }
  .svc-pin .svc-list { margin-top: 0.8rem; }
  .svc-pin .svc-list h3 { font-size: 1.35rem; }
  .svc-pin .svc-list li.on p { max-height: 4.5rem; }
  .svc-foot { margin-top: 0.9rem; }
  .steps.js-steps { min-height: 9.5rem; }
  .pinned .steps [data-step] h3 { font-size: 1.6rem; }
}