/* ==========================================================================
   MAISUI P8 V2 — design system layer
   ==========================================================================

   Layer 6 of 6. Loaded after tokens/base/layout/components/editorial while the P8
   system is under review; it is intended to replace editorial.css once approved.

   WHAT THIS IS
   ------------
   A presentation layer for one industrial manufacturer with 5,010 catalogue records
   and an empty media library. Brand colours are frozen (mandate §3) — every colour
   below resolves to an existing token in tokens.css. Nothing here invents a brand
   colour, imports a reference palette, or adds a library.

   WHAT IT ADDS OVER P7.2
   ----------------------
   1. Type ROLES. P7.2 exposed sizes; P8 names the jobs — display, part number,
      technical label, datasheet value. A part number now has one treatment.
   2. A radius SCALE. P7.2 had 2/3/4px. Those read as sharp to the point of feeling
      unfinished at large image sizes. P8 uses a graduated scale: controls stay tight,
      editorial imagery relaxes. No 30px global image radius (mandate §7).
   3. DEPTH DISCIPLINE. Two mechanisms only — hairline rules for technical rows, one
      soft ambient shadow for selected visual cards. Nothing else in between.
   4. MOTION as one system, not per-component. Three entrance effects, one stagger,
      one interaction curve, all disabled under prefers-reduced-motion.
   5. HONEST ABSENCE. Every image slot has a designed no-image state. On this site that
      is the default state, not an edge case.

   ANTI-PATTERN RULES OBSERVED (industrial-web-design)
   ---------------------------------------------------
   - Not every section is a card. Technical content uses rules and rows.
   - No repeated eyebrow -> heading -> paragraph -> cards -> CTA chain: the homepage
     alternates full-bleed, split, asymmetric grid, data strip and index.
   - Radii, shadows and motion come from scales, never per-component invention.
   - Accent copper is reserved for action and active state, never decoration.

   ========================================================================== */

/* ==========================================================================
   1. P8 TOKENS — additive only. No existing token is redefined.
   ========================================================================== */

:root {
  /* ---- Radius scale (mandate §7) ---------------------------------------
     Controls sit at the tight end so they still read as instruments; imagery
     relaxes because a 4px corner on a 640px photograph looks like a mistake.
     A single large global image radius is deliberately not adopted: at 30px it rounds a
     technical photograph into a consumer card and reads as decoration rather than as the
     product. Editorial imagery consequently tops out well below that.            */
  --p8-r-control: 8px;
  --p8-r-card: 10px;
  --p8-r-panel: 12px;
  --p8-r-media: 16px;   /* editorial photograph */
  --p8-r-media-lg: 20px; /* full-bleed / hero-scale media */
  --p8-r-pill: 999px;   /* semantic only — status, tags, filters */

  /* ---- Depth ------------------------------------------------------------
     One ambient shadow for visual cards. Technical rows get a rule instead.  */
  --p8-shadow-card: 0 1px 2px rgba(11, 27, 43, 0.04), 0 8px 24px rgba(11, 27, 43, 0.06);
  --p8-shadow-lift: 0 2px 4px rgba(11, 27, 43, 0.05), 0 14px 32px rgba(11, 27, 43, 0.10);
  --p8-shadow-header: 0 1px 0 var(--ms-line);
  --p8-shadow-dark: 0 18px 40px rgba(4, 12, 22, 0.32);

  /* ---- Motion (mandate §27) --------------------------------------------
     Entrance 0.6–0.8s, stagger 100–200ms, interaction 0.25–0.3s,
     lift 4–8px max, image scale 1.02–1.05.                                    */
  --p8-dur-entrance: 700ms;
  --p8-dur-reveal: 600ms;
  --p8-dur: 260ms;
  --p8-dur-fast: 180ms;
  --p8-stagger: 180ms;
  --p8-lift: -6px;
  --p8-lift-sm: -4px;
  --p8-scale: 1.03;
  --p8-ease-out: cubic-bezier(0.16, 0.84, 0.28, 1);
  --p8-ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* ---- Type roles -------------------------------------------------------
     Named by job. A datasheet value and a body paragraph are not the same
     thing and must not share a rule.                                          */
  --p8-fs-display: clamp(2.1rem, 1.35rem + 3.1vw, 3.6rem);
  --p8-fs-h1: clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem);
  --p8-fs-h2: clamp(1.55rem, 1.2rem + 1.4vw, 2.15rem);
  --p8-fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --p8-fs-h4: 1.125rem;
  --p8-fs-body: 1.0625rem;   /* 17px — never shrunk to fit (mandate §8) */
  --p8-fs-sm: 0.9375rem;
  --p8-fs-label: 0.75rem;    /* 12px technical label */
  --p8-fs-micro: 0.6875rem;  /* 11px — metadata only, never prose */

  --p8-measure: 66ch;
  --p8-measure-tight: 54ch;

  /* ---- Editorial rhythm ------------------------------------------------- */
  --p8-band-y: clamp(56px, 6.4vw, 104px);
  --p8-band-y-tight: clamp(40px, 4.4vw, 72px);
  --p8-container: 1280px;
  --p8-container-wide: 1440px;
  --p8-gutter: clamp(18px, 4vw, 40px);
}

/* Larger body copy on wide screens only; mobile keeps 17px. */
@media (min-width: 1024px) {
  :root {
    --p8-fs-body: 1.0938rem;
  }
}

/* ==========================================================================
   2. BASE — scope everything to the preview/theme shell, never to wp-admin.
   ========================================================================== */

