/* =====================================================================
   WIPE hotwire — V3 "Export House"
   Warm paper-grey, serif display, certification-seal signature.
   ===================================================================== */

/* Barlow (SIL OFL) — single family for all text, self-hosted. Static weights. */
@font-face { font-family: 'Barlow'; src: url('../../shared/fonts/Barlow-Light.ttf')    format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../../shared/fonts/Barlow-Regular.ttf')  format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../../shared/fonts/Barlow-Medium.ttf')   format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../../shared/fonts/Barlow-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../../shared/fonts/Barlow-Bold.ttf')     format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../../shared/fonts/Barlow-Italic.ttf')   format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --paper: #F4F4F4;
  --paper-deep: #EAEAEA;
  --white: #FFFFFF;
  --ink: #000000;
  --ink-soft: #2A2A2A;
  --grey: #6B6B6B;
  --grey-deep: #4A4A4A;
  --red: #e30613;
  --red-dark: #b8040f;
  --charcoal: #000000;
  --line: rgba(0, 0, 0, 0.14);
  --line-soft: rgba(0, 0, 0, 0.08);
  --serif: 'Barlow', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Barlow', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  font-optical-sizing: auto;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 580;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  font: 600 13px var(--sans);
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus-visible { top: 12px; }

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 36px;
  padding-right: 36px;
}
.shell--narrow { max-width: 960px; }
.shell--text { max-width: 780px; }

/* ---------------------------------------------------------------------
   Type helpers
   ------------------------------------------------------------------- */

.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font: 640 11.5px/1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey);
}
.kicker::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--red);
  transform: rotate(45deg);
  flex: none;
}
.kicker--center { justify-content: center; }
.kicker--center::after {
  content: "";
  width: 6px; height: 6px;
  background: var(--red);
  transform: rotate(45deg);
  flex: none;
}

.h-display {
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  font-weight: 585;
}
.h-section {
  font-size: clamp(1.8rem, 3.3vw, 2.55rem);
  font-weight: 575;
}
.h-block {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 570;
}

.lead {
  font-size: 1.16rem;
  line-height: 1.78;
  color: var(--ink-soft);
}
.muted { color: var(--grey); }
.m0 { margin: 0; }
.center { text-align: center; }
.measure { max-width: 66ch; }
.measure-center { max-width: 66ch; margin-left: auto; margin-right: auto; }

.section { padding: 4.25rem 0; }
.section--paper { background: var(--paper); }
.section--tight { padding: 3rem 0; }
.section-head { margin-bottom: 2.3rem; }
.section-head--center { text-align: center; }
.section-head--center .kicker { justify-content: center; }
.section-head--center .kicker::after {
  content: "";
  width: 6px; height: 6px;
  background: var(--red);
  transform: rotate(45deg);
  flex: none;
}
.section-head .h-section { max-width: 24ch; }
.section-head--center .h-section { margin-left: auto; margin-right: auto; }
.section-sub {
  margin-top: 16px;
  color: var(--grey);
  max-width: 62ch;
}
.section-head--center .section-sub { margin-left: auto; margin-right: auto; }

[id] { scroll-margin-top: 96px; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 100px;
  font: 620 12.5px/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-dark); }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--ghost-light { background: transparent; border-color: rgba(255,255,255,0.55); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--charcoal); border-color: #fff; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 620 12.5px/1 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.link-arrow::after { content: "\2192"; font-size: 15px; line-height: 1; }
.link-arrow:hover { color: var(--red); border-color: var(--red); }

/* Quick-tab links (Mission page and similar) */
.quick-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.quick-tab {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font: 600 12.5px var(--sans);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.quick-tab:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.quick-tab:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* Leadership — board + management as photo-topped cards, 4 across and LEFT-
   aligned, so a trailing 5th/9th card sits under the first rather than centred.
   Each card shows name + role + a "Know more" pill; the bio lives in a modal
   so every tile stays the same height and every photo the same size. */
.leader-cards { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 26px; }
.leader-card {
  flex: 0 0 calc(20% - 20.8px);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.leader-card-photo { position: relative; aspect-ratio: 2 / 3; background: #fff; overflow: hidden; }
.leader-card-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.leader-card-body { padding: 1.2rem 1.2rem 1.35rem; display: flex; flex-direction: column; align-items: flex-start; }
.leader-card-body h3 { font-size: 1.1rem; line-height: 1.22; margin: 0 0 2px; }
.leader-card-body .leader-role { margin: 4px 0 0; }
.leader-linkedin { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-top: 12px; border-radius: 7px; border: 1px solid var(--line); color: #0A66C2; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.leader-linkedin svg { width: 20px; height: 20px; }
.leader-linkedin:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.leader-linkedin:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.leader-more {
  align-self: flex-start;
  margin-top: 14px;
  font: 600 0.82rem var(--sans);
  letter-spacing: 0.01em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 17px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.leader-more:hover { background: var(--red); color: #fff; border-color: var(--red); }
.leader-more:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media (max-width: 1080px) {
  .leader-card { flex-basis: calc(33.333% - 17.34px); }
}
@media (max-width: 760px) {
  .leader-card { flex-basis: calc(50% - 13px); }
}
@media (max-width: 560px) {
  .leader-cards { gap: 16px; }
  .leader-card { flex-basis: 100%; }
}

/* Leadership "Know more" modal. Flex column so the header stays put and the
   bio scrolls on its own — the full text is always reachable on any viewport
   or bio length. display:flex is scoped to [open] so the closed dialog keeps
   the UA display:none. */
.leader-dialog {
  width: min(560px, 92vw);
  max-height: 85vh;
  padding: 0;
  border: none;
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
.leader-dialog[open] { display: flex; flex-direction: column; }
.leader-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.leader-dialog-x { flex: none; display: flex; justify-content: flex-end; }
.leader-dialog-x button {
  border: none; background: transparent; color: var(--grey);
  font-size: 1.85rem; line-height: 1; padding: 10px 16px 2px; cursor: pointer;
}
.leader-dialog-x button:hover { color: var(--ink); }
.leader-dialog-head { flex: none; display: flex; align-items: center; gap: 1.1rem; padding: 0 1.9rem 1.2rem; border-bottom: 1px solid var(--line); }
.leader-dialog-photo { flex: none; width: 90px; height: 90px; border-radius: 50%; overflow: hidden; background: #ECECEC; }
.leader-dialog-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; }
.leader-dialog-meta h3 { margin: 0 0 5px; font-size: 1.3rem; line-height: 1.2; }
.leader-dialog-bio { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.4rem 1.9rem 2rem; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.75; }
.leader-dialog-bio p { margin: 0 0 1rem; }
.leader-dialog-bio p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .leader-dialog-head { flex-direction: column; text-align: center; padding-top: 0.4rem; }
  .leader-dialog-bio { padding: 1.2rem 1.4rem 1.6rem; }
}

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

.topbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.topbar-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.topbar p { margin: 0; }
.topbar a { color: var(--grey-deep); text-decoration: none; }
.topbar a:hover { color: var(--ink); }
.topbar-note {
  color: var(--grey);
  letter-spacing: 0.04em;
}
.dsep {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--red);
  transform: rotate(45deg) translateY(-1px);
  margin: 0 10px;
}

.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  transition: box-shadow 0.22s ease;
}
/* Elevation once the page is scrolled, so the pinned nav reads as floating. */
.site-head.is-stuck { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10); }
.navbar { border-bottom: 1px solid var(--line); background: var(--white); }
.navbar-in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: var(--ink);
}
.mark { color: var(--ink); flex: none; }
.mark-w { font-family: var(--serif); font-weight: 640; fill: var(--red); }
.mark--light { color: rgba(255,255,255,0.82); }
.brand-logo { height: 44px; width: auto; display: block; }
.footer-brand .brand-logo { height: 38px; }
@media (max-width: 560px) { .brand-logo { height: 38px; } }
.leader-mono { display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; border:1.5px solid var(--red); border-radius:50%; font-family:var(--serif); font-size:1.35rem; color:var(--ink); margin-bottom:16px; }
.leader-role { display:block; font:640 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin:3px 0 12px; }
a.offer-row { text-decoration:none; color:inherit; display:block; transition:background-color .15s ease; }
a.offer-row:hover, a.offer-row:focus-visible { background:rgba(0,0,0,0.035); }
a.offer-row:hover h3, a.offer-row:focus-visible h3 { color:var(--red); }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name {
  font: 620 19px var(--serif);
  letter-spacing: -0.01em;
}
.brand-sub {
  font: 600 8.5px var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font: 570 13.5px var(--sans);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--red); }

/* Contact Us — highlighted as the primary call-to-action in the nav. */
.nav a.nav-cta {
  background: var(--red);
  color: #fff;
  padding: 9px 18px;
  border-radius: 100px;
  border-bottom: 0;
  font-weight: 600;
  transition: background-color 0.15s ease;
}
.nav a.nav-cta:hover { background: var(--red-dark); color: #fff; }
.nav a.nav-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.nav-check, .nav-burger { display: none; }

/* Products dropdown — five primary segments -----------------------------
   Native <details>: hover/focus opens on desktop, tap-accordion on mobile. */
.nav-drop { position: relative; display: inline-flex; align-items: center; }
.nav-drop > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 570 13.5px var(--sans);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
/* Clickable dropdown parent (Resource Centre) — the label navigates, hover still opens the panel */
.nav-drop-link { color: inherit; text-decoration: none; font: inherit; }
.nav-drop-link:hover { color: var(--red); }
.nav-caret {
  width: 6px; height: 6px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}
.nav-drop:hover > summary,
.nav-drop:focus-within > summary,
.nav-drop[open] > summary { color: var(--ink); border-bottom-color: var(--red); }
.nav-drop:hover .nav-caret,
.nav-drop:focus-within .nav-caret,
.nav-drop[open] .nav-caret { transform: translateY(1px) rotate(225deg); }

/* Keep the panel laid out while closed so hover can reveal it (invisible via
   opacity/visibility until hover/focus/open). */
.nav-drop:not([open]) > .drop { display: block; }
.nav-drop > .drop {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 14px;
  min-width: 322px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  box-shadow: 0 22px 40px rgba(23, 24, 26, 0.13);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
  z-index: 90;
}
.nav-drop > .drop::before {           /* transparent hover bridge over the gap */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 16px;
}
.nav-drop:hover > .drop,
.nav-drop:focus-within > .drop,
.nav-drop[open] > .drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.drop-list { list-style: none; margin: 0; padding: 0; }
.drop-list a {
  display: block;
  font: 540 13.5px/1.3 var(--sans);
  color: var(--ink-soft);
  text-decoration: none;
  padding: 10px 12px;
  border-bottom: 0;
  border-radius: 2px;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.drop-list a:hover,
.drop-list a:focus-visible { background: rgba(0, 0, 0, 0.05); color: var(--red); }
.drop-list a:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.drop-all {
  display: block;
  margin-top: 4px;
  padding: 11px 12px 7px;
  font: 640 11px var(--sans);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  border-bottom: 0;
  border-top: 1px solid var(--line);
}
.drop-all:hover,
.drop-all:focus-visible { color: var(--ink); }

/* Products tree — segment branches, each revealing a sub-product flyout on
   hover / keyboard focus (desktop). Degrades to an inline indented list on mobile. */
.drop--tree { min-width: 346px; }
.drop-branch { position: relative; }
.drop-branch-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font: 540 13.5px/1.3 var(--sans); color: var(--ink-soft); text-decoration: none;
  padding: 10px 12px; border-radius: 2px; transition: background-color 0.12s ease, color 0.12s ease;
}
.drop-branch:hover > .drop-branch-link,
.drop-branch:focus-within > .drop-branch-link { background: rgba(0, 0, 0, 0.05); color: var(--red); }
.drop-branch-link:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.drop-branch-caret { flex: none; color: var(--grey); font-size: 18px; line-height: 1; }
.drop-branch:hover > .drop-branch-link .drop-branch-caret,
.drop-branch:focus-within > .drop-branch-link .drop-branch-caret { color: var(--red); }
.drop-sub {
  list-style: none; margin: 0; padding: 8px;
  position: absolute; top: -9px; left: 100%; margin-left: 7px; min-width: 290px;
  background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--red);
  box-shadow: 0 22px 40px rgba(23, 24, 26, 0.13);
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s; z-index: 95;
}
.drop-sub::before { content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 12px; }
.drop-branch:hover > .drop-sub,
.drop-branch:focus-within > .drop-sub {
  opacity: 1; visibility: visible; transform: translateX(0);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.drop-sub a {
  display: block; font: 500 13px/1.35 var(--sans); color: var(--ink-soft);
  text-decoration: none; padding: 9px 12px; border-radius: 2px; transition: background-color 0.12s ease, color 0.12s ease;
}
.drop-sub a:hover, .drop-sub a:focus-visible { background: rgba(0, 0, 0, 0.05); color: var(--red); }
.drop-sub a:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.nav-soon { display: inline-block; margin-left: 6px; font: 700 8.5px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); vertical-align: 1px; white-space: nowrap; }
/* Group headings within a tree flyout (e.g. EV Motor Harness / Other Harness Applications) */
.drop-sub-head { font: 700 10.5px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); padding: 11px 12px 5px; }
.drop-sub li + .drop-sub-head { margin-top: 5px; border-top: 1px solid var(--line-soft); padding-top: 11px; }

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

.hero { position: relative; padding: 0; }
.hero-slider { position: relative; overflow: hidden; }
.hero-track { display: flex; will-change: transform; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.hero-slide { flex: 0 0 100%; min-width: 100%; padding: 4.2rem 0 4.1rem; }
.hero-photo { position: relative; flex: 1; min-height: 320px; border-radius: 4px; overflow: hidden; background: var(--paper); }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-arrow {
  position: absolute; top: calc(50% - 12px); transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.88); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hero-arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.hero-arrow:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.hero-arrow svg { width: 20px; height: 20px; }
.hero-arrow--prev { left: 16px; }
.hero-arrow--next { right: 16px; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 5; display: flex; justify-content: center; gap: 9px; }
.hero-dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.24); cursor: pointer; transition: width 0.2s ease, background-color 0.2s ease; }
.hero-dot.is-on { width: 28px; border-radius: 5px; background: var(--red); }
.hero-dot:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.hero h1, .hero .h-display { max-width: none; margin: 0; }
.hero-intro {
  margin: 26px 0 0;
  color: var(--grey-deep);
  font-size: 1.06rem;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* Company video (right half) — no static image per brand guidelines */
.hero-media { margin: 0; display: flex; }
.hero-video {
  position: relative;
  flex: 1;
  min-height: 320px;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.hero-video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video-play {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  animation: heroPulse 2.6s ease-in-out infinite;
}
.hero-video-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 4px; }
.hero-video-caption {
  position: relative;
  font: 640 12px var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}
@keyframes heroPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-media { display: block; }
  .hero-video { aspect-ratio: 16 / 9; min-height: 0; }
  .hero-photo { aspect-ratio: 16 / 9; min-height: 0; flex: none; }
  .hero-slide { padding: 3.4rem 0 3.8rem; }
  .hero-arrow { display: none; }        /* dots + auto-advance carry mobile */
  .hero-dots { bottom: 12px; }
}

/* Certification ticker (home) — scrolling badge logos, no text. Placeholder
   badges in shared/images/certs/ are swapped for real logo assets later. */
