/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 620;
  line-height: var(--leading-snug);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); line-height: var(--leading-tight); letter-spacing: -0.035em; }
h2 { font-size: var(--step-4); letter-spacing: -0.03em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0; text-wrap: pretty; }

/* Model numbers, quantities, spec values — always tabular, always mono-ish */
.num, .model, td[data-num], .stat__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv01" 1;
}

.model {
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

img, video, svg { max-width: 100%; height: auto; display: block; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}

::selection { background: var(--accent); color: var(--accent-on); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 0; left: var(--gutter);
  transform: translateY(-120%);
  z-index: calc(var(--z-header) + 10);
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent-ink); color: var(--accent-on);
  font-weight: 620; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ==========================================================================
   Layout
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--max-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--sunken { background: var(--bg-sunken); }
.section--raised { background: var(--bg-raised); }

.rule { border: 0; border-top: var(--border) solid var(--line); margin: 0; }

/* Section label — small, uppercase, accent-marked */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-size: var(--step--1);
  font-weight: 620;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 2px;
  background: var(--accent);
  flex: none;
}

.lede {
  max-width: var(--max-prose);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.section__head {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}
@media (min-width: 60rem) {
  .section__head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--sp-8);
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  --btn-line: var(--line-strong);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.875rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: var(--border) solid var(--btn-line);
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--step-0);
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--accent-ink);
  --btn-ink: var(--accent-on);
  --btn-line: var(--accent-ink);
}
.btn--primary:hover { --btn-bg: var(--accent-hover); --btn-line: var(--accent-hover); }

.btn--ghost:hover { --btn-bg: var(--surface-hover); --btn-line: var(--ink-faint); }

.btn--lg { padding: 1.0625rem 2rem; font-size: var(--step-1); }

.btn__arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Text link that behaves like a CTA.
   --accent-ink, not --accent: at body size this needs 4.5:1, and the bright
   accent only clears 3:1 in light mode. */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accent-ink);
  font-weight: 620;
  text-decoration: none;
}
.link-cta::after {
  content: "→";
  transition: transform var(--dur) var(--ease-out);
}
.link-cta:hover::after { transform: translateX(4px); }
.link-cta:hover { text-decoration: underline; }

/* ==========================================================================
   Header
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: var(--border) solid transparent;
  transition: border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out);
}
.header[data-stuck="true"] { border-bottom-color: var(--line); }

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 4.5rem;
}
@media (min-width: 48rem) { .header__inner { gap: var(--sp-6); } }

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.03em;
  text-decoration: none;
  /* Must be allowed to shrink, or it pushes the header actions off-screen
     on a 375px viewport. */
  flex: 0 1 auto;
  min-width: 0;
}
@media (min-width: 30rem) { .brand { font-size: var(--step-1); } }

/* The mark is a self-contained badge with its own dark plate, so it needs no
   theme handling — it reads the same in light and dark. */
.brand__mark {
  flex: none;
  width: 1.75rem; height: 1.75rem;
  border-radius: 5px;
  align-self: center;
}
@media (min-width: 30rem) { .brand__mark { width: 2rem; height: 2rem; } }
.footer .brand__mark { width: 2rem; height: 2rem; }

.brand > span:not(.brand__mark) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand__sub {
  display: none;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
@media (min-width: 62rem) { .brand__sub { display: inline; } }

.nav { display: none; margin-inline-start: auto; }
@media (min-width: 64rem) { .nav { display: flex; align-items: center; gap: var(--sp-5); } }

.nav__link {
  padding: var(--sp-2) 0;
  font-size: var(--step-0);
  font-weight: 520;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink); }

.header__actions {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-inline-start: auto;
  flex: none;
}
@media (min-width: 64rem) { .header__actions { margin-inline-start: var(--sp-5); } }

.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  background: transparent;
  color: var(--ink-muted);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.theme-toggle svg { width: 1.125rem; height: 1.125rem; }

/* Exactly one icon shows, and it names the state the reader is IN, not the one
   the next press will produce. No data-theme attribute means auto. */
