:root {
  /* Light, near-white surfaces */
  --bg: oklch(99% 0.002 250);
  --surface: oklch(97% 0.005 250);
  --surface-2: oklch(94.5% 0.007 250);
  --white: oklch(100% 0 0);
  --ink: oklch(23% 0.02 255);

  /* Borders */
  --border: oklch(90% 0.006 250);
  --border-soft: oklch(93% 0.005 250);

  /* Text */
  --text: oklch(28% 0.02 255);
  --text-muted: oklch(45% 0.017 255);
  --text-faint: oklch(49% 0.016 255);

  /* Primary accent — confident mid-blue */
  --blue: oklch(50% 0.11 246);
  --blue-dark: oklch(42% 0.10 246);
  --blue-soft: oklch(95% 0.025 246);
  --blue-soft-text: oklch(40% 0.095 246);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px oklch(30% 0.02 255 / 0.05), 0 1px 1px oklch(30% 0.02 255 / 0.04);
  --shadow: 0 8px 24px oklch(30% 0.03 255 / 0.07), 0 2px 6px oklch(30% 0.03 255 / 0.05);
  --shadow-lg: 0 20px 48px oklch(30% 0.04 255 / 0.10), 0 4px 12px oklch(30% 0.03 255 / 0.06);

  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --z-sticky: 50;
  --z-dropdown: 60;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.45em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.005em; }
p { margin: 0 0 1em; color: var(--text-muted); max-width: 65ch; text-wrap: pretty; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; }
.narrow p { max-width: none; }

.eyebrow {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--blue);
  margin: 0 0 20px;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.8em 1.5em; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-weight: 600; font-size: 0.96rem;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}