.p8 {
  color: var(--ms-ink);
  font-family: var(--ms-font-body);
  font-size: var(--p8-fs-body);
  line-height: var(--ms-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.p8 *,
.p8 *::before,
.p8 *::after {
  box-sizing: border-box;
}

:where(.p8) img {
  max-width: 100%;
  height: auto;
}

/* Base element defaults are wrapped in :where() so they carry zero specificity.
   Without this, `.p8 a` (0,1,1) outranks every single-class component rule
   (0,1,0) — and a link styled as a button then renders in the link colour
   instead of its own: blue text on the copper CTA, which is a contrast failure,
   and a blue wordmark in the header. Component classes must win. */
:where(.p8) a {
  color: var(--ms-blue-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.p8 :focus-visible {
  outline: 2px solid var(--ms-blue-600);
  outline-offset: 2px;
  border-radius: 2px;
}

.p8-dark :focus-visible,
.p8 :focus-visible.on-dark {
  outline-color: var(--ms-blue-400);
}

/* ---- Layout primitives -------------------------------------------------- */

.p8-wrap {
  width: 100%;
  max-width: var(--p8-container);
  margin-inline: auto;
  padding-inline: var(--p8-gutter);
}

.p8-wrap--wide {
  max-width: var(--p8-container-wide);
}

.p8-wrap--narrow {
  max-width: 940px;
}

.p8-band {
  padding-block: var(--p8-band-y);
}

.p8-band--tight {
  padding-block: var(--p8-band-y-tight);
}

/* Tonal bands create the dark/light rhythm. Not every band is a card. */
.p8-band--paper { background: var(--ms-surface); }
.p8-band--gray  { background: var(--ms-surface-2); }
.p8-band--mist  { background: var(--ms-surface-3); }

.p8-band--dark {
  background: var(--ms-navy-900);
  color: var(--ms-on-dark);
}

.p8-band--dark h1,
.p8-band--dark h2,
.p8-band--dark h3,
.p8-band--dark h4 { color: var(--ms-on-dark); }

.p8-band--dark p { color: var(--ms-on-dark-soft); }

/* Only bare prose links on dark surfaces get the lighter accent. Links that
   carry any class are a component and must keep their own colour. */
.p8-band--dark a:not([class]) { color: var(--ms-blue-400); }

.p8-rule {
  border: 0;
  border-top: var(--ms-border);
  margin: 0;
}

.p8-rule--dark {
  border-top: var(--ms-border-dark);
}

/* The header is sticky, so an in-page target would otherwise land underneath it.
   Applies to any element carrying an id that a link may point at. */
.p8 [id] {
  scroll-margin-top: calc(var(--ms-header-h) + 16px);
}

/* ==========================================================================
   3. TYPOGRAPHY ROLES
   ========================================================================== */

.p8-display,
.p8-h1,
.p8-h2,
.p8-h3,
.p8-h4 {
  font-family: var(--ms-font-display);
  font-weight: 700;
  letter-spacing: var(--ms-track-tight);
  color: var(--ms-ink);
  margin: 0;
  text-wrap: balance;
}

.p8-display {
  font-size: var(--p8-fs-display);
  line-height: 1.04;
}

.p8-h1 {
  font-size: var(--p8-fs-h1);
  line-height: 1.1;
}

.p8-h2 {
  font-size: var(--p8-fs-h2);
  line-height: 1.15;
}

.p8-h3 {
  font-size: var(--p8-fs-h3);
  line-height: 1.22;
}

.p8-h4 {
  font-size: var(--p8-fs-h4);
  line-height: 1.3;
  font-weight: 600;
}

.p8-lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--ms-ink-soft);
  max-width: var(--p8-measure);
  margin: 0;
  text-wrap: pretty;
}

.p8-body {
  max-width: var(--p8-measure);
  color: var(--ms-ink-soft);
}

.p8-body p { margin: 0 0 var(--ms-s4); }
.p8-body p:last-child { margin-bottom: 0; }

.p8-small {
  font-size: var(--p8-fs-sm);
  color: var(--ms-steel);
  line-height: 1.55;
}

/* ---- Technical label — the workhorse of an industrial page -------------- */

.p8-label {
  display: block;
  font-family: var(--ms-font-body);
  font-size: var(--p8-fs-label);
  font-weight: 600;
  letter-spacing: var(--ms-track-wider);
  text-transform: uppercase;
  color: var(--ms-steel);
  line-height: 1.3;
}

.p8-label--accent { color: var(--ms-cta); }

.p8-band--dark .p8-label { color: var(--ms-on-dark-muted); }

/* ---- Part number — tabular, unambiguous, never Title-Cased -------------- */

.p8-part {
  font-family: var(--ms-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ms-ink);
  text-transform: none;
  word-break: break-word;
}

.p8-part--xl { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.15rem); line-height: 1.12; }
.p8-part--lg { font-size: 1.1875rem; line-height: 1.25; }
.p8-part--md { font-size: 1rem; line-height: 1.3; }
.p8-part--sm { font-size: 0.875rem; line-height: 1.3; }

.p8-band--dark .p8-part { color: var(--ms-on-dark); }

/* ---- Datasheet value ---------------------------------------------------- */

.p8-value {
  font-family: var(--ms-font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ms-ink);
  letter-spacing: 0;
}

.p8-value--lg { font-size: 1.0625rem; }

/* ---- Section head — deliberately NOT eyebrow+heading+paragraph every time */

.p8-head {
  display: grid;
  gap: var(--ms-s4);
  margin-bottom: var(--ms-s7);
}

.p8-head__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ms-s5);
  flex-wrap: wrap;
  padding-bottom: var(--ms-s3);
  border-bottom: var(--ms-border);
}

.p8-band--dark .p8-head__top { border-bottom-color: var(--ms-line-dark); }

.p8-head__title {
  display: grid;
  gap: var(--ms-s3);
  max-width: 62ch;
}

.p8-head--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--ms-s7);
}

.p8-head--split .p8-head__title { max-width: none; }

@media (max-width: 860px) {
  .p8-head--split { grid-template-columns: 1fr; gap: var(--ms-s5); }
}

/* ==========================================================================
   4. BUTTONS — shaped controls, pills reserved for semantics
   ========================================================================== */

.p8-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-s2);
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--p8-r-control);
  background: var(--ms-cta);
  color: #fff;
  font-family: var(--ms-font-body);
  font-size: var(--p8-fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background-color var(--p8-dur) var(--p8-ease),
              border-color var(--p8-dur) var(--p8-ease),
              color var(--p8-dur) var(--p8-ease),
              transform var(--p8-dur) var(--p8-ease);
}

.p8-btn:hover {
  background: var(--ms-cta-hover);
  color: #fff;
  transform: translateY(-1px);
}

.p8-btn--lg {
  min-height: 50px;
  padding: 14px 26px;
  font-size: 1rem;
}

.p8-btn--sm {
  min-height: 38px;
  padding: 8px 14px;
  font-size: var(--p8-fs-xs);
}

.p8-btn--block { width: 100%; }

.p8-btn--secondary {
  background: transparent;
  border-color: var(--ms-line-strong);
  color: var(--ms-ink);
}

.p8-btn--secondary:hover {
  background: var(--ms-surface-2);
  border-color: var(--ms-ink-soft);
  color: var(--ms-ink);
}

.p8-btn--dark {
  background: var(--ms-navy-800);
  border-color: var(--ms-navy-800);
  color: #fff;
}

.p8-btn--dark:hover {
  background: var(--ms-navy-700);
  border-color: var(--ms-navy-700);
}

.p8-btn--on-dark {
  background: transparent;
  border-color: var(--ms-line-dark);
  color: var(--ms-on-dark);
}

.p8-btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.p8-btn--wa {
  background: var(--ms-success);
  border-color: var(--ms-success);
}

.p8-btn--wa:hover { background: #17603b; border-color: #17603b; }

.p8-btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--ms-blue-600);
  padding-inline: 2px;
  min-height: 40px;
}

.p8-btn--quiet:hover {
  background: transparent;
  color: var(--ms-blue-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  transform: none;
}

/* Text link with a consistent arrow behaviour (mandate §26). */
.p8-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--p8-fs-sm);
  font-weight: 600;
  color: var(--ms-blue-600);
  text-decoration: none;
  min-height: 32px;
}

.p8-arrow-link svg { width: 15px; height: 15px; flex: none; }

.p8-arrow-link:hover { color: var(--ms-blue-500); }

.p8-arrow-link:hover svg { transform: translateX(3px); }

.p8-arrow-link svg { transition: transform var(--p8-dur) var(--p8-ease); }

/* ==========================================================================
   5. STATUS / TAGS — pills are semantic here, and only here
   ========================================================================== */

.p8-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--p8-r-pill);
  border: 1px solid var(--ms-line-strong);
  background: var(--ms-surface);
  font-size: var(--p8-fs-micro);
  font-weight: 600;
  letter-spacing: var(--ms-track-wide);
  text-transform: uppercase;
  color: var(--ms-ink-soft);
  line-height: 1.5;
}

.p8-status--success {
  border-color: rgba(30, 122, 75, 0.35);
  background: var(--ms-success-soft);
  color: var(--ms-success);
}

.p8-status--accent {
  border-color: rgba(180, 86, 12, 0.3);
  background: var(--ms-cta-soft);
  color: var(--ms-cta-ink);
}

.p8-status--muted {
  background: var(--ms-surface-2);
  color: var(--ms-steel);
}

.p8-band--dark .p8-status {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--ms-line-dark);
  color: var(--ms-on-dark-soft);
}

.p8-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--p8-r-control);
  border: var(--ms-border);
  background: var(--ms-surface);
  font-size: var(--p8-fs-micro);
  font-weight: 500;
  color: var(--ms-ink-soft);
  text-decoration: none;
}

.p8-tag:hover { border-color: var(--ms-ink-soft); color: var(--ms-ink); }

.p8-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-s2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   6. HEADER — desktop and mobile from one menu source
   ========================================================================== */

.p8-header {
  position: sticky;
  top: 0;
  z-index: var(--ms-z-header);
  background: var(--ms-navy-900);
  color: var(--ms-on-dark);
}

.p8-header__bar {
  display: flex;
  align-items: center;
  gap: var(--ms-s5);
  min-height: var(--ms-header-h);
}

.p8-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  flex: none;
  min-height: 44px;
}

.p8-header__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--p8-r-control);
  background: var(--ms-cta);
  color: #fff;
  font-family: var(--ms-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  flex: none;
}

