/* Rubbertechno — colors sampled from the original site's Elementor data
   (#0051AB / #2292A4 were the two most-used accent hexes on the homepage).
   Typography: Geomini (headings/eyebrows) + Strichpunkt Sans (body, nav,
   buttons) — loaded once in templates/header.php. Corners are kept tight
   (4-10px) and color washes are flat/monochrome rather than diagonal
   multi-hue gradients, to read as an industrial manufacturer rather than
   a consumer/SaaS brand. */

:root {
  --color-primary: #0051ab;
  --color-primary-dark: #003b7d;
  --color-primary-light: #eaf1fb;
  --color-accent: #2292a4;
  --color-accent-dark: #1b7382;
  --color-ink: #10192a;
  --color-ink-soft: #445064;
  --color-muted: #6b7686;
  --color-border: #e7eaef;
  --color-bg-page: #eef2f7;
  --color-bg-muted: #f6f8fb;
  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 3px rgba(16, 25, 42, 0.08);
  --shadow: 0 12px 28px -10px rgba(16, 25, 42, 0.22);
  --shadow-lg: 0 24px 48px -16px rgba(16, 25, 42, 0.3);
  --container-width: 1440px; /* content width, excluding .container padding */
  /* Height of the sticky site header - anything that pins below it
     (product quick links) or scrolls to an anchor offsets by this. */
  --header-h: 74px;
  --font-heading: "Geomini", "Archivo", sans-serif;
  --font-body: "Strichpunkt Sans", "Inter", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html, body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink-soft);
  line-height: 1.7;
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.2;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-ink);
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.25rem, 4.2vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a {
  color: var(--color-primary);
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.container {
  width: 100%;
  max-width: calc(var(--container-width) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

/* Buttons -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.85em 1.75em;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, transform 0.18s ease;
  font-family: var(--font-body);
}

/* Subtle lift on hover, quick press-down on click - transform/opacity
   only, no layout-affecting properties, per the site's motion rules. */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after { transition: none !important; transform: none !important; }
}

.btn::after {
  content: "→";
  text-transform: none;
  display: inline-block;
  transition: transform 0.18s ease;
}
.btn:hover::after { transform: translateX(4px); }

.btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.btn--primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow); }

.btn--accent {
  background: var(--color-accent);
  color: #fff;
}
.btn--accent:hover { background: var(--color-accent-dark); box-shadow: var(--shadow); }

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

.btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

.btn--outline-accent {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.btn--outline-accent:hover { background: var(--color-accent); color: #fff; }

.btn--small { padding: 0.6em 1.35em; font-size: 0.85rem; }
.btn--block { display: flex; width: 100%; justify-content: center; text-align: center; }

/* Header ----------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  background: var(--color-bg-page);
  border-bottom: 1px solid var(--color-border);
  z-index: 50;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

/* On pages with a dark hero at the top, the header floats transparent and
   blended over it (fading top-to-bottom) instead of sitting on a solid
   bar - until the page is scrolled, when it snaps to the normal solid,
   pinned-in-place header. */
.site-header:has(~ main > .hero),
.site-header:has(~ main > .page-hero) {
  position: fixed;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, rgba(9, 14, 24, 0.65) 0%, rgba(9, 14, 24, 0) 100%);
  border-bottom: none;
}

.site-header:has(~ main > .hero).is-scrolled,
.site-header:has(~ main > .page-hero).is-scrolled {
  background: var(--color-bg-page);
  border-bottom: 1px solid var(--color-border);
}

.site-header:has(~ main > .hero).is-scrolled .site-nav__menu a,
.site-header:has(~ main > .page-hero).is-scrolled .site-nav__menu a {
  color: var(--color-ink-soft);
}
.site-header:has(~ main > .hero).is-scrolled .site-nav__menu a:hover,
.site-header:has(~ main > .page-hero).is-scrolled .site-nav__menu a:hover {
  color: var(--color-primary);
}
.site-header:has(~ main > .hero).is-scrolled .site-nav__menu a.is-active,
.site-header:has(~ main > .page-hero).is-scrolled .site-nav__menu a.is-active {
  color: var(--color-primary);
}

.site-header:has(~ main > .hero).is-scrolled .site-nav__toggle,
.site-header:has(~ main > .page-hero).is-scrolled .site-nav__toggle {
  border-color: var(--color-border);
}
.site-header:has(~ main > .hero).is-scrolled .site-nav__toggle span,
.site-header:has(~ main > .page-hero).is-scrolled .site-nav__toggle span {
  background: var(--color-ink);
}

@media (min-width: 1101px) {
  .site-header:has(~ main > .hero) .site-nav__menu a,
  .site-header:has(~ main > .page-hero) .site-nav__menu a {
    color: rgba(255, 255, 255, 0.92);
  }
  .site-header:has(~ main > .hero) .site-nav__menu a:hover,
  .site-header:has(~ main > .page-hero) .site-nav__menu a:hover {
    color: #fff;
  }
  .site-header:has(~ main > .hero) .site-nav__menu a.is-active,
  .site-header:has(~ main > .page-hero) .site-nav__menu a.is-active {
    color: #fff;
  }
}

.site-header:has(~ main > .hero) .site-nav__toggle,
.site-header:has(~ main > .page-hero) .site-nav__toggle {
  border-color: rgba(255, 255, 255, 0.5);
}
.site-header:has(~ main > .hero) .site-nav__toggle span,
.site-header:has(~ main > .page-hero) .site-nav__toggle span {
  background: #fff;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.site-header__logo img {
  height: 40px;
  width: auto;
}

.site-nav {
  flex: 1;
}

.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-left: auto;
  cursor: pointer;
  transition: border-color 0.25s ease;
}
.site-nav__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 0 8px;
  background: var(--color-ink);
  transition: background 0.25s ease;
}

.site-nav__menu {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.site-nav__menu a {
  position: relative;
  display: block;
  color: var(--color-ink-soft);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 10px 12px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* Animated underline: grows in from the left on hover (transform only,
   not width, so it stays cheap to animate) and stays fully drawn for
   the current page. */
.site-nav__menu a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.site-nav__menu a:hover {
  color: var(--color-primary);
}
.site-nav__menu a:hover::after {
  transform: scaleX(1);
}

.site-nav__menu a.is-active {
  color: var(--color-primary);
}
.site-nav__menu a.is-active::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__menu a::after { transition: none; }
}

.site-nav__cta-mobile {
  display: none;
}

.site-header__cta {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Header email block */

.site-header__phone {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 20px;
  margin-left: 4px;
  border-left: 1px solid var(--color-border);
  flex-shrink: 0;
}
.site-header__phone:hover { text-decoration: none; }

.site-header__phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-accent);
  flex-shrink: 0;
}

.site-header__phone-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.site-header__phone-text small {
  font-size: 0.72rem;
  color: var(--color-muted);
  font-weight: 500;
}
.site-header__phone-text strong {
  font-size: 0.92rem;
  color: var(--color-ink);
  font-weight: 700;
}

/* Transparent-over-hero variant of the phone/email block */
.site-header:has(~ main > .hero) .site-header__phone,
.site-header:has(~ main > .page-hero) .site-header__phone {
  border-left-color: rgba(255, 255, 255, 0.3);
}
.site-header:has(~ main > .hero) .site-header__phone-text small,
.site-header:has(~ main > .page-hero) .site-header__phone-text small {
  color: rgba(255, 255, 255, 0.7);
}
.site-header:has(~ main > .hero) .site-header__phone-text strong,
.site-header:has(~ main > .page-hero) .site-header__phone-text strong {
  color: #fff;
}
.site-header:has(~ main > .hero) .site-header__phone-icon,
.site-header:has(~ main > .page-hero) .site-header__phone-icon {
  background: rgba(255, 255, 255, 0.12);
  color: #8fd3e0;
}