.theme-toggle__auto, .theme-toggle__sun, .theme-toggle__moon { display: none; }
:root:not([data-theme]) .theme-toggle__auto { display: block; }
:root[data-theme="light"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"]  .theme-toggle__moon { display: block; }

/* Language switcher — a dropdown, not a row of links. Listing languages inline
   stops scaling past two or three, and the roadmap is English, Japanese,
   German, Spanish and Chinese with more after that. Built on details/summary so
   it needs no JavaScript to open, close or take keyboard focus. */
.langs { position: relative; }

.langs > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 2.5rem;
  padding-inline: var(--sp-3);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  font-size: var(--step--1);
  color: var(--ink-muted);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.langs > summary::-webkit-details-marker { display: none; }
.langs > summary:hover { color: var(--ink); border-color: var(--line-strong); }
.langs > summary svg { width: 1rem; height: 1rem; flex: none; }
.langs__now { display: none; }
@media (min-width: 48rem) { .langs__now { display: inline; } }
.langs__chev { transition: transform var(--dur-fast) var(--ease-out); }
.langs[open] > summary { color: var(--ink); border-color: var(--line-strong); }
.langs[open] .langs__chev { transform: rotate(180deg); }

.langs__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--sp-2));
  inset-inline-end: 0;
  z-index: var(--z-overlay);
  min-width: 12rem;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: var(--sp-2);
  list-style: none;
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.langs__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--radius);
  font-size: var(--step--1);
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
}
.langs__item:hover { background: var(--surface-hover); color: var(--ink); }
.langs__item--current { color: var(--ink); font-weight: 620; }
.langs__item--current::after { content: "✓"; color: var(--accent-ink); }
.langs__code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.langs__item--current .langs__code { display: none; }

/* Persistent conversion band above the footer, on every page. The one thing a
   buyer should always be one click from is a person. */
.banner { background: var(--accent-ink); color: var(--accent-on); }
.banner__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  padding-block: var(--sp-5);
  color: inherit; text-decoration: none;
}
.banner__text { display: grid; gap: var(--sp-1); }
.banner__text strong { font-size: var(--step-1); letter-spacing: -0.02em; }
.banner__text span { font-size: var(--step--1); opacity: 0.88; }
.banner__action {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 620; white-space: nowrap;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.banner__inner:hover .btn__arrow { transform: translateX(3px); }

.header__cta { display: none; }
@media (min-width: 48rem) { .header__cta { display: inline-flex; } }

.nav-toggle {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  background: transparent; color: var(--ink);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
@media (min-width: 64rem) { .nav-toggle { display: none; } }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-block: var(--sp-9) var(--sp-8);
  background: var(--media-bg);
  overflow: hidden;
  border-bottom: var(--border) solid var(--line);
}

/* Copy left, machine right. The incumbents in this category (Trumpf, DMG Mori)
   lead with the machine as an object of engineering rather than a stock scene,
   and an editorial split keeps the headline legible without an overlay
   scrim fighting the photography. */
.hero__layout {
  position: relative;
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: var(--sp-9);
    min-height: min(78svh, 46rem);
  }
}

.hero__media {
  position: relative;
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}
.hero__media figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(to top, rgba(4, 5, 7, 0.88), transparent);
  color: #F2F4F7;
  font-size: var(--step--1);
}
.hero__media .model { font-weight: 620; color: #FF8A47; }

/* Engineering grid, drawn not photographed. Replaced by machine video later. */
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  mask-image: radial-gradient(115% 95% at 68% 18%, #000 0%, transparent 68%);
  opacity: 0.55;
  pointer-events: none;
}
.hero__glow {
  position: absolute;
  inset-block-start: -18%;
  inset-inline-end: -8%;
  width: min(52rem, 78vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-weak) 0%, transparent 62%);
  pointer-events: none;
}

.hero__inner { position: relative; }

.hero__title {
  max-width: 20ch;
  margin-bottom: var(--sp-5);
}
.hero__title em {
  font-style: normal;
  color: var(--accent);
}

.hero__lede { max-width: 56ch; margin-bottom: var(--sp-7); }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-7);
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.hero__meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero__meta span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* ==========================================================================
   Stat band — the four hard numbers
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: var(--border) solid var(--line);
}
@media (min-width: 62rem) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat {
  padding: var(--sp-6) var(--sp-5);
  border-inline-end: var(--border) solid var(--line);
  border-block-end: var(--border) solid var(--line);
}
.stat:nth-child(2n) { border-inline-end: 0; }
@media (min-width: 62rem) {
  .stat { border-block-end: 0; padding-block: var(--sp-7); }
  .stat:nth-child(2n) { border-inline-end: var(--border) solid var(--line); }
  .stat:last-child { border-inline-end: 0; }
}

