/* ============================================================================
   NovaLink International Building & Interiors: main.css

   The design system is NOT invented here. Every token name, type step, motion
   curve and surface below is carried across verbatim from the Supply Chain
   site (site/src/app/globals.css), which is a Tailwind v4 @theme block. This
   is that same system expressed as plain CSS custom properties, because this
   build ships static HTML with no framework.

   Rules that govern this file:
   - No hard-coded colour values outside the token block. Alpha variants are
     derived with color-mix() from the tokens, never re-typed as new hex.
   - No new colour tokens. The division's dark/light alternation is built from
     --color-graphite (dark surface), --color-bg (light surface) and the
     --color-steel* family (accent), all of which the palette already contains.
   - Logical properties throughout (padding-inline, margin-inline-start) so the
     Arabic RTL build mirrors without a second stylesheet.

   Sections:
     1. Fonts            8. Header / navigation
     2. Tokens           9. Footer
     3. Reset & base    10. WhatsApp float
     4. Layout          11. Motion
     5. Type scale      12. Forms
     6. Surfaces        13. Components
     7. Buttons         14. Cookie banner & toast
   ========================================================================== */

/* fonts.css is linked separately in the page head rather than imported here.
   An @import cannot be discovered until this file has been fetched and parsed,
   which puts a second round trip on the critical render path. */

/* ============================================================================
   2. TOKENS: carried over from the Supply Chain @theme block. Names are
   unchanged so the two divisions stay one system. Do not rename, do not add
   near-duplicates.
   ========================================================================== */

:root {
  /* --- Industrial-premium palette (Supply Chain, 2026-06-15) --- */
  --color-bg: #fafafa;          /* page background (never pure white for sections) */
  --color-ink: #1c1917;         /* stone-900: primary text */
  --color-stone-600: #57534e;   /* body / secondary text */
  --color-stone-400: #a8a29e;   /* borders and dashed rules only: 2.4:1 on --color-bg is below the AA floor for text */
  --color-stone-200: #e7e5e4;   /* borders, dividers */
  --color-steel: #3b5266;       /* primary accent */
  --color-steel-soft: #4a6378;  /* accent hover */
  --color-steel-light: #7b9bb5; /* accent on dark / small marks */
  --color-steel-deep: #305670;  /* accent text emphasis on light */
  --color-link: #88b2e0;        /* NovaLink wordmark "Link" accent */
  --color-steel-50: #e8f1f5;    /* accent tint backgrounds */
  --color-graphite: #1a1d21;    /* dark/inverted sections, logo disc */
  --color-off-white: #f4f2ee;   /* text on dark */
  --color-error: #c0392b;       /* form errors ONLY */
  --color-success: #2e7d5b;     /* success ONLY */
  --color-white: #ffffff;       /* glass chrome fill only, never a page ground */
  --color-whatsapp: #25d366;    /* WhatsApp brand green: the float button only */

  /* --- Derived alphas. color-mix keeps the promise that no second hex value
         for the same colour ever enters this file. --- */
  --line-light: color-mix(in srgb, var(--color-ink) 10%, transparent);
  --line-light-strong: color-mix(in srgb, var(--color-ink) 16%, transparent);
  --line-dark: color-mix(in srgb, var(--color-off-white) 12%, transparent);
  --line-dark-strong: color-mix(in srgb, var(--color-off-white) 28%, transparent);
  --line-accent: color-mix(in srgb, var(--color-steel) 45%, transparent);
  --line-accent-dark: color-mix(in srgb, var(--color-steel-light) 50%, transparent);
  --surface-glass: color-mix(in srgb, var(--color-white) 85%, transparent);
  --surface-dark-glass: color-mix(in srgb, var(--color-graphite) 62%, transparent);
  --surface-raise: color-mix(in srgb, var(--color-white) 70%, transparent);
  --surface-raise-dark: color-mix(in srgb, var(--color-off-white) 6%, transparent);
  --surface-hover-light: color-mix(in srgb, var(--color-ink) 5%, transparent);
  --surface-hover-dark: color-mix(in srgb, var(--color-off-white) 10%, transparent);
  --text-on-dark: color-mix(in srgb, var(--color-off-white) 72%, transparent);
  --text-on-dark-muted: color-mix(in srgb, var(--color-off-white) 52%, transparent);
  --scrim: color-mix(in srgb, var(--color-graphite) 82%, transparent);
  --scrim-deep: color-mix(in srgb, var(--color-graphite) 96%, transparent);
  --tint-steel: color-mix(in srgb, var(--color-steel) 8%, transparent);

  /* --- Typography. Same three families as the Supply Chain site, self-hosted.
         Script fallbacks are appended for the ar and zh locales. --- */
  --font-sans: "Inter", "IBM Plex Sans Arabic", "Noto Sans SC", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fraunces", "IBM Plex Sans Arabic", "Noto Sans SC", Georgia, ui-serif, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  /* --- Spacing & layout --- */
  --pad-x: 1.25rem;        /* page gutter, 20px base */
  --tap: 44px;             /* WCAG 2.5.5 minimum touch target */
  --container: 1152px;     /* same max width as the Supply Chain chrome */
  --container-narrow: 768px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* --- Radius --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Elevation --- */
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--color-ink) 4%, transparent),
    0 8px 24px color-mix(in srgb, var(--color-ink) 6%, transparent);
  --shadow-card-hover: 0 1px 2px color-mix(in srgb, var(--color-ink) 5%, transparent),
    0 12px 32px color-mix(in srgb, var(--color-ink) 9%, transparent);
  --shadow-chrome: 0 8px 30px -12px color-mix(in srgb, var(--color-ink) 18%, transparent);
  --shadow-float: 0 10px 30px -8px color-mix(in srgb, var(--color-ink) 35%, transparent);

  /* --- Motion. One easing family across the whole system. --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-slow: 900ms;

  --header-h: 4rem;
}

/* ============================================================================
   3. RESET & BASE
   ========================================================================== */

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