/* Once scrolled (solid header), snap the phone/email block back to normal colors even on hero pages */
.site-header:has(~ main > .hero).is-scrolled .site-header__phone,
.site-header:has(~ main > .page-hero).is-scrolled .site-header__phone { border-left-color: var(--color-border); }
.site-header:has(~ main > .hero).is-scrolled .site-header__phone-text small,
.site-header:has(~ main > .page-hero).is-scrolled .site-header__phone-text small { color: var(--color-muted); }
.site-header:has(~ main > .hero).is-scrolled .site-header__phone-text strong,
.site-header:has(~ main > .page-hero).is-scrolled .site-header__phone-text strong { color: var(--color-ink); }
.site-header:has(~ main > .hero).is-scrolled .site-header__phone-icon,
.site-header:has(~ main > .page-hero).is-scrolled .site-header__phone-icon { background: var(--color-primary-light); color: var(--color-accent); }

@media (max-width: 960px) {
  .site-header__phone-text { display: none; }
  .site-header__phone { padding-left: 12px; border-left: none; }
}

@media (max-width: 720px) {
  .site-header__phone { display: none; }
}

/* Language switcher + Google Translate ------------------------------------ */

/* Google's own widget and top banner are never shown - our switcher drives
   the googtrans cookie instead. Target the stable "skiptranslate" class on
   the banner iframe, not Google's obfuscated class names, and undo the
   `top` offset Google puts on <body> to make room for that banner. */
.google-translate-hidden { display: none !important; }
iframe.skiptranslate { display: none !important; }
body { top: 0 !important; }

/* Google's "original text" hover tooltip (stable id) and the hover
   highlight it paints on the <font> wrappers it puts around translated
   text - the site itself never uses <font>. */
#goog-gt-tt { display: none !important; }
font { background: none !important; box-shadow: none !important; }

/* Google's in-progress spinner (the "G" badge flashed top-left while a
   page translates). Its classes are obfuscated, so match its shape
   instead: a class-only div straight under <body> wrapping one SVG ring. */
body > div:not([id]):has(> div > svg > circle:only-child) { display: none !important; }

/* Dutch and German nav labels ("Neem contact met ons op") are far longer
   than the English ones, so on translated pages the header email drops
   to its icon to keep the nav on one line. */
html.translated-ltr .site-header__phone-text { display: none; }
html.translated-ltr .site-header__phone { padding-left: 12px; border-left: none; }

.lang-switcher {
  position: relative;
  flex-shrink: 0;
}

.lang-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.lang-switcher__toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }

.lang-switcher__chevron { transition: transform 0.2s ease; }
.lang-switcher.is-open .lang-switcher__chevron { transform: rotate(180deg); }

/* The inset outline sits on top of the SVG, so the white NL band and the
   pale Union Jack edges keep a crisp boundary against any header colour. */
.lang-flag {
  display: block;
  width: 18px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 2px;
  outline: 1px solid rgba(16, 25, 42, 0.22);
  outline-offset: -1px;
}

/* Toggle holds all three flags; only the one matching data-lang shows. */
.lang-switcher__flags { display: flex; }
.lang-switcher__flags .lang-flag { display: none; }
.lang-switcher[data-lang="en"] .lang-flag--en,
.lang-switcher[data-lang="nl"] .lang-flag--nl,
.lang-switcher[data-lang="de"] .lang-flag--de { display: block; }
.lang-switcher__menu .lang-flag { display: block; }

.lang-switcher__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1000;
  min-width: 170px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.lang-switcher__menu[hidden] { display: none; }

.lang-switcher__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}
.lang-switcher__option:hover,
.lang-switcher__option:focus-visible { background: var(--color-bg-muted); color: var(--color-ink); outline: none; }
.lang-switcher__option.is-active { background: var(--color-primary-light); color: var(--color-primary); font-weight: 700; }

/* Transparent-over-hero header: light toggle until scrolled */
.site-header:has(~ main > .hero) .site-header__lang .lang-switcher__toggle,
.site-header:has(~ main > .page-hero) .site-header__lang .lang-switcher__toggle {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.site-header:has(~ main > .hero).is-scrolled .site-header__lang .lang-switcher__toggle,
.site-header:has(~ main > .page-hero).is-scrolled .site-header__lang .lang-switcher__toggle {
  border-color: var(--color-border);
  color: var(--color-ink);
}

/* Drawer copy only exists inside the mobile menu */
.site-nav__lang { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lang-switcher__chevron { transition: none; }
}

@media (max-width: 1100px) {
  .site-header__lang { display: none; }
  .site-nav__lang { display: block; padding: 8px 0; }

  /* Full-width variant: the list opens inline, pushing the drawer down,
     rather than floating over the links beneath it. */
  .lang-switcher--drawer .lang-switcher__toggle {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    background: #fff;
    color: var(--color-ink);
  }
  .lang-switcher--drawer .lang-switcher__chevron { margin-left: auto; }
  .lang-switcher--drawer .lang-switcher__menu {
    position: static;
    margin-top: 6px;
    min-width: 0;
    box-shadow: none;
  }
}

/* Hero --------------------------------------------------------- */

.hero {
  position: relative;
  color: #fff;
  padding: 130px 0 110px;
  text-align: left;
  isolation: isolate;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 14, 24, 0.55) 0%, rgba(9, 14, 24, 0.35) 40%, rgba(9, 14, 24, 0) 100%);
  background-size: 10px 10px, 10px 10px, 100% 100%;
  background-position: 0 0, 5px 5px, 0 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "\274B";
  font-size: 1.1rem;
  line-height: 1;
  color: currentColor;
  position: relative;
  top: -1px;
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  line-height: 1.05;
  max-width: 860px;
  margin-bottom: 18px;
}

.hero__subheading {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #8fd3e0;
  max-width: 760px;
  margin-bottom: 28px;
}

.hero p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 2em;
  max-width: 680px;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Stats strip ---------------------------------------------------- */

.stats-strip {
  background: var(--color-ink);
  color: #fff;
}

.stats-strip__grid {
  display: grid;
  /* One equal column per trust point (admin can set 1-5). */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  text-align: center;
}

.stats-strip__item {
  padding: 36px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.stats-strip__item:first-child { border-left: none; }

.stats-strip__number {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.stats-strip__label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}

/* Generic sections ---------------------------------------------- */

.section {
  padding: 100px 0;
}

.section--muted {
  background: var(--color-bg-muted);
}

.section--dark {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.85);
}

