/* ==========================================================================
   Technologies page — dedicated widget styles.
   Loaded only on technologies.html, on top of the shared token/component
   system. Builds sticky section nav, animated flow/loop/network diagrams,
   tab & filter selectors, and supporting grids.
   ========================================================================== */

/* ---------------------------------- Section rhythm ------------------------ */
/* This page's sections (.section, shared sitewide) read as more tightly
   stacked than the site's other editorial split-blocks — this page's denser
   per-section content (tabs, diagrams, stat grids) makes the shared
   --space-section gap look smaller than it visually needs to be here.
   Overriding padding-top/bottom directly (longhand beats layout.css's
   padding-block shorthand at equal specificity since this file loads last)
   scopes the fix to this page only — technologies.css loads nowhere else —
   without touching the --space-section token other pages/sections still
   read (.tech-manufacturing's intentional half-height rhythm included).
   The 9vw→11vw bump (not just a higher floor/ceiling) is what actually
   raises the gap in the common 1280–1920px desktop range, not just at the
   clamp's extremes. Restated under the ≤640px query (technologies.css
   loads after responsive.css) so mobile gets the same proportional lift. */
.section {
  padding-top: clamp(6rem, 11vw, 11rem);
  padding-bottom: clamp(6rem, 11vw, 11rem);
}
@media (max-width: 640px) {
  .section {
    padding-top: clamp(4.5rem, 15vw, 6.5rem);
    padding-bottom: clamp(4.5rem, 15vw, 6.5rem);
  }
}

/* ---------------------------------- Hero visual --------------------------- */
.tech-hero {
  padding-block: calc(76px + var(--space-2xl)) var(--space-xl);
}
.tech-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-2xl);
  align-items: center;
}
.tech-hero__visual {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}
/* Scaled 5% larger as one unified group. transform (not a viewBox/max-width
   change) keeps every coordinate, the layout box, and centering untouched —
   scaling from the center means the diagram grows outward evenly on all
   sides. Safe against clipping/overflow: this SVG already renders with
   overflow:visible and .tech-hero__visual has no overflow:hidden, and the
   ~2.5%-per-side growth is far smaller than the surrounding grid gap/
   container padding at every breakpoint. */
.tech-hero-svg { width: 100%; height: auto; display: block; overflow: visible; transform: scale(1.05); transform-origin: center; }
.tech-hero-hub-ring {
  fill: none;
  stroke: var(--line-1);
  stroke-width: 1;
}
.tech-hero-hub-pulse {
  fill: none;
  stroke: var(--accent-cyan);
  stroke-width: 1;
  opacity: 0.5;
  transform-origin: center;
  animation: tech-hub-pulse 3.2s var(--ease-standard) infinite;
}
@keyframes tech-hub-pulse {
  0% { transform: scale(0.94); opacity: 0.55; }
  70%, 100% { transform: scale(1.22); opacity: 0; }
}
.tech-hero-hub-core { fill: var(--ink-2); stroke: var(--accent-cyan); stroke-width: 1.4; }
.tech-hero-hub-label {
  font-family: var(--font-mono);
  fill: var(--text-on-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tech-hero-spoke {
  stroke: var(--line-1);
  stroke-width: 1;
  fill: none;
}
.tech-hero-beam {
  stroke: var(--accent-cyan);
  stroke-width: 1.6;
  fill: none;
  stroke-dasharray: 3 9;
  opacity: 0.85;
  animation: tech-flow-dash 2.6s linear infinite;
}
.tech-hero-node { cursor: pointer; }
.tech-hero-node-hit { fill: transparent; }
.tech-hero-node-ring {
  fill: var(--ink-1);
  stroke: var(--line-1);
  stroke-width: 1.2;
  transition: stroke var(--dur-base) var(--ease-standard), fill var(--dur-base) var(--ease-standard);
}
.tech-hero-node-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  fill: var(--text-on-dark);
  text-anchor: middle;
  letter-spacing: 0.01em;
}
.tech-hero-node-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: var(--text-on-dark-faint);
  text-anchor: middle;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tech-hero-node:hover .tech-hero-node-ring,
.tech-hero-node:focus-visible .tech-hero-node-ring {
  stroke: var(--accent-cyan);
  fill: var(--ink-3);
}
.tech-hero-node:focus-visible { outline: none; }
.tech-hero-node:focus-visible .tech-hero-node-ring { stroke-width: 1.8; }

@media (prefers-reduced-motion: reduce) {
  .tech-hero-hub-pulse, .tech-hero-beam { animation: none; }
}

/* ---------------------------------- Sticky technology nav ------------------ */
.tech-stickynav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(7, 8, 11, 0.86);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-block: 1px solid var(--line-0);
}
.tech-stickynav__inner {
  display: flex;
  gap: clamp(0.25rem, 1.5vw, 0.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--space-2xs);
}
.tech-stickynav__inner::-webkit-scrollbar { display: none; }
.tech-stickynav__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.55em 0.85em;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  background: none;
  color: var(--text-on-dark-dim);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.tech-stickynav__item span { color: var(--accent-cyan); opacity: 0.7; }
