/* ============================================================
   HOME PAGE — Section-specific styles
   Voltai Landing Page Rebrand
   ============================================================ */


/* ============================================================
   SCROLL SNAP
   ============================================================ */
/* No scroll-snap. With `y proximity` and a snap point on the hero, momentum
   scrolling on a phone gets caught and pulled back toward the top of the page,
   which reads as the page resisting the gesture. The section rhythm does not
   depend on it. */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}



/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;   /* iOS: measure against the small viewport so nothing is cut */
  min-height: 36rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Sits the copy block around a third of the way down — closer to centre,
     while staying clear of the chip. Measured off hero-dark.webp: the glow is
     black above 47% of the frame, faint to 55%, and ramps hard from 59%.
     At 32vh the block bottoms out near 46%, so it still clears the bloom. */
  padding-top: 32vh;
  overflow: clip;
}

/* Short viewports: keep the same clearance proportionally */
@media (max-height: 45rem) {
  .hero {
    padding-top: 22vh;
  }
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Hero background images — theme-switched, revealed via exposure animation */
.hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  filter: brightness(0);
  /* Was 3s — that is 3s after the overlay lifts before the visitor sees the
     actual photograph, which is the gap between a green LCP and a real one. */
  transition: filter 1.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.6s ease;
}

.hero__bg-img.is-revealed {
  filter: brightness(1);
}

/* Light mode: start the light image at higher brightness so there's
   no jarring black flash when the loader (white bg) fades away */
[data-theme="light"] .hero__bg-img--light {
  filter: brightness(0.7);
  transition: filter 1s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.6s ease;
}

[data-theme="light"] .hero__bg-img--light.is-revealed {
  filter: brightness(1);
}

/* Theme switching: show/hide the appropriate image */
.hero__bg-img--light { opacity: 0; }
.hero__bg-img--dark  { opacity: 1; }

[data-theme="light"] .hero__bg-img--light { opacity: 1; }
[data-theme="light"] .hero__bg-img--dark  { opacity: 0; }

/* Motes of light canvas — converge toward center square.
   Edge fade masks motes so they blend at the vertical divider lines. */
.hero__motes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
  padding: 0 var(--space-xl);
  max-width: 60rem;
}

.hero__title {
  /* One continuous curve across every width — no per-breakpoint overrides, so
     the size cannot drop as the viewport grows. .hero__content is shrink-to-fit
     up to max-width: 60rem, so the real ceiling is 960rem minus its 1.5rem
     padding each side: 912px of line. At 4rem this string measures ~846px, so
     it still holds one line everywhere it did before. */
  /* ABC Oracle sets ~5% wider than Modern Era: at the old 2.9rem floor the
     longer of the two lines ran 337px against 331 on a 390 phone. */
  font-size: clamp(2.75rem, 4.1vw, 4rem);
  font-weight: var(--fw-light);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #ffffff;
  text-wrap: balance;
}

/* Desktop: the headline is a single line by design */
@media (min-width: 48.0625rem) {
  .hero__title {
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

/* Phones: the headline breaks over two lines, and at 1.15 they sat tight
   against each other. Leading only, so the size curve above is untouched. */
@media (max-width: 48rem) {
  .hero__title {
    line-height: 1.3;
  }
}

/* On the narrowest phones the 2.75rem floor still broke the ABC Oracle
   headline over three lines ("Turning / Weights Into / Electrons") — 320px
   of line against 301 at 360. A notch down holds it to two. Below 400px
   only, so the size still never drops as the viewport grows. */
@media (max-width: 25rem) {
  .hero__title {
    font-size: 2.5rem;
  }
}

.hero__subtitle {
  /* Was clamp(1rem, 1.5vw, 1.375rem) — 21.6px against a 52px headline, which
     read as a caption rather than a deck. */
  font-size: clamp(1.125rem, 2vw, 1.75rem);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-normal);
  line-height: 1.5;
  /* Dimmed by its colour's alpha, not by opacity, so the entrance below ends
     at opacity 1 whatever the theme. The light theme had a keyframe of its
     own, and changing an animation's name restarts it: each theme switch hid
     the subtitle and faded it back in, 1.8s later. */
  color: rgb(255 255 255 / 0.55);
  /* 34rem held the old, shorter deck on one line at 22px. At 28px and with
     "systems" added it broke to two; 38rem keeps it on one down to 1280. */
  max-width: 38rem;
  margin: 0;
}

/* Lands just after the title finishes its scramble reveal. Base state above
   stays visible, so the subtitle still shows if the loader never runs. */
.hero--revealed .hero__subtitle {
  animation: hero-subtitle-in 0.9s var(--ease-out-expo) 0.9s both;
}

@keyframes hero-subtitle-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--revealed .hero__subtitle { animation: none; }
}

.hero__cta {
  margin-top: var(--space-sm);
}

.hero .badge {
  margin: 0 auto;
  position: relative;
  padding: 0.35rem 1rem;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hero .badge::after {
  display: none;
}


/* ============================================================
   BASE SECTION
   ============================================================ */
.section {
  position: relative;
  min-height: auto;
  max-width: var(--container-max);
  margin-inline: auto;
}

.section__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: auto;
  padding: var(--space-3xl) var(--section-padding-x);
  gap: var(--space-2xl);
}

.section__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 42rem;
}


/* ============================================================
   TYPOGRAPHY — Generous sizing, no orphans
   ============================================================ */
/* The hero headline and the section headings — Atoms, Bits, Bridging atoms
   and logic, Who We Are — stay in ABC Oracle with its alternate a and t; the
   rest of the page is Modern Era. The mission statement (--xl) and the
   closing line are body-length sentences and stay in the text face. The
   parked Industries heading inherits this too. These tags are ABC Oracle's:
   in Modern Era ss01 is a different a and ss04 is a y, so they must only
   ever be applied alongside this family. */
.hero__title,
.section__heading:not(.section__heading--xl) {
  font-family: var(--font-display);
  font-feature-settings: 'ss01' 1, 'ss04' 1;
}