* {
  margin: 0;
}

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

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* The display face carries one italic word or line per headline, the house
   signature, carried over from the Supply Chain site. */
h1 em,
h2 em,
h3 em,
.t-display em,
.t-h2 em,
.t-h3 em {
  font-style: italic;
  font-weight: 300;
}

p {
  text-wrap: pretty;
}

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

img {
  height: auto;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--color-ink);
  color: var(--color-bg);
}

.dark-band ::selection {
  background: var(--color-off-white);
  color: var(--color-graphite);
}

:focus-visible {
  outline: 2px solid var(--color-steel);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.dark-band :focus-visible {
  outline-color: var(--color-steel-light);
}

/* Screen-reader-only, and the skip link that becomes visible on focus. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  z-index: 200;
  width: auto;
  height: auto;
  clip-path: none;
  margin: 0;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-graphite);
  color: var(--color-off-white);
}

/* ============================================================================
   4. LAYOUT: the Supply Chain mobile system, same tier names and values.
   base 0-359 · xs >=360 · sm >=640 · md >=768 · lg >=1024 · xl >=1280
   ========================================================================== */

.page-x {
  padding-inline: var(--pad-x);
}

@media (min-width: 640px) {
  .page-x {
    padding-inline: 2rem;
  }
}

@media (min-width: 768px) {
  .page-x {
    padding-inline: 2.5rem;
  }
}

/* Vertical section rhythm: fluid, no per-section breakpoints. */
.section-y {
  padding-block: clamp(3rem, 8vw, 7rem);
}

.section-y-sm {
  padding-block: clamp(2.25rem, 6vw, 4rem);
}

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

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

/* Comfortable touch target (WCAG 2.5.5). */
.tap {
  min-height: var(--tap);
  min-width: var(--tap);
}

.tap-h {
  min-height: var(--tap);
}

/* Card interior padding: lighter on phones, roomier from sm up. */
.card-p {
  padding: 1.25rem;
}

@media (min-width: 640px) {
  .card-p {
    padding: 1.75rem;
  }
}

.stack {
  display: flex;
  flex-direction: column;
}

.stack-2 > * + * {
  margin-block-start: var(--space-2);
}

.stack-3 > * + * {
  margin-block-start: var(--space-3);
}

.stack-4 > * + * {
  margin-block-start: var(--space-4);
}

.stack-5 > * + * {
  margin-block-start: var(--space-5);
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .grid-2,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Editorial two-column: copy left, supporting matter right. */
.editorial {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
  .editorial {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }
}

/* ============================================================================
   5. TYPE SCALE: fluid by construction, identical clamps to Supply Chain.
   ========================================================================== */

.t-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 8vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 5vw, 2.625rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.125rem, 3.5vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.t-lead {
  font-size: clamp(1rem, 2.6vw, 1.125rem);
  line-height: 1.6;
}

.t-body {
  font-size: clamp(0.9375rem, 2.4vw, 1rem);
  line-height: 1.6;
}

.t-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-steel-deep);
}

.dark-band .t-eyebrow {
  color: var(--color-steel-light);
}

/* mono data layer: every figure, code and label */
.data-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.t-muted {
  color: var(--color-stone-600);
}

.t-caption {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-stone-600);
}

.dark-band .t-muted {
  color: var(--text-on-dark);
}

.dark-band .t-caption {
  color: var(--text-on-dark-muted);
}

.t-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-steel-deep);
}

.dark-band .t-label {
  color: var(--color-steel-light);
}

.measure {
  max-width: 62ch;
}

.measure-tight {
  max-width: 46ch;
}

/* Section header block: eyebrow, headline, optional lead. Used everywhere so
   the vertical rhythm above a section never drifts page to page. */
.section-head {
  max-width: 46rem;
  margin-block-end: clamp(2rem, 5vw, 3.25rem);
}

.section-head .t-eyebrow {
  margin-block-end: 0.875rem;
}

.section-head .t-lead {
  margin-block-start: 1.125rem;
  color: var(--color-stone-600);
}

.dark-band .section-head .t-lead {
  color: var(--text-on-dark);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* ============================================================================
   6. SURFACES: the dark / light alternation this division needs, built from
   the existing graphite and bg tokens. Dark carries the brand, light carries
   the material photography.
   ========================================================================== */

.band {
  position: relative;
  background: var(--color-bg);
  color: var(--color-ink);
}

/* The second light tone, so two light sections in a row never read flat. */
.band--alt {
  background: color-mix(in srgb, var(--color-stone-200) 38%, var(--color-bg));
}

.dark-band {
  position: relative;
  background: var(--color-graphite);
  color: var(--color-off-white);
}

.dark-band h1,
.dark-band h2,
.dark-band h3,
.dark-band h4 {
  color: var(--color-off-white);
}

/* film grain for dark bands: same noise turbulence as the Supply Chain site */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A hairline that reads as jewelry, not as a border. */
.hairline {
  height: 1px;
  border: 0;
  background: var(--line-light);
}

.dark-band .hairline {
  background: var(--line-dark);
}

.rule-accent {
  width: 56px;
  height: 2px;
  border: 0;
  background: var(--color-steel);
}

.dark-band .rule-accent {
  background: var(--color-steel-light);
}

/* Photographic band: image, scrim, content. The scrim is what makes body text
   on a photograph clear 4.5:1. Text never sits on a raw image. */
.photo-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.photo-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.photo-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--scrim) 0%,
    var(--scrim) 45%,
    var(--scrim-deep) 78%,
    var(--color-graphite) 100%
  );
}

.photo-band > .container,
.photo-band > .container-narrow,
.photo-band__inner {
  position: relative;
  z-index: 2;
}

