/* ═══════════════════════════════════════════════════════════════
   QMW — Product page components
   Extends css/styles.css (tokens, nav, footer, buttons, eyebrows).
   Same system: charcoal base, orange ≤10%, Barlow only, corner
   brackets, no gradients, no left-edge accent rules.
   ═══════════════════════════════════════════════════════════════ */

/* ── Generic card: charcoal-mid surface + engineering crop marks ── */
.pcard {
  background: var(--qmw-charcoal-mid);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  padding: 28px;
  position: relative;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pcard:hover { border-color: rgba(236, 122, 45, 0.30); box-shadow: var(--shadow-2); }
.pcard::before, .pcard::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border: 1.5px solid var(--qmw-orange);
  pointer-events: none;
}
.pcard::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.pcard::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* ── Logo image in nav / footer ── */
.nav__logo-img { height: 30px; width: auto; }
.footer__logo-img { height: 40px; width: auto; }

/* ── Breadcrumb ── */
.crumbs {
  margin-top: var(--nav-h);
  background: var(--qmw-charcoal);
  border-bottom: 1px solid var(--border-hairline);
}
.crumbs__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.crumbs a { color: var(--qmw-slate); transition: color var(--dur) var(--ease); }
.crumbs a:hover { color: var(--qmw-orange); }
.crumbs__sep {
  width: 5px; height: 5px;
  background: var(--qmw-charcoal-light);
  transform: rotate(45deg);
  border-radius: 1px;
  flex-shrink: 0;
}
.crumbs__cur { color: var(--qmw-orange); }

/* ── Product hero ── */
.phero {
  position: relative;
  padding-block: 72px 80px;
  overflow: hidden;
}
/* Full-bleed photographic hero: image spans the viewport, text overlays
   the darkened left side. Choose imagery whose subject sits right of centre —
   never put the product behind the text. */
.phero--bleed {
  min-height: min(78vh, 780px);
  display: flex;
  align-items: center;
  padding-block: 128px 104px;
}
.phero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Self-contain the duotone/grain/scrim z-indexes so they layer over the
     video but never above the headline (grid z-index:2). Previously the
     reveal's clip-path created this context; the fade-in doesn't. */
  isolation: isolate;
  z-index: 0;
}
.phero__bg img,
.phero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, 70% 50%);
}
/* Greyscale-to-colour wash: the text side (left) is desaturated for
   legibility and fades to full colour over the subject on the right.
   `saturation` blend with a neutral grey strips colour; the mask limits
   it to the left, revealing the live image beneath towards the right. */
.phero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #888;
  mix-blend-mode: saturation;
  /* Partial desaturation only: the photo keeps its colour, the text side is
     just calmed down a touch (the full grey wash read as a heavy grey block) */
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 60%);
  pointer-events: none;
}
/* Subject cutout: the person stays full colour above the duotone */
.phero__cutout {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, 70% 50%);
  filter: none !important;
}
/* Subtle film grain over the photography (Brad, July 2026) */
.phero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.phero__scrim { z-index: 3; }
/* Legibility over photography: a light charcoal breath, not a grey wall.
   The text carries its own shadow (same treatment as the homepage reel
   captions), so the photo stays present across the whole frame. */
.phero__scrim {
  position: absolute;
  inset: 0;
  /* deeper on the text side so the type holds on bright/busy photos
     (sunset skies, pale sheds), still clearing to the subject on the right */
  background: linear-gradient(
    90deg,
    rgba(28, 31, 40, 0.82) 0%,
    rgba(28, 31, 40, 0.66) 30%,
    rgba(30, 34, 43, 0.34) 58%,
    rgba(30, 34, 43, 0.08) 100%
  );
}
/* Reel-caption text shadow keeps the type legible over the lighter scrim */
.phero--bleed .eyebrow,
.phero--bleed .phero__title,
.phero--bleed .phero__lead,
.phero--bleed .phero__bg-caption {
  text-shadow: 0 2px 10px rgba(20, 23, 30, 0.45), 0 1px 26px rgba(20, 23, 30, 0.55);
}
.phero__bg-caption {
  position: absolute;
  right: var(--gutter);
  bottom: 18px;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qmw-slate);
}
.phero--bleed .phero__grid { position: relative; z-index: 2; }
@media (max-width: 768px) {
  .phero--bleed { min-height: 0; padding-block: 88px 72px; }
  .phero__scrim { background: rgba(46, 51, 64, 0.62); }
  .phero__bg-caption { position: static; display: block; padding: 12px 24px 0; }
}
.phero__stripes {
  position: absolute;
  top: 0; right: 0;
  width: 360px; height: 360px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(236, 122, 45, 0.05) 0px, rgba(236, 122, 45, 0.05) 2px,
    transparent 2px, transparent 14px
  );
  -webkit-mask-image: radial-gradient(circle at top right, #000 0%, transparent 70%);
  mask-image: radial-gradient(circle at top right, #000 0%, transparent 70%);
  pointer-events: none;
}
.phero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
  position: relative;
}
.phero__grid--solo { grid-template-columns: minmax(0, 860px); }
.taglist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.phero__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.5vw, 96px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.015em;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}
.phero__title .dim { color: var(--qmw-slate); font-weight: 700; }
.phero__lead {
  margin-top: 24px;
  font-size: var(--fs-lead);
  line-height: 1.6;
  /* off-white, not slate: the muted grey lead washed out over photography */
  color: rgba(244, 243, 240, 0.92);
  max-width: 540px;
}
/* Ghost button over photography: a thin outline + off-white text disappeared
   on bright/busy hero images. Give it a translucent dark plate so it reads on
   any background, without becoming a second solid button. */