.section--flush-bottom {
  padding-bottom: 0;
}
.section--dark h2 { color: #fff; }
.section--dark .eyebrow { color: #8fd3e0; }
.section--dark p { color: rgba(255, 255, 255, 0.7); }

.section__heading {
  max-width: 640px;
  margin: 0 auto 52px;
  text-align: center;
}

.section--about {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.section--split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.split-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 36px;
}

.eyebrow--muted {
  color: var(--color-accent);
}

/* Media split (image + text) layout, reused across pages --------------- */

.media-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.media-split__figure {
  position: relative;
}

.media-split__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.media-split__figure::before {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  z-index: -1;
  border-radius: var(--radius);
  background: var(--color-primary);
}

.media-split--reverse {
  direction: rtl;
}
.media-split--reverse > * {
  direction: ltr;
}

/* "Who We Are" section (homepage) --------------------------------------- */

.who-we-are__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.who-we-are__media {
  position: relative;
  padding: 0 40px 56px 56px;
}

.who-we-are__photo--main {
  position: relative;
}
.who-we-are__photo--main img {
  width: 100%;
  aspect-ratio: 4 / 3.3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.who-we-are__photo--main::before {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  z-index: -1;
  border-radius: var(--radius);
  background: var(--color-primary);
}

.who-we-are__photo--secondary {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  border: 6px solid #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.who-we-are__photo--secondary img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) - 3px);
  display: block;
}

.who-we-are__stat {
  position: absolute;
  left: 0;
  top: 34%;
  background: #fff;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  text-align: center;
  box-shadow: var(--shadow);
}
.who-we-are__stat-number {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2rem;
  color: var(--color-accent);
  line-height: 1;
}
.who-we-are__stat-label {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  font-weight: 600;
  max-width: 8em;
}

.who-we-are__tagline {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 1em;
}

.who-we-are__checklist {
  margin: 1.6em 0;
}

.who-we-are__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.who-we-are__phone {
  display: flex;
  align-items: center;
  gap: 12px;
}
.who-we-are__phone:hover { text-decoration: none; }

.who-we-are__phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-accent);
  flex-shrink: 0;
}

.who-we-are__phone-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.who-we-are__phone-text small { font-size: 0.78rem; color: var(--color-muted); font-weight: 500; }
.who-we-are__phone-text strong { font-size: 1rem; color: var(--color-ink); font-weight: 700; }

@media (max-width: 960px) {
  .who-we-are__grid { grid-template-columns: 1fr; gap: 40px; }
  .who-we-are__media { padding: 0 24px 48px 24px; margin-top: 20px; }
}

@media (max-width: 480px) {
  .who-we-are__stat { position: static; margin-top: 16px; display: inline-block; }
  .who-we-are__media { padding: 0; }
  .who-we-are__photo--secondary { width: 60%; }
}

/* Category grid --------------------------------------------------- */

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.category-card {
  position: relative;
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  isolation: isolate;
  border: 1px solid var(--color-border);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.category-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--color-ink);
}

.category-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(9, 14, 24, 0.95) 0%, rgba(9, 14, 24, 0.5) 55%, rgba(9, 14, 24, 0.15) 100%);
  transition: background 0.2s ease;
}
.category-card:hover::after {
  background: linear-gradient(0deg, rgba(9, 14, 24, 0.97) 0%, rgba(9, 14, 24, 0.65) 55%, rgba(9, 14, 24, 0.25) 100%);
}

.category-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px;
  color: #fff;
}

.category-card__body h3 {
  color: #fff;
  margin-bottom: 6px;
  font-size: 1.05rem;
}

.category-card__body p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

.category-card:hover .category-card__body p {
  max-height: 4em;
  opacity: 1;
}

.category-card__arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  background: rgba(9, 14, 24, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.2s ease;
}
.category-card:hover .category-card__arrow { background: var(--color-accent); }

/* CTA band --------------------------------------------------------- */

.cta-band {
  position: relative;
  color: #fff;
  padding: 64px 0;
  isolation: isolate;
  overflow: hidden;
}

.cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(9, 14, 24, 0.93);
}

.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cta-band h2 { color: #fff; margin-bottom: 6px; }
.cta-band p { margin: 0; color: rgba(255, 255, 255, 0.85); max-width: 560px; }
.cta-band .btn--accent { flex-shrink: 0; background: #fff; color: var(--color-primary-dark); box-shadow: none; }
.cta-band .btn--accent:hover { background: rgba(255,255,255,0.9); }

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

.accordion {
  max-width: 100%;
}

.accordion__item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.accordion__item:has(.accordion__trigger[aria-expanded="true"]) {
  border-color: var(--color-accent);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  border: none;
  padding: 20px 22px;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 600;
  text-align: left;
  color: var(--color-ink);
  cursor: pointer;
}

.accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  transition: background 0.2s ease, transform 0.2s ease;
}

/* A CSS-drawn cross rather than a "+" text glyph - font glyphs are rarely
   centered exactly on their own box, which reads as lopsided once this
   whole element is rotated 45deg into an "x". Two identically-centered
   bars rotate together as one rigid shape, so they stay symmetric. */
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-accent);
  border-radius: 1px;
  transition: background 0.2s ease;
}
.accordion__icon::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.accordion__icon::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  background: var(--color-accent);
  transform: rotate(45deg);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::before,
.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  background: #fff;
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  color: var(--color-muted);
  transition: grid-template-rows 0.3s ease;
}

.accordion__trigger[aria-expanded="true"] + .accordion__panel {
  grid-template-rows: 1fr;
}

.accordion__panel-inner {
  overflow: hidden;
}

.accordion__panel-inner p {
  padding: 0 22px 22px;
  margin: 0;
}

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

/* Stat badges (about strengths, etc.) ------------------------------------ */

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0;
}

.badge-row__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
}

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

/* FAQ accordion (contact page, etc.) ------------------------------------- */

.faq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 28px;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-ink);
  padding: 18px 32px 18px 0;
  position: relative;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }

/* Plus/minus toggle drawn from two identically-positioned bars rather than
   swapping "+"/"-" glyphs, which have different widths/weights and jump
   asymmetrically when toggled. */
.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-accent);
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}
.faq-item summary::after {
  transform: translateY(-50%) rotate(90deg);
}
.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}

.faq-item p {
  margin: 0 0 20px;
  color: var(--color-muted);
}

/* Image banner (global presence, etc.) ----------------------------------- */

.image-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius);
  min-height: 380px;
  display: flex;
  align-items: center;
  color: #fff;
}

.image-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.image-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(9, 14, 24, 0.96) 28%, rgba(9, 14, 24, 0.9) 38%, rgba(9, 14, 24, 0.65) 100%);
}

.image-banner__content {
  padding: 56px;
  max-width: 560px;
}

/* Full-width variant: the banner itself becomes the <section>, edge to
   edge, instead of an inset card inside .container - matches the
   established full-bleed pattern used by .cta-band. Only the content
   inside keeps a .container for readable width/alignment. */
.image-banner--full {
  border-radius: 0;
  min-height: 420px;
}
.image-banner--full .image-banner__content {
  padding: 0;
}
.image-banner__content .eyebrow { color: #8fd3e0; }
.image-banner__content h2 { color: #fff; }
.image-banner__content p { color: rgba(255, 255, 255, 0.82); margin-bottom: 0; }

/* Lead capture -------------------------------------------------------- */
/* Full-width solid-green band (a deliberate, scoped one-off accent for
   this section only - not a second brand accent color elsewhere), split
   into a text side and a contrast card holding the CTA + phone. */

.lead-capture {
  --color-lead-green: #1f7a4d;
  --color-lead-green-dark: #185f3c;
  background: var(--color-lead-green);
  padding: 80px 0;
  color: #fff;
}

.lead-capture__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}

.lead-capture .eyebrow { color: #c9ecd8; }
.lead-capture h2 { color: #fff; margin-bottom: 0.5em; }
.lead-capture p { color: rgba(255, 255, 255, 0.85); margin-bottom: 0; max-width: 46ch; }

.lead-capture__card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.lead-capture__card .btn--accent {
  background: var(--color-lead-green);
}
.lead-capture__card .btn--accent:hover {
  background: var(--color-lead-green-dark);
}

.lead-capture__or {
  display: block;
  margin: 16px 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.lead-capture__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-ink);
}
.lead-capture__phone:hover { color: var(--color-lead-green); text-decoration: none; }

.lead-capture__phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-bg-muted);
  color: var(--color-lead-green);
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .lead-capture__grid { grid-template-columns: 1fr; text-align: center; }
  .lead-capture p { margin-left: auto; margin-right: auto; }
}

