/* ==========================================================================
   Maxer Photonics — Components
   ========================================================================== */

/* ---------------------------------- Hero ---------------------------------- */

.spectrum-story {
  position: relative;
  /* Scroll runway for the 3-stage pin: 5 segments (hold/transition/hold/
     transition/hold) — vh is a definite unit so, unlike a percentage here,
     it always resolves (see js/home.js for the segment math this pairs with). */
  min-height: 420vh;
  background: var(--ink-0);
  overflow: clip;
}

/* Ambient optical atmosphere: two soft, slowly-drifting glows rather than a
   fixed gradient — barely perceptible, reads as depth not decoration. */
.spectrum-story::before,
.spectrum-story::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.spectrum-story::before {
  top: 10%; left: 50%;
  width: 50vw; height: 50vw;
  max-width: 680px; max-height: 680px;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--accent-blue-dim), transparent 70%);
  animation: story-glow-drift-a 26s ease-in-out infinite;
}
.spectrum-story::after {
  bottom: 6%; left: 50%;
  width: 34vw; height: 34vw;
  max-width: 460px; max-height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--accent-cyan-dim), transparent 70%);
  animation: story-glow-drift-b 22s ease-in-out infinite;
}
@keyframes story-glow-drift-a {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(3%) scale(1.08); }
}
@keyframes story-glow-drift-b {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-3%) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .spectrum-story::before, .spectrum-story::after { animation: none; }
}

.spectrum-story__sticky {
  position: sticky;
  top: 76px;
  height: calc(100vh - 76px);
  overflow: hidden;
  /* Match the same content column as the header/every other section
     (--container-max) instead of the raw viewport — without this, the
     absolutely-positioned stage text and spectrum (both positioned via
     --container-pad against this element) drift left of the header logo
     on any screen wider than the container, worsening badly on large
     desktop and 4K monitors. */
  max-width: var(--container-max);
  margin-inline: auto;
}

/* The one shared spectrum — position/scale driven per-frame from JS
   (js/home.js), base values here are just the resting fallback. */
.spectrum-story__visual {
  position: absolute;
  top: 50%;
  /* Resting fallback is the stage-1 RIGHT slot; JS overrides `left` per-frame. */
  left: calc(100% - var(--container-pad) - min(23vw, 320px));
  width: min(46vw, 640px);
  transform: translate(-50%, -50%);
  will-change: transform;
  z-index: 1;
}
.spectrum-story__frame { position: relative; }
.sequence-panel { position: relative; aspect-ratio: 960 / 540; }
.spectrum-graph { position: absolute; inset: 0; width: 100%; height: 100%; }
.data-readout-layer { position: absolute; inset: 0; pointer-events: none; }

/* Technical readouts — measurement annotations on the spectrum itself
   (real specs, drawn from the product line's own datasheets), anchored
   with a dot + leader line rather than floating free over it. */
.data-readout {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--accent-cyan);
  background: rgba(7, 8, 11, 0.68);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(69, 230, 207, 0.3);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.5);
}
.data-readout::before {
  content: '';
  position: absolute;
  left: -16px; top: 50%;
  width: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(69, 230, 207, 0.55));
}
.data-readout::after {
  content: '';
  position: absolute;
  left: -19px; top: 50%;
  width: 4px; height: 4px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 6px 1px rgba(69, 230, 207, 0.7);
}
/* Right-anchored readouts point their leader the other way. */
.data-readout--right::before { left: auto; right: -16px; background: linear-gradient(270deg, transparent, rgba(69, 230, 207, 0.55)); }
.data-readout--right::after { left: auto; right: -19px; }

