/* ==========================================================================
   GTDI Supply — base.css (v2 "Institutional blue", A27)
   Foundations: type, layout, header, buttons, chips, cards, tables, forms, steps, footer.
   Built on Direction A's class API (06_design/direction_A) with the A21 merges and P0 fixes.
   NO color literals in this file: every color, shadow and inline image is a var(--…) from
   tokens.css (checked by theme/tools/check_css.py).
   P0 rules kept: explanatory text uses --fs-body-sm (16px, never 15px); prose is capped with
   --measure (≤ 75 characters per line); every state keeps its border coding + icon + words.
   ========================================================================== */

/* ---------- 1. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
  margin: 0; background: var(--surface); color: var(--ink-900);
  font: 400 var(--fs-body)/1.65 var(--font-sans);
  font-optical-sizing: auto; letter-spacing: -0.006em;
  font-feature-settings: "kern", "calt";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
main { display: block; }
main:focus { outline: none; }
h1, h2, h3, h4 { margin: 0; color: var(--ink-900); font-weight: 600; text-wrap: balance; }
/* Display serif for H1/H2 (Lora → Palatino family → Georgia); H3/H4 stay in Inter for UI clarity. */
h1, h2, .t-display, .t-serif { font-family: var(--font-display); color: var(--navy-900); font-weight: 600; font-optical-sizing: auto; }
.t-display { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.024em; font-weight: 560; }
h1, .t-h1 { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.02em; font-weight: 580; }
h2, .t-h2 { font-size: var(--fs-h2); line-height: 1.16; letter-spacing: -0.016em; font-weight: 580; }
h3, .t-h3 { font-family: var(--font-sans); font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.016em; }
h4, .t-h4 { font-family: var(--font-sans); font-size: var(--fs-h4); line-height: 1.35; letter-spacing: -0.012em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
small, .small { font-size: var(--fs-meta); line-height: 1.5; }
strong, b { font-weight: 600; }
img, svg, video { max-width: 100%; }
img { height: auto; }
::selection { background: var(--blue-100); color: var(--ink-900); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-700); letter-spacing: -0.012em; max-width: var(--measure-lead); }
.measure { max-width: var(--measure); }
.muted { color: var(--ink-600); }
.na { color: var(--ink-500); font-weight: 400; }
.tnum { font-feature-settings: "kern", "tnum"; }
/* Identifiers (K-numbers, quote and request numbers, GTINs): Inter's disambiguation set. */
.id { font-feature-settings: "kern", "ss02"; letter-spacing: .01em; }
/* Identifiers never break at their hyphens: the table scrolls sideways instead (EXA-NX4-XS, GTINs). */
.table td.id { white-space: nowrap; }
.nowrap { white-space: nowrap; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

a { color: var(--navy-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: currentColor; }
a:hover { color: var(--navy-800); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-halo); }
.on-dark :focus-visible { outline-color: var(--on-dark); box-shadow: 0 0 0 2px var(--navy-900); }

.icon { width: 1.25rem; height: 1.25rem; flex: none; display: inline-block; vertical-align: -0.25em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 1rem; height: 1rem; vertical-align: -0.175em; }
.icon--lg { width: 1.5rem; height: 1.5rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- 2. Layout ---------- */
.container { width: min(100% - 2 * var(--page-gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--section-y-tight); }
.section--alt { background: var(--paper-100); }
.section--paper { background: var(--paper-100); }
.section:not(.section--alt):not(.band) + .section:not(.section--alt):not(.band) { padding-top: 0; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
.stack > * + * { margin-top: var(--s-4); }

/* Section head: warm hairline with a brass key segment, eyebrow, serif H2, optional intro. */
.sec-head { position: relative; border-top: 1px solid var(--line); padding-top: var(--s-6); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.sec-head::before { content: ""; position: absolute; left: 0; top: -1px; width: 4rem; height: 2px; background: var(--brass-500); }
.sec-head .overline { margin-bottom: var(--s-3); }
.sec-head > p { margin-top: var(--s-4); color: var(--ink-700); max-width: var(--measure); font-size: var(--fs-lead); line-height: 1.55; }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; }
.sec-split { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--s-6); border-top: 1px solid var(--line); padding-top: var(--s-6); }
.sec-split::before { content: ""; position: absolute; left: 0; top: -1px; width: 4rem; height: 2px; background: var(--brass-500); }
.sec-split > .sec-label { grid-column: 1 / span 4; }
.sec-split > .sec-body { grid-column: 5 / -1; min-width: 0; }
.sec-label h2 { max-width: 14ch; }
.sec-label .sec-intro { margin-top: var(--s-4); color: var(--ink-700); max-width: 36ch; }
@media (max-width: 960px) {
  .sec-split > .sec-label, .sec-split > .sec-body { grid-column: 1 / -1; }
  .sec-label h2 { max-width: none; }
  .sec-split { row-gap: var(--s-5); }
}

/* Eyebrow: tracked Inter capitals in brass. */
.overline { display: block; font: 600 var(--fs-overline)/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-700); }
.overline--muted { color: var(--ink-600); }
.overline--navy { color: var(--navy-700); }
.on-dark .overline, .band .overline { color: var(--brass-300); }

/* ---------- 3. Skip link ---------- */
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--navy-900); color: var(--on-dark); padding: .75rem 1rem; border-radius: var(--r-2); font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--s-3); color: var(--on-dark); }

