/* ==========================================================================
   EUZON IT CONSULTING SERVICES — FZCO
   Design System & Global Stylesheet
   Dark-mode-first · Luxury enterprise technology aesthetic
   Brand: Euzon Blue #1CA9E0 · Euzon Mint #8AC891
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand */
  --blue:        #1CA9E0;
  --blue-bright: #3ABDF0;
  --blue-deep:   #0E7FB5;
  --mint:        #8AC891;
  --mint-bright: #A6DCAC;

  /* Surfaces (near-black with cool cast) */
  --bg:          #05080C;
  --bg-2:        #080C12;
  --surface:     #0B1119;
  --surface-2:   #0F1722;
  --surface-3:   #15202E;
  --line:        rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);

  /* Ink */
  --ink:         #EAF1F8;
  --ink-soft:    #B8C6D6;
  --ink-mute:    #76879A;
  --ink-faint:   #4A5969;

  /* Accent gradients */
  --grad-brand:  linear-gradient(120deg, var(--blue) 0%, var(--mint) 100%);
  --grad-blue:   linear-gradient(135deg, var(--blue-bright), var(--blue-deep));
  --glow-blue:   0 0 80px -20px rgba(28,169,224,0.55);
  --glow-mint:   0 0 80px -20px rgba(138,200,145,0.45);

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* Rhythm */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(56px, 7vw, 104px);
  --radius: 18px;
  --radius-lg: 28px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  letter-spacing: -0.011em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
::selection { background: rgba(28,169,224,0.30); color: #fff; }

/* Ambient grain + base radial field */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(1200px 700px at 75% -10%, rgba(28,169,224,0.10), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(138,200,145,0.06), transparent 55%);
  pointer-events: none; z-index: 0;
}
/* Film grain texture — adds physical depth to the flat dark surfaces */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.034;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px; background-repeat: repeat;
}
/* Animated ambient orbs — create continuous living atmosphere through scroll */
.scene-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sb-orb { position: absolute; border-radius: 50%; will-change: transform; }
.sb-a {
  width: 900px; height: 700px; top: -260px; right: -80px;
  background: radial-gradient(ellipse, rgba(28,169,224,.13) 0%, transparent 65%);
  filter: blur(120px); animation: orb-a 28s ease-in-out infinite;
}
.sb-b {
  width: 720px; height: 880px; bottom: 8%; left: -220px;
  background: radial-gradient(ellipse, rgba(138,200,145,.09) 0%, transparent 65%);
  filter: blur(130px); animation: orb-b 36s ease-in-out infinite;
}
.sb-c {
  width: 580px; height: 580px; top: 42%; right: 3%;
  background: radial-gradient(ellipse, rgba(28,169,224,.08) 0%, transparent 65%);
  filter: blur(110px); animation: orb-c 22s ease-in-out infinite;
}
.sb-d {
  width: 480px; height: 420px; top: 72%; left: 28%;
  background: radial-gradient(ellipse, rgba(138,200,145,.07) 0%, transparent 65%);
  filter: blur(100px); animation: orb-d 30s ease-in-out infinite;
}
@keyframes orb-a {
  0%,100% { transform: translate(0,0) scale(1); }
  35%      { transform: translate(-90px,150px) scale(1.12); }
  70%      { transform: translate(70px,-70px) scale(0.88); }
}
@keyframes orb-b {
  0%,100% { transform: translate(0,0) scale(1); }
  40%      { transform: translate(130px,-110px) scale(1.18); }
  80%      { transform: translate(-55px,90px) scale(0.9); }
}
@keyframes orb-c {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-140px,80px) scale(1.22); }
}
@keyframes orb-d {
  0%,100% { transform: translate(0,0) scale(1); }
  45%      { transform: translate(90px,-130px) scale(1.15); }
  90%      { transform: translate(-45px,55px) scale(0.85); }
}
@media (prefers-reduced-motion: reduce) { .sb-orb { animation: none !important; } }
@media (max-width: 860px) { .sb-b, .sb-d { display: none; } }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 1; }
section { position: relative; }
.section-pad { padding-block: var(--section-y); }
.grid { display: grid; gap: clamp(20px, 3vw, 40px); }

