/* ================================================================
   BLAZEBYTE — ADDITIONAL CSS — FINAL
   Three fixes:
   1. Bridge dot animation — defines the missing keyframe
   2. Mobile dots — circular not pill-shaped
   3. Last node wider on Analytics page
   ================================================================ */

/* Elementor overflow fix */
.bb-page-hero .elementor-widget-wrap,
.bb-page-hero .elementor-column {
  overflow: visible !important;
}

@media (max-width: 600px) {

  /* Flow container */
  .bb-ga4-flow {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 86px !important;
    overflow: visible !important;
    margin: 18px 0 10px !important;
    flex-wrap: unset !important;
  }

  /* All nodes */
  .bb-ga4-flow-node {
    position: absolute !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.62rem !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  /* All pipes */
  .bb-ga4-flow-pipe {
    position: absolute !important;
    height: 2px !important;
    min-width: unset !important;
    max-width: unset !important;
    overflow: visible !important;
    flex: none !important;
  }

  /* Hide SVGs */
  .bb-ga4-flow-node svg { display: none !important; }

  /* Row 1 */
  .bb-ga4-flow > *:nth-child(1) { left: 0 !important;   top: 0 !important;    width: 30% !important; }
  .bb-ga4-flow > *:nth-child(2) { left: 30% !important; top: 14px !important; width: 8% !important;  }
  .bb-ga4-flow > *:nth-child(3) { left: 38% !important; top: 0 !important;    width: 24% !important; }
  .bb-ga4-flow > *:nth-child(4) { left: 62% !important; top: 14px !important; width: 8% !important;  }
  .bb-ga4-flow > *:nth-child(5) { left: 70% !important; top: 0 !important;    width: 30% !important; }

  /* Bridge pipe — vertical */
  .bb-ga4-flow > *:nth-child(6) {
    left: 84% !important;
    top: 28px !important;
    width: 2px !important;
    height: 26px !important;
    background: rgba(255,106,0,0.5) !important;
    box-shadow: 0 0 5px rgba(255,106,0,0.3) !important;
    overflow: visible !important;
  }

  /* FIX 1: Bridge dot — circular, uses transform, keyframe defined below */
  .bb-ga4-flow > *:nth-child(6) .bb-ga4-flow-dot,
  .bb-ga4-flow-bridge-dot {
    width: 8px !important;
    height: 8px !important;
    left: -3px !important;
    top: 0 !important;
    border-radius: 50% !important;
    background: var(--bb-or) !important;
    box-shadow: 0 0 8px rgba(255,106,0,0.9) !important;
    animation: bb-ga4-dot-bridge 1.6s linear infinite !important;
    animation-duration: 2s !important;
  animation-delay: 0s !important;
  }

  /* Row 2 */
  .bb-ga4-flow > *:nth-child(7) { right: 0 !important;   bottom: 0 !important;    top: auto !important; left: auto !important; width: 30% !important; }
  .bb-ga4-flow > *:nth-child(8) { right: 30% !important; bottom: 14px !important; top: auto !important; left: auto !important; width: 8% !important;  
	
	animation-duration: 2s !important;
  animation-delay: 0s !important;}
  .bb-ga4-flow > *:nth-child(9) { right: 38% !important; bottom: 0 !important;    top: auto !important; left: auto !important; width: 30% !important; }

  /* Row 2 reverse dot */
  .bb-ga4-flow > *:nth-child(8) .bb-ga4-flow-dot {
    animation: bb-ga4-dot-flow-rev 1.8s linear infinite !important;
    animation-duration: 2s !important;
  animation-delay: 0s !important;
  }

  /* 4-node flow (GA4 service page) */
  .bb-ga4-flow > *:nth-child(7):last-child {
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    left: auto !important;
    width: 34% !important;
  }

  /* FIX 2: All dots — circular like desktop, not pill */
  .bb-ga4-flow-dot {
  width: 7px !important;
  height: 7px !important;
  top: -2.5px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px rgba(255,106,0,0.8) !important;
		animation-duration: 2s !important;
  animation-delay: 0s !important;
}

  /* Flow label */
  .bb-ga4-flow-label {
    display: block !important;
    margin-top: 4px !important;
    font-size: 0.65rem !important;
  }
}

/* ================================================================
   KEYFRAMES — all defined here, no duplicates
   ================================================================ */

/* FIX 1: The missing keyframe — this is why bridge only flickered */
@keyframes bb-ga4-dot-bridge {
  0%   { transform: translateY(0);    opacity: 1; }
  80%  { transform: translateY(18px); opacity: 1; }
  100% { transform: translateY(18px); opacity: 0; }
}

/* Row 2 reverse */
@keyframes bb-ga4-dot-flow-rev {
  0%   { left: calc(100% - 8px); opacity: 1; }
  80%  { left: 0;                opacity: 1; }
  100% { left: 0;                opacity: 0; }
}

.bb-page-h1 em{
  color:var(--bb-or);
  font-style:normal;
}

.elementor-heading-title a.highlight-text,
a.highlight-text,
a.highlight-text:visited {
  color: var(--bb-or) !important;   /* brand orange */
  font-weight: 700;
  text-decoration: none !important;
  transition: color 0.25s ease;
}

/* BlazeByte Form Headline — Responsive Typography */
.form-heading .elementor-heading-title {
  font-size: 40px !important;    /* desktop */
  line-height: 1.2;
  font-weight: 800;
}

/* Tablet breakpoint */
@media (max-width: 1024px) {
  .form-heading .elementor-heading-title {
    font-size: 32px !important;
    line-height: 1.3;
  }
}

/* Tablet (medium screens) */
@media (max-width: 1024px) {
  .section-heading .elementor-heading-title {
    font-size: 30px !important;
    line-height: 1.25;
  }
}

/* =======================
   Mobile Typography & Optimisation (Elementor-safe + fluid)
   ======================= */
@media (max-width: 767px) {

  /* 1) H2 — fluid across all phones */
  
  .elementor h2,
  .elementor .elementor-heading-title.elementor-size-h2,
  .elementor .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(22px, 5.6vw, 30px) !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;        
    font-variation-settings: "wght" 600;
    letter-spacing: -0.01em !important;  /* more natural than -0.2px */
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* 2) Body text (Elementor content only, not full site globally) */
  .elementor,
  .elementor p,
  .elementor .elementor-widget-text-editor,
  .elementor .elementor-widget-text-editor p {
    font-size: clamp(15px, 3.9vw, 17px) !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* 3) Section heading class */
  .elementor .elementor-heading-title.section-heading {
    font-size: clamp(20px, 5vw, 26px) !important;
    line-height: 1.2 !important;
    text-align: center;
    padding-inline: 12px;
    overflow-wrap: anywhere;
  }

  /* 4) Form heading class */
  .elementor .form-heading .elementor-heading-title {
     font-size: clamp(24px, 6vw, 30px) !important;
    line-height: 1.22 !important;
    font-weight: 600 !important;
    font-variation-settings: "wght" 600;
    text-align: center;
    padding-inline: 10px;
  }

  /* 5) bb-pill padding (mobile) */
  .elementor .bb-pill .elementor-heading-title {
    padding: 6px 10px !important;
  }

  /* 6) bb-rect padding (mobile) */
  .elementor .bb-rect .elementor-heading-title {
    padding: 12px 14px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
  }
}

/* 🔥 BlazeByte — Unified fix for H4/H5 and custom grid headings */
.elementor-widget-text-editor h4,
.elementor-widget-text-editor h5 {
  color: inherit;
}

/* 🔸 BlazeByte Grid Headings (H5s in Service Sections) */
.elementor-widget-text-editor h3.grid-heading,
.elementor-widget-text-editor h4.grid-heading,
.elementor-widget-text-editor h5.grid-heading {
  color: #122036 !important;
  font-weight: 700;
  line-height: 1.4;
}

/* 🌐 BlazeByte Global Paragraph Font — Inter / Default Stack (Black Text, Optimized Line Height) */
body,
p,
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 1.6; /* better breathing room for service pages */
}

/* 🧩 Optional: maintain natural spacing between text blocks */
.elementor-widget-text-editor p {
  margin-bottom: 12px;
}

/* 🪶 Optional: clean link style for readability & conversions */
.elementor-widget-text-editor a {
  color: #ED4D00; /* BlazeByte accent orange/red */
  text-decoration: none;
  transition: color 0.25s ease;
}

.elementor-widget-text-editor a:hover {
  color: #A12800; /* darker hover shade for visual feedback */
  text-decoration: underline;
}

/* hover/focus */
.elementor-heading-title a.highlight-text:hover,
a.highlight-text:hover,
a.highlight-text:focus {
  color: var(--bb-or-d) !important;   /* brand red */
  text-decoration: none !important;
}

h2 {
  text-transform: none !important;
}

h4, .elementor-heading-title {
    text-transform: none !important;
}

.page .entry-title {
    display: none;
}

.page-id-1527 .entry-title {
    display: none;
}

/* Dropdown panel */
.main-header-menu .sub-menu,
.ast-mobile-popup-content .sub-menu {
  background: #090A0F; /* dark bluish shade */
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
}

