/* ==========================================================================
   Altek Industrial Suppliers — site stylesheet
   Mobile first. No frameworks, no web fonts, no external requests.
   ========================================================================== */

/* --- Design tokens -------------------------------------------------------- */
:root {
  --navy-900: #071a30;
  --navy-800: #0b2545;
  --navy-700: #143a68;
  --blue-600: #1a5fb4;
  --blue-500: #2b7bd6;
  --blue-050: #eef4fc;

  --amber-600: #b8690b;
  --amber-500: #e08a1e;
  --amber-050: #fdf4e5;

  --ink:     #10202f;
  --body:    #46586b;
  --muted:   #6b7c8f;
  --line:    #e2e8f0;
  --surface: #f5f8fb;
  --white:   #ffffff;

  --ok:   #157347;
  --err:  #b42318;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;

  --sh-1: 0 1px 2px rgba(11, 37, 69, .06), 0 1px 3px rgba(11, 37, 69, .08);
  --sh-2: 0 4px 12px rgba(11, 37, 69, .08), 0 2px 4px rgba(11, 37, 69, .05);
  --sh-3: 0 18px 40px rgba(11, 37, 69, .14), 0 4px 12px rgba(11, 37, 69, .08);
  --sh-4: 0 28px 60px rgba(11, 37, 69, .18), 0 10px 24px rgba(11, 37, 69, .10);
  --sh-glow: 0 10px 30px rgba(224, 138, 30, .28);

  /* Motion. One place to retune the feel of the whole site. */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .16s;
  --t-mid: .28s;
  --t-slow: .6s;

  --wrap: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Several components below set an explicit `display`, which would otherwise
   beat the [hidden] attribute the scripts use to reveal progressive controls. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3.05rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }

p, ul, ol, dl, table, figure, address { margin-block: 0 1rem; }
p:last-child, ul:last-child { margin-bottom: 0; }
address { font-style: normal; }

a { color: var(--blue-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy-700); }

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