.cert-band { padding: 1.25rem 0; }
.cert-slider { margin-top: 0; }  /* cert logos reuse the "Our Clients" seamless slider */
.cert-ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cert-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: certScroll 34s linear infinite;
}
.cert-ticker:hover .cert-track { animation-play-state: paused; }
.cert-badge { flex: none; margin-right: 36px; }
.cert-badge img { height: 46px; width: auto; display: block; }
/* Rolling sticker with a divider between each logo (home page) */
.cert-track--sep .cert-badge { margin-right: 0; }
.cert-sep { flex: none; width: 1px; height: 42px; background: var(--line); margin: 0 30px; }
@keyframes certScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .cert-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 22px; }
  .cert-badge--dup { display: none; }
  .cert-sep { display: none; }
  .cert-track--sep { column-gap: 30px; }
}

/* Product segments — five-card row (home) */
#segments-h { max-width: none; }
.seg-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
  margin-top: 1.6rem;
}
.seg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.seg-card-media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
  background: var(--paper-deep);
}
.seg-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.seg-card:hover .seg-card-media img { transform: scale(1.05); }
.seg-card-name {
  margin: 16px 0 9px;
  font-size: 1.04rem;
  line-height: 1.22;
}
.seg-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border: 1.5px solid var(--red);
  border-radius: 100px;
  font: 640 11px var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, gap 0.15s ease;
}
.seg-card-cta:hover { background: var(--red); color: #fff; gap: 11px; }
.seg-card-cta:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media (max-width: 900px) {
  .seg-cards { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* Our Clients — auto-scrolling logo slider with arrows */
.clients-slider { display: flex; align-items: center; gap: 10px; margin-top: 2rem; }
.clients-track {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 30px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.clients-track::-webkit-scrollbar { display: none; }
.client-logo { flex: none; }
.client-logo img { height: 46px; width: auto; display: block; }
.client-sep { flex: none; width: 1px; height: 42px; background: var(--line); }
.clients-arrow {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.clients-arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.clients-arrow:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.clients-arrow svg { width: 20px; height: 20px; }
@media (max-width: 560px) {
  .clients-track { gap: 40px; }
  .client-logo img { height: 38px; }
  .clients-arrow { width: 38px; height: 38px; }
}

/* What Our Partners Say — centre-focus auto-play carousel.
   The active card is centred and enlarged; neighbours shrink and dim. The
   track holds three copies of the set (clone | real | clone) so JS can
   translate to centre any card, then snap transition-lessly for a seamless
   infinite loop. Scaling is gated behind .pcar-ready so no-JS shows plain
   cards clipped by the viewport rather than a row of dim ones. */
.pcar { display: flex; align-items: center; gap: 10px; margin-top: 2.25rem; }
.pcar-viewport { position: relative; flex: 1; min-width: 0; overflow: hidden; padding: 36px 0; }
.pcar-track {
  position: relative;
  display: flex;
  align-items: center;
  width: max-content;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.pcar-card {
  flex: 0 0 var(--pcw, 340px);
  margin: 0 13px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  background: #F1F1F1;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.9rem 1.75rem;
  cursor: pointer;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.55s ease, box-shadow 0.45s ease, background-color 0.35s ease;
}
.pcar-ready .pcar-card { transform: scale(0.84); opacity: 0.5; }
.pcar-ready .pcar-card.is-active {
  transform: scale(1.08);
  opacity: 1;
  background: var(--white);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.13);
  cursor: default;
  z-index: 2;
}
.pcar-ready .pcar-card.is-side { transform: scale(0.86); opacity: 0.55; }
.pcar-ready .pcar-card.is-far { transform: scale(0.82); opacity: 0; pointer-events: none; }
/* during a loop-snap, kill transitions so the jump back is invisible */
.pcar-instant .pcar-track, .pcar-instant .pcar-card { transition: none !important; }

.pcar-arrow {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pcar-arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.pcar-arrow:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.pcar-arrow svg { width: 20px; height: 20px; }

/* inner card content (shared across states) */
.tst-head { display: flex; align-items: center; gap: 0.95rem; }
.tst-photo { flex: none; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: #E7E7E7; }
.tst-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tst-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tst-name { font-weight: 700; color: var(--ink); font-size: 1.03rem; line-height: 1.25; }
.tst-role { color: var(--grey); font-size: 0.85rem; line-height: 1.35; }
.tst-quote { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.62; }

@media (max-width: 900px) { .pcar-card { --pcw: 320px; } }
@media (max-width: 640px) {
  .pcar { gap: 4px; }
  .pcar-viewport { padding: 26px 0; }
  .pcar-card { --pcw: 78vw; margin: 0 8px; padding: 1.6rem 1.4rem; }
  .pcar-ready .pcar-card.is-active { transform: scale(1.03); }
  .pcar-ready .pcar-card.is-side { transform: scale(0.9); opacity: 0.45; }
  .pcar-arrow { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .pcar-track, .pcar-card { transition: none !important; }
}

/* Photography — unified warm-desaturated treatment */
.ph {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
}
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.04) sepia(0.12) brightness(0.99);
}
.ph--wide { aspect-ratio: 21 / 9; }
.ph--land { aspect-ratio: 3 / 2; }
.ph--product { aspect-ratio: 4 / 3; border: 1px solid var(--line); background: var(--white); }
.ph--product img { filter: saturate(0.85) contrast(1.02) sepia(0.05); }

.ph-fig {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 2px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--grey);
}
.ph-fig b {
  font: 640 10.5px var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-deep);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Certification passport
   ------------------------------------------------------------------- */

.passport {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 44px 52px;
  margin-top: 3.4rem;
}

.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 58%),
    var(--paper-deep);
  box-shadow:
    inset 0 2px 5px rgba(23, 24, 26, 0.16),
    inset 0 -1px 2px rgba(255, 255, 255, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.8);
  color: var(--grey);
}
.seal-svg { width: 88%; height: 88%; opacity: 0.94; }
.seal--red { color: var(--red); }
.seal--red .seal-svg { transform: rotate(-4deg); }
.seal--stamp { background: none; box-shadow: none; }
.seal--stamp .seal-svg { width: 100%; height: 100%; opacity: 0.88; }

.seal-arc { font-family: var(--sans); font-weight: 640; fill: currentColor; }
.seal-label { font-family: var(--sans); font-weight: 640; fill: currentColor; }
.seal-mid { font-family: var(--serif); font-weight: 620; fill: currentColor; letter-spacing: 0.02em; }

.cert-index {
  max-width: 880px;
  margin: 3.6rem auto 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cert-index summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 8px;
  font: 620 12px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-deep);
}
.cert-index summary::-webkit-details-marker { display: none; }
.cert-index summary::after { content: "+"; font-size: 16px; color: var(--red); }
.cert-index[open] summary::after { content: "\2212"; }
.cert-index summary:hover { color: var(--ink); }
.cert-index dl {
  margin: 0;
  padding: 10px 8px 30px;
  text-align: left;
}
.cert-index dt {
  font: 640 13.5px var(--sans);
  margin-top: 20px;
}
.cert-index dd {
  margin: 5px 0 0;
  font-size: 13.5px;
  color: var(--grey);
}

/* ---------------------------------------------------------------------
   Segments registry (home)
   ------------------------------------------------------------------- */

.seg-list { border-top: 1px solid var(--line); }
.seg-row {
  position: relative;
  display: grid;
  grid-template-columns: 70px 300px 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 38px 0;
  border-bottom: 1px solid var(--line);
}
.seg-num {
  font: 500 30px var(--serif);
  color: var(--grey);
  letter-spacing: 0.02em;
}
.seg-media { width: 100%; }
.seg-media .ph, .seg-noimg { aspect-ratio: 30 / 19; }
.seg-noimg {
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
}
.seg-noimg span {
  display: grid;
  place-items: center;
  width: 88px; height: 88px;
  border: 1px solid var(--grey);
  border-radius: 50%;
  font: 560 30px var(--serif);
  color: var(--grey-deep);
}
.seg-body .h-block a {
  text-decoration: none;
  color: inherit;
}
.seg-body .h-block a::after { content: ""; position: absolute; inset: 0; }
.seg-row:hover { background: rgba(0, 0, 0, 0.028); }
.seg-tag { margin: 10px 0 0; color: var(--grey); max-width: 52ch; }
.seg-meta {
  margin: 14px 0 0;
  font: 620 11px var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}
.seg-go {
  justify-self: end;
  font-size: 22px;
  color: var(--grey);
  transition: color 0.15s ease, transform 0.15s ease;
}
.seg-row:hover .seg-go { color: var(--red); transform: translateX(4px); }

/* ---------------------------------------------------------------------
   Charcoal CTA bands
   ------------------------------------------------------------------- */

.cta-band {
  background: var(--charcoal);
  color: #fff;
  padding: 4.6rem 0;
}
.cta-band-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.cta-band h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.15rem);
  font-weight: 560;
  color: #fff;
  max-width: 24ch;
}
.cta-band .cta-note {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14.5px;
  max-width: 52ch;
}
.cta-band .cta-note a { color: rgba(255, 255, 255, 0.85); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Home mid-page band — blurred colourful-wire image over black. */
.cta-band--media { position: relative; overflow: hidden; }
.cta-band--media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../../shared/images/product-coloured-cables-macro.jpg') center / cover no-repeat;
  filter: blur(22px);
  transform: scale(1.25);
  z-index: 0;
}
.cta-band--media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.60) 55%, rgba(0, 0, 0, 0.42) 100%);
  z-index: 0;
}
.cta-band--media .cta-band-in { position: relative; z-index: 1; }

/* Why WIPE hotwire — image left, headline + icon list right, equal heights. */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
}
.why-media {
  border-radius: 10px;
  overflow: hidden;
  min-height: 340px;
  background: var(--paper-deep);
}
.why-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-copy .h-section { max-width: none; }
.why-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
.why-item { display: flex; gap: 16px; align-items: flex-start; }
.why-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(227, 6, 19, 0.09);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.why-icon svg { width: 23px; height: 23px; }
.why-item h3 { font-size: 1.04rem; line-height: 1.25; margin: 3px 0 5px; }
.why-item p { font-size: 14.5px; line-height: 1.55; color: var(--grey-deep); margin: 0; }
@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; gap: 28px; }
  .why-media { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------------------
   Differentiators
   ------------------------------------------------------------------- */

.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 72px;
}
.diff-item { border-top: 1px solid var(--line); padding-top: 26px; }
.diff-item h3 { font-size: 1.35rem; max-width: 22ch; }
.diff-item p { margin: 14px 0 0; color: var(--grey-deep); font-size: 15px; }

/* ---------------------------------------------------------------------
   About / heritage
   ------------------------------------------------------------------- */

.about-cols {
  columns: 2;
  column-gap: 64px;
  margin-top: 2.6rem;
}
.about-cols p {
  break-inside: avoid;
  font-size: 15.5px;
  color: var(--ink-soft);
  margin-bottom: 1.35em;
}
.about-cols p:first-child {
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.6;
  font-weight: 480;
  color: var(--ink);
}

/* Home-page About teaser — centred single column, distinct from the two-column
   overview on about.php. */
.about-lead {
  max-width: 720px;
  margin: 2.6rem auto 0;
  text-align: center;
}
.about-lead p {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 1.2em;
}
.about-lead p:first-child {
  font-family: var(--serif);
  font-size: 1.32rem;
  line-height: 1.6;
  font-weight: 480;
  color: var(--ink);
}
.about-lead .link-arrow { margin-top: 10px; }

.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 4.6rem;
  padding-top: 34px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
.timeline-item { position: relative; }
.timeline-item::before {
  content: "";
  position: absolute;
  top: -38px; left: 0;
  width: 8px; height: 8px;
  background: var(--red);
  transform: rotate(45deg);
}
.timeline-item .tl-year {
  font: 600 1.7rem var(--serif);
  letter-spacing: -0.01em;
}
.timeline-item p { margin: 8px 0 0; font-size: 14px; color: var(--grey-deep); max-width: 38ch; }

.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 4.2rem;
}
.stat {
  text-align: center;
  padding: 34px 12px;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: 0; }
.stat b {
  display: block;
  font: 600 clamp(1.9rem, 3.4vw, 2.7rem) var(--serif);
  letter-spacing: -0.015em;
}
.stat span {
  display: block;
  margin-top: 6px;
  font: 600 10.5px var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}

.fac-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 4.2rem;
}

.credos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px;
  margin-top: 3rem;
}
.credo::before {
  content: "";
  display: block;
  width: 7px; height: 7px;
  background: var(--red);
  transform: rotate(45deg);
  margin-bottom: 16px;
}
.credo h3 {
  font: 660 12.5px var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.credo .credo-en {
  display: block;
  font: 540 1.3rem var(--serif);
  margin-top: 8px;
}
.credo p { margin: 12px 0 0; font-size: 13.5px; color: var(--grey-deep); }

/* ---------------------------------------------------------------------
   Clients / testimonials
   ------------------------------------------------------------------- */

.client-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 2.4rem;
}
.client-chip {
  padding: 13px 26px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font: 620 13px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-deep);
  background: var(--white);
}

.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.quote { position: relative; padding-top: 44px; }
.quote::before {
  content: "\201C";
  position: absolute;
  top: -8px; left: -4px;
  font: 600 76px/1 var(--serif);
  color: rgba(26, 26, 26, 0.14);
}
.quote blockquote {
  margin: 0;
  font: 490 1.12rem/1.66 var(--serif);
  color: var(--ink);
}
.quote figcaption {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.quote figcaption b {
  display: block;
  font: 640 11.5px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.quote figcaption span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--grey);
}

/* ---------------------------------------------------------------------
   Resource centre
   ------------------------------------------------------------------- */

.res-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 88px;
}
.res-h {
  font: 570 1.4rem var(--serif);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink);
}
.journal-item { padding: 26px 0; border-bottom: 1px solid var(--line); }
.journal-item time {
  font: 620 11px var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}
.journal-item h3 { font-size: 1.28rem; margin-top: 8px; }
.journal-item p { margin: 10px 0 0; font-size: 14px; color: var(--grey-deep); }

.cat-item { padding: 24px 0; border-bottom: 1px solid var(--line); }
.cat-item h3 { font-size: 1.12rem; display: flex; gap: 12px; align-items: baseline; }
.cat-item h3::before {
  content: "PDF";
  font: 700 9.5px var(--sans);
  letter-spacing: 0.1em;
  color: var(--grey-deep);
  border: 1px solid var(--line);
  padding: 3px 6px;
  transform: translateY(-2px);
  flex: none;
}
.cat-item p { margin: 10px 0 14px; font-size: 13.5px; color: var(--grey-deep); }
.cat-link {
  font: 620 11.5px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.cat-link:hover { color: var(--red); border-color: var(--red); }

/* ---------------------------------------------------------------------
   Global reach
   ------------------------------------------------------------------- */

.globe { color: #8c8c8c; display: block; margin: 0 auto 26px; width: 108px; height: 108px; }
.global-text {
  max-width: 70ch;
  margin: 1.8rem auto 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
}
.region-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 0;
  max-width: 860px;
  margin: 2.8rem auto 0;
}
.region-index li {
  display: inline-flex;
  align-items: center;
  font: 620 12.5px var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-deep);
}
.region-index { list-style: none; padding: 0; }
.region-index li + li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--red);
  transform: rotate(45deg);
  margin: 0 16px;
}
.global-media { margin-top: 4rem; }

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

.contact-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 88px;
}
.contact-phone {
  display: block;
  font: 590 1.55rem var(--serif);
  color: var(--ink);
  text-decoration: none;
  margin-top: 4px;
}
.contact-phone:hover { color: var(--red); }
.contact-mail {
  display: inline-block;
  margin-top: 4px;
  color: var(--grey-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-mail:hover { color: var(--red); }
.contact-addr { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.contact-addr h3 {
  font: 640 11.5px var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}
.contact-addr p { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-soft); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font: 640 11.5px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-deep);
}
.field label em { font-style: normal; color: var(--red); }
.field input, .field textarea {
  font: 400 15px/1.5 var(--sans);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 13px 14px;
  width: 100%;
}
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 0;
  border-color: transparent;
}
.field textarea { resize: vertical; min-height: 150px; }
.field .err { font-size: 13px; color: var(--red-dark); margin: 0; }
.field--invalid input, .field--invalid textarea, .field--invalid select { border-color: var(--red); }