/* Value grid (about page) ---------------------------------------------- */

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.value-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 30px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.value-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
  margin-bottom: 18px;
  font-size: 0.85rem;
}

.value-card p { color: var(--color-muted); margin: 0; }

/* Eco badge -------------------------------------------------------------- */

.eco-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  padding: 10px 22px 10px 10px;
  backdrop-filter: blur(6px);
}
.eco-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(143, 211, 224, 0.16);
  color: #8fd3e0;
  flex-shrink: 0;
}
.eco-badge__label { font-weight: 600; color: #fff; font-size: 0.9rem; }

/* Page hero (inner pages) ------------------------------------------------ */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  /* Top padding clears the fixed transparent header - taller now that it
     has a topbar row above the main nav (~108px combined on desktop). */
  padding: 130px 0 76px;
  text-align: center;
}

/* Topbar/phone block hide below 720px (see .site-header rules), so the
   fixed header goes back to just the single nav row there. */
@media (max-width: 720px) {
  .page-hero { padding-top: 90px; }
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(9, 14, 24, 0.94);
}
.page-hero:not(:has(.page-hero__bg)) {
  background: var(--color-ink);
}

.page-hero h1 { color: #fff; }
.page-hero p { max-width: 640px; margin: 0 auto; color: rgba(255, 255, 255, 0.78); }

.page-hero__role { color: rgba(255, 255, 255, 0.85); font-weight: 600; margin-top: -0.5em; }

.quote-mark {
  font-size: 1.35rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: normal;
  max-width: 700px;
  margin: 0 auto 0.6em;
  color: #fff;
}
.quote-mark--small { font-size: 1.05rem; color: var(--color-muted); font-family: var(--font-body); }

/* Team ------------------------------------------------------------------ */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 32px 0;
}

.team-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.team-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.team-card__photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__body { padding: 20px; }
.team-card p { color: var(--color-muted); margin: 0; }

.ceo-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  text-align: left;
  max-width: 780px;
  margin: 0 auto;
}
.ceo-card__photo {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.ceo-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.ceo-card__role { color: var(--color-accent); font-weight: 600; margin: 0; }
.ceo-card .quote-mark { color: var(--color-ink); text-align: left; margin: 0 0 0.6em; }

/* Contact page ------------------------------------------------------------ */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
}

.contact-details__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 24px;
  font-size: 1.05rem;
}
.contact-details__item > span { font-size: 1.3rem; }
.contact-details__item p { margin: 0; }

.contact-details__figure {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
  aspect-ratio: 4 / 3;
}
.contact-details__figure img { width: 100%; height: 100%; object-fit: cover; }

.contact-details__social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.contact-details__social-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-ink);
}
.contact-details__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-muted);
  color: var(--color-accent);
  transition: background 0.15s ease, color 0.15s ease;
}
.contact-details__social a:hover {
  background: var(--color-accent);
  color: #fff;
}

.contact-form,
.quote-form {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-sm);
}

/* Forms ---------------------------------------------------------------- */

label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin: 18px 0 6px;
  color: var(--color-ink);
}

input[type="text"],
input[type="email"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 0.8em 1em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--color-ink);
  background: var(--color-bg-muted);
  transition: border-color 0.15s ease, background 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(34, 146, 164, 0.15);
}

textarea { resize: vertical; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

form hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 28px 0 8px;
}

form .btn { margin-top: 24px; }

.form-errors {
  background: #fdeceb;
  border: 1px solid #f3b7b0;
  color: #a4291d;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}
.form-errors ul { list-style: disc; padding-left: 20px; }

/* Honeypot field: off-screen for humans, still present in the DOM for
   bots that fill in every input regardless of visibility. */
.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}
.checkbox-field input { width: auto; margin-top: 3px; }

.field-hint {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.quote-preselect-note {
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--color-primary-light);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}

/* Quote drawer -------------------------------------------------------- */
/* Header CTA opens the same request-a-quote form in a right-side panel
   instead of navigating away; the standalone /request-a-quote page is
   untouched and still works as the JS-disabled fallback destination. */

.quote-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 25, 42, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 300;
}
.quote-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.quote-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100%);
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-lg);
  z-index: 301;
  overflow-y: auto;
  padding: 32px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.quote-drawer.is-open {
  transform: translateX(0);
}

.quote-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quote-drawer .eyebrow { color: #8fd3e0; }

.quote-drawer__close {
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 4px;
}
.quote-drawer__close:hover { color: #fff; }

.quote-drawer h2 { margin-top: 4px; color: #fff; }
.quote-drawer__intro { color: rgba(255, 255, 255, 0.7); }

.quote-drawer label { color: rgba(255, 255, 255, 0.85); }

.quote-drawer input[type="text"],
.quote-drawer input[type="email"],
.quote-drawer select,
.quote-drawer textarea {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.quote-drawer input[type="text"]::placeholder,
.quote-drawer input[type="email"]::placeholder,
.quote-drawer textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.quote-drawer select option { color: var(--color-ink); }

.quote-drawer input:focus,
.quote-drawer select:focus,
.quote-drawer textarea:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-accent);
}

.quote-drawer hr { border-color: rgba(255, 255, 255, 0.15); }

.quote-drawer .checkbox-field { color: rgba(255, 255, 255, 0.7); }

body.quote-drawer-open { overflow: hidden; }

.contact-map {
  margin-top: 40px;
}
.contact-map iframe {
  width: 100%;
  height: 360px;
  border: 0;
  border-radius: var(--radius);
}

/* Quote page -------------------------------------------------------------- */

.quote-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: start;
}

.quote-benefits {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius);
  padding: 36px;
  position: sticky;
  top: 96px;
}
.quote-benefits h2 { color: #fff; }
.quote-benefits > p { color: rgba(255, 255, 255, 0.7); }

.quote-benefits__item {
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.quote-benefits__item h3 { color: #8fd3e0; margin-bottom: 6px; }
.quote-benefits__item p { color: rgba(255, 255, 255, 0.7); margin: 0; }

.quote-benefits__contact {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.7);
}
.quote-benefits__contact strong { color: #fff; }

/* Products archive ---------------------------------------------------------- */

.products-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}

.products-sidebar {
  background: var(--color-bg-muted);
  border-radius: var(--radius);
  padding: 24px;
  position: sticky;
  top: 96px;
}

.products-search {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.products-search input { margin: 0; background: #fff; }
.products-search button {
  flex-shrink: 0;
  width: 44px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}
.products-search button:hover { background: var(--color-primary-dark); }

.products-sidebar__list a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.products-sidebar__list a:hover,
.products-sidebar__list a.is-active {
  background: var(--color-primary);
  color: #fff;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-content: start;
}

.products-empty {
  grid-column: 1 / -1;
  color: var(--color-muted);
}

.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--color-ink);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.product-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.product-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.product-card:hover .product-card__image img { transform: scale(1.02); }

.product-card__body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card__body h3 {
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.product-card__body p {
  color: var(--color-muted);
  font-size: 0.9rem;
  flex: 1;
}

/* Single product ---------------------------------------------------------- */

/* Gallery + details block. Classic PDP proportions (media a little wider
   than the details rail), adapted to a quote-based catalog - the buy box
   sells an enquiry rather than a checkout. */
/* Tighter than the standard .section rhythm at both ends - the gallery
   block and the description that follows it are one continuous read,
   not two separate page sections. */
.product-top { padding: 40px 0 48px; }

.product-top__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  /* Stretch, not start: the gallery card grows to the height of the
     details column so the two don't end at wildly different points.
     The photo stays centred inside it (object-fit: contain). */
  align-items: stretch;
}

.product-top__media { min-width: 0; display: flex; }
.product-top__details { min-width: 0; }

.product-top__media .product-single__gallery {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-top__media .product-single__image {
  flex: 1;
  aspect-ratio: auto;
  min-height: 380px;
  /* Capped so a long details column can't stretch the frame into a tall
     white box with a small photo marooned in the middle. */
  max-height: 560px;
}

.product-top__details h1 {
  font-size: 1.8rem;
  margin-bottom: 14px;
}

.product-top__rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
}
.product-top__rating strong { color: var(--color-ink); }
.product-top__rating-count { color: var(--color-muted); text-decoration: underline; }
.product-top__rating:hover .product-top__rating-count { color: var(--color-primary); }

.product-top__excerpt {
  font-size: 1.08rem;
  color: var(--color-muted);
  max-width: 54ch;
}

.product-top__highlights {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.product-top__highlights li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.96rem;
  color: var(--color-ink-soft);
}
/* Author rules always beat the UA stylesheet's [hidden] { display: none },
   so the li's own `display: flex` above would otherwise win and the
   attribute would have no visible effect. */
.product-top__highlights li[hidden] {
  display: none;
}

.product-top__highlights svg {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--color-accent);
}

.product-top__highlights-toggle {
  display: inline-block;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
}
.product-top__highlights-toggle:hover { color: var(--color-accent-dark); }

/* Buy box - the enquiry equivalent of a price + add-to-cart block, kept
   to just the price line and the two actions. The supporting detail
   (custom options, samples, contact) lives in More Information and the
   FAQ rather than crowding the CTA. */
.product-buybox {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.product-buybox__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 18px;
}

.product-buybox__price strong {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-ink);
  line-height: 1.2;
}

.product-buybox__price span { color: var(--color-muted); font-size: 0.88rem; }

.product-buybox__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Quick links - a tab strip under the gallery. Plain anchor jumps,
   not real tab panels. Stays on one row; when it overflows, hovering
   near the left/right edge auto-scrolls it (see [data-quicklinks] in
   main.js) instead of wrapping or showing a scrollbar. */
.product-quicklinks {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-border);
}
.product-quicklinks::-webkit-scrollbar { display: none; }

