/*
Theme Name: Metpress Child
Theme URI: https://metpress.co.za
Description: Divi child theme for the Metpress website. Implements the Works Standard design system: two locked corporate blues, Poppins only, hairline separation, flat surfaces, tabulated specification as a first class layout.
Author: Ketnal
Author URI: https://ketnal.co.za
Template: Divi
Version: 1.2.0
Text Domain: metpress-child
*/

/* ==========================================================================
   METPRESS — THE WORKS STANDARD
   ==========================================================================
   DIRECTION CONTRACT

   THESIS: The manufacturer's own technical standard, on the web. It refuses
   the category's default arrangement — golden-hour factory hero, navy veil,
   four icon cards, logo strip — by putting real part nomenclature in the first
   viewport instead of a mood.

   OWN-WORLD: Paper and off-white grounds; #0B3D85 owns whole structural
   bands, #1C63B8 is the only interactive colour; steel-grey neutrals and
   nothing else. 1px hairlines do all separation, surfaces flat at rest, two
   shadows in the whole system. Poppins alone, 400 to 700, a nine-step UI ramp
   under two fluid display steps. Recognisable with all content removed by its
   hairline-ruled tables and its blue bands.

   STORY: A technical buyer with a tender specification open sees that this
   manufacturer lists the exact part they are matching, reaches it in two
   clicks, finds its Metpress and Eskom codes, a quote action beside it, and
   ISO 9001 without hunting. They submit a quote request or enquiry.

   FIRST VIEWPORT: Full-bleed transmission-line photograph under a directional
   ink veil. Left column: since-1974 badge, display headline, one-line
   proposition, Explore products and Contact sales. Right column, not below
   the fold: a JUMP TO A RANGE card carrying eight real part names as direct
   links, so the buyer who arrived with a part name in hand is one click from
   it without a search box. Pinned across the fold: a four-fact credential
   rail. The primary action also sits fixed in the header.

   FORM: The category canon, played straight — the user's standing exit from
   the direction roll, taken deliberately. Craft bar: Hilti and Valmont.
   Grounded candidate 7 (industrial marking) was assigned and set aside when
   the user took the canon door. Staging kept from the roll: "score rows to one
   strict beat", fused as a single strict spacing rhythm across every row.
   Seed key e2d61a5e, scope direction, mode persuade.
   --------------------------------------------------------------------------
   Everything is scoped under .mp so it can live inside Divi Code modules
   without leaking into the builder chrome or other plugins.
   Order: tokens, Divi neutralisation, base, type, layout, components,
   motion, responsive.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Locked corporate blues */
  --mp-blue-deep: #0B3D85;
  --mp-blue-bright: #1C63B8;
  --mp-blue-ink: #071E42;
  --mp-blue-wash: #EDF3FB;
  --mp-blue-wash-deep: #E3EDFA;  /* hover ground for drawn part cards */
  --mp-blue-lift: #8FB8EE;   /* links on dark grounds, 5.08:1 on blue-deep */
  --mp-blue-mist: #B9CDEA;   /* secondary text on dark grounds, 6.42:1 */

  /* Neutrals */
  --mp-ink: #101820;
  --mp-slate: #5A6675;       /* 5.84:1 on white — lowest permitted text tone */
  --mp-steel: #98A3B3;       /* decorative only, never carries meaning */
  --mp-hairline: #DCE3EC;
  --mp-hairline-strong: #C6D2E2;  /* card hover border, one tonal step down */
  --mp-surface: #F4F7FA;
  --mp-paper: #FFFFFF;

  /* Type */
  --mp-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Spacing rhythm */
  --mp-4: 4px;   --mp-8: 8px;   --mp-12: 12px; --mp-16: 16px;
  --mp-24: 24px; --mp-32: 32px; --mp-48: 48px; --mp-64: 64px;
  --mp-96: 96px; --mp-128: 128px;

  /* Section rhythm */
  --mp-section-y: 96px;
  --mp-section-y-major: 128px;

  /* Containers */
  --mp-container: 1280px;
  --mp-container-wide: 1440px;
  --mp-measure: 68ch;

  /* Shape */
  --mp-r-sm: 2px;
  --mp-r-md: 4px;
  --mp-r-lg: 8px;
  --mp-r-pill: 999px;

  /* Elevation — the only two shadows in the system */
  --mp-lift: 0 10px 28px -8px rgba(11, 61, 133, 0.18);
  --mp-sheet: 0 24px 60px -12px rgba(7, 30, 66, 0.35);

  /* Motion */
  --mp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mp-fast: 160ms;
  --mp-slow: 620ms;
}

/* --------------------------------------------------------------------------
   2. DIVI NEUTRALISATION
   Code modules must not inherit builder padding, width limits, clipping or
   Divi's typography. This is the single place Divi integration is handled.
   -------------------------------------------------------------------------- */
.et_pb_module.mp-code,
.et_pb_module.mp-code .et_pb_code_inner {
  margin: 0 !important;
  padding: 0 !important;
}
.mp-code .et_pb_code_inner > .mp { width: 100%; }