/* ---------- Typography ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
h1.display { font-size: clamp(2.6rem, 7vw, 6rem); }
h2.display { font-size: clamp(2rem, 5vw, 4rem); }
h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.85rem); letter-spacing: -0.02em; line-height: 1.15; }

.kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blue-bright);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 26px;
}
.kicker::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--blue), transparent); }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--ink-soft); max-width: 60ch; line-height: 1.55; }
.muted { color: var(--ink-mute); }
.grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mint-text { color: var(--mint); }

/* ---------- Buttons ---------- */
.btn {
  --pad-y: 14px; --pad-x: 28px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 100px;
  font-weight: 500; font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s;
  will-change: transform;
}
.btn svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.btn-primary { background: var(--blue); color: #04121b; box-shadow: var(--glow-blue); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 90px -16px rgba(28,169,224,0.8); }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--blue); background: rgba(28,169,224,0.06); transform: translateY(-2px); }
.btn-text { color: var(--blue-bright); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.btn-text svg { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.btn-text:hover svg { transform: translateX(5px); }

/* ---------- Skip link (CSP-safe, CSS-only) ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; padding: 10px 16px; background: var(--surface); border: 1px solid var(--blue); border-radius: 8px; }
.skip-link:focus { left: 16px; top: 16px; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s var(--ease), backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(5,8,12,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.04em; }
.brand .logo-svg { height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  position: relative; padding: 9px 15px; font-size: 0.9rem; color: var(--ink-soft);
  border-radius: 8px; transition: color .25s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 1px;
  background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 10px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s var(--ease); }

.mobile-menu {
  position: fixed; inset: 76px 0 0; z-index: 99;
  background: rgba(5,8,12,0.97); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; padding: 32px var(--gutter);
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform .5s var(--ease), opacity .4s;
}
.mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-menu a { padding: 18px 0; font-size: 1.4rem; font-family: var(--font-display); border-bottom: 1px solid var(--line); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-start; padding-top: clamp(220px, 30vh, 340px); padding-bottom: clamp(80px, 10vh, 140px); }
/* The hero's universe doesn't stop at the fold — it drifts on behind the
   trust strip and the opening of the Vision manifesto, then dissolves. */
#hero-canvas {
  position: absolute; inset: 0; width: 100%;
  height: calc(100% + 46vh);
  z-index: 0; opacity: 0.95; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0,0,0,0.5) 82%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 58%, rgba(0,0,0,0.5) 82%, transparent 99%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 130px);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent 55%, var(--bg) 100%);
}
.hero .wrap { z-index: 2; }
.hero h1 { max-width: 18ch; margin-bottom: 30px; }
.hero .lead { margin-bottom: 42px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-stats { display: flex; gap: clamp(28px, 5vw, 64px); margin-top: 84px; flex-wrap: wrap; }
.hero-stat .num { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -0.03em; }
.hero-stat .lbl { font-size: 0.82rem; color: var(--ink-mute); margin-top: 4px; }


/* Marquee logos / trust strip */
.trust { position: relative; z-index: 2; background: var(--bg); border-block: 1px solid var(--line); padding-block: 30px; overflow: hidden; }
.trust-label { text-align: center; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 26px; }
.marquee { display: flex; align-items: center; gap: clamp(48px, 5vw, 82px); width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover { animation-play-state: paused; }
/* Uniform canvas height on every asset guarantees a perfectly aligned baseline;
   optical balancing is baked into each image, so widths vary naturally. */
.marquee img {
  height: clamp(30px, 3vw, 42px); width: auto; display: block; flex: none;
  opacity: 0.42; transition: opacity 0.4s var(--ease);
}
.marquee:hover img { opacity: 0.3; }
.marquee img:hover { opacity: 0.9; }
/* Feather the strip into the page edges */
.trust .marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 40px 56px; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Section header ---------- */
.sec-head { max-width: 720px; margin-bottom: clamp(48px, 6vw, 84px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .kicker { justify-content: center; }
.sec-head p { margin-top: 22px; }

/* ---------- Reveal animations (driven by GSAP, graceful fallback) ---------- */
.reveal { opacity: 0; transform: translateY(34px); }
.is-in .reveal, .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Per-section ambient glow ---------- */
#vision    { background-image: radial-gradient(80% 60% at 82% 22%, rgba(28,169,224,.07), transparent); }
#solutions { background-image: radial-gradient(70% 80% at 14% 58%, rgba(138,200,145,.05), transparent); }
#ai        { background-image: radial-gradient(80% 70% at 52% 88%, rgba(28,169,224,.07), transparent); }
#impact    { background-image: radial-gradient(90% 80% at 50% 50%, rgba(28,169,224,.10), transparent); }
#why       { background-image: radial-gradient(70% 80% at 78% 72%, rgba(138,200,145,.06), transparent); }
#leadership { background-image: radial-gradient(60% 60% at 28% 28%, rgba(28,169,224,.05), transparent); }

/* ---------- Cards / Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 40px); overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s, background .5s;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(28,169,224,0.5), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .5s;
}
.card:hover { transform: translateY(-5px); border-color: rgba(28,169,224,.28); background: var(--surface-2); box-shadow: 0 24px 64px -24px rgba(28,169,224,.22), 0 0 0 1px rgba(28,169,224,.08); }
.card:hover::before { opacity: 1; }
.card::before { opacity: 0.18; }
.card .glow { position: absolute; width: 280px; height: 280px; border-radius: 50%; filter: blur(60px); opacity: 0; transition: opacity .6s; pointer-events: none; }
.card:hover .glow { opacity: .14; }

.col-12{grid-column:span 12} .col-8{grid-column:span 8} .col-6{grid-column:span 6}
.col-5{grid-column:span 5} .col-7{grid-column:span 7} .col-4{grid-column:span 4} .col-3{grid-column:span 3}

.card .icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(28,169,224,0.16), rgba(138,200,145,0.08));
  border: 1px solid var(--line); margin-bottom: 24px;
}
.card .icon svg { width: 24px; height: 24px; stroke: var(--blue-bright); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--ink-mute); font-size: 0.97rem; }
.card .meta { margin-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; padding: 5px 11px; border-radius: 100px; border: 1px solid var(--line); color: var(--ink-soft); background: rgba(255,255,255,0.02); }

/* ---------- Vision split ---------- */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.split.rev { grid-template-columns: 0.95fr 1.05fr; }
.visual-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  background: var(--surface); aspect-ratio: 4/3.4;
}
.visual-frame canvas, .visual-frame svg { width: 100%; height: 100%; }

/* ---------- Feature list ---------- */
.flist { display: grid; gap: 2px; margin-top: 36px; }
.fitem { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); align-items: start; }
.fitem .n { font-family: var(--font-mono); font-size: 0.78rem; color: var(--blue-bright); padding-top: 3px; }
.fitem h4 { font-size: 1.05rem; font-weight: 600; margin-bottom: 5px; }
.fitem p { color: var(--ink-mute); font-size: 0.93rem; }

/* ---------- Process / pipeline flow ---------- */
.pipe-flow { position: relative; }
.pipe-track-wrap {
  position: absolute; top: 27px; left: calc(12.5% + 1px); right: calc(12.5% + 1px);
  pointer-events: none; z-index: 0;
}
.pipe-stages {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; position: relative; z-index: 1;
}
.pstage { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 18px 0; }
.pstage-node {
  width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  position: relative; margin-bottom: 20px; flex-shrink: 0;
  transition: transform .4s var(--ease);
}
.pstage:hover .pstage-node { transform: translateY(-4px); }
.pstage-blue {
  border: 1.5px solid rgba(28,169,224,.55);
  background: radial-gradient(circle at 40% 35%, rgba(28,169,224,.18) 0%, rgba(28,169,224,.04) 70%);
  box-shadow: 0 0 18px rgba(28,169,224,.22), inset 0 0 12px rgba(28,169,224,.08);
}
.pstage-mint {
  border: 1.5px solid rgba(138,200,145,.5);
  background: radial-gradient(circle at 40% 35%, rgba(138,200,145,.16) 0%, rgba(138,200,145,.04) 70%);
  box-shadow: 0 0 18px rgba(138,200,145,.2), inset 0 0 12px rgba(138,200,145,.07);
}
.pstage-num { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; letter-spacing: .04em; color: #1CA9E0; }
.pstage-num-mint { color: #8AC891; }
.pstage-tag {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 10px; padding: 3px 10px; border-radius: 20px;
}
.pstage-tag-blue { color: #1CA9E0; background: rgba(28,169,224,.08); border: 1px solid rgba(28,169,224,.2); }
.pstage-tag-mint { color: #8AC891; background: rgba(138,200,145,.08); border: 1px solid rgba(138,200,145,.2); }
.pstage h4 { font-size: 1.0rem; margin-bottom: 8px; line-height: 1.35; }
.pstage p  { color: var(--ink-mute); font-size: 0.88rem; line-height: 1.6; }

/* ---------- Automation diagram ---------- */
.auto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,70px); align-items: center; }

/* ---------- Metrics (oversized, baseline-aligned) ---------- */
.metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 60px); align-items: end;
  border-top: 1px solid var(--line); padding-top: clamp(40px, 5vw, 72px);
}
/* Each metric is a size container: the number scales with its own column
   (cqw), so the widest value (99.9%) can never outgrow it at any width. */
.metric { position: relative; min-width: 0; container-type: inline-size; }
.metric .mv {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 29cqw, 6.4rem);
  white-space: nowrap;
  font-weight: 500; letter-spacing: -0.05em; line-height: 0.82;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 36px rgba(28,169,224,.28));
  display: block; margin-bottom: 26px;
}
.metric .ml { color: var(--ink); font-size: clamp(0.95rem,1.15vw,1.1rem); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
.metric .md { color: var(--ink-faint); font-size: 0.82rem; line-height: 1.55; max-width: 26ch; }
/* Fallback for browsers without container queries: conservative viewport sizing. */
@supports not (container-type: inline-size) {
  .metric .mv { font-size: clamp(2.2rem, 4.4vw, 4.6rem); }
}

/* ---------- AI feature panels ---------- */
.ai-feats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.ai-feat {
  position: relative; overflow: hidden;
  padding: clamp(32px,4vw,56px) clamp(24px,3vw,44px);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease);
}
.ai-feat:hover { background: rgba(28,169,224,.025); }
.ai-feat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--blue), var(--mint));
  transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease);
}
.ai-feat:hover::before { transform: scaleY(1); }
.ai-icon { width: 38px; height: 38px; margin-bottom: 26px; }
.ai-icon svg { width: 100%; height: 100%; stroke: var(--blue-bright); }
.ai-num { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 16px; opacity: .75; }
.ai-feat h3 { font-size: clamp(1.15rem,2vw,1.5rem); margin-bottom: 14px; }
.ai-feat p { color: var(--ink-mute); font-size: 0.93rem; line-height: 1.6; }
.ai-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }

