/* ==========================================================================
   COLORTEK — main.css
   Loaded on every page. Tokens first; nothing below hard-codes a colour.

   Brand system (from "Colortek Presentation final.pdf", 2026 deck):
   paper ground, near-black ink, Colortek red, the spectrum, bold grotesque
   headlines ending in a red full stop.

   Layout & motion language (client-approved reference): full-height panels
   with rounded corners that stack over the hero on scroll, oversized centred
   display type, quiet news grid, black contact block.

   Radius system: media & panels 24px, small media 14px, interactive 2px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  --paper:      #fafaf8;
  --ink:        #17191d;
  --ink-deep:   #0f1114;
  --ink-muted:  #55575e;
  --ink-subtle: #83858d;
  --rule:       rgba(23, 25, 29, 0.12);

  --accent:       #e31e24;

  --spec-1: #e31e24;
  --spec-2: #ef7d00;
  --spec-3: #f3b700;
  --spec-4: #3f9c35;
  --spec-5: #00a5c8;
  --spec-6: #1263b4;
  --spec-7: #7b3fa0;
  --spectrum: linear-gradient(90deg,
    var(--spec-1), var(--spec-2), var(--spec-3), var(--spec-4),
    var(--spec-5), var(--spec-6), var(--spec-7));

  --on-dark:       rgba(255, 255, 255, 0.94);
  --on-dark-muted: rgba(255, 255, 255, 0.64);
  --on-dark-rule:  rgba(255, 255, 255, 0.16);

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base: 1.0625rem;
  --text-lg:  clamp(1.125rem, 0.4vw + 1rem, 1.3125rem);
  --text-xl:  clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --text-2xl: clamp(1.75rem, 2vw + 1.2rem, 2.5rem);

  /* Display: the deck's bold statement scale. 6rem ceiling. */
  --text-display: clamp(2.625rem, 6.5vw, 6rem);

  --tracking-caps: 0.14em;
  --tracking-display: -0.03em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* 5rem ceiling: adjacent sections meet at 10rem max. Chapter break,
     not a void; tightened twice from 8rem on review. */
  --section-y: clamp(3rem, 6vw, 5rem);

  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --nav-h: 76px;

  --r-panel: 24px;
  --r-media: 14px;
  --r-ui: 2px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 300ms;
  --dur-slow: 600ms;

  --z-nav: 100;
  --z-menu: 200;
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video { display: block; max-width: 100%; height: auto; }
input,
button,
textarea,
select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

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

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

/* The red full stop that ends every Colortek headline in the deck. */
.dot { color: var(--accent); letter-spacing: 0; }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100%;
  z-index: calc(var(--z-menu) + 1);
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-ui);
  font-weight: 600;
}
.skip-link:focus-visible { top: var(--space-4); }


/* --------------------------------------------------------------------------
   4. Buttons
   Rectangular, engineering-sharp. The arrow nudges on hover; the button
   itself compresses on press.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-3) var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--r-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn:active { transform: scale(0.97); }

.btn .arrow {
  font-size: 0.85em;
  transition: transform var(--dur) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover .arrow { transform: translateX(4px); }
}

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--ink-deep); }

.btn--outline {
  background: transparent;
  border-color: var(--rule);
  color: var(--ink);
}
.btn--outline:hover { border-color: var(--ink); }

/* On photography and dark surfaces. */
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: #fff; }


/* --------------------------------------------------------------------------
   5. Navigation
   Three zones: links left, wordmark centre, links right. Transparent over
   the hero wash; solid paper once the page scrolls.
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.nav.is-scrolled::before {
  background: rgba(250, 250, 248, 0.9);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  box-shadow: inset 0 -1px 0 var(--rule);
}

/* Logo anchors the left; every link lives on the right. */
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  height: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nav__group {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 2.5vw, var(--space-8));
  list-style: none;
  padding: 0;
}

.nav__link {
  position: relative;
  padding-block: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* The real logo, dark-lettered variant on light ground; the white-lettered
   original lives on dark surfaces (footer, menu). */
.nav__logo { display: flex; flex: none; }

.nav__logo img {
  height: 38px;
  width: auto;
}

@media (max-width: 600px) {
  .nav__logo img { height: 30px; }
}

/* Hamburger */
.nav__toggle {
  display: none;
  position: relative;
  justify-self: end;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
}

.nav__toggle span {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.nav__toggle span:nth-child(1) { top: 15px; }
.nav__toggle span:nth-child(2) { top: 21px; }
.nav__toggle span:nth-child(3) { top: 27px; }

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Full-screen menu (mobile) */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  align-content: center;
  gap: var(--space-6);
  padding: var(--gutter);
  background: var(--ink-deep);
  color: var(--paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}

.menu.is-open { opacity: 1; visibility: visible; }

.menu__link {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}

.menu__link:hover { color: var(--on-dark-muted); }

.menu__meta {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--on-dark-muted);
}

body.menu-open { overflow: hidden; }

@media (max-width: 920px) {
  .nav__group { display: none; }
  .nav__toggle { display: block; }
  /* Keep the toggle above the panel it controls. */
  .nav { z-index: calc(var(--z-menu) + 1); }
  .nav__toggle { position: relative; z-index: calc(var(--z-menu) + 2); }
  body.menu-open .nav::before { background: transparent; box-shadow: none; backdrop-filter: none; }
  body.menu-open .nav { color: var(--paper); }
  /* The ink-lettered mark would sink into the dark menu overlay;
     the menu carries its own white-lettered logo instead. */
  body.menu-open .nav__logo { visibility: hidden; }
}

.menu__logo img { height: 32px; width: auto; margin-bottom: var(--space-8); }

/* --------------------------------------------------------------------------
   6. Hero + stacking panels
   The hero is sticky at the top; each panel is sticky too, so panels slide
   up and cover whatever came before. Pure CSS; no scroll hijacking.
   -------------------------------------------------------------------------- */

.stack { position: relative; }

.hero {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  /* Shorter than the viewport so the first panel's rounded top edge peeks
     from the bottom: colour on screen immediately, and the stacking
     interaction announces itself without a scroll cue. */
  min-height: calc(100svh - 96px);
  padding: calc(var(--nav-h) + var(--space-8)) var(--gutter) var(--space-12);
  text-align: center;
  /* Paper with a whisper of the spectrum: one cool and one warm tint,
     low enough chroma to stay "engineering paper", not candy. */
  background:
    radial-gradient(58% 46% at 84% 8%, rgba(0, 165, 200, 0.1), transparent 70%),
    radial-gradient(50% 42% at 8% 92%, rgba(227, 30, 36, 0.08), transparent 70%),
    radial-gradient(40% 34% at 92% 78%, rgba(243, 183, 0, 0.07), transparent 70%),
    var(--paper);
}

.hero__inner { max-width: 60rem; }

/* The deck's slide kicker: small red square, tracked caps. */
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hero__kicker::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--accent);
}

.hero__title {
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.02;
}

.hero__sub {
  /* 62ch, balanced: the sub-heading is a full sentence now — at 46ch it broke
     into four ragged lines. Balance keeps every line near-equal width. */
  max-width: 70ch;
  margin: var(--space-6) auto 0;
  font-size: var(--text-lg);
  color: var(--ink-muted);
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* Load-in: title, sub, buttons rise in sequence. Gated on html.js so the
   page renders complete without JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero__kicker,
html.js .hero__title,
html.js .hero__sub,
html.js .hero__actions {
    opacity: 0;
    transform: translateY(22px);
    animation: rise var(--dur-slow) var(--ease) forwards;
  }
  html.js .hero__title { animation-delay: 80ms; }
  html.js .hero__sub { animation-delay: 180ms; }
  html.js .hero__actions { animation-delay: 280ms; }
}

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Panels --- */

.panel {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-inline: clamp(0.75rem, 1.6vw, 1.5rem);
  border-radius: var(--r-panel);
  background: var(--ink-deep);
  color: var(--on-dark);
  text-align: center;
}

.panel__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The photograph settles from a slight zoom as its panel arrives: one slow,
   decorative move per panel, in step with the content rising. */
html.js .panel__media {
  transform: scale(1.07);
  transition: transform 1400ms var(--ease);
}

html.js .panel.in .panel__media { transform: scale(1); }

/* One scrim, dense in the centre where the words sit. */
.panel__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(64% 58% at 50% 52%, rgba(15, 17, 20, 0.8), rgba(15, 17, 20, 0.42) 82%),
    linear-gradient(to bottom, rgba(15, 17, 20, 0.3), rgba(15, 17, 20, 0.5));
}