/* ============================================================================
   7. BUTTONS: filled (accent), outline (accent hairline), ghost. The Supply
   Chain arrow micro-motion is preserved: the chevron slides 2px on hover and
   mirrors under RTL.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: var(--tap);
  padding-inline: 1.5rem;
  padding-block: 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  transition:
    transform var(--dur-base) var(--ease-out),
    background-color var(--dur-base) ease,
    border-color var(--dur-base) ease,
    color var(--dur-base) ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn__arrow {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(2px);
}

[dir="rtl"] .btn__arrow {
  transform: scaleX(-1);
}

[dir="rtl"] .btn:hover .btn__arrow {
  transform: scaleX(-1) translateX(2px);
}

/* Primary: the accent, filled. */
.btn--primary {
  background: var(--color-steel);
  color: var(--color-off-white);
}

.btn--primary:hover {
  background: var(--color-steel-soft);
}

.dark-band .btn--primary {
  background: var(--color-off-white);
  color: var(--color-graphite);
}

.dark-band .btn--primary:hover {
  background: var(--color-white);
}

/* Outline: the accent hairline. */
.btn--outline {
  border-color: var(--line-accent);
  color: var(--color-steel-deep);
}

.btn--outline:hover {
  border-color: var(--color-steel);
  background: var(--tint-steel);
}

.dark-band .btn--outline {
  border-color: var(--line-accent-dark);
  color: var(--color-off-white);
}

.dark-band .btn--outline:hover {
  border-color: var(--color-steel-light);
  background: var(--surface-hover-dark);
}

/* Ink: the graphite fill used by the chrome CTA, matching Supply Chain. */
.btn--ink {
  background: var(--color-graphite);
  color: var(--color-off-white);
}

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

.btn--ghost {
  padding-inline: 1rem;
  color: var(--color-stone-600);
}

.btn--ghost:hover {
  background: var(--surface-hover-light);
  color: var(--color-ink);
}

.dark-band .btn--ghost {
  color: var(--text-on-dark);
}

.dark-band .btn--ghost:hover {
  background: var(--surface-hover-dark);
  color: var(--color-off-white);
}

.btn--sm {
  min-height: 2.25rem;
  padding-inline: 1rem;
  padding-block: 0.4rem;
  font-size: 0.875rem;
}

.btn--block {
  width: 100%;
}

/* A text link that carries the accent underline on hover. */
.link-accent {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-steel-deep);
  font-weight: 500;
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.link-accent:hover {
  border-block-end-color: currentColor;
}

.dark-band .link-accent {
  color: var(--color-steel-light);
}

/* ============================================================================
   11. MOTION. Carried over from the Supply Chain site: the same 16px/320ms
   reveal, the same 35ms cascade, the same scale-draw lines. Everything here is
   switched off wholesale under prefers-reduced-motion at the end of the file.
   ========================================================================== */

/* soft scroll reveal (~320ms, small translate+fade) */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-base) ease-out,
    transform var(--dur-base) ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* staggered children: the delay is set inline in 35ms steps by main.js */
.cascade-item {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 300ms var(--ease-out),
    transform 300ms var(--ease-out);
}

.is-visible > .cascade-item {
  opacity: 1;
  transform: none;
}

/* an ink line that draws across a section when it enters */
.settle-line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1100ms var(--ease-out);
}

[dir="rtl"] .settle-line {
  transform-origin: right;
}

.is-visible .settle-line,
.is-visible.settle-line {
  transform: scaleX(1);
}

.steps-line-x {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

[dir="rtl"] .steps-line-x {
  transform-origin: right;
}

.is-visible .steps-line-x {
  transform: scaleX(1);
}

.steps-line-y {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 450ms var(--ease-out);
}

.is-visible .steps-line-y {
  transform: scaleY(1);
}

.step-check {
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 250ms var(--ease-out),
    transform 250ms var(--ease-out);
}

.is-visible .step-check {
  opacity: 1;
  transform: scale(1);
}

/* calm premium hover for dense reference cards: lift plus accent border */
.nl-hover {
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.nl-hover:hover {
  transform: translateY(-4px);
  border-color: var(--line-accent);
  box-shadow: var(--shadow-card-hover);
}

/* brand logo: slow premium auto-rotation, speeds up on hover */
@keyframes logospin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.logo-spin {
  animation: logospin 12s linear infinite;
  will-change: transform;
}

.logo-spin:hover {
  animation-duration: 4s;
}

.logo-hover {
  transition: transform 1s var(--ease-soft);
}

.logo-hover:hover {
  transform: rotate(360deg);
}

/* hero entrance: one rise, no bounce */
@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero-in {
  animation: hero-in 700ms var(--ease-out) both;
}

/* the hero scroll cue: a thin accent line travelling downward */
@keyframes scroll-beam {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  45% {
    transform: scaleY(1);
    transform-origin: top;
  }
  55% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

.scroll-cue {
  position: relative;
  display: block;
  width: 1px;
  height: 56px;
  background: var(--line-dark);
  overflow: hidden;
}

.scroll-cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-steel-light);
  animation: scroll-beam 2.4s var(--ease-out) infinite;
}

/* horizontal drift strip */
@keyframes marquee-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-drift-rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}

.marquee {
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-drift 48s linear infinite;
  will-change: transform;
}