/* Our sections are full bleed, so the builder's row width must collapse. */
.et_pb_row:has(> .et_pb_column > .mp-code) {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
.et_pb_section:has(.mp-code) { padding: 0 !important; }
.mp-code { max-width: 100% !important; }

/* ---- THE HEADER LAYER RULE ----
   Divi gives every `.et_pb_row` a `z-index: 9`. A z-index on a positioned
   element creates a STACKING CONTEXT, which traps `.mp-header { z-index: 100 }`
   inside the header's own row — so the entire header layer paints at 9. Any
   body row is also 9 and comes later in the DOM, so it wins: on the home page
   the full-bleed hero painted straight over the open mega menu panel.
   (Verified with a Divi structure simulation: `elementFromPoint` at the centre
   of the open panel returned `.mp-hero-inner`, not the panel.)

   The header layer must therefore be lifted as a whole, and its inner rows must
   stop creating stacking contexts that compete with the body. Both the Theme
   Builder wrapper and a `:has()` fallback are covered, because the wrapper
   class differs between Divi versions and between header template setups. */
.et-l--header,
.et_pb_section:has(.mp-header) {
  position: relative;
  z-index: 10000;
}
.et-l--header .et_pb_section,
.et-l--header .et_pb_row,
.et-l--header .et_pb_column,
.et_pb_section:has(.mp-header) .et_pb_row,
.et_pb_section:has(.mp-header) .et_pb_column { z-index: auto; }

/* Nothing in the header chain may clip the mega panel or the mobile sheet.
   Scoped to Divi's own wrappers only — our components keep their own overflow. */
.et-l--header .et_pb_section,
.et-l--header .et_pb_row,
.et-l--header .et_pb_column,
.et-l--header .et_pb_module,
.et-l--header .et_pb_code_inner,
.et_pb_section:has(.mp-header) > .et_pb_row,
.et_pb_section:has(.mp-header) .et_pb_column,
.et_pb_section:has(.mp-header) .et_pb_code_inner { overflow: visible !important; }

/* The footer layer must stay below the header's panels. */
.et-l--footer { position: relative; z-index: 1; }
/* NOTE: the body class is mp-root, deliberately NOT mp-body. `.mp-body` is the
   body-copy type class and carries max-width: 68ch; putting it on <body> would
   clamp the entire document to a text measure. */
body.mp-root { overflow-x: hidden; }

/* --------------------------------------------------------------------------
   3. BASE — scoped
   -------------------------------------------------------------------------- */
.mp,
.mp *,
.mp *::before,
.mp *::after { box-sizing: border-box; }

.mp {
  font-family: var(--mp-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--mp-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Zero specificity, for the same reason as the colour and font resets below:
   `.mp p { margin: 0 }` is 0,1,1 and would out-specify every single-class
   spacing utility such as `.mp-hero-sub { margin-top: 16px }` at 0,1,0. That is
   exactly what collapsed the gap between the hero headline and its subline to
   zero, while two rules that happened to be more specific survived — which is
   why the spacing looked arbitrary. */
:where(.mp h1, .mp h2, .mp h3, .mp h4, .mp h5, .mp h6, .mp p, .mp ul, .mp ol, .mp figure) {
  margin: 0;
  padding: 0;
}
.mp ul, .mp ol { list-style: none; }
/* The UA's [hidden] rule is display:none at low specificity, so any component
   that sets its own display (grid rows, flex cards) would ignore it. This guard
   keeps the hidden attribute authoritative for the filter and empty states. */
.mp [hidden], .mp[hidden] { display: none !important; }
.mp img, .mp svg, .mp video { display: block; max-width: 100%; height: auto; }
/* Base link colour is held at zero specificity with :where() so every component
   that sets its own colour (buttons, chips, nav, cards, rows) wins without
   needing !important or a longer selector. */
:where(.mp a) { color: var(--mp-blue-bright); }
:where(.mp a:hover) { color: var(--mp-blue-deep); }
.mp a { text-decoration: none; }
/* Zero specificity again: a <button class="mp-btn mp-btn-primary"> must keep its
   fill AND its type size. `.mp button` would otherwise out-specify
   `.mp-btn-primary` and `.mp-nav-link` (0,1,1 beats 0,1,0), stripping the fill
   and forcing every button back to the 17px base size — which is what made
   button menu items render larger than anchor menu items. `font: inherit` must
   therefore live inside :where() too. */
:where(.mp button) {
  color: inherit;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.mp button { cursor: pointer; }
.mp table { border-collapse: collapse; width: 100%; }
.mp input, .mp select, .mp textarea { font: inherit; color: inherit; }

/* Focus — visible everywhere, never removed */
.mp :focus-visible {
  outline: 3px solid rgba(28, 99, 184, 0.55);
  outline-offset: 2px;
  border-radius: var(--mp-r-sm);
}
.mp-on-dark :focus-visible {
  outline-color: rgba(255, 255, 255, 0.85);
}

.mp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--mp-blue-deep);
  color: #fff;
  padding: 14px 22px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mp-skip:focus { left: 8px; top: 8px; color: #fff; }

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

/* --------------------------------------------------------------------------
   4. TYPE
   --------------------------------------------------------------------------
   THE INHERIT-COLOUR RULE. Every type class states `color: inherit`
   explicitly, so a heading or paragraph takes its colour from the ground it
   sits on (Ink on paper, white on a blue band).

   This is not redundant. Divi's Theme Options emit a global heading colour as
   `h1, h2, h3, h4, h5, h6 { color: <value> }`. A direct declaration on the
   element always beats a colour arriving by inheritance, however specific the
   ancestor's rule is — so without this, Divi repaints every heading in the
   system and white-on-blue hero and banner headings render in Divi's heading
   colour against a dark ground. The same applies to Divi's `p` colour.

   A class selector (0,1,0) outranks Divi's element selector (0,0,1), so no
   !important is needed. `.mp-slate` is declared after these, so an element
   carrying both still takes Slate.
   -------------------------------------------------------------------------- */
/* THE HEADING RHYTHM RULE. A heading owns the space below it — one mechanism,
   never a margin-top on whatever follows. Adjacent sibling margins collapse to
   the larger of the two, so a deliberate larger margin on a following block
   (a form, a downloads list) still wins instead of adding to this. */
.mp-display {
  color: inherit;
  margin-bottom: var(--mp-24);
  font-size: clamp(2.125rem, 1.35rem + 2.9vw, 3.25rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.mp-headline {
  color: inherit;
  margin-bottom: var(--mp-16);
  font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.mp-title {
  color: inherit;
  margin-bottom: 10px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.mp-subhead {
  color: inherit;
  margin-bottom: var(--mp-12);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
/* Flex and grid containers space their own children and do not collapse
   margins, so a heading inside one must not carry its own bottom margin. */
.mp-card-body .mp-title,
.mp-card-body .mp-subhead,
.mp-industry-body .mp-title,
.mp-field .mp-title { margin-bottom: 0; }
.mp-body { color: inherit; font-size: 1.0625rem; line-height: 1.65; max-width: var(--mp-measure); }
.mp-body-lg { color: inherit; font-size: 1.1875rem; line-height: 1.6; max-width: var(--mp-measure); }
.mp-compact { color: inherit; font-size: 1rem; line-height: 1.6; max-width: var(--mp-measure); }
.mp-ui { color: inherit; font-size: 0.9375rem; line-height: 1.45; }
.mp-meta { color: inherit; font-size: 0.8125rem; line-height: 1.5; }
.mp-label {
  color: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Unclassed headings and text inside our components need the same protection. */
.mp h1, .mp h2, .mp h3, .mp h4, .mp h5, .mp h6 { color: inherit; }
.mp-slate { color: var(--mp-slate); }
.mp-num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.mp-container {
  width: 100%;
  max-width: var(--mp-container);
  margin: 0 auto;
  padding: 0 24px;
}
.mp-container-wide { max-width: var(--mp-container-wide); }

.mp-section { padding: var(--mp-section-y) 0; }
.mp-section-major { padding: var(--mp-section-y-major) 0; }
.mp-section-tight { padding: var(--mp-48) 0; }
.mp-on-surface { background: var(--mp-surface); }
.mp-on-paper { background: var(--mp-paper); }
.mp-on-deep { background: var(--mp-blue-deep); color: #fff; }
.mp-on-ink { background: var(--mp-blue-ink); color: #fff; }
.mp-on-deep .mp-slate,
.mp-on-ink .mp-slate { color: var(--mp-blue-mist); }
.mp-on-deep a:not(.mp-btn),
.mp-on-ink a:not(.mp-btn) { color: var(--mp-blue-lift); }
.mp-on-deep a:not(.mp-btn):hover,
.mp-on-ink a:not(.mp-btn):hover { color: #fff; }

/* Section head: more space above a heading than below it */
.mp-head { margin-bottom: var(--mp-48); }
/* Category headings and tables are jump targets on the catalogue pages, so
   they clear the sticky header rather than landing behind it. */
.mp-head[id], .mp-spec-wrap[id] { scroll-margin-top: 130px; }
.mp-head-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--mp-24);
  align-items: end;
}

.mp-grid { display: grid; gap: var(--mp-24); }
.mp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mp-rule { height: 1px; background: var(--mp-hairline); border: 0; }
.mp-on-deep .mp-rule, .mp-on-ink .mp-rule { background: rgba(255, 255, 255, 0.18); }

/* --------------------------------------------------------------------------
   6. COMPONENTS
   -------------------------------------------------------------------------- */

/* 6.1 Buttons */
.mp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 16px 28px;
  border-radius: var(--mp-r-sm);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  transition: background var(--mp-fast) ease, color var(--mp-fast) ease,
              border-color var(--mp-fast) ease;
}
.mp-btn svg { flex: none; }
.mp-btn-primary { background: var(--mp-blue-bright); color: #fff; }
.mp-btn-primary:hover { background: var(--mp-blue-deep); color: #fff; }
.mp-btn-secondary {
  background: var(--mp-paper);
  color: var(--mp-blue-deep);
  border: 1px solid var(--mp-hairline);
}
.mp-btn-secondary:hover { background: var(--mp-blue-wash); color: var(--mp-blue-deep); }
.mp-btn-ghost-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.mp-btn-ghost-light:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.mp-btn-quote {
  min-height: 44px;
  padding: 12px 18px;
  background: var(--mp-paper);
  color: var(--mp-blue-deep);
  border: 1px solid var(--mp-hairline);
}
.mp-btn-quote:hover { background: var(--mp-blue-wash); border-color: var(--mp-blue-bright); }
.mp-btn-quote[aria-pressed="true"] {
  background: var(--mp-blue-bright);
  border-color: var(--mp-blue-bright);
  color: #fff;
}
.mp-btn-block { width: 100%; }
.mp-btn:disabled, .mp-btn[aria-disabled="true"] {
  background: var(--mp-surface);
  color: var(--mp-slate);
  border-color: var(--mp-hairline);
  cursor: not-allowed;
}
.mp-btn-row { display: flex; flex-wrap: wrap; gap: var(--mp-12); }

/* Text link with trailing rule */
.mp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mp-blue-bright);
  padding: 11px 0 8px;
  border-bottom: 1px solid transparent;
}
.mp-link:hover { border-bottom-color: var(--mp-blue-bright); color: var(--mp-blue-deep); }
.mp-link svg { transition: transform var(--mp-fast) var(--mp-ease); }
.mp-link:hover svg { transform: translateX(3px); }

/* 6.2 Chips */
.mp-chips { display: flex; flex-wrap: wrap; gap: var(--mp-8); }
.mp-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--mp-r-pill);
  background: var(--mp-blue-wash);
  color: var(--mp-blue-deep);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--mp-fast) ease, color var(--mp-fast) ease;
}
.mp-chip:hover { background: var(--mp-blue-bright); color: #fff; }
.mp-chip[aria-current="true"], .mp-chip.is-on {
  background: var(--mp-blue-bright);
  color: #fff;
}
.mp-chip-light {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.mp-chip-light:hover { background: #fff; color: var(--mp-blue-deep); }

/* 6.3 Cards */
.mp-card {
  display: flex;
  flex-direction: column;
  background: var(--mp-paper);
  border: 1px solid var(--mp-hairline);
  border-radius: var(--mp-r-md);
  overflow: hidden;
  transition: box-shadow var(--mp-fast) ease, border-color var(--mp-fast) ease;
}
.mp-card:hover { box-shadow: var(--mp-lift); border-color: var(--mp-hairline-strong); }
/* A whole card may be the link. The base link colour is held at zero
   specificity, so the card states its own text colour once and the title and
   body inside it inherit Ink rather than link blue. The title alone carries
   the hover, which is the affordance without turning the card into a wall of
   blue text. */
a.mp-card { color: var(--mp-ink); }
a.mp-card:hover { color: var(--mp-ink); }
a.mp-card:hover .mp-title { color: var(--mp-blue-deep); }
.mp-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--mp-blue-wash);
  overflow: hidden;
}
.mp-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--mp-slow) var(--mp-ease);
}
.mp-card:hover .mp-card-media img { transform: scale(1.03); }
.mp-card-body { padding: var(--mp-24); display: flex; flex-direction: column; gap: var(--mp-12); flex: 1; }
.mp-card-body > .mp-btn-row, .mp-card-body > .mp-link { margin-top: auto; }
.mp-card-kicker { color: var(--mp-slate); }
.mp-card-count {
  color: var(--mp-slate);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* Product card — image on a light ground so galvanised steel reads */
.mp-card-product .mp-card-media { aspect-ratio: 1 / 1; background: var(--mp-surface); }
.mp-card-product .mp-card-media img { object-fit: contain; padding: 10%; }

/* Drawn part card — an engineering line drawing standing in for photography,
   in the catalogue's own graphic language rather than a generic icon tile. */
.mp-card-draw .mp-card-media {
  aspect-ratio: 4 / 3;
  background: var(--mp-blue-wash);
  display: grid;
  place-items: center;
  padding: var(--mp-24);
}
.mp-card-draw .mp-card-media svg { width: 100%; height: 100%; color: var(--mp-blue-deep); }
.mp-card-draw:hover .mp-card-media { background: var(--mp-blue-wash-deep); }
.mp-card-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 0.8125rem; color: var(--mp-slate);
}
.mp-card-actions {
  display: flex; flex-wrap: wrap; gap: var(--mp-8);
  margin-top: auto; padding-top: var(--mp-4);
}

/* 6.4 Industry card — full bleed media with an ink veil */
.mp-industry {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  border-radius: var(--mp-r-md);
  overflow: hidden;
  background: var(--mp-blue-ink);
  color: #fff;
  isolation: isolate;
}
.mp-industry img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--mp-slow) var(--mp-ease);
}
.mp-industry::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(7, 30, 66, 0.93) 0%, rgba(7, 30, 66, 0.72) 42%, rgba(7, 30, 66, 0.28) 100%);
}
.mp-industry:hover img { transform: scale(1.04); }
.mp-industry-body { padding: var(--mp-24); display: flex; flex-direction: column; gap: 10px; width: 100%; }
.mp-industry-body .mp-title { color: #fff; font-size: 1.25rem; }
.mp-industry-body p { color: var(--mp-blue-mist); font-size: 0.9375rem; line-height: 1.55; }
.mp-industry-parts {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mp-blue-mist);
}

/* 6.5 Fact table — the "Why Metpress" layout, a datasheet not icon cards */
.mp-facts { border-top: 1px solid var(--mp-hairline); }
.mp-fact {
  display: grid;
  grid-template-columns: 44px minmax(0, 27ch) minmax(0, 1fr);
  gap: var(--mp-24);
  align-items: start;
  padding: var(--mp-24) 0;
  border-bottom: 1px solid var(--mp-hairline);
}
.mp-fact-mark { color: var(--mp-blue-bright); padding-top: 2px; }
.mp-fact-mark svg { width: 26px; height: 26px; }
.mp-fact dt { color: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.mp-fact dd { margin: 0; color: var(--mp-slate); font-size: 1rem; line-height: 1.6; }
.mp-on-deep .mp-facts, .mp-on-ink .mp-facts { border-top-color: rgba(255,255,255,0.18); }
.mp-on-deep .mp-fact, .mp-on-ink .mp-fact { border-bottom-color: rgba(255,255,255,0.18); }
.mp-on-deep .mp-fact-mark, .mp-on-ink .mp-fact-mark { color: var(--mp-blue-lift); }
.mp-on-deep .mp-fact dd, .mp-on-ink .mp-fact dd { color: var(--mp-blue-mist); }

/* 6.6 Specification table — the signature layout */
.mp-spec-wrap { border: 1px solid var(--mp-hairline); border-radius: var(--mp-r-md); overflow: hidden; }
.mp-spec { font-size: 0.9375rem; }
.mp-spec caption {
  color: inherit;
  text-align: left;
  padding: var(--mp-16) var(--mp-24);
  background: var(--mp-paper);
  border-bottom: 1px solid var(--mp-hairline);
  font-size: 1.125rem;
  font-weight: 600;
}
.mp-spec th, .mp-spec td {
  color: inherit;
  padding: 14px var(--mp-24);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--mp-hairline);
}
.mp-spec thead th {
  background: var(--mp-blue-wash);
  color: var(--mp-blue-deep);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mp-spec tbody tr:nth-child(even) { background: var(--mp-surface); }
.mp-spec tbody tr:last-child th, .mp-spec tbody tr:last-child td { border-bottom: 0; }
.mp-spec tbody th { color: inherit; font-weight: 600; }
.mp-spec td.mp-num, .mp-spec th.mp-num { text-align: right; font-variant-numeric: tabular-nums; }

/* 6.6a Catalogue table — the real product list, filtered by part-type chip.
   Zebra striping is dropped here because nth-child cannot see the rows the
   filter has hidden, so the stripes would fall in arbitrary places; the
   hairlines and a hover band carry the scan instead. The wrap scrolls rather
   than clipping between the restack breakpoint and full desktop width. */
.mp-spec-wrap.is-wide { overflow-x: auto; }
.mp-spec-cat tbody tr:nth-child(even) { background: transparent; }
.mp-spec-cat tbody tr:hover { background: var(--mp-blue-wash); }
/* Five columns need their width back: tighter gutters, and column headings
   that wrap instead of forcing the code columns wider than their content. */
.mp-spec-cat th, .mp-spec-cat td { padding: 11px var(--mp-16); }
.mp-spec-cat thead th { white-space: normal; }
.mp-spec td.mp-cell-code { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Padded so the product link clears the 24px minimum target height. */
.mp-cell-link { display: inline-block; padding: 3px 0; color: inherit; }
.mp-cell-link:hover { color: var(--mp-blue-deep); text-decoration: underline; }

/* 6.7 Download rows */
.mp-downloads { border-top: 1px solid var(--mp-hairline); }
.mp-dl {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto auto;
  gap: var(--mp-16) var(--mp-24);
  align-items: center;
  padding: var(--mp-16) 0;
  border-bottom: 1px solid var(--mp-hairline);
  transition: background var(--mp-fast) ease;
}
.mp-dl:hover { background: var(--mp-blue-wash); }
.mp-dl-tag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 8px;
  border-radius: var(--mp-r-sm);
  background: var(--mp-blue-wash);
  color: var(--mp-blue-deep);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em;
}
.mp-dl-title { font-size: 1.0625rem; font-weight: 600; color: var(--mp-ink); }
.mp-dl:hover .mp-dl-title { color: var(--mp-blue-deep); }
.mp-dl-meta { color: var(--mp-slate); font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-dl-go { color: var(--mp-blue-bright); display: flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }

/* 6.8 Inputs */
.mp-field { display: flex; flex-direction: column; gap: 8px; }
.mp-field > label { color: var(--mp-slate); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.mp-input, .mp-select, .mp-textarea {
  width: 100%;
  min-height: 52px;
  padding: 15px 18px;
  background: var(--mp-paper);
  border: 1px solid var(--mp-hairline);
  border-radius: var(--mp-r-sm);
  font-size: 1rem;
  transition: border-color var(--mp-fast) ease;
}
.mp-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.mp-input::placeholder, .mp-textarea::placeholder { color: var(--mp-slate); opacity: 1; }
.mp-input:focus, .mp-select:focus, .mp-textarea:focus { border-color: var(--mp-blue-bright); }
.mp-hint { color: var(--mp-slate); font-size: 0.8125rem; }
.mp-req { color: var(--mp-blue-bright); }

/* Quote list — the basket table on the request-quote page */
.mp-quote-list { border-top: 1px solid var(--mp-hairline); }
.mp-quote-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px 44px;
  gap: var(--mp-16) var(--mp-24);
  align-items: center;
  padding: var(--mp-16) 0;
  border-bottom: 1px solid var(--mp-hairline);
}
.mp-quote-part { display: flex; flex-direction: column; gap: 3px; }
.mp-quote-part b { color: inherit; font-size: 1.0625rem; font-weight: 600; }
.mp-quote-part span { color: var(--mp-slate); font-size: 0.8125rem; }
.mp-qty { display: flex; align-items: center; border: 1px solid var(--mp-hairline); border-radius: var(--mp-r-sm); }
.mp-qty button {
  width: 42px; height: 44px;
  display: grid; place-items: center;
  color: var(--mp-blue-deep);
  font-size: 1.125rem; font-weight: 600;
}
.mp-qty button:hover { background: var(--mp-blue-wash); }
.mp-qty input {
  width: 48px; height: 44px;
  border: 0; text-align: center;
  font-size: 1rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: transparent;
  -moz-appearance: textfield;
}
.mp-qty input::-webkit-outer-spin-button,
.mp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mp-quote-drop {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--mp-r-sm);
  color: var(--mp-slate);
}
.mp-quote-drop:hover { background: var(--mp-blue-wash); color: var(--mp-blue-deep); }
.mp-quote-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-16);
  padding-top: var(--mp-24);
}
.mp-quote-foot .mp-utility-spacer { margin-left: auto; }
.mp-quote-total { font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Compact in-table add control, so a whole range can be added line by line */
.mp-add-mini {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--mp-hairline);
  border-radius: var(--mp-r-sm);
  background: var(--mp-paper);
  color: var(--mp-blue-deep);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--mp-fast) ease, border-color var(--mp-fast) ease, color var(--mp-fast) ease;
}
/* Without this the icon is a flex item that shrinks to nothing inside the
   narrow quote cell, exactly as .mp-btn svg does not because it is set to
   flex: none. It matters more now the control drops to icon-only on tablet. */