.phero--bleed .btn--ghost {
  background: rgba(20, 23, 30, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-color: rgba(244, 243, 240, 0.55);
  color: var(--qmw-off-white);
}
.phero--bleed .btn--ghost:hover {
  background: rgba(20, 23, 30, 0.6);
  border-color: var(--qmw-orange);
}
.phero__lead strong { color: var(--qmw-off-white); font-weight: 600; }
.phero__stds {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.chip {
  background: var(--qmw-charcoal-mid);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chip__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  text-transform: uppercase;
  color: var(--qmw-orange);
  line-height: 1;
}
.chip__label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qmw-slate);
}
.phero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.phero__media { position: relative; }
.phero__media-frame {
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.phero__media-frame img,
.phero__media-frame video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
[data-parallax] { overflow: hidden; }
[data-parallax] img, [data-parallax] video { will-change: transform; }
.gallery__media { overflow: hidden; }
.gallery__media img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.gallery--pair { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) { .gallery--pair { grid-template-columns: 1fr; } }
.phero__media::before, .phero__media::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid var(--qmw-orange);
  z-index: 2;
}
.phero__media::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.phero__media::after { bottom: 34px; right: -1px; border-left: none; border-top: none; }
.phero__media-caption {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qmw-slate);
  padding-top: 12px;
}

/* ── Machine selector bar ── */
.mbar {
  position: sticky;
  top: var(--nav-h);
  z-index: 60;
  background: rgba(46, 51, 64, 0.97);
  border-block: 1px solid var(--border-hairline);
  transition: top var(--dur-slow) var(--ease);
}
/* when the nav slides away, the bar rides up to the top with it */
body.nav-up .mbar { top: 0; }
.mbar__inner {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}
.mbar__inner::-webkit-scrollbar { display: none; }
.mbar__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--qmw-slate);
  display: flex;
  align-items: center;
  padding-right: 24px;
  border-right: 1px solid var(--border-hairline);
  margin-right: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mtab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 14px 26px;
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
}
.mtab::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 2px;
  background: var(--qmw-orange);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}
.mtab__vol {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  color: var(--qmw-slate);
  transition: color var(--dur) var(--ease);
}
.mtab__machine {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qmw-slate);
}
.mtab:hover .mtab__vol { color: var(--qmw-orange); }
.mtab.is-active::after { transform: scaleX(1); }
.mtab.is-active .mtab__vol { color: var(--qmw-orange); }
.mtab.is-active .mtab__machine { color: var(--qmw-off-white); }

/* ── Page grid: main + sidebar ── */
.pgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
  padding-bottom: 100px;
}
.psec { padding-top: 72px; }
.psec .section-title { font-size: clamp(30px, 3.6vw, 44px); }
.psec__note {
  font-family: var(--font-sub);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-body-sm);
  color: var(--qmw-slate);
  margin-top: 14px;
  line-height: 1.6;
}
.psec__intro { color: var(--qmw-slate); max-width: 640px; margin-bottom: 8px; }

/* ── Spec table ── */
.spec-wrap { overflow-x: auto; margin-top: 28px; border: 1px solid var(--border-hairline); border-radius: 12px; }
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  min-width: 640px;
}
.spec thead th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qmw-slate);
  padding: 14px 16px;
  text-align: center;
  background: var(--qmw-charcoal-mid);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.spec thead th:hover { color: var(--qmw-orange); }