.tech-stickynav__item:hover { color: var(--text-on-dark); background: var(--ink-2); }
.tech-stickynav__item.is-active {
  color: var(--text-on-dark);
  background: var(--ink-2);
  border-color: var(--line-1);
}
.tech-stickynav__item.is-active span { opacity: 1; }

/* ---------------------------------- Section scaffolding -------------------- */
.tech-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: var(--space-sm);
  display: block;
}
.tech-block + .tech-block { margin-top: var(--space-2xl); }
.tech-lede { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; margin-bottom: var(--space-xl); }
.tech-lede.is-reverse .tech-lede__visual { order: -1; }
.tech-lede__body p { max-width: 60ch; }
.tech-lede h2 { margin-bottom: var(--space-2xs); }
.tech-lede .tech-feature-subtitle { color: var(--text-on-dark-dim); font-size: var(--fs-lead); margin-bottom: var(--space-md); }

/* Wider image/text column gap, this page only — column-gap alone (not the
   `gap` shorthand above) so the row axis and every column's own internal
   spacing stay untouched. Must come after the .tech-lede rule above:
   `gap`'s longhand expansion also sets column-gap, and equal-specificity
   cascade order (both `.tech-lede`) means whichever declaration is later
   in the file wins. Reset back to the stacked single-column gap at ≤900px
   by the existing .tech-lede media query further below. Also widens the
   Manufacturing section's image(left)/text(right) container the same way
   — scoped via the .tech-manufacturing ancestor since its column class combo
   (.split-block--balanced-caption) is shared with a homepage section this
   must not touch, and using column-gap keeps the video/caption vertical
   pairing in column 1 untouched too. */
.tech-lede,
.tech-manufacturing > .container {
  column-gap: clamp(80px, 10vw, 160px);
}

/* Editorial photography (ported from old/) — sits above the SVG diagram or
   capability grid in each .tech-lede__visual column, natural aspect ratio
   (not cropped) so the whole product/scene stays legible. */
.tech-editorial-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-0);
  margin-bottom: var(--space-md);
}


.tech-subhead {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-dark-dim);
  margin-bottom: var(--space-sm);
}
.tech-quote {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--text-on-dark);
  text-align: center;
  max-width: 42ch;
  margin: var(--space-xl) auto 0;
  line-height: var(--lh-snug);
}

/* ---------------------------------- Flow diagrams (SVG stage chains) ------- */
.tech-flow {
  position: relative;
  padding: var(--space-md);
  background: var(--ink-1);
  border: 1px solid var(--line-0);
  border-radius: var(--radius-lg);
}
/* Fiber sensing diagram (Section 02) — outer card removed for this one
   instance only. Padding is kept so the diagram sits at the exact same
   position/spacing it always has; only the visible border, background and
   corner rounding are stripped. Scoped to .tech-flow--frameless so the
   shared .tech-flow class (used by every other diagram on the page) is
   untouched. Placed after the base .tech-flow rule so it wins the cascade
   at equal specificity. */