.section__heading {
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: var(--fw-light);
  line-height: 1.35;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  text-wrap: balance;
  max-width: 22rem;
}

.section__heading--xl {
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  font-weight: var(--fw-book);
  line-height: 1.35;
}

.section__body {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: var(--fw-light);
  line-height: 1.75;
  color: var(--text-secondary);
  text-wrap: pretty;
  max-width: 26rem;
}

.section__actions {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-md);
}


/* ============================================================
   SPLIT LAYOUT — [Text | Visual] two-column sections
   ============================================================ */
.section--split {
  overflow: clip;
}

.section__split {
  display: grid;
  grid-template-columns: 2fr 3fr;
  min-height: 66vh;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Reverse: [visual | text] */
.section--split-reverse .section__split {
  direction: rtl;
}

.section--split-reverse .section__split > * {
  direction: ltr;
}

/* Text column */
.section__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3xl) var(--space-2xl) var(--space-3xl) var(--section-padding-x);
  gap: var(--space-lg);
  will-change: transform;
  position: relative;
  z-index: 10;
}

/* Split section meta: section-id + annotation on one line */
.split__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.split__meta .section-id {
  margin-bottom: 0;
}

.section--split-reverse .section__text {
  padding: var(--space-3xl) var(--section-padding-x) var(--space-3xl) var(--space-2xl);
}

/* Visual column */
.section__visual {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  will-change: transform;
}

.section__img {
  width: 100%;
  height: 100%;
  max-height: 70vh;
  object-fit: cover;
  object-position: center;
  border-radius: 0.25rem;
}

.section__img--contain {
  object-fit: contain;
  padding: var(--space-2xl);
  opacity: 0.7;
}

/* Chip schematic container — holds injected SVG.
   Uses aspect-ratio to give the div intrinsic height
   (divs don't have intrinsic dimensions like <img> does). */
/* Chip schematic — 60% of column width, centered */
#chip-schematic-container {
  width: 60%;
  height: auto;
  max-height: 55vh;
  aspect-ratio: 600 / 640;
  padding: 0;
  opacity: 1;
  object-fit: initial;
  margin: auto;
}

#chip-schematic-container svg {
  display: block;
  width: 100%;
  height: 100%;
  /* The frame's outer strokes sit on the artboard's edges, half outside it.
     An inline svg defaults to overflow: hidden, which cut them. */
  overflow: visible;
}

#chip-schematic-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
   SOLUTION — Robot hand reaching in from right edge
   Hand is flipped (scaleX(-1)) so fingers point right, then
   pinned to the right viewport edge. Animation simulates
   elbow articulation: rotation around the arm stub + slight
   forearm reach translation.
   ============================================================ */
/* The section itself must allow the hand to extend past its box. It is NOT
   full width — .section caps it at 90rem and centres it — so past 1440px a
   clip here cuts the forearm off at the grid rail. The horizontal clip lives
   on <main> instead (base.css), which does span the viewport. */
#solution {
  overflow: visible !important;
  position: relative;        /* anchor for the absolutely-positioned hand */
  padding-block: var(--space-4xl);
  min-height: 66vh;

  /* Distance from the visual column's right edge to the viewport's right edge.
     .section__split is max-width + margin-inline:auto, so past ~1600px the
     centring gutter grows faster than a plain vw offset and the arm's cut end
     comes back on screen. The hand's overhang has to clear this first. */
  --hand-inset: calc(
    var(--section-padding-x) +
    max(0px, (100vw - 2 * var(--section-padding-x) - var(--container-max)) / 2)
  );
}

/* Motes canvas — covers full section, behind text (z-index 10) but above background */
.solution__motes-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* Hide the grid-column placeholder; hand is positioned on the section now */
#solution .solution__visual {
  max-width: none;
  width: 100%;
  margin: 0;
  overflow: visible;
  padding: 0;
  position: relative;
}

/* Native image: arm LEFT, fingers RIGHT.
   scaleX(-1) flips it so arm exits right, fingers reach left toward text.
   Negative right value pushes arm stub off-screen so more hand is visible. */
.solution__hand-wrapper {
  position: absolute;
  top: 50%;
  /* Clear the container gutter, then bleed past the viewport edge. The 4rem
     floor covers the reach animation, which can pull the arm back by ~3.6%
     of its own width (translateX 2% + rotation). */
  right: calc(-1 * (var(--hand-inset) + max(4rem, 6vw)));
  z-index: 2;
  width: 60vw;
  max-width: 64rem;
  transform: scaleX(-1) translateY(-50%);
  transform-origin: center center;
  animation: hand-reach 8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.solution__hand-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  /* Slightly brighter base — the glow canvas provides ambient light */
  filter: brightness(0.65) contrast(1.15);
}

/* Dark fade overlay — hand emerges from shadow on the right.
   Because the wrapper is flipped (scaleX(-1)), CSS 'to right' = visually toward the right edge.
   Gradient is subtle so fingertips stay visible. */
.solution__hand-wrapper::after {
  content: '';
  position: absolute;
  inset: -20% 0 -20% 0;
  background: linear-gradient(
    to right,
    transparent 30%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.35) 70%,
    rgba(0, 0, 0, 0.85) 90%
  );
  pointer-events: none;
  z-index: 1;
}

/* Voltai icon mark — floats over the fingertips.
   Parent is flipped with scaleX(-1), so CSS "right" = visual LEFT (palm side).
   Counter-flip so icon renders right-way-round.
   z-index: 3 sits above the shadow overlay (z-index: 1). */
.solution__icon-orbit {
  position: absolute;
  transform: scaleX(-1);
  top: 22%;
  right: 6%;
  width: 14%;
  aspect-ratio: 1;
  z-index: 3;
  pointer-events: none;
}

/* Radial glow behind the icon — simulates light spilling onto the palm */
.solution__icon-orbit::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380%;
  height: 380%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.04) 30%,
    rgba(255, 255, 255, 0.02) 50%,
    transparent 70%
  );
  animation: icon-glow-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes icon-glow-pulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.15); }
}

