/* Synteko New Zealand - site styles
   ---------------------------------------------------------------------------
   Ported from the client's approved design (Claude Design project
   "Synteko NZ homepage design", synteko-nz/index.html + floor-finishes.html),
   which is built on the Modernist template with Synteko Brand Guidelines v1.0
   overrides layered on top.

   Two things carry verbatim from that design and should not be "tidied":
     1. The 28px baseline (--leading). Section padding, list gaps and line
        heights are all multiples/halves of it. Change it and the vertical
        rhythm that makes the ruled layout read as a system falls apart.
     2. The 2px rules (--color-divider). The design uses rule weight, not
        boxes or shadows, to separate content. Cards have borders, not
        elevation.
   --------------------------------------------------------------------------- */

/* ── tokens ─────────────────────────────────────────────────────────────── */

:root {
  /* Brand Guidelines v1.0 */
  --font-heading: 'Roboto', Arial, Helvetica, sans-serif;
  --font-body: 'Roboto', Arial, Helvetica, sans-serif;
  --font-heading-weight: 300;

  --color-accent: #D82F2A;
  --color-accent-600: #c02722;
  --color-accent-700: #a8221e;
  --color-bg: #ffffff;
  --color-text: #333333;

  --color-page: #EFEFEF;
  --color-ink-nav: #000000;
  --color-nav-link: #CCCCCC;
  --color-foot: #3B3B3B;
  --color-foot-text: #AAAAAA;
  --color-link: #428BCA;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* rhythm */
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-md: 0px;
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
p { margin: 0 0 var(--space-3); }
img { display: block; max-width: 100%; }
figure { margin: 0; }

a { color: var(--color-link); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
strong { font-weight: 700; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-accent); color: #fff; padding: 10px 16px; text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.rule2 { height: 2px; border: 0; margin: 0; background: var(--color-divider); }

/* ── kicker ─────────────────────────────────────────────────────────────── */

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}
.kicker::before { content: ""; width: 10px; height: 10px; background: var(--color-accent); flex: none; }

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); color: #fff; }
.btn-primary:active { background: var(--color-accent-700); }
.btn-ghost { color: var(--color-accent); border-color: var(--color-divider); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

/* ── tags ───────────────────────────────────────────────────────────────── */

.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: .02em; padding: 3px 10px;
}
.tag-accent { background: #fff2ef; color: #7c1405; }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
.p-tags { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── nav ────────────────────────────────────────────────────────────────── */

.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
  background: var(--color-ink-nav);
  border-bottom: 0;
  position: sticky; top: 0; z-index: 100;
}
.nav a { color: var(--color-nav-link); text-decoration: none; font-size: 14px; white-space: nowrap; }
.nav a:hover { color: #fff; }
.nav a[aria-current='location'], .nav a[aria-current='page'] { color: #fff; }
.nav .btn-primary { color: #fff; }

.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.nav-brand img { height: 34px; display: block; }
.nav-wordmark {
  font-family: var(--font-heading); font-weight: 700; font-size: 22px;
  letter-spacing: .04em; color: #fff; line-height: 1;
}
.nav-region {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-nav-link);
}

.nav-toggle {
  display: none; background: none; border: 1px solid #555; color: #fff;
  font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer;
}

/* mega menu */
/* The trigger must be a continuous hover target from the link down to the
   panel. As an inline span its box is only as tall as the text, leaving the
   nav's 12px vertical padding as a dead strip that closes the menu while the
   pointer is still travelling toward it. Stretching to the nav's full height
   and bleeding back out over the padding removes the gap entirely.
   `position: static` is deliberate - the panel positions against .nav so it
   spans the full width, not against this item. */
.nav-item {
  position: static;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  margin-block: calc(-1 * var(--space-3));
  padding-block: var(--space-3);
}
.nav-item > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-item > a::after {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transform: translateY(1px); transition: transform 120ms ease;
}
.nav-item:hover > a::after, .nav-item:focus-within > a::after { transform: translateY(1px) rotate(180deg); }

.mega {
  visibility: hidden; opacity: 0; position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  background: #fff; border-bottom: 4px solid var(--color-accent);
  box-shadow: var(--shadow-lg);
  /* Hiding is held back ~160ms so a slightly diagonal pointer path across the
     panel's own edge doesn't snap it shut. Opening stays immediate. */
  transition: opacity 120ms ease, visibility 0s linear 160ms;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-item:hover .mega, .nav-item:focus-within .mega {
  visibility: visible; opacity: 1;
  transition: opacity 120ms ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .mega { transition: none; }
  .nav-item > a::after { transition: none; }
}
.mega-inner {
  max-width: 1200px; margin: 0 auto; padding: calc(1.5 * var(--leading)) var(--edge);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--leading) 0;
}
.mega-col { padding: 0 clamp(12px, 1.5vw, 28px); border-left: 2px solid var(--color-divider); }
.mega-col:first-child, .mega-col:nth-child(5) { padding-left: 0; border-left: 0; }
.mega-head {
  display: block; font-family: var(--font-heading); font-weight: 700;
  font-size: 16px; line-height: var(--leading); color: var(--color-text);
  text-decoration: none; margin-bottom: var(--half);
}
.nav .mega a { color: #666666; }
.nav .mega a:hover { color: var(--color-accent); }
.nav .mega .mega-head { color: var(--color-text); }
.nav .mega .mega-head:hover { color: var(--color-accent); }
.mega-img {
  width: 100%; height: 96px; object-fit: contain; display: block;
  background: #fff; border: 2px solid var(--color-divider); padding: 8px; margin-bottom: var(--half);
}
.mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mega-col ul a { display: block; font-size: 13.5px; line-height: 20px; text-decoration: none; }
/* Product count on grouped entries (Floor Finishes), so the three finish
   categories read as sized buckets rather than three bare labels. */
.mega-count {
  display: inline-block; margin-left: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  font-feature-settings: "tnum" 1;
}
.mega-col ul a:hover .mega-count { color: var(--color-accent); }
.mega-cta {
  grid-column: 1 / -1; margin-top: var(--leading); padding-top: var(--half);
  border-top: 2px solid var(--color-divider);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--leading); flex-wrap: wrap;
}
.mega-cta .note {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-700); margin: 0;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }
  .nav { flex-wrap: wrap; }
  .nav-item, .nav > a:not(.nav-brand) { display: none; }
  .nav[data-open="true"] { padding-bottom: var(--space-3); }
  .nav[data-open="true"] .nav-item,
  .nav[data-open="true"] > a:not(.nav-brand) { display: block; width: 100%; padding: 8px 0; }
  /* Undo the desktop hover-bridge geometry: in the stacked menu the negative
     margin would pull each row over the one above it. */
  .nav[data-open="true"] .nav-item { align-self: auto; margin-block: 0; }
  /* Hover has no meaning on touch - "Products" is a plain link to the index. */
  .nav-item > a::after { display: none; }
  .mega, .nav[data-open="true"] .mega { display: none; }
}

/* ── display type ───────────────────────────────────────────────────────── */

.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: clamp(42.4px, 5.72vw, 76.3px);
  letter-spacing: -0.02em; margin: 0; margin-left: -0.058em;
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; }
.display--sm { font-size: clamp(36px, 4.6vw, 60px); line-height: clamp(38px, 4.9vw, 63.6px); }
.h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading)); letter-spacing: -0.015em;
  margin: 0; text-box: trim-both cap alphabetic;
}
.sub {
  font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0; text-box: trim-both cap alphabetic;
}
.note {
  font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 52ch;
  text-box: trim-both cap alphabetic;
}

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(3 * var(--leading)) 0;
}
.hero-figure { background: #fff; border: 2px solid var(--color-divider); border-top: 6px solid var(--color-accent); }
.hero-figure .product {
  width: 100%; aspect-ratio: 4 / 5; object-fit: contain; display: block;
  padding: 24px; box-sizing: border-box;
}
.hero-figure figcaption {
  border-top: 2px solid var(--color-divider); padding: var(--half); margin: 0;
  font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-feature-settings: "tnum" 1;
}

/* ── stats ──────────────────────────────────────────────────────────────── */

.stats { padding: calc(2.5 * var(--leading)) 0; }
.stats .grid {
  display: grid; grid-template-columns: repeat(4, auto);
  justify-content: space-between; gap: calc(1.5 * var(--leading)) var(--leading);
}
.stat-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 3.4vw, 48px); line-height: calc(2 * var(--leading));
  color: var(--color-accent); margin: 0; margin-left: -0.045em;
  text-box: trim-both cap alphabetic;
}
.stat-label {
  font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  color: #666666; margin: var(--half) 0 0;
}