.tech-flow--frameless { border: none; background: transparent; border-radius: 0; }
.tech-flow-svg { width: 100%; height: auto; display: block; overflow: visible; }
.tech-flow__guide { fill: none; stroke: var(--line-1); stroke-width: 1.2; }
.tech-flow__beam {
  fill: none;
  stroke: var(--accent-cyan);
  stroke-width: 1.8;
  stroke-dasharray: 4 10;
  opacity: 0.9;
  animation: tech-flow-dash 2.4s linear infinite;
}
@keyframes tech-flow-dash { to { stroke-dashoffset: -280; } }
.tech-flow__hit { fill: transparent; }
.tech-flow__icon { fill: var(--text-on-dark-dim); stroke: var(--text-on-dark-dim); stroke-width: 1.3; transition: fill var(--dur-base) var(--ease-standard), stroke var(--dur-base) var(--ease-standard); }
.tech-flow__ring { fill: var(--ink-2); stroke: var(--line-1); stroke-width: 1.2; transition: stroke var(--dur-base) var(--ease-standard); }
.tech-flow__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  fill: var(--text-on-dark);
  text-anchor: middle;
}
.tech-flow__caption {
  font-family: var(--font-body);
  font-size: 10px;
  fill: var(--text-on-dark-faint);
  text-anchor: middle;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.tech-flow__stage { cursor: default; }
.tech-flow__stage:hover .tech-flow__caption,
.tech-flow__stage:focus-visible .tech-flow__caption { opacity: 1; transform: translateY(0); }
.tech-flow__stage:hover .tech-flow__ring,
.tech-flow__stage:focus-visible .tech-flow__ring { stroke: var(--accent-cyan); }
.tech-flow__stage:hover .tech-flow__icon,
.tech-flow__stage:focus-visible .tech-flow__icon { fill: var(--accent-cyan); stroke: var(--accent-cyan); }
.tech-flow__stage:focus-visible { outline: none; }

/* SLED broadband source flow (Section 01) — this diagram's accent recolored
   from the site's shared teal/cyan to orange. Scoped entirely to
   .tech-flow-sled-inner (this diagram's own wrapper) so the shared
   .tech-flow__beam / hover-ring / hover-icon rules — used by every other
   diagram on the page — are completely untouched. No new glow, size or
   spacing change; only the color swaps. */
.tech-flow-sled-inner { --accent-orange: #ff8a3d; }
.tech-flow-sled-inner .tech-flow__beam { stroke: var(--accent-orange); }
.tech-flow-sled-inner .tech-flow__stage:hover .tech-flow__ring,
.tech-flow-sled-inner .tech-flow__stage:focus-visible .tech-flow__ring { stroke: var(--accent-orange); }
.tech-flow-sled-inner .tech-flow__stage:hover .tech-flow__icon,
.tech-flow-sled-inner .tech-flow__stage:focus-visible .tech-flow__icon { fill: var(--accent-orange); stroke: var(--accent-orange); }

/* ripple + fringe + param-mark decorations reused across a few diagrams */
.tech-ripple {
  fill: none;
  stroke: var(--accent-cyan);
  stroke-width: 1.2;
  opacity: 0;
  transform-origin: center;
  animation: tech-ripple 3s var(--ease-standard) infinite;
}
.tech-ripple.d2 { animation-delay: 1s; }
.tech-ripple.d3 { animation-delay: 2s; }
@keyframes tech-ripple {
  0% { opacity: 0.55; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.1); }
}
.tech-fringe { stroke: var(--text-on-dark-dim); stroke-width: 1.4; }
.tech-fringe.dim { stroke: var(--line-1); }
@media (prefers-reduced-motion: reduce) {
  .tech-flow__beam, .tech-ripple, .tech-loop__beam { animation: none; }
}

/* ---------------------------------- Closed loop diagram (Section 03) ------- */
/* Diagram scaled up 30% (max-width 460px → 598px). This card's column width
   is capped by the shared .tech-lede grid (used sitewide) and the site's
   --container-max, topping out at ~623px regardless of viewport — so the
   card's own padding is reduced from --space-lg to --space-2xs, the minimum
   needed for the enlarged diagram to keep fitting without touching the
   border, rather than changing the shared grid or page container. */
.tech-loop { padding: var(--space-2xs); background: var(--ink-1); border: 1px solid var(--line-0); border-radius: var(--radius-lg); }
.tech-loop--frameless { border: none; background: transparent; border-radius: 0; }
.tech-loop-svg { width: 100%; max-width: 598px; height: auto; display: block; margin-inline: auto; overflow: visible; }
.tech-loop__guide { fill: none; stroke: var(--line-1); stroke-width: 1; }
.tech-loop__beam {
  fill: none;
  stroke: var(--accent-cyan);
  stroke-width: 1.8;
  stroke-dasharray: 3 11;
  animation: tech-flow-dash 3.6s linear infinite;
  opacity: 0.9;
}
.tech-loop__hub { fill: var(--ink-2); stroke: var(--line-1); stroke-width: 1.2; }
.tech-loop__hub-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; fill: var(--text-on-dark-dim); text-anchor: middle; text-transform: uppercase; }
.tech-loop__node .tech-flow__ring { fill: var(--ink-0); }