.stat__value {
  display: block;
  font-size: var(--step-4);
  font-weight: 660;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--sp-3);
}
.stat__value sub {
  font-size: 0.42em; font-weight: 600; vertical-align: baseline;
  color: var(--accent-ink); margin-inline-start: 0.15em;
}
.stat__label {
  font-size: var(--step--1);
  color: var(--ink-muted);
  line-height: 1.4;
  text-wrap: pretty;
}

/* ==========================================================================
   Category grid
   ========================================================================== */

.cat-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.cat {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}

/* The catalogue photography is inconsistent: some frames are studio cutouts on
   pure white, others are shot on the factory floor. Left alone, a white cutout
   glares against the dark UI and the grid looks like a scrapbook. Every frame
   therefore gets the same graphite bed and the same edge vignette, which pulls
   the two kinds of photograph into one surface. Remove this once the client
   supplies consistent photography. */
.cat__media {
  position: relative;
  background: var(--media-bg);
  border-bottom: var(--border) solid var(--line);
  overflow: hidden;
}
.cat__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 40%, transparent 52%, rgba(8, 9, 11, 0.30) 100%),
    linear-gradient(to bottom, transparent 62%, rgba(8, 9, 11, 0.16) 100%);
}
:root[data-theme="light"] .cat__media::after,
:root:not([data-theme]) .cat__media::after {
  background:
    radial-gradient(120% 100% at 50% 40%, transparent 58%, rgba(11, 14, 18, 0.10) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .cat__media::after {
    background:
      radial-gradient(120% 100% at 50% 40%, transparent 52%, rgba(8, 9, 11, 0.30) 100%),
      linear-gradient(to bottom, transparent 62%, rgba(8, 9, 11, 0.16) 100%);
  }
}
.cat__media img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  /* Studio cutouts arrive blown out next to factory shots; a touch of contrast
     and desaturation narrows the gap between the two. */
  filter: saturate(0.94) contrast(1.04);
  transition: transform var(--dur-slow) var(--ease-out);
}
.cat:hover .cat__media img { transform: scale(1.035); }

.cat__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-5);
}
.cat:hover {
  border-color: var(--accent-line);
  background: var(--surface-hover);
  transform: translateY(-2px);
}
.cat::after {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.cat:hover::after { transform: scaleX(1); }

.cat__count {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  margin-bottom: var(--sp-3);
}
.cat__name {
  font-size: var(--step-2);
  font-weight: 620;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
}
.cat__models {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Split feature (turnkey)
   ========================================================================== */

.split { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp-9); }
  .split--flip > :first-child { order: 2; }
}

/* Two-up machine detail. Reads as evidence beside the claim, which is how the
   incumbents present process capability. */
.split__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.split__media figure {
  margin: 0;
  background: var(--media-bg);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.split__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.split__media figcaption {
  padding: var(--sp-3) var(--sp-4);
  border-top: var(--border) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* The process chain is the argument, so it is drawn as a chain rather than set
   as a row of tags: numbered stages, joined, reading left to right the way the
   part actually moves through the plant. Single-source coverage is what the
   competitors cannot claim, and it should look like a sequence. */
.chain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: 0;
  margin-top: var(--sp-6);
  padding: 0;
  list-style: none;
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  counter-reset: stage;
}
.chain li {
  counter-increment: stage;
  position: relative;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  background: var(--bg-raised);
  border-inline-end: var(--border) solid var(--line);
  border-block-end: var(--border) solid var(--line);
  font-size: var(--step--1);
  font-weight: 560;
  line-height: 1.3;
  color: var(--ink);
}
.chain li::before {
  content: counter(stage, decimal-leading-zero);
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
/* The connector: a hairline notch on the leading edge of each stage after the
   first, so the row reads as flow rather than as separate boxes. */
.chain li:not(:first-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--accent-line), transparent);
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg-raised);
  border-block: var(--border) solid var(--line);
  overflow: hidden;
}
.cta-band__inner { position: relative; max-width: 62ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-7); }
.cta-band__note { margin-top: var(--sp-5); font-size: var(--step--1); color: var(--ink-faint); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  padding-block: var(--sp-8) var(--sp-6);
  background: var(--bg-sunken);
  border-top: var(--border) solid var(--line);
  font-size: var(--step--1);
}
.footer__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  padding-bottom: var(--sp-7);
}
.footer__col h3 {
  font-size: var(--step--1);
  font-weight: 620;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-4);
}
.footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.footer__list a { color: var(--ink-muted); text-decoration: none; }
.footer__list a:hover { color: var(--ink); text-decoration: underline; }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between;
  padding-top: var(--sp-5);
  border-top: var(--border) solid var(--line);
  color: var(--ink-faint);
}

