/* ==========================================================================
   ARTISAN ACOUSTICS — LANDING TEMPLATE
   --------------------------------------------------------------------------
   A standalone dark editorial stylesheet for long-form campaign pages
   (template: "landing"). It does NOT load site.css: a landing page renders its
   own shell, so this file carries its own reset, its own header and its own
   footer. Nothing here leaks onto the other 23 pages, and nothing in site.css
   has to bend to accommodate it.

   Identity:
     Display   Bebas Neue, uppercase, tight leading
     Labels    IBM Plex Mono, wide tracking, small caps-ish
     Body      Manrope
     Ink       #f4f0e8 cream on #121211 near-black
     Accent    #df3b37 red — a red vertical spine runs down every section

   ---------------------------------------------------------------- contrast --
   One red cannot do every job at WCAG 2.2 AA, so there are four. #df3b37 is
   4.35:1 on #121211 and 3.85:1 on #eee9df — fine for a 1px rule, a hard drop
   shadow or a 6rem heading, short of the 4.5:1 that the 0.6rem mono labels
   carrying most of the accent colour need. So: --accent for graphics and
   display type; --accent-ink / --accent-ink-light for small red text on dark
   and on paper; --accent-fill for the red that cream labels sit ON, because
   cream on #df3b37 is only 4.2:1. Each is a shade from the next and none is
   distinguishable in place. The same reasoning lifts two body greys that sat
   at 4.2–4.4:1. Everything else is exactly as designed.
   ========================================================================== */

@import url("fonts-landing.css");

/* --------------------------------------------------------------- tokens -- */
:root {
  --bg:            #121211;  /* page ground                                  */
  --bg-2:          #171716;  /* alternate dark band                          */
  --bg-3:          #111110;  /* deepest dark band                            */
  --bg-footer:     #0d0d0c;
  --paper:         #eee9df;  /* light band                                   */
  --paper-2:       #ece7dd;  /* product panel                                */
  --paper-hi:      #fffaf1;  /* hover / pure                                 */

  --ink:           #fffaf1;  /* on dark   — 18.3:1                           */
  --ink-light:     #161615;  /* on paper  — 14.2:1                           */

  --accent:        #df3b37;  /* graphics, rules, shadows, display type       */
  --accent-hi:     #ff514c;  /* hover                                        */
  --accent-ink:    #e8514c;  /* small text on dark  — 5.2:1                  */
  --accent-ink-light: #bc2a26; /* small text on paper — 5.0:1                */
  --accent-fill:   #cf3430;  /* red the cream labels sit ON — 4.9:1          */
  --accent-fill-hi: #b82b27; /* ...and its hover — 6.0:1                     */
  --accent-link:   #ec605b;  /* inline links, which sit on tinted panels     */

  --font-display:  "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-body:     Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --gutter:        clamp(1rem, 4vw, 4rem);
  --wrap:          1360px;
}

/* ---------------------------------------------------------------- reset -- */
.t-landing *, .t-landing *::before, .t-landing *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #121211; }
body.t-landing {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: #f4f0e8;
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
.t-landing img { max-width: 100%; }
.t-landing button, .t-landing a { -webkit-tap-highlight-color: transparent; }
.t-landing button:focus-visible,
.t-landing a:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 4px; }
.t-landing ::selection { background: var(--accent); color: var(--paper-hi); }

.t-landing .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: 0; left: 0; z-index: 100;
  padding: 0.75rem 1rem; background: var(--accent-fill); color: var(--paper-hi);
  font: 600 0.7rem/1 var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none; transform: translateY(-120%);
}
.skip-link:focus { transform: translateY(0); }

.site-shell { background: var(--bg); overflow: hidden; }

/* Inline links inside prose. Every other link on this page is a styled button,
   card or nav item, so a bare one is easy to forget — and the browser default
   blue on #171716 is 2.4:1. Dark ground by default, paper ground overridden.
   --accent-link rather than --accent-ink because these land on the tinted
   callout panels, which lift the background just enough to fail 4.5:1. */
.t-landing main a:not([class]) { color: var(--accent-link); text-decoration: underline; text-underline-offset: 0.2em; }
.t-landing .proof-section a:not([class]),
.t-landing .driver-section a:not([class]),
.t-landing .download-section a:not([class]) { color: var(--accent-ink-light); }
.t-landing main:focus { outline: none; }

/* The red spine + its chapter number, repeated down the left of every section.
   Purely decorative: the chapter number is also in the section label text. */