.solution__voltai-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5))
          drop-shadow(0 0 24px rgba(255, 255, 255, 0.2))
          drop-shadow(0 0 60px rgba(255, 255, 255, 0.08));
}

/* Elbow articulation — rotation around the arm stub (right edge)
   with slight forearm extension/retraction.
   translateY(-50%) centres the hand vertically (top: 50%). */
@keyframes hand-reach {
  0% {
    transform: scaleX(-1) rotate(3deg) translateY(-50%);
  }
  15% {
    transform: scaleX(-1) rotate(0.5deg) translateX(-1%) translateY(-50%);
  }
  30% {
    transform: scaleX(-1) rotate(-2deg) translateX(-3%) translateY(-50%);
  }
  45% {
    transform: scaleX(-1) rotate(-1deg) translateX(-2%) translateY(calc(-50% - 6px));
  }
  60% {
    transform: scaleX(-1) rotate(1deg) translateX(0%) translateY(calc(-50% + 2px));
  }
  75% {
    transform: scaleX(-1) rotate(2.5deg) translateX(2%) translateY(calc(-50% - 3px));
  }
  90% {
    transform: scaleX(-1) rotate(1.5deg) translateX(1%) translateY(-50%);
  }
  100% {
    transform: scaleX(-1) rotate(3deg) translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .solution__hand-wrapper {
    animation: none;
    transform: scaleX(-1) translateY(-50%);
  }
  .solution__voltai-icon {
    animation: none;
  }
}

/* Content below the split (e.g. logo grid on Team) */
.section__below {
  padding: 0 var(--section-padding-x) var(--space-2xl);
}


/* ============================================================
   PROBLEM — The board, an exploded drawing (Section 02)
   The copy is static. The motion is the drawing's own: an
   exploded line drawing of a circuit board (js/atoms-board.js,
   styled by css/atoms-board.css), drafted once as its slot
   comes into view.
   (The copy used to start hidden and be faded in every frame by
   js/pcb-scroll.js, which went with the X-ray photo.)
   ============================================================ */
.section--problem {
  height: auto;
  min-height: auto;
}

.problem__sticky {
  /* Not pinned: the content is always visible (pcb-scroll gates nothing on
     scroll), so a 100vh pin only added empty space above and below it.
     The vertical padding never actually applied on desktop: the padding
     shorthand further down this same rule (padding: 0 <x>) reset it to zero,
     so this section had only the outer section's 3rem against the dividers —
     which is why it read as cramped next to #solution and the team section.
     Now padding-inline only, so padding-block survives. 5rem was always the
     intent; with the section's own 3rem that puts 8rem between each divider
     and the copy, up from the 3rem that was actually rendering. */
  position: relative;
  width: 100%;
  height: auto;
  padding-block: var(--space-4xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

/* --- Top text block --- */
.problem__text-top {
  width: 100%;
  position: relative;
  z-index: 10;
}

.problem__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}

.problem__meta .section-id {
  margin-bottom: 0;
}

.problem__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.problem__columns .section__heading {
  margin: 0;
  max-width: 32rem;
}

/* --- PCB visual container: the slot the board draws into. Its height is
   set in CSS, before the script runs, so nothing below it moves: by
   css/atoms-board.css (2560:780, or 2.2:1 on a phone) and by the container
   queries below. More room under it than over it: at
   12px the board's front corner all but touched the copy. --- */
.problem__pcb {
  width: 100%;
  max-width: 80rem;
  margin: var(--space-sm) 0 var(--space-3xl);
  flex-shrink: 0;
  position: relative;
  container-type: inline-size;
}

.problem__pcb-inner {
  position: relative;
  width: 100%;
}

/* At 720px and wider (as js/atoms-board.js counts it, hence a container
   query rather than a media query) the slot rides up beside the heading,
   where that row is empty, to the top of the eyebrow: --board-rise is the
   heading block's height (the heading's size at 1.35 leading, plus the
   eyebrow, its margin and the slot's own). The parts that float highest are
   at the back and right of the board, so they fill that space and leave the
   heading's corner clear. The slot is as tall as the drawing needs to fill
   its width (at rest the board is 2.72 times as wide as it is tall, drawn
   16px in from either side, 10px under the slot's top and 14px above its
   foot), but no taller than keeps the section's content (eyebrow to the last
   line of copy) within 95% of the viewport under the 64px nav. The rest of
   that content grows with the viewport's width (its type does), hence the vw
   term: measured at 1100–1512 wide, it takes about 121px + 13vw, and no more
   once the type reaches full size at 1500px. 182px is that 121px plus 95% of
   the nav. */
@container (min-width: 720px) {
  .problem__pcb-inner {
    --board-rise: calc(clamp(2rem, 3.2vw, 3rem) * 1.35 + 2.75rem);
    margin-top: calc(-1 * var(--board-rise));
  }

  .problem__pcb .atoms-board {
    aspect-ratio: auto;
    height: min(calc(24px + (100cqi - 32px) / 2.72), calc(95svh - min(13vw, 195px) - 182px));
  }
}

/* Under 720px the board is drawn from higher up, and stands taller than the
   2560:780 slot css/atoms-board.css gives it above a phone's width. Between
   about 720 and 880px wide the page keeps its desktop margins, so the slot is
   that narrow there too, and the drawing took 63% of the width. The phone's
   2.2:1 fits it. */
@container (width < 720px) {
  .problem__pcb .atoms-board {
    aspect-ratio: 2.2 / 1;
  }
}

/* --- Bottom block: text + chart side by side --- */
.problem__bottom {
  width: 100%;
  display: grid;
  /* Two 1fr tracks stretched to the container while .section__body capped the
     copy at 26rem, so each paragraph sat left-aligned in a track half again
     its width — 160px of dead space to the right of the second column, and
     the pair reading as pushed to the left. Size the tracks to the measure
     instead and centre them, so the gutter is the gap and the margins match. */
  grid-template-columns: repeat(2, minmax(0, 34rem));
  justify-content: center;
  /* A flat 5rem gutter eats into the measure once the tracks start shrinking,
     so it scales with the viewport and only reaches 5rem where there is room. */
  gap: clamp(var(--space-2xl), 5.5vw, var(--space-4xl));
  align-items: start;
  position: relative;
  z-index: 10;
}

.problem__bottom-text {
  max-width: none;   /* the grid track carries the measure */
  /* The right column holds two paragraphs now. .section__body's margin is
     zeroed just below, so without this they ran together as one block with a
     single line break between them. */
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* The punchline under the right-hand column: the body's own face and size,
   set apart by its place and by the primary ink (it was an Instrument Serif
   italic). */
.problem__bottom-text .problem__kicker {
  color: var(--text-primary);
}

.problem__bottom-text .section__body {
  margin: 0;
  /* Overrides the 26rem cap .section__body sets for single-column copy. At
     34rem this runs ~48 characters a line, and the long second paragraph
     comes down from seven lines to five. */
  max-width: none;
}

/* Reduced motion. The board needs nothing here: js/atoms-board.js draws it
   complete and still. */
@media (prefers-reduced-motion: reduce) {
  .section--problem {
    height: auto;
  }
  .problem__sticky {
    position: relative;
    height: auto;
    padding: var(--space-3xl) var(--section-padding-x);
  }
}


/* ============================================================
   MISSION — Sticky-scroll with interactive grid
   ============================================================ */
.section--mission {
  height: auto;
  min-height: auto;
  padding: 0;   /* canvas fills full section; grid offset handled in JS via padX */
}

.section__sticky {
  position: relative;
  /* Was a fixed 70vh with overflow:hidden, so on a short viewport — or once
     the statement wrapped to seven lines — the copy filled the box and the
     breathing room above and below simply vanished. Now it is a floor. */
  min-height: 70vh;
  height: auto;
  padding-block: var(--space-4xl);
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.section--mission .section__sticky .section__content {
  max-width: 46rem;   /* ~28 characters a line at the 3.25rem ceiling */
}

.section__sticky .section__content {
  padding: var(--space-3xl) var(--section-padding-x);
  gap: var(--space-md);
  text-align: center;
  align-items: center;
  max-width: 60rem;
  margin-inline: auto;
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Interactive grid canvas — fills the sticky container.
   Grid lines are computed in JS to start/end at the divider positions. */
.mission__grid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Allow mouse events to reach canvas through sticky container */
.section--mission .section__sticky {
  pointer-events: auto;
}

/* Mission meta: section-id + annotation on one line */
.mission__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  justify-content: center;
}

.mission__meta .section-id {
  margin-bottom: 0;
}

/* Mission heading override — large statement, fully white, no scroll reveal */
.section--mission .section__heading--xl {
  /* The ceiling was 3.25rem, which rendered at 52px on a 1440 desktop — the
     same size as the hero headline, for a sentence rather than a three-word
     title. It read as a wall of type: nine lines, 632px tall. At 2.5rem it is
     seven lines and 378px, clearly below both the hero and the section
     headings. The slope is unchanged, so tablet widths keep their sizing. */
  font-size: clamp(1.75rem, 4.6vw, 2.5rem);
  font-weight: var(--fw-light);
  line-height: 1.35;
  text-wrap: pretty;
  letter-spacing: var(--ls-tight);
  max-width: 56rem;
  color: #ffffff;
  opacity: 1;
}

[data-theme="light"] .section--mission .section__heading--xl {
  color: var(--graphite-950);
}


[data-scroll-reveal-words] .word {
  display: inline;
  transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-faint);
  opacity: 0.3;
}

[data-scroll-reveal-words] .word.is-lit {
  color: var(--text-primary);
  opacity: 1;
}

.section__heading--xl .word.is-lit {
  color: #ffffff;
}

[data-theme="light"] .section__heading--xl .word.is-lit {
  color: var(--graphite-950);
}


/* ============================================================
   TEAM — Logo stream with grid background
   ============================================================ */
.section--team {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* The same top as 02 // Problem's: the section's gap plus 5rem. At 5rem
     alone the eyebrow sat 81px under the divider, where every other
     section's sits 110–170px, and with the grid's cells up to 65px across,
     the cell kept clear around the text (js/home.js) ran up into the
     divider: no row of grid above it. */
  padding: calc(var(--section-gap) + var(--space-4xl)) 0 0;
  overflow: hidden;
  min-height: 66vh;
}

/* Full-section grid canvas — fills the section.
   Grid lines are computed in JS to start/end at the divider positions. */
.team__grid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;   /* the section handles the cursor, as in 01 */
  z-index: 0;
}

/* Top text — floats above the grid. Large bottom padding creates
   clear separation from the logo stream area below. */
.team__text-top {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-left: calc(var(--section-padding-x) * 2);
  padding-right: calc(var(--section-padding-x) * 2);
  padding-bottom: calc(var(--space-3xl) * 2);
}

/* Heading left, body top-right — same two-column pattern as the split sections */
.team__columns {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* Team heading — constrained to wrap across exactly 2 lines */
.section--team .section__heading {
  max-width: 28rem;
  margin: 0;
}

.section--team .section__body {
  max-width: 34.5rem;
  margin: 0;
  justify-self: end;
}

/* Beside the heading, a notch over body size: it is the only copy in the
   section. The measure grows with it so it still breaks over three lines —
   33rem held four at 24px. Only there (above 64rem): stacked under the
   heading, from tablet width down, it is the same body copy as every other
   section's, at the same 20px below its heading. This clamp never went below
   20px, where theirs is 18px from 1200px wide down. */
@media (min-width: 64.0625rem) {
  .section--team .section__body {
    font-size: clamp(1.25rem, 1.65vw, 1.5rem);
    padding-top: 0.25rem;
  }
}

/* Logo wall — stationary grid of logos */
.team__stream {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Match the text block's inset so the wall lines up with the heading */
  padding: 0 calc(var(--section-padding-x) * 2) var(--space-4xl);
}

/* Lane is a fixed-column grid; each cell centres its logo */
.team__stream-lane {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 6.5rem;
  column-gap: var(--space-2xl);
  row-gap: var(--space-lg);
  align-items: center;
  justify-items: center;
}

/* Flush the outer columns to the container edges so the wall reads as a
   block aligned with the heading rather than floating inside its cells. */
.team__stream-lane > :nth-child(4n + 1) { justify-self: start; }
.team__stream-lane > :nth-child(4n)     { justify-self: end; }

/* Each logo — per-logo height for visual weight normalisation.
   All logos are white-on-dark via brightness/invert filter.
   Fades in with a stagger once the section scrolls into view. */
.team__stream-logo {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
  transition-delay: var(--logo-delay, 0ms);
  pointer-events: none;
}

.team__stream-logo.is-visible {
  opacity: 0.85;
  transform: translateY(0);
}

/* --- Per-logo sizing ---
   Assets are tight-cropped (no transparent padding), so height is derived
   from the real ink aspect ratio: h = 6.4 / ar^0.8 — a blend between equal
   height and equal width that lands every wordmark at ~8–10rem wide.
   Icon-shaped marks (ar < 2) would run tall, so they clamp at max-height. */
.team__stream-logo { max-height: 3rem; }

.team__stream-logo--anthropic { height: 1.1rem;  }  /* 9.0:1 thin wordmark  */
.team__stream-logo--microsoft { height: 1.85rem; }  /* 4.7:1 icon+word      */
.team__stream-logo--google    { height: 2.6rem;  }  /* 3.1:1 wordmark       */
.team__stream-logo--cadence   { height: 1.75rem; }  /* 5.1:1 wordmark       */
.team__stream-logo--scale     { height: 2.6rem;  }  /* 3.1:1 wordmark       */
.team__stream-logo--nvidia    { height: 1.75rem; }  /* 5.0:1 icon+word      */
.team__stream-logo--apple     { height: 3rem;    }  /* 0.8:1 icon — clamped */
.team__stream-logo--palantir  { height: 2.05rem; }  /* 4.1:1 wordmark       */
.team__stream-logo--meta      { height: 3rem;    }  /* 1.5:1 icon — clamped */
.team__stream-logo--mit       { height: 3rem;    }  /* 1.9:1 icon — clamped */
.team__stream-logo--stanford  { height: 2.15rem; }  /* 4.6:1 wordmark       */
.team__stream-logo--harvard   { height: 2.2rem;  }  /* 3.8:1 wordmark       */

[data-theme="light"] .team__stream-logo {
  filter: brightness(0) invert(0.4);
}

@media (max-width: 64rem) {
  .team__stream-lane {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-xl);
  }

  .team__stream-lane > :nth-child(4n + 1),
  .team__stream-lane > :nth-child(4n)     { justify-self: center; }
  .team__stream-lane > :nth-child(3n + 1) { justify-self: start; }
  .team__stream-lane > :nth-child(3n)     { justify-self: end; }

  /* Heading to copy, the same gap as the split sections' .section__text */
  .team__columns {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .section--team .section__body {
    justify-self: start;
  }
}


/* ============================================================
   INDUSTRIES — Horizontal scroll cards
   ============================================================ */
.section--industries {
  min-height: 66vh;
  padding: var(--space-4xl) var(--section-padding-x);
  overflow: hidden;
}

/* Header with section-id, annotation, heading */
/* Extra left padding aligns with split-section text columns. */
.industries__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-bottom: var(--space-2xl);
  padding-left: var(--section-padding-x);
  max-width: var(--container-max);
  margin-inline: auto;
}

.industries__header .section-id {
  margin-bottom: 0;
}

/* Meta line: section-id + annotation on a single row */
.industries__meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Slightly larger heading for this section — constrained to 2 lines */
.section__heading--lg {
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: var(--fw-light);
  line-height: 1.35;
  letter-spacing: var(--ls-tight);
  margin-top: var(--space-sm);
  max-width: 32rem;
}

/* ============================================================
   ACCORDION — All panels in one row, one expanded at a time
   ============================================================ */
.industries__accordion {
  display: flex;
  gap: 0.625rem;
  max-width: var(--container-max);
  margin-inline: auto;
  height: clamp(24rem, 42vw, 36rem);
  padding-inline: 0.5rem;
}

/* Each panel — explicit flex properties for reliable transition */
.industries__panel {
  position: relative;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 4.5rem;
  min-width: 4.5rem;
  height: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Larger rounding on outermost edges of accordion */
.industries__panel:first-child {
  border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}
.industries__panel:last-child {
  border-top-right-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
}

/* Expanded panel grows to fill remaining space */
.industries__panel.is-expanded {
  flex-grow: 6;
}

/* Background image */
.industries__panel-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.industries__panel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s var(--ease-out-expo),
              filter 0.6s var(--ease-out-expo);
}

/* Gradient overlay — subtle bottom fade for text readability on expanded */
.industries__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.2) 30%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.5s var(--ease-standard);
  pointer-events: none;
}

