/* ==========================================================================
   Rotec Transmissions Private Limited
   Design system — international manufacturing.
   Open Sans across display, body and technical data.

   Rotec blue remains primary and signal yellow is reserved for calls to action
   and small section markers. Familiar typography and clear product photography
   keep the presentation direct and credible.
   ========================================================================== */

/* --- Fonts -------------------------------------------------------------
   Self-hosted latin subset. No third-party requests, so the
   site renders identically offline and behind restrictive networks.
   Source: Google Fonts (SIL Open Font License 1.1).
   ----------------------------------------------------------------------- */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/open-sans-latin.woff2") format("woff2");
}

/* Montserrat carries every heading, label and button. The reference the client
   approved sets its headlines in a wide geometric sans at heavy weights in
   caps; Open Sans is too narrow and too soft to hold that. Body copy stays on
   Open Sans, which matches the reference's humanist body text. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
}

/* --- Tokens ------------------------------------------------------------ */
:root {
  /* Brand — built out from the blue in the registered logo, which measures
     #485395 in the supplied artwork. `--brand` keeps that hue but carries more
     saturation, so headlines and buttons have punch and still read as the same
     blue as the mark sitting next to them. `--brand` is the workhorse:
     headlines, buttons, links, section bands. */
  --brand-ink: #101a40;      /* darkest — dark bands, footer */
  --brand-deep: #1e2e75;     /* hover states on blue */
  --brand: #2a3e96;          /* primary */
  --brand-mid: #4a5fc0;      /* on dark backgrounds */
  --brand-soft: #b0bce6;     /* dividers on blue */
  --brand-wash: #ebeefa;     /* tinted surfaces */
  --brand-tint: rgba(42, 62, 150, 0.06);

  /* Accent — safety orange, matching the reference the client benchmarks
     against. Every eyebrow marker, step number, primary button and hover state.
     Kept to small areas so it stays a signal rather than decoration.

     Measured against #f5f8fc and #101a40 rather than picked by eye:
       --accent      #ea6a10  ink on it 5.28:1 (button labels, AA normal text)
                              as a rule/dot on light 3.00:1 (AA non-text)
                              as text on the navy band 5.28:1
       --accent-deep #cf5a0b  hover; ink on it 4.12:1, so it is used for fills
                              and shadows, never as a background for body text
       --accent-ink  #a8480a  accent-coloured TEXT on light, 5.48:1 on surface
       --on-accent   #101a40  the ink that sits ON an orange fill

     White on this orange is 3.20:1 and is NOT used: the buttons set 13px bold,
     which WCAG counts as normal text and wants 4.5:1. The reference site does
     put white on its orange; it fails there. Navy on orange is the swap.

     Worth noting against the yellow this replaced: as a rule or dot on a light
     surface the yellow measured 1.71:1 and was effectively invisible. Every one
     of those marks now clears the 3:1 the guidelines ask of non-text. */
  --accent: #ea6a10;
  --accent-deep: #cf5a0b;
  --accent-ink: #a8480a;
  --on-accent: #101a40;
  --accent-wash: #fdeee4;

  /* Surfaces — very slightly blue-tinted greys so white cards read as raised
     against the page rather than merging with it. */
  --surface: #f5f8fc;
  --surface-lowest: #ffffff;
  --surface-low: #eff4fb;
  --surface-container: #e7eef8;
  --surface-high: #dae5f3;
  --surface-highest: #cbdaee;

  /* Ink */
  --primary: #2a3e96;
  --on-primary: #ffffff;
  --on-surface: #14243d;
  --on-surface-variant: #46566d;
  /* Muted captions/labels. Measured rather than picked: #5d6c83 is 5.0:1 on
     --surface and stays >=4.5 on every surface this text actually sits on,
     clearing the 4.5:1 AA bar for the small text it renders. The earlier
     #66768c landed at 4.35:1 and failed every one of those captions. */
  --secondary: #5d6c83;
  --on-dark: #ffffff;
  --on-dark-variant: rgba(255, 255, 255, 0.76);

  /* Lines */
  --outline: #93a4bc;
  --outline-variant: #cfdaea;

  /* Type */
  --font-display: "Montserrat", "Open Sans", Arial, Helvetica, sans-serif;
  --font-body: "Open Sans", Arial, Helvetica, sans-serif;
  --font-mono: "Open Sans", Arial, Helvetica, sans-serif;
  --font-headline: "Montserrat", "Open Sans", Arial, Helvetica, sans-serif;

  /* Type scale — single source of truth for every font-size on the site.
     Microcopy at 12px (not 11px) reads calmer for international audiences.
     Body unified at 16px/1.6. Display sizes unchanged (layout approved). */
  --text-micro: 12px;
  --text-ui: 13px;
  --text-data: 14px;
  --text-body: 16px;
  --text-prose: 17px;
  --text-lede: 18px;
  --text-h3: 21px;
  --text-drawer: 28px;
  --text-quote: clamp(24px, 4vw, 32px);
  --text-h2: clamp(28px, 3.6vw, 46px);
  --text-h1: clamp(38px, 5.2vw, 66px);
  --text-hero: clamp(42px, 6vw, 78px);
  --text-stat: clamp(28px, 3.4vw, 44px);

  /* Layout — Quiet International: more air at the edges */
  --margin-desktop: 80px;
  --margin-mobile: 24px;
  --gutter: 24px;
  --max-width: 1440px;
  --hairline: 1px;
  --nav-height: 72px;
  /* Utility strip above the nav. Zero on small screens, where it is hidden, so
     every `--head-height` consumer stays correct without a second override. */
  --topbar-height: 0px;
  --head-height: calc(var(--nav-height) + var(--topbar-height));
}

/* --- Reset ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid var(--outline-variant);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-height) + 32px);
}

body {
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* `height: auto` matters here. The width/height attributes on every <img> are
   presentational hints that map to CSS width/height, so without this an image
   whose rule only sets `width: 100%` renders at its literal attribute height —
   a 638px-wide photo stretched to 1050px tall, overriding its aspect-ratio.
   Component rules that set a real height are class-level and still win. */
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border-radius: 0;
}

button {
  cursor: pointer;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@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;
  }
}

/* --- Typography scale ---------------------------------------------------
   Open Sans gives the site the familiar, straightforward corporate tone used
   by established construction and manufacturing businesses.
   ------------------------------------------------------------------------- */
.t-headline-lg {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--brand);
}

.t-headline-md {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--brand);
}

.t-headline-sm {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--brand);
}

/* Below ~400px the 40px floor is too wide for a single long word set in caps.
   "MANUFACTURING" on its own runs past the page margin, and because body clips
   overflow-x that shows up as silently cropped letters rather than a scrollbar
   you could notice. Caps are wider than the mixed-case serif this replaced, so
   the floor has to come down with the viewport. */
@media (max-width: 399px) {
  .t-headline-lg {
    font-size: clamp(26px, 7.6vw, 34px);
  }

  .t-headline-md {
    font-size: clamp(22px, 6.4vw, 28px);
  }

  /* The home hero's bigger scale needs its own floor — "INDUSTRIAL DRIVES."
     in caps must never run past the page margin (body clips overflow-x, so
     overflow shows up as silently cropped letters, not a scrollbar). */
  .hero__title {
    font-size: clamp(28px, 8.4vw, 34px);
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: clamp(30px, 8.8vw, 40px);
  }
}

/* Small caps label. Was monospace; monospace now earns its place only on
   measured values, where character alignment actually means something. */