.section-spine {
  position: absolute; top: 0; bottom: 0; left: clamp(0.55rem, 1.45vw, 1.45rem);
  z-index: 5; width: 1px; background: var(--accent); pointer-events: none;
}
.section-spine i {
  position: absolute; top: 1.25rem; left: -0.62rem;
  display: grid; place-items: center; width: 1.24rem; height: 1.24rem;
  background: var(--accent-fill); color: var(--paper-hi);
  font: 500 0.42rem/1 var(--font-mono); letter-spacing: 0.02em; font-style: normal;
}

/* Film grain. Fixed, 5.5% — enough to kill banding in the gradients. */
.noise {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- topbar -- */
.topbar {
  position: fixed; top: 0; z-index: 50; width: 100%;
  padding: 1.1rem var(--gutter);
  transition: background 0.22s var(--ease-out), border-color 0.22s var(--ease-out), padding 0.22s var(--ease-out);
}
.topbar.is-scrolled {
  padding-block: 0.75rem;
  background: rgb(18 18 17 / 92%);
  border-bottom: 1px solid rgb(244 240 232 / 12%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 1440px; margin: 0 auto;
}
.brand-lockup { display: flex; align-items: center; gap: 0.65rem; color: var(--ink); text-decoration: none; }
.brand-mark { width: 31px; height: 31px; object-fit: contain; }
.brand-name { font-size: 0.65rem; font-weight: 800; line-height: 1.05; letter-spacing: 0.14em; text-transform: uppercase; }
.brand-name span {
  display: block; margin-top: 0.18rem; color: var(--accent-ink);
  font: 500 0.48rem/1.3 var(--font-mono); letter-spacing: 0.14em;
}
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.6rem); }
.nav-links a {
  color: rgb(255 250 241 / 82%); font: 500 0.63rem/1 var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  transition: color 0.16s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-cta, .mobile-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.75rem 1rem; background: var(--accent-fill); border: 1px solid var(--accent-fill);
  color: var(--paper-hi); font: 600 0.61rem/1 var(--font-mono);
  letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none;
  transition: background 0.16s var(--ease-out), border-color 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}
.nav-cta:hover, .mobile-cta:hover { background: var(--accent-fill-hi); border-color: var(--accent-fill-hi); }
.nav-cta:active, .mobile-cta:active, .button-primary:active { transform: scale(0.97); }
.menu-toggle { display: none; padding: 0.35rem; background: none; border: 0; color: var(--ink); cursor: pointer; }
.menu-toggle svg { display: block; }
.mobile-menu { display: none; }

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative; display: grid; isolation: isolate;
  align-items: stretch; min-height: 770px; padding-top: 5.6rem;
}
.hero-bg { position: absolute; inset: 0; z-index: -3; opacity: 0.52; background: #121211 50% / cover no-repeat; }
.hero-shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, #121211 3%, rgb(18 18 17 / 90%) 34%, rgb(18 18 17 / 35%) 77%, #121211),
    linear-gradient(rgb(0 0 0 / 0%) 70%, #121211);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(370px, 0.93fr);
  align-items: center; gap: clamp(2rem, 4vw, 6rem);
  width: min(1440px, 100%); margin: 0 auto;
  padding: clamp(3rem, 7vw, 7rem) var(--gutter) clamp(3rem, 4vw, 4rem);
}
.chapter-kicker {
  display: flex; align-items: center; gap: 0.7rem;
  color: var(--accent-ink); font: 500 0.62rem/1 var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.chapter-kicker::before { content: ""; display: block; width: 26px; height: 1px; background: currentColor; }
.hero-copy { max-width: 675px; padding: 1rem 0 2rem; animation: settle 0.7s var(--ease-out) both; }
.hero-title {
  max-width: 620px; margin: 1.35rem 0 1.2rem; color: var(--ink);
  font-family: var(--font-display); font-size: clamp(4.7rem, 10.2vw, 9.5rem);
  font-weight: 400; line-height: 0.82; letter-spacing: -0.035em; text-transform: uppercase;
}
.hero-title em { font-style: normal; color: var(--accent); }
.hero-body {
  max-width: 500px; margin: 0; color: rgb(255 250 241 / 82%);
  font-size: clamp(0.95rem, 1.4vw, 1.08rem); font-weight: 500; line-height: 1.75;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.button-primary, .button-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  padding: 1rem 1.15rem; font: 600 0.66rem/1 var(--font-mono);
  letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none;
  transition: all 0.16s var(--ease-out);
}
.button-primary { background: var(--accent-fill); border: 1px solid var(--accent-fill); color: var(--paper-hi); box-shadow: 0 12px 30px rgb(223 59 55 / 22%); }
.button-primary:hover { background: var(--accent-fill-hi); border-color: var(--accent-fill-hi); transform: translateY(-2px); }
.button-secondary { background: rgb(18 18 17 / 20%); border: 1px solid rgb(255 250 241 / 42%); color: var(--ink); }
.button-secondary:hover { background: rgb(255 250 241 / 10%); border-color: rgb(255 250 241 / 62%); }
.hero-footnote { max-width: 510px; margin: 1.35rem 0 0; color: rgb(255 250 241 / 56%); font: 400 0.58rem/1.6 var(--font-mono); }

.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 570px; animation: settle 0.76s 0.12s var(--ease-out) both; }
.hero-ring { position: absolute; width: min(44vw, 580px); aspect-ratio: 1; border: 1px solid rgb(255 250 241 / 13%); border-radius: 50%; }
.hero-ring::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgb(223 59 55 / 50%); border-radius: 50%; }