/* Select controls (segment + country code), phone row, compact message, captcha. */
.field select {
  font: 400 15px/1.5 var(--sans);
  color: var(--ink);
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 13px 40px 13px 14px;
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236B6B6B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.field select:focus-visible { outline: 2px solid var(--red); outline-offset: 0; border-color: transparent; }
.phone-row { display: flex; gap: 10px; align-items: stretch; }
.phone-row .dialcode { flex: 0 0 auto; width: auto; min-width: 8.5rem; max-width: 11rem; }
.phone-row .phone-num { flex: 1 1 auto; width: auto; }
.field textarea.textarea--sm { min-height: 82px; }
.captcha-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.captcha-q {
  font: 640 15px/1 var(--sans); color: var(--ink);
  background: #f3f3f4; border: 1px solid var(--line); border-radius: 2px;
  padding: 13px 16px; white-space: nowrap; user-select: none; letter-spacing: 0.01em;
}
.captcha-row .captcha-num { flex: 0 0 auto; width: auto; max-width: 8rem; }
@media (max-width: 480px) {
  .phone-row { flex-wrap: wrap; }
  .phone-row .dialcode { flex: 1 1 100%; max-width: none; }
  .phone-row .phone-num { flex: 1 1 100%; }
}
.form-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 6px;
}
.form-note { font-size: 12.5px; color: var(--grey); max-width: 42ch; }

.form-success {
  border: 1px solid var(--ink);
  padding: 40px 36px;
  background: var(--paper);
  text-align: center;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-success .h-block { max-width: 34ch; margin: 0 auto; }

/* Consent checkbox — marketing consent + Privacy Policy / T&C acceptance.
   Scoped under .field--consent so it beats the .field label / .field input rules. */
.field--consent { grid-column: 1 / -1; }
.field--consent .consent {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  font: 400 0.9rem/1.5 var(--sans);
  letter-spacing: normal; text-transform: none; color: var(--grey-deep);
}
.field--consent .consent input[type="checkbox"] {
  -webkit-appearance: auto; appearance: auto;
  flex: none; width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0;
  border: 0; background: none; border-radius: 0;
  accent-color: var(--red); cursor: pointer;
}
.field--consent .consent a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.field--consent .consent a:hover { color: var(--ink); }
.field--consent .consent em { font-style: normal; color: var(--red); }
.field--consent.field--invalid .consent input[type="checkbox"] { outline: 2px solid var(--red); outline-offset: 2px; }

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

.footer {
  background: var(--charcoal);
  color: rgba(255, 255, 255, 0.68);
  padding: 4.6rem 0 0;
  font-size: 13.5px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1.35fr 1.1fr 1.5fr;
  gap: 48px;
  padding-bottom: 3.6rem;
}

/* Product sitemap band — every segment with its sub-categories. */
.footer-sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 34px 28px;
  padding: 0 0 3.2rem;
  margin-bottom: 3.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-seg-h {
  margin: 0 0 14px;
  font: 640 11.5px var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer-seg-h a { color: #fff; text-decoration: none; transition: color 0.15s ease; }
.footer-seg-h a:hover { color: var(--red); }
.footer-sublinks { list-style: none; margin: 0; padding: 0; }
.footer-sublinks li { margin: 0 0 9px; }
.footer-sublinks a {
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.4;
  transition: color 0.15s ease;
}
.footer-sublinks a:hover { color: #fff; }
.footer-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 22px;
}
.footer .brand-name { color: #fff; }
.footer .brand-sub { color: rgba(255, 255, 255, 0.45); }
.footer-about { color: rgba(255, 255, 255, 0.6); font-size: 13px; max-width: 46ch; }
.footer-certline {
  margin-top: 20px;
  font-family: var(--serif);   /* Barlow — set as its own property so browsers that don't
                                  accept a CSS var() inside the `font` shorthand still apply it */
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.42);
}
.footer-h {
  font: 640 11.5px var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  margin: 4px 0 20px;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: 0 0 10px; }
.footer-links a, .footer-contactline a {
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
}
.footer-links a:hover, .footer-contactline a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-contactline { line-height: 2; }
.footer-addr { margin-top: 18px; font-size: 12.5px; line-height: 1.75; color: rgba(255, 255, 255, 0.55); }
.footer-addr strong { color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.footer-map { display: inline-block; margin-top: 9px; color: var(--red); font-weight: 600; font-size: 12.5px; text-decoration: none; }
.footer-map:hover { color: #fff; }
.footer-legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
}
.footer-legal p { margin: 0; }
.footer-legal-links a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.footer-legal-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal-links span { margin: 0 8px; color: rgba(255, 255, 255, 0.3); }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-soc {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.72);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.footer-soc:hover { background: var(--red); border-color: var(--red); color: #fff; }
.footer-soc svg { width: 17px; height: 17px; }

.variations-pill {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 150;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(26, 26, 26, 0.2);
  border-radius: 999px;
  padding: 7px 14px;
  font: 550 12px var(--sans);
  color: var(--grey-deep);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.variations-pill:hover { color: var(--ink); border-color: var(--ink); }

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

.crumbs { margin-bottom: 30px; }
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--grey);
}
.crumbs li { display: inline-flex; align-items: center; gap: 12px; }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a { color: var(--grey-deep); text-decoration: none; }
.crumbs a:hover { color: var(--red); }
.crumbs [aria-current] { color: var(--ink); font-weight: 570; }

/* ---------------------------------------------------------------------
   Segment page
   ------------------------------------------------------------------- */

.page-hero { background: var(--paper); padding: 3.2rem 0 4.6rem; }
.page-hero .kicker { margin-bottom: 16px; }
.page-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); max-width: 24ch; }
.page-hero .lead { max-width: 62ch; margin-top: 22px; }
.page-hero-media { margin-top: 3.4rem; }
.page-hero-media .ph { aspect-ratio: 21 / 8; }

.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 56px;
}
.app-item { border-top: 1px solid var(--line); padding-top: 20px; }
.app-item h3 { font-size: 1.16rem; }
.app-item p { margin: 10px 0 0; font-size: 14px; color: var(--grey-deep); }

.offer-list { border-top: 1px solid var(--line); }
.offer-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.offer-row h3 { font-size: 1.3rem; }
.offer-row p { margin: 0; color: var(--grey-deep); font-size: 15px; align-self: center; }

.subcat { border-top: 1px solid var(--line); padding: 34px 0 38px; }
.subcat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.subcat h3 { font-size: 1.4rem; }
.subcat-count {
  font: 620 11px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.subcat-blurb { margin: 12px 0 0; color: var(--grey-deep); font-size: 14.5px; max-width: 72ch; }
.chip-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font: 520 13px var(--sans);
  color: var(--grey-deep);
  background: var(--white);
}
a.chip {
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
a.chip::after { content: "\2192"; font-size: 13px; color: var(--red); }
a.chip:hover { background: var(--ink); color: #fff; }
a.chip:hover::after { color: #fff; }

.faq-list { border-top: 1px solid var(--line); }
.faq {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 24px 4px;
  font: 560 1.18rem var(--serif);
  letter-spacing: -0.005em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font: 500 22px var(--serif);
  color: var(--red);
  flex: none;
}
.faq[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--red-dark); }
.faq .faq-a { padding: 0 4px 26px; max-width: 78ch; color: var(--grey-deep); font-size: 15px; }

.seg-others {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.seg-others-label {
  font: 640 11.5px var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  margin-right: 8px;
}

/* ---------------------------------------------------------------------
   Product page
   ------------------------------------------------------------------- */

/* Product hero reuses the about-hero (text-left / image-right) layout. */
.prod-hero .about-hero-copy .lead { max-width: 56ch; }

.feat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 56px;
}
.feat-list li {
  position: relative;
  padding: 0 0 0 26px;
  font-size: 15px;
  color: var(--ink-soft);
}
.feat-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 6px; height: 6px;
  background: var(--ink);
  transform: rotate(45deg);
}

/* The datasheet — formal ruled table with certification stamp */
.datasheet {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(26, 26, 26, 0.75);
  padding: 7px;
  margin-top: 3.2rem;
}
.datasheet-in { border: 1px solid var(--line); padding: 0; }
.datasheet-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 30px 22px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.6);
}
.datasheet-head .ds-kicker {
  font: 660 10.5px var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 8px;
}
.datasheet-head h3 { font-size: 1.5rem; }
.ds-org {
  text-align: right;
  font: 600 10px var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  line-height: 1.9;
}
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td {
  text-align: left;
  vertical-align: top;
  padding: 13px 30px;
  border-top: 1px solid var(--line-soft);
}
.spec-table tr:first-child th, .spec-table tr:first-child td { border-top: 0; }
.spec-table th {
  width: 34%;
  font: 640 11px var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 15px;
}
.spec-table td { font-size: 14.5px; color: var(--ink); }
.datasheet-foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 14px 30px;
  border-top: 1px solid rgba(26, 26, 26, 0.6);
  font: 500 11px var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}
.datasheet-foot p { margin: 0; }
.datasheet-seal {
  position: absolute;
  top: -34px;
  right: 30px;
}

.twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
}
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li {
  position: relative;
  padding: 13px 0 13px 26px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  color: var(--ink-soft);
}
.plain-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 21px;
  width: 6px; height: 6px;
  background: var(--ink);
  transform: rotate(45deg);
}
.plain-list--cert li::before { background: var(--red); }

.dl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}
.dl-row b { font: 570 1.05rem var(--serif); letter-spacing: -0.005em; }
.dl-row span {
  font: 620 11px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  flex: none;
}
.dl-row:hover b { color: var(--red-dark); }
.dl-row:hover span { color: var(--red); }

.rel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.rel-card {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 32px 34px 30px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease;
}
.rel-card:hover { border-color: var(--ink); }
.rel-card .rel-k {
  font: 640 10.5px var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}
.rel-card h3 { font-size: 1.32rem; margin-top: 10px; }
.rel-card p { margin: 12px 0 20px; font-size: 14px; color: var(--grey-deep); }

/* ---------------------------------------------------------------------
   Not-found panel
   ------------------------------------------------------------------- */

.notfound {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}
.notfound h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-top: 30px; }
.notfound p { margin: 18px auto 0; color: var(--grey-deep); max-width: 48ch; }
.notfound .chip-list { justify-content: center; margin-top: 26px; }
.notfound .btn { margin-top: 34px; }

