/* ==========================================================================
   Level 6 (Kadence Child) — main.css
   Self-contained stylesheet: @font-face, design tokens, all section styles.
   No external font dependencies. Relative paths resolve from assets/css/.
   ========================================================================== */

/* ---------- FONTS ----------
   Fraunces and Inter are loaded via Google Fonts CSS2 in functions.php so the
   italics render with the canonical static letterforms used in the design
   mockup. Self-hosted WOFF2 files were removed because the variable Italic
   build uses different defaults than the static italic Google Fonts serves. */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Brand green — Level 6 logo green. Single value, no variants. */
  --green: #3C9F6B;
  --green-glow: rgba(60, 159, 107, .18);

  /* 5-color locked palette (lightest → darkest) */
  --c1: #f2f0ec;   /* warm cream       — section bg, scrolled nav */
  --c2: #d7d5d1;   /* warm grey        — Elite card, tint blocks */
  --c3: #b0aeaa;   /* mid grey         — borders, muted text on dark */
  --c4: #6f6f71;   /* slate            — proof + final CTA bg */
  --c5: #2f3136;   /* charcoal         — logo bar, footer */

  /* Semantic aliases */
  --slate:       var(--c4);
  --slate-deep:  var(--c5);
  --slate-soft:  var(--c3);
  --paper-warm:  var(--c1);
  --paper-elite: var(--c2);

  /* Ink scale */
  --ink:      #0F1820;
  --ink-soft: #2A3441;
  --muted:    #4A5664;
  --line:     #E4E0D6;
  --paper:    #FBFAF6;
  --white:    #FFFFFF;

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Layout */
  --max: 1280px;
  --gut: clamp(20px, 4vw, 56px);
  --radius: 8px;
}

/* ---------- RESET & BASE ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------- KADENCE/ELEMENTOR OVERRIDES (homepage only) ----------
   On the homepage, Kadence's content.min.css and Elementor's elementor-kit-4
   stylesheet target h1/h2/h3/p/a with .elementor-kit-4 prefixed selectors
   that beat our class-only selectors. Re-establish our intent at higher
   specificity by scoping under .front-page-custom (body class).
   ============================================================= */
body.front-page-custom h1,
body.front-page-custom h2,
body.front-page-custom h3,
body.front-page-custom h4,
body.front-page-custom h5,
body.front-page-custom h6,
body.front-page-custom .hero-headline,
body.front-page-custom .section-title {
  font-family: var(--font-display) !important;
  color: inherit;
  font-weight: 400;
  letter-spacing: -.02em;
}
body.front-page-custom p,
body.front-page-custom li,
body.front-page-custom span:not(.check):not(.l6-mark *),
body.front-page-custom button,
body.front-page-custom input,
body.front-page-custom label,
body.front-page-custom a {
  font-family: var(--font-body) !important;
}
body.front-page-custom a {
  color: inherit;
  text-decoration: none;
}
body.front-page-custom .hero-headline,
body.front-page-custom .l6-hero h1,
body.front-page-custom .l6-hero .hero-headline {
  color: #fff !important;
  font-family: var(--font-display) !important;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
body.front-page-custom .hero-headline em,
body.front-page-custom .l6-hero h1 em {
  color: #fff !important;
  font-style: italic !important;
  font-family: var(--font-display) !important;
  text-shadow: 0 2px 24px rgba(0,0,0,.6), 0 0 12px rgba(0,0,0,.4);
}
body.front-page-custom .stat-num,
body.front-page-custom .stat-value,
body.front-page-custom .l6-stats .num {
  font-family: var(--font-display) !important;
  color: #fff;
}
body.front-page-custom .l6-stats .label {
  color: rgba(255,255,255,.78);
}
/* Override Kadence's button/link colors that hijack "Learn more" */
body.front-page-custom .cta-soft,
body.front-page-custom .l6-hero .cta-soft,
body.front-page-custom a.cta-soft {
  background: #fff !important;
  color: var(--ink) !important;
  border: none !important;
}
body.front-page-custom .cta-soft:hover {
  background: #fff !important;
  color: var(--ink) !important;
}
body.front-page-custom .cta-text,
body.front-page-custom .l6-hero .cta-text {
  color: rgba(255,255,255,.9) !important;
}
/* Hero bullets */
body.front-page-custom .hero-bullets li,
body.front-page-custom .l6-hero .hero-bullets li {
  color: rgba(255,255,255,.96) !important;
}
body.front-page-custom .hero-bullets .check {
  background: var(--green) !important;
  color: #fff !important;
  border-radius: 50% !important;
}
/* Kadence's content-style-boxed wraps content; ensure full-bleed sections work */
body.front-page-custom .content-container,
body.front-page-custom .site-content,
body.front-page-custom main {
  max-width: none;
  padding: 0;
  margin: 0;
  background: transparent;
}
body.front-page-custom .entry-content {
  max-width: none;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

/* Override Kadence body defaults on the homepage */
.front-page-custom {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.front-page-custom img {
  max-width: 100%;
  display: block;
}

.front-page-custom a {
  color: inherit;
  text-decoration: none;
}

.front-page-custom button {
  font: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}

/* Utility wrapper */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* ---------- STICKY NAV ---------- */
.l6-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease, padding .3s ease;
}

/* Scrolled state: warm-cream backdrop */
.l6-nav.is-scrolled {
  background: rgba(242, 240, 236, .94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: none;
  padding: 12px 0;
}

/* Logo word fill transitions */
.l6-nav .l6-logo .l6-mark { fill: var(--green); }
.l6-nav .l6-logo .l6-word { fill: #FFFFFF; transition: fill .3s ease; }
.l6-nav.is-scrolled .l6-logo .l6-word { fill: var(--ink); }

/* Nav link colors */
.l6-nav.is-scrolled .nav-links a { color: var(--ink); }
.l6-nav.is-scrolled .nav-links a:hover { color: var(--green); }
.l6-nav.is-scrolled .nav-cta { background: var(--green); color: white; }
.l6-nav.is-scrolled .nav-cta:hover { background: var(--green); filter: brightness(.92); }

.l6-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.l6-logo {
  height: 32px;
  width: auto;
  display: block;
  transition: opacity .2s ease;
}

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links .nav-item {
  position: relative;
  list-style: none;
}

/* Top-level link */
body.front-page-custom .nav-links > .nav-item > a,
.nav-links > .nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, .96) !important;
  letter-spacing: .01em;
  transition: color .2s;
  padding: 6px 0;
  text-decoration: none;
}

body.front-page-custom .l6-nav.is-scrolled .nav-links > .nav-item > a,
.l6-nav.is-scrolled .nav-links > .nav-item > a { color: var(--ink) !important; }

body.front-page-custom .nav-links > .nav-item > a:hover,
.nav-links > .nav-item > a:hover { color: var(--green) !important; }

.nav-links .caret {
  font-size: 10px;
  line-height: 1;
  margin-top: 1px;
  opacity: .85;
  transition: transform .2s ease;
}

.nav-links .nav-item.has-children:hover > a .caret,
.nav-links .nav-item.has-children:focus-within > a .caret,
.nav-links .nav-item.has-children.is-open > a .caret {
  transform: rotate(180deg);
}

/* Dropdown panel */
.nav-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .06);
  padding: 10px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 200;
}

/* Bridge so cursor can move from trigger to panel without closing */
.nav-sub::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}

.nav-links .nav-item.has-children:hover > .nav-sub,
.nav-links .nav-item.has-children:focus-within > .nav-sub,
.nav-links .nav-item.has-children.is-open > .nav-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(4px);
}

.nav-sub li { list-style: none; margin: 0; }
.nav-sub a {
  display: block;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink) !important;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav-sub a:hover,
.nav-sub a:focus {
  background: rgba(60, 159, 107, .08);
  color: var(--green) !important;
}

/* CTA */
.nav-cta {
  background: white;
  color: var(--ink);
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s;
  text-decoration: none;
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

/* Burger (mobile) */
.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
  transition: transform .2s, opacity .2s, background .2s;
}
.l6-nav.is-scrolled .nav-burger span { background: var(--ink); }
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- MOBILE NAV ---------- */
@media (max-width: 980px) {
  .nav-burger { display: flex; }
  .l6-nav .wrap { gap: 12px; }
  .nav-cta { display: none; }

  .nav-links {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 24px 80px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 150;
  }
  .nav-links.is-open { transform: translateX(0); }

  .nav-links .nav-item { width: 100%; border-bottom: 1px solid rgba(15,23,42,.06); }
  body.front-page-custom .nav-links > .nav-item > a,
  .nav-links > .nav-item > a {
    color: var(--ink) !important;
    padding: 14px 0;
    width: 100%;
    justify-content: space-between;
    font-size: 17px;
  }
  .nav-sub {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    box-shadow: none;
    background: transparent;
    padding: 0 0 12px 12px;
    margin: 0;
    min-width: 0;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    border-radius: 0;
  }
  .nav-sub::before { display: none; }
  .nav-links .nav-item.is-open > .nav-sub,
  .nav-links .nav-item.has-children:hover > .nav-sub,
  .nav-links .nav-item.has-children:focus-within > .nav-sub {
    display: block;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .nav-sub li { width: 100%; }
  .nav-sub a { white-space: normal; padding: 10px 12px; font-size: 15px; width: 100%; box-sizing: border-box; }

  /* R10-B  Mobile-only "Contact Us" CTA inside the drawer (May 2026)
   * --------------------------------------------------------------
   * The .nav-cta button next to the burger is hidden on mobile
   * (line 400). Without this rule the drawer had no Contact link,
   * which was reported on launch day. Render as a styled green
   * button-style list item at the bottom of the drawer. */
  .nav-links .nav-mobile-cta {
    margin-top: 20px;
    border-bottom: none;
    padding: 0;
  }
  .nav-links .nav-mobile-cta .nav-cta-mobile {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--green);
    color: #FFFFFF !important;
    padding: 14px 16px !important;
    border-radius: 8px;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .01em;
    text-decoration: none;
    transition: filter .15s ease;
    box-shadow: 0 6px 16px -8px rgba(60,159,107,.55);
  }
  .nav-links .nav-mobile-cta .nav-cta-mobile:hover,
  .nav-links .nav-mobile-cta .nav-cta-mobile:focus {
    filter: brightness(.94);
    color: #FFFFFF !important;
  }
}

/* Hide the mobile-drawer Contact CTA on desktop where the regular
 * .nav-cta button is visible. */
@media (min-width: 981px) {
  .nav-links .nav-mobile-cta { display: none; }
}

/* R10-B-fix Override the global mobile .nav-links > .nav-item > a
 * (which forces ink color + left alignment via !important) so the
 * Contact CTA renders as the intended white-on-green pill. Use the
 * same selector chain so we match specificity, plus !important. */
@media (max-width: 980px) {
  body.front-page-custom .nav-links > li.nav-mobile-cta > a.nav-cta-mobile,
  .nav-links > li.nav-mobile-cta > a.nav-cta-mobile {
    color: #FFFFFF !important;
    background: var(--green) !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 14px 16px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    letter-spacing: .01em !important;
    box-shadow: 0 6px 16px -8px rgba(60,159,107,.55) !important;
    border-bottom: 0 !important;
  }
  .nav-links > li.nav-mobile-cta { border-bottom: none !important; }
}

/* ---------- HERO ---------- */
.l6-hero {
  position: relative;
  min-height: 640px;
  height: 100vh;
  max-height: 780px;
  overflow: hidden;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../images/hero.jpg') right 35% center / cover no-repeat;
  background-color: #8C9095;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, rgba(20,30,40,.85) 0%, rgba(20,30,40,.65) 38%, rgba(20,30,40,.25) 65%, rgba(20,30,40,.15) 100%),
    linear-gradient(180deg, rgba(20,30,40,.45) 0%, rgba(20,30,40,.0) 22%, rgba(20,30,40,.0) 60%, rgba(20,30,40,.75) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 144px;
  justify-content: flex-start;
}

.hero-content { max-width: 720px; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
  margin-bottom: 14px;
}

.hero-eyebrow::before {
  content: '';
  width: 32px;
  height: 1.5px;
  background: var(--green);
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: white;
  margin-bottom: 22px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}

.hero-headline em {
  display: block;
  margin-top: .5em;
  font-style: italic;
  color: #FFFFFF;
  font-weight: 400;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6), 0 0 12px rgba(0, 0, 0, .4);
}

/* Hero bullets */
.hero-bullets {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 22px 0;
  max-width: 560px;
}

.hero-bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .96);
  font-size: clamp(15px, 1.18vw, 17px);
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}

.hero-bullets .check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 0 0 2px rgba(60, 159, 107, .25);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.cta-soft {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: white;
  color: var(--ink);
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  transition: transform .2s, box-shadow .2s;
}

.cta-soft:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
}

.cta-soft svg {
  width: 16px;
  height: 16px;
}

.cta-text {
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}

.cta-text:hover {
  color: var(--green);
  border-color: var(--green);
}

/* Hero stats strip */
.hero-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  margin-top: 36px;
  margin-bottom: 28px;
}

.hero-stat {
  padding: 14px 0 14px;
  border-right: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-direction: column;
}

.hero-stat-label { order: 1; margin-bottom: 6px; }
.hero-stat-value { order: 2; margin-bottom: 0 !important; }
.hero-stat:last-child { border-right: 0; }
.hero-stat:not(:first-child) { padding-left: 32px; }

.hero-stat-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1;
  color: white;
  margin-bottom: 4px;
  letter-spacing: -.01em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
}

.hero-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

@media (max-width: 720px) {
  .l6-hero { height: auto; min-height: 0; max-height: none; }
  .hero-inner { padding: 96px 0 28px; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stat {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding: 14px 0 !important;
  }
  .hero-stat:last-child { border-bottom: 0; }
}

/* ---------- LOGO BAR ---------- */
.l6-logobar {
  background: var(--c5);
  color: rgba(255, 255, 255, .78);
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.logobar-wrap {
  display: flex;
  align-items: center;
  gap: 32px;
}

.logobar-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  flex-shrink: 0;
  white-space: nowrap;
}

/* R10-A  Auto-scrolling marquee (May 2026)
 * --------------------------------------------------------------
 * Replaces the static 5-logo strip + R9-E mobile swipe patch with
 * an infinite CSS-only marquee. The PHP template renders the logo
 * set twice in DOM so we can translate -50% for a seamless loop.
 * Pauses on hover. Respects prefers-reduced-motion (fallback: a
 * static, gently scrollable strip).
 * -------------------------------------------------------------- */
.logobar-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  /* gradient edge fade so logos look like they melt into the bg */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.logobar-track-wrap {
  /* Single wrapper holding both .logobar-track copies side-by-side.
   * Animating this wrapper (not the individual tracks) is the canonical
   * seamless-marquee pattern: wrap width = 2x track width, so a
   * translateX(-50%) shift = exactly one track width = identical content
   * back at the start of the visible window. */
  display: flex;
  align-items: center;
  flex-shrink: 0;
  animation: l6-logobar-scroll 60s linear infinite;
  will-change: transform;
}

.logobar-track {
  display: flex;
  align-items: center;
  gap: clamp(36px, 4vw, 64px);
  flex-shrink: 0;
  padding-right: clamp(36px, 4vw, 64px); /* matches gap so two tracks join cleanly */
}

.logobar-marquee:hover .logobar-track-wrap {
  animation-play-state: paused;
}

@keyframes l6-logobar-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.logobar-track img {
  height: clamp(22px, 2.2vw, 30px);
  width: auto;
  max-width: 160px;
  object-fit: contain;
  /* Monochrome light-gray (~#aaa) silhouettes. brightness(0) flattens every pixel to black, invert(1) flips to white, opacity dims to gray. Treats all source colors uniformly — required because the cleaned PNGs have transparent backgrounds with the original brand color preserved (some dark, some light), and a saturation-based filter would render dark logos invisible against the charcoal bg. */
  filter: brightness(0) invert(1);
  opacity: .66;
  transition: opacity .25s;
  flex-shrink: 0;
}

.logobar-track img:hover { opacity: .92; }

/* Compact/circular logos: nudge up height so they read at similar visual weight as wordmarks. */
/* Use src*= selectors (not alt=) so rules apply to BOTH tracks — the aria-hidden duplicate has empty alt. */
.logobar-track img[src*="cummins"] {
  height: clamp(30px, 3vw, 42px);
}

/* Global Furniture Group: near-square logo needs significantly larger height to match the visual mass of the wide wordmarks beside it. */
.logobar-track img[src*="global-furniture"] {
  height: clamp(60px, 6vw, 84px);
  max-width: 200px;
}


/* Reduced motion: stop the animation, allow horizontal scroll instead */
@media (prefers-reduced-motion: reduce) {
  .logobar-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .logobar-marquee::-webkit-scrollbar { display: none; }
  .logobar-track-wrap {
    animation: none;
  }
  /* Hide the duplicate set so screen readers + serial readers don't see double */
  .logobar-track[aria-hidden="true"] { display: none; }
}

/* On narrow viewports speed up slightly so loop feels natural at smaller widths */
@media (max-width: 768px) {
  .logobar-track-wrap { animation-duration: 36s; }
  .logobar-track { gap: 28px; padding-right: 28px; }
}

/* R10-C  Mobile marquee presentation (May 2026)
 * --------------------------------------------------------------
 * On narrow viewports the side-by-side TRUSTED BY label + marquee
 * left only ~250px for logos, and the clamp(22px,2.2vw,30px) height
 * fell back to the 22px floor which read as nearly invisible.
 * Stack the label above the marquee, give it full viewport width,
 * bump the logo height so the strip reads as a real proof element
 * on phones. */
@media (max-width: 720px) {
  .l6-logobar { padding: 22px 0; }
  .logobar-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .logobar-marquee { width: 100%; }
  .logobar-track img { height: 30px; opacity: .78; }
  .logobar-track img[src*="cummins"] { height: 40px; }
  .logobar-track img[src*="global-furniture"] { height: 64px; max-width: 170px; }
  /* Softer edge fade on narrow viewport since label no longer competes for space. */
  .logobar-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
}

/* ---------- SECTION FRAME (shared) ---------- */
.l6-section {
  padding: clamp(64px, 7.5vw, 104px) 0;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
}

.section-eyebrow::before {
  content: '';
  width: 32px;
  height: 1.5px;
  background: var(--green);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 18px;
  max-width: 22ch;
  text-wrap: balance;
}

.section-title em {
  font-style: italic;
  color: var(--green);
}

.section-lede {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--muted);
  max-width: 60ch;
  line-height: 1.6;
  margin-bottom: 56px;
}

.section-head {
  display: flex;
  flex-direction: column;
}

/* ---------- THREE THINGS (story blocks) ---------- */
.l6-three-things {
  background: var(--paper-warm);
  padding-bottom: clamp(40px, 5vw, 64px);
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}

.story-block {
  padding: 44px 32px 40px 0;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.story-block:last-child { border-right: 0; padding-right: 0; }
.story-block:not(:first-child) { padding-left: 32px; }

.story-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.story-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}

.story-h em { font-style: italic; color: var(--green); }

.story-p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
}

@media (max-width: 880px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-block { padding: 32px 0 !important; border-right: 0; }
}

/* ---------- PROGRAMS ---------- */
.l6-programs {
  background: var(--paper);
  padding-bottom: clamp(40px, 5vw, 64px);
}