.btn-lg { padding: 0.95em 1.8em; font-size: 1rem; }
.btn-primary { background: var(--blue); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-outline { border-color: var(--border); color: var(--ink); background: var(--white); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-ghost { color: var(--text); font-weight: 500; padding: 0.6em 0.9em; }
.btn-ghost:hover { color: var(--blue); }

/* Header */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: oklch(99% 0.002 250 / 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { display: inline-flex; align-items: center; }
.brand-mark img { height: 34px; width: auto; display: block; }
.site-footer .brand-mark img { height: 40px; }
.brand-text { font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--ink); }
.site-nav > ul { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
/* Every top-level link is inline-flex so the ones carrying a caret share a
   baseline with the ones that don't (mixing inline and inline-flex here is
   what threw Home / About Us / Contact Us out of alignment). */
.site-nav > ul > li > a {
  display: inline-flex; align-items: center; gap: 6px; line-height: 1.4;
  font-size: 0.95rem; font-weight: 500; color: var(--text-muted);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.site-nav > ul > li > a:hover,
.site-nav > ul > li > a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--blue); }
.header-cta { display: flex; gap: 10px; align-items: center; }
.header-cta .btn-primary { padding: 0.65em 1.3em; font-size: 0.9rem; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); display: block; border-radius: 2px; }

/* Nav dropdowns — hover-triggered on desktop (mouse or keyboard focus),
   plain expanded sub-lists inside the mobile hamburger menu. */
.nav-dropdown { position: relative; }
.nav-caret {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-dropdown:hover .nav-caret, .nav-dropdown:focus-within .nav-caret { transform: rotate(225deg) translateY(2px); }
/* Invisible bridge across the trigger→menu gap so the menu doesn't close
   while the mouse travels down to it. It lives on the <li> (not inside the
   menu) because the menu is an overflow container and would clip it. */
.nav-dropdown::after {
  content: ""; position: absolute; top: 100%; left: -14px; right: -14px; height: 24px;
}
.nav-dropdown-menu {
  /* Left-aligned to the trigger, not centred on it: a 260px panel under a
     short label drifts noticeably leftward when centred. */
  position: absolute; top: calc(100% + 16px); left: 0; transform: translateY(4px);
  min-width: 260px; max-height: 70vh; overflow-y: auto; padding: 10px;
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  /* Delay on the way out gives a grace period if the cursor clips a corner. */
  transition: opacity 0.2s ease 0.18s, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0.18s, visibility 0.2s linear 0.18s;
  z-index: var(--z-dropdown);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition-delay: 0s;
}
.nav-dropdown-menu a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  font-size: 0.92rem; font-weight: 500; color: var(--text); border-bottom: none;
  text-decoration: none;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible {
  background: var(--surface); color: var(--blue);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.nav-dropdown-viewall { margin-top: 4px; border-top: 1px solid var(--border-soft); padding-top: 12px !important; color: var(--blue) !important; font-weight: 600 !important; }

/* Hero */
/* Bottom pad is half a section gap, so hero -> first section matches the
   section-to-section rhythm exactly (48 + 48 = 96px). */
.hero { position: relative; background: var(--bg); padding: 88px 0 48px; overflow: hidden; }
/* Stripe-style diagonal gradient wave — blue/teal only, confined to the
   top-right corner and faded out toward the copy so it never fights text. */
.hero-wave {
  position: absolute; top: -15%; right: -20%; width: 75%; height: 150%;
  z-index: 0; pointer-events: none; overflow: hidden; transform: rotate(-11deg);
  mask-image: linear-gradient(112deg, transparent 8%, black 38%, black 70%, transparent 92%);
  -webkit-mask-image: linear-gradient(112deg, transparent 8%, black 38%, black 70%, transparent 92%);
}
.hero-wave::before {
  content: ""; position: absolute; inset: -25%;
  background: linear-gradient(120deg,
    oklch(58% 0.16 258) 0%,
    oklch(66% 0.14 240) 16%,
    oklch(75% 0.12 216) 32%,
    oklch(80% 0.11 195) 46%,
    oklch(70% 0.13 200) 58%,
    oklch(56% 0.14 250) 72%,
    oklch(68% 0.13 220) 86%,
    oklch(60% 0.15 262) 100%);
  background-size: 220% 220%;
}
/* The live WebGL gradient paints over the CSS fallback above (see
   js/hero-wave.js). If WebGL is unavailable the canvas never gets .is-live,
   stays transparent, and the static gradient shows through instead. */
.hero-wave-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 0.6s ease;
}
.hero-wave-canvas.is-live { opacity: 1; }
.hero-inner { position: relative; z-index: 1; padding-bottom: 56px; }
.hero h1 { max-width: 820px; }
.hero-sub { color: var(--text-muted); max-width: 600px; font-size: 1.15rem; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* A solid plate floating on the wave: the right half of the strip sits on
   saturated blue, where grey labels had no contrast at all. */
.stats-strip {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 30px 0;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.stat { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.stat-number { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.stat-label { font-size: 0.86rem; color: var(--text-faint); }

.page-hero { position: relative; background: var(--surface); padding: 56px 0 44px; }
.page-hero h1 { max-width: 760px; }
.page-hero .hero-sub { color: var(--text-muted); margin: 0; max-width: 620px; font-size: 1.05rem; }
.breadcrumb { font-size: 0.88rem; color: var(--text-faint); }
.breadcrumb a { color: var(--blue); }
.breadcrumb a:hover { text-decoration: underline; }

/* Use-case pages carry a proof photo above the copy, contained (not
   full-bleed) so it never grows short and wide enough to crop the product
   out of frame. Every industries/<slug>.jpg is pre-cropped to the same
   2.5:1 ratio the img's width/height attrs declare, so width:100% + auto
   height reproduces that exact crop at every viewport with no further
   object-fit cropping. */
.uc-hero-banner { margin: 0 0 28px; border-radius: var(--radius-lg); overflow: hidden; }
.uc-hero-banner img { display: block; width: 100%; height: auto; }
.uc-hero .container { padding-top: 40px; padding-bottom: 44px; }

/* Sections */
/* Half the old value: two adjacent sections now sum to the 96px gap that
   the stats strip -> Industries transition already had. */
.section { padding: clamp(28px, 4vw, 48px) 0; }
.section-alt { background: var(--surface); }
.section-sub { color: var(--text-muted); max-width: 560px; margin-bottom: 8px; font-size: 1.05rem; }
.section-sub-wide { max-width: 760px; }

/* Closing CTA — carries its own vertical space so it reads as an arrival,
   not as one more band. Declared after .section so it wins on padding. */
.section-cta { background: var(--blue-soft); padding: clamp(56px, 7vw, 96px) 0; }
.cta-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.cta-headline { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin: 0; color: var(--ink); line-height: 1.05; }
.cta-accent { color: var(--blue); }
.cta-side p { max-width: 46ch; font-size: 1.05rem; color: var(--blue-soft-text); }

/* Product catalogue */
.catalog { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.catalog-row {
  display: grid;
  grid-template-columns: 84px 1fr 28px;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}
.catalog-row:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--blue-soft); }
.catalog-row:hover .catalog-arrow { transform: translateX(5px); color: var(--blue); }
.catalog-media { width: 84px; height: 62px; border-radius: var(--radius-sm); overflow: hidden; }
.catalog-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.catalog-thumb-placeholder {
  width: 100%; height: 100%; border-radius: var(--radius-sm);
  background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 6px, var(--surface-2) 6px, var(--surface-2) 12px);
}
.catalog-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.catalog-name { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.005em; color: var(--ink); }
.catalog-desc { font-size: 0.92rem; color: var(--text-faint); line-height: 1.5; max-width: 110ch; }
.catalog-arrow { font-size: 1.2rem; color: var(--text-faint); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease; justify-self: end; }

.photo-placeholder {
  background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 10px, var(--surface-2) 10px, var(--surface-2) 20px);
  border-radius: var(--radius-sm); aspect-ratio: 4 / 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--text-faint); text-align: center;
}
.photo-placeholder span { font-weight: 700; color: var(--ink); }
.photo-placeholder small { font-size: 0.72rem; margin-top: 4px; }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gallery-single { grid-template-columns: 1fr; }
.gallery-tile { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-sm); }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; }

/* Accordion — native <details>/<summary>, works with zero JS.
   The `display: grid` below (author CSS) overrides the browser's default
   `display: none` on closed-details children, so the grid-template-rows
   trick can animate open/close purely in CSS. */
.accordion { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }

/* FAQ blocks: the About page's editorial row (heading in a left rail, content
   beside it) instead of a centred column that broke the page's left edge.
   Only containers that actually hold an accordion; the "Made to order" card
   also uses .narrow and stays as it is. */