/* ---------------------------------- Tabs (param selector + explain) -------- */
.tech-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
}
.tech-tab {
  border: 1px solid var(--line-0);
  background: var(--ink-1);
  color: var(--text-on-dark-dim);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 0.55em 1em;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.tech-tab:hover { color: var(--text-on-dark); border-color: var(--line-1); }
.tech-tab.is-active {
  color: var(--ink-0);
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  font-weight: 600;
}
.tech-explain {
  font-size: var(--fs-small);
  color: var(--text-on-dark-dim);
  max-width: 60ch;
  min-height: 2.6em;
}
.tech-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  fill: var(--accent-cyan);
  text-anchor: middle;
  text-transform: uppercase;
}

/* Generic tab-driven panel toggle (sensing param-marks etc.) */
[data-tab-target] [data-panel] { opacity: 0; transition: opacity var(--dur-base) var(--ease-standard); }
[data-tab-target] [data-panel].is-active { opacity: 1; }

/* Virtual lab scope-screen: only the panel matching data-active-param shows */
.tech-scope-panel { display: none; }
.tech-scope-panel.is-active { display: block; }
.tech-scope-frame { fill: var(--ink-0); stroke: var(--line-1); stroke-width: 1.2; }
.tech-scope-trace { fill: none; stroke: var(--accent-cyan); stroke-width: 1.6; }
.tech-scope-bar { fill: var(--accent-blue); opacity: 0.85; }
.tech-scope-trend { fill: none; stroke: var(--accent-cyan); stroke-width: 1.4; }
.tech-scope-gauge-arc { fill: none; stroke: var(--line-1); stroke-width: 4; }
.tech-scope-gauge-needle { stroke: var(--accent-cyan); stroke-width: 2; }

/* ---------------------------------- Filters (multi-select highlighting) ---- */
.tech-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-md); }
.tech-filter {
  border: 1px solid var(--line-0);
  background: var(--ink-1);
  color: var(--text-on-dark-dim);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  padding: 0.5em 0.95em;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.tech-filter:hover { color: var(--text-on-dark); border-color: var(--line-1); }
.tech-filter.is-active { color: var(--accent-cyan); border-color: var(--accent-cyan); background: var(--accent-cyan-dim); font-weight: 600; }

/* ---------------------------------- Network diagrams (nodes + connectors) -- */
.tech-network { padding: var(--space-lg); background: var(--ink-1); border: 1px solid var(--line-0); border-radius: var(--radius-lg); }
.tech-network-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Custom Engineering / Engineering Disciplines pair — tightened, matched
   spacing so the two columns read as one section rather than two unrelated
   blocks. Scoped to .eng-disciplines-block only; .tech-network/.tech-filters
   are shared with the Components Explorer elsewhere on this page, so their
   base rules above are untouched. The right column's selector + description
   are required content ahead of its diagram (per the column's own content
   order) and there's no default margin between paragraphs and the diagram
   here (p margins are reset to 0 sitewide) — trimming .tech-filters'
   margin-bottom is the only real slack available; the two diagrams can't
   sit at identical heights without cutting that content. Both diagrams are
   scaled up 10% in place (.eng-network-scale, translate/scale/translate
   around each viewBox's own center) for a stronger, more confident visual
   weight, matched between both columns. */
.eng-disciplines-block .tech-network {
  padding: var(--space-sm) calc(var(--space-lg) + var(--space-xs));
}
.eng-disciplines-block .tech-mini-caption {
  margin-bottom: var(--space-sm);
}
.eng-disciplines-block .tech-filters {
  gap: 0.65rem;
  margin-bottom: var(--space-sm);
}
.eng-disciplines-block .tech-explain {
  margin-bottom: var(--space-sm);
}
.tech-edge { stroke: var(--line-1); stroke-width: 1.4; transition: stroke var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard); opacity: 0.55; }
.tech-edge.is-relevant { stroke: var(--accent-cyan); opacity: 1; }
.tech-node-dot { fill: var(--ink-2); stroke: var(--line-1); stroke-width: 1.3; transition: stroke var(--dur-base) var(--ease-standard), fill var(--dur-base) var(--ease-standard); }
.tech-node { cursor: default; }
.tech-node.is-relevant .tech-node-dot { stroke: var(--accent-cyan); fill: var(--ink-3); }
.tech-node-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; fill: var(--text-on-dark-dim); transition: fill var(--dur-base) var(--ease-standard); }
.tech-node.is-relevant .tech-node-label { fill: var(--text-on-dark); }