/* The product panel: a clipped top-right corner and a hard red offset shadow,
   as if a print block had been laid down slightly out of register. */
.product-panel {
  position: relative; z-index: 1; width: min(100%, 430px); padding: 1.25rem;
  background: var(--paper-2);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  box-shadow: 28px 32px rgb(223 59 55 / 82%), 0 30px 70px rgb(0 0 0 / 45%);
}
.product-panel::before { content: ""; position: absolute; inset: auto 0.62rem 0.62rem 0.62rem; z-index: 3; height: 1px; background: rgb(18 18 17 / 24%); }
.product-panel::after { content: ""; position: absolute; top: 3.05rem; right: 0.62rem; bottom: 0.62rem; z-index: 3; width: 1px; background: rgb(223 59 55 / 78%); }
.product-panel img { display: block; width: 100%; height: 470px; object-fit: cover; object-position: center; background: #f7f4ee; filter: contrast(1.04) saturate(0.82); }
.product-meta-row {
  position: relative; z-index: 4; display: flex; justify-content: space-between; gap: 0.5rem;
  min-height: 1.65rem; color: rgb(18 18 17 / 72%); font: 500 0.48rem/1 var(--font-mono); letter-spacing: 0.1em;
}
.product-label {
  position: absolute; top: 13%; right: -1.1rem; z-index: 2; width: 174px; padding: 0.75rem;
  background: var(--bg); color: var(--ink); font: 500 0.58rem/1.55 var(--font-mono);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.product-label b { display: block; margin-bottom: 0.25rem; color: var(--accent-ink); font-weight: 500; }
.product-index {
  position: absolute; bottom: 1.5rem; left: -2.2rem; display: flex; align-items: center; gap: 0.55rem;
  color: var(--ink); font: 500 0.55rem/1 var(--font-mono); letter-spacing: 0.1em;
}
.product-index::before { content: ""; width: 1.65rem; height: 1px; background: var(--accent); }

.hero-rail {
  position: absolute; bottom: 1.8rem; left: max(1rem, 4vw); right: max(1rem, 4vw);
  display: flex; align-items: end; justify-content: space-between;
  padding-top: 1rem; border-top: 1px solid rgb(255 250 241 / 18%);
}
.rail-points { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; color: rgb(255 250 241 / 76%); font: 500 0.56rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.rail-points span { display: flex; align-items: center; gap: 0.45rem; }
.rail-points i { display: inline-block; width: 6px; height: 6px; border: 1px solid var(--accent); border-radius: 50%; }
.scroll-cue { display: flex; align-items: center; gap: 0.45rem; color: rgb(255 250 241 / 68%); font: 500 0.55rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.scroll-cue:hover { color: var(--ink); }

/* ---------------------------------------------------------------- proof -- */
.proof-section { position: relative; padding: clamp(5rem, 9vw, 9rem) var(--gutter); background: var(--paper); color: var(--ink-light); }
.section-wrap { width: min(var(--wrap), 100%); margin: 0 auto; }
.proof-layout { display: grid; grid-template-columns: 0.58fr 1.42fr; align-items: start; gap: clamp(2rem, 5vw, 7rem); }
/* The section label is the one accent-coloured element that appears on both
   grounds, so it takes the dark-ground red by default and the paper red inside
   the light bands. Getting this the wrong way round is a real 3.1:1 failure,
   not a nicety. */
.section-label { margin: 0; color: var(--accent-ink); font: 500 0.6rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.proof-section .section-label,
.driver-section .section-label,
.download-section .section-label { color: var(--accent-ink-light); }
.proof-title, .detail-title, .cta-title {
  margin: 1rem 0 0; font-family: var(--font-display); font-weight: 400;
  line-height: 0.9; letter-spacing: -0.025em; text-transform: uppercase;
}
.proof-title { max-width: 350px; font-size: clamp(3.8rem, 7vw, 6.5rem); }
.proof-text { max-width: 670px; margin: 0.4rem 0 2.6rem; font-size: clamp(1rem, 1.4vw, 1.22rem); font-weight: 500; line-height: 1.75; }
.proof-register {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem;
  margin: 0 0 1.1rem; padding: 0.7rem 0;
  border-top: 1px solid rgb(22 22 21 / 28%); border-bottom: 1px solid rgb(22 22 21 / 17%);
  color: rgb(22 22 21 / 66%); font: 500 0.54rem/1.25 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.proof-register span:last-child { color: var(--accent-ink-light); }
.proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgb(22 22 21 / 22%); }
.proof-item { display: flex; flex-direction: column; justify-content: space-between; min-height: 155px; padding: 1.25rem 1rem 1rem 0; border-right: 1px solid rgb(22 22 21 / 20%); }
.proof-item:not(:first-child) { padding-left: 1rem; }
.proof-item:last-child { border-right: 0; }
.proof-number { display: block; font-family: var(--font-display); font-size: clamp(2.3rem, 4vw, 3.5rem); line-height: 0.9; }
.proof-caption { max-width: 150px; font: 500 0.59rem/1.55 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.proof-footnote { margin-top: 1.5rem; color: rgb(22 22 21 / 66%); font: 400 0.58rem/1.55 var(--font-mono); }

/* --------------------------------------------------------------- detail -- */
.detail-section { position: relative; padding: clamp(5rem, 9vw, 10rem) var(--gutter); background: var(--bg-2); color: var(--ink); }
.detail-section::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--accent); }
.detail-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: start; gap: clamp(2.5rem, 6vw, 8rem); }
.detail-sticky { position: sticky; top: 7.5rem; }
.detail-title { max-width: 520px; font-size: clamp(4.2rem, 8vw, 8rem); }
/* `em` is the only inline tag the sanitiser keeps that can carry emphasis, so
   it is what marks the red word in a display heading. Not italic — red. */
.detail-title em, .tm-title em, .cta-title em, .proof-title em { font-style: normal; color: var(--accent); }
.detail-intro { max-width: 430px; margin: 1.2rem 0 2rem; color: rgb(255 250 241 / 76%); font-size: 1rem; line-height: 1.75; }
.mini-link {
  display: inline-flex; align-items: center; gap: 0.6rem; padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--accent); color: var(--ink);
  font: 500 0.62rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}
.mini-link:hover { color: var(--accent-ink); }
.detail-rail { border-top: 1px solid rgb(255 250 241 / 20%); }
.detail-card { display: grid; grid-template-columns: 72px 1fr; gap: 1.1rem; padding: 1.75rem 0; border-bottom: 1px solid rgb(255 250 241 / 18%); }
.detail-card-num { padding-top: 0.25rem; color: var(--accent-ink); font: 500 0.62rem/1 var(--font-mono); }
.detail-card h3 { margin: 0; color: var(--ink); font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 0.9; letter-spacing: 0.01em; text-transform: uppercase; }
.detail-card p { max-width: 520px; margin: 0.7rem 0 0; color: rgb(255 250 241 / 74%); font-size: 0.94rem; line-height: 1.75; }
.detail-image { position: relative; margin-top: 3rem; background: var(--paper); overflow: hidden; }
.detail-image::before {
  content: attr(data-tag); position: absolute; top: 0.8rem; left: 0.8rem; z-index: 2;
  padding: 0.5rem 0.6rem; background: var(--bg); color: var(--ink);
  font: 500 0.52rem/1 var(--font-mono); letter-spacing: 0.1em;
}
.detail-image::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0.82rem; z-index: 2; width: 1px; background: var(--accent); }
.detail-image img { display: block; width: 100%; height: min(57vw, 530px); object-fit: cover; transition: transform 0.7s var(--ease-out); }
.detail-image:hover img { transform: scale(1.025); }
.detail-image-tag { position: absolute; bottom: 1rem; left: 1rem; padding: 0.65rem 0.8rem; background: var(--accent-fill); color: var(--paper-hi); font: 500 0.56rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* ------------------------------------------------------------------- TM -- */
.tm-section { position: relative; isolation: isolate; padding: clamp(5rem, 9vw, 10rem) var(--gutter); background: var(--bg-3); color: var(--ink); }
.tm-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2.5rem, 6vw, 8rem); }
.tm-image-panel {
  position: relative; padding: 1rem; overflow: hidden; background: var(--paper);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  box-shadow: 18px 20px var(--accent);
}
.tm-image-panel::after { content: ""; position: absolute; top: 3.1rem; right: 0.6rem; bottom: 0.6rem; width: 1px; background: var(--accent); }
.tm-image-panel img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; filter: contrast(1.06) saturate(0.88); }
.tm-image-meta { display: flex; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.72rem; color: rgb(18 18 17 / 72%); font: 500 0.5rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
/* Callout rules pointing at the two central drivers. Decorative — the same
   model numbers appear in the driver cards and the spec table.

   Positioned against .tm-image-frame, which hugs the photograph exactly, NOT
   against the panel: the panel also contains the meta row and its padding, so
   a percentage measured from the panel drifts off the driver the moment the
   image aspect changes. The percentages come from the content file, because
   they are a property of the photograph, not of the design. */
.tm-image-frame { position: relative; }
.tm-axis { position: absolute; right: 0; z-index: 2; width: 34%; height: 1px; background: var(--accent); }
.tm-axis span { position: absolute; right: 0; bottom: 0.55rem; padding: 0.35rem 0.45rem; background: var(--bg); color: var(--ink); font: 500 0.47rem/1 var(--font-mono); letter-spacing: 0.08em; white-space: nowrap; }
.tm-caption { max-width: 480px; margin: 1.65rem 0 0; color: rgb(255 250 241 / 66%); font: 400 0.63rem/1.7 var(--font-mono); }
.tm-title, .drivers-title, .spec-title, .downloads-title, .supplied-title {
  margin: 1rem 0 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(4rem, 7.6vw, 7.4rem); line-height: 0.86; letter-spacing: -0.025em; text-transform: uppercase;
}
.tm-intro { max-width: 650px; margin: 1.2rem 0 2rem; color: rgb(255 250 241 / 84%); font-size: clamp(1rem, 1.45vw, 1.16rem); line-height: 1.78; }
.tm-comparison-figure { margin: 2.1rem 0 2.3rem; padding: 0.8rem; background: #0b0b0a; border: 1px solid rgb(255 250 241 / 24%); box-shadow: 12px 13px rgb(223 59 55 / 82%); }
.tm-comparison-meta { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0.1rem 0.7rem; color: rgb(255 250 241 / 62%); font: 500 0.47rem/1 var(--font-mono); letter-spacing: 0.095em; text-transform: uppercase; }
.tm-comparison-meta span:first-child { color: var(--accent-ink); }
.tm-comparison-headings { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 1px; background: rgb(255 250 241 / 16%); }
.tm-comparison-headings strong { display: block; padding: 0.5rem 0.55rem; background: var(--bg-2); color: var(--ink); font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem, 1.75vw, 1.45rem); line-height: 0.95; letter-spacing: 0.035em; text-transform: uppercase; }
.tm-comparison-headings strong:last-child { color: var(--accent-ink); }
.tm-comparison-figure img, .tm-comparison-figure svg { display: block; width: 100%; aspect-ratio: 16 / 9; background: #090909; }
.tm-comparison-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.7rem 1.1rem; padding: 0.75rem 0.1rem 0.15rem; color: rgb(255 250 241 / 72%); font: 500 0.5rem/1.4 var(--font-mono); letter-spacing: 0.055em; text-transform: uppercase; }
.tm-comparison-figure figcaption span { display: inline-flex; align-items: center; gap: 0.45rem; }
.signal-dot { display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; }
.signal-dot.disrupted { background: var(--accent); box-shadow: 0 0 0 3px rgb(223 59 55 / 15%); }
.signal-dot.coherent { background: var(--ink); box-shadow: 0 0 0 3px rgb(255 250 241 / 13%); }
.tm-points { border-top: 1px solid rgb(255 250 241 / 20%); }
.tm-point { display: grid; grid-template-columns: 70px 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid rgb(255 250 241 / 20%); }
.tm-point > span { color: var(--accent-ink); font: 500 0.64rem/1.4 var(--font-mono); }
.tm-point h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.55rem, 2.8vw, 2.3rem); line-height: 0.9; letter-spacing: 0.01em; text-transform: uppercase; }
.tm-point p { margin: 0.55rem 0 0; color: rgb(255 250 241 / 72%); font-size: 0.88rem; line-height: 1.72; }
.tm-official-note { position: relative; margin: 1.5rem 0 0; padding: 1rem 1rem 1rem 1.15rem; background: rgb(255 250 241 / 6%); border-left: 2px solid var(--accent); color: rgb(255 250 241 / 78%); font-size: 0.78rem; line-height: 1.7; }