.mp-add-mini svg { flex: none; width: 13px; height: 13px; }
.mp-add-mini:hover { background: var(--mp-blue-wash); border-color: var(--mp-blue-bright); }
.mp-add-mini[aria-pressed="true"] {
  background: var(--mp-blue-bright); border-color: var(--mp-blue-bright); color: #fff;
}
.mp-spec td.mp-cell-add { text-align: right; white-space: nowrap; width: 1%; }
/* In the tablet band a table still has all its columns but far less room, and
   the quote column is the one that can give it up: the control drops to its
   icon while the label stays in the accessibility tree as the button's name. */
@media (min-width: 768px) and (max-width: 959px) {
  .mp-spec .mp-add-mini [data-mp-quote-label] {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* Submission feedback */
.mp-alert {
  padding: var(--mp-24);
  border-radius: var(--mp-r-md);
  background: var(--mp-blue-wash);
  border: 1px solid var(--mp-hairline);
}
.mp-alert .mp-label { color: var(--mp-blue-deep); display: block; margin-bottom: 8px; }
.mp-alert p { max-width: 62ch; }
.mp-btn[aria-busy="true"] { opacity: 0.75; cursor: progress; }

/* 6.9 Header */
.mp-header { position: sticky; top: 0; z-index: 100; background: var(--mp-paper); }
.mp-header.is-stuck { box-shadow: var(--mp-lift); }
.mp-utility {
  background: var(--mp-blue-deep);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.mp-utility .mp-container {
  display: flex; align-items: center; gap: var(--mp-24);
  min-height: 40px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
.mp-utility a { color: #fff; display: inline-flex; align-items: center; gap: 8px; padding: 11px 0; }
.mp-utility a:hover { color: var(--mp-blue-mist); }
.mp-utility-spacer { margin-left: auto; }
.mp-utility-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--mp-r-sm);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}

.mp-bar {
  display: flex; align-items: center; gap: var(--mp-24);
  min-height: 104px;
  border-bottom: 1px solid var(--mp-hairline);
}
.mp-logo { flex: none; display: block; }
/* The wordmark is the brand's whole identity here, so it is given real
   presence. 64px is the ceiling at which the 500x131 source still renders
   crisply on a 2x screen; it steps down where the nav needs the room. */
.mp-logo img { height: 64px; width: auto; }
.mp-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.mp-nav-item { position: relative; }
.mp-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 14px;
  color: var(--mp-ink);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.mp-nav-link:hover, .mp-nav-item.is-open > .mp-nav-link { color: var(--mp-blue-deep); border-bottom-color: var(--mp-blue-bright); }
.mp-nav-link[aria-current="page"] { color: var(--mp-blue-deep); border-bottom-color: var(--mp-blue-bright); }
.mp-nav-link svg { transition: transform var(--mp-fast) ease; }
.mp-nav-item.is-open > .mp-nav-link svg { transform: rotate(180deg); }
.mp-actions { display: flex; align-items: center; gap: var(--mp-8); flex: none; }
.mp-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--mp-r-sm);
  color: var(--mp-ink);
  position: relative;
  transition: background var(--mp-fast) ease;
}
.mp-icon-btn:hover { background: var(--mp-blue-wash); color: var(--mp-blue-deep); }
.mp-tally {
  position: absolute; top: 5px; right: 5px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--mp-r-pill);
  background: var(--mp-blue-bright);
  color: #fff;
  font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Mega menu — a full width panel anchored to the header, not a dropdown chain */
.mp-nav-item.has-mega { position: static; }
.mp-mega {
  position: absolute;
  top: 100%; left: 0; right: 0;
  display: none;
  background: var(--mp-paper);
  border-top: 1px solid var(--mp-hairline);
  border-bottom: 1px solid var(--mp-hairline);
  box-shadow: var(--mp-sheet);
}
.mp-nav-item.is-open .mp-mega { display: block; }
.mp-mega-inner {
  max-width: var(--mp-container);
  margin: 0 auto;
  padding: var(--mp-32) 24px;
  /* Ten product categories over two rows is taller than a short laptop
     viewport. The panel scrolls rather than running off the bottom of the
     screen with no way to reach the last category. */
  max-height: calc(100vh - 172px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mp-mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mp-32); }
.mp-mega-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Ten product categories, so the products panel runs five columns over two
   rows and takes a tighter gutter and a tighter link rhythm to keep the whole
   taxonomy on one screen. */
.mp-mega-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--mp-24); }
.mp-mega-grid-5 .mp-mega-col a { padding: 5px 0; }
@media (max-width: 1200px) {
  .mp-mega-grid, .mp-mega-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mp-mega-col > .mp-label { color: var(--mp-slate); padding-bottom: 10px; border-bottom: 1px solid var(--mp-hairline); margin-bottom: 10px; display: block; }
.mp-mega-col a {
  display: block;
  padding: 7px 0;
  color: var(--mp-ink);
  font-size: 0.9375rem;
}
.mp-mega-col a:hover { color: var(--mp-blue-bright); }
.mp-mega-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mp-16);
  margin-top: var(--mp-24); padding-top: var(--mp-24);
  border-top: 1px solid var(--mp-hairline);
}

