@charset "UTF-8";

:root {
  --ink: #030817;
  --ink-soft: #07122d;
  --panel: #0a1735;
  --line: rgba(179, 211, 255, 0.16);
  --line-bright: rgba(118, 218, 255, 0.38);
  --white: #f4f8ff;
  --muted: #91a2bd;
  --blue: #1464ff;
  --cyan: #54d8ff;
  --iris: #778cff;
  --mint: #9fffd7;
  --shell: min(100% - 96px, 1440px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; background: var(--ink); }
.i18n-loading body { visibility: hidden; }
body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--white);
  font-family: Bahnschrift, "Aptos Display", "Trebuchet MS", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
canvas { display: block; }
::selection { background: var(--cyan); color: var(--ink); }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  transform: translateY(-150%);
  border-radius: 3px;
  background: var(--white);
  color: var(--ink);
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }
.shell { width: var(--shell); margin-inline: auto; }

.page-progress {
  position: fixed;
  z-index: 80;
  inset: 0 0 auto;
  height: 2px;
  background: rgba(255,255,255,.04);
}
.page-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.site-header {
  position: fixed;
  z-index: 70;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 86px;
  padding-inline: max(48px, calc((100vw - 1440px) / 2));
  border-bottom: 1px solid transparent;
  transition: min-height 300ms var(--ease), background 300ms ease, border-color 300ms ease;
}
.site-header.is-scrolled {
  min-height: 68px;
  border-color: var(--line);
  background: rgba(3, 8, 23, 0.82);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; text-transform: uppercase; font-size: 14px; font-weight: 700; }