@media (min-width: 981px) {
  .container.narrow:has(> .accordion) {
    max-width: 1180px;
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
  .container.narrow:has(> .accordion) > h2 {
    grid-column: 1; font-size: clamp(1.6rem, 2.3vw, 2rem); letter-spacing: -0.02em; margin-bottom: 12px;
  }
  .container.narrow:has(> .accordion) > .section-sub {
    grid-column: 1; font-size: 0.98rem; color: var(--text-faint); margin: 0;
  }
  .container.narrow:has(> .accordion) > .accordion {
    grid-column: 2; grid-row: 1 / span 2; margin-top: 0; max-width: 780px;
  }
}
.accordion-item {
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.accordion-item::details-content { display: block; }
.accordion-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; cursor: pointer; list-style: none;
}
.accordion-trigger::-webkit-details-marker { display: none; }
.accordion-trigger::marker { content: ""; }
.accordion-trigger:hover { background: var(--surface); }
.accordion-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.accordion-name { font-weight: 700; font-size: 1.08rem; color: var(--ink); }
.accordion-thumb {
  flex: none; width: 46px; height: 46px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-2);
}
.accordion-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.accordion-thumb-empty {
  background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 6px, var(--surface-2) 6px, var(--surface-2) 12px);
}
.accordion-split { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; }
.accordion-photo {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm); aspect-ratio: 4 / 3; background: var(--surface-2);
}
.accordion-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.accordion-split-body p:last-child { margin-bottom: 14px; }
.accordion-icon {
  flex: none; width: 22px; height: 22px; position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.accordion-icon::before, .accordion-icon::after {
  content: ""; position: absolute; background: var(--blue); border-radius: 2px;
}
.accordion-icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.accordion-icon::after { left: 50%; top: 0; height: 100%; width: 2px; transform: translateX(-50%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.accordion-item[open] .accordion-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.accordion-item[open] .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel-inner { overflow: hidden; min-height: 0; padding: 0 22px 22px; }
.accordion-panel-inner p { margin-bottom: 14px; }
.accordion-panel-inner p a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.accordion-panel-inner p a:hover { color: var(--blue-dark); }
.accordion-meta { display: flex; flex-direction: column; gap: 8px; }
.accordion-meta-label { font-size: 0.8rem; font-weight: 600; color: var(--text-faint); }
.feature-list-compact { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.feature-list-compact li { font-size: 0.92rem; color: var(--text-muted); padding-left: 18px; position: relative; }
.feature-list-compact li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-soft-text); }
.accordion-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--blue); }
.accordion-link:hover { text-decoration: underline; }

/* Pills — one component, used by the industries accordion, the "also searched
   as" rows, capacities and the moulding page. */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.tag-list li { font-size: 0.8rem; font-weight: 600; color: var(--blue-soft-text); background: var(--blue-soft); border-radius: 999px; padding: 5px 12px; }

/* Chips */
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 16px 0 0; }
.chip-list li {
  background: var(--white); border: 1px solid var(--border-soft); padding: 9px 16px; border-radius: 999px;
  font-size: 0.88rem; font-weight: 500; color: var(--text);
}
.chip-list li.chip-top { background: var(--blue-soft); border-color: var(--blue-soft); color: var(--blue-soft-text); font-weight: 600; }

/* Product detail */
.product-detail { display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: start; }
/* The photo rides along while the spec column scrolls, instead of leaving a
   tall empty rail beside it. */
@media (min-width: 901px) {
  .product-detail-media { position: sticky; top: 96px; }
}
/* Sub-heads inside the spec column sit one clear step below the page h1 and
   the section h2s, so the column reads as one datasheet. Still h2 elements. */
.product-detail-info h2 {
  font-size: clamp(1.3rem, 1.9vw, 1.55rem); letter-spacing: -0.01em;
  margin: 1.9em 0 0.6em;
}
.product-detail-info .lead { margin-bottom: 0; }
.lead { font-size: 1.1rem; color: var(--text); max-width: 60ch; }
.feature-list { padding-left: 20px; max-width: 60ch; }
.feature-list li { margin-bottom: 8px; color: var(--text-muted); }
.related-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.related-link {
  display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm);
  font-weight: 700; font-size: 1.05rem; color: var(--ink);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.related-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--blue); }

/* Contact / dossier */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.dossier { background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 8px 28px; box-shadow: var(--shadow-sm); }
.spec-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--border-soft); align-items: baseline; }
.dossier .spec-row:last-of-type { border-bottom: none; }
.spec-label { font-size: 0.82rem; font-weight: 600; color: var(--blue); }
.spec-value { font-weight: 600; font-size: 1.02rem; color: var(--text); overflow-wrap: anywhere; }
a.spec-value:hover { color: var(--blue); }
.spec-map-link { display: block; margin-top: 6px; font-size: 0.86rem; font-weight: 600; color: var(--blue); }
.spec-map-link:hover { text-decoration: underline; }
.dossier .hero-cta { padding: 24px 0 20px; }
.contact-map { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 320px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-soft); }
.contact-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* Footer */
.site-footer { background: var(--surface); color: var(--text-muted); border-top: 1px solid var(--border-soft); }
.site-footer .brand-text, .site-footer h3 { color: var(--ink); }
.site-footer h3 { font-size: 0.85rem; font-weight: 700; margin: 0 0 14px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding: 56px 24px 28px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; font-size: 0.92rem; }
.site-footer a:hover { color: var(--blue); }
/* Same measure as the footer columns above it (container width minus its
   24px gutters), so map, columns and the bottom rule share one edge. */