/* Remove stray white gaps */
.main-header-menu .sub-menu li { background: transparent; }

/* B.1 L7 — Nav label DB update 2026-08-03:
   wp_posts ID 11344 post_title = 'CRO' (was linked page title 'Conversion Rate Optimization')
   wp_posts ID 3824  post_title = 'Free Audit' (was 'Get Your Free Audit')
   Wrap threshold moved 1490px → 1234px. Revert: restore post_title values above. */

@media (min-width: 1271px){

  /* Header grid = bb-wrap grid.
     Astra puts margin:60px on .site-header and padding:35px on .ast-container.
     We zero the side margins and replace container padding with bb-wrap's 24px,
     so logo-left and CTA-right land on the same vertical lines as content below.
     max-width:1320px + margin:auto mirrors bb-wrap centering exactly. */
  .ast-hfb-header .site-header {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .site-header .main-header-bar .ast-container {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 18px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }

  /* L1 — removed padding-right:50px (B.1 nav-fit fix) */

  /* ===== Desktop: brand-orange hover for menu text ===== */
  /* Top-level menu links (base + hover/active) */
  .ast-desktop .main-header-bar .main-header-menu > .menu-item > .menu-link {
    color: #FFFFFF !important; /* base */
  }
  .ast-desktop .main-header-bar .main-header-menu > .menu-item:hover > .menu-link,
  .ast-desktop .main-header-bar .main-header-menu > .menu-item:focus > .menu-link,
  .ast-desktop .main-header-bar .main-header-menu > .menu-item.current-menu-item > .menu-link,
  .ast-desktop .main-header-bar .main-header-menu > .menu-item.current-menu-ancestor > .menu-link {
    color: var(--bb-or) !important; /* brand orange */
  }

  /* Submenu links (inside the dropdown) */
  .ast-desktop .main-header-menu .sub-menu a {
    color: #FFFFFF !important; /* base */
  }
  .ast-desktop .main-header-menu .sub-menu a:hover,
  .ast-desktop .main-header-menu .sub-menu .current-menu-item > a {
    color: var(--bb-or) !important; /* brand orange on hover/active */
  }

/* Current page = orange + bold (DESKTOP) */
  .ast-desktop .main-header-bar .main-header-menu > .menu-item.current-menu-item > .menu-link,
  .ast-desktop .main-header-bar .main-header-menu > .menu-item.current-menu-ancestor > .menu-link{
    color: var(--bb-or) !important;
    font-weight: 700 !important;
  }
  .ast-desktop .main-header-menu .sub-menu .current-menu-item > a{
    color: var(--bb-or) !important;
    font-weight: 700 !important;
  }
  
  /* Bigger CTA – DESKTOP */
  .ast-desktop .main-header-bar .main-header-menu > .menu-item.menu-cta > .menu-link{
    padding: 14px 22px !important;   /* wider pill — was 14px (L3), now 22px h-padding */
    border-radius: 10px !important;  /* softer corners */
    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;
    margin-left: 14px !important;    /* gap between Contact and Free Audit */
  }
  .ast-desktop .main-header-bar .main-header-menu > .menu-item.menu-cta > .menu-link:hover{
    background: var(--cta-bg-h) !important;
  }
}

/* Same treatment on MOBILE (optional, keep if you want consistency) */
@media (max-width: 1270px){
  
  .site-branding {
    padding-left: 0 !important;
  }

  .ast-main-header-bar-alignment {
    padding-right: 0 !important;
  }
  
  .ast-header-break-point .main-header-menu > .current-menu-item > .menu-link,
  .ast-header-break-point .main-header-menu > .current-menu-ancestor > .menu-link,
  .ast-header-break-point .main-header-menu .sub-menu .current-menu-item > a{
    color: var(--bb-or) !important;
    font-weight: 700 !important;
  }
  
/* ====== ASTRA MOBILE (dropdown mode, not off-canvas) ====== */

  /* 2) Darken each row & link (Astra sets these to white by default) */
  .ast-header-break-point .main-header-menu > .menu-item,
  .ast-header-break-point .main-header-menu > .menu-item > .menu-link{
    background: var(--bb-dark) !important;
  }

  /* 3) Text + hover/active */
  .ast-header-break-point .main-header-menu .menu-link{
    color: var(--bb-text) !important;
  }
  .ast-header-break-point .main-header-menu .menu-link:hover,
  .ast-header-break-point .main-header-menu .current-menu-item > .menu-link{
    color: var(--bb-accent) !important;
  }

  /* 4) Submenu toggles (carets) */
  .ast-header-break-point .ast-menu-toggle,
  .ast-header-break-point .ast-icon{
    color: var(--bb-text) !important;
  }
  .ast-header-break-point .ast-menu-toggle:hover,
  .ast-header-break-point .ast-icon:hover{
    color: var(--bb-accent) !important;
  }
  
  /* MOBILE CTA (inside dropdown) */
  .ast-header-break-point 
  .main-header-menu 
  .menu-item.menu-cta > .menu-link{
    display: block;
    background: var(--cta-bg) !important;
    color: var(--cta-text) !important;
    padding: 12px 18px !important;   /* final size */
    border-radius: 10px !important;  /* final radius */
    font-weight: 600 !important;
    margin: 8px auto;
    text-align: center;
    max-width: 200px;
    font-size: 15px !important;      /* final font size */
    line-height: 1.3 !important;

    border: none !important;         /* removes Astra underline */
    box-shadow: none !important;     /* prevents extra shadows */
  }
  
}

/* Base style for inline "Learn More" links */
a.learnmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
  color: var(--bb-or);                 /* BlazeByte orange */
  transition: color .25s ease, transform .25s ease;
}

/* Optional arrow using ::after if you don't type it in text */
a.learnmore::after {
  content: "→";
  line-height: 1;
  position: relative;
  top: 4px; /* adjust this until it aligns perfectly */
  transform: translateX(0);
  transition: transform .25s ease;
}

/* Hover/Focus states: deeper orange + subtle nudge */
a.learnmore:hover,
a.learnmore:focus {
  color: var(--bb-or-d);                 /* deeper BlazeByte orange */
  transform: translateY(-1px);
  outline: none;
}

/* Make arrow glide on hover */
a.learnmore:hover::after,
a.learnmore:focus::after {
  transform: translateX(3px);
}

/* Subtle underline reveal on hover (keeps things clean by default) */
a.learnmore {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
}
a.learnmore:hover,
a.learnmore:focus {
  background-size: 100% 2px;
}

/* Spacing if you stack multiple learn-more links in a column */
.learnmore + .learnmore { margin-left: 16px; }

/* Mobile tap target comfort */
@media (max-width: 767px) {
  a.learnmore { gap: 6px; }
}

/* Paragraph CTAs only; leaves H3 learnmore alone */
p .learnmore{
  display:inline-flex;
  align-items:center;
  gap:8px;
  line-height:1.3;
}
p .learnmore::after{
  content:"→";
  position:static !important;
  transform:translateX(0);
  transition:transform .25s ease;
}
p .learnmore:hover::after{ transform:translateX(3px); }

/* Google Ads link style */
a.learnmore.google-ads {
  color: #1172BE; /* deeper Google green */
}
a.learnmore.google-ads:hover {
  color: #0D5C9A;
}

/* Meta Pixel link style */
a.learnmore.meta-pixel {
  color: #1877F2;
}
a.learnmore.meta-pixel:hover {
  color: #145DBF;
}

/* Responsive spacing for all Elementor sections */
@media (max-width: 1024px) { /* Tablet */
    .elementor-section {
        margin-bottom: 40px !important;
    }
}
@media (max-width: 767px) { /* Mobile */
    .elementor-section {
        margin-bottom: 30px !important;
    }
}

/* Underline highlight under headings */
.bb-head-underline .elementor-heading-title {
  display: inline;
  background-image: linear-gradient( to top, rgba(255,106,0,.18) 0%, rgba(255,106,0,.18) 46%, transparent 46% );
  background-repeat: no-repeat;
  background-size: 100% 1.05em; /* how tall the highlight is */
  background-position: 0 100%;
  padding: 0 .06em; /* tiny left/right breathing room */
}

/* =======================
   Base Pill Styles
   ======================= */
.bb-pill .elementor-heading-title { display: inline-block; padding: 30px 30px; border-radius: 15px; /* fully rounded */ font-weight: 600; transition: all 0.3s ease; box-shadow: 0 6px 18px rgba(5,18,45,.06); }

/* =======================
   Rectangular Badge Style
   ======================= */
.bb-rect .elementor-heading-title {
  display: inline-block;
  padding: 20px 20px;
  border-radius: 12px; /* rectangular, slight rounding */
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid #ff5a00; /* orange border */
  color: #05122d;
  background: #fff;
  box-shadow: 0 6px 18px rgba(5,18,45,.06);
}

.bb-rect:hover .elementor-heading-title {
  transform: translateY(-2px);
  border-color: #e14b00;
  color: #e14b00;
  box-shadow: 0 8px 22px rgba(255,90,0,.25);
}

/* =======================
   Color Variants for Pills
   ======================= */