/* ---------- Industries ---------- */
.ind-list { border-top: 1px solid var(--line); }
.ind-row {
  display: grid; grid-template-columns: 56px 1fr auto;
  align-items: center; gap: clamp(16px,3vw,52px);
  padding: clamp(22px,2.8vw,36px) 0;
  border-bottom: 1px solid var(--line);
  position: relative; transition: background .4s var(--ease);
}
.ind-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--blue), var(--mint));
  transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease);
}
.ind-row:hover { background: rgba(28,169,224,.028); }
.ind-row:hover::before { transform: scaleY(1); }
.ind-n { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); letter-spacing: .04em; }
.ind-body h4 { font-size: clamp(1.05rem,1.8vw,1.4rem); margin-bottom: 5px; transition: color .3s; }
.ind-row:hover .ind-body h4 { color: var(--blue-bright); }
.ind-body p { color: var(--ink-mute); font-size: 0.88rem; }
.ind-caps { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ind-caps span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: .04em; color: var(--ink-faint); padding: 4px 10px; border-radius: 100px; border: 1px solid var(--line); transition: .3s; }
.ind-row:hover .ind-caps span { color: var(--ink-soft); border-color: rgba(28,169,224,.3); }

/* ---------- Why / comparison ---------- */
.why-list { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.why-item {
  position: relative; overflow: hidden;
  padding: clamp(30px,4vw,52px) clamp(24px,3vw,42px);
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  transition: background .4s var(--ease);
}
.why-item:hover { background: rgba(28,169,224,.025); }
.why-item::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--blue), var(--mint));
  transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease);
}
.why-item:hover::after { transform: scaleY(1); }
.wi-n {
  font-family: var(--font-display); font-size: 4.5rem; font-weight: 700; line-height: 1;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .07; position: absolute; top: 12px; right: 16px; pointer-events: none; transition: opacity .4s;
}
.why-item:hover .wi-n { opacity: .14; }
.why-item h4 { font-size: 1.15rem; margin-bottom: 10px; position: relative; }
.why-item p { color: var(--ink-mute); font-size: 0.93rem; line-height: 1.6; position: relative; }

/* ---------- Tech leadership / stack ---------- */
.stack-cats { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stack-cat {
  padding: clamp(24px,3vw,40px) clamp(20px,2.5vw,36px);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease);
}
.stack-cat:hover { background: rgba(28,169,224,.02); }
.sc-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 20px; opacity: .8; }
.sc-items { display: flex; flex-direction: column; }
.sc-item { font-size: 0.9rem; color: var(--ink-mute); padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.04); transition: color .25s; }
.sc-item:last-child { border-bottom: none; padding-bottom: 0; }
.stack-cat:hover .sc-item { color: var(--ink-soft); }

/* ---------- CTA / Contact ---------- */
.cta {
  position: relative; border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: clamp(44px, 6vw, 90px); overflow: hidden; text-align: center;
  background: radial-gradient(120% 140% at 50% 0%, rgba(28,169,224,0.12), transparent 60%), var(--surface);
}
.cta h2 { max-width: 16ch; margin-inline: auto; margin-bottom: 22px; }
.cta .lead { margin-inline: auto; margin-bottom: 38px; text-align: center; }

.contact-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(36px, 5vw, 78px); align-items: start; }
.contact-intro { position: relative; }
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-size: 0.82rem; color: var(--ink-mute); margin-bottom: 8px; letter-spacing: 0.01em; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 15px 18px; background-color: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; color: var(--ink); font: inherit; font-size: 0.98rem; transition: border-color .3s, background-color .3s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--blue); background-color: var(--surface); }
.form-field textarea { resize: vertical; min-height: 150px; }
/* Clean custom dropdown chevron — the native arrow is removed. */
.form-field select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 46px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2376879A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 14px;
}
.form-field select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233ABDF0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.form-field select option { background: var(--surface); color: var(--ink); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-block: 18px 26px; font-size: 0.84rem; color: var(--ink-mute); }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); flex-shrink: 0; }
.consent a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 3px; }
.form-note { font-size: 0.8rem; color: var(--ink-faint); margin-top: 16px; }
.form-success { display: none; padding: 16px; border: 1px solid var(--mint); border-radius: 12px; background: rgba(138,200,145,0.08); color: var(--mint-bright); font-size: 0.92rem; margin-top: 16px; }
.form-success.show { display: block; }
/* Honeypot — visually removed, off the tab order, ignored by AT. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.h-captcha { margin: 18px 0 4px; }
.form-error { display: none; padding: 14px 16px; border: 1px solid rgba(224,86,79,0.5); border-radius: 12px; background: rgba(224,86,79,0.08); color: #f0938d; font-size: 0.92rem; margin-top: 16px; }
.form-error.show { display: block; }
.btn[data-busy] { opacity: 0.75; pointer-events: none; }

.contact-info { display: grid; gap: 28px; align-content: start; }
.cinfo { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cinfo .lbl { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 12px; }
.cinfo a { color: var(--ink); }
.cinfo a:hover { color: var(--blue-bright); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-top: clamp(60px, 8vw, 110px); padding-bottom: 50px; margin-top: var(--section-y); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 60px; border-bottom: 1px solid var(--line); }
.footer-brand .logo-svg { height: 30px; margin-bottom: 24px; }
.footer-wordmark { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; letter-spacing: -0.04em; color: var(--ink); margin-bottom: 24px; }
.footer-brand p { color: var(--ink-mute); font-size: 0.92rem; max-width: 34ch; }
.footer-brand .addr { margin-top: 22px; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.7; }
.footer-col h5 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 20px; }
.footer-col a { display: block; padding: 7px 0; color: var(--ink-mute); font-size: 0.92rem; transition: color .25s; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 34px; flex-wrap: wrap; }
.footer-bottom p { font-size: 0.82rem; color: var(--ink-faint); }
.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-legal a { font-size: 0.82rem; color: var(--ink-mute); }
.footer-legal a:hover { color: var(--ink); }

/* ---------- Cookie banner ---------- */
.cookie {
  position: fixed; bottom: 22px; left: 22px; right: 22px; max-width: 480px; z-index: 200;
  background: rgba(11,17,25,0.92); backdrop-filter: blur(20px); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 26px; box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8);
  transform: translateY(140%); opacity: 0; transition: transform .6s var(--ease), opacity .5s;
}
.cookie.show { transform: translateY(0); opacity: 1; }
.cookie h4 { font-size: 1.05rem; margin-bottom: 10px; }
.cookie p { font-size: 0.86rem; color: var(--ink-mute); margin-bottom: 18px; }
.cookie p a { color: var(--blue-bright); text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions .btn { --pad-y: 11px; --pad-x: 20px; font-size: 0.85rem; }
.cookie-prefs { margin-top: 16px; display: none; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.cookie-prefs.show { display: flex; }
.cookie-pref { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 0.84rem; }
.cookie-pref small { color: var(--ink-faint); display: block; font-size: 0.76rem; }
.switch { position: relative; width: 40px; height: 22px; background: var(--surface-3); border-radius: 100px; transition: background .3s; flex-shrink: 0; cursor: pointer; }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background: var(--ink-mute); transition: .3s var(--ease); }
.switch.on { background: var(--blue); } .switch.on::after { left: 20px; background: #fff; }
.switch.locked { opacity: .5; cursor: not-allowed; }

/* ---------- Legal pages ---------- */
.legal-hero { padding-top: 150px; padding-bottom: 50px; border-bottom: 1px solid var(--line); }
.legal-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.legal-hero p { margin-top: 16px; color: var(--ink-mute); }
.legal-body { display: grid; grid-template-columns: 240px 1fr; gap: 60px; padding-top: 60px; }
.legal-toc { position: sticky; top: 100px; align-self: start; }
.legal-toc a { display: block; padding: 7px 0; font-size: 0.88rem; color: var(--ink-mute); border-left: 1px solid var(--line); padding-left: 16px; transition: .25s; }
.legal-toc a:hover, .legal-toc a.active { color: var(--ink); border-color: var(--blue); }
.legal-content h2 { font-family: var(--font-display); font-size: 1.6rem; margin-top: 48px; margin-bottom: 16px; scroll-margin-top: 100px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.15rem; margin-top: 28px; margin-bottom: 10px; }
.legal-content p, .legal-content li { color: var(--ink-soft); font-size: 0.97rem; margin-bottom: 14px; line-height: 1.7; }
.legal-content ul { margin: 0 0 18px 22px; list-style: disc; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 3px; }
.legal-content strong { color: var(--ink); }
.legal-content .note { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin: 24px 0; }
.legal-content table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.9rem; }
.legal-content th, .legal-content td { text-align: left; padding: 12px 14px; border: 1px solid var(--line); }
.legal-content th { background: var(--surface); color: var(--ink); font-weight: 600; }

/* ---------- Animated number ticker ---------- */
.count { font-variant-numeric: tabular-nums; }

/* ---------- Decorative grid background ---------- */
.gridlines { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%);
}