/* ── ruled feature rows ─────────────────────────────────────────────────── */

.features { padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.feature {
  display: grid; grid-template-columns: minmax(48px, 80px) minmax(0, 1.1fr) minmax(0, 1.6fr) 120px;
  gap: var(--leading) clamp(20px, 2.5vw, 56px); align-items: baseline;
  padding: calc(1.5 * var(--leading)) 0;
}
.feature + .feature { border-top: 2px solid var(--color-divider); }
.f-num {
  position: relative; font-family: var(--font-heading); font-weight: 700;
  font-size: 15px; line-height: var(--leading); color: var(--color-accent);
  font-feature-settings: "tnum" 1; margin: 0; text-box: trim-both cap alphabetic;
}
.f-num::before {
  content: ""; position: absolute; left: -24px; top: calc(0.5cap - 5px);
  width: 10px; height: 10px; background: var(--color-accent);
}
@media (max-width: 1280px) { .f-num::before { display: none; } }
.f-title {
  font-family: var(--font-heading); font-weight: 500;
  font-size: 24px; line-height: var(--leading); letter-spacing: -0.01em;
  margin: 0; text-box: trim-both cap alphabetic;
}
.f-title a { color: inherit; text-decoration: none; }
.f-title a:hover { color: var(--color-accent); }
.f-copy {
  font-size: 15.5px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 52ch; text-box: trim-both cap alphabetic;
}
.f-thumb {
  width: 120px; height: 120px; object-fit: contain; display: block; align-self: center;
  background: #fff; border: 2px solid var(--color-divider); padding: 8px;
}
.f-thumb--empty {
  display: grid; place-items: center; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: #b0b0b0;
}

/* ── split ──────────────────────────────────────────────────────────────── */

.split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading));
}
.split-figure img { width: 100%; background: #fff; border: 2px solid var(--color-divider); padding: 24px; }
.bullets { list-style: none; margin: var(--leading) 0 0; padding: 0; display: grid; gap: var(--half); }
.bullets li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: var(--leading); }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: calc(50% - 5px);
  width: 10px; height: 10px; background: var(--color-accent);
}
.bullets strong { font-family: var(--font-heading); font-weight: 700; }