.industries__panel.is-expanded::before {
  opacity: 1;
}

/* Hero icon — large symbol in top-right of expanded panel,
   aligned to same top line as collapsed spine icons */
.industries__panel-hero-icon {
  position: absolute;
  top: 0.75rem;
  right: 1.25rem;
  width: clamp(5rem, 10vw, 8rem);
  height: auto;
  z-index: 4;
  opacity: 0;
  filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.5));
  transform: scale(0.85);
  transition: opacity 0.5s 0.1s var(--ease-standard),
              transform 0.5s 0.1s var(--ease-out-expo);
  pointer-events: none;
}

/* Second tile (DATA) — gray fill for contrast on light background */
.industries__panel:nth-child(2) .industries__panel-hero-icon {
  filter: none;
  color: #888;
}
.industries__panel:nth-child(2) .industries__panel-hero-icon path,
.industries__panel:nth-child(2) .industries__panel-icon path,
.industries__panel:nth-child(2) .industries__panel-spine-icon path {
  fill: #999;
}

.industries__panel.is-expanded .industries__panel-hero-icon {
  opacity: 0.95;
  transform: scale(1);
}

/* Overlay card — bottom-left cutout, fully opaque black, rounded top-right */
.industries__panel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 1.75rem 2rem 1.75rem 1.75rem;
  max-width: 30rem;
  background: #000000;
  border-radius: 0 1.25rem 0 0.75rem;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.4s 0.15s var(--ease-standard),
              transform 0.4s 0.15s var(--ease-out-expo);
  pointer-events: none;
}