/* Mobile toggle + sheet */
.mp-burger { display: none; }
.mp-sheet {
  position: fixed; inset: 0;
  z-index: 150;
  display: none;
  background: var(--mp-blue-ink);
  color: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mp-sheet.is-open { display: flex; flex-direction: column; }
.mp-sheet-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--mp-16);
  padding: var(--mp-16) 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.mp-sheet-top img { height: 44px; background: #fff; padding: 6px 10px; border-radius: var(--mp-r-sm); }
.mp-sheet-close { color: #fff; width: 48px; height: 48px; display: grid; place-items: center; }
.mp-sheet-body { flex: 1; padding: var(--mp-8) 24px var(--mp-32); }
.mp-acc { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.mp-acc-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mp-16);
  width: 100%;
  padding: 18px 0;
  color: #fff;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: left;
}
.mp-acc-trigger svg { flex: none; transition: transform var(--mp-fast) ease; }
.mp-acc.is-open .mp-acc-trigger svg { transform: rotate(45deg); }
.mp-acc-panel { display: none; padding-bottom: var(--mp-16); }
.mp-acc.is-open .mp-acc-panel { display: block; }
.mp-acc-panel a {
  display: block; padding: 11px 0;
  color: var(--mp-blue-mist);
  font-size: 0.9375rem;
}
.mp-acc-panel a:hover { color: #fff; }
.mp-sheet-foot {
  padding: var(--mp-24);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--mp-blue-ink);
  position: sticky; bottom: 0;
  display: grid; gap: var(--mp-8);
}

/* 6.10 Hero */
.mp-hero { position: relative; background: var(--mp-blue-ink); color: #fff; isolation: isolate; overflow: hidden; }
.mp-hero-media { position: absolute; inset: 0; z-index: -2; }
.mp-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.mp-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(7, 30, 66, 0.92) 0%, rgba(7, 30, 66, 0.78) 44%, rgba(7, 30, 66, 0.30) 100%);
}
.mp-hero-inner { padding: var(--mp-64) 0 var(--mp-48); }
.mp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--mp-48);
  align-items: center;
}
.mp-hero-since {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--mp-r-sm);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.mp-hero .mp-display { margin-top: var(--mp-24); max-width: 24ch; }
.mp-hero-sub { color: var(--mp-blue-mist); font-size: 1.1875rem; line-height: 1.6; max-width: 52ch; }
.mp-hero-actions { margin-top: var(--mp-24); }
.mp-hero-panel {
  padding: var(--mp-24);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--mp-r-md);
  backdrop-filter: blur(6px);
}
.mp-hero-panel .mp-label { color: #fff; display: block; margin-bottom: var(--mp-4); }
.mp-hero-panel > p { color: var(--mp-blue-mist); font-size: 0.9375rem; margin-bottom: var(--mp-16); }
.mp-hero-panel .mp-chips { gap: var(--mp-8); }
.mp-hero-panel .mp-chip { min-height: 40px; padding: 8px 14px; }
.mp-hero-panel .mp-link { margin-top: var(--mp-16); color: #fff; }
.mp-hero-panel .mp-link:hover { border-bottom-color: #fff; color: #fff; }
.mp-hero-strip {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(7, 30, 66, 0.55);
}
.mp-hero-strip .mp-container {
  display: flex; flex-wrap: wrap; gap: var(--mp-16) var(--mp-32);
  padding-top: var(--mp-16); padding-bottom: var(--mp-16);
}
.mp-hero-stat { display: flex; flex-direction: column; gap: 3px; }
.mp-hero-stat b { color: inherit; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.01em; }
.mp-hero-stat span { color: var(--mp-blue-mist); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

/* 6.11 Page banner (inner pages) */
.mp-banner { background: var(--mp-blue-deep); color: #fff; padding: var(--mp-64) 0 var(--mp-48); }
.mp-banner .mp-display { max-width: 26ch; }
.mp-banner-sub { color: var(--mp-blue-mist); font-size: 1.1875rem; line-height: 1.6; max-width: 62ch; }
.mp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--mp-24);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.mp-crumbs a { color: var(--mp-blue-mist); display: inline-flex; align-items: center; padding: 6px 0; }
.mp-crumbs a:hover { color: #fff; }
.mp-crumbs span[aria-current] { color: #fff; }
.mp-crumbs svg { color: rgba(255,255,255,0.45); }

/* 6.12 Credential band */
.mp-creds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, 0.2); }
.mp-cred { background: var(--mp-blue-deep); padding: var(--mp-32) var(--mp-24); display: flex; flex-direction: column; gap: 10px; }
.mp-cred svg { color: var(--mp-blue-lift); width: 30px; height: 30px; }
.mp-cred b { color: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.mp-cred span { color: var(--mp-blue-mist); font-size: 0.8125rem; line-height: 1.5; }

/* 6.13 Capability list — media beside a spec list, alternating */
.mp-cap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mp-48); align-items: center; }
.mp-cap + .mp-cap { margin-top: var(--mp-64); padding-top: var(--mp-64); border-top: 1px solid var(--mp-hairline); }
.mp-cap-media { border-radius: var(--mp-r-md); overflow: hidden; background: var(--mp-surface); aspect-ratio: 16 / 11; }
.mp-cap-media img { width: 100%; height: 100%; object-fit: cover; }
.mp-cap:nth-child(even) .mp-cap-media { order: 2; }
.mp-cap-list { margin-top: var(--mp-24); border-top: 1px solid var(--mp-hairline); }
.mp-cap-list li {
  color: inherit;
  display: flex; align-items: baseline; gap: var(--mp-16);
  padding: 12px 0;
  border-bottom: 1px solid var(--mp-hairline);
  font-size: 1rem;
}
.mp-cap-list li b { color: inherit; font-weight: 600; min-width: 12ch; }
.mp-cap-list li span { color: var(--mp-slate); }

/* 6.14 Pull quote / note — Wash ground, no coloured stroke */
.mp-note {
  padding: var(--mp-24);
  background: var(--mp-blue-wash);
  border-radius: var(--mp-r-md);
}
.mp-note p { max-width: 62ch; }
.mp-note .mp-label { color: var(--mp-blue-deep); display: block; margin-bottom: 10px; }

/* 6.15 Contact tiles */
.mp-contact-card { padding: var(--mp-24); border: 1px solid var(--mp-hairline); border-radius: var(--mp-r-md); background: var(--mp-paper); }
.mp-contact-card .mp-label { color: var(--mp-slate); display: block; margin-bottom: var(--mp-12); }
.mp-contact-card a { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.mp-regions { border-top: 1px solid var(--mp-hairline); }
.mp-region {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mp-16);
  padding: 14px 0; border-bottom: 1px solid var(--mp-hairline);
}
.mp-region b { color: inherit; font-weight: 600; font-size: 1rem; }
.mp-region a { font-variant-numeric: tabular-nums; font-weight: 600; }

/* 6.16 CTA band */
.mp-cta { background: var(--mp-blue-deep); color: #fff; }
.mp-cta .mp-container { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mp-32); align-items: center; padding-top: var(--mp-64); padding-bottom: var(--mp-64); }
.mp-cta .mp-headline { max-width: 30ch; }
.mp-cta p { color: var(--mp-blue-mist); max-width: 56ch; }

/* 6.17 Footer */
.mp-footer { background: var(--mp-blue-ink); color: #fff; }
.mp-footer-top { padding: var(--mp-64) 0 var(--mp-48); display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); gap: var(--mp-32); }
.mp-footer-brand img { height: 52px; width: auto; background: #fff; padding: 10px 14px; border-radius: var(--mp-r-sm); }
.mp-footer-brand p { margin-top: var(--mp-16); color: var(--mp-blue-mist); font-size: 0.9375rem; line-height: 1.6; max-width: 34ch; }
.mp-footer-col > .mp-label { color: #fff; display: block; margin-bottom: var(--mp-16); }
.mp-footer-col a { display: block; padding: 6px 0; color: var(--mp-blue-mist); font-size: 0.9375rem; }
.mp-footer-col a:hover { color: #fff; }
.mp-footer-legal { padding: var(--mp-24) 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.mp-footer-legal .mp-container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-8) var(--mp-24); }
.mp-footer-legal p, .mp-footer-legal a { color: var(--mp-blue-mist); font-size: 0.8125rem; }
.mp-footer-legal a { display: inline-flex; align-items: center; padding: 10px 0; }
.mp-footer-legal .mp-utility-spacer { margin-left: auto; }
.mp-social { display: flex; gap: var(--mp-8); }
.mp-social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.28); border-radius: var(--mp-r-sm);
  color: #fff;
}
.mp-social a:hover { background: #fff; color: var(--mp-blue-ink); }

/* 6.18 Two column prose with a sticky index */
.mp-doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--mp-64); align-items: start; }
.mp-doc-index { position: sticky; top: 140px; border-top: 1px solid var(--mp-hairline); }
.mp-doc-index a { display: block; padding: 11px 0; border-bottom: 1px solid var(--mp-hairline); color: var(--mp-slate);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.mp-doc-index a:hover, .mp-doc-index a.is-on { color: var(--mp-blue-deep); }
.mp-doc-body > * + * { margin-top: var(--mp-24); }
.mp-doc-body section { scroll-margin-top: 140px; }
.mp-doc-body section + section { margin-top: var(--mp-64); padding-top: var(--mp-64); border-top: 1px solid var(--mp-hairline); }
.mp-doc-body h2 { margin-bottom: var(--mp-16); }
.mp-doc-body h3 { color: inherit; font-size: 1.1875rem; font-weight: 600; margin-top: var(--mp-32); margin-bottom: 10px; }
.mp-doc-body p { max-width: var(--mp-measure); }
.mp-doc-body p + p { margin-top: var(--mp-16); }
.mp-ticks { margin-top: var(--mp-16); display: grid; gap: 10px; }
.mp-ticks li { color: inherit; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--mp-12); align-items: start; font-size: 1rem; }
.mp-ticks svg { color: var(--mp-blue-bright); margin-top: 4px; }

/* 6.19 Form grid */
.mp-form { display: grid; gap: var(--mp-16); }
.mp-form-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-form .mp-span-2 { grid-column: 1 / -1; }
.mp-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-16); }
.mp-check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--mp-12); align-items: start; }
.mp-check input { width: 24px; height: 24px; margin: 0; accent-color: var(--mp-blue-bright); }
.mp-check span { font-size: 0.9375rem; color: var(--mp-slate); line-height: 1.5; }