.p8-header__wordmark {
  font-family: var(--ms-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.p8-header__tagline {
  display: block;
  font-size: 0.625rem;
  letter-spacing: var(--ms-track-wider);
  text-transform: uppercase;
  color: var(--ms-on-dark-muted);
  margin-top: 1px;
}

.p8-header__nav { margin-left: auto; }

.p8-header__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.p8-header__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 13px;
  border-radius: var(--p8-r-control);
  color: var(--ms-on-dark-soft);
  font-size: var(--p8-fs-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--p8-dur-fast) var(--p8-ease),
              background-color var(--p8-dur-fast) var(--p8-ease);
}

.p8-header__list a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.p8-header__list a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 -2px 0 var(--ms-cta);
}

.p8-header__cta { margin-left: var(--ms-s4); flex: none; }

/* ---- Mobile trigger ----------------------------------------------------- */

.p8-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--ms-line-dark);
  border-radius: var(--p8-r-control);
  background: transparent;
  color: #fff;
  cursor: pointer;
  flex: none;
}

.p8-header__toggle:hover { background: rgba(255, 255, 255, 0.08); }

.p8-header__toggle svg { width: 20px; height: 20px; }

/* The breakpoint is content-driven, not device-driven.
   The primary menu has nine destinations; with the wordmark and the quote CTA
   they measure ~1232px including gutters. Switching to the drawer at 1024px left
   the desktop bar visible at exactly 1024 and produced 208px of horizontal
   overflow on every page. 1120px is the first width where the bar genuinely fits,
   so below that the drawer takes over — which is also the correct tablet
   behaviour: a tablet gets an intentional panel, not a compressed desktop. */
@media (max-width: 1119px) {
  .p8-header__nav,
  .p8-header__cta { display: none; }
  .p8-header__toggle { display: inline-flex; }
}

/* ---- Drawer: one menu source, no second hard-coded navigation ----------- */

.p8-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--ms-z-drawer);
  display: none;
}

.p8-drawer[data-open="true"] { display: block; }

.p8-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 12, 22, 0.55);
  border: 0;
  padding: 0;
  cursor: pointer;
  animation: p8-fade var(--p8-dur) var(--p8-ease) both;
}

.p8-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 400px);
  background: var(--ms-navy-900);
  color: var(--ms-on-dark);
  display: flex;
  flex-direction: column;
  box-shadow: var(--p8-shadow-dark);
  animation: p8-slide-in var(--p8-dur) var(--p8-ease-out) both;
  overscroll-behavior: contain;
}

.p8-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-s4);
  padding: var(--ms-s4) var(--ms-s5);
  border-bottom: var(--ms-border-dark);
  flex: none;
}

.p8-drawer__title {
  font-family: var(--ms-font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.p8-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ms-line-dark);
  border-radius: var(--p8-r-control);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.p8-drawer__close:hover { background: rgba(255, 255, 255, 0.08); }

.p8-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ms-s4) 0 var(--ms-s6);
}

.p8-drawer__list { list-style: none; margin: 0; padding: 0; }

.p8-drawer__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-s4);
  min-height: 52px;
  padding: 10px var(--ms-s5);
  color: var(--ms-on-dark-soft);
  text-decoration: none;
  font-size: 1.0625rem;
  border-left: 3px solid transparent;
}

.p8-drawer__list a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }

.p8-drawer__list a[aria-current="page"] {
  color: #fff;
  border-left-color: var(--ms-cta);
  background: rgba(255, 255, 255, 0.08);
  font-weight: 600;
}

.p8-drawer__list a svg { width: 16px; height: 16px; opacity: 0.5; flex: none; }

.p8-drawer__foot {
  flex: none;
  padding: var(--ms-s5);
  border-top: var(--ms-border-dark);
  display: grid;
  gap: var(--ms-s3);
}

/* Body scroll lock while the drawer is open — no background scrolling. */
.p8-no-scroll { overflow: hidden; }

/* ==========================================================================
   7. HERO — product participates in the composition
   ========================================================================== */

.p8-hero {
  position: relative;
  background: var(--ms-navy-900);
  color: var(--ms-on-dark);
  overflow: hidden;
}

.p8-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 92px);
}

.p8-hero__copy {
  display: grid;
  gap: var(--ms-s5);
  align-content: center;
  max-width: 46ch;
}

.p8-hero h1 { color: #fff; }

.p8-hero__lede {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);
  line-height: 1.6;
  color: var(--ms-on-dark-soft);
  margin: 0;
  max-width: 48ch;
}

.p8-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-s3);
  align-items: center;
}

.p8-hero__note {
  font-size: var(--p8-fs-sm);
  color: var(--ms-on-dark-muted);
  margin: 0;
}

/* Product visual sits in the composition with an offset technical frame,
   rather than inside a centred rounded card. */
.p8-hero__media {
  position: relative;
  align-self: stretch;
  min-height: 0;
}

.p8-hero__figure {
  position: relative;
  border-radius: var(--p8-r-media-lg);
  overflow: hidden;
  background: var(--ms-navy-800);
  aspect-ratio: 4 / 3;
  box-shadow: var(--p8-shadow-dark);
}

.p8-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p8-hero__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 18px;
  background: linear-gradient(to top, rgba(4, 12, 22, 0.86), rgba(4, 12, 22, 0));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ms-s4);
}

/* ---- Hero with no owner image: a composed text-led state, never a box --- */

.p8-hero__fallback {
  position: relative;
  border-radius: var(--p8-r-media-lg);
  border: 1px solid var(--ms-line-dark);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    var(--ms-navy-800);
  padding: clamp(22px, 3vw, 38px);
  display: grid;
  gap: var(--ms-s5);
  align-content: space-between;
  min-height: 320px;
}

/* A dimension schematic drawn in CSS rules — technical, honest, not a fake photo. */
.p8-hero__schematic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ms-line-dark);
  border: 1px solid var(--ms-line-dark);
  border-radius: var(--p8-r-card);
  overflow: hidden;
}

.p8-hero__schematic div {
  background: var(--ms-navy-900);
  padding: 14px 12px;
  display: grid;
  gap: 4px;
}

.p8-hero__schematic dt {
  font-size: var(--p8-fs-micro);
  letter-spacing: var(--ms-track-wider);
  text-transform: uppercase;
  color: var(--ms-on-dark-muted);
}

.p8-hero__schematic dd {
  margin: 0;
  font-family: var(--ms-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ms-on-dark);
}

.p8-hero__rings {
  display: grid;
  place-items: center;
  padding-block: var(--ms-s4);
}

.p8-hero__ring {
  width: min(190px, 42vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  place-items: center;
  position: relative;
}

.p8-hero__ring::before,
.p8-hero__ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.p8-hero__ring::before { inset: 22%; }
.p8-hero__ring::after { inset: 44%; border-color: rgba(180, 86, 12, 0.5); }

.p8-hero__ring span {
  font-family: var(--ms-font-mono);
  font-size: var(--p8-fs-micro);
  letter-spacing: var(--ms-track-wide);
  color: var(--ms-on-dark-muted);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .p8-hero__grid { grid-template-columns: 1fr; gap: var(--ms-s6); }
  .p8-hero__copy { max-width: none; }
  .p8-hero__figure { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   8. DATA STRIP — trust facts as a ruled band, not proof cards
   ========================================================================== */

.p8-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: var(--ms-border);
  border-bottom: var(--ms-border);
}

.p8-band--dark .p8-strip {
  border-color: var(--ms-line-dark);
}

.p8-strip__item {
  padding: var(--ms-s5) var(--ms-s5) var(--ms-s5) 0;
  border-right: var(--ms-border);
  display: grid;
  gap: 6px;
  align-content: start;
}

.p8-strip__item:last-child { border-right: 0; }

.p8-band--dark .p8-strip__item { border-right-color: var(--ms-line-dark); }

.p8-strip__value {
  font-family: var(--ms-font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: var(--ms-track-tight);
  color: var(--ms-ink);
}

.p8-band--dark .p8-strip__value { color: #fff; }

.p8-strip__note {
  font-size: var(--p8-fs-sm);
  color: var(--ms-steel);
}

.p8-band--dark .p8-strip__note { color: var(--ms-on-dark-muted); }

@media (max-width: 700px) {
  .p8-strip__item {
    border-right: 0;
    border-bottom: var(--ms-border);
    padding-right: 0;
  }
  .p8-strip__item:last-child { border-bottom: 0; }
}

/* ==========================================================================
   9. FIND YOUR FILTER — a buyer tool, not a dashboard
   ========================================================================== */

.p8-find {
  background: var(--ms-surface);
  border: var(--ms-border);
  border-radius: var(--p8-r-panel);
  padding: clamp(22px, 3vw, 36px);
  display: grid;
  gap: var(--ms-s5);
  box-shadow: var(--p8-shadow-card);
}

.p8-find--on-dark {
  background: var(--ms-navy-800);
  border-color: var(--ms-line-dark);
  box-shadow: none;
}

.p8-find__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ms-s4);
  flex-wrap: wrap;
}

.p8-find__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ms-s3);
  align-items: end;
}