/* ------------------------------------------------------------- supplied --
   What is in the box, and in which finish. A dark band, so it separates the
   published-specification table above it from the download cards below. */
.supplied-section { position: relative; isolation: isolate; padding: clamp(5rem, 9vw, 10rem) var(--gutter); background: var(--bg-3); color: var(--ink); }
.supplied-layout { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: start; gap: clamp(2.5rem, 6vw, 8rem); }
.supplied-title { max-width: 500px; font-size: clamp(3.6rem, 6.8vw, 6.4rem); }
.supplied-copy { max-width: 440px; margin: 1.2rem 0 0; color: rgb(255 250 241 / 78%); font-size: 0.94rem; line-height: 1.75; }
.supplied-table { width: 100%; border-collapse: collapse; border-top: 1px solid rgb(255 250 241 / 28%); }
.supplied-table caption { padding-bottom: 0.7rem; color: var(--accent-ink); font: 500 0.58rem/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; text-align: left; }
.supplied-table th, .supplied-table td { padding: 1rem 0; border-bottom: 1px solid rgb(255 250 241 / 20%); text-align: left; vertical-align: baseline; }
.supplied-table thead th { color: rgb(255 250 241 / 72%); font: 500 0.55rem/1.4 var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase; }
.supplied-table tbody th { padding-right: 1rem; color: rgb(255 250 241 / 72%); font: 500 0.59rem/1.5 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; }
.supplied-table td { color: var(--ink); font: 500 clamp(0.68rem, 1.2vw, 0.8rem)/1.5 var(--font-mono); letter-spacing: 0.035em; }

