/* ==========================================================================
   Partnerpage — one-page site

   Design direction: a manufacturer's service & parts datasheet, not a
   marketing landing page. The people who buy this are looking for a model
   number or a technician, so the page is built out of the artifacts of their
   world: the ID-1 card format, spec rows, and monospaced part designations.

   Signature module: every image panel uses the real credit-card ratio
   (ISO/IEC 7810 ID-1 — 85.6 × 53.98 mm) and a corner radius scaled from the
   card's actual 3.18 mm radius. Cards are literally the unit of measure.

   Palette and the two text faces are fixed by the brief. IBM Plex Mono is
   added as a third, utility role: model numbers, part codes and data labels
   are monospaced on every service sheet in this industry.

   No cookies, no analytics, no third-party requests. Fonts are self-hosted.
   ========================================================================== */

@import url("../fonts/fonts.css");

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour — 60-30-10, exactly as specified in the brief */
  --c-base: #f7f9fc;          /* 60% — page background, large surfaces      */
  --c-primary: #1a2b4c;       /* 30% — header/footer, headings, navy blocks */
  --c-secondary: #3b6fd4;     /*       links, data labels, hover states     */
  --c-secondary-dark: #2f58aa;/*       small text on tinted blue (keeps AA) */
  --c-accent: #e0a106;        /* 10% — primary CTA only                     */
  --c-accent-hover: #c48c04;
  --c-text: #33415c;          /* body copy                                  */
  --c-text-muted: #64748b;    /* captions, meta — AA on base and surface    */
  --c-rule: #e2e8f0;          /* borders and dividers                       */
  --c-surface: #ffffff;

  /* On navy */
  --c-on-primary: #ffffff;
  --c-on-primary-muted: #c3cee0;
  --c-rule-on-primary: rgba(255, 255, 255, 0.18);

  /* Type */
  --font-display: "IBM Plex Sans Condensed", "IBM Plex Sans", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* The data face carries labels and codes; it is always tracked out. */
  --track-data: 0.11em;

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;

  /* Shape — ID-1 card geometry */
  --ratio-card: 856 / 540;    /* 85.6 mm × 53.98 mm */
  --radius-card: 12px;        /* 3.18 mm scaled to a ~215 px-tall panel */
  --radius: 6px;
  --radius-sm: 4px;

  --shadow-panel: 0 18px 48px -24px rgba(26, 43, 76, 0.45);
  --shadow-header: 0 1px 0 rgba(26, 43, 76, 0.06), 0 8px 24px -18px rgba(26, 43, 76, 0.5);

  --container: 1200px;
  --header-h: 68px;
  --t: 180ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-base);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }   /* the contact lines are a description list */
figure { margin: 0; }   /* UA default is 1em 40px — it breaks the panel width */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.08;
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.375rem, 5.4vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.625rem); }
h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); letter-spacing: -0.01em; }
h4 { font-size: 1.1875rem; letter-spacing: -0.005em; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--c-secondary); text-underline-offset: 3px; }
a:hover { color: var(--c-primary); }

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

/* The utility face. Used for anything a technician would read off a plate:
   section labels, model designations, regions, spec keys. */
.data {
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--track-data);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.section { padding-block: var(--sp-8); scroll-margin-top: var(--header-h); }
@media (min-width: 768px) { .section { padding-block: var(--sp-9); } }

.section--surface { background: var(--c-surface); border-block: 1px solid var(--c-rule); }
.section--navy { background: var(--c-primary); color: var(--c-on-primary-muted); }
.section--navy h2, .section--navy h3 { color: var(--c-on-primary); }

/* Section label — a hairline rule with a monospaced tag sitting on it, the way
   a drawing sheet labels a zone. */
.label {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  color: var(--c-secondary);
}
.label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-rule);
}
.section--navy .label { color: var(--c-accent); }
.section--navy .label::after { background: var(--c-rule-on-primary); }

.lede {
  font-size: 1.0625rem;
  max-width: 34rem;
  color: var(--c-text);
}
.section--navy .lede { color: var(--c-on-primary-muted); }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-2);
  z-index: 200;
  transform: translateY(-250%);
  background: var(--c-primary);
  color: var(--c-on-primary);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform var(--t);
}
.skip-link:focus { transform: translateY(0); color: var(--c-on-primary); }

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

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 46px;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}