.p8-find__field { display: grid; gap: 6px; min-width: 0; }

.p8-find__input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--ms-line-strong);
  border-radius: var(--p8-r-control);
  background: var(--ms-surface);
  color: var(--ms-ink);
  font-family: var(--ms-font-mono);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  transition: border-color var(--p8-dur) var(--p8-ease),
              box-shadow var(--p8-dur) var(--p8-ease);
}

.p8-find__input::placeholder { color: var(--ms-steel-light); font-family: var(--ms-font-body); }

.p8-find__input:focus {
  outline: none;
  border-color: var(--ms-blue-600);
  box-shadow: 0 0 0 3px rgba(27, 111, 181, 0.14);
}

.p8-find--on-dark .p8-find__input {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--ms-line-dark);
  color: #fff;
}

.p8-find__foot {
  display: flex;
  align-items: center;
  gap: var(--ms-s4);
  flex-wrap: wrap;
  font-size: var(--p8-fs-sm);
  color: var(--ms-steel);
}

.p8-find--on-dark .p8-find__foot { color: var(--ms-on-dark-muted); }

.p8-find__sep {
  width: 1px;
  height: 14px;
  background: var(--ms-line-strong);
  flex: none;
}

.p8-find--on-dark .p8-find__sep { background: var(--ms-line-dark); }

@media (max-width: 620px) {
  .p8-find__form { grid-template-columns: 1fr; }
  .p8-find__form .p8-btn { width: 100%; }
}

/* ==========================================================================
   10. APPLICATION INDEX — numbered rows + asymmetric tiles, not 8 icon cards
   ========================================================================== */

.p8-apps {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 3.4vw, 52px);
  align-items: start;
}

/* Two major tiles carry the visual weight. */
.p8-apps__major {
  display: grid;
  gap: var(--ms-s4);
}

.p8-apps__tile {
  position: relative;
  display: block;
  border-radius: var(--p8-r-media);
  overflow: hidden;
  background: var(--ms-navy-800);
  text-decoration: none;
  color: #fff;
  min-height: 210px;
  border: var(--ms-border);
}

.p8-apps__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--p8-dur-slow) var(--p8-ease-out);
}

.p8-apps__tile:hover img { transform: scale(var(--p8-scale)); }

.p8-apps__tile-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  align-content: end;
  min-height: 210px;
  padding: clamp(18px, 2.4vw, 28px);
  background: linear-gradient(to top, rgba(4, 12, 22, 0.9) 12%, rgba(4, 12, 22, 0.15) 68%);
}

.p8-apps__tile-title {
  font-family: var(--ms-font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  line-height: 1.18;
  color: #fff;
  margin: 0;
}

.p8-apps__tile-scope {
  font-size: var(--p8-fs-sm);
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 46ch;
}

/* The supporting index: a ruled, numbered list. */
.p8-apps__index {
  border-top: var(--ms-border);
}

.p8-index-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--ms-s4);
  align-items: center;
  padding: 15px 0;
  border-bottom: var(--ms-border);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--p8-dur-fast) var(--p8-ease);
}

.p8-index-row:hover { background: var(--ms-surface-2); }

.p8-index-row__num {
  font-family: var(--ms-font-mono);
  font-size: var(--p8-fs-micro);
  font-variant-numeric: tabular-nums;
  color: var(--ms-steel-light);
  letter-spacing: 0.04em;
  padding-left: 10px;
  min-width: 30px;
}

.p8-index-row__body { display: grid; gap: 3px; min-width: 0; }

.p8-index-row__title {
  font-weight: 600;
  font-size: var(--p8-fs-sm);
  color: var(--ms-ink);
  line-height: 1.35;
}

.p8-index-row:hover .p8-index-row__title { color: var(--ms-blue-600); }

.p8-index-row__meta {
  font-size: var(--p8-fs-micro);
  color: var(--ms-steel);
  letter-spacing: 0.02em;
}

.p8-index-row__go {
  width: 16px;
  height: 16px;
  color: var(--ms-steel-light);
  margin-right: 10px;
  flex: none;
  transition: transform var(--p8-dur) var(--p8-ease), color var(--p8-dur) var(--p8-ease);
}

.p8-index-row:hover .p8-index-row__go {
  transform: translateX(3px);
  color: var(--ms-cta);
}

@media (max-width: 900px) {
  .p8-apps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   11. PRODUCT RECORD — image, part number, specs, actions
   ========================================================================== */

.p8-grid-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}

@media (max-width: 1180px) { .p8-grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .p8-grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .p8-grid-products { grid-template-columns: 1fr; } }

.p8-record {
  display: flex;
  flex-direction: column;
  background: var(--ms-surface);
  border: var(--ms-border);
  border-radius: var(--p8-r-card);
  overflow: hidden;
  transition: border-color var(--p8-dur) var(--p8-ease),
              box-shadow var(--p8-dur) var(--p8-ease),
              transform var(--p8-dur) var(--p8-ease);
}

.p8-record:hover {
  border-color: var(--ms-line-strong);
  box-shadow: var(--p8-shadow-lift);
  transform: translateY(var(--p8-lift-sm));
}

.p8-record__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--ms-surface-3);
  overflow: hidden;
  border-bottom: var(--ms-border);
}

.p8-record__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 10px;
  transition: transform var(--p8-dur-slow) var(--p8-ease-out);
}

.p8-record:hover .p8-record__media img { transform: scale(var(--p8-scale)); }

/* Honest missing-image state: a labelled technical placeholder, never a broken icon. */
.p8-record__media--empty {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg,
      var(--ms-surface-3) 0 8px,
      var(--ms-surface-2) 8px 16px);
}

.p8-record__media--empty span {
  font-family: var(--ms-font-mono);
  font-size: var(--p8-fs-micro);
  letter-spacing: var(--ms-track-wider);
  text-transform: uppercase;
  color: var(--ms-steel);
  background: var(--ms-surface);
  border: var(--ms-border);
  border-radius: var(--p8-r-control);
  padding: 5px 10px;
}

/* Flex rather than grid, specifically so the actions can be pinned to the card
   foot. Records in one row carry different numbers of specifications, and an
   action row that floats to a different height on every card reads as broken
   alignment in a catalogue — the one place alignment must be exact. */
.p8-record__body {
  display: flex;
  flex-direction: column;
  gap: var(--p8-s3, 12px);
  padding: 16px 16px 18px;
  flex: 1;
}

.p8-record__top { display: grid; gap: 5px; }

.p8-record__title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ms-ink-soft);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p8-record__specs {
  display: grid;
  gap: 0;
  border-top: var(--ms-border);
  margin-top: 2px;
}

.p8-record__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ms-s3);
  padding: 6px 0;
  border-bottom: var(--ms-border);
  font-size: var(--p8-fs-micro);
}

.p8-record__spec dt {
  color: var(--ms-steel);
  letter-spacing: var(--ms-track-wide);
  text-transform: uppercase;
  font-weight: 600;
}

.p8-record__spec dd {
  margin: 0;
  font-family: var(--ms-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ms-ink);
}

.p8-record__actions {
  display: flex;
  gap: var(--ms-s2);
  align-items: center;
  margin-top: auto;
  padding-top: var(--ms-s2);
}

/* Both actions share the row, but the labels must not wrap: "View Product" on
   two lines makes every card in the catalogue ragged. Tighter inline padding and
   nowrap keeps them on one line; the primary keeps slightly more room. */
.p8-record__actions .p8-btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 10px;
  white-space: nowrap;
}

