/* ==========================================================================
   BAKKAR PRINTING — THEME "INDUSTRIAL PRECISION"
   base.css — reset · base type · page shell · utilities · HEADER · FOOTER
   --------------------------------------------------------------------------
   OWNER: foundation agent. Page agents must NOT edit this file.
   Depends on: tokens.css (must be linked BEFORE this file).

   DIRECTION POLICY
   Every box-model property in this file is LOGICAL
   (margin-inline-*, padding-block-*, inset-inline-*, border-inline-*,
    text-align: start/end). There is no mirrored stylesheet. RTL works because
   the properties themselves are direction-relative. The only physical
   exceptions are decorative transforms, which flip explicitly under
   [dir="rtl"] at the bottom of each block.
   ========================================================================== */

/* ==========================================================================
   1. RESET / NORMALISE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Every anchor jump must clear the sticky header. */
  scroll-padding-block-start: calc(var(--header-h) + var(--s-6));
  -moz-tab-size: 4;
  tab-size: 4;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100svh;
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  letter-spacing: var(--track-none);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: none;
  /* Never allow a horizontal scrollbar at ANY width, 360 → 1920. */
  overflow-x: clip;
}

/* Body scroll lock (drawer / modal / lightbox open). */
body.is-locked {
  overflow: hidden;
  /* Compensate for the vanished scrollbar so the page does not jump. */
  padding-inline-end: var(--scrollbar-w, 0px);
}

img, svg, video, canvas, iframe, picture {
  display: block;
  max-width: 100%;
}
img, video { height: auto; }
img { border-style: none; background-color: var(--surface-2); }

svg { fill: currentColor; }
svg[stroke] { fill: none; }

button, input, select, textarea, optgroup {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
}
button { cursor: pointer; -webkit-appearance: none; appearance: none; }
button:disabled { cursor: not-allowed; }

textarea { resize: vertical; }

ul[class], ol[class] { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }

hr {
  border: 0;
  border-block-start: var(--border);
  block-size: 0;
  color: inherit;
}

[hidden] { display: none !important; }

fieldset { border: 0; min-inline-size: 0; }
legend { padding: 0; }

address { font-style: normal; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

::selection {
  background-color: var(--accent-solid);
  color: var(--accent-fg);
  text-shadow: none;
}

/* Scrollbar — steel, square, hairline. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 2px solid var(--bg-alt);
}
::-webkit-scrollbar-thumb:hover { background: var(--steel-500); }


/* ==========================================================================
   2. BASE TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-none);
  color: var(--fg-strong);
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); text-transform: uppercase; }
h2 { font-size: var(--fs-2xl); text-transform: uppercase; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 {
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-muted);
}

/* Cairo has no condensed cut — uppercase is meaningless in Arabic and the
   display face must be allowed to breathe. */
[dir="rtl"] h1,
[dir="rtl"] h2 { text-transform: none; }

p { text-wrap: pretty; }

strong, b { font-weight: var(--fw-semi); color: var(--fg-strong); }
em, i { font-style: italic; }
small { font-size: var(--fs-sm); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--t-color);
}
a:hover { color: var(--accent); }

/* Default inline link inside prose gets the industrial underline: a hairline
   that thickens to the brand red on hover. */
a.link,
.prose a {
  color: var(--fg-strong);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--line-contrast);
  transition: box-shadow var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
a.link:hover,
.prose a:hover {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}


/* ==========================================================================
   3. FOCUS — always visible, always square, always red.
   ========================================================================== */
:focus { outline: none; }

:focus-visible {
  outline: var(--focus-w) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* On a red surface the red ring is invisible — switch to white. */
.btn--primary:focus-visible,
.on-accent :focus-visible,
.langsw__opt[aria-pressed="true"]:focus-visible {
  outline-color: #FFFFFF;
}
/* …unless the "surface" is a white plate (the CTA on a red bar). */
:root[data-header="red"] .masthead__cta:focus-visible,
:root[data-sidebar="red"] .drawer__cta:focus-visible,
:root[data-header="red"] .langsw__opt[aria-pressed="true"]:focus-visible,
:root[data-sidebar="red"] .langsw__opt[aria-pressed="true"]:focus-visible {
  outline-color: var(--red-800);
}

.skip-link {
  position: fixed;
  inset-block-start: var(--s-2);
  inset-inline-start: var(--s-2);
  z-index: var(--z-skip);
  display: inline-block;
  padding: var(--s-3) var(--s-5);
  background-color: var(--accent-solid);
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--accent-fg);
  outline-color: var(--fg-strong);
}


/* ==========================================================================
   4. PAGE SHELL
   ========================================================================== */
.page {
  display: flex;
  flex-direction: column;
  min-block-size: 100svh;
}
.page__main { flex: 1 0 auto; }

.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide  { max-inline-size: var(--container-wide); }
.container--narrow{ max-inline-size: var(--container-narrow); }
.container--flush { padding-inline: 0; }