.btn--primary { background: var(--c-accent); color: var(--c-primary); }
.btn--primary:hover { background: var(--c-accent-hover); color: var(--c-primary); }

.btn--secondary {
  background: transparent;
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.btn--secondary:hover { background: var(--c-primary); color: var(--c-on-primary); }

.btn--onnavy {
  background: transparent;
  border-color: var(--c-rule-on-primary);
  color: var(--c-on-primary);
}
.btn--onnavy:hover { background: rgba(255, 255, 255, 0.1); color: var(--c-on-primary); }

.btn--sm { min-height: 40px; padding: var(--sp-2) var(--sp-4); font-size: 0.9375rem; }

/* The arrow is a glyph, not an icon font — it nudges on hover. */
.btn__arrow { transition: transform var(--t); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 249, 252, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--c-rule);
  transition: box-shadow var(--t);
}
.header.is-scrolled { box-shadow: var(--shadow-header); }

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
}

/* Vector, so it stays crisp at any size. 160 px as specified; the lockup is
   4.25:1 so the height follows from it. */
.wordmark__full { width: 160px; height: auto; }

/* On a phone 160 px would crowd the CTA and menu button, so it steps down. */
@media (max-width: 479px) {
  .wordmark__full { width: 120px; }
}

/* Footer sits on the navy band, so it uses the reversed (white) artwork. */
.wordmark--footer img { width: auto; height: 34px; }

.nav__list { display: flex; align-items: center; gap: var(--sp-5); }
.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--sp-2);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 1.5px;
  background: var(--c-secondary);
  transition: right var(--t);
}
.nav__link:hover { color: var(--c-secondary); }
.nav__link:hover::after { right: 0; }

.header__actions { display: flex; align-items: center; gap: var(--sp-4); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  color: var(--c-primary);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--c-secondary); color: var(--c-secondary); }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t), opacity var(--t);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 899px) {
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    display: none;
    padding: var(--sp-2) var(--sp-5) var(--sp-5);
    background: var(--c-base);
    border-bottom: 1px solid var(--c-rule);
    box-shadow: var(--shadow-header);
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li + li { border-top: 1px solid var(--c-rule); }
  .nav__link { padding: var(--sp-4) 0; font-size: 1rem; }
  .nav__link::after { display: none; }
}
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav { display: block !important; }
}
@media (max-width: 479px) {
  .header__actions { gap: var(--sp-2); }
  .header .btn { padding-inline: var(--sp-3); font-size: 0.9375rem; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--sp-8); }
@media (min-width: 900px) { .hero { padding-block: var(--sp-9) var(--sp-8); } }

.hero__grid { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.02fr 0.98fr; gap: var(--sp-8); }
}

.hero h1 { margin-bottom: var(--sp-5); }