.spectrum-caption {
  margin-top: var(--space-sm);
  text-align: right;
  font-size: 0.72rem;
  color: var(--text-on-dark-faint);
  letter-spacing: 0.02em;
}
.spectrum-caption--osa { display: none; text-align: left; opacity: 0; }
.spectrum-story__visual.is-osa .spectrum-caption--demo { display: none; }
.spectrum-story__visual.is-osa .spectrum-caption--osa {
  display: block;
  opacity: 1;
  animation: fade-in 0.35s var(--ease-out) 0.9s both;
}
.spectrum-graph__osa {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out);
}
.spectrum-graph__demo {
  transition: opacity 0.35s var(--ease-out);
}
.spectrum-story__visual.is-osa .spectrum-graph__demo {
  opacity: 0;
  pointer-events: none;
}
.spectrum-story__visual.is-osa .spectrum-graph__osa {
  opacity: 1;
}
.spectrum-story__visual.is-osa .data-readout-layer {
  opacity: 0;
  visibility: hidden;
}

/* Distributed measurement panels — instrument readouts, not cards */
.osa-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0.3s;
}
.spectrum-story__visual.is-osa .osa-hud {
  opacity: 1;
  visibility: visible;
}

.osa-panel {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--text-on-dark-dim);
  background: rgba(7, 8, 11, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(69, 230, 207, 0.22);
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translateY(6px);
}
.spectrum-story__visual.is-osa.is-osa-settled .osa-panel {
  animation: osa-panel-in 0.45s var(--ease-out) both;
}
.osa-panel__key {
  display: block;
  color: var(--accent-cyan);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.15rem;
}
.osa-panel__val {
  display: block;
  color: var(--text-on-dark);
  font-variant-numeric: tabular-nums;
}
.osa-panel__val--accent { color: var(--accent-cyan); }
.osa-panel__delta {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-on-dark-faint);
  font-size: 0.6rem;
}

/* All five measurement panels live on the spectrum's left side, in two
   left-anchored rows (VPK+meta above, V01+V02+settings below) — kept off
   the curve's peak (right-of-center) and off the text column in stage 2. */
.osa-panel--vpk {
  top: 2%;
  left: 4%;
}
.osa-panel--meta {
  top: 2%;
  left: 34%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  border-color: rgba(57, 104, 255, 0.28);
}
.osa-panel--v01 {
  bottom: 14%;
  left: 2%;
}
.osa-panel--v02 {
  bottom: 14%;
  left: 34%;
}
.osa-panel--settings {
  bottom: 14%;
  left: 68%;
  padding: 0.4rem 0.55rem;
}
.osa-panel__meta-item {
  color: var(--text-on-dark-faint);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
}

.osa-setting {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-width: 7.5rem;
}
.osa-setting span:first-child {
  color: var(--text-on-dark-faint);
  letter-spacing: 0.06em;
}
.osa-setting span:last-child {
  color: var(--text-on-dark);
  font-variant-numeric: tabular-nums;
}

/* Progressive reveal order once Stage 2 has settled on the left */
.spectrum-story__visual.is-osa.is-osa-settled .osa-panel--meta { animation-delay: 0.15s; }
.spectrum-story__visual.is-osa.is-osa-settled .osa-panel--vpk { animation-delay: 0.35s; }
.spectrum-story__visual.is-osa.is-osa-settled .osa-panel--v01 { animation-delay: 0.55s; }
.spectrum-story__visual.is-osa.is-osa-settled .osa-panel--v02 { animation-delay: 0.7s; }
.spectrum-story__visual.is-osa.is-osa-settled .osa-panel--settings { animation-delay: 0.85s; }