.section {
  position: relative;
  padding-block: var(--section-y);
  background-color: var(--bg);
  color: var(--fg);
}
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

/* A hairline rule between stacked sections of the same zone. */
.section--ruled { border-block-start: var(--border); }


/* ==========================================================================
   5. THE BLUEPRINT GRID — the dark-section background signature.
   Two layers: a fine 1px grid at --grid-unit, and a major line every 5 units.
   ========================================================================== */
.blueprint { position: relative; isolation: isolate; }

.blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  var(--grid-line-major) 0 1px, transparent 1px calc(var(--grid-unit) * 5)),
    repeating-linear-gradient(to bottom, var(--grid-line-major) 0 1px, transparent 1px calc(var(--grid-unit) * 5)),
    repeating-linear-gradient(to right,  var(--grid-line) 0 1px, transparent 1px var(--grid-unit)),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px var(--grid-unit));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 82%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 82%, transparent);
}
/* Un-masked variant for short bands. */
.blueprint--solid::before {
  -webkit-mask-image: none;
          mask-image: none;
}


/* ==========================================================================
   6. UTILITIES
   ========================================================================== */

/* -- 6.1 Screen-reader only ------------------------------------------------ */
.sr-only {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -- 6.2 The MONO MICRO-LABEL. The single most-used device in this theme. -- */
.micro {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
.micro--accent { color: var(--accent); }
.micro--fg     { color: var(--fg); }
.micro--lg     { font-size: var(--fs-sm); letter-spacing: var(--track-wider); }

/* A micro-label with the red tick in front of it. */
.micro--tick {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.micro--tick::before {
  content: "";
  inline-size: 18px;
  block-size: 2px;
  background-color: var(--accent);
  flex: none;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }

/* Phone numbers, dimensions, codes: must stay LTR inside Arabic prose.
   (Also set dir="ltr" on the element — this only handles alignment.) */
.ltr { direction: ltr; unicode-bidi: isolate; }

/* -- 6.3 Rules ------------------------------------------------------------- */
.rule {
  border: 0;
  border-block-start: var(--border);
  inline-size: 100%;
}
.rule--accent { border-block-start-color: var(--accent); }
.rule--strong { border-block-start-width: var(--bw-rule); }

/* The short red slab that flags a heading. */
.slab {
  inline-size: 44px;
  block-size: var(--bw-slab);
  background-color: var(--accent);
  display: block;
}

/* -- 6.4 CORNER BRACKETS — the card motif. -------------------------------- */
/* `.brackets` puts a hairline red bracket on the block-start/inline-start and
   block-end/inline-end corners. Add an inner <span class="brackets__x"> to get
   the other two corners as well. Fully RTL-safe (logical inset). */
.brackets { position: relative; }
.brackets::before,
.brackets::after {
  content: "";
  position: absolute;
  inline-size: 11px;
  block-size: 11px;
  border: var(--bw-hair) solid var(--accent);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
  z-index: 2;
}
.brackets::before {
  inset-block-start: -1px;
  inset-inline-start: -1px;
  border-inline-end: 0;
  border-block-end: 0;
}
.brackets::after {
  inset-block-end: -1px;
  inset-inline-end: -1px;
  border-inline-start: 0;
  border-block-start: 0;
}
.brackets__x {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.brackets__x::before,
.brackets__x::after {
  content: "";
  position: absolute;
  inline-size: 11px;
  block-size: 11px;
  border: var(--bw-hair) solid var(--accent);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.brackets__x::before {
  inset-block-start: -1px;
  inset-inline-end: -1px;
  border-inline-start: 0;
  border-block-end: 0;
}
.brackets__x::after {
  inset-block-end: -1px;
  inset-inline-start: -1px;
  border-inline-end: 0;
  border-block-start: 0;
}
/* Reveal on hover / focus-within / .is-on */
.brackets:hover::before,
.brackets:hover::after,
.brackets:focus-within::before,
.brackets:focus-within::after,
.brackets.is-on::before,
.brackets.is-on::after,
.brackets:hover > .brackets__x::before,
.brackets:hover > .brackets__x::after,
.brackets:focus-within > .brackets__x::before,
.brackets:focus-within > .brackets__x::after,
.brackets.is-on > .brackets__x::before,
.brackets.is-on > .brackets__x::after { opacity: 1; }

/* Always-on variant (used on the hero spec strip). */
.brackets--static::before,
.brackets--static::after,
.brackets--static > .brackets__x::before,
.brackets--static > .brackets__x::after { opacity: 1; }

/* -- 6.5 Layout helpers ---------------------------------------------------- */
.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

.flow > * + * { margin-block-start: var(--flow-space, var(--s-4)); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.stack-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.full-bleed {
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline-start: 50%;
  transform: translateX(-50%);
}
[dir="rtl"] .full-bleed { transform: translateX(50%); }

/* -- 6.6 Text helpers ------------------------------------------------------ */
.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-inline-size: var(--measure);
}
.text-accent { color: var(--accent); }
.text-muted  { color: var(--fg-muted); }
.text-subtle { color: var(--fg-subtle); }
.measure        { max-inline-size: var(--measure); }
.measure-narrow { max-inline-size: var(--measure-narrow); }
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -- 6.7 Directional icons: flip anything that implies "forward". ---------- */
[dir="rtl"] .icon-flip { transform: scaleX(-1); }

/* -- 6.8 SCROLL REVEAL — slide 12px and CLIP. Never bouncy. ---------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  clip-path: inset(0 0 12px 0);
  transition:
    opacity var(--dur-5) var(--ease),
    transform var(--dur-5) var(--ease),
    clip-path var(--dur-5) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}
/* A horizontal variant for the offset editorial blocks. */
[data-reveal="x"] { transform: translateX(-12px); clip-path: inset(0 0 0 12px); }
[dir="rtl"] [data-reveal="x"] { transform: translateX(12px); clip-path: inset(0 12px 0 0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}


/* ==========================================================================
   7. HEADER
   --------------------------------------------------------------------------
   Two decks:
     .topbar    — 34px utility strip: EST/location, phone, WhatsApp, email.
                  DESKTOP ONLY (>=1024). It is chrome, not navigation.
     .masthead  — brand · nav (+ mega) · search icon · customiser icon ·
                  language switch · quote CTA · burger

   BELOW 1024px THE BAR IS STRIPPED TO **LOGO + SEARCH + BURGER**. Nothing else.
   The language switch, the customiser and the Request-a-Quote CTA move INTO the
   drawer (the CTA prominent — it is the only conversion action on the site).

   EVERY colour here comes from a --hdr-* token (tokens.css §10). That is what
   lets light / dark / "Bakkar Red" all work without this file knowing about
   any of them.
   ========================================================================== */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background-color: var(--hdr-bg);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
          backdrop-filter: saturate(140%) blur(14px);
  border-block-end: var(--bw-hair) solid var(--hdr-line);
  color: var(--hdr-fg);
}
/* No backdrop-filter? Fall back to the opaque bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background-color: var(--hdr-bg-solid); }
}
/* The "Bakkar Red" command bar is a solid plate — glass over red reads as mud. */
:root[data-header="red"] .site-header {
  background-color: var(--hdr-bg-solid);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* A red bar needs a white focus ring: a red ring on red is invisible. */
.site-header :focus-visible { outline-color: var(--hdr-focus); }

.site-header__inner {
  inline-size: 100%;
  max-inline-size: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* -- 7.1 Topbar ------------------------------------------------------------ */
.topbar {
  border-block-end: var(--bw-hair) solid var(--hdr-line-faint);
  background-color: var(--hdr-topbar-bg);
  block-size: var(--topbar-h);
  overflow: hidden;
  transition: block-size var(--dur-3) var(--ease),
              opacity var(--dur-2) var(--ease);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  block-size: var(--topbar-h);
}
.topbar__id {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-inline-size: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--hdr-fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__key { color: var(--hdr-accent); }
.topbar__sep {
  inline-size: 1px;
  block-size: 12px;
  background-color: var(--hdr-line);
  flex: none;
}
.topbar__right {
  display: flex;
  align-items: center;
  gap: 0;
  flex: none;
}
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding-inline: var(--s-3);
  block-size: var(--topbar-h);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-none);
  color: var(--hdr-fg-3);
  border-inline-start: var(--bw-hair) solid var(--hdr-line-faint);
  transition: var(--t-color);
}
.topbar__link:hover { color: var(--hdr-accent); background-color: var(--hdr-hover-bg); }
.topbar__link svg { inline-size: 13px; block-size: 13px; flex: none; }
:root[data-header="red"] .topbar__link:hover { color: #FFFFFF; }

/* Drop the email first, then the landline: the WhatsApp number is the one that
   matters on a narrow desktop. */
@media (max-width: 1279px) { .topbar__link--mail { display: none; } }
@media (max-width: 1099px) { .topbar__link--phone { display: none; } }

/* -- 7.2 THE LANGUAGE SWITCH — a segmented control with a sliding thumb -----
   Both languages are always on screen; the thumb marks the live one. It is
   placed with inset-inline-start (a LOGICAL property), never translateX, so it
   lands on the correct option when the direction flips.                      */
.langsw {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex: none;
  block-size: 40px;
  padding: 0;
  background-color: var(--hdr-seg-bg);
  border: var(--bw-hair) solid var(--hdr-seg-line);
  isolation: isolate;
}
.langsw__thumb {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 50%;
  z-index: 0;
  background-color: var(--hdr-seg-thumb);
  transition: inset-inline-start var(--dur-2) var(--ease);
  pointer-events: none;
}
.langsw[data-active="ar"] .langsw__thumb { inset-inline-start: 50%; }

.langsw__opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 50%;
  min-inline-size: 0;
  padding-inline: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  white-space: nowrap;
  color: var(--hdr-seg-fg);
  background-color: transparent;
  transition: color var(--dur-1) var(--ease);
}
.langsw__opt:hover { color: var(--hdr-fg); }
.langsw__opt[aria-pressed="true"] {
  color: var(--hdr-seg-fg-on);
  font-weight: var(--fw-semi);
}
/* The Arabic option always renders in the Arabic face, in both directions. */
.langsw__opt[data-lang="ar"] {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--fs-xs);
}
.langsw__label--long  { display: none; }
.langsw__label--short { display: inline; }
/* Once the row can afford them, spell the languages out. */
@media (min-width: 1280px) {
  .langsw__label--long  { display: inline; }
  .langsw__label--short { display: none; }
}

/* Full-width variant — the drawer. It ALWAYS spells the words out. */
.langsw--block {
  display: flex;
  inline-size: 100%;
  block-size: 46px;
  background-color: var(--dw-seg-bg);
  border-color: var(--dw-seg-line);
}
.langsw--block .langsw__thumb { background-color: var(--dw-seg-thumb); }
.langsw--block .langsw__opt { color: var(--dw-seg-fg); font-size: var(--fs-xs); }
.langsw--block .langsw__opt:hover { color: var(--dw-fg); }
.langsw--block .langsw__opt[aria-pressed="true"] { color: var(--dw-seg-fg-on); }
.langsw--block .langsw__label--long  { display: inline; }
.langsw--block .langsw__label--short { display: none; }
.langsw--block .langsw__opt[data-lang="ar"] { font-size: var(--fs-sm); }

/* -- 7.3 Masthead ---------------------------------------------------------- */
.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  block-size: var(--masthead-h);
  transition: block-size var(--dur-3) var(--ease);
}

/* -- 7.4 Brand ------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  min-inline-size: 0;
  color: var(--hdr-fg);
}
.brand:hover { color: var(--hdr-fg); }
.brand__mark {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  flex: none;
  background-color: var(--hdr-mark-bg);
  border: var(--bw-hair) solid var(--hdr-line);
  transition: border-color var(--dur-2) var(--ease);
}
.brand:hover .brand__mark { border-color: var(--hdr-accent); }
.brand__mark img {
  inline-size: 26px;
  block-size: 26px;
  object-fit: contain;
  background: none;
}
.brand__lockup {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-inline-size: 0;
}
.brand__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-none);
  color: var(--hdr-fg);
  white-space: nowrap;
}
[dir="rtl"] .brand__name { text-transform: none; font-size: var(--fs-base); }
.brand__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--hdr-accent);
  white-space: nowrap;
}
:root[data-header="red"] .brand__tag { color: var(--hdr-fg-3); }
/* The wordmark only rides along once the desktop row has genuinely earned the
   room for it. Below that the red monogram IS the brand. */
@media (max-width: 1439px) {
  .brand__lockup { display: none; }
}

/* -- 7.5 Main nav ---------------------------------------------------------- */
.mainnav { margin-inline-start: var(--s-2); flex: 0 1 auto; min-inline-size: 0; }
.mainnav__list {
  display: flex;
  align-items: center;
  gap: 0;
}
.mainnav__item { position: relative; }

.mainnav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  block-size: var(--masthead-h);
  padding-inline: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--hdr-fg-2);
  white-space: nowrap;
  background-color: transparent;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
@media (min-width: 1280px) { .mainnav__link { padding-inline: var(--s-4); } }

/* The red underscore that slides in — mechanical, 140ms, no bounce. */
.mainnav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: var(--s-3);
  block-size: var(--bw-rule);
  background-color: var(--hdr-accent);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--dur-1) var(--ease);
}
@media (min-width: 1280px) { .mainnav__link::after { inset-inline: var(--s-4); } }
.mainnav__link:hover,
.mainnav__link[aria-expanded="true"] { color: var(--hdr-fg); }
.mainnav__link:hover::after,
.mainnav__link[aria-expanded="true"]::after { transform: scaleX(1); }

.mainnav__link[aria-current="page"] { color: var(--hdr-fg); }
.mainnav__link[aria-current="page"]::after { transform: scaleX(1); }

.mainnav__caret {
  inline-size: 9px;
  block-size: 9px;
  flex: none;
  transition: transform var(--dur-2) var(--ease);
}
.mainnav__link[aria-expanded="true"] .mainnav__caret { transform: rotate(180deg); }

/* -- 7.6 MEGA-MENU --------------------------------------------------------- */
.mega {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: calc(var(--s-3) * -1);
  z-index: var(--z-dropdown);
  inline-size: min(78rem, calc(100vw - var(--gutter) * 2));
  background-color: var(--hdr-bg-solid);
  border: var(--bw-hair) solid var(--hdr-line);
  border-block-start: var(--bw-rule) solid var(--accent-brand);
  box-shadow: var(--shadow-3);
  color: var(--hdr-fg);
  /* Mechanical open: clip down from the top edge. */
  opacity: 0;
  transform: translateY(-6px);
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  transition:
    opacity var(--dur-3) var(--ease),
    transform var(--dur-3) var(--ease),
    clip-path var(--dur-3) var(--ease);
}
/* ---- mega menu containment -------------------------------------------------
   The panel used to be anchored to its own <li> (`.mainnav__item{position:relative}`).
   That <li> sits in the middle of the nav, so a 78rem panel starting at its edge
   ran straight off the side of the screen — in BOTH directions (mirrored in RTL).
   Anchor it to the header row instead, so its width is measured against the
   header container and it can never escape the viewport.                       */
/* ---- masthead fit -----------------------------------------------------------
   The nav is monospace, uppercase and letter-spaced, so it is intrinsically wide.
   `.mainnav{flex:0 1 auto;min-inline-size:0}` let it shrink BELOW its content, and
   the <ul> then spilled out of its box and collided with the search icon (measured
   -4px between "Contact Us" and the tools at 1440px). Stop the shrink, tighten the
   link padding, and guarantee a gap before the tools.                            */
.mainnav { flex: 0 0 auto; min-inline-size: auto; }
.mainnav__list { flex-wrap: nowrap; }
.mainnav__link { padding-inline: var(--s-2); white-space: nowrap; }
.masthead__tools { margin-inline-start: auto; padding-inline-start: var(--s-5); }
@media (max-width: 1439px) {
  .mainnav__link { padding-inline: 0.4rem; letter-spacing: 0.06em; }
}

.masthead__inner { position: relative; }
.mainnav__item--mega { position: static; }
.mega {
  inset-inline-start: 0;
  inset-inline-end: auto;
  inline-size: min(78rem, 100%);
  max-inline-size: calc(100vw - var(--gutter) * 2);
}

.mega.is-open {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}
/* On a red bar the panel drops back to the page's own palette — a red mega
   panel would be a large red fill, which this theme does not do. */
:root[data-header="red"] .mega {
  background-color: var(--surface);
  border-color: var(--line);
  color: var(--fg);
}

.mega__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 20rem;
  gap: 0;
}
@media (max-width: 1279px) {
  .mega__inner { grid-template-columns: 1fr 1fr 18rem; }
}