.footer-map-wrap { position: relative; width: min(1132px, calc(100% - 48px)); margin: 0 auto 32px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-soft); }
.footer-map { width: 100%; height: 200px; border: 0; display: block; filter: grayscale(0.15); }
.footer-map-link {
  position: absolute; right: 14px; bottom: 14px; background: var(--white); color: var(--ink);
  font-size: 0.85rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; box-shadow: var(--shadow);
}
.footer-map-link:hover { color: var(--blue); }
.footer-bottom { padding: 0 24px 22px; font-size: 0.82rem; text-align: center; color: var(--text-faint); }
.footer-bottom p { margin: 0 auto; max-width: none; padding-top: 18px; border-top: 1px solid var(--border-soft); }

/* Scroll reveal (progressive enhancement — see js/main.js) */
[data-reveal].pre-reveal { opacity: 0; transform: translateY(18px); }
[data-reveal].in-view { opacity: 1; transform: translateY(0); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }

/* Hero entrance — pure CSS, no JS dependency; content is visible by default
   even if animations are unsupported or reduced-motion is on. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
  .hero .eyebrow { animation: riseIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero h1 { animation: riseIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
  .hero .hero-sub { animation: riseIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both; }
  .hero .hero-cta { animation: riseIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both; }
}

/* Responsive */
@media (max-width: 900px) {
  .product-detail { grid-template-columns: 1fr; }
  .product-detail-media { max-width: 320px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .related-list { grid-template-columns: 1fr; }
  .cta-split { grid-template-columns: 1fr; text-align: left; }
  .catalog-row { grid-template-columns: 64px 1fr 22px; gap: 14px; padding: 16px; }
  .accordion-split { grid-template-columns: 1fr; gap: 16px; }
  .accordion-photo { max-width: 240px; }
  .catalog-name { font-size: 1.05rem; }
}
/* Navigation collapses to the menu button below 1024px: logo, five links and
   two buttons need roughly 1000px in one row. Between 721px and 1023px the
   full nav wrapped every label onto two lines and squashed the logo mark. */
@media (max-width: 1023px) {
  .brand { flex: none; }
  .site-nav, .header-cta { display: none; }
  .nav-toggle { display: flex; }
  /* The header is a single flex row. When the menu opens, the nav and the CTA
     become row siblings of the brand + toggle and blow past 375px, scrolling
     the page sideways. Let the row wrap and give each its own full-width line. */
  .site-header.open .header-inner { flex-wrap: wrap; }
  .site-header.open .site-nav,
  .site-header.open .header-cta { flex: 0 0 100%; width: 100%; }
  .site-header.open .site-nav { display: block; }
  /* .site-nav > ul's base align-items:center centers items on the cross
     axis — vertical for the desktop row, but the SAME axis becomes
     horizontal once flex-direction flips to column here, which shrink-wraps
     and centers every link and the open dropdown card instead of letting
     them stretch full-width. */
  .site-header.open .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 12px 0; }
  .site-header.open .site-nav a { display: block; padding: 12px 0; }
  .site-header.open .header-cta { display: flex; flex-direction: column; align-items: stretch; padding: 0 0 16px; }
  /* The toggle is last in the markup, so a wrapped row dropped the close
     button below the whole menu. Keep it on the logo's line. */
  .nav-toggle { order: 1; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; margin-right: -10px; }
  .site-nav { order: 2; }
  .header-cta { order: 3; }
  /* A sticky header taller than the screen can never scroll its own bottom
     into view: cap it at the viewport and let the menu scroll inside it. */
  .site-header.open { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); }
  .site-header.open .site-nav > ul > li + li { border-top: 1px solid var(--border-soft); }
  .site-header.open .site-nav > ul > li > a {
    font-size: 1.04rem; font-weight: 600; color: var(--ink); border-bottom: 0; padding: 14px 0;
  }
  .site-header.open .site-nav > ul > li > a[aria-current="page"] { color: var(--blue); }
  .site-header.open .nav-dropdown-menu { margin: 0 0 12px; padding: 4px 14px; background: var(--surface); }
  .site-header.open .nav-dropdown-menu a { padding: 10px 0; font-size: 0.95rem; }
  .site-header.open .header-cta { gap: 10px; padding-top: 8px; }
  .site-header.open .header-cta .btn { padding: 0.85em 1.5em; font-size: 0.98rem; }
  .site-header.open .header-cta .btn-ghost { background: var(--white); border-color: var(--border); color: var(--ink); font-weight: 600; }
  .nav-toggle span { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-dropdown-menu {
    position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    box-shadow: none; border: none; max-height: none; margin: 0 0 8px 14px; padding: 0;
    /* Clear the desktop min-width: at 375px it pushed the open menu to 409px
       and scrolled the whole page sideways. */
    min-width: 0;
  }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown-menu a { padding: 8px 0; }
  .nav-caret { display: none; }
  .nav-dropdown::after { display: none; }
}
/* Below 900px the diagonal wave ran straight under the hero paragraph. Here
   it becomes the ground the stats plate sits on, fading in below the copy,
   so all hero text stays on the plain background. */
