/* ============================================================
 * Advance Supplies Company — Website UI Kit styles
 * Source: Advance Supplies Design System v2 / ui_kits/website/styles.css
 * [PHP-PORT] additions appended at end of file.
 * ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Phase 3M-2M-2: pin text scaling so Android Chrome (and iOS Safari) don't
   auto-inflate body text. No device/user-agent targeting — this keeps mobile
   typography at the designed size and reduces the "bulkier on Android" effect. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink-700);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; padding: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* --- dropdown state (JS-controlled) --- */
.wn-panel { display: none !important; }
.wn-drop--open .wn-panel { display: block !important; }
.wn-chev { opacity: .6; }

/* Skip-link: visually hidden until focused; first focusable element in body. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: #fff;
  color: var(--ink-900);
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: underline;
  border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; outline: 2px solid var(--steel-600); outline-offset: 2px; }

/* Mobile drawer accordion (Materials / Services) — reuses .wn-drawer surface. */
.wn-drawer-group { display: block; }
.wn-drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 16px 0;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}
.wn-drawer-chev {
  flex-shrink: 0;
  transition: transform .2s var(--ease-out);
  opacity: .7;
}
.wn-drawer-toggle[aria-expanded="true"] .wn-drawer-chev { transform: rotate(180deg); }
.wn-drawer-sub {
  display: flex;
  flex-direction: column;
  padding: 4px 0 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.wn-drawer-sub[hidden] { display: none; }
.wn-drawer-sub a {
  color: rgba(255,255,255,.78) !important;
  text-decoration: none;
  padding: 10px 0 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  border-bottom: none !important;
}
.wn-drawer-sub a:hover,
.wn-drawer-sub a:focus { color: #fff !important; }

/* --- burger (hidden desktop) --- */
.wn-burger { display: none; width: 36px; height: 36px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.wn-burger span { display: block; width: 22px; height: 2px; background: #fff; }

/* --- mobile drawer (hidden on desktop) --- */
.wn-drawer { display: none !important; }
/* Phase 3M-2F-2: burger/drawer nav up to 1279px; full desktop navbar only at
   1280px+ (where the brand + 6 links + phone + Request Quote fit without
   cramping and the full legal name "Advance Supplies (M) Sdn Bhd" stays on one
   line). Was max-width:959px, which left a 960-1279px dead zone where the
   desktop bar overflowed. The matching JS width constant in assets/js/app.js
   (window.innerWidth < 1280) must stay in sync. */
@media (max-width: 1279px) {
  .wn-burger { display: flex !important; order: 3; margin-left: auto; }
  .wn-links { display: none !important; }
  .wn-cta { display: none !important; }
  .wn-drawer {
    display: flex !important; flex-direction: column;
    position: fixed; inset: 72px 0 0 0;
    background: var(--ink-900); padding: 24px;
    transform: translateX(100%); transition: transform .3s var(--ease-out);
    z-index: 40;
  }
  .wn-drawer--open { transform: none; }
  .wn-drawer a { color: #fff; text-decoration: none; padding: 16px 0; font-size: 18px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.08); }
  .wn-drawer-cta { color: var(--steel-400) !important; }
}

/* ============================================================
 * NAVBAR
 * ============================================================ */
.wn {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink-900);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-dark-1);
}
.wn-inner {
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--gutter);
  height: 72px;
  display: flex; align-items: center; gap: 32px;
}
.wn-brand {
  display: flex; align-items: center; gap: 12px;
  color: #fff; text-decoration: none; flex-shrink: 0;
}
.wn-mark {
  width: 36px; height: 36px; background: #fff; color: var(--ink-900);
  font-weight: 800; font-size: 14px; letter-spacing: -.02em;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
}
.wn-logo {
  height: 40px; width: auto; display: block;
}
.wn-word { display: flex; flex-direction: column; line-height: 1; }
.wn-name { font-weight: 800; font-size: 14px; letter-spacing: 0; }
.wn .wn-name { white-space: nowrap; }  /* one line in the sticky header only; footer name may wrap on tiny screens */
/* Phase 3M-2E-2 / 3M-2M-2: full legal name "Advance Supplies (M) Sdn Bhd".
   >=414px: one line (nowrap) — UNCHANGED; preserves the approved iPhone 15 Pro Max
   (~430px) header. <=413px (OnePlus 12 ~412px and smaller phones): instead of
   HIDING the suffix (old 3M-2E-2 behaviour, which dropped "(M) Sdn Bhd" on Android),
   drop it onto a clean second line so the FULL legal name stays visible. The two
   short lines fit the 72px bar at every width down to 320px. No device/UA targeting. */
@media (max-width: 413px) {
  .wn-name-suffix {
    display: block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .82);
    margin-top: 1px;
  }
}
.wn-sub { font-size: 9px; font-weight: 700; letter-spacing: .28em; color: var(--ink-300); text-transform: uppercase; margin-top: 4px; }

.wn-links { display: flex; align-items: center; gap: 4px; flex: 1; margin-left: 12px; }
.wn-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.75); text-decoration: none;
  position: relative; border-radius: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.wn-link:hover { color: #fff; }
.wn-link--active, .wn-link--open { color: #fff; }
.wn-link--active::after, .wn-link--open::after {
  content: ""; position: absolute;
  left: 14px; right: 14px; bottom: -1px; height: 2px;
  background: var(--steel-400);
}

.wn-drop { position: relative; }
.wn-panel {
  position: absolute; top: calc(100% + 12px); left: -16px;
  min-width: 340px; max-width: 380px; background: #fff; color: var(--ink-900);
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: var(--shadow-3);
  /* Viewport-safe cap: panel top sits ~84px below the page top, so subtract
     92px to keep it inside the fold even on short laptop viewports (1366x768),
     while never exceeding 560px on tall screens. Phase 3C-2 trimmed the panel
     content enough that the scrollbar no longer appears at common sizes. */
  max-height: min(calc(100vh - 92px), 560px); overflow-y: auto; overflow-x: hidden;
}
.wn-panel-grid { display: grid; grid-template-columns: 1fr; gap: 0; padding: 8px; }
.wn-panel-item {
  padding: 12px 14px; text-decoration: none;
  display: flex; flex-direction: column; gap: 4px;
  border-radius: 3px;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-fast) var(--ease-out);
}
.wn-panel-item:last-child { border-bottom: none; }
.wn-panel-item:hover { background: var(--paper-alt); }
.wn-panel-title { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.wn-panel-desc { font-size: 12px; color: var(--ink-500); line-height: 1.4; }
.wn-panel-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px; background: var(--paper-alt);
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-500);
}
.wn-panel-foot a { color: var(--steel-600); font-weight: 700; text-decoration: none; }

/* Related-catalogue slot — Industrial Supplies & Accessories sits on its own
   page, so it is set apart from the five material categories above it. */
.wn-panel-related { padding: 8px; border-top: 1px solid var(--line); }
.wn-panel-item--related .wn-panel-related-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel-600);
}
/* Mobile drawer equivalent: a divider + accent above Industrial Supplies. */
.wn-drawer-sub a.wn-drawer-related {
  margin-top: 6px; padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  color: var(--steel-400) !important;
}

/* ── Materials dropdown information hierarchy (Phase 3C-2) ──────────────────
   The five categories sit under a quiet "Material categories" label as secondary
   child links; Industrial Supplies keeps its own "Related catalogue" slot; the
   grey footer carries the "All materials →" catch-all link (same .wn-panel-foot
   treatment as the Services dropdown). Scoped to .wn-panel* so Services is
   unaffected. */

/* Quiet group label above the five categories. */
.wn-panel-label {
  margin: 0; padding: 11px 16px 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-400);
}

/* Category rows — secondary: lighter title weight, slimmer rows, hover accent. */
.wn-panel-grid--cats { padding: 0 8px 8px; }
.wn-panel-item--cat { position: relative; padding: 7px 14px 7px 18px; }
.wn-panel-item--cat .wn-panel-title { font-weight: 600; }
.wn-panel-item--cat::before {
  content: ""; position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 2px; background: var(--steel-400);
  transition: height var(--dur-fast) var(--ease-out);
}
.wn-panel-item--cat:hover::before,
.wn-panel-item--cat:focus-visible::before { height: 20px; }

/* Scoped focus-visible rings for the navbar dropdown (a11y parity, Phase 3C-2). */
.wn-link:focus-visible {
  outline: 2px solid var(--steel-400); outline-offset: 2px; border-radius: 3px;
}
.wn-panel-item:focus-visible,
.wn-panel-foot a:focus-visible {
  outline: 2px solid var(--steel-600); outline-offset: -2px; border-radius: 3px;
}

.wn-cta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.wn-wa {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75);
  text-decoration: none;
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}
.wn-wa:hover { color: #fff; }
.wn-quote {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--steel-600); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 11px 18px; border-radius: 4px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.wn-quote:hover { background: var(--steel-700); }

/* ============================================================
 * HERO
 * ============================================================ */
.wh {
  position: relative; background: var(--ink-900); color: #fff;
  overflow: hidden;
  min-height: 640px;
  display: flex; align-items: center;
}
@keyframes as-hero-zoom {
  from { transform: scale(1.09); }
  to   { transform: scale(1.0); }
}
.wh-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 50%; /* Y overridden by JS parallax on scroll */
  filter: saturate(.55) brightness(.55) contrast(1.05);
  transform-origin: center center;
  /* Ken Burns: slow zoom-out — background "settles in" on page load */
  animation: as-hero-zoom 12s var(--ease-out) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .wh-bg { animation: none; }
}
.wh-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(110deg, rgba(11,18,32,.92) 0%, rgba(11,18,32,.75) 45%, rgba(11,18,32,.25) 100%),
    linear-gradient(to top, rgba(11,18,32,.9) 0%, transparent 60%);
}
.wh-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(120deg, black 40%, transparent 90%);
}
.wh-inner {
  position: relative; z-index: 2;
  max-width: var(--container); margin: 0 auto;
  padding: 96px var(--gutter) 120px;
  width: 100%;
}
.wh-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--steel-400);
  margin-bottom: 32px;
}
.wh-kicker-rule { width: 40px; height: 1px; background: var(--steel-400); }
.wh-title {
  font-size: 80px; font-weight: 800; line-height: .98;
  letter-spacing: -.03em; color: #fff;
  margin: 0 0 24px; max-width: 980px;
  text-wrap: balance;
}
.wh-title-em { color: var(--steel-400); font-style: normal; }
.wh-sub {
  font-size: 18px; line-height: 1.55;
  color: rgba(255,255,255,.78);
  margin: 0 0 40px; max-width: 620px;
}
.wh-ctas { display: flex; gap: 12px; margin-bottom: 64px; }
.wh-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 16px 24px; border-radius: 4px;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.wh-btn--primary { background: var(--steel-600); color: #fff; box-shadow: var(--shadow-2); }
.wh-btn--primary:hover { background: var(--steel-700); box-shadow: var(--shadow-3); }
.wh-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.25); }
.wh-btn--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
/* Outline variant for light-background contexts */
.wh-btn--outline { background: transparent; color: var(--ink-700); border: 1px solid var(--line); }
.wh-btn--outline:hover { background: var(--paper-alt); border-color: var(--ink-400); color: var(--ink-900); }
/* Small compact button — 12px text, tighter padding */
.wh-btn--sm { padding: 10px 18px; font-size: 12px; }

.wh-specs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.15);
  margin: 0;
  max-width: 880px;
}
.wh-specs > div { display: flex; flex-direction: column; gap: 4px; }
.wh-specs dt {
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.wh-specs dd {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 36px; line-height: 1;
  color: #fff; margin: 0;
  letter-spacing: -.02em;
  font-feature-settings: "tnum" 1;
}
.wh-specs dd span {
  font-size: 14px; font-weight: 500;
  color: var(--steel-400); margin-left: 4px;
}

/* ── Hero spec items: stagger-fade in on load (JS-gated) ──
   .js class on <html> is added synchronously before DOMContentLoaded.
   Without .js the specs are always visible (opacity unset = 1). */
@keyframes as-spec-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.js .wh-specs > div {
  opacity: 0;
  animation: as-spec-rise 0.45s var(--ease-out) forwards;
}
.js .wh-specs > div:nth-child(1) { animation-delay: 0.35s; }
.js .wh-specs > div:nth-child(2) { animation-delay: 0.48s; }
.js .wh-specs > div:nth-child(3) { animation-delay: 0.61s; }
.js .wh-specs > div:nth-child(4) { animation-delay: 0.74s; }
@media (prefers-reduced-motion: reduce) {
  .js .wh-specs > div { opacity: 1; animation: none; }
}

/* ============================================================
 * CAPABILITY GRID
 * ============================================================ */
.wc { background: var(--paper); padding: 112px 0; }
.wc-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.wc-head { max-width: 720px; margin-bottom: 56px; }
.wc-title {
  font-size: 48px; font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em; color: var(--ink-900);
  margin: 12px 0 16px;
  text-wrap: balance;
}
.wc-lede { font-size: 18px; line-height: 1.55; color: var(--ink-500); margin: 0; }

.wc-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  /* Allow cards to lift above the grid plane on hover */
  overflow: visible;
}
.wc-card {
  background: var(--paper); text-decoration: none;
  display: flex; flex-direction: column;
  position: relative; z-index: 0;
  transition:
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.wc-card:hover {
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
  transform: translateY(-3px);
  z-index: 2;
}
.wc-card:hover .wc-arrow { transform: translateX(5px); color: var(--steel-600); }
/* Kicker brightens slightly on hover to draw the eye */
.wc-card:hover .wc-kicker { color: var(--steel-700); }
.wc-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-100); }
.wc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.wc-card:hover .wc-img img { transform: scale(1.06); }
.wc-body { padding: 28px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.wc-kicker {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--steel-600); font-weight: 600;
  margin-bottom: 12px;
}
.wc-ctitle { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--ink-900); margin: 0 0 10px; letter-spacing: -.01em; }
.wc-desc { font-size: 14px; line-height: 1.5; color: var(--ink-500); margin: 0 0 24px; flex: 1; }
.wc-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--line); }
.wc-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-700); font-weight: 600; }
.wc-arrow { color: var(--ink-400); font-size: 18px; transition: all var(--dur-fast) var(--ease-out); }

/* ============================================================
 * SELECTED WORK (homepage) — Phase 3D-3
 * Anonymous capability-proof cards. Dedicated .sw-* family that mirrors the
 * .wc-card physics (4:3 image, hairline grid, mono spec lines) but stays
 * independent so it never alters the capability grid (.wc-*) or trust band
 * (.wt-*). Cards are <article> elements, not links; the CTA is the action.
 * ============================================================ */
.sw { background: var(--paper); padding: 112px 0; }
.sw-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.sw-head { max-width: 720px; margin-bottom: 56px; }
.sw-title {
  font-size: 48px; font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em; color: var(--ink-900);
  margin: 12px 0 16px; text-wrap: balance;
}
.sw-lede { font-size: 18px; line-height: 1.55; color: var(--ink-500); margin: 0; }