.mega__col {
  padding: var(--s-7) var(--s-6);
  border-inline-end: var(--bw-hair) solid var(--hdr-line);
  min-inline-size: 0;
}
.mega__col:last-child { border-inline-end: 0; }
:root[data-header="red"] .mega__col { border-inline-end-color: var(--line); }

.mega__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-block-end: var(--s-3);
  margin-block-end: var(--s-4);
  border-block-end: var(--bw-hair) solid var(--hdr-line);
}
:root[data-header="red"] .mega__head { border-block-end-color: var(--line); }
.mega__index {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--accent);
  flex: none;
}
.mega__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-none);
  color: var(--fg-strong);
  line-height: 1.1;
}
:root[data-header="red"] .mega__title { color: var(--fg-strong); }
[dir="rtl"] .mega__title { text-transform: none; }

.mega__links { display: flex; flex-direction: column; }
.mega__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  transition: var(--t-color);
}
.mega__link:hover { color: var(--accent); }
.mega__link::before {
  content: "";
  inline-size: 0;
  block-size: 1px;
  background-color: var(--accent);
  transition: inline-size var(--dur-1) var(--ease);
  flex: none;
}
.mega__link:hover::before { inline-size: 12px; }
.mega__link-name { flex: 1; min-inline-size: 0; }
.mega__count {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-subtle);
  flex: none;
}

