@charset "utf-8";
/* ==========================================================================
   BECT Ltd - shared core stylesheet.

   THIS FILE IS THE DESIGN SYSTEM OF RECORD.

   LOAD ORDER - every page, without exception:
       1. style/bect-redesign-core.css          (this file)
       2. style/bect-redesign-<template>.css    (page-specific additions)

   A page-specific stylesheet may ADD components. It must not override a
   token, type step, spacing step, button, card, header, navigation, band or
   footer value defined here. Changing anything in this file changes every
   page on the site.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  --c-navy:        #1E3050;   /* 12.29:1 on --c-page · 13.18:1 on white */
  --c-navy-light:  #2F4A73;   /* white on this: 8.94:1 */
  --c-navy-deep:   #152340;   /* white on this: 15.60:1 */
  --c-accent:      #C0392B;   /* white on this: 5.44:1 · on white: 5.44:1 */
  --c-accent-dark: #A32E22;
  --c-ink:         #14181F;   /* 16.60:1 on --c-page */
  --c-body:        #39414D;   /*  9.62:1 on --c-page · 10.31:1 on white */
  --c-muted:       #6B7280;   /*  4.83:1 on white ·  4.51:1 on --c-page */
  --c-border-fn:   #767E8B;   /*  4.10:1 on white — FUNCTIONAL borders only */
  --c-border:      #D1D5DB;   /*  decorative borders only (1.47:1) */
  --c-panel:       #E9ECEF;
  --c-page:        #F6F7F9;
  --c-surface:     #FFFFFF;
  /* Caption text on a navy-deep field. Solid, not an alpha value, so the
     rendered contrast cannot vary with whatever sits behind it.
     Verified 8.52:1 on --c-navy-deep. */
  --c-caption-on-dark: #B9C0CC;

  /* Typography. No web font is fetched */
  --font-sans: 'Inter', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fs-h1: 2.75rem;   /* 44px */
  --fs-h2: 2rem;      /* 32px */
  --fs-h3: 1.5rem;    /* 24px */
  --fs-h4: 1.1875rem; /* 19px */
  --fs-lead: 1.25rem; /* 20px */
  --fs-body: 1.0625rem;/*17px */
  --fs-small: 0.875rem;/*14px */
  --fs-caption: 0.9375rem;/*15px — image captions only */
  --fs-eyebrow: 0.8125rem;/*13px */

  /* Spacing — 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Layout */
  --w-max: 1140px;      /* inside X5's 1162px Desktop breakpoint */
  --w-narrow: 760px;
  --measure: 70ch;
  --gutter: var(--s-5);
  --radius: 4px;
  --header-h: 76px;

  --t-fast: 140ms ease;
}

/* ---------- 2. RESET (minimal, self-contained) --------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-body);
  background: var(--c-page);          /* flat field, no photographic background */
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { max-width: 100%; height: auto; display: block; }

/* Image-copying deterrent, images only. Added 26 July 2026.
   Pairs with scripts/bect-image-protection.js. It discourages the casual
   drag-to-desktop and long-press-to-save gestures; it is NOT protection and
   must never be described as such.
   SCOPED TO <img> DELIBERATELY. It is not applied to <body>, <figure> or
   <figcaption>: captions are text a visitor may legitimately want to select and
   copy, and a page-wide user-select:none was one of the baseline site's
   accessibility failures. Text selection elsewhere is completely unaffected. */
img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;   /* suppresses the iOS long-press save sheet */
  -webkit-user-select: none;
  user-select: none;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--c-navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
button { font: inherit; color: inherit; }

/* ---------- 3. ACCESSIBILITY PRIMITIVES --------------------------------- */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.on-dark :where(a, button):focus-visible { outline-color: #FFFFFF; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--c-navy); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--radius) var(--radius); font-weight: 600;
  text-decoration: none; transition: top var(--t-fast);
}
.skip-link:focus { top: 0; }