.p8-record__actions .p8-btn:last-child { flex-grow: 1.15; }

/* ==========================================================================
   12. ARCHIVE TOOLBAR + PAGINATION
   ========================================================================== */

.p8-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-s4);
  flex-wrap: wrap;
  padding-block: var(--ms-s4);
  border-top: var(--ms-border);
  border-bottom: var(--ms-border);
}

.p8-toolbar__count {
  font-size: var(--p8-fs-sm);
  color: var(--ms-steel);
}

.p8-toolbar__count b {
  font-family: var(--ms-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ms-ink);
}

.p8-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: var(--ms-s6);
}

.p8-pagination a,
.p8-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 12px;
  border: var(--ms-border);
  border-radius: var(--p8-r-control);
  background: var(--ms-surface);
  color: var(--ms-ink-soft);
  font-size: var(--p8-fs-sm);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.p8-pagination a:hover { border-color: var(--ms-ink-soft); color: var(--ms-ink); }

.p8-pagination .is-current {
  background: var(--ms-navy-900);
  border-color: var(--ms-navy-900);
  color: #fff;
  font-weight: 600;
}

.p8-pagination .is-gap { border-color: transparent; background: transparent; }

/* ==========================================================================
   13. DATASHEET — product detail
   ========================================================================== */

.p8-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

@media (max-width: 940px) {
  .p8-sheet { grid-template-columns: 1fr; gap: var(--ms-s6); }
}

.p8-sheet__media {
  border: var(--ms-border);
  border-radius: var(--p8-r-media);
  background: var(--ms-surface);
  overflow: hidden;
  box-shadow: var(--p8-shadow-card);
}

.p8-sheet__media-inner {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 38px);
}

.p8-sheet__media-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p8-sheet__media-inner--empty {
  background:
    repeating-linear-gradient(45deg,
      var(--ms-surface-3) 0 10px,
      var(--ms-surface-2) 10px 20px);
}

.p8-sheet__specs {
  display: grid;
  gap: var(--ms-s5);
  align-content: start;
}

.p8-sheet__id { display: grid; gap: 8px; }

.p8-sheet__keyfacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  border: var(--ms-border);
  border-radius: var(--p8-r-card);
  overflow: hidden;
  background: var(--ms-surface-2);
}

.p8-sheet__keyfact {
  padding: 13px 15px;
  border-right: var(--ms-border);
  display: grid;
  gap: 4px;
}

.p8-sheet__keyfact:last-child { border-right: 0; }

.p8-sheet__keyfact dd {
  margin: 0;
  font-family: var(--ms-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ms-ink);
}

.p8-sheet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-s3);
}

/* ==========================================================================
   14. TECHNICAL TABLE / ROWS — rules, not boxes
   ========================================================================== */

.p8-table-wrap {
  overflow-x: auto;
  border: var(--ms-border);
  border-radius: var(--p8-r-card);
  background: var(--ms-surface);
  -webkit-overflow-scrolling: touch;
}

.p8-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--p8-fs-sm);
}

.p8-table caption {
  text-align: left;
  padding: 14px 16px;
  font-size: var(--p8-fs-label);
  font-weight: 600;
  letter-spacing: var(--ms-track-wider);
  text-transform: uppercase;
  color: var(--ms-steel);
  border-bottom: var(--ms-border);
}

.p8-table th,
.p8-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: var(--ms-border);
  vertical-align: top;
}

.p8-table thead th {
  background: var(--ms-surface-2);
  font-size: var(--p8-fs-label);
  font-weight: 600;
  letter-spacing: var(--ms-track-wide);
  text-transform: uppercase;
  color: var(--ms-steel);
  white-space: nowrap;
}

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

.p8-table td {
  font-variant-numeric: tabular-nums;
  color: var(--ms-ink-soft);
}

.p8-table td:first-child {
  color: var(--ms-ink);
  font-weight: 500;
}

.p8-table .p8-part { font-size: 0.875rem; }

.p8-table--dense th,
.p8-table--dense td { padding: 9px 14px; }

/* Ruled definition rows — the default for technical content. */
.p8-rows { border-top: var(--ms-border); }

.p8-row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--ms-s4);
  padding: 13px 0;
  border-bottom: var(--ms-border);
  align-items: baseline;
}

.p8-row__label {
  font-size: var(--p8-fs-label);
  font-weight: 600;
  letter-spacing: var(--ms-track-wide);
  text-transform: uppercase;
  color: var(--ms-steel);
}

.p8-row__value {
  font-size: var(--p8-fs-sm);
  color: var(--ms-ink);
  font-variant-numeric: tabular-nums;
}

.p8-row__value--mono { font-family: var(--ms-font-mono); }

@media (max-width: 620px) {
  .p8-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   15. FACTORY MOSAIC — asymmetric, numbered, 0/1/3/6/9 capable
   ========================================================================== */

.p8-mosaic {
  display: grid;
  gap: clamp(10px, 1.2vw, 16px);
  grid-template-columns: repeat(12, 1fr);
}

.p8-mosaic__item {
  position: relative;
  margin: 0;
  border-radius: var(--p8-r-media);
  overflow: hidden;
  background: var(--ms-surface-3);
  border: var(--ms-border);
}

.p8-mosaic__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--p8-dur-slow) var(--p8-ease-out);
}

.p8-mosaic__item:hover img { transform: scale(var(--p8-scale)); }

.p8-mosaic__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 16px 12px;
  background: linear-gradient(to top, rgba(4, 12, 22, 0.86), rgba(4, 12, 22, 0));
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #fff;
}

.p8-mosaic__num {
  font-family: var(--ms-font-mono);
  font-size: var(--p8-fs-micro);
  letter-spacing: 0.06em;
  color: var(--ms-blue-400);
  flex: none;
}

.p8-mosaic__text { font-size: var(--p8-fs-micro); letter-spacing: 0.02em; }

/* Layouts by picture count — each count gets a deliberate composition. */
.p8-mosaic--1 .p8-mosaic__item { grid-column: span 12; aspect-ratio: 21 / 9; }

.p8-mosaic--2 .p8-mosaic__item { grid-column: span 6; aspect-ratio: 4 / 3; }

.p8-mosaic--3 .p8-mosaic__item:nth-child(1) { grid-column: span 8; aspect-ratio: 3 / 2; }
.p8-mosaic--3 .p8-mosaic__item:nth-child(2),
.p8-mosaic--3 .p8-mosaic__item:nth-child(3) { grid-column: span 4; aspect-ratio: 4 / 3; }

.p8-mosaic--6 .p8-mosaic__item:nth-child(1) { grid-column: span 8; aspect-ratio: 16 / 9; }
.p8-mosaic--6 .p8-mosaic__item:nth-child(2) { grid-column: span 4; aspect-ratio: 3 / 4; }
.p8-mosaic--6 .p8-mosaic__item:nth-child(n+3) { grid-column: span 4; aspect-ratio: 4 / 3; }

.p8-mosaic--9 .p8-mosaic__item:nth-child(1) { grid-column: span 6; aspect-ratio: 16 / 10; }
.p8-mosaic--9 .p8-mosaic__item:nth-child(2) { grid-column: span 3; aspect-ratio: 3 / 4; }
.p8-mosaic--9 .p8-mosaic__item:nth-child(3) { grid-column: span 3; aspect-ratio: 3 / 4; }
.p8-mosaic--9 .p8-mosaic__item:nth-child(n+4) { grid-column: span 4; aspect-ratio: 4 / 3; }

@media (max-width: 860px) {
  .p8-mosaic--3 .p8-mosaic__item,
  .p8-mosaic--6 .p8-mosaic__item,
  .p8-mosaic--9 .p8-mosaic__item { grid-column: span 12; aspect-ratio: 3 / 2; }
  .p8-mosaic--2 .p8-mosaic__item { grid-column: span 12; aspect-ratio: 3 / 2; }
}

/* Empty gallery: say so, and offer the action that fixes it. */
.p8-mosaic--empty {
  display: grid;
  gap: var(--ms-s4);
  grid-template-columns: 1fr;
  border: 1px dashed var(--ms-line-strong);
  border-radius: var(--p8-r-media);
  padding: clamp(22px, 3vw, 40px);
  background: var(--ms-surface-2);
  text-align: left;
}