.t-label {
  font-family: var(--font-display);
  font-size: var(--text-ui);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.t-mono {
  font-family: var(--font-body);
  font-size: var(--text-data);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.t-body-lg {
  font-size: var(--text-lede);
  line-height: 1.6;
}

.t-body {
  font-size: var(--text-body);
  line-height: 1.6;
}

.muted {
  color: var(--on-surface-variant);
}

.secondary {
  color: var(--secondary);
}

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

/* --- Layout primitives -------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
}

.section {
  padding-block: 96px;
}

.section--tight {
  padding-block: 80px;
}

/* Phones — cut the desktop air. 96px section pads stacked eight times were
   adding nearly a full viewport of empty scroll before any real content. */
@media (max-width: 767px) {
  .section {
    padding-block: 64px;
  }

  .section--tight {
    padding-block: 52px;
  }

  .home-head {
    margin-bottom: 40px;
  }

  .svc-card {
    padding: 22px 20px 20px;
  }

  .svc-card__title {
    min-height: 0;
  }

  .hero__slide {
    padding-block: 120px 72px;
  }
}

/* Small accent marks follow the same light/dark split as accent text. A pure
   yellow 9px square on a near-white surface is 1.71:1 and effectively vanishes;
   graphical objects need 3:1 to be perceivable. So the markers run amber on
   light and full yellow on the dark bands, where yellow is at its best. */
.rule {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--accent-ink);
}

.bg-brand .rule,
.bg-ink .rule {
  background: var(--accent);
}

/* Section opener — Quiet: thin yellow rule, not a square block. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--accent-ink);
  font-size: var(--text-micro);
  letter-spacing: 0.14em;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 20px;
  height: 2px;
  background: var(--accent-ink);
}

.bg-brand .eyebrow,
.bg-ink .eyebrow {
  color: var(--accent);
}

.bg-brand .eyebrow::before,
.bg-ink .eyebrow::before {
  background: var(--accent);
}

.section-head {
  margin-bottom: 56px;
}

.section-head .eyebrow {
  margin-bottom: 14px;
}

.section-head .t-headline-md,
.section-head .t-headline-lg {
  max-width: 22ch;
}

.bg-white {
  background: var(--surface-lowest);
}

.bg-container {
  background: var(--surface-container);
}

/* --- Coloured bands -----------------------------------------------------
   Flat brand surfaces keep the page closer to established corporate
   manufacturing sites and give photography and content the visual priority. */
.bg-brand {
  background-color: var(--brand);
  color: var(--on-dark);
}

.bg-ink {
  background-color: var(--brand-ink);
  color: var(--on-dark);
}

.bg-wash {
  background: var(--brand-wash);
}

.bg-brand .t-headline-lg,
.bg-brand .t-headline-md,
.bg-brand .t-headline-sm,
.bg-ink .t-headline-lg,
.bg-ink .t-headline-md,
.bg-ink .t-headline-sm {
  color: var(--on-dark);
}

.bg-brand .eyebrow,
.bg-ink .eyebrow {
  color: var(--on-dark);
}

.bg-brand .muted,
.bg-ink .muted,
.bg-brand .secondary,
.bg-ink .secondary {
  color: var(--on-dark-variant);
}

.border-y {
  border-block: var(--hairline) solid var(--outline-variant);
}

.border-b {
  border-bottom: var(--hairline) solid var(--outline-variant);
}

/* Hover-reactive technical values — the signature interaction of this design. */
.value {
  display: inline-block;
  transition: color 0.2s, transform 0.2s;
}

.value:hover {
  color: var(--accent-ink);
  transform: scale(1.05);
}

/* Scroll reveal.
   Visible by DEFAULT. Only the inline head script (which also arms a failsafe)
   adds `.js`, which opts the page into the hidden-then-reveal behaviour. So a
   blocked, 404'd or broken main.js leaves a readable page rather than a blank one. */
.fade-up {
  opacity: 1;
  transform: none;
}

.js .fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.js .fade-up.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .js .fade-up {
    opacity: 1;
    transform: none;
  }
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--primary);
  color: var(--on-primary);
  transition: top 0.2s;
}

.skip-link:focus {
  top: 8px;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 28px;
  background: var(--brand);
  color: var(--on-primary);
  font-family: var(--font-display);
  font-size: var(--text-ui);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn:hover {
  background: var(--brand-deep);
  box-shadow: 0 10px 24px rgba(42, 62, 150, 0.26);
}

.btn:active {
  transform: scale(0.97);
}

.btn .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.btn:hover .icon {
  transform: translateX(3px);
}

.btn--nav {
  padding: 12px 20px;
  gap: 10px;
}

/* The one orange button per page — reserved for the action we actually want. */
.btn--accent {
  background: var(--accent);
  color: var(--on-accent);
}

.btn--accent:hover {
  background: var(--accent-deep);
  box-shadow: 0 10px 24px rgba(234, 106, 16, 0.35);
}

/* On a blue band a blue button disappears, so it inverts. */
.bg-brand .btn,
.bg-ink .btn {
  background: var(--on-dark);
  color: var(--brand);
}

.bg-brand .btn:hover,
.bg-ink .btn:hover {
  background: var(--accent);
  color: var(--on-accent);
}

/* The hero sits on a soft navy wash over photography, so the secondary
   action outlines in white rather than filling navy (which disappears into
   the scrim). Accent stays the primary push. */
.hero .btn:not(.btn--accent) {
  background: transparent;
  color: var(--on-dark);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.hero .btn:not(.btn--accent):hover {
  background: var(--on-dark);
  color: var(--brand);
  border-color: var(--on-dark);
}

.btn--block {
  width: 100%;
  padding-block: 22px;
  letter-spacing: 0.2em;
}

.btn--block:hover {
  background: var(--brand-deep);
  box-shadow: 0 12px 28px rgba(16, 26, 64, 0.24);
  transform: translateY(-2px);
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  transition: color 0.2s;
}

.btn-text:hover {
  color: var(--accent-ink);
}

.btn-text .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}

.btn-text:hover .icon {
  transform: translateX(8px);
}

/* Inline SVG icons. The four glyphs this site needs used to cost a 1.1 MB
   Material Symbols webfont; these are a few hundred bytes total. */
.icon {
  display: block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Site header — utility strip above a nav with a solid logo block ------ */

/* The whole header travels as one fixed unit so the utility strip scrolls with
   the bar rather than sliding under it. */
.site-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.topbar {
  display: none;
  height: var(--topbar-height);
  background: var(--surface-lowest);
  border-bottom: var(--hairline) solid var(--outline-variant);
  color: var(--on-surface-variant);
  font-family: var(--font-body);
  font-size: var(--text-micro);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.topbar__group {
  display: flex;
  align-items: center;
  gap: 26px;
  min-width: 0;
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.topbar__item .icon {
  width: 14px;
  height: 14px;
  color: var(--accent-ink);
  stroke-width: 1.9;
}

a.topbar__item {
  transition: color 0.2s;
}

a.topbar__item:hover {
  color: var(--brand);
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: none;
  height: var(--nav-height);
  /* Right inset matches the drawer / page margin so the hamburger and the
     drawer links share one vertical edge instead of sitting 4px apart. */
  padding: 0 var(--margin-mobile) 0 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Hairline is drawn with ::after so it does not shrink the content box —
     otherwise the orange logo block stops 1px short and white shows under it. */
  border-bottom: 0;
  transition: box-shadow 0.3s, background 0.3s;
}

.nav::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: var(--hairline);
  background: var(--outline-variant);
  pointer-events: none;
}

.nav.is-scrolled {
  box-shadow: 0 4px 18px rgba(16, 26, 64, 0.08);
}

/* Solid accent block flush to the left edge — the anchor the client's
   reference layout hangs the whole bar off. */
.nav__logo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 100%;
  margin: 0;
  padding-inline: 20px;
  background: var(--accent);
  transition: background 0.2s;
}

.nav__logo:hover {
  background: var(--accent-deep);
}

.nav__logo img {
  height: 34px;
  width: auto;
  max-width: min(230px, 52vw);
  object-fit: contain;
  object-position: left center;
}

/* The gap is fluid on purpose. The logo block is wide and fixed, the actions
   are fixed, so the link row is the only thing that can absorb the difference
   between a 1200px laptop and a 1600px display. A static gap either clipped
   the Enquire button at the narrow end or left a hole at the wide end. */
.nav__links {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  gap: clamp(18px, 1.9vw, 34px);
  align-items: center;
  justify-content: flex-start;
  padding-left: 16px;
}

.nav__link {
  position: relative;
  padding-block: 6px;
  font-family: var(--font-display);
  white-space: nowrap;
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface);
  transition: color 0.2s;
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--accent-ink);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex: none;
}

.nav__actions .btn {
  padding: 12px 22px;
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
}

@media (max-width: 560px) {
  .nav__actions .btn {
    display: none;
  }
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  /* 44px hit area — glyph stays 26px and centred. Pull only the right edge
     into the nav padding so the bars sit on the page margin, not floating
     inside a dead strip. */
  width: 44px;
  height: 44px;
  margin: 0 -10px 0 0;
  padding: 0;
  color: var(--primary);
  background: transparent;
  border: 0;
  line-height: 0;
}

.nav__toggle .icon {
  display: block;
  width: 26px;
  height: 26px;
  stroke-width: 1.75;
}

/* Menu / close swap rides on the aria state the JS already maintains. */
.nav__toggle .icon-close,
.nav__toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav__toggle[aria-expanded="true"] .icon-close {
  display: block;
}

.nav__drawer {
  position: fixed;
  /* Sit under the fixed header rather than covering it — the close control
     stays reachable and the first link lines up with the page margin. */
  top: var(--head-height);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
  padding: 12px var(--margin-mobile) 40px;
  overflow-y: auto;
  background: var(--surface-lowest);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s;
}

.nav__drawer.is-open {
  transform: none;
  visibility: visible;
}

.nav__drawer a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0;
  /* Hairlines run edge to edge; the label stays on the page margin so it
     lines up with the hamburger and the rest of the layout. */
  margin-inline: calc(-1 * var(--margin-mobile));
  padding-inline: var(--margin-mobile);
  border-bottom: var(--hairline) solid var(--outline-variant);
  font-family: var(--font-headline);
  font-size: clamp(20px, 5.5vw, 28px);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--brand);
  line-height: 1;
}