.product-quicklinks a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 22px;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.product-quicklinks a:first-child { padding-left: 0; }
.product-quicklinks a:hover { color: var(--color-primary); }

.product-quicklinks__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 0.78rem;
}

/* Anchored sections clear the sticky header + quick-links bar when
   jumped to from the quick links. */
#description,
#more-information,
#reviews,
.product-panel {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

#description { padding-top: 56px; }
#description:focus,
#more-information:focus,
#reviews:focus { outline: none; }

.product-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.product-section__main { min-width: 0; }
.product-section__main > h2 { margin-bottom: 20px; }
.product-section__full { grid-column: 1 / -1; }

@media (min-width: 961px) {
  /* The aside stretches to its grid row and the card sticks inside it, so
     the card stops at the end of the description row instead of riding
     over the full-width specifications panel below. */
  .product-section__aside { align-self: stretch; }
  .product-section__aside .quote-card { position: sticky; top: calc(var(--header-h) + 80px); }
}

/* Single column at every width: these panels hold variable-length bullet
   lists, so side by side they ended up as two tall narrow columns of
   wrapped text with a ragged bottom edge. Full width keeps each line
   readable and the cards the same shape whatever the content. */
.product-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}

.product-panel {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
}

.product-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: rgba(34, 146, 164, 0.12);
  color: var(--color-accent);
  margin-bottom: 16px;
}

.product-panel h3 { font-size: 1.05rem; margin-bottom: 14px; }
.product-panel .check-list li { font-size: 0.94rem; }

/* Quote card (description rail) ------------------------------------------ */

.quote-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 34px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  box-shadow: var(--shadow);
  color: rgba(255, 255, 255, 0.82);
}

.quote-card::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  z-index: -1;
}

.quote-card__eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fd3e0;
  margin-bottom: 10px;
}

.quote-card h3 { color: #fff; font-size: 1.35rem; margin-bottom: 10px; }
.quote-card p { font-size: 0.95rem; margin-bottom: 22px; }

.quote-card__list {
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.quote-card__list li { position: relative; padding-left: 24px; }

.quote-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-accent);
}

/* More information ------------------------------------------------------- */

.product-info__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
}

.product-info__note {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.product-info__options h3 { font-size: 1.05rem; color: var(--color-primary); margin-bottom: 14px; }
.product-info__cta { grid-column: 1 / -1; justify-self: center; margin-top: 12px; }

/* Reviews ---------------------------------------------------------------- */

.stars { display: inline-flex; align-items: center; gap: 2px; color: #e0a300; }
.stars--sm { gap: 1px; }

.reviews__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
  gap: 48px;
  align-items: start;
}

.reviews__summary {
  padding: 30px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

@media (min-width: 961px) {
  .reviews__summary { position: sticky; top: calc(var(--header-h) + 80px); }
}

.reviews__average {
  display: block;
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-ink);
  margin-bottom: 10px;
}

.reviews__count { margin: 10px 0 0; font-size: 0.9rem; color: var(--color-muted); }

.reviews__bars {
  display: grid;
  gap: 8px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.reviews__bars li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.reviews__bar-label { white-space: nowrap; }

.reviews__bar {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: var(--color-bg-page);
  overflow: hidden;
}

.reviews__bar > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #e0a300;
}

.reviews__bar-count { font-variant-numeric: tabular-nums; }

.reviews__list {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-card {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.review-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.review-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
}

.review-card__who { display: flex; flex-direction: column; min-width: 0; }
.review-card__who strong { color: var(--color-ink); font-family: var(--font-heading); }
.review-card__who small { color: var(--color-muted); font-size: 0.85rem; }

.review-card__date {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.review-card__title { font-size: 1.05rem; margin: 12px 0 8px; }
.review-card__body { margin: 8px 0 0; }

/* There is deliberately no reviews empty state: a product with nothing
   approved hides the section entirely rather than announcing that nobody
   has reviewed it. See products/single.php. */

/* When no approved review carries a rating there is no average, no stars
   and no distribution bars - the summary column collapses to a bare count,
   so give the list the full width instead of a mostly-empty sidebar. */
.reviews__grid--unrated { grid-template-columns: 1fr; }
.reviews__grid--unrated .reviews__summary {
  position: static;
  text-align: center;
}

/* Public review form ----------------------------------------------------- */

.page-hero--compact { padding: 56px 0 48px; }

.container--narrow { max-width: 720px; }

.review-form-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 40px;
}

.review-form-card--centered { text-align: center; }
.review-form-card--centered p { color: var(--color-muted); margin-bottom: 24px; }

.review-status__icon { color: var(--color-accent); margin-bottom: 12px; }
.review-status__icon--muted { color: var(--color-muted); }

.review-form__intro {
  color: var(--color-muted);
  margin: 0 0 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--color-border);
}

.review-form__section-label {
  font-weight: 700;
  margin: 32px 0 4px;
  padding-top: 26px;
  border-top: 1px solid var(--color-border);
}

.review-form__hint {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin: 0 0 18px;
}
.review-form__hint--footer { margin: 18px 0 0; }

.review-form__note {
  color: #a4291d;
  font-size: 0.92rem;
  margin: 16px 0 0;
}

/* Star input. Rendered 5..1 in the markup so that a `~` sibling selector
   can light up the checked star and everything visually before it -
   selecting a rating needs no JavaScript at all. */
.review-rating {
  border: 0;
  padding: 0;
  margin: 0 0 24px;
}

.review-rating legend {
  font-weight: 700;
  padding: 0;
  margin-bottom: 8px;
}

.review-rating__stars {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.review-rating__stars input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.review-rating__stars label {
  color: var(--color-border);
  cursor: pointer;
  padding: 2px;
  line-height: 0;
  transition: color 0.12s ease;
}

.review-rating__stars input:checked ~ label,
.review-rating__stars label:hover,
.review-rating__stars label:hover ~ label {
  color: #e0a300;
}

/* Keyboard focus has to be visible even though the input itself is
   off-screen - otherwise the control is unusable without a mouse. */
.review-rating__stars input:focus-visible + label {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.review-rating__clear {
  display: block;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  font-size: 0.88rem;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 720px) {
  .review-form-card { padding: 26px 22px; }
}

/* Ordering process ------------------------------------------------------- */

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.process-steps__item {
  position: relative;
  padding-top: 26px;
  border-top: 2px solid var(--color-border);
}

.process-steps__item::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 42px;
  height: 2px;
  background: var(--color-accent);
}

.process-steps__number {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.process-steps__item h3 { font-size: 1.02rem; margin-bottom: 8px; }
.process-steps__item p { margin: 0; color: var(--color-muted); font-size: 0.92rem; }

/* FAQ + support ---------------------------------------------------------- */

.product-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.product-explore__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Fixed media frame: every product photo sits in the same box whatever
   its own dimensions, so the gallery doesn't resize as you swap
   thumbnails and short/wide catalog photos don't float in it. Photos
   scale to fit the frame (contain), never crop. */
.product-single__image {
  background: #fff;
  aspect-ratio: 4 / 3;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-single__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-single__description h3 {
  color: var(--color-primary);
  margin-top: 1.4em;
}

.product-single__description ul {
  list-style: disc;
  padding-left: 1.3em;
  margin-bottom: 1em;
}
.product-single__description li { margin-bottom: 6px; }

.product-single__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.product-single__thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--color-border);
  padding: 0;
  cursor: pointer;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-single__thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

.product-single__thumb.is-active,
.product-single__thumb:hover { border-color: var(--color-accent); }

/* Support callout, shown beside the product FAQ - a calmer, light card
   so it doesn't compete with the primary quote CTAs. */
.help-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 36px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.help-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(34, 146, 164, 0.12);
  color: var(--color-accent);
  flex-shrink: 0;
}

.help-card h2 { font-size: 1.3rem; margin-bottom: 0; }
.help-card p { margin: 0; max-width: 42ch; }

.product-single__section h2 {
  font-size: 1.15rem;
  color: var(--color-primary);
  margin-bottom: 14px;
}

.check-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}

.check-list li {
  position: relative;
  padding-left: 26px;
  color: var(--color-ink-soft);
}

.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--color-accent);
}