.industries__panel.is-expanded .industries__panel-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.industries__panel-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  color: #ffffff;
}

.industries__panel-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  opacity: 0.85;
  margin-top: 0.15rem;
}

.industries__panel-name {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 1vw, 0.85rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  margin-bottom: var(--space-2xs);
}

.industries__panel-desc {
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  max-width: 24rem;
  margin: 0;
}

/* Collapsed tab — spine icon in top-right corner */
.industries__panel-tab {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.75rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.1) 100%
  );
  opacity: 1;
  transition: opacity 0.3s var(--ease-standard);
}

.industries__panel.is-expanded .industries__panel-tab {
  opacity: 0;
  pointer-events: none;
}

/* Spine icon — symbol at top of collapsed tile */
.industries__panel-spine-icon {
  width: 2.8rem;
  height: 2.8rem;
  opacity: 1;
  transition: opacity 0.3s var(--ease-standard);
}

.industries__panel:hover .industries__panel-spine-icon {
  opacity: 1;
}

/* Plastic/holographic overlay on expanded panel */
.industries__panel-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out-expo);
  background:
    repeating-linear-gradient(
      115deg,
      transparent,
      rgba(255, 255, 255, 0.03) 2px,
      transparent 4px
    ),
    radial-gradient(
      ellipse at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255, 255, 255, 0.12) 0%,
      transparent 55%
    );
  mix-blend-mode: overlay;
  z-index: 1;
}

