:root {
  /* Brand palette — blue and white only */
  --slate:    #34404e;   /* rgb(52,64,78)   primary dark */
  --steel:    #4e6b8c;   /* rgb(78,107,140) mid blue accent */
  --powder:   #deeaf7;   /* rgb(222,234,247) light blue tint */
  --ink:      #1a232f;   /* darker slate, max-contrast text */
  --slate-2:  #2a3340;
  --steel-2:  #a8bcd1;   /* lighter mid-blue: passes 4.5:1 on ink & slate */
  --paper:    #ffffff;
  --paper-2:  #f7f9fc;
  --line:     rgba(52,64,78,0.14);
  --line-strong: rgba(52,64,78,0.32);

  --f-display: 'Anton', 'Arial Narrow', sans-serif;
  --f-body:    'IBM Plex Sans', system-ui, sans-serif;
  --f-mono:    'IBM Plex Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--slate);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

/* UTILITY BAR */
.util-bar {
  background: var(--ink);
  color: var(--powder);
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.04em;
}
.util-bar .inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.util-bar .left, .util-bar .right { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.util-bar .marker { color: var(--steel-2); }
.util-bar a:hover { color: var(--paper); }

/* HEADER / NAV */
header.site {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
}
.logo { display: inline-flex; align-items: center; }
.logo img {
  height: 72px;
  width: auto;
  display: block;
}
.logo.dark img { filter: brightness(0) saturate(100%) invert(18%) sepia(13%) saturate(700%) hue-rotate(176deg) brightness(95%) contrast(92%); }

nav.primary { display: flex; justify-content: center; gap: 32px; }
.nav-item { position: relative; }
nav.primary a.nav-link {
  font-size: 17px;
  font-weight: 500;
  color: var(--slate);
  position: relative;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}
nav.primary a.nav-link:hover { color: var(--steel); }
nav.primary a.nav-link.active::after,
.nav-item:hover > a.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--steel);
}
nav.primary a.nav-link.active { color: var(--ink); }
.nav-item .caret {
  width: 10px; height: 10px;
  transition: transform 0.15s ease;
}
.nav-item:hover .caret { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + 18px);
  left: -16px;
  min-width: 260px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--steel);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 200;
  box-shadow: 0 12px 32px rgba(26,35,47,0.10);
}
.submenu::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0; right: 0;
  height: 20px;
}
.nav-item:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu a {
  display: block;
  padding: 12px 20px;
  font-size: 16px;
  color: var(--slate);
  font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease;
}
.submenu a:hover { background: var(--powder); color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 16px; }
.icon-btn {
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--slate);
}
.icon-btn:hover { background: var(--slate); border-color: var(--slate); color: var(--paper); }
.icon-btn svg { width: 18px; height: 18px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1;
}
.btn-primary { background: var(--slate); color: var(--paper); }
.btn-primary:hover { background: var(--ink); }
.btn-ghost {
  background: transparent;
  color: var(--slate);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: var(--slate); color: var(--paper); border-color: var(--slate); }
.btn-light { background: var(--paper); color: var(--slate); }
.btn-light:hover { background: var(--powder); }
.btn .arrow { transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(4px); }

/* HERO */
.hero {
  position: relative;
  background: var(--powder);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(52,64,78,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,64,78,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 88px 32px 100px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;
  align-items: center;
}
.brackets { position: absolute; inset: 24px 32px; pointer-events: none; }
.brackets::before, .brackets::after {
  content: "";
  position: absolute;
  width: 28px; height: 28px;
  border: 1.5px solid var(--slate);
}
.brackets::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.brackets::after  { bottom: 0; right: 0; border-left: none; border-top: none; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--slate);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.kicker .dot {
  width: 10px; height: 10px;
  background: var(--steel);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(78,107,140,0.22);
}
.kicker .meta { color: var(--steel); font-weight: 400; }

.headline {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(44px, 5.6vw, 82px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 36px;
}
.headline .line-2 { display: block; }
.headline .accent {
  color: var(--steel);
  position: relative;
  display: inline-block;
}
.headline .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 8px;
  background: var(--paper);
  opacity: 0.65;
  z-index: -1;
}

.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--slate);
  max-width: 560px;
  margin-bottom: 40px;
}
.lede strong { color: var(--ink); font-weight: 600; }

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; }

.hero-trust {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  border-top: 1.5px solid var(--line-strong);
  padding-top: 26px;
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--slate);
  font-weight: 500;
}
.hero-trust .item { display: flex; align-items: center; gap: 10px; }
.hero-trust .item svg { color: var(--steel); flex-shrink: 0; }

.spec-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-strong);
}

/* MEDIA FRAME (real images) */
.media {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* IMAGE PLACEHOLDER */
.img-ph {
  position: relative;
  background: linear-gradient(135deg, var(--slate) 0%, var(--ink) 100%);
  color: var(--powder);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.img-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.03) 0,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 14px
  );
}
.img-ph::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px dashed rgba(255,255,255,0.18);
  pointer-events: none;
}
.img-ph .ph-content { position: relative; text-align: center; padding: 32px; z-index: 2; }
.img-ph .ph-icon {
  width: 56px; height: 56px;
  border: 1.5px solid var(--steel-2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  color: var(--powder);
}
.img-ph .ph-icon svg { width: 24px; height: 24px; }
.img-ph .ph-id {
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.16em;
  color: var(--steel-2);
  margin-bottom: 10px;
}
.img-ph .ph-title {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--paper);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.img-ph .ph-desc {
  font-family: var(--f-mono);
  font-size: 16px;
  color: var(--steel-2);
  letter-spacing: 0.04em;
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.4;
}
.img-ph .ph-tag {
  position: absolute;
  top: 20px; right: 20px;
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--powder);
  letter-spacing: 0.10em;
  background: rgba(78,107,140,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 4px 10px;
  z-index: 3;
}

.hero-figure { aspect-ratio: 5/4; min-height: 320px; }

.spec-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.spec-row {
  padding: 18px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
}
.spec-row:nth-child(2n) { border-right: none; }
.spec-row:nth-last-child(-n+2) { border-bottom: none; }
.spec-row .label {
  color: var(--steel);
  font-size: 16px;
  letter-spacing: 0.10em;
  margin-bottom: 8px;
  font-weight: 500;
}
.spec-row .value {
  color: var(--ink);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.spec-row .value .unit {
  color: var(--steel);
  font-size: 16px;
  font-weight: 500;
}

/* TICKER */
.ticker {
  background: var(--ink);
  color: var(--powder);
  border-top: 3px solid var(--steel);
  overflow: hidden;
  font-family: var(--f-mono);
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 16px 0;
  white-space: nowrap;
  animation: scroll 50s linear infinite;
  font-size: 16px;
  letter-spacing: 0.10em;
}
.ticker-track span { display: flex; align-items: center; gap: 14px; }
.ticker-track .sep { color: var(--steel-2); }
.ticker-track .label { color: var(--steel-2); font-weight: 500; }
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* SECTION SHARED */
.section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 110px 32px;
}
.section-head {
  margin-bottom: 64px;
  padding-bottom: 24px;
  border-bottom: 1.5px solid var(--slate);
}
.section-title {
  font-family: var(--f-display);
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  color: var(--ink);
  font-weight: 400;
}
.section-meta {
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--steel);
  line-height: 1.6;
  font-weight: 500;
  margin-top: 18px;
}

/* PROCESS */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
.process-grid::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 8%;
  right: 8%;
  height: 1px;
  border-top: 1.5px dashed rgba(78,107,140,0.5);
  z-index: 0;
}
.process-step { position: relative; padding: 0 36px; z-index: 1; }
.process-step:not(:last-child) { border-right: 1px solid var(--line); }
.process-num {
  width: 64px; height: 64px;
  background: var(--paper);
  border: 1.5px solid var(--slate);
  font-family: var(--f-display);
  font-size: 30px;
  display: grid;
  place-items: center;
  margin-bottom: 36px;
  color: var(--ink);
  position: relative;
}
.process-step:nth-child(2) .process-num { background: var(--steel); border-color: var(--steel); color: var(--paper); }
.process-step:nth-child(3) .process-num { background: var(--slate); color: var(--paper); border-color: var(--slate); }

.process-arrow {
  position: absolute;
  top: 28px;
  right: -10px;
  width: 18px; height: 18px;
  background: var(--paper);
  display: grid;
  place-items: center;
}
.process-step:last-child .process-arrow { display: none; }

.process-label {
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--steel);
  margin-bottom: 10px;
  font-weight: 600;
}
.process-headline {
  font-family: var(--f-display);
  font-size: 32px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 18px;
  font-weight: 400;
}
.process-body { color: var(--slate); font-size: 17px; line-height: 1.6; max-width: 340px; }

.process-callout {
  margin-top: 56px;
  padding: 24px 28px;
  background: var(--ink);
  color: var(--powder);
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 21px;
  flex-wrap: wrap;
}
.process-callout .pill {
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  background: var(--steel);
  color: var(--paper);
  padding: 8px 14px;
  font-weight: 600;
  white-space: nowrap;
}
.process-callout strong { color: var(--paper); }
.process-callout a { color: var(--powder); border-bottom: 1px solid var(--steel); padding-bottom: 1px; }
.process-callout a:hover { color: var(--paper); border-color: var(--paper); }

/* SOLUTIONS */
.solutions { background: var(--ink); color: var(--powder); }
.solutions .section-head { border-bottom-color: var(--steel); }
.solutions .section-title { color: var(--paper); }
.solutions .section-num { color: var(--steel-2); }
.solutions .section-num .slash { color: rgba(255,255,255,0.18); }
.solutions .section-meta { color: var(--steel-2); }

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}
.solution-card {
  background: var(--slate);
  position: relative;
  transition: all 0.25s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.solution-card:hover { background: var(--slate-2); }
.solution-img { aspect-ratio: 16/10; border-bottom: 1px solid rgba(255,255,255,0.08); }
.solution-body {
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.solution-card .meta {
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--steel-2);
  margin-bottom: 22px;
  display: flex;
  justify-content: space-between;
  font-weight: 500;
}
.solution-card .meta .num { color: var(--powder); }
.solution-card h3 {
  font-family: var(--f-display);
  font-size: 38px;
  line-height: 0.95;
  margin-bottom: 18px;
  color: var(--paper);
  font-weight: 400;
  min-height: 2.85em;
  text-wrap: balance;
}
@media (max-width: 1024px) {
  .solution-card h3 { min-height: 0; }
}
.solution-card p {
  color: var(--powder);
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 28px;
  opacity: 0.85;
}
.solution-brands { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.brand-chip {
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border: 1px solid var(--steel);
  color: var(--powder);
  font-weight: 500;
}
.solution-card .footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.solution-card .view {
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 10px;
}
.solution-card:hover .view { color: var(--powder); }
.solution-card:hover .view .arrow { transform: translateX(4px); }
.solution-card .view .arrow { transition: transform 0.2s; }
/* Whole card is clickable: the "Browse Catalog" link stretches a
   transparent overlay across the card. The card is a <div>, not an
   <a>, so links inside it (e.g. the Tec-flon data sheet) stay valid. */
.solution-card .view::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.solution-brands .brand-chip-link { position: relative; z-index: 2; text-decoration: underline; }
.solution-brands .brand-chip-link:hover { background: var(--steel); color: var(--paper); }

/* STATS */
.stats { background: var(--powder); border-bottom: 1px solid var(--line); }
.stats-inner { max-width: 1320px; margin: 0 auto; padding: 88px 32px 0; }
.stats-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 56px 36px 64px;
  border-right: 1px solid var(--line);
  position: relative;
}
.stat:last-child { border-right: none; }
.stat-num-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.stat-num {
  font-family: var(--f-display);
  font-size: 84px;
  line-height: 0.85;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.stat-num .em { color: var(--steel); }
.stat-suffix {
  font-family: var(--f-mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--steel);
  letter-spacing: 0.04em;
}
.stat-label {
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--slate);
  margin-bottom: 8px;
  font-weight: 600;
}
.stat-desc { font-size: 16px; color: var(--slate); line-height: 1.5; max-width: 240px; }

/* MFG SPECS / SEARCH */
.specs-section { background: var(--paper); }
.specs-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.specs-content h2 {
  font-family: var(--f-display);
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 0.95;
  margin-bottom: 28px;
  color: var(--ink);
  font-weight: 400;
}
.specs-content h2 .em { color: var(--steel); }
.specs-content > p {
  color: var(--slate);
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 36px;
  max-width: 560px;
}
.search-cluster {
  border: 1px solid var(--line-strong);
  background: var(--paper-2);
  padding: 28px;
}
.search-cluster .label {
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--slate);
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  flex-wrap: wrap;
  gap: 10px;
}
.search-cluster .label .badge {
  background: var(--slate);
  color: var(--paper);
  padding: 4px 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 16px;
}
.search-row { display: flex; border: 1px solid var(--slate); background: var(--paper); }
.search-row input {
  flex: 1;
  padding: 18px 20px;
  border: none;
  outline: none;
  font-family: var(--f-mono);
  font-size: 16px;
  background: transparent;
  color: var(--ink);
  min-width: 0;
}
.search-row input::placeholder { color: var(--slate); }
.search-row button {
  padding: 0 26px;
  background: var(--slate);
  color: var(--paper);
  border: none;
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s ease;
}
.search-row button:hover { background: var(--steel); }
.search-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.search-tag {
  font-family: var(--f-mono);
  font-size: 16px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  color: var(--slate);
  cursor: pointer;
  transition: all 0.15s ease;
  font-weight: 500;
}
.search-tag:hover { border-color: var(--slate); background: var(--slate); color: var(--paper); }

.specs-visual { position: relative; }
.cross-ref {
  background: var(--ink);
  color: var(--powder);
  padding: 36px;
  border: 1px solid var(--slate);
}
.cref-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-family: var(--f-mono);
  font-size: 16px;
}
.cref-row:last-child { border-bottom: none; }
.cref-row.head {
  font-size: 16px;
  color: var(--steel-2);
  letter-spacing: 0.10em;
  border-bottom: 1px solid var(--steel);
  padding-bottom: 14px;
  font-weight: 600;
}
.cref-arrow { color: var(--steel-2); font-weight: 600; font-size: 18px; }
.cref-oem { color: var(--powder); }
.cref-bgc { color: var(--paper); font-weight: 600; }
.cref-bgc .marker {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--steel);
  margin-right: 8px;
  vertical-align: 2px;
}

/* ENGINEER VIDEO */
.engineer {
  background: var(--powder);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.engineer-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 72px;
  align-items: center;
}
.video-frame {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--ink);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-frame .img-ph { position: absolute; inset: 0; }
.video-frame .play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 92px; height: 92px;
  background: var(--steel);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 0 rgba(78,107,140,0.5);
  transition: all 0.2s;
  z-index: 10;
}
.video-frame:hover .play-btn {
  box-shadow: 0 0 0 14px rgba(78,107,140,0.25);
  transform: translate(-50%, -50%) scale(1.05);
}
.play-btn svg { width: 30px; height: 30px; color: var(--paper); margin-left: 5px; }

.video-overlay-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(26,35,47,0.92);
  border-left: 4px solid var(--steel);
  padding: 18px 22px;
  z-index: 10;
}
.video-overlay-bottom .title {
  color: var(--paper);
  font-family: var(--f-display);
  font-size: 24px;
  line-height: 1;
  margin-bottom: 6px;
  font-weight: 400;
}
.video-overlay-bottom .desc {
  font-family: var(--f-mono);
  font-size: 16px;
  color: var(--steel-2);
  letter-spacing: 0.06em;
}

.engineer-content h2 {
  font-family: var(--f-display);
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 0.95;
  color: var(--ink);
  margin-bottom: 28px;
  font-weight: 400;
}
.engineer-content > p {
  color: var(--slate);
  font-size: 17px;
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 500px;
}
.engineer-list { list-style: none; margin-bottom: 36px; }
.engineer-list li {
  padding: 18px 0;
  border-top: 1px solid rgba(52,64,78,0.18);
  font-size: 17px;
  color: var(--slate);
}
.engineer-list li:last-child { border-bottom: 1px solid rgba(52,64,78,0.18); }
.engineer-list .num {
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--steel);
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.engineer-list strong { color: var(--ink); font-weight: 600; }

/* BLOG */
.blog { background: var(--paper); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.blog-card:hover {
  border-color: var(--slate);
  transform: translateY(-3px);
}
.blog-card .media {
  aspect-ratio: 16/10;
  border-bottom: 1px solid var(--line);
}
.blog-card .body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card .meta {
  font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.10em;
  color: var(--steel);
  font-weight: 600;
  margin-bottom: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.blog-card .meta .dot { color: var(--line-strong); }
.blog-card h3 {
  font-family: var(--f-display);
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 14px;
  font-weight: 400;
  letter-spacing: 0.005em;
}
.blog-card p {
  color: var(--slate);
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 24px;
}
.blog-card .read {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.blog-card:hover .read .arrow { transform: translateX(4px); }
.blog-card .read .arrow { transition: transform 0.2s; }

/* CREDENTIALS MARQUEE */
.cred-bar {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 44px 0;
  position: relative;
}
.cred-bar::before, .cred-bar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 96px;
  z-index: 2;
  pointer-events: none;
}
.cred-bar::before { left: 0; background: linear-gradient(90deg, var(--paper-2), rgba(247,249,252,0)); }
.cred-bar::after  { right: 0; background: linear-gradient(-90deg, var(--paper-2), rgba(247,249,252,0)); }
.cred-bar-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: cred-scroll 55s linear infinite;
}
.cred-bar-track img {
  height: 96px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}
.cred-bar-track img:hover { opacity: 1; }
@keyframes cred-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* DUAL CTA */
.dual-cta-bleed {
  background: var(--slate);
  border-top: 4px solid var(--steel);
  overflow: hidden;
}
.dual-cta {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
}
.cta-card {
  background: var(--powder);
  padding: 72px 56px;
  color: var(--slate);
  position: relative;
}
.cta-card:not(.alt) { padding-left: 0; }
.cta-card::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: 100%;
  width: 100vw;
  background: var(--powder);
}
.cta-card.alt {
  background: var(--slate);
  color: var(--powder);
}
.cta-card.alt::before { display: none; }
.cta-card h3 {
  font-family: var(--f-display);
  font-size: clamp(34px, 3.8vw, 50px);
  line-height: 0.95;
  color: var(--ink);
  margin-bottom: 22px;
  font-weight: 400;
}
.cta-card.alt h3 { color: var(--paper); }
.cta-card p {
  color: var(--slate);
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 440px;
}
.cta-card.alt p { color: var(--powder); opacity: 0.85; }
.newsletter-form {
  display: flex;
  margin-top: 8px;
  border: 1px solid var(--steel);
  background: rgba(255,255,255,0.04);
}
.newsletter-form input {
  flex: 1;
  padding: 16px 18px;
  border: none;
  background: transparent;
  outline: none;
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 16px;
  min-width: 0;
}
.newsletter-form input::placeholder { color: var(--steel-2); }
.newsletter-form button {
  background: var(--steel);
  color: var(--paper);
  border: none;
  padding: 0 26px;
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.newsletter-form button:hover { background: var(--paper); color: var(--ink); }
.cta-meta {
  font-family: var(--f-mono);
  font-size: 16px;
  color: var(--steel);
  letter-spacing: 0.06em;
  margin-top: 16px;
}
.cta-card.alt .cta-meta { color: var(--steel-2); }

/* FOOTER */
footer.site {
  background: var(--ink);
  color: var(--powder);
  padding: 88px 0 0;
  font-size: 17px;
}
.footer-top {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px 64px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.footer-tagline {
  margin-top: 24px;
  margin-bottom: 28px;
  font-size: 17px;
  line-height: 1.6;
  max-width: 320px;
  color: var(--powder);
  opacity: 0.85;
}
.footer-contact {
  font-family: var(--f-mono);
  font-size: 16px;
  line-height: 1.85;
  color: var(--powder);
}
.footer-contact .em { color: var(--steel-2); margin-right: 6px; font-weight: 600; }

footer h5 {
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  color: var(--steel-2);
  margin-bottom: 22px;
  font-weight: 600;
}
.footer-col ul { list-style: none; }
.footer-col li { padding: 6px 0; }
.footer-col a { color: var(--powder); font-size: 17px; }
.footer-col a:hover { color: var(--paper); }

.footer-bottom {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--steel-2);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom .links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--paper); }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .hero-inner, .specs-grid, .engineer-grid, .dual-cta,
  .stats-grid, .process-grid, .solutions-grid, .footer-top, .blog-grid {
    grid-template-columns: 1fr !important;
  }
  nav.primary { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: none !important; }
  .process-grid::before { display: none; }
  .process-step { border-right: none !important; border-bottom: 1px solid var(--line); padding: 32px 0; }
  .footer-top { gap: 40px; }
  .section { padding: 80px 24px; }
}
/* THE BRADLEY GROUP — company blurbs */
.group-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong); }
.group-card { padding: 44px 40px; border-right: 1px solid var(--line); }
.group-card:last-child { border-right: none; }
.group-name { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1.05; color: var(--ink); margin-bottom: 8px; }
.group-role { font-family: var(--f-mono); font-size:14px; letter-spacing: 0.08em; color: var(--steel); font-weight: 600; margin-bottom: 18px; text-transform: uppercase; }
.group-card p { font-size: 16px; line-height: 1.6; color: var(--slate); }
@media (max-width: 1024px) {
  .group-grid { grid-template-columns: 1fr; }
  .group-card { border-right: none; border-bottom: 1px solid var(--line); }
  .group-card:last-child { border-bottom: none; }
}
.footer-family{background:var(--ink)}.footer-family-inner{max-width:1320px;margin:0 auto;padding:24px 32px;display:flex;align-items:center;gap:16px 40px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,0.10)}.footer-family .ff-label{font-family:var(--f-mono);font-size:14px;letter-spacing:0.12em;color:var(--steel-2);font-weight:600;text-transform:uppercase;white-space:nowrap}.footer-family .ff-names{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;font-family:var(--f-mono);font-size:16px;color:var(--paper);font-weight:600}.footer-family .ff-sep{color:var(--steel);font-weight:400}

/* =============================================================
 * Adapter: reconcile Mai's wp-block-group flex default with the
 * templates' DOM assumptions. Uses templates' exact class names.
 * ============================================================= */

/* Content containers -> block layout (override Mai's flex default) */
.wp-block-group.hero,
.wp-block-group.hero-content,
.wp-block-group.spec-card,
.wp-block-group.spec-row,
.wp-block-group.process-section,
.wp-block-group.process-step,
.wp-block-group.process-callout,
.wp-block-group.solutions,
.wp-block-group.section,
.wp-block-group.solution-card,
.wp-block-group.solution-body,
.wp-block-group.group-section,
.wp-block-group.group-card,
.wp-block-group.stats,
.wp-block-group.stats-inner,
.wp-block-group.stat,
.wp-block-group.cross-ref,
.wp-block-group.specs-content,
.wp-block-group.specs-visual,
.wp-block-group.search-cluster,
.wp-block-group.engineer,
.wp-block-group.engineer-content,
.wp-block-group.blog,
.wp-block-group.blog-card,
.wp-block-group.body,
.wp-block-group.section-head {
  display: block !important;
  justify-content: initial !important;
}

/* Grid containers */
.wp-block-group.hero-inner,
.wp-block-group.spec-table,
.wp-block-group.process-grid,
.wp-block-group.solutions-grid,
.wp-block-group.group-grid,
.wp-block-group.stats-grid,
.wp-block-group.specs-grid,
.wp-block-group.engineer-grid,
.wp-block-group.blog-grid {
  display: grid !important;
}

/* Flex containers (rows) */
.wp-block-group.hero-ctas,
.wp-block-group.hero-trust,
.wp-block-group.search-row { display: flex !important; }

/* Inner-container -> layout-transparent so children become layout
 * siblings of the parent group. */
.hero > .wp-block-group__inner-container,
.hero-inner > .wp-block-group__inner-container,
.hero-content > .wp-block-group__inner-container,
.hero-ctas > .wp-block-group__inner-container,
.hero-trust > .wp-block-group__inner-container,
.spec-card > .wp-block-group__inner-container,
.spec-table > .wp-block-group__inner-container,
.spec-row > .wp-block-group__inner-container,
.process-section > .wp-block-group__inner-container,
.process-grid > .wp-block-group__inner-container,
.process-step > .wp-block-group__inner-container,
.process-callout > .wp-block-group__inner-container,
.solutions > .wp-block-group__inner-container,
.section > .wp-block-group__inner-container,
.solutions-grid > .wp-block-group__inner-container,
.solution-card > .wp-block-group__inner-container,
.solution-body > .wp-block-group__inner-container,
.group-section > .wp-block-group__inner-container,
.group-grid > .wp-block-group__inner-container,
.group-card > .wp-block-group__inner-container,
.stats > .wp-block-group__inner-container,
.stats-inner > .wp-block-group__inner-container,
.stats-grid > .wp-block-group__inner-container,
.stat > .wp-block-group__inner-container,
.cross-ref > .wp-block-group__inner-container,
.specs-grid > .wp-block-group__inner-container,
.specs-content > .wp-block-group__inner-container,
.specs-visual > .wp-block-group__inner-container,
.search-cluster > .wp-block-group__inner-container,
.search-row > .wp-block-group__inner-container,
.engineer > .wp-block-group__inner-container,
.engineer-grid > .wp-block-group__inner-container,
.engineer-content > .wp-block-group__inner-container,
.blog > .wp-block-group__inner-container,
.blog-grid > .wp-block-group__inner-container,
.blog-card > .wp-block-group__inner-container,
.body > .wp-block-group__inner-container,
.section-head > .wp-block-group__inner-container {
  display: contents !important;
  max-width: none !important;
  padding: 0 !important;
}

/* TICKER: the <p class="ticker-track"> is the flex track; spans are its
 * direct children. Templates CSS .ticker-track {display:flex;white-space:nowrap;animation}
 * applies to the <p> directly. */
p.ticker-track { margin: 0; }

/* .media figures: wp-block-image wrapper needs to fill its aspect-ratio box
 * and the <img> must cover. Beats Mai's default wp-block-image img sizing. */
.wp-block-image.media { margin: 0; }
.wp-block-image.media img,
.media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  max-width: none !important;
}
.blog-card .wp-block-image.media { aspect-ratio: 16/10; }
.solution-card .wp-block-image.media { aspect-ratio: 16/10; }
.spec-card .wp-block-image.hero-figure { aspect-ratio: 5/4; min-height: 320px; }

/* Hero CTA buttons: templates .btn styling on anchors inside paragraphs */
.hero-ctas p, .specs-content p, .engineer-content p, .solution-body p:last-child { margin: 0; }

/* Search-row mock (templates use real <input>/<button>; we mock with blocks) */
.search-row .search-input {
  flex: 1;
  margin: 0;
  padding: 18px 20px;
  font-family: var(--f-mono);
  font-size: 16px;
  color: var(--slate);
  background: var(--paper);
}
.search-row .search-btn {
  margin: 0;
  padding: 0 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--slate);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.search-row .search-btn:hover { background: var(--steel); }

/* Mai/Genesis: hide single-entry chrome on home so only Mai content-area chrome shows. */
.bgctx-home .entry-title-single,
.bgctx-home .entry-wrap-single > h1,
.bgctx-home .page-header,
.bgctx-home section.page-header { display: none !important; }
.bgctx-home article.entry,
.bgctx-home main.content,
.bgctx-home .content-sidebar-wrap,
.bgctx-home .entry-content { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
.bgctx-home .entry > * { max-width: none; }

/* =============================================================
 * HEADER ADAPTER — maps the templates' header design (header.site,
 * .nav, .logo, .nav-link, .submenu, .icon-btn, .btn) onto Mai's
 * rendered header DOM (.site-header, .site-header-wrap, .custom-logo,
 * .menu-item-link, .sub-menu, .bg-header-search, .bg-quote-cta).
 * Mai renders the header via its default functions + content areas;
 * this restyles that DOM to equal /templates/ without changing markup.
 * ============================================================= */

/* --- Utility bar (.util-bar lives in the before-header content area) --- */
/* Neutralize Mai inner-container wrappers so .inner/.left/.right flex works */
.util-bar > .wp-block-group__inner-container,
.util-bar .inner > .wp-block-group__inner-container,
.util-bar .left > .wp-block-group__inner-container,
.util-bar .right > .wp-block-group__inner-container {
  display: contents !important;
  max-width: none !important;
  padding: 0 !important;
}
.wp-block-group.util-bar { display: block !important; }
.util-bar .inner { display: flex !important; width: 100% !important; max-width: 1320px !important; margin: 0 auto !important; padding: 12px 32px !important; box-sizing: border-box !important; }
.util-bar .left, .util-bar .right { display: flex !important; }
.util-bar p { margin: 0; }
.before-header.template-part { margin: 0; }

/* --- Header shell (header.site -> .site-header) --- */
.site-header {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
}
/* .nav grid -> .site-header-wrap as a flex row: logo | nav (grows, centered) | actions */
.site-header-wrap {
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 18px 32px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 40px !important;
}

/* Logo (.logo.dark img -> .title-area .custom-logo) */
.site-header .title-area { margin: 0 !important; padding: 0 !important; flex-shrink: 0; line-height: 0; }
.site-header .title-area .custom-logo-link { margin: 0 !important; max-width: none !important; }
.site-header .custom-logo,
.site-header .title-area img {
  height: 72px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
  filter: brightness(0) saturate(100%) invert(18%) sepia(13%) saturate(700%) hue-rotate(176deg) brightness(95%) contrast(92%);
}

/* header-right wraps nav + actions; let nav grow and centre, actions sit right */
.site-header .header-right {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 40px !important;
  margin: 0 !important;
}
.site-header .nav-header.nav-header-right { flex: 1 1 auto; }
.site-header .nav-header .menu.genesis-nav-menu {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 32px !important;
  margin: 0;
  padding: 0;
}
.site-header .nav-header .menu > .menu-item { position: relative; margin: 0; }

/* Top-level nav links (nav.primary a.nav-link) */
.site-header .nav-header .menu > .menu-item > .menu-item-link {
  font-family: var(--f-body) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--slate) !important;
  padding: 6px 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}
.site-header .nav-header .menu > .menu-item > .menu-item-link:hover { color: var(--steel) !important; }

/* underline accent on hover (nav-item:hover > a.nav-link::after) */
.site-header .nav-header .menu > .menu-item.menu-item-has-children > .menu-item-link::after,
.site-header .nav-header .menu > .menu-item > .menu-item-link::after { content: none; }
.site-header .nav-header .menu > .menu-item:hover > .menu-item-link {
  color: var(--steel) !important;
}

/* caret on parent items: Mai uses a ::after or sub-menu-toggle; give a chevron */
.site-header .nav-header .menu > .menu-item-has-children > .menu-item-link::after {
  content: "" !important;
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
  position: static !important;
  background: none !important;
  opacity: 0.85;
}
.site-header .nav-header .menu > .menu-item-has-children:hover > .menu-item-link::after {
  transform: rotate(225deg) translateY(1px);
}

/* --- Dropdowns (.submenu -> .sub-menu) --- */
.site-header .nav-header .sub-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: -16px;
  min-width: 260px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--steel);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 200;
  box-shadow: 0 12px 32px rgba(26,35,47,0.10);
  display: block;
  width: auto;
}
.site-header .nav-header .menu > .menu-item:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-header .nav-header .sub-menu::before {
  content: "";
  position: absolute;
  top: -20px; left: 0; right: 0; height: 20px;
}
.site-header .nav-header .sub-menu .menu-item { margin: 0; }
.site-header .nav-header .sub-menu .menu-item-link {
  display: block !important;
  padding: 12px 20px !important;
  font-family: var(--f-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--slate) !important;
  transition: background 0.12s ease, color 0.12s ease;
}
.site-header .nav-header .sub-menu .menu-item-link:hover {
  background: var(--powder) !important;
  color: var(--ink) !important;
}

/* --- Actions cluster (.nav-actions -> .bg-header-cluster) --- */
.site-header .bg-header-cluster {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-shrink: 0;
  margin: 0 !important;
}

/* Search icon button (.icon-btn -> .bg-header-search) */
.site-header .bg-header-search { margin: 0 !important; }
.site-header .bg-header-search a {
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  display: grid;
  place-items: center;
  transition: all 0.15s ease;
  color: var(--slate);
}
.site-header .bg-header-search a:hover {
  background: var(--slate);
  border-color: var(--slate);
}
.site-header .bg-header-search img {
  width: 18px !important; height: 18px !important;
  filter: brightness(0) saturate(100%) invert(18%) sepia(13%) saturate(700%) hue-rotate(176deg) brightness(95%) contrast(92%);
  transition: filter 0.15s ease;
}
.site-header .bg-header-search a:hover img { filter: brightness(0) invert(1); }

/* Quote button (.btn.btn-primary -> .bg-quote-cta) */
.site-header .bg-header-cta { margin: 0 !important; }
.site-header .bg-quote-cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px !important;
  font-family: var(--f-mono) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  line-height: 1 !important;
  white-space: nowrap;
  border: none !important;
  border-radius: 0 !important;
  background: var(--slate) !important;
  color: var(--paper) !important;
  transition: all 0.15s ease;
}
.site-header .bg-quote-cta .wp-block-button__link:hover { background: var(--ink) !important; }

/* Mobile menu (hamburger) now appears below 1200px (was 960px). Above 1200px =
   desktop nav; ≤1200px = hamburger + Mai mobile-menu, with the search icon kept
   beside the hamburger and "Request a Quote" moved into the mobile menu. */
@media (min-width: 1201px) {
  .site-header .header-section-mobile { display: none !important; }
}
@media (max-width: 1200px) {
  /* hide the desktop nav + the CTA button, but KEEP the search icon visible */
  .site-header .nav-header-right { display: none !important; }
  .site-header .bg-header-cta { display: none !important; }
  /* keep the right section alive purely to host the search icon; group the
     search icon + hamburger together, flush right */
  .site-header .header-section.header-right { display: flex !important; align-items: center !important; flex: 0 0 auto !important; margin-left: auto !important; order: 2 !important; padding: 0 !important; }
  .site-header .bg-header-cluster { display: flex !important; align-items: center !important; margin: 0 !important; }
  .site-header .bg-header-search { display: block !important; }
  .site-header .header-section-mobile { order: 3 !important; margin-left: 8px !important; flex: 0 0 auto !important; width: auto !important; }
  .site-header-wrap { justify-content: flex-start !important; align-items: center !important; }
  /* Mai's desktop.min.css (loads ≥1000px) hides the hamburger and forces the
     mobile menu closed via CSS variables. site.css loads after it (media=all),
     so re-assert the variables up to 1200px: show the toggle container + let the
     .mobile-menu-visible toggle actually open the menu. */
  :root { --header-section-mobile-display: flex !important; }
  .mobile-menu-visible { --mobile-menu-display: block !important; }
}


/* =============================================================
 * Home content-width correction.
 * The homepage content sits in Mai's constrained "wide" content area
 * (~1387px), and Mai's alignfull uses 0 margins in a no-sidebar layout,
 * so the full-bleed sections can't reach the viewport edge — content
 * ends up shifted left. Make the home content area span the full
 * viewport so the alignfull sections are true 100vw and each inner
 * container (.hero-inner, .section, .stats-inner …) centres its 1320
 * column at the same x as the header.
 * ============================================================= */
.bgctx-home .site-inner,
.bgctx-home .content-sidebar-wrap,
.bgctx-home main.content,
.bgctx-home .entry-single,
.bgctx-home .entry-wrap-single,
.bgctx-home .entry-content-single {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.bgctx-home .content-sidebar-wrap {
  --alignfull-margin-left: 0;
  --alignfull-margin-right: 0;
}
/* The content area is now full-viewport (1440). Make every full-bleed homepage
 * section plain width:100% of it (no Mai scrollbar-aware --viewport-width calc),
 * so sections reach the true edge (1440) like the flat templates and each inner
 * container centres its 1320 column at the same x as the header (92px). */
.bgctx-home .entry-content > .alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* =============================================================
 * PREFOOTER + FOOTER ADAPTER — maps the templates' .cred-bar,
 * .dual-cta-bleed/.dual-cta/.cta-card, footer.site/.footer-top/
 * .footer-col/.footer-family/.footer-bottom onto Mai's block DOM
 * (the before-footer, footer, footer-credits content areas render
 * inside Mai's .site-footer). Templates CSS supplies the look; this
 * neutralizes Mai's group wrappers and grid/flex defaults.
 * ============================================================= */

/* Mai wraps the before-footer/footer content areas; make those wrappers
 * and the inner-containers layout-transparent so our sections behave like
 * the flat templates DOM. */
.before-footer.template-part,
.site-footer .template-part { margin: 0; padding: 0; }

/* Inner-container pass-through for every footer/prefooter group */
.cred-bar > .wp-block-group__inner-container,
.cred-bar-track > .wp-block-group__inner-container,
.dual-cta-bleed > .wp-block-group__inner-container,
.dual-cta > .wp-block-group__inner-container,
.cta-card > .wp-block-group__inner-container,
.newsletter-form > .wp-block-group__inner-container,
.footer-top > .wp-block-group__inner-container,
.footer-brand > .wp-block-group__inner-container,
.footer-col > .wp-block-group__inner-container,
.footer-contact > .wp-block-group__inner-container,
.footer-family > .wp-block-group__inner-container,
.footer-family-inner > .wp-block-group__inner-container,
.footer-bottom > .wp-block-group__inner-container {
  display: contents !important;
  max-width: none !important;
  padding: 0 !important;
}

/* Block-group display reset → templates layout model */
.wp-block-group.cred-bar,
.wp-block-group.dual-cta-bleed,
.wp-block-group.cta-card,
.wp-block-group.footer-brand,
.wp-block-group.footer-col,
.wp-block-group.footer-contact { display: block !important; justify-content: initial !important; }

.wp-block-group.cred-bar-track,
.wp-block-group.newsletter-form,
.wp-block-group.footer-family-inner,
.wp-block-group.footer-bottom { display: flex !important; }

.wp-block-group.dual-cta,
.wp-block-group.footer-top { display: grid !important; }

/* cred-bar marquee images (figures instead of bare <img>) */
.cred-bar-track .wp-block-image { margin: 0 !important; flex-shrink: 0; }
.cred-bar-track .wp-block-image img,
.cred-bar-track img {
  height: 96px !important; width: auto !important; max-width: none !important;
  opacity: 0.85; flex-shrink: 0;
}
.cred-bar-track .wp-block-image img:hover { opacity: 1; }

/* dual-cta button + meta spacing (anchors in paragraphs) */
.cta-card p:has(> a.btn) { margin: 0 0 0 0; }
.cta-card .btn { margin-bottom: 0; }

/* newsletter-form mock (templates uses real input/button; we mock with blocks) */
.newsletter-form { margin-top: 8px; border: 1px solid var(--steel); background: rgba(255,255,255,0.04); }
.newsletter-form > * { margin: 0 !important; }
.newsletter-form .nl-input {
  flex: 1; padding: 16px 18px; color: var(--steel-2);
  font-family: var(--f-mono); font-size: 16px; min-width: 0;
}
.newsletter-form .nl-btn {
  background: var(--steel); color: var(--paper); padding: 16px 26px;
  font-family: var(--f-mono); font-size: 16px; letter-spacing: 0.08em;
  font-weight: 700; cursor: pointer; transition: background 0.15s ease;
  display: flex; align-items: center;
}
.newsletter-form .nl-btn:hover { background: var(--paper); color: var(--ink); }

/* Mai .site-footer → footer.site look */
.site-footer {
  background: var(--ink) !important;
  color: var(--powder) !important;
  padding: 88px 0 0 !important;
  margin: 0 !important;
  font-size: 17px;
}
.site-footer .footer-logo img { max-height: 130px; width: auto; }
.site-footer .fc-entity { color: var(--paper); font-weight: 600; margin-bottom: 4px; }
.site-footer .footer-contact p { margin: 0; }
.site-footer .footer-contact p + p { margin-top: 12px; }
.site-footer .footer-col h5 { /* matches `footer h5` */ }
.site-footer .footer-col ul { list-style: none; padding: 0; margin: 0; }

/* The footer-bottom + footer-family inner widths are in the templates CSS
 * (max-width:1320; margin:auto). Mai's full-width context lets them apply. */
.footer-bottom .links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-bottom > p { margin: 0; }

/* keep the dual-cta 100vw powder bleed from overflowing the page */
.dual-cta-bleed { overflow: hidden !important; }

/* ============================================================
 * SECTION POLISH — per-feedback adjustments. These override the
 * templates CSS above where the design/feedback calls for it.
 * ============================================================ */

/* Menu — heavier nav weight */
.site-header .nav-header .menu > .menu-item > .menu-item-link { font-weight: 600 !important; }

/* Hero brackets — empty group; show its ::before/::after corners, hide Mai wrapper */
.wp-block-group.brackets { position: absolute; inset: 24px 32px; pointer-events: none; z-index: 2; margin: 0; padding: 0; }
.wp-block-group.brackets > .wp-block-group__inner-container { display: none; }

/* Hero CTAs aligned on one baseline */
.hero-ctas { align-items: center; }
.hero-ctas p { margin: 0; display: inline-flex; }
.hero-ctas .btn { margin: 0; }

/* Hero trust icons → blue */
.hero-trust .item, .hero-trust p { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.hero-trust i { color: var(--steel); font-size:16px; }

/* Process — little arrow connector on the step numbers */
.process-num { position: relative; overflow: visible; }
.process-arrow {
  position: absolute; top: 28px; right: -10px;
  width: 18px; height: 18px; background: var(--paper);
  display: grid; place-items: center;
}
.process-arrow i { font-size:16px; color: var(--steel); }
.process-step:last-child .process-arrow { display: none; }

/* Process callout — "Note" ABOVE the text */
.process-callout { flex-direction: column !important; align-items: flex-start !important; gap: 14px; }

/* Stats — section-head bar touches the stat grid (no white gap) */
.stats .section-head { margin-bottom: 0 !important; }

/* Cross-reference — more breathing room above + below the search, tighter chart */
.specs-content > p { margin-bottom: 48px !important; }
.search-cluster { margin-bottom: 8px; }
.search-tags { margin-top: 22px !important; }
.cross-ref { padding: 26px !important; }
.cref-row { padding: 11px 0 !important; }

/* Engineer — more space after the lede, list flush-left */
.engineer-content > p { margin-bottom: 48px !important; }
.engineer-list { text-align: left !important; padding-left: 0 !important; margin-left: 0 !important; }
.engineer-list li { text-align: left !important; }

/* Dual CTA — remove awkward gap under the subscribe form */
.newsletter-form { margin-bottom: 0 !important; }
.cta-card.alt .cta-meta { margin-top: 16px !important; }

/* Footer — kill the dark bar above the cred bar (was .site-footer top padding),
 * give the footer content its own top padding instead */
.site-footer { padding-top: 0 !important; }
.footer-top { padding-top: 88px !important; }

/* Process callout — force column flex (overrides the block-layout adapter) so
 * the "Note" pill stacks above the text. */
.wp-block-group.process-callout { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
.process-callout .pill-row { margin: 0; }
.process-callout p { margin: 0; }

/* Ticker — guarantee the two-sequence track is wider than the viewport so the
 * marquee never shows empty space at any point in the loop. */
.ticker-track { width: max-content; }

/* Nav weight — medium (now that IBM Plex Sans 500 actually loads) */
.site-header .nav-header .menu > .menu-item > .menu-item-link { font-weight: 500 !important; }

/* Hero — left-align the CTAs and trust row with the paragraph above
 * (Mai's .wp-block-group default is justify-content:center) */
.hero-ctas, .hero-trust { justify-content: flex-start !important; }

/* Footer family band — vertically centre the label with the company names.
 * The paragraphs carry Mai's wp-block-paragraph margin-bottom, which threw off
 * the flex centring; zero it and centre. */
.footer-family-inner { display: flex !important; align-items: center !important; }
.footer-family-inner .ff-label,
.footer-family-inner .ff-names { margin: 0 !important; line-height: 1.4 !important; align-self: center !important; }

/* Ticker — full-bleed: neutralise Mai's is-layout-flow inner-container so the
 * track starts at the left edge (no leading empty space on load). */
.ticker > .wp-block-group__inner-container { display: contents !important; }
.ticker-track { margin: 0 !important; }

/* Dual-CTA newsletter form — the input/button paragraphs carry Mai's
 * wp-block-paragraph margin-bottom, which made the bordered box taller than its
 * content (empty space under Subscribe). Zero it. */
.newsletter-form .nl-input,
.newsletter-form .nl-btn { margin: 0 !important; }
.newsletter-form { align-items: stretch !important; }

/* ============================================================
 * PAGE CHROME — shared by all non-home pages (page-header band,
 * breadcrumb, prose content). Extracted from the templates verbatim,
 * with adapters for Mai's block DOM.
 * ============================================================ */
.page-header{position:relative;background:var(--powder);border-bottom:1px solid var(--line);overflow:hidden}
.page-header::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(52,64,78,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(52,64,78,.06) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px;pointer-events:none}
.page-header-inner{position:relative;max-width:1320px;margin:0 auto;padding:44px 32px 64px}
.breadcrumb{font-family:var(--f-mono);font-size:16px;letter-spacing:.06em;color:var(--steel);margin-bottom:32px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:500}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb .sep{color:var(--steel-2)}
.breadcrumb .here{color:var(--ink);font-weight:600}
.page-kicker{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:16px;font-weight:600;letter-spacing:.10em;color:var(--slate);margin-bottom:22px}
.page-kicker .dot{width:10px;height:10px;background:var(--steel);border-radius:50%;box-shadow:0 0 0 5px rgba(78,107,140,.22)}
.page-title{font-family:var(--f-display);font-weight:400;font-size:clamp(48px,6vw,92px);line-height:.95;color:var(--ink);letter-spacing:-0.005em;margin-bottom:26px}
.page-title .accent{color:var(--steel)}
.page-lede{font-size:19px;line-height:1.55;color:var(--slate);max-width:680px}
.page-lede strong{color:var(--ink);font-weight:600}
.section-inner{max-width:1320px;margin:0 auto;padding:0 32px}
.prose{max-width:820px;font-size:17px;line-height:1.7;color:var(--slate)}
.prose h2{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.05;color:var(--ink);margin:48px 0 18px;letter-spacing:-0.005em}
.prose h3{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,2.2vw,28px);color:var(--ink);margin:32px 0 14px}
.prose h4{font-family:var(--f-mono);font-size:14px;letter-spacing:.10em;color:var(--steel);text-transform:uppercase;font-weight:600;margin:28px 0 10px}
.prose p,.prose ul,.prose ol{margin-bottom:18px}
.prose ul,.prose ol{padding-left:24px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--steel);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.prose a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.prose blockquote{border-left:3px solid var(--steel);padding:8px 20px;background:var(--paper-2);font-style:italic;color:var(--slate);margin:18px 0}
.prose .callout{padding:24px 28px;background:var(--paper-2);border:1px solid var(--line-strong);border-left:4px solid var(--steel);margin:24px 0}
.prose .callout h4{margin-top:0}

/* Adapters: neutralise Mai inner-containers for page-chrome blocks */
.page-header > .wp-block-group__inner-container,
.page-header-inner > .wp-block-group__inner-container,
.breadcrumb > .wp-block-group__inner-container,
.prose > .wp-block-group__inner-container,
.prose .callout > .wp-block-group__inner-container { display: contents !important; max-width:none !important; padding:0 !important; }
.wp-block-group.page-header, .wp-block-group.page-header-inner, .wp-block-group.prose, .wp-block-group.callout { display: block !important; }
.wp-block-group.breadcrumb, .wp-block-group.page-kicker { display: flex !important; }
.page-header-inner > .wp-block-group__inner-container { display: block !important; }
.prose p, .prose li { margin-left: 0; }

/* Non-home pages: hide Mai's own page-header band + entry title (we build our
 * own .page-header block to match the templates). */
body:not(.home) #page-header,
body:not(.home) .entry-title-single,
body:not(.home) .entry-header .entry-title { display: none !important; }
body:not(.home) .entry-content { margin: 0 !important; }
body:not(.home) .site-inner .content-sidebar-wrap { padding: 0 !important; }

/* Content-width correction for ALL pages (generalises the home-only rule) so
 * alignfull page sections reach the viewport edge and centred inners line up. */
.site-inner, .content-sidebar-wrap, main.content,
.entry-single, .entry-wrap-single, .entry-content-single {
  max-width: 100% !important; width: 100% !important;
  padding-left: 0 !important; padding-right: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
}
.content-sidebar-wrap { --alignfull-margin-left: 0; --alignfull-margin-right: 0; }
.entry-content > .alignfull { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; }

/* ============================================================
 * PAGE-SPECIFIC CSS — unique rules from each content page's
 * <style> (deduped; shared component classes already in site.css).
 * ============================================================ */

/* Non-home pages: neutralise Mai inner-containers broadly so the
 * templates' grid/flex className layouts apply to block-rendered DOM. */
body:not(.home) .entry-content .wp-block-group > .wp-block-group__inner-container {
  display: contents !important; max-width: none !important; padding: 0 !important;
}

.page-header-grid{display: grid; grid-template-columns: 1fr 0.8fr; gap: 64px; align-items: end; margin-top: 8px;}
.page-hero-image{position: relative; aspect-ratio: 4/3; background: var(--slate-2); border: 1px solid var(--ink); overflow: hidden;}
.page-hero-image img{width: 100%; height: 100%; object-fit: cover; display: block;}
.page-hero-image::after{content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(26,35,47,0.45)); pointer-events: none;}
.page-hero-caption{position: absolute; bottom: 18px; left: 18px; right: 18px; z-index: 2; font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; font-weight: 700; color: var(--paper); text-transform: uppercase; line-height: 1.4;}
.page-hero-caption .em{color: var(--steel-2);}
.sub-nav{background: var(--ink); border-bottom: 3px solid var(--steel); position: sticky; top: 109px; z-index: 90;}
.sub-nav-inner{max-width: 1320px; margin: 0 auto; padding: 0 32px; display: flex; align-items: stretch; font-family: var(--f-mono); font-size: 16px; letter-spacing: 0.08em; font-weight: 600; flex-wrap: wrap;}
.sub-nav-label{padding: 18px 24px 18px 0; color: var(--steel-2); border-right: 1px solid rgba(255,255,255,0.10); display: flex; align-items: center; gap: 12px;}
.sub-nav-label .arrow-down{color: var(--steel);}
.sub-nav a{color: var(--powder); padding: 18px 24px; display: inline-flex; align-items: center; gap: 10px; border-right: 1px solid rgba(255,255,255,0.10); transition: background 0.15s ease, color 0.15s ease;}
.sub-nav a:hover{background: var(--slate); color: var(--paper);}
.sub-nav a .num{color: var(--steel-2); font-weight: 500;}
.section-blurb{color: var(--slate); font-size: 17px; line-height: 1.55; max-width: 680px;}
.story-grid{display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start;}
.story-prose p{font-size: 19px; line-height: 1.65; margin-bottom: 22px; color: var(--slate);}
.story-prose p strong{color: var(--ink); font-weight: 600;}
.story-prose p:first-child::first-letter{font-family: var(--f-display);
  font-size: 92px;
  float: left;
  line-height: 0.85;
  margin: 6px 14px 0 0;
  color: var(--ink);}
.story-prose blockquote{border-left: 4px solid var(--steel);
  padding: 6px 0 6px 24px;
  margin: 28px 0;
  font-family: var(--f-display);
  font-size: 26px;
  line-height: 1.15;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;}
.story-stats{background: var(--paper); border: 1px solid var(--line-strong); border-top: 3px solid var(--steel);}
.story-stat{padding: 24px 28px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;}
.story-stat:last-child{border-bottom: none;}
.story-stat-v{font-family: var(--f-display); font-size: 44px; line-height: 1; color: var(--ink); letter-spacing: -0.005em; min-width: 100px;}
.story-stat-v .unit{font-family: var(--f-mono); font-size:13px; color: var(--steel); margin-left: 4px; font-weight: 600; letter-spacing: 0.06em;}
.story-stat-k{font-family: var(--f-mono); font-size:13px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600; margin-bottom: 4px;}
.story-stat-d{font-family: var(--f-mono); font-size:16px; color: var(--ink); font-weight: 500; line-height: 1.4;}
.timeline{background: var(--paper); border: 1px solid var(--line-strong); border-top: 3px solid var(--steel); padding: 48px 56px 8px;}
.timeline-row{display: grid; grid-template-columns: 110px 1fr; gap: 36px; padding-bottom: 36px; border-left: 2px solid var(--line); margin-left: 24px; padding-left: 36px; position: relative;}
.timeline-row::before{content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; background: var(--steel); border-radius: 50%; box-shadow: 0 0 0 5px var(--paper);}
.timeline-row:last-child{border-left-color: transparent; padding-bottom: 8px;}
.timeline-year{font-family: var(--f-display); font-size: 44px; line-height: 1; color: var(--steel); letter-spacing: -0.005em;}
.timeline-content h4{font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1.1; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.005em;}
.timeline-content p{font-size:16px; line-height: 1.55; color: var(--slate);}
.what-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--paper); border: 1px solid var(--line-strong);}
.what-card{padding: 48px 44px; display: flex; flex-direction: column; gap: 18px;}
.what-card.are{background: var(--ink); color: var(--powder);}
.what-card.arent{background: var(--paper); color: var(--slate); border-left: 1px solid var(--line-strong);}
.what-tag{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; align-self: flex-start; padding: 6px 10px; background: var(--steel); color: var(--paper);}
.what-card.arent .what-tag{background: var(--paper-2); color: var(--ink); border: 1px solid var(--line-strong);}
.what-title{font-family: var(--f-display); font-weight: 400; font-size: 38px; line-height: 1; letter-spacing: -0.005em;}
.what-card.are .what-title{color: var(--paper);}
.what-card.arent .what-title{color: var(--ink);}
.what-list{list-style: none; display: flex; flex-direction: column; gap: 14px;}
.what-list li{display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; font-size: 16px; line-height: 1.5; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.10);}
.what-card.arent .what-list li{border-bottom-color: var(--line); color: var(--slate);}
.what-card.are .what-list li{color: var(--powder);}
.what-list li:last-child{border-bottom: none; padding-bottom: 0;}
.what-list li::before{content: "→"; font-family: var(--f-mono); font-weight: 700;}
.what-card.are .what-list li::before{color: var(--steel-2);}
.what-card.arent .what-list li::before{color: var(--steel);}
.what-list li strong{font-weight: 600;}
.what-card.are .what-list li strong{color: var(--paper);}
.what-card.arent .what-list li strong{color: var(--ink);}
.partners-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--paper); border: 1px solid var(--line-strong);}
.partner-card{padding: 32px 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; transition: background 0.15s ease; cursor: pointer; color: var(--slate);}
.partner-card:nth-child(4n){border-right: none;}
.partner-card:nth-child(n+5){border-top: 1px solid var(--line);}
.partner-card:hover{background: var(--paper-2);}
.partner-name{font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1.05; color: var(--ink); letter-spacing: -0.005em;}
.partner-role{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.10em; color: var(--steel);}
.partner-blurb{font-size:16px; line-height: 1.5; color: var(--slate); flex: 1;}
.partner-meta{font-family: var(--f-mono); font-size:13px; letter-spacing: 0.06em; color: var(--steel); padding-top: 10px; border-top: 1px solid var(--line);}
.quality-grid{display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;}
.quality-content{background: var(--ink); color: var(--powder); padding: 64px 56px;}
.quality-content h3{font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 4vw, 52px); line-height: 1; color: var(--paper); margin-bottom: 22px; letter-spacing: -0.005em;}
.quality-content p{font-size: 16px; line-height: 1.6; margin-bottom: 18px; color: var(--powder); opacity: 0.85; max-width: 480px;}
.quality-content blockquote{border-left: 4px solid var(--steel); padding: 8px 0 8px 22px; margin: 28px 0; font-family: var(--f-display); font-size: 22px; line-height: 1.2; color: var(--paper); font-weight: 400; letter-spacing: -0.005em; opacity: 0.95;}
.quality-content .btn-primary{background: var(--steel); margin-top: 8px;}
.quality-content .btn-primary:hover{background: var(--paper); color: var(--ink);}
.quality-stack{display: grid; grid-template-rows: repeat(4, 1fr);}
.quality-row{padding: 28px 36px; background: var(--slate-2); color: var(--paper); border-bottom: 1px solid rgba(255,255,255,0.14); display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center;}
.quality-row:last-child{border-bottom: none;}
.quality-row .ico{width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid var(--steel); color: var(--steel-2);}
.quality-row .ico svg{width: 24px; height: 24px;}
.quality-row .label{font-family: var(--f-mono); font-size:13px; letter-spacing: 0.12em; color: var(--steel-2); font-weight: 700; margin-bottom: 4px;}
.quality-row .title{font-family: var(--f-display); font-size: 22px; color: var(--paper); letter-spacing: -0.005em; line-height: 1; margin-bottom: 4px;}
.quality-row .meta{font-family: var(--f-mono); font-size:13px; color: var(--steel-2); letter-spacing: 0.04em;}
.locations-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--paper); border: 1px solid var(--line-strong); margin-top: 56px;}
.loc-layout{display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;}
@media (max-width: 1024px){
.loc-layout{grid-template-columns: 1fr; gap: 32px;}
}
.loc-card{padding: 40px 36px; border-right: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 18px;}
.loc-card:last-child{border-right: none;}
.loc-card.primary{background: var(--ink); color: var(--powder);}
.loc-card.primary .loc-badge{background: var(--steel); color: var(--paper);}
.loc-card.primary .loc-name{color: var(--paper);}
.loc-card.primary .loc-addr, .loc-card.primary .loc-contact{color: var(--powder);}
.loc-card.primary .loc-contact .em{color: var(--steel-2);}
.loc-card.primary a:hover{color: var(--paper);}
.loc-badge{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; padding: 5px 9px; background: var(--powder); color: var(--ink); align-self: flex-start;}
.loc-region{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; color: var(--steel);}
.loc-card.primary .loc-region{color: var(--steel-2);}
.loc-name{font-family: var(--f-display); font-weight: 400; font-size: 32px; line-height: 1.05; color: var(--ink); letter-spacing: -0.005em;}
.loc-addr{font-family: var(--f-mono); font-size:16px; line-height: 1.7; color: var(--slate);}
.loc-contact{font-family: var(--f-mono); font-size:16px; line-height: 1.7; padding-top: 16px; border-top: 1px solid var(--line);}
.loc-card.primary .loc-contact{border-top-color: rgba(255,255,255,0.14);}
.loc-contact .em{color: var(--steel); margin-right: 10px; font-weight: 700;}
.assoc-bar{padding: 80px 0; background: var(--powder);}
.assoc-inner{max-width: 1320px; margin: 0 auto; padding: 0 32px;}
.assoc-head{display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: end; padding-bottom: 32px; border-bottom: 1.5px solid var(--slate); margin-bottom: 48px;}
.assoc-head .meta{font-family: var(--f-mono); font-size:14px; letter-spacing: 0.12em; color: var(--slate); font-weight: 600;}
.assoc-head .meta .num{display: block; font-family: var(--f-display); font-size: 44px; color: var(--steel); line-height: 1; letter-spacing: 0; margin-bottom: 8px;}
.assoc-head h3{font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1; color: var(--ink); letter-spacing: -0.005em;}
.assoc-grid{display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;}
.assoc-tile{background: var(--paper); border: 1px solid var(--line-strong); aspect-ratio: 3/2; display: grid; place-items: center; padding: 24px; transition: border-color 0.15s ease, background 0.15s ease;}
.assoc-tile:hover{border-color: var(--steel); background: var(--paper-2);}
.assoc-tile img{max-width: 100%; max-height: 80px; object-fit: contain; mix-blend-mode: multiply;}
.assoc-tile.text-only{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.10em; color: var(--steel); text-align: center; line-height: 1.4;}
@media (max-width: 1024px){
.story-grid, .what-grid, .quality-grid, .section-head, .footer-top, .dual-cta, .assoc-head{grid-template-columns: 1fr !important; gap: 32px !important;}
.partners-grid{grid-template-columns: repeat(2, 1fr);}
.partner-card:nth-child(4n){border-right: 1px solid var(--line);}
.partner-card:nth-child(2n){border-right: none;}
.partner-card:nth-child(n+5){border-top: 1px solid var(--line);}
.partner-card:nth-child(n+3){border-top: 1px solid var(--line);}
.locations-grid{grid-template-columns: 1fr;}
.loc-card{border-right: none; border-bottom: 1px solid var(--line-strong);}
.loc-card:last-child{border-bottom: none;}
.assoc-grid{grid-template-columns: repeat(3, 1fr);}
.sub-nav{position: static;}
}
@media (max-width: 640px){
.partners-grid{grid-template-columns: 1fr;}
.partner-card{border-right: none !important; border-top: 1px solid var(--line) !important;}
.partner-card:first-child{border-top: none !important;}
.assoc-grid{grid-template-columns: repeat(2, 1fr);}
.timeline{padding: 36px 28px 8px;}
.timeline-row{grid-template-columns: 1fr; gap: 8px; padding-left: 24px; margin-left: 16px;}
}
.blog-section{background: var(--paper); padding: 96px 0;}
.blog-section-inner{max-width: 1320px; margin: 0 auto; padding: 0 32px;}
.blog-section-head{margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1.5px solid var(--slate);}
.blog-section-title{font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 4.6vw, 64px); line-height: 0.95; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 8px;}
.blog-section-meta{font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600;}
.culture-strip{padding: 56px 0; background: var(--paper-2); position: relative;}
.culture-strip-inner{max-width: 1320px; margin: 0 auto; padding: 0 32px; position: relative;}
.culture-strip-track{display: grid; grid-auto-flow: column; grid-auto-columns: minmax(420px, 42%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--steel) transparent;}
.culture-strip-track::-webkit-scrollbar{height: 6px;}
.culture-strip-track::-webkit-scrollbar-thumb{background: var(--steel);}
.culture-strip-track > img{aspect-ratio: 4/3; width: 100%; height: auto; object-fit: cover; scroll-snap-align: start; border: 1px solid var(--line-strong); display: block;}
.culture-strip-nav{position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: var(--paper); border: 1px solid var(--line-strong); display: grid; place-items: center; cursor: pointer; z-index: 5; color: var(--ink); transition: all 0.15s ease; box-shadow: 0 4px 12px rgba(26,35,47,0.12); padding: 0;}
.culture-strip-nav:hover{background: var(--ink); color: var(--paper); border-color: var(--ink);}
.culture-strip-nav.prev{left: 24px;}
.culture-strip-nav.next{right: 24px;}
.culture-strip-nav svg{width: 20px; height: 20px;}
@media (max-width: 768px){
.culture-strip-track{grid-auto-columns: 80%;}
}
/* Carousel arrows must stay on-screen at every width. Their offset parent was
   .culture-strip-inner (max-width:1320px), which overflows the viewport below
   ~1352px and pushed the NEXT arrow off the right edge. Anchor them to the
   viewport-width .culture-strip instead, inset to the 1320 track edge on wide
   screens and 24px on narrow — visible on all screen sizes (per request). */
.culture-strip-inner{position: static;}
.culture-strip-nav.prev{left: max(24px, calc((100% - 1320px) / 2 + 24px));}
.culture-strip-nav.next{right: max(24px, calc((100% - 1320px) / 2 + 24px));}
/* The prev/next arrows overlay the strip edges. The JS (culture-carousel.js)
 * hides .prev at the scroll start and .next at the scroll end via the
 * .csc-edge-hidden class, so the first/last photo is never covered by an arrow
 * at rest. */
.culture-strip-nav.csc-edge-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.entities-band{background:var(--ink);color:var(--powder);padding:48px 32px;border-bottom:3px solid var(--steel)}
.entities-band-inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center}
.entities-band .meta{font-family:var(--f-mono);font-size:14px;letter-spacing:.10em;color:var(--steel-2);font-weight:600;margin-bottom:12px}
.entities-band h2{font-family:var(--f-display);font-size:clamp(28px,2.6vw,36px);line-height:1;color:var(--paper);font-weight:400}
.entities-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.entity{background:var(--slate);padding:24px 28px;font-family:var(--f-mono);font-size:16px;line-height:1.5}
.entity .name{color:var(--paper);font-weight:600;font-size:16px;letter-spacing:.02em;margin-bottom:6px;display:block}
.entity .role{color:var(--steel-2);font-size:13px;letter-spacing:.04em}
@media (max-width:1024px){
.entities-band-inner,.entities-list,.footer-top{grid-template-columns:1fr!important;gap:32px!important}
}
.ev-list{max-width:1000px;margin:0 auto;padding:80px 32px}
.ev{display:grid;grid-template-columns:150px 1fr auto;gap:32px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}
.ev:first-child{border-top:1px solid var(--line)}
.ev-date{font-family:var(--f-mono);font-weight:600;color:var(--steel);font-size:14px;letter-spacing:.06em;line-height:1.5}
.ev-date b{display:block;font-family:var(--f-display);font-size:30px;color:var(--ink);font-weight:400;letter-spacing:0}
.ev-name{font-family:var(--f-display);font-size:24px;color:var(--ink);font-weight:400;line-height:1.1;margin-bottom:6px}
.ev-where{font-family:var(--f-mono);font-size:13px;color:var(--steel);letter-spacing:.06em}
.ev-tag{font-family:var(--f-mono);font-size:13px;font-weight:700;letter-spacing:.10em;padding:6px 12px;background:var(--paper-2);border:1px solid var(--line-strong);color:var(--steel);white-space:nowrap}
.ev-note{max-width:1000px;margin:0 auto;padding:0 32px 80px}
@media (max-width:680px){
.ev{grid-template-columns:1fr;gap:8px}
}
.page-header-grid{display:grid;grid-template-columns:1.3fr 0.9fr;gap:56px;align-items:center}
.page-hero-image{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line-strong);margin:0}
.page-hero-image img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){
.page-header-grid{grid-template-columns:1fr;gap:32px}
}
.btn-block{display: block; width: 100%; text-align: center; padding: 18px 24px; background: var(--ink); color: var(--paper); border: none;}
.btn-block:hover{background: var(--steel);}
.page-title-grid{display: grid; grid-template-columns: 1.4fr 0.85fr; gap: 64px; align-items: end;}
.career-stats{background: var(--paper); border: 1px solid var(--line-strong); border-top: 2px solid var(--steel);}
.career-stats > div{padding: 18px 22px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; font-family: var(--f-mono);}
.career-stats > div:last-child{border-bottom: none;}
.career-stats .k{font-size:13px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600;}
.career-stats .v{font-family: var(--f-display); font-size: 24px; color: var(--ink); letter-spacing: -0.005em; line-height: 1;}
.career-stats .v .unit{font-family: var(--f-mono); font-size:13px; color: var(--steel); margin-left: 4px; font-weight: 600; letter-spacing: 0.06em;}
.why-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--paper); border: 1px solid var(--line-strong);}
.why-card{padding: 40px 32px; border-right: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 18px;}
.why-card:nth-child(3n){border-right: none;}
.why-card:nth-child(n+4){border-top: 1px solid var(--line-strong);}
.why-icon{width: 56px; height: 56px; background: var(--ink); color: var(--paper); display: grid; place-items: center;}
.why-icon svg{width: 28px; height: 28px;}
.why-num{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; color: var(--steel);}
.why-title{font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.05; color: var(--ink); letter-spacing: -0.005em;}
.why-body{font-size:16px; line-height: 1.55; color: var(--slate);}
.why-body strong{color: var(--ink); font-weight: 600;}
.jobs-toolbar{background: var(--ink); color: var(--paper); padding: 24px 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-family: var(--f-mono); font-size:13px; letter-spacing: 0.06em;}
.jobs-toolbar .label{color: var(--steel-2); font-weight: 700; letter-spacing: 0.10em;}
.jobs-toolbar .count{font-family: var(--f-display); font-size: 32px; color: var(--paper); letter-spacing: -0.005em; line-height: 1; padding: 0 10px;}
.jobs-toolbar .filter-chips{display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto;}
.chip{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.10em; padding: 6px 10px; background: var(--slate-2); color: var(--paper); border: 1px solid rgba(255,255,255,0.18); cursor: pointer; transition: all 0.15s ease;}
.chip:hover{background: var(--steel); border-color: var(--steel);}
.chip.active{background: var(--steel); border-color: var(--steel);}
.jobs-list{background: var(--paper); border: 1px solid var(--line-strong); border-top: none;}
.job-row{display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 24px; align-items: center; padding: 22px 28px; border-bottom: 1px solid var(--line); transition: background 0.15s ease; cursor: pointer;}
.job-row:last-child{border-bottom: none;}
.job-row:hover{background: var(--paper-2);}
.job-row:hover .job-arrow{transform: translateX(4px); color: var(--ink);}
.job-id{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.06em; color: var(--steel); min-width: 64px;}
.job-title-cell{display: flex; flex-direction: column; gap: 4px;}
.job-title-name{font-family: var(--f-display); font-weight: 400; font-size: 22px; line-height: 1.05; color: var(--ink); letter-spacing: -0.005em;}
.job-title-dept{font-family: var(--f-mono); font-size:13px; letter-spacing: 0.06em; color: var(--steel);}
.job-tag{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.10em; padding: 5px 9px;}
.job-tag.full{background: var(--ink); color: var(--paper);}
.job-tag.part{background: var(--paper-2); color: var(--ink); border: 1px solid var(--line-strong);}
.job-loc{font-family: var(--f-mono); font-size:16px; color: var(--slate); white-space: nowrap;}
.job-loc .em{color: var(--ink); font-weight: 700; letter-spacing: 0.04em;}
.job-shift{font-family: var(--f-mono); font-size:13px; letter-spacing: 0.06em; color: var(--steel); white-space: nowrap;}
.job-arrow{font-family: var(--f-mono); font-size: 18px; color: var(--steel); transition: transform 0.2s ease, color 0.2s ease;}
.benefits-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--paper); border: 1px solid var(--line-strong);}
.benefit-card{padding: 32px 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px;}
.benefit-card:nth-child(4n){border-right: none;}
.benefit-card:nth-child(n+5){border-top: 1px solid var(--line);}
.benefit-icon{width: 44px; height: 44px; background: var(--powder); color: var(--ink); display: grid; place-items: center;}
.benefit-icon svg{width: 22px; height: 22px;}
.benefit-title{font-family: var(--f-display); font-weight: 400; font-size: 22px; line-height: 1.05; color: var(--ink); letter-spacing: -0.005em;}
.benefit-desc{font-size:16px; line-height: 1.5; color: var(--slate);}
.process-card{padding: 36px 28px; border-right: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 14px; position: relative;}
.process-card:last-child{border-right: none;}
.process-title{font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1.05; color: var(--ink); letter-spacing: -0.005em;}
.process-meta{font-family: var(--f-mono); font-size:13px; letter-spacing: 0.06em; color: var(--steel); padding-top: 12px; border-top: 1px solid var(--line); margin-top: auto;}
.process-meta .em{color: var(--ink); font-weight: 700;}
.app-form-card{display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; background: var(--paper); border: 1px solid var(--line-strong); border-top: 3px solid var(--steel);}
.app-form-side{padding: 48px 48px; display: flex; flex-direction: column; gap: 22px;}
.app-form-side-meta{padding: 48px 48px; background: var(--ink); color: var(--powder); display: flex; flex-direction: column; gap: 22px; border-left: 1px solid var(--line-strong);}
.field{display: flex; flex-direction: column; gap: 8px;}
.field label{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; color: var(--steel);}
.field label .required{color: var(--steel);}
.field input, .field select, .field textarea{font-family: var(--f-body);
  font-size: 16px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  width: 100%;
  transition: border-color 0.15s ease;}
.field input:focus, .field select:focus, .field textarea:focus{outline: none;
  border-color: var(--steel);
  box-shadow: 0 0 0 3px rgba(78,107,140,0.18);}
.field textarea{min-height: 120px; resize: vertical;}
.field-row{display: grid; grid-template-columns: 1fr 1fr; gap: 18px;}
.field-help{font-family: var(--f-mono); font-size:13px; letter-spacing: 0.06em; color: var(--steel); margin-top: 2px;}
.app-form-side-meta :is(h3,h4){font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.05; color: var(--paper); letter-spacing: -0.005em;}
.app-form-side-meta p{font-size:16px; line-height: 1.55; color: var(--powder); opacity: 0.85;}
.tag-chip{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.10em; padding: 5px 9px; background: var(--steel); color: var(--paper); align-self: flex-start;}
.app-meta-list{list-style: none; display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.14);}
.app-meta-list li{display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size:16px; line-height: 1.5; color: var(--powder);}
.app-meta-list li::before{content: "→"; color: var(--steel-2); font-family: var(--f-mono); font-weight: 700;}
.app-meta-list strong{color: var(--paper); font-weight: 600;}
@media (max-width: 1024px){
.page-title-grid, .section-head, .footer-top, .dual-cta, .app-form-card{grid-template-columns: 1fr !important; gap: 32px !important;}
.why-grid{grid-template-columns: 1fr;}
.why-card{border-right: none; border-bottom: 1px solid var(--line-strong); border-top: none !important;}
.why-card:last-child{border-bottom: none;}
.benefits-grid{grid-template-columns: repeat(2, 1fr);}
.benefit-card:nth-child(4n){border-right: 1px solid var(--line);}
.benefit-card:nth-child(2n){border-right: none;}
.benefit-card:nth-child(n+3){border-top: 1px solid var(--line);}
.process-card{border-right: none; border-bottom: 1px solid var(--line-strong);}
.process-card:last-child{border-bottom: none;}
.app-form-side-meta{border-left: none; border-top: 1px solid var(--line-strong);}
.job-row{grid-template-columns: auto 1fr auto auto auto; gap: 16px;}
.job-row .job-shift{display: none;}
.sub-nav{position: static;}
}
@media (max-width: 640px){
.benefits-grid{grid-template-columns: 1fr;}
.benefit-card{border-right: none !important;}
.field-row{grid-template-columns: 1fr;}
.job-row{grid-template-columns: 1fr; gap: 8px;}
.job-row .job-loc, .job-row .job-arrow, .job-row .job-tag{display: inline-flex;}
}
.quick-bar{background: var(--ink); color: var(--paper); border-bottom: 3px solid var(--steel);}
.quick-bar-inner{max-width: 1320px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(4, 1fr);}
.quick-cell{padding: 28px 32px; border-right: 1px solid rgba(255,255,255,0.10); display: flex; flex-direction: column; gap: 6px;}
.quick-cell:last-child{border-right: none;}
.quick-cell.action{background: var(--steel);}
.quick-cell.action:hover{background: var(--paper);}
.quick-cell.action:hover .quick-label, .quick-cell.action:hover .quick-value, .quick-cell.action:hover .quick-sub{color: var(--ink);}
.quick-label{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; color: var(--steel-2);}
.quick-cell.action .quick-label{color: var(--paper); opacity: 0.8;}
.quick-value{font-family: var(--f-display); font-weight: 400; font-size: 28px; line-height: 1; color: var(--paper); letter-spacing: -0.005em;}
.quick-cell.action .quick-value{color: var(--paper);}
.quick-sub{font-family: var(--f-mono); font-size:13px; letter-spacing: 0.06em; color: var(--steel-2);}
.quick-cell.action .quick-sub{color: var(--paper); opacity: 0.85;}
.picker{padding: 96px 0 0;}
.picker-inner{max-width: 1320px; margin: 0 auto; padding: 0 32px;}
.picker-grid{display: grid; grid-template-columns: repeat(3, 1fr); background: var(--paper); border: 1px solid var(--line-strong);}
.picker-card{padding: 44px 36px 36px; border-right: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 18px; transition: background 0.15s ease; cursor: pointer; color: var(--slate); position: relative;}
.picker-card:last-child{border-right: none;}
.picker-card:hover{background: var(--paper-2);}
.picker-card:hover .pick-arrow{transform: translateX(4px);}
.picker-card.featured{background: var(--ink); color: var(--powder);}
.picker-card.featured .pick-num{color: var(--steel-2);}
.picker-card.featured .pick-title{color: var(--paper);}
.picker-card.featured .pick-desc{color: var(--powder); opacity: 0.85;}
.picker-card.featured:hover{background: var(--slate);}
.pick-icon{width: 56px; height: 56px; display: grid; place-items: center; background: var(--ink); color: var(--paper);}
.picker-card.featured .pick-icon{background: var(--steel);}
.pick-icon svg{width: 28px; height: 28px;}
.pick-num{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; color: var(--steel);}
.pick-title{font-family: var(--f-display); font-weight: 400; font-size: 32px; line-height: 1.05; color: var(--ink); letter-spacing: -0.005em;}
.pick-desc{font-size:16px; line-height: 1.55; color: var(--slate); flex: 1;}
.pick-cta{font-family: var(--f-mono); font-size:14px; font-weight: 600; letter-spacing: 0.08em; color: var(--steel); padding-top: 14px; border-top: 1px solid var(--line); display: inline-flex; align-items: center; gap: 8px;}
.picker-card.featured .pick-cta{color: var(--steel-2); border-top-color: rgba(255,255,255,0.14);}
.pick-arrow{transition: transform 0.2s; display: inline-block;}
.picker-card.outlined{box-shadow: inset 0 0 0 2px var(--steel);}
.picker-card.greybg{background: var(--powder); border-right: none;}
.form-section{padding: 96px 0; scroll-margin-top: 175px;}
.form-section.alt{background: var(--paper-2);}
.form-section.dark{background: var(--ink); color: var(--powder);}
.form-head{display: block; margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1.5px solid var(--slate);}
.form-section.dark .form-head{border-bottom-color: var(--steel);}
.form-meta{font-family: var(--f-mono); font-size: 16px; letter-spacing: 0.10em; color: var(--slate); font-weight: 600; margin-bottom: 16px;}
.form-section.dark .form-meta{color: var(--steel-2);}
.form-meta .num{display: block; font-family: var(--f-display); font-size: 56px; color: var(--steel); letter-spacing: 0; line-height: 1; margin-bottom: 12px;}
.form-title{font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 16px;}
.form-section.dark .form-title{color: var(--paper);}
.form-blurb{color: var(--slate); font-size: 17px; line-height: 1.55; max-width: 680px;}
.form-section.dark .form-blurb{color: var(--powder); opacity: 0.85;}
.form-card{display: grid; grid-template-columns: 1.6fr 1fr; gap: 0; background: var(--paper); border: 1px solid var(--line-strong); border-top: 3px solid var(--steel);}
.form-side{padding: 48px 48px; display: flex; flex-direction: column; gap: 24px;}
.form-side-meta{padding: 48px 48px; background: var(--powder); display: flex; flex-direction: column; gap: 28px; border-left: 1px solid var(--line-strong);}
.form-section.dark .form-card{background: var(--slate-2); border-color: rgba(255,255,255,0.14); border-top-color: var(--steel);}
.form-section.dark .form-side-meta{background: var(--ink); border-left-color: rgba(255,255,255,0.14);}
.form-section.dark .field label{color: var(--steel-2);}
.form-section.dark .field input, .form-section.dark .field select, .form-section.dark .field textarea{background: var(--ink);
  border-color: rgba(255,255,255,0.14);
  color: var(--paper);}
.form-section.dark .field input::placeholder, .form-section.dark .field textarea::placeholder{color: var(--steel-2);}
.field-row.tri{grid-template-columns: 1fr 1fr 1fr;}
.form-section.dark .field-help{color: var(--steel-2);}
.form-meta-block :is(h3,h4){font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.05; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 14px;}
.form-section.dark .form-meta-block :is(h3,h4){color: var(--paper);}
.form-meta-block p{font-size:16px; line-height: 1.55; color: var(--slate); margin-bottom: 14px;}
.form-section.dark .form-meta-block p{color: var(--powder); opacity: 0.85;}
.form-meta-list{list-style: none; display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line);}
.form-meta-list li{display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size:16px; color: var(--slate); line-height: 1.5;}
.form-section.dark .form-meta-list li{color: var(--powder);}
.form-meta-list li::before{content: "→"; color: var(--steel); font-family: var(--f-mono); font-weight: 700;}
.form-meta-list strong{color: var(--ink); font-weight: 600;}
.form-section.dark .form-meta-list strong{color: var(--paper);}
.tag-chip{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.10em; padding: 4px 8px; background: var(--ink); color: var(--paper); display: inline-block;}
.form-section.dark .tag-chip{background: var(--steel);}
.locations{padding: 96px 0; background: var(--paper); scroll-margin-top: 175px;}
.depts{padding: 96px 0; background: var(--paper-2);}
.dept-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px;}
.dept-card{background: var(--paper); border: 1px solid var(--line-strong); padding: 32px 32px; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center;}
.dept-icon{width: 56px; height: 56px; background: var(--powder); display: grid; place-items: center; color: var(--ink);}
.dept-icon svg{width: 28px; height: 28px;}
.dept-name{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; color: var(--steel); margin-bottom: 8px;}
.dept-title{font-family: var(--f-display); font-weight: 400; font-size: 22px; line-height: 1.05; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 8px;}
.dept-contact{font-family: var(--f-mono); font-size:16px; color: var(--slate);}
.dept-contact a:hover{color: var(--ink);}
.dept-contact .sep{color: var(--steel-2); margin: 0 8px;}
.hours-block{padding: 80px 0; background: var(--ink); color: var(--powder);}
.hours-inner{max-width: 1320px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center;}
.hours-content h3{font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 3.8vw, 50px); line-height: 1; color: var(--paper); letter-spacing: -0.005em; margin-bottom: 18px;}
.hours-content p{color: var(--powder); opacity: 0.85; font-size: 16px; line-height: 1.6; max-width: 460px;}
.hours-table{background: var(--slate-2); border: 1px solid rgba(255,255,255,0.14);}
.hours-row{display: grid; grid-template-columns: 200px 1fr auto; padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,0.10); align-items: center; gap: 24px; font-family: var(--f-mono); font-size:16px;}
.hours-row:last-child{border-bottom: none;}
.hours-row .day{color: var(--steel-2); font-weight: 700; letter-spacing: 0.10em; font-size:13px;}
.hours-row .time{color: var(--paper); font-weight: 600;}
.hours-row .note{color: var(--steel-2); font-size:13px; letter-spacing: 0.06em; text-align: right;}
@media (max-width: 1024px){
.quick-bar-inner{grid-template-columns: repeat(2, 1fr);}
.quick-cell:nth-child(2n){border-right: none;}
.quick-cell:nth-child(n+3){border-top: 1px solid rgba(255,255,255,0.10);}
.form-card{grid-template-columns: 1fr;}
.form-side-meta{border-left: none; border-top: 1px solid var(--line-strong);}
.form-section.dark .form-side-meta{border-top-color: rgba(255,255,255,0.14);}
.locations-grid{grid-template-columns: 1fr;}
.loc-card{border-right: none; border-bottom: 1px solid var(--line-strong);}
.loc-card:last-child{border-bottom: none;}
.form-head, .footer-top, .dual-cta, .hours-inner{grid-template-columns: 1fr !important; gap: 32px !important;}
.dept-grid{grid-template-columns: 1fr;}
}
@media (max-width: 640px){
.quick-bar-inner{grid-template-columns: 1fr;}
.picker-grid{grid-template-columns: 1fr;}
.picker-card{border-right: none; border-bottom: 1px solid var(--line-strong);}
.picker-card:last-child{border-bottom: none;}
.quick-cell{border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.10);}
.field-row, .field-row.tri{grid-template-columns: 1fr;}
.hours-row{grid-template-columns: 1fr; gap: 6px;}
.hours-row .note{text-align: left;}
}
.page-header-grid{display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: end; margin-top: 8px;}
.page-hero-image{position: relative; aspect-ratio: 16/9; background: var(--slate-2); border: 1px solid var(--ink); overflow: hidden;}
@media (max-width: 1024px){
.page-header-grid{grid-template-columns: 1fr; gap: 32px;}
}
.faq-stats{background: var(--paper); border: 1px solid var(--line-strong); border-top: 2px solid var(--steel);}
.faq-stats > div{padding: 18px 22px; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size:16px;}
.faq-stats > div:last-child{border-bottom: none;}
.faq-stats .k{color: var(--steel); font-weight: 600; letter-spacing: 0.10em; font-size:13px;}
.faq-stats .v{color: var(--ink); font-weight: 600; font-size:14px; letter-spacing: 0.04em; text-align: right;}
.faq-section{padding: 88px 0; scroll-margin-top: 175px;}
.faq-section.alt{background: var(--paper-2);}
.faq-grid{background: var(--paper); border: 1px solid var(--line-strong); border-top: 3px solid var(--steel);}
.faq-section.alt .faq-grid{background: var(--paper);}
.faq-item{padding: 32px 36px; border-bottom: 1px solid var(--line);}
.faq-item:last-child{border-bottom: none;}
.faq-q{font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 14px;}
.faq-a{font-size: 16px; line-height: 1.6; color: var(--slate);}
.faq-a strong{color: var(--ink); font-weight: 600;}
.faq-a a{color: var(--steel); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;}
.faq-a a:hover{color: var(--ink); text-decoration-color: var(--ink);}
.faq-a p + p{margin-top: 12px;}
.faq-tags{margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px;}
.faq-tag{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.10em; padding: 4px 8px; background: var(--paper-2); color: var(--steel); border: 1px solid var(--line);}
.faq-tag.hot{background: var(--ink); color: var(--paper); border-color: var(--ink);}
.split-card{display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); color: var(--powder); padding: 56px 48px; gap: 48px; align-items: center; margin-top: 56px;}
.split-card h3{font-family: var(--f-display); font-weight: 400; font-size: clamp(32px, 3.4vw, 44px); line-height: 1; color: var(--paper); letter-spacing: -0.005em; margin-bottom: 18px;}
.split-card p{font-size: 16px; line-height: 1.55; color: var(--powder); opacity: 0.85; margin-bottom: 22px;}
.split-card .btn-primary{background: var(--steel);}
.split-card .btn-primary:hover{background: var(--paper); color: var(--ink);}
.split-card-callouts{display: flex; flex-direction: column; gap: 14px; font-family: var(--f-mono); font-size:16px; color: var(--paper);}
.split-card-callouts > div{padding: 16px 20px; background: var(--slate-2); border-left: 3px solid var(--steel);}
.split-card-callouts .em{color: var(--steel-2); letter-spacing: 0.10em; font-size:13px; font-weight: 700; display: block; margin-bottom: 4px;}
@media (max-width: 1024px){
.page-title-grid, .section-head, .footer-top, .dual-cta, .split-card{grid-template-columns: 1fr !important; gap: 32px !important;}
.sub-nav{position: static;}
}
@media (max-width: 640px){
.faq-item{padding: 24px 22px;}
}
.page-title-grid{display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 64px; align-items: end;}
.spec-stats-card{background: var(--paper); border: 1px solid var(--line-strong); border-top: 2px solid var(--steel);}
.spec-stat-row{display: grid; grid-template-columns: 1fr auto; padding: 18px 22px; border-bottom: 1px solid var(--line); align-items: center; gap: 24px; font-family: var(--f-mono);}
.spec-stat-row:last-child{border-bottom: none;}
.spec-stat-row .k{font-size:13px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600;}
.spec-stat-row .v{font-family: var(--f-display); font-size: 24px; color: var(--ink); letter-spacing: -0.005em; line-height: 1;}
.spec-stat-row .v .unit{font-family: var(--f-mono); font-size:13px; color: var(--steel); letter-spacing: 0.06em; margin-left: 4px; font-weight: 600;}
.search-card{background: var(--ink); color: var(--paper); border: 1px solid var(--steel); padding: 0; overflow: hidden;}
.search-card-head{padding: 28px 36px; background: var(--slate-2); border-bottom: 2px solid var(--steel); display: flex; gap: 18px; align-items: center; flex-wrap: wrap;}
.search-card-tag{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; padding: 6px 10px; background: var(--steel); color: var(--paper);}
.search-card-title{font-family: var(--f-display); font-weight: 400; font-size: 26px; color: var(--paper); letter-spacing: -0.005em;}
.search-card-meta{font-family: var(--f-mono); font-size:13px; letter-spacing: 0.06em; color: var(--steel-2); margin-left: auto;}
.search-form{padding: 36px 36px 28px; display: grid; grid-template-columns: 200px 1fr auto; gap: 16px; align-items: end;}
.search-field{display: flex; flex-direction: column; gap: 8px;}
.search-field label{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; color: var(--steel-2);}
.search-field select, .search-field input{font-family: var(--f-mono); font-size: 16px; padding: 16px 18px; background: var(--ink); border: 1px solid rgba(255,255,255,0.18); color: var(--paper); width: 100%; transition: border-color 0.15s ease;}
.search-field select:focus, .search-field input:focus{outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(78,107,140,0.32);}
.search-field input::placeholder{color: var(--steel-2);}
.search-submit{padding: 16px 22px; background: var(--steel); color: var(--paper); border: none; font-family: var(--f-mono); font-size:14px; font-weight: 700; letter-spacing: 0.10em; cursor: pointer; transition: background 0.15s ease;}
.search-submit:hover{background: var(--paper); color: var(--ink);}
.search-examples{padding: 0 36px 28px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--f-mono); font-size:16px; color: var(--steel-2);}
.search-examples .label{letter-spacing: 0.10em; font-weight: 700; color: var(--steel-2);}
.search-chip{font-family: var(--f-mono); font-size:13px; font-weight: 600; letter-spacing: 0.06em; padding: 5px 9px; background: var(--slate-2); color: var(--paper); border: 1px solid rgba(255,255,255,0.18); cursor: pointer; transition: all 0.15s ease;}
.search-chip:hover{background: var(--steel); border-color: var(--steel);}
.agency-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--paper); border: 1px solid var(--line-strong);}
.agency-card{padding: 36px 30px 28px; border-right: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 16px; cursor: pointer; transition: background 0.15s ease; color: var(--slate); position: relative;}
.agency-card:nth-child(3n){border-right: none;}
.agency-card:nth-child(n+4){border-top: 1px solid var(--line-strong);}
.agency-card:hover{background: var(--paper-2);}
.agency-card:hover .agency-arrow{transform: translateX(4px);}
.agency-region{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; color: var(--steel);}
.agency-name{font-family: var(--f-display); font-weight: 400; font-size: 36px; line-height: 1; color: var(--ink); letter-spacing: -0.005em;}
.agency-full{font-family: var(--f-mono); font-size:13px; font-weight: 600; letter-spacing: 0.04em; color: var(--steel);}
.agency-stats{display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.agency-stat-k{font-family: var(--f-mono); font-size:13px; letter-spacing: 0.10em; color: var(--steel); margin-bottom: 4px; font-weight: 600;}
.agency-stat-v{font-family: var(--f-display); font-weight: 400; font-size: 22px; color: var(--ink); letter-spacing: -0.005em; line-height: 1;}
.agency-stat-v .unit{font-family: var(--f-mono); font-size:16px; color: var(--steel); margin-left: 4px; font-weight: 600;}
.agency-eg{font-family: var(--f-mono); font-size:16px; line-height: 1.7; color: var(--slate);}
.agency-eg .em{background: var(--powder); padding: 2px 6px; font-weight: 600; color: var(--ink);}
.agency-cta{font-family: var(--f-mono); font-size:13px; font-weight: 600; letter-spacing: 0.10em; color: var(--steel); padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; margin-top: auto;}
.agency-arrow{transition: transform 0.2s; display: inline-block;}
.match-table{background: var(--paper); border: 1px solid var(--line-strong); border-top: 3px solid var(--steel); overflow-x: auto;}
.match-table-inner{display: grid; grid-template-columns: 130px 1.2fr 1fr 0.8fr; min-width: 760px;}
.match-row{display: contents;}
.match-row > div{padding: 18px 22px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); display: flex; align-items: center;}
.match-row > div:last-child{border-right: none;}
.match-row.head{display: contents;}
.match-row.head > div{background: var(--ink); color: var(--steel-2); font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; border-right-color: rgba(255,255,255,0.10); border-bottom-color: var(--steel);}
.match-row:last-child > div{border-bottom: none;}
.match-row:nth-child(even):not(.head) > div{background: var(--paper-2);}
.match-agency{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; color: var(--steel);}
.match-spec{font-family: var(--f-mono); font-size:14px; font-weight: 600; color: var(--ink); letter-spacing: 0.04em;}
.match-product{font-size:16px; color: var(--slate);}
.match-product strong{color: var(--ink); font-weight: 600;}
.match-status{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.10em; padding: 4px 8px;}
.match-status.confirmed{background: var(--ink); color: var(--paper);}
.match-status.review{background: var(--powder); color: var(--ink);}
.how-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--paper); border: 1px solid var(--line-strong);}
.how-card{padding: 40px 32px 32px; border-right: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 16px;}
.how-card:last-child{border-right: none;}
.how-num{font-family: var(--f-display); font-weight: 400; font-size: 88px; color: var(--steel); line-height: 0.85; letter-spacing: -0.02em;}
.how-tag{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; color: var(--steel);}
.how-title{font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.05; color: var(--ink); letter-spacing: -0.005em;}
.how-body{font-size:16px; line-height: 1.6; color: var(--slate);}
.how-body strong{color: var(--ink); font-weight: 600;}
.trust-grid{display: grid; grid-template-columns: 1.2fr 1fr; gap: 0;}
.trust-content{background: var(--ink); color: var(--powder); padding: 64px 56px;}
.trust-content h3{font-family: var(--f-display); font-weight: 400; font-size: clamp(32px, 3.8vw, 48px); line-height: 1; color: var(--paper); margin-bottom: 22px; letter-spacing: -0.005em;}
.trust-content p{font-size: 16px; line-height: 1.6; margin-bottom: 18px; color: var(--powder); opacity: 0.85;}
.trust-content .btn-primary{background: var(--steel);}
.trust-content .btn-primary:hover{background: var(--paper); color: var(--ink);}
.trust-stats{display: grid; grid-template-rows: repeat(4, 1fr);}
.trust-stat{padding: 28px 36px; background: var(--slate-2); color: var(--paper); border-bottom: 1px solid rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 6px;}
.trust-stat:last-child{border-bottom: none;}
.trust-stat-k{font-family: var(--f-mono); font-size:13px; letter-spacing: 0.12em; color: var(--steel-2); font-weight: 700;}
.trust-stat-v{font-family: var(--f-display); font-weight: 400; font-size: 38px; line-height: 1; color: var(--paper); letter-spacing: -0.005em;}
.trust-stat-v .unit{font-family: var(--f-mono); font-size:13px; color: var(--steel-2); letter-spacing: 0.06em; margin-left: 4px; font-weight: 600;}
.trust-stat-detail{font-family: var(--f-mono); font-size:13px; color: var(--steel-2); letter-spacing: 0.04em;}
@media (max-width: 1024px){
.page-title-grid, .section-head, .footer-top, .dual-cta, .trust-grid{grid-template-columns: 1fr !important; gap: 32px !important;}
.agency-grid, .how-grid{grid-template-columns: 1fr;}
.agency-card, .how-card{border-right: none; border-bottom: 1px solid var(--line-strong); border-top: none !important;}
.agency-card:last-child, .how-card:last-child{border-bottom: none;}
.search-form{grid-template-columns: 1fr;}
.sub-nav{position: static;}
}
@media (max-width: 640px){
.agency-stats{grid-template-columns: 1fr; gap: 8px;}
}
.tools-grid{display: grid; grid-template-columns: repeat(3, 1fr); background: var(--paper); border: 1px solid var(--line-strong);}
.tool-card{padding: 44px 36px 36px; border-right: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 18px; transition: background 0.15s ease; cursor: pointer; color: var(--slate); position: relative;}
.tool-card:last-child{border-right: none;}
.tool-card:hover{background: var(--paper-2);}
.tool-card:hover .tool-arrow{transform: translateX(4px);}
.tool-card.featured{background: var(--ink); color: var(--powder);}
.tool-card.featured .tool-label{color: var(--steel-2);}
.tool-card.featured .tool-title{color: var(--paper);}
.tool-card.featured .tool-desc{color: var(--powder); opacity: 0.85;}
.tool-card.featured:hover{background: var(--slate);}
.tool-icon{width: 56px; height: 56px; background: var(--ink); color: var(--paper); display: grid; place-items: center;}
.tool-card.featured .tool-icon{background: var(--steel);}
.tool-icon svg{width: 28px; height: 28px;}
.tool-num{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; color: var(--steel);}
.tool-card.featured .tool-num{color: var(--steel-2);}
.tool-label{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; color: var(--steel);}
.tool-title{font-family: var(--f-display); font-weight: 400; font-size: 32px; line-height: 1.05; color: var(--ink); letter-spacing: -0.005em;}
.tool-desc{font-size:16px; line-height: 1.55; color: var(--slate); flex: 1;}
.tool-cta{font-family: var(--f-mono); font-size:14px; font-weight: 600; letter-spacing: 0.08em; color: var(--steel); padding-top: 12px; border-top: 1px solid var(--line); display: inline-flex; align-items: center; gap: 8px;}
.tool-card.featured .tool-cta{color: var(--steel-2); border-top-color: rgba(255,255,255,0.14);}
.tool-arrow{transition: transform 0.2s; display: inline-block;}
.doc-library{display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;}
.doc-cluster{background: var(--paper); border: 1px solid var(--line-strong);}
.doc-cluster-head{padding: 24px 28px; background: var(--ink); color: var(--paper); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;}
.doc-cluster-name{font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.05; letter-spacing: -0.005em;}
.doc-cluster-count{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.10em; color: var(--steel-2);}
.doc-list{padding: 0; list-style: none;}
.doc-list li{display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 18px 28px; border-bottom: 1px solid var(--line); transition: background 0.15s ease; cursor: pointer;}
.doc-list li:last-child{border-bottom: none;}
.doc-list li:hover{background: var(--paper-2);}
.doc-list li:hover .doc-row-arrow{transform: translateX(4px); color: var(--ink);}
.doc-row-icon{width: 36px; height: 36px; background: var(--powder); display: grid; place-items: center; color: var(--ink);}
.doc-row-icon svg{width: 18px; height: 18px;}
.doc-row-text{}
.doc-row-name{font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 2px;}
.doc-row-meta{font-family: var(--f-mono); font-size:13px; letter-spacing: 0.06em; color: var(--steel); font-weight: 500;}
.doc-row-arrow{font-family: var(--f-mono); font-size: 18px; color: var(--steel); transition: transform 0.2s ease, color 0.2s ease;}
.notes-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--paper); border: 1px solid var(--line-strong);}
.note-card{padding: 32px 28px 28px; border-right: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 14px; transition: background 0.15s ease; cursor: pointer; color: var(--slate); position: relative;}
.note-card:nth-child(3n){border-right: none;}
.note-card:nth-child(n+4){border-top: 1px solid var(--line-strong);}
.note-card:hover{background: var(--paper-2);}
.note-card:hover .note-arrow{transform: translateX(4px);}
.note-tag{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; color: var(--paper); background: var(--steel); padding: 5px 9px; align-self: flex-start;}
.note-tag.brief{background: var(--ink);}
.note-tag.guide{background: var(--steel);}
.note-tag.case{background: var(--strength-high, #c14b3b);}
.note-title{font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.05; color: var(--ink); letter-spacing: -0.005em;}
.note-desc{font-size:16px; line-height: 1.5; color: var(--slate);}
.note-meta{font-family: var(--f-mono); font-size:13px; letter-spacing: 0.06em; color: var(--steel); margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; gap: 16px; flex-wrap: wrap; align-items: center;}
.note-meta .em{color: var(--ink); font-weight: 700;}
.note-arrow{transition: transform 0.2s; display: inline-block; margin-left: auto;}
.compliance-grid{display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px;}
.comp-feature{background: var(--paper); border: 1px solid var(--line-strong); padding: 48px 40px; display: flex; flex-direction: column; gap: 22px;}
.comp-stamp{width: 80px; height: 80px; border: 2px solid var(--ink); display: grid; place-items: center; background: var(--powder);}
.comp-stamp svg{width: 40px; height: 40px; color: var(--ink);}
.comp-feature h3{font-family: var(--f-display); font-weight: 400; font-size: 36px; line-height: 1.05; color: var(--ink); letter-spacing: -0.005em;}
.comp-feature p{font-size: 16px; line-height: 1.55; color: var(--slate);}
.comp-feature .comp-actions{display: flex; gap: 14px; flex-wrap: wrap; padding-top: 12px;}
.comp-stack{display: flex; flex-direction: column; gap: 32px;}
.comp-card{background: var(--paper); border: 1px solid var(--line-strong); padding: 32px 28px; flex: 1; display: flex; flex-direction: column; gap: 14px;}
.comp-card .label{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; color: var(--steel);}
.comp-card h4{font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.05; color: var(--ink); letter-spacing: -0.005em;}
.comp-card p{font-size:16px; line-height: 1.55; color: var(--slate); margin-top: 4px;}
.comp-card .comp-link{font-family: var(--f-mono); font-size:13px; font-weight: 600; letter-spacing: 0.10em; color: var(--steel); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: inline-flex; align-items: center; gap: 8px; transition: color 0.15s ease;}
.comp-card:hover .comp-link{color: var(--ink);}
.comp-card:hover .comp-link::after{transform: translateX(4px);}
.comp-link::after{content: "→"; transition: transform 0.2s;}
.media-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; background: var(--ink); border: 1px solid rgba(255,255,255,0.10);}
.media-card{padding: 36px 32px; border-right: 1px solid rgba(255,255,255,0.10); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; transition: background 0.15s ease; cursor: pointer; align-items: end;}
.media-card:nth-child(2n){border-right: none;}
.media-card:nth-child(n+3){border-top: 1px solid rgba(255,255,255,0.10);}
.media-card:hover{background: var(--slate);}
.media-thumb{aspect-ratio: 16/9; background: var(--slate-2); position: relative; overflow: hidden; display: grid; place-items: center;}
.media-thumb::before{content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(168,188,209,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(168,188,209,0.06) 1px, transparent 1px);
  background-size: 16px 16px;}
.media-card:hover .play-btn{transform: scale(1.08);}
.media-content{display: flex; flex-direction: column; gap: 10px;}
.media-tag{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; color: var(--steel-2);}
.media-title{font-family: var(--f-display); font-weight: 400; font-size: 22px; line-height: 1.1; color: var(--paper); letter-spacing: -0.005em;}
.media-meta{font-family: var(--f-mono); font-size:13px; letter-spacing: 0.06em; color: var(--steel-2); margin-top: 4px;}
.dist-bar{background: var(--powder); padding: 64px 0;}
.dist-inner{max-width: 1320px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: center;}
.dist-content h3{font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 3.4vw, 46px); line-height: 1; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 18px;}
.dist-content p{color: var(--slate); font-size: 16px; line-height: 1.6; margin-bottom: 24px; max-width: 480px;}
.dist-actions{display: flex; gap: 14px; flex-wrap: wrap;}
.dist-stats{display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; background: var(--paper); border: 1px solid var(--line-strong);}
.dist-stats > div{padding: 28px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.dist-stats > div:nth-child(2n){border-right: none;}
.dist-stats > div:nth-last-child(-n+2){border-bottom: none;}
.dist-stat-label{font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; color: var(--steel); margin-bottom: 8px;}
.dist-stat-val{font-family: var(--f-display); font-weight: 400; font-size: 36px; line-height: 1; color: var(--ink); letter-spacing: -0.005em;}
.dist-stat-val .unit{font-family: var(--f-mono); font-size:16px; color: var(--steel); margin-left: 4px; font-weight: 600;}
.dist-stat-detail{font-family: var(--f-mono); font-size:13px; letter-spacing: 0.06em; color: var(--steel); margin-top: 6px;}
@media (max-width: 1024px){
.tools-grid{grid-template-columns: 1fr;}
.tool-card{border-right: none; border-bottom: 1px solid var(--line-strong);}
.tool-card:last-child{border-bottom: none;}
.notes-grid{grid-template-columns: 1fr;}
.note-card{border-right: none !important; border-bottom: 1px solid var(--line-strong); border-top: none !important;}
.note-card:last-child{border-bottom: none;}
.media-grid{grid-template-columns: 1fr;}
.media-card{border-right: none !important;}
.sub-nav{position: static;}
}
@media (max-width: 640px){
.media-card{grid-template-columns: 1fr;}
.dist-stats{grid-template-columns: 1fr;}
.dist-stats > div{border-right: none;}
}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:48px 0;background:var(--paper);border:1px solid var(--line-strong)}
.kpi{padding:32px 28px;border-right:1px solid var(--line)}
.kpi:last-child{border-right:none}
.kpi .num{font-family:var(--f-display);font-size:56px;line-height:.9;color:var(--ink);margin-bottom:8px}
.kpi .num .em{color:var(--steel)}
.kpi .label{font-family:var(--f-mono);font-size:14px;letter-spacing:.10em;color:var(--steel);font-weight:600;margin-bottom:8px;text-transform:uppercase}
.kpi .desc{font-size:16px;color:var(--slate);line-height:1.4}
@media (max-width:1024px){
.kpis{grid-template-columns:repeat(2,1fr)}
}
.dp-section{padding:96px 0;scroll-margin-top:120px}
.dp-section.dark{background:var(--ink);color:var(--powder)}
.dp-section.dark .section-title,.dp-section.dark .dp-h3{color:var(--paper)}
.dp-section.alt{background:var(--paper-2)}
.dp-section-inner{max-width:1320px;margin:0 auto;padding:0 32px}
.dp-head{margin-bottom:48px;padding-bottom:24px;border-bottom:1.5px solid var(--slate);max-width:820px}
.dp-section.dark .dp-head{border-bottom-color:var(--steel)}
.dp-meta{font-family:var(--f-mono);font-size:14px;letter-spacing:.10em;color:var(--steel);font-weight:600;margin-bottom:14px}
.dp-section.dark .dp-meta{color:var(--steel-2)}
.dp-blurb{font-size:18px;line-height:1.55;color:var(--slate)}
.dp-section.dark .dp-blurb{color:var(--powder);opacity:.85}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--paper);border:1px solid var(--line-strong)}
.step{padding:32px 28px;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:none}
.step .n{font-family:var(--f-mono);font-size:13px;letter-spacing:.10em;color:var(--steel);font-weight:600;margin-bottom:18px}
.step .t{font-family:var(--f-display);font-size:28px;line-height:1;color:var(--ink);margin-bottom:12px;font-weight:400}
.step .d{font-size:16px;line-height:1.5;color:var(--slate)}
@media (max-width:1024px){
.steps{grid-template-columns:1fr}
.step{border-right:none;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.benefit{background:var(--paper);border:1px solid var(--line-strong);border-top:3px solid var(--steel);padding:32px 28px}
.benefit .ico{width:48px;height:48px;border:1.5px solid var(--steel);display:grid;place-items:center;color:var(--steel);margin-bottom:20px}
.benefit .ico svg{width:22px;height:22px}
.benefit h3{font-family:var(--f-display);font-size:24px;line-height:1.1;color:var(--ink);margin-bottom:10px;font-weight:400}
.benefit p{font-size:16px;line-height:1.55;color:var(--slate)}
@media (max-width:1024px){
.benefit-grid{grid-template-columns:1fr}
}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line-strong);background:var(--paper)}
.compare .col{padding:32px 32px 36px}
.compare .col.bad{background:var(--paper-2);border-right:1px solid var(--line)}
.compare .col h3{font-family:var(--f-display);font-size:28px;color:var(--ink);font-weight:400;margin-bottom:8px}
.compare .col .sub{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;color:var(--steel);font-weight:600;margin-bottom:20px}
.compare ul{list-style:none;padding:0;margin:0}
.compare li{padding:12px 0;border-bottom:1px dashed var(--line);font-size:16px;line-height:1.45;color:var(--slate);display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start}
.compare li:last-child{border-bottom:none}
.compare li .x{color:#c44;font-weight:700;font-family:var(--f-mono);font-size:18px;line-height:1.2}
.compare li .ck{color:var(--steel);font-weight:700;font-family:var(--f-mono);font-size:18px;line-height:1.2}
@media (max-width:1024px){
.compare{grid-template-columns:1fr}
.compare .col.bad{border-right:none;border-bottom:1px solid var(--line)}
}
.mech-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
.mech-grid h3{font-family:var(--f-display);font-size:32px;line-height:1.05;color:var(--ink);margin-bottom:16px;font-weight:400}
.mech-grid p{font-size:17px;line-height:1.6;color:var(--slate);margin-bottom:14px}
.mech-stages{background:var(--paper);border:1px solid var(--line-strong)}
.mech-stage{padding:20px 24px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:36px 1fr;gap:18px}
.mech-stage:last-child{border-bottom:none}
.mech-stage .n{font-family:var(--f-display);font-size:24px;color:var(--steel);line-height:1}
.mech-stage .b strong{display:block;font-family:var(--f-mono);font-size:14px;letter-spacing:.08em;color:var(--ink);font-weight:600;margin-bottom:4px;text-transform:uppercase}
.mech-stage .b span{font-size:16px;color:var(--slate);line-height:1.45}
@media (max-width:1024px){
.mech-grid{grid-template-columns:1fr;gap:32px}
}
.deck-wrap{background:var(--ink);color:var(--paper);border-radius:0;overflow:hidden}
.deck{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--ink) 0%,var(--slate-2) 100%);max-width:1100px;margin:0 auto}
.deck::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.slide{position:absolute;inset:0;padding:56px 64px;display:flex;flex-direction:column;justify-content:center;opacity:0;transition:opacity .35s ease;pointer-events:none}
.slide.active{opacity:1;pointer-events:auto}
.slide .num{font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;color:var(--steel-2);font-weight:600;margin-bottom:18px}
.slide h2{font-family:var(--f-display);font-size:clamp(36px,4.6vw,64px);line-height:1;color:var(--paper);font-weight:400;letter-spacing:-0.005em;margin-bottom:18px}
.slide .lead{font-size:18px;line-height:1.55;color:var(--powder);opacity:.88;max-width:760px;margin-bottom:24px}
.slide ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.slide ul li{padding-left:24px;position:relative;font-size:17px;line-height:1.5;color:var(--powder);max-width:760px}
.slide ul li::before{content:"→";position:absolute;left:0;color:var(--steel);font-weight:700}
.slide .bigstat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px;max-width:780px}
.slide .bigstat .v{font-family:var(--f-display);font-size:64px;line-height:.9;color:var(--paper)}
.slide .bigstat .v .em{color:var(--steel)}
.slide .bigstat .k{font-family:var(--f-mono);font-size:13px;letter-spacing:.10em;color:var(--steel-2);font-weight:600;margin-top:6px}
.slide.cover{justify-content:center;text-align:left}
.slide.cover h2{font-size:clamp(48px,6vw,84px);margin-bottom:20px}
.slide.cover .lead{font-size:20px;max-width:680px}
.slide.cover .footer-meta{position:absolute;bottom:48px;left:64px;right:64px;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:13px;letter-spacing:.10em;color:var(--steel-2);font-weight:600}
.deck-controls{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;background:var(--slate-2);border-top:1px solid rgba(255,255,255,.10)}
.deck-controls .progress{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;color:var(--steel-2);font-weight:600}
.deck-controls .dots{display:flex;gap:8px}
.deck-controls .dot{width:8px;height:8px;background:rgba(255,255,255,.20);cursor:pointer;border:none;padding:0;transition:background .15s ease}
.deck-controls .dot.active{background:var(--steel)}
.deck-controls .nav-btns{display:flex;gap:8px}
.deck-controls button.nav{background:var(--steel);color:var(--paper);border:none;padding:10px 18px;font-family:var(--f-mono);font-size:13px;font-weight:600;letter-spacing:.06em;cursor:pointer;transition:background .15s ease}
.deck-controls button.nav:hover{background:var(--paper);color:var(--ink)}
.deck-controls button.nav:disabled{opacity:.4;cursor:not-allowed;background:var(--slate)}
.resources-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.res-card{background:var(--paper);border:1px solid var(--line-strong);padding:24px;display:flex;flex-direction:column}
.res-card .tag{font-family:var(--f-mono);font-size:13px;letter-spacing:.10em;color:var(--steel);font-weight:600;margin-bottom:12px}
.res-card h3{font-family:var(--f-display);font-size:22px;color:var(--ink);font-weight:400;line-height:1.1;margin-bottom:10px}
.res-card p{font-size:16px;line-height:1.5;color:var(--slate);margin-bottom:18px;flex:1}
.res-card .go{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;color:var(--ink);font-weight:600}
.res-card .go .arrow{transition:transform .2s}
.res-card:hover .go .arrow{transform:translateX(4px)}
@media (max-width:1024px){
.resources-grid{grid-template-columns:1fr}
}
.dp-hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center;margin-top:8px}
.dp-hero-img{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line-strong);background:var(--ink);margin:0}
.dp-hero-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
.dp-hero-grid{grid-template-columns:1fr;gap:32px}
}
.dp-section.dark .mech-grid h3{color:var(--paper)}
.dp-section.dark .mech-grid p{color:var(--powder)}
.dp-section.dark .mech-grid p strong{color:var(--paper)}
.doc-cta{margin:28px 0;padding:28px 32px;background:var(--ink);color:var(--paper);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.doc-cta .t{font-family:var(--f-display);font-size:24px;font-weight:400;color:var(--paper)}
.doc-cta .s{font-family:var(--f-mono);font-size:13px;color:var(--steel-2);letter-spacing:.06em;margin-top:4px}
.doc-cta .btn-primary{background:var(--steel)}
.doc-cta .btn-primary:hover{background:var(--paper);color:var(--ink)}
.sg-section{padding:64px 32px}
.sg-table-wrap{max-width:1320px;margin:0 auto;background:var(--paper);border:1px solid var(--line-strong);overflow-x:auto}
table.sg{width:100%;border-collapse:collapse;font-size:16px;font-family:var(--f-body)}
table.sg thead th{background:var(--ink);color:var(--paper);font-family:var(--f-mono);font-size:13px;font-weight:600;letter-spacing:.08em;text-align:left;padding:14px 16px;vertical-align:bottom;border-bottom:2px solid var(--steel)}
table.sg th.col-pn,table.sg th.col-idh,table.sg th.col-sz{width:120px}
table.sg th.col-name{width:260px}
table.sg tr.group td{background:#c44;color:var(--paper);font-family:var(--f-mono);font-size:14px;font-weight:700;letter-spacing:.08em;padding:12px 16px;text-transform:uppercase}
table.sg tr.group td.subgroup{background:var(--paper-2);color:var(--ink);font-style:italic;text-transform:none;font-weight:600;border-bottom:1px solid var(--line)}
table.sg tbody td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
table.sg tbody tr:nth-child(even):not(.group){background:var(--paper-2)}
table.sg tbody tr.note td{background:var(--paper);border-top:2px solid var(--ink);font-style:italic;color:var(--slate);font-size:16px}
table.sg .name{font-weight:600;color:var(--ink)}
table.sg .pn{font-family:var(--f-mono);font-weight:600;color:var(--ink)}
table.sg .idh{font-family:var(--f-mono);color:var(--slate);font-size:16px}
table.sg .sz{font-family:var(--f-mono);color:var(--slate);font-size:16px;white-space:nowrap}
table.sg .desc{color:var(--slate);font-size:16px}
.sg-legend{max-width:1320px;margin:24px auto 0;font-family:var(--f-mono);font-size:13px;color:var(--steel);letter-spacing:.04em}
.sg-source{max-width:1320px;margin:32px auto 0;padding:20px 24px;background:var(--paper-2);border:1px solid var(--line);font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;color:var(--slate)}
.sg-source strong{color:var(--ink)}
.vid-grid{max-width:1320px;margin:0 auto;padding:80px 32px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.vid{border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column}
.vid .frame{position:relative;aspect-ratio:16/9;background:var(--ink);overflow:hidden}
.vid .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid .ph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--slate),var(--ink));color:var(--steel-2)}
.vid .ph svg{width:54px;height:54px}
.vid .body{padding:24px 26px 28px}
.vid .meta{font-family:var(--f-mono);font-size:13px;letter-spacing:.10em;color:var(--steel);font-weight:600;margin-bottom:10px}
.vid h3{font-family:var(--f-display);font-size:23px;font-weight:400;color:var(--ink);line-height:1.1;margin-bottom:8px}
.vid p{font-size:16px;line-height:1.5;color:var(--slate)}
.vid-note{max-width:1320px;margin:0 auto;padding:0 32px 80px}
@media (max-width:1024px){
.vid-grid{grid-template-columns:1fr}
}

/* ============================================================
 * SYSTEMIC GRID/STACK FIX for non-home pages.
 * Mai flexes every wp-block-group as a ROW, so container wrappers
 * (.section, .section-inner, .section-head ...) put their children
 * side-by-side. Default content groups to flex-COLUMN so they stack
 * like the templates' divs; grids (display:grid) are unaffected;
 * genuinely-horizontal flex rows are restored below.
 * ============================================================ */
body:not(.home) .entry-content .wp-block-group { flex-direction: column; }
/* Restore genuinely-horizontal flex rows after the column default */
body:not(.home) .entry-content .blog-card .meta,
body:not(.home) .entry-content .breadcrumb,
body:not(.home) .entry-content .comp-feature .comp-actions,
body:not(.home) .entry-content .cred-bar-track,
body:not(.home) .entry-content .deck-controls,
body:not(.home) .entry-content .deck-controls .dots,
body:not(.home) .entry-content .deck-controls .nav-btns,
body:not(.home) .entry-content .dist-actions,
body:not(.home) .entry-content .doc-cta,
body:not(.home) .entry-content .faq-tags,
body:not(.home) .entry-content .footer-bottom,
body:not(.home) .entry-content .footer-bottom .links,
body:not(.home) .entry-content .footer-family .ff-names,
body:not(.home) .entry-content .footer-family-inner,
body:not(.home) .entry-content .hero-ctas,
body:not(.home) .entry-content .hero-trust,
body:not(.home) .entry-content .hero-trust .item,
body:not(.home) .entry-content .jobs-toolbar,
body:not(.home) .entry-content .jobs-toolbar .filter-chips,
body:not(.home) .entry-content .match-row > div,
body:not(.home) .entry-content .newsletter-form,
body:not(.home) .entry-content .note-meta,
body:not(.home) .entry-content .process-callout,
body:not(.home) .entry-content .search-card-head,
body:not(.home) .entry-content .search-cluster .label,
body:not(.home) .entry-content .search-examples,
body:not(.home) .entry-content .search-row,
body:not(.home) .entry-content .search-row button,
body:not(.home) .entry-content .search-tags,
body:not(.home) .entry-content .slide.cover .footer-meta,
body:not(.home) .entry-content .solution-brands,
body:not(.home) .entry-content .solution-card .footer,
body:not(.home) .entry-content .solution-card .meta,
body:not(.home) .entry-content .solution-card .view,
body:not(.home) .entry-content .spec-row .value,
body:not(.home) .entry-content .stat-num-row,
body:not(.home) .entry-content .sub-nav-inner,
body:not(.home) .entry-content .sub-nav-label,
body:not(.home) .entry-content .ticker-track,
body:not(.home) .entry-content .ticker-track span { flex-direction: row !important; }

/* Inline SVG icons that lack explicit width/height (e.g. converted culture-strip
 * nav arrows) must not balloon as flex items — size them to the local text. */
.entry-content :where(svg:not([width]):not([height])) { width: 1em; height: 1em; flex: none; }
.entry-content svg { flex: 0 0 auto; }

/* ---- Stretched overlay link: whole-card clickability, blocks-only (core group + inline anchor) ---- */
.entry-content .wp-block-group:has(> .wp-block-group__inner-container > .stretch-link){position:relative;}
.entry-content .stretch-link{position:absolute!important;inset:0;margin:0!important;padding:0!important;font-size:0;line-height:0;z-index:2;}
.entry-content .stretch-link a{position:absolute;inset:0;display:block;}

/* Image adapter: the converter wraps every img in a wp:image figure; make that figure
   layout-transparent on built (non-home) pages so the templates per-container img rules
   (fill / object-fit / aspect-ratio) reach the image directly instead of fighting the
   extra figure box and Mai default image margins. */
body:not(.home) .entry-content .wp-block-image{display:contents;}
body:not(.home) .entry-content img{max-width:100%;}

/* ---- Resources fixes ---- */
/* .play-btn base rule was dropped in extraction (the class also appears in another
   page as .video-frame .play-btn); restore it scoped to the media gallery thumbs. */
.media-thumb .play-btn{width:52px;height:52px;background:var(--steel);display:grid;place-items:center;position:relative;z-index:2;}
.media-thumb .play-btn::after{content:"";border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent var(--paper);margin-left:3px;}
/* dist-stats cell padding/borders: template targets .dist-stats > div, but Mai inserts
   the inner-container between the grid and the cells; re-target the grandchildren. */
.dist-stats > .wp-block-group__inner-container > div{padding:28px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.dist-stats > .wp-block-group__inner-container > div:nth-child(2n){border-right:none;}
.dist-stats > .wp-block-group__inner-container > div:nth-last-child(-n+2){border-bottom:none;}

/* ---- Full-bleed section padding: the template full-bleed sections carry their own
   .*-inner max-width:1320 wrapper, so Mai alignfull --side-spacing padding is double
   padding (narrows + right-shifts the content). Zero it; the inner wrappers center. ---- */
body:not(.home) .entry-content .alignfull{padding-left:0!important;padding-right:0!important;}

/* ---- Kill Mai default block margins on built pages by zeroing the variables its own
   rules read (p{margin:var(--paragraph-margin-bottom)}, h*{var(--heading-margin-*)}).
   The templates space everything with explicit class margins (.prose p, .section-blurb,
   .dist-stat-label ...) and flex/grid gaps; Mai default margins just stack ON TOP of the
   gaps, inflating every card and section. Zeroing the VARIABLE (not fighting specificity)
   leaves the templates explicit class margins untouched (they win at 0,1,1 > 0,0,1). ---- */
body:not(.home) .entry-content{
  --paragraph-margin-bottom:0;
  --heading-margin-bottom:0;
  --heading-margin-top:0;
  --list-item-margin-bottom:0;
}

/* .section base padding was dropped in extraction (the class became "known" via
   .section.alt / .section.dark), leaving .section with no padding so it fell back to a
   wrong 110px/32px. 32px horizontal narrowed the inner grids and wrapped doc-card text to
   extra lines (the comp-stack +145). Restore the template base + its 1024px override. */
.section{padding:96px 0;scroll-margin-top:175px;}
@media (max-width:1024px){.section{padding:80px 24px;}}

/* ---- Section-feedback fixes (resources) ---- */
/* section background base rules (dropped by extraction; .section.alt/.dark became known) */
.section.alt{background:var(--paper-2);}
.section.dark{background:var(--ink);color:var(--powder);}

/* ---- Whitespace between stacked same-tone light sections (client, 2026-07-01) ----
 * Two adjacent light sections of the SAME tone (plain white + white, or alt + alt)
 * have no colour boundary between them, so the stacked 96+96px vertical padding
 * reads as excessive empty space. Halve each facing side to 48px (→96px gap instead
 * of 192). Boundaries that DO change tone (white↔alt, light↔dark) keep full spacing. */
.section:not(.dark):not(.alt) + .section:not(.dark):not(.alt),
.section.alt + .section.alt{padding-top:48px;}
.section:not(.dark):not(.alt):has(+ .section:not(.dark):not(.alt)),
.section.alt:has(+ .section.alt){padding-bottom:48px;}
@media (max-width:1024px){
 .section:not(.dark):not(.alt) + .section:not(.dark):not(.alt),
 .section.alt + .section.alt{padding-top:40px;}
 .section:not(.dark):not(.alt):has(+ .section:not(.dark):not(.alt)),
 .section.alt:has(+ .section.alt){padding-bottom:40px;}
}
/* A white content section sits directly before the global "From the workshop floor."
 * footer blog band (they share the paper background, so no boundary). Drop that band's
 * top padding so the preceding section's bottom padding alone sets the gap (~halved). */
.blog-section.workshop-floor{padding-top:0;}
/* hero photo aspect-ratio: site.css had a colliding 16/9 from another page winning last */
.page-hero-image{aspect-ratio:4/3 !important;}
/* checkmark stamp svg size (my bare-svg fallback was shrinking it to 1em) */
.comp-stamp svg{width:40px;height:40px;color:var(--ink);}
/* ISO feature card: Mai justify-content:center vertically centers content in the grid-
   stretched card; the template tops-aligns it. */
.comp-feature{justify-content:flex-start;}

/* breadcrumb + sub-nav inner are converted to <p>, so Mai constrains their width and
   auto-centers them (breadcrumb indented 45px, sub-nav links indented to x=264). The
   template wants the breadcrumb full-width left-aligned and the sub-nav-inner at full
   1320 then centered with content flush left. */
body:not(.home) .entry-content .breadcrumb{max-width:none;width:auto;margin-left:0;margin-right:0;}
body:not(.home) .entry-content .sub-nav-inner{width:100%;max-width:1320px;margin-left:auto;margin-right:auto;}

/* Sticky sub-nav fix: Mai sets body{overflow-x:hidden}, which makes overflow-y compute to
   auto -> body becomes a scroll container -> position:sticky (.sub-nav) breaks. clip
   prevents the same horizontal overflow WITHOUT establishing a scroll container. */
html body{overflow-x:clip;}
/* Header->hero gap: Mai puts margin-top on .content-sidebar-wrap; template butts the hero
   right against the header. */
body:not(.home) .content-sidebar-wrap{margin-top:0;}

/* Sticky site header (design expects a 109px sticky header; the sub-nav sticks at
   top:109px below it). z above the sub-nav (90). */
.site-header{position:sticky;top:0;z-index:200;}
/* Coating (.section.dark): the .section.dark .section-blurb light-color override was
   dropped by extraction (rendering dark slate on dark bg = invisible). Make all text in
   the dark section white per request. */
.section.dark,
.section.dark .section-meta,
.section.dark .section-blurb,
.section.dark .media-tag,
.section.dark .media-meta,
.section.dark .media-title{color:#fff !important;}
.section.dark .section-blurb{opacity:1 !important;}

/* Coating dark-section title was rendering ink (dark on dark) — make white too. */
.section.dark .section-title{color:#fff !important;}
/* Skip/Tools first section: more breathing room top & bottom (per request). */
#tools.section{padding-top:128px;padding-bottom:128px;}

/* section-title: needs more top & bottom margin (heading-margin vars were zeroed). */
.entry-content h2.wp-block-heading.section-title{margin-top:28px !important;margin-bottom:28px !important;}
/* doc-list: flush left (no left margin/indent). */
.entry-content .doc-list{margin-left:0 !important;padding-left:0 !important;list-style:none;}

/* ===== Terms page (page-id-130) — unique in-content fixes ===== */
/* Prose width: site.css base .prose caps at 820px, but the Terms template renders
   .prose at the full section content width (~1256px = 1320 container - 64 side pad).
   The narrow 820px forced extra line-wraps, inflating the legal body by ~590px.
   Restore the template's wide, centered prose (page-scoped). */
body.page-id-130 .entry-content .section .prose{
  max-width:1256px;
  margin-left:auto;
  margin-right:auto;
}
/* Lead/eyebrow paragraph (first <p> in the prose): the template styles it as a small
   uppercase steel meta line (14px / 600 / 1.4px tracking / uppercase / --steel);
   WP rendered it as a plain 17px slate paragraph. Re-create it page-scoped. */
body.page-id-130 .entry-content .prose p:first-child{
  font-size:14px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:12px;
}

/* Terms lead-paragraph correction: the :first-child lead rule above also matched the
   first <p> inside the Contact .callout box (rendering its address all-caps steel).
   Re-target the lead by its exact direct path (prose inner-container > p:first-child)
   and reset any callout-nested paragraph back to normal prose body styling. */
body.page-id-130 .entry-content .prose > .wp-block-group__inner-container > p:first-child{
  font-size:14px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--steel);margin-bottom:12px;
}
body.page-id-130 .entry-content .prose .callout p:first-child{
  font-size:17px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--slate);margin-bottom:18px;
}

/* Terms fine-print footer: the template renders the final prose paragraph ("Last updated…")
   as small steel fine print (14px / 0.56px tracking / --steel). WP showed plain body. */
body.page-id-130 .entry-content .prose > .wp-block-group__inner-container > p:last-child{
  font-size:14px;letter-spacing:0.56px;color:var(--steel);
}

/* ===== Accessibility page (page-id-131) — unique in-content fixes ===== */
/* Fine-print footer: the template renders the final prose paragraph ("Last reviewed…")
   as small steel fine print (14px / 0.56px tracking / --steel); WP showed plain body. */
body.page-id-131 .entry-content .prose > .wp-block-group__inner-container > p:last-child{
  font-size:14px;letter-spacing:0.56px;color:var(--steel);
}

/* ===== Sitemap page (page-id-132) — unique in-content fixes ===== */
/* Column grid: the template lays the four link groups out as a 3-column grid
   (Main | Solutions | Resources+Legal) with a 48px gap inside .prose. The converter
   nests each Mai group behind a display:contents inner-container, so the grid never
   formed and all groups stacked into one tall column (+579px). Re-establish the grid
   on the wrapper group; the contents inner-container lets the column groups become its
   direct grid items. Page-scoped so it can't touch other pages' .prose groups. */
body.page-id-132 .entry-content .prose > .wp-block-group__inner-container > .wp-block-group{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  align-items:start;
}
/* Sitemap link lists: the template renders them with no bullets, flush left, and the
   prose 1.7 line-height. The Mai/core list keeps disc bullets + a left indent and a
   tighter line-height. Strip bullets/indent and restore the spacing. */
body.page-id-132 .entry-content .prose ul,
body.page-id-132 .entry-content .prose ol{
  list-style:none;
  margin-left:0;
  padding-left:0;
}
body.page-id-132 .entry-content .prose li,
body.page-id-132 .entry-content .prose li a{
  line-height:1.7;
}

/* Sitemap section padding + column-head spacing: the sitemap template uses 88px section
   padding (not the global 96px) and zeroes the top margin on each column's heading
   (Main/Solutions/Resources) since they sit at the top of their grid column. The base
   .prose h3 margin:32px 0 14px pushed every first heading down 32px (and +8/+8 padding),
   offsetting the grid ~40px. Legal's h3 keeps its 32px top (it follows the Resources list,
   so it is not a :first-child). Page-scoped. */
body.page-id-132 .entry-content .section{padding-top:88px;padding-bottom:88px;}
body.page-id-132 .entry-content .prose .wp-block-group > .wp-block-group__inner-container > h3:first-child{
  margin-top:0;
}

/* Converter: .btn/.btn-primary classes land on the <p> wrapper, but the real
 * link is the <a> inside. The <a> keeps the default brand-blue link color,
 * which equals the button bg (invisible text). Make anchors inside button
 * paragraphs inherit the button color + fill the pill. GLOBAL (shared pattern). */
p.btn > a, p.btn-primary > a, p.btn-ghost > a, p.btn-light > a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* videos page: converter wraps the .vid-note content in a 820px-max .prose group,
 * constraining the about-note paragraph (wraps to 3 lines vs template 2). The
 * template note spans the full 1320px box. Drop the prose width cap inside the
 * note so the paragraph fills the box like the template. Page-scoped (id 143). */
body.page-id-143 .vid-note > .prose,
body.page-id-143 .vid-note .prose { max-width: none; }

/* ===== About (page-id-134) — Bradley Group cards ===== */
/* The role label renders as a <p>, so `.group-card p` (0,1,1) beats `.group-role`
   (0,1,0) and forces 16px/slate. Template uses a <div class="group-role"> at
   13px/steel. Restore the intended label style with sufficient specificity, and
   align card type to the template (group-name 28px, body 15px). Scoped to About. */
body.page-id-134 .group-card p.group-role {
  font-size:14px;
  line-height: 1.3;
  color: var(--steel);
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 16px;
}
body.page-id-134 .group-name { font-size: 28px; }
body.page-id-134 .group-card p { font-size:16px; }
body.page-id-134 .group-card { padding: 40px 36px; }
body.page-id-134 .group-name { margin-bottom: 8px; line-height: 1.05; }

/* ===== About (page-id-134) — Where we're located ===== */
/* The template's single .locations-grid carries an inline override
   `grid-template-columns:1fr; margin-top:0`. The converter dropped that inline
   style, so the lone contact card falls back to the base `repeat(3,1fr)` and
   collapses to ~199px wide (very tall). Restore single-column + flush top here. */
body.page-id-134 .locations-grid {
  grid-template-columns: 1fr;
  margin-top: 0;
}

/* ===== Careers (page-id-135) — header career-stats box ===== */
/* Converter wraps the stat rows in a display:contents inner-container and emits
   each row as a <p>, so `.career-stats > div` (the intended row rule) never
   reaches them — rows lose their grid/padding/border and collapse inline.
   Re-establish: career-stats is a flex/block column; re-target the real rows
   (the <p> grandchildren) with the template's row grid + dividers. Also restore
   the side/bottom border the base rule carries. Scoped to Careers. */
body.page-id-135 .career-stats {
  display: block;
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--steel);
}
body.page-id-135 .career-stats > .wp-block-group__inner-container > p {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  font-family: var(--f-mono);
  margin: 0;
}
body.page-id-135 .career-stats > .wp-block-group__inner-container > p:last-child {
  border-bottom: none;
}

/* ===== Careers (page-id-135) — "Four steps" dark process grid ===== */
/* Two collisions from the resources-page process styles + a dropped dark-var
   context:
   1. Base `.process-grid` is repeat(3,1fr) (resources) -> step 4 wraps to a 2nd
      row (+~500px). Careers template is repeat(4,1fr).
   2. `.process-num` inherits the resources 64px paper BOX + nth-child color
      boxes; careers wants a plain 72px steel number, no box.
   3. The section is .section.dark but the template re-scopes --paper/--line vars
      to dark there; WP doesn't, so the grid bg/borders and the
      process-title/body/meta colors stay dark-on-dark (invisible). Re-apply the
      template's computed dark values. Scoped to Careers. */
body.page-id-135 .process-grid {
  grid-template-columns: repeat(3, 1fr);
  background: #2a3340;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
body.page-id-135 .process-grid::before { display: none; }
body.page-id-135 .process-card {
  padding: 36px 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}
body.page-id-135 .process-card:last-child { border-right: none; }
/* reset the resources box styling on the number */
body.page-id-135 .process-num,
body.page-id-135 .process-step:nth-child(2) .process-num,
body.page-id-135 .process-step:nth-child(3) .process-num {
  width: auto; height: auto;
  background: transparent;
  border: none;
  display: block;
  place-items: initial;
  font-family: var(--f-display);
  font-size: 72px;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: #a8bcd1;
  margin-bottom: 0;
}
body.page-id-135 .process-step {
  font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #4e6b8c;
}
body.page-id-135 .process-title { color: #ffffff; font-size: 24px; }
body.page-id-135 .process-body { color: #deeaf7; font-size:16px; }
body.page-id-135 .process-meta { color: #a8bcd1; font-size:16px; padding-top: 12px; }

/* ===== Careers (page-id-135) — application form 2-column layout ===== */
/* Converter flattened the form: the <form class="app-form-side"> wrapper became
   an empty <p> (display:none) and all fields + the <aside class=app-form-side-meta>
   became loose grid items of the 2-col .app-form-card (via the display:contents
   inner-container). They auto-flow across both columns, so fields span full width
   and the dark info panel wraps below instead of sitting in the right column.
   Re-place: form items -> column 1 (with the form padding the lost wrapper used),
   the aside -> column 2 spanning all rows. Scoped to Careers.
   (Markup note: the form wrapper/semantics are lost in conversion — reported.) */
body.page-id-135 .app-form-card > .wp-block-group__inner-container {
  display: contents;
}
body.page-id-135 .app-form-card > .wp-block-group__inner-container > *:not(.app-form-side-meta) {
  grid-column: 1;
}
body.page-id-135 .app-form-card > .wp-block-group__inner-container > .field-row:first-of-type {
  margin-top: 48px;
}
body.page-id-135 .app-form-card > .wp-block-group__inner-container > .field,
body.page-id-135 .app-form-card > .wp-block-group__inner-container > .field-row {
  margin-bottom: 22px;
}
body.page-id-135 .app-form-card > .wp-block-group__inner-container > .field-help {
  margin-top: 4px;
  margin-bottom: 48px;
}
body.page-id-135 .app-form-card > .wp-block-group__inner-container > .app-form-side-meta {
  grid-column: 2;
  grid-row: 1 / 999;
  margin: 0;
}

/* ============ CONTACT (page-id-136) section fixes ============ */
/* page-header hero image: template uses 16/9, a colliding 4/3 rule from
   another page was winning; scope correct ratio to contact. */
body.page-id-136 .page-header .page-hero-image{aspect-ratio:16/9 !important;}

/* Contact form-section: converter flattened <form class="form-side"> into an
   empty <p> and lifted all field-rows into the .form-card 2-col grid, so they
   zig-zag across both columns. Re-establish: all form items in col 1, the
   .form-side-meta aside in col 2 spanning all rows. */
body.page-id-136 .form-card > .wp-block-group__inner-container > *{grid-column:1;}
body.page-id-136 .form-card > .wp-block-group__inner-container > .form-side-meta{grid-column:2;grid-row:1 / 9;align-self:start;margin:0;}
/* keep form items from vertically stretching to fill grid rows */
body.page-id-136 .form-card > .wp-block-group__inner-container > *{align-self:start;}
/* template form-side stacks fields with 24px gap; re-add as bottom margin on
   the col-1 form items (NOT grid row-gap, which would gap the spanned aside). */
body.page-id-136 .form-card > .wp-block-group__inner-container > *:not(.form-side-meta){margin-bottom:24px;}

/* Contact locations: same dropped-inline-style bug as About — the single
   .locations-grid carries inline `grid-template-columns:1fr; margin-top:0`
   which the converter dropped, so it falls back to repeat(3,1fr) and squishes
   the lone card to ~199px. Restore single column + flush top, scoped to contact. */
body.page-id-136 .locations-grid{grid-template-columns:1fr;margin-top:0;}

/* Contact depts: the .section-inner/.dept-grid collapse to max-content width
   (~1025/961) instead of filling the section like the template (1256). Force
   full width so the two dept-card columns span the content area. */
body.page-id-136 .depts .section-inner{width:100%;}
body.page-id-136 .dept-grid{width:100%;}

/* ============ FAQ (page-id-133) section fixes ============ */
/* FAQ header stats card: converter emitted each stat row as a <p> inside a
   display:contents inner-container, so the base `.faq-stats > div` row rule
   (grid label/value + padding + divider) never reaches them and label/value
   jam together inline. Re-target the real <p> rows. */
body.page-id-133 .faq-stats > .wp-block-group__inner-container > p{padding:18px 22px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:16px;margin:0;}
body.page-id-133 .faq-stats > .wp-block-group__inner-container > p:last-child{border-bottom:none;}

/* ============================================================
   for-distributors (page-id-139) section-title size collision.
   Global .section-title is clamp(40,4.6vw,64)/line-height .95 (from
   another page); this template's dp-section titles are
   clamp(36,4.2vw,58)/line-height 1 with 14px bottom margin. The 64px
   value wraps each section heading to 2 lines, inflating every section.
   Page-scoped so other pages are untouched. */
body.page-id-139 .dp-section .section-title{
  font-size:clamp(36px,4.2vw,58px) !important;
  line-height:1 !important;
  letter-spacing:-0.005em !important;
  margin-top:0 !important;
  margin-bottom:14px !important;
}

/* for-distributors (page-id-139) mechanism stages.
   MARKUP: converter emitted each stage body as <p class="b"> instead of
   <div class="b">. Two side effects fixed here page-scoped:
   1) .mech-grid p{margin-bottom:14px} leaks onto .b, adding ~14px x6 rows.
   2) .dp-section.dark .mech-grid p strong{color:paper} catches the row
      titles (white) on the white .mech-stages box -> invisible titles.
   Restore title color to --ink and kill the leaked bottom margin. */
body.page-id-139 #mechanism .mech-stage .b{margin-bottom:0 !important;}
body.page-id-139 #mechanism .mech-stage .b strong{color:var(--ink) !important;}

/* for-distributors (page-id-139) #cta ("Talk to the distributor desk").
   MARKUP: template relies on inline styles dropped by the converter:
   section style=background:var(--powder); inner text-align:center
   max-width:820px; centered button row. Re-add page-scoped. */
body.page-id-139 #cta{background:var(--powder);}
body.page-id-139 #cta .dp-section-inner{max-width:820px;text-align:center;}
body.page-id-139 #cta .dp-section-inner .dp-meta,
body.page-id-139 #cta .dp-section-inner .section-title,
body.page-id-139 #cta .dp-section-inner .dp-blurb,
body.page-id-139 #cta .dp-section-inner > .wp-block-group__inner-container > p{text-align:center;}
body.page-id-139 #cta .dp-blurb{margin:0 auto 32px;}

/* for-distributors (page-id-139) resources-grid cards.
   MARKUP: .go emitted as <p> (template uses <span>), so a default
   paragraph bottom-margin (18px) inflates each card by ~17px. Zero it
   page-scoped. */
body.page-id-139 #resources .res-card .go{margin-bottom:0 !important;}

/* for-distributors (page-id-139) compare grid check glyph.
   MARKUP/CONTENT BUG: template span.ck contains the entity &check; which
   the converter stored as the literal text "&check;" (innerHTML
   &amp;check;) instead of decoding it to the checkmark. &times; (the .x
   glyph) decoded fine; only &check; did not. Cannot fix the text node in
   CSS, so render the glyph via a pseudo-element and hide the literal
   text. Page-scoped. */
body.page-id-139 .compare li .ck{font-size:0 !important;}
body.page-id-139 .compare li .ck::before{content:"\2713";font-size:18px;}

/* ============================================================
   selector-guide (page-id-142) legend/download-button row.
   MARKUP: template wraps the legend + PDF button in a div with inline
   style display:flex;justify-content:space-between;align-items:center;
   max-width:1320px;margin:0 auto. The converter dropped the inline style
   (the wrapper is now a bare .wp-block-group whose inner-container is
   display:contents), so legend and button stack full-width. Re-establish
   the flex row on the inner-container, page-scoped. */
body.page-id-142 .sg-section > .wp-block-group__inner-container > .wp-block-group:first-child > .wp-block-group__inner-container{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  max-width:1320px;margin:0 auto 24px;
}
body.page-id-142 .sg-section > .wp-block-group__inner-container > .wp-block-group:first-child .sg-legend{margin:0;}
body.page-id-142 .sg-section > .wp-block-group__inner-container > .wp-block-group:first-child p.btn.btn-primary{
  flex:0 0 auto;width:auto;margin:0;
}

/* selector-guide (page-id-142) legend row: Mai forces the inner-container
   to display:contents with higher specificity, defeating the flex layout
   above. Force display:flex and constrain the button width. */
body.page-id-142 .sg-section > .wp-block-group__inner-container > .wp-block-group:first-child > .wp-block-group__inner-container{
  display:flex !important;
}
body.page-id-142 .sg-section > .wp-block-group__inner-container > .wp-block-group:first-child p.btn.btn-primary{
  flex:0 0 auto !important;width:auto !important;display:inline-flex !important;
}

/* selector-guide (page-id-142) legend row: constrain & center the flex
   container and let the legend flex-shrink so the PDF button stays on the
   right rather than wrapping. */
body.page-id-142 .sg-section > .wp-block-group__inner-container > .wp-block-group:first-child > .wp-block-group__inner-container{
  max-width:1320px !important;margin:0 auto 24px !important;align-items:center !important;
}
body.page-id-142 .sg-section > .wp-block-group__inner-container > .wp-block-group:first-child .sg-legend{
  flex:1 1 auto;min-width:0;
}

/* selector-guide (page-id-142) legend row: with flex-wrap the long legend
   pushes the button onto a second line instead of shrinking. Force nowrap
   so the legend wraps internally and the button stays on the right. */
body.page-id-142 .sg-section > .wp-block-group__inner-container > .wp-block-group:first-child > .wp-block-group__inner-container{
  flex-wrap:nowrap !important;
}

/* ===== page-id-144 (manufacturer-specs) ===== */
/* S3 cross-reference search widget: the converter emitted the `.search-form`
   grid wrapper as an EMPTY <p> and flattened its children (2 .search-field +
   .search-submit) into the .search-card inner-container (display:contents),
   so they stacked full-width instead of forming the 200px/1fr/auto row.
   Re-establish the grid on the inner-container; head / examples / stray <p>
   span all columns; phantom 36px gutter columns reproduce the form padding. */
body.page-id-144 .search-card > .wp-block-group__inner-container{
  display:grid !important;
  grid-template-columns:36px 200px 1fr auto 36px;
  column-gap:16px;
  row-gap:0;
  align-items:end;
}
body.page-id-144 .search-card > .wp-block-group__inner-container > .search-card-head,
body.page-id-144 .search-card > .wp-block-group__inner-container > .search-form,
body.page-id-144 .search-card > .wp-block-group__inner-container > p:not([class]),
body.page-id-144 .search-card > .wp-block-group__inner-container > .search-examples{
  grid-column:1 / -1;
}
/* the form-control row sits between head and examples; add the top/bottom pad
   the original .search-form carried (36px top, 28px bottom) */
body.page-id-144 .search-card > .wp-block-group__inner-container > .search-field{
  margin-top:36px;
}
body.page-id-144 .search-card > .wp-block-group__inner-container > .search-submit{
  margin-top:36px;
}
body.page-id-144 .search-card > .wp-block-group__inner-container > .search-field:nth-of-type(1){
  grid-column:2;
}
body.page-id-144 .search-card > .wp-block-group__inner-container > .search-field:nth-of-type(2){
  grid-column:3;
}
body.page-id-144 .search-card > .wp-block-group__inner-container > .search-submit{
  grid-column:4;
}

/* S3 correction: the global Mai rule forces display:contents on the
   inner-container with higher priority, so the grid must live on the
   wrapper group (.search-card) — the contents inner-container then lets
   head/form/fields/button/examples become .search-card's own grid items.
   (Supersedes the display:grid attempt on the inner-container above.) */
body.page-id-144 .search-card{
  display:grid !important;
  grid-template-columns:36px 200px 1fr auto 36px;
  column-gap:16px;
  row-gap:0;
  align-items:end;
}
/* the form-control row needs its inter-row spacing; the head bar already
   spans full width, fields sit below it. Give the field row top spacing and
   the examples row keeps its own bottom padding. */

/* S5 "A snapshot of the catalog." match-table (page-id-144).
   This is NOT an HTML <table> — the template builds the data grid from DIV
   rows with display:contents and a `.match-row > div` cell rule. The converter
   nested each Mai .match-row behind a display:contents inner-container and
   emitted the cells as <p>, so the template's `.match-row > div` cell rule
   (padding / borders / flex / striping / head bg) never reaches the cells.
   Cells live at: .match-row > .wp-block-group__inner-container > <p|*>.
   Re-target every cell rule through the inner-container. Page-scoped. */

/* cell box */
body.page-id-144 .match-row > .wp-block-group__inner-container > *{
  padding:18px 22px;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  display:flex;
  align-items:center;
  margin:0;
}
/* last cell in a row: no right border */
body.page-id-144 .match-row > .wp-block-group__inner-container > *:last-child{
  border-right:none;
}
/* head row cells: dark bg + steel text */
body.page-id-144 .match-row.head > .wp-block-group__inner-container > *{
  background:var(--ink);
  color:var(--steel-2);
  font-family:var(--f-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.12em;
  border-right-color:rgba(255,255,255,0.1);
  border-bottom-color:var(--steel);
}
/* zebra striping on even data rows */
body.page-id-144 .match-row:nth-child(2n):not(.head) > .wp-block-group__inner-container > *{
  background:var(--paper-2);
}
/* last row: no bottom border */
body.page-id-144 .match-row:last-child > .wp-block-group__inner-container > *{
  border-bottom:none;
}

/* ============================================================
 * BLOG INDEX + BLOG POST  (templates/blog/index.html and
 * templates/blog/the-7-day-quote-restructuring-intake/index.html)
 * Appended for the blog build. Page-header/breadcrumb/page-title/
 * page-kicker/page-lede + cred-bar/dual-cta are shared (already above).
 * ============================================================ */

/* ---- CATEGORY BAR (index) ---- */
.cat-bar { background: var(--ink); color: var(--paper); border-bottom: 3px solid var(--steel); }
.cat-bar-inner { max-width: 1320px; margin: 0 auto; padding: 0 32px; display: flex; align-items: stretch; font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; font-weight: 600; flex-wrap: wrap; }
.cat-label { padding: 18px 24px 18px 0; color: var(--steel-2); border-right: 1px solid rgba(255,255,255,0.10); display: flex; align-items: center; gap: 12px; font-weight: 700; margin: 0; }
.cat-link-wrap { display: flex; align-items: stretch; flex-wrap: wrap; margin: 0; }
.cat-bar a { color: var(--powder); padding: 18px 22px; display: inline-flex; align-items: center; gap: 8px; border-right: 1px solid rgba(255,255,255,0.10); transition: background 0.15s ease, color 0.15s ease; }
.cat-bar a:hover { background: var(--slate); color: var(--paper); }
.cat-bar a.active { background: var(--steel); color: var(--paper); }
.cat-bar a .count { color: var(--steel-2); font-weight: 500; font-size:16px; }
.cat-bar a.active .count { color: var(--paper); opacity: 0.85; }

/* ---- FEATURED (index) ---- */
.featured-section { padding: 64px 0 32px; }
.featured-inner { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.featured-card { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; background: var(--paper); border: 1px solid var(--line-strong); transition: border-color 0.15s ease; position: relative; }
.featured-card:hover { border-color: var(--slate); }
.featured-media { overflow: hidden; position: relative; }
.featured-media .wp-block-image, .featured-media figure { margin: 0; height: 100%; }
.featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.featured-card:hover .featured-media img { transform: scale(1.04); }
.featured-tag { position: absolute; top: 24px; left: 24px; z-index: 2; font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; padding: 6px 10px; background: var(--ink); color: var(--paper); margin: 0; }
.featured-body { padding: 56px 56px; display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.featured-meta { font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600; display: flex; gap: 12px; align-items: center; margin: 0; }
.featured-meta .dot { color: var(--line-strong); }
.featured-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 3.6vw, 50px); line-height: 0.98; color: var(--ink); letter-spacing: -0.005em; margin: 0; }
.featured-excerpt { color: var(--slate); font-size: 17px; line-height: 1.6; margin: 0; }
.featured-cta { font-family: var(--f-mono); font-size:14px; font-weight: 700; letter-spacing: 0.10em; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.featured-cta .arrow { transition: transform 0.2s; }
.featured-card:hover .featured-cta .arrow { transform: translateX(4px); }
.featured-byline { font-family: var(--f-mono); font-size:13px; letter-spacing: 0.06em; color: var(--steel); padding-top: 14px; border-top: 1px solid var(--line); margin: 0; }

/* ---- POST GRID (index) ---- */
.posts-section { padding: 32px 0 96px; }
.posts-inner { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.posts-section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; padding-bottom: 22px; border-bottom: 1.5px solid var(--slate); flex-wrap: wrap; gap: 16px; }
.posts-section-head h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(32px, 3.2vw, 44px); line-height: 1; color: var(--ink); letter-spacing: -0.005em; margin: 0; }
.posts-section-head .meta { font-family: var(--f-mono); font-size:13px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600; margin: 0; }
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.post-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); transition: border-color 0.18s ease, transform 0.18s ease; position: relative; }
.post-card:hover { border-color: var(--slate); transform: translateY(-3px); }
.post-card:hover .post-read .arrow { transform: translateX(4px); }
.post-media { aspect-ratio: 16/10; border-bottom: 1px solid var(--line); overflow: hidden; position: relative; }
.post-media .wp-block-image, .post-media figure { margin: 0; height: 100%; }
.post-media img { width: 100%; height: 100%; object-fit: cover; }
.post-tag { position: absolute; top: 16px; left: 16px; z-index: 2; font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.12em; padding: 5px 8px; background: var(--paper); color: var(--ink); margin: 0; }
.post-tag.brief { background: var(--ink); color: var(--paper); }
.post-tag.case { background: var(--steel); color: var(--paper); }
.post-tag.note { background: var(--powder); color: var(--ink); }
.post-tag.dist { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); }
.post-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.post-meta { font-family: var(--f-mono); font-size:13px; letter-spacing: 0.08em; color: var(--steel); font-weight: 600; margin-bottom: 12px; display: flex; gap: 10px; align-items: center; }
.post-meta .dot { color: var(--line-strong); }
.post-card h3 { font-family: var(--f-display); font-size: 24px; line-height: 1.05; color: var(--ink); margin: 0 0 12px; font-weight: 400; letter-spacing: -0.005em; }
.post-card p:not(.post-meta):not(.post-read):not(.stretch-link) { color: var(--slate); font-size:16px; line-height: 1.55; margin-bottom: 18px; }
.post-read { margin-top: auto; font-family: var(--f-mono); font-size:13px; letter-spacing: 0.08em; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0; }
.post-read .arrow { transition: transform 0.2s; }

/* stretched overlay link covering a whole card (blocks-only card links) */
.stretch-link { margin: 0; position: static; }
.stretch-link a { position: absolute; inset: 0; z-index: 3; font-size: 0; }

/* ---- PAGINATION (index) ---- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding-top: 56px; }
.page-link { width: 44px; height: 44px; border: 1px solid var(--line-strong); display: grid; place-items: center; font-family: var(--f-mono); font-size:16px; font-weight: 600; color: var(--slate); cursor: pointer; transition: all 0.15s ease; margin: 0; }
.page-link:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.page-link.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.page-link.next, .page-link.prev { width: auto; padding: 0 18px; letter-spacing: 0.08em; }
.page-link.disabled { opacity: 0.35; cursor: not-allowed; }

/* ---- SUBSCRIBE BLOCK (index) ---- */
.subscribe-block { padding: 64px 0; background: var(--ink); color: var(--powder); border-top: 4px solid var(--steel); }
.subscribe-inner { max-width: 1320px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.subscribe-content h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 3.8vw, 50px); line-height: 1; color: var(--paper); margin: 0 0 16px; letter-spacing: -0.005em; }
.subscribe-content p { font-size: 16px; line-height: 1.55; color: var(--powder); opacity: 0.85; max-width: 480px; margin: 0; }
.subscribe-form { background: var(--slate-2); padding: 28px; border: 1px solid rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 14px; }
.subscribe-form-label { font-family: var(--f-mono); font-size:13px; letter-spacing: 0.12em; color: var(--steel-2); font-weight: 700; margin: 0; }
.subscribe-input { padding: 16px 18px; background: var(--ink); border: 1px solid var(--steel); color: var(--steel-2); font-family: var(--f-body); font-size: 16px; margin: 0; }
.subscribe-btn { padding: 16px 22px; background: var(--steel); color: var(--paper); font-family: var(--f-mono); font-size:14px; font-weight: 700; letter-spacing: 0.10em; margin: 0; text-align: center; }
.subscribe-meta { font-family: var(--f-mono); font-size:13px; letter-spacing: 0.06em; color: var(--steel-2); margin: 0; }

/* =========================== BLOG POST =========================== */
/* ---- ARTICLE HEADER ---- */
.article-header { background: var(--powder); padding: 44px 0 0; position: relative; overflow: hidden; }
.article-header::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(52,64,78,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(52,64,78,0.06) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.article-header-inner { position: relative; max-width: 920px; margin: 0 auto; padding: 0 32px 64px; }
.article-tag { font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.14em; padding: 7px 12px; background: var(--ink); color: var(--paper); display: inline-block; margin: 0 0 24px; }
.article-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 5.4vw, 76px); line-height: 0.96; color: var(--ink); letter-spacing: -0.005em; margin: 0 0 28px; }
.article-deck { font-size: 22px; line-height: 1.5; color: var(--slate); max-width: 720px; margin: 0 0 36px; font-weight: 400; }
.article-deck strong { color: var(--ink); font-weight: 600; }
.article-byline { display: flex; gap: 28px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); flex-wrap: wrap; align-items: center; }
.byline-cell { font-family: var(--f-mono); font-size:13px; letter-spacing: 0.06em; color: var(--steel); display: flex; flex-direction: column; gap: 2px; }
.byline-cell .label { font-size:13px; letter-spacing: 0.12em; color: var(--steel-2); font-weight: 700; margin: 0; }
.byline-cell .value { color: var(--ink); font-weight: 700; font-size:16px; margin: 0; }

/* ---- ARTICLE HERO IMAGE ---- */
.article-hero-image { background: var(--ink); }
.article-hero-image-inner { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.article-hero-figure { margin: -64px 0 0; position: relative; aspect-ratio: 21/9; overflow: hidden; }
.article-hero-figure img { width: 100%; height: 100%; object-fit: cover; }

/* ---- ARTICLE BODY ---- */
.article-body { padding: 88px 0; background: var(--paper); }
.article-body-inner { max-width: 760px; margin: 0 auto; padding: 0 32px; }
.article-body-inner > p { font-size: 19px; line-height: 1.7; margin-bottom: 28px; color: var(--slate); }
.article-body-inner > p strong { color: var(--ink); font-weight: 600; }
.article-body-inner > p:first-of-type::first-letter { font-family: var(--f-display); font-size: 92px; float: left; line-height: 0.85; margin: 6px 14px 0 0; color: var(--ink); }
.article-body-inner > h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(32px, 3.4vw, 44px); line-height: 1; color: var(--ink); letter-spacing: -0.005em; margin: 56px 0 22px; }
.article-body-inner > h3 { font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--ink); letter-spacing: -0.005em; margin: 40px 0 14px; }
.article-body-inner ul, .article-body-inner ol { margin-bottom: 28px; padding-left: 0; list-style: none; }
.article-body-inner li { font-size: 18px; line-height: 1.65; color: var(--slate); padding-left: 28px; position: relative; margin-bottom: 12px; }
.article-body-inner ul li::before { content: "\2192"; position: absolute; left: 0; color: var(--steel); font-family: var(--f-mono); font-weight: 700; }
.article-body-inner ol { counter-reset: art-ol; }
.article-body-inner ol li { counter-increment: art-ol; }
.article-body-inner ol li::before { content: counter(art-ol, decimal-leading-zero); position: absolute; left: 0; color: var(--steel); font-family: var(--f-mono); font-weight: 700; font-size:16px; padding-top: 4px; }

.article-body-inner blockquote { margin: 48px -32px; padding: 36px 56px; background: var(--ink); color: var(--paper); font-family: var(--f-display); font-size: clamp(28px, 2.8vw, 38px); line-height: 1.1; font-weight: 400; letter-spacing: -0.005em; position: relative; border-left: 4px solid var(--steel); }
.article-body-inner blockquote::before { content: "\201C"; position: absolute; top: -8px; left: 24px; font-size: 92px; color: var(--steel); font-family: var(--f-display); line-height: 1; }
.article-body-inner blockquote p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.article-body-inner blockquote cite { display: block; font-family: var(--f-mono); font-size:13px; letter-spacing: 0.10em; color: var(--steel-2); font-weight: 600; margin-top: 18px; font-style: normal; }

.stat-callout { background: var(--paper-2); border: 1px solid var(--line-strong); border-left: 4px solid var(--steel); padding: 28px 32px; margin: 36px 0; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
.stat-callout-num { font-family: var(--f-display); font-weight: 400; font-size: 72px; line-height: 0.85; color: var(--ink); letter-spacing: -0.02em; margin: 0; }
.stat-callout-num .unit { font-family: var(--f-mono); font-size: 16px; color: var(--steel); margin-left: 6px; font-weight: 700; }
.stat-callout-text { font-size: 16px; line-height: 1.55; color: var(--slate); margin: 0; }
.stat-callout-text strong { color: var(--ink); font-weight: 600; }

/* ---- COMPARISON TABLE ---- */
.compare-table { background: var(--paper); border: 1px solid var(--line-strong); border-top: 3px solid var(--steel); margin: 36px 0; }
.compare-row { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--line); }
.compare-row:last-child { border-bottom: none; }
.compare-row > p { padding: 18px 22px; border-right: 1px solid var(--line); font-family: var(--f-mono); font-size:16px; margin: 0; }
.compare-row > p:last-child { border-right: none; }
.compare-row.head > p { background: var(--ink); color: var(--steel-2); font-size:13px; font-weight: 700; letter-spacing: 0.12em; border-right-color: rgba(255,255,255,0.10); border-bottom-color: var(--steel); }
.compare-row .label { font-weight: 600; color: var(--ink); letter-spacing: 0.06em; font-size:13px; }
.compare-row .before { color: var(--slate); }
.compare-row .after { color: var(--ink); font-weight: 600; }
.compare-row .after .em { background: var(--powder); padding: 2px 6px; }

/* ---- AUTHOR BIO ---- */
.author-bio { background: var(--paper-2); padding: 64px 0; border-top: 1px solid var(--line); }
.author-bio-inner { max-width: 760px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
.author-avatar { width: 96px; height: 96px; background: var(--ink); display: grid; place-items: center; color: var(--paper); font-family: var(--f-display); font-size: 36px; letter-spacing: -0.005em; margin: 0; }
.author-name { font-family: var(--f-display); font-size: 28px; color: var(--ink); letter-spacing: -0.005em; line-height: 1; margin: 0 0 6px; }
.author-role { font-family: var(--f-mono); font-size:13px; letter-spacing: 0.10em; color: var(--steel); font-weight: 700; margin: 0 0 14px; }
.author-bio-text { font-size: 16px; line-height: 1.55; color: var(--slate); margin: 0; }

/* ---- RELATED BLOCK (post) ---- */
.related-block { padding: 80px 0; background: var(--paper); }
.related-inner { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.related-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; padding-bottom: 22px; border-bottom: 1.5px solid var(--slate); flex-wrap: wrap; gap: 16px; }
.related-head h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 2.8vw, 40px); line-height: 1; color: var(--ink); letter-spacing: -0.005em; margin: 0; }
.related-head p { font-family: var(--f-mono); font-size:13px; letter-spacing: 0.10em; color: var(--steel); font-weight: 700; margin: 0; }
.related-head a:hover { color: var(--ink); }

/* ---- blog-card grid used inside post (related + bottom blog-section) ---- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.blog-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); transition: border-color 0.18s ease, transform 0.18s ease; position: relative; }
.blog-card:hover { border-color: var(--slate); transform: translateY(-3px); }
.blog-card .media { aspect-ratio: 16/10; border-bottom: 1px solid var(--line); overflow: hidden; }
.blog-card .media .wp-block-image, .blog-card .media figure { margin: 0; height: 100%; }
.blog-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card .body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.blog-card .meta { font-family: var(--f-mono); font-size:13px; letter-spacing: 0.08em; color: var(--steel); font-weight: 600; margin-bottom: 12px; display: flex; gap: 10px; align-items: center; }
.blog-card .meta .dot { color: var(--line-strong); }
.blog-card h3 { font-family: var(--f-display); font-size: 24px; line-height: 1.05; color: var(--ink); margin: 0 0 12px; font-weight: 400; letter-spacing: -0.005em; }
.blog-card p:not(.meta):not(.read):not(.stretch-link) { color: var(--slate); font-size:16px; line-height: 1.55; margin-bottom: 18px; }
.blog-card .read { margin-top: auto; font-family: var(--f-mono); font-size:13px; letter-spacing: 0.08em; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0; }
.blog-card .read .arrow { transition: transform 0.2s; }
.blog-card:hover .read .arrow { transform: translateX(4px); }

/* ---- RESPONSIVE (blog) ---- */
@media (max-width: 1024px) {
  .featured-card, .subscribe-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .featured-body { padding: 36px 32px; }
  .posts-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .posts-grid { grid-template-columns: 1fr; }
}

/* ---- BLOG INDEX adapter: this page renders as the posts archive, so its
 * content lives in .archives-description/.content (NOT .entry-content). The
 * global .entry-content inner-container flattener doesn't reach it; replicate
 * the display:contents neutralisation scoped to the blog archive body class so
 * the templates' grid/flex className layouts apply to the block DOM. ---- */
.bgctx-blog .content .wp-block-group > .wp-block-group__inner-container {
  display: contents !important; max-width: none !important; padding: 0 !important;
}
/* Mai archive wrapper must not constrain our full-bleed sections */
.bgctx-blog .content.has-wide-content,
.bgctx-blog .content { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
.bgctx-blog .archives-description { margin: 0 !important; }
.bgctx-blog .content > .alignfull { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; }

/* ---- BLOG INDEX: force structural wrapper groups to block so their children
 * stack vertically. Mai defaults wp-block-group to display:flex; once the
 * inner-container is display:contents the wrappers' children would lay out as a
 * flex row (head | grid | pagination side by side). The template renders these
 * as plain block containers. ---- */
.bgctx-blog .posts-section,
.bgctx-blog .posts-inner,
.bgctx-blog .featured-section,
.bgctx-blog .featured-inner,
.bgctx-blog .subscribe-block,
.bgctx-blog .subscribe-content,
.bgctx-blog .cat-bar,
.bgctx-blog .page-header,
.bgctx-blog .page-header-inner { display: block !important; }

/* ---- BLOG INDEX: page 61 is the designated posts page, so Mai also renders
 * its default archive loop (.entries-archive) + archive pagination below our
 * designed page content. Our page-61 blocks already provide the full post grid
 * (data-driven from the real posts), so hide Mai's duplicate archive list and
 * its pagination on this view. Scoped to the blog archive body class. ---- */
.bgctx-blog .content > .entries-archive,
.bgctx-blog .content > .entries.entries-archive,
.bgctx-blog .archive-pagination { display: none !important; }

/* ============================================================
 * BLOG POST structural adapters (.bgctx-post). Mai defaults
 * wp-block-group to display:flex; force the article wrapper groups
 * to block so prose/headers stack, and restore the hero figure as a
 * real aspect-ratio box (the global .entry-content .wp-block-image
 * {display:contents} rule otherwise collapses it).
 * ============================================================ */
.bgctx-post .article-header,
.bgctx-post .article-header-inner,
.bgctx-post .article-hero-image,
.bgctx-post .article-hero-image-inner,
.bgctx-post .article-body,
.bgctx-post .article-body-inner,
.bgctx-post .author-bio,
.bgctx-post .related-block,
.bgctx-post .related-inner,
.bgctx-post .blog-section,
.bgctx-post .blog-section-inner,
.bgctx-post .blog-card .body,
.bgctx-post .stat-callout-text,
.bgctx-post .subscribe-content { display: block !important; }

/* hero figure: real box with 21/9 aspect ratio (override global image=contents) */
.bgctx-post .article-hero-image .wp-block-image.article-hero-figure { display: block !important; margin: -64px 0 0 !important; position: relative; aspect-ratio: 21/9; overflow: hidden; }
.bgctx-post .article-hero-figure img { width: 100%; height: 100%; object-fit: cover; }

/* keep the byline + author + compare rows as flex/grid (not block) */
.bgctx-post .article-byline { display: flex !important; }
.bgctx-post .byline-cell { display: flex !important; flex-direction: column; }
.bgctx-post .author-bio-inner { display: grid !important; }
.bgctx-post .stat-callout { display: grid !important; }
.bgctx-post .compare-table { display: block !important; }
.bgctx-post .compare-row { display: grid !important; }
.bgctx-post .related-head { display: flex !important; }
.bgctx-post .blog-section-head { display: block !important; }
.bgctx-post .blog-grid { display: grid !important; }
.bgctx-post .blog-card { display: flex !important; flex-direction: column; }
.bgctx-post .blog-card .media { display: block !important; }

/* ---- BLOG POST: prose typography via DESCENDANT selectors. The article
 * paragraphs/headings sit inside .article-body-inner's display:contents
 * inner-container, so the template's child (>) selectors miss them. Re-target
 * as descendants and exclude the structural callout/table/byline blocks. ---- */
.bgctx-post .article-body-inner > .wp-block-group__inner-container > p,
.bgctx-post .article-body-inner p.has-text-align-left,
.bgctx-post .article-body > .wp-block-group__inner-container > .article-body-inner p:not(.stat-callout-num):not(.stat-callout-text):not(.label):not(.before):not(.after) {
  font-size: 19px; line-height: 1.7; margin-bottom: 28px; color: var(--slate);
}
/* keep the drop-cap on the very first body paragraph */
.bgctx-post .article-body-inner > .wp-block-group__inner-container > p:first-of-type::first-letter {
  font-family: var(--f-display); font-size: 92px; float: left; line-height: 0.85; margin: 6px 14px 0 0; color: var(--ink);
}
.bgctx-post .article-body-inner > .wp-block-group__inner-container > h2 {
  font-family: var(--f-display); font-weight: 400; font-size: clamp(32px,3.4vw,44px); line-height: 1; color: var(--ink); letter-spacing: -0.005em; margin: 56px 0 22px;
}
.bgctx-post .article-body-inner > .wp-block-group__inner-container > h3 {
  font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--ink); letter-spacing: -0.005em; margin: 40px 0 14px;
}
.bgctx-post .article-body-inner > .wp-block-group__inner-container > ul,
.bgctx-post .article-body-inner > .wp-block-group__inner-container > ol { margin-bottom: 28px; padding-left: 0; list-style: none; }

/* ---- byline-cell: its inner-container would flatten (display:contents),
 * dumping 8 label/value paragraphs straight into .article-byline as flex
 * items. Re-establish each cell as a flex column so it's 4 cells in a row. ---- */
.bgctx-post .byline-cell > .wp-block-group__inner-container { display: flex !important; flex-direction: column; gap: 2px; }
.bgctx-post .article-byline { gap: 28px; align-items: center; }

/* ---- stat-callout / compare-row / author-bio-inner: keep their inner two/three
 * cells in the intended grid by letting the inner-container be contents (already
 * global) — the grid is on the parent. But the NESTED groups (stat-callout-num is a
 * paragraph, fine). author-bio second cell is a group; keep it block. ---- */
.bgctx-post .author-bio-meta > .wp-block-group__inner-container { display: block !important; }

/* ---- Mai forces wp-block-group flex-direction:column; the template's flex
 * rows must be explicitly row. Applies to byline + any horizontal meta rows
 * in the post and related/blog sections. ---- */
.bgctx-post .article-byline { flex-direction: row !important; }
.bgctx-post .related-head { flex-direction: row !important; }
.bgctx-post .blog-card .meta { flex-direction: row !important; }

/* =============================================================
 * PRODUCTS BUILD — PDP + catalog + type archives.
 * Ported from the static templates, scoped to product body classes
 * + .entry-content so they cannot collide with other pages or the
 * shared theme chrome (header/footer live outside .entry-content).
 * ============================================================= */
.bgctx-product .entry-content .btn {display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; font-family: var(--f-mono); font-size: 16px; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; border: none; transition: all 0.15s ease; white-space: nowrap; line-height: 1;}
.bgctx-product .entry-content .btn-primary {background: var(--slate); color: var(--paper);}
.bgctx-product .entry-content .btn-primary:hover {background: var(--ink);}
.bgctx-product .entry-content .btn-ghost {background: transparent; color: var(--slate); border: 1px solid var(--line-strong);}
.bgctx-product .entry-content .btn-ghost:hover {background: var(--slate); color: var(--paper); border-color: var(--slate);}
.bgctx-product .entry-content .btn-block {background: var(--ink); color: var(--paper); border: none; width: 100%; justify-content: center;}
.bgctx-product .entry-content .btn-block:hover {background: var(--steel);}
.bgctx-product .entry-content .btn .arrow {transition: transform 0.2s;}
.bgctx-product .entry-content .btn:hover .arrow {transform: translateX(4px);}
.bgctx-product .entry-content .crumb-bar {background: var(--paper-2); border-bottom: 1px solid var(--line);}
.bgctx-product .entry-content .crumb-bar-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.06em;
  color: var(--steel);
  font-weight: 500;}
.bgctx-product .entry-content .breadcrumb {display: flex; gap: 10px; align-items: center; flex-wrap: wrap;}
.bgctx-product .entry-content .breadcrumb a:hover {color: var(--ink);}
.bgctx-product .entry-content .breadcrumb .sep {color: var(--steel-2);}
.bgctx-product .entry-content .breadcrumb .here {color: var(--ink); font-weight: 600;}
.bgctx-product .entry-content .crumb-actions {display: flex; gap: 18px; align-items: center; flex-wrap: wrap;}
.bgctx-product .entry-content .crumb-actions a {color: var(--steel); display: inline-flex; align-items: center; gap: 6px;}
.bgctx-product .entry-content .crumb-actions a:hover {color: var(--ink);}
.bgctx-product .entry-content .hero {background: var(--powder);
  position: relative;
  overflow: hidden;
  border-bottom: 4px solid var(--steel);}
.bgctx-product .entry-content .hero::before {content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(52,64,78,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,64,78,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  pointer-events: none;}
.bgctx-product .entry-content .hero-inner {position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 56px 32px 72px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: start;}
.bgctx-product .entry-content .hero-left {display: flex; flex-direction: column; gap: 28px;}
.bgctx-product .entry-content .hero-meta {display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;}
.bgctx-product .entry-content .brand-mark {font-family: var(--f-mono);
  font-size:14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink);
  background: var(--paper);
  padding: 8px 14px;
  border: 1px solid var(--ink);}
.bgctx-product .entry-content .line-mark {font-family: var(--f-mono);
  font-size:14px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--steel);}
.bgctx-product .entry-content .line-mark .sep {color: var(--steel-2); margin: 0 8px;}
.bgctx-product .entry-content .product-id {font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--steel);}
.bgctx-product .entry-content .product-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(56px, 7vw, 110px);
  line-height: 0.92;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0;}
.bgctx-product .entry-content .product-title .accent {color: var(--steel); display: block;}
.bgctx-product .entry-content .product-summary {font-size: 19px;
  line-height: 1.55;
  color: var(--slate);
  max-width: 580px;}
.bgctx-product .entry-content .product-summary strong {color: var(--ink); font-weight: 600;}
.bgctx-product .entry-content .hero-strength-row {display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;}
.bgctx-product .entry-content .strength-chip {font-family: var(--f-mono);
  font-size:14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  background: var(--strength-high);}
.bgctx-product .entry-content .strength-chip::before {content: "";
  width: 8px;
  height: 8px;
  background: var(--paper);
  border-radius: 50%;}
.bgctx-product .entry-content .product-color-swatch {width: 36px;
  height: 36px;
  border: 2px solid var(--ink);
  background: var(--product-color);
  flex-shrink: 0;
  position: relative;}
.bgctx-product .entry-content .product-color-label {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--ink);}
.bgctx-product .entry-content .hero-actions {display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 8px;}
.bgctx-product .entry-content .hero-meta-row {display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.06em;
  color: var(--steel);
  flex-wrap: wrap;
  padding-top: 8px;}
.bgctx-product .entry-content .hero-meta-row .em {color: var(--ink); font-weight: 700;}
.bgctx-product .entry-content .hero-right {display: flex;
  flex-direction: column;
  gap: 22px;}
.bgctx-product .entry-content .product-stage {background: var(--paper);
  border: 1px solid var(--line-strong);
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;}
.bgctx-product .entry-content .product-stage::before, .bgctx-product .entry-content .product-stage::after {content: "";
  position: absolute;
  background: var(--steel);
  z-index: 2;}
.bgctx-product .entry-content .product-stage::before {top: 16px; left: 16px; right: 16px; height: 1px;}
.bgctx-product .entry-content .product-stage::after {bottom: 16px; left: 16px; right: 16px; height: 1px;}
.bgctx-product .entry-content .stage-corners {position: absolute;
  inset: 16px;
  pointer-events: none;
  z-index: 2;}
.bgctx-product .entry-content .stage-corners span {position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--steel);}
.bgctx-product .entry-content .stage-corners span:nth-child(1) {top: -1px; left: -1px; border-right: none; border-bottom: none;}
.bgctx-product .entry-content .stage-corners span:nth-child(2) {top: -1px; right: -1px; border-left: none; border-bottom: none;}
.bgctx-product .entry-content .stage-corners span:nth-child(3) {bottom: -1px; left: -1px; border-right: none; border-top: none;}
.bgctx-product .entry-content .stage-corners span:nth-child(4) {bottom: -1px; right: -1px; border-left: none; border-top: none;}
.bgctx-product .entry-content .stage-img {max-width: 78%;
  max-height: 78%;
  object-fit: contain;}
.bgctx-product .entry-content .stage-tag {position: absolute;
  top: 32px;
  left: 32px;
  z-index: 3;
  font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--paper);
  background: var(--ink);
  padding: 6px 10px;}
.bgctx-product .entry-content .thumb-row {display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;}
.bgctx-product .entry-content .thumb {background: var(--paper);
  border: 1px solid var(--line);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.15s ease;
  position: relative;}
.bgctx-product .entry-content .thumb img {max-width: 70%; max-height: 70%; object-fit: contain;}
.bgctx-product .entry-content .thumb.active {border-color: var(--steel); border-width: 2px;}
.bgctx-product .entry-content .thumb:hover {border-color: var(--slate);}
.bgctx-product .entry-content .thumb-label {position: absolute;
  bottom: 4px;
  left: 4px;
  font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--steel);}
.bgctx-product .entry-content .attr-strip {background: var(--ink);
  color: var(--powder);
  border-bottom: 1px solid rgba(255,255,255,0.10);}
.bgctx-product .entry-content .attr-strip-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);}
.bgctx-product .entry-content .attr-cell {padding: 24px 28px;
  border-right: 1px solid rgba(255,255,255,0.10);}
.bgctx-product .entry-content .attr-cell:last-child {border-right: none;}
.bgctx-product .entry-content .attr-label {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--steel-2);
  margin-bottom: 8px;}
.bgctx-product .entry-content .attr-value {font-family: var(--f-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--paper);
  letter-spacing: -0.005em;}
.bgctx-product .entry-content .attr-value .unit {font-family: var(--f-mono);
  font-weight: 600;
  font-size:13px;
  color: var(--steel-2);
  letter-spacing: 0.06em;
  margin-left: 4px;}
.bgctx-product .entry-content .attr-sub {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--steel-2);
  margin-top: 6px;}
.bgctx-product .entry-content .sub-nav {background: var(--slate);
  border-bottom: 3px solid var(--steel);
  position: sticky;
  top: 109px;
  z-index: 90;}
.bgctx-product .entry-content .sub-nav-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: stretch;
  font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.10em;
  font-weight: 600;
  flex-wrap: wrap;}
.bgctx-product .entry-content .sub-nav-label {padding: 16px 24px 16px 0;
  color: var(--steel-2);
  border-right: 1px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  gap: 12px;}
.bgctx-product .entry-content .sub-nav-label .arrow-down {color: var(--steel-2);}
.bgctx-product .entry-content .sub-nav a {color: var(--powder);
  padding: 16px 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-right: 1px solid rgba(255,255,255,0.14);
  transition: background 0.15s ease, color 0.15s ease;}
.bgctx-product .entry-content .sub-nav a:hover {background: var(--ink); color: var(--paper);}
.bgctx-product .entry-content .sub-nav a .num {color: var(--steel-2); font-weight: 500;}
.bgctx-product .entry-content .section {padding: 88px 0;
  scroll-margin-top: 175px;}
.bgctx-product .entry-content .section.alt {background: var(--paper-2);}
.bgctx-product .entry-content .section-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;}
.bgctx-product .entry-content .section-head {display: block;
  margin-bottom: 56px;
  padding-bottom: 28px;
  border-bottom: 1.5px solid var(--slate);}
.bgctx-product .entry-content .section-meta {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--slate);
  font-weight: 600;
  margin-bottom: 16px;}
.bgctx-product .entry-content .section-meta .num {display: block;
  font-family: var(--f-display);
  font-size: 56px;
  color: var(--steel);
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 12px;}
.bgctx-product .entry-content .section-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 16px;}
.bgctx-product .entry-content .section-blurb {color: var(--slate);
  font-size: 17px;
  line-height: 1.55;
  max-width: 680px;}
.bgctx-product .entry-content .overview-grid {display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: start;}
.bgctx-product .entry-content .overview-prose p {font-size: 19px;
  line-height: 1.6;
  margin-bottom: 22px;
  color: var(--slate);}
.bgctx-product .entry-content .overview-prose p strong {color: var(--ink); font-weight: 600;}
.bgctx-product .entry-content .overview-prose p:first-child::first-letter {font-family: var(--f-display);
  font-size: 84px;
  float: left;
  line-height: 0.85;
  margin: 6px 14px 0 0;
  color: var(--ink);}
.bgctx-product .entry-content .callout-card {background: var(--ink);
  color: var(--powder);
  padding: 36px 32px;
  position: relative;}
.bgctx-product .entry-content .callout-card::before {content: "";
  position: absolute;
  top: 0; left: 0;
  width: 64px;
  height: 4px;
  background: var(--strength-high);}
.bgctx-product .entry-content .callout-label {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.12em;
  color: var(--steel-2);
  margin-bottom: 14px;
  font-weight: 700;}
.bgctx-product .entry-content .callout-headline {font-family: var(--f-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.05;
  color: var(--paper);
  margin-bottom: 18px;
  letter-spacing: -0.005em;}
.bgctx-product .entry-content .callout-body {font-size:16px;
  line-height: 1.6;
  color: var(--powder);
  opacity: 0.85;
  margin-bottom: 22px;}
.bgctx-product .entry-content .callout-list {list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.04em;
  color: var(--powder);}
.bgctx-product .entry-content .callout-list li {display: grid;
  /* 120px (was 80px): the full-doc rebuild added longer keys (DOCUMENTATION,
     MARK DURABILITY, KEY APPLICATIONS…) that overflowed the 80px track and
     overlapped the value column */
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);}
.bgctx-product .entry-content .callout-list li:last-child {padding-bottom: 0; border-bottom: none;}
.bgctx-product .entry-content .callout-list .k {color: var(--steel-2); font-weight: 600; overflow-wrap: anywhere;}
.bgctx-product .entry-content .callout-list .v {color: var(--paper); font-weight: 600;}
.bgctx-product .entry-content .specs-grid {background: var(--paper);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--steel);}
.bgctx-product .entry-content .spec-row {display: grid;
  grid-template-columns: 280px 1fr 1.1fr;
  border-bottom: 1px solid var(--line);}
.bgctx-product .entry-content .spec-row:last-child {border-bottom: none;}
.bgctx-product .entry-content .spec-row > div {padding: 22px 28px;}
.bgctx-product .entry-content .spec-row > div + div {border-left: 1px solid var(--line);}
.bgctx-product .entry-content .spec-key {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--steel);}
.bgctx-product .entry-content .spec-val {font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.005em;}
.bgctx-product .entry-content .spec-val .unit {font-family: var(--f-mono);
  font-weight: 600;
  font-size:13px;
  color: var(--steel);
  letter-spacing: 0.06em;
  margin-left: 4px;}
.bgctx-product .entry-content .spec-note {font-size:16px;
  line-height: 1.5;
  color: var(--slate);}
.bgctx-product .entry-content .app-grid {display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line-strong);}
.bgctx-product .entry-content .app-card {padding: 36px 30px 30px;
  border-right: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;}
.bgctx-product .entry-content .app-card:nth-child(3n) {border-right: none;}
.bgctx-product .entry-content .app-card:nth-last-child(-n+3):not(:nth-last-child(n+4)) {border-bottom: none;}
.bgctx-product .entry-content .app-card:nth-child(n+4) {border-top: 1px solid var(--line-strong);}
.bgctx-product .entry-content .app-icon {width: 48px;
  height: 48px;
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  background: var(--powder);}
.bgctx-product .entry-content .app-icon svg {width: 24px; height: 24px; color: var(--ink);}
.bgctx-product .entry-content .app-num {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--steel);}
.bgctx-product .entry-content .app-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.005em;}
.bgctx-product .entry-content .app-desc {font-size:16px;
  line-height: 1.55;
  color: var(--slate);}
.bgctx-product .entry-content .app-tag {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--steel);
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line);}
.bgctx-product .entry-content .substrate-grid {display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--paper);
  border: 1px solid var(--line-strong);}
.bgctx-product .entry-content .sub-card {padding: 28px 24px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;}
.bgctx-product .entry-content .sub-card:last-child {border-right: none;}
.bgctx-product .entry-content .sub-status {display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size:14px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;}
.bgctx-product .entry-content .sub-status .dot {width: 12px;
  height: 12px;
  border-radius: 50%;}
.bgctx-product .entry-content .sub-status.yes {color: #2d7a3d;}
.bgctx-product .entry-content .sub-status.yes .dot {background: #2d7a3d;}
.bgctx-product .entry-content .sub-status.no {color: #c14b3b;}
.bgctx-product .entry-content .sub-status.no .dot {background: #c14b3b;}
.bgctx-product .entry-content .sub-status.maybe {color: #c08a1c;}
.bgctx-product .entry-content .sub-status.maybe .dot {background: #c08a1c;}
.bgctx-product .entry-content .sub-name {font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);}
.bgctx-product .entry-content .sub-detail {font-size:16px;
  line-height: 1.5;
  color: var(--slate);}
.bgctx-product .entry-content .docs-grid {display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line-strong);}
.bgctx-product .entry-content .doc-card {padding: 32px 28px;
  border-right: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: background 0.15s ease;
  cursor: pointer;}
.bgctx-product .entry-content .doc-card:last-child {border-right: none;}
.bgctx-product .entry-content .doc-card:hover {background: var(--paper-2);}
.bgctx-product .entry-content .doc-card:hover .doc-arrow {transform: translateX(4px);}
.bgctx-product .entry-content .doc-icon {width: 56px;
  height: 56px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;}
.bgctx-product .entry-content .doc-icon svg {width: 26px; height: 26px;}
.bgctx-product .entry-content .doc-label {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--steel);}
.bgctx-product .entry-content .doc-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.005em;}
.bgctx-product .entry-content .doc-desc {font-size:16px;
  line-height: 1.5;
  color: var(--slate);}
.bgctx-product .entry-content .doc-meta {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin-top: auto;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--line);}
.bgctx-product .entry-content .doc-meta .em {color: var(--ink); font-weight: 700;}
.bgctx-product .entry-content .doc-arrow {transition: transform 0.2s; display: inline-block;}
.bgctx-product .entry-content .related-grid {display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--paper);
  border: 1px solid var(--line-strong);}
.bgctx-product .entry-content .rel-card {padding: 26px 24px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 0.15s ease;
  cursor: pointer;
  position: relative;
  color: var(--slate);}
.bgctx-product .entry-content .rel-card:hover {background: var(--paper-2);}
.bgctx-product .entry-content .rel-card:nth-child(4n) {border-right: none;}
.bgctx-product .entry-content .rel-card:nth-last-child(-n+4):not(:nth-last-child(n+5)) {border-bottom: none;}
.bgctx-product .entry-content .rel-head {display: flex;
  align-items: center;
  gap: 14px;}
.bgctx-product .entry-content .rel-swatch {width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
  flex-shrink: 0;}
.bgctx-product .entry-content .rel-id {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--steel);}
.bgctx-product .entry-content .rel-name {font-family: var(--f-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.005em;}
.bgctx-product .entry-content .rel-strength {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 5px 9px;
  display: inline-block;
  align-self: flex-start;
  color: var(--paper);}
.bgctx-product .entry-content .rel-strength.low {background: var(--strength-low); color: var(--ink);}
.bgctx-product .entry-content .rel-strength.med {background: var(--strength-med); color: var(--ink);}
.bgctx-product .entry-content .rel-strength.high {background: var(--strength-high);}
.bgctx-product .entry-content .rel-strength.cur {background: var(--ink); color: var(--paper);}
.bgctx-product .entry-content .rel-card.current {background: var(--powder);}
.bgctx-product .entry-content .rel-card.current::before {content: "VIEWING";
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--paper);
  background: var(--ink);
  padding: 4px 8px;}
.bgctx-product .entry-content .rel-link {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--steel);
  margin-top: auto;
  padding-top: 8px;}
.bgctx-product .entry-content .rel-link::after {content: " →";}
.bgctx-product .entry-content .crossref-block {background: var(--ink);
  color: var(--powder);
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: center;}
.bgctx-product .entry-content .crossref-block h3 {font-family: var(--f-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  color: var(--paper);
  margin-bottom: 16px;
  letter-spacing: -0.005em;}
.bgctx-product .entry-content .crossref-block p {color: var(--powder);
  opacity: 0.85;
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 20px;}
.bgctx-product .entry-content .crossref-block .btn-primary {background: var(--steel);}
.bgctx-product .entry-content .crossref-block .btn-primary:hover {background: var(--paper); color: var(--ink);}
.bgctx-product .entry-content .crossref-list {background: var(--slate-2);
  border: 1px solid rgba(255,255,255,0.14);}
.bgctx-product .entry-content .crossref-list-row {display: grid;
  grid-template-columns: 160px 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.10);}
.bgctx-product .entry-content .crossref-list-row:last-child {border-bottom: none;}
.bgctx-product .entry-content .crossref-list-row > div {padding: 16px 22px;}
.bgctx-product .entry-content .crossref-list-row .agency {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.10em;
  color: var(--steel-2);
  font-weight: 700;
  border-right: 1px solid rgba(255,255,255,0.10);}
.bgctx-product .entry-content .crossref-list-row .specs {font-family: var(--f-mono);
  font-size:14px;
  color: var(--paper);
  font-weight: 500;
  letter-spacing: 0.04em;}
@media (max-width: 1100px) {
  .bgctx-product .entry-content .hero-inner {grid-template-columns: 1fr; gap: 48px;}
  .bgctx-product .entry-content .attr-strip-inner {grid-template-columns: repeat(3, 1fr);}
  .bgctx-product .entry-content .attr-cell:nth-child(3n) {border-right: none;}
  .bgctx-product .entry-content .attr-cell:nth-child(n+4) {border-top: 1px solid rgba(255,255,255,0.10);}
  .bgctx-product .entry-content .spec-row {grid-template-columns: 200px 1fr;}
  .bgctx-product .entry-content .spec-row > div:nth-child(3) {display: none;}
  .bgctx-product .entry-content .substrate-grid, .bgctx-product .entry-content .related-grid {grid-template-columns: repeat(2, 1fr);}
  .bgctx-product .entry-content .sub-card:nth-child(2n), .bgctx-product .entry-content .rel-card:nth-child(2n) {border-right: none;}
  .bgctx-product .entry-content .crossref-block {grid-template-columns: 1fr; gap: 32px; padding: 40px 28px;}
  .bgctx-product .entry-content .overview-grid, .bgctx-product .entry-content .section-head, .bgctx-product .entry-content .footer-top, .bgctx-product .entry-content .dual-cta {grid-template-columns: 1fr !important; gap: 32px !important;}
  .bgctx-product .entry-content .docs-grid, .bgctx-product .entry-content .app-grid {grid-template-columns: 1fr;}
  .bgctx-product .entry-content .doc-card, .bgctx-product .entry-content .app-card {border-right: none !important; border-bottom: 1px solid var(--line-strong);}
  .bgctx-product .entry-content .doc-card:last-child, .bgctx-product .entry-content .app-card:last-child {border-bottom: none;}
  .bgctx-product .entry-content .sub-nav {position: static;}
}
@media (max-width: 640px) {
  .bgctx-product .entry-content .attr-strip-inner {grid-template-columns: 1fr 1fr;}
  .bgctx-product .entry-content .attr-cell {padding: 18px 22px;}
  .bgctx-product .entry-content .related-grid, .bgctx-product .entry-content .substrate-grid {grid-template-columns: 1fr;}
  .bgctx-product .entry-content .sub-card, .bgctx-product .entry-content .rel-card {border-right: none !important;}
  .bgctx-product .entry-content .spec-row {grid-template-columns: 1fr;}
  .bgctx-product .entry-content .spec-row > div + div {border-left: none; border-top: 1px solid var(--line);}
}
.bgctx-product .entry-content .blog-section {background: var(--paper); padding: 96px 0;}
.bgctx-product .entry-content .blog-section-inner {max-width: 1320px; margin: 0 auto; padding: 0 32px;}
.bgctx-product .entry-content .blog-section-head {margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1.5px solid var(--slate);}
.bgctx-product .entry-content .blog-section-title {font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 4.6vw, 64px); line-height: 0.95; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 8px;}
.bgctx-product .entry-content .blog-section-meta {font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600;}
.bgctx-product .entry-content .blog-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;}
.bgctx-product .entry-content .blog-card {display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); transition: border-color 0.18s ease, transform 0.18s ease;}
.bgctx-product .entry-content .blog-card:hover {border-color: var(--slate); transform: translateY(-3px);}
.bgctx-product .entry-content .blog-card .media {aspect-ratio: 16/10; border-bottom: 1px solid var(--line); overflow: hidden;}
.bgctx-product .entry-content .blog-card .media img {width: 100%; height: 100%; object-fit: cover; display: block;}
.bgctx-product .entry-content .blog-card .body {padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1;}
.bgctx-product .entry-content .blog-card .meta {font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600; margin-bottom: 14px; display: flex; gap: 12px; align-items: center;}
.bgctx-product .entry-content .blog-card .meta .dot {color: var(--line-strong);}
.bgctx-product .entry-content .blog-card h3 {font-family: var(--f-display); font-size: 28px; line-height: 1; color: var(--ink); margin-bottom: 14px; font-weight: 400; letter-spacing: 0.005em;}
.bgctx-product .entry-content .blog-card p {color: var(--slate); font-size: 16px; line-height: 1.55; margin-bottom: 24px;}
.bgctx-product .entry-content .blog-card .read {margin-top: auto; font-family: var(--f-mono); font-size:14px; letter-spacing: 0.08em; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px;}
.bgctx-product .entry-content .blog-card:hover .read .arrow {transform: translateX(4px);}
.bgctx-product .entry-content .blog-card .read .arrow {transition: transform 0.2s;}
@media (max-width: 1024px) {
  .bgctx-product .entry-content .blog-grid {grid-template-columns: 1fr;}
}

/* ---- CATALOG (products archive) ---- */
.bgctx-catalog .entry-content .btn {display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; font-family: var(--f-mono); font-size: 16px; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; border: none; transition: all 0.15s ease; white-space: nowrap; line-height: 1;}
.bgctx-catalog .entry-content .btn-primary {background: var(--slate); color: var(--paper);}
.bgctx-catalog .entry-content .btn-primary:hover {background: var(--ink);}
.bgctx-catalog .entry-content .btn-ghost {background: transparent; color: var(--slate); border: 1px solid var(--line-strong);}
.bgctx-catalog .entry-content .btn-ghost:hover {background: var(--slate); color: var(--paper); border-color: var(--slate);}
.bgctx-catalog .entry-content .btn .arrow {transition: transform 0.2s;}
.bgctx-catalog .entry-content .btn:hover .arrow {transform: translateX(4px);}
.bgctx-catalog .entry-content .page-header {position: relative;
  background: var(--powder);
  border-bottom: 1px solid var(--line);
  overflow: hidden;}
.bgctx-catalog .entry-content .page-header::before {content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(52,64,78,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,64,78,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  pointer-events: none;}
.bgctx-catalog .entry-content .page-header-inner {position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 44px 32px 64px;}
.bgctx-catalog .entry-content .breadcrumb {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 500;}
.bgctx-catalog .entry-content .breadcrumb a:hover {color: var(--ink);}
.bgctx-catalog .entry-content .breadcrumb .sep {color: var(--steel-2);}
.bgctx-catalog .entry-content .breadcrumb .here {color: var(--ink); font-weight: 600;}
.bgctx-catalog .entry-content .page-kicker {display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--slate);
  margin-bottom: 22px;}
.bgctx-catalog .entry-content .page-kicker .dot {width: 10px; height: 10px; background: var(--steel); border-radius: 50%; box-shadow: 0 0 0 5px rgba(78,107,140,0.22);}
.bgctx-catalog .entry-content .page-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 26px;}
.bgctx-catalog .entry-content .page-title .accent {color: var(--steel);}
.bgctx-catalog .entry-content .page-lede {font-size: 19px;
  line-height: 1.55;
  color: var(--slate);
  max-width: 720px;}
.bgctx-catalog .entry-content .page-lede strong {color: var(--ink); font-weight: 600;}
.bgctx-catalog .entry-content .solutions-search {margin-top: 44px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  padding: 24px 28px;
  max-width: 760px;}
.bgctx-catalog .entry-content .solutions-search .label {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--slate);
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  flex-wrap: wrap;
  gap: 10px;}
.bgctx-catalog .entry-content .solutions-search .badge {background: var(--slate);
  color: var(--paper);
  padding: 4px 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 16px;}
.bgctx-catalog .entry-content .search-row {display: flex; border: 1px solid var(--slate); background: var(--paper);}
.bgctx-catalog .entry-content .search-row input {flex: 1; padding: 18px 20px; border: none; outline: none; font-family: var(--f-mono); font-size: 16px; background: transparent; color: var(--ink); min-width: 0;}
.bgctx-catalog .entry-content .search-row input::placeholder {color: var(--slate);}
.bgctx-catalog .entry-content .search-row button {padding: 0 26px; background: var(--slate); color: var(--paper); border: none; font-family: var(--f-mono); font-size: 16px; letter-spacing: 0.08em; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background 0.15s ease;}
.bgctx-catalog .entry-content .search-row button:hover {background: var(--steel);}
.bgctx-catalog .entry-content .search-tags {display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;}
.bgctx-catalog .entry-content .search-tag {font-family: var(--f-mono); font-size: 16px; padding: 6px 12px; border: 1px solid var(--line-strong); color: var(--slate); cursor: pointer; transition: all 0.15s ease; font-weight: 500;}
.bgctx-catalog .entry-content .search-tag:hover {border-color: var(--slate); background: var(--slate); color: var(--paper);}
.bgctx-catalog .entry-content .cat-nav {background: var(--ink);
  border-bottom: 3px solid var(--steel);
  position: sticky;
  top: 109px;
  z-index: 90;}
.bgctx-catalog .entry-content .cat-nav-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: stretch;
  gap: 0;
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  font-weight: 600;
  flex-wrap: wrap;}
.bgctx-catalog .entry-content .cat-nav .cat-nav-label {padding: 18px 24px 18px 0;
  color: var(--steel-2);
  border-right: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  gap: 12px;}
.bgctx-catalog .entry-content .cat-nav .cat-nav-label .arrow-down {color: var(--steel);}
.bgctx-catalog .entry-content .cat-nav a {color: var(--powder);
  padding: 18px 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-right: 1px solid rgba(255,255,255,0.10);
  transition: background 0.15s ease, color 0.15s ease;}
.bgctx-catalog .entry-content .cat-nav a:hover {background: var(--slate); color: var(--paper);}
.bgctx-catalog .entry-content .cat-nav a .num {color: var(--steel-2); font-weight: 500;}
.bgctx-catalog .entry-content .cat-nav .count {margin-left: auto;
  padding: 18px 0 18px 24px;
  color: var(--steel-2);}
.bgctx-catalog .entry-content .category {border-bottom: 1px solid var(--line);
  padding: 88px 0;
  scroll-margin-top: 175px;}
.bgctx-catalog .entry-content .category:nth-of-type(odd) {background: var(--paper);}
.bgctx-catalog .entry-content .category:nth-of-type(even) {background: var(--paper-2);}
.bgctx-catalog .entry-content .category-inner {max-width: 1320px; margin: 0 auto; padding: 0 32px;}
.bgctx-catalog .entry-content .category-head {display: grid;
  grid-template-columns: 0.85fr 1.1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1.5px solid var(--slate);}
.bgctx-catalog .entry-content .category-meta {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--steel);
  font-weight: 600;
  margin-bottom: 18px;}
.bgctx-catalog .entry-content .category-meta .num {color: var(--ink);}
.bgctx-catalog .entry-content .category-meta .slash {color: var(--line-strong); margin: 0 10px;}
.bgctx-catalog .entry-content .category-title {font-family: var(--f-display);
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 0.95;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0.005em;}
.bgctx-catalog .entry-content .category-desc {color: var(--slate);
  font-size: 17px;
  line-height: 1.65;
  max-width: 580px;}
.bgctx-catalog .entry-content .category-cta {margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--steel);
  padding-bottom: 4px;
  align-self: flex-start;
  width: fit-content;}
.bgctx-catalog .entry-content .category-cta:hover {color: var(--steel);}
.bgctx-catalog .entry-content .line-grid {display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--paper);
  border: 1px solid var(--line-strong);}
.bgctx-catalog .entry-content .line-card {background: var(--paper);
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  transition: background 0.15s ease;
  cursor: pointer;
  position: relative;
  color: var(--slate);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);}
.bgctx-catalog .entry-content .line-card:nth-child(2n) {border-right: none;}
.bgctx-catalog .entry-content .line-card:last-child {border-bottom: none;}
.bgctx-catalog .entry-content .line-card:nth-last-child(2):nth-child(odd) {border-bottom: none;}
.bgctx-catalog .entry-content .line-card:hover {background: var(--paper-2);}
.bgctx-catalog .entry-content .line-card-head {display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);}
.bgctx-catalog .entry-content .line-card-brand {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--steel);
  font-weight: 600;}
.bgctx-catalog .entry-content .line-card-skucount {font-family: var(--f-mono);
  font-size: 16px;
  color: var(--slate);
  font-weight: 500;
  white-space: nowrap;}
.bgctx-catalog .entry-content .line-card-skucount .em {color: var(--ink); font-weight: 700;}
.bgctx-catalog .entry-content .line-card-body {display: grid;
  grid-template-columns: 144px 1fr;
  gap: 24px;
  align-items: start;}
.bgctx-catalog .entry-content .line-card-thumb {background: var(--paper-2);
  border: 1px solid var(--line);
  height: 96px;
  display: grid;
  place-items: center;
  padding: 8px 12px;
  overflow: hidden;}
.bgctx-catalog .entry-content .line-card-thumb img {max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.25s ease;}
.bgctx-catalog .entry-content .line-card:hover .line-card-thumb img {transform: scale(1.04);}
.bgctx-catalog .entry-content .line-card-title {font-family: var(--f-display);
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 12px;
  letter-spacing: 0.005em;}
.bgctx-catalog .entry-content .line-card-desc {color: var(--slate);
  font-size:16px;
  line-height: 1.55;
  margin-bottom: 0;}
.bgctx-catalog .entry-content .sku-list {display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 22px;
  margin-bottom: 24px;}
.bgctx-catalog .entry-content .sku-chip {font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.04em;
  color: var(--slate);
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  padding: 5px 10px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;}
.bgctx-catalog .entry-content .sku-chip .swatch {width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--steel);
  border: 1px solid rgba(0,0,0,0.10);}
.bgctx-catalog .entry-content .sku-chip:hover {border-color: var(--slate); background: var(--paper); color: var(--ink);}
.bgctx-catalog .entry-content .sw-yellow {background: #f1c40f;}
.bgctx-catalog .entry-content .sw-green {background: #4caf6f;}
.bgctx-catalog .entry-content .sw-silver {background: #c4cdd6;}
.bgctx-catalog .entry-content .sw-red {background: #c0392b;}
.bgctx-catalog .entry-content .sw-orange {background: #e67e22;}
.bgctx-catalog .entry-content .sw-peach {background: #ffb98a;}
.bgctx-catalog .entry-content .sw-blue {background: #5a8ec7;}
.bgctx-catalog .entry-content .sw-purple {background: #8e44ad;}
.bgctx-catalog .entry-content .sw-neutral {background: #d8d2c4;}
.bgctx-catalog .entry-content .sw-black {background: #1a232f;}
.bgctx-catalog .entry-content .sw-white {background: #f7f9fc; border-color: var(--line-strong);}
.bgctx-catalog .entry-content .line-card-foot {margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;}
.bgctx-catalog .entry-content .line-card-view {font-family: var(--f-mono);
  font-size:15px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;}
.bgctx-catalog .entry-content .line-card-view .arrow {transition: transform 0.2s;}
.bgctx-catalog .entry-content .line-card:hover .line-card-view .arrow {transform: translateX(4px);}
.bgctx-catalog .entry-content .line-card-spec {font-family: var(--f-mono);
  font-size:14px;
  color: var(--steel);
  letter-spacing: 0.04em;}
.bgctx-catalog .entry-content .application-note {background: var(--ink);
  color: var(--powder);
  border-top: 4px solid var(--steel);}
.bgctx-catalog .entry-content .application-note-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 56px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;}
.bgctx-catalog .entry-content .application-note .pill {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  background: var(--steel);
  color: var(--paper);
  padding: 8px 14px;
  font-weight: 600;
  white-space: nowrap;}
.bgctx-catalog .entry-content .application-note .body {font-size: 18px;
  line-height: 1.55;
  color: var(--powder);}
.bgctx-catalog .entry-content .application-note .body strong {color: var(--paper); font-weight: 600;}
.bgctx-catalog .entry-content .application-note a.btn {background: var(--paper); color: var(--ink);}
.bgctx-catalog .entry-content .application-note a.btn:hover {background: var(--steel); color: var(--paper);}
@media (max-width: 1024px) {
  .bgctx-catalog .entry-content .category-head, .bgctx-catalog .entry-content .line-grid, .bgctx-catalog .entry-content .footer-top, .bgctx-catalog .entry-content .dual-cta {grid-template-columns: 1fr !important;}
  .bgctx-catalog .entry-content .line-card {border-right: none;}
  .bgctx-catalog .entry-content .line-card:nth-last-child(2):nth-child(odd) {border-bottom: 1px solid var(--line-strong);}
  .bgctx-catalog .entry-content .application-note-inner {grid-template-columns: 1fr; gap: 24px;}
  .bgctx-catalog .entry-content .category {padding: 64px 0;}
  .bgctx-catalog .entry-content .cat-nav {position: static;}
  .bgctx-catalog .entry-content .cat-nav-inner {gap: 0;}
  .bgctx-catalog .entry-content .cat-nav .count {display: none;}
}
@media (max-width: 640px) {
  .bgctx-catalog .entry-content .line-card-body {grid-template-columns: 1fr; gap: 18px;}
  .bgctx-catalog .entry-content .line-card-thumb {height: 120px;}
  .bgctx-catalog .entry-content .line-card {padding: 26px 22px 24px;}
  .bgctx-catalog .entry-content .page-header-inner {padding: 32px 24px 48px;}
}
.bgctx-catalog .entry-content .blog-section {background: var(--paper); padding: 96px 0;}
.bgctx-catalog .entry-content .blog-section-inner {max-width: 1320px; margin: 0 auto; padding: 0 32px;}
.bgctx-catalog .entry-content .blog-section-head {margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1.5px solid var(--slate);}
.bgctx-catalog .entry-content .blog-section-title {font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 4.6vw, 64px); line-height: 0.95; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 8px;}
.bgctx-catalog .entry-content .blog-section-meta {font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600;}
.bgctx-catalog .entry-content .blog-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;}
.bgctx-catalog .entry-content .blog-card {display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); transition: border-color 0.18s ease, transform 0.18s ease;}
.bgctx-catalog .entry-content .blog-card:hover {border-color: var(--slate); transform: translateY(-3px);}
.bgctx-catalog .entry-content .blog-card .media {aspect-ratio: 16/10; border-bottom: 1px solid var(--line); overflow: hidden;}
.bgctx-catalog .entry-content .blog-card .media img {width: 100%; height: 100%; object-fit: cover; display: block;}
.bgctx-catalog .entry-content .blog-card .body {padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1;}
.bgctx-catalog .entry-content .blog-card .meta {font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600; margin-bottom: 14px; display: flex; gap: 12px; align-items: center;}
.bgctx-catalog .entry-content .blog-card .meta .dot {color: var(--line-strong);}
.bgctx-catalog .entry-content .blog-card h3 {font-family: var(--f-display); font-size: 28px; line-height: 1; color: var(--ink); margin-bottom: 14px; font-weight: 400; letter-spacing: 0.005em;}
.bgctx-catalog .entry-content .blog-card p {color: var(--slate); font-size: 16px; line-height: 1.55; margin-bottom: 24px;}
.bgctx-catalog .entry-content .blog-card .read {margin-top: auto; font-family: var(--f-mono); font-size:14px; letter-spacing: 0.08em; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px;}
.bgctx-catalog .entry-content .blog-card:hover .read .arrow {transform: translateX(4px);}
.bgctx-catalog .entry-content .blog-card .read .arrow {transition: transform 0.2s;}
@media (max-width: 1024px) {
  .bgctx-catalog .entry-content .blog-grid {grid-template-columns: 1fr;}
}

/* ---- TYPE ARCHIVES (product_type) ---- */
.bgctx-typearchive .entry-content .btn {display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; font-family: var(--f-mono); font-size: 16px; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; border: none; transition: all 0.15s ease; white-space: nowrap; line-height: 1;}
.bgctx-typearchive .entry-content .btn-primary {background: var(--slate); color: var(--paper);}
.bgctx-typearchive .entry-content .btn-primary:hover {background: var(--ink);}
.bgctx-typearchive .entry-content .btn-ghost {background: transparent; color: var(--slate); border: 1px solid var(--line-strong);}
.bgctx-typearchive .entry-content .btn-ghost:hover {background: var(--slate); color: var(--paper); border-color: var(--slate);}
.bgctx-typearchive .entry-content .btn .arrow {transition: transform 0.2s;}
.bgctx-typearchive .entry-content .btn:hover .arrow {transform: translateX(4px);}
.bgctx-typearchive .entry-content .page-header {position: relative;
  background: var(--powder);
  border-bottom: 1px solid var(--line);
  overflow: hidden;}
.bgctx-typearchive .entry-content .page-header::before {content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(52,64,78,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,64,78,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  pointer-events: none;}
.bgctx-typearchive .entry-content .page-header-inner {position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 44px 32px 64px;}
.bgctx-typearchive .entry-content .breadcrumb {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 500;}
.bgctx-typearchive .entry-content .breadcrumb a:hover {color: var(--ink);}
.bgctx-typearchive .entry-content .breadcrumb .sep {color: var(--steel-2);}
.bgctx-typearchive .entry-content .breadcrumb .here {color: var(--ink); font-weight: 600;}
.bgctx-typearchive .entry-content .page-kicker {display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--slate);
  margin-bottom: 22px;}
.bgctx-typearchive .entry-content .page-kicker .dot {width: 10px; height: 10px; background: var(--steel); border-radius: 50%; box-shadow: 0 0 0 5px rgba(78,107,140,0.22);}
.bgctx-typearchive .entry-content .page-title-grid {display: grid;
  grid-template-columns: 1.3fr 0.85fr;
  gap: 64px;
  align-items: end;}
.bgctx-typearchive .entry-content .page-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 92px);
  line-height: 0.95;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 26px;}
.bgctx-typearchive .entry-content .page-title .accent {color: var(--steel);}
.bgctx-typearchive .entry-content .page-lede {font-size: 19px;
  line-height: 1.55;
  color: var(--slate);
  max-width: 680px;}
.bgctx-typearchive .entry-content .page-lede strong {color: var(--ink); font-weight: 600;}
.bgctx-typearchive .entry-content .cat-stats {background: var(--paper);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--steel);}
.bgctx-typearchive .entry-content .cat-stats-row {display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);}
.bgctx-typearchive .entry-content .cat-stats-row:last-child {border-bottom: none;}
.bgctx-typearchive .entry-content .cat-stats-cell {padding: 18px 22px;
  font-family: var(--f-mono);
  font-size:16px;}
.bgctx-typearchive .entry-content .cat-stats-cell:first-child {border-right: 1px solid var(--line);
  color: var(--steel);
  letter-spacing: 0.10em;
  font-weight: 600;}
.bgctx-typearchive .entry-content .cat-stats-cell:last-child {color: var(--ink);
  font-weight: 600;
  font-size:15px;
  letter-spacing: 0.04em;}
.bgctx-typearchive .entry-content .sub-nav {background: var(--ink);
  border-bottom: 3px solid var(--steel);
  position: sticky;
  top: 109px;
  z-index: 90;}
.bgctx-typearchive .entry-content .sub-nav-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: stretch;
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  font-weight: 600;
  flex-wrap: wrap;}
.bgctx-typearchive .entry-content .sub-nav-label {padding: 18px 24px 18px 0;
  color: var(--steel-2);
  border-right: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  gap: 12px;}
.bgctx-typearchive .entry-content .sub-nav-label .arrow-down {color: var(--steel);}
.bgctx-typearchive .entry-content .sub-nav a {color: var(--powder);
  padding: 18px 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-right: 1px solid rgba(255,255,255,0.10);
  transition: background 0.15s ease, color 0.15s ease;}
.bgctx-typearchive .entry-content .sub-nav a:hover {background: var(--slate); color: var(--paper);}
.bgctx-typearchive .entry-content .sub-nav a .num {color: var(--steel-2); font-weight: 500;}
.bgctx-typearchive .entry-content .mechanism {padding: 96px 0 80px;
  background: var(--paper);
  scroll-margin-top: 175px;}
.bgctx-typearchive .entry-content .mechanism-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;}
.bgctx-typearchive .entry-content .section-head {display: block;
  margin-bottom: 56px;
  padding-bottom: 28px;
  border-bottom: 1.5px solid var(--slate);}
.bgctx-typearchive .entry-content .section-meta {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--slate);
  font-weight: 600;
  margin-bottom: 16px;}
.bgctx-typearchive .entry-content .section-meta .num {display: block;
  font-family: var(--f-display);
  font-size: 56px;
  color: var(--steel);
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 12px;}
.bgctx-typearchive .entry-content .section-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 16px;}
.bgctx-typearchive .entry-content .section-blurb {color: var(--slate);
  font-size: 17px;
  line-height: 1.55;
  max-width: 680px;}
.bgctx-typearchive .entry-content .mech-grid {display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--paper);
  border: 1px solid var(--line-strong);}
.bgctx-typearchive .entry-content .mech-card {padding: 36px 32px 32px;
  border-right: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 16px;}
.bgctx-typearchive .entry-content .mech-card:last-child {border-right: none;}
.bgctx-typearchive .entry-content .mech-num {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--steel);}
.bgctx-typearchive .entry-content .mech-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.005em;}
.bgctx-typearchive .entry-content .mech-desc {font-size: 16px;
  line-height: 1.55;
  color: var(--slate);}
.bgctx-typearchive .entry-content .mech-tags {display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;}
.bgctx-typearchive .entry-content .mech-tag {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 6px 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--slate);}
.bgctx-typearchive .entry-content .catalog {padding: 96px 0 64px;
  background: var(--paper-2);
  scroll-margin-top: 175px;}
.bgctx-typearchive .entry-content .catalog-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;}
.bgctx-typearchive .entry-content .brand-line {background: var(--paper);
  border: 1px solid var(--line-strong);
  margin-bottom: 32px;}
.bgctx-typearchive .entry-content .brand-line-head {padding: 28px 32px;
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 28px;
  align-items: center;
  border-bottom: 1px solid var(--line);}
.bgctx-typearchive .entry-content .brand-line-thumb {aspect-ratio: 4/3;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: 14px;}
.bgctx-typearchive .entry-content .brand-line-thumb img {max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;}
.bgctx-typearchive .entry-content .brand-line-meta {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--steel);
  margin-bottom: 8px;}
.bgctx-typearchive .entry-content .brand-line-name {font-family: var(--f-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 6px;}
.bgctx-typearchive .entry-content .brand-line-desc {font-size:16px;
  color: var(--slate);
  line-height: 1.5;
  max-width: 720px;}
.bgctx-typearchive .entry-content .brand-line-stats {display: flex;
  gap: 32px;
  font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.06em;
  color: var(--steel);
  font-weight: 500;
  align-self: end;
  white-space: nowrap;}
.bgctx-typearchive .entry-content .brand-line-stats .em {color: var(--ink); font-weight: 700; font-size:16px;}
.bgctx-typearchive .entry-content .sku-grid {display: grid;
  grid-template-columns: repeat(4, 1fr);}
.bgctx-typearchive .entry-content .sku-card {padding: 24px 22px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.15s ease;
  cursor: pointer;
  color: var(--slate);
  position: relative;}
.bgctx-typearchive .entry-content .sku-card:hover {background: var(--paper-2);}
.bgctx-typearchive .entry-content .sku-card:hover .sku-link::after {transform: translateX(4px);}
.bgctx-typearchive .entry-content .sku-card:nth-child(4n) {border-right: none;}
.bgctx-typearchive .entry-content .sku-card:nth-last-child(-n+4):not(:nth-last-child(n+5)) {border-bottom: none;}
.bgctx-typearchive .entry-content .sku-head {display: flex;
  align-items: center;
  gap: 14px;}
.bgctx-typearchive .entry-content .color-swatch {width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
  flex-shrink: 0;
  position: relative;
  background: var(--paper);}
.bgctx-typearchive .entry-content .color-swatch::before {content: "";
  position: absolute;
  inset: 2px;
  background: var(--swatch, var(--paper));}
.bgctx-typearchive .entry-content .sku-id {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--steel);}
.bgctx-typearchive .entry-content .sku-name {font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.005em;}
.bgctx-typearchive .entry-content .sku-strength {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 5px 9px;
  display: inline-block;
  align-self: flex-start;
  color: var(--paper);}
.bgctx-typearchive .entry-content .sku-strength.low {background: var(--strength-low); color: var(--ink);}
.bgctx-typearchive .entry-content .sku-strength.med {background: var(--strength-med); color: var(--ink);}
.bgctx-typearchive .entry-content .sku-strength.high {background: var(--strength-high);}
.bgctx-typearchive .entry-content .sku-strength.perm {background: var(--strength-perm);}
.bgctx-typearchive .entry-content .sku-use {font-size:16px;
  line-height: 1.5;
  color: var(--slate);}
.bgctx-typearchive .entry-content .sku-link {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--steel);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;}
.bgctx-typearchive .entry-content .sku-link::after {content: "→"; transition: transform 0.2s;}
.bgctx-typearchive .entry-content .selector {padding: 96px 0;
  background: var(--ink);
  color: var(--powder);
  scroll-margin-top: 175px;}
.bgctx-typearchive .entry-content .selector-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;}
.bgctx-typearchive .entry-content .selector-head {display: grid;
  grid-template-columns: auto 1fr;
  gap: 64px;
  margin-bottom: 56px;
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1.5px solid var(--steel);}
.bgctx-typearchive .entry-content .selector .section-meta {color: var(--steel-2);}
.bgctx-typearchive .entry-content .selector .section-meta .num {color: var(--steel);}
.bgctx-typearchive .entry-content .selector .section-title {color: var(--paper);}
.bgctx-typearchive .entry-content .selector .section-blurb {color: var(--powder); opacity: 0.85;}
.bgctx-typearchive .entry-content .selector-table {background: var(--slate-2);
  border: 1px solid rgba(255,255,255,0.12);}
.bgctx-typearchive .entry-content .selector-row {display: grid;
  grid-template-columns: 200px 1fr 1.3fr 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.10);}
.bgctx-typearchive .entry-content .selector-row.head {background: var(--ink);
  border-bottom: 2px solid var(--steel);}
.bgctx-typearchive .entry-content .selector-row.head > div {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.10em;
  color: var(--steel-2);
  font-weight: 600;
  padding: 18px 22px;}
.bgctx-typearchive .entry-content .selector-row:last-child {border-bottom: none;}
.bgctx-typearchive .entry-content .selector-row > div {padding: 22px;}
.bgctx-typearchive .entry-content .selector-row > div + div {border-left: 1px solid rgba(255,255,255,0.08);}
.bgctx-typearchive .entry-content .sel-chip {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 6px 10px;
  display: inline-block;}
.bgctx-typearchive .entry-content .sel-chip.low {background: var(--strength-low); color: var(--ink);}
.bgctx-typearchive .entry-content .sel-chip.med {background: var(--strength-med); color: var(--ink);}
.bgctx-typearchive .entry-content .sel-chip.high {background: var(--strength-high); color: var(--paper);}
.bgctx-typearchive .entry-content .sel-chip.perm {background: var(--paper); color: var(--ink);}
.bgctx-typearchive .entry-content .sel-cell-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--paper);
  margin-bottom: 6px;
  line-height: 1.1;}
.bgctx-typearchive .entry-content .sel-cell-detail {font-size:16px;
  color: var(--powder);
  opacity: 0.78;
  line-height: 1.5;}
.bgctx-typearchive .entry-content .sel-pick {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.06em;
  color: var(--steel-2);
  line-height: 1.5;}
.bgctx-typearchive .entry-content .sel-pick em {font-style: normal; color: var(--paper); font-weight: 600;}
.bgctx-typearchive .entry-content .spec-cross {padding: 96px 0;
  background: var(--paper);
  scroll-margin-top: 175px;}
.bgctx-typearchive .entry-content .spec-cross-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;}
.bgctx-typearchive .entry-content .spec-grid {display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line-strong);}
.bgctx-typearchive .entry-content .spec-card {padding: 32px 28px;
  border-right: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 18px;}
.bgctx-typearchive .entry-content .spec-card:last-child {border-right: none;}
.bgctx-typearchive .entry-content .spec-card-label {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--steel);}
.bgctx-typearchive .entry-content .spec-card-eg {font-family: var(--f-mono);
  font-size:16px;
  color: var(--ink);
  line-height: 1.7;}
.bgctx-typearchive .entry-content .spec-card-eg .em {background: var(--powder); padding: 2px 6px; font-weight: 600;}
.bgctx-typearchive .entry-content .spec-card-cta {font-family: var(--f-mono);
  font-size:14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  gap: 8px;}
.bgctx-typearchive .entry-content .spec-card-cta::after {content: "→";}
.bgctx-typearchive .entry-content .pick-block {padding: 96px 0;
  background: var(--powder);
  scroll-margin-top: 175px;}
.bgctx-typearchive .entry-content .pick-block-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;}
.bgctx-typearchive .entry-content .pick-content h2 {font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 0.95;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 22px;}
.bgctx-typearchive .entry-content .pick-content p {font-size: 17px;
  line-height: 1.6;
  color: var(--slate);
  margin-bottom: 28px;
  max-width: 540px;}
.bgctx-typearchive .entry-content .pick-actions {display: flex; gap: 14px; flex-wrap: wrap;}
.bgctx-typearchive .entry-content .pick-checklist {background: var(--paper);
  border: 1px solid var(--line-strong);
  padding: 36px 32px;}
.bgctx-typearchive .entry-content .pick-checklist :is(h3,h4) {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.12em;
  color: var(--steel);
  font-weight: 700;
  margin-bottom: 20px;}
.bgctx-typearchive .entry-content .pick-checklist ul {list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;}
.bgctx-typearchive .entry-content .pick-checklist li {display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size:16px;
  color: var(--slate);
  line-height: 1.5;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);}
.bgctx-typearchive .entry-content .pick-checklist li:last-child {padding-bottom: 0; border-bottom: none;}
.bgctx-typearchive .entry-content .pick-checklist li::before {content: "→";
  color: var(--steel);
  font-weight: 700;
  font-family: var(--f-mono);}
.bgctx-typearchive .entry-content .pick-checklist li strong {color: var(--ink); font-weight: 600;}
@media (max-width: 1024px) {
  .bgctx-typearchive .entry-content .page-title-grid, .bgctx-typearchive .entry-content .section-head, .bgctx-typearchive .entry-content .pick-block-inner, .bgctx-typearchive .entry-content .footer-top, .bgctx-typearchive .entry-content .dual-cta {grid-template-columns: 1fr !important; gap: 32px !important;}
  .bgctx-typearchive .entry-content .selector-row {grid-template-columns: 130px 1fr;}
  .bgctx-typearchive .entry-content .selector-row.head > div:nth-child(3), .bgctx-typearchive .entry-content .selector-row.head > div:nth-child(4), .bgctx-typearchive .entry-content .selector-row > div:nth-child(3), .bgctx-typearchive .entry-content .selector-row > div:nth-child(4) {display: none;}
  .bgctx-typearchive .entry-content .sub-nav {position: static;}
  .bgctx-typearchive .entry-content .mech-grid, .bgctx-typearchive .entry-content .spec-grid {grid-template-columns: 1fr;}
  .bgctx-typearchive .entry-content .mech-card {border-right: none; border-bottom: 1px solid var(--line-strong);}
  .bgctx-typearchive .entry-content .mech-card:last-child {border-bottom: none;}
  .bgctx-typearchive .entry-content .spec-card {border-right: none; border-bottom: 1px solid var(--line-strong);}
  .bgctx-typearchive .entry-content .spec-card:last-child {border-bottom: none;}
}
@media (max-width: 768px) {
  .bgctx-typearchive .entry-content .sku-grid {grid-template-columns: repeat(2, 1fr);}
  .bgctx-typearchive .entry-content .sku-card:nth-child(4n) {border-right: 1px solid var(--line);}
  .bgctx-typearchive .entry-content .sku-card:nth-child(2n) {border-right: none;}
  .bgctx-typearchive .entry-content .sku-card:nth-last-child(-n+4):not(:nth-last-child(n+5)) {border-bottom: 1px solid var(--line);}
  .bgctx-typearchive .entry-content .sku-card:last-child {border-bottom: none;}
  .bgctx-typearchive .entry-content .sku-card:nth-last-child(2):nth-child(odd) {border-bottom: none;}
  .bgctx-typearchive .entry-content .brand-line-head {grid-template-columns: 1fr;}
  .bgctx-typearchive .entry-content .brand-line-thumb {max-width: 220px;}
  .bgctx-typearchive .entry-content .page-header-inner {padding: 32px 24px 48px;}
}
@media (max-width: 560px) {
  .bgctx-typearchive .entry-content .sku-grid {grid-template-columns: 1fr;}
  .bgctx-typearchive .entry-content .sku-card {border-right: none !important;}
  .bgctx-typearchive .entry-content .cat-stats-row {grid-template-columns: 1fr;}
  .bgctx-typearchive .entry-content .cat-stats-cell:first-child {border-right: none; border-bottom: 1px solid var(--line);}
}
.bgctx-typearchive .entry-content .blog-section {background: var(--paper); padding: 96px 0;}
.bgctx-typearchive .entry-content .blog-section-inner {max-width: 1320px; margin: 0 auto; padding: 0 32px;}
.bgctx-typearchive .entry-content .blog-section-head {margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1.5px solid var(--slate);}
.bgctx-typearchive .entry-content .blog-section-title {font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 4.6vw, 64px); line-height: 0.95; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 8px;}
.bgctx-typearchive .entry-content .blog-section-meta {font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600;}
.bgctx-typearchive .entry-content .blog-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;}
.bgctx-typearchive .entry-content .blog-card {display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); transition: border-color 0.18s ease, transform 0.18s ease;}
.bgctx-typearchive .entry-content .blog-card:hover {border-color: var(--slate); transform: translateY(-3px);}
.bgctx-typearchive .entry-content .blog-card .media {aspect-ratio: 16/10; border-bottom: 1px solid var(--line); overflow: hidden;}
.bgctx-typearchive .entry-content .blog-card .media img {width: 100%; height: 100%; object-fit: cover; display: block;}
.bgctx-typearchive .entry-content .blog-card .body {padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1;}
.bgctx-typearchive .entry-content .blog-card .meta {font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600; margin-bottom: 14px; display: flex; gap: 12px; align-items: center;}
.bgctx-typearchive .entry-content .blog-card .meta .dot {color: var(--line-strong);}
.bgctx-typearchive .entry-content .blog-card h3 {font-family: var(--f-display); font-size: 28px; line-height: 1; color: var(--ink); margin-bottom: 14px; font-weight: 400; letter-spacing: 0.005em;}
.bgctx-typearchive .entry-content .blog-card p {color: var(--slate); font-size: 16px; line-height: 1.55; margin-bottom: 24px;}
.bgctx-typearchive .entry-content .blog-card .read {margin-top: auto; font-family: var(--f-mono); font-size:14px; letter-spacing: 0.08em; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px;}
.bgctx-typearchive .entry-content .blog-card:hover .read .arrow {transform: translateX(4px);}
.bgctx-typearchive .entry-content .blog-card .read .arrow {transition: transform 0.2s;}
@media (max-width: 1024px) {
  .bgctx-typearchive .entry-content .blog-grid {grid-template-columns: 1fr;}
}

/* ---- Product strength palette (was in template :root; needed by PDP/type chips) ---- */
:root {
  --strength-low:  #b8c4d2;
  --strength-med:  #f4c542;
  --strength-high: #c14b3b;
  --strength-perm: #2a3340;
}

/* specs-grid collides with the homepage .specs-grid (display:grid); the PDP
 * version is a plain stacked container — restore block layout. */
.bgctx-product .entry-content .specs-grid { display: block; }

/* .spec-row collides with a homepage/grid rule adding padding:18px 22px +
 * border-right. The PDP spec-row has padding only on its inner cells. */
.bgctx-product .entry-content .spec-row { padding: 0; border-right: none; }

/* ---- TS/Other type-page additions: no-thumb head + type/neutral strength chips ---- */
.bgctx-typearchive .entry-content .brand-line-head.no-thumb {grid-template-columns: 1fr auto;}
.bgctx-typearchive .entry-content .sku-strength.type {background: var(--steel); color: var(--paper);}
.bgctx-typearchive .entry-content .sku-strength.neutral {background: var(--slate); color: var(--paper);}
@media (max-width:768px) {
  .bgctx-typearchive .entry-content .brand-line-head.no-thumb {grid-template-columns: 1fr;}
}

/* ===========================================================================
   Manufacturer-specs cross-reference live results (injected by
   bg-bradley/js/specs-search.js into .search-card). Page-scoped to id 144.
   Reuses the template's .match-table / .match-row styling for the result grid;
   these rules cover the results header, link/notes, and empty/loading states.
   =========================================================================== */
body.page-id-144 .search-card .xref-results { padding: 0 36px 34px; }
body.page-id-144 .search-card .xref-results:empty { padding: 0; }
body.page-id-144 .xref-results-head { font-family: var(--f-mono, 'IBM Plex Sans', system-ui, sans-serif); font-size:14px; font-weight: 700; letter-spacing: 0.12em; color: #a8bcd1; text-transform: uppercase; margin: 6px 0 14px; }
body.page-id-144 .xref-results .xref-table { margin-top: 4px; }
body.page-id-144 .xref-results .match-product a.xref-prod { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(52,64,78,0.32); transition: border-color 0.15s ease, color 0.15s ease; }
body.page-id-144 .xref-results .match-product a.xref-prod:hover { color: #4e6b8c; border-bottom-color: #4e6b8c; }
body.page-id-144 .xref-results .match-product a.xref-prod strong { color: #1a232f; font-weight: 600; }
body.page-id-144 .xref-results .xref-sep { color: #4e6b8c; }
body.page-id-144 .xref-results .xref-notes { color: #4e6b8c; }
body.page-id-144 .xref-results .xref-noprod { color: #4e6b8c; font-style: italic; }
body.page-id-144 .xref-empty,
body.page-id-144 .xref-loading { font-family: var(--f-mono, 'IBM Plex Sans', system-ui, sans-serif); font-size:16px; line-height: 1.5; color: #deeaf7; background: #2a3340; border: 1px solid #4e6b8c; padding: 18px 22px; }
body.page-id-144 .xref-empty strong { color: #ffffff; }
body.page-id-144 .xref-loading { color: #a8bcd1; }

/* xref results table must stretch to the card width: inside .search-card the
   .match-table was shrinking to ~2px (auto width in the group flow) while its
   inner overflowed invisibly. Force full width; inner keeps its 760px min. */
body.page-id-144 .xref-results .match-table { display: block; width: 100%; }
body.page-id-144 .xref-results .match-table-inner { width: 100%; }

/* Real root cause: .search-card is display:grid and the original widget content
   lives in a display:contents inner-container, so its children are the grid
   items. The JS-injected .xref-results is itself a direct grid item that got
   sized to ~72px. Make it span the full grid row and take full width so the
   results table can lay out. */
body.page-id-144 .search-card .xref-results { grid-column: 1 / -1; width: 100%; }

/* Keep product link names from breaking mid-token (e.g. "PRECOTE-30"). */
body.page-id-144 .xref-results .match-product a.xref-prod { display: inline-block; white-space: nowrap; }
body.page-id-144 .xref-results .match-product { flex-wrap: wrap; gap: 2px 0; }

/* ---- PDP hero shipping note (task #22: George's lead-time/freight copy) ---- */
.hero-ship-note {
    margin: 12px 0 0;
    max-width: 52ch;
    font-size:13px;
    line-height: 1.5;
    color: var(--steel-2, #5a6b7d);
    letter-spacing: 0.01em;
}

/* ---- Link/button hover: Mai a:hover adds an unwanted underline site-wide and recolors.
   Kill the hover-underline globally via Mai own variable (explicit-underline links like
   .prose a / .faq-a a keep theirs through their own text-decoration:underline). Keep primary
   buttons white text on hover (variant buttons that flip to a light bg set their own color). */
body{--link-text-decoration-hover:none;}
.btn-primary{--link-color-hover:var(--paper);}
.btn-ghost{--link-color-hover:var(--paper);}

/* =============================================================
   HOME PAGE FIXES (orchestrated) — appended, page-scoped.
   1) Breathing room under the "Cross-reference, fast." lede.
   2) Home cross-ref search results container (reuses .match-* / .xref-*).
   3) "From the workshop floor." dynamic blog cards (reuse .blog-card markup).
   ============================================================= */

/* (1) Gap between the specs-content lede paragraph and the .search-cluster.
   The live DOM nests the lede as .specs-content > inner-container > p, so the
   pre-existing `.specs-content > p` rule never matched. Match the template's
   36px gap. Scoped to the home page only. */
.bgctx-home .specs-section .specs-content > .wp-block-group__inner-container > p:not(.search-input):not(.search-btn) {
  margin-bottom: 36px;
}

/* (2) Home inline cross-reference results. The home search is rendered as
   .search-input / .search-btn paragraphs; bg-home.js swaps in a real input and
   appends .xref-results below the .search-cluster. Reuse the specs-page result
   styling (.match-* / .xref-*) but constrain to the home column width. */
.bgctx-home .search-cluster .xref-results { margin-top: 18px; }
.bgctx-home .search-cluster .match-table { background: var(--paper); border: 1px solid var(--line-strong); border-top: 3px solid var(--steel); overflow-x: auto; }
.bgctx-home .search-cluster .match-table-inner { display: grid; grid-template-columns: 110px 1.1fr 1.1fr 0.7fr; min-width: 0; }
.bgctx-home .search-cluster .match-row { display: contents; }
.bgctx-home .search-cluster .match-row > div { padding: 12px 14px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); display: flex; align-items: center; }
.bgctx-home .search-cluster .match-row > div:last-child { border-right: none; }
.bgctx-home .search-cluster .match-row.head > div { background: var(--ink); color: var(--steel-2); font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.10em; border-right-color: rgba(255,255,255,0.10); border-bottom-color: var(--steel); }
.bgctx-home .search-cluster .match-row:last-child > div { border-bottom: none; }
.bgctx-home .search-cluster .match-row:nth-child(even):not(.head) > div { background: var(--paper-2); }
.bgctx-home .search-cluster .match-agency { font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.10em; color: var(--steel); }
.bgctx-home .search-cluster .match-spec { font-family: var(--f-mono); font-size:13px; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }
.bgctx-home .search-cluster .match-product { font-size:16px; color: var(--slate); flex-wrap: wrap; }
.bgctx-home .search-cluster .match-product a.xref-prod { color: var(--ink); text-decoration: none; }
.bgctx-home .search-cluster .match-product a.xref-prod:hover { color: var(--steel); text-decoration: underline; }
.bgctx-home .search-cluster .match-product strong { color: inherit; font-weight: 600; }
.bgctx-home .search-cluster .match-status { font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.08em; padding: 3px 7px; }
.bgctx-home .search-cluster .match-status.confirmed { background: var(--ink); color: var(--paper); }
.bgctx-home .search-cluster .match-status.review { background: var(--powder); color: var(--ink); }
.bgctx-home .search-cluster .xref-results-head { font-family: var(--f-mono); font-size:13px; font-weight: 700; letter-spacing: 0.08em; color: var(--slate); margin-bottom: 8px; }
.bgctx-home .search-cluster .xref-empty,
.bgctx-home .search-cluster .xref-loading { font-family: var(--f-mono); font-size:16px; color: var(--slate); line-height: 1.5; padding: 10px 0; }
.bgctx-home .search-cluster .xref-notes { color: var(--steel-2); font-size:16px; }
.bgctx-home .search-cluster .xref-sep { color: var(--line-strong); }
.bgctx-home .search-cluster .xref-noprod { color: var(--steel-2); font-size:16px; }

/* (3) Dynamic blog cards on the home page are emitted as raw .blog-card markup
   (no Mai inner-container) by the [bg_home_posts] shortcode. The existing
   .blog-card rules style them; these few rules cover the raw (non-block) image
   wrapper + the whole-card stretch link, matching the blog-index card behavior. */
.bgctx-home .blog-grid .blog-card { position: relative; }
.bgctx-home .blog-grid .blog-card .media { aspect-ratio: 16/10; border-bottom: 1px solid var(--line); overflow: hidden; }
.bgctx-home .blog-grid .blog-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bgctx-home .blog-grid .blog-card .media.no-img { background: var(--paper-2); }
.bgctx-home .blog-grid .blog-card .stretch-link { position: absolute; inset: 0; margin: 0; padding: 0; font-size: 0; line-height: 0; z-index: 2; }
.bgctx-home .blog-grid .blog-card .stretch-link a { position: absolute; inset: 0; display: block; }
.bgctx-home .blog-grid .blog-card .read { position: relative; z-index: 3; }

/* =========================================================================
 * PRODUCT PDP / LINE-PAGE fixes (appended) — gallery + line landing.
 * ========================================================================= */

/* Real gallery: thumbs are now <button>s. Reset UA chrome and size the row to
 * the actual number of photos (2 or 3) instead of a fixed 4-column grid. */
.bgctx-product .entry-content .thumb-row[data-pdp-gallery] {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  justify-content: start;
}
.bgctx-product .entry-content button.thumb {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  min-width: 0;
}
.bgctx-product .entry-content button.thumb:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 2px;
}

/* Line landing page: keep the hero image area tidy when only the line image
 * (or nothing) is present — no thumb strip is rendered for line pages. */

/* =========================================================================
 * LINE LANDING PAGE — reuse the type-archive SKU-card grid styling on the
 * single-product line page (.bgctx-product). Mirrors the
 * .bgctx-typearchive rules so the .sku-card grid renders as cards.
 * ========================================================================= */
.bgctx-product .entry-content .brand-line {background: var(--paper);
  border: 1px solid var(--line-strong);
  margin-bottom: 32px;}
.bgctx-product .entry-content .sku-grid {display: grid;
  grid-template-columns: repeat(4, 1fr);}
.bgctx-product .entry-content .sku-card {padding: 24px 22px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.15s ease;
  cursor: pointer;
  color: var(--slate);
  position: relative;}
.bgctx-product .entry-content .sku-card:hover {background: var(--paper-2);}
.bgctx-product .entry-content .sku-card:hover .sku-link::after {transform: translateX(4px);}
.bgctx-product .entry-content .sku-card:nth-child(4n) {border-right: none;}
.bgctx-product .entry-content .sku-card:nth-last-child(-n+4):not(:nth-last-child(n+5)) {border-bottom: none;}
.bgctx-product .entry-content .sku-head {display: flex;
  align-items: center;
  gap: 14px;}
.bgctx-product .entry-content .sku-grid .color-swatch {width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
  flex-shrink: 0;
  position: relative;
  background: var(--paper);}
.bgctx-product .entry-content .sku-grid .color-swatch::before {content: "";
  position: absolute;
  inset: 2px;
  background: var(--swatch, var(--paper));}
.bgctx-product .entry-content .sku-id {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--steel);}
.bgctx-product .entry-content .sku-name {font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.005em;}
.bgctx-product .entry-content .sku-strength {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 5px 9px;
  display: inline-block;
  align-self: flex-start;
  color: var(--paper);}
.bgctx-product .entry-content .sku-strength.low {background: var(--strength-low); color: var(--ink);}
.bgctx-product .entry-content .sku-strength.med {background: var(--strength-med); color: var(--ink);}
.bgctx-product .entry-content .sku-strength.high {background: var(--strength-high);}
.bgctx-product .entry-content .sku-strength.perm {background: var(--strength-perm);}
.bgctx-product .entry-content .sku-use {font-size:16px;
  line-height: 1.5;
  color: var(--slate);}
.bgctx-product .entry-content .sku-link {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--steel);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;}
.bgctx-product .entry-content .sku-link::after {content: "→"; transition: transform 0.2s;}

@media (max-width: 1024px) {
  .bgctx-product .entry-content .sku-grid {grid-template-columns: repeat(2, 1fr) !important;}
  .bgctx-product .entry-content .sku-card:nth-child(4n) {border-right: 1px solid var(--line);}
  .bgctx-product .entry-content .sku-card:nth-child(2n) {border-right: none;}
}
@media (max-width: 600px) {
  .bgctx-product .entry-content .sku-grid {grid-template-columns: 1fr !important;}
  .bgctx-product .entry-content .sku-card {border-right: none !important;}
}

/* ===========================================================================
 * PDP restored sections — Manufacturer Specs + Typical Applications.
 * Appended (do not edit/delete rules above). Both reuse existing chrome; these
 * rules only add the small deltas: anchor behaviour on the spec rows, the
 * stacked spec cell, and the applications list. Scoped to single products.
 * ========================================================================= */

/* Manufacturer Specs rows are now links into the cross-reference tool. */
.bgctx-product .entry-content .crossref-list-row.mfr-spec-row {
  text-decoration: none;
  align-items: stretch;
  transition: background 0.15s ease;
}
.bgctx-product .entry-content .crossref-list-row.mfr-spec-row:hover {
  background: rgba(255,255,255,0.05);
}
.bgctx-product .entry-content .mfr-spec-row .agency {
  display: flex;
  align-items: center;
}
/* The spec cell stacks designation / manufacturer / note vertically. */
.bgctx-product .entry-content .mfr-spec-row .specs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  letter-spacing: 0;
}
.bgctx-product .entry-content .mfr-spec-row .mfr-spec-desig {
  font-family: var(--f-mono);
  font-size:14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--paper);
}
.bgctx-product .entry-content .mfr-spec-row .mfr-spec-sub {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--steel-2);
  font-weight: 600;
  text-transform: uppercase;
}
.bgctx-product .entry-content .mfr-spec-row .mfr-spec-note {
  font-family: var(--f-sans, inherit);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--powder);
  opacity: 0.72;
  letter-spacing: 0;
}

/* Typical Applications — lead paragraph reuses .overview-prose; the list is a
 * simple two-column ticked list consistent with the spec-at-a-glance chrome. */
.bgctx-product .entry-content .app-prose .app-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
}
.bgctx-product .entry-content .app-prose .app-list li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.4;
  color: var(--slate);
}
.bgctx-product .entry-content .app-prose .app-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 18px;
  width: 9px;
  height: 9px;
  background: var(--steel);
  transform: rotate(45deg);
}
@media (max-width: 760px) {
  .bgctx-product .entry-content .app-prose .app-list {
    grid-template-columns: 1fr;
  }
}

/* ---- Imported-catalog neutral strength chip (CSV strength word unknown) ---- */
:root { --strength-neutral: #b8c4d2; }

/* ---- PDP Manufacturer Specs from the `mfr_spec` taxonomy ----
 * Replaces the old flat .crossref-list rows on the dark .crossref-block panel.
 * Manufacturer (parent) heading -> its spec designations as chips/links.
 * .mfr-spec-cols switches to a tidy multi-column layout for big lists (52+). */
.bgctx-product .entry-content .mfr-spec-groups {
  background: var(--slate-2, #20303f);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 12px 8px;
  /* Two-column layout for the maker/designation list; no scroll — the panel
   * grows to fit its content so nothing is hidden behind a scrollbar. */
  column-count: 2;
  column-gap: 0;
}
.bgctx-product .entry-content .mfr-spec-groups.mfr-spec-cols {
  column-count: 2;
  column-gap: 0;
  padding: 12px 8px;
}
@media (max-width: 1100px) {
  .bgctx-product .entry-content .mfr-spec-groups,
  .bgctx-product .entry-content .mfr-spec-groups.mfr-spec-cols { column-count: 1; }
}
.bgctx-product .entry-content .mfr-spec-group {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding: 12px 18px 14px;
}
.bgctx-product .entry-content .mfr-spec-maker {
  font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.10em;
  color: var(--steel-2);
  font-weight: 700;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.bgctx-product .entry-content .mfr-spec-desigs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bgctx-product .entry-content .mfr-spec-desigs li { margin: 0; }
.bgctx-product .entry-content .mfr-spec-desigs a {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--paper);
  font-weight: 500;
  text-decoration: none;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 3px;
  background: rgba(255,255,255,0.03);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.bgctx-product .entry-content .mfr-spec-desigs a:hover {
  background: var(--steel, #3c5870);
  border-color: var(--steel, #3c5870);
  color: var(--paper);
}

/* =========================================================================
 * STRUCTURAL FIXES (home + product pages) — appended
 * ========================================================================= */

/* --- Fix 3: catalog line-card is no longer a wrapping anchor. SKU chips and
 *     the foot 'View Product Line' are now the only links. Keep their look. --- */
.bgctx-catalog .entry-content .line-card { cursor: default; }
.bgctx-catalog .entry-content a.sku-chip { text-decoration: none; }
.bgctx-catalog .entry-content a.line-card-view { text-decoration: none; cursor: pointer; }
.bgctx-catalog .entry-content a.line-card-view:hover { color: var(--steel); }
.bgctx-catalog .entry-content a.line-card-view:hover .arrow { transform: translateX(4px); }

/* --- Fix 4: hide any stray Genesis/Mai taxonomy archive title above the hero
 *     on product_type archives (the designed hero already carries the H1). --- */
.bgctx-typearchive .archive-title,
.bgctx-typearchive h1.entry-title,
.bgctx-typearchive .archive-description .entry-title,
.bgctx-typearchive .taxonomy-archive-description .archive-title { display: none !important; }

/* --- Fix 5: brand-line page — breadcrumb now lives INSIDE the hero (.hero-left).
 *     Give it sensible spacing within the powder hero. --- */
.bgctx-product .entry-content .hero .hero-breadcrumb {
  margin-bottom: 22px;
  font-size:16px;
  color: var(--steel);
}
.bgctx-product .entry-content .hero .hero-breadcrumb a:hover { color: var(--ink); }
.bgctx-product .entry-content .hero .hero-breadcrumb .sep { color: var(--steel-2); }
.bgctx-product .entry-content .hero .hero-breadcrumb .here { color: var(--ink); font-weight: 600; }

/* =========================================================================
 * Fix 2: 'From the workshop floor.' now lives globally in the before-footer
 * template part as a Mai Post Grid. Style the Mai grid entries to match the
 * original workshop-floor card design (bordered paper cards: image, display
 * title, steel excerpt, mono read-more). Scoped to .workshop-floor.
 * ========================================================================= */
.workshop-floor .mai-grid { margin: 0; }
.workshop-floor .entries-wrap.has-columns { --row-gap: 32px; }
.workshop-floor .entry.entry-grid {
  background: var(--paper);
  border: 1px solid var(--line);
  transition: border-color 0.18s ease, transform 0.18s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.workshop-floor .entry.entry-grid:hover { border-color: var(--slate); transform: translateY(-3px); }
.workshop-floor .entry .entry-image-link { display: block; aspect-ratio: 16/10; overflow: hidden; border-bottom: 1px solid var(--line); }
.workshop-floor .entry img.entry-image { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.workshop-floor .entry .entry-wrap-grid { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.workshop-floor .entry .entry-title {
  font-family: var(--f-display);
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.005em;
  font-weight: 400;
  margin: 0 0 12px;
}
.workshop-floor .entry .entry-title a { color: var(--ink); text-decoration: none; }
.workshop-floor .entry .entry-title a:hover { color: var(--steel); }
.workshop-floor .entry .entry-excerpt { color: var(--slate); font-size:16px; line-height: 1.55; margin: 0 0 18px; }
.workshop-floor .entry .entry-excerpt p { margin: 0; }
.workshop-floor .entry .entry-more { margin-top: auto; }
.workshop-floor .entry .entry-more-link.button {
  font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: none;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
}
.workshop-floor .entry .entry-more-link.button:hover { color: var(--steel); background: none; }
@media (max-width: 1024px) {
  .workshop-floor .entries-wrap.has-columns .entry.entry-grid { --columns-md: 1/1; }
}

/* ===========================================================================
 * Search upgrades: typeahead autocomplete dropdown (.bg-ac-*) shared by all
 * search boxes, and the products-catalog AJAX search results (.bg-ps-*).
 * Appended for the search fix/upgrade work. Append-only.
 * ========================================================================= */

/* --- Autocomplete dropdown (shared) --- */
.bg-ac-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--slate);
  box-shadow: 0 14px 32px rgba(26, 35, 47, 0.16);
  font-family: var(--f-mono);
}
.bg-ac-menu[hidden] { display: none; }
.bg-ac-item {
  padding: 11px 16px;
  font-size:16px;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bg-ac-item:last-child { border-bottom: none; }
.bg-ac-item.is-active,
.bg-ac-item:hover {
  background: var(--slate);
  color: var(--paper);
}

/* Menu width tracks the input within the specs grid field and the catalog
 * flex row (JS sets position:relative on the immediate parent). */
.search-row .bg-ac-menu,
.search-field .bg-ac-menu { left: 0; right: 0; }

/* --- Products catalog AJAX search results (/products/) --- */
.bgctx-catalog .entry-content .bg-prodsearch-results { margin-top: 22px; }
.bgctx-catalog .entry-content .bg-ps-head {
  font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 14px;
}
.bgctx-catalog .entry-content .bg-ps-head strong { color: var(--ink); }
.bgctx-catalog .entry-content .bg-ps-loading,
.bgctx-catalog .entry-content .bg-ps-empty {
  font-family: var(--f-mono);
  font-size:16px;
  color: var(--slate);
  padding: 18px 0;
}
.bgctx-catalog .entry-content .bg-ps-empty a { color: var(--steel); text-decoration: underline; }
.bgctx-catalog .entry-content .bg-ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  border: 1px solid var(--line-strong);
}
.bgctx-catalog .entry-content .bg-ps-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s ease;
}
.bgctx-catalog .entry-content .bg-ps-card:hover { background: var(--paper-2); }
.bgctx-catalog .entry-content .bg-ps-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.bgctx-catalog .entry-content .bg-ps-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bgctx-catalog .entry-content .bg-ps-thumb-empty { background: var(--paper-2); }
.bgctx-catalog .entry-content .bg-ps-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bgctx-catalog .entry-content .bg-ps-meta {
  font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--slate);
}
.bgctx-catalog .entry-content .bg-ps-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bgctx-catalog .entry-content .bg-ps-arrow {
  flex: 0 0 auto;
  color: var(--steel);
  font-size: 18px;
  transition: transform 0.15s ease;
}
.bgctx-catalog .entry-content .bg-ps-card:hover .bg-ps-arrow { transform: translateX(3px); }

/* =========================================================================
 * Fix 3 (home): "Engineering support, on call." — more bottom padding.
 * The WP .engineer section's inner .section uses the global 96px vertical
 * padding, leaving it ~90px shorter than the template's roomier bottom.
 * Page-scoped to .bgctx-home so other pages keep the shared .section padding.
 * ========================================================================= */
.bgctx-home .engineer .section { padding-bottom: 150px; }

/* =========================================================================
 * Fix 4 (global chrome): "From the workshop floor." Mai Post Grid restored
 * design details + container alignment. The section lives in the before-footer
 * template part, whose Mai content-width caps the group inner-container at
 * 1200px and left-shifts it; re-expand it so the section's 1320px container
 * matches the rest of the site, and style the restored header-meta line and
 * the "Read article" link arrow to match the static template's blog cards.
 * ========================================================================= */

/* Alignment: let the before-footer workshop section break the Mai content cap
 * so .blog-section-inner can center at the site's 1320px container. */
.workshop-floor > .wp-block-group__inner-container {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.workshop-floor .blog-section-inner { margin-left: auto; margin-right: auto; }

/* Per-card header meta line: "<Category> · <N> min read" (mono, steel). */
.workshop-floor .entry .entry-meta-before-content {
  font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--steel);
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  text-transform: none;
}
.workshop-floor .entry .entry-meta-before-content .entry-categories,
.workshop-floor .entry .entry-meta-before-content .entry-categories a {
  color: var(--steel);
  text-decoration: none;
  font-weight: 600;
}
.workshop-floor .entry .entry-meta-before-content .entry-categories a:hover { color: var(--ink); }
.workshop-floor .entry .entry-meta-before-content .dot { color: var(--line-strong); }

/* "Read article" gets the template's trailing arrow. */
.workshop-floor .entry .entry-more-link.button::after {
  content: " \2192";
  transition: transform 0.2s;
  display: inline-block;
}
.workshop-floor .entry .entry-more-link.button:hover::after { transform: translateX(4px); }

/* Fix 4 (cont.): the Mai content-width cap (max-width:1200px) is applied to
 * EVERY group inner-container inside the before-footer part, including the ones
 * nested under .blog-section-inner. Reset them all so the head + card grid fill
 * the centered 1320px container instead of an off-center 1200px column. */
.workshop-floor .wp-block-group__inner-container {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.workshop-floor .blog-section-inner { max-width: 1320px; margin-left: auto; margin-right: auto; }

/* ============================================================
 * FIX #5 — Type-archive "Specified by OEM number, not by name?"
 * crossref-block layout. The .crossref-block / .crossref-list
 * rules were scoped ONLY to .bgctx-product, so on the
 * type archives (.bgctx-typearchive) the same reused markup
 * fell back to unstyled display:block (no grid, no borders, no
 * dark card). Re-scope the identical rules to the type archive.
 * ============================================================ */
.bgctx-typearchive .entry-content .crossref-block {background: var(--ink);
  color: var(--powder);
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: center;}
.bgctx-typearchive .entry-content .crossref-block h3 {font-family: var(--f-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  color: var(--paper);
  margin-bottom: 16px;
  letter-spacing: -0.005em;}
.bgctx-typearchive .entry-content .crossref-block p {color: var(--powder);
  opacity: 0.85;
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 20px;}
.bgctx-typearchive .entry-content .crossref-block .btn-primary {background: var(--steel);}
.bgctx-typearchive .entry-content .crossref-block .btn-primary:hover {background: var(--paper); color: var(--ink);}
.bgctx-typearchive .entry-content .crossref-list {background: var(--slate-2);
  border: 1px solid rgba(255,255,255,0.14);}
.bgctx-typearchive .entry-content .crossref-list-row {display: grid;
  grid-template-columns: 160px 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.10);}
.bgctx-typearchive .entry-content .crossref-list-row:last-child {border-bottom: none;}
.bgctx-typearchive .entry-content .crossref-list-row > div {padding: 16px 22px;}
.bgctx-typearchive .entry-content .crossref-list-row .agency {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.10em;
  color: var(--steel-2);
  font-weight: 700;
  border-right: 1px solid rgba(255,255,255,0.10);}
.bgctx-typearchive .entry-content .crossref-list-row .specs {font-family: var(--f-mono);
  font-size:14px;
  color: var(--paper);
  font-weight: 500;
  letter-spacing: 0.04em;}
@media (max-width: 1100px) {
  .bgctx-typearchive .entry-content .crossref-block {grid-template-columns: 1fr; gap: 32px; padding: 40px 28px;}
}

/* User request: every type-archive SKU card keeps a bottom border (override the template's last-row :nth-last-child border-bottom:none so partial rows like ND Series 5-cards don't look unfinished) */
.bgctx-typearchive .entry-content .sku-card{border-bottom:1px solid var(--line)!important;}

/* =========================================================================
 * PDP hero fixes (orchestrated, append-only): gallery thumb size, shipping
 * note color/width, and hero breadcrumb spacing for SKU PDPs.
 * ========================================================================= */

/* Fix 2: hero gallery thumbnail buttons — 150px wide, zero padding. Keep the
 * click-to-swap behavior + active/hover border states intact (those rules are
 * untouched); only size + padding change here. The row no longer stretches
 * thumbs to fill the column, so each is a fixed 150px square. The inner <img>
 * keeps max-width/height:70% so the photo still fits inside the box. */
.bgctx-product .entry-content .thumb-row[data-pdp-gallery] {
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, 150px);
  justify-content: start;
}
.bgctx-product .entry-content button.thumb {
  width: 150px;
  padding: 0;
}

/* Fix 3: hero shipping note — dark-blue (brand ink) text, full width of its
 * parent (.hero-left), not truncated to a narrow measure. */
.bgctx-product .entry-content .hero-ship-note {
  color: var(--ink);
  max-width: none;
  width: 100%;
}

/* Fix 1 support: the SKU-PDP breadcrumb now lives at the top of .hero-left
 * (matching the brand-line hero). It reuses the existing .hero .hero-breadcrumb
 * rule already in this file; this just guarantees it sits flush at the top with
 * no residual gap from the removed .crumb-bar strip. */
.bgctx-product .entry-content .hero .hero-breadcrumb {
  margin-top: 0;
}

/* Fix (page-id-144): VALIDATION CYCLE / trust-stats column must fill the full
 * width of the .trust-stats grid track so each .trust-stat reaches the right
 * edge of the content container (matches the static template). On WP the Mai
 * block-group default collapsed the grid column to content width and centered
 * it (grid-template-columns sized to content + justify-content:center), leaving
 * the stats inset from the right edge. Force a single full-width column. */
body.page-id-144 .trust-stats{
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
}
body.page-id-144 .trust-stats > .trust-stat{
  width: 100% !important;
}
/* Each stat cell is a 1fr grid track (taller than its content); center the
 * k/v/detail stack vertically so it sits mid-cell, not pinned to the top.
 * Use a descendant combinator (not `>`) because Mai nests the paragraphs in a
 * flattened .wp-block-group__inner-container, so `.trust-stats > .trust-stat`
 * does not match. */
body.page-id-144 .trust-stats .trust-stat{
  justify-content: center !important;
}

/* ============================================================
   ABOUT / RESOURCES page fixes — appended 2026-06-12
   ============================================================ */

/* FIX #2 — "A service company. By design." service-comparison columns.
   Mai's flex group layout vertically centres the card content
   (justify-content:center) so the shorter column floats to the middle.
   The template anchors content to the top. Top-align the columns.
   Component-level (shared with Careers), so applied globally to the class. */
.what-card{justify-content:flex-start;}

/* FIX #4 — About (page 134) "Documentation as table stakes."
   The quality-content column is inset 56px from the container's left edge
   (padding-left on .quality-content). Align it to the same left edge as the
   rest of the page's container content. Page-scoped. */
body.page-id-134 .quality-content{padding-left:0;}

/* FIX #5 — ISO cert (140) & REACH-RoHS (141) main text section bleeding to the
   far left edge. The section is alignfull (full-bleed) but, unlike the other
   content pages, has no .section-inner wrapper — its inner-container is
   display:contents, so the .prose runs to viewport x=0. Re-create the centred
   1320px container by padding the alignfull section so its content lines up
   with the rest of the site (32px inset inside a max-1320 centred zone).
   Page-scoped to the two resource pages. */
body.page-id-140 .alignfull.section,
body.page-id-141 .alignfull.section{
  padding-left:max(32px, calc((100% - 1320px) / 2 + 32px))!important;
  padding-right:max(32px, calc((100% - 1320px) / 2 + 32px))!important;
}

/* FIX #3 — About (page 134) "The chemistries we apply." cards link to the
   matching product-type archive. Blocks-only stretched link: an absolutely
   positioned anchor covers the whole card so the entire card is clickable
   while keeping the card markup intact. Page-scoped. */
body.page-id-134 .partner-card{position:relative;}
body.page-id-134 .partner-card .card-link{position:absolute;inset:0;z-index:2;text-indent:-9999px;overflow:hidden;white-space:nowrap;}
body.page-id-134 .partner-card .card-link:focus-visible{outline:2px solid var(--steel);outline-offset:-2px;}
body.page-id-134 .partner-card{cursor:pointer;transition:border-color .15s ease, box-shadow .15s ease;}
body.page-id-134 .partner-card:hover{box-shadow:0 6px 18px rgba(26,35,47,0.10);}

/* === FAQ page (133): map RankMath FAQ block onto the original .faq-grid/.faq-item design ===
   The Q&A list was converted from custom .faq-item blocks to rank-math/faq-block.
   RankMath renders #rank-math-faq.rank-math-block > .rank-math-list > .rank-math-list-item
   > h3.rank-math-question + div.rank-math-answer. These rules reproduce the previous
   static (non-accordion) card look. Scoped to page-id-133. faq-tag pills removed in content. */
body.page-id-133 .rank-math-block{background: var(--paper); border: 1px solid var(--line-strong); border-top: 3px solid var(--steel);}
body.page-id-133 .faq-section.alt .rank-math-block{background: var(--paper);}
body.page-id-133 .rank-math-list{margin: 0; padding: 0; list-style: none;}
body.page-id-133 .rank-math-list-item{padding: 32px 36px; border-bottom: 1px solid var(--line); list-style: none;}
body.page-id-133 .rank-math-list-item:last-child{border-bottom: none;}
body.page-id-133 .rank-math-question{font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--ink); letter-spacing: -0.005em; margin: 0 0 14px;}
body.page-id-133 .rank-math-answer{font-size: 16px; line-height: 1.6; color: var(--slate);}
body.page-id-133 .rank-math-answer p{margin: 0; font-size: 16px; line-height: 1.6; color: var(--slate);}
body.page-id-133 .rank-math-answer p + p{margin-top: 12px;}
body.page-id-133 .rank-math-answer strong{color: var(--ink); font-weight: 600;}
body.page-id-133 .rank-math-answer a{color: var(--steel); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;}
body.page-id-133 .rank-math-answer a:hover{color: var(--ink); text-decoration-color: var(--ink);}
@media (max-width: 640px){
body.page-id-133 .rank-math-list-item{padding: 24px 22px;}
}

/* ===========================================================================
 * BLOG INDEX + CATEGORY/TAG/AUTHOR ARCHIVES (data-driven render: bg-blog.php)
 * Scoped to the body classes added by bg-blog.php so other pages are untouched.
 * ======================================================================== */

/* FIX 1 — Hero alignment. Mai wraps our .page-header section in a centered
 * page-header-wrap; force the hero content left like every other page hero. */
body.bg-blog-index .page-header-inner,
body.bg-blog-archive .page-header-inner,
body.bg-blog-index .page-header,
body.bg-blog-archive .page-header,
body.bg-blog-index .page-header-wrap,
body.bg-blog-archive .page-header-wrap { text-align: left !important; }
body.bg-blog-index .page-header-inner > *,
body.bg-blog-archive .page-header-inner > * { margin-left: 0; margin-right: 0; }
body.bg-blog-index .breadcrumb,
body.bg-blog-archive .breadcrumb { justify-content: flex-start; }

/* Our archive markup lives in .entry-content; neutralise the archive entry's
 * centered text and default max-width so the full-bleed sections behave. */
body.bg-blog-index .entry-content,
body.bg-blog-archive .entry-content { text-align: left; max-width: none; }
body.bg-blog-index .bg-blog-entry,
body.bg-blog-archive .bg-blog-entry { border: 0; padding: 0; margin: 0; }

/* FIX 3 — post-card category tag: small mono pill; white text on dark variants.
 * (Base size 10px already defined; reassert here in case an .entry-content
 *  paragraph/inline rule inflates it in this context, and lock variant colors.) */
body.bg-blog-index .post-tag,
body.bg-blog-archive .post-tag { font-size:13px; line-height: 1; padding: 5px 8px; letter-spacing: 0.12em; }
body.bg-blog-index .post-tag.brief, body.bg-blog-archive .post-tag.brief,
body.bg-blog-index .post-tag.case,  body.bg-blog-archive .post-tag.case { color: var(--paper); }
body.bg-blog-index .post-tag.note, body.bg-blog-archive .post-tag.note,
body.bg-blog-index .post-tag.dist, body.bg-blog-archive .post-tag.dist { color: var(--ink); }

/* FIX 4 — pagination links. paginate_links() emits a.page-numbers /
 * span.page-numbers.current / span.dots; we tag each with .page-link. Map the
 * core classes onto the template's pill styling. */
body.bg-blog-index .pagination a,
body.bg-blog-archive .pagination a,
body.bg-blog-index .pagination span,
body.bg-blog-archive .pagination span {
  width: 44px; height: 44px; border: 1px solid var(--line-strong);
  display: grid; place-items: center; font-family: var(--f-mono);
  font-size:16px; font-weight: 600; color: var(--slate); margin: 0;
  text-decoration: none; transition: all 0.15s ease;
}
body.bg-blog-index .pagination a:hover,
body.bg-blog-archive .pagination a:hover {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
body.bg-blog-index .pagination .current,
body.bg-blog-archive .pagination .current {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
body.bg-blog-index .pagination .prev,
body.bg-blog-archive .pagination .prev,
body.bg-blog-index .pagination .next,
body.bg-blog-archive .pagination .next { width: auto; padding: 0 18px; letter-spacing: 0.08em; }
body.bg-blog-index .pagination .dots,
body.bg-blog-archive .pagination .dots { border: 0; }

/* FIX 5 — subscribe form is now a real <form> with real input/button. Style the
 * native controls to the template (the .subscribe-* paragraph rules above were
 * for the old static markup). */
body.bg-blog-index .subscribe-form label,
body.bg-blog-archive .subscribe-form label { font-family: var(--f-mono); font-size:13px; letter-spacing: 0.12em; color: var(--steel-2); font-weight: 700; }
body.bg-blog-index .subscribe-form input,
body.bg-blog-archive .subscribe-form input { padding: 16px 18px; background: var(--ink); border: 1px solid var(--steel); color: var(--paper); font-family: var(--f-body); font-size: 16px; width: 100%; }
body.bg-blog-index .subscribe-form input::placeholder,
body.bg-blog-archive .subscribe-form input::placeholder { color: var(--steel-2); }
body.bg-blog-index .subscribe-form button,
body.bg-blog-archive .subscribe-form button { padding: 16px 22px; background: var(--steel); color: var(--paper); border: none; font-family: var(--f-mono); font-size:14px; font-weight: 700; letter-spacing: 0.10em; cursor: pointer; transition: background 0.15s ease; width: 100%; }
body.bg-blog-index .subscribe-form button:hover,
body.bg-blog-archive .subscribe-form button:hover { background: var(--paper); color: var(--ink); }
body.bg-blog-index .subscribe-ok,
body.bg-blog-archive .subscribe-ok { font-family: var(--f-mono); font-size:16px; color: var(--steel-2); margin: 0; }

/* Empty-state for sparse categories. */
body.bg-blog-archive .posts-empty { grid-column: 1 / -1; font-family: var(--f-mono); color: var(--steel); font-size:16px; }

/* Mai renders its own (empty/duplicate) page-header + .page-header-title "Blog"
 * for the posts page / archives; our designed hero (.page-header.alignfull inside
 * .entry-content) is the real one. Hide Mai's duplicate title so there is a single
 * visible H1. Scoped to our blog/archive body classes. */
body.bg-blog-index .page-header-wrap > .page-header-title,
body.bg-blog-archive .page-header-wrap > .page-header-title { display: none !important; }

/* ============================================================
   CONTACT PAGE (post 136) — Forminator forms mapped to the
   template's .form-side / .field design. Appended 2026-06.
   Scoped to body.page-id-136. Vars come from the template:
   --paper #fff  --paper-2 #f7f9fc  --ink #1a232f  --slate #34404e
   --slate-2 #2a3340  --steel #4e6b8c  --steel-2 #a8bcd1
   --powder #deeaf7  --line-strong rgba(52,64,78,0.32)
   ============================================================ */

/* Forminator form container = the template .form-side (left column padding/stack) */
.forminator-ui.forminator-custom-form {
  padding: 48px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}
/* Rows = .field-row : even 2/3 col grid with 18px gap, no Forminator side padding */
.forminator-ui.forminator-custom-form .forminator-row {
  display: flex;
  gap: 18px;
  margin-bottom: 0 !important;
}
.forminator-ui.forminator-custom-form .forminator-row .forminator-col {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 0 !important;
}
/* Each field cell = .field : label-over-input stack with 8px gap */
.forminator-ui.forminator-custom-form .forminator-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Labels = .field label : uppercase mono, steel */
.forminator-ui.forminator-custom-form .forminator-label,
body.page-id-136 .form-card label.forminator-label {
  font-family: var(--f-mono, 'IBM Plex Sans', system-ui, sans-serif);
  font-size:14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4e6b8c;
  margin: 0 0 0 0;
  line-height: 1.2;
}
.forminator-ui.forminator-custom-form .forminator-required,
.forminator-ui.forminator-custom-form .forminator-label .forminator-required {
  color: #4e6b8c;
}

/* Inputs / selects / textareas = .field input,select,textarea */
.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea,
body.page-id-136 .form-card select.forminator-select2,
.forminator-ui.forminator-custom-form .forminator-select,
.forminator-ui.forminator-custom-form .forminator-field input,
.forminator-ui.forminator-custom-form .forminator-field textarea,
.forminator-ui.forminator-custom-form .forminator-field select {
  font-family: var(--f-body, 'IBM Plex Sans', system-ui, sans-serif);
  font-size: 16px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(52,64,78,0.32);
  border-radius: 0;
  color: #1a232f;
  width: 100%;
  box-shadow: none;
  height: auto;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.forminator-ui.forminator-custom-form .forminator-textarea,
.forminator-ui.forminator-custom-form .forminator-field textarea {
  min-height: 120px;
  resize: vertical;
}
/* Focus = steel border + soft ring */
.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus,
.forminator-ui.forminator-custom-form .forminator-field input:focus,
.forminator-ui.forminator-custom-form .forminator-field textarea:focus,
.forminator-ui.forminator-custom-form .forminator-field select:focus {
  outline: none;
  border-color: #4e6b8c;
  box-shadow: 0 0 0 3px rgba(78,107,140,0.18);
}

/* Select arrow chrome: keep native-ish, match input box */
.forminator-ui.forminator-custom-form .forminator-field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%2012%208%27%3E%3Cpath%20fill%3D%27%2334404e%27%20d%3D%27M1.4%200L6%204.6%2010.6%200%2012%201.4%206%207.4%200%201.4z%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Field description = .field-help : uppercase mono 11px steel */
.forminator-ui.forminator-custom-form .forminator-description {
  font-family: var(--f-mono, 'IBM Plex Sans', system-ui, sans-serif);
  font-size:14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4e6b8c;
  margin: 2px 0 0 0;
}

/* Submit = .btn.btn-block : full-width ink bar, mono, hover steel */
.forminator-ui.forminator-custom-form .forminator-button-submit,
body.page-id-136 .form-card button.forminator-button-submit {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--f-mono, 'IBM Plex Sans', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 18px 24px;
  background: #1a232f;
  color: #ffffff;
  border: none;
  border-radius: 0;
  text-transform: none;
  transition: background 0.15s ease;
  margin-top: 0;
}
.forminator-ui.forminator-custom-form .forminator-button-submit:hover {
  background: #4e6b8c;
}
/* Submit wrapper row shouldn't add Forminator's default top margin */
.forminator-ui.forminator-custom-form .forminator-row.forminator-row-last,
.forminator-ui.forminator-custom-form .forminator-pagination-footer {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Validation message colours stay readable on light card */
.forminator-ui.forminator-custom-form .forminator-label--error,
.forminator-ui.forminator-custom-form .forminator-error-message {
  font-family: var(--f-mono, 'IBM Plex Sans', system-ui, sans-serif);
  letter-spacing: 0.04em;
}

/* ---------- DARK GENERAL FORM (#general .form-section.dark) ---------- */
body.page-id-136 .form-section.dark .form-card .forminator-label,
body.page-id-136 .form-section.dark .form-card .forminator-required,
body.page-id-136 .form-section.dark .form-card .forminator-description {
  color: #a8bcd1;
}
body.page-id-136 .form-section.dark .form-card .forminator-input,
body.page-id-136 .form-section.dark .form-card .forminator-textarea,
body.page-id-136 .form-section.dark .form-card .forminator-field input,
body.page-id-136 .form-section.dark .form-card .forminator-field textarea,
body.page-id-136 .form-section.dark .form-card .forminator-field select {
  background: #1a232f;
  border-color: rgba(255,255,255,0.14);
  color: #ffffff;
}
body.page-id-136 .form-section.dark .form-card .forminator-input::placeholder,
body.page-id-136 .form-section.dark .form-card .forminator-textarea::placeholder {
  color: #a8bcd1;
}
body.page-id-136 .form-section.dark .form-card .forminator-field select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%2012%208%27%3E%3Cpath%20fill%3D%27%23a8bcd1%27%20d%3D%27M1.4%200L6%204.6%2010.6%200%2012%201.4%206%207.4%200%201.4z%27%2F%3E%3C%2Fsvg%3E");
}
body.page-id-136 .form-section.dark .form-card .forminator-input:focus,
body.page-id-136 .form-section.dark .form-card .forminator-textarea:focus,
body.page-id-136 .form-section.dark .form-card .forminator-field select:focus {
  border-color: #4e6b8c;
  box-shadow: 0 0 0 3px rgba(78,107,140,0.30);
}

/* ---------- Select2 widget = make it look like a .field input box ---------- */
.forminator-ui.forminator-custom-form .forminator-field .select2-container--default .select2-selection--single {
  height: auto;
  min-height: 52px;
  border: 1px solid rgba(52,64,78,0.32);
  border-radius: 0;
  background: #ffffff;
}
.forminator-ui.forminator-custom-form .forminator-field .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: var(--f-body, 'IBM Plex Sans', system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.4;
  color: #1a232f;
  padding: 14px 40px 14px 16px;
}
.forminator-ui.forminator-custom-form .forminator-field .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 50px;
  right: 12px;
}
.forminator-ui.forminator-custom-form .forminator-field .select2-container--default.select2-container--focus .select2-selection--single,
.forminator-ui.forminator-custom-form .forminator-field .select2-container--default.select2-container--open .select2-selection--single {
  border-color: #4e6b8c;
  box-shadow: 0 0 0 3px rgba(78,107,140,0.18);
}
.forminator-ui.forminator-custom-form .forminator-field .select2-container { width: 100% !important; }

/* Dropdown options panel */
body.page-id-136 .form-card .select2-dropdown,
.select2-dropdown.forminator-select-dropdown {
  border: 1px solid rgba(52,64,78,0.32);
  border-radius: 0;
}

/* Dark form: select2 box on ink */
body.page-id-136 .form-section.dark .form-card .forminator-field .select2-container--default .select2-selection--single {
  background: #1a232f;
  border-color: rgba(255,255,255,0.14);
}
body.page-id-136 .form-section.dark .form-card .forminator-field .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #ffffff;
}

/* ---------- Select2 fix: actual container class is
   ".select2-container.forminator-select" (no --default modifier).
   Re-map the widget to the .field input box. ---------- */
.forminator-ui.forminator-custom-form .forminator-field .select2-container.forminator-select .select2-selection--single {
  height: auto !important;
  min-height: 52px;
  border: 1px solid rgba(52,64,78,0.32) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
}
.forminator-ui.forminator-custom-form .forminator-field .select2-container.forminator-select .select2-selection--single .select2-selection__rendered {
  font-family: var(--f-body, 'IBM Plex Sans', system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.4;
  color: #1a232f !important;
  padding: 14px 40px 14px 16px;
}
.forminator-ui.forminator-custom-form .forminator-field .select2-container.forminator-select .select2-selection--single .select2-selection__arrow {
  height: 50px;
  right: 12px;
}
.forminator-ui.forminator-custom-form .forminator-field .select2-container.forminator-select.select2-container--focus .select2-selection--single,
.forminator-ui.forminator-custom-form .forminator-field .select2-container.forminator-select.select2-container--open .select2-selection--single {
  border-color: #4e6b8c !important;
  box-shadow: 0 0 0 3px rgba(78,107,140,0.18);
}
.forminator-ui.forminator-custom-form .forminator-field .select2-container.forminator-select { width: 100% !important; }

/* Dark general form: ink select2 box + light text */
body.page-id-136 .form-section.dark .form-card .forminator-field .select2-container.forminator-select .select2-selection--single {
  background: #1a232f !important;
  border-color: rgba(255,255,255,0.14) !important;
}
body.page-id-136 .form-section.dark .form-card .forminator-field .select2-container.forminator-select .select2-selection--single .select2-selection__rendered {
  color: #ffffff !important;
}

/* ---- User request: no drop-caps anywhere. Reset the four authored ::first-letter rules
   (same selectors re-declared later = they win) plus a site-wide belt. ---- */
.story-prose p:first-child::first-letter,
.article-body-inner > p:first-of-type::first-letter,
.bgctx-post .article-body-inner > .wp-block-group__inner-container > p:first-of-type::first-letter,
.bgctx-product .entry-content .overview-prose p:first-child::first-letter{
  font-family:inherit;font-size:inherit;float:none;line-height:inherit;margin:0;color:inherit;font-weight:inherit;padding:0;
}
body ::first-letter{float:none!important;font-size:inherit!important;}

/* ---- User request: no margin on .entry-header on product pages ---- */
.bgctx-product .entry-header,
.bgctx-catalog .entry-header,
.bgctx-typearchive .entry-header{margin:0!important;}

/* ---- Contact forms: spacing corrections (Forminator's own CSS loads after site.css and
   was beating the earlier rules — these are !important-ed). ---- */
/* form padding: labels were clipped against the card's top border */
.forminator-ui.forminator-custom-form .forminator-custom-form{padding:40px 36px 36px !important;box-sizing:border-box !important;}
/* rows: kill Forminator's -15px side margins; consistent vertical rhythm */
body.page-id-136 .forminator-row{margin:0 0 22px !important;display:flex !important;gap:18px !important;}
body.page-id-136 .forminator-row:last-child{margin-bottom:0 !important;}
body.page-id-136 .forminator-col{padding:0 !important;margin:0 !important;}
/* selects: match text-input height + alignment (select2 was 82px vs 41px inputs) */
body.page-id-136 .forminator-custom-form .select2-container{height:41px !important;min-height:41px !important;margin:0 !important;}
body.page-id-136 .forminator-custom-form .select2-selection{height:41px !important;min-height:41px !important;display:flex !important;align-items:center !important;box-sizing:border-box !important;}
body.page-id-136 .forminator-custom-form .select2-selection__rendered{line-height:normal !important;padding-top:0 !important;padding-bottom:0 !important;}
body.page-id-136 .forminator-custom-form .select2-selection__arrow{height:39px !important;}
/* helper text: breathing room before the next row's label */
body.page-id-136 .forminator-description{margin:6px 0 0 !important;}
/* submit: never wider than the form */
body.page-id-136 .forminator-button-submit,
body.page-id-136 button.forminator-button{width:100% !important;max-width:100% !important;margin:0 !important;box-sizing:border-box !important;}
/* dark (general) form: select matches the dark inputs, not white */
body.page-id-136 #general .select2-selection,
body.page-id-136 .form-dark .select2-selection{background:var(--ink) !important;border-color:rgba(255,255,255,0.25) !important;}
body.page-id-136 #general .select2-selection__rendered,
body.page-id-136 .form-dark .select2-selection__rendered{color:#dfe8f2 !important;}

/* dark form: the select2 wrapper chain must be dark too (a white parent box framed the select) */
body.page-id-136 #general .select2-container,
body.page-id-136 #general .forminator-field--select,
body.page-id-136 #general .forminator-select,
body.page-id-136 #general .select2,
body.page-id-136 .form-dark .select2-container{background:transparent !important;border-color:transparent !important;}
body.page-id-136 #general .select2-selection{background:var(--ink) !important;border:1px solid rgba(255,255,255,0.25) !important;}

/* ---- Videos grid: Mai justify-content:center vertically centers content in grid-stretched
   cards (space above shorter cards 1+3); top-align. Embed figure margins collapse out of the
   frame — zero them. ---- */
body.page-id-143 .vid{justify-content:flex-start !important;}
body.page-id-143 .vid .frame figure.wp-block-embed{margin:0 !important;}

/* ---- 404 page: hide Mai's default unstyled title/search (the designed 404-page content
   area renders instead); style the designed buttons row. ---- */
.bgctx-404 .entry-title,
.bgctx-404 .archive-title,
.bgctx-404 main .search-form,
.bgctx-404 .entry-content > p:first-of-type:not([class]){display:none;}
.bgctx-404 .btn-row-404{display:flex;gap:14px;flex-wrap:wrap;margin:0;}
.bgctx-404 .error-404-links.section{padding:56px 0 96px;}

/* ---- PDP hero: breadcrumb spans the full hero (above both columns incl. the photo);
   photo column top-aligns with the brand-mark row. ---- */
.bgctx-product .entry-content .hero-breadcrumb-full{grid-column:1 / -1;margin:0 0 28px;}
.bgctx-product .entry-content .hero-inner{align-items:start;}
/* summary is now an h2 — keep its body-text styling (Mai h2 would set Anton/heading size) */
.bgctx-product .entry-content h2.product-summary{font-family:var(--f-body);font-size:19px;font-weight:400;line-height:1.55;letter-spacing:normal;color:var(--slate);max-width:580px;margin:0 0 16px;text-transform:none;}

/* ---- Cross-reference widget (page 144): agency dropdown removed — re-flow the grid to
   one field + button; field and button share top alignment; more space above TRY;
   anchor/JS scroll stops with the card head fully visible below the sticky header. ---- */
body.page-id-144 .search-card > .wp-block-group__inner-container{grid-template-columns:36px 1fr auto 36px !important;}
body.page-id-144 .search-card > .wp-block-group__inner-container > .search-field:nth-of-type(1){grid-column:2 !important;}
body.page-id-144 .search-card > .wp-block-group__inner-container > .search-submit{grid-column:3 !important;align-self:stretch !important;display:flex;align-items:center;}
/* button shares the field's top: stretch it to the field row's full height minus the label
   by aligning both to the row end and matching heights */
body.page-id-144 .search-card .search-field input{height:52px;box-sizing:border-box;}
body.page-id-144 .search-card .search-submit{height:52px;box-sizing:border-box;align-self:end !important;}
/* more whitespace above the TRY row */
body.page-id-144 .search-card .search-examples{margin-top:22px !important;}
/* anchor + JS scrollIntoView land with the card fully visible (sticky header 109 + util 49) */
body.page-id-144 #cross-reference{scroll-margin-top:180px;}
body.page-id-144 .search-card{scroll-margin-top:200px;}

/* button bottom-aligns with the input (same height => same top) — must out-specific the stretch rule */
body.page-id-144 .search-card > .wp-block-group__inner-container > .search-submit{align-self:end !important;height:52px !important;display:flex;align-items:center;}

/* widget widths: input fills its 1fr column; button is content-sized */
body.page-id-144 .search-card .search-field{width:100%;}
body.page-id-144 .search-card .search-field input{width:100% !important;}
body.page-id-144 .search-card > .wp-block-group__inner-container > .search-submit{width:auto !important;padding:0 56px !important;justify-self:start;}

/* the ACTIVE grid is on .search-card (inner-container is display:contents) — re-flow IT
   for the dropdown-less layout: gutter | field(1fr) | button | gutter */
body.page-id-144 .search-card{grid-template-columns:36px 1fr auto 36px !important;}
body.page-id-144 .search-card > .wp-block-group__inner-container > .search-field,
body.page-id-144 .search-card .search-field{grid-column:2 !important;width:100% !important;}
body.page-id-144 .search-card .search-submit{grid-column:3 !important;}

/* ---- 404: scope the default-title hide to main (it was hiding the workshop-floor post
   grid titles in the before-footer); more hero top padding. ---- */
.bgctx-404 .workshop-floor .entry-title,
.bgctx-404 .workshop-floor h3{display:block !important;}
.bgctx-404 .page-header-inner{padding-top:96px !important;}
/* ---- Blog hero: more top padding ---- */
.bgctx-blog .page-header-inner,
body.archive.category .page-header-inner{padding-top:96px !important;}

/* ---- Native core/buttons authored with .btn classes: map the Gutenberg button
   link to the site's .btn appearance (solution hero CTAs etc.). ---- */
.wp-block-button.btn .wp-block-button__link{
  display:inline-flex;align-items:center;gap:12px;padding:14px 22px;
  font-family:var(--f-mono);font-size:16px;font-weight:600;letter-spacing:0.06em;
  border:none;border-radius:0;line-height:1;transition:all .15s ease;white-space:nowrap;}
.wp-block-button.btn-primary .wp-block-button__link{background:var(--slate);color:var(--paper);}
.wp-block-button.btn-primary .wp-block-button__link:hover{background:var(--ink);}
.wp-block-button.btn-ghost .wp-block-button__link{background:transparent;color:var(--slate);border:1px solid var(--line-strong);}
.wp-block-button.btn-ghost .wp-block-button__link:hover{background:var(--slate);color:var(--paper);border-color:var(--slate);}
.wp-block-buttons.hero-actions{gap:12px;margin:0;}

/* ---- Native-block solution hero: groups default to flex-column under Mai, but the
   meta rows must be horizontal. Restore row direction + reset paragraph margins. ---- */
.bgctx-product .entry-content .wp-block-group.hero-meta,
.bgctx-product .entry-content .wp-block-group.hero-meta-row{flex-direction:row !important;align-items:center;}
.bgctx-product .entry-content .hero-meta > p,
.bgctx-product .entry-content .hero-meta-row > p{margin:0;}
.bgctx-product .entry-content .wp-block-group.product-stage{position:relative;display:block !important;}

/* ---- Native-block product specs: the generic .wp-block-group accommodations force
   specs-grid->grid and spec-row->block, which is the OPPOSITE of the product layout.
   Restore: specs-grid = block stack, spec-row = 3-col grid; cells are now <p> not <div>. ---- */
.bgctx-product .entry-content .wp-block-group.specs-grid{display:block !important;}
.bgctx-product .entry-content .wp-block-group.spec-row{display:grid !important;grid-template-columns:280px 1fr 1.1fr;}
.bgctx-product .entry-content .spec-row > p{padding:22px 28px;margin:0;}
.bgctx-product .entry-content .spec-row > p + p{border-left:1px solid var(--line);}

/* ---- Fixes: hero meta left-aligned; spec cell padding (cells live in the group
   inner-container so target by class); related-card short description. ---- */
.bgctx-product .entry-content .wp-block-group.hero-meta,
.bgctx-product .entry-content .wp-block-group.hero-meta-row{justify-content:flex-start !important;}
.bgctx-product .entry-content .spec-row .spec-key,
.bgctx-product .entry-content .spec-row .spec-val,
.bgctx-product .entry-content .spec-row .spec-note{padding:22px 28px;margin:0;}
.bgctx-product .entry-content .spec-row .spec-val,
.bgctx-product .entry-content .spec-row .spec-note{border-left:1px solid var(--line);}
.bgctx-product .entry-content .rel-use{font-size:16px;line-height:1.5;color:var(--slate);margin:0;}

/* ---- hero gap + native button wrapper reset (keep .btn styling on the link only,
   not the wrapper div which also carries the .btn/.btn-ghost classes) ---- */
.bgctx-product .entry-content .hero-inner{gap:0 72px;}
.wp-block-button.btn,.wp-block-button.btn-primary,.wp-block-button.btn-ghost{padding:0 !important;border:0 !important;background:transparent !important;border-radius:0 !important;}

/* Contact select2: zero the container padding (14px border-box pad was pushing the 41px selection down and overflowing the row). */
body.page-id-136 .forminator-custom-form .select2-container{padding:0 !important;}
body.page-id-136 .forminator-custom-form .select2-container.forminator-select{padding:0 !important;}

/* Open select2 dropdown options — brand colors (was off-brand teal #097baa highlight + washed grey text). */
.select2-dropdown.forminator-select-dropdown .select2-results__option{color:#1a232f;background:#fff;}
.select2-dropdown.forminator-select-dropdown .select2-results__option--highlighted{background:#4e6b8c !important;color:#fff !important;}
.select2-dropdown.forminator-select-dropdown .select2-results__option[aria-selected="true"]{background:#deeaf7;color:#1a232f;}
.select2-dropdown.forminator-select-dropdown .select2-results__option--highlighted[aria-selected="true"]{background:#4e6b8c !important;color:#fff !important;}

/* Select2 dropdown options — target the option directly (panel ancestor class varies). */
.select2-results__option{color:#1a232f !important;background-color:#fff !important;}
.select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted){background-color:#deeaf7 !important;color:#1a232f !important;}
.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted[aria-selected="true"]{background-color:#4e6b8c !important;color:#fff !important;}

/* Overview with no prose: left-align the SPEC AT A GLANCE callout (was pushed right by the empty 1.4fr prose column). */
.bgctx-product .entry-content .overview-grid.callout-only{grid-template-columns:minmax(0,540px);}
.bgctx-product .entry-content .overview-grid.callout-only{justify-content:start !important;justify-items:start !important;}

/* Product stage: pad the image inside the corner-bracket frame so a tall (portrait) image cannot poke past the brackets. */
.bgctx-product .entry-content .wp-block-group.product-stage{padding:30px !important;box-sizing:border-box !important;}

/* Stage image: percentage max-height does not resolve against the stage aspect-ratio, so tall (portrait) images poked past the corner brackets. Fill the stage with padding + object-fit:contain so any aspect ratio sits inside the frame. */
.bgctx-product .entry-content .stage-img{max-width:none !important;max-height:none !important;width:100% !important;height:100% !important;box-sizing:border-box !important;padding:42px !important;object-fit:contain !important;}

/* Override: cap the stage image with an ABSOLUTE max-height (percentage does not resolve vs the aspect-ratio stage) so portrait images stay inside the corner-bracket frame. */
.bgctx-product .entry-content .stage-img{max-width:74% !important;max-height:320px !important;width:auto !important;height:auto !important;box-sizing:content-box !important;padding:0 !important;object-fit:contain !important;}
@media (max-width:980px){.bgctx-product .entry-content .stage-img{max-height:300px !important;}}

/* --- batch fixes 2026-06-15 pm --- */
/* Blog: more space above the breadcrumb */
.bgctx-blog .page-header-inner{padding-top:140px !important;}
/* Events: top-align hero text column with the right-column image */
body.page-id-138 .page-header-grid{align-items:start !important;}
/* Careers submit: include padding in the width so it cannot exceed its parent */
.btn-block{box-sizing:border-box !important;}
/* Related / SKU cards: a bottom border on every card, including the last row */
.bgctx-product .entry-content .rel-card{border-bottom:1px solid var(--line) !important;}
.bgctx-typearchive .entry-content .sku-card,
.bgctx-product .entry-content .sku-card{border-bottom:1px solid var(--line) !important;}

/* Careers apply: submit button is a direct grid child of .app-form-card (full 1.4fr col) while the fields are inset ~48px — width:auto + matching margins so it lines up with the fields instead of overshooting the side panel. */
body.page-id-135 .app-form-card > .btn-block{width:auto !important;margin-left:48px !important;margin-right:48px !important;justify-self:stretch !important;}
@media (max-width:760px){body.page-id-135 .app-form-card > .btn-block{margin-left:0 !important;margin-right:0 !important;}}
body.page-id-135 .app-form-card .btn-block{width:auto !important;margin-left:48px !important;margin-right:48px !important;justify-self:stretch !important;}
@media (max-width:760px){body.page-id-135 .app-form-card .btn-block{margin-left:0 !important;margin-right:0 !important;}}

/* Contact: side-panel tag-chip (e.g. "SHIP YOUR FASTENERS TO") had dark text on its dark chip -> white. */
body.page-id-136 .form-side-meta .tag-chip{color:#ffffff !important;}
/* Contact: select2 had BOTH a container and a selection 1px border (doubled/too thick) -> drop the container border, keep the selection 1px to match the inputs. */
body.page-id-136 .forminator-custom-form .select2-container{border:none !important;}

/* Fix (page-id-144): trust-stats right column has 3 stats but template is
 * repeat(4,1fr) -> empty 4th row leaves the colored stats short of the left
 * ink panel. Fill the full stretched height with 3 equal rows so the right
 * column matches the height of "Spec revisions move. So do we." */
body.page-id-144 .trust-grid .trust-stats{grid-template-rows:repeat(3,1fr) !important;}

/* For-Distributors (page-id-139): top-align the four-step boxes (Mai centers
 * flex-column content vertically in the stretched grid cells). */
body.page-id-139 .steps .step{justify-content:flex-start !important;}

/* ISO-9001 (140) & REACH/RoHS (141): body text should be full width (like Terms).
 * Base .prose caps at 820px; restore the full section content width. */
body.page-id-140 .entry-content .section .prose,
body.page-id-141 .entry-content .section .prose{
  max-width:1256px;
  margin-left:auto;
  margin-right:auto;
}

/* Restored: Dri-Loc 200 Yellow "Yellow vs Blue vs Red" comparison table (#compare). */
.bgctx-product .compare-table{margin:0;width:100%;}
.bgctx-product .compare-table table{width:100%;border-collapse:collapse;border:1px solid var(--line-strong);}
.bgctx-product .compare-table th,
.bgctx-product .compare-table td{padding:16px 20px;border:1px solid var(--line);text-align:left;font-size:16px;line-height:1.4;vertical-align:top;}
.bgctx-product .compare-table thead th{background:var(--ink);color:var(--paper);font-family:var(--f-mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;}
.bgctx-product .compare-table thead th:nth-child(2){background:var(--steel);}
.bgctx-product .compare-table tbody td:first-child{font-family:var(--f-mono);font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel);font-weight:700;background:var(--paper-2);white-space:nowrap;}
.bgctx-product .compare-table tbody td:nth-child(2){background:rgba(244,197,66,0.10);font-weight:600;color:var(--ink);}
.bgctx-product .compare-table tbody tr:nth-child(even) td:not(:first-child):not(:nth-child(2)){background:rgba(52,64,78,0.02);}
.bgctx-product .compare-table figcaption{margin-top:14px;font-size:16px;line-height:1.5;color:var(--slate);font-style:italic;text-align:left;}
@media (max-width:760px){.bgctx-product .compare-table th,.bgctx-product .compare-table td{padding:10px 12px;font-size:16px;}}


/* SOLUTIONS-PAGES RE-SCOPE v2: mirror the type-archive/catalog design CSS onto the
 * editable Solutions child pages (body.parent-pageid-492), preserving @media context. */
body.parent-pageid-492 .entry-content .btn {display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; font-family: var(--f-mono); font-size: 16px; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; border: none; transition: all 0.15s ease; white-space: nowrap; line-height: 1;}
body.parent-pageid-492 .entry-content .btn-primary {background: var(--slate); color: var(--paper);}
body.parent-pageid-492 .entry-content .btn-primary:hover {background: var(--ink);}
body.parent-pageid-492 .entry-content .btn-ghost {background: transparent; color: var(--slate); border: 1px solid var(--line-strong);}
body.parent-pageid-492 .entry-content .btn-ghost:hover {background: var(--slate); color: var(--paper); border-color: var(--slate);}
body.parent-pageid-492 .entry-content .btn .arrow {transition: transform 0.2s;}
body.parent-pageid-492 .entry-content .btn:hover .arrow {transform: translateX(4px);}
body.parent-pageid-492 .entry-content .page-header {position: relative;
  background: var(--powder);
  border-bottom: 1px solid var(--line);
  overflow: hidden;}
body.parent-pageid-492 .entry-content .page-header::before {content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(52,64,78,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,64,78,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  pointer-events: none;}
body.parent-pageid-492 .entry-content .page-header-inner {position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 44px 32px 64px;}
body.parent-pageid-492 .entry-content .breadcrumb {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 500;}
body.parent-pageid-492 .entry-content .breadcrumb a:hover {color: var(--ink);}
body.parent-pageid-492 .entry-content .breadcrumb .sep {color: var(--steel-2);}
body.parent-pageid-492 .entry-content .breadcrumb .here {color: var(--ink); font-weight: 600;}
body.parent-pageid-492 .entry-content .page-kicker {display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--slate);
  margin-bottom: 22px;}
body.parent-pageid-492 .entry-content .page-kicker .dot {width: 10px; height: 10px; background: var(--steel); border-radius: 50%; box-shadow: 0 0 0 5px rgba(78,107,140,0.22);}
body.parent-pageid-492 .entry-content .page-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 26px;}
body.parent-pageid-492 .entry-content .page-title .accent {color: var(--steel);}
body.parent-pageid-492 .entry-content .page-lede {font-size: 19px;
  line-height: 1.55;
  color: var(--slate);
  max-width: 720px;}
body.parent-pageid-492 .entry-content .page-lede strong {color: var(--ink); font-weight: 600;}
body.parent-pageid-492 .entry-content .solutions-search {margin-top: 44px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  padding: 24px 28px;
  max-width: 760px;}
body.parent-pageid-492 .entry-content .solutions-search .label {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--slate);
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  flex-wrap: wrap;
  gap: 10px;}
body.parent-pageid-492 .entry-content .solutions-search .badge {background: var(--slate);
  color: var(--paper);
  padding: 4px 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 16px;}
body.parent-pageid-492 .entry-content .search-row {display: flex; border: 1px solid var(--slate); background: var(--paper);}
body.parent-pageid-492 .entry-content .search-row input {flex: 1; padding: 18px 20px; border: none; outline: none; font-family: var(--f-mono); font-size: 16px; background: transparent; color: var(--ink); min-width: 0;}
body.parent-pageid-492 .entry-content .search-row input::placeholder {color: var(--slate);}
body.parent-pageid-492 .entry-content .search-row button {padding: 0 26px; background: var(--slate); color: var(--paper); border: none; font-family: var(--f-mono); font-size: 16px; letter-spacing: 0.08em; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background 0.15s ease;}
body.parent-pageid-492 .entry-content .search-row button:hover {background: var(--steel);}
body.parent-pageid-492 .entry-content .search-tags {display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;}
body.parent-pageid-492 .entry-content .search-tag {font-family: var(--f-mono); font-size: 16px; padding: 6px 12px; border: 1px solid var(--line-strong); color: var(--slate); cursor: pointer; transition: all 0.15s ease; font-weight: 500;}
body.parent-pageid-492 .entry-content .search-tag:hover {border-color: var(--slate); background: var(--slate); color: var(--paper);}
body.parent-pageid-492 .entry-content .cat-nav {background: var(--ink);
  border-bottom: 3px solid var(--steel);
  position: sticky;
  top: 109px;
  z-index: 90;}
body.parent-pageid-492 .entry-content .cat-nav-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: stretch;
  gap: 0;
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  font-weight: 600;
  flex-wrap: wrap;}
body.parent-pageid-492 .entry-content .cat-nav .cat-nav-label {padding: 18px 24px 18px 0;
  color: var(--steel-2);
  border-right: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  gap: 12px;}
body.parent-pageid-492 .entry-content .cat-nav .cat-nav-label .arrow-down {color: var(--steel);}
body.parent-pageid-492 .entry-content .cat-nav a {color: var(--powder);
  padding: 18px 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-right: 1px solid rgba(255,255,255,0.10);
  transition: background 0.15s ease, color 0.15s ease;}
body.parent-pageid-492 .entry-content .cat-nav a:hover {background: var(--slate); color: var(--paper);}
body.parent-pageid-492 .entry-content .cat-nav a .num {color: var(--steel-2); font-weight: 500;}
body.parent-pageid-492 .entry-content .cat-nav .count {margin-left: auto;
  padding: 18px 0 18px 24px;
  color: var(--steel-2);}
body.parent-pageid-492 .entry-content .category {border-bottom: 1px solid var(--line);
  padding: 88px 0;
  scroll-margin-top: 175px;}
body.parent-pageid-492 .entry-content .category:nth-of-type(odd) {background: var(--paper);}
body.parent-pageid-492 .entry-content .category:nth-of-type(even) {background: var(--paper-2);}
body.parent-pageid-492 .entry-content .category-inner {max-width: 1320px; margin: 0 auto; padding: 0 32px;}
body.parent-pageid-492 .entry-content .category-head {display: grid;
  grid-template-columns: 0.85fr 1.1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1.5px solid var(--slate);}
body.parent-pageid-492 .entry-content .category-meta {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--steel);
  font-weight: 600;
  margin-bottom: 18px;}
body.parent-pageid-492 .entry-content .category-meta .num {color: var(--ink);}
body.parent-pageid-492 .entry-content .category-meta .slash {color: var(--line-strong); margin: 0 10px;}
body.parent-pageid-492 .entry-content .category-title {font-family: var(--f-display);
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 0.95;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0.005em;}
body.parent-pageid-492 .entry-content .category-desc {color: var(--slate);
  font-size: 17px;
  line-height: 1.65;
  max-width: 580px;}
body.parent-pageid-492 .entry-content .category-cta {margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--steel);
  padding-bottom: 4px;
  align-self: flex-start;
  width: fit-content;}
body.parent-pageid-492 .entry-content .category-cta:hover {color: var(--steel);}
body.parent-pageid-492 .entry-content .line-grid {display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--paper);
  border: 1px solid var(--line-strong);}
body.parent-pageid-492 .entry-content .line-card {background: var(--paper);
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  transition: background 0.15s ease;
  cursor: pointer;
  position: relative;
  color: var(--slate);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);}
body.parent-pageid-492 .entry-content .line-card:nth-child(2n) {border-right: none;}
body.parent-pageid-492 .entry-content .line-card:last-child {border-bottom: none;}
body.parent-pageid-492 .entry-content .line-card:nth-last-child(2):nth-child(odd) {border-bottom: none;}
body.parent-pageid-492 .entry-content .line-card:hover {background: var(--paper-2);}
body.parent-pageid-492 .entry-content .line-card-head {display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);}
body.parent-pageid-492 .entry-content .line-card-brand {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--steel);
  font-weight: 600;}
body.parent-pageid-492 .entry-content .line-card-skucount {font-family: var(--f-mono);
  font-size: 16px;
  color: var(--slate);
  font-weight: 500;
  white-space: nowrap;}
body.parent-pageid-492 .entry-content .line-card-skucount .em {color: var(--ink); font-weight: 700;}
body.parent-pageid-492 .entry-content .line-card-body {display: grid;
  grid-template-columns: 144px 1fr;
  gap: 24px;
  align-items: start;}
body.parent-pageid-492 .entry-content .line-card-thumb {background: var(--paper-2);
  border: 1px solid var(--line);
  height: 96px;
  display: grid;
  place-items: center;
  padding: 8px 12px;
  overflow: hidden;}
body.parent-pageid-492 .entry-content .line-card-thumb img {max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.25s ease;}
body.parent-pageid-492 .entry-content .line-card:hover .line-card-thumb img {transform: scale(1.04);}
body.parent-pageid-492 .entry-content .line-card-title {font-family: var(--f-display);
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 12px;
  letter-spacing: 0.005em;}
body.parent-pageid-492 .entry-content .line-card-desc {color: var(--slate);
  font-size:16px;
  line-height: 1.55;
  margin-bottom: 0;}
body.parent-pageid-492 .entry-content .sku-list {display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 22px;
  margin-bottom: 24px;}
body.parent-pageid-492 .entry-content .sku-chip {font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.04em;
  color: var(--slate);
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  padding: 5px 10px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;}
body.parent-pageid-492 .entry-content .sku-chip .swatch {width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--steel);
  border: 1px solid rgba(0,0,0,0.10);}
body.parent-pageid-492 .entry-content .sku-chip:hover {border-color: var(--slate); background: var(--paper); color: var(--ink);}
body.parent-pageid-492 .entry-content .sw-yellow {background: #f1c40f;}
body.parent-pageid-492 .entry-content .sw-green {background: #4caf6f;}
body.parent-pageid-492 .entry-content .sw-silver {background: #c4cdd6;}
body.parent-pageid-492 .entry-content .sw-red {background: #c0392b;}
body.parent-pageid-492 .entry-content .sw-orange {background: #e67e22;}
body.parent-pageid-492 .entry-content .sw-peach {background: #ffb98a;}
body.parent-pageid-492 .entry-content .sw-blue {background: #5a8ec7;}
body.parent-pageid-492 .entry-content .sw-purple {background: #8e44ad;}
body.parent-pageid-492 .entry-content .sw-neutral {background: #d8d2c4;}
body.parent-pageid-492 .entry-content .sw-black {background: #1a232f;}
body.parent-pageid-492 .entry-content .sw-white {background: #f7f9fc; border-color: var(--line-strong);}
body.parent-pageid-492 .entry-content .line-card-foot {margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;}
body.parent-pageid-492 .entry-content .line-card-view {font-family: var(--f-mono);
  font-size:15px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;}
body.parent-pageid-492 .entry-content .line-card-view .arrow {transition: transform 0.2s;}
body.parent-pageid-492 .entry-content .line-card:hover .line-card-view .arrow {transform: translateX(4px);}
body.parent-pageid-492 .entry-content .line-card-spec {font-family: var(--f-mono);
  font-size:14px;
  color: var(--steel);
  letter-spacing: 0.04em;}
body.parent-pageid-492 .entry-content .application-note {background: var(--ink);
  color: var(--powder);
  border-top: 4px solid var(--steel);}
body.parent-pageid-492 .entry-content .application-note-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 56px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;}
body.parent-pageid-492 .entry-content .application-note .pill {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  background: var(--steel);
  color: var(--paper);
  padding: 8px 14px;
  font-weight: 600;
  white-space: nowrap;}
body.parent-pageid-492 .entry-content .application-note .body {font-size: 18px;
  line-height: 1.55;
  color: var(--powder);}
body.parent-pageid-492 .entry-content .application-note .body strong {color: var(--paper); font-weight: 600;}
body.parent-pageid-492 .entry-content .application-note a.btn {background: var(--paper); color: var(--ink);}
body.parent-pageid-492 .entry-content .application-note a.btn:hover {background: var(--steel); color: var(--paper);}
@media (max-width: 1024px) {
body.parent-pageid-492 .entry-content .category-head, body.parent-pageid-492 .entry-content .line-grid, body.parent-pageid-492 .entry-content .footer-top, body.parent-pageid-492 .entry-content .dual-cta {grid-template-columns: 1fr !important;}
body.parent-pageid-492 .entry-content .line-card {border-right: none;}
body.parent-pageid-492 .entry-content .line-card:nth-last-child(2):nth-child(odd) {border-bottom: 1px solid var(--line-strong);}
body.parent-pageid-492 .entry-content .application-note-inner {grid-template-columns: 1fr; gap: 24px;}
body.parent-pageid-492 .entry-content .category {padding: 64px 0;}
body.parent-pageid-492 .entry-content .cat-nav {position: static;}
body.parent-pageid-492 .entry-content .cat-nav-inner {gap: 0;}
body.parent-pageid-492 .entry-content .cat-nav .count {display: none;}
}
@media (max-width: 640px) {
body.parent-pageid-492 .entry-content .line-card-body {grid-template-columns: 1fr; gap: 18px;}
body.parent-pageid-492 .entry-content .line-card-thumb {height: 120px;}
body.parent-pageid-492 .entry-content .line-card {padding: 26px 22px 24px;}
body.parent-pageid-492 .entry-content .page-header-inner {padding: 32px 24px 48px;}
}
body.parent-pageid-492 .entry-content .blog-section {background: var(--paper); padding: 96px 0;}
body.parent-pageid-492 .entry-content .blog-section-inner {max-width: 1320px; margin: 0 auto; padding: 0 32px;}
body.parent-pageid-492 .entry-content .blog-section-head {margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1.5px solid var(--slate);}
body.parent-pageid-492 .entry-content .blog-section-title {font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 4.6vw, 64px); line-height: 0.95; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 8px;}
body.parent-pageid-492 .entry-content .blog-section-meta {font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600;}
body.parent-pageid-492 .entry-content .blog-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;}
body.parent-pageid-492 .entry-content .blog-card {display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); transition: border-color 0.18s ease, transform 0.18s ease;}
body.parent-pageid-492 .entry-content .blog-card:hover {border-color: var(--slate); transform: translateY(-3px);}
body.parent-pageid-492 .entry-content .blog-card .media {aspect-ratio: 16/10; border-bottom: 1px solid var(--line); overflow: hidden;}
body.parent-pageid-492 .entry-content .blog-card .media img {width: 100%; height: 100%; object-fit: cover; display: block;}
body.parent-pageid-492 .entry-content .blog-card .body {padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1;}
body.parent-pageid-492 .entry-content .blog-card .meta {font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600; margin-bottom: 14px; display: flex; gap: 12px; align-items: center;}
body.parent-pageid-492 .entry-content .blog-card .meta .dot {color: var(--line-strong);}
body.parent-pageid-492 .entry-content .blog-card h3 {font-family: var(--f-display); font-size: 28px; line-height: 1; color: var(--ink); margin-bottom: 14px; font-weight: 400; letter-spacing: 0.005em;}
body.parent-pageid-492 .entry-content .blog-card p {color: var(--slate); font-size: 16px; line-height: 1.55; margin-bottom: 24px;}
body.parent-pageid-492 .entry-content .blog-card .read {margin-top: auto; font-family: var(--f-mono); font-size:14px; letter-spacing: 0.08em; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px;}
body.parent-pageid-492 .entry-content .blog-card:hover .read .arrow {transform: translateX(4px);}
body.parent-pageid-492 .entry-content .blog-card .read .arrow {transition: transform 0.2s;}
@media (max-width: 1024px) {
body.parent-pageid-492 .entry-content .blog-grid {grid-template-columns: 1fr;}
}
body.parent-pageid-492 .entry-content .btn {display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; font-family: var(--f-mono); font-size: 16px; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; border: none; transition: all 0.15s ease; white-space: nowrap; line-height: 1;}
body.parent-pageid-492 .entry-content .btn-primary {background: var(--slate); color: var(--paper);}
body.parent-pageid-492 .entry-content .btn-primary:hover {background: var(--ink);}
body.parent-pageid-492 .entry-content .btn-ghost {background: transparent; color: var(--slate); border: 1px solid var(--line-strong);}
body.parent-pageid-492 .entry-content .btn-ghost:hover {background: var(--slate); color: var(--paper); border-color: var(--slate);}
body.parent-pageid-492 .entry-content .btn .arrow {transition: transform 0.2s;}
body.parent-pageid-492 .entry-content .btn:hover .arrow {transform: translateX(4px);}
body.parent-pageid-492 .entry-content .page-header {position: relative;
  background: var(--powder);
  border-bottom: 1px solid var(--line);
  overflow: hidden;}
body.parent-pageid-492 .entry-content .page-header::before {content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(52,64,78,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,64,78,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  pointer-events: none;}
body.parent-pageid-492 .entry-content .page-header-inner {position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 44px 32px 64px;}
body.parent-pageid-492 .entry-content .breadcrumb {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 500;}
body.parent-pageid-492 .entry-content .breadcrumb a:hover {color: var(--ink);}
body.parent-pageid-492 .entry-content .breadcrumb .sep {color: var(--steel-2);}
body.parent-pageid-492 .entry-content .breadcrumb .here {color: var(--ink); font-weight: 600;}
body.parent-pageid-492 .entry-content .page-kicker {display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--slate);
  margin-bottom: 22px;}
body.parent-pageid-492 .entry-content .page-kicker .dot {width: 10px; height: 10px; background: var(--steel); border-radius: 50%; box-shadow: 0 0 0 5px rgba(78,107,140,0.22);}
body.parent-pageid-492 .entry-content .page-title-grid {display: grid;
  grid-template-columns: 1.3fr 0.85fr;
  gap: 64px;
  align-items: end;}
body.parent-pageid-492 .entry-content .page-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 92px);
  line-height: 0.95;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 26px;}
body.parent-pageid-492 .entry-content .page-title .accent {color: var(--steel);}
body.parent-pageid-492 .entry-content .page-lede {font-size: 19px;
  line-height: 1.55;
  color: var(--slate);
  max-width: 680px;}
body.parent-pageid-492 .entry-content .page-lede strong {color: var(--ink); font-weight: 600;}
body.parent-pageid-492 .entry-content .cat-stats {background: var(--paper);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--steel);}
body.parent-pageid-492 .entry-content .cat-stats-row {display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);}
body.parent-pageid-492 .entry-content .cat-stats-row:last-child {border-bottom: none;}
body.parent-pageid-492 .entry-content .cat-stats-cell {padding: 11px 22px;
  font-family: var(--f-mono);
  font-size:16px;}
body.parent-pageid-492 .entry-content .cat-stats-cell:first-child {border-right: 1px solid var(--line);
  color: var(--steel);
  letter-spacing: 0.10em;
  font-weight: 600;}
body.parent-pageid-492 .entry-content .cat-stats-cell:last-child {color: var(--ink);
  font-weight: 600;
  font-size:15px;
  letter-spacing: 0.04em;}
body.parent-pageid-492 .entry-content .sub-nav {background: var(--ink);
  border-bottom: 3px solid var(--steel);
  position: sticky;
  top: 109px;
  z-index: 90;}
body.parent-pageid-492 .entry-content .sub-nav-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: stretch;
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  font-weight: 600;
  flex-wrap: wrap;}
body.parent-pageid-492 .entry-content .sub-nav-label {padding: 18px 24px 18px 0;
  color: var(--steel-2);
  border-right: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  gap: 12px;}
body.parent-pageid-492 .entry-content .sub-nav-label .arrow-down {color: var(--steel);}
body.parent-pageid-492 .entry-content .sub-nav a {color: var(--powder);
  padding: 18px 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-right: 1px solid rgba(255,255,255,0.10);
  transition: background 0.15s ease, color 0.15s ease;}
body.parent-pageid-492 .entry-content .sub-nav a:hover {background: var(--slate); color: var(--paper);}
body.parent-pageid-492 .entry-content .sub-nav a .num {color: var(--steel-2); font-weight: 500;}
body.parent-pageid-492 .entry-content .mechanism {padding: 96px 0 80px;
  background: var(--paper);
  scroll-margin-top: 175px;}
body.parent-pageid-492 .entry-content .mechanism-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;}
body.parent-pageid-492 .entry-content .section-head {display: block;
  margin-bottom: 56px;
  padding-bottom: 28px;
  border-bottom: 1.5px solid var(--slate);}
body.parent-pageid-492 .entry-content .section-meta {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--slate);
  font-weight: 600;
  margin-bottom: 16px;}
body.parent-pageid-492 .entry-content .section-meta .num {display: block;
  font-family: var(--f-display);
  font-size: 56px;
  color: var(--steel);
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 12px;}
body.parent-pageid-492 .entry-content .section-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 16px;}
body.parent-pageid-492 .entry-content .section-blurb {color: var(--slate);
  font-size: 17px;
  line-height: 1.55;
  max-width: 680px;}
body.parent-pageid-492 .entry-content .mech-grid {display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--paper);
  border: 1px solid var(--line-strong);}
body.parent-pageid-492 .entry-content .mech-card {padding: 36px 32px 32px;
  border-right: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 16px;}
body.parent-pageid-492 .entry-content .mech-card:last-child {border-right: none;}
body.parent-pageid-492 .entry-content .mech-num {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--steel);}
body.parent-pageid-492 .entry-content .mech-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.005em;}
body.parent-pageid-492 .entry-content .mech-desc {font-size: 16px;
  line-height: 1.55;
  color: var(--slate);}
body.parent-pageid-492 .entry-content .mech-tags {display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;}
body.parent-pageid-492 .entry-content .mech-tag {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 6px 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--slate);}
body.parent-pageid-492 .entry-content .catalog {padding: 96px 0 64px;
  background: var(--paper-2);
  scroll-margin-top: 175px;}
body.parent-pageid-492 .entry-content .catalog-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;}
body.parent-pageid-492 .entry-content .brand-line {background: var(--paper);
  border: 1px solid var(--line-strong);
  margin-bottom: 32px;}
body.parent-pageid-492 .entry-content .brand-line-head {padding: 28px 32px;
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 28px;
  align-items: center;
  border-bottom: 1px solid var(--line);}
body.parent-pageid-492 .entry-content .brand-line-thumb {aspect-ratio: 4/3;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: 14px;}
body.parent-pageid-492 .entry-content .brand-line-thumb img {max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;}
body.parent-pageid-492 .entry-content .brand-line-meta {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--steel);
  margin-bottom: 8px;}
body.parent-pageid-492 .entry-content .brand-line-name {font-family: var(--f-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 6px;}
body.parent-pageid-492 .entry-content .brand-line-desc {font-size:16px;
  color: var(--slate);
  line-height: 1.5;
  max-width: 720px;}
body.parent-pageid-492 .entry-content .brand-line-stats {display: flex;
  gap: 32px;
  font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.06em;
  color: var(--steel);
  font-weight: 500;
  align-self: end;
  white-space: nowrap;}
body.parent-pageid-492 .entry-content .brand-line-stats .em {color: var(--ink); font-weight: 700; font-size:16px;}
body.parent-pageid-492 .entry-content .sku-grid {display: grid;
  grid-template-columns: repeat(4, 1fr);}
body.parent-pageid-492 .entry-content .sku-card {padding: 24px 22px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.15s ease;
  cursor: pointer;
  color: var(--slate);
  position: relative;}
body.parent-pageid-492 .entry-content .sku-card:hover {background: var(--paper-2);}
body.parent-pageid-492 .entry-content .sku-card:hover .sku-link::after {transform: translateX(4px);}
body.parent-pageid-492 .entry-content .sku-card:nth-child(4n) {border-right: none;}
body.parent-pageid-492 .entry-content .sku-card:nth-last-child(-n+4):not(:nth-last-child(n+5)) {border-bottom: none;}
body.parent-pageid-492 .entry-content .sku-head {display: flex;
  align-items: center;
  gap: 14px;}
body.parent-pageid-492 .entry-content .color-swatch {width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
  flex-shrink: 0;
  position: relative;
  background: var(--paper);}
body.parent-pageid-492 .entry-content .color-swatch::before {content: "";
  position: absolute;
  inset: 2px;
  background: var(--swatch, var(--paper));}
body.parent-pageid-492 .entry-content .sku-id {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--steel);}
body.parent-pageid-492 .entry-content .sku-name {font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.005em;}
body.parent-pageid-492 .entry-content .sku-strength {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 5px 9px;
  display: inline-block;
  align-self: flex-start;
  color: var(--paper);}
body.parent-pageid-492 .entry-content .sku-strength.low {background: var(--strength-low); color: var(--ink);}
body.parent-pageid-492 .entry-content .sku-strength.med {background: var(--strength-med); color: var(--ink);}
body.parent-pageid-492 .entry-content .sku-strength.high {background: var(--strength-high);}
body.parent-pageid-492 .entry-content .sku-strength.perm {background: var(--strength-perm);}
body.parent-pageid-492 .entry-content .sku-use {font-size:16px;
  line-height: 1.5;
  color: var(--slate);}
body.parent-pageid-492 .entry-content .sku-link {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--steel);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;}
body.parent-pageid-492 .entry-content .sku-link::after {content: "→"; transition: transform 0.2s;}
body.parent-pageid-492 .entry-content .selector {padding: 96px 0;
  background: var(--ink);
  color: var(--powder);
  scroll-margin-top: 175px;}
body.parent-pageid-492 .entry-content .selector-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;}
body.parent-pageid-492 .entry-content .selector-head {display: grid;
  grid-template-columns: auto 1fr;
  gap: 64px;
  margin-bottom: 56px;
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1.5px solid var(--steel);}
body.parent-pageid-492 .entry-content .selector .section-meta {color: var(--steel-2);}
body.parent-pageid-492 .entry-content .selector .section-meta .num {color: var(--steel);}
body.parent-pageid-492 .entry-content .selector .section-title {color: var(--paper);}
body.parent-pageid-492 .entry-content .selector .section-blurb {color: var(--powder); opacity: 0.85;}
body.parent-pageid-492 .entry-content .selector-table {background: var(--slate-2);
  border: 1px solid rgba(255,255,255,0.12);}
body.parent-pageid-492 .entry-content .selector-row {display: grid;
  grid-template-columns: 200px 1fr 1.3fr 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.10);}
body.parent-pageid-492 .entry-content .selector-row.head {background: var(--ink);
  border-bottom: 2px solid var(--steel);}
body.parent-pageid-492 .entry-content .selector-row.head > div {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.10em;
  color: var(--steel-2);
  font-weight: 600;
  padding: 18px 22px;}
body.parent-pageid-492 .entry-content .selector-row:last-child {border-bottom: none;}
body.parent-pageid-492 .entry-content .selector-row > div {padding: 22px;}
body.parent-pageid-492 .entry-content .selector-row > div + div {border-left: 1px solid rgba(255,255,255,0.08);}
body.parent-pageid-492 .entry-content .sel-chip {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 6px 10px;
  display: inline-block;}
body.parent-pageid-492 .entry-content .sel-chip.low {background: var(--strength-low); color: var(--ink);}
body.parent-pageid-492 .entry-content .sel-chip.med {background: var(--strength-med); color: var(--ink);}
body.parent-pageid-492 .entry-content .sel-chip.high {background: var(--strength-high); color: var(--paper);}
body.parent-pageid-492 .entry-content .sel-chip.perm {background: var(--paper); color: var(--ink);}
body.parent-pageid-492 .entry-content .sel-cell-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--paper);
  margin-bottom: 6px;
  line-height: 1.1;}
body.parent-pageid-492 .entry-content .sel-cell-detail {font-size:16px;
  color: var(--powder);
  opacity: 0.78;
  line-height: 1.5;}
body.parent-pageid-492 .entry-content .sel-pick {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.06em;
  color: var(--steel-2);
  line-height: 1.5;}
body.parent-pageid-492 .entry-content .sel-pick em {font-style: normal; color: var(--paper); font-weight: 600;}
body.parent-pageid-492 .entry-content .spec-cross {padding: 96px 0;
  background: var(--paper);
  scroll-margin-top: 175px;}
body.parent-pageid-492 .entry-content .spec-cross-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;}
body.parent-pageid-492 .entry-content .spec-grid {display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line-strong);}
body.parent-pageid-492 .entry-content .spec-card {padding: 32px 28px;
  border-right: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 18px;}
body.parent-pageid-492 .entry-content .spec-card:last-child {border-right: none;}
body.parent-pageid-492 .entry-content .spec-card-label {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--steel);}
body.parent-pageid-492 .entry-content .spec-card-eg {font-family: var(--f-mono);
  font-size:16px;
  color: var(--ink);
  line-height: 1.7;}
body.parent-pageid-492 .entry-content .spec-card-eg .em {background: var(--powder); padding: 2px 6px; font-weight: 600;}
body.parent-pageid-492 .entry-content .spec-card-cta {font-family: var(--f-mono);
  font-size:14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  gap: 8px;}
body.parent-pageid-492 .entry-content .spec-card-cta::after {content: "→";}
body.parent-pageid-492 .entry-content .pick-block {padding: 96px 0;
  background: var(--powder);
  scroll-margin-top: 175px;}
body.parent-pageid-492 .entry-content .pick-block-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;}
body.parent-pageid-492 .entry-content .pick-content h2 {font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 0.95;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 22px;}
body.parent-pageid-492 .entry-content .pick-content p {font-size: 17px;
  line-height: 1.6;
  color: var(--slate);
  margin-bottom: 28px;
  max-width: 540px;}
body.parent-pageid-492 .entry-content .pick-actions {display: flex; gap: 14px; flex-wrap: wrap;}
body.parent-pageid-492 .entry-content .pick-checklist {background: var(--paper);
  border: 1px solid var(--line-strong);
  padding: 36px 32px;}
body.parent-pageid-492 .entry-content .pick-checklist :is(h3,h4) {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.12em;
  color: var(--steel);
  font-weight: 700;
  margin-bottom: 20px;}
body.parent-pageid-492 .entry-content .pick-checklist ul {list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;}
body.parent-pageid-492 .entry-content .pick-checklist li {display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size:16px;
  color: var(--slate);
  line-height: 1.5;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);}
body.parent-pageid-492 .entry-content .pick-checklist li:last-child {padding-bottom: 0; border-bottom: none;}
body.parent-pageid-492 .entry-content .pick-checklist li::before {content: "→";
  color: var(--steel);
  font-weight: 700;
  font-family: var(--f-mono);}
body.parent-pageid-492 .entry-content .pick-checklist li strong {color: var(--ink); font-weight: 600;}
@media (max-width: 1024px) {
body.parent-pageid-492 .entry-content .page-title-grid, body.parent-pageid-492 .entry-content .section-head, body.parent-pageid-492 .entry-content .pick-block-inner, body.parent-pageid-492 .entry-content .footer-top, body.parent-pageid-492 .entry-content .dual-cta {grid-template-columns: 1fr !important; gap: 32px !important;}
body.parent-pageid-492 .entry-content .selector-row {grid-template-columns: 130px 1fr;}
body.parent-pageid-492 .entry-content .selector-row.head > div:nth-child(3), body.parent-pageid-492 .entry-content .selector-row.head > div:nth-child(4), body.parent-pageid-492 .entry-content .selector-row > div:nth-child(3), body.parent-pageid-492 .entry-content .selector-row > div:nth-child(4) {display: none;}
body.parent-pageid-492 .entry-content .sub-nav {position: static;}
body.parent-pageid-492 .entry-content .mech-grid, body.parent-pageid-492 .entry-content .spec-grid {grid-template-columns: 1fr;}
body.parent-pageid-492 .entry-content .mech-card {border-right: none; border-bottom: 1px solid var(--line-strong);}
body.parent-pageid-492 .entry-content .mech-card:last-child {border-bottom: none;}
body.parent-pageid-492 .entry-content .spec-card {border-right: none; border-bottom: 1px solid var(--line-strong);}
body.parent-pageid-492 .entry-content .spec-card:last-child {border-bottom: none;}
}
@media (max-width: 768px) {
body.parent-pageid-492 .entry-content .sku-grid {grid-template-columns: repeat(2, 1fr);}
body.parent-pageid-492 .entry-content .sku-card:nth-child(4n) {border-right: 1px solid var(--line);}
body.parent-pageid-492 .entry-content .sku-card:nth-child(2n) {border-right: none;}
body.parent-pageid-492 .entry-content .sku-card:nth-last-child(-n+4):not(:nth-last-child(n+5)) {border-bottom: 1px solid var(--line);}
body.parent-pageid-492 .entry-content .sku-card:last-child {border-bottom: none;}
body.parent-pageid-492 .entry-content .sku-card:nth-last-child(2):nth-child(odd) {border-bottom: none;}
body.parent-pageid-492 .entry-content .brand-line-head {grid-template-columns: 1fr;}
body.parent-pageid-492 .entry-content .brand-line-thumb {max-width: 220px;}
body.parent-pageid-492 .entry-content .page-header-inner {padding: 32px 24px 48px;}
}
@media (max-width: 560px) {
body.parent-pageid-492 .entry-content .sku-grid {grid-template-columns: 1fr;}
body.parent-pageid-492 .entry-content .sku-card {border-right: none !important;}
body.parent-pageid-492 .entry-content .cat-stats-row {grid-template-columns: 1fr;}
body.parent-pageid-492 .entry-content .cat-stats-cell:first-child {border-right: none; border-bottom: 1px solid var(--line);}
}
body.parent-pageid-492 .entry-content .blog-section {background: var(--paper); padding: 96px 0;}
body.parent-pageid-492 .entry-content .blog-section-inner {max-width: 1320px; margin: 0 auto; padding: 0 32px;}
body.parent-pageid-492 .entry-content .blog-section-head {margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1.5px solid var(--slate);}
body.parent-pageid-492 .entry-content .blog-section-title {font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 4.6vw, 64px); line-height: 0.95; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 8px;}
body.parent-pageid-492 .entry-content .blog-section-meta {font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600;}
body.parent-pageid-492 .entry-content .blog-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;}
body.parent-pageid-492 .entry-content .blog-card {display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); transition: border-color 0.18s ease, transform 0.18s ease;}
body.parent-pageid-492 .entry-content .blog-card:hover {border-color: var(--slate); transform: translateY(-3px);}
body.parent-pageid-492 .entry-content .blog-card .media {aspect-ratio: 16/10; border-bottom: 1px solid var(--line); overflow: hidden;}
body.parent-pageid-492 .entry-content .blog-card .media img {width: 100%; height: 100%; object-fit: cover; display: block;}
body.parent-pageid-492 .entry-content .blog-card .body {padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1;}
body.parent-pageid-492 .entry-content .blog-card .meta {font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600; margin-bottom: 14px; display: flex; gap: 12px; align-items: center;}
body.parent-pageid-492 .entry-content .blog-card .meta .dot {color: var(--line-strong);}
body.parent-pageid-492 .entry-content .blog-card h3 {font-family: var(--f-display); font-size: 28px; line-height: 1; color: var(--ink); margin-bottom: 14px; font-weight: 400; letter-spacing: 0.005em;}
body.parent-pageid-492 .entry-content .blog-card p {color: var(--slate); font-size: 16px; line-height: 1.55; margin-bottom: 24px;}
body.parent-pageid-492 .entry-content .blog-card .read {margin-top: auto; font-family: var(--f-mono); font-size:14px; letter-spacing: 0.08em; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px;}
body.parent-pageid-492 .entry-content .blog-card:hover .read .arrow {transform: translateX(4px);}
body.parent-pageid-492 .entry-content .blog-card .read .arrow {transition: transform 0.2s;}
@media (max-width: 1024px) {
body.parent-pageid-492 .entry-content .blog-grid {grid-template-columns: 1fr;}
}
body.parent-pageid-492 .entry-content .brand-line-head.no-thumb {grid-template-columns: 1fr auto;}
body.parent-pageid-492 .entry-content .sku-strength.type {background: var(--steel); color: var(--paper);}
body.parent-pageid-492 .entry-content .sku-strength.neutral {background: var(--slate); color: var(--paper);}
@media (max-width:768px) {
body.parent-pageid-492 .entry-content .brand-line-head.no-thumb {grid-template-columns: 1fr;}
}
body.parent-pageid-492 .entry-content .line-card { cursor: default; }
body.parent-pageid-492 .entry-content a.sku-chip { text-decoration: none; }
body.parent-pageid-492 .entry-content a.line-card-view { text-decoration: none; cursor: pointer; }
body.parent-pageid-492 .entry-content a.line-card-view:hover { color: var(--steel); }
body.parent-pageid-492 .entry-content a.line-card-view:hover .arrow { transform: translateX(4px); }
body.parent-pageid-492 .archive-title,
body.parent-pageid-492 h1.entry-title,
body.parent-pageid-492 .archive-description .entry-title,
body.parent-pageid-492 .taxonomy-archive-description .archive-title { display: none !important; }
body.parent-pageid-492 .entry-content .bg-prodsearch-results { margin-top: 22px; }
body.parent-pageid-492 .entry-content .bg-ps-head {
  font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 14px;
}
body.parent-pageid-492 .entry-content .bg-ps-head strong { color: var(--ink); }
body.parent-pageid-492 .entry-content .bg-ps-loading,
body.parent-pageid-492 .entry-content .bg-ps-empty {
  font-family: var(--f-mono);
  font-size:16px;
  color: var(--slate);
  padding: 18px 0;
}
body.parent-pageid-492 .entry-content .bg-ps-empty a { color: var(--steel); text-decoration: underline; }
body.parent-pageid-492 .entry-content .bg-ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  border: 1px solid var(--line-strong);
}
body.parent-pageid-492 .entry-content .bg-ps-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s ease;
}
body.parent-pageid-492 .entry-content .bg-ps-card:hover { background: var(--paper-2); }
body.parent-pageid-492 .entry-content .bg-ps-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
body.parent-pageid-492 .entry-content .bg-ps-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.parent-pageid-492 .entry-content .bg-ps-thumb-empty { background: var(--paper-2); }
body.parent-pageid-492 .entry-content .bg-ps-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.parent-pageid-492 .entry-content .bg-ps-meta {
  font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--slate);
}
body.parent-pageid-492 .entry-content .bg-ps-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.parent-pageid-492 .entry-content .bg-ps-arrow {
  flex: 0 0 auto;
  color: var(--steel);
  font-size: 18px;
  transition: transform 0.15s ease;
}
body.parent-pageid-492 .entry-content .bg-ps-card:hover .bg-ps-arrow { transform: translateX(3px); }
body.parent-pageid-492 .entry-content .crossref-block {background: var(--ink);
  color: var(--powder);
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: center;}
body.parent-pageid-492 .entry-content .crossref-block h3 {font-family: var(--f-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  color: var(--paper);
  margin-bottom: 16px;
  letter-spacing: -0.005em;}
body.parent-pageid-492 .entry-content .crossref-block p {color: var(--powder);
  opacity: 0.85;
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 20px;}
body.parent-pageid-492 .entry-content .crossref-block .btn-primary {background: var(--steel);}
body.parent-pageid-492 .entry-content .crossref-block .btn-primary:hover {background: var(--paper); color: var(--ink);}
body.parent-pageid-492 .entry-content .crossref-list {background: var(--slate-2);
  border: 1px solid rgba(255,255,255,0.14);}
body.parent-pageid-492 .entry-content .crossref-list-row {display: grid;
  grid-template-columns: 160px 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.10);}
body.parent-pageid-492 .entry-content .crossref-list-row:last-child {border-bottom: none;}
body.parent-pageid-492 .entry-content .crossref-list-row > div {padding: 16px 22px;}
body.parent-pageid-492 .entry-content .crossref-list-row .agency {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.10em;
  color: var(--steel-2);
  font-weight: 700;
  border-right: 1px solid rgba(255,255,255,0.10);}
body.parent-pageid-492 .entry-content .crossref-list-row .specs {font-family: var(--f-mono);
  font-size:14px;
  color: var(--paper);
  font-weight: 500;
  letter-spacing: 0.04em;}
@media (max-width: 1100px) {
body.parent-pageid-492 .entry-content .crossref-block {grid-template-columns: 1fr; gap: 32px; padding: 40px 28px;}
}
body.parent-pageid-492 .entry-content .sku-card{border-bottom:1px solid var(--line)!important;}
.bgctx-product .entry-header,
body.parent-pageid-492 .entry-header,
body.parent-pageid-492 .entry-header{margin:0!important;}
body.parent-pageid-492 .entry-content .sku-card,
.bgctx-product .entry-content .sku-card{border-bottom:1px solid var(--line) !important;}

/* Thread-locking solutions page refinements (2026-06-15) */
/* selector cells need more padding (the grid cells computed to 0) */
body.parent-pageid-492 .entry-content .selector-row > div,
body.parent-pageid-492 .entry-content .selector-row > p{padding:30px 28px !important;}
body.parent-pageid-492 .entry-content .selector-row.head > div,
body.parent-pageid-492 .entry-content .selector-row.head > p{padding:18px 28px !important;}
/* Overview section (intro copy moved out of the hero) */
body.parent-pageid-492 .entry-content .overview-section .section-inner{max-width:1320px;margin:0 auto;padding:72px 32px;}
body.parent-pageid-492 .entry-content .overview-section .section-title{margin-bottom:24px;}
body.parent-pageid-492 .entry-content .overview-section p{max-width:900px;font-size:18px;line-height:1.7;color:var(--slate);margin-bottom:18px;}
body.parent-pageid-492 .entry-content .overview-section .overview-lede strong{color:var(--ink);font-weight:600;}

/* selector cells: pad the real grid items (inside Mai display:contents inner-container) */
body.parent-pageid-492 .entry-content .selector-row > .wp-block-group__inner-container > p,
body.parent-pageid-492 .entry-content .selector-row > .wp-block-group__inner-container > div{padding:28px 26px !important;}
body.parent-pageid-492 .entry-content .selector-row.head > .wp-block-group__inner-container > p{padding:16px 26px !important;}

/* Thread-locking page tweaks (2026-06-16 round 2) */
/* Overview: tighter padding + 2-col (text left, stats chart right) */
body.parent-pageid-492 .entry-content .overview-section .section-inner{padding:44px 32px !important;}
body.parent-pageid-492 .entry-content .overview-section .overview-layout{display:grid;grid-template-columns:1fr 440px;gap:56px;align-items:start;}
body.parent-pageid-492 .entry-content .overview-section .overview-main p{max-width:none;}
@media (max-width:900px){body.parent-pageid-492 .entry-content .overview-section .overview-layout{grid-template-columns:1fr;gap:32px;}}
/* mechanism grid: no gap (cards flush, divider borders only) */
body.parent-pageid-492 .entry-content .mech-grid{gap:0 !important;}
body.parent-pageid-492 .entry-content .mech-card:last-child{border-right:none;}
/* selector header: left-align (was a 2-col grid indenting the title) */
body.parent-pageid-492 .entry-content .selector-head{display:block !important;}
body.parent-pageid-492 .entry-content .selector-head .section-meta{margin-bottom:14px;}
/* cross-reference header: center */
body.parent-pageid-492 .entry-content .spec-cross .section-head{text-align:center;}
body.parent-pageid-492 .entry-content .spec-cross .section-head .section-blurb{margin-left:auto;margin-right:auto;}

/* Overview: less vertical padding */
body.parent-pageid-492 .entry-content .overview-section .section-inner{padding:22px 32px !important;}
body.parent-pageid-492 .entry-content .overview-section .section-inner{padding:12px 32px !important;}

/* neutral chips for sealing/masking selectors + sku badges (non-strength) */
body.parent-pageid-492 .entry-content .sel-chip.neutral{background:var(--steel);color:#fff;white-space:nowrap;}
body.parent-pageid-492 .entry-content .sku-strength.neutral{background:var(--powder);color:var(--ink);}


/* SOLUTIONS-HUB RE-SCOPE: mirror catalog design CSS onto the hub page (body.page-id-492). */
body.page-id-492 .entry-content .btn {display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; font-family: var(--f-mono); font-size: 16px; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; border: none; transition: all 0.15s ease; white-space: nowrap; line-height: 1;}
body.page-id-492 .entry-content .btn-primary {background: var(--slate); color: var(--paper);}
body.page-id-492 .entry-content .btn-primary:hover {background: var(--ink);}
body.page-id-492 .entry-content .btn-ghost {background: transparent; color: var(--slate); border: 1px solid var(--line-strong);}
body.page-id-492 .entry-content .btn-ghost:hover {background: var(--slate); color: var(--paper); border-color: var(--slate);}
body.page-id-492 .entry-content .btn .arrow {transition: transform 0.2s;}
body.page-id-492 .entry-content .btn:hover .arrow {transform: translateX(4px);}
body.page-id-492 .entry-content .page-header {position: relative;
  background: var(--powder);
  border-bottom: 1px solid var(--line);
  overflow: hidden;}
body.page-id-492 .entry-content .page-header::before {content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(52,64,78,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,64,78,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  pointer-events: none;}
body.page-id-492 .entry-content .page-header-inner {position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 44px 32px 64px;}
body.page-id-492 .entry-content .breadcrumb {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 500;}
body.page-id-492 .entry-content .breadcrumb a:hover {color: var(--ink);}
body.page-id-492 .entry-content .breadcrumb .sep {color: var(--steel-2);}
body.page-id-492 .entry-content .breadcrumb .here {color: var(--ink); font-weight: 600;}
body.page-id-492 .entry-content .page-kicker {display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--slate);
  margin-bottom: 22px;}
body.page-id-492 .entry-content .page-kicker .dot {width: 10px; height: 10px; background: var(--steel); border-radius: 50%; box-shadow: 0 0 0 5px rgba(78,107,140,0.22);}
body.page-id-492 .entry-content .page-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 26px;}
body.page-id-492 .entry-content .page-title .accent {color: var(--steel);}
body.page-id-492 .entry-content .page-lede {font-size: 19px;
  line-height: 1.55;
  color: var(--slate);
  max-width: 720px;}
body.page-id-492 .entry-content .page-lede strong {color: var(--ink); font-weight: 600;}
body.page-id-492 .entry-content .solutions-search {margin-top: 44px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  padding: 24px 28px;
  max-width: 760px;}
body.page-id-492 .entry-content .solutions-search .label {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--slate);
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  flex-wrap: wrap;
  gap: 10px;}
body.page-id-492 .entry-content .solutions-search .badge {background: var(--slate);
  color: var(--paper);
  padding: 4px 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 16px;}
body.page-id-492 .entry-content .search-row {display: flex; border: 1px solid var(--slate); background: var(--paper);}
body.page-id-492 .entry-content .search-row input {flex: 1; padding: 18px 20px; border: none; outline: none; font-family: var(--f-mono); font-size: 16px; background: transparent; color: var(--ink); min-width: 0;}
body.page-id-492 .entry-content .search-row input::placeholder {color: var(--slate);}
body.page-id-492 .entry-content .search-row button {padding: 0 26px; background: var(--slate); color: var(--paper); border: none; font-family: var(--f-mono); font-size: 16px; letter-spacing: 0.08em; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background 0.15s ease;}
body.page-id-492 .entry-content .search-row button:hover {background: var(--steel);}
body.page-id-492 .entry-content .search-tags {display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;}
body.page-id-492 .entry-content .search-tag {font-family: var(--f-mono); font-size: 16px; padding: 6px 12px; border: 1px solid var(--line-strong); color: var(--slate); cursor: pointer; transition: all 0.15s ease; font-weight: 500;}
body.page-id-492 .entry-content .search-tag:hover {border-color: var(--slate); background: var(--slate); color: var(--paper);}
body.page-id-492 .entry-content .cat-nav {background: var(--ink);
  border-bottom: 3px solid var(--steel);
  position: sticky;
  top: 109px;
  z-index: 90;}
body.page-id-492 .entry-content .cat-nav-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: stretch;
  gap: 0;
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  font-weight: 600;
  flex-wrap: wrap;}
body.page-id-492 .entry-content .cat-nav .cat-nav-label {padding: 18px 24px 18px 0;
  color: var(--steel-2);
  border-right: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  gap: 12px;}
body.page-id-492 .entry-content .cat-nav .cat-nav-label .arrow-down {color: var(--steel);}
body.page-id-492 .entry-content .cat-nav a {color: var(--powder);
  padding: 18px 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-right: 1px solid rgba(255,255,255,0.10);
  transition: background 0.15s ease, color 0.15s ease;}
body.page-id-492 .entry-content .cat-nav a:hover {background: var(--slate); color: var(--paper);}
body.page-id-492 .entry-content .cat-nav a .num {color: var(--steel-2); font-weight: 500;}
body.page-id-492 .entry-content .cat-nav .count {margin-left: auto;
  padding: 18px 0 18px 24px;
  color: var(--steel-2);}
body.page-id-492 .entry-content .category {border-bottom: 1px solid var(--line);
  padding: 88px 0;
  scroll-margin-top: 175px;}
body.page-id-492 .entry-content .category:nth-of-type(odd) {background: var(--paper);}
body.page-id-492 .entry-content .category:nth-of-type(even) {background: var(--paper-2);}
body.page-id-492 .entry-content .category-inner {max-width: 1320px; margin: 0 auto; padding: 0 32px;}
body.page-id-492 .entry-content .category-head {display: grid;
  grid-template-columns: 0.85fr 1.1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1.5px solid var(--slate);}
body.page-id-492 .entry-content .category-meta {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--steel);
  font-weight: 600;
  margin-bottom: 18px;}
body.page-id-492 .entry-content .category-meta .num {color: var(--ink);}
body.page-id-492 .entry-content .category-meta .slash {color: var(--line-strong); margin: 0 10px;}
body.page-id-492 .entry-content .category-title {font-family: var(--f-display);
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 0.95;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0.005em;}
body.page-id-492 .entry-content .category-desc {color: var(--slate);
  font-size: 17px;
  line-height: 1.65;
  max-width: 580px;}
body.page-id-492 .entry-content .category-cta {margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--steel);
  padding-bottom: 4px;
  align-self: flex-start;
  width: fit-content;}
body.page-id-492 .entry-content .category-cta:hover {color: var(--steel);}
body.page-id-492 .entry-content .line-grid {display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--paper);
  border: 1px solid var(--line-strong);}
body.page-id-492 .entry-content .line-card {background: var(--paper);
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  transition: background 0.15s ease;
  cursor: pointer;
  position: relative;
  color: var(--slate);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);}
body.page-id-492 .entry-content .line-card:nth-child(2n) {border-right: none;}
body.page-id-492 .entry-content .line-card:last-child {border-bottom: none;}
body.page-id-492 .entry-content .line-card:nth-last-child(2):nth-child(odd) {border-bottom: none;}
body.page-id-492 .entry-content .line-card:hover {background: var(--paper-2);}
body.page-id-492 .entry-content .line-card-head {display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);}
body.page-id-492 .entry-content .line-card-brand {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--steel);
  font-weight: 600;}
body.page-id-492 .entry-content .line-card-skucount {font-family: var(--f-mono);
  font-size: 16px;
  color: var(--slate);
  font-weight: 500;
  white-space: nowrap;}
body.page-id-492 .entry-content .line-card-skucount .em {color: var(--ink); font-weight: 700;}
body.page-id-492 .entry-content .line-card-body {display: grid;
  grid-template-columns: 144px 1fr;
  gap: 24px;
  align-items: start;}
body.page-id-492 .entry-content .line-card-thumb {background: var(--paper-2);
  border: 1px solid var(--line);
  height: 96px;
  display: grid;
  place-items: center;
  padding: 8px 12px;
  overflow: hidden;}
body.page-id-492 .entry-content .line-card-thumb img {max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.25s ease;}
body.page-id-492 .entry-content .line-card:hover .line-card-thumb img {transform: scale(1.04);}
body.page-id-492 .entry-content .line-card-title {font-family: var(--f-display);
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 12px;
  letter-spacing: 0.005em;}
body.page-id-492 .entry-content .line-card-desc {color: var(--slate);
  font-size:16px;
  line-height: 1.55;
  margin-bottom: 0;}
body.page-id-492 .entry-content .sku-list {display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 22px;
  margin-bottom: 24px;}
body.page-id-492 .entry-content .sku-chip {font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.04em;
  color: var(--slate);
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  padding: 5px 10px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;}
body.page-id-492 .entry-content .sku-chip .swatch {width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--steel);
  border: 1px solid rgba(0,0,0,0.10);}
body.page-id-492 .entry-content .sku-chip:hover {border-color: var(--slate); background: var(--paper); color: var(--ink);}
body.page-id-492 .entry-content .sw-yellow {background: #f1c40f;}
body.page-id-492 .entry-content .sw-green {background: #4caf6f;}
body.page-id-492 .entry-content .sw-silver {background: #c4cdd6;}
body.page-id-492 .entry-content .sw-red {background: #c0392b;}
body.page-id-492 .entry-content .sw-orange {background: #e67e22;}
body.page-id-492 .entry-content .sw-peach {background: #ffb98a;}
body.page-id-492 .entry-content .sw-blue {background: #5a8ec7;}
body.page-id-492 .entry-content .sw-purple {background: #8e44ad;}
body.page-id-492 .entry-content .sw-neutral {background: #d8d2c4;}
body.page-id-492 .entry-content .sw-black {background: #1a232f;}
body.page-id-492 .entry-content .sw-white {background: #f7f9fc; border-color: var(--line-strong);}
body.page-id-492 .entry-content .line-card-foot {margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;}
body.page-id-492 .entry-content .line-card-view {font-family: var(--f-mono);
  font-size:15px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;}
body.page-id-492 .entry-content .line-card-view .arrow {transition: transform 0.2s;}
body.page-id-492 .entry-content .line-card:hover .line-card-view .arrow {transform: translateX(4px);}
body.page-id-492 .entry-content .line-card-spec {font-family: var(--f-mono);
  font-size:14px;
  color: var(--steel);
  letter-spacing: 0.04em;}
body.page-id-492 .entry-content .application-note {background: var(--ink);
  color: var(--powder);
  border-top: 4px solid var(--steel);}
body.page-id-492 .entry-content .application-note-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 56px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;}
body.page-id-492 .entry-content .application-note .pill {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  background: var(--steel);
  color: var(--paper);
  padding: 8px 14px;
  font-weight: 600;
  white-space: nowrap;}
body.page-id-492 .entry-content .application-note .body {font-size: 18px;
  line-height: 1.55;
  color: var(--powder);}
body.page-id-492 .entry-content .application-note .body strong {color: var(--paper); font-weight: 600;}
body.page-id-492 .entry-content .application-note a.btn {background: var(--paper); color: var(--ink);}
body.page-id-492 .entry-content .application-note a.btn:hover {background: var(--steel); color: var(--paper);}
@media (max-width: 1024px) {
body.page-id-492 .entry-content .category-head, body.page-id-492 .entry-content .line-grid, body.page-id-492 .entry-content .footer-top, body.page-id-492 .entry-content .dual-cta {grid-template-columns: 1fr !important;}
body.page-id-492 .entry-content .line-card {border-right: none;}
body.page-id-492 .entry-content .line-card:nth-last-child(2):nth-child(odd) {border-bottom: 1px solid var(--line-strong);}
body.page-id-492 .entry-content .application-note-inner {grid-template-columns: 1fr; gap: 24px;}
body.page-id-492 .entry-content .category {padding: 64px 0;}
body.page-id-492 .entry-content .cat-nav {position: static;}
body.page-id-492 .entry-content .cat-nav-inner {gap: 0;}
body.page-id-492 .entry-content .cat-nav .count {display: none;}
}
@media (max-width: 640px) {
body.page-id-492 .entry-content .line-card-body {grid-template-columns: 1fr; gap: 18px;}
body.page-id-492 .entry-content .line-card-thumb {height: 120px;}
body.page-id-492 .entry-content .line-card {padding: 26px 22px 24px;}
body.page-id-492 .entry-content .page-header-inner {padding: 32px 24px 48px;}
}
body.page-id-492 .entry-content .blog-section {background: var(--paper); padding: 96px 0;}
body.page-id-492 .entry-content .blog-section-inner {max-width: 1320px; margin: 0 auto; padding: 0 32px;}
body.page-id-492 .entry-content .blog-section-head {margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1.5px solid var(--slate);}
body.page-id-492 .entry-content .blog-section-title {font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 4.6vw, 64px); line-height: 0.95; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 8px;}
body.page-id-492 .entry-content .blog-section-meta {font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600;}
body.page-id-492 .entry-content .blog-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;}
body.page-id-492 .entry-content .blog-card {display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); transition: border-color 0.18s ease, transform 0.18s ease;}
body.page-id-492 .entry-content .blog-card:hover {border-color: var(--slate); transform: translateY(-3px);}
body.page-id-492 .entry-content .blog-card .media {aspect-ratio: 16/10; border-bottom: 1px solid var(--line); overflow: hidden;}
body.page-id-492 .entry-content .blog-card .media img {width: 100%; height: 100%; object-fit: cover; display: block;}
body.page-id-492 .entry-content .blog-card .body {padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1;}
body.page-id-492 .entry-content .blog-card .meta {font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600; margin-bottom: 14px; display: flex; gap: 12px; align-items: center;}
body.page-id-492 .entry-content .blog-card .meta .dot {color: var(--line-strong);}
body.page-id-492 .entry-content .blog-card h3 {font-family: var(--f-display); font-size: 28px; line-height: 1; color: var(--ink); margin-bottom: 14px; font-weight: 400; letter-spacing: 0.005em;}
body.page-id-492 .entry-content .blog-card p {color: var(--slate); font-size: 16px; line-height: 1.55; margin-bottom: 24px;}
body.page-id-492 .entry-content .blog-card .read {margin-top: auto; font-family: var(--f-mono); font-size:14px; letter-spacing: 0.08em; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px;}
body.page-id-492 .entry-content .blog-card:hover .read .arrow {transform: translateX(4px);}
body.page-id-492 .entry-content .blog-card .read .arrow {transition: transform 0.2s;}
@media (max-width: 1024px) {
body.page-id-492 .entry-content .blog-grid {grid-template-columns: 1fr;}
}
body.page-id-492 .entry-content .btn {display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; font-family: var(--f-mono); font-size: 16px; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; border: none; transition: all 0.15s ease; white-space: nowrap; line-height: 1;}
body.page-id-492 .entry-content .btn-primary {background: var(--slate); color: var(--paper);}
body.page-id-492 .entry-content .btn-primary:hover {background: var(--ink);}
body.page-id-492 .entry-content .btn-ghost {background: transparent; color: var(--slate); border: 1px solid var(--line-strong);}
body.page-id-492 .entry-content .btn-ghost:hover {background: var(--slate); color: var(--paper); border-color: var(--slate);}
body.page-id-492 .entry-content .btn .arrow {transition: transform 0.2s;}
body.page-id-492 .entry-content .btn:hover .arrow {transform: translateX(4px);}
body.page-id-492 .entry-content .page-header {position: relative;
  background: var(--powder);
  border-bottom: 1px solid var(--line);
  overflow: hidden;}
body.page-id-492 .entry-content .page-header::before {content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(52,64,78,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,64,78,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  pointer-events: none;}
body.page-id-492 .entry-content .page-header-inner {position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 44px 32px 64px;}
body.page-id-492 .entry-content .breadcrumb {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 500;}
body.page-id-492 .entry-content .breadcrumb a:hover {color: var(--ink);}
body.page-id-492 .entry-content .breadcrumb .sep {color: var(--steel-2);}
body.page-id-492 .entry-content .breadcrumb .here {color: var(--ink); font-weight: 600;}
body.page-id-492 .entry-content .page-kicker {display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--slate);
  margin-bottom: 22px;}
body.page-id-492 .entry-content .page-kicker .dot {width: 10px; height: 10px; background: var(--steel); border-radius: 50%; box-shadow: 0 0 0 5px rgba(78,107,140,0.22);}
body.page-id-492 .entry-content .page-title-grid {display: grid;
  grid-template-columns: 1.3fr 0.85fr;
  gap: 64px;
  align-items: end;}
body.page-id-492 .entry-content .page-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 92px);
  line-height: 0.95;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 26px;}
body.page-id-492 .entry-content .page-title .accent {color: var(--steel);}
body.page-id-492 .entry-content .page-lede {font-size: 19px;
  line-height: 1.55;
  color: var(--slate);
  max-width: 680px;}
body.page-id-492 .entry-content .page-lede strong {color: var(--ink); font-weight: 600;}
body.page-id-492 .entry-content .cat-stats {background: var(--paper);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--steel);}
body.page-id-492 .entry-content .cat-stats-row {display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);}
body.page-id-492 .entry-content .cat-stats-row:last-child {border-bottom: none;}
body.page-id-492 .entry-content .cat-stats-cell {padding: 18px 22px;
  font-family: var(--f-mono);
  font-size:16px;}
body.page-id-492 .entry-content .cat-stats-cell:first-child {border-right: 1px solid var(--line);
  color: var(--steel);
  letter-spacing: 0.10em;
  font-weight: 600;}
body.page-id-492 .entry-content .cat-stats-cell:last-child {color: var(--ink);
  font-weight: 600;
  font-size:15px;
  letter-spacing: 0.04em;}
body.page-id-492 .entry-content .sub-nav {background: var(--ink);
  border-bottom: 3px solid var(--steel);
  position: sticky;
  top: 109px;
  z-index: 90;}
body.page-id-492 .entry-content .sub-nav-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: stretch;
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  font-weight: 600;
  flex-wrap: wrap;}
body.page-id-492 .entry-content .sub-nav-label {padding: 18px 24px 18px 0;
  color: var(--steel-2);
  border-right: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  gap: 12px;}
body.page-id-492 .entry-content .sub-nav-label .arrow-down {color: var(--steel);}
body.page-id-492 .entry-content .sub-nav a {color: var(--powder);
  padding: 18px 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-right: 1px solid rgba(255,255,255,0.10);
  transition: background 0.15s ease, color 0.15s ease;}
body.page-id-492 .entry-content .sub-nav a:hover {background: var(--slate); color: var(--paper);}
body.page-id-492 .entry-content .sub-nav a .num {color: var(--steel-2); font-weight: 500;}
body.page-id-492 .entry-content .mechanism {padding: 96px 0 80px;
  background: var(--paper);
  scroll-margin-top: 175px;}
body.page-id-492 .entry-content .mechanism-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;}
body.page-id-492 .entry-content .section-head {display: block;
  margin-bottom: 56px;
  padding-bottom: 28px;
  border-bottom: 1.5px solid var(--slate);}
body.page-id-492 .entry-content .section-meta {font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--slate);
  font-weight: 600;
  margin-bottom: 16px;}
body.page-id-492 .entry-content .section-meta .num {display: block;
  font-family: var(--f-display);
  font-size: 56px;
  color: var(--steel);
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 12px;}
body.page-id-492 .entry-content .section-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 16px;}
body.page-id-492 .entry-content .section-blurb {color: var(--slate);
  font-size: 17px;
  line-height: 1.55;
  max-width: 680px;}
body.page-id-492 .entry-content .mech-grid {display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--paper);
  border: 1px solid var(--line-strong);}
body.page-id-492 .entry-content .mech-card {padding: 36px 32px 32px;
  border-right: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 16px;}
body.page-id-492 .entry-content .mech-card:last-child {border-right: none;}
body.page-id-492 .entry-content .mech-num {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--steel);}
body.page-id-492 .entry-content .mech-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.005em;}
body.page-id-492 .entry-content .mech-desc {font-size: 16px;
  line-height: 1.55;
  color: var(--slate);}
body.page-id-492 .entry-content .mech-tags {display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;}
body.page-id-492 .entry-content .mech-tag {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 6px 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--slate);}
body.page-id-492 .entry-content .catalog {padding: 96px 0 64px;
  background: var(--paper-2);
  scroll-margin-top: 175px;}
body.page-id-492 .entry-content .catalog-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;}
body.page-id-492 .entry-content .brand-line {background: var(--paper);
  border: 1px solid var(--line-strong);
  margin-bottom: 32px;}
body.page-id-492 .entry-content .brand-line-head {padding: 28px 32px;
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 28px;
  align-items: center;
  border-bottom: 1px solid var(--line);}
body.page-id-492 .entry-content .brand-line-thumb {aspect-ratio: 4/3;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: 14px;}
body.page-id-492 .entry-content .brand-line-thumb img {max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;}
body.page-id-492 .entry-content .brand-line-meta {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--steel);
  margin-bottom: 8px;}
body.page-id-492 .entry-content .brand-line-name {font-family: var(--f-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 6px;}
body.page-id-492 .entry-content .brand-line-desc {font-size:16px;
  color: var(--slate);
  line-height: 1.5;
  max-width: 720px;}
body.page-id-492 .entry-content .brand-line-stats {display: flex;
  gap: 32px;
  font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.06em;
  color: var(--steel);
  font-weight: 500;
  align-self: end;
  white-space: nowrap;}
body.page-id-492 .entry-content .brand-line-stats .em {color: var(--ink); font-weight: 700; font-size:16px;}
body.page-id-492 .entry-content .sku-grid {display: grid;
  grid-template-columns: repeat(4, 1fr);}
body.page-id-492 .entry-content .sku-card {padding: 24px 22px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.15s ease;
  cursor: pointer;
  color: var(--slate);
  position: relative;}
body.page-id-492 .entry-content .sku-card:hover {background: var(--paper-2);}
body.page-id-492 .entry-content .sku-card:hover .sku-link::after {transform: translateX(4px);}
body.page-id-492 .entry-content .sku-card:nth-child(4n) {border-right: none;}
body.page-id-492 .entry-content .sku-card:nth-last-child(-n+4):not(:nth-last-child(n+5)) {border-bottom: none;}
body.page-id-492 .entry-content .sku-head {display: flex;
  align-items: center;
  gap: 14px;}
body.page-id-492 .entry-content .color-swatch {width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
  flex-shrink: 0;
  position: relative;
  background: var(--paper);}
body.page-id-492 .entry-content .color-swatch::before {content: "";
  position: absolute;
  inset: 2px;
  background: var(--swatch, var(--paper));}
body.page-id-492 .entry-content .sku-id {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--steel);}
body.page-id-492 .entry-content .sku-name {font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.005em;}
body.page-id-492 .entry-content .sku-strength {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 5px 9px;
  display: inline-block;
  align-self: flex-start;
  color: var(--paper);}
body.page-id-492 .entry-content .sku-strength.low {background: var(--strength-low); color: var(--ink);}
body.page-id-492 .entry-content .sku-strength.med {background: var(--strength-med); color: var(--ink);}
body.page-id-492 .entry-content .sku-strength.high {background: var(--strength-high);}
body.page-id-492 .entry-content .sku-strength.perm {background: var(--strength-perm);}
body.page-id-492 .entry-content .sku-use {font-size:16px;
  line-height: 1.5;
  color: var(--slate);}
body.page-id-492 .entry-content .sku-link {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--steel);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;}
body.page-id-492 .entry-content .sku-link::after {content: "→"; transition: transform 0.2s;}
body.page-id-492 .entry-content .selector {padding: 96px 0;
  background: var(--ink);
  color: var(--powder);
  scroll-margin-top: 175px;}
body.page-id-492 .entry-content .selector-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;}
body.page-id-492 .entry-content .selector-head {display: grid;
  grid-template-columns: auto 1fr;
  gap: 64px;
  margin-bottom: 56px;
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1.5px solid var(--steel);}
body.page-id-492 .entry-content .selector .section-meta {color: var(--steel-2);}
body.page-id-492 .entry-content .selector .section-meta .num {color: var(--steel);}
body.page-id-492 .entry-content .selector .section-title {color: var(--paper);}
body.page-id-492 .entry-content .selector .section-blurb {color: var(--powder); opacity: 0.85;}
body.page-id-492 .entry-content .selector-table {background: var(--slate-2);
  border: 1px solid rgba(255,255,255,0.12);}
body.page-id-492 .entry-content .selector-row {display: grid;
  grid-template-columns: 200px 1fr 1.3fr 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.10);}
body.page-id-492 .entry-content .selector-row.head {background: var(--ink);
  border-bottom: 2px solid var(--steel);}
body.page-id-492 .entry-content .selector-row.head > div {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.10em;
  color: var(--steel-2);
  font-weight: 600;
  padding: 18px 22px;}
body.page-id-492 .entry-content .selector-row:last-child {border-bottom: none;}
body.page-id-492 .entry-content .selector-row > div {padding: 22px;}
body.page-id-492 .entry-content .selector-row > div + div {border-left: 1px solid rgba(255,255,255,0.08);}
body.page-id-492 .entry-content .sel-chip {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 6px 10px;
  display: inline-block;}
body.page-id-492 .entry-content .sel-chip.low {background: var(--strength-low); color: var(--ink);}
body.page-id-492 .entry-content .sel-chip.med {background: var(--strength-med); color: var(--ink);}
body.page-id-492 .entry-content .sel-chip.high {background: var(--strength-high); color: var(--paper);}
body.page-id-492 .entry-content .sel-chip.perm {background: var(--paper); color: var(--ink);}
body.page-id-492 .entry-content .sel-cell-title {font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--paper);
  margin-bottom: 6px;
  line-height: 1.1;}
body.page-id-492 .entry-content .sel-cell-detail {font-size:16px;
  color: var(--powder);
  opacity: 0.78;
  line-height: 1.5;}
body.page-id-492 .entry-content .sel-pick {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.06em;
  color: var(--steel-2);
  line-height: 1.5;}
body.page-id-492 .entry-content .sel-pick em {font-style: normal; color: var(--paper); font-weight: 600;}
body.page-id-492 .entry-content .spec-cross {padding: 96px 0;
  background: var(--paper);
  scroll-margin-top: 175px;}
body.page-id-492 .entry-content .spec-cross-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;}
body.page-id-492 .entry-content .spec-grid {display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line-strong);}
body.page-id-492 .entry-content .spec-card {padding: 32px 28px;
  border-right: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 18px;}
body.page-id-492 .entry-content .spec-card:last-child {border-right: none;}
body.page-id-492 .entry-content .spec-card-label {font-family: var(--f-mono);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--steel);}
body.page-id-492 .entry-content .spec-card-eg {font-family: var(--f-mono);
  font-size:16px;
  color: var(--ink);
  line-height: 1.7;}
body.page-id-492 .entry-content .spec-card-eg .em {background: var(--powder); padding: 2px 6px; font-weight: 600;}
body.page-id-492 .entry-content .spec-card-cta {font-family: var(--f-mono);
  font-size:14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  gap: 8px;}
body.page-id-492 .entry-content .spec-card-cta::after {content: "→";}
body.page-id-492 .entry-content .pick-block {padding: 96px 0;
  background: var(--powder);
  scroll-margin-top: 175px;}
body.page-id-492 .entry-content .pick-block-inner {max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;}
body.page-id-492 .entry-content .pick-content h2 {font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 0.95;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 22px;}
body.page-id-492 .entry-content .pick-content p {font-size: 17px;
  line-height: 1.6;
  color: var(--slate);
  margin-bottom: 28px;
  max-width: 540px;}
body.page-id-492 .entry-content .pick-actions {display: flex; gap: 14px; flex-wrap: wrap;}
body.page-id-492 .entry-content .pick-checklist {background: var(--paper);
  border: 1px solid var(--line-strong);
  padding: 36px 32px;}
body.page-id-492 .entry-content .pick-checklist :is(h3,h4) {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.12em;
  color: var(--steel);
  font-weight: 700;
  margin-bottom: 20px;}
body.page-id-492 .entry-content .pick-checklist ul {list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;}
body.page-id-492 .entry-content .pick-checklist li {display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size:16px;
  color: var(--slate);
  line-height: 1.5;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);}
body.page-id-492 .entry-content .pick-checklist li:last-child {padding-bottom: 0; border-bottom: none;}
body.page-id-492 .entry-content .pick-checklist li::before {content: "→";
  color: var(--steel);
  font-weight: 700;
  font-family: var(--f-mono);}
body.page-id-492 .entry-content .pick-checklist li strong {color: var(--ink); font-weight: 600;}
@media (max-width: 1024px) {
body.page-id-492 .entry-content .page-title-grid, body.page-id-492 .entry-content .section-head, body.page-id-492 .entry-content .pick-block-inner, body.page-id-492 .entry-content .footer-top, body.page-id-492 .entry-content .dual-cta {grid-template-columns: 1fr !important; gap: 32px !important;}
body.page-id-492 .entry-content .selector-row {grid-template-columns: 130px 1fr;}
body.page-id-492 .entry-content .selector-row.head > div:nth-child(3), body.page-id-492 .entry-content .selector-row.head > div:nth-child(4), body.page-id-492 .entry-content .selector-row > div:nth-child(3), body.page-id-492 .entry-content .selector-row > div:nth-child(4) {display: none;}
body.page-id-492 .entry-content .sub-nav {position: static;}
body.page-id-492 .entry-content .mech-grid, body.page-id-492 .entry-content .spec-grid {grid-template-columns: 1fr;}
body.page-id-492 .entry-content .mech-card {border-right: none; border-bottom: 1px solid var(--line-strong);}
body.page-id-492 .entry-content .mech-card:last-child {border-bottom: none;}
body.page-id-492 .entry-content .spec-card {border-right: none; border-bottom: 1px solid var(--line-strong);}
body.page-id-492 .entry-content .spec-card:last-child {border-bottom: none;}
}
@media (max-width: 768px) {
body.page-id-492 .entry-content .sku-grid {grid-template-columns: repeat(2, 1fr);}
body.page-id-492 .entry-content .sku-card:nth-child(4n) {border-right: 1px solid var(--line);}
body.page-id-492 .entry-content .sku-card:nth-child(2n) {border-right: none;}
body.page-id-492 .entry-content .sku-card:nth-last-child(-n+4):not(:nth-last-child(n+5)) {border-bottom: 1px solid var(--line);}
body.page-id-492 .entry-content .sku-card:last-child {border-bottom: none;}
body.page-id-492 .entry-content .sku-card:nth-last-child(2):nth-child(odd) {border-bottom: none;}
body.page-id-492 .entry-content .brand-line-head {grid-template-columns: 1fr;}
body.page-id-492 .entry-content .brand-line-thumb {max-width: 220px;}
body.page-id-492 .entry-content .page-header-inner {padding: 32px 24px 48px;}
}
@media (max-width: 560px) {
body.page-id-492 .entry-content .sku-grid {grid-template-columns: 1fr;}
body.page-id-492 .entry-content .sku-card {border-right: none !important;}
body.page-id-492 .entry-content .cat-stats-row {grid-template-columns: 1fr;}
body.page-id-492 .entry-content .cat-stats-cell:first-child {border-right: none; border-bottom: 1px solid var(--line);}
}
body.page-id-492 .entry-content .blog-section {background: var(--paper); padding: 96px 0;}
body.page-id-492 .entry-content .blog-section-inner {max-width: 1320px; margin: 0 auto; padding: 0 32px;}
body.page-id-492 .entry-content .blog-section-head {margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1.5px solid var(--slate);}
body.page-id-492 .entry-content .blog-section-title {font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 4.6vw, 64px); line-height: 0.95; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 8px;}
body.page-id-492 .entry-content .blog-section-meta {font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600;}
body.page-id-492 .entry-content .blog-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;}
body.page-id-492 .entry-content .blog-card {display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); transition: border-color 0.18s ease, transform 0.18s ease;}
body.page-id-492 .entry-content .blog-card:hover {border-color: var(--slate); transform: translateY(-3px);}
body.page-id-492 .entry-content .blog-card .media {aspect-ratio: 16/10; border-bottom: 1px solid var(--line); overflow: hidden;}
body.page-id-492 .entry-content .blog-card .media img {width: 100%; height: 100%; object-fit: cover; display: block;}
body.page-id-492 .entry-content .blog-card .body {padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1;}
body.page-id-492 .entry-content .blog-card .meta {font-family: var(--f-mono); font-size:14px; letter-spacing: 0.10em; color: var(--steel); font-weight: 600; margin-bottom: 14px; display: flex; gap: 12px; align-items: center;}
body.page-id-492 .entry-content .blog-card .meta .dot {color: var(--line-strong);}
body.page-id-492 .entry-content .blog-card h3 {font-family: var(--f-display); font-size: 28px; line-height: 1; color: var(--ink); margin-bottom: 14px; font-weight: 400; letter-spacing: 0.005em;}
body.page-id-492 .entry-content .blog-card p {color: var(--slate); font-size: 16px; line-height: 1.55; margin-bottom: 24px;}
body.page-id-492 .entry-content .blog-card .read {margin-top: auto; font-family: var(--f-mono); font-size:14px; letter-spacing: 0.08em; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px;}
body.page-id-492 .entry-content .blog-card:hover .read .arrow {transform: translateX(4px);}
body.page-id-492 .entry-content .blog-card .read .arrow {transition: transform 0.2s;}
@media (max-width: 1024px) {
body.page-id-492 .entry-content .blog-grid {grid-template-columns: 1fr;}
}
body.page-id-492 .entry-content .brand-line-head.no-thumb {grid-template-columns: 1fr auto;}
body.page-id-492 .entry-content .sku-strength.type {background: var(--steel); color: var(--paper);}
body.page-id-492 .entry-content .sku-strength.neutral {background: var(--slate); color: var(--paper);}
@media (max-width:768px) {
body.page-id-492 .entry-content .brand-line-head.no-thumb {grid-template-columns: 1fr;}
}
body.page-id-492 .entry-content .line-card { cursor: default; }
body.page-id-492 .entry-content a.sku-chip { text-decoration: none; }
body.page-id-492 .entry-content a.line-card-view { text-decoration: none; cursor: pointer; }
body.page-id-492 .entry-content a.line-card-view:hover { color: var(--steel); }
body.page-id-492 .entry-content a.line-card-view:hover .arrow { transform: translateX(4px); }
body.page-id-492 .archive-title,
body.page-id-492 h1.entry-title,
body.page-id-492 .archive-description .entry-title,
body.page-id-492 .taxonomy-archive-description .archive-title { display: none !important; }
body.page-id-492 .entry-content .bg-prodsearch-results { margin-top: 22px; }
body.page-id-492 .entry-content .bg-ps-head {
  font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 14px;
}
body.page-id-492 .entry-content .bg-ps-head strong { color: var(--ink); }
body.page-id-492 .entry-content .bg-ps-loading,
body.page-id-492 .entry-content .bg-ps-empty {
  font-family: var(--f-mono);
  font-size:16px;
  color: var(--slate);
  padding: 18px 0;
}
body.page-id-492 .entry-content .bg-ps-empty a { color: var(--steel); text-decoration: underline; }
body.page-id-492 .entry-content .bg-ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  border: 1px solid var(--line-strong);
}
body.page-id-492 .entry-content .bg-ps-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s ease;
}
body.page-id-492 .entry-content .bg-ps-card:hover { background: var(--paper-2); }
body.page-id-492 .entry-content .bg-ps-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
body.page-id-492 .entry-content .bg-ps-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.page-id-492 .entry-content .bg-ps-thumb-empty { background: var(--paper-2); }
body.page-id-492 .entry-content .bg-ps-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.page-id-492 .entry-content .bg-ps-meta {
  font-family: var(--f-mono);
  font-size:14px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--slate);
}
body.page-id-492 .entry-content .bg-ps-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.page-id-492 .entry-content .bg-ps-arrow {
  flex: 0 0 auto;
  color: var(--steel);
  font-size: 18px;
  transition: transform 0.15s ease;
}
body.page-id-492 .entry-content .bg-ps-card:hover .bg-ps-arrow { transform: translateX(3px); }
body.page-id-492 .entry-content .crossref-block {background: var(--ink);
  color: var(--powder);
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: center;}
body.page-id-492 .entry-content .crossref-block h3 {font-family: var(--f-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  color: var(--paper);
  margin-bottom: 16px;
  letter-spacing: -0.005em;}
body.page-id-492 .entry-content .crossref-block p {color: var(--powder);
  opacity: 0.85;
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 20px;}
body.page-id-492 .entry-content .crossref-block .btn-primary {background: var(--steel);}
body.page-id-492 .entry-content .crossref-block .btn-primary:hover {background: var(--paper); color: var(--ink);}
body.page-id-492 .entry-content .crossref-list {background: var(--slate-2);
  border: 1px solid rgba(255,255,255,0.14);}
body.page-id-492 .entry-content .crossref-list-row {display: grid;
  grid-template-columns: 160px 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.10);}
body.page-id-492 .entry-content .crossref-list-row:last-child {border-bottom: none;}
body.page-id-492 .entry-content .crossref-list-row > div {padding: 16px 22px;}
body.page-id-492 .entry-content .crossref-list-row .agency {font-family: var(--f-mono);
  font-size:13px;
  letter-spacing: 0.10em;
  color: var(--steel-2);
  font-weight: 700;
  border-right: 1px solid rgba(255,255,255,0.10);}
body.page-id-492 .entry-content .crossref-list-row .specs {font-family: var(--f-mono);
  font-size:14px;
  color: var(--paper);
  font-weight: 500;
  letter-spacing: 0.04em;}
@media (max-width: 1100px) {
body.page-id-492 .entry-content .crossref-block {grid-template-columns: 1fr; gap: 32px; padding: 40px 28px;}
}
body.page-id-492 .entry-content .sku-card{border-bottom:1px solid var(--line)!important;}
.bgctx-product .entry-header,
body.page-id-492 .entry-header,
body.page-id-492 .entry-header{margin:0!important;}
body.page-id-492 .entry-content .sku-card,
.bgctx-product .entry-content .sku-card{border-bottom:1px solid var(--line) !important;}

/* Solutions hub: application callout strip + line-card chip swatches */
body.page-id-492 .entry-content .app-callout{background:var(--ink);}
body.page-id-492 .entry-content .app-callout-inner{max-width:1320px;margin:0 auto;padding:44px 32px;display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;}
body.page-id-492 .entry-content .app-callout-pill{font-family:var(--f-mono);font-size:14px;letter-spacing:.12em;color:var(--steel-2);font-weight:700;text-transform:uppercase;margin:0;}
body.page-id-492 .entry-content .app-callout-body{color:var(--powder);font-size:16px;line-height:1.6;margin:0;}
body.page-id-492 .entry-content .app-callout-cta{margin:0;}
body.page-id-492 .entry-content .app-callout-cta a{font-family:var(--f-mono);font-size:16px;font-weight:600;color:var(--paper);white-space:nowrap;}
body.page-id-492 .entry-content .sku-list .swatch{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:6px;vertical-align:middle;border:1px solid rgba(0,0,0,0.12);}
@media (max-width:760px){body.page-id-492 .entry-content .app-callout-inner{grid-template-columns:1fr;gap:16px;}}

/* Solutions "Note" band — reworked to match the homepage .process-callout look
 * (contained dark box, solid "Note" pill, 21px body with inline Read FAQ link).
 * The alignfull .note-band is the full-bleed page-colour wrapper; .note-band-inner
 * re-establishes the 1320 content container so the callout sits at page width. */
body.page-id-492 .entry-content .note-band{padding:40px 0 96px;}
body.page-id-492 .entry-content .note-band-inner{max-width:1320px;margin:0 auto;padding:0 32px;box-sizing:border-box;}
body.page-id-492 .entry-content .note-band .process-callout{margin-top:0;}

/* LT-6871 Selector Guide download links (Resources doc-library + Thread-locking cross-ref) */
.doc-list li a.doc-row-link{display:flex;align-items:center;gap:14px;width:100%;color:inherit;text-decoration:none}
.doc-list li a.doc-row-link:hover{color:inherit}
.doc-list li a.doc-row-link:hover .doc-row-name{text-decoration:underline}
.doc-list li a.doc-row-link .doc-row-arrow{margin-left:auto;transition:transform .15s ease}
.doc-list li a.doc-row-link:hover .doc-row-arrow{transform:translateX(3px)}
.spec-cross-download{margin:0 0 22px}

/* Hub: individual SKU chips are links — lift above the whole-card stretch-link overlay */
body.page-id-492 .entry-content a.sku-chip{position:relative;z-index:3;text-decoration:none;cursor:pointer;}
body.page-id-492 .entry-content .line-card a.sku-chip:hover{border-color:var(--slate);background:var(--paper);color:var(--ink);}

/* Resources Document Library: do not stretch short clusters (kills awkward top/bottom whitespace) */
body.page-id-137 .entry-content .doc-library{align-items:start;}

/* Solutions overview table: remove default paragraph bottom-margin inside cat-stats cells */
body.parent-pageid-492 .entry-content .cat-stats p,
body.parent-pageid-492 .entry-content .cat-stats .cat-stats-cell{margin:0;}

/* Solutions brand-line-stats: render the <p> stats side-by-side. Mai wraps group children in an
   inner-container (block flow), so the flex layout must target that wrapper, not .brand-line-stats. */
body.parent-pageid-492 .entry-content .brand-line-stats > .wp-block-group__inner-container{display:flex !important;gap:32px;flex-wrap:wrap;align-items:baseline;}
body.parent-pageid-492 .entry-content .brand-line-stats p{margin:0;}

/* About: pull quotes (George marked these "PULL QUOTE"; this page is not .prose, so it needs its own style) */
body.page-id-134 .entry-content .pull-quote{font-family:var(--f-display);font-weight:400;font-size:clamp(23px,2.4vw,30px);line-height:1.25;letter-spacing:-0.005em;color:var(--ink);border-left:3px solid var(--steel);padding:4px 0 4px 26px;margin:30px 0;max-width:760px;}
/* About: enlarge the "+" on the 50+ catalog stat (was rendered with the tiny .unit style) */
body.page-id-134 .entry-content .story-stat-v .plus{font:inherit;vertical-align:baseline;margin-left:2px;}
/* About: employees commitment pull quote sits in the dark quality section -> white text */
body.page-id-134 .entry-content .quality-content .pull-quote{color:var(--paper);}

/* ===== ISO page (140): cert-stats sidebar + data tables (George spec) ===== */
body.page-id-140 .cert-stats{background:var(--paper);border:1px solid var(--line-strong);border-top:3px solid var(--steel);padding:0;margin:0;align-self:start;}
body.page-id-140 .cert-stats-head{font-family:var(--f-mono);font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:var(--ink);margin:0;padding:14px 22px;}
body.page-id-140 .cert-stats-list{margin:0;padding:0;}
body.page-id-140 .cert-stat{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:13px 22px;border-bottom:1px solid var(--line);align-items:baseline;}
body.page-id-140 .cert-stat dt{font-family:var(--f-mono);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin:0;}
body.page-id-140 .cert-stat dd{margin:0;font-size:16px;font-weight:600;color:var(--ink);line-height:1.35;}
body.page-id-140 a.cert-dl{display:flex;align-items:center;justify-content:center;gap:9px;margin:0;padding:14px 18px;background:var(--steel);color:var(--paper);font-family:var(--f-mono);font-size:13px;font-weight:700;letter-spacing:.06em;text-decoration:none;transition:background .15s ease;}
body.page-id-140 a.cert-dl:hover{background:var(--ink);}
body.page-id-140 .cert-dl-meta{margin:0;padding:11px 22px;font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;color:var(--steel);border-top:1px solid var(--line);}
body.page-id-140 .page-header-grid{align-items:start;}
/* data tables */
body.page-id-140 .prose .bg-table{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:16px;border:1px solid var(--line-strong);}
body.page-id-140 .prose .bg-table thead th{background:var(--ink);color:var(--paper);font-family:var(--f-mono);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:12px 16px;}
body.page-id-140 .prose .bg-table td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top;color:var(--slate);line-height:1.5;}
body.page-id-140 .prose .bg-table tbody tr:nth-child(even){background:var(--paper-2);}
body.page-id-140 .prose .bg-table td:first-child{font-weight:600;color:var(--ink);white-space:nowrap;}
body.page-id-140 .prose .bg-table.req-table td:first-child,body.page-id-140 .prose .bg-table.doc-table td:first-child{white-space:normal;}
body.page-id-140 .prose .section-kicker{font-family:var(--f-mono);font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin:34px 0 6px;}
@media(max-width:760px){
 body.page-id-140 .prose .bg-table,body.page-id-140 .prose .bg-table tbody,body.page-id-140 .prose .bg-table tr,body.page-id-140 .prose .bg-table td{display:block;width:100%;}
 body.page-id-140 .prose .bg-table thead{display:none;}
 body.page-id-140 .prose .bg-table td{border-top:none;}
 body.page-id-140 .prose .bg-table tr{border-top:1px solid var(--line-strong);padding:6px 0;}
 body.page-id-140 .prose .bg-table td:before{content:attr(data-th);display:block;font-family:var(--f-mono);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin-bottom:2px;}
 body.page-id-140 .cert-stat{grid-template-columns:1fr;gap:2px;}
}
/* For-Distributors: more space after the Request-a-Presentation buttons */
body.page-id-139 .dp-actions{margin-bottom:40px;}
/* Mfr-specs: snapshot table now 3 columns (Status column removed) */
body.page-id-144 .match-table--snapshot .match-table-inner{grid-template-columns:130px 0.85fr 2fr;min-width:560px;}
/* ISO: whitespace above the hero download button */
body.page-id-140 .hero-actions{margin-top:30px;}
/* Mfr-specs spec lookup: 3-column results table (Status column removed) */
body.page-id-144 .xref-table .match-table-inner{grid-template-columns:155px 0.85fr 2fr;}
/* Blog post body: in-content links underlined (site default is text-decoration:none; blog body is not .prose) */
.bgctx-post .entry-content p:not(.breadcrumb):not(.article-tag):not(.label):not(.value):not(.cta-meta) a:not(.btn):not(.btn-primary),
.bgctx-post .entry-content li a:not(.btn){color:var(--steel);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;}
.bgctx-post .entry-content p a:not(.btn):not(.btn-primary):hover{color:var(--ink);text-decoration-color:var(--ink);}
/* Content pages: underline woven inline content links (match .prose style); exclude cards/chips/buttons/breadcrumb/headings */
.entry-content .section-blurb a:not([class]),
.entry-content .page-lede a:not([class]),
.entry-content .overview-lede a:not([class]),
.entry-content .brand-line-desc a:not([class]),
.entry-content .sku-use a:not([class]),
.entry-content .app-callout-body a:not([class]),
body.page-id-139 .entry-content p.d a:not([class]),
body.page-id-134 .entry-content p.wp-block-paragraph:not(.breadcrumb):not(.card-link) a:not([class]){
  color:var(--steel);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;
}
.entry-content .section-blurb a:not([class]):hover,
.entry-content .page-lede a:not([class]):hover,
.entry-content .overview-lede a:not([class]):hover,
.entry-content .brand-line-desc a:not([class]):hover,
.entry-content .sku-use a:not([class]):hover,
.entry-content .app-callout-body a:not([class]):hover,
body.page-id-139 .entry-content p.d a:not([class]):hover,
body.page-id-134 .entry-content p.wp-block-paragraph:not(.breadcrumb):not(.card-link) a:not([class]):hover{
  color:var(--ink);text-decoration-color:var(--ink);
}
/* Contact quick-bar: flex columns (adjustable widths) so the email fits at full phone-size; stack the FASTEST cell */
body.page-id-136 .quick-bar-inner{display:flex;flex-wrap:wrap;}
body.page-id-136 .quick-cell{flex:1 1 auto;}
body.page-id-136 .quick-cell .quick-value{white-space:nowrap;}
body.page-id-136 .quick-cell.action a{display:flex;flex-direction:column;gap:6px;}
/* Contact quick-bar: trim cell padding so all 4 fit one row at full email size (avoid flex-wrap stacking) */
body.page-id-136 .quick-cell{padding:24px 16px;}
/* Contact quick-bar: force a single non-wrapping flex row (handle Mai inner-container + flex-wrap stacking) */
body.page-id-136 .quick-bar-inner{display:flex !important;flex-wrap:nowrap !important;}
body.page-id-136 .entry-content .quick-bar-inner > .wp-block-group__inner-container{display:flex !important;flex-wrap:nowrap !important;width:100%;}
body.page-id-136 .quick-cell{flex:1 1 0 !important;min-width:0 !important;padding:22px 14px !important;}
body.page-id-136 .quick-cell:has(a[href^="mailto:"]){flex-grow:2.3 !important;}
/* Contact quick-bar: inner-container stretches to fill the bar so cells fill the full row */
body.page-id-136 .entry-content .quick-bar-inner > .wp-block-group__inner-container{flex:1 1 auto !important;width:100% !important;}
/* Contact quick-bar: span full bar width (was capped at 1320px centered) */
body.page-id-136 .quick-bar-inner{max-width:none !important;}
/* Contact quick-bar: full width + 25px side padding on columns + divider on the LEFT of each box */
body.page-id-136 .quick-bar-inner{width:100% !important;max-width:none !important;}
body.page-id-136 .quick-cell{padding:24px 25px !important;border-right:none !important;border-left:1px solid rgba(255,255,255,0.10) !important;}
body.page-id-136 .quick-cell:first-child{border-left:none !important;}
/* Contact quick-bar: cap content at 1320px (kept centered via base margin:0 auto), boxes still fill it via width:100% */
body.page-id-136 .quick-bar-inner{max-width:1320px !important;}
/* Contact quick-bar: every box (incl. first) gets a left border */
body.page-id-136 .quick-cell:first-child{border-left:1px solid rgba(255,255,255,0.10) !important;}

/* ============================================================
   MOBILE/TABLET RESPONSIVENESS FIXES (appended)
   ============================================================ */
/* Contact (page-id-136) quick-bar: the desktop nowrap-flex hacks apply at all
   widths and crush the 4 cells on mobile. Re-stack on tablet/phone. */
@media (max-width: 768px){
  body.page-id-136 .quick-bar-inner{display:block !important;}
  body.page-id-136 .quick-bar-inner > .wp-block-group__inner-container,
  body.page-id-136 .entry-content .quick-bar-inner > .wp-block-group__inner-container{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    flex-wrap:wrap !important;
    width:100% !important;
  }
  body.page-id-136 .quick-cell{flex:1 1 auto !important;min-width:0 !important;padding:18px 18px !important;}
  body.page-id-136 .quick-cell .quick-value{white-space:normal !important;overflow-wrap:anywhere;}
}
@media (max-width: 480px){
  body.page-id-136 .quick-bar-inner > .wp-block-group__inner-container,
  body.page-id-136 .entry-content .quick-bar-inner > .wp-block-group__inner-container{
    grid-template-columns:1fr !important;
  }
}

/* Content grids that were defined at top-level with NO mobile collapse —
   fold to a single column below the site's primary 1024px breakpoint so they
   don't overflow / clip on tablet and phone. */
@media (max-width: 1024px){
  .doc-library,
  .compliance-grid,
  .story-grid,
  .what-grid,
  .quality-grid,
  .entities-list,
  .agency-grid,
  .dist-inner,
  .loc-layout,
  .media-card,
  .split-card,
  .page-title-grid,
  .agency-stats,
  .field-row.tri {
    grid-template-columns: 1fr !important;
  }
}

/* Home — Bradley Group section: heading + "Look for the White Patch" heritage side by side.
   (Mai wraps group children in .wp-block-group__inner-container, so flex must go there.) */
.group-header-row { width:100% !important; padding:0 !important; }
.group-header-row > .wp-block-group__inner-container {
  display:flex !important; justify-content:space-between !important; align-items:flex-start !important; gap:48px; flex-wrap:wrap; width:100% !important; box-sizing:border-box !important;
  padding:0 !important; margin-left:0 !important; margin-right:0 !important; max-width:none !important;
}
.group-header-row > .wp-block-group__inner-container > .section-head { flex:0 1 480px !important; }
.group-header-row > .wp-block-group__inner-container > .brand-heritage { margin-left:auto !important; flex:0 0 auto !important; }

/* Home — "From the archives" heritage: image and caption side by side */
.brand-heritage > .wp-block-group__inner-container {
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.brand-heritage .wp-block-image { flex-shrink:0; }

/* Home heritage: stack image over caption on phones (side-by-side overflows) */
@media (max-width:600px){
  .brand-heritage { max-width:100% !important; }
  .brand-heritage > .wp-block-group__inner-container { flex-direction:column; align-items:flex-start; gap:16px; }
  .heritage-cap { max-width:none !important; }
}

/* =============================================================
 * HOME CONTAINER NORMALIZATION (2026-06-29)
 * Section content was landing at inconsistent left edges
 * (~x53 / x75 / x107) because of layered alignfull + inner-wrapper
 * padding interactions. Force ONE canonical centred 1320 column
 * with 32px gutters so every heading, divider, grid and photo
 * lines up at the same x as the header (92px @ 1440 viewport).
 * Desktop only; mobile (<=1024) keeps its stacked padding.
 * ============================================================= */
@media (min-width: 1025px) {
  .bgctx-home .entry-content > .alignfull {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .bgctx-home .hero-inner,
  .bgctx-home .stats-inner,
  .bgctx-home .entry-content .section {
    max-width: 1320px !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
  }
}

/* Home grid-content alignment (2026-06-29): the process steps and the
 * company cards sit in grids whose outer box aligns to the 1320 frame,
 * but their cell padding (process-step 0 36px; group-card 44px 40px)
 * insets the first/last column content ~36-40px. Zero the outermost
 * gutters so step + card content lines up with the section headings
 * and the rest of the page at x92 / x1348. Desktop only. */
@media (min-width: 1025px) {
  .bgctx-home .process-step:first-child { padding-left: 0 !important; }
  .bgctx-home .process-step:last-child  { padding-right: 0 !important; }
  .bgctx-home .process-grid::before { left: 0 !important; right: 0 !important; }

  .bgctx-home .group-grid { border-left: 0 !important; border-right: 0 !important; }
  .bgctx-home .group-card:first-child { padding-left: 0 !important; }
  .bgctx-home .group-card:last-child  { padding-right: 0 !important; }
}

/* Stat-bar first-cell alignment (2026-06-29): full-bleed spec/quick bars had
 * their first cell's content inset ~26-28px by cell padding, so values floated
 * at ~x118 while all other page content sits at x92 (matches the home stats bar
 * which has no first-cell inset). Zero the leading cell's left padding. */
.bgctx-product .entry-content .attr-cell:first-child { padding-left: 0 !important; }
body.page-id-136 .quick-cell:first-child { padding-left: 0 !important; }

/* Terms entities-band: full-bleed band's centred 1320 inner had no gutter
 * (band's 32px padding is zeroed by the non-home alignfull rule), so content
 * sat at ~x60 instead of x92. Re-create the 32px gutter inside the 1320 frame. */
.entities-band { padding-left: 0 !important; padding-right: 0 !important; }
.entities-band-inner {
  max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important;
  padding-left: 32px !important; padding-right: 32px !important; box-sizing: border-box !important;
}

/* =============================================================
 * HEADER SEARCH OVERLAY (2026-06-29)
 * The header search icon opens a full-width search box that covers
 * the entire header bar (.site-header is position:sticky, so this
 * absolute overlay fills it). Built/wired by js/header-search.js.
 * ============================================================= */
.bg-search-overlay {
  position: absolute;
  inset: 0;
  /* must sit above the mobile hamburger (.menu-toggle is z-index:100) so the
     expanded search box hides it instead of the hamburger showing on top */
  z-index: 300;
  display: flex;
  align-items: center;
  background: var(--paper, #fff);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease;
}
.bg-search-overlay.is-open { opacity: 1; visibility: visible; }
.bg-search-form {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}
.bg-search-icon { flex-shrink: 0; display: flex; color: var(--steel, #4e6b8c); }
.bg-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--f-display, sans-serif);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 46px);
  line-height: 1;
  color: var(--ink, #1a232f);
  padding: 0;
  letter-spacing: -0.01em;
}
.bg-search-input::placeholder { color: var(--steel-2, #8aa0b6); opacity: 1; }
.bg-search-input:focus { outline: none; }
.bg-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bg-search-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  color: var(--slate, #34404e);
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.bg-search-close:hover { background: var(--line, #e6eaee); color: var(--ink, #1a232f); }
@media (max-width: 600px) {
  .bg-search-form { gap: 12px; padding: 0 18px; }
  .bg-search-icon svg { width: 22px; height: 22px; }
  .bg-search-input { font-size: 22px; }
  .bg-search-close { width: 38px; height: 38px; }
}

/* Header search input/close: beat the theme's input[type=search] + button
 * rules (higher specificity + !important) so the field is large and borderless. */
.bg-search-overlay .bg-search-form input.bg-search-input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--f-display, sans-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(26px, 3.6vw, 46px) !important;
  line-height: 1 !important;
  color: var(--ink, #1a232f) !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.bg-search-overlay .bg-search-form button.bg-search-close {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.bg-search-overlay .bg-search-form button.bg-search-close:hover {
  background: var(--line, #e6eaee) !important;
}.bg-search-overlay .bg-search-input::placeholder { font-size: clamp(28px, 4vw, 48px) !important; color: var(--steel-2, #8aa0b6) !important; opacity: 1 !important; }
.bg-search-overlay .bg-search-input::-webkit-input-placeholder { font-size: clamp(28px, 4vw, 48px) !important; color: var(--steel-2, #8aa0b6) !important; }

/* =============================================================
 * MOBILE HAMBURGER ALIGNMENT (2026-07-01, updated 2026-07-02)
 * Superseded by the ≤1200px block above: the right section is now KEPT
 * visible (as a flex row) to host the search icon beside the hamburger,
 * rather than fully hidden. (Rule intentionally left as a no-op marker.)
 * ============================================================= */

/* =============================================================
 * SEARCH RESULTS PAGE (2026-07-01)
 * The non-home globals hide Mai's #page-header (custom pages supply
 * their own) and un-constrain .content (for alignfull blocks). The
 * default search template relies on both — restore them, scoped to
 * search results: show the H1 band + constrain the results list.
 * ============================================================= */
body.search #page-header { display: block !important; }
body.search .page-header-inner { max-width: 1320px; margin: 0 auto; padding: 56px 32px; }
body.search .page-header-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(38px, 5vw, 64px); line-height: 0.98;
  color: var(--ink); letter-spacing: -0.005em; margin: 0;
}
body.search main.content {
  max-width: 1320px !important; margin: 0 auto !important;
  padding: 56px 32px 96px !important; box-sizing: border-box;
}
/* Search H1 left-aligned to match the rest of the site (Mai centres it by default). */
body.search .page-header-wrap,
body.search .page-header-inner { text-align: left !important; align-items: flex-start !important; justify-content: flex-start !important; }

/* Mobile topbar (2026-07-01): hide the location/ISO/Est cluster on mobile so the
 * util-bar isn't a tall stacked block — keep the phone + email (right cluster). */
@media (max-width: 960px) {
  .util-bar .left { display: none !important; }
  .util-bar .inner { justify-content: center !important; }
}

/* Resources "Available Upon Request" — per-row Request button (2026-07-01) */
.doc-row-btn{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:var(--paper) !important;font-family:var(--f-mono);font-size:14px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:7px 13px;border-radius:2px;white-space:nowrap;transition:background .15s ease;}
.doc-list a:hover .doc-row-btn{background:var(--steel);}
.doc-row-btn .arrow{transition:transform .15s ease;}
.doc-list a:hover .doc-row-btn .arrow{transform:translateX(2px);}

/* Mobile: request rows — drop the Request button to its own line so the title
 * keeps full width (the fixed button otherwise squeezes text on phones). */
@media (max-width: 600px) {
  .doc-list a[href="/contact/"] {
    grid-template-columns: auto 1fr !important;
    row-gap: 10px !important;
    align-items: start !important;
  }
  .doc-list a[href="/contact/"] .doc-row-btn {
    grid-column: 2 !important;
    justify-self: start !important;
  }
}

/* ============================================================
   WCAG AA text-contrast fixes (2026-07-01)
   Audited every rendered text node via headless-Chrome CDP.
   Fixes keep the palette but pick the tone that passes on each
   background. !important / extra specificity only where an
   aggressive page rule (page-id-134 link styling) or nested
   button markup (<p class="btn"><a>) would otherwise re-assert
   a failing colour.
   ============================================================ */
/* 1. Separator glyphs ("·" / "/") → tone that passes on light bg */
.blog-card .meta .dot, .featured-meta .dot, .post-meta .dot,
.workshop-floor .entry .entry-meta-before-content .dot,
.bgctx-product .entry-content .blog-card .meta .dot,
.bgctx-catalog .entry-content .blog-card .meta .dot,
.bgctx-typearchive .entry-content .blog-card .meta .dot,
body.parent-pageid-492 .entry-content .blog-card .meta .dot,
body.page-id-492 .entry-content .blog-card .meta .dot{color:var(--steel);}     /* on light: 5.5 */
.breadcrumb .sep, .hero-breadcrumb .sep, .line-mark .sep,
.dept-contact .sep{color:var(--slate) !important;}                             /* on light powder: 8.7 */
.footer-family .ff-sep{color:var(--steel-2);}                                  /* on ink: 8.1 */

/* 2. Careers hiring-process step eyebrow (steel on dark → steel-2) */
body.page-id-135 .process-step{color:var(--steel-2);}                          /* on slate-2: 6.6 */

/* 3. for-distributors step numbers (powder on white → steel) */
body.page-id-139 .n{color:var(--steel) !important;}                            /* large, on white: 5.5 */

/* 4. Content + contact links inside dark chrome (steel 2.9 → light) */
.section.dark a:not(.btn), .quality-content a:not(.btn), .quality-row a:not(.btn),
.trust-content a:not(.btn), .solutions a:not(.btn),
.dp-section.dark a:not(.btn){color:var(--steel-2) !important;}                  /* on ink: 8.1 */
.sub-nav a:not(.btn), .loc-card.primary .loc-contact a{color:var(--powder) !important;} /* on ink: 13 */

/* 5. Button inner links (<p class="btn btn-primary"><a>) follow the button's
      own colour so they read light on the steel fill and dark on hover — fixes
      the invisible steel-on-steel "See Compliance Library" link */
.btn.btn-primary a,
.section.dark .btn.btn-primary a, .quality-content .btn.btn-primary a,
.trust-content .btn.btn-primary a, .split-card .btn.btn-primary a,
.doc-cta .btn.btn-primary a{color:var(--paper) !important;text-decoration:none;}
/* Only buttons whose hover background is PAPER (light) get ink text on hover.
   The base/hero .btn-primary hovers to ink (dark) so its text must stay paper —
   otherwise ink-on-ink is invisible (the hero "Request a Quote" hover bug). */
.quality-content .btn.btn-primary:hover a,
.trust-content .btn.btn-primary:hover a, .split-card .btn.btn-primary:hover a,
.doc-cta .btn.btn-primary:hover a{color:var(--ink) !important;}

/* 6. Required-field asterisk on dark form + compare close glyph → passing reds */
body.page-id-136 .form-section.dark .forminator-required{color:#ff8a8a !important;} /* on slate-2: 5.6 */
.compare li .x{color:#b83636;}                                                 /* on light: 5.5 */

.byline-cell .label{color:var(--slate);}  /* BY label was steel-2 on powder byline: 8.7 */

/* ============================================================
   Layout fix batch (2026-07-01)
   ============================================================ */
/* FAQ split-card: right (callout) column narrower than the content column */
.split-card{grid-template-columns:1.5fr 1fr;}

/* Resources .doc-list: the <a> fills the entire <li> so the whole row is the link */
.doc-list li{padding:0; display:block;}
.doc-list li > a{padding:18px 28px; box-sizing:border-box;}

/* Category pages: cat-stats-cell → 13px */
.bgctx-typearchive .entry-content .cat-stats-cell,
body.parent-pageid-492 .entry-content .cat-stats-cell,
body.page-id-492 .entry-content .cat-stats-cell{font-size:13px;}

/* Category mech-cards: fill the full height of the grid row */
.bgctx-typearchive .entry-content .mech-card,
body.parent-pageid-492 .entry-content .mech-card,
body.page-id-492 .entry-content .mech-card{height:100%; align-self:stretch;}

/* Category selector table ("Picking by service condition"): top-align cell content
   (Mai vertically-centres single-child group cells → 3rd column floated to middle) */
.bgctx-typearchive .entry-content .selector-row .wp-block-group,
body.parent-pageid-492 .entry-content .selector-row .wp-block-group,
body.page-id-492 .entry-content .selector-row .wp-block-group{justify-content:flex-start !important; align-self:start !important;}

/* Careers "What you can expect" cards: top-align icon/title/text across all cards
   (Mai flex group otherwise vertically-centres shorter cards) */
.benefit-card{justify-content:flex-start !important;}
.benefit-card > .wp-block-group__inner-container{justify-content:flex-start !important;}
/* why-grid cards (Stable shop. Real work.) — same top-align fix as benefit-card */
.why-card{justify-content:flex-start !important;}
.why-card > .wp-block-group__inner-container{justify-content:flex-start !important;}

/* ===== Fix batch (2026-07-01 #2) ===== */
/* PDP Manufacturer Specs (.crossref-block): top-align the title/button column
   instead of vertically centering it against the taller spec panel */
.bgctx-product .entry-content .crossref-block{align-items:start;}

/* Federal Process Everseal category hero (postid-218): the source image is low-res
   (246x100) and floated small in the 4:3 stage; enlarge it to fill the box */
body.postid-218 .entry-content .stage-img{width:80% !important; max-width:80% !important; height:auto !important; max-height:none !important;}

/* Home: 96px gap after the "Engineering support, on call." section */
.bgctx-home .engineer{margin-bottom:96px !important;}

/* ===== Fix batch (2026-07-01 #3) ===== */
/* Category #mechanism: drop top padding — the .overview section above already
   provides a 96px gap via its bottom padding (was 96+96=192px double gap) */
.bgctx-typearchive .entry-content .mechanism,
body.parent-pageid-492 .entry-content .mechanism,
body.page-id-492 .entry-content .mechanism{padding-top:0;}

/* Resources: 96px bottom margin on the "The paperwork you'll be asked for."
   (Compliance) section — now the last content section before the footer */
body.page-id-137 #compliance{margin-bottom:96px;}


/* ===== Carousel first-image fix (2026-07-01) =====
   Mai applies justify-content:center to the .culture-strip-track wp-block-group,
   so the overflowing grid content centered and pushed image 0 ~670px off-screen
   left (never visible). Force left-alignment so image 0 starts at the track edge. */
.culture-strip-track{justify-content:flex-start !important; justify-items:start !important; place-content:start !important;}

/* ============================================================
   Mobile fixes batch (2026-07-01)
   ============================================================ */
@media (max-width:768px){
  /* Root cause of most narrow-viewport horizontal scroll: base .btn is
     white-space:nowrap, so long CTA labels (+ trailing arrow) push past the
     viewport instead of wrapping. On phones, let every button wrap and never
     exceed the content width. */
  .btn, a.btn, .btn-primary, .btn-ghost, .btn-light{white-space:normal !important; max-width:100% !important; height:auto !important; flex-wrap:wrap !important;}
  /* dual-cta cards ("Send specs." / "Spec sheet, monthly.") fill the viewport
     width with consistent L/R padding (were inset + asymmetric) */
  .dual-cta{grid-template-columns:1fr !important; padding:0 !important;}
  .cta-card, .cta-card:not(.alt){padding:44px 24px !important;}

  /* Blog .cat-bar category filters — one per line */
  .cat-bar-inner{flex-direction:column !important; flex-wrap:nowrap !important;}
  .cat-bar a{width:100% !important; border-right:none !important; border-bottom:1px solid rgba(255,255,255,0.12) !important; justify-content:space-between;}

  /* .sub-nav jump links (resources #compliance + all similar) — one per line */
  .sub-nav{position:static !important;}
  .sub-nav-inner{display:flex !important; flex-direction:column !important; align-items:stretch !important;}
  .sub-nav-inner > a, .sub-nav a{width:100% !important; border-right:none !important; border-bottom:1px solid rgba(255,255,255,0.12) !important;}
  .sub-nav-label{border-right:none !important; border-bottom:1px solid rgba(255,255,255,0.12) !important; width:100% !important;}

  /* Solutions .line-card-thumb — 150px tall, image contained (all similar) */
  .line-card-thumb{height:150px !important; min-height:150px !important; max-height:150px !important; overflow:hidden; display:flex; align-items:center; justify-content:center;}
  .line-card-thumb img{max-height:150px !important; height:auto !important; width:auto !important; max-width:100% !important; object-fit:contain !important;}

  /* Contact quick-bar stacking moved to its own @media (max-width:1024px) block
     below (per request: quick-cell 100% below 1025px). */
  /* Contact form fields — full width of parent (collapse Forminator 2-col rows) */
  body.page-id-136 .forminator-row{display:block !important;}
  body.page-id-136 .forminator-col{width:100% !important; max-width:100% !important; float:none !important;}
  body.page-id-136 .forminator-field input,
  body.page-id-136 .forminator-field textarea{width:100% !important; max-width:100% !important; box-sizing:border-box;}
  body.page-id-136 .forminator-field .select2-container{width:100% !important; max-width:100% !important;}
  /* Forminator's Select2 hides the native <select> behind an absolutely-positioned
     .select2-hidden-accessible; don't stretch it (it would overflow ~2px) */
  body.page-id-136 .forminator-field select.select2-hidden-accessible{max-width:100% !important;}

  /* Contact .form-card — single column (also un-pin the side-meta from col 2,
     otherwise grid-column:2 recreates an implicit second column) */
  .form-card{grid-template-columns:1fr !important;}
  body.page-id-136 .form-card > .wp-block-group__inner-container > .form-side-meta{grid-column:1 !important; grid-row:auto !important;}

  /* Selector tables ("Picking by ...") — columns 100% (all similar) */
  .selector-row{grid-template-columns:1fr !important;}

  /* for-distributors .kpi cells — 100% */
  .kpis{grid-template-columns:1fr !important;}
  /* for-distributors #cta buttons ("Request a Presentation" / "Contact Me") in
     the .dp-actions paragraph — stack, centered */
  #cta .dp-actions{display:flex !important; flex-direction:column; flex-wrap:wrap; gap:14px !important; align-items:center;}

  /* Carousel — one photo at a time */
  .culture-strip-track{grid-auto-columns:100% !important;}
  .culture-strip-track img{box-sizing:border-box;}

  /* Careers "Tell us about yourself" form — single column */
  .app-form-card{grid-template-columns:1fr !important;}
  body.page-id-135 .app-form-card > .wp-block-group__inner-container > .app-form-side-meta{grid-column:1 !important; grid-row:auto !important;}

  /* nd Specifications table cells — 100% (all product PDPs) */
  .bgctx-product .entry-content .spec-row{grid-template-columns:1fr !important;}

  /* Terms body — side padding */
  body.page-id-130 .entry-content .prose,
  body.page-id-130 .entry-content .prose > .wp-block-group__inner-container{padding-left:24px !important; padding-right:24px !important;}

  /* Home heritage — 50px below caption */
  .brand-heritage{padding-bottom:50px !important;}

  /* No horizontal scroll: mfr-specs trust panel — its 1fr grid column couldn't
     shrink below the content min-width (wide button / stat details) */
  .trust-content{padding:40px 24px !important; min-width:0 !important;}
  .trust-stats{min-width:0 !important;}
  .trust-stat{padding:22px 24px !important; min-width:0 !important;}
  .trust-grid{min-width:0 !important;}
  .trust-content .btn, .trust-content .btn-primary, .trust-content a.btn{white-space:normal !important; max-width:100% !important;}
  .trust-stat-detail, .trust-stat-k, .trust-stat-v{overflow-wrap:anywhere; min-width:0;}

  /* No horizontal scroll: FAQ question list + split-card content */
  .faq-grid, .faq-item, .faq-q, .faq-a,
  .rank-math-block, .rank-math-list, .rank-math-list-item{min-width:0 !important; max-width:100% !important; overflow-wrap:anywhere;}
  .split-card{padding:40px 24px !important; min-width:0 !important;}
  .split-card-callouts, .split-card-callouts > div{min-width:0 !important; max-width:100% !important; overflow-wrap:anywhere;}
  /* FAQ section-inner shrink-wrapped to max-content (display:contents inner-
     container) → force it to fill the viewport instead (same as contact-depts fix) */
  body.page-id-133 .section-inner{width:100% !important;}

  /* Category spec-cross section: the "Download the Selector Guide (PDF)" button
     is white-space:nowrap and too wide for phones → let it wrap; keep the grid
     and cards fluid so nothing forces horizontal scroll */
  .spec-cross-inner{width:100% !important; min-width:0 !important;}
  .spec-cross-download .btn, .spec-cross-download .btn-primary, .spec-cross-download a{white-space:normal !important; max-width:100% !important; height:auto !important;}
  .spec-grid{grid-template-columns:1fr !important; min-width:0 !important;}
  .spec-card, .spec-card *{min-width:0 !important; max-width:100% !important; overflow-wrap:anywhere;}

  /* Product hero "SPEC AT A GLANCE" callout: let its content shrink/wrap so it
     never forces horizontal scroll on narrow phones */
  .bgctx-product .entry-content .callout-card{min-width:0 !important; max-width:100% !important;}
  .bgctx-product .entry-content .overview-grid.callout-only{grid-template-columns:1fr !important;}
  .bgctx-product .entry-content .callout-list li{grid-template-columns:auto 1fr !important; min-width:0 !important;}
  .bgctx-product .entry-content .callout-list .k,
  .bgctx-product .entry-content .callout-list .v{overflow-wrap:anywhere; min-width:0;}
  .bgctx-product .entry-content .callout-label{overflow-wrap:anywhere;}

  /* crossref-block (also holds a callout on some PDPs): its 1fr grid column
     couldn't shrink below the content min-width on narrow phones */
  .bgctx-product .entry-content .crossref-block{grid-template-columns:1fr !important; min-width:0 !important;}
  .bgctx-product .entry-content .crossref-block > *,
  .bgctx-product .entry-content .crossref-block > * > *{min-width:0 !important; max-width:100% !important; overflow-wrap:anywhere;}
  /* The .btn-primary CTA ("Open the Cross-Reference Tool") is inline-flex with
     white-space:nowrap, so its trailing arrow SVG spilled ~7px past the viewport
     at 360px. Let the label wrap so text+arrow stay inside. */
  .bgctx-product .entry-content .crossref-block .btn,
  .bgctx-product .entry-content .crossref-block a.btn-primary{white-space:normal !important; flex-wrap:wrap !important; max-width:100% !important; height:auto !important;}

  /* ---- Mobile batch 2026-07-02 ---- */

  /* Footer "family" line: left-align the "The Bradley Group of Companies" label
     and drop the "·" separators between company names */
  .footer-family-inner{justify-content:flex-start !important; text-align:left !important;}
  .footer-family .ff-label{align-self:flex-start !important;}
  .footer-family .ff-sep{display:none !important;}

  /* Blog .cat-label — drop the right border when the bar stacks */
  .cat-label{border-right:none !important;}

  /* Product hero .attr-strip cells — stack full-width, no side padding, no
     borders (all PDPs) */
  .bgctx-product .entry-content .attr-strip-inner{grid-template-columns:1fr !important;}
  .bgctx-product .entry-content .attr-cell{padding-left:0 !important; padding-right:0 !important; border:none !important;}

  /* Product hero ship-note ("Standard lead time …") — 24px breathing room below
     (all PDPs) */
  .bgctx-product .entry-content .hero-ship-note{margin-bottom:24px !important;}

  /* Manufacturer-specs cross-reference RESULTS table — stack to cards on mobile.
     .match-row is display:contents (cells become grid items); undo that so each
     row is a block and label each cell from the hidden header row. */
  body.page-id-144 .xref-results .match-table-inner{display:block !important; min-width:0 !important;}
  body.page-id-144 .xref-results .match-row{display:block !important; border-bottom:1px solid var(--line);}
  body.page-id-144 .xref-results .match-row.head{display:none !important;}
  body.page-id-144 .xref-results .match-row:last-child{border-bottom:none;}
  body.page-id-144 .xref-results .match-row > div{display:block !important; border-right:none !important; border-bottom:none !important; padding:4px 20px !important;}
  body.page-id-144 .xref-results .match-row > div:first-child{padding-top:16px !important;}
  body.page-id-144 .xref-results .match-row > div:last-child{padding-bottom:16px !important;}
  body.page-id-144 .xref-results .match-agency::before,
  body.page-id-144 .xref-results .match-spec::before,
  body.page-id-144 .xref-results .match-product::before{display:block; font-family:var(--f-mono); font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); margin-bottom:3px;}
  body.page-id-144 .xref-results .match-agency::before{content:"Agency";}
  body.page-id-144 .xref-results .match-spec::before{content:"OEM Spec";}
  body.page-id-144 .xref-results .match-product::before{content:"Bradley Product";}

  /* Comparison / grade tables (.compare-table on PDPs, .grade-table in blog
     posts) — stack to labeled cards on mobile. JS (responsive-tables.js) copies
     each column header into td[data-th]. */
  .compare-table table, .compare-table thead, .compare-table tbody,
  .compare-table tr, .compare-table td,
  .grade-table table, .grade-table thead, .grade-table tbody,
  .grade-table tr, .grade-table td{display:block !important; width:100% !important;}
  .compare-table thead, .grade-table thead{display:none !important;}
  .compare-table tr, .grade-table tr{border:1px solid var(--line-strong) !important; margin-bottom:16px;}
  .compare-table td, .grade-table td{border:none !important; border-bottom:1px solid var(--line) !important; text-align:left !important; white-space:normal !important;}
  .compare-table tbody td:last-child, .grade-table tbody td:last-child{border-bottom:none !important;}
  .compare-table tbody td:first-child, .grade-table tbody td:first-child{background:var(--ink) !important; color:var(--paper) !important; white-space:normal !important;}
  .compare-table tbody td:not(:first-child)[data-th]::before,
  .grade-table tbody td:not(:first-child)[data-th]::before{content:attr(data-th); display:block; font-family:var(--f-mono); font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); margin-bottom:3px;}

  /* Home + Solutions search cluster (.search-row: input + button) — stack.
     NOTE: line ~2792 forces `body:not(.home) .entry-content .search-row` to
     flex-direction:row !important (0,3,2) — home is exempt (.bgctx-home) so the
     generic rule suffices there, but Solutions (page-id-492 etc.) needs a
     higher-specificity override. */
  .search-row{flex-direction:column !important;}
  .search-row > .wp-block-group__inner-container{display:flex !important; flex-direction:column !important;}
  body:not(.home) .entry-content .solutions-search .search-row{flex-direction:column !important;}
  .search-row .search-input, .search-row .search-btn,
  .search-row input:not([type=hidden]), .search-row button,
  body:not(.home) .entry-content .solutions-search .search-row input:not([type=hidden]),
  body:not(.home) .entry-content .solutions-search .search-row button{width:100% !important; box-sizing:border-box;}
  /* Stacked search button — match the input box height exactly (input = 56px:
     padding 18px + 16px line). Fixed height + border-box is reliable; padding
     alone left the button 54-61px because its flex line-box differs from the
     input. Center the label across the full width. */
  .search-row .search-btn,
  .search-row button,
  body:not(.home) .entry-content .solutions-search .search-row button{height:56px !important; padding-top:0 !important; padding-bottom:0 !important; justify-content:center !important; box-sizing:border-box !important;}

  /* Manufacturer-specs (144) cross-reference search-form — stack the spec field
     and SEARCH button, both FULL WIDTH & aligned. The field is pinned to
     grid-column:2 by a `.search-field:nth-of-type(1)` rule (~6494, specificity
     0,5,1) and the button to grid-column:3 + width:auto (~6512) — with the grid
     at 1fr that grid-column:2 pin spawned an IMPLICIT 2nd column, leaving the
     input narrow/inset while the button spanned full. Reset every pin at
     matching specificity to grid-column:1, width:100%. */
  /* NOTE: the actual grid lives on .search-card (the inner-container is
     display:contents), grid = 36px 1fr auto 36px. Collapse the middle to one
     1fr column and drop both field + button into it so they stack full-width. */
  body.page-id-144 .search-card{grid-template-columns:36px 1fr 36px !important;}
  body.page-id-144 .search-card > .wp-block-group__inner-container > .search-field,
  body.page-id-144 .search-card > .wp-block-group__inner-container > .search-field:nth-of-type(1),
  body.page-id-144 .search-card > .wp-block-group__inner-container > .search-field:nth-of-type(2),
  body.page-id-144 .search-card > .wp-block-group__inner-container > .search-submit{grid-column:2 !important; width:auto !important; box-sizing:border-box !important; justify-self:stretch !important;}
  body.page-id-144 .search-card .search-field input{width:100% !important; box-sizing:border-box !important;}
  body.page-id-144 .search-card > .wp-block-group__inner-container > .search-submit{margin-top:14px !important; padding-left:0 !important; padding-right:0 !important; justify-content:center !important; align-self:auto !important;}

  /* Manufacturer-specs (144) STATIC "snapshot" table (.match-table--snapshot,
     wp-block-group grid w/ display:contents rows + <p> cells) — stack to cards */
  body.page-id-144 .match-table--snapshot .match-table-inner{display:block !important; min-width:0 !important; grid-template-columns:none !important;}
  body.page-id-144 .match-table--snapshot .match-table-inner > .wp-block-group__inner-container{display:block !important;}
  body.page-id-144 .match-table--snapshot .match-row{display:block !important; border-bottom:1px solid var(--line);}
  body.page-id-144 .match-table--snapshot .match-row.head{display:none !important;}
  body.page-id-144 .match-table--snapshot .match-row:last-child{border-bottom:none;}
  body.page-id-144 .match-table--snapshot .match-row > .wp-block-group__inner-container{display:block !important;}
  body.page-id-144 .match-table--snapshot .match-row > .wp-block-group__inner-container > *{display:block !important; border-right:none !important; border-bottom:none !important; background:none !important; padding:4px 20px !important;}
  body.page-id-144 .match-table--snapshot .match-row > .wp-block-group__inner-container > *:first-child{padding-top:16px !important;}
  body.page-id-144 .match-table--snapshot .match-row > .wp-block-group__inner-container > *:last-child{padding-bottom:16px !important;}
  body.page-id-144 .match-table--snapshot .match-row > .wp-block-group__inner-container > *:nth-child(1)::before{content:"Agency";}
  body.page-id-144 .match-table--snapshot .match-row > .wp-block-group__inner-container > *:nth-child(2)::before{content:"OEM Spec";}
  body.page-id-144 .match-table--snapshot .match-row > .wp-block-group__inner-container > *:nth-child(3)::before{content:"Bradley Product";}
  body.page-id-144 .match-table--snapshot .match-row > .wp-block-group__inner-container > *::before{display:block; font-family:var(--f-mono); font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); margin-bottom:3px;}
}

/* Manufacturer-specs cross-reference RESULTS — "Bradley Product" column shows one
   product per line with no "·" separator (ALL screen sizes, per request).
   NOTE: .match-product is a `.match-row > div`, which line ~2792 forces to
   flex-direction:row !important; make it display:block so the block-level product
   links stack one per line (block wins → the flex directive no longer applies). */
body.page-id-144 .xref-results .match-product{display:block !important;}
body.page-id-144 .xref-results .match-product a.xref-prod{display:block; width:max-content; max-width:100%; white-space:normal; margin:3px 0;}
body.page-id-144 .xref-results .xref-sep{display:none !important;}

/* Careers jobs-toolbar — remove the filter UI entirely (the "FILTER" label + the
   category chips), leaving just the "7 OPEN ROLES" count (all screen sizes) */
.jobs-toolbar .filter-chips{display:none !important;}
.jobs-toolbar p.label:first-of-type{display:none !important;}

/* Spec-briefs / blog-archive hero — top padding clears the transparent header
   AND adds breathing room above the breadcrumb (all widths, per request;
   bumped from 96px to 136px) */
body.bg-blog-archive .page-header-inner{padding-top:136px !important;}
/* spec-briefs (a category archive) — body.archive.category pins 96px at (0,3,1);
   match that specificity + later source order to add room above the breadcrumb */
body.archive.category .page-header-inner{padding-top:136px !important;}

/* ---- Tablet (≤1024px) footer CTAs ---- */
/* Below 1025px the .dual-cta prefooter cards ("Send specs." / "Spec sheet,
   monthly.") should match the mobile treatment: full viewport width (no side
   inset) with the mobile card padding, per request. They already stack to 1fr
   at ≤1024px via the shared collapse rules — this adds the padding/full-bleed. */
@media (max-width:1024px){
  .dual-cta{grid-template-columns:1fr !important; padding:0 !important; max-width:none !important;}
  .cta-card, .cta-card:not(.alt){padding:44px 24px !important;}
}

/* ---- Contact quick-bar: first-cell border (all sizes) + stack below 1025px ---- */
/* Remove the first quick-cell's left border on EVERY screen size (rule ~8834 pins
   it at 0,3,1 — match that specificity) */
body.page-id-136 .quick-cell:first-child{border-left:none !important;}

@media (max-width:1024px){
  /* Below 1025px the quick-cells stack full-width. The desktop rules force the
     bar's Mai inner-container to a non-wrapping flex row, so force block layout
     on the bar + inner-container and make every cell 100% with no border/bg. */
  body.page-id-136 .quick-bar-inner,
  body.page-id-136 .entry-content .quick-bar-inner > .wp-block-group__inner-container{display:block !important; flex-wrap:wrap !important;}
  body.page-id-136 .quick-cell,
  body.page-id-136 .quick-cell.action{display:flex !important; flex-direction:column !important; width:100% !important; flex:none !important; border:none !important; background:none !important; padding-left:0 !important; padding-right:0 !important;}
  body.page-id-136 .quick-cell:first-child{border-left:none !important;}
  /* hover text stays consistent (paper/white) — the .action cell's :hover flips
     text to ink, but its background is now removed → dark-on-dark */
  body.page-id-136 .quick-cell.action:hover .quick-label,
  body.page-id-136 .quick-cell.action:hover .quick-value,
  body.page-id-136 .quick-cell.action:hover .quick-sub,
  body.page-id-136 .quick-cell:hover .quick-value,
  body.page-id-136 .quick-cell .quick-value:hover{color:var(--paper) !important;}
}
@media (max-width:768px){
  /* email value is wider than the phone numbers on phones — shrink it so the
     address fits on one line instead of breaking mid-word ("co⏎m") */
  body.page-id-136 .quick-cell .quick-value{white-space:normal !important; overflow-wrap:break-word;}
  body.page-id-136 .quick-cell a.quick-value[href^="mailto:"]{font-size:24px !important; line-height:1.2;}
}

/* ---- Home "From the archives" (.brand-heritage) — left-align on tablet ---- */
/* On desktop it's pushed right (margin-left:auto); below 1025px align it left. */
@media (max-width:1024px){
  .group-header-row > .wp-block-group__inner-container > .brand-heritage{margin-left:0 !important;}
}

/* ---- Contact form — stack sections + full-width inputs below 1025px ---- */
@media (max-width:1024px){
  /* .form-card is a 2-col grid (form | "What to expect" side panel); the side
     panel is pinned grid-column:2 which recreates an implicit 2nd column, so
     reset it to stack. Everything 100%. */
  body.page-id-136 .form-card{grid-template-columns:1fr !important;}
  body.page-id-136 .form-card > .wp-block-group__inner-container > .form-side-meta{grid-column:1 !important; grid-row:auto !important;}
  /* Forminator 2-col rows → single column, all controls full width */
  body.page-id-136 .forminator-row{display:block !important;}
  body.page-id-136 .forminator-col{width:100% !important; max-width:100% !important; float:none !important;}
  body.page-id-136 .forminator-field input,
  body.page-id-136 .forminator-field textarea{width:100% !important; max-width:100% !important; box-sizing:border-box;}
  body.page-id-136 .forminator-field .select2-container{width:100% !important; max-width:100% !important;}
  body.page-id-136 .forminator-field select.select2-hidden-accessible{max-width:100% !important;}
}

/* ---- SKU-card grids — single column (cards + their stretch-link overlay fill
   100%) below 1025px. Covers all page contexts (archive, single-product,
   solution parent 492, catalog 492). Fixes sparse grids (e.g. Product ID with
   one card sitting in a narrow 1/4 column). ---- */
@media (max-width:1024px){
  .bgctx-typearchive .entry-content .sku-grid,
  .bgctx-product .entry-content .sku-grid,
  body.parent-pageid-492 .entry-content .sku-grid,
  body.page-id-492 .entry-content .sku-grid{grid-template-columns:1fr !important;}
  .bgctx-typearchive .entry-content .sku-card,
  .bgctx-product .entry-content .sku-card,
  body.parent-pageid-492 .entry-content .sku-card,
  body.page-id-492 .entry-content .sku-card{border-right:none !important;}
}

/* ---- "Request a Quote" button injected into the mobile menu (mobile-menu-cta.js) ---- */
.mobile-menu .bg-mobile-quote-item{margin-top:14px !important;}
.mobile-menu .bg-mobile-quote-link{
  display:flex !important; justify-content:center !important; align-items:center !important;
  background:var(--slate) !important; color:var(--paper) !important;
  font-family:var(--f-mono) !important; font-size:16px !important; font-weight:700 !important;
  letter-spacing:0.06em !important; text-transform:none !important;
  padding:16px 22px !important; margin:0 16px !important; border-radius:2px !important;
  transition:background .15s ease !important;
}
.mobile-menu .bg-mobile-quote-link:hover{background:var(--ink) !important;}
.mobile-menu .bg-mobile-quote-link span{color:var(--paper) !important;}

/* ---- Loctite Dri-Loc (and all PDPs) — .hero-right 24px top padding below 1101px
   (the hero stacks at ≤1100px, so the image column needs breathing room). ---- */
@media (max-width:1100px){
  .bgctx-product .entry-content .hero-right{padding-top:24px !important;}
}

/* ---- Terms (page-130) — respect site side padding below ~1325px ----
   The .prose is max-width:1256px with no side padding, so below ~1300px it fills
   the viewport and the body text touches the edges. Add 32px side padding (the
   site's standard inset) up to 1324px; box-sizing keeps the max-width intact. */
@media (max-width:1324px){
  body.page-id-130 .entry-content .prose{padding-left:32px !important; padding-right:32px !important; box-sizing:border-box !important;}
}

/* ---- PDP callout-card: narrative heading + description (added when the full
   doc content is present, e.g. "Why engineers reach for …") ---- */
.bgctx-product .entry-content .callout-title{font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1.15;color:var(--paper);letter-spacing:-0.005em;margin:0 0 12px;}
.bgctx-product .entry-content .callout-desc{font-size:16px;line-height:1.5;color:var(--powder);margin:0 0 20px;}

/* ---- Events (page-138) — match bradley-events-content.docx (2026-07-02) ---- */
/* "WHERE WE WILL BE / Upcoming events." section head above the list */
.ev-head{max-width:1000px;margin:0 auto;padding:80px 32px 0;}
.ev-head .ev-kicker{font-family:var(--f-mono);font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--steel);text-transform:uppercase;margin:0 0 10px;}
.ev-head .ev-title{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1;color:var(--ink);letter-spacing:-0.005em;margin:0 0 14px;}
.ev-head .ev-blurb{font-size:17px;line-height:1.6;color:var(--slate);max-width:640px;margin:0;}
/* the section head supplies the top padding now */
.ev-head + .ev-list{padding-top:36px;}
/* per-event NOTES line */
.ev-notes{font-size:16px;line-height:1.5;color:var(--slate);margin:8px 0 0;}
/* "Schedule a Meeting" button inside the meet-us callout */
.ev-note .callout .ev-cta{margin:18px 0 0;}
.ev-note .callout .ev-cta .btn{white-space:nowrap;}
/* (reverted 2026-07-02: events page uses the GLOBAL footer CTAs, which sit
   below "From the workshop floor." — the in-content dual-cta was removed) */
/* the callout's link color overrode the button text — keep it paper */
.ev-note .callout a.btn, .ev-note .callout a.btn-primary{color:var(--paper) !important; text-decoration:none !important; border-bottom:none !important;}
.ev-note .callout a.btn:hover{color:var(--paper) !important;}

/* ---- Painted Head or Tip (222) — doc §03 H1 subtitle line ---- */
.bgctx-product .entry-content .product-subtitle{font-family:var(--f-mono);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin:10px 0 18px;}

/* ---- Careers (135) form section — stack columns below 1025px (same pattern
   as contact: the side panel is pinned grid-column:2, which recreates an
   implicit 2nd column, so un-pin it too) ---- */
@media (max-width:1024px){
  .app-form-card{grid-template-columns:1fr !important;}
  body.page-id-135 .app-form-card > .wp-block-group__inner-container > .app-form-side-meta{grid-column:1 !important; grid-row:auto !important;}
  body.page-id-135 .forminator-row{display:block !important;}
  body.page-id-135 .forminator-col{width:100% !important; max-width:100% !important; float:none !important;}
  body.page-id-135 .forminator-field input,
  body.page-id-135 .forminator-field textarea{width:100% !important; max-width:100% !important; box-sizing:border-box;}
  body.page-id-135 .forminator-field .select2-container{width:100% !important; max-width:100% !important;}
  body.page-id-135 .forminator-field select.select2-hidden-accessible{max-width:100% !important;}
}


/* ==== NATIVE BLOCK SUPPORT (2026-07-10) ================================
   Converting custom CSS grids to editable native core/columns. WP core stacks
   columns at <=781px, but this site's original grids stacked at <=1024px
   (tablet = single column). This one systematic rule restores that breakpoint
   for ALL native Columns blocks, so native/editable columns keep the tuned
   tablet layout. Respects the per-block "Stack on mobile" toggle
   (.is-not-stacked-on-mobile opts out). */
@media (max-width:1024px){
  .entry-content .wp-block-columns:not(.is-not-stacked-on-mobile){flex-wrap:wrap!important}
  .entry-content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{flex-basis:100%!important;flex-grow:1}
}


/* ==== SKU GRID via Mai Post Grid on line-parent pages (2026-07-10) ==========
   Styles Mai Post Grid entries to match the original .sku-card design:
   header_meta = swatch + SKU-ID, title = name, custom_content = strength badge
   + use-case, more_link = VIEW SPEC. Scoped to single product (line parents). */
.mai-grid:has(.sku-head) .entries-wrap { border-top:1px solid var(--line); border-left:1px solid var(--line); }
.mai-grid:has(.sku-head) .entry-wrap-grid { margin:0; }
.mai-grid:has(.sku-head) .entry { padding:24px 22px 22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; height:100%; color:var(--slate); background:var(--paper); transition:background .15s ease; margin:0; }
.mai-grid:has(.sku-head) .entry:hover { background:var(--paper-2); }
.mai-grid:has(.sku-head) .entry-wrap-grid { display:flex; flex-direction:column; gap:14px; width:100%; margin:0; }
.mai-grid:has(.sku-head) .entry-wrap-grid > * { margin:0; }
.mai-grid:has(.sku-head) .entry-meta-before-content { margin:0; }
.mai-grid:has(.sku-head) .sku-head { display:flex; align-items:center; gap:14px; }
.mai-grid:has(.sku-head) .color-swatch { width:32px; height:32px; border:2px solid var(--ink); flex-shrink:0; position:relative; background:var(--paper); display:inline-block; }
.mai-grid:has(.sku-head) .color-swatch::before { content:""; position:absolute; inset:2px; background:var(--swatch,var(--paper)); }
.mai-grid:has(.sku-head) .sku-id { font-family:var(--f-mono); font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--steel); }
.mai-grid:has(.sku-head) .entry-title { font-family:var(--f-display); font-weight:400; font-size:26px; line-height:1.05; letter-spacing:-.005em; margin:0; }
.mai-grid:has(.sku-head) .entry-title, .mai-grid:has(.sku-head) .entry-title-link { color:var(--ink); }
.mai-grid:has(.sku-head) .entry-custom-content { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.mai-grid:has(.sku-head) .sku-strength { font-family:var(--f-mono); font-size:13px; font-weight:700; letter-spacing:.10em; padding:5px 9px; display:inline-block; color:var(--paper); }
.mai-grid:has(.sku-head) .sku-strength.low { background:var(--strength-low); color:var(--ink); }
.mai-grid:has(.sku-head) .sku-strength.med { background:var(--strength-med); color:var(--ink); }
.mai-grid:has(.sku-head) .sku-strength.high { background:var(--strength-high); }
.mai-grid:has(.sku-head) .sku-strength.perm { background:var(--strength-perm); }
.mai-grid:has(.sku-head) .sku-strength.type { background:var(--steel); }
.mai-grid:has(.sku-head) .sku-strength.neutral { background:var(--slate); }
.mai-grid:has(.sku-head) .sku-use { font-size:16px; line-height:1.5; color:var(--slate); margin:0; }
.mai-grid:has(.sku-head) .entry-more { margin-top:auto; }
.mai-grid:has(.sku-head) .entry-more-link { font-family:var(--f-mono); font-size:14px; font-weight:600; letter-spacing:.06em; color:var(--steel); text-transform:uppercase; background:none !important; border:none !important; padding:0 !important; display:inline-flex; align-items:center; gap:6px; min-height:0; }
.mai-grid:has(.sku-head) .entry-more-link::after { content:"\2192"; }
.mai-grid:has(.sku-head) .entry-more-link:hover { color:var(--ink); }

/* SKU grid: force a real CSS grid (aligned borders + equal-height rows) + whole-card link (2026-07-10) */
.mai-grid:has(.sku-head) .entries-wrap { display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:0 !important; align-items:stretch !important; }
.mai-grid:has(.sku-head) .entry.entry-grid { max-width:none !important; width:auto !important; flex:none !important; position:relative; height:100%; }
.mai-grid:has(.sku-head) .entry-title-link::after { content:""; position:absolute; inset:0; z-index:1; }
.mai-grid:has(.sku-head) .entry-more { position:relative; z-index:2; }
@media (max-width:1100px){ .mai-grid:has(.sku-head) .entries-wrap { grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:640px){ .mai-grid:has(.sku-head) .entries-wrap { grid-template-columns:1fr !important; } }

/* Attr-strip: the native group wraps the .attr-cells in a .wp-block-group__inner-
   container, so the repeat(5,1fr) grid on .attr-strip-inner only saw ONE child and
   the cells did not fill the strip. Pass the wrapper through so the cells are direct
   grid items (same fix as the ticker). */
.bgctx-product .entry-content .attr-strip-inner > .wp-block-group__inner-container { display: contents; }

/* Home "From the archives" brand-heritage — styling moved OFF inline styles
   (inline var(--) styles broke core block validation → "invalid content") onto
   classes. Visual is identical to the prior inline version. */
.heritage-img { margin: 0 0 35px; }
.heritage-img img { display: block; width: 226px; max-width: 100%; height: auto; border: 1px solid var(--line); }
.heritage-cap { max-width: 230px; }
.heritage-kicker { font-family: var(--f-mono); font-size:14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); margin: 0 0 8px; }
.heritage-body { font-size: 16px; line-height: 1.55; color: var(--slate); margin: 0; }

/* Home hero corner brackets — replaces the empty decorative .brackets group
   (removed because its empty-group "Select a layout" placeholder cluttered the
   editor). Drawn on .hero::after instead; frontend-identical. Home only so
   product heroes are unaffected. */
.bgctx-home .hero::after {
	content: "";
	position: absolute;
	inset: 24px 32px;
	pointer-events: none;
	z-index: 2;
	background:
		linear-gradient(var(--slate), var(--slate)) top left / 28px 1.5px no-repeat,
		linear-gradient(var(--slate), var(--slate)) top left / 1.5px 28px no-repeat,
		linear-gradient(var(--slate), var(--slate)) bottom right / 28px 1.5px no-repeat,
		linear-gradient(var(--slate), var(--slate)) bottom right / 1.5px 28px no-repeat;
}

/* attr-strip: dark bar stays full-bleed, but the .attr-cell row is capped at
   1320px and centered so it lines up with the rest of the page content
   (client 2026-07-16 — reverted the earlier full-width cells). */
.bgctx-product .entry-content .attr-strip-inner { max-width: 1320px !important; }
/* attr-strip full-width (cont.): the outer .attr-strip group also wraps its
   child in a content-width inner-container; pass it through so .attr-strip-inner
   can fill the full-bleed strip. Dark bg lives on .attr-strip itself, so safe. */
.bgctx-product .entry-content .attr-strip > .wp-block-group__inner-container { display: contents; }
/* attr-strip (cont.2): .attr-strip is display:flex + full-bleed; auto margins
   center the capped .attr-strip-inner within the full-width dark strip. */
.bgctx-product .entry-content .attr-strip-inner { width: 100% !important; max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important; }
/* 144 spec-search shortcode: form is [field | button]; base .search-form grid is
   200px/1fr/auto (for the old 3-control layout). Override to fit the 2-part form. */
body.page-id-144 .search-form { grid-template-columns: 1fr auto !important; }
/* 144 spec-search shortcode: use a simple flex row (field grows, button natural)
   so it fills full width regardless of the tangled .search-card grid/contents rules. */
body.page-id-144 .search-form { display:flex !important; gap:16px; align-items:flex-end; width:100% !important; grid-column:1 / -1; }
body.page-id-144 .search-form .search-field { flex:1 1 auto; }
body.page-id-144 .search-form .search-submit { flex:0 0 auto; }
/* Single-post lede: the deck now sits in its own .article-header.article-lede
   group continuing the template header's powder band with no gap. */
.article-lede { padding-top: 0 !important; }
.article-lede .article-header-inner { padding-top: 0; padding-bottom: 40px; }
/* Sub-nav jump links converted to native Buttons (editable). Style the buttons
   to match the original flush bordered nav links; "Jump to" label is CSS-generated.
   Only affects button-based sub-navs (the 8 page sub-navs); product .sub-nav a
   (acf/solution-subnav) is untouched. */
.sub-nav .wp-block-buttons.sub-nav-inner { gap: 0 !important; align-items: stretch; }
.sub-nav .wp-block-buttons.sub-nav-inner::before {
  content: "\2193  Jump to"; padding: 18px 24px 18px 0; color: var(--steel-2);
  border-right: 1px solid rgba(255,255,255,0.10); display: inline-flex; align-items: center;
  font-family: var(--f-mono); font-size: 16px; letter-spacing: 0.08em; font-weight: 600; white-space: nowrap;
}
.sub-nav .wp-block-buttons.sub-nav-inner .wp-block-button { margin: 0; }
.sub-nav .wp-block-buttons.sub-nav-inner .wp-block-button__link {
  background: transparent !important; color: var(--powder) !important; padding: 18px 24px !important;
  border: none !important; border-right: 1px solid rgba(255,255,255,0.10) !important; border-radius: 0 !important;
  font-family: var(--f-mono) !important; font-size: 16px !important; letter-spacing: 0.08em; font-weight: 600;
  display: inline-flex; align-items: center; line-height: 1.2;
}
.sub-nav .wp-block-buttons.sub-nav-inner .wp-block-button__link:hover { background: var(--slate) !important; color: var(--paper) !important; }
/* Mai Icon blocks reusing a card icon class (.tool-icon/.pick-icon/.ico): mai-icon
   outputs inline display:block which breaks the icon-box centering; restore it.
   Icon size/color still come from the existing .tool-icon/.ico svg + color rules. */
.mai-icon.tool-icon, .mai-icon.pick-icon, .mai-icon.ico { display: grid !important; place-items: center !important; }
.mai-icon.tool-icon .mai-icon-wrap svg, .mai-icon.pick-icon .mai-icon-wrap svg { width: 28px; height: 28px; }
.mai-icon.ico .mai-icon-wrap svg { width: 22px; height: 22px; }
/* Careers (135) Forminator application form: fields render in one flex-wrap row;
   force col widths so col-6 pairs (Name+Phone, Position+Start) sit side-by-side and
   col-12 fields (Email, Experience, Resume) span full width -> correct visual rows. */
body.page-id-135 .app-form-side { display: block; }
body.page-id-135 .app-form-side .forminator-custom-form { width: 100%; }
body.page-id-135 .app-form-side .forminator-row { display: flex !important; flex-wrap: wrap !important; margin: 0 -8px !important; }
body.page-id-135 .app-form-side .forminator-col { box-sizing: border-box; padding: 0 8px !important; margin-bottom: 20px; min-width: 0; }
body.page-id-135 .app-form-side .forminator-col-12 { flex: 0 0 100% !important; max-width: 100% !important; }
body.page-id-135 .app-form-side .forminator-col-6 { flex: 0 0 50% !important; max-width: 50% !important; }

/* ===== Data Sheets: per-line SKU table ([bg_line_datasheets]) ===== */
.ds-table{width:100%;border-collapse:collapse;border:1px solid var(--line-strong);font-size:16px;margin:4px 0 0;}
.ds-table thead th{background:var(--ink);color:var(--paper);font-family:var(--f-mono);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:12px 16px;}
.ds-table td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:middle;color:var(--slate);}
.ds-table tbody tr:nth-child(even){background:var(--paper-2);}
.ds-table td:first-child{font-weight:600;}
.ds-table td:first-child a{color:var(--ink);text-decoration:none;}
.ds-table td:first-child a:hover{text-decoration:underline;}
.ds-table td a{color:var(--steel);font-family:var(--f-mono);font-size:14px;font-weight:600;letter-spacing:.03em;text-decoration:none;white-space:nowrap;}
.ds-table td a:hover{color:var(--ink);text-decoration:underline;}
@media (max-width:720px){
  .ds-table,.ds-table tbody,.ds-table tr,.ds-table td{display:block;width:100%;}
  .ds-table thead{display:none;}
  .ds-table td{border-top:none;padding:3px 0;}
  .ds-table tr{border-top:1px solid var(--line-strong);padding:12px 0;}
  .ds-table td:before{content:attr(data-th);display:block;font-family:var(--f-mono);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin-bottom:2px;}
  .ds-table td:first-child{margin-bottom:6px;}
  .ds-table td:first-child:before{display:none;}
}
/* Resources: consolidated single Data Sheets cluster spans full width */
body.page-id-137 .entry-content .doc-library{grid-template-columns:1fr;}

/* Resources data-sheet index: product-line image thumbnail in each row */
.doc-list .doc-row-thumb{width:52px;height:52px;background:#fff;border:1px solid var(--line);overflow:hidden;padding:4px;box-sizing:border-box;}
.doc-list .doc-row-thumb img{width:100%;height:100%;object-fit:contain;display:block;}

/* Mai Icon boxes: fully center the glyph within its box. The mai-engine wrap is
   display:inline-block, so an inline SVG sits on the text baseline and reads as
   sitting high. Flex-center the wrap + block the SVG so it's centered both axes.
   Global (not page-scoped) so it holds wherever a Mai Icon box is used/pasted. */
.mai-icon .mai-icon-wrap{display:flex !important;align-items:center;justify-content:center;line-height:0;width:100%;height:100%;}
.mai-icon .mai-icon-wrap svg{display:block;}

/* Benefit cards are equal-height grid items; shorter cards were vertically
   centering their content, drifting the icon down. Pin content to the top so
   every icon shares the same vertical position across the row. Class-based
   (portable) so it survives block copy/paste. */
.benefit{justify-content:flex-start !important;align-content:flex-start !important;}

/* Category overview is sequential narrative prose, not a prose+sidebar layout.
   The 2-col grid split the paragraphs across columns, breaking reading order (a
   lone paragraph landed in the right column on 3-para pages like Precote). Stack
   the paragraphs in one readable column. */
.bgctx-product .entry-content .overview-grid:not(:has(.callout-card)){grid-template-columns:minmax(0,820px);gap:22px;justify-content:start !important;justify-items:start !important;}
.bgctx-product .entry-content .overview-grid .overview-para{margin-bottom:0;}

/* Blog article: unify the header (deck) column with the body column so the intro
   deck paragraph and the body paragraphs share the same width and left edge
   (were 720px in a 920px header vs 760px body → inconsistent). */
.article-header-inner{max-width:760px;}
.article-deck{max-width:none;}

/* Footer newsletter = Forminator form 672 in .cta-card — compact inline bar
   (email + Subscribe) on the dark footer, matching the old .newsletter-form.
   Class-scoped (portable). */
:is(.cta-card, .subscribe-form) .forminator-ui.forminator-custom-form{
  padding:0 !important; margin:8px 0 0 !important; gap:0 !important;
  flex-direction:row !important; align-items:stretch !important;
  border:1px solid var(--steel); background:rgba(255,255,255,0.04);
}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row{margin:0 !important; flex:1 1 auto; display:flex !important;}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row.forminator-row-last{flex:0 0 auto;}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-col{padding:0 !important; margin:0 !important; display:flex; width:100%;}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-field{gap:0 !important; width:100%; display:flex;}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-input,
:is(.cta-card, .subscribe-form) .forminator-ui input[type=email]{
  border:none !important; background:transparent !important; color:var(--paper) !important;
  box-shadow:none !important; padding:16px 18px !important; font-family:var(--f-mono) !important;
  height:auto !important; width:100%;
}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-input::placeholder{color:var(--steel-2) !important;}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-button-submit{
  background:var(--steel) !important; color:var(--paper) !important; border:none !important;
  border-radius:0 !important; padding:0 40px !important; min-width:170px !important;
  font-family:var(--f-mono) !important; font-weight:700 !important; letter-spacing:.08em !important;
  width:auto !important; white-space:nowrap; text-transform:none !important;
}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-button-submit:hover{background:var(--paper) !important; color:var(--ink) !important;}

/* Footer newsletter: keep email field elastic, submit button natural width inline */
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-col{width:auto !important;}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row:not(.forminator-row-last){flex:1 1 auto !important;}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row:not(.forminator-row-last) .forminator-col,
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row:not(.forminator-row-last) .forminator-field{flex:1 1 auto !important; width:100% !important;}
:is(.cta-card, .subscribe-form) .forminator-ui input[type=email]{min-width:0 !important;}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row.forminator-row-last,
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row.forminator-row-last .forminator-col{flex:0 0 auto !important; width:auto !important;}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-button-submit{flex:0 0 auto !important;}

/* Solution category overview (thread-locking/masking/sealing etc.): reduce the
   whitespace above the "Overview" section, and drop the cat-stats box so it
   top-aligns with the lede paragraph instead of the "Overview" heading. */
body.parent-pageid-492 .entry-content .overview-section{padding-top:40px !important;}
@media (min-width:901px){
  body.parent-pageid-492 .entry-content .overview-section .cat-stats{margin-top:116px;}
}

/* Trim excess whitespace above specific first-content sections. */
body.page-id-137 .sub-nav + .section{padding-top:56px !important;}
body.page-id-141 .page-header + .section{padding-top:48px !important;}

/* Blog single: keep the byline on one line (fits the 760px header column), and
   add whitespace above the hero image (was pulled up -64px into the header). */
.bgctx-post .article-byline{flex-wrap:nowrap !important; gap:12px !important;}
.bgctx-post .article-byline > *{flex:0 0 auto;}
.bgctx-post .article-hero-image .wp-block-image.article-hero-figure,
.article-hero-figure{margin-top:20px !important;}

/* Product SKU overview: when a SPEC-AT-A-GLANCE .callout-card is present, keep the
   2-column layout so the callout sits next to the Overview text (line pages that
   have only prose paragraphs stay single-column via the :not(:has()) rule above). */
.bgctx-product .entry-content .overview-grid:has(.callout-card){
  grid-template-columns:1.4fr 1fr !important;
  gap:56px !important;
  justify-content:stretch !important;
  justify-items:stretch !important;
}

/* Mai Icon boxes: also center the grid ROW within the fixed-height box (place-items
   only centered the item inside its row, which was sitting at the top). */
.mai-icon.tool-icon, .mai-icon.pick-icon, .mai-icon.ico, .mai-icon.benefit-icon, .mai-icon.benefit-ico{
  align-content:center !important;
}
/* For-distributors: trim the whitespace above/below the KPI stats section. */
.section:has(> .section-inner .kpi), .section:has(.kpi-row), section:has(.kpi){
  padding-top:48px !important; padding-bottom:48px !important;
}

/* Forminator col-6 fields: subtract the row gap from the 50% basis so two half-
   width fields pair on one line even in a narrow form (careers). */
.forminator-ui.forminator-custom-form .forminator-row .forminator-col-6{
  flex:0 1 calc(50% - 9px) !important; max-width:calc(50% - 9px) !important;
}

/* Forminator select2: the visible box is .select2-selection; my input-border rule
   also hit the .select2-container wrapper → double border. Keep the border on the
   selection only, matching the text inputs. */
.forminator-ui.forminator-custom-form .select2-container.forminator-select,
.forminator-ui.forminator-custom-form .forminator-select.select2-container{border:none !important;}
.forminator-ui.forminator-custom-form .select2-container .select2-selection{
  border:1px solid rgba(52,64,78,0.32) !important; border-radius:0 !important; box-shadow:none !important;
}

/* Product pages: hide the Downloads / Related sections when they have no content
   (e.g. painted-head has no datasheets; single-SKU lines have no siblings). The
   header alone reads as a mistake. Applies wherever the section is genuinely empty. */
.bgctx-product #docs:not(:has(.doc-card)):not(:has(.ds-table)){display:none !important;}
.bgctx-product #related:not(:has(a[href*="/products/"])){display:none !important;}

/* Product card summaries (.sku-use) come from each product's own copy and vary in
   length. Clamp to a uniform 3 lines so card grids (incl. "More specialty products")
   line up regardless of summary length. */
.sku-use{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}

/* Events: "Learn more" button (replaces the old TRADE SHOW tag) linking to each
   event's website (opens in a new tab). */
.ev-learn{margin:0;}
.ev-learn a{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:var(--f-mono); font-size:14px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none;
  padding:11px 20px; background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); transition:background .15s ease, color .15s ease;
}
.ev-learn a:hover{background:var(--steel); border-color:var(--steel); color:var(--paper);}

/* All-caps labels whose font-size is declared separately from text-transform (so
   the earlier pass missed them) — normalize to 14px per the "all-caps = 14px" rule. */
.section-meta, .sku-id, .group-role{font-size:14px !important;}
.forminator-ui.forminator-custom-form .forminator-label,
.forminator-ui.forminator-custom-form .forminator-required{font-size:14px !important;}

/* cat-stats-cell is all-caps label/value text — 14px per the all-caps rule. */
.cat-stats-cell{font-size:14px !important;}

/* Trim whitespace above first content sections. */
body.page-id-140 .page-header + .section{padding-top:48px !important;}
body.page-id-134 .culture-strip + .section{padding-top:48px !important;}

/* Newsletter Subscribe button: stretch to the same height as the email input. */
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row.forminator-row-last{align-self:stretch !important; display:flex !important;}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row.forminator-row-last > .forminator-col,
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row.forminator-row-last .forminator-field{display:flex !important; align-items:stretch !important; height:auto !important;}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-button-submit{height:auto !important; align-self:stretch !important;}

/* Newsletter button: vertical padding so it matches the email input height. */
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-button-submit{padding:17px 40px !important;}
/* Careers/all selects: match the select box height to the text inputs (was taller). */
.forminator-ui.forminator-custom-form .select2-container .select2-selection{height:auto !important; min-height:0 !important; padding:14px 16px !important; display:flex !important; align-items:center !important;}
.forminator-ui.forminator-custom-form .select2-selection__rendered{line-height:1.2 !important; padding:0 !important;}
.forminator-ui.forminator-custom-form .select2-selection__arrow{height:100% !important; top:0 !important;}

/* Select box: match the text-input height exactly (was ~8px taller). */
.forminator-ui.forminator-custom-form .select2-container .select2-selection{height:41px !important; padding:0 16px !important;}
/* Contact forms: inner padding so fields dont touch the card border. */

/* Select box: match the text-input height exactly (was ~8px taller). */
.forminator-ui.forminator-custom-form .select2-container .select2-selection{height:41px !important; padding:0 16px !important;}
/* Contact forms: inner padding so fields don't touch the card border. */
body.page-id-136 .form-card .forminator-ui.forminator-custom-form{padding:40px !important;}

/* Select2 cleanup: the .forminator-select CONTAINER was picking up the generic
   input padding/border (from the input-styling rule) around a separate inner box
   → oversized/misaligned. Strip the container; make .select2-selection--single the
   single 41px bordered box that matches the text inputs. */
.forminator-ui.forminator-custom-form .select2-container.forminator-select{padding:0 !important; border:none !important; height:auto !important; min-height:0 !important;}
.forminator-ui.forminator-custom-form .select2-selection--single,
.forminator-ui.forminator-custom-form .select2-container .select2-selection{
  height:41px !important; min-height:41px !important; padding:0 !important;
  border:1px solid rgba(52,64,78,0.32) !important; border-radius:0 !important;
  display:flex !important; align-items:center !important; box-shadow:none !important;
}
.forminator-ui.forminator-custom-form .select2-selection__rendered{line-height:1.2 !important; padding:0 16px !important; margin:0 !important; height:auto !important;}
.forminator-ui.forminator-custom-form .select2-selection__arrow{height:100% !important; top:0 !important; right:10px !important;}

/* Footer newsletter with Turnstile: keep email+button as an inline bordered bar,
   drop the captcha to its own line below (outside the bar). */
:is(.cta-card, .subscribe-form) .forminator-ui.forminator-custom-form{
  border:none !important; background:none !important; padding:0 !important;
  flex-wrap:wrap !important; align-items:stretch !important;
}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row:not(.forminator-row-last):not(:has(.forminator-captcha)){
  border:none; background:none;
}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row.forminator-row-last{
  border:none;
}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row:has(.forminator-captcha){
  flex:1 0 100% !important; width:100% !important; margin-top:14px !important; order:9;
  border:none !important; background:none !important;
}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-captcha{display:flex; justify-content:flex-start;}

/* Footer newsletter with Turnstile — grid: email | button on row 1, captcha spans row 2. */
:is(.cta-card, .subscribe-form) .forminator-ui.forminator-custom-form{
  display:grid !important; grid-template-columns:1fr auto !important;
  grid-template-areas:"email button" "captcha captcha" !important;
  gap:0 !important; align-items:stretch !important;
}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row:not(.forminator-row-last):not(:has(.forminator-captcha)){
  grid-area:email !important; margin:0 !important; border:none !important; background:none !important;
}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row.forminator-row-last{
  grid-area:button !important; margin:0 !important; border:none !important;
}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row:has(.forminator-captcha){
  grid-area:captcha !important; margin-top:14px !important; border:none !important; background:none !important;
}

/* Footer newsletter — FINAL layout: stacked (email, Turnstile, Subscribe) so the
   captcha fits cleanly. Overrides all earlier .cta-card form rules. */
:is(.cta-card, .subscribe-form) .forminator-ui.forminator-custom-form{display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:12px !important; padding:0 !important; border:none !important; background:none !important; grid-template-columns:none !important; grid-template-areas:none !important;}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row{display:block !important; margin:0 !important; border:none !important; background:none !important; flex:none !important; grid-area:auto !important; width:100% !important; max-width:none !important; order:0 !important;}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-col{display:block !important; width:100% !important; padding:0 !important;}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-field{display:block !important;}
:is(.cta-card, .subscribe-form) .forminator-ui input[type=email]{width:100% !important; border:1px solid var(--steel) !important; background:rgba(255,255,255,0.05) !important; color:var(--paper) !important; padding:15px 16px !important; height:auto !important;}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-button-submit{width:100% !important; height:auto !important; padding:15px 40px !important; min-width:0 !important; justify-content:center !important; align-self:stretch !important;}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-captcha{margin:0 !important;}

/* Newsletter submit row/col fill the form width so the Subscribe button is full-width. */
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row.forminator-row-last,
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row.forminator-row-last .forminator-col,
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row.forminator-row-last .forminator-field{width:100% !important; max-width:none !important; display:block !important;}

/* Blog hero: let the photo emerge from the blue header — the blue extends below the
   top edge of the photo (photo overlaps up into it), with breathing room above. */
.bgctx-post .article-header.article-lede{padding-bottom:120px !important;}
.bgctx-post .article-hero-image{margin-top:-100px !important; position:relative; z-index:1; background:transparent !important;}
.bgctx-post .article-hero-image .wp-block-image.article-hero-figure,
.article-hero-figure{margin-top:0 !important;}

/* Footer/blog newsletter — inline bar (email + Subscribe overlaid via absolute
   positioning) with the Turnstile captcha dropped BELOW the bar. Overrides the
   earlier stacked layout. */
:is(.cta-card, .subscribe-form) .forminator-ui.forminator-custom-form{
  position:relative !important; display:flex !important; flex-direction:column !important;
  gap:0 !important; padding:0 !important; border:none !important; background:none !important;
  grid-template-columns:none !important; grid-template-areas:none !important; align-items:stretch !important;
}
/* row holding the email (+ captcha) — stack them */
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row:not(.forminator-row-last){
  display:flex !important; flex-direction:column !important; gap:14px !important; margin:0 !important;
  width:100% !important; max-width:none !important; border:none !important; background:none !important;
}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row:not(.forminator-row-last) .forminator-col,
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row:not(.forminator-row-last) .forminator-field{
  width:100% !important; display:block !important; padding:0 !important;
}
/* email input = the bar; reserve right space for the absolute button */
:is(.cta-card, .subscribe-form) .forminator-ui input[type=email]{
  width:100% !important; height:56px !important; box-sizing:border-box !important;
  border:1px solid var(--steel) !important; background:rgba(255,255,255,0.05) !important;
  color:var(--paper) !important; padding:0 170px 0 18px !important; margin:0 !important;
}
/* Turnstile stays in normal flow, below the bar */
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-captcha{margin:0 !important;}
/* Subscribe button absolutely positioned over the right edge of the email bar */
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row.forminator-row-last{
  position:absolute !important; top:0 !important; right:0 !important; margin:0 !important;
  width:auto !important; height:56px !important; border:none !important; background:none !important;
}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row.forminator-row-last .forminator-col,
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-row.forminator-row-last .forminator-field{
  width:auto !important; height:100% !important; display:block !important;
}
:is(.cta-card, .subscribe-form) .forminator-ui .forminator-button-submit{
  height:56px !important; padding:0 34px !important; min-width:150px !important; width:auto !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}

/* ============================================================
   ACCESSIBILITY (2026-07-17) — WCAG AA / WAVE pass
   ============================================================ */

/* Contrast: dark-card body paragraphs used opacity:0.85 to dim powder text.
   CSS opacity multiplies onto ALL descendants, so mid-tone links inside them
   (.view, external links, .cta-meta = steel-2) fell to 4.38:1 (< 4.5).
   Bake the 15% dim into a solid tint (#c4d0dd == powder @85% over #34404e) and
   restore opacity:1 so descendant links render at full steel-2 strength (5.4:1). */
.cta-card.alt p,
.solution-card p,
.split-card p,
.tool-card.featured .tool-desc,
.app-form-side-meta p,
.form-section.dark .form-meta-block p,
.form-section.dark .form-blurb,
.picker-card.featured .pick-desc,
.quality-content p,
.hours-content p,
.trust-content p {
  opacity: 1;
  color: #c4d0dd;
}
/* cta-meta keeps its steel-2 accent color, now at full opacity (5.4:1). */
.cta-card.alt .cta-meta { opacity: 1; }

/* Footer column headings changed from <h5> to <h2> so document heading order
   never jumps by >1 into the footer landmark (WAVE "skipped heading level").
   Keep the original small-caps eyebrow appearance. */
.site-footer .footer-col h2.wp-block-heading,
.site-footer .footer-col h5.wp-block-heading {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.25;
  margin: 0 0 22px;
  color: var(--steel-2);
}

/* Contrast: the highlighted "FASTEST" quick-cell label (#dce1e8 on steel #4e6b8c
   = 4.19:1). Pure white lifts it to 5.5:1. */
.quick-cell.action .quick-label { opacity: 1; }
.quick-cell.action .quick-label,
.contact-quick a[href*="#quote"] .quick-label { color: #ffffff; opacity: 1; }

/* ============================================================
   PUNCH-LIST 2026-07-17b
   ============================================================ */

/* Icon boxes whose glyph is now a Mai icon: Mai .mai-icon{display:block} was
   defeating the box place-items:center, leaving a 22-24px glyph pinned top-left
   of a 44-56px box. Force centering + a larger glyph. (careers why/benefit,
   resources tool, contact pick.) */
.mai-icon.why-icon, .mai-icon.benefit-icon, .mai-icon.tool-icon,
.mai-icon.pick-icon, .mai-icon.ico, .mai-icon.step-icon {
  display: grid !important;
  place-items: center !important;
  place-content: center !important;
}
.why-icon > .mai-icon-wrap, .benefit-icon > .mai-icon-wrap,
.tool-icon > .mai-icon-wrap, .pick-icon > .mai-icon-wrap, .ico > .mai-icon-wrap {
  width: auto !important; height: auto !important; line-height: 0 !important; margin: 0 !important;
}
.mai-icon.why-icon .mai-icon-wrap svg, .mai-icon.tool-icon .mai-icon-wrap svg,
.mai-icon.pick-icon .mai-icon-wrap svg { width: 30px !important; height: 30px !important; }
.mai-icon.benefit-icon .mai-icon-wrap svg { width: 26px !important; height: 26px !important; }

/* Solutions (#492) search autocomplete dropdown was clipped by
   .page-header{overflow:hidden} and painted under the Family selector below.
   Unclip the header, make it a stacking context above the next section, lift menu. */
body.page-id-492 .page-header { overflow: visible !important; position: relative; z-index: 5; }
body.page-id-492 .search-cluster, body.page-id-492 .search-row { position: relative; z-index: 60; }
body.page-id-492 .bg-ac-menu { z-index: 60 !important; }

/* Subscribe-form Turnstile: our wrapper is already transparent; kill any residual
   frame just in case (theme switched to dark via form meta so the widget blends). */
:is(.cta-card, .subscribe-form) .forminator-captcha,
:is(.cta-card, .subscribe-form) .cf-turnstile,
:is(.cta-card, .subscribe-form) .forminator-field-captcha {
  background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important;
}

/* Resources tool-card check icon: FA check glyph (viewBox 448x512) renders
   narrower than the 512-square table/search icons, so it looked small + off.
   Bump it so the visible check matches the others, kept centered by the grid. */
.mai-icon.tool-icon.mai-icon-check .mai-icon-wrap svg { width: 48px !important; height: 48px !important; }

/* ============================================================
   RESPONSIVE PUNCH-LIST 2026-07-17
   ============================================================ */
@media (max-width: 1024px) {
  /* Footer CTA + subscribe copy: full container width (drop the desktop max-width) */
  .cta-card p, .subscribe-content p { max-width: none !important; }

  /* Contact + Careers form fields: every field full width */
  .form-card .forminator-col, .app-form-card .forminator-col {
    flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
  }

  /* Product "SPEC AT A GLANCE" overview grid: stack prose over the callout card */
  .bgctx-product .entry-content .overview-grid,
  .bgctx-product .entry-content .overview-grid:has(.callout-card) {
    grid-template-columns: 1fr !important;
  }

  /* Product spec table ("... by the numbers.") + solution/category "Picking by what
     you need." selector: fully stack each row's columns. */
  .entry-content .spec-row { grid-template-columns: 1fr !important; }
  .entry-content .selector-row { grid-template-columns: 1fr !important; }
  .entry-content .selector-row > div + div {
    border-left: none !important; border-top: 1px solid rgba(255,255,255,0.10) !important;
  }
  .entry-content .selector-row.head > div, .entry-content .selector-row > div { display: block !important; }

  /* Blog category bar: full-width stacked links (like the product jump links) */
  .cat-bar-inner { flex-direction: column !important; align-items: stretch !important; }
  .cat-bar a { width: 100% !important; justify-content: space-between !important;
    border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important; }
  .cat-bar a:last-child { border-bottom: none !important; }
}

@media (max-width: 768px) {
  /* All jump-link sub-navs sitewide: full-width stacked links */
  .sub-nav-inner { flex-direction: column !important; align-items: stretch !important; }
  .sub-nav-label { width: 100% !important; border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important; }
  .sub-nav a { width: 100% !important; justify-content: space-between !important;
    border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important; }
  .sub-nav a:last-child { border-bottom: none !important; }
}

/* --- RESPONSIVE PUNCH-LIST 2026-07-17 (corrections: out-specify existing !important rules) --- */
@media (max-width: 1024px) {
  /* Contact/careers fields 100% — beat .forminator-ui.forminator-custom-form
     .forminator-row .forminator-col-6 (0,4,0 !important). */
  .form-card .forminator-ui.forminator-custom-form .forminator-row [class*="forminator-col-"],
  .app-form-card .forminator-ui.forminator-custom-form .forminator-row [class*="forminator-col-"] {
    flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
  }
}
@media (max-width: 768px) {
  /* Sub-nav jump links stack — beat body:not(.home) .entry-content .sub-nav-inner
     {flex-direction:row !important} (0,3,1). */
  body:not(.home) .entry-content .sub-nav-inner {
    flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important;
  }
  body:not(.home) .entry-content .sub-nav-inner > * { width: 100% !important; }
}

/* Mobile menu font: use the body font (IBM Plex Sans), not the Anton display
   font it was inheriting. */
.mobile-menu, .mobile-menu ul, .mobile-menu li,
.mobile-menu a, .mobile-menu .menu-item-link {
  font-family: var(--body-font-family) !important;
}

/* Careers (135): close the open bottom edge of benefit card 4 (Predictable Schedule),
   which sits above the empty 8th cell in the 4-col benefits grid. */
@media (min-width: 1025px){
  body.page-id-135 .benefits-grid .benefit-card:nth-child(4){ border-bottom: 1px solid var(--line); }
}

/* Home (new section): "We hold the world together" → 72px above 1180px */
@media (min-width: 1181px){
  .bgctx-home p.bg-hold-world{ font-size: 72px !important; }
}

/* =========================================================================
   2026-07-22 launch-box punch list
   ========================================================================= */

/* 1. Blog single: stack the .article-byline items below 768px (overrides the
   one-line nowrap rule above — later in file wins the !important tie). */
@media (max-width: 767.98px){
  .bgctx-post .article-byline{
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .bgctx-post .article-byline > *{flex: 0 0 auto;}
}

/* 3. "Technical & Safety Data Sheets." tables — mobile card view: give the
   stacked cells left/right padding so content isn't flush to the table edge
   (sitewide, all .ds-table instances). */
@media (max-width: 720px){
  .ds-table td{padding: 3px 16px !important;}
}

/* 4. Home below 1181px: "The Bradley Group of Companies." section-head sits
   directly above the "From the archives" block when the header row stacks —
   drop its bottom margin. */
@media (max-width: 1180px){
  .bgctx-home .group-section .section-head{margin-bottom: 0 !important;}
}

/* 5. Product hero attr-strip below 1101px: every cell gets the SAME border and
   SAME padding on all four sides (kills the :first-child padding-left:0 and the
   nth-child border variations that looked unbalanced). Cells render as uniform
   boxes with a small gap; all PDPs. */
@media (max-width: 1100px){
  .bgctx-product .entry-content .attr-strip-inner{gap: 10px;}
  .bgctx-product .entry-content .attr-cell,
  .bgctx-product .entry-content .attr-cell:first-child,
  .bgctx-product .entry-content .attr-cell:last-child{
    padding: 20px 24px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
  }
}

/* Contact quick-bar: .quick-value hover was var(--ink) (too dark on the steel
   action cell) — lighten to near-white. */
/* action cell hover bg turns WHITE (paper) — its value goes dark blue (ink);
   the tel/mailto cells keep a dark bg on hover — theirs stay near-white. */
.quick-cell.action:hover .quick-value{color: var(--ink) !important;}
a.quick-value:hover,
.quick-cell:not(.action):hover .quick-value{color: rgba(255,255,255,0.85) !important;}

/* Newsletter inline bar: Forminator injects its error/success banner as the
   form's FIRST child, pushing the email input down while the absolutely
   positioned Subscribe button stayed anchored to the form top. The form is
   flex-column, so order the banner BELOW the bar instead -- the input never
   moves, and the button stays glued to it. */
:is(.cta-card, .subscribe-form) .forminator-ui.forminator-custom-form .forminator-response-message{
  order:5 !important; position:static !important; width:100% !important;
}
:is(.cta-card, .subscribe-form) .forminator-ui.forminator-custom-form .forminator-response-message:not(:empty){
  margin:12px 0 0 !important;
}