/* 6.20 Category index — a hairline list, the fastest way to scan nomenclature */
.mp-index { border-top: 1px solid var(--mp-hairline); }
.mp-index-row {
  display: grid;
  grid-template-columns: minmax(0, 22ch) minmax(0, 1fr) auto;
  gap: var(--mp-24);
  align-items: baseline;
  padding: var(--mp-16) 0;
  border-bottom: 1px solid var(--mp-hairline);
  transition: background var(--mp-fast) ease;
  color: var(--mp-ink);
}
.mp-index-row:hover { background: var(--mp-blue-wash); color: var(--mp-ink); }
.mp-index-row > b { color: inherit; font-size: 1.0625rem; font-weight: 600; }
.mp-index-row:hover > b { color: var(--mp-blue-deep); }
.mp-index-parts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.9375rem; color: var(--mp-slate); }
.mp-index-go { color: var(--mp-blue-bright); display: flex; align-items: center; }

/* 6.21 Empty state — for the pages awaiting real content */
.mp-empty {
  padding: var(--mp-64) var(--mp-32);
  border: 1px dashed var(--mp-hairline-strong);
  border-radius: var(--mp-r-md);
  background: var(--mp-surface);
  text-align: center;
}
.mp-empty svg { color: var(--mp-steel); width: 40px; height: 40px; margin: 0 auto var(--mp-16); }
.mp-empty p { color: var(--mp-slate); max-width: 52ch; margin: 0 auto var(--mp-24); }
/* Declared after the paragraph rule and at equal specificity so the title
   stays Ink while the supporting copy below it stays Slate. */