.sw-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  overflow: visible;
}
.sw-card {
  background: var(--paper);
  display: flex; flex-direction: column;
  position: relative; min-width: 0;
}
.sw-img { aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(155deg, var(--paper-alt) 0%, var(--ink-100) 100%); position: relative; }
.sw-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.sw-card:hover .sw-img img { transform: scale(1.05); }
.sw-img-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-300);
}
.sw-img-ph svg { opacity: .85; }
.sw-body { padding: 28px 24px 24px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sw-tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; color: var(--steel-600); margin-bottom: 12px;
}
.sw-ctitle {
  font-size: 22px; font-weight: 700; line-height: 1.2;
  color: var(--ink-900); letter-spacing: -.01em; margin: 0 0 16px;
}
.sw-spec { margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.sw-spec-row { display: flex; gap: 10px; align-items: baseline; margin: 0; }
.sw-spec-k {
  flex-shrink: 0; width: 62px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400);
}
.sw-spec-v { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-700); font-weight: 500; }
.sw-line { font-size: 14px; line-height: 1.5; margin: 0 0 12px; color: var(--ink-500); }
.sw-line-k {
  display: block;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-400);
  margin-bottom: 3px;
}
.sw-sol { color: var(--ink-700); }
.sw-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.sw-cta {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--steel-600); text-decoration: none;
}
.sw-cta:hover { color: var(--steel-700); }
.sw-cta-arrow { transition: transform var(--dur-fast) var(--ease-out); }
.sw-cta:hover .sw-cta-arrow { transform: translateX(4px); }
.sw-cta:focus-visible { outline: 2px solid var(--steel-600); outline-offset: 3px; border-radius: 3px; }

@media (max-width: 960px) {
  .sw-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sw { padding: 72px 0; }
  .sw-head { margin-bottom: 36px; }
  .sw-title { font-size: 32px; }
  .sw-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * MATERIALS RAIL
 * ============================================================ */
.wm { background: var(--paper-alt); padding: 112px 0; }
.wm-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.wm-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 48px; flex-wrap: wrap; }
.wm-title { font-size: 48px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--ink-900); margin: 12px 0 0; }
.wm-tabs { display: flex; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 4px; }
.wm-tab {
  padding: 10px 18px; font-size: 13px; font-weight: 600;
  color: var(--ink-500); border-radius: 3px;
  transition: all var(--dur-fast) var(--ease-out);
}
.wm-tab:hover { color: var(--ink-900); }
.wm-tab--on { background: var(--ink-900); color: #fff; }
.wm-tab--on:hover { color: #fff; }

.wm-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 300px;
  gap: 20px;
  overflow-x: auto;
  padding: 4px 4px 20px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  min-width: 0;
}
/* Hidden panels must stay hidden — explicit override so the author stylesheet
   wins over the UA stylesheet's [hidden]{display:none} which .wm-rail{display:grid}
   would otherwise defeat. */
.wm-rail[hidden] { display: none !important; }
.wm-card {
  scroll-snap-align: start;
  background: #fff; border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  /* Prevent browser default <a> link colour and underline */
  color: inherit; text-decoration: none;
}
.wm-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
.wm-swatch {
  aspect-ratio: 3 / 2; position: relative;
  display: flex; align-items: flex-end; padding: 16px;
}
.wm-part {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.85); color: var(--ink-900);
  padding: 4px 8px; border-radius: 2px;
}
.wm-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.wm-name { font-size: 18px; font-weight: 700; color: var(--ink-900); margin: 0; letter-spacing: -.01em; }
.wm-props { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wm-props li {
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 2px;
  background: var(--paper-alt); color: var(--ink-700);
  border: 1px solid var(--line);
}
.wm-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--line);
  margin: 0;
}
.wm-meta > div { display: flex; flex-direction: column; gap: 2px; }
.wm-meta dt { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-400); }
.wm-meta dd { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--ink-900); font-weight: 600; }
.wm-stock { color: var(--ok) !important; }
.wm-lead { color: var(--signal) !important; }
.wm-link { font-size: 13px; font-weight: 700; color: var(--steel-600); text-decoration: none; margin-top: auto; }
.wm-link:hover { color: var(--steel-700); }
/* Whole-card hover darkens the Browse arrow even when cursor is over swatch/body */
.wm-card:hover .wm-link { color: var(--steel-700); }

/* ── "Browse all materials" link in the section header ─────────────────── */
.wm-head-link {
  font-size: 13px; font-weight: 600;
  color: var(--steel-600); text-decoration: none;
  white-space: nowrap; align-self: flex-end;
  transition: color var(--dur-fast) var(--ease-out);
}
.wm-head-link:hover { color: var(--steel-700); }

/* ============================================================
 * MATERIALS — CATEGORY PANELS
 * Replaces the tab + horizontal-scroll card rail.
 * Four <article> panels in a 4-col grid.
 * Only the .wm-cat-link <a> inside each panel is interactive.
 * ============================================================ */
.wm-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}
.wm-cat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.wm-cat-card:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--steel-400);
  transform: translateY(-2px);
}
.wm-cat-card:hover .wm-cat-link { color: var(--steel-700); }
.wm-cat-title {
  font-size: 17px; font-weight: 700;
  color: var(--ink-900); margin: 0;
  letter-spacing: -.01em; line-height: 1.3;
}
.wm-cat-desc {
  font-size: 14px; color: var(--ink-500);
  line-height: 1.55; margin: 0;
  flex: 1;
}
.wm-cat-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.wm-cat-pill {
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 2px;
  background: var(--paper-alt); color: var(--ink-700);
  border: 1px solid var(--line);
  cursor: default; user-select: none;
}
.wm-cat-pill--more {
  color: var(--ink-400); border-style: dashed;
}
.wm-cat-link {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 700;
  color: var(--steel-600); text-decoration: none;
  margin-top: auto;
  transition: color var(--dur-fast) var(--ease-out);
}
.wm-cat-link:hover { color: var(--steel-700); }

/* ── Material colour swatch strip (decorative, aria-hidden) ── */
.wm-cat-swatches {
  display: flex; gap: 6px; align-items: center;
  margin-bottom: 4px;
}
.wm-cat-swatch {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  flex-shrink: 0;
}

/* ============================================================
 * PROCESS STRIP
 * ============================================================ */
.wp { background: var(--ink-900); color: #fff; padding: 96px 0; position: relative; overflow: hidden; }
.wp::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 80px 100%;
  pointer-events: none;
}
.wp-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.wp-head { max-width: 720px; margin-bottom: 56px; }
.wp-title { font-size: 48px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: #fff; margin: 12px 0 0; text-wrap: balance; }
.wp-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wp-grid.wp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.wp-step {
  /* Phase 3M-2H-2: flex column so the trailing element (timing chip on the home
     process strip, or "Quote this service" link in services #more-services)
     bottom-aligns across cards of differing body length. */
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  padding: 28px 28px 32px;
  position: relative;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.wp-step:hover {
  background: rgba(255,255,255,.075);
  border-color: rgba(59,130,246,.38);
}
/* Step number brightens on card hover */
.wp-step:hover .wp-n { color: #60a5fa; }

/* ── Step icon circle ── */
.wp-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(59,130,246,.3);
  background: rgba(59,130,246,.07);
  display: flex; align-items: center; justify-content: center;
  color: var(--steel-400);
  margin-bottom: 20px;
  position: relative; z-index: 1;
  flex-shrink: 0;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.wp-step:hover .wp-icon {
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.55);
}

/* ── Dashed connector line between steps (desktop only) ──
   Positioned at the vertical centre of the icon circle.
   Icon offset from step top = 28px (card padding) + 26px (half icon) = 54px.  */
.wp-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 54px;           /* align with icon centre */
  right: -24px;        /* bridge the 24px grid gap */
  width: 24px;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    rgba(59,130,246,.45) 0px, rgba(59,130,246,.45) 5px,
    transparent 5px,    transparent 10px
  );
  pointer-events: none;
}

.wp-rule { width: 48px; height: 2px; background: var(--steel-400); margin-bottom: 24px; }
.wp-n {
  display: block;
  font-family: var(--font-mono); font-weight: 600;
  font-size: 48px; line-height: 1;
  color: var(--steel-400);
  margin-bottom: 16px;
  letter-spacing: -.02em;
}
.wp-st { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 10px; letter-spacing: -.01em; }
.wp-sb { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.72); margin: 0 0 20px; }
.wp-meta {
  display: inline-block;
  margin-top: auto; align-self: flex-start; /* 3M-2H-2: pin timing chip to card bottom */
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--steel-400);
  padding: 5px 10px; border: 1px solid rgba(59,130,246,.3);
  border-radius: 2px;
}
/* Light-background context override (services coating section) */
.pg-section--alt .wp-step { background: #fff; border: 1px solid var(--line); }
.pg-section--alt .wp-icon { background: rgba(59,130,246,.07); border-color: rgba(59,130,246,.2); color: var(--steel-600); }
.pg-section--alt .wp-step:hover .wp-icon { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.4); }
/* Group B service-card media slot (image-led, replaces the old .wp-icon).
   Scoped to .pg-section--alt so dark-theme .wp-step usage elsewhere is unaffected.
   Aspect ratio + cover match Group A's .svc-img treatment for cross-section consistency. */
.pg-section--alt .wp-step-media {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  margin: 0 0 20px;
}
.pg-section--alt .wp-rule { background: var(--ink-900); }
.pg-section--alt .wp-n { color: var(--ink-400); }
.pg-section--alt .wp-st { color: var(--ink-900); }
.pg-section--alt .wp-sb { color: var(--ink-500); }
/* Coating grid: no sequential numbers, suppress connector line */
.wp-grid--coat .wp-step::after { display: none; }
/* Coating grid: 2-col layout (extracted from inline style) */
.wp-grid--coat { grid-template-columns: repeat(2, 1fr); gap: 32px; }
/* Coating section WhatsApp link */
.svc-coat-link { margin-top: auto; align-self: flex-start; display: inline-block; } /* 3M-2H-2: pin quote link to card bottom for same-row alignment */
.pg-section--alt .link { color: var(--ink-900); }

/* ============================================================
 * TRUST BAND
 * ============================================================ */
.wt { background: var(--paper); padding: 112px 0; }
.wt-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.wt-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink-900);
  border-bottom: 1px solid var(--line);
  margin-bottom: 80px;
}
.wt-stat { padding: 28px 24px 28px 0; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--line); }
.wt-stat:last-child { border-right: none; padding-right: 0; }
.wt-stat:not(:first-child) { padding-left: 24px; }
.wt-v {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 56px; line-height: 1; color: var(--ink-900);
  letter-spacing: -.02em;
  font-feature-settings: "tnum" 1;
}
.wt-u { font-size: 16px; font-weight: 500; color: var(--steel-600); margin-left: 4px; }
.wt-k { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); }

.wt-ind-head { display: flex; flex-direction: column; gap: 12px; max-width: 720px; margin-bottom: 40px; }
.wt-ititle { font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--ink-900); margin: 0; }
.wt-ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wt-tile { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); cursor: default; }
.wt-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.wt-tile:hover img { transform: scale(1.06); }
/* Dark veil that intensifies on hover — sits above image, below caption */
.wt-tile::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(11,18,32,0);
  transition: background var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.wt-tile:hover::after { background: rgba(11,18,32,.28); }
.wt-tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1; /* sit above the ::after veil */
  padding: 10px 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(11,18,32,.85) 30%, transparent);
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.wt-tile:hover figcaption {
  transform: translateY(-4px);
  background: linear-gradient(to top, rgba(11,18,32,.95) 50%, transparent);
}

/* ============================================================
 * QUOTE CTA
 * ============================================================ */