/* The swatch is a hint, not a colour proof — a monitor cannot show you a high
   gloss lacquer, and the note under it says so. */
.finish-swatches { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.finish-swatches li { display: flex; align-items: center; gap: 0.5rem; color: rgb(255 250 241 / 78%); font: 500 0.56rem/1.4 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; }
.finish-swatches i { display: block; width: 0.85rem; height: 0.85rem; border: 1px solid rgb(255 250 241 / 45%); }
.supplied-note { margin: 1.5rem 0 0; padding: 1rem 1rem 1rem 1.15rem; background: rgb(255 250 241 / 6%); border-left: 2px solid var(--accent); color: rgb(255 250 241 / 78%); font-size: 0.78rem; line-height: 1.7; }

/* -------------------------------------------------------------- drivers -- */
.driver-section { position: relative; isolation: isolate; padding: clamp(5rem, 9vw, 10rem) var(--gutter); background: var(--paper); color: var(--ink-light); }
.driver-heading { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(250px, 0.56fr); align-items: end; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 4rem); }
.driver-heading > p { max-width: 360px; margin: 0 0 0.45rem; color: rgb(22 22 21 / 70%); font-size: 0.86rem; line-height: 1.72; }
.driver-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgb(22 22 21 / 22%); border: 1px solid rgb(22 22 21 / 22%); }
.driver-card { display: flex; flex-direction: column; min-height: 100%; background: var(--paper); color: var(--ink-light); text-decoration: none; transition: background 0.22s var(--ease-out); }
.driver-card:hover { background: var(--paper-hi); }
.driver-photo { position: relative; display: grid; place-items: center; min-height: 300px; overflow: hidden; background: #dbd7cf; border-bottom: 1px solid rgb(22 22 21 / 22%); }
.driver-photo::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0.8rem; z-index: 1; width: 1px; background: var(--accent); }
.driver-photo img { display: block; max-width: 76%; max-height: 300px; object-fit: contain; mix-blend-mode: multiply; filter: contrast(1.04) saturate(0.82); transition: transform 0.35s var(--ease-out); }
.driver-card:hover .driver-photo img { transform: scale(1.055); }
.driver-photo span { position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2; padding: 0.45rem 0.52rem; background: var(--bg); color: var(--ink); font: 500 0.5rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.driver-copy { display: flex; flex: 1; flex-direction: column; padding: 1.2rem; }
.driver-copy h3 { max-width: 230px; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.85rem, 3vw, 2.55rem); line-height: 0.88; letter-spacing: 0.01em; text-transform: uppercase; }
.driver-copy ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.85rem; margin: 1.25rem 0 1.5rem; padding: 1rem 0; list-style: none; border-top: 1px solid rgb(22 22 21 / 22%); border-bottom: 1px solid rgb(22 22 21 / 22%); }
.driver-copy li { font: 500 0.56rem/1.45 var(--font-mono); letter-spacing: 0.04em; }
.driver-copy li::before { content: "•"; margin-right: 0.36rem; color: var(--accent-ink-light); }
.driver-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; color: var(--accent-ink-light); font: 500 0.58rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* ----------------------------------------------------------------- spec -- */
.spec-section { position: relative; isolation: isolate; padding: clamp(5rem, 9vw, 10rem) var(--gutter); background: var(--bg-2); color: var(--ink); }
.spec-layout { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: start; gap: clamp(2.5rem, 8vw, 10rem); }
.spec-title { max-width: 480px; }
.spec-intro { max-width: 420px; margin: 1.2rem 0 0; color: rgb(255 250 241 / 76%); font-size: 0.94rem; line-height: 1.75; }
.spec-source { max-width: 420px; margin: 1.2rem 0 0; color: rgb(255 250 241 / 62%); font: 400 0.56rem/1.65 var(--font-mono); }
.spec-source a { color: var(--accent-ink); }
.spec-table { width: 100%; border-collapse: collapse; border-top: 1px solid rgb(255 250 241 / 28%); }
.spec-table th, .spec-table td { padding: 1.18rem 0; border-bottom: 1px solid rgb(255 250 241 / 20%); text-align: left; vertical-align: baseline; }
.spec-table th { width: minmax(170px, 0.95fr); padding-right: 1rem; color: rgb(255 250 241 / 72%); font: 500 0.59rem/1.5 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; }
.spec-table td { color: var(--ink); font: 500 clamp(0.68rem, 1.2vw, 0.8rem)/1.5 var(--font-mono); letter-spacing: 0.035em; }