.mega__all {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--accent);
}
.mega__all:hover { color: var(--accent-hover); }
.mega__all svg { inline-size: 11px; block-size: 11px; }

/* The promo column — a real product photo, never a blank tile. */
.mega__promo {
  position: relative;
  padding: 0;
  background-color: var(--bg-deep);
  display: flex;
  flex-direction: column;
}
.mega__promo-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--media-bed);
}
.mega__promo-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(0.25) contrast(1.05);
  transition: transform var(--dur-4) var(--ease), filter var(--dur-3) var(--ease);
}
.mega__promo:hover .mega__promo-media img {
  transform: scale(1.03);
  filter: grayscale(0) contrast(1);
}
.mega__promo-body { padding: var(--s-5) var(--s-6) var(--s-6); }
.mega__promo-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--fg-strong);
  line-height: 1.05;
  margin-block-end: var(--s-2);
}
[dir="rtl"] .mega__promo-title { text-transform: none; }
.mega__promo-text {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin-block-end: var(--s-4);
}
@media (max-width: 1279px) {
  .mega__promo-media { aspect-ratio: 16 / 7; }
}

/* -- 7.7 Masthead tools ---------------------------------------------------- */
/* The tools column may SHRINK (min-inline-size:0), so a row that is over budget
   has somewhere to give instead of pushing out of the viewport. The quote CTA —
   the only funnel on the site — is the one thing that never shrinks. */