/* ==========================================================================
   16. EDITORIAL SPLIT — image + evidence
   ========================================================================== */

.p8-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
}

.p8-split--media-right .p8-split__media { order: 2; }
.p8-split--wide-text { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }

@media (max-width: 900px) {
  .p8-split,
  .p8-split--wide-text { grid-template-columns: 1fr; gap: var(--ms-s6); }
  .p8-split--media-right .p8-split__media { order: 0; }
}

.p8-split__media {
  border-radius: var(--p8-r-media);
  overflow: hidden;
  border: var(--ms-border);
  background: var(--ms-surface-3);
  aspect-ratio: 4 / 3;
}

.p8-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.p8-split__media--empty {
  display: grid;
  place-items: center;
  padding: var(--ms-s6);
  aspect-ratio: auto;
  min-height: 240px;
  background:
    repeating-linear-gradient(45deg,
      var(--ms-surface-3) 0 10px,
      var(--ms-surface-2) 10px 20px);
}

.p8-split__copy { display: grid; gap: var(--ms-s5); align-content: center; }

/* ==========================================================================
   17. BLOG
   ========================================================================== */

.p8-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: center;
  border-bottom: var(--ms-border);
  padding-bottom: clamp(24px, 3vw, 44px);
  margin-bottom: clamp(24px, 3vw, 40px);
}

@media (max-width: 860px) { .p8-feature { grid-template-columns: 1fr; } }

.p8-feature__media {
  border-radius: var(--p8-r-media);
  overflow: hidden;
  border: var(--ms-border);
  aspect-ratio: 16 / 10;
  background: var(--ms-surface-3);
}

.p8-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.p8-article-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--ms-s5);
  padding: var(--ms-s5) 0;
  border-bottom: var(--ms-border);
  align-items: start;
}

.p8-article-row:last-child { border-bottom: 0; }

.p8-article-row__media {
  border-radius: var(--p8-r-card);
  overflow: hidden;
  border: var(--ms-border);
  aspect-ratio: 4 / 3;
  background: var(--ms-surface-3);
}

.p8-article-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.p8-article-row__body { display: grid; gap: 7px; }

.p8-article-row__title {
  font-family: var(--ms-font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: var(--ms-track-tight);
  margin: 0;
}

.p8-article-row__title a { color: var(--ms-ink); text-decoration: none; }

.p8-article-row__title a:hover { color: var(--ms-blue-600); }

.p8-article-row__meta {
  font-size: var(--p8-fs-micro);
  color: var(--ms-steel);
  letter-spacing: var(--ms-track-wide);
  text-transform: uppercase;
}

@media (max-width: 560px) {
  .p8-article-row { grid-template-columns: 1fr; }
  .p8-article-row__media { aspect-ratio: 16 / 9; }
}

/* ---- Article body: reading-first --------------------------------------- */

.p8-prose {
  max-width: 74ch;
  color: var(--ms-ink-soft);
  font-size: 1.0625rem;
  line-height: 1.68;
}

.p8-prose > * + * { margin-top: var(--ms-s5); }

.p8-prose h2 {
  font-family: var(--ms-font-display);
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
  font-weight: 700;
  letter-spacing: var(--ms-track-tight);
  color: var(--ms-ink);
  margin-top: var(--ms-s8);
  padding-top: var(--ms-s5);
  border-top: var(--ms-border);
}

.p8-prose h3 {
  font-family: var(--ms-font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--ms-ink);
  margin-top: var(--ms-s6);
}

.p8-prose ul,
.p8-prose ol { padding-left: 1.25rem; }

.p8-prose li + li { margin-top: 6px; }

.p8-prose blockquote {
  margin: var(--ms-s6) 0;
  padding: 4px 0 4px var(--ms-s5);
  border-left: 3px solid var(--ms-cta);
  color: var(--ms-ink);
  font-size: 1.0625rem;
}

.p8-prose figure { margin: var(--ms-s6) 0; }

.p8-prose figcaption {
  margin-top: 8px;
  font-size: var(--p8-fs-sm);
  color: var(--ms-steel);
}

.p8-prose table { width: 100%; border-collapse: collapse; font-size: var(--p8-fs-sm); }

.p8-prose th,
.p8-prose td {
  padding: 10px 12px;
  border-bottom: var(--ms-border);
  text-align: left;
}

.p8-prose th {
  background: var(--ms-surface-2);
  font-size: var(--p8-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ms-track-wide);
  color: var(--ms-steel);
}

/* ==========================================================================
   18. CONTACT / RFQ
   ========================================================================== */

.p8-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.p8-channel {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(18px, 2.2vw, 26px);
  border: var(--ms-border);
  border-radius: var(--p8-r-panel);
  background: var(--ms-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--p8-dur) var(--p8-ease),
              box-shadow var(--p8-dur) var(--p8-ease),
              transform var(--p8-dur) var(--p8-ease);
}

.p8-channel:hover {
  border-color: var(--ms-line-strong);
  box-shadow: var(--p8-shadow-lift);
  transform: translateY(var(--p8-lift-sm));
}

.p8-channel__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--p8-r-control);
  background: var(--ms-cta-soft);
  color: var(--ms-cta-ink);
  margin-bottom: 2px;
}

.p8-channel__icon svg { width: 19px; height: 19px; }

.p8-channel__value {
  font-family: var(--ms-font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ms-ink);
  word-break: break-word;
}

/* ---- Form --------------------------------------------------------------- */

.p8-form { display: grid; gap: var(--ms-s5); }

.p8-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ms-s4);
}

@media (max-width: 620px) { .p8-form__grid { grid-template-columns: 1fr; } }

.p8-field { display: grid; gap: 6px; min-width: 0; }

.p8-field--full { grid-column: 1 / -1; }

.p8-field__label {
  font-size: var(--p8-fs-label);
  font-weight: 600;
  letter-spacing: var(--ms-track-wide);
  text-transform: uppercase;
  color: var(--ms-steel);
}

.p8-field__req { color: var(--ms-cta); }

.p8-input,
.p8-select,
.p8-textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--ms-line-strong);
  border-radius: var(--p8-r-control);
  background: var(--ms-surface);
  color: var(--ms-ink);
  font-family: var(--ms-font-body);
  font-size: var(--p8-fs-sm);
  transition: border-color var(--p8-dur) var(--p8-ease),
              box-shadow var(--p8-dur) var(--p8-ease);
}

.p8-textarea { min-height: 118px; resize: vertical; line-height: 1.55; }

.p8-input:focus,
.p8-select:focus,
.p8-textarea:focus {
  outline: none;
  border-color: var(--ms-blue-600);
  box-shadow: 0 0 0 3px rgba(27, 111, 181, 0.14);
}

.p8-field__help { font-size: var(--p8-fs-micro); color: var(--ms-steel); }

/* ==========================================================================
   19. STATE BLOCKS — empty, no-result, missing-image
   ========================================================================== */

.p8-state {
  display: grid;
  gap: var(--ms-s3);
  justify-items: center;
  text-align: center;
  padding: clamp(30px, 5vw, 56px) var(--ms-s5);
  border: 1px dashed var(--ms-line-strong);
  border-radius: var(--p8-r-panel);
  background: var(--ms-surface-2);
}

.p8-state__title {
  font-family: var(--ms-font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  color: var(--ms-ink);
  margin: 0;
}

.p8-state p { margin: 0; max-width: 52ch; color: var(--ms-ink-soft); font-size: var(--p8-fs-sm); }

.p8-note {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-left: 3px solid var(--ms-blue-600);
  background: var(--ms-blue-050);
  border-radius: 0 var(--p8-r-control) var(--p8-r-control) 0;
  font-size: var(--p8-fs-sm);
  color: var(--ms-ink-soft);
}

/* ==========================================================================
   20. FOOTER
   ========================================================================== */

.p8-footer {
  background: var(--ms-navy-900);
  color: var(--ms-on-dark);
  padding-block: clamp(40px, 5vw, 68px) var(--ms-s6);
}

.p8-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding-bottom: var(--ms-s7);
  border-bottom: var(--ms-border-dark);
}