/* =========================================================
   NEW EDITORIAL SECTIONS — 2026 redesign
   ========================================================= */

/* ---------- Vision / Manifesto ---------- */
.s-vision { padding-block: clamp(48px, 6vw, 84px) clamp(96px, 13vw, 190px); position: relative; }
.sv-headline {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.5vw, 7.2rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.97;
  max-width: 22ch;
  margin-block: 28px clamp(44px, 6vw, 84px);
}
/* Beliefs descend as a diagonal cascade — a step down into the story,
   not three cells in a row. Accent bars replace hairline cages. */
.sv-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4.5vw, 72px);
}
.sv-cols > div { max-width: 34ch; }
.sv-cols > div::before {
  content: ""; display: block; width: 30px; height: 2px;
  background: var(--grad-brand); border-radius: 2px; margin-bottom: 18px;
}
/* margins, not transforms — the GSAP reveal owns each item's transform */
.sv-cols > div:nth-child(2) { margin-top: clamp(30px, 4.5vw, 72px); }
.sv-cols > div:nth-child(3) { margin-top: clamp(60px, 9vw, 144px); }
.sv-cols h4 { font-size: 1.0rem; font-weight: 600; margin-bottom: 10px; line-height: 1.35; }
.sv-cols p { color: var(--ink-mute); font-size: 0.9rem; line-height: 1.65; }

/* ---------- Capabilities ---------- */
.s-caps { padding-block: var(--section-y); overflow-x: clip; }
.caps-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: clamp(40px, 5vw, 72px); flex-wrap: wrap; }
.caps-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.8vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 28ch;
}
/* Spotlight roster + morphing particle sculpture. The active capability
   ignites with the brand gradient while the sculpture on the right
   reassembles into that capability's formation. */
.cape-layout {
  display: grid; grid-template-columns: 1.04fr 1fr;
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.cape-stage { position: relative; min-width: 0; z-index: 0; }
/* Oversized and unboxed: the sculpture drifts up into the manifesto above
   and leans toward the viewport edge — an object in space, not a figure
   in a frame. */
.cape-stage canvas {
  display: block; width: 100%; aspect-ratio: 1/1.04;
  transform: translate(4%, -7%) scale(1.3);
  pointer-events: none;
}
.cape-list { position: relative; z-index: 1; }
.cape-list { display: flex; flex-direction: column; }
.cape-item { padding-block: clamp(16px, 2vw, 26px); cursor: pointer; }
.cape-item + .cape-item { border-top: 1px solid rgba(255,255,255,0.05); }
.cape-name {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.1vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.06;
  /* Space Grotesk's descent overflows a 1.0 line box; without this padding the
     background-clip:text fill (and the stroke) cut the tails off g, p, y. */
  padding-block: 0.04em 0.18em;
  width: fit-content;
  color: transparent;
  -webkit-text-stroke: 1px rgba(184,198,214,0.34);
  transition: -webkit-text-stroke-color 0.5s var(--ease);
}
.cape-item:hover:not(.is-open) .cape-name { -webkit-text-stroke-color: rgba(184,198,214,0.62); }
.cape-item.is-open .cape-name {
  -webkit-text-stroke-color: transparent;
  background: linear-gradient(100deg,
    var(--blue) 0%, var(--blue-bright) 34%,
    #B5E6F7 47%, #C4EBC9 55%,
    var(--mint) 70%, var(--mint) 100%);
  background-size: 235% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: tfGlare 7s ease-in-out infinite alternate;
}
/* Expansion via the 0fr -> 1fr grid trick: buttery height animation. */
.cape-reveal {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.65s var(--ease);
}
.cape-item.is-open .cape-reveal { grid-template-rows: 1fr; }
.cape-body { overflow: hidden; }
.cape-desc {
  font-size: clamp(0.98rem, 1.25vw, 1.15rem); color: var(--ink-soft); line-height: 1.62;
  max-width: 52ch; margin-top: clamp(18px, 2.2vw, 28px);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s var(--ease) 0.12s, transform 0.5s var(--ease) 0.12s;
}
.cape-tags {
  display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--blue-bright); opacity: 0; margin-top: 14px; padding-bottom: 4px;
  transition: opacity 0.5s var(--ease) 0.2s;
}
.cape-item.is-open .cape-desc { opacity: 1; transform: none; }
.cape-item.is-open .cape-tags { opacity: 0.75; }
@media (prefers-reduced-motion: reduce) {
  .cape-name { animation: none !important; transform: none !important; }
  .cape-reveal { transition: none; }
}