.masthead__tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-start: auto;
  flex: none;
  min-inline-size: 0;
}

/* The square icon buttons: search and customiser. 40px box, 44px tap target. */
.hdr-btn {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  color: var(--hdr-btn-fg);
  background-color: var(--hdr-btn-bg);
  border: var(--bw-hair) solid var(--hdr-btn-line);
  transition: var(--t-color);
}
/* The 40px box is the drawn size; the tap target is the full 44. */
.hdr-btn::after {
  content: "";
  position: absolute;
  inset: -2px;
}
.hdr-btn:hover {
  color: var(--hdr-btn-fg-on);
  background-color: var(--hdr-btn-bg-on);
  border-color: var(--hdr-btn-bg-on);
}
.hdr-btn svg { inline-size: 16px; block-size: 16px; }
.hdr-btn[aria-expanded="true"] {
  color: var(--hdr-btn-fg-on);
  background-color: var(--hdr-btn-bg-on);
  border-color: var(--hdr-btn-bg-on);
}

/* The quote CTA. It reads the chrome's CTA tokens through the .btn custom
   properties, so on a red bar it inverts to a white plate with red type
   without .btn--primary knowing anything about it. */
.masthead__cta {
  flex: none;
  --btn-bg:   var(--hdr-cta-bg);
  --btn-fg:   var(--hdr-cta-fg);
  --btn-bd:   var(--hdr-cta-line);
  --btn-wipe: var(--hdr-cta-wipe);
}
/* Icon-only until the row can afford the words.
   NOTE THE SCOPE. `.masthead__cta` alone is (0,1,0) — the same specificity as
   `.btn`/`.btn--sm` in components.css, which loads AFTER this file and would win
   on source order, silently restoring the padding (and, below, the display).
   `.site-header .masthead__cta` is (0,2,0) and actually lands. */
