/* MTCS V6 GLOBAL SITE STYLESHEET */

/* Design tokens - V1 palette with blue gradient bands */
:root {
  --blue: #1F5CC5;
  --blue-deep: #16418F;
  --blue-tint: #EBF1FB;
  --green: #55B348;
  --green-ink: #2E7D27;
  --green-press: #256A1F;
  --ink: #142138;
  --body-c: #33415C;
  --muted: #5B6880;
  --line: #DCE4F0;
  --line-dark: #C3D0E4;
  /* Large surfaces are a soft grey, never pure white. Pure #fff is reserved for
     small raised components that have to lift off that grey: the language
     panel, the mobile menu panel and the machine image plate. */
  --bg-soft: #F4F7FB;
  --bg: var(--bg-soft);
  --band-grey: #EEF2F7;
  --band-blue: #0B54A8;
  --band-blue-2: #16418F;
  --plate-blue: #093A79;   /* photo plate on a blue card: deeper than both ends of the gradient */
  --radius: 12px;
  --shadow: 0 10px 30px rgba(20,33,56,.10);
  --maxw: 1180px;
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--body-c);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  cursor: pointer;
}

h1, h2, h3 {
  font-weight: 700;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(32px, 5vw, 52px);
}

h2 {
  font-size: clamp(26px, 4vw, 38px);
}

h3 {
  font-size: clamp(20px, 3vw, 26px);
}

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

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}

section {
  padding: 76px 0;
  scroll-margin-top: 82px;
}

/* inset-inline-start, not left: this is the one control that has to mirror with
   the document, or the Arabic skip link lands on the wrong edge. */
.skip-link {
  position: absolute;
  top: -100px;
  inset-inline-start: 10px;
  z-index: 999;
  padding: 10px 16px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}

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

/* The skip link's own target. Without this the sticky header covers the top of
   #main after the jump and the first thing in it is not visible. */
#main {
  scroll-margin-top: 5rem;
}

/* ---------- Entrance intro, ported from the domestic site ------------------
   Beat 1: logo draws in left to right.
   Beat 2: green sweep crosses the logo.
   Beat 3: a green wipe rises, then the whole sheet lifts to reveal the page.
   All CSS keyframes; the JS only gates the session and the skip. Under 2s.
   z-index is 1000 rather than the domestic site's 100 because this sheet has a
   skip link at 999 that would otherwise sit on top of the curtain. */
#intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: introCurtain .45s cubic-bezier(.65,0,.35,1) 1.45s forwards;
}

#intro.intro-out {
  animation: introCurtain .3s ease-in 0s forwards;
}

.intro-inner {
  text-align: center;
  position: relative;
  z-index: 1;
}

/* The second term is the height guard: the lockup is 1.34:1, so capping the
   width at 105vh keeps it inside a short laptop window. */
.intro-logo {
  position: relative;
  overflow: hidden;
  width: min(clamp(150px, 30vw, 360px), 105vh);
  margin: 0 auto;
  border: clamp(3px,.45vw,5px) solid var(--green);
  border-radius: clamp(10px,1.6vw,18px);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: introLogo .5s cubic-bezier(.2,.7,.3,1) .05s forwards;
}

.intro-logo img {
  width: 100%;
  height: auto;
}

/* beat 2: the green sweep */
.intro-logo::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(105deg, transparent 40%, rgba(85,179,72,.45) 50%, transparent 60%);
  transform: translateX(-140%);
  animation: introSweep .45s ease-in-out .5s forwards;
}

/* beat 3, first pass: the green panel rises */
.intro-wipe {
  position: absolute;
  inset: 0;
  background: var(--green);
  transform: translateY(101%);
  animation: introWipe .4s cubic-bezier(.65,0,.35,1) 1.05s forwards;
}

@keyframes introLogo {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  55% { opacity: 1; }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes introSweep { to { transform: translateX(140%); } }
@keyframes introWipe { to { transform: translateY(0); } }
@keyframes introCurtain { to { transform: translateY(-101%); visibility: hidden; } }

/* Reduced motion kills the entrance outright. The gate script removes the node
   as well, so this is the belt to that braces. */
@media (prefers-reduced-motion: reduce) {
  #intro { display: none !important; }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(165deg, var(--band-blue) 0%, var(--band-blue-2) 100%);
  border-bottom: 3px solid var(--green);
}

/* Header sits on blue, so its controls are white. Panels stay white with dark
   text; only the bar itself is blue.
   The language summary is deliberately NOT in this group: it is a grey button
   with dark ink, so a #fff here would blank it out against its own background. */
.site-header .main-nav a,
.site-header .mobile-menu > summary {
  color: #fff;
}

.site-header .main-nav a:hover,
.site-header .mobile-menu > summary:hover {
  color: #CFE0FA;
}

.site-header .main-nav a[aria-current] {
  color: #fff;
  text-decoration: underline 3px var(--green);
  text-underline-offset: 7px;
}

/* The language button is a grey chip with dark ink, so it reads as a control
   rather than dissolving into the blue bar. Contrast is measured against the
   chip's own grey ground, not against the header. */
.site-header .lang-menu > summary {
  background: var(--band-grey);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 8px;
}

.site-header .lang-menu > summary:hover {
  background: #fff;
  color: var(--blue);
  border-color: rgba(255,255,255,.6);
}

/* The hamburger keeps white text, so it must not carry the white ground the
   base rule gives it. On blue it is a transparent outlined button. */
.site-header .mobile-menu > summary {
  background: transparent;
  border-color: rgba(255,255,255,.34);
}

.site-header .mobile-menu > summary:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.6);
}