.programs-head { text-align: center; align-items: center; }
.programs-head .section-title { margin-left: auto; margin-right: auto; }
.programs-head .section-lede { margin-left: auto; margin-right: auto; text-align: center; }

.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.program-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  position: relative;
}

.program-card:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: 0 14px 38px rgba(60, 159, 107, .12);
}

.program-card.featured {
  background: var(--paper-elite);
  border-color: #C9C6C0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
}

.program-card.featured .program-name { color: var(--ink); }
.program-card.featured .program-desc { color: var(--ink-soft); }
.program-card.featured .program-feature { color: var(--ink); border-color: rgba(0, 0, 0, .08); }
.program-card.featured .program-feature.off { color: rgba(0, 0, 0, .35); }
.program-card.featured .program-cta { background: var(--green); color: white; }
.program-card.featured .program-cta:hover { background: var(--green); }

.program-card.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--green);
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(60, 159, 107, .3);
}

.program-card.featured .program-feature.off .check { border-color: rgba(0, 0, 0, .18); }

.program-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -.01em;
}

.program-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 24px;
  min-height: 60px;
}

.program-features {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 24px;
}

.program-feature {
  font-size: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
}

.program-feature:last-child { border-bottom: 0; }

.program-feature .check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(60, 159, 107, .10);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
}

.program-feature.off .check {
  background: transparent;
  border: 1px solid var(--line);
  color: transparent;
}

.program-feature.off {
  color: #B5B5B0;
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, .15);
}

body.front-page-custom .program-cta,
.program-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink) !important;
  color: #ffffff !important;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: background .2s, transform .2s;
  width: 100%;
}

body.front-page-custom .program-cta:hover,
.program-cta:hover { background: var(--green) !important; transform: translateY(-1px); }

body.front-page-custom .program-card.featured .program-cta,
.program-card.featured .program-cta { background: var(--green) !important; color: #ffffff !important; }
body.front-page-custom .program-card.featured .program-cta:hover,
.program-card.featured .program-cta:hover { background: var(--green) !important; }

@media (max-width: 880px) { .programs-grid { grid-template-columns: 1fr; } }

/* ---------- WHAT MAKES US #1 ---------- */
.l6-makes-us {
  background: var(--paper-warm);
}

.l6-makes-us .section-head { text-align: center; align-items: center; }
.l6-makes-us .section-title { margin-left: auto; margin-right: auto; }

.makes-us-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.makes-us-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 14px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.makes-us-card:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 10px 28px rgba(60, 159, 107, .10);
}

.makes-us-icon {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.makes-us-icon svg,
.makes-us-icon img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  display: block;
}

.makes-us-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -.005em;
}

@media (max-width: 1100px) { .makes-us-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .makes-us-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- PROOF: VIDEO + TESTIMONIALS ---------- */
.l6-proof {
  background: var(--slate);
  color: white;
}

.l6-proof .section-eyebrow { color: rgba(255, 255, 255, .85); }
.l6-proof .section-eyebrow::before { background: rgba(255, 255, 255, .55); }
.l6-proof .section-title em { color: white; font-style: italic; }
.l6-proof .section-title { color: white; }
.l6-proof .section-lede { color: rgba(255, 255, 255, .92); }

.proof-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
  transition: transform .3s;
  display: block;
}

.video-frame:hover { transform: scale(1.005); }

.video-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: opacity .3s;
}

.video-frame:hover img { opacity: 1; }

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  transition: transform .25s, background .25s;
}

.video-frame:hover .video-play {
  transform: translate(-50%, -50%) scale(1.06);
  background: var(--green);
}

.video-frame:hover .video-play svg { color: white; }

.video-play svg {
  width: 32px;
  height: 32px;
  color: var(--ink);
  margin-left: 4px;
  transition: color .25s;
}

.video-caption {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, .78);
  letter-spacing: .04em;
}

/* Testimonial carousel */
.tcarousel {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.tslide {
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: opacity .5s ease;
  min-height: 180px;
}

.tslide.is-fading { opacity: 0; }

.tquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  color: white;
  text-wrap: balance;
  margin: 0;
}

.tquote::before {
  content: '\201C';
  font-size: 1em;
  color: rgba(255, 255, 255, .55);
  margin-right: .05em;
}

.tquote::after {
  content: '\201D';
  font-size: 1em;
  color: rgba(255, 255, 255, .55);
  margin-left: .05em;
}

.tmeta {
  text-align: right;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.tattrib {
  font-size: 15px;
  font-weight: 500;
  color: white;
  letter-spacing: .01em;
}

.tattrib .tdash { color: rgba(255, 255, 255, .78); margin-right: 6px; }
.tattrib .tname { font-weight: 600; }
.tattrib .tcompany { color: rgba(255, 255, 255, .78); font-weight: 400; }
.tattrib .tcompany::before { content: ', '; color: rgba(255, 255, 255, .78); }

.tcontrols {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 6px;
}

.tbtn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}

.tbtn:hover { background: var(--green); border-color: var(--green); color: white; transform: translateY(-1px); }
.tbtn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
body.front-page-custom .tbtn svg { width: 22px !important; height: 22px !important; stroke-width: 2.75; flex-shrink: 0; }

.tindex {
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 880px) {
  .proof-grid { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.l6-faq {
  background: var(--paper-warm);
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.faq-list { display: flex; flex-direction: column; }

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}

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

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  gap: 24px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  color: var(--ink);
  transition: color .2s;
}

.faq-q:hover { color: var(--green); }

.faq-toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(60, 159, 107, .10);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 600;
  transition: transform .25s, background .25s;
}

.faq-item[open] .faq-toggle {
  background: var(--green);
  color: white;
  transform: rotate(45deg);
}

.faq-a {
  margin-top: 14px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 60ch;
}

.faq-a a { color: var(--green); border-bottom: 1px solid var(--green); }

.l6-faq summary { list-style: none; cursor: pointer; }
.l6-faq summary::-webkit-details-marker { display: none; }

@media (max-width: 880px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------- FINAL CTA ---------- */
.l6-final {
  background: var(--slate);
  color: white;
  position: relative;
  overflow: hidden;
}

.l6-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 400px at 80% 50%, rgba(60, 159, 107, .18), transparent 70%);
  pointer-events: none;
}

.final-wrap {
  position: relative;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.final-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: white;
  margin-bottom: 20px;
  text-wrap: balance;
}

.final-h em { font-style: italic; color: white; opacity: .92; }

.final-p {
  color: rgba(255, 255, 255, .92);
  font-size: 17px;
  margin-bottom: 36px;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

.final-form {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 6px;
  transition: border-color .2s, box-shadow .2s;
}

.final-form:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 4px var(--green-glow);
}

.final-form input {
  flex: 1;
  background: transparent;
  border: 0;
  color: white;
  padding: 12px 18px;
  font-size: 15px;
  outline: none;
  font-family: var(--font-body);
}

.final-form input::placeholder { color: rgba(255, 255, 255, .72); }

.final-form button {
  background: var(--green);
  color: white;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: background .2s, transform .2s;
  font-family: var(--font-body);
}

.final-form button:hover { background: var(--green); transform: translateY(-1px); }

.final-meta {
  margin-top: 22px;
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- FOOTER ---------- */
.l6-footer {
  background: var(--c5);
  color: rgba(255, 255, 255, .78);
  padding: 56px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.foot-logo .l6-logo { height: 32px; width: auto; display: block; }
.foot-logo .l6-logo .l6-mark { fill: var(--green); }
.foot-logo .l6-logo .l6-word { fill: #FFFFFF; opacity: .92; }

.foot-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.foot-links a { font-size: 14px; transition: color .2s; }
.foot-links a:hover { color: white; }

/* R9-G — SourceForge awards rail in footer (left of nav) */
.foot-awards {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.foot-awards .sf-root { width: 90px !important; flex: 0 0 90px; line-height: 0; }
.foot-awards .sf-root img { max-width: 100%; height: auto; display: block; }
.foot-awards .sf-root a { color: transparent; font-size: 0; }
@media (max-width: 760px) {
  .foot-awards { gap: 12px; justify-content: center; width: 100%; }
  .foot-awards .sf-root { width: 78px !important; flex: 0 0 78px; }
}

.foot-copy {
  width: 100%;
  padding-top: 32px;
  margin-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 13px;
  color: rgba(255, 255, 255, .4);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- SCROLL REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s ease, transform .8s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   SECTION LANDING
   All styles scoped under .section-landing-page body class so they stay
   isolated from the homepage and any Kadence/Elementor defaults.
   Design tokens match the homepage: --green, --c1/c5, Fraunces + Inter.
   ========================================================================== */

/* ---- Base resets (mirror front-page-custom) ---- */
body.section-landing-page h1,
body.section-landing-page h2,
body.section-landing-page h3,
body.section-landing-page h4,
body.section-landing-page h5,
body.section-landing-page h6 {
  font-family: var(--font-display) !important;
  color: inherit;
  font-weight: 400;
  letter-spacing: -.02em;
}

body.section-landing-page p,
body.section-landing-page li,
body.section-landing-page span,
body.section-landing-page button,
body.section-landing-page input,
body.section-landing-page label,
body.section-landing-page address,
body.section-landing-page a {
  font-family: var(--font-body) !important;
}

body.section-landing-page a {
  color: inherit;
  text-decoration: none;
}

body.section-landing-page .content-container,
body.section-landing-page .site-content,
body.section-landing-page main {
  max-width: none;
  padding: 0;
  margin: 0;
  background: transparent;
}

body.section-landing-page .entry-content {
  max-width: none;
  margin: 0;
}

body.section-landing-page #masthead,
body.section-landing-page .site-header,
body.section-landing-page #colophon,
body.section-landing-page .site-footer {
  display: none !important;
}

body.section-landing-page #content,
body.section-landing-page #primary,
body.section-landing-page .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.section-landing-page {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.section-landing-page img { max-width: 100%; display: block; }

/* ---- SECTION LANDING HERO ---- */
/*
 * Smaller than .l6-hero. No background image.
 * Solid dark (slate or charcoal) or warm cream bg.
 * Tight padding — lets content breathe without the viewport-height drama.
 */
.section-landing-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 360px;
}

/* Background variants — fallback colors before image loads */
.section-landing-hero.slhero--slate    { background: var(--c4); color: white; }
.section-landing-hero.slhero--charcoal { background: var(--c5); color: white; }
.section-landing-hero.slhero--cream    { background: var(--c1); color: var(--ink); }

/* Hero image layer — tinted backdrop, not loud */
.slhero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
  opacity: .55;
}

/* Image-tone overlay — dark variants get a slate wash, cream gets a soft cream wash */
.section-landing-hero.slhero--slate::before,
.section-landing-hero.slhero--charcoal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(15,24,32,.78) 0%, rgba(15,24,32,.55) 55%, rgba(15,24,32,.30) 100%),
    radial-gradient(900px 500px at 110% 60%, rgba(60,159,107,.18), transparent 65%);
  pointer-events: none;
}

.section-landing-hero.slhero--cream::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(247,243,236,.82) 0%, rgba(247,243,236,.62) 55%, rgba(247,243,236,.38) 100%);
  pointer-events: none;
}

/* Cream variant — image gets slightly lower opacity so the title stays legible */
.section-landing-hero.slhero--cream .slhero-bg { opacity: .42; }

.slhero-inner {
  position: relative;
  z-index: 3;
  padding-top: clamp(96px, 11vw, 136px);  /* nav clearance + breathing room */
  padding-bottom: clamp(56px, 7vw, 88px);
}

.slhero-content { max-width: 760px; }

.slhero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin-top: 14px;
  margin-bottom: 20px;
}

/* Dark bg variants: white title */
.slhero--slate    .slhero-title,
.slhero--charcoal .slhero-title {
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}

/* Cream bg variant: ink title */
.slhero--cream .slhero-title { color: var(--ink); }

/* Italic accent — green on light, white-italic on dark */
.slhero--cream    .slhero-title em { font-style: italic; color: var(--green); }
.slhero--slate    .slhero-title em,
.slhero--charcoal .slhero-title em {
  font-style: italic;
  color: #fff;
  opacity: .9;
}

.slhero-subtitle {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  max-width: 62ch;
  margin-bottom: 32px;
}

.slhero--slate    .slhero-subtitle,
.slhero--charcoal .slhero-subtitle { color: rgba(255,255,255,.86); }
.slhero--cream    .slhero-subtitle { color: var(--muted); }

.slhero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Primary CTA — green filled pill */
.slhero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green);
  color: #fff;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  font-family: var(--font-body) !important;
  transition: transform .2s, box-shadow .2s, filter .2s;
}

.slhero-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(60,159,107,.35);
  filter: brightness(1.06);
  color: #fff;
}

.slhero-cta-primary svg { width: 16px; height: 16px; }

/* Ghost/text CTA */
.slhero--slate    .slhero-cta-ghost,
.slhero--charcoal .slhero-cta-ghost {
  color: rgba(255,255,255,.85);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body) !important;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}

.slhero--cream .slhero-cta-ghost {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body) !important;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}

.slhero-cta-ghost:hover {
  color: var(--green) !important;
  border-color: var(--green) !important;
}

/* Eyebrow inside hero inherits section-eyebrow but flips colors on dark */
.slhero--slate    .section-eyebrow,
.slhero--charcoal .section-eyebrow {
  color: rgba(255,255,255,.78);
}

.slhero--slate    .section-eyebrow::before,
.slhero--charcoal .section-eyebrow::before {
  background: rgba(255,255,255,.5);
}

@media (max-width: 720px) {
  .slhero-inner { padding-top: 88px; padding-bottom: 44px; }
}

/* ---- CARD GRID ---- */
/*
 * 3-column responsive grid.
 * Cards: white surface, soft border, hover lift.
 * Works for Products, Solutions, Case Studies, Pricing.
 */
.l6-card-grid { /* inherits l6-section padding */ }

.l6-card-grid--cream { background: var(--paper-warm); }
.l6-card-grid--white { background: var(--paper); }
.l6-card-grid--slate { background: var(--slate); color: white; }

.card-grid-head { margin-bottom: clamp(36px, 4.5vw, 56px); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.card-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1060px) {
  .card-grid,
  .card-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .card-grid,
  .card-grid--cols-2,
  .card-grid--cols-4 { grid-template-columns: 1fr; }
}

.card-grid-item {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.card-grid-item:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: 0 14px 38px rgba(60,159,107,.12);
}

/* Card image (optional top image area) */
.card-grid-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c2);
}

.card-grid-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}

.card-grid-item:hover .card-grid-image img { transform: scale(1.03); }

/* Card icon (svg icon in pill) */
.card-grid-icon {
  padding: 28px 28px 0;
  color: var(--green);
}

.card-grid-icon svg,
.card-grid-icon img {
  width: 44px;
  height: 44px;
  display: block;
}

/* Card body — text + link */
.card-grid-body {
  padding: 20px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

/* when there's no image or icon, give top padding */
.card-grid-item:not(:has(.card-grid-image)):not(:has(.card-grid-icon)) .card-grid-body {
  padding-top: 28px;
}

.card-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  font-family: var(--font-body) !important;
}

.card-title {
  font-family: var(--font-display) !important;
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}

.card-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
  margin: 0;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  font-family: var(--font-body) !important;
  margin-top: 8px;
  transition: gap .2s, color .2s;
}

.card-link:hover { gap: 12px; color: var(--green); }

.card-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform .2s;
}

.card-link:hover svg { transform: translateX(3px); }

/* On slate background: card stays dark */
.l6-card-grid--slate .card-grid-item {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
}

.l6-card-grid--slate .card-title { color: white; }
.l6-card-grid--slate .card-desc  { color: rgba(255,255,255,.78); }
.l6-card-grid--slate .card-tag   { color: rgba(255,255,255,.6); }
.l6-card-grid--slate .card-link  { color: #6ecfa1; }

/* ---- PILLARS ---- */
/*
 * 4-column pillar grid (2x2 on tablet, 1-col on mobile).
 * Icon + title + description pattern.
 */
.l6-pillars { /* inherits l6-section padding */ }

.l6-pillars--cream { background: var(--paper-warm); }
.l6-pillars--white { background: var(--paper); }

.pillars-head { margin-bottom: clamp(36px, 4.5vw, 56px); }

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 1060px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .pillars { grid-template-columns: 1fr; }
}

.pillar-item {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.pillar-item:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 10px 28px rgba(60,159,107,.10);
}

.l6-pillars--cream .pillar-item { background: white; }
.l6-pillars--white .pillar-item { background: var(--c1); }

.pillar-icon {
  color: var(--green);
}

.pillar-icon svg,
.pillar-icon img {
  width: 44px;
  height: 44px;
  display: block;
}

.pillar-title {
  font-family: var(--font-display) !important;
  font-weight: 500;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}

.pillar-desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

/* ---- CONTACT LAYOUT ---- */
.l6-contact-form {
  background: var(--paper-warm);
}

.contact-wrap {
  /* wrap is already max-width + padded */
}

.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}

.contact-form-col .section-title {
  margin-bottom: 10px;
}

/* Style Gravity Forms inside our template */
.contact-form-col .gform_wrapper {
  margin-top: 28px;
}

.contact-form-col .gform_wrapper .gform_body .gfield label {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 6px;
  display: block;
  font-family: var(--font-body) !important;
}

.contact-form-col .gform_wrapper input:not([type='submit']),
.contact-form-col .gform_wrapper textarea,
.contact-form-col .gform_wrapper select {
  width: 100%;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 15px;
  font-family: var(--font-body) !important;
  color: var(--ink);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  /* Override Gravity Forms framework: it forces line-height = height via --gf-local-line-height,
   * which combined with our 12px vertical padding pushes the selected text below the visible box.
   * Use a sane line-height + auto height so padding + text fit correctly. */
  line-height: 1.5 !important;
  height: auto !important;
  min-height: 48px;
  box-sizing: border-box;
}

/* Belt-and-suspenders: also reset the GF variable itself for our scoped form. */
.contact-form-col .gform_wrapper {
  --gf-local-line-height: 1.5;
}

.contact-form-col .gform_wrapper input:focus,
.contact-form-col .gform_wrapper textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px var(--green-glow);
}

.contact-form-col .gform_wrapper .gform_footer input[type='submit'],
.contact-form-col .gform_wrapper .gform_button {
  background: var(--green) !important;
  color: white !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer;
  font-family: var(--font-body) !important;
  transition: filter .2s, transform .2s !important;
}

.contact-form-col .gform_wrapper .gform_footer input[type='submit']:hover,
.contact-form-col .gform_wrapper .gform_button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: sticky;
  top: 96px;  /* below fixed nav */
}

.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-address {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.7;
  font-style: normal;
}

.contact-meta {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
}

.contact-trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.contact-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  font-family: var(--font-body) !important;
}

.contact-trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--green);
  flex-shrink: 0;
}

/* ---- BLOG INDEX ---- */
.l6-blog-index {
  background: var(--paper-warm);
}

/* ---- PAGE CONTENT (default fallback) ---- */
.l6-page-content { background: var(--paper); }