.wq { position: relative; color: #fff; overflow: hidden; }
.wq-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(.4) brightness(.3); }
.wq-scrim { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(15,43,92,.92), rgba(11,18,32,.85)); }
.wq-inner {
  position: relative; z-index: 2;
  max-width: var(--container); margin: 0 auto;
  padding: 112px var(--gutter);
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 80px; align-items: center;
}
.wq-title { font-size: 64px; font-weight: 800; line-height: 1.02; letter-spacing: -.025em; color: #fff; margin: 14px 0 20px; text-wrap: balance; }
.wq-sub { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.78); margin: 0 0 32px; max-width: 520px; }
.wq-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.wq-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 16px 24px; border-radius: 4px; text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.wq-btn--primary { background: #fff; color: var(--ink-900); }
.wq-btn--primary:hover { background: var(--steel-400); color: #fff; }
.wq-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.wq-btn--ghost:hover { background: rgba(255,255,255,.08); }

/* CTA leading-icon system (Phase 3M-2L-3) — icons inserted before CTA labels via
   as_icon(). Host buttons (.wq-btn / .wh-btn / .qf-submit-btn) are already
   inline-flex with gap, so the icon auto-aligns; just keep it from shrinking.
   .qf-wa-label groups the icon+text inside the space-between .qf-wa-inline link. */
.cta-ic { flex-shrink: 0; }
.qf-wa-label { display: inline-flex; align-items: center; gap: 10px; }

.wq-panel {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  padding: 28px 28px 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wq-panel-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.78);
}
@keyframes as-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(62,207,142,.22); }
  50%       { box-shadow: 0 0 0 7px rgba(62,207,142,0); }
}
.wq-dot {
  width: 8px; height: 8px; border-radius: 99px;
  background: #3ECF8E;
  box-shadow: 0 0 0 3px rgba(62,207,142,.22);
  animation: as-pulse-dot 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wq-dot { animation: none; }
}
.wq-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.wq-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 13px; }
.wq-li-k { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.wq-li-v { font-family: var(--font-mono); color: #fff; font-weight: 500; text-align: right; }

/* ============================================================
 * FOOTER
 * ============================================================ */
.wf { background: var(--ink-900); color: rgba(255,255,255,.72); }

/* End-of-page CTA strip — sits above .wf-top, integrated with footer chrome */
.wf-cta { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); }
.wf-cta-inner {
  max-width: var(--container); margin: 0 auto;
  padding: 36px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.wf-cta-h {
  margin: 0;
  font-size: 22px; font-weight: 700; color: #fff;
  line-height: 1.3; letter-spacing: -.01em; text-wrap: balance;
  max-width: 520px;
}
.wf-cta-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

/* Make Contact column links inherit the same look-and-feel as nav-list links */
.wf-contact a { color: rgba(255,255,255,.6); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.wf-contact a:hover { color: #fff; }
.wf-contact-hours { color: rgba(255,255,255,.55); font-size: 12px; font-style: italic; }

.wf-top {
  max-width: var(--container); margin: 0 auto;
  padding: 80px var(--gutter) 56px;
  display: grid; grid-template-columns: 1.2fr 2.2fr; gap: 80px;
}
.wf-tag { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.6); margin: 20px 0 28px; max-width: 380px; }
.wf-marketplaces { display: flex; flex-direction: column; gap: 10px; }
.wf-mp-row { display: flex; gap: 10px; }
.wf-mp-row img { height: 28px; width: auto; opacity: .85; background: #fff; padding: 4px 8px; border-radius: 3px; }
.wf-cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1.7fr; gap: 32px; } /* 3M-2H-3: wider Contact column so the full address fits on 3 clean lines at >=1280 */
/* 3M-2H-3: footer columns collapse to 2-col below the desktop nav breakpoint (1280),
   giving the Contact column ample width for the controlled multi-line address on
   tablet/burger widths (the email pins the 4-col Contact column too narrow otherwise). */
@media (max-width: 1279px) { .wf-cols { grid-template-columns: repeat(2, 1fr); } }
/* 3M-2H-3: footer address rendered as controlled block lines (no mid-line wrap). */
.wf-addr span { display: block; }
.wf-col-h { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #fff; display: block; margin-bottom: 16px; }
.wf-cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.wf-cols a { text-decoration: none; font-size: 13px; color: rgba(255,255,255,.6); transition: color var(--dur-fast) var(--ease-out); }
.wf-cols a:hover { color: #fff; }
.wf-contact li { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.6); }

.wf-bot {
  border-top: 1px solid rgba(255,255,255,.08);
  max-width: var(--container); margin: 0 auto;
  padding: 24px var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: rgba(255,255,255,.45);
}
.wf-bot-links { display: flex; gap: 24px; }
.wf-bot-links a { color: rgba(255,255,255,.45); text-decoration: none; }
.wf-bot-links a:hover { color: #fff; }

.kicker { font: 700 11px/1.2 var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--steel-600); }
.kicker--paper { color: rgba(255,255,255,.65); }

/* ============================================================
 * INNER PAGE — compact hero, breadcrumb, page head
 * ============================================================ */
.pg-hero { background: var(--ink-900); color: #fff; position: relative; overflow: hidden; }
.pg-hero::before { content:""; position:absolute; inset:0; background-image:linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px); background-size:80px 80px; mask-image:linear-gradient(120deg,black 30%,transparent 95%); }
.pg-hero-inner { max-width: var(--container); margin: 0 auto; padding: 56px var(--gutter) 72px; position: relative; }
.pg-crumb { display:flex; gap:10px; align-items:center; font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.5); margin-bottom:24px; }
.pg-crumb a { color: rgba(255,255,255,.75); text-decoration:none; }
.pg-crumb a:hover { color:#fff; }
.pg-crumb .sep { color: rgba(255,255,255,.3); }
.pg-kicker { display:inline-flex; align-items:center; gap:12px; font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--steel-400); margin-bottom:20px; }
.pg-kicker-rule { width:32px; height:1px; background:var(--steel-400); }
.pg-h1 { font-size:56px; font-weight:800; line-height:1.02; letter-spacing:-.025em; color:#fff; margin:0 0 16px; text-wrap:balance; max-width:900px; }
.pg-sub { font-size:18px; line-height:1.55; color:rgba(255,255,255,.78); margin:0; max-width:680px; }
.pg-meta { display:flex; gap:28px; flex-wrap:wrap; padding-top:28px; margin-top:36px; border-top:1px solid rgba(255,255,255,.14); }
.pg-meta .m { display:flex; flex-direction:column; gap:4px; }
.pg-meta dt { font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.pg-meta dd { margin:0; font-family:var(--font-mono); font-weight:600; font-size:18px; color:#fff; font-feature-settings:"tnum" 1; }

/* Generic section */
.pg-section { padding: 96px 0; }
.pg-section--alt { background: var(--paper-alt); }
.pg-section--dark { background: var(--ink-900); color: #fff; }
.pg-sec-head { max-width:720px; margin-bottom:48px; }
.pg-sec-title { font-size:40px; font-weight:800; line-height:1.05; letter-spacing:-.02em; margin:10px 0 12px; text-wrap:balance; }
.pg-section--dark .pg-sec-title { color:#fff; }
.pg-sec-lede { font-size:17px; line-height:1.55; color:var(--ink-500); margin:0; }
.pg-section--dark .pg-sec-lede { color: rgba(255,255,255,.72); }

/* ============================================================
 * MATERIALS PAGE
 * ============================================================ */
.mat-index { display: grid; grid-template-columns: 240px 1fr; gap: 48px; }
.mat-side { position: sticky; top: calc(var(--header-h) + 24px); align-self: flex-start; }
.mat-side-h { font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-400); margin-bottom:14px; }
.mat-side a { display:block; padding:10px 12px; font-size:14px; font-weight:500; color:var(--ink-700); text-decoration:none; border-left:2px solid var(--line); transition: all var(--dur-fast) var(--ease-out); }
.mat-side a:hover { color: var(--ink-900); border-color: var(--line-strong); background: var(--paper-alt); }
.mat-side a.active { color: var(--steel-600); border-color: var(--steel-600); font-weight:700; }

.mat-group { margin-bottom: 80px; scroll-margin-top: 100px; }
.mat-group-head { display:flex; align-items:end; justify-content:space-between; gap:24px; padding-bottom:20px; margin-bottom:20px; border-bottom:2px solid var(--ink-900); }
.mat-group-h { font-size:28px; font-weight:800; letter-spacing:-.01em; color:var(--ink-900); margin:0; }
.mat-group-d { font-size:14px; color:var(--ink-500); max-width:460px; margin:4px 0 0; }
.mat-count { font-family: var(--font-mono); font-size:12px; color: var(--ink-400); font-weight:600; }

.mat-table { width:100%; border-collapse: collapse; font-size:14px; }
.mat-table th { text-align:left; padding:10px 12px; font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-400); border-bottom:1px solid var(--line); }
.mat-table td { padding:14px 12px; border-bottom:1px solid var(--line); vertical-align: middle; }
.mat-table tr:hover td { background: var(--paper-alt); }
.mat-table .nm { font-weight:700; color:var(--ink-900); }
.mat-table .pn { font-family: var(--font-mono); font-size:12px; color: var(--ink-500); }
.mat-table .frm { font-family: var(--font-mono); font-size:12px; color: var(--ink-700); }
.mat-table .av { font-family: var(--font-mono); font-size:12px; font-weight:600; }
.mat-table .av-stock { color: var(--ok); }
.mat-table .av-lead { color: var(--signal); }
.mat-table .link { color: var(--steel-600); font-weight:700; text-decoration:none; font-size:12px; }
.mat-sw { display:inline-block; width:28px; height:28px; border-radius:3px; border:1px solid var(--line); vertical-align:middle; margin-right:10px; }

/* ============================================================
 * SERVICES PAGE
 * ============================================================ */

/* Jump-nav strip (below hero) */
.svc-jumpnav {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: var(--header-h);
  z-index: 10;
}
.svc-jumpnav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.svc-jumpnav-inner::-webkit-scrollbar { display: none; }
.svc-jumpnav-inner a {
  flex-shrink: 0;
  padding: 13px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-400);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.svc-jumpnav-inner a:hover {
  color: var(--steel-600);
  border-bottom-color: var(--steel-400);
}

.svc-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; padding: 48px 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; align-items: center; }
.svc-row:first-of-type { border-top: 2px solid var(--ink-900); padding-top: 48px; }
/* Alternating direction: even rows flip image to left */
.svc-row:nth-child(even) .svc-img { order: -1; }
.svc-copy { }
.svc-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--steel-600); letter-spacing:.05em; margin-bottom: 12px; }
.svc-num-sub { color: var(--ink-400); font-weight: 500; letter-spacing: 0; }
.svc-h { font-size: 25px; font-weight: 800; color: var(--ink-900); margin: 0 0 14px; letter-spacing: -.02em; line-height: 1.15; }
.svc-d { font-size: 16px; line-height: 1.6; color: var(--ink-500); margin: 0 0 24px; max-width: 520px; }
.svc-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; padding-top: 20px; border-top: 1px solid var(--line); margin-top: 20px; }
.svc-spec .s { display:flex; flex-direction:column; gap:2px; }
.svc-spec dt { font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-400); }
.svc-spec dd { font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--ink-900); margin:0; }
.svc-img { aspect-ratio: 4/3; background-size: cover; background-position: center; border:1px solid var(--line); }
/* Placeholder image slot — used while service photography is pending */
.svc-img--placeholder { background: linear-gradient(135deg, var(--paper-alt) 0%, var(--paper-sunk) 100%); display: flex; align-items: center; justify-content: center; }
.svc-img--placeholder svg { width: 80px; height: 80px; color: var(--ink-300); }

/* Sub-cluster wrapper inside the "Additional services" section */
.svc-b-cluster { margin-bottom: 56px; }
.svc-b-cluster:last-child { margin-bottom: 0; }
.svc-b-cluster-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.svc-b-cluster-h { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-900); margin: 0; }
.svc-b-cluster-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); font-weight: 500; }

/* ============================================================
 * INDUSTRIES PAGE
 * ============================================================ */

/* Grid — 3 columns desktop */
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Card shell */
.ind-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.ind-card:hover { box-shadow: 0 6px 28px rgba(11,18,32,.09); transform: translateY(-2px); }

/* Media area — shared height for both image and placeholder */
.ind-card__media { height: 180px; overflow: hidden; flex-shrink: 0; }
.ind-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out); }
.ind-card:hover .ind-card__media img { transform: scale(1.04); }

/* Placeholder: dark panel with subtle grid pattern — shown when no image */
.ind-card__media--placeholder {
  background-color: var(--ink-900);
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Card body */
.ind-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.ind-kicker { font-family: var(--font-mono); font-size: 11px; color: var(--steel-400); margin-bottom: 6px; letter-spacing: .06em; }
.ind-h { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ink-900); margin: 0 0 8px; line-height: 1.3; }
.ind-d { font-size: 13px; line-height: 1.55; color: var(--ink-500); margin: 0; }

/* Use-case list */
.ind-uses { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 5px; }
.ind-uses li { font-size: 12px; line-height: 1.45; color: var(--ink-500); padding-left: 18px; position: relative; }
.ind-uses li::before { content: '→'; position: absolute; left: 0; color: var(--steel-400); font-size: 10px; top: 2px; font-family: var(--font-mono); }

/* Placeholder icon (for cards without a photo) */
.ind-card__media--placeholder { display: flex; align-items: center; justify-content: center; }
.ind-placeholder-icon { flex-shrink: 0; }

/* Material chip links */
.ind-mats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); } /* 3M-2H-2: auto pins the chip row + enquire link to the card bottom for same-row alignment */
.ind-mat {
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  padding: 4px 9px;
  background: var(--paper-alt); border: 1px solid var(--line);
  color: var(--ink-600); text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1.3; white-space: nowrap;
}
.ind-mat:hover { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

/* Per-card sector enquiry link */
.ind-enquire { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--steel-600); text-decoration: none; letter-spacing: .01em; transition: color var(--dur-fast) var(--ease-out); }
.ind-enquire:hover { color: var(--ink-900); }

/* Scope note below grid */
.ind-scope-note { margin: 32px 0 0; font-size: 13px; color: var(--ink-400); line-height: 1.55; max-width: 680px; }

/* Trust strip */
.ind-trust { background: var(--paper-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 32px 0; }
.ind-trust-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; flex-wrap: wrap; justify-content: center; }
.ind-trust-item { display: flex; flex-direction: column; gap: 5px; text-align: center; padding: 8px 28px; }
.ind-trust-label { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400); }
.ind-trust-value { font-size: 13px; font-weight: 500; color: var(--ink-900); }
.ind-trust-sep { width: 1px; height: 32px; background: var(--line); flex-shrink: 0; }

/* ============================================================
 * ABOUT PAGE
 * ============================================================ */
.ab-lede { font-size: 28px; font-weight: 500; line-height: 1.35; color: var(--ink-900); letter-spacing:-.01em; max-width: 780px; text-wrap: balance; }
.ab-lede a { color: var(--ink-900); text-decoration: underline; text-decoration-color: var(--steel-400); text-underline-offset: 3px; font-weight: 600; transition: color var(--dur-fast) var(--ease-out); }
.ab-lede a:hover { color: var(--steel-600); }
.ab-pillars { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top: 56px; padding-top:48px; border-top:1px solid var(--line); }
.ab-pillars.ab-pillars--4 { grid-template-columns: repeat(4, 1fr); }
.pg-section--dark .ab-pillars { border-top-color: rgba(255,255,255,.12); }
.ab-p { padding: 16px 16px 20px; border-radius: 10px; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.ab-p:hover { background: var(--paper-alt); transform: translateY(-3px); }
.pg-section--dark .ab-p:hover { background: rgba(255,255,255,.06); }
/* Pillar icon circle */
.ab-p-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(59,130,246,.1); color: var(--steel-600); margin-bottom: 14px; }
.pg-section--dark .ab-p-icon { background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); }
.ab-p-rule { width:32px; height:2px; background: var(--steel-600); margin-bottom:16px; }
.ab-p-h { font-size:18px; font-weight:700; color:var(--ink-900); margin:0 0 8px; }
.ab-p-d { font-size:15px; line-height:1.55; color:var(--ink-500); margin:0; }
/* 3 / 2D — tighter padding for company profile section */
.pg-section--profile { padding:56px 0; }
.pg-section--profile .ab-facts { margin-top:32px; }
/* 3 / 2E — step number: slightly larger so it reads as a visual anchor */
.ab-p-n { display:block; font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--steel-600); margin-bottom:14px; }

/* About — hero actions + meta strip */
.pg-hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.pg-hero-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.pg-hero-meta span { font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.65); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:5px 14px; line-height:1; }

/* About — 2A: hero 2-column layout */
.ab-hero-layout { display:grid; grid-template-columns:1fr 330px; gap:48px; align-items:center; }
.ab-hero-panel { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); padding:28px 32px 26px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); align-self:start; margin-top:4px; }
.ab-hero-panel-head { display:flex; align-items:center; gap:10px; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid rgba(255,255,255,.12); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); }
/* 3 / 2B: scoped H1 — smaller size fits cleaner 2-line break in narrow left column */
.ab-hero-copy .pg-h1 { font-size:48px; max-width:none; }
.ab-hero-copy .pg-sub { max-width:520px; }

/* About — facts row (Section 2) */
.ab-facts { display:flex; flex-wrap:wrap; margin-top:40px; border:1px solid var(--line); }
.ab-fact { flex:1; min-width:160px; padding:24px 28px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.ab-fact:last-child { border-right:none; }
.ab-fact-n { font-size:15px; font-weight:700; color:var(--ink-900); }
.ab-fact-l { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400); margin-top:2px; }