.site-header a:focus-visible,
.site-header summary:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
  height: 88px;
  display: flex;
  align-items: center;
  gap: 26px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
}

.brand img {
  height: 72px;
  width: auto;
  border: 2px solid var(--green);
  border-radius: 9px;
  display: block;
}

.main-nav {
  display: flex;
  gap: 18px;
  margin-inline-start: auto;
  align-items: center;
}

.main-nav a {
  text-decoration: none;
  color: var(--body-c);
  font-weight: 600;
  font-size: 14.5px;
}

.main-nav a:hover {
  color: var(--blue);
}

.main-nav a[aria-current] {
  color: var(--blue);
  text-decoration: underline 3px var(--green);
  text-underline-offset: 7px;
}

/* Language dropdown */
.lang-menu {
  position: relative;
  border-inline-start: 1px solid var(--line);
  padding-inline-start: 18px;
}

.lang-menu > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--band-grey);
  user-select: none;
}

.lang-menu > summary::-webkit-details-marker {
  display: none;
}

.lang-menu > summary:hover {
  color: var(--blue);
  border-color: var(--line-dark);
}

.lang-menu .lang-globe {
  width: 16px;
  height: 16px;
  flex: none;
}

.lang-menu .lang-caret {
  width: 10px;
  height: 10px;
  flex: none;
  transition: transform 0.15s ease;
}

.lang-menu[open] .lang-caret {
  transform: rotate(180deg);
}

/* The open panel is a raised surface, not a plain white square: white ground
   lifting off the grey page on a hairline border and the shared shadow. */
.lang-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 50;
  min-width: 184px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.lang-panel a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--body-c);
  text-decoration: none;
  white-space: nowrap;
}

.lang-panel a:hover {
  background: var(--bg-soft);
  color: var(--blue);
}

.lang-panel a[aria-current] {
  color: var(--blue);
  font-weight: 700;
}

/* Mobile menu: hidden at 981px and up, shown at 980px and below */
.mobile-menu {
  display: none;
}

.mobile-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
  color: var(--body-c);
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  user-select: none;
}

.mobile-menu > summary::-webkit-details-marker {
  display: none;
}

.mobile-menu > summary:hover {
  color: var(--blue);
  border-color: var(--line-dark);
}

.mobile-menu .menu-bars {
  width: 22px;
  height: 22px;
  flex: none;
}

.mobile-panel {
  position: absolute;
  inset-inline-start: 12px;
  inset-inline-end: 12px;
  top: 100%;
  z-index: 50;
  margin-top: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.mobile-panel a {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--body-c);
  text-decoration: none;
}

.mobile-panel a:hover {
  background: var(--bg-soft);
  color: var(--blue);
}

.mobile-panel a[aria-current] {
  color: var(--blue);
  font-weight: 700;
}

@media (max-width: 980px) {
  .main-nav {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .header-inner {
    gap: 10px;
  }

  .lang-menu {
    margin-inline-start: auto;
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

@media (max-width: 700px) {
  .header-inner {
    height: 72px;
  }

  .brand img {
    height: 56px;
  }
}

/* Hero */
.hero {
  position: relative;
  padding: 0;
  min-height: min(78vh, 700px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--blue-deep);
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The angled scrim runs from the text edge outwards, so its angle has to follow
   the writing direction. A gradient angle is always physical, so the angle is
   held in a custom property and mirrored (360 - 100) under dir=rtl; otherwise
   the light end stays on the right and the Arabic hero text sits on it.
   The far stop is heavy because the vans photograph goes to near-white at the
   right, and at 375px the hero text spans the full band. Measured. */
.hero-scrim {
  --hero-scrim-angle: 100deg;
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,22,46,.38), rgba(10,22,46,.28) 45%, rgba(10,22,46,.60)),
              linear-gradient(var(--hero-scrim-angle), rgba(10,22,46,.84) 0%, rgba(10,22,46,.72) 48%, rgba(10,22,46,.64) 100%);
}

[dir="rtl"] .hero-scrim {
  --hero-scrim-angle: 260deg;
}

.hero .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 84px;
  padding-bottom: 72px;
}

.hero-content {
  max-width: 680px;
  color: #fff;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8CD980;
  margin-bottom: 14px;
}

.hero h1 {
  color: #fff;
  margin-bottom: 18px;
}

.hero-text {
  font-size: 18px;
  line-height: 1.6;
  color: #D6E3F8;
  margin-bottom: 28px;
  max-width: 54ch;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  padding: 14px 26px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  display: inline-block;
  transition: all 0.15s ease;
}

.btn-primary {
  background: var(--green-ink);
  color: #fff;
}

.btn-primary:hover {
  background: var(--green-press);
}

.btn-ghost {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  background: transparent;
}

.btn-ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}

/* Buttons in the hero sit on a photograph, so a single blue ring is only as
   visible as whatever it lands on: measured 1.7:1 to 2.9:1 against the vans.
   Two layers instead, a white ring inside a dark halo, so one of the two always
   separates from the image whatever is behind it. The outline is removed only
   because the box-shadow replaces it. */
.hero .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(10,22,46,.85);
}

/* Band sections - alternating grey and blue gradient */
.promise-num {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--green);
  margin-bottom: 10px;
}