@media (max-width: 1199px) {
  .site-header .masthead__cta .btn__label { display: none; }
  .site-header .masthead__cta {
    inline-size: 40px;
    min-inline-size: 40px;
    padding-inline: 0;
    justify-content: center;
  }
}

/* -- 7.8 Burger ------------------------------------------------------------ */
.burger {
  display: none;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  border: var(--bw-hair) solid var(--hdr-btn-line);
  background-color: transparent;
  color: var(--hdr-btn-fg);
  transition: var(--t-color);
}
.burger:hover {
  border-color: var(--hdr-btn-bg-on);
  background-color: var(--hdr-btn-bg-on);
  color: var(--hdr-btn-fg-on);
}
.burger__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  inline-size: 18px;
}
.burger__bar {
  display: block;
  block-size: 1.5px;
  inline-size: 100%;
  background-color: currentColor;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}
.burger__bar:nth-child(2) { inline-size: 72%; }
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* -- 7.9 THE MOBILE BAR ( < 1024px ) --------------------------------------
   LOGO + SEARCH + BURGER. That is the whole bar. The topbar, the nav, the
   customiser, the language switch and the quote CTA are all in the drawer.  */
@media (max-width: 1023px) {
  .topbar          { display: none; }
  .mainnav         { display: none; }
  /* (0,2,0): `.masthead__cta` alone would lose to `.btn { display:inline-flex }`
     in components.css on source order, and the quote button would stay in the
     mobile bar. See the note above. */
  .site-header .masthead__cta { display: none; }
  .site-header .hdr-btn--cust { display: none; }
  .masthead__tools > .langsw  { display: none; }
  .burger          { display: grid; }
  .masthead__inner { gap: var(--s-3); block-size: 64px; }
  .brand__mark     { inline-size: 40px; block-size: 40px; }
}
@media (max-width: 360px) {
  .masthead__inner { gap: var(--s-2); padding-inline: var(--s-4); }
}

/* -- 7.10 Condensed (scrolled) state --------------------------------------- */
body[data-scrolled="1"] .topbar {
  block-size: 0;
  opacity: 0;
  border-block-end-color: transparent;
}
body[data-scrolled="1"] .masthead__inner { block-size: var(--masthead-h-sm); }
body[data-scrolled="1"] .mainnav__link   { block-size: var(--masthead-h-sm); }
body[data-scrolled="1"] .site-header {
  box-shadow: 0 1px 0 var(--hdr-line), var(--hdr-shadow);
}
@media (max-width: 1023px) {
  body[data-scrolled="1"] .masthead__inner { block-size: 58px; }
}
/* The header hairline turns red as you scroll — a status LED for "you are no
   longer at the top", and a read-out of how far down the sheet you are. */
body[data-scrolled="1"] .site-header::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  block-size: 1px;
  inline-size: var(--scroll-progress, 0%);
  background-color: var(--hdr-accent);
  transition: inline-size 90ms linear;
}