[dir="rtl"] .marquee-track {
  animation-name: marquee-drift-rtl;
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee[data-paused] .marquee-track {
  animation-play-state: paused;
}

/* ============================================================================
   8. HEADER / NAVIGATION. The Supply Chain floating glass pill: fixed, centred,
   max 1152px. It sits transparent over a dark hero and resolves into the solid
   light pill once you scroll past it (main.js toggles .is-solid).

   The full-nav / burger switch is at 1152px, not at 1024px, and every label is
   nowrap. That is deliberate: on the Supply Chain site the bar silently WRAPPED
   in the longer languages instead of overflowing, so the pill looked broken in
   fr/ar while English was fine. Below 1152px the burger takes over, which is
   language-proof.
   ========================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 1rem;
  z-index: 50;
  padding-inline: 0.75rem;
}

@media (min-width: 640px) {
  .site-header {
    inset-block-start: 1.5rem;
    padding-inline: 1.5rem;
  }
}

.site-header__pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: var(--container);
  height: 3.5rem;
  margin-inline: auto;
  padding-inline-start: 0.75rem;
  padding-inline-end: 0.5rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-pill);
  background: var(--surface-dark-glass);
  backdrop-filter: blur(20px);
  transition:
    background-color var(--dur-base) ease,
    border-color var(--dur-base) ease,
    box-shadow var(--dur-base) ease;
}

@media (min-width: 640px) {
  .site-header__pill {
    height: 4rem;
    padding-inline-start: 1rem;
    padding-inline-end: 0.75rem;
  }
}

/* Solid state: over light content, and on every inner page from the start. */
.site-header.is-solid .site-header__pill {
  border-color: var(--color-stone-200);
  background: var(--surface-glass);
  box-shadow: var(--shadow-chrome);
}

.site-header__brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.625rem;
}

.site-header__divider {
  display: none;
  width: 1px;
  height: 1.5rem;
  margin-inline: 0.25rem;
  background: var(--line-dark);
}

.site-header.is-solid .site-header__divider {
  background: var(--color-stone-200);
}

.site-nav {
  display: none;
  align-items: center;
  gap: 0.125rem;
}

.site-nav a {
  padding-inline: 0.75rem;
  padding-block: 0.375rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  white-space: nowrap;
  color: var(--text-on-dark);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.site-nav a:hover {
  background: var(--surface-hover-dark);
  color: var(--color-off-white);
}

.site-nav a[aria-current="page"] {
  background: var(--surface-hover-dark);
  font-weight: 500;
  color: var(--color-off-white);
}

.site-header.is-solid .site-nav a {
  color: var(--color-stone-600);
}

.site-header.is-solid .site-nav a:hover,
.site-header.is-solid .site-nav a[aria-current="page"] {
  background: var(--surface-hover-light);
  color: var(--color-ink);
}

.site-header__cluster {
  display: none;
  align-items: center;
  gap: 0.375rem;
  margin-inline-start: auto;
}

@media (min-width: 1152px) {
  .site-header__divider,
  .site-nav,
  .site-header__cluster {
    display: flex;
  }

  .site-header__burger {
    display: none;
  }
}

.site-header__mobile {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-inline-start: auto;
}

@media (min-width: 1152px) {
  .site-header__mobile {
    display: none;
  }
}

.site-header__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-pill);
  color: var(--color-off-white);
}

.site-header.is-solid .site-header__burger {
  color: var(--color-ink);
}

.site-header__burger:hover {
  background: var(--surface-hover-dark);
}

.site-header.is-solid .site-header__burger:hover {
  background: var(--surface-hover-light);
}

/* Full-screen overlay menu. No hamburger-to-X gimmick: the icon swaps, the
   panel fades and rises once. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  padding-block: 6rem 2rem;
  background: var(--color-graphite);
  color: var(--color-off-white);
  overflow-y: auto;
}

.mobile-menu[data-open="true"] {
  display: flex;
  animation: hero-in 260ms var(--ease-out) both;
}

.mobile-menu__close {
  position: absolute;
  inset-block-start: 1.5rem;
  inset-inline-end: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-pill);
  color: var(--color-off-white);
}

.mobile-menu__close:hover {
  background: var(--surface-hover-dark);
}

.mobile-menu nav a {
  display: block;
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--line-dark);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-off-white);
}

.mobile-menu nav a[aria-current="page"] {
  color: var(--color-steel-light);
}

.mobile-menu__foot {
  margin-block-start: auto;
  padding-block-start: 2rem;
}

/* Language switcher: a small mono chip group, same treatment both tones. */
.lang-switch {
  position: relative;
}

.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.lang-switch__btn:hover {
  background: var(--surface-hover-dark);
  color: var(--color-off-white);
}

.site-header.is-solid .lang-switch__btn {
  color: var(--color-stone-600);
}

.site-header.is-solid .lang-switch__btn:hover {
  background: var(--surface-hover-light);
  color: var(--color-ink);
}

.lang-switch__menu {
  position: absolute;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-end: 0;
  z-index: 70;
  min-width: 11rem;
  padding: 0.375rem;
  border: 1px solid var(--color-stone-200);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}

.lang-switch__menu[hidden] {
  display: none;
}

.lang-switch__menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: var(--tap);
  padding-inline: 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  text-align: start;
  color: var(--color-ink);
}

.lang-switch__menu button:hover {
  background: var(--surface-hover-light);
}

.lang-switch__menu button[aria-current="true"] {
  font-weight: 500;
  color: var(--color-steel-deep);
}

.lang-switch__menu .lang-code {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-stone-600);
}

/* The logo lockup: the Interlock disc plus the wordmark, division line and
   (in the footer) the tagline. One partial, included by every page. */
.logo-disc {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-graphite);
  color: var(--color-off-white);
  transition: background-color var(--dur-base) ease, color var(--dur-base) ease;
}

.logo-disc--dark {
  background: var(--color-off-white);
  color: var(--color-graphite);
}

.logo-disc svg {
  width: 60%;
  height: 60%;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-off-white);
}

.site-header.is-solid .wordmark {
  color: var(--color-ink);
}

.wordmark em {
  font-style: italic;
  color: var(--color-link);
}

.wordmark-division {
  margin-block-start: 0.25rem;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-steel-light);
}