/* ---------- 4. Header ---------- */
.site-header { position: relative; z-index: 30; background: var(--surface); }
/* Utility bar: navy, contact facts in the same place on every page (WCAG 3.2.6). */
.utility { background: var(--navy-950); color: var(--on-dark-2); font-size: .875rem; line-height: 1.3; }
.utility__row { display: flex; align-items: center; justify-content: space-between; gap: .25rem var(--s-4); min-height: 40px; flex-wrap: wrap; }
.utility__lead { margin: 0; }
.utility__portal { display: inline-flex; align-items: center; gap: .5rem; font: 600 .8125rem/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); }
.utility__portal .icon { width: 1rem; height: 1rem; color: var(--brass-300); }
.utility__help { list-style: none; display: flex; align-items: center; gap: .25rem 1.5rem; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.utility__help li { display: inline-flex; align-items: center; gap: .45rem; min-height: 32px; font-weight: 500; color: var(--on-dark-2); }
.utility__help a { color: var(--on-dark-2); text-decoration: none; }
.utility__help a:hover { color: var(--on-dark); text-decoration: underline; }
.utility__help .icon { color: var(--brass-300); width: 1rem; height: 1rem; }

.masthead { background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.masthead__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-5); min-height: 92px; }
.brand { display: inline-flex; align-items: center; gap: 1.125rem; text-decoration: none; color: var(--navy-900); flex: none; padding-block: .75rem; }
.brand .wordmark { height: 52px; width: auto; display: block; }
.brand__desc { display: block; max-width: 9.5rem; padding-left: 1.125rem; border-left: 1px solid var(--line); font: 500 .8125rem/1.35 var(--font-sans); color: var(--ink-600); letter-spacing: .01em; }
.brand:hover .brand__desc { color: var(--ink-800); }
.wordmark .wm-tile { fill: var(--navy-900); }
.wordmark .wm-tile-rule { fill: none; stroke: var(--brass-300); }
.wordmark .wm-g { fill: var(--on-dark); }
.wordmark .wm-gtdi { fill: var(--navy-900); }
.wordmark .wm-rule { fill: var(--brass-500); }
.wordmark .wm-supply { fill: var(--navy-900); }
.wordmark--inverse .wm-tile { fill: var(--navy-800); }
.wordmark--inverse .wm-gtdi, .wordmark--inverse .wm-supply { fill: var(--on-dark); }
.wordmark--inverse .wm-rule { fill: var(--brass-300); }
.masthead__actions { display: flex; align-items: center; gap: .625rem; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.masthead__login { border-color: transparent; }
.masthead__login:hover { border-color: var(--line-strong); }
.masthead__hello { font-size: var(--fs-meta); color: var(--ink-700); }
.site-header .menu-toggle { display: none; }
.menu-toggle .i-shut { display: none; }
.menu-toggle[aria-expanded="true"] .i-open { display: none; }
.menu-toggle[aria-expanded="true"] .i-shut { display: inline-block; }

/* Nav row: primary navigation + B's gate signpost (public) or the draft indicator (portal) */
.navrow { border-top: 1px solid var(--line-soft); background: var(--surface); }
.navrow__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--s-5); min-height: 54px; }
.nav__list { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 0 .375rem; margin-left: -.75rem; }
.nav__link { display: inline-flex; align-items: center; min-height: 52px; padding: 0 .75rem; color: var(--ink-800); text-decoration: none; font: 500 .9375rem/1.2 var(--font-sans); letter-spacing: -0.004em; position: relative; white-space: nowrap; }
.nav__link:hover { color: var(--navy-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; }
.nav__link[aria-current] { color: var(--navy-900); font-weight: 600; }
.nav__link[aria-current]::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: -1px; height: 3px; background: var(--brass-500); }
.gate-signpost { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 0 auto; padding: .3rem .25rem .3rem 0; color: var(--ink-700); font: 500 .875rem/1.3 var(--font-sans); }
.gate-signpost .icon { width: 1.75rem; height: 1.75rem; padding: .375rem; border-radius: 50%; background: var(--blue-50); color: var(--navy-900); }
.draft-indicator { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; min-height: 40px; padding: .375rem .875rem; border: 1px dashed var(--line-strong); border-radius: var(--r-2); background: var(--surface); color: var(--ink-900); font: 600 .875rem/1.3 var(--font-sans); text-decoration: none; }
.draft-indicator:hover { border-color: var(--navy-700); color: var(--navy-700); text-decoration: underline; }
.draft-indicator .icon { color: var(--navy-700); }
.navrow__extra { display: none; }