.spec thead th.spec__lc { text-align: left; cursor: default; }
.spec thead th.spec__lc:hover { color: var(--qmw-slate); }
.spec tbody tr { border-top: 1px solid var(--border-hairline); }
.spec tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.spec td {
  padding: 13px 16px;
  text-align: center;
  color: var(--qmw-off-white);
}
.spec td.spec__lc {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--qmw-slate);
  white-space: nowrap;
}
.spec td.spec__span { text-align: left; color: var(--qmw-slate); font-size: 13px; }
.spec .spec__big { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.spec .is-active { background: rgba(236, 122, 45, 0.07); }
.spec thead th.is-active { color: var(--qmw-orange); }
.spec .spec__hi { color: var(--qmw-orange); font-weight: 600; }

/* ── Feature grid ── */
.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 28px;
}
.feature h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 8px;
}
.feature p { font-size: var(--fs-body); color: var(--qmw-slate); }
.feature p strong { color: var(--qmw-off-white); font-weight: 600; }
.feature__icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--qmw-orange);
  margin-bottom: 16px;
}
.feature__icon svg { width: 20px; height: 20px; }

/* ── Numbered columns (coating / process-lite) ── */
.numcols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.numcol {
  border-top: 1px solid var(--border-hairline);
  padding-top: 20px;
}
.numcol__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--qmw-charcoal-light);
  margin-bottom: 10px;
}
.numcol h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qmw-orange);
  margin-bottom: 8px;
}
.numcol p { font-size: var(--fs-body); color: var(--qmw-slate); }

/* ── Options ── */
.opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.opt { padding: 0; overflow: hidden; }
.opt__img {
  background: #FFFFFF;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
}
.opt__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.opt__body { padding: 18px 22px 22px; }
.opt__part {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--qmw-orange);
  margin-bottom: 4px;
}
.opt__body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  margin-bottom: 6px;
}
.opt__body p { font-size: var(--fs-body-sm); color: var(--qmw-slate); }

.parts-wrap { overflow-x: auto; margin-top: 24px; border: 1px solid var(--border-hairline); border-radius: 12px; }
.parts {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.parts thead th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qmw-slate);
  background: var(--qmw-charcoal-mid);
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
}
.parts tbody tr { border-top: 1px solid var(--border-hairline); }
.parts tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.parts td { padding: 11px 16px; color: var(--qmw-off-white); }
.parts td.parts__pn {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--qmw-orange);
  white-space: nowrap;
}
.parts td.parts__qty { color: var(--qmw-slate); }

.note {
  margin-top: 24px;
  padding: 18px 22px;
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  background: var(--qmw-charcoal-mid);
  color: var(--qmw-slate);
  font-size: var(--fs-body);
  position: relative;
}
.note::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 12px; height: 12px;
  border: 1.5px solid var(--qmw-orange);
  border-right: none; border-bottom: none;
}

/* ── Gallery ── */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.gallery figure {
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  overflow: hidden;
  background: var(--qmw-charcoal-mid);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gallery figure:hover { border-color: rgba(236, 122, 45, 0.30); box-shadow: var(--shadow-2); }
.gallery img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.gallery figcaption {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qmw-slate);
  padding: 12px 16px;
}

/* ── Sidebar ──
   Sticky, but capped to the viewport with its own scroll so a tall
   quote form stays fully reachable while it's pinned (data-lenis-prevent
   in product.js lets the wheel scroll it under Lenis). */