.wordmark-tagline {
  margin-block-start: 0.375rem;
  max-width: 26rem;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-on-dark-muted);
}

/* Below 360px the wordmark is dropped so the CTA and burger always fit; the
   disc alone carries the brand there. */
.wordmark {
  display: none;
}

@media (min-width: 360px) {
  .wordmark {
    display: inline;
  }
}

/* ============================================================================
   9. FOOTER
   ========================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--color-graphite);
  color: var(--text-on-dark);
}

.site-footer__seam {
  height: 1px;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-link) 30%,
    var(--color-steel-light) 70%,
    transparent
  );
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block-end: 2.25rem;
  border-block-end: 1px solid var(--line-dark);
}

@media (min-width: 768px) {
  .site-footer__top {
    flex-direction: row;
    align-items: center;
  }
}

.site-footer__cols {
  display: grid;
  gap: 2rem;
  padding-block: 2.5rem;
}

@media (min-width: 640px) {
  .site-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .site-footer__cols {
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

.site-footer__collabel {
  margin-block-end: 0.875rem;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-steel-light);
}

.site-footer a {
  font-size: 0.875rem;
  color: var(--text-on-dark-muted);
  transition: color var(--dur-fast) ease;
}

.site-footer a:hover {
  color: var(--color-off-white);
}

.site-footer li + li {
  margin-block-start: 0.5rem;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 1.5rem;
  border-block-start: 1px solid var(--line-dark);
  font-size: 0.8125rem;
  color: var(--text-on-dark-muted);
}

@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.social-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-raise-dark);
  color: var(--text-on-dark);
  transition:
    transform var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

.social-row a:hover {
  transform: translateY(-2px);
  border-color: var(--line-dark-strong);
  background: var(--surface-hover-dark);
  color: var(--color-off-white);
}

.social-row svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

/* ============================================================================
   10. WHATSAPP FLOAT: green disc, white glyph. The brand SVG is a solid
   single-colour path, so brightness(0) invert(1) is what forces it white on
   the green ground regardless of the source fill.
   ========================================================================== */

.wa-float {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-whatsapp);
  box-shadow: var(--shadow-float);
  transition: transform var(--dur-base) var(--ease-out);
}

.wa-float:hover {
  transform: translateY(-3px) scale(1.04);
}

.wa-float svg {
  width: 1.75rem;
  height: 1.75rem;
  filter: brightness(0) invert(1);
}

@media (prefers-reduced-motion: reduce) {
  .wa-float:hover {
    transform: none;
  }
}

/* ============================================================================
   12. FORMS
   ========================================================================== */

.field {
  display: block;
}

.field + .field,
.form-grid + .field,
.field + .form-grid {
  margin-block-start: 1.125rem;
}

.form-grid {
  display: grid;
  gap: 1.125rem;
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field__label {
  display: block;
  margin-block-end: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-stone-600);
}

.field__req {
  color: var(--color-steel-deep);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--tap);
  padding-inline: 0.875rem;
  padding-block: 0.65rem;
  border: 1px solid var(--color-stone-200);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-steel);
  outline: none;
  box-shadow: 0 0 0 3px var(--tint-steel);
}

.field__hint {
  margin-block-start: 0.4rem;
  font-size: 0.8125rem;
  color: var(--color-stone-600);
}

.field__error {
  margin-block-start: 0.4rem;
  font-size: 0.8125rem;
  color: var(--color-error);
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea {
  border-color: var(--color-error);
}

/* Chip multi-select: the material categories and any other tag picker. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding-inline: 0.875rem;
  border: 1px solid var(--color-stone-200);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  font-size: 0.8125rem;
  color: var(--color-stone-600);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

.chip:hover {
  border-color: var(--line-accent);
  color: var(--color-ink);
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip:has(input:checked),
.chip[aria-pressed="true"] {
  border-color: var(--color-steel);
  background: var(--color-steel-50);
  color: var(--color-steel-deep);
  font-weight: 500;
}

.chip:has(input:focus-visible) {
  outline: 2px solid var(--color-steel);
  outline-offset: 2px;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
}

.checkbox input {
  width: 1.125rem;
  height: 1.125rem;
  margin-block-start: 0.2rem;
  accent-color: var(--color-steel);
}

/* File drop: a plain input styled as a bordered well; it stays a real input so
   keyboard and assistive tech get the native behaviour. */
.filewell {
  display: block;
  padding: 1.25rem;
  border: 1px dashed var(--color-stone-400);
  border-radius: var(--radius-md);
  background: var(--color-white);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.filewell:hover,
.filewell[data-drag="true"] {
  border-color: var(--color-steel);
  background: var(--color-steel-50);
}

/* ============================================================================
   13. COMPONENTS
   ========================================================================== */

/* --- Card ------------------------------------------------------------------ */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-stone-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  overflow: hidden;
}

.dark-band .card {
  border-color: var(--line-dark);
  background: var(--surface-raise-dark);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-stone-200);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}

.card:hover .card__media img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .card:hover .card__media img {
    transform: none;
  }
}

/* The accent hairline that appears on hover: the tile signature. */
.card--hairline::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  background: var(--color-steel);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease-out);
}

[dir="rtl"] .card--hairline::after {
  transform-origin: right;
}

.card--hairline:hover::after,
.card--hairline:focus-within::after {
  transform: scaleX(1);
}

/* Cards in a grid are stretched to equal height, but their copy is not equal
   length. Without this the "Details" link sits at a different height in every
   card and the row reads as ragged. Pushing the CTA to the bottom lines them
   up on a single baseline across the row. */
.card > .card-p {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.card__cta {
  margin-block-start: auto;
  padding-block-start: 1rem;
  align-self: flex-start;
}

.card__count {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-stone-600);
}