.panel__inner {
  position: relative;
  max-width: 56rem;
  padding-inline: var(--gutter);
}

.panel__title {
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.02;
  color: #fff;
}

.panel__sub {
  max-width: 52ch;
  margin: var(--space-6) auto 0;
  font-size: var(--text-lg);
  color: var(--on-dark);
}

.panel__actions { margin-top: var(--space-8); }

/* Panel content rises as the panel arrives. */
html.js .panel__inner > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

html.js .panel.in .panel__inner > * { opacity: 1; transform: translateY(0); }
html.js .panel.in .panel__sub { transition-delay: 90ms; }
html.js .panel.in .panel__actions { transition-delay: 180ms; }

/* --------------------------------------------------------------------------
   6b. Interior page hero — the home hero's wash and type, without the
   stickiness or full height. Reuses .hero__kicker/__title/__sub so the
   load-rise animation carries across pages.
   -------------------------------------------------------------------------- */

.page-hero {
  display: grid;
  place-items: center;
  /* Content-driven, not viewport-driven: the block is exactly as tall as
     nav clearance + headline + sub + breathing room. No reserved void. */
  padding: calc(var(--nav-h) + clamp(var(--space-12), 9vh, var(--space-24))) var(--gutter) var(--space-8);
  text-align: center;
  /* The paper fade on top dissolves the wash before the section edge,
     so the hero never ends on a visible tint line. */
  background:
    linear-gradient(to bottom, rgba(250, 250, 248, 0) 55%, var(--paper) 92%),
    radial-gradient(58% 46% at 84% 8%, rgba(0, 165, 200, 0.1), transparent 70%),
    radial-gradient(50% 42% at 8% 92%, rgba(227, 30, 36, 0.08), transparent 70%),
    radial-gradient(40% 34% at 92% 78%, rgba(243, 183, 0, 0.07), transparent 70%),
    var(--paper);
}

.page-hero__inner { max-width: 56rem; }

/* Utility pages (FAQ, thanks): the headline informs, it doesn't perform. */
.hero__title--md { font-size: clamp(2.4rem, 4.6vw, 4.25rem); }

/* The hero's own bottom padding is the gap; the section that follows it
   must not stack a second full chapter-break on top. */
.page-hero + .section { padding-top: var(--space-4); }

/* --------------------------------------------------------------------------
   6c. Coating ranges — huge light rows with a soft spectrum pill on hover,
   and a sticky cut-out product on the right that swaps per row.
   -------------------------------------------------------------------------- */

.ranges {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: start;
}

.range-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) max-content;
  align-items: baseline;
  gap: 0 var(--space-8);
  padding: clamp(var(--space-6), 2.5vw, var(--space-8)) clamp(var(--space-4), 2vw, var(--space-8));
  border-radius: 999px;
  transition: background var(--dur) var(--ease);
}

.range-row__thumb { display: none; }

.range-row__name {
  font-size: clamp(2.2rem, 4.5vw, 3.9rem);
  font-weight: 320;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: transform var(--dur) var(--ease);
}

.range-row__sub {
  font-size: var(--text-lg);
  color: var(--ink-muted);
  transition: transform var(--dur) var(--ease);
}

.range-row__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.range-row__more .arrow { color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
  /* The pill: a whisper of the spectrum sweeping in behind the row. */
  .range-row:hover {
    background: linear-gradient(90deg,
      rgba(227, 30, 36, 0.07),
      rgba(243, 183, 0, 0.06) 45%,
      rgba(0, 165, 200, 0.04) 80%,
      transparent);
  }

  .range-row:hover .range-row__name,
.range-row:hover .range-row__sub { transform: translateX(12px); }
  .range-row:hover .range-row__more { opacity: 1; }
}

/* Keyboard parity: tabbing a row shows the same affordance as hovering it. */
.range-row:focus-visible {
  background: linear-gradient(90deg,
    rgba(227, 30, 36, 0.07),
    rgba(243, 183, 0, 0.06) 45%,
    rgba(0, 165, 200, 0.04) 80%,
    transparent);
}

.range-row:focus-visible .range-row__more { opacity: 1; }

/* The floating cut-out. No frame, no crop: the product sits on the page. */
.ranges__panel {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-8));
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
}

.ranges__panel img {
  max-width: 86%;
  max-height: 92%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 34px 54px rgba(15, 17, 20, 0.28));
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}

.ranges__panel.is-swapping img {
  opacity: 0;
  transform: scale(1.045);
  transition-duration: 160ms;
}

@media (max-width: 880px) {
  .ranges { grid-template-columns: 1fr; }
  .ranges__panel { display: none; }

  .range-row {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas: "thumb name" "thumb sub";
    align-items: center;
    gap: var(--space-1) var(--space-4);
    padding-inline: 0;
    border-radius: var(--r-media);
  }

  .range-row__thumb {
    display: block;
    grid-area: thumb;
    width: 76px;
    height: 92px;
    object-fit: cover;
    border-radius: var(--r-media);
  }

  .range-row__name { grid-area: name; align-self: end; }
  .range-row__sub { grid-area: sub; align-self: start; font-size: var(--text-sm); }
  .range-row__more { display: none; }
}

/* Capability tags — the deck's pill chips (slide 9 grammar). */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
}

.tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tag, var(--accent));
}


.tags--tight { gap: var(--space-2); }

/* Values: the six words carry the culture; give them weight. */
.tags--values { gap: var(--space-3); }

.tags--values .tag {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: 700;
}

.tags--tight .tag {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   6e. Capability trio — one photo per promise: how it cures, looks, lasts.
   Group colour carries through kicker square and chip dots.
   -------------------------------------------------------------------------- */

.cap-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-12));
}

@media (max-width: 980px) { .cap-cards { grid-template-columns: 1fr; } }

.cap-card__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-media);
  background: var(--ink);
}

.cap-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .cap-card:hover .cap-card__media img { transform: scale(1.04); }
}

.cap-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cap-card__kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--group, var(--accent));
}

.cap-card__title {
  margin-top: var(--space-2);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cap-card .tags { margin-top: var(--space-4); }

.cap-card .tag::before { background: var(--group, var(--accent)); }

.cap-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--rule);
}

.cap-cta p {
  font-size: var(--text-lg);
  font-weight: 600;
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   6f. Journey rail — four numbered nodes on one line that draws itself in.
   -------------------------------------------------------------------------- */

.rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-12));
  list-style: none;
  padding: var(--space-6) 0 0;
}

/* The line the journey travels along. */
.rail::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--spectrum);
}

html.js .rail::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1100ms var(--ease);
}

html.js .rail.in::before { transform: scaleX(1); }

.rail__step { position: relative; }

.rail__node {
  position: absolute;
  top: calc(var(--space-6) * -1 - 4px);
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--ink);
}

html.js .rail__node {
  transform: scale(0.4);
  opacity: 0;
  transition: transform 300ms var(--ease), opacity 300ms var(--ease);
}

html.js .rail.in .rail__node { transform: scale(1); opacity: 1; }
html.js .rail.in .rail__step:nth-child(1) .rail__node { transition-delay: 150ms; }
html.js .rail.in .rail__step:nth-child(2) .rail__node { transition-delay: 400ms; }
html.js .rail.in .rail__step:nth-child(3) .rail__node { transition-delay: 650ms; }
html.js .rail.in .rail__step:nth-child(4) .rail__node { transition-delay: 900ms; }