@media (max-width: 900px) {
  .hero-wave {
    top: auto; bottom: -6%; right: -15%; width: 130%; height: 50%;
    transform: rotate(-7deg);
    mask-image: linear-gradient(to bottom, transparent 0%, black 46%, black 78%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 46%, black 78%, transparent 100%);
  }
  .hero-inner { padding-bottom: 40px; }
}
@media (max-width: 720px) {
  /* Products and Company are short link lists: side by side they halve the
     footer's height. Brand and contact details keep the full width. */
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding: 44px 24px 24px; }
  .footer-inner > .footer-col:first-child,
  .footer-inner > .footer-col:last-child { grid-column: 1 / -1; }
  .site-footer li { font-size: 0.94rem; }
  /* Same halving as desktop: hero bottom pad matches section pad, so every
     gap on mobile is a consistent 64px. */
  .hero { padding: 56px 0 32px; }
  .section { padding: 32px 0; }
  /* Keep the thumbnail on phones (a buyer scans for the pack shape, not the
     label): photo and name share the top line, the description runs full
     width beneath them. */
  .catalog-row {
    grid-template-columns: 56px minmax(0, 1fr) 20px;
    grid-template-areas: "media name arrow" "desc desc desc";
    column-gap: 14px; row-gap: 10px; padding: 14px 16px;
  }
  .catalog-body { display: contents; }
  .catalog-media { grid-area: media; width: 56px; height: 56px; }
  .catalog-name { grid-area: name; align-self: center; }
  .catalog-desc { grid-area: desc; }
  .catalog-arrow { grid-area: arrow; align-self: center; }
  /* Fixed 120px label + value was tight enough on a 375px phone that a long
     email/address forced the row (and the whole page) to scroll sideways.
     Stack label above value instead of squeezing them onto one line. */
  .spec-row { grid-template-columns: 1fr; gap: 4px; }
}

/* "Also searched as" / "Dispatch and supply" chip blocks.
   Reuses .tag-list and .accordion-meta-label; this only adds spacing. */
.meta-block { margin-top: 24px; }
.meta-block .tag-list { margin-top: 8px; }

/* Footer contact list — labelled rows (Phone / Email / Address). */
.contact-list li { margin-bottom: 14px; }
.contact-label {
  display: block; font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 3px;
}

/* ---------------------------------------------------------------------------
   About page
   One editorial spine. Every section below the hero is the same two-column
   row — a short label in a left rail, the content in a measured column beside
   it — so the page reads as a single document rather than a stack of
   independently-designed blocks. Built on the existing tokens.
--------------------------------------------------------------------------- */

/* -- Hero ------------------------------------------------------------------
   A full-bleed proof photograph first — a wide strip banner running edge to
   edge (not boxed inside .container) — then the claim below it as a single
   headline line, with the four hardest facts sitting in one full-width row
   directly beneath it. A buyer knows what this company is, with evidence,
   before the first scroll. */
.ab-hero { background: var(--surface); border-bottom: 1px solid var(--border); }
/* Full-bleed: a direct child of the (unconstrained) section, not .container,
   so it spans the true viewport width. object-fit crops the source photo's
   taller native ratio down to an actual banner strip instead of rendering
   it near-square at full page width. */
.ab-hero-banner { margin: 0; }
.ab-hero-banner img {
  display: block; width: 100%;
  height: clamp(200px, 30vw, 460px);
  object-fit: cover;
}
.ab-hero-lower {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 44px);
  padding-top: clamp(40px, 5vw, 56px);
  padding-bottom: clamp(40px, 5vw, 56px);
}
.ab-hero-copy .eyebrow { margin-bottom: 14px; }
.ab-hero-copy h1 { margin-bottom: 20px; max-width: none; font-size: clamp(2rem, 3.6vw, 2.75rem); }
/* One headline line once the container is at full width; wraps below that. */
@media (min-width: 1180px) { .ab-hero-copy h1 { white-space: nowrap; } }
/* Content-sized columns spread by space-evenly: the four facts sit as one
   centred group, with equal space between them and out to both edges. */
.ab-hero-facts {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-evenly;
  align-items: start;
  column-gap: 0;
  row-gap: 28px;
}
.ab-hero-fact {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px;
  max-width: 200px;
  min-width: 0;
}
.ab-hero-fact-icon {
  width: 42px; height: 42px; color: var(--blue);
  margin-bottom: 4px;
}
.ab-hero-fact-value {
  font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 700;
  color: var(--ink); letter-spacing: -0.01em; line-height: 1.25;
  white-space: nowrap;
}
.ab-hero-fact-label {
  font-size: 0.82rem; color: var(--text-faint); line-height: 1.35;
}

/* -- The editorial row: the page's repeating unit --------------------------
   Generous separation between chapters, tight grouping inside them. */
.ab-section { padding: clamp(48px, 6vw, 88px) 0; }
.ab-section-alt { background: var(--surface); }
.ab-section + .ab-section:not(.ab-section-alt) { border-top: 1px solid var(--border-soft); }