/* ── pro resources ──────────────────────────────────────────────────────── */

.pros { padding: calc(2.5 * var(--leading)) 0 calc(3 * var(--leading)); }
.pros .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--color-divider); }
.pro-cell {
  display: block; text-decoration: none; color: inherit;
  padding: calc(1.5 * var(--leading)) clamp(16px, 2vw, 32px) calc(1.5 * var(--leading)) 0;
}
.pro-cell + .pro-cell { border-left: 2px solid var(--color-divider); padding-left: clamp(16px, 2vw, 32px); }
.pro-cell:hover .pro-title { color: var(--color-accent); }
.pro-title {
  font-family: var(--font-heading); font-weight: 500; font-size: 20px;
  line-height: var(--leading); letter-spacing: -0.01em; margin: 0;
  text-box: trim-both cap alphabetic;
}
.pro-copy {
  font-size: 14px; line-height: calc(var(--leading) - 6px); margin: var(--half) 0 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.pro-go {
  display: inline-block; margin-top: var(--half); font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent);
}

/* ── breadcrumb + page head ─────────────────────────────────────────────── */

.crumb {
  font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--leading) 0 0; margin: 0;
}
.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumb li::after { content: "/"; margin-left: 6px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.crumb li:last-child::after { content: ""; }
.crumb a { text-decoration: none; }

.page-head { padding: calc(1.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.page-head .sub { color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* ── featured split (category + product detail) ─────────────────────────── */

.featured {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: start;
  padding: calc(2 * var(--leading)) 0 calc(2.5 * var(--leading));
}
.featured-figure { background: #fff; border: 2px solid var(--color-divider); border-top: 6px solid var(--color-accent); }
.featured-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; padding: 24px; }
.featured-figure .empty {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #b0b0b0;
}

/* ── product grid ───────────────────────────────────────────────────────── */

.cat { padding: calc(2 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.cat-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--leading); flex-wrap: wrap; }
.cat-note {
  font-size: 15.5px; line-height: var(--leading); margin: 0; max-width: 52ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.grid3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 2px solid var(--color-divider); margin-top: var(--leading);
}
.p-cell {
  display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--half);
  padding: calc(1.5 * var(--leading)) clamp(16px, 2vw, 32px) calc(1.5 * var(--leading)) 0;
  text-decoration: none; color: inherit;
}
.p-cell:nth-child(3n+2), .p-cell:nth-child(3n) {
  border-left: 2px solid var(--color-divider); padding-left: clamp(16px, 2vw, 32px);
}
.p-cell:nth-child(n+4) { border-top: 2px solid var(--color-divider); }
.p-img {
  width: 100%; height: 200px; object-fit: contain; display: block;
  background: #fff; border: 2px solid var(--color-divider); padding: 16px;
}
.p-img--empty {
  display: grid; place-items: center; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: #b0b0b0;
}
.p-title {
  font-family: var(--font-heading); font-weight: 500; font-size: 20px;
  line-height: var(--leading); letter-spacing: -0.01em; margin: 0;
  text-box: trim-both cap alphabetic;
}
.p-cell:hover .p-title { color: var(--color-accent); }
.p-copy {
  font-size: 14px; line-height: calc(var(--leading) - 6px); margin: 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.p-go { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }

/* ── prose + spec tables ────────────────────────────────────────────────── */

.prose { max-width: var(--measure); padding-bottom: var(--leading); }
.prose p { font-size: 15.5px; line-height: var(--leading); }
.prose h2 { font-size: 26px; margin: calc(1.5 * var(--leading)) 0 var(--half); }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: var(--leading); margin-bottom: var(--half); }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: calc(50% - 5px);
  width: 10px; height: 10px; background: var(--color-accent);
}

.block { margin-top: calc(1.5 * var(--leading)); }
.block > h2 {
  font-family: var(--font-heading); font-weight: 500; font-size: 20px;
  line-height: var(--leading); margin: 0 0 var(--half);
  padding-bottom: var(--half); border-bottom: 2px solid var(--color-divider);
}

.table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
  width: 38%; vertical-align: top;
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.table-scroll { overflow-x: auto; border: 2px solid var(--color-divider); }

.sizes {
  display: inline-block; margin-top: var(--half);
  padding: 6px 12px; background: #fff2ef; font-size: 14px; color: var(--color-text);
}

/* ── forms ──────────────────────────────────────────────────────────────── */

.panel { background: #fff; border: 2px solid var(--color-divider); padding: calc(1.5 * var(--leading)) var(--leading); }
.panel h2 { font-size: 22px; margin-bottom: var(--leading); }
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--leading) clamp(24px, 4vw, 56px); align-items: start;
  padding: calc(1.5 * var(--leading)) 0 calc(2.5 * var(--leading));
}
.field { display: block; margin-bottom: var(--leading); }
.field > span { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input {
  width: 100%; min-height: 36px; padding: 8px 10px; font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: #fafafa; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 120px; resize: vertical; }

/* Honeypot. Moved off-screen rather than hidden with display:none, because the
   better bots skip fields they can see are not rendered. Screen readers skip it
   via the aria-hidden wrapper and keyboards via tabindex="-1". */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  font-size: 14px; line-height: calc(var(--leading) - 6px);
  margin: var(--half) 0 0; max-width: 52ch;
}
.form-status[data-state="error"] { color: var(--color-accent-700); }
.form-status:empty { display: none; }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: var(--half) 0; border-bottom: 1px solid var(--color-divider); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list strong {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: color-mix(in srgb, var(--color-text) 60%, transparent); margin-bottom: 2px; font-weight: 400;
}
.callout {
  border-left: 3px solid var(--color-accent); background: #fff2ef;
  padding: var(--half) var(--space-4); font-size: 14px; line-height: calc(var(--leading) - 6px);
}
.callout p:last-child { margin-bottom: 0; }
.callout code { font-size: 13px; background: rgba(0,0,0,.06); padding: 1px 4px; }

/* ── red poster close ───────────────────────────────────────────────────── */

.close { background: var(--color-accent); color: var(--color-bg); }
.close .wrap { padding-top: calc(3 * var(--leading)); padding-bottom: calc(3 * var(--leading)); }
.close h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 4.2vw, 56px); line-height: clamp(36px, 4.45vw, 59.4px);
  letter-spacing: -0.015em; margin: 0; margin-left: -0.058em;
  text-box: trim-both cap alphabetic; color: #fff;
}
.close h2 .line { display: block; }
.close .row { margin-top: calc(1.5 * var(--leading)); }
.close .btn-ghost { color: var(--color-bg); border-color: var(--color-bg); }
.close .btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ── footer ─────────────────────────────────────────────────────────────── */