.bb-pill-orange .elementor-heading-title {
  background: rgba(255,106,0,.10);
  color: #ff5a00;
}

.bb-pill-green .elementor-heading-title {
  background: rgba(37,211,102,.10);
  color: #25d366;
}

.bb-pill-neutral .elementor-heading-title {
  background: rgba(5,18,45,.06);
  color: #05122d;
}

.bb-pill-blue .elementor-heading-title {
  background: rgba(0,122,255,.10);
  color: #007aff;
}

/* =======================
   Hover Animations
   ======================= */
.bb-pill:hover .elementor-heading-title {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(5,18,45,.12);
}

/* Orange Glow */
.bb-pill-orange:hover .elementor-heading-title {
  box-shadow: 0 8px 22px rgba(255,90,0,.25);
  color: #e14b00;
}

/* Green Glow */
.bb-pill-green:hover .elementor-heading-title {
  box-shadow: 0 8px 22px rgba(37,211,102,.25);
  color: #1aa653;
}

/* Neutral Glow */
.bb-pill-neutral:hover .elementor-heading-title {
  box-shadow: 0 8px 22px rgba(5,18,45,.15);
  color: #000;
}

/* Blue Glow */
.bb-pill-blue:hover .elementor-heading-title {
  box-shadow: 0 8px 22px rgba(0,122,255,.25);
  color: #0056cc;
}

/* White headings inside solid blue strip */
.bb-strip-darkblue h2,
.bb-strip-darkblue .elementor-heading-title {
  color: #ffffff !important;
}

/* CTA Strip (high emphasis, conversion-focused) */
.bb-strip-cta {
  background-color: #FFF7E6 !important; /* warm, high-visibility CTA background */
  padding: 70px 0;
}

/* Neutral Grey Strip (for separators, testimonials, etc.) */
.bb-strip-neutral {
  background-color: var(--bb-l1) !important; /* clean neutral tone */
  padding: 60px 0;
}

/* Orange Strip Headings (H2 inside .bb-strip-orange) */
.bb-strip-orange h2 {
  color: #1A2B59 !important; /* deep navy for contrast */
}

/* Blue Strip Headings */
.bb-strip-blue h2 {
  color: #122036 !important; /* slightly darker navy */
}

/* CTA Strip Headings */
.bb-strip-cta h2 {
  color: #D35400 !important; /* warm CTA orange */
}

/* Neutral Strip Headings */
.bb-strip-neutral h2 {
  color: #1A1A1A !important; /* clean dark gray, softer than pure black */
}

/* ===== BlazeByte • Final CTA Heading (robust hover) ===== */
.cta-heading-final{
  position: relative;
  display: inline-block;
  text-align: center;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .2px;
  margin: 0 0 14px;
  font-size: clamp(28px, 2.6vw, 40px);
}

/* Target Elementor's inner text node */
.cta-heading-final .elementor-heading-title{
  color: var(--bb-or);                /* default brand orange */
  transition: color .35s ease;
}

/* Animated underline */
.cta-heading-final::after{
  content:"";
  position:absolute;
  left:50%; bottom:-10px;
  transform:translateX(-50%);
  height:6px; width:28%; max-width:420px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--bb-or), #FF914D);
  background-size:200% 100%;
  box-shadow:0 4px 12px rgba(255,102,0,.35);
  transition: width .45s ease, background-position .6s ease, filter .3s ease;
}

/* Hover: text shifts to brand reddish + bar animates */
.cta-heading-final:hover .elementor-heading-title{
  color:var(--bb-or-d);                 /* brand reddish */
}
.cta-heading-final:hover::after{
  width:72%;
  background-position:100% 0;
  filter:brightness(1.05);
}

/* ---- Gradient modifier (optional) ---- */
.cta-heading-final--brand .elementor-heading-title{
  background: linear-gradient(90deg,var(--bb-or) 0%,#FF3C00 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent; /* overrides normal color */
  color: transparent;                    /* cross-browser fallback */
  transition: -webkit-text-fill-color .35s ease, color .35s ease;
}

/* On hover, force solid reddish even if gradient is active */
.cta-heading-final.cta-heading-final--brand:hover .elementor-heading-title{
  background: none !important;
  -webkit-text-fill-color: var(--bb-or-d) !important;
  color: var(--bb-or-d) !important;
}

/* Mobile tweak */
@media (max-width: 480px){
  .cta-heading-final::after{ width:60%; height:5px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .cta-heading-final,
  .cta-heading-final::after{ transition:none; }
}

/* ===== Pricing Plans (Premium Agency Style + Typography Fix) ===== */
.bb-plans { gap: 28px; }

/* Card wrapper */
.bb-plan{
  background:#fff;
  border:1px solid rgba(5,18,45,.12);
  border-radius:16px;
  padding:26px 24px 24px;
  box-shadow:0 8px 28px rgba(5,18,45,.08);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  height:100%;
  display:flex;
  flex-direction:column;
  position:relative;
  font-size:16px;        /* base font size inside card */
  line-height:1.6;
}

/* Featured (middle) card */
.bb-plan--featured{
  border:2px solid var(--bb-or);
  box-shadow:0 14px 36px rgba(255,106,0,.20);
}

/* Hover lift */
.bb-plan:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 44px rgba(5,18,45,.14);
  border-color:rgba(255,106,0,.35);
}

/* Titles */
.bb-plan__title,
.bb-plan h3{
  font-size:clamp(24px, 1.4rem + 0.4vw, 28px);
  line-height:1.25;
  font-weight:700;
  margin-bottom:10px;
}

/* Taglines (sub description) */
.bb-plan__tagline{
  font-size:clamp(15px, 0.95rem + 0.15vw, 17px);
  color:#485563;
  margin-bottom:16px;
  line-height:1.55;
}

/* ===== Price block (centered + premium style) ===== */
.bb-price{
  text-align:center;
  margin:18px 0;
  padding:14px 0;
  border-top:1px solid rgba(0,0,0,0.08);
  border-bottom:1px solid rgba(0,0,0,0.08);
}

.bb-price__num{
  display:block;
  font-size:clamp(30px, 1.6rem + 0.8vw, 38px);
  font-weight:800;
  color:#ff7c2c;
  margin-bottom:6px;
}

.bb-price__note{
  display:block;
  font-size:15px;
  color:#555;
  letter-spacing:.3px;
}

/* === Growth (Most Popular) price highlight – vibrant brand orange === */
.bb-plan--featured .bb-price{
  border-top:2px solid rgba(255,106,0,0.3);
  border-bottom:2px solid rgba(255,106,0,0.3);
  background:linear-gradient(180deg, rgba(255,106,0,0.08) 0%, rgba(255,106,0,0.03) 100%);
  border-radius:8px;
  padding:14px 0;
}

.bb-plan--featured .bb-price__num{
  font-size:clamp(36px, 1.8rem + 1vw, 44px);  /* slightly larger */
  font-weight:900;
  color:var(--bb-or);                               /* brand orange */
  text-shadow:0 1px 3px rgba(0,0,0,0.12);
  letter-spacing:-0.5px;
}

/* Features list */
.bb-features{ margin:16px 0; padding-left:20px; }
.bb-features li{ margin:9px 0; font-size:16px; line-height:1.6; }

/* Turnaround */
.bb-turnaround{ 
  font-size:15px;
  margin-top:50px;
}

/* CTA pinned to bottom */
.bb-plan__cta{ margin-top:auto; text-align:center; padding-top:12px; }
.bb-plan__cta .elementor-button{ width:auto; font-size:16px; font-weight:700; }

/* Growth plan CTA – darker, premium */
.bb-plan--featured .bb-plan__cta .elementor-button{
  background:#E55A00 !important;
  border:none;
  color:#fff;
  font-weight:700;
  box-shadow:0 6px 18px rgba(229,90,0,0.35);
  transition:all .25s ease;
}
.bb-plan--featured .bb-plan__cta .elementor-button:hover{
  background:#cc4d00 !important;
  box-shadow:0 8px 22px rgba(229,90,0,0.45);
  transform:translateY(-2px);
}

.bb-plan--featured .bb-plan__cta.bb-btn-primary {
  background: var(--bb-or) !important;
  color: #ffffff !important;
  border: none !important;
}

.bb-plan--featured .bb-plan__cta.bb-btn-primary:hover {
  background: var(--bb-or-d) !important;
}

/* Ribbon */
.bb-plan--featured .bb-ribbon{
  position:absolute;
  top:-14px; left:50%;
  transform:translateX(-50%);
  background:var(--bb-or);
  color:#fff;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.4px;
  padding:6px 12px;
  border-radius:999px;
  box-shadow:0 8px 20px rgba(255,106,0,.35);
  z-index:3;
}

/* =========================================================
   WhatsApp button (by ID or class)
   ========================================================= */
#whatsapp,
.elementor a.elementor-button.whatsapp {
  background-color: #25D366 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
#whatsapp:hover,
.elementor a.elementor-button.whatsapp:hover {
  background-color: #1EBE5D !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transform: translateY(-2px);
}

/* Primary (solid orange) */
.elementor a.elementor-button.btn-primary {
  background:#FF6600 !important;
  color:#fff !important;
  border:2px solid #FF6600 !important;
}
.elementor a.elementor-button.btn-primary:hover {
  background:var(--bb-or-d) !important;
  border-color:var(--bb-or-d) !important;
  transform:translateY(-2px);
}

/* ===== Learn buttons (by Button ID; underscores only) ===== */
/* Works whether the ID is on the anchor or the widget wrapper */

/* ===== WHITE (Primary CTA) ===== */
a.elementor-button[id^="learn_white"],
[id^="learn_white"] a.elementor-button {
  background: #fff !important;
  color: var(--bb-or) !important;
  border: 2px solid var(--bb-or) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.10) !important;
  transition: all .3s ease !important;
}
a.elementor-button[id^="learn_white"]:hover,
[id^="learn_white"] a.elementor-button:hover {
  background: var(--bb-or) !important; /* Orange hover */
  color: #fff !important;
  border-color: var(--bb-or) !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
}

/* ===== ORANGE (Primary CTA) ===== */
a.elementor-button[id^="learn_orange"],
[id^="learn_orange"] a.elementor-button {
  background: var(--bb-or) !important;
  color: #FFF !important;
  border: 2px solid var(--bb-or) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.10) !important;
  transition: all .3s ease !important;
}
a.elementor-button[id^="learn_orange"]:hover,
[id^="learn_orange"] a.elementor-button:hover {
  background: var(--bb-or-d) !important; /* Orange hover */
  color: #fff !important;
  border-color: var(--bb-or-d) !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
}

