/*
Theme Name: Salient Child Theme for Vision Equipment
Description: This is a custom child theme for Vision Equipment built on Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar + A2Y Consulting
Author URI:  https://themeforest.net/user/themenectar
Developer URI: https://www.a2yconsulting.com
Template: salient
Version: 1.0
*/

:root {
  /* Blues */
  --ve-navy: #0c2340;
  --ve-blue: #1a4c7e;
  --ve-mid-blue: #2367a8;
  --ve-sky: #4a9fd4;
  --ve-sky-light: #7bbfe8;
  /* Oranges */
  --ve-orange: #e8741a;
  --ve-orange-light: #f59944;
  /* Neutrals */
  --ve-grey-dark: #2e3640;
  --ve-grey-text: #555555;
  --ve-grey-mid: #5a6473;
  --ve-grey-light: #b0bac5;
  --ve-grey-lighter: #c2c8d4;
  --ve-grey-bg: #f2f5f8;
  --ve-rule: #e4e8ee;
  --ve-white: #ffffff;

  --ve-gradient1-blue: linear-gradient(
    135deg,
    var(--ve-gradient1-start) 0%,
    var(--ve-gradient1-mid) 50%,
    var(--ve-gradient1-end) 100%
  );
  --ve-gradient1-start: var(--ve-navy);
  --ve-gradient1-mid: #1a3a5c;
  --ve-gradient1-end: #1e5580;

  --ve-gradient2-accent: linear-gradient(
    90deg,
    transparent,
    var(--ve-sky),
    var(--ve-orange),
    transparent
  );
  --ve-gradient2-ends: transparent;
  --ve-gradient2-33: var(--ve-sky);
  --ve-gradient2-66: var(--ve-orange);
}

/* ============================================================
   UTILITY COLOR CLASSES
   ============================================================ */

.ticker-dot {
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  flex-shrink: 0;
}

.color-navy {
  color: var(--ve-navy) !important;
}
.color-blue {
  color: var(--ve-blue) !important;
}
.color-mid-blue {
  color: var(--ve-mid-blue) !important;
}
.color-sky {
  color: var(--ve-sky) !important;
}
.color-sky-light {
  color: var(--ve-sky-light) !important;
}
.color-orange {
  color: var(--ve-orange) !important;
}
.color-orange-light {
  color: var(--ve-orange-light) !important;
}
.color-grey-dark {
  color: var(--ve-grey-dark) !important;
}
.color-grey-mid {
  color: var(--ve-grey-mid) !important;
}
.color-grey-light {
  color: var(--ve-grey-light) !important;
}
.color-grey-bg {
  color: var(--ve-grey-bg) !important;
}
.color-white-light {
  color: rgba(255, 255, 255, 0.65) !important;
}
.color-white {
  color: var(--ve-white) !important;
}

/* ============================================================
   GLOBAL / SHARED COMPONENTS
   ============================================================ */

/*
 * Separator With Text (.vc_separator)
 */
.vc_separator.vc_separator_align_center h4,
.vc_separator.vc_separator_align_right h4,
.vc_separator.vc_separator_align_left h4 {
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
}

.vc_sep_width_100,
#home-who-we-are .vc_sep_width_100 {
  width: fit-content !important;
}

.vc_separator .vc_sep_holder .vc_sep_line {
  width: 28px !important;
  top: -1px !important;
}

/* Force Separator With Text label to orange on dark bg sections */
.dark .vc_sep_holder h4,
#txt-lets-connect h4,
#home-who-we-are h4,
#home-project-references h4 {
  color: var(--ve-orange) !important;
}

/*
 * Section Headers
 */
.section-header.light p {
  color: rgba(255, 255, 255, 0.65);
}
.section-header p {
  margin-top: 16px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ============================================================
   TERM LIST (.ve-term-list) — shared chip component (#396)
   ============================================================
   The one term-list renderer. Spec: docs/copy-formatting.md rule 3.

   Markup contract — always a real list, never a joined string:

     <ul class="ve-term-list">
       <li>MBR</li>
       <li>UF</li>
       <li>Cloth Media</li>
     </ul>

   No separator character ever appears in the content: each item is its
   own chip, and the chip border is the separator. Should a future
   text-flow variant need a visible glyph between items, it goes in
   `.ve-term-list li::after` — never in the PHP/HTML.

   Colour is driven by three custom properties so a dark band only has to
   re-declare tokens, not restate the chip. Default tokens read on white
   cards and on the light grey `--alt` bands (--ve-grey-bg); the dark
   block below covers navy bands and Salient's `.dark` sections.

   Emitted by ve_render_term_list() in includes/mfr-archive-render.php.
   Deliberately NOT scoped to a body class — the next surface (homepage
   `#systems` cards, #389) reuses it as-is.
   ============================================================ */

.ve-term-list {
  --ve-term-bg: var(--ve-white);
  --ve-term-fg: var(--ve-navy);
  --ve-term-border: rgba(12, 35, 64, 0.16);

  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ve-term-list li {
  display: inline-flex;
  align-items: center;
  /* Chip geometry matches .mfr-jumpnav__chip minus its 44px touch target —
     these are labels, not controls, so they do not need to be tappable. */
  padding: 8px 14px;
  border: 1px solid var(--ve-term-border);
  border-radius: 999px;
  background: var(--ve-term-bg);
  color: var(--ve-term-fg);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  margin: 0;
  /* A term is a short noun phrase, so chips normally sit on one line. No
     `white-space: nowrap`: a long one (Multi-Disc Screw Press) must be able
     to wrap inside its own chip rather than push the page sideways at
     360px, and `anywhere` covers an unbreakable token. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Salient's `ul li { list-style: disc }` re-injects markers on these <li>s
   despite list-style:none on the <ul>, `ul { margin-left }` indents the row,
   and a page-level `li::marker` rule then tints them — the same trap already
   documented for .ve-tm-downloads-list and .ve-inline-links. Nuked once here,
   on the component, so every adopter inherits the fix instead of rediscovering
   it. Not body-class-scoped: the component is global by design (#396). */
ul.ve-term-list {
  margin-left: 0;
}

.ve-term-list li,
.ve-term-list li::before,
.ve-term-list li::marker {
  list-style: none;
  list-style-type: none;
  content: none;
}

/* Dark bands: navy hero, navy about section, homepage project references,
   and any Salient section carrying `.dark`. Translucent white keeps the
   chip readable over the hero's grid texture and gradient. */
.ve-term-list--on-dark,
.ve-hero .ve-term-list,
.dark .ve-term-list,
.page-template-page-about .about-section--navy .ve-term-list,
.ve-project-references .ve-term-list {
  --ve-term-bg: rgba(255, 255, 255, 0.1);
  --ve-term-fg: var(--ve-white);
  --ve-term-border: rgba(255, 255, 255, 0.28);
}

/* Centred placement variant — for a list that replaces a centred lede
   rather than sitting in a left-aligned card. */
.ve-term-list--center {
  justify-content: center;
}

/* ============================================================
   VE WAVE BAND (.ve-wave-band) — reusable full-width band (#494)
   ============================================================
   A navy WPBakery row ending in Salient's waves_opacity_alt divider.
   Builder recipe and paste-ready shortcode: docs/wave-band.md.
   Row settings own background, text color, columns, button color
   and the divider (Salient writes them as inline styles). This block
   owns padding, type, the CTA size, and the divider height on
   tablet and phone. Leave the row's padding fields empty, or the
   inline padding wins.
   ============================================================ */

.wpb_row.ve-wave-band {
  padding-top: 40px;
  padding-bottom: 170px;
}

.wpb_row.ve-wave-band h2 {
  margin: 0 0 6px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(20px, 2.3vw, 25px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ve-white);
}

.wpb_row.ve-wave-band p {
  max-width: 60ch;
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ve-grey-lighter);
}

/* 19px bold counts as WCAG large text, so a white label passes on
   --ve-orange at 3.02:1. Salient's largest stock button is 18px. */
.wpb_row.ve-wave-band .nectar-button {
  font-size: 19px;
  font-weight: 700;
}

/* Salient shrinks divider SVGs to 75% at 999px and 33% at 690px,
   which flattens the wave on phones. Keep it at full height. */
@media only screen and (max-width: 999px) {
  .wpb_row.ve-wave-band .nectar-shape-divider-wrap .nectar-shape-divider {
    height: 100%;
  }
}

/* ============================================================
   S01 — HERO
   ============================================================ */

/* Vertically center content on the orange scrolling text bar.
   Row has vc_row-o-content-top which top-aligns by default. */
#home-text-banner.wpb_row {
  align-items: center !important;
}

#home-text-banner .row_col_wrap_12 {
  align-items: center !important;
}

#home-text-banner .vc_column-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Add spacing between scrolling text items.
   data-spacing="false" on the element disables Salient's
   built-in text_space_large padding, so we apply it directly. */
#home-text-banner .nectar-scrolling-text-inner__text-chunk > * {
  padding-left: 3em !important;
}

/* ============================================================
   S02 — INTRODUCTION
   ============================================================ */

/*
 * Intro pillars (#intro-pillars)
 */
#intro-pillars .iwithtext {
  gap: 12px;
  padding: 16px;
  background: var(--ve-white);
  border-radius: 6px;
  border-left: 3px solid var(--ve-sky);
}

.iwithtext .iwt-icon {
  position: absolute;
  left: 16px;
  top: 16px;
}

#intro-pillars .iwt-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  font-size: 18px;
  color: var(--ve-white) !important;
  background: var(--ve-blue);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

#intro-pillars [class^="icon-"].icon-default-style.extra-color-3 {
  color: var(--ve-white) !important;
}

#intro-pillars [class^="icon-"].icon-default-style {
  font-size: 18px;
}

.iwithtext .iwt-text {
  line-height: 1.4 !important;
}

.iwt-text strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ve-navy);
  margin-bottom: 2px;
}

.iwt-text small {
  font-size: 0.72rem;
  color: var(--ve-grey-mid);
  line-height: 1.4;
}

/* ============================================================
   S03 — TREATMENT SYSTEMS & TECHNOLOGIES (#systems)
   ============================================================ */

.systems-grid {
  max-width: 1200px;
  margin: 0 auto;
}

/* Equal height — Fancy Box and its inner wrap fill column */
.systems-grid .nectar-fancy-box,
.systems-grid .nectar-fancy-box .box-inner-wrap {
  height: 100% !important;
}

/* Base card styles */
.systems-grid .nectar-fancy-box .box-inner-wrap {
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  transition:
    box-shadow 0.35s ease,
    transform 0.35s ease !important;
}

/* Hover — border glow */
.systems-grid .nectar-fancy-box:hover .box-inner-wrap {
  box-shadow:
    inset 0 0 0 1px rgba(74, 159, 212, 0.4),
    0 24px 60px rgba(0, 0, 0, 0.4) !important;
}

/* Hover background layer */
.systems-grid .nectar-fancy-box .box-bg {
  background: rgba(255, 255, 255, 0.1) !important;
  transition: opacity 0.35s ease !important;
}

/* Orange top bar reveal on hover */
.systems-grid .nectar-fancy-box .box-inner-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ve-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: 10;
  border-radius: 10px 10px 0 0;
}

.systems-grid .nectar-fancy-box:hover .box-inner-wrap::before {
  transform: scaleX(1);
}

/* Anchor for absolute-positioned children */
.systems-grid .nectar-fancy-box .inner-wrap {
  position: relative;
}

/* ── Icon wrapper (Iconsmind SVG) ── */

/* 54×54 rounded box */
#systems .nectar-fancy-box .inner-wrap .im-icon-wrap {
  display: grid !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: rgba(35, 103, 168, 0.4) !important;
  border: 1px solid rgba(74, 159, 212, 0.3) !important;
  margin-bottom: 20px !important;
  transition:
    background 0.35s,
    border-color 0.35s !important;
}

/* Propagate centering through nested spans without breaking width */
#systems .nectar-fancy-box .inner-wrap .im-icon-wrap > span,
#systems .nectar-fancy-box .inner-wrap .im-icon-wrap > span > span {
  display: grid !important;
  place-items: center !important;
  height: 100% !important;
}

/* SVG icon — size and color */
#systems .nectar-fancy-box .inner-wrap .im-icon-wrap svg {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  fill: var(--ve-sky) !important;
  transition: fill 0.35s !important;
}

/* SVG stroke thickness for line-based icons */
#systems .nectar-fancy-box .inner-wrap .im-icon-wrap svg * {
  stroke-width: 2px !important;
}

/* Icon wrapper hover — orange */
#systems .nectar-fancy-box:hover .inner-wrap .im-icon-wrap {
  background: var(--ve-orange) !important;
  border-color: var(--ve-orange) !important;
}

/* SVG fill hover — white */
#systems .nectar-fancy-box:hover .inner-wrap .im-icon-wrap svg {
  fill: var(--ve-white) !important;
}

/* ── Card typography ── */

.system-card h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.35rem !important;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ve-white);
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}

.system-card p {
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
}

/* System number — watermark top right */
.system-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.06);
  line-height: 1;
  position: absolute;
  top: -20px;
  right: 0;
  pointer-events: none;
  user-select: none;
}

.systems-grid .system-num,
.systems-grid .nectar-fancy-box:hover .system-num {
  color: rgba(255, 255, 255, 0.06) !important;
}

/* ── System tags ── */

.system-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.system-tag {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  background: rgba(74, 159, 212, 0.12) !important;
  border: 1px solid rgba(74, 159, 212, 0.25) !important;
  border-radius: 3px;
  color: var(--ve-sky-light) !important;
}

/* ── "View Manufacturers" in-tile link (#282 rollback: each tile links to
   /manufacturers/#cat-{slug}). Visible <a>, no JS. ── */

.system-link {
  display: inline-block;
  margin-top: 18px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ve-orange) !important;
  transition: color 0.25s ease;
}

.system-link:hover,
.system-card .nectar-fancy-box:hover .system-link {
  color: var(--ve-white) !important;
}

/* ============================================================
   S04 — FEATURED MANUFACTURERS
   ============================================================ */

/* Logo grid layout
   Note: Salient unconditionally injects nectar-flex-sizing onto inner
   rows, concatenating directly onto the last extra class with no space
   when no trailing character exists. Both selectors are required —
   one for correct output, one for the concatenation bug. */

.mfr-grid .row_col_wrap_12_inner,
.mfr-gridnectar-flex-sizing .row_col_wrap_12_inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 !important;
}

.home .mfr-grid .row_col_wrap_12_inner > .wpb_column,
.home .mfr-gridnectar-flex-sizing .row_col_wrap_12_inner > .wpb_column {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}

/* Tablet: 3 columns */
@media only screen and (max-width: 999px) {
  .mfr-grid .row_col_wrap_12_inner,
  .mfr-gridnectar-flex-sizing .row_col_wrap_12_inner {
    flex-wrap: wrap !important;
  }
  .mfr-grid .row_col_wrap_12_inner > .wpb_column,
  .mfr-gridnectar-flex-sizing .row_col_wrap_12_inner > .wpb_column {
    flex: 0 0 calc(50% - 8px) !important;
  }
  div#mfr-grid-r1,
  div#mfr-grid-r2 {
    margin-bottom: 0px !important;
  }
  div#mfr-grid-r2,
  div#mfr-grid-r3 {
    padding-top: 0px !important;
  }
}

/* ============================================================
   HOMEPAGE "OUR MANUFACTURERS" LOGO GRID (#100)
   ============================================================
   Self-contained grid for the homepage logo section. Replaces the
   interim 3-WPBakery-rows-of-4 markup (which lost its .mfr-grid hook
   in a rebuild and stayed a cramped 4-across on phones) with a single
   flat grid we fully control. Pair with the Raw-HTML block in
   docs/mockups/100-home-logos-inline.html (pasted into the WP page).
   Columns: 4 desktop (per #250 compact-grid decision) → 3 tablet →
   3 mobile → 2 on the smallest phones. */
.ve-home-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
}

.ve-home-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ve-white);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 22px 18px;
  min-height: 92px;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.ve-home-logo:focus-visible {
  outline: 2px solid var(--ve-sky);
  outline-offset: 2px;
}

.ve-home-logo img {
  max-width: 100%;
  max-height: 54px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.ve-home-logo:hover {
  border-color: var(--ve-sky);
  box-shadow: 0 8px 24px rgba(35, 103, 168, 0.12);
  transform: translateY(-3px);
}

/* Tablet: 3 columns */
@media (max-width: 1023px) {
  .ve-home-logos {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: 3 columns (Abby, 2026-07-15) — roomier than the interim 4-up */
@media (max-width: 767px) {
  .ve-home-logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .ve-home-logo {
    padding: 16px 12px;
    min-height: 78px;
  }
  .ve-home-logo img {
    max-height: 44px;
  }
}

/* Smallest phones: 2 columns so logos stay legible */
@media (max-width: 400px) {
  .ve-home-logos {
    grid-template-columns: repeat(2, 1fr);
  }
  .ve-home-logo img {
    max-height: 40px;
  }
}

/* Logo card */
.mfr-card {
  display: flex;
  background: var(--ve-white);
  border-radius: 8px !important;
  padding: 20px 16px !important;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  transition: all 0.25s;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ve-blue);
  text-align: center;
}

.mfr-grid .mfr-card:hover {
  border-color: var(--ve-sky);
  box-shadow: 0 8px 24px rgba(35, 103, 168, 0.12);
  transform: translateY(-3px);
  color: var(--ve-navy) !important;
}

/* ============================================================
   S08 — SIX OFFICES MAP (#389)
   ============================================================
   The Texas map is a Salient image_with_animation inside the
   homepage row carrying el_class "home-offices". The shortcode's
   own box shadow is set to none; the drop-shadow lives here so
   it can change below Salient's 1000px column-stack breakpoint,
   where the image sits above the copy and a downward throw
   clipped at the image's bottom edge (Abby, 2026-09-10).
   Targets the img, which Salient always renders, rather than
   the optional .hover-wrap. Filter, not box-shadow, so the
   shadow follows the state silhouette in the transparent PNG.
   ============================================================ */

.home-offices .img-with-aniamtion-wrap img.img-with-animation {
  filter: drop-shadow(8px 10px 26px rgba(0, 0, 0, 0.3));
}

@media (max-width: 999px) {
  .home-offices .img-with-aniamtion-wrap img.img-with-animation {
    filter: drop-shadow(8px -10px 26px rgba(0, 0, 0, 0.3));
  }
}

/* ============================================================
   S08b — TESTIMONIALS (temporarily hidden, #509)
   ============================================================
   Row-level hide: Salient's custom vc_row template ignores the
   WPBakery per-row CSS box, so this can't be done as a
   content-only edit. Row keeps its #home-testimonials ID and
   #F2F5F8 background, so re-showing later is just deleting this
   rule.
   ============================================================ */

.home-testimonials {
  display: none;
}

/* ============================================================
   S09 — CONTACT CTA
   ============================================================
   IMPORTANT: CF7 form styles scoped to .home-contact-cta.
   The same CF7 form plugin is used on /contact/ — QA both
   pages when modifying any .wpcf7 rules here.
   ============================================================ */

.home-contact-cta .wpcf7-form input,
.home-contact-cta .wpcf7-form textarea,
.home-contact-cta .wpcf7-form select,
.home-contact-cta span.wpcf7-form-control {
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 5px !important;
  color: var(--ve-white);
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  transition: border-color 0.2s;
  width: 100%;
}

.home-contact-cta .wpcf7-form p {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 1em;
}

.home-contact-cta .wpcf7-form p .wpcf7-form-control-wrap {
  flex: 1 1 calc(50% - 7px);
  min-width: 200px;
}

.home-contact-cta .wpcf7-form p .wpcf7-form-control-wrap:has(.full) {
  flex: 1 1 100%;
}

.home-contact-cta .wpcf7-form .full {
  grid-column: 1 / -1;
}

.home-contact-cta .wpcf7-spinner {
  display: block !important;
}

.home-contact-cta .wpcf7-submit {
  background: var(--ve-orange);
  color: var(--ve-white);
  border: none;
  padding: 14px 32px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.home-contact-cta .wpcf7-submit:hover {
  background: var(--ve-orange-light) !important;
}

/* ============================================================
   S05 — MANUFACTURERS PAGE (/manufacturers/)
   ============================================================
   Scoped to .page-manufacturers (WP body class) where needed
   to avoid conflicts with the S04 homepage manufacturer grid.
   ============================================================ */

/* ── [1] HERO ── */

.mfr-hero-row {
  background: linear-gradient(
    135deg,
    var(--ve-navy) 0%,
    #1a3a5c 60%,
    #1e5580 100%
  ) !important;
  padding: 80px 56px 72px !important;
  position: relative;
  overflow: hidden;
}

.mfr-hero-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle at 75% 50%,
      rgba(74, 159, 212, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(232, 116, 26, 0.06) 0%,
      transparent 40%
    );
  pointer-events: none;
}

.mfr-hero-row::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(74, 159, 212, 0.12);
  pointer-events: none;
  animation: heroRing 8s ease-in-out infinite;
}

@keyframes heroRing {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.06) rotate(3deg);
    opacity: 1;
  }
}

.mfr-hero-eyebrow {
  margin-bottom: 14px !important;
}

.mfr-hero-eyebrow h4 {
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ve-sky) !important;
  margin: 0 !important;
  padding: 0 10px !important;
}

.mfr-hero-eyebrow .vc_sep_holder_l {
  flex: 0 0 32px !important;
  max-width: 32px !important;
}

.mfr-hero-eyebrow .vc_sep_holder_r {
  display: none !important;
}

.mfr-hero-eyebrow .vc_sep_line {
  border-color: var(--ve-sky) !important;
}

.mfr-hero-h1,
.mfr-hero-h1 h1,
.mfr-hero-h4,
.mfr-hero-h4 h4 {
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 56px !important;
  font-weight: 700 !important;
  color: var(--ve-white) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 20px !important;
}

.mfr-hero-body,
.mfr-hero-body p {
  font-size: 17px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  line-height: 1.72 !important;
  max-width: 540px;
}

/* Hero row column widths — force 8/12 content + 1/12 gap + 3/12 CTA
   regardless of what WPBakery outputs from the page shortcode. */
.mfr-hero-row > .row_col_wrap_12 > .wpb_column:not(.mfr-hero-cta-col),
.mfr-hero-row .row_col_wrap_12 > .wpb_column:not(.mfr-hero-cta-col) {
  width: 66.6667% !important;
}

.mfr-hero-row .mfr-hero-cta-col {
  width: 25% !important;
  margin-left: 8.3333% !important;
}

/* Inner padding reset — spacing now comes from the margin-left gap col */
.mfr-hero-cta-col .vc_column-inner {
  padding-left: 0 !important;
}

/* Hero CTA card */
.mfr-hero-cta-col .cta-card {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 36px 36px 32px;
  text-align: center;
  min-width: 260px;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

/* Shimmer accent line at top */
.mfr-hero-cta-col .cta-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ve-sky),
    var(--ve-orange),
    transparent
  );
  opacity: 0.6;
}

.mfr-hero-cta-col .cta-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

.cta-card-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ve-sky);
  margin-bottom: 10px;
}

.cta-card-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--ve-navy);
  margin-bottom: 10px;
  line-height: 1.2;
}

.cta-card-sub {
  font-size: 14px;
  color: var(--ve-blue);
  margin-bottom: 28px;
  line-height: 1.6;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--ve-orange) 0%, #d4650f 100%);
  color: var(--ve-white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  width: 100%;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.22s ease;
  box-shadow: 0 4px 20px rgba(232, 116, 26, 0.35);
}

/* Shimmer sweep on hover */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transition: left 0.4s ease;
}

.btn-primary:hover::after {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(232, 116, 26, 0.45);
  color: var(--ve-white);
}