.rail__num {
  display: block;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.rail__title {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.rail__text {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* Once the rail wraps, one line spanning the whole grid would only sit above
   the first row and the absolute nodes would float into the row above. Each
   step carries its own rule instead, cut from the same gradient: a 400%-wide
   spectrum shifted per step, so the four rules still read left-to-right as
   one continuous spectrum rather than reverting to a grey border. */
@media (max-width: 900px) {
  .rail {
    grid-template-columns: 1fr 1fr;
    row-gap: clamp(var(--space-8), 5vw, var(--space-12));
    padding-top: 0;
  }

  .rail::before { display: none; }

  .rail__step { padding-top: var(--space-6); }

  .rail__step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-image: var(--spectrum);
    background-size: 400% 100%;
  }

  .rail__step:nth-child(1)::before { background-position: 0% 0; }
  .rail__step:nth-child(2)::before { background-position: 33.333% 0; }
  .rail__step:nth-child(3)::before { background-position: 66.666% 0; }
  .rail__step:nth-child(4)::before { background-position: 100% 0; }

  .rail__node { top: -4px; }

  html.js .rail__step::before {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 700ms var(--ease);
  }

  html.js .rail.in .rail__step::before { transform: scaleX(1); }
  html.js .rail.in .rail__step:nth-child(1)::before { transition-delay: 0ms; }
  html.js .rail.in .rail__step:nth-child(2)::before { transition-delay: 150ms; }
  html.js .rail.in .rail__step:nth-child(3)::before { transition-delay: 300ms; }
  html.js .rail.in .rail__step:nth-child(4)::before { transition-delay: 450ms; }

  /* Each node lands with its own rule rather than on the desktop cadence. */
  html.js .rail.in .rail__step:nth-child(1) .rail__node { transition-delay: 250ms; }
  html.js .rail.in .rail__step:nth-child(2) .rail__node { transition-delay: 400ms; }
  html.js .rail.in .rail__step:nth-child(3) .rail__node { transition-delay: 550ms; }
  html.js .rail.in .rail__step:nth-child(4) .rail__node { transition-delay: 700ms; }
}

@media (max-width: 520px) {
  .rail { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   6g. Certificate plate — one bordered panel, four credentials, one
   datasheet line. Reads as a document, not a spreadsheet.
   -------------------------------------------------------------------------- */

.cert-plate {
  border: 1px solid var(--rule);
  border-radius: var(--r-media);
  background: #fff;
  overflow: hidden;
}

.cert-plate__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
}

.cred {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  background: #fff;
}

.cred strong {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cred span {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.cred em {
  margin-top: auto;
  padding-top: var(--space-3);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.cert-plate__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-6);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.cert-plate__foot a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  color: var(--ink);
}

.cert-plate__foot a:hover { color: var(--accent); }

@media (max-width: 980px) { .cert-plate__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cert-plate__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   6d. Film — ambient brand video in a rounded panel. Autoplays muted,
   pauses off-screen, and carries a visible pause control (WCAG 2.2.2).
   -------------------------------------------------------------------------- */

.film {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel);
  aspect-ratio: 16 / 9;
  background: var(--ink-deep);
}

.film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(15, 17, 20, 0.85),
    rgba(15, 17, 20, 0.38) 42%,
    rgba(15, 17, 20, 0.05) 72%);
}

.film__body {
  position: absolute;
  left: clamp(var(--space-6), 4vw, var(--space-12));
  right: clamp(var(--space-6), 4vw, var(--space-12));
  bottom: clamp(var(--space-6), 4vw, var(--space-12));
  color: var(--on-dark);
}

.film__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: #fff;
}

.film__sub {
  margin-top: var(--space-2);
  max-width: 52ch;
  color: var(--on-dark);
}

.film__toggle {
  position: absolute;
  right: clamp(var(--space-4), 3vw, var(--space-8));
  top: clamp(var(--space-4), 3vw, var(--space-8));
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(15, 17, 20, 0.62);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.film__toggle:hover { border-color: #fff; }
.film__toggle:active { transform: scale(0.96); }

@media (max-width: 640px) {
  .film { aspect-ratio: 4 / 5; }
}

/* --------------------------------------------------------------------------
   6k. About — story splits, the factory film player, journey timeline.
   -------------------------------------------------------------------------- */

.story {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}

.story--flip { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }

@media (max-width: 900px) {
  .story,
.story--flip { grid-template-columns: 1fr; }
  .story--flip .story__media { order: -1; }
}

.story__title {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 800;
  margin-bottom: var(--space-6);
}

.story__copy p + p { margin-top: var(--space-4); }
.story__copy p { color: var(--body, var(--ink)); max-width: 58ch; }

/* The company's own tagline, set as the one pull-line on the page. */
.story__tagline {
  margin-top: var(--space-8);
  padding-left: var(--space-6);
  border-left: 3px solid var(--accent);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
}

.story__copy .tags { margin-top: var(--space-6); }
.story__cta { margin-top: var(--space-8); }

.story__media img {
  width: 100%;
  border-radius: var(--r-media);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.story--flip .story__media img { aspect-ratio: 4 / 3; }

.story__media figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* --- Factory film: poster, one press, sound on. --- */

.vplayer {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: var(--ink-deep);
  aspect-ratio: 16 / 9;
}

.vplayer__video,
.vplayer__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.vplayer__cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--space-3);
  border: 0;
  background: linear-gradient(to top, rgba(15, 17, 20, 0.82), rgba(15, 17, 20, 0.3) 55%);
  color: #fff;
  text-align: center;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}

.vplayer__cover.is-hidden { opacity: 0; visibility: hidden; }

.vplayer__play {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.5rem;
  padding-left: 6px;
  transition: transform var(--dur) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .vplayer__cover:hover .vplayer__play { transform: scale(1.08); }
}

.vplayer__cover:active .vplayer__play { transform: scale(0.96); }

.vplayer__title {
  margin-top: var(--space-4);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 1.06;
}

.vplayer__sub {
  font-size: var(--text-base);
  color: var(--on-dark);
}

/* --------------------------------------------------------------------------
   6m. About — editorial hero with facts bar, vision/mission panels,
   why-choose grid. Authority through structure, not volume.
   -------------------------------------------------------------------------- */

.page-hero--left {
  text-align: left;
  place-items: stretch;
}

.page-hero--left .hero__sub { margin-inline: 0; }

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: clamp(var(--space-8), 5vw, var(--space-12));
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}

.page-hero .facts { text-align: center; }

.fact dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fact dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-base);
  font-weight: 700;
}

@media (max-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } }

.vmv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  margin-bottom: clamp(var(--space-8), 5vw, var(--space-12));
}

@media (max-width: 800px) { .vmv { grid-template-columns: 1fr; } }

/* No boxes: these are statements, and they get statement type. */
.vmv__panel { padding: 0; }

@media (min-width: 801px) {
  .vmv__panel + .vmv__panel {
    border-left: 1px solid var(--rule);
    padding-left: clamp(var(--space-8), 5vw, var(--space-16));
  }
}

.vmv__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-6);
}

.vmv__title::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--tag, var(--accent));
}

.vmv__panel p {
  font-size: clamp(1.25rem, 1.6vw, 1.625rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 34ch;
}

/* Six reasons, hairline-divided: the deck's grid, quiet and exact. */
.why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-media);
  overflow: hidden;
}

@media (max-width: 980px) { .why { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .why { grid-template-columns: 1fr; } }

.why__cell {
  padding: clamp(var(--space-8), 3vw, var(--space-12));
  background: #fff;
}

.why__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-6);
  border-radius: 12px;
  background: color-mix(in srgb, var(--tag, var(--accent)) 12%, #fff);
  color: var(--tag, var(--accent));
}

.why__cell h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.why__cell > p {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  color: var(--ink-muted);
}

.why__cell ul {
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
}

.why__cell li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.why__cell li + li { margin-top: var(--space-2); }

.why__cell li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  background: var(--tag, var(--accent));
}

/* --------------------------------------------------------------------------
   6l. Pinned journey — the section holds while thirteen years glide past,
   driven by native scroll (CSS scroll-driven animation, no library, no
   hijack). A spectrum progress line fills in step. Browsers without
   support, and reduced-motion users, get a swipeable row instead.
   -------------------------------------------------------------------------- */

.jpin { color: var(--on-dark); }

/* The stage is a rounded card inset from the page edges: paper stays
   visible around it, so it always reads as a section with more below. */
.jpin__stick {
  margin-inline: clamp(0.75rem, 1.6vw, 1.5rem);
  border-radius: var(--r-panel);
  background: var(--ink-deep);
  overflow: hidden;
  padding-block: var(--section-y);
}

.jpin .section-head { margin-bottom: var(--space-8); }

/* Fallback presentation: native sideways swipe with snap. */
.jpin__track {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  padding: var(--space-1) var(--gutter) var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--on-dark-muted) transparent;
}

.jms {
  flex: 0 0 300px;
  scroll-snap-align: start;
  /* --rule is set per milestone inline: one spectrum stop each. */
  border-top: 4px solid var(--rule, rgba(255, 255, 255, 0.3));
  padding-top: var(--space-6);
}

/* The year is the display type of this stage; it has a whole viewport
   band to itself and should own it. */