/* Anchor offset.
   .site-header is position:sticky, so a fragment target scrolled to y=0 lands
   UNDERNEATH it. Measured before the fix: #about, #services and #projects put
   their eyebrow 12-13px behind the header at 480px and 375px.

   ONE rule covers every breakpoint, because --header-h is already redefined at
   720px (64px) and 480px (60px). The +1px is .site-header's own border-bottom,
   which is part of its rendered height (76+1=77 measured at desktop).
   No JavaScript, no spacer element, no per-section offset: the header is the
   only thing being cleared, and it has exactly one height at any given width. */
main[id],
section[id] { scroll-margin-top: calc(var(--header-h) + 1px); }

/* Skip-link destination.
   <main id="main"> now carries tabindex="-1" so activating the skip link moves
   REAL focus, rather than relying on the browser's sequential-focus starting
   point. The indicator is inset (negative offset) because main spans the full
   width: an outset ring would be drawn hard against the viewport edges.
   outline:none is never used here, per the design system. */
main[tabindex="-1"]:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: -3px;
}

/* ---------- 4. LAYOUT PRIMITIVES ---------------------------------------- */
.container { width: 100%; max-width: var(--w-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-8); }
/* Alternating white band, so adjacent sections separate without extra rules */
.section--surface {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.section__head { max-width: var(--w-narrow); margin-bottom: var(--s-7); }
.section__intro { font-size: var(--fs-lead); color: var(--c-body); max-width: var(--measure); margin-top: var(--s-4); }
/* Second and subsequent intro paragraphs inside one section head */
.section__head .section__intro + .section__intro { margin-top: var(--s-4); }
/* H3s sitting directly in a section, rather than inside a card, need their own rhythm */
.section > .container > h3 { margin-bottom: var(--s-4); }

.eyebrow {
  display: block; font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent);
  margin-bottom: var(--s-3);
}
.eyebrow--muted { color: var(--c-muted); }
/* Lightened accent for dark fields. Verified: 9.07:1 on --c-navy-deep,
   7.66:1 on --c-navy. Both pass AA for normal text. */
.eyebrow--on-dark { color: #F3B7B0; }

/* ---------- 5. TYPOGRAPHY ----------------------------------------------- */

/* Long-word wrapping. THE ROOT-CAUSE FIX.
   Every grid on the site sizes its tracks with `1fr`, which is
   minmax(auto, 1fr); the `auto` floor resolves to the item's MIN-CONTENT
   width. At 200% text a single long word — "Fabrication", "infrastructure",
   "precamber" — became wider than its track, pushed the track out, and pushed
   the whole grid past its container. That is what produced 274px of overflow
   on the homepage, 231px on Contact and 44px on Fabrication.

   overflow-wrap: break-word collapses the min-content contribution of these
   elements, so a track can always shrink and the grid can never exceed its
   container. It is a LAST-RESORT break: it engages only when a word would
   otherwise overflow its line box, so at normal text size nothing about the
   approved layout changes. Verified: identical rendering at 100%.

   Deliberately NOT `word-break: break-all`, which breaks every word at an
   arbitrary point regardless of need. */
h1, h2, h3, h4, p, li, dt, dd, figcaption, caption, .eyebrow { overflow-wrap: break-word; }

h1, h2, h3, h4 { color: var(--c-navy); font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.2;  letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); line-height: 1.3;  font-weight: 600; }
h4 { font-size: var(--fs-h4); line-height: 1.4;  font-weight: 600; }
p  { max-width: var(--measure); }
p + p { margin-top: var(--s-4); }
.lead { font-size: var(--fs-lead); line-height: 1.55; }
.small { font-size: var(--fs-small); }
.muted { color: var(--c-muted); }
.metric { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--c-navy); }