.btn-primary svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* ── [3] CATEGORY SECTION ── */

/* Alternating subtle bg on category rows for depth */
.mfr-category:nth-child(even) {
  position: relative;
}

.mfr-category:nth-child(even)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ve-grey-bg);
  z-index: -1;
  pointer-events: none;
}

/* Category header */
.cat-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ve-navy);
  position: relative;
}

/* Accent mark under the category name */
.cat-header::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 64px;
  height: 2px;
  background: var(--ve-orange);
}

/* One-sentence category description (#177) — sits just below the .cat-header
   divider, above the manufacturer grid. Native WP term description, so it is
   admin-editable and renders nothing when empty (guarded in the template). */
.cat-header__description {
  max-width: 900px;
  margin: -16px auto 28px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ve-grey-mid);
  text-align: center;
}

/* #396: the term-list form of the same slot. Inherits .ve-term-list's chip
   styling; this rule only supplies the placement .cat-header__description
   was providing (same max-width, same negative pull under the divider),
   centred because the prose it replaces is centred. Only renders when the
   term description is pipe-delimited — see ve_parse_term_list(). */
.cat-header__terms {
  max-width: 900px;
  margin: -16px auto 28px;
  justify-content: center;
}

.cat-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--ve-navy) 0%, var(--ve-blue) 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(12, 35, 64, 0.2);
}

.cat-icon svg {
  width: 18px;
  height: 18px;
}

.cat-name {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ve-navy);
}

.cat-count {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ve-grey-mid);
  margin-left: auto;
  background: rgba(12, 35, 64, 0.06);
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

/* 5-column grid layout for manufacturer cards */
.mfr-category .mfr-grid .row_col_wrap_12_inner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
}

.mfr-category .mfr-grid .row_col_wrap_12_inner > .wpb_column {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

@media (max-width: 1024px) {
  .mfr-category .mfr-grid .row_col_wrap_12_inner {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .mfr-category .mfr-grid .row_col_wrap_12_inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── [4] MANUFACTURER CARDS (page) ── */

/* Outer wpb_column — transparent; visual lives on .vc_column-inner so the
   entire inner column is the hover target and has consistent bounds. */
.mfr-category .mfr-card {
  position: relative;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Visual card surface — this is what the user sees and hovers */
.mfr-category .mfr-card .vc_column-inner {
  position: relative;
  height: 100%;
  border-radius: 12px !important;
  border: 1px solid #e4eaf2 !important;
  background: var(--ve-white) !important;
  box-shadow: 0 1px 3px rgba(12, 35, 64, 0.04);
  padding: 28px 22px 26px !important;
  overflow: visible;
  transition:
    border-color 0.22s ease,
    box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Top accent line — reveals on hover */
.mfr-category .mfr-card .vc_column-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ve-sky), var(--ve-blue));
  border-radius: 12px 12px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 2;
}

.mfr-category .mfr-card:hover .vc_column-inner::before {
  transform: scaleX(1);
}

.mfr-category .mfr-card:hover .vc_column-inner {
  border-color: rgba(74, 159, 212, 0.3) !important;
  box-shadow:
    0 4px 12px rgba(12, 35, 64, 0.06),
    0 12px 32px rgba(12, 35, 64, 0.08);
  transform: translateY(-3px);
}

/* Logo sizing within cards */
.mfr-category .mfr-card .mfr-logo-img {
  max-height: 56px !important;
  width: auto !important;
  object-fit: contain;
}

/* Card name text — blue + bold (reverted from plain navy) */
.mfr-category .mfr-card .mfr-name {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ve-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
  line-height: 1.3;
}

/* ── ARROW ICON (appears on hover) ── */
.mfr-category .mfr-card .arrow-icon {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 16px;
  height: 16px;
  color: var(--ve-sky);
  opacity: 0;
  transform: translateX(-5px);
  transition:
    opacity 0.18s,
    transform 0.18s;
  z-index: 3;
}

.mfr-category .mfr-card:hover .arrow-icon {
  opacity: 1;
  transform: translateX(0);
}

/* ── TOOLTIP (product description on hover) ── */
.mfr-category .mfr-card .tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: var(--ve-navy);
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  line-height: 1.55;
  padding: 12px 16px;
  border-radius: 8px;
  width: 230px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  transition:
    opacity 0.18s,
    transform 0.18s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.mfr-category .mfr-card:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mfr-category .mfr-card .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--ve-navy);
}

/* ── [5] BOTTOM CTA ── */

.bottom-cta {
  background: linear-gradient(
    135deg,
    var(--ve-navy) 0%,
    #1a3a5c 50%,
    #1e5580 100%
  );
  border-radius: 16px;
  padding: 56px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  margin-top: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(12, 35, 64, 0.18);
}

/* Decorative ring */
.bottom-cta::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(74, 159, 212, 0.15);
  pointer-events: none;
  animation: heroRing 8s ease-in-out infinite;
}

/* Subtle gradient overlay */
.bottom-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 80% 50%,
    rgba(74, 159, 212, 0.08) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.bottom-cta-text {
  position: relative;
  z-index: 1;
}

.bottom-cta-text h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--ve-white);
  margin-bottom: 8px;
}

.bottom-cta-text p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
}

.btn-primary-outline {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ve-orange);
  color: var(--ve-white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 15px 36px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(232, 116, 26, 0.3);
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s;
}

.btn-primary-outline:hover {
  background: var(--ve-orange-light);
  box-shadow: 0 6px 24px rgba(232, 116, 26, 0.4);
  transform: translateY(-1px);
  color: var(--ve-white);
}

.btn-primary-outline svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* ── [13] ANIMATIONS ── */

.mfr-category {
  opacity: 0;
  transform: translateY(16px);
  animation: mfrFadeUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.mfr-category:nth-child(1) {
  animation-delay: 0.05s;
}
.mfr-category:nth-child(2) {
  animation-delay: 0.12s;
}
.mfr-category:nth-child(3) {
  animation-delay: 0.19s;
}
.mfr-category:nth-child(4) {
  animation-delay: 0.26s;
}
.mfr-category:nth-child(5) {
  animation-delay: 0.33s;
}
.mfr-category:nth-child(6) {
  animation-delay: 0.4s;
}
.mfr-category:nth-child(7) {
  animation-delay: 0.47s;
}
.mfr-category:nth-child(8) {
  animation-delay: 0.54s;
}
.mfr-category:nth-child(9) {
  animation-delay: 0.61s;
}
.mfr-category:nth-child(10) {
  animation-delay: 0.68s;
}

@keyframes mfrFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── [14] RESPONSIVE ── */

@media (max-width: 1024px) {
  .mfr-hero-row {
    padding: 64px 24px 56px !important;
  }
  .mfr-hero-cta-col {
    display: none !important;
  }
  /* Reclaim full width when the CTA column is hidden */
  .mfr-hero-row > .row_col_wrap_12 > .wpb_column:not(.mfr-hero-cta-col),
  .mfr-hero-row .row_col_wrap_12 > .wpb_column:not(.mfr-hero-cta-col) {
    width: 100% !important;
  }
  .mfr-hero-h1,
  .mfr-hero-h1 h1 {
    font-size: 48px !important;
  }
}

@media (max-width: 768px) {
  .mfr-hero-h1,
  .mfr-hero-h1 h1 {
    font-size: 40px !important;
  }
  .mfr-stat-bar .wpb_column {
    flex: 0 0 calc(50% - 16px);
  }
  .bottom-cta {
    flex-direction: column;
    text-align: center;
    padding: 40px 32px;
  }
  .cat-header::after {
    width: 48px;
  }
}

/* (480px mfr-grid override removed — handled by grid rules in [3] CATEGORY SECTION) */

/* ── [15] PRINT ── */

@media print {
  /* Reset animations so everything is visible */
  .mfr-category {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Hide nav, footer, hero decorative elements, CTAs, back-to-top */
  #header-outer,
  #header-space,
  #header-secondary-outer,
  #footer-outer,
  #slide-out-widget-area,
  .slide-out-widget-area-toggle,
  #to-top,
  .mfr-hero-row::before,
  .mfr-hero-row::after,
  .bottom-cta::after,
  .bottom-cta::before,
  .nectar-animated-gradient,
  .grecaptcha-badge,
  .rmp_menu_trigger {
    display: none !important;
  }

  /* Flatten hero — compact, no gradient bg (save ink) */
  .mfr-hero-row {
    background: var(--ve-navy) !important;
    padding: 32px 24px 24px !important;
    page-break-after: avoid;
  }

  .mfr-hero-cta-col {
    display: none !important;
  }

  .mfr-hero-h1,
  .mfr-hero-h1 h1 {
    font-size: 32px !important;
  }

  /* Remove alternating bg — save ink */
  .mfr-category:nth-child(even)::before {
    display: none !important;
  }

  /* Category rows — tighter spacing, keep together */
  .mfr-category {
    padding-bottom: 24px !important;
    page-break-inside: avoid;
  }

  /* Cards — flat, bordered, compact layout */
  .mfr-category .mfr-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    page-break-inside: avoid;
  }

  .mfr-category .mfr-card .vc_column-inner::before {
    display: none !important;
  }

  /* Arrow icon — hide in print */
  .arrow-icon {
    display: none !important;
  }

  /* TOOLTIPS — show inline as product description */
  .tooltip {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    background: none !important;
    color: var(--ve-grey-text) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    padding: 4px 0 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    text-align: center;
  }

  /* Hide tooltip caret */
  .tooltip::after {
    display: none !important;
  }

  /* Bottom CTA — flatten */
  .bottom-cta {
    background: var(--ve-navy) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 24px !important;
    page-break-inside: avoid;
  }

  /* General print resets */
  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .container-wrap {
    margin-bottom: 0 !important;
  }
}

/* ============================================================
   MANUFACTURER DETAIL PAGE (single-manufacturer.php)
   ============================================================
   Class prefix: .mfr-detail-*
   Scope: WP body class `.single-manufacturer` + the `.mfr-detail-main`
   wrapper emitted by the template.
   Source of truth for structure and visual: the <style> block in
   assets/ve-manufacturer-detail-mockup.html. Tokens below are the
   local additions that mockup needs beyond the global :root palette.
   Rules land in this file across PHP passes 1–5 of issue #27:
     Pass 1 (this commit): section header + local tokens only
     Pass 2: breadcrumb, hero, stat bar
     Pass 3: overview, ve pull-aside, featured products
     Pass 4: faqs, downloads / line sheet
     Pass 5: portfolio fallback, bottom cta
   ============================================================ */

:root {
  /* Manufacturer detail page tokens. Radii are tighter than the
       listing page (4–8px vs 12–16px) per mockup note §99. */
  --ve-detail-radius: 6px;
  --ve-detail-radius-sm: 4px;
  --ve-success: #128a5c; /* case-study download-icon accent */
}

.mfr-detail-main {
  /* Container emitted by the template; children use --ve-* tokens. */
  background: var(--ve-white);
  color: var(--ve-grey-dark);
}

/* Salient's .container-wrap adds default top/bottom padding to every page.
   On mfr detail pages we want the hero to butt against the nav bar and the
   bottom CTA to butt against the footer — the hero and CTA already have
   their own internal padding, so the wrapper padding is purely wasted
   whitespace. Scope to body.single-manufacturer so the override never
   leaks onto other templates. */
body.single-manufacturer .container-wrap.mfr-detail-main {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* Defensive: if Salient wraps .container-wrap in another ancestor
   (e.g. #ajax-content-wrap, .page-wrap) that also has padding, zero
   the relevant ones. These are no-ops when the ancestors don't exist. */
body.single-manufacturer #ajax-content-wrap,
body.single-manufacturer .page-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

/* Single blog posts: Salient's single.css sets
     body.single-post.material[data-bg-header="true"] .container-wrap { padding-top:80px !important }
   which leaves a ~115px gap between the post hero and the body copy (#101
   review). Override it down to 40px. We must match Salient's exact selector
   specificity AND use !important (Salient's rule is !important), plus an
   `html` prefix to out-specify it regardless of stylesheet load order. */
html body.single-post.material[data-bg-header="true"] .container-wrap {
  padding-top: 40px !important;
}

/* Single-post Prev/Next nav (Salient .blog_next_prev_buttons): the white
   "Previous/Next Post" label + title sit directly on the adjacent post's
   featured image, which can be light or busy — poor contrast (#101 review,
   #275 item A3). Add a dark scrim between the bg image and the text via a
   pseudo-element on Salient's .post-bg-img layer. It sits above the image but
   below the <a>/<h3> siblings, so the white text always meets contrast while
   the image stays visible. pointer-events:none keeps the overlay link clickable;
   Salient's own hover-darken still stacks on top. */
.blog_next_prev_buttons .post-bg-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
}

/* Legibility insurance for the white "Previous/Next Post" label + title: on the
   brightest featured images (notably mobile, where the panels crop taller) a
   scrim alone leaves the small label marginal. A soft text-shadow guarantees
   the text reads without darkening the image further. */
.blog_next_prev_buttons .controls li h3 {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.mfr-detail-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Breadcrumb ---------- */
/* Rendered inside .mfr-detail-hero so it sits on the navy gradient. Colors
   below are tuned for dark bg; if this component is ever reused outside
   the hero, override color / current / sep in the reuse context. */

.mfr-detail-breadcrumb {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.mfr-detail-hero .mfr-detail-breadcrumb {
  /* Breadcrumb sits above the hero grid inside the hero section. Uses
       the existing .mfr-detail-wrap for horizontal alignment with the
       rest of the hero content. */
  position: relative;
  padding: 0 0 24px;
}

.mfr-detail-breadcrumb a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.18s ease;
}

.mfr-detail-breadcrumb a:hover {
  color: var(--ve-orange);
}

.mfr-detail-breadcrumb .sep {
  display: inline-block;
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.3);
}

.mfr-detail-breadcrumb .current {
  color: var(--ve-white);
}

/* ---------- Hero ---------- */

.mfr-detail-hero {
  background: linear-gradient(
    135deg,
    var(--ve-navy) 0%,
    #1a3a5c 60%,
    #1e5580 100%
  );
  padding: 56px 0 64px;
  position: relative;
  overflow: hidden;
  animation: mfrDetailFade 0.6s ease-out;
}

@keyframes mfrDetailFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mfr-detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle at 80% 30%,
      rgba(74, 159, 212, 0.09) 0%,
      transparent 55%
    ),
    radial-gradient(
      circle at 15% 85%,
      rgba(232, 116, 26, 0.06) 0%,
      transparent 45%
    );
  pointer-events: none;
}

.mfr-detail-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 440px;
  grid-template-areas:
    "text-top    logo"
    "text-bottom logo";
  column-gap: 48px;
  row-gap: 0;
  align-items: center;
}

.mfr-detail-hero-text-top {
  grid-area: text-top;
}
.mfr-detail-hero-text-bottom {
  grid-area: text-bottom;
}
.mfr-detail-hero-logo-card {
  grid-area: logo;
  align-self: center;
}

.mfr-detail-hero-eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ve-sky);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.mfr-detail-hero-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--ve-sky);
}

.mfr-detail-hero-h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.02;
  color: var(--ve-white);
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}

.mfr-detail-hero-subtitle {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--ve-sky-light);
  margin: 0 0 22px;
  letter-spacing: 0.02em;
}

.mfr-detail-hero-blurb {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin: 0 0 28px;
}

/* #396: the assigned-category chips are the shared .ve-term-list component
   now — real <ul>/<li> instead of a <div> of <span>s, which a screen reader
   announced as one run-on phrase. This modifier replaces the old
   .mfr-detail-hero-meta + .mfr-detail-specialty-chip pair and carries only
   the declarations that differed from the base chip; each one is lifted
   verbatim from those rules, so the rendered box is unchanged.

   Written as a two-class selector so the token block outranks the base
   component's `.ve-hero .ve-term-list` / `.dark .ve-term-list` dark rule
   regardless of what wrapper the hero grows later. */
.ve-term-list.ve-term-list--mfr-cat {
  --ve-term-bg: rgba(74, 159, 212, 0.12);
  --ve-term-fg: var(--ve-sky-light);
  --ve-term-border: rgba(74, 159, 212, 0.35);

  gap: 10px;
  margin-bottom: 28px;
}

.ve-term-list--mfr-cat li {
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  padding: 7px 14px;
  border-radius: var(--ve-detail-radius-sm);
  line-height: 1;
}

/* Multi-category mfrs (#160 / #169): the primary chip gets a slightly
   heavier weight + a left orange accent to distinguish it from
   secondaries. `.is-primary` is only added by single-manufacturer.php when
   2+ chips render, so single-cat mfrs are unaffected. */
/* Homepage systems cards (#389): the manufacturer-name chip list is hidden
   for now (Abby, 2026-09-09). The six pasted blocks keep their <ul> so the
   content survives; revisiting the chip UI on the homepage is #454 (M5).
   `!important` is deliberate, an exception to the no-!important rule: the
   cards sit in a Salient `.col.centered-text` column, and the parent theme
   sets `body .col.centered-text ul { display: inline-block }` (0,2,2) on
   desktop and `.col.centered-text ul { display: block !important }` in
   responsive.css on mobile. Nothing short of !important hides the list on
   every width. Scoped to .system-card; no other .ve-term-list surface
   changes. The selector is (0,3,1) so it also outranks the mobile rule's
   (0,2,1) when both are !important. */
.wpb_column.system-card ul.ve-term-list {
  display: none !important;
}

.ve-term-list--mfr-cat li.is-primary {
  font-weight: 700;
  border-left: 3px solid var(--ve-orange);
  padding-left: 11px; /* 14 - 3 to keep visual padding even */
}

/* Hero outline button — anchor to product lines */
.mfr-detail-btn-hero-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--ve-white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: var(--ve-detail-radius);
  text-decoration: none;
  border: 2px solid var(--ve-white);
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}

.mfr-detail-btn-hero-outline:hover {
  background: var(--ve-white);
  color: var(--ve-navy);
  transform: translateY(-1px);
}

.mfr-detail-btn-hero-outline svg {
  width: 14px;
  height: 14px;
}

/* --- External-link buttons (website + LinkedIn)
   Rendered at the bottom of .mfr-detail-overview-oem on the light-bg
   overview section. --- */

.mfr-detail-external-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* Website button: navy outline on white bg, fills on hover. Matches the
   secondary-button visual family but shares the 44px height of the adjacent
   circular LinkedIn button for a clean flex baseline. */
.mfr-detail-btn-ext-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  box-sizing: border-box;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ve-navy);
  background: transparent;
  border: 1.5px solid var(--ve-navy);
  border-radius: var(--ve-detail-radius);
  padding: 0 20px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    transform 0.12s ease;
}

.mfr-detail-btn-ext-link:hover {
  color: var(--ve-white);
  background-color: var(--ve-navy);
  transform: translateY(-1px);
}

.mfr-detail-btn-ext-link:focus-visible {
  outline: 2px solid var(--ve-sky);
  outline-offset: 2px;
}

.mfr-detail-btn-ext-link svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* LinkedIn button: minimal icon-only at rest, circular navy background
   appears on hover. Sized to match the website button's 44px height. */
.mfr-detail-btn-ext-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  font-size: 20px;
  line-height: 1;
  color: var(--ve-navy);
  background: transparent;
  border: none;
  border-radius: 50%;
  text-decoration: none;
  flex-shrink: 0;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    transform 0.12s ease;
}

.mfr-detail-btn-ext-icon:hover {
  color: var(--ve-white);
  background-color: var(--ve-navy);
  transform: translateY(-1px);
}

.mfr-detail-btn-ext-icon:focus-visible {
  outline: 2px solid var(--ve-sky);
  outline-offset: 2px;
}

.mfr-detail-btn-ext-icon .fa {
  font-size: 20px;
  line-height: 1;
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 600px) {
  .mfr-detail-external-links {
    gap: 6px;
  }

  .mfr-detail-btn-ext-link {
    max-width: calc(100% - 50px);
    padding: 0 16px;
    font-size: 12px;
  }
}

.mfr-detail-hero-logo-card {
  background: var(--ve-white);
  border-radius: var(--ve-detail-radius);
  /* Generous padding around the 870x210 logo. Card height is driven by
       the image's intrinsic aspect ratio plus this padding — no fixed
       min-height, so the card always matches the logo proportions. */
  padding: 48px 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  position: relative;
}

.mfr-detail-hero-logo-card img {
  display: block;
  width: 100%;
  height: auto;
  /* Logos are all cropped to 870x210 (aspect 4.14:1) with transparent
       bg. Width: 100% lets the card dimensions drive the logo size;
       height: auto preserves the aspect ratio. No object-fit needed. */
}

.mfr-detail-logo-placeholder {
  /* Placeholder fills the same inner card area as a real logo so the
       card doesn't collapse when a manufacturer is missing an image. */
  width: 100%;
  aspect-ratio: 870 / 210;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--ve-navy);
  letter-spacing: 0.02em;
  text-align: center;
}

/* ---------- Stat Bar ---------- */

.mfr-detail-stat-bar {
  background: var(--ve-white);
  border-bottom: 1px solid var(--ve-grey-bg);
  box-shadow: 0 1px 0 rgba(12, 35, 64, 0.04);
}

.mfr-detail-stat-bar-inner {
  display: grid;
  gap: 0;
}

/* Responsive slot counts — drives column count from data-slots attribute
   so fewer-than-4 stat configurations still center and balance. */
.mfr-detail-stat-bar-inner[data-slots="1"] {
  grid-template-columns: 1fr;
}
.mfr-detail-stat-bar-inner[data-slots="2"] {
  grid-template-columns: repeat(2, 1fr);
}
.mfr-detail-stat-bar-inner[data-slots="3"] {
  grid-template-columns: repeat(3, 1fr);
}
.mfr-detail-stat-bar-inner[data-slots="4"] {
  grid-template-columns: repeat(4, 1fr);
}

.mfr-detail-stat {
  padding: 24px 20px;
  border-right: 1px solid var(--ve-grey-bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mfr-detail-stat:last-child {
  border-right: none;
}

.mfr-detail-stat-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ve-grey-mid);
}

.mfr-detail-stat-value {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ve-navy);
  letter-spacing: 0.01em;
}

/* ---------- Hero responsive ---------- */

@media (max-width: 900px) {
  .mfr-detail-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text-top"
      "logo"
      "text-bottom";
    row-gap: 24px;
  }
  .mfr-detail-hero-h1 {
    font-size: 42px;
  }
  .mfr-detail-hero-subtitle {
    font-size: 19px;
  }
  .mfr-detail-hero-logo-card {
    max-width: 440px;
    margin: 0 auto;
    padding: 36px 44px;
  }
}

@media (max-width: 600px) {
  .mfr-detail-hero-logo-card {
    max-width: 100%;
    padding: 28px 36px;
  }
  .mfr-detail-logo-placeholder {
    font-size: 28px;
  }
}

@media (max-width: 600px) {
  .mfr-detail-hero {
    padding: 40px 0 48px;
  }
  .mfr-detail-hero-h1 {
    font-size: 34px;
  }
  .mfr-detail-stat-bar-inner[data-slots="4"],
  .mfr-detail-stat-bar-inner[data-slots="3"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .mfr-detail-stat {
    border-right: none;
    border-bottom: 1px solid var(--ve-grey-bg);
  }
  .mfr-detail-stat:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}

/* ---------- Shared section primitives ---------- */

.mfr-detail-section {
  padding: 72px 0;
}

.mfr-detail-section--alt {
  background: var(--ve-grey-bg);
}

.mfr-detail-section-eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ve-sky);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.mfr-detail-section-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--ve-sky);
}

.mfr-detail-section-h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--ve-navy);
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin: 0 0 28px;
}

/* ---------- Overview + VE pull-aside ---------- */

.mfr-detail-overview-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: start;
}