/* Collapse: public header below 900px, portal header below 1100px (six portal items + draft). */
@media (max-width: 899px) {
  .js .site-header--public .menu-toggle { display: inline-flex; margin-left: auto; }
  .js .site-header--public .masthead__actions { display: none; }
  .js .site-header--public .navrow { display: none; }
  .js .site-header--public .navrow.is-open { display: block; }
}
@media (max-width: 1099px) {
  .js .site-header--portal .menu-toggle { display: inline-flex; margin-left: auto; }
  .js .site-header--portal .masthead__actions { display: none; }
  .js .site-header--portal .navrow { display: none; }
  .js .site-header--portal .navrow.is-open { display: block; }
}
.js .navrow.is-open { border-top: 1px solid var(--line); box-shadow: var(--shadow-2); }
.js .navrow.is-open .navrow__inner { flex-direction: column; align-items: stretch; gap: 0; padding-block: .5rem 1.5rem; }
.js .navrow.is-open .nav__list { flex-direction: column; align-items: stretch; margin: 0; }
.js .navrow.is-open .nav__link { display: flex; width: 100%; min-height: 54px; padding: 0; font-size: 1.0625rem; border-bottom: 1px solid var(--line-soft); }
.js .navrow.is-open .nav__link[aria-current]::after { left: auto; right: 0; top: 50%; bottom: auto; width: .5rem; height: .5rem; border-radius: 50%; transform: translateY(-50%); }
.js .navrow.is-open .gate-signpost, .js .navrow.is-open .draft-indicator { margin: 1.125rem 0 0; align-self: flex-start; }
.js .navrow.is-open .navrow__extra { display: grid; gap: .625rem; padding-top: 1.125rem; }
/* Without JavaScript the navigation stays visible and wraps (no hidden content). */
@media (max-width: 899px) { html:not(.js) .navrow__extra { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: .5rem 1rem; } html:not(.js) .site-header--public .masthead__actions { display: none; } }

@media (max-width: 1080px) { .brand__desc { display: none; } }
@media (max-width: 640px) {
  .masthead__row { min-height: 70px; gap: var(--s-3); }
  .brand .wordmark { height: 42px; }
  .brand { padding-block: .625rem; }
  .utility__lead { display: none; }
  .utility__help { margin-inline: 0; justify-content: flex-start; width: 100%; gap: 0 1rem; }
  .utility__help li { min-height: 30px; }
}

/* Signed-in context strip (portal) */
.context { background: var(--paper-100); border-bottom: 1px solid var(--line-soft); font-size: var(--fs-meta); line-height: 1.45; }
.context__row { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1.25rem; padding-block: .75rem; }
.context__who { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .375rem .75rem; margin: 0; color: var(--ink-800); }
.context__rep { margin: 0 0 0 auto; color: var(--ink-700); }
.context__rep a { font-weight: 600; }
@media (max-width: 760px) { .context__rep { margin-left: 0; } .context__row { padding-block: .5rem; gap: .25rem 1rem; } }

/* ---------- 5. Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .75rem 1.375rem; border: 1.5px solid transparent; border-radius: var(--r-2); font: 600 1rem/1.2 var(--font-sans); letter-spacing: -0.006em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn:hover { text-decoration: none; }
.btn .icon { width: 1.125rem; height: 1.125rem; }
.btn--primary { background: var(--navy-700); color: var(--on-dark); box-shadow: var(--shadow-1); }
.btn--primary:hover { background: var(--navy-800); color: var(--on-dark); box-shadow: var(--shadow-2); }
.btn--secondary { background: var(--surface); color: var(--navy-700); border-color: var(--navy-700); }
.btn--secondary:hover { background: var(--blue-50); color: var(--navy-800); border-color: var(--navy-800); }
.btn--quiet { background: transparent; color: var(--ink-900); border-color: var(--line-strong); }
.btn--quiet:hover { border-color: var(--ink-700); background: var(--paper-100); color: var(--ink-900); }
.btn--danger { background: var(--surface); color: var(--err-fg); border-color: var(--err-line); }
.btn--danger:hover { background: var(--err-bg); color: var(--err-fg); }
.btn--light { background: var(--surface); color: var(--navy-900); }
.btn--light:hover { background: var(--blue-100); color: var(--navy-900); }
.btn--outline-light { background: transparent; color: var(--on-dark); border-color: var(--on-dark-outline); }
.btn--outline-light:hover { background: var(--on-dark-hover); color: var(--on-dark); }
.btn--sm { min-height: 42px; padding: .5rem 1rem; font-size: .9375rem; }
.btn--lg { min-height: 56px; padding: .875rem 1.75rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn[aria-busy="true"], .btn.is-busy { cursor: progress; opacity: .85; }
.btn__sub { font-weight: 400; font-size: .875rem; opacity: .9; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
@media (max-width: 520px) { .btn-row--stack { flex-direction: column; align-items: stretch; } .btn-row--stack .btn { width: 100%; white-space: normal; } }
.btn-link { display: inline; padding: 0; border: 0; background: none; color: var(--navy-700); font: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; cursor: pointer; min-height: 24px; }
.btn-link:hover { color: var(--navy-800); text-decoration-thickness: 2px; }

/* Inline so a wrapped label keeps its arrow after the last word (inline-flex parked it at the far edge). */
.link-arrow { display: inline; font-weight: 600; text-decoration: none; line-height: 1.5; }
.link-arrow .icon { display: inline-block; vertical-align: -.2em; margin-left: .4rem; transition: transform .15s; width: 1.125rem; height: 1.125rem; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .icon { transform: translateX(3px); }
.link-ext { display: inline; font-weight: 600; }
.link-ext .icon { display: inline-block; vertical-align: -.15em; width: 1rem; height: 1rem; }
.link-ext .icon:first-child { margin-right: .3rem; }
.link-ext .icon:last-child { margin-left: .3rem; }

/* ---------- 6. Labels, chips, placeholders ---------- */
.tag { display: inline-flex; align-items: center; gap: .375rem; font: 600 .8125rem/1.25 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-600); }
.tag .icon { width: .95rem; height: .95rem; }
.tag--box { padding: .2rem .55rem; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--surface); }
/* "Representative product" — a label, not a placeholder: solid hairline on paper. */
.tag--dashed { padding: .2rem .55rem; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--paper-100); color: var(--ink-700); }
.tag--navy { color: var(--navy-700); }
/* Direction C "Differs" text tag (pack-out rows whose gloves per case differ) */
.tag--differs { margin-left: .375rem; padding: .05rem .45rem; border: 1px solid var(--ink-700); border-radius: 3px; background: var(--surface); color: var(--ink-900); font-size: var(--fs-overline); letter-spacing: .04em; }