.jms__year {
  display: block;
  font-size: clamp(3.5rem, max(6.5vw, 8.5vh), 7.5rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.jms p {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: var(--on-dark-muted);
  max-width: 28ch;
}

.jpin__meta { display: none; }

/* Enhanced presentation: the pin. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .jpin {
      /* The extra height IS the sideways travel. */
      height: 300svh;
      view-timeline: --jpin block;
    }

    .jpin__stick {
      position: sticky;
      top: var(--peek, 12px);
      height: calc(100svh - 2 * var(--peek, 12px));
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: clamp(var(--space-8), 6vh, var(--space-16));
      overflow: hidden;
      padding-block: 0;
    }

    .jpin { --peek: clamp(10px, 1.6vh, 18px); }

    .jpin .section-head { margin-bottom: 0; }

    /* The stage's lower edge is designed, not abandoned: the deck's own
       range marker, letterboxed to the bottom. */
    .jpin__meta {
      display: flex;
      justify-content: space-between;
      gap: var(--space-4);
      position: absolute;
      left: var(--gutter);
      right: var(--gutter);
      bottom: clamp(var(--space-6), 4vh, var(--space-12));
      padding-top: var(--space-4);
      border-top: 1px solid var(--on-dark-rule);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      color: var(--on-dark-muted);
    }

    .jpin__track {
      overflow: visible;
      width: max-content;
      scroll-snap-type: none;
      will-change: transform;
      animation: jpin-slide linear both;
      animation-timeline: --jpin;
      animation-range: contain 0% contain 100%;
    }

    .jms { flex-basis: clamp(360px, 32vw, 470px); }
  }
}

@keyframes jpin-slide {
  to { transform: translateX(min(0px, calc(100vw - 100%))); }
}

/* --------------------------------------------------------------------------
   6n. Range pages — breadcrumb, sticky category sub-nav, category sections,
   system blocks, gallery. One template for all five substrates.
   -------------------------------------------------------------------------- */

.range-hero { padding-bottom: var(--space-6); }

/* The range's cut-out product fills the hero's right side: the same object
   the visitor hovered on the products page, now welcoming them here. */
.range-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: center;
}

.range-hero__art {
  justify-self: center;
  width: auto;
  max-height: min(340px, 34vh);
  filter: drop-shadow(0 28px 44px rgba(15, 17, 20, 0.25));
}

@media (max-width: 820px) {
  .range-hero__grid { grid-template-columns: 1fr; }
  .range-hero__art { display: none; }
}

.crumb {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-muted);
}

.crumb a { text-decoration: underline; text-underline-offset: 3px; }
.crumb a:hover { color: var(--accent); }
.crumb span { margin-inline: var(--space-2); color: var(--ink-subtle); }

/* Sticky category rail: the reference site's tabs, scroll-anchored. */


.subnav__track {
  display: flex;
  gap: var(--space-2);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-3) var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}

.subnav__track::-webkit-scrollbar { display: none; }

.subnav__track a {
  flex: none;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.subnav__track a:hover { color: var(--ink); }

.subnav__track a.is-active {
  background: var(--ink);
  color: var(--paper);
}

/* Category sections: uniform catalog entries, content left, photo right. */
.cat {
  padding-block: clamp(var(--space-8), 4vw, var(--space-12));
  scroll-margin-top: calc(var(--nav-h) + 64px);
}


/* A system inside a category: name, register, features. */


.sys__tag {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}


/* Two-column cert plate variant for range pages. */
.cert-plate__grid--two { grid-template-columns: 1fr 1fr; }

.cred__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-2);
  border-radius: 10px;
  background: color-mix(in srgb, var(--spec-4) 12%, #fff);
  color: var(--spec-4);
}

@media (max-width: 640px) { .cert-plate__grid--two { grid-template-columns: 1fr; } }

/* Gallery: one horizontal line, swiped right to left. The page stays
   short; the photography gets a filmstrip. */


/* Still gallery for ranges with few photos: a marquee looping three
   images reads as a glitch; a composed grid reads as a selection. */


/* Other ranges: one quiet rule-topped row. */
.others {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}

.others__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.others a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: 700;
}

.others a .arrow { color: var(--accent); transition: transform var(--dur) var(--ease); }
.others a:hover .arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6o. Range category tabs — icon sector cards, one panel visible at a time,
   featured media with overlay caption, feature rows, real-spec glance tiles.
   -------------------------------------------------------------------------- */

.sectors__label {
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.sectors {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
}

.sectors::-webkit-scrollbar { display: none; }

.sectors__count { display: none; }

/* Phones: the strip really scrolls here, so it must SAY so. Chips go
   compact (icon beside label) so three-and-a-half fit; the half-cut chip,
   a slim visible scrollbar and an edge fade all signal "more this way".
   The is-scrollable / off-start / at-end classes come from main.js and
   only exist when the strip actually overflows — Metal's two tabs fit,
   so it keeps a clean edge and no scrollbar. */
@media (max-width: 640px) {
  .sectors__count { display: inline; }

  .sectors {
    gap: var(--space-2);
    padding-bottom: var(--space-3);
  }

  .sectors.is-scrollable {
    scrollbar-width: thin;
    scrollbar-color: rgba(23, 25, 29, 0.35) rgba(23, 25, 29, 0.08);
  }
  .sectors.is-scrollable::-webkit-scrollbar { display: block; height: 4px; }
  .sectors.is-scrollable::-webkit-scrollbar-track {
    background: rgba(23, 25, 29, 0.08);
    border-radius: 999px;
  }
  .sectors.is-scrollable::-webkit-scrollbar-thumb {
    background: rgba(23, 25, 29, 0.35);
    border-radius: 999px;
  }

  .sectors.is-scrollable {
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent);
            mask-image: linear-gradient(to right, #000 90%, transparent);
  }
  .sectors.is-scrollable.off-start {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 90%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 90%, transparent);
  }
  .sectors.is-scrollable.at-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%);
            mask-image: linear-gradient(to right, transparent, #000 8%);
  }

  .sector {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    min-width: auto;
    max-width: none;
    padding: var(--space-3) var(--space-4);
  }
}

.sector {
  /* Grow to share the row (7 tabs fill it; 2 sit as a natural pair),
     capped so a card never balloons. */
  flex: 1 0 auto;
  max-width: 210px;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  min-width: 128px;
  padding: var(--space-4) var(--space-4);
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.sector:hover { border-color: var(--ink); color: var(--ink); }
.sector:active { transform: scale(0.97); }

.sector.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.catpanels { padding-block: clamp(var(--space-8), 4vw, var(--space-12)) 0; }

.catpanel[hidden] { display: none; }

/* Panel entrance: quick rise when a tab is chosen. */
html.js .catpanel.is-entering .catpanel__grid,
html.js .catpanel.is-entering .glance {
  opacity: 0;
  transform: translateY(10px);
}

.catpanel__grid,
.glance {
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}

.catpanel__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: start;
}

@media (max-width: 900px) { .catpanel__grid { grid-template-columns: 1fr; } }

/* Second system in a panel mirrors the first: image right, gentle rhythm. */
.catpanel__grid + .glance + .catpanel__grid { margin-top: clamp(var(--space-8), 4vw, var(--space-12)); }

@media (min-width: 901px) {
  .catpanel__grid--flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .catpanel__grid--flip .pmedia { order: 2; }
}

/* Featured media with the overlay caption. */
.pmedia {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: var(--ink);
}

.pmedia img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
}

.pmedia__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-12) var(--space-6) var(--space-6);
  background: linear-gradient(to top, rgba(15, 17, 20, 0.85), transparent);
  color: #fff;
}

.pmedia__cap span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--on-dark);
}

.pmedia__cap span::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--accent);
}

.pmedia__cap strong {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.catpanel__title {
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  font-weight: 800;
  line-height: 1.05;
}

.catpanel__sub {
  display: block;
  margin-top: var(--space-4);
  color: var(--accent);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  /* Override the global heading `balance`: it was wrapping this line
     early to even things out. Wrap only when truly out of room. */
  text-wrap: pretty;
}

.catpanel__text {
  margin-top: var(--space-4);
  color: var(--ink-muted);
  max-width: 56ch;
}

/* Feature rows: bold claim + plain-language line. */
.featrows {
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.featrows li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
}

.featrows li + li { border-top: 1px solid var(--rule); }

.featrows li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 8px;
  height: 8px;
  background: var(--accent);
}

.featrows strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 700;
}

.featrows span {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* Glance: the honest spec strip. Real attributes; TDS numbers slot in
   here when the client provides them. */
.glance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: clamp(var(--space-6), 3vw, var(--space-8));
}

@media (max-width: 720px) { .glance { grid-template-columns: 1fr; } }

/* Compliance block nested inside a single category panel, so the references
   travel with the product they belong to rather than the whole page. */
.catpanel__compliance { margin-top: clamp(var(--space-8), 5vw, var(--space-16)); }

.glance__tile {
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-media);
}

.glance__tile span {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.glance__tile strong {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Secondary system in the same category: compact strip. */
.catpanel__second {
  margin-top: clamp(var(--space-6), 3vw, var(--space-8));
  padding: var(--space-6) var(--space-8);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-media);
}

.catpanel__second h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 800;
}