.mfr-detail-overview-oem p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ve-grey-dark);
  margin: 0 0 16px;
}

.mfr-detail-overview-oem p:last-child {
  margin-bottom: 0;
}

.mfr-detail-ve-voice {
  background: var(--ve-navy);
  color: var(--ve-white);
  padding: 36px 32px;
  border-radius: var(--ve-detail-radius);
  border-left: 4px solid var(--ve-orange);
  position: relative;
}

.mfr-detail-ve-voice .mfr-detail-section-eyebrow {
  color: var(--ve-sky-light);
  margin-bottom: 10px;
}

.mfr-detail-ve-voice .mfr-detail-section-eyebrow::before {
  background: var(--ve-sky-light);
}

.mfr-detail-ve-voice h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--ve-white);
  margin: 0 0 14px;
  line-height: 1.15;
}

.mfr-detail-ve-voice p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 10px;
}

.mfr-detail-ve-voice p:last-child {
  margin-bottom: 0;
}

/* ---------- Featured products grid ---------- */

.mfr-detail-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.mfr-detail-product-card {
  background: var(--ve-white);
  border: 1px solid rgba(12, 35, 64, 0.08);
  border-radius: var(--ve-detail-radius);
  padding: 32px 28px;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none; /* for anchor-wrapped variant */
  color: inherit;
  display: block;
}

.mfr-detail-product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ve-sky), var(--ve-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.mfr-detail-product-card:hover {
  border-color: var(--ve-sky);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(12, 35, 64, 0.08);
}

.mfr-detail-product-card:hover::before {
  transform: scaleX(1);
}

.mfr-detail-product-media {
  width: 80px;
  height: 80px;
  border-radius: var(--ve-detail-radius-sm);
  background: rgba(74, 159, 212, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
}

.mfr-detail-product-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mfr-detail-product-card h4 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ve-navy);
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}

.mfr-detail-product-tagline {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ve-orange);
  margin-bottom: 12px;
}

.mfr-detail-product-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ve-grey-mid);
  margin: 0;
}

/* ---------- Pass 3 responsive ---------- */

@media (max-width: 900px) {
  .mfr-detail-overview-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .mfr-detail-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mfr-detail-section {
    padding: 56px 0;
  }
  .mfr-detail-section-h2 {
    font-size: 28px;
  }
}

@media (max-width: 600px) {
  .mfr-detail-products-grid {
    grid-template-columns: 1fr;
  }
  .mfr-detail-section {
    padding: 48px 0;
  }
}

/* ---------- FAQ (Salient toggles wrapper) ---------- */

.mfr-detail-faq {
  max-width: 820px;
}

/* Goal: only TWO visual states for the FAQ question header row.
     State A — collapsed, not hovered: white bg, navy text
     State B — expanded OR hovered: navy bg, white text
   Hover-while-collapsed applies State B so the text never sits in an
   in-between mid-contrast color that's hard to read.

   We scope with body.single-manufacturer .mfr-detail-faq so the rules
   have specificity 0,4,x and beat Salient's default .toggle {} without
   needing !important. Multiple selectors cover the range of markup
   Salient has emitted across versions (anchor-based, h3-based,
   toggle-title-based). */

body.single-manufacturer .mfr-detail-faq .toggle {
  background: var(--ve-white);
  border: 1px solid rgba(12, 35, 64, 0.1);
  border-radius: var(--ve-detail-radius);
  margin-bottom: 10px;
  overflow: hidden;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

/* State A — collapsed, not hovered. Header area text = navy. */
body.single-manufacturer .mfr-detail-faq .toggle h3,
body.single-manufacturer .mfr-detail-faq .toggle h3 a,
body.single-manufacturer .mfr-detail-faq .toggle .toggle-title,
body.single-manufacturer .mfr-detail-faq .toggle .toggle_title,
body.single-manufacturer .mfr-detail-faq .toggle .accordion-title,
body.single-manufacturer .mfr-detail-faq .toggle > a {
  color: var(--ve-navy);
  transition: color 0.18s ease;
}

/* State B — expanded, OR hovered while collapsed. Header area = navy
   bg, white text. Both trigger classes covered (Salient uses .open in
   older versions, .active in newer). :hover is intentionally paired
   so the hover-while-collapsed state matches the expanded state. */
body.single-manufacturer .mfr-detail-faq .toggle:hover,
body.single-manufacturer .mfr-detail-faq .toggle.open,
body.single-manufacturer .mfr-detail-faq .toggle.active {
  background: var(--ve-navy);
  border-color: var(--ve-navy);
}

body.single-manufacturer .mfr-detail-faq .toggle:hover h3,
body.single-manufacturer .mfr-detail-faq .toggle:hover h3 a,
body.single-manufacturer .mfr-detail-faq .toggle:hover .toggle-title,
body.single-manufacturer .mfr-detail-faq .toggle:hover .toggle_title,
body.single-manufacturer .mfr-detail-faq .toggle:hover .accordion-title,
body.single-manufacturer .mfr-detail-faq .toggle:hover > a,
body.single-manufacturer .mfr-detail-faq .toggle.open h3,
body.single-manufacturer .mfr-detail-faq .toggle.open h3 a,
body.single-manufacturer .mfr-detail-faq .toggle.open .toggle-title,
body.single-manufacturer .mfr-detail-faq .toggle.open .toggle_title,
body.single-manufacturer .mfr-detail-faq .toggle.open .accordion-title,
body.single-manufacturer .mfr-detail-faq .toggle.open > a,
body.single-manufacturer .mfr-detail-faq .toggle.active h3,
body.single-manufacturer .mfr-detail-faq .toggle.active h3 a,
body.single-manufacturer .mfr-detail-faq .toggle.active .toggle-title,
body.single-manufacturer .mfr-detail-faq .toggle.active .toggle_title,
body.single-manufacturer .mfr-detail-faq .toggle.active .accordion-title,
body.single-manufacturer .mfr-detail-faq .toggle.active > a {
  color: var(--ve-white);
}

/* ---------- Downloads list ---------- */

.mfr-detail-downloads-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 820px;
}

/* Salient may reinject list markers; nuke them scoped to our list. */
body.single-manufacturer .mfr-detail-downloads-list,
body.single-manufacturer .mfr-detail-downloads-list li,
body.single-manufacturer .mfr-detail-downloads-list li::before,
body.single-manufacturer .mfr-detail-downloads-list li::marker {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

.mfr-detail-download-row {
  margin: 0 0 10px;
}

.mfr-detail-download-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--ve-white);
  border: 1px solid rgba(12, 35, 64, 0.1);
  border-radius: var(--ve-detail-radius);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease;
}

.mfr-detail-download-link:hover {
  border-color: var(--ve-sky);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(12, 35, 64, 0.06);
}

.mfr-detail-download-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--ve-detail-radius-sm);
  background: var(--ve-navy);
  color: var(--ve-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* File-type accent colors — distinguish the 5 download types at a glance */
.mfr-detail-download-icon[data-file-type="line-sheet"] {
  background: var(--ve-navy);
}
.mfr-detail-download-icon[data-file-type="spec-sheet"] {
  background: var(--ve-blue);
}
.mfr-detail-download-icon[data-file-type="brochure"] {
  background: var(--ve-mid-blue);
}
.mfr-detail-download-icon[data-file-type="case-study"] {
  background: var(--ve-success);
}
.mfr-detail-download-icon[data-file-type="other"] {
  background: var(--ve-grey-mid);
}

.mfr-detail-download-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mfr-detail-download-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ve-navy);
  letter-spacing: 0.01em;
}

.mfr-detail-download-desc {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ve-grey-mid);
}

.mfr-detail-download-action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ve-orange);
  transition:
    color 0.18s ease,
    gap 0.18s ease;
}

.mfr-detail-download-link:hover .mfr-detail-download-action {
  color: var(--ve-orange-light);
  gap: 10px;
}

@media (max-width: 600px) {
  .mfr-detail-download-link {
    padding: 14px 16px;
    gap: 12px;
  }
  .mfr-detail-download-icon {
    width: 38px;
    height: 38px;
  }
  .mfr-detail-download-label {
    font-size: 16px;
  }
  .mfr-detail-download-action {
    /* Hide "Download" label on narrow screens — arrow SVG still visible */
    font-size: 0;
  }
  .mfr-detail-download-action svg {
    width: 16px;
    height: 16px;
  }
}

/* ---------- Sparse portfolio fallback card ---------- */

.mfr-detail-portfolio-fallback {
  background: var(--ve-white);
  border: 1px dashed rgba(12, 35, 64, 0.2);
  border-radius: var(--ve-detail-radius);
  padding: 48px 40px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.mfr-detail-fallback-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(74, 159, 212, 0.1);
  color: var(--ve-blue);
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mfr-detail-fallback-icon svg {
  width: 26px;
  height: 26px;
}

.mfr-detail-portfolio-fallback h4 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ve-navy);
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}

.mfr-detail-portfolio-fallback p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ve-grey-mid);
  max-width: 520px;
  margin: 0 auto 20px;
}

/* ---------- Secondary button (outlined, light bg) ---------- */

.mfr-detail-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--ve-navy);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 2px solid var(--ve-navy);
  border-radius: var(--ve-detail-radius);
  text-decoration: none;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}

.mfr-detail-btn-secondary:hover {
  background: var(--ve-navy);
  color: var(--ve-white);
  transform: translateY(-1px);
}

/* ---------- Bottom contact CTA ---------- */

.mfr-detail-bottom-cta {
  background: linear-gradient(
    135deg,
    var(--ve-navy) 0%,
    #1a3a5c 50%,
    #1e5580 100%
  );
  padding: 64px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.mfr-detail-bottom-cta::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ve-sky),
    var(--ve-orange),
    transparent
  );
  z-index: 2;
  pointer-events: none;
}

.mfr-detail-bottom-cta h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--ve-white);
  margin: 0 0 12px;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.mfr-detail-bottom-cta p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 560px;
  margin: 0 auto 28px;
}

/* ---------- Primary button (orange, medium CTA) ---------- */

.mfr-detail-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ve-orange);
  color: var(--ve-white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--ve-detail-radius);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    background 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease;
  box-shadow: 0 4px 14px rgba(232, 116, 26, 0.28);
}

.mfr-detail-btn-primary:hover {
  background: var(--ve-orange-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 116, 26, 0.36);
}

.mfr-detail-btn-primary svg {
  width: 16px;
  height: 16px;
}

/* ---------- Pass 5 responsive ---------- */

@media (max-width: 600px) {
  .mfr-detail-portfolio-fallback {
    padding: 36px 24px;
  }
  .mfr-detail-bottom-cta {
    padding: 48px 0;
  }
  .mfr-detail-bottom-cta h2 {
    font-size: 28px;
  }
}

/* ============================================================
   FOOTER OFFICE LIST
   ============================================================
   Class: .ve-office-list
   Scope: Custom HTML widget in the footer widget area.
   Renders the six Texas offices as a plain, unstyled stack.
   Font + color inherit from Salient's footer widget context
   so it matches surrounding footer text without overrides.
   ============================================================ */

.ve-office-list {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.75;
}

.ve-office-list li {
  margin: 0;
  padding: 0;
}

/* ============================================================
   CONTACT PAGE (/contact/)
   ============================================================
   Scoped to .page-template-page-contact (WP adds this body class
   for pages using the page-contact.php named template). CF7 overrides
   scoped to .page-template-page-contact .wpcf7-form to avoid bleeding.
   Template: page-contact.php
   Mockup:   docs/mockups/contact.html (v5, approved)
   Issues:   #59 (mockup — closed), #60 (build), #84 (mfr context, Phase 2a)
   ============================================================ */

/* page background — navy shows through the gap between form and reps cards
   and below the reps card where the Salient footer takes over. Also applied
   to the manufacturer archive so its hero + card-overlap share the contact
   pattern (see #28 / #104). */
.page-template-page-contact,
.post-type-archive-manufacturer {
  background: var(--ve-navy);
}

/* Salient's .container-wrap adds default top/bottom padding to every page.
   On /contact/ we want the hero to butt against the nav bar and the HQ band
   to butt against the footer — the hero and HQ band already have their own
   internal padding, so the wrapper padding is wasted whitespace AND its
   bottom margin causes the footer to overlap the HQ band. Same logic on the
   mfr archive. */
body.page-template-page-contact .container-wrap.page-contact-main,
body.page-template-page-about .container-wrap.page-about-main,
body.post-type-archive-manufacturer .container-wrap.mfr-archive-main,
body.post-type-archive-resource .container-wrap.resource-archive-main,
body.page-template-page-weftec-guide .container-wrap.page-weftec-guide-main,
body.error404 .container-wrap.error404-main {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* Defensive: if Salient wraps .container-wrap in another ancestor
   (e.g. #ajax-content-wrap, .page-wrap) that also has padding, zero
   the relevant ones. These are no-ops when the ancestors don't exist. */
body.page-template-page-contact #ajax-content-wrap,
body.page-template-page-contact .page-wrap,
body.page-template-page-about #ajax-content-wrap,
body.page-template-page-about .page-wrap,
body.post-type-archive-manufacturer #ajax-content-wrap,
body.post-type-archive-manufacturer .page-wrap,
body.post-type-archive-resource #ajax-content-wrap,
body.post-type-archive-resource .page-wrap,
body.page-template-page-weftec-guide #ajax-content-wrap,
body.page-template-page-weftec-guide .page-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

/* --- Hero ---
   Default: navy with faint sky-grid texture + darkening overlay.
   With a featured image: `.has-hero-image` swaps the grid texture for the
   image set via the `--ve-hero-img` CSS custom property (set inline from
   the page's featured image in page-contact.php / archive-manufacturer.php).
   The dark navy overlay stays on top for text legibility regardless of
   image contents. */
/* De-scoped to a global component (#253): any template/page that renders a
   `.ve-hero` section gets this treatment — contact, mfr archive, resource
   archive, and future pages. Template-specific bits (body bg / contract 2,
   `.ve-card*`) stay scoped to their body classes below. */
.ve-hero {
  background-color: var(--ve-navy);
  /* background-image: linear-gradient(135deg, var(--ve-gradient1-start) 0%, var(--ve-gradient1-mid) 50%, var(--ve-gradient1-end) 100%); */
  background-image:
    linear-gradient(rgba(12, 35, 64, 0.78) 0%, rgba(12, 35, 64, 0.68) 100%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 63px,
      rgba(74, 159, 212, 0.035) 63px,
      rgba(74, 159, 212, 0.035) 64px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 63px,
      rgba(74, 159, 212, 0.035) 63px,
      rgba(74, 159, 212, 0.035) 64px
    );
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 32px 150px;
  position: relative;
}

.ve-hero.has-hero-image {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.95) 100%),
    var(--ve-hero-img);
  background-size: auto, cover;
  background-position:
    0 0,
    center center;
  background-repeat: no-repeat, no-repeat;
}
.ve-hero h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  font-weight: 800;
  color: var(--ve-white);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
  margin-bottom: 18px;
}
.page-template-page-contact .ve-hero-sub,
.page-template-page-weftec-guide .ve-hero-sub {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.58);
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.65;
  font-weight: 400;
}

/* Archive hero tagline — h4 + divider line, sits below the h1 inside .ve-hero.
   De-scoped with .ve-hero (#253) so any hero can use the tagline block. */
.mfr-hero-tagline h4 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ve-sky);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}
.mfr-hero-tagline-sub {
  font-size: 15px;
  color: var(--ve-grey-bg);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
  letter-spacing: 0.02em;
}

/* =====================================================================
 * 404 ERROR PAGE (#33)
 * Recovery content below the global .ve-hero band. Rendered by 404.php.
 * The hero itself is the shared .ve-hero component; only the content
 * block + CTA row are scoped here under body.error404.
 * ===================================================================== */
.error404-content {
  background: var(--ve-white);
  padding: 72px 32px 96px;
}
.error404-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.error404-lead {
  font-size: 18px;
  color: var(--ve-grey-text);
  line-height: 1.7;
  margin: 0 0 36px;
}
.error404-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}
/* .btn-primary defaults to width:100% for its in-card use; on the 404 CTA
   row the two buttons sit side by side, so size to content. */
.error404-cta .btn-primary {
  width: auto;
}
.error404-help {
  font-size: 15px;
  color: var(--ve-grey-mid);
  line-height: 1.6;
  margin: 0;
}
.error404-help a {
  color: var(--ve-sky);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.error404-help a:hover {
  border-bottom-color: var(--ve-sky);
}

@media (max-width: 600px) {
  .error404-content {
    padding: 52px 24px 72px;
  }
  .error404-lead {
    font-size: 16px;
  }
  /* Stack the CTAs full-width on narrow screens. */
  .error404-cta {
    flex-direction: column;
  }
  .error404-cta .btn-primary,
  .error404-cta .btn-primary-outline {
    width: 100%;
    justify-content: center;
  }
}

/* --- Card wrapper (structural only; visual styling lives on the two inner
   cards so a navy band shows through between them) --- */
.page-template-page-contact .ve-card,
.post-type-archive-manufacturer .ve-card,
.page-template-page-weftec-guide .ve-card {
  position: relative;
}

/* --- Card Part 1: Form (contact) / main content card (archive) --- */
.page-template-page-contact .ve-card-form,
.post-type-archive-manufacturer .ve-card-form,
.page-template-page-weftec-guide .ve-card-form {
  background: var(--ve-white);
  border-radius: 28px 28px 0 0;
  margin-top: -88px;
  position: relative;
  z-index: 10;
  box-shadow: 0 -16px 64px rgba(12, 35, 64, 0.1);
  padding: 72px 64px 64px;
}
.page-template-page-contact .ve-form-split,
.page-template-page-weftec-guide .ve-form-split {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 72px;
  align-items: start;
}

/* Left: contact info blocks */
.page-template-page-contact .ve-info-block {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--ve-rule);
}
.page-template-page-contact .ve-info-block:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.page-template-page-contact .ve-info-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--ve-grey-dark);
  margin-bottom: 8px;
  font-family: "DM Sans", sans-serif;
}
.page-template-page-contact .ve-info-body {
  font-size: 14px;
  color: var(--ve-grey-mid);
  line-height: 1.6;
}
.page-template-page-contact .ve-info-body a {
  color: var(--ve-mid-blue);
  font-weight: 500;
}
.page-template-page-contact .ve-info-body a:hover {
  color: var(--ve-orange);
  text-decoration: none;
}
/* Right: form heading + CF7 (contact) / centered intro block (archive) */
.page-template-page-contact .ve-form-heading,
.post-type-archive-manufacturer .ve-form-heading,
.page-template-page-weftec-guide .ve-form-heading {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: var(--ve-navy);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  margin-bottom: 10px;
}
.page-template-page-contact .ve-form-heading em,
.post-type-archive-manufacturer .ve-form-heading em,
.page-template-page-weftec-guide .ve-form-heading em {
  font-style: italic;
  color: var(--ve-sky);
}
.page-template-page-contact .ve-form-lead,
.post-type-archive-manufacturer .ve-form-lead,
.page-template-page-weftec-guide .ve-form-lead {
  font-size: 15px;
  color: var(--ve-grey-mid);
  line-height: 1.65;
  max-width: 540px;
  margin-bottom: 32px;
}

/* Archive intro block — center the broadened .ve-form-heading/.ve-form-lead
   since there is no two-column form-split context here. */