.nav__drawer a:hover {
  color: var(--accent-ink);
}

/* Last item is the enquire action — separate it slightly so it reads as the
   conversion control rather than another page link. */
.nav__drawer a:last-child {
  margin-top: 12px;
  border-bottom: 0;
  color: var(--accent-ink);
}

/* --- Hero — full-bleed plant photography, light type on a soft navy scrim -
   The photograph runs edge to edge. A thin navy wash on the left clears
   contrast for white headlines without bleaching the plant out of the frame.
   ------------------------------------------------------------------------- */
/* The slider frame. The block that used to carry the padding and centring is
   now .hero__slide — the hero itself is just the window the track scrolls
   inside, so it owns the overflow clip and nothing else. */
.hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--surface);
  color: var(--on-surface);
}

.hero__track {
  display: flex;
  width: 100%;
  /* Horizontal scroll between slides. transform is compositor-only, so this
     stays smooth even with a 1400px photograph in each slide. */
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}

.hero__slide {
  position: relative;
  display: flex;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  flex-direction: column;
  justify-content: center;
  /* On a phone `vh` resolves against the LARGE viewport — the height the page
     would have with the browser toolbars retracted — so 86vh renders taller
     than what is actually on screen while the toolbar is showing. svh is the
     small viewport, which is what the visitor can really see. The vh line
     stays first as the fallback for anything without svh. */
  min-height: 86vh;
  min-height: 86svh;
  padding-block: 150px 90px;
  overflow: hidden;
}

/* Horizontal gestures belong to the slider, vertical ones to the page. Without
   this the browser claims the whole gesture and a swipe either scrolls the
   page or does nothing at all. */
.hero__track {
  touch-action: pan-y;
}

.hero::before {
  display: none;
}

.hero::after {
  display: none;
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Mild lift only — the dark scrim already protects type, so a heavy grade
     just washes the plant out of the frame again. */
  filter: brightness(1.08) contrast(1.04) saturate(0.95);
}

/* Two stops carry the work. A soft navy wash on the left clears contrast for
   light type without bleaching the plant photograph — the crane, machines and
   workers have to stay visible, which is why the client sent the frame. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      180deg,
      rgba(16, 26, 64, 0.35) 0%,
      rgba(16, 26, 64, 0) 20%
    ),
    linear-gradient(
      90deg,
      rgba(16, 26, 64, 0.58) 0%,
      rgba(16, 26, 64, 0.36) 26%,
      rgba(16, 26, 64, 0.14) 50%,
      rgba(16, 26, 64, 0.04) 70%,
      rgba(16, 26, 64, 0) 86%
    );
}

/* On phones the copy sits over the full frame. A lighter vertical fade keeps
   the headline readable and still lets the plant show under the buttons. */
@media (max-width: 899px) {
  .hero__scrim {
    background: linear-gradient(
      180deg,
      rgba(16, 26, 64, 0.55) 0%,
      rgba(16, 26, 64, 0.34) 42%,
      rgba(16, 26, 64, 0.14) 74%,
      rgba(16, 26, 64, 0.04) 100%
    );
  }

  /* A 16:9 frame cropped into a portrait box loses most of its width. Centring
     it lands on empty floor; biasing right and down keeps the machines, the
     crane hook and the people in shot, which is the reason for the photograph. */
  .hero__photo img {
    object-position: 62% 58%;
  }

  .hero__lede {
    max-width: none;
  }
}

.hero__shader {
  display: none;
}

.hero__art {
  display: none;
}

/* The wrap keeps the page margin; the children carry the measure. */
.hero__inner {
  position: relative;
  z-index: 1;
}

/* 720px forced "INDUSTRIAL DRIVES." onto two lines, which put slide 1 at four
   lines against slide 2's two — and in a slider an uneven headline moves the
   buttons and the controls every time it advances. 880px lets every headline
   in HERO_SLIDES sit on two lines; .hero__lede keeps its own 44ch measure so
   the body copy does not stretch with it. */
.hero__inner > * {
  max-width: 880px;
}

/* Reserve two lines — every current HERO_SLIDES headline wraps to exactly two.
   A three-line reserve left a dead band under shorter titles and made the
   lede / buttons look vertically adrift between slides. */
.hero__title {
  min-height: calc(2 * 1.06em);
}

/* Slide 1 is the page's <h1>; every later slide repeats the same look with a
   <p> so the page keeps exactly one top-level heading. Both carry
   .hero__title, so the styling has to hang off the class, not the tag. */
.hero__title {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  color: var(--on-dark);
  font-size: clamp(36px, 5.2vw, 64px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.06;
  text-shadow: 0 2px 18px rgba(16, 26, 64, 0.35);
}

.hero__title .accent {
  display: block;
  color: var(--on-dark);
  font-weight: 800;
}

.hero__lede {
  max-width: 42ch;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.55;
  text-shadow: 0 1px 10px rgba(16, 26, 64, 0.35);
}


.hero__cert {
  display: none;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.hero__stats {
  display: none;
}

.hero__scroll {
  display: none;
}

/* --- Proof strip — Quiet typographic trust row --------------------------- */
.proof-strip {
  background: var(--surface-lowest);
  border-bottom: var(--hairline) solid var(--outline-variant);
}

.proof-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-block: 28px;
}

.proof-strip__item {
  font-family: var(--font-display);
  font-size: var(--text-ui);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.proof-strip__sep {
  display: none;
  width: 1px;
  height: 16px;
  background: var(--outline-variant);
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .proof-strip__sep {
    display: block;
  }
}

/* --- Stats strip — single trust band, even column rhythm ---------------- */
.stats-strip {
  background: var(--surface-lowest);
  border-block: var(--hairline) solid var(--outline-variant);
}

.stats-strip__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
  row-gap: 0;
  padding-block: 0;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 40px 28px;
  border: 0;
  border-bottom: var(--hairline) solid var(--outline-variant);
  border-right: var(--hairline) solid var(--outline-variant);
}

.stat:nth-child(odd) {
  padding-left: 0;
}

.stat:nth-child(even) {
  padding-right: 0;
  border-right: 0;
}

.stat:nth-child(n + 3) {
  border-bottom: 0;
}

.stat__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-ink);
}

.stat__label {
  font-family: var(--font-display);
  font-size: var(--text-ui);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

.stat__note {
  font-size: var(--text-ui);
  line-height: 1.45;
  color: var(--on-surface-variant);
  max-width: 24ch;
}

@media (min-width: 900px) {
  .stats-strip__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .stat,
  .stat:nth-child(odd),
  .stat:nth-child(even),
  .stat:nth-child(n + 3) {
    padding: 52px 40px;
    border-bottom: 0;
    border-right: var(--hairline) solid var(--outline-variant);
  }

  .stat:first-child {
    padding-left: 0;
  }

  .stat:last-child {
    padding-right: 0;
    border-right: 0;
  }

  .stat__note {
    max-width: 20ch;
  }
}

/* --- Capability strip ----------------------------------------------------
   A static, scannable service strip mirrors established construction and
   manufacturing sites. It replaces the decorative moving ticker. */
.capability-strip {
  background: var(--surface-lowest);
  border-bottom: var(--hairline) solid var(--outline-variant);
}

.capability-strip__grid {
  display: grid;
  grid-template-columns: 1fr;
}

.capability-strip__item {
  display: flex;
  min-height: 92px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 20px 0;
  border-bottom: var(--hairline) solid var(--outline-variant);
}

.capability-strip__item strong {
  color: var(--brand);
  font-size: var(--text-body);
  line-height: 1.3;
}

.capability-strip__item span {
  color: var(--on-surface-variant);
  font-size: var(--text-ui);
}

.capability-strip__item::before {
  content: "";
  width: 32px;
  height: 3px;
  margin-bottom: 5px;
  background: var(--accent);
}

.capability-strip__item:hover strong {
  color: var(--brand-deep);
}

@media (min-width: 640px) {
  .capability-strip__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .capability-strip__item {
    padding-inline: 24px;
    border-right: var(--hairline) solid var(--outline-variant);
  }
}

@media (min-width: 900px) {
  .capability-strip__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .capability-strip__item {
    min-height: 118px;
    border-bottom: 0;
  }
}

/* --- Vision ------------------------------------------------------------- */
.vision {
  display: grid;
  gap: 48px;
}

.vision__quote {
  margin-bottom: 40px;
  padding-left: 24px;
  border-left: var(--hairline) solid var(--primary);
  font-family: var(--font-display);
  font-size: var(--text-quote);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
}

.vision__body p {
  margin-bottom: 24px;
  color: var(--on-surface-variant);
}

.pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0;
}

.pillars li {
  padding: 8px 14px;
  border: var(--hairline) solid var(--outline-variant);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Product grid ------------------------------------------------------- */
.products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 32px;
}

.product {
  display: flex;
  flex-direction: column;
}