.doc-dl {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc-dl .doc-meta {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.doc-downloads li {
  margin-bottom: 14px;
}

.doc-lang-note {
  font-size: 14px;
  color: var(--muted);
}

.band-grey {
  background: var(--band-grey);
}

.band-blue {
  background: linear-gradient(165deg, var(--band-blue) 0%, var(--band-blue-2) 100%);
  color: #fff;
}

/* A light blue tinted band. It counts as a LIGHT band for alternation, so its
   text is dark, exactly as on grey. Used for the quote panel on the home page,
   where another white block would read as more of the same. */
.band-tint {
  background: var(--blue-tint);
}

/* Kept so a stray band-white can never fall through to a pure white slab.
   apply_banding() rewrites the class before it ships, so this is a backstop. */
.band-white {
  background: var(--bg-soft);
}

/* ---------------------------------------------------------------------------
   A CARD ALWAYS INVERTS AGAINST ITS SECTION

   The client's rule, and it is absolute: a card on a grey ground is blue, a card
   on a blue ground is light. So the fill is decided by the SECTION the card sits
   in, never by the card class, and it cannot drift when apply_banding() moves a
   section from one band to the other.

   Every card class the site has is listed in both directions:
   .card, .machine-card, .industry-card, .promise-card, .step-card, .route, .rev-box, .facts-card.
   Adding a sixth card component means adding it to both lists here, and nowhere
   else. The 2px var(--green) border is on the card itself and survives either
   fill.

   Blue fill in: .band-grey, .band-tint, .band-white. All three are light grounds
   (band-white resolves to --bg-soft, and band-tint is the pale blue quote panel),
   so a card on any of them inverts to blue.

   Note for the photographs: a card that turns blue can only carry a cutout with a
   real alpha channel. An opaque cutout padded onto a light ground draws that
   ground as a rectangle on the blue fill. process_cutouts() keeps the alpha of
   every source that has one, and the fleet cutouts are transparent PNGs for
   exactly this reason.
   --------------------------------------------------------------------------- */

:is(.band-grey, .band-tint, .band-white)
  :is(.card, .machine-card, .industry-card, .promise-card, .step-card, .route, .rev-box, .facts-card) {
  background: linear-gradient(165deg, var(--band-blue) 0%, var(--band-blue-2) 100%);
  border: 2px solid var(--green);
  color: #fff;
}

/* Set on the card root AND on its children, because several card components
   colour their own headings and body text and would otherwise keep a dark
   colour on the blue fill. */
:is(.band-grey, .band-tint, .band-white)
  :is(.card, .machine-card, .industry-card, .promise-card, .step-card, .route, .rev-box, .facts-card)
  :is(h2, h3, h4, b, strong) {
  color: #fff;
}

/* .88 white gives 6.08:1 at the light end of the gradient and 7.82:1 at the
   dark end, so body copy clears 4.5:1 across the whole fill. */
:is(.band-grey, .band-tint, .band-white)
  :is(.card, .machine-card, .industry-card, .promise-card, .step-card, .route, .rev-box, .facts-card)
  :is(p, li, span, div, small, dd, dt, td, th, label) {
  color: rgba(255,255,255,.88);
}

:is(.band-grey, .band-tint, .band-white)
  :is(.card, .machine-card, .industry-card, .promise-card, .step-card, .route, .rev-box, .facts-card) a {
  color: #fff;
}

/* The photo plate has to disappear into the blue fill. A plate of its own colour
   under a transparent cutout is the pale rectangle the client saw.
   .machine-media is NOT reset here: it is the plate for the opaque kit cutouts,
   which are padded on white and need a white plate to be continuous with. The
   transparent cutouts use .machine-media-flush, which carries no ground in any
   band. */
:is(.band-grey, .band-tint, .band-white)
  :is(.card, .machine-card, .industry-card, .promise-card, .step-card, .route, .rev-box, .facts-card)
  .industry-media {
  background: transparent;
}

/* Accents that are brand green on a light card. Green gives 2.78:1 on the
   gradient, so on a blue card the numeral takes a pale green instead:
   #C9F0C2 measures 5.87:1 at the light end and 7.65:1 at the dark end. */
:is(.band-grey, .band-tint, .band-white)
  :is(.card, .machine-card, .industry-card, .promise-card, .step-card, .route, .rev-box, .facts-card)
  .promise-num {
  color: #C9F0C2;
}

/* The step numeral keeps its filled --green-press disc: white on that disc is
   6.65:1 whatever the card behind it is doing. */
:is(.band-grey, .band-tint, .band-white)
  :is(.card, .machine-card, .industry-card, .promise-card, .step-card, .route, .rev-box, .facts-card)
  .step-number {
  color: #fff;
}

/* The other direction: a card in a blue band takes the light fill. */
.band-blue :is(.card, .machine-card, .industry-card, .promise-card, .step-card, .route, .rev-box, .facts-card) {
  background: var(--bg-soft);
  border: 2px solid var(--green);
  color: var(--body-c);
}

/* .industry-card is the one card that writes white on its own children, so it
   needs them turned back explicitly on the light fill. */
.band-blue .industry-card :is(h2, h3) {
  color: var(--ink);
}

.band-blue :is(.industry-card p, .industry-card .industry-approach) {
  color: var(--body-c);
}

.band-blue .industry-card .industry-approach {
  border-top-color: var(--line);
}

/* The machine plate goes back to the white the kit cutouts were shot on. */
.band-blue .machine-media {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.band-blue .machine-media:empty {
  border-bottom-color: transparent;
}

/* ---------------------------------------------------------------------------
   READABILITY INSIDE BLUE BANDS

   .band-blue sets color:#fff on the whole section. That is right for text
   sitting DIRECTLY on the blue gradient, and wrong for any component that
   carries its own light surface: a white card inside a blue band inherits
   white text and goes invisible.

   So: white text on the gradient, dark text on light components. That is the
   whole distinction. These lists cover the components that are NOT cards and so
   keep a light surface in every band: the quote form, the document rows and the
   evidence panels. The card classes are here too, and agree with the inversion
   block above, which is what makes a light card in a blue band readable.
   --------------------------------------------------------------------------- */

/* Every component with its own light ground. Setting the colour on the
   component root is what stops the white from cascading into its children. */
.band-blue :is(.card, .promise-card, .step-card, .machine-card, .contact-form,
               .doc-list li, .form-fallback, .evidence, .quote-summary) {
  color: var(--body-c);
}

.band-blue :is(.card, .promise-card, .step-card, .machine-card, .contact-form,
               .doc-list li, .form-fallback, .evidence, .quote-summary)
          :is(p, li, span, div, small, dd, dt, td, th, label) {
  color: var(--body-c);
}

.band-blue :is(.card, .promise-card, .step-card, .machine-card, .contact-form,
               .doc-list li, .form-fallback, .evidence, .quote-summary)
          :is(b, strong) {
  color: var(--ink);
}

/* Headings on a light component. Components that set their own heading colour
   (.promise-card, .machine-card) already win on source order and keep it. */
.band-blue :is(.card, .doc-list li, .form-fallback, .evidence, .quote-summary)
          :is(h2, h3, h4) {
  color: var(--ink);
}

/* Links on a light component read blue, never white. */
.band-blue :is(.card, .promise-card, .step-card, .machine-card, .contact-form,
               .doc-list li, .form-fallback, .evidence, .quote-summary) a,
.band-blue .doc-dl,
.band-blue .doc-list a {
  color: var(--blue);
}

/* Secondary metadata keeps its muted grey, which passes on a light ground. */
.band-blue :is(.card, .doc-list li, .evidence, .quote-summary) .doc-meta,
.band-blue .doc-dl .doc-meta {
  color: var(--muted);
}

/* The download row's file-size chip must not pick up the link colour rule
   above, which would beat the .doc-dl .doc-meta declaration on order alone. */
.band-blue a.doc-dl .doc-meta {
  color: var(--muted);
}

/* The language note sits DIRECTLY on the gradient, not on a card, so it takes
   the light treatment rather than the muted grey it uses on a pale band. It is
   empty in English and only renders in the other six locales. */
.band-blue .doc-lang-note {
  color: #D6E3F8;
}


/* A 3px green seam at every section boundary, site-wide. Applied to the top edge
   of each section that follows another, plus the boundary into the footer, so two
   same-coloured bands never run together without a divider. */
main > section + section,
main > section:first-child {
  border-top: 3px solid var(--green);
}

main > section:last-child {
  border-bottom: 3px solid var(--green);
}

.band-blue h2, .band-blue h3 {
  color: #fff;
}

.band-blue .eyebrow {
  color: #8CD980;
}

/* Section headings */
.section-header {
  text-align: center;
  margin-bottom: 48px;
}

/* The page title block, where a section opens with the h1 and then goes on to a
   headed group of its own. Tighter beneath than a .section-header, so the group
   heading below it reads as belonging to the page rather than floating free. */
.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header p {
  max-width: 62ch;
  margin: 16px auto 0;
}

/* 13px/600 on the grey band, so it needs 4.5:1. Brand green gives 2.36:1 and
   --green-ink only 4.58:1, a pass with no headroom left for a lighter band;
   --green-press gives 5.91:1 on #EEF2F7 and 6.18:1 on --bg-soft. */
.section-header .eyebrow {
  color: var(--green-press);
  margin-bottom: 10px;
}

.band-blue .section-header .eyebrow {
  color: #8CD980;
}

/* Promises grid */
.promises-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  max-width: 1000px;
  margin: 0 auto;
}

.promise-card {
  background: var(--bg-soft);
  border: 2px solid var(--green);
  padding: 26px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.promise-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: var(--blue);
}

.promise-card p {
  font-size: 15px;
  line-height: 1.5;
}

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

/* The green border reads against both the blue card fill and the light page
   ground, so it works on the grey grid section and on any band. */
.industry-card {
  background: linear-gradient(165deg, var(--band-blue) 0%, var(--band-blue-2) 100%);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.industry-card:hover {
  box-shadow: var(--shadow);
}

.industry-media {
  aspect-ratio: 3/2;
  background: var(--blue-tint);
  overflow: hidden;
}

.industry-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.industry-body {
  padding: 20px;
}

.industry-card :is(h2, h3) {
  font-size: 20px;
  margin-bottom: 10px;
  color: #fff;
}

.industry-card p {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,.88);
}

.industry-approach {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 14px;
  color: rgba(255,255,255,.88);
}

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

.machine-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  overflow: hidden;
}

/* The media box keeps a fixed slot whether or not the card carries a cutout, so a
   card with no image still lines its heading up with its neighbours.
   This plate stays pure white: the cutouts are photographed on white, so any
   other ground would show as a rectangle behind the machine. */
.machine-media {
  aspect-ratio: 4/3;
  background: #fff;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.machine-media:empty {
  border-bottom-color: transparent;
}

/* The fleet cutouts carry their own alpha, so their plate carries no colour at
   all and the card fill shows straight through. That is what lets the same
   photograph sit on a blue card in a grey band and on a light card in a blue
   band without a rectangle behind it either way. No dividing rule either: with
   nothing between the plate and the body there is no edge to draw.

   Written as a two-class selector so it outweighs the .band-blue plate rule,
   which restores the white ground the OPAQUE kit cutouts need. */
.machine-media.machine-media-flush {
  background: transparent;
  border-bottom-color: transparent;
}

.machine-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A thin green rule marks where the machine ends and its description begins.
   Asked for on the blue cards; applied to every machine card because the same
   boundary exists on the light ones and a rule that appears on only half of
   them reads as an accident. Inset to the body padding, so it never runs to
   the card edge. */
.machine-card h3 {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--green);
}