.post-type-archive-manufacturer .mfr-archive-intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}
.post-type-archive-manufacturer .mfr-archive-intro .ve-form-lead {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Manufacturer handoff context strip (#235) — renders above the CF7 form
   when /contact/?mfr={slug} matches a published manufacturer. Sky-tinted
   pill with an orange accent, sitting between the lead paragraph and the
   form. Falls back to nothing when the param is missing/invalid, so the
   form column renders identically to before. */
.page-template-page-contact .ve-mfr-context-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px 12px 18px;
  margin: -8px 0 24px;
  background: var(--ve-grey-bg);
  border-left: 3px solid var(--ve-orange);
  border-radius: 4px;
  max-width: 800px;
}
.page-template-page-contact .ve-mfr-context-strip p {
  margin: 0;
  font-size: 15px;
  color: var(--ve-grey-dark);
  line-height: 1.4;
}
.page-template-page-contact .ve-mfr-context-strip strong {
  color: var(--ve-navy);
  font-weight: 600;
}
.page-template-page-contact .ve-mfr-context-clear {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ve-grey-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-template-page-contact .ve-mfr-context-clear:hover,
.page-template-page-contact .ve-mfr-context-clear:focus {
  color: var(--ve-orange);
}

/* CF7 form overrides — rounded inputs, placeholder labels, full-width submit */
.page-template-page-contact .wpcf7-form,
.page-template-page-weftec-guide .wpcf7-form {
  display: flex;
  flex-direction: column;
  max-width: 800px;
}
.page-template-page-contact .wpcf7-form p,
.page-template-page-weftec-guide .wpcf7-form p {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
  padding: 0;
}
.page-template-page-contact .wpcf7-form p .wpcf7-form-control-wrap,
.page-template-page-weftec-guide .wpcf7-form p .wpcf7-form-control-wrap {
  flex: 1 1 calc(50% - 7px);
  min-width: 180px;
}
.page-template-page-contact
  .wpcf7-form
  p
  .wpcf7-form-control-wrap:has(textarea),
.page-template-page-contact .wpcf7-form p .wpcf7-form-control-wrap:has(select),
.page-template-page-weftec-guide
  .wpcf7-form
  p
  .wpcf7-form-control-wrap:has(textarea),
.page-template-page-weftec-guide
  .wpcf7-form
  p
  .wpcf7-form-control-wrap:has(select) {
  flex: 1 1 100%;
}
.page-template-page-contact .wpcf7-form input[type="text"],
.page-template-page-contact .wpcf7-form input[type="email"],
.page-template-page-contact .wpcf7-form input[type="tel"],
.page-template-page-contact .wpcf7-form select,
.page-template-page-contact .wpcf7-form textarea,
.page-template-page-weftec-guide .wpcf7-form input[type="text"],
.page-template-page-weftec-guide .wpcf7-form input[type="email"],
.page-template-page-weftec-guide .wpcf7-form input[type="tel"],
.page-template-page-weftec-guide .wpcf7-form select,
.page-template-page-weftec-guide .wpcf7-form textarea {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  color: var(--ve-grey-dark);
  background: var(--ve-white);
  border: 1px solid #d8dce6;
  border-radius: 8px;
  padding: 13px 16px;
  outline: none;
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.page-template-page-contact .wpcf7-form input[type="text"]:focus,
.page-template-page-contact .wpcf7-form input[type="email"]:focus,
.page-template-page-contact .wpcf7-form input[type="tel"]:focus,
.page-template-page-contact .wpcf7-form select:focus,
.page-template-page-contact .wpcf7-form textarea:focus,
.page-template-page-weftec-guide .wpcf7-form input[type="text"]:focus,
.page-template-page-weftec-guide .wpcf7-form input[type="email"]:focus,
.page-template-page-weftec-guide .wpcf7-form input[type="tel"]:focus,
.page-template-page-weftec-guide .wpcf7-form select:focus,
.page-template-page-weftec-guide .wpcf7-form textarea:focus {
  border-color: var(--ve-sky);
  box-shadow: 0 0 0 3px rgba(74, 159, 212, 0.1);
}
.page-template-page-contact .wpcf7-form input::placeholder,
.page-template-page-contact .wpcf7-form textarea::placeholder,
.page-template-page-weftec-guide .wpcf7-form input::placeholder,
.page-template-page-weftec-guide .wpcf7-form textarea::placeholder {
  color: var(--ve-grey-lighter);
}
.page-template-page-contact .wpcf7-form select,
.page-template-page-weftec-guide .wpcf7-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23B0BAC5' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
  color: var(--ve-grey-lighter);
}
.page-template-page-contact .wpcf7-form select.has-value,
.page-template-page-weftec-guide .wpcf7-form select.has-value {
  color: var(--ve-grey-dark);
}
.page-template-page-contact .wpcf7-form textarea,
.page-template-page-weftec-guide .wpcf7-form textarea {
  resize: none;
  min-height: 120px;
  line-height: 1.6;
}
.page-template-page-contact .wpcf7-submit,
.page-template-page-contact .wpcf7-form input[type="submit"],
.page-template-page-weftec-guide .wpcf7-submit,
.page-template-page-weftec-guide .wpcf7-form input[type="submit"] {
  display: block;
  width: 100%;
  padding: 17px;
  background: var(--ve-navy);
  color: var(--ve-white);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  text-align: center;
  margin-top: 14px;
}
.page-template-page-contact .wpcf7-submit:hover,
.page-template-page-contact .wpcf7-form input[type="submit"]:hover,
.page-template-page-weftec-guide .wpcf7-submit:hover,
.page-template-page-weftec-guide .wpcf7-form input[type="submit"]:hover {
  background: var(--ve-blue);
}
.page-template-page-contact .wpcf7-spinner,
.page-template-page-weftec-guide .wpcf7-spinner {
  display: block;
  margin-top: 8px;
}
/* reCAPTCHA disclosure text (auto-inserted by CF7's reCAPTCHA integration).
   Same treatment as the old .ve-form-caption — quiet, centered, italic. */
.page-template-page-contact .grecaptcha-text,
.page-template-page-weftec-guide .grecaptcha-text {
  margin-top: 11px;
  font-size: 12px;
  color: var(--ve-grey-light);
  text-align: center;
  font-style: italic;
}

/* --- Card Part 2: Rep Directory --- */
.page-template-page-contact .ve-card-reps,
.page-template-page-weftec-guide .ve-card-reps {
  background: var(--ve-white);
  border-radius: 28px 28px 0 0;
  margin-top: 56px;
  position: relative;
  z-index: 10;
  padding: 64px 64px 72px;
}
.page-template-page-contact .ve-reps-header,
.page-template-page-weftec-guide .ve-reps-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 16px;
}
.page-template-page-contact .ve-overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ve-sky);
  margin-bottom: 8px;
}
.page-template-page-contact .ve-overline::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--ve-sky);
  display: block;
  flex-shrink: 0;
}
.page-template-page-contact .ve-reps-h2,
.page-template-page-weftec-guide .ve-reps-h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--ve-navy);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.01em;
}
.page-template-page-contact .ve-reps-h2 em,
.page-template-page-weftec-guide .ve-reps-h2 em {
  font-style: italic;
  color: var(--ve-grey-light);
  font-weight: 400;
}
.page-template-page-contact .ve-rep-row,
.page-template-page-weftec-guide .ve-rep-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0 52px;
  padding: 30px 0;
  border-top: 1px solid var(--ve-rule);
  align-items: start;
}
.page-template-page-contact .ve-rep-row:last-child,
.page-template-page-weftec-guide .ve-rep-row:last-child {
  border-bottom: 1px solid var(--ve-rule);
}
.page-template-page-contact .ve-territory-region,
.page-template-page-weftec-guide .ve-territory-region {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ve-grey-mid);
  margin-bottom: 3px;
}
.page-template-page-contact .ve-territory-city,
.page-template-page-weftec-guide .ve-territory-city {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  text-transform: uppercase;
  color: var(--ve-navy);
  line-height: 1;
  letter-spacing: 0.02em;
}
.page-template-page-contact .ve-row-reps,
.page-template-page-weftec-guide .ve-row-reps {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
}
.page-template-page-contact .ve-rep-namerow,
.page-template-page-weftec-guide .ve-rep-namerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 5px;
}
.page-template-page-contact .ve-rep-name,
.page-template-page-weftec-guide .ve-rep-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ve-grey-dark);
}
.page-template-page-contact .ve-cred,
.page-template-page-weftec-guide .ve-cred {
  font-size: 10px;
  font-weight: 700;
  color: var(--ve-sky);
  letter-spacing: 0.06em;
  border: 1px solid rgba(74, 159, 212, 0.3);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.page-template-page-contact .ve-rep-contacts,
.page-template-page-weftec-guide .ve-rep-contacts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-template-page-contact .ve-contact-line,
.page-template-page-weftec-guide .ve-contact-line {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ve-grey-mid);
}
.page-template-page-contact .ve-contact-tag,
.page-template-page-weftec-guide .ve-contact-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ve-grey-light);
  min-width: 12px;
  flex-shrink: 0;
}
.page-template-page-contact .ve-contact-line a,
.page-template-page-weftec-guide .ve-contact-line a {
  color: var(--ve-mid-blue);
  font-weight: 500;
}
.page-template-page-contact .ve-contact-line a:hover,
.page-template-page-weftec-guide .ve-contact-line a:hover {
  color: var(--ve-orange);
  text-decoration: none;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .page-template-page-contact .ve-card-form,
  .page-template-page-contact .ve-card-reps,
  .post-type-archive-manufacturer .ve-card-form,
  .page-template-page-weftec-guide .ve-card-form,
  .page-template-page-weftec-guide .ve-card-reps {
    padding: 52px 40px;
  }
  .page-template-page-contact .ve-form-split,
  .page-template-page-weftec-guide .ve-form-split {
    gap: 48px;
  }
}
@media (max-width: 768px) {
  .ve-hero {
    padding: 120px 24px 140px;
  }
  .page-template-page-contact .ve-card-form,
  .post-type-archive-manufacturer .ve-card-form,
  .page-template-page-weftec-guide .ve-card-form {
    border-radius: 20px 20px 0 0;
    margin-top: -56px;
    padding: 40px 24px;
  }
  .page-template-page-contact .ve-card-reps,
  .page-template-page-weftec-guide .ve-card-reps {
    border-radius: 20px 20px 0 0;
    margin-top: 40px;
    padding: 40px 24px;
  }
  .page-template-page-contact .ve-form-split,
  .page-template-page-weftec-guide .ve-form-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .page-template-page-contact .wpcf7-form p .wpcf7-form-control-wrap,
  .page-template-page-weftec-guide .wpcf7-form p .wpcf7-form-control-wrap {
    flex: 1 1 100%;
  }
  .page-template-page-contact .ve-rep-row,
  .page-template-page-weftec-guide .ve-rep-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .page-template-page-contact .ve-row-reps,
  .page-template-page-weftec-guide .ve-row-reps {
    flex-direction: column;
    gap: 20px;
  }
  .page-template-page-contact .ve-reps-header,
  .page-template-page-weftec-guide .ve-reps-header {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Force "All of Texas Covered." onto its own line below "Six Territories." */
  .page-template-page-contact .ve-reps-h2 em,
  .page-template-page-weftec-guide .ve-reps-h2 em {
    display: block;
  }
}

/* =====================================================================
 * MANUFACTURER ARCHIVE TEMPLATE (FLAT MARKUP)
 * =====================================================================
 * Scoped to archive-manufacturer.php output (flat .mfr-category blocks
 * rendered by includes/mfr-archive-render.php). The existing CATEGORY
 * SECTION + MANUFACTURER CARDS rules above target the WPBakery-shaped
 * interim markup on WP page 992 (.vc_column-inner inside .mfr-card,
 * .row_col_wrap_12_inner inside .mfr-grid). When page 992 retires at
 * cutover, those interim-specific rules can be consolidated — for now
 * both live side by side so the interim stays visually unchanged.
 * ===================================================================== */

.post-type-archive-manufacturer .mfr-archive-wrap {
  max-width: 1200px;
  margin: 0 auto;
  /* Outer inset now owned by .ve-card-form (contact-parity card wrapper). */
}

.post-type-archive-manufacturer .mfr-archive-hero {
  margin: 0 0 32px;
}

/* CTA card — archive-scoped base styles.
   The archive hero div intentionally omits the .mfr-hero-cta-col class
   (which carries a legacy display:none!important for the interim page 992),
   so these rules replicate the card container, shimmer, and hover from the
   shared .mfr-hero-cta-col .cta-card block for the archive context only. */
.post-type-archive-manufacturer .mfr-archive-hero .cta-card {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border: 1px solid var(--ve-rule);
  border-radius: 16px;
  padding: 36px 36px 32px;
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

.post-type-archive-manufacturer .mfr-archive-hero .cta-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ve-sky),
    var(--ve-orange),
    transparent
  );
  opacity: 0.6;
}

.post-type-archive-manufacturer .mfr-archive-hero .cta-card:hover {
  border-color: rgba(74, 159, 212, 0.3);
  box-shadow: 0 12px 32px rgba(12, 35, 64, 0.12);
  transform: translateY(-2px);
}

/* =====================================================================
 * MANUFACTURER ARCHIVE — CATEGORY JUMP-NAV (#236)
 * =====================================================================
 * Horizontal chip nav pinned below the site header once it scrolls past.
 * NOT position:sticky — Salient's body{overflow:hidden} permanently
 * disables sticky on this theme (see § "STICKY SIDEBAR" limitation).
 * We ship two identical <nav> blocks: an inline one in normal flow, and
 * a position:fixed clone that JS reveals once the inline nav pins.
 *
 * Live header height comes from the JS at the bottom of
 * archive-manufacturer.php as `--ve-header-h` on :root (measures
 * #header-outer + admin bar). CSS fallback of 90px covers the no-JS case.
 * ===================================================================== */

.post-type-archive-manufacturer .mfr-jumpnav {
  margin: 26px auto 8px;
  max-width: 1200px;
}
.post-type-archive-manufacturer .mfr-jumpnav__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
}
.post-type-archive-manufacturer .mfr-jumpnav__label {
  flex-shrink: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--ve-grey-mid);
  padding-right: 8px;
  border-right: 1px solid var(--ve-rule);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.post-type-archive-manufacturer .mfr-jumpnav__track-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.post-type-archive-manufacturer .mfr-jumpnav__track {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 2px 2px 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.post-type-archive-manufacturer .mfr-jumpnav__track::-webkit-scrollbar {
  display: none;
}
.post-type-archive-manufacturer .mfr-jumpnav__chip-item {
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  margin: 0;
}
.post-type-archive-manufacturer .mfr-jumpnav__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* ~44px tall — WCAG 2.5.5 touch target for gloved field operators. */
  padding: 14px 16px;
  border: 1px solid rgba(12, 35, 64, 0.16);
  border-radius: 999px;
  background: var(--ve-white);
  color: var(--ve-navy);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
.post-type-archive-manufacturer .mfr-jumpnav__chip .chip-icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  transition: opacity 0.18s ease;
}
.post-type-archive-manufacturer .mfr-jumpnav__chip:hover {
  background: rgba(12, 35, 64, 0.05);
  border-color: rgba(12, 35, 64, 0.3);
}
.post-type-archive-manufacturer .mfr-jumpnav__chip:focus-visible {
  outline: 2px solid var(--ve-sky);
  outline-offset: 2px;
}
.post-type-archive-manufacturer .mfr-jumpnav__chip.is-active {
  background: var(--ve-navy);
  border-color: var(--ve-navy);
  color: var(--ve-white);
}
.post-type-archive-manufacturer .mfr-jumpnav__chip.is-active .chip-icon {
  opacity: 1;
}
/* Orange accent under the active chip — same language as .cat-header::after. */
.post-type-archive-manufacturer .mfr-jumpnav__chip.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -5px;
  height: 2px;
  background: var(--ve-orange);
  border-radius: 2px;
}
/* Right-edge fade hint that the rail scrolls (mobile especially). */
.post-type-archive-manufacturer .mfr-jumpnav__track-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 6px;
  width: 40px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ve-white));
  opacity: 0;
  transition: opacity 0.2s ease;
}
.post-type-archive-manufacturer .mfr-jumpnav__track-wrap.has-overflow::after {
  opacity: 1;
}

/* --- Fixed (pinned) clone --- */
.post-type-archive-manufacturer .mfr-jumpnav.is-fixed {
  position: fixed;
  top: var(--ve-header-h, 90px);
  left: 0;
  right: 0;
  max-width: none;
  margin: 0;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--ve-rule);
  box-shadow: 0 6px 20px rgba(12, 35, 64, 0.08);
  z-index: 150;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}
.post-type-archive-manufacturer .mfr-jumpnav.is-fixed.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.post-type-archive-manufacturer .mfr-jumpnav.is-fixed .mfr-jumpnav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px clamp(12px, 3vw, 32px);
}
.post-type-archive-manufacturer
  .mfr-jumpnav.is-fixed
  .mfr-jumpnav__track-wrap::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.94));
}

/* --- Anchor targets: keep the jumped-to title clear of the pinned chrome --- */
.post-type-archive-manufacturer .mfr-category {
  scroll-margin-top: calc(var(--ve-header-h, 90px) + 64px);
}

/* --- Mobile: hide the "JUMP TO" label to give chips more room --- */
@media (max-width: 767px) {
  .post-type-archive-manufacturer .mfr-jumpnav__label {
    display: none;
  }
  .post-type-archive-manufacturer .mfr-jumpnav.is-fixed .mfr-jumpnav__inner {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* --- Reduced motion: skip the transform, keep the show/hide --- */
@media (prefers-reduced-motion: reduce) {
  .post-type-archive-manufacturer .mfr-jumpnav.is-fixed {
    transition: opacity 0.001s;
    transform: none;
  }
}

.post-type-archive-manufacturer .mfr-archive-categories {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin: 32px 0 48px;
}

/* Grid layout (flat): four cards/row on desktop, three on tablet, two on mobile */
.post-type-archive-manufacturer .mfr-category > .mfr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Grid column ladder — Bootstrap breakpoints:
   xl (>=1200): 4 col  |  lg (992-1199): 4 col  |  md (768-991): 3 col
   sm (576-767): 2 col  |  xs (<=575): 2 col (stacked cards, #100)
   Phones hold a 2-column card grid — logo stacked above the name —
   per the #100 design review (Abby, 2026-07-15). No single-column
   row treatment. */
@media (max-width: 991px) {
  .post-type-archive-manufacturer .mfr-category > .mfr-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .post-type-archive-manufacturer .mfr-category > .mfr-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Card visual (flat) — styles live directly on the anchor since there is
   no .vc_column-inner wrapper in archive markup. Mirrors the interim's
   .mfr-category .mfr-card .vc_column-inner ruleset. */
.post-type-archive-manufacturer .mfr-category > .mfr-grid > .mfr-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  border: 1px solid #e4eaf2;
  background: var(--ve-white);
  box-shadow: 0 1px 3px rgba(12, 35, 64, 0.04);
  padding: 28px 22px 26px;
  overflow: visible;
  transition:
    border-color 0.22s ease,
    box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Bottom accent line — reveals on hover */
.post-type-archive-manufacturer .mfr-category > .mfr-grid > .mfr-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ve-sky), var(--ve-blue));
  border-radius: 0 0 12px 12px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 2;
}

/* Hover elevation — navy-tinted drop shadow, modeled on .cta-card but
   softer for the white-card context. */
.post-type-archive-manufacturer .mfr-category > .mfr-grid > .mfr-card:hover {
  border-color: rgba(74, 159, 212, 0.3);
  box-shadow:
    0 6px 16px rgba(12, 35, 64, 0.1),
    0 18px 40px rgba(12, 35, 64, 0.16);
  transform: translateY(-3px);
}

.post-type-archive-manufacturer
  .mfr-category
  > .mfr-grid
  > .mfr-card:hover::before {
  transform: scaleX(1);
}

/* Logo area — centers logo/placeholder on the card */
.post-type-archive-manufacturer .mfr-card .mfr-logo-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  margin-bottom: 12px;
}

.post-type-archive-manufacturer .mfr-card .mfr-logo-img {
  max-height: 56px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.post-type-archive-manufacturer .mfr-card .logo-placeholder-svg {
  width: 100%;
  max-width: 150px;
  height: auto;
}

/* =====================================================================
 * MANUFACTURER ARCHIVE — FULL-BLEED ALTERNATING ROWS
 * =====================================================================
 * Override the shared .mfr-category:nth-child(even)::before rule to
 * break the grey band out of .mfr-archive-wrap / .ve-card-form and
 * span the full viewport width. Scoped to the archive body class so
 * the interim page 992 is unaffected.
 * ===================================================================== */

/* Prevent 100vw from triggering a horizontal scrollbar (scrollbar width
   is included in vw on most browsers). Scoped to archive only. */
body.post-type-archive-manufacturer {
  overflow-x: hidden;
}

/* Full-bleed grey band: pseudo breaks out of all parent padding/max-width
   via the 50%-50vw centering trick. The .mfr-category already has
   position: relative from the shared rule. */
.post-type-archive-manufacturer .mfr-category:nth-child(even)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: auto; /* override shared rule's inset:0 → right:0 */
  transform: translateX(-50%);
  width: 100vw;
  background: var(--ve-grey-bg);
  z-index: -1;
  pointer-events: none;
}

/* Give even categories vertical breathing room so the full-bleed band
   has visible padding above/below the content. */
.post-type-archive-manufacturer .mfr-category:nth-child(even) {
  padding: 32px 0;
}

/* =====================================================================
 * MANUFACTURER ARCHIVE — RESPONSIVE (MOBILE + TABLET)
 * =====================================================================
 * Bootstrap-aligned breakpoint ladder:
 *   lg  (992–1199): card form padding tightens
 *   md  (768–991):  3-col grid, tooltip kill, hero/overlap tune
 *   sm  (576–767):  2-col grid, card/cat-header refinements
 *   xs  (<=575):    1-col row layout, minimal chrome
 *   xxs (<=360):    small phone safety net
 *
 * Scoped to .post-type-archive-manufacturer so the interim page 992
 * markup is unaffected. Grid column counts set in the FLAT MARKUP
 * section above; breakpoints here handle everything else.
 * ===================================================================== */

/* --- lg (<=991px): card form padding tightens ---
   Note: the shared contact+archive 1024px rule in the CONTACT PAGE section
   already reduces .ve-card-form padding. This block adds archive-specific
   tuning that the shared rule misses. */
@media (max-width: 991px) {
  .post-type-archive-manufacturer .mfr-archive-categories {
    gap: 40px;
  }

  /* Card padding: slightly tighter for 3-col fit */
  .post-type-archive-manufacturer .mfr-category > .mfr-grid > .mfr-card {
    padding: 24px 18px 22px;
  }

  .post-type-archive-manufacturer .mfr-card .mfr-logo-img {
    max-height: 50px;
  }
}

/* --- md (<=767px): 2-col grid, tooltip kill, hero/overlap tune --- */
@media (max-width: 767px) {
  /* Hide tooltips on touch-primary devices — no hover = dead weight.
       Using max-width rather than @media(hover:none) because this is the
       practical phone/small-tablet breakpoint and the tooltip z-index
       fights with adjacent cards at this density. */
  .post-type-archive-manufacturer .mfr-card .tooltip {
    display: none;
  }

  /* Hero H1: tighter clamp for small tablets / large phones */
  .ve-hero h1 {
    font-size: clamp(2.75rem, 9vw, 3.5rem);
  }

  .mfr-hero-tagline h4 {
    font-size: 19px;
  }

  .mfr-hero-tagline-sub {
    font-size: 13px;
  }

  /* Card overlap: slightly reduce for shorter hero-to-card gap */
  .post-type-archive-manufacturer .ve-card-form {
    margin-top: -48px;
    padding: 36px 20px;
  }

  /* Tighten category section gap */
  .post-type-archive-manufacturer .mfr-archive-categories {
    gap: 36px;
    margin: 24px 0 36px;
  }

  /* Grid gap: tighten */
  .post-type-archive-manufacturer .mfr-category > .mfr-grid {
    gap: 14px;
  }

  /* Card padding */
  .post-type-archive-manufacturer .mfr-category > .mfr-grid > .mfr-card {
    padding: 22px 16px 20px;
  }

  /* Logo area: reduce min-height so whitespace shrinks */
  .post-type-archive-manufacturer .mfr-card .mfr-logo-area {
    min-height: 48px;
    margin-bottom: 8px;
  }

  .post-type-archive-manufacturer .mfr-card .mfr-logo-img {
    max-height: 46px;
  }

  /* Card name: slightly smaller */
  .post-type-archive-manufacturer .mfr-card .mfr-name {
    font-size: 12.5px;
  }

  /* Arrow icon: smaller to match card shrink */
  .post-type-archive-manufacturer .mfr-card .arrow-icon {
    bottom: 12px;
    right: 12px;
    width: 14px;
    height: 14px;
  }

  /* Cat-header: shrink icon, reduce name font, keep count right-aligned
       on the same row as the name (icon | name | …→ count). */
  .post-type-archive-manufacturer .cat-header {
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    flex-wrap: nowrap;
  }

  .post-type-archive-manufacturer .cat-header .cat-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .post-type-archive-manufacturer .cat-header .cat-icon svg {
    width: 15px;
    height: 15px;
  }

  .post-type-archive-manufacturer .cat-header .cat-name {
    font-size: 18px;
    flex: 1 1 auto;
    min-width: 0; /* allow long names to wrap within the flex item */
  }

  .post-type-archive-manufacturer .cat-header .cat-count {
    font-size: 12px;
    padding: 3px 10px;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* #177: tighten the category description on mobile (cat-header margin is
       20px here, so a smaller negative pull keeps it clear of the divider). */
  .post-type-archive-manufacturer .cat-header__description {
    margin: -12px 0 20px;
    font-size: 15px;
  }

  /* Same pull for the term-list form of the slot (#396). Chips already wrap,
     so only the margin needs the mobile value. */
  .post-type-archive-manufacturer .cat-header__terms {
    margin: -12px 0 20px;
  }

  /* Intro block: tighten */
  .post-type-archive-manufacturer .mfr-archive-intro {
    margin-bottom: 28px;
  }

  .post-type-archive-manufacturer .mfr-archive-intro .ve-form-heading {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  .post-type-archive-manufacturer .mfr-archive-intro .ve-form-lead {
    font-size: 14px;
    margin-bottom: 24px;
  }

  /* Bottom CTA: stack, center, tighter padding (inherits the
       .bottom-cta flex-direction:column from the interim 768px rule) */
  .post-type-archive-manufacturer .bottom-cta {
    padding: 36px 24px;
    text-align: center;
    border-radius: 12px;
  }

  .post-type-archive-manufacturer .bottom-cta .bottom-cta-text h2 {
    font-size: 26px;
  }

  .post-type-archive-manufacturer .bottom-cta .bottom-cta-text p {
    font-size: 14px;
  }

  .post-type-archive-manufacturer .bottom-cta .btn-primary-outline {
    font-size: 15px;
    padding: 13px 28px;
  }

  /* CTA card in archive hero: tighter padding, reduce margin below */
  .post-type-archive-manufacturer .mfr-archive-hero {
    margin: 0 0 24px;
  }

  .post-type-archive-manufacturer .mfr-archive-hero .cta-card {
    padding: 28px 24px 24px;
  }

  .post-type-archive-manufacturer .mfr-archive-hero .cta-card-title {
    font-size: 22px;
  }

  .post-type-archive-manufacturer .mfr-archive-hero .cta-card-sub {
    font-size: 13px;
    margin-bottom: 20px;
  }

  /* Even-row bleed: tighten vertical padding */
  .post-type-archive-manufacturer .mfr-category:nth-child(even) {
    padding: 24px 0;
  }
}

/* --- xs (<=575px): single column, horizontal row cards --- */
@media (max-width: 575px) {
  /* Hero: tighter vertical padding */
  .ve-hero {
    padding: 100px 20px 110px;
    min-height: 280px;
  }

  .ve-hero h1 {
    font-size: clamp(2.25rem, 10vw, 3rem);
  }

  /* Card overlap: minimal on phones */
  .post-type-archive-manufacturer .ve-card-form {
    margin-top: -36px;
    padding: 28px 14px;
    border-radius: 16px 16px 0 0;
  }

  /* Grid gap: tightest */
  .post-type-archive-manufacturer .mfr-category > .mfr-grid {
    gap: 10px;
  }

  /* Card: 2-column stacked layout — logo centered above a centered name
       (#100 design review). Not a horizontal row. */
  .post-type-archive-manufacturer .mfr-category > .mfr-grid > .mfr-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 10px 14px;
  }

  .post-type-archive-manufacturer .mfr-card .mfr-logo-area {
    width: 100%;
    min-height: 44px;
    margin-bottom: 8px;
  }

  .post-type-archive-manufacturer .mfr-card .mfr-logo-img {
    max-height: 40px;
    max-width: 100%;
  }

  .post-type-archive-manufacturer .mfr-card .logo-placeholder-svg {
    width: 100%;
    max-width: 100%;
  }

  /* Card name: centered under the logo, wraps for long names */
  .post-type-archive-manufacturer .mfr-card .mfr-name {
    font-size: 13px;
    margin-top: 0;
    line-height: 1.25;
    white-space: normal;
  }

  /* Chevron dropped on the stacked mobile cards (#100) — it was
       hover-only and adds nothing on touch. */
  .post-type-archive-manufacturer .mfr-card .arrow-icon {
    display: none;
  }

  /* Cat-header: hide icon tile entirely — name needs full width */
  .post-type-archive-manufacturer .cat-header .cat-icon {
    display: none;
  }

  .post-type-archive-manufacturer .cat-header .cat-name {
    font-size: 16px;
  }

  /* Category gap: tightest */
  .post-type-archive-manufacturer .mfr-archive-categories {
    gap: 28px;
    margin: 20px 0 28px;
  }

  /* Bottom CTA: stack tighter */
  .post-type-archive-manufacturer .bottom-cta {
    padding: 28px 16px;
    gap: 20px;
  }

  /* CTA card: phone-optimized — full width, tighter vertical rhythm */
  .post-type-archive-manufacturer .mfr-archive-hero {
    margin: 0 0 20px;
  }

  .post-type-archive-manufacturer .mfr-archive-hero .cta-card {
    padding: 24px 20px 22px;
    max-width: none;
    border-radius: 12px;
  }

  .post-type-archive-manufacturer .mfr-archive-hero .cta-card-title {
    font-size: 20px;
  }

  .post-type-archive-manufacturer .mfr-archive-hero .cta-card-sub {
    font-size: 13px;
    margin-bottom: 18px;
  }

  .post-type-archive-manufacturer .mfr-archive-hero .cta-card .btn-primary {
    font-size: 15px;
    padding: 13px 24px;
    min-height: 48px;
  }

  /* Even-row bleed: tighten further */
  .post-type-archive-manufacturer .mfr-category:nth-child(even) {
    padding: 20px 0;
  }
}