.product__art {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 24px;
  background: var(--surface-container);
  border: var(--hairline) solid var(--outline-variant);
  overflow: hidden;
}

.product__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.product:hover .product__art img {
  transform: scale(1.05);
}

.product__head h3 a {
  transition: color 0.2s;
}

.product__head h3 a:hover {
  color: var(--accent-ink);
}

.product__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: var(--hairline) solid var(--outline-variant);
}

.product__head h3 {
  margin-bottom: 6px;
}

.product__sub {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.05em;
  color: var(--secondary);
}

.product__attr {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: right;
  color: var(--accent-ink);
}

.product__body {
  padding-top: 16px;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--on-surface-variant);
}

.product__meta {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--secondary);
}

.product__meta strong {
  display: block;
  margin-bottom: 4px;
  color: var(--on-surface);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Capability list ---------------------------------------------------- */
.capability {
  display: grid;
  gap: 48px;
}

.cap-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: var(--hairline) solid var(--outline-variant);
}

.cap-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 20px 8px;
  border-bottom: var(--hairline) solid var(--outline-variant);
  transition: background 0.25s, padding-left 0.25s;
}

.cap-list li:hover {
  background: var(--surface-lowest);
  padding-left: 20px;
}

.cap-list .num {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
}

.cap-list .name {
  font-size: var(--text-body);
}

/* --- Quality steps ------------------------------------------------------ */
.steps {
  display: grid;
  gap: 0;
  border-top: var(--hairline) solid var(--outline-variant);
}

.step {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 10px;
  padding: 32px 0;
  border-bottom: var(--hairline) solid var(--outline-variant);
  transition: background 0.3s;
}