/* Placeholder "Coming Soon!" pages (e.g. Aerospace families pending datasheets) */
.section.coming-soon { min-height: 46vh; display: grid; place-items: center; }
.coming-soon-text {
  text-align: center;
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  letter-spacing: -0.01em;
  color: var(--ink, #000);
}

/* ---------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------- */

.fade {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade { opacity: 1; transform: none; }
}

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

@media (max-width: 1020px) {
  .seg-row { grid-template-columns: 48px 240px 1fr; }
  .seg-go { display: none; }
  .res-grid, .contact-grid { gap: 56px; }
  .diff-grid { gap: 44px 48px; }
}

@media (max-width: 900px) {
  .shell { padding-left: 24px; padding-right: 24px; }
  .section { padding: 3.3rem 0; }
  .topbar-note { display: none; }

  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 42px;
    height: 42px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 2px;
  }
  .nav-burger i { display: block; height: 2px; background: var(--ink); }
  .nav-check {
    display: block;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    margin: 0;
    opacity: 0.011;
    cursor: pointer;
    z-index: 5;
  }
  .nav-burger {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
  }
  .nav-check:focus-visible ~ .nav-burger { outline: 2px solid var(--red); outline-offset: 3px; }
  .nav-check:checked ~ .nav-burger i:first-child { transform: translateY(4px) rotate(45deg); }
  .nav-check:checked ~ .nav-burger i:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 12px 24px 20px;
    box-shadow: 0 18px 30px rgba(23, 24, 26, 0.08);
  }
  .nav-check:checked ~ .nav { display: flex; }
  .nav a { padding: 10px 0; font-size: 15px; width: 100%; border-bottom: 1px solid var(--line-soft); }

  /* Products dropdown becomes a tap-to-expand accordion inside the burger. */
  .nav-drop { position: static; display: block; width: 100%; }
  .nav-drop > summary {
    width: 100%;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-drop:hover > summary,
  .nav-drop:focus-within > summary,
  .nav-drop[open] > summary { border-bottom-color: var(--line-soft); }
  .nav-caret { transform: rotate(45deg); }
  .nav-drop[open] > summary .nav-caret { transform: rotate(225deg); }
  .nav-drop:not([open]) > .drop { display: none; }
  .nav-drop[open] > .drop { display: block; }
  .nav-drop > .drop {
    position: static;
    min-width: 0;
    margin-top: 0;
    padding: 2px 0 8px 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    z-index: auto;
  }
  .nav-drop > .drop::before { display: none; }
  .drop-list a { padding: 9px 0; font-size: 14px; border-bottom: 0; }
  .drop-all { margin-top: 4px; padding: 10px 0 4px; border-top: 1px solid var(--line-soft); }
  /* Products tree on mobile: sub-products become an inline indented list. */
  .drop-branch-link { padding: 9px 0; }
  .drop-branch-caret { display: none; }
  .drop-sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; background: transparent; border: 0; box-shadow: none;
    margin: 0; padding: 0 0 4px 14px;
  }
  .drop-sub::before { display: none; }
  .drop-sub a { padding: 7px 0; font-size: 13px; }

  /* Contact CTA becomes a full-width button at the foot of the burger menu. */
  .nav a.nav-cta {
    margin-top: 14px;
    width: 100%;
    text-align: center;
    padding: 13px 18px;
    border-radius: 2px;
    color: #fff;
  }

  .seg-row { grid-template-columns: 1fr; gap: 20px; padding: 30px 0; }
  .seg-num { font-size: 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
  .seg-media { max-width: 480px; }
  .diff-grid, .rel-grid, .twocol, .fac-pair { grid-template-columns: 1fr; }
  .twocol { gap: 48px; }
  .about-cols { columns: 1; }
  .credos { grid-template-columns: 1fr 1fr; gap: 36px; }
  .quotes { grid-template-columns: 1fr; gap: 44px; }
  .res-grid, .contact-grid { grid-template-columns: 1fr; }
  .prod-hero { grid-template-columns: 1fr; gap: 40px; }
  .apps-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .offer-row { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat { border-left: 0; border-top: 1px solid var(--line-soft); }
  .stat:nth-child(-n+3) { border-top: 0; }
  .timeline { grid-template-columns: 1fr; gap: 0; padding-top: 0; margin-top: 3rem; }
  .timeline::before { top: 0; bottom: 0; left: 3px; right: auto; width: 1px; height: auto; }
  .timeline-item { padding: 0 0 30px 30px; }
  .timeline-item::before { top: 10px; left: 0; }
  .ph--wide { aspect-ratio: 16 / 10; }
  .page-hero-media .ph { aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
  .shell { padding-left: 20px; padding-right: 20px; }
  .hero { padding-top: 3.6rem; }
  .hero-cta .btn { width: 100%; }
  .passport { gap: 26px 24px; }
  .seal { width: 136px !important; height: 136px !important; }
  .datasheet-seal { position: static; display: block; margin: 24px auto 0; }
  .datasheet { padding-bottom: 30px; }
  .datasheet-head { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 20px 18px; }
  .ds-org { text-align: left; }
  .spec-table th, .spec-table td { display: block; width: 100%; padding: 0 20px; }
  .spec-table th { padding-top: 15px; }
  .spec-table td { padding-top: 3px; padding-bottom: 14px; border-top: 0; }
  .spec-table tr th { border-top: 1px solid var(--line-soft); }
  .spec-table tr:first-child th { border-top: 0; }
  .datasheet-foot { padding: 14px 20px; }
  .apps-grid { grid-template-columns: 1fr; }
  .credos { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(-n+3) { border-top: 1px solid var(--line-soft); }
  .stat:nth-child(-n+2) { border-top: 0; }
  .feat-list { grid-template-columns: 1fr; }
  .cta-band-in { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; gap: 44px; }
  .region-index li + li::before { margin: 0 10px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   ABOUT US PAGE
   ================================================================ */
.aicon { width: 34px; height: 34px; display: block; }

/* Hero — copy left, facade image right */
.about-hero { padding: 3rem 0 3.4rem; }
.about-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: center; }
.about-hero-copy h1 { margin: 12px 0 0; }
.about-hero-copy .lead { margin-top: 20px; }
.about-hero-media { border-radius: 8px; overflow: hidden; align-self: stretch; }
.about-hero-media img { display: block; width: 100%; height: 100%; min-height: 300px; max-height: 440px; object-fit: cover; }

/* Centered lede band — certifications text + tagline */
.about-lede { text-align: left; }
.about-lede p { color: var(--grey-deep); font-size: 1.06rem; line-height: 1.72; margin: 0; max-width: 62rem; }
.about-tagline { margin-top: 1.15rem !important; color: var(--ink); font-weight: 600; font-size: 1.18rem; line-height: 1.55; max-width: 62rem; }

/* Stat tiles with icons */
.about-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.astat { flex: 0 0 calc(100% / 7 - 12px); background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1rem 1.35rem; display: flex; flex-direction: column; }
/* Soft grey circular badge + two-tone stat icon — "Foundation" style. */
.astat-ic { align-self: flex-start; width: 54px; height: 54px; border-radius: 50%; background: rgba(107, 107, 107, 0.15); color: var(--red); display: inline-flex; align-items: center; justify-content: center; }
.astat-ic .sicon { width: 30px; height: 30px; }
.astat-val { font: 700 1.42rem/1 var(--sans); color: var(--ink); margin: 11px 0 5px; }
.astat-label { color: var(--grey-deep); font-size: 0.83rem; line-height: 1.4; }

/* Mission | Vision */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.mv-card { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 16px; padding: 2rem 1.9rem; }
.mv-ic { color: var(--red); display: inline-flex; }
.mv-ic .aicon { width: 42px; height: 42px; }
/* Mission/Vision titles use the section-heading style (like "Our Values — The 4 Credos"). */
.mv-h { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 575; margin: 0.7rem 0 0.7rem; }
.mv-card p { color: var(--grey-deep); line-height: 1.72; margin: 0; }

/* Values */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
/* auto-fit variant for pages with 3 or 5 focus cards (CSR, Digitalization) */
.values-grid--auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.value-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 1.9rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.value-ic { width: 66px; height: 66px; border-radius: 50%; background: rgba(107, 107, 107, 0.15); color: var(--red); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.value-ic .aicon { width: 30px; height: 30px; }
.value-ic img { width: 46px; height: 46px; object-fit: contain; display: block; }
.value-card h3 { font-size: 1.08rem; margin: 0 0 0.5rem; }
.value-en { display: block; margin-top: 0.2rem; color: var(--grey); font-weight: 500; font-size: 0.9rem; }
.value-card p { color: var(--grey-deep); font-size: 0.92rem; line-height: 1.55; margin: 0; }

/* Journey — horizontal curvy timeline that scrolls sideways. The wavy wire,
   icon nodes and cards are absolutely positioned from PHP-computed coordinates
   so everything lines up; each card links to its node with a short stub. */
.jtl { position: relative; margin-top: 1.4rem; }
.jtl-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.jtl-scroll::-webkit-scrollbar { display: none; }
.jtl-track { position: relative; }
.jtl-wave { position: absolute; inset: 0; display: block; }
.jtl-wave path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.jtl-wave-core { stroke: var(--red); stroke-width: 8; }
.jtl-wave-hi { stroke: rgba(255, 255, 255, 0.4); stroke-width: 2.4; }
.jtl-node {
  position: absolute; z-index: 2;
  border-radius: 50%; background: var(--white); border: 2px solid var(--red); color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.jtl-node .aicon { width: 24px; height: 24px; }
.jcard {
  position: absolute; z-index: 3;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.85rem 1rem 0.95rem; text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.jcard::after { content: ""; position: absolute; left: 50%; width: 2px; height: 12px; background: var(--red); transform: translateX(-50%); }
.jcard--top::after { bottom: -12px; }
.jcard--bottom::after { top: -12px; }
.jcard-year { display: block; font: 700 1.1rem var(--sans); color: var(--red); margin-bottom: 4px; }
.jcard p { margin: 0; color: var(--grey-deep); font-size: 0.86rem; line-height: 1.5; }
.jtl-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.92); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.jtl-arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.jtl-arrow:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.jtl-arrow svg { width: 20px; height: 20px; }
.jtl-arrow--prev { left: 14px; }
.jtl-arrow--next { right: 14px; }
.jtl-arrow:disabled { opacity: 0.3; cursor: default; background: rgba(255, 255, 255, 0.92); color: var(--ink); border-color: var(--line); }

/* Trusted globally */
.section-intro { max-width: 62ch; margin: 12px auto 0; color: var(--grey-deep); }
.trusted-grid { display: flex; flex-direction: column; gap: 22px; }
.trusted-card { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 14px; padding: 1.7rem 1.6rem 1.9rem; text-align: center; }
.trusted-card h3 { font-size: 1.2rem; margin: 0 0 1.25rem; }
.trusted-card p { margin: 0; color: var(--grey-deep); line-height: 1.68; }
.trusted-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 40px; }
.trusted-logo img { height: 46px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.trusted-flags { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.trusted-flag { margin: 0; width: 120px; }
.trusted-flag img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.08); display: block; }
.trusted-flag figcaption { text-align: center; margin-top: 0.55rem; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.trusted-sep { flex-basis: 100%; height: 1px; border: 0; background: var(--line); margin: 0.6rem 0; }

/* Magnum partnership */
.magnum-card { background: var(--charcoal); color: #fff; border-radius: 16px; padding: 2.7rem 2.4rem; max-width: 880px; margin: 0 auto; text-align: center; }
.magnum-card .kicker { color: rgba(255, 255, 255, 0.6); }
.magnum-card h2 { color: #fff; }
.magnum-card p { color: rgba(255, 255, 255, 0.82); line-height: 1.72; max-width: 64ch; margin: 1rem auto 1.7rem; }

@media (max-width: 980px) {
  .astat { flex-basis: calc(25% - 11px); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .astat { flex-basis: calc(33.333% - 10px); }
}
@media (max-width: 860px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .about-hero-media img { max-height: 300px; }
  .mv-grid { grid-template-columns: 1fr; }
  .trusted-grid { grid-template-columns: 1fr; }
  .journey::before { left: 7px; }
  .jm, .jm--left, .jm--right { width: 100%; left: 0; padding: 0 0 0 38px; }
  .jm--left::after, .jm--right::after { left: 0; right: auto; }
}
@media (max-width: 560px) {
  .astat { flex-basis: calc(50% - 7px); }
  .values-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   MISSION, VISION & CREDOS PAGE — feature rows + credo cards
   ================================================================ */
.mv-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.mv-feature-text .kicker { margin-bottom: 8px; }
/* "Mission" / "Vision" headings sized to match the "Our Values — The 4 Credos" section heading. */
.mv-feature-text .mv-title { margin: 0; max-width: none; }
.mv-statement { font-size: clamp(1.08rem, 1.6vw, 1.24rem); line-height: 1.62; font-weight: 500; color: var(--ink); margin: 0.5rem 0 0; max-width: 34ch; }
.mv-feature-media { position: relative; border-radius: 12px; overflow: hidden; }
.mv-feature-media img { display: block; width: 100%; height: 100%; min-height: 300px; max-height: 400px; object-fit: cover; }
.mv-badge {
  position: absolute; top: 20px; left: 20px;
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
.mv-badge .aicon { width: 32px; height: 32px; }
.mv-badge--inline {
  position: static; margin: 0 0 1.1rem;
  width: 60px; height: 60px;
  background: rgba(227, 6, 19, 0.09); color: var(--red); box-shadow: none;
}
.mv-badge--inline .aicon { width: 30px; height: 30px; }

.credo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.credo-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 2.1rem 1.5rem; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.credo-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08); }
.credo-badge {
  width: 78px; height: 78px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(227, 6, 19, 0.13), rgba(227, 6, 19, 0.03));
  color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1.15rem;
}
.credo-badge .aicon { width: 38px; height: 38px; }
.credo-badge img { width: 54px; height: 54px; object-fit: contain; display: block; }
.credo-card h3 { font-size: 1.16rem; letter-spacing: 0.03em; margin: 0 0 3px; }
.credo-card .credo-en { color: var(--red); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.8rem; display: block; }
.credo-card p { color: var(--grey-deep); font-size: 0.9rem; line-height: 1.55; margin: 0; }

@media (max-width: 860px) {
  .mv-feature { grid-template-columns: 1fr; gap: 26px; }
  .mv-feature-media img { max-height: 300px; }
  .mv-statement { max-width: none; }
  .credo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .credo-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   CAREERS PAGE
   ================================================================ */
/* Why Join — all six as compact tiles in a single row */
.benefit-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.benefit-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 1.7rem 1.05rem; }
.benefit-ic { flex: none; width: 54px; height: 54px; border-radius: 50%; background: rgba(107, 107, 107, 0.15); color: var(--red); display: inline-flex; align-items: center; justify-content: center; }
.benefit-ic .aicon { width: 27px; height: 27px; }
.benefit-body h3 { font-size: 1rem; margin: 0 0 6px; line-height: 1.25; }
.benefit-body p { margin: 0; color: var(--grey-deep); font-size: 0.86rem; line-height: 1.5; }

/* Job openings — clean table (cards on mobile) */
.jobs-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.jobs-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.jobs-table thead th {
  text-align: left; font: 640 11px var(--sans); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--grey); padding: 15px 20px; background: var(--paper); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.jobs-table tbody td { padding: 18px 20px; border-bottom: 1px solid var(--line); color: var(--grey-deep); vertical-align: middle; }
.jobs-table tbody tr:last-child td { border-bottom: none; }
.jobs-table tbody tr { transition: background-color 0.15s ease; }
.jobs-table tbody tr:hover { background: var(--paper); }
.jobs-table td strong { color: var(--ink); font-size: 1.02rem; }
.job-tag { display: inline-block; font-size: 0.8rem; font-weight: 600; color: var(--red); background: rgba(227, 6, 19, 0.08); border-radius: 100px; padding: 4px 13px; white-space: nowrap; }
.jobs-apply { text-align: right; }
@media (max-width: 760px) {
  .jobs-wrap { border: none; overflow: visible; }
  .jobs-table { min-width: 0; }
  .jobs-table, .jobs-table tbody, .jobs-table tr, .jobs-table td { display: block; }
  .jobs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .jobs-table tr { border: 1px solid var(--line); border-radius: 12px; padding: 6px 2px; margin-bottom: 14px; background: var(--white); }
  .jobs-table td, .jobs-table tbody tr:last-child td { border: none; padding: 9px 16px; display: flex; justify-content: space-between; gap: 18px; text-align: right; }
  .jobs-table td::before { content: attr(data-label); font-weight: 600; color: var(--ink); text-align: left; }
  .jobs-apply { justify-content: flex-end; }
}

/* Life at WIPE hotwire — album carousel + lightbox modal */
.album-carousel { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 2rem; }
.album-track { flex: 1; min-width: 0; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: 6px 2px; scroll-behavior: smooth; }
.album-track::-webkit-scrollbar { display: none; }
.album-tile {
  flex: 0 0 clamp(230px, 26vw, 290px); scroll-snap-align: start;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--white);
  cursor: pointer; text-align: left; padding: 0; display: flex; flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.album-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1); }
.album-tile:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.album-cover { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #ECECEC, #DADADA); display: flex; align-items: center; justify-content: center; color: var(--grey); }
.album-cover .aicon { width: 44px; height: 44px; }
.album-badge { position: absolute; bottom: 10px; right: 10px; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 100px; }
.album-name { font-weight: 700; color: var(--ink); font-size: 1.02rem; padding: 0.9rem 1.1rem 0.15rem; }
.album-open { color: var(--red); font-weight: 600; font-size: 0.85rem; padding: 0 1.1rem 1.05rem; }
.album-arrow { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.album-arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.album-arrow:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.album-arrow svg { width: 20px; height: 20px; }
.album-modal { width: min(880px, 94vw); max-height: 88vh; padding: 0; border: none; border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32); overflow: hidden; }
.album-modal[open] { display: flex; flex-direction: column; }
.album-modal::backdrop { background: rgba(0, 0, 0, 0.6); }
.album-modal-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--line); }
.album-modal-head h3 { margin: 0; font-size: 1.25rem; }
.album-modal-x { border: none; background: transparent; font-size: 1.7rem; line-height: 1; color: var(--grey); cursor: pointer; padding: 0 4px; }
.album-modal-x:hover { color: var(--ink); }
.album-photos { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.4rem 1.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.album-photo { margin: 0; }
.album-photo-ic { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #ECECEC, #DADADA); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--grey); }
.album-photo-ic svg { width: 34px; height: 34px; }
.album-photo figcaption { font-size: 0.76rem; color: var(--grey); margin-top: 6px; text-align: center; }
@media (max-width: 600px) { .album-photos { grid-template-columns: repeat(2, 1fr); } }

/* Learning & Development — all five as compact tiles in a single row */
.ld-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.ld-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 1.7rem 1.05rem; }
.ld-ic { flex: none; width: 54px; height: 54px; border-radius: 14px; background: rgba(107, 107, 107, 0.15); color: var(--red); display: inline-flex; align-items: center; justify-content: center; }
.ld-ic .aicon { width: 26px; height: 26px; }
.ld-item h3 { font-size: 1rem; margin: 0 0 5px; line-height: 1.25; }
.ld-item p { margin: 0; color: var(--grey-deep); font-size: 0.86rem; line-height: 1.5; }
@media (max-width: 1000px) { .ld-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ld-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .ld-list { grid-template-columns: 1fr; } }

.resume-wrap { max-width: 760px; }

@media (max-width: 1080px) { .benefit-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .benefit-grid { grid-template-columns: 1fr; } }

/* ================================================================
   HOME — RESOURCE CENTRE TILES (blog CTA + tinted image tiles)
   ================================================================ */
.rc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 2.5rem; }
.rc-cta { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 2.1rem 1.9rem; min-height: 240px; }
.rc-cta h3 { font-size: 1.4rem; line-height: 1.22; margin: 0 0 0.7rem; }
.rc-cta p { color: var(--grey-deep); line-height: 1.6; margin: 0 0 1.6rem; }
.rc-cta .btn { align-self: flex-start; margin-top: auto; }
.rc-media { position: relative; display: block; border-radius: 16px; overflow: hidden; min-height: 240px; text-decoration: none; }
.rc-media img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.rc-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.68) 100%); }
.rc-media:hover img { transform: scale(1.05); }
.rc-media:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.rc-media-cap { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; display: flex; gap: 13px; align-items: stretch; }
.rc-line { flex: none; width: 3px; border-radius: 2px; background: var(--red); }
.rc-cap-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rc-eyebrow { color: rgba(255, 255, 255, 0.82); font: 640 11px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.rc-title { color: #fff; font-weight: 700; font-size: 1.18rem; line-height: 1.25; }
@media (max-width: 860px) { .rc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rc-grid { grid-template-columns: 1fr; } }

/* Global reach — world map */
.global-map { margin: 0.5rem auto 0; max-width: 820px; position: relative; }
.global-map img { display: block; width: 100%; height: auto; }
/* Interactive "Our Global Reach" — transparent hotspots over the baked-in map pins
   pulse a ring and reveal the country flag + name on hover / keyboard focus / tap. */
.reach-hotspots { position: absolute; inset: 0; pointer-events: none; }
.reach-hotspot {
  position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; padding: 0; border: 0; background: transparent;
  cursor: pointer; pointer-events: auto;
}
.reach-hotspot:focus { outline: none; }
.reach-ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 15px; height: 15px; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(227, 6, 19, 0.5); opacity: 0; transition: opacity .18s;
}
.reach-hotspot:hover .reach-ring,
.reach-hotspot:focus-visible .reach-ring { opacity: 1; animation: reachPulse 1.5s infinite; }
@keyframes reachPulse {
  0%   { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0.5); }
  70%  { box-shadow: 0 0 0 13px rgba(227, 6, 19, 0); }
  100% { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0); }
}
.reach-tip {
  position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%) translateY(4px);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 11px 5px 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s; z-index: 6;
  font-size: 0.82rem; font-weight: 600;
}
.reach-tip img { width: 25px; height: auto; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); }
.reach-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #fff;
}
.reach-hotspot:hover .reach-tip,
.reach-hotspot:focus-visible .reach-tip,
.reach-hotspot:focus .reach-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* Edge-anchored tooltips — hotspots near the left/right edge of the map open their
   pill inward instead of centred, so the country name can't be clipped off-screen
   on narrow viewports. The arrow moves to sit over the dot. */