/* --- xxs (<=360px): small phone safety net --- */
@media (max-width: 360px) {
  .ve-hero h1 {
    font-size: 2rem;
  }

  .post-type-archive-manufacturer .ve-card-form {
    padding: 24px 12px;
  }

  .post-type-archive-manufacturer .mfr-category > .mfr-grid > .mfr-card {
    padding: 14px 8px 12px;
  }

  .post-type-archive-manufacturer .mfr-card .mfr-logo-area {
    width: 100%;
    min-height: 38px;
  }

  .post-type-archive-manufacturer .mfr-card .mfr-logo-img {
    max-height: 34px;
    max-width: 100%;
  }

  .post-type-archive-manufacturer .mfr-card .logo-placeholder-svg {
    max-width: 100%;
  }

  .post-type-archive-manufacturer .cat-header .cat-name {
    font-size: 15px;
  }

  .post-type-archive-manufacturer .mfr-archive-intro .ve-form-heading {
    font-size: 1.4rem;
  }

  /* CTA card: smallest phones */
  .post-type-archive-manufacturer .mfr-archive-hero .cta-card {
    padding: 20px 16px 18px;
  }

  .post-type-archive-manufacturer .mfr-archive-hero .cta-card-title {
    font-size: 18px;
  }

  .post-type-archive-manufacturer .mfr-archive-hero .cta-card .btn-primary {
    font-size: 14px;
    padding: 12px 20px;
  }
}

/* =====================================================================
 * ABOUT PAGE (page-about.php, /about/)
 *
 * Scoped to .page-template-page-about (WP auto-adds this body class for
 * pages using the named template page-about.php).
 *
 * Template:  page-about.php
 * Mockup:    docs/mockups/ve-about-mockup.html (approved 2026-04-22)
 * Copy:      .claude-scratch/about-page-copy.md
 * Issue:     #127
 *
 * Section order:
 *   S01  about-hero                  — navy gradient, left-aligned
 *   S02  about-grid-2                — Who + What 2-col
 *   S02b about-cert-band / strip     — 3 cert logos
 *   S03  about-pillars               — 4 approach cards w/ gradient hover
 *   S04  about-mfr-grid              — placeholder mfr logos → /manufacturers/
 *   S05  about-photo-wrap            — team photo band (featured image)
 *   S06  about-stats                 — big-number callouts on navy
 *   S07  about-cta                   — closing CTA band
 * ===================================================================== */

.page-template-page-about {
  background: var(--ve-white);
}

.page-template-page-about .about-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* --- S01: Hero --- */

.page-template-page-about .about-hero {
  background: var(--ve-gradient1-blue);
  color: var(--ve-white);
  padding: 96px 0 88px;
  position: relative;
  overflow: hidden;
}

.page-template-page-about .about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle at 75% 50%,
      rgba(74, 159, 212, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(232, 116, 26, 0.06) 0%,
      transparent 40%
    );
  pointer-events: none;
}

.page-template-page-about .about-hero .about-wrap {
  position: relative;
}

.page-template-page-about .about-hero-eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ve-sky);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-template-page-about .about-hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--ve-sky);
}

.page-template-page-about .about-hero h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 56px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 20px;
  max-width: 820px;
  color: var(--ve-white);
}

.page-template-page-about .about-hero-sub {
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  max-width: 720px;
  margin: 0;
}

/* --- Shared section primitives --- */

.page-template-page-about .about-section {
  padding: 80px 0;
}

.page-template-page-about .about-section--alt {
  background: var(--ve-grey-bg);
}

.page-template-page-about .about-section--navy {
  background: var(--ve-navy);
  color: var(--ve-white);
}

/* Section eyebrow — small uppercase label with sky accent rule */
.page-template-page-about .about-eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ve-sky);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-template-page-about .about-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--ve-sky);
}

.page-template-page-about .about-eyebrow--center {
  justify-content: center;
}

.page-template-page-about .about-h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ve-navy);
  margin: 0 0 16px;
}

.page-template-page-about .about-section--navy .about-h2,
.page-template-page-about .about-section--navy .about-eyebrow {
  color: var(--ve-white);
}

.page-template-page-about .about-body p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.65;
}

.page-template-page-about .about-intro-lead {
  margin: 0 0 8px;
}

/* --- S02: Who + What 2-col --- */

.page-template-page-about .about-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

/* --- S02b: Certifications logo strip --- */

.page-template-page-about .about-cert-band {
  background: var(--ve-grey-bg);
  padding: 40px 0;
  border-top: 1px solid var(--ve-rule);
  border-bottom: 1px solid var(--ve-rule);
}

.page-template-page-about .about-cert-heading {
  text-align: center;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ve-grey-mid);
  margin: 0 0 20px;
}

.page-template-page-about .about-cert-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}

.page-template-page-about .about-cert-strip img {
  height: 48px;
  width: auto;
  max-width: 100%;
  opacity: 0.95;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.page-template-page-about .about-cert-strip a:hover img {
  opacity: 1;
  transform: translateY(-1px);
}

/* --- S03: Our Approach (4 pillars) ---
   Top border + SVG strokes both reveal with the sky→orange gradient
   on hover, LTR — matches --ve-gradient2-accent visual language. */

.page-template-page-about .about-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.page-template-page-about .about-pillar {
  background: var(--ve-white);
  border: 1px solid var(--ve-rule);
  border-radius: var(--ve-detail-radius);
  padding: 28px 24px 26px;
  position: relative;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.page-template-page-about .about-pillar:hover {
  border-color: var(--ve-sky);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(12, 35, 64, 0.08);
}

.page-template-page-about .about-pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--ve-detail-radius) var(--ve-detail-radius) 0 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ve-sky),
    var(--ve-orange),
    transparent
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.35, 1);
}

.page-template-page-about .about-pillar:hover::before {
  transform: scaleX(1);
}

.page-template-page-about .about-pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: rgba(74, 159, 212, 0.1);
  color: var(--ve-sky);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: background 0.25s ease;
}

.page-template-page-about .about-pillar:hover .about-pillar-icon {
  background: rgba(232, 116, 26, 0.1);
}

.page-template-page-about .about-pillar-icon svg {
  width: 22px;
  height: 22px;
  overflow: visible;
}

.page-template-page-about .about-pillar-icon svg path,
.page-template-page-about .about-pillar-icon svg polyline,
.page-template-page-about .about-pillar-icon svg line,
.page-template-page-about .about-pillar-icon svg circle {
  fill: none;
  stroke: var(--ve-sky);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0;
  transition: stroke 0.2s ease;
}

.page-template-page-about .about-pillar:hover .about-pillar-icon svg path,
.page-template-page-about .about-pillar:hover .about-pillar-icon svg polyline,
.page-template-page-about .about-pillar:hover .about-pillar-icon svg line,
.page-template-page-about .about-pillar:hover .about-pillar-icon svg circle {
  stroke: url(#pillar-sweep);
  animation: pillar-icon-redraw 0.8s cubic-bezier(0.22, 0.8, 0.35, 1) forwards;
}

@keyframes pillar-icon-redraw {
  0% {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
  }
  100% {
    stroke-dasharray: 120;
    stroke-dashoffset: 0;
  }
}

.page-template-page-about .about-pillar h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--ve-navy);
  letter-spacing: 0.01em;
  margin: 0 0 10px;
  line-height: 1.25;
}

.page-template-page-about .about-pillar p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ve-grey-text);
}

.page-template-page-about .about-pillar strong {
  color: var(--ve-navy);
}

/* --- S04: Manufacturer logos grid (placeholder) --- */

.page-template-page-about .about-mfr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.page-template-page-about .about-mfr-logo {
  background: var(--ve-white);
  border: 1px solid var(--ve-rule);
  border-radius: var(--ve-detail-radius);
  padding: 24px 16px;
  text-align: center;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ve-grey-mid);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-template-page-about .about-mfr-note {
  text-align: center;
  margin-top: 22px;
  font-size: 13px;
  color: var(--ve-grey-mid);
}

.page-template-page-about .about-mfr-note a {
  color: var(--ve-sky);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
}

.page-template-page-about .about-mfr-note a:hover {
  text-decoration: underline;
}

/* --- S05: Team photo band ---
   Featured Image on the WP page supplies the img src. Enforced 12:5
   aspect + object-fit: cover prevents vertical blowout on mobile. */

.page-template-page-about .about-photo-wrap {
  max-width: 1080px;
  margin: 0 auto;
}

.page-template-page-about .about-photo {
  width: 100%;
  aspect-ratio: 12 / 5;
  object-fit: cover;
  border-radius: var(--ve-detail-radius);
  box-shadow: 0 8px 32px rgba(12, 35, 64, 0.12);
  display: block;
}

.page-template-page-about .about-photo--placeholder {
  background: linear-gradient(135deg, #d8dfe8 0%, #c2cad6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ve-navy);
  opacity: 0.6;
  text-align: center;
  padding: 0 20px;
}

.page-template-page-about .about-team-intro {
  max-width: 640px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ve-grey-text);
}

/* --- S06: Stats bar (navy section) --- */

.page-template-page-about .about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  text-align: center;
}

.page-template-page-about .about-stat {
  padding: 16px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.page-template-page-about .about-stat:last-child {
  border-right: none;
}

.page-template-page-about .about-stat-value {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 52px;
  font-weight: 700;
  color: var(--ve-white);
  line-height: 1;
  margin-bottom: 8px;
}

.page-template-page-about .about-stat-label {
  display: block;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.35;
}

/* --- S07: Closing CTA --- */

.page-template-page-about .about-cta {
  background: var(--ve-gradient1-blue);
  color: var(--ve-white);
  padding: 72px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-template-page-about .about-cta::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ve-sky),
    var(--ve-orange),
    transparent
  );
}

.page-template-page-about .about-cta h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 38px;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: 0.01em;
  color: var(--ve-white);
}

.page-template-page-about .about-cta p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);
  max-width: 560px;
  margin: 0 auto 28px;
}

.page-template-page-about .about-cta-buttons {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.page-template-page-about .about-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ve-orange);
  color: var(--ve-white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--ve-detail-radius);
  text-decoration: none;
  border: none;
  box-shadow: 0 4px 14px rgba(232, 116, 26, 0.28);
  transition:
    background 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease;
}

.page-template-page-about .about-btn-primary:hover {
  background: var(--ve-orange-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 116, 26, 0.36);
}

.page-template-page-about .about-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--ve-white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: 2px solid var(--ve-white);
  border-radius: var(--ve-detail-radius);
  text-decoration: none;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}

.page-template-page-about .about-btn-secondary:hover {
  background: var(--ve-white);
  color: var(--ve-navy);
  transform: translateY(-1px);
}

/* --- Responsive --- */

@media (max-width: 900px) {
  .page-template-page-about .about-hero {
    padding: 72px 0 64px;
  }
  .page-template-page-about .about-hero h1 {
    font-size: 40px;
  }
  .page-template-page-about .about-hero-sub {
    font-size: 18px;
  }
  .page-template-page-about .about-section {
    padding: 60px 0;
  }
  .page-template-page-about .about-grid-2 {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .page-template-page-about .about-h2 {
    font-size: 28px;
  }
  .page-template-page-about .about-pillars {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-template-page-about .about-mfr-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-template-page-about .about-cert-strip {
    gap: 32px;
  }
}

@media (max-width: 600px) {
  .page-template-page-about .about-wrap {
    padding: 0 20px;
  }
  .page-template-page-about .about-hero {
    padding: 56px 0;
  }
  .page-template-page-about .about-hero h1 {
    font-size: 34px;
  }
  .page-template-page-about .about-hero-sub {
    font-size: 16px;
  }
  .page-template-page-about .about-pillars {
    grid-template-columns: 1fr;
  }
  .page-template-page-about .about-mfr-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-template-page-about .about-cert-strip {
    gap: 20px;
    flex-direction: column;
  }
  .page-template-page-about .about-cert-strip img {
    height: 42px;
  }
  .page-template-page-about .about-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-template-page-about .about-stat {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 20px 12px;
  }
  .page-template-page-about .about-stat:nth-last-child(-n + 2) {
    border-bottom: none;
  }
  .page-template-page-about .about-stat-value {
    font-size: 42px;
  }
  .page-template-page-about .about-cta h2 {
    font-size: 30px;
  }
  .page-template-page-about .about-btn-primary,
  .page-template-page-about .about-btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* =====================================================================
   S05 — HOMEPAGE PROJECT REFERENCES (#214, absorbs #237)
   Scoped under .ve-project-references — live Resource CPT grid on the dark
   navy homepage section. Cards are whole-card links (#237) to
   /resources/[slug]/. Rendered by includes/ve-project-references.php.
   ===================================================================== */

.ve-project-references {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0 auto;
  max-width: 1200px;
}

/* Card is an <a> now — strip link chrome, keep the card's own text colors. */
.ve-project-references .ve-project-ref-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(74, 159, 212, 0.18);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.ve-project-references .ve-project-ref-card:hover {
  border-color: rgba(74, 159, 212, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}

/* Keyboard focus — cards sit on dark navy, so a sky ring reads clearly. */
.ve-project-references .ve-project-ref-card:focus-visible {
  outline: 2px solid var(--ve-sky);
  outline-offset: 3px;
  border-color: rgba(74, 159, 212, 0.55);
}

/* Title shifts to sky on hover/focus — a quiet "this is a link" cue. */
.ve-project-references .ve-project-ref-card:hover .ve-project-ref-title,
.ve-project-references
  .ve-project-ref-card:focus-visible
  .ve-project-ref-title {
  color: var(--ve-sky-light);
}

/* Media — 3:2 ratio, pill anchored top-left */
.ve-project-references .ve-project-ref-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ve-navy);
}

.ve-project-references .ve-project-ref-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

/* This grid ships as a shortcode embedded in a WPBakery column, so its <img>
   inherits WPBakery/Salient's `.wpb_wrapper img { height: auto }` (specificity
   0,0,2,1), which outranks the base rule above (0,0,2,0) and collapses the
   image height — leaving blank bars inside the 3:2 shell. Re-assert fill at
   higher specificity (media class + img tag = 0,0,3,1) so the photo covers the
   frame. No !important needed; this simply outranks the WPBakery rule. The
   placeholder <div> keeps its fill from the base rule (no img override competes
   with a div), so it is intentionally not part of this selector. */
.ve-project-references .ve-project-ref-media img.ve-project-ref-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Subtle zoom on the media when the card is hovered/focused. */
.ve-project-references .ve-project-ref-card:hover .ve-project-ref-img,
.ve-project-references .ve-project-ref-card:focus-visible .ve-project-ref-img {
  transform: scale(1.04);
}

.ve-project-references .ve-project-ref-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(26, 76, 126, 0.6) 0%,
    rgba(12, 35, 64, 0.9) 100%
  );
}

.ve-project-references .ve-project-ref-img--placeholder svg {
  width: 46px;
  height: 46px;
  color: var(--ve-sky-light);
  opacity: 0.5;
}

/* Category pill — matches the news-card pill treatment */
.ve-project-references .ve-project-ref-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  background: var(--ve-orange);
  color: var(--ve-white);
  border-radius: 3px;
  line-height: 1;
}

/* Body */
.ve-project-references .ve-project-ref-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ve-project-references .ve-project-ref-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ve-white);
  margin: 0;
  text-transform: none;
  letter-spacing: 0.01em;
}

.ve-project-references .ve-project-ref-location {
  font-family: "DM Sans", sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ve-sky-light);
  margin: 0;
  letter-spacing: 0.02em;
}

/* Resting read-more cue — bumped so cards read as clickable pre-hover
   (esp. mobile, where there is no hover). Arrow slides on hover/focus. */
.ve-project-references .ve-project-ref-more {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--ve-sky-light);
}

.ve-project-references .ve-project-ref-more svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s ease;
}

.ve-project-references .ve-project-ref-card:hover .ve-project-ref-more svg,
.ve-project-references
  .ve-project-ref-card:focus-visible
  .ve-project-ref-more
  svg {
  transform: translateX(4px);
}

/* "View All Work" link below the grid — quiet, right-aligned, so it doesn't
   compete with the cards. */
.ve-project-ref-viewall-row {
  max-width: 1200px;
  margin: 28px auto 0;
  display: flex;
  justify-content: flex-end;
}

.ve-project-ref-viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ve-white);
  padding: 10px 4px;
  border-bottom: 2px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.ve-project-ref-viewall svg {
  width: 17px;
  height: 17px;
  transition: transform 0.25s ease;
}

.ve-project-ref-viewall:hover,
.ve-project-ref-viewall:focus-visible {
  color: var(--ve-sky-light);
  border-color: var(--ve-orange);
}

.ve-project-ref-viewall:focus-visible {
  outline: 2px solid var(--ve-sky);
  outline-offset: 3px;
}

.ve-project-ref-viewall:hover svg,
.ve-project-ref-viewall:focus-visible svg {
  transform: translateX(4px);
}

/* Empty state — no featured resources yet. Centered panel that points at a
   live, populated destination so the section never dead-ends. */
.ve-project-refs-empty {
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(74, 159, 212, 0.18);
  border-radius: 6px;
}

.ve-project-refs-empty-lead {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ve-white);
  margin: 0;
  letter-spacing: 0.01em;
}

/* The empty-state reuses the .ve-project-ref-viewall link; center it here. */
.ve-project-refs-empty .ve-project-ref-viewall {
  padding-bottom: 4px;
}

/* Mobile — stack at tablet breakpoint and below */
@media (max-width: 900px) {
  .ve-project-references {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Give "View All Work" tap-target weight (ghost button, full width) so it
       isn't lost as a lone text link after 3 tall stacked cards. */
  .ve-project-ref-viewall-row {
    justify-content: stretch;
  }

  .ve-project-ref-viewall {
    justify-content: center;
    width: 100%;
    border: 1px solid rgba(74, 159, 212, 0.4);
    border-radius: 6px;
    padding: 14px;
    min-height: 48px;
  }

  .ve-project-ref-viewall:hover,
  .ve-project-ref-viewall:focus-visible {
    border-color: var(--ve-orange);
  }
}

/* Respect reduced-motion — kill the lift, zoom, and arrow slide. */
@media (prefers-reduced-motion: reduce) {
  .ve-project-references .ve-project-ref-card,
  .ve-project-references .ve-project-ref-img,
  .ve-project-references .ve-project-ref-more svg,
  .ve-project-ref-viewall svg {
    transition: none;
  }
}

/* =============================================================================
 * RESOURCE ARCHIVE (archive-resource.php — /resources/) (#68)
 * ============================================================================= */

.resource-archive-wrap {
  padding: 40px 0 80px;
}

/* Filter row */
.resource-archive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
}

.resource-archive-filter {
  display: inline-block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 16px;
  border: 1px solid var(--ve-grey-light);
  background: transparent;
  color: var(--ve-grey-dark);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.resource-archive-filter:hover {
  border-color: var(--ve-blue);
  color: var(--ve-blue);
}

.resource-archive-filter.is-active {
  background: var(--ve-navy);
  border-color: var(--ve-navy);
  color: var(--ve-white);
}

/* Card grid */
.resource-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 1024px) {
  .resource-archive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 600px) {
  .resource-archive-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Card */
.resource-archive-card {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--ve-grey-light);
  text-decoration: none;
  color: var(--ve-grey-dark);
  transition: all 0.2s ease;
  overflow: hidden;
}

.resource-archive-card:hover {
  border-color: var(--ve-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}

.resource-archive-card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ve-grey-bg);
}

.resource-archive-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.resource-archive-card-body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.resource-archive-card-chip {
  align-self: flex-start;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  background: var(--ve-sky-light);
  color: var(--ve-navy);
}

.resource-archive-card-chip--tech-memo {
  background: var(--ve-sky-light);
  color: var(--ve-navy);
}

.resource-archive-card-chip--case-study {
  background: var(--ve-orange-light);
  color: var(--ve-white);
}

.resource-archive-card-chip--solution-snapshot {
  background: var(--ve-grey-bg);
  color: var(--ve-grey-dark);
}

.resource-archive-card-title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ve-navy);
  margin: 0;
}

.resource-archive-card-excerpt {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ve-grey-mid);
  margin: 0;
}

/* Empty state */
.resource-archive-empty {
  text-align: center;
  padding: 80px 0;
  color: var(--ve-grey-mid);
}

/* Pagination — the_posts_pagination() markup (.nav-links > .page-numbers).
   Ported from the #233 mockup, aligned to the .resource-archive-filter button
   look (sharp corners) for on-page consistency. See #258. */
.post-type-archive-resource .nav-links {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 44px;
  flex-wrap: wrap;
}
.post-type-archive-resource .nav-links .page-numbers {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 9px 15px;
  border: 1px solid var(--ve-grey-light);
  color: var(--ve-navy);
  text-decoration: none;
  transition: all 0.15s ease;
}
.post-type-archive-resource .nav-links .page-numbers.current {
  background: var(--ve-navy);
  border-color: var(--ve-navy);
  color: var(--ve-white);
}
.post-type-archive-resource .nav-links .page-numbers:hover:not(.current) {
  border-color: var(--ve-blue);
  color: var(--ve-blue);
}