.catpanel__second p {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: 62ch;
}


/* --------------------------------------------------------------------------
   6i. Contact — channel tiles, enquiry form, office cards.
   -------------------------------------------------------------------------- */

.channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 880px) { .channels { grid-template-columns: 1fr; } }

.channel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8);
  border: 1px solid var(--rule);
  border-radius: var(--r-media);
  background: #fff;
  transition: border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.channel:hover { border-color: var(--ink); }
.channel:active { transform: scale(0.99); }

.channel__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.channel__value {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.channel__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.channel__hint .arrow {
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
}

.channel:hover .channel__hint .arrow { transform: translateX(4px); }

/* The icon chip sits above the label at every width; the phone layout below
   only grows it and centres the card around it. */
.channel__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(23, 25, 29, 0.05);
  color: var(--ink);
  transition: background-color var(--dur) var(--ease);
}

/* The WhatsApp mark keeps its brand green. */
.channel:nth-child(2) .channel__icon { color: #25d366; }

.channel:hover .channel__icon { background: rgba(23, 25, 29, 0.09); }

/* Phones: three tall cards cost most of a screen of scroll to say what three
   tap targets can. Collapse to an icon row; the number, the address and the
   hints stay in the accessibility tree, and both are repeated in full in the
   offices block and the footer below. */
@media (max-width: 560px) {
  /* minmax(0,…) rather than 1fr: "WHATSAPP" is one unbreakable word, and a
     plain 1fr lets its min-content width push that column wider than the
     other two on narrow phones. */
  .channels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .channel {
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-2);
    text-align: center;
  }

  .channel__icon {
    width: 44px;
    height: 44px;
  }

  .channel__label {
    font-size: var(--text-xs);
    color: var(--ink);
  }

  /* Small phones: the caps tracking is what stops the longest label fitting. */
  @media (max-width: 380px) {
    .channel__label {
      font-size: 0.6875rem;
      letter-spacing: 0.02em;
    }
  }

  /* Kept for screen readers, so each link still announces its full detail. */
  .channel__value,
  .channel__hint {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- Form + offices split --- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
}

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 800;
  margin-bottom: var(--space-8);
}

.form { display: grid; gap: var(--space-6); }

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: var(--space-2); }

.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.field__input,
.field__textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  background: #fff;
  /* 0.45 alpha ~= 3.2:1 on white: fields read as fields (WCAG 1.4.11). */
  border: 1px solid rgba(23, 25, 29, 0.45);
  border-radius: var(--r-ui);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.field__textarea { min-height: 150px; resize: vertical; }

.field__input::placeholder,
.field__textarea::placeholder { color: var(--ink-muted); }

.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.32);
}

/* 4. Inline errors, CSS-only: appear once the user has interacted. */
.field__error {
  display: none;
  font-size: var(--text-xs);
  font-weight: 600;
  color: #b3261e;
}

.field__input:user-invalid,
.field__textarea:user-invalid { border-color: #b3261e; }

.field__input:user-invalid ~ .field__error,
.field__textarea:user-invalid ~ .field__error { display: block; }

.form .btn { justify-self: start; }

.form__note {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.contact-grid__offices {
  display: grid;
  gap: var(--space-6);
}

.office {
  padding: var(--space-8);
  border: 1px solid var(--rule);
  border-radius: var(--r-media);
  background: #fff;
}

.office__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.office__kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--tag, var(--accent));
}

.office__city {
  margin-top: var(--space-3);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.office__addr {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: 1.7;
}

.office__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
  font-weight: 700;
}

.office__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.office__links a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   6j. FAQ — grouped accordions, category title sticky beside its questions.
   -------------------------------------------------------------------------- */

.faqgrp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: var(--space-8) clamp(var(--space-8), 5vw, var(--space-16));
  padding-block: clamp(var(--space-8), 4vw, var(--space-12));
}

.faqgrp + .faqgrp { border-top: 1px solid var(--rule); }

@media (max-width: 880px) {
  .faqgrp { grid-template-columns: 1fr; gap: var(--space-4); }
}

.faqgrp__head { align-self: start; }

@media (min-width: 881px) {
  .faqgrp__head {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-8));
  }
}

.faqgrp__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.faqgrp__title::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--tag, var(--accent));
}

/* One line of scent under each group title: the rail earns its column. */
.faqgrp__hint {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: 26ch;
}

.faqgrp:first-of-type { padding-top: var(--space-4); }

/* Keep the +/x control within eye's reach of the question text. */
.faq { max-width: 46rem; }

.faq__item + .faq__item { border-top: 1px solid var(--rule); }

.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-6);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease);
}

.faq__q::-webkit-details-marker { display: none; }

/* The question is a real h3 for the document outline; it inherits the
   summary's type wholesale. */
.faq__q h3 {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .faq__q:hover { color: var(--accent); }
}

/* The plus that becomes a cross. */
.faq__q::after {
  content: "+";
  flex: none;
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
}

.faq__item[open] .faq__q::after { transform: rotate(45deg); }

.faq__a {
  max-width: 62ch;
  padding-bottom: var(--space-6);
  color: var(--ink-muted);
}

.faq__a a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq__a a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   6h. Closing CTA — centred, decisive, with a direct line for the callers.
   -------------------------------------------------------------------------- */

.cta-final { text-align: center; }

.cta-final__title {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 800;
}

.cta-final__lead {
  max-width: 46ch;
  margin: var(--space-4) auto 0;
  font-size: var(--text-lg);
  color: var(--ink-muted);
}

.cta-final__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.cta-final__alt {
  display: inline-block;
  /* Grows the hit area past 44px without changing the visual size. */
  padding-block: var(--space-3);
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease);
}

.cta-final__alt:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   7. Section head (shared by news + interior pages)
   -------------------------------------------------------------------------- */

.section { padding-block: var(--section-y); }

/* Utility: a section that hands its bottom break to the next section. */
.section--flush { padding-bottom: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: clamp(var(--space-8), 5vw, var(--space-16));
}

.section-head__title {
  font-size: var(--text-display);
  font-weight: 800;
}

/* Secondary sections on pages that already carry a display-size h1:
   one step down, so the page keeps a single loudest voice. The lead stacks
   under the title instead of floating in the top-right corner. */
.section-head--sub { display: block; }

.section-head--sub .section-head__title {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
}

/* Head with an action opposite the title: text left, one button right.
   Doubled class so it out-ranks the --sub block rule above. */
.section-head.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}

.section-head--split > div { flex: 0 1 auto; min-width: 0; }

.section-head--sub .section-head__lead {
  margin-top: var(--space-3);
  /* max-width: 62ch; */
}


/* --------------------------------------------------------------------------
   7b. Stats band — the deck's "Company at a Glance" grid: cells divided by
   hairlines, exactly one flipped to solid brand red. The 1px gap over a
   rule-coloured background IS the hairline.
   -------------------------------------------------------------------------- */

.stats { padding-bottom: 0; }

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

.stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  min-height: 208px;
  padding: var(--space-8);
  background: var(--paper);
}

.stat__value {
  font-size: clamp(2.5rem, 4.2vw, 4rem);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Counted spans hold their final width while the number runs up. */
[data-count] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.stat__value em {
  font-style: normal;
  font-size: 0.5em;
  font-weight: 600;
}

.stat__label {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink-muted);
}

/* Doubled class so no compound selector can silently repaint the red tile. */
.stat--flag.stat--flag { background: var(--accent); }
.stat--flag .stat__value { color: #fff; }
.stat--flag .stat__label { color: rgba(255, 255, 255, 0.88); }

/* Desktop puts all four tiles on one row, where bottom-anchored content lifts
   any tile whose label wraps to two lines. Subgrid gives every tile the same
   two rows, so the values share a baseline however the labels wrap. Without
   subgrid the flex rules above still apply. */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .stats__grid { grid-template-rows: 1fr auto; }

    .stat {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      row-gap: var(--space-2);
    }

    .stat__value { align-self: end; }
  }
}

@media (max-width: 900px) {
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .stat { min-height: 160px; }
}

@media (max-width: 480px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat { min-height: 120px; }
}

/* --------------------------------------------------------------------------
   7c. Industries — horizontal scroll-snap strip, full-bleed to the right.
   -------------------------------------------------------------------------- */

.section-head__lead {
  /* 60ch: wide enough that a one-sentence lead stays on one or two full
     lines instead of wrapping early with dead space to its right. */
  /* max-width: 60ch; */
  font-size: var(--text-lg);
  color: var(--ink-muted);
}