@keyframes osa-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* OSA SVG marker / axis draw-in */
.spectrum-graph__osa .osa-axis,
.spectrum-graph__osa .osa-ticks {
  opacity: 0;
}
.spectrum-graph__osa .osa-trace,
.spectrum-graph__osa .osa-trace-floor {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.spectrum-graph__osa .osa-markers {
  opacity: 0;
}
.spectrum-story__visual.is-osa.is-osa-settled .osa-axis {
  animation: fade-in 0.4s var(--ease-out) 0.05s both;
}
.spectrum-story__visual.is-osa.is-osa-settled .osa-ticks {
  animation: fade-in 0.35s var(--ease-out) 0.12s both;
}
.spectrum-story__visual.is-osa.is-osa-settled .osa-trace-floor {
  animation: spectrum-draw 0.7s var(--ease-out) 0.08s both;
}
.spectrum-story__visual.is-osa.is-osa-settled .osa-trace {
  animation: spectrum-draw 0.85s var(--ease-out) 0.12s both;
}
.spectrum-story__visual.is-osa.is-osa-settled .osa-markers {
  animation: fade-in 0.4s var(--ease-out) 0.4s both;
}
.spectrum-story__visual.is-osa.is-osa-settled .osa-marker-dot--vpk {
  filter: drop-shadow(0 0 4px rgba(69, 230, 207, 0.7));
}

/* Stage 3's own visual (new, additive — does not alter anything above).
   Sits in the same right-hand slot as the shared visual's resting position,
   stacked above it (z-index), starting fully transparent so it's invisible
   during stages 1 & 2; js/home.js fades it in and scrubs the video only
   once stage 3 becomes active. */
.spectrum-story__visual--stage3 {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
.hero-assembly-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Stage text — position/opacity driven per-frame from JS; stage 1 and 3
   share the left slot (never visible at the same time), stage 2 sits right. */
.spectrum-story__stage {
  position: absolute;
  top: 50%;
  width: min(38vw, 480px);
  opacity: 0;
  transform: translateY(-50%);
  will-change: transform, opacity;
  z-index: 2;
  pointer-events: none;
}
.spectrum-story__stage--left { left: var(--container-pad); }
.spectrum-story__stage--right { right: var(--container-pad); }
/* Stage 1 visible before JS paints the first frame (avoids a blank first paint). */
.spectrum-story__stage[data-stage="1"] {
  opacity: 1;
  pointer-events: auto;
}

.spectrum-story__headline {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  color: var(--text-on-dark);
  font-size: var(--fs-hero);
  margin-block: var(--space-sm) var(--space-md);
}

.spectrum-story__stage .lead { margin-bottom: var(--space-lg); }

.spectrum-story__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}

@media (prefers-reduced-motion: reduce) {
  .spectrum-story__visual, .spectrum-story__stage { transition: none !important; }
  .osa-panel, .spectrum-graph__osa .osa-axis, .spectrum-graph__osa .osa-ticks,
  .spectrum-graph__osa .osa-markers {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .spectrum-graph__osa .osa-trace,
  .spectrum-graph__osa .osa-trace-floor {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ---------------------------------- Buttons ------------------------------ */

/* Scale.com-inspired: flat (no glow/shadow), 8px radius, weight 500,
   normal case, one calm 0.3s ease-standard transition family, and a soft
   1px hover lift instead of a hard active-state squash. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.75rem 1.75rem;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: normal;
  border-radius: var(--radius-btn);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

/* Light sweep: a soft diagonal highlight that crosses the button on hover. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform var(--dur-slow) var(--ease-standard);
  pointer-events: none;
}
.btn:hover::before { transform: translateX(130%); }

.btn-primary {
  background: var(--text-on-dark);
  color: var(--ink-0);
}
.btn-primary:hover { background: var(--accent-cyan); }

.btn-ghost {
  border: 1px solid var(--line-1);
  color: var(--text-on-dark);
}
.btn-ghost::before { background: linear-gradient(115deg, transparent 35%, rgba(69, 230, 207, 0.18) 50%, transparent 65%); }
.btn-ghost:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }

.btn-arrow { transition: transform var(--dur-micro) var(--ease-standard); }

/* Shared CTA button row (final-CTA sections sitewide). */
.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}
.btn:hover .btn-arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .btn::before { transition: none; }
  .btn:hover { transform: none; }
}

.on-paper .btn-ghost { border-color: var(--paper-line); color: var(--text-on-paper); }
.on-paper .btn-ghost:hover { border-color: var(--accent-blue); color: var(--accent-blue); }

/* ---------------------------------- Cards --------------------------------- */

.card {
  background: var(--ink-2);
  border: 1px solid var(--line-0);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}

.card:hover {
  border-color: var(--line-1);
  background: var(--ink-3);
  transform: translateY(-3px);
}

/* Capability / technology-stack cards */
.cap-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border-top: 1px solid var(--line-0);
  transition: border-top-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.cap-card::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 2px;
  background: var(--spectrum-gradient);
  transition: width var(--dur-base) var(--ease-standard);
}
.cap-card:hover {
  border-top-color: transparent;
  background: var(--ink-1);
  transform: translateY(-2px);
}
.cap-card:hover::before { width: 100%; }
.cap-card:hover .section-index { color: var(--accent-cyan); }
.cap-card .section-index { transition: color var(--dur-base) var(--ease-standard); }

.cap-card .section-index { font-size: var(--fs-mono); }

.cap-card h3 { font-size: var(--fs-h3); }

.cap-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  color: var(--accent-cyan);
}