/* ---------- Engineering (code behind text) ---------- */
.s-engineering {
  position: relative;
  padding-block: clamp(72px, 9vw, 128px);
  overflow: hidden;
}
.eng-visual {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 56%;
  overflow: hidden;
  opacity: 0.5;
}
.eng-visual svg { width: 100%; height: 100%; }
/* Left gradient fades code into darkness */
.s-engineering::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--bg) 36%, rgba(5,8,12,0.82) 58%, transparent 78%);
  z-index: 1; pointer-events: none;
}
/* Top/bottom fades */
.s-engineering::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 8%, transparent 92%, var(--bg) 100%);
  z-index: 1; pointer-events: none;
}
.eng-text { position: relative; z-index: 2; }
.eng-content { max-width: 46%; }
.eng-headline {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.6vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.03;
  margin-block: 26px 22px;
}
.eng-body { font-size: clamp(1rem, 1.3vw, 1.18rem); color: var(--ink-soft); max-width: 42ch; line-height: 1.65; margin-bottom: 30px; }
.eng-list { list-style: none; border-top: 1px solid var(--line); }
.eng-list li {
  padding: 15px 0 15px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem; color: var(--ink-mute); line-height: 1.55;
  position: relative;
}
.eng-list li::before { content: '→'; position: absolute; left: 0; color: var(--blue-bright); font-size: 0.78rem; top: 17px; }

/* ---------- Transformation (sticky 400vh) ---------- */
.s-transform { position: relative; }
.tf-outer { height: 400vh; }
.tf-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--gutter);
  overflow: hidden;
}
.tf-sticky::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(28,169,224,.06), transparent);
  pointer-events: none; z-index: 0;
}
.tf-label-bar {
  position: absolute; top: clamp(28px, 4vh, 48px);
  left: var(--gutter); right: var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  z-index: 2;
}
.tf-counter { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); letter-spacing: 0.1em; }
.tf-sep { margin-inline: 4px; }
.tf-content { position: relative; flex: 1; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
.tf-stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; pointer-events: none;
  transform: translateX(48px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.tf-stage.tf-prev { opacity: 0; transform: translateX(-48px); }
.tf-stage.tf-active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.tf-ghost {
  font-family: var(--font-display);
  /* Height-driven: the letters fill the section, like a backdrop. */
  font-size: min(42vw, 82vh);
  font-weight: 600;
  line-height: 0.72;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  pointer-events: none; user-select: none;
  /* The letters are a window into this chapter's image (bottom layer); a
     brighter glare band sweeps across on top (animated), exactly as before —
     so the photo and the light merge inside the type. */
  /* Three layers clipped to the letters (top → bottom):
     1) the blue→mint glare band that sweeps across (kept, as site-wide);
     2) a heavy dark veil that pushes the photo deep into the background;
     3) the chapter's image — faint, but its shapes still read through. */
  background-image:
    linear-gradient(100deg, transparent 26%,
      rgba(58,175,236,0.24) 45%, rgba(120,208,172,0.18) 58%, transparent 78%),
    linear-gradient(rgba(7,19,32,0.85), rgba(7,19,32,0.85)),
    var(--tfimg, linear-gradient(rgba(28,169,224,0.12), rgba(138,200,145,0.12)));
  background-size: 260% 100%, cover, cover;
  background-position: 100% 0, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-text-stroke: 1px rgba(90,180,235,0.06);
  animation: tfGlareImg 16s ease-in-out infinite alternate;
  /* Symmetric edge fade — the word stays visible in the centre and dissolves
     softly into both margins, so no letter is ever cut off hard. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
/* Each chapter's word carries its own image behind the glare. */
.tfg-align     { --tfimg: url("../img/transform/align.jpg"); }
.tfg-architect { --tfimg: url("../img/transform/architect.jpg"); }
.tfg-build     { --tfimg: url("../img/transform/build.jpg"); }
.tfg-scale     { --tfimg: url("../img/transform/scale.jpg"); }
/* Glare sweeps the first (gradient) layer; the image layer holds at centre. */
@keyframes tfGlareImg {
  from { background-position: 100% 0, center, center; }
  to   { background-position: 0% 0, center, center; }
}
@keyframes tfGlare {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tf-ghost { animation: none; background-position: 50% 0, center, center; }
}
/* Keep the foreground copy above the image-filled ghost word. Absolutely
   positioned elements paint over static ones, so the text needs its own
   stacking context to sit on top. */
.tf-tag, .tf-title, .tf-desc { position: relative; z-index: 2; }
.tf-ghost { z-index: 1; }
.tf-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--blue-bright); margin-bottom: 22px;
}
.tf-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.5vw, 5.8rem);
  font-weight: 400; letter-spacing: -0.04em; line-height: 0.97;
  margin-bottom: 28px; max-width: 18ch;
}
.tf-desc { font-size: clamp(1rem, 1.3vw, 1.18rem); color: var(--ink-soft); max-width: 44ch; line-height: 1.65; }
.tf-dots {
  position: absolute; bottom: clamp(28px, 4vh, 48px);
  left: var(--gutter); display: flex; gap: 8px; z-index: 2;
}
.tf-dot {
  display: block; height: 2px; width: 22px;
  background: rgba(255,255,255,0.12); border-radius: 2px;
  transition: width 0.4s var(--ease), background 0.4s;
}
.tf-dot-active { width: 44px; background: var(--blue); }

/* ---------- Flow zone: one river of data behind two sections ----------
   The flow field is no longer trapped in a single section. It runs behind
   Automation AND the AI statement — half-hidden, discovered while
   scrolling — stitching the two chapters together. */
.flow-zone { position: relative; }
.flow-zone .auto-field {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.s-automation {
  position: relative;
  min-height: clamp(620px, 92vh, 960px);
  display: flex; align-items: center;
  padding-block: clamp(80px, 12vh, 150px);
}
/* Keep type legible on the calm left; let luminous flow dominate the right. */
.auto-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 6%, rgba(5,8,12,0.62) 40%, rgba(5,8,12,0.12) 66%, transparent 82%);
}
.auto-inner { position: relative; z-index: 2; width: 100%; }
.auto-headline {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.6vw, 5.6rem);
  font-weight: 400; letter-spacing: -0.04em; line-height: 0.98;
  margin-block: 24px 24px;
}
.auto-body {
  font-size: clamp(1.05rem, 1.4vw, 1.32rem);
  color: var(--ink-soft); line-height: 1.6; max-width: 40ch;
}
.auto-points {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(36px, 4.4vw, 60px);
  max-width: 880px;
}
.auto-points > div {
  padding: 0 clamp(22px, 2.2vw, 38px) 0 0;
}
.auto-points h4 {
  font-family: var(--font-display);
  font-size: 1.08rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 9px;
}
.auto-points p { font-size: 0.86rem; color: var(--ink-mute); line-height: 1.55; }