.hero__sub {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 40rem;
  margin-bottom: var(--sp-6);
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ID-1 media panel with registration ticks at the corners — the marks that
   sit outside the trim on card artwork proofs. */
.panel {
  position: relative;
  border-radius: var(--radius-card);
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.panel img { width: 100%; height: auto; aspect-ratio: var(--ratio-card); object-fit: cover; }

/* Registration marks on all four corners, drawn as eight hairlines. They sit
   outside the panel the way crop marks sit outside the trim on card artwork. */
.panel-frame {
  padding: 15px;
  --mark: linear-gradient(var(--c-secondary), var(--c-secondary));
  background-image: var(--mark), var(--mark), var(--mark), var(--mark),
                    var(--mark), var(--mark), var(--mark), var(--mark);
  background-size: 20px 1px, 1px 20px, 20px 1px, 1px 20px,
                   20px 1px, 1px 20px, 20px 1px, 1px 20px;
  background-position: left top, left top, right top, right top,
                       left bottom, left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   7. Clients marquee
   -------------------------------------------------------------------------- */
.clients {
  background: var(--c-base);
  border-block: 1px solid var(--c-rule);
  padding-block: var(--sp-6);
}
.clients__head { text-align: center; margin-bottom: var(--sp-5); }
.clients__head .data { color: var(--c-primary); }
.clients__sub { font-size: 0.875rem; color: var(--c-text-muted); margin: var(--sp-1) 0 0; }

.marquee {
  position: relative;
  overflow: hidden;
  /* The mask below makes this element an isolated group, so the logos'
     multiply blend has no page background to composite against. Painting the
     strip colour here gives them one — without it the white logo canvases
     show up as pale boxes. */
  background: var(--c-base);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__group { display: flex; align-items: center; gap: var(--sp-8); padding-inline: var(--sp-6); flex: none; }
.marquee__item { flex: none; }

/* The supplied logos run from 8.7:1 (Thales) to 1:1 (Kozkart). Equal height
   alone would make the square ones tiny and the wide ones dominate, so each
   sits in an identical box and is fitted inside it — every mark then occupies
   the same optical weight. Greyscale plus opacity also neutralises the fact
   that some files carry a white background and others are transparent. */
.marquee__item img {
  /* 250 × 96. Every file is a 500 × 192 canvas (2× for retina) with the mark
     trimmed to its ink and centred, so these boxes are genuinely equal. */
  width: 250px;
  height: 96px;
  object-fit: contain;
  /* The files carry real alpha now, so no blend-mode trickery is needed to
     hide a white canvas — there isn't one. */
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter var(--t), opacity var(--t);
}
.marquee__item img:hover { filter: grayscale(0); opacity: 1; }
/* Below the tablet breakpoint 250 px would fill most of a phone screen, so the
   strip steps down proportionally — same ratio, same equality. */
@media (max-width: 767px) {
  .marquee__item img { width: 175px; height: 67px; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* the track holds two identical groups */
}

/* --------------------------------------------------------------------------
   8. Services — a capability list, not a card grid
   -------------------------------------------------------------------------- */
.split { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) {
  .split { grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-8); align-items: start; }
  .split__aside { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
}

.services__list { border-top: 1px solid var(--c-rule); }

.service {
  display: grid;
  gap: var(--sp-2) var(--sp-5);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--c-rule);
  transition: background-color var(--t);
}
@media (min-width: 640px) {
  .service { grid-template-columns: minmax(11rem, 0.9fr) 1.4fr; align-items: baseline; }
}
.service h3 { margin: 0; font-size: 1.1875rem; transition: color var(--t); }
.service p { margin: 0; font-size: 0.9375rem; }

/* A clarification sitting under a service description — set quieter than the
   description itself so it reads as a caveat, not a second selling line. */
.service .service__note {
  margin-top: var(--sp-3);
  font-size: 0.875rem;
  color: var(--c-text-muted);
}
.service:hover { background: var(--c-base); }
.service:hover h3 { color: var(--c-secondary); }

/* --------------------------------------------------------------------------
   9. Products — three catalogues under one heading
   -------------------------------------------------------------------------- */

/* Each product class (machines / spare parts / software) opens with its own
   labelled sub-header, so the section reads as three chapters of one catalogue. */
.subhead { max-width: 44rem; margin-bottom: var(--sp-6); }
.subhead + * { margin-top: 0; }
.subhead:not(:first-of-type) { margin-top: var(--sp-8); }
.subhead h3 { margin-bottom: var(--sp-3); }
.subhead .lede { font-size: 1rem; }

.lede--intro { margin-bottom: var(--sp-8); }
.lede__note { display: block; margin-top: var(--sp-2); font-size: 0.875rem; color: var(--c-text-muted); }

.products__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .products__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .products__grid { grid-template-columns: repeat(3, 1fr); } }

/* Software runs four across — the cards carry less detail than a machine
   datasheet, so they can sit tighter. */
@media (min-width: 980px) {
  .products__grid--software { grid-template-columns: repeat(4, 1fr); }
}

/* Box art and icons must be shown whole, unlike a machine photograph that can
   take a crop. The artwork is already composited onto the panel colour, so
   letterboxing is invisible. */
.products__grid--software .product__media img {
  object-fit: contain;
  padding: var(--sp-4);
}

.product {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.product:hover {
  border-color: rgba(59, 111, 212, 0.45);
  box-shadow: 0 12px 32px -22px rgba(26, 43, 76, 0.55);
}

.product__media { background: var(--c-base); border-bottom: 1px solid var(--c-rule); }
.product__media img { width: 100%; height: auto; aspect-ratio: var(--ratio-card); object-fit: cover; }

.product__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5); }

/* Model designation sits above the name, the way it does on a rating plate. */
.product__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  color: var(--c-secondary-dark);
}
.product__class { color: var(--c-text-muted); }
.product h4 { margin-bottom: var(--sp-4); font-size: 1.375rem; }
.product__desc {
  margin: calc(var(--sp-4) * -1 + var(--sp-1)) 0 var(--sp-4);
  font-size: 0.9375rem;
  color: var(--c-text);
}

/* Software has no photograph — the card leads with the name instead, and a
   hairline of secondary colour keeps it from reading as an empty machine card. */
.product--nomedia { border-top: 2px solid var(--c-secondary); }

/* Spec rows: key on the left, value on the right, dotted leader between —
   readable across cards when comparing models. */
.specs { margin-bottom: var(--sp-5); font-size: 0.875rem; }
.specs__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
  border-top: 1px dotted var(--c-rule);
}
.specs__row:first-child { border-top: 0; }
.specs__key {
  flex: none;
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--track-data);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.specs__leader { flex: 1; border-bottom: 1px dotted var(--c-rule); transform: translateY(-3px); }
.specs__val { text-align: right; color: var(--c-text); }
.specs__val--todo { color: var(--c-text-muted); font-style: italic; }