.step:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* Quiet: typographic stage label, not a filled chip. */
.step__num {
  display: inline-block;
  justify-self: start;
  padding: 0;
  background: transparent;
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.step__body {
  color: var(--on-surface-variant);
  max-width: 62ch;
}

/* --- Reason columns — Quiet: hairlines, no card chrome ------------------- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.card {
  position: relative;
  padding: 28px 0;
  border: 0;
  border-bottom: var(--hairline) solid var(--outline-variant);
  background: transparent;
  transition: opacity 0.2s;
}

.card:hover {
  box-shadow: none;
  transform: none;
  opacity: 0.92;
}

.card__num {
  display: inline-block;
  margin-bottom: 14px;
  padding: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-ink);
}

.card h3 {
  margin-bottom: 12px;
}

.card p {
  color: var(--on-surface-variant);
  font-size: var(--text-body);
  line-height: 1.6;
}

/* Home “Why Rotec” — Quiet columnar list */
.reasons {
  gap: 0;
  border-top: var(--hairline) solid var(--outline-variant);
}

.reasons .card {
  border: 0;
  border-right: var(--hairline) solid var(--outline-variant);
  border-top: 0;
  background: transparent;
  /* Equal inset from the hairlines — the old 0 left pad sat the copy flush
     against the column rule on every right-hand card. */
  padding: 40px 36px;
  box-shadow: none;
  transform: none;
}

.reasons .card:last-child {
  border-right: 0;
}

.reasons .card:hover {
  border-top-color: transparent;
  box-shadow: none;
  transform: none;
}

.reasons .card__num {
  margin-bottom: 18px;
  padding: 0;
  background: transparent;
  font-size: var(--text-micro);
  letter-spacing: 0.14em;
  color: var(--accent-ink);
}

.reasons .card h3 {
  margin-bottom: 16px;
}

.reasons .card p {
  line-height: 1.65;
}

.reasons .card:hover .card__num {
  background: transparent;
  color: var(--accent-ink);
}

.reasons .card::after {
  content: "";
  position: absolute;
  left: 36px;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.reasons .card:hover::after {
  width: 48px;
}

@media (min-width: 640px) and (max-width: 1199px) {
  /* Two-up: drop the outer right rule on the right column, and draw a row
     rule between the pairs so the second row isn’t jammed under the first. */
  .reasons .card:nth-child(2n) {
    border-right: 0;
  }

  .reasons .card:nth-child(n + 3) {
    border-top: var(--hairline) solid var(--outline-variant);
  }
}

@media (max-width: 639px) {
  .reasons .card {
    border-right: 0;
    border-bottom: var(--hairline) solid var(--outline-variant);
    padding: 32px 0;
  }

  .reasons .card:last-child {
    border-bottom: 0;
  }

  .reasons .card::after {
    left: 0;
  }
}

.split {
  display: grid;
  gap: 56px;
}

.split__aside p {
  max-width: 42ch;
  margin-bottom: 32px;
  color: var(--on-surface-variant);
}

.split__aside .rule,
.capability .rule,
.cert-split .rule {
  margin-top: 32px;
}

/* --- Contact ------------------------------------------------------------ */
.contact-box {
  display: grid;
  grid-template-columns: 1fr;
  border: var(--hairline) solid var(--outline-variant);
  background: var(--surface-lowest);
}

.contact-form-side {
  padding: 40px var(--margin-mobile);
  border-bottom: var(--hairline) solid var(--outline-variant);
}

.contact-form-side h2 {
  margin-bottom: 48px;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.field {
  position: relative;
  /* A grid item's automatic minimum is its content's min-content width, and an
     <input> reports roughly 20 characters regardless of `width: 100%`. Without
     this the enquiry form holds its column open at ~343px and pushes the page
     wider than a 320px phone. */
  min-width: 0;
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Labels are text, not a hairline — --outline (#93a4bc) measured 2.4:1
     here and failed badly. Secondary keeps the muted register but reads. */
  color: var(--secondary);
  transition: color 0.2s;
}

.field:focus-within label {
  color: var(--primary);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  /* Form controls carry an intrinsic width (input size=20, textarea cols=20)
     that `width: 100%` does not remove. It propagates up through every grid
     ancestor as an automatic minimum, so it has to be cleared here too, not
     just on `.field`. */
  min-width: 0;
  padding: 8px 0;
  border-bottom: var(--hairline) solid var(--outline);
  font-family: var(--font-mono);
  font-size: var(--text-data);
  letter-spacing: 0.05em;
  transition: border-color 0.2s;
}

.field textarea {
  resize: vertical;
  min-height: 84px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.field--select {
  position: relative;
}

.field--select .caret {
  position: absolute;
  right: 4px;
  bottom: 12px;
  pointer-events: none;
  color: var(--outline);
}

.field select {
  appearance: none;
  cursor: pointer;
}

.form__note {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.05em;
  color: var(--secondary);
}

.form__status {
  min-height: 18px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.05em;
  color: var(--accent-ink);
}

.contact-map-side {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding: 40px var(--margin-mobile);
  overflow: hidden;
  background: var(--surface-container);
}

.contact-map-side::before {
  display: none;
}

.hq {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 0;
  background: transparent;
  border: 0;
  border-top: var(--hairline) solid var(--outline-variant);
  padding-top: 28px;
}

.hq:hover {
  box-shadow: none;
  transform: none;
}

.hq h3 {
  margin-bottom: 20px;
}

.hq p {
  margin-bottom: 28px;
  color: var(--on-surface-variant);
}

.hq__est {
  padding-top: 20px;
  border-top: var(--hairline) solid var(--outline-variant);
  font-family: var(--font-mono);
  font-size: var(--text-data);
  letter-spacing: 0.05em;
  color: var(--accent-ink);
}

/* --- Footer --------------------------------------------------------------
   Solid brand blue, which is where the sample the client approved puts it too.
   It also gives the white logo variant somewhere to live.

   Layout:
     phone     — one column, brand → nav → enquire
     tablet    — 2×2: brand | enquire / products | company
     desktop   — four columns, brand and enquire slightly wider, tops aligned
   -------------------------------------------------------------------------- */
.footer {
  margin-top: 0;
  padding-block: 56px 28px;
  background: var(--brand-ink);
  color: var(--on-dark);
  border-top: 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}

.footer__col {
  min-width: 0;
}

.footer h2 {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.footer__logo {
  height: 40px;
  width: auto;
  max-width: min(220px, 100%);
  margin-bottom: 20px;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.footer__col--nav ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* :not(.btn) keeps its hands off the CTA button — this selector is two
   classes wide and would otherwise out-specify .btn--accent, painting the
   orange button's label 76%-white (2.4:1) and resizing its type. */
.footer__col a:not(.btn),
.footer__col p {
  color: var(--on-dark-variant);
  font-size: var(--text-data);
  line-height: 1.45;
  transition: color 0.2s;
}

.footer__col a:not(.btn):hover {
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

.footer__col--brand .iso-badge {
  margin-top: 4px;
}

.subscribe {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 360px;
  gap: 0;
}

.subscribe input {
  flex: 1 1 160px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--surface-lowest);
  border: var(--hairline) solid transparent;
  color: var(--on-surface);
  transition: border-color 0.2s;
}

.subscribe input:focus {
  outline: none;
  border-color: var(--accent);
}

.subscribe button {
  padding: 14px 22px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: var(--text-ui);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.2s;
}

.subscribe button:hover {
  background: var(--accent-deep);
}

.footer-cta {
  margin-bottom: 24px;
  padding: 0 0 24px;
  border: 0;
  border-bottom: var(--hairline) solid rgba(255, 255, 255, 0.18);
  background: transparent;
}

.footer-cta h2 {
  margin-bottom: 12px;
}

.footer-cta__title {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--on-dark);
}

.footer-cta p {
  margin-bottom: 18px;
  max-width: 34ch;
  color: var(--on-dark-variant);
}

.footer-cta .btn {
  width: auto;
}

.footer__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: var(--hairline) solid rgba(255, 255, 255, 0.25);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.05em;
  color: var(--on-dark-variant);
  text-align: center;
}

/* --- Responsive --------------------------------------------------------- */
@media (min-width: 640px) {
  .products {
    grid-template-columns: repeat(2, 1fr);
  }
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero__scroll {
    display: block;
  }
  .step {
    grid-template-columns: 92px 1fr;
    column-gap: 24px;
  }
  .step__num {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-top: 6px;
  }
  .step__title,
  .step__body {
    grid-column: 2;
  }
  .footer__grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 48px 56px;
  }
  /* Brand | Enquiries on row 1; Products | Company on row 2 — keeps the
     enquire block from crushing the link lists into narrow strips. */
  .footer__col--brand { order: 1; }
  .footer__col--enquire { order: 2; }
  .footer__col--nav:nth-of-type(2) { order: 3; }
  .footer__col--nav:nth-of-type(3) { order: 4; }
  .footer__base {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

@media (min-width: 900px) {
  .wrap {
    padding-inline: var(--margin-desktop);
  }
  :root {
    --topbar-height: 40px;
    --nav-height: 88px;
  }
  .topbar {
    display: block;
  }
  .topbar__inner {
    padding-inline: var(--margin-desktop);
  }
  .nav {
    width: 100%;
    /* Keep the mobile-edge inset while the hamburger is still on screen.
       Jumping to --margin-desktop here left an 80px dead strip beside the
       toggle on every laptop below the 1280px link row. */
    padding: 0 var(--margin-mobile) 0 0;
    gap: 32px;
    border: 0;
  }
  .nav__logo {
    padding-inline: 30px;
  }
  .nav__logo img {
    height: 44px;
  }
  .section {
    padding-block: 100px;
  }
  .section--tight {
    padding-block: 80px;
  }
  .hero__slide {
    padding-block: 160px 110px;
  }
  /* The base clamp carries the size — an earlier 24px override here quietly
     shrank the stats on desktop, the exact opposite of the intent. */
  .vision {
    grid-template-columns: 5fr 1fr 5fr 1fr;
  }
  .vision__quote-col {
    grid-column: 1;
  }
  .vision__body {
    grid-column: 3;
  }
  .vision__quote {
    padding-left: 48px;
  }
  .products {
    grid-template-columns: repeat(3, 1fr);
  }
  .capability {
    grid-template-columns: 4fr 7fr;
    gap: 80px;
  }
  .cap-list {
    align-self: start;
  }
  .split {
    grid-template-columns: 4fr 7fr;
    gap: 80px;
  }
  .split__aside {
    position: sticky;
    top: 160px;
    align-self: start;
  }
  .cards--three {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 48px;
    border-top: var(--hairline) solid var(--outline-variant);
  }
  .cards--three .card {
    padding-top: 28px;
  }
  .contact-box {
    grid-template-columns: 1fr 1fr;
  }
  .contact-form-side {
    padding: 64px;
    border-bottom: 0;
    border-right: var(--hairline) solid var(--outline-variant);
  }
  .contact-map-side {
    padding: 64px;
  }
  .footer {
    padding-block: 72px 40px;
  }
  .footer__logo {
    height: 46px;
    margin-bottom: 24px;
  }
  .footer__contact {
    gap: 10px;
    margin-bottom: 24px;
  }
  .footer__col--nav ul {
    gap: 12px;
  }
  .footer-cta {
    margin-bottom: 28px;
    padding-bottom: 28px;
  }
  .footer-cta p {
    margin-bottom: 20px;
  }
  .footer__base {
    margin-top: 56px;
    padding-top: 28px;
  }
}

@media (min-width: 1100px) {
  .footer__grid {
    grid-template-columns:
      minmax(200px, 1.35fr)
      minmax(140px, 0.85fr)
      minmax(140px, 0.85fr)
      minmax(220px, 1.2fr);
    gap: 40px 48px;
  }

  .footer__col--brand,
  .footer__col--enquire,
  .footer__col--nav {
    order: 0;
  }
}

@media (min-width: 1200px) {
  .cards--three {
    grid-template-columns: repeat(2, 1fr);
  }
  .reasons {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Legal / prose pages ------------------------------------------------ */
.legal {
  padding-top: 180px;
}

.prose {
  max-width: 68ch;
}

.prose p,
.prose ul {
  margin-bottom: 24px;
  color: var(--on-surface-variant);
  font-size: var(--text-prose);
  line-height: 1.65;
}

.prose h2 {
  margin-top: 48px;
  margin-bottom: 16px;
  color: var(--on-surface);
}

.prose ul {
  padding-left: 0;
}

.prose li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 24px;
}

.prose li::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  width: 12px;
  height: var(--hairline);
  background: var(--accent-ink);
}

.prose a {
  border-bottom: var(--hairline) solid var(--outline-variant);
  transition: border-color 0.2s, color 0.2s;
}

.prose a:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
}

.prose .btn-text {
  border-bottom: 0;
}

/* ==========================================================================
   Sub-page components
   ========================================================================== */


/* --- Page hero — Quiet -------------------------------------------------- */
.page-hero {
  padding-top: calc(var(--head-height) + 72px);
  padding-bottom: 64px;
  border-bottom: var(--hairline) solid var(--outline-variant);
}

.page-hero h1 {
  margin-bottom: 24px;
  max-width: 18ch;
}

.page-hero__lede {
  max-width: 54ch;
  color: var(--on-surface-variant);
}

.page-hero__meta {
  margin-top: 32px;
  padding-top: 20px;
  border-top: var(--hairline) solid var(--outline-variant);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  color: var(--secondary);
}

/* --- Breadcrumbs -------------------------------------------------------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 128px;
  padding-bottom: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
}

.crumbs a:hover {
  color: var(--accent-ink);
}

.crumbs [aria-current] {
  color: var(--on-surface);
}

/* --- Buttons ------------------------------------------------------------ */
.btn--ghost {
  background: transparent;
  color: var(--brand);
  border: 2px solid var(--brand);
}

.btn--ghost:hover {
  background: var(--brand);
  color: var(--on-primary);
}

/* Outlined on a dark band: white rule, orange on hover. */
.bg-brand .btn--ghost,
.bg-ink .btn--ghost {
  background: transparent;
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, 0.55);
}

.bg-brand .btn--ghost:hover,
.bg-ink .btn--ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.btn--block-sm {
  width: 100%;
  padding-block: 18px;
}

/* --- Spec list ---------------------------------------------------------- */
.specs {
  margin: 28px 0;
  border-top: var(--hairline) solid var(--outline-variant);
}

.spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: var(--hairline) solid var(--outline-variant);
}

.spec dt {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
}

.spec dd {
  font-family: var(--font-mono);
  font-size: var(--text-ui);
  text-align: right;
  /* Values here include an email address and a URL, which have no space to
     break at and otherwise push a narrow phone sideways. */
  min-width: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.tbc {
  color: var(--secondary);
}

.spec-note {
  margin-top: 16px;
  margin-bottom: 20px;
  font-size: var(--text-micro);
  line-height: 1.6;
}

.spec-note a {
  border-bottom: var(--hairline) solid var(--outline-variant);
}

/* --- Catalog rows ------------------------------------------------------- */
.cat-list {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.cat-row {
  display: grid;
  gap: 32px;
}

.cat-row__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 0;
  background: var(--surface-container);
}

.cat-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.cat-row:hover .cat-row__media img {
  transform: scale(1.02);
}

.cat-row__body h2 {
  margin-bottom: 16px;
}

.cat-row__highlights {
  margin: 28px 0 32px;
  padding: 18px 0;
  border-top: var(--hairline) solid var(--outline-variant);
  border-bottom: var(--hairline) solid var(--outline-variant);
}

.cat-row__highlights > .t-label {
  margin-bottom: 14px;
  color: var(--accent-ink);
}

.cat-row__highlights ul {
  display: grid;
  gap: 9px;
}

.cat-row__highlights li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--on-surface-variant);
  line-height: 1.4;
}

.cat-row__highlights li::before {
  content: "";
  width: 12px;
  height: var(--hairline);
  flex: 0 0 12px;
  margin-top: 0.55em;
  background: var(--accent-ink);
}

.cat-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Product page ------------------------------------------------------- */
.prod-hero {
  padding-top: 20px;
  padding-bottom: 64px;
  border-bottom: var(--hairline) solid var(--outline-variant);
}

.prod-hero__grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

.prod-hero__text h1 {
  margin-bottom: 24px;
}

.prod-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.prod-hero__media {
  position: relative;
  border: var(--hairline) solid var(--outline-variant);
  background: var(--surface-container);
}

.prod-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.prod-hero__media figcaption {
  position: static;
  margin-top: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--secondary);
}

.prod-body {
  display: grid;
  gap: 56px;
}

.deflists {
  display: grid;
  gap: 40px;
  margin-top: 48px;
}

.deflist h3 {
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: var(--hairline) solid var(--outline-variant);
  color: var(--secondary);
}

.deflist li {
  position: relative;
  padding: 8px 0 8px 24px;
  color: var(--on-surface-variant);
}

.deflist li::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  width: 12px;
  height: var(--hairline);
  background: var(--accent-ink);
}