/* The strip runs on its own, endlessly: the group is duplicated in the
   markup and the track slides by exactly one group width, so the loop has
   no visible seam. Constant motion = linear easing, no exceptions.
   Bottom padding is zero; the next section owns the chapter break. */
.industries { padding-bottom: 0; }

.industry-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.industry-marquee__track {
  display: flex;
  width: max-content;
}

.industry-marquee__group {
  display: flex;
  gap: var(--space-6);
  padding-right: var(--space-6);
}

@media (prefers-reduced-motion: no-preference) {
  .industry-marquee__track {
    animation: industries-loop 48s linear infinite;
    will-change: transform;
  }
}

/* Pausing on hover lets the eye rest on a tile before it leaves. */
@media (hover: hover) and (pointer: fine) {
  .industry-marquee:hover .industry-marquee__track { animation-play-state: paused; }
}

/* Keyboard users need the focused tile to stay put long enough to activate. */
.industry-marquee:focus-within .industry-marquee__track { animation-play-state: paused; }

@keyframes industries-loop {
  to { transform: translateX(-50%); }
}

/* Reduced motion: a still, hand-scrollable row; the duplicate disappears. */
@media (prefers-reduced-motion: reduce) {
  .industry-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .industry-marquee__group[aria-hidden] { display: none; }
}

/* The tile is a link into the matching range page; the anchor is the flex
   item, so the figure inside it simply fills the width. */
.industry-marquee__link {
  flex: 0 0 232px;
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--r-media);
}

.industry-marquee__link:focus-visible { outline-offset: 4px; }

.industry-marquee figure { flex: 0 0 232px; }

.industry-marquee .thumb {
  overflow: hidden;
  border-radius: var(--r-media);
}

.industry-marquee img {
  width: 232px;
  height: 288px;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .industry-marquee figure:hover img { transform: scale(1.045); }
  .industry-marquee__link:hover figcaption { color: var(--accent); }
}

.industry-marquee figcaption { transition: color var(--dur) var(--ease); }

.industry-marquee figcaption {
  margin-top: var(--space-3);
  font-weight: 600;
  /* 1.1875rem = 19px — 36% up from the original 14px, per the client. */
  font-size: 1.1875rem;
}

@media (max-width: 640px) {
  .industry-marquee__link,
  .industry-marquee figure { flex-basis: 186px; }
  .industry-marquee img { width: 186px; height: 232px; }
}

/* --------------------------------------------------------------------------
   8. News / blog cards
   -------------------------------------------------------------------------- */

.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-12));
}

@media (max-width: 980px) { .posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .posts { grid-template-columns: 1fr; } }

.post-card { display: flex; flex-direction: column; }

.post-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-media);
  background: var(--ink);
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .post-card:hover .post-card__media img { transform: scale(1.045); }
}

/* Topic chip: ink block with a spectrum-stop square, sitting on the image
   like the reference's EVENT tags. Topic colour set inline via --tag. */
.post-card__chip {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.75rem;
  background: var(--ink-deep);
  color: var(--paper);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.post-card__chip::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--tag, var(--accent));
}

.post-card__title {
  margin-top: var(--space-6);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease);
}

.post-card:hover .post-card__title { color: var(--accent); }

.post-card__excerpt {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-muted);
}

.post-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-6);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  /* ink-muted, not ink-subtle: 12px text needs 4.5:1 on paper. */
  color: var(--ink-muted);
}

.post-card__foot .arrow {
  font-size: 1rem;
  color: var(--ink);
  transition: transform var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}

.post-card:hover .post-card__foot .arrow {
  transform: translateX(5px);
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   8b. Responsibility — the deck's Sustainability & CSR content in the same
   card anatomy as the article grid: photo, spectrum-square kicker, title,
   one line. Informational cards, not links.
   -------------------------------------------------------------------------- */

.csr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-12));
}

@media (max-width: 980px) { .csr { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .csr { grid-template-columns: 1fr; } }

.csr-card__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-media);
  background: var(--ink);
}

.csr-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.csr-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.csr-card__kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--tag, var(--accent));
}

.csr-card__title {
  margin-top: var(--space-3);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.csr-card__text {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   8c. Article — one reading measure, nothing fighting the prose.
   -------------------------------------------------------------------------- */

.article-hero { padding-bottom: var(--space-4); }

/* The hero is a split layout: statement left, subject right, full width. */

.article-hero .crumb { margin-bottom: var(--space-4); }

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.article__topic {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.article__byline { color: var(--ink); }

.article__topic::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--tag, var(--accent));
}

.article__title {
  max-width: 20ch;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 800;
}

.article__lead {
  max-width: 60ch;
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: var(--ink-muted);
}


.article {
  /* ~72 characters per line at the article's reading size. Centred, because
     an article is a reading page: the column is the page, so the leftover
     space belongs on both sides, not dumped on the right. */
  max-width: 42rem;
  margin-inline: auto;
}

.article > * + * { margin-top: var(--space-5, 1.25rem); }

/* Reading size, not UI size: long-form wants a larger body than the
   interface around it. */
.article p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #3a3c42;
}

/* The opening paragraph carries the reader in. */
.article > p:first-of-type {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--ink);
}

.article h2 {
  margin-top: clamp(var(--space-10, 2.5rem), 5vw, var(--space-16));
  font-size: clamp(1.5rem, 1.8vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* A short brand rule above each section: rhythm the reader can feel. */
.article h2::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: var(--space-4);
  background: var(--accent);
}

.article ul {
  padding-left: 0;
  list-style: none;
}

.article li {
  position: relative;
  padding-left: var(--space-6);
  font-size: 1.125rem;
  line-height: 1.7;
  color: #3a3c42;
}

/* Square markers, the same language as the spec rows and takeaways. */
.article li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--accent);
}

.article li + li { margin-top: var(--space-3); }

/* --- Split article hero: the statement left, the subject right. --- */

.ahero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: center;
}

@media (max-width: 900px) { .ahero { grid-template-columns: 1fr; } }

.ahero__media { margin: 0; }

.ahero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-panel);
}

.ahero__media figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.ahero .article__title { max-width: none; }

/* --- Article layout: sticky rail beside the reading column. --- */

.alayout {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
}

.alayout .article { max-width: 42rem; margin-inline: 0; }

@media (max-width: 980px) {
  .alayout { grid-template-columns: 1fr; }
  .alayout .article { max-width: none; }
}

@media (min-width: 981px) {
  .arail {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-8));
  }
}

/* Contents: a vertical rule the active section lights up. */
.toc__label {
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--rule);
}

.toc__list a {
  display: block;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.toc__list a:hover { color: var(--ink); }

.toc__list a.is-current {
  border-left-color: var(--accent);
  color: var(--ink);
  font-weight: 700;
}

/* The rail's closing card: the article's own next step. */
.railcta {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-media);
}

.railcta__title {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--space-4);
}

.railcta .btn { width: 100%; min-height: 46px; }

.railcta__alt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-muted);
}

.railcta__alt:hover { color: var(--accent); }

@media (max-width: 980px) {
  /* The rail dissolves so its parts can sit where they belong on a phone:
     contents before the article, share and the CTA after it. */
  .arail { display: contents; }

  .toc {
    order: 1;
    margin-bottom: var(--space-8);
    padding: var(--space-6);
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--r-media);
  }

  .alayout .article { order: 2; }

  /* Once the rail dissolves the row is no longer aligned to a column edge,
     so it centres under the article. Sizing lives in the touch-target block
     at the foot of this file, after the base .sharei rule. */
  .rail-share {
    order: 3;
    justify-content: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--rule);
  }

  .railcta { order: 4; margin-top: var(--space-6); }
}

/* Anchored headings clear the fixed navigation. */
.article h2[id] { scroll-margin-top: calc(var(--nav-h) + var(--space-6)); }

/* Pull quote: one line per article, sized to interrupt. */
.pullquote {
  margin-block: clamp(var(--space-10, 2.5rem), 5vw, var(--space-16));
  padding-left: var(--space-6);
  border-left: 3px solid var(--accent);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* Reading progress, drawn in the brand spectrum. Native scroll-driven
   animation: no JavaScript, no scroll listener, off the main thread. */
.readbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: calc(var(--z-nav) + 1);
  height: 3px;
  background: var(--spectrum);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .readbar {
      animation: readbar-fill linear;
      animation-timeline: scroll();
    }
  }
}

@keyframes readbar-fill { to { transform: scaleX(1); } }

/* Share, as bare glyphs: LinkedIn for the trade, WhatsApp because that is
   how Indian and Gulf B2B forwards things, X for the industry conversation,
   and a copy link for everything else. No chrome around them. */