/* State chips: A's icon + text chip with B's grayscale-safe border coding (text always carries the meaning) */
.chip { --chip-fg: var(--ink-700); --chip-bg: var(--surface); --chip-line: var(--line-strong);
  display: inline-flex; align-items: center; gap: .4rem; min-height: 28px; padding: .25rem .65rem .25rem .5rem; border: 1px solid var(--chip-line); border-radius: var(--r-1); background: var(--chip-bg); color: var(--chip-fg); font: 600 var(--fs-label)/1.25 var(--font-sans); letter-spacing: -0.004em; text-decoration: none; vertical-align: middle; white-space: nowrap; max-width: 100%; }
.chip .icon { width: 1rem; height: 1rem; vertical-align: 0; flex: none; }
.chip > span { min-width: 0; }
/* Phones: a label longer than its column wraps inside the chip border instead of running past it (320 px). */
@media (max-width: 480px) { .chip > span { white-space: normal; } }
.chip--firm { --chip-fg: var(--firm-fg); --chip-bg: var(--firm-bg); --chip-line: var(--firm-line); border-width: 2px; border-style: solid; padding-block: .1875rem; }
.chip--ind  { --chip-fg: var(--ind-fg);  --chip-bg: var(--ind-bg);  --chip-line: var(--ind-line); border-width: 2px; border-style: dashed; padding-block: .1875rem; white-space: normal; }
.chip--exp  { --chip-fg: var(--exp-fg);  --chip-bg: var(--exp-bg);  --chip-line: var(--exp-line);
  background-image: repeating-linear-gradient(135deg, var(--hatch-exp) 0 1.5px, transparent 1.5px 6px); }
.chip--req  { --chip-fg: var(--req-fg);  --chip-bg: var(--req-bg);  --chip-line: var(--req-line); border-width: 2px; border-style: dotted; padding-block: .1875rem; }
.chip--gate { --chip-fg: var(--gate-fg); --chip-bg: var(--gate-bg); --chip-line: var(--gate-line); border-width: 3px; border-style: double; padding-block: .125rem; white-space: normal; }
.chip--neutral { --chip-fg: var(--ink-800); --chip-bg: var(--surface); --chip-line: var(--line-strong); }
.chip--draft { --chip-fg: var(--ink-800); --chip-bg: var(--surface); --chip-line: var(--line-strong); border-style: dashed; }
.chip--accepted { --chip-fg: var(--firm-fg); --chip-bg: var(--surface); --chip-line: var(--firm-line); }
.chip--navy { --chip-fg: var(--on-dark); --chip-bg: var(--navy-900); --chip-line: var(--navy-900); }
.chip--sm { min-height: 24px; font-size: .8125rem; padding: .125rem .5rem .125rem .375rem; }
.chip--sm.chip--firm, .chip--sm.chip--ind, .chip--sm.chip--req { padding-block: .0625rem; }
.chip--wrap { white-space: normal; }
a.chip:hover { text-decoration: underline; }

/* Price-state legend */
.legend-wrap__title { font-family: var(--font-sans); font-size: 1.0625rem; letter-spacing: -0.01em; margin-bottom: .875rem; }
/* Legend: chip above its meaning when the legend itself is narrow (phone, sidebar); chip | meaning in one
   aligned column when there is room. Sized by container query, so the same markup works in any column. */
.legend { container-type: inline-size; display: grid; gap: 1rem; margin: 0; }
.legend > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .375rem; align-items: start; }
.legend dt { margin: 0; }
.legend dd { margin: 0; font-size: var(--fs-body-sm); color: var(--ink-700); line-height: 1.5; max-width: var(--measure); }
@container (min-width: 38rem) {
  .legend > div { grid-template-columns: 19.5rem minmax(0, 1fr); gap: .25rem 1.25rem; }
  .legend dd { padding-top: .2rem; }
}
.legend-wrap { container-type: inline-size; }
.legend--grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem 2rem; }
@container (min-width: 40rem) { .legend--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 38rem) { .legend--grid > div { grid-template-columns: minmax(0, 1fr); gap: .4rem; } .legend--grid dd { padding-top: 0; } }