/* About — 2-col feature block (Section 5) */
.ab-feat { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; padding-top:56px; border-top:1px solid var(--line); }
.ab-feat-left { position:sticky; top:80px; }
.ab-feat-h { font-size:40px; font-weight:800; line-height:1.1; letter-spacing:-.02em; color:var(--ink-900); margin:12px 0 20px; text-wrap:balance; }
.ab-feat-d { font-size:16px; line-height:1.65; color:var(--ink-500); margin:0; }
/* 2F — right panel: bordered capability checklist */
.ab-feat-right { border:1px solid var(--line); background:var(--paper-alt); overflow:hidden; }
.ab-feat-list { list-style:none; padding:0; margin:0; border-top:none; }
.ab-feat-list li { padding:22px 28px 22px 60px; border-bottom:1px solid var(--line); font-size:14px; line-height:1.55; color:var(--ink-500); position:relative; transition: background var(--dur-fast) var(--ease-out); }
.ab-feat-list li:hover { background: rgba(59,130,246,.04); }
.ab-feat-list li:last-child { border-bottom:none; }
.ab-feat-list li::before { content:""; position:absolute; left:28px; top:32px; width:20px; height:2px; background:var(--steel-600); }
.ab-feat-list li strong { display:block; font-size:14px; font-weight:700; color:var(--ink-900); margin-bottom:4px; letter-spacing:-.005em; }

/* About — mid-page path-selection strip (between Sections 6 and 8) */
.ab-cta-strip { background:var(--ink-900); padding:56px 0; border-top:2px solid var(--steel-600); }
.ab-cta-strip-inner { max-width:var(--container); margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.ab-cta-strip-copy { flex:1; min-width:240px; }
.ab-cta-strip-kicker { font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-400); display:block; margin-bottom:12px; }
.ab-cta-strip-text { font-size:24px; font-weight:800; color:#fff; margin:0; letter-spacing:-.015em; line-height:1.2; max-width:480px; text-wrap:balance; }
.ab-cta-strip-actions { display:flex; gap:12px; flex-shrink:0; flex-wrap:wrap; }
/* Path tiles */
.ab-path-tiles { display:flex; gap:16px; flex-wrap:wrap; min-width:0; } /* 3M-2H-3: allow shrink (was flex-shrink:0) so the two path tiles never overflow the ~960px content area at 1024px (pre-existing about-page overflow, surfaced by QA) */
.ab-path-tile { flex:1; min-width:220px; display:flex; flex-direction:column; gap:6px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:24px 28px; text-decoration:none; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.ab-path-tile:hover { background:rgba(255,255,255,.1); border-color:rgba(59,130,246,.5); transform:translateY(-2px); }
.ab-path-tile-icon { color: var(--steel-400); margin-bottom:4px; }
.ab-path-tile-head { font-size:17px; font-weight:700; color:#fff; letter-spacing:-.01em; }
.ab-path-tile-sub { font-size:13px; line-height:1.55; color:rgba(255,255,255,.55); flex:1; }
.ab-path-tile-cta { font-size:13px; font-weight:600; color:var(--steel-400); margin-top:8px; }

.ab-timeline { display:grid; grid-template-columns: 120px 1fr; gap:24px 40px; max-width: 820px; margin-top: 40px; }
.ab-year { font-family: var(--font-mono); font-size:20px; font-weight:600; color:var(--steel-600); border-right:1px solid var(--line); padding:8px 0 18px; }
.ab-evt h4 { font-size:16px; font-weight:700; color:var(--ink-900); margin:8px 0 4px; }
.ab-evt p { font-size:14px; line-height:1.55; color:var(--ink-500); margin:0; padding-bottom:14px; border-bottom:1px solid var(--line); }

/* ============================================================
 * CONTACT PAGE
 * ============================================================ */
.ct-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 0; border:1px solid var(--line); } /* 3M-2H-2: 3 compact method cards; Workshop Address (4th) spans full width */
.ct-band { display:grid; grid-template-columns: 1fr 1fr; gap:0; border:1px solid var(--line); border-top:none; }
.ct-tile { padding: 28px 28px 32px; border-right: 1px solid var(--line); transition: background var(--dur-fast) var(--ease-out); }
.ct-tile:hover { background: var(--paper-alt); }
.ct-tile:last-child { border-right:none; }
.ct-tile .kicker { margin-bottom: 14px; display:block; }
.ct-tile-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(37,99,235,.08); color: var(--steel-600); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.ct-tile .v { font-family: var(--font-mono); font-size:18px; font-weight:600; color:var(--ink-900); line-height:1.35; margin:0 0 10px; }
.ct-tile .v.v--sm { font-size: 14px; line-height: 1.9; }
.ct-tile .d { font-size:13px; color:var(--ink-500); margin:0 0 14px; line-height:1.5; }
.ct-tile .link { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--steel-600); text-decoration:none; }
/* Live hours pulse indicator */
.ct-live-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ct-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-300); flex-shrink: 0; }
.ct-live-dot--open { background: var(--ok); box-shadow: 0 0 0 3px rgba(15,123,58,.18); animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { box-shadow: 0 0 0 3px rgba(15,123,58,.18); } 50% { box-shadow: 0 0 0 6px rgba(15,123,58,.08); } }
.ct-map-wrap { margin-top: 56px; position: relative; }
.ct-map { aspect-ratio: 16/6; border:1px solid var(--line); overflow:hidden; }
.ct-map iframe { width:100%; height:100%; display:block; border:0; }
.ct-map-cta { position: absolute; bottom: 16px; right: 16px; display: flex; gap: 8px; }
/* Contact page dark CTA utility classes */
.ct-dark-cta-inner { text-align: center; }
.ct-dark-cta-inner .pg-kicker { justify-content: center; }
.ct-dark-cta-inner .pg-sec-title { color: #fff; margin: 0 auto 16px; max-width: 720px; }
.ct-dark-cta-inner .pg-sec-lede  { color: rgba(255,255,255,.72); max-width: 620px; margin: 0 auto 32px; }
/* Contact: tile borders for the desktop layout (Phase 3M-2H-2) — 3 method cards
   in row 1 + a full-width Workshop Address card (4th). Aligned to the 960px grid
   breakpoint (the grid collapses to a single column below 960). */
@media (min-width: 960px) {
  .ct-tile:nth-child(3n) { border-right: none; }
  .ct-tile:nth-child(4) { grid-column: 1 / -1; border-top: 1px solid var(--line); }
}
/* Copy trigger (click-to-copy) */
.ct-copy-val { cursor: pointer; position: relative; }
.ct-copy-val:hover { color: var(--steel-600); }
.ct-copy-val::after { content: attr(data-copied-msg); position: absolute; left: 0; top: 110%; background: var(--ink-900); color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; font-family: var(--font-sans); letter-spacing: 0; text-transform: none; font-weight: 400; }
.ct-copy-val.is-copied::after { opacity: 1; }

/* ============================================================
 * QUOTE PAGE — technical enquiry form
 * ============================================================ */
.qf-layout { display:grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: flex-start; }
.qf-form { background:#fff; border:1px solid var(--line); }
.qf-section { padding: 28px 32px; border-bottom:1px solid var(--line); }
.qf-section:last-child { border-bottom:none; }
.qf-step { display:flex; align-items:baseline; gap:14px; margin-bottom:20px; }
.qf-step-n { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--steel-600); letter-spacing:.05em; }
.qf-step-h { font-size:18px; font-weight:700; color:var(--ink-900); margin:0; letter-spacing:-.01em; }
.qf-step-hint { font-size:12px; color:var(--ink-400); margin-left:auto; font-family:var(--font-mono); }
.qf-row { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qf-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.qf-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.qf-field--full { grid-column: 1 / -1; }
.qf-label { font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-500); display:flex; justify-content:space-between; }
.qf-label .req { color:var(--alert); }
.qf-input, .qf-select, .qf-textarea {
  height:42px; padding:0 12px; border:1px solid var(--line-strong); background:var(--paper);
  font: 400 14px var(--font-sans); color:var(--ink-900); border-radius:3px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.qf-textarea { height: auto; padding:12px; min-height:110px; resize:vertical; font-family: var(--font-sans); line-height:1.5; }
.qf-input:focus, .qf-select:focus, .qf-textarea:focus { outline:none; border-color: var(--steel-600); box-shadow: 0 0 0 3px rgba(30,79,163,.15); }
.qf-input.mono { font-family: var(--font-mono); font-feature-settings:"tnum" 1; }
/* Phone row: country-code select + number input side by side */
.qf-phone-row { display: flex; gap: 8px; }
.qf-phone-code { flex: 0 0 auto; width: 120px; }
.qf-phone-row .qf-input { flex: 1 1 0; min-width: 0; }
.qf-hint { font-size:11px; color:var(--ink-400); font-family:var(--font-mono); }

.qf-chips { display:flex; flex-wrap:wrap; gap:8px; }
.qf-chip { cursor:pointer; }
.qf-chip input { position:absolute; opacity:0; pointer-events:none; }
.qf-chip span { display:inline-block; padding:9px 14px; border:1px solid var(--line-strong); border-radius:3px; font-size:13px; font-weight:500; color:var(--ink-700); background:var(--paper); transition: all var(--dur-fast) var(--ease-out); }
.qf-chip:hover span { border-color:var(--ink-500); color:var(--ink-900); }
.qf-chip input:checked + span { background:var(--ink-900); color:#fff; border-color:var(--ink-900); }

.qf-upload {
  position: relative; display: block;
  border: 1.5px dashed var(--line-strong); border-radius: 4px;
  padding: 32px 24px; background: var(--paper-alt);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.qf-upload:hover, .qf-upload:focus-within { border-color: var(--steel-600); background: var(--paper); }
.qf-upload-input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.qf-upload-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.qf-upload-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--line-strong);
  border-radius: 99px; background: var(--paper); color: var(--ink-500);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.qf-upload:hover .qf-upload-icon, .qf-upload:focus-within .qf-upload-icon { color: var(--steel-600); border-color: var(--steel-600); }
.qf-upload-icon svg { display: block; }
.qf-upload-copy { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.qf-upload-h { font-size: 14px; font-weight: 700; color: var(--ink-900); letter-spacing: -.005em; }
.qf-upload-d { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); letter-spacing: .02em; }

.qf-submit {
  padding: 28px 32px; background: var(--paper-alt);
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 40px; border-top: 1px solid var(--line);
}
.qf-submit-left { max-width: 460px; }
.qf-submit-left .t { font-size: 15px; font-weight: 700; color: var(--ink-900); margin: 0 0 6px; letter-spacing: -.005em; }
.qf-submit-left .d { font-size: 13px; color: var(--ink-500); margin: 0; line-height: 1.55; }
.qf-submit-left .d b { color: var(--ink-900); font-weight: 600; }

.qf-actions {
  display: flex; flex-direction: column;
  gap: 10px; align-items: stretch;
}
.qf-actions > .qf-submit-btn, .qf-actions > .qf-wa-btn {
  height: 52px; padding: 0 22px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  border-radius: 4px; white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
}
.qf-submit-btn { background: var(--steel-600); color: #fff; border: 1px solid var(--steel-600); box-shadow: var(--shadow-2); }
.qf-submit-btn:hover { background: var(--steel-700); border-color: var(--steel-700); box-shadow: var(--shadow-3); }
.qf-wa-btn { background: #fff; color: var(--ink-900); border: 1px solid var(--line-strong); text-decoration: none; }
.qf-wa-btn:hover { border-color: var(--ink-900); background: var(--paper); }
.qf-wa-btn .wa-ic { width: 15px; height: 15px; flex-shrink: 0; color: var(--ink-700); }
.qf-wa-btn:hover .wa-ic { color: var(--ink-900); }
/* Submit feedback states (WhatsApp redirect flow) */
.qf-submit-error {
  font-size: 13px; font-weight: 600; color: #dc2626;
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 4px; padding: 10px 14px;
  margin: 0 0 12px; grid-column: 1 / -1;
}
.qf-submit-sent {
  font-size: 13px; color: #16a34a; font-weight: 500;
  margin: 10px 0 0; line-height: 1.55;
}
.qf-input--err, .qf-select--err,
.qf-form .qf-input[aria-invalid="true"],
.qf-form .qf-select[aria-invalid="true"] {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}
.qf-submit-btn:disabled { opacity: .65; cursor: wait; }

/* Required-fields legend */
.qf-req-legend { padding: 12px 32px 0; margin: 0; font-size: 11px; color: var(--ink-400); font-family: var(--font-mono); }
.qf-req-legend .req { color: var(--alert); font-style: normal; }

/* Draft-Restored banner — shown on direct /quote/ entry when a saved Job-body draft is restored.
   Pass 1.1 §2.2 — see memory/quote_service_alignment_pass_1_1_decision.md */
.qf-draft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 32px 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, #c08a3e);
  background: #fffaf2;
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--ink-900);
}
.qf-draft-banner[hidden] { display: none; }
.qf-draft-banner-text { flex: 1 1 auto; line-height: 1.4; }
.qf-draft-banner-clear {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 4px 8px;
  margin: 0;
  color: var(--ink-900);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.qf-draft-banner-clear:hover,
.qf-draft-banner-clear:focus-visible { color: var(--accent, #c08a3e); outline: none; }

/* Per-field inline errors */
.qf-field-error { font-size: 12px; color: #dc2626; margin: 4px 0 0; line-height: 1.4; font-family: var(--font-sans); }
.qf-field-error[hidden] { display: none; }

/* Form-factor label spacing */
.qf-ff-label { margin-bottom: 10px; }

/* Quantity row top spacing */
.qf-row--qty { margin-top: 4px; }

/* Attachment reminder card (replaces file upload widget) */
.qf-attach-reminder {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 20px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--paper-alt);
}
.qf-attach-icon {
  flex-shrink: 0; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink-400);
}
.qf-attach-copy { flex: 1; min-width: 0; }
.qf-attach-h { font-size: 14px; font-weight: 700; color: var(--ink-900); margin: 0 0 4px; }
.qf-attach-d { font-size: 12px; color: var(--ink-500); margin: 0; line-height: 1.55; font-family: var(--font-mono); }

/* Drawings attachment confirmation — Pass 1.1 §2.4.
   Drives the conditional *Drawings:* line in the WhatsApp message. */
.qf-attach-confirm { margin-top: 12px; }
.qf-attach-confirm-label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.4; color: var(--ink-900);
  cursor: pointer; font-family: var(--font-sans);
}
.qf-attach-confirm-label input[type="checkbox"] {
  flex-shrink: 0; margin-top: 2px;
  width: 16px; height: 16px;
  accent-color: var(--accent, #c08a3e);
  cursor: pointer;
}

/* Success state message */
.qf-submit-sent { display: flex; align-items: center; gap: 6px; }

.qf-wa-inline {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-decoration: none; color: var(--ink-900);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out);
}
.qf-wa-inline:hover { color: var(--steel-700); }
.qf-wa-inline .ar { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; }

.qf-wa-sticky {
  display: none; position: fixed; right: 16px; bottom: 16px; z-index: 40;
  background: var(--ink-900); color: #fff;
  border: 1px solid rgba(255,255,255,.1);
  padding: 12px 16px; border-radius: 99px; box-shadow: var(--shadow-3);
  text-decoration: none; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  align-items: center; gap: 8px;
}
.qf-wa-sticky .wa-ic { width: 14px; height: 14px; color: var(--steel-400); flex-shrink: 0; }

/* Form progress bar (full-width strip at top of form) */
.qf-progress-bar { height: 3px; background: var(--line); overflow: hidden; }
.qf-progress-fill { height: 100%; background: var(--steel-600); width: 0%; transition: width .4s var(--ease-out); }

/* Submit secondary action */
.qf-submit-secondary { font-size: 12px; color: var(--ink-400); text-decoration: none; text-align: center; transition: color var(--dur-fast) var(--ease-out); }
.qf-submit-secondary:hover { color: var(--steel-600); text-decoration: underline; }

.qf-aside { position:sticky; top:calc(var(--header-h) + 24px); display:flex; flex-direction:column; gap:24px; }
.qf-info { background:var(--paper-alt); border:1px solid var(--line); padding:24px; }
.qf-info h3 { font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-900); margin:0 0 14px; }
.qf-info p { font-size:13px; line-height:1.55; color:var(--ink-500); margin:0 0 14px; }
.qf-info ul { margin:0; padding:0; list-style:none; }
.qf-info li { font-size:13px; padding:8px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:12px; }
.qf-info li:first-child { border-top:none; }
.qf-info .k { color: var(--ink-500); }
.qf-info .v { font-family:var(--font-mono); color:var(--ink-900); font-weight:600; }
.qf-aside-email { font-size: 11px; word-break: break-all; }

/* Aside progress card */
.qf-progress-card { }
.qf-mini-bar-wrap { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
.qf-mini-bar-fill { height: 100%; background: var(--steel-600); border-radius: 2px; width: 0%; transition: width .4s var(--ease-out); }
.qf-progress-count { font-size: 11px; font-family: var(--font-mono); color: var(--ink-400); margin: 0 0 16px; }
.qf-ps-list { list-style: none; padding: 0; margin: 0; }
.qf-ps-list li { border-top: 1px solid var(--line); }
.qf-ps-list li:first-child { border-top: none; }
.ps-link { display: flex; align-items: center; gap: 10px; padding: 9px 0; text-decoration: none; color: var(--ink-500); font-size: 13px; transition: color var(--dur-fast) var(--ease-out); }
.ps-link:hover { color: var(--steel-600); }
.ps-ic { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 10px; color: transparent; transition: background var(--dur-fast), border-color var(--dur-fast); }
.ps-done .ps-ic { background: var(--steel-600); border-color: var(--steel-600); }
.ps-done .ps-ic::after { content: '✓'; color: #fff; font-size: 9px; font-weight: 700; }
.ps-done .ps-label { color: var(--ink-900); font-weight: 600; }
.ps-label { transition: color var(--dur-fast); }

/* ============================================================
 * QUOTE — "What happens next" relocated support strip (Phase 3G-2)
 * Non-sticky band placed just above the submit area. Auto-fit grid
 * keeps the 5 steps responsive with no horizontal overflow.
 * ============================================================ */
.qf-next { padding: 22px 32px; background: var(--paper-alt); border-bottom: 1px solid var(--line); }
.qf-next-h { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-900); margin: 0 0 6px; }
.qf-next-lead { font-size: 13px; line-height: 1.55; color: var(--ink-500); margin: 0 0 16px; max-width: 70ch; }
.qf-next-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; }
.qf-next-steps li { display: flex; flex-direction: column; gap: 4px; padding-left: 12px; border-left: 2px solid var(--line); min-width: 0; }
.qf-next-n { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--steel-600); letter-spacing: .05em; }
.qf-next-k { font-size: 12px; font-weight: 600; color: var(--ink-900); line-height: 1.3; }
.qf-next-v { font-size: 11px; font-family: var(--font-mono); color: var(--ink-500); line-height: 1.35; }

/* Phase 3G-2 — lightly compact the progress checklist so the progress card and
   the contact card both fit the sticky column on common laptop heights. */
.qf-progress-card .qf-progress-count { margin-bottom: 12px; }
.qf-progress-card .ps-link { padding: 7px 0; }

/* Phase 3G-2 — on mobile the sticky sidebar stacks after the form, where the
   progress checklist duplicates the top progress bar; hide it to keep the page
   short. The contact card ("Prefer to talk first?") stays visible. */
@media (max-width: 959px) {
  .qf-progress-card { display: none; }
  .qf-next { padding: 20px 24px; }
}

/* ============================================================
 * MATERIALS — CATEGORY GRID (new structure)
 * ============================================================ */
.mat-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 40px; margin-top: 48px; }
.mat-cat { border-top: 2px solid var(--ink-900); padding-top: 28px; }
.mat-cat-head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
.mat-cat-n { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink-400); letter-spacing: .08em; white-space: nowrap; padding-top: 4px; }
.mat-cat-h { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--ink-900); margin: 0 0 8px; }
.mat-cat-d { font-size: 14px; line-height: 1.65; color: var(--ink-500); margin: 0; }
.mat-list { list-style: none; padding: 0; margin: 0 0 20px; }
.mat-list li { font-size: 14px; color: var(--ink-700); padding: 8px 0; border-bottom: 1px solid var(--line); }
.mat-list li:first-child { border-top: 1px solid var(--line); }
.mat-cat .link { font-size: 13px; font-weight: 700; color: var(--steel-600); text-decoration: none; }
.mat-cat .link:hover { text-decoration: underline; }
@media (max-width: 959px) {
  .mat-cats { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
 * MATERIALS — OVERVIEW CARDS (Zone 1)
 * 3-col grid, 2 rows of 3. Cards use flex-column so the chips
 * always sit at the bottom regardless of description length.
 * ============================================================ */
.mat-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.mat-ov-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink-900);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.mat-ov-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
}
.mat-ov-n {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-400);
  letter-spacing: .1em;
}
.mat-ov-h {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink-900);
  margin: 0;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.mat-ov-d {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-500);
  margin: 0;
  flex-grow: 1; /* pushes chips to bottom within each card */
}
.mat-ov-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mat-ov-chips li {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 2px;
  background: var(--paper-alt);
  color: var(--ink-700);
  border: 1px solid var(--line);
}