@media (max-width: 900px) {
  .p8-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .p8-footer__grid { grid-template-columns: 1fr; gap: var(--ms-s6); }
}

.p8-footer__brand { display: grid; gap: var(--ms-s4); align-content: start; }

.p8-footer__about {
  font-size: var(--p8-fs-sm);
  color: var(--ms-on-dark-muted);
  margin: 0;
  max-width: 42ch;
  line-height: 1.6;
}

.p8-footer__col { display: grid; gap: var(--ms-s3); align-content: start; }

.p8-footer__heading {
  font-size: var(--p8-fs-label);
  font-weight: 600;
  letter-spacing: var(--ms-track-wider);
  text-transform: uppercase;
  color: var(--ms-on-dark-muted);
}

.p8-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.p8-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-size: var(--p8-fs-sm);
  color: var(--ms-on-dark-soft);
  text-decoration: none;
}

.p8-footer__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.p8-footer__contact {
  display: grid;
  gap: 10px;
  font-size: var(--p8-fs-sm);
}

.p8-footer__contact dt {
  font-size: var(--p8-fs-micro);
  letter-spacing: var(--ms-track-wide);
  text-transform: uppercase;
  color: var(--ms-on-dark-muted);
}

.p8-footer__contact dd { margin: 0; color: var(--ms-on-dark-soft); }

.p8-footer__contact a { color: var(--ms-on-dark-soft); text-decoration: none; }

.p8-footer__contact a:hover { color: #fff; }

.p8-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-s4);
  flex-wrap: wrap;
  padding-top: var(--ms-s5);
  font-size: var(--p8-fs-micro);
  color: var(--ms-on-dark-muted);
}

.p8-footer__legal nav { display: flex; gap: var(--ms-s4); flex-wrap: wrap; }

.p8-footer__legal a { color: var(--ms-on-dark-muted); text-decoration: none; }

.p8-footer__legal a:hover { color: #fff; }

/* ==========================================================================
   21. FLOATING WHATSAPP — must never overlap content or the drawer
   ========================================================================== */

.p8-fab {
  position: fixed;
  right: clamp(14px, 2.4vw, 26px);
  bottom: clamp(14px, 2.4vw, 26px);
  z-index: var(--ms-z-fab);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--p8-r-pill);
  background: var(--ms-success);
  color: #fff;
  font-size: var(--p8-fs-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(11, 27, 43, 0.26);
  transition: background-color var(--p8-dur) var(--p8-ease),
              transform var(--p8-dur) var(--p8-ease);
}

.p8-fab:hover { background: #17603b; color: #fff; transform: translateY(-2px); }

.p8-fab svg { width: 19px; height: 19px; flex: none; }

.p8-fab__text { display: inline; }

@media (max-width: 520px) {
  .p8-fab__text { display: none; }
  .p8-fab { width: 52px; height: 52px; padding: 0; justify-content: center; }
}

/* Keep the FAB clear of the open drawer. */
.p8-drawer[data-open="true"] ~ .p8-fab,
body:has(.p8-drawer[data-open="true"]) .p8-fab { opacity: 0; pointer-events: none; }

/* ==========================================================================
   22. MOTION — one system. Off by default in source order, enabled by JS.
   ========================================================================== */

/* Elements start hidden only when JS is present to reveal them, so content is
   never invisible without JavaScript (mandate §27: content works without JS). */
.p8-js .p8-reveal {
  opacity: 0;
  transform: translateY(18px);
}

.p8-js .p8-reveal--left {
  transform: translateX(-20px);
}

.p8-js .p8-reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--p8-dur-entrance) var(--p8-ease-out),
    transform var(--p8-dur-entrance) var(--p8-ease-out);
  transition-delay: var(--p8-delay, 0ms);
}

/* Stagger is applied by the script; 180ms steps (mandate §27). */
.p8-js .p8-stagger > * {
  opacity: 0;
  transform: translateY(16px);
}

.p8-js .p8-stagger.is-in > * {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--p8-dur-reveal) var(--p8-ease-out),
    transform var(--p8-dur-reveal) var(--p8-ease-out);
}

@keyframes p8-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes p8-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Reduced motion: no transforms, no entrance, no smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  .p8 *,
  .p8 *::before,
  .p8 *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .p8-js .p8-reveal,
  .p8-js .p8-reveal--left,
  .p8-js .p8-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .p8-record:hover { transform: none; }
  .p8-record:hover .p8-record__media img { transform: none; }
}

/* ==========================================================================
   23. RESPONSIVE ART DIRECTION (mandate §28)
   Tablet is composed deliberately — not compressed desktop, not large mobile.
   ========================================================================== */

@media (max-width: 1024px) {
  .p8-band { padding-block: clamp(46px, 6vw, 76px); }

  .p8-head { margin-bottom: var(--ms-s6); }
}

@media (max-width: 768px) {
  .p8-display { letter-spacing: -0.018em; }

  .p8-hero__grid { padding-block: clamp(36px, 8vw, 56px); }

  /* Mobile enquiry actions precede long secondary information (mandate §20):
     the sheet places its action block before the specification rows. */
  .p8-sheet--actions-first .p8-sheet__specs { display: flex; flex-direction: column; }
  .p8-sheet--actions-first .p8-sheet__id { order: 1; }
  .p8-sheet--actions-first .p8-sheet__keyfacts { order: 2; }
  .p8-sheet--actions-first .p8-sheet__actions { order: 3; }
}

@media (max-width: 520px) {
  :root { --p8-gutter: 16px; }

  .p8-btn { width: 100%; }
  .p8-hero__actions .p8-btn { width: 100%; }
  .p8-record__actions { flex-direction: column; }
  .p8-record__actions .p8-btn { width: 100%; }
}

/* Landscape phones: keep the hero from eating the viewport. */
@media (max-height: 460px) and (orientation: landscape) {
  .p8-hero__grid { padding-block: 28px; }
  .p8-hero__figure,
  .p8-hero__fallback { max-height: 60vh; }
}

/* --------------------------------------------------------------------------
   Touch targets (mandate §26: >=44px).

   The desktop sizes above are correct for a mouse, where a 28px filter tag or a
   32px text link is perfectly usable. On a touch-sized viewport the same control
   is a miss. Rather than inflate every control for every device, the minimum is
   raised only where the pointer is likely to be a finger.

   Inline links inside a sentence are not in this list: they are exempt under
   WCAG 2.5.5, and padding them out would break the line rhythm of the prose.
   Every control listed here is a standalone target.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .p8-tag,
  .p8-arrow-link,
  .p8-btn--sm,
  .p8-pagination a,
  .p8-pagination span,
  .p8-footer__list a,
  .p8-footer__legal a,
  .p8-footer__contact a,
  .p8-find__foot a,
  .p8-drawer__list a,
  .p8-crumbs a {
    min-height: 44px;
  }

  .p8-tag {
    padding: 10px 15px;
    align-items: center;
    font-size: var(--p8-fs-sm);
  }

  .p8-arrow-link { padding-block: 6px; }

  .p8-pagination a,
  .p8-pagination span { min-width: 44px; }

  .p8-footer__legal { padding-top: var(--ms-s6); }
  .p8-footer__legal a { display: inline-flex; align-items: center; }

  /* `min-height` has no effect on a non-replaced inline box, so each of these
     needs an explicit display before the minimum can apply. */
  .p8-footer__contact a {
    display: inline-flex;
    align-items: center;
  }

  .p8-find__foot a {
    display: inline-flex;
    align-items: center;
  }

  /* An article title is a standalone target, not a link inside a sentence, so it
     gets the full 44px. inline-block rather than inline-flex: the title wraps. */
  .p8-article-row__title a,
  .p8-mosaic__item a {
    display: inline-block;
    min-height: 44px;
    padding-block: 3px;
  }
}

/* Breadcrumb: inline-flex so the 44px minimum above applies without the trail
   collapsing into itself. */
.p8-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  font-size: var(--p8-fs-sm);
  color: var(--ms-steel);
}

.p8-crumbs a {
  display: inline-flex;
  align-items: center;
  color: var(--ms-steel);
  text-decoration: none;
}