/* ------------------------------------------------------------ downloads -- */
.download-section { position: relative; isolation: isolate; padding: clamp(5rem, 9vw, 9rem) var(--gutter); background: var(--paper); color: var(--ink-light); }
/* Technical drawings are shown, not ghosted. See the note on plate() in
   build/render-landing.mjs: behind text they made every string on the page
   unmeasurable and pushed four colours under AA. In front, on their own paper,
   they read as what they are — the source for the numbers beside them. */
.plate { margin: 2rem 0 0; padding: 0.85rem; background: var(--paper-hi); border: 1px solid rgb(22 22 21 / 22%); box-shadow: 12px 13px rgb(223 59 55 / 82%); }
.download-section .plate { background: var(--paper-hi); }
.supplied-section .plate, .tm-section .plate { box-shadow: 12px 13px var(--accent); }
.plate-meta { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.6rem; color: rgb(22 22 21 / 72%); font: 500 0.5rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.plate-meta span:first-child { color: var(--accent-ink-light); }
.plate img { display: block; width: 100%; height: auto; }
.plate figcaption { margin-top: 0.7rem; color: rgb(22 22 21 / 74%); font: 400 0.62rem/1.6 var(--font-mono); }
.plate-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.plate-pair .plate { margin: 0; }
.download-layout { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); align-items: start; gap: clamp(2.5rem, 7vw, 8rem); }
.download-layout > div > p:last-child { max-width: 400px; margin: 1.2rem 0 0; color: rgb(22 22 21 / 70%); font-size: 0.92rem; line-height: 1.75; }
.download-grid { display: grid; gap: 1px; background: rgb(22 22 21 / 22%); border: 1px solid rgb(22 22 21 / 22%); }
.download-card { position: relative; padding: 1.35rem 1.35rem 1.2rem; background: var(--paper); color: var(--ink-light); text-decoration: none; transition: background 0.18s var(--ease-out), transform 0.18s var(--ease-out); }
.download-card:hover { z-index: 1; background: var(--paper-hi); transform: translate(7px); }
.download-card::after { content: ""; position: absolute; top: 0; right: 0.75rem; bottom: 0; width: 1px; background: var(--accent); }
.download-index { color: var(--accent-ink-light); font: 500 0.52rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.download-card h3 { max-width: 450px; margin: 0.65rem 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 0.88; letter-spacing: 0.01em; text-transform: uppercase; }
.download-card p { max-width: 440px; margin: 0.7rem 0 1.2rem; color: rgb(22 22 21 / 70%); font-size: 0.83rem; line-height: 1.65; }
.download-action { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent-ink-light); font: 500 0.58rem/1 var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase; }