.reach-hotspot--edge-r .reach-tip { left: auto; right: 50%; transform: translateX(15px) translateY(4px); }
.reach-hotspot--edge-r:hover .reach-tip,
.reach-hotspot--edge-r:focus-visible .reach-tip,
.reach-hotspot--edge-r:focus .reach-tip { transform: translateX(15px) translateY(0); }
.reach-hotspot--edge-r .reach-tip::after { left: auto; right: 11px; transform: none; }
.reach-hotspot--edge-l .reach-tip { left: 50%; right: auto; transform: translateX(-15px) translateY(4px); }
.reach-hotspot--edge-l:hover .reach-tip,
.reach-hotspot--edge-l:focus-visible .reach-tip,
.reach-hotspot--edge-l:focus .reach-tip { transform: translateX(-15px) translateY(0); }
.reach-hotspot--edge-l .reach-tip::after { left: 11px; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reach-hotspot:hover .reach-ring, .reach-hotspot:focus-visible .reach-ring { animation: none; box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.35); }
}
/* Ambient "ping" — when the map scrolls into view each country pops a radar ring,
   staggered by --i so the effect ripples west→east across the map, then loops gently. */
.reach-ping {
  position: absolute; left: 50%; top: 50%; margin: -5px 0 0 -5px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--red); opacity: 0; transform: scale(0.2);
  pointer-events: none; z-index: 1;
}
.global-map.in .reach-ping {
  animation: reachPing 3.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
  animation-delay: calc(var(--i, 0) * 0.13s);
}
@keyframes reachPing {
  0%   { opacity: 0;    transform: scale(0.2); }
  9%   { opacity: 0.95; transform: scale(0.6); }
  55%  { opacity: 0;    transform: scale(2.6); }
  100% { opacity: 0;    transform: scale(2.6); }
}
/* A country lit up by hover/focus quiets its ambient ping so the flag reads cleanly. */
.reach-hotspot:hover .reach-ping,
.reach-hotspot:focus-visible .reach-ping { animation-play-state: paused; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .global-map.in .reach-ping { animation: none; opacity: 0; }
}

/* ================================================================
   BLOGS PAGE
   ================================================================ */
.blog-topic { display: inline-block; font: 600 10.5px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); background: rgba(227, 6, 19, 0.09); border-radius: 100px; padding: 4px 11px; }
.blog-meta { color: var(--grey); font-size: 0.82rem; }

/* Featured stories */
.feat-blogs { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.feat-blog { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.feat-blog:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.09); }
.feat-blog-media { aspect-ratio: 16 / 8; overflow: hidden; }
.feat-blog-media img { width: 100%; height: 100%; object-fit: cover; }
.feat-blog-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; padding: 1.6rem 1.7rem 1.8rem; }
.feat-blog-title { font-size: 1.35rem; font-weight: 700; line-height: 1.25; color: var(--ink); }
.feat-blog-excerpt { color: var(--grey-deep); line-height: 1.6; }

/* Filter bar */
.section-head--between { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem 1.5rem; margin-bottom: 2rem; }
.section-head--between .h-section { margin: 0; }
.blog-filter { display: flex; flex-wrap: wrap; gap: 16px; }
.blog-filter label { display: flex; flex-direction: column; gap: 5px; font: 640 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }
.blog-filter select { font: 500 0.92rem var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 100px; padding: 9px 16px; cursor: pointer; }
.blog-filter select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 560px) {
  .blog-filter { width: 100%; }
  .blog-filter label { flex: 1 1 44%; }
  .blog-filter select { width: 100%; }
}

/* Blog grid — tiles of 4 */
.blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.blog-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09); }
.blog-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-topic--on { position: absolute; top: 12px; left: 12px; background: rgba(255, 255, 255, 0.93); color: var(--red); }
.blog-card-body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.2rem 1.3rem; }
.blog-card-title { font-size: 1.02rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.blog-card-excerpt { font-size: 13.5px; line-height: 1.55; color: var(--grey-deep); }
.blog-empty { grid-column: 1 / -1; text-align: center; color: var(--grey); padding: 2rem 0; }
.quick-tabs--center { justify-content: center; margin-top: 1.4rem; }

@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .feat-blogs { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .blog-grid { grid-template-columns: 1fr; } }

/* "Applications" heading at Overview size, with its target icon inline. */
.h-block--icon { display: flex; align-items: center; gap: 10px; }
.h-block--icon .aicon { width: 1em; height: 1em; flex: none; color: var(--red); }

/* Document cards — flyers and datasheets. No cover art: a category tag sits at the top of
   the box, then the document name, then the download. Three per row on desktop. */
.doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.doc-card .blog-card-body { padding: 1.15rem 1.3rem 1.35rem; gap: 0.7rem; align-items: flex-start; }
.doc-card .blog-topic { align-self: flex-start; }
.doc-card .blog-card-title { font-size: 1.05rem; line-height: 1.35; }
.doc-card .cat-dl { margin-top: 0.35rem; }
.blog-filter input[type="search"] {
  font: 500 0.92rem var(--sans); color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 100px; padding: 9px 16px; min-width: 210px;
}
.blog-filter input[type="search"]:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 980px) { .doc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .doc-grid { grid-template-columns: 1fr; } }

/* Product catalogues — download button + card footer (reuses blog grid) */
.cat-dl { align-self: flex-start; padding: 9px 18px; font-size: 0.84rem; margin-top: 0.25rem; }
.cat-card .blog-card-body { gap: 0.6rem; }
.feat-blog .cat-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; width: 100%; margin-top: 0.3rem; }

/* ================================================================
   CUSTOMER TESTIMONIALS PAGE
   ================================================================ */
.tt-filter { flex-wrap: wrap; }
.tt-search-field { flex: 1; min-width: 220px; }
.tt-search-field input { font: 500 0.92rem var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 100px; padding: 9px 16px; width: 100%; }
.tt-search-field input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Featured testimonial */
.tt-featured { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 2.4rem 2.6rem 2.2rem; max-width: 880px; }
.tt-quote-mark { position: absolute; top: 0.2rem; left: 1.4rem; font: 700 5rem/1 Georgia, serif; color: rgba(227, 6, 19, 0.16); }
.tt-featured blockquote { margin: 0; position: relative; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.5; font-weight: 500; color: var(--ink); }
.tt-featured figcaption { margin-top: 1.3rem; display: flex; flex-direction: column; gap: 3px; }
.tt-featured figcaption b { color: var(--ink); font-size: 1.02rem; }
.tt-featured figcaption > span { color: var(--grey); font-size: 0.9rem; }
.tt-featured figcaption .blog-topic { align-self: flex-start; margin-top: 9px; }

/* Gallery tabs */
.tt-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 2rem; }
.tt-tab { font: 600 0.9rem var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 100px; padding: 9px 20px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.tt-tab:hover { border-color: var(--red); color: var(--red); }
.tt-tab.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.tt-tab:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* Testimonial tiles (share .blog-grid) */
.tt-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tt-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09); }
.tt-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #111; }
.tt-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.82; }
.tt-play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); }
.tt-play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.tt-card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 3px; }
.tt-role { color: var(--ink); font-size: 1rem; }
.tt-company { color: var(--grey); font-size: 0.85rem; line-height: 1.4; }
.tt-card--written { padding: 1.4rem 1.4rem 1.3rem; gap: 1rem; }
.tt-card--written .blog-topic { align-self: flex-start; }
.tt-w-quote { margin: 0; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.6; }
.tt-attr { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; }
.tt-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: #E7E7E7; }
.tt-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-attr-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tt-attr-text b { color: var(--ink); font-size: 0.92rem; }

/* ---- "What Our Partners Say" — 3-up carousels (video row + written row),
       enlarged centre card, prev/next arrows either side. ---- */