/* ---------- AI Statement ---------- */
.s-ai { padding-block: clamp(76px, 9.5vw, 136px); position: relative; }
/* Translucent veil: the flow field glimmers through behind the AI statement. */
#ai { background: linear-gradient(180deg, rgba(5,8,12,0.42), rgba(5,8,12,0.78) 60%, var(--bg) 100%); }
.ai-headline {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.5vw, 6.2rem);
  font-weight: 400; letter-spacing: -0.04em; line-height: 0.98;
  margin-block: 28px 24px; max-width: 24ch;
}
.ai-sub { font-size: clamp(1rem, 1.4vw, 1.22rem); color: var(--ink-soft); max-width: 52ch; line-height: 1.62; margin-bottom: clamp(48px, 7vw, 90px); }
.ai-three { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.ai-col {
  padding: clamp(30px, 4vw, 52px) clamp(24px, 3vw, 44px) clamp(30px, 4vw, 52px) 0;
  border-right: 1px solid var(--line);
}
.ai-col:nth-child(2) { padding-inline: clamp(24px, 3vw, 44px); }
.ai-col:last-child { border-right: none; padding-right: 0; padding-left: clamp(24px, 3vw, 44px); }
.ai-col-n { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 18px; opacity: 0.7; }
.ai-col h4 { font-size: clamp(1rem, 1.4vw, 1.3rem); font-weight: 600; margin-bottom: 12px; line-height: 1.3; }
.ai-col p { font-size: 0.91rem; color: var(--ink-mute); line-height: 1.65; }

/* ---------- Industries (large type) ---------- */
.s-industries { padding-block: var(--section-y); position: relative; overflow: clip; }
/* Matches the "What we do" header: kicker left, display-type statement right. */
.ind-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: clamp(40px, 5vw, 72px); flex-wrap: wrap; }
.ind-intro {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.8vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 28ch;
}
/* Sector panorama: six full-bleed vertical slats, like sections of a market
   skyline. Closed slats carry vertical type over a faint signature texture
   unique to each sector; the open slat breathes wide and reveals its three
   layers — texture, giant depth-word, content. A vocabulary used nowhere
   else on the page: vertical architecture instead of left-aligned rows. */
.ind-slabs {
  display: flex;
  height: clamp(480px, 62vh, 640px);
  margin-top: clamp(8px, 1.5vw, 24px);
}
.slab {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  cursor: pointer; outline-offset: -4px;
  border-left: 1px solid var(--line);
  transition: flex-grow 0.8s var(--ease);
}
.slab:first-child { border-left: none; }
.slab.is-open { flex-grow: 4.4; cursor: default; }

/* Layer 1 — signature texture per sector */
/* Duotone sector photo — appears only in the open slab, screen-blended so its
   dark half dissolves into the pattern and only the cool highlights emerge.
   Feathered toward the lower-left so it never fights the label and copy. */
.slab-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: 50% 42%;
  opacity: 0; transform: scale(1.09);
  mix-blend-mode: screen;
  transition: opacity 0.8s var(--ease), transform 1.1s var(--ease);
  /* Focus upper-right (toward the ghost word), dissolve in every direction so
     no hard rectangle survives and the lower-left copy stays on clean dark. */
  -webkit-mask-image: radial-gradient(135% 120% at 74% 30%, #000 26%, rgba(0,0,0,0.42) 60%, transparent 86%);
  mask-image: radial-gradient(135% 120% at 74% 30%, #000 26%, rgba(0,0,0,0.42) 60%, transparent 86%);
}
.slab.is-open .slab-photo { opacity: 0.9; transform: scale(1); }
.tex-0 .slab-photo { background-image: url("../img/industries/financial.jpg"); }
.tex-1 .slab-photo { background-image: url("../img/industries/government.jpg"); }
.tex-2 .slab-photo { background-image: url("../img/industries/healthcare.jpg"); }
.tex-3 .slab-photo { background-image: url("../img/industries/logistics.jpg"); }
.tex-4 .slab-photo { background-image: url("../img/industries/energy.jpg"); }
.tex-5 .slab-photo { background-image: url("../img/industries/retail.jpg"); }

.slab-tex {
  position: absolute; inset: 0; opacity: 0.45;
  transition: opacity 0.6s var(--ease);
  -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 30%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 2%, #000 30%, #000 78%, transparent 100%);
}
/* Pattern is the resting texture of a closed slat; the open slat shows only
   its photo, clean — no dots, no caption over the image. */
.slab.is-open .slab-tex { opacity: 0; }
.tex-0 .slab-tex { background: repeating-linear-gradient(90deg, rgba(28,169,224,0.075) 0 1px, transparent 1px 16px); }
.tex-1 .slab-tex { background-image: radial-gradient(rgba(28,169,224,0.11) 1px, transparent 1.6px); background-size: 22px 22px; }
.tex-2 .slab-tex { background: repeating-radial-gradient(circle at 50% 118%, rgba(138,200,145,0.075) 0 1px, transparent 1px 30px); }
.tex-3 .slab-tex { background: repeating-linear-gradient(45deg, rgba(28,169,224,0.065) 0 1px, transparent 1px 20px); }
.tex-4 .slab-tex { background: repeating-linear-gradient(0deg, rgba(138,200,145,0.08) 0 1px, transparent 1px 18px); }
.tex-5 .slab-tex {
  background-image: linear-gradient(rgba(28,169,224,0.055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(28,169,224,0.055) 1px, transparent 1px);
  background-size: 24px 24px;
}
/* light pooling in the open slat */
.slab.is-open::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 18% 100%, rgba(28,169,224,0.10), transparent 70%);
}
/* legibility scrim for the content layer */
.slab::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(5,8,12,0.82) 88%);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.slab.is-open::after { opacity: 1; }

/* Layer 2 — giant depth-word inside the open slat */

/* Closed state — vertical nameplate */
.slab-label {
  position: absolute; left: 50%; bottom: clamp(24px, 4vh, 44px);
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute); white-space: nowrap;
  transition: color 0.35s var(--ease), opacity 0.3s var(--ease);
}
.slab:hover .slab-label { color: var(--ink); }
.slab.is-open .slab-label { opacity: 0; }

/* Layer 3 — content, pinned so it never reflows during the breathe */
.slab-body {
  position: absolute; left: clamp(22px, 2.6vw, 46px); bottom: clamp(26px, 4.5vh, 52px);
  width: min(430px, 74vw); z-index: 1;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s var(--ease) 0.18s, transform 0.5s var(--ease) 0.18s;
  pointer-events: none;
}
.slab.is-open .slab-body { opacity: 1; transform: none; }
.slab-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.3vw, 2.3rem);
  font-weight: 500; letter-spacing: -0.03em; line-height: 1.08;
  margin-bottom: 12px;
}
.slab-title::before { content: ""; display: block; width: 30px; height: 2px; background: var(--grad-brand); border-radius: 2px; margin-bottom: 16px; }
.slab-desc { font-size: clamp(0.9rem, 1.05vw, 1rem); color: var(--ink-soft); line-height: 1.62; margin-bottom: 14px; }
.slab-foci { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--blue-bright); opacity: 0.75; }
.slab:focus-visible { outline: 1px solid rgba(28,169,224,0.5); }

@media (prefers-reduced-motion: reduce) {
  .slab, .slab-tex, .slab-body, .slab::after { transition: none; }
}

/* ---------- Impact / Metrics ---------- */
.s-impact { padding-block: var(--section-y); position: relative; }
/* Light field breaching the seam from the section above. */
.s-impact::before {
  content: ""; position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -50%);
  width: min(1100px, 92vw); height: 460px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(28,169,224,0.075), transparent 70%);
  pointer-events: none;
}
.imp-head { margin-bottom: clamp(48px, 6vw, 80px); }
.imp-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 4rem);
  font-weight: 400; letter-spacing: -0.035em; line-height: 1.05;
  margin-top: 20px;
}
.imp-note { margin-top: 20px; max-width: 56ch; font-size: 0.9rem; color: var(--ink-faint); line-height: 1.6; }