::selection { background: var(--amber-500); color: #fff; }

/* Slim, on-brand scrollbars where the browser allows it. */
* { scrollbar-width: thin; scrollbar-color: #c3d2e3 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #c3d2e3; border-radius: 10px; border: 3px solid #fff; }
*::-webkit-scrollbar-thumb:hover { background: #9fb4cb; }

/* --- Utilities ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.wrap.narrow { max-width: 820px; }

/* Grid and flex children default to min-width:auto, so one wide descendant
   (a fixed-width iframe, a legacy table) can push the whole page sideways. */
.slider__slide > *, .split > *, .card-grid > *, .tabs__panel > *,
.product-layout > *, .contact-layout > *, .enquiry-layout > *,
.footer-grid > *, .cta-band__inner > *, .feature-grid > * { min-width: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--amber-500); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

.muted { color: var(--muted); font-size: .925rem; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .09em; font-size: .78rem;
  font-weight: 700; color: var(--amber-600); margin-bottom: .6rem;
}
.lede { font-size: clamp(1.02rem, .98rem + .35vw, 1.18rem); color: var(--body); max-width: 62ch; }
.rounded { border-radius: var(--r-lg); box-shadow: var(--sh-2); }

.i { width: 1.05em; height: 1.05em; flex: none; fill: currentColor; }
.i--lg { width: 2rem; height: 2rem; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .68rem 1.25rem;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-weight: 650; font-size: .95rem; line-height: 1.25;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
/* Light sweeps across the button on hover. */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .38) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .55s var(--ease-out);
}
.btn:hover::before { transform: translateX(120%); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--lg { padding: .85rem 1.6rem; font-size: 1rem; }

.btn--accent {
  background: linear-gradient(135deg, var(--amber-500), var(--amber-600));
  color: #fff; box-shadow: var(--sh-1);
}
.btn--accent:hover {
  background: linear-gradient(135deg, #e9962b, var(--amber-600));
  color: #fff; transform: translateY(-2px); box-shadow: var(--sh-glow);
}

.btn--outline { background: transparent; color: var(--navy-800); border-color: var(--line); }
.btn--outline:hover { background: var(--blue-050); border-color: var(--blue-500); color: var(--navy-800); }

.btn--ghost { background: rgba(255, 255, 255, .1); color: var(--navy-800); border-color: rgba(11, 37, 69, .22); }
.btn--ghost:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

/* --- Top bar -------------------------------------------------------------- */
.topbar {
  background: var(--navy-900);
  color: #b9c9dc;
  font-size: .84rem;
}
.topbar__inner {
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem;
  align-items: center; justify-content: center;
  padding-block: .5rem;
}
.topbar__item { display: inline-flex; align-items: center; gap: .4rem; color: inherit; text-decoration: none; }
a.topbar__item:hover { color: #fff; }
@media (max-width: 640px) { .topbar__item--hide-sm { display: none; } }
@media (min-width: 800px) { .topbar__inner { justify-content: flex-end; } }

/* --- Header / navigation -------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .6rem; position: relative;
}

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand img { width: 52px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__text strong {
  font-size: 1.28rem; color: var(--navy-800); letter-spacing: -.02em; font-weight: 800;
}
.brand__text em {
  font-style: normal; font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--amber-600); font-weight: 700;
}

.nav-toggle {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; display: block; width: 20px; height: 2px;
  background: var(--navy-800); border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after  { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.nav {
  position: absolute; inset: 100% 0 auto 0;
  background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-3);
  max-height: calc(100vh - 120px); overflow-y: auto;
  display: none;
}
.nav.is-open { display: block; }
.nav__list { list-style: none; margin: 0; padding: .5rem clamp(1rem, 4vw, 2rem) 1.25rem; }
.nav__list > li { border-bottom: 1px solid var(--line); position: relative; }
.nav__list > li:last-child { border-bottom: 0; }
.nav__list a {
  display: block; padding: .8rem .2rem;
  color: var(--navy-800); font-weight: 600; text-decoration: none;
}
.nav__list a[aria-current] { color: var(--amber-600); }

.sub-toggle {
  position: absolute; right: 0; top: .35rem;
  width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer;
}
.sub-toggle::after {
  content: ""; display: block; width: 8px; height: 8px; margin-inline: auto;
  border-right: 2px solid var(--navy-700); border-bottom: 2px solid var(--navy-700);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.sub-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-3px, -3px); }

.nav__sub { list-style: none; margin: 0 0 .6rem; padding: 0 0 0 .9rem; display: none; }
.nav__sub.is-open { display: block; }
.nav__sub a { padding: .5rem .2rem; font-weight: 500; font-size: .94rem; color: var(--body); }
.nav__sub a:hover { color: var(--blue-600); }
.nav__cta { padding-top: .9rem; }
.nav__cta .btn { width: 100%; }

@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .nav {
    display: block; position: static; background: none; border: 0;
    box-shadow: none; max-height: none; overflow: visible;
  }
  .nav__list { display: flex; align-items: center; gap: .35rem; padding: 0; }
  .nav__list > li { border: 0; }
  .nav__list > li > a {
    padding: .55rem .85rem; border-radius: var(--r-sm); font-size: .95rem;
  }
  .nav__list > li > a:hover { background: var(--blue-050); }
  .nav__list a[aria-current]::after {
    content: ""; display: block; height: 2px; margin-top: 4px;
    background: var(--amber-500); border-radius: 2px;
  }
  .sub-toggle { display: none; }

  .has-sub > a::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-left: .45rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  .nav__sub {
    display: block; position: absolute; top: calc(100% + .4rem); left: 0;
    min-width: 300px; padding: .5rem; margin: 0;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--sh-3);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .has-sub:hover .nav__sub,
  .has-sub:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; }
  .nav__sub a { padding: .5rem .7rem; border-radius: var(--r-sm); }
  .nav__sub a:hover { background: var(--blue-050); }
  .nav__cta { padding: 0 0 0 .5rem; }
  .nav__cta .btn { width: auto; }
}

/* --- Breadcrumbs ---------------------------------------------------------- */
.crumbs { background: var(--surface); border-bottom: 1px solid var(--line); font-size: .87rem; }
.crumbs ol { list-style: none; margin: 0; padding: .7rem 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs li + li::before { content: "/"; color: var(--muted); margin-right: .4rem; }
.crumbs a { color: var(--body); text-decoration: none; }
.crumbs a:hover { color: var(--blue-600); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* --- Home slider ---------------------------------------------------------- */
/* Scroll-snap carousel: swipeable and fully usable with JavaScript disabled;
   the arrows and dots are revealed by site.js once it takes over. */
.slider {
  background: linear-gradient(170deg, var(--surface), #fff 70%);
  padding-block: clamp(1rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--line);
}
.slider__frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-3);
  background: var(--navy-800);
}
.slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slider__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .slider__track { scroll-behavior: auto; } }

.slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  min-width: 0;
  background: var(--navy-800);
}
/* The artwork is 975x250. Shown at its natural width but cropped to a usable
   height: left alone, a 3.9:1 strip is a 70px sliver on a phone. The box never
   grows past ~310px, so the 975px source is upscaled by at most ~15%. */
.slider__slide img {
  width: 100%; height: clamp(140px, 40vw, 190px);
  object-fit: cover; object-position: center; display: block;
}
@media (min-width: 760px) {
  .slider__slide img { height: clamp(250px, 24vw, 310px); }
}

.slider__caption {
  padding: 1.1rem 1.25rem 1.4rem;
  background: var(--navy-800);
  color: #cfe0f2;
}
.slider__eyebrow {
  margin: 0 0 .3rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber-500);
}
.slider__title {
  margin: 0 0 .35rem;
  font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.9rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #fff;
}
.slider__text { margin: 0 0 1rem; font-size: .92rem; max-width: 46ch; }
.slider__caption .btn { padding: .55rem 1.05rem; font-size: .88rem; }

/* From tablet up the caption sits over the image on a gradient scrim. */
@media (min-width: 760px) {
  .slider__caption {
    position: absolute; inset: 0; right: 40%;
    display: flex; flex-direction: column; justify-content: center;
    padding: 1.5rem clamp(1.5rem, 4vw, 3rem);
    background: linear-gradient(90deg,
      rgba(7, 26, 48, .95) 0%, rgba(7, 26, 48, .88) 55%, rgba(7, 26, 48, 0) 100%);
  }
  .slider__text { margin-bottom: 1.15rem; }
}
@media (min-width: 1040px) { .slider__caption { right: 46%; } }

.slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; padding: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .9); border: 0; border-radius: 50%;
  box-shadow: var(--sh-2); cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.slider__arrow:hover { background: #fff; }
.slider__arrow::after {
  content: ""; width: 10px; height: 10px;
  border-top: 2px solid var(--navy-800); border-right: 2px solid var(--navy-800);
}
.slider__arrow--prev { left: .6rem; }
.slider__arrow--prev::after { transform: translateX(2px) rotate(-135deg); }
.slider__arrow--next { right: .6rem; }
.slider__arrow--next::after { transform: translateX(-2px) rotate(45deg); }
/* Below the scrim breakpoint the caption sits under the image, so the arrows
   would cover the artwork; the track stays swipeable and the dots remain. */
@media (max-width: 759px) { .slider__arrow { display: none; } }

.slider__dots {
  position: absolute; left: 0; right: 0; bottom: .7rem;
  display: flex; justify-content: center; gap: .4rem;
}
.slider__dots button {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .45);
  transition: background-color .15s ease, width .15s ease;
}
.slider__dots button:hover { background: rgba(255, 255, 255, .75); }
.slider__dots button[aria-current] { background: var(--amber-500); width: 22px; border-radius: 5px; }
/* On small screens the caption is the bottom band of the frame, and it is dark
   navy, so the dots stay legible sitting over it. */
@media (max-width: 759px) { .slider__caption { padding-bottom: 2.2rem; } }

/* --- Intro ---------------------------------------------------------------- */
.intro { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.intro__inner { max-width: 780px; }
.intro h1 { margin-bottom: 1rem; }
.intro__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.intro__facts {
  list-style: none; padding: 1.5rem 0 0; margin: 2.25rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem;
  border-top: 1px solid var(--line);
}
.intro__facts strong { display: block; font-size: 1.35rem; color: var(--navy-800); line-height: 1.15; }
.intro__facts span { font-size: .84rem; color: var(--muted); }

/* Dealer authorisation and ISI mark — the credentials the old header carried. */
.credentials {
  list-style: none; padding: 1.5rem 0 0; margin: 1.75rem 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
}
.credentials img {
  width: auto; max-height: 46px;
  filter: saturate(.9);
  opacity: .92;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out);
}
.credentials li:first-child img { max-height: 58px; }
.credentials img:hover { opacity: 1; transform: translateY(-2px); }

/* --- Brand strip ---------------------------------------------------------- */
.strip { background: var(--navy-800); color: #cfe0f2; }
.strip__inner {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .6rem clamp(1.25rem, 4vw, 3rem); padding-block: 1rem;
}
.strip__brand {
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  font-size: .8rem; opacity: .85;
}

/* --- Sections ------------------------------------------------------------- */
.section { padding-block: clamp(2.75rem, 6vw, 4.75rem); }
.section--tint { background: var(--surface); border-block: 1px solid var(--line); }
.section__head { max-width: 62ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section__head h2 { margin-bottom: .6rem; }

.page-head {
  background: linear-gradient(165deg, var(--navy-800), var(--navy-900));
  color: #d6e3f2;
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
.page-head h1 { color: #fff; }
.page-head .lede { color: #b9cde4; margin-top: .85rem; }
.page-head .eyebrow { color: var(--amber-500); }
.page-head a { color: #fff; }
.page-head .btn { margin-top: 1.25rem; margin-right: .5rem; }

.split { display: grid; gap: var(--gap); align-items: center; }
.split h2 { margin-bottom: .9rem; }
@media (min-width: 860px) { .split { grid-template-columns: 1.1fr .9fr; } }

/* --- Product cards -------------------------------------------------------- */
.card-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.card-grid--wide { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.card {
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--sh-1);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease);
}
/* Accent rule that draws itself across the top of the card on hover. */
.card::after {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--amber-500), var(--blue-500));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
  z-index: 2;
}
.card:hover, .card:focus-within {
  transform: translateY(-6px); box-shadow: var(--sh-4); border-color: #c9d8ea;
}
.card:hover::after, .card:focus-within::after { transform: scaleX(1); }

.card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.card__media {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3; background: var(--surface); padding: 1rem;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.card__media img {
  max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply;
  transition: transform .5s var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.07); }
.card__body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem 1.2rem; flex: 1; }
.card__title { font-weight: 700; color: var(--ink); line-height: 1.3; }
.card__text { font-size: .88rem; color: var(--muted); }
.card__more {
  margin-top: auto; padding-top: .5rem;
  font-size: .85rem; font-weight: 650; color: var(--blue-600);
}
.card__more::after { content: " →"; }
.card:hover .card__more { color: var(--amber-600); }

/* --- Tabs ----------------------------------------------------------------- */
.tabs { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.tabs__list {
  display: flex; gap: .25rem; padding: .5rem;
  background: var(--white); border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: thin;
}
.tabs__list button {
  flex: none; padding: .6rem 1rem;
  background: transparent; border: 0; border-radius: var(--r-sm);
  font: inherit; font-size: .9rem; font-weight: 650; color: var(--body);
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.tabs__list button:hover { background: var(--blue-050); color: var(--navy-800); }
.tabs__list button[aria-selected="true"] { background: var(--navy-800); color: #fff; }

.tabs__panel { display: grid; gap: var(--gap); padding: clamp(1.25rem, 3vw, 2.25rem); }
.tabs__panel[hidden] { display: none; }
.tabs__media { display: grid; place-items: center; background: var(--surface); border-radius: var(--r-md); padding: 1.5rem; }
.tabs__media img { width: auto; max-height: 220px; object-fit: contain; mix-blend-mode: multiply; }
.tabs__body h3 { margin-bottom: 1rem; }
.tabs__body .btn { margin-top: 1.25rem; }
@media (min-width: 800px) { .tabs__panel { grid-template-columns: 320px 1fr; align-items: center; } }

/* --- Spec list ------------------------------------------------------------ */
.spec-list { margin: 0; display: grid; gap: .1rem; }
.spec-list > div {
  display: grid; gap: .15rem .9rem;
  padding: .55rem 0; border-bottom: 1px dashed var(--line);
}
.spec-list dt { font-weight: 650; color: var(--navy-800); font-size: .9rem; }
.spec-list dd { margin: 0; font-size: .94rem; }
@media (min-width: 560px) { .spec-list > div { grid-template-columns: 165px 1fr; } }

/* --- Feature grid --------------------------------------------------------- */
.feature-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.feature-grid li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.5rem 1.35rem; box-shadow: var(--sh-1);
}
.feature-grid .i { color: var(--amber-500); margin-bottom: .9rem; }
.feature-grid h3 { margin-bottom: .5rem; }
.feature-grid p { font-size: .93rem; margin: 0; }

/* --- CTA band ------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(120deg, var(--navy-800), var(--navy-700));
  color: #cfe0f2;
}
.cta-band__inner {
  display: grid; gap: 1.5rem; align-items: center;
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
}
.cta-band h2 { color: #fff; margin-bottom: .4rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 860px) {
  .cta-band__inner { grid-template-columns: 1fr auto; }
}

/* --- Product detail layout ------------------------------------------------ */
.product-layout { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 940px) { .product-layout { grid-template-columns: minmax(0, 1fr) 300px; } }
.product-main h1 { margin-bottom: .75rem; }
.product-main .lede { margin-bottom: 1.75rem; }

.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.25rem; box-shadow: var(--sh-1); margin-bottom: 1.25rem;
}
.panel--accent { background: var(--blue-050); border-color: #d3e2f7; }
.panel__title { font-size: 1rem; margin-bottom: .85rem; letter-spacing: 0; }

.side-nav { list-style: none; padding: 0; margin: 0; }
.side-nav li + li { border-top: 1px solid var(--line); }
.side-nav a {
  display: block; padding: .55rem 0; font-size: .92rem;
  color: var(--body); text-decoration: none;
}
.side-nav a:hover { color: var(--blue-600); }
.side-nav a[aria-current] { color: var(--amber-600); font-weight: 650; }

.contact-list, .tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.contact-list li { display: flex; align-items: center; gap: .6rem; font-size: .93rem; }
.contact-list .i { color: var(--blue-600); }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
.tick-list li { position: relative; padding-left: 1.5rem; font-size: .93rem; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .45rem;
  width: 8px; height: 13px; border-right: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
  transform: rotate(45deg);
}

.inline-cta {
  margin-top: 2.5rem; padding: 1.5rem;
  background: var(--amber-050); border: 1px solid #f2ddb8; border-radius: var(--r-md);
}
.inline-cta h2 { font-size: 1.25rem; margin-bottom: .35rem; }
.inline-cta__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }

/* --- Rich text from the CMS ----------------------------------------------- */
.rte { max-width: 78ch; }
.rte > *:first-child { margin-top: 0; }
.rte h2 { font-size: clamp(1.3rem, 1.15rem + .7vw, 1.65rem); margin: 2.25rem 0 .85rem; }
.rte h3 { margin: 1.75rem 0 .6rem; }
.rte h4 { margin: 1.5rem 0 .5rem; font-size: 1.05rem; color: var(--navy-800); }
.rte p { margin-bottom: 1rem; }
.rte ul, .rte ol { padding-left: 1.25rem; margin-bottom: 1.25rem; }
.rte li { margin-bottom: .35rem; }
.rte ul { list-style: none; padding-left: 0; }
.rte ul li { position: relative; padding-left: 1.4rem; }
.rte ul li::before {
  content: ""; position: absolute; left: .25rem; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber-500);
}
.rte ol li { padding-left: .25rem; }
.rte ul ul { margin: .4rem 0 .4rem; }
.rte strong { color: var(--navy-800); }
.rte hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

.rte img {
  max-width: 100%; height: auto;
  border-radius: var(--r-md); background: var(--surface);
}
.rte p > img, .rte figure img { margin-inline: auto; }
.rte-hero img { margin-inline: auto; }

/* Legacy layout tables that only exist to sit two images side by side.
   Their cells carry fixed pixel widths, so they are rebuilt as blocks that
   stack on narrow screens and share the column evenly on wide ones. */
.rte .rte-figure { border: 0; margin-block: 1.5rem; }
.rte .rte-figure,
.rte .rte-figure tbody,
.rte .rte-figure tr { display: block; }
.rte .rte-figure td {
  display: block; width: auto !important; padding: .5rem 0;
  text-align: center; vertical-align: middle;
}
.rte .rte-figure img { display: inline-block; }

@media (min-width: 620px) {
  .rte .rte-figure { display: table; width: 100%; table-layout: fixed; }
  .rte .rte-figure tbody { display: table-row-group; }
  .rte .rte-figure tr { display: table-row; }
  .rte .rte-figure td { display: table-cell; padding: .5rem; }
}

.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-block: 1.5rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background:
    linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
    linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat,
    linear-gradient(90deg, rgba(11,37,69,.10), rgba(11,37,69,0)) left / 14px 100% no-repeat,
    linear-gradient(270deg, rgba(11,37,69,.10), rgba(11,37,69,0)) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.table-scroll table {
  width: 100%; min-width: 560px; border-collapse: collapse; font-size: .88rem; margin: 0;
}
.table-scroll th, .table-scroll td {
  padding: .6rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
}
.table-scroll tr:first-child td, .table-scroll th {
  background: var(--navy-800); color: #fff; font-weight: 650;
  border-bottom-color: var(--navy-800); white-space: nowrap;
}
.table-scroll tbody tr:nth-child(even) td { background: var(--surface); }
.table-scroll tbody tr:first-child:nth-child(even) td { background: var(--navy-800); }
.table-scroll tr:last-child td { border-bottom: 0; }

.lug-figures {
  display: grid; gap: 1rem; margin-bottom: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.lug-figures figure {
  margin: 0; padding: 1rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  display: grid; place-items: center;
}
.lug-figures img { mix-blend-mode: multiply; }

/* --- Contact page --------------------------------------------------------- */
.contact-layout { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1fr 1fr; } }
.contact-cards { display: grid; gap: 1.25rem; }
.contact-person span { color: var(--muted); font-size: .88rem; }
/* Deliberately no aspect-ratio: combined with a height it would derive a
   minimum WIDTH and push the page sideways. An explicit height cannot. */
.contact-map {
  height: clamp(300px, 58vw, 460px);
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--sh-2);
}
/* The embed carries width="600"; without max-width it sets the grid column. */
.contact-map iframe { width: 100%; max-width: 100%; height: 100%; border: 0; display: block; }

/* --- Forms ---------------------------------------------------------------- */
.enquiry-layout { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 940px) { .enquiry-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.enquiry-form {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--sh-2);
}

.field { display: grid; gap: .35rem; margin-bottom: 1.1rem; }
.field label { font-weight: 650; font-size: .9rem; color: var(--navy-800); }
.field .req { color: var(--err); }
.field input, .field textarea, .field select {
  width: 100%; padding: .7rem .85rem;
  font: inherit; font-size: .96rem; color: var(--ink);
  background: #fff; border: 1px solid #cbd5e1; border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus {
  outline: 0; border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(43, 123, 214, .18);
}
.field input[aria-invalid], .field textarea[aria-invalid] { border-color: var(--err); }
.field textarea { resize: vertical; min-height: 130px; }
.field__error { color: var(--err); font-size: .85rem; font-weight: 600; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }

.alert { padding: 1.25rem 1.4rem; border-radius: var(--r-md); border: 1px solid; }
.alert h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.alert p + p { margin-top: .6rem; }
.alert--success { background: #eaf7f0; border-color: #b7e2c9; color: #12513a; }
.alert--success h2 { color: #12513a; }
.alert--error { background: #fdeceb; border-color: #f5c2c0; color: #8a2019; }
.notice {
  background: var(--blue-050); border: 1px solid #d3e2f7;
  padding: 1.1rem 1.25rem; border-radius: var(--r-md);
}

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #9fb4cb; font-size: .92rem; }
.footer-grid {
  display: grid; gap: var(--gap);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.footer-col h2 {
  color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 1rem;
}
.footer-logo { background: #fff; border-radius: var(--r-sm); padding: .4rem; width: 78px; margin-bottom: 1rem; }
.footer-col p { font-size: .9rem; line-height: 1.6; }
.footer-col address { font-size: .9rem; line-height: 1.7; color: #b9c9dc; margin-bottom: 1rem; }
.footer-col address strong { color: #fff; }

.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.footer-links a { color: #b9c9dc; text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }

.footer-brands { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: #cfe0f2;
}

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  padding-block: 1.15rem; border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: .84rem;
}
.footer-bottom a { color: #7f93aa; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* --- Floating WhatsApp ---------------------------------------------------- */
.floating-call {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.1rem;
  background: #25d366; color: #06301a; font-weight: 700; font-size: .9rem;
  border-radius: 999px; text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.floating-call:hover { transform: translateY(-2px); color: #06301a; box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }
@media (max-width: 560px) {
  .floating-call span { display: none; }
  .floating-call { padding: .85rem; }
  .floating-call .i { width: 1.4rem; height: 1.4rem; }
}

/* ==========================================================================
   Motion & polish
   Everything below is enhancement. The `anim` class is set by a tiny inline
   script in the head, and only when the visitor has not asked for reduced
   motion — so without JavaScript, or with reduced motion, the page simply
   renders static and complete.
   ========================================================================== */

/* --- Scroll reveal -------------------------------------------------------- */
.anim .reveal-target {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
.anim .reveal-target.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Children of a group come in one after another. */
.anim .reveal-group > *:nth-child(1) { transition-delay: 0ms; }
.anim .reveal-group > *:nth-child(2) { transition-delay: 70ms; }
.anim .reveal-group > *:nth-child(3) { transition-delay: 140ms; }
.anim .reveal-group > *:nth-child(4) { transition-delay: 210ms; }
.anim .reveal-group > *:nth-child(5) { transition-delay: 280ms; }
.anim .reveal-group > *:nth-child(6) { transition-delay: 350ms; }
.anim .reveal-group > *:nth-child(7) { transition-delay: 420ms; }
.anim .reveal-group > *:nth-child(8) { transition-delay: 490ms; }

/* --- Reading progress ----------------------------------------------------- */
.progress {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  height: 3px; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--amber-500), var(--blue-500));
  transition: transform .1s linear;
  pointer-events: none;
}

/* --- Header states -------------------------------------------------------- */
.site-header {
  transition: box-shadow var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
.site-header__inner { transition: padding var(--t-mid) var(--ease); }
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 6px 24px rgba(11, 37, 69, .10);
}
.site-header.is-scrolled .site-header__inner { padding-block: .35rem; }
.brand img { transition: transform var(--t-mid) var(--ease); transform-origin: left center; }
.site-header.is-scrolled .brand img { transform: scale(.86); }
.brand:hover img { transform: scale(1.04); }
.site-header.is-scrolled .brand:hover img { transform: scale(.9); }

/* Navigation links grow an underline from the middle out. */
@media (min-width: 960px) {
  .nav__list > li > a { position: relative; }
  .nav__list > li > a::before {
    content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .25rem;
    height: 2px; border-radius: 2px; background: var(--amber-500);
    transform: scaleX(0); transition: transform var(--t-mid) var(--ease-out);
  }
  .nav__list > li > a:hover::before { transform: scaleX(1); }
  .nav__sub li {
    opacity: 0; transform: translateY(-4px);
    transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
  }
  .has-sub:hover .nav__sub li,
  .has-sub:focus-within .nav__sub li { opacity: 1; transform: none; }
  .nav__sub li:nth-child(2) { transition-delay: 20ms; }
  .nav__sub li:nth-child(3) { transition-delay: 40ms; }
  .nav__sub li:nth-child(4) { transition-delay: 60ms; }
  .nav__sub li:nth-child(5) { transition-delay: 80ms; }
  .nav__sub li:nth-child(n+6) { transition-delay: 100ms; }
  .nav__sub a { transition: background-color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease); }
  .nav__sub a:hover { padding-left: 1rem; }
}

/* --- Slider motion -------------------------------------------------------- */
/* A very slow drift on the visible slide keeps the banner from feeling static. */
.anim .slider__slide.is-active img { animation: drift 14s var(--ease) both; }
@keyframes drift {
  from { transform: scale(1.005); }
  to   { transform: scale(1.075); }
}
/* The first slide is the one on screen at load, so its caption is never
   hidden — it is the largest contentful paint, and it must survive a failed
   script. Only slides 2+ animate their captions in. */
.anim .slider__slide:not(:first-child) .slider__caption > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.anim .slider__slide.is-active .slider__caption > * { opacity: 1; transform: none; }
.anim .slider__slide.is-active .slider__caption > *:nth-child(2) { transition-delay: 80ms; }
.anim .slider__slide.is-active .slider__caption > *:nth-child(3) { transition-delay: 160ms; }
.anim .slider__slide.is-active .slider__caption > *:nth-child(4) { transition-delay: 240ms; }

.slider__arrow:hover { transform: translateY(-50%) scale(1.1); }
.slider__frame::after {
  /* Hairline sheen along the top edge of the frame. */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  pointer-events: none;
}

/* --- Section decoration --------------------------------------------------- */
.section { position: relative; overflow: hidden; }
.section__head h2 { position: relative; display: inline-block; padding-bottom: .55rem; }
.section__head h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--amber-500), var(--amber-600));
}
/* Scoped to .reveal-target: only elements the script actually hid start at
   zero width. Headings already on screen keep the underline drawn. */
.anim .section__head.reveal-target h2::after {
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-out) .15s;
}
.anim .section__head.reveal-target.is-in h2::after { transform: scaleX(1); }

/* Soft colour wash behind the tinted bands. */
.section--tint::before {
  content: ""; position: absolute; z-index: 0;
  width: 520px; height: 520px; right: -180px; top: -220px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(43, 123, 214, .10), transparent 68%);
}
.section--tint > .wrap { position: relative; z-index: 1; }

/* --- Component hover states ---------------------------------------------- */
.feature-grid li {
  position: relative; overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease);
}
.feature-grid li:hover {
  transform: translateY(-4px); box-shadow: var(--sh-3); border-color: #c9d8ea;
}
.feature-grid .i { transition: transform var(--t-mid) var(--ease-out); }
.feature-grid li:hover .i { transform: scale(1.12) rotate(-4deg); }

.panel { transition: box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out); }
.panel:hover { box-shadow: var(--sh-2); }

.side-nav a { transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease); }
.side-nav a:hover { padding-left: .45rem; }

.footer-links a { transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease); }
.footer-links a:hover { padding-left: .3rem; }

.chip { transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.chip:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }

.strip__brand { transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.strip__brand:hover { opacity: 1; transform: translateY(-2px); }

.tabs__list button { position: relative; }
.tabs__panel { animation: none; }
.anim .tabs__panel:not([hidden]) { animation: panel-in .4s var(--ease-out) both; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.crumbs a { transition: color var(--t-fast) var(--ease); }

/* --- Back to top ---------------------------------------------------------- */
.to-top {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 90;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: var(--navy-800); border: 0; border-radius: 50%;
  box-shadow: var(--sh-3); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out),
              visibility var(--t-mid), background-color var(--t-fast) var(--ease);
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--navy-700); transform: translateY(-3px); }
.to-top::after {
  content: ""; width: 10px; height: 10px;
  border-top: 2px solid #fff; border-right: 2px solid #fff;
  transform: translateY(2px) rotate(-45deg);
}

.floating-call { transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease); }
.anim .floating-call { animation: pop-in .5s var(--ease-out) 1.2s both; }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(14px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* --- Rich-text polish ----------------------------------------------------- */
.rte a:not(.btn) {
  text-decoration: none;
  background-image: linear-gradient(var(--blue-600), var(--blue-600));
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--t-mid) var(--ease-out);
}
.rte a:not(.btn):hover { background-size: 100% 1.5px; }
.table-scroll tbody tr { transition: background-color var(--t-fast) var(--ease); }
.table-scroll tbody tr:hover td { background: var(--blue-050); }

/* --- Honour the reduced-motion preference completely ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal-target { opacity: 1 !important; transform: none !important; }
  .slider__slide img { animation: none !important; }
  .slider__caption > * { opacity: 1 !important; transform: none !important; }
  .progress { display: none; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .topbar, .site-header, .crumbs, .cta-band, .floating-call, .progress, .to-top,
  .site-footer, .inline-cta, .product-aside { display: none !important; }
  .reveal-target { opacity: 1 !important; transform: none !important; }
  body { color: #000; }
  .section { padding-block: 0; }
  .table-scroll { overflow: visible; border: 0; }
  .table-scroll table { min-width: 0; font-size: 9pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }
}