/* An image placeholder for material cards with no free photograph yet. Logged
   in MISSING_IMAGES.md; deliberately elegant rather than a broken frame. */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--line-accent);
  background: var(--color-bg);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  color: var(--color-stone-600);
}

/* --- Horizontal scroll rail (project types on the home page) --------------- */

.rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: 1rem;
  margin-inline: calc(var(--pad-x) * -1);
  padding-inline: var(--pad-x);
  scrollbar-width: thin;
}

.rail > * {
  flex: 0 0 min(78vw, 20rem);
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .rail {
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* --- Accordion ------------------------------------------------------------- */

.accordion {
  border-block-start: 1px solid var(--color-stone-200);
}

.accordion__item {
  border-block-end: 1px solid var(--color-stone-200);
}

.accordion__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  min-height: var(--tap);
  padding-block: 1.125rem;
  text-align: start;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--color-ink);
}

.accordion__trigger:hover {
  color: var(--color-steel-deep);
}

.accordion__icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-block-start: 0.25rem;
  color: var(--color-steel);
  transition: transform var(--dur-base) var(--ease-out);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}

.accordion__panel > div {
  overflow: hidden;
}

.accordion__item[data-open="true"] .accordion__panel {
  grid-template-rows: 1fr;
}

.accordion__body {
  padding-block-end: 1.25rem;
  max-width: 62ch;
  color: var(--color-stone-600);
}

/* The accordion is used on dark bands too (the nine steps on the home page).
   Without these the trigger text inherits the light-surface ink colour and
   disappears against graphite. */
.dark-band .accordion,
.dark-band .accordion__item {
  border-color: var(--line-dark);
}

.dark-band .accordion__trigger {
  color: var(--color-off-white);
}

.dark-band .accordion__trigger:hover {
  color: var(--color-steel-light);
}

.dark-band .accordion__icon {
  color: var(--color-steel-light);
}

.dark-band .accordion__body {
  color: var(--text-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  .accordion__panel,
  .accordion__icon {
    transition: none;
  }
}

/* --- Modal (material detail) ----------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal[data-open="true"] {
  display: flex;
}

.modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-deep);
}

.modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 56rem;
  max-height: 88vh;
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  overflow: hidden;
  animation: hero-in 260ms var(--ease-out) both;
}

@media (min-width: 900px) {
  .modal__panel {
    flex-direction: row;
  }
}

.modal__media {
  flex: 1 1 50%;
  min-height: 14rem;
  background: var(--color-stone-200);
}

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

.modal__body {
  flex: 1 1 50%;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  overflow-y: auto;
}

.modal__close {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
  color: var(--color-ink);
  backdrop-filter: blur(8px);
}

.modal__close:hover {
  background: var(--color-white);
}

/* --- Spec list (applications, finishes) ------------------------------------ */

.speclist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.speclist li {
  padding-inline: 0.625rem;
  padding-block: 0.25rem;
  border: 1px solid var(--color-stone-200);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--color-stone-600);
}

/* --- WeChat QR ------------------------------------------------------------
   A QR is only useful at a size a camera can resolve from arm's length, so it
   is given real space rather than being treated as an icon. The white ground is
   explicit: a QR on the page's off-white would lose its quiet zone, which is
   part of the symbol, not padding around it. */
.qr-frame {
  display: block;
  width: 148px;
  height: 148px;
  padding: 6px;
  border: 1px solid var(--color-stone-200);
  background: var(--color-white);
  transition: border-color var(--dur-fast) ease;
}

.qr-frame:hover {
  border-color: var(--line-accent);
}

.qr-frame img {
  width: 100%;
  height: 100%;
}

/* --- Approved-figures stat band (about page only) -------------------------- */

.statband {
  display: grid;
  gap: 0;
}

@media (min-width: 768px) {
  .statband {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.statband__cell {
  padding-block: 1.75rem;
  border-block-end: 1px solid var(--line-dark);
  text-align: center;
}

.statband__cell:last-child {
  border-block-end: 0;
}

@media (min-width: 768px) {
  .statband__cell {
    padding-block: 0;
    padding-inline: 1.5rem;
    border-block-end: 0;
    border-inline-end: 1px solid var(--line-accent-dark);
  }

  .statband__cell:last-child {
    border-inline-end: 0;
  }
}

.statband__figure {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--color-steel-light);
}

.statband__label {
  margin-block-start: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-on-dark);
}

.statband__note {
  margin-block-start: 0.625rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-on-dark-muted);
}

/* --- Team monogram cards --------------------------------------------------- */

.monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  background: var(--color-graphite);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-steel-light);
}

.team-card {
  padding: 1.5rem;
  border: 1px solid var(--color-stone-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: border-color var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}

.team-card:hover {
  border-color: var(--line-accent);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .team-card:hover {
    transform: none;
  }
}

.team-card__name {
  margin-block-start: 1.125rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
}

.team-card__role {
  margin-block-start: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel-deep);
}

.team-card__desc {
  margin-block-start: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-stone-600);
}

/* --- Numbered timeline (the 9 steps, the visit steps, the process) --------- */

.timeline {
  position: relative;
  display: grid;
  gap: 1.75rem;
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 1rem;
}

.timeline__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--color-steel);
}

.dark-band .timeline__num {
  color: var(--color-steel-light);
}

