/* ============================================================
   Safeline Asia Sdn. Bhd. — corporate site stylesheet (v2)
   Layout idiom: solid navy header, full-width slider, wide
   whitespace bands, image cards. Brand: navy #283890 /
   yellow #FFDE00 from the Safeline wordmark.
   ============================================================ */

:root {
  --navy: #14226e;        /* header, footer, dark bands */
  --blue: #283890;        /* brand blue — links, buttons */
  --blue-deep: #1c2a78;
  --yellow: #ffde00;      /* single accent */
  --yellow-ink: #141a3d;

  --bg: #ffffff;
  --bg-alt: #f4f6fa;
  --bg-sunk: #e9ecf4;
  --text: #1f2440;
  --text-2: #4d5472;
  --text-3: #7a8099;
  --line: #e1e4ee;
  --line-strong: #c5cadb;
  --card-shadow: 0 10px 30px -14px rgba(20, 34, 110, 0.35);
  --overlay: linear-gradient(90deg, rgba(10, 18, 60, 0.82) 0%, rgba(10, 18, 60, 0.55) 45%, rgba(10, 18, 60, 0.15) 100%);

  --font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Roboto Mono", Menlo, Consolas, monospace;

  --max: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 6px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1430;
    --bg-alt: #151b3d;
    --bg-sunk: #0a0e26;
    --text: #eef0f8;
    --text-2: #bcc2dc;
    --text-3: #8d94b8;
    --line: #283060;
    --line-strong: #3b4478;
    --blue: #8ea0ff;
    --blue-deep: #b3c0ff;
    --card-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1430;
  --bg-alt: #151b3d;
  --bg-sunk: #0a0e26;
  --text: #eef0f8;
  --text-2: #bcc2dc;
  --text-3: #8d94b8;
  --line: #283060;
  --line-strong: #3b4478;
  --blue: #8ea0ff;
  --blue-deep: #b3c0ff;
  --card-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--blue); }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); line-height: 1.15; text-wrap: balance; color: var(--text); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