.ab-row {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
.ab-row-head { position: sticky; top: 108px; }
.ab-row-head h2 {
  font-size: clamp(1.5rem, 2.1vw, 1.95rem);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.ab-row-sub {
  margin: 0;
  font-size: 0.95rem; line-height: 1.55;
  color: var(--text-faint);
  max-width: 34ch;
}
.ab-row-body > :last-child { margin-bottom: 0; }

/* -- The business: prose with one change of pace --------------------------- */
.ab-lede {
  font-size: clamp(1.15rem, 1.7vw, 1.3rem);
  line-height: 1.55;
  color: var(--text);
}
.ab-row-body p { max-width: 64ch; font-size: 1.04rem; }
.ab-pull {
  margin: 36px 0;
  padding: 0;
}
.ab-pull p {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: min(38ch, 100%);
}

/* -- The short version: a datasheet, two columns wide ---------------------- */
.ab-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
  border-top: 1px solid var(--border);
}
.ab-fact {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 4px;
}
.ab-fact dt {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--blue);
}
.ab-fact dd {
  margin: 0; color: var(--text); font-size: 1.02rem; line-height: 1.45;
}

/* -- How an order runs: the page's one deliberate numbered sequence --------
   Same centred icon-and-text unit as the hero facts strip. */
.ab-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 4vw, 44px) clamp(24px, 3vw, 40px);
}
.ab-step {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.ab-step-icon {
  width: 40px; height: 40px; color: var(--blue);
  margin-bottom: 12px;
}
.ab-step-n {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 6px;
}
.ab-step h3 { margin: 0 0 8px; font-size: 1.1rem; text-wrap: balance; }
.ab-step p { margin: 0; font-size: 0.95rem; line-height: 1.5; max-width: 32ch; }

/* -- What we make / who we pack for ---------------------------------------
   Signposts, not a second catalogue. The full product rows live at /products/;
   repeating them here is what made the page feel padded. */
.ab-lines, .ab-inds {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
  border-top: 1px solid var(--border);
}
.ab-lines a, .ab-inds a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
  transition: color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.ab-line-name, .ab-ind-name {
  font-weight: 700; color: var(--ink); font-size: 1.02rem; letter-spacing: -0.01em;
}
.ab-line-note, .ab-ind-packs {
  font-size: 0.86rem; color: var(--text-faint); line-height: 1.4;
}
.ab-lines a:hover .ab-line-name,
.ab-inds a:hover .ab-ind-name { color: var(--blue); }
.ab-inds { margin-bottom: 0; }

/* -- Optional blocks: render only once the owner supplies real content ----- */
.ab-milestones { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ab-milestone {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 24px;
  padding: 22px 0; border-top: 1px solid var(--border-soft); align-items: start;
}
.ab-milestone:first-child { border-top: none; padding-top: 0; }
.ab-milestone-year {
  font-family: var(--font-mono); font-weight: 600;
  color: var(--blue); font-size: 1rem;
}
.ab-milestone h3 { margin: 0 0 4px; }
.ab-milestone p { margin: 0; }

.ab-cap-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.ab-cap { display: flex; flex-direction: column; gap: 4px; }
.ab-cap-v {
  font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800;
  color: var(--ink); letter-spacing: -0.02em; line-height: 1.05;
}
.ab-cap-l { font-size: 0.9rem; color: var(--text-muted); }

.ab-cert-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
  border-top: 1px solid var(--border);
}
.ab-cert { padding: 18px 0; border-bottom: 1px solid var(--border-soft); }
.ab-cert h3 { margin: 0 0 4px; font-size: 1.05rem; }
.ab-cert p { margin: 0; font-size: 0.94rem; }

@media (max-width: 980px) {
  .ab-hero-lower { gap: 32px; }
  .ab-row { grid-template-columns: 1fr; gap: 20px; }
  .ab-row-head { position: static; }
  .ab-row-sub { max-width: 60ch; }
}
@media (max-width: 700px) {
  .ab-hero-facts { grid-template-columns: repeat(2, auto); }
  .ab-steps { grid-template-columns: 1fr; }
  .ab-pull { margin: 28px 0; }
  .ab-milestone { grid-template-columns: 70px 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-lines a, .ab-inds a { transition: none; }
}

/* ---------------------------------------------------------------------------
   Homepage fixes (critique P1–P3)
--------------------------------------------------------------------------- */

/* Hero split layout — currently UNUSED. The markup was reverted to a
   single column because the stock photo was weak. Kept ready for real
   factory photography: re-add the .hero-split wrapper and .hero-figure
   in build_home() and this styles it. */
.hero-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-copy { min-width: 0; }
.hero-figure { margin: 0; min-width: 0; }
.hero-figure img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}

/* Moulding capability blocks — three long-form sections with their own tag
   rows. Distinct from the why-us points, which are one line each. */
.mould-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 32px; }
.mould-block {
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 32px 28px; box-shadow: var(--shadow-sm); transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.mould-block:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.mould-block h2 { font-size: 1.35rem; margin-bottom: 10px; }
.mould-block p { font-size: 0.96rem; margin-bottom: 18px; }
@media (prefers-reduced-motion: reduce) {
  .mould-block { transition: none; }
  .mould-block:hover { transform: none; }
}

/* Why-us: five points, icon + one line each. Not cards — a hairline-topped
   column strip. Top rules (rather than a left-bordered rail) so the row can
   wrap to 3/2/1 columns without a stray divider appearing mid-row. */
.why-points {
  list-style: none; margin: 36px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: clamp(26px, 3vw, 34px) clamp(22px, 2.5vw, 34px);
}
.why-point { padding-top: 18px; border-top: 1px solid var(--border); }
.why-icon {
  width: 26px; height: 26px; color: var(--blue);
  display: block; margin-bottom: 14px;
}
.why-point h3 {
  font-size: 1.02rem; margin: 0 0 6px; letter-spacing: -0.01em;
  text-wrap: balance;
}
.why-point p {
  margin: 0; font-size: 0.92rem; line-height: 1.5;
  color: var(--text-muted); max-width: 30ch;
}

/* P3: footer links reach the 24px minimum target size.
   NOTE: do NOT add .nav-dropdown-menu a here. Those links are display:flex
   one-per-row; forcing inline-block collapses them side by side. They already
   clear 24px via their own 10px/12px padding. */
.site-footer li a { display: inline-block; padding: 3px 0; min-height: 24px; }
.contact-list li a { min-height: 24px; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 28px; }
  .hero-figure { order: -1; }
  .hero-figure img { aspect-ratio: 16 / 10; }
}