.rail-share {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.rail-share__label {
  margin-right: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.sharei {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

/* Icons arrive from different families with different viewBoxes; sizing by
   height keeps them optically equal regardless of aspect. */
.sharei svg {
  width: auto;
  height: 22px;
  max-width: 26px;
}

.sharei:hover { color: var(--accent); }
.sharei:active { transform: scale(0.9); }

/* The copy button holds both glyphs and swaps which one shows, so the
   icon is never destroyed. */
.sharei--copy { position: relative; }

.sharei__glyph { display: grid; place-items: center; grid-area: 1 / 1; }
.sharei__glyph--done { opacity: 0; }

.sharei--copy.is-copied { color: var(--spec-4); }
.sharei--copy.is-copied .sharei__glyph { opacity: 0; }
.sharei--copy.is-copied .sharei__glyph--done { opacity: 1; }

/* The confirmation floats above, so nothing reflows or overflows. */
.sharei__flash {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 4px 8px;
  border-radius: var(--r-ui);
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.sharei--copy.is-copied .sharei__flash { opacity: 1; transform: translate(-50%, 0); }

.article strong { font-weight: 700; color: var(--ink); }

.article a:not(.btn) {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article a:not(.btn):hover { color: var(--accent); }

/* The summary plate: scanners get the article in five lines. */
.takeaways {
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
  padding: var(--space-8);
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-media);
}

.takeaways h2 { margin-top: 0; font-size: var(--text-lg); }

.takeaways ul {
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
}

.takeaways li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
}

.takeaways li + li { margin-top: var(--space-2); }

.takeaways li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  background: var(--accent);
}

/* End-of-article: route to the relevant range, then more reading. */


.morereads {
  margin-top: clamp(var(--space-12), 6vw, var(--space-24));
  padding-top: var(--space-8);
  border-top: 1px solid var(--rule);
}


.morereads__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   8d. Catalogue — a filterable wall of real finishes.

   Filters are visible chips rather than dropdowns: with three facets and a
   few dozen items, showing every option beats hiding them behind menus, and
   it needs no custom menu behaviour to be keyboard accessible.
   -------------------------------------------------------------------------- */

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

/* The filter bar rides with the reader: sticky under the nav on desktop,
   pinned to the thumb on a phone. Frosted, so the catalogue stays visible
   through it.

   The panels live OUTSIDE the bar on purpose: backdrop-filter makes an
   element the containing block for fixed-position descendants, so a sheet
   nested inside the bar would position against the bar, not the viewport. */
.cfilters {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-3));
  z-index: 30;
  margin-bottom: clamp(var(--space-6), 3vw, var(--space-8));
}

.cfilters__bar {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 6px;
  border: 1px solid rgba(23, 25, 29, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 10px 30px -12px rgba(15, 17, 20, 0.22);
}

@supports not (backdrop-filter: blur(2px)) {
  .cfilters__bar { background: rgba(255, 255, 255, 0.96); }
}

.cfsearch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 200px;
  min-width: 0;
  padding-left: var(--space-4);
}

.cfsearch__icon { display: grid; place-items: center; color: var(--ink-muted); flex: none; }

.cfsearch__input {
  width: 100%;
  min-height: 44px;
  border: 0;
  background: none;
  font-size: var(--text-sm);
  color: var(--ink);
}

.cfsearch__input:focus { outline: none; }
.cfsearch__input::placeholder { color: var(--ink-muted); }

.cfdrop__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 200px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-left: 1px solid var(--rule);
  background: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.cfdrop__btn:hover { color: var(--accent); }
.cfdrop__btn[aria-expanded="true"] { color: var(--accent); }

.cfdrop__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfdrop__btn.is-set .cfdrop__label { color: var(--accent); }
.cfdrop__caret { font-size: 10px; color: var(--ink-muted); flex: none; }

/* Panels: absolutely placed under their trigger on desktop (JS sets left). */
.cfpanels { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; }

.cfdrop__panel {
  position: absolute;
  top: 10px;
  min-width: 220px;
  /* A long facet scrolls inside its own panel instead of running off the
     page and forcing the reader to scroll the catalogue to reach an option. */
  max-height: min(58vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-media);
  background: #fff;
  box-shadow: 0 20px 44px -16px rgba(15, 17, 20, 0.3);
}

.cfdrop__panel[hidden] { display: none; }

.cfdrop__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cfopt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}

.cfopt input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; cursor: pointer; }
.cfopt:hover span { color: var(--accent); }
.cfopt.is-empty { opacity: 0.4; }

.cfilters__clear {
  align-self: center;
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: none;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.cfilters__count {
  align-self: center;
  padding-inline: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  white-space: nowrap;
}

.cfilters__count strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* mobile-only pieces, dormant on desktop */
.cfsheet__open, .cfsheet__head, .cfsheet__backdrop { display: none; }

/* --- phone: bar at the thumb, one sheet holding every facet --- */

@media (max-width: 860px) {
  .cfilters {
    position: fixed;
    inset: auto var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)) var(--gutter);
    top: auto;
    z-index: 60;
    margin-bottom: 0;
  }

  /* The bar is a fixed, stacked element, so the sheet inside it cannot rise
     above the backdrop or the nav on its own — the whole bar has to move up
     with it while the sheet is open. */
  .cfilters.is-sheet {
    inset: 0;
    z-index: calc(var(--z-menu) + 10);
    pointer-events: none;
  }

  .cfilters.is-sheet .cfilters__bar,
  .cfilters.is-sheet .cfpanels { pointer-events: auto; }

  .cfilters.is-sheet .cfilters__bar {
    position: fixed;
    inset: auto var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)) var(--gutter);
  }

  .cfdrop__btn, .cfilters__count { display: none; }

  .cfsheet__open {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5, 1.25rem);
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-size: var(--text-sm);
    font-weight: 700;
    white-space: nowrap;
  }

  .cfsheet__badge {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }

  .cfsheet__badge[hidden] { display: none; }

  /* the panel stack becomes one sheet */
  .cfpanels {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    z-index: 70;
    max-height: 76svh;
    overflow-y: auto;
    padding: 0 var(--gutter) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--r-panel) var(--r-panel) 0 0;
    background: #fff;
    box-shadow: 0 -18px 50px -20px rgba(15, 17, 20, 0.45);
    transform: translateY(101%);
    transition: transform var(--dur) var(--ease);
  }

  .cfpanels.is-open { transform: translateY(0); }

  .cfsheet__head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-6) var(--space-4);
    background: #fff;
    border-bottom: 1px solid var(--rule);
  }

  .cfsheet__title { font-size: var(--text-lg); font-weight: 800; }

  .cfsheet__done {
    padding: var(--space-2) var(--space-5, 1.25rem);
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  /* every facet is visible in the sheet at once: one scroll, no menu tree */
  .cfdrop__panel,
  .cfdrop__panel[hidden] {
    display: block;
    position: static;
    min-width: 0;
    /* the sheet itself scrolls; a nested scroller would trap the thumb */
    max-height: none;
    overflow: visible;
    padding: var(--space-6) 0 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .cfdrop__panel + .cfdrop__panel { border-top: 1px solid var(--rule); }

  .cfopt { padding: var(--space-3) 0; font-size: var(--text-base); }

  .cfsheet__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    /* above the nav, below the raised bar: the sheet owns the screen */
    z-index: calc(var(--z-menu) + 5);
    background: rgba(15, 17, 20, 0.45);
  }

  .cfsheet__backdrop[hidden] { display: none; }

  .cgrid { padding-bottom: 100px; }
}

/* --- The wall --- */

.cgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: clamp(var(--space-4), 2vw, var(--space-6));
}

.ccard[hidden] { display: none; }

.ccard__media {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-media);
  background: #fff;
  border: 1px solid var(--rule);
}

.ccard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .ccard:hover .ccard__media img { transform: scale(1.04); }
}