/* "View all N materials →" link at base of each Zone 1 card */
.mat-ov-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--steel-600);
  text-decoration: none;
  letter-spacing: .01em;
  transition: color var(--dur-fast) var(--ease-out);
}
.mat-ov-link:hover { color: var(--steel-700); }

/* Clickable chip links inside Zone 1 cards */
.mat-ov-chip-link {
  color: inherit;
  text-decoration: none;
  display: block;
  transition: color var(--dur-fast) var(--ease-out);
}
.mat-ov-chip-link:hover { color: var(--steel-600); }

/* Note beneath card grid */
.mat-ov-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.mat-ov-note p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-500);
  margin: 0;
  max-width: 560px;
}

/* Helper card — non-category guide that fills the 6th cell of the overview
   grid so the layout sits as a balanced 3×2 (was awkward as 5 in a 6-cell
   grid). Visually distinct from the 5 .mat-ov-card categories: paper-alt
   fill, dashed steel top accent, a "Guide" tag in place of the category
   number, and no chips list — so it never reads as a sixth material category.
   Click handler in assets/js/app.js opens the wizard and smooth-scrolls. */
.mat-ov-card--helper {
  background: var(--paper-alt);
  border-top-color: var(--steel-400);
  border-top-style: dashed;
  text-decoration: none;
  color: inherit;
}
.mat-ov-card--helper:hover {
  background: #fff;
  border-color: var(--steel-600);
}
.mat-ov-helper-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--steel-600);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mat-ov-helper-tag svg { display: block; }
.mat-ov-helper-link { color: var(--steel-600); font-weight: 700; }
.mat-ov-card--helper:hover .mat-ov-helper-link { color: var(--steel-700); }

/* Full-width helper strip (Phase 3M-2D-3) — replaces the old in-grid helper
   card now that the overview grid holds 6 real categories (clean 3×2). Same
   paper-alt fill + dashed steel top accent as the old helper card, laid out
   as a horizontal full-width band. Reuses .mat-ov-helper-tag/.mat-ov-helper-link. */
.mat-ov-helper-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 22px 28px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-top: 2px dashed var(--steel-400);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.mat-ov-helper-strip:hover { background: #fff; border-color: var(--steel-600); }
.mat-ov-helper-strip-main { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mat-ov-helper-strip-text { display: flex; flex-direction: column; gap: 3px; }
.mat-ov-helper-strip-h { font-size: 16px; font-weight: 800; color: var(--ink-900); letter-spacing: -.01em; line-height: 1.25; }
.mat-ov-helper-strip-d { font-size: 13px; line-height: 1.55; color: var(--ink-500); max-width: 620px; }
.mat-ov-helper-strip:hover .mat-ov-helper-link { color: var(--steel-700); }
@media (max-width: 640px) {
  .mat-ov-helper-strip { padding: 18px 20px; }
}

/* ============================================================
 * MATERIALS — SEARCHABLE CARD GRID (Zone 2)
 * Full-width search bar + count badge, rounded category pills,
 * 6-col flat card grid. Click any card → pre-filled quote form.
 * ============================================================ */

/* Heading block */
.msr-head {
  margin-bottom: 28px;
}
.msr-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 6px 0 10px;
}
.msr-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-500);
  margin: 0;
  max-width: 560px;
}

/* Full-width search bar */
.msr-bar {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  margin-bottom: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.msr-bar:focus-within {
  border-color: var(--steel-600);
  box-shadow: 0 0 0 3px rgba(30, 79, 163, .1);
}
.msr-bar-ic {
  position: absolute;
  left: 16px;
  color: var(--ink-400);
  pointer-events: none;
  flex-shrink: 0;
}
.msr-input {
  flex: 1;
  padding: 14px 130px 14px 46px;
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--ink-800);
  background: transparent;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.msr-input::placeholder {
  color: var(--ink-400);
}
.msr-count {
  position: absolute;
  right: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-500);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px 10px;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Category filter pills — rounded, short labels */
.msr-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.msr-pill {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink-600);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.msr-pill:hover {
  background: var(--paper-alt);
  border-color: var(--ink-400);
  color: var(--ink-800);
}
.msr-pill--on {
  background: var(--steel-600);
  color: #fff;
  border-color: var(--steel-600);
}

/* Count badge inside each pill */
.msr-pill-n {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: .6;
  margin-left: 3px;
}
.msr-pill--on .msr-pill-n { opacity: .85; }

/* ── Scenario filter chip ──────────────────────────────────────────────── */
/* Sits between the sticky toolbar and the grid. Shown only when a wizard  */
/* scenario is active. Uses [hidden] override so display:flex never wins.  */
.msr-scenario-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 16px;
  margin-bottom: 20px;
  background: rgba(30, 79, 163, 0.05);
  border: 1px solid rgba(30, 79, 163, 0.18);
  border-left: 3px solid var(--steel-600);
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink-700);
  line-height: 1.4;
}
/* Critical: prevent display:flex from overriding the hidden attribute */
.msr-scenario-chip[hidden] { display: none; }

/* Checkmark badge on the left */
.msr-sc-icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--steel-600);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* Text block — scenario name + count subordinate */
.msr-sc-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.msr-sc-label strong {
  color: var(--ink-900);
  font-weight: 600;
  font-size: 13px;
}
.msr-sc-count {
  font-size: 12px;
  color: var(--ink-500);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Clear filter button */
.msr-sc-clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-600);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
  pointer-events: auto;
}
.msr-sc-clear:hover {
  background: var(--paper-alt);
  border-color: var(--steel-600);
  color: var(--steel-600);
}
.msr-sc-clear:focus-visible {
  outline: 2px solid var(--steel-600);
  outline-offset: 2px;
}

/* Sticky toolbar wrapping search bar + pills */
.msr-toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: var(--paper-alt);
  padding: 16px 0 4px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.msr-toolbar.is-stuck {
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
  border-bottom: 1px solid var(--line);
}

/* Keep grid scroll target below sticky bar height (~120px) */
#msr-grid { scroll-margin-top: 140px; }
#msr-scenario-chip { scroll-margin-top: 140px; }
#mat-search { scroll-margin-top: 80px; padding-top: 48px; } /* fixed header ~64px + breathing room */
/* Reduce bottom padding on zone-1 so the gap between zone-1 and the search section is tighter */
#mat-zone1 { padding-bottom: 48px; }

/* ============================================================
 * MATERIALS — HELP-ME-CHOOSE WIZARD
 * Inline collapsible panel above the sticky toolbar.
 * ============================================================ */
.msr-wizard-wrap { margin-bottom: 24px; }

.msr-wizard-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-700);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.msr-wizard-toggle:hover { border-color: var(--steel-600); box-shadow: 0 0 0 3px rgba(30,79,163,.08); }
.msr-wizard-toggle-label { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.msr-wizard-toggle-cta { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--steel-600); }
.msr-wizard-toggle-cta svg { transition: transform .2s; }
.msr-wizard-toggle[aria-expanded="true"] .msr-wizard-toggle-cta svg { transform: rotate(180deg); }

.msr-wizard {
  background: #fff;
  border: 1px solid var(--line-strong);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 24px;
  overflow: hidden;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transition: max-height .42s var(--ease-out), opacity .28s var(--ease-out), padding .28s var(--ease-out);
}
.msr-wizard.is-open {
  max-height: 2000px;
  padding-top: 24px;
  padding-bottom: 24px;
  opacity: 1;
}
.msr-wizard-q {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-500);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.msr-wizard-q-sub {
  font-size: 13px;
  color: var(--ink-600);
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 70ch;
}
.msr-wizard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

/* ─────────────────────────────────────────────────────────────────────
   TWO-STATE WIZARD — Picker (compact chips) → Detail (focused panel)
   ──────────────────────────────────────────────────────────────────── */

/* State transitions */
.msr-wiz-state { animation: msr-wiz-fade var(--dur-base) var(--ease-out); }

/* ─── State 1: Compact chip picker ─────────────────────────────────── */
.msr-wiz-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.msr-wiz-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.msr-wiz-chip .msr-wizard-ic {
  color: var(--steel-600);
  flex-shrink: 0;
  margin-bottom: 2px;
}
.msr-wiz-chip-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.3;
  letter-spacing: -.005em;
}
.msr-wiz-chip-sub {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-500);
  letter-spacing: .02em;
  line-height: 1.4;
}
.msr-wiz-chip:hover {
  border-color: var(--steel-600);
  background: #EEF3FC;
  box-shadow: 0 2px 10px rgba(30,79,163,.1);
  transform: translateY(-1px);
}
.msr-wiz-chip:focus-visible {
  outline: 2px solid var(--steel-600);
  outline-offset: 2px;
}
.msr-wiz-chip:active { transform: translateY(0); }