.sl-page-entry {
  max-width: 72ch;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.sl-page-entry h2,
.sl-page-entry h3 {
  font-family: var(--font-display) !important;
  font-weight: 400;
  color: var(--ink);
  margin-top: 2em;
  margin-bottom: .5em;
  letter-spacing: -.015em;
}

.sl-page-entry p { margin-bottom: 1.25em; }
.sl-page-entry a  { color: var(--green); border-bottom: 1px solid currentColor; }

/* ---- NAV colors on section landing (dark hero, starts scrolled-ish feel) ---- */
/*
 * The nav starts transparent-ish over the dark hero, then goes cream-blurred
 * on scroll via the .is-scrolled class added by main.js.
 * We do not need any new nav rules here — the existing sticky nav rules
 * in main.css already handle both states correctly.
 * We just ensure the nav link color is correct in default state.
 */
body.section-landing-page .l6-nav .l6-logo .l6-word { fill: #FFFFFF; }
body.section-landing-page .l6-nav .nav-links > .nav-item > a { color: rgba(255,255,255,.96) !important; }
body.section-landing-page .l6-nav .nav-cta          { background: white; color: var(--ink); }

/* Dropdown panel links must always be ink, regardless of host page palette */
body.section-landing-page .l6-nav .nav-sub a { color: var(--ink) !important; }
body.section-landing-page .l6-nav .nav-sub a:hover { color: var(--green) !important; }

/* on cream hero pages, start with ink nav */
body.section-landing-page.slhero-cream-page .l6-nav .l6-logo .l6-word { fill: var(--ink); }
body.section-landing-page.slhero-cream-page .l6-nav .nav-links > .nav-item > a { color: var(--ink) !important; }

/* R10-E  Mobile drawer text override for section-landing pages (May 11, 2026)
 * The rules above force white nav-link text for the dark hero. On mobile the
 * drawer has a WHITE background, so the white text becomes invisible. Restore
 * ink color inside the drawer at narrow viewports. Same fix applies to
 * detail-page (Clients, etc.) which also forces white text in some states. */
@media (max-width: 980px) {
  body.section-landing-page .l6-nav .nav-links > .nav-item > a,
  body.detail-page .l6-nav .nav-links > .nav-item > a,
  body.l6-blog .l6-nav .nav-links > .nav-item > a,
  body.single-post .l6-nav .nav-links > .nav-item > a {
    color: var(--ink) !important;
  }
  body.section-landing-page .l6-nav .nav-burger span,
  body.detail-page .l6-nav .nav-burger span {
    /* keep burger lines visible against page background */
  }
}

/* ---------- KADENCE OVERRIDES — front page only ---------- */
/*
 * These rules suppress Kadence's default body padding, header placeholder,
 * and entry content wrappers when we are rendering the custom front page.
 * Scope with .front-page-custom to avoid bleeding into other page templates.
 */
.front-page-custom #masthead,
.front-page-custom .site-header,
.front-page-custom #colophon,
.front-page-custom .site-footer {
  display: none !important;
}

/* Remove default top padding Kadence adds for the sticky header */
.front-page-custom #content,
.front-page-custom #primary,
.front-page-custom .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/* ==========================================================================
   DETAIL PAGE
   Long-form Product & Solution detail pages (/checks/, /sales-incentive-programs/, etc.)
   Body class: detail-page
   ========================================================================== */

/* ---------- KADENCE OVERRIDES — detail page ----------
   Mirror the front-page-custom overrides so Kadence's default masthead,
   entry padding, and stylesheet conflicts don't bleed in.
   ------------------------------------------------------------------ */
body.detail-page #masthead,
body.detail-page .site-header,
body.detail-page #colophon,
body.detail-page .site-footer {
  display: none !important;
}

body.detail-page #content,
body.detail-page #primary,
body.detail-page .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
  max-width: none !important;
}

body.detail-page .content-container,
body.detail-page .site-content,
body.detail-page main {
  max-width: none;
  padding: 0;
  margin: 0;
  background: transparent;
}

/* Base typography — scoped to detail-page body class */
body.detail-page {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.detail-page h1,
body.detail-page h2,
body.detail-page h3,
body.detail-page h4,
body.detail-page h5,
body.detail-page h6 {
  font-family: var(--font-display) !important;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -.02em;
}

body.detail-page p,
body.detail-page li,
body.detail-page a {
  font-family: var(--font-body) !important;
}

body.detail-page a {
  color: var(--green);
  text-decoration: none;
  transition: color .2s;
}

body.detail-page a:hover {
  color: var(--ink);
}

body.detail-page img {
  max-width: 100%;
  display: block;
}

/* ---------- DETAIL HERO ---------- */
.detail-hero {
  background: var(--ink-soft);
  background-color: var(--ink);
  color: white;
  padding: 120px 0 56px; /* top: clears the 68px fixed nav + breathing room */
  position: relative;
  overflow: hidden;
}

/* Hero image layer — tinted backdrop */
.detail-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
  opacity: .42;
}

/* Dark wash + green accent glow — overlays the image */
.detail-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(15,24,32,.86) 0%, rgba(40,55,72,.70) 60%, rgba(26,42,56,.78) 100%),
    radial-gradient(circle 480px at -80px calc(100% + 60px), rgba(60,159,107,.22) 0%, transparent 70%);
  pointer-events: none;
}

.detail-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 840px;
}

/* ---------- DETAIL BREADCRUMBS ---------- */
.detail-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  color: rgba(255,255,255,.6);
  flex-wrap: wrap;
}

.detail-breadcrumbs a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .2s;
  font-family: var(--font-body) !important;
}

.detail-breadcrumbs a:hover {
  color: var(--green);
}

.detail-breadcrumbs [aria-current="page"] {
  color: rgba(255,255,255,.9);
}

.detail-bc-sep {
  color: rgba(255,255,255,.3);
  font-size: 11px;
}

/* ---------- DETAIL HERO TITLE ---------- */
.detail-hero-title {
  font-family: var(--font-display) !important;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: white;
  margin-bottom: 18px;
  text-shadow: 0 2px 18px rgba(0,0,0,.3);
}

/* Italic accent: <em> inside the H1 renders in Fraunces italic */
.detail-hero-title em {
  font-style: italic;
  color: white;
  font-weight: 300; /* Fraunces Light Italic for elegance */
}

.detail-hero-sub {
  font-family: var(--font-body) !important;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,.8);
  max-width: 640px;
  margin: 0;
}

@media (max-width: 720px) {
  .detail-hero {
    padding: 96px 0 40px;
  }
  .detail-hero-title {
    font-size: clamp(22px, 5.5vw, 32px);
  }
}

/* ---------- DETAIL LAYOUT (two-column grid) ---------- */
.detail-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
  padding-top: 52px;
  padding-bottom: 80px;
}

@media (max-width: 1024px) {
  .detail-layout {
    grid-template-columns: 200px 1fr;
    gap: 36px;
  }
}

/* On tablet/mobile: collapse sidebar entirely, content goes full-width */
@media (max-width: 820px) {
  .detail-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ---------- DETAIL TOC (sticky left sidebar) ---------- */
.detail-toc {
  position: sticky;
  top: 80px; /* clears fixed nav (68px) + 12px breathing room */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  /* Thin scrollbar on supporting browsers */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.detail-toc::-webkit-scrollbar {
  width: 4px;
}
.detail-toc::-webkit-scrollbar-track {
  background: transparent;
}
.detail-toc::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 2px;
}

.detail-toc-label {
  font-family: var(--font-body) !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.detail-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* TOC anchor links */
.detail-toc a {
  display: block;
  font-family: var(--font-body) !important;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 0 5px 12px;
  border-left: 2px solid transparent;
  transition: color .18s, border-color .18s;
  word-break: break-word;
}

.detail-toc a:hover {
  color: var(--ink);
  border-left-color: var(--line);
}

/* Active section — green accent */
.detail-toc a.is-active {
  color: var(--green);
  font-weight: 600;
  border-left-color: var(--green);
}

/* H3-level sub-items in the TOC get extra indent */
.detail-toc a.toc-h3 {
  font-size: 12px;
  padding-left: 22px;
  color: var(--slate-soft);
}

.detail-toc a.toc-h3:hover {
  color: var(--ink);
}

.detail-toc a.toc-h3.is-active {
  color: var(--green);
  border-left-color: var(--green);
}

/* Hide TOC on mobile — content takes full width */
@media (max-width: 820px) {
  .detail-toc {
    display: none;
  }
}

/* ---------- DETAIL PROSE (right content column) ---------- */
.detail-prose {
  /* Hard cap on prose measure for readability (~75 chars) */
  max-width: 720px;
  min-width: 0; /* prevent grid blowout */
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
}

/* On mobile without sidebar, prose goes edge-to-edge in the wrap */
@media (max-width: 820px) {
  .detail-prose {
    max-width: none;
  }
}

/* -- Headings inside prose -- */
.detail-prose h2 {
  font-family: var(--font-display) !important;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-top: 2.6em;
  margin-bottom: .6em;
  padding-bottom: .4em;
  /* Green underline accent — matches green brand token */
  border-bottom: 2px solid var(--green);
}

/* First H2 after hero doesn't need a large top gap */
.detail-prose > h2:first-child,
.detail-prose > *:first-child > h2:first-child {
  margin-top: 0;
}

.detail-prose h3 {
  font-family: var(--font-display) !important;
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink-soft);
  margin-top: 2em;
  margin-bottom: .45em;
}

.detail-prose h4 {
  font-family: var(--font-body) !important;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1.8em;
  margin-bottom: .4em;
}

.detail-prose p {
  font-family: var(--font-body) !important;
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 1.2em;
  color: var(--ink);
}

/* -- Lists -- */
.detail-prose ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4em 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.detail-prose ul li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-body) !important;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
}

/* Custom green checkmark bullet */
.detail-prose ul li::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  margin-top: .52em; /* align with cap height */
}

.detail-prose ol {
  padding-left: 1.6em;
  margin: 0 0 1.4em 0;
}

.detail-prose ol li {
  font-family: var(--font-body) !important;
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: .4em;
  color: var(--ink);
}

/* -- Blockquote / pull-quote (emphasized stats or quotes) -- */
.detail-prose blockquote {
  margin: 2em 0;
  padding: 20px 24px 20px 32px;
  border-left: 4px solid var(--green);
  background: var(--paper-warm);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display) !important;
  font-size: clamp(17px, 1.55vw, 21px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
}

.detail-prose blockquote p {
  font-family: var(--font-display) !important;
  font-size: inherit;
  font-style: italic;
  margin-bottom: 0;
}

/* -- Strong / emphasis -- */
.detail-prose strong {
  font-weight: 700;
  color: var(--ink);
}

.detail-prose em {
  font-style: italic;
  color: var(--ink-soft);
}

/* -- Inline code (edge case) -- */
.detail-prose code {
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: .875em;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

/* -- Links inside prose -- */
.detail-prose a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .18s;
  font-family: inherit !important;
}

.detail-prose a:hover {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
 * BANNER-STYLE H2 (legacy long-sentence headings)
 *
 * Some migrated pages use H2 elements as full-sentence banner copy. The TOC
 * builder tags these with .is-banner. Render them as a green banner block
 * (matches legacy visual treatment) and break them out of the prose flow.
 * -------------------------------------------------------------------------- */
.detail-prose h2.is-banner {
  display: block;
  background: var(--green);
  color: #fff;
  font-family: var(--font-display) !important;
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.35;
  letter-spacing: -.01em;
  border: 0;
  border-radius: var(--radius, 12px);
  padding: 28px 32px;
  margin: 2.4em 0 1.6em;
  /* Break out of the .detail-prose column on wider viewports */
  max-width: none;
}

.detail-prose h2.is-banner::before { content: none; }

/* --------------------------------------------------------------------------
 * INLINE CTA ANCHORS ("Book a Demo", "Get a Demo", links to /contact/)
 *
 * The migrated content has bare anchors like:
 *   <a href="/contact/">Book a Demo</a>
 * Treat any anchor whose href ends with /contact/ or /contact and whose text
 * matches a CTA pattern as a green pill button. Falls back to detect by class
 * "button" / "btn" too. Selectors are scoped to .detail-prose.
 * -------------------------------------------------------------------------- */
.detail-prose a[href$="/contact/"],
.detail-prose a[href$="/contact"],
.detail-prose a.button,
.detail-prose a.btn,
.detail-prose a.elementor-button,
.detail-prose a.wp-block-button__link {
  display: inline-block;
  background: var(--green);
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  margin: 6px 0 14px;
  transition: background .18s, transform .18s, box-shadow .18s;
  box-shadow: 0 1px 0 rgba(15, 24, 32, .04);
}

.detail-prose a[href$="/contact/"]:hover,
.detail-prose a[href$="/contact"]:hover,
.detail-prose a.button:hover,
.detail-prose a.btn:hover,
.detail-prose a.elementor-button:hover,
.detail-prose a.wp-block-button__link:hover {
  background: #2e8758; /* darker green */
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(60, 159, 107, .22);
}

/* If a CTA anchor sits inside a <p>, the <p>'s line-height was making
   the button look squashed. Reset margins on the parent paragraph. */
.detail-prose p:has(> a[href$="/contact/"]:only-child),
.detail-prose p:has(> a.button:only-child) {
  margin-bottom: 1.6em;
}

/* -- HR divider -- */
.detail-prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5em 0;
}

/* -----------------------------------------------------------------------
   IMAGES INSIDE PROSE
   General images: full column width, no radius, no crops, no filters.
   Chart/diagram images: clean white bg, generous vertical margin, zero
   clipping — critical for custom chart renders.
   ----------------------------------------------------------------------- */

/* All images inside prose go full-width by default */
.detail-prose img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0; /* never round image corners in prose */
  border: none;
  filter: none;     /* no forced grayscale, no saturation changes */
  object-fit: unset; /* do NOT crop prose images */
  margin: 1.6em 0;
}

/* Non-chart images may get a light card treatment */
.detail-prose img:not(.chart) {
  border-radius: var(--radius);
}

/* -----------------------------------------------------------------------
   CHART PATTERN — .detail-prose img.chart
                   .detail-prose figure.chart
   Use the class="chart" attribute on <img> or <figure> wrapping a chart
   to opt into the chart-safe treatment:
     - Pure white background (avoids dark-mode or cream bleed)
     - Clean border with no radius
     - No border-radius clipping (critical for charts that extend to edges)
     - No aspect-ratio constraint (charts have intrinsic proportions)
     - Generous top/bottom breathing room
   ----------------------------------------------------------------------- */
.detail-prose img.chart,
.detail-prose figure.chart {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 0;          /* hard zero — no clipping of chart corners */
  padding: 12px;
  margin: 2.4em 0;
  overflow: visible;         /* prevent any internal clip */
  width: 100%;
  max-width: 100%;           /* never exceed prose column */
  height: auto;
  filter: none !important;   /* block any inherited grayscale/saturation */
  object-fit: unset !important;
  aspect-ratio: unset;       /* let the chart define its own ratio */
}

.detail-prose figure.chart img {
  width: 100%;
  height: auto;
  border-radius: 0;
  filter: none !important;
  object-fit: unset !important;
  aspect-ratio: unset;
  margin: 0; /* figure.chart handles the outer margin */
  background: transparent;
  border: none;
  padding: 0;
}

.detail-prose figure.chart figcaption {
  font-family: var(--font-body) !important;
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  text-align: center;
  font-style: italic;
}

/* ---------- CALLOUT BOXES ---------- */
/* 
 * Usage in page content:
 *   <div class="callout-green"> ... </div>
 *   <div class="callout-cream"> ... </div>
 */

/* Shared callout base */
.callout-green,
.callout-cream {
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 2em 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
}

.callout-green *,
.callout-cream * {
  font-family: var(--font-body) !important;
}

.callout-green h2,
.callout-green h3,
.callout-green h4,
.callout-cream h2,
.callout-cream h3,
.callout-cream h4 {
  font-family: var(--font-display) !important;
  font-weight: 400;
  letter-spacing: -.015em;
}

/* Green callout — key benefits, highlight facts */
.callout-green {
  background: rgba(60, 159, 107, .08);
  border: 1px solid rgba(60, 159, 107, .28);
  border-left: 4px solid var(--green);
  color: var(--ink-soft);
}

.callout-green strong {
  color: var(--green);
}

/* Cream callout — neutral highlights, pro tips */
.callout-cream {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-left: 4px solid var(--c3);
  color: var(--ink-soft);
}

/* Callout images are also chart-safe (no radius, no crops) */
.callout-green img,
.callout-cream img {
  border-radius: 0;
  filter: none;
  object-fit: unset;
  aspect-ratio: unset;
  max-width: 100%;
  height: auto;
}

/* ---------- RELATED PAGES SECTION ---------- */
.detail-related {
  background: var(--paper-warm);
  border-top: 1px solid var(--line);
  padding: 72px 0 80px;
}

.detail-related-title {
  font-family: var(--font-display) !important;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 36px;
}

/* ---------- RELATED GRID ---------- */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .related-grid {
    grid-template-columns: 1fr;
  }
}

.related-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.5);
  padding: 24px 24px 20px;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow .22s, transform .22s, border-color .22s;
  font-family: var(--font-body);
}

.related-card:hover {
  box-shadow: 0 8px 32px rgba(15,24,32,.1);
  transform: translateY(-3px);
  border-color: rgba(60,159,107,.4);
  color: var(--ink);
  text-decoration: none;
}

.related-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(60,159,107,.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.related-card-title {
  font-family: var(--font-display) !important;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}

.related-card-excerpt {
  font-family: var(--font-body) !important;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  flex: 1;
}

.related-card-link {
  font-family: var(--font-body) !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  margin-top: auto;
  display: inline-block;
}

/* ---------- DETAIL PAGE: KADENCE BODY-LEVEL OVERRIDES ----------
   Ensure Kadence's Elementor kit stylesheet (elementor-kit-4) does not
   override our heading/paragraph fonts on detail pages the same way we
   handle it on the front page.
   ---------------------------------------------------------------- */
body.detail-page h1,
body.detail-page h2,
body.detail-page h3,
body.detail-page h4,
body.detail-page h5,
body.detail-page h6,
body.detail-page .detail-hero-title,
body.detail-page .detail-related-title {
  font-family: var(--font-display) !important;
  color: inherit;
  font-weight: 400;
  letter-spacing: -.02em;
}

body.detail-page p,
body.detail-page li,
body.detail-page span,
body.detail-page button,
body.detail-page input,
body.detail-page label {
  font-family: var(--font-body) !important;
}

/* Make sure the detail main area isn't constrained by any Kadence wrapper */
.detail-main {
  min-height: 60vh;
}


/* ==========================================================================
   BLOG
   Covers: blog index (home.php), single post (single.php),
   topic index pages (page-topic-index.php).
   All class names are scoped to avoid touching Kadence/Elementor defaults.
   ========================================================================== */

/* ---------- BASE BODY SCOPING ----------
   Ensure font stack and colour tokens apply on non-homepage templates.    */
.l6-blog-index,
.l6-single-post,
.l6-topic-index {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.l6-blog-index a,
.l6-single-post a,
.l6-topic-index a {
  color: inherit;
  text-decoration: none;
}

.l6-blog-index img,
.l6-single-post img,
.l6-topic-index img {
  max-width: 100%;
  display: block;
}

/* Suppress Kadence's default header/footer on custom templates */
.l6-blog-index ~ #masthead,
.l6-single-post ~ #masthead,
.l6-topic-index ~ #masthead,
body:has(.l6-blog-index) #masthead,
body:has(.l6-blog-index) .site-header,
body:has(.l6-single-post) #masthead,
body:has(.l6-single-post) .site-header,
body:has(.l6-topic-index) #masthead,
body:has(.l6-topic-index) .site-header {
  display: none !important;
}

body:has(.l6-blog-index) #content,
body:has(.l6-blog-index) #primary,
body:has(.l6-single-post) #content,
body:has(.l6-single-post) #primary,
body:has(.l6-topic-index) #content,
body:has(.l6-topic-index) #primary {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ---------- BLOG HERO ---------- */
.blog-hero {
  background: var(--paper-warm);
  padding: clamp(96px, 12vw, 148px) 0 clamp(48px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}

.blog-hero--topic {
  padding-bottom: clamp(40px, 5vw, 64px);
}

.blog-hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 5.5vw, 72px);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 14px 0 20px;
  max-width: 16ch;
  text-wrap: balance;
}

.blog-hero-title em {
  font-style: italic;
  color: var(--green);
}

.blog-hero-lede {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--muted);
  max-width: 58ch;
  line-height: 1.6;
  margin-bottom: 0;
}