.ptc { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 1.4rem; }
.ptc + .ptc { margin-top: 2.4rem; }
.ptc-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 36px 4px; }
.ptc-track { display: flex; gap: 22px; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; margin: 0; padding: 0; list-style: none; }
.ptc-item { flex: 0 0 auto; list-style: none; display: flex; transition: transform 0.35s ease, opacity 0.35s ease; }
.ptc-item > * { width: 100%; }
@media (min-width: 981px) {
  .ptc-item { transform: scale(0.82); opacity: 0.68; }
  .ptc-item.is-center { transform: scale(1.14); opacity: 1; z-index: 2; }
}
.ptc-arrow {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.ptc-arrow:hover:not(:disabled) { background: var(--red); color: #fff; border-color: var(--red); }
.ptc-arrow:disabled { opacity: 0.32; cursor: default; box-shadow: none; }
.ptc-arrow svg { width: 20px; height: 20px; }
/* video card */
.tt-vcard { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); }
.tt-vthumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #111; }
.tt-vthumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.tt-vtag { position: absolute; left: 12px; top: 12px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-vmeta { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 3px; }
.tt-vmeta b { color: var(--ink); font-size: 1rem; }
.tt-vmeta span { color: var(--grey); font-size: 0.85rem; line-height: 1.4; }
/* written card */
.tt-wcard { position: relative; margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 2rem 1.8rem 1.5rem; display: flex; flex-direction: column; min-height: 258px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); }
.tt-wq { position: absolute; top: 8px; right: 20px; font-family: Georgia, "Times New Roman", serif; font-size: 3.6rem; line-height: 1; color: var(--red); opacity: 0.16; }
.tt-wcard blockquote { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.62; font-weight: 500; }
.tt-wcard figcaption { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; padding-top: 1.4rem; }
.tt-wattr { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tt-wattr b { color: var(--ink); font-size: 0.92rem; }
.tt-wattr span { color: var(--grey); font-size: 0.82rem; line-height: 1.35; }
@media (max-width: 640px) { .ptc-arrow { width: 36px; height: 36px; } }

/* Ensure the hidden attribute always wins over card display rules (used by the
   blog / catalogue / testimonial filters + tabs). */
[hidden] { display: none !important; }

/* ================================================================
   BLOG POST (individual article) PAGE
   ================================================================ */
.bp-hero { padding-bottom: 2.4rem; }
.bp-meta-sec { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding: 1.05rem 0; }
.bp-author { display: flex; align-items: center; gap: 11px; }
.bp-author-img { flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: #E7E7E7; }
.bp-author-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-author-name { color: var(--grey-deep); font-size: 0.92rem; }
.bp-author-name b { color: var(--ink); }
.bp-meta-item { display: inline-flex; align-items: center; gap: 7px; color: var(--grey-deep); font-size: 0.9rem; }
.bp-meta-item .aicon { width: 18px; height: 18px; color: var(--red); }
.bp-share { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; }
.bp-share-label { color: var(--grey); font-size: 0.85rem; font-weight: 600; }
.bp-share-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--grey-deep); transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.bp-share-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.bp-share-btn svg { width: 16px; height: 16px; }

.bp-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.bp-body { color: var(--grey-deep); font-size: 1.05rem; line-height: 1.75; max-width: 68ch; }
.bp-body p { margin: 0 0 1.3rem; }
.bp-body > p:first-child { font-size: 1.16rem; color: var(--ink); }
.bp-back { margin-top: 1.6rem !important; }

.bp-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 100px; }
.bp-widget { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.4rem; }
.bp-widget-h { font: 640 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin: 0 0 1rem; }
.bp-search { display: flex; gap: 8px; }
.bp-search input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 100px; padding: 9px 15px; font: 500 0.9rem var(--sans); }
.bp-search input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.bp-search button { flex: none; width: 40px; border: none; border-radius: 50%; background: var(--red); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bp-search button svg { width: 18px; height: 18px; }
.bp-taglist { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-tag { font-size: 0.82rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 100px; padding: 6px 13px; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.bp-tag:hover { background: var(--red); border-color: var(--red); color: #fff; }
.bp-recent { display: flex; flex-direction: column; gap: 14px; }
.bp-recent-item { display: flex; gap: 12px; text-decoration: none; align-items: center; }
.bp-recent-img { flex: none; width: 64px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--paper); }
.bp-recent-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-recent-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bp-recent-title { color: var(--ink); font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
.bp-recent-item:hover .bp-recent-title { color: var(--red); }
.bp-recent-date { color: var(--grey); font-size: 0.78rem; }

@media (max-width: 900px) {
  .bp-layout { grid-template-columns: 1fr; gap: 34px; }
  .bp-side { position: static; }
  .bp-body { max-width: none; }
}
@media (max-width: 560px) { .bp-share { margin-left: 0; width: 100%; } }

/* Home contact — icon list (mobile / email / address) */
.contact-list { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.contact-list-item { display: flex; gap: 15px; align-items: flex-start; }
.contact-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(107, 107, 107, 0.15); color: var(--red); display: inline-flex; align-items: center; justify-content: center; }
.contact-ic .aicon { width: 22px; height: 22px; }
.contact-list-text { display: flex; flex-direction: column; gap: 2px; color: var(--grey-deep); line-height: 1.55; min-width: 0; overflow-wrap: anywhere; }
.contact-label { font: 640 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }
.contact-list-text a { color: var(--ink); text-decoration: none; font-weight: 600; }
.contact-list-text a:hover { color: var(--red); }
.contact-list-text .contact-map { display: inline-block; margin-top: 6px; color: var(--red); font-size: 0.9rem; }
.contact-list-text .contact-map:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== CSR / Sustainability page ===== */
.csr-hero-goal { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 9px 18px 9px 13px; border-radius: 999px; background: rgba(227, 6, 19, 0.08); color: var(--ink); font-weight: 600; }
.csr-hero-goal .aicon { width: 22px; height: 22px; color: var(--red); }
.csr-hero-goal b { color: var(--red); }

.csr-commit { max-width: 68rem; }
.csr-commit-head .h-section { margin-bottom: 14px; }
.csr-commit .section-sub { font-size: 1.12rem; line-height: 1.7; color: var(--grey-deep); max-width: 62rem; }
.center-sub { max-width: 46rem; margin-left: auto; margin-right: auto; }
.soon-note { display: inline-flex; align-items: center; gap: 10px; color: var(--grey); }
.soon-note .aicon { width: 22px; height: 22px; color: var(--red); flex: none; }

/* Decarbonisation roadmap */
.roadmap { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; }
.roadmap::before { content: ""; position: absolute; top: 32px; left: 12.5%; right: 12.5%; height: 2px; background: linear-gradient(90deg, var(--line), var(--red)); z-index: 0; }
.roadmap-step { position: relative; z-index: 1; text-align: center; }
.roadmap-node { width: 64px; height: 64px; border-radius: 50%; background: var(--red); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--white); }
.roadmap-node .aicon { width: 30px; height: 30px; }
.roadmap-step--goal .roadmap-node { background: var(--ink); }
.roadmap-year { display: inline-block; margin-top: 16px; font: 700 0.86rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.roadmap-step--goal .roadmap-year { color: var(--ink); }
.roadmap-title { margin: 6px 0; font-size: 1.12rem; }
.roadmap-text { margin: 0; color: var(--grey-deep); font-size: 0.95rem; line-height: 1.55; }

/* Initiatives & programs */
.init-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 2.2rem; }
.init-card { display: flex; gap: 16px; align-items: flex-start; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.init-ic { flex: none; width: 52px; height: 52px; border-radius: 12px; background: rgba(107, 107, 107, 0.15); color: var(--red); display: inline-flex; align-items: center; justify-content: center; }
.init-ic .aicon { width: 26px; height: 26px; }
.init-title { margin: 2px 0 6px; font-size: 1.06rem; }
.init-text { margin: 0; color: var(--grey-deep); font-size: 0.95rem; line-height: 1.55; }

/* Image-card variant — initiatives with photos (Digitalization & Net Zero) */
.init-grid--media { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.init-card--media { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.init-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper); }
.init-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.init-card--media:hover .init-media img { transform: scale(1.05); }
.init-body { padding: 20px 22px 24px; }
@media (max-width: 900px) { .init-grid--media { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .init-grid--media { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .init-card--media:hover .init-media img { transform: none; } }

/* Impact & achievements */
.impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 2.2rem; }
.impact-tile { text-align: center; padding: 30px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; align-items: center; }
.impact-ic { width: 50px; height: 50px; border-radius: 50%; background: rgba(107, 107, 107, 0.15); color: var(--red); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.impact-ic .aicon { width: 26px; height: 26px; }
.impact-val { font: 800 2.1rem var(--sans); color: var(--ink); line-height: 1.05; }
.impact-unit { margin-top: 4px; font-size: 0.85rem; font-weight: 600; color: var(--red); }
.impact-label { margin-top: 8px; color: var(--grey-deep); font-size: 0.95rem; }

/* Certifications & recognitions */
.recognition-card { display: flex; gap: 22px; align-items: center; max-width: 64rem; margin: 2rem auto 0; padding: 30px 34px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 14px; }
.recognition-ic { flex: none; width: 66px; height: 66px; border-radius: 50%; background: rgba(107, 107, 107, 0.15); color: var(--red); display: inline-flex; align-items: center; justify-content: center; }
.recognition-ic .aicon { width: 34px; height: 34px; }
.recognition-badge { margin: 0 0 4px; font: 800 1.15rem var(--sans); color: var(--red); }
.recognition-text { margin: 0; color: var(--grey-deep); line-height: 1.55; }

@media (max-width: 900px) { .impact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .roadmap { grid-template-columns: 1fr; gap: 0; }
  .roadmap::before { left: 31px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: linear-gradient(180deg, var(--line), var(--red)); }
  .roadmap-step { text-align: left; display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; padding: 12px 0; }
  .roadmap-node { grid-column: 1; grid-row: 1 / 4; }
  .roadmap-year { grid-column: 2; grid-row: 1; margin-top: 4px; }
  .roadmap-title { grid-column: 2; grid-row: 2; }
  .roadmap-text { grid-column: 2; grid-row: 3; }
}
@media (max-width: 560px) {
  .impact-grid { grid-template-columns: 1fr; }
  .recognition-card { flex-direction: column; text-align: center; }
}

/* ===== Resource Centre hub ===== */
.anchor-sec { scroll-margin-top: 96px; }

/* Quick navigation */
.qnav-title { text-align: center; margin: 0 0 1.4rem; font: 640 12px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); }
.qnav { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; list-style: none; padding: 0; margin: 0; }
.qnav-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 22px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.92rem; line-height: 1.3; transition: border-color .2s, transform .2s, box-shadow .2s; }
.qnav-tile:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06); color: var(--red); }
.qnav-ic { width: 52px; height: 52px; border-radius: 50%; background: rgba(107, 107, 107, 0.15); color: var(--red); display: inline-flex; align-items: center; justify-content: center; }
.qnav-ic .aicon { width: 26px; height: 26px; }

/* Section header with a "View All" on the right */
.res-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 1.8rem; }
.res-head .h-section { margin-bottom: 6px; }
.res-head .section-sub { max-width: 62ch; }
.res-viewall { flex: none; white-space: nowrap; font-weight: 600; }

/* Card grid (featured / case studies / blogs) */
.res-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.res-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.res-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper); }
.res-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.res-card:hover .res-card-media img { transform: scale(1.05); }
.res-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.res-card-body h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.res-card-body p { margin: 0; color: var(--grey-deep); font-size: 0.95rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.res-card-body .link-arrow { margin-top: auto; padding-top: 4px; }
.res-tag { font: 640 11px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }

/* Testimonial cards */
.tst-card { display: flex; flex-direction: column; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 26px 26px 24px; }
.tst-mark { font-family: Georgia, "Times New Roman", serif; font-size: 3rem; line-height: 0.7; color: var(--red); height: 26px; }
.tst-card blockquote { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink); }
.tst-card--video { padding: 0; overflow: hidden; }
.tst-thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--charcoal); }
.tst-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; }
.tst-play { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; border-radius: 50%; background: rgba(227, 6, 19, 0.92); color: #fff; display: flex; align-items: center; justify-content: center; }
.tst-play svg { width: 26px; height: 26px; margin-left: 3px; }
.tst-card--video .tst-cap { padding: 18px 24px 22px; }
.tst-cap { display: flex; flex-direction: column; gap: 2px; }
.tst-cap b { color: var(--ink); }
.tst-cap span { color: var(--grey); font-size: 0.9rem; }

/* Download cards (catalogues / datasheets / press) */
.dl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dl-card { display: flex; flex-direction: column; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px; }
.dl-ic { width: 46px; height: 46px; border-radius: 10px; background: rgba(107, 107, 107, 0.15); color: var(--red); display: inline-flex; align-items: center; justify-content: center; }
.dl-ic .aicon { width: 24px; height: 24px; }
.dl-body { flex: 1; }
.dl-body h3 { margin: 0 0 6px; font-size: 1rem; line-height: 1.35; }
.dl-meta { margin: 0; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); }
.dl-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; color: var(--red); font-weight: 600; text-decoration: none; font-size: 0.92rem; }
.dl-btn .aicon { width: 18px; height: 18px; }
.dl-btn:hover { color: var(--ink); }

@media (max-width: 980px) {
  .qnav { grid-template-columns: repeat(3, 1fr); }
  .res-cards { grid-template-columns: repeat(2, 1fr); }
  .dl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .qnav { grid-template-columns: repeat(2, 1fr); }
  .res-cards { grid-template-columns: 1fr; }
  .dl-grid { grid-template-columns: 1fr; }
  .res-viewall { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .qnav-tile:hover { transform: none; }
  .res-card:hover .res-card-media img { transform: none; }
}

/* ===== Contact page — form left, "Reach out to us" panel right ===== */
.contact-layout { display: grid; grid-template-columns: 7fr 5fr; gap: 60px; align-items: start; }
.contact-col-h { font-size: 1.6rem; line-height: 1.2; margin: 0 0 8px; }
.contact-form-col .section-head { margin-bottom: 1.7rem; }
.contact-safety { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; font-size: 0.9rem; color: var(--grey); }
.contact-safety .aicon { width: 20px; height: 20px; color: var(--red); flex: none; }

.contact-info-col { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 34px 32px; }
.contact-info-col .contact-list { margin-top: 20px; }
.contact-follow { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
.contact-follow .contact-label { margin: 0 0 12px; }
.social-row { display: flex; gap: 12px; flex-wrap: wrap; }
.soc-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s, border-color .2s; }
.soc-btn svg { width: 20px; height: 20px; }
.soc-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.soc-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

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

/* Mission page — second hero intro line */
.mv-hero-note { margin: 0.9rem 0 0; color: var(--grey-deep); max-width: 56ch; line-height: 1.6; }

/* ===== Facilities — plant cards + certification chips ===== */
.plant-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plant-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.plant-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper); }
.plant-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.plant-card:hover .plant-media img { transform: scale(1.05); }
.plant-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; }
.plant-body h3 { margin: 0; font-size: 1.2rem; }
.plant-size, .plant-addr { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--grey-deep); font-size: 0.95rem; line-height: 1.5; }
.plant-size .aicon, .plant-addr .aicon { width: 20px; height: 20px; color: var(--red); flex: none; margin-top: 1px; }
.plant-size { font-weight: 600; color: var(--ink); }

.cert-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; margin-top: 1.9rem; }
.cert-logo { display: inline-flex; align-items: center; justify-content: center; height: 96px; padding: 0 26px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.cert-logo img { height: 62px; width: auto; display: block; }
.cert-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 1.5rem; }
.cert-chip { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; font-weight: 600; color: var(--ink); }
.cert-chip .aicon { width: 22px; height: 22px; color: var(--red); flex: none; }
@media (max-width: 560px) { .cert-logo { height: 78px; padding: 0 18px; } .cert-logo img { height: 48px; } }

@media (max-width: 900px) { .plant-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .plant-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .plant-card:hover .plant-media img { transform: none; } }

/* ===== Awards page ===== */
/* Recognition journey — text left, stat tiles right */
.recog-grid { display: grid; grid-template-columns: 0.82fr 1.5fr; gap: 46px; align-items: center; }
.recog-text { min-width: 0; }
.recog-text .h-section { margin-bottom: 1.1rem; }
.recog-text p { color: var(--grey-deep); line-height: 1.7; margin: 0 0 1rem; }
.recog-text p:last-child { margin-bottom: 0; }
.recog-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; min-width: 0; }
.recog-stat { text-align: center; padding: 24px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
/* Soft grey circular badge holding a two-tone (black + red) stat icon — "Foundation" style. */
.recog-stat .recog-stat-ic { width: 60px; height: 60px; border-radius: 50%; background: rgba(107, 107, 107, 0.15); color: var(--red); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 13px; }
.recog-stat-ic .sicon { width: 32px; height: 32px; }
.recog-stat b { display: block; font: 800 1.85rem var(--sans); color: var(--ink); line-height: 1; }
.recog-stat span { display: block; margin-top: 8px; color: var(--grey-deep); font-size: 0.83rem; line-height: 1.4; }

/* Awards timeline */
.aw-timeline { position: relative; max-width: 58rem; margin: 2.4rem auto 0; }
.aw-timeline::before { content: ""; position: absolute; top: 26px; bottom: 26px; left: 27px; width: 2px; background: var(--line); z-index: 0; }
.aw-row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
.aw-marker { display: flex; align-items: center; gap: 14px; align-self: start; position: relative; z-index: 1; }
.aw-node { width: 54px; height: 54px; border-radius: 50%; background: var(--red); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.aw-node .aicon { width: 26px; height: 26px; }
.aw-year-label { font: 800 1.25rem var(--sans); color: var(--ink); line-height: 1.2; }
.aw-items { padding-bottom: 34px; }
.aw-row:last-child .aw-items { padding-bottom: 0; }
.aw-item { margin: 0 0 12px; color: var(--ink); line-height: 1.55; padding: 16px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.aw-item:last-child { margin-bottom: 0; }
.aw-item--soon { color: var(--grey); font-style: italic; background: transparent; border-style: dashed; }
.aw-org { display: block; font-weight: 700; color: var(--ink); }
.aw-note { display: block; margin-top: 3px; color: var(--grey-deep); font-size: 0.95rem; line-height: 1.5; }

/* Awards gallery */
.aw-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 2.2rem; }
.aw-tile { aspect-ratio: 4 / 3; border-radius: 14px; border: 1px dashed var(--grey); background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--grey); }
.aw-tile .aicon { width: 40px; height: 40px; }
.aw-tile span { font-size: 0.85rem; }
/* Real award/certificate photos — shown whole (no crop), open full-size on click. */
.aw-tile--img { aspect-ratio: 3 / 2; border: 1px solid var(--line); border-style: solid; background: #f7f6f4; padding: 8px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.aw-tile--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.aw-tile--img:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.12); }
@media (prefers-reduced-motion: reduce) { .aw-tile--img { transition: none; } .aw-tile--img:hover { transform: none; } }

@media (max-width: 860px) {
  .recog-grid { grid-template-columns: 1fr; gap: 32px; }
  .recog-stats { grid-template-columns: repeat(2, 1fr); }
  .aw-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .recog-stats { grid-template-columns: 1fr; }
  .aw-timeline::before { display: none; }
  .aw-row { grid-template-columns: 1fr; gap: 14px; }
  .aw-items { padding-bottom: 26px; }
  .aw-gallery { grid-template-columns: 1fr; }
}

/* ===== Home "What sets WIPE hotwire apart" — hover-reveal cards ===== */
.why-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: stretch; }
.why-media { border-radius: 18px; overflow: hidden; background: var(--paper); min-height: 320px; min-width: 0; }
.why-right { min-width: 0; }
.why-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-right .section-sub { margin-bottom: 0; }
.why-video { max-width: 820px; margin: 2rem auto 2.4rem; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.12); }
.why-video video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.why-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 0; }
.why-card { position: relative; overflow: hidden; min-height: 152px; padding: 24px 22px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: 12px; }
.why-card-ic { width: 48px; height: 48px; border-radius: 12px; background: rgba(107, 107, 107, 0.15); color: var(--red); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.why-card-ic .aicon { width: 26px; height: 26px; }
.why-card-title { margin: 0; font-size: 1.02rem; line-height: 1.32; }
.why-card-desc { margin: 0; color: var(--grey-deep); font-size: 0.9rem; line-height: 1.55; }

/* Devices that can hover: show only the heading, reveal the description on hover / focus */
@media (hover: hover) {
  .why-card { transition: border-color .25s ease, box-shadow .25s ease; }
  .why-card:hover, .why-card:focus-visible { border-color: var(--red); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); }
  .why-card:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
  .why-card-desc {
    position: absolute; inset: 0; margin: 0; padding: 26px 24px;
    background: var(--red); color: #fff; font-size: 0.92rem; line-height: 1.55;
    display: flex; align-items: center;
    opacity: 0; transform: translateY(10px);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
  }
  .why-card:hover .why-card-desc,
  .why-card:focus-visible .why-card-desc,
  .why-card:focus-within .why-card-desc { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .why-card-desc { transition: none; } }
@media (max-width: 900px) { .why-layout { grid-template-columns: 1fr; gap: 30px; } .why-media { width: 100%; min-height: 0; aspect-ratio: 16 / 9; } }
@media (max-width: 1024px) { .why-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .why-cards { grid-template-columns: 1fr; } .why-card { min-height: 0; } }

/* ================================================================
   ELECTRIC UNDERFLOOR HEATING — bespoke landing (uf-*)
   ================================================================ */

/* Meta description under the hero banner */
.uf-intro .lead { color: var(--grey-deep); }
.uf-intro .lead + .lead { margin-top: 1rem; }

/* Shared arrow "view all" link */
.uf-link { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-weight: 600; font-size: 0.92rem; text-decoration: none; white-space: nowrap; }
.uf-link .aicon { width: 17px; height: 17px; transition: transform 0.2s ease; }
.uf-link:hover { text-decoration: underline; }
.uf-link:hover .aicon { transform: translateX(3px); }

/* 2 — Types of Heating Solutions: four solution tiles */
.uf-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 1.9rem; }
.uf-type {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.uf-type:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09); }
.uf-type:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.uf-type-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper); }
.uf-type-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.uf-type:hover .uf-type-media img { transform: scale(1.05); }
.uf-type-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.15rem 1.2rem 1.3rem; flex: 1; }
.uf-type-title { font-family: var(--serif); font-weight: 700; font-size: 1.08rem; line-height: 1.25; color: var(--ink); }
.uf-type-desc { font-size: 0.9rem; color: var(--grey-deep); line-height: 1.5; }
.uf-type-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-weight: 600; font-size: 0.9rem; }
.uf-type-cta .aicon { width: 17px; height: 17px; transition: transform 0.2s ease; }
.uf-type:hover .uf-type-cta .aicon { transform: translateX(4px); }