/* ─── State 2: Detail panel (focused, single scenario) ─────────────── */
.msr-wiz-state--detail {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 24px 22px;
}
.msr-wiz-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 6px 4px 0;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-500);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.msr-wiz-back:hover { color: var(--steel-600); }
.msr-wiz-back:focus-visible { outline: 2px solid var(--steel-600); outline-offset: 2px; border-radius: 2px; }
.msr-wiz-back svg { transition: transform var(--dur-fast) var(--ease-out); }
.msr-wiz-back:hover svg { transform: translateX(-2px); }

.msr-wiz-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.msr-wiz-panel[hidden] { display: none; }
.msr-wiz-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.msr-wiz-panel-head .msr-wizard-ic {
  width: 28px; height: 28px;
  color: var(--steel-600);
  flex-shrink: 0;
  margin-top: 2px;
}
.msr-wiz-panel-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0 0 4px;
}
.msr-wiz-panel-lede {
  font-size: 13px;
  color: var(--ink-600);
  line-height: 1.55;
  margin: 0;
}
.msr-wiz-panel-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}

/* ─── Detail panel inherits these from old card CSS ────────────────── */
.msr-wizard-card-section {
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-700);
  margin: 4px 0 -2px;
  display: flex; align-items: center; gap: 6px;
}
.msr-wizard-card-section::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--steel-600);
}
.msr-wizard-card-mats {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.msr-wizard-card-mats li {
  font-size: 13px;
  color: var(--ink-700);
  line-height: 1.55;
  padding-left: 14px;
  position: relative;
}
.msr-wizard-card-mats li::before {
  content: '';
  position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--steel-600);
  opacity: .55;
}
.msr-wizard-card-mat-link {
  color: var(--steel-600);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.msr-wizard-card-mat-link:hover { border-bottom-color: var(--steel-600); }
.msr-wizard-card-mat-link:focus-visible {
  outline: 2px solid var(--steel-600);
  outline-offset: 2px;
  border-radius: 2px;
}
.msr-wizard-card-confirm {
  font-size: 12.5px;
  color: var(--ink-700);
  background: var(--paper-alt);
  border-left: 3px solid var(--steel-600);
  padding: 10px 12px 10px 32px;
  margin: 4px 0 0;
  line-height: 1.5;
  border-radius: 0 4px 4px 0;
  position: relative;
}
.msr-wizard-card-confirm::before {
  content: '';
  position: absolute;
  left: 10px; top: 12px;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e4fa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
  background-repeat: no-repeat; background-size: contain;
}
.msr-wizard-card-confirm strong { color: var(--ink-900); font-weight: 700; }

/* Filter CTA in detail panel — primary action style */
.msr-wizard-card-filter {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  padding: 12px 20px;
  background: var(--steel-600);
  border: 1px solid var(--steel-600);
  border-radius: 6px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.msr-wizard-card-filter:hover {
  background: var(--steel-700);
  border-color: var(--steel-700);
  box-shadow: 0 4px 14px rgba(30,79,163,.3);
}
.msr-wizard-card-filter:focus-visible {
  outline: 2px solid var(--steel-600);
  outline-offset: 2px;
}
.msr-wizard-card-filter:active { transform: translateY(1px); }
.msr-wizard-card-filter.msr-wizard-btn:hover {
  background: var(--steel-700);
  border-color: var(--steel-700);
  color: #fff;
  box-shadow: 0 4px 14px rgba(30,79,163,.3);
}

/* Mobile: chips stack 1-col, filter button full-width */
@media (max-width: 599px) {
  .msr-wiz-chips { grid-template-columns: 1fr; gap: 8px; }
  .msr-wiz-chip { padding: 14px 16px; }
  .msr-wiz-state--detail { padding: 18px; }
  .msr-wiz-panel-head { gap: 12px; padding-bottom: 12px; }
  .msr-wiz-panel-title { font-size: 17px; }
  .msr-wizard-card-filter { width: 100%; justify-content: center; }
}
@media (max-width: 959px) and (min-width: 600px) {
  .msr-wiz-chips { grid-template-columns: repeat(2, 1fr); }
}

/* Reduced motion: kill all wizard animations and transitions */
@media (prefers-reduced-motion: reduce) {
  .msr-wiz-state, .msr-wiz-chip, .msr-wizard-card-filter, .msr-wiz-back svg { transition: none; animation: none; }
  .msr-wiz-chip:hover, .msr-wizard-card-filter:active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Wizard panel container animation + keyframes (referenced above)
   ═══════════════════════════════════════════════════════════════════ */
.msr-wizard { animation: msr-wiz-fade var(--dur-base) var(--ease-out); }
@keyframes msr-wiz-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .msr-wizard { animation: none; }
}

/* Legacy single-button layout — preserved for fallback / non-card usage. */
.msr-wizard-btn:not(.msr-wizard-card-filter) {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.msr-wizard-btn:not(.msr-wizard-card-filter):hover {
  border-color: var(--steel-600);
  background: #EEF3FC;
  box-shadow: 0 2px 8px rgba(30,79,163,.1);
}

.msr-wizard-ic { color: var(--steel-600); margin-bottom: 4px; flex-shrink: 0; }
.msr-wizard-label { font-size: 13px; font-weight: 600; color: var(--ink-900); line-height: 1.35; }
.msr-wizard-eg { font-size: 11px; font-family: var(--font-mono); color: var(--ink-400); line-height: 1.45; }
.msr-wizard-skip { margin: 0; text-align: center; }
.msr-wizard-close {
  font-size: 12px;
  color: var(--ink-400);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.msr-wizard-close:hover { color: var(--ink-700); }

/* ============================================================
 * MATERIALS — FAQ SECTION
 * Native <details>/<summary> accordion, no JS.
 * ============================================================ */
.mat-faq-section { border-top: 1px solid var(--line); }
.mat-faq-head { margin-bottom: 40px; }
.mat-faq-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -.02em;
  margin: 8px 0 0;
}

.mat-faq-item {
  border-top: 1px solid var(--line);
}
.mat-faq-item:last-child { border-bottom: 1px solid var(--line); }

.mat-faq-q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
  user-select: none;
  letter-spacing: -.01em;
}
.mat-faq-q::-webkit-details-marker { display: none; }
.mat-faq-q::after {
  content: '+';
  font-size: 20px;
  font-weight: 300;
  color: var(--steel-600);
  flex-shrink: 0;
  line-height: 1;
  transition: transform .2s;
}
.mat-faq-item[open] > .mat-faq-q::after { content: '\2212'; }

.mat-faq-a {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-500);
  padding-bottom: 24px;
  max-width: 720px;
}

/* Flat 6-column material card grid */
.msr-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.msr-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.msr-card:hover {
  border-color: var(--steel-600);
  box-shadow: 0 2px 12px rgba(30, 79, 163, .1);
  transform: translateY(-1px);
}
.msr-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.35;
}
.msr-cat {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

/* Category label colours */
.msr-cat--general          { color: var(--ink-500); }
.msr-cat--high-performance { color: #A07630; }
.msr-cat--static-control   { color: var(--steel-600); }
.msr-cat--insulating       { color: #4A7A54; }
.msr-cat--rubber           { color: #8B3E3E; }
.msr-cat--industrial       { color: var(--ink-600); }
.msr-cat--panel-display    { color: #0F766E; }

/* hidden attribute must beat display:flex/grid on card and empty-state */
.msr-card[hidden],
.msr-empty[hidden] { display: none !important; }

/* ============================================================
 * [PHASE 3A] MATERIALS GRID — visual material cards
 * Scoped to #msr-grid and .msr-card--img ONLY. The base .msr-card
 * and the Industrial Supplies grid (.is-group .msr-card, which has
 * no --img modifier) are intentionally left untouched.
 * ============================================================ */
#msr-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }

.msr-card--img {
  padding: 0;
  gap: 0;
  overflow: hidden;
  min-width: 0;
}
.msr-card--img .msr-card-img {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--paper-alt, #f1f3f5);
  border-bottom: 1px solid var(--line);
}
.msr-card--img .msr-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}
.msr-card--img .msr-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 12px;
  min-width: 0;
}
.msr-card--img .msr-name { overflow-wrap: anywhere; }
.msr-card--img .msr-card-tagline {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-500);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msr-card--img .msr-card-forms {
  font-size: 11px;
  color: var(--ink-400, #8a93a0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: 1px;
}
/* keep the guide dot legible on top of the image */
.msr-card--img .msr-guide-badge { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }

@media (max-width: 959px) {
  #msr-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 639px) {
  #msr-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Industrial Supplies & Accessories page (page-industrial-supplies.php) */
.is-group { margin-top: 40px; }
.is-group:first-of-type { margin-top: 8px; }
.is-group .msr-grid { grid-template-columns: repeat(3, 1fr); }
.is-card-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-500);
  margin-top: 2px;
}
@media (max-width: 959px) {
  .is-group .msr-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .is-group .msr-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * [PHASE 3B-3] INDUSTRIAL SUPPLIES — visual catalogue cards
 * Dedicated .is-* selectors so this page stays decoupled from
 * the Materials .msr-card system (#msr-grid scope is untouched).
 * Cards are image-ready: each ships with a 1:1 image slot that
 * shows a subtle group-icon placeholder in 3B-3 and accepts a
 * real WebP in 3B-4 with no markup change.
 * ============================================================ */

/* Group section header */
.is-group-head { margin-bottom: 20px; }
.is-group-title {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 20px; font-weight: 800; letter-spacing: -.01em;
  color: var(--ink-900);
  margin: 0;
}
.is-group-count {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--ink-400); letter-spacing: .08em;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 99px;
}
.is-group-desc {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-500);
  margin: 6px 0 0;
  max-width: 580px;
}

/* Card grid — flex with center justification so short groups (2 items) and
   wider groups (4 items wrapped) sit centered within the container instead
   of leaving an awkward empty cell on the right. Card width is constant
   across all groups for cross-group visual cohesion. */
.is-grid {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 4px;
}
.is-card {
  width: 280px;
  flex-shrink: 0;
  min-width: 0;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.is-card:hover {
  border-color: var(--steel-600);
  box-shadow: 0 2px 12px rgba(30, 79, 163, .10);
  transform: translateY(-1px);
}
.is-card:focus-visible {
  outline: 2px solid var(--steel-600);
  outline-offset: 2px;
}

/* 1:1 image area — aspect-ratio locked so layout is identical whether a
   real WebP exists (Phase 3B-4) or the placeholder is shown. */
.is-card-img {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--paper-alt, #f1f3f5);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.is-card-img img {
  display: block;
  width: 100%; height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}
.is-card-img-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-300, #b8c0cc);
}
.is-card-img-placeholder svg { width: 56px; height: 56px; opacity: .85; }

/* Card body — name, description, meta row pinned to bottom. */
.is-card-body {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
  flex: 1;
  min-width: 0;
}
.is-card-name {
  font-size: 14px; font-weight: 700;
  color: var(--ink-900);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
/* Re-scope the existing .is-card-desc inside the new card (higher
   specificity than the top-level .is-card-desc rule above). */
.is-card .is-card-desc {
  font-size: 12.5px; line-height: 1.45;
  color: var(--ink-500);
  margin-top: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.is-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}
.is-card-meta-tag {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-400);
}
.is-card-action {
  font-size: 12px; font-weight: 700;
  color: var(--steel-600);
  white-space: nowrap;
}
.is-card:hover .is-card-action { color: var(--steel-700); }

/* Responsive: tablet 2-col stretched, mobile 1-col full-width. */
@media (max-width: 959px) {
  .is-card { width: calc((100% - 16px) / 2); }
}
@media (max-width: 599px) {
  .is-card { width: 100%; }
  .is-group-title { font-size: 18px; }
}

/* Empty state */
.msr-empty {
  padding: 56px 0;
  text-align: center;
  color: var(--ink-500);
  font-size: 15px;
  line-height: 1.6;
}
.msr-empty-reset {
  background: none;
  border: none;
  padding: 0;
  color: var(--steel-600);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}
.msr-empty-reset:hover { color: var(--ink-900); }

/* Responsive */
@media (max-width: 1199px) {
  .msr-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 959px) {
  .mat-overview       { grid-template-columns: repeat(2, 1fr); }
  .mat-ov-note        { flex-direction: column; align-items: flex-start; }
  .msr-grid           { grid-template-columns: repeat(3, 1fr); }
  .msr-title          { font-size: 28px; }
  .msr-wizard-grid    { grid-template-columns: repeat(2, 1fr); }
  .msr-bar            { min-width: 0; }
}
@media (max-width: 599px) {
  .msr-wizard-grid    { grid-template-columns: 1fr; }
  .msr-wizard-toggle  { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mat-faq-title      { font-size: 26px; }
}
@media (max-width: 699px) {
  .msr-grid  { grid-template-columns: repeat(3, 1fr); }
  .msr-count { display: none; }
}
@media (max-width: 499px) {
  .mat-overview { grid-template-columns: 1fr; }
  .msr-grid     { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
 * QUOTE FORM — MATERIAL PRE-FILL BANNER
 * Shown in Section 02 when ?material= URL parameter is set.
 * ============================================================ */
/* ============================================================
 * QUOTE FORM — Prefill card (replaces simple banner)
 * ============================================================ */
.qf-prefill-card {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--steel-600);
  border-radius: 4px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.qf-prefill-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.qf-prefill-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.qf-prefill-card-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel-600);
}
.qf-prefill-card-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -.01em;
}
.qf-prefill-card-cat {
  font-size: 11px;
  color: var(--ink-500);
  font-family: var(--font-mono);
}
.qf-prefill-card-change {
  font-size: 12px;
  font-weight: 600;
  color: var(--steel-600);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.qf-prefill-card-change:hover { color: var(--steel-700); }

/* ============================================================
 * QUOTE FORM — Advisory notes (ESD / high-perf / rubber)
 * ============================================================ */
.qf-advisory {
  font-size: 13px;
  line-height: 1.55;
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.qf-advisory strong { font-weight: 700; }
.qf-advisory--esd    { background: #EEF3FC; border: 1px solid #C0D0EE; color: #1a3a6b; }
.qf-advisory--hp     { background: #FDF6EC; border: 1px solid #E8D5A8; color: #6b4a10; }
.qf-advisory--rubber { background: #FDF0F0; border: 1px solid #E8BFBF; color: #6b2020; }
.qf-advisory--info   { background: var(--paper-alt); border: 1px solid var(--line); color: var(--ink-600); }

/* Industrial-supplies signpost under the Material dropdown (direct /quote/ entry).
   Subtle steel-tinted note so it reads as a helpful pointer, not a warning. */
.qf-supplies-note {
  margin: 12px 0 0;
  padding: 11px 14px;
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--ink-600);
  background: var(--steel-50);
  border: 1px solid var(--steel-100);
  border-radius: 4px;
}
.qf-supplies-note a {
  color: var(--steel-700);
  font-weight: 600;
  text-decoration: none;
}
.qf-supplies-note a:hover { text-decoration: underline; }

/* ============================================================
 * QUOTE FORM — Form-factor selector cards
 * ============================================================ */
.qf-ff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.qf-ff-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.qf-ff-card input { position: absolute; opacity: 0; pointer-events: none; }
.qf-ff-card:hover { border-color: var(--ink-500); }
.qf-ff-card--on {
  border-color: var(--steel-600);
  background: #EEF3FC;
  box-shadow: 0 0 0 2px rgba(30,79,163,.12);
}
.qf-ff-ic { color: var(--ink-400); transition: color var(--dur-fast) var(--ease-out); }
.qf-ff-card--on .qf-ff-ic { color: var(--steel-600); }
.qf-ff-name { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.qf-ff-dim { font-size: 10px; font-family: var(--font-mono); color: var(--ink-400); letter-spacing: .04em; }
.qf-ff-dims { margin-bottom: 4px; }

/* ============================================================
 * QUOTE FORM — Phase 2B target selector ("What are you looking for?")
 * Reuses .qf-ff-card for the box/selected styling; adds a prose sub-label
 * and a 4→2 column responsive grid. See memory/quote_phase_2b_selector_decision.md
 * ============================================================ */
.qf-target-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.qf-target-card { justify-content: flex-start; gap: 7px; padding: 16px 14px 14px; }
.qf-target-card .qf-ff-name { font-size: 14px; }
.qf-target-desc {
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-500);
  text-align: center;
}
/* Progressive disclosure: a hidden block must collapse even when it also
   carries a display-bearing class such as .qf-field (higher specificity than
   the UA [hidden] rule). */
.qf-when[hidden] { display: none !important; }
@media (max-width: 959px) {
  .qf-target-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
 * Phase 2C — Quote form polish
 * iOS Safari zoom prevention · touch targets · focus-visible
 * All rules scoped to .qf-form or quote-specific selectors
 * to avoid affecting other pages or global form elements.
 * ============================================================ */

/* 1 — iOS Safari: inputs < 16 px trigger viewport auto-zoom on tap.
       Override the 14 px base only within the Quote form. */
.qf-form .qf-input,
.qf-form .qf-select,
.qf-form .qf-textarea { font-size: 16px; }

/* 2 — Touch height: raise input/select from 42 px to 44 px. */
.qf-form .qf-input,
.qf-form .qf-select { height: 44px; }

/* 3 — Touch target: minimum 44 px tap area for chips; span visually
       centred within the label's tap zone (label = full hit area). */
.qf-form .qf-chip {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.qf-form .qf-chip span { padding: 11px 16px; }

/* 4 — Focus-visible: card selectors (target cards + form-factor cards).
       The hidden radio receives keyboard focus; :has() lifts that state
       to the card label as a 2 px outline — no layout shift. */
.qf-form .qf-ff-card:has(input:focus-visible) {
  outline: 2px solid var(--steel-600);
  outline-offset: 2px;
}

/* 5 — Focus-visible: enquiry type chips. */
.qf-form .qf-chip:has(input:focus-visible) span {
  outline: 2px solid var(--steel-600);
  outline-offset: 2px;
}

/* 6 — Focus-visible: action buttons and secondary link. */
.qf-form .qf-submit-btn:focus-visible,
.qf-form .qf-wa-btn:focus-visible,
.qf-form .qf-submit-secondary:focus-visible {
  outline: 2px solid var(--steel-600);
  outline-offset: 2px;
}

/* 7 — Grid min-width fix: CSS Grid items default to min-width:auto, which
       lets them expand the 1fr track beyond available space on narrow screens.
       Override to allow the form and aside to shrink to their grid-track width. */
.qf-form,
.qf-aside { min-width: 0; }

/* 8 — Target-card layout: 2-col grid is too cramped at ≤540 px (~115 px per
       card). Collapse to 1-col so each card has full content width. */
@media (max-width: 540px) {
  .qf-target-grid { grid-template-columns: 1fr; }
}

/* 9 — qf-field grid-item overflow: inside each .qf-row, .qf-field has
       min-width:auto which lets the row track expand to the field's
       min-content (driven by the phone row intrinsic size, ~381 px at 16 px
       font). Setting min-width:0 clamps the track to the section content width. */
.qf-form .qf-field { min-width: 0; }

/* 10 — Phone input in narrow rows: with flex default (0 1 auto) the input
        holds its intrinsic preferred width and won't shrink enough.
        flex:1 + min-width:0 lets it fill remaining space after the fixed
        120 px country-code select and 8 px gap. */
.qf-form .qf-phone-row .qf-input { flex: 1; min-width: 0; }

/* ============================================================
 * SMALL LAPTOP / TABLET LANDSCAPE
 * ============================================================ */
@media (max-width: 1100px) {
  /* About hero — collapse to 1-col, hide right panel, free up H1 width */
  .ab-hero-layout { grid-template-columns: 1fr; gap: 0; }
  .ab-hero-panel { display: none; }
  .ab-hero-copy .pg-h1 { max-width: none; }
  /* Process cards — 4-col → 2-col (heavy padded cards get cramped) */
  .wp-grid.wp-grid--4 { grid-template-columns: repeat(2, 1fr); }
  /* Section 3 pillars — 4-col → 2-col (222px per card at 1024 is too tight) */
  .ab-pillars.ab-pillars--4 { grid-template-columns: repeat(2, 1fr); }
  /* Final CTA title — start scaling early so it does not 4-line wrap in
     the 2-col .wq-inner layout (still 2-col here, drops to 1-col at 959) */
  .wq-title { font-size: 48px; }
}

/* ============================================================
 * MOBILE
 * ============================================================ */
@media (max-width: 959px) {
  .wh-title { font-size: 48px; }
  .wh-inner { padding: 64px var(--gutter) 80px; }
  .wh-specs { grid-template-columns: repeat(2, 1fr); }
  .wc-grid, .wt-ind-grid { grid-template-columns: repeat(2, 1fr); }
  .wt-stats { grid-template-columns: repeat(2, 1fr); }
  .wp-grid { grid-template-columns: 1fr; }
  .wq-inner { grid-template-columns: 1fr; gap: 40px; }
  .wq-title { font-size: 48px; }
  .wf-top { grid-template-columns: 1fr; gap: 40px; }
  .wf-cols { grid-template-columns: repeat(2, 1fr); }
  .wf-cta-inner { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px var(--gutter); }
  .wf-cta-h { font-size: 19px; }
  .wf-cta-actions { width: 100%; }
  .wf-cta-actions .wq-btn { flex: 1; justify-content: center; }
  .pg-h1 { font-size: 40px; }
  .mat-index { grid-template-columns: 1fr; }
  .mat-side { position: static; }
  .svc-row { grid-template-columns: 1fr; }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-trust-sep { display: none; }
  .ind-trust-item { padding: 8px 20px; }
  .ab-pillars { grid-template-columns: 1fr; }
  .ab-pillars.ab-pillars--4 { grid-template-columns: repeat(2, 1fr); }
  .ab-hero-copy .pg-h1 { font-size: 40px; }
  .ab-feat { grid-template-columns: 1fr; gap: 40px; }
  .ab-feat-left { position: static; }
  .ab-feat-h { font-size: 28px; }
  .ab-cta-strip-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .ab-cta-strip-text { font-size: 20px; }
  .ab-fact { min-width: 40%; }
  .ct-grid { grid-template-columns: 1fr; }
  .ct-band { grid-template-columns: 1fr; }
  .ct-tile { border-right:none; border-bottom:1px solid var(--line); }
  .qf-layout { grid-template-columns: 1fr; }
  .qf-aside { position:static; }
  .qf-row, .qf-row--3 { grid-template-columns: 1fr; }
  .qf-wa-sticky { display: inline-flex; }
  .qf-submit { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .qf-actions { grid-auto-flow: row; grid-auto-columns: 1fr; }
  .qf-ff-grid { grid-template-columns: repeat(2, 1fr); }
  .qf-prefill-card-body { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
 * TABLET PORTRAIT
 * ============================================================ */
@media (max-width: 768px) {
  /* Tighten generic section padding (still comfortable) */
  .pg-section { padding: 64px 0; }
  /* Section 2 facts row: 4-up → 2x2 grid */
  .ab-fact { flex: 1 1 50%; min-width: 0; }
  .ab-fact:nth-child(2n) { border-right: none; }
  .ab-fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ============================================================
 * SMALL SCREEN (phone)
 * ============================================================ */
@media (max-width: 540px) {
  .ind-grid { grid-template-columns: 1fr; }
  .ab-pillars.ab-pillars--4 { grid-template-columns: 1fr; }
  .wp-grid.wp-grid--4 { grid-template-columns: 1fr; }
  /* Category panels: 2-col → 1-col on small phones */
  .wm-cat-grid { grid-template-columns: 1fr; }
  .ab-fact { min-width: 100%; border-right: none; border-bottom: 1px solid var(--line); }
  .ab-fact:last-child { border-bottom: none; }
  .pg-hero-meta { gap: 6px; }
  .pg-hero-meta span { font-size: 11px; padding: 4px 10px; }
  /* Section padding: comfortable on mobile */
  .pg-section { padding: 56px 0; }
  /* Section title: less dominant on small screens */
  .pg-sec-title { font-size: 30px; }
  /* Lede: lighter at mobile width */
  .ab-lede { font-size: 22px; line-height: 1.4; }
  /* Capability checklist: reduce left padding so body copy has more width */
  .ab-feat-list li { padding: 20px 20px 20px 44px; }
  .ab-feat-list li::before { left: 20px; top: 28px; }
  /* Hero H1: 40px feels heavy on ~430px phones; drop to 36px in this window */
  .ab-hero-copy .pg-h1 { font-size: 36px; }
  /* Hero CTA buttons: full-width, easy tap targets */
  .pg-hero-actions { width: 100%; }
  .pg-hero-actions .wq-btn { width: 100%; justify-content: center; }
  /* Final CTA: scale title and stack buttons full-width */
  .wq-title { font-size: 36px; }
  .wq-actions { width: 100%; }
  .wq-actions .wq-btn { width: 100%; justify-content: center; }
  /* Mid-page CTA strip: existing rules — full-width buttons */
  .ab-cta-strip-actions { width: 100%; }
  .ab-cta-strip-actions .wq-btn { flex: 1; justify-content: center; }
  /* Capability grid: 2-col is too narrow below 540px — switch to single column */
  .wc-grid { grid-template-columns: 1fr; }
  /* Home hero: reduce title, compress padding, stack CTA buttons */
  .wh-title { font-size: 36px; }
  .wh-inner { padding: 48px var(--gutter) 64px; }
  .wh-ctas { flex-wrap: wrap; }
  .wh-ctas .wh-btn { width: 100%; justify-content: center; }
  /* Material tabs: scroll horizontally instead of overflowing page */
  .wm-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  /* Materials rail: reflow from horizontal scroll to vertical stack */
  .wm-rail { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow-x: visible; }
  /* Process strip: hide dashed connectors when steps stack vertically */
  .wp-step::after { display: none; }
  /* Category panels: 4-col → 2-col on phones */
  .wm-cat-grid { grid-template-columns: repeat(2, 1fr); }
  /* "Browse all" head link: hide on narrow to avoid awkward wrapping with title */
  .wm-head-link { display: none; }
  /* Home hero specs: 2-col too cramped on phones */
  .wh-specs { grid-template-columns: 1fr; }
  /* Quote form-factor selector: 2-col too tight on phones */
  .qf-ff-grid { grid-template-columns: 1fr; }
  /* Materials search bar: allow flex shrink; remove right-padding reserved for hidden count badge */
  .msr-bar { min-width: 0; }
  .msr-input { min-width: 0; padding-right: 16px; }
}

/* ============================================================
 * SMALL PHONE (≤390 — iPhone 12/13/14/15 standard, smaller Android)
 * ============================================================ */
@media (max-width: 390px) {
  /* Hero H1 — drop further on tightest phones */
  .pg-h1 { font-size: 32px; }
  .ab-hero-copy .pg-h1 { font-size: 32px; }
  /* Home hero title — smallest phones */
  .wh-title { font-size: 30px; }
  /* Final CTA title — comfortable at 30px */
  .wq-title { font-size: 30px; }
  /* Process step number — less visually dominant when stacked */
  .wp-n { font-size: 36px; }
  /* Materials searchable grid: 2-col too cramped at 390px and below */
  .msr-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * VERY SMALL PHONE (≤420) — Phase 3M-2F-2 responsive overflow fixes
 * Footer link grid and homepage trust-band stats stay multi-column too far
 * down (only a 959px breakpoint exists above), so at ~320-360px the unbreakable
 * contact email and the 56px mono stat numbers exceed their grid tracks and
 * force a horizontal page scroll. Mobile-only; desktop/tablet layouts unchanged.
 * ============================================================ */
@media (max-width: 420px) {
  /* Footer: 2-col link grid → 1-col; let the email/url break; allow shrink. */
  .wf-cols { grid-template-columns: 1fr; gap: 28px; }
  .wf-contact a { overflow-wrap: anywhere; word-break: break-word; }
  .wf-top, .wf-cols > * { min-width: 0; }

  /* Trust band: 2-col stats → 1-col stack; swap right border for bottom border;
     trim padding and tame the 56px number so it never clips. */
  .wt-stats { grid-template-columns: 1fr; }
  .wt-stat { padding: 20px 0; border-right: none; border-bottom: 1px solid var(--line); min-width: 0; }
  .wt-stat:not(:first-child) { padding-left: 0; }
  .wt-stat:last-child { border-bottom: none; }
  .wt-v { font-size: 44px; }

  /* Homepage materials rail: a stale duplicate rule (in the <=540 block above)
     re-expands this grid to 2-col, which overflows ~26px at 320px. Force 1-col
     on tiny phones — matches the original "2-col -> 1-col on small phones" intent. */
  .wm-cat-grid { grid-template-columns: 1fr; }

  /* Contact tiles: the 1-col band item can't shrink below its mono phone/email
     value (grid item default min-width:auto) and the value can't break, pushing
     ~12px past 320px. Let the item shrink, let long values wrap, trim padding. */
  .ct-tile { min-width: 0; padding: 24px 18px 26px; }
  .ct-tile .v, .ct-tile .link { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
 * SOCIAL PROOF LINKS (Phase 3M-2G-2)
 * Secondary external proof CTAs — Facebook (recent project / fabrication
 * updates) + Google Maps business profile (location, reviews, photos).
 * Subordinate to the primary Quote / WhatsApp actions; never styled as a
 * social-media promo banner or as primary navigation. Every link is empty-URL
 * guarded in PHP, so these styles only take effect when a link actually renders.
 * ============================================================ */

/* Shared proof "chip" button — light-background contexts (homepage Selected Work
   strip + Contact map profile link). max-width:100% lets long labels wrap rather
   than overflow on narrow phones; min-height keeps a 44px touch target. */
.proof-btn {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%; min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 4px;
  background: #fff; color: var(--ink-700);
  font-size: 13px; font-weight: 600; line-height: 1.3; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.proof-btn:hover { border-color: var(--ink-400); color: var(--ink-900); background: var(--paper-alt); }
.proof-btn:focus-visible { outline: 2px solid var(--steel-600); outline-offset: 2px; }
.proof-btn-ic { flex-shrink: 0; color: var(--steel-600); }

/* ── Homepage "Proof of work" band (Phase 3M-2I-3) ─────────────────────────
   Dedicated trust block between Selected Work and the final quote CTA. Light
   tinted band; white cards read as evidence and are deliberately NOT styled as
   the quote / WhatsApp button family. Replaces the old low-contrast .sw-proof
   strip. Two whole-card external links (Google rating-led + Facebook). */
.sp { padding: clamp(40px, 6vw, 72px) var(--gutter); background: var(--paper-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sp-inner { max-width: var(--container); margin: 0 auto; }
.sp-head { max-width: 640px; margin: 0 0 28px; }
.sp-title { margin: 10px 0; font: var(--fw-800) clamp(24px, 3.2vw, 32px)/1.1 var(--font-sans); letter-spacing: -0.02em; color: var(--ink-900); text-wrap: balance; }
.sp-lede { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-500); }

.sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
/* Recognition redesign (Phase 3M-2L-1): destination cards with a large brand
   badge, big platform label, prominent rating, and a button-like CTA — readable
   in 1–2s. Controlled colour accents only (badge + icon + gold stars); cards stay
   white, CTA stays a steel ghost pill so it never outranks the Quote/WhatsApp CTAs. */
.sp-card {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; color: var(--ink-700);
  box-shadow: 0 1px 2px rgba(11,18,32,.04);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sp-card:hover { transform: translateY(-4px); border-color: var(--ink-400); box-shadow: 0 16px 34px rgba(11,18,32,.12); }
.sp-card:focus-visible { outline: 2px solid var(--steel-600); outline-offset: 3px; }

.sp-head-row { display: flex; align-items: center; gap: 14px; }
.sp-badge { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0; }
.sp-badge .sp-ic { display: block; }
.sp-badge--google { background: rgba(26,115,232,.10); color: #1A73E8; }   /* Google Maps / blue map accent */
.sp-badge--fb { background: rgba(24,119,242,.10); color: #1877F2; }       /* Facebook blue accent */
.sp-label { font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-900); }

.sp-proof { display: flex; flex-direction: column; gap: 6px; }
.sp-stars { display: inline-flex; gap: 3px; color: #E8A100; }             /* gold review stars */
.sp-stars .sp-star { display: block; }
.sp-rating { font-size: 15px; color: var(--ink-500); }
.sp-score { font-size: 24px; font-weight: 800; color: var(--ink-900); font-feature-settings: "tnum" 1; }
.sp-count { font-weight: 600; }
.sp-proof--text { font-size: 23px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink-900); }

.sp-body { font-size: 14px; line-height: 1.5; color: var(--ink-500); }

.sp-cta {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 9px 18px; border: 1px solid var(--steel-600); border-radius: 8px;
  background: #fff; font-size: 14px; font-weight: 700; color: var(--steel-600);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sp-arrow { transition: transform var(--dur-fast) var(--ease-out); }
.sp-card:hover .sp-cta { background: var(--steel-600); color: #fff; border-color: var(--steel-600); }
.sp-card:hover .sp-arrow { transform: translateX(4px); }

@media (max-width: 640px) {
  .sp-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-card, .sp-arrow, .sp-cta { transition: none; }
  .sp-card:hover { transform: none; }
  .sp-card:hover .sp-arrow { transform: none; }
}

/* Contact — business-profile button below the routing "Get directions" CTA. */
.ct-map-profile { margin-top: 16px; }

/* Footer — official-channel links upgraded to subtle bordered icon-buttons
   (Phase 3M-2I-3). More legible than the old ~60%-white text links, but kept
   monochrome / white-muted (no colourful social branding) and footer-appropriate.
   Lives in the brand column, NOT the nav columns. Text labels preserved. */
.wf-social { margin-top: 4px; }
.wf-social-h {
  display: block; margin-bottom: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: #fff;
}
.wf-social-row { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.wf-social-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.82); text-decoration: none;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.18); border-radius: 6px;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.wf-social-link:hover { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.wf-social-link:focus-visible { outline: 2px solid var(--steel-400); outline-offset: 2px; }
.wf-social-ic { flex-shrink: 0; color: rgba(255,255,255,.7); transition: color var(--dur-fast) var(--ease-out); }
.wf-social-link:hover .wf-social-ic { color: #fff; }

/* Services hero — small secondary Facebook proof link on the dark hero. */
.pg-hero-social { margin: 16px 0 0; }
.pg-hero-social a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--steel-400);
  text-decoration: none; transition: color var(--dur-fast) var(--ease-out);
}
.pg-hero-social a:hover { color: #fff; }
.pg-hero-social a:focus-visible { outline: 2px solid var(--steel-400); outline-offset: 3px; border-radius: 3px; }

/* Quote aside — one-line reassurance proof link inside "Prefer to talk first?". */
.qf-aside-social {
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.5; color: var(--ink-500);
}
.qf-aside-social a { color: var(--steel-600); font-weight: 600; text-decoration: none; }
.qf-aside-social a:hover { color: var(--steel-700); text-decoration: underline; }
.qf-aside-social a:focus-visible { outline: 2px solid var(--steel-600); outline-offset: 2px; border-radius: 3px; }

/* Tiny phones: stack the Contact map-profile chip full-width so its long label
   never overflows. (The old homepage proof strip these once also covered is gone
   — replaced by the responsive .sp band, which stacks via its own 640px rule.) */
@media (max-width: 420px) {
  .ct-map-profile .proof-btn { width: 100%; justify-content: center; }

  /* Pre-existing (surfaced by this phase's /quote/ @320 QA, not introduced here):
     the submit / WhatsApp buttons keep white-space:nowrap, so their uppercase
     labels force ~291px min-content and overflow ~28px at 320px. Let them wrap
     within the narrow column. CSS only — no change to submit/validation behaviour. */
  .qf-actions > .qf-submit-btn,
  .qf-actions > .qf-wa-btn {
    white-space: normal; min-width: 0;
    height: auto; min-height: 52px; padding: 12px 18px; line-height: 1.3;
  }
}

/* ============================================================
 * [PHP-PORT] SCROLL REVEAL
 * Gated on .js (added to <html> by an inline script in header.php).
 * Without JS the .reveal class is fully visible — no hidden content.
 * ============================================================ */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
 * [PHP-PORT] MATERIAL GRID — guide badge
 * .msr-card--guide links to a full material detail page.
 * ============================================================ */
.msr-card { position: relative; }
.msr-guide-badge {
  /* Guide indicator — small dot in top-right corner, no text */
  position: absolute; top: 9px; right: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--steel-600);
  font-size: 0; line-height: 0; /* hide any legacy text content */
}

/* ============================================================
 * [PHP-PORT] MATERIAL DETAIL PAGE (.md-*)
 * ============================================================ */

/* ── Hero ──────────────────────────────────────────────────────────────── */
/* Sits inside .pg-hero (dark navy bg) — all text is light. */
.md-hero { padding-bottom: 0; }
.md-cat-badge {
  display: inline-block;
  padding: 4px 12px; margin-bottom: 18px;
  border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.85);
}
.md-cat-badge--high-performance { background: #fff4e0; color: #7a4f00; }
.md-cat-badge--general          { background: #e8f4ff; color: #004d8c; }
.md-cat-badge--static-control   { background: #f0f0ff; color: #3d3dae; }
.md-cat-badge--insulating       { background: #f0ffe8; color: #2a6200; }
.md-cat-badge--rubber           { background: #fff0f0; color: #8c0000; }
.md-cat-badge--industrial       { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.md-cat-badge--panel-display    { background: #e6f7f5; color: #0a5c54; }

.md-name     { font-size: 56px; font-weight: 800; line-height: 1.02; letter-spacing: -.025em; color: #fff; margin: 0 0 8px; }
.md-fullname { font-size: 17px; color: rgba(255,255,255,.6); margin: 0 0 18px; font-weight: 400; }
.md-tagline  { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.78); margin: 0 0 28px; max-width: 680px; }

.md-forms { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
.md-form-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 6px;
  font-size: 13px; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.05);
}

/* ── Optional hero side image ──────────────────────────────────────────── */
/* Active only when hero_image key exists in MATERIALS_DATA.                */
/* Without .md-hero--with-img the hero is unchanged — no blank space.       */
.md-hero-text { min-width: 0; }
.md-hero--with-img .pg-hero-inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
}
.md-hero-img-wrap { border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
.md-hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Phase 3B-5: 1:1 square variant of the detail hero image. Used by the
   industrial supply detail page (page-industrial-supply.php) so the hero
   crop matches the listing card's 1:1 product photo exactly. Higher
   specificity than the base .md-hero-img-wrap rules so it wins at both
   desktop (base) and mobile (the @media override below) without touching
   the Materials detail hero. */
.md-hero-img-wrap.md-hero-img-wrap--square { aspect-ratio: 1 / 1; }

/* ── Two-column layout ─────────────────────────────────────────────────── */
.md-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: start;
  padding: 64px 0 80px;
}
.md-main { min-width: 0; }
.md-aside { position: sticky; top: calc(var(--header-h) + 24px); } /* header height + 24px breathing room */

/* ── Section heading ───────────────────────────────────────────────────── */
.md-sec-h { font-size: 22px; font-weight: 700; color: var(--ink-900); margin: 0 0 20px; }

/* ── Divider ───────────────────────────────────────────────────────────── */
.md-divider { border: none; border-top: 1px solid var(--line); margin: 44px 0; }

/* ── Overview ──────────────────────────────────────────────────────────── */
.md-overview { font-size: 16px; line-height: 1.8; color: var(--ink-700); margin: 0; }

/* ── Working properties ────────────────────────────────────────────────── */
.md-props { list-style: none; padding: 0; margin: 0; }
.md-prop { border-top: 1px solid var(--line); padding: 20px 0; }
.md-prop:last-child { border-bottom: 1px solid var(--line); }
.md-prop-label {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-900); margin: 0 0 6px;
}
.md-prop-body { font-size: 15px; line-height: 1.75; color: var(--ink-700); margin: 0; }

/* ── Typical uses ──────────────────────────────────────────────────────── */
.md-uses { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.md-uses li {
  padding: 9px 0 9px 28px;
  background: none; border-radius: 0;
  font-size: 15px; line-height: 1.55; color: var(--ink-700);
  position: relative; border-bottom: 1px solid var(--line);
}
.md-uses li:last-child { border-bottom: none; }
.md-uses li::before {
  content: '→'; position: absolute; left: 2px; top: 10px;
  color: var(--steel-600); font-size: 13px;
}

/* ── Things to confirm ─────────────────────────────────────────────────── */
.md-confirm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.md-confirm-list li {
  padding: 12px 16px 12px 42px;
  border: 1px solid #fde68a; background: #fffbeb; border-radius: 6px;
  font-size: 15px; line-height: 1.55; color: var(--ink-700);
  position: relative;
}
.md-confirm-list li::before {
  content: '!'; position: absolute; left: 13px; top: 12px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #f59e0b; color: #fff;
  font-size: 11px; font-weight: 700; text-align: center; line-height: 18px;
}

/* ── Compare with ──────────────────────────────────────────────────────── */
.md-compare-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.md-compare-item { padding: 16px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.md-compare-name { font-size: 15px; font-weight: 700; color: var(--ink-900); margin: 0 0 4px; }
.md-compare-name--link { display: inline-block; text-decoration: none; color: var(--steel-600); }
.md-compare-name--link:hover { color: var(--steel-700); text-decoration: underline; }
.md-compare-note { font-size: 14px; color: var(--ink-600); line-height: 1.6; margin: 0; }

/* ── Disclaimer ────────────────────────────────────────────────────────── */
.md-disclaimer {
  padding: 16px 20px; background: var(--paper-alt); border-radius: 6px;
  font-size: 13px; color: var(--ink-500); line-height: 1.65;
}
.md-disclaimer-link { color: var(--steel-600); text-decoration: underline; text-underline-offset: 2px; }
.md-disclaimer-link:hover { color: var(--steel-700); }

/* ── Sidebar card ──────────────────────────────────────────────────────── */
.md-aside-card {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 24px; background: var(--paper);
}
.md-aside-head { font-size: 16px; font-weight: 700; color: var(--ink-900); margin: 0 0 4px; }
.md-aside-sub  { font-size: 13px; color: var(--ink-500); margin: 0 0 18px; line-height: 1.5; }
.md-aside-btn {
  display: block; width: 100%; padding: 13px 18px; margin-bottom: 8px;
  background: var(--ink-900); color: #fff; border-radius: 8px;
  text-align: center; text-decoration: none; font-size: 14px; font-weight: 700;
  transition: background var(--dur-fast) var(--ease-out);
}
.md-aside-btn:hover { background: var(--steel-700); }
.md-aside-wa {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px 18px;
  background: #25d366; color: #fff; border-radius: 8px;
  text-decoration: none; font-size: 14px; font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out);
}
.md-aside-wa:hover { background: #1ebe5c; }
.md-aside-divider { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.md-aside-detail { font-size: 13px; color: var(--ink-500); display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.md-aside-detail dt { color: var(--ink-500); font-weight: 600; font-size: 12px; align-self: start; padding-top: 1px; }
.md-aside-detail dd { margin: 0; color: var(--ink-700); line-height: 1.5; }
.md-aside-back { margin-bottom: 14px; text-align: left; }
.md-aside-back a { font-size: 13px; color: var(--ink-500); text-decoration: none; }
.md-aside-back a:hover { color: var(--ink-900); }

/* ── Stub sibling links ────────────────────────────────────────────────── */
.stub-siblings { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.stub-sib-link { display: inline-block; padding: 10px 16px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--steel-600); text-decoration: none; transition: all var(--dur-fast) var(--ease-out); }
.stub-sib-link:hover { background: var(--steel-100); border-color: var(--steel-400); color: var(--steel-700); }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 959px) {
  .md-name    { font-size: 36px; }
  .md-tagline { font-size: 16px; }
  .md-layout  { grid-template-columns: 1fr; gap: 40px; padding: 40px 0 60px; }
  .md-aside   { position: static; }
  .md-hero--with-img .pg-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .md-hero-img-wrap { aspect-ratio: 16 / 9; }
}