.h-xl { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 300; letter-spacing: -0.01em; }
.h-xl strong, .h-l strong { font-weight: 600; }
.h-l  { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 300; letter-spacing: -0.01em; }
.h-m  { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; }
.h-s  { font-size: 1.05rem; font-weight: 600; }
.eyebrow {
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}
.lede { font-size: 1.1rem; color: var(--text-2); max-width: 60ch; line-height: 1.7; }
.measure { max-width: 62ch; }
.rule { width: 56px; height: 4px; background: var(--yellow); border-radius: 2px; }
.mono { font-family: var(--font-mono); }
.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--blue);
}
.link::after { content: "→"; transition: transform 160ms ease; }
.link:hover::after { transform: translateX(4px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 0.88rem;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  padding: 14px 28px; border-radius: 3px; border: 2px solid transparent;
  cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.btn-yellow { background: var(--yellow); color: var(--yellow-ink); border-color: var(--yellow); }
.btn-yellow:hover { background: #ffe94d; border-color: #ffe94d; }
.btn-blue { background: #283890; color: #fff; border-color: #283890; }
.btn-blue:hover { background: #1c2a78; border-color: #1c2a78; }
.btn-white { background: transparent; color: #fff; border-color: #fff; }
.btn-white:hover { background: #fff; color: var(--navy); }
.btn-outline { background: transparent; color: var(--blue); border-color: currentColor; }
.btn-outline:hover { background: var(--bg-alt); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60;
  background: var(--navy); color: #fff;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 84px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 40px; width: auto; filter: brightness(0) invert(1); }
.nav { display: flex; align-items: center; gap: 4px; }
.nav > li { position: relative; }
.nav a, .nav .nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 500; font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.88); text-decoration: none;
  padding: 10px 16px; background: none; border: 0; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav .nav-btn:hover { color: #fff; }
.nav a[aria-current="page"], .nav > li.current > .nav-btn { color: #fff; border-bottom-color: var(--yellow); }
.nav .nav-btn svg { width: 10px; height: 10px; opacity: 0.7; }
.dropdown {
  position: absolute; left: 8px; top: calc(100% + 6px);
  min-width: 260px; background: #fff; color: var(--text);
  border-radius: 4px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.35);
  padding: 8px 0; display: none; z-index: 70;
}
.dropdown::before { content: ""; position: absolute; left: 24px; top: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); }
.nav > li:hover > .dropdown, .nav > li:focus-within > .dropdown, .nav > li.open > .dropdown { display: block; }
.dropdown a { display: block; color: var(--text); padding: 10px 18px; font-weight: 500; font-size: 0.9rem; border: 0; }
.dropdown a small { display: block; color: var(--text-3); font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; }
.dropdown a:hover { background: var(--bg-alt); color: var(--blue); }
:root[data-theme="dark"] .dropdown { background: #1a2150; }
:root[data-theme="dark"] .dropdown::before { background: #1a2150; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dropdown { background: #1a2150; }
  :root:not([data-theme="light"]) .dropdown::before { background: #1a2150; }
}
.nav-toggle { display: none; background: none; border: 1px solid rgba(255,255,255,0.4); border-radius: 4px; padding: 8px 10px; cursor: pointer; color: #fff; }
.nav-toggle svg { display: block; }
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy); padding: 8px var(--gutter) 20px;
    border-top: 1px solid rgba(255,255,255,0.12);
    max-height: calc(100vh - 84px); overflow-y: auto;
  }
  .nav.open { display: flex; }
  .nav a, .nav .nav-btn { width: 100%; padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,0.1); justify-content: space-between; }
  .nav a[aria-current="page"] { border-bottom-color: var(--yellow); }
  .dropdown { position: static; box-shadow: none; background: transparent; padding: 0 0 8px 14px; min-width: 0; }
  .dropdown::before { display: none; }
  .dropdown a { color: rgba(255,255,255,0.82); border-bottom: 0; padding: 10px 4px; }
  .dropdown a small { color: rgba(255,255,255,0.5); }
  .dropdown a:hover { background: transparent; color: #fff; }
  .nav > li:hover > .dropdown { display: none; }
  .nav > li.open > .dropdown { display: block; }
}

/* ---------- hero slider ---------- */
.slider { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.slides { display: grid; }
.slide {
  grid-area: 1 / 1;
  position: relative;
  min-height: clamp(440px, 64vh, 660px);
  display: grid; align-items: center;
  opacity: 0; transition: opacity 700ms ease; pointer-events: none;
}
.slide.active { opacity: 1; pointer-events: auto; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide::after { content: ""; position: absolute; inset: 0; background: var(--overlay); }
.slide .wrap { position: relative; z-index: 1; padding-block: 64px; width: 100%; }
.slide-copy { max-width: 620px; display: grid; gap: 18px; }
.slide-copy .eyebrow { color: var(--yellow); }
.slide-copy h2 { color: #fff; font-size: clamp(2rem, 4.8vw, 3.6rem); font-weight: 300; line-height: 1.1; }
.slide-copy h2 strong { font-weight: 600; }
.slide-copy p { color: rgba(255,255,255,0.85); font-size: 1.08rem; max-width: 52ch; }
.slide-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.slider-nav { position: absolute; z-index: 2; left: 0; right: 0; bottom: 24px; }
.slider-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dots { display: flex; gap: 8px; }
.dot { width: 34px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.35); border: 0; padding: 0; cursor: pointer; }
.dot[aria-current="true"] { background: var(--yellow); }
.arrows { display: flex; gap: 8px; }
.arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); background: rgba(0,0,0,0.2); color: #fff; cursor: pointer; display: grid; place-items: center; }
.arrow:hover { background: #fff; color: var(--navy); }
.arrow svg { width: 18px; height: 18px; }

/* ---------- sections ---------- */
.section { padding-block: clamp(56px, 8vw, 110px); }
.section-alt { background: var(--bg-alt); }
.section-navy { background: var(--navy); color: #fff; }
.section-navy h1, .section-navy h2, .section-navy h3 { color: #fff; }
.section-navy .eyebrow { color: var(--yellow); }
.section-navy .lede { color: rgba(255,255,255,0.8); }
.head { display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); }
.head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; }
.head-row .head { margin: 0; }

/* statement (image + text) */
.statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.statement img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.statement-copy { display: grid; gap: 22px; }
.statement-copy .h-l { color: var(--text); font-size: clamp(1.3rem, 2.3vw, 1.8rem); line-height: 1.4; font-weight: 300; }
.statement-copy .tagline { font-family: var(--font-head); font-weight: 600; color: var(--blue); font-size: 1.05rem; }
@media (max-width: 820px) { .statement { grid-template-columns: 1fr; } }

/* image cards (product ranges) */
.ranges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.range-card {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 4 / 5; background: var(--bg-sunk); color: #fff; text-decoration: none;
}
.range-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.range-card:hover img { transform: scale(1.05); }
.range-card .cap {
  position: absolute; inset: auto 0 0 0; padding: 120px 22px 24px;
  background: linear-gradient(180deg, transparent, rgba(10, 18, 60, 0.92));
  display: grid; gap: 6px;
}
.range-card .cap .eyebrow { color: var(--yellow); }
.range-card .cap h3 { color: #fff; font-size: 1.35rem; font-weight: 600; }
.range-card .cap p { color: rgba(255,255,255,0.8); font-size: 0.92rem; line-height: 1.5; }
.range-card .cap .link { color: #fff; margin-top: 6px; }
@media (max-width: 960px) { .ranges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ranges { grid-template-columns: 1fr; } .range-card { aspect-ratio: 4 / 3; } }

/* split with background image (quality) */
.split-bg { position: relative; color: #fff; background: var(--navy); overflow: hidden; }
.split-bg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.split-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,34,110,0.98) 0%, rgba(20,34,110,0.85) 50%, rgba(20,34,110,0.55) 100%); }
.split-bg .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); padding-block: clamp(56px, 8vw, 110px); align-items: center; }
.split-bg h2 { color: #fff; }
.split-bg p { color: rgba(255,255,255,0.85); }
.split-bg .eyebrow { color: var(--yellow); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.stat { border-left: 3px solid var(--yellow); padding-left: 18px; display: grid; gap: 4px; }
.stat b { font-family: var(--font-head); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; line-height: 1; color: #fff; }
.stat span { font-size: 0.92rem; color: rgba(255,255,255,0.75); }
@media (max-width: 820px) { .split-bg .wrap { grid-template-columns: 1fr; } }

/* checklist points */
.points { display: grid; gap: 22px; }
.point { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
.point .ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); }
.point .ico svg { width: 22px; height: 22px; }
.point h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 4px; }
.point p { color: var(--text-2); font-size: 0.97rem; }
.section-navy .point p { color: rgba(255,255,255,0.78); }

/* ---------- product cards: compact catalogue list rows ----------
   One article per full-width row: photo | header line / spec line /
   markings line. Everything reads left-to-right, nothing stacks tall. */
.products { display: grid; grid-template-columns: 1fr; gap: 14px; }
.product {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: box-shadow 220ms ease, transform 220ms ease, opacity 300ms ease;
}
.product:hover { box-shadow: var(--card-shadow); }
@media (max-width: 700px) { .product { grid-template-columns: 1fr; } }

/* photo column */
.product-visual { display: grid; grid-template-rows: 1fr auto; background: #fff; border-right: 1px solid var(--line); }
@media (max-width: 700px) { .product-visual { border-right: 0; border-bottom: 1px solid var(--line); grid-template-columns: 1fr; } }
.product-media { position: relative; min-height: 190px; overflow: hidden; background: #fff; }
@media (max-width: 700px) { .product-media { aspect-ratio: 16 / 10; min-height: 0; } }
.product-media img.main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: opacity 250ms ease; }
.product-media.in-use img.main { object-fit: cover; padding: 0; }
.product-media img.main.swapping { opacity: 0; }
.product-media.ph { display: grid; place-content: center; gap: 4px; text-align: center; background: repeating-linear-gradient(135deg, var(--bg-alt) 0 8px, var(--bg) 8px 16px); color: var(--text-3); }
.product-media.ph .ph-mark { font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; color: var(--text-2); }
.product-media.ph .ph-cat { font-family: var(--font-head); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.thumbs { display: flex; gap: 5px; padding: 6px; border-top: 1px solid var(--line); background: var(--bg-alt); }
.thumb { width: 36px; height: 36px; padding: 0; border: 2px solid transparent; border-radius: 3px; background: #fff; overflow: hidden; cursor: pointer; flex: none; transition: transform 160ms ease, border-color 160ms ease; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { border-color: var(--blue); }
.thumb:hover { transform: translateY(-2px); }

/* sheet column: three horizontal lines */
.product-sheet { padding: 16px 20px 14px; display: grid; gap: 12px; align-content: start; }
.sheet-head { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art line" "art name" "art use"; column-gap: 16px; row-gap: 2px; align-items: start; }
.sheet-line { grid-area: line; font-family: var(--font-head); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.artno {
  grid-area: art; align-self: start; display: grid; gap: 0;
  font-family: var(--font-mono); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.02em; line-height: 1.1;
  color: #fff; background: var(--navy); padding: 8px 12px 8px 10px; border-left: 4px solid var(--yellow); border-radius: 2px; min-width: 120px;
}
.artno-k { font-family: var(--font-head); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); }
.sheet-name { grid-area: name; font-family: var(--font-body); font-weight: 500; font-size: 1.02rem; line-height: 1.35; text-wrap: pretty; }
.sheet-use { grid-area: use; color: var(--text-3); font-size: 0.86rem; }
.sheet-use::before { content: "For "; color: var(--text-2); font-weight: 500; }
@media (max-width: 700px) { .sheet-head { grid-template-columns: 1fr; grid-template-areas: "line" "art" "name" "use"; } .artno { justify-self: start; } }

/* spec line: key value · key value · … */
.plate { display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 0.88rem; }
.plate .cell { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 14px 0 0; margin-right: 14px; border-right: 1px solid var(--line-strong); }
.plate .cell:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.plate .k { font-family: var(--font-head); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.plate .v { font-weight: 500; color: var(--text); }

/* colours inline */
.colours { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.colours .k { font-family: var(--font-head); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-right: 2px; }
.swatch { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 500; color: var(--text); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px 3px 4px; }
.swatch i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.18); }
.swatch small { font-family: var(--font-mono); color: var(--text-3); font-size: 0.68rem; }
button.swatch { cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
button.swatch:hover { border-color: var(--blue); background: var(--bg-alt); }

/* markings line: pictogram + code side by side, EN 388 digits inline, stamps to the right */
.marks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.picto { display: grid; grid-template-columns: auto auto; grid-template-areas: "box code" "box std"; column-gap: 8px; align-items: center; }
.picto-box { grid-area: box; width: 32px; height: 32px; border: 2px solid var(--text); border-radius: 6px; display: grid; place-items: center; color: var(--text); }
.picto-box svg { width: 19px; height: 19px; }
.picto-code { grid-area: code; font-family: var(--font-mono); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.08em; color: var(--text); line-height: 1.1; }
.picto-std { grid-area: std; font-family: var(--font-head); font-size: 0.54rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.en { display: grid; grid-auto-flow: column; gap: 9px; padding-left: 14px; border-left: 1px solid var(--line-strong); }
.en-cell { display: grid; gap: 0; justify-items: center; }
.en-cell b { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; line-height: 1.1; }
.en-cell.x b { color: var(--text-3); }
.en-cell small { font-family: var(--font-head); font-size: 0.48rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }

.stamps { display: flex; flex-wrap: wrap; gap: 5px; }
.stamp { font-family: var(--font-head); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; background: var(--navy); color: #fff; }
.stamp-yellow { background: var(--yellow); color: var(--yellow-ink); }
.stamp-soft { background: var(--bg-alt); color: var(--text-2); border: 1px solid var(--line); }

/* footer: links right-aligned on the last line together with stamps */
.sheet-foot { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.sheet-foot .link { font-size: 0.8rem; }
.link-quiet { color: var(--text-3); }

/* compact stacked variant for the 4-up featured row on the home page */
.products-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.products-4 .product { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.products-4 .product-visual { border-right: 0; border-bottom: 1px solid var(--line); grid-template-rows: auto auto; align-self: start; }
.products-4 .product-media { aspect-ratio: 1 / 1; min-height: 0; }
.products-4 .product-sheet { padding: 16px 16px 14px; gap: 10px; }
.products-4 .sheet-head { grid-template-columns: 1fr; grid-template-areas: "line" "art" "name" "use"; }
.products-4 .artno { justify-self: start; }
.products-4 .plate .cell { border-right: 0; margin-right: 0; padding-right: 0; flex-basis: 100%; }
.products-4 .en, .products-4 .sheet-foot, .products-4 .sheet-use { display: none; }
@media (max-width: 1100px) { .products-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .products-4 { grid-template-columns: 1fr; } }

/* ---------- catalogue filters ---------- */
.filters { display: grid; gap: 14px; margin-bottom: 32px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-row .eyebrow { margin-right: 8px; color: var(--text-3); }
.chip { background: var(--bg); border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 16px; font-size: 0.9rem; cursor: pointer; transition: background 120ms ease; }
.chip:hover { background: var(--bg-alt); }
.chip[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.search { width: 100%; max-width: 420px; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--bg); color: var(--text); font: inherit; }
.result-count { font-size: 0.85rem; color: var(--text-3); }
.empty { padding: 48px 20px; text-align: center; color: var(--text-3); border: 1px dashed var(--line-strong); border-radius: var(--radius); }

/* standards table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.95rem; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--font-head); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); background: var(--bg-alt); }
tr:last-child td { border-bottom: 0; }
td.mono { font-family: var(--font-mono); font-size: 0.9rem; white-space: nowrap; }

/* ---------- applications ---------- */
.apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.app { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--bg-sunk); text-decoration: none; color: #fff; }
.app img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.app:hover img { transform: scale(1.05); }
.app .cap { position: absolute; inset: auto 0 0 0; padding: 60px 18px 18px; background: linear-gradient(180deg, transparent, rgba(10, 18, 60, 0.9)); display: grid; gap: 2px; }
.app .cap b { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; }
.app .cap span { font-size: 0.78rem; color: var(--yellow); font-family: var(--font-mono); }
.app.wide { grid-column: span 2; aspect-ratio: auto; }
@media (max-width: 960px) { .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app.wide { aspect-ratio: 8 / 5; } }
@media (max-width: 520px) { .apps { grid-template-columns: 1fr; } .app.wide { grid-column: auto; aspect-ratio: 8 / 5; } }

/* ---------- enquiries ---------- */
.enquiry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.enquiry-box { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); display: grid; gap: 16px; box-shadow: var(--card-shadow); }
.enquiry-box label { font-family: var(--font-head); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.select { width: 100%; padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--bg); color: var(--text); font: inherit; }
.enquiry-box .meta { font-size: 0.92rem; color: var(--text-2); }
@media (max-width: 820px) { .enquiry { grid-template-columns: 1fr; } }

/* ---------- page banner (inner pages) ---------- */
.banner { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::before { content: ""; position: absolute; inset: 0; background: var(--overlay); }
.banner .wrap { position: relative; width: 100%; min-height: clamp(260px, 36vh, 380px); display: grid; align-content: center; gap: 14px; padding-block: 56px; }
.banner .eyebrow { color: var(--yellow); }
.banner h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 300; }
.banner h1 strong { font-weight: 600; }
.banner p { color: rgba(255,255,255,0.85); max-width: 60ch; font-size: 1.08rem; }
.crumbs { font-size: 0.82rem; color: rgba(255,255,255,0.65); display: flex; gap: 8px; }
.crumbs a { color: rgba(255,255,255,0.85); text-decoration: none; }

/* ---------- about page ---------- */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.value { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; display: grid; gap: 12px; align-content: start; }
.value .num { font-family: var(--font-head); font-weight: 600; font-size: 2rem; color: var(--blue); line-height: 1; }
.value h3 { font-size: 1.1rem; font-weight: 600; }
.value p { color: var(--text-2); font-size: 0.97rem; }
@media (max-width: 860px) { .values { grid-template-columns: 1fr; } }
.range-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.range-item { background: var(--bg); border-top: 3px solid var(--yellow); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--card-shadow); padding: 24px 24px 26px; display: grid; gap: 10px; align-content: start; }
.range-item h3 { font-size: 1.02rem; font-weight: 600; }
.range-item ul { color: var(--text-2); font-size: 0.95rem; display: grid; gap: 4px; }
.range-item li { padding-left: 14px; position: relative; }
.range-item li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.quote { font-family: var(--font-head); font-weight: 300; font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.3; color: var(--text); border-left: 4px solid var(--yellow); padding-left: 24px; }
.quote strong { font-weight: 600; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.info { display: grid; gap: 26px; }
.info-block { display: grid; gap: 4px; }
.info-block .eyebrow { color: var(--text-3); margin-bottom: 4px; }
.info-block a { text-decoration: none; color: var(--text); }
.info-block a:hover { color: var(--blue); }
.info-block .big { font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; }
.form { display: grid; gap: 18px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); box-shadow: var(--card-shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-family: var(--font-head); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--bg); color: var(--text); font: inherit; }
.field textarea { min-height: 150px; resize: vertical; }
.form-note { font-size: 0.85rem; color: var(--text-3); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.8); }
.site-footer .wrap { padding-block: 64px 28px; display: grid; gap: 44px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px; }
.foot-grid h4 { font-family: var(--font-head); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); margin-bottom: 16px; }
.foot-grid ul { display: grid; gap: 8px; font-size: 0.95rem; }
.foot-grid a { color: rgba(255,255,255,0.85); text-decoration: none; }
.foot-grid a:hover { color: #fff; text-decoration: underline; }
.foot-brand { display: grid; gap: 14px; }
.foot-brand img { height: 36px; width: auto; filter: brightness(0) invert(1); }
.foot-brand p { font-size: 0.95rem; max-width: 38ch; }
.foot-tag { font-family: var(--font-head); font-weight: 600; color: #fff; font-size: 1rem; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,0.14); padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.84rem; color: rgba(255,255,255,0.6); }
.foot-bottom a { color: inherit; text-decoration: none; }
.foot-bottom a:hover { color: #fff; }
.foot-bottom .links { display: flex; gap: 18px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

}

/* ============================================================
   Motion. Everything here is opt-in via the `js` class on <html>
   (added by site.js), so the page is fully visible without script,
   and all of it is disabled under prefers-reduced-motion.
   ============================================================ */

/* ---------- scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1); }
.js .reveal-stagger.in > * { opacity: 1; transform: none; }
.js .reveal-stagger.in > :nth-child(1) { transition-delay: 0ms; }
.js .reveal-stagger.in > :nth-child(2) { transition-delay: 90ms; }
.js .reveal-stagger.in > :nth-child(3) { transition-delay: 180ms; }
.js .reveal-stagger.in > :nth-child(4) { transition-delay: 270ms; }
.js .reveal-stagger.in > :nth-child(5) { transition-delay: 360ms; }
.js .reveal-stagger.in > :nth-child(6) { transition-delay: 450ms; }
.js .reveal-stagger.in > :nth-child(7) { transition-delay: 540ms; }
.js .reveal-stagger.in > :nth-child(8) { transition-delay: 630ms; }
.js .reveal-stagger.in > :nth-child(n+9) { transition-delay: 700ms; }

/* yellow rule draws in with its heading */
.js .reveal .rule, .js .head .rule { transform-origin: left center; transform: scaleX(0); transition: transform 700ms cubic-bezier(.2,.7,.2,1) 250ms; }
.js .reveal.in .rule, .js .head.in .rule { transform: scaleX(1); }

/* stat blocks: border draws down, number fades */
.js .stats .stat { border-left-color: transparent; transition: border-color 500ms ease; }
.js .stats.in .stat { border-left-color: var(--yellow); }
.js .stats.in .stat:nth-child(2) { transition-delay: 120ms; }
.js .stats.in .stat:nth-child(3) { transition-delay: 240ms; }
.js .stats.in .stat:nth-child(4) { transition-delay: 360ms; }

/* ---------- hero slider ---------- */
.slide img { transform: scale(1); }
.js .slide.active img { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.js .slide-copy > * { opacity: 0; transform: translateY(18px); }
.js .slide.active .slide-copy > * { animation: rise 700ms cubic-bezier(.2,.7,.2,1) forwards; }
.js .slide.active .slide-copy > :nth-child(1) { animation-delay: 250ms; }
.js .slide.active .slide-copy > :nth-child(2) { animation-delay: 380ms; }
.js .slide.active .slide-copy > :nth-child(3) { animation-delay: 520ms; }
.js .slide.active .slide-copy > :nth-child(4) { animation-delay: 660ms; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* dot fills over the autoplay interval */
.dot { position: relative; overflow: hidden; }
.dot::after { content: ""; position: absolute; inset: 0; background: var(--yellow); transform: scaleX(0); transform-origin: left; }
.dot[aria-current="true"] { background: rgba(255,255,255,0.35); }
.js .slider.autoplay .dot[aria-current="true"]::after { animation: fill var(--slide-ms, 6500ms) linear forwards; }
.js .slider:not(.autoplay) .dot[aria-current="true"]::after { transform: scaleX(1); }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.arrow { transition: background 160ms ease, color 160ms ease, transform 160ms ease; }
.arrow:hover { transform: scale(1.06); }

/* ---------- header ---------- */
.site-header { transition: box-shadow 200ms ease; }
.site-header .wrap { transition: min-height 250ms ease; }
.site-header.compact .wrap { min-height: 66px; }
.site-header.compact { box-shadow: 0 8px 24px -12px rgba(0,0,0,0.5); }
.brand img { transition: height 250ms ease; }
.site-header.compact .brand img { height: 32px; }
/* nav underline slides in from the left */
.nav > li > a, .nav > li > .nav-btn { position: relative; border-bottom: 0; }
.nav > li > a::after, .nav > li > .nav-btn::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px;
  background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform 220ms ease;
}
.nav > li > a:hover::after, .nav > li > .nav-btn:hover::after,
.nav > li > a[aria-current="page"]::after, .nav > li.current > .nav-btn::after { transform: scaleX(1); }
@media (max-width: 960px) {
  .nav > li > a::after, .nav > li > .nav-btn::after { display: none; }
  .nav > li > a, .nav > li > .nav-btn { border-bottom: 1px solid rgba(255,255,255,0.1); }
}
/* dropdown eases in */
.dropdown { animation: drop 180ms ease-out; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- micro-interactions ---------- */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.25); transform: translateX(-110%) skewX(-18deg); transition: transform 500ms ease; }
.btn:hover::after { transform: translateX(110%) skewX(-18deg); }
.range-card .cap { transform: translateY(6px); transition: transform 350ms ease; }
.range-card .cap p, .range-card .cap .link { opacity: 0.85; transition: opacity 350ms ease; }
.range-card:hover .cap { transform: none; }
.range-card:hover .cap p, .range-card:hover .cap .link { opacity: 1; }
.app .cap b { transform: translateY(0); transition: transform 300ms ease; }
.app:hover .cap b { transform: translateY(-2px); }
.product { transition: box-shadow 220ms ease, transform 220ms ease, opacity 300ms ease; }
.product-media img.main { transition: opacity 250ms ease; }
.product-media img.main.swapping { opacity: 0; }
.thumb, .swatch { transition: transform 160ms ease, border-color 160ms ease; }
.thumb:hover { transform: translateY(-2px); }
.chip { transition: background 160ms ease, color 160ms ease, transform 120ms ease; }
.chip:active { transform: scale(0.96); }
.js .product.filter-in { animation: pop 350ms ease both; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* campaign background drifts slowly on scroll (position set by JS) */
.js .campaign > img { will-change: transform; transform: translateY(var(--parallax, 0)) scale(1.15); }
.js .split-bg > img { will-change: transform; transform: translateY(var(--parallax, 0)) scale(1.12); }

/* ---------- reduced motion: turn it all off ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-stagger > *, .js .slide-copy > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .js .reveal .rule, .js .head .rule { transform: none !important; }
  .js .stats .stat { border-left-color: var(--yellow) !important; }
  .js .slide.active img, .dot::after { animation: none !important; }
  .js .campaign > img, .js .split-bg > img { transform: none !important; }
  .btn::after { display: none; }
}

/* ============================================================
   Our Story page
   ============================================================ */
.banner-tall .wrap { min-height: clamp(320px, 44vh, 460px); }

/* intro: statement + fact panel */
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.intro-copy { display: grid; gap: 22px; }
.prose { display: grid; gap: 18px; max-width: 62ch; }
.prose p { color: var(--text-2); }
.prose .lead { color: var(--text); font-size: 1.15rem; line-height: 1.65; }
.glance {
  position: sticky; top: calc(84px + env(safe-area-inset-top, 0px) + 24px);
  background: var(--bg-alt); border-top: 4px solid var(--yellow);
  padding: 28px 28px 30px; display: grid; gap: 18px;
}
.glance h3 { font-family: var(--font-head); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.glance dl { margin: 0; display: grid; }
.glance dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.glance dl > div:last-child { border-bottom: 0; }
.glance dt { font-family: var(--font-head); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
.glance dd { margin: 0; font-weight: 500; color: var(--text); font-size: 0.97rem; }
.glance dd.mono { font-family: var(--font-mono); font-size: 0.9rem; }
@media (max-width: 900px) { .intro-grid { grid-template-columns: 1fr; } .glance { position: static; } }

/* alternating range rows */
.zig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.zig:first-of-type { border-top: 0; padding-top: 0; }
.zig-media { margin: 0; position: relative; }
.zig-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); }
.zig-media figcaption {
  position: absolute; left: 0; bottom: 18px; padding: 8px 16px;
  background: var(--navy); color: #fff; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em;
}
.zig-flip .zig-media { order: 2; }
.zig-flip .zig-media figcaption { left: auto; right: 0; }
.zig-copy { display: grid; gap: 16px; max-width: 54ch; }
.zig-copy p { color: var(--text-2); }
.ticks { display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 28px; font-size: 0.97rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.35em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--yellow);
}
.ticks li::after {
  content: ""; position: absolute; left: 5px; top: calc(0.35em + 4px); width: 6px; height: 3px;
  border-left: 2px solid var(--yellow-ink); border-bottom: 2px solid var(--yellow-ink); transform: rotate(-45deg);
}
@media (max-width: 820px) { .zig { grid-template-columns: 1fr; } .zig-flip .zig-media { order: 0; } }

/* commitment band */
.commitment-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.commitment-tag { display: grid; gap: 4px; margin-top: 16px; font-family: var(--font-head); font-weight: 300; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.1; color: #fff; }
.commitment-tag span:last-child { font-weight: 600; color: var(--yellow); }
.commitment-list { margin: 0; display: grid; }
.commitment-list > div { padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.16); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px; }
.commitment-list > div:first-child { border-top: 0; padding-top: 0; }
.commitment-list dt { font-family: var(--font-head); font-weight: 600; color: #fff; font-size: 1.02rem; line-height: 1.35; }
.commitment-list dd { margin: 0; color: rgba(255,255,255,0.78); font-size: 0.97rem; }
@media (max-width: 820px) { .commitment-grid { grid-template-columns: 1fr; } .commitment-list > div { grid-template-columns: 1fr; gap: 6px; } }

/* process (ordered, a real sequence) */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: step; position: relative; }
.process::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 2px; background: var(--line); }
.process li { counter-increment: step; position: relative; padding: 0 24px 0 0; display: grid; gap: 12px; align-content: start; }
.process li + li { padding-left: 24px; }
.step-ico { position: relative; z-index: 1; width: 50px; height: 50px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; border: 4px solid var(--bg); box-shadow: 0 0 0 2px var(--line); }
.step-ico svg { width: 22px; height: 22px; }
.process h3 { font-size: 1.05rem; font-weight: 600; margin-top: 6px; }
.process h3::before { content: counter(step, decimal-leading-zero) "  "; font-family: var(--font-mono); font-weight: 500; color: var(--blue); font-size: 0.85rem; letter-spacing: 0.06em; }
.process p { color: var(--text-2); font-size: 0.95rem; }
@media (max-width: 900px) {
  .process { grid-template-columns: 1fr; gap: 28px; }
  .process::before { left: 24px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; }
  .process li { grid-template-columns: 50px 1fr; column-gap: 18px; padding: 0 !important; }
  .process li h3 { grid-column: 2; margin-top: 0; }
  .process li p { grid-column: 2; }
  .step-ico { grid-row: 1 / span 2; }
}

/* industries strip */
.industries { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.industries a { display: grid; gap: 10px; text-decoration: none; color: var(--text); }
.industries img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); transition: transform 300ms ease; }
.industries a:hover img { transform: translateY(-3px); }
.industries span { font-family: var(--font-head); font-weight: 600; font-size: 0.8rem; line-height: 1.3; }
@media (max-width: 960px) { .industries { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .industries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* fixes: readable banner over light photos; light body text on the quality band */
.banner-tall::before { background: linear-gradient(90deg, rgba(10, 18, 60, 0.93) 0%, rgba(10, 18, 60, 0.7) 55%, rgba(10, 18, 60, 0.35) 100%); }
.split-bg .point p { color: rgba(255, 255, 255, 0.8); }
.banner::before, .split-bg::before { z-index: 1; }
.banner .wrap, .split-bg .wrap { z-index: 2; }

/* industries: 4 x 2 photo tiles with the label on the image */
.industries { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.industries a { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-sunk); }
.industries img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; transition: transform 500ms ease; }
.industries a:hover img { transform: scale(1.05); }
.industries span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 16px;
  color: #fff; font-size: 1rem;
  background: linear-gradient(180deg, transparent, rgba(10, 18, 60, 0.88));
}
@media (max-width: 960px) { .industries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 520px) { .industries { grid-template-columns: repeat(2, minmax(0, 1fr)); } .industries span { font-size: 0.88rem; padding: 36px 12px 12px; } }

/* alignment fixes */
body { overflow-x: clip; }
.split-bg, .banner, .slider { overflow: hidden; clip-path: inset(0); }
.section-tight { padding-block: clamp(40px, 6vw, 72px); }
.industries { margin-top: 4px; }
.banner-tall > img { object-position: 60% 20%; }

/* ---------- Quality & Compliance page ---------- */
.schemes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.scheme { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 30px 28px; display: grid; gap: 14px; align-content: start; }
.scheme-mark { justify-self: start; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.06em; color: #fff; background: var(--navy); padding: 8px 14px; border-radius: 3px; }
.scheme-mark-yellow { background: var(--yellow); color: var(--yellow-ink); }
.scheme h3 { font-size: 1.25rem; font-weight: 600; }
.scheme p { color: var(--text-2); }
@media (max-width: 820px) { .schemes { grid-template-columns: 1fr; } }
.std { display: grid; gap: 18px; }
.std + .std, .std-row { margin-top: clamp(28px, 4vw, 44px); }
.std-head { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.std-head p { color: var(--text-2); margin-top: 4px; }
.std-picto { width: 56px; height: 56px; border: 2.5px solid var(--text); border-radius: 10px; display: grid; place-items: center; color: var(--text); }
.std-picto svg { width: 32px; height: 32px; }
.std-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.std-note { padding: 12px 16px; background: var(--bg-alt); border-left: 3px solid var(--yellow); font-size: 0.95rem; color: var(--text-2); }
@media (max-width: 820px) { .std-row { grid-template-columns: 1fr; } }

/* ============================================================
   Catalogue as specification tables, grouped by range
   ============================================================ */
.catalogue { display: grid; gap: clamp(40px, 6vw, 72px); }
.range-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 3px solid var(--navy); }
.range-head .h-l { margin-top: 6px; }
.range-head p { color: var(--text-2); max-width: 70ch; margin-top: 6px; }
.range-count { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-3); white-space: nowrap; padding-bottom: 4px; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 0.9rem; }
.spec-table th {
  font-family: var(--font-head); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-strong); background: transparent; white-space: nowrap;
}
.spec-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--text); line-height: 1.45; }
.spec-table tr.row { cursor: pointer; transition: background 140ms ease; }
.spec-table tr.row:hover, .spec-table tr.row:focus-visible { background: var(--bg-alt); outline: none; }
.spec-table tr.row.open { background: var(--bg-alt); }
.spec-table tr.row.open td { border-bottom-color: transparent; }
.spec-table .c-art { width: 34%; min-width: 300px; }
.spec-table .c-x { width: 36px; text-align: right; color: var(--text-3); }
.spec-table .chev svg { width: 18px; height: 18px; transition: transform 200ms ease; }
.spec-table tr.row.open .chev svg { transform: rotate(180deg); }
.spec-table .dash { color: var(--line-strong); }

.art { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.art-thumb { width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 3px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.art-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.art-thumb .no-img { width: 100%; height: 100%; background: repeating-linear-gradient(135deg, var(--bg-alt) 0 5px, #fff 5px 10px); }
.art-num { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 1rem; color: var(--navy); letter-spacing: 0.02em; }
.art-name { display: block; font-weight: 500; }
.art-use { display: block; font-size: 0.8rem; color: var(--text-3); }
.code { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; }
.pi { width: 20px; height: 20px; border: 1.5px solid var(--text); border-radius: 4px; display: inline-grid; place-items: center; }
.pi svg { width: 13px; height: 13px; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.2); margin-right: 2px; vertical-align: -1px; }
.spec-table .stamp { font-size: 0.56rem; padding: 3px 6px; white-space: nowrap; }

/* drawer */
.spec-table tr.drawer > td { padding: 0 12px 22px; background: var(--bg-alt); border-bottom: 1px solid var(--line-strong); }
.dr { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
@media (max-width: 800px) { .dr { grid-template-columns: 1fr; } }
.dr-photos { display: grid; gap: 8px; align-content: start; }
.dr-main { position: relative; aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.dr-main img.main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; transition: opacity 250ms ease; }
.dr-main.in-use img.main { object-fit: cover; padding: 0; }
.dr-main img.main.swapping { opacity: 0; }
.dr-main.ph { display: grid; place-content: center; gap: 4px; text-align: center; background: repeating-linear-gradient(135deg, var(--bg-alt) 0 8px, #fff 8px 16px); }
.dr-photos .thumbs { padding: 0; border: 0; background: transparent; }
.dr-photos .thumb { width: 52px; height: 52px; border: 2px solid var(--line); }
.dr-photos .thumb.is-active { border-color: var(--blue); }
.dr-body { display: grid; gap: 18px; align-content: start; }
.dr-head { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.dr-name { font-family: var(--font-body); font-weight: 500; font-size: 1.1rem; line-height: 1.35; }
.dr-spec { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.dr-spec > div { padding: 10px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 2px; margin: 0 -1px -1px 0; }
.dr-spec dt { font-family: var(--font-head); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.dr-spec dd { margin: 0; font-weight: 500; font-size: 0.92rem; }
.dr-notes { display: grid; gap: 4px; font-size: 0.9rem; color: var(--text-2); }
.dr-notes li { padding-left: 16px; position: relative; }
.dr-notes li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.dr-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* home: featured tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }
.tile { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); transition: box-shadow 200ms ease, transform 200ms ease; }
.tile:hover { box-shadow: var(--card-shadow); transform: translateY(-2px); }
.tile-media { display: block; aspect-ratio: 1 / 1; background: #fff; border-bottom: 1px solid var(--line); }
.tile-media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.tile-body { display: grid; gap: 4px; padding: 16px 18px 18px; align-content: start; }
.tile-num { font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; color: var(--navy); }
.tile-name { font-size: 0.92rem; color: var(--text-2); line-height: 1.4; }
.tile-key { margin-top: 6px; font-size: 0.85rem; color: var(--text); }
.spec-table .c-art { width: 30%; min-width: 280px; }
.spec-table td[data-col="Sizes"], .spec-table td[data-col="Length"], .spec-table td[data-col="Weight"], .spec-table td[data-col="Size"] { white-space: nowrap; }
.spec-table td[data-col="Packaging"] { min-width: 170px; font-size: 0.84rem; color: var(--text-2); }
.spec-table td[data-col="Structure"], .spec-table td[data-col="Coating"], .spec-table td[data-col="Design"] { min-width: 110px; }
.dr-head .artno { grid-area: auto; }

/* ============================================================
   Technical data sheet (expanded catalogue row)
   ============================================================ */
.spec-table tr.drawer > td { padding: 0 0 26px; background: var(--bg-alt); }
.tds { background: var(--bg); border: 1px solid var(--line-strong); border-top: 4px solid var(--navy); }
.tds-head { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "kicker kicker" "num name"; column-gap: 20px; row-gap: 6px; align-items: baseline; padding: 18px 26px; border-bottom: 1px solid var(--line-strong); }
.tds-kicker { grid-area: kicker; font-family: var(--font-head); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.tds-num { grid-area: num; font-family: var(--font-mono); font-weight: 600; font-size: 1.7rem; color: var(--navy); letter-spacing: 0.02em; line-height: 1; }
.tds-name { grid-area: name; font-size: 1.05rem; font-weight: 500; }
@media (max-width: 640px) { .tds-head { grid-template-columns: 1fr; grid-template-areas: "kicker" "num" "name"; } }

.tds-body { display: grid; grid-template-columns: 280px minmax(0, 1fr) 320px; }
@media (max-width: 1100px) { .tds-body { grid-template-columns: 280px minmax(0, 1fr); } .tds-perf { grid-column: 1 / -1; border-top: 1px solid var(--line-strong); border-left: 0 !important; } }
@media (max-width: 700px) { .tds-body { grid-template-columns: 1fr; } .tds-spec { border-left: 0 !important; border-top: 1px solid var(--line-strong); } }

.tds-photos { padding: 22px; display: grid; gap: 8px; align-content: start; }
.tds-main { position: relative; aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.tds-main img.main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; transition: opacity 250ms ease; }
.tds-main.in-use img.main { object-fit: cover; padding: 0; }
.tds-main img.main.swapping { opacity: 0; }
.tds-main.ph { display: grid; place-content: center; gap: 4px; text-align: center; background: repeating-linear-gradient(135deg, var(--bg-alt) 0 8px, #fff 8px 16px); }
.tds-photos .thumbs { padding: 0; border: 0; background: transparent; }
.tds-photos .thumb { width: 50px; height: 50px; border: 1px solid var(--line-strong); border-radius: 0; }
.tds-photos .thumb.is-active { border: 2px solid var(--navy); }

.tds-spec { border-left: 1px solid var(--line-strong); }
.tds-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 0.92rem; }
.tds-table th { width: 38%; text-align: left; font-family: var(--font-head); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); padding: 11px 18px 11px 24px; border-bottom: 1px solid var(--line); background: transparent; vertical-align: top; white-space: normal; }
.tds-table td { padding: 11px 24px 11px 0; border-bottom: 1px solid var(--line); color: var(--text); line-height: 1.5; vertical-align: top; }
.tds-table tr:last-child th, .tds-table tr:last-child td { border-bottom: 0; }
.tds-table .strong { font-weight: 600; color: var(--navy); }
.tds-table .dim { color: var(--text-3); font-size: 0.82rem; }
.tds-table .dot { margin-right: 6px; }

.tds-perf { border-left: 1px solid var(--line-strong); padding: 22px 24px; display: grid; gap: 18px; align-content: start; }
.perf { display: grid; gap: 12px; }
.perf-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.perf-head .picto { grid-template-columns: auto auto; }
.perf-head p { font-size: 0.8rem; color: var(--text-3); line-height: 1.4; }
.meters { display: grid; gap: 7px; }
.meters li { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px; gap: 12px; align-items: center; font-size: 0.82rem; color: var(--text-2); }
.m-bar { display: inline-grid; grid-auto-flow: column; gap: 3px; }
.m-bar i { display: block; width: 14px; height: 10px; background: var(--bg-sunk); border-radius: 1px; }
.m-bar i.on { background: var(--navy); }
.m-val { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text); text-align: right; white-space: nowrap; }
.m-val .of { color: var(--text-3); font-size: 0.72rem; margin-left: 2px; }
.m-val .nt { font-family: var(--font-body); font-size: 0.72rem; color: var(--text-3); }

.tds-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; padding: 16px 26px; border-top: 1px solid var(--line-strong); background: var(--bg-alt); }
.doc-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 500; color: var(--blue); text-decoration: none; }
.doc-link svg { width: 18px; height: 18px; }
.doc-link:hover { text-decoration: underline; }
.tds-perf { grid-template-columns: minmax(0, 1fr); }
.tds-perf .tds-kicker { grid-area: auto; }
.tds-body { grid-template-columns: 280px minmax(0, 1fr) 360px; }
.meters li { grid-template-columns: 150px auto 1fr; }
.m-label { white-space: nowrap; }
.perf-head { grid-template-columns: auto minmax(0, 1fr); }

/* data sheet side panel: sizing & packing */
.tds-perf { padding: 0; gap: 0; }
.side-block { padding: 18px 22px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.side-block:last-child { border-bottom: 0; }
.side-k { font-family: var(--font-head); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.side-note { font-size: 0.78rem; color: var(--text-3); }
.sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.sz { min-width: 42px; padding: 7px 10px; text-align: center; font-family: var(--font-mono); font-weight: 600; font-size: 0.85rem; border: 1px solid var(--line); color: var(--line-strong); border-radius: 2px; }
.sz.on { border-color: var(--navy); color: var(--navy); background: var(--bg-alt); }
.sz.wide { min-width: 0; font-family: var(--font-body); font-weight: 500; }
.pack { display: grid; gap: 6px; }
.pack li { display: grid; grid-template-columns: 22px auto auto 20px 22px auto; gap: 6px; align-items: center; font-size: 0.85rem; color: var(--text-2); }
.pk-ico { width: 22px; height: 22px; color: var(--navy); }
.pk-ico svg { width: 22px; height: 22px; }
.pk-n { font-family: var(--font-mono); font-weight: 600; color: var(--text); font-size: 0.95rem; }
.pk-arrow { color: var(--line-strong); text-align: center; }
.pk-into { font-weight: 500; color: var(--text); text-transform: capitalize; }
.pk-total { font-size: 0.85rem; color: var(--text-2); padding-top: 8px; border-top: 1px dashed var(--line-strong); }
.pk-total b { font-family: var(--font-mono); color: var(--text); font-size: 0.95rem; }
.wscale { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.w-bar { display: block; height: 10px; background: var(--bg-sunk); border-radius: 2px; overflow: hidden; }
.w-bar i { display: block; height: 100%; background: var(--navy); }
.w-val { font-size: 0.9rem; color: var(--text-2); white-space: nowrap; }
.w-val b { font-family: var(--font-mono); color: var(--text); font-size: 1rem; }
.side-block .perf + .perf { padding-top: 12px; border-top: 1px dashed var(--line); }

/* ============================================================
   Showcase cards — one article per card, photo on its own panel
   ============================================================ */
.showcases { display: grid; gap: 28px; }
.showcase {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: box-shadow 220ms ease, transform 220ms ease;
}
.showcase:hover { box-shadow: var(--card-shadow); }
.showcase.flip .sc-copy { order: 2; }
.showcase.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (max-width: 820px) { .showcase { grid-template-columns: 1fr; } .showcase.flip .sc-copy { order: 0; } .sc-photo { order: -1; } }

.sc-copy { padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 56px); display: grid; gap: 10px; align-content: center; }
.sc-index { font-family: var(--font-head); font-weight: 300; font-size: 1.9rem; color: var(--text-3); line-height: 1; letter-spacing: -0.02em; }
.sc-line { font-family: var(--font-head); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); }
.sc-name { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.25; text-wrap: balance; margin-top: 2px; }
.sc-art { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-weight: 600; font-size: 0.95rem; color: var(--navy); }
.sc-art span { font-family: var(--font-head); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.sc-blurb { color: var(--text-2); font-size: 0.95rem; max-width: 46ch; margin-top: 4px; }
.kspec { margin: 10px 0 0; display: grid; max-width: 440px; }
.kspec > div { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line-strong); align-items: baseline; }
.kspec > div:last-child { border-bottom: 1px solid var(--line-strong); }
.kspec dt { font-family: var(--font-head); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.kspec dd { margin: 0; font-size: 0.92rem; font-weight: 500; color: var(--text); }
.kspec .code { font-size: 0.88rem; }
.sc-copy .stamps { margin-top: 6px; }
.sc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 14px; }
.btn-navy-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-navy-outline:hover { background: var(--navy); color: #fff; }
.showcase.open .btn-navy-outline { background: var(--navy); color: #fff; }

.sc-photo { position: relative; background: #fff; display: grid; grid-template-rows: 1fr auto; min-height: 360px; }
.sc-media { position: relative; min-height: 300px; }
.sc-media img.main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; transition: opacity 250ms ease; }
.sc-media.in-use img.main { object-fit: cover; padding: 0; }
.sc-media img.main.swapping { opacity: 0; }
.sc-media.ph { display: grid; place-content: center; gap: 4px; text-align: center; background: repeating-linear-gradient(135deg, var(--bg-alt) 0 8px, #fff 8px 16px); }
.sc-thumbs { padding: 10px 14px 14px; border: 0; background: transparent; justify-content: flex-end; }
.sc-thumbs .thumb { width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 2px; }
.sc-thumbs .thumb.is-active { border: 2px solid var(--navy); }
@media (max-width: 820px) { .sc-photo { min-height: 0; } .sc-media { aspect-ratio: 4 / 3; min-height: 0; } }

/* data sheet sits directly under its card */
.sheet { margin-top: -28px; margin-bottom: 0; }
.sheet .tds { border-top-width: 1px; border-radius: 0 0 var(--radius) var(--radius); }

/* ============================================================
   Product data sheet — printed-document treatment
   ============================================================ */
.sheet .pds { background: #fff; color: #1f2440; border: 1px solid var(--line-strong); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); font-family: var(--font-body); }
.pds-head { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: end; padding: 22px 32px 18px; border-bottom: 2px solid #1f2440; }
.pds-logo { height: 26px; width: auto; }
.pds-title { display: grid; gap: 2px; }
.pds-title span { font-family: var(--font-head); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #6b7290; }
.pds-title b { font-family: var(--font-mono); font-weight: 600; font-size: 1.5rem; line-height: 1; color: #1f2440; }
.pds-meta { display: grid; grid-template-columns: auto auto; column-gap: 12px; row-gap: 2px; font-size: 0.8rem; color: #1f2440; text-align: left; }
.pds-meta span { font-family: var(--font-head); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #6b7290; align-self: center; }
@media (max-width: 700px) { .pds-head { grid-template-columns: 1fr; gap: 12px; } }

.pds-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; }
@media (max-width: 900px) { .pds-body { grid-template-columns: 1fr; } }

/* figure with callouts */
.pds-fig { margin: 0; padding: 28px 32px; border-right: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
@media (max-width: 900px) { .pds-fig { border-right: 0; border-bottom: 1px solid var(--line); } }
.pds-img { position: relative; aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--line); }
.pds-img img.main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14% 22%; transition: opacity 250ms ease; }
.pds-img.in-use img.main { object-fit: cover; padding: 0; }
.pds-img.in-use .co-dot, .pds-img.in-use .co-line, .pds-img.in-use .co-label { display: none; }
.pds-img img.main.swapping { opacity: 0; }
.pds-img.ph { display: grid; place-content: center; gap: 4px; text-align: center; background: repeating-linear-gradient(135deg, #f4f6fa 0 8px, #fff 8px 16px); }
.co-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #1f2440; box-shadow: 0 0 0 2px #fff; z-index: 2; }
.co-line { position: absolute; height: 1px; background: #1f2440; z-index: 1; }
.co-label { position: absolute; width: 22%; transform: translateY(-50%); font-size: 0.66rem; line-height: 1.3; color: #1f2440; z-index: 2; }
.co-label.left { left: 3%; text-align: right; padding-right: 6px; }
.co-label.right { right: 3%; text-align: left; padding-left: 6px; }
.co-label b { display: block; font-family: var(--font-head); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7290; }
.pds-thumbs { padding: 0; border: 0; background: transparent; }
.pds-thumbs .thumb { width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 0; background: #fff; }
.pds-thumbs .thumb.is-active { border: 2px solid #1f2440; }
.pds-fig figcaption { font-size: 0.74rem; color: #6b7290; font-style: italic; }

/* numbered sections */
.pds-sections { padding: 22px 32px 26px; display: grid; gap: 22px; align-content: start; }
.pds-sections section { display: grid; gap: 10px; }
.pds-sections h4 { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-head); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #1f2440; padding-bottom: 6px; border-bottom: 1px solid #1f2440; }
.pds-sections h4 i { font-style: normal; font-family: var(--font-mono); font-weight: 600; color: #6b7290; }
.pds-sections p { font-size: 0.92rem; line-height: 1.6; color: #1f2440; }
.pds-sections p + p { margin-top: 4px; }
.pds-muted { color: #6b7290; }
.pds-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 0.9rem; }
.pds-table th { width: 34%; text-align: left; font-weight: 500; color: #4d5472; padding: 7px 12px 7px 0; border-bottom: 1px dotted #c5cadb; background: transparent; font-family: var(--font-body); font-size: 0.86rem; letter-spacing: 0; text-transform: none; vertical-align: top; }
.pds-table td { padding: 7px 0; border-bottom: 1px dotted #c5cadb; color: #1f2440; vertical-align: top; }
.pds-table tr:last-child th, .pds-table tr:last-child td { border-bottom: 0; }
.pds-mark { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.pds-mark + .pds-mark { margin-top: 8px; padding-top: 12px; border-top: 1px dotted #c5cadb; }
.pds-mark .picto { grid-template-columns: auto; grid-template-areas: "box" "code" "std"; justify-items: center; }
.pds-mark .picto-box { width: 48px; height: 48px; border-color: #1f2440; color: #1f2440; }
.pds-mark p { font-size: 0.86rem; align-self: center; }
.pds-levels { border-collapse: collapse; font-size: 0.84rem; width: 100%; max-width: 380px; min-width: 0; }
.pds-levels th { font-family: var(--font-head); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #6b7290; text-align: left; padding: 0 12px 5px 0; border-bottom: 1px solid #1f2440; background: transparent; }
.pds-levels td { padding: 5px 12px 5px 0; border-bottom: 1px dotted #c5cadb; color: #1f2440; }
.pds-levels td.mono { font-weight: 600; }
.pds-levels tr:last-child td { border-bottom: 0; }
.pds-cert { display: grid; gap: 6px; font-size: 0.9rem; }
.pds-cert li { padding-left: 16px; position: relative; }
.pds-cert li::before { content: "—"; position: absolute; left: 0; color: #6b7290; }

.pds-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 16px 32px; border-top: 1px solid #1f2440; }
.pds-foot p { font-size: 0.72rem; color: #6b7290; max-width: 60ch; }
.pds-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.pds-foot .doc-link { color: #283890; }

/* ============================================================
   Data sheet — clean and direct
   ============================================================ */
.sheet .ds { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: clamp(24px, 3vw, 40px); }
@media (max-width: 820px) { .sheet .ds { grid-template-columns: 1fr; } }
.ds-media { display: grid; gap: 8px; align-content: start; }
.ds-img { position: relative; aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--line); }
.ds-img img.main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: opacity 250ms ease; }
.ds-img.in-use img.main { object-fit: cover; padding: 0; }
.ds-img img.main.swapping { opacity: 0; }
.ds-img.ph { display: grid; place-content: center; gap: 4px; text-align: center; background: repeating-linear-gradient(135deg, var(--bg-alt) 0 8px, #fff 8px 16px); }
.ds-thumbs { padding: 0; border: 0; background: transparent; }
.ds-thumbs .thumb { width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 2px; }
.ds-thumbs .thumb.is-active { border: 2px solid var(--navy); }
.ds-body { display: grid; gap: 20px; align-content: start; }
.ds-title { font-family: var(--font-head); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.ds-list { margin: 0; display: grid; }
.ds-list > div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); align-items: baseline; }
.ds-list > div:last-child { border-bottom: 1px solid var(--line); }
.ds-list dt { font-size: 0.86rem; color: var(--text-3); }
.ds-list dd { margin: 0; font-size: 0.95rem; color: var(--text); font-weight: 500; line-height: 1.5; }
.ds-list .mono { font-family: var(--font-mono); font-weight: 600; }
.ds-list .dim { color: var(--text-3); font-weight: 500; font-size: 0.8rem; }
.ds-list .dot { margin-right: 6px; }
@media (max-width: 520px) { .ds-list > div { grid-template-columns: 1fr; gap: 2px; } }
.ds-marks { display: flex; flex-wrap: wrap; gap: 28px; }
.ds-marks .picto { grid-template-columns: auto; grid-template-areas: "box" "code" "std"; justify-items: center; }
.ds-marks .picto-box { width: 46px; height: 46px; }
.ds-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- showcase, refined: two soft panels, air, one button ---------- */
.showcases { gap: 24px; }
.showcase { border: 0; border-radius: 10px; background: #fff; box-shadow: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.showcase:hover { box-shadow: none; }
.showcase.open { border-radius: 10px 10px 0 0; }
.sc-copy { background: #fff; padding: clamp(40px, 5vw, 72px) clamp(32px, 5vw, 72px); gap: 12px; align-content: center; }
.sc-index { font-family: var(--font-mono); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.1em; color: var(--text-3); margin-bottom: 10px; }
.sc-name { font-weight: 300; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.18; letter-spacing: -0.01em; color: var(--text); max-width: 16ch; }
.sc-art { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--font-mono); font-weight: 500; font-size: 0.86rem; color: var(--text-2); letter-spacing: 0.04em; }
.sc-art i { font-style: normal; font-family: var(--font-head); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); padding-left: 12px; border-left: 1px solid var(--line-strong); }
.sc-blurb { color: var(--text-2); font-size: 1rem; margin-top: 10px; max-width: 40ch; }
.sc-facts { color: var(--text-3); font-size: 0.86rem; line-height: 1.7; max-width: 44ch; }
.sc-actions { margin-top: 22px; }
.btn-navy-outline { padding: 13px 26px; font-size: 0.8rem; }

.sc-photo { background: #eef0f6; min-height: 460px; }
.sc-media { min-height: 400px; }
.sc-media img.main { padding: 12% 14%; transition: opacity 250ms ease, transform 600ms ease; }
.showcase:hover .sc-media.cutout img.main { transform: scale(1.03); }
.sc-media.ph { background: transparent; }
.sc-media.ph .ph-mark { color: var(--text-2); }
.sc-media.in-use img.main { transform: none; }
.sc-thumbs { padding: 0 20px 20px; gap: 8px; }
.sc-thumbs .thumb { width: 40px; height: 40px; border: 0; border-radius: 4px; opacity: 0.55; transition: opacity 160ms ease, transform 160ms ease; }
.sc-thumbs .thumb.is-active, .sc-thumbs .thumb:hover { opacity: 1; border: 0; }
.sc-thumbs .thumb.is-active { box-shadow: 0 0 0 2px var(--navy); }
.sheet { margin-top: -24px; }
.sheet .ds { border-radius: 0 0 10px 10px; border-color: var(--line); }
@media (max-width: 820px) { .sc-photo { min-height: 0; } .sc-media { aspect-ratio: 1 / 1; min-height: 0; } .sc-copy { padding: 28px 24px 32px; } }
.sc-media, .sc-media.product-media { background: transparent; }
.sc-media img.main { padding: 10% 12%; }
.sc-facts span { white-space: nowrap; }
.sc-facts .sep { padding: 0 8px; color: var(--line-strong); }

/* ============================================================
   Catalogue grid — compact cards, dialog for detail
   ============================================================ */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 960px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pgrid { grid-template-columns: 1fr; } }
.pcard {
  display: grid; grid-template-rows: auto 1fr auto; text-align: left; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: #fff; color: var(--text); cursor: pointer; font: inherit;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--card-shadow); }
.pcard:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.pc-media { position: relative; display: block; aspect-ratio: 1 / 1; background: #eef0f6; }
.pc-media img { width: 100%; height: 100%; object-fit: contain; padding: 14%; transition: transform 500ms ease; }
.pcard:hover .pc-media.cutout img { transform: scale(1.04); }
.pc-media:not(.cutout) img { padding: 0; object-fit: cover; }
.pc-noimg { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 500; color: var(--text-3); background: repeating-linear-gradient(135deg, #eef0f6 0 8px, #f6f7fb 8px 16px); }
.pc-index { position: absolute; top: 14px; left: 16px; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--text-3); }
.pc-body { display: grid; gap: 6px; padding: 18px 20px 6px; align-content: start; }
.pc-name { font-family: var(--font-head); font-weight: 500; font-size: 1.05rem; line-height: 1.3; text-wrap: balance; }
.pc-art { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 500; font-size: 0.8rem; color: var(--text-2); letter-spacing: 0.04em; }
.pc-art i { font-style: normal; font-family: var(--font-head); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); padding-left: 10px; border-left: 1px solid var(--line-strong); }
.pc-facts { font-size: 0.8rem; color: var(--text-3); line-height: 1.6; }
.pc-facts span { white-space: nowrap; }
.pc-facts .sep { padding: 0 6px; color: var(--line-strong); }
.pc-more { display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px 20px; font-family: var(--font-head); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.pc-more::after { content: "→"; transition: transform 160ms ease; }
.pcard:hover .pc-more::after { transform: translateX(4px); }
.section-alt .pcard { background: #fff; }

/* dialog */
.pdlg { border: 0; padding: 0; width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border-radius: 12px; background: #fff; color: var(--text); box-shadow: 0 40px 90px -30px rgba(10, 18, 60, 0.6); overflow: hidden; }
.pdlg::backdrop { background: rgba(10, 18, 60, 0.55); backdrop-filter: blur(2px); }
.pdlg-body { max-height: calc(100vh - 48px); overflow-y: auto; }
.pdlg-body .showcase { border-radius: 0; margin: 0; }
.pdlg-body .ds { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.pdlg-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--text); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
.pdlg-close svg { width: 18px; height: 18px; }
.pdlg-close:hover { background: var(--navy); color: #fff; }
html.dlg-open { overflow: hidden; }
@media (max-width: 820px) { .pdlg { width: calc(100vw - 16px); max-height: calc(100vh - 16px); } .pdlg-body { max-height: calc(100vh - 16px); } .pdlg-body .sc-photo { order: -1; } }
@media (prefers-reduced-motion: no-preference) { .pdlg[open] { animation: dlg-in 220ms ease-out; } }
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pdlg-body .ds { display: grid; grid-template-columns: 1fr; padding: 28px clamp(24px, 4vw, 56px) 40px; gap: 18px; }
.pdlg-body .ds-media { display: none; }
.pdlg-body .ds-list > div { grid-template-columns: 200px 1fr; }
.pdlg-close:focus:not(:focus-visible) { outline: none; }

/* crop anchors for slots whose aspect differs from the source */
img[src*="hero-lab.jpg"] { object-position: 50% 25%; }
img[src*="band-machining.jpg"] { object-position: 50% 72%; }

/* ============================================================
   Premium polish — applied over the base styles
   ============================================================ */
:root { --max: 1280px; --radius: 12px; --line: #e6e8f0; --line-strong: #cfd3e0; --bg-alt: #f6f7fa; --text-2: #4a5170; --text-3: #7c8299; }
body { font-size: 16.5px; line-height: 1.75; letter-spacing: 0.002em; }
h1, h2, h3 { letter-spacing: -0.015em; }
.h-xl { font-size: clamp(2.3rem, 4.4vw, 3.5rem); font-weight: 300; line-height: 1.08; }
.h-l  { font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 300; line-height: 1.15; }
.h-xl strong, .h-l strong { font-weight: 500; }
.eyebrow { font-size: 0.68rem; letter-spacing: 0.22em; font-weight: 600; color: var(--text-3); }
.section-navy .eyebrow, .banner .eyebrow, .slide-copy .eyebrow, .split-bg .eyebrow { color: var(--yellow); }
.lede { font-size: 1.08rem; line-height: 1.75; color: var(--text-2); }
.rule { width: 40px; height: 2px; background: var(--yellow); border-radius: 0; }
.head { gap: 14px; margin-bottom: clamp(36px, 5vw, 64px); }
.section { padding-block: clamp(72px, 9vw, 128px); }
.section-tight { padding-block: clamp(48px, 6vw, 80px); }
.section-alt { background: var(--bg-alt); }

/* buttons: navy primary, outline secondary, yellow reserved for the hero */
.btn { font-size: 0.78rem; letter-spacing: 0.14em; padding: 15px 30px; border-radius: 4px; border-width: 1px; }
.btn-blue { background: var(--navy); border-color: var(--navy); }
.btn-blue:hover { background: #0e1850; border-color: #0e1850; }
.btn-outline { color: var(--navy); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--navy); background: transparent; }
.btn-navy-outline { border-color: var(--line-strong); }
.btn-navy-outline:hover { border-color: var(--navy); background: transparent; color: var(--navy); }
.btn::after { display: none; }
.link { font-size: 0.76rem; letter-spacing: 0.14em; }

/* header */
.site-header { background: var(--navy); }
.site-header .wrap { min-height: 92px; }
.site-header.compact .wrap { min-height: 70px; }
.brand img { height: 42px; }
.nav a, .nav .nav-btn { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 18px; color: rgba(255,255,255,0.78); }
.nav > li > a::after, .nav > li > .nav-btn::after { left: 18px; right: 18px; height: 1.5px; }
.dropdown { border-radius: 8px; padding: 10px 0; min-width: 280px; }
.dropdown a { padding: 11px 20px; font-size: 0.86rem; letter-spacing: 0; text-transform: none; }

/* hero */
.slide { min-height: clamp(520px, 74vh, 760px); }
.slide::after { background: linear-gradient(90deg, rgba(8, 14, 48, 0.86) 0%, rgba(8, 14, 48, 0.5) 50%, rgba(8, 14, 48, 0.1) 100%); }
.slide-copy { max-width: 660px; gap: 22px; }
.slide-copy h2 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); font-weight: 300; line-height: 1.06; letter-spacing: -0.02em; }
.slide-copy h2 strong { font-weight: 500; }
.slide-copy p { font-size: 1.08rem; color: rgba(255,255,255,0.8); max-width: 50ch; line-height: 1.7; }
.btn-white { border-color: rgba(255,255,255,0.55); }
.dot { width: 44px; height: 2px; border-radius: 0; }
.arrow { width: 46px; height: 46px; border-color: rgba(255,255,255,0.35); background: transparent; }
.js .slide.active img { animation-duration: 14s; }

/* statement */
.statement { align-items: center; gap: clamp(40px, 7vw, 110px); }
.statement img { border-radius: var(--radius); }
.statement-copy .h-l { font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 300; line-height: 1.45; }
.statement-copy .tagline { font-weight: 500; letter-spacing: 0.02em; }

/* range cards / app tiles */
.range-card, .app, .industries a { border-radius: var(--radius); }
.range-card .cap { padding: 140px 24px 26px; background: linear-gradient(180deg, transparent, rgba(8, 14, 48, 0.88)); }
.range-card .cap h3 { font-weight: 500; font-size: 1.3rem; letter-spacing: -0.01em; }
.range-card .cap p { font-size: 0.9rem; line-height: 1.55; }
.app .cap b { font-weight: 500; }
.app .cap span { font-size: 0.7rem; letter-spacing: 0.12em; }

/* quality band + stats */
.split-bg::before { background: linear-gradient(90deg, rgba(20, 34, 110, 0.97) 0%, rgba(20, 34, 110, 0.88) 50%, rgba(20, 34, 110, 0.6) 100%); }
.split-bg .wrap { padding-block: clamp(80px, 10vw, 140px); }
.stat { border-left: 1px solid rgba(255,255,255,0.35); padding-left: 22px; }
.stat b { font-weight: 300; font-size: clamp(2rem, 3.4vw, 2.8rem); letter-spacing: -0.02em; }
.js .stats.in .stat { border-left-color: rgba(255,255,255,0.35); }
.point .ico { background: transparent; border: 1px solid var(--yellow); color: var(--yellow); }
.section-navy .point .ico, .split-bg .point .ico { color: var(--yellow); }
.point h3 { font-weight: 500; }

/* tiles (home featured) */
.tile { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.tile:hover { box-shadow: none; border-color: var(--line-strong); transform: translateY(-3px); }
.tile-media { background: #eef0f6; border-bottom: 0; }
.tile-media img { padding: 12%; }
.tile-body { padding: 18px 20px 22px; }
.tile-num { font-size: 0.86rem; font-weight: 500; color: var(--text-2); }
.tile-name { font-family: var(--font-head); font-weight: 500; font-size: 0.98rem; color: var(--text); }
.tile-key { font-size: 0.8rem; color: var(--text-3); }

/* enquiry */
.enquiry-box { box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(28px, 3vw, 40px); }
.select, .search, .field input, .field select, .field textarea { border-radius: 6px; border-color: var(--line-strong); padding: 13px 14px; }
.select:focus, .search:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(40, 56, 144, 0.12); }
.form { box-shadow: none; border-radius: var(--radius); }

/* catalogue: filters + grid */
.filters { gap: 12px; margin-bottom: 40px; }
.chip { border-radius: 6px; padding: 8px 14px; font-size: 0.86rem; border-color: var(--line); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); }
.range-head { border-bottom: 1px solid var(--line-strong); padding-bottom: 20px; margin-bottom: 28px; }
.pgrid { gap: 24px; }
.pcard { border: 1px solid var(--line); border-radius: var(--radius); }
.pcard:hover { box-shadow: none; border-color: var(--line-strong); }
.pc-body { padding: 20px 22px 4px; }
.pc-more { padding: 12px 22px 22px; }

/* banners */
.banner::before, .banner-tall::before { background: linear-gradient(90deg, rgba(8, 14, 48, 0.9) 0%, rgba(8, 14, 48, 0.62) 55%, rgba(8, 14, 48, 0.3) 100%); }
.banner h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 300; letter-spacing: -0.02em; }
.banner h1 strong { font-weight: 500; }
.banner p { font-size: 1.05rem; }

/* about + quality pages */
.glance { border-top: 2px solid var(--yellow); border-radius: 0 0 var(--radius) var(--radius); }
.zig-media img { border-radius: var(--radius); }
.zig-media figcaption { border-radius: 0 4px 4px 0; font-size: 0.68rem; }
.commitment-tag { font-weight: 300; }
.commitment-tag span:last-child { font-weight: 500; }
.value, .scheme, .range-item { border-radius: var(--radius); box-shadow: none; }
.scheme-mark { border-radius: 4px; }
.step-ico { background: #fff; color: var(--navy); border: 1px solid var(--line-strong); box-shadow: none; }

/* dialog */
.pdlg { border-radius: 16px; }
.pdlg-body .sc-copy { padding: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 56px); }

/* footer */
.site-footer { background: #0e1850; }
.site-footer .wrap { padding-block: 80px 32px; gap: 56px; }
.foot-grid h4 { font-size: 0.66rem; letter-spacing: 0.22em; color: rgba(255,255,255,0.55); margin-bottom: 18px; }
.foot-grid ul { gap: 10px; font-size: 0.92rem; }
.foot-grid a { color: rgba(255,255,255,0.78); }
.foot-brand img { height: 34px; }
.foot-tag { font-weight: 500; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--yellow); }
.foot-brand p:not(.foot-tag) { color: rgba(255,255,255,0.62); font-size: 0.9rem; }
.foot-bottom { font-size: 0.78rem; color: rgba(255,255,255,0.45); border-top-color: rgba(255,255,255,0.1); padding-top: 24px; }
.nav .dropdown a { color: var(--text); font-family: var(--font-head); font-weight: 500; }
.nav .dropdown a:hover { color: var(--blue); background: var(--bg-alt); }
.nav .dropdown a small { color: var(--text-3); margin-top: 2px; }
@media (max-width: 960px) {
  .nav .dropdown a { color: rgba(255,255,255,0.85); }
  .nav .dropdown a:hover { color: #fff; background: transparent; }
  .nav .dropdown a small { color: rgba(255,255,255,0.5); }
}

/* ---------- EN 388 explainer ---------- */
.en-explain { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: clamp(36px, 6vw, 90px); align-items: start; }
@media (max-width: 900px) { .en-explain { grid-template-columns: 1fr; } }
.en-mark {
  position: sticky; top: calc(92px + env(safe-area-inset-top, 0px) + 32px);
  display: grid; justify-items: center; gap: 18px;
  padding: clamp(32px, 4vw, 52px) 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.en-picto { width: 110px; height: 110px; border: 3px solid var(--text); border-radius: 18px; display: grid; place-items: center; color: var(--text); }
.en-picto svg { width: 64px; height: 64px; }
.en-code { display: flex; gap: 6px; }
.en-code b {
  font-family: var(--font-mono); font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1;
  color: var(--line-strong); padding: 6px 4px; border-bottom: 3px solid transparent; transition: color 260ms ease, border-color 260ms ease;
}
.en-code b.on { color: var(--text); border-bottom-color: var(--yellow); }
.en-caption { font-size: 0.78rem; color: var(--text-3); text-align: center; }
.en-steps { display: grid; counter-reset: p; margin: 0; }
.en-steps li { display: grid; grid-template-columns: 52px 1fr; gap: 22px; padding: 22px 0; border-top: 1px solid var(--line); align-items: start; cursor: default; transition: opacity 260ms ease; }
.en-steps li:last-child { border-bottom: 1px solid var(--line); }
.st-n { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-3); padding-top: 4px; transition: color 260ms ease; }
.en-steps h4 { font-family: var(--font-head); font-weight: 500; font-size: 1.08rem; display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.en-steps h4 em { font-style: normal; font-family: var(--font-mono); font-weight: 600; font-size: 1.15rem; color: var(--text-3); padding: 2px 9px; border: 1px solid var(--line-strong); border-radius: 4px; transition: color 260ms ease, border-color 260ms ease, background 260ms ease; }
.en-steps p { color: var(--text-2); font-size: 0.95rem; max-width: 62ch; }
.en-steps p strong { font-weight: 500; color: var(--text); }
.en-steps li.on .st-n { color: var(--navy); }
.en-steps li.on h4 em { color: var(--navy); border-color: var(--navy); background: rgba(40,56,144,0.06); }
@media (hover: hover) { .en-steps li:hover { cursor: pointer; } }

/* ---------- EN 407 / EN ISO 374 cards ---------- */
.std-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 860px) { .std-row { grid-template-columns: 1fr; } }
.std-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 3vw, 36px); display: grid; gap: 20px; align-content: start; }
.std-card header { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.std-card h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.15rem; margin-bottom: 6px; }
.std-card header p { color: var(--text-2); font-size: 0.92rem; }
.std-card .std-picto { width: 56px; height: 56px; border-width: 2px; border-radius: 12px; }
.std-card .std-picto svg { width: 30px; height: 30px; }
.std-code { display: flex; gap: 5px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.std-code b { font-family: var(--font-mono); font-weight: 600; font-size: 1.5rem; line-height: 1; color: var(--line-strong); padding: 4px 6px; border-bottom: 2px solid transparent; }
.std-code b.on { color: var(--text); border-bottom-color: var(--yellow); }
.std-legend { display: grid; gap: 8px; margin: 0; }
.std-legend li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: baseline; font-size: 0.9rem; color: var(--text-3); }
.std-legend li span { font-family: var(--font-mono); font-size: 0.82rem; color: var(--line-strong); }
.std-legend li.on { color: var(--text); }
.std-legend li.on span { color: var(--navy); font-weight: 600; }
.std-articles { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--text-2); }
.std-articles b { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.std-reading { font-size: 0.88rem; color: var(--text-2); line-height: 1.65; padding: 14px 16px; background: var(--bg-alt); border-radius: 8px; }
.std-reading b { font-family: var(--font-head); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.std-reading b:not(:first-child) { font-family: var(--font-body); font-size: inherit; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--text); }
.std-legend li { grid-template-columns: 26px 1fr auto; gap: 14px; }
.std-legend li i { font-style: normal; font-family: var(--font-mono); font-size: 0.8rem; color: var(--line-strong); }
.std-legend li.on i { color: var(--navy); font-weight: 600; }
.std-legend-letters li i { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-3) !important; font-weight: 400 !important; }

/* photo panel: image fills the panel edge-to-edge; thumbnails float over it */
.sc-photo { position: relative; display: block; min-height: 460px; }
.sc-media { position: absolute; inset: 0; min-height: 0; }
.sc-thumbs { position: absolute; right: 16px; bottom: 16px; z-index: 2; padding: 0; gap: 6px; }
.sc-thumbs .thumb { box-shadow: 0 1px 6px rgba(10,18,60,0.25); }
.sc-media @media (max-width: 820px) {
  .sc-photo { position: relative; min-height: 0; aspect-ratio: 4 / 3; }
  .sc-media { position: absolute; inset: 0; aspect-ratio: auto; }
}

/* card text alignment: wrap between facts, align rows across the grid row */
.pc-facts, .sc-facts { overflow-wrap: anywhere; }
.pc-facts .sep, .sc-facts .sep { white-space: normal; }
.pc-name { min-height: 2.6em; }          /* reserve two lines so article + facts line up */
.pc-body { padding: 20px 22px 8px; gap: 8px; }
.pc-art { min-height: 1.2em; }
.pc-facts {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: 2.9em;
}
@supports not (-webkit-line-clamp: 2) { .pc-facts { max-height: 2.9em; } }
.pc-facts .sep, .sc-facts .sep { padding: 0 7px; white-space: nowrap; }
/* anchors clear the sticky header */
[id] { scroll-margin-top: 120px; }
.site-header, .pdlg { scroll-margin-top: 0; }
.range-block { scroll-margin-top: 120px; }

/* specification sheet download */
.ds-actions .dl { gap: 10px; }
.ds-actions .dl svg { width: 17px; height: 17px; flex: none; }
.ds-actions .dl small { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--text-3); }
.ds-actions .dl:hover small { color: inherit; }

/* ---------- dialog: keep the actions in view ---------- */
.pdlg, .pdlg-close { background: var(--bg); }
.pdlg-body .ds { padding-bottom: 0; }
.pdlg-body .ds-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 10px calc(-1 * clamp(24px, 4vw, 56px)) 0;
  padding: 14px clamp(24px, 4vw, 56px) calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 20px -14px rgba(10, 18, 60, 0.25);
}
.ds-actions .dl { white-space: nowrap; }
@media (max-width: 560px) { .ds-actions .btn { flex: 1 1 100%; } }
/* a single standards card spans the row */
.std-row:has(> .std-card:only-child) { grid-template-columns: minmax(0, 1fr); }

/* ---------- floating WhatsApp button ---------- */
.wa-float {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0 4px;
  border-radius: 28px;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 20px -4px rgba(10, 18, 60, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: background 160ms ease, box-shadow 200ms ease, transform 200ms ease;
  overflow: hidden;
}
.wa-float:hover { background: #1fb855; transform: translateY(-2px); box-shadow: 0 10px 26px -6px rgba(10, 18, 60, 0.45); }
.wa-float:active { transform: translateY(0); }
.wa-float:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.wa-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: none; }
.wa-icon svg { width: 27px; height: 27px; }
.wa-label {
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  transition: max-width 260ms ease, opacity 200ms ease, padding 260ms ease;
  padding-right: 0;
}
.wa-float:hover .wa-label,
.wa-float:focus-visible .wa-label { max-width: 160px; opacity: 1; padding-right: 18px; }
@media (hover: none) {            /* touch: icon only, no hover state to reveal the label */
  .wa-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-label { transition: none; }
}

/* application tiles: caption is the work name only */
.app .cap { padding: 44px 18px 16px; }

/* official EN pictograms: the shield is the mark, so no surrounding box */
.picto-box, .std-picto, .en-picto { border: 0 !important; border-radius: 0 !important; }
.picto-box svg, .std-picto svg, .en-picto svg { width: 100%; height: 100%; }
.picto-box { width: 34px; height: 40px; }
.std-card .std-picto { width: 46px; height: 54px; }
.pds-mark .picto-box, .ds-marks .picto-box { width: 40px; height: 47px; }
.en-picto { width: 96px; height: 112px; }
.pi { border: 0; width: 17px; height: 20px; }
.pi svg { width: 100%; height: 100%; }

/* ---------- logo in full colour on a light plate ---------- */
.brand, .foot-brand .brand-plate {
  background: #fff;
  border-radius: 8px;
}
.brand { padding: 9px 14px; }
.brand img { filter: none; height: 34px; }
.site-header.compact .brand img { height: 28px; }
.foot-brand .brand-plate { display: inline-block; padding: 10px 14px; }
.foot-brand img { filter: none; height: 30px; }

/* ---------- production process flow ---------- */
.prodsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 900px) { .prodsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .prodsteps { grid-template-columns: 1fr; } }
.prodsteps li { display: grid; gap: 10px; align-content: start; }
.ps-media { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--bg-sunk); }
.ps-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.prodsteps li:hover .ps-media img { transform: scale(1.04); }
.ps-n { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; color: var(--text-3); }
.prodsteps h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.12rem; margin-top: -4px; }

/* test reports available on request */
.reports { display: grid; gap: 10px; margin-top: 14px; }
.reports li { position: relative; padding-left: 26px; color: rgba(255,255,255,0.88); font-size: 0.97rem; }
.reports li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 14px; height: 14px;
  border-radius: 3px; border: 1.5px solid var(--yellow);
}
.reports li::after {
  content: ""; position: absolute; left: 4px; top: calc(0.42em + 4px); width: 6px; height: 3px;
  border-left: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow); transform: rotate(-45deg);
}

/* ---------- production process flowchart ---------- */
.flowchart { margin: 0 0 46px; display: grid; justify-items: center; }
.fc-band { width: 100%; display: grid; gap: 12px; justify-items: center; }
.fc-tag {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-3);
}
.fc-row { display: flex; justify-content: center; width: 100%; }

.fc-node {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 18px; text-align: center; line-height: 1.35;
  font-family: var(--font-head); font-weight: 500; font-size: 1rem; color: var(--text);
  box-shadow: 0 8px 20px -16px rgba(20, 34, 110, 0.5);
  display: grid; gap: 6px; align-content: center;
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.fc-node small {
  font-family: var(--font-body); font-weight: 400; font-size: 0.82rem;
  color: var(--text-2); line-height: 1.5;
}
.fc-n { font-family: var(--font-mono); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.14em; color: var(--blue); }

.fc-in { max-width: 460px; border-top: 3px solid var(--line-strong); }
.fc-qc { max-width: 680px; background: var(--navy); border-color: var(--navy); color: #fff; }
.fc-qc small { color: rgba(255, 255, 255, 0.78); }
.fc-out { border-top: 3px solid var(--yellow); }
.fc-out b {
  font-family: var(--font-head); font-weight: 300; font-size: 1.85rem;
  letter-spacing: -0.02em; line-height: 1; color: var(--blue);
}

/* the five processing stages, chained left to right */
.fc-chain {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 34px;
}
.fc-chain > li { position: relative; height: 100%; }
.fc-chain > li + li::before {
  content: ""; position: absolute; left: -34px; top: 50%; width: 34px; height: 1px;
  background: var(--line-strong);
}
.fc-chain > li + li::after {
  content: ""; position: absolute; left: -14px; top: 50%; width: 7px; height: 7px;
  border-top: 1.5px solid var(--blue); border-right: 1.5px solid var(--blue);
  transform: translateY(-50%) rotate(45deg);
}

/* vertical connector between bands */
.fc-link { display: block; position: relative; width: 1px; height: 40px; background: var(--line-strong); }
.fc-link::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 7px; height: 7px;
  border-right: 1.5px solid var(--blue); border-bottom: 1.5px solid var(--blue);
  transform: translateX(-50%) rotate(45deg);
}

/* the dispatch branch */
.fc-split {
  width: 100%; max-width: 760px; position: relative; padding-top: 24px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px;
}
.fc-split::before { content: ""; position: absolute; top: 0; left: calc(25% - 6.5px); right: calc(25% - 6.5px); height: 1px; background: var(--line-strong); }
.fc-split > * { position: relative; }
.fc-split > *::before { content: ""; position: absolute; top: -24px; left: 50%; width: 1px; height: 24px; background: var(--line-strong); }

@media (hover: hover) {
  .fc-node:hover { transform: translateY(-3px); box-shadow: var(--card-shadow); }
}

@media (max-width: 880px) {
  .fc-chain { grid-template-columns: 1fr; gap: 30px; justify-items: center; }
  .fc-chain > li { width: 100%; max-width: 420px; }
  .fc-chain > li + li::before { left: 50%; top: -30px; width: 1px; height: 30px; }
  .fc-chain > li + li::after {
    left: 50%; top: auto; bottom: calc(100% + 3px);
    border-top: 0; border-right: 1.5px solid var(--blue); border-bottom: 1.5px solid var(--blue);
    transform: translateX(-50%) rotate(45deg);
  }
  .fc-link { height: 32px; }
}

@media (max-width: 560px) {
  .fc-split { grid-template-columns: 1fr; gap: 30px; padding-top: 0; }
  .fc-split::before { display: none; }
  .fc-split > *::before { display: none; }
  .fc-split > * + *::before { display: block; top: -30px; height: 30px; }
}

/* ---------- cookie notice ---------- */
.cookiebar {
  position: fixed; z-index: 60; left: 0; right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  background: var(--navy); color: #fff;
  box-shadow: 0 -10px 34px -14px rgba(10, 18, 60, 0.6);
}
.cb-inner {
  max-width: var(--max); margin: 0 auto; padding: 16px var(--gutter);
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px;
}
.cb-inner p {
  flex: 1 1 440px; margin: 0;
  font-size: 0.9rem; line-height: 1.6; color: rgba(255, 255, 255, 0.84);
}
.cb-inner a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
.cb-inner a:hover { color: #fff; }
.cb-actions { flex: none; display: flex; gap: 10px; }
.cookiebar .btn { padding: 11px 26px; font-size: 0.78rem; }
.cookiebar .btn-white:hover { background: #fff; color: var(--navy); }

.js .cookiebar { transform: translateY(110%); transition: transform 420ms cubic-bezier(.2, .7, .2, 1); }
.js .cookiebar.cb-in { transform: none; }

/* keep the WhatsApp button clear of the bar while it is on screen */
.has-cookiebar .wa-float { bottom: calc(20px + var(--cb-h, 0px) + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 640px) {
  .cb-inner { padding: 14px var(--gutter) 16px; gap: 12px; }
  .cb-inner p { flex: 1 1 100%; font-size: 0.86rem; }
  .cb-actions { width: 100%; }
  .cookiebar .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .js .cookiebar { transform: none; transition: none; }
}

/* honeypot: off-screen for people, visible to the bots that fill everything in */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note.is-ok { color: #1c7a43; }
.form-note.is-warn { color: #a4442c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form-note.is-ok { color: #6ad49a; }
  :root:not([data-theme="light"]) .form-note.is-warn { color: #ff9b7d; }
}
:root[data-theme="dark"] .form-note.is-ok { color: #6ad49a; }
:root[data-theme="dark"] .form-note.is-warn { color: #ff9b7d; }

/* two-column body copy under a full-width heading */
.twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); align-items: start; }
.twocol p { margin: 0; color: var(--text-2); }
.twocol .lead { color: var(--text); font-size: 1.15rem; line-height: 1.65; }
@media (max-width: 760px) { .twocol { grid-template-columns: 1fr; gap: 20px; } }