/* TWO TONES ON THE BLUE CARDS.
   A light card already reads as two panels: the body is --bg-soft (#F4F7FB) and
   the photo plate is pure white. The blue cards had one tone, because the fleet
   plate is .machine-media-flush — transparent, so the photograph sat on exactly
   the same blue as the text and there was no picture area to see.

   So the flush plate gets its own deeper blue when the card itself is blue.
   Deeper rather than lighter: the fleet cutouts are pale municipal machines, so
   a darker ground raises their contrast instead of washing them out. The
   two-class selector is needed to outrank the flush rule above, which exists to
   keep the plate transparent on light cards. */
:is(.band-grey, .band-tint, .band-white)
  .machine-card .machine-media.machine-media-flush {
  background: var(--plate-blue);
  border-bottom: 1px solid rgba(255,255,255,.20);
}

/* TRUST STRIP — verifiable claims, and where a real badge will sit.
   Typographic rather than a row of logos, because there are no logos to show
   yet and a claim the reader can check beats a mark they cannot. Wraps rather
   than truncates: the Russian and French items are roughly half again as long
   as the English. */
.trust-strip {
  border-block: 1px solid var(--line);
  padding: 18px 0;
}

.trust-strip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-strip li {
  position: relative;
  padding-inline-start: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--body-c);
}