.ccard__name {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.ccard__system {
  margin-top: 2px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.ccard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.ccard__tag {
  padding: 3px var(--space-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
}

/* --- Nothing found --- */

.cempty {
  padding: clamp(var(--space-12), 6vw, var(--space-24)) var(--space-6);
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: var(--r-media);
  background: #fff;
}

.cempty__title {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cempty__text {
  max-width: 46ch;
  margin: var(--space-3) auto 0;
  color: var(--ink-muted);
}

.cempty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* --------------------------------------------------------------------------
   9. Contact band
   -------------------------------------------------------------------------- */

.contact-band {
  background: var(--ink-deep);
  color: var(--on-dark);
  padding-block: var(--section-y);
}

.contact-band__title {
  font-size: var(--text-display);
  font-weight: 800;
  color: #fff;
}

/* Split band: the promise on the left, every way to reach us on the right.
   No persona gate — every visitor type sees a path that fits their moment. */
.cband .contact-band__title {
  /* Half-column headline: display scale would wrap into a tower here. */
  font-size: clamp(2rem, 3.8vw, 3.4rem);
}

.cband {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(var(--space-8), 6vw, var(--space-24));
  align-items: center;
}

@media (max-width: 880px) { .cband { grid-template-columns: 1fr; } }

.cband__lead {
  max-width: 42ch;
  margin: var(--space-4) 0 var(--space-8);
  font-size: var(--text-lg);
  color: var(--on-dark-muted);
}

.cband__promise {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--on-dark-muted);
}

.cband__channels {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--on-dark-rule);
}

.cband__channels li { border-bottom: 1px solid var(--on-dark-rule); }

.cband__channels a,
.cband__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-5, 1.25rem);
  padding-block: 1.25rem;
}

.cband__label {
  flex: none;
  width: 6.5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.cband__channels strong {
  font-size: var(--text-lg);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.cband__channels a .arrow {
  margin-left: auto;
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .cband__channels a:hover .arrow { transform: translateX(4px); }
  .cband__channels a:hover strong { color: var(--accent); }
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  background: var(--ink-deep);
  color: var(--on-dark-muted);
  font-size: var(--text-sm);
  padding-block: var(--space-16) var(--space-8);
}

/* The spectrum: Colortek's signature strip, marking the page's end
   exactly as it closes every slide of the deck. */
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--spectrum);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--space-12) var(--space-8);
}

@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__brand img {
  height: 34px;
  width: auto;
  margin-bottom: var(--space-6);
}

.footer__brand p { max-width: 34ch; }

.footer__title {
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--paper);
}

.footer__list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

.footer a:hover { color: var(--paper); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--on-dark-rule);
  font-size: var(--text-xs);
}

/* Studio credit: present, but quieter than the client's own legal line. The
   studio name underlines so it reads as a link among two spans that are not. */
.footer__credit { color: var(--on-dark-muted); }

.footer__credit a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--on-dark-rule);
  transition: text-decoration-color var(--dur) var(--ease);
}

.footer__credit a:hover { text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   10b. Small screens: stacked buttons become full-width tap targets.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .hero__actions,
.panel__actions {
    display: grid;
    justify-items: stretch;
    gap: var(--space-3);
    width: min(100%, 320px);
    margin-inline: auto;
  }
  .hero__actions .btn,
.panel__actions .btn { width: 100%; }
  .section-head .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   11. Scroll reveals (generic)
   -------------------------------------------------------------------------- */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--d, 0ms);
}

html.js [data-reveal].in { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   12. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html.js .hero__kicker,
html.js .hero__title,
html.js .hero__sub,
html.js .hero__actions {
    opacity: 1;
    transform: none;
    animation: none;
  }

  html.js .panel__inner > *,
html.js .panel__media,
html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   14. Touch targets — phones only.

   Every rule below is a hit-box change, not a design change: each of these
   links is already `inline-flex; align-items: center`, so growing the box
   keeps the text optically where it was and only makes it easier to hit.
   Placed last so it wins on source order over the base rules it relaxes.
   ========================================================================== */

@media (max-width: 980px) {
  /* Share glyphs: 26px is a precise-pointer size. The drawn icon stays 22px;
     only the tappable box grows, and the gap closes to keep the same optical
     rhythm between glyphs (11px box padding either side replaces it). */
  .sharei { width: 44px; height: 44px; }
  .rail-share { gap: 0; }
  .rail-share__label { margin-right: var(--space-2); }

  /* Primary actions that were 23-30px tall. */
  .office__links a,
  .others a,
  .railcta__alt,
  .cert-plate__foot a,
  .menu__meta a { min-height: 44px; }

  .film__toggle,
  .cfsheet__done { min-height: 44px; }

  /* The contact block is the one place a mis-tap costs an enquiry, so its
     actions also get room to breathe rather than only a taller box. */
  .office__links { gap: var(--space-1) var(--space-6); }
}

/* --------------------------------------------------------------------------
   11. Cookie notice — sits above everything until answered.
   -------------------------------------------------------------------------- */

.cookie {
  position: fixed;
  z-index: 60;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 760px;
  margin-inline: auto;
  padding: var(--space-6);
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-media);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.cookie[hidden] { display: none; }

.cookie__text {
  flex: 1 1 320px;
  font-size: var(--text-sm);
  color: var(--on-dark-muted);
}

.cookie__text a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }

.cookie__actions { display: flex; gap: var(--space-3); }

/* The outline button sits on dark here, so it needs a light edge. */
.cookie .btn--outline { border-color: rgba(255, 255, 255, 0.4); color: var(--on-dark); }
.cookie .btn--outline:hover { border-color: var(--on-dark); }

@media (max-width: 560px) {
  .cookie { padding: var(--space-4); }
  .cookie__actions { width: 100%; }
  .cookie__actions .btn { flex: 1; }
}

/* Divider between coating systems that share one sector tab — without it two
   systems (e.g. ISOTRAP then AQUATRAP) read as one continuous block. */
.catpanel__divider {
  height: 3px;
  border-radius: 999px;
  margin: var(--space-16) 0;
  background: linear-gradient(90deg,
    var(--spec-1), var(--spec-2), var(--spec-3), var(--spec-4),
    var(--spec-5), var(--spec-6), var(--spec-7));
  opacity: 0.85;
}

/* The action line on a certification card. Same size as the em slot it sits
   in, but visibly clickable, matching the foot link's hover. */
.cred__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.cred__link:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Journey — the About timeline. A spectrum spine down the centre; each
   milestone hangs off it on its own coloured dot, cards alternating sides.
   Cards reuse the site's coloured-top-edge idiom from the glance tiles.
   On phones the spine moves to the left edge, all cards to its right.
   -------------------------------------------------------------------------- */

.jshow { padding-block: var(--space-16); }

/* The section heading rides along: pinned just under the fixed nav while
   the years scroll past, on a paper fade so cards slide beneath it
   without collision. */
.jshow .section-head {
  position: sticky;
  top: var(--nav-h);
  z-index: 2;
  margin-bottom: 0;
  /* Solid paper for most of its height, then a short fade: cards dissolve
     well below the text instead of showing through it. */
  padding-block: var(--space-4) var(--space-16);
  background: linear-gradient(to bottom, var(--paper) 90%, transparent);
}

.jalt {
  position: relative;
  list-style: none;
  margin: 0;
  padding: var(--space-8) 0 var(--space-6);
}

.jalt::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg,
    var(--spec-1), var(--spec-2), var(--spec-3), var(--spec-4),
    var(--spec-5), var(--spec-6), var(--spec-7));
  opacity: 0.9;
}

.jalt__item {
  position: relative;
  width: calc(50% - 44px);
  padding-block: var(--space-4);
}

.jalt__item--left { margin-right: auto; }
.jalt__item--right { margin-left: auto; }

.jalt__dot {
  position: absolute;
  top: calc(var(--space-4) + 1.6rem);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--rule);
  box-shadow: 0 0 0 3px var(--paper);
  z-index: 1;
}

.jalt__item--left .jalt__dot { right: -50px; }
.jalt__item--right .jalt__dot { left: -50px; }

.jalt__card {
  background: #fff;
  border: 1px solid rgba(23, 25, 29, 0.08);
  border-top: 3px solid var(--rule);
  border-radius: 14px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.jalt__year {
  display: block;
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.jalt__text {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  max-width: 52ch;
}

/* Cards arrive from their own side; the generic reveal handles the rest. */
html.js .jalt__item--left[data-reveal] { transform: translateX(-28px); }
html.js .jalt__item--right[data-reveal] { transform: translateX(28px); }
html.js .jalt__item[data-reveal].in { transform: none; }

.jshow__range {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (max-width: 840px) {
  .jalt::before { left: 14px; transform: none; }
  .jalt__item,
  .jalt__item--left,
  .jalt__item--right {
    width: auto;
    margin: 0;
    padding-left: 44px;
  }
  .jalt__item--left .jalt__dot,
  .jalt__item--right .jalt__dot { left: 8px; right: auto; }
  html.js .jalt__item--left[data-reveal],
  html.js .jalt__item--right[data-reveal] { transform: translateY(20px); }
  html.js .jalt__item[data-reveal].in { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .jalt__item--left[data-reveal],
  html.js .jalt__item--right[data-reveal] { transform: none; }
}