/* Price is the line a buyer scans for, so it sits in its own tinted band
   rather than reading as one more spec row. */
.specs__row--price {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 0;
  border-radius: var(--radius);
  background: rgba(59, 111, 212, 0.08);
}
.specs__row--price .specs__key { color: var(--c-secondary-dark); }
.specs__row--price .specs__leader { display: none; }
.specs__row--price .specs__val {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-primary);
}

.product__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-secondary);
  text-decoration: none;
  transition: border-color var(--t), background-color var(--t);
}
.product__cta:hover {
  border-color: var(--c-secondary);
  background: rgba(59, 111, 212, 0.06);
  color: var(--c-secondary);
}
.product__cta .btn__arrow { transition: transform var(--t); }
.product__cta:hover .btn__arrow { transform: translateX(3px); }

/* Spare parts: 15 lines, so they get tiles rather than full datasheets —
   a parts list you scan, not a set of products you compare. */
.parts {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .parts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .parts { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px) { .parts { grid-template-columns: repeat(4, 1fr); } }

.part {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.part:hover {
  border-color: rgba(59, 111, 212, 0.4);
  box-shadow: 0 10px 24px -20px rgba(26, 43, 76, 0.6);
}
.part__media { background: var(--c-base); border-bottom: 1px solid var(--c-rule); }
.part__media img { width: 100%; height: auto; aspect-ratio: var(--ratio-card); object-fit: cover; }
.part__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-4); }
.part__name { margin: 0 0 var(--sp-2); font-size: 1.0625rem; }
.part__desc { margin: 0 0 var(--sp-4); font-size: 0.875rem; color: var(--c-text-muted); }
.part__cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-secondary);
  text-decoration: none;
}
.part__cta:hover { color: var(--c-secondary-dark); text-decoration: underline; }
.part__cta .btn__arrow { transition: transform var(--t); }
.part__cta:hover .btn__arrow { transform: translateX(3px); }

/* MX6100 video slot. Capped in width and centred — it supports the machine
   grid above it, it does not lead the section. */
.video-block {
  max-width: 780px;
  margin: var(--sp-6) auto 0;
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.video-block video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--c-primary);
}
.video-block__caption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  margin: 0;
  border-top: 1px solid var(--c-rule);
  font-size: 0.875rem;
  color: var(--c-text-muted);
}

/* --------------------------------------------------------------------------
   10. Why us — hairline columns, no card chrome
   -------------------------------------------------------------------------- */
.why__grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--c-rule);
}
.why__item {
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--c-rule);
}
@media (min-width: 700px) {
  .why__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--sp-7);
  }
}
@media (min-width: 1000px) {
  .why__grid { grid-template-columns: repeat(3, 1fr); }
  /* Five items into three columns: the last two stretch across the bottom. */
  .why__item:nth-child(4) { grid-column: 1 / span 2; }
  .why__item:nth-child(5) { grid-column: 3; }
}
.why__item h3 { font-size: 1.0625rem; margin-bottom: var(--sp-2); }
.why__item p { margin: 0; font-size: 0.9375rem; }