/* the connecting accent line, drawn top-to-bottom as the section enters */
.timeline__line {
  position: absolute;
  inset-block: 0.25rem 0;
  inset-inline-start: 1.5rem;
  width: 1px;
  background: var(--line-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1100ms var(--ease-out);
}

.dark-band .timeline__line {
  background: var(--line-accent-dark);
}

.is-visible .timeline__line {
  transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
  .timeline__line {
    transform: scaleY(1);
    transition: none;
  }
}

/* --- Filter rail (materials page) ------------------------------------------ */

.filter-layout {
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .filter-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
}

.filter-rail {
  position: sticky;
  inset-block-start: calc(var(--header-h) + 2rem);
}

@media (max-width: 1023px) {
  .filter-rail {
    position: static;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    margin-inline: calc(var(--pad-x) * -1);
    padding-inline: var(--pad-x);
    padding-block-end: 0.5rem;
  }

  .filter-rail button {
    flex: 0 0 auto;
  }
}

@media (min-width: 1024px) {
  .filter-rail button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.5rem;
    padding-inline: 0.75rem;
    border-radius: var(--radius-sm);
    text-align: start;
  }
}

.filter-rail button {
  min-height: 2.25rem;
  padding-inline: 0.875rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  white-space: nowrap;
  color: var(--color-stone-600);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.filter-rail button:hover {
  background: var(--surface-hover-light);
  color: var(--color-ink);
}

.filter-rail button[aria-pressed="true"] {
  background: var(--color-steel-50);
  color: var(--color-steel-deep);
  font-weight: 500;
}

@media (max-width: 1023px) {
  .filter-rail button[aria-pressed="true"] {
    border-color: var(--line-accent);
  }
}

.filter-rail .count {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-stone-600);
}

/* --- Stacked tables on mobile ---------------------------------------------- */

.table-stack {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
}

.table-stack th,
.table-stack td {
  padding-block: 0.75rem;
  padding-inline-end: 1rem;
  border-block-end: 1px solid var(--color-stone-200);
  text-align: start;
  vertical-align: top;
}

.table-stack th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-stone-600);
}

@media (max-width: 639px) {
  .table-stack {
    display: block;
    min-width: 0;
  }

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

  .table-stack tbody {
    display: block;
  }

  .table-stack tr {
    display: block;
    padding: 0.75rem 1rem;
    border-block-end: 1px solid var(--color-stone-200);
  }

  .table-stack tr:last-child {
    border-block-end: 0;
  }

  .table-stack td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    border: 0;
    text-align: end;
  }

  .table-stack td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: start;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-stone-600);
  }
}

/* --- Cookie banner & toast -------------------------------------------------- */

.cookie-banner {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline: 1rem;
  z-index: 90;
  max-width: 34rem;
  margin-inline: auto;
  padding: 1.25rem;
  border: 1px solid var(--color-stone-200);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-card-hover);
}

.cookie-banner[hidden] {
  display: none;
}

.toast {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-start: 50%;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-graphite);
  color: var(--color-off-white);
  box-shadow: var(--shadow-float);
  transform: translate(-50%, 1rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}

.toast[data-open="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-success);
}

/* ============================================================================
   14. REDUCED MOTION: one block, switching the whole motion layer off.
   ========================================================================== */

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

  .reveal,
  .cascade-item,
  .step-check,
  .settle-line,
  .steps-line-x,
  .steps-line-y {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .logo-spin,
  .hero-in {
    animation: none;
  }

  .logo-hover,
  .nl-hover {
    transition: none;
  }

  .logo-hover:hover,
  .nl-hover:hover,
  .btn:hover {
    transform: none;
  }

  .scroll-cue::after {
    animation: none;
  }

  .marquee-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
  }
}

/* The Arabic entry in the language menu stacks its code above its name: Arabic
   and Latin script must never share a line anywhere in this build. */
.lang-switch__menu button.lang-switch__stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding-block: 0.5rem;
}

/* ============================================================================
   15. UTILITIES

   Generated by scripts/utilities.mjs. Do not hand-edit: change the map in that
   script and re-run it, so the classes and the markup that uses them stay in
   step.

   These exist because the build forbids inline styles for anything that is not
   a computed value. They are deliberately the same idea as the Tailwind classes
   the Supply Chain site is built from, drawn from the same spacing scale, so
   the two divisions stay one system.
   ========================================================================== */

.bullet {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin-block-start: 0.55rem;
  opacity: 0.5;
}

.bullet--accent {
  background: var(--color-steel);
  opacity: 1;
}

.logo-disc--40 {
  width: 40px;
  height: 40px;
}

.logo-disc--42 {
  width: 42px;
  height: 42px;
}

/* The numbered disc on the three-step payment flow. */
.step-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid var(--line-accent-dark);
  border-radius: var(--radius-pill);
  background: var(--color-graphite);
  color: var(--color-steel-light);
}

.mt-4xs {
  margin-block-start:.25rem;
}

.mt-3xs {
  margin-block-start:.375rem;
}

.mt-2xs {
  margin-block-start:.5rem;
}

.mt-xs {
  margin-block-start:.625rem;
}

.mt-s {
  margin-block-start:.75rem;
}

.mt-sm {
  margin-block-start:.875rem;
}

.mt-md {
  margin-block-start:1rem;
}

.mt-lg {
  margin-block-start:1.125rem;
}

.mt-xl {
  margin-block-start:1.25rem;
}

.mt-2xl {
  margin-block-start:1.5rem;
}

.mt-3xl {
  margin-block-start:1.75rem;
}

.mt-4xl {
  margin-block-start:2rem;
}

.mt-5xl {
  margin-block-start:2.25rem;
}

.mt-6xl {
  margin-block-start:2.5rem;
}

.mb-0 {
  margin-block-end:0;
}

.mb-s {
  margin-block-end:.75rem;
}

.mb-md {
  margin-block-end:1rem;
}

.mb-4xl {
  margin-block-end:2rem;
}

.my-xl {
  margin-block:1.25rem;
}

.my-2xl {
  margin-block:1.5rem;
}

.mi-auto {
  margin-inline:auto;
}

.flex-nowrap {
  flex-wrap:nowrap;
}

.items-start {
  align-items:flex-start;
}

.items-center {
  align-items:center;
}

.items-baseline {
  align-items:baseline;
}

.justify-center {
  justify-content:center;
}