.industries__panel.is-expanded .industries__panel-image::after {
  opacity: 1;
}

.industries__panel.is-expanded .industries__panel-image img {
  transform: scale(1.02);
}

@keyframes icon-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- Hover prompt overlay — technical text on dimmed background --- */
.industries__panel-prompt {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  transition: opacity 0.35s var(--ease-standard);
  pointer-events: none;
}

.industries__panel.is-expanded:hover .industries__panel-prompt {
  opacity: 1;
}

/* Keep hero icon and label card above the prompt overlay on hover */
.industries__panel.is-expanded:hover .industries__panel-hero-icon {
  opacity: 0.95;
}

.industries__panel-prompt-text {
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1.1vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  max-width: 28rem;
}


/* ============================================================
   PSX CARD CHROME
   ============================================================ */
.psx-card {
  border: 1px solid var(--border-rule);
  background: var(--bg-primary);
}

.psx-card__header {
  padding: 0.5rem 0.75rem;
  background: #0f0f0f;
  border-bottom: 1px solid var(--border-rule);
}

[data-theme="light"] .psx-card__header {
  background: var(--lunar-glass-200);
}

.psx-card__module {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  opacity: 0.5;
}

.psx-card__footer {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border-rule);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  opacity: 0.35;
}


/* ============================================================
   LOGO GRID
   ============================================================ */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  width: 100%;
  border-top: 1px solid var(--border-rule);
  border-left: 1px solid var(--border-rule);
}

.logo-grid__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-xl);
  border-right: 1px solid var(--border-rule);
  border-bottom: 1px solid var(--border-rule);
  min-height: 5rem;
}

.logo-grid__img {
  height: clamp(1.5rem, 3vw, 2.5rem);
  width: auto;
  max-width: 8rem;
  opacity: 0.5;
  filter: brightness(0) invert(0.7);
  transition: opacity var(--duration-normal) var(--ease-out-expo),
              filter var(--duration-normal) var(--ease-out-expo);
}

.logo-grid__img:hover {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.logo-grid__img--vai {
  height: clamp(1rem, 2vw, 1.5rem);
  filter: none;
  opacity: 0.6;
}

.logo-grid__img--vai:hover {
  filter: none;
  opacity: 1;
}

[data-theme="light"] .logo-grid__img {
  filter: brightness(0) invert(0.3);
}

[data-theme="light"] .logo-grid__img:hover {
  filter: brightness(0) invert(0);
}

[data-theme="light"] .logo-grid__img--vai {
  filter: none;
}


/* ============================================================
   CAREERS — Centered text + ASCII animation below (stacked)
   ============================================================ */
.section--careers {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  max-width: none;
  padding-inline: 0;
  min-height: auto;
}

.careers__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2xl);
  max-width: 52rem;
  padding: var(--space-4xl) var(--section-padding-x) var(--space-3xl);
}

/* Badge — same gloss pill as hero, same reduced contrast */
.section--careers .badge {
  margin: 0 auto;
  position: relative;
  padding: 0.35rem 1rem;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.section--careers .badge::after {
  display: none;
}

[data-theme="light"] .section--careers .badge {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
}

.careers__heading {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: var(--fw-light);
  line-height: 1.45;
  color: #ffffff;
  text-wrap: balance;
}

/* Standard body copy, between the closing line and the button; the column's
   own gap spaces it. A wider measure than .section__body's 26rem so a centred
   sentence sits in three balanced lines rather than a narrow stack of five. */
.careers__body {
  max-width: 38rem;
  text-wrap: balance;
}

.careers__actions {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

/* ASCII animation container — no overflow clip so ripples aren't cut */
.careers__ascii-wrap {
  position: relative;
  width: 100%;
  height: clamp(16.8rem, 36vh, 26.4rem);
  overflow: visible;
  cursor: none;
}

.careers__ascii {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 48rem) {
  .careers__content {
    padding: var(--space-3xl) var(--space-xl);
    max-width: 100%;
  }

  .careers__ascii-wrap {
    height: clamp(16rem, 35vh, 24rem);
  }
}


/* ============================================================
   SECTION DIVIDERS
   Full-width horizontal rule with crosshair "+" marks at the
   intersections with the ambient-grid vertical frame lines.
   ============================================================ */
/* Section divider: stretch border to full viewport width using negative margins,
   then use viewport-relative crosshairs that align exactly with ambient grid lines. */
.section-divider {
  position: relative;
  border-top: none;
  overflow: visible;
}

/* Full-viewport dashed rule — breaks out of the section's 90rem max-width.
   100vw alone counts the scrollbar where one takes up room (Windows, or macOS
   set to always show them), so the line ran half a scrollbar past the right
   edge and left the page ~6px wider than its viewport at every width.
   main.js publishes the scrollbar's width as --scrollbar-w; 0 where scrollbars
   overlay the page, which is the default on a Mac. */
.section-divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100vw - var(--scrollbar-w, 0px));
  transform: translateX(-50%);
  height: 0;
  border-top: 1px dashed var(--border-rule);
  pointer-events: none;
  z-index: 10;
}