.topic-hero-count {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
}

/* ---------- CATEGORY FILTER BAR ---------- */
.blog-filter-bar {
  background: var(--paper-warm);
  padding: 0 0 28px;
  border-bottom: 1px solid var(--line);
}

.blog-filter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-filter-btn {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--muted);
  transition: background .2s, color .2s, border-color .2s;
  cursor: pointer;
}

.blog-filter-btn:hover,
.blog-filter-btn.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.blog-filter-btn.is-active {
  background: var(--green);
  border-color: var(--green);
}

/* ---------- POST CARD GRID ---------- */
.blog-posts-section {
  background: var(--paper);
}

.post-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 56px;
}

@media (max-width: 1024px) {
  .post-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .post-card-grid { grid-template-columns: 1fr; }
}

/* ---------- POST CARD ---------- */
.post-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .09);
  border-color: rgba(60, 159, 107, .35);
}

/* Image */
.post-card-img-wrap {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c2);
}

.post-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}

.post-card:hover .post-card-img {
  transform: scale(1.04);
}

.post-card-img-ph {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--c2) 0%, var(--c1) 100%);
}

/* Body */
.post-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Category label */
.post-card-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
  display: inline-block;
  transition: opacity .2s;
}

.post-card-cat:hover { opacity: .75; }

/* Title */
.post-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 10px;
  flex: 1;
}

.post-card-title a { color: inherit; transition: color .2s; }
.post-card-title a:hover { color: var(--green); }

/* Excerpt */
.post-card-excerpt {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 16px;
}

/* Meta row */
.post-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--slate-soft);
  margin-top: auto;
}

.post-card-date,
.post-card-readtime {
  font-variant-numeric: tabular-nums;
}

.post-card-meta::before {
  /* subtle divider dot between date and read time */
  content: '';
}

.post-card-date + .post-card-readtime::before {
  content: '·';
  margin-right: 6px;
  opacity: .5;
}

/* ---------- BLOG PAGINATION ---------- */
.blog-pagination {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.blog-pagination .page-numbers {
  display: flex;
  list-style: none;
  gap: 6px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.blog-pagination .page-numbers li { display: flex; }

.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: background .2s, border-color .2s, color .2s;
}

.blog-pagination .page-numbers a:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.blog-pagination .page-numbers .current {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-weight: 700;
}

.blog-pagination .page-numbers .dots {
  border-color: transparent;
  background: transparent;
  color: var(--slate-soft);
}

.blog-no-posts {
  text-align: center;
  padding: 64px 0;
  color: var(--muted);
  font-size: 17px;
}

/* ---------- SINGLE POST HERO ---------- */
.single-post-hero {
  background: var(--paper-warm);
  padding: clamp(96px, 11vw, 140px) 0 clamp(36px, 4vw, 52px);
  border-bottom: 1px solid var(--line);
}

.single-post-cat {
  /* Extends .section-eyebrow from the base token block */
  margin-bottom: 16px;
}

.single-post-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.8vw, 50px);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 12px 0 20px;
  max-width: 26ch;
  text-wrap: balance;
}

/* ---------- SINGLE POST META ---------- */
.single-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 14px;
  color: var(--muted);
}

.single-post-byline a {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}

.single-post-byline a:hover { border-color: var(--ink); }

.single-post-sep {
  color: var(--slate-soft);
  opacity: .55;
}

.single-post-date,
.single-post-readtime { font-variant-numeric: tabular-nums; }

/* ---------- FEATURED IMAGE ---------- */
.single-post-feature {
  background: var(--paper-warm);
  padding: 0 0 0;
  /* Intentionally no top padding — image butts up to hero border */
}

.single-post-feature-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/*
 * KEY RULE: featured image — no border-radius, no clipping, no filter.
 * Preserves original dimensions and pixel-perfect rendering.
 */
.single-post-feature-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  object-fit: contain;   /* never crop — show the whole image */
  filter: none;
  -webkit-filter: none;
}

/* ---------- TWO-COLUMN LAYOUT ---------- */
.single-post-layout {
  background: var(--paper);
}

.single-post-wrap {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

@media (max-width: 1024px) {
  .single-post-wrap {
    grid-template-columns: 200px 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .single-post-wrap {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* When the TOC has no headings to render, JS adds .is-no-toc to the wrap.
   Collapse the grid to a single full-width column with a sensible reading
   measure so the prose doesn't get trapped in the narrow 240px TOC track. */
.single-post-wrap.is-no-toc {
  grid-template-columns: 1fr;
  gap: 0;
}
.single-post-wrap.is-no-toc .single-post-body,
.single-post-wrap.is-no-toc .detail-prose {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- STICKY TABLE OF CONTENTS ----------
   Shared class: .detail-toc — coordinate with detail-page template.     */
.detail-toc {
  position: sticky;
  top: 88px;   /* clears the fixed nav (approx 68px) + breathing room */
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  padding-top: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.detail-toc::-webkit-scrollbar { width: 4px; }
.detail-toc::-webkit-scrollbar-track { background: transparent; }
.detail-toc::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

.detail-toc-inner {
  padding-bottom: 24px;
}

.detail-toc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-bottom: 14px;
}

.detail-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-toc-link {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  padding: 5px 10px 5px 12px;
  border-left: 2px solid var(--line);
  transition: color .2s, border-color .2s;
  display: block;
}

.detail-toc-link:hover {
  color: var(--ink);
  border-left-color: var(--slate-soft);
}

.detail-toc-link.is-active {
  color: var(--green);
  border-left-color: var(--green);
  font-weight: 600;
}

/* Hide TOC on mobile */
@media (max-width: 768px) {
  .single-post-toc { display: none; }
}

/* ---------- POST PROSE BODY ----------
   Shared class: .detail-prose — coordinate with detail-page template.   */
.detail-prose {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 72ch;
}

.detail-prose h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 2em 0 .6em;
  scroll-margin-top: 96px;
}

.detail-prose h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  color: var(--ink);
  margin: 1.6em 0 .5em;
  scroll-margin-top: 96px;
}

.detail-prose h4 {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin: 1.4em 0 .4em;
  letter-spacing: .01em;
}

.detail-prose p { margin-bottom: 1.25em; }

.detail-prose ul,
.detail-prose ol {
  padding-left: 1.5em;
  margin-bottom: 1.25em;
}

.detail-prose li { margin-bottom: .5em; }

.detail-prose strong { color: var(--ink); font-weight: 700; }

.detail-prose a {
  color: var(--green);
  border-bottom: 1px solid rgba(60, 159, 107, .35);
  transition: border-color .2s;
}

.detail-prose a:hover { border-bottom-color: var(--green); }

.detail-prose blockquote {
  margin: 1.75em 0;
  padding: 20px 24px 20px 28px;
  border-left: 3px solid var(--green);
  background: var(--paper-warm);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.08em;
  color: var(--ink);
}

.detail-prose blockquote p:last-child { margin-bottom: 0; }

.detail-prose hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2.5em 0;
}

.detail-prose code {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .88em;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink);
}

.detail-prose pre {
  background: var(--c5);
  color: rgba(255, 255, 255, .9);
  padding: 20px 24px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: .88em;
  line-height: 1.65;
  margin-bottom: 1.25em;
}

.detail-prose pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.detail-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9em;
  margin-bottom: 1.5em;
  overflow-x: auto;
  display: block;
}

.detail-prose th {
  background: var(--paper-warm);
  font-weight: 700;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}

.detail-prose td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.detail-prose tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------------------
   INLINE IMAGE RULES — critical: preserve existing custom imagery.
   No border-radius, no grayscale, no clipping, no transforms.
   ---------------------------------------------------------------- */
.single-post-body img,
.detail-prose img {
  max-width: 100%;
  width: 100%;        /* fill the prose column */
  height: auto;
  display: block;
  border-radius: 0;   /* no rounding — charts must stay rectangular */
  filter: none;
  -webkit-filter: none;
  box-shadow: none;
  margin: 1.75em 0;
  object-fit: contain; /* never crop */
}

/* WordPress default figure/figcaption */
.single-post-body figure,
.detail-prose figure {
  margin: 1.75em 0;
}

.single-post-body figure img,
.detail-prose figure img {
  margin: 0; /* figure provides the margin */
}

.single-post-body figcaption,
.detail-prose figcaption {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  text-align: center;
  font-style: italic;
}

/* Charts & diagrams — explicit clean canvas, no visual treatment */
.single-post-body img.chart,
.single-post-body figure.chart,
.detail-prose img.chart,
.detail-prose figure.chart {
  background: #ffffff;
  border: 1px solid var(--line);
  padding: 16px;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  -webkit-filter: none;
  overflow: visible;
}

.single-post-body figure.chart img,
.detail-prose figure.chart img {
  margin: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  filter: none;
  -webkit-filter: none;
}

/* WordPress alignment classes — honour them but never crop.
   R9-K: Use !important + img selector to defeat the .single-post-body img rule
   above (which forces width:100% / vertical-only margin) on legacy posts. */
.single-post-body .alignleft,
.single-post-body img.alignleft,
.single-post-body figure.alignleft,
.detail-prose .alignleft {
  float: left !important;
  margin: 0.4em 1.75em 1em 0 !important;
  max-width: 45% !important;
  width: auto !important;
  height: auto !important;
  clear: left;
}

.single-post-body .alignright,
.single-post-body img.alignright,
.single-post-body figure.alignright,
.detail-prose .alignright {
  float: right !important;
  margin: 0.4em 0 1em 1.75em !important;
  max-width: 45% !important;
  width: auto !important;
  height: auto !important;
  clear: right;
}

.single-post-body .aligncenter,
.detail-prose .aligncenter {
  margin-left: auto;
  margin-right: auto;
  float: none;
  display: block;
}

.single-post-body .alignwide,
.detail-prose .alignwide {
  width: 100%;
  max-width: 100%;
}

.single-post-body .alignfull,
.detail-prose .alignfull {
  width: 100vw;
  max-width: none;
  margin-left: calc(-1 * var(--gut));
  margin-right: calc(-1 * var(--gut));
}

@media (max-width: 768px) {
  .single-post-body .alignleft,
  .single-post-body img.alignleft,
  .single-post-body figure.alignleft,
  .detail-prose .alignleft,
  .single-post-body .alignright,
  .single-post-body img.alignright,
  .single-post-body figure.alignright,
  .detail-prose .alignright {
    float: none !important;
    max-width: 100% !important;
    margin: 1em auto !important;
    display: block !important;
  }
}

/* WordPress wp-caption */
.single-post-body .wp-caption,
.detail-prose .wp-caption {
  max-width: 100%;
  border: none;
  padding: 0;
  background: transparent;
}

.single-post-body .wp-caption img,
.detail-prose .wp-caption img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  filter: none;
  -webkit-filter: none;
}

.single-post-body .wp-caption-text,
.detail-prose .wp-caption-text {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  text-align: center;
  font-style: italic;
}

/* Post pagination (<!--nextpage-->) */
.single-post-pages {
  margin-top: 2em;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}

.single-post-pages .pages-label { font-weight: 600; }

.single-post-pages a,
.single-post-pages span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  transition: background .2s, color .2s, border-color .2s;
}

.single-post-pages a:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* Tags */
.single-post-tags {
  margin-top: 2.5em;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.single-post-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  color: var(--muted);
  transition: background .2s, color .2s, border-color .2s;
}

.single-post-tag:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* ---------- RELATED POSTS ---------- */
.single-post-related {
  background: var(--paper-warm);
  border-top: 1px solid var(--line);
}

.single-post-related-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.5vw, 34px);
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: 36px;
}

/* 3-up constrained for related posts */
.post-card-grid--related {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .post-card-grid--related { grid-template-columns: 1fr; }
}

/* ==========================================================================
   END BLOG
   ========================================================================== */


/* ==========================================================================
   PPC LANDING
   Scoped under body.ppc-landing-page to avoid bleeding into other templates.
   All new classes are prefixed .ppc- to prevent collisions.
   Reuses design tokens from :root and shared utilities (.wrap, .l6-logobar,
   .faq-item / .faq-q / .faq-a, .section-eyebrow, .section-title).
   ========================================================================== */

/* ---------- KADENCE SUPPRESSION — ppc landing only ---------- */
body.ppc-landing-page #masthead,
body.ppc-landing-page .site-header,
body.ppc-landing-page #colophon,
body.ppc-landing-page .site-footer {
  display: none !important;
}

body.ppc-landing-page #content,
body.ppc-landing-page #primary,
body.ppc-landing-page .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ---------- BASE TYPOGRAPHY SCOPING (mirrors front-page-custom) ---------- */
body.ppc-landing-page h1,
body.ppc-landing-page h2,
body.ppc-landing-page h3,
body.ppc-landing-page h4 {
  font-family: var(--font-display) !important;
  font-weight: 400;
  letter-spacing: -.02em;
  color: inherit;
}

body.ppc-landing-page p,
body.ppc-landing-page li,
body.ppc-landing-page button,
body.ppc-landing-page input,
body.ppc-landing-page label,
body.ppc-landing-page a {
  font-family: var(--font-body) !important;
}

body.ppc-landing-page a {
  color: inherit;
  text-decoration: none;
}

body.ppc-landing-page img {
  max-width: 100%;
  display: block;
}

/* Kadence content container unlock */
body.ppc-landing-page .content-container,
body.ppc-landing-page .site-content,
body.ppc-landing-page main {
  max-width: none;
  padding: 0;
  margin: 0;
  background: transparent;
}

body.ppc-landing-page .entry-content {
  max-width: none;
  margin: 0;
}

/* ---------- HEADER MINIMAL (.header-minimal) ---------- */
.header-minimal {
  background: var(--c5);                      /* charcoal — same as logo bar */
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.hmin-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hmin-logo .l6-logo {
  height: 28px;
  width: auto;
  display: block;
}

.hmin-logo .l6-mark { fill: var(--green); }
.hmin-logo .l6-word { fill: #FFFFFF; }

.hmin-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body) !important;
  transition: filter .2s, transform .2s;
  white-space: nowrap;
}

.hmin-phone:hover {
  filter: brightness(.9);
  transform: translateY(-1px);
  color: #fff;
}

.hmin-phone svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .hmin-phone span { display: none; }         /* icon-only on small phones */
  .hmin-phone { padding: 10px 14px; }
}

/* ---------- FOOTER MINIMAL (.footer-minimal) ---------- */
.footer-minimal {
  background: var(--c5);
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

.fmin-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.fmin-copy,
.fmin-links a,
.fmin-phone {
  font-size: 13px;
  color: rgba(255,255,255,.45);
  font-family: var(--font-body) !important;
}

.fmin-links a:hover,
.fmin-phone:hover {
  color: rgba(255,255,255,.85);
}

.fmin-phone {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .fmin-wrap { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- PPC HERO (.ppc-hero) ---------- */
.ppc-hero {
  position: relative;
  min-height: 580px;
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: hidden;
}

/* Hero background: same overlay pattern as homepage hero */
.ppc-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
  background-color: #1a2535;
}

.ppc-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(15,24,32,.92) 0%, rgba(15,24,32,.78) 42%, rgba(15,24,32,.40) 70%, rgba(15,24,32,.20) 100%),
    linear-gradient(180deg, rgba(15,24,32,.50) 0%, rgba(15,24,32,.0) 30%, rgba(15,24,32,.0) 65%, rgba(15,24,32,.70) 100%);
}

.ppc-hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  padding-top: clamp(72px, 9vw, 120px);
  padding-bottom: clamp(40px, 5vw, 64px);
  max-width: 760px;
}

/* Hero H1 — inherits .hero-headline from shared styles */
body.ppc-landing-page .ppc-hero .hero-headline {
  font-size: clamp(34px, 4vw, 54px) !important;
  color: #fff !important;
}

body.ppc-landing-page .ppc-hero .hero-headline em {
  display: block;
  margin-top: .35em;
  font-style: italic;
  color: #fff !important;
}

/* Dynamic keyword span — visually styled, content swapped by JS later */
.dynamic-keyword {
  /* No special visual treatment by default — inherits the headline color.
     If you want to highlight it, add color: var(--green) here.
     The JS swap reads .textContent so no inner markup needed. */
}

/* Subheadline below H1 */
.ppc-hero-sub {
  font-size: clamp(15px, 1.2vw, 17px);
  color: rgba(255,255,255,.88);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 0 22px;
}

/* Trust bullets — extends .hero-bullets */
.ppc-hero-trust {
  margin-bottom: 28px;
}

/* Primary CTA button */
.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green);
  color: #fff !important;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  font-family: var(--font-body) !important;
  transition: filter .2s, transform .2s, box-shadow .2s;
  white-space: nowrap;
}

.cta-primary:hover {
  filter: brightness(.9);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(60,159,107,.30);
  color: #fff !important;
}

.cta-primary svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cta-primary--light {
  background: #fff;
  color: var(--ink) !important;
}

.cta-primary--light:hover {
  background: var(--c1);
  color: var(--ink) !important;
}

/* Stats strip at bottom of hero */
.ppc-hero-stats {
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255,255,255,.12);
}

.ppc-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 18px 0;
}

.ppc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 16px;
  border-right: 1px solid rgba(255,255,255,.12);
}

.ppc-stat:last-child { border-right: 0; }

.ppc-stat-value {
  font-family: var(--font-display) !important;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  color: #fff;
  letter-spacing: -.01em;
}

.ppc-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-top: 5px;
}

@media (max-width: 600px) {
  .ppc-stats-row { grid-template-columns: repeat(2, 1fr); }
  .ppc-stat { border-bottom: 1px solid rgba(255,255,255,.08); }
  .ppc-stat:nth-child(2n) { border-right: 0; }
  .ppc-stat:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 720px) {
  .ppc-hero-inner { padding-top: 56px; max-width: none; }
}

/* ---------- BENEFITS ROW (.ppc-benefits-row) ---------- */
.ppc-benefits {
  background: var(--paper-warm);
}

.ppc-benefits-head {
  margin-bottom: 48px;
}

.ppc-benefits-head .section-title {
  max-width: 34ch;
}

.ppc-benefits-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ppc-benefit-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.ppc-benefit-card:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: 0 14px 38px rgba(60,159,107,.10);
}

.ppc-benefit-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(60,159,107,.08);
  border-radius: 14px;
  color: var(--green);
  flex-shrink: 0;
}

.ppc-benefit-icon svg {
  width: 28px;
  height: 28px;
}

.ppc-benefit-h {
  font-family: var(--font-display) !important;
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -.01em;
}