/* ---------- 6. BUTTONS AND LINKS ---------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 14px 28px;          /* >=44x44 touch target */
  font-size: var(--fs-body); font-weight: 600; line-height: 1;
  border: 1.5px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn--primary { background: var(--c-accent); color: #fff; }
.btn--primary:hover { background: var(--c-accent-dark); }
.btn--secondary { background: transparent; color: var(--c-navy); border-color: var(--c-navy); }
.btn--secondary:hover { background: var(--c-navy); color: #fff; }
.on-dark .btn--secondary { color: #fff; border-color: rgba(255,255,255,.7); }
.on-dark .btn--secondary:hover { background: #fff; color: var(--c-navy); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }

/* Tertiary tier — in-flow link with a directional affordance */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; color: var(--c-navy); text-decoration: none;
  min-height: 44px;
}
.link-arrow::after { content: '\2192'; transition: transform var(--t-fast); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- 7. HEADER + NAVIGATION (D11: seven items) ------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 170px; height: 46px; object-fit: contain; }

.nav-toggle { display: none; }

.nav__list { display: flex; align-items: center; gap: var(--s-2); }
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--s-3);
  font-size: 1rem; font-weight: 500; color: var(--c-navy);
  text-decoration: none; border-bottom: 3px solid transparent;
}
.nav__link:hover { color: var(--c-accent-dark); border-bottom-color: var(--c-border); }
/* Active marker. Two states share one treatment, deliberately:
     aria-current="page"     — this link IS the current page
     aria-current="location" — this link is the SECTION containing the current
                               page (e.g. Equipment, while an equipment detail
                               page is open)
   The visual marker is identical to the approved appearance. The distinction
   is carried in the accessible name, where it belongs, not in the styling. */
.nav__link[aria-current="page"],
.nav__link[aria-current="location"] { border-bottom-color: var(--c-accent); font-weight: 600; }
.nav__item--cta { margin-left: var(--s-3); }
.nav__item--cta .btn { padding: 12px 22px; }

/* ---------- 8. BREADCRUMB ----------------------------------------------- */
/* Site chrome: every page below the first level. */
.breadcrumb {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding-block: var(--s-3);
  font-size: var(--fs-small);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.breadcrumb li { display: flex; align-items: center; gap: var(--s-2); color: var(--c-muted); }
.breadcrumb li + li::before {
  content: '\203A';                      /* › */
  color: var(--c-border-fn);
  font-size: 1.1em;
}
.breadcrumb a {
  color: var(--c-navy);
  text-decoration: none;
  display: inline-flex; align-items: center;
  min-height: 32px;                      /* in-flow text link, not a control */
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--c-muted); font-weight: 600; }

/* ---------- 9. GRID AND CARDS ------------------------------------------- */
.grid { display: grid; gap: var(--s-5); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--s-6);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.card:hover { transform: translateY(-2px); border-color: var(--c-navy-light); box-shadow: 0 2px 10px rgba(30,48,80,.08); }
.card h3, .card h4 { margin-bottom: var(--s-3); }
.card p { font-size: var(--fs-body); }
.card__metric {
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-small); font-variant-numeric: tabular-nums;
  color: var(--c-navy); font-weight: 600;
}
.card__foot { margin-top: auto; padding-top: var(--s-4); }

/* Card sub-component: key/value specification rows on a card face */
.spec-list { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.spec-list div { display: flex; justify-content: space-between; gap: var(--s-4);
  font-size: var(--fs-small); padding-block: var(--s-2);
  border-bottom: 1px solid var(--c-border); }
.spec-list dt, .spec-list .k { color: var(--c-muted); }
.spec-list dd, .spec-list .v { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--c-navy); }