footer { background: var(--color-foot); color: var(--color-foot-text); }
footer .foot-inner { max-width: 1200px; margin: 0 auto; padding: calc(2.5 * var(--leading)) var(--edge) calc(2 * var(--leading)); }
.foot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--leading) clamp(24px, 4vw, 72px); }
.foot-head {
  font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 var(--half); color: #ffffff;
}
.foot-grid p { font-size: 14px; line-height: calc(var(--leading) - 6px); margin: 0; color: var(--color-foot-text); }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot-list a, .foot-grid a { color: #CFCFCF; text-decoration: none; font-size: 14px; }
.foot-list a:hover, .foot-grid a:hover { color: #fff; text-decoration: underline; }
.legal {
  margin-top: calc(2 * var(--leading)); padding-top: var(--leading);
  border-top: 1px solid #555; font-size: 13px; line-height: var(--leading);
  color: var(--color-foot-text);
}

/* ── 404 ────────────────────────────────────────────────────────────────── */

.center-page { text-align: center; padding: calc(4 * var(--leading)) 0; }
.center-page .sub { margin-inline: auto; }
.center-page .row { justify-content: center; }

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .feature { grid-template-columns: minmax(0, 1fr) 96px; gap: var(--half) var(--leading); }
  .feature .f-num, .feature .f-title, .feature .f-copy { grid-column: 1; }
  .feature .f-thumb { grid-column: 2; grid-row: 1 / span 3; width: 96px; height: 96px; }
  .f-copy { max-width: var(--measure); }
}
@media (max-width: 880px) {
  .featured { grid-template-columns: 1fr; }
  .featured-figure { order: -1; }
  .grid3 { grid-template-columns: 1fr 1fr; border-top: 0; }
  .p-cell { border-left: 0 !important; padding-left: 0 !important; border-top: 2px solid var(--color-divider); }
  .p-cell:nth-child(even) { border-left: 2px solid var(--color-divider) !important; padding-left: clamp(16px, 2vw, 32px) !important; }
  .pros .grid { grid-template-columns: 1fr 1fr; border-top: 0; }
  .pro-cell { padding-left: 0 !important; border-left: 0 !important; border-top: 2px solid var(--color-divider); }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; padding-top: calc(2 * var(--leading)); }
  .hero-figure { order: -1; }
  .hero-figure .product { aspect-ratio: 4 / 3; }
  .stats .grid { grid-template-columns: repeat(2, 1fr); justify-content: start; }
  .split { grid-template-columns: 1fr; }
  .split-figure { order: -1; }
  .pros .grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid3 { grid-template-columns: 1fr; }
  .p-cell { border-left: 0 !important; padding-left: 0 !important; }
}