/* =============================================================================
   SINGLE RESOURCE PAGE — Salient container-wrap padding reset (#183, #185)
   =============================================================================
   Salient's parent theme applies `padding-top: 40px; padding-bottom: 40px`
   to every `.container-wrap`. On resource detail pages the hero band and
   bottom CTA band have their own internal padding, so the inherited 40px
   creates visible whitespace gaps above the hero and below the CTA.

   The manufacturer template solves this with the equivalent block at
   line ~1291 (`body.single-manufacturer .container-wrap.mfr-detail-main`).
   This block is the resource-CPT mirror; SAME pattern, no `!important`.

   We deliberately do NOT zero `margin-bottom` — Salient's JS injects an
   inline `margin-bottom: <footer_height>px` for the footer-reveal feature.
   Killing that breaks the reveal animation and lets the footer hide
   behind content. We want the reveal to keep working; we want the
   visible color-band gap (handled by the "FOOTER REVEAL BG BLEED" block
   below) instead of raw whitespace.

   Defensive zeros on `#ajax-content-wrap` / `.page-wrap` mirror
   lines ~1301-1305 in case Salient ever moves the padding up a level. */
body.single-resource .container-wrap.ve-cs-main,
body.single-resource .container-wrap.ve-tm-main {
  padding-top: 0;
  padding-bottom: 0;
}
body.single-resource #ajax-content-wrap,
body.single-resource .page-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

/* =============================================================================
   STICKY SIDEBAR — known limitation, do NOT "fix" via body overflow
   =============================================================================
   The tech-memo TOC (.ve-tm-toc) and case-study sidebar (.ve-cs-sidebar) use
   `position: sticky`. Salient breaks that by setting `overflow: hidden` on
   <body> (makes <body> a non-scrolling scrollport, so sticky never engages).

   An earlier fix here swapped that to `overflow: clip` on body.single-resource.
   It DID make sticky work — but it also broke Salient's footer-reveal: the
   footer overlapped page content instead of revealing from beneath. Footer-
   reveal wins. The sidebars stay non-sticky (static — anchor links still work).

   Do not re-attempt a `body` overflow override. A real sticky fix needs a
   JS-based approach (measure + `position: fixed` within bounds), deferred to
   M4 alongside the also-deferred TOC scroll-spy. See memory
   project_salient_footer_reveal_pattern. */

/* =============================================================================
   FOOTER REVEAL BG BLEED — per-template body bg matches last section color
   =============================================================================
   Salient's footer-reveal feature pushes content up by ~footer height (via
   inline margin-bottom on .container-wrap) so the footer slides up from
   beneath as the user scrolls. The reveal area renders the body bg, which
   defaults to white. When a template ends in a vivid full-width band
   (e.g. the case-study orange CTA), the default white bg in the reveal
   area reads as a "broken" gap between the band and the footer.

   Fix: scope `background-color` on `body.<template-or-type-class>` to
   match each template's bottom-most section color. The reveal area
   becomes a continuous color band, preserving footer-reveal animation.

   Manufacturer single does NOT need this: its bottom CTA is a navy
   rounded card inside a white parent section, so the default white body
   bg already reads as continuous padding around the card.

   ⚠️ Apply the same pattern to any new CPT single template that ends in
   a vivid full-width band. See #130 / #132 (VE Default page template)
   when that work resumes — bake this into the template-creation checklist.

   Per-type body classes are added by vision_add_resource_type_body_class()
   in includes/cpt-resource.php. */
body.resource-type-case-study {
  background-color: var(--ve-orange);
}
/* Tech memo ends in the muted grey CTA band — bleed the body bg grey so the
   footer-reveal area reads as a continuous band, not a white gap. */
body.resource-type-tech-memo {
  background-color: var(--ve-grey-bg);
}

/* =====================================================================
   CASE STUDY TEMPLATE (#146)
   Scoped under .ve-cs-* — rendered by template-parts/resource-case-study.php
   for resource posts with resource_type = case-study (CPT shipped in #66).
   Source mockup: docs/mockups/case-study.html
   ===================================================================== */

.ve-cs-main {
  color: var(--ve-grey-mid);
}
.ve-cs-main .ve-cs-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* All headings inside the case-study scope use Barlow Condensed
   per the mockup; body copy stays DM Sans (inherited from Salient body). */
.ve-cs-main h1,
.ve-cs-main h2,
.ve-cs-main h3,
.ve-cs-main h4 {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.ve-cs-main h2 {
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--ve-navy);
  margin-bottom: 16px;
}
.ve-cs-main h3 {
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: var(--ve-blue);
  margin-bottom: 12px;
}

/* ── Breadcrumb ── */
.ve-cs-breadcrumb {
  padding: 12px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.ve-cs-hero .ve-cs-breadcrumb a {
  color: var(--ve-sky-light);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ve-cs-hero .ve-cs-breadcrumb a:hover {
  color: var(--ve-orange);
}
.ve-cs-breadcrumb .sep {
  margin: 0 6px;
  opacity: 0.5;
}
.ve-cs-breadcrumb .current {
  opacity: 0.85;
}

/* ── Hero ── */
.ve-cs-hero {
  background: var(--ve-navy);
  color: var(--ve-white);
  padding: 32px 0 64px;
  position: relative;
  overflow: hidden;
}
.ve-cs-hero-inner {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 48px;
  align-items: center;
  padding-top: 24px;
}
.ve-cs-hero-h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ve-white);
  margin: 8px 0 12px;
}
.ve-cs-hero-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
  font-family: "DM Sans", sans-serif;
}
.ve-cs-hero-meta {
  font-size: 14px;
  opacity: 0.7;
  margin-bottom: 8px;
}
/* Publish date + author byline (#186 — hero credibility).
   Tighter weight than .ve-cs-hero-meta so the project line stays primary. */
.ve-cs-hero-byline {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  opacity: 0.55;
  margin-bottom: 20px;
  letter-spacing: 0.01em;
}
/* #396: hero tags are the shared .ve-term-list component now — real
   <ul>/<li> replacing .ve-cs-hero-tags + .ve-cs-tag. Every declaration is
   lifted verbatim from those rules. */
.ve-term-list.ve-term-list--cs {
  --ve-term-bg: rgba(123, 191, 232, 0.15);
  --ve-term-fg: var(--ve-sky-light);

  margin-top: 20px;
}
.ve-term-list--cs li {
  /* The old .ve-cs-tag had no border and took its line-height by
     inheritance. Both are restated so the chip box is identical, not merely
     similar — the base chip is a bordered pill, this one is not. */
  border: 0;
  line-height: inherit;
  font-family: "DM Sans", sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  padding: 4px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.ve-term-list--cs li:hover {
  filter: brightness(1.15);
  transform: scale(1.03);
}

.ve-cs-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.ve-cs-hero-stat-num {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: var(--ve-orange);
  line-height: 1;
}
.ve-cs-hero-stat-label {
  font-size: 13px;
  opacity: 0.7;
  margin-top: 4px;
}

.ve-cs-hero-image {
  background: linear-gradient(135deg, var(--ve-blue), var(--ve-mid-blue));
  border-radius: 8px;
  height: 360px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  font-weight: 500;
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}
.ve-cs-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ve-cs-hero-image-placeholder {
  font-family: "DM Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ── Stat Bar ── */
.ve-cs-stat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ve-grey-light);
  border: 1px solid var(--ve-grey-light);
  border-radius: 8px;
  overflow: hidden;
  margin: 48px 0;
}
.ve-cs-stat-bar[data-slots="3"] {
  grid-template-columns: repeat(3, 1fr);
}
.ve-cs-stat-bar[data-slots="2"] {
  grid-template-columns: repeat(2, 1fr);
}
.ve-cs-stat-bar[data-slots="1"] {
  grid-template-columns: 1fr;
}
.ve-cs-stat-bar-item {
  background: var(--ve-white);
  padding: 24px;
  text-align: center;
  transition: all 0.2s ease;
}
.ve-cs-stat-bar-item:hover {
  background: var(--ve-grey-bg);
  transform: scale(1.02);
}
.ve-cs-stat-bar-num {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: var(--ve-orange);
  line-height: 1;
}
.ve-cs-stat-bar-label {
  font-size: 13px;
  color: var(--ve-grey-mid);
  margin-top: 4px;
  font-family: "DM Sans", sans-serif;
}

/* ── Triptych ── */
.ve-cs-triptych {
  background: var(--ve-grey-bg);
  padding: 64px 0;
}
.ve-cs-triptych-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.ve-cs-triptych-card {
  background: var(--ve-white);
  border-radius: 8px;
  padding: 32px;
  border-top: 3px solid var(--ve-orange);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.ve-cs-triptych-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-top-color: var(--ve-orange-light);
}
.ve-cs-triptych-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(232, 116, 26, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--ve-orange);
}
/* Inline Heroicons SVGs replaced text-character placeholders (#188).
   stroke=currentColor so the icon inherits the --ve-orange parent color
   via the .ve-cs-triptych-icon container. */
.ve-cs-triptych-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.ve-cs-triptych-card h3 {
  color: var(--ve-navy);
  margin-bottom: 8px;
}
.ve-cs-triptych-card p {
  font-size: 14px;
  color: var(--ve-grey-mid);
  line-height: 1.6;
}

/* ── Content + Sidebar ── */
.ve-cs-content-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 64px 0;
}
.ve-cs-content h2 {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--ve-grey-light);
}
.ve-cs-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.ve-cs-content h3 {
  margin-top: 24px;
}
.ve-cs-content p {
  margin-bottom: 16px;
  max-width: 720px;
  line-height: 1.75;
}
.ve-cs-content a {
  color: var(--ve-blue);
}
.ve-cs-content a:hover {
  color: var(--ve-mid-blue);
  text-decoration: underline;
}

/* Auto-style any tables in the body content the WP editor produces. */
.ve-cs-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}
.ve-cs-content table thead {
  background: var(--ve-navy);
  color: var(--ve-white);
}
.ve-cs-content table th {
  padding: 12px 16px;
  text-align: left;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.ve-cs-content table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--ve-grey-bg);
}
.ve-cs-content table tbody tr {
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}
.ve-cs-content table tbody tr:nth-child(even) {
  background: var(--ve-grey-bg);
}
.ve-cs-content table tbody tr:hover {
  border-left-color: var(--ve-orange);
  background: rgba(242, 245, 248, 0.7);
}

/* Callout — block authors can wrap a paragraph with class="ve-cs-callout"
   (or use a blockquote, which we restyle). */
.ve-cs-content blockquote,
.ve-cs-content .ve-cs-callout {
  border-left: 4px solid var(--ve-orange);
  background: rgba(232, 116, 26, 0.06);
  padding: 20px 24px;
  border-radius: 0 8px 8px 0;
  margin: 24px 0;
  font-size: 15px;
  transition: box-shadow 0.2s ease;
}
.ve-cs-content blockquote:hover,
.ve-cs-content .ve-cs-callout:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Sidebar */
.ve-cs-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
}
.ve-cs-sidebar-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  margin-bottom: 24px;
  background: var(--ve-white);
}
.ve-cs-sidebar-card-header {
  background: var(--ve-navy);
  color: var(--ve-white);
  padding: 14px 20px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: filter 0.2s ease;
}
.ve-cs-sidebar-card-header:hover {
  filter: brightness(1.15);
}
.ve-cs-sidebar-card-body {
  padding: 0;
}
.ve-cs-sidebar-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ve-grey-bg);
  font-size: 14px;
  transition: all 0.2s ease;
}
.ve-cs-sidebar-row:last-child {
  border-bottom: none;
}
.ve-cs-sidebar-row:hover {
  background: var(--ve-grey-bg);
  padding-left: 24px;
}
.ve-cs-sidebar-label {
  color: var(--ve-grey-mid);
  font-size: 13px;
  flex: 0 0 auto;
}
.ve-cs-sidebar-value {
  font-weight: 600;
  color: var(--ve-grey-dark);
  text-align: right;
}
.ve-cs-sidebar-links {
  padding: 16px 20px;
}
.ve-cs-sidebar-links a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: var(--ve-blue);
  border-bottom: 1px solid var(--ve-grey-bg);
  text-decoration: none;
  transition: all 0.2s ease;
}
.ve-cs-sidebar-links a:last-child {
  border-bottom: none;
}
.ve-cs-sidebar-links a:hover {
  color: var(--ve-orange);
  text-decoration: none;
}
.ve-cs-sidebar-cta {
  padding: 8px 0;
}

.ve-cs-btn-ghost {
  display: inline-block;
  padding: 10px 24px;
  border: 2px solid var(--ve-orange);
  color: var(--ve-orange);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 15px;
  border-radius: 6px;
  text-align: center;
  width: 100%;
  margin-top: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: transparent;
}
.ve-cs-btn-ghost:hover {
  background: var(--ve-orange);
  color: var(--ve-white);
  text-decoration: none;
}

/* ── Photo Gallery ── */
.ve-cs-gallery-section {
  background: var(--ve-grey-bg);
  padding: 48px 0;
}
.ve-cs-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.ve-cs-gallery-item {
  background: linear-gradient(
    135deg,
    var(--ve-grey-light),
    var(--ve-sky-light)
  );
  border-radius: 8px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0;
  position: relative;
  transition: transform 0.3s ease;
}
.ve-cs-gallery-item:hover {
  transform: scale(1.03);
}
/* The <a> takes the full cell so the entire tile is clickable / a tap
   target on mobile. */
.ve-cs-gallery-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: zoom-in;
  text-decoration: none;
  color: inherit;
}
.ve-cs-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Bottom-up gradient scrim instead of a solid bar — reads as editorial
   captioning, not template overlay. Holds legibility against light-photo
   backgrounds (concrete tanks, sky aerials). */
.ve-cs-gallery-item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 14px 12px;
  background: linear-gradient(
    to top,
    rgba(12, 35, 64, 0.92) 0%,
    rgba(12, 35, 64, 0) 100%
  );
  color: var(--ve-white);
  font-size: 13px;
  font-family: "DM Sans", sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  line-height: 1.4;
}

/* Magnific Popup overlay styling — scoped via .ve-cs-lightbox mainClass
   so we don't fight Salient's own portfolio lightbox theming. */
.ve-cs-lightbox.mfp-bg {
  background: var(--ve-navy);
  opacity: 0.94;
}
.ve-cs-lightbox .mfp-figure::after {
  box-shadow: none;
}
.ve-cs-lightbox .mfp-title {
  font-family: "DM Sans", sans-serif;
  color: var(--ve-white);
  text-align: center;
  padding: 12px 24px;
  font-size: 14px;
}
.ve-cs-lightbox .mfp-counter {
  color: var(--ve-sky-light);
  font-family: "DM Sans", sans-serif;
}

/* ── Metrics Bar ── */
.ve-cs-metrics-bar {
  background: var(--ve-navy);
  padding: 48px 0;
}
.ve-cs-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
  color: var(--ve-white);
}
.ve-cs-metrics-grid[data-slots="3"] {
  grid-template-columns: repeat(3, 1fr);
}
.ve-cs-metrics-grid[data-slots="2"] {
  grid-template-columns: repeat(2, 1fr);
}
.ve-cs-metrics-grid[data-slots="1"] {
  grid-template-columns: 1fr;
}
.ve-cs-metrics-grid > div {
  transition: all 0.2s ease;
}
.ve-cs-metrics-grid > div:hover {
  transform: scale(1.02);
}
.ve-cs-metric-num {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 48px;
  color: var(--ve-orange);
  line-height: 1;
}
.ve-cs-metric-label {
  font-size: 14px;
  opacity: 0.7;
  margin-top: 4px;
}

/* ── FAQ ── */
.ve-cs-faq-section {
  padding: 64px 0;
}
.ve-cs-faq-list {
  margin-top: 24px;
  /* Desktop: match article.ve-cs-content width — the 1fr column of the
       .ve-cs-content-grid (1fr + 340px sidebar, 48px gap). Reset to full
       width below the 2-col breakpoint (max-width: 1024px) where the grid
       is single-column. */
  max-width: calc(100% - 388px);
}
.ve-cs-faq-item {
  border: 1px solid var(--ve-grey-light);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  /* #305: soft "shadow border" lifts each item off the body copy so it
       reads as a distinct card. Radius/spacing/summary type unchanged. */
  box-shadow: 0 1px 3px rgba(12, 35, 64, 0.08);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.ve-cs-faq-item:hover,
.ve-cs-faq-item[open] {
  border-color: var(--ve-grey-mid);
  box-shadow: 0 4px 12px rgba(12, 35, 64, 0.14);
}
.ve-cs-faq-item summary {
  padding: 16px 20px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ve-navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s ease;
}
.ve-cs-faq-item summary::-webkit-details-marker {
  display: none;
}
.ve-cs-faq-item summary::after {
  content: "+";
  font-size: 24px;
  color: var(--ve-orange);
}
.ve-cs-faq-item[open] summary::after {
  content: "−";
}
.ve-cs-faq-item summary:hover {
  background: var(--ve-grey-bg);
}
.ve-cs-faq-answer {
  padding: 0 20px 16px;
  font-size: 15px;
  color: var(--ve-grey-mid);
  max-width: 720px;
}

/* ── Related Resources ── */
.ve-cs-related-section {
  background: var(--ve-grey-bg);
  padding: 80px 0;
}
.ve-cs-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.ve-cs-related-card {
  background: var(--ve-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  position: relative;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
}
.ve-cs-related-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.2s ease;
}
.ve-cs-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
.ve-cs-related-card:hover::before {
  background: var(--ve-orange);
}
.ve-cs-related-card-image {
  height: 160px;
  background: linear-gradient(135deg, var(--ve-blue), var(--ve-sky));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ve-cs-related-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ve-cs-related-card-body {
  padding: 20px;
}
.ve-cs-type-badge {
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 8px;
  color: var(--ve-grey-mid);
}
.ve-cs-type-badge--case-study {
  color: var(--ve-blue);
}
.ve-cs-type-badge--solution-snapshot {
  color: var(--ve-orange);
}
.ve-cs-type-badge--tech-memo {
  color: var(--ve-grey-mid);
}
.ve-cs-related-card-body h4 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ve-navy);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.ve-cs-related-card-body p {
  font-size: 13px;
  color: var(--ve-grey-mid);
  line-height: 1.5;
  margin: 0;
}

/* ── Sparse fallback (References Available Upon Request) ── */
.ve-cs-sparse-fallback-section {
  padding: 48px 0;
}
.ve-cs-sparse-fallback {
  border: 1px dashed var(--ve-grey-light);
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  background: var(--ve-grey-bg);
}
.ve-cs-sparse-fallback h4 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.25rem;
  color: var(--ve-navy);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ve-cs-sparse-fallback p {
  color: var(--ve-grey-mid);
  margin-bottom: 16px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.ve-cs-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 2px solid var(--ve-blue);
  color: var(--ve-blue);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 6px;
  text-decoration: none;
  background: transparent;
  transition: all 0.2s ease;
}
.ve-cs-btn-secondary:hover {
  background: var(--ve-blue);
  color: var(--ve-white);
  text-decoration: none;
}

/* ── Bottom CTA Band ── */
.ve-cs-cta-band {
  background: var(--ve-orange);
  color: var(--ve-white);
  padding: 64px 0;
  text-align: center;
}
.ve-cs-cta-band h2 {
  color: var(--ve-white);
  margin-bottom: 8px;
  font-size: 2.5rem;
  font-weight: 800;
}
.ve-cs-cta-band p {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 24px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.ve-cs-btn-primary {
  display: inline-block;
  padding: 14px 40px;
  background: var(--ve-navy);
  color: var(--ve-white);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s ease;
}
.ve-cs-btn-primary:hover {
  background: var(--ve-blue);
  color: var(--ve-white);
  text-decoration: none;
}

/* ── Fade-in animation (matches mockup) ── */
@keyframes veCsFadeInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.ve-cs-fade-in {
  animation: veCsFadeInFromBottom 0.6s ease-out both;
}
.ve-cs-fade-in--d1 {
  animation-delay: 0ms;
}
.ve-cs-fade-in--d2 {
  animation-delay: 150ms;
}
.ve-cs-fade-in--d3 {
  animation-delay: 300ms;
}

/* Respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .ve-cs-fade-in {
    animation: none;
  }
}

/* ── Responsive: 1024 / 768 / 320 ── */
@media (max-width: 1024px) {
  .ve-cs-hero-inner {
    grid-template-columns: 1fr;
  }
  .ve-cs-hero-image {
    clip-path: none;
    height: 240px;
  }
  .ve-cs-content-grid {
    grid-template-columns: 1fr;
  }
  .ve-cs-faq-list {
    max-width: none;
  }
  .ve-cs-sidebar {
    position: static;
  }
  .ve-cs-stat-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .ve-cs-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .ve-cs-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .ve-cs-hero {
    padding: 24px 0 48px;
  }
  .ve-cs-hero-h1 {
    font-size: 2.5rem;
  }
  .ve-cs-main h2 {
    font-size: 1.75rem;
  }
  .ve-cs-stat-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .ve-cs-triptych-grid {
    grid-template-columns: 1fr;
  }
  .ve-cs-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ve-cs-metrics-grid,
  .ve-cs-metrics-grid[data-slots="3"],
  .ve-cs-metrics-grid[data-slots="4"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .ve-cs-related-grid {
    grid-template-columns: 1fr;
  }
  .ve-cs-hero-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .ve-cs-content-grid {
    padding: 48px 0;
    gap: 32px;
  }
}
@media (max-width: 380px) {
  .ve-cs-main .ve-cs-wrap {
    padding: 0 16px;
  }
  .ve-cs-hero-h1 {
    font-size: 2rem;
  }
  .ve-cs-stat-bar {
    grid-template-columns: 1fr;
  }
  .ve-cs-hero-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ve-cs-gallery-grid {
    grid-template-columns: 1fr;
  }
  .ve-cs-metrics-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ve-cs-triptych {
    padding: 48px 0;
  }
  .ve-cs-cta-band {
    padding: 48px 0;
  }
  .ve-cs-cta-band h2 {
    font-size: 1.75rem;
  }
}

/* =====================================================================
   RESOURCE: TECH MEMO (#69)
   Scoped under .ve-tm-* — rendered by template-parts/resource-tech-memo.php
   for resource posts with resource_type = tech-memo (CPT shipped in #66).
   Source mockup:  docs/mockups/tech-memo-demo-oxidation-ditch.html (demo)
   Launch scope: static TOC (scroll-spy JS deferred to M4), no "Download PDF"
   sidebar affordance, no "Related Solutions" TOC block.
   ===================================================================== */

.ve-tm-main {
  color: var(--ve-grey-mid);
}
.ve-tm-main .ve-tm-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Salient's parent theme adds a default padding-bottom to <p>. The mockups
   zero all padding and drive spacing with margins — mirror that within the
   tech-memo scope so our explicit margin-bottom rules control the rhythm. */
.ve-tm-main p {
  padding-bottom: 0;
}

/* All headings inside the tech-memo scope use Barlow Condensed per the
   mockup; body copy stays DM Sans (inherited from Salient body). */
.ve-tm-main h1,
.ve-tm-main h2,
.ve-tm-main h3,
.ve-tm-main h4 {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.ve-tm-main h1 {
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ve-navy);
}
.ve-tm-main h2 {
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--ve-navy);
  margin-bottom: 16px;
}
.ve-tm-main h3 {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: var(--ve-blue);
  margin-bottom: 12px;
}

/* ── Breadcrumb ── */
.ve-tm-breadcrumb {
  padding: 12px 0;
  font-size: 13px;
  color: var(--ve-grey-mid);
}
.ve-tm-breadcrumb a {
  color: var(--ve-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ve-tm-breadcrumb a:hover {
  color: var(--ve-orange);
}
.ve-tm-breadcrumb .sep {
  margin: 0 6px;
  opacity: 0.6;
}
.ve-tm-breadcrumb .current {
  color: var(--ve-grey-mid);
}

/* ── Document header band ── */
.ve-tm-doc-header {
  background: var(--ve-grey-bg);
  padding: 40px 0 44px;
  border-bottom: 1px solid var(--ve-grey-light);
}
.ve-tm-doc-label {
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ve-orange);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 12px;
}
.ve-tm-doc-title {
  margin: 0;
}
.ve-tm-doc-subtitle {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  color: var(--ve-grey-mid);
  margin: 8px 0 0;
  max-width: 720px;
  text-transform: none;
  line-height: 1.75;
}
.ve-tm-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ve-grey-light);
  font-size: 14px;
  color: var(--ve-grey-mid);
}
.ve-tm-doc-meta strong {
  color: var(--ve-grey-dark);
  font-weight: 600;
}
/* #396: doc-header tags are the shared .ve-term-list component now — real
   <ul>/<li> replacing .ve-tm-tags + .ve-tm-tag. Every declaration is lifted
   verbatim from those rules. */
.ve-term-list.ve-term-list--tm {
  --ve-term-bg: rgba(26, 76, 126, 0.08);
  --ve-term-fg: var(--ve-blue);

  margin-top: 16px;
}
.ve-term-list--tm li {
  /* No border, inherited line-height — see the .ve-term-list--cs note. */
  border: 0;
  line-height: inherit;
  font-family: "DM Sans", sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  padding: 4px 12px;
  border-radius: 4px;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.ve-term-list--tm li:hover {
  background: rgba(26, 76, 126, 0.15);
  transform: scale(1.03);
}
/* Salient's parent theme overrides the chip font-size; re-assert it with
   body-class specificity (same pattern as the downloads-list marker fix). */
body.single-resource .ve-term-list--tm li {
  font-size: 0.6875rem;
}

/* ── TOC + content grid ── */
.ve-tm-doc-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding: 48px 0;
}

/* ── Sticky TOC (static — scroll-spy deferred to M4) ── */
.ve-tm-toc {
  position: sticky;
  top: 60px;
  align-self: start;
}
.ve-tm-toc-label {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ve-grey-mid);
  margin-bottom: 16px;
}
.ve-tm-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ve-tm-toc li {
  margin-bottom: 0;
}
.ve-tm-toc a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ve-grey-mid);
  border-left: 3px solid transparent;
  text-decoration: none;
  transition: all 0.15s ease;
}
.ve-tm-toc a:hover {
  color: var(--ve-navy);
  background: var(--ve-grey-bg);
  text-decoration: none;
}
/* First item carries a static highlight — anchor links work without JS.
   Weight is inherited (700) — the active item stands out via color, the
   orange left border, and the bg tint, not a heavier weight. */