/* 5 — Case study */
.uf-case { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; margin-top: 0.4rem; }
.uf-case-media { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper); }
.uf-case-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uf-case-body { min-width: 0; }
.uf-case-tag { display: inline-block; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.76rem; font-weight: 700; color: var(--red); margin-bottom: 0.7rem; }
.uf-case-body h3 { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.2; }
.uf-case-body > p { margin: 0.9rem 0 0; color: var(--grey-deep); line-height: 1.65; }
.uf-case-stats { list-style: none; padding: 0; margin: 1.4rem 0; display: flex; flex-wrap: wrap; gap: 12px; }
.uf-case-stats li { flex: 1; min-width: 120px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.uf-case-stats b { display: block; font-family: var(--serif); font-size: 1.22rem; color: var(--ink); }
.uf-case-stats span { font-size: 0.8rem; color: var(--grey); }
.uf-case-also { font-size: 0.82rem; color: var(--grey); margin: 0 0 1.4rem; line-height: 1.6; }

/* 6 — Trusted across markets: country flags (centered flex so any count balances) */
.uf-markets { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 22px; margin-top: 1.9rem; }
.uf-market { margin: 0; width: clamp(130px, 30%, 152px); }
.uf-market-flag { display: block; width: 100%; max-width: 148px; margin: 0 auto; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--white); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }
.uf-market-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uf-market figcaption { text-align: center; margin-top: 0.7rem; font-weight: 600; font-size: 0.9rem; color: var(--ink); }

/* 7 — Segment-relevant resource columns */
.uf-res-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 1.9rem; }
.uf-res-col { display: flex; flex-direction: column; }
.uf-res-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 0.7rem; border-bottom: 2px solid var(--ink); margin-bottom: 0.3rem; }
.uf-res-head h3 { font-family: var(--serif); font-size: 1.15rem; }
.uf-res-item { display: flex; gap: 14px; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.uf-res-item:hover .uf-res-title { color: var(--red); }
.uf-res-item:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.uf-res-thumb { flex: 0 0 76px; width: 76px; height: 58px; border-radius: 8px; overflow: hidden; background: var(--paper); }
.uf-res-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uf-res-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.uf-res-kicker { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.68rem; font-weight: 700; color: var(--grey); }
.uf-res-title { font-family: var(--serif); font-weight: 700; font-size: 0.98rem; line-height: 1.25; color: var(--ink); }
.uf-res-meta { font-size: 0.78rem; color: var(--grey); }

/* 8 — FAQ (left) + Ask-an-expert CTA (right) */
.uf-faq-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 40px; align-items: start; }
.uf-faq-layout--center { display: block; max-width: 860px; margin: 0 auto; }
/* Related-products 4-up scroller (shows 4 at a time; scroll/swipe for the rest) */
.awm-rel-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.awm-rel-track > .uf-type { scroll-snap-align: start; }
@media (max-width: 900px) { .awm-rel-track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 560px) { .awm-rel-track { grid-auto-columns: 82%; } }
.uf-faq-main { min-width: 0; }
.uf-faq-cta { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 2rem 1.8rem; text-align: center; position: sticky; top: 100px; }
.uf-faq-cta h3 { font-family: var(--serif); font-size: 1.4rem; }
.uf-faq-cta p { margin: 0.6rem 0 1.4rem; color: var(--grey-deep); }

@media (max-width: 980px) {
  .uf-types { grid-template-columns: repeat(2, 1fr); }
  .uf-case { grid-template-columns: 1fr; gap: 24px; }
  .uf-res-cols { grid-template-columns: 1fr; gap: 34px; }
  .uf-faq-layout { grid-template-columns: 1fr; gap: 28px; }
  .uf-faq-cta { position: static; }
}
@media (max-width: 520px) {
  .uf-types { grid-template-columns: 1fr; }
  .uf-markets { gap: 18px 14px; }
  .uf-case-stats li { min-width: calc(50% - 6px); }
}
@media (prefers-reduced-motion: reduce) {
  .uf-type:hover .uf-type-media img { transform: none; }
  .uf-type-cta .aicon, .uf-link .aicon { transition: none; }
}

/* ================================================================
   PRODUCT PAGE (prod-*)
   ================================================================ */
.prod-kicker { display: inline-block; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 700; color: var(--red); margin-bottom: 0.55rem; }

/* Action band + certification image icons */
.prod-action-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 1.5rem; }
.prod-certs-label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 700; color: var(--grey); margin: 2.6rem 0 1.1rem; }
.prod-certs { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
/* Product certifications as a rolling sticker that loops (like the home cert marquee) */
.prod-certs-mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.prod-certs-track { display: flex; align-items: stretch; width: max-content; gap: 16px; padding: 4px 2px; animation: certScroll 60s linear infinite; }
.prod-certs-mq:hover .prod-certs-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .prod-certs-mq { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .prod-certs-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .prod-certs-track .prod-cert[aria-hidden] { display: none; }
}
.prod-cert { width: 134px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 16px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.prod-cert-ic { height: 46px; display: flex; align-items: center; justify-content: center; }
.prod-cert-ic img { height: 44px; width: auto; max-width: 112px; }
.prod-cert-ic .aicon { width: 38px; height: 38px; color: var(--red); }
.prod-cert-tx { font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--grey-deep); }

/* Details: overview + feature / application lists */
.prod-detail-grid { display: flex; flex-direction: column; gap: 2.6rem; }
.prod-overview { max-width: none; }
.prod-overview .h-block { margin-bottom: 1rem; }
.prod-overview p { color: var(--ink-soft); }
/* Headings/sub-text span full width, aligned with the table below (product page) */
#spec-h, #dim-h { max-width: none; }
#specs .section-sub { max-width: none; }
.prod-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 48px; }
.prod-list-block h3 { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 1.16rem; margin-bottom: 1rem; }
.prod-list-block h3 .aicon { width: 22px; height: 22px; color: var(--red); flex: none; }
/* Applications (image-cards) heading — same font + icon style as the Key Features heading */
.prod-block-h { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 1.16rem; font-weight: 580; margin: 0; }
.prod-block-h .aicon { width: 22px; height: 22px; color: var(--red); flex: none; }
.tick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.tick-list li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.tick-list li::before { content: ""; position: absolute; left: 4px; top: 3px; width: 12px; height: 7px; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(-45deg); }
.tick-list--dot li::before { border: 0; left: 4px; top: 7px; width: 7px; height: 7px; background: var(--ink); transform: rotate(45deg); }

/* Technical specifications card */
.prod-spec-card { border: 1px solid var(--line); background: var(--white); border-radius: 14px; overflow: hidden; margin-top: 0.4rem; }
/* Two-part spec layout (Construction + Technical Data): a label above each table */
.prod-spec-card + .prod-spec-card { margin-top: 1.5rem; }
.spec-group-title { margin: 0; padding: 0.85rem 20px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--red); background: var(--paper, #f6f4f1); border-bottom: 1px solid var(--line); }
/* Construction / Technical Specifications — clickable tabs within the section */
.spec-tablist { display: flex; flex-wrap: wrap; gap: 0.3rem; border-bottom: 2px solid var(--line); margin-bottom: 1.4rem; }
.spec-tab { appearance: none; border: 0; background: none; font: inherit; font-weight: 600; font-size: 0.98rem; color: var(--grey-deep); padding: 0.75rem 1.4rem; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: 6px 6px 0 0; transition: color .15s, border-color .15s, background .15s; }
.spec-tab:hover { color: var(--ink); background: rgba(0,0,0,0.035); }
.spec-tab.is-active { color: var(--red); border-bottom-color: var(--red); }
.spec-tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.spec-panel[hidden] { display: none; }
.spec-panel .feat-ic-list--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 48px; }
@media (max-width: 640px) { .spec-panel .feat-ic-list--cols { grid-template-columns: 1fr; } }

/* Region toggle (North America / Europe & Australia) above Features & Specifications */
.region-toggle { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.region-toggle-lbl { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.region-btns { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: #fff; overflow: hidden; }
.region-btn { appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; font-weight: 600; font-size: 0.92rem; line-height: 1; color: var(--grey-deep); padding: 0.6rem 1.25rem; cursor: pointer; transition: background .15s, color .15s; }
.region-btn + .region-btn { border-left: 1px solid var(--line); }
.region-btn:hover { background: rgba(0, 0, 0, 0.04); color: var(--ink); }
.region-btn.is-active { background: var(--red); color: #fff; }
.region-btn.is-active:hover { background: var(--red-dark); color: #fff; }
.region-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.rgn-pane[hidden] { display: none; }
/* Thank-You page (post-submission landing). */
.ty-wrap { max-width: 640px; }
.ty-check { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 50%; background: rgba(107, 107, 107, 0.15); color: var(--red); margin: 0 auto 1.2rem; }
.ty-check .aicon { width: 32px; height: 32px; }
.ty-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 1.6rem; }

@media (max-width: 760px) { .prod-lists { grid-template-columns: 1fr; gap: 28px; } }
/* When Applications render as their own image section (app_images), the lone Key
   Features block spans full width with its list laid out in two columns. */
.prod-lists--wide { grid-template-columns: 1fr; }
.prod-lists--wide .feat-ic-list { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 44px; }
@media (max-width: 640px) { .prod-lists--wide .feat-ic-list { grid-template-columns: 1fr; } }

/* Applications shown as image cards (product pages with app_images) */
.app-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 16px; }
.app-img-card { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.05); }
.app-img-media { display: block; aspect-ratio: 16 / 9; background: var(--paper); border-bottom: 3px solid var(--red); overflow: hidden; }
.app-img-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-img-media--ph { display: grid; place-items: center; }
.app-img-media--ph .aicon { width: 34px; height: 34px; color: var(--red); }
.app-img-card figcaption { padding: 0.7rem 0.9rem; font-weight: 600; color: var(--ink); font-size: 0.9rem; line-height: 1.32; }

/* Facilities — "Conductor to connector, in-house" capability tiles */
.h-section.cap-h { max-width: none; }   /* keep the header on one line (override 24ch clamp) */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 1.9rem; }
.cap-tile { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 1.55rem 1.5rem 1.65rem; }
.cap-ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: rgba(107, 107, 107, 0.15); color: var(--red); margin-bottom: 1rem; }
.cap-ic .aicon { width: 28px; height: 28px; }
.cap-tile h3 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.cap-tile p { margin: 0; color: var(--grey-deep); font-size: 0.92rem; line-height: 1.6; }
@media (max-width: 900px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cap-grid { grid-template-columns: 1fr; } }

/* Product dimensional-data table (wide → horizontally scrollable) */
.dim-table-wrap { margin-top: 1.6rem; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.dim-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 800px; }
.dim-table thead th { background: var(--charcoal); color: #fff; font-weight: 600; font-size: 11px; line-height: 1.3; padding: 10px; text-align: center; vertical-align: bottom; }
.dim-table td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--line-soft); white-space: nowrap; color: var(--ink); }
.dim-table tbody tr:nth-child(even) { background: var(--paper); }
.dim-table tbody tr:hover { background: rgba(227, 6, 19, 0.05); }
.dim-table td:first-child { font-weight: 700; }
.dim-note { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--grey); font-style: italic; }
.dim-downloads { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.dim-dl { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--red); text-decoration: none; }
.dim-dl .aicon { width: 18px; height: 18px; }
.dim-dl:hover { text-decoration: underline; }

/* Product hero (reference layout) — stacked breadcrumb kicker · title · sub-header,
   then a full-bleed cable image on white, then the CTAs. No text over the cable. */
.prod-hero2 { background: #fff; padding-top: clamp(1.4rem, 3.5vw, 2.6rem); }
/* breadcrumb rendered as a compact red-accent kicker (leaf in red) */
.prod-hero2 .crumbs { margin-bottom: 0; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 700; }
.prod-hero2 .crumbs li + li::before { color: rgba(0,0,0,0.22); }
.prod-hero2 .crumbs a { color: var(--grey); }
.prod-hero2 .crumbs a:hover { color: var(--red); }
.prod-hero2 .crumbs [aria-current] { color: var(--red); font-weight: 700; }
.prod-hero2-title { font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.04; margin: 1.5rem 0 0; letter-spacing: -0.01em; }
.prod-hero2-sub { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--ink-soft); margin: 1rem 0 0; max-width: 62ch; }
.prod-hero2-media { margin: clamp(1.2rem, 3vw, 2.2rem) 0; }

/* ---- Brand accent: a red line under content images, applied site-wide.
   Targets banners + feature/card images only (never logos, icons, flags, cert
   badges or avatars). Same treatment as the Product Portfolio cards. ---- */
.prod-hero2-media,
.seg-card-media,
.about-hero-media,
.feat-blog-media,
.blog-card-media,
.init-media,
.res-card-media,
.uf-type-media,
.leader-card-photo,
.plant-media,
.cs-case-media {
  border-bottom: 4px solid var(--red);
}
/* Non-anchored banner (product/segment photo): consistent full-bleed cover height. */
.prod-hero2-media > img { display: block; width: 100%; height: clamp(240px, 22vw, 320px); object-fit: cover; object-position: center; }
/* Composed wide banner (3300×494, sheath extended far left so it always bleeds off the
   corner). The image is anchored to the .shell so the printed cable logo sits directly
   under the nav logo at every width. height:20vw ⇒ image ~134vw wide; margin-left =
   -(logo-mark x 968 / img-height 494 × 20vw) = -39.19vw drops the printed logo onto the
   shell's left content edge = the nav logo; the extended sheath fills off to the corner. */
.prod-hero2-media--banner { overflow: hidden; }
.prod-hero2-cable { display: block; height: 20vw; width: auto; max-width: none; margin-left: var(--cable-shift, -39.19vw); }

/* ---- Overlay hero (Process Automation): breadcrumb above; title/sub/CTAs sit over
   the left of the banner with a dark left→right scrim for legibility. ---- */