.prod-body__aside {
  align-self: start;
  padding: 28px 0 0;
  background: transparent;
  border: 0;
  border-top: var(--hairline) solid var(--outline-variant);
}

.prod-nav {
  display: grid;
  gap: 0;
  border-top: var(--hairline) solid var(--outline-variant);
}

.prod-nav__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 0;
  background: transparent;
  border: 0;
  border-bottom: var(--hairline) solid var(--outline-variant);
  transition: opacity 0.2s;
}

.prod-nav__link:hover {
  transform: none;
  box-shadow: none;
  opacity: 0.85;
}

.prod-nav__link--next {
  text-align: right;
}

/* --- Chips -------------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  padding: 10px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  transition: color 0.2s, border-color 0.2s;
}

.chip:hover {
  background: transparent;
  border-bottom-color: var(--accent);
  color: var(--brand);
}

/* --- Tables ------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  border: var(--hairline) solid var(--outline-variant);
  background: var(--surface-lowest);
}

.data-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--text-data);
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: var(--hairline) solid var(--outline-variant);
}

.data-table thead th {
  background: transparent;
  border-bottom: var(--hairline) solid var(--outline);
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover {
  background: var(--surface);
}

.data-table tbody th {
  font-weight: 600;
}

.data-table a:hover {
  color: var(--accent-ink);
}

.credit-thumb {
  width: 84px;
  height: 56px;
  object-fit: cover;
  border: var(--hairline) solid var(--outline-variant);
}

/* --- Figures ------------------------------------------------------------ */
.figure {
  border: var(--hairline) solid var(--outline-variant);
  background: var(--surface-container);
}

.figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.figure--wide img {
  aspect-ratio: 21 / 9;
}

.figure figcaption {
  padding: 12px 16px;
  border-top: var(--hairline) solid var(--outline-variant);
  background: var(--surface-lowest);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  color: var(--secondary);
}

.media-split {
  display: grid;
  gap: 32px;
}

/* --- Timeline ----------------------------------------------------------- */
.timeline .wrap {
  position: relative;
}

.epoch {
  display: grid;
  gap: 24px;
  margin-bottom: 88px;
}

.epoch:last-child {
  margin-bottom: 0;
}

.epoch__media {
  position: relative;
  border: var(--hairline) solid var(--outline-variant);
  background: var(--surface-container);
}

.epoch__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.epoch__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 0;
  background: transparent;
  color: var(--on-dark);
  letter-spacing: 0.12em;
  text-shadow: 0 1px 12px rgba(16, 26, 64, 0.55);
}

.epoch:nth-child(3n) .epoch__badge {
  background: transparent;
  color: var(--accent);
}

.epoch__text h2 {
  margin-bottom: 20px;
}

.epoch__body {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--on-surface-variant);
  max-width: 54ch;
}

.pillars-grid {
  display: grid;
  gap: 0;
}

.pillar {
  padding: 28px 0;
  border-top: var(--hairline) solid var(--outline-variant);
}

.pillar h3 {
  margin: 12px 0;
}

.pillar p {
  color: var(--on-surface-variant);
  font-size: var(--text-body);
  line-height: 1.6;
}

/* --- CTA band ----------------------------------------------------------- */
.cta-band {
  display: grid;
  gap: 28px;
  align-items: center;
}

.cta-band h2 {
  margin-bottom: 12px;
}

.cta-band p {
  max-width: 56ch;
}

/* Quiet home CTA sits on a light band, not full ink */
.cta-band--quiet {
  padding-block: 8px;
}

.cta-band--quiet h2 {
  color: var(--brand);
}

@media (min-width: 900px) {
  .cta-band--quiet {
    grid-template-columns: 1fr auto;
    gap: 48px;
  }
}

/* --- Contact page ------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: 48px;
  align-items: start;
}

/* Grid items default to a minimum of their content, which lets one stubborn
   descendant hold a column open wider than the screen. */
.contact-grid > *,
.form-row > * {
  min-width: 0;
}

.form-block {
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: var(--hairline) solid var(--outline-variant);
}

.form-block:last-of-type {
  border-bottom: 0;
}

.form-block legend {
  display: flex;
  gap: 14px;
  margin-bottom: 28px;
  padding: 0;
}

.form-row {
  display: grid;
  gap: 28px;
  margin-bottom: 28px;
}

.form-row:last-child {
  margin-bottom: 0;
}

.form-block > .field + .field {
  margin-top: 28px;
}

.contact-aside .hq {
  max-width: none;
}

/* --- Responsive --------------------------------------------------------- */
@media (min-width: 640px) {
  .cat-row__actions .btn,
  .prod-hero__actions .btn {
    min-width: 168px;
  }
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
  .prod-nav {
    grid-template-columns: 1fr 1fr;
  }
  .media-split {
    grid-template-columns: 1fr 1fr;
  }
  .pillars-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
  }
}

@media (min-width: 900px) {
  .page-hero {
    padding-top: 200px;
    padding-bottom: 80px;
  }
  .crumbs {
    padding-top: 150px;
  }
  .cat-list {
    gap: 120px;
  }
  .cat-row {
    grid-template-columns: 7fr 5fr;
    gap: 64px;
    align-items: center;
  }
  .cat-row--flip .cat-row__media {
    order: 2;
  }
  .prod-hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
  .prod-body {
    grid-template-columns: 7fr 4fr;
    gap: 80px;
  }
  .deflists {
    grid-template-columns: 1fr 1fr;
  }
  .prod-body__aside {
    position: sticky;
    top: 140px;
    padding: 0 0 0 28px;
    border-left: var(--hairline) solid var(--outline-variant);
  }
  .epoch {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 120px;
  }
  .epoch--flip .epoch__media {
    order: 2;
  }
  .epoch--flip .epoch__text {
    text-align: right;
  }
  .pillars-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 32px;
  }
  .cta-band {
    grid-template-columns: 1fr auto;
    gap: 56px;
  }
  .cta-band .btn {
    width: auto;
    min-width: 240px;
  }
  .contact-grid {
    grid-template-columns: 7fr 4fr;
    gap: 80px;
  }
  .contact-aside {
    position: sticky;
    top: 140px;
  }
}

/* ==========================================================================
   Brand sync — a light pass of the logo's blue so the mark belongs here.
   Deliberately restrained: red remains the accent colour of the design.
   ========================================================================== */

::selection {
  background: var(--brand-soft);
  color: var(--on-surface);
}

:focus-visible {
  outline-color: var(--brand);
}

/* Active nav item gets a brand underline rather than only a colour shift. */
.nav__link {
  position: relative;
  padding-bottom: 4px;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}

/* Section rules read as two-tone: ink, then a short brand tick.
   Scoped to section dividers — the hero stamp sits inline beside text. */
.section .rule {
  position: relative;
  overflow: visible;
}

.section .rule::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: 16px;
  height: 100%;
  margin-left: 4px;
  background: var(--brand);
}

/* A whisper of brand tint where the logo actually sits. */
.nav__drawer {
  background: linear-gradient(180deg, var(--brand-tint), transparent 40%), var(--surface-lowest);
}

/* Quiet overrides for shared components */
.prod-hero__media figcaption {
  border: 0;
  color: var(--secondary);
}

.chip:hover {
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--accent);
  color: var(--brand);
}

.deflist h3 {
  border-bottom-color: var(--outline-variant);
}

.data-table thead th {
  border-bottom: var(--hairline) solid var(--outline);
}

.subscribe button:hover,
.btn--block:hover {
  background: var(--brand);
}

.prod-nav__link:hover {
  border-color: transparent;
}

.pillar:hover {
  border-top-color: var(--accent);
}

/* ==========================================================================
   ISO certification badges
   ========================================================================== */

.iso-badge__text strong,
.iso-badge__text span {
  font-family: var(--font-display);
}

.iso-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border: 0;
  border-top: var(--hairline) solid var(--outline-variant);
  background: transparent;
  transition: opacity 0.2s;
}