/* ---------- 9b. SCROLLABLE TABLE REGION --------------------------------- */
/* Promoted to core deliberately: .table-wrap
   is already declared identically in three template stylesheets (equipment,
   equipment hub, service), and bect-redesign-service.css carries a standing
   note that it "should be promoted at the next approved core revision". This is
   that revision. The existing per-template `overflow-x: auto` declarations are
   left in place and are byte-identical to the rule here; nothing is overridden.

   THE COMPONENT, applied identically to all fourteen tables:
     <p class="table-hint" id="X-hint">Swipe or scroll ...</p>
     <div class="table-wrap" role="region" tabindex="0"
          aria-labelledby="X-cap" aria-describedby="X-hint">
       <table class="spec"><caption id="X-cap">...</caption>

   WHY tabindex="0". Chrome 150 makes overflow scrollers focusable on its own,
   so the regions were already keyboard-scrollable there; Firefox and Safari
   have not shipped that behaviour. tabindex="0" makes keyboard access explicit
   in every engine (WCAG 2.1.1) instead of depending on one engine's default.
   It also means the region now matches the :focus-visible rule in and takes
   the design system's 3px accent ring, rather than Chrome's own 1px auto ring.

   WHY role="region" + a name. A focus stop with no role and no accessible name
   is announced as an anonymous group. The name comes from the table's existing
   visible <caption>, so nothing new is written and nothing can drift. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* The scroll hint. It is REAL TEXT in the document, never a ::before content
   string, so it carries accessible meaning and can be referenced by
   aria-describedby. Muted small type, per the approved scale — it is guidance,
   not an error, so it takes no accent colour, no icon and no border.

   Above 519px it is removed from view but NOT from the accessibility tree, via
   the same visually-hidden geometry used elsewhere in this file. 519px is not a
   new design breakpoint; it is derived, and it is exact:
       at 520px the gutter is 20px, so the container is 520-40 = 480px, which
       equals table.spec's min-width and does NOT scroll;
       at 519px the container is 479px, which is the first width that does.
   Measured and confirmed in the browser at 520 and 519. Keeping the hint in the
   accessibility tree at all widths is a deliberate, minor over-communication,
   accepted because the alternative is JavaScript. */