/* R&D stat highlights (about page) --------------------------------------- */

.rd-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 980px;
  margin: 0 auto 32px;
}

.rd-stats__item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
}

.rd-stats__number {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.rd-stats__label {
  display: block;
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.4;
}

/* R&D panels: description + tag box, stacked with tight separation ------- */

.rd-panels {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
}

.rd-panel {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 28px;
}

.rd-panel__desc h3 {
  font-size: 1.02rem;
  margin-bottom: 6px;
}

.rd-panel__desc p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.92rem;
}

.rd-panel__tagbox {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  padding-left: 28px;
  border-left: 1px solid var(--color-border);
}

.rd-panel__tagbox .badge-row__item {
  font-size: 0.72rem;
  padding: 6px 12px;
}

.rd-reach {
  text-align: center;
  margin: 32px 0 0;
}

.rd-reach p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.92rem;
}

.flag-marquee {
  margin-top: 28px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.flag-marquee--full {
  margin-top: 40px;
  width: 100%;
}

.flag-marquee__track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: flag-marquee-scroll 150s linear infinite;
}

.flag-marquee:hover .flag-marquee__track {
  animation-play-state: paused;
}

.flag-marquee__flag {
  display: inline-flex;
  width: 200px;
  height: 140px;
  overflow: hidden;
  flex-shrink: 0;
}

.flag-marquee__flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

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

@media (prefers-reduced-motion: reduce) {
  .flag-marquee__track { animation: none; }
}

.spec-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Always full width, label:value at 1:3 by default. main.js (fitSpecTable)
   moves the split per product only to avoid line breaks: narrower labels
   when a value needs more room, wider when a label needs it. Without JS
   the plain 1:3 split applies. */
.spec-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.spec-table__key-col { width: 25%; }

/* Measuring pass for fitSpecTable: every cell at its one-line width. */
.spec-table.is-measuring { table-layout: auto; width: max-content; }
.spec-table.is-measuring .spec-table__key-col { width: auto; }
.spec-table.is-measuring th,
.spec-table.is-measuring td { white-space: nowrap; }

.spec-table tr { border-bottom: 1px solid var(--color-border); }
.spec-table tr:last-child { border-bottom: none; }

.spec-table th,
.spec-table td {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.92rem;
  overflow-wrap: anywhere; /* fixed layout: never overflow the cell */
}

.spec-table th {
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-bg-muted);
}

.spec-table td { color: var(--color-ink-soft); }

/* Breadcrumbs -------------------------------------------------------------- */

.breadcrumbs { padding: 18px 0 0; }

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.breadcrumbs li:not(:last-child)::after {
  content: '/';
  margin-left: 6px;
  color: var(--color-border);
}

.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs [aria-current="page"] { color: var(--color-ink); font-weight: 600; }

/* Pagination ---------------------------------------------------------------- */

.products-grid-wrap { display: flex; flex-direction: column; gap: 32px; }

.pagination ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  justify-content: center;
}

.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-ink-soft);
  font-weight: 600;
  font-size: 0.9rem;
}

.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination a.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Legal pages (privacy / terms) --------------------------------------------- */

.legal-content {
  max-width: 760px;
  margin: 0 auto;
}
.legal-content h2 { margin-top: 1.6em; color: var(--color-primary); }
.legal-content p { color: var(--color-ink-soft); margin-bottom: 1em; }

/* Thank you / not found ------------------------------------------------------ */

.thankyou {
  padding: 140px 0;
  text-align: center;
}

.thankyou__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  background: var(--color-ink);
  color: #fff;
  font-size: 1.75rem;
  margin-bottom: 24px;
}

/* Footer ------------------------------------------------------------------- */

.site-footer {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.75);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding: 72px 24px 40px;
}

.site-footer__logo {
  height: 36px;
  /* Required, not optional: the markup carries width="600" height="181" so
     the browser can reserve space before the file loads. Without an explicit
     width:auto here that attribute becomes the used width, gets clamped by
     the global img{max-width:100%}, and the logo is stretched to the column
     width at 36px tall. The header logo has always had width:auto, which is
     why only the footer distorted. */
  width: auto;
  margin-bottom: 16px;
  filter: brightness(0) invert(1);
}