/* On the blue footer the badge inverts rather than punching a white hole in
   the band. The hero is a light wash now, so it keeps the default treatment. */
.footer .iso-badge {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
  border-left-color: var(--accent);
}

.footer .iso-seal {
  stroke: var(--accent);
}

.footer .iso-badge__text strong {
  color: var(--on-dark);
}

.footer .iso-badge__text span {
  color: var(--on-dark-variant);
}

a.iso-badge:hover {
  border-color: transparent;
  box-shadow: none;
  transform: none;
  opacity: 0.9;
}

.iso-seal {
  flex-shrink: 0;
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iso-badge__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  line-height: 1.2;
}

.iso-badge__text strong {
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--on-surface);
}

.iso-badge__text span {
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
}

/* Placements */
.iso-badge--footer {
  margin-top: 28px;
}

.iso-badge--stack {
  display: flex;
  width: 100%;
  margin-top: 24px;
}

.hq .iso-badge--stack {
  margin-top: 20px;
  background: transparent;
}

/* --- Certification panel ------------------------------------------------ */
.cert-split {
  display: grid;
  gap: 48px;
  align-items: start;
}

.cert-panel {
  padding: 0;
  background: transparent;
  border: 0;
  border-top: var(--hairline) solid var(--outline-variant);
  padding-top: 28px;
}

.cert-panel__head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: var(--hairline) solid var(--outline-variant);
}

.cert-panel__head h3 {
  margin: 4px 0;
}

.cert-panel__scope {
  margin: 24px 0 0;
  color: var(--on-surface-variant);
  font-size: var(--text-body);
  line-height: 1.6;
}

.cert-panel .specs {
  margin-bottom: 24px;
}

@media (min-width: 900px) {
  .cert-split {
    grid-template-columns: 5fr 6fr;
    gap: 80px;
  }
}

.hero__cert {
  margin-top: 28px;
}

@media (min-width: 900px) {
  .hero__cert {
    margin-top: 32px;
  }
}

/* ==========================================================================
   Home page — overview blocks
   ========================================================================== */

.home-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 48px;
  margin-bottom: 64px;
}

.home-head > div {
  flex: 1 1 28rem;
  min-width: 0;
  max-width: 40rem;
}

.home-head .btn-text {
  margin-top: 0;
  margin-bottom: 6px;
  flex-shrink: 0;
}

/* --- Check list — quality claims under manufacturing copy --------------- */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 8px 0 36px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.45;
  color: var(--on-surface);
}

.check-list li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background-color: var(--accent);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Field cards — photo overlay panels (reference: project gallery) ---- */
.field-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.field-card {
  position: relative;
  display: block;
  min-height: 300px;
  overflow: hidden;
  color: var(--on-dark);
}

.field-card__media {
  position: absolute;
  inset: 0;
}

.field-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.field-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(16, 26, 64, 0.15) 0%,
    rgba(16, 26, 64, 0.55) 45%,
    rgba(16, 26, 64, 0.92) 100%
  );
  transition: background 0.3s;
}

.field-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  min-height: 300px;
  padding: 32px 28px;
}

.field-card__meta {
  color: var(--accent);
}

.field-card__title {
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.field-card__arrow {
  display: inline-flex;
  margin-top: 4px;
  color: var(--accent);
  transition: transform 0.25s;
}

.field-card__arrow .icon {
  width: 20px;
  height: 20px;
}

.field-card:hover .field-card__media img {
  transform: scale(1.05);
}

.field-card:hover .field-card__arrow {
  transform: translateX(6px);
}

@media (min-width: 900px) {
  .field-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  .field-card {
    min-height: 380px;
  }

  .field-card__body {
    min-height: 380px;
    padding: 36px 32px;
  }
}


/* --- Sector list -------------------------------------------------------- */
.sectors {
  display: grid;
  gap: 40px;
}

.sector-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--hairline) solid var(--outline-variant);
  align-self: start;
}

.sector-list li {
  border-bottom: var(--hairline) solid var(--outline-variant);
}

.sector-list a {
  display: block;
  padding: 16px 8px;
  font-family: var(--font-mono);
  font-size: var(--text-ui);
  letter-spacing: 0.05em;
  transition: background 0.22s, padding-left 0.22s, color 0.22s;
}

.sector-list a:hover {
  background: var(--surface-lowest);
  padding-left: 20px;
  color: var(--brand);
}

/* Industries sits on an ink band, so the list inverts. */
.bg-brand .sector-list,
.bg-brand .sector-list li,
.bg-ink .sector-list,
.bg-ink .sector-list li {
  border-color: rgba(255, 255, 255, 0.28);
}

.bg-brand .sector-list a,
.bg-ink .sector-list a {
  color: var(--on-dark);
}

.bg-brand .sector-list a:hover,
.bg-ink .sector-list a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--on-dark);
}

.bg-brand .btn-text:hover,
.bg-ink .btn-text:hover {
  color: var(--accent);
}

@media (min-width: 640px) {
  .sector-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }
}

@media (min-width: 900px) {
  .sectors {
    grid-template-columns: 4fr 7fr;
    gap: 80px;
  }
}

/* Six nav items plus the logo block and a button need real width. The logo
   block grew to showcase the mark, and it is fixed-width, so this threshold had
   to move up with it: at 1200 the link row and the Enquire button collided.
   Below here the hamburger drawer carries navigation. */
@media (min-width: 1280px) {
  .nav {
    padding: 0 var(--margin-desktop) 0 0;
  }
  .nav__links {
    display: flex;
  }
  .nav__actions {
    margin-left: 0;
  }
  .nav__toggle,
  .nav__drawer {
    display: none;
  }
}

@media (min-width: 1400px) {
  .nav__logo {
    padding-inline: 36px;
  }
  .nav__logo img {
    height: 50px;
  }
  .nav.is-scrolled .nav__logo img {
    height: 42px;
  }
}

/* Phone stays out of the desktop nav — it crowded the link row.
   Number remains in the drawer, footer and contact page. */

/* ==========================================================================
   Micro-animations
   Every rule here is additive — the page is fully legible with none of it.
   The reduced-motion block at the end switches all of it off.
   ========================================================================== */

/* --- Scroll progress ---------------------------------------------------- */
.scroll-progress {
  pointer-events: none;
  display: none;
}

/* --- Hero entrance ------------------------------------------------------
   Pure CSS animation with `both` fill, so it plays on load with no JS.
   If the script never arrives the hero still ends up fully visible.
   Vertical motion only — a horizontal drift would push past the viewport. */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ruleDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Scoped to the first slide. The others are off-canvas at load, so animating
   them just burns their entrance before anyone can see it — their motion is
   the track slide itself. */