.sidebar {
  /* Scrolls WITH the page, staying level with the main column the whole way
     down. NOT sticky: a pinned sidebar holds a fixed viewport spot while the
     content scrolls past, so it can never stay level with the content (it sits
     higher or lower depending on scroll). The quote form scrolls with the page
     and is reached instantly via the hero's "Request a quote" button (#rfq). */
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* line the first card up with the main column's first heading (which sits
     ~96px below its box top from the section padding). Because the sidebar
     now flows with the page, this offset stays aligned the whole way down -
     it doesn't cause the pinned-low problem the sticky version did. */
  padding-top: 72px;
}
.rfq__done { color: var(--qmw-slate); line-height: 1.7; padding-block: 8px; }
.rfq__done strong { color: var(--qmw-off-white); font-size: 16px; }
.qref__title, .rfq__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--qmw-slate);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: 8px;
}
.qref__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-block: 8px;
  border-bottom: 1px solid var(--border-hairline);
  font-size: var(--fs-body-sm);
  font-variant-numeric: tabular-nums;
}
.qref__row:last-child { border-bottom: none; }
.qref__row dt { color: var(--qmw-slate); }
.qref__row dd { color: var(--qmw-off-white); font-weight: 500; text-align: right; }
.qref__row dd.qref__hero {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--qmw-orange);
}
.rfq h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 8px;
}
.rfq__sub { font-size: var(--fs-body-sm); color: var(--qmw-slate); margin-bottom: 18px; }
.rfq__field { margin-bottom: 12px; }
.rfq__field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qmw-slate);
  margin-bottom: 5px;
}
.rfq__field input, .rfq__field select, .rfq__field textarea {
  width: 100%;
  background: var(--qmw-charcoal);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  color: var(--qmw-off-white);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 12px;
  transition: border-color var(--dur) var(--ease);
}
.rfq__field input::placeholder, .rfq__field textarea::placeholder { color: var(--qmw-charcoal-light); }
.rfq__field input:focus, .rfq__field select:focus, .rfq__field textarea:focus {
  outline: none;
  border-color: var(--qmw-orange);
}
.rfq__field textarea { min-height: 84px; resize: vertical; }
/* Cloudflare Turnstile: keep the widget inside the card (its flexible mode
   has a 300px min-width that overflowed the narrow sidebar) */
/* Turnstile "flexible" has a hard 300px min-width, but the form fields are
   narrower. The widget renders at 300px then product.js scales it down to the
   invisible (interaction-only), so the slot takes no space unless a challenge
   actually appears - :empty keeps it from leaving a phantom gap above the
   button; a real challenge widget gets breathing room. */
.rfq__turnstile { width: 100%; margin: 0 0 12px; }
.rfq__turnstile:empty { margin: 0; }
.rfq .btn { width: 100%; margin-top: 4px; }
.rfq__note {
  font-family: var(--font-sub);
  font-style: italic;
  font-weight: 500;
  font-size: 12px;
  color: var(--qmw-slate);
  margin-top: 10px;
  text-align: center;
}
.certrow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
}
.certrow__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--qmw-orange);
  min-width: 56px;
}
.certrow__body strong { display: block; font-size: var(--fs-body-sm); font-weight: 600; }
.certrow__body span { font-size: var(--fs-caption); color: var(--qmw-slate); }

/* ── Related products ── */
.related {
  background: var(--qmw-charcoal-mid);
  border-block: 1px solid var(--border-hairline);
  padding-block: 80px;
}
.related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 28px;
}
/* index grids (products, news): 3-up on desktop, inherits 2-up / 1-up below */
.related__grid--index { margin-top: 0; }
@media (min-width: 1025px) {
  .related__grid--index { grid-template-columns: repeat(3, 1fr); }
}
.related__card { display: block; background: var(--qmw-charcoal); }
.related__tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qmw-orange);
  margin-bottom: 8px;
}
.related__card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.05;
  margin-bottom: 8px;
  transition: color var(--dur) var(--ease);
}
.related__card:hover h3 { color: var(--qmw-orange); }
.related__card p { font-size: var(--fs-body-sm); color: var(--qmw-slate); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  /* minmax(0,·) matters: a plain 1fr lets wide intrinsic content (the spec
     table) force the track past the viewport on phones */
  .pgrid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* single column: the sidebar flows with the page, no capped scroll */
  .sidebar { position: static; padding-top: 56px; max-height: none; overflow: visible; }
  .phero__grid { grid-template-columns: 1fr; gap: 40px; }
  .related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .phero { padding-block: 48px 56px; }
  .psec { padding-top: 56px; }
  .features { grid-template-columns: 1fr; }
  .numcols { grid-template-columns: 1fr; gap: 20px; }
  .opts { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .related__grid { grid-template-columns: 1fr; }
  .pgrid { padding-bottom: 64px; }
}

/* ═══ Square edges — site-wide override (Brad, July 2026) ═══
   Modern industrial: no rounded corners on surfaces or controls.
   Loads last, so plain selectors win by cascade order. */
.btn, .chip, .pcard, .manifesto__col, .cta__location, .caps__arrow,
.feature__icon, .opt, .opt__img, .spec-wrap, .parts-wrap, .note,
.gallery figure, .gallery__media, .phero__media-frame, .certrow,
.rfq__field input, .rfq__field select, .rfq__field textarea,
.sectors__icon, .process__panel, .process__panel-icon {
  border-radius: 0;
}