.p8-crumbs a:hover { color: var(--ms-blue-600); text-decoration: underline; }

.p8-crumbs [aria-hidden] { color: var(--ms-steel-light); }

.p8-crumbs [aria-current] { color: var(--ms-ink); }

/* ==========================================================================
   24. UTILITIES — deliberately few
   ========================================================================== */

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

.p8-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--ms-z-skip);
  padding: 12px 18px;
  background: var(--ms-cta);
  color: #fff;
  border-radius: 0 0 var(--p8-r-control) 0;
  text-decoration: none;
  font-weight: 600;
}

.p8-skip:focus { left: 0; }

.p8-mt-0 { margin-top: 0; }
.p8-mt-4 { margin-top: var(--ms-s5); }
.p8-mt-6 { margin-top: var(--ms-s6); }
.p8-mt-8 { margin-top: var(--ms-s8); }
.p8-center { text-align: center; }
.p8-center .p8-lede,
.p8-center .p8-body { margin-inline: auto; }

.p8-stack-5 { display: grid; gap: var(--ms-s5); }
.p8-stack-6 { display: grid; gap: var(--ms-s6); }
.p8-stack-7 { display: grid; gap: var(--ms-s7); }

/* ==========================================================================
   CONTRAST AND SMALL-MOBILE CORRECTIONS

   Measured, not guessed. The audit found three WCAG AA failures and a 320px overflow:

     1. `--ms-steel-light` (#93a5b4) on white — 2.54:1, needs 4.5:1. The finder's result count.
     2. `.p8-small` inside a dark band kept `--ms-steel` and rendered on navy — the footer
        disclaimer, 70 instances across the run.
     3. `--ms-cta` (#b4560c) as an accent label on navy — 3.61:1, needs 4.5:1 for small text.
     4. `.p8-small` reached 362px inside a 320px viewport — 37 instances.

   Fixes 1 and 2 use existing tokens. Fix 3 adds one additive on-dark tint of MAISUI's own copper,
   in the same family as the four copper variants already in `tokens.css`; no new brand colour is
   introduced and no reference palette is involved.
   ========================================================================== */

:root {
  /* The accent as it must read on the navy surface: the same hue, lifted for a dark ground. */
  --p8-cta-on-dark: #e79a52;
}

/* 1. Muted body text needs the mid steel, not the light one, on a white surface. */
.p8-small {
  color: var(--ms-steel);
}

/* 2. Small text inside a dark band follows the dark-surface text tokens. */
.p8-band--dark .p8-small,
.p8-footer .p8-small {
  color: var(--ms-on-dark-muted);
}

/* 3. The accent label on a dark ground uses the lifted tint. */
.p8-band--dark .p8-label--accent {
  color: var(--p8-cta-on-dark);
}

/* 4. Small mobile: let long words and monospace strings wrap instead of pushing the page wide. */
@media (max-width: 389px) {
  .p8-small,
  .p8-label,
  .p8-row__value,
  .p8-note,
  .p8-stateword {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }

  .p8-wrap {
    max-width: 100%;
  }
}

/*
 * 5. The finder result-count tag.
 *
 * A bare `<span>` inside `.p8-tag` inherited `--ms-steel-light` (#93a5b4) and rendered on white at
 * 2.54:1 — a real AA failure, measured. The mid steel reaches 5.9:1 on the same ground. This is the
 * same latent value that failed in the P7.2 audit; it keeps returning because it is a legitimate
 * token for large display numerals and an illegitimate one for small text.
 */
.p8-tag span,
.p8-tag {
  color: var(--ms-steel);
}

/* 6. Accent labels on the two dark surfaces that are not `.p8-band--dark`. */
.p8-hero .p8-label--accent,
.p8-footer .p8-label--accent,
.p8-mosaic .p8-label--accent {
  color: var(--p8-cta-on-dark);
}

/* The term count inside a filter tag: mid steel, 5.9:1 on the white surface. */
.p8-tag__count {
  color: var(--ms-steel);
}

/* ==========================================================================
   THE SHARED ENQUIRY FORM INSIDE THE P8 SCOPE

   `template-parts/partials/rfq-form.php` is one form used by every enquiry point on the site, and it
   is written in the P7.2 vocabulary — `ms-form`, `ms-input`, `ms-field`, `ms-btn`. Those classes live
   in `layout.css` and `components.css`, which P8 routes do not load.

   The consequence was not cosmetic. The submit control had no background of its own, so its white
   label sat on the browser's default light grey at **1.15:1** — an unreadable primary action on the
   homepage, which is the conversion path. The form's inputs and labels were unstyled for the same
   reason.

   Restyling the shared form's class names here, scoped to `.p8`, keeps one form for the whole site
   and gives it the P8 treatment on P8 routes, without touching the partial or the backend contract:
   every field name, ID, nonce and handler is unchanged.
   ========================================================================== */

.p8 .ms-form {
  display: grid;
  gap: var(--p8-s5);
  margin: 0;
}

.p8 .ms-field {
  display: grid;
  gap: 6px;
  margin: 0;
}

.p8 .ms-field__label {
  font-family: var(--ms-font-mono);
  font-size: var(--p8-fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ms-ink-soft);
}

.p8 .ms-field__required { color: var(--ms-cta-ink); }

.p8 .ms-input,
.p8 .ms-form textarea,
.p8 .ms-form select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--ms-line-strong);
  border-radius: var(--p8-r-control);
  background: var(--ms-surface);
  color: var(--ms-ink);
  font-family: var(--ms-font-body);
  font-size: var(--p8-fs-base);
  line-height: 1.4;
}

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

.p8 .ms-input:focus,
.p8 .ms-form textarea:focus,
.p8 .ms-form select:focus {
  outline: 2px solid var(--ms-cta);
  outline-offset: 1px;
  border-color: var(--ms-cta);
}

.p8 .ms-field.has-error .ms-input,
.p8 .ms-field.has-error textarea { border-color: #b3261e; }

.p8 .ms-field__error {
  margin: 0;
  font-size: var(--p8-fs-sm);
  color: #b3261e;
}

/* The submit control: MAISUI orange, white label, 5.4:1, and the 44px floor. */
.p8 .ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--p8-r-control);
  background: var(--ms-cta);
  color: #fff;
  font-family: var(--ms-font-body);
  font-size: var(--p8-fs-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.p8 .ms-btn:hover { background: var(--ms-cta-hover); color: #fff; }
.p8 .ms-btn__label { color: inherit; }
.p8 .ms-btn[disabled], .p8 .ms-btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* The honeypot must stay unreachable without being display:none (bots skip those). */
.p8 .ms-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
 * The shared form on a dark band.
 *
 * The homepage's closing enquiry sheet sits on navy, and the form's labels inherited `--ms-ink-soft`
 * — a dark blue-grey meant for light surfaces. Measured 2.19:1. On the dark ground the labels take
 * the dark-surface text tokens, and the fields keep a light surface so the typed value stays legible.
 */
.p8-band--dark .ms-field__label { color: var(--ms-on-dark-muted); }
.p8-band--dark .ms-field__required { color: var(--p8-cta-on-dark); }
.p8-band--dark .ms-field__error { color: #ffb4ae; }
.p8-band--dark .ms-btn { box-shadow: none; }

/* A technical table may be wider than a 320px phone; the wrapper scrolls it rather than the page. */
.p8-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Product gallery thumbs beneath the datasheet's main photograph. */
.p8-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p8-s2);
  list-style: none;
  margin: var(--p8-s2) 0 0;
  padding: 0;
}

.p8-thumb {
  width: 72px;
  height: 72px;
  border: 1px solid var(--ms-line);
  border-radius: var(--p8-r-control);
  overflow: hidden;
  background: var(--ms-surface);
}

.p8-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 389px) {
  .p8-thumb { width: 60px; height: 60px; }
}

/* The pricing statement, beside the enquiry sheet where the question is actually asked. */
.p8-pricing {
  max-width: 62ch;
  margin: var(--p8-s5) auto 0;
  font-size: var(--p8-fs-sm);
  line-height: 1.6;
  color: var(--ms-on-dark-muted);
}