/* Titan Defence components (merged Defenseflow language). Layer order is declared in globals.css. */

@layer base {
  html { background: var(--bg); scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + 1rem); scrollbar-color: var(--n-600) var(--bg); }
  body {
    font-family: var(--font-sans);
    font-size: var(--d2);
    line-height: var(--lh-body);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  ::selection { background: var(--n-100); color: var(--n-800); }
  h1, h2, h3, h4 { color: var(--heading); font-weight: 500; line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; overflow-wrap: break-word; }
  p, li, dt, dd, figcaption { text-wrap: pretty; }
  strong, b { color: var(--heading); font-weight: 500; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
  a[href^="mailto:"], a[href^="tel:"] { white-space: nowrap; }
  :focus-visible { outline: 1px solid var(--n-100); outline-offset: 3px; }
  .data { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; line-height: 1.45; }
  .icon, .viz-icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
  .visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@layer layout {
  .wrap { inline-size: 100%; max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
  .section { padding-block: var(--section); }
  .section--tight-top { padding-block-start: 0; }
  main > .section + .section { padding-block-start: 0; }
  .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-9) clamp(2rem, 0.5rem + 4vw, 5rem); align-items: center; }
  .split > * { min-inline-size: 0; }
  .split--text { align-items: start; }
  @media (width < 992px) { .split { grid-template-columns: minmax(0, 1fr); } }
}

@layer components {
  /* ------------------------------------------------ skip link */
  .skip-link { position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; z-index: 50; padding: 0.75rem 1rem; background: var(--n-100); color: var(--n-800); border-radius: var(--radius); font-weight: 500; text-decoration: none; translate: 0 -200%; }
  .skip-link:focus-visible { translate: 0 0; }

  /* ------------------------------------------------ section label (dot) */
  .label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--d1); font-weight: 400; letter-spacing: 0; line-height: 1.2; color: var(--n-100); }
  .label::before { content: ""; flex: none; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--n-100); }
  .label span { text-box: trim-both cap alphabetic; }

  /* ------------------------------------------------ section heads */
  .section-head { display: grid; gap: var(--space-4); justify-items: center; text-align: center; max-inline-size: 48rem; margin-inline: auto; margin-block-end: clamp(2.5rem, 2rem + 2.2vw, 4rem); }
  .section-head__heading { font-size: var(--d7); justify-self: stretch; }
  .section-head__text { max-inline-size: 60ch; font-size: var(--d3); }
  .section-head--start { justify-items: start; text-align: start; margin-inline: 0; }
  .section-head--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) clamp(2rem, 0.5rem + 4vw, 5rem); align-items: end; max-inline-size: none; text-align: start; justify-items: start; }
  .section-head--split > div { display: grid; gap: var(--space-4); justify-items: start; }
  @media (width < 992px) { .section-head--split { grid-template-columns: minmax(0, 1fr); } }
  .section-foot { margin-block-start: var(--space-7); }

  /* ------------------------------------------------ buttons (text roll on hover) */
  .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-block-size: 3rem; padding: 0.75rem 1.5rem;
    font-size: var(--d2); font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
    border: 1px solid var(--n-100); border-radius: var(--radius);
    background: var(--n-100); color: var(--n-800);
    transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out), scale .2s var(--ease-out), box-shadow .2s var(--ease-out);
    touch-action: manipulation; cursor: pointer;
  }
  .btn__label { display: inline-block; clip-path: inset(-0.3em -0.25em); }
  .btn__text { position: relative; display: inline-block; text-box: trim-both cap alphabetic; transition: translate .45s var(--ease-out); }
  .btn__text::after { content: attr(data-text); content: attr(data-text) / ""; position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 1em); white-space: nowrap; text-box: trim-both cap alphabetic; }
  .btn__icon { inline-size: 1.1rem; block-size: 1.1rem; transition: translate .45s var(--ease-out); }
  .btn:active { scale: 0.98; }
  .btn:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--bg), 0 0 0 2px var(--n-100); }
  .btn--secondary { background: transparent; color: var(--n-100); border-color: var(--n-600); }
  .btn--secondary:focus-visible { border-color: var(--n-100); box-shadow: 0 0 0 1px var(--n-100); }
  .btn--sm { min-block-size: 2.5rem; padding: 0.5rem 1rem; font-size: var(--d1); }
  @media (hover: hover) {
    .btn:hover .btn__text { translate: 0 calc(-100% - 1em); }
    .btn:hover .btn__icon { translate: 0.2rem 0; }
    .btn--primary:hover { background: var(--n-300); border-color: var(--n-300); }
    .btn--secondary:hover { border-color: var(--n-400); background: var(--n-700); }
  }

  .icon-btn {
    display: inline-grid; place-items: center; inline-size: var(--control); block-size: var(--control); flex: none;
    color: var(--n-100); background: var(--bg); border: var(--border); border-radius: var(--radius);
    transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out); touch-action: manipulation;
  }
  .icon-btn .icon, .icon-btn .viz-icon { inline-size: 1.125rem; block-size: 1.125rem; }
  .icon-btn:focus-visible { outline: none; border-color: var(--n-100); box-shadow: 0 0 0 1px var(--n-100); }
  .icon-btn:active { background: var(--n-700); }
  @media (hover: hover) { .icon-btn:hover { background: var(--n-700); border-color: var(--n-500); } }
  .icon-btn__play { display: none; }
  .icon-btn__pause { display: contents; }
  .icon-btn.is-paused .icon-btn__play { display: contents; }
  .icon-btn.is-paused .icon-btn__pause { display: none; }

  .text-link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--d2); font-weight: 500; color: var(--n-100); text-decoration: none; min-block-size: 2rem; }
  .text-link > span:first-child { text-box: trim-both cap alphabetic; }
  .text-link .icon, .text-link .viz-icon { inline-size: 1rem; block-size: 1rem; transition: translate .35s var(--ease-out); }
  .text-link:focus-visible { outline-offset: 4px; border-radius: 2px; }
  @media (hover: hover) { .text-link:hover .icon, .text-link:hover .viz-icon { translate: 0.2rem 0; } }

  /* ------------------------------------------------ cards + pills */
  .card { background: var(--bg); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color .3s var(--ease-out); }
  @media (hover: hover) { .card:hover { border-color: var(--n-500); } }
  .media-frame { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; }
  .media-frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }

  .pill {
    justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 1.5rem; padding: 0.25rem 0.5rem;
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
    color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); border-radius: var(--radius);
  }
  .pill::before { content: ""; flex: none; inline-size: 0.375rem; block-size: 0.375rem; border-radius: 50%; background: currentColor; }
  .pill span { text-box: trim-both cap alphabetic; }
  .pill--info { color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); }
  .pill--warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }

  /* ------------------------------------------------ header */
  .site-header {
    position: fixed; inset: 0 0 auto; z-index: 20;
    border-block-end: 1px solid transparent;
    transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out);
  }
  .site-header.is-solid { background: rgb(15 15 15 / 0.94); border-color: var(--n-700); }
  @supports (backdrop-filter: blur(1px)) {
    .site-header.is-solid { background: rgb(15 15 15 / 0.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  }
  .site-header__inner { display: flex; align-items: center; gap: clamp(1rem, 0.33rem + 2.96vw, 2.5rem); padding-block: var(--header-pad); }
  .site-header__logo { display: block; flex: none; }
  .site-header__logo img { block-size: var(--logo-h); inline-size: auto; }
  .site-nav { display: flex; gap: var(--space-1); }
  .site-nav__link { display: inline-flex; align-items: center; min-block-size: var(--control); padding-inline: 0.75rem; text-decoration: none; font-size: var(--d2); font-weight: 400; color: var(--n-300); border-radius: var(--radius); }
  .site-nav__link span { text-box: trim-both cap alphabetic; }
  .site-nav__link[aria-current="page"] { color: var(--n-100); text-decoration: underline; text-decoration-color: var(--n-500); text-underline-offset: 0.5em; }
  .site-nav__link:focus-visible { outline-offset: -2px; }
  @media (hover: hover) { .site-nav__link:hover { color: var(--n-100); } }
  .site-header__actions { display: flex; gap: var(--space-2); margin-inline-start: auto; }
  .site-header__menu { display: none; }
  @media (width < 1100px) { .site-header__range { display: none; } }
  @media (width < 768px) {
    .site-nav, .site-header__actions { display: none; }
    .site-header__menu { display: inline-grid; margin-inline-start: auto; }
  }

  .mobile-menu { inset: 0; inline-size: 100%; max-inline-size: none; block-size: 100dvh; max-block-size: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--n-100); }
  .mobile-menu__bar { display: flex; align-items: center; justify-content: space-between; min-block-size: var(--header-h); padding-block: var(--header-pad); border-block-end: 1px solid var(--n-700); }
  .mobile-menu__nav { display: grid; gap: var(--space-2); padding-block: var(--space-6); }
  .mobile-menu__link {
    display: flex; align-items: center; justify-content: space-between; min-block-size: 3.5rem; padding-inline: var(--space-5);
    font-size: var(--d5); font-weight: 500; letter-spacing: var(--ls-heading); text-decoration: none;
    border: var(--border); border-radius: var(--radius);
  }
  .mobile-menu__link span { text-box: trim-both cap alphabetic; }
  .mobile-menu__link .icon, .mobile-menu__link .viz-icon { color: var(--n-400); }
  .mobile-menu__link[aria-current="page"] { border-color: var(--n-400); }
  .mobile-menu__link:focus-visible { outline: none; border-color: var(--n-100); box-shadow: 0 0 0 1px var(--n-100); }
  .mobile-menu__cta { margin-block-start: var(--space-4); }

  /* ------------------------------------------------ hero */
  .hero { padding-block: calc(var(--header-h) + clamp(2.5rem, 1.83rem + 2.96vw, 4.5rem)) var(--section); }
  .hero__copy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-7) clamp(2rem, 0.5rem + 4vw, 5rem); align-items: end; }
  .hero__heading { justify-self: stretch; font-size: var(--d10); line-height: var(--lh-display); }
  .hero__side { display: grid; gap: var(--space-6); justify-items: start; max-inline-size: 34rem; }
  .hero__lead { font-size: var(--d3); color: var(--n-300); }
  .hero__dashboard { margin-block-start: clamp(2.5rem, 2rem + 2.2vw, 4rem); }
  @media (width < 992px) { .hero__copy { grid-template-columns: minmax(0, 1fr); } }

  /* ------------------------------------------------ layer carousel (bordered card + tabs) */
  .carousel { overflow: hidden; }
  .carousel__frame { position: relative; }
  .carousel__stage { position: relative; aspect-ratio: 21 / 8; overflow: hidden; background: var(--n-700); }
  .carousel__slide { position: absolute; inset: 0; margin: 0; clip-path: inset(0 0 0 100%); transition: clip-path 1s var(--ease-out); }
  .carousel__slide.is-on { clip-path: inset(0 0 0 0); z-index: 1; }
  .carousel__slide.is-off { clip-path: inset(0 100% 0 0); }
  .carousel__slide img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; scale: 1.04; transition: scale 6s linear; }
  .carousel__slide.is-on img { scale: 1; }
  .carousel__caption {
    position: absolute; inset-inline-start: var(--space-4); inset-block-end: var(--space-4); z-index: 2; max-inline-size: calc(100% - 15rem);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem;
    padding: 0.625rem 0.875rem; background: rgb(15 15 15 / 0.88); border: var(--border); border-radius: var(--radius); color: var(--n-400); font-size: var(--d1);
  }
  .carousel__caption b { color: var(--n-100); font-weight: 500; }
  .carousel__spec { white-space: nowrap; }
  .carousel__controls { position: absolute; inset-inline-end: var(--space-4); inset-block-end: var(--space-4); z-index: 3; display: flex; align-items: center; gap: var(--space-2); }
  .carousel__counter { display: inline-flex; align-items: center; gap: 0.45em; block-size: var(--control); padding-inline: 0.875rem; background: rgb(15 15 15 / 0.88); border: var(--border); border-radius: var(--radius); color: var(--n-400); white-space: nowrap; }
  .carousel__current { color: var(--n-100); }
  .carousel__sep { color: var(--muted); }

  .carousel__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block-start: var(--border); }
  .layer-tab {
    position: relative; display: grid; gap: var(--space-2); align-content: start; text-align: start; cursor: pointer;
    padding: var(--space-5) var(--space-6) var(--space-6);
    color: var(--muted); border-inline-start: var(--border);
    transition: color .3s var(--ease-out), background-color .3s var(--ease-out); touch-action: manipulation;
  }
  .layer-tab:first-child { border-inline-start: 0; }
  .layer-tab::before { content: ""; position: absolute; inset: -1px 0 auto; block-size: 2px; background: var(--n-100); transform-origin: left; scale: 0 1; }
  .layer-tab[aria-selected="true"] { color: var(--n-400); background: var(--n-700); }
  .layer-tab[aria-selected="true"]::before { scale: var(--p, 1) 1; }
  .layer-tab__label { color: var(--muted); }
  .layer-tab[aria-selected="true"] .layer-tab__label { color: var(--n-300); }
  .layer-tab__heading { font-size: var(--d4); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; color: var(--n-300); text-wrap: balance; }
  .layer-tab[aria-selected="true"] .layer-tab__heading { color: var(--n-100); }
  .layer-tab__text { max-inline-size: 32ch; font-size: var(--d1); }
  .layer-tab:focus-visible { outline-offset: -3px; }
  .layer-tab:active { background: var(--n-700); }
  @media (hover: hover) { .layer-tab:hover { color: var(--n-400); background: var(--n-700); } }

  @media (width < 992px) {
    .carousel__stage { aspect-ratio: 16 / 9; }
    .carousel__tabs { grid-template-columns: 1fr 1fr; }
    .layer-tab:nth-child(3) { border-inline-start: 0; }
    .layer-tab:nth-child(n+3) { border-block-start: var(--border); }
  }
  @media (width < 640px) {
    .carousel__stage { aspect-ratio: 4 / 3; }
    .carousel__frame { display: grid; }
    .carousel__caption { inset-inline-end: var(--space-3); inset-inline-start: var(--space-3); inset-block-end: var(--space-3); max-inline-size: none; }
    .carousel__controls { position: static; justify-content: flex-end; padding: var(--space-3) var(--space-3) 0; }
    .carousel__counter { margin-inline-end: auto; padding-inline: 0; background: none; border: 0; }
    .layer-tab__text { display: none; }
    .layer-tab { padding: var(--space-4); }
  }

  /* ------------------------------------------------ business lines */
  .lines__label { margin-block-end: var(--space-5); }
  .lines__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lines__item { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-6) var(--card-pad); border-inline-start: var(--border); }
  .lines__item:first-child { border-inline-start: 0; }
  .lines__heading { font-size: var(--d5); font-weight: 500; letter-spacing: var(--ls-heading); line-height: 1.25; }
  .lines__text { color: var(--n-400); }
  @media (width < 768px) {
    .lines__list { grid-template-columns: 1fr; }
    .lines__item { border-inline-start: 0; border-block-start: var(--border); }
    .lines__item:first-child { border-block-start: 0; }
  }

  /* ------------------------------------------------ capability cards */
  .cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
  .cap-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
  .cap-card__body { display: grid; gap: var(--space-3); align-content: start; justify-items: start; padding: var(--card-pad) var(--card-pad) 0; }
  .cap-card__num { display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--n-100); }
  .cap-card__kicker { color: var(--muted); }
  .cap-card__heading { font-size: var(--d5); }
  .cap-card__text { color: var(--n-400); }
  .cap-card__link { margin-block-start: var(--space-1); }
  .cap-card__link::after { content: ""; position: absolute; inset: 0; }
  .cap-card { position: relative; }
  .cap-card__illus { display: grid; align-items: end; min-block-size: 11rem; padding: var(--space-6) var(--card-pad) var(--card-pad); color: var(--n-500); transition: color .3s var(--ease-out); }
  .cap-card__illus:empty { min-block-size: var(--space-6); padding: 0; }
  @media (hover: hover) { .cap-card:hover .cap-card__illus { color: var(--n-300); } }
  .cap-card:has(.cap-card__link:focus-visible) { border-color: var(--n-100); }
  .cap-card__link:focus-visible { outline: none; }
  @media (width < 992px) { .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (width < 640px) { .cap-grid { grid-template-columns: minmax(0, 1fr); } }

  /* ------------------------------------------------ engagement chain + range ladder */
  .chain__grid { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: clamp(2rem, 0.5rem + 4vw, 5rem); align-items: start; }
  .rail { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); display: grid; gap: var(--space-4); padding: var(--space-6); }
  .rail__title { color: var(--n-100); text-transform: uppercase; letter-spacing: 0.08em; }
  .rail__readout { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; color: var(--muted); border-block-start: var(--border); padding-block-start: var(--space-3); }
  .rail__readout b { color: var(--n-100); font-weight: 500; }
  .rail__readout b.is-threat { color: var(--warn); }
  .rail__note { color: var(--muted); max-inline-size: 36ch; }

  .ladder { display: grid; grid-template-rows: 1fr auto; block-size: clamp(16rem, calc(100svh - 30rem), 26rem); margin-block-start: var(--space-2); }
  .ladder__scale { position: relative; margin-inline-start: 0.6rem; border-inline-start: 1px solid var(--n-500); }
  .ladder__band {
    position: absolute; inset-inline: 0; inset-block-start: calc(var(--a) * 100%); inset-block-end: calc((1 - var(--b)) * 100%);
    display: flex; align-items: center; justify-content: flex-end; padding-inline: 0.75rem;
    background: var(--n-700); border-block-start: var(--border);
    opacity: 0.5; transition: opacity .4s var(--ease-out), background-color .4s var(--ease-out);
  }
  .ladder__band-label { text-transform: uppercase; letter-spacing: 0.08em; color: var(--n-400); }
  .ladder__tick {
    position: absolute; inset-inline-start: 0; inset-block-start: calc(var(--at) * 100%); z-index: 1;
    display: flex; align-items: baseline; gap: 0.5rem; translate: 0 -100%; padding-block-end: 0.3rem; padding-inline-start: 1rem; white-space: nowrap; pointer-events: none;
  }
  .ladder__tick::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: 0.6rem; block-size: 1px; background: var(--n-400); }
  .ladder__tick .data { line-height: 1; font-size: 0.6875rem; }
  .ladder__value { color: var(--n-100); }
  .ladder__note { color: var(--n-400); }
  .ladder__marker {
    position: absolute; inset-inline-start: 0; inset-block-start: calc(var(--m, 0) * 100%); z-index: 2;
    display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; translate: -50% -50%;
    color: var(--warn); background: var(--bg); border: 1px solid currentColor; border-radius: var(--radius);
    transition: color .3s var(--ease-out), opacity .3s var(--ease-out);
  }
  .ladder__marker .icon { inline-size: 1rem; block-size: 1rem; }
  .ladder__site {
    display: flex; align-items: center; min-block-size: 2.75rem; margin-inline-start: 0.6rem; padding-inline: 0.75rem;
    border: var(--border); border-radius: var(--radius); color: var(--n-400); opacity: 0.6; transition: opacity .4s var(--ease-out), border-color .4s var(--ease-out);
  }
  .ladder__site span { text-transform: uppercase; letter-spacing: 0.08em; }
  .ladder[data-stage="detect"] [data-band="detect"],
  .ladder[data-stage="deny"] [data-band="deny"],
  .ladder[data-stage="defeat"] [data-band="defeat"] { opacity: 1; background: var(--n-600); }
  .ladder[data-stage="detect"] [data-band="detect"] .ladder__band-label,
  .ladder[data-stage="deny"] [data-band="deny"] .ladder__band-label,
  .ladder[data-stage="defeat"] [data-band="defeat"] .ladder__band-label { color: var(--n-100); }
  .ladder[data-stage="operate"] .ladder__site { opacity: 1; color: var(--n-100); border-color: var(--ok); }
  .ladder[data-stage="defeat"] .ladder__marker.is-down { color: var(--n-500); }
  .ladder[data-stage="operate"] .ladder__marker { opacity: 0; }

  .stages { display: grid; }
  .stages__link { display: flex; gap: 0.9rem; align-items: center; min-block-size: var(--control); text-decoration: none; color: var(--muted); border-block-start: var(--border); transition: color .3s var(--ease-out); }
  .stages__num { inline-size: 2rem; }
  .stages__name { font-weight: 500; text-box: trim-both cap alphabetic; }
  .stages__link[aria-current="step"] { color: var(--n-100); }
  .stages__link[aria-current="step"] .stages__num { color: var(--warn); }
  .stages__link:focus-visible { outline-offset: -2px; }
  @media (hover: hover) { .stages__link:hover { color: var(--n-100); } }

  .flow { display: grid; gap: var(--section); min-inline-size: 0; }
  .stage { display: grid; gap: var(--space-7); scroll-margin-block-start: calc(var(--header-h) + 2rem); }
  .stage__header { display: grid; gap: var(--space-4); justify-items: start; max-inline-size: 46ch; }
  .stage__heading { font-size: var(--d7); }
  .stage__text { font-size: var(--d3); }
  .stage__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  .stage__pair > .system:only-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }

  @media (width < 992px) {
    .chain__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .rail {
      inset-block-start: var(--header-h); z-index: 5; gap: var(--space-2);
      padding: var(--space-3) var(--gutter); margin-inline: calc(-1 * var(--gutter));
      border-radius: 0; border-inline: 0; box-shadow: none;
    }
    .rail__title, .rail__note, .stages { display: none; }
    .rail__readout { order: -1; border: 0; padding: 0; }
    .ladder { grid-template-rows: none; grid-template-columns: 1fr auto; block-size: 2.25rem; margin-block-start: 0; }
    .ladder__scale { margin: 0; border-inline-start: 0; border-block-end: 1px solid var(--n-500); }
    .ladder__band { inset-block: 0; inset-inline-start: calc(var(--qa) * 100%); inset-inline-end: calc((1 - var(--qb)) * 100%); justify-content: center; border-block-start: 0; border-inline-start: var(--border); padding-inline: 0.25rem; }
    .ladder__tick { display: none; }
    .ladder__marker { inset-block-start: 100%; inset-inline-start: calc(var(--mq, 0) * 100%); inline-size: 1.25rem; block-size: 1.25rem; }
    .ladder__marker .icon { inline-size: 0.85rem; block-size: 0.85rem; }
    .ladder__site { margin: 0; min-block-size: 0; border-radius: 0; }
    .flow { margin-block-start: var(--space-9); }
  }
  @media (width < 768px) {
    .stage__pair, .stage__pair > .system:only-child { grid-template-columns: minmax(0, 1fr); }
    .ladder__band-label, .ladder__site span { font-size: 0.66rem; letter-spacing: 0.04em; }
  }

  /* ------------------------------------------------ system card (one product) */
  .system { display: grid; grid-template-rows: auto 1fr; align-content: start; overflow: hidden; scroll-margin-block-start: calc(var(--header-h) + 5rem); }
  .system__media { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--n-700); border-block-end: var(--border); }
  .system__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; transition: scale 1.2s var(--ease-out); }
  @media (hover: hover) { .system:hover .system__media img { scale: 1.03; } }
  .system__body { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); }
  .system__heading { font-size: var(--d5); }
  .system__text { max-inline-size: 46ch; }
  .stage__pair > .system:only-child { grid-template-rows: none; }
  .stage__pair > .system:only-child .system__media { block-size: 100%; aspect-ratio: auto; min-block-size: 16rem; border-block-end: 0; border-inline-end: var(--border); }
  .system--lead { grid-template-rows: auto auto; }
  .system--lead .system__media { aspect-ratio: 16 / 9; }
  .system--lead .system__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-8); padding: var(--card-pad); }
  .system--lead .system__body > :is(.pill, .system__heading) { grid-column: 1; }
  .system--lead .system__text { grid-column: 2; grid-row: 1 / span 2; }
  .system--lead .specs { grid-column: 1 / -1; }
  .system--lead .system__heading { font-size: var(--d6); }
  @media (width < 768px) {
    .system--lead .system__body { grid-template-columns: minmax(0, 1fr); }
    .system--lead .system__text { grid-column: 1; grid-row: auto; }
    .stage__pair > .system:only-child .system__media { min-block-size: 0; aspect-ratio: 4 / 3; border-inline-end: 0; border-block-end: var(--border); }
  }

  .specs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); margin-block-start: var(--space-2); }
  .specs__item { flex: 1 1 6.5rem; max-inline-size: 12rem; display: grid; gap: var(--space-2); align-content: start; padding: var(--space-3); border: var(--border); border-radius: var(--radius); }
  .specs dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); line-height: 1.3; white-space: nowrap; }
  .specs dd { font-family: var(--font-mono); font-size: var(--d3); font-weight: 500; color: var(--n-100); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2; }

  /* ------------------------------------------------ software split + icon list */
  .split__copy { display: grid; gap: var(--space-5); justify-items: start; align-content: start; }
  .split__heading { font-size: var(--d7); justify-self: stretch; }
  .split__text { font-size: var(--d3); max-inline-size: 54ch; }
  .icon-list { display: grid; gap: var(--space-5); margin-block: var(--space-2); }
  .icon-list__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; }
  .icon-list__icon { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; color: var(--n-100); border: var(--border); border-radius: var(--radius); background: var(--n-700); }
  .icon-list__body { display: grid; gap: var(--space-1); }
  .icon-list__title { font-size: var(--d3); line-height: 1.3; }
  .icon-list__text { font-size: var(--d1); line-height: 1.5; }

  .check-list { display: grid; gap: var(--space-3); }
  .check-list__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
  .check-list__icon { display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: 0.0625rem; color: var(--ok); }
  .check-list__icon .icon, .check-list__icon .viz-icon { inline-size: 1.125rem; block-size: 1.125rem; }

  /* ------------------------------------------------ figures (stat tiles) */
  .stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
  .stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-3); padding: var(--card-pad); min-block-size: 11rem; }
  .stat__value { font-family: var(--font-mono); font-size: var(--d8); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; color: var(--n-100); font-variant-numeric: tabular-nums; }
  .stat__label { color: var(--n-400); max-inline-size: 24ch; }
  @media (width < 992px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (width < 480px) { .stat-grid { grid-template-columns: minmax(0, 1fr); } .stat { min-block-size: 0; } }

  /* ------------------------------------------------ production */
  .production__card { display: grid; gap: var(--space-5); justify-items: start; padding: var(--card-pad); }
  .production__icon { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; color: var(--n-100); border: var(--border); border-radius: var(--radius); background: var(--n-700); }
  .production__icon .icon, .production__icon .viz-icon { inline-size: 1.5rem; block-size: 1.5rem; }
  .production__icon:empty { display: none; }
  .production__text { font-size: var(--d3); }

  /* ------------------------------------------------ CTA band */
  .cta-band { padding: 0 var(--space-4) var(--section); }
  .cta-band__panel {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: stretch;
    max-inline-size: calc(var(--container) + 4rem); margin-inline: auto; padding: var(--space-4);
    background: var(--surface); border-radius: var(--radius);
  }
  .cta-band__copy { display: grid; gap: var(--space-5); justify-items: start; align-content: center; padding: clamp(1.5rem, 0.5rem + 4vw, 4rem); }
  .cta-band__heading { justify-self: stretch; font-size: var(--d8); max-inline-size: 16ch; }
  .cta-band__text { font-size: var(--d3); max-inline-size: 50ch; }
  .cta-band__visual { min-block-size: 20rem; overflow: hidden; background: var(--bg); border-radius: var(--radius); }
  @media (width < 992px) {
    .cta-band__panel { grid-template-columns: minmax(0, 1fr); }
    .cta-band__visual { min-block-size: 14rem; }
  }
  @media (width < 480px) { .cta-band { padding-inline: var(--space-2); } }

  /* ------------------------------------------------ footer */
  .site-footer { padding: 0 var(--space-4) var(--space-4); }
  .site-footer__frame {
    display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); gap: var(--space-4);
    max-inline-size: calc(var(--container) + 4rem); margin-inline: auto; padding: var(--space-4);
    background: var(--surface); border-radius: var(--radius);
  }
  .site-footer__brand { display: grid; gap: var(--space-4); place-content: center; justify-items: center; padding: var(--space-9) var(--space-6); border: var(--border); border-radius: var(--radius); background: var(--bg); }
  .site-footer__brand img { block-size: var(--logo-h); inline-size: auto; }
  .site-footer__brand p { color: var(--n-400); text-align: center; text-wrap: balance; }
  .site-footer__navs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); padding: clamp(1.5rem, 1rem + 2vw, 3rem); border: var(--border); border-radius: var(--radius); background: var(--bg); }
  .site-footer__nav { display: grid; gap: var(--space-2); align-content: start; justify-items: start; }
  .site-footer__heading { font-size: var(--d3); font-weight: 500; letter-spacing: -0.01em; margin-block-end: var(--space-3); padding-block-end: var(--space-3); border-block-end: var(--border); justify-self: stretch; }
  .site-footer__nav a { display: inline-flex; align-items: center; min-block-size: 2.25rem; line-height: 1.3; text-decoration: none; color: var(--n-400); }
  .site-footer__nav a:focus-visible { outline-offset: 0; }
  @media (hover: hover) { .site-footer__nav a:hover { color: var(--n-100); } }
  .site-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-5) var(--space-6); border: var(--border); border-radius: var(--radius); background: var(--bg); color: var(--muted); font-size: var(--d1); }
  @media (width < 992px) {
    .site-footer__frame { grid-template-columns: minmax(0, 1fr); }
    .site-footer__brand { padding-block: var(--space-8); }
  }
  @media (width < 640px) {
    .site-footer { padding-inline: var(--space-2); }
    .site-footer__navs { grid-template-columns: minmax(0, 1fr); }
  }

  /* ------------------------------------------------ inner page head */
  .page-head { padding-block: calc(var(--header-h) + clamp(3rem, 2.17rem + 3.7vw, 5.5rem)) clamp(2.5rem, 2rem + 2.2vw, 4rem); }
  .page-head .wrap { display: grid; gap: var(--space-5); justify-items: start; }
  .page-head__heading { justify-self: stretch; font-size: var(--d9); line-height: var(--lh-display); }
  .page-head__intro { font-size: var(--d3); max-inline-size: 60ch; color: var(--n-300); }

  /* ------------------------------------------------ products page */
  .chip-nav { position: sticky; inset-block-start: var(--header-h); z-index: 5; background: rgb(15 15 15 / 0.94); border-block: 1px solid var(--n-700); }
  .chip-nav__list { display: flex; gap: var(--space-2); overflow-x: auto; padding-block: var(--space-3); scrollbar-width: none; }
  .chip { display: inline-flex; align-items: center; min-block-size: 2.5rem; padding-inline: 1rem; white-space: nowrap; text-decoration: none; font-size: var(--d1); font-weight: 500; color: var(--n-300); border: var(--border); border-radius: var(--radius); background: var(--bg); }
  .chip span { text-box: trim-both cap alphabetic; }
  .chip:focus-visible { outline: none; border-color: var(--n-100); box-shadow: 0 0 0 1px var(--n-100); }
  @media (hover: hover) { .chip:hover { color: var(--n-100); border-color: var(--n-500); } }

  .range { scroll-margin-block-start: calc(var(--header-h) + 4rem); }
  .range + .range { padding-block-start: 0; }
  .range__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
  @media (width < 1100px) { .range__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (width < 640px) { .range__grid { grid-template-columns: minmax(0, 1fr); } }

  /* ------------------------------------------------ numbered cards (capabilities page) */
  .num-grid { display: grid; gap: var(--gap); align-items: start; }
  .num-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .num-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .num-card { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); }
  .num-card__num { color: var(--n-100); }
  .num-card__heading { font-size: var(--d4); }
  .num-card__text { font-size: var(--d1); line-height: 1.55; }
  @media (width < 1200px) { .num-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (width < 992px) { .num-grid--5, .num-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (width < 560px) { .num-grid--5, .num-grid--4 { grid-template-columns: minmax(0, 1fr); } }
  .architecture + .software, .software + .development, .development + .production { padding-block-start: 0; }
  .page-head + .section { padding-block-start: var(--space-7); }

  /* ------------------------------------------------ contact */
  .contact { padding-block: var(--space-4) var(--section); }
  .contact__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: start; }
  .enquiry { display: grid; gap: var(--space-5); align-content: start; padding: var(--card-pad); }
  .enquiry__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .field { display: grid; gap: var(--space-2); align-content: start; }
  .field__label { font-size: var(--d1); font-weight: 500; color: var(--n-100); }
  .field__input {
    inline-size: 100%; block-size: 3rem; padding: 0 var(--space-4);
    font-size: max(1rem, 16px); line-height: 1.25; color: var(--n-100);
    background: var(--n-700); border: var(--border); border-radius: var(--radius);
    transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
  }
  .field__input::placeholder { color: var(--muted); opacity: 1; }
  .field__input:focus-visible { outline: none; border-color: var(--n-100); box-shadow: 0 0 0 1px var(--n-100); }
  .field__input--area { block-size: auto; min-block-size: 9rem; padding-block: var(--space-3); line-height: 1.45; resize: vertical; }
  .field__input[aria-invalid="true"] { border-color: var(--bad); }
  .field__input[aria-invalid="true"]:focus-visible { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
  .field__error { color: var(--bad); font-size: var(--d1); }
  .select { position: relative; }
  .select__control { appearance: none; padding-inline-end: 2.75rem; cursor: pointer; }
  .select__chevron { position: absolute; inset-inline-end: var(--space-4); inset-block-start: 50%; inline-size: 1rem; block-size: 1rem; translate: 0 -50%; pointer-events: none; color: var(--n-400); }
  .enquiry__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-2); }
  .enquiry__status { padding: var(--space-4); background: var(--n-700); border: var(--border); border-inline-start: 2px solid var(--ok); border-radius: var(--radius); color: var(--n-100); }
  .enquiry__note { color: var(--muted); font-size: var(--d1); max-inline-size: 60ch; }
  .contact-aside { display: grid; gap: var(--gap); align-content: start; }
  .contact-aside__block { display: grid; gap: var(--space-4); justify-items: start; padding: var(--card-pad); }
  .contact-aside__icon { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; color: var(--n-100); border: var(--border); border-radius: var(--radius); background: var(--n-700); }
  .contact-aside__heading { font-size: var(--d5); }
  .contact-aside__email { font-size: var(--d4); font-weight: 500; color: var(--n-100); text-decoration-color: var(--n-500); }
  .contact-aside__links { display: grid; gap: var(--space-2); justify-items: start; }
  @media (width < 992px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } }
  @media (width < 600px) { .enquiry__row { grid-template-columns: 1fr; } }

  /* ------------------------------------------------ 404 + generic */
  .notfound { padding-block: 0 var(--section); }
  .prose-section { padding-block: 0 var(--section); }
  .prose { max-inline-size: 68ch; display: grid; gap: 1rem; }
  .point-list { display: grid; gap: var(--space-2); }

  /* ------------------------------------------------ motion start states (only when html.fx; reduced motion and ?nofx skip them) */
  html.fx .rv:not(.in) { opacity: 0; transform: translateY(24px); }
  html.fx [data-split]:not(.in) { opacity: 0; }
  html.fx:not(.gsap) .rv { transition: opacity .7s cubic-bezier(.25,.46,.45,.94), transform .7s cubic-bezier(.25,.46,.45,.94); }
  html.fx:not(.gsap) [data-split] { transition: opacity .7s ease; }
  .split-line { display: block; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .carousel__slide, .carousel__slide img, .ladder__band, .ladder__marker, .btn__text, .btn__icon { transition: none; }
  }
  html.is-static { scroll-behavior: auto; }
  html.is-static :is(.carousel__slide, .carousel__slide img, .ladder__band, .ladder__marker, .btn__text, .btn__icon) { transition: none; }
}