.ppc-benefit-p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
}

@media (max-width: 880px) {
  .ppc-benefits-row { grid-template-columns: 1fr; }
}

/* ---------- INLINE FORM (.ppc-inline-form) ---------- */
.ppc-inline-form {
  background: var(--paper);
}

.ppc-form-wrap {
  max-width: 720px;
  margin: 0 auto;
}

.ppc-form-head {
  text-align: center;
  margin-bottom: 36px;
}

.ppc-form-head .section-eyebrow {
  justify-content: center;
}

.ppc-form-sub {
  font-size: 16px;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.6;
}

.ppc-form-body {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 4px 24px rgba(0,0,0,.04);
}

/* GravityForms style resets inside the LP form box */
.ppc-form-body .gform_wrapper input[type="text"],
.ppc-form-body .gform_wrapper input[type="email"],
.ppc-form-body .gform_wrapper input[type="tel"],
.ppc-form-body .gform_wrapper textarea,
.ppc-form-body .gform_wrapper select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--font-body);
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}

.ppc-form-body .gform_wrapper input:focus,
.ppc-form-body .gform_wrapper textarea:focus,
.ppc-form-body .gform_wrapper select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(60,159,107,.15);
  outline: none;
}

.ppc-form-body .gform_wrapper .gform_submit_button,
.ppc-form-body .gform_wrapper input[type="submit"] {
  background: var(--green) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  cursor: pointer;
  transition: filter .2s, transform .2s !important;
  width: 100%;
  margin-top: 8px;
}

.ppc-form-body .gform_wrapper .gform_submit_button:hover,
.ppc-form-body .gform_wrapper input[type="submit"]:hover {
  filter: brightness(.9) !important;
  transform: translateY(-1px) !important;
}

.ppc-form-fallback {
  text-align: center;
}

.ppc-form-trust {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-body) !important;
}

/* ---------- SOCIAL PROOF (.ppc-social-proof) ---------- */
.ppc-social-proof {
  background: var(--slate);
  color: #fff;
}

.ppc-proof-head {
  text-align: center;
  align-items: center;
  margin-bottom: 48px;
}

.ppc-proof-head .section-eyebrow {
  color: rgba(255,255,255,.85);
  justify-content: center;
}

.ppc-proof-head .section-eyebrow::before {
  background: rgba(255,255,255,.45);
}

.ppc-proof-head .section-title {
  color: #fff;
  margin-left: auto;
  margin-right: auto;
}

.ppc-proof-head .section-title em {
  font-style: italic;
  color: #fff;
}

.ppc-proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 48px;
}

.ppc-testimonial {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ppc-tquote {
  font-family: var(--font-display) !important;
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.45;
  color: #fff;
}

.ppc-tquote::before {
  content: '\201C';
  color: rgba(255,255,255,.5);
}

.ppc-tquote::after {
  content: '\201D';
  color: rgba(255,255,255,.5);
}

.ppc-tattrib {
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 14px;
}

.ppc-tname {
  font-weight: 600;
  color: #fff;
}

.ppc-tcompany {
  color: rgba(255,255,255,.72);
}

/* Proof stats bar */
.ppc-proof-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.12);
}

.ppc-proof-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 16px;
  border-right: 1px solid rgba(255,255,255,.10);
}

.ppc-proof-stat:last-child { border-right: 0; }

.ppc-pstat-value {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  color: var(--green);
  line-height: 1;
  letter-spacing: -.02em;
}

.ppc-pstat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-top: 8px;
}

@media (max-width: 880px) {
  .ppc-proof-grid { grid-template-columns: 1fr; }
  .ppc-proof-stats { grid-template-columns: 1fr; }
  .ppc-proof-stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.10); }
  .ppc-proof-stat:last-child { border-bottom: 0; }
}

/* ---------- FAQ (.ppc-faq) ---------- */
.ppc-faq {
  background: var(--paper-warm);
}

.ppc-faq-inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.ppc-faq-head .section-title { max-width: 20ch; }

.ppc-faq-sub {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 38ch;
}

/* Reuses .faq-item / .faq-q / .faq-a from shared styles */

@media (max-width: 880px) {
  .ppc-faq-inner { grid-template-columns: 1fr; }
  .ppc-faq-sub { max-width: 60ch; }
}

/* ---------- FINAL CTA (.ppc-final-cta) ---------- */
.ppc-final-cta {
  background: var(--slate);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.ppc-final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 400px at 75% 50%, rgba(60,159,107,.18), transparent 70%);
  pointer-events: none;
}

.ppc-final-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.ppc-final-h {
  font-family: var(--font-display) !important;
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 18px;
  text-wrap: balance;
}

.ppc-final-h em {
  font-style: italic;
  color: #fff;
  opacity: .92;
}

.ppc-final-sub {
  font-size: 17px;
  color: rgba(255,255,255,.88);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto 40px;
}

.ppc-final-form {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 40px);
  margin-bottom: 28px;
}

/* Override form styles in dark context */
.ppc-final-form .gform_wrapper input[type="text"],
.ppc-final-form .gform_wrapper input[type="email"],
.ppc-final-form .gform_wrapper input[type="tel"],
.ppc-final-form .gform_wrapper textarea,
.ppc-final-form .gform_wrapper select {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--font-body);
  width: 100%;
}

.ppc-final-form .gform_wrapper input::placeholder,
.ppc-final-form .gform_wrapper textarea::placeholder {
  color: rgba(255,255,255,.5);
}

.ppc-final-form .gform_wrapper input:focus,
.ppc-final-form .gform_wrapper textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(60,159,107,.25);
  outline: none;
}

.ppc-final-form .gform_wrapper label {
  color: rgba(255,255,255,.88) !important;
  font-family: var(--font-body) !important;
}

.ppc-final-form .gform_wrapper .gform_submit_button,
.ppc-final-form .gform_wrapper input[type="submit"] {
  background: var(--green) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
  transition: filter .2s, transform .2s !important;
}

.ppc-final-form .gform_wrapper .gform_submit_button:hover,
.ppc-final-form .gform_wrapper input[type="submit"]:hover {
  filter: brightness(.9) !important;
  transform: translateY(-1px) !important;
}

/* Calendly alternate action */
.ppc-final-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ppc-final-alt-label {
  font-size: 14px;
  color: rgba(255,255,255,.65);
  font-family: var(--font-body) !important;
}

.ppc-calendly-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.9) !important;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body) !important;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}

.ppc-calendly-link:hover {
  color: var(--green) !important;
  border-color: var(--green);
}

.ppc-calendly-link svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   END PPC LANDING
   ========================================================================== */

/* ==========================================================================
   PASS-2 FIXES (May 2026) — formatting issues from Ben's feedback
   1. Brighten hero overlay (background image visibility)
   5. Constrain inline content images (max-height) inside detail prose
   6. Style l6-comparison-table (was white-on-white div grid)
   7. Force Fraunces title + lighter H2 weight on .l6-blog
   8. Force ink-mode nav on .l6-blog (cream hero behind transparent nav)
   9. Equal-height pillar boxes on About
   10. Tighten final CTA email field inside oval
   ========================================================================== */

/* ---- 1. HERO OVERLAYS — brighten so background images read clearly ---- */
.hero-bg::after {
  /* Was: 95deg .85 → .15 + 180deg .45/.75 (too dark) */
  background:
    linear-gradient(95deg, rgba(20,30,40,.62) 0%, rgba(20,30,40,.42) 38%, rgba(20,30,40,.18) 65%, rgba(20,30,40,.10) 100%),
    linear-gradient(180deg, rgba(20,30,40,.30) 0%, rgba(20,30,40,0) 22%, rgba(20,30,40,0) 60%, rgba(20,30,40,.55) 100%) !important;
}

.detail-hero-bg {
  /* Was opacity .42 — too washed out */
  opacity: .72 !important;
}

.detail-hero::before {
  background:
    linear-gradient(135deg, rgba(15,24,32,.62) 0%, rgba(40,55,72,.42) 60%, rgba(26,42,56,.55) 100%),
    radial-gradient(circle 480px at -80px calc(100% + 60px), rgba(60,159,107,.22) 0%, transparent 70%) !important;
}

/* ---- 5. CONSTRAIN INLINE IMAGES IN DETAIL PROSE ---- */
/* Card mockups, screenshots, etc. were rendering full 2560px width.
   Cap at a sane max-height and don't force 100% width.
   R9-K: exclude floated images so .alignleft / .alignright keep their
   horizontal margins and 45% cap from the alignment rules above. */
.detail-prose img:not(.chart):not(.alignleft):not(.alignright) {
  max-width: 100%;
  width: auto !important;
  max-height: 420px;
  height: auto;
  margin: 1.6em auto;
  object-fit: contain;
}

.detail-prose figure:not(.chart) {
  text-align: center;
}

.detail-prose figure:not(.chart) img {
  margin: 0 auto;
}

/* ---- 6. COMPARISON TABLE — div-grid styling ---- */
.l6-comparison-table {
  display: block;
  width: 100%;
  margin: 2.4em 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: white;
  font-size: 15px;
  line-height: 1.45;
}

.l6-comparison-table .l6-table-header {
  display: flex !important;
  flex-wrap: nowrap !important;
  background: var(--paper-warm) !important;
  border-bottom: 2px solid var(--line) !important;
  flex-direction: row !important;
}

/* Header row: equal column widths, except first column slightly wider */
html body .l6-comparison-table .l6-table-header .l6-table-cell {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 14px 10px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
  border-right: 1px solid var(--line) !important;
  background: transparent !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  line-height: 1.3 !important;
}

html body .l6-comparison-table .l6-table-header .l6-table-cell:first-child {
  padding-left: 16px !important;
  flex: 1.5 1 0 !important;
}

.l6-table-header .l6-table-cell:last-child { border-right: 0; }

.l6-table-body { display: block; }

.l6-comparison-table .l6-table-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  border-bottom: 1px solid var(--line);
}

/* Body cells: same proportions as header (1 / 1 / ... / first=1.5) */
html body .l6-comparison-table .l6-table-row .l6-table-cell {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 14px 10px !important;
  color: var(--ink) !important;
  border-right: 1px solid var(--line) !important;
  background: transparent !important;
  font-weight: 400;
  overflow-wrap: break-word !important;
}

html body .l6-comparison-table .l6-table-row .l6-table-cell:first-child {
  flex: 1.5 1 0 !important;
  padding-left: 16px !important;
  font-weight: 500 !important;
}

.l6-table-row:last-child { border-bottom: 0; }
.l6-table-row:nth-child(even) { background: rgba(60,159,107,.025); }

.l6-table-row .l6-table-cell:last-child { border-right: 0; }

@media (max-width: 720px) {
  .l6-table-header { display: none; }
  .l6-table-row {
    grid-template-columns: 1fr;
    padding: 12px 16px;
    gap: 4px;
  }
  .l6-table-row .l6-table-cell {
    padding: 4px 0;
    border-right: 0;
  }
  .l6-table-row .l6-table-cell:first-child {
    font-size: 17px;
    font-family: var(--font-display);
    font-weight: 500;
    margin-bottom: 4px;
  }
}

/* ---- 7. BLOG TITLE — force Fraunces over Kadence/Manrope override ---- */
body.l6-blog .single-post-title,
body.single-post .single-post-title,
.single-post-hero .single-post-title {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -.025em !important;
}

/* Subheadings on blog posts — match detail-prose H2 spec (R9-J) */
body.l6-blog .single-post-body h2,
body.single-post .single-post-body h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -.02em;
}

body.l6-blog .single-post-body h3,
body.single-post .single-post-body h3 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
}

/* R9-I — legacy posts authored body headings as <h1> (semantic mistake;
   only the post title should be H1). Re-render those inline H1s with the
   exact same treatment as the cornerstone-page H2s (R9-H reference). */