/* ---------- Why Euzon (manifesto) ---------- */
.s-why { padding-block: var(--section-y); }
.why-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.why-headline {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.6vw, 4rem);
  font-weight: 400; letter-spacing: -0.035em; line-height: 1.03;
  margin-block: 26px 26px;
}
.why-manifesto { font-size: clamp(1rem, 1.3vw, 1.18rem); color: var(--ink-soft); line-height: 1.72; margin-bottom: 20px; max-width: 44ch; }
.why-manifesto-sub { font-size: 0.93rem; color: var(--ink-mute); line-height: 1.65; max-width: 44ch; }
.why-right { border-top: 1px solid var(--line); }
.why-row {
  padding: clamp(16px, 2.2vw, 26px) 0; border-bottom: 1px solid var(--line);
}
.why-row h4 { font-size: 0.97rem; font-weight: 600; margin-bottom: 5px; }
.why-row p { font-size: 0.88rem; color: var(--ink-mute); line-height: 1.6; }

/* ---------- Technology leadership (interactive logo wall) ---------- */
/* overflow-x: clip contains edge-of-globe tooltips without creating a scroll
   container (so no horizontal page scroll on small viewports). */
.s-stack { padding-block: var(--section-y); overflow-x: clip; position: relative; }
.s-stack::before {
  content: ""; position: absolute; left: 62%; top: 0;
  transform: translate(-50%, -50%);
  width: min(900px, 86vw); height: 420px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(138,200,145,0.06), transparent 70%);
  pointer-events: none;
}
.stk-head { margin-bottom: clamp(36px, 5vw, 64px); max-width: 60ch; }
.stk-title { font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 3.2rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; margin-block: 24px 14px; }
.stk-sub { font-size: clamp(1rem, 1.2vw, 1.12rem); color: var(--ink-mute); }

/* Globe + case dossier, side by side. */
.stk-duo {
  position: relative; z-index: 2;
  display: flex; justify-content: flex-end; align-items: center;
  min-height: clamp(520px, 64vh, 700px);
}
/* The content column overlays the galaxy — let clicks fall through the empty
   space to the planets, but keep the dossier itself interactive. */
.s-stack .wrap { pointer-events: none; }
.s-stack .stk-case { pointer-events: auto; }

/* ---- Case study dossier ---- */
.stk-case {
  position: relative; min-width: 0; width: min(470px, 46%);
  min-height: clamp(300px, 38vh, 400px); display: flex; align-items: center;
}
/* a soft pool of darkness keeps the dossier readable over the starfield */
.stk-case::before {
  content: ""; position: absolute; inset: -14% -18%;
  background: radial-gradient(58% 58% at 55% 50%, rgba(5,8,12,0.82), rgba(5,8,12,0.35) 60%, transparent 78%);
  z-index: -1; pointer-events: none;
}
.case-empty { color: var(--ink-faint); }
.case-prompt {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; line-height: 1.9;
}
.case-prompt::before {
  content: ""; display: block; width: 26px; height: 1px;
  background: var(--line-strong); margin-bottom: 18px;
}
.case-content { width: 100%; }
.case-kicker {
  display: block; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-accent, var(--blue-bright));
  min-height: 1em; margin-bottom: 16px;
}
.case-kicker::after { /* terminal caret while typing */
  content: "▌"; margin-left: 2px; opacity: 0;
  animation: caseCaret 1s step-end infinite;
}
.case-content.is-typing .case-kicker::after { opacity: 1; }
@keyframes caseCaret { 50% { opacity: 0.15; } }
.case-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  font-weight: 500; letter-spacing: -0.03em; line-height: 1.14;
  margin-bottom: 14px;
}
.case-story {
  font-size: clamp(0.92rem, 1.1vw, 1.02rem); color: var(--ink-soft);
  line-height: 1.72; max-width: 46ch;
}
/* Fade-up choreography on each new case */
.case-title, .case-story { opacity: 0; transform: translateY(10px); }
.case-content.is-live .case-title {
  opacity: 1; transform: none;
  transition: opacity 0.5s var(--ease) 0.1s, transform 0.5s var(--ease) 0.1s;
}
.case-content.is-live .case-story {
  opacity: 1; transform: none;
  transition: opacity 0.5s var(--ease) 0.22s, transform 0.5s var(--ease) 0.22s;
}

/* Stock-ticker strip of hard facts */
.case-ticker {
  position: relative; margin-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: 11px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.case-ticker-track {
  display: inline-flex; gap: 34px; white-space: nowrap; will-change: transform;
  animation: caseTicker 26s linear infinite;
}
.stk-case:hover .case-ticker-track { animation-play-state: paused; }
.case-tick {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
  color: var(--ink-mute); display: inline-flex; align-items: center; gap: 9px;
}
.case-tick b {
  font-weight: 500; color: var(--brand-accent, var(--blue-bright));
  letter-spacing: 0.02em;
}
.case-tick::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--brand-accent, var(--blue-bright)); opacity: 0.55; flex: none;
}
@keyframes caseTicker { to { transform: translateX(-50%); } }

/* Interactive technology galaxy — a multi-depth starfield spread across the
   whole section. Drag spins it (inner planets orbit faster), depth drives
   scale, light and focus. Pick a planet to open its dossier. */