/* Crosshairs — positioned with viewport-relative padding via margin trick.
   We use a dedicated element approach instead: JS injects crosshairs into
   the ambient-grid (fixed context). But as a pure-CSS fallback, we use
   a box-shadow trick on ::after for both crosshairs. */


/* ============================================================
   DECRYPTION CHARACTERS
   ============================================================ */
.decrypt-char {
  display: inline-block;
  transition: opacity 0.05s;
}

.decrypt-char--scramble {
  font: inherit;
  color: var(--text-faint);
  opacity: 0.4;
}

.decrypt-char--revealed {
  opacity: 1;
}

[data-decrypt-hover] {
  cursor: default;
}


/* ============================================================
   RESPONSIVE — Tablet (max-width: 48rem)
   ============================================================ */
@media (max-width: 48rem) {
  .hero {
    min-height: 32rem;
  }

  .hero__content {
    max-width: 100%;
    padding: 0 var(--space-lg);
  }


  /* Single gutter. .section supplies padding-inline and the inner blocks add
     their own, so copy sat at 48px while every other section used 24px.
     Dropping the outer one also lets .problem__pcb reach the viewport edge and
     puts .solution__hand-wrapper's left edge at x=0. */
  .section--problem,
  .section--split {
    padding-inline: 0;
  }

  .section--problem {
    height: auto;
  }

  .problem__sticky {
    position: relative;
    height: auto;
    padding-block: 4rem;   /* up from 2.5rem, in step with desktop */
  }

  .problem__columns {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* Full-bleed on mobile — inside the gutter the board read as a thin strip */
  .problem__pcb {
    width: calc(100% + var(--section-padding-x) * 2);
    max-width: none;
    margin-inline: calc(var(--section-padding-x) * -1);
  }

  .problem__bottom {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Mobile: drop the extra 120vh scroll range (it read as dead space) but
     keep the sticky block's own size, so the interactive grid canvas and the
     text framing stay exactly as they are on desktop. */
  .section--mission {
    height: auto;
  }

  /* Mission statement runs long — a notch down so it doesn't dominate.
     Needs the .section--mission prefix to beat the base rule's specificity. */
  .section--mission .section__heading--xl {
    /* fluid through the tablet range too, rather than a flat 1.375rem that
       left 768px reading at the same size as a phone */
    font-size: clamp(1.25rem, 3.4vw, 1.75rem);
    line-height: 1.55;
    max-width: 30rem;
    margin-inline: auto;
  }

  /* The copy was running almost edge to edge — the sticky block only had the
     section gutter, with none of its own. */
  .section--mission .section__sticky .section__content {
    padding-inline: var(--space-2xl);
  }

  .section__sticky .section__content {
    padding: var(--space-3xl) var(--space-xl);
  }

  /* Stack split layout on tablet */
  .section__split {
    grid-template-columns: 1fr;
  }

  .section--split-reverse .section__split {
    direction: ltr;
  }

  .section__text {
    padding: var(--space-3xl) var(--space-xl);
  }

  .section--split-reverse .section__text {
    padding: var(--space-3xl) var(--space-xl);
  }

  .section__visual {
    height: 24rem;
    padding: var(--space-md);
  }

  /* Chip schematic fills the visual block's height instead of 60% of its width */
  #chip-schematic-container {
    width: auto;
    height: 100%;
    max-height: none;
  }

  /* Hand fills the visual block — at 60vw it read as a small object marooned
     in empty space on a phone. Width and offset are paired so the wrapper's
     left edge lands at x=0: the glowing icon mark must stay on screen. */
  .solution__hand-wrapper {
    width: 120vw;
    max-width: none;
    right: -20vw;
  }

  /* The hand deliberately overhangs the section; clip it here so it can't
     widen the page and leave a gap down the right edge. */
  #solution {
    overflow: clip !important;
  }

  /* Text block already sits inside the section's own gutter */
  .team__text-top {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: var(--space-2xl);
  }

  .section__inner {
    padding: var(--space-3xl) var(--space-xl);
  }

  .section__below {
    padding: 0 var(--space-xl) var(--space-3xl);
  }

  /* The same top as the split sections above it (the section's gap plus
     .section__inner's 2.5rem): at 2rem alone its eyebrow sat 34px under the
     divider where theirs sit 80. */
  .section--team {
    padding: calc(var(--section-gap) + var(--space-3xl)) var(--space-xl) var(--space-lg);
  }

  .team__stream {
    padding: 0 0 var(--space-xl);
  }

  /* Two columns, six rows, every cell the same height and every logo centred
     in it. The scale(0.8) that used to sit on top of the per-logo heights
     threw the carefully matched optical sizes back out. */
  .team__stream-lane {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 5.5rem;
    column-gap: var(--space-lg);
    row-gap: var(--space-md);
    justify-items: center;
  }

  .team__stream-lane > :nth-child(n) {
    justify-self: center;
  }

  /* Scale the whole set down proportionally instead */
  .team__stream-logo {
    max-height: 2.25rem;
    max-width: 78%;
    transform: translateY(0.75rem);
  }

  .team__stream-logo.is-visible {
    transform: scale(0.8) translateY(0);
  }

  .industries__accordion {
    height: clamp(20rem, 50vw, 28rem);
  }

  .industries__panel {
    flex-basis: 3.5rem;
    min-width: 3.5rem;
  }

  .industries__panel-overlay {
    max-width: 20rem;
  }

  .industries__panel-hero-icon {
    width: clamp(3rem, 6vw, 5rem);
  }
}