/* Component-explorer nodes mix .tech-node (data-mod target) with .tech-flow__stage visuals */
.tech-node.tech-flow__stage .tech-flow__ring,
.tech-node.tech-flow__stage .tech-flow__icon { transition: stroke var(--dur-base) var(--ease-standard), fill var(--dur-base) var(--ease-standard); }
.tech-node.tech-flow__stage.is-relevant .tech-flow__ring { stroke: var(--accent-cyan); }
.tech-node.tech-flow__stage.is-relevant .tech-flow__icon { stroke: var(--accent-cyan); color: var(--accent-cyan); }
.tech-node.tech-flow__stage.is-relevant .tech-flow__label { fill: var(--accent-cyan); }
.tech-network-hub { fill: var(--ink-2); stroke: var(--accent-cyan); stroke-width: 1.4; }
.tech-network-hub-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; fill: var(--text-on-dark-dim); text-anchor: middle; }

/* Custom Engineering hub diagram only — all its text at 70% of the shared
   base size (letter-spacing is already in em, so it scales down with it
   automatically). Scoped to .tech-network--custom-hub so the many other
   diagrams sharing .tech-flow__label sitewide, including the Engineering
   Disciplines ring diagram right next to this one, are untouched. */
.tech-network--custom-hub .tech-flow__label { font-size: 7.35px; }
.tech-network--custom-hub .tech-network-hub-label { font-size: 7px; }

/* ---------------------------------- Perf / stat grid ------------------------ */
.tech-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-md); margin: var(--space-xl) 0 0; }
.tech-stat { padding: var(--space-sm) 0; border-top: 1px solid var(--line-0); }
.tech-stat svg { width: 30px; height: 30px; stroke: var(--accent-cyan); fill: none; stroke-width: 2; margin-bottom: var(--space-xs); }
.tech-stat h4 { font-size: var(--fs-body); margin-bottom: 0.3em; }
.tech-stat p { font-size: var(--fs-small); color: var(--text-on-dark-dim); }

/* ---------------------------------- Layer grid (Section 05) ---------------- */
.tech-layer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-0); border: 1px solid var(--line-0); }
.tech-layer-card { background: var(--ink-1); padding: var(--space-md); transition: background var(--dur-base) var(--ease-standard); }
.tech-layer-card:hover, .tech-layer-card:focus-visible { background: var(--ink-3); outline: none; }
.tech-layer-card h3 { font-size: var(--fs-body); font-family: var(--font-display); margin-bottom: 0.35em; }
.tech-layer-card p { font-size: var(--fs-small); color: var(--text-on-dark-dim); }

/* ---------------------------------- Two-column capability grid ------------- */
.tech-capgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-md) var(--space-lg); }
.tech-capgrid > div { padding-left: var(--space-sm); border-left: 2px solid var(--line-0); }
.tech-capgrid h4 { font-size: var(--fs-body); margin-bottom: 0.3em; }
.tech-capgrid p { font-size: var(--fs-small); color: var(--text-on-dark-dim); }

/* ---------------------------------- Split layouts for widgets -------------- */
.tech-split-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; }
.tech-split-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; }

/* Fixed-size card variant for the Polarization / Optical Signal Routing pair.
   Their SVGs have different viewBox aspect ratios (460x140 vs 380x200), which
   otherwise makes .tech-flow's auto-height sizing render two different card
   heights. Normalizing to one shared height and letting each SVG's own
   preserveAspectRatio (default xMidYMid meet) center its diagram inside
   keeps both diagrams unchanged, just fit to match — same technique used
   for the Electronics & Control process cards. Scoped to .diagram-card only. */
.diagram-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 260px;
  box-sizing: border-box;
  container-type: inline-size;
}

/* INPUT POLARIZATION / POLARIZATION COMPONENT / CONTROLLED OUTPUT /
   COUPLED-SPLIT / ATTENUATED / ROUTED all use the plain, shared
   .tech-flow__label class (no per-label override) — same font-family,
   weight, letter-spacing, case and color everywhere. */
.diagram-card .tech-flow-svg { width: 100%; height: 100%; }

/* Routing's labels are re-sized (font-size only) to visually match
   Polarization's rendered on-screen size, even though the two SVGs scale
   differently inside their shared 260px-tall card: Polarization's viewBox
   (460x140) is always width-bound (scale = cardWidth/460), while Routing's
   (380x200) is height-bound above a 399px card width (fixed scale =
   inner-height/200 = 210/200 = 1.05) and only becomes width-bound below
   that. Solving fontSize*routeScale = 10.5*(cardWidth/460) for each regime:
   below 399px both sides cancel cardWidth, giving a constant 8.6739px;
   above 399px routeScale is fixed at 1.05, so the required font-size grows
   linearly with container width, which is exactly what the `cqw` unit
   expresses (2.1739cqw = 10*(cardWidth/460)px, derived the same way).
   Scoped to .diagram-card--routing only — the shared .tech-flow__label
   rule above, used by every other diagram on this page, is untouched. */