.ve-tm-toc a.active {
  color: var(--ve-navy);
  border-left-color: var(--ve-orange);
  background: rgba(232, 116, 26, 0.04);
}
/* Salient may reinject list markers; nuke them scoped to our TOC list
   (same pattern as the manufacturer downloads list at body.single-manufacturer). */
body.single-resource .ve-tm-toc ol,
body.single-resource .ve-tm-toc li,
body.single-resource .ve-tm-toc li::before,
body.single-resource .ve-tm-toc li::marker {
  list-style: none;
  list-style-type: none;
}

/* ── Document body ── */
.ve-tm-doc-body {
  max-width: 760px;
  font-weight: 400;
  font-size: 16px;
}
.ve-tm-doc-body h2 {
  margin-top: 48px;
  padding-top: 32px;
  padding-left: 16px;
  border-top: 1px solid var(--ve-grey-light);
  border-left: 3px solid var(--ve-orange);
}
.ve-tm-doc-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.ve-tm-doc-body h3 {
  margin-top: 28px;
}
.ve-tm-doc-body p {
  margin-bottom: 16px;
}
.ve-tm-doc-body ul,
.ve-tm-doc-body ol {
  margin: 0 0 16px 20px;
}
.ve-tm-doc-body li {
  margin-bottom: 8px;
  font-size: 15px;
}
.ve-tm-doc-body li::marker {
  color: var(--ve-orange);
}
.ve-tm-doc-body a {
  color: var(--ve-blue);
}
.ve-tm-doc-body a:hover {
  color: var(--ve-orange);
  text-decoration: underline;
}
.ve-tm-doc-body img {
  max-width: 100%;
  height: auto;
}
/* Salient sets <strong>/<b> to weight 600; the mockup relies on the browser
   default 700. Restore real bold in prose contexts (body content + FAQ
   answers). The doc-header meta line keeps its intentional 600 — different
   scope, not matched here. */
.ve-tm-doc-body strong,
.ve-tm-doc-body b,
.ve-tm-faq-answer strong,
.ve-tm-faq-answer b {
  font-weight: 700;
}

/* ── Body content components (authored in the WP editor) ── */
/* Callout boxes */
.ve-tm-doc-body .ve-callout {
  padding: 20px 24px;
  border-radius: 0 8px 8px 0;
  margin: 24px 0;
  font-size: 15px;
  transition: box-shadow 0.2s ease;
}
.ve-tm-doc-body .ve-callout:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.ve-tm-doc-body .ve-callout--finding {
  border-left: 4px solid var(--ve-orange);
  background: rgba(232, 116, 26, 0.05);
}
.ve-tm-doc-body .ve-callout--note {
  border-left: 4px solid var(--ve-blue);
  background: rgba(26, 76, 126, 0.04);
}
/* Only the leading label strong (e.g. "Key Finding") goes block; mid-sentence
   <strong> emphasis inside the callout body stays inline. */
.ve-tm-doc-body .ve-callout > strong:first-of-type {
  display: block;
  margin-bottom: 6px;
}
.ve-tm-doc-body .ve-callout--finding strong {
  color: var(--ve-orange);
}
.ve-tm-doc-body .ve-callout--note strong {
  color: var(--ve-blue);
}

/* Data tables — bare <table> gets the spec-table treatment automatically;
   .ve-spec-table is an explicit alias for the same look. */
.ve-tm-doc-body table,
.ve-tm-doc-body .ve-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 24px 0;
}
.ve-tm-doc-body table thead,
.ve-tm-doc-body .ve-spec-table thead {
  background: var(--ve-navy);
  color: var(--ve-white);
}
.ve-tm-doc-body table th,
.ve-tm-doc-body .ve-spec-table th {
  padding: 12px 16px;
  text-align: left;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.ve-tm-doc-body table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--ve-grey-bg);
  transition: all 0.2s;
}
.ve-tm-doc-body table td,
.ve-tm-doc-body .ve-spec-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--ve-grey-bg);
}
.ve-tm-doc-body table tbody tr:nth-child(even),
.ve-tm-doc-body .ve-spec-table tbody tr:nth-child(even) {
  background: var(--ve-grey-bg);
}
.ve-tm-doc-body table tbody tr,
.ve-tm-doc-body .ve-spec-table tbody tr {
  border-left: 3px solid transparent;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.ve-tm-doc-body table tbody tr:hover,
.ve-tm-doc-body .ve-spec-table tbody tr:hover {
  border-left-color: var(--ve-orange);
  background: rgba(232, 116, 26, 0.04);
}
.ve-tm-doc-body table caption,
.ve-tm-doc-body .ve-spec-table caption {
  text-align: left;
  font-size: 13px;
  color: var(--ve-grey-mid);
  margin-bottom: 8px;
  font-weight: 600;
}
.ve-tm-doc-body .changed,
.ve-tm-doc-body .highlight {
  color: var(--ve-orange);
  font-weight: 700;
}

/* Figures */
.ve-tm-doc-body .ve-figure {
  margin: 32px 0;
  text-align: center;
}
.ve-tm-doc-body .ve-figure img {
  border: 1px solid var(--ve-grey-light);
  border-radius: 8px;
}
.ve-tm-doc-body .ve-figure-image {
  background: linear-gradient(135deg, var(--ve-grey-bg), var(--ve-grey-light));
  border: 1px solid var(--ve-grey-light);
  border-radius: 8px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ve-grey-mid);
  font-size: 14px;
}
.ve-tm-doc-body .ve-figure-caption {
  font-size: 13px;
  color: var(--ve-grey-mid);
  font-style: italic;
  margin-top: 10px;
}
.ve-tm-doc-body .ve-figure-caption strong {
  font-style: normal;
}
.ve-tm-doc-body .ve-figure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 32px 0;
}
.ve-tm-doc-body .ve-figure-grid .ve-figure {
  margin: 0;
}
.ve-tm-doc-body .ve-figure-grid .ve-figure-image {
  height: 180px;
}

/* References list */
.ve-tm-doc-body .ve-references {
  font-size: 14px;
  color: var(--ve-grey-mid);
  line-height: 1.8;
}
.ve-tm-doc-body .ve-references ol {
  padding-left: 20px;
}
.ve-tm-doc-body .ve-references li {
  margin-bottom: 6px;
  font-size: 15px;
}

/* Mini case-study cards */
.ve-tm-doc-body .ve-mini-case {
  background: var(--ve-grey-bg);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
  border-left: 4px solid var(--ve-blue);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.ve-tm-doc-body .ve-mini-case:hover {
  border-left-color: var(--ve-orange);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.ve-tm-doc-body .ve-mini-case h4 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--ve-navy);
  margin-bottom: 4px;
}
.ve-tm-doc-body .ve-mini-case .case-subtitle {
  font-size: 13px;
  color: var(--ve-orange);
  font-weight: 600;
  margin-bottom: 10px;
}
.ve-tm-doc-body .ve-mini-case p {
  font-size: 14px;
  margin-bottom: 10px;
}
.ve-tm-doc-body .ve-mini-case ul {
  margin: 0 0 0 16px;
}
.ve-tm-doc-body .ve-mini-case li {
  font-size: 13px;
  margin-bottom: 4px;
}

/* ── Downloads list ── */
.ve-tm-downloads {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--ve-grey-light);
}
.ve-tm-downloads-label {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ve-grey-mid);
  margin-bottom: 16px;
}
.ve-tm-downloads-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Salient's `ul li { list-style: disc }` re-injects markers on the download
   <li>s despite list-style:none on the <ul>, and .ve-tm-doc-body li::marker
   then tints them orange. Nuke them, body-class-scoped — same pattern as the
   manufacturer downloads list and the tech-memo TOC. */
ul.ve-tm-downloads-list {
  margin-left: 0;
}
body.single-resource .ve-tm-downloads-list,
body.single-resource .ve-tm-downloads-list li,
body.single-resource .ve-tm-downloads-list li::before,
body.single-resource .ve-tm-downloads-list li::marker {
  list-style: none;
  list-style-type: none;
}
.ve-tm-download-row {
  margin-bottom: 8px;
}
.ve-tm-download-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--ve-grey-bg);
  border: 1px solid var(--ve-grey-light);
  border-radius: 8px;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.ve-tm-download-link:hover {
  border-color: var(--ve-orange);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-decoration: none;
}
.ve-tm-download-icon {
  flex-shrink: 0;
  color: var(--ve-blue);
  display: flex;
}
.ve-tm-download-text {
  flex: 1;
  min-width: 0;
}
.ve-tm-download-name {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ve-navy);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ve-tm-download-desc {
  display: block;
  font-size: 13px;
  color: var(--ve-grey-mid);
  margin-top: 2px;
}
.ve-tm-download-action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ve-orange);
}

/* ── Author bio card ── */
.ve-tm-author-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px;
  background: var(--ve-grey-bg);
  border-radius: 8px;
  margin-top: 40px;
  transition: box-shadow 0.2s ease;
}
.ve-tm-author-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.ve-tm-author-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ve-grey-light);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ve-tm-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ve-tm-author-monogram {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--ve-navy);
}
.ve-tm-author-name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--ve-navy);
  text-transform: uppercase;
}
.ve-tm-author-title {
  font-size: 14px;
  color: var(--ve-orange);
  font-weight: 600;
  margin-top: 2px;
}
.ve-tm-author-bio {
  font-size: 14px;
  color: var(--ve-grey-mid);
  margin-top: 6px;
  line-height: 1.5;
}

/* ── FAQ section ── */
.ve-tm-faq-section {
  padding: 64px 0;
  border-top: 1px solid var(--ve-grey-light);
  background: var(--ve-white);
}
/* Scoped to .ve-tm-main so it ties .ve-tm-main .ve-tm-wrap on specificity
   (0,2,0) and wins on source order — the FAQ inner div carries both classes,
   and the 1200px wrap width would otherwise override this 800px cap. */
.ve-tm-main .ve-tm-faq-inner {
  max-width: 800px;
}
.ve-tm-faq-section h2 {
  text-align: center;
}
.ve-tm-faq-list {
  margin-top: 24px;
}
.ve-tm-faq-item {
  border: 1px solid var(--ve-grey-light);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.ve-tm-faq-item:hover {
  border-color: var(--ve-grey-mid);
}
.ve-tm-faq-item summary {
  padding: 16px 20px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ve-navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: background 0.2s ease;
}
.ve-tm-faq-item summary::-webkit-details-marker {
  display: none;
}
.ve-tm-faq-item summary:hover {
  background: var(--ve-grey-bg);
}
.ve-tm-faq-item summary::after {
  content: "+";
  font-size: 24px;
  color: var(--ve-orange);
  flex-shrink: 0;
}
.ve-tm-faq-item[open] summary::after {
  content: "\2212";
}
.ve-tm-faq-answer {
  padding: 0 20px 16px;
  font-size: 15px;
  color: var(--ve-grey-mid);
  max-width: 720px;
  line-height: 1.7;
}
.ve-tm-faq-answer p {
  margin-bottom: 12px;
}
.ve-tm-faq-answer p:last-child {
  margin-bottom: 0;
}

/* ── Related resources grid ── */
.ve-tm-related-section {
  background: var(--ve-grey-bg);
  padding: 80px 0;
}
.ve-tm-related-grid {
  display: grid;
  /* auto-fit collapses empty tracks (and their gaps), so justify-content
       centers 1-2 cards instead of leaving dead columns; 3 cards fill the row.
       Inherently responsive — no per-breakpoint column overrides needed. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 384px));
  gap: 24px;
  margin-top: 24px;
  justify-content: center;
}
.ve-tm-related-card {
  background: var(--ve-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: relative;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.ve-tm-related-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.2s ease;
}
.ve-tm-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
.ve-tm-related-card:hover::before {
  background: var(--ve-orange);
}
.ve-tm-related-card-image {
  height: 140px;
  background: linear-gradient(135deg, var(--ve-blue), var(--ve-sky));
  display: flex;
  align-items: center;
  justify-content: center;
}
.ve-tm-related-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ve-tm-related-card-body {
  padding: 20px;
}
.ve-tm-type-badge {
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 8px;
  color: var(--ve-grey-mid);
}
.ve-tm-type-badge--solution-snapshot {
  color: var(--ve-orange);
}
.ve-tm-type-badge--case-study {
  color: var(--ve-blue);
}
.ve-tm-type-badge--tech-memo {
  color: var(--ve-grey-mid);
}
.ve-tm-related-card-body h4 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--ve-navy);
  margin-bottom: 8px;
}
.ve-tm-related-card-body p {
  font-size: 13px;
  color: var(--ve-grey-mid);
  line-height: 1.5;
  margin: 0;
}

/* ── Sparse fallback card ── */
/* Renders standalone when no related content is linked, or alongside the
   related grid when force_sparse_mode is on (admin escape hatch). Grey bg
   either way, so adjacency to the related/CTA bands stays seamless. */
.ve-tm-sparse-section {
  background: var(--ve-grey-bg);
  padding: 80px 0;
}
.ve-tm-related-section + .ve-tm-sparse-section {
  padding-top: 0;
}
.ve-tm-sparse-card {
  background: var(--ve-white);
  border: 1px solid var(--ve-grey-light);
  border-radius: 8px;
  padding: 32px;
  text-align: center;
}
.ve-tm-sparse-card h4 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ve-navy);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.ve-tm-sparse-card p {
  font-size: 15px;
  color: var(--ve-grey-mid);
  max-width: 560px;
  margin: 0 auto 20px;
}

/* ── CTA band (deliberately soft — muted grey, navy text) ── */
.ve-tm-cta-band {
  background: var(--ve-grey-bg);
  border-top: 1px solid var(--ve-grey-light);
  padding: 64px 0;
  text-align: center;
}
.ve-tm-cta-band h2 {
  color: var(--ve-navy);
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.ve-tm-cta-band p {
  font-size: 16px;
  color: var(--ve-grey-mid);
  margin: 0 auto 24px;
  max-width: 600px;
}

/* ── Buttons ── */
.ve-tm-btn-primary {
  display: inline-block;
  padding: 14px 40px;
  background: var(--ve-orange);
  color: var(--ve-white);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.ve-tm-btn-primary:hover {
  background: var(--ve-orange-light);
  color: var(--ve-white);
  text-decoration: none;
}
.ve-tm-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: transparent;
  color: var(--ve-blue);
  border: 2px solid var(--ve-blue);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 6px;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.ve-tm-btn-secondary:hover {
  background: var(--ve-blue);
  color: var(--ve-white);
  text-decoration: none;
}

/* ── Fade-in animation (related cards) ── */
@keyframes veTmFadeInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.ve-tm-fade-in {
  animation: veTmFadeInFromBottom 0.6s ease-out both;
}
.ve-tm-fade-in--d1 {
  animation-delay: 0ms;
}
.ve-tm-fade-in--d2 {
  animation-delay: 150ms;
}
.ve-tm-fade-in--d3 {
  animation-delay: 300ms;
}

@media (prefers-reduced-motion: reduce) {
  .ve-tm-fade-in {
    animation: none;
  }
}

/* ── Responsive: 1024 / 768 / 380 ── */
@media (max-width: 1024px) {
  .ve-tm-doc-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ve-tm-toc {
    position: static;
  }
}
@media (max-width: 768px) {
  .ve-tm-main h1 {
    font-size: 1.75rem;
  }
  .ve-tm-main h2 {
    font-size: 1.25rem;
  }
  .ve-tm-doc-header {
    padding: 32px 0 36px;
  }
  .ve-tm-doc-grid {
    padding: 32px 0;
  }
  .ve-tm-doc-body .ve-figure-grid {
    grid-template-columns: 1fr;
  }
  .ve-tm-author-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .ve-tm-download-link {
    flex-wrap: wrap;
  }
  .ve-tm-download-action {
    width: 100%;
    justify-content: flex-end;
  }
}
@media (max-width: 380px) {
  .ve-tm-main .ve-tm-wrap {
    padding: 0 16px;
  }
  .ve-tm-doc-meta {
    gap: 12px;
  }
  .ve-tm-related-section {
    padding: 56px 0;
  }
  .ve-tm-cta-band h2 {
    font-size: 1.5rem;
  }
}

/* ============================================================
   BLOG-POST FAQ — Rank Math FAQ block restyle (#280)
   ------------------------------------------------------------
   Scope: single blog posts only (body.single-post). Restyles the
   Rank Math FAQ block (wp:rank-math/faq-block) into the chosen
   "Mockup B" visual language — flat divider rows, zero-padded
   number markers (01, 02…), a navy left-accent + soft wash on
   answers, and brand type/tokens.

   Styled-flat by decision (issue #280): every Q&A stays expanded.
   No accordion, no chevron, no JS — the audience shouldn't have to
   discover a click-to-expand to read an answer, and answers here
   are short. This is a CSS-only restyle of the block's own markup.

   Rank Math emits its OWN FAQPage JSON-LD for this block, so we add
   NO hand-rolled schema here (that requirement applies only to the
   deferred PHP-template surfaces). Nothing here touches markup or
   heading levels, so the post's heading outline is unchanged.

   Markup targeted (verified against the live jaeger post on
   staging — Rank Math's Schema-block FAQ output, NOT the Gutenberg
   wp-block-* markup):
     #rank-math-faq.rank-math-block
       └ .rank-math-list
           └ .rank-math-list-item   (one per Q&A)
               ├ h3.rank-math-question   (question)
               └ .rank-math-answer       (rich-text answer)
   Anchored on the FAQ-specific .rank-math-list so it never touches
   other Rank Math schema blocks (HowTo, etc.).

   Deferred to a follow-up (out of scope here): unifying the
   manufacturer [toggles], case-study, and tech-memo FAQ surfaces
   into one shared component.
   ============================================================ */

/* List container (.rank-math-list): cap width to match the site's
   other FAQ surfaces, add vertical breathing room, open the divider
   stack with a top rule, and reset the item counter. Scoped to the
   FAQ-specific .rank-math-list so generic .rank-math-block schema
   output (HowTo, etc.) is never affected. */
body.single-post .rank-math-block .rank-math-list {
  counter-reset: ve-faq;
  max-width: 820px;
  margin: 40px 0;
  border-top: 1px solid rgba(12, 35, 64, 0.12);
}

/* Each Q&A is a flat divider row — no cards, no shadows. */
body.single-post .rank-math-block .rank-math-list-item {
  counter-increment: ve-faq;
  padding: 24px 4px;
  border-bottom: 1px solid rgba(12, 35, 64, 0.12);
}

/* Question row: brand heading type (matches the case-study /
   tech-memo FAQ summaries) with a zero-padded number marker laid
   out to the left via flex, so it aligns to the first line even
   when a long question wraps. */
body.single-post .rank-math-block .rank-math-question {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ve-navy);
}

/* Number marker (01, 02…). --ve-mid-blue rather than the mockup's
   lighter sky so the marker clears WCAG AA text contrast on white. */
body.single-post .rank-math-block .rank-math-question::before {
  content: counter(ve-faq, decimal-leading-zero);
  flex: 0 0 auto;
  min-width: 1.6em;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ve-mid-blue);
  font-variant-numeric: tabular-nums;
}

/* Answer: navy left-accent bar + soft grey wash, indented ~under
   the question text (past the number column). Body copy in DM Sans
   to match site prose. */
body.single-post .rank-math-block .rank-math-answer {
  margin: 14px 0 0 36px;
  padding: 16px 22px;
  border-left: 3px solid var(--ve-navy);
  border-radius: 0 6px 6px 0;
  background: var(--ve-grey-bg);
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ve-grey-mid);
}

/* Answer prose: tidy first/last margins and support the full
   WYSIWYG range (paragraphs, lists, links, bold, images). */