/* ===== GHOST (Secondary CTA) ===== */
a.elementor-button[id^="learn_ghost"],
[id^="learn_ghost"] a.elementor-button {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid var(--bb-or) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.12) !important;
  transition: all .3s ease !important;
}
a.elementor-button[id^="learn_ghost"]:hover,
[id^="learn_ghost"] a.elementor-button:hover {
  background: var(--bb-or-d) !important; /* Red hover */
  color: #fff !important;
  border-color: var(--bb-or-d) !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
}

/* ===== Global default BlazeByte buttons (orange) =====
   Excludes: WhatsApp, Learn buttons, and your variant classes */
.elementor a.elementor-button:not(.whatsapp):not(.btn-ghost):not(.btn-white):not(.btn-primary):not([id^="learn_"]),
.elementor .elementor-widget-button:not([id^="learn_"]) a.elementor-button:not(.whatsapp):not(.btn-ghost):not(.btn-white):not(.btn-primary) {
  background-color: var(--bb-or) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.elementor a.elementor-button:not(.whatsapp):not(.btn-ghost):not(.btn-white):not(.btn-primary):not([id^="learn_"]):hover,
.elementor .elementor-widget-button:not([id^="learn_"]) a.elementor-button:not(.whatsapp):not(.btn-ghost):not(.btn-white):not(.btn-primary):hover {
  background-color: var(--bb-or-d) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transform: translateY(-2px);
}

/* WhatsApp (ID or class or wa.me link) */
a#whatsapp.elementor-button,
.elementor a.elementor-button.whatsapp,
.elementor a.elementor-button[href*="wa.me"],
.elementor a.elementor-button[href*="api.whatsapp.com"] {
  background-color: #25D366 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
a#whatsapp.elementor-button:hover,
.elementor a.elementor-button.whatsapp:hover,
.elementor a.elementor-button[href*="wa.me"]:hover,
.elementor a.elementor-button[href*="api.whatsapp.com"]:hover {
  background-color: #1EBE5D !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transform: translateY(-2px);
}

/* Logo Left Padding — zeroed so logo element edge meets the container content edge.
   margin-left: -6px compensates for transparent space built into the logo image file:
   the visible mark starts ~6px inside the img boundary, so we pull the box left to
   align the optical mark with the H1 text edge below. */
.site-branding {
  padding-left: 0 !important;
  margin-left: -6px !important;
}

/* subtle legibility boost behind the logo */
.site-branding img.custom-logo {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

/* Mobile/Desktop control for line breaks */
.mobile-only { display: none; }
.desktop-only { display: inline; }

@media (max-width: 767px){
  .mobile-only { display: inline; }
  .desktop-only { display: none; }
}

/* --- Brand colors (edit if you like) --- */
:root{
  --cta-bg:   #FF6A00;   /* button background */
  --cta-text: #FFFFFF;   /* text color */
  --cta-bg-h: #ED4B00;   /* hover background */
}

/* If Transparent Header is enabled, keep the CTA styled */
.ast-theme-transparent-header .main-header-bar .main-header-menu > .menu-item.menu-cta > .menu-link{
  background: var(--cta-bg) !important; color: var(--cta-text) !important;
}

/* --- BlazeByte Global Bullet Styling (aligned + clean wrap) --- */

/* Apply to posts/pages (block flow) */
.entry-content ul,
.page-content ul,
.post-content ul,
article ul {
  list-style: none;
  margin: 10px 0;
  padding-left: 0;
  display: block;                 /* normal block lists in posts/pages */
}

/* Apply to Elementor Text Editor (auto-center with widget) */
.elementor-widget-text-editor ul {
  list-style: none;
  margin: 0px 0 20px 0;
  padding-left: 0;
  display: inline-block;          /* shrinks to content; centers when widget is centered */
  text-align: left;               /* neat left alignment inside the list */
}

/* ===== Card Styling ===== */
.bb-testimonials-band .sp-testimonial-free-item-inner,
.bb-testimonials-band [class*="testimonial"][class*="item"] {
  background: #f9f9f9;
  border: 1px solid #eee;
  padding: 24px 26px;
  margin: 18px auto;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  max-width: 100%; 
}

/* ===== Client Name ===== */
.bb-testimonials-band [class*="testimonial"] [class*="client"],
.bb-testimonials-band [class*="client-name"],
.bb-testimonials-band .sp-testimonial-client-name {
  display: block !important;
  margin-top: 16px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #111 !important;
  text-align: center;
}

/* ===== Stars ===== */
.bb-testimonials-band [class*="testimonial"] [class*="rating"] i,
.bb-testimonials-band .sp-testimonial-rating i,
.bb-testimonials-band .star-rating i {
  color: var(--bb-or) !important;       /* brand orange */
  font-size: 1.2rem !important;
  margin-top: 10px !important;
}

/* ===== Alternate background every 2nd card ===== */
.bb-testimonials-band [class*="testimonial"][class*="item"]:nth-child(2n),
.bb-testimonials-band .sp-testimonial-free-item:nth-child(2n) .sp-testimonial-free-item-inner {
  background: #fff7f0;
}

.sp-testimonial-content,
.sp-testimonial-content em,
.sp-testimonial-content strong {
  font-family: var(--bb-font-sans) !important;
}

/* =========================================
   BlazeByte Testimonials — MINIMAL + SAFE
   Keeps: arrows + pagination color + smooth slide
   Class used: bb-testimonials-band
   ========================================= */

/* --- Smooth movement of Testimonial (prevents abrupt jump) --- */
.bb-testimonials-band .swiper-wrapper{
  transition-timing-function: ease !important;
  transition-duration: 600ms !important; /* adjust if you want faster/slower */
  will-change: transform;
}

/* --- Pagination dots (keep your reddish active dot logic) --- */
.bb-testimonials-band .swiper-pagination-bullet{
  width: 8px;
  height: 8px;
  background: rgba(0,0,0,.28) !important;
  opacity: .45 !important;
  margin: 0 5px !important;
}

.bb-testimonials-band .swiper-pagination-bullet-active{
  background: var(--bb-or-d) !important; /* reddish tone */
  opacity: 1 !important;
  transform: scale(1.08);
}

/* keep them centered vertically (common collision fix) */
.bb-testimonials-band .swiper-button-prev,
.bb-testimonials-band .swiper-button-next{
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Items */
.entry-content ul li,
.page-content ul li,
.post-content ul li,
article ul li,
.elementor-widget-text-editor ul li {
  margin: 10px 0;
  line-height: 1.6;
  transition: color .3s ease, transform .3s ease;
}

/* Tick as inline marker (follows text alignment, fixes wrapping) */
.entry-content ul li::before,
.page-content ul li::before,
.post-content ul li::before,
article ul li::before,
.elementor-widget-text-editor ul li::before {
  content: "✓";
  display: inline-block;
  width: 1.2em;                   /* bullet gutter */
  margin-right: .4em;             /* space to text */
  vertical-align: -0.02em;       /* aligns with first line */
  color: var(--bb-or);                 /* BlazeByte orange */
  font-weight: 700;
  transition: color .3s ease;
}

/* Hover (pointer devices only) */
@media (hover:hover) {
  .entry-content ul li:hover::before,
  .page-content ul li:hover::before,
  .post-content ul li:hover::before,
  article ul li:hover::before,
  .elementor-widget-text-editor ul li:hover::before {
    color: var(--bb-or-d);               /* BlazeByte red */
  }
  .entry-content ul li:hover,
  .page-content ul li:hover,
  .post-content ul li:hover,
  article ul li:hover,
  .elementor-widget-text-editor ul li:hover {
    transform: scale(1.05);
    color: var(--bb-or);
  }
}

/* Exclusions — avoid double icons/menus */
.elementor-widget-icon-list ul li::before,
.elementor-widget-social-icons ul li::before,
.elementor-nav-menu li::before,
.menu li::before,
.sub-menu li::before,
header ul li::before,
footer ul li::before {
  content: none !important;
}

/* ——— EXCLUSIONS: do NOT style lists inside forms ——— */

/* Elementor Forms, Contact Form 7, WPForms (covers most cases) */
.elementor-form ul,
.wpcf7 form ul,
.wpforms-container ul {
  list-style: none;              /* keep clean bullets */
  padding-left: 0;               /* form components handle spacing */
}

/* Remove the orange tick pseudo-bullet and any hover transforms */
.elementor-form ul li::before,
.wpcf7 form ul li::before,
.wpforms-container ul li::before {
  content: none !important;
  margin: 0 !important;
  width: 0 !important;
}

.elementor-form ul li,
.wpcf7 form ul li,
.wpforms-container ul li {
  transform: none !important;
  color: inherit !important;
}

/* Reset any flex we may have applied to CF7 rows */
#conversion-form .wpcf7 form.wpcf7-form p {
  display: block !important;
  justify-content: initial !important;
  text-align: initial !important;
}

/* Hard-center only the submit button (no wrapper needed, no layout changes) */
#conversion-form .wpcf7 form.wpcf7-form input.wpcf7-submit,
#conversion-form .wpcf7 form.wpcf7-form input.wpcf7-submit.bb-submit {
  display: inline-block !important;
  float: none !important;
  margin: 0 !important;

  /* center regardless of parent alignment */
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* If the form is inside an Elementor Shortcode widget that forces alignment */
#conversion-form .elementor-widget-shortcode,
#conversion-form .elementor-widget-shortcode .elementor-widget-container {
  text-align: initial !important;
}

/* --- BlazeByte: Centered + Prominent WPForms Submit Button (Final Refined Version) --- */

/* 1. Keep the flex-based centering */
.wpforms-container-full .wpforms-submit-container,
div.wpforms-container .wpforms-submit-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

/* BlazeByte Solutions - WPForms Button Styling */
.wpforms-container-full .wpforms-submit,
div.wpforms-container .wpforms-submit {
  flex: 0 0 auto !important;
  align-self: center !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;

  /* Adjusted for slightly more vertical height */
  padding: 15px 36px !important;
  min-height: 50px !important;
  line-height: 1.4 !important;
  height: auto !important;
  width: auto !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;

  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;

  /* BlazeByte Brand Colors */
  background-color: var(--bb-or) !important; /* Brand Orange */
  color: #ffffff !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.25s ease-in-out !important;
}

/* Hover state — Brand Red */
.wpforms-container-full .wpforms-submit:hover,
div.wpforms-container .wpforms-submit:hover {
  background-color: var(--bb-or-d) !important; /* Brand Red */
  transform: translateY(-1px) !important;
}

/* Active (pressed) state */
.wpforms-container-full .wpforms-submit:active,
div.wpforms-container .wpforms-submit:active {
  background-color: #D74300 !important; /* Slightly deeper red for click */
  transform: translateY(0) !important;
}

/* Focus (keyboard/tab navigation) */
.wpforms-container-full .wpforms-submit:focus,
div.wpforms-container .wpforms-submit:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.35) !important; /* orange glow */
}