body.l6-blog .single-post-body h1,
body.single-post .single-post-body h1 {
  font-family: var(--font-display, "Fraunces"), Georgia, serif !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  color: rgb(42, 52, 65) !important;
  margin: 60px 0 18px !important;
  /* Green left accent bar */
  position: relative;
  padding-left: 18px !important;
  border-left: 4px solid var(--green, #3C9F6B) !important;
  border-bottom: 0 !important;
  background-image: none !important;
  text-decoration: none !important;
}
@media (max-width: 760px) {
  body.l6-blog .single-post-body h1,
  body.single-post .single-post-body h1 {
    font-size: 26px !important;
    margin-top: 40px !important;
    padding-left: 14px !important;
    border-left-width: 3px !important;
  }
}

/* ---- 8. BLOG NAV — force ink-mode (cream hero is light) ---- */
body.l6-blog .l6-nav,
body.single-post .l6-nav {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

body.l6-blog .l6-nav .l6-logo .l6-word,
body.single-post .l6-nav .l6-logo .l6-word {
  fill: var(--ink) !important;
}

body.l6-blog .l6-nav .nav-links > .nav-item > a,
body.single-post .l6-nav .nav-links > .nav-item > a {
  color: var(--ink) !important;
}

body.l6-blog .l6-nav .nav-links > .nav-item > a:hover,
body.single-post .l6-nav .nav-links > .nav-item > a:hover {
  color: var(--green) !important;
}

body.l6-blog .l6-nav .nav-cta,
body.single-post .l6-nav .nav-cta {
  background: var(--green) !important;
  color: white !important;
}

body.l6-blog .l6-nav .nav-burger span,
body.single-post .l6-nav .nav-burger span {
  background: var(--ink) !important;
}

/* ---- 9. PILLARS — equal heights ---- */
.pillars { align-items: stretch; }

.pillar-item {
  height: 100%;
}

.pillar-text {
  flex: 1; /* push content to fill available height */
}

/* ---- 10. FINAL CTA email field — fit inside oval ---- */
.final-form {
  /* Tighten so input doesn't visually exceed */
  padding: 5px 5px 5px 6px;
  align-items: center;
}

.final-form input {
  padding: 11px 16px;
  min-width: 0; /* allow flex shrink */
  background: transparent;
  border-radius: 999px 0 0 999px;
}

.final-form input::placeholder {
  color: rgba(255,255,255,.55);
  font-style: normal;
}

.final-form button {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 11px 22px;
}

@media (max-width: 480px) {
  .final-form {
    flex-direction: column;
    border-radius: 18px;
    padding: 8px;
    gap: 6px;
  }
  .final-form input {
    width: 100%;
    border-radius: 12px;
    text-align: center;
  }
  .final-form button {
    width: 100%;
    border-radius: 12px;
  }
}

/* ==========================================================================
   END PASS-2 FIXES
   ========================================================================== */

/* ==========================================================================
   ROUND-3 FIXES (May 5, 2026) — feedback from Ben
   A1. Blog nav background → parchment to match other pages
   A2. Blog body links: blue → brand green
   A3. Logo right-edge clipping prevention (svg overflow visible)
   A4. Hero subhead body text: light grey → white
   A5. Force ink-mode nav on all inner pages (About, Clients, Giving Back, etc.)
   A6. Final-CTA placeholder visibility re-verification
   A7. Reduce About page vertical whitespace ~15%
   A8. Comparison table redesign — green accents, no surrounding box
   ========================================================================== */

/* ---- A1. BLOG NAV → parchment cream (was rgba white) ---- */
body.l6-blog .l6-nav,
body.single-post .l6-nav,
body.l6-blog-index .l6-nav,
body.l6-topic-index .l6-nav {
  background: rgba(242, 240, 236, .94) !important;
  backdrop-filter: saturate(180%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* ---- A2. BLOG BODY LINKS → brand green ---- */
/* Old CSS rendered post-meta and inline body links in default blue. */
body.l6-blog .single-post-byline a,
body.single-post .single-post-byline a,
body.l6-blog .single-post-body a,
body.single-post .single-post-body a,
body.l6-blog .single-post-meta a,
body.single-post .single-post-meta a,
body.l6-blog-index .post-card-cat,
body.l6-blog-index .post-card-cat a,
body.l6-topic-index .post-card-cat,
body.l6-topic-index .post-card-cat a,
body.l6-blog .single-post-cat,
body.single-post .single-post-cat {
  color: var(--green) !important;
}

body.l6-blog .single-post-body a,
body.single-post .single-post-body a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(60,159,107,.5);
}

body.l6-blog .single-post-body a:hover,
body.single-post .single-post-body a:hover {
  color: var(--green) !important;
  filter: brightness(.85);
  text-decoration-color: var(--green);
}

/* Cat eyebrow underline above title */
.single-post-cat::before {
  background: var(--green) !important;
}

/* ---- A3. LOGO RIGHT-EDGE — prevent clipping at small zooms ---- */
.l6-logo {
  overflow: visible !important;
  padding-right: 2px;
}
.nav-logo {
  overflow: visible !important;
}

/* ---- A4. HERO SUBHEAD → white (was rgba(255,255,255,.8) light grey) ---- */
.detail-hero-sub {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* ---- A5. INNER PAGE NAV — default to ink-mode on light hero pages ----
   The base CSS only switches to ink-mode after .is-scrolled fires. Inner
   pages (About, Clients, Giving Back, Contact) have light parchment heroes,
   so the default white nav text is illegible at the top of the page.
   Force ink-mode for any page that isn't the front page or a dark-hero
   landing.
*/
body:not(.front-page-custom):not(.section-landing-page):not(.detail-page):not(.ppc-landing-page):not(.l6-blog):not(.single-post):not(.l6-blog-index):not(.l6-topic-index) .l6-nav {
  background: rgba(242, 240, 236, .94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

body:not(.front-page-custom):not(.section-landing-page):not(.detail-page):not(.ppc-landing-page):not(.l6-blog):not(.single-post):not(.l6-blog-index):not(.l6-topic-index) .l6-nav .l6-logo .l6-word {
  fill: var(--ink) !important;
}

body:not(.front-page-custom):not(.section-landing-page):not(.detail-page):not(.ppc-landing-page):not(.l6-blog):not(.single-post):not(.l6-blog-index):not(.l6-topic-index) .l6-nav .nav-links > .nav-item > a {
  color: var(--ink) !important;
}

body:not(.front-page-custom):not(.section-landing-page):not(.detail-page):not(.ppc-landing-page):not(.l6-blog):not(.single-post):not(.l6-blog-index):not(.l6-topic-index) .l6-nav .nav-links > .nav-item > a:hover {
  color: var(--green) !important;
}

body:not(.front-page-custom):not(.section-landing-page):not(.detail-page):not(.ppc-landing-page):not(.l6-blog):not(.single-post):not(.l6-blog-index):not(.l6-topic-index) .l6-nav .nav-burger span {
  background: var(--ink) !important;
}

body:not(.front-page-custom):not(.section-landing-page):not(.detail-page):not(.ppc-landing-page):not(.l6-blog):not(.single-post):not(.l6-blog-index):not(.l6-topic-index) .l6-nav .nav-cta {
  background: var(--green) !important;
  color: white !important;
}

/* ---- A6. FINAL CTA placeholder — ensure visibility ---- */
.final-form input::placeholder,
.final-form input::-webkit-input-placeholder,
.final-form input::-moz-placeholder,
.final-form input:-ms-input-placeholder {
  color: rgba(255,255,255,.65) !important;
  font-style: normal;
  opacity: 1 !important;
}

/* ---- A7. ABOUT PAGE — reduce vertical whitespace ~15% ---- */
body.page-template-page-about .about-section,
body.page-template-page-about .l6-pillars,
body.page-template-page-about section {
  padding-top: clamp(40px, 5.5vw, 80px) !important;
  padding-bottom: clamp(40px, 5.5vw, 80px) !important;
}

/* Slightly tighter top spacing under hero on About */
body.page-template-page-about .about-section:first-of-type,
body.page-template-page-about section:first-of-type {
  padding-top: clamp(48px, 6vw, 80px) !important;
}

/* ---- A8. COMPARISON TABLE — redesign with brand green, no white box ---- */
/* Drop the white card frame, let it sit on the parchment surface */
.l6-comparison-table {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 2.4em 0 !important;
}

/* Header: green band with white type */
.l6-comparison-table .l6-table-header {
  background: var(--green) !important;
  border-bottom: 0 !important;
  border-radius: 6px 6px 0 0;
}

html body .l6-comparison-table .l6-table-header .l6-table-cell {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  border-right: 1px solid rgba(255,255,255,.18) !important;
  padding: 14px 10px !important;
  line-height: 1.25 !important;
}

html body .l6-comparison-table .l6-table-header .l6-table-cell:first-child {
  padding-left: 18px !important;
}

.l6-table-header .l6-table-cell:last-child {
  border-right: 0 !important;
}

/* Body rows: subtle borders, alternating green tint */
.l6-comparison-table .l6-table-row {
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
}

.l6-comparison-table .l6-table-row:nth-child(even) {
  background: rgba(60,159,107,.05) !important;
}

.l6-comparison-table .l6-table-row:hover {
  background: rgba(60,159,107,.09) !important;
  transition: background .15s ease;
}

.l6-comparison-table .l6-table-row:last-child {
  border-bottom: 2px solid var(--green) !important;
}

html body .l6-comparison-table .l6-table-row .l6-table-cell {
  border-right: 1px solid var(--line) !important;
  padding: 16px 12px !important;
}

html body .l6-comparison-table .l6-table-row .l6-table-cell:first-child {
  padding-left: 18px !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
  font-family: var(--font-display) !important;
  font-size: 16px !important;
}

.l6-table-row .l6-table-cell:last-child {
  border-right: 0 !important;
}

/* A5b. Section-landing nav: when scrolled, switch to ink-mode
   The base .section-landing-page rules force white nav text with !important,
   which overrides the standard .is-scrolled handler. Re-bump specificity
   so once .is-scrolled fires, the nav goes to ink-mode again. */
body.section-landing-page .l6-nav.is-scrolled .l6-logo .l6-word {
  fill: var(--ink) !important;
}
body.section-landing-page .l6-nav.is-scrolled .nav-links > .nav-item > a {
  color: var(--ink) !important;
}
body.section-landing-page .l6-nav.is-scrolled .nav-links > .nav-item > a:hover {
  color: var(--green) !important;
}
body.section-landing-page .l6-nav.is-scrolled .nav-cta {
  background: var(--green) !important;
  color: white !important;
}
body.section-landing-page .l6-nav.is-scrolled .nav-burger span {
  background: var(--ink) !important;
}

/* Same logic for detail pages (in case they ever use a dark hero) */
body.detail-page .l6-nav.is-scrolled .l6-logo .l6-word {
  fill: var(--ink) !important;
}
body.detail-page .l6-nav.is-scrolled .nav-links > .nav-item > a {
  color: var(--ink) !important;
}

/* ==========================================================================
   END ROUND-3 FIXES
   ========================================================================== */

/* ---- L6-PILL — content CTA buttons (replaces orphan <a> tags) ---- */
.l6-pill-wrap {
  margin: 1.6em 0;
  text-align: left;
}

a.l6-pill,
.l6-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: white;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  text-decoration: none;
  border: 0;
  transition: transform .2s, box-shadow .2s, filter .2s;
}

a.l6-pill:hover,
.l6-pill:hover {
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(60,159,107,.25);
  filter: brightness(1.05);
}

a.l6-pill::after,
.l6-pill::after {
  content: '→';
  font-weight: 400;
  transition: transform .2s;
}

a.l6-pill:hover::after,
.l6-pill:hover::after {
  transform: translateX(3px);
}

/* ============================================================
   ROUND-3 PHASE F: CLIENTS PAGE — REMOVE WHITE BACKGROUNDS,
   STANDARDIZE SIZE + GRID
   May 5, 2026
   ============================================================ */

/* Page-level shell — give it a parchment background so multiply blends
   white logo backgrounds into the page seamlessly. */
.page-id-3571 .l6-section:not(.l6-final),
.page-id-3571 main,
.page-id-3571 .elementor-3571 > .e-con {
  background: var(--bg) !important;
}

/* Heading: bring inline with brand display family + ink color. */
.page-id-3571 .elementor-heading-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -.01em;
  color: var(--ink);
  text-align: center;
  margin: 24px 0 56px;
}

/* Force a clean 4-col grid on desktop, 3-col on tablet, 2-col on mobile.
   Override Elementor's float-based gallery layout entirely. */
html body.page-id-3571 #gallery-1,
html body.page-id-3571 .gallery {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 32px;
  max-width: 1180px;
  margin: 0 auto 64px;
  padding: 0 24px;
  width: 100%;
}

@media (max-width: 960px) {
  html body.page-id-3571 #gallery-1,
  html body.page-id-3571 .gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 24px;
  }
}

@media (max-width: 600px) {
  html body.page-id-3571 #gallery-1,
  html body.page-id-3571 .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 16px;
  }
}

/* Each gallery cell — uniform size, soft shadow card, generous interior padding.
   Float-based layout escapes — reset to grid item. */
html body.page-id-3571 .gallery-item {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(15,24,32,.04), 0 8px 22px rgba(15,24,32,.06) !important;
  padding: 22px 24px !important;
  aspect-ratio: 5 / 3 !important;
  transition: transform .25s ease, box-shadow .25s ease;
}

html body.page-id-3571 .gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(15,24,32,.05), 0 14px 32px rgba(15,24,32,.10);
}

/* Inner image — fit, never crop, keep proportions. Apply multiply blend so
   any white background on the source PNG/JPG fades into the white card,
   leaving only the dark logo strokes. */
html body.page-id-3571 .gallery-item img,
html body.page-id-3571 .gallery-icon img,
html body.page-id-3571 .elementor-image-gallery img {
  max-width: 88% !important;
  max-height: 78% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Multiply blend ONLY on logos that have a known visible white rectangle
   in the source PNG. Targeted via filename match since we can't add classes. */
html body.page-id-3571 .gallery-item img[src*="Kenworth"],
html body.page-id-3571 .gallery-item img[src*="Cetaphil"],
html body.page-id-3571 .gallery-item img[src*="Walmart"],
html body.page-id-3571 .gallery-item img[src*="LubeZone"],
html body.page-id-3571 .gallery-item img[src*="Stoughton"],
html body.page-id-3571 .gallery-item img[src*="Truly"],
html body.page-id-3571 .gallery-item img[src*="Heritage"] {
  mix-blend-mode: multiply !important;
}

/* Strip the gallery's auto-generated <br> elements that Elementor injects. */
html body.page-id-3571 .gallery br {
  display: none;
}

/* Strip Elementor's gallery-icon wrapper centering — let our flex handle it. */
html body.page-id-3571 .gallery-icon {
  display: contents;
}

/* Container chrome: kill any Elementor section background that fights the page bg. */
html body.page-id-3571 .elementor-element.elementor-widget-image-gallery {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

/* Remove Elementor's column-based grid scaffolding inside the gallery widget. */
html body.page-id-3571 .elementor-image-gallery {
  width: 100%;
}

/* ==========================================================================
   ROUND-3 PHASE H: CASE STUDIES REDESIGN
   - Numbered cards (01-04) via CSS counter
   - Tighter rhythm, bigger result metrics, cleaner hierarchy
   - Targets: #case-studies-grid .card-grid-item
   ========================================================================== */

/* Counter init on the grid */
html body #case-studies-grid .card-grid {
  counter-reset: cs-card;
  gap: 1.5rem;
}

/* 4-up at desktop for tighter rhythm; collapse 2/1 on smaller */
@media (min-width: 1024px) {
  html body #case-studies-grid .card-grid--cols-3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1023px) and (min-width: 600px) {
  html body #case-studies-grid .card-grid--cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Card chrome — minimal, with green left rule that thickens on hover.
   The thickening is rendered via a ::before pseudo-element absolutely positioned
   over the left edge so the content box never changes width on hover. Animating
   border-left-width directly causes content to re-wrap (card grows taller)
   which pushes the entire row downward — see R9 hover-3 fix. */
html body #case-studies-grid .card-grid-item {
  counter-increment: cs-card;
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(11, 47, 36, 0.08);
  border-left: 3px solid var(--green, #3C9F6B);
  border-radius: 4px;
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 2px 6px rgba(11, 47, 36, 0.04);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* Overlay bar that fakes a thicker green left border on hover without
   affecting layout. Sits flush against the existing 3px border. */
html body #case-studies-grid .card-grid-item > .card-grid-body { position: relative; z-index: 1; }
html body #case-studies-grid .card-grid-item::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -3px;
  width: 3px;
  background: var(--green, #3C9F6B);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
html body #case-studies-grid .card-grid-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(11, 47, 36, 0.10);
}
html body #case-studies-grid .card-grid-item:hover::after {
  opacity: 1;
}

/* Numbered header: 01 / 02 / 03 / 04 in serif, brand green, uppercase tracking */
html body #case-studies-grid .card-grid-item::before {
  content: "0" counter(cs-card);
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--green, #3C9F6B);
  letter-spacing: -0.02em;
  margin-bottom: 0.85rem;
  font-feature-settings: "lnum" 1;
}
/* For 5+ cards: drop the leading zero gracefully */
@supports (counter(cs-card, decimal-leading-zero)) {
  html body #case-studies-grid .card-grid-item::before {
    content: counter(cs-card, decimal-leading-zero);
  }
}

/* Body block — pull tighter, smaller padding inside body since card has padding */
html body #case-studies-grid .card-grid-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Tag — uppercase micro-label */
html body #case-studies-grid .card-tag {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green, #3C9F6B);
  background: transparent;
  padding: 0;
  margin: 0;
  border: 0;
}

/* Title — punchier */
html body #case-studies-grid .card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--ink, #0B2F24);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Description — tighter leading */
html body #case-studies-grid .card-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(11, 47, 36, 0.78);
  margin: 0;
}

/* Numbers/percentages inside descriptions get auto-emphasis via inline <strong>
   Authors can also wrap metrics in <strong> for the highlight. */
html body #case-studies-grid .card-desc strong {
  font-weight: 700;
  color: var(--ink, #0B2F24);
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* CTA link — small arrow-prefix, sits flush left */
html body #case-studies-grid .card-link {
  margin-top: 0.4rem;
  padding: 0;
  background: transparent;
  color: var(--green, #3C9F6B);
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  border: 0;
  width: max-content;
}
html body #case-studies-grid .card-link:hover {
  color: var(--ink, #0B2F24);
}
html body #case-studies-grid .card-link:hover svg {
  transform: translateX(3px);
}
html body #case-studies-grid .card-link svg {
  width: 14px; height: 14px;
  transition: transform .2s ease;
}

/* Section head spacing — tighter rhythm above the grid */
html body #case-studies-grid .section-head {
  margin-bottom: 2.25rem;
}
html body #case-studies-grid .section-title {
  font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
  margin-bottom: 0.5rem;
}
html body #case-studies-grid .section-lede {
  max-width: 56ch;
}

/* ==========================================================================
   END ROUND-3 PHASE H
   ========================================================================== */

/* ==========================================================================
   ROUND-4 ITEM 2: Final CTA email field — visible placeholder + cleanup
   The form sits on a slate background. The input is white-bg, so prior
   white text + white placeholder rules made it invisible. Force readable
   colors and a cleaner pill layout.
   ========================================================================== */