.diagram-card--routing .tech-flow__label { font-size: 8.6739px; }
@container (min-width: 399px) {
  .diagram-card--routing .tech-flow__label { font-size: 2.1739cqw; }
}
.tech-mini-caption { font-size: var(--fs-small); color: var(--text-on-dark-dim); max-width: 60ch; margin-top: var(--space-sm); }

/* Fixed-size card variant for the three Electronics & Control process
   cards (Thermal / Precision Current / Embedded Control). Their SVGs have
   different viewBox aspect ratios (e.g. Embedded Control is proportionally
   wider), which otherwise makes .tech-flow's auto-height sizing render a
   shorter box for that card. Normalizing to one fixed height and letting
   the SVG's own preserveAspectRatio (default xMidYMid meet) scale and
   center its diagram inside keeps every diagram unchanged, just fit to
   match. Scoped to .process-card only — unrelated .tech-flow diagrams
   elsewhere keep their natural auto height. */
.process-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 192px;
  container-type: inline-size;
}
.process-card .tech-flow-svg { width: 100%; height: 100%; }

/* Precision Current Control / Embedded Control labels are re-sized (font-size
   only) to visually match Thermal Control's rendered on-screen size — same
   technique as the Polarization/Routing pair above. All three cards share
   the same fixed height (192px) and viewBox height (140), so their
   height-bound scale is identical (measured 71/70); only their viewBox
   *width* differs (420 / 340 / 620), which is what makes each one switch
   between width-bound and height-bound at a different card width, and is
   why one shared font-size doesn't render at the same size across all
   three. Solving fontSize*ownScale = 10.5*thermalScale per card width band:
   below 345px card width Precision is still width-bound like Thermal, so
   cardWidth cancels out to a constant 8.5px; between 345-426px Precision
   is height-bound while Thermal is still width-bound, so the match has to
   grow with card width, which is exactly what `cqw` expresses (2.4648cqw);
   above 426px both are height-bound at the same scale, so the shared
   10.5px already matches with no override needed. Embedded is width-bound
   below 629px card width (constant 15.5px, by the same cancellation) and
   also matches the plain 10.5px once it clears 629px into height-bound;
   the narrow 426-629px band where Thermal has already gone height-bound
   but Embedded is still width-bound has no exact constant/cqw expression
   (it needs a value inversely proportional to card width), so it's
   approximated with stepped constants sampled from the true curve — the
   band is a transitional sliver rarely dwelt on, and the steps keep the
   visible error sub-pixel. */
.process-card--precision .tech-flow__label { font-size: 8.5px; }
@container (min-width: 345px) {
  .process-card--precision .tech-flow__label { font-size: 2.4648cqw; }
}
@container (min-width: 426px) {
  .process-card--precision .tech-flow__label { font-size: 10.5px; }
}

/* Embedded Control has 5 stages spaced only 130 viewBox units apart (vs.
   Thermal's 4 stages at 110 units, but a narrower viewBox overall), so its
   own labels — especially "EMBEDDED CONTROLLER" — were already close to
   filling that spacing at the original 10.5px. The full size-match value
   this band would otherwise need (15.5px, by the same derivation as above)
   makes "EMBEDDED CONTROLLER" collide with its neighbors (confirmed 16-17px
   overlap at common desktop widths). Capped at 12px instead — tested live
   at this card's worst-case (widest, most cramped) realistic width and
   confirmed a ~4px clear gap at 12px, with overlap starting past ~12.6px.
   Values above already sit below that cap and are left at their derived
   curve values. Result: Embedded's labels end up larger than their
   original 10.5px (partway toward Thermal/Precision's size) without
   breaking the layout, rather than an exact size match. */
.process-card--embedded .tech-flow__label { font-size: 12px; }
@container (min-width: 540px) {
  .process-card--embedded .tech-flow__label { font-size: 11.79px; }
}
@container (min-width: 580px) {
  .process-card--embedded .tech-flow__label { font-size: 10.92px; }
}
@container (min-width: 629px) {
  .process-card--embedded .tech-flow__label { font-size: 10.5px; }
}