/* inset-inline-start, not left: the bullet has to move to the right-hand side
   of the text in Arabic, and a physical property would leave it stranded. */
.trust-strip li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--green);
}

.trust-strip--footer {
  border-block: none;
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding: 20px 0 0;
  margin-top: 24px;
}

.trust-strip--footer li {
  color: rgba(255, 255, 255, .82);
}

@media (max-width: 640px) {
  .trust-strip ul { justify-content: flex-start; gap: 8px 18px; }
  .trust-strip li { font-size: 13px; }
}

/* REVIEW ROTATOR — ported from the Domestic About page.
   The quotes stay in English in every locale, so on the Arabic page the
   blockquote is pinned LTR while everything around it stays RTL. */
.rev-box {
  max-width: 760px;
  margin: 8px auto 0;
  padding: 24px 26px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.rev-box blockquote {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink);
  min-height: 7.5em;
  margin: 0;
  transition: opacity .4s ease;
}

.rev-box blockquote::before {
  content: "“";   /* the character itself: an escape here gets read as octal */
  color: var(--green);
  font-size: 34px;
  line-height: 0;
  margin-inline-end: 4px;
  vertical-align: -10px;
}

.rev-src {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 14px;
}

.rev-nav {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.rev-nav button {
  min-width: 38px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.rev-nav button:hover { border-color: var(--blue); }
.rev-nav button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* THE COMPANY — three labelled rows, as on the Domestic page, rather than one
   run-on paragraph. A definition list, because that is what it is. */
.company-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 22px;
  margin: 0;
  max-width: 760px;
}

.company-facts dt {
  font-weight: 600;
  color: var(--ink);
}

.company-facts dd {
  margin: 0;
  color: var(--body-c);
}

@media (max-width: 560px) {
  .company-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .company-facts dd { margin-bottom: 10px; }
}

/* ---------------------------------------------------- photo carousel (home)
   A scroll-snap rail, so touch swipe and RTL come from the browser and the
   thing still works with JS off. chrome.js only adds the buttons' behaviour,
   the counter and the timer. Cards sit on a GREY band, so they are blue. */
.pc{position:relative;}
.pc-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
.pc-rail::-webkit-scrollbar{display:none;}
.pc-slide{flex:0 0 100%;scroll-snap-align:start;min-width:0;}
.pc-card{border:2px solid #55B348;border-radius:14px;overflow:hidden;background:#0B54A8;}
.pc-frames{display:grid;grid-template-columns:1fr;gap:0;aspect-ratio:2/1;}
.pc-slide[data-pair] .pc-frames{grid-template-columns:1fr 1fr;}
.pc-frame{position:relative;margin:0;background:#0B1F3D;overflow:hidden;min-width:0;}
.pc-frame + .pc-frame{border-left:2px solid #55B348;}
[dir="rtl"] .pc-frame + .pc-frame{border-left:none;border-right:2px solid #55B348;}
.pc-frame img{display:block;width:100%;height:100%;object-fit:cover;}
.pc-frame > .zoomable{height:100%;}
.pc-tag{position:absolute;top:10px;left:10px;font:600 11px/1 'Plex Mono','Consolas',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(11,31,61,.82);border-radius:999px;padding:6px 10px;}
[dir="rtl"] .pc-tag{left:auto;right:10px;}
.pc-tag--after{background:rgba(46,125,39,.92);}
.pc-cap{padding:11px 14px;color:#fff;font:400 14.5px/1.5 'Plex Sans','Segoe UI',sans-serif;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;}
.pc-cap b{font-weight:600;}
.pc-when{font:600 11px/1.5 'Plex Mono','Consolas',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#BFD4F2;}
.pc-bar{display:flex;align-items:center;gap:10px;margin-top:14px;}
.pc-btn{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;border-radius:999px;border:2px solid #C3D0E4;background:#fff;color:#0B54A8;cursor:pointer;font-size:19px;line-height:1;}
.pc-btn:hover{border-color:#0B54A8;}
.pc-btn:focus-visible{outline:3px solid #55B348;outline-offset:2px;}
.pc-btn[disabled]{opacity:.4;cursor:default;}
.pc-count{font:600 12px/1 'Plex Mono','Consolas',ui-monospace,monospace;letter-spacing:.12em;color:#5B6880;min-width:70px;}
/* Measured 1.31:1 against the blue band, in all seven languages. #5B6880 is
   the slate for a light band, and apply_banding() put the rail on blue.
   #BFD4F2 is the same muted-on-blue the era line already uses: 4.89:1
   against the light end of the gradient, 6.37:1 against the dark end. */
.band-blue .pc-count{color:#BFD4F2;}
.pc-play{margin-inline-start:auto;width:auto;padding:0 16px;border-radius:999px;font:600 12px/1 'Plex Sans','Segoe UI',sans-serif;letter-spacing:.04em;}
.pc-progress{height:3px;border-radius:999px;background:#DCE4F0;overflow:hidden;flex:1 1 auto;}
.pc-progress span{display:block;height:100%;background:#55B348;width:0;transition:width .3s linear;}
@media (max-width:720px){
  /* Pairs stay side by side at every width: stacking them breaks the one
     thing the slide is for, which is comparing the two. */
  .pc-frames{aspect-ratio:3/2;}
  .pc-cap{font-size:13.5px;padding:10px 12px;}
  .pc-count{min-width:58px;font-size:11px;}
  .pc-tag{font-size:10px;padding:5px 8px;top:8px;left:8px;}
  [dir="rtl"] .pc-tag{left:auto;right:8px;}
}
@media (prefers-reduced-motion:reduce){
  .pc-rail{scroll-behavior:auto;}
  .pc-progress span{transition:none;}
}

/* The review box and the company facts are cards, so on a light band they take
   the blue fill and the green border like everything else. These rules cover
   the bits the generic card rule does not reach: a blockquote, and a table
   whose own borders and header fill have to invert with it. */
.rev-box, .facts-card {
  border-radius: var(--radius);
  overflow: hidden;
}

.facts-card { padding: 0; }
.facts-card table.plain { max-width: none; }

:is(.band-grey, .band-tint, .band-white) .rev-box blockquote {
  color: #fff;
}

:is(.band-grey, .band-tint, .band-white) .rev-box .rev-src,
:is(.band-grey, .band-tint, .band-white) .rev-box .rev-src a {
  color: rgba(255, 255, 255, .82);
}

:is(.band-grey, .band-tint, .band-white) .rev-nav button {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .40);
  color: #fff;
}

:is(.band-grey, .band-tint, .band-white) .rev-nav button:hover {
  background: rgba(255, 255, 255, .22);
}

:is(.band-grey, .band-tint, .band-white) .facts-card table.plain th,
:is(.band-grey, .band-tint, .band-white) .facts-card table.plain td {
  border-color: rgba(255, 255, 255, .26);
  color: rgba(255, 255, 255, .92);
}

:is(.band-grey, .band-tint, .band-white) .facts-card table.plain th {
  background: rgba(255, 255, 255, .10);
  color: #fff;
}

/* The outer edge of the table would double up with the card's own border. */
.facts-card table.plain tr:first-child th,
.facts-card table.plain tr:first-child td { border-top: none; }
.facts-card table.plain tr:last-child th,
.facts-card table.plain tr:last-child td { border-bottom: none; }
.facts-card table.plain th:first-child { border-left: none; }
.facts-card table.plain td:last-child { border-right: none; }

/* The closing CTA. The heading needs room before the buttons, and the buttons
   need room between them: two anchors touching read as a single control. */
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

.text-center > h2 + .cta-actions { margin-top: 26px; }

/* A single button in a CTA band needs the same clearance. */
.text-center > h2 + .btn,
.text-center > p + .btn { margin-top: 22px; }

@media (max-width: 520px) {
  .cta-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .cta-actions .btn { width: 100%; }
}

/* ACCREDITATION STRIP — footer, above the legal line. Text badges until the
   official artwork arrives from each body's member portal; those licences
   normally require the exact supplied file, so a scraped or redrawn logo is a
   usage breach even when the certificate behind it is real. */
.cert-strip {
  border-top: 1px solid rgba(255, 255, 255, .18);
  margin-top: 26px;
  padding-top: 20px;
}

.cert-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  margin: 0 0 12px;
}

.cert-strip ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cert-strip li { display: flex; align-items: center; }

.cert-name {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

/* Each mark on its own white tile. These are other people's brand colours and
   several of them vanish against the footer blue; a tile is also what their
   clear-space rules expect. Tile in CSS, logo file transparent, so a change of
   footer colour cannot break them. */
.cert-strip li img {
  display: block;
  height: 34px;
  width: auto;
  background: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  box-sizing: content-box;
}


@media (max-width: 560px) {
  .cert-name { font-size: 12px; padding: 6px 11px; }
}

/* PAGE HEAD — the h1 and its lede, LEFT aligned. Domestic opens its content
   pages this way; Int had been centring every section header, which is what
   made the same words read as a different page. */
.page-head {
  max-width: 720px;
  margin-bottom: 0;
}

.page-head h1 {
  margin-bottom: 14px;
}

.page-head p {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--body-c);
}

/* PROSE — a readable measure for running copy inside a band, left aligned. */
.prose {
  max-width: 760px;
}

.prose h2 {
  margin-bottom: 14px;
}

.prose h3 {
  margin-top: 30px;
  margin-bottom: 12px;
}

.prose p {
  margin-bottom: 14px;
  line-height: 1.65;
}

.prose .ready-list {
  margin: 0;
}

.prose .ready-list li {
  padding-inline-start: 26px;
}

/* The two photographs from the predecessor-era rail work, as on Domestic. */
.about-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 22px;
  max-width: 780px;
}

.about-photos figure {
  margin: 0;
  border: 2px solid var(--green);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0B1F3D;
}

.about-photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* A plain facts table, the shape Domestic uses for "The company". */
table.plain {
  border-collapse: collapse;
  width: 100%;
  max-width: 620px;
}

table.plain th,
table.plain td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: start;
  font-size: 15px;
  vertical-align: top;
}

table.plain th {
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-soft);
  white-space: nowrap;
}

/* On a blue band the borders and the header fill have to invert with it. */
.band-blue table.plain th,
.band-blue table.plain td {
  border-color: rgba(255, 255, 255, .28);
}

.band-blue table.plain th {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

@media (max-width: 560px) {
  table.plain th { white-space: normal; }
}

/* THREE ROUTES, presented as equals — phone, email, form. The visitor is
   choosing between them, so none of the three is styled as the primary. */
.route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}

.route {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.route-label {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.route-value {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px;
  word-break: break-word;
}

.route-value a { text-decoration: none; }
.route-value a:hover { text-decoration: underline; }

.route-note {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body-c);
  margin: 0;
}

/* The route notes under the phone and email: quieter than the detail itself,
   because they explain the route rather than being it. */
.contact-note {
  font-size: 14px;
  line-height: 1.55;
  margin-top: 6px;
  color: var(--muted);
}

/* "What to have ready" — a checklist, so it reads as items and not prose. */
.ready-list {
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.ready-list li {
  position: relative;
  padding-inline-start: 28px;
  font-size: 16px;
  line-height: 1.6;
}

.ready-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--green);
}

.machine-body {
  padding: 22px;
}

.machine-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--blue);
}

.machine-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--body-c);
}

/* Documentation page */
.doc-tier {
  max-width: 780px;
  margin: 0 auto 40px;
}

.doc-tier h2 {
  font-size: clamp(22px, 3vw, 28px);
  margin-bottom: 12px;
}

.doc-tier > p {
  font-size: 16px;
  line-height: 1.65;
}

.doc-list {
  list-style: none;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.doc-list li {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.6;
}

.doc-list b {
  color: var(--ink);
}

.doc-list a {
  color: var(--blue);
}

.doc-intro {
  max-width: 780px;
  margin: 0 auto;
}

.doc-intro p + p {
  margin-top: 16px;
}

/* Method section */
.method-content {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.method-content p {
  font-size: 17px;
  line-height: 1.65;
}

/* Steps grid */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 48px;
}

.step-card {
  background: var(--bg-soft);
  border: 2px solid var(--green);
  padding: 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* The digit is 16px/700, which is NOT large text, so it needs the full 4.5:1.
   Brand green gives white 2.65:1; --green-press gives 6.65:1. */
.step-number {
  display: inline-block;
  width: 36px;
  height: 36px;
  background: var(--green-press);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  font-weight: 700;
  margin-bottom: 14px;
}

.step-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.step-card p {
  font-size: 15px;
  line-height: 1.5;
}

/* Contact section */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 920px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-form {
  background: var(--bg-soft);
  padding: 32px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

/* 16px, not 15px: iOS Safari zooms the page on focus for anything smaller and
   never zooms back out. */
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: 0;
  border-color: var(--blue);
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-item h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--blue);
}

.contact-item p, .contact-item a {
  font-size: 15px;
  line-height: 1.6;
}

.contact-item a {
  color: var(--blue);
  text-decoration: none;
}

.contact-item a:hover {
  text-decoration: underline;
}

/* Shown in place of the form on submit. Deliberately NOT a green success
   panel: nothing was sent, so it must not read as a receipt. Blue tint, the
   same family as the rest of the informational surfaces. */
.form-fallback {
  display: none;
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--blue-tint);
  border: 1.5px solid var(--blue);
  border-radius: 8px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}

.form-fallback.show {
  display: block;
}

/* Confirmation, green rather than the fallback's blue: the two appear in the
   same slot and must not be mistaken for one another at a glance. */
.form-sent {
  display: none;
  margin-top: 20px;
  padding: 16px 18px;
  background: #EFF7ED;
  border: 1.5px solid var(--green-ink, #2E7D27);
  border-radius: 8px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}

.form-sent.show { display: block; }
.form-sent p { margin: 0 0 6px; }
.form-sent p:last-child { margin-bottom: 0; }

/* The honeypot. Off-screen rather than display:none, because a bot that reads
   computed styles skips a hidden field and fills a positioned one. Out of the
   tab order and hidden from assistive tech, so nobody real ever meets it. */
.form-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-fallback-route {
  margin-top: 10px;
  font-weight: 700;
}

.form-fallback-route a {
  color: var(--blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Lightbox, ported from the domestic site ------------------------
   The button wrapper must be invisible to the layout: the page already sizes
   the <img>, and a default button brings its own padding, border, background
   and inline display that would break every grid it sits in. */
.zoomable {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: inherit;
}

/* The ring is drawn INSIDE the button, not outside it. Every media box on this
   site clips (`.industry-media`, `.machine-media` and the cards themselves are
   overflow:hidden so the photo takes the card's rounded corner), and the button
   fills that box exactly. An outward offset therefore lands in the clipped
   region and is painted away: measured, the shipped 3px offset drew ZERO pixels
   on an industry card and a machine card alike, leaving keyboard users with no
   focus indicator at all. A negative offset keeps the ring over the photograph,
   where nothing can clip it. */
.zoomable:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: -3px;
}

.zoomable img {
  display: block;
}

/* The industry card fills its media box with the photo, so the wrapper has to
   inherit that height or the card collapses around a shrink-wrapped button. */
.industry-media .zoomable,
.machine-media .zoomable {
  height: 100%;
}

/* The hero photograph is position:absolute inset:0, so a plain static wrapper
   round it measures 0 tall: the button had a box of 629x0, could not be clicked
   and its focus ring drew as a line. The wrapper has to take the position the
   image gave up.
   It carries no z-index on purpose: it is the FIRST positioned child of the
   hero, so in DOM order it already paints under the scrim and under `.wrap`,
   which is exactly where the photo belongs. */
.hero .zoomable {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The scrim is painted over that photo and would otherwise eat every click
   aimed at it. It is pure decoration, so it takes itself out of hit testing;
   the hero copy above it keeps its own z-index and stays clickable. */
.hero-scrim {
  pointer-events: none;
}

/* The hero photo is full-bleed, so its ring has to clear the scrim to read as a
   focus indicator - but raising the BUTTON to do that lifted the whole
   photograph over the scrim AND over `.wrap`, and the headline vanished behind
   it (measured: 94% of the hero changed, and the h1 stopped being the element
   at its own centre point). So the ring is drawn by an overlay pseudo-element
   that carries the z-index alone, and the photo stays where it belongs.
   The outline is inset for the same reason as the card photos: `.hero` is
   overflow:hidden and would clip an outward one. */
.hero .zoomable:focus-visible {
  outline: none;
}

.hero .zoomable:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  outline: 3px solid var(--green);
  outline-offset: -3px;
  pointer-events: none;
}

dialog.lb {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

dialog.lb::backdrop {
  background: rgba(8,20,42,.88);
}

dialog.lb figure {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(14px,4vw,52px);
  margin: 0;
}

dialog.lb img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  cursor: zoom-in;
  transition: transform .18s ease;
}

dialog.lb img.is-zoomed {
  transform: scale(1.9);
  cursor: zoom-out;
}

dialog.lb figcaption {
  color: #EAF1FB;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 70ch;
  text-align: center;
}

dialog.lb figcaption[hidden] {
  display: none;
}

.lb-close, .lb-nav {
  position: absolute;
  z-index: 2;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  display: grid;
  place-items: center;
}

.lb-close {
  top: 16px;
  inset-inline-end: 16px;
  width: 44px;
  height: 44px;
  font-size: 26px;
}

.lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 30px;
}

.lb-prev { inset-inline-start: 14px; }
.lb-next { inset-inline-end: 14px; }

.lb-close:hover, .lb-nav:hover {
  background: rgba(255,255,255,.26);
}

.lb-close:focus-visible, .lb-nav:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .lb-nav {
    width: 42px;
    height: 42px;
    font-size: 26px;
  }

  dialog.lb img {
    max-height: 68vh;
  }
}

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

/* Footer */
.site-footer {
  background: var(--blue-deep);
  color: #DCE8FA;
  padding: 46px 0 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 30px;
}

@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.footer-brand img {
  height: 64px;
  width: auto;
  border: 3px solid var(--green);
  border-radius: 9px;
  display: block;
}

.site-footer p {
  font-size: 14px;
  max-width: 38ch;
  line-height: 1.6;
}

/* h2 in the markup now: h4 under an h2 skipped a level in every page's
   outline. The size is unchanged - a heading level is not a font size. */
.site-footer :is(h2, h4) {
  color: #fff;
  font-size: 14px;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer-links a {
  color: #BCD0EE;
  text-decoration: none;
  font-size: 14px;
}

.footer-links a:hover {
  color: #fff;
}

.footer-legal {
  border-top: 1px solid rgba(220,232,250,.18);
  margin-top: 30px;
  padding-top: 18px;
  font-size: 12.5px;
  color: #9FB4D6;
  line-height: 1.7;
}

.legal-note {
  font-size: 13px;
  color: #9FB4D6;
  margin-top: 10px;
  font-style: italic;
}

/* RTL support */
[dir="rtl"] {
  font-family: Tahoma, 'Segoe UI', 'Noto Naskh Arabic', sans-serif;
  letter-spacing: 0;
}

[dir="rtl"] .brand {
  flex-direction: row-reverse;
}

/* Utility classes */
.text-center {
  text-align: center;
}

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

@media (max-width: 640px) {
  section {
    padding: 48px 0;
  }
  
  .hero {
    min-height: 600px;
  }
  
  .hero-actions {
    flex-direction: column;
  }
  
  .btn {
    text-align: center;
  }
}


/* ---- pre-deployment audit, 2026-08-23 -------------------------------------
   All of this came out of measuring the built pages rather than reading the
   source, which is why none of it was visible before. */

/* The document is light-only. Saying so stops the browser rendering form
   controls and scrollbars in its own dark palette on a dark OS. */
:root { color-scheme: light; }

/* Headings were dropping one word onto a line of its own. */
h1, h2, h3 { text-wrap: balance; }
.section-header p { text-wrap: pretty; }

/* Target size. Footer links measured 22px tall and the contact routes 20px,
   against a 24px minimum. Padding rather than a height, so the text keeps
   sitting on its own baseline. */
.site-footer a,
.route-value a,
.form-fallback-route a { display: inline-block; padding-block: 3px; }

/* A phone with a notch puts the sticky header under the status bar and the
   footer under the home indicator. */
.site-header { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
.site-footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

/* Scrolling inside the lightbox should not start scrolling the page behind it
   once the image runs out. */
dialog, .lb-body { overscroll-behavior: contain; }

/* Tapping should not wait for a possible double-tap, and the grey flash
   Android draws by default is not the feedback this design uses. */
a, button, summary, label, input, select, textarea { touch-action: manipulation; }
a, button, summary { -webkit-tap-highlight-color: rgba(31, 92, 197, .18); }