/* Inline placeholder for owner-supplied facts: [BUSINESS ADDRESS] etc. */
.ph { background: var(--ph-bg); border: 1px dashed var(--ph-line); border-radius: 3px; padding: 0 .3em; color: var(--ink-800); font-weight: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.on-dark .ph { background: var(--on-dark-ph-bg); border-color: var(--on-dark-ph-line); color: var(--on-dark); }
.on-dark .wp-block-button:not(.is-style-secondary) .ph, .on-dark .btn--light .ph { background: var(--ph-bg); border-color: var(--ph-line); color: var(--ink-800); }

/* Media placeholder — clearly labelled, never a fake photo (D-002). v2 uses renders (see components §R);
   this hatched box remains for anything without a render. */
.ph-media { position: relative; display: grid; place-items: center; overflow: hidden; background-color: var(--paper-100); background-image: repeating-linear-gradient(135deg, var(--hatch-ph) 0 1px, transparent 1px 11px); border: 1px solid var(--line-soft); border-radius: var(--r-2); color: var(--ink-700); aspect-ratio: 4 / 3; }
.ph-media__label { overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: .45rem; max-width: calc(100% - 1rem); padding: .375rem .625rem; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; font: 500 .8125rem/1.35 var(--font-sans); color: var(--ink-700); text-align: left; }
.ph-media__label .icon { width: 1rem; height: 1rem; color: var(--ink-600); }
img.media { display: block; width: 100%; height: auto; border-radius: var(--r-2); }

/* ---------- 7. Cards, panels, notes, notices ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-1); min-width: 0; }
.card__pad, .card--pad { padding: clamp(1.25rem, 1rem + 1vw, 1.875rem); }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; padding: 1.125rem clamp(1.25rem, 1rem + 1vw, 1.875rem); border-bottom: 1px solid var(--line-soft); }
.card__head h2, .card__head h3 { font-family: var(--font-sans); color: var(--ink-900); font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.014em; font-weight: 600; }
.card__head .link-arrow { font-size: .9375rem; }
.card__meta { font-size: var(--fs-meta); color: var(--ink-600); }
.card__note { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--ink-700); }
.card__body { padding: 1.25rem clamp(1.25rem, 1rem + 1vw, 1.875rem) 1.5rem; }
.card__subhead { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-600); padding: 1.25rem clamp(1.25rem, 1rem + 1vw, 1.875rem) .25rem; border-top: 1px solid var(--line-soft); }
.card__subhead--flush { padding: 0; border: 0; margin-bottom: .75rem; }
.card__empty { margin: 0; padding: 1rem clamp(1.25rem, 1rem + 1vw, 1.875rem) 1.25rem; color: var(--ink-700); font-size: var(--fs-body-sm); }
.card__foot { display: flex; gap: .625rem; align-items: flex-start; margin: 0; padding: .9375rem clamp(1.25rem, 1rem + 1vw, 1.875rem); background: var(--paper-100); border-top: 1px solid var(--line-soft); font-size: var(--fs-body-sm); color: var(--ink-700); border-radius: 0 0 var(--r-3) var(--r-3); }
.card__foot .icon { color: var(--navy-700); margin-top: .15rem; }
.panel { background: var(--paper-100); border: 1px solid var(--line-soft); border-radius: var(--r-3); padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.panel--info { background: var(--blue-50); border-color: var(--blue-100); }
.panel h2, .panel h3 { font-family: var(--font-sans); color: var(--ink-900); font-size: 1.1875rem; letter-spacing: -0.012em; margin-bottom: .625rem; font-weight: 600; }
.note { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--ink-700); }
.note .icon { color: var(--navy-700); margin-top: .1rem; }
.note > span { max-width: var(--measure); }

.notice { display: flex; gap: .75rem; align-items: flex-start; margin: 0 0 var(--s-5); padding: .9375rem 1.125rem; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-2); background: var(--surface); font-size: var(--fs-body-sm); line-height: 1.5; color: var(--ink-900); }
.notice > .icon { margin-top: .1rem; }
.notice__body > * + * { margin-top: .375rem; }
.notice__body p { margin: 0; max-width: var(--measure); }
.notice--success { border-color: var(--firm-line); background: var(--firm-bg); }
.notice--success > .icon { color: var(--firm-fg); }
.notice--info { border-color: var(--blue-100); border-left-color: var(--navy-700); background: var(--blue-50); }
.notice--info > .icon { color: var(--navy-700); }
.notice--warning { border-color: var(--ind-line); background: var(--ind-bg); }
.notice--warning > .icon { color: var(--ind-fg); }
.notice--error { border-color: var(--err-line); background: var(--err-bg); }
.notice--error > .icon { color: var(--err-fg); }
.notice--error p { color: var(--err-fg); font-weight: 600; }

/* Definition list as spec rows (catalog record) */
.spec { margin: 0; }
.spec > div { display: grid; grid-template-columns: minmax(7.5rem, 38%) 1fr; gap: 1rem; padding: .625rem 0; border-top: 1px solid var(--line-cool); }
.spec > div:first-child { border-top: 0; }
.spec dt { color: var(--ink-600); font-size: var(--fs-meta); line-height: 1.45; }
.spec dd { margin: 0; font-size: var(--fs-body-sm); line-height: 1.45; color: var(--ink-900); font-weight: 500; }
.spec dd .muted { font-weight: 400; }

/* ---------- 8. Tables (booktabs: navy top/bottom rules, cool hairline rows) ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); line-height: 1.45; }
.table caption { text-align: left; caption-side: top; padding-bottom: .75rem; font: 600 1.0625rem/1.35 var(--font-sans); color: var(--ink-900); }
.table thead th { text-align: left; vertical-align: bottom; padding: .7rem .875rem; font: 600 .8125rem/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-600); border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule); }
.table tbody th, .table tbody td { text-align: left; vertical-align: top; padding: .8125rem .875rem; border-bottom: 1px solid var(--line-cool); }
.table tbody th { font-weight: 500; color: var(--ink-900); }
.table tbody:last-child tr:last-child > * { border-bottom: 2px solid var(--rule); }
.table .num { text-align: right; font-feature-settings: "kern", "tnum"; }
.table thead th.num { text-align: right; }
.table tr > :first-child { padding-left: 0; }
.table tr > :last-child { padding-right: 0; }
.table tbody tr:hover > * { background: var(--surface-hover); }
.table .sub { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--ink-600); font-weight: 400; }

/* Wide tables on small screens: horizontal scroll, sticky first column, edge cue and a hint */
.scroller { position: relative; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--fade-solid) 30%, var(--fade-clear)) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--fade-solid) 30%, var(--fade-clear)) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), var(--scroll-shadow-clear)) right center / .875rem 100% no-repeat scroll;
}
.scroller:focus-visible { outline-offset: 4px; }
.scroll-hint { display: none; align-items: center; gap: .375rem; margin: 0 0 .5rem; font-size: var(--fs-body-sm); color: var(--ink-700); }
.table-note { margin: 0 0 .75rem; max-width: var(--measure); font-size: var(--fs-body-sm); line-height: 1.5; color: var(--ink-700); }
.table--sticky th:first-child, .table--sticky td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: inset -1px 0 0 var(--line-cool); }
@media (max-width: 760px) { .scroll-hint { display: flex; } }