.mp-empty p.mp-title { color: var(--mp-ink); margin-bottom: 10px; max-width: none; }

/* 6.22 Split feature — copy beside media, used for OEM and quality */
.mp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mp-48); align-items: center; }
.mp-split-media { border-radius: var(--mp-r-md); overflow: hidden; background: var(--mp-surface); aspect-ratio: 3 / 2; position: relative; }
.mp-split-media img { width: 100%; height: 100%; object-fit: cover; }
.mp-split-flip .mp-split-media { order: 2; }

/* 6.23 Synthetic asset notice
   Hidden by default so the live site is clean. The static preview adds
   .mp-show-synthetic to <body> so the client can see exactly which images are
   generated placeholders awaiting the real factory shoot. */
.mp-synthetic { display: none; }
.mp-show-synthetic .mp-synthetic {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  background: rgba(7, 30, 66, 0.78);
  color: #fff;
  border-radius: var(--mp-r-sm);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  position: absolute; top: 10px; right: 10px; z-index: 3;
  pointer-events: none;
}
.mp-show-synthetic .mp-hero > .mp-synthetic { top: 12px; right: 24px; }

/* --------------------------------------------------------------------------
   7. MOTION — one authored moment on the hero, nothing scattered elsewhere
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .mp-stage > * { animation: mp-rise var(--mp-slow) var(--mp-ease) both; }
  .mp-stage > *:nth-child(1) { animation-delay: 40ms; }
  .mp-stage > *:nth-child(2) { animation-delay: 120ms; }
  .mp-stage > *:nth-child(3) { animation-delay: 200ms; }
  .mp-stage > *:nth-child(4) { animation-delay: 280ms; }
  .mp-stage > *:nth-child(5) { animation-delay: 360ms; }
  .mp-hero-strip { animation: mp-fade var(--mp-slow) var(--mp-ease) 440ms both; }
}
@keyframes mp-rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes mp-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .mp *, .mp *::before, .mp *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .mp-card:hover .mp-card-media img,
  .mp-industry:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE
   -------------------------------------------------------------------------- */