.prod-hero2--overlay .prod-hero2-media--overlay {
  position: relative; overflow: hidden;
  margin-top: clamp(0.8rem, 2vw, 1.4rem);
  min-height: clamp(400px, 32vw, 480px);
}
.prod-hero2--overlay .prod-hero2-media--overlay img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; aspect-ratio: auto; max-height: none;
}
.prod-hero2-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(10,10,12,0.82) 0%, rgba(10,10,12,0.62) 34%, rgba(10,10,12,0.2) 66%, rgba(10,10,12,0) 100%);
}
.prod-hero2-overtext { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; }
.prod-hero2-overtext .shell { width: 100%; }
.prod-hero2-overtext-in { max-width: 600px; }
.prod-hero2--overlay .prod-hero2-overtext-in .prod-hero2-title { color: #fff; margin: 0; }
.prod-hero2--overlay .prod-hero2-overtext-in .prod-hero2-sub { color: rgba(255,255,255,0.92); margin: 1rem 0 0; max-width: 44ch; }
.prod-hero2--overlay .prod-hero2-cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 14px; }
.prod-hero2--overlay .btn--outline-red { border-color: rgba(255,255,255,0.75); color: #fff; background: transparent; }
.prod-hero2--overlay .btn--outline-red:hover { border-color: #fff; background: rgba(255,255,255,0.14); }
@media (max-width: 720px) {
  .prod-hero2--overlay .prod-hero2-media--overlay { min-height: 420px; }
  .prod-hero2-scrim { background: linear-gradient(180deg, rgba(10,10,12,0.28) 0%, rgba(10,10,12,0.5) 46%, rgba(10,10,12,0.82) 100%); }
  .prod-hero2-overtext { align-items: flex-end; }
  .prod-hero2-overtext-in { max-width: none; padding-bottom: 6px; }
}
/* Home hero carousel — each slide is a full-bleed overlay banner (reuses .prod-hero2--overlay).
   Zero the banner's own padding/margin so it fills the slide edge-to-edge, plus a red base bar. */
.hero .hero-slide.prod-hero2--overlay { padding: 0; }
.hero .prod-hero2-media--overlay { margin: 0; }
.hero .prod-hero2-media--overlay::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--red); z-index: 3; }
.hero .prod-hero2-media--overlay video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* 'fit' banner — product photo shown whole on white, no cover-crop, at any width. */
.prod-hero2-media--fit { background: #fff; }
.prod-hero2-media.prod-hero2-media--fit > img { width: 100%; height: clamp(200px, 26vw, 360px); object-fit: contain; object-position: center; }
.prod-hero2-cta { display: flex; flex-wrap: wrap; gap: 14px; padding-bottom: clamp(1.4rem, 3.5vw, 2.6rem); }
.prod-hero2-cta .btn .aicon { width: 17px; height: 17px; }
.btn--outline-red { background: #fff; border-color: var(--red); color: var(--red); }
.btn--outline-red:hover { background: var(--red); color: #fff; border-color: var(--red); }
@media (max-width: 640px) {
  .prod-hero2-media > img { height: 150px; object-position: 60% center; }
  /* mobile: nav logo is tiny — show the cable full-width (cores visible), skip anchoring */
  .prod-hero2-media--banner .shell { max-width: none; padding: 0; }
  .prod-hero2-cable { height: 150px; width: 100%; margin-left: 0; object-fit: cover; object-position: 80% center; }
  .prod-hero2-cta .btn { flex: 1 1 auto; }
}
/* Responsive banner text — long tokens never overflow; title/sub reflow at
   tablet (768) and mobile (480). The heading block sits above the full-bleed
   banner <img>, so text is never cropped by the image. */
.prod-hero2-title, .prod-hero2-sub { overflow-wrap: anywhere; }
.prod-hero2 .shell { max-width: min(1180px, 100%); }
@media (max-width: 768px) {
  .prod-hero2-sub { max-width: 100%; }
}
@media (max-width: 480px) {
  .prod-hero2-title { font-size: clamp(1.5rem, 7.5vw, 2.05rem); }
  .prod-hero2-sub { font-size: 1rem; }
}

/* Key Features / Applications — relevant icon per pointer (product page) */
.feat-ic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.feat-ic-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
/* Applications rendered as a full-width, multi-column icon list (icons only, no images) */
.feat-ic-list.app-ic-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 14px 44px; }
@media (max-width: 560px) { .feat-ic-list.app-ic-list { grid-template-columns: 1fr; } }

/* Click-to-play video facade — self-hosted poster + play button on load; the YouTube
   (youtube-nocookie) iframe is injected by JS only when the visitor clicks Play. */
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.video-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-play::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.28); transition: background 0.2s; }
.video-play:hover::after { background: rgba(0, 0, 0, 0.12); }
.video-play-ic { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45)); transition: transform 0.15s; }
.video-play:hover .video-play-ic { transform: translate(-50%, -50%) scale(1.08); }
.video-play:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.feat-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(107, 107, 107, 0.15); color: var(--red); margin-top: 1px; }
.feat-ic .aicon { width: 19px; height: 19px; }

/* Long-form SEO prose in the product-page footer zone (renders only when a
   product defines 'seo_footer'). Muted, narrower measure, separated by a rule. */
.prod-seo-footer { padding-top: 8px; }
.prod-seo-footer .shell--narrow { border-top: 1px solid var(--line); padding-top: 32px; }
/* Plain variant — no divider line; balanced top/bottom padding so the block sits evenly (not top-jammed). */
.prod-seo-footer--plain { padding-top: 4.25rem; }
.prod-seo-footer--plain .shell--narrow { border-top: 0; padding-top: 0; }
@media (max-width: 900px) { .prod-seo-footer--plain { padding-top: 3.3rem; } }
.prod-seo-footer p { color: var(--grey-deep); font-size: 0.92rem; line-height: 1.75; margin: 0 0 1rem; }
.prod-seo-footer p:last-child { margin-bottom: 0; }

/* Certifications & Standards — static "listed down" set shown on Process
   Automation product pages instead of the scrolling badge marquee. */
.cert-list { list-style: none; margin: 0 auto; padding: 0; max-width: 620px; }
.cert-list li { display: flex; align-items: center; gap: 14px; padding: 15px 6px; border-top: 1px solid var(--line); }
.cert-list li:first-child { border-top: 0; }
.cert-list-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(107, 107, 107, 0.15); color: var(--red); }
.cert-list-ic .aicon { width: 19px; height: 19px; }
.cert-list-tx { font-size: 1.02rem; font-weight: 500; color: var(--ink); }
/* Certification logo strip (images from the Certifications media tab, shown in a row). */
.cert-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(22px, 4vw, 52px); }
.cert-logo-item { display: inline-flex; align-items: center; }
.cert-logo-item img { display: block; height: 68px; width: auto; max-width: 160px; object-fit: contain; }
@media (max-width: 560px) { .cert-logo-row { gap: 26px; } .cert-logo-item img { height: 52px; } }

/* ---- Collection landing pages (Indoor/Outdoor Underfloor, Specialty) ---- */
.coll-hero-certs { margin-top: 16px; font-size: 0.98rem; color: var(--grey-deep); }
.coll-hero-certs span { font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; margin-right: 8px; }
.coll-hero-cta { margin-top: 22px; }
.coll-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 24px; margin-top: 1.7rem; }
.coll-card { position: relative; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 14px; padding: 1.7rem 1.8rem 1.6rem; display: flex; flex-direction: column; }
.coll-card-num { position: absolute; top: -15px; left: 1.7rem; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; }
.coll-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: .5rem 0 .6rem; line-height: 1.25; }
.coll-card-desc { color: var(--ink-soft); font-size: .98rem; line-height: 1.55; margin: 0 0 1.1rem; }
.coll-card-feats { list-style: none; margin: 0 0 1.3rem; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.coll-card-feats li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-soft); font-size: .95rem; line-height: 1.45; }
.coll-chk { width: 19px; height: 19px; color: var(--red); flex: none; margin-top: 1px; }
.coll-card-link { margin-top: auto; align-self: flex-start; }
.coll-standards { text-align: center; font-size: 1.06rem; line-height: 1.95; color: var(--ink); font-weight: 500; max-width: 780px; margin: 0 auto; }
.coll-downloads { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; }
.coll-downloads li { border-top: 1px solid var(--line); }
.coll-downloads li:first-child { border-top: 0; }
.coll-downloads a { display: flex; align-items: center; gap: 12px; padding: 14px 6px; color: var(--ink); font-weight: 500; text-decoration: none; }
.coll-downloads a:hover { color: var(--red); }
.coll-downloads .aicon { width: 20px; height: 20px; color: var(--red); flex: none; }
.coll-help { text-align: center; }
.coll-help .section-intro { margin: 12px auto 0; }
.coll-help-cta { margin-top: 22px; }
.coll-res-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 1.6rem; }
.coll-res-col { display: flex; flex-direction: column; border-top: 2px solid var(--ink); padding-top: 1rem; }
.coll-res-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 .5rem; }
.coll-res-desc { color: var(--ink-soft); font-size: .96rem; line-height: 1.55; margin: 0 0 1rem; flex: 1 1 auto; }
@media (max-width: 720px) { .coll-grid { grid-template-columns: 1fr; } .coll-res-cols { grid-template-columns: 1fr; } }

/* ============ Job opening detail page (job.php — Template 12) ============ */
.jobs-title-link { color: var(--ink); text-decoration: none; }
.jobs-title-link:hover { color: var(--red); }
.jobs-title-link strong { font-weight: 700; }
/* Hero */
.job-hero { background: var(--paper, #f5f4f2); border-bottom: 1px solid var(--line); }
.job-hero-in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 30px 0 0; }
.job-hero-text { padding: 24px 0 44px; }
.job-hero-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; color: var(--red); margin: 8px 0 12px; }
.job-hero-title { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; margin: 0 0 14px; }
.job-hero-meta { color: var(--grey-deep); font-size: 1rem; margin: 0 0 26px; }
.job-hero-media { align-self: stretch; }
.job-hero-media img { width: 100%; height: 100%; min-height: 300px; max-height: 460px; object-fit: cover; border-radius: 14px 14px 0 0; display: block; }
/* Block titles */
.job-blocktitle { text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; font-weight: 700; color: var(--ink); border-left: 3px solid var(--red); padding-left: 12px; margin: 0 0 1.4rem; }
/* Job information grid */
.job-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 30px; }
.job-info { display: flex; gap: 13px; align-items: flex-start; }
.job-info-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(107, 107, 107, 0.15); color: var(--red); }
.job-info-ic .aicon { width: 22px; height: 22px; }
.job-info-label { display: block; font-size: .82rem; color: var(--grey); margin-bottom: 3px; }
.job-info-value { display: block; font-weight: 600; color: var(--ink); font-size: .96rem; line-height: 1.35; }
/* Prose + bulleted lists (red markers) */
.job-prose p { color: var(--ink-soft); line-height: 1.75; margin: 0 0 1rem; }
.job-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.job-bullets li { position: relative; padding-left: 20px; color: var(--ink-soft); font-size: .97rem; line-height: 1.55; }
.job-bullets li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
/* Skills — 3 columns */
.job-skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.job-skillcol { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 12px; padding: 1.5rem 1.6rem 1.7rem; }
.job-skillcol h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--ink); margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.job-skillcol h3 span { color: var(--grey); font-weight: 500; text-transform: none; letter-spacing: 0; }
/* What we offer — 5 cards */
.job-offers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin-top: 1.6rem; }
.job-offer { text-align: center; padding: 4px; }
.job-offer-ic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(107, 107, 107, 0.15); color: var(--red); margin-bottom: 14px; }
.job-offer-ic .aicon { width: 28px; height: 28px; }
.job-offer h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; line-height: 1.25; }
.job-offer p { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; margin: 0; }
/* Apply form tweaks */
.jobform .field-opt { color: var(--grey); font-weight: 500; }
.jobform input[type="file"] { padding: 10px 12px; background: #fff; border: 1px dashed var(--line); border-radius: 8px; width: 100%; font-size: .9rem; cursor: pointer; }
.jobform select { width: 100%; }
/* Other open positions */
.job-other-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 1.6rem; }
.job-other-head .h-section { margin: 0; }
.job-other-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.job-other { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem 1.5rem; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.job-other:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.1); }
.job-other-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(227,6,19,.08); color: var(--red); margin-bottom: 12px; }
.job-other-ic .aicon { width: 22px; height: 22px; }
.job-other h3 { font-size: 1.02rem; font-weight: 700; color: var(--ink); margin: 0 0 .8rem; line-height: 1.25; }
.job-other p { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--grey-deep); margin: 0 0 .5rem; }
.job-other p .aicon { width: 16px; height: 16px; color: var(--red); flex: none; }
.job-other .link-arrow { margin-top: auto; padding-top: .7rem; }
@media (max-width: 900px) {
  .job-info-grid { grid-template-columns: repeat(2, 1fr); }
  .job-skills { grid-template-columns: 1fr; gap: 24px; }
  .job-offers { grid-template-columns: repeat(2, 1fr); }
  .job-other-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .job-hero-in { grid-template-columns: 1fr; padding-top: 10px; }
  .job-hero-media { display: none; }
  .job-hero-text { padding-bottom: 32px; }
}

/* "Our Clients" home section — white background (overrides section--paper). */
/* "Our Clients" keeps the section--paper grey; the white override was dropped 2026-09-28. */

/* Job-application form labels in title case (not the uppercase default). */
.jobform .field label { text-transform: none; letter-spacing: normal; font-size: 13px; color: var(--ink-soft); }

/* Tighter vertical rhythm between job-detail sections (less empty space). */
.job-main > .section { padding-top: 2.3rem; padding-bottom: 2.3rem; }
.job-main > .section:first-child { padding-top: 2.7rem; }
.job-main .job-blocktitle { margin-bottom: 1.1rem; }

/* Our Global Reach — moving country-flag strip (reuses the .clients-slider auto-scroll). */
.reach-flags { margin-top: 2.4rem; }
.flag-chip { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 0 6px; }
.flag-chip img { height: 40px; width: auto; display: block; border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.flag-chip figcaption { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.reach-flags .client-sep { display: none; }

/* Home contact — three plant addresses stacked under the Address label. */
.contact-addresses { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.hp-addr { display: block; }
.hp-addr-label { display: block; font-weight: 700; color: var(--ink); font-size: 0.9rem; margin-bottom: 1px; }
.hp-addr-line { display: block; }
/* Map link on its own line, directly under the address. */
.hp-addr .contact-map { display: block; margin-top: 2px; }


/* --- Collection pages: product-card feature pointers, case studies, downloads (2026-09) --- */
.uf-type-points { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; }
.uf-type-point { position: relative; padding-left: 16px; font-size: 0.86rem; color: var(--grey-deep); line-height: 1.5; }
.uf-type-point::before { content: ""; position: absolute; left: 2px; top: 0.52em; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }

.uf-cases2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 1.6rem; }
.uf-case2 { border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px; background: var(--white); display: flex; flex-direction: column; gap: 10px; }
.uf-case2 h3 { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.25; }
.uf-case2 > p { margin: 0; color: var(--grey-deep); line-height: 1.6; flex: 1 1 auto; }
.uf-case2 .uf-link { align-self: flex-start; }
@media (max-width: 720px) { .uf-cases2 { grid-template-columns: 1fr; } }

.uf-downloads { list-style: none; padding: 0; margin: 1.6rem auto 0; max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.uf-downloads li { margin: 0; }
.uf-download { display: flex; align-items: center; gap: 14px; padding: 15px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.uf-download:hover { border-color: var(--red); box-shadow: 0 6px 16px rgba(227,6,19,.12); transform: translateY(-1px); }
.uf-download-ic, .uf-download-arrow { display: flex; color: var(--red); flex: none; }
.uf-download-arrow { opacity: .55; }
.uf-download-label { flex: 1; font-weight: 600; font-size: 0.95rem; }