.table-hint {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
@media (max-width: 519px) {
  .table-hint {
    position: static; width: auto; height: auto;
    margin: 0 0 var(--s-3); overflow: visible; clip: auto;
    white-space: normal;
    font-size: var(--fs-small); color: var(--c-muted);
  }
}

/* ---------- 10. (RETIRED) ------------------------------------------------
   The placeholder component was REMOVED on 26 July 2026, together with the
   prototype banner below it. Both were development devices and the owner's
   standing rule prohibits them in the released site.
   .placeholder, .placeholder__tag and .placeholder p are gone: the last
   markup using them was deleted in the same change, so 0 of the twelve
   active pages referenced them. Nothing else in the system depended on
   them, and the contact form's runtime classes (.imTipContent,
   .object-generic-error, .imspprot-trap, .validator) are unrelated and
   untouched.
   Recoverable from the Entry 025 restore point if a placeholder is ever
   wanted again for local development. -------------------------------- */

/* REMOVED at this revision, as design system directed:
     .placeholder__ref  — rendered the blocking decision ID to the visitor
     .pending           — dotted underline on provisional wording
     .pending-note      — visible "pending final owner confirmation" note
   All three rendered verification status, which D23 forbids in visible
   content. All three were already unused in the markup of both approved
   pages (verified: 0 occurrences). They were kept only so the approved
   stylesheet stayed byte-identical until an approved revision. This is that
   revision. Removing them changes nothing on screen.
   Recoverable from the Entry 010 restore point. */

/* ---------- 11. ENQUIRY BAND -------------------------------------------- */
.band { background: var(--c-navy); color: #fff; padding-block: var(--s-9); }
.band h2 { color: #fff; }
.band p { color: rgba(255,255,255,.9); max-width: 60ch; margin-top: var(--s-4); }
.band__inner { max-width: var(--w-narrow); }
.band a:not(.btn) { color: #fff; }

/* ---------- 12. FOOTER -------------------------------------------------- */
.site-footer { background: var(--c-navy-deep); color: rgba(255,255,255,.86); padding-block: var(--s-8) var(--s-6); }
.site-footer h2, .site-footer h3 { color: #fff; font-size: var(--fs-h4); margin-bottom: var(--s-4); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-7); }
.site-footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__list li { margin-bottom: var(--s-2); }
.footer__list a { display: inline-flex; align-items: center; min-height: 32px; }
.footer__brand img { width: 170px; height: 46px; object-fit: contain; margin-bottom: var(--s-4);
  background: #fff; padding: var(--s-2); border-radius: var(--radius); }
.footer__tagline { font-size: var(--fs-small); color: rgba(255,255,255,.72); max-width: 34ch; }
address { font-style: normal; font-size: var(--fs-small); line-height: 1.7; }
.footer__email { margin-top: var(--s-3); font-size: var(--fs-small); }
.footer__bottom p { max-width: none; }
.footer__bottom {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  justify-content: space-between; font-size: var(--fs-small);
  color: rgba(255,255,255,.72);
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-5); }


/* ==========================================================================
   14. RESPONSIVE — X5 breakpoints: 1162 / 720 / 480
   Source order matters: --s-9 is redefined at 1161px and again at 480px.
   ========================================================================== */

/* --- Below X5 "Desktop" (1162px) --- */
@media (max-width: 1161px) {
  :root { --gutter: 20px; --s-9: var(--s-8); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* --- Tablet: X5 "Breakpoint 1" (720px) --- */
@media (max-width: 720px) {
  :root {
    --fs-h1: 2.25rem;   /* 36px */
    --fs-h2: 1.75rem;   /* 28px */
    --fs-h3: 1.375rem;  /* 22px */
    --fs-lead: 1.1875rem;
    --header-h: 64px;
  }
  /* Nav collapses to a full-width panel */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-width: 44px; min-height: 44px; padding: var(--s-2) var(--s-3);
    background: transparent; border: 1.5px solid var(--c-navy);
    border-radius: var(--radius); color: var(--c-navy); font-weight: 600; cursor: pointer;
  }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--c-surface); border-bottom: 1px solid var(--c-border);
    box-shadow: 0 8px 20px rgba(30,48,80,.10);
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-3) var(--gutter) var(--s-5); }
  .nav__link { min-height: 48px; padding: var(--s-3) 0; border-bottom: 1px solid var(--c-border); }
  .nav__link[aria-current="page"],
  .nav__link[aria-current="location"] { border-bottom-color: var(--c-accent); }
  .nav__item--cta { margin: var(--s-4) 0 0; }
  .nav__item--cta .btn { width: 100%; }

  .section { padding-block: var(--s-8); }
  .section__head { margin-bottom: var(--s-6); }
  .band { padding-block: var(--s-8); }
}

/* --- Mobile: X5 "Mobile" (480px) and below (Mobile Fluid) --- */
@media (max-width: 480px) {
  :root {
    --gutter: 16px;
    --fs-h1: 1.875rem;   /* 30px */
    --fs-h2: 1.5rem;     /* 24px */
    --fs-h3: 1.25rem;    /* 20px */
    --fs-body: 1rem;     /* 16px — never smaller */
    --fs-lead: 1.125rem;
    --s-9: var(--s-7); --s-8: var(--s-7);
    --header-h: 60px;
  }
  .grid--4, .grid--3, .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .card { padding: var(--s-5); }
  .placeholder { padding: var(--s-6) var(--s-5); }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .footer__bottom { flex-direction: column; gap: var(--s-4); }
  .brand img { width: 140px; height: 38px; }
  .spec-list div { flex-direction: column; gap: var(--s-1); }
  .breadcrumb { font-size: 0.8125rem; }
  .breadcrumb ol { gap: var(--s-1); }
}

/* ---------- 15. REDUCED MOTION ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover { transform: none; }
  .link-arrow:hover::after { transform: none; }
}

/* ---------- 16. PRINT --------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .btn-row, .breadcrumb { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band, .site-footer { background: #fff; color: #000; }
  .band h2, .site-footer h3 { color: #000; }
  .card { border: 1px solid #999; break-inside: avoid; }
}


/* ---------- GRID ITEM SHRINK -------------------- */
/* A grid item's initial `min-width: auto` resolves to its MIN-CONTENT width,
   so an item refuses to shrink below its longest word even when its track is
   minmax(0, 1fr). At 200% text that made items overflow their own tracks and
   pushed the page sideways. `min-width: 0` releases the item; the text then
   wraps inside the track via the overflow-wrap rule in core section 5.
   No effect at normal text size, where nothing needs to shrink this far. */
.grid > *, .grid--4 > *, .grid--3 > *, .grid--2 > *, .spec-list > *,
.footer__grid > * { min-width: 0; }