/* The utility bar never wraps, so its optional badges drop out as width tightens. */
@media (max-width: 1439px) {
  .mp-utility-badge + .mp-utility-badge { display: none; }
}
@media (max-width: 1279px) {
  .mp-utility-badge { display: none; }
  /* The nav still needs its full width here, so the wordmark gives some back. */
  .mp-logo img { height: 52px; }
  .mp-bar { min-height: 92px; }
  .mp-footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-footer-brand { grid-column: 1 / -1; }
  .mp-doc { grid-template-columns: 200px minmax(0, 1fr); gap: var(--mp-32); }
}

@media (max-width: 1023px) {
  :root { --mp-section-y: 64px; --mp-section-y-major: 88px; }
  .mp-nav, .mp-utility { display: none; }
  .mp-burger { display: inline-flex; }
  /* The nav has moved into the sheet, so the wordmark takes the space back. */
  .mp-bar { min-height: 80px; }
  .mp-logo img { height: 54px; }
  .mp-actions { margin-left: auto; }
  .mp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-cap { grid-template-columns: minmax(0, 1fr); gap: var(--mp-24); }
  .mp-cap:nth-child(even) .mp-cap-media { order: 0; }
  .mp-split { grid-template-columns: minmax(0, 1fr); gap: var(--mp-24); }
  .mp-split-flip .mp-split-media { order: 0; }
  .mp-cta .mp-container { grid-template-columns: minmax(0, 1fr); }
  .mp-doc { grid-template-columns: minmax(0, 1fr); }
  .mp-doc-index { position: static; display: flex; flex-wrap: wrap; gap: var(--mp-8); border-top: 0; }
  .mp-doc-index a { border-bottom: 0; padding: 10px 14px; background: var(--mp-blue-wash); border-radius: var(--mp-r-pill); color: var(--mp-blue-deep); }
  .mp-hero-inner { padding: var(--mp-48) 0 var(--mp-32); }
  .mp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--mp-32); }
  .mp-utility-badge { display: none; }
  .mp-fact { grid-template-columns: 34px minmax(0, 1fr); gap: var(--mp-16); }
  .mp-fact dd { grid-column: 2; }
  .mp-fact-mark svg { width: 22px; height: 22px; }
}