/* Product size range */
.size-range { font-size: 1.25rem; color: var(--ink); margin-bottom: 4px; }
.size-range strong { font-weight: 700; letter-spacing: -0.01em; }
.size-note { font-size: 0.94rem; color: var(--text-muted); }

/* Gram-to-neck reference table (preforms only) */
.spec-table { border-collapse: collapse; margin-bottom: 14px; font-size: 0.92rem; width: 100%; max-width: 420px; }
.spec-table th, .spec-table td {
  padding: 8px 20px 8px 0; text-align: left; border-bottom: 1px solid var(--border-soft);
}
.spec-table th { color: var(--text-muted); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.02em; }
.spec-table td { color: var(--ink); }
.spec-table tr:last-child td { border-bottom: none; }

/* ===========================================================================
   CATALOGUE — the use-case axis
   ---------------------------------------------------------------------------
   The product photographs are studio shots on a black ground with a reflection
   under the pack. Tiles therefore paint black and letterbox with `contain`
   rather than cropping with `cover`: the source is already 3:4, so `contain`
   fills the tile exactly, and the odd off-ratio shot gains a black band that
   is invisible against the photograph's own background. Cropping instead would
   cut the neck or the base off a bottle, which is the one part a packaging
   buyer is actually looking at.
   ======================================================================== */

.section-more { margin-top: 28px; }
.section-more a {
  font-weight: 600; color: var(--blue); font-size: 1.02rem;
  border-bottom: 1px solid transparent; transition: border-color .18s ease;
}
.section-more a:hover { border-bottom-color: var(--blue); }

/* --- Use-case cards ------------------------------------------------------ */
.uc-cards {
  display: grid; gap: 18px; margin-top: 26px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.uc-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--border-soft);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.uc-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--blue-soft);
}
.uc-card-media {
  display: block; aspect-ratio: 4/3; background: #000; overflow: hidden;
}
.uc-card-media img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .35s ease;
}
.uc-card:hover .uc-card-media img { transform: scale(1.04); }
/* Homepage-only: stock photography of the fill itself, shot on a light
   studio background, so the letterboxed edges (square photo in a 4:3 box)
   should read as more of that background rather than the catalogue photos'
   black stage. */
.uc-cards-stock .uc-card-media { background: var(--surface); }
/* The stock covers are square; a square frame shows each one whole with no
   grey pillars down the sides and nothing cropped. */
.uc-cards-stock .uc-card-media { aspect-ratio: 1 / 1; }
.uc-card-media-empty { background: var(--surface-2); }
.uc-card-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.uc-card-name {
  display: block; font-weight: 700; font-size: 1.12rem; color: var(--ink);
  line-height: 1.25; letter-spacing: -0.01em;
}
.uc-card-desc {
  display: block; color: var(--text-muted); font-size: 0.95rem;
  line-height: 1.5; margin-top: 6px;
}
.uc-card-packs {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin-top: auto; padding: 14px 0 0;
}
.uc-card-packs li {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--blue-soft-text); background: var(--blue-soft);
  padding: 4px 9px; border-radius: 999px;
}

/* --- Use-case page hero -------------------------------------------------- */
.uc-hero-meta {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 28px; margin: 30px 0 4px; padding-top: 26px;
  border-top: 1px solid var(--border);
}
.uc-matters-label {
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
  margin: 0 0 12px;
}
.uc-matters ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.uc-matters li {
  position: relative; padding-left: 22px; color: var(--text);
  font-size: 0.98rem; line-height: 1.5;
}
.uc-matters li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 9px; height: 2px; border-radius: 1px; background: var(--blue);
}
.uc-type-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.uc-type-chip {
  font-weight: 600; font-size: 0.9rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--border);
  padding: 7px 14px; border-radius: 999px;
  transition: border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.uc-type-chip:hover {
  border-color: var(--blue); color: var(--blue); box-shadow: var(--shadow-sm);
}

.uc-made-to-order {
  background: var(--white); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 30px 32px; box-shadow: var(--shadow-sm);
}
.uc-made-to-order h2 { margin-top: 0; }
.uc-made-to-order p { color: var(--text-muted); }
.uc-made-to-order .btn { margin-top: 8px; }