.flex-none {
  flex:0 0 auto;
}

.gap-3xs {
  gap:.375rem;
}

.gap-2xs {
  gap:.5rem;
}

.gap-xs {
  gap:.625rem;
}

.gap-s {
  gap:.75rem;
}

.gap-sm {
  gap:.875rem;
}

.gap-md {
  gap:1rem;
}

.gap-2xl {
  gap:1.5rem;
}

.gap-3xl {
  gap:1.75rem;
}

.ta-center {
  text-align:center;
}

.nowrap {
  white-space:nowrap;
}

.fs-normal {
  font-style:normal;
}

.mw-none {
  max-width:none;
}

.mw-46 {
  max-width:46ch;
}

.mw-52r {
  max-width:52rem;
}

.mw-56r {
  max-width:56rem;
}

.mw-60r {
  max-width:60rem;
}

.mw-62 {
  max-width:62ch;
}

.mw-70 {
  max-width:70ch;
}

.mw-22r {
  max-width:22rem;
}

.d-block {
  display:block;
}

.d-inline-flex {
  display:inline-flex;
}

.self-start {
  align-self:start;
}

.pos-relative {
  position:relative;
}

.overflow-hidden {
  overflow:hidden;
}

.ar-3-2 {
  aspect-ratio:3/2;
}

.ar-4-5 {
  aspect-ratio:4/5;
}

.r-md {
  border-radius:var(--radius-md);
}

.r-sm {
  border-radius:var(--radius-sm);
}

.fz-xs {
  font-size:.75rem;
}

.fz-sm {
  font-size:.8125rem;
}

.fz-md {
  font-size:.875rem;
}

.fz-lg {
  font-size:1.125rem;
}

.fz-xl {
  font-size:1.25rem;
}

.ls-wide {
  letter-spacing:.08em;
}

.c-off-white {
  color:var(--color-off-white);
}

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

.c-steel-light {
  color:var(--color-steel-light);
}

.c-steel {
  color:var(--color-steel);
}

.c-steel-deep {
  color:var(--color-steel-deep);
}

.c-stone-600 {
  color:var(--color-stone-600);
}

.bc-accent {
  border-color:var(--line-accent);
}

.bc-dark {
  border-color:var(--line-dark);
}

.pt-0 {
  padding-block-start:0;
}

.pis-icon {
  padding-inline-start:2.6rem;
}

.pis-num {
  padding-inline-start:3.25rem;
}

.page-top {
  padding-block-start:calc(var(--header-h) + 4rem);
}

.page-top-lg {
  padding-block-start:calc(var(--header-h) + 5rem);
}

.my-section {
  margin-block:clamp(2.5rem,6vw,4rem);
}

.mt-section {
  margin-block-start:clamp(2.5rem,6vw,4rem);
}

.mb-section {
  margin-block-end:clamp(2rem,5vw,3rem);
}

.mt-cue {
  margin-block-start:clamp(2rem,6vh,3.5rem);
}

.flex-num {
  flex:0 0 2.5rem;
}

/* ============================================================================
   16. SERVER-RENDERED CATALOGUE

   The 177 material cards ship in the HTML now rather than being built by
   JavaScript, so two things need styling that did not exist before: the
   applications line on the face of each card, and the detail block each card
   carries for the modal to read.
   ========================================================================== */

/* The applications line. Visible because a specifier genuinely wants it, and
   set small so it reads as metadata rather than competing with the blurb. */
.card__spec {
  margin-block-start: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-stone-600);
}

/* The modal source. `hidden` keeps it out of the layout while leaving the text
   in the document, which is the point: it is real content for anything reading
   the HTML, and it is shown to people on demand rather than being cloaked. */
.material-card__detail[hidden] {
  display: none;
}

/* A filtered-out card is hidden outright rather than removed, so filtering
   costs no layout thrash and no re-decode of images already in memory. */
.material-card[hidden] {
  display: none;
}

/* ============================================================================
   17. LANGUAGE SWITCHER, LINK FORM

   The switcher used to be buttons that swapped strings in place. It is now a
   list of real links to real locale URLs, so it needs to read as navigation:
   the current language is marked, the others are clearly clickable, and the
   dropdown stacks them rather than laying them out as a chip row.
   ========================================================================== */

/* [hidden] must still win. A bare display:flex here overrode the browser
   default and left the dropdown permanently open. */
.lang-switch__menu.lang-switch__links:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.lang-switch__links .chip {
  justify-content: flex-start;
  width: 100%;
  border-color: transparent;
  background: transparent;
}

.lang-switch__links .chip:hover {
  background: var(--surface-hover-light);
  border-color: transparent;
  color: var(--color-ink);
}

/* The current language is stated, not just implied by styling, because
   aria-current is what a screen reader announces. */
.lang-switch__links .chip[aria-current="true"] {
  background: var(--color-steel-50);
  color: var(--color-steel-deep);
  font-weight: 500;
}

/* In the footer and the mobile overlay the switcher sits on graphite. */
.dark-band .lang-switch__links .chip,
.mobile-menu .lang-switch__links .chip {
  border-color: var(--line-dark);
  color: var(--text-on-dark);
}

.dark-band .lang-switch__links .chip:hover,
.mobile-menu .lang-switch__links .chip:hover {
  background: var(--surface-hover-dark);
  color: var(--color-off-white);
}

.dark-band .lang-switch__links .chip[aria-current="true"],
.mobile-menu .lang-switch__links .chip[aria-current="true"] {
  border-color: var(--line-accent-dark);
  background: var(--surface-raise-dark);
  color: var(--color-off-white);
}

/* The footer and overlay variants lay out in a row, not a column. */
.row.lang-switch__links {
  flex-direction: row;
  flex-wrap: wrap;
}

.row.lang-switch__links .chip {
  width: auto;
}