/* Product cards */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line-0);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.product-card[hidden] { display: none; }

.product-card:hover { border-color: var(--line-1); transform: translateY(-4px); }

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #050608;
}

.product-card__media img {
  --img-scale: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(var(--img-scale));
  transition: transform var(--dur-slow) var(--ease-out);
}

.product-card:hover .product-card__media img { transform: scale(calc(var(--img-scale) * 1.045)); }

/* Per-image fit corrections — some source photos have the physical product
   occupying only a small fraction of the frame (a lot of plain studio
   background around it) or sitting off-center, which a plain object-fit:
   cover can't fix on its own (cover crops to fill the frame's aspect ratio;
   it doesn't know where the actual product is). --img-scale zooms the
   image (combines correctly with the existing hover zoom above via
   calc()); object-position re-centers it first where the product isn't
   already frame-centered. Matched by src so this applies everywhere the
   photo is used as a product-card image (catalog grid + homepage featured
   cards) without touching any other component. */
.product-card__media img[src*="polarization-maintaining-variable-attenuator"] { --img-scale: 1.55; }
.product-card__media img[src*="single-mode-fiber-optic-coupler"] { --img-scale: 1.2; }
.product-card__media img[src*="single-mode-fuse-wdm"] { --img-scale: 1.2; }
.product-card__media img[src*="pinfet-optical-receiver-modules"] { --img-scale: 1.15; object-position: 68% 42%; }

.product-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(69, 230, 207, 0.16) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 0.7s var(--ease-standard);
  pointer-events: none;
}
.product-card:hover .product-card__media::after { transform: translateX(130%); }

@media (prefers-reduced-motion: reduce) {
  .product-card__media::after { transition: none; }
}

.product-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1;
}

.product-card__cat {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
}

.product-card__name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }

.product-card__value { font-size: var(--fs-small); color: var(--text-on-dark-dim); flex: 1; }

.product-card__cta {
  margin-top: var(--space-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-on-dark);
}

.product-card__cta svg { transition: transform var(--dur-fast) var(--ease-out); }
.product-card:hover .product-card__cta svg { transform: translateX(3px); }

/* Application chips/cards */
.app-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--ink-1);
  border: 1px solid var(--line-0);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.app-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--spectrum-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-standard);
}
.app-card:hover {
  border-color: var(--accent-blue);
  background: var(--ink-2);
  transform: translateY(-3px);
}
.app-card:hover::before { transform: scaleX(1); }
.app-card:hover .product-card__cat { color: var(--accent-cyan); }
.app-card .product-card__cat { transition: color var(--dur-base) var(--ease-standard); }

.app-card__icon {
  width: 36px; height: 36px;
  color: var(--accent-cyan);
}

/* Process steps */
.process-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-0);
  border: 1px solid var(--line-0);
}

.process-step {
  position: relative;
  background: var(--ink-1);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-height: 220px;
  transition: background var(--dur-base) var(--ease-standard);
}

.process-step .section-index {
  color: var(--accent-cyan);
  transition: color var(--dur-base) var(--ease-standard), text-shadow var(--dur-base) var(--ease-standard);
}

.process-step::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--spectrum-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-standard);
}

/* Active state driven by scroll progress — see js/home.js's
   scroll-linked-sequence handling for #engineering. */