/* ==========================================================================
   Interior pages
   ========================================================================== */

.crumbs {
  padding-block: var(--sp-5) 0;
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--ink-faint); margin-inline: 0.4em; }
.crumbs [aria-current] { color: var(--ink); }

/* Shared image frame. Same graphite bed and vignette as the category grid, so
   mixed studio and factory photography reads as one surface. */
.frame {
  position: relative;
  margin: 0;
  background: var(--media-bg);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.04);
}
.frame--sm img { aspect-ratio: 1 / 1; }
/* Specification sheets are documents: never crop them, never soften them. */
.frame--doc { background: #FFFFFF; }
.frame--doc img { aspect-ratio: auto; object-fit: contain; filter: none; }

.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.thumbs--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }

.prod { display: grid; gap: var(--sp-7); }
@media (min-width: 62rem) {
  .prod { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
}
.prod__model { margin: 0 0 var(--sp-3); }
.prod__model .model { font-size: var(--step-1); color: var(--accent-ink); font-weight: 620; }
.prod__head h1 { margin-bottom: var(--sp-5); }
.prod__head .lede { margin-bottom: var(--sp-6); }
.prod__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }

.factlist { margin: 0; display: grid; gap: 0; border-top: var(--border) solid var(--line); }
.factlist > div {
  display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: var(--border) solid var(--line);
}
.factlist dt { color: var(--ink-muted); font-size: var(--step--1); }
.factlist dd { margin: 0; }
.factlist--wide > div { grid-template-columns: minmax(8rem, 14rem) 1fr; }

.specnote { max-width: var(--max-prose); }
.specnote p { margin-bottom: var(--sp-5); color: var(--ink-muted); }
.specnote strong { color: var(--ink); }
.specnote--empty {
  padding: var(--sp-6);
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
}

.panels {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.panel {
  padding: var(--sp-5);
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
}
.panel h3 { margin-bottom: var(--sp-3); font-size: var(--step-1); }
.panel p { color: var(--ink-muted); }

.bullets { margin: var(--sp-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); max-width: var(--max-prose); }
.bullets li { position: relative; padding-inline-start: var(--sp-5); color: var(--ink-muted); }
.bullets li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em;
  width: 6px; height: 2px; background: var(--accent);
}
.bullets--tight { margin-top: var(--sp-4); gap: var(--sp-2); font-size: var(--step--1); }

.timeline { margin: 0; padding: 0; list-style: none; border-top: var(--border) solid var(--line); }
.timeline li {
  display: grid; gap: var(--sp-2) var(--sp-6);
  padding-block: var(--sp-5);
  border-bottom: var(--border) solid var(--line);
}
@media (min-width: 48rem) { .timeline li { grid-template-columns: 10rem 1fr; } }
.timeline__year { color: var(--accent-ink); font-weight: 620; }
.timeline__event { color: var(--ink-muted); max-width: var(--max-prose); }