.site-footer__col h3 {
  color: #fff;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}

.site-footer__links li { margin-bottom: 12px; }
.site-footer__links a { color: rgba(255, 255, 255, 0.68); transition: color 0.15s ease; }
.site-footer__links a:hover { color: #fff; }
.site-footer__links--contact li { color: rgba(255, 255, 255, 0.68); }

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px 0;
  text-align: center;
  font-size: 0.85rem;
}

.site-footer__credit {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}
.site-footer__credit a { color: rgba(255, 255, 255, 0.75); font-weight: 600; transition: color 0.15s ease; }
.site-footer__credit a:hover { color: #fff; }

/* Responsive ----------------------------------------------------------------- */

/* Nav collapses to the hamburger menu earlier than the general tablet
   breakpoint below - the full inline nav + phone + CTA genuinely stops
   fitting on one line around ~1050px, not 960px. */
@media (max-width: 1100px) {
  .site-nav__toggle { display: flex; }

  .site-header__cta { display: none; }

  .site-nav__cta-mobile {
    display: block;
    margin-top: 8px;
  }
  .site-nav__cta-mobile a {
    background: var(--color-accent);
    color: #fff;
    text-align: center;
    font-weight: 600;
  }

  .site-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-page);
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    display: none;
    padding: 8px;
  }

  .site-nav__menu.is-open { display: flex; }

  .site-nav__menu li { border-top: 1px solid var(--color-border); }
  .site-nav__menu li:first-child { border-top: none; }
  .site-nav__menu a { padding: 14px 16px; border-bottom: none; white-space: normal; }
  .site-nav__menu a.is-active { background: var(--color-primary-light); border-bottom: none; }
}

@media (max-width: 960px) {
  .category-grid,
  .value-grid,
  .team-grid,
  .products-grid,
  .rd-stats,
  .stats-strip__grid { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }

  .section--split,
  .contact-layout,
  .quote-layout,
  .products-layout,
  .product-top__grid,
  .product-section__grid,
  .product-info__options,
  .reviews__grid,
  .product-faq__grid,
  .media-split,
  .ceo-card { grid-template-columns: 1fr; }

  .product-top__grid { gap: 36px; }
  .product-top { padding: 24px 0 36px; }
  #description { padding-top: 40px; }

  .product-section__grid,
  .reviews__grid,
  .product-faq__grid { gap: 40px; }

  .process-steps { grid-template-columns: repeat(2, 1fr); }

  .media-split { gap: 32px; }
  .media-split--reverse { direction: ltr; }
  .media-split__figure::before { display: none; }

  .ceo-card { text-align: center; }
  .ceo-card__photo { max-width: 220px; margin: 0 auto; }

  .quote-benefits,
  .products-sidebar { position: static; }

  .site-footer__grid { grid-template-columns: 1fr 1fr; }

  .stats-strip__item:nth-child(odd) { border-left: none; }

  .flag-marquee__flag { width: 140px; height: 98px; }
}

@media (max-width: 720px) {
  .category-grid,
  .value-grid,
  .team-grid,
  .products-grid,
  .rd-stats,
  .rd-panel,
  .form-row,
  .process-steps,
  .stats-strip__grid { grid-template-columns: 1fr; }

  .process-steps { gap: 28px; margin-top: 44px; }
  .quote-card { padding: 28px; }
  .review-card { padding: 22px; }
  .reviews__summary { padding: 24px; }

  .product-quicklinks a { padding: 14px 8px; font-size: 0.9rem; }

  .flag-marquee__flag { width: 100px; height: 70px; }

  .rd-panel__tagbox {
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding-left: 0;
    padding-top: 16px;
  }

  .stats-strip__item { border-left: none; border-top: 1px solid rgba(255,255,255,0.1); }
  .stats-strip__item:first-child { border-top: none; }

  .site-footer__grid { grid-template-columns: 1fr; }

  .cta-band__inner { text-align: center; justify-content: center; }

  .image-banner__content { padding: 32px; }

  .section { padding: 64px 0; }
  .hero { padding: 96px 0 72px; }
}

/* Enquiry widget ---------------------------------------------------------
   Floating launcher + scripted chat panel (partials/chat_widget.php,
   assets/js/chat.js). Teal, not the ambiguous orange of the old site.

   Contrast note: white on --color-accent (#2292a4) is 3.67:1, which is
   fine for a large glyph (the 3:1 non-text rule) but FAILS the 4.5:1 body
   text rule. Visitor bubbles therefore sit on --color-accent-dark
   (#1b7382, 5.50:1). Do not "tidy" them back to --color-accent. */

.chat-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1200;
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* A stronger shadow than the site's usual restraint, justified here:
     this element has to read as floating above the page. */
  box-shadow: 0 10px 26px -6px rgba(16, 25, 42, 0.42);
  transition: background 0.18s ease, transform 0.18s ease;
}

.chat-launcher:hover { background: var(--color-accent-dark); }
.chat-launcher:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.chat-launcher.is-loading { opacity: 0.7; cursor: progress; }

/* The two glyphs are stacked and cross-faded rather than display-swapped,
   so the launcher morphs between chat and close instead of blinking. */
.chat-launcher__icon {
  display: flex;
  grid-area: 1 / 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.chat-launcher { display: grid; place-items: center; }

.chat-launcher__icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.chat-launcher.is-open .chat-launcher__icon--open { opacity: 0; transform: rotate(90deg) scale(0.6); }
.chat-launcher.is-open .chat-launcher__icon--close { opacity: 1; transform: none; }

/* Opening animates from the launcher, not from nowhere: transform-origin
   sits in the bottom-right corner the button occupies, so the panel reads
   as growing out of the thing that was clicked.
   `display` cannot be transitioned, so the closed state uses visibility
   instead - which still removes the panel from the tab order and the
   accessibility tree, unlike opacity alone. Only transform and opacity
   are animated, so this never triggers layout. */
.chat-panel {
  position: fixed;
  right: 24px;
  bottom: 94px;
  z-index: 1199;
  width: 380px;
  max-height: min(620px, calc(100vh - 130px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -18px rgba(16, 25, 42, 0.42);

  visibility: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transform-origin: bottom right;
  /* Exit is quicker than enter (~65%) so dismissing feels responsive
     rather than like waiting for the UI to catch up. */
  transition:
    opacity 0.17s ease-in,
    transform 0.17s ease-in,
    visibility 0s linear 0.17s;
}

.chat-panel.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 0.26s ease-out,
    transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

.chat-panel__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-primary);
  color: #fff;
}

.chat-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-dark);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}

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

.chat-panel__who { display: flex; flex-direction: column; min-width: 0; }
.chat-panel__who strong { font-size: 0.95rem; line-height: 1.3; }

.chat-panel__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.82);
}

/* Cosmetic only - there is no presence system behind this, but it is an
   expected and harmless chat-UI convention. */
.chat-panel__status { display: inline-flex; align-items: center; gap: 5px; }
.chat-panel__status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #47d18a;
}