.process-step.is-active { background: var(--ink-3); }
.process-step.is-active .section-index { text-shadow: 0 0 18px rgba(69, 230, 207, 0.55); }
.process-step.is-active::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .process-step { transition: none; }
  .process-step::after { transition: none; }
}

/* Pill / tag */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  color: var(--text-on-dark-dim);
}

/* Quality section — sequential label rail, lit up in sync with the scroll-
   linked CAD sequence beside it (js/home.js). */
.quality-rail {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}
.quality-step {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  color: var(--text-on-paper-dim);
  transition: color var(--dur-base) var(--ease-standard);
}
.quality-step:not(:last-child)::after {
  content: '→';
  margin-left: var(--space-sm);
  color: var(--paper-line);
}
.quality-step.is-active { color: var(--accent-blue); font-weight: 600; }

/* Stat block */
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.stat b {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--text-on-dark);
  font-weight: 500;
}
.stat span {
  font-size: var(--fs-small);
  color: var(--text-on-dark-faint);
}

/* Grid column presets — kept as classes (not inline styles) so responsive.css
   media queries can override them; inline grid-template-columns would win
   the specificity fight against a class selector regardless of breakpoint. */
.tech-grid, .product-grid { grid-template-columns: repeat(3, 1fr); }
.app-grid { grid-template-columns: repeat(4, 1fr); }
.featured-block, .split-block { grid-template-columns: 1fr 1fr; align-items: center; }

/* Manufacturing + Quality split-blocks only: full-height 50/50 balance
   instead of the default center-aligned, content-sized columns above — the
   media frame is sized by aspect-ratio (matching the product-card 4:3
   convention) rather than collapsing to its source image's natural ratio,
   so it reads as a large, deliberate column instead of a small floating
   photo with empty space around it. */
.split-block--top { align-items: start; }
.split-block--balanced { align-items: stretch; }
/* width:100% makes the column track the authority for width, with height
   then derived from aspect-ratio — without it, align-self:stretch instead
   stretches height to the row's height (set by the opposite, text column),
   and aspect-ratio computes width from THAT height, which can exceed the
   track and overflow a few pixels into the column gap when the text column
   is tall enough (seen on In-House Electronics, not on Advanced Packaging,
   purely because its text happens to be shorter — same underlying bug on
   both, since both share this rule). */
.split-block--balanced > .media-frame { width: 100%; aspect-ratio: 4 / 3; align-self: stretch; }
/* Manufacturing's canvas sequence renders at 800×450 (16:9) and only ever
   sizes itself to that native ratio (see the sitewide `.media-frame canvas`
   rule) — matching the frame to it avoids empty letterboxing under the
   render, which the shared 4:3 above would otherwise leave. */
.split-block--balanced-caption > .media-frame { aspect-ratio: 16 / 9; }

/* Manufacturing only: its caption is a third grid child, which the default
   2-column auto-flow would otherwise wrap into its own row (pushing the
   text column below the image instead of beside it). Pin it under the
   image instead, and let the text column span the full height. Scoped to
   the same desktop breakpoint as the 2-column grid itself (see
   responsive.css) — on the ≤900px single-column stack these explicit
   column/row lines would otherwise create a stray second column. */
@media (min-width: 901px) {
  .split-block--balanced-caption > .media-frame { grid-column: 1; grid-row: 1; }
  .split-block--balanced-caption > .spectrum-caption { grid-column: 1; grid-row: 2; align-self: start; margin-top: var(--space-2xs); }
  .split-block--balanced-caption > .media-frame ~ div { grid-column: 2; grid-row: 1 / -1; align-self: center; }
}

/* Featured-block media: a slow, independent scroll parallax (js/home.js) —
   image and text drift at different rates rather than moving as one block. */
.featured-block__media {
  transform: translateY(var(--parallax-y, 0px));
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .featured-block__media { transform: none !important; }
}
@media (max-width: 900px) {
  .featured-block__media { transform: none !important; }
}

/* Featured technology modules (homepage "In Depth" section) — each of the
   three .featured-block rows becomes a bordered, self-contained card with
   its own hover lift, corner marks and mono-figure spec readout, on top of
   the shared .featured-block grid/parallax it still relies on. Scoped under
   its own class rather than restyling .featured-block itself, since that
   base class is also used bare (no card chrome) on about.html/applications.html. */