/* Hide mobile hero CTA on desktop — show only on mobile */
.bb-hero-mobile-cta,
.bb-hero-mobile-cta-note {
  display: none;
}

@media (max-width: 600px) {
  .bb-hero-mobile-cta {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 30px 0 8px !important;
  }
  .bb-hero-mobile-cta-note {
    display: block !important;
    font-size: 0.5rem !important;
    color: rgba(255,255,255,0.55) !important;
    text-align: center !important;
    margin: 15px 0 34px !important;
  }
}

/* ------------------------------------------------------------
   BlazeByte — Unified WPForms Styling (Success / Error / Layout)
   ------------------------------------------------------------ */
:root {
  --bb-navy: #122036;
  --bb-orange: #FF6A00;
  --bb-orange-light: #FFD8B2;
  --bb-orange-bg: #FFFAF5;
  --bb-red: #ED4B00;
  --bb-red-light: #FFF0EB;
  --bb-shadow: 0 6px 16px rgba(0,0,0,0.05);
}

/* ✅ SUCCESS MESSAGE — Premium BlazeByte Look */
.wpforms-confirmation-container,
.wpforms-confirmation-container-full {
  background: var(--bb-orange-bg) !important;   /* Soft orange-tinted background */
  border: 1px solid var(--bb-orange-light) !important;
  color: var(--bb-navy) !important;
  padding: 26px 32px !important;
  border-radius: 12px !important;
  box-shadow: var(--bb-shadow) !important;
  max-width: 720px !important;
  margin: 28px auto !important;
  text-align: center !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

/* Headline / First Line */
.wpforms-confirmation-container strong:first-of-type,
.wpforms-confirmation-container h4:first-of-type,
.wpforms-confirmation-container p:first-of-type strong {
  color: var(--bb-orange) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

/* Divider */
.wpforms-confirmation-container hr {
  border: none !important;
  border-top: 1px solid var(--bb-orange-light) !important;
  width: 60% !important;
  margin: 22px auto !important;
}

/* Paragraph Text */
.wpforms-confirmation-container p {
  color: var(--bb-navy) !important;
  line-height: 1.65 !important;
  margin: 10px 0 !important;
  font-weight: 500 !important;
}

/* Links */
.wpforms-confirmation-container a {
  color: var(--bb-orange) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(255,106,0,0.2) !important;
}
.wpforms-confirmation-container a:hover {
  color: var(--bb-red) !important;
}

/* ✅ ERROR MESSAGE */
.wpforms-error-container,
.wpforms-error-alert {
  background: var(--bb-red-light) !important;
  border: 1px solid rgba(237,75,0,0.35) !important;
  color: var(--bb-red) !important;
  padding: 20px 22px !important;
  border-radius: 10px !important;
  box-shadow: var(--bb-shadow) !important;
  max-width: 720px !important;
  margin: 20px auto !important;
  text-align: center !important;
}

/* ✅ FORM LAYOUT CONSISTENCY */
.wpforms-container-full .wpforms-form {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

.wpforms-field {
  margin-bottom: 16px !important;
}

.wpforms-field-label {
  font-weight: 600 !important;
  color: var(--bb-navy) !important;
}

/* ✅ MOBILE OPTIMIZATION */
@media (max-width: 480px) {
  .wpforms-confirmation-container,
  .wpforms-confirmation-container-full,
  .wpforms-error-container,
  .wpforms-error-alert {
    padding: 18px 16px !important;
    border-radius: 10px !important;
  }
  .wpforms-confirmation-container p {
    font-size: 15px !important;
  }
  
  /* Logo Left Padding */
.site-branding {
  padding-left: 0px !important;
}
  
}

/* Override tick color for lists inside the "green-ticks" section */
.green-ticks ul li::before {
  color: #28a745 !important;   /* Green tick */
}

.green-ticks ul li:hover::before {
  color: #1e7e34 !important;   /* darker green on hover */
}

/* Red ticks only in the red-ticks section */
.red-ticks ul li::before {
  color: #e63946 !important;   /* BlazeByte red */
}

/* Optional: darker red on hover */
.red-ticks ul li:hover::before {
  color: #b71c1c !important;
}

/* Make only main footer menu items bold */
.footer-widget-area .menu > li > a {
    font-weight: 700;
}

/* Keep sub-menu items normal */
.footer-widget-area .menu .sub-menu li a {
    font-weight: 400;
}

/* Let’s Connect widget title */
#text-10 .widget-title{
  color: var(--bb-or) !important;
  font-weight: 700 !important;
}

.bb-plan.bb-plan--featured.bb-card {
  border: 2px solid var(--bb-or) !important;
  box-shadow:0 14px 36px rgba(255,106,0,.20);
}

.bb-plan--featured a.bb-btn.bb-btn-primary.bb-plan__cta {
  background: var(--bb-or) !important;
  color: #ffffff !important;
  border: none !important;
}

.bb-plan--featured a.bb-btn.bb-btn-primary.bb-plan__cta:hover {
  background: var(--bb-or-d) !important;
}

/* ═══════════════════════════════════════════════════════════
   NAV RESTRUCTURE 2026-08-23 — two-door CTA cluster
   Ghost "Free Audit" beside the solid "Book a Growth Call".
   The ghost is deliberately narrower: the cluster has to fit
   beside five dropdowns inside the locked 1320px header grid.
═══════════════════════════════════════════════════════════ */

/* DESKTOP: ghost variant, overrides the solid .menu-cta fill */
@media (min-width: 1271px) {
  .ast-desktop .main-header-bar .main-header-menu > .menu-item.menu-cta-ghost > .menu-link,
  .ast-theme-transparent-header .main-header-bar .main-header-menu > .menu-item.menu-cta-ghost > .menu-link {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    padding: 13px 16px !important;
    margin-left: 8px !important;
    border-radius: 10px !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;
  }
  .ast-desktop .main-header-bar .main-header-menu > .menu-item.menu-cta-ghost > .menu-link:hover,
  .ast-theme-transparent-header .main-header-bar .main-header-menu > .menu-item.menu-cta-ghost > .menu-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #FF6A00 !important;
    color: #FFFFFF !important;
  }
  /* the solid button follows the ghost, so it keeps a smaller left gap */
  .ast-desktop .main-header-bar .main-header-menu > .menu-item.menu-cta:not(.menu-cta-ghost) > .menu-link {
    margin-left: 8px !important;
  }
  /* "All Case Studies" reads as the tail of its dropdown, not a sibling */
  .ast-desktop .main-header-menu .sub-menu .bb-menu-more > a {
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    margin-top: 6px !important;
    color: #FF6A00 !important;
    font-weight: 700 !important;
  }
}

/* MOBILE: both CTAs pulled to the top of the drawer, stacked */
@media (max-width: 1270px) {
  .ast-header-break-point .main-header-menu { display: flex !important; flex-direction: column !important; }
  .ast-header-break-point .main-header-menu > .menu-item { order: 2; }
  .ast-header-break-point .main-header-menu > .menu-item.menu-cta-ghost { order: 0; }
  .ast-header-break-point .main-header-menu > .menu-item.menu-cta:not(.menu-cta-ghost) { order: 1; }

  /* The drawer's own background is white but the transparent-header overlay
     renders it dark and every other item white, so the ghost matches the
     items, not the element background. */
  .ast-header-break-point .main-header-menu .menu-item.menu-cta-ghost > .menu-link {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
  }
  .ast-header-break-point .main-header-menu .menu-item.menu-cta-ghost > .menu-link:hover,
  .ast-header-break-point .main-header-menu .menu-item.menu-cta-ghost > .menu-link:focus {
    border-color: #FF6A00 !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }
}

/* Case Studies rows carry "Company · Vertical", which does not fit Astra's
   default 240px dropdown. Widen only this one so no row wraps. */
@media (min-width: 1271px) {
  .ast-desktop .main-header-menu > .menu-item.bb-menu-wide > .sub-menu { min-width: 342px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   STEP G — nav width, gutters, hero clearance                     2026-08-28
   Measured working in PERF-STEP-G-MEASUREMENT.md. Three separate defects that
   look like one, and the numbers in the brief were for the wrong things.

   1. NAV WRAP. Wraps at <=1296, not at 1497 as reported. The nav needs 1125px
      and gets innerRight - brandingRight; at 1297 that is exactly 1145 = 1125
      nav + 20 gap, so zero slack, and 1296 is one pixel short.
   2. GUTTER. The "0px / 8px / 16px" figures were the .bb-wrap BOX. The box
      carries 24px of internal padding, so the CONTENT gutter is 24 / 39 / 47.
      The 32px floor is already met from 1350 up. Only 1280 and 1024 fail, at
      24px, and mobile fails at 14px.
   3. HERO OVERLAP. The real defect, and the one the field report was about.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. GUTTER ─────────────────────────────────────────────────────────────
   `min(1320px, 100% - 16px)`, NOT the `100% - 4rem` in the brief.

   4rem assumed the box edge was the content edge. It is not: both containers
   already add 24px of padding inside the box, and both resolve to the SAME
   content edge at every width (header content 120, page content 120 at 1512;
   the logo's extra -6px is a deliberate optical nudge on .site-branding, not a
   misalignment). So 4rem would have produced a 56px content gutter at 1350,
   24px more than the floor asks for, and cost 72px of nav threshold for it,
   breaking 1350 and 1366.

   16px hits the floor exactly: box never closer than 8px, +24px padding = 32px
   content gutter, and it costs 8px of nav threshold instead of 72px. Above
   1336px nothing changes at all, because min() picks 1320 there. */
@media (min-width: 701px) {
  /* .bb-wrap gets `width` but deliberately NOT `max-width: none`.

     It carried `max-width: none !important` until 2026-08-29, and that was a
     real defect rather than a harmless extra: several pages cap this container
     BELOW 1320 on purpose, and an !important reset silently destroyed every one
     of them. `bb-growth-call.css` sets `.bb-gc-book .bb-wrap` and
     `.bb-gc-faq .bb-wrap` to 1200px; both jumped to 1320. That widened the
     Calendly frame from 1152px to 1272px, and because Calendly centres a
     fixed-width card inside the frame, the card moved right by exactly half the
     difference, 60px, while the white privacy patch stayed at its calibrated
     left offset. The patch then sat 60px to the LEFT of the link it exists to
     cover, which is how it was reported.

     Leaving max-width alone is enough: max-width always clamps the used width,
     so a page-specific 1200px cap still wins while `width` still supplies the
     8px minimum side margin at narrow widths, which is all this rule was ever
     for. The header containers below DO still need the reset, because Astra
     sets its own max-width there. */
  .bb-wrap {
    width: min(1320px, 100% - 16px) !important;
    margin-inline: auto !important;
  }

  /* HEADER ONLY. `.ast-container` is Astra's, not ours, and it appears TWICE on
     every page: once as the header's grid row, and once inside .site-content as
     the wrapper around ALL page content. Enumerated on the homepage and on
     /analytics-tracking/, two matches each, identical.

     Unscoped, this rule set an explicit width on that content wrapper, which
     capped every full-bleed Elementor section at 1320px and centred it. The hero
     and the orange trust bar rendered as narrow centred bands with the page
     background either side. Nothing in the fifteen-width check caught it: a page
     whose sections are uniformly too narrow has no horizontal scroll, no
     clipping and no overlap, so it failed while passing every assertion.

     #masthead and .site-header each match exactly one element, the header's. */
  #masthead .ast-container,
  .site-header .ast-container {
    width: min(1320px, 100% - 16px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
}

/* Below 700px the standard asks for 20px. globals.css sets 18px, and
   bb-pillar.css drops to 14px at 390. Both are under the floor. */
@media (max-width: 700px) {
  .bb-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
/* The logo sits flush against the viewport edge below 768px, measured at
   left:0. NOT because .ast-container loses its padding: at mobile widths
   .ast-container is not in the logo's ancestor chain at all. Astra's
   header-footer builder swaps in .ast-builder-grid-row, and nothing in that
   chain carries horizontal padding. Targeting .ast-container here silently did
   nothing, which is why the first attempt still measured 0. */
/* SCOPED TO THE MOBILE HEADER, and deliberately carries NO media query.

   This gutter belongs to the mobile header, so tying it to a width was always
   the wrong axis: the mobile header already only renders below 1301, and the
   scope now says so directly.

   It was a `@media (max-width: N.99px)` block over the unscoped `#masthead
   .ast-builder-grid-row`, and that combination broke the desktop header at
   exactly the swap width: at a viewport of N+1 both `(max-width: N.99px)`
   and `(min-width: N+1px)` evaluate true, the same one-pixel overlap the swap
   below documents, so the desktop header rendered AND took 40px of mobile
   gutter, which pushed the nav to two rows: masthead 194 at rest and 432 once
   scrolled, with the H1 behind it. Scoping removes the interaction entirely
   rather than moving the boundary and hoping. */
/* CORRECTED 2026-08-31. The gutter was applied to TWO NESTED elements, so it was
   counted twice, and .ast-primary-header-bar contributes a third 20px above them.
   Measured at 425: the logo sat at 54px while .bb-wrap content starts at 20px.

   One gutter, declared at one level, and the levels below it explicitly zeroed, so
   the total cannot drift again if Astra changes which node carries padding.

   The -6px margin-left on .site-branding is NOT part of this and must stay: it
   compensates for transparent space inside the logo file so the visible mark, not
   its bounding box, lines up with the H1. The image box therefore measures 14px
   and that is correct. See the header layout lock. */
#ast-mobile-header .ast-primary-header-bar {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
#ast-mobile-header .ast-builder-grid-row,
#ast-mobile-header .site-header-primary-section-left,
#ast-mobile-header .site-header-primary-section-right {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER SWAP — desktop header from 1301 up, hamburger below, as a pure CSS swap.

   THE BOUNDARY IS 1301 AND NOT 1300 BECAUSE OF ASTRA'S JS, NOT BECAUSE OF THE
   NAV'S WIDTH. `bb_header_break_point()` returns 1299, but Astra adds
   `ast-header-break-point` at break_point PLUS ONE: measured, the class is
   present at 1300 and absent at 1301. On a DESKTOP header that class is
   destructive, because it restyles the nav into drawer form and expands every
   submenu inline: at 1300 it produced rows=7, an item total of 7600px and a
   432px masthead with the H1 behind it, and only after a scroll, because the
   JS is delayed until first interaction for logged-out visitors.

   So the CSS mobile side has to reach wherever the class reaches. Setting the
   swap to the nav's own requirement instead, and leaving the class to land one
   pixel inside the desktop range, is what produced that failure.

   1301, not the 1271 the JS constant used to carry. 1271 was derived from older
   geometry and does not survive measurement.

   Measured with the desktop header FORCED ON, so the reading is the nav's real
   requirement rather than the space an already-wrapped nav settled into, which
   is the trap that produced 1271 in the first place:

       vw 1275  container 1259  ->  WRAPS, masthead 194
       vw 1280  container 1264  ->  WRAPS, masthead 194
       vw 1285  container 1269  ->  fits,  masthead 142
       vw 1300  container 1284  ->  fits

   Seven items need 1072px, branding takes 110, and the container resolves to
   vw - 16. So the desktop nav needs a viewport of at least 1285. 1300 is taken
   rather than 1285 because 1285 is the knife edge itself: at 1280 versus 1281
   the result flipped on a single pixel, and a boundary sitting on that edge
   would move again the next time an item's text or padding changes.

   The cost is that 1280x800 laptops get the hamburger. That is the right
   outcome, because at 1280 the desktop nav does not fit: it renders as a
   two-row 194px header, which is worse than a hamburger.

   THE DEFECT THIS FIXES was customer-facing and severe. Between 769 and 1270,
   BOTH headers rendered: masthead 544px tall, two logos, and the H1 behind it.
   Measured on production, logged out, at 1024 and 1200.

   It only appeared AFTER the visitor's first scroll, which is why a fresh-load
   check missed it entirely. WP Rocket delays JavaScript for logged-out
   visitors, so on load Astra's JS has not run, `ast-header-break-point` is
   absent, and only the desktop header shows. The first real interaction
   releases the delayed JS, the class lands, Astra's mobile header appears, and
   Astra's own CSS is STILL showing the desktop header, because that CSS swaps
   at 769 and knows nothing about our 1270.

   WHY THE BREAKPOINTS DISAGREE. `bb_header_break_point()` filters
   `astra_header_break_point` to 1270, but with the Header/Footer Builder active
   Astra derives its swap from `astra_get_tablet_breakpoint()` instead
   (markup-extras.php:1527), so the filter reaches only the JS constant and the
   legacy header CSS. There is no header-only setting to change: the sole source
   knob is the GLOBAL tablet breakpoint, and moving that to fix a header would
   relocate every tablet media query on the site. Hence a child-theme override.

   WHY IT IS A FULL SWAP AND NOT JUST A HIDE. Doing this in CSS on both sides
   makes the header correct from FIRST PAINT and independent of whether Astra's
   JS has run. Hiding only the desktop header would have left the 769-1270 band
   with no header at all until the delayed JS arrived.

   THE VALUES ARE MEASURED, NOT ASSUMED:
     - `block` is what #ast-mobile-header actually computes to at 700 and 768,
       where Astra shows it. Astra's own rule only ever states `display:none`,
       so the visible value is never written down anywhere and guessing `flex`
       would have broken the drawer's internal layout quietly.
     - 1300.99 mirrors Astra's own 768.99 fractional boundary. A plain 1300
       leaves 1300.5 matching neither side, which browser zoom and fractional
       DPRs do produce.
     - Both selectors are IDs, matching Astra's own specificity. `.ast-desktop-header`
       matches NOTHING in the live DOM, and `.ast-primary-header-bar` matches two
       elements with one visible; either would have been the wrong hook.

   `.ast-header-break-point #ast-mobile-header { display: block }` in Astra's
   main.min.css sets the same value, so the class that JS still adds agrees with
   this rather than fighting it.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1300.99px) {
  #ast-desktop-header { display: none !important; }
  #ast-mobile-header  { display: block !important; }
}

/* The desktop side is stated EXPLICITLY rather than left to the absence of the
   rule above, because the two queries overlap by one pixel and the boundary has
   to be deterministic rather than a race.

   Measured in Chrome: at a viewport of exactly 1301, BOTH `(min-width: 1301px)`
   and `(max-width: 1300.99px)` evaluate true. Mirroring Astra's 768.99 gets the
   fractional gap right, so 1300.5 still resolves cleanly to mobile, but it
   leaves 1301 itself ambiguous, and without this block the mobile rule won and
   the swap happened one pixel late.

   This block sits AFTER the mobile one, so at 1301 it wins on source order and
   the swap lands exactly where it was specified. Below 1301 it does not apply
   at all, so there is no gap on the other side either. `block` is what
   #ast-desktop-header actually computes to at 1280, measured, not assumed. */
@media (min-width: 1301px) {
  #ast-desktop-header { display: block !important; }
  #ast-mobile-header  { display: none !important; }
}

/* ── 4. FOOTER TAP TARGETS ─────────────────────────────────────────────────
   Ten footer menu links render 20px tall against the 44px floor below 768px.
   They are the only sub-44px targets on the page; every button and .bb-btn
   already clears it. Padding rather than min-height so the whole row stays
   tappable rather than just the text box, and the 8px separation the standard
   asks for comes from the row gap. */
@media (max-width: 767px) {
  .site-footer .menu-link,
  .ast-footer-copyright .menu-link,
  footer .menu-link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}

/* ── 2. NAV COMPRESSION ────────────────────────────────────────────────────
   Deliberately light. The deficit is 17px at 1280 plus 8px from the gutter
   above, so 25px, not the 89px the brief budgeted for. 230px was available
   within the floors; spending 42px of it leaves the nav visually unchanged.

   Font size and item padding are NOT touched, so nothing about the nav's
   proportions moves. Every floor is untouched by a wide margin: font stays
   16px against a 14px floor, adjacent-label gap stays 32px against 16px.

   Recovers 42px, measured: caret 30 + CTA padding 12.

   Scoped to the 1024-1600 band per the brief, so large screens are unchanged.
   The selector weight matters: Additional.css:386 sets the CTA padding with
   !important at (0,6,0), so a lighter selector silently loses. That is why the
   CTA lever first measured 0px. */
@media (min-width: 1024px) and (max-width: 1600px) {
  .ast-desktop .main-header-bar .main-header-menu > .menu-item > .menu-link .ast-icon,
  .ast-desktop .main-header-bar .main-header-menu > .menu-item > .menu-link svg {
    margin-left: 2px !important;
  }
  .ast-desktop .main-header-bar .main-header-menu > .menu-item.menu-cta > .menu-link {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── 3. HERO FLUID SIZING ──────────────────────────────────────────────────
   The step G instruction to convert fixed heading sizes and section padding to
   clamp() was never applied to the hero, which holds the two tallest items in
   the fold budget. It belongs before any spacing fix, because it changes the
   numbers a spacing fix would be computed against.

   THE DOMINANT DRIVER IS THE PADDING, NOT THE FONT SIZE. Elementor sets a fixed
   310px inline padding on the hero at every width. That is 620px, 48% of a
   1280px viewport, leaving the H1 660px of its 1100px max-width:

       1280   available 660    H1 wraps to 6 lines   340px tall
       1350   available 730    6 lines               340px
       1728   available 1108   3 lines               170px

   The H1 is not tall because it is large. It is tall because it is squeezed.
   Anchored so nothing changes at 1728 and above, where 17.9vw resolves to 309px
   against the original 310px.

   Two measurement notes, both of which invalidated earlier numbers:
   the H1 swings 57px across the typed.js cycle, so the phrase has to be pinned
   before measuring it; and fold height must come from a paired viewport height,
   never a fixed one. */
.elementor .bb-hero.e-con,
.elementor .bb-hero {
  padding-left: clamp(24px, 17.9vw, 310px) !important;
  padding-right: clamp(24px, 17.9vw, 310px) !important;
}

/* Fluid H1, anchored to the ORIGINAL 54px at 1728 and easing to 40px at 1280.
   Expressed in px, NOT rem: the root font-size on this site is 18px, not 16px,
   so a first attempt at `clamp(2.125rem, ..., 3.375rem)` resolved its maximum to
   60.75px and made the H1 LARGER than the fixed value it replaced, adding 85px
   of overrun at 1440. Solved for the two endpoints:
       54px at 1728 and 40px at 1280  ->  slope 3.125vw, zero intercept
   line-height stays 1.05, the design-system value.

   The hero's internal vertical gaps were also measured (20px badge-to-H1, 40px
   H1-to-paragraph) and deliberately left alone. A first attempt at making them
   fluid used `margin-block`, which applies to both edges and turned the 20px gap
   into 40px, adding rather than saving. They are not where the height is. */
.bb-hero .bb-typed-h1 {
  font-size: clamp(40px, 3.125vw, 54px) !important;
}

/* ── 3b. HERO VERTICAL SYSTEM — deterministic, height-independent ──────────
   Replaces the top-clearance floor and the bottom reserve. Both were tuning a
   value that could not be tuned, and the arithmetic says why.

   THE CLIPPING WAS FIXED, NOT TUNABLE. The hero was min-height:100vh and the
   trust bar was pulled up by a net 122px (the hero's -195px margin-bottom plus
   the bar's own +73px margin-top). So:

       bar bottom = 100vh - 122 + barHeight
       overflow   = barHeight - 122

   The viewport height cancels. Measured: barHeight is 134px at every desktop
   profile, so the bar overflowed the fold by exactly 12px, at every viewport
   height, forever. Confirmed against observation: +12, +13, +12 at 1350, 1728
   and 1920, the three profiles where min-height binds. No value of hero padding
   could ever have changed it, which is why every round moved the top gap and
   left the bottom clipped.

   THE TOP GAP WAS THE SAME SHAPE. align-items:center makes the top gap
   `padding-top + surplus/2`, and surplus varies with viewport height and with
   the typed H1's line count. Measured swinging 24px to 58px with everything
   working as designed, and larger still on any viewport taller than the matrix.
   A floor cannot pin a value that is a floor plus a variable.

   THE FIX REMOVES THE COUPLING RATHER THAN COMPENSATING FOR IT.
     hero min-height = 100vh - barHeight   so the two sum to exactly one viewport
     no negative margin on either side     nothing to keep in sync
     align-items: flex-start               top gap is padding-top, full stop

   Content pins 24px under the header, the bar's bottom edge lands on the fold,
   and the surplus falls in the middle where the background art already is.
   One token, --bb-trustbar-h, is read by the only rule that needs it, so there
   is no second value to drift. Measured at 134px across all six desktop
   profiles; the fallback keeps the page sane if the bar is ever restyled. */
:root {
  --bb-header-h: 142px;
  --bb-hero-clearance: 24px;
  --bb-section-gap: 32px;
  /* MEASURED PER BREAKPOINT, not one constant. The bar's content rewraps, so its
     rendered height is not fixed, and the fold arithmetic depends on it exactly:
     the bar overflows by (barHeight - reserved), so a wrong value here clips the
     bar by precisely the difference.

     Measured across widths, logged out:
        <768   249-252px   (stacked)
        768-1024  162px    (two rows)
        >=1100    134px    (one row)

     Hardcoding the desktop 134px left 820 and 1024 clipping by 69px and 28px.
     At 1024 the overflow was 162 - 134 = 28 exactly, which is the mechanism
     confirming itself. The 1025-1099 band takes the larger 162px on purpose:
     over-reserving puts the bar cleanly below the fold, which is acceptable,
     while under-reserving cuts it in half, which is not. */
  --bb-trustbar-h: 252px;
}
.elementor .bb-hero.e-con,
.elementor .bb-hero {
  /* TALL VIEWPORTS: hero + bar sum to one viewport, so the bar's bottom edge
     lands on the fold and it is fully visible above it. This is the default
     because it is what the bar is for.

     SHORT VIEWPORTS: below 960px of fold the hero content no longer fits in
     (100vh - barH), so the hero would creep into the band where the bar
     straddles the fold and gets cut in half. The partial equals content minus
     available, so it is content-dependent and no padding value removes it: both
     32px and 134px were tried and each only moved which profiles landed in the
     band. The height query below sends those viewports to a full 100vh instead,
     which puts the bar cleanly below the fold rather than half-cut.

     960px is the measured threshold: hero content plus padding runs 780-835px
     across the desktop widths, and 835 + 134 = 969, so a fold under roughly 960
     cannot hold both. */
  min-height: 100vh !important;
  align-items: flex-start !important;
  padding-top: max(
    var(--padding-top, 0px),
    calc(var(--bb-header-h) + var(--bb-hero-clearance))
  ) !important;
  /* Bottom padding equals the BAR HEIGHT, not the section gap, and the reason is
     the "never partially cut" rule rather than spacing.

     hero + bar must land in one of two states: hero exactly 100vh - barH so the
     bar's bottom hits the fold, or hero at least 100vh so the bar starts below
     it. Anything between straddles the fold and cuts the bar in half, which was
     happening at 1350, 1440 and 1600.

     With padding-bottom = barH, the moment content outgrows the min-height the
     hero jumps by a whole bar height rather than creeping, so it skips the
     forbidden band entirely. One token drives both rules. */
  padding-bottom: max(var(--padding-bottom, 0px), var(--bb-section-gap)) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* The bar's own +73px margin-top existed only to soften the hero's -195px pull.
   With the pull gone it would open a 73px gap, so it goes too. */
.elementor .bb-hero + .e-con {
  margin-top: 0 !important;
}

/* align-items on the hero is not enough: Elementor sets `--align-self: center`
   on the hero's inner container, and align-self on the ITEM overrides
   align-items on the CONTAINER. Verified: the hero computed flex-start while
   the child computed align-self:center and stayed vertically centred, which is
   why the top gap was still drifting 35px to 239px with taller viewports.
   Row direction, so this touches the vertical axis only. */
.elementor .bb-hero > * {
  align-self: flex-start !important;
}

/* ── 3d. BODY GROUND STAYS WHITE ───────────────────────────────────────────
   body was briefly set to #FAFAFA to hide a near-white sliver under the trust
   bar. REVERTED, because the sliver no longer exists and the change had a wide
   blast radius.

   The sliver was the bar failing to reach the fold. The height-gated min-height
   in 3b now makes hero + bar sum to exactly one viewport above a 960px fold, and
   puts the bar cleanly below it under that, so nothing peeks through at the fold
   in either case.

   Meanwhile #FAFAFA broke every section that inherited body white. Enumerated:
   five transparent top-level sections contain white children. Four are white
   cards on a tinted ground, which is the design, but .bb-testi is a heading block
   with an explicit white background, and the testimonials band carries an
   author-set --width of 1420px. On a grey body the band became a white slab with
   grey shoulders and the heading a floating rectangle inside it.

   Two attempts to paint over that, an explicit white on the band and then a
   100vmax spread shadow, each fixed less than they cost: the shadow was clipped
   by an ancestor and left the shoulders visible anyway. Removing the cause is
   smaller than compensating for it in three places. */
body {
  background-color: #FFFFFF !important;
}


/* Tall enough to hold the hero AND the trust bar: pin the bar's bottom to the
   fold so it is fully visible above it. Below this the rule above keeps 100vh
   and the bar sits cleanly below, never half-cut. */
/* Pin the bar's bottom to the fold ONLY where the hero content is known to fit
   the reduced box. Two conditions, both measured:

     min-width 1100   below this the bar is 162px or taller AND the hero keeps
                      its 180/80 tablet padding, so 180 + 827 + 80 = 1087 cannot
                      fit 1180 - 162 = 1018. At 820 that put the bar 69px past
                      the fold, cut in half.
     min-height 960   hero content plus padding runs 780-835 on desktop, and
                      835 + 134 = 969, so a shorter fold cannot hold both.

   Outside either condition the base rule keeps min-height 100vh, which puts the
   bar cleanly below the fold. Fully visible where it fits, cleanly below where
   it does not, never half-cut. */
@media (min-width: 1100px) and (min-height: 960px) {
  .elementor .bb-hero.e-con,
  .elementor .bb-hero {
    min-height: calc(100vh - var(--bb-trustbar-h, 134px)) !important;
  }
}

/* ── CLIENT RESULTS: even top and bottom ───────────────────────────────────
   The band's own padding is already symmetric at 96px top and bottom with no
   margins, but the VISUAL gaps measured 96 top against 106 bottom. The extra
   10px is a margin-bottom on the inner container that wraps the testimonial
   shortcode (Elementor stores margin top:50 bottom:10 on it): its content ends
   at 999px inside the band while the band's content edge sits at 1009px.

   Zeroing the trailing margin rather than trimming the band's padding to 86px,
   because the padding is the value that should stay round and symmetric; the
   stray 10px is the anomaly. The 50px top margin is kept: it separates the
   heading block from the carousel and is not at the band's edge.

   :has() is scoped to the band, with a last-child fallback for engines without
   it, so a rebuilt carousel keeps the same behaviour. */
.bb-testimonials-band .elementor-element:has(> .elementor-widget-container > .elementor-shortcode),
.bb-testimonials-band > .e-con:last-child,
.bb-testimonials-band > .elementor-element:last-child {
  margin-bottom: 0 !important;
}


/* Trust bar height per breakpoint. Read by the hero's min-height in 3b, so the
   two cannot drift: one token, one source. */
@media (min-width: 768px) {
  :root { --bb-trustbar-h: 162px; }
}
@media (min-width: 1100px) {
  :root { --bb-trustbar-h: 134px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP F2 — pin the 24 Poppins/Roboto elements to Inter.

   functions.php drops elementor-gf-poppins and elementor-gf-roboto. Without
   this block those elements would fall back to whatever the kit's stack lists
   next, which is a system font and not a decision anyone made.

   Measured 2026-08-28: Poppins reaches the four trust-bar counters (and their
   prefix/suffix spans) on / and /contact/; Roboto reaches two Elementor button
   widgets on /, where it is simply Elementor's default because no font was ever
   chosen. 925 of 941 text elements on / were already Inter.

   Specificity note, CLAUDE.md §11: Elementor's kit styles these at (0,1,1),
   which beats a lone class at (0,1,0) no matter how much !important is added.
   Every selector here is two classes deep, (0,2,0), which outranks it.
   ═══════════════════════════════════════════════════════════════════════════ */

.elementor .elementor-counter-number-wrapper,
.elementor .elementor-counter-number,
.elementor .elementor-counter-number-prefix,
.elementor .elementor-counter-number-suffix,
.elementor .elementor-button,
.elementor .elementor-button-content-wrapper,
.elementor .elementor-button-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}