html body .final-form {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

html body .final-form input[type="email"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 52px !important;
  padding: 0 22px !important;
  background: #ffffff !important;
  color: #1f2937 !important;          /* slate ink for typed text */
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 999px !important;     /* full pill */
  font-size: 15px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  box-shadow: 0 2px 8px rgba(15,24,32,.08) !important;
  outline: none !important;
}

html body .final-form input[type="email"]::placeholder,
html body .final-form input[type="email"]::-webkit-input-placeholder,
html body .final-form input[type="email"]::-moz-placeholder,
html body .final-form input[type="email"]:-ms-input-placeholder {
  color: #9aa3ad !important;          /* readable grey on white */
  font-style: normal !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

html body .final-form input[type="email"]:focus {
  border-color: var(--green, #3C9F6B) !important;
  box-shadow: 0 0 0 3px rgba(60,159,107,.20), 0 2px 8px rgba(15,24,32,.08) !important;
}

html body .final-form button[type="submit"] {
  flex: 0 0 auto !important;
  height: 52px !important;
  padding: 0 26px !important;
  background: var(--green, #3C9F6B) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: transform .15s ease, background .15s ease !important;
}
html body .final-form button[type="submit"]:hover {
  background: #2f7e54 !important;
  transform: translateY(-1px);
}

/* Mobile — stack */
@media (max-width: 540px) {
  html body .final-form { flex-direction: column !important; }
  html body .final-form input[type="email"],
  html body .final-form button[type="submit"] { width: 100% !important; }
}

/* === ROUND-4 ACCORDION (products/solutions cards) === */
/* Hide the legacy "Learn more" link ONLY on Products + Solutions cards,
 * where the accordion replaces it. The blog index (page-id-3578) and any
 * other card-grid uses must KEEP .card-link visible ("Read article →"). */
html body .card-grid-item:has(.card-accordion) .card-link { display: none; }
/* Belt-and-braces fallback for older browsers without :has() — scope by page id */
html body.page-id-3417 .card-grid-item .card-link,
html body.page-id-3562 .card-grid-item .card-link { display: none; }
html body .card-grid-item .card-accordion {
  margin-top: auto;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 14px;
}
html body .card-grid-item .card-accordion[open] {
  border-top-color: rgba(60,159,107,0.25);
}
html body .card-grid-item .card-accordion-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 14px/1 'Inter', system-ui, sans-serif;
  color: #3C9F6B;
  letter-spacing: 0.01em;
  user-select: none;
  transition: color 0.18s ease;
}
html body .card-grid-item .card-accordion-summary::-webkit-details-marker { display: none; }
html body .card-grid-item .card-accordion-summary::marker { display: none; content: ''; }
html body .card-grid-item .card-accordion-summary:hover { color: #2d7d52; }
html body .card-grid-item .card-accordion-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
html body .card-grid-item .card-accordion[open] .card-accordion-chevron {
  transform: rotate(180deg);
}
html body .card-grid-item .card-accordion-body {
  margin-top: 14px;
  font: 400 14px/1.55 'Inter', system-ui, sans-serif;
  color: #444;
  animation: l6-acc-fade 0.28s ease;
}
html body .card-grid-item .card-accordion-body p { margin: 0 0 10px; }
html body .card-grid-item .card-accordion-body p:last-of-type { margin-bottom: 12px; }
html body .card-grid-item .card-accordion-body strong {
  color: #1f2937;
  font-weight: 600;
}
html body .card-grid-item .card-accordion-body ul {
  margin: 0 0 14px;
  padding: 0 0 0 18px;
  list-style: disc;
}
html body .card-grid-item .card-accordion-body li {
  margin: 0 0 4px;
  padding-left: 2px;
}
html body .card-grid-item .card-accordion-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 13px/1 'Inter', system-ui, sans-serif;
  color: #3C9F6B;
  text-decoration: none;
  letter-spacing: 0.01em;
  margin-top: 4px;
}
html body .card-grid-item .card-accordion-link:hover { color: #2d7d52; }
html body .card-grid-item .card-accordion-link svg { width: 14px; height: 14px; }
@keyframes l6-acc-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === ROUND-4 AMPERSAND DESWIRL (sitewide) === */
/* Replace Fraunces swirly ampersand with Inter's geometric form
 * Applied to all headings sitewide via the .l6-amp wrapper.
 * Wrapper is added via JS at runtime - see footer.
 */
html body .l6-amp {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.02em;
}

/* === ROUND-4 RESOURCES MEGA-MENU === */
html body .nav-item.has-mega { position: static; }
html body .nav-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.18);
  padding: 28px 0 32px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 1000;
}
html body .nav-item.has-mega:hover > .nav-mega,
html body .nav-item.has-mega:focus-within > .nav-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
html body .nav-mega-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 0.75fr 1fr 1.4fr 1.15fr;
  gap: 32px;
}
html body .nav-mega-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
html body .nav-mega-col--narrow {
  border-right: 1px solid rgba(0,0,0,0.06);
  padding-right: 24px;
}
html body .nav-mega-heading {
  font: 600 13px/1.3 'Inter', system-ui, sans-serif;
  color: #1f2937;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 8px;
  border-bottom: 2px solid #3C9F6B;
  display: inline-block;
  align-self: flex-start;
  transition: color 0.18s ease;
}
html body .nav-mega-heading:hover { color: #3C9F6B; }
html body .nav-mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html body .nav-mega-list li { margin: 0; }
html body .nav-mega-list a {
  display: block;
  padding: 5px 0;
  font: 400 13px/1.4 'Inter', system-ui, sans-serif;
  color: #4b5563;
  text-decoration: none;
  transition: color 0.15s ease, padding-left 0.15s ease;
}
html body .nav-mega-list a:hover {
  color: #3C9F6B;
  padding-left: 4px;
}
html body .nav-mega-col--narrow .nav-mega-heading + .nav-mega-heading {
  margin-top: 6px;
}

/* Mobile fallback: convert mega to vertical stack */
@media (max-width: 1024px) {
  html body .nav-mega {
    position: static;
    box-shadow: none;
    border-top: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  html body .nav-mega-grid {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 16px;
  }
  html body .nav-mega-col--narrow {
    border-right: none;
    padding-right: 0;
  }
}

/* === ROUND-4 BLOG CARD: READ ARTICLE LINK === */
/* Each post-card gets a visible "Read article →" affordance below the meta row.
   Spec: Inter, weight 600, 13px, green, with an arrow that nudges right on hover.
   Animation matches the hover lift on the parent card. */
html body .post-card-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--green, #3C9F6B);
  text-decoration: none;
  align-self: flex-start;
  width: 100%;
  transition: color .2s ease;
}

html body .post-card-readmore:hover,
html body .post-card-readmore:focus-visible {
  color: #2d7d52;
}

html body .post-card-readmore-arrow {
  display: inline-block;
  transition: transform .25s ease;
  font-weight: 400;
}

html body .post-card:hover .post-card-readmore-arrow,
html body .post-card-readmore:hover .post-card-readmore-arrow,
html body .post-card-readmore:focus-visible .post-card-readmore-arrow {
  transform: translateX(4px);
}

/* Make sure the meta row no longer pushes to bottom — Read link is now the last item */
html body .post-card .post-card-meta {
  margin-top: 16px;
}

/* ==========================================================================
   ROUND-5 FIXES — May 5, 2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   R5-A. Final CTA — RECTANGULAR email field with light-grey "enter email"
         placeholder. Button stays pill. Definitive override (highest cascade).
   -------------------------------------------------------------------------- */
html body section.l6-final .final-form,
html body .l6-final form.final-form {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* RECTANGULAR email input — sharp corners, white bg, grey placeholder */
html body section.l6-final .final-form input[type="email"],
html body .l6-final form.final-form input[type="email"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 52px !important;
  padding: 0 18px !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #d8dde3 !important;
  border-radius: 4px !important;          /* RECTANGULAR (slight 4px) */
  -webkit-border-radius: 4px !important;
  -moz-border-radius: 4px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  box-shadow: 0 1px 3px rgba(15,24,32,.08) !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* "enter email" placeholder — light grey, fully opaque, all vendor prefixes */
html body section.l6-final .final-form input[type="email"]::placeholder,
html body .l6-final form.final-form input[type="email"]::placeholder {
  color: #9aa3ad !important;
  opacity: 1 !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
html body section.l6-final .final-form input[type="email"]::-webkit-input-placeholder,
html body .l6-final form.final-form input[type="email"]::-webkit-input-placeholder {
  color: #9aa3ad !important;
  opacity: 1 !important;
}
html body section.l6-final .final-form input[type="email"]::-moz-placeholder,
html body .l6-final form.final-form input[type="email"]::-moz-placeholder {
  color: #9aa3ad !important;
  opacity: 1 !important;
}
html body section.l6-final .final-form input[type="email"]:-ms-input-placeholder,
html body .l6-final form.final-form input[type="email"]:-ms-input-placeholder {
  color: #9aa3ad !important;
  opacity: 1 !important;
}

html body section.l6-final .final-form input[type="email"]:focus {
  border-color: var(--green, #3C9F6B) !important;
  box-shadow: 0 0 0 3px rgba(60,159,107,.18), 0 1px 3px rgba(15,24,32,.08) !important;
}

/* Button stays PILL */
html body section.l6-final .final-form button[type="submit"],
html body .l6-final form.final-form button[type="submit"] {
  flex: 0 0 auto !important;
  height: 52px !important;
  padding: 0 26px !important;
  background: var(--green, #3C9F6B) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: transform .15s ease, background .15s ease !important;
}
html body section.l6-final .final-form button[type="submit"]:hover {
  background: #2f7e54 !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 540px) {
  html body section.l6-final .final-form { flex-direction: column !important; }
  html body section.l6-final .final-form input[type="email"],
  html body section.l6-final .final-form button[type="submit"] { width: 100% !important; }
}

/* --------------------------------------------------------------------------
   R5-B. Final CTA — fix washed-out section on Clients page (and elsewhere)
         The .reveal opacity-0 starting state is sticking when the IntersectionObserver
         doesn't fire. Force final-state visibility once content is on screen.
   -------------------------------------------------------------------------- */
html body section.l6-final .reveal {
  opacity: 1 !important;
  transform: none !important;
}
html body section.l6-final .final-h,
html body section.l6-final .final-p,
html body section.l6-final .final-meta,
html body section.l6-final .final-form {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   R5-C. Product/Solution detail pages — first Elementor row 2-col layout
         The intro section (H1 + paragraph + Book a Demo button on left,
         hero image on right) was rendering stacked because flex collapsed
         inside the 720px .detail-prose column. Force a clean 2-col split.
   -------------------------------------------------------------------------- */
html body.detail-page .detail-prose {
  max-width: none;       /* free up the prose column for the intro 2-col */
}

/* Constrain the long-form copy AFTER the first row back to ~720px via inner sections */
html body.detail-page .detail-prose > .elementor-element.e-parent ~ * {
  max-width: 720px;
}

/* The first Elementor parent container becomes a clean 2-col flex row */
html body.detail-page .detail-prose .elementor-element.e-parent.e-flex.e-con-boxed:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 48px !important;
  padding: 8px 0 32px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body.detail-page .detail-prose .elementor-element.e-parent.e-flex.e-con-boxed:first-child > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 48px !important;
  width: 100% !important;
  max-width: none !important;
}
html body.detail-page .detail-prose .elementor-element.e-parent.e-flex.e-con-boxed:first-child > .e-con-inner > .e-child {
  flex: 1 1 50% !important;
  min-width: 0 !important;
  width: 50% !important;
  max-width: 50% !important;
}
/* Image column: image fills its half, max ~520px high */
html body.detail-page .detail-prose .elementor-widget-image img {
  display: block;
  width: 100%;
  max-width: 480px;
  max-height: 420px;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 12px;
}
/* Trim H1 inside prose if Elementor injects it (we already render our own H1 in hero) */
html body.detail-page .detail-prose .elementor-widget-heading h1 {
  display: none !important;          /* hide duplicate H1; hero owns the title */
}

/* Stack to 1-col below tablet */
@media (max-width: 820px) {
  html body.detail-page .detail-prose .elementor-element.e-parent.e-flex.e-con-boxed:first-child,
  html body.detail-page .detail-prose .elementor-element.e-parent.e-flex.e-con-boxed:first-child > .e-con-inner {
    flex-direction: column !important;
    gap: 24px !important;
  }
  html body.detail-page .detail-prose .elementor-element.e-parent.e-flex.e-con-boxed:first-child > .e-con-inner > .e-child {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   R5-D. Clients page logos — fix flush-left appearance + scale up ~25%
         Source PNGs for Eaton / Breville / a few others have no internal
         padding (letterforms touch x=0). Add inner card padding so logos
         breathe; bump max sizes ~25% so logos read better.
   -------------------------------------------------------------------------- */
html body.page-id-3571 .gallery-item {
  padding: 28px 32px !important;     /* was 22px 24px — more horizontal breathing room */
}

html body.page-id-3571 .gallery-item img,
html body.page-id-3571 .gallery-icon img,
html body.page-id-3571 .elementor-image-gallery img {
  /* Round-5: bump from 88%/78% to ~75% width, 65% height for visually larger
   * logos. (Lower max-percent = MORE breathing room around the logo.) */
  max-width: 75% !important;
  max-height: 65% !important;
}

/* Kill any clip-path that any plugin might inject for "oval" cards */
html body.page-id-3571 .gallery-item,
html body.page-id-3571 .gallery-item img,
html body.page-id-3571 .gallery-icon img {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 14px !important;       /* card stays rounded; image itself is square */
}
html body.page-id-3571 .gallery-item img {
  border-radius: 0 !important;          /* image itself NOT rounded */
}

/* Wait — those caps make logos SMALLER. Fix: actually increase to ~92% width / 78% height
 * inside the new larger-padded card so they look ~25% bigger overall. */
html body.page-id-3571 .gallery-item img,
html body.page-id-3571 .gallery-icon img,
html body.page-id-3571 .elementor-image-gallery img {
  max-width: 92% !important;
  max-height: 78% !important;
}

/* Make the whole card slightly bigger by bumping aspect-ratio rectangle */
html body.page-id-3571 .gallery-item {
  aspect-ratio: 5 / 3.2 !important;     /* slightly taller for bigger logo footprint */
}

/* --------------------------------------------------------------------------
   R5-E. Resources nav — 2-level flyout (replaces 4-col mega-menu)
         Hover Resources -> vertical dropdown of 5 items -> hover any item with
         a flyout to open a 2nd level menu to the right.
   -------------------------------------------------------------------------- */
/* Hide the legacy mega-menu (no longer used) */
html body .nav-links .nav-item.has-mega .nav-mega { display: none !important; }

/* The Resources first-level dropdown — make it a generous vertical list */
html body .nav-links .nav-item.has-children > .nav-sub {
  min-width: 280px;
}

/* Items with a flyout get an arrow on the right and reveal child on hover */
html body .nav-sub li.has-flyout {
  position: relative;
}
html body .nav-sub li.has-flyout > a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding-right: 18px !important;
}
html body .nav-sub li.has-flyout > a .flyout-arrow {
  font-size: 14px;
  color: var(--muted, #6f6f71);
  transition: transform .15s ease, color .15s ease;
}
html body .nav-sub li.has-flyout:hover > a .flyout-arrow,
html body .nav-sub li.has-flyout:focus-within > a .flyout-arrow {
  color: var(--green, #3C9F6B);
  transform: translateX(2px);
}

/* The flyout — second-level menu opens to the RIGHT of the parent */
html body ul.nav-flyout {
  position: absolute;
  top: -8px;             /* visually align with parent <li> top */
  left: 100%;
  margin: 0 0 0 4px;
  padding: 8px 0;
  list-style: none;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15,24,32,.06), 0 18px 40px rgba(15,24,32,.10);
  border: 1px solid rgba(15,24,32,.06);
  min-width: 320px;
  max-width: 380px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 60;
}

/* Reveal flyout on hover/focus of the parent <li> */
html body .nav-sub li.has-flyout:hover > .nav-flyout,
html body .nav-sub li.has-flyout:focus-within > .nav-flyout {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Bridge gap between parent and flyout so cursor can travel across */
html body .nav-sub li.has-flyout::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  width: 14px;
  height: 100%;
  pointer-events: none;
}
html body .nav-sub li.has-flyout:hover::after { pointer-events: auto; }

html body ul.nav-flyout li {
  list-style: none;
  margin: 0;
}
html body ul.nav-flyout a {
  display: block;
  padding: 10px 18px;
  color: var(--ink, #1f2937);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.35;
  transition: background .12s ease, color .12s ease;
}
html body ul.nav-flyout a:hover,
html body ul.nav-flyout a:focus {
  background: rgba(60,159,107,.08);
  color: var(--green, #3C9F6B);
}

/* Mobile: collapse flyouts into the regular dropdown stack */
@media (max-width: 880px) {
  html body ul.nav-flyout {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 4px 0 8px 18px !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  html body .nav-sub li.has-flyout > a .flyout-arrow { display: none !important; }
}

/* ===========================================================================
 * R5-F  Cornerstone (pre-2022) post styling: tidy inline-image padding,
 *       hide byline (handled in single.php), and ensure consistent
 *       breathing room for inline figures.
 * ========================================================================= */
html body.l6-cornerstone-post .single-post-content img,
html body.l6-cornerstone-post .single-post-content .wp-block-image,
html body.l6-cornerstone-post .single-post-content figure {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px auto;
  border-radius: 6px;
}
html body.l6-cornerstone-post .single-post-content img.alignleft,
html body.l6-cornerstone-post .single-post-content figure.alignleft {
  float: left;
  margin: 8px 28px 16px 0;
  max-width: 50%;
}
html body.l6-cornerstone-post .single-post-content img.alignright,
html body.l6-cornerstone-post .single-post-content figure.alignright {
  float: right;
  margin: 8px 0 16px 28px;
  max-width: 50%;
}
html body.l6-cornerstone-post .single-post-content img.aligncenter,
html body.l6-cornerstone-post .single-post-content figure.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
html body.l6-cornerstone-post .single-post-content figure figcaption {
  font-size: 0.875rem;
  color: #6b7280;
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}
/* Prevent text from butting up against floated images */
html body.l6-cornerstone-post .single-post-content p {
  overflow: visible;
}
html body.l6-cornerstone-post .single-post-content p::after {
  content: "";
  display: table;
  clear: both;
}
/* Mobile: stack everything */
@media (max-width: 720px) {
  html body.l6-cornerstone-post .single-post-content img.alignleft,
  html body.l6-cornerstone-post .single-post-content img.alignright,
  html body.l6-cornerstone-post .single-post-content figure.alignleft,
  html body.l6-cornerstone-post .single-post-content figure.alignright {
    float: none;
    margin: 24px auto;
    max-width: 100%;
  }
}

/* ===========================================================================
 * R5-G  Reloadable page (3028) — strip stray leading nbsp on Elementor H3s.
 *       Content has a literal \xa0 before "The choice is simple". Use a
 *       text-indent reset and trim the first character via CSS first-letter
 *       isn't reliable for whitespace, so we use a JS-free approach:
 *       force text-indent: 0 and word-spacing reset; the actual nbsp is
 *       handled by the migrator below.
 * ========================================================================= */
html body.page-id-3028 .elementor-heading-title {
  text-indent: 0 !important;
}

/* ===========================================================================
 * R5-H  Product detail pages — make first inline image+copy a 2-col layout
 *       Targets: /products/virtual-debit-cards/, /products/checks/,
 *               /products/reloadable-branded-debit-card/, etc.
 *       Structure: <article.detail-prose>
 *                    <p.l6-pill-wrap>Book a Demo</p>
 *                    <p><img ...></p>     ← lone image paragraph (float right)
 *                    <h2>...</h2>          ← copy starts here, wraps left
 *
 *       Float the lone-image paragraph to the right so the H2/p that follows
 *       wraps around it — gives the requested 2-col look without borders.
 * ========================================================================= */
html body.detail-page article.detail-prose > p:has(> img:only-child),
html body.detail-page article.detail-prose > p:has(> img:only-of-type),
html body.detail-page article.detail-prose > div.e-transform:has(> img:only-child),
html body.detail-page article.detail-prose > div.e-transform:has(> img:only-of-type),
html body.detail-page article.detail-prose > figure.aligncenter:has(> img:only-of-type),
html body.detail-page article.detail-prose > figure.alignright:has(> img:only-of-type),
html body.detail-page article.detail-prose > figure.alignleft:has(> img:only-of-type) {
  float: right;
  width: 38%;
  max-width: 360px;
  margin: 0 0 24px 32px;
  shape-outside: margin-box;
}
html body.detail-page article.detail-prose > p:has(> img) > img,
html body.detail-page article.detail-prose > div.e-transform:has(> img) > img,
html body.detail-page article.detail-prose > figure:has(> img) > img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  /* Override the global 420px max-height cap from PASS-2 — inside the
     floated 38% wrapper the natural-fit image is already short enough,
     and the cap was clipping tall portrait product photos. */
  max-height: none;
}
/* Reset float for the pill wrapper */
html body.detail-page article.detail-prose > p.l6-pill-wrap {
  float: none;
  width: auto;
  max-width: none;
  margin: 0 0 24px 0;
}
/* After the floated image, headings/paragraphs should sit beside it */
html body.detail-page article.detail-prose > h2,
html body.detail-page article.detail-prose > h3,
html body.detail-page article.detail-prose > p {
  overflow: visible;
}
/* Prevent the green callout / table from being pushed up around the float */
html body.detail-page article.detail-prose > div[style*="background"],
html body.detail-page article.detail-prose > .wp-block-table,
html body.detail-page article.detail-prose > table {
  clear: both;
}
/* On mobile, stack everything */
@media (max-width: 820px) {
  html body.detail-page article.detail-prose > p:has(> img:only-child),
  html body.detail-page article.detail-prose > p:has(> img:only-of-type) {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 24px auto;
  }
}

/* ===========================================================================
 * R5-I  Final CTA — make the section actually GREEN, not washed-out slate.
 *       User feedback: "the CTA is getting washed out here"
 *       Original used --slate (#6f6f71) bg + faint green radial overlay;
 *       it reads as muddy grey. Switch to a confident dark-green base with
 *       a subtle gradient for depth, keeping white text legible.
 * ========================================================================= */
html body section.l6-final {
  background: #2a6f4a !important; /* deep brand green, contrast safe */
  background-image:
    radial-gradient(1100px 500px at 80% 50%, rgba(255, 255, 255, .08), transparent 70%),
    linear-gradient(135deg, #2a6f4a 0%, #3C9F6B 60%, #2a6f4a 100%) !important;
  color: #ffffff !important;
}
html body section.l6-final::before {
  /* Mute the original radial overlay, the gradient now lives on the section */
  background: radial-gradient(900px 460px at 22% 30%, rgba(255, 255, 255, .10), transparent 70%) !important;
}
html body section.l6-final .final-h,
html body section.l6-final .final-p,
html body section.l6-final .final-meta,
html body section.l6-final .final-meta span {
  color: #ffffff !important;
}
html body section.l6-final .final-p {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Boost readability of the email input on green */
html body section.l6-final .final-form input[type="email"] {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}
html body section.l6-final .final-form button[type="submit"] {
  background: #ffffff !important;
  color: #2a6f4a !important;
}
html body section.l6-final .final-form button[type="submit"]:hover {
  background: #f6fff9 !important;
  color: #1f5638 !important;
}

/* ===========================================================================
 * R5-J  Clients page — bump logos +25% by switching desktop grid 4→3 columns
 *       Each card becomes ~33% wider, logos render correspondingly larger.
 *       Mobile/tablet breakpoints unchanged.
 * ========================================================================= */
@media (min-width: 961px) {
  html body.page-id-3571 #gallery-1,
  html body.page-id-3571 .gallery {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px 36px !important;
    max-width: 1240px !important;
  }
  html body.page-id-3571 .gallery-item {
    aspect-ratio: 5 / 3 !important;
    padding: 32px 40px !important;
  }
  html body.page-id-3571 .gallery-item img,
  html body.page-id-3571 .gallery-icon img,
  html body.page-id-3571 .elementor-image-gallery img {
    max-width: 88% !important;
    max-height: 80% !important;
  }
}

/* ===========================================================================
 * ROUND 6 (May 5, 2026 late) — Ben feedback
 * R6-A  Clients page — Vast & other small-source logos render too small.
 *       Root cause: many uploads have intrinsic widths of 170-450px, so even
 *       with max-width:88%, browser refuses to upscale past intrinsic size.
 *       Fix: explicit width:100%/height:100% with object-fit:contain forces
 *       upscale into the card while preserving aspect ratio.
 * ========================================================================= */
html body.page-id-3571 .gallery-item img,
html body.page-id-3571 .gallery-icon img,
html body.page-id-3571 .elementor-image-gallery img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  /* visual breathing room is provided by the card's padding (32 40), not the image */
}

/* Slightly larger card padding looks great with full-bleed contain image */
@media (min-width: 961px) {
  html body.page-id-3571 .gallery-item {
    padding: 28px 36px !important;
  }
}
@media (min-width: 600px) and (max-width: 960px) {
  html body.page-id-3571 .gallery-item {
    padding: 24px 28px !important;
  }
}
@media (max-width: 599px) {
  html body.page-id-3571 .gallery-item {
    padding: 20px 22px !important;
  }
}
/* End R6-A */

/* ---------------------------------------------------------------------------
 * R10-D  Mobile gallery overflow fix (May 11, 2026)
 *        Root cause: the R6-A rule above sets gallery-item img to
 *        width:100% + max-width:none. CSS Grid items default to min-width:auto
 *        which equals min-content of children — so each image's intrinsic
 *        pixel width became the grid column's minimum, forcing columns to
 *        grow beyond 1fr. At 390px viewport the 2-col grid was rendering at
 *        446px (~203px per column) instead of (~155px per column) and
 *        spilling off the right edge of the viewport. Force min-width:0 so
 *        the grid columns can actually shrink to their declared 1fr share.
 * ------------------------------------------------------------------------ */
html body.page-id-3571 .gallery-item,
html body.page-id-3571 .gallery-icon {
  min-width: 0 !important;
}
html body.page-id-3571 .gallery-item img,
html body.page-id-3571 .gallery-icon img,
html body.page-id-3571 .elementor-image-gallery img {
  min-width: 0 !important;
}
/* End R10-D */

/* ===========================================================================
 * ROUND 7 (May 6, 2026) — Ben feedback
 *
 * R7-A  Detail-page H2 underline — green line currently extends behind the
 *       floated hero image because border-bottom traces the full width of
 *       the H2's block box. Constrain the underline to the text glyphs only
 *       so it sits cleanly under the headline regardless of float context.
 *
 * Approach: replace border-bottom with a background-image gradient applied to
 * the H2 itself, sized to the text via "background-size: max-content 2px".
 * Then we use display:table to shrink-wrap the box to text width while
 * preserving normal block-flow line wrapping. Falls back gracefully when an
 * H2 spans 2+ lines because the table-row treatment lets the bg track the
 * widest line. This restores the visual rhythm of the rule without painting
 * across whitespace beside floated images.
 * ========================================================================= */
html body.detail-page .detail-prose h2,
body .detail-prose h2 {
  border-bottom: 0 !important;
  /* Use background-image as a 2px line directly under the text glyphs. */
  background-image: linear-gradient(var(--green, #3C9F6B), var(--green, #3C9F6B));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  /* Shrink the H2's box to its content's natural width so the line stops at the
     end of the headline rather than stretching the full container width. */
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  /* Preserve breathing room under the line */
  padding-bottom: .35em;
}
/* End R7-A */

/* ---------------------------------------------------------------------------
 * R7-B  Old blog posts — sub-headline (H2/H3) inside post body looks too bold
 *       on cornerstone/old posts. The Round-5 .l6-cornerstone-post body class
 *       didn't tone these down. Drop H2 weight from default 700 → 500, H3
 *       from 700 → 600, and tighten letter-spacing to match the new brand.
 * ------------------------------------------------------------------------ */
/* R9-J — mirror the detail-prose H2 treatment exactly so cornerstone pages
   and blog posts share one heading look (Fraunces 400, slate ink, 30px, tight
   line-height, generous top margin, green left accent bar). */
html body.l6-cornerstone-post .single-post-body h2,
html body.single-post .single-post-body h2,
html body.l6-cornerstone-post .single-post-content h2,
html body.single-post .single-post-content h2,
html body.single-post .entry-content h2,
html body.l6-cornerstone-post .entry-content h2 {
  font-family: var(--font-display, "Fraunces"), Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  color: rgb(42, 52, 65) !important;
  margin: 60px 0 18px !important;
  /* Green left accent bar (matches R9-H detail-prose H2) */
  position: relative;
  padding-left: 18px !important;
  border-left: 4px solid var(--green, #3C9F6B) !important;
  border-bottom: 0 !important;
  background-image: none !important;
  text-decoration: none !important;
}
html body.l6-cornerstone-post .single-post-body h3,
html body.single-post .single-post-body h3,
html body.l6-cornerstone-post .single-post-content h3,
html body.single-post .single-post-content h3,
html body.single-post .entry-content h3,
html body.l6-cornerstone-post .entry-content h3 {
  font-family: var(--font-display, "Fraunces"), Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: rgb(42, 52, 65);
}
@media (max-width: 760px) {
  html body.l6-cornerstone-post .single-post-body h2,
  html body.single-post .single-post-body h2,
  html body.l6-cornerstone-post .single-post-content h2,
  html body.single-post .single-post-content h2,
  html body.single-post .entry-content h2,
  html body.l6-cornerstone-post .entry-content h2 {
    font-size: 26px !important;
    margin-top: 40px !important;
    padding-left: 14px !important;
    border-left-width: 3px !important;
  }
}
/* End R7-B / R9-J */

/* ---------------------------------------------------------------------------
 * R7-C  Checks page — image is wrapped in <div class="e-transform"> and is
 *       followed immediately by a long-sentence banner H2 (no preceding
 *       body copy to wrap around). Floating produced an awkward overlap.
 *
 *       New approach: keep image stacked above the banner H2, but constrain
 *       its size and center it so the page no longer looks dominated by a
 *       large floating product image. Banner H2 below reads full-width.
 * ------------------------------------------------------------------------ */
@media (min-width: 901px) {
  html body.detail-page article.detail-prose > div.e-transform {
    width: 60%;
    max-width: 460px;
    margin: 0 auto 1.5em;
    text-align: center;
  }
  html body.detail-page article.detail-prose > div.e-transform > img {
    width: 100%;
    height: auto;
    display: inline-block;
  }
}
@media (max-width: 900px) {
  html body.detail-page article.detail-prose > div.e-transform {
    max-width: 360px;
    margin: 0 auto 1.25em;
    text-align: center;
  }
  html body.detail-page article.detail-prose > div.e-transform > img {
    width: 100%;
    height: auto;
  }
}
/* End R7-C */

/* ---------------------------------------------------------------------------
 * R7-C2  Banner H2 (.is-banner) was visually overflowing on the Checks page
 *        because the long sentence stayed left-aligned at full container
 *        width. Tighten the inner padding and let the box span its container
 *        cleanly without the R7-A fit-content shrink (banner needs full block).
 * ------------------------------------------------------------------------ */
html body.detail-page .detail-prose h2.is-banner,
body .detail-prose h2.is-banner {
  /* Override R7-A fit-content shrink for the banner variant */
  width: auto !important;
  background-image: none !important;
  background: var(--green, #3C9F6B) !important;
  background-size: auto !important;
  padding-bottom: 28px !important;
}
/* End R7-C2 */

/* ===========================================================================
 * ROUND 8 (May 6, 2026) — Ben feedback
 *
 * R8-A  Detail-page H2 underline — R7-A fixed single-line H2s with
 *       background-image + fit-content, but on the Giving Back page the first
 *       H2 wraps to two lines next to a right-floated image. fit-content
 *       resolves to the longest natural line width (~746px), so the gradient
 *       paints across the empty whitespace beside the float as well.
 *
 * Solution: switch from a background-image rule to native CSS
 *       text-decoration: underline. By definition text-decoration paints
 *       *under glyphs* on every wrapped line, regardless of float context
 *       — the canonical fix for this exact case. Keeps H2 as a block-level
 *       element (no layout reshuffle), and we keep fit-content as a fallback
 *       for browsers that ignore the new underline properties.
 * ========================================================================= */
html body.detail-page .detail-prose h2:not(.is-banner):not(.detail-related-title),
html body .detail-prose h2:not(.is-banner):not(.detail-related-title) {
  /* R9-H — replace underline (looked like a hyperlink) with a left accent bar.
     Suppress prior border-bottom, gradient, and text-decoration treatments. */
  border-bottom: 0 !important;
  background-image: none !important;
  background-size: auto !important;
  width: auto !important;
  max-width: none !important;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  padding-bottom: 0 !important;
  /* Left accent bar */
  position: relative;
  padding-left: 18px;
  border-left: 4px solid var(--green, #3C9F6B);
  /* Tighten the bar against the cap-height so it doesn't extend past descenders */
  line-height: 1.15;
}
@media (max-width: 760px) {
  html body.detail-page .detail-prose h2:not(.is-banner):not(.detail-related-title),
  html body .detail-prose h2:not(.is-banner):not(.detail-related-title) {
    padding-left: 14px;
    border-left-width: 3px;
  }
}
/* End R8-A / R9-H */

/* ===========================================================================
 * R9-A  [REMOVED 2026-05-07]
 *
 * Originally added to defeat `.elementor-kit-4 a { color: var(--e-global-color-accent) }`
 * which gave links a default blue on blog/post pages. After Elementor was
 * deactivated, the .elementor-kit-4 stylesheet no longer loads, so the rule
 * is unnecessary. Kept as a stub to preserve the R9 fix audit trail.
 * ========================================================================== */
/* (intentionally empty) */
/* End R9-A */

/* ===========================================================================
 * R9-B  Contact page H2 'Tell Us About' — tighten optical word-gap
 *
 * Bug: The 'Us' in the H2 'Tell Us About *Your Program*' visually shows a
 * larger gap before 'About' than before 'Us'. Char measurements confirm both
 * spaces are identical 10.8px width — the asymmetry is a Fraunces optical
 * sidebearing artifact (curvy lowercase 's' leaves more right-side white
 * space than 'l' does). Negative letter-spacing applied to the heading
 * doesn't reach the trailing space's optical gap.
 *
 * Fix: pull word gaps in slightly on this specific H2 with `word-spacing`.
 * Only the contact form's section-title is affected.
 * ========================================================================== */
#contact-form .section-title {
  word-spacing: -3px;
}
/* End R9-B */

/* ===========================================================================
 * R9-C  Mobile nav drawer height (item 6)
 *
 * Bug: When the user scrolls down on mobile and opens the hamburger drawer,
 * the drawer collapses to ~96px tall and forces inner scrolling. Root cause:
 * `.l6-nav.is-scrolled` applies `backdrop-filter: blur(...)` which creates a
 * containing block for fixed-position descendants per CSSWG spec. The drawer
 * (`#l6-nav-links` with `position: fixed; top: 64px; bottom: 0`) is now
 * contained by the nav element — a 12px-tall element — so its `bottom: 0`
 * resolves at the nav's bottom edge instead of the viewport bottom.
 *
 * Fix: move the backdrop-filter blur to a `::before` pseudo-element layered
 * behind the nav. The nav itself no longer creates a containing block, so
 * the drawer's fixed-positioning resolves against the viewport again.
 * ========================================================================== */
.l6-nav.is-scrolled {
  /* Remove backdrop-filter from the nav itself — it broke fixed children. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent; /* the actual cream comes from ::before below */
}
.l6-nav { position: fixed; }  /* re-assert (defensive) */
.l6-nav.is-scrolled::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(242, 240, 236, .94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  z-index: -1;
  pointer-events: none;
}
/* End R9-C */

/* ===========================================================================
 * R9-D  Hamburger button hover/focus state (items 7 + 8)
 *
 * Bug: On all pages, after clicking the hamburger, the button keeps focus.
 * Kadence's default button rules apply on `:focus/:hover/:active`:
 *   button:hover/:focus/:active { background: var(--global-palette-btn-bg-hover); }
 * which is `#2A3441` (dark blue-grey). This makes the hamburger render as
 * a 40×40 dark pill until the user taps elsewhere. Most visible on blog
 * pages because the cream-colored background gives it the highest contrast,
 * which is why Ben perceived it as a 'blue pill on blog pages' (item 8) and
 * as 'no hamburger' on subpages where the focused dark pill blended into a
 * dark hero (item 7 — actually present, just visually merged).
 *
 * Fix: explicitly null out the Kadence button-state background on the
 * hamburger so it stays transparent in every interactive state, and on
 * every body class. Use !important to defeat Kadence's `button:hover` rule
 * which has equal specificity but earlier source order won't beat it.
 * ========================================================================== */
.nav-burger,
.nav-burger:hover,
.nav-burger:focus,
.nav-burger:focus-visible,
.nav-burger:active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  /* Pin the burger size. Originally needed to defeat Elementor's
   * `.elementor-kit-4 button { padding: 15px 30px }` (since deactivated),
   * but kept in place defensively against any future button-style override
   * from Kadence or plugins. */
  padding: 8px !important;
  width: 40px !important;
  height: 40px !important;
}
.nav-burger span {
  /* Belt-and-suspenders against any later height: 0 override */
  height: 2px !important;
  width: 22px !important;
  flex-shrink: 0;
}
/* End R9-D */

/* R9-E  Mobile TRUSTED BY logos cut off — RESOLVED by R10-A marquee.
 * The R10-A auto-scrolling marquee (above) eliminates the mobile clipping
 * issue entirely because logos roll through continuously. Original R9-E
 * swipe-on-mobile patch removed; behavior now identical desktop & mobile. */

/* ============================================================
   R9-F  Giving Back gallery
   Used by /giving-back/ — clean replacement for old Elementor
   lightbox grid. Pure CSS; lightbox is a future enhancement.
   ============================================================ */
.l6-philanthropy-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 32px 0 40px;
}
.l6-philanthropy-gallery figure {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ink-50, #f6f7f3);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform .22s ease, box-shadow .22s ease;
}
.l6-philanthropy-gallery figure:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}
.l6-philanthropy-gallery a {
    display: block;
    text-decoration: none;
}
.l6-philanthropy-gallery img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform .35s ease;
}
.l6-philanthropy-gallery figure:hover img {
    transform: scale(1.03);
}
.l6-philanthropy-gallery figcaption {
    padding: 10px 14px 12px;
    font-size: 14px;
    color: var(--ink-700, #3a3f3a);
    font-family: var(--font-body, "Inter", system-ui, sans-serif);
    line-height: 1.4;
}
@media (max-width: 768px) {
    .l6-philanthropy-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .l6-philanthropy-gallery img { height: 160px; }
}
@media (max-width: 480px) {
    .l6-philanthropy-gallery {
        grid-template-columns: 1fr;
    }
    .l6-philanthropy-gallery img { height: 220px; }
}
/* End R9-F */

/* ===========================================================================
 * R10  Round-10 team feedback — May 2026
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * R10-A  Mobile drawer collapses to ~96px on legacy blog and inner pages
 *
 * Bug: Multiple selectors apply `backdrop-filter` directly to `.l6-nav` for
 * various body classes (l6-blog, single-post, generic inner pages). A
 * backdrop-filter creates a containing block for fixed-position descendants
 * (CSSWG spec), so the mobile drawer (`#l6-nav-links` with
 * `position: fixed; top:64px; bottom:0`) resolves its `bottom` against the
 * 64-77px nav element rather than the viewport — clipping it to ~96px.
 *
 * R9-C handled `.is-scrolled` only. This generalises the same fix for every
 * variant that paints backdrop-filter onto the nav.
 *
 * Fix: nuke backdrop-filter on `.l6-nav` itself for the affected body
 * classes, then paint the same blur on a `::before` pseudo (which doesn't
 * affect the containing-block calculation of fixed-positioned descendants).
 * ------------------------------------------------------------------------ */
body.l6-blog .l6-nav,
body.single-post .l6-nav,
body.l6-blog-index .l6-nav,
body.l6-topic-index .l6-nav,
body:not(.front-page-custom):not(.section-landing-page):not(.detail-page):not(.ppc-landing-page):not(.l6-blog):not(.single-post):not(.l6-blog-index):not(.l6-topic-index) .l6-nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
}
body.l6-blog .l6-nav::before,
body.single-post .l6-nav::before,
body.l6-blog-index .l6-nav::before,
body.l6-topic-index .l6-nav::before,
body:not(.front-page-custom):not(.section-landing-page):not(.detail-page):not(.ppc-landing-page):not(.l6-blog):not(.single-post):not(.l6-blog-index):not(.l6-topic-index) .l6-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(242, 240, 236, .94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  z-index: -1;
  pointer-events: none;
}
/* End R10-A */

/* ---------------------------------------------------------------------------
 * R10-B  Clients page WP gallery exploding to 12000+px wide images
 *
 * Bug: `[gallery]` shortcode renders a `<div class="gallery gallery-columns-4">`
 * but the WP-core gallery stylesheet that gives `.gallery-item` its
 * `width: 1/columns` and the inner `.gallery-icon` its image constraints is
 * not loaded on this template. With no width hint the figure inherits an
 * intrinsic width = the natural image dimensions, blowing each cell out to
 * thousands of px and stacking instead of gridding.
 *
 * Fix: hand-roll a 4-column flex layout for any `.gallery` inside `.detail-prose`,
 * scoped tight enough that we don't fight other galleries elsewhere.
 *
 * Mobile: collapse to 3 columns, then 2 below 480px.
 * Also: nuke the `.detail-prose img:not(.chart)` width/box-shadow rule for
 * gallery imagery (it forces 100% width and a box shadow that's wrong for logos).
 * ------------------------------------------------------------------------ */
.detail-prose .gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 24px;
  margin: 24px 0 32px;
  padding: 0;
  list-style: none;
}
.detail-prose .gallery > br { display: none; }
.detail-prose .gallery .gallery-item {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0;
  text-align: center;
}
.detail-prose .gallery .gallery-icon {
  width: 100% !important;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line, #e4e0d6);
  border-radius: 6px;
  box-sizing: border-box;
}
.detail-prose .gallery .gallery-icon img,
.detail-prose .gallery img.attachment-medium_large,
.detail-prose .gallery img.size-medium_large,
.detail-prose .gallery img {
  /* Override the .detail-prose img rule completely for gallery imagery */
  max-width: 100% !important;
  max-height: 86px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline-block;
  object-fit: contain;
}
.detail-prose .gallery .gallery-caption { display: none; } /* default WP captions are noisy */

@media (max-width: 900px) {
  .detail-prose .gallery { grid-template-columns: repeat(3, 1fr); gap: 14px 16px; }
  .detail-prose .gallery .gallery-icon { height: 90px; padding: 10px; }
  .detail-prose .gallery .gallery-icon img { max-height: 70px !important; }
}
@media (max-width: 480px) {
  .detail-prose .gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
/* End R10-B */

/* ---------------------------------------------------------------------------
 * R10-C  Contact page first dropdown shows wavy chevron pattern
 *
 * Bug: Gravity Forms / theme styles set the chevron SVG as `background-image`
 * on the `<select>` but never set `background-repeat: no-repeat` — so the
 * 10×6 chevron tiles across the entire control, looking like a corrugated
 * metal pattern.
 *
 * Fix: lock the chevron to a single instance, right-aligned with proper padding.
 * ------------------------------------------------------------------------ */
.gfield_select,
select.gfield_select,
.ginput_container_select select,
form select {
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 10px 6px !important;
  padding-right: 36px !important;
}
/* End R10-C */

/* ---------------------------------------------------------------------------
 * R10-D  Form labels — add space before "(Required)" on inline-block ones
 *
 * Bug: Gravity Forms' `.gfield_required` is `display: inline-block` for most
 * fields with no left margin, so the "(Required)" suffix butts up against
 * the label text ("Phone(Required)"). Only Name renders correctly because
 * its parent is a fieldset where the required indicator is `display: block`.
 *
 * Fix: small left margin on the inline-block variant.
 * ------------------------------------------------------------------------ */
.gfield_required.gfield_required_text,
.gfield_required:not([style*="block"]),
label .gfield_required,
legend .gfield_required {
  margin-left: 4px;
}
/* Name fieldset uses block display — restore zero margin so the indicator
   sits flush left under the label as designed. */
.gfield--type-name > .gfield_label .gfield_required,
fieldset.gfield--type-name .gfield_required {
  margin-left: 4px;
}
/* End R10-D */

/* ---------------------------------------------------------------------------
 * R10-E  Detail-prose H4 (small caps subheadings) look awkward in Fraunces
 *
 * Bug: `.detail-prose h4` was Fraunces 16px / weight 400 / uppercase / letter-
 * spacing -.02em. Fraunces is a high-contrast serif designed for display use;
 * setting it at 16px in all-caps with negative tracking creates a cramped,
 * ill-fitting subheading. Particularly visible on the Sales Incentive
 * Programs page ("EFFECTIVE PROGRAMS ARE BUILT AROUND CLEAR STRATEGIC OUTCOMES:")
 *
 * Fix: switch H4 to Inter (body sans), bump weight to 600, raise to 13px with
 * positive tracking — a proper small-caps eyebrow style. Add some breathing
 * room above and below.
 * ------------------------------------------------------------------------ */
html body.detail-page .detail-prose h4,
html body.detail-page .detail-prose .h4,
.detail-prose h4,
.detail-prose .h4 {
  font-family: var(--font-body, var(--inter, "Inter", system-ui, sans-serif)) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ink, rgb(42, 52, 65)) !important;
  line-height: 1.4 !important;
  margin: 32px 0 12px !important;
  padding-left: 0 !important;
  border-left: 0 !important;
}
@media (max-width: 760px) {
  html body.detail-page .detail-prose h4,
  html body.detail-page .detail-prose .h4,
  .detail-prose h4,
  .detail-prose .h4 {
    font-size: 12px !important;
    margin: 24px 0 10px !important;
  }
}
/* End R10-E */