/* --- A labelled photo group --------------------------------------------- */
.cat-group { margin-top: 34px; scroll-margin-top: 96px; }
.cat-group:first-of-type { margin-top: 26px; }
.cat-group-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.cat-group-titles { min-width: 0; }
.cat-group-name {
  margin: 0; font-size: 1.28rem; color: var(--ink); line-height: 1.2;
}
.cat-group-type {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 0;
}
.cat-chip {
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--blue-soft-text); background: var(--blue-soft);
  padding: 5px 11px; border-radius: 999px;
}
.cat-count {
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-faint);
  letter-spacing: 0.02em;
}
.cat-group-link {
  flex: none; font-weight: 600; font-size: 0.95rem; color: var(--blue);
  border-bottom: 1px solid transparent; transition: border-color .18s ease;
  padding-bottom: 2px;
}
.cat-group-link:hover { border-bottom-color: var(--blue); }

.cat-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.cat-tile {
  display: block; aspect-ratio: 3/4; background: #000;
  border-radius: var(--radius-sm); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cat-tile img { width: 100%; height: 100%; object-fit: contain; }
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cat-tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@media (max-width: 900px) {
  .uc-hero-meta { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 700px) {
  /* Three across on a phone: a buyer is scanning silhouettes, and at two
     across a 60-photo group ran to eleven screens. */
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
  .uc-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
  .cat-group-head { align-items: flex-start; }
  .cat-group-name { font-size: 1.14rem; }
}

/* ---------------------------------------------------------------------------
   Phone layout (<= 600px)
   One column, one left edge, full-width actions, and no card taller than it
   needs to be.
--------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .container, .header-inner { padding-left: 20px; padding-right: 20px; }
  .footer-inner { padding-left: 20px; padding-right: 20px; }
  .footer-bottom { padding-left: 20px; padding-right: 20px; }
  .footer-map-wrap { width: calc(100% - 40px); }

  h1 { font-size: clamp(2rem, 8.4vw, 2.4rem); line-height: 1.08; letter-spacing: -0.015em; }
  h2 { font-size: clamp(1.5rem, 6.4vw, 1.75rem); line-height: 1.15; }
  .hero-sub { font-size: 1.04rem; line-height: 1.6; }
  .section-sub { font-size: 1rem; }

  /* Every paired action (hero, closing CTA, product and contact pages)
     stacks to one full-width column, so the buttons share both edges instead
     of ending at two different widths. */
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .btn { width: 100%; }

  /* Use-case cards become list rows: a square thumbnail beside the text.
     Eight cards drop from roughly four screens of scrolling to one. */
  .uc-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .uc-card { flex-direction: row; align-items: flex-start; gap: 14px; padding: 12px; }
  .uc-card-media, .uc-cards-stock .uc-card-media {
    flex: none; width: 92px; aspect-ratio: 1 / 1; border-radius: var(--radius-sm);
  }
  .uc-card-body { padding: 2px 0 0; min-width: 0; }
  .uc-card-name { font-size: 1.04rem; }
  .uc-card-desc { font-size: 0.9rem; margin-top: 4px; }
  .uc-card-packs { padding-top: 10px; }

  /* Stats: a 2 x 2 plate. */
  .stats-strip { padding: 22px 8px; row-gap: 20px; }
  .stat-label { font-size: 0.84rem; }

  /* Related links: two columns of short names instead of a tall single stack. */
  .related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
  .related-link { padding: 16px; font-size: 0.98rem; line-height: 1.3; }

  /* Why-us: icon beside its heading rather than stacked above it. */
  .why-points { margin-top: 24px; gap: 0; }
  .why-point {
    display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px;
    padding: 18px 0;
  }
  .why-icon { grid-row: 1 / span 2; margin: 0; }
  .why-point p { max-width: none; }

  /* Product pages: the photo spans the column like the text beside it. */
  .product-detail { gap: 28px; }
  .product-detail-media { max-width: none; }

  /* Moulding page blocks: less inner padding so the text measure isn't
     squeezed to 280px on a 390px screen. */
  .mould-block { padding: 24px 20px; }
  .mould-blocks { gap: 16px; margin-top: 24px; }

  .contact-grid { gap: 24px; }
  .dossier { padding: 4px 20px; }
  .contact-map, .contact-map iframe { min-height: 260px; }
  .uc-made-to-order { padding: 24px 20px; }

  /* Tap targets: bare inline links that computed under 24px tall. */
  .breadcrumb a, .section-more a, .spec-map-link, .cat-group-link {
    display: inline-block; padding-top: 4px; padding-bottom: 4px;
  }
}

/* Small Androids (360px): a slightly smaller thumbnail keeps two pack chips
   on one line. */
@media (max-width: 400px) {
  .uc-card-media, .uc-cards-stock .uc-card-media { width: 80px; }
  .uc-card { gap: 12px; }
  .uc-card-packs { gap: 5px; }
  .uc-card-packs li { font-size: 0.72rem; padding: 4px 7px; letter-spacing: 0; }
}

/* About: the order steps read left-aligned on a phone, icon in a gutter,
   instead of five-line centred paragraphs. */
@media (max-width: 700px) {
  .ab-step {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px;
    align-items: start; text-align: left;
  }
  .ab-step > :not(.ab-step-icon) { grid-column: 2; }
  .ab-step-icon { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .ab-step p { max-width: none; }
  .ab-step-n { font-size: 0.8rem; }
}

/* Touch screens have no hover: a tapped card shouldn't stay lifted. */
@media (hover: none) {
  .uc-card:hover, .catalog-row:hover, .related-link:hover, .mould-block:hover,
  .cat-tile:hover, .btn-primary:hover, .btn-outline:hover { transform: none; }
  .uc-card:hover .uc-card-media img { transform: none; }
}