@media (max-width: 767px) {
  :root { --mp-section-y: 48px; --mp-section-y-major: 64px; }
  .mp { font-size: 1rem; }
  .mp-container { padding: 0 18px; }
  .mp-grid-2, .mp-grid-3, .mp-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .mp-head { margin-bottom: var(--mp-32); }
  .mp-head-split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .mp-creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-btn-row .mp-btn { flex: 1 1 100%; }
  /* The header's text CTA has no room beside the logo and three icons; the
     mobile sheet carries it pinned to the bottom instead. */
  .mp-actions > .mp-btn { display: none; }
  .mp-hero-panel { padding: var(--mp-16); }
  .mp-hero .mp-display { max-width: none; }
  .mp-industry { min-height: 280px; }
  .mp-dl { grid-template-columns: 62px minmax(0, 1fr); }
  .mp-dl-meta, .mp-dl-go { grid-column: 2; }
  .mp-dl-go { justify-self: start; }

  /* Specification tables restack rather than scroll the page sideways */
  .mp-spec-wrap { border: 0; }
  .mp-spec, .mp-spec tbody, .mp-spec tr, .mp-spec th, .mp-spec td { display: block; width: 100%; }
  .mp-spec thead { display: none; }
  .mp-spec caption { padding: 0 0 var(--mp-16); border: 0; }
  .mp-spec tbody tr {
    border: 1px solid var(--mp-hairline);
    border-radius: var(--mp-r-md);
    margin-bottom: var(--mp-12);
    background: var(--mp-paper) !important;
    padding: var(--mp-8) var(--mp-16);
  }
  .mp-spec tbody th, .mp-spec tbody td {
    padding: 10px 0;
    border-bottom: 1px solid var(--mp-hairline);
    text-align: left !important;
  }
  .mp-spec tbody tr > *:last-child { border-bottom: 0; }
  .mp-spec tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--mp-slate);
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  }
  .mp-cap-list li { flex-direction: column; gap: 3px; }
  .mp-cap-list li b { min-width: 0; }
  .mp-region { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mp-form-2 { grid-template-columns: minmax(0, 1fr); }
  .mp-index-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mp-index-parts { grid-column: 1 / -1; }
  .mp-empty { padding: var(--mp-32) var(--mp-16); }
}

@media (max-width: 479px) {
  .mp-creds { grid-template-columns: minmax(0, 1fr); }
  .mp-footer-top { grid-template-columns: minmax(0, 1fr); }
  .mp-hero-strip .mp-container { gap: var(--mp-16); }
  .mp-logo img { height: 40px; }
}

/* Print — a buyer prints the spec page */
@media print {
  .mp-header, .mp-footer, .mp-cta, .mp-sheet { display: none !important; }
  .mp-hero::after, .mp-industry::after { background: none; }
  .mp { color: #000; font-size: 11pt; }
  .mp-section { padding: 12pt 0; }
}