body.single-post .rank-math-block .rank-math-answer > :first-child {
  margin-top: 0;
}
body.single-post .rank-math-block .rank-math-answer > :last-child {
  margin-bottom: 0;
}
body.single-post .rank-math-block .rank-math-answer p {
  margin: 0 0 12px;
}
body.single-post .rank-math-block .rank-math-answer strong,
body.single-post .rank-math-block .rank-math-answer b {
  color: var(--ve-navy);
  font-weight: 700;
}
body.single-post .rank-math-block .rank-math-answer a {
  color: var(--ve-mid-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.single-post .rank-math-block .rank-math-answer a:hover {
  color: var(--ve-blue);
}
body.single-post .rank-math-block .rank-math-answer ul,
body.single-post .rank-math-block .rank-math-answer ol {
  margin: 8px 0 12px 20px;
  padding: 0;
}
body.single-post .rank-math-block .rank-math-answer li {
  margin-bottom: 4px;
}
body.single-post .rank-math-block .rank-math-answer ul li::marker {
  color: var(--ve-sky);
}
body.single-post .rank-math-block .rank-math-answer img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Responsive: step the question down and tighten the answer indent
   so long questions don't crowd on phones (per PRD R2). */
@media (max-width: 768px) {
  body.single-post .rank-math-block .rank-math-list-item {
    padding: 20px 0;
  }
  body.single-post .rank-math-block .rank-math-question {
    gap: 10px;
    font-size: 1.1rem;
  }
  body.single-post .rank-math-block .rank-math-answer {
    margin-left: 30px;
    padding: 14px 16px;
  }
}

@media (max-width: 400px) {
  body.single-post .rank-math-block .rank-math-answer {
    margin-left: 0;
  }
}

/* ===================================================================== *
 * EFFICIENCY UPGRADES (#142) — /efficiencyupgrades/ hub (BB → WPBakery)  *
 * 9 resource cards (7 live + 2 "Coming soon"). Markup lives in the page's*
 * WPBakery Code Editor as one [vc_raw_html] block rooted at .effup-page. *
 * Refs: docs/mockups/142-efficiencyupgrades*                            *
 * ===================================================================== */
.effup-page {
  font-family: "DM Sans", sans-serif;
  color: var(--ve-grey-dark);
}
.effup-page .effup-hero,
.effup-page .effup-section,
.effup-page .effup-cta {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.effup-page .effup-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Zero Salient's default .container-wrap top/bottom padding on this WPBakery page
   (hero + CTA bands supply their own vertical rhythm, so the wrapper padding is a
   white gap above the hero / below the CTA). Page-scoped via :has(.effup-page) —
   a WPBakery page has no custom .container-wrap class to hook. PADDING ONLY —
   never zero margin-bottom here (it drives Salient's footer-reveal). */
body .container-wrap:has(.effup-page) {
  padding-top: 0;
  padding-bottom: 0;
}

/* Hero */
.effup-page .effup-hero {
  background:
    linear-gradient(180deg, rgba(12, 35, 64, 0.72), rgba(12, 35, 64, 0.92)),
    radial-gradient(120% 120% at 80% -10%, var(--ve-blue), var(--ve-navy) 60%);
  color: var(--ve-white);
  padding: 96px 0 84px;
}
.effup-page .effup-hero-eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ve-sky);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.effup-page .effup-hero-eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--ve-sky);
  display: inline-block;
}
.effup-page .effup-hero h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 56px;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 20px;
  max-width: 860px;
  color: var(--ve-white);
}
.effup-page .effup-hero h1 em {
  font-style: italic;
  color: var(--ve-sky-light);
  line-height: 1.2;
}
.effup-page .effup-hero-sub {
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  max-width: 720px;
  margin: 0;
}

/* Section + lead */
.effup-page .effup-section {
  padding: 72px 0 84px;
  background: var(--ve-grey-bg);
}
.effup-page .effup-lead {
  max-width: 720px;
  margin: 0 0 36px;
}
.effup-page .effup-eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ve-mid-blue);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.effup-page .effup-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--ve-orange);
  display: inline-block;
}
.effup-page .effup-h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ve-navy);
  margin: 0 0 12px;
}
.effup-page .effup-lead p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ve-grey-text);
  margin: 0;
}

/* Card grid */
.effup-page .effup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.effup-page .effup-card {
  background: var(--ve-white);
  border: 1px solid var(--ve-rule);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.effup-page .effup-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ve-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s;
  z-index: 2;
}
.effup-page .effup-card:not(.is-soon):hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(12, 35, 64, 0.14);
}
.effup-page .effup-card:not(.is-soon):hover::before {
  transform: scaleX(1);
}
.effup-page .effup-thumb {
  position: relative;
  display: block;
  aspect-ratio: 582 / 749;
  background: linear-gradient(160deg, var(--ve-grey-bg), var(--ve-rule));
  border-bottom: 1px solid var(--ve-rule);
  overflow: hidden;
}
.effup-page .effup-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.effup-page .effup-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ve-white);
  background: var(--ve-mid-blue);
  padding: 4px 10px;
  border-radius: 4px;
}
.effup-page .effup-badge.doc {
  background: var(--ve-orange);
}
.effup-page .effup-body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.effup-page .effup-body h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--ve-navy);
  margin: 0 0 10px;
}
.effup-page .effup-body h3 a {
  color: inherit;
  text-decoration: none;
}
.effup-page .effup-body h3 a:hover {
  color: var(--ve-mid-blue);
}
.effup-page .effup-body p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ve-grey-text);
  margin: 0 0 16px;
}
.effup-page .effup-action {
  margin-top: auto;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ve-orange);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.effup-page .effup-action svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.effup-page .effup-action:hover {
  color: var(--ve-orange-light);
}
.effup-page .effup-action-sec {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ve-mid-blue);
  text-decoration: none;
}
.effup-page .effup-action-sec:hover {
  text-decoration: underline;
}

/* Coming soon */
.effup-page .effup-card.is-soon {
  background: var(--ve-grey-bg);
  border-style: dashed;
}
.effup-page .effup-card.is-soon .effup-thumb {
  background: repeating-linear-gradient(
    135deg,
    var(--ve-grey-bg),
    var(--ve-grey-bg) 12px,
    var(--ve-rule) 12px,
    var(--ve-rule) 24px
  );
}
.effup-page .effup-card.is-soon .effup-badge {
  background: var(--ve-grey-light);
}
.effup-page .effup-card.is-soon h3 {
  color: var(--ve-grey-mid);
}
.effup-page .effup-soon-note {
  font-size: 13px;
  color: var(--ve-grey-mid);
  font-style: italic;
  margin-top: auto;
}

/* CTA band */
.effup-page .effup-cta {
  background: var(--ve-navy);
  color: var(--ve-white);
  text-align: center;
  padding: 66px 0;
}
.effup-page .effup-cta h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--ve-white);
}
.effup-page .effup-cta p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 auto 26px;
  max-width: 560px;
}
.effup-page .effup-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ve-orange);
  color: var(--ve-white);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 6px;
  transition: background 0.15s;
}
.effup-page .effup-btn:hover {
  background: var(--ve-orange-light);
}

/* Responsive */
@media (max-width: 900px) {
  .effup-page .effup-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .effup-page .effup-hero h1 {
    font-size: 44px;
  }
}
@media (max-width: 560px) {
  .effup-page .effup-grid {
    grid-template-columns: 1fr;
  }
  .effup-page .effup-hero {
    padding: 72px 0 60px;
  }
  .effup-page .effup-hero h1 {
    font-size: 34px;
  }
}

/* =====================================================================
   WEFTEC GUIDE PAGE TEMPLATE
   Scoped under body.page-template-page-weftec-guide — emitted by
   page-weftec-guide.php. Source: the approved static mockup
   (scratchpad/weftec/05-mockup.html).

   REUSE-FIRST. The page is built almost entirely from shipped
   components: .ve-hero, the tech-memo shell .ve-tm-main / -wrap /
   -doc-body (chosen over .ve-cs-* for its h2 1.75rem / h3 1.25rem
   scale, which suits long sentence-form headings, and because it
   brings .ve-callout* and .ve-spec-table into scope by wrapping
   rather than by editing their selectors), .ve-cs-hero-stats,
   .ve-cs-sidebar-card, .resource-archive-card, .ve-tm-faq-*,
   .mfr-detail-section*, .ve-cs-cta-band, and the contact rep/form
   card family. Those contact-scoped selector lists (~2808–3360
   above) had .page-template-page-weftec-guide ADDED to them; nothing
   was duplicated down here and no existing declaration value
   anywhere in this file was changed.

   This section contains exactly three things:
     1. Two genuinely new components — .ve-weftec-status and
        .ve-weftec-booth. Both carry a unique `ve-weftec-` prefix, so
        they are left unscoped: there is nothing for them to collide
        with, and keeping specificity at (0,1,0) leaves them reusable
        if a second show page ever lands.
     2. Layout-only helpers, all scoped to the template because their
        names (.ve-lane, .ve-meta-bar, .ve-field…) are generic enough
        to leak.
     3. A short list of scoped overrides where a shipped default is
        actively wrong on this template — see CARD STACK and HERO.

   Mobile-first: the primary delivery is a rep texting the link, so
   every grid in this section is single-column by 600px and the whole
   page is checked at 375px.
   ===================================================================== */

/* ---------------------------------------------------------------------
   NEW COMPONENT 1 of 2 — .ve-weftec-status
   The two-state show-status strip that sits inside the hero.

   Justification: nothing shipped expresses "this show is coming up" vs
   "this show has passed, here is the durable version of the page" as a
   single swappable block. State is picked manually via the ACF
   `show_state` radio — never derived from the clock — so a stale page
   fails visibly rather than silently.

   Built entirely on existing tokens: --ve-sky over navy for the
   in-season state, --ve-grey-bg / --ve-grey-mid for the out-of-season
   state, --ve-detail-radius for the corner. No new colour literals.
   Its inner stat cells reuse the shipped .ve-cs-hero-stats /
   -stat-num / -stat-label treatment rather than defining their own.
   --------------------------------------------------------------------- */
.ve-weftec-status {
  max-width: 720px;
  margin: 30px auto 28px;
  padding: 18px 24px 20px;
  border: 1px solid transparent;
  border-radius: var(--ve-detail-radius);
  text-align: left;
}
.ve-weftec-status-tag {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.ve-weftec-status-tag::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.ve-weftec-status-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

/* -- Pre-show (in season): sky tint on the navy hero -- */
.ve-weftec-status--pre-show {
  background: rgba(74, 159, 212, 0.1);
  border-color: rgba(74, 159, 212, 0.35);
  color: var(--ve-white);
}
.ve-weftec-status--pre-show .ve-weftec-status-tag {
  color: var(--ve-orange-light);
}
.ve-weftec-status--pre-show .ve-weftec-status-body {
  color: rgba(255, 255, 255, 0.72);
}

/* -- Post-show (out of season): quiet grey card -- */
.ve-weftec-status--post-show {
  background: var(--ve-grey-bg);
  border-color: var(--ve-grey-lighter);
  color: var(--ve-grey-dark);
}
.ve-weftec-status--post-show .ve-weftec-status-tag {
  color: var(--ve-grey-mid);
}
.ve-weftec-status--post-show .ve-weftec-status-body {
  color: var(--ve-grey-mid);
}
.ve-weftec-status--post-show a {
  color: var(--ve-blue);
  font-weight: 600;
  border-bottom: 1px solid rgba(26, 76, 126, 0.35);
}

/* Tighten the reused hero-stats rhythm inside the strip. */
.ve-weftec-status .ve-cs-hero-stats {
  margin-top: 14px;
  padding-top: 14px;
}
/* .ve-cs-hero-stats draws its top rule in white-alpha because it was
   built for a navy hero. On the light post-show strip that rule is
   invisible, so recolour it — at every width, not just the narrow
   breakpoint the mockup happened to show it at. */
.ve-weftec-status--post-show .ve-cs-hero-stats {
  border-top-color: var(--ve-grey-lighter);
}

@media (max-width: 480px) {
  .ve-weftec-status {
    padding: 16px 16px 18px;
  }
  /* Shipped .ve-cs-hero-stats stays 3-up until 380px. Three columns
     inside a 720px strip are unreadable on a 375–480px phone, which is
     exactly the delivery context for this page, so collapse to one
     column here. Scoped to the strip — the case-study hero that owns
     this component is untouched. */
  .ve-weftec-status .ve-cs-hero-stats {
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: left;
  }
}

/* ---------------------------------------------------------------------
   NEW COMPONENT 2 of 2 — .ve-weftec-booth
   The booth line inside a manufacturer stop card.

   Justification (record this in the PR): no shipped card slot has these
   semantics. The card family gives us chip / title / excerpt, and the
   booth number is none of those — it is a wayfinding coordinate, and it
   has to be visually separable from the `why_stop` sentence so someone
   scanning on a phone in an aisle finds it without reading prose.
   ~10 lines, existing tokens only.

   Renders only when `booth` is non-empty and its source is recorded and
   not `unconfirmed`. Tiers B and C omit the element entirely; the card
   body is a flex column with `gap`, so nothing shifts and no empty slot
   is left behind.
   --------------------------------------------------------------------- */
.ve-weftec-booth {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ve-orange);
}
.ve-weftec-booth::before {
  content: "";
  align-self: stretch;
  width: 3px;
  min-height: 16px;
  background: var(--ve-orange);
  border-radius: 2px;
}

/* ---------------------------------------------------------------------
   LAYOUT HELPERS — no new visual language, just boxes.
   All scoped to the template: these names are generic enough to leak.
   --------------------------------------------------------------------- */

/* Hero content column + action row. */
.page-template-page-weftec-guide .ve-hero-inner {
  width: 100%;
  max-width: 860px;
}
.page-template-page-weftec-guide .ve-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Meta bar — breadcrumb + "Last updated" stamp, in a light band directly
   beneath the hero. .ve-tm-doc-meta ships as grey-mid text over a
   grey-light top rule, i.e. designed for a light background; on the navy
   hero it would need a colour override, so the mockup moved it one band
   down instead. The rule and spacing it brings are cancelled here rather
   than by editing the shipped rule. */
.page-template-page-weftec-guide .ve-meta-bar {
  padding: 10px 0 12px;
  background: var(--ve-grey-bg);
  border-bottom: 1px solid var(--ve-grey-light);
}
.page-template-page-weftec-guide .ve-meta-bar .ve-tm-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.page-template-page-weftec-guide .ve-meta-bar .ve-tm-doc-meta {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Problem lanes — separator rhythm inside one section. */
.page-template-page-weftec-guide .ve-lane {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--ve-rule);
}
.page-template-page-weftec-guide .ve-lane:first-of-type {
  margin-top: 24px;
  padding-top: 0;
  border-top: none;
}
.page-template-page-weftec-guide .ve-lane-framing {
  max-width: 760px;
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.7;
}
.page-template-page-weftec-guide .ve-lane-tag {
  margin-bottom: 6px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ve-grey-mid);
}

/* Prose odds and ends. */
.page-template-page-weftec-guide .ve-lede {
  max-width: 760px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ve-grey-dark);
}
.page-template-page-weftec-guide .ve-inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
/* Salient's `ul li { list-style: disc }` re-injects markers on these <li>s
   despite list-style:none on the <ul>, and `.ve-tm-doc-body li::marker` then
   tints them orange — the same trap already documented for the downloads list
   and the tech-memo TOC. Nuke on the <li>, body-class-scoped. */
.page-template-page-weftec-guide .ve-inline-links li,
.page-template-page-weftec-guide .ve-inline-links li::before,
.page-template-page-weftec-guide .ve-inline-links li::marker {
  list-style: none;
  list-style-type: none;
  content: none;
  margin-bottom: 0;
}
/* LANE INDEX — the same .ve-inline-links component, stacked instead of
   inline. Scoped by section id, so no new class name is introduced. */
.page-template-page-weftec-guide #lane-index .ve-inline-links {
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  font-size: 16px;
}
.page-template-page-weftec-guide #lane-index p {
  margin: 0;
}

/* Half the shipped 72px band padding on these three. At-a-Glance and the lane
   index are short orientation blocks rather than content sections, and the
   engineer lane is a single callout — 72px above and below each reads as a
   hole. Every other section keeps the shipped rhythm. */
.page-template-page-weftec-guide #at-a-glance,
.page-template-page-weftec-guide #lane-index,
.page-template-page-weftec-guide #engineer-lane {
  padding-top: 36px;
  padding-bottom: 36px;
}
.page-template-page-weftec-guide #what-to-see {
  padding-top: 40px;
}

/* One wrapper that needs the full column width — same .ve-tm-doc-body
   component, 760px cap relaxed on this modifier only. */
.page-template-page-weftec-guide .ve-tm-doc-body--wide {
  max-width: none;
}

/* Closing CTA band action row, on the orange band. */
.page-template-page-weftec-guide .ve-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.page-template-page-weftec-guide .ve-cta-actions .ve-cs-btn-secondary {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--ve-white);
}
.page-template-page-weftec-guide .ve-cta-actions .ve-cs-btn-secondary:hover {
  background: var(--ve-white);
  color: var(--ve-orange);
}
.page-template-page-weftec-guide .ve-cta-tel {
  display: block;
  margin-top: 18px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}
.page-template-page-weftec-guide .ve-cta-tel a {
  color: var(--ve-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

/* Form field helpers for HAND-ROLLED markup only.

   The real form on this template is a CF7 shortcode, and the shipped
   CF7 styling (`.page-template-page-contact .wpcf7-form …`, ~3046–3160,
   plus one responsive override in the ≤768px block) HAS been extended
   to `.page-template-page-weftec-guide` — 15 rules, 27 selectors — so
   the inputs, select, textarea, submit, spinner and the reCAPTCHA
   disclosure line all render exactly as they do on /contact/.

   None of those CF7 rules position themselves relative to the contact
   page's form-first card order: the only offsets they set are
   `margin-top: 14px` on the submit and `8px` on the spinner, both
   intra-form. So the inverted card stack on this template (reps above,
   form below) does not fight them.

   The .ve-field / .ve-radio-set / .ve-req rules below cover only
   non-CF7 markup, if the template ever hand-rolls a field. */
.page-template-page-weftec-guide .ve-field {
  margin-bottom: 16px;
}
.page-template-page-weftec-guide .ve-field label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ve-grey-mid);
}
.page-template-page-weftec-guide .ve-field input[type="text"],
.page-template-page-weftec-guide .ve-field input[type="email"],
.page-template-page-weftec-guide .ve-field input[type="tel"],
.page-template-page-weftec-guide .ve-field textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ve-grey-dark);
  background: var(--ve-white);
  border: 1px solid var(--ve-grey-lighter);
  border-radius: var(--ve-detail-radius);
}
.page-template-page-weftec-guide .ve-field input:focus,
.page-template-page-weftec-guide .ve-field textarea:focus {
  outline: 2px solid var(--ve-sky);
  outline-offset: 1px;
  border-color: var(--ve-sky);
}
.page-template-page-weftec-guide .ve-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.page-template-page-weftec-guide .ve-radio-set {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 0 2px;
}
.page-template-page-weftec-guide .ve-radio-set label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ve-grey-dark);
}
.page-template-page-weftec-guide .ve-req {
  color: var(--ve-orange);
}

/* CF7 markup inside those hand-rolled .ve-field wrappers.

   The meeting form is authored in the CF7 editor using the .ve-field /
   .ve-field-row / .ve-radio-set markup above, so it renders with the visible
   uppercase labels the mockup shows rather than the placeholder-label
   treatment /contact/ uses. Two adaptations are needed, because CF7 wraps
   every control in markup the shipped rules do not anticipate:

   1. CF7 emits <span class="wpcf7-form-control-wrap"> around each control.
      A span is inline, so `width: 100%` on the input inside it has no
      reliable box to resolve against. Making the wrap a block restores it.
   2. CF7 emits its radio set as nested spans, so .ve-radio-set's flex row
      lands on a single child and the options stack instead of sitting in a
      row. The flex has to move down one level, onto .wpcf7-radio.

   No new class names — these only bind shipped classes to CF7's own markup.
   --------------------------------------------------------------------- */
.page-template-page-weftec-guide .ve-field .wpcf7-form-control-wrap {
  display: block;
}
.page-template-page-weftec-guide .ve-radio-set .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.page-template-page-weftec-guide .ve-radio-set .wpcf7-list-item {
  margin: 0;
}

/* ---------------------------------------------------------------------
   HERO — scoped overrides.
   The shipped .ve-hero is sized for a short headline and nothing but a
   sub. This hero also carries the status strip and an action row, and
   its H1 is a 55-character sentence, so the padding and the H1 clamp are
   stepped down and the sub is allowed to run wider. Shipped values are
   left untouched; these only apply under this body class.
   --------------------------------------------------------------------- */
.page-template-page-weftec-guide .ve-hero {
  padding: 100px 32px 96px;
}
.page-template-page-weftec-guide .ve-hero h1 {
  font-size: clamp(2.4rem, 7vw, 4.4rem);
}
.page-template-page-weftec-guide .ve-hero-sub {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.7);
}
/* .ve-cs-btn-primary ships with a NAVY background (6180). On the navy
   hero that reads as a flat block with no edge, so the hero copy of the
   button takes the orange treatment. Inside .ve-cs-cta-band the shipped
   navy is correct against orange and is left alone. */
.page-template-page-weftec-guide .ve-hero .ve-cs-btn-primary {
  background: var(--ve-orange);
}
.page-template-page-weftec-guide .ve-hero .ve-cs-btn-primary:hover {
  background: var(--ve-orange-light);
}

@media (max-width: 768px) {
  .page-template-page-weftec-guide .ve-hero {
    padding: 80px 24px 72px;
  }
}
@media (max-width: 480px) {
  .page-template-page-weftec-guide .ve-hero-actions,
  .page-template-page-weftec-guide .ve-cta-actions {
    flex-direction: column;
  }
  .page-template-page-weftec-guide .ve-hero-actions > *,
  .page-template-page-weftec-guide .ve-cta-actions > * {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .page-template-page-weftec-guide .ve-field-row {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   CARD STACK — scoped overrides. THIS IS THE ONE TRAP ON THIS TEMPLATE.

   The rep/form card family ships for page-contact.php, where the FORM
   card comes FIRST and deliberately floats UP over the hero:
     .ve-card-form { margin-top: -88px; border-radius: 28px 28px 0 0;
                     box-shadow: 0 -16px 64px …; }   (style.css:2915)
   …and the REPS card follows it with margin-top: 56px.

   This template inverts the order — REPS on top, FORM below — and puts
   the pair inside a .mfr-detail-section--alt band with NO hero directly
   above it. Carrying the negative margin across would pull the card up
   into the preceding section. So the weftec scope is added to those
   selector lists (for the typography and padding) and then the margin
   is neutralised here, and the radii/shadows are flipped to match the
   new stacking order.

   Every breakpoint that sets a negative margin-top on .ve-card-form:
     base   -88px  (2915)  -> zeroed below
     <=768  -56px  (3325)  -> zeroed below
     <=991  -48px  (3842)  -- .post-type-archive-manufacturer ONLY —
     <=575  -36px  (4000)  -- never matches this body class, nothing to do.
   --------------------------------------------------------------------- */
.page-template-page-weftec-guide .ve-card-reps {
  margin-top: 0;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 2px 24px rgba(12, 35, 64, 0.07);
}
.page-template-page-weftec-guide .ve-card-form {
  margin-top: 0;
  border-radius: 0 0 28px 28px;
  border-top: 1px solid var(--ve-rule);
  box-shadow: 0 12px 40px rgba(12, 35, 64, 0.07);
}
@media (max-width: 768px) {
  .page-template-page-weftec-guide .ve-card-reps {
    margin-top: 0;
    border-radius: 16px 16px 0 0;
  }
  .page-template-page-weftec-guide .ve-card-form {
    margin-top: 0;
    border-radius: 0 0 16px 16px;
  }
}

/* ---------------------------------------------------------------------
   REP DIRECTORY — one defensive rule at phone width.

   .ve-contact-line is a flex row and .ve-contact-tag is flex-shrink: 0,
   so the value (a rep email) is the only child that can give. Flex
   children default to min-width: auto, which refuses to shrink below
   the content's intrinsic size — and an email address is a single
   unbreakable token. At 375px the reps card gives 327px of content
   width, 308px of it to the value, which fits an email up to roughly 46
   characters; anything longer would push the page into horizontal
   scroll rather than wrap.

   Rep addresses come from the ve_rep_directory ACF options page and are
   not visible from here, so this is insurance, not a fix for a known
   overflow. Scoped to this template; the contact page is untouched.
   --------------------------------------------------------------------- */
.page-template-page-weftec-guide .ve-contact-line {
  min-width: 0;
}
.page-template-page-weftec-guide .ve-contact-line a {
  min-width: 0;
  overflow-wrap: anywhere;
}