.brand__mark { position: relative; width: 22px; height: 22px; transform: rotate(45deg); }
.brand__mark i { position: absolute; inset: 2px; border: 1px solid var(--cyan); }
.brand__mark i:last-child { inset: 7px; background: var(--blue); border: 0; }
.desktop-nav { display: flex; gap: 38px; color: #bac7db; font-size: 13px; }
.desktop-nav a { transition: color 180ms ease; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--white); }
.language-switch { position: absolute; right: max(236px, calc((100vw - 1440px) / 2 + 190px)); display: inline-flex; align-items: center; gap: 7px; color: #74829a; font-size: 10px; font-weight: 700; }
.language-switch button { padding: 5px 2px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; letter-spacing: .08em; }
.language-switch button:hover, .language-switch button:focus-visible, .language-switch button.is-active { border-color: var(--cyan); color: var(--white); }
.header-cta { justify-self: end; display: inline-flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 650; }
.header-cta i, .button i, .text-link i { position: relative; width: 28px; height: 28px; border: 1px solid var(--line-bright); border-radius: 50%; }
.header-cta i::before, .button i::before, .text-link i::before { content: ""; position: absolute; width: 7px; height: 7px; top: 8px; left: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.header-cta i::after, .button i::after, .text-link i::after { content: ""; position: absolute; width: 9px; height: 1px; top: 13px; left: 8px; background: currentColor; transform: rotate(-45deg); transform-origin: right; }
.menu-toggle, .mobile-nav { display: none; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 36%, rgba(18, 93, 255, .16), transparent 34%),
    linear-gradient(180deg, #040b20 0%, var(--ink) 82%);
}
.signal-canvas { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: .96; will-change: transform; }
.hero__grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .28;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}
.hero__content { position: relative; display: flex; min-height: calc(100svh - 100px); flex-direction: column; justify-content: center; padding-block: 150px 130px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; color: var(--cyan); font-size: 12px; font-weight: 650; text-transform: uppercase; }
.eyebrow > span { display: block; width: 28px; height: 1px; background: currentColor; box-shadow: 0 0 12px currentColor; }
.hero h1, .section-heading h2, .story h2, .impact h2, .contact h2 {
  margin: 0;
  font-size: clamp(68px, 6.7vw, 96px);
  font-weight: 520;
  line-height: .91;
  text-transform: uppercase;
}
em { color: var(--cyan); font-family: Georgia, "Times New Roman", serif; font-weight: 400; text-transform: none; }
.hero__intro { display: flex; align-items: end; justify-content: space-between; gap: 48px; margin-top: 54px; padding-left: 35%; }
.hero__intro > p { max-width: 520px; margin: 0; color: #a9b7cd; font-size: 19px; }
.hero__actions { display: flex; align-items: center; gap: 28px; }
.hero__actions .text-link { white-space: nowrap; }
.button { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 34px; min-width: 220px; min-height: 60px; padding: 10px 14px 10px 24px; overflow: hidden; border: 1px solid var(--line-bright); border-radius: 3px; font-size: 13px; font-weight: 650; transition: color 350ms ease, border-color 350ms ease, transform 350ms var(--ease); }
.button::before { content: ""; position: absolute; inset: 0; transform: translateX(-102%); background: var(--cyan); transition: transform 500ms var(--ease); }
.button span, .button i { position: relative; z-index: 1; }
.button:hover::before, .button:focus-visible::before { transform: translateX(0); }
.button:hover, .button:focus-visible { color: var(--ink); border-color: var(--cyan); }
.button--primary { background: rgba(10, 35, 92, .55); backdrop-filter: blur(12px); }
.hero__foot { position: absolute; inset: auto 0 30px; display: grid; grid-template-columns: 1fr 1fr 1fr; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; text-transform: uppercase; }
.hero__foot p { margin: 0; }
.hero__foot p:nth-child(2) { text-align: center; }
.hero__foot a { justify-self: end; }
.hero__foot span { color: var(--cyan); margin-left: 8px; }

.signal-strip { overflow: hidden; border-block: 1px solid var(--line); background: #050d23; }
.signal-strip__track { display: flex; width: max-content; align-items: center; gap: 34px; padding-block: 20px; color: #8392aa; font-size: 11px; text-transform: uppercase; animation: marquee 26s linear infinite; }
.signal-strip__track span { white-space: nowrap; }
.signal-strip__track i { width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
@keyframes marquee { to { transform: translateX(-50%); } }

.story { position: relative; display: grid; grid-template-columns: minmax(300px, .8fr) 1.2fr; gap: 10%; padding-block: 160px; }
.story__sticky { position: sticky; top: 130px; align-self: start; }
.story h2, .section-heading h2, .impact h2, .contact h2 { font-size: 64px; }
.story__lead { max-width: 450px; margin: 36px 0 54px; color: var(--muted); font-size: 18px; }
.story__meter { width: min(340px, 100%); height: 1px; background: var(--line); }
.story__meter span { display: block; width: 100%; height: 1px; transform: scaleX(.333); transform-origin: left; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); transition: transform 700ms var(--ease); }
.story__count { margin-top: 12px; color: var(--muted); font-size: 12px; }
.story__count span { color: var(--white); }
.story__chapters { min-width: 0; }
.chapter { position: relative; display: grid; grid-template-columns: 48px 1fr; min-height: 70svh; align-content: center; gap: 28px; border-top: 1px solid var(--line); }
.chapter:last-child { border-bottom: 1px solid var(--line); }
.chapter__index, .chapter__label { color: var(--cyan); font-size: 12px; text-transform: uppercase; }
.chapter__index { margin: 5px 0 0; }
.chapter__label { margin: 0 0 18px; }
.chapter h3 { max-width: 570px; margin: 0; font-size: 38px; font-weight: 520; line-height: 1.08; }
.chapter div > p:last-child { max-width: 520px; margin: 26px 0 0; color: var(--muted); font-size: 17px; }
.chapter__diagram { position: relative; grid-column: 2; width: min(440px, 100%); height: 200px; margin-top: 44px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 50% 50%, rgba(20,100,255,.12), transparent 52%), rgba(8,25,62,.45); perspective: 700px; }
.chapter__diagram::after { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 32px 32px; transform: perspective(500px) rotateX(58deg) scale(1.35); }
.diagram--signal span { position: absolute; z-index: 1; left: 7%; right: 7%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--blue), var(--cyan), transparent); transform-origin: 50% 50%; animation: signal-converge 7s var(--ease) infinite; }
.diagram--signal span:nth-child(1) { --angle: 15deg; --distance: -48px; }
.diagram--signal span:nth-child(2) { --angle: 0deg; --distance: 0px; animation-delay: -2.3s; }
.diagram--signal span:nth-child(3) { --angle: -15deg; --distance: 48px; animation-delay: -4.6s; }
.diagram--signal i, .diagram--signal b { position: absolute; z-index: 3; width: 8px; height: 8px; left: 8%; top: calc(50% - 4px); border-radius: 50%; background: var(--white); box-shadow: 0 0 24px 8px var(--blue); animation: signal-travel 5.2s var(--ease) infinite; }
.diagram--signal b { animation-delay: -2.6s; opacity: .65; }
.diagram--layers span { position: absolute; z-index: 1; width: 54%; height: 88px; left: 23%; top: 50%; border: 1px solid var(--line-bright); background: linear-gradient(135deg, rgba(20,100,255,.02), rgba(84,216,255,.1)); transform-style: preserve-3d; animation: frame-fold 8s var(--ease) infinite; }
.diagram--layers span:nth-child(1) { --spread-x: -54px; --spread-y: -30px; --turn: -12deg; animation-delay: -1.2s; }
.diagram--layers span:nth-child(2) { --spread-x: -18px; --spread-y: -10px; --turn: -4deg; animation-delay: -.6s; }
.diagram--layers span:nth-child(3) { --spread-x: 18px; --spread-y: 10px; --turn: 4deg; }
.diagram--layers span:nth-child(4) { --spread-x: 54px; --spread-y: 30px; --turn: 12deg; animation-delay: -.3s; }
.diagram--layers i { position: absolute; z-index: 3; width: 6px; height: 6px; left: calc(50% - 3px); top: calc(50% - 3px); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 30px 10px rgba(84,216,255,.48); animation: core-breathe 4s ease-in-out infinite; }
.diagram--orbit > span { position: absolute; z-index: 1; inset: 30px 70px; border: 1px solid var(--line-bright); border-radius: 50%; transform-style: preserve-3d; animation: orbit-turn 9s linear infinite; }
.diagram--orbit > span:nth-child(2) { inset: 48px 102px; animation-duration: 7s; animation-direction: reverse; transform: rotateX(64deg) rotateZ(24deg); }
.diagram--orbit > span:nth-child(3) { inset: 68px 134px; animation-duration: 5.5s; transform: rotateY(66deg) rotateZ(-18deg); }
.diagram--orbit span i { position: absolute; width: 8px; height: 8px; left: 50%; top: -4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 20px 6px rgba(84,216,255,.55); }
.diagram--orbit > b { position: absolute; z-index: 2; width: 18px; height: 18px; left: calc(50% - 9px); top: calc(50% - 9px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, white, var(--cyan) 20%, var(--blue) 64%, transparent 68%); box-shadow: 0 0 44px rgba(20,100,255,.85); }
@keyframes signal-converge { 0%,100% { transform: translateY(var(--distance)) rotate(var(--angle)) scaleX(.84); opacity: .45; } 48%,58% { transform: translateY(0) rotate(0) scaleX(1); opacity: 1; } }
@keyframes signal-travel { 0% { transform: translate3d(0,-44px,0); opacity: 0; } 12% { opacity: 1; } 48% { transform: translate3d(330px,0,0); } 88% { opacity: 1; } 100% { transform: translate3d(0,44px,0); opacity: 0; } }
@keyframes frame-fold { 0%,100% { transform: translate3d(var(--spread-x),calc(-50% + var(--spread-y)),0) rotateY(var(--turn)) rotateX(8deg); opacity: .32; } 45%,58% { transform: translate3d(0,-50%,38px) rotateY(0) rotateX(0); opacity: 1; } }
@keyframes core-breathe { 50% { transform: scale(1.7); box-shadow: 0 0 44px 16px rgba(84,216,255,.36); } }
@keyframes orbit-turn { to { transform: rotateX(62deg) rotateZ(360deg); } }

.capabilities { padding-block: 150px; background: #f0f4fb; color: #071026; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 90px; }
.capabilities .eyebrow { color: #1558db; }
.capabilities em { color: #1558db; }
.capability-list { border-top: 1px solid rgba(7,16,38,.2); }
.capability { position: relative; display: grid; grid-template-columns: 70px 1fr 1fr 44px; align-items: center; gap: 30px; min-height: 180px; border-bottom: 1px solid rgba(7,16,38,.2); transition: color 300ms ease, padding 450ms var(--ease); }
.capability::before { content: ""; position: absolute; z-index: 0; inset: 0; transform: scaleY(0); transform-origin: bottom; background: #0b2b78; transition: transform 450ms var(--ease); }
.capability > * { position: relative; z-index: 1; }
.capability:hover { padding-inline: 24px; color: var(--white); }
.capability:hover::before { transform: scaleY(1); }
.capability > p:first-child { font-size: 12px; }
.capability h3 { margin: 0; font-size: 29px; font-weight: 560; }
.capability > p:nth-child(3) { max-width: 420px; margin: 0; color: #506078; }
.capability:hover > p:nth-child(3) { color: #bdcbea; }
.capability > span { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.section-link { margin-top: 46px; }

.signature { position: relative; display: grid; min-height: 110svh; place-items: center; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 68% 48%, rgba(20,100,255,.18), transparent 36%), linear-gradient(160deg, #020612, #071534 58%, #030817); }
.signature::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 90px 90px; mask-image: radial-gradient(circle at 68% 48%, #000, transparent 58%); }
.signature__copy { position: relative; z-index: 3; pointer-events: none; }
.signature__copy h2, .media-motion h2 { max-width: 760px; margin: 0; font-size: 68px; font-weight: 520; line-height: .93; text-transform: uppercase; }
.signature__copy > p:last-child { max-width: 420px; margin: 38px 0 0; color: var(--muted); font-size: 17px; }
.signature__scene { --scene-x: 0deg; --scene-y: 0deg; position: absolute; z-index: 2; left: 68%; top: 50%; width: min(46vw, 670px); aspect-ratio: 1; transform: translate(-50%,-50%) perspective(1100px) rotateX(var(--scene-y)) rotateY(var(--scene-x)); transform-style: preserve-3d; transition: transform 900ms var(--ease); }
.signature__aura { position: absolute; inset: 17%; border-radius: 50%; background: radial-gradient(circle, rgba(216,249,255,.32), rgba(20,100,255,.14) 32%, transparent 68%); filter: blur(22px); animation: aura-pulse 5s ease-in-out infinite; }
.signature__ring { position: absolute; left: 50%; top: 50%; width: 54%; height: 32%; border: 10px solid transparent; border-radius: 50%; background: linear-gradient(125deg, rgba(255,255,255,.95), rgba(84,216,255,.25) 28%, rgba(20,100,255,.92) 55%, rgba(255,255,255,.48)) border-box; box-shadow: inset 0 0 22px rgba(255,255,255,.34), 0 0 36px rgba(20,100,255,.42); mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude; transform-style: preserve-3d; }
.signature__ring i { position: absolute; inset: -12px; border-radius: 50%; border-top: 2px solid rgba(255,255,255,.86); filter: blur(.2px); }
.signature__ring--one { animation: sculpture-one 13s linear infinite; }
.signature__ring--two { animation: sculpture-two 16s linear infinite reverse; }
.signature__ring--three { animation: sculpture-three 11s linear infinite; }
.signature__core { position: absolute; left: 50%; top: 50%; width: 17%; aspect-ratio: 1; transform: translate(-50%,-50%) translateZ(80px); border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff, var(--cyan) 16%, var(--blue) 52%, #04143b 74%); box-shadow: 0 0 80px 20px rgba(20,100,255,.54), inset -18px -22px 34px rgba(0,5,30,.7); }
.signature__coordinate { position: absolute; z-index: 3; right: 48px; bottom: 38px; margin: 0; color: var(--muted); font-size: 10px; text-transform: uppercase; }
@keyframes sculpture-one { from { transform: translate(-50%,-50%) rotateX(68deg) rotateY(12deg) rotateZ(0); } to { transform: translate(-50%,-50%) rotateX(68deg) rotateY(12deg) rotateZ(360deg); } }
@keyframes sculpture-two { from { transform: translate(-50%,-50%) rotateX(18deg) rotateY(72deg) rotateZ(30deg); } to { transform: translate(-50%,-50%) rotateX(18deg) rotateY(72deg) rotateZ(390deg); } }
@keyframes sculpture-three { from { transform: translate(-50%,-50%) rotateX(128deg) rotateY(48deg) rotateZ(-24deg); } to { transform: translate(-50%,-50%) rotateX(128deg) rotateY(48deg) rotateZ(336deg); } }
@keyframes aura-pulse { 50% { transform: scale(1.16); opacity: .68; } }

.case-study { min-height: 150svh; background: #020612; }
.case-study__stage { position: sticky; top: 0; height: 100svh; min-height: 700px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 52%, #0d3ba0 0%, #071942 32%, #020612 70%); }
.case-study__lines { position: absolute; inset: -20%; opacity: .2; background-image: linear-gradient(rgba(130,200,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(130,200,255,.22) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(700px) rotateX(62deg) translateY(16%); }
.case-study__monogram { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); color: rgba(127,205,255,.08); font-family: Georgia, serif; font-size: 680px; line-height: 1; }
.case-study__interface { position: absolute; z-index: 1; left: 50%; top: 50%; width: 560px; height: 340px; transform: translate(-50%,-50%) perspective(1100px) rotateY(-9deg) rotateX(5deg); border: 1px solid rgba(125,210,255,.42); border-radius: 6px; background: rgba(3,12,36,.72); box-shadow: 0 40px 110px rgba(0,35,155,.55), inset 0 0 60px rgba(45,142,255,.06); backdrop-filter: blur(18px); }
.interface__top { display: flex; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.interface__top span:last-child { color: var(--mint); }
.interface__top b { font-weight: 600; }
.interface__body { display: grid; grid-template-columns: 178px 1fr; height: calc(100% - 55px); }
.interface__rail { display: flex; flex-direction: column; gap: 0; padding: 14px 0; border-right: 1px solid var(--line); }
.interface__rail button { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 16px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; letter-spacing: .06em; text-align: left; text-transform: uppercase; transition: color 240ms ease, background 240ms ease; }
.interface__rail button:hover, .interface__rail button:focus-visible { color: var(--white); }
.interface__rail i { flex: 0 0 auto; width: 10px; height: 10px; border: 1px solid var(--line-bright); border-radius: 2px; }
.interface__rail button.is-live { color: var(--white); background: rgba(84,216,255,.07); }
.interface__rail button.is-live i { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 18px 5px rgba(84,216,255,.38); }
.interface__data { display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.interface__chart { display: flex; align-items: end; gap: 22px; padding: 30px 40px 18px; }
.interface__chart span { flex: 1; min-width: 0; height: calc(var(--bar-value, 42) * 1%); background: linear-gradient(to top, var(--blue), var(--cyan)); opacity: .58; box-shadow: 0 0 26px rgba(84,216,255,.2); transition: height 1200ms var(--ease), opacity 400ms ease; }
.interface__status { min-height: 51px; margin: 0; padding: 12px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.case-study__copy { position: relative; z-index: 2; display: flex; height: 100%; flex-direction: column; justify-content: space-between; padding-block: 120px 70px; pointer-events: none; }
.case-study__copy h2 { margin: auto 0; color: rgba(244,248,255,.9); font-size: 180px; font-weight: 500; line-height: .8; }
.case-study__details { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.case-study__brief { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 830px; gap: 30px; }
.case-study__brief p { margin: 0; color: #a5b6d1; font-size: 14px; }
.case-study__brief span { display: block; margin-bottom: 8px; color: var(--cyan); font-size: 10px; text-transform: uppercase; }
.text-link { display: inline-flex; align-items: center; gap: 14px; pointer-events: auto; font-size: 13px; font-weight: 650; }

.impact { padding-block: 160px; }
.impact__intro { display: flex; justify-content: space-between; align-items: start; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 100px; background: var(--line); border: 1px solid var(--line); }
.metric { min-height: 310px; padding: 42px; background: var(--ink); }
.metric strong { display: block; color: var(--cyan); font-size: 74px; font-weight: 450; line-height: 1; }
.metric p { max-width: 230px; margin: 110px 0 0; color: var(--muted); }

.media-motion { position: relative; overflow: hidden; padding-block: 150px 180px; background: #071026; }
.media-motion__heading { display: flex; align-items: end; justify-content: space-between; gap: 60px; }
.media-motion__heading > p { max-width: 390px; margin: 0 0 6px; color: var(--muted); font-size: 17px; }
.media-panels { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 14px; height: 680px; margin-top: 90px; }
.media-panel { --panel-shift: 0px; position: relative; height: var(--panel-height, 68%); margin: 0; overflow: hidden; border: 1px solid var(--line); background: #081634; opacity: 0; transform: translate3d(0,calc(var(--panel-shift) + 90px),0); transition: opacity 900ms ease calc(var(--panel-order) * 170ms), transform 1200ms var(--ease) calc(var(--panel-order) * 170ms); will-change: transform; }
.media-panels.is-entered .media-panel { opacity: 1; transform: translate3d(0,var(--panel-shift),0); }
.media-panel--one { --panel-height: 72%; }.media-panel--two { --panel-height: 92%; }.media-panel--three { --panel-height: 64%; }.media-panel--four { --panel-height: 84%; }.media-panel--five { --panel-height: 70%; }
.media-panel__visual { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; object-position: center; filter: saturate(.64) contrast(1.08) brightness(.72) sepia(.08) hue-rotate(165deg); transition: transform 150ms linear; }
.media-panel--one .media-panel__visual { object-position: 50% 42%; }.media-panel--two .media-panel__visual { object-position: 52% 50%; }.media-panel--three .media-panel__visual { object-position: 53% 50%; }.media-panel--four .media-panel__visual { object-position: 50% 30%; }.media-panel--five .media-panel__visual { object-position: 55% 50%; }
.media-panel figcaption { position: absolute; z-index: 2; inset: auto 14px 14px; display: flex; justify-content: space-between; color: rgba(244,248,255,.78); font-size: 10px; text-transform: uppercase; }
.media-panel figcaption span { color: var(--cyan); }
.media-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,6,18,.82), transparent 42%); }

.studio-section { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 9%; padding-block: 170px; }
.studio-section > * { min-width: 0; }
.studio-section__media { position: relative; min-height: 680px; margin: 0; overflow: hidden; }
.studio-section__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(3,8,23,.08), rgba(20,100,255,.22)); mix-blend-mode: color; }
.studio-section__media img { width: 100%; height: 100%; min-height: 680px; object-fit: cover; filter: saturate(.7) contrast(1.06); }
.studio-section__copy h2, .page-hero h1, .page-section h2 { margin: 0; font-size: 64px; font-weight: 520; line-height: .94; text-transform: uppercase; }
.studio-section__copy > p:not(.eyebrow) { max-width: 520px; margin: 34px 0 0; color: var(--muted); font-size: 17px; }
.studio-section__copy .studio-section__note { padding-top: 22px; border-top: 1px solid var(--line); font-size: 12px; text-transform: uppercase; }
.studio-section__copy .text-link { margin-top: 38px; }

.manifesto { position: relative; display: grid; min-height: 88svh; place-items: center; overflow: hidden; padding: 80px 48px; text-align: center; background: #050c22; }
.manifesto__halo { position: absolute; width: 70vw; aspect-ratio: 1; }
.manifesto__halo span { position: absolute; inset: 0; border: 1px solid rgba(84,216,255,.18); border-radius: 50%; box-shadow: 0 0 100px rgba(20,100,255,.14), inset 0 0 100px rgba(20,100,255,.08); animation: halo-breathe 7s ease-in-out infinite; }
.manifesto__halo span:nth-child(2) { inset: 14%; animation-delay: -2.3s; animation-direction: reverse; }.manifesto__halo span:nth-child(3) { inset: 30%; animation-delay: -4.6s; }
.manifesto blockquote { position: relative; display: flex; flex-direction: column; margin: 0; font-size: 58px; font-weight: 450; line-height: 1.06; }
.statement-word { opacity: .1; filter: blur(10px); transition: transform 1400ms var(--ease), opacity 1200ms ease, filter 1400ms ease; }
.statement-word--left { transform: translate3d(-120px,0,0); }.statement-word--right { transform: translate3d(120px,0,0); }.statement-word--rise { transform: translate3d(0,90px,0) scale(.88); }
.manifesto.is-assembled .statement-word { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) scale(1); }
.manifesto > p { position: absolute; bottom: 54px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
@keyframes halo-breathe { 0%,100% { transform: scale(.92) rotate(0); opacity: .35; } 50% { transform: scale(1.08) rotate(8deg); opacity: 1; } }

.contact { padding-block: 170px 90px; }
.contact__intro { display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 8%; }
.contact__intro .eyebrow { grid-column: 1 / -1; }
.contact__intro > p:last-child { max-width: 420px; margin: 8px 0 0; color: var(--muted); font-size: 18px; }
.contact__row { display: flex; align-items: end; justify-content: space-between; gap: 80px; }
.button--signal { min-width: 260px; background: var(--cyan); color: var(--ink); }
.button--signal::before { background: var(--white); }
.contact__meta { display: grid; grid-template-columns: 1fr 1fr; margin-top: 110px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; text-transform: uppercase; }
.contact__meta p { margin: 0; }
.contact__meta p:last-child { justify-self: end; text-align: right; }
.project-form { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 28px; margin-top: 90px; padding-top: 42px; border-top: 1px solid var(--line); }
.project-form label { display: grid; gap: 10px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.project-form input, .project-form select, .project-form textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line-bright); border-radius: 0; outline: 0; background: transparent; color: var(--white); font: inherit; font-size: 16px; resize: vertical; }
.project-form input, .project-form select { min-height: 48px; }
.project-form textarea { padding-block: 12px; }
.project-form select option { background: var(--ink-soft); }
.project-form input:focus, .project-form select:focus, .project-form textarea:focus { border-color: var(--cyan); box-shadow: 0 1px 0 var(--cyan); }
.project-form__message { grid-column: 1 / -1; }
.project-form__status { align-self: center; margin: 0; color: var(--muted); font-size: 11px; }
.project-form__status.is-success { color: var(--mint); }
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 120px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.site-footer .brand { color: var(--white); }
.site-footer p:last-child { justify-self: end; }

.page-main { overflow: hidden; }
.page-hero { position: relative; min-height: 78svh; display: grid; align-items: end; padding-block: 180px 90px; overflow: hidden; background: radial-gradient(circle at 72% 30%, rgba(20,100,255,.22), transparent 30%), #030817; }
.page-hero::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(#000, transparent); }
.page-hero__inner { position: relative; }
.page-hero h1 { max-width: 1050px; font-size: clamp(64px, 8vw, 116px); }
.page-hero__lead { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; margin-top: 70px; padding-top: 26px; border-top: 1px solid var(--line); }
.page-hero__lead p { max-width: 560px; margin: 0; color: var(--muted); font-size: 18px; }
.page-hero__lead p:last-child { justify-self: end; font-size: 11px; text-transform: uppercase; }
.page-section { padding-block: 150px; }
.page-section--soft { background: #f0f4fb; color: #071026; }
.page-section--soft .eyebrow, .page-section--soft em { color: #1558db; }
.page-section__head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 8%; margin-bottom: 80px; }
.page-section__head > p { max-width: 480px; margin: 0; color: var(--muted); font-size: 17px; }
.page-section--soft .page-section__head > p { color: #506078; }
.editorial-image { margin: 0; overflow: hidden; }
.editorial-image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.08); }
.work-feature { display: grid; grid-template-columns: 1.15fr .85fr; gap: 8%; align-items: center; }
.work-feature .editorial-image { min-height: 720px; }
.work-feature__copy dl { display: grid; grid-template-columns: 110px 1fr; gap: 16px 30px; margin: 44px 0; padding-block: 30px; border-block: 1px solid currentColor; }
.work-feature__copy dt { color: var(--cyan); font-size: 10px; text-transform: uppercase; }.work-feature__copy dd { margin: 0; color: var(--muted); }
.service-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.service-detail { min-height: 350px; padding: 42px; background: var(--ink); }
.service-detail > span { color: var(--cyan); font-size: 11px; }.service-detail h2 { margin: 65px 0 20px; font-size: 34px; }.service-detail p { max-width: 470px; color: var(--muted); }
.service-detail ul { padding: 0; list-style: none; color: #b6c5dc; font-size: 13px; }.service-detail li { padding-block: 7px; border-top: 1px solid var(--line); }
.studio-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 7%; align-items: center; }
.studio-grid .editorial-image { min-height: 700px; }.studio-grid__copy > p { color: var(--muted); font-size: 18px; }.studio-grid__principles { display: grid; gap: 0; margin-top: 50px; border-top: 1px solid var(--line); }.studio-grid__principles p { display: grid; grid-template-columns: 40px 1fr; margin: 0; padding-block: 20px; border-bottom: 1px solid var(--line); }
.contact-page-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9%; }

.reveal { opacity: 0; transform: translateY(36px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--delay, 0) * 110ms); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.no-js .reveal { opacity: 1; transform: none; }

@media (max-width: 980px) {
  :root { --shell: min(100% - 48px, 860px); }
  .site-header { padding-inline: 24px; }
  .desktop-nav, .header-cta { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .language-switch { right: 82px; }
  .menu-toggle { display: grid; width: 42px; height: 42px; place-items: center; justify-self: end; border: 1px solid var(--line); border-radius: 50%; background: transparent; }
  .menu-toggle span { position: absolute; width: 15px; height: 1px; background: currentColor; transition: transform 250ms ease; }
  .menu-toggle span:last-child { transform: translateY(5px); }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
  .mobile-nav { position: fixed; inset: 68px 0 0; display: flex; flex-direction: column; gap: 0; padding: 50px 24px; transform: translateX(100%); background: rgba(3,8,23,.98); transition: transform 450ms var(--ease); }
  .mobile-nav.is-open { transform: translateX(0); }
  .mobile-nav a { padding-block: 18px; border-bottom: 1px solid var(--line); font-size: 26px; }
  .hero h1 { font-size: 72px; }
  .hero__intro { padding-left: 18%; }
  .hero__actions { align-items: flex-start; flex-direction: column; }
  .story { grid-template-columns: 1fr; gap: 70px; }
  .story__sticky { position: static; }
  .chapter { min-height: auto; padding-block: 100px; }
  .capability { grid-template-columns: 50px 1fr 44px; }
  .capability > p:nth-child(3) { grid-column: 2; }
  .signature { min-height: 900px; }
  .signature__scene { left: 70%; width: 62vw; opacity: .76; }
  .signature__copy h2, .media-motion h2 { font-size: 56px; }
  .case-study__interface { width: min(560px, 74vw); }
  .case-study__copy h2 { font-size: 130px; }
  .case-study__details { align-items: start; flex-direction: column; }
  .case-study__brief { max-width: none; }
  .metrics { grid-template-columns: 1fr; }
  .metric { min-height: 220px; }
  .metric p { margin-top: 60px; }
  .media-motion__heading { display: block; }
  .media-motion__heading > p { margin-top: 28px; }
  .media-panels { height: 560px; gap: 9px; }
  .studio-section { grid-template-columns: 1fr; gap: 70px; }.studio-section__media { min-height: 560px; }.studio-section__media img { min-height: 560px; }
  .contact__intro { grid-template-columns: 1fr; gap: 30px; }
  .page-section__head, .work-feature, .studio-grid, .contact-page-grid { grid-template-columns: 1fr; gap: 60px; }
}

@media (max-width: 640px) {
  :root { --shell: calc(100% - 36px); }
  .site-header { min-height: 68px; padding-inline: 18px; }
  .hero { min-height: 820px; }
  .hero__content { min-height: 750px; padding-block: 120px 145px; }
  .hero h1 { font-size: 48px; line-height: .95; }
  .hero__intro { display: block; margin-top: 34px; padding-left: 0; }
  .hero__intro > p { font-size: 16px; }
  .hero__intro .button { margin-top: 28px; }
  .hero__actions { gap: 20px; margin-top: 28px; }.hero__intro .hero__actions .button { margin-top: 0; }
  .hero__foot { bottom: 24px; grid-template-columns: 1fr auto; }
  .hero__foot p:nth-child(2) { display: none; }
  .hero__grid { background-size: 54px 54px; }
  .story { padding-block: 110px; }
  .story h2, .section-heading h2, .impact h2, .contact h2 { font-size: 43px; line-height: .96; }
  .chapter { grid-template-columns: 32px 1fr; padding-block: 80px; }
  .chapter h3 { font-size: 29px; }
  .chapter__diagram { height: 140px; }
  .capabilities { padding-block: 110px; }
  .section-heading { display: block; margin-bottom: 60px; }
  .capability { grid-template-columns: 34px minmax(0,1fr) 32px; gap: 16px; min-height: 190px; }
  .capability h3 { overflow-wrap: anywhere; font-size: 24px; }
  .capability:hover { padding-inline: 0; }
  .signature { min-height: 850px; align-items: start; padding-top: 110px; }
  .signature__copy h2, .media-motion h2 { font-size: 43px; }
  .signature__copy > p:last-child { max-width: 310px; }
  .signature__scene { left: 50%; top: 67%; width: 110vw; opacity: .88; }
  .signature__coordinate { right: 18px; bottom: 24px; }
  .case-study { min-height: 120svh; }
  .case-study__stage { min-height: 720px; }
  .case-study__interface { width: 92vw; height: 250px; transform: translate(-50%,-46%) perspective(900px) rotateY(-6deg) rotateX(3deg); }
  .interface__body { grid-template-columns: 112px 1fr; }.interface__rail button { min-height: 45px; padding-inline: 10px; font-size: 8px; }.interface__chart { gap: 10px; padding: 22px 18px 12px; }.interface__status { min-height: 45px; padding: 9px 12px; font-size: 8px; }
  .case-study__copy { padding-block: 100px 48px; }
  .case-study__copy h2 { margin-top: auto; margin-bottom: 190px; font-size: 76px; }
  .case-study__details { display: block; }
  .case-study__brief { grid-template-columns: 1fr; gap: 10px; }.case-study__brief p { font-size: 11px; }.case-study__brief span { display: inline; margin-right: 8px; }
  .case-study__details .text-link { margin-top: 22px; }
  .impact { padding-block: 110px; }
  .impact__intro { display: block; }
  .metrics { margin-top: 64px; }
  .metric { min-height: 190px; padding: 30px; }
  .metric strong { font-size: 58px; }
  .metric p { margin-top: 48px; }
  .media-motion { padding-block: 110px 130px; }
  .media-panels { width: calc(100% - 18px); grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; height: 520px; margin-top: 70px; overflow: hidden; }
  .media-panel { min-width: 0; }
  .media-panel figcaption { inset-inline: 8px; }
  .media-panel figcaption { font-size: 0; }.media-panel figcaption span { font-size: 10px; }
  .studio-section { padding-block: 110px; }.studio-section__media, .studio-section__media img { min-height: 480px; }.studio-section__copy h2, .page-section h2 { font-size: 43px; }
  .manifesto { min-height: 720px; padding-inline: 20px; }
  .manifesto__halo { width: 120vw; }
  .manifesto blockquote { font-size: 38px; }
  .contact { padding-block: 120px 70px; }
  .contact__row { display: block; }
  .contact__row .button { margin-top: 48px; }
  .project-form { grid-template-columns: 1fr; margin-top: 64px; }.project-form__message { grid-column: auto; }.project-form__status { order: 4; }
  .contact__meta { grid-template-columns: 1fr; gap: 24px; margin-top: 80px; }
  .contact__meta p:last-child { justify-self: start; text-align: left; }
  .site-footer { grid-template-columns: 1fr; gap: 12px; padding-block: 34px; }
  .site-footer p { margin: 0; }
  .site-footer p:last-child { justify-self: start; }
  .page-hero { min-height: 700px; padding-block: 140px 70px; }.page-hero h1 { font-size: 52px; }.page-hero__lead { grid-template-columns: 1fr; gap: 24px; margin-top: 46px; }.page-hero__lead p:last-child { justify-self: start; }.page-section { padding-block: 110px; }.page-section__head { margin-bottom: 55px; }.service-grid { grid-template-columns: 1fr; }.service-detail { min-height: 300px; padding: 30px; }.service-detail h2 { margin-top: 50px; font-size: 29px; }.work-feature .editorial-image, .studio-grid .editorial-image { min-height: 480px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .case-study__interface.reveal { transform: translate(-50%,-50%) perspective(1100px) rotateY(-9deg) rotateX(5deg); }
  .signal-strip__track { transform: none; }
  .statement-word { opacity: 1; filter: none; transform: none; }
  .signature__scene { transform: translate(-50%,-50%) !important; }
  .media-panel { transform: none !important; }
  .media-panel { opacity: 1; }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .case-study__interface.reveal { transform: translate(-50%,-46%) perspective(900px) rotateY(-6deg) rotateX(3deg); }
}