/* Wide content must scroll inside its own box, never the page. */
.tablewrap { overflow-x: auto; border: var(--border) solid var(--line); border-radius: var(--radius); }
.idx { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.idx th, .idx td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: var(--border) solid var(--line); white-space: nowrap; }
.idx th { background: var(--bg-raised); font-weight: 620; color: var(--ink); position: sticky; top: 0; }
.idx td { color: var(--ink-muted); }
.idx td a { color: var(--ink); text-decoration: none; }
.idx td a:hover { text-decoration: underline; }
.idx tbody tr:hover { background: var(--surface-hover); }
.idx tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   Motion — reveal on scroll, opt-out respected
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
  }
  [data-reveal].is-revealed { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Japanese
   The Japanese faces are appended after the Latin stack, not in place of it:
   Latin glyphs keep the reader's native UI face and only kana and kanji fall
   through. Hiragino on Apple, Yu Gothic on Windows, Noto on Android and Linux.
   ========================================================================== */
:root:lang(ja),
[lang="ja"] {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto,
               "Segoe UI Variable Text", "Segoe UI",
               "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic UI", "Yu Gothic", Meiryo,
               "Noto Sans JP", "Noto Sans CJK JP",
               "Helvetica Neue", Arial, sans-serif;
}
/* Japanese sets tighter than Latin at the same optical size, and the display
   sizes need less negative tracking or the kanji collide. */
[lang="ja"] h1, [lang="ja"] h2 { letter-spacing: -0.01em; }
[lang="ja"] .hero__title { letter-spacing: 0; line-height: 1.18; }
[lang="ja"] .lede { line-height: 1.8; }
/* ==========================================================================
   Mobile navigation
   The toggle shipped with no behaviour behind it, so below 64rem the whole
   navigation was unreachable. The panel drops out of the header rather than
   covering the page, so the reader keeps their context.
   ========================================================================== */
@media (max-width: 63.99rem) {
  body.nav-open .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: var(--z-overlay);
    margin: 0;
    padding: var(--sp-2) var(--gutter) var(--sp-4);
    background: var(--bg);
    border-block-end: var(--border) solid var(--line);
    box-shadow: var(--shadow-2);
  }
  body.nav-open .nav .nav__link {
    padding: var(--sp-4) 0;
    font-size: var(--step-1);
    border-block-end: var(--border) solid var(--line);
  }
  body.nav-open .nav .nav__link:last-child { border-block-end: 0; }
  .header { position: sticky; }
  .header__inner { position: static; }
  .header { --nav-anchor: 1; }
}
.header .shell { position: relative; }
/* ==========================================================================
   Full-bleed hero backdrop
   The photograph is blurred and darkened in the build, then scrimmed here, so
   the headline sits on a controlled surface rather than on whatever the source
   image happened to expose. That is what makes a full-bleed treatment safe with
   uneven catalogue photography: nothing about the picture has to be good.
   Text is fixed white with a hard-coded scrim, so it does not follow the light
   or dark theme -- the backdrop is dark in both.
   ========================================================================== */
.hero--backdrop { position: relative; isolation: isolate; border-bottom: 0; background: #0A0C10; }

.hero--backdrop .hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Darker at the leading edge where the copy sits, easing off across the frame
   so the machines stay readable on the far side. */
.hero--backdrop .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(6, 8, 11, 0.94) 0%, rgba(6, 8, 11, 0.86) 38%, rgba(6, 8, 11, 0.58) 100%),
    linear-gradient(to bottom, rgba(6, 8, 11, 0.35) 0%, transparent 30%, rgba(6, 8, 11, 0.55) 100%);
}
@media (max-width: 62rem) {
  /* One column on small screens, so the copy needs cover everywhere. */
  .hero--backdrop .hero__scrim {
    background: linear-gradient(to bottom, rgba(6, 8, 11, 0.88) 0%, rgba(6, 8, 11, 0.92) 100%);
  }
}

.hero--backdrop .hero__grid { opacity: 0.14; }

.hero--backdrop .hero__layout {
  grid-template-columns: minmax(0, 1fr);
  min-height: min(74svh, 44rem);
  align-items: center;
}
.hero--backdrop .hero__inner { max-width: 62ch; }

/* Fixed light text: the backdrop is dark whichever theme the reader is in. */
.hero--backdrop .hero__title { color: #FFFFFF; }
.hero--backdrop .hero__title em { color: #FF8A47; }
.hero--backdrop .hero__lede { color: #DFE4EA; }
.hero--backdrop .hero__meta { color: #B9C1CB; }
.hero--backdrop .btn--ghost { --btn-ink: #FFFFFF; --btn-line: rgba(255, 255, 255, 0.5); }
.hero--backdrop .btn--ghost:hover { --btn-bg: rgba(255, 255, 255, 0.10); --btn-line: #FFFFFF; }