.hero__slide:first-child .hero__title  { animation: heroIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
.hero__slide:first-child .hero__lede   { animation: heroIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both; }
.hero__slide:first-child .eyebrow      { animation: heroIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both; }
.hero__cert     { animation: heroIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both; }
.hero__actions  { animation: heroIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.40s both; }
.hero__stats    { animation: heroIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.50s both; }


/* --- Photography ---------------------------------------------------------
   Product and plant images stay natural and immediately visible. */
.figure img,
.cat-row__media img,
.epoch__media img,
.prod-hero__media img,
.product__art img {
  filter: none;
  clip-path: none;
}


/* --- Drawer link stagger ------------------------------------------------ */
.nav__drawer a {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s;
}

.nav__drawer.is-open a {
  opacity: 1;
  transform: none;
}

.nav__drawer.is-open a:nth-child(1) { transition-delay: 0.08s; }
.nav__drawer.is-open a:nth-child(2) { transition-delay: 0.13s; }
.nav__drawer.is-open a:nth-child(3) { transition-delay: 0.18s; }
.nav__drawer.is-open a:nth-child(4) { transition-delay: 0.23s; }
.nav__drawer.is-open a:nth-child(5) { transition-delay: 0.28s; }
.nav__drawer.is-open a:nth-child(6) { transition-delay: 0.33s; }
.nav__drawer.is-open a:nth-child(7) { transition-delay: 0.38s; }

/* --- Nav condense on scroll -------------------------------------------- */
.nav {
  transition: box-shadow 0.3s, background 0.3s, padding 0.3s;
}

/* The logo now sits inside a full-height colour block, so condensing has to
   leave the bar's height alone — shrinking padding would leave the block
   floating off the top edge. Only the mark itself steps down. */
@media (min-width: 900px) {
  .nav__logo img {
    transition: height 0.3s;
  }
  .nav.is-scrolled .nav__logo img {
    height: 38px;
  }
}

/* --- Spec rows ---------------------------------------------------------- */
.spec {
  transition: padding-left 0.25s, background 0.25s;
}

.spec:hover {
  padding-left: 8px;
  background: var(--brand-tint);
}

/* --- Buttons ------------------------------------------------------------ */
.btn,
.btn--ghost {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.3s;
}

.btn:active::after {
  opacity: 0.12;
  transition: none;
}

/* --- Form validation shake --------------------------------------------- */
.is-invalid {
  animation: nudge 0.4s;
  border-color: var(--accent) !important;
}

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* --- Card / link polish ------------------------------------------------- */
.card__num,
.step__num {
  transition: letter-spacing 0.3s, color 0.3s;
}

.card:hover .card__num,
.step:hover .step__num {
  letter-spacing: 0.18em;
}

.cap-list li .name {
  transition: transform 0.25s;
  display: inline-block;
}

.cap-list li:hover .name {
  transform: translateX(3px);
}

.iso-seal circle,
.iso-seal path {
  transition: stroke 0.3s;
}

a.iso-badge:hover .iso-seal path {
  stroke: var(--accent);
}

/* ==========================================================================
   Motion off — everything above collapses to a static, fully visible page
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    display: none;
  }
  .hero__title,
  .hero__lede,
  .hero .eyebrow,
  .hero__track,
  .hero__cert,
  .hero__actions,
  .hero__stats,
  .nav__drawer a {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__art img {
    animation: none !important;
    transform: none !important;
  }
  .figure img,
  .cat-row__media img,
  .epoch__media img,
  .product__art img {
    clip-path: none !important;
  }
  .is-invalid {
    animation: none;
  }
}

/* ==========================================================================
   Touch targets — WCAG 2.5.8 wants ~44px on coarse pointers.
   Applied via hit-area padding so nothing moves visually.
   ========================================================================== */
@media (pointer: coarse), (max-width: 900px) {
  .nav__toggle {
    padding: 9px;
    margin: -9px;
  }

  /* Do not add padding-block on .nav__logo — that inset the mark inside the
     orange and read as white gaps at the top and bottom of the block. The
     full-height accent slab is already a large enough hit area. */

  .footer__col ul {
    gap: 2px;
  }

  .footer__col ul a,
  .footer__contact a {
    display: inline-block;
    padding-block: 11px;
  }

  .btn-text {
    padding-block: 12px;
  }

  .chip {
    padding: 13px 20px;
  }

  .crumbs a,
  .crumbs span {
    padding-block: 8px;
  }

  .prose a:not(.btn-text) {
    padding-block: 8px;
  }

  .spec dd a,
  .hq a,
  .spec-note a,
  .form__note a {
    display: inline-block;
    padding-block: 11px;
  }


  .data-table a {
    display: inline-block;
    padding-block: 8px;
  }
}

/* --- Mobile sticky enquire — conversion after hero folds ---------------- */
.mobile-enquire {
  display: none;
}

@media (max-width: 768px) {
  .mobile-enquire {
    position: fixed;
    z-index: 40;
    left: 16px;
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 14px 22px;
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-size: var(--text-ui);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    box-shadow: 0 12px 28px rgba(16, 26, 64, 0.28);
    transition: transform 0.2s, opacity 0.2s, background 0.2s;
  }

  .mobile-enquire .icon {
    width: 16px;
    height: 16px;
  }

  .mobile-enquire:hover,
  .mobile-enquire:focus-visible {
    background: var(--accent-deep);
  }

  .mobile-enquire:active {
    transform: scale(0.98);
  }

  /* Keep clear of the fixed bar */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  /* Hide while the mobile nav drawer is open */
  body:has(.nav__drawer.is-open) .mobile-enquire {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
  }
}

/* --- Utilities -----------------------------------------------------------
   One-off layout nudge helpers. These live at the end of the cascade so a
   utility always wins over a component rule — the same guarantee an inline
   style used to give, without the attribute. Only add one when a value is
   used more than once; otherwise put it in the component that owns it.
   ----------------------------------------------------------------------- */

.u-self-center { align-self: center; }
.u-rotate-180  { transform: rotate(180deg); }

.u-mb-20 { margin-bottom: 20px; }
.u-mb-24 { margin-bottom: 24px; }
.u-mb-32 { margin-bottom: 32px; }
.u-mb-40 { margin-bottom: 40px; }
.u-mb-48 { margin-bottom: 48px; }

.u-mt-24 { margin-top: 24px; }
.u-mt-40 { margin-top: 40px; }
.u-mt-48 { margin-top: 48px; }

.u-maxw-38 { max-width: 38ch; }
.u-maxw-42 { max-width: 42ch; }
.u-maxw-46 { max-width: 46ch; }
.u-maxw-68 { max-width: 68ch; }
.u-maxw-none { max-width: none; }

/* ==========================================================================
   Reference layout
   The client approved a construction-sector layout built on: a utility strip
   above a nav anchored by a solid colour block, a bordered four-up services
   grid with an accent rule under each card, and a hero whose copy sits on a
   light wash over full-bleed plant photography. The first and last of those
   are handled up in the header and hero sections; the services grid is below.
   ========================================================================== */

/* --- Hero copy ----------------------------------------------------------- */
.hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-width: 38rem;
}

.hero .eyebrow {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
  color: var(--accent);
}

.hero .eyebrow::before {
  background: var(--accent);
}

/* --- Services grid — bordered four-up ------------------------------------
   Each card is a whole product line: a standing label, the name, what it is
   for, and a plus that reads as "there is more behind this".
   ------------------------------------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.svc-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 30px 28px 26px;
  background: var(--surface-lowest);
  border: var(--hairline) solid var(--outline-variant);
  border-bottom: 3px solid var(--accent);
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}

.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(16, 26, 64, 0.09);
  border-color: var(--outline);
  border-bottom-color: var(--accent-deep);
}

.svc-card__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* Reserve two lines whether the name needs them or not. Four of the nine
   product names wrap; without this the tagline under a wrapped name sits a
   line lower than the taglines beside it and the row reads ragged. */
.svc-card__title {
  min-height: 2.5em;
  color: var(--brand);
}

.svc-card__tag {
  color: var(--on-surface-variant);
  font-size: var(--text-data);
  line-height: 1.5;
}

/* Pushed to the bottom edge so the plus lines up across a row whatever the
   name wraps to. */
.svc-card__plus {
  display: block;
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent-ink);
  transition: transform 0.25s;
}

.svc-card:hover .svc-card__plus {
  transform: rotate(90deg);
}

@media (min-width: 400px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (min-width: 560px) {
  .svc-grid {
    gap: 24px;
  }
}

@media (min-width: 1080px) {
  .svc-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-card:hover,
  .svc-card:hover .svc-card__plus {
    transform: none;
  }
}

/* ==========================================================================
   Hero slider controls
   Arrows bottom-left with the next button filled in accent, dots to their
   right — the arrangement the client's reference uses. Everything here is
   additive: with JS off the first slide is already the visible one and the
   controls simply do nothing, which is why they are never the only route to
   any content on the page.
   ========================================================================== */
.hero__controls {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 32px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 24px;
}

.hero__arrows {
  display: flex;
  flex: none;
}

.hero__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--surface-lowest);
  color: var(--brand);
  border: var(--hairline) solid var(--outline-variant);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.hero__arrow .icon {
  width: 18px;
  height: 18px;
}

.hero__arrow:hover {
  background: var(--brand);
  color: var(--on-primary);
  border-color: var(--brand);
}

/* The forward action is the one being encouraged, so it carries the accent —
   same rule the rest of the site follows for primary actions. */
.hero__arrow--next {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.hero__arrow--next:hover {
  background: var(--accent-deep);
  color: var(--on-accent);
  border-color: var(--accent-deep);
}

.hero__dots {
  display: flex;
  align-items: center;
  /* Negative gap pulls the 24px hit areas back to a 10px visual rhythm; the
     targets still meet at no less than 24px apart centre to centre. */
  gap: 0;
}

/* The button itself carries the 24x44 hit area — WCAG 2.5.8 measures the
   control, not a pseudo-element drawn over it — and ::before draws the 10px
   dot people actually see. A 10px button with an invisible 44px overlay would
   pass a glance and fail an audit. */
.hero__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 44px;
  background: none;
}

.hero__dot::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--outline);
  border-radius: 50%;
  transition: background 0.25s, transform 0.25s;
}

.hero__dot:hover::before {
  background: var(--brand);
}

.hero__dot.is-active::before {
  background: var(--accent-deep);
  transform: scale(1.35);
}

/* Slides that are not on screen must not be reachable by tab and must not be
   read out. The generated HTML ships `inert` on every slide after the first
   and the script moves it; this is the CSS half of the same contract. */
.hero__slide[inert] {
  user-select: none;
}

@media (max-width: 767px) {
  .hero__controls {
    bottom: 20px;
    gap: 16px;
  }
  .hero__arrow {
    width: 44px;
    height: 44px;
  }
}

/* A slider that moves on its own is a motion effect. Under reduced-motion the
   track jumps rather than slides, and main.js never starts the autoplay. */
@media (prefers-reduced-motion: reduce) {
  .hero__track {
    transition: none !important;
  }
  .hero__dot.is-active::before {
    transform: none;
  }
}