/*
Theme Name: Rocket Theme Child
Theme URI: https://rocketwebdesigner.com
Template: blocksy
Author: Rocket Web Designer
Author URI: https://rocketwebdesigner.com
Description: Rocket Web Designer
Version: 4.0.2164
Updated: 2026-03-28 22:42:26

*/





/* ============================================================
   1. CSS VARIABLES



   <!-- Sage Green   → eCommerce, revenue, growth -->
<section class="cs-hero cs-hero--green">

<!-- Sky Blue     → web design, traffic, online presence -->
<section class="cs-hero cs-hero--sky">

<!-- Butter Cream → branding, identity, print, lifestyle -->
<section class="cs-hero cs-hero--cream">

<!-- Blush Rose   → photography, beauty, creative brands -->
<section class="cs-hero cs-hero--blush">

<!-- Lavender     → tech, medical, professional services -->
<section class="cs-hero cs-hero--lavender">

<!-- Mint Teal    → home services, local, real estate -->
<section class="cs-hero cs-hero--mint">


   ============================================================ */
:root {

  /* ── CORE PALETTE ── */
  --base:          #F4F7FB;   /* page background — cool off-white          */
  --base-tint:     #EBF2FA;   /* alternate section — sky-tinted off-white  */
  --cream:         #fff3df;   /* universal warm accent — cards, blurbs      */
  --cream-border:  #D4CDB8;   /* cream bordered variants                   */
  --white:         #FFFFFF;

  /* ── INK / TEXT ── */
  --ink:           #0A1E3C;   /* primary text — deep navy-black            */
  --ink-mid:       #5b6c81;   /* soft slate — body text site-wide          */
  --ink-light:     #6880A0;   /* secondary body                            */
  --ink-faint:     #8AA0B8;   /* captions, labels                          */

  /* ── ACCENT ── */
  --accent:        #4A8EC2;   /* sky blue — links, highlights, badges      */
  --accent-bright: #5A9ED2;   /* hover state                               */
  --accent-pale:   #EBF2FA;   /* very light tint                           */
  --accent-border: #C8D8E8;   /* border using accent                       */

  /* ── CTA BUTTON ── */
  --cta:           #E8440A;   /* ember orange-red                          */
  --cta-dark:      #C83808;   /* hover / pressed                           */

  /* ── DARK SECTIONS ── */
  --dark:          #0A1E3C;   /* warm near-black — dark sections           */
  --dark-deep:     #110F0B;   /* CTA sections / quote band                 */
  --dark-mid:      #2A2420;   /* card backgrounds inside dark sections     */

  /* ── BORDER & SHADOW ── */
  --border:        #D8E4F0;
  --border-dark:   #C4D0E0;
  --shadow-sm:     0 2px 8px  rgba(10,30,60,0.07);
  --shadow-md:     0 4px 20px rgba(10,30,60,0.10);
  --shadow-lg:     0 8px 40px rgba(10,30,60,0.13);

  /* ── RADIUS ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;

  /* ── TYPOGRAPHY ── */
  --font-display: 'Archivo Black', sans-serif;
  --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; /* was 'DM Sans' — never enqueued, so it silently fell back to Arial */

  /* ── MOTION ── */
  --transition:  all 0.2s ease;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  /* ── LAYOUT ── */
  --max-width:      1200px;
  --rwd-header-gap: 110px;   /* THE standard: header -> first content, every page (80px effective after the -6px in .hero) */
  --section-pad: 64px 40px;
  --section-pad-sm: 44px 40px;
  --section-pad-lg: 80px 40px;

  /* ── PASTEL PALETTE — 8 accent colors for themes, case studies, cards ── */
  --pastel-sky:      #C8E0F5;   /* sky blue    — primary / web design       */
  --pastel-sage:     #D4EDE1;   /* sage green  — eCommerce, revenue         */
  --pastel-mint:     #C8EEEA;   /* mint teal   — home services, local       */
  --pastel-cream:    #E8E4D4;   /* cream yellow— universal accent           */
  --pastel-blush:    #F2D8DA;   /* blush rose  — photography, beauty        */
  --pastel-lavender: #E2D8F5;   /* lavender    — tech, medical, professional*/
  --pastel-peach:    #FDE8D0;   /* peach       — restaurants, food          */
  --pastel-powder:   #D8EAF5;   /* powder blue — SaaS, apps                 */

  /* ── GRADIENTS ── */
  /* Dark hero gradient — kept for pages that want dramatic dark hero */
  --gradient-hero:  linear-gradient(180deg, #1C2A4A 0%, #1A1714 100%);
  --gradient-rich:  linear-gradient(180deg, #1E3060 0%, #1A1714 100%);
  --gradient-dark:  linear-gradient(160deg, #1A1714 0%, #110F0B 100%);
  /* Light hero variants — use these for the new direction */
  --gradient-sky:   linear-gradient(160deg, #EBF4FC 0%, #F4F7FB 100%);
  --gradient-cream: linear-gradient(160deg, #F2EEE2 0%, #F4F7FB 100%);

  /* Back-compat aliases for v3 class names */
  --navy:        var(--dark);
  --navy-deep:   var(--dark-deep);
  --navy-mid:    var(--dark-mid);
  --blue:        var(--accent);
  --blue-bright: var(--accent-bright);
  --blue-pale:   var(--accent-pale);
  --blue-border: var(--accent-border);
  --orange:      var(--cta);
  --orange-dark: var(--cta-dark);
  --off-white:   var(--base-tint);
  --text-dark:   var(--ink);
  --text-mid:    var(--ink-mid);
  --text-light:  var(--ink-light);
  --text-faint:  var(--ink-faint);
  --gradient-royal: var(--gradient-dark);
  --gradient-cta:   var(--gradient-dark);
  --gradient-diag:  var(--gradient-hero);
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
.rwd *, .rwd *::before, .rwd *::after,
.rwd-page *, .rwd-page *::before, .rwd-page *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.rwd, .rwd-page {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.rwd img, .rwd-page img { max-width: 100%; display: block; }
.rwd a, .rwd-page a { color: var(--accent); text-decoration: none; transition: var(--transition); }
.rwd a:hover, .rwd-page a:hover { color: var(--accent-bright); }

/* Header: Blocksy 'always fixed' sticky took the header out of flow (1px collapse,
   nav overlapping content, layout shift on load). position:sticky keeps it in flow
   from first paint AND sticky on scroll. Offset removed (was pushing it 50px down). */
/* Offset zeroed 2026-08-16 — the 60px compensated for the retired top bar and
   was shoving the fixed header 60px down. Also overrides Blocksy's 25px default. */
[data-header*="type-1"] {
    --header-sticky-offset: 12px;
}


/* ============================================================
   3. ANIMATIONS
   ============================================================ */
@keyframes rwdFadeUp     { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes rwdFadeIn     { from { opacity:0; } to { opacity:1; } }
@keyframes rwdScaleIn    { from { opacity:0; transform:scale(0.94); } to { opacity:1; transform:scale(1); } }
@keyframes rwdSlideRight { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }
@keyframes rwdBarGrow    { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes rwdMarquee    { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes rwdPulse      { 0%,100% { opacity:1; } 50% { opacity:0.5; } }















.rwd-scroll-reveal.is-visible { opacity:1; transform:translateY(0); }


/* ============================================================
   4. TYPOGRAPHY — Display
   ============================================================ */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 900; line-height: 0.92; letter-spacing: -1px; text-transform: uppercase;
  color: var(--ink);
}
.display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800; line-height: 1.0; letter-spacing: -0.5px; text-transform: uppercase;
  color: var(--ink);
}
.display-md {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700; line-height: 1.05; text-transform: uppercase;
  color: var(--ink);
}


/* Light bg defaults — dark text */
.body-lg  { font-size: var(--fs-body); line-height: 1.72; color: var(--ink-mid); font-weight: 300; }
.body-md,
.crm-process-desc{ font-size: var(--fs-small); line-height: 1.7;  color: var(--ink-light); }


/* Overrides for dark backgrounds */
.body-lg--white { color: rgba(255,255,255,0.7); }

.display-xl.text-white,
.display-lg.text-white,
.display-md.text-white,
.display-sm.text-white { color: #fff; }

/* Legacy rwd-* heading system */












/* Accent helpers */
.accent-blue     { color: var(--accent); }


.accent-italic   { font-style: italic; }
.text-white      { color: #fff; }

.text-center     { text-align: center; }



/* ============================================================
   5. LAYOUT — Containers & Sections
   ============================================================ */
.container         { max-width:var(--max-width); margin:0 auto; padding:50px 40px; width:100%; }




/* ── SECTIONS ── */
.section     { padding: var(--section-pad); }



/* Light base — now the standard */
.section--white  { background: var(--white); }
.section--light,
.section--off-white { background: var(--base); }

/* Tinted — subtle accent tint */
.section--tint   { background: var(--base-tint); }

/* Cream — the universal warm accent section */


/* Dark sections */
.section--navy,
.section--dark   { background: var(--dark);      position:relative; overflow:hidden; }


.section--ruled  { background: var(--white); border-top:1px solid var(--border); }


/* Legacy page-specific section aliases — all point to base */

















/* Section headers */
.section-header         { margin-bottom:52px; }
.section-header--center { text-align:center; }
.section-header--center .body-lg { max-width:600px; margin-left:auto; margin-right:auto; }




/* Breadcrumb — light bg variant (default) */
.breadcrumb         { padding-top:6px; display:flex; align-items:center; gap:8px; font-size:var(--fs-caption); color:var(--ink-faint); }
.breadcrumb a       { color:var(--ink-faint); }
.breadcrumb a:hover { color:var(--ink); }
.breadcrumb-sep     { color:var(--border-dark); }
.breadcrumb-current { color:var(--ink-mid); }


/* Breadcrumb — dark bg variant */



.breadcrumb--white .breadcrumb-sep     { color:rgba(255,255,255,0.2); }
.breadcrumb--white .breadcrumb-current { color:rgba(255,255,255,0.55); }


/* ============================================================
   6. LAYOUT — Grids & Flex
   ============================================================ */
.grid-2             { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3             { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }

.grid-split,
.hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.grid-split--hero   { gap:72px; align-items:start; }
.grid-split--5-7    { grid-template-columns:5fr 7fr; }



.grid-3--tight      { gap:16px; }












.flex-col    { display:flex; flex-direction:column; }






.gap-md, .rwd-gap-md { gap:16px; }



.mt-sm, .rwd-mt-sm { margin-top:12px; }
.mt-md, .rwd-mt-md { margin-top:20px; }
.mt-lg, .rwd-mt-lg { margin-top:32px; }
.mt-xl             { margin-top:48px; }
.mb-sm, .rwd-mb-sm { margin-bottom:12px; }
.mb-md, .rwd-mb-md { margin-bottom:20px; }
.mb-lg, .rwd-mb-lg { margin-bottom:32px; }



.pos-rel     { position:relative; }


.crm-sticky-col { position:sticky; top:40px; }







/* ============================================================
   7. BUTTONS
   ============================================================ */
.btn, .rwd-btn {
  display: inline-flex; align-items: center; gap: 8px; line-height: 1.15;
  padding: 13px 24px; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 700;
  cursor: pointer; border: none; transition: var(--transition);
  text-decoration: none; white-space: nowrap;
}

/* ── PRIMARY CTA — Ember orange-red ── */
.btn--orange, .btn--cta, .rwd-btn--cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius-md);
  background: var(--cta); color: #fff !important;
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 700; line-height: 1.15;
  text-decoration: none; border: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(232,68,10,0.3);
  transition: var(--transition);
}
.btn--orange:hover, .btn--cta:hover, .rwd-btn--cta:hover {
  background: var(--cta-dark); color: #fff !important;
  transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,68,10,0.4);
}
.btn--orange--lg, .btn--cta--lg { padding: 15px 32px; font-size: var(--fs-body); }

/* ── PRIMARY DARK — deep ink ── */
.btn--navy, .btn--dark, .rwd-btn--primary {
  background: var(--ink); color: #fff !important;
  box-shadow: 0 1px 3px rgba(10,30,60,0.25);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
  transition: var(--transition);
}
.btn--navy:hover, .btn--dark:hover, .rwd-btn--primary:hover {
  background: var(--dark); color: #fff !important;
  transform: translateY(-1px); box-shadow: 0 4px 16px rgba(10,30,60,0.3);
}

/* ── ACCENT BLUE ── */



/* ── GHOST on dark background ── */
.btn--ghost-white, .btn--ghost-outline, .rwd-btn--outline-white {
  background: transparent; color: rgba(255,255,255,0.85) !important;
  border: 1.5px solid rgba(255,255,255,0.25);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: var(--transition);
}
.btn--ghost-white:hover, .btn--ghost-outline:hover, .rwd-btn--outline-white:hover {
  background: rgba(255,255,255,0.1); color: #fff !important;
  border-color: rgba(255,255,255,0.45);
}

/* ── GHOST on light background ── */
.btn--ghost-dark, .btn--outline, .rwd-btn--outline {
  background: transparent; color: var(--ink-mid) !important;
  border: 1.5px solid var(--border-dark);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: var(--transition);
}
.btn--ghost-dark:hover, .btn--outline:hover, .rwd-btn--outline:hover {
  border-color: var(--ink); color: var(--ink) !important;
  background: rgba(10,30,60,0.04);
}

/* ── WHITE solid ── */



/* ── Sizes ── */
.btn--lg, .rwd-btn--lg { padding: 16px 36px; font-size: var(--fs-body); }








.btn-group, .rwd-btn-group { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn-group--center, .rwd-btn-group--center { justify-content:center; }

/* Ghost purple (AI page) */



/* Progress bar */



/* ============================================================
   8. BADGES & PILLS
   ============================================================ */














.metric-pill { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-label); font-weight:700; padding:4px 10px; border-radius:20px; }
.metric-up   { background:#e8f5e9; color:#1b5e20; }

.metric-neu  { background:var(--accent-pale); color:var(--ink-mid); }

/* ── CREAM ACCENT CARD — universal warm blurb ── */
.cream-card {
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.cream-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cream); border: 1px solid var(--cream-border);
  color: var(--ink); padding: 5px 14px; border-radius: 20px;
  font-size: var(--fs-caption); font-weight: 600;
}

/* ── PASTEL UTILITY CARDS — apply per theme ── */









/* Dark text works on all pastels */



/* ============================================================
   9. EYEBROWS — UNIFIED
   ============================================================ */
.eyebrow,
.eyebrow-crm, .eyebrow-light, .eyebrow-local,
.eyebrow-blue-ai, .eyebrow-about, .eyebrow-portfolio,
.rwd-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.eyebrow::before,
.eyebrow-crm::before, .eyebrow-light::before, .eyebrow-local::before,
.eyebrow-blue-ai::before, .eyebrow-about::before, .eyebrow-portfolio::before {
  content: ''; display:inline-block; width:16px; height:2px;
  background: var(--accent); flex-shrink: 0;
}
/* White on dark bg */
.eyebrow--white, .eyebrow-about--white { color:rgba(255,255,255,0.55); }
.eyebrow--white::before, .eyebrow-about--white::before { background:rgba(255,255,255,0.35); }
/* CTA color */


/* Purple */


/* Center — no line */
.eyebrow--center,
.eyebrow-crm--center, .eyebrow-local--center,
.eyebrow-about--center { justify-content:center; }
.eyebrow--center::before,
.eyebrow-crm--center::before, .eyebrow-local--center::before,
.eyebrow-about--center::before { display:none; }




/* ── New Hero Utility System ── */
/* ── Hero System ── */
.hero { padding-bottom: 40px; border-bottom:1px solid transparent; }

/* Color modifiers — each sets --page-accent used by eyebrow, H1 accent, checklists */
.hero--white    { background:#FFFFFF; --page-accent:#4A8EC2; border-bottom-color:var(--border); }

.hero--steel    { background:#E0ECFA; --page-accent:#4A8EC2; }
.hero--sage     { background:#E4F2EA; --page-accent:#2A7A50; }


.hero--powder   { background:#D8EAF5; --page-accent:#3070A0; }
.hero--purple   { background:#F5F3FF; --page-accent:#7C3AED; }
.hero--violet   { background:#EAE4F8; --page-accent:#6B3FBF; }
.hero--mint     { background:#DBF0EC; --page-accent:#E8440A; }
.hero--blush    { background:#F2D8DA; --page-accent:#C04050; }
.hero--amber    { background:#FDF3D0; --page-accent:#A06010; }

/* Size modifiers — hero H1 scale. Swap the class on <section class="hero hero--md">
   to resize any hero: sm 36 · md 46 · lg 58 · xl 68 (max px at desktop). */
.hero--sm { --hero-h1-size:clamp(28px, 3.2vw, 36px); }
.hero--md { --hero-h1-size:clamp(34px, 4vw,   46px); }
.hero--lg { --hero-h1-size:clamp(42px, 5vw,   58px); }
.hero--xl { --hero-h1-size:clamp(48px, 6vw,   68px); }
/* slim = md type on a tighter band (get-started) */
.hero--slim { --hero-h1-size:clamp(34px, 4vw, 46px); padding-bottom:30px; }
/* padding-TOP deliberately not set: every hero inherits the sitewide
   calc(--rwd-header-gap - 6px) so header->content is identical on all pages */

/* ── GET-STARTED dark hero (.gs-dark) ──
   Navy take on the sage hero. The page's inline <style> still targets
   .hero--sage for layout, so the class stays and these override colour only.
   Alignment rules at the bottom pin the certbar to the quiz card's baseline. */
.hero--sage.gs-dark { background:#0C1B33; --page-accent:var(--cta); }
/* the card's sunrise hairline, repeated along the hero's bottom edge so the
   dark band hands off into the page with the same light */
.gs-dark::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px; z-index:2;
  background:linear-gradient(90deg, var(--cta), #F5B32E 38%, #4A8EC2 78%, #9FD6F5);
}
/* (decorative rocket scene removed) */

/* ── ORDER COUNTER: cart with a live badge ── */
.hp-case-revenue{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hp-ord-cart{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff}
.hp-ord-cart svg{width:28px;height:28px;display:block}
.hp-ord-badge{position:absolute;top:-9px;right:-9px;min-width:26px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--cta);color:#fff;font-family:var(--font-body);font-style:normal;font-size:var(--fs-label);font-weight:800;
  line-height:22px;text-align:center;box-shadow:0 4px 12px -4px rgba(232,68,10,.8)}
.hp-ord-badge.is-pop{animation:hpOrdPop .28s ease}
@keyframes hpOrdPop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.hp-ord-badge.is-pop{animation:none}}

/* ── FILLED IMAGE SLOTS ──
   Placeholders keep their own wrapper (its classes carry the layout); .is-filled
   strips the dashed-box styling and .rwd-fill-img covers the slot. */
.is-filled{border:0 !important;background:none !important;padding:0 !important;overflow:hidden;border-radius:14px;display:block;
  width:100%;aspect-ratio:16/10;min-height:0 !important;height:auto !important;max-height:460px}
/* tall/portrait-intent slots keep a taller ratio instead of a fixed height */
.crm-ph--tall.is-filled,.geopage .ph.is-filled{aspect-ratio:3/4;max-height:520px}
.is-filled svg,.is-filled b,.is-filled em,.is-filled span{display:none !important}
.rwd-fill-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
/* small/icon-sized wrappers never get a photo — they were icon slots */
.x.is-filled,[class*="icon"].is-filled{display:none !important}
/* Any filled slot is ratio-capped. Without this a portrait photo stretches its
   whole section, because the placeholder only ever set a MIN height. */
.hp-img-ph--filled,figure.hp-img-ph--filled{
  aspect-ratio:16/10;min-height:0 !important;max-height:440px;overflow:hidden;
  border:0 !important;background:none !important;padding:0 !important;border-radius:16px}
.hp-img-ph--filled img{width:100%;height:100%;object-fit:cover;display:block;border-radius:16px}
.hp-prob-img.hp-img-ph--filled{aspect-ratio:4/3;max-height:460px}
.ct-hero-media{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px -28px rgba(10,30,60,.45)}
.ct-hero-media img{width:100%;height:100%;object-fit:cover;display:block}

/* ── ABOUT page polish ── */
/* timeline image slots: dashed placeholder floating right of each entry */
/* image gutter LEFT of the dots: the whole timeline shifts right and each
   slot hangs into the reserved gutter, top-aligned with its entry */
.ab-timeline{margin-left:178px}
.ab-tl-media{position:absolute;left:-198px;top:0;width:160px;height:104px;margin:0;border:1.5px dashed #c8d3df;border-radius:10px;background:#eef2f6;color:#9aa8b8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size: var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.ab-tl-media img{width:100%;height:100%;object-fit:cover;border-radius:9px}
@media(max-width:820px){
  .ab-timeline{margin-left:0}
  .ab-tl-media{position:static;width:100%;height:150px;margin:0 0 12px}
}
/* the pastel accent in dark CTAs gets a real orange glow inside the letters */
.ab-dark-accent{
  background:linear-gradient(105deg,#FFC58F 0%,var(--cta) 45%,#FF8A4A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(232,68,10,.5));
}
.gs-dark .hero-grid-bg { background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); }
.gs-dark .eyebrow { color:var(--cta); }
.gs-dark .hero-h1 { color:#fff; }
.gs-dark .hero-h1-accent { color:var(--cta); }
.gs-dark .hero-lead { color:#A9BED6; margin-bottom:16px; }
/* checks: plain rows, tight — no white pills on navy */
.gs-dark .gs-expect-list { flex-direction:column; gap:4px; margin-top:14px; }
.gs-dark .gs-expect-item { background:transparent !important; border:0 !important; box-shadow:none !important; padding:3px 0 !important; gap:9px; }
.gs-dark .gs-expect-title { color:#fff; }
.gs-dark .gs-expect-num { background:none !important; width:auto; height:auto; }
.gs-dark .gs-expect-num .hp-guarantee-check { background:var(--cta); width:20px; height:20px; border:0 !important; box-shadow:none !important; outline:0; }
/* tighter left column = shorter row = shorter card */
.gs-dark .hero-h1 { margin-bottom:10px; }
.gs-dark.hero--slim { padding-bottom:24px; }
/* certbar goes dark and bottom-aligns with the quiz card */
.gs-dark .grid-split--hero { align-items:stretch !important; }
.gs-dark .grid-split--hero > div:first-child { display:flex; flex-direction:column; align-items:flex-start; }
.gs-dark .rwd-certbar { margin-top:auto; background:#071426; border:1px solid rgba(255,255,255,.12); border-radius:14px; }
.gs-dark .rwd-cb-item b { color:#fff; }
.gs-dark .rwd-cb-item small { color:#8FA6C2; }
.gs-dark .hq {
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#F6FAFE 100%);
}
/* sunrise hairline across the card top + a faint blue bloom in the corner */
.gs-dark .hq::before {
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--cta), #F5B32E 38%, #4A8EC2 78%, #9FD6F5);
}
.gs-dark .hq::after {
  content:""; position:absolute; top:-70px; right:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(74,142,194,.10), transparent 70%); pointer-events:none;
}
/* quiz card fills the grid row so its bottom edge meets the certbar's */
.gs-dark .grid-split--hero > div:last-child { display:flex; flex-direction:column; }
.gs-dark .grid-split--hero > div:last-child .hq { flex:1; display:flex; flex-direction:column; justify-content:center; }
@media (max-width:781px){ .gs-dark .rwd-certbar { margin-top:22px; } }
/* countdown flourish: quiz gets one soft pulse when the 30s hits zero */
.rwd-quiz-nudge { animation:rwdNudge .6s ease 2; }
@keyframes rwdNudge { 50% { transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(232,68,10,.45); } }

.hero-grid-bg {
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(74,142,194,0.08) 1px, transparent 1px);
  background-size:36px 36px; pointer-events:none;
}

.hero-right,
.home-hero-system, .seo-hero-right, .local-hero-right, .crm-hero-right, .ga-hero-right{ display:flex; flex-direction:column; gap:12px; }

/* Unified hero H1 */
.hero-h1 {
  font-family:var(--font-display);
  font-size:var(--hero-h1-size, clamp(52px, 7vw, 88px));
  font-weight:900; text-transform:uppercase;
  color:var(--ink); line-height:0.9; letter-spacing:-2px;
  margin-bottom:20px; margin-top:8px;
}
.hero-h1-accent { color:var(--page-accent, var(--accent)); }
.hero-h1-em     { font-style:italic; font-weight:300; color:var(--page-accent, var(--accent)); text-transform:none; letter-spacing:-1px; display:block; }
.hero-lead      { font-size:var(--fs-lead); line-height:1.75; color:#5b6c81; font-weight:400; max-width:480px; margin:0 auto 24px auto; }

/* Hero trust pills */
.hero-pills { display:flex; flex-wrap:wrap; gap:8px; }
.hero-pill  { display:inline-flex; align-items:center; gap:10px; border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:10px 16px; transition:border-color 0.2s; }
.hero-pill:hover { border-color:var(--page-accent, var(--accent)); }
.hero-pill-num { font-family:var(--font-display); font-size:var(--fs-h4); font-weight:900; color:var(--ink); line-height:1; }
.hero-pill-lbl { font-size:var(--fs-label); font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--ink-faint); line-height:1.3; }

.section-texture, .hero-texture,
.section-texture{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:40px 40px; pointer-events:none; opacity:0.35;
}

/* ============================================================
   10. HERO H1, LEAD — UNIFIED
   ============================================================ */
/* Dark-hero pages — keep white text */

/* Light-hero pages — dark text */


/* ============================================================
   11. HERO SECTIONS
   ============================================================ */
/* Dark heroes — kept for pages that need dramatic */
.home-hero   { background: var(--gradient-rich); padding-bottom: 0; }






/* Light heroes — for new-direction pages */







/* Textures */
.home-hero-texture, .seo-hero-texture, .wd-hero-texture,
.about-hero-texture, .hero-texture, .dark-texture {
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size:32px 32px; pointer-events:none; opacity:0.4;
}

/* Light texture for light sections */



/* Orbs */
.home-hero-orb-tl, .seo-hero-orb-tl, .about-hero-glow-a,
.local-hero-glow-left, .hero-glow-orb--tr {
  position:absolute; top:-120px; left:-120px;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(74,142,194,0.15) 0%, transparent 65%);
  pointer-events:none;
}
.home-hero-orb-br, .seo-hero-orb-br, .local-hero-glow-right,
.wd-hero-orb {
  position:absolute; bottom:-80px; right:-80px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(74,142,194,0.1) 0%, transparent 65%);
  pointer-events:none;
}

.home-hero-orb-br { bottom:-100px; right:-100px; width:500px; height:500px; }

/* Hero grids */
.home-hero-grid, .seo-hero-grid, .wd-hero-grid,
.about-hero-grid, .local-hero-grid, .crm-hero-grid, .ga-hero-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;
}





/* Trust pills */





/* Area badges */




/* Hero proof row */
.home-hero-proof { display:flex; align-items:center; gap:24px; padding-top:28px; border-top:0.5px solid rgba(255,255,255,0.1); margin-top:36px; flex-wrap:wrap; }
.home-hero-proof-item  { display:flex; flex-direction:column; gap:2px; }
.home-hero-proof-num   { font-family:var(--font-display); font-size:var(--fs-h3); font-weight:900; color:#fff; line-height:1; }
.home-hero-proof-num--blue { color:var(--pastel-sky); }
.home-hero-proof-label { font-size:var(--fs-label); color:rgba(255,255,255,0.35); text-transform:uppercase; letter-spacing:1px; }
.home-hero-proof-divider { width:1px; height:32px; background:rgba(255,255,255,0.1); flex-shrink:0; }

/* Logo / trust bar */
.home-hero-trust-bar  { border-top:0.5px solid rgba(255,255,255,0.08); padding:22px 0; }
.home-hero-trust-inner{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.home-hero-trust-label{ font-size:var(--fs-label); font-weight:700; color:rgba(255,255,255,0.2); text-transform:uppercase; letter-spacing:1.5px; white-space:nowrap; flex-shrink:0; }
.home-hero-trust-bar img { height:22px; width:auto; filter:grayscale(100%) brightness(2) opacity(0.28); flex-shrink:0; }



/* ============================================================
   12. STATS BAR
   ============================================================ */
.stats-bar {
  display:grid; grid-template-columns:repeat(4,1fr);
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats-bar-item {
  padding:32px 28px;
  border-right: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: background 0.2s ease;
}
.stats-bar-item:last-child { border-right: none; }
.stats-bar-item::after {
  content: ''; position:absolute; bottom:0; left:0;
  height:3px; width:0; background:var(--cta);
  transition: width 0.4s var(--ease-out);
}
.stats-bar-item:hover::after { width:100%; }
.stats-bar-item:hover { background: var(--base); }

.stat-num {
  font-family: var(--font-display);
  font-size: var(--fs-h1); font-weight:900;
  line-height:1; letter-spacing:-1px; color:var(--ink); margin-bottom:6px;
}
.stat-num--blue  { color: var(--accent); }

.stat-label { font-size:var(--fs-caption); color:var(--ink-light); }


/* Inline light stats row */
















/* ============================================================
   13. STATS BAND — ACCENT SECTION
   ============================================================ */










.stats-band-title, .seo-band-title, .rwd-band-h2,
.local-band-title, .home-rgs-h2 {
  font-family:var(--font-display); font-size:var(--fs-h1);
  font-weight:900; text-transform:uppercase; color:#fff; line-height:1;
}

.stats-band-cell, .seo-band-cell, .rwd-band-cell, .local-band-cell {
  padding:36px 24px; text-align:center; border-right:0.5px solid rgba(255,255,255,0.1);
}
.stats-band-cell:last-child, .seo-band-cell:last-child,
.rwd-band-cell:last-child, .local-band-cell:last-child { border-right:none; }
.stats-band-num, .seo-band-num, .rwd-band-num, .local-band-num {
  font-family:var(--font-display); font-size:var(--fs-display);
  font-weight:900; color:#fff; line-height:1; margin-bottom:8px;
}




/* ============================================================
   14. CTA SECTIONS
   ============================================================ */
.seo-cta-section, .cta-full {
  background: var(--dark);
  padding:88px 0; position:relative; overflow:hidden;
}
.seo-cta-orb-tr, .cta-band-orb--tl {
  position:absolute; top:-100px; right:-100px;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(74,142,194,0.12) 0%, transparent 70%); pointer-events:none;
}
.seo-cta-orb-bl, .cta-band-orb--br {
  position:absolute; bottom:-100px; left:-100px;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(74,142,194,0.08) 0%, transparent 70%); pointer-events:none;
}
.seo-cta-texture, .cta-full-texture {
  position:absolute; inset:0;
  background:repeating-linear-gradient(-45deg,transparent,transparent 40px,rgba(255,255,255,0.01) 40px,rgba(255,255,255,0.01) 41px);
  pointer-events:none;
}
.seo-cta-inner, .cta-full-inner, .ga-cta-inner, .ai-cta-inner,
.crm-cta-inner, .home-rgs-footer,
.quote-band-inner{ max-width:700px; margin:0 auto; text-align:center; position:relative; }

.seo-cta-h2, .ga-cta-h2, .ai-cta-h2, .crm-cta-h2, .cta-full-h2 {
  font-family:var(--font-display);
  font-size:var(--fs-display); font-weight:900; text-transform:uppercase;
  color:#fff; line-height:0.92; letter-spacing:-1px; margin:20px 0;
}
.seo-cta-lead, .ga-cta-lead, .ai-cta-lead, .crm-cta-lead,
.cta-band-lead, .cta-full-lead {
  /* matches .hero-lead — one lead size, not eighteen */
  font-size:var(--fs-lead); line-height:1.7; color:rgba(255,255,255,0.78);
  font-weight:300; max-width:520px; margin:0 auto 40px;
}
.seo-cta-actions, .ga-cta-actions, .ai-cta-actions, .crm-cta-actions,
.cta-full-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; margin-bottom:28px; }
.seo-cta-footnote, .ga-cta-footnote, .ai-cta-footnote,
.crm-cta-footnote, .cta-band-footnote { font-size:var(--fs-caption); color:rgba(255,255,255,0.2); }

/* Split CTA card */






/* Light CTA */






/* Pricing notes */
.seo-pricing-note, .wd-pricing-note { text-align:center; margin-top:28px; font-size:var(--fs-caption); color:rgba(255,255,255,0.4); }
.seo-pricing-note a, .wd-pricing-note a { color:rgba(255,255,255,0.7); font-weight:600; text-decoration:none; }


/* ============================================================
   15. FAQ ACCORDION — UNIFIED
   ============================================================ */
#ai-faq, #crm-faq, #faq-list, #local-faq, .rwd-accordion { display:flex; flex-direction:column; }

.ai-faq-item, .crm-faq-item, .ga-faq-item,
.local-faq-item, .rwd-acc-item { border-bottom:1px solid var(--border); }
.ai-faq-item:first-child, .crm-faq-item:first-child,
.ga-faq-item:first-child, .local-faq-item:first-child,
.rwd-acc-item:first-child { border-top:1px solid var(--border); }

.ai-faq-trigger, .crm-faq-trigger, .ga-faq-trigger,
.local-faq-trigger, .rwd-acc-trigger {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; background:none; border:none; cursor:pointer; text-align:left; gap:20px;
  font-family: var(--font-body);
}
.ai-faq-trigger:hover .ai-faq-q,
.crm-faq-trigger:hover .crm-faq-q,
.ga-faq-trigger:hover .ga-faq-q,
.local-faq-trigger:hover .local-faq-q,
.rwd-acc-trigger:hover span:first-child { color:var(--accent); }

.ai-faq-q, .crm-faq-q, .ga-faq-q, .local-faq-q, .rwd-acc-trigger span:first-child {
  font-size:var(--fs-body); font-weight:600; color:var(--ink); transition:color 0.2s;
}
.ai-faq-icon, .crm-faq-icon, .ga-faq-icon, .local-faq-icon, .rwd-acc-icon {
  font-size:var(--fs-h4); font-weight:300; color:var(--ink-faint); flex-shrink:0; transition:transform 0.2s;
}
.rwd-acc-trigger[aria-expanded="true"] .rwd-acc-icon { transform:rotate(45deg); }

.ai-faq-panel, .crm-faq-panel, .ga-faq-panel,
.local-faq-panel, .rwd-acc-panel {
  overflow:hidden; max-height:0; transition:max-height 0.35s ease;
}
.ai-faq-panel p, .crm-faq-panel p, .ga-faq-panel p,
.local-faq-panel p, .rwd-acc-panel p {
  padding:0 0 20px; font-size:var(--fs-small); color:var(--ink-light); line-height:1.7;
}


/* ============================================================
   16. CARDS — UNIFIED
   ============================================================ */
/* Problem / challenge cards */
.problem-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px;
  border-left: 3px solid transparent;
  transition: border-left-color 0.2s ease, box-shadow 0.2s ease;
}
.problem-card:hover { border-left-color: var(--accent); box-shadow: var(--shadow-sm); }
.problem-emoji { font-size:var(--fs-h3); margin-bottom:14px; display:block; }
.problem-title { font-size:var(--fs-h5); font-weight:700; letter-spacing:-.35px; line-height:1.28; color:var(--ink); margin-bottom:9px; }
.problem-desc  { font-size:var(--fs-caption); color:var(--ink-light); line-height:1.7; }

/* Result / feature row */






/* Contact / info card */






/* Portfolio cards */
.wd-pcard { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); }
.wd-pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.wd-pcard-img-wrap { position:relative; overflow:hidden; background:var(--base); }
.wd-pcard-img-wrap--sm { height:200px; }
.wd-pcard-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.wd-pcard-img-wrap:hover img { transform:scale(1.04); }
.wd-pcard-overlay { position:absolute; inset:0; background:rgba(10,30,60,0.7); opacity:0; transition:opacity 0.3s ease; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.wd-pcard-img-wrap:hover .wd-pcard-overlay { opacity:1; }
.wd-pcard-overlay-stat   { font-family:var(--font-display); font-size:var(--fs-h1); font-weight:900; color:#fff; line-height:1; }
.wd-pcard-overlay-label  { font-size:var(--fs-label); color:rgba(255,255,255,0.7); font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.wd-pcard-overlay-btn    { margin-top:8px; background:var(--cta); color:#fff; font-size:var(--fs-caption); font-weight:700; padding:8px 20px; border-radius:var(--radius-sm); text-decoration:none; }
/* .rwd-page a (0,1,1) outranks the single class — rematch specificity so the
   overlay button text stays white. Scoped to this class only. */
.rwd-page a.wd-pcard-overlay-btn { color:#fff !important; }
.wd-pcard-info    { padding:20px; }
.wd-pcard-tag     { font-size:var(--fs-label); font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--accent); margin-bottom:6px; }
.wd-pcard-name    { font-family:var(--font-body); font-size: var(--fs-h5); font-weight:700; letter-spacing:-.35px; text-transform:none; color:var(--ink); line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wd-pcard-sub     { font-size:var(--fs-caption); color:var(--ink-faint); margin-top:4px; }


/* ============================================================
   17. TRUST BAR / LOGO BAR
   ============================================================ */
.trust-bar, .rwd-trust-bar {
  background: var(--base); border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:20px 0; overflow:hidden;
}
.trust-bar-inner, .rwd-trust-bar-inner {
  display:flex; align-items:center; gap:40px;
  animation:rwdMarquee 30s linear infinite;
  width:max-content;
}
.trust-bar-label { font-size:var(--fs-label); font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; flex-shrink:0; }
.trust-bar img { height:40px; width:auto; filter:grayscale(100%) opacity(0.6); flex-shrink:0; transition:filter 0.2s; }
.trust-bar img:hover { filter:grayscale(0) opacity(0.8); }


/* ============================================================
   18. QUOTE BAND
   ============================================================ */
.quote-band {
  background: var(--dark);
  padding:72px 0; position:relative; overflow:hidden;
}
.quote-band-texture {
  position:absolute; inset:0;
  background:repeating-linear-gradient(-55deg,transparent,transparent 60px,rgba(255,255,255,0.01) 60px,rgba(255,255,255,0.01) 61px);
  pointer-events:none;
}

.quote-band-mark   { font-family:var(--font-display); font-size:var(--fs-display); font-weight:900; line-height:0.7; color:rgba(255,255,255,0.06); display:block; margin-bottom:-20px; }
/* a testimonial is a human voice, not a billboard — body sans, sentence case */
.quote-band-text   { font-family:var(--font-body); font-size:var(--fs-h3); font-weight:600; letter-spacing:-.3px; text-transform:none; color:#fff; line-height:1.5; max-width:56ch; margin:0 auto 16px; }
.quote-band-text .accent-blue { color:var(--pastel-sky); }
.quote-band-source { font-size:var(--fs-caption); color:rgba(255,255,255,0.35); font-weight:600; letter-spacing:0.5px; margin-bottom:24px; }
.quote-band-link   { font-size:var(--fs-caption); font-weight:700; color:rgba(255,255,255,0.6); text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.2); padding-bottom:2px; transition:color 0.2s; }
.quote-band-link:hover { color:#fff; border-color:rgba(255,255,255,0.5); }


/* ============================================================
   19. TIER / MACHINE ROWS
   ============================================================ */


/* Stepped colors for machine stack */








/* ============================================================
   20. FORMS & INPUTS
   ============================================================ */










/* ============================================================
   21. PAGINATION & MISC
   ============================================================ */








/* HP reveal scroll animation */
.hp-reveal { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; }
.hp-reveal.visible { opacity:1; transform:translateY(0); }
.hp-reveal-delay-1 { transition-delay:0.1s; }
.hp-reveal-delay-2 { transition-delay:0.2s; }
.hp-reveal-delay-3 { transition-delay:0.3s; }
.hp-reveal-delay-4 { transition-delay:0.4s; }
.hp-reveal-delay-5 { transition-delay:0.5s; }



/* ============================================================
   22. RESPONSIVE — Mobile & Tablet
   ============================================================ */
@media (max-width: 1024px) {
  :root { --section-pad: 72px 32px; --section-pad-sm: 48px 32px; --section-pad-lg: 96px 32px; }
  .grid-split, .rwd-grid--split { gap:48px; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .stats-bar-item:nth-child(2) { border-right:none; }
  .stats-bar-item:nth-child(3) { border-top:1px solid var(--border); }
  .stats-band-grid, .seo-band-grid, .rwd-band-grid { grid-template-columns:1fr 1fr; }
  .home-hero-grid, .seo-hero-grid, .wd-hero-grid,
  .about-hero-grid, .local-hero-grid { gap:48px; }
}

@media (max-width: 768px) {
  :root { --section-pad: 60px 24px; --section-pad-sm: 40px 24px; --section-pad-lg: 80px 24px; }
  .container, .container--narrow, .container--wide { padding: 0 20px; }
  .grid-2, .grid-split, .rwd-grid--2, .rwd-grid--split { grid-template-columns:1fr; gap:32px; }
  .grid-split--5-7 { grid-template-columns:1fr; }
  .home-hero-grid, .seo-hero-grid, .wd-hero-grid,
  .about-hero-grid, .local-hero-grid, .crm-hero-grid { grid-template-columns:1fr; gap:40px; }
  .stats-bar { grid-template-columns:1fr 1fr; }
  .stats-band-grid, .seo-band-grid, .rwd-band-grid { grid-template-columns:1fr 1fr; }
  .grid-3, .rwd-grid--3 { grid-template-columns:1fr; }
  .btn-group { flex-direction:column; align-items:flex-start; }
  .btn-group--center { align-items:center; }
  .cta-split { flex-direction:column; }
  .section-header { margin-bottom:36px; }
}

@media (max-width: 480px) {
  :root { --section-pad: 48px 16px; --section-pad-sm: 32px 16px; }
  .container, .container--narrow { padding:0 16px; }
  .stats-bar { grid-template-columns:1fr 1fr; }
  .grid-4 { grid-template-columns:1fr 1fr; }
  .home-hero-proof { flex-wrap:wrap; gap:16px; }
  .stats-band-grid, .seo-band-grid { grid-template-columns:1fr; }
  .btn--orange, .btn--cta, .btn--navy, .btn--dark { width:100%; justify-content:center; }
}


/* ── BREADCRUMBS auto-white inside dark sections ── */
.home-hero .breadcrumb,
.seo-hero .breadcrumb,
.wd-hero .breadcrumb,
.about-hero .breadcrumb,
.local-hero .breadcrumb,
.rgs-hero .breadcrumb,
.cs-hero .breadcrumb,
.gbp-hero .breadcrumb,
.section--navy .breadcrumb,
.section--dark .breadcrumb,
.section--deep .breadcrumb {
  color: rgba(255,255,255,0.35);
}
.home-hero .breadcrumb a,
.seo-hero .breadcrumb a,
.wd-hero .breadcrumb a,
.about-hero .breadcrumb a,
.local-hero .breadcrumb a,
.rgs-hero .breadcrumb a,
.cs-hero .breadcrumb a,
.gbp-hero .breadcrumb a,
.section--navy .breadcrumb a,
.section--dark .breadcrumb a,
.section--deep .breadcrumb a {
  color: rgba(255,255,255,0.35);
}
.home-hero .breadcrumb a:hover,
.seo-hero .breadcrumb a:hover,
.wd-hero .breadcrumb a:hover,
.about-hero .breadcrumb a:hover,
.local-hero .breadcrumb a:hover,
.rgs-hero .breadcrumb a:hover,
.section--navy .breadcrumb a:hover,
.section--dark .breadcrumb a:hover {
  color: rgba(255,255,255,0.75);
}
.home-hero .breadcrumb-sep,
.seo-hero .breadcrumb-sep,
.wd-hero .breadcrumb-sep,
.about-hero .breadcrumb-sep,
.local-hero .breadcrumb-sep,
.rgs-hero .breadcrumb-sep,
.section--navy .breadcrumb-sep,
.section--dark .breadcrumb-sep {
  color: rgba(255,255,255,0.2);
}
.home-hero .breadcrumb-current,
.seo-hero .breadcrumb-current,
.wd-hero .breadcrumb-current,
.about-hero .breadcrumb-current,
.local-hero .breadcrumb-current,
.rgs-hero .breadcrumb-current,
.section--navy .breadcrumb-current,
.section--dark .breadcrumb-current {
  color: rgba(255,255,255,0.6);
}

/* ── BODY BACKGROUND — Blocksy override ── */


/* ── LINKS — default to accent on light pages ── */
.rwd-page a:not([class]) { color: var(--accent); }
.rwd-page a:not([class]):hover { color: var(--accent-bright); }

/* ── DISPLAY HEADINGS — on dark sections stay white ── */
.section--navy .display-xl,
.section--navy .display-lg,
.section--navy .display-md,
.section--dark .display-xl,
.section--dark .display-lg,
.section--dark .display-md,
.section--deep .display-xl,
.section--deep .display-lg,
.home-hero .display-xl,
.seo-hero .display-xl,
.wd-hero .display-xl,
.about-hero .display-xl,
.cs-hero .display-xl,
.gbp-hero .display-xl {
  color: #fff;
}

/* ── BODY TEXT on dark sections ── */
.section--navy .body-lg,
.section--navy .body-md,
.section--dark .body-lg,
.section--dark .body-md,
.section--deep .body-lg {
  color: rgba(255,255,255,0.6);
}

/* ── ACCENT on dark sections — use pastel sky ── */
.section--navy .accent-blue,
.section--dark .accent-blue,
.section--deep .accent-blue,
.home-hero .accent-blue,
.seo-hero .accent-blue,
.wd-hero .accent-blue,
.about-hero .accent-blue,
.local-hero .accent-blue {
  color: var(--pastel-sky);
}

/* ── STAT NUMS on light stats bar — dark text ── */
.stats-bar .stat-num       { color: var(--ink); }
.stats-bar .stat-num--blue { color: var(--accent); }
.stats-bar .stat-label     { color: var(--ink-light); }

/* ── PROBLEM CARDS — white bg on light sections ── */
/* On .section--white these were white-on-white, so only the hairline border
   showed and read as stray rules between blocks. Give them a real surface. */
/* the tint belongs to the section, the cards sit white on top of it - one
   treatment for every problem section that uses this split layout */
.section.rwd-problem-sec,
.section:has(.seo-problem-card),
.section:has(.wd-problem-card),
.section:has(.crm-problem-card),
.section:has(.gbp-problem-card){background:#F7FAFD}
.rwd-problem-sec .problem-card,
.seo-problem-card,.wd-problem-card,.crm-problem-card,.gbp-problem-card{background:#fff;border-color:#E4EBF3}
.rwd-problem-sec .problem-card:hover,
.seo-problem-card:hover,.wd-problem-card:hover,
.crm-problem-card:hover,.gbp-problem-card:hover{border-color:var(--cta);box-shadow:0 10px 28px -18px rgba(10,30,60,.35)}
.problem-card { background: var(--white); }

/* ── SECTION ALIASES that used .section--white ── */
.section--white { background: var(--white); }
.section--light { background: var(--base); }

/* ── TICKER text ── */
.hp-ticker { background: var(--dark); }
.hp-ticker-item { color: rgba(255,255,255,0.3); }
.hp-ticker-item--accent { color: rgba(255,255,255,0.55); }

/* ── TRUST BAR — keep light bg ── */
.trust-bar { background: var(--base); }

/* ── QUOTE BAND accent override ── */
.quote-band .accent-blue { color: var(--pastel-sky) !important; }

/* ── PORTFOLIO overlay btn — uses cta ── */
.wd-pcard-overlay-btn { background: var(--cta); }

/* ── FORM inputs on white bg ── */
.rwd-input,
.gs-input,
.qs-input,
.qs2-input,
.cf-input {
  background: var(--white);
  border-color: var(--border);
  color: var(--ink);
}
.rwd-input:focus,
.gs-input:focus,
.qs-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(74,142,194,0.1);
}

/* ── BLOCKSY NAV — light bg variant ── */
/* If Blocksy nav is transparent/white over light hero */
.ct-header { background: var(--white) !important; border-bottom: 1px solid var(--border) !important; }
.ct-menu > li > a,
.ct-header .ct-menu > li > a { color: var(--ink) !important; }
.ct-menu > li > a:hover { color: var(--accent) !important; }

/* Keep dark header on dark-hero pages with class on body */
body.dark-nav .ct-header { background: transparent !important; border-bottom: none !important; }
body.dark-nav .ct-header a.ct-menu-link { color: #fff !important; }
body.dark-nav .ct-header a.ct-menu-link svg { fill: #fff; }
/* raster logo -> render white on dark heroes (keeps colored logo on light pages) */
body.dark-nav .ct-header .site-logo-container img,
body.dark-nav .ct-header [class*="logo"] img { filter: brightness(0) invert(1); }

/* Whole wordmark in one blue. The artwork has "WEB DESIGNER" baked in as grey
   (#747474) — a raster can't be half-recoloured, so the container paints a flat
   colour masked by the logo's own alpha channel and the bitmap is hidden.
   Dev URL below is rewritten by Duplicator's search-replace at launch. */
   REVERTED 2026-08-16: a flat mask fill made the whole logo one silhouette and
   destroyed the rocket detail and the white outlines. A single-colour wordmark
   needs a new export, not CSS. Original artwork renders as-is. */
body.dark-nav .ct-header a.ct-menu-link:hover { color: rgba(255,255,255,.72) !important; }
body.dark-nav .ct-menu > li > a { color: rgba(255,255,255,0.85) !important; }
body.dark-nav .ct-menu > li > a:hover { color: #fff !important; }


/* ============================================================
   HOMEPAGE v2 — CSS
   ============================================================ */

/* ============================================================
   HOMEPAGE v2 — CSS
   Requires style-v4.css loaded first.
   Sky blue theme. Zero inline styles.
   ============================================================ */

/* ── TOP BAR ──
   Replaced the scrolling marquee 2026-08-16. Same ~37px height so the header
   offset below it is unchanged. Everything one neutral colour: the phone
   number is a link, not a CTA, and shouldn't compete with the header button. */
/* ── HEADER PHONE BUTTON ──
   Round blue button beside "Get started". The number is hidden until hover or
   keyboard focus, so it costs no horizontal space but stays one tap away. */
.rwd-phone-btn {
  position: relative; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%; /* matches .ct-button height */
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 12px; background: #fff; color: var(--accent) !important;
  box-shadow: inset 0 0 0 1.5px #D8E4F0;
  text-decoration: none; transition: background .18s ease, transform .18s ease;
}
.rwd-phone-btn svg { width: 19px; height: 19px; display: block; }
.rwd-phone-btn:hover, .rwd-phone-btn:focus-visible { background: var(--cta); color: #fff !important; box-shadow: none; transform: translateY(-1px); }
.rwd-phone-btn::after {
  content: attr(data-tel);
  position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(-4px);
  background: var(--ink); color: #fff; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .2px;
  padding: 7px 12px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .18s ease, transform .18s ease; z-index: 20;
}
.rwd-phone-btn::before {
  content: ""; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: var(--ink);
  opacity: 0; transition: opacity .18s ease; pointer-events: none; z-index: 20;
}
.rwd-phone-btn:hover::after, .rwd-phone-btn:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.rwd-phone-btn:hover::before, .rwd-phone-btn:focus-visible::before { opacity: 1; }
@media (max-width: 520px) { .rwd-phone-btn { width: 40px; height: 40px; margin-left: 8px; } .rwd-phone-btn::after, .rwd-phone-btn::before { display: none; } }

/* (top bar CSS removed 2026-08-16 — rwd-ticker.html deleted with it) */

/* breathing room only while the header is parked at the top — the sticky bar
   shrinks and must not carry the extra 34px down the page */
/* Blocksy sizes this row with min-height: var(--shrink-height, var(--height));
   once --shrink-height (the 60px sticky value) exists it wins even at rest.
   Only --height is overridden: --shrink-height must stay UNDEFINED at rest
   (Blocksy's JS defines it inline while stuck), or the shrunk size applies
   permanently — the exact bug being fixed. */
#header [data-row*="middle"] { --height: 84px; }
/* Load-time hop fix: Blocksy's JS measures the header AFTER first paint and
   only then sets an inline height on .ct-sticky-container. Until that runs the
   fixed header overlaps the page, then everything shoves down 84px + 12px
   offset. Reserving the space in CSS means paint #1 already matches paint #2. */
.ct-sticky-container { height: 96px !important; min-height: 96px; }
/* logged-in "dancing" header: Blocksy fills --admin-bar via JS AFTER first
   paint, so the fixed header repaints 32px lower a beat later. Pre-set it. */
body.admin-bar { --admin-bar: 32px; }
/* compact company-style sticky: shorter row + smaller logo once scrolled
   (body.rwd-stuck is set by our scroll listener in functions.php) */
body.rwd-stuck #header [data-row*="middle"] { --height: 62px; }
#header [data-row*="middle"] > div { transition: min-height .25s ease; }
.ct-header .site-logo-container img { transition: width .25s ease; }
body.rwd-stuck .ct-header .site-logo-container img { width: 112px; }
/* Gap between the bar and the nav row. This lives on the TOP BAR, not on the
   header: Blocksy's sticky header exposes no state hook (data-sticky stays
   "shrink" and no class is added), so a margin on the header itself rides along
   when it sticks and leaves a dead strip above the floating nav. The top bar
   scrolls away, so its margin can't follow. */
/* (top bar retired — margin no longer applies) */


/* ── HERO — light cloud-blue ── */
/* sunrise hairline along the hero's bottom edge (same gradient as get-started) */
.hp-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 2;
  background: linear-gradient(90deg, var(--cta), #F5B32E 38%, #4A8EC2 78%, #9FD6F5);
}
.hp-hero { background: #EBF4FC; display: flex; flex-direction: column; justify-content: center; }

/* Subtle dot grid texture */
.hp-hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(74,142,194,0.12) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}

/* Center all content */
.hp-hero-inner {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 60px;
}

/* Eyebrow with lines */
.hp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 24px;
}
.hp-hero-eyebrow-line {
  width: 24px;
  height: 1.5px;
  background: var(--ink-faint);
  flex-shrink: 0;
}

/* H1 — dark ink, massive */
.hp-hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 0.88;
  letter-spacing: -2px;
  margin-bottom: 8px;
}

/* H2 — sky blue accent */
.hp-hero-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 0.88;
  letter-spacing: -2px;
  margin-bottom: 15px;
}

.hp-hero-lead {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink-mid);
  max-width: 560px;
  margin: 0 auto 32px;
  font-weight: 300;
}

.hp-hero-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Scroll hint */
.hp-scroll-hint {
  display: flex;
  justify-content: center;
  padding: 24px 0;
  position: relative;
}
.hp-scroll-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-small);
  animation: rwdPulse 2.5s ease infinite;
}


/* ── BENTO GRID ── */
.hp-bento-section {
  padding: 0;
  background: var(--base);
}
.hp-bento-section .container {
  padding-top: 0;
  padding-bottom: 0;
}
.hp-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0;
}

/* All bento cards */
.hp-bento-card {
  border-radius: 14px;
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
}
.hp-bento-card--wide { grid-column: span 2; }

/* Sky blue — featured card */
.hp-bento-card--sky {
  background: var(--pastel-sky);
}

/* Sky light — slightly lighter, for numbers */
.hp-bento-card--sky-light {
  background: #D8EDF8;
}

/* White */
.hp-bento-card--white {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* Cream — universal warm accent */
.hp-bento-card--cream {
  background: var(--cream);
  border: 1px solid var(--cream-border);
  box-shadow: var(--shadow-sm);
}

/* Dark */
.hp-bento-card--dark {
  background: var(--dark);
}

/* Bento tags */
.hp-bento-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(10,30,60,0.12);
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.hp-bento-tag--outline {
  background: transparent;
  border: 1px solid rgba(10,30,60,0.2);
  color: var(--ink-mid);
}


/* Featured card content */
.hp-bento-feature-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.0;
  margin-bottom: 8px;
}
.hp-bento-feature-desc {
  font-size: var(--fs-caption);
  color: var(--ink-mid);
  line-height: 1.6;
}

/* Big stat number */
.hp-bento-big {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}
.hp-bento-card--sky-light .hp-bento-big { color: var(--ink); }
.hp-bento-card--cream .hp-bento-big     { color: var(--ink); }
.hp-bento-stat-label {
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-faint);
}
.hp-bento-card--cream .hp-bento-stat-label { color: rgba(10,30,60,0.45); }

/* Mid-size text card */
.hp-bento-mid-title,
.gs-fields-headline{
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.0;
  margin-bottom: 6px;
}
.hp-bento-mid-desc {
  font-size: var(--fs-caption);
  color: var(--ink-faint);
}

/* Dark card content */
.hp-bento-dark-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.0;
  margin-bottom: 8px;
}
.hp-bento-dark-desc {
  font-size: var(--fs-caption);
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}


/* ── SYSTEM GRID ── */
.hp-sys-accent { color: var(--pastel-sky); }

.hp-system-grid,
.rgs-components-grid,
.rgs-audience-grid,
.ab-values-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hp-system-card {
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.hp-system-card:hover {
  background: rgba(74,142,194,0.12);
  border-color: rgba(74,142,194,0.35);
}
.hp-system-card::before,
.rgs-comp-card::before{
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.hp-system-card:hover::before { transform: scaleX(1); }
.hp-system-num,
.rgs-comp-num{ font-size: var(--fs-label); font-weight: 800; letter-spacing: 2px; color: var(--accent); margin-bottom: 10px; }
/* ghost number: giant, faint, cropped by the card's top-right corner.
   Double-class specificity so the 12px micro rule at ~7026 can't flatten it. */
.hp-system-card { position: relative; overflow: hidden; }
.hp-system-card .hp-system-num {
  position: absolute; top: -16px; right: -8px; margin: 0; pointer-events: none;
  font-family: var(--font-display); font-size: var(--fs-display); line-height: 1;
  letter-spacing: -2px; color: rgba(255,255,255,.07);
}
.gs-process .hp-system-card .hp-system-num { color: rgba(10,30,60,.06); }
.hp-system-icon { font-size: var(--fs-h3); margin-bottom: 12px; }
.hp-system-title,
.rgs-comp-title{
  font-family: var(--font-display);
  font-size: var(--fs-h4); font-weight: 800;
  text-transform: uppercase;
  color: #fff; line-height: 1.1;
  margin-bottom: 10px;
}
.hp-system-desc { font-size: var(--fs-caption); color: rgba(255,255,255,0.5); line-height: 1.7; flex: 1; }
.hp-system-result {
  font-size: var(--fs-label); font-weight: 700;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase; letter-spacing: 0.8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 0.5px solid rgba(255,255,255,0.08);
}
.hp-system-result::before { content: '→ '; color: var(--accent); }

.hp-system-card--featured {
  background: rgba(74,142,194,0.12);
  border-color: rgba(74,142,194,0.25);
}

/* Guarantees row */
.hp-guarantees {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}
.hp-guarantee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: rgba(255,255,255,0.55);
}
.hp-guarantee-check {
  color: var(--accent);
  font-weight: 800;
}
/* [rwd_guarantees] as a slim one-line strip, not a 358px section */
.rwd-guar-strip { background: var(--dark); padding: 20px 0; }
.rwd-guar-strip .container { padding-top: 0; padding-bottom: 0; }
.rwd-guar-strip .hp-guarantee-item { color: rgba(255,255,255,.78); }


/* ── CASE STUDY ── */
.hp-cs-pill {
  display: inline-block;
  background: var(--cream);
  border: 1px solid var(--cream-border);
  color: var(--ink);
  font-size: var(--fs-caption);
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 4px;
}

.hp-case-rows { display: flex; flex-direction: column; }
.hp-case-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.hp-case-row:first-child { border-top: 1px solid var(--border); }
.hp-case-row-label {
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 6px;
}
.hp-case-row-text {
  font-size: var(--fs-small);
  color: var(--ink-mid);
  line-height: 1.65;
}
.hp-case-row--highlight {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 16px;
  border: 1px solid var(--cream-border);
  margin-top: 4px;
}
.hp-case-row--highlight .hp-case-row-label { color: var(--ink); }
.hp-case-row--highlight .hp-case-row-text  { color: var(--ink); font-weight: 500; }

.hp-case-dashboard,
.hp-reviews,
.ai-geo-checklist,
.ai-reviews,
.svcs-reviews{ display: flex; flex-direction: column; gap: 10px; }

.hp-case-main-card {
  background: var(--ink);
  border-radius: var(--radius-xl);
  padding: 28px;
  color: #fff;
}
.hp-case-card-eyebrow,
.ai-workflow-label{ font-size: var(--fs-label); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 10px; }
.hp-case-revenue { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: #fff; line-height: 1; letter-spacing: -2px; }
.hp-case-revenue-label { font-size: var(--fs-caption); color: rgba(255,255,255,0.45); margin-bottom: 20px; }
.hp-case-mini-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding-top: 20px; border-top: 0.5px solid rgba(255,255,255,0.1); }
.hp-case-mini-cell { text-align: center; }
.hp-case-mini-cell + .hp-case-mini-cell { border-left: 0.5px solid rgba(255,255,255,0.1); }
.hp-case-mini-num,
.gads-dash-num,
.gbp-mini-num,
.seo-mini-num{ font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; color: #fff; line-height: 1; }
.hp-case-mini-lbl { font-size: var(--fs-label); color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

.hp-case-chart-card {
  background: var(--base);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
}
.hp-case-chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hp-case-chart-label  { font-size: var(--fs-caption); font-weight: 700; color: var(--ink-mid); }
.hp-case-chart-badge  { font-size: var(--fs-label); font-weight: 700; background: var(--cream); color: var(--ink); padding: 3px 10px; border-radius: 20px; }
.hp-case-bars { display: flex; align-items: flex-end; gap: 5px; height: 60px; }
.hp-case-bar {
  flex: 1;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  opacity: 0.25;
}
.hp-case-bar--peak { opacity: 1; }
.hp-case-bar--h8   { height: 8%; }
.hp-case-bar--h15  { height: 15%; }
.hp-case-bar--h26  { height: 26%; }
.hp-case-bar--h40  { height: 40%; }
.hp-case-bar--h55  { height: 55%; }
.hp-case-bar--h70  { height: 70%; }
.hp-case-bar--h84  { height: 84%; }
.hp-case-bar--h100 { height: 100%; }

.hp-case-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: var(--fs-label);
  color: var(--ink-faint);
  font-weight: 600;
}


/* ── COMPARISON TABLE ── */
.hp-compare {
  max-width: 800px;
  margin: 0 auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.hp-compare-header {
  display: grid;
  grid-template-columns: 1fr 140px 180px;
  background: var(--ink);
  padding: 14px 24px;
}
.hp-compare-desc-col { font-size: var(--fs-label); font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; }
.hp-compare-them-col { font-size: var(--fs-caption); font-weight: 700; color: rgba(255,255,255,0.6); text-align: center; }
.hp-compare-us-col   { font-size: var(--fs-caption); font-weight: 700; color: var(--pastel-sky); text-align: center; }

.hp-compare-row {
  display: grid;
  grid-template-columns: 1fr 140px 180px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.hp-compare-row:last-child { border-bottom: none; }
.hp-compare-row:nth-child(even) { background: var(--base); }
.hp-compare-desc { font-size: var(--fs-small); color: var(--ink); font-weight: 500; }
.hp-compare-no   { text-align: center; color: #E03515; font-size: var(--fs-body); font-weight: 800; }
.hp-compare-yes  { text-align: center; color: #1a6640; font-size: var(--fs-body); font-weight: 800; background: #dcfce7; border-radius: 6px; padding: 4px 0; }


/* ── TESTIMONIALS ── */
.hp-rating-row,
.rgs-row-left,
.ai-rating-row,
.svcs-sys-row{ display: flex; align-items: center; gap: 12px; }
.hp-rating-stars { color: #F59E0B; font-size: var(--fs-h4); letter-spacing: 2px; }
.hp-rating-score,
.ai-rating-score{ font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; color: #fff; }
.hp-rating-note  { font-size: var(--fs-caption); color: rgba(255,255,255,0.35); margin-top: 6px; }


.hp-review,
.ai-review{
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.hp-review-stars  { color: #F59E0B; font-size: var(--fs-caption); letter-spacing: 1px; margin-bottom: 10px; }
.hp-review-text,
.ai-review-text{ font-size: var(--fs-caption); color: rgba(255,255,255,0.65); line-height: 1.7; margin-bottom: 14px; font-style: italic; }
.hp-review-author,
.ab-review-author,
.ai-review-author,
.crm-review-author,
.gads-review-author,
.seo-review-author,
.wd-review-author,
.svcs-review-author,
.rd-review-author,
.ct-socials-wrap{ display: flex; align-items: center; gap: 10px; }
.hp-review-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-caption); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hp-review-name,
.ai-review-name,
.crm-mini-int-name,
.seo-review-name,
.wd-review-name,
.svcs-sys-lbl,
.rd-review-name{ font-size: var(--fs-caption); font-weight: 700; color: #fff; }
.hp-review-role { font-size: var(--fs-label); color: rgba(255,255,255,0.35); margin-top: 1px; }


/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .hp-system-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-bento       { grid-template-columns: repeat(2, 1fr); }
  .hp-bento-card--wide { grid-column: span 2; }
}

@media (max-width: 768px) {
  .hp-hero-h1, .hp-hero-h2 { font-size: var(--fs-h1); }
  .hp-hero { min-height: auto; padding: 80px 0 0; }
  .hp-system-grid { grid-template-columns: 1fr; }
  .hp-bento       { grid-template-columns: 1fr 1fr; }
  .hp-bento-card--wide { grid-column: span 2; }
  .hp-compare-header, .hp-compare-row { grid-template-columns: 1fr 80px 120px; }
  .hp-compare { border-radius: var(--radius-lg); }
}

@media (max-width: 480px) {
  .hp-hero-btns { flex-direction: column; align-items: center; }
  .hp-bento     { grid-template-columns: 1fr; }
  .hp-bento-card--wide { grid-column: span 1; }
  .hp-guarantees { flex-direction: column; align-items: center; gap: 14px; }
}

/* Portfolio header split row */
.hp-portfolio-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* ── CASE STUDY CAROUSEL ── */
.hp-cs-carousel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.hp-cs-carousel-nav { display: flex; gap: 8px; }
.hp-cs-arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border-dark);
  background: var(--white);
  color: var(--ink);
  font-size: var(--fs-body);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
  font-family: var(--font-body);
}
.hp-cs-arrow:hover,
.pf-filter-btn--active,
.wd-process-dot--dark,
.rd-process-dot--dark,
.ct-social--tt:hover{
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.hp-cs-track-wrap {
  overflow: hidden;
  border-radius: var(--radius-xl);
}
.hp-cs-track {
  display: flex;
  gap: 10px;
  transition: transform 0.45s var(--ease-out);
  will-change: transform;
}

/* Each card — fixed width so 3 visible at a time */
.hp-cs-card {
  min-width: calc(33.333% - 7px);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.hp-cs-card:hover {
  border-color: var(--cta);
  box-shadow: var(--shadow-md, 0 10px 28px -14px rgba(15,30,56,.28));
  transform: translateY(-3px);
}

/* Card color themes retired 2026-08-24 (pastels rejected) — modifiers kept in markup, all render white */
.hp-cs-card--sky, .hp-cs-card--mint, .hp-cs-card--cream, .hp-cs-card--blush, .hp-cs-card--lavender { background: var(--white); }

/* Card content */
.hp-cs-card-tag {
  font-size: var(--fs-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.hp-cs-card-title {
  /* same treatment as blog card titles (.rwd-ba-card h2) */
  font-family: var(--font-body);
  font-size: var(--fs-h4); font-weight: 700;
  letter-spacing: -.3px; text-transform: none;
  color: var(--ink); line-height: 1.3;
  margin-bottom: 16px;
}
.hp-cs-card-stat {
  font-family: var(--font-display);
  font-size: var(--fs-h1); font-weight: 900;
  color: var(--ink); line-height: 1;
  letter-spacing: -1px;
}
.hp-cs-card-stat-label {
  font-size: var(--fs-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.hp-cs-card-desc {
  font-size: var(--fs-caption);
  color: var(--ink-mid);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 20px;
}
.hp-cs-card-link {
  font-size: var(--fs-caption); font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(10,30,60,0.2);
  padding-bottom: 2px;
  width: fit-content;
  transition: border-color 0.2s;
}
.hp-cs-card-link:hover { border-color: var(--ink); }

/* Responsive */
@media (max-width: 900px) {
  .hp-cs-card { min-width: calc(50% - 5px); }
}
@media (max-width: 560px) {
  .hp-cs-card { min-width: 85%; }
}

/* ── BLOG SECTION ── */
.hp-blog-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.hp-blog-posts-wrap { width: 100%; }

/* Blocksy post cards — match our design system */
.hp-blog-posts-wrap .ct-post-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hp-blog-posts-wrap .ct-post-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px);
}

/* ── MULTI-STEP QUOTE FORM — from home-form-centered.css ── */
/* ============================================================
   HOMEPAGE FORM SECTION — CENTERED LAYOUT
   All classes prefixed qs2-* to avoid collisions
   ============================================================ */

/* ── SECTION ── */
.qs2-section {
  background: var(--dark);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.qs2-bg-dot-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none; opacity: 0.4;
}
.qs2-bg-orb-a {
  position: absolute; top: -120px; right: -120px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.qs2-bg-orb-b {
  position: absolute; bottom: -100px; left: -100px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(9,20,41,0.25) 0%, transparent 65%);
  pointer-events: none;
}
.qs2-bg-stripe {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -55deg, transparent, transparent 60px,
    rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px
  );
  pointer-events: none;
}

/* ── CENTERED HEADER ── */
.qs2-header { text-align: center; margin-bottom: 56px; position: relative; }

.qs2-headline {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  line-height: 0.9;
  letter-spacing: -2px;
}
.qs2-headline-outline {
  -webkit-text-stroke: 2px rgba(255,255,255,0.3);
  color: transparent;
}
.qs2-sub {
  font-size: var(--fs-body);
  color: rgba(255,255,255,0.5);
  font-weight: 300;
  line-height: 1.7;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Trust row */
.qs2-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 28px;
}
.qs2-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  padding: 0 20px;
}
.qs2-trust-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.qs2-trust-divider {
  width: 1px; height: 16px;
  background: rgba(255,255,255,0.15);
}
.qs2-trust-phone {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s;
}
.qs2-trust-phone:hover { color: #fff; }

/* ── WIDE CARD ── */
.qs2-card {
  background: var(--white);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.3);
  border: 0.5px solid rgba(255,255,255,0.1);
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

/* Card top bar — progress + dots */
.qs2-card-top {
  background: var(--navy);
  padding: 24px 48px 20px;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}

/* Step dots */
.qs2-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.qs2-dot-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.qs2-dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-small); font-weight: 800; color: rgba(255,255,255,0.35);
  transition: all 0.3s ease;
}
.qs2-dot--active {
  background: #fff; border-color: #fff; color: var(--navy);
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.qs2-dot--done {
  background: var(--blue); border-color: var(--blue);
  color: #fff; font-size: 0;
}
.qs2-dot--done::after { content: '✓'; font-size: var(--fs-caption); font-family: sans-serif; }
.qs2-dot-label { font-size: var(--fs-label); font-weight: 700; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.8px; }
.qs2-dot-connector { height: 2px; width: 60px; background: rgba(255,255,255,0.1); margin: 0 4px 22px; }

/* Progress bar */
.qs2-progress-bar {
  height: 3px; background: rgba(255,255,255,0.1);
  border-radius: 99px; overflow: hidden; margin-bottom: 6px;
}
.qs2-progress-fill {
  height: 100%; background: #fff;
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0%;
}
.qs2-progress-label { font-size: var(--fs-label); font-weight: 600; color: rgba(255,255,255,0.3); text-align: center; }

/* Form area */
.qs2-card form { padding: 48px; }

/* ── STEP PANELS ── */
.qs2-step { display: none; }
.qs2-step--active { display: block; animation: qs2FadeUp 0.35s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes qs2FadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qs2-shake { animation: qs2ShakeAnim 0.4s ease !important; }
@keyframes qs2ShakeAnim {
  0%,100%{ transform:translateX(0); }
  20%    { transform:translateX(-7px); }
  40%    { transform:translateX(7px); }
  60%    { transform:translateX(-4px); }
  80%    { transform:translateX(4px); }
}

/* Step header */
.qs2-step-header { margin-bottom: 32px; }
.qs2-step-headline {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 900; text-transform: uppercase;
  color: var(--navy); line-height: 1.0; letter-spacing: -0.3px;
  margin-bottom: 8px;
}
.qs2-step-sub { font-size: var(--fs-small); color: var(--text-light); line-height: 1.6; }

/* ── CHOICE CARDS ── */
.qs2-choices {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 28px;
}
.qs2-choices--2 { grid-template-columns: repeat(2, 1fr); }
.qs2-choices--3 { grid-template-columns: repeat(3, 1fr); }
.qs2-choices--4 { grid-template-columns: repeat(4, 1fr); }
.qs2-choices--5 { grid-template-columns: repeat(3, 1fr); }
.qs2-choices--6 { grid-template-columns: repeat(6, 1fr); }

.qs2-choice { cursor: pointer; position: relative; }
.qs2-choice-input { position: absolute; opacity: 0; width: 0; height: 0; }
.qs2-choice-card {
  background: var(--off-white); border: 2px solid var(--border);
  border-radius: 12px; padding: 18px 14px;
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
  position: relative; height: 100%;
  display: flex; flex-direction: column; gap: 3px;
}
.qs2-choice:hover .qs2-choice-card {
  border-color: var(--blue); background: var(--blue-pale);
  transform: translateY(-2px); box-shadow: 0 5px 16px rgba(15,30,60,0.08);
}
.qs2-choice--selected .qs2-choice-card { border-color: var(--navy); background: var(--navy); }
.qs2-choice-icon { font-size: var(--fs-h3); margin-bottom: 6px; display: block; line-height: 1; }
.qs2-choice-title {
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: 800;
  text-transform: uppercase; color: var(--navy); line-height: 1.1; transition: color 0.2s;
}
.qs2-choice--selected .qs2-choice-title { color: #fff; }
.qs2-choice-sub { font-size: var(--fs-label); color: var(--text-faint); line-height: 1.3; transition: color 0.2s; }
.qs2-choice--selected .qs2-choice-sub { color: rgba(255,255,255,0.45); }
.qs2-choice-check {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-size: var(--fs-label); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.4);
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
}
.qs2-choice--selected .qs2-choice-check { opacity: 1; transform: scale(1); background: #22ca9d; }

/* ── INPUTS ── */
.qs2-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 4px; }
.qs2-fields-row--3 { grid-template-columns: repeat(3, 1fr); }
.qs2-field-group { margin-bottom: 20px; }
.qs2-label { display: block; font-size: var(--fs-caption); font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.qs2-req { color: var(--blue); }
.qs2-input {
  width: 100%; padding: 14px 18px;
  border: 2px solid var(--border); border-radius: 10px;
  font-size: var(--fs-body); font-family: var(--font-body);
  color: var(--text-dark); background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none; -webkit-appearance: none;
}
.qs2-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(28,79,179,0.08); }
.qs2-input--error { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,0.08); }
.qs2-input--lg { font-size: var(--fs-body); padding: 16px 18px; }
.qs2-hint { font-size: var(--fs-label); color: var(--text-faint); margin-top: 5px; }
.qs2-textarea {
  width: 100%; padding: 14px 18px;
  border: 2px solid var(--border); border-radius: 10px;
  font-size: var(--fs-body); font-family: var(--font-body);
  color: var(--text-dark); background: var(--white);
  resize: vertical; min-height: 130px;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none; line-height: 1.6;
}
.qs2-textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(28,79,179,0.08); }

/* ── NAV ── */
.qs2-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.qs2-btn-back {
  background: transparent; border: 2px solid var(--border);
  color: var(--text-mid); font-family: var(--font-body);
  font-size: var(--fs-small); font-weight: 600;
  padding: 13px 24px; border-radius: 10px;
  cursor: pointer; transition: all 0.2s ease;
}
.qs2-btn-back:hover { border-color: var(--navy); color: var(--navy); }
.qs2-btn-next {
  background: var(--navy); color: #fff; border: none;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700;
  padding: 15px 36px; border-radius: 10px;
  cursor: pointer; transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
  display: flex; align-items: center; gap: 8px;
}
.qs2-btn-next:hover { background: var(--blue); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(15,30,60,0.2); }
.qs2-arrow { font-size: var(--fs-body); }
.qs2-btn-submit {
  background: var(--orange); color: #fff !important; border: none;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700;
  padding: 16px 36px; border-radius: 10px;
  cursor: pointer; transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 4px 16px rgba(249,115,22,0.3);
}
.qs2-btn-submit:hover:not(:disabled) { background: #ea6b0c; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(249,115,22,0.4); }
.qs2-btn-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.qs2-submit-loading { display: none; }
.qs2-btn-submit.qs2-loading .qs2-submit-text   { display: none; }
.qs2-btn-submit.qs2-loading .qs2-submit-loading { display: inline; }

.qs2-error { font-size: var(--fs-caption); color: #ef4444; margin-top: 12px; line-height: 1.5; }
.qs2-privacy { font-size: var(--fs-label); color: var(--text-faint); line-height: 1.6; margin-top: 16px; text-align: center; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .qs2-card { max-width: 720px; }
  .qs2-card-top { padding: 20px 32px 16px; }
  .qs2-card form { padding: 36px 32px; }
  .qs2-choices--5 { grid-template-columns: repeat(3, 1fr); }
  .qs2-choices--6 { grid-template-columns: repeat(3, 1fr); }
  .qs2-choices--4 { grid-template-columns: repeat(2, 1fr); }
  .qs2-dot-connector { width: 40px; }
}

@media (max-width: 680px) {
  .qs2-section { padding: 72px 0; }
  .qs2-card-top { padding: 18px 20px 14px; }
  .qs2-card form { padding: 28px 20px; }
  .qs2-choices--5, .qs2-choices--6,
  .qs2-choices--4, .qs2-choices--3 { grid-template-columns: repeat(2, 1fr); }
  .qs2-choices { grid-template-columns: 1fr 1fr; }
  .qs2-fields-row, .qs2-fields-row--3 { grid-template-columns: 1fr; }
  .qs2-btn-next, .qs2-btn-submit { width: 100%; justify-content: center; }
  .qs2-btn-back { width: 100%; text-align: center; justify-content: center; }
  .qs2-nav { flex-direction: column-reverse; gap: 10px; }
  .qs2-trust-row { gap: 8px; }
  .qs2-trust-divider { display: none; }
  .qs2-trust-item { padding: 4px 12px; }
  .qs2-dot-connector { width: 20px; }
  .qs2-dot { width: 30px; height: 30px; font-size: var(--fs-caption); }
  .qs2-card { border-radius: 16px; }
}

@media (max-width: 420px) {
  .qs2-choices--2 { grid-template-columns: 1fr; }
  .qs2-choices--6 { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   ROCKET GROWTH SYSTEM PAGE — v4
   Requires style-v4.css + style-v4-patch.css loaded first.
   ============================================================ */

/* ── HERO ── */





/* Proof bar */
.rgs-proof-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: fit-content;
}
.rgs-proof-item {
  padding: 14px 20px;
  text-align: center;
}
.rgs-proof-div,
.lp-stat-div{
  width: 1px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
}
.rgs-proof-num,
.rgs-comp-cream-num,
.svcs-hero-pill-num{
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
}
.rgs-proof-label {
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-faint);
  margin-top: 3px;
}

/* Trust strip */
.rgs-trust-strip {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--ink-faint);
}

/* ── MACHINE CARD ── */
.rgs-machine-card {
  background: var(--dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(26,23,20,0.25);
}
.rgs-machine-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255,255,255,0.04);
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
.rgs-machine-label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.rgs-machine-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-label);
  font-weight: 700;
  color: #22ca9d;
}
.rgs-machine-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22ca9d;
  animation: rwdPulse 2s ease infinite;
}

/* Machine rows */
.rgs-machine-stack { display: flex; flex-direction: column; }
.rgs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  text-decoration: none;
  transition: background 0.2s ease;
}
.rgs-row:last-child { border-bottom: none; }
.rgs-row:hover { background: rgba(255,255,255,0.04); }

.rgs-row-icon { font-size: var(--fs-h5); flex-shrink: 0; }
.rgs-row-num {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 2px;
}
.rgs-row-name {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.rgs-row-right { text-align: right; }
.rgs-row-metric {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.rgs-row-sub {
  font-size: var(--fs-label);
  color: rgba(255,255,255,0.3);
  margin-top: 2px;
}

/* Row stepped colors — matching Image 1 in the brief */
.rgs-row--1 { background: rgba(74,142,194,0.35); }
.rgs-row--2 { background: rgba(74,142,194,0.28); }
.rgs-row--3 { background: rgba(74,142,194,0.22); }
.rgs-row--4 { background: rgba(74,142,194,0.16); }
.rgs-row--5 { background: rgba(74,142,194,0.11); }
.rgs-row--6 { background: rgba(74,142,194,0.07); }
.rgs-row--7 { cursor: default; }
.rgs-row--7 .rgs-row-name { color: rgba(255,255,255,0.8); }
.rgs-row--1:hover { background: rgba(74,142,194,0.45); }
.rgs-row--2:hover { background: rgba(74,142,194,0.36); }
.rgs-row--3:hover { background: rgba(74,142,194,0.30); }
.rgs-row--4:hover { background: rgba(74,142,194,0.24); }
.rgs-row--5:hover { background: rgba(74,142,194,0.18); }
.rgs-row--6:hover { background: rgba(74,142,194,0.14); }


/* ── COMPONENTS GRID (dark section) ── */
.rgs-accent { color: var(--pastel-sky); }


.rgs-comp-card {
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.rgs-comp-card:hover {
  background: rgba(74,142,194,0.1);
  border-color: rgba(74,142,194,0.3);
}

.rgs-comp-card:hover::before { transform: scaleX(1); }
.rgs-comp-card--featured { background: rgba(74,142,194,0.1); border-color: rgba(74,142,194,0.25); }

.rgs-comp-icon  { font-size: var(--fs-h3); margin-bottom: 12px; display:block; }
.rgs-comp-icon svg{width:46px;height:46px;display:block;color:#7AAADC;stroke-width:1.6}

.rgs-comp-desc  { font-size: var(--fs-caption); color: rgba(255,255,255,0.5); line-height: 1.7; flex: 1; margin-bottom: 16px; }

/* Cream data box inside dark card */
.rgs-comp-cream {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 16px;
}

.rgs-comp-cream-lbl { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-faint); margin-top: 2px; }
.rgs-comp-link { font-size: var(--fs-caption); font-weight: 700; color: var(--accent); text-decoration: none; transition: color 0.2s; }
.rgs-comp-link:hover { color: var(--accent-bright); }


/* FLOW DIAGRAM block deleted 2026-08-24 — .rgs-flow* only existed in old RGS page revisions, nothing live used it */

/* ── CASE STUDY ── */
.rgs-case-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--base);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.rgs-case-stat {
  padding: 20px 16px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.rgs-case-stat:last-child { border-right: none; }
.rgs-case-stat-num,
.pf-modal-stat-num,
.gads-result-sm-num{ font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; color: var(--ink); line-height: 1; }
.rgs-case-stat-lbl { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-faint); margin-top: 4px; }

/* Cream card content */
.rgs-cream-eyebrow { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-faint); margin-bottom: 16px; }
.rgs-cream-items   { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.rgs-cream-item    { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-small); color: var(--ink); }
.rgs-cream-check   { color: var(--accent); font-weight: 800; flex-shrink: 0; }
.rgs-cream-result  {
  font-family: var(--font-display);
  font-size: var(--fs-h5); font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
  padding-top: 16px;
  border-top: 1px solid var(--cream-border);
}


/* ── WHO IT'S FOR (dark section) ── */

.rgs-audience-card {
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: background 0.2s;
}
.rgs-audience-card:hover { background: rgba(255,255,255,0.09); }
.rgs-audience-icon,
.gads-campaign-icon,
.rd-sign-icon{ font-size: var(--fs-h3); display: block; margin-bottom: 12px; }
/* line-SVG icons inherit currentColor — on these dark cards that's ink-on-navy, so scope sky here only */
.rgs-audience-card .rgs-audience-icon svg { color: var(--pastel-sky); }
.rgs-audience-title { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 800; text-transform: uppercase; color: #fff; margin-bottom: 8px; }
.rgs-audience-desc  { font-size: var(--fs-caption); color: rgba(255,255,255,0.5); line-height: 1.65; }


/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .rgs-components-grid { grid-template-columns: repeat(2, 1fr); }
  .rgs-audience-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .rgs-components-grid { grid-template-columns: 1fr; }
  .rgs-audience-grid   { grid-template-columns: 1fr 1fr; }
  .rgs-case-stats   { grid-template-columns: 1fr 1fr; }
  .rgs-case-stat:nth-child(2) { border-right: none; }
  .rgs-case-stat:nth-child(3) { border-top: 1px solid var(--border); }
  .rgs-proof-bar    { width: 100%; }
}
@media (max-width: 480px) {
  .rgs-audience-grid { grid-template-columns: 1fr; }
  .rgs-trust-strip   { flex-direction: column; gap: 8px; }
}

/* ── SAGE GREEN THEME ── */







/* removed: sage proof-bar overrides */





/* removed: sage breadcrumb overrides */

/* Machine stack gets deep green dark bg instead of warm black */

/* removed: sage machine header override */








/* Stats bar tinted sage */
/* removed: sage stats-bar tint */

/* Dark section accent color — sage green highlight */


/* ── FORM CSS (qs2-* prefix) ── */
/* ============================================================
   HOMEPAGE FORM SECTION — CENTERED LAYOUT
   All classes prefixed qs2-* to avoid collisions
   ============================================================ */

/* ── SECTION ── */
.qs2-section {
  background: var(--dark);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.qs2-bg-dot-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none; opacity: 0.4;
}
.qs2-bg-orb-a {
  position: absolute; top: -120px; right: -120px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.qs2-bg-orb-b {
  position: absolute; bottom: -100px; left: -100px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(9,20,41,0.25) 0%, transparent 65%);
  pointer-events: none;
}
.qs2-bg-stripe {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -55deg, transparent, transparent 60px,
    rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px
  );
  pointer-events: none;
}

/* ── CENTERED HEADER ── */
.qs2-header { text-align: center; margin-bottom: 56px; position: relative; }

.qs2-headline {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  line-height: 0.9;
  letter-spacing: -2px;
}
.qs2-headline-outline {
  -webkit-text-stroke: 2px rgba(255,255,255,0.3);
  color: transparent;
}
.qs2-sub {
  font-size: var(--fs-body);
  color: rgba(255,255,255,0.5);
  font-weight: 300;
  line-height: 1.7;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Trust row */
.qs2-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 28px;
}
.qs2-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  padding: 0 20px;
}
.qs2-trust-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.qs2-trust-divider {
  width: 1px; height: 16px;
  background: rgba(255,255,255,0.15);
}
.qs2-trust-phone {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s;
}
.qs2-trust-phone:hover { color: #fff; }

/* ── WIDE CARD ── */
.qs2-card {
  background: var(--white);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.3);
  border: 0.5px solid rgba(255,255,255,0.1);
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

/* Card top bar — progress + dots */
.qs2-card-top {
  background: var(--navy);
  padding: 24px 48px 20px;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}

/* Step dots */
.qs2-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.qs2-dot-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.qs2-dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-small); font-weight: 800; color: rgba(255,255,255,0.35);
  transition: all 0.3s ease;
}
.qs2-dot--active {
  background: #fff; border-color: #fff; color: var(--navy);
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.qs2-dot--done {
  background: var(--blue); border-color: var(--blue);
  color: #fff; font-size: 0;
}
.qs2-dot--done::after { content: '✓'; font-size: var(--fs-caption); font-family: sans-serif; }
.qs2-dot-label { font-size: var(--fs-label); font-weight: 700; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.8px; }
.qs2-dot-connector { height: 2px; width: 60px; background: rgba(255,255,255,0.1); margin: 0 4px 22px; }

/* Progress bar */
.qs2-progress-bar {
  height: 3px; background: rgba(255,255,255,0.1);
  border-radius: 99px; overflow: hidden; margin-bottom: 6px;
}
.qs2-progress-fill {
  height: 100%; background: #fff;
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0%;
}
.qs2-progress-label { font-size: var(--fs-label); font-weight: 600; color: rgba(255,255,255,0.3); text-align: center; }

/* Form area */
.qs2-card form { padding: 48px; }

/* ── STEP PANELS ── */
.qs2-step { display: none; }
.qs2-step--active { display: block; animation: qs2FadeUp 0.35s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes qs2FadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qs2-shake { animation: qs2ShakeAnim 0.4s ease !important; }
@keyframes qs2ShakeAnim {
  0%,100%{ transform:translateX(0); }
  20%    { transform:translateX(-7px); }
  40%    { transform:translateX(7px); }
  60%    { transform:translateX(-4px); }
  80%    { transform:translateX(4px); }
}

/* Step header */
.qs2-step-header { margin-bottom: 32px; }
.qs2-step-headline {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 900; text-transform: uppercase;
  color: var(--navy); line-height: 1.0; letter-spacing: -0.3px;
  margin-bottom: 8px;
}
.qs2-step-sub { font-size: var(--fs-small); color: var(--text-light); line-height: 1.6; }

/* ── CHOICE CARDS ── */
.qs2-choices {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 28px;
}
.qs2-choices--2 { grid-template-columns: repeat(2, 1fr); }
.qs2-choices--3 { grid-template-columns: repeat(3, 1fr); }
.qs2-choices--4 { grid-template-columns: repeat(4, 1fr); }
.qs2-choices--5 { grid-template-columns: repeat(3, 1fr); }
.qs2-choices--6 { grid-template-columns: repeat(6, 1fr); }

.qs2-choice { cursor: pointer; position: relative; }
.qs2-choice-input { position: absolute; opacity: 0; width: 0; height: 0; }
.qs2-choice-card {
  background: var(--off-white); border: 2px solid var(--border);
  border-radius: 12px; padding: 18px 14px;
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
  position: relative; height: 100%;
  display: flex; flex-direction: column; gap: 3px;
}
.qs2-choice:hover .qs2-choice-card {
  border-color: var(--blue); background: var(--blue-pale);
  transform: translateY(-2px); box-shadow: 0 5px 16px rgba(15,30,60,0.08);
}
.qs2-choice--selected .qs2-choice-card { border-color: var(--navy); background: var(--navy); }
.qs2-choice-icon { font-size: var(--fs-h3); margin-bottom: 6px; display: block; line-height: 1; }
.qs2-choice-title {
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: 800;
  text-transform: uppercase; color: var(--navy); line-height: 1.1; transition: color 0.2s;
}
.qs2-choice--selected .qs2-choice-title { color: #fff; }
.qs2-choice-sub { font-size: var(--fs-label); color: var(--text-faint); line-height: 1.3; transition: color 0.2s; }
.qs2-choice--selected .qs2-choice-sub { color: rgba(255,255,255,0.45); }
.qs2-choice-check {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-size: var(--fs-label); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.4);
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
}
.qs2-choice--selected .qs2-choice-check { opacity: 1; transform: scale(1); background: #22ca9d; }

/* ── INPUTS ── */
.qs2-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 4px; }
.qs2-fields-row--3 { grid-template-columns: repeat(3, 1fr); }
.qs2-field-group { margin-bottom: 20px; }
.qs2-label { display: block; font-size: var(--fs-caption); font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.qs2-req { color: var(--blue); }
.qs2-input {
  width: 100%; padding: 14px 18px;
  border: 2px solid var(--border); border-radius: 10px;
  font-size: var(--fs-body); font-family: var(--font-body);
  color: var(--text-dark); background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none; -webkit-appearance: none;
}
.qs2-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(28,79,179,0.08); }
.qs2-input--error { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,0.08); }
.qs2-input--lg { font-size: var(--fs-body); padding: 16px 18px; }
.qs2-hint { font-size: var(--fs-label); color: var(--text-faint); margin-top: 5px; }
.qs2-textarea {
  width: 100%; padding: 14px 18px;
  border: 2px solid var(--border); border-radius: 10px;
  font-size: var(--fs-body); font-family: var(--font-body);
  color: var(--text-dark); background: var(--white);
  resize: vertical; min-height: 130px;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none; line-height: 1.6;
}
.qs2-textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(28,79,179,0.08); }

/* ── NAV ── */
.qs2-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.qs2-btn-back {
  background: transparent; border: 2px solid var(--border);
  color: var(--text-mid); font-family: var(--font-body);
  font-size: var(--fs-small); font-weight: 600;
  padding: 13px 24px; border-radius: 10px;
  cursor: pointer; transition: all 0.2s ease;
}
.qs2-btn-back:hover { border-color: var(--navy); color: var(--navy); }
.qs2-btn-next {
  background: var(--navy); color: #fff; border: none;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700;
  padding: 15px 36px; border-radius: 10px;
  cursor: pointer; transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
  display: flex; align-items: center; gap: 8px;
}
.qs2-btn-next:hover { background: var(--blue); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(15,30,60,0.2); }
.qs2-arrow { font-size: var(--fs-body); }
.qs2-btn-submit {
  background: var(--orange); color: #fff !important; border: none;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700;
  padding: 16px 36px; border-radius: 10px;
  cursor: pointer; transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 4px 16px rgba(249,115,22,0.3);
}
.qs2-btn-submit:hover:not(:disabled) { background: #ea6b0c; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(249,115,22,0.4); }
.qs2-btn-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.qs2-submit-loading { display: none; }
.qs2-btn-submit.qs2-loading .qs2-submit-text   { display: none; }
.qs2-btn-submit.qs2-loading .qs2-submit-loading { display: inline; }

.qs2-error { font-size: var(--fs-caption); color: #ef4444; margin-top: 12px; line-height: 1.5; }
.qs2-privacy { font-size: var(--fs-label); color: var(--text-faint); line-height: 1.6; margin-top: 16px; text-align: center; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .qs2-card { max-width: 720px; }
  .qs2-card-top { padding: 20px 32px 16px; }
  .qs2-card form { padding: 36px 32px; }
  .qs2-choices--5 { grid-template-columns: repeat(3, 1fr); }
  .qs2-choices--6 { grid-template-columns: repeat(3, 1fr); }
  .qs2-choices--4 { grid-template-columns: repeat(2, 1fr); }
  .qs2-dot-connector { width: 40px; }
}

@media (max-width: 680px) {
  .qs2-section { padding: 72px 0; }
  .qs2-card-top { padding: 18px 20px 14px; }
  .qs2-card form { padding: 28px 20px; }
  .qs2-choices--5, .qs2-choices--6,
  .qs2-choices--4, .qs2-choices--3 { grid-template-columns: repeat(2, 1fr); }
  .qs2-choices { grid-template-columns: 1fr 1fr; }
  .qs2-fields-row, .qs2-fields-row--3 { grid-template-columns: 1fr; }
  .qs2-btn-next, .qs2-btn-submit { width: 100%; justify-content: center; }
  .qs2-btn-back { width: 100%; text-align: center; justify-content: center; }
  .qs2-nav { flex-direction: column-reverse; gap: 10px; }
  .qs2-trust-row { gap: 8px; }
  .qs2-trust-divider { display: none; }
  .qs2-trust-item { padding: 4px 12px; }
  .qs2-dot-connector { width: 20px; }
  .qs2-dot { width: 30px; height: 30px; font-size: var(--fs-caption); }
  .qs2-card { border-radius: 16px; }
}

@media (max-width: 420px) {
  .qs2-choices--2 { grid-template-columns: 1fr; }
  .qs2-choices--6 { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   ABOUT PAGE — v4
   ============================================================ */
/* ============================================================
   ABOUT PAGE — v4, Warm Peach Theme
   Requires style-v4.css loaded first.
   ============================================================ */

/* ── HERO ── */
.ab-hero { background: #FDE8D0; padding-bottom: 0; }
.ab-hero-grid-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(180,100,30,0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}
.ab-breadcrumb      { color: rgba(80,40,10,0.45); }
.ab-breadcrumb a    { color: rgba(80,40,10,0.45); }
.ab-breadcrumb a:hover { color: #2c1206; }

.ab-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  position: relative;
}








.ab-pullquote {
  border-left: 3px solid #e8b080;
  padding: 14px 20px;
  background: rgba(255,255,255,0.5);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: 28px;
}
.ab-pullquote-text { font-size: var(--fs-body); font-style: italic; color: #2c1206; line-height: 1.6; margin-bottom: 6px; }
.ab-pullquote-attr { font-size: var(--fs-label); font-weight: 700; color: rgba(120,60,10,0.55); text-transform: uppercase; letter-spacing: 1px; }

/* Right: photo + name card */


.ab-photo-placeholder {
  background: rgba(255,255,255,0.55);
  border: 1px dashed rgba(180,100,30,0.25);
  border-radius: var(--radius-xl);
  padding: 48px 24px;
  text-align: center;
  min-height: 280px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
}
.ab-photo-icon  { font-size: var(--fs-h2); }
.ab-photo-label { font-size: var(--fs-small); font-weight: 700; color: rgba(120,60,10,0.55); }
.ab-photo-hint  { font-size: var(--fs-caption); color: rgba(120,60,10,0.35); }

.ab-name-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: 0 4px 20px rgba(120,60,10,0.1);
}
.ab-name-card-name { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 900; text-transform: uppercase; color: var(--ink); line-height: 1.1; margin-bottom: 4px; }
.ab-name-card-role { font-size: var(--fs-caption); color: var(--ink-faint); margin-bottom: 12px; }
.ab-name-card-tags,
.crm-platform-pills-row{ display: flex; flex-wrap: wrap; gap: 8px; }
.ab-name-tag { background: #EBF4FC; border: 1px solid #CFE1F1; color: #2C5E8A; font-size: var(--fs-label); font-weight: 600; padding: 4px 10px; border-radius: 20px; }

/* Hero stats strip */
.ab-hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(180,100,30,0.2);
  margin-top: 44px;
}
.ab-hero-stat {
  padding: 24px 20px; text-align: center;
  border-right: 1px solid rgba(180,100,30,0.15);
}
.ab-hero-stat:last-child { border-right: none; }
.ab-stat-num {
  font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900;
  color: #2c1206; line-height: 1; margin-bottom: 4px;
}
.ab-stat-num--accent { color: #c05c10; }
.ab-stat-label { font-size: var(--fs-caption); color: rgba(80,40,10,0.5); text-transform: uppercase; letter-spacing: 0.8px; }


/* ── TIMELINE ── */
.ab-timeline-label {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 24px;
}
.ab-timeline { display: flex; flex-direction: column; position: relative; }
.ab-timeline::before {
  content: ''; position: absolute;
  left: 10px; top: 0; bottom: 0; width: 1.5px;
  background: var(--border);
}
.ab-timeline-item {
  display: flex; gap: 20px; padding-bottom: 28px;
  position: relative;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.ab-timeline-item.ab-visible { opacity: 1; transform: translateY(0); }

.ab-timeline-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--border);
  flex-shrink: 0; margin-top: 2px; position: relative; z-index: 1;
}
.ab-timeline-dot--accent { border-color: var(--cta); background: #fff5f0; }

.ab-timeline-content { flex: 1; }
.ab-timeline-year {
  font-size: var(--fs-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--ink-faint); margin-bottom: 4px;
}
.ab-timeline-year--accent { color: var(--cta); }
.ab-timeline-title { font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.ab-timeline-desc,
.ab-team-bio,
.ai-explainer-desc,
.ai-process-desc,
.crm-problem-desc,
.crm-feature-desc,
.gbp-problem-desc,
.seo-problem-desc,
.wd-problem-desc,
.lp-include-desc{ font-size: var(--fs-caption); color: var(--ink-light); line-height: 1.65; }


/* ── VALUES ── */
.ab-dark-accent { color: var(--cta) !important; }


.ab-value-card {
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg); padding: 28px;
  transition: background 0.2s ease;
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s ease;
}
.ab-value-card.ab-visible { opacity: 1; transform: translateY(0); }
.ab-value-card:hover { background: rgba(255,255,255,0.08); }
.ab-value-num   { font-size: var(--fs-label); font-weight: 800; letter-spacing: 2px; color: #f4b880; margin-bottom: 12px; }
.ab-value-title,
.gbp-service-title{ font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 800; text-transform: uppercase; color: #fff; line-height: 1.1; margin-bottom: 10px; }
.ab-value-desc  { font-size: var(--fs-caption); color: rgba(255,255,255,0.5); line-height: 1.7; }


/* ── TEAM ── */
.ab-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.ab-team-card {
  background: var(--base);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.ab-team-card.ab-visible { opacity: 1; transform: translateY(0); }
.ab-photo-placeholder--sm {
  background: #EBF4FC;
  border: none;
  border-radius: 0;
  min-height: 180px;
  padding: 32px 20px;
}
.ab-team-info { padding: 20px; }
.ab-team-name { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 900; text-transform: uppercase; color: var(--ink); margin-bottom: 3px; }
.ab-team-role { font-size: var(--fs-caption); font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }



/* ── STATS BAND ── */
.ab-stats-band {
  background: #EBF4FC;
  padding: var(--section-pad);
  border-top: 1px solid #CFE1F1;
  border-bottom: 1px solid #CFE1F1;
}
.ab-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin: 0 auto 0;
  max-width: 900px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.ab-stats-cell {
  padding: 36px 24px; text-align: center;
  border-right: 1px solid var(--cream-border);
}
.ab-stats-cell:last-child { border-right: none; }
.ab-stats-num {
  font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900;
  color: var(--ink); line-height: 1; margin-bottom: 8px;
}
.ab-stats-desc,
.gads-mgmt-sub{ font-size: var(--fs-caption); color: var(--ink-faint); line-height: 1.5; }


/* ── BELIEVE ── */
.ab-believe-card {
  background: rgba(244,184,128,0.08);
  border: 1px solid rgba(244,184,128,0.15);
  border-radius: var(--radius-xl);
  padding: 36px;
}
.ab-believe-quote {
  font-family: var(--font-display); font-size: var(--fs-display); font-weight: 900;
  color: rgba(244,184,128,0.2); line-height: 0.7; margin-bottom: -12px;
}
.ab-believe-text {
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900;
  text-transform: uppercase; color: #fff; line-height: 1.1;
  margin-bottom: 12px;
}
.ab-believe-attr { font-size: var(--fs-caption); color: rgba(255,255,255,0.35); margin-bottom: 24px; }
.ab-believe-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 20px; border-top: 0.5px solid rgba(255,255,255,0.1); }
.ab-believe-stat  { text-align: center; }
.ab-believe-num   { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900; color: #f4b880; line-height: 1; }
.ab-believe-lbl   { font-size: var(--fs-label); color: rgba(255,255,255,0.35); margin-top: 4px; }


/* ── REVIEWS ── */
.ab-reviews-grid {
  display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: start;
}
.ab-reviews-left { position: sticky; top: 40px; }
.ab-rating-stars { color: #F59E0B; font-size: var(--fs-h3); letter-spacing: 2px; margin-bottom: 6px; }
.ab-rating-meta  { font-size: var(--fs-caption); color: var(--ink-faint); }

.ab-reviews-list,
.gads-mgmt-steps,
.ct-map-col{ display: flex; flex-direction: column; gap: 16px; }
.ab-review {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  border-left: 3px solid #FDE8D0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.ab-review.ab-visible { opacity: 1; transform: translateY(0); }
.ab-review-stars,
.ai-review-stars,
.crm-review-stars,
.gads-review-stars{ color: #F59E0B; font-size: var(--fs-caption); margin-bottom: 10px; }
.ab-review-text,
.crm-review-text,
.gads-review-text{ font-size: var(--fs-small); color: var(--ink-mid); line-height: 1.7; margin-bottom: 14px; font-style: italic; }

.ab-review-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #FDE8D0; color: #c05c10;
  font-size: var(--fs-caption); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ab-review-name,
.crm-review-name,
.gads-mini-title,
.gads-review-name,
.seo-map-row-name,
.wd-caption-name,
.svcs-review-name{ font-size: var(--fs-caption); font-weight: 700; color: var(--ink); }
.ab-review-role { font-size: var(--fs-label); color: var(--ink-faint); }


/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .ab-values-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-reviews-grid { grid-template-columns: 1fr; gap: 36px; }
  .ab-reviews-left { position: static; }
}
@media (max-width: 768px) {
  .ab-hero         { padding: 60px 0 0; }
  .ab-hero-grid    { grid-template-columns: 1fr; gap: 36px; }
  .ab-values-grid  { grid-template-columns: 1fr; }
  .ab-team-grid    { grid-template-columns: 1fr; }
  .ab-stats-grid   { grid-template-columns: 1fr 1fr; }
  .ab-stats-cell:nth-child(2) { border-right: none; }
  .ab-stats-cell:nth-child(3) { border-top: 1px solid var(--cream-border); }
}
@media (max-width: 480px) {
  .ab-stats-grid  { grid-template-columns: 1fr; }
  .ab-believe-stats { grid-template-columns: 1fr; }
}


/* ============================================================
   SPECRXDIRECT CASE STUDY — v4 CSS
   Sage green theme + image placeholder system
   ============================================================ */

/* ── COLOR TOKENS ── */


/* ── HERO ── */







.cs-srx-breadcrumb .breadcrumb-sep { color: rgba(44,90,62,0.25); }
.cs-srx-breadcrumb .breadcrumb-current { color: var(--srx-dark); }











/* Hero stat strip */






/* ── IMAGE PLACEHOLDER SYSTEM ── */
/* Base style shared by all placeholders */







/* Hero screen — browser chrome frame */







/* Specific sizes */









/* When real image replaces placeholder — swap out the div for an img */


/* ── FULL-WIDTH STRIP ── */


/* ── STATS BAR ── */







/* ── BRAND ROW ── */




/* Color swatches */






/* ── CHALLENGE CARDS ── */






/* ── WEBSITE SCREENS ── */




/* Device mockup row */



/* ── GOOGLE ADS CHECKLIST ── */




/* ── SOCIAL/EMAIL/VIDEO ROW ── */







/* ── RESULTS ── */





























/* ── KEY DECISIONS ── */







/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .cs-srx-brand-row       { grid-template-columns: 1fr 1fr; }
  .cs-srx-decisions-grid  { grid-template-columns: repeat(2, 1fr); }
  .cs-srx-results-grid    { grid-template-columns: 1fr 1fr; }
  .cs-srx-result-featured { grid-row: auto; }
}
@media (max-width: 768px) {
  .cs-srx-hero-grid     { grid-template-columns: 1fr; gap: 40px; }
  .cs-srx-h1            { font-size: var(--fs-display); }
  .cs-srx-brand-row     { grid-template-columns: 1fr; }
  .cs-srx-screens-3     { grid-template-columns: 1fr; }
  .cs-srx-devices       { grid-template-columns: 1fr; gap: 36px; }
  .cs-srx-mockups       { flex-direction: column; }
  .cs-srx-content-row   { grid-template-columns: 1fr; }
  .cs-srx-results-grid  { grid-template-columns: 1fr; }
  .cs-srx-decisions-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .cs-srx-swatches       { grid-template-columns: 1fr 1fr; }
  .cs-srx-decisions-grid { grid-template-columns: 1fr; }
  .cs-srx-hero-stats     { flex-wrap: wrap; }
}


/* ============================================================
   GET STARTED PAGE — v4, Lavender Theme
   Requires style-v4.css loaded first.
   ============================================================ */

/* ── HERO ── */
.gs-hero { background: #EDE8F8; padding-bottom: 70px; }
.gs-hero-grid-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(100,60,180,0.07) 1px, transparent 1px);
  background-size: 36px 36px; pointer-events: none;
}
.gs-hero-inner { text-align: center; max-width: 720px; margin: 0 auto; position: relative; }

.gs-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: rgba(80,40,160,0.5);
  margin-bottom: 22px;
}
.gs-hero-eyebrow-line { width: 24px; height: 1.5px; background: rgba(80,40,160,0.3); flex-shrink: 0; }

.gs-hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900; text-transform: uppercase;
  color: var(--ink); line-height: 0.9; letter-spacing: -2px;
  margin-bottom: 22px;
}

.gs-hero-lead {
  font-size: var(--fs-lead); line-height: 1.75;
  color: #5b6c81; font-weight: 400;
  max-width: 520px; margin: 0 auto 28px;
}

.gs-hero-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; flex-wrap: wrap;
}
.gs-hero-trust-item {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-caption); font-weight: 600; color: var(--ink-mid);
}


/* ── CARDS ── */
.gs-section { padding-top: 0 !important; }
.gs-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(10,30,60,0.1);
  border: 1px solid var(--border);
}
.gs-cal-card { display: none; }


/* ── PANEL 1: FORM GRID ── */
.gs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}
.gs-fields-col {
  grid-column: 1; grid-row: 1 / 3;
  padding: 44px 40px 40px;
  border-right: 1px solid var(--border);
}
.gs-trust-col {
  grid-column: 2; grid-row: 1 / 3;
  padding: 44px 40px 40px;
  background: var(--base);
}
.gs-meta-bar {
  grid-column: 1 / 3; grid-row: 3;
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
  padding: 16px 40px;
  background: var(--base); border-top: 1px solid var(--border);
}
.gs-meta-item { font-size: var(--fs-caption); color: var(--ink-faint); font-weight: 500; }

/* Fields header */
.gs-fields-header { margin-bottom: 28px; }
.gs-fields-step   { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #6B3FBF; margin-bottom: 8px; }

.gs-fields-sub { font-size: var(--fs-caption); color: var(--ink-faint); }

/* Fields */
.gs-field { margin-bottom: 16px; }
.gs-label,
.ct-label{ display: block; font-size: var(--fs-caption); font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.gs-req   { color: #6B3FBF; }
.gs-input {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  font-size: var(--fs-body); font-family: var(--font-body);
  color: var(--ink); background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none; -webkit-appearance: none;
}
.gs-input:focus { border-color: #6B3FBF; box-shadow: 0 0 0 4px rgba(107,63,191,0.08); }
.gs-input--error { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,0.08); }
.gs-error-msg { font-size: var(--fs-caption); color: #ef4444; display: none; margin-top: 4px; }
.gs-error--show { display: block; }
.gs-btn-full { width: 100%; justify-content: center; }
.gs-phone-note,
.seo-pricing-note,
.wd-pricing-note{ font-size: var(--fs-caption); color: var(--ink-faint); text-align: center; }
.gs-phone-note a { color: var(--accent); font-weight: 700; }

/* Trust column */
.gs-trust-header { margin-bottom: 20px; }
.gs-trust-rating { display: flex; align-items: baseline; gap: 10px; }
.gs-trust-stars  { color: #F59E0B; font-size: var(--fs-h5); letter-spacing: 2px; }
.gs-trust-score  { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 900; color: var(--ink); }
.gs-trust-rating-sub { font-size: var(--fs-label); color: var(--ink-faint); margin-top: 4px; }

.gs-trust-headline {
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900;
  text-transform: uppercase; color: var(--ink); line-height: 1.0;
  margin-bottom: 24px;
}

/* Expect list */
.gs-expect-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.gs-expect-item,
.gads-mgmt-step{ display: flex; align-items: flex-start; gap: 14px; }
.gs-expect-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: #EDE8F8; color: #6B3FBF;
  font-size: var(--fs-caption); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.gs-expect-title { font-size: var(--fs-small); font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.gs-expect-desc  { font-size: var(--fs-caption); color: var(--ink-light); line-height: 1.6; }

/* Mini review */
.gs-mini-review,
.ct-review{
  background: var(--cream); border: 1px solid var(--cream-border);
  border-radius: var(--radius-lg); padding: 18px 20px;
}
.gs-mini-review-stars  { color: #F59E0B; font-size: var(--fs-caption); margin-bottom: 8px; }
.gs-mini-review-text   { font-size: var(--fs-caption); color: var(--ink); line-height: 1.6; font-style: italic; margin-bottom: 8px; }
.gs-mini-review-author,
.ct-review-attr{ font-size: var(--fs-label); color: var(--ink-faint); font-weight: 600; }


/* ── PANEL 2: CALENDLY ── */
.gs-cal-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  background: var(--ink); border-bottom: 1px solid rgba(255,255,255,0.08);
  gap: 16px;
}
.gs-cal-who-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 3px; }
.gs-cal-who-name  { font-size: var(--fs-body); font-weight: 700; color: #fff; }
.gs-cal-who-email { font-size: var(--fs-caption); color: rgba(255,255,255,0.45); }
.gs-cal-back-btn {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.75); font-family: var(--font-body);
  font-size: var(--fs-caption); font-weight: 600;
  padding: 8px 16px; border-radius: var(--radius-md);
  cursor: pointer; transition: background 0.2s;
  white-space: nowrap; flex-shrink: 0;
}
.gs-cal-back-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }

.gs-calendly-wrap {
  height: 700px;
  min-height: 700px;
}


/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .gs-grid { grid-template-columns: 1fr; }
  .gs-fields-col { grid-column: 1; grid-row: 1; border-right: none; border-bottom: 1px solid var(--border); padding: 36px 32px; }
  .gs-trust-col  { grid-column: 1; grid-row: 2; padding: 32px 32px; }
  .gs-meta-bar   { grid-column: 1; grid-row: 3; padding: 14px 32px; }
}
@media (max-width: 680px) {
  .gs-fields-col { padding: 28px 20px; }
  .gs-trust-col  { padding: 24px 20px; }
  .gs-meta-bar   { padding: 12px 20px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .gs-calendly-wrap { height: 620px; min-height: 620px; }
  .gs-cal-bar    { padding: 14px 20px; }
}


/* ============================================================
   PORTFOLIO PAGE — v4, Powder Blue Theme
   Requires style-v4.css loaded first.
   ============================================================ */

/* ── HERO ── */


.pf-breadcrumb a { color: rgba(10,50,100,0.45); }
.pf-breadcrumb a:hover { color: var(--ink); }
.pf-breadcrumb .breadcrumb-sep { color: rgba(74,142,194,0.3); }
.pf-breadcrumb .breadcrumb-current { color: var(--ink-mid); }









/* Staggered image grid */
.pf-hero-preview,
.ai-explainer-cards,
.css-results-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.pf-preview-item {
  border-radius: var(--radius-xl); overflow: hidden;
  height: 180px; box-shadow: 0 8px 24px rgba(10,30,60,0.12);
}
.pf-preview-item--offset { margin-top: 20px; }
.pf-preview-item img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Stats strip */
.pf-hero-stats {
  display: flex; gap: 0;
  border-top: 1px solid rgba(74,142,194,0.2);
  margin-top: 36px;
}
.pf-hero-stat { flex: 1; padding: 22px 20px; border-right: 1px solid rgba(74,142,194,0.15); }
.pf-hero-stat:last-child { border-right: none; }
.pf-hero-stat-num { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: var(--ink); line-height: 1; }
.pf-hero-stat-num--accent { color: var(--accent); }
.pf-hero-stat-lbl { font-size: var(--fs-label); color: rgba(10,50,100,0.45); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 4px; }


/* ── FILTER TABS — sticky ── */
.pf-filters {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(10,30,60,0.06);
}
.pf-filters-inner {
  display: flex; gap: 4px;
  overflow-x: auto; padding: 12px 0;
  scrollbar-width: none;
}
.pf-filters-inner::-webkit-scrollbar { display: none; }

.pf-filter-btn {
  background: transparent; border: 1.5px solid var(--border);
  color: var(--ink-light); font-family: var(--font-body);
  font-size: var(--fs-caption); font-weight: 600;
  padding: 8px 18px; border-radius: 20px;
  cursor: pointer; white-space: nowrap;
  transition: var(--transition);
}
.pf-filter-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-pale); }



/* ── GRID SECTION ── */
.pf-grid-section { background: var(--white); padding: 60px 0 80px; }
.pf-hidden { display: none; }
.pf-grid-mb { margin-bottom: 12px; }

/* Industry label */
.pf-industry { margin-bottom: 56px; }
.pf-industry:last-child { margin-bottom: 0; }
.pf-industry-label {
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800;
  text-transform: uppercase; color: var(--ink); letter-spacing: 0.5px;
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 2px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}


/* ── PORTFOLIO CARDS ── */
.pf-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.pf-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.pf-card--featured { border-color: var(--ink); }

/* Image wrap */
.pf-card-img-wrap {
  position: relative; overflow: hidden;
  background: var(--base);
  height: 220px;
}
.pf-card-img-wrap--lg { height: 300px; }
.pf-card-img-wrap--sm { height: 180px; }
.pf-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.4s ease; display: block; }
.pf-card:hover .pf-card-img-wrap img { transform: scale(1.04); }

/* Hover overlay */
.pf-card-overlay {
  position: absolute; inset: 0;
  background: rgba(10,30,60,0.75);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; opacity: 0;
  transition: opacity 0.25s ease;
}
.pf-card-overlay--deep { background: rgba(9,20,41,0.88); }
.pf-card:hover .pf-card-overlay { opacity: 1; }
.pf-card-result,
.cs-spotlight-stat{ font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900; color: #fff; line-height: 1; }
.pf-card-result-lbl { font-size: var(--fs-label); color: rgba(255,255,255,0.65); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.pf-card-view-btn {
  margin-top: 10px; background: var(--cta); color: #fff;
  font-size: var(--fs-caption); font-weight: 700;
  padding: 9px 20px; border-radius: var(--radius-sm);
  border: none; cursor: pointer; font-family: var(--font-body);
  transition: background 0.2s;
}
.pf-card-view-btn:hover { background: var(--cta-dark); }

/* Preview cards (logo + stat, no screenshot) */
.pf-card-preview {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: 28px; position: relative;
}
.pf-card-preview--navy { background: linear-gradient(135deg, var(--ink) 0%, #1C3A70 100%); }
.pf-card-preview--blue { background: linear-gradient(135deg, #1C4FB3 0%, var(--ink) 100%); }
.pf-card-preview--sage { background: linear-gradient(135deg, #2C5A3E 0%, #0D2B1A 100%); }
.pf-preview-logo { height: 36px; width: auto; filter: brightness(10); object-fit: contain; }
.pf-preview-stat { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: #fff; line-height: 1; }
.pf-preview-stat-lbl { font-size: var(--fs-caption); color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; }
.pf-preview-sub { font-size: var(--fs-caption); color: rgba(255,255,255,0.45); text-align: center; line-height: 1.4; }
.pf-featured-badge {
  position: absolute; top: 12px; right: 12px;
  background: var(--cta); color: #fff;
  font-size: var(--fs-label); font-weight: 700;
  padding: 4px 10px; border-radius: 20px;
}

/* Card info */
.pf-card-info { padding: 18px 20px; }
.pf-card-tag,
.cs-spotlight-tag{ font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 5px; }
.pf-card-name { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: 1.1; margin-bottom: 4px; }
.pf-card-services { font-size: var(--fs-caption); color: var(--ink-faint); }

/* Placeholder card */
.pf-card--placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; min-height: 260px;
  border-style: dashed; border-color: var(--border);
  cursor: default; background: var(--base);
}
.pf-card--placeholder:hover { box-shadow: none; transform: none; }
.pf-placeholder-icon  { font-size: var(--fs-h2); opacity: 0.3; }
.pf-placeholder-text  { font-size: var(--fs-caption); font-weight: 700; color: var(--ink-faint); text-align: center; padding: 0 20px; }


/* ── MODAL ── */
.pf-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10,30,60,0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
  backdrop-filter: blur(4px);
}
.pf-modal-open { opacity: 1; pointer-events: all; }

.pf-modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden; overflow-y: auto;
  max-width: 680px; width: 100%;
  max-height: 90vh;
  box-shadow: 0 40px 80px rgba(10,30,60,0.3);
  position: relative;
}
.pf-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 10;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(10,30,60,0.08); border: none;
  font-size: var(--fs-small); color: var(--ink-mid);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.pf-modal-close:hover { background: var(--ink); color: #fff; }

.pf-modal-img { width: 100%; height: 240px; object-fit: cover; object-position: top; display: block; }
.pf-modal-no-img {
  height: 140px; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.pf-modal-no-img span { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; text-transform: uppercase; color: rgba(255,255,255,0.3); }

.pf-modal-body { padding: 28px 32px 32px; }
.pf-modal-industry { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); margin-bottom: 8px; }
.pf-modal-name { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900; text-transform: uppercase; color: var(--ink); line-height: 1.0; margin-bottom: 6px; }
.pf-modal-location { font-size: var(--fs-caption); color: var(--ink-faint); margin-bottom: 16px; }
.pf-modal-services { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.pf-modal-tag {
  background: var(--base); border: 1px solid var(--border);
  color: var(--ink-mid); font-size: var(--fs-label); font-weight: 700;
  padding: 4px 12px; border-radius: 20px;
}
.pf-modal-desc { font-size: var(--fs-small); color: var(--ink-mid); line-height: 1.72; margin-bottom: 22px; }
.pf-modal-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  background: var(--base); border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid var(--border);
  margin-bottom: 22px;
}
.pf-modal-stat { padding: 16px 12px; text-align: center; border-right: 1px solid var(--border); }
.pf-modal-stat:last-child { border-right: none; }

.pf-modal-stat-lbl { font-size: var(--fs-label); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 4px; }
.pf-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }


/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .pf-hero-grid { gap: 40px; }
}
@media (max-width: 768px) {
  .pf-hero { padding: 60px 0 0; }
  .pf-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .pf-hero-stats { flex-wrap: wrap; }
  .pf-hero-stat { min-width: 50%; border-bottom: 1px solid rgba(74,142,194,0.15); }
  .pf-filters-inner { padding: 10px 0; }
  .pf-modal-stats { grid-template-columns: 1fr; }
  .pf-modal-stat { border-right: none; border-bottom: 1px solid var(--border); }
  .pf-modal-stat:last-child { border-bottom: none; }
}
@media (max-width: 480px) {
  .pf-hero-preview { grid-template-columns: 1fr 1fr; }
  .pf-preview-item { height: 120px; }
  .pf-modal-body { padding: 20px; }
  .pf-modal-actions { flex-direction: column; }
  .pf-modal-actions .btn--orange,
  .pf-modal-actions .btn--ghost-dark { width: 100%; justify-content: center; }
}


/* ============================================================
   AI AUTOMATION PAGE — v4, Lavender Theme
   Requires style-v4.css loaded first.
   ============================================================ */

/* ── TOKENS ── */
.ai-page {
  --ai:       #6B3FBF;
  --ai-light: #8B5FDF;
  --ai-pale:  #EDE8F8;
  --ai-bg:    #EAE4F8;
}

/* ── HERO ── */


.ai-breadcrumb a     { color: rgba(60,30,120,0.45); }
.ai-breadcrumb a:hover { color: var(--ink); }
.ai-breadcrumb .breadcrumb-sep { color: rgba(107,63,191,0.25); }
.ai-breadcrumb .breadcrumb-current { color: var(--ink-mid); }




/* Proof badges */
.ai-proof-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ai-proof-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.7); border: 1px solid rgba(107,63,191,0.2);
  border-radius: 20px; padding: 5px 12px 5px 5px;
  font-size: var(--fs-caption); font-weight: 600; color: var(--ink-mid);
}
.ai-proof-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-label); font-weight: 800; color: #fff; flex-shrink: 0;
}
.ai-proof-dot--green  { background: #22C55E; }
.ai-proof-dot--purple { background: var(--ai); }
.ai-proof-dot--blue   { background: var(--accent); }

/* Eyebrow override */
.ai-eyebrow { color: var(--ai) !important; }
.ai-eyebrow::before { background: var(--ai) !important; }




/* Hero quote */
.ai-hero-quote {
  background: var(--cream); border: 1px solid var(--cream-border);
  border-left: 3px solid var(--ai);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 16px 20px; margin-bottom: 8px;
}
.ai-hero-quote-tag  { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ai); margin-bottom: 6px; }
.ai-hero-quote-text { font-size: var(--fs-small); font-style: italic; color: var(--ink); line-height: 1.6; margin-bottom: 6px; }
.ai-hero-quote-note { font-size: var(--fs-label); color: var(--ink-faint); }

/* Stat pills */
.ai-stat-pills,
.crm-notif-row,
.gads-mini-row,
.gbp-hero-mini,
.seo-mini-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai-stat-pill {
  border-radius: var(--radius-lg); padding: 18px 16px;
}
.ai-stat-pill--purple { background: rgba(107,63,191,0.12); border: 1px solid rgba(107,63,191,0.2); }
.ai-stat-pill--blue   { background: var(--pastel-sky); border: 1px solid #B0CCE4; }
.ai-stat-pill--green  { background: var(--pastel-sage); border: 1px solid #B8D8C8; }
.ai-stat-pill--cream  { background: var(--cream); border: 1px solid var(--cream-border); }
.ai-stat-pill-num { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900; color: var(--ink); line-height: 1; margin-bottom: 4px; }
.ai-stat-pill-lbl { font-size: var(--fs-label); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.8px; line-height: 1.3; }

/* Workflow diagram */
.ai-workflow {
  background: var(--ink); border-radius: var(--radius-xl);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 6px;
}

.ai-workflow-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-md);
  font-size: var(--fs-caption); font-weight: 500;
}
.ai-workflow-row--trigger { background: rgba(107,63,191,0.25); color: #fff; }
.ai-workflow-row--action  { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); }
.ai-workflow-row--result  { background: rgba(34,197,94,0.2); color: #fff; }
.ai-workflow-icon  { font-size: var(--fs-body); flex-shrink: 0; }
.ai-workflow-arrow { font-size: var(--fs-body); color: rgba(255,255,255,0.25); text-align: center; }
.ai-workflow-result-text { font-weight: 700; }

/* ── COLOR ACCENTS ── */
.ai-stat-purple { color: var(--ai) !important; }
.ai-accent      { color: var(--ai); }
.ai-dark-accent { color: #B08FE8 !important; }

/* ── EXPLAINER CARDS ── */

.ai-explainer-card { background: var(--base); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; border-top: 3px solid transparent; transition: box-shadow 0.2s, border-top-color 0.2s; }
.ai-explainer-card:hover { box-shadow: var(--shadow-md); }
.ai-explainer-card--purple { border-top-color: var(--ai); }
.ai-explainer-card--blue   { border-top-color: var(--accent); }
.ai-explainer-card--green  { border-top-color: #22C55E; }
.ai-explainer-card--cream  { border-top-color: #C0A870; }
.ai-explainer-icon,
.lp-include-icon,
.lp-industry-icon{ font-size: var(--fs-h3); margin-bottom: 10px; display: block; }
.ai-explainer-title { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 800; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }


/* ── GEO SECTION ── */
.ai-geo-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(176,143,232,0.15); border: 1px solid rgba(176,143,232,0.3);
  color: #B08FE8; font-size: var(--fs-label); font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; padding: 6px 14px; border-radius: 20px;
}

.ai-geo-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-small); color: rgba(255,255,255,0.7); }
.ai-check { color: #B08FE8; font-weight: 800; flex-shrink: 0; }
.ai-geo-proof {
  background: rgba(176,143,232,0.1); border: 1px solid rgba(176,143,232,0.2);
  border-radius: var(--radius-lg); padding: 18px 20px;
}
.ai-geo-proof-tag  { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #B08FE8; margin-bottom: 8px; }
.ai-geo-proof-text { font-size: var(--fs-small); font-style: italic; color: rgba(255,255,255,0.8); line-height: 1.6; margin-bottom: 6px; }
.ai-geo-proof-attr { font-size: var(--fs-label); color: rgba(255,255,255,0.35); }

/* ChatGPT mockup */
.ai-chatgpt-card {
  background: #1A1C22; border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.08); overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.ai-chatgpt-header { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 0.5px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
.ai-chatgpt-logo { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#22C55E,#16A34A); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-caption); color: #fff; flex-shrink: 0; }
.ai-chatgpt-name { font-size: var(--fs-small); font-weight: 700; color: #fff; }
.ai-chatgpt-sub  { font-size: var(--fs-label); color: rgba(255,255,255,0.35); }
.ai-chatgpt-user { padding: 16px 20px; border-bottom: 0.5px solid rgba(255,255,255,0.06); }
.ai-chatgpt-user-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.3); margin-bottom: 6px; }
.ai-chatgpt-user-text  { font-size: var(--fs-small); color: rgba(255,255,255,0.7); font-style: italic; }
.ai-chatgpt-response   { padding: 18px 20px; font-size: var(--fs-small); color: rgba(255,255,255,0.65); line-height: 1.7; border-bottom: 0.5px solid rgba(255,255,255,0.06); }
.ai-chatgpt-platforms  { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 20px; }
.ai-platform-badge { background: rgba(255,255,255,0.08); border: 0.5px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.55); font-size: var(--fs-label); font-weight: 700; padding: 4px 12px; border-radius: 20px; }

/* ── WHAT WE BUILD ── */
.ai-use-list { display: flex; flex-direction: column; }
.ai-use-row {
  display: grid; grid-template-columns: 160px 1fr; gap: 40px;
  padding: 32px 0; border-bottom: 1px solid var(--border);
  align-items: start;
}
.ai-use-row--last { border-bottom: none; }
.ai-use-num-block { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 4px; }
.ai-use-num,
.svcs-card-num{ font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: var(--border); line-height: 1; }
.ai-use-tag { display: inline-block; font-size: var(--fs-label); font-weight: 700; padding: 4px 12px; border-radius: 20px; letter-spacing: 0.5px; }
.ai-use-tag--purple { background: rgba(107,63,191,0.1); color: var(--ai); border: 1px solid rgba(107,63,191,0.2); }
.ai-use-tag--blue   { background: var(--accent-pale); color: var(--accent); border: 1px solid var(--accent-border); }
.ai-use-tag--green  { background: rgba(34,197,94,0.1); color: #166534; border: 1px solid rgba(34,197,94,0.2); }
.ai-use-tag--cream  { background: var(--cream); color: var(--ink-mid); border: 1px solid var(--cream-border); }
.ai-use-content { }
.ai-use-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: 1.0; margin-bottom: 12px; }
.ai-use-desc,
.gads-problem-desc{ font-size: var(--fs-small); color: var(--ink-mid); line-height: 1.75; }

/* ── STATS BAND ── */
.ai-band-grid,
.crm-band-grid,
.gads-band-grid{ display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: center; }
.ai-band-stats { display: grid; grid-template-columns: repeat(4,1fr); }
.ai-band-cell,
.crm-band-cell,
.gads-band-cell,
.seo-band-cell{ padding: 28px 20px; text-align: center; border-right: 0.5px solid rgba(255,255,255,0.08); }
.ai-band-cell:last-child { border-right: none; }
.ai-band-num { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: #fff; line-height: 1; margin-bottom: 8px; letter-spacing: -1px; }
.ai-band-lbl,
.crm-band-lbl,
.gads-band-lbl{ font-size: var(--fs-caption); color: rgba(255,255,255,0.45); line-height: 1.4; }

/* ── PROCESS ── */
.ai-process-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.ai-process-step {
  background: var(--base); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.ai-process-step--featured { background: var(--ink); border-color: var(--ink); }
.ai-process-step--featured .ai-process-title { color: #fff; }
.ai-process-step--featured .ai-process-desc  { color: rgba(255,255,255,0.6); }
.ai-process-num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ai-pale); color: var(--ai);
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ai-process-num--dark { background: rgba(176,143,232,0.2); color: #B08FE8; }
.ai-process-title { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: 1.1; }


/* ── CUSTOMER QUOTES ── */
.ai-customer-quotes {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ai-quote-card-header { padding: 16px 24px; background: var(--base); border-bottom: 1px solid var(--border); }
.ai-quote-card-lbl { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-faint); }
.ai-customer-quote { display: flex; align-items: flex-start; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--border); }
.ai-customer-quote-icon { font-size: var(--fs-h4); flex-shrink: 0; margin-top: 2px; }
.ai-customer-quote p { font-size: var(--fs-small); color: var(--ink-mid); line-height: 1.65; font-style: italic; }
.ai-quote-footer { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: var(--ai-pale); }
.ai-quote-footer span { font-size: var(--fs-caption); color: var(--ink-faint); font-weight: 600; }
.ai-quote-revenue { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 900; color: var(--ai); }

/* ── TOOLS GRID ── */
.ai-tools-grid,
.wd-industries,
.lp-industries{ display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.ai-tool-card {
  background: var(--base); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.ai-tool-card:hover { box-shadow: var(--shadow-md); border-color: rgba(107,63,191,0.25); }
.ai-tool-card--featured { background: var(--ai-pale); border-color: rgba(107,63,191,0.25); }
.ai-tool-icon,
.wd-industry-icon{ font-size: var(--fs-h3); margin-bottom: 10px; display: block; }
.ai-tool-name { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 800; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.ai-tool-desc { font-size: var(--fs-caption); color: var(--ink-light); line-height: 1.5; }

/* ── TESTIMONIALS ── */

.ai-rating-stars,
.crm-rating-stars,
.gads-rating-stars{ color: #F59E0B; font-size: var(--fs-h4); letter-spacing: 2px; }

.ai-rating-note  { font-size: var(--fs-caption); color: rgba(255,255,255,0.35); margin-top: 4px; }





.ai-review-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ai); color: #fff; font-size: var(--fs-caption); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.ai-review-role   { font-size: var(--fs-label); color: rgba(255,255,255,0.35); }

/* ── CONTACT CARD (FAQ sticky) ── */
.ai-contact-card,
.crm-contact-card,
.gads-contact-card{
  background: var(--ink); border-radius: var(--radius-xl);
  padding: 32px; position: sticky; top: 80px;
  display: flex; flex-direction: column; gap: 16px;
}
.ai-contact-card-eyebrow { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #B08FE8; }
.ai-contact-card-h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; text-transform: uppercase; color: #fff; line-height: 1.0; }
.ai-contact-card-desc,
.crm-platform-card-desc,
.crm-contact-desc,
.gads-contact-desc,
.rd-sign-desc{ font-size: var(--fs-caption); color: rgba(255,255,255,0.55); line-height: 1.65; }
.ai-contact-card-footer { border-top: 0.5px solid rgba(255,255,255,0.1); padding-top: 16px; }
.ai-contact-card-footer-lbl,
.crm-contact-footer-lbl,
.gads-contact-footer-lbl{ font-size: var(--fs-label); color: rgba(255,255,255,0.3); display: block; margin-bottom: 4px; }
.ai-contact-card-phone,
.crm-contact-phone,
.gads-contact-phone{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 900; color: #fff; text-decoration: none; }
.ai-contact-card-phone:hover { color: #B08FE8; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .ai-tools-grid  { grid-template-columns: repeat(2, 1fr); }
  .ai-process-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-band-grid   { grid-template-columns: 1fr; gap: 36px; }
  .ai-band-stats  { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 768px) {
  .ai-hero-grid    { grid-template-columns: 1fr; gap: 40px; }
  .ai-explainer-cards { grid-template-columns: 1fr; }
  .ai-use-row      { grid-template-columns: 1fr; gap: 16px; }
  .ai-use-num-block { flex-direction: row; align-items: center; }
  .ai-use-num      { font-size: var(--fs-h2); }
  .ai-process-grid { grid-template-columns: 1fr 1fr; }
  .ai-tools-grid   { grid-template-columns: 1fr 1fr; }
  .ai-band-stats   { grid-template-columns: 1fr 1fr; }
  .ai-band-cell:nth-child(2) { border-right: none; }
  .ai-band-cell:nth-child(3) { border-top: 0.5px solid rgba(255,255,255,0.08); }
}
@media (max-width: 480px) {
  .ai-stat-pills   { grid-template-columns: 1fr 1fr; }
  .ai-process-grid { grid-template-columns: 1fr; }
  .ai-tools-grid   { grid-template-columns: 1fr 1fr; }
  .ai-contact-card { position: static; }
}


/* ============================================================
   CRM INTEGRATION PAGE — v4, Mint Teal Theme
   Requires style-v4.css loaded first.
   ============================================================ */

/* ── TOKENS ── */
.crm-page {
  --crm:      var(--cta);
  --crm-mid:  #F07038;
  --crm-pale: #FCE8DC;
  --crm-bg:   #FBE7D8;
}

/* ── HERO ── */


.crm-breadcrumb a     { color: rgba(90,45,10,0.45); }
.crm-breadcrumb a:hover { color: var(--ink); }
.crm-breadcrumb .breadcrumb-sep { color: rgba(232,68,10,0.25); }
.crm-breadcrumb .breadcrumb-current { color: var(--ink-mid); }




/* Eyebrow */
.crm-eyebrow { color: var(--crm) !important; }
.crm-eyebrow::before { background: var(--crm) !important; }


/* Hero stat strip */
.crm-hero-stats { display: flex; align-items: center; background: rgba(255,255,255,0.6); border: 1px solid rgba(232,68,10,0.2); border-radius: var(--radius-lg); padding: 0; overflow: hidden; width: fit-content; margin-bottom: 8px; }
.crm-hero-stat { padding: 16px 24px; text-align: center; }
.crm-hero-stat-div { width: 1px; height: 44px; background: rgba(232,68,10,0.15); flex-shrink: 0; }
.crm-hero-stat-num { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; color: var(--crm); line-height: 1; }
.crm-hero-stat-num--dark { color: var(--ink); }
.crm-hero-stat-lbl { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(90,45,10,0.5); margin-top: 3px; }

/* Pipeline diagram */
.crm-pipeline,
.gads-chart-card{ background: var(--ink); border-radius: var(--radius-xl); padding: 22px 24px; }
.crm-pipeline-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.35); margin-bottom: 16px; }
.crm-pipeline-steps,
.crm-features,
.gads-case-rows,
.lp-local-reasons,
.ct-form-col{ display: flex; flex-direction: column; gap: 0; }
.crm-pipeline-step { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.crm-pipeline-connector { width: 1.5px; height: 16px; background: rgba(255,255,255,0.1); margin-left: 15px; }
.crm-pipeline-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-small); flex-shrink: 0; }
.crm-pipeline-dot--teal   { background: rgba(232,68,10,0.3); }
.crm-pipeline-dot--orange { background: rgba(232,68,10,0.3); }
.crm-pipeline-dot--dark   { background: rgba(255,255,255,0.1); }
.crm-pipeline-info { flex: 1; }
.crm-pipeline-step-title { font-size: var(--fs-caption); font-weight: 700; color: #fff; line-height: 1.1; }
.crm-pipeline-step-sub,
.crm-platform-card-sub{ font-size: var(--fs-label); color: rgba(255,255,255,0.4); margin-top: 2px; }

/* Notification cards */

.crm-notif-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; box-shadow: var(--shadow-sm); }
.crm-notif-icon,
.gads-mini-icon{ width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: var(--fs-h5); flex-shrink: 0; }
.crm-notif-icon--orange { background: rgba(232,68,10,0.1); }
.crm-notif-icon--teal   { background: var(--crm-pale); }
.crm-notif-title { font-size: var(--fs-caption); font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.crm-notif-sub,
.wd-industry-sub,
.svcs-result-lbl{ font-size: var(--fs-label); color: var(--ink-faint); line-height: 1.4; }

/* Platform pills */
.crm-platform-pills { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; }
.crm-platform-pills-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-faint); margin-bottom: 12px; }

.crm-pill { background: var(--base); border: 1px solid var(--border); color: var(--ink-mid); font-size: var(--fs-caption); font-weight: 600; padding: 5px 12px; border-radius: 20px; }

/* ── ACCENTS ── */
.crm-stat-accent { color: var(--cta) !important; }
.crm-accent      { color: var(--cta); }
.crm-dark-accent { color: var(--cta) !important; }
.crm-stats-bar   { background: #FDF3EA; border-color: #F3D2BE; }

/* ── PROBLEM CARDS ── */
.crm-sticky-col { position: sticky; top: 40px; }
.crm-pull-quote {
  border-left: 3px solid var(--crm);
  padding: 14px 20px; margin-top: 20px;
  background: var(--crm-pale); border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.crm-pull-quote-text { font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin-bottom: 6px; line-height: 1.4; }
.crm-pull-quote-attr { font-size: var(--fs-label); color: var(--crm); font-weight: 600; }

.crm-problem-card { display: flex; align-items: flex-start; gap: 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; border-left: 3px solid var(--crm-pale); transition: border-left-color 0.2s, box-shadow 0.2s; }
.crm-problem-card:hover { border-left-color: var(--crm); box-shadow: var(--shadow-sm); }
.crm-problem-icon  { font-size: var(--fs-h3); flex-shrink: 0; }
.crm-problem-title,
.crm-feature-title,
.gbp-problem-title,
.seo-problem-title,
.wd-problem-title{ font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin-bottom: 5px; }


/* ── BEFORE/AFTER TABLE ── */
.crm-ba-table,
.gads-compare{ border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); max-width: 900px; margin: 0 auto; }
.crm-ba-row { display: grid; grid-template-columns: 1fr 1fr; }
.crm-ba-header { background: var(--ink); }
.crm-ba-cell-bad, .crm-ba-cell-good {
  padding: 14px 24px; font-size: var(--fs-small); font-weight: 500; display: flex; align-items: center; gap: 10px;
}
.crm-ba-header .crm-ba-cell-bad  { font-size: var(--fs-caption); font-weight: 700; color: rgba(255,255,255,0.5); border-right: 1px solid rgba(255,255,255,0.1); }
.crm-ba-header .crm-ba-cell-good { font-size: var(--fs-caption); font-weight: 700; color: #FF8A50; }
.crm-ba-row:not(.crm-ba-header) .crm-ba-cell-bad  { background: #FFF5F5; color: var(--ink-mid); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.crm-ba-row:not(.crm-ba-header) .crm-ba-cell-good { background: #F0FDF8; color: var(--ink); border-bottom: 1px solid var(--border); }
.crm-ba-row--last .crm-ba-cell-bad, .crm-ba-row--last .crm-ba-cell-good { border-bottom: none; }
.crm-ba-x     { color: #E03515; font-weight: 800; font-size: var(--fs-body); flex-shrink: 0; }
.crm-ba-check { color: var(--crm); font-weight: 800; font-size: var(--fs-body); flex-shrink: 0; }

/* ── STATS BAND ── */

.crm-band-stats { display: grid; grid-template-columns: repeat(4,1fr); }

.crm-band-cell:last-child { border-right: none; }
.crm-band-num { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: #fff; line-height: 1; margin-bottom: 8px; letter-spacing: -1px; }


/* ── PROCESS ── */
.crm-process-grid,
.gads-mgmt-grid,
.gads-campaign-grid,
.seo-reviews,
.wd-reviews,
.svcs-grid,
.rd-reviews,
.cs-problem-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.crm-process-card { background: var(--base); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--crm-pale); }
.crm-process-card--featured { background: var(--ink); border-color: var(--ink); border-top-color: var(--crm-mid); }
.crm-process-num { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: var(--border); line-height: 1; }
.crm-process-num--white { color: rgba(255,255,255,0.15); }
.crm-process-icon  { font-size: var(--fs-h2); }
.crm-process-title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: 1.0; }
.crm-process-title--white { color: #fff; }

.crm-process-desc--white { color: rgba(255,255,255,0.6); }
.crm-process-week { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--crm); margin-top: 4px; }
.crm-process-week--white { color: #FF8A50; }

/* ── FEATURES LIST ── */

.crm-feature { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.crm-feature:last-child { border-bottom: none; }
.crm-feature-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--crm); flex-shrink: 0; margin-top: 6px; }



/* ── PLATFORM CARDS (dark section) ── */
.crm-platform-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 20px; }
.crm-platform-card { background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.09); border-radius: var(--radius-lg); padding: 28px; transition: background 0.2s; }
.crm-platform-card:hover { background: rgba(255,255,255,0.09); }
.crm-platform-card--accent { background: rgba(106,223,208,0.1); border-color: rgba(106,223,208,0.2); }
.crm-platform-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.crm-platform-card-icon { font-size: var(--fs-h3); flex-shrink: 0; }
.crm-platform-card-name { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 800; text-transform: uppercase; color: #fff; line-height: 1; }



.crm-mini-integrations { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding-top: 10px; }
.crm-mini-int { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 16px 20px; }
.crm-mini-int-icon { font-size: var(--fs-h4); flex-shrink: 0; }

.crm-mini-int-sub  { font-size: var(--fs-label); color: rgba(255,255,255,0.35); margin-top: 2px; }

/* ── TESTIMONIALS ── */
.crm-rating-row,
.gads-rating-row{ display: flex; align-items: center; gap: 12px; margin-top: 12px; }

.crm-rating-score,
.gads-rating-score{ font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; color: var(--ink); }
.crm-rating-note,
.gads-result-big-lbl,
.gads-rating-note,
.svcs-notsure-footnote{ font-size: var(--fs-caption); color: var(--ink-faint); margin-top: 4px; }
.crm-reviews,
.gads-hero-right,
.gads-reviews{ display: flex; flex-direction: column; gap: 12px; }
.crm-review { background: var(--base); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; border-left: 3px solid var(--crm-pale); }



.crm-review-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--crm-pale); color: var(--crm); font-size: var(--fs-caption); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.crm-review-role   { font-size: var(--fs-label); color: var(--ink-faint); }

/* ── CONTACT CARD ── */

.crm-contact-eyebrow { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #FF8A50; }
.crm-contact-h3,
.gads-contact-h3{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 900; text-transform: uppercase; color: #fff; line-height: 1.0; }

.crm-contact-footer { border-top: 0.5px solid rgba(255,255,255,0.1); padding-top: 16px; }


.crm-contact-phone:hover { color: #FF8A50; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .crm-band-grid  { grid-template-columns: 1fr; gap: 36px; }
  .crm-band-stats { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 768px) {
  .crm-hero-grid    { grid-template-columns: 1fr; gap: 40px; }
  .crm-process-grid { grid-template-columns: 1fr; }
  .crm-platform-cards { grid-template-columns: 1fr; }
  .crm-mini-integrations { grid-template-columns: 1fr; }
  .crm-band-stats   { grid-template-columns: 1fr 1fr; }
  .crm-band-cell:nth-child(2) { border-right: none; }
  .crm-band-cell:nth-child(3) { border-top: 0.5px solid rgba(255,255,255,0.08); }
  .crm-ba-table { border-radius: var(--radius-lg); }
  .crm-ba-cell-bad, .crm-ba-cell-good { padding: 12px 14px; font-size: var(--fs-caption); }
  .crm-sticky-col { position: static; }
  .crm-contact-card { position: static; }
}
@media (max-width: 480px) {
  .crm-notif-row { grid-template-columns: 1fr; }
  .crm-ba-row { grid-template-columns: 1fr; }
  .crm-ba-cell-bad  { border-right: none !important; border-bottom: 1px solid var(--border) !important; }
}


/* ============================================================
   GOOGLE ADS MANAGEMENT PAGE — v4, Blush Rose Theme
   Requires style-v4.css loaded first.
   ============================================================ */

/* ── TOKENS ── */
.gads-page {
  --gads:      #4A8EC2;
  --gads-mid:  #5A9ED2;
  --gads-pale: #EBF2FA;
  --gads-bg:   #C8E0F5;
}

/* ── HERO ── */


.gads-breadcrumb a      { color: rgba(80,20,30,0.45); }
.gads-breadcrumb a:hover { color: var(--ink); }
.gads-breadcrumb .breadcrumb-sep { color: rgba(74,142,194,0.25); }
.gads-breadcrumb .breadcrumb-current { color: var(--ink-mid); }




.gads-eyebrow { color: var(--gads) !important; }
.gads-eyebrow::before { background: var(--gads) !important; }




/* Hero stat strip */
.gads-hero-stats { display: flex; align-items: center; background: rgba(255,255,255,0.65); border: 1px solid rgba(74,142,194,0.18); border-radius: var(--radius-lg); padding: 0; overflow: hidden; width: fit-content; }
.gads-hero-stat  { padding: 16px 24px; text-align: center; }
.gads-stat-div   { width: 1px; height: 44px; background: rgba(74,142,194,0.12); flex-shrink: 0; }
.gads-hero-stat-num { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; color: var(--ink); line-height: 1; }
.gads-hero-stat-num--accent { color: var(--gads); }
.gads-hero-stat-lbl { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(80,20,30,0.45); margin-top: 3px; }

/* ── DASHBOARD CARD ── */
.gads-dash-card {
  background: var(--ink); border-radius: var(--radius-xl); padding: 22px 24px;
  box-shadow: 0 16px 40px rgba(10,30,60,0.2);
}
.gads-dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.gads-dash-label  { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.35); }

/* Metric pills */
.metric-pill { display: inline-flex; align-items: center; font-size: var(--fs-label); font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.metric-up   { background: rgba(34,197,94,0.2); color: #4ADE80; }
.metric-neu  { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }
.gads-pill-sm { font-size: var(--fs-label); padding: 2px 7px; margin-top: 4px; display: block; width: fit-content; }

/* Dashboard metrics grid */
.gads-dash-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 0.5px solid rgba(255,255,255,0.08); }
.gads-dash-metric  { padding: 0 12px 0 0; }

.gads-dash-num--accent { color: #6EE7A8; }
.gads-dash-lbl     { font-size: var(--fs-label); color: rgba(255,255,255,0.4); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Mini bar chart */
.gads-chart-label { font-size: var(--fs-label); color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.gads-bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin-bottom: 6px; }
.gads-bar  { flex: 1; background: rgba(255,255,255,0.14); border-radius: 3px 3px 0 0; height: var(--h);
  transition: background .18s ease; }
.gads-bar--mid  { background: rgba(122,178,224,0.55); }
.gads-bar--peak { background: #9FC8E8; }
.gads-chart-labels,
.gads-rev-labels{ display: flex; justify-content: space-between; font-size: var(--fs-label); color: rgba(255,255,255,0.25); font-weight: 600; }

/* Mini cards */

.gads-mini-card,
.gads-client-badge{ background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-sm); }

.gads-mini-icon--green { background: rgba(34,197,94,0.1); }
.gads-mini-icon--blue  { background: var(--pastel-sky); }

.gads-mini-sub   { font-size: var(--fs-label); color: var(--ink-faint); }

/* Client badge */

.gads-client-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-size: var(--fs-caption); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gads-client-info { flex: 1; }
.gads-client-name,
.lp-showcase-biz,
.ct-contact-pill-value,
.ct-alt-title{ font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
.gads-client-sub  { font-size: var(--fs-label); color: var(--ink-faint); margin-top: 2px; }
.gads-client-link { font-size: var(--fs-caption); font-weight: 700; color: var(--gads); text-decoration: none; white-space: nowrap; }
.gads-client-link:hover { color: var(--gads-mid); }

/* ── ACCENTS ── */
.gads-stat-accent { color: var(--gads) !important; }
.gads-accent      { color: var(--gads); }
.gads-dark-accent { color: #9FC8E8 !important; }
.gads-stats-bar   { background: #EBF2FA; border-color: #C8D8E8; }

/* ── PROBLEM LIST ── */
.gads-sticky-col { position: sticky; top: 40px; }
.gads-case-box {
  background: var(--gads-pale); border: 1px solid rgba(74,142,194,0.2);
  border-left: 3px solid var(--gads);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px 22px; margin-top: 24px;
}
.gads-case-box-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gads); margin-bottom: 8px; }
.gads-case-box-desc  { font-size: var(--fs-small); color: var(--ink-mid); line-height: 1.6; }

.gads-problem-list  { display: flex; flex-direction: column; }
.gads-problem-row   { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--border); align-items: start; }
.gads-problem-row--last { border-bottom: none; }
.gads-problem-num   { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900; color: var(--border); line-height: 1; padding-top: 4px; }
.gads-problem-title,
.gads-campaign-title{ font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: 1.1; margin-bottom: 10px; }


/* ── MANAGEMENT SYSTEM ── */

.gads-mgmt-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px; }
.gads-mgmt-panel--dark { background: var(--ink); border-color: var(--ink); }
.gads-mgmt-phase { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 20px; }
.gads-mgmt-phase--accent { color: var(--gads); }
.gads-mgmt-phase--white  { color: rgba(255,255,255,0.4); }



.gads-mgmt-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gads-pale); color: var(--gads);
  font-size: var(--fs-caption); font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.gads-mgmt-panel--dark .gads-mgmt-num { background: rgba(159,200,232,0.15); color: #9FC8E8; }
.gads-mgmt-title { font-size: var(--fs-small); font-weight: 700; color: var(--ink); margin-bottom: 3px; line-height: 1.2; }
.gads-mgmt-title--white { color: #fff; }

.gads-mgmt-sub--white { color: rgba(255,255,255,0.4); }

/* ── COMPARISON TABLE ── */

.gads-compare-header { display: grid; grid-template-columns: 1fr 160px 160px; background: var(--ink); }
.gads-compare-desc-col { padding: 14px 24px; font-size: var(--fs-caption); font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; }
.gads-compare-us-col   { padding: 14px 16px; text-align: center; font-size: var(--fs-small); font-weight: 800; color: var(--cta); background: rgba(232,68,10,0.12); }
.gads-compare-them-col { padding: 14px 16px; text-align: center; font-size: var(--fs-small); font-weight: 700; color: rgba(255,255,255,0.4); }

.gads-compare-row { display: grid; grid-template-columns: 1fr 160px 160px; border-bottom: 1px solid var(--border); }
.gads-compare-row:last-child { border-bottom: none; }
.gads-compare-desc { padding: 14px 24px; font-size: var(--fs-small); color: var(--ink-mid); font-weight: 500; display: flex; align-items: center; }
.gads-compare-yes  { padding: 14px 16px; text-align: center; font-size: var(--fs-caption); font-weight: 700; color: #166534; background: #F0FDF4; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.gads-compare-no   { padding: 14px 16px; text-align: center; font-size: var(--fs-caption); color: var(--ink-faint); display: flex; align-items: center; justify-content: center; background: #FAFAFA; }

/* ── BAND ── */

.gads-band-stats { display: grid; grid-template-columns: repeat(4,1fr); }

.gads-band-cell:last-child { border-right: none; }
.gads-band-num   { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: #fff; line-height: 1; margin-bottom: 8px; letter-spacing: -1px; }


/* ── CASE STUDY DEEP DIVE ── */

.gads-case-row  { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--border); align-items: start; }
.gads-case-row--highlight { background: var(--gads-pale); margin: 0 -12px; padding: 18px 12px; border-radius: var(--radius-md); border-bottom: none; }
.gads-case-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-faint); padding-top: 2px; }
.gads-case-row--highlight .gads-case-label { color: var(--gads); }
.gads-case-text,
.seo-timeline-desc,
.lp-reason-desc{ font-size: var(--fs-small); color: var(--ink-mid); line-height: 1.7; }

.gads-result-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow-sm); }
.gads-result-card-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-faint); margin-bottom: 18px; }
.gads-result-top { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.gads-result-big { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: var(--ink); line-height: 1; }
.gads-result-big--accent { color: var(--gads); }

.gads-result-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.gads-result-sm { padding: 0 12px; text-align: center; }
.gads-result-sm--bordered { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }

.gads-result-sm-num--accent { color: var(--gads); }
.gads-result-sm-lbl,
.svcs-proof-lbl,
.ct-trust-lbl{ font-size: var(--fs-label); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 3px; }


.gads-chart-card-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.35); margin-bottom: 14px; }
.gads-rev-bars  { display: flex; align-items: flex-end; gap: 5px; height: 72px; margin-bottom: 8px; }
.gads-rev-bar   { flex: 1; background: rgba(159,200,232,0.2); border-radius: 3px 3px 0 0; height: var(--h); }
.gads-rev-bar--peak { background: var(--cta); }


/* ── CAMPAIGN GRID ── */

.gads-campaign-card { background: var(--base); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; transition: box-shadow 0.2s; border-top: 3px solid var(--gads-pale); }
.gads-campaign-card:hover { box-shadow: var(--shadow-md); }
.gads-campaign-card--dark { background: var(--ink); border-color: var(--ink); border-top-color: rgba(159,200,232,0.3); }
.gads-campaign-card--cta  { background: var(--gads-pale); border-color: rgba(74,142,194,0.2); border-top-color: var(--gads); }


.gads-campaign-title--white { color: #fff; }
.gads-campaign-desc  { font-size: var(--fs-caption); color: var(--ink-light); line-height: 1.65; margin-bottom: 14px; }
.gads-campaign-desc--white { color: rgba(255,255,255,0.55); }
.gads-campaign-tags  { display: flex; flex-wrap: wrap; gap: 6px; }
.gads-ctag { background: rgba(255,255,255,0.7); border: 1px solid var(--border); color: var(--ink-mid); font-size: var(--fs-label); font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.gads-ctag--dark { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }

/* ── TESTIMONIALS ── */





.gads-review  { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; border-left: 3px solid var(--gads-pale); }



.gads-review-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gads-pale); color: var(--gads); font-size: var(--fs-caption); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.gads-review-role   { font-size: var(--fs-label); color: var(--ink-faint); }

/* ── CONTACT CARD ── */

.gads-contact-eyebrow { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #9FC8E8; }


.gads-contact-footer { border-top: 0.5px solid rgba(255,255,255,0.1); padding-top: 16px; }


.gads-contact-phone:hover { color: #9FC8E8; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .gads-campaign-grid { grid-template-columns: repeat(2,1fr); }
  .gads-mgmt-grid    { grid-template-columns: 1fr; }
  .gads-band-grid    { grid-template-columns: 1fr; gap: 36px; }
  .gads-dash-metrics { grid-template-columns: repeat(2,1fr); gap: 12px; }
}
@media (max-width: 768px) {
  .gads-hero-grid    { grid-template-columns: 1fr; gap: 40px; }
  .gads-problem-row  { grid-template-columns: 40px 1fr; gap: 14px; }
  .gads-compare-header,
  .gads-compare-row  { grid-template-columns: 1fr 100px 100px; }
  .gads-compare-desc { padding: 12px 14px; font-size: var(--fs-caption); }
  .gads-band-stats   { grid-template-columns: 1fr 1fr; }
  .gads-band-cell:nth-child(2) { border-right: none; }
  .gads-band-cell:nth-child(3) { border-top: 0.5px solid rgba(255,255,255,0.08); }
  .gads-campaign-grid { grid-template-columns: 1fr 1fr; }
  .gads-sticky-col   { position: static; }
  .gads-contact-card { position: static; }
}
@media (max-width: 480px) {
  .gads-mini-row     { grid-template-columns: 1fr 1fr; }
  .gads-campaign-grid { grid-template-columns: 1fr; }
  .gads-compare-header,
  .gads-compare-row  { grid-template-columns: 1fr 80px 80px; }
  .gads-compare-yes,
  .gads-compare-no   { font-size: var(--fs-label); padding: 10px 8px; }
}

/* Bar chart height classes — hero dashboard */













/* Revenue bar chart heights — case study */









/* ============================================================
   GOOGLE BUSINESS PROFILE PAGE — v4, Warm Amber Theme
   Requires style-v4.css loaded first.
   ============================================================ */

/* ── TOKENS ── */
.gbp-page {
  --gbp:      #9A6B00;
  --gbp-mid:  #B07C00;
  --gbp-pale: #FEF3D0;
  --gbp-bg:   #FDF3D0;
}

/* ── HERO ── */


.gbp-breadcrumb a      { color: rgba(80,50,0,0.45); }
.gbp-breadcrumb a:hover { color: var(--ink); }
.gbp-breadcrumb .breadcrumb-sep { color: rgba(154,107,0,0.25); }
.gbp-breadcrumb .breadcrumb-current { color: var(--ink-mid); }




/* Eyebrow */
.gbp-eyebrow { color: var(--gbp) !important; }
.gbp-eyebrow::before { background: var(--gbp) !important; }




/* ── GBP LISTING CARD ── */
.gbp-listing-card {
  background: var(--white); border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(10,30,60,0.12);
  overflow: hidden; padding: 20px 22px;
}
.gbp-listing-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.gbp-listing-pin    { font-size: var(--fs-h4); flex-shrink: 0; margin-top: 2px; }
.gbp-listing-header-info { flex: 1; }
.gbp-listing-biz    { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800; color: var(--ink); line-height: 1.1; }
.gbp-listing-cat,
.lp-city-sub,
.ct-alt-sub{ font-size: var(--fs-caption); color: var(--ink-faint); margin-top: 2px; }
.gbp-listing-badge  { background: #DCFCE7; color: #166534; font-size: var(--fs-label); font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }

.gbp-listing-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.gbp-listing-stars  { color: #F59E0B; font-size: var(--fs-body); letter-spacing: 2px; }
.gbp-listing-score  { font-weight: 800; color: var(--ink); font-size: var(--fs-body); }
.gbp-listing-count  { font-size: var(--fs-caption); color: var(--accent); }

.gbp-listing-actions { display: flex; gap: 8px; margin-bottom: 16px; }
.gbp-listing-action { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border-radius: var(--radius-md); border: 1.5px solid var(--border); font-size: var(--fs-caption); font-weight: 700; color: var(--ink-mid); cursor: default; }
.gbp-listing-action--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.gbp-listing-divider { height: 1px; background: var(--border); margin-bottom: 14px; }
.gbp-listing-section-lbl,
.seo-organic-label{ font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-faint); margin-bottom: 10px; }

/* Map pack rows */
.gbp-map-pack,
.seo-map-pack-rows,
.ct-contact-pills,
.cs-feat-c-stats{ display: flex; flex-direction: column; gap: 8px; }
.gbp-map-row  { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); }
.gbp-map-row--you { background: rgba(74,142,194,0.08); border: 1px solid rgba(74,142,194,0.2); }
.gbp-map-row--dim { opacity: 0.45; }
.gbp-map-dot  { width: 26px; height: 26px; border-radius: 50%; background: var(--base); color: var(--ink-mid); font-size: var(--fs-label); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gbp-map-dot--blue { background: var(--accent); color: #fff; }
.gbp-map-name { flex: 1; font-size: var(--fs-caption); font-weight: 600; color: var(--ink); }
.gbp-you-tag  { background: var(--accent); color: #fff; font-size: var(--fs-label); font-weight: 700; padding: 2px 6px; border-radius: 10px; margin-left: 6px; }
.gbp-map-rank { font-size: var(--fs-caption); font-weight: 800; color: var(--accent); }
.gbp-map-rank--dim { color: var(--ink-faint); }

/* Mini cards */

.gbp-mini-card { border-radius: var(--radius-lg); padding: 18px; }
.gbp-mini-card--dark  { background: var(--ink); }
.gbp-mini-card--amber { background: var(--gbp-pale); border: 1px solid rgba(154,107,0,0.2); }
.gbp-mini-lbl,
.seo-mini-lbl{ font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); margin-bottom: 6px; }
.gbp-mini-card--amber .gbp-mini-lbl { color: rgba(154,107,0,0.6); }

.gbp-mini-card--amber .gbp-mini-num { color: var(--gbp); }
.gbp-mini-sub,
.seo-mini-sub{ font-size: var(--fs-label); color: rgba(255,255,255,0.4); margin-top: 4px; }
.gbp-mini-card--amber .gbp-mini-sub { color: rgba(154,107,0,0.5); }

/* ── ACCENTS ── */
.gbp-stat-accent { color: var(--gbp) !important; }
.gbp-accent      { color: var(--gbp); }
.gbp-dark-accent { color: #FDE68A !important; }
.gbp-stats-bar   { background: #FEF9E7; border-color: #F0D888; }

/* ── PROBLEM CARDS ── */
.gbp-pull-quote { border-left: 3px solid var(--gbp); padding: 14px 20px; background: var(--gbp-pale); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-top: 20px; }
.gbp-pull-quote-text,
.seo-pull-quote-text,
.wd-pull-quote-text{ font-size: var(--fs-body); font-style: italic; color: var(--ink); line-height: 1.6; margin-bottom: 6px; }
.gbp-pull-quote-attr { font-size: var(--fs-label); color: var(--gbp); font-weight: 600; }

.gbp-problem-card { display: flex; align-items: flex-start; gap: 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; border-left: 3px solid var(--gbp-pale); transition: border-left-color 0.2s, box-shadow 0.2s; }
.gbp-problem-card:hover { border-left-color: var(--gbp); box-shadow: var(--shadow-sm); }
.gbp-problem-icon  { font-size: var(--fs-h3); flex-shrink: 0; }



/* ── SERVICE CARDS (dark section) ── */
.gbp-services-grid,
.wd-features-grid,
.lp-includes-grid,
.rd-signs-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.gbp-service-card  { background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.09); border-radius: var(--radius-lg); padding: 26px; transition: background 0.2s; position: relative; }
.gbp-service-card:hover { background: rgba(255,255,255,0.09); }
.gbp-service-icon  { font-size: var(--fs-h3); margin-bottom: 8px; display: block; }
.gbp-service-num,
.rd-sign-num{ font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700; color: rgba(255,255,255,0.2); letter-spacing: 1px; margin-bottom: 10px; }

.gbp-service-desc  { font-size: var(--fs-caption); color: rgba(255,255,255,0.55); line-height: 1.65; margin-bottom: 14px; }
.gbp-service-result { font-size: var(--fs-label); font-weight: 700; color: #FDE68A; text-transform: uppercase; letter-spacing: 0.8px; }

/* ── RANKING FACTORS ── */
.gbp-factors { display: flex; flex-direction: column; gap: 18px; }
.gbp-factor  { }
.gbp-factor-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.gbp-factor-label { font-size: var(--fs-small); font-weight: 600; color: var(--ink-mid); }
.gbp-factor-badge { font-size: var(--fs-label); font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.gbp-factor-badge--control { background: rgba(154,107,0,0.1); color: var(--gbp); border: 1px solid rgba(154,107,0,0.2); }
.gbp-factor-badge--fixed   { background: var(--base); color: var(--ink-faint); border: 1px solid var(--border); }
.gbp-factor-track { height: 8px; background: var(--base); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.gbp-factor-fill  { height: 100%; background: linear-gradient(90deg, var(--gbp), var(--gbp-mid)); border-radius: 4px; }
/* Width classes */
.gbp-fill--95 { width: 95% }
.gbp-fill--88 { width: 88% }
.gbp-fill--92 { width: 92% }
.gbp-fill--82 { width: 82% }
.gbp-fill--80 { width: 80% }
.gbp-fill--75 { width: 75% }
.gbp-fill--70 { width: 70% }

/* ── PACKAGES ── */
.gbp-packages,
.rd-packages{ display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; align-items: start; }
.gbp-pkg {
  background: var(--base); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 28px;
  display: flex; flex-direction: column; gap: 0;
  position: relative;
}
.gbp-pkg--featured { background: var(--ink); border-color: var(--ink); }
.gbp-pkg-badge,
.seo-pkg-badge,
.wd-pkg-badge,
.rd-pkg-badge{
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--cta); color: #fff;
  font-size: var(--fs-label); font-weight: 700; padding: 5px 16px; border-radius: 20px;
  white-space: nowrap;
}
.gbp-pkg-header { margin-bottom: 22px; }
.gbp-pkg-icon { font-size: var(--fs-h2); display: block; margin-bottom: 10px; }
.gbp-pkg-name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; text-transform: uppercase; color: var(--ink); line-height: 1; margin-bottom: 8px; }
.gbp-pkg--featured .gbp-pkg-name { color: #fff; }
.gbp-pkg-desc { font-size: var(--fs-caption); color: var(--ink-light); line-height: 1.6; }
.gbp-pkg--featured .gbp-pkg-desc { color: rgba(255,255,255,0.55); }
.gbp-pkg-items,
.seo-pkg-items,
.wd-pkg-items,
.rd-pkg-items{ display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; flex: 1; }
.gbp-pkg-item { font-size: var(--fs-caption); color: var(--ink-mid); display: flex; align-items: flex-start; gap: 8px; }
.gbp-pkg--featured .gbp-pkg-item { color: rgba(255,255,255,0.75); }
.gbp-pkg-cta,
.svcs-card-cta{ display: flex; align-items: center; justify-content: center; margin-top: auto; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .gbp-services-grid { grid-template-columns: repeat(2,1fr); }
  .gbp-packages { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .gbp-hero-grid  { grid-template-columns: 1fr; gap: 40px; }
  .gbp-services-grid { grid-template-columns: 1fr; }
  .gbp-packages   { grid-template-columns: 1fr; }
  .gbp-pkg-badge  { position: static; transform: none; display: inline-block; margin-bottom: 12px; }
}
@media (max-width: 480px) {
  .gbp-hero-mini  { grid-template-columns: 1fr 1fr; }
  .gbp-listing-actions { flex-wrap: wrap; }
}


/* ============================================================
   SEO SERVICES PAGE — v4, Steel Blue Theme
   Requires style-v4.css loaded first.
   ============================================================ */

/* ── HERO ── */


.seo-breadcrumb a      { color: rgba(20,50,120,0.45); }
.seo-breadcrumb a:hover { color: var(--ink); }
.seo-breadcrumb .breadcrumb-sep { color: rgba(74,142,194,0.3); }
.seo-breadcrumb .breadcrumb-current { color: var(--ink-mid); }




.seo-eyebrow { color: var(--accent) !important; }
.seo-eyebrow::before { background: var(--accent) !important; }



/* Trust pills */


/* ── SERP CARD ── */
.seo-serp-card {
  background: var(--white); border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(10,30,60,0.1);
  padding: 20px 22px;
}
.seo-serp-top-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-faint); margin-bottom: 14px; }

/* Map pack */
.seo-map-pack { background: var(--base); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; margin-bottom: 16px; }
.seo-map-pack-label { font-size: var(--fs-label); font-weight: 700; color: var(--ink-faint); margin-bottom: 10px; }

.seo-map-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: var(--radius-md); }
.seo-map-row--you   { background: rgba(74,142,194,0.1); border: 1px solid rgba(74,142,194,0.2); }
.seo-map-row--dim   { opacity: 0.5; }
.seo-map-row--dimmer { opacity: 0.3; }

.seo-map-row-sub  { font-size: var(--fs-label); color: var(--ink-faint); }
.seo-map-row-rank { font-size: var(--fs-caption); font-weight: 800; color: var(--ink-faint); }
.seo-map-row-rank--you { color: var(--accent); }
.seo-map-row-rank--dim { color: var(--ink-faint); }

/* Organic rows */

.seo-organic-rows  { display: flex; flex-direction: column; gap: 6px; }
.seo-organic-row   { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.seo-organic-row:last-child { border-bottom: none; }
.seo-organic-kw    { font-size: var(--fs-caption); color: var(--ink-mid); font-style: italic; }
.seo-organic-rank  { font-size: var(--fs-caption); font-weight: 800; }
.seo-rank--1 { color: #15803D; }
.seo-rank--2 { color: #1D4ED8; }
.seo-rank--3 { color: var(--accent); }
.seo-rank--4 { color: var(--ink-mid); }

/* Mini stats */

.seo-mini-card { border-radius: var(--radius-lg); padding: 18px; }
.seo-mini-card--dark { background: var(--ink); }
.seo-mini-card--blue { background: var(--pastel-sky); border: 1px solid #B0CCE4; }

.seo-mini-card--blue .seo-mini-lbl { color: var(--ink-faint); }

.seo-mini-card--blue .seo-mini-num { color: var(--ink); }

.seo-mini-card--blue .seo-mini-sub { color: var(--ink-faint); }

/* ── ACCENTS ── */
.seo-accent      { color: var(--accent); }
.seo-dark-accent { color: #7EC8F0 !important; }

/* ── PROBLEM CARDS ── */
.seo-pull-quote,
.wd-pull-quote{ border-left: 3px solid var(--accent); padding: 14px 20px; background: var(--accent-pale); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-top: 20px; }

.seo-pull-quote-attr,
.wd-pull-quote-attr{ font-size: var(--fs-label); color: var(--accent); font-weight: 600; }

.seo-problem-card,
.wd-problem-card{ display: flex; align-items: flex-start; gap: 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; border-left: 3px solid var(--pastel-sky); transition: border-left-color 0.2s, box-shadow 0.2s; }
.seo-problem-card:hover { border-left-color: var(--accent); box-shadow: var(--shadow-sm); }
/* ONE problem-card treatment sitewide: bare icon top-left, title under it,
   copy under that. No tinted icon tile, no horizontal variant. */
.seo-problem-card,.wd-problem-card,.crm-problem-card,.gbp-problem-card{
  flex-direction:column;align-items:flex-start;gap:14px;padding:26px 28px}
.problem-emoji--svg,.seo-problem-icon,.wd-problem-icon,.crm-problem-icon,.gbp-problem-icon{
  width:auto;height:auto;border-radius:0;background:none;color:var(--accent);
  display:block;flex-shrink:0}
.problem-emoji--svg svg,.seo-problem-icon svg,.wd-problem-icon svg,
.crm-problem-icon svg,.gbp-problem-icon svg{width:40px;height:40px;display:block;stroke-width:1.5}
.seo-problem-lead { margin: 0 0 4px; }



/* ── SERVICE CARDS ── */
.seo-services-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.seo-svc-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px; border-top: 3px solid var(--pastel-sky); }
.seo-svc-card--dark,
.seo-process-card--featured{ background: var(--ink); border-color: var(--ink); border-top-color: var(--accent); }
.seo-svc-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.seo-svc-icon,
.seo-timeline-icon{ flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.seo-svc-icon svg,.seo-timeline-icon svg{ width: 32px; height: 32px; display: block; }
.seo-svc-title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: 1.0; }
.seo-svc-title--white { color: #fff; }
.seo-svc-sub   { font-size: var(--fs-caption); color: var(--ink-faint); margin-top: 3px; }
.seo-svc-sub--white { color: rgba(255,255,255,0.4); }
.seo-checklist li { font-size: var(--fs-caption); }
.seo-process-card .seo-checklist { padding-left: 20px; }
.seo-process-card .seo-checklist li { padding-left: 4px; }

/* ── STATS BAND ── */
.seo-band-stats { display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 0; }

.seo-band-cell:last-child { border-right: none; }
.seo-band-num   { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: #fff; line-height: 1; margin-bottom: 10px; letter-spacing: -2px; }
.seo-band-lbl   { font-size: var(--fs-caption); color: rgba(255,255,255,0.45); line-height: 1.4; }

/* ── PROCESS ── */
.seo-process-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 24px; }
.seo-process-card { background: var(--base); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px; border-top: 3px solid var(--pastel-sky); }

.seo-process-phase { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); margin-bottom: 12px; }
.seo-process-phase--white { color: #7EC8F0; }
.seo-process-title { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink); line-height: 1.25; margin-bottom: 18px; }
.seo-process-title--white { color: #fff; }

/* photo on the left, copy in a half-width column - the single long line was
   past a comfortable reading measure */
.seo-timeline-note{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  background:var(--cream);border:1px solid var(--cream-border);border-radius:var(--radius-lg);
  padding:0;overflow:hidden;border-left:3px solid var(--accent)}
.seo-timeline-media{position:relative;overflow:hidden;min-height:200px}
.seo-timeline-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.seo-timeline-body{display:flex;align-items:flex-start;gap:18px;padding:26px 30px;align-self:center}
@media (max-width:900px){
  .seo-timeline-note{grid-template-columns:1fr}
  .seo-timeline-media{min-height:0;aspect-ratio:16/9}
  .seo-timeline-body{padding:22px 24px}
}

.seo-timeline-title { font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin-bottom: 8px; }


/* ── REVIEWS ── */

.seo-review,
.wd-review,
.rd-review{ background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.09); border-radius: var(--radius-lg); padding: 24px; }
.seo-review-stars,
.wd-review-stars{ color: #F59E0B; font-size: var(--fs-small); margin-bottom: 12px; }
.seo-review-text,
.wd-review-text,
.rd-review-text{ font-size: var(--fs-small); color: rgba(255,255,255,0.65); line-height: 1.7; font-style: italic; margin-bottom: 16px; }

.seo-review-avatar,
.wd-review-avatar{ width: 36px; height: 36px; border-radius: 50%; background: rgba(74,142,194,0.3); color: #7EC8F0; font-size: var(--fs-caption); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.seo-review-role   { font-size: var(--fs-label); color: rgba(255,255,255,0.35); }

/* ── PRICING ── */
.seo-packages { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; align-items: start; margin-bottom: 20px; }
.seo-pkg {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 28px;
  display: flex; flex-direction: column; gap: 0;
  position: relative;
}
.seo-pkg--featured { background: var(--ink); border-color: var(--ink); }

.seo-pkg-tier { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-faint); margin-bottom: 8px; }
.seo-pkg--featured .seo-pkg-tier { color: rgba(255,255,255,0.4); }
.seo-pkg-price { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: var(--ink); line-height: 1; }
.seo-pkg--featured .seo-pkg-price { color: #fff; }
.seo-pkg-period,
.wd-pkg-period,
.rd-pkg-period{ font-size: var(--fs-caption); color: var(--ink-faint); margin-bottom: 20px; margin-top: 4px; }
.seo-pkg--featured .seo-pkg-period { color: rgba(255,255,255,0.4); }
.seo-pkg-divider,
.wd-pkg-divider,
.rd-pkg-divider{ height: 1px; background: var(--border); margin-bottom: 20px; }
.seo-pkg-divider--white { background: rgba(255,255,255,0.1); }

.seo-pkg-item { font-size: var(--fs-caption); color: var(--ink-mid); }
.seo-pkg--featured .seo-pkg-item { color: rgba(255,255,255,0.75); }
.seo-pkg-cta,
.wd-pkg-cta,
.rd-pkg-cta{ display: flex; align-items: center; justify-content: center; }

.seo-pricing-note a { color: var(--accent); font-weight: 700; }

/* ── FAQ GRID ── */
.seo-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }
.seo-faq-item { padding-top: 4px; }
.seo-faq-q,
.wd-faq-q{ font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin-bottom: 8px; line-height: 1.4; }
.seo-faq-a,
.wd-faq-a{ font-size: var(--fs-small); color: var(--ink-mid); line-height: 1.72; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .seo-band-stats { grid-template-columns: 1fr 1fr; }
  .seo-band-cell:nth-child(2) { border-right: none; }
  .seo-band-cell:nth-child(3) { border-top: 0.5px solid rgba(255,255,255,0.08); }
}
@media (max-width: 768px) {
  .seo-hero-grid    { grid-template-columns: 1fr; gap: 40px; }
  .seo-services-grid { grid-template-columns: 1fr; }
  .seo-process-grid { grid-template-columns: 1fr; }
  .seo-reviews      { grid-template-columns: 1fr; }
  .seo-packages     { grid-template-columns: 1fr; }
  .seo-faq-grid     { grid-template-columns: 1fr; }
  .seo-band-stats   { grid-template-columns: 1fr 1fr; }
  .seo-pkg-badge    { position: static; transform: none; display: inline-block; margin-bottom: 12px; }
}
@media (max-width: 480px) {
  .seo-mini-row { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   WEB DESIGN SERVICE PAGE — v4
   Clean white hero. Let the work speak.
   Requires style-v4.css loaded first.
   ============================================================ */

/* ── HERO — pure white, premium ── */

.wd-breadcrumb a      { color: var(--ink-faint); }
.wd-breadcrumb a:hover { color: var(--ink); }


.wd-hero-left { }
.wd-hero-right { position: relative; display: flex; flex-direction: column; gap: 0; }

/* Eyebrow */
.wd-eyebrow { color: var(--accent) !important; }
.wd-eyebrow::before { background: var(--accent) !important; }

/* H1 — bold editorial with italic "Actually" */



/* Trust pills */





/* ── BROWSER FRAME MOCKUPS ── */
.wd-browser-frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(10,30,60,0.16);
  border: 1px solid var(--border);
  background: var(--white);
}
.wd-browser-frame--primary { z-index: 2; position: relative; }
/* the two small shots share a row under the hero shot and sit at different
   heights, so the stack reads as a stagger and no corner is left empty */
.wd-hero-row { display: flex; gap: 14px; align-items: flex-start; margin-left: 22px; }
.wd-browser-frame--secondary,
.wd-browser-frame--tertiary {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0;
  box-shadow: 0 12px 40px rgba(10,30,60,0.1);
}
.wd-browser-frame--tertiary { margin-top: -10px; }
.wd-browser-frame--secondary { margin-top: -34px; }
.wd-hero-row .wd-browser-body img { height: 150px; }
@media (max-width: 560px) {
  .wd-hero-row { margin-left: 0; gap: 10px; }
  .wd-browser-frame--secondary, .wd-browser-frame--tertiary { margin-top: 10px; }
}
.wd-browser-chrome {
  background: #1E2028; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}
.wd-browser-chrome--sm { padding: 8px 14px; }
.wd-browser-dots { display: flex; gap: 5px; }
.wd-browser-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.wd-browser-bar { flex: 1; background: rgba(255,255,255,0.07); border-radius: 4px; font-size: var(--fs-label); color: rgba(255,255,255,0.35); padding: 4px 12px; font-family: var(--font-body); }
.wd-live-dot-wrap { display: flex; align-items: center; gap: 5px; }
.wd-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; flex-shrink: 0; }
.wd-live-text { font-size: var(--fs-label); font-weight: 700; color: #22C55E; text-transform: uppercase; letter-spacing: 1px; }
.wd-browser-body img,
.lp-showcase-img-wrap img{ width: 100%; height: 200px; object-fit: cover; object-position: top; display: block; }
.wd-browser-frame--primary .wd-browser-body img { height: 220px; }

.wd-browser-caption {
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border);
}
.wd-browser-caption--sm { padding: 10px 14px; }
.wd-caption-tag  { font-size: var(--fs-label); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 2px; }

.wd-caption-stat { text-align: right; }
.wd-caption-stat-num { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 900; color: var(--accent); display: block; }
.wd-caption-stat-lbl { font-size: var(--fs-label); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── ACCENTS ── */
.wd-accent      { color: var(--accent); }
.wd-dark-accent { color: #7EC8F0 !important; }

/* ── PROBLEM CARDS ── */





.wd-problem-card:hover { border-left-color: var(--accent); box-shadow: var(--shadow-sm); }
.wd-problem-icon  { font-size: var(--fs-h3); flex-shrink: 0; }



/* ── FEATURE CARDS ── */

.wd-feature-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 28px;
  display: flex; flex-direction: column;
  border-top: 3px solid var(--border);
  transition: border-top-color 0.2s, box-shadow 0.2s;
}
.wd-feature-card:hover { border-top-color: var(--accent); box-shadow: var(--shadow-md); }
.wd-feature-card--dark,
.lp-include-card--dark,
.svcs-card--featured{ background: var(--ink); border-color: var(--ink); border-top-color: var(--cta); }
.wd-feature-card--dark:hover { border-top-color: var(--cta); }
.wd-feature-icon  { font-size: var(--fs-h2); margin-bottom: 14px; display: block; }
.wd-feature-title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: 1.0; margin-bottom: 10px; }
.wd-feature-title--white { color: #fff; }
.wd-feature-desc  { font-size: var(--fs-caption); color: var(--ink-light); line-height: 1.7; flex: 1; }
.wd-feature-desc--white { color: rgba(255,255,255,0.55); }
.wd-feature-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.wd-feature-footer--white { border-top-color: rgba(255,255,255,0.1); }
.wd-feature-footer-lbl { font-size: var(--fs-label); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.8px; }
.wd-feature-footer-val { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 900; color: var(--accent); }
.wd-feature-footer--white .wd-feature-footer-lbl { color: rgba(255,255,255,0.3); }
.wd-feature-footer--white .wd-feature-footer-val { color: var(--cta); }

/* ── PORTFOLIO ── */
.wd-portfolio-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; }
.wd-portfolio-link   { font-size: var(--fs-small); font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.wd-portfolio-link:hover { color: var(--ink); }
.wd-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 12px; }
.wd-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 12px; }

.wd-pcard { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: box-shadow 0.25s, transform 0.25s; }
.wd-pcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.wd-pcard-img-wrap,
.cs-spotlight-img{ position: relative; height: 200px; overflow: hidden; }
.wd-pcard-img-wrap--lg { height: 320px; }
.wd-pcard-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 0.4s ease; }
.wd-pcard:hover .wd-pcard-img-wrap img { transform: scale(1.04); }
.wd-pcard-overlay { position: absolute; inset: 0; background: rgba(10,30,60,0.78); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; opacity: 0; transition: opacity 0.25s; }
.wd-pcard:hover .wd-pcard-overlay { opacity: 1; }
.wd-pcard-stat { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: #fff; line-height: 1; }
.wd-pcard-stat--lg { font-size: var(--fs-h1); }
.wd-pcard-stat-lbl { font-size: var(--fs-caption); color: rgba(255,255,255,0.65); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.wd-pcard-btn { margin-top: 10px; background: var(--cta); color: #fff; font-size: var(--fs-caption); font-weight: 700; padding: 9px 20px; border-radius: var(--radius-sm); text-decoration: none; }
.wd-pcard-info { padding: 16px 18px; }
.wd-pcard-info--lg { padding: 20px 22px; }
.wd-pcard-tag  { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 4px; }
/* duplicate of the rule at ~959 — Archivo Black falls apart under 20px, so card
   titles use the body sans at 700 with tight tracking (same as .problem-title) */
.wd-pcard-name { font-family: var(--font-body); font-size: var(--fs-h5); font-weight: 700; letter-spacing: -.35px; text-transform: none; color: var(--ink); line-height: 1.25; margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-pcard-name--lg { font-size: var(--fs-h3); }
.wd-pcard-sub  { font-size: var(--fs-caption); color: var(--ink-faint); }

/* ── DARK BAND ── */
.wd-band-grid { align-items: center; }
.wd-band-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl); overflow: hidden; }
.wd-band-cell { background: rgba(255,255,255,0.02); padding: 28px 24px; }
.wd-band-num  { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: #fff; line-height: 1; letter-spacing: -2px; margin-bottom: 6px; }
.wd-band-lbl  { font-size: var(--fs-small); font-weight: 700; color: rgba(255,255,255,0.6); margin-bottom: 4px; }
.wd-band-note { font-size: var(--fs-caption); color: rgba(255,255,255,0.3); }

/* ── PROCESS ── */
.wd-process,
.rd-process{ display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; }
.wd-process-line,
.rd-process-line{
  position: absolute; top: 20px; left: calc(12.5% + 1px); right: calc(12.5% + 1px);
  height: 2px; background: var(--border); z-index: 0;
}
.wd-process-step,
.rd-process-step{ padding: 0 20px; position: relative; z-index: 1; }
.wd-process-dot {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--accent);
  color: var(--accent); font-family: var(--font-display);
  font-size: var(--fs-h5); font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; flex-shrink: 0;
}

.wd-process-phase { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); text-align: center; margin-bottom: 10px; }
.wd-process-phase--dark { color: var(--ink); }
.wd-process-title { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: 1.0; text-align: center; margin-bottom: 10px; }
.wd-process-desc,
.rd-process-desc{ font-size: var(--fs-caption); color: var(--ink-light); line-height: 1.65; text-align: center; }

/* ── INDUSTRIES ── */

.wd-industry { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 18px; transition: box-shadow 0.2s, border-color 0.2s; }
.wd-industry:hover { box-shadow: var(--shadow-sm); border-color: rgba(74,142,194,0.3); }

.wd-industry-name { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: 1.1; margin-bottom: 5px; }

.wd-industry-footer { text-align: center; margin-top: 24px; font-size: var(--fs-small); color: var(--ink-faint); }
.wd-industry-footer a { color: var(--accent); font-weight: 700; }

/* ── REVIEWS ── */







.wd-review-role   { font-size: var(--fs-label); color: rgba(255,255,255,0.35); }

/* ── PRICING ── */
.wd-packages { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; align-items: start; margin-bottom: 16px; }
.wd-pkg { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; position: relative; }
.wd-pkg--featured { background: var(--ink); border-color: var(--ink); }

.wd-pkg-tier,
.rd-pkg-tier{ font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-faint); margin-bottom: 8px; }
.wd-pkg--featured .wd-pkg-tier { color: rgba(255,255,255,0.4); }
.wd-pkg-price,
.rd-pkg-price{ font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: var(--ink); line-height: 1; letter-spacing: -2px; }
.wd-pkg--featured .wd-pkg-price { color: #fff; }

.wd-pkg--featured .wd-pkg-period { color: rgba(255,255,255,0.4); }

.wd-pkg-divider--white { background: rgba(255,255,255,0.1); }

.wd-pkg-item { font-size: var(--fs-caption); color: var(--ink-mid); }
.wd-pkg--featured .wd-pkg-item { color: rgba(255,255,255,0.75); }


.wd-pricing-note a { color: var(--accent); font-weight: 700; }

/* ── FAQ GRID — card style (matches GEO/Automation/CRM FAQ cards) ── */
.wd-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wd-faq-item { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; }



/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .wd-features-grid { grid-template-columns: repeat(2,1fr); }
  .wd-industries    { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 900px) {
  .wd-process { grid-template-columns: repeat(2,1fr); gap: 24px; }
  .wd-process-line { display: none; }
}
@media (max-width: 768px) {
  .wd-hero { padding: 60px 0 48px; }
  .wd-hero-grid  { grid-template-columns: 1fr; gap: 44px; }
  .wd-features-grid { grid-template-columns: 1fr; }
  .wd-grid-3, .wd-grid-2 { grid-template-columns: 1fr; }
  .wd-band-stats { grid-template-columns: 1fr 1fr; }
  .wd-reviews    { grid-template-columns: 1fr; }
  .wd-packages   { grid-template-columns: 1fr; }
  .wd-faq-grid   { grid-template-columns: 1fr; }
  .wd-industries { grid-template-columns: repeat(2,1fr); }
  .wd-portfolio-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .wd-pkg-badge  { position: static; transform: none; display: inline-block; margin-bottom: 12px; }
}
@media (max-width: 480px) {
  .wd-industries  { grid-template-columns: 1fr 1fr; }
  .wd-process     { grid-template-columns: 1fr; }
}



/* ============================================================
   LOCAL LANDING PAGE — v4 CSS
   Shared styles for all city-specific pages.
   File: local-page-css.css
   Requires style-v4.css loaded first.
   ============================================================ */

/* ── HERO ── */


.lp-breadcrumb a      { color: var(--ink-faint); }
.lp-breadcrumb a:hover { color: var(--ink); }



/* Local badge */
.lp-local-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #EBF8F0; border: 1px solid #B8DECE;
  color: #E8440A; font-size: var(--fs-caption); font-weight: 700;
  padding: 6px 14px; border-radius: 20px; margin-bottom: 16px;
}
.lp-local-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #22C55E;
  flex-shrink: 0; animation: lp-pulse 2s ease-in-out infinite;
}
@keyframes lp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Eyebrow */
.lp-eyebrow { color: var(--accent) !important; }
.lp-eyebrow::before { background: var(--accent) !important; }




/* Hero stat strip */
.lp-hero-stats { display: flex; align-items: center; background: var(--base); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; overflow: hidden; width: fit-content; }
.lp-hero-stat  { padding: 14px 22px; text-align: center; }

.lp-hero-stat-num { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; color: var(--ink); line-height: 1; }
.lp-hero-stat-num--accent { color: var(--accent); }
.lp-hero-stat-lbl { font-size: var(--fs-label); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 3px; line-height: 1.3; }

/* ── CLIENT SHOWCASE ── */
.lp-client-showcase {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: 0 16px 48px rgba(10,30,60,0.1);
}
.lp-showcase-header { padding: 12px 16px; background: var(--base); border-bottom: 1px solid var(--border); }
.lp-showcase-badge  { font-size: var(--fs-label); font-weight: 700; color: var(--accent); }
.lp-showcase-img-wrap { position: relative; }

.lp-showcase-overlay {
  position: absolute; bottom: 0; right: 0;
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: var(--radius-lg) 0 0 0;
  text-align: center;
}
.lp-showcase-stat { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; line-height: 1; }
.lp-showcase-stat-lbl { font-size: var(--fs-label); color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 2px; }
.lp-showcase-footer { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--border); }
.lp-showcase-logo img { height: 28px; width: auto; object-fit: contain; }

.lp-showcase-location { font-size: var(--fs-label); color: var(--ink-faint); }

/* Proof row */
.lp-proof-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.lp-proof-card { background: var(--base); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 12px; text-align: center; }
.lp-proof-icon  { font-size: var(--fs-h4); margin-bottom: 6px; }
.lp-proof-title { font-size: var(--fs-caption); font-weight: 700; color: var(--ink); }
.lp-proof-sub   { font-size: var(--fs-label); color: var(--ink-faint); margin-top: 2px; }

/* ── ACCENTS ── */
.lp-accent      { color: var(--accent); }
.lp-dark-accent { color: #7EC8F0 !important; }

/* ── LOCAL REASONS ── */

.lp-reason { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--border); align-items: start; }
.lp-reason:last-child { border-bottom: none; }
.lp-reason-num { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900; color: var(--border); line-height: 1; padding-top: 2px; }
.lp-reason-title { font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin-bottom: 6px; }

.lp-reason-desc a { color: var(--accent); font-weight: 700; }

/* ── INCLUDES GRID ── */

.lp-include-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; border-top: 3px solid var(--border); transition: border-top-color 0.2s, box-shadow 0.2s; }
.lp-include-card:hover { border-top-color: var(--accent); box-shadow: var(--shadow-sm); }

.lp-include-card--dark:hover { border-top-color: var(--cta); }

.lp-include-title { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: 1.0; margin-bottom: 8px; }
.lp-include-card--dark .lp-include-title { color: #fff; }

.lp-include-card--dark .lp-include-desc { color: rgba(255,255,255,0.55); }

/* ── INDUSTRIES (dark section) ── */

.lp-industry-card { background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.09); border-radius: var(--radius-lg); padding: 22px; transition: background 0.2s; }
.lp-industry-card:hover { background: rgba(255,255,255,0.09); }

.lp-industry-name { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 800; text-transform: uppercase; color: #fff; line-height: 1.1; margin-bottom: 6px; }
.lp-industry-sub  { font-size: var(--fs-caption); color: rgba(255,255,255,0.4); line-height: 1.4; }

/* ── SERVICE AREAS ── */
.lp-cities { max-width: 800px; margin: 0 auto; }
.lp-city--primary {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--accent-pale); border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 16px;
}
.lp-city-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 4px; }
.lp-city-dot--primary { width: 14px; height: 14px; }
.lp-city-name { font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.lp-city--primary .lp-city-name { font-size: var(--fs-h5); font-family: var(--font-display); text-transform: uppercase; }


.lp-cities-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.lp-city { display: flex; align-items: center; gap: 10px; background: var(--base); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; }
.lp-cities-grid .lp-city-dot { width: 8px; height: 8px; background: var(--accent); flex-shrink: 0; }
.lp-cities-grid .lp-city-name { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-mid); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .lp-industries { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .lp-hero-grid    { grid-template-columns: 1fr; gap: 40px; }
  .lp-includes-grid { grid-template-columns: 1fr 1fr; }
  .lp-industries   { grid-template-columns: 1fr 1fr; }
  .lp-cities-grid  { grid-template-columns: 1fr 1fr; }
  .lp-proof-row    { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 480px) {
  .lp-includes-grid { grid-template-columns: 1fr; }
  .lp-cities-grid  { grid-template-columns: 1fr 1fr; }
  .lp-proof-row    { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   SERVICES OVERVIEW PAGE — v4
   Requires style-v4.css loaded first.
   ============================================================ */

/* ── HERO — centered, clean white ── */
.svcs-hero { background: var(--white); padding-bottom: 70px; border-bottom: 1px solid var(--border); }
.svcs-hero-grid-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(74,142,194,0.05) 1px, transparent 1px);
  background-size: 40px 40px; pointer-events: none;
}
.svcs-hero-inner { text-align: center; max-width: 760px; margin: 0 auto; position: relative; }

.svcs-eyebrow { color: var(--accent) !important; }
.svcs-eyebrow::before { background: var(--accent) !important; }

.svcs-hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900; text-transform: uppercase;
  color: var(--ink); line-height: 0.88; letter-spacing: -3px;
  margin-bottom: 24px; margin-top: 10px;
}
.svcs-hero-h1-accent { color: var(--accent); }
.svcs-hero-lead { font-size: var(--fs-lead); line-height: 1.75; color: #5b6c81; font-weight: 400; margin-bottom: 28px; }

/* Hero pills */
.svcs-hero-pills { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.svcs-hero-pill {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--border); border-radius: var(--radius-lg);
  padding: 10px 18px;
}

.svcs-hero-pill-lbl { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--ink-faint); }

/* ── SERVICE CARDS GRID ── */
.svcs-section { padding-bottom: 80px; }


.svcs-card {
  background: var(--base); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 30px;
  display: flex; flex-direction: column; gap: 0;
  border-top: 3px solid var(--border);
  transition: border-top-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.svcs-card:hover,
.cs-problem-card:hover{ border-top-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.svcs-card--featured:hover { border-top-color: var(--cta); box-shadow: 0 24px 48px rgba(10,30,60,0.25); }

.svcs-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }

.svcs-card--featured .svcs-card-num { color: rgba(255,255,255,0.15); }
.svcs-card-icon { font-size: var(--fs-h2); }

.svcs-card-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; text-transform: uppercase; color: var(--ink); line-height: 1.0; margin-bottom: 12px; }
.svcs-card--featured .svcs-card-title { color: #fff; }
.svcs-card-desc  { font-size: var(--fs-small); color: var(--ink-mid); line-height: 1.7; margin-bottom: 18px; flex: 1; }
.svcs-card--featured .svcs-card-desc { color: rgba(255,255,255,0.6); }

.svcs-card-points { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.svcs-point { font-size: var(--fs-caption); color: var(--ink-light); font-weight: 500; }
.svcs-card--featured .svcs-point { color: rgba(255,255,255,0.55); }

.svcs-card-result {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 16px;
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 18px;
}
.svcs-card--featured .svcs-card-result { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.1); }
.svcs-result-num { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; color: var(--ink); line-height: 1; flex-shrink: 0; }
.svcs-card--featured .svcs-result-num { color: #fff; }

.svcs-card--featured .svcs-result-lbl { color: rgba(255,255,255,0.4); }



/* ── ACCENTS ── */
.svcs-accent      { color: var(--accent); }
.svcs-dark-accent { color: #7EC8F0 !important; }

/* ── SYSTEM DIAGRAM ── */
.svcs-system-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.svcs-system-diagram {
  background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 12px;
}

.svcs-sys-node  {
  flex: 1; background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg); padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
}
.svcs-sys-node--accent { background: rgba(74,142,194,0.2); border-color: rgba(74,142,194,0.3); }
.svcs-sys-node--result { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.25); }
.svcs-sys-icon { font-size: var(--fs-h4); flex-shrink: 0; }

.svcs-sys-arrow { font-size: var(--fs-h4); color: rgba(255,255,255,0.25); flex-shrink: 0; }
.svcs-sys-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.2); text-align: center; margin-top: 8px; }

/* ── PROOF / REVIEWS ── */
.svcs-proof-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; margin-top: 20px; }
.svcs-proof-stat  { padding: 18px 12px; text-align: center; border-right: 1px solid var(--border); }
.svcs-proof-stat:last-child { border-right: none; }
.svcs-proof-num   { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; color: var(--ink); line-height: 1; }



.svcs-review  { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; border-left: 3px solid var(--pastel-sky); }
.svcs-review-stars  { color: #F59E0B; font-size: var(--fs-caption); margin-bottom: 10px; }
.svcs-review-text   { font-size: var(--fs-caption); color: var(--ink-mid); line-height: 1.68; font-style: italic; margin-bottom: 12px; }

.svcs-review-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--pastel-sky); color: var(--accent); font-size: var(--fs-label); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.svcs-review-role   { font-size: var(--fs-label); color: var(--ink-faint); }

/* ── NOT SURE STRIP ── */
.svcs-notsure {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  background: var(--base); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 40px 48px;
}
.svcs-notsure-left  { flex: 1; }
.svcs-notsure-right { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }


/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .svcs-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .svcs-system-grid { grid-template-columns: 1fr; gap: 40px; }
  .svcs-notsure     { flex-direction: column; align-items: flex-start; padding: 28px 32px; }
}
@media (max-width: 768px) {
  .svcs-hero-h1  { font-size: var(--fs-display); letter-spacing: -2px; }
  .svcs-grid     { grid-template-columns: 1fr; }
  .svcs-proof-stats { grid-template-columns: 1fr 1fr; }
  .svcs-proof-stat:nth-child(2) { border-right: none; }
  .svcs-proof-stat:nth-child(3) { border-top: 1px solid var(--border); }
}
@media (max-width: 480px) {
  .svcs-hero-pills { gap: 8px; }
  .svcs-hero-pill  { padding: 8px 14px; }
}


/* ============================================================
   WEB REDESIGN PAGE — v4, Purple Theme
   Requires style-v4.css loaded first.
   ============================================================ */

/* ── TOKENS ── */
.rd-page {
  --rd:      #7C3AED;
  --rd-mid:  #6D28D9;
  --rd-pale: #EDE9FE;
  --rd-bg:   #F5F3FF;
}

/* ── HERO ── */


.rd-breadcrumb a      { color: rgba(70,20,180,0.4); }
.rd-breadcrumb a:hover { color: var(--ink); }
.rd-breadcrumb .breadcrumb-sep { color: rgba(124,58,237,0.25); }
.rd-breadcrumb .breadcrumb-current { color: var(--ink-mid); }


.rd-hero-right { }

.rd-eyebrow { color: var(--rd) !important; }
.rd-eyebrow::before { background: var(--rd) !important; }




/* Pills */





/* ── HERO B/A CARD ── */
.rd-hero-ba-card {
  background: var(--white); border-radius: var(--radius-xl);
  border: 1px solid var(--border); overflow: hidden;
  box-shadow: 0 24px 60px rgba(10,30,60,0.12);
}
.rd-ba-card-label { padding: 12px 16px; font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-faint); border-bottom: 1px solid var(--border); background: var(--base); }
.rd-ba-split      { display: grid; grid-template-columns: 1fr 1fr; min-height: 220px; }
.rd-ba-half       { position: relative; overflow: hidden; }
.rd-ba-half--before { background: #F5F5F5; }
.rd-ba-half--after  { }
.rd-ba-tag        { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: var(--fs-label); font-weight: 800; padding: 4px 10px; border-radius: 20px; letter-spacing: 1px; }
.rd-ba-tag--before { background: rgba(239,68,68,0.15); color: #B91C1C; border: 1px solid rgba(239,68,68,0.25); }
.rd-ba-tag--after  { background: rgba(34,197,94,0.15); color: #166534; border: 1px solid rgba(34,197,94,0.25); }
.rd-ba-img-zone    { height: 100%; }
.rd-ba-img-zone img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.rd-ba-img-zone--before { background: #EAEAEA; }
.rd-ba-card-footer { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-top: 1px solid var(--border); }
.rd-ba-footer-stat,
.cs-problem-result{ display: flex; align-items: baseline; gap: 8px; }
.rd-ba-footer-num  { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; color: var(--rd); line-height: 1; }
.rd-ba-footer-lbl  { font-size: var(--fs-caption); color: var(--ink-faint); }
.rd-ba-footer-client { font-size: var(--fs-caption); color: var(--ink-faint); text-align: right; }

/* ── ACCENTS ── */
.rd-stat-accent { color: var(--rd) !important; }
.rd-accent      { color: var(--rd); }
.rd-dark-accent { color: #C4B5FD !important; }
.rd-stats-bar   { background: #F0EBFF; border-color: #D8D0F0; }

/* ── FULL B/A PROJECT ── */
.rd-ba-project { margin-bottom: 48px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); }
.rd-ba-project:last-of-type { margin-bottom: 0; }

.rd-ba-project-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; border-bottom: 1px solid var(--border); background: var(--base); }
.rd-ba-project-tag    { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--rd); margin-bottom: 4px; }
.rd-ba-project-name   { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: 1; }
.rd-ba-project-result { text-align: right; }
.rd-ba-result-num { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: var(--rd); line-height: 1; display: block; }
.rd-ba-result-lbl { font-size: var(--fs-label); color: var(--ink-faint); }

.rd-ba-full-split { display: grid; grid-template-columns: 1fr auto 1fr; }

.rd-ba-panel { padding: 20px 24px; }
.rd-ba-panel-label { font-size: var(--fs-label); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px; }
.rd-ba-panel-label--before { color: #DC2626; }
.rd-ba-panel-label--after  { color: #16A34A; }

/* Image placeholder inside projects */
.rd-img-placeholder { background: #F0EDF8; border: 2px dashed #D8D0F0; border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.rd-img-placeholder--tall { min-height: 200px; }
.rd-img-ph-icon  { font-size: var(--fs-h3); opacity: 0.4; margin-bottom: 8px; }
.rd-img-ph-label { font-size: var(--fs-caption); font-weight: 700; color: var(--rd); margin-bottom: 4px; }
.rd-img-ph-hint  { font-size: var(--fs-label); color: var(--ink-faint); line-height: 1.5; }

.rd-ba-img-real img { width: 100%; border-radius: var(--radius-lg); object-fit: cover; object-position: top; height: 200px; display: block; }

.rd-ba-divider { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 12px; }
.rd-ba-divider-line  { flex: 1; width: 1px; background: var(--border); }
.rd-ba-divider-badge { width: 36px; height: 36px; border-radius: 50%; background: var(--rd-pale); border: 2px solid rgba(124,58,237,0.2); color: var(--rd); font-size: var(--fs-small); display: flex; align-items: center; justify-content: center; margin: 8px 0; font-weight: 800; flex-shrink: 0; }

.rd-ba-panel-issues, .rd-ba-panel-wins { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.rd-issue, .rd-win { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-caption); }
.rd-issue-x { color: #DC2626; font-weight: 800; font-size: var(--fs-small); flex-shrink: 0; }
.rd-win-check { color: #16A34A; font-weight: 800; font-size: var(--fs-small); flex-shrink: 0; }

.rd-more-coming { text-align: center; padding: 40px; background: var(--base); border: 2px dashed var(--border); border-radius: var(--radius-xl); margin-top: 24px; }
.rd-more-icon { font-size: var(--fs-h2); margin-bottom: 10px; opacity: 0.4; }
.rd-more-text { font-size: var(--fs-body); font-weight: 700; color: var(--ink-mid); margin-bottom: 4px; }
.rd-more-sub  { font-size: var(--fs-caption); color: var(--ink-faint); }

/* ── 7 SIGNS GRID ── */

.rd-sign-card  { background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.09); border-radius: var(--radius-lg); padding: 26px; transition: background 0.2s; }
.rd-sign-card:hover { background: rgba(255,255,255,0.09); }
.rd-sign-card--featured { background: rgba(196,181,253,0.12); border-color: rgba(196,181,253,0.25); }

.rd-sign-num--white { color: rgba(196,181,253,0.4); }

.rd-sign-title { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 800; text-transform: uppercase; color: #fff; line-height: 1.1; margin-bottom: 10px; }
.rd-sign-title--white { color: #C4B5FD; }

.rd-sign-desc--white { color: rgba(196,181,253,0.7); }

/* ── FIX ROWS ── */
.rd-fixes { display: flex; flex-direction: column; }
.rd-fix-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); }
.rd-fix-row--last { border-bottom: none; }
.rd-fix-label-before, .rd-fix-label-after { font-size: var(--fs-label); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 4px; }
.rd-fix-label-before { color: #DC2626; }
.rd-fix-label-after  { color: #16A34A; }
.rd-fix-val      { font-size: var(--fs-body); color: var(--ink-mid); font-weight: 500; }
.rd-fix-val--accent { color: var(--rd); font-weight: 700; }
.rd-fix-before   { padding-right: 16px; }
.rd-fix-after    { padding-left: 16px; }
.rd-fix-arrow    { font-size: var(--fs-h4); color: var(--rd); opacity: 0.4; flex-shrink: 0; padding: 0 8px; }

/* ── PROCESS ── */



.rd-process-dot  { width: 40px; height: 40px; border-radius: 50%; background: var(--white); border: 2px solid var(--rd); color: var(--rd); font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 900; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }

.rd-process-phase { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--rd); text-align: center; margin-bottom: 10px; }
.rd-process-phase--dark { color: var(--ink); }
.rd-process-title { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: 1; text-align: center; margin-bottom: 10px; }


/* ── PRICING ── */

.rd-pkg { background: var(--base); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; position: relative; }
.rd-pkg--featured { background: var(--ink); border-color: var(--ink); }


.rd-pkg--featured .rd-pkg-tier { color: rgba(255,255,255,0.4); }

.rd-pkg--featured .rd-pkg-price { color: #fff; }

.rd-pkg--featured .rd-pkg-period { color: rgba(255,255,255,0.4); }

.rd-pkg-divider--white { background: rgba(255,255,255,0.1); }

.rd-pkg-item   { font-size: var(--fs-caption); color: var(--ink-mid); }
.rd-pkg--featured .rd-pkg-item { color: rgba(255,255,255,0.75); }


/* ── REVIEWS ── */


.rd-review-stars  { color: #F59E0B; font-size: var(--fs-caption); margin-bottom: 12px; }


.rd-review-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(196,181,253,0.2); color: #C4B5FD; font-size: var(--fs-caption); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.rd-review-role   { font-size: var(--fs-label); color: rgba(255,255,255,0.35); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .rd-signs-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .rd-process    { grid-template-columns: repeat(2,1fr); gap: 24px; }
  .rd-process-line { display: none; }
}
@media (max-width: 768px) {
  .rd-hero-grid   { grid-template-columns: 1fr; gap: 40px; }
  .rd-ba-full-split { grid-template-columns: 1fr; }
  .rd-ba-divider  { flex-direction: row; padding: 12px 0; }
  .rd-ba-divider-line { flex: 1; height: 1px; width: auto; }
  .rd-ba-divider-badge { margin: 0 8px; }
  .rd-signs-grid  { grid-template-columns: 1fr 1fr; }
  .rd-packages    { grid-template-columns: 1fr; }
  .rd-reviews     { grid-template-columns: 1fr; }
  .rd-process     { grid-template-columns: 1fr; }
  .rd-pkg-badge   { position: static; transform: none; display: inline-block; margin-bottom: 12px; }
}
@media (max-width: 480px) {
  .rd-ba-split    { grid-template-columns: 1fr; }
  .rd-signs-grid  { grid-template-columns: 1fr; }
  .rd-fix-row     { grid-template-columns: 1fr; gap: 8px; }
  .rd-fix-arrow   { display: none; }
}


/* ============================================================
   CONTACT PAGE — v4
   Sky blue hero, white main section, map left, form right.
   Requires style-v4.css loaded first.
   ============================================================ */

/* ── HERO — sky blue, matches homepage ── */
.ct-hero { background: #EBF4FC; padding-bottom: 60px; }
.ct-hero-grid-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(74,142,194,0.08) 1px, transparent 1px);
  background-size: 36px 36px; pointer-events: none;
}

.ct-hero-grid,
.css-hero-grid{ display: grid; grid-template-columns: .85fr 1.15fr; gap: 44px; align-items: center; }
/* when a case study has no results grid, the design sits beside the name */
.css-hero-shot{min-width:0}
.css-hero-shot .css-hero-screenshot{width:100%;max-height:520px;border-radius:16px;
  box-shadow:0 30px 60px -34px rgba(10,30,60,.45)}
@media (max-width:900px){
  .css-hero-grid{grid-template-columns:1fr;gap:34px}
  .css-hero-shot .css-hero-screenshot{max-height:280px}
}
.ct-hero-right { display: flex; flex-direction: column; gap: 14px; }

/* Eyebrow */
.ct-eyebrow { color: var(--accent) !important; }
.ct-eyebrow::before { background: var(--accent) !important; }

.ct-hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900; text-transform: uppercase;
  color: var(--ink); line-height: 0.9; letter-spacing: -2px;
  margin-bottom: 20px; margin-top: 8px;
}
.ct-hero-lead { font-size: var(--fs-lead); line-height: 1.75; color: #5b6c81; font-weight: 400; max-width: 440px; }

/* Contact pills */

.ct-contact-pill {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.7); border: 1px solid rgba(74,142,194,0.2);
  border-radius: var(--radius-lg); padding: 12px 16px;
  text-decoration: none; transition: background 0.2s, border-color 0.2s;
  cursor: default;
}
a.ct-contact-pill { cursor: pointer; }
a.ct-contact-pill:hover { background: var(--white); border-color: var(--accent); }
.ct-contact-pill-icon  { font-size: var(--fs-h4); flex-shrink: 0; }
.ct-contact-pill-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-faint); margin-bottom: 2px; }


/* Socials */

.ct-socials-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-faint); flex-shrink: 0; }
.ct-socials { display: flex; gap: 8px; }

.ct-social {
  width: 38px; height: 38px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--border);
  color: var(--ink-faint); text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ct-social svg { width: 16px; height: 16px; }
.ct-social--fb:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.ct-social--ig:hover { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: #dc2743; color: #fff; }

.ct-social--yt:hover { background: #FF0000; border-color: #FF0000; color: #fff; }
.ct-social--li:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; }


/* ── MAIN SECTION ── */
.ct-main-section { padding-top: 0 !important; }
.ct-main-grid {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 40px; align-items: start;
  padding-top: 56px;
}


/* ── MAP COLUMN ── */


.ct-map-wrap {
  border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.ct-map-wrap iframe { display: block; }

/* NAP block */
.ct-nap { background: var(--base); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; }
.ct-nap-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.ct-nap-item:last-child { border-bottom: none; }
.ct-nap-icon  { font-size: var(--fs-h5); flex-shrink: 0; margin-top: 2px; }
.ct-nap-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-faint); margin-bottom: 3px; }
.ct-nap-value { font-size: var(--fs-small); color: var(--ink); line-height: 1.5; font-style: normal; }
.ct-nap-link  { color: var(--accent); font-weight: 700; text-decoration: none; }
.ct-nap-link:hover { color: var(--ink); }

/* Trust strip */
.ct-trust-strip {
  display: flex; align-items: center;
  background: var(--base); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ct-trust-item { flex: 1; padding: 14px 10px; text-align: center; }
.ct-trust-div  { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; }
.ct-trust-num  { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 900; color: var(--accent); line-height: 1; }


/* Review */

.ct-review-stars { color: #F59E0B; font-size: var(--fs-caption); margin-bottom: 8px; letter-spacing: 2px; }
.ct-review-text  { font-size: var(--fs-caption); color: var(--ink-mid); line-height: 1.65; font-style: italic; margin-bottom: 8px; }



/* ── FORM COLUMN ── */


.ct-form-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 36px;
  box-shadow: 0 8px 32px rgba(10,30,60,0.07);
}

.ct-form-head   { margin-bottom: 28px; }
.ct-form-title  { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; text-transform: uppercase; color: var(--ink); line-height: 1; margin-bottom: 6px; }
.ct-form-sub    { font-size: var(--fs-caption); color: var(--ink-faint); }

/* Fields */
.ct-field-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ct-field      { margin-bottom: 12px; }
.ct-field-row .ct-field { margin-bottom: 0; }


.ct-req   { color: var(--cta); }
.ct-opt   { color: var(--ink-faint); font-weight: 400; font-size: var(--fs-caption); }

.ct-input {
  width: 100%; padding: 12px 15px;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  font-size: var(--fs-body); font-family: var(--font-body); color: var(--ink);
  background: var(--white); transition: border-color 0.2s, box-shadow 0.2s;
  outline: none; -webkit-appearance: none; appearance: none;
}
.ct-input:focus     { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(74,142,194,0.1); }
.ct-input--error    { border-color: #ef4444 !important; box-shadow: 0 0 0 4px rgba(239,68,68,0.08) !important; }
.ct-select          { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238AA0B8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.ct-textarea        { resize: vertical; min-height: 100px; line-height: 1.6; }

.ct-error-msg  { font-size: var(--fs-caption); color: #ef4444; margin-bottom: 12px; display: none; }
.ct-submit-btn { width: 100%; justify-content: center; margin-bottom: 12px; }
.ct-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ct-privacy    { font-size: var(--fs-caption); color: var(--ink-faint); text-align: center; }

/* Alt booking link */
.ct-alt { margin-top: 12px; }
.ct-alt-or { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ct-alt-or::before, .ct-alt-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.ct-alt-or span { font-size: var(--fs-label); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.ct-alt-link {
  display: flex; align-items: center; gap: 14px;
  background: var(--base); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 18px;
  text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.ct-alt-link:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.ct-alt-icon  { font-size: var(--fs-h4); flex-shrink: 0; }


.ct-alt-arrow { font-size: var(--fs-h5); color: var(--accent); margin-left: auto; }

/* Success state */
.ct-success {
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px 20px; min-height: 360px;
}
.ct-success-check  { font-size: var(--fs-h1); margin-bottom: 18px; }
.ct-success-title  { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.ct-success-body   { font-size: var(--fs-body); color: var(--ink-mid); line-height: 1.7; max-width: 380px; margin-bottom: 28px; }
.ct-success-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
.ct-success-actions a { justify-content: center; }


/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .ct-main-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 768px) {
  .ct-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .ct-main-grid { grid-template-columns: 1fr; }
  .ct-form-card { padding: 24px 20px; }
  .ct-field-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ct-socials-wrap { flex-wrap: wrap; }
  .ct-hero          { padding: 56px 0 48px; }
}






Qa/* ============================================================
   QUIZ CTA BLOCK — .qblock
   Usage: <div class="qblock qblock--[color]">
   Colors: --orange  --sage  --sky  --lavender
   ============================================================ */

.qblock {
  border-radius: 16px;
  padding: 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1.5px solid transparent;
}

/* Dot texture overlay */
.qblock-dots {
  position: absolute;
  inset: 0;
  background-size: 22px 22px;
  pointer-events: none;
}

.qblock-inner { position: relative; }

.qblock-eyebrow {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}

.qblock-q {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.0;
  letter-spacing: -1px;
  margin-bottom: 28px;
}

.qblock-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 600px;
  margin: 20px auto;
}

.qblock-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--navy);
  padding: 11px 22px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-decoration: none;
  border: 1.5px solid transparent;
}

.qblock-pill:hover {
  transform: translateY(-2px);
  color: #fff;
}

/* ── Color: Orange / Peach ── */
.qblock--orange {
  background: #FDE8D0;
  border-color: #F5C89A;
}
.qblock--orange .qblock-dots {
  background-image: radial-gradient(circle, rgba(200,90,16,0.09) 1.5px, transparent 1.5px);
}
.qblock--orange .qblock-eyebrow { color: #C05C10; }
.qblock--orange .qblock-q span  { color: #E8440A; }
.qblock--orange .qblock-pill     { border-color: #F5C89A; }
.qblock--orange .qblock-pill:hover { background: #E8440A; border-color: #E8440A; }

/* ── Color: Sage Green ── */

.qblock--sage .qblock-dots {
  background-image: radial-gradient(circle, rgba(42,122,80,0.09) 1.5px, transparent 1.5px);
}
.qblock--sage .qblock-eyebrow { color: #2A7A50; }
.qblock--sage .qblock-q span  { color: #2A7A50; }
.qblock--sage .qblock-pill     { border-color: #BFE0CA; }
.qblock--sage .qblock-pill:hover { background: #2A7A50; border-color: #2A7A50; }

/* ── Color: Sky Blue ── */

.qblock--sky .qblock-dots {
  background-image: radial-gradient(circle, rgba(74,142,194,0.09) 1.5px, transparent 1.5px);
}
.qblock--sky .qblock-eyebrow { color: #4A8EC2; }
.qblock--sky .qblock-q span  { color: #4A8EC2; }
.qblock--sky .qblock-pill     { border-color: #C8DFF2; }
.qblock--sky .qblock-pill:hover { background: #4A8EC2; border-color: #4A8EC2; }

/* ── Color: Lavender ── */

.qblock--lavender .qblock-dots {
  background-image: radial-gradient(circle, rgba(107,63,191,0.09) 1.5px, transparent 1.5px);
}
.qblock--lavender .qblock-eyebrow { color: #6B3FBF; }
.qblock--lavender .qblock-q span  { color: #6B3FBF; }
.qblock--lavender .qblock-pill     { border-color: #D4C8F0; }
.qblock--lavender .qblock-pill:hover { background: #6B3FBF; border-color: #6B3FBF; }

/* ── Color: Mint ── */

.qblock--mint .qblock-dots {
  background-image: radial-gradient(circle, rgba(232,68,10,0.09) 1.5px, transparent 1.5px);
}
.qblock--mint .qblock-eyebrow { color: #E8440A; }
.qblock--mint .qblock-q span  { color: #E8440A; }
.qblock--mint .qblock-pill     { border-color: #A8DDD4; }
.qblock--mint .qblock-pill:hover { background: #E8440A; border-color: #E8440A; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .qblock { padding: 36px 24px; }
  .qblock-pill { font-size: var(--fs-caption); padding: 10px 16px; }
}

/* ── qblock 2-step styles ── */
/* Append to bottom of style.css */

.qblock-step { transition: opacity 0.25s ease; }
.qblock-step--hidden { display: none; }

/* Solution text */
.qblock-solution-text {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 900;
  text-transform: uppercase;
  color: #0A1E3C;
  line-height: 1.15;
  max-width: 600px;
  margin: 0 auto 24px;
}

/* Form */

.qblock-form-intro {
  font-size: var(--fs-small);
  color: rgba(100,60,10,0.65);
  margin-bottom: 16px;
  line-height: 1.5;
}
.qblock-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.qblock-input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid #F5C89A;
  border-radius: 10px;
  font-size: var(--fs-body);
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}
.qblock-input:focus { border-color: #E8440A; box-shadow: 0 0 0 3px rgba(232,68,10,0.1); }
.qblock-input::placeholder { color: rgba(100,60,10,0.4); }
.qblock-submit-btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
}
.qblock-back-btn {
  background: none;
  border: none;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: rgba(100,60,10,0.5);
  cursor: pointer;
  padding: 0;
  display: block;
  margin: 0 auto;
  transition: color 0.15s;
}
.qblock-back-btn:hover { color: #0A1E3C; }

/* Thank you */
.qblock-thankyou { padding: 16px 0; }
.qblock-thankyou-icon  { font-size: var(--fs-h1); margin-bottom: 16px; }
.qblock-thankyou-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900; text-transform: uppercase; color: #0A1E3C; line-height: 1; margin-bottom: 12px; }
.qblock-thankyou-msg   { font-size: var(--fs-body); color: rgba(100,60,10,0.65); line-height: 1.6; max-width: 440px; margin: 0 auto; }

/* Mobile */
@media (max-width: 600px) {
  .qblock-fields { grid-template-columns: 1fr; }
}

/* ── Full navy CTA ── */
.cs-cta-full {
  background: #0A1E3C;
  border-radius: 20px;
  padding: 72px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cs-cta-full-texture {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
}
.cs-cta-full-inner     { position: relative; }
.cs-cta-full-eyebrow   { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 16px; }
.cs-cta-full-title     { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; text-transform: uppercase; color: #fff; line-height: 1.0; letter-spacing: -1px; margin-bottom: 16px; }
.cs-cta-full-title span { color: #E8440A; }
.cs-cta-full-desc      { font-size: var(--fs-body); color: rgba(255,255,255,0.5); max-width: 500px; margin: 0 auto 40px; line-height: 1.6; }
.cs-cta-full-stats     { display: flex; justify-content: center; align-items: center; gap: 0; margin-bottom: 40px; }
.cs-cta-full-stat      { text-align: center; padding: 0 32px; }
.cs-cta-full-stat-num  { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900; color: #fff; line-height: 1; white-space: nowrap; }
.cs-cta-full-stat-lbl  { font-size: var(--fs-label); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-top: 6px; }
.cs-cta-full-stat-div  { width: 1px; height: 40px; background: rgba(255,255,255,0.12); flex-shrink: 0; }
.cs-cta-full-actions   { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }

@media (max-width: 768px) {
  .cs-cta-full         { padding: 48px 24px; }
  .cs-cta-full-stats   { flex-wrap: wrap; gap: 20px; }
  .cs-cta-full-stat-div { display: none; }
  .cs-cta-full-stat    { padding: 0 16px; }
}








/* ============================================================
   CASE STUDIES v5 — PASTE AT VERY BOTTOM OF style.css
   No !important — position at bottom = cascade wins
   ============================================================ */

/* ── Hero stats bar ── */
.cs-hero-inner { text-align: center; max-width: 800px; margin: 0 auto; position: relative; }
.cs-hero-stats { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0; background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; width: fit-content; margin: 32px auto 0; }
.cs-hero-stat  { padding: 18px 28px; text-align: center; }
.cs-hero-stat-div { width: 1px; height: 44px; background: var(--border); flex-shrink: 0; }
.cs-hero-stat-num { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900; color: var(--ink); line-height: 1; display: block; }
.cs-hero-stat-lbl { font-size: var(--fs-label); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 4px; display: block; }

/* ── Section eyebrow ── */
.cs-section-eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--ink-faint); margin-bottom: 16px; }

.cs-section-eyebrow-line { height: 1.5px; width: 32px; background: currentColor; flex-shrink: 0; }
.cs-section-h2 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; text-transform: uppercase; color: var(--ink); line-height: 0.95; letter-spacing: -1px; margin-bottom: 36px; }
.cs-section-h2.text-center { text-align: center; }
.cs-accent { color: var(--accent); }

/* ── Featured C ── */
.cs-featured-wrap { background: #0A1E3C; padding: 60px 0; }
.cs-feat-c { background: #0A1E3C; border-radius: 20px; border: 1px solid rgba(255,255,255,0.07); padding: 52px 48px; position: relative; overflow: hidden; }
.cs-feat-c-watermark { position: absolute; right: 240px; top: -30px; font-family: var(--font-display); font-size: 200px; font-weight: 900; color: rgba(255,255,255,0.025); line-height: 1; letter-spacing: -6px; pointer-events: none; user-select: none; text-transform: uppercase; }
.cs-feat-c-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; position: relative; }
.cs-feat-c-eyebrow { display: flex; align-items: center; gap: 12px; font-size: var(--fs-label); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 14px; }
.cs-feat-c-eyebrow-line { width: 28px; height: 1.5px; background: rgba(255,255,255,0.2); flex-shrink: 0; }
.cs-feat-c-tag { font-size: var(--fs-label); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #7EC8F0; margin-bottom: 10px; }
.cs-feat-c-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900; text-transform: uppercase; color: #fff; line-height: 0.95; letter-spacing: -1px; margin-bottom: 14px; }
.cs-feat-c-title-accent { color: #E8440A; font-size: 0.6em; opacity: 0.85; display: block; margin-top: 8px; }

.cs-feat-c-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.cs-feat-c-pill { background: rgba(255,255,255,0.07); border: 0.5px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.55); font-size: var(--fs-caption); font-weight: 600; padding: 5px 14px; border-radius: 20px; }

.cs-feat-c-stat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px 18px; }
.cs-feat-c-stat--highlight { background: #E8440A; border-color: #E8440A; }
.cs-feat-c-stat-num { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; color: #fff; line-height: 1; letter-spacing: -1px; }
.cs-feat-c-stat-lbl { font-size: var(--fs-label); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-top: 4px; }
.cs-feat-c-stat--highlight .cs-feat-c-stat-lbl { color: rgba(255,255,255,0.75); }

/* ── Problem cards ── */

.cs-problem-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; transition: box-shadow 0.25s, transform 0.25s; border-top: 3px solid var(--border); }

.cs-problem-q { /* blog hero title treatment (.rwd-ba-hero h1) — Archivo Black caps read too shouty for questions */ font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 700; letter-spacing: -.6px; text-transform: none; color: var(--ink); line-height: 1.3; }
.cs-problem-arrow { font-size: var(--fs-h3); color: var(--border); }
.cs-problem-label { font-size: var(--fs-label); color: var(--ink-mid); text-transform: uppercase; letter-spacing: 1px; }
.cs-problem-client { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: 1.0; }

.cs-problem-result-num { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900; color: var(--accent); line-height: 1; }
.cs-problem-result-lbl { font-size: var(--fs-label); color: var(--ink-mid); }
.cs-problem-tag { font-size: var(--fs-label); color: var(--ink-mid); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }

/* ── Spotlight cards ── */
.cs-spotlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-spotlight-grid--3 { grid-template-columns: repeat(3,1fr); }
.cs-spotlight-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; text-decoration: none; transition: box-shadow 0.25s, transform 0.25s; display: flex; flex-direction: column; }
.cs-spotlight-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.cs-spotlight-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 0.4s; }
.cs-spotlight-card:hover .cs-spotlight-img img { transform: scale(1.04); }
.cs-spotlight-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(10,30,60,0.85)); padding: 20px 18px 14px; }

.cs-spotlight-stat-lbl { font-size: var(--fs-label); color: rgba(255,255,255,0.65); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-top: 2px; }
.cs-spotlight-body { padding: 18px 20px; }

.cs-spotlight-name { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: 1.1; margin-bottom: 4px; }
.cs-spotlight-services { font-size: var(--fs-caption); color: var(--ink-faint); margin-bottom: 10px; }
.cs-spotlight-link { font-size: var(--fs-caption); font-weight: 700; color: var(--accent); }

/* ── qblock — updated pill hover fix ── */
.qblock-pill:hover { transform: translateY(-2px); color: #fff; }
.qblock-pill.active { transform: translateY(-2px); color: #fff; }
.qblock--orange .qblock-pill:hover,
.qblock--orange .qblock-pill.active { background: #E8440A; border-color: #E8440A; color: #fff; }
.qblock--sage   .qblock-pill:hover,
.qblock--sage   .qblock-pill.active { background: #2A7A50; border-color: #2A7A50; color: #fff; }
.qblock--sky    .qblock-pill:hover,
.qblock--sky    .qblock-pill.active { background: #4A8EC2; border-color: #4A8EC2; color: #fff; }

/* ── Quiz 2-step ── */
.qblock-step { display: block; }
.qblock-step--hidden { display: none; }
.qblock-solution-text { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; text-transform: uppercase; color: #0A1E3C; line-height: 1.15; max-width: 600px; margin: 0 auto 20px; }
.qblock-form-intro { font-size: var(--fs-small); color: rgba(100,60,10,0.65); margin-bottom: 16px; line-height: 1.5; }
.qblock-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 600px; margin: 20px auto; }
.qblock-input { width: 100%; padding: 13px 16px; border: 1.5px solid #F5C89A; border-radius: 10px; font-size: var(--fs-body); font-family: var(--font-body); color: var(--ink); background: #fff; outline: none; transition: border-color 0.2s; }
.qblock-input:focus { border-color: #E8440A; box-shadow: 0 0 0 3px rgba(232,68,10,0.1); }
.qblock-input::placeholder { color: rgba(100,60,10,0.4); }
.qblock-submit-btn { width: 100%; justify-content: center; display: flex; max-width: 400px; margin: 10px auto;}
.qblock-back-btn { background: none; border: none; font-size: var(--fs-caption); font-weight: 600; color: rgba(100,60,10,0.5); cursor: pointer; padding: 0; display: block; margin: 0 auto; transition: color 0.15s; }
.qblock-back-btn:hover { color: #0A1E3C; }
.qblock-thankyou { padding: 16px 0; }
.qblock-thankyou-icon  { font-size: var(--fs-h1); margin-bottom: 16px; display: block; }
.qblock-thankyou-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900; text-transform: uppercase; color: #0A1E3C; line-height: 1; margin-bottom: 12px; }
.qblock-thankyou-msg   { font-size: var(--fs-body); color: rgba(100,60,10,0.65); line-height: 1.6; max-width: 440px; margin: 0 auto; }

/* ── List layout + sidebar ── */
.cs-list-header  { margin-bottom: 28px; }
.cs-list-subhead { font-size: var(--fs-body); color: var(--ink-mid); margin-top: 6px; }
.cs-list-layout  { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }
.cs-list-main    { min-width: 0; }
.cs-list-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; }
.cs-sidebar-glance,
.cs-sidebar-filters-box{ background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px; }

.cs-sidebar-heading { font-size: var(--fs-label); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px; }
.cs-sidebar-stat { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border); }
.cs-sidebar-stat:last-child { border-bottom: none; }
.cs-sidebar-stat-lbl { font-size: var(--fs-caption); color: var(--ink-mid); }
.cs-sidebar-stat-num { font-size: var(--fs-body); font-weight: 700; color: var(--accent); }
.cs-sidebar-filter-list { display: flex; flex-direction: column; gap: 2px; }
.cs-sidebar-filter-item { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: var(--fs-caption); color: var(--ink); transition: background 0.12s; }
.cs-sidebar-filter-item:hover { background: var(--surface); }
.cs-sidebar-filter-item--active { background: #EBF4FC; color: var(--accent); font-weight: 600; }
.cs-sidebar-filter-count { font-size: var(--fs-label); font-weight: 700; background: var(--surface); color: var(--ink-faint); padding: 2px 7px; border-radius: 10px; }
.cs-sidebar-filter-item--active .cs-sidebar-filter-count { background: var(--accent); color: #fff; }
.cs-audit-sidebar { background: #0A1E3C; border-radius: 14px; padding: 22px; text-align: center; }
.cs-audit-sidebar-tag   { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 10px; }
.cs-audit-sidebar-title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 900; text-transform: uppercase; color: #fff; line-height: 1.1; margin-bottom: 10px; }
.cs-audit-sidebar-desc  { font-size: var(--fs-caption); color: rgba(255,255,255,0.55); line-height: 1.6; margin-bottom: 16px; }
.cs-audit-sidebar .btn--orange { display: block; }

/* ── Filter pills ── */
.cs-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.cs-filter-btn { background: #fff; border: 1.5px solid var(--border); color: var(--ink-mid); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; padding: 6px 14px; border-radius: 20px; cursor: pointer; white-space: nowrap; transition: all 0.15s; font-family: var(--font-body); }
.cs-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.cs-filter-btn--active { background: #0A1E3C; border-color: #0A1E3C; color: #fff; }

/* ── Card list — override old v4 card entirely ── */
.cs-card-list { display: flex; flex-direction: column; overflow: hidden; gap: 0; }
.cs-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--border);
  border-left: 4px solid transparent;
  border-top: none;
  border-right: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background 0.15s, padding 0.15s;
  overflow: visible;
  min-height: unset;
}
.cs-card:first-child { border-top: 1px solid var(--border); }
.cs-card:hover {
  background: var(--card-bg, #EBF4FC);
  border-left-color: var(--card-accent, #4A8EC2);
  border-bottom-color: transparent;
  padding-left: 12px;
  border-radius: 0 10px 10px 0;
  box-shadow: none;
  transform: none;
}
.cs-card-thumb {
  width: 44px; height: 44px; border-radius: 8px; overflow: hidden;
  flex-shrink: 0; background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  padding: 0; min-height: unset;
}
.cs-card-thumb img { width: 44px; height: 44px; object-fit: cover; object-position: top center; border-radius: 8px; display: block; }
.cs-card-thumb-fallback { width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; flex-shrink: 0; }
.cs-card-body { padding: 0 14px; min-width: 0; display: block; }
.cs-card-tag { font-size: var(--fs-label); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
.cs-card-name { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 900; text-transform: uppercase; line-height: 1.1; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.cs-card:hover .cs-card-name { color: var(--ink); }
.cs-card-services { font-size: var(--fs-label); color: var(--ink-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-card-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-left: 10px; border-left: none; min-width: unset; }
.cs-card-stat { text-align: right; }
.cs-card-stat-num { font-size: var(--fs-body); font-weight: 800; line-height: 1; color: #4A8EC2; letter-spacing: -0.5px; } /* one color for every row (was per-row --card-accent) */
.cs-card-stat-lbl { font-size: var(--fs-label); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); }
.cs-card-view { font-size: var(--fs-label); font-weight: 700; color: var(--card-accent, #4A8EC2); white-space: nowrap; padding: 5px 10px; border: 1.5px solid var(--card-accent, #4A8EC2); border-radius: 20px; transition: all 0.15s; flex-shrink: 0; }
.cs-card:hover .cs-card-view { background: var(--card-accent, #4A8EC2); color: #fff; }

/* ── Full navy CTA ── */
.cs-cta-full { background: #0A1E3C; border-radius: 20px; padding: 72px 48px; text-align: center; position: relative; overflow: hidden; }
.cs-cta-full-texture { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.cs-cta-full-inner    { position: relative; }
.cs-cta-full-eyebrow  { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 16px; }
.cs-cta-full-title    { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; text-transform: uppercase; color: #fff; line-height: 1.0; letter-spacing: -1px; margin-bottom: 16px; }
.cs-cta-full-title span { color: #E8440A; }
.cs-cta-full-desc     { font-size: var(--fs-body); color: rgba(255,255,255,0.5); max-width: 500px; margin: 0 auto 40px; line-height: 1.6; }
.cs-cta-full-stats    { display: flex; justify-content: center; align-items: center; gap: 0; margin-bottom: 40px; }
.cs-cta-full-stat     { text-align: center; padding: 0 32px; }
.cs-cta-full-stat-num { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900; color: #fff; line-height: 1; }
.cs-cta-full-stat-lbl { font-size: var(--fs-label); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-top: 6px; }
.cs-cta-full-stat-div { width: 1px; height: 40px; background: rgba(255,255,255,0.12); flex-shrink: 0; }
.cs-cta-full-actions  { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .cs-list-layout       { grid-template-columns: 1fr; }
  .cs-list-sidebar      { position: static; display: grid; grid-template-columns: 1fr 1fr; }
  .cs-audit-sidebar     { grid-column: 1 / -1; }
  .cs-spotlight-grid--3 { grid-template-columns: 1fr 1fr; }
  .cs-feat-c-inner      { grid-template-columns: 1fr; }
  .cs-feat-c-stats      { flex-direction: row; flex-wrap: wrap; }
  .cs-feat-c-stat       { flex: 1 1 calc(50% - 4px); }
  .cs-feat-c-watermark  { display: none; }
}
@media (max-width: 768px) {
  .cs-hero-stats        { flex-wrap: wrap; width: auto; }
  .cs-problem-grid      { grid-template-columns: 1fr; }
  .cs-spotlight-grid, .cs-spotlight-grid--3 { grid-template-columns: 1fr; }
  .cs-list-sidebar      { grid-template-columns: 1fr; }
  .cs-feat-c            { padding: 32px 24px; }
  .cs-card              { grid-template-columns: 48px 1fr; padding: 10px 0; }
  .cs-card:hover        { padding-left: 10px; }
  .cs-card-right        { display: none; }
  .cs-card-name         { font-size: var(--fs-caption); white-space: normal; }
  .qblock               { padding: 36px 24px; }
  .qblock-fields        { grid-template-columns: 1fr; }
  .cs-cta-full          { padding: 48px 24px; }
  .cs-cta-full-stats    { flex-wrap: wrap; gap: 20px; }
  .cs-cta-full-stat-div { display: none; }
  .cs-cta-full-stat     { padding: 0 16px; }
}
@media (max-width: 480px) {
  .cs-hero-stat         { padding: 12px 16px; }
  .cs-hero-stat-num     { font-size: var(--fs-h4); }
}

.qblock {
  border-radius: 16px !important;
  padding: 56px 48px !important;
  text-align: center !important;
}
.qblock-eyebrow { text-align: center; display: block; }
.qblock-q { text-align: center; }





/* ============================================================
   SINGLE CASE STUDY PAGE — v4
   Add these rules to case-studies-v4-css.css, or load as
   single-case-study-css.css on individual case study pages.
   Requires style-v4.css loaded first.
   ============================================================ */

/* ── SINGLE HERO ── */
.css-page { }
.css-hero { background: #EBF4FC; padding-bottom: 60px; }
.css-hero-grid-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(74,142,194,0.07) 1px, transparent 1px);
  background-size: 36px 36px; pointer-events: none;
}

.css-hero-left { }




.css-hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 900; text-transform: uppercase;
  color: var(--ink); line-height: 0.9; letter-spacing: -2px;
  margin-bottom: 14px; margin-top: 8px;
}
.css-hero-tagline { font-size: var(--fs-h5); color: var(--accent); font-weight: 700; margin-bottom: 18px; }

.css-services { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.css-service-tag { background: rgba(74,142,194,0.1); border: 1px solid rgba(74,142,194,0.2); color: var(--ink-mid); font-size: var(--fs-caption); font-weight: 600; padding: 4px 12px; border-radius: 20px; }

.css-hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.css-back-link { font-size: var(--fs-caption); color: var(--ink-faint); text-decoration: none; font-weight: 600; }
.css-back-link:hover { color: var(--accent); }

/* Results grid in hero */

.css-result-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; text-align: center; }
.css-result-num { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: var(--ink); line-height: 1; letter-spacing: -1px; }
.css-result-lbl { font-size: var(--fs-label); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; }

/* ── BROWSER FRAME ── */

.css-hero-img .container { padding-top: 0; }







/* ── CONTENT SECTIONS ── */
.css-content-grid { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: start; }
.css-section-h2 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; text-transform: uppercase; color: var(--ink); line-height: 0.95; letter-spacing: -1px; margin-top: 10px; margin-bottom: 0; }
.css-section-h2.text-center { text-align: center; }

.css-dark-accent { color: #7EC8F0 !important; }
.css-content-body p { font-size: var(--fs-body); color: var(--ink-mid); line-height: 1.8; margin-bottom: 16px; }
.css-content-body p:last-child { margin-bottom: 0; }

/* WP Editor content */








/* ── BEFORE / AFTER ── */







/* ── RESULTS BAND ── */
.css-results-band-header { text-align: center; margin-bottom: 40px; }
.css-results-band { display: grid; grid-template-columns: repeat(4,1fr); }
.css-result-band-cell { padding: 28px 16px; text-align: center; border-right: 0.5px solid rgba(255,255,255,0.08); }
.css-result-band-cell:last-child { border-right: none; }
.css-result-band-num { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: #fff; line-height: 1; letter-spacing: -2px; margin-bottom: 8px; }
.css-result-band-lbl { font-size: var(--fs-caption); color: rgba(255,255,255,0.45); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .css-hero-grid    { grid-template-columns: 1fr; gap: 36px; }
  .css-results-grid { grid-template-columns: 1fr 1fr; }
  .css-content-grid { grid-template-columns: 1fr; gap: 24px; }
  .css-ba-grid      { grid-template-columns: 1fr; }
  .css-results-band { grid-template-columns: 1fr 1fr; }
  .css-result-band-cell:nth-child(2) { border-right: none; }
  .css-result-band-cell:nth-child(3) { border-top: 0.5px solid rgba(255,255,255,0.08); }
}
@media (max-width: 480px) {
  .css-results-band { grid-template-columns: 1fr 1fr; }
  .css-hero-h1      { font-size: var(--fs-h1); }
}


/* Navy ticker bar */
.hp-ticker { background: #0A1E3C !important; }

/* Equal dot spacing */
.hp-ticker-item { padding: 0 !important; gap: 0 !important; }
.hp-ticker-dot  { margin: 0 12px !important; }








/* ============================================================
   RWD 4.0 HOMEPAGE STYLES
   ============================================================ */

/* ---- Case-study card image banners (the "Project Image" concept) ---- */
.hp-cs-card-media{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:230px;min-height:230px;max-height:230px;border-radius:14px;overflow:hidden;margin:0 0 18px;background:#eef2f6}
.hp-cs-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.hp-cs-card-media--contain{background:#fff;border:1px solid rgba(15,30,56,.08)}
.hp-cs-card-media--contain img{object-fit:contain;padding:16px}
.hp-cs-card-media--ph{border:1.5px dashed #c8d3df;color:#9aa8b8}
.hp-cs-card-media--ph svg{width:42px;height:42px;opacity:.7}
.hp-cs-card-media--ph::after{content:"Project Image";font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9aa8b8}

/* ---- Comparison table ("One Team Beats Five Vendors") ---- */
.rwd-cmp{max-width:920px;margin:0 auto;border:1px solid #dbe6f0;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 22px 54px -30px rgba(15,30,56,.38)}
.rwd-cmp-head,.rwd-cmp-row{display:grid;grid-template-columns:minmax(0,1fr) 128px 158px;align-items:center}
.rwd-cmp-head{background:#0f1e38;color:#fff}
.rwd-cmp-h-desc,.rwd-cmp-h-them,.rwd-cmp-h-us{padding:17px 22px;font-size:var(--fs-caption);font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.rwd-cmp-h-them{text-align:center;color:#93a6bd}
.rwd-cmp-h-us{text-align:center;color:#fff;position:relative}
.rwd-cmp-h-us:after{content:"";position:absolute;left:22px;right:22px;bottom:9px;height:3px;background:#f4531f;border-radius:2px}
.rwd-cmp-row{border-top:1px solid #eef2f6}
.rwd-cmp-row:nth-child(even){background:#f7fafd}
.rwd-cmp-desc{padding:15px 22px;font-size:var(--fs-small);font-weight:600;color:#0f1e38;line-height:1.35}
.rwd-cmp-them,.rwd-cmp-us{padding:15px 22px;text-align:center}
.rwd-cmp-us{background:rgba(22,163,74,.055)}
.rwd-cmp-x{color:#c4cfda;font-size:var(--fs-body);font-weight:700}
.rwd-cmp-check{display:inline-flex;vertical-align:middle}
@media(max-width:640px){.rwd-cmp-head,.rwd-cmp-row{grid-template-columns:minmax(0,1fr) 60px 74px}.rwd-cmp-h-desc,.rwd-cmp-h-them,.rwd-cmp-h-us{padding:13px 8px;font-size:var(--fs-label)}.rwd-cmp-h-us:after{left:8px;right:8px}.rwd-cmp-desc{font-size:var(--fs-caption);padding:13px 14px}.rwd-cmp-them,.rwd-cmp-us{padding:12px 4px}.rwd-cmp-check svg{width:16px;height:16px}}

/* ---- Hero certified-badge strip ---- */
.hp-hero-trust{margin-top:36px;margin-bottom:10px;border-top:1px solid rgba(15,30,56,.10);padding-top:26px}
.hp-hero-trust-label{font-size:var(--fs-caption);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7c8ea3;margin-bottom:18px;text-align:center}
.hp-hero-badges{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:900px;margin:0 auto}
.hp-badge{background:#fff;border:1px solid #dbe6f0;border-radius:16px;height:118px;display:flex;align-items:center;justify-content:center;padding:16px;box-shadow:0 12px 26px -14px rgba(15,30,56,.30)}
.hp-badge img{max-height:100%;max-width:100%;width:auto;height:auto;display:block}
@media(max-width:900px){.hp-hero-badges{grid-template-columns:repeat(3,1fr)}.hp-badge{height:100px}}

/* ---- Bento accents ---- */
.hp-bento-tag--outline{position:relative;overflow:visible;}
.hp-bento-new{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;background:#f4531f;color:#fff;font-size:var(--fs-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:4px;white-space:nowrap;line-height:1.2}
.hp-bento-ctx{font-size:var(--fs-caption);color:#64748b;margin-top:6px;line-height:1.4}
.hp-bento-card--dark .hp-bento-ctx{color:#a9bcd4}
.hp-bento-link{display:inline-block;margin-top:12px;font-size:var(--fs-caption);font-weight:800;color:#4589cd;text-decoration:none}
.hp-bento-link:hover{color:#0f1e38}
.hp-bento-arrow{color:#9fb2c9}
.hp-bento-big--transform{font-size:var(--fs-h2)}

/* ---- Section image placeholder zones (Problem / case photo) ---- */
.hp-img-ph{border:1.5px dashed #c8d3df;background:#eef2f6;border-radius:16px;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#9aa8b8;width:100%}
.hp-img-ph svg{width:40px;height:40px;opacity:.75}
.hp-img-ph span{font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hp-img-ph img{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}
.grid-split.hp-balanced{align-items:stretch}
.grid-split.hp-balanced>div{display:flex;flex-direction:column;min-width:0}
.grid-split.hp-balanced .flex-col{height:100%;justify-content:space-between}
.hp-fill{flex:1 1 auto;display:flex}
.hp-case-photo{flex:1 1 auto;display:flex}
.display-lg.hp-h2-tight{font-size:var(--fs-h2)}
@media(max-width:860px){.hp-img-ph{min-height:200px}}

/* ---- Hero sizing + spacing (tuned by eye — nudge freely) ---- */
.hp-hero{ min-height:auto; padding-bottom: 20px; }
.hp-hero-h1,.hp-hero-h2{font-size:var(--fs-h1);line-height:.95}
.hp-hero-lead{font-size:var(--fs-lead);line-height:1.75;color:#5b6c81;font-weight:400}
.hp-scroll-hint{margin-top:22px}          /* badges -> arrow: tighter */
.trust-bar{margin-top:36px}               /* OUTSIDE margin: cards -> blank -> logo line */

/* ---- Body legibility (softer but readable) ---- */
.problem-desc{color:#48586c;font-size: var(--fs-body);line-height:1.6}
.body-lg{color:#46566a}

/* NOTE: problem-card TITLE font left untouched (no new font added). */


/* ============================================================
   BUSINESS RESOURCES MEGA MENU  (menu item 1616)
   Rendered by the [rwd_business_mega] shortcode.
   ============================================================ */

.ct-header li.menu-item-1616{position:static}
.ct-header li.menu-item-1616 > .entry-content{position:absolute;left:24px;right:24px;top:calc(100% + 10px);width:auto;max-width:none;margin:0;z-index:150;background:#fff;box-shadow:0 26px 70px rgba(10,30,60,.20);border:1px solid #e4ecf4;border-radius:18px;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
.ct-header li.menu-item-1616:hover > .entry-content,.ct-header li.menu-item-1616:focus-within > .entry-content,.ct-header li.menu-item-1616.ct-active > .entry-content{opacity:1;visibility:visible;transform:translateY(0)}
[data-header*="type-1"] .ct-header [data-id="menu"] li.menu-item-1616 .sub-menu{--dropdown-background-color:transparent;background:transparent;box-shadow:none;border:0}
/* panel content */
.rwd-mm{background:#fff}
.rwd-mm-cols{display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr;gap:28px;padding:30px 36px;max-width:1180px;margin:0 auto;align-items:start}
.rwd-mm-h{font-family:var(--font-display),sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-body);color:#0A1E3C;margin:0 0 12px;padding-bottom:9px;border-bottom:2px solid #eef3f8}
.rwd-mm-l{display:flex;align-items:center;gap:10px;padding:8px 0;color:#3A5070;font-size:var(--fs-small);text-decoration:none;font-weight:500;line-height:1.3}
.rwd-mm-l:hover{color:#C0531A}
.rwd-mm-l svg{width:18px;height:18px;color:#4A8EC2;flex:0 0 auto}
.rwd-mm-star{color:#0A1E3C;font-weight:700}.rwd-mm-star svg{color:#C0531A}
.rwd-mm-feat{background:#0A1E3C;border-radius:14px;padding:22px;display:flex;flex-direction:column;align-items:flex-start}
.rwd-mm-img{width:54px;height:54px;border-radius:50%;object-fit:cover;margin-bottom:14px;border:2px solid rgba(255,255,255,.18)}
.rwd-mm-eye{font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7EC8F0;margin:0 0 7px}
.rwd-mm-t{font-family:var(--font-display),sans-serif;font-weight:900;text-transform:uppercase;line-height:.98;letter-spacing:-.5px;font-size:var(--fs-h3);color:#fff;margin:0 0 10px}
.rwd-mm-c{font-size:var(--fs-caption);line-height:1.55;color:rgba(255,255,255,.72);margin:0 0 16px}
.rwd-mm-btn{background:#C0531A;color:#fff;font-weight:700;font-size:var(--fs-caption);padding:11px 20px;border-radius:8px;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.rwd-mm-btn:hover{background:#a7481a}
.rwd-mm-blog{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);width:100%;text-decoration:none;color:rgba(255,255,255,.85);font-size:var(--fs-caption);font-weight:600;line-height:1.4}
.rwd-mm-blog span{display:block;font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7EC8F0;margin-bottom:4px}
.rwd-mm-blog:hover{color:#fff}
@media(max-width:900px){.rwd-mm-cols{grid-template-columns:1fr 1fr}}











/* ============================================================
   RWD FOOTER  ([rwd_footer])
   ============================================================ */
.rwd-ftr{
  --ftr-line: rgba(10,30,60,.10);
  --ftr-muted: #5b6b82;
  background:#fff;
  color: var(--ink, #0A1E3C);
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  border-top:1px solid var(--ftr-line);
}
.rwd-ftr-inner{ max-width:1200px; margin:0 auto; padding:56px 24px 28px; }

.rwd-ftr-top{ display:grid; grid-template-columns: 280px 1fr; gap:40px; align-items:start; padding-bottom:34px; border-bottom:1px solid var(--ftr-line); }
.rwd-ftr-logo-link{ display:inline-block; }
.rwd-ftr-logo-link img{ height:68px; width:auto; display:block; }

.rwd-ftr-news{ display:grid; grid-template-columns: 1fr auto; grid-template-rows:auto auto; gap:6px 20px; align-items:center; }
.rwd-ftr-news-copy{ grid-column:1; }
.rwd-ftr-news-copy h3{ margin:0 0 4px; font-size:var(--fs-body); font-weight:800; color:var(--ink,#0A1E3C); line-height:1.25; }
.rwd-ftr-news-copy p{ margin:0; font-size:var(--fs-caption); color:var(--ftr-muted); line-height:1.5; }
.rwd-ftr-form{ grid-column:2; grid-row:1; display:flex; gap:8px; background:#f4f6f9; border:1px solid var(--ftr-line); border-radius:12px; padding:6px; min-width:340px; }
.rwd-ftr-form input{ flex:1; border:0; background:transparent; padding:10px 12px; font-size:var(--fs-small); color:var(--ink,#0A1E3C); outline:none; }
.rwd-ftr-form input::placeholder{ color:#9aa7b8; }
.rwd-ftr-form button{ display:inline-flex; align-items:center; gap:6px; background:var(--cta,#C0531A); color:#fff; border:0; border-radius:9px; padding:10px 18px; font-size:var(--fs-small); font-weight:700; cursor:pointer; white-space:nowrap; transition:filter .15s; }
.rwd-ftr-form button:hover{ filter:brightness(1.06); }
.rwd-ftr-news-note{ grid-column:2; grid-row:2; margin:0; font-size:var(--fs-caption); color:var(--ftr-muted); display:flex; align-items:center; gap:6px; }
.rwd-ftr-check{ color:var(--sky,#4A8EC2); font-weight:900; }

.rwd-ftr-cols{ display:grid; grid-template-columns: repeat(5,1fr); gap:32px; padding:40px 0 34px; border-bottom:1px solid var(--ftr-line); }
.rwd-ftr-col-h{ margin:0 0 16px; font-family:var(--font-display,sans-serif); text-transform:uppercase; letter-spacing:1.4px; font-size:var(--fs-caption); font-weight:800; color:var(--ink,#0A1E3C); }
.rwd-ftr-links{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.rwd-ftr-links a{ color:var(--ftr-muted); text-decoration:none; font-size:var(--fs-small); transition:color .15s; }
.rwd-ftr-links a:hover{ color:var(--cta,#C0531A); }

.rwd-ftr-col--contact .rwd-ftr-msg{ display:inline-flex; align-items:center; gap:6px; color:var(--cta,#C0531A); font-weight:700; font-size:var(--fs-small); text-decoration:none; margin-bottom:12px; }
.rwd-ftr-col--contact .rwd-ftr-msg:hover{ text-decoration:underline; }
.rwd-ftr-phone{ display:block; font-family:var(--font-display,sans-serif); font-weight:900; font-size:var(--fs-h4); color:var(--ink,#0A1E3C); text-decoration:none; letter-spacing:.3px; margin-bottom:16px; }
.rwd-ftr-phone:hover{ color:var(--cta,#C0531A); }
.rwd-ftr-hours{ font-size:var(--fs-caption); color:var(--ftr-muted); line-height:1.5; }
.rwd-ftr-hours-lbl{ display:block; font-weight:700; color:var(--ink,#0A1E3C); font-size:var(--fs-caption); margin-bottom:2px; }

.rwd-ftr-areas{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; padding:26px 0; border-bottom:1px solid var(--ftr-line); }
.rwd-ftr-areas-lbl{ font-family:var(--font-display,sans-serif); text-transform:uppercase; letter-spacing:1.4px; font-size:var(--fs-caption); font-weight:800; color:var(--ink,#0A1E3C); margin-right:6px; }
.rwd-ftr-areas-nav a{ color:var(--ftr-muted); text-decoration:none; font-size:var(--fs-caption); transition:color .15s; }
.rwd-ftr-areas-nav a:hover{ color:var(--cta,#C0531A); }
.rwd-ftr-dot{ color:#c3ccd8; margin:0 8px; }

.rwd-ftr-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:24px; flex-wrap:wrap; }
.rwd-ftr-copy{ margin:0; font-size:var(--fs-caption); color:var(--ftr-muted); }
.rwd-ftr-social{ display:flex; gap:10px; }
.rwd-ftr-social a{ width:34px; height:34px; border-radius:9px; background:var(--ink,#0A1E3C); color:#fff; display:inline-flex; align-items:center; justify-content:center; transition:background .15s,transform .15s; }
.rwd-ftr-social a:hover{ background:var(--cta,#C0531A); transform:translateY(-2px); }
.rwd-ftr-legal{ display:flex; align-items:center; gap:12px; font-size:var(--fs-caption); }
.rwd-ftr-legal a{ color:var(--ftr-muted); text-decoration:none; }
.rwd-ftr-legal a:hover{ color:var(--cta,#C0531A); }
.rwd-ftr-legal span{ color:#c3ccd8; }

@media (max-width:1000px){
  .rwd-ftr-top{ grid-template-columns:1fr; gap:24px; }
  .rwd-ftr-news{ grid-template-columns:1fr; }
  .rwd-ftr-news-copy,.rwd-ftr-form,.rwd-ftr-news-note{ grid-column:1; }
  .rwd-ftr-form{ grid-row:auto; min-width:0; }
  .rwd-ftr-news-note{ grid-row:auto; }
  .rwd-ftr-cols{ grid-template-columns:repeat(3,1fr); gap:28px 24px; }
}
@media (max-width:640px){
  .rwd-ftr-inner{ padding:40px 20px 24px; }
  .rwd-ftr-cols{ grid-template-columns:repeat(2,1fr); }
  .rwd-ftr-bottom{ flex-direction:column; align-items:flex-start; gap:16px; }
}

.ct-footer { display: none; }

/* ============================================================
   HOMEPAGE TYPE CONSOLIDATION — one definition per role.
   Old class names kept (other pages use them); they now share
   grouped rules. IDs reference the typography audit.
   ============================================================ */

/* [1+5] Big display — display-lg is canonical */
.hp-bento-big{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:900;text-transform:uppercase;letter-spacing:-1px;color:var(--ink);}

/* [2/3] Hero H1 + H2 — one rule, H2 differs only by accent color */
.hp-hero-h1,.hp-hero-h2{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:900;text-transform:uppercase;letter-spacing:-2px;line-height:.95;color:var(--ink);}
.hp-hero-h2{color:var(--accent);}

/* [4/6/7] Card titles — one style */
.hp-bento-feature-title,.hp-bento-mid-title{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:900;text-transform:uppercase;letter-spacing:0;color:var(--ink);}
/* .hp-cs-card-title left this group 2026-08-24 — case-study card titles now system bold, see the .hp-cs-card block */

/* Logo placeholder slots inside a case-study card media area (GMP card) — drop real art in, delete the slot divs */
.hp-cs-logo-slots{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:8px;padding:10px;background:var(--white);border:1px solid var(--border);}
.hp-cs-logo-slot{border:1.5px dashed #c8d3df;border-radius:10px;display:flex;align-items:center;justify-content:center;min-height:96px;}
.hp-cs-logo-slot--wide{grid-column:1/-1;min-height:88px;}
.hp-cs-logo-slot::after{content:attr(data-label);font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9aa8b8;}

/* [9/10/12/13/14/15/16] Grey uppercase labels — one style */
.trust-bar-label,.hp-hero-eyebrow,.hp-bento-stat-label,.hp-case-row-label,.hp-cs-card-tag,.hp-cs-card-stat-label,.hp-hero-trust-label{font-size:var(--fs-label);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-faint);}

/* [17/18/20/21/22/25/27/38 -> 21] Light body — hero-lead is canonical */
.rwd-cmp-desc,.body-lg,.problem-desc,.hp-bento-feature-desc,.hp-case-row-text,.hp-case-bar-labels,.hp-bento-ctx{font-size:var(--fs-lead);line-height:1.75;color:#5b6c81;font-weight:400;}
.hp-hero-lead{font-size:var(--fs-lead);line-height:1.75;color:#5b6c81;font-weight:400;}

/* [24/30] Accent micro — one style */
.hp-system-num,.hp-bento-link{font-size:var(--fs-caption);font-weight:800;letter-spacing:1px;color:var(--accent);}

/* [40 -> 39] Dark card titles — bento-dark-title is canonical */
.hp-system-title{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:900;text-transform:uppercase;color:#fff;}

/* [41-44 -> 43] Dark uppercase labels — case-card-eyebrow is canonical */
.hp-ticker-item,.hp-system-result,.hp-case-card-eyebrow,.hp-case-mini-lbl{font-size:var(--fs-label);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.35);}

/* [46-53 -> 49] Dark body — system-desc is canonical (fixes 47 visibility) */
.cta-band-footnote,.hp-bento-dark-desc,.hp-system-desc,.hp-guarantee-item,.hp-case-revenue-label,.hp-rating-note,.hp-review-text,.checklist--white li{font-size:var(--fs-caption);line-height:1.7;color:rgba(255,255,255,0.5);font-weight:400;}
.hp-review-text{font-style:italic;}
/* ================== end type consolidation ================== */

/* Popup + rollover orange buttons: force white text over any link-color rule */
.pf-modal-actions a.btn--orange, .pf-modal-actions a.btn--orange:visited, .pf-modal-actions a.btn--orange:hover,
.wd-pcard-overlay a.wd-pcard-btn, .wd-pcard-overlay a.wd-pcard-btn:visited, .wd-pcard-overlay a.wd-pcard-btn:hover{color:#fff !important;}
#portfolio-modal a.btn--orange, #portfolio-modal a.btn--orange:hover, #portfolio-modal a.btn--orange:focus, #portfolio-modal a.btn--orange:visited{color:#fff !important;}

/* Carousel case-study cards fully clickable via their existing link */
.hp-cs-card{position:relative;}
.hp-cs-card .hp-cs-card-link::after{content:"";position:absolute;inset:0;}

/* wpautop/block ghosts: empty paragraphs create stray gaps between sections and the footer */
main p:empty, .entry-content p:empty, p.wp-block-paragraph:empty{display:none !important;margin:0 !important}
.entry-content > :last-child{margin-bottom:0}



/* eyebrow moved under H1 on service pages */
.eyebrow--sub{margin-top:14px}

.seo-hero-img{border-radius:16px;overflow:hidden;box-shadow:0 26px 54px -32px rgba(10,30,60,.5)}
.seo-hero-img img{width:100%;height:auto;display:block}
.rwd-ba-img{width:100%;border-radius:16px;display:block;border:1px solid var(--border);box-shadow:0 22px 46px -34px rgba(10,30,60,.45)}
.rwd-ba-explain{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
.rwd-ba-ex{font-size: var(--fs-small);line-height:1.65;color:var(--ink-mid);background:var(--white);border:1px solid var(--border);border-radius:14px;padding:18px 22px}
.rwd-ba-ex b{color:var(--ink)}
@media(max-width:860px){.rwd-ba-explain{grid-template-columns:1fr}}
/* breadcrumb hugs the content it introduces, not the header */
.hero .breadcrumb{margin-bottom:14px !important}
.hero .hero-h1{margin-top:0}
.seo-hero-img img{width:100%;height:100%;object-fit:cover;object-position:left center;border-radius:16px}
/* ── heat map component (rwd_heatmap) ── */
.rwd-heatmap{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:14px}
.rwd-hm-map{position:relative;border-radius:12px;overflow:hidden;background:var(--base);height:290px}
.rwd-hm-streets{position:absolute;inset:0;width:100%;height:100%}
.rwd-hm-pin{position:absolute;width:26px;height:26px;border-radius:50% 50% 50% 4px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-label);font-weight:700;box-shadow:0 4px 10px -3px rgba(10,30,60,.4)}
.rwd-hm-pin--g{background:#2A7A50}
.rwd-hm-pin--y{background:#E8B04A}
.rwd-hm-pin--r{background:#E24B4A;font-size:var(--fs-label)}
.rwd-hm-pin--star{outline:2.5px solid #fff;outline-offset:1px;font-size:var(--fs-caption)}
.rwd-hm-rankcard{position:absolute;left:12px;bottom:12px;background:var(--white);border-radius:12px;padding:10px 14px;box-shadow:0 12px 30px -14px rgba(10,30,60,.4);min-width:172px}
.rwd-hm-biz{font-size:var(--fs-label);font-weight:700;color:var(--ink)}
.rwd-hm-avg b{font-family:var(--font-body,inherit);font-weight:800;font-size:var(--fs-h3);color:var(--ink);line-height:1.1}
.rwd-hm-avg small{font-size: var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-left:6px}
.rwd-hm-split{font-size: var(--fs-label);color:var(--ink-mid);margin-top:5px}
.rwd-hm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 2px 0 6px}
.rwd-hm-dot--g{background:#2A7A50}.rwd-hm-dot--y{background:#E8B04A}.rwd-hm-dot--r{background:#E24B4A}
.rwd-hm-dot:first-child{margin-left:0}
.rwd-hm-kws{display:grid;gap:6px;margin-top:12px}
.rwd-hm-kw{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size: var(--fs-caption);color:var(--ink)}
.rwd-hm-b--g{background:#E9F4EE;color:#085041;border-radius:6px;padding:2px 8px;font-weight:700}
.rwd-hm-b--r{background:#FCEBEB;color:#A32D2D;border-radius:6px;padding:2px 8px;font-weight:700}
.rwd-hm-note{margin-top:10px;font-size:var(--fs-label);color:var(--ink-faint);text-align:center}
/* before/after layout */
.rwd-ba-lead{max-width:64ch;margin-left:auto;margin-right:auto}
.rwd-ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:38px;align-items:start}
.rwd-ba-col{position:relative}
.rwd-ba-badge{display:inline-block;font-size:var(--fs-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:20px;padding:5px 14px;margin-bottom:12px}
.rwd-ba-badge--before{background:#FCEBEB;color:#A32D2D}
.rwd-ba-badge--after{background:#E9F4EE;color:#085041}
@media(max-width:860px){.rwd-ba-grid{grid-template-columns:1fr}}

/* ── GLOBAL image-placeholder base (every .ph on any page renders small + consistent) ── */
.ph{border:1.5px dashed #c8d3df;background:#eef2f6;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#9aa8b8;text-align:center;padding:20px;width:100%}
.ph svg{width:30px;height:30px;opacity:.8;flex:none}
.ph b{font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.ph em{font-style:normal;font-size:var(--fs-caption);color:#a8b9c9;max-width:30ch;line-height:1.4}

/* ── floating score chip (overlaps an image's left edge; reusable) ── */
.rwd-scorechip{position:absolute;left:-18px;bottom:22px;z-index:2;background:#fff;border-radius:14px;padding:12px 16px;
  box-shadow:0 16px 38px -18px rgba(10,30,60,.45);display:flex;align-items:center;gap:11px}
.rwd-scorechip-ic{flex:none;width:52px;height:52px;border-radius:50%;border:3px solid #16a34a;display:flex;align-items:center;justify-content:center}
.rwd-scorechip-ic svg{width:28px;height:28px;stroke:#16a34a;fill:none;stroke-width:2.6}
.rwd-scorechip-lbl{font-size:var(--fs-caption);font-weight:600;color:var(--ink)}
.rwd-scorechip-num{font-size:var(--fs-h3);font-weight:800;color:#16a34a;line-height:1.05}
.rwd-scorechip-num small{font-size:var(--fs-small);font-weight:800;color:#16a34a;margin-left:5px}
.rwd-scorechip-sub{font-size: var(--fs-label);color:var(--ink-faint)}
.seo-hero-wrap{position:relative}

/* ── TEXT SOFTNESS — sitewide: body copy is soft slate, never harsh black.
      Titles/strong = --ink; paragraphs, bullets, descriptions = --ink-mid; max body 16px. ── */
.body-lg{font-size:var(--fs-body);color:var(--ink-mid)}
.body-md{color:var(--ink-mid)}
.checklist li{color:var(--ink-mid)}
.rwd-zig-text .checklist li{color:var(--ink-mid)}

/* problem-section image + quote bubble */
.seo-prob-img{margin-top:6px}
.seo-prob-ph{min-height:200px;max-height:230px}

/* SEO . problem - show the map graphic whole and level the two columns */
/* image sits on top of the left column, same as the homepage problem block.
   Both columns start and finish level; the headline drops a step so the two
   sides come out even. */
.section.rwd-problem-sec .grid-split,
.grid-split:has(.seo-problem-card){align-items:stretch}
.section.rwd-problem-sec .grid-split>div,
.grid-split:has(.seo-problem-card)>div{display:flex;flex-direction:column;min-width:0}
.section.rwd-problem-sec .grid-split .flex-col,
.grid-split:has(.seo-problem-card) .flex-col,
.grid-split:has(.wd-problem-card) .flex-col{height:100%;justify-content:space-between}
.section.rwd-problem-sec .display-lg,
.grid-split:has(.seo-problem-card) .display-lg{font-size:var(--fs-h2)}
.seo-prob-img{margin:0 0 26px}
/* natural ratio - a fixed 4/3 box letterboxed this wide illustration and the
   background bars read as the image starting lower than the card next to it */
.seo-prob-ph.is-filled{aspect-ratio:auto!important;min-height:0!important;max-height:none!important;
  width:100%;height:auto!important;border-radius:20px!important;overflow:hidden;background:none}
.seo-prob-ph.is-filled img{width:100%;height:auto;display:block;object-fit:contain;border-radius:20px}

.rwd-float-card.rwd-float-card--bubble{bottom:-18px;top:auto;left:-16px;max-width:320px;padding:16px 20px}
.rwd-float-card.rwd-float-card--bubble b{display:block;font-family:var(--font-body,inherit);font-size:var(--fs-small);font-weight:700;color:var(--ink);line-height:1.55;text-transform:none;letter-spacing:0}
.rwd-float-card.rwd-float-card--bubble span{display:block;font-family:var(--font-mono,ui-monospace,monospace);font-size: var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:7px}

/* ── generic zigzag rows (image/text alternating) — reusable on any light section ── */
.rwd-zig{display:grid;gap:44px;max-width:1020px;margin:44px auto 0}
/* each row is one card: image bleeds to its own edge, text sits on white */
.rwd-zig-item{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;text-align:left;
  min-height:330px;background:#fff;border:1px solid #E4EBF3;border-radius:18px;overflow:hidden;
  box-shadow:0 12px 32px -26px rgba(10,30,60,.45)}
.rwd-zig-item:nth-child(even) .rwd-zig-media{order:2}
.rwd-zig-media{border-radius:0 !important;align-self:stretch}
/* the photo fills its half of the card and never drives the row height -
   the text side decides how tall the card is */
.rwd-zig-media.is-filled{position:relative;overflow:hidden;align-self:stretch;
  aspect-ratio:auto !important;width:100%;height:auto !important;
  min-height:0 !important;max-height:none !important;border-radius:0 !important}
.rwd-zig-media.is-filled img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rwd-zig-text{padding:34px 36px;align-self:center}
.rwd-zig-text .seo-svc-title{font-family:var(--font-body);font-size: var(--fs-h4);font-weight:700;
  text-transform:none;letter-spacing:0;line-height:1.25}
.rwd-zig-text .checklist{margin-top:16px}
.rwd-zig-text .checklist li{font-size:var(--fs-small);line-height:1.55}
@media(max-width:860px){
  .rwd-zig-item{grid-template-columns:1fr;min-height:0}
  .rwd-zig-text{padding:26px 24px}
  .rwd-zig-item:nth-child(even) .rwd-zig-media{order:0}
  .rwd-zig-media.is-filled{aspect-ratio:16/10 !important;height:auto !important;min-height:0 !important}
}

/* get-started hero: airy expect-list (no white cards, not full width).
   padding-top override removed — the sitewide --rwd-header-gap rule applies. */
.gs-expect-list{max-width:480px}
.gs-expect-item{background:transparent !important;border:0 !important;box-shadow:none !important;padding:8px 0 !important}
.hero--sage .rwd-certbar{margin-top:26px;max-width:560px}

/* ── light cert bar (img5 style, light version) ── */
.rwd-certbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--border);border-radius:16px;padding:16px 22px;margin-top:26px;
  box-shadow:0 14px 34px -26px rgba(10,30,60,.4)}
.hero .rwd-certbar{margin-top:20px}
.rwd-cb-item{display:flex;align-items:center;gap:11px;padding:2px 18px;border-right:1px solid var(--border)}
.rwd-cb-item:first-child{padding-left:0}
.rwd-cb-item:last-child{border-right:0;padding-right:0}
.rwd-cb-item img{width:26px;height:26px}
.rwd-cb-trophy svg{width:26px;height:26px;display:block}
.rwd-cb-item b{display:block;font-size: var(--fs-caption);font-weight:800;color:var(--ink);line-height:1.15}
.rwd-cb-item small{display:block;font-family:var(--font-mono,ui-monospace,monospace);font-size: var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-light);margin-top:2px}
.rwd-cb-score{font-size:var(--fs-body)}
.rwd-cb-stars{color:#FBBC05;font-size:var(--fs-caption);letter-spacing:1px}
@media(max-width:860px){.rwd-certbar{justify-content:flex-start}.rwd-cb-item{border-right:0;padding:4px 8px}}

/* ── contact page polish ── */
/* quick-contact pills: markup shipped with no CSS, so they rendered as raw
   full-bleed divs pinned to the page top. Boxed row, container width. */
.ct-contact-pills{max-width:1200px;margin:0 auto 34px;padding:0 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ct-contact-pill{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 20px;box-shadow:var(--shadow-sm);text-decoration:none;transition:border-color .18s ease,transform .18s ease}
.ct-contact-pill:hover{border-color:var(--cta);transform:translateY(-2px)}
.ct-contact-pill svg,.ct-contact-pill img{width:26px;height:26px;flex:0 0 auto}
.ct-contact-pill-label{font-size: var(--fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.ct-contact-pill-value{font-size:var(--fs-body);font-weight:700;color:var(--ink)}
.ct-contact-pill:hover .ct-contact-pill-value{color:var(--cta)}
@media(max-width:860px){.ct-contact-pills{grid-template-columns:1fr;padding:0 20px}}
.ct-hero{ padding-bottom: 30px; }
.ct-hero .hero-h1{font-size:var(--fs-h2)}
.ct-hero .hero-grid{align-items:center}
.ct-hero-ph{min-height:200px;max-height:240px}
/* pills: full-width row under the hero grid */
.ct-hero .ct-contact-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px;width:100%}
.ct-hero .ct-contact-pill{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 12px 28px -22px rgba(10,30,60,.4)}
@media(max-width:860px){.ct-hero .ct-contact-pills{grid-template-columns:1fr}}
.ct-hero{ padding-bottom: 30px; }
.ct-hero-ph{min-height:170px;max-height:200px}
.ct-map-ph{min-height:180px;border-radius:14px !important;margin-top:14px}
@media(max-width:860px){.ct-info-strip .ct-contact-pills{grid-template-columns:1fr}}

/* case-studies archive polish */
.cs-hero{ padding-bottom: 30px; }
.cs-hero-lead{max-width:66ch;margin-left:auto;margin-right:auto}
.cs-hero-certs{margin-top:30px}
.cs-hero-certs .trust-bar,.cs-hero-certs .hp-hero-trust{margin-top:0;border-top:0;padding-top:0;background:transparent}
.cs-featured-wrap{padding-top:34px}

/* standard breadcrumb wrapper inside custom heroes (geo/auto/sd24) */
.rwd-bcwrap{margin-bottom:20px}
.geopage div.wrap.rwd-bcwrap,.autopage div.wrap.rwd-bcwrap{padding-top:var(--rwd-header-gap) !important}
.sd24 div.wrap.rwd-bcwrap{padding-top:calc(var(--rwd-header-gap) + 70px) !important}
.sd24 .breadcrumb a{color:rgba(255,255,255,.55)}
.sd24 .breadcrumb a:hover{color:#fff}
.sd24 .breadcrumb .breadcrumb-sep{color:rgba(255,255,255,.3)}
.sd24 .breadcrumb .breadcrumb-current{color:rgba(255,255,255,.85)}

/* ── Default header dropdowns — white card style matching the mega menus ── */
.ct-header ul.sub-menu{
  background:#fff !important;border:1px solid #CFE1F1 !important;border-radius:12px !important;
  box-shadow:0 18px 42px -26px rgba(10,30,60,.4) !important;padding:6px !important;overflow:hidden}
.ct-header ul.sub-menu li{border:0 !important}
.ct-header ul.sub-menu a.ct-menu-link{color:var(--ink) !important;font-size:var(--fs-small);font-weight:600;border-radius:8px}
.ct-header ul.sub-menu a.ct-menu-link:hover{background:var(--accent-pale) !important;color:var(--ink) !important}
body.dark-nav .ct-header ul.sub-menu a.ct-menu-link{color:var(--ink) !important}
body.dark-nav .ct-header ul.sub-menu a.ct-menu-link:hover{color:var(--ink) !important;background:var(--accent-pale) !important}

/* ── RWD MEGA MENU (Business Resources) ── */
.rwd-mega {
  display: none;
  position: fixed; top: var(--rwd-mega-top, 130px); left: 50%; transform: translateX(-50%);
  width: min(1200px, calc(100vw - 32px));
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-lg); overflow: hidden;
  grid-template-columns: 1fr 290px; text-align: left; z-index: 999;
}
@media (min-width: 1000px) {
  .rwd-mega.rwd-open { display: grid; }
  .menu-item-1616 ul.sub-menu, .menu-item-1632 ul.sub-menu { display: none !important; }
  .menu-item-1616 .rwd-mega, .menu-item-1632 .rwd-mega { display: none; }
}
.rwd-mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; padding: 30px 34px 26px; }
.rwd-mega-col + .rwd-mega-col { border-left: 1px solid var(--base-tint); padding-left: 28px; }
.rwd-mega-illu {
  width: 54px; height: 54px; border-radius: 50%; background: var(--accent-pale);
  display: inline-flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 12px;
}
.rwd-mega-illu svg { width: 30px; height: 30px; }
.rwd-mega-head {
  font-weight: 800; font-size: var(--fs-small); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); padding-bottom: 8px; margin-bottom: 4px; position: relative;
}
.rwd-mega-head::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--accent); border-radius: 2px; }
.rwd-mega-col ul { list-style: none; margin: 0; padding: 0; }
.rwd-mega-col li { border-bottom: 1px solid var(--base-tint); }
.rwd-mega-col li:last-child { border-bottom: 0; }
.rwd-mega-col a {
  display: flex; align-items: center; gap: 10px; padding: 11px 2px;
  font-size: var(--fs-caption); font-weight: 500; color: var(--ink) !important; text-decoration: none; white-space: nowrap;
}
.rwd-mega-col a:hover { color: var(--accent) !important; }
.rwd-mega-ic { flex: 0 0 auto; width: 20px; height: 20px; color: var(--accent); }
.rwd-mega-ic svg { width: 20px; height: 20px; display: block; }
.rwd-mega-rail { background: var(--pastel-sky); color: var(--ink-mid); padding: 32px 30px; display: flex; flex-direction: column; align-items: flex-start; }
.rwd-mega-eyebrow { font-size: var(--fs-caption); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.rwd-mega-rail-title { font-weight: 900; font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.3px; color: var(--ink); margin-bottom: 10px; text-transform: uppercase; }
.rwd-mega-rail p { font-size: var(--fs-small); line-height: 1.55; margin: 0 0 18px; }
.rwd-mega-rail .btn--orange { color: #fff !important; }
.rwd-mega-blog { border-top: 1px solid rgba(10,30,60,.14); margin-top: 22px; padding-top: 16px; width: 100%; }
.rwd-mega-blog span { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.rwd-mega-blog a { color: var(--ink) !important; font-weight: 700; font-size: var(--fs-small); text-decoration: none; }
.rwd-mega-blog a:hover { color: var(--accent) !important; }
/* Services rail = pastel green variant */
.rwd-mega[data-mega="services"] .rwd-mega-rail { background: var(--pastel-sage); }
.rwd-mega[data-mega="services"] .rwd-mega-eyebrow,
.rwd-mega[data-mega="services"] .rwd-mega-blog span { color: #2A7A50; }
.rwd-mega[data-mega="services"] .rwd-mega-blog a:hover { color: #2A7A50 !important; }
@media (max-width: 999px) { .rwd-mega { display: none !important; } }

/* ── MEGA v2 — two deliberately different panel shapes ──
   services : green promo + image LEFT, 2-col service grid right, quiz strip bottom
   resources: lean 3-col text index, one pastel "latest guides" box across bottom */
.rwd-mega--svc { grid-template-columns: 316px 1fr; }
.rwd-mega--res { grid-template-columns: 1fr; }

/* A · services */
.rwd-mega-promo { background: var(--pastel-sage); padding: 22px 24px 22px; display: flex; flex-direction: column; align-items: flex-start; }
.rwd-mega-promo .rwd-mega-rail-title { font-size: var(--fs-body); white-space: nowrap; letter-spacing: -.2px; margin-bottom: 8px; }
.rwd-mega-shot {
  width: 100%; height: 82px; border-radius: 12px; overflow: hidden; margin-bottom: 12px;
  background: #DDEDE4; border: 1.5px dashed rgba(10,30,60,.16);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #5C8A72;
}
.rwd-mega-shot img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.rwd-mega-shot span { font-size: var(--fs-label); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.rwd-mega-promo .rwd-mega-eyebrow { color: #2A7A50; }
.rwd-mega-promo p { font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-mid); margin: 0 0 14px; }
.rwd-mega-promo .btn--orange { color: #fff !important; margin-top: auto; }
.rwd-mega-svc { padding: 36px 26px 0; display: flex; flex-direction: column; }
.rwd-mega-svcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px 12px; }
a.rwd-svc { display: flex; gap: 11px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; text-decoration: none; transition: background .18s ease; }
a.rwd-svc:hover { background: #FFF3EC; }
a.rwd-svc:hover .rwd-svc-t, a.rwd-svc:hover .rwd-mega-ic { color: var(--cta); }
.rwd-svc .rwd-mega-ic { margin-top: 1px; transition: color .18s ease; }
.rwd-svc-t { display: block; font-size: var(--fs-caption); font-weight: 700; color: var(--ink); line-height: 1.25; transition: color .18s ease; }
.rwd-svc-s { display: block; font-size: var(--fs-caption); color: var(--ink-faint); line-height: 1.32; }
/* solid white bar across the bottom — lifts the CTA clear of the star wash
   without needing a border or a filled button */
.rwd-mega-quiz {
  margin: auto -26px 0; padding: 15px 26px; background: #fff;
  border-top: 1px solid var(--base-tint); border-radius: 0 0 16px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: var(--fs-caption);
}
.rwd-mega-quiz span { color: var(--ink-faint); }
.rwd-mega-quiz a { font-size: var(--fs-caption); font-weight: 800; color: var(--cta) !important; text-decoration: none; transition: opacity .18s ease; }
.rwd-mega-quiz a:hover { text-decoration: underline; }
.rwd-mega-allrow { position: relative; z-index: 1; margin: 2px 0 0; padding: 0 2px 12px; text-align: left; }
.rwd-mega-all { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 700; color: var(--ink) !important; text-decoration: none; }
.rwd-mega-all:hover { color: var(--cta) !important; text-decoration: underline; }

/* B · resources */
.rwd-mega-restop { display: grid; grid-template-columns: 1fr 268px; }
.rwd-mega--res .rwd-mega-cols { padding: 22px 34px 20px; }
.rwd-mega--res .rwd-mega-col a { white-space: normal; font-size: var(--fs-caption); padding: 9px 2px; }
/* light orange, not the pastel sky — on the homepage the blue rail blended
   straight into the light-blue hero behind the open panel */
.rwd-mega--res .rwd-mega-rail { padding: 24px 26px; background: #FDEFE6; }
.rwd-mega--res .rwd-mega-eyebrow { color: #C2450F; }
.rwd-mega--res .rwd-mega-rail p { font-size: var(--fs-caption); margin-bottom: 16px; }
.rwd-mega--res .rwd-mega-rail-title { font-size: var(--fs-h4); }
.rwd-mega--res .rwd-mega-rail .btn--orange { margin-top: auto; }
/* column toppers: keep the icon, drop the pale circle (saves ~22px of height) */
.rwd-mega--res .rwd-mega-illu { width: auto; height: auto; border-radius: 0; background: none; margin-bottom: 6px; color: var(--accent); }
.rwd-mega--res .rwd-mega-illu svg { width: 28px; height: 28px; }
/* soft "night sky" wash across the BOTTOM of both panels: pale colour clouds
   plus a faint star grid, both masked so they fade out by mid-panel */
.rwd-mega-svc, .rwd-mega--res .rwd-mega-cols { position: relative; }
.rwd-mega-svc::before, .rwd-mega--res .rwd-mega-cols::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(40% 78% at 14% 108%, rgba(74,142,194,.10), transparent 70%),
    radial-gradient(38% 74% at 56% 88%, rgba(232,68,10,.13), transparent 70%),
    radial-gradient(38% 74% at 93% 106%, rgba(74,142,194,.10), transparent 70%);
  -webkit-mask-image: linear-gradient(transparent 32%, #000);
  mask-image: linear-gradient(transparent 32%, #000);
}
.rwd-mega-svc::after, .rwd-mega--res .rwd-mega-cols::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(10,30,60,.10) 1.6px, transparent 1.8px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(transparent 38%, #000);
  mask-image: linear-gradient(transparent 38%, #000);
}
.rwd-mega-svcgrid, .rwd-mega-quiz, .rwd-mega--res .rwd-mega-col { position: relative; z-index: 1; }

/* ── merged from rwd-homepage.css (file removed; was loading site-wide as a 2nd stylesheet) ── */
.hp-cs-card-media{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:230px;min-height:230px;max-height:230px;border-radius:14px;overflow:hidden;margin:0 0 18px;background:#eef2f6}
.hp-cs-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.hp-cs-card-media--contain{background:#fff;border:1px solid rgba(15,30,56,.08)}
.hp-cs-card-media--contain img{object-fit:contain;padding:16px}
.hp-cs-card-media--ph{border:1.5px dashed #c8d3df;color:#9aa8b8}
.hp-cs-card-media--ph svg{width:42px;height:42px;opacity:.7}
.hp-cs-card-media--ph::after{content:"Project Image";font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9aa8b8}
.rwd-cmp{max-width:920px;margin:0 auto;border:1px solid #dbe6f0;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 22px 54px -30px rgba(15,30,56,.38)}
.rwd-cmp-head,.rwd-cmp-row{display:grid;grid-template-columns:minmax(0,1fr) 128px 158px;align-items:center}
.rwd-cmp-head{background:#0f1e38;color:#fff}
.rwd-cmp-h-desc,.rwd-cmp-h-them,.rwd-cmp-h-us{padding:17px 22px;font-size:var(--fs-caption);font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.rwd-cmp-h-them{text-align:center;color:#93a6bd}
.rwd-cmp-h-us{text-align:center;color:#fff;position:relative}
.rwd-cmp-h-us:after{content:"";position:absolute;left:22px;right:22px;bottom:9px;height:3px;background:#f4531f;border-radius:2px}
.rwd-cmp-row{border-top:1px solid #eef2f6}
.rwd-cmp-row:nth-child(even){background:#f7fafd}
.rwd-cmp-desc{padding:15px 22px;font-size:var(--fs-small);font-weight:600;color:#0f1e38;line-height:1.35}
.rwd-cmp-them,.rwd-cmp-us{padding:15px 22px;text-align:center}
.rwd-cmp-us{background:rgba(22,163,74,.055)}
.rwd-cmp-x{color:#c4cfda;font-size:var(--fs-body);font-weight:700}
.rwd-cmp-check{display:inline-flex;vertical-align:middle}
@media(max-width:640px){.rwd-cmp-head,.rwd-cmp-row{grid-template-columns:minmax(0,1fr) 60px 74px}.rwd-cmp-h-desc,.rwd-cmp-h-them,.rwd-cmp-h-us{padding:13px 8px;font-size:var(--fs-label)}.rwd-cmp-h-us:after{left:8px;right:8px}.rwd-cmp-desc{font-size:var(--fs-caption);padding:13px 14px}.rwd-cmp-them,.rwd-cmp-us{padding:12px 4px}.rwd-cmp-check svg{width:16px;height:16px}}
.hp-hero-trust{margin-top:36px;margin-bottom:10px;border-top:1px solid rgba(15,30,56,.10);padding-top:26px}
.hp-hero-trust-label{font-size:var(--fs-caption);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7c8ea3;margin-bottom:18px;text-align:center}
.hp-hero-badges{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:900px;margin:0 auto}
.hp-badge{background:#fff;border:1px solid #dbe6f0;border-radius:16px;height:118px;display:flex;align-items:center;justify-content:center;padding:16px;box-shadow:0 12px 26px -14px rgba(15,30,56,.30)}
.hp-badge img{max-height:100%;max-width:100%;width:auto;height:auto;display:block}
@media(max-width:900px){.hp-hero-badges{grid-template-columns:repeat(3,1fr)}.hp-badge{height:100px}}
.hp-bento-new{display:inline-block;background:#f4531f;color:#fff;font-size:var(--fs-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:4px;margin-left:6px;vertical-align:middle}
.hp-bento-ctx{font-size:var(--fs-caption);color:#64748b;margin-top:6px;line-height:1.4}
.hp-bento-card--dark .hp-bento-ctx{color:#a9bcd4}
.hp-bento-link{display:inline-block;margin-top:12px;font-size:var(--fs-caption);font-weight:800;color:#4589cd;text-decoration:none}
.hp-bento-link:hover{color:#0f1e38}
.hp-bento-arrow{color:#9fb2c9}
.hp-bento-big--transform{font-size:var(--fs-h2)}
.hp-img-ph{border:1.5px dashed #c8d3df;background:#eef2f6;border-radius:16px;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#9aa8b8;width:100%}
.hp-img-ph svg{width:40px;height:40px;opacity:.75}
.hp-img-ph span{font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hp-img-ph img{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}
.grid-split.hp-balanced{align-items:stretch}
.grid-split.hp-balanced>div{display:flex;flex-direction:column;min-width:0}
.grid-split.hp-balanced .flex-col{height:100%;justify-content:space-between}
.hp-fill{flex:1 1 auto;display:flex}
.hp-case-photo{flex:1 1 auto;display:flex}
.display-lg.hp-h2-tight{font-size:var(--fs-h2)}
@media(max-width:860px){.hp-img-ph{min-height:200px}}
/* duplicate of the rule at ~6821 — kept in sync, both must change together */
.hp-hero{ min-height:auto; padding-bottom: 20px; }
/* the hero's .container carried 80px top and bottom on top of that, which is
   where the dead band under the badges actually came from */
.hp-hero > .container{padding-top:100px;padding-bottom:0}
.hp-hero .hp-hero-trust{margin-bottom:0}
.hp-hero .hp-hero-inner{padding-bottom:0}
.hp-hero-h1,.hp-hero-h2{font-size:var(--fs-h1);line-height:.95}
.hp-hero-lead{font-size:var(--fs-lead);line-height:1.75;color:#5b6c81;font-weight:400}
.hp-scroll-hint{margin-top:22px}
.trust-bar{margin-top:64px}
.problem-desc{color:#48586c;font-size: var(--fs-body);line-height:1.6}
.body-lg{color:#46566a}


/* ============================================================
   SERVICE-PAGE KIT — shared by GEO + Automation + Same-Day.
   Grouped selectors (each page loads only its own root, so these
   never collide). Moved out of per-page inline <style> 2026-07-12.
   ============================================================ */
.geopage .wrap,
.autopage .wrap { max-width:1160px;margin:0 auto;padding:0 40px }
.geopage .btns,
.autopage .auto-btns { display:flex;gap:12px;flex-wrap:wrap }
.geopage .geo-sec h2,
.autopage .auto-sec h2 { font-size:var(--fs-h2)}
.geopage .ph,
.autopage .ph,
.crm-page .ph { border:1.5px dashed var(--ph-line,#c8d3df);background:var(--ph-bg,#eef2f6);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:var(--ph-ink,#9aa8b8);text-align:center;padding:22px;width:100% }
.geopage .ph svg,
.autopage .ph svg,
.crm-page .ph svg { width:32px;height:32px;opacity:.8;flex:none }
.crm-page .ph b { font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase }
.crm-page .ph em { font-style:normal;font-size:var(--fs-caption);color:#a8b9c9;max-width:30ch;line-height:1.4 }
/* comparison table — pair variant of the homepage rwd-cmp (same palette, two text columns) */
.rwd-cmp--pair .rwd-cmp-head,
.rwd-cmp--pair .rwd-cmp-row{grid-template-columns:1fr 1fr}
.rwd-cmp--pair .rwd-cmp-h-them,
.rwd-cmp--pair .rwd-cmp-h-us{text-align:left}
.rwd-cmp--pair .rwd-cmp-desc{display:flex;align-items:center;gap:10px;font-weight:500}
.rwd-cmp--pair .rwd-cmp-desc--muted{color:#61748c}
.rwd-cmp--pair .rwd-cmp-desc--muted .rwd-cmp-x{font-size:var(--fs-body)}
.rwd-cmp--pair .rwd-cmp-us{text-align:left;font-weight:600;color:#0f1e38}
.rwd-cmp--pair .rwd-cmp-check{flex:none;display:inline-flex}
@media(max-width:640px){
  .rwd-cmp--pair .rwd-cmp-head,.rwd-cmp--pair .rwd-cmp-row{grid-template-columns:1fr 1fr}
  .rwd-cmp--pair .rwd-cmp-desc{font-size: var(--fs-caption);padding:12px 12px}
}

/* CRM image slots */
.crm-ph--wide{min-height:190px;margin-top:22px}
.crm-ph--included{min-height:300px;margin-top:30px;max-width:420px}
@media(max-width:1024px){.crm-ph--included{display:none}}

/* ── ABOUT believe: zigzag beats + motto CTA band ── */
.ab5-zig{display:grid;gap:26px;max-width:920px;margin:40px auto 0}
.ab5-zig-item{display:grid;grid-template-columns:.75fr 1.25fr;gap:30px;align-items:center;text-align:left}
.ab5-zig-item:nth-child(even) .ab5-zig-media{order:2}
.ab5-zig-media{min-height:170px;max-height:200px;border-radius:14px !important;
  background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.25) !important;color:#8FAAC6 !important}
.ab5-zig-media em{color:#7d97b3}
.ab5-zig-text b{display:block;font-size:var(--fs-body);font-weight:800;color:#fff}
.ab5-zig-text p{font-size: var(--fs-small);color:#AEC3D9;line-height:1.7;margin-top:8px;max-width:56ch}
.ab5-motto{display:flex;align-items:center;gap:20px;max-width:920px;margin:44px auto 0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:22px 26px}
.ab5-motto-thumb{flex:none;width:72px;height:72px;border-radius:50% !important;padding:0 !important;min-height:0 !important;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06) !important;border:1.5px dashed rgba(255,255,255,.3) !important;color:#8FAAC6 !important}
.ab5-motto-thumb svg{width:28px;height:28px}
.ab5-motto-quote{font-family:var(--font-display);text-transform:uppercase;font-weight:900;letter-spacing:-.5px;
  font-size:var(--fs-h3);line-height:1.1;color:#fff;margin:0}
.ab5-motto-attr{font-family:var(--font-mono,ui-monospace,monospace);font-size: var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:#6FA6D6;margin-top:7px}
.ab5-motto-btn{margin-left:auto;flex:none}
@media(max-width:860px){
  .ab5-zig-item{grid-template-columns:1fr}
  .ab5-zig-item:nth-child(even) .ab5-zig-media{order:0}
  .ab5-motto{flex-direction:column;align-items:flex-start}
  .ab5-motto-btn{margin-left:0}
}
/* hero copy: left-aligned, no centered/indented paragraphs */
.ab3-hero .hero-h1,.ab3-hero .body-lg,.ab3-hero .hero-lead{text-align:left}
.ab3-hero .hero-lead,.ab3-hero .ab-pullquote,
.hero-grid .hero-lead{margin-left:0 !important;margin-right:0 !important}
/* dark-hero pages: no white strip under the ticker */

.ab3-hero .hero-eyebrow-centered{justify-content:flex-start}
.ab3-hero .body-lg{margin-left:0;margin-right:0;max-width:52ch}
/* hero pull-quote: navy-friendly (no gray box) */
.ab3-hero .ab-pullquote{background:rgba(255,255,255,.06);border-left:3px solid #4A8EC2;border-radius:0 12px 12px 0;text-align:left}
.ab3-hero .ab-pullquote-text{color:#EAF2FA}
.ab3-hero .ab-pullquote-attr{color:#6FA6D6}

/* ── ABOUT story: centered header + original timeline centered below ── */
.ab4-story-lead{max-width:62ch;margin-left:auto;margin-right:auto}
.ab4-tlwrap{max-width:660px;margin:44px auto 0;text-align:left}

/* ── ABOUT 3.0 — mockup build (page 1270) ── */
/* pastel variant — Rocket 4.0 look: sky gradient, ink text, blue accent */
.ab3-hero--pastel{background:linear-gradient(168deg,#EAF3FB 0%,#DCEAF7 60%,#F6FAFD 100%)}
.ab3-hero--pastel .hero-h1{color:var(--ink)}
.ab3-hero--pastel .ab3-lead{color:var(--ink-mid)}
.ab3-hero--pastel .ab3-eyebrow{color:var(--accent) !important}
.ab3-hero--pastel .ab3-hero-media{display:flex;flex-direction:column;gap:14px;min-height:0}
.ab3-hero--pastel .ab-photo-placeholder{min-height:300px}
.ab3-hero--pastel .rwd-float-card{bottom:auto;top:246px}
.ab3-eyebrow{color:#F0A276 !important}
.ab3-blue{color:#4A8EC2}
.ab3-hero{ padding-bottom:0; }
.ab3-hero .breadcrumb{padding-top:0;margin-bottom:30px}
.ab3-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;padding-bottom:64px}
.ab3-hero:not(.ab3-hero--pastel) .hero-h1{color:#fff}
.ab3-lead{color:#AEC3D9;max-width:46ch;font-size: var(--fs-body);line-height:1.7}
.ab3-hero-media{min-height:380px}
.ab3-hero-ph{min-height:380px;background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.25) !important;color:#8FAAC6 !important;border-radius:20px !important}
.ab3-hero-ph em{color:#7d97b3}
/* floating shadow card over an image (reusable anywhere) */
.rwd-float-img{position:relative}
.rwd-float-img > img{width:100%;height:100%;object-fit:cover;border-radius:20px;display:block}
.rwd-float-card{position:absolute;left:-18px;bottom:26px;background:var(--white);border-radius:16px;padding:18px 22px;
  box-shadow:0 26px 56px -24px rgba(10,30,60,.5);max-width:240px}
.rwd-float-card small{display:block;font-size:var(--fs-caption);font-weight:600;color:var(--ink-light)}
.rwd-float-card b{display:block;font-family:var(--font-display);font-size:var(--fs-h2);color:var(--cta);line-height:1.05}
.rwd-float-card span{display:block;font-size:var(--fs-caption);color:var(--ink-mid);margin-top:4px;line-height:1.45}
.rwd-float-card--caption{display:flex;gap:12px;align-items:flex-start;background:var(--navy);max-width:290px;right:-14px;left:auto}
.rwd-float-card--caption span{color:#C8DAEC;margin:0;font-size: var(--fs-caption)}
.ab3-cap-ic{flex:none;width:40px;height:40px;border-radius:50%;background:var(--cta);display:flex;align-items:center;justify-content:center}
.ab3-cap-ic svg{width:20px;height:20px;stroke:#fff}
/* icon stats bar */
.ab3-statsbar{background:var(--white);border-bottom:1px solid var(--border);padding:26px 0}
.ab3-statsrow{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ab3-stat{display:flex;align-items:center;gap:12px}
.ab3-stat-ic{flex:none;width:42px;height:42px;border-radius:12px;background:var(--accent-pale);display:flex;align-items:center;justify-content:center}
.ab3-stat-ic svg{width:21px;height:21px;stroke:var(--accent)}
.ab3-stat b{display:block;font-family:var(--font-body,inherit);font-weight:800;font-size:var(--fs-h4);color:var(--ink);line-height:1.1}
.ab3-stat small{display:block;font-size:var(--fs-caption);color:var(--ink-light)}
/* story */
.ab3-story{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.ab3-story-ph{min-height:340px;border-radius:20px !important}
/* values band */
.ab3-values{background:var(--navy);border-radius:24px;margin:0 auto;max-width:1240px;padding:56px 40px;position:relative}
.ab3-eyebrow--light{color:#6FA6D6 !important}
.ab3-values-h{color:#fff}
.ab3-values-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:38px}
.ab3-value{text-align:center}
.ab3-value-ic{width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center}
.ab3-value-ic svg{width:24px;height:24px;stroke:#fff}
.ab3-value b{display:block;font-size:var(--fs-small);font-weight:800;color:#fff}
.ab3-value p{font-size: var(--fs-caption);color:#93a9c1;margin-top:6px;line-height:1.5}
/* process strip */
.ab3-steps{display:flex;align-items:flex-start;justify-content:center;gap:10px;margin-top:40px}
.ab3-step{flex:1;max-width:180px;text-align:center}
.ab3-step-ic{width:58px;height:58px;border-radius:50%;background:var(--navy);margin:0 auto 12px;display:flex;align-items:center;justify-content:center}
.ab3-step-ic svg{width:24px;height:24px;stroke:#fff}
.ab3-step b{display:block;font-size:var(--fs-body);font-weight:800;color:var(--ink)}
.ab3-step p{font-size: var(--fs-caption);color:var(--ink-mid);margin-top:6px;line-height:1.5}
.ab3-step-arrow{flex:none;width:56px;height:0;border-top:2px dashed var(--accent);margin-top:29px;position:relative}
.ab3-step-arrow::after{content:"";position:absolute;right:-2px;top:-5px;border:4px solid transparent;border-left-color:var(--accent)}
/* team */
.ab3-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px}
.ab3-team-card{background:var(--white);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.ab3-team-ph{min-height:210px;border-radius:0 !important;border:0 !important;border-bottom:1.5px dashed var(--border) !important;background:var(--navy) !important;color:#8FAAC6 !important}
.ab3-team-info{padding:16px 18px}
.ab3-team-info b{display:block;font-size:var(--fs-body);font-weight:800;color:var(--ink)}
.ab3-team-info span{display:block;font-size: var(--fs-caption);font-weight:700;color:var(--accent);margin-top:2px}
.ab3-team-info p{font-size:var(--fs-caption);color:var(--ink-mid);margin-top:8px;line-height:1.55}
/* partners strip */
.ab3-proofrow .rwd-partners{margin-bottom:64px}
.rwd-partners{text-align:center}
.rwd-partners-eyebrow{font-family:var(--font-mono,ui-monospace,monospace);font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.rwd-partners-title{font-size:var(--fs-h4);font-weight:800;color:var(--ink);margin-top:8px}
.rwd-partners-row{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap;margin-top:26px}
.rwd-partner{display:inline-flex;flex-direction:column;align-items:center;font-weight:800;font-size: var(--fs-h5);letter-spacing:.06em;color:#9AA6B5;line-height:1.1;filter:grayscale(1);transition:.16s}
.rwd-partner small{font-size: var(--fs-label);letter-spacing:.3em;font-weight:600;color:#B4BEC9;margin-top:2px}
.rwd-partner:hover{filter:none;color:var(--ink)}
.rwd-partner--kabobji{font-style:italic;letter-spacing:0}
.rwd-partner--squalo{letter-spacing:.2em}
.rwd-partners-link{display:inline-block;margin-top:24px;font-size: var(--fs-caption);font-weight:800;color:var(--cta) !important;text-decoration:none}
.rwd-partners-link:hover{text-decoration:underline}
/* quote + photo card */
.rwd-quote-photo{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;background:var(--cream,#fff3df);border-radius:20px;padding:34px 38px}
.rwd-qp-mark{display:block;font-family:var(--font-display);font-size:var(--fs-h1);color:var(--cta);line-height:.6;margin-bottom:14px}
.rwd-qp-quote p{font-size: var(--fs-body);color:var(--ink);line-height:1.65;font-weight:500}
.rwd-qp-stars{color:#FBBC05;font-size:var(--fs-body);letter-spacing:2px;margin-top:14px}
.rwd-qp-attr{font-size:var(--fs-caption);color:var(--ink-mid);margin-top:6px}
.rwd-qp-media img{width:100%;border-radius:16px;display:block}
.rwd-qp-ph{min-height:250px;border-radius:16px !important;background:#fff !important}
@media(max-width:1024px){
  .ab3-hero-grid,.ab3-story{grid-template-columns:1fr}
  .ab3-values-grid{grid-template-columns:repeat(3,1fr)}
  .ab3-steps{flex-wrap:wrap}.ab3-step-arrow{display:none}
  .ab3-team-grid{grid-template-columns:repeat(2,1fr)}
  .rwd-quote-photo{grid-template-columns:1fr}
  .ab3-statsrow{justify-content:center}
}

/* ── ABOUT 2.0 — Navy Bookends (page 1270) ── */
.ab2-accent{color:#4A8EC2}
.ab2-hero .ab-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;position:relative}
.ab2-hero .hero-h1{color:#fff}
.ab2-hero .hero-h1-accent{color:#4A8EC2}
.ab2-hero .hero-eyebrow-centered{color:#6FA6D6;justify-content:flex-start}
.ab2-hero .hero-eyebrow-line{background:rgba(255,255,255,.25)}
.ab2-hero .body-lg{color:#AEC3D9}
.ab2-hero .ab-photo-placeholder{background:rgba(255,255,255,.05);border:1.5px dashed rgba(255,255,255,.28);color:#8FAAC6;border-radius:18px}
.ab2-hero .ab-photo-label{color:#C8DAEC}
.ab2-hero .ab-photo-hint{color:#7d97b3}
.ab2-hero .ab-name-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:16px}
.ab2-hero .ab-name-card-name{color:#fff}
.ab2-hero .ab-name-card-role{color:#93a9c1}
.ab2-hero .ab-name-tag{background:rgba(74,142,194,.16);border:1px solid rgba(74,142,194,.32);color:#C8DAEC}
/* timeline: 3 text roles only + era thumbs */
.ab-timeline-year{font-family:var(--font-mono,ui-monospace,monospace);font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;color:#4A8EC2;text-transform:uppercase}
.ab-timeline-title{font-family:var(--font-body,inherit);font-size:var(--fs-body);font-weight:800;color:var(--ink);margin-top:4px;text-transform:none;letter-spacing:0}
.ab-timeline-desc{font-size:var(--fs-small);color:var(--ink-mid);line-height:1.65;margin-top:6px}

/* principles: quieter type */
.ab-value-title{font-family:var(--font-body,inherit);font-size:var(--fs-body);font-weight:800;text-transform:none;letter-spacing:0}
.ab-value-desc{font-size:var(--fs-small);line-height:1.65}
.ab-value-num{color:#4A8EC2}
/* motto band — navy, photo chip + quote */
.ab2-motto{background:var(--navy,#0A1E3C);padding:72px 0;text-align:center;position:relative;overflow:hidden}
.ab2-motto::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(122,170,220,.1) 1px,transparent 1px);background-size:24px 24px}
.ab2-motto .container{position:relative}
.ab2-motto-chip{width:84px;height:84px;border-radius:50%;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06) !important;border:1.5px dashed rgba(255,255,255,.3) !important;color:#8FAAC6 !important;padding:0 !important;min-height:0 !important}
.ab2-motto-chip svg{width:30px;height:30px}
.ab2-motto-quote{font-family:var(--font-display);text-transform:uppercase;font-weight:900;letter-spacing:-.5px;
  font-size:var(--fs-h2);line-height:1.05;color:#fff;margin:0}
.ab2-motto-quote::after{content:""}
.ab2-motto-attr{font-family:var(--font-mono,ui-monospace,monospace);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:#6FA6D6;margin-top:14px}
.ab2-motto .ab-believe-stats{justify-content:center;margin-top:34px}
@media(max-width:960px){.ab2-hero .ab-hero-grid{grid-template-columns:1fr}}

/* ── fast link — "need it in 24 hours?" text link (reusable on any page) ── */
.rwd-fastlink-wrap{text-align:center;margin-top:14px}
.rwd-fastlink{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-body);font-weight:800;color:var(--cta) !important;
  text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:2px;text-underline-offset:5px}
.rwd-fastlink:hover{color:var(--cta-dark) !important;text-decoration-style:solid}

/* cost band — image + story layout, tight */
.crm-cost-sec{padding:56px 0}
.crm-band-grid--story{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
.crm-ph--cost{min-height:300px;background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.25) !important;color:#8FAAC6 !important}
.crm-ph--cost em{color:#7d97b3}
.crm-band-title{font-family:var(--font-display);text-transform:uppercase;font-weight:900;letter-spacing:-.5px;font-size:var(--fs-h3);color:#fff;margin:0 0 24px;line-height:1.05}
.crm-band-grid--story .crm-band-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 30px;margin:0}
.crm-band-grid--story .btn--orange{margin-top:28px}
@media(max-width:1024px){.crm-band-grid--story{grid-template-columns:1fr}.crm-ph--cost{display:none}}

/* ── RWD SPLIT — reusable 50/50 image + story section (any page) ── */
.rwd-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.rwd-split-media{position:relative;min-height:480px;display:flex}
.rwd-split-media img{width:100%;height:100%;object-fit:cover;display:block}
.rwd-split-ph{border-radius:0 !important;border:0 !important;border-right:1.5px dashed var(--border) !important;min-height:100%}
.rwd-split-body{padding:72px min(7vw,96px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.rwd-split-body .body-lg{max-width:56ch}
.rwd-split-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.rwd-split-list li{position:relative;padding-left:28px;font-size:var(--fs-body);color:var(--ink-mid);line-height:1.5}
.rwd-split-list li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;background:#16a34a;
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="black"/></svg>') center/contain no-repeat;mask:none}
.rwd-split-list li::after{content:"\2713";position:absolute;left:3.5px;top:2px;color:#fff;font-size:var(--fs-label);font-weight:700}
.rwd-split--flip .rwd-split-media{order:2}
@media(max-width:1024px){
  .rwd-split{grid-template-columns:1fr}
  .rwd-split-media{min-height:300px;order:0 !important}
  .rwd-split-body{padding:48px 24px}
}

/* ── SMS duel (crm) ── */
.rwd-sms-duel{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:960px;margin:0 auto}
.rwd-phone{border:1px solid var(--border);border-radius:22px;background:var(--base);overflow:hidden;display:flex;flex-direction:column}
.rwd-phone--us{background:#E9F4EE;border-color:#CDE5D6;box-shadow:0 26px 54px -34px rgba(42,122,80,.5)}
.rwd-phone--us .rwd-phone-top{background:#F2FAF5;border-bottom-color:#CDE5D6}
.rwd-phone--us .rwd-email-preview{border-color:#CDE5D6}
.crm-ph--sms{max-width:760px;margin:0 auto 28px;min-height:170px}
.rwd-phone--them{filter:saturate(.35);background:#F3F5F8}
.rwd-phone-top{display:flex;align-items:center;gap:8px;padding:13px 18px;background:var(--white);border-bottom:1px solid var(--border);font-size:var(--fs-caption);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.rwd-phone-dot{width:9px;height:9px;border-radius:50%;background:#16a34a}
.rwd-phone-dot--off{background:#c4cfda}
.rwd-sms-thread{padding:20px 18px;display:grid;gap:12px}
.rwd-sms{max-width:82%;padding:11px 14px;border-radius:16px;font-size:var(--fs-caption);line-height:1.5}
.rwd-sms p{margin:0}
.rwd-sms time{display:block;margin-top:5px;font-size:var(--fs-label);letter-spacing:.05em;color:var(--ink-faint);text-transform:uppercase}
.rwd-sms--in{background:#E4E9F0;color:var(--ink);border-bottom-left-radius:4px;justify-self:start}
.rwd-sms--out{background:var(--cta);color:#fff;border-bottom-right-radius:4px;justify-self:end}
.rwd-sms--out time{color:rgba(255,255,255,.75)}
.rwd-sms-gap{text-align:center;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);padding:8px 0}
.rwd-sms-lost{margin-top:auto;text-align:center;padding:13px;background:#FCEBEB;color:#A32D2D;font-size:var(--fs-caption);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.rwd-email-preview{margin:0 18px 20px;background:var(--white);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.rwd-email-line{font-size:var(--fs-label);color:var(--ink-faint)}
.rwd-email-subj{font-size: var(--fs-caption);font-weight:700;color:var(--ink);margin-top:5px}
.rwd-email-preview p{font-size: var(--fs-caption);color:var(--ink-mid);margin:6px 0 0;line-height:1.5}
.rwd-email-tag{display:inline-block;margin-top:9px;font-size: var(--fs-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--crm-pale);color:var(--cta);padding:3px 8px;border-radius:4px}
@media(max-width:860px){.rwd-sms-duel{grid-template-columns:1fr}}

/* ── response-cost calculator (crm) ── */
.crm-calc{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:920px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:18px;padding:34px 36px;box-shadow:var(--shadow-md)}
.crm-calc-field{display:block;font-size:var(--fs-caption);font-weight:700;color:var(--ink);margin-bottom:22px}
.crm-calc-field output{float:right;font-weight:800;color:var(--cta)}
.crm-calc-field input[type=range]{width:100%;margin-top:10px;accent-color:var(--cta)}
.crm-calc-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-small);color:var(--ink-mid);padding:9px 0;border-bottom:1px solid var(--base-tint)}
.crm-calc-row b:last-child{font-size: var(--fs-body);color:var(--ink)}
.crm-calc-row--muted{opacity:.65}
.crm-calc-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;margin-top:14px;background:var(--crm-pale);border-radius:12px;font-size:var(--fs-small);font-weight:700;color:var(--ink)}
.crm-calc-total b{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--cta)}
.crm-calc-note{font-size: var(--fs-label);color:var(--ink-faint);margin-top:12px;line-height:1.5}
@media(max-width:860px){.crm-calc{grid-template-columns:1fr;padding:24px}}
.crm-ph--team{min-height:210px;margin-top:26px;max-width:340px}
.crm-process-wrap{display:grid;grid-template-columns:.55fr 1.45fr;gap:26px;align-items:stretch;margin-top:34px}
.crm-process-wrap .crm-ph--tall{min-height:100%;margin-top:0}
.crm-process-wrap .crm-process-grid{margin-top:0}
@media(max-width:1024px){
  .crm-process-wrap{grid-template-columns:1fr}
  .crm-process-wrap .crm-ph--tall{display:none}
  .crm-ph--team{display:none}
}
.geopage .geo-hero:before,
.autopage .auto-hero:before { content:"";position:absolute;inset:0;background-image:radial-gradient(var(--dots) 1px,transparent 1px);background-size:24px 24px }
.geopage .microtrust b,
.autopage .creds b { color:var(--head);font-weight:600 }
.geopage .step p,
.autopage .auto-step p { font-size:var(--fs-caption);color:var(--muted);margin-top:7px }
.geopage .l-row .sig small,
.autopage .chk .t small { display:block;font-weight:400;color:var(--muted);font-size:var(--fs-caption);margin-top:2px }
.geopage .metric,
.autopage .wcard,
.autopage .auto-step { background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px }
.geopage .geo-faqgrid,
.autopage .auto-faqgrid { display:grid;grid-template-columns:1.15fr .85fr;gap:24px;margin-top:32px;align-items:stretch }
.geopage .faq,
.autopage .faq { display:grid;gap:12px;align-content:start }
.geopage .qa,
.autopage .qa { background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px }
.geopage .qa p,
.autopage .qa p { color:var(--muted);font-size:var(--fs-small);margin-top:8px }
.geopage .geo-ctain,
.autopage .auto-ctain { display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center }
.geopage .geo-ctaband h2,
.autopage .auto-ctaband h2 { font-size:var(--fs-h2)}
.geopage .geo-ctaband p,
.autopage .auto-ctaband p { color:var(--muted);margin-top:14px;max-width:48ch;font-size: var(--fs-body)}
.geopage .geo-ctalist,
.autopage .auto-ctalist { list-style:none;display:grid;gap:11px }
.geopage .geo-ctalist li,
.autopage .auto-ctalist li { display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);color:var(--muted) }
.geopage .geo-ctalist .tick,
.autopage .tick { flex:none;width:18px;height:18px;border-radius:50%;background:var(--good-bg);border:1px solid var(--good-line);display:flex;align-items:center;justify-content:center;margin-top:2px }
.geopage .geo-ctalist .tick svg,
.autopage .tick svg { width:10px;height:10px;stroke:var(--good-ink);stroke-width:3;fill:none }
.autopage .tally .msg,
.sd24 .inc-t { font-weight:700;font-size:var(--fs-body)}

/* ============================================================
   AI SEARCH / GEO  (/ai-search-optimization/)
   ============================================================ */
.geopage { --hero-bg:linear-gradient(170deg,#EAF3FB 0%,#DCEAF7 60%,#F0F5FA 100%);
  --dots:rgba(74,142,194,.16);
  --head:var(--ink); --muted:#61748c; --accent:#4A8EC2; --eyebrow:#4A8EC2;
  --gcta:#E8440A; --cta-shadow:rgba(232,96,15,.7); --ghost-border:rgba(18,41,74,.18);
  --line:#dbe7f2; --panel:rgba(255,255,255,.75); --panel-line:#d3e3f1; --eng-line:#e4eef7;
  --bad-ink:#C05A2E; --bad-bg:#FCEDE2; --bad-line:#F3D8C4;
  --good-ink:#2E8B5F; --good-bg:#E4F4EB; --good-line:#C6E6D3;
  --body-bg:#FAFCFE; --tint:#F2F8FD;
  --old-bg:#FDF0E7; --old-line:#F4DCC8; --old-ink:#C05A2E;
  --new-bg:#E7F5EE; --new-line:#CAE7D7;
  --ph-bg:#E9F1F9; --ph-line:#CBDCEB; --ph-ink:#94A9BE;
  --quote-bg:#FDEBD6; --quote-line:#F4DBBB; --quote-ink:#9A7343;
  --lav:#F0EDFB; --lav-line:#DFD8F1;
  --display:var(--font-display);
  --body:var(--font-body);
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace; }
.geopage :is(h1, .geopage h2, .geopage h3, .geopage h4, .geopage h5, .geopage p, .geopage ul, .geopage li, .geopage cite, .geopage figure) { margin:0;padding:0 }
.geopage * { box-sizing:border-box }
.geopage { font-family:var(--body);line-height:1.6;color:var(--head);background:var(--body-bg) }
.geopage h1, .geopage h2, .geopage h3, .geopage h4, .geopage h5 { font-family:var(--display);text-transform:uppercase;font-weight:900;letter-spacing:-.6px;line-height:1 }
.geopage .geo-eyebrow { font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--eyebrow) }
.geopage .geo-sec { padding:76px 0 }
.geopage .geo-geo-sec--tint { background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line) }
.geopage .geo-sec .sub { color:var(--muted);margin-top:12px;max-width:62ch;font-size: var(--fs-body)}
.geopage .geo-center>.wrap>.geo-eyebrow, .geopage .geo-center>.wrap>h2, .geopage .geo-center>.wrap>.sub { display:block;text-align:center }
.geopage .geo-center>.wrap>.sub { margin-left:auto;margin-right:auto }
.geopage .ph b { font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase;display:block }
.geopage .ph em { font-style:normal;font-size:var(--fs-caption);color:#a8b9c9;max-width:30ch;line-height:1.4 }
.geopage .geo-hero { background:var(--hero-bg);position:relative;overflow:hidden;padding:64px 0 44px;border-bottom:1px solid var(--line) }
.geopage .hin { position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center }
.geopage .geo-hero h1 { font-size:var(--fs-h1);margin-top:14px }
.geopage .geo-hero h1 span { color:var(--accent) }
.geopage .geo-hero .lead { color:var(--muted);font-size: var(--fs-h5);margin-top:18px;max-width:45ch }
.geopage .geo-hero .btns { margin-top:26px }
.geopage .microtrust { display:flex;gap:22px;margin-top:26px;flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);letter-spacing:.04em }
.geopage .engines { background:var(--panel);border:1px solid var(--panel-line);border-radius:18px;padding:22px;box-shadow:0 22px 46px -32px rgba(10,30,60,.32);backdrop-filter:blur(3px) }
.geopage .eng-h { font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:15px }
.geopage .eng { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-radius:12px;background:#fff;margin-bottom:8px;border:1px solid var(--eng-line) }
.geopage .eng .eng-logo { width:40px;height:40px;object-fit:contain;flex:0 0 auto }
.geopage .eng .name { font-weight:600;font-size:var(--fs-small);flex:1;min-width:0 }
.geopage .eng .name small { display:block;font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);font-weight:400;margin-top:2px }
.geopage .pillbad, .geopage .pillgood { font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:30px;white-space:nowrap }
.geopage .pillbad { color:var(--bad-ink);background:var(--bad-bg);border:1px solid var(--bad-line) }
.geopage .pillgood { color:var(--good-ink);background:var(--good-bg);border:1px solid var(--good-line) }
.geopage .eng-note { font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);margin-top:13px;padding-top:12px;border-top:1px dashed var(--panel-line) }
.geopage .answer { display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center }
.geopage .chat { background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 26px 58px -36px rgba(10,30,60,.45) }
.geopage .chat-bar { display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:#fbfdff }
.geopage .dot { width:9px;height:9px;border-radius:50%;background:#dbe5ef }
.geopage .chat-bar .who { font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:#93a5b8;margin-left:6px }
.geopage .chat-q { padding:19px 22px;font-size:var(--fs-body);font-weight:600;border-bottom:1px solid var(--line) }
.geopage .chat-q b { color:var(--accent);font-weight:600 }
.geopage .chat-a { padding:20px 22px }
.geopage .chat-a .pre { font-size:var(--fs-small);color:var(--muted);margin-bottom:13px }
.geopage .pick { display:flex;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px;align-items:flex-start;background:#fbfdff }
.geopage .pick .r { font-family:var(--mono);font-size:var(--fs-label);font-weight:600;color:#93a5b8;flex:none;padding-top:2px }
.geopage .pick h5 { font-family:var(--body);font-weight:700;font-size:var(--fs-small);text-transform:none;letter-spacing:0 }
.geopage .pick p { font-size:var(--fs-caption);color:var(--muted);margin-top:2px }
.geopage .pick--you { border-color:var(--good-ink);background:var(--good-bg) }
.geopage .pick--you .r { color:var(--good-ink) }
.geopage .flag { display:inline-block;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--good-ink);padding:3px 7px;border-radius:4px;margin-left:7px;vertical-align:2px }
.geopage .chat-cite { font-family:var(--mono);font-size:var(--fs-label);color:#93a5b8;margin-top:11px;padding-top:11px;border-top:1px dashed var(--line) }
.geopage .two { display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px }
.geopage .panel2 { border-radius:18px;padding:28px }
.geopage .panel2 h3 { font-size: var(--fs-h4);margin-top:8px }
.geopage .panel2 .tag { font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;font-weight:600 }
.geopage .panel2 ul { margin:14px 0 0 17px;font-size:var(--fs-small);color:var(--muted) }
.geopage .panel2 li { margin:7px 0 }
.geopage .p-old { background:var(--old-bg);border:1px solid var(--old-line) }
.geopage .p-old .tag { color:var(--old-ink) }
.geopage .p-new { background:var(--new-bg);border:1px solid var(--new-line) }
.geopage .p-new .tag { color:var(--good-ink) }
.geopage .steps { display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px }
.geopage .step { background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column }
.geopage .step .ph { border:0;border-radius:0;border-bottom:1px dashed var(--ph-line);height:120px;min-height:120px;gap:6px }
.geopage .step .ph svg { width:24px;height:24px }
.geopage .step .txt { padding:20px }
.geopage .step .num { font-family:var(--mono);font-size:var(--fs-label);font-weight:600;color:var(--accent) }
.geopage .step:last-child .num { color:var(--good-ink) }
.geopage .step h4 { font-size: var(--fs-body);margin-top:8px }
.geopage .ledger { margin-top:34px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;max-width:920px;margin-left:auto;margin-right:auto }
.geopage .l-row { display:grid;grid-template-columns:1fr 140px 150px;align-items:center;border-bottom:1px solid var(--line) }
.geopage .l-row:last-child { border-bottom:0 }
.geopage .l-head { background:var(--head);color:#fff }
.geopage .l-head div { padding:14px 22px;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase }
.geopage .l-head div:nth-child(2), .geopage .l-head div:nth-child(3) { text-align:center }
.geopage .l-row .sig { padding:16px 22px;font-weight:600;font-size:var(--fs-small)}
.geopage .l-row .now, .geopage .l-row .fix { padding:10px 14px;margin:8px 14px 8px 0;border-radius:8px;text-align:center;font-family:var(--mono);font-size:var(--fs-caption)}
.geopage .l-row .now { color:var(--bad-ink);font-weight:600 }
.geopage .l-row .fix { color:var(--good-ink);font-weight:600;background:rgba(46,139,95,.05) }
.geopage .l-row:nth-child(even):not(.l-head) { background:#fbfdff }
.geopage .proof { display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch;background:#EAF4EE;border:1px solid #CFE5D8;border-radius:18px;padding:20px }
.geopage .quote { background:transparent;border:0;border-radius:0;padding:20px 14px;display:flex;flex-direction:column;justify-content:center }
.geopage .quote p { font-family:var(--display);text-transform:uppercase;font-weight:900;font-size: var(--fs-h4);line-height:1.14;letter-spacing:-.4px }
.geopage .quote cite { font-style:normal;font-family:var(--mono);font-size:var(--fs-label);color:#2A7A50;letter-spacing:.08em;margin-top:16px }
.geopage .metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px }
.geopage .metric .big { font-family:var(--display);font-weight:900;font-size: var(--fs-h2);letter-spacing:-1px;color:var(--head);line-height:1 }
.geopage .metric .lbl { font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:8px }
.geopage .metric .ctx { font-size:var(--fs-caption);color:var(--muted);margin-top:7px }
.geopage .geo-chart { display:flex;gap:34px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;max-width:920px;margin-left:auto;margin-right:auto }
.geopage .geo-donut { width:170px;height:170px;flex:none }
.geopage .geo-legend { display:grid;gap:9px;min-width:260px }
.geopage .geo-leg { display:flex;align-items:center;gap:10px;font-size:var(--fs-caption);color:var(--muted) }
.geopage .geo-leg i { width:12px;height:12px;border-radius:3px;flex:none }
.geopage .geo-leg b { margin-left:auto;color:var(--head);font-family:var(--mono);font-size:var(--fs-caption)}
.geopage .geo-leg-note { font-size:var(--fs-caption);color:#94A9BE;max-width:34ch;margin-top:6px }
.geopage .qa h3 { font-family:var(--body);text-transform:none;letter-spacing:0;font-size: var(--fs-body);font-weight:700;line-height:1.4 }
.geopage .geo-ctaband { background:linear-gradient(165deg,#EAF3FB,#DCEAF7);border-top:1px solid var(--line);padding:70px 0 }
.geopage .geo-ctaband .btns { margin-top:24px }
.geopage .geo-ctacard { background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 24px 50px -34px rgba(10,30,60,.4) }
.geopage .geo-ctacard .lbl { font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:14px }
.geopage .trustbar { background:#fff;border-bottom:1px solid var(--line);padding:34px 0 }
.geopage .trustbar-in { display:flex;align-items:center;gap:34px;flex-wrap:wrap;justify-content:center }
.geopage .trustbar .tb-label { font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);flex:none }
.geopage .tb-logos { display:flex;align-items:center;gap:16px;flex-wrap:wrap;flex:1;justify-content:flex-end }
.geopage .tb-logo { width:132px;height:52px;border:1.5px dashed var(--ph-line);background:var(--ph-bg);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--ph-ink);font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:6px }
.geopage .casestudy { background:#0A1E3C;color:#fff;padding:82px 0;position:relative;overflow:hidden }
.geopage .casestudy:before { content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:26px 26px }
.geopage .cs-in { position:relative;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center }
.geopage .casestudy .geo-eyebrow { color:#7FB2DC }
.geopage .casestudy h2 { color:#fff;font-size:var(--fs-h2);margin-top:14px }
.geopage .casestudy h2 span { color:#7FB2DC }
.geopage .cs-lead { color:#A9C1D8;font-size: var(--fs-body);margin-top:18px;max-width:46ch }
.geopage .cs-quote { border-left:3px solid var(--cta);padding-left:18px;margin-top:24px }
.geopage .cs-quote p { font-family:var(--display);text-transform:uppercase;font-weight:900;letter-spacing:-.4px;font-size: var(--fs-h4);line-height:1.16;color:#fff }
.geopage .cs-quote cite { font-style:normal;font-family:var(--mono);font-size:var(--fs-label);color:#8FAAC6;letter-spacing:.08em;margin-top:12px;display:block }
.geopage .cs-stats { display:flex;gap:30px;margin-top:28px;flex-wrap:wrap }
.geopage .cs-stat .n { font-family:var(--display);font-size:var(--fs-h2);letter-spacing:-1px;line-height:1;color:#fff }
.geopage .cs-stat .l { font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:#8FAAC6;margin-top:7px }
.geopage .casestudy .btns { margin-top:28px }
.geopage .cs-media .ph { background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.24);color:#8FAAC6;min-height:360px }
.geopage .cs-media .ph em { color:#7d97b3 }
@media(max-width:960px){
.geopage .cs-in{grid-template-columns:1fr}
.geopage .tb-logos{justify-content:flex-start}
.geopage .casestudy{padding:56px 0}
.geopage .hin, .geopage .answer, .geopage .two, .geopage .proof, .geopage .geo-ctain, .geopage .geo-faqgrid{grid-template-columns:1fr}
.geopage .steps, .geopage .metrics{grid-template-columns:1fr 1fr}
.geopage .wrap{padding:0 24px}
.geopage .geo-sec{padding:56px 0}
}

/* ============================================================
   BUSINESS AUTOMATION  (/business-automation/)
   ============================================================ */
.autopage { --hero-bg:linear-gradient(166deg,#F1EDFB 0%,#E9EAF8 50%,#FBF1E6 100%);
  --dots:rgba(122,105,196,.16);
  --head:var(--ink); --muted:var(--ink-mid); --accent:#6B3FBF; --a-eyebrow:#6B3FBF;
  --a-cta:var(--cta); --cta-sh:rgba(232,68,10,.55); --ghost:rgba(42,37,81,.18);
  --line:#e2ddf1; --panel:rgba(255,255,255,.82); --panel-solid:#fff; --panel-line:#ddd6f0;
  --bad-ink:#C25A66; --bad-bg:#FCEBEC; --bad-line:#F3D4D7;
  --good:#8FCBAD; --good-ink:#3E8C6C; --good-bg:#E3F3EC; --good-line:#C5E5D5;
  --body-bg:#FCFBFE; --a-tint:#F5F3FB;
  --ph-bg:#EFECF9; --ph-line:#DAD3EE; --ph-ink:#9C95BC; --ph-ink2:#aca5c9;
  --a-cream:#FBF1E6; --cream-line:#F0DEC6; --cream-ink:#94713E;
  --c1:#6B3FBF; --c2:#B3A8E0; --c3:#F0A97C; --c4:#8FB8DC; --c5:#EFD9A6;
  --a-display:var(--font-display); --a-body:var(--font-body);
  --a-mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
  font-family:var(--a-body);line-height:1.6;color:var(--head);background:var(--body-bg); }
.autopage :is(h1, .autopage h2, .autopage h3, .autopage h4, .autopage h5, .autopage p, .autopage ul, .autopage li, .autopage cite, .autopage figure) { margin:0;padding:0 }
.autopage * { box-sizing:border-box }
.autopage h1, .autopage h2, .autopage h3, .autopage h4 { font-family:var(--a-display);text-transform:uppercase;font-weight:900;letter-spacing:-.6px;line-height:1 }
.autopage .auto-eyebrow { font-family:var(--a-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--a-eyebrow) }
.autopage .auto-sec { padding:76px 0 }
.autopage .auto-sec--tint { background:var(--a-tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line) }
.autopage .auto-sec .sub { color:var(--muted);margin-top:12px;max-width:64ch;font-size: var(--fs-body)}
.autopage .ph b { font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase }
.autopage .ph em { font-style:normal;font-size:var(--fs-caption);color:var(--ph-ink2);max-width:30ch;line-height:1.4 }
.autopage .auto-hero { background:var(--hero-bg);position:relative;overflow:hidden;padding:64px 0 44px;border-bottom:1px solid var(--line) }

.autopage .hin { position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center }
.autopage .auto-hero h1 { font-size:var(--fs-h1);margin-top:14px }
.autopage .auto-hero h1 span { color:var(--accent) }
.autopage .auto-hero .lead { color:var(--muted);font-size: var(--fs-h5);margin-top:18px;max-width:47ch }
.autopage .auto-hero .auto-btns { margin-top:26px }
.autopage .creds { display:flex;gap:24px;margin-top:26px;flex-wrap:wrap;font-family:var(--a-mono);font-size:var(--fs-label);color:var(--muted);letter-spacing:.03em }
.autopage .auto-card { background:var(--panel);border:1px solid var(--panel-line);border-radius:18px;padding:24px;box-shadow:0 22px 46px -32px rgba(42,37,81,.3) }
.autopage .auto-card .h { font-family:var(--a-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--a-eyebrow);margin-bottom:16px }
.autopage .donut-wrap { display:flex;gap:24px;align-items:center;justify-content:center }
.autopage .auto-card .h { text-align:center }
.autopage .a-donut { width:160px;height:160px;border-radius:50%;flex:none;position:relative;background:conic-gradient(var(--c1) 0 22%,var(--c2) 22% 42%,var(--c3) 42% 58%,var(--c4) 58% 72%,var(--c5) 72% 84%,var(--good) 84% 100%) }
.autopage .a-donut:after { content:"";position:absolute;inset:28px;background:var(--panel-solid);border-radius:50% }
.autopage .a-donut b { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;font-family:var(--a-display);font-size: var(--fs-h4)}
.autopage .a-donut b small { font-family:var(--a-mono);font-size:8px;letter-spacing:.1em;color:var(--muted);font-weight:500;margin-top:3px;text-transform:uppercase }
.autopage .leg { display:grid;gap:7px;font-size:var(--fs-caption);color:var(--muted) }
.autopage .leg i { display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:-1px }
.autopage .leg .real { font-weight:700;color:var(--good-ink) }
.autopage .auto-card .f { font-family:var(--a-mono);font-size:var(--fs-label);color:var(--muted);margin-top:14px;padding-top:13px;border-top:1px dashed var(--panel-line);text-align:center }
.autopage .tools, .crm-tools { background:#fff;border-bottom:1px solid var(--line);padding:40px 0 }
.autopage .tools-lab, .crm-tools .tools-lab { font-family:var(--a-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:center }
.autopage .toolgrid, .crm-tools .toolgrid { display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin-top:22px }
.autopage .tool, .crm-tools .tool { height:64px;border:1px solid var(--line);border-radius:12px;background:#fcfbfe;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;transition:.16s }
.autopage .tool:hover, .crm-tools .tool:hover { border-color:var(--accent);transform:translateY(-2px) }
.autopage .tool img, .crm-tools .tool img { height:22px;width:auto;max-width:80%;display:block;filter:grayscale(1) opacity(.72);transition:.16s }
.autopage .tool:hover img, .crm-tools .tool:hover img { filter:none;opacity:1 }
.autopage .tool span, .crm-tools .tool span { font-family:var(--a-mono);font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ph-ink);text-align:center;line-height:1.2 }
.autopage .tools-note { text-align:center;font-family:var(--a-mono);font-size:var(--fs-label);color:var(--muted);margin-top:18px }
.autopage .uc { border-bottom:1px solid var(--line) }
.autopage .zig { display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:430px }
.autopage .zg-txt { padding:56px 54px;display:flex;flex-direction:column;justify-content:center }
.autopage .zg-txt .k { font-family:var(--a-mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--a-eyebrow);font-weight:600 }
.autopage .zg-txt h3 { font-size:var(--fs-h3);margin-top:12px }
.autopage .zg-block { margin-top:16px;font-size:var(--fs-small);color:var(--muted);line-height:1.65 }
.autopage .zg-block b { color:var(--bad-ink);font-family:var(--a-mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:5px;font-weight:600 }
.autopage .zg-block.fix b { color:var(--good-ink) }
.autopage .zg-res { margin-top:18px;padding-top:15px;border-top:1px solid var(--line);font-family:var(--a-mono);font-size:var(--fs-caption);color:var(--good-ink);font-weight:600;line-height:1.6 }
.autopage .zg-img { background:var(--ph-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:var(--ph-ink);padding:22px;text-align:center;border-left:1px dashed var(--ph-line) }
.autopage .zig.flip .zg-img { border-left:0;border-right:1px dashed var(--ph-line) }
.autopage .zg-img svg { width:36px;height:36px;opacity:.8 }
.autopage .zg-img b { font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase }
.autopage .zg-img em { font-style:normal;font-size:var(--fs-caption);color:var(--ph-ink2);max-width:30ch;line-height:1.4 }
.autopage .uc:nth-child(odd) .zig { background:#fff }
.autopage .uc:nth-child(even) .zig { background:var(--a-tint) }
.autopage .calcwrap { display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px;align-items:stretch }
.autopage .calc { background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 22px 48px -34px rgba(42,37,81,.35) }
.autopage .calc .lbl { font-size:var(--fs-small);font-weight:700;display:flex;justify-content:space-between;align-items:baseline;margin-top:22px }
.autopage .calc .lbl:first-child { margin-top:0 }
.autopage .calc .lbl output { font-family:var(--a-mono);font-size:var(--fs-caption);color:var(--accent);font-weight:600 }
.autopage .calc input[type=range] { width:100%;margin-top:12px;accent-color:var(--accent);height:4px }
.autopage .calc .note { font-family:var(--a-mono);font-size:var(--fs-label);color:var(--muted);margin-top:8px }
.autopage .results { background:var(--head);border-radius:18px;padding:30px;color:#fff;display:flex;flex-direction:column;justify-content:center }
.autopage .results .rl { font-family:var(--a-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:#B3A8E0;margin-bottom:20px }
.autopage .rrow { display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12) }
.autopage .rrow:last-of-type { border-bottom:0 }
.autopage .rrow .t { font-size:var(--fs-caption);color:#C6BFE8 }
.autopage .rrow .v { font-family:var(--a-display);font-size: var(--fs-h3);letter-spacing:-.5px;font-weight:900 }
.autopage .rrow .v.hot { color:#F0A97C }
.autopage .rrow .v.good { color:#8FCBAD }
.autopage .results .disc { font-family:var(--a-mono);font-size:var(--fs-label);color:#8b84b3;margin-top:16px;line-height:1.5 }
.autopage .chart-card { background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;margin-top:26px;box-shadow:0 22px 48px -34px rgba(42,37,81,.3) }
.autopage .chart-card .h { font-family:var(--a-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--a-eyebrow);margin-bottom:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px }
.autopage .chart-legend { display:flex;gap:18px;font-family:var(--a-mono);font-size:var(--fs-label);color:var(--muted);text-transform:none;letter-spacing:0 }
.autopage .chart-legend i { display:inline-block;width:16px;height:3px;border-radius:2px;margin-right:6px;vertical-align:3px }
.autopage #payback { width:100%;height:auto;display:block }
.autopage .audit-grid { display:grid;grid-template-columns:.7fr 1.3fr;gap:26px;margin-top:30px;align-items:stretch }
.autopage .audit-img { min-height:100% }
.autopage .a-chklist { display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start }
.autopage .chk { display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px 18px;cursor:pointer;transition:.15s;user-select:none }
.autopage .chk:hover { border-color:var(--accent) }
.autopage .chk.on { background:var(--good-bg);border-color:var(--good-line) }
.autopage .chk .box { flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--ph-line);background:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px }
.autopage .chk.on .box { background:var(--good-ink);border-color:var(--good-ink) }
.autopage .chk .box svg { width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none;opacity:0 }
.autopage .chk.on .box svg { opacity:1 }
.autopage .chk .t { font-size:var(--fs-small);font-weight:600;line-height:1.4 }
.autopage .tally { margin-top:20px;background:var(--a-cream);border:1px solid var(--cream-line);border-radius:14px;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap }
.autopage .tally .msg small { display:block;font-weight:400;color:var(--cream-ink);font-size:var(--fs-caption);font-family:var(--a-mono);margin-top:3px }
.autopage .wont { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px }
.autopage .wcard h3 { font-size: var(--fs-body);line-height:1.15 }
.autopage .wcard p { color:var(--muted);font-size:var(--fs-caption);margin-top:8px }
.autopage .wcard .x { width:34px;height:34px;border-radius:10px;background:var(--bad-bg);border:1px solid var(--bad-line);display:flex;align-items:center;justify-content:center;margin-bottom:13px }
.autopage .wcard .x svg { width:15px;height:15px;stroke:var(--bad-ink);stroke-width:2.4;fill:none }
.autopage .proc-grid { display:grid;grid-template-columns:.62fr 1.38fr;gap:26px;margin-top:34px;align-items:stretch }
.autopage .proc-img { min-height:100% }
.autopage .proc-list { display:grid;gap:13px;align-content:center }
.autopage .proc-row { display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;align-items:flex-start }
.autopage .proc-row .num { font-family:var(--a-mono);font-size:var(--fs-label);font-weight:600;color:var(--accent);padding-top:3px;flex:none }
.autopage .proc-row:last-child .num { color:var(--good-ink) }
.autopage .proc-row h4 { font-size: var(--fs-body)}
.autopage .proc-row p { font-size:var(--fs-caption);color:var(--muted);margin-top:5px }
.autopage .auto-steps { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px }
.autopage .auto-step .num { font-family:var(--a-mono);font-size:var(--fs-label);font-weight:600;color:var(--accent) }
.autopage .auto-step:last-child .num { color:var(--good-ink) }
.autopage .auto-step h4 { font-size: var(--fs-body);margin-top:8px }
.autopage .qa h3 { font-family:var(--a-body);text-transform:none;letter-spacing:0;font-size: var(--fs-body);font-weight:700;line-height:1.4 }
.autopage .auto-ctaband { background:var(--hero-bg);border-top:1px solid var(--line);padding:70px 0 }
.autopage .auto-ctaband .auto-btns { margin-top:24px }
.autopage .auto-ctacard { background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 24px 50px -34px rgba(42,37,81,.4) }
.autopage .auto-ctacard .lbl { font-family:var(--a-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--a-eyebrow);margin-bottom:14px }
@media(max-width:1024px){
.autopage .audit-grid, .autopage .proc-grid{grid-template-columns:1fr}
.autopage .audit-img, .autopage .proc-img{display:none}
}
@media(max-width:960px){
.autopage .hin, .autopage .zig, .autopage .zig.flip, .autopage .calcwrap, .autopage .a-chklist, .autopage .auto-ctain, .autopage .auto-faqgrid{grid-template-columns:1fr}
.autopage .toolgrid{grid-template-columns:repeat(3,1fr)}
.autopage .wont, .autopage .auto-steps{grid-template-columns:1fr 1fr}
.autopage .zg-img{border-left:0!important;border-right:0!important;border-top:1px dashed var(--ph-line);min-height:240px}
.autopage .zig .zg-img{order:2}
.autopage .wrap{padding:0 24px}
.autopage .auto-sec{padding:56px 0}
.autopage .zg-txt{padding:36px 24px}
}

/* ============================================================
   SAME-DAY WEBSITE  (/same-day-website-design/)
   ============================================================ */
.sd24 { --navy:var(--ink);--navy-2:#16274a;--blue:var(--accent);--orange:var(--cta);--tint:var(--accent-pale);--sd-cream:#fbf1e0;--green:#16a34a;--body:var(--ink-mid);--line:var(--border);--line-2:#e8eef5;font-family:var(--font-body);color:var(--ink);line-height:1.6 }
.sd24 * { box-sizing:border-box; }
.sd24 .wrap { max-width:1180px;margin:0 auto;padding:0 34px }
.sd24 .disp { font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;line-height:1.02;text-transform:uppercase }
.sd24 .eyebrow--onnavy { color:#7fb0e0 }
.sd24 .ph { border:2px dashed #c3d2e2;border-radius:16px;background:repeating-linear-gradient(135deg,#f4f8fc,#f4f8fc 12px,#eef4fa 12px,#eef4fa 24px);display:flex;align-items:center;justify-content:center;color:#9fb2c9;font-size:var(--fs-caption);font-weight:700;letter-spacing:.04em;text-transform:uppercase;min-height:120px;text-align:center;padding:12px }
.sd24 .sec { padding:84px 0 }
.sd24 .sec--tint { background:var(--tint) }
.sd24 .center { text-align:center }
.sd24 .mt-sm { margin-top:10px }
.sd24 .mt-md { margin-top:18px }
.sd24 .mt-lg { margin-top:30px }
.sd24 .sec-head { max-width:730px;margin:0 auto }
.sd24 .sec-h2 { font-size:var(--fs-h2)}
.sd24 .sec-sub { color:var(--body);font-size:var(--fs-body);margin-top:14px }
.sd24 .scarcity { display:inline-flex;align-items:center;gap:9px;background:rgba(244,83,31,.14);border:1px solid rgba(244,83,31,.4);color:#ffd9cc;font-weight:800;font-size:var(--fs-caption);padding:9px 16px;border-radius:40px }
.sd24 .scarcity .dot { width:8px;height:8px;border-radius:50%;background:var(--orange);animation:sd24-pulse 1.8s infinite }
.sd24 .sdh { position:relative;background:var(--navy);color:#fff;overflow:hidden }
.sd24 .sdh-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:46px 46px;opacity:.7 }
.sd24 .sdh-inner { position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:stretch;padding:20px 0 44px }
.sd24 .sdh-h1 { font-size:var(--fs-h1);color:#fff }
.sd24 .sdh-h1 .accent { color:var(--orange) }
.sd24 .sdh-lead { color:#b8c6dc;font-size:var(--fs-body);max-width:36ch;margin-top:20px }
.sd24 .sdh-btns { display:flex;gap:14px;flex-wrap:wrap;margin-top:30px }
.sd24 .sdh-note { margin-top:18px;font-size:var(--fs-caption);color:#8fa3bd }
.sd24 .sdh-note b { color:#cfe0f2;font-weight:700 }
.sd24 .sdh-visual { display:flex;flex-direction:column;gap:16px }
.sd24 .cd-card { border-radius:18px;background:linear-gradient(180deg,#16274a,#101f3c);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 20px;text-align:center }
.sd24 .cd-num { font-family:var(--font-body);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-size:var(--fs-h1);color:#fff;line-height:1 }
.sd24 .cd-label { margin-top:11px;font-size:var(--fs-caption);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#7fb0e0;max-width:22ch }
.sd24 .sdh-ph { flex:1;min-height:150px;border-color:rgba(255,255,255,.18);background:repeating-linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.03) 12px,rgba(255,255,255,.06) 12px,rgba(255,255,255,.06) 24px);color:#7f93ad }
.sd24 .rev { padding:28px 0;border-bottom:1px solid var(--line-2) }
.sd24 .rev-head { display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:20px }
.sd24 .rev-g { font-weight:800;font-size:var(--fs-body);color:var(--navy);display:flex;align-items:center;gap:8px }
.sd24 .rev-g .g { width:20px;height:20px;border-radius:50%;background:conic-gradient(#4285F4 0 25%,#34A853 0 50%,#FBBC05 0 75%,#EA4335 0) }
.sd24 .rev-stars { color:#f4b400;font-size:var(--fs-body);letter-spacing:2px }
.sd24 .rev-score { color:var(--body);font-size:var(--fs-small);font-weight:600 }
.sd24 .rev-link { color:var(--blue);font-weight:800;font-size:var(--fs-small);text-decoration:none;margin-left:auto }
.sd24 .rev-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:16px }
.sd24 .rev-card { background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px }
.sd24 .rev-card-top { display:flex;align-items:center;gap:10px }
.sd24 .rev-av { width:34px;height:34px;border-radius:50%;background:var(--tint);color:var(--blue);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:var(--fs-small)}
.sd24 .rev-name { font-weight:700;font-size:var(--fs-small)}
.sd24 .rev-card-stars { color:#f4b400;font-size:var(--fs-caption);letter-spacing:1px;margin-left:auto }
.sd24 .rev-quote { color:var(--body);font-size:var(--fs-small);margin-top:10px;line-height:1.5 }
.sd24 .rev-note { text-align:center;color:#9fb2c9;font-size:var(--fs-caption);margin-top:16px;font-style:italic }
.sd24 .trust { display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap }
.sd24 .trust-stat { text-align:center }
.sd24 .trust-num { font-family:var(--font-display);font-weight:900;font-size:var(--fs-h3);color:var(--navy) }
.sd24 .trust-lab { font-size:var(--fs-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--body);margin-top:2px }
.sd24 .trust-div { width:1px;height:36px;background:var(--line) }
.sd24 .sdpf-head { display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap }
.sd24 .sdpf-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px }
.sd24 .sdpf { background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.18s }
.sd24 .sdpf:hover { transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(15,30,56,.35) }
.sd24 .sdpf-img { min-height:180px;border:0;border-bottom:1px dashed #c3d2e2;border-radius:0 }
.sd24 .sdpf-body { padding:20px 22px }
.sd24 .sdpf-tag { font-size:var(--fs-label);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue) }
.sd24 .sdpf-title { font-family:var(--font-display);font-weight:800;font-size:var(--fs-h5);margin-top:8px }
.sd24 .sdpf-desc { color:var(--body);font-size:var(--fs-caption);margin-top:6px }
.sd24 .tl { display:grid;grid-template-columns:repeat(5,1fr);margin-top:56px;position:relative }
.sd24 .tl::before { content:"";position:absolute;top:7px;left:10%;right:10%;height:2px;background:var(--line) }
.sd24 .tl-step { text-align:center;position:relative;padding:0 14px }
.sd24 .tl-dot { width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--blue);margin:0 auto 22px;position:relative;z-index:1 }
.sd24 .tl-step:last-child .tl-dot { border-color:var(--orange);background:var(--orange) }
.sd24 .tl-time { font-family:var(--font-display);font-weight:900;font-size:var(--fs-h4);color:var(--navy);line-height:1 }
.sd24 .tl-title { font-weight:800;font-size:var(--fs-caption);color:var(--blue);text-transform:uppercase;letter-spacing:.1em;margin-top:9px }
.sd24 .tl-desc { color:var(--body);font-size:var(--fs-caption);margin-top:8px;line-height:1.5 }
.sd24 .uc-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px }
.sd24 .uc { background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px }
.sd24 .uc-ico { width:46px;height:46px;border-radius:12px;background:var(--tint);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:var(--fs-h4);font-weight:900 }
.sd24 .uc-t { font-family:var(--font-display);font-weight:800;font-size:var(--fs-h5);margin-top:16px }
.sd24 .uc-d { color:var(--body);font-size:var(--fs-small);margin-top:8px }
.sd24 .inc-wrap { display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:stretch;margin-top:44px }
.sd24 .inc-visual { border-radius:18px;min-height:100% }
.sd24 .inc-grid { display:grid;grid-template-columns:1fr;gap:6px }
.sd24 .inc { display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line-2) }
.sd24 .inc-check { flex:0 0 26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);font-weight:900;margin-top:1px }
.sd24 .inc-d { color:var(--body);font-size:var(--fs-caption)}
.sd24 .qz { max-width:760px;margin:40px auto 0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:40px 38px;box-shadow:0 24px 60px -34px rgba(15,30,56,.4) }
.sd24 .qz-row { margin-bottom:22px }
.sd24 .qz-q { font-weight:700;font-size:var(--fs-body);margin-bottom:10px }
.sd24 .qz-opts { display:flex;gap:10px;flex-wrap:wrap }
.sd24 .qz-opt { border:1.5px solid var(--line);background:#fff;border-radius:40px;padding:9px 16px;font-weight:700;font-size:var(--fs-small);cursor:pointer;color:var(--navy);transition:.15s;font-family:inherit }
.sd24 .qz-opt:hover { border-color:var(--blue) }
.sd24 .qz-opt.on { background:var(--navy);color:#fff;border-color:var(--navy) }
.sd24 .qz-result { display:none;margin-top:8px;background:var(--tint);border:1px solid #cfe0f2;border-radius:14px;padding:22px 24px }
.sd24 .qz-result.show { display:block }
.sd24 .qz-result-t { font-family:var(--font-display);font-weight:900;font-size:var(--fs-h4);color:var(--green);display:flex;align-items:center;gap:10px }
.sd24 .qz-result-d { color:var(--body);font-size:var(--fs-small);margin-top:8px }
.sd24 .steps { display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:stretch;margin-top:20px }
.sd24 .step { display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line-2) }
.sd24 .step:last-child { border-bottom:0 }
.sd24 .step-n { flex:0 0 48px;height:48px;border-radius:12px;background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:900;font-size:var(--fs-h4);display:flex;align-items:center;justify-content:center }
.sd24 .step-t { font-family:var(--font-display);font-weight:800;font-size:var(--fs-h5)}
.sd24 .step-d { color:var(--body);font-size:var(--fs-small);margin-top:5px }
.sd24 .steps-visual { border-radius:18px;min-height:100% }
.sd24 .proof-grid { display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:stretch }
.sd24 .proof-photo { border-radius:18px;min-height:100% }
.sd24 .proof-quote { font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:1.3;color:var(--navy) }
.sd24 .proof-by { margin-top:16px;color:var(--body);font-size:var(--fs-body)}
.sd24 .risk { margin-top:26px;background:var(--sd-cream);border:1px solid #ecdcbb;border-radius:16px;padding:20px 22px;display:flex;gap:14px;align-items:flex-start }
.sd24 .risk-ico { flex:0 0 40px;height:40px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-h4)}
.sd24 .risk-t { font-family:var(--font-display);font-weight:800;font-size:var(--fs-body)}
.sd24 .risk-d { color:var(--body);font-size:var(--fs-small);margin-top:3px }
.sd24 .offer { background:var(--navy);color:#fff;border-radius:22px;padding:52px 44px;text-align:center;position:relative;overflow:hidden }
.sd24 .offer-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px }
.sd24 .offer-in { position:relative }
.sd24 .offer h2 { color:#fff }
.sd24 .offer p { color:#b8c6dc }
.sd24 .offer-tags { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px }
.sd24 .offer-tag { background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:40px;padding:10px 18px;font-weight:800;font-size:var(--fs-small);color:#fff;display:flex;align-items:center;gap:8px }
.sd24 .offer-tag i { color:#7ee2a8;font-weight:900 }
.sd24 .paylater { display:inline-flex;align-items:center;gap:10px;margin-top:24px;background:rgba(126,226,168,.12);border:1px solid rgba(126,226,168,.35);color:#c7f2d9;font-weight:700;font-size:var(--fs-small);padding:11px 18px;border-radius:12px }
.sd24 .map-grid { display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:stretch }
.sd24 .map-frame { border-radius:18px;overflow:hidden;border:1px solid var(--line);min-height:340px;background:#eef4fa }
.sd24 .map-frame iframe { width:100%;height:100%;min-height:340px;border:0;display:block }
.sd24 .map-hoods { display:flex;flex-wrap:wrap;gap:10px;margin-top:20px }
.sd24 .hood { background:#fff;border:1px solid var(--line);border-radius:40px;padding:9px 16px;font-weight:700;font-size:var(--fs-small);color:var(--navy);display:flex;align-items:center;gap:8px }
.sd24 .hood i { color:var(--orange) }
.sd24 .cfg { background:var(--navy);color:#fff;position:relative;overflow:hidden }
.sd24 .cfg-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px }
.sd24 .cfg-in { position:relative }
.sd24 .cfg-card { max-width:820px;margin:36px auto 0;background:#fff;color:var(--navy);border-radius:20px;padding:36px 34px;box-shadow:0 30px 70px -34px rgba(0,0,0,.5) }
.sd24 .cfg-dots { display:flex;align-items:center;justify-content:center;margin-bottom:8px }
.sd24 .cfg-dot { width:34px;height:34px;border-radius:50%;background:#eef2f6;color:#9fb2c9;font-weight:800;font-size:var(--fs-small);display:flex;align-items:center;justify-content:center }
.sd24 .cfg-dot.on { background:var(--orange);color:#fff }
.sd24 .cfg-conn { width:34px;height:2px;background:#e2e9f1 }
.sd24 .cfg-plabel { text-align:center;font-size:var(--fs-caption);font-weight:700;color:var(--body);text-transform:uppercase;letter-spacing:.08em;margin-bottom:22px }
.sd24 .cfg-q { font-family:var(--font-display);font-weight:900;font-size:var(--fs-h3);text-align:center }
.sd24 .cfg-qs { color:var(--body);font-size:var(--fs-small);text-align:center;margin-top:6px }
.sd24 .cfg-choices { display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:26px }
.sd24 .cfg-choice { border:1.5px solid var(--line);border-radius:14px;padding:20px 12px;text-align:center;cursor:pointer;transition:.15s }
.sd24 .cfg-choice:hover { border-color:var(--blue);background:#f7fbff }
.sd24 .cfg-choice-ic { font-size:var(--fs-h3)}
.sd24 .cfg-choice-t { font-weight:800;font-size:var(--fs-small);margin-top:8px }
.sd24 .cfg-choice-s { color:var(--body);font-size:var(--fs-caption);margin-top:3px }
.sd24 .cfg-note { text-align:center;color:#8fa3bd;font-size:var(--fs-caption);margin-top:22px }
.sd24 .faq { max-width:820px;margin:44px auto 0 }
.sd24 .faq-item { border-bottom:1px solid var(--line);padding:22px 0 }
.sd24 .faq-q { font-family:var(--font-display);font-weight:800;font-size:var(--fs-h5);display:flex;gap:12px }
.sd24 .faq-q span { color:var(--orange) }
.sd24 .faq-a { color:var(--body);font-size:var(--fs-body);margin-top:8px;padding-left:30px }
.sd24 .final { background:var(--navy);border-radius:24px;padding:60px 44px;text-align:center;position:relative;overflow:hidden }
.sd24 .final-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px }
.sd24 .final-in { position:relative }
.sd24 .final h2 { color:#fff }
.sd24 .final p { color:#b8c6dc;font-size:var(--fs-body);margin-top:14px }
@keyframes sd24-pulse{0%{box-shadow:0 0 0 0 rgba(244,83,31,.55)}70%{box-shadow:0 0 0 9px rgba(244,83,31,0)}100%{box-shadow:0 0 0 0 rgba(244,83,31,0)}}
@media(max-width:900px){
.sd24 .sdh-inner, .sd24 .steps, .sd24 .proof-grid, .sd24 .map-grid, .sd24 .inc-wrap{grid-template-columns:1fr}
.sd24 .uc-grid, .sd24 .sdpf-grid, .sd24 .rev-cards{grid-template-columns:1fr}
.sd24 .tl{grid-template-columns:repeat(2,1fr)}
.sd24 .tl-line{display:none}
.sd24 .cfg-choices{grid-template-columns:repeat(2,1fr)}
.sd24 .sec{padding:60px 0}
.sd24 .sdh-visual{order:-1}
.sd24 .trust-div{display:none}
.sd24 .rev-link{margin-left:0}
}



/* ---- CRM tool grid: reuse automation .tool CSS (grouped above); supply the autopage-local vars + 7-up grid ---- */
.crm-tools{--a-mono:var(--font-mono,ui-monospace,monospace);--line:var(--border,#DBE7F2);--muted:var(--ink-light,#61748c);--ph-ink:#9aa8b8;background:#fff;border-bottom:0;padding:8px 0 0}
.crm-tools .toolgrid{grid-template-columns:repeat(7,1fr)}
@media(max-width:900px){.crm-tools .toolgrid{grid-template-columns:repeat(3,1fr)}}

/* ---- Reusable chart card: horizontal bar chart + sources footer ---- */
.rwd-chartcard{background:var(--white,#fff);border:1px solid var(--border,#DBE7F2);border-radius:20px;padding:34px 36px;
  box-shadow:0 30px 64px -40px rgba(15,31,61,.4);max-width:920px;margin:0 auto}
.rwd-chart-head .eyebrow{color:var(--page-accent,#4A8EC2)}
.rwd-chart-head h2{margin-top:8px}
.rwd-chart-sub{color:var(--ink-mid,#5b6c81);font-size:var(--fs-body);margin-top:8px}
.rwd-barchart{margin-top:26px;display:grid;gap:13px}
.rwd-bar-row{display:grid;grid-template-columns:118px 1fr 48px;align-items:center;gap:14px}
.rwd-bar-lab{font-size:var(--fs-caption);color:var(--ink-mid,#5b6c81);font-weight:600}
.rwd-bar-track{height:14px;border-radius:8px;background:#EEF2F6;overflow:hidden}
.rwd-bar-fill{display:block;height:100%;border-radius:8px;transition:width .8s cubic-bezier(.16,1,.3,1)}
.rwd-bar-val{font-family:var(--font-body,inherit);font-weight:800;font-size:var(--fs-body);color:var(--ink,#0A1E3C);text-align:right}
.rwd-chart-sources{margin-top:26px;padding-top:18px;border-top:1px solid var(--border,#DBE7F2);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rwd-src-lab{font-family:var(--font-mono,ui-monospace,monospace);font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-light,#8AA0B8)}
.rwd-src{font-size:var(--fs-caption);font-weight:600;color:var(--ink-mid,#5b6c81);padding-right:16px;border-right:1px solid var(--border,#DBE7F2);text-decoration:none}
a.rwd-src{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
a.rwd-src:hover{color:var(--cta)}
.rwd-src:last-child{border-right:0;padding-right:0}
@media(max-width:640px){.rwd-bar-row{grid-template-columns:92px 1fr 40px;gap:10px}.rwd-bar-lab{font-size:var(--fs-caption)}.rwd-chartcard{padding:24px 20px}}


/* ---- CRM hero 2.0: warm cream, chart card as hero visual, logo bar (page 1259) ---- */
.hero--crm{background:linear-gradient(180deg,#FDF7F0 0%,#FBEEDF 78%,#FDF9F4 100%);--page-accent:var(--cta);position:relative;overflow:hidden;padding:var(--rwd-header-gap) 0 44px}
.hero--crm .breadcrumb{padding-top:0;margin-bottom:26px}
.hero--crm::before{content:"";position:absolute;top:26px;left:26px;width:220px;height:130px;pointer-events:none;
  background-image:radial-gradient(rgba(232,68,10,.22) 2px,transparent 2px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(135deg,#000 30%,transparent 75%);mask-image:linear-gradient(135deg,#000 30%,transparent 75%)}
.hero--crm .hero-grid-bg{background-image:radial-gradient(rgba(232,68,10,.05) 1px,transparent 1px)}
.hero--crm .eyebrow{display:inline-flex;align-items:center;gap:8px}
.crm-eyebrow-dot{width:9px;height:9px;border-radius:50%;background:var(--cta);display:inline-block}
.hero--crm .hero-h1{color:var(--ink)}
.hero--crm .hero-lead{max-width:44ch;margin-left:0;margin-right:auto;text-align:left}
.hero--crm .breadcrumb{margin-bottom:18px}
.crm-doodle{display:block;width:300px;height:84px;margin-top:16px}
.crm-hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:96px;pointer-events:none;z-index:0}
.hero--crm .hero-grid{align-items:center}
/* chart card tightened for hero duty */
.hero--crm .rwd-chartcard{max-width:none;margin:0;padding:26px 28px;box-shadow:0 34px 70px -42px rgba(120,60,10,.45)}
.hero--crm .rwd-chartcard .display-md{font-family:var(--font-body,inherit);font-weight:800;font-size:var(--fs-h4);text-transform:none;letter-spacing:-.2px;line-height:1.25}
.hero--crm .rwd-chartcard .eyebrow{display:none}
.hero--crm .rwd-chart-sub{margin-top:4px;font-size:var(--fs-caption)}
.hero--crm .rwd-barchart{margin-top:18px;gap:11px}
.hero--crm .rwd-bar-track{height:12px}
.hero--crm .rwd-bar-val{font-size:var(--fs-body)}
.hero--crm .rwd-chart-sources{margin-top:18px;padding-top:14px}
/* full-width logo bar under the grid */
.crm-herobar{margin-top:34px;background:var(--white);border:1px solid rgba(120,60,10,.1);border-radius:16px;
  padding:16px 10px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  box-shadow:0 18px 40px -30px rgba(120,60,10,.35)}
.crm-hb-item{display:inline-flex;align-items:center;gap:9px;font-size: var(--fs-caption);font-weight:700;color:var(--ink);
  padding:4px 18px;border-right:1px solid var(--border)}
.crm-hb-item:last-child{border-right:0}
.crm-hb-item img{height:22px;width:auto;display:block}
@media(max-width:960px){
  .crm-herobar{justify-content:flex-start;gap:4px 0}
  .crm-hb-item{padding:6px 14px}
}
/* re-homed pipeline card */
.crm-pipeline-sec{padding-top:26px;padding-bottom:10px}
.crm-pipeline-wrap{max-width:560px;margin:0 auto}

/* ═══════════════════════════════════════════════════════════
   QUARANTINE — rules whose classes appear on NO published page.
   Moved here for testing before deletion. NOTHING deleted yet.
   ═══════════════════════════════════════════════════════════ */
.animate-fade-up, .rwd-animate-fade-up   { animation: rwdFadeUp 0.7s var(--ease-out) both; }
.animate-fade-in, .rwd-animate-fade-in   { animation: rwdFadeIn 0.6s ease both; }
.animate-scale-in, .rwd-animate-scale-in { animation: rwdScaleIn 0.6s var(--ease-out) both; }
.animate-slide-right                     { animation: rwdSlideRight 0.6s var(--ease-out) both; }
.delay-1, .rwd-delay-1 { animation-delay: 0.1s; }
.delay-2, .rwd-delay-2 { animation-delay: 0.2s; }
.delay-3, .rwd-delay-3 { animation-delay: 0.3s; }
.delay-4, .rwd-delay-4 { animation-delay: 0.4s; }
.delay-5, .rwd-delay-5 { animation-delay: 0.5s; }
.delay-6, .rwd-delay-6 { animation-delay: 0.65s; }
.delay-7, .rwd-delay-7 { animation-delay: 0.8s; }
.rwd-scroll-reveal { opacity:0; transform:translateY(20px); transition:opacity 0.6s ease, transform 0.6s ease; }
.display-sm {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700; line-height: 1.1; text-transform: uppercase;
  color: var(--ink);
}
.body-sm  { font-size: var(--fs-caption); line-height: 1.6;  color: var(--ink-faint); }
.body-lg--faint { color: rgba(255,255,255,0.5); }
.rwd-h1 { font-size: var(--fs-display); font-weight:800; line-height:1.08; letter-spacing:-1.5px; color:var(--ink); }
.rwd-h2 { font-size: var(--fs-h2); font-weight:800; line-height:1.15; letter-spacing:-0.5px; color:var(--ink); }
.rwd-h3 { font-size: var(--fs-h3); font-weight:700; line-height:1.2;  color:var(--ink); }
.rwd-h4 { font-size: var(--fs-h5); font-weight:700; color:var(--ink); line-height:1.3; }
.rwd-h1--white,.rwd-h2--white,.rwd-h3--white,.rwd-h4--white { color:#fff; }
.rwd-lead         { font-size:var(--fs-body); line-height:1.7; color:var(--ink-mid); max-width:580px; margin-top:12px; }
.rwd-lead--white  { color:rgba(255,255,255,0.7); }
.rwd-lead--center { margin:12px auto 0; text-align:center; }
.rwd-body         { font-size:var(--fs-small); line-height:1.7; color:var(--ink-light); }
.rwd-body--white  { color:rgba(255,255,255,0.65); }
.rwd-small        { font-size:var(--fs-caption); color:var(--ink-faint); line-height:1.5; }
.accent-orange   { color: var(--cta); }
.accent-cream    { color: var(--cream); }
.text-faint      { color: var(--ink-faint); }
.text-white-faint { color: rgba(255,255,255,0.7); }
.container--narrow { max-width:860px;  margin:0 auto; padding:0 40px; }
.container--wide   { max-width:1400px; margin:0 auto; padding:0 40px; }
.rwd-container     { max-width:var(--max-width); margin:0 auto; width:100%; }
.section--sm { padding: var(--section-pad-sm); }
.section--lg { padding: var(--section-pad-lg); }
.section--cream  { background: var(--cream); }
.section--deep   { background: var(--dark-deep);  position:relative; overflow:hidden; }
.section--blue   { background: var(--accent);     position:relative; overflow:hidden; }
.section--gradient { background: var(--gradient-dark); }
.section-crm-white, .ai-section-white, .local-section-white,
.about-section-white, .section-ga-white, .ga-section-white,
.section-pure-white, .section-w { background:var(--white); padding:var(--section-pad); }
.section-crm-light, .ai-section-light, .local-section-light,
.about-section-light, .section-ga-light, .ga-section-light,
.section-off-white, .section-f { background:var(--base); padding:var(--section-pad); }
.section-crm-navy, .ai-section-navy, .local-section-navy,
.about-section-navy, .section-ga-navy, .ga-section-navy,
.section-n { background:var(--dark); padding:var(--section-pad); position:relative; overflow:hidden; }
.section-crm-blue, .ai-section-blue, .local-section-blue,
.about-section-blue, .section-ga-blue, .section-b {
  background:var(--accent); padding:var(--section-pad); position:relative; overflow:hidden;
}
.section-crm-ruled { background:var(--white); border-top:1px solid var(--border); padding:var(--section-pad); }
.rwd-section        { padding:var(--section-pad); width:100%; }
.rwd-section--white { background:var(--white); }
.rwd-section--light { background:var(--base); }
.rwd-section--navy  { background:var(--dark); }
.rwd-section--blue  { background:var(--accent); }
.rwd-section--pale  { background:var(--accent-pale); }
.rwd-section--cream { background:var(--cream); }
.rwd-section-header         { margin-bottom:40px; }
.rwd-section-header--center { text-align:center; max-width:700px; margin:0 auto 40px; }
.rwd-section-header--split  { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; }
.breadcrumb-link    { color:var(--ink-faint) !important; text-decoration:none; }
.breadcrumb--white         { color:rgba(255,255,255,0.35); }
.breadcrumb--white a       { color:rgba(255,255,255,0.35); }
.breadcrumb--white a:hover { color:rgba(255,255,255,0.7); }
.grid-4             { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.grid-split--reverse { direction:rtl; }
.grid-split--reverse * { direction:ltr; }
.grid-2--narrow     { gap:16px; max-width:960px; margin-left:auto; margin-right:auto; }
.grid-3--tight-start { gap:16px; align-items:start; }
.rwd-grid        { display:grid; gap:20px; }
.rwd-grid--2     { grid-template-columns:repeat(2,1fr); }
.rwd-grid--3     { grid-template-columns:repeat(3,1fr); }
.rwd-grid--4     { grid-template-columns:repeat(4,1fr); }
.rwd-grid--2-1   { grid-template-columns:2fr 1fr; }
.rwd-grid--1-2   { grid-template-columns:1fr 2fr; }
.rwd-grid--55-45 { grid-template-columns:55fr 45fr; }
.rwd-grid--split { grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.flex        { display:flex; }
.flex-center { display:flex; align-items:center; }
.rwd-col     { display:flex; flex-direction:column; gap:16px; }
.rwd-col--center { align-items:center; text-align:center; }
.rwd-flex    { display:flex; align-items:center; gap:12px; }
.gap-sm, .rwd-gap-sm { gap:8px; }
.gap-lg, .rwd-gap-lg { gap:32px; }
.gap-xl              { gap:40px; }
.mb-xl             { margin-bottom:48px; }
.mx-auto, .rwd-mx-auto { margin-left:auto; margin-right:auto; }
.pos-abs     { position:absolute; }
.overflow-h  { overflow:hidden; }
.rwd-w-full  { width:100%; }
.rwd-max-600 { max-width:600px; }
.rwd-max-800 { max-width:800px; }
.rwd-hidden  { display:none; }
.text-left   { text-align:left; }
.btn--blue, .rwd-btn--blue {
  background: var(--accent); color: #fff !important;
  box-shadow: 0 1px 3px rgba(74,142,194,0.3);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
  transition: var(--transition);
}
.btn--blue:hover, .rwd-btn--blue:hover {
  background: var(--accent-bright); color: #fff !important;
  transform: translateY(-1px); box-shadow: 0 4px 16px rgba(74,142,194,0.4);
}
.btn--white, .rwd-btn--white, .stats-band-btn {
  background: #fff; color: var(--ink) !important;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 700;
  text-decoration: none; border: none; transition: var(--transition);
}
.btn--white:hover, .rwd-btn--white:hover, .stats-band-btn:hover {
  background: var(--base-tint); color: var(--ink) !important;
  transform: translateY(-1px);
}
.btn--sm, .rwd-btn--sm { padding: 9px 18px; font-size: var(--fs-caption); }
.btn--full { width: 100%; justify-content: center; }
.btn-arrow { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-caption); font-weight:600; color:var(--accent); transition:gap 0.2s ease; text-decoration:none; }
.btn-arrow:hover { gap:10px; color:var(--accent-bright); }
.btn-arrow--white { color:rgba(255,255,255,0.7); }
.btn-arrow--white:hover { color:#fff; }
.btn--ghost-purple {
  display:inline-flex; align-items:center; gap:8px; padding:16px 24px;
  border-radius: var(--radius-md); border:1.5px solid #e9d5ff;
  color:var(--ink-mid) !important; font-family:var(--font-body);
  font-size:var(--fs-small); font-weight:600; text-decoration:none; transition:var(--transition);
}
.btn--ghost-purple:hover { border-color:#7c3aed; color:#7c3aed !important; }
.progress-bar { position:fixed; top:0; left:0; width:100%; height:3px; background:var(--accent); z-index:9999; transform-origin:left; transform:scaleX(0); transition:transform 0.1s linear; pointer-events:none; }
.badge { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-label); font-weight:600; letter-spacing:0.5px; padding:5px 12px; border-radius:20px; }
.badge--blue    { background: rgba(74,142,194,0.12); color: var(--accent); border: 1px solid rgba(74,142,194,0.2); }
.badge--glass   { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); border: 0.5px solid rgba(255,255,255,0.2); }
.badge--navy    { background: rgba(10,30,60,0.08); color: var(--ink); border: 1px solid rgba(10,30,60,0.12); }
.badge--cream   { background: var(--cream); color: var(--ink); border: 1px solid var(--cream-border); }
.badge--display { font-family:var(--font-display); font-size:var(--fs-caption); font-weight:800; letter-spacing:1px; padding:6px 16px; }
.badge--fit     { width:fit-content; }
.badge--number  { font-family:var(--font-display); font-size:var(--fs-caption); font-weight:800; background:var(--ink); color:#fff; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0; }
.rwd-badge          { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-label); font-weight:600; padding:5px 12px; border-radius:20px; background:rgba(74,142,194,0.1); color:var(--accent); }
.rwd-badge--navy    { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.75); }
.rwd-badge--success { background:rgba(16,185,129,0.1); color:#065f46; }
.rwd-badge--outline { background:transparent; border:1px solid var(--accent-border); color:var(--accent); }
.metric-down { background:#fce4ec; color:#880e4f; }
.cream-card--sm { padding: 16px 20px; border-radius: var(--radius-md); }
.pastel-card--sky      { background: var(--pastel-sky);      border: 1px solid #B0CCE4; }
.pastel-card--sage     { background: var(--pastel-sage);     border: 1px solid #B8D8C8; }
.pastel-card--mint     { background: var(--pastel-mint);     border: 1px solid #AADAD4; }
.pastel-card--cream    { background: var(--pastel-cream);    border: 1px solid var(--cream-border); }
.pastel-card--blush    { background: var(--pastel-blush);    border: 1px solid #DEC0C4; }
.pastel-card--lavender { background: var(--pastel-lavender); border: 1px solid #C4B8E0; }
.pastel-card--peach    { background: var(--pastel-peach);    border: 1px solid #E8C8A8; }
.pastel-card--powder   { background: var(--pastel-powder);   border: 1px solid #B4CCE0; }
.pastel-card--sky h3, .pastel-card--sky p,
.pastel-card--sage h3, .pastel-card--sage p,
.pastel-card--mint h3, .pastel-card--mint p,
.pastel-card--cream h3, .pastel-card--cream p,
.pastel-card--blush h3, .pastel-card--blush p,
.pastel-card--lavender h3, .pastel-card--lavender p,
.pastel-card--peach h3, .pastel-card--peach p,
.pastel-card--powder h3, .pastel-card--powder p {
  color: var(--ink);
}
.eyebrow--orange, .eyebrow-orange { color:var(--cta); }
.eyebrow--orange::before, .eyebrow-orange::before { background:var(--cta); }
.eyebrow-ai, .eyebrow--purple { color:#7c3aed; }
.eyebrow-ai::before, .eyebrow--purple::before { background:#7c3aed; }
.eyebrow-about--blue { color:var(--accent); }
.eyebrow-about--blue::before { background:var(--accent); }
.hero--sky      { background:#EBF4FC; --page-accent:#4A8EC2; }
.hero--peach    { background:#FDE8D0; --page-accent:#C05C10; }
.hero--lavender { background:#EDE8F8; --page-accent:#6B3FBF; }
.seo-hero    { background: var(--gradient-hero); padding-bottom: 40px; }
.wd-hero     { background: var(--gradient-hero); padding-bottom: 40px; }
.about-hero  { background: var(--gradient-hero); padding-bottom: 0; }
.local-hero  { background: var(--gradient-hero); padding-bottom: 0; }
.hero--light { background: var(--base); padding: var(--rwd-header-gap) 0 80px; position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.hero--sky   { background: var(--gradient-sky); padding: var(--rwd-header-gap) 0 80px; position:relative; overflow:hidden; }
.hero--cream { background: var(--gradient-cream); padding: var(--rwd-header-gap) 0 80px; position:relative; overflow:hidden; }
.crm-hero    { background: var(--white); padding-bottom: 0; border-bottom:1px solid var(--border); }
.ga-hero     { background: var(--white); padding-bottom: 60px; border-bottom:1px solid var(--border); }
.light-texture {
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(10,30,60,0.05) 1px, transparent 1px);
  background-size:32px 32px; pointer-events:none; opacity:0.5;
}
.stats-band-texture {
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size:28px 28px; pointer-events:none;
}
.seo-hero-orb-tl, .wd-hero-orb { top:-120px; left:auto; right:-120px; }
.crm-hero-grid { padding-bottom:64px; }
.ga-hero-grid  { gap:80px; }
.local-trust-pill  { border-radius:30px; padding:7px 14px 7px 7px; font-size:var(--fs-caption); font-weight:600; color:rgba(255,255,255,0.85); }
.local-trust-dot   { width:24px; height:24px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:var(--fs-label); flex-shrink:0; }
.area-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(74,142,194,0.15); border:0.5px solid rgba(74,142,194,0.3); border-radius:6px; padding:4px 10px; font-size:var(--fs-label); font-weight:600; color:rgba(255,255,255,0.75); text-transform:uppercase; letter-spacing:0.8px; }
.area-badge--primary { color:#fff; background:rgba(74,142,194,0.3); border-color:rgba(74,142,194,0.45); }
.area-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.local-hero-trust-bar img { height:24px; width:auto; filter:grayscale(100%) brightness(2) opacity(0.35); }
.stat-num--cream { color: var(--ink); background: var(--cream); display:inline-block; padding:2px 10px; border-radius:4px; }
.stat-sub   { font-size:var(--fs-label); color:var(--ink-faint); margin-top:2px; }
.rwd-stats-light { display:grid; grid-template-columns:repeat(4,1fr); background:var(--base); border-radius:var(--radius-lg); overflow:hidden; }
.rwd-stats-bar-item { padding:28px 24px; border-right:0.5px solid var(--border); text-align:center; }
.rwd-stats-bar-item:last-child { border-right:none; }
.rwd-stat-card  { display:flex; flex-direction:column; gap:4px; padding:20px; background:var(--base); border-radius:var(--radius-md); }
.rwd-stat-num   { font-family:var(--font-display); font-size:var(--fs-h2); font-weight:900; color:var(--ink); letter-spacing:-1px; line-height:1; }
.rwd-stat-num--blue  { color:var(--accent); }
.rwd-stat-num--white { color:#fff; }
.rwd-stat-label { font-size:var(--fs-caption); color:var(--ink-light); line-height:1.4; }
.rwd-stat-label--white { color:rgba(255,255,255,0.55); }
.mini-stat       { background:rgba(255,255,255,0.07); border:0.5px solid rgba(255,255,255,0.1); border-radius:10px; padding:16px 18px; transition:background 0.2s ease; }
.mini-stat:hover { background:rgba(255,255,255,0.12); }
.mini-stat-num   { font-family:var(--font-display); font-size:var(--fs-h3); font-weight:800; color:var(--pastel-sky); line-height:1; margin-bottom:5px; }
.mini-stat-label { font-size:var(--fs-label); color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:0.8px; }
.stats-band, .seo-band, .rwd-band,
.ai-section-blue, .local-section-blue,
.section-crm-blue, .section-ga-blue {
  background: var(--dark); padding:72px 0; position:relative; overflow:hidden;
}
.stats-band-orb, .seo-band-orb, .rwd-band-orb {
  position:absolute; top:-80px; right:-80px;
  width:320px; height:320px; border-radius:50%;
  background:rgba(255,255,255,0.04); pointer-events:none;
}
.stats-band-orb--bl { bottom:-100px; left:-60px; top:auto; right:auto; width:280px; height:280px; }
.ai-section-orb         { position:absolute; border-radius:50%; pointer-events:none; }
.ai-section-orb--blue-sm{ top:-80px; right:-80px; width:280px; height:280px; background:rgba(255,255,255,0.04); }
.stats-band-header, .seo-band-header, .rwd-band-header { text-align:center; margin-bottom:52px; position:relative; }
.stats-band-eyebrow, .seo-band-eyebrow, .rwd-band-eyebrow { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:14px; }
.stats-band-eyebrow-line, .seo-band-eyebrow-line, .rwd-band-eyebrow-line { width:32px; height:1.5px; background:rgba(255,255,255,0.25); }
.stats-band-eyebrow-text, .seo-band-eyebrow-text, .rwd-band-eyebrow-text { font-size:var(--fs-label); font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.45); }
.stats-band-grid, .seo-band-grid, .rwd-band-grid, .local-band-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:0.5px solid rgba(255,255,255,0.1);
  border-bottom:0.5px solid rgba(255,255,255,0.1); position:relative;
}
.stats-band-desc, .seo-band-desc, .rwd-band-desc, .local-band-desc { font-size:var(--fs-caption); color:rgba(255,255,255,0.55); line-height:1.4; }
.stats-band-cta, .seo-band-cta, .rwd-band-cta, .local-band-cta { text-align:center; margin-top:48px; position:relative; }
.cta-split {
  background: var(--dark); border-radius:var(--radius-lg);
  padding:36px 40px; display:flex; align-items:center;
  justify-content:space-between; gap:32px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-split::before { content:''; position:absolute; top:-40px; right:-40px; width:160px; height:160px; border-radius:50%; background:rgba(74,142,194,0.08); pointer-events:none; }
.cta-split-h3   { font-family:var(--font-display); font-size:var(--fs-h3); font-weight:800; text-transform:uppercase; color:#fff; line-height:1.1; margin-bottom:8px; }
.cta-split-sub  { font-size:var(--fs-caption); color:rgba(255,255,255,0.5); line-height:1.6; max-width:380px; }
.cta-split-actions { display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0; }
.cta-light { background:var(--base); border-top:1px solid var(--border); padding:var(--section-pad); }
.cta-light-inner { max-width:700px; margin:0 auto; text-align:center; }
.cta-light-h2   { font-family:var(--font-display); font-size:var(--fs-h1); font-weight:900; text-transform:uppercase; color:var(--ink); line-height:0.95; margin-bottom:16px; }
.cta-light-lead { font-size:var(--fs-body); line-height:1.7; color:var(--ink-light); margin-bottom:32px; }
.cta-light-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.result-row {
  display:flex; align-items:flex-start; gap:16px;
  padding:20px; border-radius:var(--radius-md);
  background:var(--base); border:1px solid var(--border);
  transition: box-shadow 0.2s ease;
}
.result-row:hover { box-shadow:var(--shadow-sm); }
.result-row-icon  { width:40px; height:40px; border-radius:var(--radius-sm); background:var(--accent-pale); display:flex; align-items:center; justify-content:center; font-size:var(--fs-h5); flex-shrink:0; }
.result-row-title { font-size:var(--fs-body); font-weight:700; color:var(--ink); margin-bottom:5px; }
.result-row-desc  { font-size:var(--fs-caption); color:var(--ink-light); line-height:1.6; }
.contact-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:28px;
  display:flex; flex-direction:column; gap:16px;
  box-shadow: var(--shadow-sm);
}
.contact-card-icon  { font-size:var(--fs-h3); }
.contact-card-label { font-size:var(--fs-label); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-faint); }
.contact-card-value { font-size:var(--fs-body); font-weight:700; color:var(--ink); margin-top:2px; }
.contact-card-sub   { font-size:var(--fs-caption); color:var(--ink-light); }
.tier-card, .tier-card--1, .tier-card--2, .tier-card--3,
.tier-card--4, .tier-card--5, .tier-card--6 {
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg); padding:28px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.tier-card:hover, .tier-card--1:hover, .tier-card--2:hover,
.tier-card--3:hover, .tier-card--4:hover, .tier-card--5:hover,
.tier-card--6:hover {
  background: rgba(74,142,194,0.1); border-color:rgba(74,142,194,0.3);
}
.tier-card--1 { background: rgba(74,142,194,0.22); }
.tier-card--2 { background: rgba(60,122,172,0.18); }
.tier-card--3 { background: rgba(46,102,152,0.14); }
.tier-card--4 { background: rgba(34,84,132,0.12); }
.tier-card--5 { background: rgba(26,68,114,0.10); }
.tier-card--6 { background: rgba(20,54,96,0.08); }
.rwd-form-field  { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.rwd-label       { font-size:var(--fs-caption); font-weight:700; color:var(--ink); }
.rwd-input, .rwd-select, .rwd-textarea {
  width:100%; padding:13px 16px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  font-size:var(--fs-body); font-family:var(--font-body);
  color:var(--ink); background:var(--white);
  transition:border-color 0.2s, box-shadow 0.2s;
  outline:none; -webkit-appearance:none;
}
.rwd-input:focus, .rwd-select:focus, .rwd-textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(74,142,194,0.1);
}
.rwd-input::placeholder, .rwd-textarea::placeholder { color:var(--ink-faint); }
.rwd-textarea { resize:vertical; min-height:120px; line-height:1.6; }
.rwd-input--error { border-color:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,0.08); }
.rwd-input-hint { font-size:var(--fs-label); color:var(--ink-faint); margin-top:4px; }
.rwd-pagination  { display:flex; align-items:center; justify-content:center; gap:8px; padding-top:48px; }
.rwd-page-btn    { width:36px; height:36px; border-radius:var(--radius-sm); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:var(--fs-caption); font-weight:600; color:var(--ink-mid); text-decoration:none; transition:var(--transition); }
.rwd-page-btn:hover  { border-color:var(--accent); color:var(--accent); }
.rwd-page-btn--active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.rwd-divider      { height:1px; background:var(--border); margin:32px 0; }
.rwd-divider--sm  { margin:16px 0; }
.hp-reveal-delay-6 { transition-delay:0.6s; }
body.rwd-v4,
body { background-color: var(--base); }
.hp-bento-tag--white {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
}
.ab-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(120,60,10,0.55);
  margin-bottom: 22px;
}
.ab-hero-eyebrow-line { width: 20px; height: 1.5px; background: rgba(120,60,10,0.3); flex-shrink: 0; }
.ab-hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900; text-transform: uppercase;
  color: #2c1206; line-height: 0.9; letter-spacing: -2px;
  margin-bottom: 24px;
}
.ab-hero-lead {
  font-size: var(--fs-body); line-height: 1.75;
  color: rgba(44,18,6,0.65); font-weight: 300;
  max-width: 460px; margin-bottom: 24px;
}
.ab-hero-right { display: flex; flex-direction: column; gap: 12px; }
.cs-srx {
  --srx:       #3D6B50;
  --srx-light: #4E7A60;
  --srx-dark:  #2C5A3E;
  --srx-bg:    #EAF2ED;
  --srx-tint:  #F2F8F4;
}
.cs-srx-hero { background: var(--srx-bg); padding-bottom: 60px; }
.cs-srx-hero-grid-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(61,107,80,0.08) 1px, transparent 1px);
  background-size: 36px 36px; pointer-events: none;
}
.cs-srx-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.cs-srx-hero-right { display: flex; flex-direction: column; gap: 10px; }
.cs-srx-breadcrumb a { color: rgba(44,90,62,0.5); }
.cs-srx-breadcrumb a:hover { color: var(--srx-dark); }
.cs-srx-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--srx);
  margin-bottom: 20px;
}
.cs-srx-eyebrow-line { width: 20px; height: 1.5px; background: var(--srx); flex-shrink: 0; }
.cs-srx-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900; text-transform: uppercase;
  color: var(--ink); line-height: 0.88; letter-spacing: -2px;
  margin-bottom: 22px;
}
.cs-srx-h1-accent { color: var(--srx); }
.cs-srx-lead {
  font-size: var(--fs-body); line-height: 1.75; color: var(--ink-mid);
  font-weight: 300; max-width: 480px; margin-bottom: 22px;
}
.cs-srx-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-srx-tag {
  background: rgba(61,107,80,0.1); border: 1px solid rgba(61,107,80,0.2);
  color: var(--srx-dark); font-size: var(--fs-label); font-weight: 700;
  padding: 5px 12px; border-radius: 20px;
}
.cs-srx-hero-stats {
  display: flex; align-items: center;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.cs-srx-hero-stat { flex: 1; padding: 14px 12px; text-align: center; }
.cs-srx-hero-stat-num {
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 900;
  color: var(--srx); line-height: 1;
}
.cs-srx-hero-stat-lbl { font-size: var(--fs-label); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 3px; }
.cs-srx-stat-div { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; }
.cs-srx-img-placeholder {
  background: var(--base);
  border: 2px dashed var(--border-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.cs-srx-img-body {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px 20px;
  height: 100%; min-height: inherit;
}
.cs-srx-img-icon  { font-size: var(--fs-h2); margin-bottom: 10px; opacity: 0.5; }
.cs-srx-img-label { font-size: var(--fs-caption); font-weight: 700; color: var(--ink-mid); margin-bottom: 6px; }
.cs-srx-img-hint  { font-size: var(--fs-label); color: var(--ink-faint); line-height: 1.5; }
.cs-srx-img-hint strong { color: var(--cta); }
.cs-srx-img-hero-screen { border-radius: var(--radius-xl); overflow: hidden; }
.cs-srx-browser-chrome {
  background: #2A2D35; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}
.cs-srx-browser-dots { display: flex; gap: 6px; }
.cs-srx-browser-dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
}
.cs-srx-browser-bar {
  flex: 1; background: rgba(255,255,255,0.08); border-radius: 4px;
  font-size: var(--fs-label); color: rgba(255,255,255,0.4);
  padding: 4px 12px; font-family: var(--font-body);
}
.cs-srx-img-hero-screen .cs-srx-img-body { min-height: 240px; }
.cs-srx-img-fullwidth { border-radius: 0; border-left: none; border-right: none; min-height: 400px; }
.cs-srx-img-logo      { min-height: 160px; }
.cs-srx-img-screen    { min-height: 200px; }
.cs-srx-img-mockup-desktop { min-height: 220px; flex: 2; }
.cs-srx-img-mockup-phone   { min-height: 220px; flex: 1; }
.cs-srx-img-dashboard { min-height: 300px; }
.cs-srx-img-social    { min-height: 200px; }
.cs-srx-img-analytics { min-height: 120px; margin-top: 12px; border-radius: var(--radius-md); }
.cs-srx-img-placeholder img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block;
}
.cs-srx-fullwidth-strip { overflow: hidden; }
.cs-srx-stats-bar { background: #F2F8F4; border-color: #C4DDD0; }
.cs-srx-stat-accent { color: var(--srx) !important; }
.cs-srx-eyebrow-blue { color: var(--srx); }
.cs-srx-eyebrow-blue::before { background: var(--srx); }
.cs-srx-accent { color: var(--srx); }
.cs-srx-dark-accent { color: #7ecda0 !important; }
.cs-srx-brand-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 48px; }
.cs-srx-brand-card { background: var(--base); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; }
.cs-srx-brand-card-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-faint); margin-bottom: 16px; }
.cs-srx-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs-srx-swatch {
  border-radius: var(--radius-md);
  padding: 18px 12px 12px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 70px;
}
.cs-srx-swatch--bordered { border: 1px solid var(--border); color: var(--ink) !important; }
.cs-srx-sw-hex  { font-size: var(--fs-label); font-weight: 700; opacity: 0.6; }
.cs-srx-sw-name { font-size: var(--fs-caption); font-weight: 700; }
.cs-srx-challenge-card {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
  border-left: 3px solid var(--pastel-sage);
  transition: border-left-color 0.2s, box-shadow 0.2s;
}
.cs-srx-challenge-card:hover { border-left-color: var(--srx); box-shadow: var(--shadow-sm); }
.cs-srx-challenge-icon  { font-size: var(--fs-h3); flex-shrink: 0; }
.cs-srx-challenge-title { font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.cs-srx-challenge-desc  { font-size: var(--fs-caption); color: var(--ink-light); line-height: 1.65; }
.cs-srx-screens-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-bottom: 64px;
}
.cs-srx-screen-card { display: flex; flex-direction: column; gap: 10px; }
.cs-srx-screen-lbl  { font-size: var(--fs-caption); font-weight: 700; color: var(--ink-mid); text-align: center; }
.cs-srx-devices {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 56px; align-items: center;
}
.cs-srx-mockups { display: flex; gap: 12px; align-items: flex-end; }
.cs-srx-checklist { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.cs-srx-check-row { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-small); color: rgba(255,255,255,0.7); }
.cs-srx-check { color: #7ecda0; font-weight: 800; flex-shrink: 0; }
.cs-srx-content-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs-srx-content-card {
  background: var(--base); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.cs-srx-content-head  { display: flex; align-items: center; gap: 10px; }
.cs-srx-content-icon  { font-size: var(--fs-h4); }
.cs-srx-content-title { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 800; text-transform: uppercase; color: var(--ink); }
.cs-srx-content-desc  { font-size: var(--fs-caption); color: var(--ink-light); line-height: 1.65; }
.cs-srx-results-section { background: var(--srx-tint); }
.cs-srx-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}
.cs-srx-result-featured {
  grid-row: span 2; background: var(--ink);
  border-radius: var(--radius-xl); padding: 28px;
  display: flex; flex-direction: column;
}
.cs-srx-result-eyebrow { font-size: var(--fs-label); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 8px; }
.cs-srx-result-big { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: #fff; line-height: 1; letter-spacing: -1px; }
.cs-srx-result-sub { font-size: var(--fs-caption); color: rgba(255,255,255,0.4); margin-bottom: 20px; margin-top: 6px; flex: 1; }
.cs-srx-bars { display: flex; align-items: flex-end; gap: 5px; height: 72px; margin-bottom: 8px; }
.cs-srx-bar { flex: 1; background: var(--srx); border-radius: 3px 3px 0 0; height: var(--h); opacity: 0.3; }
.cs-srx-bar--peak { opacity: 1; }
.cs-srx-bar-labels { display: flex; justify-content: space-between; font-size: var(--fs-label); color: rgba(255,255,255,0.3); font-weight: 600; margin-bottom: 0; }
.cs-srx-result-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 22px;
}
.cs-srx-result-card--dark { background: var(--dark); border-color: var(--dark); }
.cs-srx-rc-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-faint); margin-bottom: 8px; }
.cs-srx-rc-label--white { color: rgba(255,255,255,0.35); }
.cs-srx-rc-num { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; color: var(--ink); line-height: 1; letter-spacing: -1px; margin-bottom: 4px; }
.cs-srx-rc-num--accent { color: var(--srx); }
.cs-srx-rc-sub { font-size: var(--fs-caption); color: var(--ink-faint); margin-bottom: 12px; }
.cs-srx-badge { display: inline-block; font-size: var(--fs-label); font-weight: 700; padding: 4px 12px; border-radius: 20px; }
.cs-srx-badge--green { background: rgba(61,107,80,0.1); color: var(--srx-dark); border: 1px solid rgba(61,107,80,0.2); }
.cs-srx-badge--sage  { background: var(--pastel-sage); color: var(--srx-dark); border: 1px solid #B8D8C8; }
.cs-srx-badge--gray  { background: var(--base); color: var(--ink-faint); border: 1px solid var(--border); }
.cs-srx-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.cs-srx-dtag { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65); font-size: var(--fs-label); font-weight: 600; padding: 4px 10px; border-radius: 20px; border: 0.5px solid rgba(255,255,255,0.12); }
.cs-srx-system-label { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 800; text-transform: uppercase; color: var(--srx); letter-spacing: 1px; }
.cs-srx-decisions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cs-srx-decision-card {
  background: var(--base); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  border-top: 3px solid var(--pastel-sage);
  transition: border-top-color 0.2s, box-shadow 0.2s;
}
.cs-srx-decision-card:hover { border-top-color: var(--srx); box-shadow: var(--shadow-md); }
.cs-srx-decision-icon  { font-size: var(--fs-h3); margin-bottom: 12px; display: block; }
.cs-srx-decision-title { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: 1.1; margin-bottom: 10px; }
.cs-srx-decision-desc  { font-size: var(--fs-caption); color: var(--ink-light); line-height: 1.65; }
.pf-hero { background: #D8EAF5; padding-bottom: 0; }
.pf-hero-grid-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(74,142,194,0.1) 1px, transparent 1px);
  background-size: 36px 36px; pointer-events: none;
}
.pf-hero-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center; padding-bottom: 20px;
}
.pf-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 20px;
}
.pf-hero-eyebrow-line { width: 20px; height: 1.5px; background: var(--accent); flex-shrink: 0; }
.pf-hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900; text-transform: uppercase;
  color: var(--ink); line-height: 0.9; letter-spacing: -2px;
  margin-bottom: 22px;
}
.pf-hero-lead { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-mid); font-weight: 300; max-width: 460px; margin-bottom: 0; }
.ai-hero { background: var(--ai-bg); padding-bottom: 70px; }
.ai-hero-grid-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(107,63,191,0.08) 1px, transparent 1px);
  background-size: 36px 36px; pointer-events: none;
}
.ai-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.ai-hero-right { display: flex; flex-direction: column; gap: 14px; }
.ai-hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900; text-transform: uppercase;
  color: var(--ink); line-height: 0.9; letter-spacing: -2px;
  margin-bottom: 22px; margin-top: 8px;
}
.ai-hero-lead { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-mid); font-weight: 300; max-width: 480px; margin-bottom: 20px; }
.crm-hero { background: #DBF0EC; padding-bottom: 70px; }
.crm-hero-grid-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(232,68,10,0.08) 1px, transparent 1px);
  background-size: 36px 36px; pointer-events: none;
}
.crm-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.crm-hero-right { display: flex; flex-direction: column; gap: 12px; }
.gads-hero { background: var(--pastel-sky); padding-bottom: 40px; }
.gads-hero-grid-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(74,142,194,0.07) 1px, transparent 1px);
  background-size: 36px 36px; pointer-events: none;
}
.gads-hero-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.gads-hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900; text-transform: uppercase;
  color: var(--ink); line-height: 0.9; letter-spacing: -2px;
  margin-bottom: 22px; margin-top: 8px;
}
.gads-hero-lead { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-mid); font-weight: 300; max-width: 480px; margin-bottom: 22px; }
.gads-bar--h20  { height: 20% }
.gads-bar--h25  { height: 25% }
.gads-bar--h30  { height: 30% }
.gads-bar--h35  { height: 35% }
.gads-bar--h40  { height: 40% }
.gads-bar--h45  { height: 45% }
.gads-bar--h50  { height: 50% }
.gads-bar--h55  { height: 55% }
.gads-bar--h65  { height: 65% }
.gads-bar--h70  { height: 70% }
.gads-bar--h75  { height: 75% }
.gads-bar--h100 { height: 100% }
.gads-rev-bar--h4  { height: 4% }
.gads-rev-bar--h12 { height: 12% }
.gads-rev-bar--h22 { height: 22% }
.gads-rev-bar--h38 { height: 38% }
.gads-rev-bar--h55 { height: 55% }
.gads-rev-bar--h72 { height: 72% }
.gads-rev-bar--h85 { height: 85% }
.gbp-hero { background: #FDF3D0; padding-bottom: 70px; }
.gbp-hero-grid-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(154,107,0,0.08) 1px, transparent 1px);
  background-size: 36px 36px; pointer-events: none;
}
.gbp-hero-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.gbp-hero-right { display: flex; flex-direction: column; gap: 12px; }
.gbp-hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900; text-transform: uppercase;
  color: var(--ink); line-height: 0.9; letter-spacing: -2px;
  margin-bottom: 22px; margin-top: 8px;
}
.gbp-hero-lead { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-mid); font-weight: 300; max-width: 480px; }
.seo-hero { background: #E0ECFA; padding-bottom: 70px; }
.seo-hero-grid-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(30,80,160,0.07) 1px, transparent 1px);
  background-size: 36px 36px; pointer-events: none;
}
.seo-hero-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.seo-hero-right { display: flex; flex-direction: column; gap: 12px; }
.seo-hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900; text-transform: uppercase;
  color: var(--ink); line-height: 0.9; letter-spacing: -2px;
  margin-bottom: 22px; margin-top: 8px;
}
.wd-hero { background: var(--white); padding-bottom: 60px; border-bottom: 1px solid var(--border); }
.wd-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.wd-hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900; text-transform: uppercase;
  color: var(--ink); line-height: 0.88; letter-spacing: -3px;
  margin-bottom: 24px; margin-top: 10px;
}
.wd-hero-h1-em {
  font-style: italic; font-weight: 300;
  color: var(--accent); text-transform: none;
  letter-spacing: -1px; display: block;
}
.wd-trust-pill {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 10px 16px;
  transition: border-color 0.2s;
}
.wd-trust-pill:hover { border-color: var(--accent); }
.wd-trust-pill-num { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; color: var(--ink); line-height: 1; }
.wd-trust-pill-lbl { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--ink-faint); line-height: 1.3; }
.lp-hero { background: var(--white); padding-bottom: 60px; border-bottom: 1px solid var(--border); }
.lp-hero-grid-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(74,142,194,0.05) 1px, transparent 1px);
  background-size: 36px 36px; pointer-events: none;
}
.lp-hero-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lp-hero-right { display: flex; flex-direction: column; gap: 10px; }
.lp-hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900; text-transform: uppercase;
  color: var(--ink); line-height: 0.9; letter-spacing: -2px;
  margin-bottom: 22px; margin-top: 8px;
}
.lp-hero-lead { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-mid); font-weight: 300; max-width: 480px; margin-bottom: 24px; }
.rd-hero { background: #F5F3FF; padding-bottom: 60px; }
.rd-hero-grid-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(124,58,237,0.07) 1px, transparent 1px);
  background-size: 36px 36px; pointer-events: none;
}
.rd-hero-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.rd-hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900; text-transform: uppercase;
  color: var(--ink); line-height: 0.9; letter-spacing: -2px;
  margin-bottom: 22px; margin-top: 8px;
}
.rd-hero-lead { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-mid); font-weight: 300; max-width: 480px; margin-bottom: 24px; }
.rd-hero-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.rd-hero-pill  { display: flex; align-items: center; gap: 10px; border: 1.5px solid rgba(124,58,237,0.2); background: rgba(255,255,255,0.7); border-radius: var(--radius-lg); padding: 10px 16px; }
.rd-hero-pill-num { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; color: var(--rd); line-height: 1; }
.rd-hero-pill-lbl { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--ink-faint); line-height: 1.3; }
.qblock--sage {
  background: #E4F2EA;
  border-color: #BFE0CA;
}
.qblock--sky {
  background: #EBF4FC;
  border-color: #C8DFF2;
}
.qblock--lavender {
  background: #EDE8F8;
  border-color: #D4C8F0;
}
.qblock--mint {
  background: #DBF0EC;
  border-color: #A8DDD4;
}
.qblock-form-wrap { max-width: 480px; margin: 0 auto; }
.cs-section-eyebrow--white { color: rgba(255,255,255,0.35); }
.cs-feat-c-desc { font-size: var(--fs-small); color: rgba(255,255,255,0.5); line-height: 1.7; margin-bottom: 18px; max-width: 520px; }
.css-eyebrow { color: var(--accent) !important; }
.css-eyebrow::before { background: var(--accent) !important; }
.css-hero-img { background: var(--base); border-top: 1px solid var(--border); padding: 0 0 0; }
.css-browser-frame { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(10,30,60,0.12); margin-top: -24px; position: relative; z-index: 2; background: var(--white); }
.css-browser-chrome { background: #1E2028; padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.css-browser-dots { display: flex; gap: 5px; }
.css-browser-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.css-browser-bar { flex: 1; background: rgba(255,255,255,0.07); border-radius: 4px; font-size: var(--fs-label); color: rgba(255,255,255,0.35); padding: 4px 12px; }
.css-hero-screenshot { width: 100%; display: block; max-height: 480px; object-fit: cover; object-position: top; background: #fff; }
.css-accent      { color: var(--accent); }
.css-wp-content { max-width: 760px; margin: 0 auto; }
.css-wp-content p  { font-size: var(--fs-body); color: var(--ink-mid); line-height: 1.8; margin-bottom: 20px; }
.css-wp-content h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900; text-transform: uppercase; color: var(--ink); margin: 40px 0 14px; }
.css-wp-content h3 { font-size: var(--fs-h4); font-weight: 700; color: var(--ink); margin: 28px 0 10px; }
.css-wp-content ul { padding-left: 20px; margin-bottom: 20px; }
.css-wp-content li { font-size: var(--fs-body); color: var(--ink-mid); line-height: 1.7; margin-bottom: 6px; }
.css-wp-content img { width: 100%; border-radius: var(--radius-lg); margin: 24px 0; }
.css-ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.css-ba-panel { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); cursor: zoom-in; background: #fff; }
/* full-page captures crop from the top and open whole in the lightbox */
.css-ba-grid--solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
.css-ba-panel--solo img { height: 420px; }
.css-ba-panel img { width: 100%; height: 280px; object-fit: cover; object-position: top; display: block; }
.css-ba-label { font-size: var(--fs-caption); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.css-ba-label--before { color: #DC2626; background: #FEF2F2; }
.css-ba-label--after  { color: #16A34A; background: #F0FDF4; }

/* ============================================================
   RWD 4.0 — homepage refinements (appended, cascade wins)
   ============================================================ */

/* Hero: cap headline so the certification badges are visible on load */
.hp-hero-h1,
.hp-hero-h2 { font-size: var(--fs-h1); line-height: .95; }

/* Lead / description text: fixed size, no upper clamp */
.hp-hero-lead { font-size: var(--fs-body); }

/* Bento band must match the hero's blue (was var(--base), a different blue) */
.hp-bento-section { background: #EBF4FC; }

/* Problem section: image now sits above the eyebrow/title */
.hp-prob-img { min-height: 260px; margin-bottom: 28px; }
.hp-img-ph--filled { margin: 0 0 28px; border: 0; background: none; padding: 0; overflow: hidden; border-radius: 16px; }
.hp-img-ph--filled img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }

/* Review avatars: white circle with the Google G (replaces initials) */
.hp-review-avatar--g { background: #fff; display: flex; align-items: center; justify-content: center; }
.hp-review-avatar--g svg { width: 55%; height: 55%; }

/* Trust bar: match the hero/bento blue. Spacing above lives in the bento
   section so the blue runs continuously (a margin here showed the page bg) */
.hp-bento-section { padding-bottom: 56px; }
.trust-bar { background: #EBF4FC; margin-top: 0; padding: 26px 0; }

/* Two white sections back to back (Problem -> Our Work) doubled their
   vertical padding. Collapse the seam. */
.hp-portfolio-sec { padding-top: 0; }

/* ============================================================
   RGS 2.0 HERO — pastel sky + orbital system diagram (page 1413)
   Replaces the retired .rgs-hero / .rgs-hero--sage block.
   All selectors scoped under .rgs2-hero to avoid collisions.
   ============================================================ */
.rgs2-hero{ --r2-navy:#0A1E3C; --r2-accent:#2F6FB5; --r2-accent-lt:#BBD5EE; --r2-accent-bg:#E8F1FA; --r2-cta:#F97316; --r2-cta-hover:#E4620C; --r2-muted:#5A6B80; --r2-line:#DDE7F1; background:linear-gradient(168deg,#EAF3FB 0%,#DCEAF7 60%,#F6FAFD 100%); padding-bottom: 70px; color:var(--r2-navy); }
.rgs2-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(47,111,181,.13) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.rgs2-hero-in{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;align-items:center}

.rgs2-crumb{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#7B8DA4;margin-bottom:22px}
.rgs2-crumb a{color:#7B8DA4;text-decoration:none}
.rgs2-crumb a:hover{color:var(--r2-navy)}
.rgs2-crumb .sep{color:#B6C6D8}
.rgs2-crumb .cur{color:var(--r2-navy);font-weight:600}

.rgs2-eyebrow{display:block;font-family:var(--font-body);font-size:var(--fs-label);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--r2-accent)}
.rgs2-h1{font-family:var(--font-display);text-transform:uppercase;font-weight:900;letter-spacing:-1px;line-height:.95;font-size:var(--fs-h2);margin-top:14px;color:var(--r2-navy)}
.rgs2-h1 span{color:var(--r2-accent)}
.rgs2-lead{color:var(--r2-muted);font-size: var(--fs-body);margin-top:16px;max-width:44ch}

.rgs2-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.rgs2-btn{display:inline-block;font-weight:700;font-size:var(--fs-body);padding:15px 26px;border-radius:10px;text-decoration:none;transition:.16s}
.rgs2-btn--cta{background:var(--r2-cta);color:#fff;box-shadow:0 14px 30px -14px rgba(249,115,22,.75)}
.rgs2-btn--cta:hover{transform:translateY(-2px);background:var(--r2-cta-hover);color:#fff}
.rgs2-btn--ghost{border:1.5px solid rgba(10,30,60,.18);color:var(--r2-navy);background:#fff;display:inline-flex;align-items:center;gap:10px}
.rgs2-btn--ghost .rgs2-play{width:24px;height:24px;border-radius:50%;background:var(--r2-navy);display:flex;align-items:center;justify-content:center}
.rgs2-btn--ghost .rgs2-play svg{width:9px;height:9px;fill:#fff}

.rgs2-proof{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:30px;padding-top:26px;border-top:1px solid var(--r2-line)}
.rgs2-proof-item{display:flex;flex-direction:column;gap:4px}
.rgs2-proof-num{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:900;color:var(--r2-navy);line-height:1;letter-spacing:-.5px}
.rgs2-proof-num--blue{color:var(--r2-accent)}
.rgs2-proof-stars{color:#FBBC05;font-size:var(--fs-h4);letter-spacing:1px;line-height:1}
.rgs2-proof-label{font-family:var(--font-body);font-size:var(--fs-label);font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--r2-muted)}
.rgs2-proof-div{width:1px;height:34px;background:var(--r2-line);flex-shrink:0}

.rgs2-micro{display:flex;gap:20px;margin-top:22px;flex-wrap:wrap;font-size:var(--fs-caption);color:var(--r2-muted)}
.rgs2-micro span{display:flex;align-items:center;gap:7px}
.rgs2-micro svg{width:13px;height:13px;stroke:var(--r2-accent);stroke-width:3;fill:none}

/* Orbit diagram */
.rgs2-orbit{position:relative;width:100%;max-width:720px;margin-left:auto;aspect-ratio:760/560}
.rgs2-orbit-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.rgs2-card{position:absolute;width:30.5%;background:#fff;border:1px solid var(--r2-line);border-radius:14px;padding:14px 15px;box-shadow:0 14px 34px -22px rgba(10,30,60,.45);z-index:2;display:flex;gap:11px;align-items:flex-start}
.rgs2-card .rgs2-ic{flex:none;width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.rgs2-card .rgs2-ic svg{width:17px;height:17px;fill:none;stroke-width:2}
.rgs2-card h3{font-family:var(--font-body);font-size:var(--fs-caption);font-weight:700;line-height:1.25;text-transform:none;letter-spacing:0;margin:0;color:var(--r2-navy)}
.rgs2-card p{font-size:var(--fs-caption);color:var(--r2-muted);margin-top:3px;line-height:1.35}
.rgs2-l1{left:0;top:15.2%;transform:translateY(-50%)}
.rgs2-l2{left:0;top:50%;transform:translateY(-50%)}
.rgs2-l3{left:0;top:84.8%;transform:translateY(-50%)}
.rgs2-r1{right:0;top:15.2%;transform:translateY(-50%)}
.rgs2-r2{right:0;top:50%;transform:translateY(-50%)}
.rgs2-r3{right:0;top:84.8%;transform:translateY(-50%)}
.rgs2-t-blue{background:#E8EFFB;border:1px solid #D2DFF5} .rgs2-t-blue svg{stroke:var(--r2-accent)}
.rgs2-t-red{background:#FCEDEB;border:1px solid #F5D7D1}  .rgs2-t-red svg{stroke:#D2563F}
.rgs2-t-amb{background:#FDF4E5;border:1px solid #F3E3C6}  .rgs2-t-amb svg{stroke:#C98A2E}
.rgs2-t-grn{background:#E9F4EC;border:1px solid #CDE5D6}  .rgs2-t-grn svg{stroke:#3E8C6C}
.rgs2-t-vio{background:#F1EEFB;border:1px solid #E0DAF2}  .rgs2-t-vio svg{stroke:#7A69C4}
.rgs2-t-nav{background:#E9EFF5;border:1px solid #D5E1EA}  .rgs2-t-nav svg{stroke:var(--r2-navy)}
.rgs2-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:29%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 22px 54px -22px rgba(10,30,60,.32);z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px}
.rgs2-hub img{width:86%;display:block;height:auto}

.rgs2-sysbar{position:relative;margin:26px 0 0 auto;background:#fff;border:1px solid var(--r2-line);border-radius:14px;padding:18px 22px;display:flex;gap:16px;align-items:center;max-width:720px}
.rgs2-sysbar .rgs2-ic{flex:none;width:46px;height:46px;border-radius:14px;background:var(--r2-accent-bg);border:1px solid #C7DCF0;display:flex;align-items:center;justify-content:center}
.rgs2-sysbar .rgs2-ic svg{width:21px;height:21px;stroke:var(--r2-accent);fill:none;stroke-width:2}
.rgs2-sysbar h4{font-family:var(--font-display);font-size: var(--fs-body);text-transform:uppercase;letter-spacing:-.4px;line-height:1;margin:0;color:var(--r2-navy)}
.rgs2-sysbar h4 span{color:var(--r2-accent)}
.rgs2-sysbar p{font-size:var(--fs-caption);color:var(--r2-muted);margin-top:5px}

@media (max-width:960px){
  .rgs2-hero-in{grid-template-columns:1fr}
  .rgs2-hero{padding:48px 0 44px}
  .rgs2-orbit{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:none}
  .rgs2-orbit-svg{display:none}
  .rgs2-card{position:static;transform:none;width:auto}
  .rgs2-hub{position:static;transform:none;width:auto;aspect-ratio:auto;border-radius:16px;grid-column:1/-1;flex-direction:row;gap:14px;justify-content:flex-start;padding:16px;order:-1}
  .rgs2-hub img{width:168px}
  .rgs2-sysbar{margin-left:0}
}
@media (max-width:640px){
  .rgs2-proof{gap:18px}
  .rgs2-proof-div{display:none}
  .rgs2-proof-num{font-size:var(--fs-h4)}
  .rgs2-orbit{grid-template-columns:1fr}
}

/* ============================================================
   RGS 4.0 — orbital hero diagram + system walkthrough deck
   Appended 2026-07-19. Cascade wins; no !important.
   ============================================================ */

/* ---------- hero copy column (classes used by page 1229 markup) ---------- */
.rgs-hero-h1{font-size:var(--fs-h1);line-height:.96}
.rgs-hero-eyebrow{display:block;font-family:var(--font-mono,ui-monospace,monospace);font-size:var(--fs-label);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#4A8EC2;margin-bottom:14px}
.rgs-hero-accent{color:#4A8EC2}
.rgs-btn-play{display:inline-flex;align-items:center;gap:10px}
.rgs-play-chip{width:26px;height:26px;border-radius:50%;background:#EDF1F5;border:1px solid #DDE5EC;
  display:flex;align-items:center;justify-content:center;transition:.16s}
.rgs-play-chip svg{width:9px;height:9px;fill:#7C8B9B}
.rgs-btn-play:hover .rgs-play-chip{background:#E3EAF1}
.rgs-btn-play:hover .rgs-play-chip svg{fill:#5E6E7F}

/* certification badges */
.rgs-badges{display:flex;gap:10px;flex-wrap:wrap}
.rgs-badge{background:#fff;border:1px solid #DBE7F2;border-radius:12px;width:106px;height:80px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:9px 8px;
  box-shadow:0 8px 20px -14px rgba(15,31,61,.5)}
.rgs-badge-mark{height:19px;display:flex;align-items:center;justify-content:center}
.rgs-badge-mark svg{height:19px;width:auto;display:block}
.rgs-badge-nm{font-size:var(--fs-label);font-weight:700;color:#0F1F3D;line-height:1.2}
.rgs-badge-sub{font-family:var(--font-mono,ui-monospace,monospace);font-size:8px;letter-spacing:.09em;
  text-transform:uppercase;color:#61748c}
.rgs-badge--stars .rgs-badge-num{font-family:var(--font-display);font-size:var(--fs-h5);letter-spacing:-.5px;color:#0F1F3D;line-height:1}
.rgs-badge-stars{display:flex;gap:2px}
.rgs-badge-stars svg{width:12px;height:12px;fill:#FBBC05}

/* walkthrough section header centred */
.rgs-deck-sec{text-align:center}
.rgs-deck-sec .eyebrow{justify-content:center}
.rgs-deck-sec .body-lg{margin-left:auto;margin-right:auto}
.rgs-deck-sec .rgs-deck{text-align:left}

/* ---------- orbital diagram ---------- */
.rgs-orbit-wrap{width:100%}
.rgs-orbit{position:relative;width:100%;max-width:720px;margin-left:auto;aspect-ratio:760/560}
.rgs-orbit-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.rgs-orb-card{position:absolute;width:30.5%;background:#fff;border:1px solid #DBE7F2;border-radius:14px;
  padding:14px 15px;box-shadow:0 14px 34px -22px rgba(15,31,61,.45);z-index:2;
  display:flex;gap:11px;align-items:flex-start;text-decoration:none;transition:transform .16s,box-shadow .16s,border-color .16s}
.rgs-orb-card:hover{transform:translateY(-3px);border-color:#4A8EC2;box-shadow:0 20px 40px -22px rgba(15,31,61,.5)}
.rgs-orb-ic{flex:none;width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.rgs-orb-ic svg{width:17px;height:17px;min-width:17px;min-height:17px;flex:none;fill:none;stroke-width:2;stroke:currentColor;display:block}
.rgs-orb-tx{display:block}
.rgs-orb-tx strong{display:block;font-size:var(--fs-caption);font-weight:700;line-height:1.25;color:#0F1F3D}
.rgs-orb-tx em{display:block;font-style:normal;font-size:var(--fs-caption);color:#61748c;margin-top:3px;line-height:1.35}
.rgs-orb-l1{left:0;top:15.2%;transform:translateY(-50%)}
.rgs-orb-l2{left:0;top:50%;transform:translateY(-50%)}
.rgs-orb-l3{left:0;top:84.8%;transform:translateY(-50%)}
.rgs-orb-r1{right:0;top:15.2%;transform:translateY(-50%)}
.rgs-orb-r2{right:0;top:50%;transform:translateY(-50%)}
.rgs-orb-r3{right:0;top:84.8%;transform:translateY(-50%)}
.rgs-orb-l1:hover,.rgs-orb-l2:hover,.rgs-orb-l3:hover,
.rgs-orb-r1:hover,.rgs-orb-r2:hover,.rgs-orb-r3:hover{transform:translateY(-50%) scale(1.03)}
.tint-blue{background:#E7F1FA;border:1px solid #CFE1F1}   .tint-blue svg{stroke:#4A8EC2}
.tint-red{background:#FCECEA;border:1px solid #F5D5D0}    .tint-red svg{stroke:#D2563F}
.tint-amber{background:#FDF3E3;border:1px solid #F3E1C2}  .tint-amber svg{stroke:#C98A2E}
.tint-green{background:#E9F4EC;border:1px solid #CDE5D6}  .tint-green svg{stroke:#3E8C6C}
.tint-violet{background:#F0EDFB;border:1px solid #DFD8F1} .tint-violet svg{stroke:#7A69C4}
.tint-navy{background:#E9EEF6;border:1px solid #D3DDEC}   .tint-navy svg{stroke:#0F1F3D}
.rgs-orb-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:29%;aspect-ratio:1;
  border-radius:50%;background:#fff;box-shadow:0 22px 54px -22px rgba(15,31,61,.32);z-index:3;
  display:flex;align-items:center;justify-content:center;padding:12px}
.rgs-orb-lockup{display:block;width:86%;aspect-ratio:300/219}

/* ---------- one system bar ---------- */
.rgs-sysbar{margin:26px 0 0 auto;max-width:720px;background:#fff;border:1px solid #DBE7F2;border-radius:14px;
  padding:18px 22px;display:flex;gap:16px;align-items:center}
.rgs-sysbar-ic{flex:none;width:46px;height:46px;border-radius:14px;background:#E7F1FA;border:1px solid #CFE1F1;
  display:flex;align-items:center;justify-content:center}
.rgs-sysbar-ic svg{width:21px;height:21px;stroke:#4A8EC2;fill:none;stroke-width:2}
.rgs-sysbar-tx strong{display:block;font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size: var(--fs-body);letter-spacing:-.4px;line-height:1;color:#0F1F3D}
.rgs-sysbar-tx strong span{color:#4A8EC2}
.rgs-sysbar-tx em{display:block;font-style:normal;font-size:var(--fs-caption);color:#61748c;margin-top:5px}


/* ---------- RGS DARK HERO variant (scoped to .hero--rgs; keeps rocket-blue accent + orange CTA) ---------- */
.hero--rgs{background:#0A1E3C;--page-accent:#4A8EC2;color:#fff;position:relative;overflow:hidden}
.hero--rgs::after{content:"";position:absolute;top:-30%;right:-10%;width:60%;height:120%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(74,142,194,.16),transparent 62%)}
.hero--rgs .container{position:relative;z-index:1}
.hero--rgs .hero-grid-bg{background-image:radial-gradient(rgba(122,170,220,.11) 1px,transparent 1px)}
.hero--rgs .rgs-hero-eyebrow{color:#6FA6D6}
.hero--rgs .rgs-hero-h1{color:#fff}
.hero--rgs .rgs-hero-accent{color:#4A8EC2}
.hero--rgs .body-lg{color:#AEC3D9}
.hero--rgs .btn--ghost-dark{color:#fff !important;border-color:rgba(255,255,255,.26);background:transparent}
.hero--rgs .btn--ghost-dark:hover{border-color:#fff;color:#fff !important;background:rgba(255,255,255,.07)}
.hero--rgs .rgs-play-chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
.hero--rgs .rgs-play-chip svg{fill:#cfe0f0}
.hero--rgs .rgs-btn-play:hover .rgs-play-chip{background:rgba(255,255,255,.2)}
.hero--rgs .rgs-btn-play:hover .rgs-play-chip svg{fill:#fff}
/* orbital connectors + node dots on dark */
.hero--rgs .rgs-orbit-svg circle,.hero--rgs .rgs-orbit-svg path{stroke:rgba(140,180,220,.30)}
.hero--rgs .rgs-orbit-svg g[fill] circle{fill:rgba(150,188,222,.55);stroke:none}
/* service cards -> dark glass; hover lights up */
.hero--rgs .rgs-orb-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);box-shadow:none}
.hero--rgs .rgs-orb-card:hover{background:rgba(255,255,255,.08);border-color:#4A8EC2;box-shadow:0 22px 46px -20px rgba(0,0,0,.6)}
.hero--rgs .rgs-orb-tx strong{color:#fff}
.hero--rgs .rgs-orb-tx em{color:#93a9c1}
.hero--rgs .tint-blue{background:rgba(74,142,194,.18);border-color:rgba(74,142,194,.34)}
.hero--rgs .tint-red{background:rgba(210,86,63,.16);border-color:rgba(210,86,63,.32)}
.hero--rgs .tint-amber{background:rgba(201,138,46,.16);border-color:rgba(201,138,46,.32)}
.hero--rgs .tint-green{background:rgba(62,140,108,.16);border-color:rgba(62,140,108,.32)}
.hero--rgs .tint-violet{background:rgba(122,105,196,.18);border-color:rgba(122,105,196,.34)}
.hero--rgs .tint-navy{background:rgba(150,188,222,.15);border-color:rgba(150,188,222,.3)}
.hero--rgs .tint-navy svg{stroke:#AEC6DD}
/* hub circle keeps white bg + rocket lockup */

/* ---------- combined trust bar (badges + one-system tagline, full width under the grid) ---------- */
.hero--rgs .rgs-trustbar{margin-top:40px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:14px 12px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero--rgs .rgs-trustbar .rgs-badges{gap:0;flex-wrap:nowrap;align-items:stretch}
.hero--rgs .rgs-trustbar .rgs-badge{background:transparent;border:0;border-right:1px solid rgba(255,255,255,.1);
  border-radius:0;box-shadow:none;width:auto;height:auto;padding:4px 20px;
  display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:center;text-align:left}
.hero--rgs .rgs-trustbar .rgs-badge-mark{grid-row:1/3;height:24px}
.hero--rgs .rgs-trustbar .rgs-badge-mark svg{height:24px}
.hero--rgs .rgs-trustbar .rgs-badge-nm{grid-column:2;align-self:end;color:#fff;font-size:var(--fs-caption)}
.hero--rgs .rgs-trustbar .rgs-badge-sub{grid-column:2;align-self:start;color:#8ba2ba;font-size:8px}
.hero--rgs .rgs-trustbar .rgs-badge--stars{grid-template-columns:auto;justify-items:start}
.hero--rgs .rgs-trustbar .rgs-badge--stars .rgs-badge-num{color:#fff}
.hero--rgs .rgs-trustbar .rgs-badge--stars .rgs-badge-stars{margin:1px 0}
.hero--rgs .rgs-trustbar .rgs-badge--stars .rgs-badge-sub{color:#8ba2ba}
.hero--rgs .rgs-trustbar-tag{margin-left:auto;display:flex;align-items:center;gap:13px;padding-left:6px}
.hero--rgs .rgs-trustbar-tag .rgs-sysbar-ic{flex:none;width:42px;height:42px;border-radius:12px;
  background:rgba(74,142,194,.18);border:1px solid rgba(74,142,194,.34);display:flex;align-items:center;justify-content:center}
.hero--rgs .rgs-trustbar-tag .rgs-sysbar-ic svg{width:20px;height:20px;stroke:#6FA6D6;fill:none;stroke-width:2}
.hero--rgs .rgs-trustbar-tag .rgs-sysbar-tx strong{display:block;font-family:var(--font-display);text-transform:uppercase;
  font-weight:400;font-size: var(--fs-body);letter-spacing:.2px;line-height:1.05;color:#fff}
.hero--rgs .rgs-trustbar-tag .rgs-sysbar-tx strong span{color:#4A8EC2}
.hero--rgs .rgs-trustbar-tag .rgs-sysbar-tx em{display:block;font-style:normal;font-size:var(--fs-caption);color:#93a9c1;margin-top:4px;max-width:34ch}
@media (max-width:960px){
  .hero--rgs .rgs-trustbar{flex-direction:column;align-items:flex-start}
  .hero--rgs .rgs-trustbar .rgs-badges{flex-wrap:wrap}
  .hero--rgs .rgs-trustbar-tag{margin-left:0;border-top:1px solid rgba(255,255,255,.1);padding-top:12px;width:100%}
}

/* ---------- walkthrough deck ---------- */
.rgs-deck{margin-top:34px;background:#fff;border:1px solid #DBE7F2;border-radius:20px;overflow:hidden;
  box-shadow:0 30px 64px -38px rgba(15,31,61,.5)}
.rgs-stage{position:relative;aspect-ratio:16/9;background:#fff;overflow:hidden}
.rgs-slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr .92fr;opacity:0;visibility:hidden;
  transform:translateX(26px);transition:opacity .5s ease,transform .5s ease,visibility .5s}
.rgs-slide.on{opacity:1;visibility:visible;transform:none}
.rgs-slide.prev{transform:translateX(-26px)}
.rgs-s-txt{padding:44px;display:flex;flex-direction:column;justify-content:center}
.rgs-s-step{font-family:var(--font-mono,ui-monospace,monospace);font-size:var(--fs-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#4A8EC2}
.rgs-s-txt h3{font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:-.6px;
  line-height:1.02;font-size:var(--fs-h3);margin-top:11px;color:#0F1F3D}
.rgs-s-txt p{color:#61748c;font-size:var(--fs-body);margin-top:13px;max-width:40ch}
.rgs-s-list{list-style:none;margin-top:16px;display:grid;gap:9px;padding:0}
.rgs-s-list li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);color:#61748c}
.rgs-s-list .tk{flex:none;width:19px;height:19px;border-radius:50%;background:#E7F1FA;border:1px solid #CFE1F1;
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.rgs-s-list .tk svg{width:10px;height:10px;stroke:#4A8EC2;stroke-width:3;fill:none}
.rgs-s-stat{margin-top:18px;padding-top:15px;border-top:1px solid #DBE7F2;
  font-family:var(--font-mono,ui-monospace,monospace);font-size:var(--fs-caption);font-weight:600;color:#4A8EC2}
.rgs-s-media{background:#E9F1F9;border-left:1px dashed #CBDCEB;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;color:#94A9BE;text-align:center;padding:24px}
.rgs-s-media .icn{width:34px;height:34px;opacity:.8}
.rgs-s-media b{font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.rgs-s-media em{font-style:normal;font-size:var(--fs-caption);color:#a8b9c9;max-width:26ch;line-height:1.4}
.rgs-slide--full{grid-template-columns:1fr}
.rgs-slide--full .rgs-s-txt{align-items:center;text-align:center}
.rgs-slide--full .rgs-s-txt p{max-width:52ch}
.rgs-slide--full .rgs-s-txt h3{font-size:var(--fs-h1)}

/* Slide 1 — optional background photo behind a navy overlay.
   To add the image later, set the custom property on the slide, e.g.
   .rgs-slide--onimage{--rgs-s1-bg:url(/cms/wp-content/uploads/2026/07/rocket.jpg);} */
.rgs-slide--onimage{background:#0F1F3D}
.rgs-s-bg{position:absolute;inset:0;z-index:0;background-image:var(--rgs-s1-bg,none);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.rgs-s-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,31,61,.72) 0%,rgba(15,31,61,.90) 100%)}
.rgs-slide--onimage .rgs-s-txt{position:relative;z-index:1}
.rgs-slide--onimage .rgs-s-txt h3{color:#fff}
.rgs-slide--onimage .rgs-s-txt p{color:#A9C1D8}
.rgs-slide--onimage .rgs-s-step{color:#7FB2DC}
.rgs-slide--onimage .rgs-s-ring{box-shadow:0 20px 46px -18px rgba(0,0,0,.6);border-color:rgba(255,255,255,.25)}
/* the ring keeps its white fill, so the normal blue/navy lockup stays legible inside it */
.rgs-s-ring{width:132px;height:132px;border-radius:50%;background:#fff;border:1px solid #DBE7F2;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  box-shadow:0 16px 34px -22px rgba(15,31,61,.5)}
.rgs-s-ring .rgs-orb-lockup{width:80%}
.rgs-s-btns{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;justify-content:center}
.rgs-bar{height:3px;background:#EDF3F9;position:relative;overflow:hidden}
.rgs-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:#4A8EC2;transition:width .18s linear}
.rgs-ctrl{display:flex;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid #DBE7F2;
  background:#FBFDFF;flex-wrap:wrap}
.rgs-iconbtn{width:38px;height:38px;border-radius:11px;border:1px solid #DBE7F2;background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;flex:none;padding:0}
.rgs-iconbtn:hover{border-color:#4A8EC2;background:#E7F1FA}
.rgs-iconbtn svg{width:15px;height:15px;fill:none;stroke:#0F1F3D;stroke-width:2.2}
.rgs-iconbtn.rgs-play{background:#0F1F3D;border-color:#0F1F3D}
.rgs-iconbtn.rgs-play svg{stroke:none;fill:#fff}
.rgs-iconbtn.rgs-play:hover{background:#1a3358}
.rgs-dots{display:flex;gap:7px;margin:0 auto}
.rgs-dots button{width:9px;height:9px;border-radius:50%;background:#CFDDEA;border:0;cursor:pointer;padding:0;transition:.18s}
.rgs-dots button:hover{background:#A9C6DF}
.rgs-dots button.on{background:#4A8EC2;width:24px;border-radius:20px}
.rgs-count{font-family:var(--font-mono,ui-monospace,monospace);font-size:var(--fs-label);color:#61748c;letter-spacing:.06em;flex:none}
.rgs-hint{font-family:var(--font-mono,ui-monospace,monospace);font-size:var(--fs-label);color:#93a5b8;letter-spacing:.05em;
  width:100%;text-align:center;margin-top:2px}

@media (max-width:960px){
  .rgs-orbit{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:none;margin-left:0}
  .rgs-orbit-svg{display:none}
  .rgs-orb-card{position:static;transform:none;width:auto}
  .rgs-orb-card:hover{transform:translateY(-2px)}
  .rgs-orb-hub{position:static;transform:none;width:auto;aspect-ratio:auto;border-radius:16px;
    grid-column:1/-1;justify-content:center;align-items:center;padding:22px 16px;order:-1}
  .rgs-orb-hub .rgs-orb-lockup{width:168px}
  .rgs-sysbar{margin-left:0}
  .rgs-slide{grid-template-columns:1fr}
  .rgs-stage{aspect-ratio:auto;min-height:540px}
  .rgs-s-media{border-left:0;border-top:1px dashed #CBDCEB;min-height:150px}
  .rgs-s-txt{padding:28px 22px}
  .rgs-dots{order:3;width:100%;justify-content:center;margin:6px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .rgs-slide{transition:opacity .01s}
  .rgs-bar i{transition:none}
}

/* RGS lockup artwork — official logo (media attachment 1793). */
.rgs-orb-lockup{background:url("https://dev.rocketwebdesigner.com/cms/wp-content/uploads/2026/07/Rocket-Growth-System-logo-lockup.webp") center/contain no-repeat}

/* Legacy sections replaced by shortcodes — fully removed from layout.
   (The [hidden] attribute already hides them; this belt-and-suspenders
   guarantees no residual spacing.) */
.rwd-legacy-hidden{display:none !important}

/* [rwd_stat_line] — slim single-stat band, sits between sections */
.rwd-statline{background:var(--base-tint,#EEF3F8);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:26px 0}
.rwd-statline--white{background:var(--white)}
.rwd-statline--dark{background:var(--ink);border-color:rgba(255,255,255,.12)}
.rwd-statline-in{display:flex;align-items:center;gap:22px;justify-content:center;max-width:820px;margin:0 auto}
.rwd-statline-num{font-family:var(--font-display);font-size:var(--fs-h1);line-height:1;color:var(--cta);flex:0 0 auto}
.rwd-statline-num i{font-style:normal;font-size:var(--fs-h3);vertical-align:super}
.rwd-statline-txt{margin:0;font-size: var(--fs-body);line-height:1.6;color:var(--ink-mid);max-width:52ch}
.rwd-statline--dark .rwd-statline-txt{color:rgba(255,255,255,.78)}
.rwd-statline-src{display:block;font-size:var(--fs-label);color:var(--ink-faint);margin-top:5px;letter-spacing:.03em}
@media(max-width:640px){.rwd-statline-in{flex-direction:column;text-align:center;gap:10px}.rwd-statline-num{font-size:var(--fs-h1)}}

/* ============================================================
   BLOG POST SIDEBAR — single posts only. Markup: rwd-post-sidebar.php
   ============================================================ */
/* ---- SINGLE POST layout (single.php) ---- */
.rwd-single{padding:34px 0 76px}
.rwd-single-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,330px);gap:52px;align-items:start}
.rwd-single-main{min-width:0}
.rwd-single-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.rwd-single-cats a{font-size: var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:var(--tint);border-radius:999px;padding:5px 11px;text-decoration:none}
.rwd-single-cats a:hover{background:var(--accent);color:#fff}
.rwd-single-title{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.08;
  letter-spacing:-.6px;color:var(--ink);margin-bottom:14px}
.rwd-single-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:var(--fs-caption);color:var(--ink-faint);margin-bottom:22px}
.rwd-single-meta i{font-style:normal;opacity:.5}
.rwd-single-avatar{border-radius:50%;display:block}
/* featured image: capped so a tall upload can't take over the page */
.rwd-single-fi{margin:0 0 30px;border-radius:16px;overflow:hidden;border:1px solid var(--border)}
.rwd-single-fi img{width:100%;height:clamp(220px,32vw,380px);object-fit:cover;object-position:center;display:block}
/* ── PHANTOM FONT FIX ──
   Blocksy's generated css/global.css points h1-h5 and the site title at
   --theme-font-family: 'Momo Trust Display'. That font's stylesheet was
   dequeued in July as an unused leftover, but the rules using it stayed.
   Result: every heading we don't explicitly style falls back to generic
   Sans-Serif (Arial on Windows) while body copy renders Segoe UI — the
   same silent mismatch the old 'DM Sans' declaration caused.
   Two-part selector (0,0,2) so it wins over Blocksy's bare h1 (0,0,1)
   regardless of stylesheet order. Headings that want the display face set
   font-family directly via var(--font-display) and are unaffected. */
body h1, body h2, body h3, body h4, body h5, body h6 { --theme-font-family: var(--font-body); }

/* ── MACHINE BAND ([rwd_machine_band]) ──
   One dark canvas instead of seven separate tiles. The cyan + orange blooms
   are the same light language as the top bar, so the page reads as one system. */
/* reviews band: flat white, square corners, sits above the navy one */
.rwd-rev-band { background: #fff; padding: 52px 0; }
.rwd-rev-in { max-width: 1500px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }
.rwd-rev-band .rwd-mb-card { background: #fff; border: 1px solid #E4EBF3; border-radius: 0; }
.rwd-rev-band .rwd-mb-rate { background: #fff; border: 1px solid #E4EBF3; border-radius: 0; }
.rwd-rev-band .rwd-mb-rate-n { color: var(--ink); }
.rwd-rev-band .rwd-mb-rate-l { color: var(--ink-faint); }
.rwd-rev-band .rwd-mb-rate-a { color: var(--accent) !important; }
.rwd-rev-band .rwd-mb-rate-a:hover { color: var(--cta) !important; }

/* dead scroll cue (markup still printed by the hero) */
.hp-scroll-hint { display: none; }

/* header logo dialled back */
.ct-header .site-logo-container img { width: 150px; height: auto; }

.rwd-mb { padding: 0; }
.rwd-mb-band {
  border-radius: 0; padding: 44px clamp(16px, 3vw, 40px) 34px;
  background:
    radial-gradient(46% 115% at 10% -5%, rgba(120,222,255,.20), transparent 65%),
    radial-gradient(42% 115% at 90% 105%, rgba(232,68,10,.22), transparent 65%),
    #0C1B33;
}
.rwd-mb a, .rwd-rev-band a { text-decoration: none; }
.rwd-mb-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; max-width: 1500px; margin: 0 auto; }
/* RGS hero tile */
.rwd-mb-hero {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 210px; padding: 20px; border-radius: 15px; overflow: hidden;
  background: linear-gradient(180deg, rgba(12,27,51,.12) 0%, rgba(12,27,51,.88) 70%),
              repeating-linear-gradient(125deg, #1B3157 0 14px, #203A66 14px 28px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.rwd-mb-hero:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -20px rgba(0,0,0,.7); }
/* badge sits IN FLOW with an auto spacer beneath it — absolute positioning let
   it collide with the title once the title wrapped to two lines */
.rwd-mb-badge {
  align-self: flex-start;
  background: rgba(255,255,255,.14); color: #BBD5EE; padding: 5px 10px; border-radius: 6px;
  font-size: var(--fs-label); font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.rwd-mb-spacer { flex: 1 1 auto; min-height: 14px; }
.rwd-mb-hero-t {
  font-family: var(--font-display); font-size: var(--fs-h3); line-height: .98;
  text-transform: uppercase; letter-spacing: -.5px; color: #fff; margin-bottom: 8px;
}
.rwd-mb-hero-p { font-size: var(--fs-small); line-height: 1.5; color: #A9C1DA; margin-bottom: 15px; max-width: 34ch; }
.rwd-mb-btn {
  align-self: flex-start; background: var(--cta); color: #fff;
  font-size: var(--fs-caption); font-weight: 800; padding: 11px 18px; border-radius: 8px;
  transition: filter .18s ease;
}
.rwd-mb-hero:hover .rwd-mb-btn { filter: brightness(1.1); }
/* glass tiles */
.rwd-mb-glass {
  display: flex; flex-direction: column; padding: 18px; border-radius: 15px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.rwd-mb-glass:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); transform: translateY(-2px); }
.rwd-mb-eyebrow { font-size: var(--fs-label); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #7FB0DC; }
.rwd-mb-eyebrow--cta { color: var(--cta); }
.rwd-mb-glass-t {
  font-family: var(--font-display); font-size: var(--fs-h5); line-height: 1; text-transform: uppercase;
  letter-spacing: -.4px; color: #fff; margin: 9px 0 6px;
}
.rwd-mb-glass-p { font-size: var(--fs-caption); line-height: 1.5; color: #9DB6D2; }
/* stat strip */
.rwd-mb-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px;
  max-width: 1500px; margin: 22px auto 0;
  padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.14);
}
.rwd-mb-stat { display: flex; align-items: baseline; gap: 8px; }
.rwd-mb-stat b { font-family: var(--font-display); font-size: var(--fs-h5); color: #fff; letter-spacing: -.3px; }
.rwd-mb-stat i { font-style: normal; font-size: var(--fs-label); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #7E9BBB; }
/* rating panel + reviews */
.rwd-mb-rev { display: grid; grid-template-columns: .72fr 1fr 1fr 1fr; gap: 12px; align-items: stretch; max-width: 1500px; margin: 0 auto; }
.rwd-mb-rate {
  background: #071426; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; padding: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.rwd-mb-rate-n { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1; color: #fff; }
.rwd-mb-stars { color: #FFC93C; letter-spacing: 2px; font-size: var(--fs-body); margin-top: 6px; }
.rwd-mb-stars--sm { font-size: var(--fs-caption); margin: 0; }
.rwd-mb-rate-l { font-size: var(--fs-label); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #9FBBD6; margin-top: 10px; line-height: 1.5; }
.rwd-mb-rate-a { font-size: var(--fs-caption); font-weight: 800; color: #8CC4EE !important; margin-top: 12px; }
.rwd-mb-rate-a:hover { color: #fff !important; }
.rwd-mb-card { background: #fff; border-radius: 15px; padding: 18px; display: flex; flex-direction: column; }
.rwd-mb-q { font-size: var(--fs-caption); line-height: 1.6; color: var(--ink-light); margin: 10px 0 14px; }
.rwd-mb-auth { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--base-tint); }
.rwd-mb-g { width: 20px; height: 20px; flex: 0 0 auto; }
.rwd-mb-who b { display: block; font-size: var(--fs-caption); font-weight: 700; color: var(--ink); }
.rwd-mb-who i { font-style: normal; font-size: var(--fs-label); color: var(--ink-faint); }
@media (max-width: 1000px) {
  .rwd-mb-top { grid-template-columns: 1fr 1fr; }
  .rwd-mb-hero { grid-column: 1 / -1; }
  .rwd-mb-rev { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .rwd-mb-top, .rwd-mb-rev { grid-template-columns: 1fr; }
  .rwd-mb-band { padding: 16px; }
}

/* ── BLOG ARCHIVE (home.php) ── */
.rwd-blog-archive{padding-bottom:70px}
.rwd-ba-hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:end;padding:6px 0 26px;border-bottom:1px solid var(--border);margin-bottom:26px}
.rwd-ba-eyebrow{display:block;font-size: var(--fs-label);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cta);margin-bottom:9px}
.rwd-ba-hero h1{font-family:var(--font-body);font-weight:700;letter-spacing:-.6px;line-height:1.16;font-size:var(--fs-h2);max-width:22ch;margin:0 0 10px;color:var(--ink)}
.rwd-ba-hero p{font-size:var(--fs-body);line-height:1.6;color:var(--ink-light);max-width:62ch;margin:0}
.rwd-ba-search{display:flex;gap:8px}
.rwd-ba-search input[type=search]{flex:1;min-width:0;padding:11px 14px;font-size:var(--fs-small);border:1px solid var(--border);border-radius:9px;background:#fff}
.rwd-ba-search input[type=search]:focus{outline:none;border-color:var(--cta);box-shadow:0 0 0 3px rgba(232,68,10,.12)}
.rwd-ba-search button{padding:11px 16px;font-size: var(--fs-caption);font-weight:800;color:#fff;background:var(--ink);border:0;border-radius:9px;cursor:pointer;transition:background .18s ease}
.rwd-ba-search button:hover{background:var(--cta)}
/* three pastel discovery strips */
.rwd-ba-strips{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:34px}
.rwd-ba-strip{border-radius:14px;padding:15px 17px 12px}
.rwd-ba-strip-l{display:block;font-size: var(--fs-label);font-weight:800;letter-spacing:.15em;text-transform:uppercase;margin-bottom:9px}
.rwd-ba-strip-l i{font-style:normal;font-weight:700;letter-spacing:.04em;text-transform:none;opacity:.66}
.rwd-ba-strips--cat{grid-template-columns:1fr 2fr}
/* no view data in this topic yet -> chips take the whole row instead of
   sitting in a narrow column with dead space beside them */
.rwd-ba-strips--cat .rwd-ba-strip--wide:only-child{grid-column:1/-1}
.rwd-ba-chips{display:flex;flex-wrap:wrap;gap:7px}
.rwd-ba-chips a{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.7);font-size: var(--fs-caption);font-weight:700;color:#2E2560 !important;text-decoration:none;transition:background .18s ease,color .18s ease}
.rwd-ba-chips a:hover{background:var(--cta);color:#fff !important}
.rwd-ba-chips i{font-style:normal;font-size: var(--fs-label);opacity:.6}
.rwd-ba-mini{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;font-size:var(--fs-caption);font-weight:600;line-height:1.35;text-decoration:none;border-top:1px solid rgba(10,30,60,.09)}
.rwd-ba-mini:first-of-type{border-top:0}
.rwd-ba-mini-m{flex:0 0 auto;font-size:var(--fs-label);font-weight:700;opacity:.62}
.rwd-ba-strip--new{background:#E8F4EE}
.rwd-ba-strip--new .rwd-ba-strip-l{color:#3E7C63}
.rwd-ba-strip--new .rwd-ba-mini{color:#22503F !important}
.rwd-ba-strip--hot{background:#FBF0E0}
.rwd-ba-strip--hot .rwd-ba-strip-l{color:#8A6212}
.rwd-ba-strip--hot .rwd-ba-mini{color:#5E410A !important}
.rwd-ba-strip--rand{background:#EFEAFA}
.rwd-ba-strip--rand .rwd-ba-strip-l{color:#5B4A9E}
.rwd-ba-strip--rand .rwd-ba-mini{color:#2E2560 !important}
.rwd-ba-mini:hover{color:var(--cta) !important}
/* post grid */
.rwd-ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 22px}
.rwd-ba-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.rwd-ba-card:hover{border-color:var(--cta);box-shadow:0 14px 34px -22px rgba(10,30,60,.5);transform:translateY(-2px)}
.rwd-ba-card-img{display:block;height:158px;background:var(--base-tint);overflow:hidden}
.rwd-ba-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.rwd-ba-ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,#EEF3F8,#DDE7F1)}
.rwd-ba-card-b{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.rwd-ba-cat{align-self:flex-start;font-size: var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent) !important;text-decoration:none;margin-bottom:7px}
.rwd-ba-card h2,.rwd-ba-card-t{font-family:var(--font-body);font-size: var(--fs-body);font-weight:700;letter-spacing:-.3px;line-height:1.3;margin:0 0 7px;text-transform:none}
.rwd-ba-card h2 a,.rwd-ba-card-t a{color:var(--ink) !important;text-decoration:none}
.rwd-ba-card:hover h2 a,.rwd-ba-card:hover .rwd-ba-card-t a{color:var(--cta) !important}
/* homepage variant: 3-up ([rwd_latest_posts]) */
.rwd-ba-grid--home{grid-template-columns:repeat(3,1fr)}
/* the generic .container inside this wrap carried 80px top+bottom padding —
   the "huge waste of space" band around the cards */
.hp-blog-posts-wrap > .container{padding-top:0;padding-bottom:0}
/* the header's .container stacked its own 80px on the section's 64px — kill
   both directions so top gap = bottom gap = the section's 64px */
.section .container:has(> .hp-blog-header){padding-top:0;padding-bottom:0}
.hp-blog-header{margin-bottom:22px}
.rwd-ba-grid--home{margin-top:0}
@media (max-width:900px){.rwd-ba-grid--home{grid-template-columns:1fr}}
.rwd-ba-card p{font-size: var(--fs-caption);line-height:1.55;color:var(--ink-light);margin:0 0 12px}
.rwd-ba-meta{margin-top:auto;font-size: var(--fs-label);font-weight:600;color:var(--ink-faint)}
.rwd-blog-archive .nav-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.rwd-blog-archive .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;font-size: var(--fs-caption);font-weight:700;color:var(--ink) !important;background:#fff;border:1px solid var(--border);border-radius:9px;text-decoration:none}
.rwd-blog-archive .page-numbers.current{background:var(--ink);color:#fff !important;border-color:var(--ink)}
.rwd-blog-archive .page-numbers:hover{border-color:var(--cta);color:var(--cta) !important}
.rwd-blog-archive .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:1000px){
  .rwd-ba-hero{grid-template-columns:1fr;align-items:start;gap:18px}
  .rwd-ba-strips{grid-template-columns:1fr}
}
@media (max-width:640px){ .rwd-ba-grid{grid-template-columns:1fr} }

.rwd-single-body{max-width:none}
.rwd-single-body > *{max-width:72ch}
.rwd-single-body img{max-width:100%;height:auto;border-radius:12px}
.rwd-single-foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px;padding-top:26px;border-top:1px solid var(--border)}
@media(max-width:1024px){.rwd-single-grid{grid-template-columns:1fr;gap:36px}}
/* auto-fit with a 260px floor: cards can wrap to a row when there's space,
   but can never be squeezed narrower than 260px. */
.rwd-ps{position:sticky;top:110px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-content:start}
.rwd-ps-card{min-width:0}
.rwd-ps-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px 20px;box-shadow:0 12px 30px -24px rgba(10,30,60,.5)}
.rwd-ps-card h3{font-size:var(--fs-body);font-weight:800;color:var(--ink);line-height:1.25;margin-bottom:8px}
.rwd-ps-card p{font-size: var(--fs-caption);color:var(--ink-mid);line-height:1.6}
.rwd-ps-kicker{display:block;font-size:var(--fs-label);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cta);margin-bottom:8px}
.rwd-ps-btn{display:block;text-align:center;margin-top:14px;background:var(--cta);color:#fff!important;
  font-weight:800;font-size:var(--fs-small);padding:12px 16px;border-radius:10px;text-decoration:none;border:0;cursor:pointer;
  font-family:inherit;transition:var(--transition)}
.rwd-ps-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.rwd-ps-btn--sm{margin:0;padding:11px 14px;font-size:var(--fs-caption);white-space:nowrap}
.rwd-ps-link{display:inline-block;margin-top:12px;font-weight:800;font-size:var(--fs-caption);color:var(--accent);text-decoration:none}
.rwd-ps-link:hover{color:var(--accent-bright)}

/* CTA card — the one that should catch the eye */
.rwd-ps-card--cta{background:linear-gradient(160deg,#FFF4EF,#FFFAF7);border-color:rgba(232,68,10,.22)}

/* rush card */
.rwd-ps-card--rush{background:var(--ink);border-color:var(--ink)}
.rwd-ps-card--rush h3{color:#fff}
.rwd-ps-card--rush p{color:rgba(255,255,255,.7)}
.rwd-ps-clock{display:inline-block;background:var(--cta);color:#fff;font-size: var(--fs-label);font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:10px}
.rwd-ps-card--rush .rwd-ps-link{color:#7AAADC}

/* newsletter */
.rwd-ps-form{display:flex;gap:8px;margin-top:12px}
.rwd-ps-form input{flex:1;min-width:0;border:1.5px solid var(--border);border-radius:10px;padding:11px 12px;
  font-size:var(--fs-caption);font-family:inherit;color:var(--ink);outline:none}
.rwd-ps-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(74,142,194,.14)}
.rwd-ps-msg{font-size:var(--fs-caption);margin-top:8px;min-height:1em;color:var(--ink-faint)}
.rwd-ps-msg.is-err{color:#C0392B}
.rwd-ps-msg.is-ok{color:#2A7A50;font-weight:700}

/* Guard: any inline SVG without explicit sizing defaults to 300x150 in CSS.
   Keep icon SVGs from ever ballooning if a rule is missed. */
.rwd-page svg:not([width]):not([height]){max-width:100%;max-height:100%}
/* Icon wrappers: hard CAP only — never set height:auto here, that makes an
   SVG stretch to the container instead of shrinking (it caused 300px icons). */
[class*="-icon"] > svg,[class*="-emoji"] > svg{max-width:48px;max-height:48px}
.qs2-choice-icon svg{width:30px;height:30px;display:block;margin:0 auto 6px;color:var(--accent);stroke-width:1.7;transition:color .18s ease}
/* HOVER = "you're about to pick this": the WHOLE tile goes orange —
   border, background tint, icon and title — not just the icon. */
.qs2-choice:hover .qs2-choice-card{
  border-color:var(--cta)!important;background:#FFF3EC!important;
  box-shadow:0 8px 22px -10px rgba(232,68,10,.45)!important;transform:translateY(-2px)}
.qs2-choice:hover .qs2-choice-title{color:var(--cta)}
.qs2-choice:hover .qs2-choice-check{opacity:.45;transform:scale(.9);background:var(--cta)}
.qs2-choice-card,.qs2-choice-title{transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}

/* icons pick up the CTA on hover / when the tile is chosen */
.qs2-choice:hover .qs2-choice-icon svg,
.qs2-choice--selected .qs2-choice-icon svg,
.hq-choice:hover .hq-ico svg,
.hq-choice.is-sel .hq-ico svg{color:var(--cta)}
/* same behaviour for the swapped icons on cards that link somewhere */
.svc-scard:hover .svc-scard-b svg,
.rgs-comp-card:hover .rgs-comp-icon svg,
.wd-feature-card:hover .wd-feature-icon svg,
.wd-problem-card:hover .wd-problem-icon svg,
.wd-industry:hover .wd-industry-icon svg{color:var(--cta)}
.rgs-comp-icon svg,.wd-feature-icon svg,.wd-problem-icon svg,.wd-industry-icon svg{transition:color .18s ease}

/* emoji -> line SVG (rwd-svg-icons.php): size to the wrapper's font-size,
   inherit its color; accent by default, sky on dark cards */
.wd-problem-icon svg,.wd-feature-icon svg,.wd-industry-icon svg{
  display:block;color:var(--accent);stroke-width:1.6}
.wd-feature-icon svg{width:60px;height:60px}
.wd-problem-icon svg{width:40px;height:40px}
.wd-industry-icon svg{width:48px;height:48px;margin:0 auto}
.wd-feature-card--dark .wd-feature-icon svg{color:#7AAADC}

/* problem-card emoji -> line SVG (filter in functions.php) */
.problem-emoji--svg{display:block;color:var(--accent)}
.problem-emoji--svg svg{width:40px;height:40px;stroke-width:1.5;display:block}

/* ---- READING TEXT — the author-page hero treatment, sitewide.
   Same system sans the site already uses (Segoe UI et al, 0 KB);
   what makes it read well is size, leading and softer ink — not the
   typeface. Paragraph-level text only; headings and UI untouched. ---- */
.rwd-single-body p,.rwd-single-body li,.rwd-single-body blockquote{
  font-family:var(--font-body);font-size: var(--fs-h5);line-height:1.8;color:#33465C}
.rwd-single-body p{margin-bottom:1.35em}
/* Blog headings: plain bold sans, tight tracking, sentence case.
   Archivo Black ALL-CAPS is for marketing pages, it reads as shouting in an article. */
.rwd-single-title,
.rwd-single-body h1,.rwd-single-body h2,.rwd-single-body h3,
.rwd-single-body h4,.rwd-single-body h5,.rwd-single-body h6{
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:-.5px;
  text-transform:none;
  line-height:1.22;
  color:var(--ink);
  margin-block-end:calc(.3em + 10px)}
.rwd-single-body h2{font-size: var(--fs-h3);margin-top:1.9em}
.rwd-single-body h3{font-size: var(--fs-h4);margin-top:1.6em}
.rwd-single-body h4{font-size: var(--fs-h5);margin-top:1.4em}
.body-lg,.body-md,.hero-lead,.wd-faq-a,.hp-review-text{line-height:1.75}

/* topics card */
.rwd-ps-topics{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.rwd-ps-topic{display:inline-flex;align-items:center;gap:6px;background:var(--tint);color:var(--ink);
  font-size:var(--fs-caption);font-weight:700;border-radius:999px;padding:6px 12px;text-decoration:none;transition:var(--transition)}
.rwd-ps-topic i{font-style:normal;font-size: var(--fs-label);color:var(--ink-faint);font-weight:800}
.rwd-ps-topic:hover{background:var(--accent);color:#fff}
.rwd-ps-topic:hover i{color:rgba(255,255,255,.75)}

/* article tag row */
.rwd-single-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.rwd-single-tags a{background:var(--tint);color:var(--ink-mid);font-size:var(--fs-caption);font-weight:700;
  border-radius:999px;padding:6px 13px;text-decoration:none;transition:var(--transition)}
.rwd-single-tags a:before{content:"#";color:var(--accent);margin-right:2px}
.rwd-single-tags a:hover{background:var(--accent);color:#fff}
.rwd-single-tags a:hover:before{color:#fff}

/* 10-item panes scroll instead of stretching the rail */
.rwd-ps-pane.is-on{display:block;max-height:430px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}

/* keep-reading tabs */
.rwd-ps-tabs{display:flex;gap:4px;background:var(--tint);border-radius:9px;padding:4px;margin:12px 0 4px}
.rwd-ps-tab{flex:1;border:0;background:none;font-family:inherit;font-size: var(--fs-label);font-weight:800;color:var(--ink-faint);padding:7px 4px;border-radius:7px;cursor:pointer;transition:var(--transition);white-space:nowrap}
.rwd-ps-tab:hover{color:var(--ink)}
.rwd-ps-tab.is-on{background:#fff;color:var(--ink);box-shadow:0 3px 8px -4px rgba(10,30,60,.35)}
.rwd-ps-pane{display:none}
.rwd-ps-pane.is-on{display:block}

/* related */
.rwd-ps-rel{display:flex;gap:11px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);text-decoration:none}
.rwd-ps-rel:last-of-type{border-bottom:0}
.rwd-ps-rel-img{flex:0 0 auto;width:52px;height:52px;border-radius:9px;overflow:hidden;background:var(--tint);display:block}
.rwd-ps-rel-img img{width:100%;height:100%;object-fit:cover;display:block}
.rwd-ps-ph{display:block;width:100%;height:100%;background:linear-gradient(140deg,#DCEAF7,#EEF3F8)}
.rwd-ps-rel-t{font-size:var(--fs-caption);font-weight:700;color:var(--ink);line-height:1.35}
.rwd-ps-rel:hover .rwd-ps-rel-t{color:var(--accent)}

/* trust */
.rwd-ps-card--trust{text-align:center;background:var(--tint)}
.rwd-ps-stars{color:#F5B500;letter-spacing:2px;font-size:var(--fs-body)}
.rwd-ps-card--trust b{display:block;font-size:var(--fs-body);color:var(--ink);margin-top:6px}
.rwd-ps-card--trust small{display:block;font-size:var(--fs-caption);color:var(--ink-faint);margin-top:4px;line-height:1.5}

@media(max-width:1024px){.rwd-ps{position:static}}

/* ============================================================
   WOW HERO — ?wow=1  (homepage ignition treatment)
   Deep navy + drifting ember bloom, constellation, grain,
   staggered entrance. Nothing below the hero changes.
   ============================================================ */
body.rwd-wow .hp-hero{
  position:relative;
  background:
    radial-gradient(900px 620px at 8% -12%, rgba(74,142,194,.26) 0%, rgba(10,30,60,0) 62%),
    linear-gradient(168deg,#0C2549 0%,#0A1E3C 38%,#071426 72%,#0C1B33 100%);
  padding-top:74px;padding-bottom:96px;overflow:hidden}

/* THE EMBER — sits above the background, below the content. This is the whole effect. */
body.rwd-wow .hp-hero:before{
  content:"";position:absolute;left:50%;bottom:-46%;width:min(1700px,168%);aspect-ratio:2/1;
  transform:translateX(-50%);z-index:1;pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(255,196,120,.55) 0%, rgba(255,138,40,.42) 22%, rgba(232,68,10,.30) 44%, rgba(232,68,10,.10) 66%, rgba(10,30,60,0) 82%);
  filter:blur(10px);
  animation:rwdEmber 14s ease-in-out infinite alternate}
@keyframes rwdEmber{
  0%{opacity:.85;transform:translateX(-50%) scale(1)}
  100%{opacity:1;transform:translateX(-52%) scale(1.12)}}

/* hot rim right at the base — the ignition line */
body.rwd-wow .hp-hero .hp-scroll-hint:before{
  content:"";position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);
  width:min(900px,88vw);height:150px;pointer-events:none;z-index:1;
  background:radial-gradient(closest-side, rgba(255,214,150,.55), rgba(255,150,60,.22) 52%, transparent 78%);
  filter:blur(8px)}

/* fine grain so the gradient never bands */
body.rwd-wow .hp-hero:after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.26;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.42'/></svg>")}

/* stacking: bg → ember → grain → stars → content */
body.rwd-wow .hp-hero .container,
body.rwd-wow .hp-hero-inner{position:relative;z-index:4}
body.rwd-wow .hp-scroll-hint{position:relative;z-index:4}

/* the dotted grid gets fainter and cooler on dark */
body.rwd-wow .hp-hero-grid-bg{opacity:.45;z-index:3;background-image:radial-gradient(rgba(122,170,220,.20) 1px,transparent 1px)!important}

/* type */
body.rwd-wow .hp-hero-eyebrow{color:#C9A98E}
body.rwd-wow .hp-hero-eyebrow-line{background:rgba(201,169,142,.5)}
body.rwd-wow .hp-hero-h1{color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.35)}
body.rwd-wow .hp-hero-h2{color:#7AAADC}
body.rwd-wow .hp-hero-lead{color:rgba(233,240,248,.76)}

/* buttons: the orange now glows because it has somewhere to glow */
body.rwd-wow .hp-hero-btns .btn--orange{box-shadow:0 18px 50px -14px rgba(232,68,10,.85),0 0 0 1px rgba(255,255,255,.06) inset}
body.rwd-wow .hp-hero-btns .btn--ghost-dark{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04);backdrop-filter:blur(4px)}
body.rwd-wow .hp-hero-btns .btn--ghost-dark:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.5)}

/* trust strip + badges as glass */
body.rwd-wow .hp-hero-trust{border-top-color:rgba(201,169,142,.22)}
body.rwd-wow .hp-hero-trust-label{color:#C9A98E}
body.rwd-wow .hp-badge{background:none;border:0;box-shadow:none;backdrop-filter:none;
  padding:6px;transition:transform .18s ease,filter .18s ease;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
body.rwd-wow .hp-badge:hover{transform:translateY(-3px);
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.6))}
body.rwd-wow .rwd-badge-cap{color:rgba(233,240,248,.55)}
body.rwd-wow .hp-scroll-arrow{color:#C9A98E}

/* entrance — staggered, once */
@media(prefers-reduced-motion:no-preference){
  body.rwd-wow .hp-hero-eyebrow,
  body.rwd-wow .hp-hero-h1,
  body.rwd-wow .hp-hero-h2,
  body.rwd-wow .hp-hero-lead,
  body.rwd-wow .hp-hero-btns,
  body.rwd-wow .hp-hero-trust{opacity:0;transform:translateY(18px);animation:rwdRise .9s cubic-bezier(.16,1,.3,1) forwards}
  body.rwd-wow .hp-hero-eyebrow{animation-delay:.05s}
  body.rwd-wow .hp-hero-h1{animation-delay:.16s}
  body.rwd-wow .hp-hero-h2{animation-delay:.27s}
  body.rwd-wow .hp-hero-lead{animation-delay:.40s}
  body.rwd-wow .hp-hero-btns{animation-delay:.52s}
  body.rwd-wow .hp-hero-trust{animation-delay:.66s}
}
@keyframes rwdRise{to{opacity:1;transform:none}}

/* constellation layer injected by the toggle */
/* live starfield canvas — painted in functions.php, sits under the content and
   over the ember bloom's grain layer */
.rwd-wow-stars{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.9;
  display:block;width:100%;height:100%}

@media(max-width:781px){body.rwd-wow .hp-hero{padding-top:52px;padding-bottom:64px}}

/* ============================================================
   TEMP — serif display evaluation (?serif=1). Georgia is already on
   every device, so this costs nothing. Delete with the wp_head snippet
   in functions.php once decided.
   ============================================================ */
html.rwd-serif-on body,body.rwd-serif{--font-display:Georgia,"Times New Roman",serif}
body.rwd-serif h1,body.rwd-serif h2,body.rwd-serif h3,
body.rwd-serif .hp-hero-h1,body.rwd-serif .hp-hero-h2,body.rwd-serif .display-lg,
body.rwd-serif .hero-h1,body.rwd-serif .svc-h1,body.rwd-serif .rd-h1,
body.rwd-serif .nmd-h1,body.rwd-serif .rwd-bh-h1,body.rwd-serif .hp-bento-feature-title,
body.rwd-serif .hp-bento-big,body.rwd-serif .hp-bento-mid-title,body.rwd-serif .hp-bento-dark-title{
  font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:-.5px;text-transform:none}
/* serif wants a little more line-height than Archivo Black */
body.rwd-serif .hp-hero-h1,body.rwd-serif .hp-hero-h2{line-height:1.06}
body.rwd-serif .display-lg{line-height:1.1}

/* ============================================================
   NEWSLETTER POPUP — corner card, CTA orange, white rocket mark.
   Markup + behaviour: rwd-popup.php
   ============================================================ */
.rwd-np{position:fixed;right:22px;bottom:22px;width:372px;max-width:calc(100vw - 32px);z-index:9999;
  background:linear-gradient(150deg,#F2540F 0%,#E8440A 55%,#CF3B08 100%);
  border-radius:20px;padding:26px 24px 22px;color:#fff;overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(232,68,10,.8);
  opacity:0;transform:translateY(18px);transition:opacity .28s ease,transform .28s ease}
.rwd-np.is-on{opacity:1;transform:none}
.rwd-np:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:18px 18px;pointer-events:none}
.rwd-np-rocket{position:absolute;right:-24px;bottom:-26px;width:172px;height:auto;opacity:.26;transform:rotate(12deg);pointer-events:none;z-index:1}
.rwd-np-in{position:relative;z-index:2}
.rwd-np-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42);color:#fff;
  font-size:var(--fs-h4);line-height:1;cursor:pointer;display:grid;place-items:center;z-index:6;transition:var(--transition)}
.rwd-np-x:hover{background:#fff;color:var(--cta);transform:rotate(90deg)}
.rwd-np-kicker{display:block;font-weight:800;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.rwd-np-h{font-family:var(--font-display);font-size: var(--fs-h3);text-transform:uppercase;line-height:.98;letter-spacing:-.6px;color:#fff;margin:11px 0 10px}
.rwd-np-p{font-size: var(--fs-caption);color:rgba(255,255,255,.9);max-width:32ch;line-height:1.55}
.rwd-np-form{margin-top:16px}
.rwd-np-form input{width:100%;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.42);
  border-radius:10px;padding:12px 14px;font-size: var(--fs-caption);color:#fff;font-family:inherit;outline:none}
.rwd-np-form input::placeholder{color:rgba(255,255,255,.72)}
.rwd-np-form input:focus{background:rgba(255,255,255,.24);border-color:#fff}
.rwd-np-btn{width:100%;margin-top:8px;background:#fff;color:var(--cta);border:0;border-radius:10px;
  padding:13px;font-weight:800;font-size:var(--fs-small);font-family:inherit;cursor:pointer;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.45);transition:var(--transition)}
.rwd-np-btn:hover{background:var(--ink);color:#fff}
.rwd-np-btn:disabled{opacity:.7;cursor:default}
.rwd-np-err{font-size: var(--fs-label);color:#FFE2D8;margin-top:8px;min-height:1em}
.rwd-np-fine{font-size: var(--fs-label);color:rgba(255,255,255,.7);margin-top:8px;text-align:center}
/* success state swaps the panel */
.rwd-np-done{display:none;text-align:center;padding:10px 0 4px}
.rwd-np-done b{display:block;font-family:var(--font-display);font-size: var(--fs-h5);text-transform:uppercase;margin-bottom:6px}
.rwd-np-done span{font-size:var(--fs-caption);color:rgba(255,255,255,.85)}
.rwd-np-dl{display:block;margin-top:12px;background:#fff;color:var(--cta) !important;font-weight:800;font-size:var(--fs-small);padding:12px 16px;border-radius:9px;text-decoration:none;transition:transform .18s ease}
.rwd-np-dl:hover{transform:translateY(-1px)}
.rwd-np.is-done .rwd-np-kicker,.rwd-np.is-done .rwd-np-h,.rwd-np.is-done .rwd-np-p,
.rwd-np.is-done .rwd-np-form,.rwd-np.is-done .rwd-np-err,.rwd-np.is-done .rwd-np-fine{display:none}
.rwd-np.is-done .rwd-np-done{display:block}
@media(max-width:600px){.rwd-np{right:12px;left:12px;bottom:12px;width:auto;padding:22px 20px 18px}
  .rwd-np-h{font-size: var(--fs-h4)}.rwd-np-rocket{width:132px;opacity:.2}}
@media(prefers-reduced-motion:reduce){.rwd-np{transition:none}}

/* ============================================================
   WEBSITE REDESIGN — before/after. Three treatments on one page:
   drag slider (flagship) → side-by-side diagnosis → the wall.
   ============================================================ */
.rd-hero{ padding-bottom: 50px; background:linear-gradient(160deg,#EAF3FB 0%,#F7FBFE 60%,#EAF3FB 100%); text-align:center; }
.rd-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(47,111,181,.13) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.rd-hero .container{position:relative;z-index:1}
.rd-h1{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.6px;line-height:1.03;font-size:var(--fs-h2);color:var(--ink);margin:12px 0 14px}
.rd-h1 span{color:var(--accent)}
.rd-lead{color:var(--ink-mid);font-size:var(--fs-body);max-width:58ch;margin:0 auto}
.rd-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}

/* ── drag slider ── */
.rd-slider{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#0D1B2E;aspect-ratio:16/10;user-select:none;cursor:ew-resize;touch-action:pan-y;box-shadow:0 30px 60px -40px rgba(10,30,60,.6)}
.rd-lay{position:absolute;inset:0}
.rd-lay img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;pointer-events:none}
.rd-after{clip-path:inset(0 0 0 50%)}
.rd-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(10,30,60,.25);pointer-events:none}
.rd-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:var(--fs-body);color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.rd-tag{position:absolute;top:14px;font-size: var(--fs-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;color:#fff;z-index:3}
.rd-tag--b{left:14px;background:rgba(10,30,60,.78)}
.rd-tag--a{right:14px;background:var(--cta)}
.rd-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.rd-metric{background:#fff;border:1px solid var(--border);border-radius:12px;padding:15px 16px;text-align:center}
.rd-metric b{display:block;font-family:var(--font-display);font-size: var(--fs-h4);color:var(--accent);line-height:1}
.rd-metric small{font-size:var(--fs-label);color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase}

/* ── side-by-side + diagnosis ── */
.rd-case{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.rd-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rd-shot{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border);margin:0}
.rd-shot img{width:100%;height:auto;display:block}
.rd-shot .t{position:absolute;left:10px;top:10px;font-size:var(--fs-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;color:#fff;z-index:2}
.rd-shot--old .t{background:#8496AC}
.rd-shot--new .t{background:var(--cta)}
.rd-diag{display:grid;gap:11px;margin-top:16px}
.rd-diag-row{display:flex;gap:11px;align-items:flex-start;font-size: var(--fs-small);line-height:1.55}
.rd-diag-row i{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:var(--fs-label);font-weight:800;margin-top:2px}
.rd-bad i{background:#FCEDEB;color:#C0392B}
.rd-good i{background:#E9F4EC;color:#2A7A50}
.rd-diag-row b{color:var(--ink)}
.rd-diag-row span{color:var(--ink-mid)}

/* ── the wall ── */
.rd-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rd-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff;transition:var(--transition)}
.rd-card:hover{transform:translateY(-4px);box-shadow:0 22px 42px -28px rgba(10,30,60,.5)}
.rd-flip{position:relative;aspect-ratio:1/1;overflow:hidden}
.rd-flip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:opacity .3s}
.rd-flip .rd-new{opacity:0}
.rd-card:hover .rd-old{opacity:0}
.rd-card:hover .rd-new{opacity:1}
.rd-hint{position:absolute;right:10px;bottom:10px;background:rgba(10,30,60,.82);color:#fff;font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;z-index:2}
.rd-card:hover .rd-hint{background:var(--cta)}
.rd-card-b{padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.rd-card-b b{font-size: var(--fs-caption);color:var(--ink)}
.rd-card-b small{font-size: var(--fs-label);color:#2A7A50;font-weight:800;background:#E9F4EC;border-radius:999px;padding:3px 9px;white-space:nowrap}

@media(max-width:900px){.rd-case{grid-template-columns:1fr;gap:30px}
  .rd-wall{grid-template-columns:1fr 1fr}
  .rd-metrics{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rd-wall{grid-template-columns:1fr}}

/* ============================================================
   SERVICES INDEX — page 1437. Light page; reuses .rgs-orbit-*
   from the Rocket Growth System page (base styles are light —
   the dark variant is scoped to .hero--rgs, so nothing to undo).
   ============================================================ */
.svc-hero{ padding-bottom: 50px; background:linear-gradient(160deg,#EAF3FB 0%,#F7FBFE 60%,#EAF3FB 100%); }
.svc-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(47,111,181,.13) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.svc-hero .container{position:relative;z-index:1}
/* two-column: copy left, orbit right, vertically centered */
.svc-hero-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:38px;align-items:center}
.svc-hero-head{max-width:46ch}
/* the orbit needs room or the service cards squeeze to three-word lines */
.svc-orbit .rgs-orbit{max-width:none}
.svc-orbit .rgs-orb-card{width:33%;padding:12px 13px}
.svc-orbit .rgs-orb-tx strong{font-size: var(--fs-caption)}
.svc-orbit .rgs-orb-tx em{font-size: var(--fs-label)}
.svc-h1{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.6px;line-height:1.03;font-size:var(--fs-h2);color:var(--ink);margin:12px 0 14px}
.svc-h1 span{color:var(--accent)}
.svc-hero-lead{color:var(--ink-mid);font-size:var(--fs-body);max-width:50ch}
.svc-orbit{width:100%}
.svc-hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
@media(max-width:960px){.svc-hero-grid{grid-template-columns:1fr;gap:30px}
  .svc-hero-head{max-width:none}.rgs-orbit{margin-left:auto;margin-right:auto}}

/* service cards — grid, image on top. Compact: one screen, no endless scroll. */
.svc-sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc-scard{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:var(--transition)}
.svc-scard:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(10,30,60,.5)}
.svc-scard img{width:100%;height:132px;object-fit:cover;object-position:top center;display:block;border-bottom:1px solid var(--border)}
.svc-scard-b{padding:20px}
.svc-scard h3{font-size:var(--fs-body);font-weight:800;color:var(--ink);margin-bottom:6px}
.svc-scard p{color:var(--ink-mid);font-size: var(--fs-caption);line-height:1.6;margin-bottom:12px}
.svc-out{display:inline-block;font-size:var(--fs-label);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#2A7A50;background:#E9F4EC;border-radius:999px;padding:4px 10px}
@media(max-width:960px){.svc-sgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.svc-sgrid{grid-template-columns:1fr}}

/* filter tabs */
.svc-tabs{display:flex;justify-content:center;margin-top:26px}
.svc-tabs-in{display:inline-flex;gap:6px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px;flex-wrap:wrap;justify-content:center}
.svc-tab{font-size:var(--fs-caption);font-weight:700;padding:9px 18px;border-radius:999px;color:var(--ink-mid);border:0;background:none;cursor:pointer;font-family:inherit;transition:var(--transition)}
.svc-tab:hover{color:var(--ink)}
.svc-tab.is-on{background:var(--ink);color:#fff}

/* outcome buckets */
.svc-bucket{padding:38px 0;border-bottom:1px solid var(--border)}
.svc-bucket:last-of-type{border-bottom:0}
.svc-bhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.svc-bhead h2{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.5px;line-height:1.05;font-size:var(--fs-h3);color:var(--ink);margin-top:8px}
.svc-bhead h2 span{color:var(--accent)}
.svc-bhead p{color:var(--ink-mid);font-size: var(--fs-small);max-width:52ch;margin-top:8px}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc-card{border-radius:16px;border:1px solid var(--border);padding:22px;display:flex;flex-direction:column;min-height:172px;background:#fff;text-decoration:none;transition:var(--transition)}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 22px 42px -28px rgba(10,30,60,.5)}
.svc-card h3{font-size:var(--fs-body);font-weight:800;color:var(--ink);margin-bottom:6px}
.svc-card p{color:var(--ink-mid);font-size: var(--fs-caption);line-height:1.6}
.svc-card .svc-lnk{margin-top:auto;padding-top:12px;font-weight:800;font-size:var(--fs-caption);color:var(--accent)}
.svc-card--wide{grid-column:span 2;background:#EAF3FB}
.svc-card--mint{background:#E9F4EC}
.svc-card--cream{background:#FBF3E4}
.svc-card--blush{background:#FCEDEB}
.svc-card--dark{grid-column:span 2;background:var(--ink)}
.svc-card--dark h3{color:#fff}.svc-card--dark p{color:#B7C6DB}.svc-card--dark .svc-lnk{color:#7AAADC}
/* screenshots are full-page captures — crop to the hero, click to open full size */
.svc-media{grid-column:span 2;padding:0;overflow:hidden;border:1px solid var(--border);border-radius:16px;position:relative;display:block;max-height:250px}
.svc-media img{width:100%;height:250px;object-fit:cover;object-position:top center;display:block;transition:transform .3s ease}
.svc-media:hover img{transform:scale(1.03)}
.svc-media:after{content:"\2197 View full site";position:absolute;right:10px;bottom:10px;background:rgba(10,30,60,.82);color:#fff;font-size: var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:999px;opacity:0;transition:opacity .2s}
.svc-media:hover:after{opacity:1}
.svc-ph{grid-column:span 2;min-height:172px;border:1.5px dashed #BFD1E4;background:#EEF3F9;border-radius:16px;display:grid;place-items:center;color:#93A6BC;font-size: var(--fs-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:14px}

@media(max-width:960px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.svc-grid{grid-template-columns:1fr}
  .svc-card--wide,.svc-card--dark,.svc-media,.svc-ph{grid-column:span 1}}

/* ============================================================
   NO MONEY DOWN WEB DESIGN — page 1963. Mint/sage palette.
   ============================================================ */
.nmd-hero{ padding-bottom: 80px; background:linear-gradient(158deg,#E9F4EC 0%,#F4FAF6 55%,#E4F1EA 100%); }
.nmd-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(42,122,80,.14) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.nmd-hero .container{position:relative;z-index:1}
.nmd-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:42px;align-items:center}
.nmd-eyebrow{display:block;font-weight:800;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:#2A7A50;margin-bottom:13px}
.nmd-h1{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.03;color:var(--ink);margin-bottom:15px;text-transform:uppercase;letter-spacing:-.6px}
.nmd-h1 span{color:#2A7A50}
.nmd-lead{color:var(--ink-mid);font-size: var(--fs-body);max-width:46ch;margin-bottom:20px}
.nmd-pay{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.nmd-pay img{height:38px;width:auto;display:block}
.nmd-pay small{font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.nmd-btns{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:24px}
.nmd-chips{display:inline-flex;flex-wrap:wrap;gap:8px 16px;background:#fff;border:1px solid rgba(42,122,80,.18);border-radius:12px;padding:11px 16px}
.nmd-chip{display:flex;align-items:center;gap:7px;font-size: var(--fs-caption);font-weight:600;color:var(--ink-mid)}
.nmd-chip svg{width:15px;height:15px;color:#2A7A50;stroke:currentColor;stroke-width:2.4;fill:none;flex:0 0 auto}
.nmd-art{position:relative;min-height:320px}
.nmd-art img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.nmd-shot{position:absolute;background:#fff;border:1px solid rgba(42,122,80,.16);border-radius:14px;overflow:hidden;box-shadow:0 28px 56px -30px rgba(10,30,60,.45)}
.nmd-shot--a{top:0;left:0;right:16%;height:78%}
.nmd-shot--b{bottom:0;right:0;width:36%;height:52%}

/* trust bar — pops out of the hero edge */
.nmd-trust{position:relative;z-index:3;margin-top:-38px}
.nmd-trust-in{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 26px 54px -34px rgba(10,30,60,.45);display:grid;grid-template-columns:repeat(3,1fr);padding:20px 24px}
.nmd-trust-item{display:flex;align-items:center;justify-content:center;gap:11px}
.nmd-trust-item+.nmd-trust-item{border-left:1px solid var(--border)}
.nmd-trust-ic{width:32px;height:32px;border-radius:50%;background:#E9F4EC;color:#2A7A50;display:grid;place-items:center;flex:0 0 auto}
.nmd-trust-ic svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
.nmd-trust-item b{display:block;font-size: var(--fs-caption);line-height:1.25;color:var(--ink)}
.nmd-trust-item small{font-size:var(--fs-label);color:var(--ink-faint)}

/* how it works — numbered cards */
.nmd-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.nmd-step{background:#fff;border:1px solid var(--border);border-radius:14px;padding:24px 22px}
.nmd-step-n{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1;color:var(--cta);margin-bottom:12px}
.nmd-step h3{font-size: var(--fs-body);font-weight:800;color:var(--ink);margin-bottom:7px}
.nmd-step p{color:var(--ink-mid);font-size:var(--fs-small);line-height:1.6}

/* why — split */
.nmd-split{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.nmd-checks{list-style:none;margin-top:20px;display:grid;gap:11px}
.nmd-checks li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-body);color:var(--ink-mid)}
.nmd-checks svg{width:19px;height:19px;flex:0 0 auto;margin-top:2px;color:#2A7A50;stroke:currentColor;stroke-width:2;fill:none}
.nmd-split-media{border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:0 24px 50px -32px rgba(10,30,60,.45)}
.nmd-split-media img{width:100%;height:340px;object-fit:cover;object-position:top center;display:block}

/* what's included */
.nmd-inc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.nmd-inc-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px 22px;text-align:center}
.nmd-inc-ic{width:44px;height:44px;border-radius:12px;background:#E9F4EC;display:grid;place-items:center;margin:0 auto 14px;color:#2A7A50}
.nmd-inc-ic svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.8;fill:none}
.nmd-inc-card h3{font-size:var(--fs-body);font-weight:800;margin-bottom:7px;color:var(--ink)}
.nmd-inc-card p{color:var(--ink-mid);font-size: var(--fs-caption);line-height:1.6}

/* real results */
.nmd-work{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.nmd-work-card{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:var(--transition)}
.nmd-work-card:hover{transform:translateY(-4px);box-shadow:0 24px 44px -30px rgba(10,30,60,.5)}
.nmd-work-card img{width:100%;height:150px;object-fit:cover;object-position:top center;display:block;border-bottom:1px solid var(--border)}
.nmd-work-cap{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.nmd-work-cap b{font-size: var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.nmd-work-tag{font-size:var(--fs-label);font-weight:700;color:#2A7A50;background:#E9F4EC;border-radius:999px;padding:3px 9px;white-space:nowrap}
.nmd-center{text-align:center;margin-top:26px}
.nmd-center a{color:#2A7A50;font-weight:800;font-size:var(--fs-small)}

/* reviews */
.nmd-rev{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.nmd-rev-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px}
.nmd-rev-stars{color:#F5B500;letter-spacing:2px;font-size:var(--fs-small);margin-bottom:10px}
.nmd-rev-card p{color:var(--ink-mid);font-size: var(--fs-small);line-height:1.65;margin-bottom:16px}
.nmd-rev-who{display:flex;align-items:center;gap:11px;border-top:1px solid var(--border);padding-top:14px}
.nmd-rev-av{width:38px;height:38px;border-radius:50%;background:#E9F4EC;color:#2A7A50;display:grid;place-items:center;font-weight:800;font-size:var(--fs-caption);flex:0 0 auto}
.nmd-rev-who b{display:block;font-size: var(--fs-caption);color:var(--ink)}
.nmd-rev-who small{color:var(--ink-faint);font-size: var(--fs-label)}

/* faq */
.nmd-faq{max-width:820px;margin:32px auto 0;display:grid;gap:10px}
.nmd-faq-item{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.nmd-faq-item summary{list-style:none;cursor:pointer;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-weight:700;font-size:var(--fs-body);color:var(--ink)}
.nmd-faq-item summary::-webkit-details-marker{display:none}
.nmd-faq-item summary:after{content:"+";color:#2A7A50;font-size:var(--fs-h4);font-weight:700;line-height:1;flex:0 0 auto}
.nmd-faq-item[open] summary:after{content:"\2013"}
.nmd-faq-item p{padding:0 20px 18px;color:var(--ink-mid);font-size: var(--fs-small);line-height:1.68}

/* final CTA — navy panel, rocket through the top edge */
.nmd-cta-sec{padding:78px 0 92px;background:var(--white)}
.nmd-cta{position:relative;overflow:hidden;background:linear-gradient(135deg,#0A1E3C,#16355C);border-radius:22px;padding:44px 44px 48px;text-align:center;margin-top:0}
.nmd-cta:before{content:"";position:absolute;inset:0;border-radius:22px;background-image:radial-gradient(rgba(122,170,220,.14) 1px,transparent 1px);background-size:22px 22px}
.nmd-cta>*{position:relative;z-index:1}
/* rocket sits inside the navy panel, above the copy */
.nmd-cta-rocket{position:relative;z-index:2;display:block;width:auto;height:96px;margin:0 auto 18px}
.nmd-cta small{display:block;color:#7AAADC;font-weight:800;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase}
.nmd-cta h2{font-family:var(--font-display);color:#fff;font-size:var(--fs-h2);line-height:1.05;margin:10px 0 12px}
.nmd-cta h2 span{color:var(--cta)}
.nmd-cta p{color:rgba(255,255,255,.72);font-size:var(--fs-body);max-width:52ch;margin:0 auto 24px}
.nmd-cta-fine{color:rgba(255,255,255,.5);font-size:var(--fs-caption);margin-top:12px}

@media(max-width:960px){.nmd-grid,.nmd-split{grid-template-columns:1fr;gap:32px}
  .nmd-inc,.nmd-work,.nmd-rev{grid-template-columns:1fr 1fr}
  .nmd-steps{grid-template-columns:1fr}
  .nmd-trust-in{grid-template-columns:1fr}
  .nmd-trust-item+.nmd-trust-item{border-left:0;border-top:1px solid var(--border);padding-top:13px;margin-top:13px}}
@media(max-width:560px){.nmd-inc,.nmd-work,.nmd-rev{grid-template-columns:1fr}}

/* ── Brand showcase bento: one client, every asset, one screen ──
   Website is a full-height column (it's the longest asset), cards stack
   beside it, the mark sits in a small black box. Hover scrolls the site. */
/* fixed rows: top bar + two cards. The site column spans all three, so its
   height always equals top bar + both cards + gaps. */
.rwd-bento-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2.6fr);grid-template-rows:126px auto auto;gap:14px}
.bc-tile{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#fff;margin:0}
.bc-tile img{width:100%;height:100%;object-fit:cover;display:block}
.bc-tile figcaption{position:absolute;left:12px;bottom:12px;background:rgba(10,30,60,.82);color:#fff;font-size: var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px)}
/* the mark — small black box */
.bc-mark{grid-column:1;grid-row:1;background:#0D0D0D;border-color:#0D0D0D;display:grid;place-items:center}
.bc-mark img{width:auto;height:88px;object-fit:contain}
/* palette + line */
.bc-pal{grid-column:2;grid-row:1;background:#0D0D0D;border-color:#0D0D0D;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:20px}
.bc-pal-row{display:flex;gap:8px}
.bc-pal-row i{width:34px;height:34px;border-radius:9px;display:block}
.bc-pal b{color:#fff;font-size: var(--fs-caption);font-weight:800;letter-spacing:.04em}
.bc-pal small{color:rgba(255,255,255,.5);font-size:var(--fs-label);display:block;margin-top:2px}
/* cards stack, full width of the left two columns */
/* cards keep their true 1672:941 ratio — no cropping */
.bc-front,.bc-back{grid-column:1/3;aspect-ratio:1672/941}
.bc-front{grid-row:2}
.bc-back{grid-row:3}
/* the website — full height, scrolls on hover */
/* the site: cropped thumbnail of the hero, click opens the full capture */
/* the capture is 2560px tall — pin it absolutely so it can't drive the row
   heights. The left column decides the height; this column just fills it. */
.bc-site{grid-column:3;grid-row:1/4;background:#0D0D0D;border-color:#0D0D0D;display:block;position:relative;min-height:0}
.bc-site img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .35s ease}
.bc-site:hover img{transform:scale(1.03)}
.bc-site figcaption{left:auto;right:12px}
.bc-site:after{content:"\2197 Open full";position:absolute;left:12px;bottom:12px;background:#FFC800;color:#0D0D0D;font-size: var(--fs-label);font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;opacity:0;transition:opacity .2s}
.bc-site:hover:after{opacity:1}
.bc-mark img{height:74px}
@media(max-width:900px){.rwd-bento-case{grid-template-columns:1fr 1fr;grid-template-rows:112px auto auto 300px}
  .bc-mark{grid-column:1;grid-row:1}.bc-pal{grid-column:2;grid-row:1}
  .bc-front{grid-column:1/3;grid-row:2}.bc-back{grid-column:1/3;grid-row:3}
  .bc-site{grid-column:1/3;grid-row:4}.bc-site:hover img{transform:none}}

/* [rwd_pagespeed] — Google PSI scores drawn in CSS (no screenshots).
   Prefix rwd-psb: rwd-ps is the blog sidebar; sharing it broke both. */
.rwd-psb{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.rwd-psb-link{display:inline-block;margin-top:18px;font-weight:800;font-size:var(--fs-small);color:var(--accent)}
.rwd-psb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rwd-psb-item{text-align:center}
.rwd-psb-ring{width:104px;height:104px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;
  background:conic-gradient(var(--ring) calc(var(--pct)*1%), var(--ring-bg) 0)}
.rwd-psb-ring b{width:82px;height:82px;border-radius:50%;background:#fff;display:grid;place-items:center;
  font-family:var(--font-display);font-size:var(--fs-h3);color:var(--ring-tx);line-height:1}
.rwd-psb-ring.is-good{--ring:#0CCE6B;--ring-bg:#E6F9EF;--ring-tx:#0A8F4A}
.rwd-psb-ring.is-ok{--ring:#FFA400;--ring-bg:#FFF4E0;--ring-tx:#B37200}
.rwd-psb-ring.is-bad{--ring:#FF4E42;--ring-bg:#FFE9E7;--ring-tx:#C62D22}
.rwd-psb-item span{display:block;font-size: var(--fs-caption);font-weight:700;color:var(--ink-mid)}
.rwd-psb-note{margin-top:22px;font-size: var(--fs-caption);color:var(--ink-faint);text-align:center}
.rwd-psb-note b{color:var(--ink)}
@media(max-width:900px){.rwd-psb{grid-template-columns:1fr;gap:30px}
  .rwd-psb-grid{grid-template-columns:1fr 1fr;gap:22px}}

/* [rwd_brand_cost] — what a weak brand costs you */
.rwd-cost-head{max-width:62ch}
.rwd-cost-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
.rwd-cost-card{border:1px solid var(--border);border-radius:18px;padding:30px 26px;background:#EAF3FB}
.rwd-cost-card:nth-child(2){background:#FCEDEB}
.rwd-cost-card:nth-child(3){background:#FBF3E4}
.rwd-cost-ic{width:46px;height:46px;border-radius:13px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--accent)}
.rwd-cost-card:nth-child(2) .rwd-cost-ic{color:#D2563F}
.rwd-cost-card:nth-child(3) .rwd-cost-ic{color:#C98A2E}
.rwd-cost-ic svg{width:22px;height:22px}
.rwd-cost-card h3{font-size: var(--fs-body);font-weight:800;color:var(--ink);margin-bottom:9px;line-height:1.3}
.rwd-cost-card p{color:var(--ink-mid);font-size: var(--fs-small);line-height:1.65}

/* [rwd_brand_process] — three steps */
.rwd-proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.rwd-proc-step{border-top:3px solid var(--cta);padding-top:20px}
.rwd-proc-k{font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.rwd-proc-step h3{font-size:var(--fs-h4);font-weight:800;color:var(--ink);margin:10px 0 8px;letter-spacing:-.3px}
.rwd-proc-step p{color:var(--ink-mid);font-size: var(--fs-small);line-height:1.65}
@media(max-width:900px){.rwd-cost-grid,.rwd-proc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rwd-cost-grid,.rwd-proc-grid{grid-template-columns:1fr}}

/* [rwd_brand_hero] — dark full-bleed branding hero (accent = rocket blue) */
.rwd-bh{position:relative;overflow:hidden;background:linear-gradient(140deg,#0A1E3C 0%,#122E52 55%,#0A1E3C 100%);padding:96px 0 104px}
.rwd-bh-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(122,170,220,.13) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.rwd-bh .container{position:relative;z-index:1}
.rwd-bh-grid{display:block;max-width:640px}
/* full-bleed background placeholder — swap for a real photo via .rwd-bh{background-image:...} */
.rwd-bh-bgph{position:absolute;inset:20px;border:1px dashed rgba(255,255,255,.22);border-radius:16px;pointer-events:none;display:flex;align-items:flex-end;justify-content:flex-end;padding:18px 22px}
.rwd-bh-bgph span{color:rgba(255,255,255,.32);font-size:var(--fs-label);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.rwd-bh-eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.rwd-bh-h1{font-family:var(--font-display);font-size:var(--fs-h1);line-height:1.02;color:#fff;margin:0 0 20px}
.rwd-bh-accent{color:var(--accent)}
.rwd-bh-lead{color:rgba(255,255,255,.74);font-size: var(--fs-body);line-height:1.7;max-width:52ch;margin:0 0 30px}
.rwd-bh-trust{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-bottom:34px}
.rwd-bh-item{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:var(--fs-small)}
.rwd-bh-item svg{width:22px;height:22px;color:var(--accent);flex:0 0 auto}
.rwd-bh-item+.rwd-bh-item{padding-left:26px;border-left:1px solid rgba(255,255,255,.16)}
.rwd-bh-btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font-weight:800;font-size:var(--fs-body);padding:17px 30px;border-radius:12px;box-shadow:0 14px 34px rgba(74,142,194,.38);transition:var(--transition)}
.rwd-bh-btn:hover{background:var(--accent-bright);color:#fff;transform:translateY(-2px)}
/* .rwd-page a{color:var(--accent)} outranks the class above — pin the label white in every state */
.rwd-page a.rwd-bh-btn,.rwd-page a.rwd-bh-btn:link,.rwd-page a.rwd-bh-btn:visited,
.rwd-page a.rwd-bh-btn:hover,.rwd-page a.rwd-bh-btn:focus,.rwd-page a.rwd-bh-btn:active{color:#fff}
@media(max-width:900px){.rwd-bh{padding:64px 0 72px}
  .rwd-bh-item+.rwd-bh-item{padding-left:0;border-left:0}}

/* [rwd_brand_stats] — sourced research: donut + bars */
.rwd-stats-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:50px;align-items:center}
.rwd-stat-hero{text-align:center}
.rwd-donut{width:206px;height:206px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;
  background:conic-gradient(var(--cta) calc(var(--pct)*1%), var(--base-tint,#EEF3F8) 0)}
.rwd-donut:after{content:"";position:absolute;width:0;height:0}
.rwd-donut b{width:152px;height:152px;border-radius:50%;background:var(--white);display:grid;place-items:center;
  font-family:var(--font-display);font-size:var(--fs-h1);color:var(--ink);line-height:1;box-shadow:inset 0 0 0 1px var(--border)}
.rwd-donut b i{font-style:normal;font-size:var(--fs-h4);color:var(--cta)}
.rwd-stat-hero-lbl{font-size: var(--fs-small);color:var(--ink-mid);line-height:1.65;max-width:34ch;margin:0 auto}
.rwd-stat-hero-lbl b{color:var(--ink)}
.rwd-stat-src{display:block;font-size:var(--fs-label);color:var(--ink-faint);margin-top:12px;letter-spacing:.04em}
.rwd-stat-bars{display:grid;gap:22px}
.rwd-stat-row{display:grid;grid-template-columns:74px 1fr;grid-template-areas:"num track" "num lbl";column-gap:16px;row-gap:7px;align-items:center}
.rwd-stat-num{grid-area:num;font-family:var(--font-display);font-size:var(--fs-h2);color:var(--ink);line-height:1}
.rwd-stat-track{grid-area:track;height:9px;border-radius:999px;background:var(--base-tint,#EEF3F8);overflow:hidden}
.rwd-stat-track span{display:block;height:100%;border-radius:999px;background:var(--cta)}
.rwd-stat-lbl{grid-area:lbl;margin:0;font-size: var(--fs-caption);color:var(--ink-mid);line-height:1.55}
.rwd-stats-foot{font-size: var(--fs-label);color:var(--ink-faint);margin-top:30px;text-align:center}
@media(max-width:900px){.rwd-stats-grid{grid-template-columns:1fr;gap:34px}}

/* [rwd_brand_guide] — the deliverable, presented as the brand sheet itself */
.rwd-bg-sheet{background:var(--white);border:1px solid var(--border);border-radius:18px;box-shadow:0 20px 50px rgba(15,30,56,.09);overflow:hidden}
.rwd-bg-head{background:#F6F1EB;padding:16px 30px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.rwd-bg-head span{font-size:var(--fs-label);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.rwd-bg-head b{font-size:var(--fs-caption);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.rwd-bg-row{padding:34px 30px;border-bottom:1px solid var(--border)}
.rwd-bg-row:last-of-type{border-bottom:0}
.rwd-bg-row--two{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.rwd-bg-label{font-size: var(--fs-label);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);text-align:center;margin-bottom:18px}
.rwd-bg-main{display:flex;align-items:center;justify-content:center;min-height:200px}
.rwd-bg-main img{max-width:340px;max-height:190px;width:auto;height:auto}
.rwd-bg-plate{display:flex;align-items:center;justify-content:center;min-height:130px}
.rwd-bg-plate img{max-width:230px;max-height:120px;width:auto;height:auto}
.rwd-bg-plate--fav img{max-width:56px;max-height:56px}
.rwd-bg-cap{font-size: var(--fs-caption);color:var(--ink-faint);line-height:1.6;text-align:center;max-width:52ch;margin:16px auto 0}
.rwd-bg-els{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:end}
.rwd-bg-el{margin:0;text-align:center}
.rwd-bg-el img{max-height:100px;max-width:100%;width:auto;object-fit:contain}
.rwd-bg-el figcaption{font-size:var(--fs-label);color:var(--ink-faint);margin-top:10px}
.rwd-bg-pal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rwd-bg-sw{text-align:center}
.rwd-bg-sw span{display:block;width:100%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(15,30,56,.14);margin-bottom:9px}
.rwd-bg-sw b{display:block;font-size: var(--fs-label);color:var(--ink);letter-spacing:.04em}
.rwd-bg-sw small{display:block;font-size:var(--fs-label);color:var(--ink-faint);line-height:1.4;margin-top:3px}
.rwd-bg-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;padding:20px 30px;background:var(--base-tint,#F4F7FA);border-top:1px solid var(--border)}
.rwd-bg-foot span{font-size:var(--fs-caption);color:var(--ink-mid);font-weight:600}
@media(max-width:781px){.rwd-bg-row--two{grid-template-columns:1fr;gap:26px}.rwd-bg-row{padding:26px 18px}.rwd-bg-pal{grid-template-columns:repeat(2,1fr)}}

/* [rwd_brand_case] — single branding story: before/after + narrative + applied brand */
.rwd-case-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:start}
.rwd-case-ba{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rwd-case-ba figure{position:relative;margin:0;background:var(--white);border:1px solid var(--border);border-radius:14px;padding:34px 20px;display:flex;align-items:center;justify-content:center;min-height:230px}
.rwd-case-ba img{max-width:100%;max-height:150px;width:auto;object-fit:contain}
.rwd-case-tag{position:absolute;top:10px;left:10px;font-size:var(--fs-label);font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.rwd-case-tag--before{background:var(--base-tint,#EEF3F8);color:var(--ink-faint)}
.rwd-case-tag--after{background:var(--cta);color:#fff}
.rwd-case-story p{color:var(--ink-mid);line-height:1.75;margin:0 0 13px;max-width:60ch}
.rwd-case-story p b{color:var(--ink)}
.rwd-case-swatches{display:flex;gap:8px;margin:18px 0 16px}
.rwd-case-sw{width:54px;height:54px;border-radius:10px;border:1px solid rgba(15,30,56,.12);display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px}
.rwd-case-sw small{font-size:8.5px;color:rgba(255,255,255,.85);letter-spacing:.02em}
.rwd-case-sw:nth-child(n+3){border-color:rgba(15,30,56,.16)}
.rwd-case-sw:nth-child(n+3) small{color:rgba(15,30,56,.6)}
.rwd-case-person{border-top:1px solid var(--border);padding-top:14px;display:flex;align-items:center;gap:12px}
.rwd-case-person img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.rwd-case-person b{display:block;font-size:var(--fs-small);color:var(--ink)}
.rwd-case-person small{color:var(--ink-faint);font-size: var(--fs-caption)}
/* "before" panel holds a full-page screengrab — show only its header, where the old logo lives */
.rwd-case-ba--shot{padding:0!important;overflow:hidden;align-items:flex-start!important}
.rwd-case-ba--shot img{max-height:none!important;width:100%;height:170px;object-fit:cover;object-position:top center}
.rwd-case-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
/* composite before/after photo — crop to its left (before) half */
.rwd-case-tile--left img{object-position:left center}
.rwd-case-tile{margin:0}
.rwd-case-tile img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 62%;border-radius:12px;border:1px solid var(--border);background:var(--white)}
.rwd-case-tile figcaption{font-size:var(--fs-caption);color:var(--ink-faint);margin-top:8px}
@media(max-width:900px){.rwd-case-top{grid-template-columns:1fr;gap:26px}.rwd-case-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rwd-case-grid{grid-template-columns:1fr}}

/* [rwd_brand_grid] — client logo tiles */
.rwd-brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rwd-brand-tile{margin:0}
.rwd-brand-plate{display:flex;align-items:center;justify-content:center;height:150px;padding:26px;background:var(--base-tint,#F4F7FA);border:1px solid var(--border);border-radius:14px;transition:transform .2s ease,box-shadow .2s ease}
.rwd-brand-tile:hover .rwd-brand-plate{transform:translateY(-3px);box-shadow:0 14px 32px rgba(15,30,56,.12)}
.rwd-brand-plate img{max-width:100%;max-height:88px;width:auto;height:auto;object-fit:contain}
.rwd-brand-tile figcaption{padding:12px 2px 0}
.rwd-brand-tile figcaption b{display:block;font-size:var(--fs-small);color:var(--ink);line-height:1.3}
.rwd-brand-tile figcaption small{display:block;font-size:var(--fs-caption);color:var(--ink-faint);margin-top:2px}
@media(max-width:900px){.rwd-brand-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rwd-brand-grid{grid-template-columns:1fr}}

/* [rwd_care_plans] — website care ladder */
.rwd-plans-sub,.rwd-rgs-sub{max-width:60ch;margin:14px auto 0;color:var(--ink-mid);line-height:1.7;font-size:var(--fs-body)}
.rwd-rgs-sub{color:rgba(255,255,255,.7)}
.rwd-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.rwd-plan{position:relative;background:var(--white);border:1px solid var(--border);border-radius:16px;padding:28px 26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.rwd-plan--best{border-color:var(--cta);box-shadow:0 16px 40px rgba(232,68,10,.14)}
.rwd-plan-flag{position:absolute;top:-11px;left:26px;background:var(--cta);color:#fff;font-size:var(--fs-label);font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.rwd-plan-name{font-size:var(--fs-h5);color:var(--ink);margin:0}
.rwd-plan-tag{font-size:var(--fs-caption);color:var(--ink-faint);margin:5px 0 0;line-height:1.5}
.rwd-plan-price{font-family:var(--font-display);font-size:var(--fs-h1);color:var(--ink);line-height:1;margin:18px 0 4px}
.rwd-plan-cur{font-size:var(--fs-h3);vertical-align:super;margin-right:2px}
.rwd-plan-price small{font-size:var(--fs-small);font-weight:400;color:var(--ink-faint);font-family:inherit}
.rwd-plan-list{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:9px;flex:1}
.rwd-plan-list li{display:flex;gap:9px;font-size:var(--fs-small);color:var(--ink-mid);line-height:1.5}
.rwd-plan-tick{color:var(--cta);font-weight:900;flex:0 0 auto}
.rwd-plan-btn{width:100%;text-align:center}
.rwd-plans-note{text-align:center;font-size: var(--fs-caption);color:var(--ink-faint);margin-top:26px}
/* [rwd_rgs_tiers] — consult-only growth systems, visually separate from care plans */
.rwd-rgs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rwd-rgs-tier{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:26px 24px}
.rwd-rgs-name{font-size: var(--fs-body);color:#fff;margin:0}
.rwd-rgs-price{margin:14px 0 12px;color:#fff}
.rwd-rgs-price small{display:block;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:4px}
.rwd-rgs-price b{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1}
.rwd-rgs-price span{font-size:var(--fs-caption);color:rgba(255,255,255,.6)}
.rwd-rgs-pos{color:#fff;font-size:var(--fs-small);font-weight:600;margin:0 0 10px}
.rwd-rgs-inc{color:rgba(255,255,255,.62);font-size:var(--fs-caption);line-height:1.65;margin:0}
.rwd-rgs-foot{text-align:center;color:rgba(255,255,255,.6);font-size: var(--fs-caption);margin-top:30px}
@media(max-width:900px){.rwd-plan-grid,.rwd-rgs-grid{grid-template-columns:1fr}}

/* [rwd_work_strip] — client sites shown in browser frames (full-page shots cropped to the top) */
.rwd-work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
/* reuses .wd-browser-frame from the web-design page; only the crop + hover differ */
.rwd-work-card{margin:0;transition:transform .2s ease,box-shadow .2s ease}
.rwd-work-card:hover{transform:translateY(-4px)}
.rwd-work-card .wd-browser-body img{display:block;width:100%;aspect-ratio:4/3.2;object-fit:cover;object-position:top center}
.rwd-work-foot{text-align:center;margin-top:30px}
.rwd-work-foot a{font-size:var(--fs-small);font-weight:700;color:var(--ink)}
@media(max-width:1000px){.rwd-work-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rwd-work-grid{grid-template-columns:1fr}}

/* qs2 questionnaire: primary action + current step use the CTA orange (was navy/white) */
.qs2-btn-next,.qs2-btn-submit{background:var(--cta)}
.qs2-btn-next:hover,.qs2-btn-submit:hover{background:var(--cta)}
.qs2-dot--active{background:var(--cta);border-color:var(--cta);color:#fff}
.qs2-progress-fill{background:var(--cta)}

/* ── Small-title font sweep 2026-08-24 ──
   Archivo Black only reads well at 20px+; every TEXT title at 18px and below
   switches to the blog-title treatment (body sans 700, tight tracking, no caps).
   Number/stat classes stay in display on purpose. 20-22px titles kept. */
.cs-srx-system-label,
.cs-card-name,.cs-spotlight-name,.lp-industry-name,.rwd-mm-h,
.ai-tool-name,.cs-srx-decision-title,.lp-include-title,.rd-sign-title,.sd24 .risk-t,.wd-industry-name,
.rgs-row-name,.rgs-row-metric,
.ai-explainer-title,.ai-process-title,.crm-platform-card-name,.cs-problem-client,.cs-srx-content-title,
.gads-campaign-title,.gbp-service-title,.lp-city--primary .lp-city-name,.rd-process-title,
.rgs-audience-title,.rgs-cream-result,.sd24 .faq-q,.sd24 .sdpf-title,.sd24 .step-t,.sd24 .uc-t,.wd-process-title{
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:-.3px;
  text-transform:none;
}

/* questionnaire choice tiles: icon was centered while title/sub sat left — center everything */
.qs2-choice-card{text-align:center}
/* same fix for the web-design industry cards */
.wd-industry{text-align:center}

/* .qblock computed position:static on the case-studies archive, so its absolute .qblock-dots
   overlay escaped and painted dots across the whole page (over the problem cards). Re-pin it. */
.qblock{position:relative;overflow:hidden}

/* Page-wide dot texture on the case-studies archive — as a real BACKGROUND.
   Painted on the sections themselves so it always sits behind cards, never over them. */
.post-type-archive-case_study .section--tint,
.post-type-archive-case_study .section--white,
.post-type-archive-case_study .hero{
  background-image:radial-gradient(rgba(74,142,194,0.10) 1px, transparent 1px);
  background-size:36px 36px;
}

/* homepage SpecRx case section: taller photo placeholder so the right column matches the text column height */
.hp-case-photo .hp-img-ph{min-height:340px}


/* ══════════════════════════════════════
   BRAND MARKS - a mark shown on the grounds it was drawn for
   ══════════════════════════════════════ */
.rwd-marks-sec{margin:56px 0}
.rwd-marks-head{max-width:60ch;margin:0 0 30px}
.rwd-marks-h2{font-family:var(--font-body);font-size:var(--fs-h3);font-weight:700;
  color:var(--ink);line-height:1.2;margin:8px 0 12px}
.rwd-marks-head p{color:var(--ink-mid);font-size: var(--fs-body);line-height:1.7;margin:0}
.rwd-marks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rwd-mark{margin:0;border-radius:18px;overflow:hidden;background:var(--mark-bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:38px 26px 0;aspect-ratio:4/5}
/* never scaled past the artwork's own 658x800, never blended - the colourway
   is the point */
.rwd-mark img{width:auto;max-width:min(78%,329px);max-height:64%;object-fit:contain;display:block}
.rwd-mark figcaption{margin-top:auto;width:100%;padding:14px 0 16px;text-align:center;
  font-family:var(--font-body);font-size: var(--fs-caption);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;opacity:.82}
/* the teal-on-gold plate is light enough to need dark caption ink */
.rwd-mark[style*=#B79E90] figcaption{color:#12373C;opacity:.9}
.rwd-marks-swatches{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.rwd-marks-swatches span{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-body);font-size:var(--fs-caption);color:var(--ink-mid)}
.rwd-marks-swatches span::before{content:;width:20px;height:20px;border-radius:6px;
  background:var(--sw);border:1px solid rgba(10,30,60,.14)}
.rwd-marks-swatches b{color:var(--ink);font-weight:700}
@media (max-width:820px){
  .rwd-marks{grid-template-columns:1fr;gap:16px}
  .rwd-mark{aspect-ratio:16/10;padding:28px 22px 0}
}


/* case-study gallery: logo plates, shown whole and never upscaled */
.css-gallery-item img{width:100%;height:100%;object-fit:contain;background:#fff;display:block}
.css-lightbox-img{object-fit:contain}

/* ══════════════════════════════════════
   BRAND KIT - every asset on its own ground, with what it is for
   ══════════════════════════════════════ */
.rwd-kit-group{margin:0 0 40px}
.rwd-kit-grouph{font-family:var(--font-body);font-size:var(--fs-caption);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin:0 0 4px}
.rwd-kit-groupsub{font-family:var(--font-body);font-size: var(--fs-small);color:var(--ink-mid);margin:0 0 16px}
.rwd-kit-grid{display:grid;gap:20px}
/* one plate shape per artwork shape, so nothing floats in dead space */
.rwd-kit-grid--stack{grid-template-columns:repeat(3,1fr)}
.rwd-kit-grid--stack .rwd-kit-plate{aspect-ratio:2/1}
.rwd-kit-grid--stack .rwd-kit-plate img{max-height:82%}
.rwd-kit-grid--wide{grid-template-columns:repeat(2,1fr)}
/* three landscape lockups share one line instead of wrapping 2+1 */
.rwd-kit-grid--wide:has(.rwd-kit-card:nth-child(3)){grid-template-columns:repeat(3,1fr)}

.rwd-kit-grid--wide .rwd-kit-plate{aspect-ratio:21/6;padding:22px 34px}
.rwd-kit-grid--mark{grid-template-columns:repeat(5,1fr)}
.rwd-kit-grid--mark .rwd-kit-plate{aspect-ratio:1/1}
.rwd-kit-card{margin:0;border-radius:18px;overflow:hidden;background:#fff;
  border:1px solid #E4EBF3;display:flex;flex-direction:column}
.rwd-kit-plate{background:var(--kit-bg);display:flex;
  align-items:center;justify-content:center;padding:26px}
/* width:auto + a max-width of the file's own pixel width: it can shrink, never grow */
.rwd-kit-plate img{width:auto;height:auto;max-width:min(100%,var(--nat,100%));max-height:100%;object-fit:contain;display:block}
.rwd-kit-card figcaption{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;
  font-family:var(--font-body)}
.rwd-kit-card figcaption b{font-size:var(--fs-body);font-weight:700;color:var(--ink);line-height:1.3}
.rwd-kit-uses{font-size: var(--fs-caption);line-height:1.55;color:var(--ink-mid)}
.rwd-kit-uses i{display:block;font-style:normal;font-size: var(--fs-label);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.rwd-kit-hex{margin-top:auto;font-family:var(--font-mono,ui-monospace,monospace);
  font-size: var(--fs-label);letter-spacing:.08em;color:var(--ink-faint)}
.rwd-kit-card.is-light .rwd-kit-plate{box-shadow:inset 0 0 0 1px rgba(10,30,60,.07)}
@media (max-width:1000px){
  .rwd-kit-grid--stack,.rwd-kit-grid--mark{grid-template-columns:repeat(2,1fr)}
  .rwd-kit-grid--wide{grid-template-columns:1fr}
}
@media (max-width:640px){.rwd-kit-grid{grid-template-columns:1fr!important}}

/* ══════════════════════════════════════
   PALETTE - the grounds the kit is built for
   ══════════════════════════════════════ */
.rwd-pal{margin:12px 0 0;padding:28px 30px;border:1px solid #E4EBF3;border-radius:18px;background:#fff}
.rwd-pal .rwd-kit-grouph{margin-bottom:4px}
.rwd-pal .rwd-kit-groupsub{margin-bottom:22px}
.rwd-pal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:18px}
.rwd-pal-item{display:flex;flex-direction:column;gap:12px}
.rwd-pal-chip{height:104px;border-radius:16px;background:var(--sw);
  box-shadow:inset 0 0 0 1px rgba(10,30,60,.10),0 10px 24px -18px rgba(10,30,60,.55)}
.rwd-pal-meta{display:flex;flex-direction:column;gap:3px;font-family:var(--font-body)}
.rwd-pal-meta b{font-size: var(--fs-small);font-weight:700;color:var(--ink);line-height:1.25}
.rwd-pal-hex{font-family:var(--font-mono,ui-monospace,monospace);font-size:var(--fs-caption);letter-spacing:.06em;
  color:var(--ink-mid)}
.rwd-pal-use{font-size: var(--fs-label);color:var(--ink-faint)}
@media (max-width:520px){.rwd-pal{padding:22px 20px}.rwd-pal-chip{height:84px}}

/* ══════════════════════════════════════
   CASE STUDY PLATE - heading on navy, copy on tint beside it
   ══════════════════════════════════════ */
.css-plate{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:0;
  border:1px solid #E4EBF3;border-radius:18px;overflow:hidden}
.css-plate-head{background:var(--ink);padding:34px 32px;display:flex;flex-direction:column;
  justify-content:space-between;gap:30px}
.css-plate-head .eyebrow{color:#8FC4E8;--page-accent:#8FC4E8}
.css-plate-h2{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:900;
  text-transform:uppercase;color:#fff;line-height:1.06;letter-spacing:-.4px;margin:10px 0 0}
.css-plate-tag{font-family:var(--font-body);font-size:var(--fs-label);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.48);margin:0}
.css-plate-body{background:#F7FAFD;padding:34px 36px;display:flex;flex-direction:column;justify-content:center}
.css-plate-body p{font-size: var(--fs-body);color:var(--ink-mid);line-height:1.8;margin:0 0 16px;max-width:62ch}
.css-plate-body p:last-child{margin-bottom:0}
@media (max-width:860px){
  .css-plate{grid-template-columns:1fr}
  .css-plate-head{gap:18px;padding:26px 24px}
  .css-plate-body{padding:26px 24px}
}

/* the two plates are one story, so they stack tight and the second mirrors */
.css-story{padding-top:56px;padding-bottom:56px}
.css-plates{display:flex;flex-direction:column;gap:18px}
.css-plate--flip{grid-template-columns:1fr minmax(0,320px)}
.css-plate--flip .css-plate-head{order:2}
.css-plate--flip .css-plate-body{order:1}
.css-plate--flip .css-plate-body p{margin-left:auto}
@media (max-width:860px){
  .css-plate--flip{grid-template-columns:1fr}
  .css-plate--flip .css-plate-head{order:0}
  .css-plate--flip .css-plate-body{order:1}
  .css-plate--flip .css-plate-body p{margin-left:0}
}

/* a matched pair, not a side panel: the navy head caps each card, copy sits
   under it, both columns the same height */
.css-plates{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.css-plate{grid-template-columns:1fr;display:grid;grid-template-rows:auto 1fr}
.css-plate-head{padding:26px 28px 24px;gap:14px;flex-direction:column;justify-content:flex-start}
.css-plate-h2{font-size:var(--fs-h3);margin:10px 0 0}
.css-plate-tag{margin-top:2px}
.css-plate-body{padding:28px;justify-content:flex-start}
.css-plate-body p{font-size:var(--fs-body);max-width:none}
.css-plate--flip{grid-template-columns:1fr}
.css-plate--flip .css-plate-head{order:0}
.css-plate--flip .css-plate-body p{margin-left:0}
@media (max-width:860px){.css-plates{grid-template-columns:1fr}}

/* the kit already sits inside a padded section, so its own top margin was
   stacking on top of the hero's bottom padding */
.section > .container > .rwd-marks-sec{margin:0}
.section:has(> .container > .rwd-marks-sec){padding-top:52px;padding-bottom:52px}

/* ══════════════════════════════════════
   CASE STUDY STORY - vertical label rail, heading in the body face
   ══════════════════════════════════════ */
.css-story-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px}
.css-story-item{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start}
.css-rail{writing-mode:vertical-rl;transform:rotate(180deg);margin:0;align-self:stretch;
  font-family:var(--font-body);font-size: var(--fs-label);font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);
  border-right:1px solid var(--border);padding:0 14px 0 0}
.css-story-h2{font-family:var(--font-body);font-size:var(--fs-h3);font-weight:700;
  line-height:1.24;letter-spacing:-.01em;color:var(--ink);margin:0 0 18px;max-width:22ch;
  text-transform:none;text-wrap:balance}
.css-story-h2 em{font-style:normal}
.css-story-body p{font-size: var(--fs-body);color:var(--ink-mid);line-height:1.8;margin:0 0 14px;max-width:62ch}
.css-story-body p:last-child{margin-bottom:0}
@media (max-width:900px){
  .css-story-grid{grid-template-columns:1fr;gap:34px}
  .css-rail{writing-mode:horizontal-tb;transform:none;border-right:0;
    border-bottom:1px solid var(--border);padding:0 0 9px}
  .css-story-item{grid-template-columns:1fr;gap:14px}
}

/* the answer sits on navy so the pair reads as question then resolution */
.css-story-grid{align-items:stretch}
.css-story-item--navy{background:var(--ink);border-radius:18px;padding:30px 32px;
  box-shadow:0 26px 54px -34px rgba(10,30,60,.6)}
.css-story-item--navy .css-rail{color:#8FC4E8;border-right-color:rgba(255,255,255,.18)}
.css-story-item--navy .css-story-h2{color:#fff}
.css-story-item--navy .css-story-h2 em{color:#8FC4E8 !important}
.css-story-item--navy .css-story-body p{color:rgba(255,255,255,.78)}
@media (max-width:900px){
  .css-story-item--navy{padding:24px 22px}
  .css-story-item--navy .css-rail{border-bottom-color:rgba(255,255,255,.18)}
}

/* problem, then answer: a small marker in the gap so the pair reads in order */
.css-story-grid{position:relative}
.css-story-grid::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;background:var(--white);
  border:1px solid var(--border);box-shadow:0 6px 16px -10px rgba(10,30,60,.5);z-index:2;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A8EC2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:16px 16px;
}
@media (max-width:900px){
  .css-story-grid::after{top:auto;left:50%;transform:translate(-50%,-50%) rotate(90deg)}
}

/* breadcrumb to H1: 32px + 8px read larger than the gap above the breadcrumb,
   because Archivo cap height adds ~12px of optical air. 20px + 8px lands the
   visual gap at about 40px, matching the header rhythm. */
/* BREADCRUMB TO TITLE - one number sitewide.
   Two markup patterns exist: .breadcrumb.mb-lg inside .container (12 pages),
   and .rwd-bcwrap wrapping a bare .breadcrumb (3 pages). Both are tuned so the
   breadcrumb baseline sits 28px above the title box on every page. */
.breadcrumb.mb-lg{margin-bottom:20px}
.rwd-bcwrap{margin-bottom:14px}

/* order counter rides the product photo, not the headline number */
.hp-case-photo{position:relative}
.hp-case-photo .hp-ord-cart{position:absolute;top:16px;right:16px;z-index:3;
  width:54px;height:54px;background:rgba(10,26,44,.72);border-color:rgba(255,255,255,.22);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hp-case-photo .hp-ord-cart svg{width:26px;height:26px}
.hp-case-revenue{gap:0}
@media (max-width:600px){
  .hp-case-photo .hp-ord-cart{top:10px;right:10px;width:46px;height:46px}
  .hp-case-photo .hp-ord-cart svg{width:22px;height:22px}
}

/* hero proof points: stacked claims, number first, one line of substance under */
.gads-checks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;max-width:440px}
.gads-checks li{display:flex;align-items:flex-start;gap:13px}
.gads-check-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;background:var(--accent-pale);color:var(--accent);margin-top:1px}
.gads-check-ic svg{width:15px;height:15px;display:block}
.gads-check-tx{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.4;color:var(--ink)}
.gads-check-tx b{font-family:var(--font-display);font-size: var(--fs-h5);color:var(--accent);
  letter-spacing:-.5px;margin-right:4px}
.gads-check-tx span{display:block;font-size:var(--fs-caption);line-height:1.55;color:var(--ink-mid);margin-top:3px}

/* ══════════════════════════════════════
   HERO SPACING - one owner for the vertical rhythm
   .container carries 80px top and bottom, which stacked on top of each hero's
   own var(--rwd-header-gap). The hero owns it; the container just
   handles width and side gutters.
   ══════════════════════════════════════ */
/* reverted: the container padding clears the fixed header, it is not spare */

/* breadcrumb to title: 38px on both markup patterns
   (.breadcrumb.mb-lg sits above an h1 with margin-top:8px,
    .rwd-bcwrap sits above one with margin-top:14px) */
.breadcrumb.mb-lg { margin-bottom: 30px; }
.rwd-bcwrap { margin-bottom: 24px; }

/* numbered problem rows: body face, sentence case. Archivo caps at this size
   turned five short headings into eight lines of shouting. */
.gads-problem-title{font-family:var(--font-body);font-size:var(--fs-h5);font-weight:700;
  text-transform:none;letter-spacing:-.01em;line-height:1.3;color:var(--ink);margin:0 0 8px}
/* left column picks up an image so it holds its side of the split */
.gads-prob-img{margin:0 0 22px;border-radius:16px;overflow:hidden;
  box-shadow:0 22px 46px -34px rgba(10,30,60,.45)}
.gads-prob-img img{width:100%;height:auto;max-height:300px;object-fit:cover;display:block}

/* campaign cards: line icons in place of emoji */
.gads-campaign-icon{display:block;color:var(--accent);margin-bottom:14px}
.gads-campaign-icon svg{width:34px;height:34px;display:block;stroke-width:1.5}
.gads-campaign-card--dark .gads-campaign-icon{color:#9FC8E8}

/* management phase cards get a photo across the top */
.gads-mgmt-img{margin:-24px -24px 18px;border-radius:14px 14px 0 0;overflow:hidden;
  aspect-ratio:16/9;background:#EBF2FA}
.gads-mgmt-img img{width:100%;height:100%;object-fit:cover;display:block}

/* revenue trend: filled area, one series, endpoint marked */
.gads-trend{height:96px;margin:0 0 2px;position:relative}
/* the endpoint sits outside the stretched coordinate system so it stays round */
.gads-trend-dot{position:absolute;top:0;right:0;width:10px;height:10px;border-radius:50%;
  background:#6EE7A8;border:2px solid #0F2039;transform:translate(2px,-1px)}
.gads-trend svg{display:block;width:100%;height:100%;overflow:visible}
@media (max-width:600px){.gads-trend{height:76px}}

/* CRM page icons: line SVGs replacing emoji, sized per slot */
.crm-process-icon,.crm-platform-card-icon,.crm-mini-int-icon{color:var(--crm,#4A8EC2);display:block}
.crm-process-icon svg{width:34px;height:34px;display:block;stroke-width:1.5}
.crm-platform-card-icon svg{width:30px;height:30px;display:block;stroke-width:1.5}
.crm-mini-int-icon svg{width:22px;height:22px;display:block;stroke-width:1.6}

/* process cards: titles in the body face, and the icon on the navy card has to
   be light or it disappears into the card */
.crm-process-title{font-family:var(--font-body);font-size:var(--fs-h4);font-weight:700;
  text-transform:none;letter-spacing:-.01em;line-height:1.28;color:var(--ink)}
.crm-process-card--featured .crm-process-title{color:#fff}
.crm-process-card--featured .crm-process-icon{color:#8FC4E8}
.crm-process-card--featured .crm-process-num{color:rgba(255,255,255,.16)}

/* the split photo was inheriting the generic .is-filled cap (16/10, max 460px,
   height auto), so it stopped short of the copy beside it and left white below */
.rwd-split-ph.is-filled{aspect-ratio:auto!important;height:100%!important;
  max-height:none!important;min-height:100%!important;width:100%}
.rwd-split-ph.is-filled img{width:100%;height:100%;object-fit:cover;object-position:center}

/* process row is four equal tiles: three steps then the photo. The wrap no
   longer reserves a side column, which was squeezing the cards to a word wide. */
.crm-process-wrap{display:block;margin-top:34px}
.crm-process-wrap .crm-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:0}
.crm-process-wrap .crm-ph--tall.is-filled{aspect-ratio:auto!important;min-height:100%!important;
  max-height:none!important;height:100%!important;border-radius:16px!important;overflow:hidden;margin:0}
.crm-process-wrap .crm-ph--tall.is-filled img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:1000px){.crm-process-wrap .crm-process-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.crm-process-wrap .crm-process-grid{grid-template-columns:1fr}}

/* client story image sits inside the section with rounded corners, not welded
   to the edges */
.rwd-split{gap:44px;padding:44px 40px;border-radius:0}
.rwd-split-media{min-height:420px}
.rwd-split-ph.is-filled{border-radius:20px!important;overflow:hidden;border-right:0!important}
.rwd-split-body{padding:0}
@media (max-width:900px){.rwd-split{padding:32px 20px;gap:26px}}

/* belt and braces: no stray icon inside a text label can ever go full size */
.crm-process-week svg,.rwd-sms svg,.crm-process-desc svg{width:1em;height:1em;display:inline-block;
  vertical-align:-.1em}
/* the SMS duel image spans the two phones below it, and stays slim */
/* the calendar shot and the two phone cards below it are one block, so they
   share a width: 960px, centred, same as .rwd-sms-duel */
.crm-ph--sms.is-filled{aspect-ratio:auto!important;width:100%;max-width:960px;
  height:200px!important;min-height:0!important;max-height:200px!important;
  border-radius:16px!important;overflow:hidden;margin:0 auto 24px}
.crm-ph--sms.is-filled img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media (max-width:700px){.crm-ph--sms.is-filled{height:150px!important;max-height:150px!important}}

/* brand grid: the section carries the sky tint and each logo sits on white, so
   the marks read as artwork on a plate rather than tiles on a tile */
.section.rwd-brands{background:var(--base-tint)}
.rwd-brands .rwd-brand-plate{background:#fff;border-color:rgba(10,30,60,.08);
  box-shadow:0 10px 26px -20px rgba(10,30,60,.4)}
.rwd-brands .rwd-brand-tile:hover .rwd-brand-plate{box-shadow:0 18px 38px -20px rgba(10,30,60,.35)}
.rwd-brands .rwd-brand-tile figcaption small{color:var(--ink-mid)}

/* brand process steps: a photo above each, rule sits under it */
.rwd-proc-img{margin:0 0 16px;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:var(--base-tint,#F4F7FA)}
.rwd-proc-img img{width:100%;height:100%;object-fit:cover;display:block}
.rwd-proc-step{border-top:0}
.rwd-proc-step .rwd-proc-k{padding-top:14px;border-top:2px solid var(--cta)}

/* brand kit block: the section owns the vertical padding, the container was
   adding its own 50px on top of it under the CTA band */
.section:has(> .container > .rwd-marks-sec) > .container{padding-top:0;padding-bottom:0}

/* the Flores lockup is drawn on black, so its plate is black and the artwork
   sits on the ground it was made for instead of floating on white */
.rwd-brands .rwd-brand-plate:has(img[src*=flores-huracan-lockup]){background:#0B0B0B;border-color:#0B0B0B}
.rwd-brands .rwd-brand-plate:has(img[src*=flores-huracan-lockup]) img{max-height:none;max-width:88%}

/* ══════════════════════════════════════
   ONE HERO. Every page hero shares these three things, so header-to-content
   is a single number on every page. A hero class then sets only what makes it
   itself: its ground colour, and how much room its content needs underneath.
   ══════════════════════════════════════ */
.hero,
.home-hero,
.hp-hero,
.ab-hero,
.ab3-hero,
.gs-hero,
.svcs-hero,
.ct-hero,
.css-hero,
.seo-hero,
.wd-hero,
.about-hero,
.local-hero,
.crm-hero,
.ga-hero,
.cs-srx-hero,
.cs-hero,
.pf-hero,
.ai-hero,
.gads-hero,
.gbp-hero,
.lp-hero,
.rd-hero,
.svc-hero,
.nmd-hero,
.rgs2-hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--rwd-header-gap);
}

/* before and after, side by side. Both states readable at once, which the drag
   slider never allowed. */
.rd-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.rd-compare-side{position:relative;margin:0}
.rd-compare-side img{width:100%;height:auto;display:block;border-radius:14px;
  border:1px solid var(--border);box-shadow:0 20px 40px -30px rgba(10,30,60,.5)}
.rd-compare-side figcaption{margin-top:10px;font-family:var(--font-body);font-size:var(--fs-caption);
  color:var(--ink-mid);line-height:1.5}
.rd-compare .rd-tag{position:absolute;top:12px;left:12px;right:auto;width:auto;z-index:2}
@media (max-width:800px){.rd-compare{grid-template-columns:1fr;gap:26px}}

/* redesign page section headings: Archivo Black in all caps is punchy on three
   words and unreadable on nine. These run in the body face, sentence case. */
.rd-page .display-lg,
section[class*='rd-'] .display-lg{font-family:var(--font-body);font-weight:700;
  text-transform:none;letter-spacing:-.02em;line-height:1.18;
  font-size:var(--fs-h2)}

/* ══════════════════════════════════════
   WEBSITE CARE - the page opens straight into a section with no hero, so it
   never picked up the header gap. And the pricing board earns some hierarchy:
   the recommended plan sits forward, the others step back.
   ══════════════════════════════════════ */
.section.rwd-plans-sec:first-of-type{padding-top:var(--rwd-header-gap)}

.rwd-plan-grid{gap:22px;align-items:stretch}
.rwd-plan{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.rwd-plan:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(10,30,60,.35);
  border-color:var(--accent-border)}
/* the recommended plan is the one the eye should land on */
.rwd-plan--best{transform:translateY(-8px);box-shadow:0 26px 54px -28px rgba(232,68,10,.45)}
.rwd-plan--best:hover{transform:translateY(-11px)}
.rwd-plan--best .rwd-plan-price{color:var(--cta)}
.rwd-plan-flag{border-radius:999px;padding:5px 13px;box-shadow:0 6px 16px -8px rgba(232,68,10,.7)}
/* the price is the headline of a card, so give it room and a rule under it */
.rwd-plan-price{margin:16px 0 0}
.rwd-plan-list{border-top:1px solid var(--border);padding-top:18px;margin-top:18px}
.rwd-plan-name{font-family:var(--font-body);font-weight:700;font-size:var(--fs-h5)}
@media (max-width:900px){
  .rwd-plan-grid{grid-template-columns:1fr;gap:18px}
  .rwd-plan--best,.rwd-plan--best:hover{transform:none}
}

/* plain CTA that replaced the growth-system price list */
.care-cta-inner{text-align:center;max-width:56ch;margin:0 auto}
.care-cta-h2{font-family:var(--font-body);font-size:var(--fs-h3);font-weight:700;
  color:var(--ink);line-height:1.2;margin:10px 0 12px}
.care-cta-lead{font-size:var(--fs-body);line-height:1.75;color:var(--ink-mid);margin:0 0 24px}
.care-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* the fake browser chrome added a black bar over every screenshot and told the
   viewer nothing; the shot reads better on its own */
.wd-browser-chrome{display:none}
.wd-browser-frame{border:1px solid var(--border)}

/* ══════════════════════════════════════
   WORK STRIP - cards open the full screenshot
   ══════════════════════════════════════ */
.rwd-work-card{position:relative;padding:0;border:1px solid var(--border);background:var(--white);
  font:inherit;text-align:left;cursor:zoom-in;display:block;width:100%;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.rwd-work-card:hover{transform:translateY(-4px);border-color:var(--accent-border);
  box-shadow:0 22px 44px -26px rgba(10,30,60,.42)}
.rwd-work-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.rwd-work-zoom{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  background:rgba(10,30,60,.72);color:#fff;font-size:var(--fs-h5);line-height:30px;text-align:center;
  opacity:0;transition:opacity .18s ease}
.rwd-work-card:hover .rwd-work-zoom{opacity:1}

/* company name leads, what they do sits under it. Scoped to the work strip:
   unscoped, these overrode the Web Design hero card and broke its caption row. */
.rwd-work-card .wd-caption-name{font-family:var(--font-body);font-weight:700;font-size:var(--fs-body);
  color:var(--ink);line-height:1.25}
.rwd-work-card .wd-caption-tag{font-size:var(--fs-caption);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:4px}
.rwd-work-card .wd-browser-caption{display:block}

/* the line under a browser card's company name */
.wd-caption-sub{font-size:var(--fs-caption);color:var(--ink-faint);margin-top:3px}

/* the lightbox: these are full page captures, so it scrolls inside */
.rwd-work-lb{position:fixed;inset:0;z-index:9999;background:rgba(8,18,34,.9);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);overflow:auto;padding:70px 20px 40px}
.rwd-work-lb[hidden]{display:none}
.rwd-work-lb-in{max-width:1000px;margin:0 auto;background:#fff;border-radius:14px;overflow:hidden}
.rwd-work-lb-in img{width:100%;height:auto;display:block}
.rwd-work-lb-in figcaption{padding:14px 18px;font-family:var(--font-body);font-size:var(--fs-small);
  font-weight:700;color:var(--ink)}
.rwd-work-lb-x{position:fixed;top:18px;right:22px;width:42px;height:42px;border-radius:50%;
  border:0;background:rgba(255,255,255,.14);color:#fff;font-size:var(--fs-h3);line-height:1;cursor:pointer}
.rwd-work-lb-x:hover{background:rgba(255,255,255,.26)}
@media (prefers-reduced-motion:reduce){.rwd-work-card{transition:none}}

/* the About rows use the theme's original .ab5-zig rules; only the photo box
   is normalised so all three match */
.ab5-zig-media.is-filled{aspect-ratio:4/3 !important;height:auto !important;
  min-height:0 !important;max-height:200px !important}
.ab5-zig-media.is-filled img{width:100%;height:100%;object-fit:cover;display:block}

/* even rows move the photo to column two with order:2, so the columns have to
   swap as well or the photo lands in the wide track and outgrows the odd rows */
.ab5-zig-item:nth-child(even){grid-template-columns:1.25fr .75fr}

/* the rows section was stacking three paddings: its own 64, the container 50,
   and .ab5-zig's 40px top margin. The section owns the spacing, nothing else. */
.ab5-zig-sec > .container{padding-top:0;padding-bottom:0}
.ab5-zig-sec .ab5-zig{margin-top:0;margin-bottom:0}
.ab5-zig-sec{padding-top:56px;padding-bottom:56px}


/* ── REVIEWS BAND ON THE NAVY HOMEPAGE ──
   A full white band right under the ignition hero cut the page in half. The band
   now carries the hero's night sky down behind it and the reviews sit on one
   white rounded panel floating on top, so the transition is a step, not a wall. */
body.rwd-wow .rwd-rev-band{
  background:#0C1B33;   /* same navy as the machine band below, so the two read
                           as one continuous dark region, not two slabs */
  padding:44px 0 30px}
body.rwd-wow .rwd-rev-in{
  max-width:var(--max-width);background:#fff;border-radius:22px;
  padding:22px clamp(14px,2vw,26px);
  box-shadow:0 34px 80px -44px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.05)}
/* inside the panel the cards are columns, not cards: hairlines instead of boxes */
body.rwd-wow .rwd-rev-band .rwd-mb-rate,
body.rwd-wow .rwd-rev-band .rwd-mb-card{
  background:transparent;border:0;border-radius:0;padding:6px 20px}
body.rwd-wow .rwd-rev-band .rwd-mb-card{border-left:1px solid #E7EDF5}
@media (max-width:940px){
  body.rwd-wow .rwd-rev-band .rwd-mb-card{border-left:0;border-top:1px solid #E7EDF5;padding-top:18px}
}


/* ── ONE CONTINUOUS NIGHT BELOW THE HERO ──
   Hero, reviews and the machine band were three navies meeting at hard edges.
   They now share one field: the hero fades into it, the ember echoes down through
   the reviews, and the machine band drops its own corner glows so nothing seams. */
body.rwd-wow .rwd-rev-band{
  background:
    radial-gradient(120% 150px at 50% 0%, rgba(255,150,60,.16), rgba(12,27,51,0) 72%),
    #0C1B33;
  padding:44px 0 30px}
body.rwd-wow .rwd-mb-band{background:#0C1B33}
body.rwd-wow .rwd-rev-in{
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}


/* ── REVIEWS IN GLASS ──
   The white panel was the only opaque thing in the night run. It is now frosted
   glass on the same sky, so the type flips to light and the hairlines invert. */
body.rwd-wow .rwd-rev-in{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 70px -46px rgba(0,0,0,.8)}
body.rwd-wow .rwd-rev-band .rwd-mb-card{border-left-color:rgba(255,255,255,.13)}
body.rwd-wow .rwd-rev-band .rwd-mb-rate-n{color:#fff}
body.rwd-wow .rwd-rev-band .rwd-mb-rate-l{color:rgba(233,240,248,.62)}
body.rwd-wow .rwd-rev-band .rwd-mb-rate-a{color:#9FC6EE !important}
body.rwd-wow .rwd-rev-band .rwd-mb-rate-a:hover{color:var(--cta) !important}
body.rwd-wow .rwd-rev-band .rwd-mb-q{color:rgba(233,240,248,.86)}
body.rwd-wow .rwd-rev-band .rwd-mb-who b{color:#fff}
body.rwd-wow .rwd-rev-band .rwd-mb-who i{color:rgba(233,240,248,.55)}
body.rwd-wow .rwd-rev-band .rwd-mb-auth{border-top-color:rgba(255,255,255,.13)}
@media (max-width:940px){
  body.rwd-wow .rwd-rev-band .rwd-mb-card{border-top-color:rgba(255,255,255,.13)}
}


/* ── HORIZON: THE CURVE, WITH THE GLASS STANDING ON IT ──
   The reviews band rises into the hero as a shallow arc, so the ember reads as a
   sun coming up behind the curve of a planet instead of stopping at a straight
   edge. The glass panel then straddles that crown, which is what kills the seam:
   something is standing on the horizon, so the eye reads depth, not a divider. */
body.rwd-wow .rwd-rev-band{
  position:relative;z-index:3;
  margin-top:-96px;
  border-radius:50% 50% 0 0 / 96px 96px 0 0;
  padding-top:22px;padding-bottom:30px}
/* a rim of light along the crown, the way a horizon catches the sun */
body.rwd-wow .rwd-rev-band::before{
  content:"";position:absolute;left:0;right:0;top:0;height:48px;pointer-events:none;
  border-radius:50% 50% 0 0 / 96px 96px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,190,130,.30)}
/* the panel steps up onto the crown */
body.rwd-wow .rwd-rev-in{position:relative;z-index:4;margin-top:-46px}
@media (max-width:940px){
  body.rwd-wow .rwd-rev-band{margin-top:-60px;border-radius:50% 50% 0 0 / 60px 60px 0 0}
  body.rwd-wow .rwd-rev-in{margin-top:-14px}
}


/* ══ THE TYPE SCALE — the only font sizes on this site ══
   display/h1/h2 lead are responsive; everything else is flat.
   New styles use these vars. Never mint a raw font-size again. */
:root{
  --fs-display: clamp(44px,6vw,72px);
  --fs-h1: clamp(2.5rem,6vw,3.7rem);
  --fs-h2: clamp(28px,3.6vw,44px);
  --fs-h3: 26px;
  --fs-h4: 20px;
  --fs-h5: 18px;
  --fs-lead: clamp(1.06rem,1.25vw,1.22rem);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;
  --fs-label: 10px;
}


/* case-studies list as portfolio cards (option A) */
.cs-card-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cs-pcard{display:block}
.cs-pcard .wd-pcard-img-wrap--sm{height:150px}
.cs-pcard .wd-pcard-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:top}
.cs-pcard-plate{height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:900;font-size:var(--fs-h4);text-transform:uppercase;
  text-align:center;padding:12px;line-height:1.1}
.cs-pcard .wd-pcard-info{padding:12px 14px}
@media(max-width:700px){.cs-card-list{grid-template-columns:1fr}}


/* the case-studies CTA band: words left, a person right */
.cs-cta-full-inner{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;text-align:center}
@media(min-width:960px){
  .cs-cta-full-inner{grid-template-columns:1.4fr .6fr;text-align:left}
  .cs-cta-full-inner .cs-cta-full-stats,.cs-cta-full-inner .cs-cta-full-btns{justify-content:flex-start}
}
.cs-cta-full-photo{margin:0;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.8)}
.cs-cta-full-photo img{width:100%;height:100%;max-height:440px;object-fit:cover;display:block}
@media(max-width:959px){.cs-cta-full-photo{display:none}}


/* ══ CASE STUDIES: NIGHT-SKY HERO + THE WALL OF PROOF ══
   The homepage language applied to the proof page: same sky, same ember, the
   glass stat bar straddling the curved horizon, then a dark wall of screenshots. */
.cs-sky-hero{position:relative;padding:96px 0 0}
.cs-sky-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(900px 620px at 8% -12%, rgba(74,142,194,.26) 0%, rgba(10,30,60,0) 62%),
    linear-gradient(168deg,#0C2549 0%,#0A1E3C 40%,#0C1B33 100%)}
.cs-sky-fx::before{content:"";position:absolute;left:50%;bottom:-46%;width:min(1700px,168%);
  aspect-ratio:2/1;transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(255,196,120,.5) 0%, rgba(255,138,40,.38) 22%,
    rgba(232,68,10,.26) 44%, rgba(232,68,10,.09) 66%, rgba(10,30,60,0) 82%);
  filter:blur(10px)}
.cs-sky-hero .rwd-wow-stars{z-index:1}
.cs-sky-inner{position:relative;z-index:2}
.cs-sky-inner{padding-top:0;padding-bottom:0}
.breadcrumb--dark a{color:rgba(233,240,248,.55)}
.breadcrumb--dark .breadcrumb-current{color:rgba(233,240,248,.85)}
.breadcrumb--dark .breadcrumb-sep{color:rgba(233,240,248,.3)}
.cs-sky-eyebrow{color:#C9A98E !important}
.cs-sky-eyebrow::before,.cs-sky-eyebrow::after{background:rgba(201,169,142,.5)}
.cs-sky-h1{color:#fff}
.cs-sky-h1 span{color:#7AAADC}
.cs-sky-lead{color:rgba(233,240,248,.72);max-width:640px;margin-left:auto;margin-right:auto}
/* the glass bar stands on the horizon: half on the sky, half on the light */
.cs-sky-glass-wrap{position:relative;z-index:5;padding-top:34px;padding-bottom:0;
  margin-bottom:-46px}
.cs-sky-glass{display:flex;justify-content:space-around;gap:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:22px 16px;box-shadow:0 30px 70px -46px rgba(0,0,0,.8)}
.cs-sky-stat{text-align:center}
.cs-sky-stat b{display:block;font-family:var(--font-display);font-size:var(--fs-h3);
  font-weight:900;color:#fff;line-height:1}
.cs-sky-stat span{display:block;margin-top:6px;font-size:var(--fs-label);font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:rgba(233,240,248,.5)}
/* everything after the hero rides one curved light band */
.cs-sky-curve{position:relative;z-index:3;background:#F4F8FC;
  border-radius:50% 50% 0 0 / 96px 96px 0 0;padding-top:76px}
.cs-sky-curve::before{content:"";position:absolute;left:0;right:0;top:0;height:48px;
  pointer-events:none;border-radius:50% 50% 0 0 / 96px 96px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,190,130,.30)}

/* ── the wall ── */
.cs-wall-sec{background:#0C1B33;padding:72px 0 80px}
.cs-wall-eyebrow{color:rgba(233,240,248,.45)}
.cs-wall-eyebrow .cs-section-eyebrow-line{background:rgba(255,255,255,.18)}
.cs-wall-h2{color:#fff;margin-bottom:10px}
.cs-wall-subhead{text-align:center;font-size:var(--fs-body);color:rgba(233,240,248,.55);margin:0 0 28px}
.cs-filters--wall{justify-content:center;margin-bottom:26px}
.cs-filters--wall .cs-filter-btn{background:transparent;border:1px solid rgba(255,255,255,.22);
  color:rgba(233,240,248,.75)}
.cs-filters--wall .cs-filter-btn:hover{border-color:rgba(255,255,255,.5);color:#fff}
.cs-filters--wall .cs-filter-btn--active{background:var(--cta);border-color:var(--cta);color:#fff}
.cs-wall{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:210px;
  grid-auto-flow:dense;gap:12px}
.cs-wall-tile{position:relative;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;
  background:#12233F;transition:transform .18s ease,box-shadow .18s ease}
.cs-wall-tile--tall{grid-row:span 2}
.cs-wall-tile img,.cs-wall-tile .cs-wall-plate{flex:1 1 auto;min-height:0}
.cs-wall-tile img{width:100%;object-fit:cover;object-position:top;display:block;
  transition:transform .35s ease}
.cs-wall-tile:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(0,0,0,.7)}
.cs-wall-tile:hover img{transform:scale(1.05)}
.cs-wall-plate{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--font-display);font-weight:900;font-size:var(--fs-h5);text-transform:uppercase;
  line-height:1.15;padding:14px}
/* the caption sits UNDER the shot, never over it */
.cs-wall-shade{display:none}
.cs-wall-meta{flex:0 0 auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:10px 12px;background:#0A1626;color:#fff}
.cs-wall-meta b{font-family:var(--font-display);font-size:var(--fs-h5);font-weight:900;line-height:1;color:#8FB8E8}
.cs-wall-meta i{font-style:normal;display:block;font-size:var(--fs-label);font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:rgba(233,240,248,.65)}
.cs-wall-meta em{font-style:normal;margin-left:auto;font-size:var(--fs-caption);
  font-weight:700;color:rgba(233,240,248,.9);text-align:right}
.cs-wall-audit{margin-top:34px;display:flex;align-items:center;justify-content:center;gap:20px;
  flex-wrap:wrap;color:rgba(233,240,248,.65);font-size:var(--fs-small)}
@media(max-width:1000px){.cs-wall{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.cs-wall{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}
  .cs-sky-glass{flex-wrap:wrap}.cs-sky-stat{flex:1 1 40%}}


/* featured case study: the site shot replaces the stat card, wall-style */
.cs-feat-c-shot{position:relative;display:block;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 26px 60px -30px rgba(0,0,0,.7);
  aspect-ratio:16/11;width:100%}
.cs-feat-c-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.cs-feat-c-shot::after{content:none}
.cs-feat-c-shot-stat{display:none}
.cs-feat-c-shot-stat b{display:block;font-family:var(--font-display);font-size:var(--fs-h3);font-weight:900;line-height:1}
.cs-feat-c-shot-stat i{font-style:normal;font-size:var(--fs-label);font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:rgba(233,240,248,.7)}


/* ── problems, one at a time (option C) ── */
.cs-prob-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.cs-prob-tab{font-family:var(--font-body);font-size:var(--fs-caption);font-weight:700;
  padding:8px 16px;border-radius:999px;border:1px solid var(--border);background:#fff;
  color:var(--ink-light);cursor:pointer;transition:var(--transition)}
.cs-prob-tab:hover{border-color:var(--accent);color:var(--ink)}
.cs-prob-tab.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.cs-prob-panel{display:none;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;
  background:#fff;border:1px solid var(--border);border-radius:18px;padding:34px;
  max-width:980px;margin:0 auto}
.cs-prob-panel.is-on{display:grid}
.cs-prob-q{font-family:var(--font-body);font-size:var(--fs-h3);font-weight:800;color:var(--ink);
  line-height:1.3;letter-spacing:-.4px;margin:0 0 12px;text-transform:none}
.cs-prob-body{font-size:var(--fs-body);line-height:1.7;color:var(--ink-light);margin:0 0 20px}
.cs-prob-shot{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border);
  aspect-ratio:16/11}
.cs-prob-shot img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
.cs-prob-stat{position:absolute;left:12px;bottom:10px;background:rgba(255,255,255,.94);
  border-radius:10px;padding:7px 12px;color:var(--ink)}
.cs-prob-stat b{display:block;font-family:var(--font-display);font-size:var(--fs-h4);font-weight:900;line-height:1}
.cs-prob-stat i{font-style:normal;font-size:var(--fs-label);font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--ink-faint)}
@media(max-width:820px){.cs-prob-panel{grid-template-columns:1fr;padding:22px}}


/* the work: full site capture left, gallery right */
.css-ws{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:start}
.css-ws--solo{grid-template-columns:minmax(0,760px);justify-content:center}
.css-ws-site{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);
  background:#fff;cursor:zoom-in;max-height:640px}
.css-ws-site img{width:100%;display:block;object-fit:cover;object-position:top;max-height:600px}
.css-ws-site-cap{padding:10px 14px;font-size:var(--fs-caption);font-weight:700;color:var(--ink-faint);
  border-top:1px solid var(--border);background:#fff}
.css-ws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:900px){.css-ws{grid-template-columns:1fr}.css-ws-grid{grid-template-columns:repeat(3,1fr)}}

/* every plate the same height, whatever the artwork size */
.rwd-kit-plate img{max-width:82%;max-height:76%;width:auto;height:auto;object-fit:contain}


/* the logo transformation: one panel, equal halves, the arrow does the talking */
.rwd-kit-ba{display:grid;grid-template-columns:1fr 64px 1fr;align-items:stretch;
  background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden}
.rwd-kit-ba-side{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:220px;padding:40px 32px}
.rwd-kit-ba-side:first-child{background:#F6F8FB}
.rwd-kit-ba-side img{max-width:78%;max-height:150px;width:auto;height:auto;object-fit:contain}
.rwd-kit-ba-side:first-child img{filter:grayscale(.35);opacity:.85}
.rwd-kit-ba-chip{position:absolute;top:14px;left:16px;font-size:var(--fs-label);font-weight:800;
  letter-spacing:1.5px;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.rwd-kit-ba-chip--before{background:#E7EBF1;color:#5b6c81}
.rwd-kit-ba-chip--after{background:var(--cta);color:#fff}
.rwd-kit-ba-arrow{display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-h3);font-weight:900;color:var(--cta);background:#fff;
  border-left:1px solid var(--border);border-right:1px solid var(--border)}
@media(max-width:700px){.rwd-kit-ba{grid-template-columns:1fr}
  .rwd-kit-ba-arrow{border:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    padding:8px 0;transform:rotate(90deg)}}


/* the work, duo: desktop takes the stage, one phone stands beside it */
.css-ws--duo{grid-template-columns:minmax(0,2fr) minmax(0,1fr);max-width:920px;margin:0 auto;align-items:stretch}
.css-ws--duo .css-ws-grid{grid-template-columns:1fr;height:100%}
.css-ws--duo .css-gallery-item{height:100%;aspect-ratio:auto}
.css-ws--duo .css-gallery-item img{height:100%;width:100%;object-fit:cover;object-position:top}
@media(max-width:900px){.css-ws--duo{grid-template-columns:1fr}
  .css-ws--duo .css-gallery-item img{max-height:420px}}


/* ── homepage client spotlight: big legible showcase + rail + orange timer ── */
.hp-spot{display:grid;grid-template-columns:2.3fr 1fr;gap:0 18px;align-items:stretch}
.hp-spot-stage{position:relative;border-radius:14px 14px 0 0;overflow:hidden;background:#0C1B33;min-height:400px}
.hp-spot-slide{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;display:block}
.hp-spot-slide.is-on{opacity:1;z-index:1}
.hp-spot-slide img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.hp-spot-timer{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.18);z-index:2}
.hp-spot-timer i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cta),#FF8A3C);opacity:.5}
.hp-spot > div:first-child{grid-row:1}
.hp-spot-capbar{grid-column:1;background:#fff;border-radius:0 0 14px 14px;box-shadow:0 14px 34px -18px rgba(10,30,60,.25);position:relative;min-height:64px}
.hp-spot-cap{display:none;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px}
.hp-spot-cap.is-on{display:flex}
.hp-spot-cap b{display:block;font-size:var(--fs-h4);font-weight:800;color:var(--ink);line-height:1.2}
.hp-spot-cap small{font-size:var(--fs-caption);color:var(--ink-faint);font-weight:600}
.hp-spot-desc{margin:6px 0 0;font-size:var(--fs-small);color:var(--ink-soft,#33465C);line-height:1.5;max-width:60ch}
.hp-spot-open{font-size:var(--fs-small);font-weight:800;color:var(--cta);text-decoration:none;white-space:nowrap}
.hp-spot-open:hover{text-decoration:underline}
.hp-spot-rail{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;gap:10px}
.hp-spot-row{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:0;
  border-radius:12px;padding:11px 14px;cursor:pointer;transition:var(--transition);font-family:var(--font-body);
  box-shadow:0 8px 22px -14px rgba(10,30,60,.28)}
.hp-spot-row.is-on{background:#FFF3EC;box-shadow:0 10px 26px -12px rgba(232,68,10,.4)}
.hp-spot-row-th{width:56px;height:44px;border-radius:7px;overflow:hidden;flex-shrink:0;position:relative}
.hp-spot-row-th img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.hp-spot-row-tx b{display:block;font-size:var(--fs-small);font-weight:800;color:var(--ink);line-height:1.15;margin:0 0 1px}
.hp-spot-row-tx small{display:block;font-size:var(--fs-caption);color:var(--ink-faint);font-weight:600;line-height:1.25}
.hp-spot-all-btn{margin-top:auto;justify-content:center}
@media(max-width:900px){.hp-spot{grid-template-columns:1fr}
  .hp-spot-stage{min-height:280px}
  .hp-spot-rail{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap}
  .hp-spot-row{flex:1 1 40%}.hp-spot-all-btn{flex:1 1 100%;margin:0}}


/* the work v3: desktop + mobile pair, then cards laid out in the open */
.css-wk-sites{display:grid;grid-template-columns:2fr .9fr;gap:16px;max-width:980px;margin:0 auto;align-items:stretch}
.css-wk-sites--solo{grid-template-columns:minmax(0,760px);justify-content:center}
.css-wk-sites .css-ws-site{max-height:none}
.css-wk-sites .css-ws-site img{max-height:560px;height:100%;object-fit:cover;object-position:top}
.css-ws-site--mob img{object-position:top}
.css-wk-sub{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:900;text-transform:uppercase;
  color:var(--ink);text-align:center;margin:44px 0 18px;letter-spacing:-.5px}
.css-wk-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.css-wk-card{margin:0;background:#fff;border-radius:12px;padding:10px;box-shadow:0 14px 30px -16px rgba(10,30,60,.3)}
.css-wk-card img{display:block;width:100%;max-width:420px;height:auto;border-radius:6px}
.css-wk-rest{margin-top:28px}
@media(max-width:900px){.css-wk-sites{grid-template-columns:1fr}.css-wk-card img{max-width:100%}}

.css-wk-card figcaption{text-align:center;font-size:var(--fs-caption);font-weight:700;color:var(--ink-faint);
  padding:8px 0 2px;text-transform:uppercase;letter-spacing:1.5px}


/* ── night footer: glass deck on deep navy, sunset horizon crest, faint ROCKET watermark ── */
.rwd-ftr{--ink:#F2F6FB;--ftr-line:rgba(255,255,255,.10);--ftr-muted:#8FB2D9;
  background:linear-gradient(to bottom,#0A1E3C 0,#0A1E3C 70px,#081A30 420px,#060F1E 780px);color:#DCE7F3;
  position:relative;overflow:hidden;border-top:0;padding-top:80px}
.rwd-ftr::before{content:"";position:absolute;left:0;right:0;top:0;height:420px;pointer-events:none;
  background:
    radial-gradient(1.0px 1.0px at 33.1% 19.6%,rgba(255,255,255,0.4),transparent),
    radial-gradient(1.0px 1.0px at 53.4% 38.9%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 22.6% 13.7%,rgba(255,255,255,0.4),transparent),
    radial-gradient(1.8px 1.8px at 10.7% 44.2%,rgba(255,255,255,0.43),transparent),
    radial-gradient(1.0px 1.0px at 23.4% 62.5%,rgba(255,255,255,0.73),transparent),
    radial-gradient(1.0px 1.0px at 40.1% 93.9%,rgba(255,255,255,0.71),transparent),
    radial-gradient(1.8px 1.8px at 14.8% 43.7%,rgba(255,255,255,0.43),transparent),
    radial-gradient(1.2px 1.2px at 31.6% 79.5%,rgba(255,255,255,0.42),transparent),
    radial-gradient(1.0px 1.0px at 56.8% 22.9%,rgba(255,255,255,0.71),transparent),
    radial-gradient(1.2px 1.2px at 8.0% 11.4%,rgba(255,255,255,0.67),transparent),
    radial-gradient(1.6px 1.6px at 53.0% 76.0%,rgba(255,255,255,0.73),transparent),
    radial-gradient(1.2px 1.2px at 45.5% 33.0%,rgba(255,255,255,0.8),transparent),
    radial-gradient(1.8px 1.8px at 25.4% 57.7%,rgba(255,255,255,0.67),transparent),
    radial-gradient(1.8px 1.8px at 35.0% 46.4%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 13.3% 43.6%,rgba(255,255,255,0.45),transparent),
    radial-gradient(1.0px 1.0px at 48.9% 9.5%,rgba(255,255,255,0.85),transparent),
    radial-gradient(1.4px 1.4px at 57.0% 84.8%,rgba(255,255,255,0.57),transparent),
    radial-gradient(1.6px 1.6px at 35.6% 50.7%,rgba(255,255,255,0.39),transparent),
    radial-gradient(1.0px 1.0px at 11.0% 30.3%,rgba(255,255,255,0.39),transparent),
    radial-gradient(1.6px 1.6px at 69.3% 64.2%,rgba(255,255,255,0.53),transparent),
    radial-gradient(1.0px 1.0px at 39.0% 66.2%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 36.1% 61.0%,rgba(255,255,255,0.39),transparent),
    radial-gradient(1.2px 1.2px at 75.8% 17.6%,rgba(255,255,255,0.61),transparent),
    radial-gradient(1.2px 1.2px at 90.0% 50.7%,rgba(255,255,255,0.64),transparent),
    radial-gradient(1.6px 1.6px at 54.7% 85.5%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 28.7% 43.4%,rgba(255,255,255,0.79),transparent),
    radial-gradient(3px 3px at 22% 24%,rgba(255,255,255,.95),rgba(255,255,255,.15) 60%,transparent),
    radial-gradient(3px 3px at 76% 44%,rgba(255,255,255,.9),rgba(255,255,255,.12) 60%,transparent)}
.rwd-ftr::after{content:"ROCKET";position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);
  font-family:var(--font-display);font-weight:900;font-size:clamp(140px,20vw,300px);letter-spacing:-8px;
  color:rgba(255,255,255,.035);pointer-events:none;user-select:none;line-height:1;white-space:nowrap}
.rwd-ftr-inner{position:relative;z-index:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:18px;
  margin:64px auto 30px;padding:44px 36px 24px;max-width:1160px}
.rwd-ftr-form{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.rwd-ftr-form input{color:#fff}
.rwd-ftr-form input::placeholder{color:#9db6d2}
.rwd-ftr a{color:#DCE7F3}
.rwd-ftr a:hover{color:#fff}
@media(max-width:760px){
  .rwd-ftr-inner{margin:40px 14px 20px;padding:30px 20px 18px}
  .rwd-ftr::after{font-size:32vw;letter-spacing:-4px}}

.rwd-ftr .ct-social{color:#3D4A5C;border-color:rgba(255,255,255,.25)}
.rwd-ftr .ct-social svg{width:17px;height:17px}

.rwd-ftr .rwd-ftr-social a{color:#3D4A5C}
.rwd-ftr .rwd-ftr-social a:hover{color:#0A1E3C}

/* about value numbers: same ghost treatment as the homepage system cards */
.ab-value-card{position:relative;overflow:hidden}
.ab-value-card .ab-value-num{position:absolute;top:-16px;right:-8px;margin:0;pointer-events:none;
  font-family:var(--font-display);font-size:var(--fs-display);line-height:1;
  letter-spacing:-2px;color:rgba(255,255,255,.07);background:none;border:0;width:auto;height:auto;display:block}

/* about page: homepage night treatment - slight gradient + stars, no ember */
body.page-id-1270 .ab3-hero,
body.page-id-1270 .ab5-zig-sec{
  background:
    radial-gradient(1.6px 1.6px at 45.4% 53.3%,rgba(255,255,255,0.57),transparent),
    radial-gradient(1.6px 1.6px at 84.1% 20.7%,rgba(255,255,255,0.68),transparent),
    radial-gradient(1.4px 1.4px at 78.1% 12.3%,rgba(255,255,255,0.39),transparent),
    radial-gradient(1.0px 1.0px at 53.7% 82.4%,rgba(255,255,255,0.66),transparent),
    radial-gradient(1.2px 1.2px at 40.0% 43.9%,rgba(255,255,255,0.67),transparent),
    radial-gradient(1.0px 1.0px at 81.8% 9.6%,rgba(255,255,255,0.41),transparent),
    radial-gradient(1.6px 1.6px at 25.2% 6.6%,rgba(255,255,255,0.5),transparent),
    radial-gradient(1.2px 1.2px at 58.7% 21.2%,rgba(255,255,255,0.68),transparent),
    radial-gradient(1.6px 1.6px at 50.0% 62.3%,rgba(255,255,255,0.69),transparent),
    radial-gradient(1.0px 1.0px at 41.1% 52.5%,rgba(255,255,255,0.72),transparent),
    radial-gradient(1.4px 1.4px at 32.3% 24.2%,rgba(255,255,255,0.32),transparent),
    radial-gradient(1.0px 1.0px at 56.1% 13.5%,rgba(255,255,255,0.81),transparent),
    radial-gradient(1.0px 1.0px at 39.1% 88.3%,rgba(255,255,255,0.43),transparent),
    radial-gradient(1.6px 1.6px at 91.0% 8.6%,rgba(255,255,255,0.89),transparent),
    radial-gradient(1.2px 1.2px at 40.2% 10.4%,rgba(255,255,255,0.77),transparent),
    radial-gradient(1.4px 1.4px at 27.9% 11.7%,rgba(255,255,255,0.31),transparent),
    radial-gradient(1.2px 1.2px at 41.4% 85.2%,rgba(255,255,255,0.45),transparent),
    radial-gradient(1.6px 1.6px at 11.7% 9.3%,rgba(255,255,255,0.41),transparent),
    radial-gradient(900px 620px at 8% -12%, rgba(74,142,194,.26) 0%, rgba(10,30,60,0) 62%),
    linear-gradient(168deg,#0C2549 0%,#0A1E3C 38%,#071426 72%,#0C1B33 100%) !important}

.rwd-ts{flex:0 0 0;width:0;min-width:0;height:0;overflow:hidden;line-height:0}
.rwd-ts.is-live{flex:1 1 100%;width:auto;height:auto;overflow:visible;margin-top:8px}
.rwd-ts iframe{max-width:100%}

/* footer subscribe: unmissable success */
.rwd-ftr-success{display:flex;align-items:center;gap:14px;background:rgba(46,174,90,.12);
  border:1px solid rgba(46,174,90,.4);border-radius:12px;padding:14px 18px;
  font-size:var(--fs-body);color:#DFF5E7;animation:rwdPop .35s ease}
.rwd-ftr-success b{color:#7BE3A2}
.rwd-ftr-success-ic{width:44px;height:44px;border-radius:50%;background:#2EAE5A;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px -8px rgba(46,174,90,.7)}
@keyframes rwdPop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}

.rwd-ftr-logo-link{margin-top:-10px}