/* Selectors qualified as `article.tech-module` (rather than bare
   `.tech-module`) deliberately out-specificity animations.css's `.reveal`
   rule, which shares this same element and also transitions `transform`.
   The `transition` shorthand doesn't merge across rules of unequal
   specificity — whichever rule wins supplies the complete property list —
   so this declaration re-states `.reveal`'s own opacity/transform/clip-path
   transition verbatim (keeping the scroll-in animation identical) and adds
   border-color for the hover state on top of it. */
article.tech-module {
  padding: var(--space-xl);
  border: 1px solid var(--line-0);
  border-radius: var(--radius-lg);
  background: var(--ink-1);
  margin-bottom: var(--space-2xl);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out),
              clip-path var(--dur-slow) var(--ease-out),
              border-color var(--dur-base) var(--ease-standard);
}
.tech-module:last-child { margin-bottom: 0; }
article.tech-module:hover { border-color: var(--accent-cyan); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  article.tech-module:hover { transform: none; }
}
@media (max-width: 900px) {
  .tech-module { padding: var(--space-lg); }
}

.tech-module--reverse > .tech-module__media { order: 2; }
.tech-module--reverse > .tech-module__body { order: 1; }

.tech-module__media img { transition: transform var(--dur-slow) var(--ease-standard); }
.tech-module:hover .tech-module__media img { transform: scale(1.045); }