.chat-panel__close {
  margin-left: auto;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  display: flex;
  border-radius: var(--radius-sm);
}
.chat-panel__close:hover { background: rgba(255, 255, 255, 0.14); }
.chat-panel__close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.chat-thread {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 16px;
  background: var(--color-bg-muted);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each bubble rises in as it is appended. Without this the thread jumps
   a line at a time, which is what made the widget feel abrupt even with
   the typing indicator pacing it. transform/opacity only - no layout. */
.chat-bubble {
  display: flex;
  animation: chat-bubble-in 0.22s ease-out both;
}

@keyframes chat-bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.chat-bubble p {
  margin: 0;
  padding: 10px 14px;
  max-width: 82%;
  font-size: 0.92rem;
  line-height: 1.5;
  border-radius: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Left agent / right visitor - the convention every messaging app has
   already taught people. Don't invent a different one. */
.chat-bubble--agent { justify-content: flex-start; }
.chat-bubble--agent p {
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  border-bottom-left-radius: 4px;
}

.chat-bubble--visitor { justify-content: flex-end; }
.chat-bubble--visitor p {
  background: var(--color-accent-dark);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-typing {
  display: inline-flex;
  gap: 4px;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.chat-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-muted);
  animation: chat-blink 1.2s infinite ease-in-out;
}
.chat-typing i:nth-child(2) { animation-delay: 0.18s; }
.chat-typing i:nth-child(3) { animation-delay: 0.36s; }

@keyframes chat-blink {
  0%, 60%, 100% { opacity: 0.28; }
  30%           { opacity: 1; }
}

.chat-input {
  flex: 0 0 auto;
  border-top: 1px solid var(--color-border);
  padding: 12px;
  background: #fff;
}

/* Quick replies on the opening question. Offered as a shortcut, with the
   text field still live underneath - a visitor is never limited to the
   choices on screen. */
.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.chat-chip {
  padding: 7px 12px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--color-accent-dark);
  background: #fff;
  border: 1px solid var(--color-accent-dark);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.chat-chip:hover { background: var(--color-accent-dark); color: #fff; }
.chat-chip:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.chat-input__form { display: flex; align-items: flex-end; gap: 8px; margin: 0; }

.chat-input__field {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.4;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  resize: none;
  max-height: 120px;
}
.chat-input__field:focus { outline: 2px solid var(--color-accent-dark); outline-offset: -1px; border-color: transparent; }

.chat-input__send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius);
  background: var(--color-accent-dark);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-input__send:hover { background: var(--color-accent); }
.chat-input__send:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* The optional phone step needs an unmistakable way past it, or an
   optional question reads as mandatory in a chat UI. */
.chat-input__skip {
  flex: 0 0 auto;
  align-self: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  cursor: pointer;
}
.chat-input__skip:hover { border-color: var(--color-accent-dark); color: var(--color-accent-dark); }

.chat-input__restart {
  display: block;
  width: 100%;
  padding: 11px 14px;
  text-align: center;
  background: none;
  border: 1px solid var(--color-accent-dark);
  border-radius: var(--radius);
  color: var(--color-accent-dark);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.chat-input__restart:hover { background: var(--color-accent-dark); color: #fff; }

/* A 380px floating card does not work on a 375px viewport - go
   full-screen instead, the standard responsive chat pattern. */
@media (max-width: 640px) {
  .chat-panel {
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    width: 100%;
    max-height: none;
    border: none;
    border-radius: 0;
    /* Growing a full-screen sheet out of a corner looks wrong - at this
       size it should rise from the bottom edge, the way every mobile
       sheet does. */
    transform: translateY(100%);
    transform-origin: bottom center;
  }

  .chat-panel.is-open { transform: none; }

  .chat-launcher { right: 16px; bottom: 16px; }
  .chat-launcher.is-open { display: none; }
}

/* Motion is pacing, never information: with reduced motion the panel and
   bubbles appear immediately, and the typing dots stop pulsing. Nothing
   is lost, because the same content is rendered either way. */
@media (prefers-reduced-motion: reduce) {
  .chat-launcher,
  .chat-launcher__icon { transition: none; }

  .chat-typing i { animation: none; opacity: 0.6; }

  .chat-bubble { animation: none; }

  .chat-panel,
  .chat-panel.is-open {
    transition: none;
    transform: none;
  }
}

/* Page transitions ------------------------------------------------------- */

/* Cross-document view transitions. Every page loads this one stylesheet, so
   this single rule opts both the outgoing and the incoming document in -
   both sides are required for a cross-document transition to run.

   This is deliberately NOT a client-side router. The document still loads
   normally, so forms, CSRF tokens, the back button and the chat widget
   behave exactly as before; the only thing that changes is that the browser
   cross-fades the two paints instead of flashing white between them.

   Browsers without support (Firefox at time of writing) simply navigate the
   way they do today - there is no fallback to maintain. */
@view-transition { navigation: auto; }

/* Naming an element takes it out of the full-page cross-fade and gives it
   its own transition group, so it holds still instead of dissolving and
   reappearing with the rest of the page. Both of these are identical on
   every page, so "holding still" is exactly right.

   The footer is deliberately NOT named: it sits at the bottom of pages of
   very different heights, so a named group would try to animate it between
   two far-apart positions. */
.site-header   { view-transition-name: site-header; }
.chat-launcher { view-transition-name: chat-launcher; }

/* Same rhythm as the rest of the site's motion: enter ~260ms ease-out, exit
   at roughly 65% of that, ease-in, so leaving a page feels immediate. */
::view-transition-old(root) {
  animation-duration: 0.17s;
  animation-timing-function: ease-in;
}

::view-transition-new(root) {
  animation-duration: 0.26s;
  animation-timing-function: ease-out;
}

/* Killing the animations is enough to make navigation instant again - the
   pseudo-element form is more widely supported than @view-transition inside
   a media query, so this is the reliable place to honour the preference. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Admin "edit this page" shortcut ---------------------------------------
   Only ever rendered for a signed-in admin (see partials/admin_bar.php).
   Bottom-LEFT deliberately: the enquiry widget owns bottom-right. */

.admin-editbar {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 22px -6px rgba(16, 25, 42, 0.45);
  opacity: 0.85;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.admin-editbar:hover { opacity: 1; background: var(--color-primary); }
.admin-editbar:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; opacity: 1; }

/* It is a convenience for staff, not page content - keep it out of the way
   on small screens where it would sit on top of the content. */
@media (max-width: 640px) {
  .admin-editbar { left: 16px; bottom: 16px; padding: 7px 12px; font-size: 0.8rem; }
  .admin-editbar span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-editbar { transition: none; }
}

/* Share + print bar ------------------------------------------------------ */

.share-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.share-bar__label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.share-bar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 38px keeps these comfortably tappable without dominating the buy box. */
.share-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: #fff;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.share-bar__btn:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #fff;
}

.share-bar__btn:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.share-bar__status {
  font-size: 0.82rem;
  color: var(--color-accent-dark);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .share-bar__btn { transition: none; }
}

/* Print ------------------------------------------------------------------
   A product page printed as-is wastes a page on navigation, the hero and
   the chat launcher. This strips the site chrome and leaves the spec sheet:
   name, image, description, features and specifications. */
@media print {
  .site-header,
  .site-footer,
  .quote-drawer,
  .quote-drawer-backdrop,
  .chat-launcher,
  .chat-panel,
  .admin-editbar,
  .share-bar,
  .product-quicklinks,
  .cta-band,
  .skip-link,
  .breadcrumbs,
  .product-explore__actions,
  .hero__actions,
  .product-buybox__actions { display: none !important; }

  /* Related products and the FAQ are navigation aids, not spec content. */
  .product-faq__aside,
  .process-steps,
  .value-grid,
  /* Sidebar CTA cards are conversion furniture, not spec content. */
  .quote-card,
  .product-section__aside,
  .image-banner,
  .product-explore { display: none !important; }

  body { background: #fff; color: #000; }

  .section { padding: 12px 0 !important; }

  /* Let the browser paginate on real content boundaries. */
  h1, h2, h3 { break-after: avoid-page; }
  table, figure, .product-single__image { break-inside: avoid; }

  /* Backgrounds are dropped by default when printing; make sure anything
     that relied on a dark background is still readable. */
  .section--muted, .product-top { background: #fff !important; }

  .product-single__image img { max-height: 8cm; width: auto; }

  /* A printed link to a page the reader is holding is useless, but the URL
     behind it is not - so print it once, after the product name. */
  h1::after {
    content: attr(data-print-url);
    display: block;
    /* Absolute, not relative: at 0.6em of a 40px heading this rendered as
       a second headline wrapping over two lines. */
    font-size: 11pt;
    font-weight: 400;
    color: #444;
    margin-top: 4pt;
    word-break: break-all;
  }

  a[href]::after { content: ""; }
}