/* ==========================================================================
   8. MOBILE DRAWER
   --------------------------------------------------------------------------
   Carries EVERYTHING the mobile bar handed over: the nav, the category tree,
   the language switch (full words), the customiser INLINE (never a second
   overlay stacked on an open dialog) and the quote CTA.
   Every colour comes from a --dw-* token, so "Bakkar Red sidebar" is a token
   swap and nothing here has to know.
   ========================================================================== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
}
.drawer :focus-visible { outline-color: var(--dw-focus); }

.drawer__scrim {
  position: absolute;
  inset: 0;
  background-color: var(--scrim-heavy);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--dur-4) var(--ease);
}
.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(24rem, 100vw);
  display: flex;
  flex-direction: column;
  background-color: var(--dw-bg);
  color: var(--dw-fg-2);
  border-inline-start: var(--bw-hair) solid var(--dw-line);
  box-shadow: var(--shadow-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--dur-4) var(--ease);
}
[dir="rtl"] .drawer__panel { transform: translateX(-100%); }

.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: translateX(0); }
[dir="rtl"] .drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-block-end: var(--bw-hair) solid var(--dw-line);
  background-color: var(--dw-bg-2);
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
}
.drawer__close {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  border: var(--bw-hair) solid var(--dw-btn-line);
  color: var(--dw-btn-fg);
  transition: var(--t-color);
}
.drawer__close:hover {
  border-color: var(--dw-accent);
  color: var(--dw-accent);
  background-color: var(--dw-hover-bg);
}
.drawer__close svg { inline-size: 14px; block-size: 14px; }

.drawer__title {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--dw-fg);
}

.drawer__nav { padding: var(--s-2) 0 var(--s-4); }

/* Mono section label between drawer groups. */
.drawer__group {
  display: block;
  padding: var(--s-6) var(--s-5) var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--dw-fg-3);
}
.drawer__nav > .drawer__group:first-child { padding-block-start: var(--s-4); }
.drawer__nav-label { flex: 1; text-align: start; min-inline-size: 0; }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  inline-size: 100%;
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--dw-fg-2);
  text-align: start;
  background-color: transparent;
  border-block-end: var(--bw-hair) solid var(--dw-line-faint);
  border-inline-start: var(--bw-slab) solid transparent;
  transition: var(--t-color), border-color var(--dur-1) var(--ease);
}
.drawer__link:hover,
.drawer__link[aria-current="page"] {
  color: var(--dw-fg);
  background-color: var(--dw-hover-bg);
  border-inline-start-color: var(--dw-accent);
}
.drawer__link-idx {
  font-size: var(--fs-2xs);
  color: var(--dw-accent);
  flex: none;
}
.drawer__caret {
  inline-size: 10px;
  block-size: 10px;
  flex: none;
  transition: transform var(--dur-2) var(--ease);
}
.drawer__link[aria-expanded="true"] .drawer__caret { transform: rotate(180deg); }

.drawer__sub {
  display: none;
  background-color: var(--dw-sub-bg);
  border-block-end: var(--bw-hair) solid var(--dw-line-faint);
}
.drawer__sub.is-open { display: block; }
.drawer__sub-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-3);
  padding-inline: var(--s-8) var(--s-5);
  font-size: var(--fs-sm);
  color: var(--dw-fg-2);
  transition: var(--t-color);
}
.drawer__sub-link:hover { color: var(--dw-accent); background-color: var(--dw-hover-bg); }
.drawer__sub-link--child { padding-inline-start: var(--s-10); font-size: var(--fs-xs); }
.drawer__sub-count {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--dw-fg-3);
}

/* A block of drawer controls (language, customiser). */
.drawer__section {
  padding: 0 var(--s-5) var(--s-5);
  border-block-start: var(--bw-hair) solid var(--dw-line);
  padding-block-start: var(--s-1);
}
.drawer__section > .drawer__group { padding-inline: 0; }

.drawer__foot {
  margin-block-start: auto;
  padding: var(--s-5);
  border-block-start: var(--bw-hair) solid var(--dw-line);
  background-color: var(--dw-bg-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
/* The primary conversion action. Same custom-property seam as the header CTA. */
.drawer__cta {
  --btn-bg:   var(--dw-cta-bg);
  --btn-fg:   var(--dw-cta-fg);
  --btn-bd:   var(--dw-cta-line, var(--dw-cta-bg));
  --btn-wipe: var(--dw-cta-wipe);
}
.drawer__note {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.5;
  color: var(--dw-fg-3);
}
.drawer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-block-start: var(--s-3);
  border-block-start: var(--bw-hair) solid var(--dw-line-faint);
}
.drawer__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--dw-fg-2);
}
.drawer__contact a:hover { color: var(--dw-accent); }
.drawer__contact svg {
  inline-size: 13px;
  block-size: 13px;
  flex: none;
  color: var(--dw-accent);
}


/* ==========================================================================
   9. FOOTER — the drawing's title block. Follows the mode.
   ========================================================================== */
.site-footer {
  position: relative;
  background-color: var(--ftr-bg);
  color: var(--ftr-fg-2);
  border-block-start: var(--bw-rule) solid var(--accent-brand);
  margin-block-start: auto;
  --grid-line:       var(--ftr-grid);
  --grid-line-major: var(--ftr-grid-major);
}