.tech-module__mark {
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--accent-cyan);
  opacity: 0.3;
  transition: opacity var(--dur-base) var(--ease-standard);
  pointer-events: none;
  z-index: 2;
}
.tech-module__mark--tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.tech-module__mark--br { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.tech-module:hover .tech-module__mark { opacity: 0.9; }

.tech-module__body { display: flex; flex-direction: column; align-items: flex-start; }

.tech-module__index {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  color: var(--text-on-dark-faint);
  border: 1px solid var(--line-1);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin-bottom: var(--space-sm);
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.tech-module:hover .tech-module__index { color: var(--accent-cyan); border-color: var(--accent-cyan); }

.tech-module__title { font-size: var(--fs-h2); margin-bottom: var(--space-sm); }
.tech-module__text { max-width: 52ch; color: var(--text-on-dark-dim); }

.tech-module__tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: var(--space-md) 0; }
.tech-module__tag {
  cursor: default;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.tech-module__tag:hover { color: var(--ink-0); background: var(--accent-cyan); border-color: var(--accent-cyan); transform: translateY(-1px); }

.tech-module__readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-top: var(--space-sm);
  margin-bottom: var(--space-md);
  border-top: 1px solid var(--line-0);
  font-size: var(--fs-mono);
  letter-spacing: 0.02em;
  color: var(--text-on-dark-faint);
}
.tech-module__readout span::before { content: '›'; margin-right: 0.35em; color: var(--accent-blue); }
@media (prefers-reduced-motion: reduce) {
  .tech-module__media img { transition: none; }
}

/* Featured product tile: first product card reads as the flagship —
   larger media, spans two grid tracks on desktop. */
@media (min-width: 901px) {
  .product-grid--featured > .product-card:first-child {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: stretch;
  }
  .product-grid--featured > .product-card:first-child .product-card__media { aspect-ratio: auto; height: 100%; }
  .product-grid--featured > .product-card:first-child .product-card__body { justify-content: center; }
  .product-grid--featured > .product-card:first-child .product-card__name { font-size: 1.5rem; }
  .product-grid--featured > .product-card:first-child .product-card__value { font-size: var(--fs-body); max-width: 46ch; }
}

/* Divider rule using spectrum gradient — used sparingly */
.rule-spectrum {
  height: 1px;
  background: var(--spectrum-gradient);
  opacity: 0.5;
  border: 0;
}

/* Media frame — consistent treatment for photography */
.media-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line-0);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Media frame hosting a CAD engineering sequence (canvas, real Maxer
   product-development renders — see js/home.js's [data-seq] handling).
   Canvas has its own light studio background baked in, so this panel
   doesn't force it to match ink/paper — a subtle inset shadow grounds the
   edge instead. */
.media-frame--sequence { background: #eceae3; }
.media-frame canvas { width: 100%; height: auto; display: block; }
/* Hover-driven CAD sequence (see [data-seq-hover] in js/home.js) — cursor
   is the only visual affordance added, everything else stays as designed. */
.media-frame canvas[data-seq-hover] { cursor: pointer; }
.media-frame--sequence::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

/* In-House Electronics / Advanced Packaging — real column-gap instead of
   the two individual translateX nudges this replaces. Those transforms
   (previously ~24px on Electronics' image, ~37.8px on Packaging's) were a
   cosmetic per-section alignment hack that fought the actual column gap:
   Electronics' image sat in the LEFT column and got pushed toward the text
   (shrinking its ~29px base gap to ~5px, by the old code's own admission),
   while Packaging's image sat in the RIGHT column and got pushed away from
   the text (inflating its gap instead) — same shared grid, two opposite,
   inconsistent visual results. A shared, explicit column-gap on each
   section's own grid container fixes both at once without any transform,
   negative margin, or per-element positioning: the column tracks
   (minmax(0,1fr) via .split-block's grid-template-columns) simply get more
   space between them, so image/text sizes and each column's own content
   position are untouched. Scoped by id (not the shared .split-block class)
   so #quality — the third section on this page using .split-block--balanced
   — is unaffected. Resets to 0 automatically at ≤900px, where responsive.css
   collapses .split-block to a single 1fr column (no second column to gap
   against). */
#inhouse-electronics > .container,
#advanced-packaging > .container {
  column-gap: clamp(64px, 6vw, 96px);
}

/* ---------------------------------- Benchmark band (home, credibility cards) */
/* Large-headline + 3-card credibility band, homepage only, sitting on the
   existing .section--paper.on-paper light surface (same paper section
   already used further down this page for Quality) rather than introducing
   a new background treatment. Radius uses the sitewide --radius-lg (the
   largest already-defined step — this system deliberately stays restrained,
   "instrument-panel edges, not app bubbles" per tokens.css) rather than an
   arbitrary bubblier value, and the reveal-stagger clip-path override below
   keeps that same radius during the scroll-reveal transition (the shared
   .reveal-stagger rule in animations.css otherwise clips to a 4px round,
   matching --radius-md-sized cards elsewhere, which would visibly mismatch
   a --radius-lg card mid-transition). */
.benchmark-band__head { max-width: 50rem; }
.benchmark-band__headline {
  font-size: var(--fs-h1);
  max-width: 22ch;
}

.benchmark-cards { grid-template-columns: repeat(3, 1fr); align-items: stretch; }

.benchmark-card {
  --card-hover-bg: var(--paper-1);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--paper-1);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  transition: background var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.benchmark-cards.reveal-stagger.is-visible > * { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
.benchmark-card:hover {
  background: var(--card-hover-bg);
  border-color: transparent;
  transform: translateY(-3px);
}
.benchmark-card--cool { --card-hover-bg: #e3edef; }
.benchmark-card--warm { --card-hover-bg: #f2e9db; }
.benchmark-card--slate { --card-hover-bg: #e6e9f0; }

.benchmark-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--text-on-paper);
}
.benchmark-card__icon svg { width: 100%; height: 100%; }

.benchmark-card__body { display: flex; flex-direction: column; gap: var(--space-2xs); }
.benchmark-card__body h3 { font-size: var(--fs-h3); color: var(--text-on-paper); }
.benchmark-card__body p { font-size: var(--fs-body); color: var(--text-on-paper-dim); }

.benchmark-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--text-on-paper);
}
.benchmark-card:hover .btn-arrow { transform: translateX(3px); }

@media (max-width: 900px) {
  .benchmark-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .benchmark-cards { grid-template-columns: 1fr; }
  .benchmark-band__headline { max-width: none; }
}