.certs { margin-top: var(--sp-7); }
.certs__title { color: var(--c-text-muted); }
/* Certificates are wall documents — at thumbnail size the wording is the whole
   point, so they get a full third of the row rather than a small chip. */
/* Fixed 297 × 224 tiles as specified, wrapping rather than stretching, so the
   certificates stay the same size at every breakpoint. */
.certs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}

.certs__btn {
  /* 299 = the requested 297 image plus the 1px border either side. */
  width: 299px;
  max-width: 100%;
  padding: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color var(--t), transform var(--t);
}
.certs__btn:hover { border-color: var(--c-secondary); transform: translateY(-2px); }
/* Landscape scans, cropped in on the wording. cover is safe now that the
   decorative border has been trimmed off the files themselves. */
.certs__btn img {
  display: block;
  width: 100%;
  height: 224px;
  object-fit: cover;
  background: var(--c-surface);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(15, 25, 45, 0.9);
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  max-width: min(92vw, 900px);
  max-height: 86vh;
  width: auto;
  border-radius: var(--radius);
  background: var(--c-surface);
}
.lightbox__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--c-rule-on-primary);
  border-radius: var(--radius);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.12); }

/* --------------------------------------------------------------------------
   11. Contact — the close. No form: direct lines only.
   -------------------------------------------------------------------------- */
.contact { text-align: left; }
.contact__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); align-items: start; }
}
.contact h2 { max-width: 16ch; }
.contact__lede { font-size: 1.125rem; color: var(--c-on-primary-muted); max-width: 32rem; }

.contact__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }

/* Direct lines, presented as a list of channels rather than a form. */
.lines { border-top: 1px solid var(--c-rule-on-primary); }
.line {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--c-rule-on-primary);
}
.line__key { color: var(--c-accent); }
.line__val { color: var(--c-on-primary); font-size: 1.0625rem; }
.line__val a { color: var(--c-on-primary); text-decoration: none; border-bottom: 1px solid var(--c-rule-on-primary); }
.line__val a:hover { color: #fff; border-bottom-color: var(--c-accent); }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--c-primary);
  color: var(--c-on-primary-muted);
  padding-block: var(--sp-8) var(--sp-5);
  border-top: 1px solid var(--c-rule-on-primary);
}
.footer__grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: var(--sp-7); } }

.footer .wordmark { display: block; margin: 0 0 var(--sp-4); }
.footer__tagline { font-size: 0.9375rem; max-width: 22rem; margin: 0; }

.footer__col-title { color: var(--c-on-primary); margin-bottom: var(--sp-4); }
.footer__list { font-size: 0.9375rem; }
.footer__list li { margin-bottom: var(--sp-3); }
.footer__list a,
.footer address a { color: var(--c-on-primary-muted); text-decoration: none; }
.footer__list a:hover,
.footer address a:hover { color: #fff; text-decoration: underline; }
.footer address { font-style: normal; font-size: 0.9375rem; display: grid; gap: var(--sp-3); }

/* Two addresses on one line. Each stays unbroken; the <wbr> after the slash
   gives the only break opportunity, so a narrow column wraps between them
   rather than mid-address. */
.footer__emails a { white-space: nowrap; }
.footer__emails-sep { padding-inline: 3px; color: var(--c-rule-on-primary); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-rule-on-primary);
  font-size: 0.8125rem;
}
.footer__bottom a { color: var(--c-on-primary-muted); }
.footer__dot { color: var(--c-rule-on-primary); }


/* --------------------------------------------------------------------------
   13. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none !important; transform: none; }
  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* The duplicate group only exists to make the loop seamless. */
  .marquee__group[aria-hidden="true"] { display: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   14. Print
   -------------------------------------------------------------------------- */
@media print {
  .header, .marquee, .nav-toggle, .lightbox { display: none !important; }
  body { background: #fff; }
  .section--navy { background: #fff; color: #000; }
  .section { padding-block: var(--sp-5); }
}