/* Precision Current Control / Embedded Control symbols (ring + inner icon
   shapes) scaled to visually match Thermal Control's symbol size — same
   scale-factor derivation as the label fix above (ratio of each diagram's
   own render scale to Thermal's), applied via a CSS transform on a wrapper
   group instead of font-size. Unlike the labels, the rings have generous
   clearance from their neighbors (130 viewBox units of stage spacing vs. a
   ~35-unit ring radius even at the largest scale-up), so no cap is needed
   here — every stage matches Thermal exactly, including in Embedded. Each
   symbol's ring + icon (not its invisible .tech-flow__hit click-target,
   not its label) is wrapped in translate(cx,cy) > .tech-icon-scale >
   translate(-cx,-cy), so the CSS scale composes into a scale-in-place
   around the symbol's own center regardless of its position. */
.tech-icon-scale { transform: scale(1); }

.process-card--precision .tech-icon-scale { transform: scale(0.8095); }
@container (min-width: 345px) {
  .process-card--precision .tech-icon-scale { transform: scale(calc(0.234742 * 1cqw / 1px)); }
}
@container (min-width: 426px) {
  .process-card--precision .tech-icon-scale { transform: scale(1); }
}

.process-card--embedded .tech-icon-scale { transform: scale(1.4762); }
@container (min-width: 426px) {
  .process-card--embedded .tech-icon-scale { transform: scale(1.4194); }
}
@container (min-width: 460px) {
  .process-card--embedded .tech-icon-scale { transform: scale(1.3101); }
}
@container (min-width: 500px) {
  .process-card--embedded .tech-icon-scale { transform: scale(1.2093); }
}
@container (min-width: 540px) {
  .process-card--embedded .tech-icon-scale { transform: scale(1.123); }
}
@container (min-width: 580px) {
  .process-card--embedded .tech-icon-scale { transform: scale(1.0403); }
}
@container (min-width: 629px) {
  .process-card--embedded .tech-icon-scale { transform: scale(1); }
}

/* Thermal Control / Embedded Control label position matched to Precision
   Current Control's symbol-to-label gap (Precision is left as the
   untouched reference). Each diagram's own viewBox width gives it a
   different native render scale at a given card width — the same root
   cause as the icon/label-size mismatch fixed earlier, just acting on the
   symbol-to-label gap this time, which was never compensated. Values here
   are sampled directly from live-rendered measurements (needed
   translateY, in this diagram's own viewBox units, to make its gap equal
   Precision's gap at that card width) rather than derived analytically —
   the gap depends on ring radius, font ascent and each diagram's own
   font-size steps all together, which don't reduce to a clean formula the
   way the pure icon-scale/font-size ratios did. Steps converge to 0 once
   the diagram is wide enough to be height-bound like Precision, where the
   native gap already matches with no correction.
   Breakpoints are offset -48px (2 × the shared .tech-flow padding) from
   the card (border-box) width they're meant to fire at: `.process-card`'s
   own container-type:inline-size queries its *content-box*, and that
   padding lives on the very same element, so a plain `min-width: 400px`
   here only fires once the outer card is 448px — confirmed by comparing
   computed transforms against measured card width directly. */
.process-card--thermal .tech-label-shift { transform: translateY(9.41px); }
@container (min-width: 352px) {
  .process-card--thermal .tech-label-shift { transform: translateY(8.69px); }
}
@container (min-width: 378px) {
  .process-card--thermal .tech-label-shift { transform: translateY(5.32px); }
}
@container (min-width: 402px) {
  .process-card--thermal .tech-label-shift { transform: translateY(2.6px); }
}
@container (min-width: 452px) {
  .process-card--thermal .tech-label-shift { transform: translateY(0); }
}

.process-card--embedded .tech-label-shift { transform: translateY(30.46px); }
@container (min-width: 302px) {
  .process-card--embedded .tech-label-shift { transform: translateY(28.81px); }
}
@container (min-width: 352px) {
  .process-card--embedded .tech-label-shift { transform: translateY(28.33px); }
}
@container (min-width: 378px) {
  .process-card--embedded .tech-label-shift { transform: translateY(21.95px); }
}
@container (min-width: 402px) {
  .process-card--embedded .tech-label-shift { transform: translateY(19.79px); }
}
@container (min-width: 412px) {
  .process-card--embedded .tech-label-shift { transform: translateY(16.82px); }
}
@container (min-width: 432px) {
  .process-card--embedded .tech-label-shift { transform: translateY(14.58px); }
}
@container (min-width: 452px) {
  .process-card--embedded .tech-label-shift { transform: translateY(13.67px); }
}
@container (min-width: 472px) {
  .process-card--embedded .tech-label-shift { transform: translateY(10.21px); }
}
@container (min-width: 492px) {
  .process-card--embedded .tech-label-shift { transform: translateY(10.71px); }
}
@container (min-width: 512px) {
  .process-card--embedded .tech-label-shift { transform: translateY(7.54px); }
}
@container (min-width: 532px) {
  .process-card--embedded .tech-label-shift { transform: translateY(8.01px); }
}
@container (min-width: 552px) {
  .process-card--embedded .tech-label-shift { transform: translateY(5.25px); }
}
@container (min-width: 581px) {
  .process-card--embedded .tech-label-shift { transform: translateY(4.33px); }
}
@container (min-width: 602px) {
  .process-card--embedded .tech-label-shift { transform: translateY(1.74px); }
}
@container (min-width: 622px) {
  .process-card--embedded .tech-label-shift { transform: translateY(1.2px); }
}
@container (min-width: 652px) {
  .process-card--embedded .tech-label-shift { transform: translateY(0); }
}