.footer__top { padding-block: var(--s-11) var(--s-9); }

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: var(--s-9) var(--s-7);
}
@media (max-width: 1023px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-8); }
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-end: var(--s-5);
  color: var(--ftr-fg);
}
.footer__brand:hover { color: var(--ftr-fg); }
.footer__brand-mark {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  flex: none;
  border: var(--bw-hair) solid var(--ftr-line);
  background-color: var(--ftr-bg-2);
}
.footer__brand-mark img { inline-size: 28px; block-size: 28px; object-fit: contain; background: none; }
.footer__brand-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  line-height: 1;
  color: var(--ftr-fg);
}
[dir="rtl"] .footer__brand-name { text-transform: none; font-size: var(--fs-md); }
.footer__brand-tag {
  display: block;
  margin-block-start: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--ftr-accent);
}
.footer__about {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ftr-fg-2);
  max-inline-size: 34rem;
  margin-block-end: var(--s-6);
}

.footer__h {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--ftr-fg);
  padding-block-end: var(--s-3);
  margin-block-end: var(--s-4);
  border-block-end: var(--bw-hair) solid var(--ftr-line);
  position: relative;
}
.footer__h::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 28px;
  block-size: 1px;
  background-color: var(--ftr-accent);
}

.footer__links { display: flex; flex-direction: column; gap: var(--s-2); }
.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--ftr-fg-2);
  transition: var(--t-color), padding var(--dur-1) var(--ease);
}
.footer__links a::before {
  content: "";
  inline-size: 0;
  block-size: 1px;
  background-color: var(--ftr-accent);
  transition: inline-size var(--dur-1) var(--ease);
  flex: none;
}
.footer__links a:hover { color: var(--ftr-accent); }
.footer__links a:hover::before { inline-size: 10px; }

.footer__contact-list { display: flex; flex-direction: column; gap: var(--s-4); }
.footer__contact-item { display: flex; gap: var(--s-3); align-items: flex-start; }
.footer__contact-item svg {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  color: var(--ftr-accent);
  margin-block-start: 3px;
}
.footer__contact-body { min-inline-size: 0; }
.footer__contact-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--ftr-fg-3);
  margin-block-end: 3px;
}
.footer__contact-value {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ftr-fg-2);
  line-height: 1.5;
}
a.footer__contact-value:hover { color: var(--ftr-accent); }
.footer__contact-value + .footer__contact-value { margin-block-start: 2px; }

.footer__social {
  display: flex;
  gap: 0;
  margin-block-start: var(--s-2);
  border: var(--bw-hair) solid var(--ftr-line);
  inline-size: fit-content;
}
.footer__social a {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  color: var(--ftr-fg-2);
  border-inline-end: var(--bw-hair) solid var(--ftr-line);
  transition: var(--t-color);
}
.footer__social a:last-child { border-inline-end: 0; }
.footer__social a:hover {
  color: var(--accent-fg);
  background-color: var(--accent-solid);
}
.footer__social svg { inline-size: 16px; block-size: 16px; }

/* -- 9.1 Footer bottom ----------------------------------------------------- */
.footer__bottom {
  border-block-start: var(--bw-hair) solid var(--ftr-line);
  background-color: var(--ftr-bg-2);
}
.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-block: var(--s-5);
}
.footer__legal {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--ftr-fg-3);
}
.footer__legal .topbar__sep { block-size: 10px; background-color: var(--ftr-line); }
.footer__totop {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: var(--bw-hair) solid var(--ftr-line);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--ftr-fg-2);
  transition: var(--t-color);
}
.footer__totop:hover {
  color: var(--accent-fg);
  background-color: var(--accent-solid);
  border-color: var(--accent-solid);
}
.footer__totop svg { inline-size: 11px; block-size: 11px; }


/* ==========================================================================
   10. PRINT — a spec sheet should print like one.
   ========================================================================== */
@media print {
  .site-header, .drawer, .toasts, .ticker, .sdlg, .cust,
  .slider__chrome, .burger, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}

/* ---- brand mark sizing: matched to Momentum (44px header / 36px drawer / 52px footer).
   Precision wraps the mark in a bordered plate, so the plate AND the img both grow. ---- */
.brand__mark { inline-size: 44px; block-size: 44px; max-inline-size: none; flex: none; }
.brand__mark img { inline-size: 40px; block-size: 40px; }
.drawer__brand .brand__mark, .drawer__head .brand__mark { inline-size: 36px; block-size: 36px; max-inline-size: none; flex: none; }
.drawer__brand .brand__mark img, .drawer__head .brand__mark img { inline-size: 32px; block-size: 32px; }
.footer__mark, .footer__logo { inline-size: 52px; block-size: 52px; }
@media (max-width: 559px) {
  .brand__mark { inline-size: 40px; block-size: 40px; }
  .brand__mark img { inline-size: 36px; block-size: 36px; }
}