/* ------------------------------------------------------------------ CTA -- */
.cta-section { position: relative; display: grid; isolation: isolate; align-items: center; min-height: 710px; padding: clamp(5rem, 10vw, 10rem) var(--gutter); }
.cta-bg { position: absolute; inset: 0; z-index: -2; background: 50% / cover no-repeat; }
.cta-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #121211 5%, rgb(18 18 17 / 85%) 45%, rgb(18 18 17 / 20%)); }
.cta-wrap { width: min(var(--wrap), 100%); margin: 0 auto; }
.cta-card { width: min(100%, 720px); padding: clamp(1.5rem, 4vw, 3.5rem); background: rgb(18 18 17 / 70%); border-left: 3px solid var(--accent); backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px); }
.cta-title { max-width: 650px; font-size: clamp(4.4rem, 9.4vw, 8.5rem); color: var(--ink); }
.cta-copy { max-width: 590px; margin: 1.2rem 0 1.8rem; color: rgb(255 250 241 / 82%); font-size: 1rem; line-height: 1.8; }
.cta-note { max-width: 580px; margin: 1.2rem 0 0; color: rgb(255 250 241 / 62%); font: 400 0.58rem/1.65 var(--font-mono); }

/* No closing photograph. 710px of empty ground is not drama, it is a gap — and
   a blurred translucent card over a flat colour is just a flat colour. So the
   band shortens, takes a tone of its own, and the card gets a real edge. */