/* ---------- 9. Forms ---------- */
.form-group { border: 0; margin: 0 0 var(--s-7); padding: 0; min-width: 0; }
.form-group > legend { display: flex; align-items: center; gap: .875rem; width: 100%; padding: 0 0 .875rem; margin-bottom: var(--s-5); border-bottom: 1px solid var(--line); font: 580 clamp(1.375rem, 1.2rem + .5vw, 1.625rem)/1.25 var(--font-display); letter-spacing: -0.012em; color: var(--navy-900); }
.form-group > legend .n { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--brass-100); color: var(--brass-700); font: 600 .8125rem/1 var(--font-sans); letter-spacing: .02em; font-feature-settings: "tnum"; flex: none; }
.field { display: grid; gap: .4rem; margin: 0 0 var(--s-5); min-width: 0; border: 0; padding: 0; }
.field:last-child { margin-bottom: 0; }
fieldset.field > legend.label { padding: 0; margin-bottom: .375rem; }
.label { font: 600 1rem/1.35 var(--font-sans); color: var(--ink-900); letter-spacing: -0.008em; }
.label .opt { font-weight: 400; color: var(--ink-600); }
.hint { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--ink-600); margin: 0; max-width: var(--measure); }
.input, .select, .textarea { width: 100%; min-height: 50px; padding: .75rem .9375rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); color: var(--ink-900); font: 400 1.0625rem/1.4 var(--font-sans); letter-spacing: -0.006em; transition: border-color .15s, box-shadow .15s; }
.input::placeholder, .textarea::placeholder { color: var(--ink-500); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-600); }
.input:focus, .select:focus, .textarea:focus, .input:focus-visible, .select:focus-visible, .textarea:focus-visible, .input:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; box-shadow: 0 0 0 2px var(--focus-halo); border-color: var(--ink-900); }
.textarea { min-height: 7.5rem; resize: vertical; }
.textarea--short { min-height: 4.5rem; }
.select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; background-image: var(--icon-select); background-repeat: no-repeat; background-position: right .875rem center; background-size: 1.125rem; }
.select--md { max-width: 24rem; }
.input--narrow { max-width: 14rem; }
.input--zip { max-width: 9rem; }
.input--phone { max-width: 16rem; }
.input--date { max-width: 14rem; }
.input--qty { max-width: 6rem; text-align: right; font-feature-settings: "kern", "tnum"; }
.readonly { margin: 0; padding: .5rem 0; font-weight: 500; }
.field--error .input, .field--error .select, .field--error .textarea, .input[aria-invalid="true"] { border-color: var(--err-line); border-width: 2px; }
.field-error { display: flex; align-items: flex-start; gap: .4rem; margin: 0; color: var(--err-fg); font-weight: 600; font-size: var(--fs-body-sm); line-height: 1.4; }
.field-error[hidden] { display: none; }
.field-error .icon { width: 1.05rem; height: 1.05rem; margin-top: .1rem; }
.field-ok { display: flex; align-items: center; gap: .35rem; margin: 0; color: var(--ok-fg); font-size: var(--fs-meta); font-weight: 600; }
.field-ok[hidden] { display: none; }
.field-ok .icon { width: 1rem; height: 1rem; }
.counter { margin: 0; font-size: var(--fs-meta); color: var(--ink-600); }
.form-rule { display: flex; gap: .625rem; align-items: center; margin: 0 0 var(--s-6); padding: .9375rem 1.125rem; border-left: 3px solid var(--navy-700); border-radius: 0 var(--r-2) var(--r-2) 0; background: var(--blue-50); font-size: var(--fs-body-sm); color: var(--ink-800); }
.form-rule .icon { color: var(--navy-700); }
.form-privacy { display: flex; gap: .625rem; align-items: flex-start; margin: 0 0 1.5rem; padding: 1rem 1.125rem; border: 1px solid var(--line-soft); border-radius: var(--r-2); background: var(--paper-100); font-size: var(--fs-body-sm); line-height: 1.5; color: var(--ink-800); }
.form-privacy .icon { color: var(--navy-700); margin-top: .15rem; }
.form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form-note { margin: 0 0 var(--s-5); }
.pw-toggle { justify-self: start; }
.conditional-help .note--conditional { margin: .5rem 0 0; padding: .75rem .875rem; border-left: 3px solid var(--navy-700); background: var(--blue-50); }
.conditional-help .note--conditional[hidden] { display: none; }