/* ---------------------------------- Reliability strip (trailing) ----------- */
.tech-reliability-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); max-width: 900px; margin: var(--space-lg) auto 0; }
.tech-reliability-item { text-align: center; padding: var(--space-md); background: var(--ink-1); border: 1px solid var(--line-0); border-radius: var(--radius-lg); }
.tech-reliability-item .tech-flow__ring, .tech-reliability-item svg { margin-inline: auto; }
.tech-reliability-item h4 { font-size: var(--fs-body); margin: var(--space-xs) 0 0.25em; }
.tech-reliability-item p { font-size: var(--fs-small); color: var(--text-on-dark-dim); }

/* ---------------------------------- Dev process grid (Section 06 — R&D) ---- */
/* Compact 8-stage sequence (Concept → Engineered System). Dedicated classes
   rather than the shared .process-rail/.process-step/.section-index used on
   the homepage's scroll-linked version — this page's sequence has no canvas
   sequence driving it, so it doesn't need is-active/JS hooks, and keeping
   its own classes means restyling it can never affect the homepage. Step
   numbers are intentionally omitted; equal grid position alone carries the
   sequence read. All 8 cells share one fixed height and one dark
   background — no cell is permanently highlighted; the cyan accent only
   ever appears as a subtle hover border, which is inset (box-shadow) so it
   never shifts layout. */
.dev-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-0);
  border: 1px solid var(--line-0);
  margin-top: var(--space-md);
}
.dev-process-step {
  background: var(--ink-1);
  height: 96px;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.dev-process-step:hover {
  box-shadow: inset 0 0 0 1px var(--accent-cyan);
}
.dev-process-step h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0;
}

/* ---------------------------------- Manufacturing split-block (compact) ---- */
/* Scoped to this one section via .tech-manufacturing — .split-block,
   .split-block--balanced/--balanced-caption and .media-frame are shared
   with index.html's own Manufacturing/Quality sections, so their base
   rules (components.css) are untouched; only this page's instance is
   tightened. Halving the section's own padding-block shortens the gap
   after the quote above it and the empty run-off before Section 06 below
   — the preceding section's own bottom padding isn't part of this
   section and is left alone, so the total quote-to-content gap shrinks by
   less than a full 50%, but this section's own contribution to it does. */
.tech-manufacturing { padding-block: calc(var(--space-section) / 2); }

/* The shared rule spans the text column across both grid rows (image +
   caption) and centers it there, which centers it against the combined
   image+caption height rather than the image alone — on this page's
   image, that reads as visibly off-center against the photo itself.
   Scoping the text column to row 1 only (matching the image's own row)
   centers it against the image instead, without touching the shared rule
   or its use on index.html. */
@media (min-width: 901px) {
  .tech-manufacturing .split-block--balanced-caption > .media-frame ~ div {
    grid-row: 1;
    align-self: center;
  }
}

/* ============================== Responsive ================================= */
@media (max-width: 960px) {
  .tech-hero__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .tech-hero__visual { order: -1; max-width: 460px; }
  .tech-lede { grid-template-columns: 1fr; gap: var(--space-lg); }
  .tech-lede.is-reverse .tech-lede__visual { order: 0; }
  .tech-split-3 { grid-template-columns: 1fr; }
  .tech-layer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tech-layer-grid { grid-template-columns: 1fr; }
  .dev-process-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tech-split-2 { grid-template-columns: 1fr; }
  .tech-stickynav__item { font-size: 0.72rem; padding: 0.5em 0.65em; }
  .tech-quote { font-size: var(--fs-h3); }
}
@media (max-width: 480px) {
  /* Long CTA button labels don't fit the shared .cta-band padding at very
     narrow widths — relax padding and allow wrapping on this page only. */
  .cta-band { padding: var(--space-md); }
  .cta-band .btn { white-space: normal; text-align: center; }
}