.stk-galaxy {
  position: absolute; inset: 0; z-index: 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
/* galactic haze across the field */
.stk-galaxy::before {
  content: ""; position: absolute; left: 50%; top: 52%;
  width: 92%; height: 70%; transform: translate(-50%, -50%) rotate(-6deg);
  background: radial-gradient(50% 50% at 50% 50%, rgba(28,169,224,0.055), transparent 70%);
  pointer-events: none;
}
.stk-galaxy.is-grabbed, .stk-galaxy.is-grabbed .logo-orb { cursor: grabbing; }
/* Dust, constellation lines and the luminous nucleus are all painted here,
   sharing the exact rotation model of the logo-planets above. */
#galaxyCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}
.logo-orb {
  --inf: 0;       /* hover/focus activation */
  --ds: 1;        /* depth scale (JS) */
  --dim: 1;       /* depth opacity (JS) */
  --px: 0px; --py: 0px;  /* projected position (JS) */
  position: absolute; left: 50%; top: 50%;
  appearance: none; border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
  display: grid; place-items: center;
  width: clamp(38px, 4vw, 54px); height: clamp(38px, 4vw, 54px);
  transform: translate3d(calc(var(--px) - 50%), calc(var(--py) - 50%), 0) scale(calc(var(--ds) * (1 + var(--inf) * 0.55)));
}
.logo-orb svg {
  width: 100%; height: 100%;
  /* Highlight strength (colour + glow) is gated by depth (--dim), so a lit or
     selected planet recedes as it orbits to the back — never a sharp, bright
     mark floating in front of the nearer layers. */
  fill: color-mix(in srgb, var(--brand) calc(var(--inf) * var(--dim) * 100%), var(--ink-mute));
  opacity: calc(var(--dim) * (0.42 + var(--inf) * 0.48));
  /* far layers fall out of focus — depth of field across the galaxy */
  filter: blur(calc(var(--bl, 0) * 1px))
          drop-shadow(0 0 calc(var(--inf) * var(--dim) * 8px) color-mix(in srgb, var(--brand) calc(var(--inf) * var(--dim) * 30%), transparent));
  transition: fill 0.3s var(--ease), opacity 0.3s var(--ease), filter 0.3s var(--ease);
}
.logo-orb:focus-visible { outline: none; }
/* The selected planet is simply lit and parked sharp beside the copy — no ring. */
.logo-orb.is-selected { --inf: 1; }

@media (prefers-reduced-motion: reduce) {
  /* Static, readable fallback — no orbiting galaxy. */
  .stk-galaxy { position: relative; inset: auto; height: auto; display: flex; flex-wrap: wrap; gap: 28px 36px; align-items: center; justify-content: center; padding: 20px 0; cursor: default; }
  .stk-galaxy::before { display: none; }
  #galaxyCanvas { display: none; }
  .stk-duo { display: block; min-height: 0; }
  .stk-case { width: 100%; }
  .stk-case::before { display: none; }
  .case-ticker-track { animation: none; }
  .case-title, .case-story { opacity: 1; transform: none; }
  .case-kicker::after { display: none; }
  .logo-orb { position: static; transform: none !important; width: clamp(34px, 3.4vw, 44px); height: clamp(34px, 3.4vw, 44px); }
  .logo-orb svg { opacity: 0.8; fill: var(--ink-soft); filter: none; }
}

/* ---------- Editorial rhythm: industries alternate their indent ---------- */
@media (min-width: 1041px) {
  /* (industries indent retired with the spotlight redesign) */
}

/* ---------- Tension & release: a long breath before the final ask ---------- */
#contact { padding-top: clamp(110px, 15vw, 210px); }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  /* flow redesign: flatten desktop-only compositions */
  .sv-cols > div:nth-child(2), .sv-cols > div:nth-child(3) { margin-top: 0; }
  .s-vision { padding-bottom: clamp(56px, 8vw, 96px); }
  .cape-stage canvas { transform: none; }
  /* caps: sculpture rises above the roster */
  .cape-layout { grid-template-columns: 1fr; gap: 8px; }
  .cape-stage { order: -1; max-width: 420px; margin-inline: auto; width: 100%; }
  /* engineering */
  .eng-content { max-width: 56%; }
  /* industries */
  /* sv-cols */
  .sv-cols { grid-template-columns: 1fr 1fr; }
  .sv-cols > div:last-child { border-top: 1px solid var(--line); grid-column: span 2; padding-left: 0; padding-right: 0; border-right: none; }
  /* ai */
  .ai-three { grid-template-columns: 1fr 1fr; }
  .ai-col:last-child { grid-column: span 2; border-right: none; padding-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  /* nav */
  .nav-links { display: none; }
  .nav-cta .btn-primary { display: none; }
  .nav-toggle { display: flex; }
  /* contact grid */
  .contact-grid { grid-template-columns: 1fr; }
  /* metrics */
  .metrics { grid-template-columns: repeat(2,1fr); gap: clamp(36px, 6vw, 56px) clamp(32px, 6vw, 48px); }
  /* legal */
  .legal-body { grid-template-columns: 1fr; }
  .legal-toc { position: static; display: none; }
  /* footer */
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
  /* engineering */
  .eng-visual { width: 100%; opacity: 0.18; }
  .s-engineering::before { background: linear-gradient(to right, var(--bg) 0%, rgba(5,8,12,0.95) 100%); }
  .eng-content { max-width: 100%; }
  /* transformation — disable sticky, show all stages */
  .tf-outer { height: auto !important; }
  .tf-sticky { position: static !important; height: auto !important; padding-block: clamp(60px, 10vw, 100px); flex-direction: column; gap: 0; }
  .tf-content { flex: none; position: static; }
  .tf-stage { position: static !important; opacity: 1 !important; transform: none !important; display: block; padding-bottom: 48px; border-bottom: 1px solid var(--line); margin-bottom: 0; }
  .tf-stage.tf-prev { opacity: 1 !important; transform: none !important; }
  .tf-stage + .tf-stage { padding-top: 48px; }
  .tf-ghost { display: none; }
  .tf-label-bar { position: static; margin-bottom: 40px; }
  .tf-dots { position: static; margin-top: 40px; }
  .tf-title { font-size: clamp(2rem, 6vw, 3rem); }
  /* auto */
  .s-automation { min-height: clamp(560px, 86vh, 760px); }
  .auto-points { grid-template-columns: 1fr; max-width: 100%; gap: clamp(20px, 5vw, 28px); }
  .auto-points > div { padding: 0; }
  .auto-scrim {
    background:
      linear-gradient(90deg, var(--bg) 10%, rgba(5,8,12,0.7) 55%, rgba(5,8,12,0.4) 100%),
      linear-gradient(0deg, var(--bg), transparent 24%);
  }
  /* why */
  .why-layout { grid-template-columns: 1fr; }
  /* industries */
  /* industries: panorama becomes a vertical stack of drawers */
  .ind-slabs { flex-direction: column; height: auto; }
  .slab { border-left: none; border-top: 1px solid var(--line); flex: none; height: 72px; transition: height 0.6s var(--ease); }
  .slab:first-child { border-top: none; }
  .slab.is-open { height: 350px; }
  .slab-label {
    writing-mode: horizontal-tb; transform: none;
    left: var(--gutter); right: auto; top: 50%; bottom: auto; translate: 0 -50%;
  }
  .slab-body { left: var(--gutter); }
  .slab.is-open .slab-label { opacity: 0; }
  .slab-body { bottom: 22px; width: min(430px, 88vw); }
  /* sv-cols */
  .sv-cols { grid-template-columns: 1fr; }
  .sv-cols > div { border-right: none; padding-right: 0; padding-left: 0; border-top: none; border-bottom: 1px solid var(--line); }
  .sv-cols > div:last-child { border-bottom: none; padding-left: 0; }
  /* ai */
  .ai-three { grid-template-columns: 1fr; }
  .ai-col { border-right: none; padding-right: 0; padding-left: 0; border-bottom: 1px solid var(--line); }
  .ai-col:nth-child(2) { padding-inline: 0; }
  .ai-col:last-child { border-bottom: none; padding-left: 0; }
  /* stk galaxy: dossier centres over the field */
  .stk-duo { justify-content: center; min-height: clamp(460px, 78vw, 620px); }
  .stk-case { width: min(440px, 100%); min-height: 0; }
  .stk-case::before { inset: -20% -24%; }
  .case-story { max-width: 100%; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .metrics { grid-template-columns: 1fr; }
  .metric, .metric:nth-child(2), .metric:nth-child(3), .metric:nth-child(4) { margin-top: 0; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .hero-stats { gap: 28px; }
  .cookie { left: 14px; right: 14px; bottom: 14px; }
  .sv-headline { font-size: clamp(2.6rem, 9vw, 4rem); }
  .cape-name { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .slab.is-open { height: 380px; }
  .tf-title { font-size: clamp(1.9rem, 7vw, 2.6rem); }
}