/* Checkbox chips and radios: real inputs, visible check mark, selected state not shown by color alone */
.checkchips { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: .25rem; }
.checkchip { position: relative; display: inline-flex; align-items: center; gap: .625rem; min-height: 46px; padding: .5rem 1rem .5rem .8125rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); font: 500 1rem/1.3 var(--font-sans); color: var(--ink-900); cursor: pointer; transition: border-color .15s, background-color .15s; }
.checkchip:hover { border-color: var(--ink-600); }
.checkchip input, .checkline input, .opt input[type="checkbox"] { appearance: none; -webkit-appearance: none; margin: 0; width: 1.25rem; height: 1.25rem; border: 1.5px solid var(--line-strong); border-radius: 4px; background: var(--surface); display: grid; place-content: center; flex: none; cursor: pointer; }
.checkchip input::before, .checkline input::before, .opt input[type="checkbox"]::before { content: ""; width: .75rem; height: .75rem; clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 21%, 86% 7%, 39% 72%); background: var(--on-dark); transform: scale(0); }
.checkchip input:checked, .checkline input:checked, .opt input[type="checkbox"]:checked { background: var(--navy-700); border-color: var(--navy-700); }
.checkchip input:checked::before, .checkline input:checked::before, .opt input[type="checkbox"]:checked::before { transform: scale(1); }
.checkchip:has(input:checked) { border-color: var(--navy-700); background: var(--blue-50); }
.checkchip input:focus-visible { outline: none; box-shadow: none; }
.checkchip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-halo); }
.checkline { display: inline-flex; align-items: flex-start; gap: .625rem; min-height: 44px; padding-top: .625rem; font-weight: 500; cursor: pointer; }
.checkline input { margin-top: .0625rem; }
.checkline--sm { min-height: 32px; padding-top: .25rem; font-size: .9375rem; }
.radios { display: grid; gap: .375rem; margin-top: .25rem; }
.radio, .opt { display: flex; align-items: center; gap: .625rem; min-height: 40px; font-size: 1rem; color: var(--ink-900); cursor: pointer; }
.radio input, .opt input[type="radio"] { appearance: none; -webkit-appearance: none; margin: 0; width: 1.25rem; height: 1.25rem; flex: none; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); display: grid; place-content: center; cursor: pointer; }
.radio input::before, .opt input[type="radio"]::before { content: ""; width: .625rem; height: .625rem; border-radius: 50%; background: var(--navy-700); transform: scale(0); }
.radio input:checked, .opt input[type="radio"]:checked { border-color: var(--navy-700); }
.radio input:checked::before, .opt input[type="radio"]:checked::before { transform: scale(1); }
.hint--after { margin-top: .5rem; }
.label .opt { display: inline; min-height: 0; font-size: inherit; cursor: inherit; }

.error-summary { border: 2px solid var(--err-line); border-left-width: 6px; border-radius: var(--r-3); background: var(--err-bg); padding: 1.25rem 1.5rem; margin-bottom: var(--s-6); }
.error-summary[hidden] { display: none; }
.error-summary__title { font-family: var(--font-sans); font-size: 1.1875rem; letter-spacing: -0.012em; color: var(--err-fg); display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.error-summary__list { list-style: none; display: grid; gap: .25rem; }
.error-summary a { color: var(--err-fg); font-weight: 600; }

/* ---------- 10. Steps: numbered nodes on a connecting line (a step diagram) ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); counter-reset: step; }
.step { position: relative; padding-top: 4.5rem; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border: 1.5px solid var(--navy-900); border-radius: 50%; background: var(--surface); font: 600 1.0625rem/1 var(--font-display); color: var(--navy-900); font-feature-settings: "lnum", "tnum"; z-index: 1; box-shadow: 0 0 0 6px var(--surface); }
.step::after { content: ""; position: absolute; top: 1.625rem; left: 3.25rem; right: calc(-1 * var(--grid-gap)); height: 1px; background: repeating-linear-gradient(to right, var(--line-strong) 0 6px, transparent 6px 11px); }
.step:last-child::after { display: none; }
.step:first-child::before { background: var(--navy-900); color: var(--on-dark); }
.step h3 { font-size: 1.125rem; line-height: 1.35; margin-bottom: .5rem; }
.step p { color: var(--ink-700); font-size: var(--fs-body-sm); line-height: 1.55; margin: 0; }
.step--done::before { content: ""; background: var(--navy-900) var(--icon-step-done) center / 1.25rem no-repeat; }
.section--alt .step::before { box-shadow: 0 0 0 6px var(--paper-100); }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { padding: 0 0 2rem 4.5rem; min-height: 5rem; }
  .step::after { top: 3.25rem; bottom: 0; left: 1.625rem; right: auto; width: 1px; height: auto; background: repeating-linear-gradient(to bottom, var(--line-strong) 0 6px, transparent 6px 11px); }
  .step:last-child { padding-bottom: 0; }
}
.steps--compact { grid-template-columns: 1fr; gap: 0; }
.steps--compact .step { padding: 0 0 1.5rem 3.5rem; min-height: 3.5rem; }
.steps--compact .step::before { width: 2.25rem; height: 2.25rem; font-size: .9375rem; box-shadow: none; }
.steps--compact .step::after { top: 2.25rem; bottom: 0; left: 1.125rem; right: auto; width: 1px; height: auto; background: repeating-linear-gradient(to bottom, var(--line-strong) 0 5px, transparent 5px 9px); }
.steps--compact .step:last-child { padding-bottom: 0; }
.steps--compact .step h3 { font-size: 1rem; margin-bottom: .125rem; }

/* ---------- 11. Breadcrumb ---------- */
.crumbs { padding-block: 1.25rem .25rem; font-size: var(--fs-meta); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.crumbs li { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-600); }
.crumbs li + li::before { content: "\203A"; color: var(--ink-500); font-size: 1.1em; line-height: 1; }
.crumbs a { color: var(--ink-700); text-decoration-color: var(--line-strong); display: inline-flex; min-height: 24px; align-items: center; gap: .25rem; }
.crumbs a:hover { color: var(--navy-700); text-decoration-color: currentColor; }
.crumbs [aria-current="page"] { color: var(--ink-900); font-weight: 500; }
.crumbs__back { display: none; width: 1rem; height: 1rem; }
/* Phones: only the parent, as a back link (keeps private prices in the first viewport — P0 #1) */
@media (max-width: 640px) {
  .crumbs { padding-block: .75rem 0; }
  .crumbs li { display: none; }
  .crumbs li.crumbs__parent { display: inline-flex; }
  .crumbs li.crumbs__parent::before { display: none; }
  .crumbs__back { display: inline-block; }
}

/* ---------- 12. Person / representative ---------- */
.person { display: grid; grid-template-columns: auto 1fr; gap: .125rem 1rem; align-items: center; }
/* Avatar: a monogram disc until a consented photo exists (never a stock face). */
.person__avatar { grid-row: span 2; width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--navy-900); border: 2px solid var(--brass-300); color: var(--on-dark); box-shadow: 0 0 0 3px var(--surface); }
.person__avatar .icon { width: 1.5rem; height: 1.5rem; }
.person__name { font-weight: 600; line-height: 1.3; }
.person__role { font-size: var(--fs-meta); color: var(--ink-600); line-height: 1.3; }