/* ============================================================
   RESPONSIVE — Mobile (max-width: 30rem)
   ============================================================ */
@media (max-width: 30rem) {
  .section__heading--xl {
    font-size: 1.75rem;
  }

  .section--mission .section__heading--xl {
    font-size: 1.25rem;
    line-height: 1.6;
  }

  .section--mission .section__sticky .section__content {
    padding-inline: var(--space-2xl);   /* hold the wider gutter down to 320px */
  }

  .section__heading {
    font-size: 1.375rem;
  }

  .section__body {
    font-size: 1rem;
  }

  .section__visual {
    height: 20rem;
  }

  .solution__hand-wrapper {
    width: 125vw;
    right: -25vw;
  }

  .industries__accordion {
    height: clamp(16rem, 60vw, 22rem);
  }

  .industries__panel {
    flex-basis: 2.5rem;
    min-width: 2.5rem;
  }

  .industries__panel-spine-icon {
    width: 1.2rem;
    height: 1.2rem;
  }

  .industries__panel-overlay {
    max-width: 16rem;
    padding: var(--space-md);
  }

  .industries__panel-hero-icon {
    width: 3rem;
  }

  .section__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ============================================================
   CHIP SCHEMATIC DRAW-ON ANIMATION
   ============================================================ */

/* Chip schematic SVG container styling */
#challenge .section__visual svg {
  width: 100%;
  height: 100%;
  max-height: 70vh;
  object-fit: contain;
}

/* Smooth transitions for draw-on animation */
#challenge .section__visual svg rect,
#challenge .section__visual svg path {
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              stroke-opacity 0.6s ease,
              fill-opacity 0.6s ease;
}

/* Pulse glow after draw completes */
#challenge .section__visual svg.chip-drawn rect,
#challenge .section__visual svg.chip-drawn path {
  animation: chip-stroke-pulse 4s ease-in-out infinite;
  animation-delay: calc(var(--pulse-delay, 0) * 1s);
}

@keyframes chip-stroke-pulse {
  0%, 100% {
    stroke-opacity: 0.7;
    filter: drop-shadow(0 0 0px transparent);
  }
  50% {
    stroke-opacity: 1;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
  }
}


/* ============================================================
   LIGHT MODE OVERRIDES
   ============================================================ */

/* --- Hero --- */
[data-theme="light"] .hero__title {
  color: var(--graphite-950);
}

[data-theme="light"] .hero__subtitle {
  /* --graphite-950 at 0.68: white at 0.55 was invisible against the light hero */
  color: rgb(12 12 12 / 0.68);
}

[data-theme="light"] .hero .badge {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
  box-shadow: none;
}

/* --- Solution Section --- */
[data-theme="light"] .solution__icon-orbit::before {
  /* No glow needed — red dots provide enough contrast */
  display: none;
}

[data-theme="light"] .solution__voltai-icon {
  /* Light gray dots — subtle on white bg */
  filter: brightness(0) saturate(0) invert(75%) brightness(105%);
  opacity: 0.7;
}

/* brightness(.65)/contrast(1.15) is tuned for a black page; on white it
   crushes the hand's shadow side to solid black. */
[data-theme="light"] .solution__hand-img {
  filter: none;
}

[data-theme="light"] .solution__hand-wrapper::after {
  background: linear-gradient(
    to right,
    transparent 30%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.35) 70%,
    rgba(255, 255, 255, 0.85) 90%
  );
}

/* --- Chip schematic: dark strokes in light mode --- */
[data-theme="light"] #chip-schematic-container svg {
  filter: invert(1);
}

[data-theme="light"] #chip-schematic-container svg path[fill],
[data-theme="light"] #chip-schematic-container svg text {
  filter: none;
}

/* --- Industries: panel overlay stays dark on photos --- */
/* These sit on top of photographs, so dark treatment is intentional */

/* Second tile gray fill — slightly darker in light mode */
[data-theme="light"] .industries__panel:nth-child(2) .industries__panel-hero-icon path,
[data-theme="light"] .industries__panel:nth-child(2) .industries__panel-icon path,
[data-theme="light"] .industries__panel:nth-child(2) .industries__panel-spine-icon path {
  fill: #666;
}

/* Industry overlay card: white bg, dark text in light mode */
[data-theme="light"] .industries__panel-overlay {
  background: #ffffff;
}
[data-theme="light"] .industries__panel-label {
  color: var(--graphite-950);
}
[data-theme="light"] .industries__panel-name {
  color: var(--graphite-950);
}
[data-theme="light"] .industries__panel-desc {
  color: var(--graphite-600);
}
[data-theme="light"] .industries__panel-icon path {
  fill: var(--graphite-950);
}
/* Hover prompt overlay: light frosted bg, dark text */
[data-theme="light"] .industries__panel-prompt {
  background: rgba(255, 255, 255, 0.82);
}
[data-theme="light"] .industries__panel-prompt-text {
  color: rgba(0, 0, 0, 0.65);
}

/* --- Careers --- */
[data-theme="light"] .careers__heading {
  color: var(--graphite-950);
}

/* --- Chip stroke pulse glow: dark in light mode --- */
[data-theme="light"] #challenge .section__visual svg.chip-drawn rect,
[data-theme="light"] #challenge .section__visual svg.chip-drawn path {
  animation-name: chip-stroke-pulse-light;
}

@keyframes chip-stroke-pulse-light {
  0%, 100% {
    stroke-opacity: 0.7;
    filter: drop-shadow(0 0 0px transparent);
  }
  50% {
    stroke-opacity: 1;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
  }
}