.cta-section--flat { min-height: auto; padding-block: clamp(4rem, 8vw, 7.5rem); background: var(--bg-2); }
/* Solid, not a 4% cream tint. The tint lifted the ground just enough to put
   the red section label at 4.43:1 — and being a composite, it was a value axe
   could only guess at. An opaque colour is both measurable and 4.66:1. */
.cta-section--flat .cta-card {
  background: #1c1c1b;
  border: 1px solid rgb(255 250 241 / 14%); border-left: 3px solid var(--accent);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* --------------------------------------------------------------- footer -- */
.site-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem var(--gutter); background: var(--bg-footer);
  border-top: 1px solid rgb(255 250 241 / 10%);
  color: rgb(255 250 241 / 62%); font: 400 0.56rem/1.4 var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-links a { color: rgb(255 250 241 / 76%); text-decoration: none; }
.footer-links a:hover { color: var(--accent-ink); text-decoration: underline; }

@keyframes settle { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 920px) {
  .nav-links, .nav-cta { display: none; }
  .menu-toggle { display: block; }
  .mobile-menu { display: grid; gap: 1rem; margin-top: 0.7rem; padding: 1rem; background: rgb(18 18 17 / 98%); border: 1px solid rgb(255 250 241 / 16%); }
  .mobile-menu a { color: var(--ink); font: 500 0.65rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; padding-top: 4.5rem; }
  .hero-copy { padding-bottom: 0; }
  .hero-visual { min-height: 510px; }
  .hero-rail { position: relative; inset: auto; margin: 0 1rem; padding: 1rem 0; }
  .scroll-cue { display: none; }
  .proof-layout, .detail-layout, .tm-layout, .spec-layout,
  .download-layout, .driver-heading, .driver-grid,
  .supplied-layout { grid-template-columns: 1fr; }
  .driver-photo { min-height: 340px; }
  .detail-sticky { position: static; }
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-item:nth-child(2) { border-right: 0; }
  .proof-item:nth-child(-n+2) { border-bottom: 1px solid rgb(22 22 21 / 20%); }
  .product-panel { width: min(84%, 410px); }
}

@media (max-width: 560px) {
  .topbar { padding: 0.9rem 1rem; }
  .hero-grid { padding-inline: 1rem; }
  .hero-title { font-size: clamp(4.25rem, 20vw, 6.6rem); }
  .hero-visual { min-height: 405px; }
  .product-panel { padding: 0.75rem; box-shadow: 16px 18px rgb(223 59 55 / 82%), 0 30px 70px rgb(0 0 0 / 45%); }
  .product-panel img { height: 335px; }
  .product-label { top: 12%; right: -0.6rem; width: 140px; font-size: 0.49rem; }
  .product-index { bottom: 0.8rem; left: -1rem; }
  .section-spine { left: 0.42rem; }
  .rail-points { gap: 0.75rem; }
  .rail-points span:nth-child(3) { display: none; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-item, .proof-item:not(:first-child) { min-height: 110px; padding: 1rem 0; border-right: 0; border-bottom: 1px solid rgb(22 22 21 / 20%); }
  .proof-item:last-child { border-bottom: 0; }
  .detail-card { grid-template-columns: 48px 1fr; }
  .detail-image img { height: 320px; }
  .tm-point { grid-template-columns: 42px 1fr; gap: 0.65rem; }
  .tm-axis { width: 44%; }
  .tm-comparison-figure { padding: 0.55rem; box-shadow: 8px 9px rgb(223 59 55 / 82%); }
  .tm-comparison-meta { font-size: 0.42rem; }
  .tm-comparison-headings strong { min-height: 2.7rem; padding: 0.45rem; font-size: 0.92rem; }
  .tm-comparison-figure figcaption { display: grid; grid-template-columns: 1fr; font-size: 0.45rem; }
  .driver-photo { min-height: 280px; }
  .driver-copy ul { grid-template-columns: 1fr; }
  /* A two-column key/value row cannot hold its shape at 390px, so each spec
     stacks: label above value, which is also how a screen reader reads it. */
  .spec-table, .spec-table tbody, .spec-table tr,
  .supplied-table, .supplied-table tbody, .supplied-table tr { display: block; }
  .spec-table thead, .supplied-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .spec-table tr, .supplied-table tr { padding: 1rem 0; border-bottom: 1px solid rgb(255 250 241 / 20%); }
  .spec-table th, .spec-table td,
  .supplied-table th, .supplied-table td { display: block; padding: 0; border: 0; }
  .spec-table td, .supplied-table td { margin-top: 0.35rem; }
  .plate-pair { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}

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