/* ---------- 13. Footer ---------- */
.footer { background: var(--navy-950); color: var(--on-dark-2); font-size: .9375rem; line-height: 1.55; position: relative; }
.footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(to right, var(--brass-300), var(--brass-500) 40%, var(--navy-800)); }
.footer a { color: var(--on-dark-2); text-decoration-color: var(--on-dark-underline); }
.footer a:hover { color: var(--on-dark); text-decoration-color: var(--on-dark); }
.footer__creds { border-bottom: 1px solid var(--on-dark-line-soft); padding-block: 2rem 1.75rem; }
.creds { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem var(--grid-gap); }
.creds__item { display: flex; align-items: flex-start; gap: .75rem; color: var(--on-dark-2); font-size: .9375rem; line-height: 1.45; }
.creds__item .icon { width: 2.25rem; height: 2.25rem; padding: .5rem; border-radius: 50%; background: var(--on-dark-tile); color: var(--brass-300); margin-top: -.3rem; }
.footer__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-7) var(--grid-gap); padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--s-7); }
.footer__brand { grid-column: 1 / span 4; }
.footer__home { display: inline-block; }
.footer__brand .wordmark { height: 60px; width: auto; display: block; }
.footer__desc { margin: .875rem 0 0; color: var(--on-dark-3); font-size: .875rem; letter-spacing: .02em; }
.footer__tagline { margin: 1.5rem 0 1.5rem; color: var(--on-dark); font: italic 500 1.3125rem/1.35 var(--font-display); letter-spacing: -0.008em; }
.footer__contact { display: grid; gap: .5rem; font-style: normal; }
.footer__contact > * { display: flex; gap: .625rem; align-items: flex-start; margin: 0; }
.footer__contact .icon { color: var(--brass-300); margin-top: .15rem; width: 1.05rem; height: 1.05rem; }
.footer__cols { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-6) var(--grid-gap); }
.footer h2 { font: 600 .8125rem/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brass-300); margin-bottom: 1rem; }
.footer ul { list-style: none; display: grid; gap: .25rem; }
.footer__link { display: inline-flex; min-height: 32px; align-items: center; text-decoration: none; }
.footer__link:hover { text-decoration: underline; }
.footer__legal { border-top: 1px solid var(--on-dark-line-soft); padding-block: 1.5rem 2rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; color: var(--on-dark-3); font-size: .875rem; }
.footer__legal p { margin: 0; }
@media (max-width: 1180px) { .footer__brand, .footer__cols { grid-column: 1 / -1; } .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand .wordmark { height: 52px; } }
@media (max-width: 520px) { .creds { grid-template-columns: 1fr; } }

/* ---------- 14. Utilities ---------- */
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.mb-0 { margin-bottom: 0; } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }
.divider { border: 0; border-top: 1px solid var(--line-soft); margin: var(--s-5) 0; }
[hidden] { display: none !important; }
/* Form honeypot (gtdi_form honeypot_html): off-screen for people, still present for bots */
.gtdi-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 15. Print: chips keep their border coding; links show their targets ---------- */
@media print {
  .utility, .navrow, .menu-toggle, .masthead__actions, .skip, .footer__cols, .footer__creds, .proto-bar, .qb__form button, .scroll-hint { display: none !important; }
  body { font-size: 11pt; }
  .chip { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .card, .panel { break-inside: avoid; box-shadow: none; }
  a[href^="http"]:not(.btn)::after { content: " (" attr(href) ")"; font-size: .8em; color: var(--ink-600); }
}