/* services-hub-page.css — Phase 4 extraction 2026-04-17. */

/* §1 */
/* ── SKIP LINK ─────────────────────────────────────── */
    .skip-link {
      position: absolute; top: -100%; left: 16px; z-index: 9999;
      background: #07192E; color: #fff;
      padding: 12px 24px; border-radius: 0 0 8px 8px;
      font-family: "Inter", system-ui, sans-serif; font-size: 14px; font-weight: 600;
      text-decoration: none; transition: top .15s;
    }
    .skip-link:focus { top: 0; }

    /* -- SCREEN READER ONLY --------------------------------------- */
    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    /* ── RESET ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :focus-visible { outline: 2px solid #1779B8; outline-offset: 3px; border-radius: 6px; }
    /* ── PRO MAX: INTERACTIVE ELEMENTS ──────────────────── */
    a, button, [role="button"], [onclick], .btn-hero-primary, .btn-primary, .btn-orange, .btn-nav-primary, .callback-trigger { cursor: pointer; }
    a, button, [role="button"] { transition: all 0.2s ease; }
    /* ── PRO MAX: LOADING STATE ─────────────────────────── */
    .btn-loading { position: relative; pointer-events: none; opacity: 0.8; }
    .btn-loading::after {
      content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
      width: 18px; height: 18px; border: 2px solid transparent;
      border-top-color: #fff; border-radius: 50%;
      animation: btnSpin 0.6s linear infinite;
    }
    @keyframes btnSpin { to { transform: translateY(-50%) rotate(360deg); } }
    /* ── PRO MAX: TOUCH TARGETS ────────────────────────── */
    .mob-sticky-cta a, .mob-sticky-cta button, .callback-trigger { min-height: 44px; }
    @media (max-width: 1024px) {
      button, [role="button"], .btn-hero-primary, .btn-primary, .btn-orange, .btn-nav-primary, .iq-submit, .assess-submit, .callback-submit, .cb-submit, .submit-btn { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
      input, select, textarea { min-height: 44px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .reveal { opacity: 1 !important; transform: none !important; }
    }

    /* ── PAGE-UNIQUE TOKENS ─────────────────────────────── */
    /* Removed redundant tokens already defined in site.css (verified 2026-05-05).
       Page-scoped overrides kept: --fs-* (static, replaces fluid clamps from
       tokens.css), --s-*, --r-* (different radius scale), --shadow-* (matches
       site.css but kept for explicit page-scoped override pattern), glow/glass. */
    :root {
      /* ── DESIGN SYSTEM v2: modular scales ─────────────── */
      --fs-xs:   13px;
      --fs-sm:   15px;
      --fs-base: 17px;
      --fs-md:   21px;
      --fs-lg:   26px;
      --fs-xl:   33px;
      --fs-2xl:  41px;
      --fs-3xl:  52px;
      --fs-hero: 64px;
      --s-1: 4px;
      --s-2: 8px;
      --s-3: 12px;
      --s-4: 16px;
      --s-5: 24px;
      --s-6: 32px;
      --s-7: 48px;
      --s-8: 64px;
      --s-9: 96px;
      --r-sm: 8px;
      --r-md: 16px;
      --r-lg: 24px;
      --r-full: 9999px;
      --shadow-sm:  0 1px 4px rgba(7,25,46,.06),0 1px 2px rgba(7,25,46,.04);
      --shadow-md:  0 4px 24px rgba(7,25,46,.08),0 2px 8px rgba(7,25,46,.04);
      --shadow-lg:  0 16px 56px rgba(7,25,46,.10),0 4px 16px rgba(7,25,46,.06);
      --shadow-xl:  0 32px 80px rgba(7,25,46,.14),0 8px 24px rgba(7,25,46,.08);
      --glow-blue:  0 0 0 1px rgba(41,171,226,.18), 0 8px 32px rgba(41,171,226,.14);
      --glow-orange: 0 0 0 1px rgba(249,115,22,.12), 0 8px 24px rgba(249,115,22,.20);
      --glass-shadow:
        0 0 0 0.5px rgba(255,255,255,.6),
        0 0 0 1px rgba(0,0,0,.02),
        0 1px 2px rgba(7,25,46,.03),
        0 4px 12px rgba(7,25,46,.04),
        0 16px 48px rgba(7,25,46,.07),
        0 32px 80px rgba(7,25,46,.04);
      --glass-shadow-hover:
        0 0 0 0.5px rgba(255,255,255,.8),
        0 0 0 1px rgba(41,171,226,.08),
        0 2px 4px rgba(7,25,46,.04),
        0 8px 24px rgba(7,25,46,.06),
        0 24px 64px rgba(7,25,46,.10),
        0 40px 96px rgba(7,25,46,.05);
    }

    /* ── CLIENT PROOF BAR ───────────────────────────────── */
    .client-proof-bar {
      padding: 32px 0;
      background: var(--off, #F4F8FC);
      border-bottom: 1px solid rgba(226,236,244,.5);
    }
    .client-proof-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 32px;
      display: flex;
      align-items: center;
      gap: 40px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .client-proof-label{
      font-family: var(--font-b);
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      white-space: nowrap;
    }
    .client-proof-logos {
      display: flex;
      align-items: center;
      gap: 32px;
      flex-wrap: wrap;
    }
    .client-proof-logos img {
      height: 28px;
      opacity: 0.5;
      filter: grayscale(100%);
      transition: opacity 0.3s, filter 0.3s;
    }
    .client-proof-logos img:hover {
      opacity: 1;
      filter: grayscale(0%);
    }

    /* ── BASE ───────────────────────────────────────────── */
    html { scroll-behavior: smooth; font-size: 16px; }
    body { font-family: var(--font-b); background: var(--white); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.6; }
    a { text-decoration: none; }

    /* ── HEADER ─────────────────────────────────────────── */
    header {
      position: sticky; top: 0; z-index: 300;
      background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 100%);
      backdrop-filter: blur(28px) saturate(1.8) brightness(1.02);
      -webkit-backdrop-filter: blur(28px) saturate(1.8) brightness(1.02);
      border-bottom: 1px solid rgba(226,236,244,.5);
      box-shadow: 0 1px 0 rgba(226,236,244,.5), 0 0 0 0.5px rgba(255,255,255,.8), 0 2px 12px rgba(7,25,46,.04), 0 4px 24px rgba(7,25,46,.03), 0 8px 32px rgba(7,25,46,.04);
      overflow: visible;
    }
    header::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: rgba(255,255,255,.95);
      pointer-events: none;
      z-index: 1;
    }
    header::after {
      content: '';
      position: absolute;
      bottom: -8px; left: 0; right: 0;
      height: 8px;
      background: linear-gradient(180deg, rgba(7,25,46,.04) 0%, transparent 100%);
      pointer-events: none;
      z-index: -1;
    }
/* NAV CSS extracted to assets/site.css — see _scripts/extract_nav_css.py */

    /* ── LAYOUT HELPERS ─────────────────────────────────── */
    .wrap { max-width: 1200px; margin: 0 auto; }
    .sec { padding: 96px 32px; }
    .sec-label{
      font-family: var(--font-b); font-size: 11px; font-weight: 700;
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--blue-dark); margin-bottom: 16px; display: inline-block;
      background: rgba(41,171,226,.08);
      border: 1px solid rgba(41,171,226,.22);
      border-radius: 100px;
      padding: 5px 14px;
    }
    .sec-h2 {
      font-family: var(--font-h); font-size: 30px;font-size: clamp(30px,4vw,52px);
      font-weight: 800; letter-spacing: -1.5px;
      color: var(--navy); line-height: 1.08; margin-bottom: 18px;
    }
    .sec-p {
      font-family: var(--font-b); font-size: 18px; color: var(--muted);
      max-width: 520px; line-height: 1.72;
    }
    .sec-head { margin-bottom: 60px; }
    .arr { transition: transform .2s var(--ease); }

    /* ── SECTION 1: HERO ────────────────────────────────── */
    .sh-hero {
      background:
        linear-gradient(180deg, rgba(234,243,252,.92) 0%, rgba(220,234,249,.88) 55%, rgba(210,226,244,.82) 100%),
        image-set(url('/generated-images/services-hub-hero.avif') type('image/avif'), url('/generated-images/services-hub-hero.webp') type('image/webp'), url('/generated-images/services-hub-hero.jpeg') type('image/jpeg')) center center / cover no-repeat;
      position: relative;
      overflow: clip;
      padding: var(--s-8) var(--s-6) var(--s-9);
      border-bottom: 2px solid rgba(41,171,226,.28);
      box-shadow: inset 0 24px 48px rgba(7,25,46,.04), 0 2px 0 rgba(255,255,255,.7);
    }
    .sh-hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 70% at 15% 10%, rgba(41,171,226,.22) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 85% 30%, rgba(249,115,22,.10) 0%, transparent 55%),
        radial-gradient(rgba(7,25,46,.05) 1px, transparent 1px);
      background-size: 100% 100%, 100% 100%, 26px 26px;
      pointer-events: none;
    }
    .sh-hero::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 120px;
      background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.65) 55%, rgba(255,255,255,.92) 100%);
      pointer-events: none;
      z-index: 0;
    }
    .sh-hero > * { position: relative; z-index: 1; }
    /* PEO/ASO decision module gets its own elevated white card to stand apart from the hero bg */
    .sh-hero .peo-aso-decide {
      position: relative;
      z-index: 2;
      background: #FFFFFF;
      border: 1px solid rgba(226,236,244,.9);
      border-radius: var(--r-lg);
      padding: var(--s-6) var(--s-5) var(--s-5);
      box-shadow:
        0 4px 12px rgba(7,25,46,.04),
        0 24px 64px rgba(7,25,46,.10),
        0 48px 96px rgba(41,171,226,.08);
      margin-top: var(--s-7) !important;
      margin-bottom: var(--s-7) !important;
    }
    .sh-hero-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: var(--s-8);
      align-items: center;
    }
    .sh-hero-left { text-align: left; }
    .sh-hero-eyebrow {
      font-family: var(--font-b);
      font-size: var(--fs-xs); font-weight: 700;
      letter-spacing: 2px; text-transform: uppercase;
      color: var(--blue-dark);
      margin-bottom: var(--s-3);
    }
    .sh-hero h1 {
      font-family: var(--font-h);
      font-size: var(--fs-3xl);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -1.5px;
      color: var(--navy);
      margin-bottom: var(--s-4);
    }
    @media (max-width: 1024px) { .sh-hero h1 { font-size: var(--fs-2xl); line-height: 1.15; } }
    @media (max-width: 640px)  { .sh-hero h1 { font-size: var(--fs-xl); } }
    .h1-accent { color: var(--blue-dark); }
    .sh-hero-sub {
      font-family: var(--font-b);
      font-size: var(--fs-base);
      font-weight: 400;
      color: var(--muted);
      line-height: 1.65;
      max-width: 560px;
      margin: 0 0 var(--s-5);
    }
    .sh-hero-ctas {
      display: flex; gap: var(--s-3);
      flex-wrap: wrap; align-items: center;
      margin-bottom: var(--s-5);
    }
    .sh-hero-chips{
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-wrap: wrap; gap: var(--s-2);
    }
    .sh-hero-chip{
      display: inline-flex; align-items: center; gap: var(--s-2);
      font-family: var(--font-b);
      font-size: var(--fs-xs); font-weight: 600;
      color: var(--navy);
      background: rgba(255,255,255,.75);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(41,171,226,.22);
      padding: var(--s-2) var(--s-3);
      border-radius: var(--r-full);
      box-shadow: 0 2px 8px rgba(7,25,46,.04);
    }
    .sh-hero-chip svg{
      width: 14px; height: 14px;
      stroke: var(--blue); fill: none;
      stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
    }

    /* ── HERO RIGHT: STACK PREVIEW CARD ─────────────────── */
    .sh-hero-right {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .sh-stack-card {
      width: 100%;
      max-width: 460px;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(20px) saturate(1.4);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      border: 1px solid rgba(226,236,244,.85);
      border-radius: var(--r-md);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.6),
        0 4px 12px rgba(7,25,46,.05),
        0 24px 64px rgba(41,171,226,.10),
        0 48px 96px rgba(7,25,46,.05);
      overflow: hidden;
      animation: shStackFloat 6s ease-in-out infinite alternate;
    }
    @keyframes shStackFloat {
      0%   { transform: translateY(0); }
      100% { transform: translateY(-6px); }
    }
    @media (prefers-reduced-motion: reduce) { .sh-stack-card { animation: none; } }

    .sh-stack-head {
      padding: var(--s-3) var(--s-4);
      border-bottom: 1px solid rgba(226,236,244,.7);
      display: flex; align-items: center; gap: var(--s-3);
      background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(247,251,255,.85));
    }
    .sh-stack-dot-row { display: flex; gap: 6px; }
    .sh-stack-dot { width: 10px; height: 10px; border-radius: var(--r-full); display: inline-block; }
    .sh-stack-dot--red    { background: #FF5F57; }
    .sh-stack-dot--amber  { background: #FEBC2E; }
    .sh-stack-dot--green  { background: #28C840; }
    .sh-stack-title {
      font-family: var(--font-h);
      font-size: var(--fs-xs);
      font-weight: 700;
      color: var(--navy);
      letter-spacing: -.1px;
    }

    .sh-stack-body { padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
    .sh-stack-row {
      display: grid;
      grid-template-columns: 36px 1fr auto;
      gap: var(--s-3);
      align-items: center;
      padding: var(--s-2) var(--s-3);
      background: rgba(247,251,255,.6);
      border: 1px solid rgba(226,236,244,.55);
      border-radius: var(--r-sm);
      transition: all .2s var(--ease);
    }
    .sh-stack-row:hover {
      background: rgba(255,255,255,.95);
      border-color: rgba(41,171,226,.32);
      transform: translateX(2px);
    }
    .sh-stack-ico {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px;
      border-radius: var(--r-sm);
    }
    .sh-stack-ico svg { width: 18px; height: 18px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .sh-stack-ico--blue   { background: rgba(41,171,226,.12); }
    .sh-stack-ico--blue   svg { stroke: var(--blue-dark); }
    .sh-stack-ico--pink   { background: rgba(236,72,153,.12); }
    .sh-stack-ico--pink   svg { stroke: #DB2777; }
    .sh-stack-ico--green  { background: rgba(34,197,94,.12); }
    .sh-stack-ico--green  svg { stroke: #16A34A; }
    .sh-stack-ico--amber  { background: rgba(245,158,11,.12); }
    .sh-stack-ico--amber  svg { stroke: #D97706; }
    .sh-stack-ico--purple { background: rgba(124,58,237,.12); }
    .sh-stack-ico--purple svg { stroke: #7C3AED; }

    .sh-stack-info { min-width: 0; }
    .sh-stack-name {
      font-family: var(--font-h);
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--navy);
      line-height: 1.2;
    }
    .sh-stack-meta {
      font-family: var(--font-b);
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }
    .sh-stack-status {
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 700;
      color: var(--blue-dark);
      background: rgba(41,171,226,.10);
      padding: 4px 8px;
      border-radius: var(--r-full);
      white-space: nowrap;
    }

    .sh-stack-foot {
      padding: var(--s-3) var(--s-4);
      border-top: 1px solid rgba(226,236,244,.7);
      display: flex; align-items: center; gap: var(--s-2);
      font-family: var(--font-b);
      font-size: var(--fs-xs);
      font-weight: 600;
      color: var(--blue-dark);
      background: rgba(247,251,255,.5);
    }
    .sh-stack-foot-dot {
      width: 6px; height: 6px;
      border-radius: var(--r-full);
      background: var(--green, #22C55E);
      box-shadow: 0 0 0 3px rgba(34,197,94,.18);
      animation: shStackPulse 2s ease-in-out infinite;
    }
    @keyframes shStackPulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50%      { transform: scale(1.15); opacity: .75; }
    }

    @media (max-width: 1024px) {
      .sh-hero-inner {
        grid-template-columns: 1fr;
        gap: var(--s-6);
        text-align: center;
      }
      .sh-hero-left { text-align: center; }
      .sh-hero-sub  { margin-left: auto; margin-right: auto; }
      .sh-hero-ctas { justify-content: center; }
      .sh-hero-ctas{ justify-content: center; }
      .sh-hero { padding: var(--s-7) var(--s-5); }
    }
    .btn-primary {
      font-family: var(--font-b); font-size: 15px; font-weight: 700;
      color: #fff; background: var(--orange);
      padding: 15px 32px; border-radius: 12px;
      text-decoration: none; border: none; cursor: pointer;
      transition: all .2s var(--ease);
      display: inline-flex; align-items: center; gap: 8px;
      box-shadow: 0 4px 14px rgba(249,115,22,.18);
    }
    .btn-primary:hover { background: #EA6C10; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249,115,22,.35); }
    .btn-ghost {
      font-family: var(--font-b); font-size: 15px; font-weight: 700;
      color: var(--text); background: var(--white);
      padding: 15px 32px; border-radius: 12px;
      text-decoration: none; border: 1px solid var(--border); cursor: pointer;
      transition: all .2s var(--ease);
      display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-ghost:hover { background: var(--off); border-color: #CBD5E1; transform: translateY(-1px); }

    /* ════════════════════════════════════════
       SERVICE NAV GRID (replaces icon strip)
    ════════════════════════════════════════ */
    .svc-nav-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      max-width: 1100px;
      margin: 0 auto;
    }
    /* ── Categorized service nav (4 sections) ── */
    .svc-nav-categorized {
      max-width: 1140px;
      margin: var(--s-7) auto 0;
      padding: 0 var(--s-5);
      display: flex;
      flex-direction: column;
      gap: var(--s-7);
    }
    .svc-cat {
      background: rgba(255,255,255,.6);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(226,236,244,.7);
      border-radius: var(--r-md);
      padding: var(--s-5) var(--s-5) var(--s-6);
      position: relative;
    }
    .svc-cat::before {
      content: '';
      position: absolute;
      top: 0; left: var(--s-5); right: var(--s-5);
      height: 3px;
      background: var(--blue);
      border-radius: 0 0 var(--r-sm) var(--r-sm);
      opacity: .8;
    }
    .svc-cat[data-cat="people-ops"]::before  { background: #8B5CF6; }
    .svc-cat[data-cat="compliance"]::before   { background:#F97316; }
    .svc-cat[data-cat="finance"]::before      { background: #10B981; }
    .svc-cat-head {
      display: flex;
      align-items: center;
      gap: var(--s-4);
      margin-bottom: var(--s-5);
      padding-bottom: var(--s-4);
      border-bottom: 1px dashed rgba(226,236,244,.9);
    }
    .svc-cat-num {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: var(--r-sm);
      background: rgba(41,171,226,.10);
      color: var(--blue-dark);
      font-family: var(--font-h);
      font-size: var(--fs-md);
      font-weight: 900;
      letter-spacing: -.5px;
    }
    .svc-cat[data-cat="people-ops"] .svc-cat-num { background: rgba(139,92,246,.10); color: #7C3AED; }
    .svc-cat[data-cat="compliance"]  .svc-cat-num { background: rgba(249,115,22,.10); color: #F97316; }
    .svc-cat[data-cat="finance"]     .svc-cat-num { background: rgba(16,185,129,.10); color: #047857; }
    .svc-cat-title {
      font-family: var(--font-h);
      font-size: var(--fs-lg);
      font-weight: 800;
      color: var(--navy);
      margin: 0 0 2px;
      letter-spacing: -.3px;
    }
    .svc-cat-sub {
      font-family: var(--font-b);
      font-size: var(--fs-sm);
      color: var(--muted);
      margin: 0;
      line-height: 1.5;
    }
    .svc-cat-grid {
      max-width: 100% !important;
      margin: 0 !important;
    }
    @media (max-width: 1024px) {
      .svc-nav-categorized { gap: var(--s-6); padding: 0 var(--s-4); }
      .svc-cat { padding: var(--s-4); }
      .svc-cat-head { margin-bottom: var(--s-4); padding-bottom: var(--s-3); gap: var(--s-3); }
      .svc-cat-num { width: 38px; height: 38px; font-size: var(--fs-sm); }
      .svc-cat-title { font-size: var(--fs-md); }
      .svc-cat-sub { font-size: var(--fs-xs); }
    }
    .svc-nav-card {
      position: relative;
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 15px 18px;
      background: rgba(255,255,255,.75);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255,255,255,.92);
      border-radius: 16px;
      text-decoration: none;
      color: inherit;
      box-shadow: 0 2px 10px rgba(7,25,46,.07), 0 1px 3px rgba(7,25,46,.04);
      transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, border-color .2s ease, background .2s ease;
      overflow: hidden;
      cursor: pointer;
    }
    .svc-nav-card::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0) 0%, var(--svc-tint, rgba(41,171,226,.05)) 100%);
      opacity: 0;
      transition: opacity .25s ease;
      pointer-events: none;
    }
    .svc-nav-card:hover {
      transform: translateY(-5px) scale(1.015);
      box-shadow: 0 14px 36px rgba(7,25,46,.13), 0 0 0 1.5px var(--svc-accent, #29ABE2);
      background: rgba(255,255,255,.94);
    }
    .svc-nav-card:hover::after { opacity: 1; }
    .svc-nav-icon {
      width: 46px; height: 46px;
      border-radius: 13px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    }
    .svc-nav-card:hover .svc-nav-icon { transform: scale(1.1) rotate(-4deg); }
    .svc-nav-icon svg { width: 20px; height: 20px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .svc-nav-body { flex: 1; min-width: 0; }
    .svc-nav-num { display: none; }
    .svc-nav-name {
      font-family: var(--font-h);
      font-size: 13px; font-weight: 700;
      color: var(--navy); display: block;
      line-height: 1.25; margin-bottom: 2px;
    }
    .svc-nav-desc {
      font-family: var(--font-b);
      font-size: 10.5px; color: var(--muted);
      display: block; line-height: 1.4;
      max-height: none;
      opacity: 0.65; transform: translateY(0);
      transition: opacity .2s ease;
    }
    .svc-nav-card:hover .svc-nav-desc {
      opacity: 1;
    }
    .svc-nav-arrow {
      flex-shrink: 0; width: 26px; height: 26px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(7,25,46,.05);
      opacity: 0; transform: translateX(-8px);
      transition: opacity .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1), background .2s ease;
    }
    .svc-nav-card:hover .svc-nav-arrow {
      opacity: 1; transform: translateX(0);
      background: var(--svc-tint, rgba(41,171,226,.12));
    }
    .svc-nav-arrow svg { width: 13px; height: 13px; fill: none; stroke: var(--svc-accent, #29ABE2); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

    @media (max-width: 1024px) {
      .svc-nav-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
      .svc-nav-card { padding: 12px 13px; gap: 10px; }
      .svc-nav-icon { width: 38px; height: 38px; border-radius: 11px; }
      .svc-nav-icon svg { width: 17px; height: 17px; }
      .svc-nav-name { font-size: 11.5px; }
      .svc-nav-desc, .svc-nav-arrow { display: none; }
    }
    @media (max-width: 480px) {
      .svc-nav-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
      .svc-nav-card { padding: 10px 10px; gap: 8px; }
      .svc-nav-num { display: none; }
      .svc-nav-name { font-size: 13px; }
    }

    /* ── SECTION 2: PEO vs ASO ──────────────────────────── */
    .sh-peo-aso { background: var(--white); }
    .peo-aso-head { text-align: center; margin-bottom: 56px; }
    .peo-aso-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 48px;
      align-items: stretch;
    }
    .peo-aso-divider { display: none; }

    /* PEO card — dark navy */
    .peo-aso-col {
      border-radius: 24px;
      padding: 48px 44px;
      position: relative;
      overflow: hidden;
      transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    }
    .peo-aso-col:hover { transform: translateY(-4px); }
    .peo-aso-col:first-child {
      background: linear-gradient(145deg, #07192E 0%, #0D2B45 100%);
      border: 1.5px solid rgba(41,171,226,.22);
      box-shadow: 0 8px 32px rgba(7,25,46,.18);
    }
    .peo-aso-col:first-child::before {
      content: '';
      position: absolute; top: -40px; right: -40px;
      width: 280px; height: 280px;
      background: radial-gradient(circle, rgba(41,171,226,.10) 0%, transparent 70%);
      pointer-events: none;
    }
    .peo-aso-col:first-child:hover {
      border-color: rgba(41,171,226,.4);
      box-shadow: 0 16px 48px rgba(7,25,46,.28), 0 0 60px rgba(41,171,226,.08);
    }
    /* ASO card — light */
    .peo-aso-col:last-child {
      background: var(--off);
      border: 1.5px solid var(--border);
      box-shadow: 0 4px 16px rgba(7,25,46,.06);
    }
    .peo-aso-col:last-child::before {
      content: '';
      position: absolute; top: -40px; right: -40px;
      width: 280px; height: 280px;
      background: radial-gradient(circle, rgba(249,115,22,.07) 0%, transparent 70%);
      pointer-events: none;
    }
    .peo-aso-col:last-child:hover {
      border-color: rgba(249,115,22,.3);
      box-shadow: 0 16px 48px rgba(7,25,46,.10);
    }

    .model-badge{
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-b); font-size: 10px; font-weight: 800;
      letter-spacing: 1.5px; text-transform: uppercase;
      padding: 6px 16px; border-radius: 8px;
      width: fit-content; margin-bottom: 20px;
    }
    .model-badge-peo{
      color: #7DD4F5; background: rgba(41,171,226,.15); border: 1px solid rgba(41,171,226,.3);
    }
    .model-badge-aso{
      color: var(--orange); background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.28);
    }
    /* PEO column text — white on dark */
    .peo-aso-col:first-child h3 {
      font-family: var(--font-h); font-size: 26px; font-weight: 800;
      color: #fff; margin-bottom: 14px; letter-spacing: -.5px;
    }
    .peo-aso-col:first-child > p {
      font-family: var(--font-b); font-size: 14.5px;
      color: rgba(255,255,255,.78); line-height: 1.72; margin-bottom: 24px;
    }
    .peo-aso-col:first-child .best-if { color: rgba(125,212,245,.9); }
    .peo-aso-col:first-child .best-if-text { color: rgba(255,255,255,.78); }
    .peo-aso-col:first-child .check-list li { color: rgba(255,255,255,.9); }
    .peo-aso-col:first-child .check-list li svg { stroke: #7DD4F5; }
    /* ASO column text — dark on light */
    .peo-aso-col:last-child h3 {
      font-family: var(--font-h); font-size: 26px; font-weight: 800;
      color: var(--navy); margin-bottom: 14px; letter-spacing: -.5px;
    }
    .peo-aso-col:last-child > p {
      font-family: var(--font-b); font-size: 14.5px;
      color: var(--muted); line-height: 1.72; margin-bottom: 24px;
    }

    .best-if {
      font-family: var(--font-b); font-size: 11px; font-weight: 700;
      letter-spacing: 1.2px; text-transform: uppercase;
      color: var(--blue-dark); margin-bottom: 8px;
    }
    .best-if-text {
      font-family: var(--font-b); font-size: 13.5px;
      color: var(--muted); line-height: 1.65; margin-bottom: 24px;
    }
    .peo-setup-note {
      font-family: var(--font-b); font-size: 12.5px;
      color: rgba(125,212,245,.75); margin: 16px 0 20px;
      font-style: italic;
    }
    .check-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
    .check-list li {
      display: flex; align-items: center; gap: 10px;
      font-family: var(--font-b); font-size: 13.5px; color: var(--text); font-weight: 500;
    }
    .check-list li svg { width: 16px; height: 16px; stroke: var(--green); fill: none; stroke-width: 2.5; flex-shrink: 0; }

    /* CTA buttons inside cards */
    .peo-aso-col {
      display: flex;
      flex-direction: column;
    }
    .peo-aso-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: auto;
      padding-top: 32px;
      font-family: var(--font-b);
      font-size: 14.5px;
      font-weight: 600;
      letter-spacing: -.1px;
      text-decoration: none;
      border-radius: 12px;
      padding: 14px 28px;
      cursor: pointer;
      width: fit-content;
      transition:
        background .25s var(--ease),
        color .25s var(--ease),
        transform .25s var(--ease),
        box-shadow .25s var(--ease),
        border-color .25s var(--ease);
    }
    .peo-aso-cta svg {
      width: 16px; height: 16px;
      stroke-width: 2.5; fill: none;
      flex-shrink: 0;
      transition: transform .25s var(--ease);
    }
    .peo-aso-cta:hover svg { transform: translateX(3px); }

    /* PEO: Primary filled CTA (white on blue gradient) */
    .peo-aso-cta--primary {
      margin-top: auto;
      background: linear-gradient(135deg, #29ABE2 0%, #1779B8 100%);
      color: #fff;
      border: 1.5px solid transparent;
      box-shadow: 0 4px 18px rgba(41,171,226,.35);
    }
    .peo-aso-cta--primary svg { stroke: #fff; }
    .peo-aso-cta--primary:hover {
      background: linear-gradient(135deg, #3BBDEE 0%, #1E8DD0 100%);
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(41,171,226,.45);
    }
    .peo-aso-cta--primary:active {
      transform: translateY(0);
      box-shadow: 0 2px 10px rgba(41,171,226,.3);
    }

    /* ASO: Ghost CTA (orange outline) */
    .peo-aso-cta--ghost {
      margin-top: auto;
      background: transparent;
      color: #F97316;
      border: 1.5px solid rgba(249,115,22,.45);
      box-shadow: none;
    }
    .peo-aso-cta--ghost svg { stroke: #F97316; }
    .peo-aso-cta--ghost:hover {
      background: rgba(249,115,22,.08);
      border-color: var(--orange);
      transform: translateY(-2px);
      box-shadow: 0 4px 18px rgba(249,115,22,.15);
    }
    .peo-aso-cta--ghost:active {
      transform: translateY(0);
      background: rgba(249,115,22,.12);
    }
    /* RECOMMENDED badge on PEO column */
    .recommended-badge {
      position: absolute; top: -1px; right: 24px;
      background: linear-gradient(135deg, #29ABE2 0%, #1779B8 100%);
      color: #fff;
      font-family: var(--font-b); font-size: 10px; font-weight: 800;
      letter-spacing: 1.5px; text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 0 0 10px 10px;
      box-shadow: 0 4px 16px rgba(41,171,226,.35);
    }

    /* Liability comparison row */
    .liability-row {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 16px; margin-top: 40px;
      max-width: 900px; margin-left: auto; margin-right: auto;
    }
    .liability-card {
      border-radius: 14px; padding: 18px 22px;
      display: flex; align-items: center; gap: 14px;
      border: 1px solid;
    }
    .liability-card--peo {
      background: rgba(41,171,226,.06);
      border-color: rgba(41,171,226,.2);
    }
    .liability-card--aso {
      background: rgba(249,115,22,.06);
      border-color: rgba(249,115,22,.2);
    }
    .liability-icon {
      width: 40px; height: 40px; border-radius: 50%;
      flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    }
    .liability-card--peo .liability-icon { background: rgba(41,171,226,.15); }
    .liability-card--aso .liability-icon { background: rgba(249,115,22,.15); }
    .liability-icon svg { width: 20px; height: 20px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .liability-card--peo .liability-icon svg { stroke: var(--blue); }
    .liability-card--aso .liability-icon svg { stroke: var(--orange); }
    .liability-label{
      font-family: var(--font-h); font-size: 14px; font-weight: 700; margin-bottom: 3px;
    }
    .h1-accent{ color: var(--blue-dark); }
    { color: #9A330A; }
    .liability-desc {
      font-family: var(--font-b); font-size: 13px; color: var(--muted); line-height: 1.5;
    }
    @media (max-width: 640px) {
      .liability-row { grid-template-columns: 1fr; }
    }

    .peo-aso-cta-row {
      text-align: center; padding-top: 16px;
    }
    .peo-aso-cta-row p {
      font-family: var(--font-b); font-size: 15px; font-weight: 500;
      color: var(--muted); margin-bottom: 16px;
    }
    .btn-blue-grad {
      font-family: var(--font-b); font-size: 14px; font-weight: 600;
      color: #fff; background: var(--grad-blue);
      padding: 14px 28px; border-radius: 10px;
      text-decoration: none; border: none; cursor: pointer;
      display: inline-flex; align-items: center; gap: 8px;
      transition: all .2s var(--ease);
      box-shadow: 0 4px 16px rgba(41,171,226,.25);
    }
    .btn-blue-grad:hover { transform: translateY(-2px); box-shadow: var(--glow-blue); }

    /* ── SECTION 3: SERVICE BENTO GRID ──────────────────── */
    .sh-services {
      background:
        linear-gradient(180deg, rgba(254,244,237,.42) 0px, rgba(255,255,255,0) 72px),
        var(--white);
    }
    .svc-hub-bento {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 20px;
    }

    /* -- Flagship cards -- */
    .svc-hub-flagship {
      grid-column: span 3;
      border-radius: 24px;
      padding: 52px 44px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 460px;
      transition: all .35s var(--ease);
    }
    .svc-hub-flagship > * { position: relative; z-index: 1; }
    .svc-hub-flagship:hover { transform: translateY(-6px); }

    /* Workers' Comp flagship */
    .svc-wc-flagship {
      background: linear-gradient(145deg, #071929 0%, #0D2B45 60%, #0E3155 100%);
      border: 1.5px solid rgba(249,115,22,.25);
      min-height: 480px;
    }
    /* Image panel — right half of card */
    .svc-wc-flagship::before {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; width: 52%;
      background: image-set(url('/generated-images/industry-construction-card.avif') type('image/avif'), url('/generated-images/industry-construction-card.webp') type('image/webp'), url('/generated-images/industry-construction-card.jpeg') type('image/jpeg')) center/cover no-repeat;
      opacity: 0.42;
      pointer-events: none;
      transition: opacity 0.4s ease;
      border-radius: 0 22px 22px 0;
    }
    /* Left-to-right fade so text stays readable */
    .svc-wc-flagship::after {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(to right, #071929 30%, rgba(7,25,46,.92) 48%, rgba(7,25,46,.55) 68%, rgba(7,25,46,.15) 100%),
        radial-gradient(ellipse 80% 60% at 5% 95%, rgba(249,115,22,.14) 0%, transparent 55%);
      pointer-events: none;
      border-radius: 22px;
    }
    .svc-hub-flagship > * { position: relative; z-index: 2; }
    .svc-wc-flagship:hover::before { opacity: 0.55; }
    .svc-wc-flagship:hover {
      border-color: rgba(249,115,22,.42);
      box-shadow: 0 24px 56px rgba(7,25,46,.35), 0 0 80px rgba(249,115,22,.14);
    }

    /* Payroll flagship */
    .svc-pay-flagship {
      background: linear-gradient(145deg, #071929 0%, #0D2B45 60%, #0E3155 100%);
      border: 1.5px solid rgba(41,171,226,.25);
    }
    .svc-pay-flagship::before {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; width: 52%;
      background: image-set(url('/generated-images/hris-hero.avif') type('image/avif'), url('/generated-images/hris-hero.webp') type('image/webp'), url('/generated-images/hris-hero.jpeg') type('image/jpeg')) center/cover no-repeat;
      opacity: 0.40;
      pointer-events: none;
      transition: opacity 0.4s ease;
      border-radius: 0 22px 22px 0;
    }
    .svc-pay-flagship::after {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(to right, #071929 30%, rgba(7,25,46,.92) 48%, rgba(7,25,46,.55) 68%, rgba(7,25,46,.15) 100%),
        radial-gradient(ellipse 80% 60% at 5% 95%, rgba(41,171,226,.12) 0%, transparent 55%);
      pointer-events: none;
      border-radius: 22px;
    }
    .svc-pay-flagship:hover::before { opacity: 0.52; }
    .svc-pay-flagship:hover {
      border-color: rgba(41,171,226,.42);
      box-shadow: 0 24px 56px rgba(7,25,46,.35), 0 0 80px rgba(41,171,226,.14);
    }

    /* Flagship shared styles */
    .flagship-eyebrow {
      display: inline-block;
      background: rgba(249,115,22,.15); color: #FB923C;
      border: 1px solid rgba(249,115,22,.25);
      font-family: var(--font-b); font-size: 10px; font-weight: 800;
      letter-spacing: 1.5px; text-transform: uppercase;
      padding: 5px 14px; border-radius: 6px;
      margin-bottom: 20px;
    }
    .flagship-eyebrow {
      font-family: var(--font-b);
      font-size: 12px; font-weight: 700;
      letter-spacing: 2px; text-transform: uppercase;
      margin-bottom: 24px; width: fit-content;
      padding: 5px 12px; border-radius: 6px;
    }
    .svc-wc-flagship .flagship-eyebrow { color: rgba(251,179,119,1); background: rgba(251,179,119,.12); }
    .svc-pay-flagship .flagship-eyebrow { color: rgba(125,212,245,1); background: rgba(125,212,245,.12); }

    .flagship-ico {
      width: 68px; height: 68px;
      border-radius: 18px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 28px;
      transition: all .25s;
    }
    .svc-wc-flagship .flagship-ico { background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.22); }
    .svc-pay-flagship .flagship-ico { background: rgba(41,171,226,.12); border: 1px solid rgba(41,171,226,.22); }
    .flagship-ico svg {
      width: 32px; height: 32px; fill: none;
      stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
    }
    .svc-wc-flagship .flagship-ico svg { stroke: #FBB377; }
    .svc-pay-flagship .flagship-ico svg { stroke: #7DD4F5; }

    .svc-hub-flagship h3 {
      font-family: var(--font-h); font-size: 30px; font-weight: 800;
      letter-spacing: -.75px; color: #fff;
      margin-bottom: 14px; line-height: 1.15;
    }
    .svc-hub-flagship > p {
      font-family: var(--font-b); font-size: 14.5px;
      color: rgba(255,255,255,.84); line-height: 1.72;
      margin-bottom: 0; flex-grow: 1;
    }
    .flagship-metrics {
      display: flex; gap: 28px;
      margin-top: auto; padding-top: 26px;
      border-top: 1px solid rgba(255,255,255,.08);
      margin-bottom: 26px;
    }
    .fm-item { display: flex; flex-direction: column; gap: 3px; }
    .fm-val {
      font-family: var(--font-h); font-size: 28px; font-weight: 800; line-height: 1.1;
    }
    .svc-wc-flagship .fm-val { color: #FBB377; }
    .svc-pay-flagship .fm-val { color: #7DD4F5; }
    .fm-label{
      font-family: var(--font-b); font-size: 11px; font-weight: 600;
      text-transform: uppercase; letter-spacing: .5px;
      color: rgba(255,255,255,.78);
    }
    .flagship-link {
      font-family: var(--font-b); font-size: 13px; font-weight: 700;
      text-decoration: none;
      display: inline-flex; align-items: center; gap: 6px;
      transition: gap .2s var(--ease);
    }
    .svc-wc-flagship .flagship-link { color: #FBB377; }
    .svc-pay-flagship .flagship-link { color: #7DD4F5; }
    .svc-hub-flagship:hover .flagship-link { gap: 10px; }

    /* -- Core & Supporting cards -- */
    .svc-hub-core {
      grid-column: span 2;
      min-height: 280px;
    }
    .svc-hub-supporting {
      grid-column: span 2;
      min-height: 240px;
    }
    .svc-hub-overflow {
      grid-column: span 4;
    }
    .svc-hub-card {
      background: linear-gradient(145deg, rgba(255,255,255,.97) 0%, rgba(247,251,255,.92) 100%);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1.5px solid rgba(226,236,244,.75);
      border-top: 4px solid var(--card-accent, var(--blue));
      border-radius: 18px;
      padding: 32px 28px;
      box-shadow: var(--glass-shadow);
      transition: all .3s var(--spring);
      display: flex; flex-direction: column;
      position: relative; overflow: hidden;
    }
    .svc-hub-supporting .svc-hub-card { padding: 28px 24px; }
    .svc-hub-card::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(145deg, var(--card-ico-bg, rgba(41,171,226,.07)) 0%, transparent 55%);
      opacity: 0;
      transition: opacity .28s var(--ease);
      pointer-events: none;
      border-radius: 18px;
    }
    .svc-hub-card:hover::before { opacity: 1; }
    .svc-hub-card:hover {
      transform: translateY(-6px) scale(1.01);
      box-shadow: var(--glass-shadow-hover), 0 0 0 1.5px var(--card-accent, var(--blue));
      border-color: var(--card-accent, var(--blue));
      border-top-color: var(--card-accent, var(--blue));
    }
    /* Per-card accents */
    .card-benefits { --card-accent: #F59E0B; --card-ico-bg: rgba(245,158,11,.09); --card-ico-stroke: #D97706; }
    .card-hr { --card-accent: #22C55E; --card-ico-bg: rgba(34,197,94,.09); --card-ico-stroke: #16A34A; }
    .card-hris { --card-accent: #29ABE2; --card-ico-bg: rgba(41,171,226,.09); --card-ico-stroke: #1779B8; }
    .card-time { --card-accent: #14B8A6; --card-ico-bg: rgba(20,184,166,.09); --card-ico-stroke: #0F766E; }
    .card-tax { --card-accent: #F59E0B; --card-ico-bg: rgba(245,158,11,.09); --card-ico-stroke: #D97706; }
    .card-recruiting { --card-accent: #8B5CF6; --card-ico-bg: rgba(139,92,246,.09); --card-ico-stroke: #7C3AED; }
    .card-training { --card-accent: #F43F5E; --card-ico-bg: rgba(244,63,94,.09); --card-ico-stroke: #E11D48; }

    .card-ico {
      width: 48px; height: 48px;
      background: var(--card-ico-bg, rgba(41,171,226,.09));
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 18px;
      box-shadow: 0 0 0 1px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.5);
      transition: transform .28s var(--ease), box-shadow .28s var(--ease);
    }
    .svc-hub-card:hover .card-ico {
      transform: scale(1.08);
      box-shadow: 0 0 0 1.5px var(--card-accent, var(--blue)), inset 0 1px 0 rgba(255,255,255,.5);
    }
    .card-ico svg {
      width: 22px; height: 22px;
      stroke: var(--card-ico-stroke, var(--blue-dark));
      fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
    .svc-hub-card h3 {
      font-family: var(--font-h); font-size: 17px; font-weight: 700;
      color: var(--navy); margin-bottom: 10px; line-height: 1.3;
    }
    .svc-hub-card > p {
      font-family: var(--font-b); font-size: 13.5px;
      color: var(--muted); line-height: 1.65;
      flex-grow: 1; margin-bottom: 16px;
    }
    .card-outcome {
      display: inline-flex; align-items: center;
      font-family: var(--font-b); font-size: 11px; font-weight: 700;
      color: var(--card-ico-stroke, #15803D);
      background: var(--card-ico-bg, rgba(34,197,94,.08));
      border: 1px solid rgba(0,0,0,.07);
      padding: 5px 11px; border-radius: 100px;
      margin-bottom: 14px; width: fit-content;
    }
    .card-link {
      font-family: var(--font-b); font-size: 13px; font-weight: 700;
      color: var(--card-accent, var(--blue-dark));
      text-decoration: none;
      display: inline-flex; align-items: center; gap: 4px;
      margin-top: auto; transition: gap .2s var(--ease);
    }
    .svc-hub-card:hover .card-link .arr { transform: translateX(5px); }

    /* ── Dark service card variant ─────────────────────── */
    .svc-hub-card--dark {
      background: linear-gradient(145deg, #07192E 0%, #0D2B45 100%);
      border: 1.5px solid rgba(41,171,226,.18);
      border-top: 4px solid var(--card-accent, var(--blue));
      color: #fff;
    }
    .svc-hub-card--dark h3 { color: #fff; }
    .svc-hub-card--dark > p { color: rgba(255,255,255,.78); }
    .svc-hub-card--dark .card-outcome {
      color: var(--card-ico-stroke, #7DD4F5);
      background: rgba(255,255,255,.07);
      border-color: rgba(255,255,255,.12);
    }
    .svc-hub-card--dark .card-link { color: var(--card-ico-stroke, #7DD4F5); }
    .svc-hub-card--dark .card-ico {
      background: rgba(255,255,255,.08);
      box-shadow: 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.12);
    }
    .svc-hub-card--dark:hover {
      border-color: var(--card-accent, var(--blue));
      box-shadow: 0 12px 36px rgba(7,25,46,.35), 0 0 40px rgba(41,171,226,.08);
    }
    .svc-hub-card--dark::before {
      background: linear-gradient(145deg, rgba(255,255,255,.04) 0%, transparent 55%);
    }

    /* Overflow card */
    .overflow-card {
      background: linear-gradient(135deg, #07192E 0%, #0D2B45 100%);
      border: 1.5px solid rgba(41,171,226,.25);
      border-radius: 18px;
      padding: 40px 44px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 32px; transition: all .28s var(--ease);
      position: relative; overflow: hidden;
    }
    .overflow-card::before {
      content: '';
      position: absolute; top: -60px; right: -60px;
      width: 240px; height: 240px;
      background: radial-gradient(circle, rgba(249,115,22,.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .overflow-card:hover {
      box-shadow: 0 16px 48px rgba(7,25,46,.25), 0 0 60px rgba(41,171,226,.08);
      border-color: rgba(41,171,226,.45);
    }
    .overflow-card h3 {
      font-family: var(--font-h); font-size: 22px; font-weight: 700;
      color: #fff; margin-bottom: 8px; position: relative; z-index: 1;
    }
    .overflow-card p {
      font-family: var(--font-b); font-size: 14px;
      color: rgba(255,255,255,.78); line-height: 1.6;
      position: relative; z-index: 1;
    }
    .overflow-card > a { flex-shrink: 0; position: relative; z-index: 1; }

    /* ── SECTION 4: HOW IT ALL CONNECTS ─────────────────── */
    .sh-connect {
      background: linear-gradient(135deg, #07192E 0%, #0B2240 55%, #0D2B45 100%);
      position: relative; overflow: hidden;
    }
    .sh-connect::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 70% at 50% 50%, rgba(41,171,226,.07) 0%, transparent 65%),
        radial-gradient(ellipse 40% 50% at 15% 80%, rgba(249,115,22,.05) 0%, transparent 50%);
      pointer-events: none;
    }
    .sh-connect .sec-label{ color: rgba(125,212,245,.9); background: rgba(41,171,226,.13); border-color: rgba(41,171,226,.34); }
    .sh-connect .sec-h2 { color: #fff; }
    .sh-connect .sec-p { color: rgba(255,255,255,.78); max-width: 560px; }
    .sh-connect .sec-head { text-align: center; margin-left: auto; margin-right: auto; }

    /* ── Hub-and-spoke diagram ─────────────────────────── */
    .flow-diagram {
      max-width: 920px; margin: 0 auto;
    }
    .spoke-grid {
      display: grid;
      grid-template-rows: auto auto auto;
      gap: 0;
      width: 100%;
      position: relative;
      margin-bottom: 48px;
    }
    /* SVG spoke lines overlay */
    .spoke-svg {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      pointer-events: none; z-index: 0;
      overflow: visible;
    }
    .spoke-row {
      display: flex; justify-content: space-around;
      padding: 0 60px; position: relative; z-index: 2;
    }
    .spoke-row--top { padding-bottom: 36px; }
    .spoke-row--bottom { padding-top: 36px; }
    .spoke-center {
      display: flex; flex-direction: column; align-items: center; gap: 12px;
      position: relative; z-index: 2;
    }
    /* Flow nodes */
    .flow-node {
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      position: relative; z-index: 2;
    }
    .flow-node-circle {
      width: 72px; height: 72px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      border: 1.5px solid;
      transition: transform .28s var(--ease), box-shadow .28s var(--ease);
      position: relative;
    }
    .flow-node-circle::after {
      content: '';
      position: absolute; inset: -6px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.06);
      pointer-events: none;
    }
    .flow-node:hover .flow-node-circle {
      transform: scale(1.12);
    }
    .flow-node-circle svg { width: 28px; height: 28px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .flow-node-label{
      font-family: var(--font-b); font-size: 12px; font-weight: 600;
      color: rgba(255,255,255,.82); text-align: center; max-width: 90px;
      line-height: 1.4;
    }
    /* Node colors */
    .fn-ta .flow-node-circle { background: rgba(20,184,166,.18); border-color: rgba(20,184,166,.45); box-shadow: 0 4px 20px rgba(20,184,166,.15); }
    .fn-ta .flow-node-circle svg { stroke: #2DD4BF; }
    .fn-ta:hover .flow-node-circle { box-shadow: 0 8px 32px rgba(20,184,166,.3); }
    .fn-pay .flow-node-circle { background: rgba(41,171,226,.18); border-color: rgba(41,171,226,.45); box-shadow: 0 4px 20px rgba(41,171,226,.15); }
    .fn-pay .flow-node-circle svg { stroke: #7DD4F5; }
    .fn-pay:hover .flow-node-circle { box-shadow: 0 8px 32px rgba(41,171,226,.3); }
    .fn-ben .flow-node-circle { background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.45); box-shadow: 0 4px 20px rgba(245,158,11,.12); }
    .fn-ben .flow-node-circle svg { stroke: #FCD34D; }
    .fn-ben:hover .flow-node-circle { box-shadow: 0 8px 32px rgba(245,158,11,.25); }
    .fn-wc .flow-node-circle { background: rgba(249,115,22,.18); border-color: rgba(249,115,22,.45); box-shadow: 0 4px 20px rgba(249,115,22,.15); }
    .fn-wc .flow-node-circle svg { stroke: #FB923C; }
    .fn-wc:hover .flow-node-circle { box-shadow: 0 8px 32px rgba(249,115,22,.3); }
    .fn-tax .flow-node-circle { background: rgba(250,204,21,.15); border-color: rgba(250,204,21,.4); box-shadow: 0 4px 20px rgba(250,204,21,.10); }
    .fn-tax .flow-node-circle svg { stroke: #FDE047; }
    .fn-tax:hover .flow-node-circle { box-shadow: 0 8px 32px rgba(250,204,21,.22); }
    .fn-cmp .flow-node-circle { background: rgba(139,92,246,.18); border-color: rgba(139,92,246,.45); box-shadow: 0 4px 20px rgba(139,92,246,.15); }
    .fn-cmp .flow-node-circle svg { stroke: #A78BFA; }
    .fn-cmp:hover .flow-node-circle { box-shadow: 0 8px 32px rgba(139,92,246,.3); }

    /* Advisor hub — center circle */
    .advisor-circle {
      width: 108px; height: 108px; border-radius: 50%;
      background: linear-gradient(135deg, rgba(41,171,226,.22) 0%, rgba(41,171,226,.08) 100%);
      border: 2px solid rgba(41,171,226,.7);
      display: flex; align-items: center; justify-content: center;
      box-shadow:
        0 0 0 10px rgba(41,171,226,.06),
        0 0 0 20px rgba(41,171,226,.03),
        0 0 40px rgba(41,171,226,.25),
        0 0 80px rgba(41,171,226,.12);
      animation: advisor-pulse 3s ease-in-out infinite;
      position: relative; z-index: 3;
    }
    @keyframes advisor-pulse {
      0%, 100% {
        box-shadow: 0 0 0 10px rgba(41,171,226,.06), 0 0 0 20px rgba(41,171,226,.03),
                    0 0 40px rgba(41,171,226,.25), 0 0 80px rgba(41,171,226,.12);
      }
      50% {
        box-shadow: 0 0 0 12px rgba(41,171,226,.09), 0 0 0 24px rgba(41,171,226,.05),
                    0 0 56px rgba(41,171,226,.38), 0 0 100px rgba(41,171,226,.18);
      }
    }
    .advisor-circle svg { width: 44px; height: 44px; stroke: #7DD4F5; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .advisor-label{
      font-family: var(--font-h); font-size: 18px; font-weight: 700; color: #fff;
      margin-top: 4px;
    }
    .advisor-sub {
      font-family: var(--font-b); font-size: 13px; color: rgba(255,255,255,.78);
      letter-spacing: .2px;
    }
    /* Spoke SVG line draw-in animation */
    .spoke-svg line {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: svgDrawIn 1.8s var(--ease) forwards;
    }
    .spoke-svg line:nth-child(1) { animation-delay: 0.5s; }
    .spoke-svg line:nth-child(2) { animation-delay: 0.75s; }
    .spoke-svg line:nth-child(3) { animation-delay: 1.0s; }
    .spoke-svg line:nth-child(4) { animation-delay: 1.25s; }
    .spoke-svg line:nth-child(5) { animation-delay: 1.5s; }
    .spoke-svg line:nth-child(6) { animation-delay: 1.75s; }

    /* Hide old flow-connector elements */
    .flow-connector, .flow-connector-animated, .flow-arrow, .flow-nodes { display: none; }
    .advisor-hub { display: none; }

    /* Proof points */
    .flow-proof {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
      border-top: 1px solid rgba(255,255,255,.08);
      padding-top: 40px;
    }
    .flow-proof-item {
      font-family: var(--font-b); font-size: 14px;
      color: rgba(255,255,255,.84); line-height: 1.65;
      text-align: center; padding: 24px 20px;
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.11);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 20px rgba(0,0,0,.18);
      transition: all .25s var(--ease);
    }
    .flow-proof-item:hover {
      background: rgba(255,255,255,.10);
      border-color: rgba(255,255,255,.20);
      transform: translateY(-3px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 28px rgba(0,0,0,.24);
    }

    /* ── SECTION 5: COMPACT PROOF ──────────────────────── */
    .sh-proof { background: var(--off); position: relative; overflow: hidden; }
    .sh-proof::before {
      content: '';
      position: absolute;
      inset: 0;
      background: image-set(url('/generated-images/section-team-success.avif') type('image/avif'), url('/generated-images/section-team-success.webp') type('image/webp'), url('/generated-images/section-team-success.jpeg') type('image/jpeg')) center center / cover no-repeat;
      opacity: 0.04;
      z-index: 0;
      pointer-events: none;
    }
    .sh-proof .wrap { position: relative; z-index: 1; }
    .sec-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, var(--border) 15%, var(--border) 85%, transparent 100%);
      margin: 0 auto;
      max-width: 1200px;
    }
    .proof-stats {
      display: flex; justify-content: space-around; gap: 40px;
      padding-bottom: 56px; margin-bottom: 56px;
      border-bottom: none;
      position: relative;
      flex-wrap: wrap;
    }
    .proof-stats::after {
      content: '';
      position: absolute;
      bottom: 0; left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 1200px;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, var(--border) 15%, var(--border) 85%, transparent 100%);
    }
    .proof-stat { text-align: center; }
    .proof-stat-n {
      font-family: var(--font-h); font-size: 48px; font-weight: 900;
      color: var(--navy); line-height: 1; letter-spacing: -2px;
      margin-bottom: 6px;
      background: linear-gradient(135deg, #1779B8 0%, #29ABE2 50%, #7DD4F5 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; background-clip: text;
    }
    .proof-stat-l {
      font-family: var(--font-b); font-size: 13px; font-weight: 600;
      text-transform: uppercase; letter-spacing: .8px;
      color: var(--muted);
    }
    .proof-stat-sub {
      font-size: 11px; letter-spacing: .3px; opacity: .7;
      text-transform: none;
    }
    .proof-stats-note {
      font-family: var(--font-b); font-size: 15px; font-style: italic;
      color: var(--muted); text-align: center;
      max-width: 560px; margin: 0 auto 48px;
      line-height: 1.6;
    }
    /* Testimonial grid */
    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    @media (max-width: 1024px) {
      .testimonial-grid { grid-template-columns: 1fr; }
    }
    /* Testimonial card */
    .proof-testimonial {
      background: var(--navy);
      border-radius: 20px;
      padding: 48px 56px;
      position: relative; overflow: hidden;
    }
    .proof-testimonial::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 55% 65% at 5% 50%, rgba(41,171,226,.10) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 95% 80%, rgba(23,121,184,.08) 0%, transparent 50%);
      pointer-events: none;
    }
    .proof-testimonial > * { position: relative; z-index: 1; }
    .pt-mark {
      font-family: Georgia, serif; font-size: 80px; line-height: .7;
      background: linear-gradient(135deg, var(--blue) 0%, var(--orange) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      opacity: .45; position: absolute; top: 32px; left: 48px;
      pointer-events: none; user-select: none;
    }
    .pt-quote {
      font-family: var(--font-b); font-size: 15px; font-weight: 400;
      color: rgba(255,255,255,.90); line-height: 1.72;
      font-style: italic; padding-top: 28px;
      margin-bottom: 28px; max-width: 700px;
    }
    .pt-author { display: flex; align-items: center; gap: 14px; }
    .pt-avatar {
      width: 48px; height: 48px; border-radius: 14px;
      background: var(--grad-blue); display: flex; align-items: center; justify-content: center;
      font-family: var(--font-h); font-size: 18px; font-weight: 800; color: #fff; flex-shrink: 0;
    }
    .pt-name { font-family: var(--font-h); font-size: 15px; font-weight: 700; color: #fff; }
    .pt-role { font-family: var(--font-b); font-size: 12.5px; color: rgba(255,255,255,.78); margin-top: 1px; }
    .pt-stars { font-size: 16px; letter-spacing: 3px; color: #F7D44C; margin-bottom: 10px; display: block; }
    .pt-headshot {
      width: 48px; height: 48px; border-radius: 14px;
      object-fit: cover; flex-shrink: 0;
    }
    .pt-metric {
      display: inline-block;
      background: rgba(41,171,226,.12);
      border: 1px solid rgba(41,171,226,.22);
      border-radius: 10px; padding: 8px 16px;
      font-family: var(--font-h); font-size: 13px; font-weight: 700;
      color: var(--blue); margin-bottom: 16px;
    }

    /* ── ADVISOR SECTION ───────────────────────────────── */
    .sh-advisor {
      background: var(--off);
      position: relative; overflow: hidden;
    }
    .sh-advisor-bg {
      position: absolute; inset: 0;
      background: image-set(url('/generated-images/section-corporate-lobby.avif') type('image/avif'), url('/generated-images/section-corporate-lobby.webp') type('image/webp'), url('/generated-images/section-corporate-lobby.jpeg') type('image/jpeg')) center/cover no-repeat;
      opacity: .04; pointer-events: none;
    }
    .sh-advisor .wrap { position: relative; z-index: 1; }
    .sh-advisor-head { text-align: center; margin-bottom: 52px; }
    .sh-advisor-head .sec-p { max-width: 600px; margin: 0 auto; }
    .advisor-preview {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 24px; max-width: 900px; margin: 0 auto 52px;
    }
    .adv-card {
      background: var(--white); border-radius: 20px;
      padding: 36px 28px; text-align: center;
      box-shadow: var(--glass-shadow); border: 1px solid var(--border);
      transition: all .3s var(--ease); position: relative; overflow: hidden;
    }
    .adv-card::before {
      content: '';
      position: absolute; top: -30px; right: -30px;
      width: 120px; height: 120px; border-radius: 50%;
      pointer-events: none; opacity: .5;
    }
    .adv-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
    }
    .adv-card--blue::before { background: radial-gradient(circle, rgba(41,171,226,.12) 0%, transparent 70%); }
    .adv-card--orange::before { background: radial-gradient(circle, rgba(249,115,22,.12) 0%, transparent 70%); }
    .adv-card--green::before { background: radial-gradient(circle, rgba(34,197,94,.12) 0%, transparent 70%); }
    .adv-card-icon {
      width: 72px; height: 72px; border-radius: 50%;
      margin: 0 auto 20px;
      display: flex; align-items: center; justify-content: center;
    }
    .adv-card--blue .adv-card-icon { background: linear-gradient(135deg, rgba(41,171,226,.18), rgba(41,171,226,.06)); border: 1px solid rgba(41,171,226,.2); }
    .adv-card--orange .adv-card-icon { background: linear-gradient(135deg, rgba(249,115,22,.18), rgba(249,115,22,.06)); border: 1px solid rgba(249,115,22,.2); }
    .adv-card--green .adv-card-icon { background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(34,197,94,.06)); border: 1px solid rgba(34,197,94,.2); }
    .adv-card-val {
      font-family: var(--font-h); font-size: 32px; font-weight: 900;
      color: var(--navy); line-height: 1; margin-bottom: 4px;
    }
    .adv-card-label{
      font-family: var(--font-b); font-size: 14px; font-weight: 600;
      color: var(--muted); margin-bottom: 14px;
    }
    .adv-card-desc {
      font-family: var(--font-b); font-size: 13px;
      color: var(--muted); line-height: 1.65;
    }
    .sh-advisor-cta { text-align: center; }
    .sh-advisor-cta .btn-primary { font-size: 17px; padding: 18px 40px; }
    .sh-advisor-note {
      font-family: var(--font-b); font-size: 13px;
      color: var(--muted); margin-top: 16px;
    }
    @media (max-width: 1024px) {
      .advisor-preview { grid-template-columns: 1fr; max-width: 400px; }
    }

    /* ── ADVISOR FEATURE CARD ───────────────────────────── */
    .advisor-feature {
      max-width: 880px;
      margin: 0 auto;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: var(--s-7);
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: var(--s-7);
      align-items: center;
      box-shadow: 0 16px 48px rgba(7,25,46,.08);
      position: relative;
    }
    .advisor-feature::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: var(--blue);
      border-radius: var(--r-md) var(--r-md) 0 0;
    }
    .advisor-feature-photo img {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: var(--r-md);
      border: 4px solid var(--white);
      box-shadow: 0 8px 24px rgba(7,25,46,.12);
    }
    .advisor-feature-eyebrow {
      display: block;
      font-family: var(--font-b);
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--blue-dark);
      margin-bottom: var(--s-2);
    }
    .advisor-feature-name {
      font-family: var(--font-h);
      font-size: var(--fs-2xl);
      font-weight: 900;
      color: var(--navy);
      margin: 0 0 var(--s-2);
      line-height: 1.1;
    }
    .advisor-feature-credentials {
      font-family: var(--font-b);
      font-size: var(--fs-sm);
      color: var(--muted);
      margin: 0 0 var(--s-4);
    }
    .advisor-feature-quote {
      font-family: var(--font-b);
      font-size: var(--fs-base);
      font-style: italic;
      color: var(--text);
      line-height: 1.6;
      border-left: 3px solid var(--blue);
      padding-left: var(--s-4);
      margin: 0 0 var(--s-5);
    }
    .advisor-feature-stats {
      display: flex;
      gap: var(--s-5);
      flex-wrap: wrap;
      margin-bottom: var(--s-5);
      font-family: var(--font-b);
      font-size: var(--fs-sm);
      color: var(--muted);
    }
    .advisor-feature-stats strong {
      color: var(--navy);
      font-weight: 800;
    }
    .advisor-feature-cta {
      display: inline-flex;
      align-items: center;
      gap: var(--s-2);
      font-family: var(--font-b);
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--white);
      background: var(--orange);
      padding: var(--s-4) var(--s-6);
      border-radius: var(--r-sm);
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(249,115,22,.18);
      transition: all .2s var(--ease);
    }
    .advisor-feature-cta:hover {
      background: #EA6C10;
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(249,115,22,.30);
    }
    @media (max-width: 1024px) {
      .advisor-feature {
        grid-template-columns: 1fr;
        text-align: center;
        padding: var(--s-5);
      }
      .advisor-feature-photo { max-width: 200px; margin: 0 auto; }
      .advisor-feature-quote { text-align: left; }
      .advisor-feature-stats { justify-content: center; }
    }

    /* ── PRICING CALCULATOR ─────────────────────────────── */
    /* ── SECTION: 3-TIER PRICING ────────────────────────── */
    .sh-tiers { background: var(--white); padding: var(--s-9) var(--s-6); }
    .sh-tiers .wrap { max-width: 1200px; margin: 0 auto; }
    .tier-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-5);
      margin-top: var(--s-6);
    }
    .tier-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: var(--s-6);
      display: flex;
      flex-direction: column;
      position: relative;
      transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    }
    .tier-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 48px rgba(7,25,46,.08);
      border-color: rgba(41,171,226,.35);
    }
    .tier-card--feature {
      border: 2px solid var(--blue);
      box-shadow: 0 24px 64px rgba(41,171,226,.12);
      transform: scale(1.02);
    }
    .tier-card--feature:hover { transform: scale(1.02) translateY(-4px); }
    .tier-badge{
      position: absolute;
      top: calc(-1 * var(--s-3));
      left: 50%;
      transform: translateX(-50%);
      background: var(--orange);
      color: var(--white);
      font-family: var(--font-b);
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
      padding: var(--s-1) var(--s-4);
      border-radius: var(--r-full);
      box-shadow: 0 4px 12px rgba(249,115,22,.25);
    }
    .tier-head {
      padding-bottom: var(--s-5);
      border-bottom: 1px solid var(--border);
      margin-bottom: var(--s-5);
    }
    .tier-name {
      font-family: var(--font-h);
      font-size: var(--fs-lg);
      font-weight: 800;
      color: var(--navy);
      margin-bottom: var(--s-2);
    }
    .tier-pitch {
      font-family: var(--font-b);
      font-size: var(--fs-sm);
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: var(--s-5);
      min-height: calc(var(--fs-sm) * 1.6 * 2);
    }
    .tier-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2); }
    .tier-from {
      font-family: var(--font-b);
      font-size: var(--fs-xs);
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 700;
    }
    .tier-amt {
      font-family: var(--font-h);
      font-size: var(--fs-3xl);
      font-weight: 900;
      color: var(--navy);
      line-height: 1;
      letter-spacing: -1.5px;
    }
    .tier-unit {
      font-family: var(--font-b);
      font-size: var(--fs-xs);
      color: var(--muted);
      width: 100%;
    }
    .tier-list {
      list-style: none;
      padding: 0;
      margin: 0 0 var(--s-6);
      flex: 1;
    }
    .tier-list li {
      font-family: var(--font-b);
      font-size: var(--fs-sm);
      color: var(--text);
      line-height: 1.5;
      display: flex;
      align-items: flex-start;
      gap: var(--s-2);
      margin-bottom: var(--s-3);
    }
    .tier-list li svg {
      width: 18px;
      height: 18px;
      stroke: var(--blue);
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
      margin-top: 3px;
    }
    .tier-list li.tier-everything {
      font-weight: 700;
      color: var(--navy);
      margin-bottom: var(--s-4);
      padding-bottom: var(--s-3);
      border-bottom: 1px dashed var(--border);
    }
    .tier-list li.tier-everything::before { content: none; }
    .tier-cta {
      font-family: var(--font-b);
      font-size: var(--fs-sm);
      font-weight: 700;
      padding: var(--s-4) var(--s-5);
      border-radius: var(--r-sm);
      text-decoration: none;
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--s-2);
      transition: all .2s var(--ease);
      border: 1px solid transparent;
    }
    .tier-cta--primary {
      background: var(--orange);
      color: var(--white);
      box-shadow: 0 4px 14px rgba(249,115,22,.18);
    }
    .tier-cta--primary:hover {
      background: #EA6C10;
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(249,115,22,.30);
    }
    .tier-cta--ghost {
      background: var(--white);
      color: var(--navy);
      border-color: var(--border);
    }
    .tier-cta--ghost:hover {
      background: var(--off);
      border-color: var(--blue);
      color: var(--blue-dark);
    }
    .tier-footnote {
      text-align: center;
      margin-top: var(--s-7);
      font-family: var(--font-b);
      font-size: var(--fs-sm);
      color: var(--muted);
    }
    .tier-footnote a { color: var(--blue-dark); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(23,121,184,.3); }
    .tier-footnote a:hover { border-bottom-color: var(--blue-dark); }

    @media (max-width: 1024px) {
      .tier-grid { grid-template-columns: 1fr; gap: var(--s-5); }
      .tier-card--feature { transform: none; }
      .tier-card--feature:hover { transform: translateY(-4px); }
      .sh-tiers { padding: var(--s-8) var(--s-5); }
    }

    /* ── SECTION: SERVICE-SELECTION QUIZ ────────────────── */
    .sh-quiz { background: var(--off); padding: var(--s-9) var(--s-6); }
    .sh-quiz .wrap { max-width: 880px; margin: 0 auto; }
    .quiz-form {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: var(--s-7);
      box-shadow: 0 4px 24px rgba(7,25,46,.05);
    }
    .quiz-step { border: 0; padding: 0; margin: 0 0 var(--s-6); }
    .quiz-step:last-of-type { margin-bottom: var(--s-5); }
    .quiz-step-label{
      font-family: var(--font-h);
      font-size: var(--fs-md);
      font-weight: 700;
      color: var(--navy);
      display: flex;
      align-items: center;
      gap: var(--s-3);
      margin-bottom: var(--s-4);
      width: 100%;
    }
    .quiz-step-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: var(--r-full);
      background: var(--blue);
      color: var(--white);
      font-family: var(--font-b);
      font-size: var(--fs-sm);
      font-weight: 800;
      flex-shrink: 0;
    }
    .quiz-options {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--s-2);
    }
    .quiz-opt {
      display: block;
      cursor: pointer;
      position: relative;
    }
    .quiz-opt input { position: absolute; opacity: 0; pointer-events: none; }
    .quiz-opt span {
      display: block;
      padding: var(--s-3) var(--s-4);
      border: 1.5px solid var(--border);
      border-radius: var(--r-sm);
      font-family: var(--font-b);
      font-size: var(--fs-sm);
      font-weight: 600;
      color: var(--text);
      background: var(--white);
      transition: all .15s var(--ease);
      text-align: center;
    }
    .quiz-opt:hover span {
      border-color: var(--blue);
      background: rgba(41,171,226,.04);
    }
    .quiz-opt input:checked + span {
      border-color: var(--blue);
      background: rgba(41,171,226,.10);
      color: var(--blue-dark);
      font-weight: 700;
      box-shadow: 0 0 0 3px rgba(41,171,226,.12);
    }
    .quiz-opt input:focus-visible + span {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }
    .quiz-submit-row { display: flex; justify-content: center; margin-top: var(--s-6); }
    .quiz-submit {
      font-family: var(--font-b);
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--white);
      background: var(--orange);
      padding: var(--s-4) var(--s-6);
      border-radius: var(--r-sm);
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: var(--s-2);
      box-shadow: 0 4px 14px rgba(249,115,22,.18);
      transition: all .2s var(--ease);
    }
    .quiz-submit:hover {
      background: #EA6C10;
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(249,115,22,.30);
    }
    .quiz-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }
    .quiz-result {
      background: var(--white);
      border: 2px solid var(--blue);
      border-radius: var(--r-md);
      padding: var(--s-7);
      margin-top: var(--s-5);
      box-shadow: 0 16px 48px rgba(41,171,226,.12);
      animation: quizFadeIn .35s var(--ease);
    }
    @keyframes quizFadeIn {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .quiz-result-header { text-align: center; margin-bottom: var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid var(--border); }
    .quiz-result-eyebrow {
      font-family: var(--font-b);
      font-size: var(--fs-xs);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--blue-dark);
      font-weight: 700;
      display: block;
      margin-bottom: var(--s-2);
    }
    .quiz-result-tier {
      font-family: var(--font-h);
      font-size: var(--fs-2xl);
      font-weight: 900;
      color: var(--navy);
      margin: 0 0 var(--s-3);
    }
    .quiz-result-why {
      font-family: var(--font-b);
      font-size: var(--fs-sm);
      color: var(--muted);
      max-width: 560px;
      margin: 0 auto;
      line-height: 1.6;
    }
    .quiz-result-services {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: var(--s-3);
      margin-bottom: var(--s-6);
    }
    .quiz-result-services a {
      display: flex;
      align-items: center;
      gap: var(--s-2);
      padding: var(--s-3) var(--s-4);
      background: var(--off);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      text-decoration: none;
      font-family: var(--font-b);
      font-size: var(--fs-sm);
      font-weight: 600;
      color: var(--navy);
      transition: all .15s var(--ease);
    }
    .quiz-result-services a:hover {
      border-color: var(--blue);
      background: rgba(41,171,226,.06);
      transform: translateX(2px);
    }
    .quiz-result-services a::before {
      content: '✓';
      color: var(--blue);
      font-weight: 800;
    }
    .quiz-result-ctas {
      display: flex;
      gap: var(--s-3);
      justify-content: center;
      flex-wrap: wrap;
    }
    .quiz-cta-primary {
      font-family: var(--font-b);
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--white);
      background: var(--orange);
      padding: var(--s-4) var(--s-6);
      border-radius: var(--r-sm);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: var(--s-2);
      box-shadow: 0 4px 14px rgba(249,115,22,.18);
      transition: all .2s var(--ease);
    }
    .quiz-cta-primary:hover { background: #EA6C10; transform: translateY(-1px); }
    .quiz-cta-ghost {
      font-family: var(--font-b);
      font-size: var(--fs-sm);
      font-weight: 600;
      color: var(--blue-dark);
      background: transparent;
      border: 1px solid var(--border);
      padding: var(--s-4) var(--s-6);
      border-radius: var(--r-sm);
      cursor: pointer;
      transition: all .15s var(--ease);
    }
    .quiz-cta-ghost:hover { background: var(--white); border-color: var(--blue); }

    @media (max-width: 1024px) {
      .sh-quiz { padding: var(--s-8) var(--s-5); }
      .quiz-form { padding: var(--s-5); }
      .quiz-options { grid-template-columns: 1fr; }
      .quiz-result { padding: var(--s-5); }
      .quiz-result-tier { font-size: var(--fs-xl); }
    }

    /* ── SECTION 5.5: FAQ ───────────────────────────────── */
    .sh-faq { background: var(--off, #F4F8FC); }
    .sh-faq-grid {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: 12px; max-width: 900px; margin: 0 auto;
    }
    @media (max-width: 1024px) { .sh-faq-grid { grid-template-columns: 1fr; } }
    .faq-item {
      background: var(--white); border-radius: 14px;
      border: 1px solid var(--border); overflow: hidden;
      transition: box-shadow .2s var(--ease);
    }
    .faq-item:hover { box-shadow: 0 4px 20px rgba(41,171,226,.1); }
    .faq-q {
      width: 100%; text-align: left; background: none; border: none;
      padding: 20px 22px; cursor: pointer;
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      font-family: var(--font-b); font-size: 15px; font-weight: 700;
      color: var(--navy); line-height: 1.4;
    }
    .faq-q svg { flex-shrink: 0; transition: transform .25s var(--ease); stroke: var(--blue); }
    .faq-item.open .faq-q svg { transform: rotate(45deg); }
    .faq-a {
      max-height: 0; overflow: hidden;
      transition: max-height .3s ease, padding .3s ease;
      font-family: var(--font-b); font-size: 14px; line-height: 1.7;
      color: var(--muted); padding: 0 22px;
    }
    .faq-item.open .faq-a { max-height: 300px; padding: 0 22px 20px; }

    /* ── SECTION 6: CTA ─────────────────────────────────── */
    .sh-cta {
      background: var(--white);
      text-align: center;
    }
    .sh-cta .sec-h2 { margin-left: auto; margin-right: auto; }
    .sh-cta-sub {
      font-family: var(--font-b); font-size: 16px;
      color: var(--muted); max-width: 480px;
      line-height: 1.65; margin: 0 auto 36px;
    }
    .sh-cta-row {
      display: flex; gap: 14px; justify-content: center;
      flex-wrap: wrap; align-items: center;
      margin-bottom: 28px;
    }
    .btn-orange-secondary {
      font-family: var(--font-b); font-size: 15px; font-weight: 700;
      color: var(--orange); background: var(--white);
      padding: 15px 32px; border-radius: 12px;
      text-decoration: none; border: 1.5px solid rgba(249,115,22,.3); cursor: pointer;
      transition: all .2s var(--ease);
      display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-orange-secondary:hover { background: rgba(249,115,22,.06); transform: translateY(-2px); box-shadow: var(--glow-orange); }
    .sh-trust-badges{
      display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
      margin-bottom: 24px;
    }
    .sh-trust-badge{
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px; border-radius: 100px;
      border: 1px solid rgba(41,171,226,.2); background: rgba(41,171,226,.05);
      font-family: var(--font-b); font-size: 12px; font-weight: 600;
      color: var(--navy); letter-spacing: .2px; white-space: nowrap;
    }
    .sh-trust-badge svg{ width: 13px; height: 13px; stroke: var(--blue); flex-shrink: 0; }
    .sh-cta-phone {
      font-family: var(--font-b); font-size: 14px; font-weight: 500;
      color: var(--muted); margin-bottom: 24px;
    }
    .sh-cta-phone a {
      color: var(--blue-dark); text-decoration: none; font-weight: 600;
    }
    .sh-cta-badges{
      display: flex; gap: 20px; justify-content: center; align-items: center;
      flex-wrap: wrap; opacity: .82; filter: grayscale(50%);
    }
    .sh-cta-badges span{
      font-family: var(--font-b); font-size: 11px; font-weight: 700;
      letter-spacing: 1px; text-transform: uppercase;
      color: var(--muted);
      padding: 6px 14px; border: 1px solid var(--border);
      border-radius: 6px;
    }

    /* ── FOOTER ──────────────────────────────────────────── */
    footer { background: #040E1A; padding: 64px 32px 32px; color: rgba(255,255,255,.72); }
    .ft { max-width: 1200px; margin: 0 auto; }
    .ft-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
    .ft-logo img { height: 36px; width: auto; display: block; margin-bottom: 14px; }
    .ft-tagline{ font-family: var(--font-b); font-size: 13.5px; color: rgba(255,255,255,.50); line-height: 1.65; margin-bottom: 20px; }
    .ft-phone {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: var(--font-b); font-size: 14.5px; font-weight: 700;
      color: var(--blue); text-decoration: none; transition: color .15s;
    }
    .ft-phone:hover { color: #7DD4F5; }
    .ft-col h3 {
      font-family: var(--font-b); font-size: 11px; font-weight: 700;
      letter-spacing: 1.4px; text-transform: uppercase;
      color: rgba(255,255,255,.70); margin-bottom: 16px;
    }
    .ft-col a {
      display: block; font-family: var(--font-b); font-size: 14px;
      color: rgba(255,255,255,.88); text-decoration: none;
      margin-bottom: 10px; transition: color .15s;
    }
    .ft-col a:hover { color: #fff; }
    .ft-bottom {
      border-top: 1px solid rgba(255,255,255,.06);
      padding-top: 28px; display: flex;
      justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 12px;
      font-family: var(--font-b); font-size: 12.5px;
    }
    .ft-legal { display: flex; gap: 20px; }
    .ft-legal a { color: rgba(255,255,255,.45); text-decoration: none; transition: color .15s; }
    .ft-legal a:hover { color: #fff; }

    /* ── SCROLL REVEAL ───────────────────────────────────── */
    .reveal {
      opacity: 0; transform: translateY(28px);
      transition: opacity .65s var(--ease), transform .65s var(--ease);
    }
    .reveal.revealed { opacity: 1; transform: translateY(0); }
    /* Hero content always visible */
    .sh-hero .reveal { opacity: 1; transform: translateY(0); }
    .reveal-d1 { transition-delay: .08s; }
    .reveal-d2 { transition-delay: .18s; }
    .reveal-d3 { transition-delay: .28s; }
    .reveal-d4 { transition-delay: .38s; }
    .reveal-d5 { transition-delay: .48s; }
    .reveal-d6 { transition-delay: .58s; }
    .reveal-d7 { transition-delay: .68s; }
    .reveal-d8 { transition-delay: .78s; }

    /* ── RESPONSIVE ──────────────────────────────────────── */
    @media (max-width: 1024px) {
      .svc-hub-bento { grid-template-columns: repeat(4, 1fr); }
      .svc-hub-flagship { grid-column: span 4; }
      .svc-hub-core, .svc-hub-supporting { grid-column: span 2; }
      .svc-hub-overflow { grid-column: span 2; }
      .flow-proof { grid-template-columns: 1fr; gap: 16px; }
    }
    @media (max-width: 1024px) {
      nav { display: none; }
      .btn-nav-ghost { display: none; }
      .ham { display: flex; }
      .mob-overlay { display: block; }
      .sec { padding: 64px 20px; }
      .sh-hero { padding: 40px 20px 36px; }
      .sh-hero-ctas { flex-direction: column; }
      .sh-hero-ctas a { width: 100%; justify-content: center; }
      .svc-icon-strip { gap: 16px; }
      .svc-icon-circle { width: 40px; height: 40px; }
      .svc-icon-circle svg { width: 18px; height: 18px; }
      .peo-aso-grid { grid-template-columns: 1fr; gap: 20px; }
      .peo-aso-col { padding: 36px 28px; }
      .peo-aso-cta { width: 100%; justify-content: center; padding: 14px 24px; }
      .svc-hub-bento { grid-template-columns: 1fr; }
      .svc-hub-flagship,
      .svc-hub-core,
      .svc-hub-supporting,
      .svc-hub-overflow { grid-column: span 1; }
      .svc-hub-flagship { min-height: 380px; padding: 36px 28px; }
      .svc-hub-flagship::before { width: 100%; opacity: 0.22; border-radius: 22px; }
      .svc-hub-card { padding: 24px 20px; }
      .overflow-card { flex-direction: column; text-align: center; padding: 32px 24px; }
      /* Spoke layout mobile: stack vertically */
      .spoke-row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 24px; padding: 0 16px; }
      .spoke-row--top { padding-bottom: 24px; }
      .spoke-row--bottom { padding-top: 24px; }
      .spoke-svg { display: none; }
      .flow-node-circle { width: 56px; height: 56px; }
      .flow-node-circle svg { width: 22px; height: 22px; }
      .advisor-circle { width: 88px; height: 88px; }
      .advisor-circle svg { width: 44px; height: 44px; }
      .flow-proof { grid-template-columns: 1fr; gap: 12px; }
      .proof-stats { flex-direction: column; align-items: center; gap: 28px; }
      .proof-testimonial { padding: 36px 28px; }
      .sh-cta-row { flex-direction: column; }
      .sh-cta-row a { width: 100%; justify-content: center; }
      .ft-top { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
    }
    @media (max-width: 480px) {
      .ft-top { grid-template-columns: 1fr; }
      .svc-icon-strip { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; padding: 0 20px; -webkit-overflow-scrolling: touch; }
      .svc-icon-strip::after {
        content: ''; flex-shrink: 0; width: 20px;
      }
      .proof-stats { gap: 20px; }
      .proof-stat-n { font-size: 36px; }
    }

    /* WP/Elementor link color overrides */
    a.btn-primary, .btn-primary { color: #fff !important; text-decoration: none !important; }
    a.btn-blue-grad, .btn-blue-grad { color: #fff !important; text-decoration: none !important; }
    a.btn-nav-primary { color: #fff !important; text-decoration: none !important; }

    /* ══════════════════════════════════════════════════════
       PREMIUM VISUAL ENHANCEMENTS
    ══════════════════════════════════════════════════════ */

    /* ── 1. Ken Burns Hero Background Image ────────────── */
    .sh-hero-bg-img {
      position: absolute; inset: 0;
      background: image-set(url('/generated-images/hero-bg-hr.avif') type('image/avif'), url('/generated-images/hero-bg-hr.webp') type('image/webp'), url('/generated-images/hero-bg-hr.jpeg') type('image/jpeg')) center center / cover no-repeat;
      animation: kenBurns 20s ease-in-out infinite alternate;
      will-change: transform; z-index: 0; opacity: 0.08;
    }
    @keyframes kenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }
    @media (prefers-reduced-motion: reduce) { .sh-hero-bg-img { animation: none; } }

    /* ── 1b. Dot-Grid Texture ──────────────────────────── */
    .sh-dot-grid-overlay {
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(41,171,226,.05) 1px, transparent 1px);
      background-size: 20px 20px;
      pointer-events: none;
      z-index: 1;
    }

    /* ── 1c. HERO: Floating Gradient Shapes ────────────── */
    .sh-hero-float {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      opacity: 0.55;
    }
    .sh-hero-float--1 {
      width: 220px; height: 220px;
      background: radial-gradient(circle, rgba(41,171,226,.18) 0%, transparent 70%);
      top: 10%; left: 8%;
      animation: floatBob 8s ease-in-out infinite alternate;
    }
    .sh-hero-float--2 {
      width: 180px; height: 180px;
      background: radial-gradient(circle, rgba(249,115,22,.14) 0%, transparent 70%);
      bottom: 12%; right: 10%;
      animation: floatBob 10s ease-in-out infinite alternate-reverse;
    }
    .sh-hero-float--3 {
      width: 140px; height: 140px;
      background: radial-gradient(circle, rgba(23,121,184,.12) 0%, transparent 70%);
      top: 55%; left: 60%;
      animation: floatBob 12s ease-in-out infinite alternate;
    }
    @keyframes floatBob {
      0% { transform: translateY(0) scale(1); }
      100% { transform: translateY(-20px) scale(1.08); }
    }

    /* ── 1d. HERO: Gradient Orb (slow-drifting) ────────── */
    .sh-hero-gradient-orb {
      position: absolute;
      width: 250px; height: 250px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(41,171,226,.12) 0%, rgba(23,121,184,.06) 40%, transparent 70%);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 0;
      animation: orbDrift 12s ease-in-out infinite alternate;
      will-change: transform;
    }
    @keyframes orbDrift {
      0% { transform: translate(-50%, -50%) translate(0, 0) scale(1); }
      50% { transform: translate(-50%, -50%) translate(30px, -20px) scale(1.06); }
      100% { transform: translate(-50%, -50%) translate(-25px, 15px) scale(0.95); }
    }

    /* ── 1e. HERO: Animated Gradient Orbs (original) ───── */
    .sh-hero-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
      z-index: 0;
      will-change: transform;
    }
    .sh-hero-orb--1 {
      width: 280px; height: 280px;
      background: radial-gradient(circle, rgba(41,171,226,.15) 0%, transparent 70%);
      top: -15%; left: -5%;
      animation: shOrbDrift1 18s ease-in-out infinite alternate;
    }
    .sh-hero-orb--2 {
      width: 220px; height: 220px;
      background: radial-gradient(circle, rgba(249,115,22,.12) 0%, transparent 70%);
      bottom: -20%; right: -3%;
      animation: shOrbDrift2 22s ease-in-out infinite alternate;
    }
    .sh-hero-orb--3 {
      width: 180px; height: 180px;
      background: radial-gradient(circle, rgba(23,121,184,.10) 0%, transparent 70%);
      top: 40%; right: 15%;
      animation: shOrbDrift3 16s ease-in-out infinite alternate;
    }
    @keyframes shOrbDrift1 {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(50px, 30px) scale(1.12); }
    }
    @keyframes shOrbDrift2 {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(-40px, -25px) scale(1.1); }
    }
    @keyframes shOrbDrift3 {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(-30px, 40px) scale(1.15); }
    }

    /* ── IMAGE DIVIDER (between hero and services) ─────── */
    .sh-image-divider {
      position: relative;
      min-height: 420px;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(7,25,46,.65) 0%, rgba(7,25,46,.45) 40%, rgba(7,25,46,.60) 70%, rgba(7,25,46,.82) 100%),
        image-set(url('/generated-images/sh-divider-team.avif') type('image/avif'), url('/generated-images/sh-divider-team.webp') type('image/webp'), url('/generated-images/sh-divider-team.jpeg') type('image/jpeg')) center center / cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--s-8) var(--s-5);
      isolation: isolate;
    }
    .sh-image-divider::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 50% 60% at 50% 50%, rgba(41,171,226,.15) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }
    .sh-image-divider-inner {
      position: relative;
      z-index: 1;
      max-width: 720px;
      text-align: center;
    }
    .sh-image-divider-eyebrow {
      display: inline-block;
      font-family: var(--font-b);
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255,255,255,.85);
      background: rgba(41,171,226,.18);
      border: 1px solid rgba(41,171,226,.38);
      padding: var(--s-2) var(--s-3);
      border-radius: var(--r-full);
      margin-bottom: var(--s-4);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .sh-image-divider-title {
      font-family: var(--font-h);
      font-size: var(--fs-2xl);
      font-weight: 900;
      color: #fff;
      line-height: 1.15;
      letter-spacing: -.5px;
      margin: 0 0 var(--s-4);
      text-shadow: 0 2px 24px rgba(0,0,0,.35);
    }
    .sh-image-divider-sub {
      font-family: var(--font-b);
      font-size: var(--fs-base);
      color: rgba(255,255,255,.88);
      line-height: 1.6;
      margin: 0;
      text-shadow: 0 1px 12px rgba(0,0,0,.4);
    }
    @media (max-width: 1024px) {
      .sh-image-divider { min-height: 340px; padding: var(--s-7) var(--s-4); }
      .sh-image-divider-title { font-size: var(--fs-xl); }
      .sh-image-divider-sub { font-size: var(--fs-sm); }
    }

    /* ── 1b. HERO: Headline — WHITE on dark photo hero (was mistakenly navy, unreadable) ── */
    .sh-hero h1 {
      color: #FFFFFF;
      -webkit-text-fill-color: #FFFFFF;
    }
    /* .hl gradient span inside H1 overrides the white fill for the accent word */
    .sh-hero h1 .hl {
      -webkit-text-fill-color: transparent;
    }

    /* ── 2. STATS: Animated Counter Gradient Text ──────── */
    .proof-stat-n.counter-animated {
      background: linear-gradient(135deg, var(--blue) 0%, var(--orange) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .fm-val.counter-animated {
      background: linear-gradient(135deg, var(--blue) 0%, var(--orange) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* ── 3. CARD HOVER: Premium Shimmer Sweep ───────────── */
    .svc-hub-card::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
      transform: translateX(-100%);
      transition: transform .65s var(--ease);
      pointer-events: none;
      z-index: 0;
    }
    .svc-hub-card:hover::after {
      transform: translateX(120%);
    }

    /* PEO/ASO columns hover */
    .peo-aso-col {
      padding: 28px;
      border-radius: 16px;
      transition: all .3s var(--ease);
      position: relative;
      overflow: hidden;
    }
    .peo-aso-col::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(110deg, transparent 30%, rgba(41,171,226,.04) 50%, transparent 70%);
      transform: translateX(-100%);
      transition: transform .6s var(--ease);
      pointer-events: none;
    }
    .peo-aso-col:hover::after {
      transform: translateX(100%);
    }
    .peo-aso-col:last-child:hover {
      background: rgba(249,115,22,.03);
      box-shadow: 0 4px 24px rgba(7,25,46,.08);
    }

    /* Overflow card shimmer */
    .overflow-card {
      position: relative;
      overflow: hidden;
    }
    .overflow-card::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(110deg, transparent 30%, rgba(41,171,226,.06) 50%, transparent 70%);
      transform: translateX(-100%);
      transition: transform .6s var(--ease);
      pointer-events: none;
    }
    .overflow-card:hover::after {
      transform: translateX(100%);
    }

    /* ── 4. TRUST BADGES: CTA Badge Marquee ────────────── */
    .sh-cta-marquee-wrap {
      overflow: hidden;
      position: relative;
      padding: 8px 0;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    }
    .sh-cta-marquee-track {
      display: flex;
      align-items: center;
      gap: 40px;
      width: max-content;
      animation: shMarquee 16s linear infinite;
    }
    .sh-cta-marquee-track span {
      font-family: var(--font-b); font-size: 11px; font-weight: 700;
      letter-spacing: 1px; text-transform: uppercase;
      color: var(--muted);
      padding: 6px 14px; border: 1px solid var(--border);
      border-radius: 6px;
      white-space: nowrap;
      flex-shrink: 0;
      filter: grayscale(100%);
      opacity: 0.6;
      transition: filter .3s, opacity .3s;
    }
    .sh-cta-marquee-track span:hover {
      filter: grayscale(0%);
      opacity: 1;
    }
    @keyframes shMarquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ── 5. CTA BUTTONS: Micro-Interactions ─────────────────
       .btn-primary shimmer now in buttons-v2.css (sitewide).
       Removed the shCtaPulse continuous animation override
       (violated "no continuous animation" rule, 2026-04-21).
       Kept .btn-blue-grad since it isn't covered by buttons-v2.css. --- */
    .btn-blue-grad {
      position: relative;
      overflow: hidden;
    }
    .btn-blue-grad::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.2) 50%, transparent 75%);
      transform: translateX(-100%);
      transition: transform .5s;
      pointer-events: none;
    }
    .btn-blue-grad:hover::after {
      transform: translateX(100%);
    }

    /* ── 6. SECTION TRANSITIONS: Wave Dividers ──────────── */
    .sh-wave-divider {
      position: relative;
      height: 64px;
      overflow: hidden;
      line-height: 0;
    }
    .sh-wave-divider svg {
      width: 100%;
      height: 100%;
      display: block;
    }


    /* ── 7. TESTIMONIAL: Enhanced ──────────────────────── */
    .proof-testimonial {
      border-left: 4px solid var(--blue);
      transition: all .35s var(--ease);
    }
    .proof-testimonial:hover {
      transform: translateY(-4px);
      box-shadow: 0 24px 64px rgba(7,25,46,.18), 0 0 0 1px rgba(41,171,226,.15);
      border-left-color: var(--orange);
    }
    .pt-mark {
      font-size: 100px;
      opacity: 0.5;
    }

    /* ── 8. FLOW DIAGRAM: Enhanced Animations ──────────── */
    .flow-connector-animated {
      position: absolute;
      top: 28px; left: 10%; right: 10%;
      height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--orange), var(--blue));
      background-size: 200% 100%;
      z-index: 1;
      transform-origin: left;
      transform: scaleX(0);
      transition: transform 1.5s var(--ease);
      animation: flowGradientShift 4s linear infinite paused;
    }
    .flow-connector-animated.animate {
      transform: scaleX(1);
      animation-play-state: running;
    }
    @keyframes flowGradientShift {
      0% { background-position: 0% 0; }
      100% { background-position: 200% 0; }
    }

    .flow-node-circle {
      transition: transform .25s var(--ease), box-shadow .25s var(--ease);
    }
    .flow-node:hover .flow-node-circle {
      box-shadow: 0 0 16px rgba(41,171,226,.25);
    }

    /* Advisor circle enhanced */
    .advisor-circle {
      transition: transform .3s var(--ease);
    }
    .advisor-circle:hover {
      transform: scale(1.08);
    }

    /* ── CONNECT SECTION: Orbs ─────────────────────────── */
    .sh-connect-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      pointer-events: none;
      z-index: 0;
    }
    .sh-connect-orb--1 {
      width: 350px; height: 350px;
      background: radial-gradient(circle, rgba(41,171,226,.10) 0%, transparent 70%);
      top: 10%; right: -5%;
      animation: shOrbDrift1 22s ease-in-out infinite alternate;
    }
    .sh-connect-orb--2 {
      width: 280px; height: 280px;
      background: radial-gradient(circle, rgba(249,115,22,.08) 0%, transparent 70%);
      bottom: 15%; left: -3%;
      animation: shOrbDrift2 18s ease-in-out infinite alternate;
    }

    /* ── FLAGSHIP CARD: Enhanced hover glow ─────────────── */
    .svc-hub-flagship {
      overflow: hidden;
    }
    .svc-hub-flagship::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.04) 50%, transparent 70%);
      transform: translateX(-100%);
      transition: transform .8s var(--ease);
      pointer-events: none;
      z-index: 0;
    }
    .svc-hub-flagship:hover::after {
      transform: translateX(100%);
    }

    /* ── SERVICE NAV GRID: stagger reveal ──────────────── */
    .svc-nav-card {
      animation: svcCardIn .5s var(--ease) both;
    }
    .svc-nav-card:nth-child(1) { animation-delay: .55s; }
    .svc-nav-card:nth-child(2) { animation-delay: .62s; }
    .svc-nav-card:nth-child(3) { animation-delay: .69s; }
    .svc-nav-card:nth-child(4) { animation-delay: .76s; }
    .svc-nav-card:nth-child(5) { animation-delay: .83s; }
    .svc-nav-card:nth-child(6) { animation-delay: .90s; }
    .svc-nav-card:nth-child(7) { animation-delay: .97s; }
    .svc-nav-card:nth-child(8) { animation-delay: 1.04s; }
    .svc-nav-card:nth-child(9) { animation-delay: 1.11s; }
    @keyframes svcCardIn {
      from { opacity: 0; transform: translateY(12px) scale(.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ── 21ST.DEV TEXT CYCLE ─────────────────────────────── */
    .hero-cycle-wrap {
      display: inline-block;
      position: relative;
      min-width: 180px;
      text-align: left;
      overflow: hidden;
      vertical-align: bottom;
    }
    .hero-cycle-word {
      display: inline-block;
      white-space: nowrap;
      background: linear-gradient(90deg, #F97316 0%, #9333EA 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-cycle-word.cycle-exit {
      animation: heroCycleOut .35s cubic-bezier(.4, 0, .2, 1) forwards;
    }
    .hero-cycle-word.cycle-enter {
      animation: heroCycleIn .45s cubic-bezier(.16, 1, .3, 1) forwards;
    }
    @keyframes heroCycleOut {
      0%   { opacity: 1; filter: blur(0px); transform: translateY(0) scale(1); }
      100% { opacity: 0; filter: blur(12px); transform: translateY(18px) scale(0.95); }
    }
    @keyframes heroCycleIn {
      0%   { opacity: 0; filter: blur(12px); transform: translateY(-18px) scale(0.95); }
      100% { opacity: 1; filter: blur(0px); transform: translateY(0) scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-cycle-word.cycle-exit,
      .hero-cycle-word.cycle-enter {
        animation: none !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
      }
    }

    /* ── Phase 3.3: Mobile shadow reduction ──────────── */
    @media (max-width: 1024px) {
      :root {
        --glass-shadow: 0 2px 8px rgba(7,25,46,.04), 0 4px 16px rgba(7,25,46,.03);
        --shadow-md: 0 2px 12px rgba(7,25,46,.06);
        --shadow-sm: 0 1px 6px rgba(7,25,46,.04);
      }
    }

    /* ── Phase 3.4: CTA button press-state ───────────── */
    .btn-primary:active,
    .btn-nav-primary:active {
      transform: scale(0.97) translateY(1px);
      transition: transform 0.1s ease;
    }

    /* ── Phase 3.6: Nav link bottom-border slide-in ──── */
    nav a { position: relative; }
    nav a::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 50%;
      width: 0; height: 2px;
      background: var(--blue);
      transition: width 0.25s ease, left 0.25s ease;
    }
    nav a:hover::after {
      width: 100%; left: 0;
    }

    /* ── Phase 3.7: Footer gradient transition ───────── */
    footer { position: relative; }
    footer::before {
      content: '';
      position: absolute;
      top: -120px; left: 0; right: 0;
      height: 120px;
      background: linear-gradient(180deg, transparent 0%, #040E1A 100%);
      pointer-events: none;
    }
  
    /* -- CALLBACK WIDGET -- */
    .callback-widget {
      position: fixed; bottom: 24px; right: 24px; z-index: 500;
    }
    .callback-trigger {
      width: 56px; height: 56px; border-radius: 50%;
      background: var(--orange);
      border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 14px rgba(249,115,22,.3);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .callback-trigger:hover {
      transform: scale(1.08);
      box-shadow: 0 6px 20px rgba(249,115,22,.4);
    }
    .callback-trigger svg { width: 24px; height: 24px; stroke: #fff; fill: none; }
    .callback-panel {
      display: none; position: absolute; bottom: 70px; right: 0;
      width: 320px; background: #fff; border-radius: 16px;
      box-shadow: 0 12px 40px rgba(7,25,46,.15);
      padding: 24px; transform-origin: bottom right;
    }
    .callback-panel.open {
      display: block;
      animation: cbSlideUp 0.3s ease forwards;
    }
    @keyframes cbSlideUp {
      from { opacity: 0; transform: translateY(10px) scale(0.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .callback-panel h3 {
      font-family: var(--font-h); font-size: 18px; font-weight: 700;
      color: var(--navy); margin-bottom: 4px;
    }
    .callback-panel p {
      font-size: 14px; color: var(--muted); margin-bottom: 16px;
    }
    .callback-panel input {
      width: 100%; padding: 12px 16px; border: 1.5px solid var(--border);
      border-radius: 10px; font-size: 15px; margin-bottom: 12px;
      font-family: var(--font-b);
    }
    .callback-panel input:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(41,171,226,.15);
      outline: none;
    }
    .callback-submit {
      width: 100%; padding: 12px; border: none; border-radius: 10px;
      background: var(--orange); color: #fff; font-weight: 600;
      font-size: 15px; cursor: pointer;
      box-shadow: 0 4px 14px rgba(249,115,22,.18);
    }
    .callback-success { text-align: center; padding: 20px 0; }
    .callback-success svg { width: 48px; height: 48px; stroke: #10B981; margin-bottom: 12px; }
    /* ── MOBILE STICKY CTA BAR ─────────────────────────── */
    .mob-sticky-cta {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0;
      z-index: 400;
      background: rgba(255,255,255,.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-top: 1px solid var(--border);
      padding: 12px 16px;
      box-shadow: 0 -4px 20px rgba(7,25,46,.08);
    }
    @media (max-width: 1024px) {
      .mob-sticky-cta { display: flex; gap: 10px; align-items: center; }
      body { padding-bottom: 72px; }
    }
    .mob-sticky-cta .mob-cta-btn {
      flex: 1; padding: 14px 20px; border-radius: 12px;
      font-family: var(--font-h); font-size: 15px; font-weight: 700;
      text-align: center; text-decoration: none;
      transition: transform 0.15s ease;
    }
    .mob-sticky-cta .mob-cta-btn:active { transform: scale(0.97); }
    .mob-sticky-cta .mob-cta-primary {
      background: var(--orange); color: #fff;
      box-shadow: 0 4px 14px rgba(249,115,22,.18);
    }
    .mob-sticky-cta .mob-cta-secondary {
      background: transparent; color: var(--navy);
      border: 1.5px solid var(--border);
    }
    @media (max-width: 1023px) {
      .svc-hub-bento { grid-template-columns: repeat(3, 1fr) !important; }
    }
    @media (max-width: 767px) {
      .svc-hub-bento { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
    }
    @media (max-width: 479px) {
      .svc-hub-bento { grid-template-columns: 1fr !important; }
    }
  /*callback-widget-mobile-hide-v1*/
@media (max-width: 767px) {
  .callback-widget { display: none !important; }
  .mob-sticky-cta { display: flex !important; }
}
/* reduced-motion-v1 */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}
/* mobile-qa-v1 */
@media (max-width: 767px) {
  .btn, button, .btn-primary, .btn-secondary, .btn-outline, .cta, [class*="btn-"], a.button, input[type="submit"], input[type="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 18px !important;
  }
  p, li, span, a, td, th, label, input, select, textarea, button, {
    font-size: max(14px, 1em) !important;
  }
  body, main, section, div, table, .container, .wrap, [class*="-wrap"], [class*="-grid"] {
    max-width: 100% !important;
  }
  img, video, iframe, svg { max-width: 100% !important; height: auto; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mob-drawer, [class*="drawer"], .nav-drawer { width: 88vw !important; max-width: 320px !important; }
  html { overflow-x: hidden !important; }
}
@media (max-width: 359px) {
  .mob-drawer, [class*="drawer"], .nav-drawer { width: 96vw !important; max-width: 100vw !important; }
}
/* scroll-margin-anchor-v2 */
[id], section[id], h1[id], h2[id], h3[id], h4[id] { scroll-margin-top: 130px; }

/* ============================================================
   SH-HERO REDESIGN 2026-04-07 — bk-hero pattern adapted to VSHR
   Overrides any earlier .sh-hero rules above (cascade-last wins)
============================================================ */
.sh-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 32px 72px;
  background:
    radial-gradient(rgba(41,171,226,.06) 1px, transparent 1px),
    radial-gradient(ellipse 75% 55% at 50% 40%, rgba(41,171,226,.10), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 40%, var(--navy-2, #0D2B45) 0%, var(--navy) 70%);
  background-size: 22px 22px, 100% 100%, 100% 100%;
}
.sh-hero .vshr-hero-bg {
  position: absolute; inset: 0;
  background: image-set(url('/generated-images/hero-services.avif') type('image/avif'), url('/generated-images/hero-services.webp') type('image/webp'), url('/generated-images/hero-services.jpeg') type('image/jpeg')) center / cover no-repeat;
  z-index: 0; opacity: .35; pointer-events: none;
}
.sh-hero .vshr-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,25,46,.55) 0%, rgba(7,25,46,.25) 45%, rgba(7,25,46,.70) 100%);
}
.sh-hero-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 64px; align-items: center;
  position: relative; z-index: 2;
}
.sh-hero-left h1 {
  font-family: var(--font-h); font-weight: 900;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.05; letter-spacing: -1.5px;
  color: #fff; margin: 18px 0 22px;
}
.sh-hero-left h1 .hl {
  background: linear-gradient(135deg, #FBBF77 0%, #F97316 38%, #29ABE2 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sh-hero .sh-hero-sub {
  font-family: var(--font-b); font-size: 1.0625rem; font-weight: 400;
  color: rgba(255,255,255,.85); line-height: 1.72;
  margin: 24px 0 28px; max-width: 560px;
}
.sh-hero .sh-hero-ctas {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin-bottom: 28px;
}
.sh-hero .btn-hero-primary, .sh-hero .btn-primary {
  font-family: var(--font-b); font-size: 15.5px; font-weight: 700;
  color: #fff; background: var(--orange);
  padding: 15px 28px; border-radius: 12px; text-decoration: none;
  transition: all .2s var(--ease); min-height: 52px;
  display: inline-flex; align-items: center; gap: 8px; border: none;
  box-shadow: 0 4px 14px rgba(249,115,22,.30);
}
.sh-hero .btn-hero-primary:hover, .sh-hero .btn-primary:hover {
  background: #EA6C10; transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(249,115,22,.45);
}
.sh-hero .btn-hero-secondary, .sh-hero .btn-secondary {
  font-family: var(--font-b); font-size: 15.5px; font-weight: 700;
  color: #fff; background: transparent;
  padding: 15px 28px; border-radius: 12px; text-decoration: none;
  transition: all .2s var(--ease); min-height: 52px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid rgba(255,255,255,.42);
}
.sh-hero .btn-hero-secondary:hover, .sh-hero .btn-secondary:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.72);
  transform: translateY(-2px);
}
.sh-hero .btn-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Right-side floating badges panel */
.sh-hero-right {
  position: relative;
  display: flex; justify-content: center; align-items: center;
}
/* SHARPENED 2026-04-07: 12px radius, no bouncy badges, dark-mode crisp */
.sh-hero-right-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 28px 24px;
  backdrop-filter: blur(20px) saturate(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);
  width: 100%; max-width: 360px;
}
.sh-hero-right-title {
  font-family: var(--font-b); font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.72); letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 18px; text-align: left;
}
.sh-badge-float{
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 13px 15px;
  margin-bottom: 10px;
  transition: border-color 140ms ease-out, background 140ms ease-out;
}
.sh-badge-float:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }
@keyframes shBadgeBob { from { transform: none; } to { transform: none; } }
.sh-badge-ico{
  width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sh-badge-ico--orange{ background: rgba(249,115,22,.22); }
.sh-badge-ico--blue{ background: rgba(41,171,226,.22); }
.sh-badge-ico--green{ background: rgba(34,197,94,.22); }
.sh-badge-ico svg{ width: 20px; height: 20px; fill: none; stroke-width: 1.9; }
.sh-badge-ico--orange svg{ stroke: #FDBA74; }
.peo-aso-col:first-child .check-list li svg{ stroke: #7DD4F5; }
.sh-badge-ico--green  svg{ stroke: #86EFAC; }
.sh-badge-text-main{
  font-family: var(--font-b); font-size: 14px; font-weight: 700;
  color: rgba(255,255,255,.94);
}
.sh-badge-text-sub{
  font-family: var(--font-b); font-size: 11.5px; font-weight: 400;
  color: rgba(255,255,255,.72); margin-top: 2px;
}

/* Kill old hero noise */
{ display: none !important; }

@media (max-width: 960px) {
  .sh-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  /* P0 fix 2026-04-15 (reality-check-v2): `order: -1` was pushing the
     "What you actually get" feature card ABOVE the H1 on mobile. The
     H1 ended up at y=766 — below the visible fold. Phone users saw
     the feature card with no headline context. Restore DOM order so
     H1 + body + CTAs render first, feature card second. */
  .sh-hero-right { max-width: 360px; margin: 0 auto; }
  .sh-hero { padding: 48px 24px 56px; }
}


/* ============================================================
   SERVICES HUB REDESIGN 2026-04-07 — sections S2..S8
============================================================ */

/* Shared section utilities */
.shr-sec { padding: 88px 32px; position: relative; }
.shr-sec--off { background: var(--off, #F4F8FC); }
.shr-sec--white { background: #FFFFFF; }
.shr-sec--navy { background: var(--navy); color: #fff; }
.shr-inner { max-width: 1180px; margin: 0 auto; }
.shr-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.shr-head .shr-eyebrow {
  display: inline-block;
  font-family: var(--font-b); font-size: 11.5px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--orange); margin-bottom: 12px;
}
.shr-head .shr-eyebrow.blue { color: var(--blue-dark, #1779B8); }
.shr-head h2 {
  font-family: var(--font-h); font-weight: 800;
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -.8px;
  color: var(--navy); margin: 0 0 14px;
}
.shr-sec--navy .shr-head h2 { color: #fff; }
.shr-head p {
  font-family: var(--font-b); font-size: 17px; line-height: 1.65;
  color: var(--muted); margin: 0;
}
.shr-sec--navy .shr-head p { color: rgba(255,255,255,.78); }

/* ─── S2: SERVICE GRID 3x3 ─── */
.shr-svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.shr-svc-tile {
  position: relative; display: flex; flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 24px;
  text-decoration: none; color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease), opacity .25s var(--ease);
  box-shadow: 0 1px 4px rgba(7,25,46,.04), 0 6px 24px rgba(7,25,46,.04);
  overflow: hidden;
}
.shr-svc-tile::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--orange); opacity: 0; transition: opacity .25s var(--ease);
  border-radius: 18px 18px 0 0;
}
.shr-svc-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(249,115,22,.35);
  box-shadow: 0 14px 30px rgba(7,25,46,.10), 0 4px 8px rgba(7,25,46,.05);
}
.shr-svc-tile:hover::before { opacity: 1; }
.shr-svc-tile .shr-svc-ico {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.shr-svc-tile .shr-svc-ico svg { width: 22px; height: 22px; fill: none; stroke-width: 1.9; }
.shr-svc-tile h3 {
  font-family: var(--font-h); font-size: 16px; font-weight: 800;
  color: var(--navy); margin: 0 0 6px; letter-spacing: -.2px;
}
.shr-svc-tile p {
  font-family: var(--font-b); font-size: 13.5px; line-height: 1.55;
  color: var(--muted); margin: 0;
}
.shr-svc-tile .shr-svc-arrow {
  position: absolute; top: 24px; right: 22px;
  width: 18px; height: 18px; opacity: .35; transition: opacity .25s, transform .25s;
}
.shr-svc-tile:hover .shr-svc-arrow { opacity: 1; transform: translateX(3px); }
.shr-svc-tile .shr-svc-arrow svg { width: 100%; height: 100%; stroke: var(--orange); fill: none; stroke-width: 2.2; }
.shr-svc-tile .shr-svc-ribbon {
  position: absolute; top: 14px; right: -38px;
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #fff; font-family: var(--font-b); font-size: 10px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 40px; transform: rotate(45deg);
  box-shadow: 0 2px 8px rgba(249,115,22,.4);
}
/* Smart bundler — paired tiles */
.shr-svc-tile.is-paired {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(249,115,22,.18), 0 14px 30px rgba(7,25,46,.10);
}
.shr-svc-tile.is-paired::before { opacity: 1; }
.shr-svc-grid.has-active .shr-svc-tile:not(.is-paired):not(.is-active) {
  opacity: .35;
}
.shr-svc-tile.is-active {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,.32), 0 14px 30px rgba(7,25,46,.12);
}
/* Service icon color variants */
.svc-ico--blue   { background: rgba(41,171,226,.12); }
.svc-ico--blue   svg { stroke: #1779B8; }
.svc-ico--orange { background: rgba(249,115,22,.12); }
.svc-ico--orange svg { stroke: #EA580C; }
.svc-ico--green  { background: rgba(34,197,94,.12); }
.svc-ico--green  svg { stroke: #16A34A; }
.svc-ico--purple { background: rgba(139,92,246,.12); }
.svc-ico--purple svg { stroke: #7C3AED; }
.svc-ico--amber  { background: rgba(245,158,11,.12); }
.svc-ico--amber  svg { stroke: #D97706; }
.svc-ico--rose   { background: rgba(244,63,94,.12); }
.svc-ico--rose   svg { stroke: #E11D48; }
.svc-ico--teal   { background: rgba(20,184,166,.12); }
.svc-ico--teal   svg { stroke: #0F766E; }
.svc-ico--navy   { background: rgba(7,25,46,.10); }
.svc-ico--navy   svg { stroke: #07192E; }
.shr-bundler-hint {
  margin-top: 22px; text-align: center;
  font-family: var(--font-b); font-size: 13px; color: var(--muted);
}
.shr-bundler-hint b { color: var(--orange); }

@media (max-width: 960px) {
  .shr-svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .shr-svc-grid { grid-template-columns: 1fr; }
}

/* ─── S3: ROLE ROUTING CARDS ─── */
.shr-role-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-bottom: 56px;
}
/* SHARPENED 2026-04-07: 10px radius, left-edge 2px accent rule, monochrome icons */
.shr-role-card {
  position: relative; padding: 28px 28px 24px 32px;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);
  backdrop-filter: blur(20px) saturate(1.05);
  border: 1px solid rgba(13,24,41,.10);
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: border-color 140ms ease-out, box-shadow 140ms ease-out, transform 140ms ease-out;
  box-shadow: 0 1px 2px rgba(13,24,41,.04), 0 6px 18px -10px rgba(13,24,41,.14);
  display: flex; flex-direction: column;
}
.shr-role-card::before {
  content: ''; position: absolute; left: 0; top: 20px; bottom: 20px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  transition: width 140ms ease-out, top 140ms ease-out, bottom 140ms ease-out;
}
.shr-role-card.role--ceo::before     { background: #EA580C; }
.shr-role-card.role--hr::before      { background: #1779B8; }
.shr-role-card.role--office::before  { background: #0D2B45; }
.shr-role-card.role--cfo::before     { background: #16A34A; }
.shr-role-card:hover {
  transform: translateY(-1px);
  border-color: rgba(13,24,41,.22);
  box-shadow: 0 1px 2px rgba(13,24,41,.05), 0 12px 28px -14px rgba(13,24,41,.22);
}
.shr-role-card:hover::before { width: 3px; top: 14px; bottom: 14px; }
.shr-role-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.shr-role-icon svg { width: 22px; height: 22px; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: #5B6B7E; transition: color 140ms ease-out; }
.shr-role-card.role--ceo:hover .shr-role-icon svg    { color: #EA580C; }
.shr-role-card.role--hr:hover .shr-role-icon svg     { color:#1366A0; }
.shr-role-card.role--office:hover .shr-role-icon svg { color: #0D2B45; }
.shr-role-card.role--cfo:hover .shr-role-icon svg    { color: #16A34A; }
.shr-role-card h3 {
  font-family: var(--font-h); font-size: 17px; font-weight: 800;
  color: var(--navy); margin: 0 0 6px; letter-spacing: -.2px;
}
.shr-role-card .role-pain {
  font-family: var(--font-b); font-size: 13px; color: var(--muted);
  font-style: italic; margin: 0 0 14px;
}
.shr-role-card ul {
  list-style: none; padding: 0; margin: 0 0 16px;
  font-family: var(--font-b); font-size: 13px; color: var(--text);
}
.shr-role-card ul li {
  padding-left: 18px; position: relative; line-height: 1.5; margin-bottom: 5px;
}
.shr-role-card ul li::before {
  content: '✓'; position: absolute; left: 0; color: var(--orange); font-weight: 800;
}
.shr-role-card .role-link {
  margin-top: auto;
  font-family: var(--font-b); font-size: 13px; font-weight: 700;
  color: var(--blue-dark, #1779B8); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.shr-role-card .role-link::after {
  content: '→'; transition: transform .2s;
}
.shr-role-card:hover .role-link::after { transform: translateX(3px); }
@media (max-width: 960px) { .shr-role-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .shr-role-grid { grid-template-columns: 1fr; } }

/* ─── S3 (cont): RELOCATED QUIZ — reskin only ─── */
.shr-quiz-wrap {
  max-width: 720px; margin: 0 auto;
  background: linear-gradient(135deg, rgba(41,171,226,.05) 0%, rgba(249,115,22,.04) 100%);
  border: 1px solid rgba(41,171,226,.18);
  border-radius: 22px;
  padding: 40px 36px;
}
.shr-quiz-head { text-align: center; margin-bottom: 28px; }
.shr-quiz-head .shr-eyebrow { color: var(--blue-dark, #1779B8); }
.shr-quiz-head h3 {
  font-family: var(--font-h); font-size: 24px; font-weight: 800; color: var(--navy);
  margin: 0 0 8px; letter-spacing: -.4px;
}
.shr-quiz-head p { font-family: var(--font-b); font-size: 14.5px; color: var(--muted); margin: 0; }

/* ─── S4: PEO/ASO + Why VSHR diff-grid ─── */
.shr-why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin-top: 56px;
}
/* SHARPENED 2026-04-07: 10px radius, left-edge 2px accent rule, monochrome icons */
.shr-why-card {
  position: relative;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);
  backdrop-filter: blur(20px) saturate(1.05);
  border: 1px solid rgba(13,24,41,.10);
  border-radius: 10px;
  padding: 32px 32px 28px 38px;
  box-shadow: 0 1px 2px rgba(13,24,41,.04), 0 6px 18px -10px rgba(13,24,41,.14);
  transition: border-color 140ms ease-out, box-shadow 140ms ease-out, transform 140ms ease-out;
}
.shr-why-card::before {
  content: ''; position: absolute; left: 0; top: 20px; bottom: 20px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  transition: width 140ms ease-out, top 140ms ease-out, bottom 140ms ease-out;
}
.shr-why-card.why--orange::before { background: #EA580C; }
.shr-why-card.why--blue::before   { background: #1779B8; }
.shr-why-card.why--green::before  { background: #16A34A; }
.shr-why-card:hover {
  transform: translateY(-1px);
  border-color: rgba(13,24,41,.22);
  box-shadow: 0 1px 2px rgba(13,24,41,.05), 0 12px 28px -14px rgba(13,24,41,.22);
}
.shr-why-card:hover::before { width: 3px; top: 14px; bottom: 14px; }
.shr-why-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: flex-start;
  margin-bottom: 16px;
}
.shr-why-icon svg { width: 26px; height: 26px; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: #5B6B7E; transition: color 140ms ease-out; }
.shr-why-card.why--orange:hover .shr-why-icon svg { color: #EA580C; }
.shr-why-card.why--blue:hover .shr-why-icon svg   { color:#1366A0; }
.shr-why-card.why--green:hover .shr-why-icon svg  { color: #16A34A; }
/* Row alignment: flex column so the stat pill bottom-anchors, and reserve
   two title lines so the body copy shares a baseline across the 3-up row
   even when one heading ("50-state coverage, U.S.-based team") wraps. */
.shr-why-card { display: flex; flex-direction: column; }
.shr-why-card h3 {
  font-family: var(--font-h); font-size: 19px; font-weight: 800;
  color: var(--navy); margin: 0 0 10px; line-height: 1.25; letter-spacing: -.3px;
  min-height: calc(1.25em * 2);
}
.shr-why-card p {
  font-family: var(--font-b); font-size: 14.5px; line-height: 1.65;
  color: var(--muted); margin: 0 0 14px;
}
.shr-why-stat {
  display: inline-block;
  font-family: var(--font-h); font-size: 12px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  margin-top: auto; align-self: flex-start;
}
.shr-why-card.why--orange .shr-why-stat { background: rgba(249,115,22,.12); color: #F97316; }
.shr-why-card.why--blue .shr-why-stat   { background: rgba(41,171,226,.12); color:#1366A0; }
.shr-why-card.why--green .shr-why-stat  { background: rgba(22,163,74,.12); color: #15803D; }
@media (max-width: 960px) { .shr-why-grid { grid-template-columns: 1fr; } }

/* ─── S5: PLATFORM + 30-DAY TIMELINE ───
   .shr-platform-mockup base + --dark modifier live in assets/site.css
   so every page can reuse it. ─── */
.shr-timeline {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  position: relative; margin-top: 24px;
}
.shr-timeline::before {
  content: ''; position: absolute; top: 28px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, #F97316 0%, #29ABE2 100%);
  opacity: .35; z-index: 0;
}
/* SHARPENED 2026-04-07: 10px radius, no glow halo on number, crisper dark glass */
.shr-timeline-step {
  position: relative; z-index: 1; text-align: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: 26px 20px 22px;
  transition: border-color 140ms ease-out, background 140ms ease-out;
}
.shr-timeline-step:hover { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.06); }
.shr-timeline-step .num {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--orange); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-h); font-weight: 800; font-size: 13px;
  margin: 0 auto 12px;
}
.shr-timeline-step h4 {
  font-family: var(--font-h); font-size: 14px; font-weight: 800;
  color: #fff; margin: 0 0 4px; letter-spacing: .3px;
}
.shr-timeline-step .when {
  font-family: var(--font-b); font-size: 11px; font-weight: 700;
  color: var(--orange); letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 8px;
}
.shr-timeline-step p {
  font-family: var(--font-b); font-size: 12.5px; line-height: 1.55;
  color: rgba(255,255,255,.7); margin: 0;
}
@media (max-width: 880px) {
  .shr-timeline { grid-template-columns: repeat(2, 1fr); }
  .shr-timeline::before { display: none; }
}
@media (max-width: 480px) {
  .shr-timeline { grid-template-columns: 1fr; }
}

/* ─── S6: TABBED SOCIAL PROOF ─── */
.shr-proof-tabs {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: 36px; flex-wrap: wrap;
}
.shr-proof-tab {
  background: #FFFFFF; border: 1px solid var(--border);
  padding: 10px 22px; border-radius: 999px;
  font-family: var(--font-b); font-size: 13px; font-weight: 700;
  color: var(--muted); cursor: pointer;
  transition: all .2s var(--ease);
}
.shr-proof-tab:hover { color: var(--navy); border-color: rgba(41,171,226,.4); }
.shr-proof-tab.is-active {
  background: var(--navy); color: #fff; border-color: var(--navy);
  box-shadow: 0 4px 14px rgba(7,25,46,.18);
}
.shr-proof-pane { display: none; }
.shr-proof-pane.is-active { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* SHARPENED 2026-04-07: 10px radius, minimal shadow, glass backdrop */
.shr-proof-quote {
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);
  backdrop-filter: blur(20px) saturate(1.05);
  border: 1px solid rgba(13,24,41,.10);
  border-radius: 10px; padding: 28px 26px;
  box-shadow: 0 1px 2px rgba(13,24,41,.04), 0 6px 18px -10px rgba(13,24,41,.14);
  display: flex; flex-direction: column;
  transition: border-color 140ms ease-out, box-shadow 140ms ease-out, transform 140ms ease-out;
}
.shr-proof-quote:hover {
  transform: translateY(-1px);
  border-color: rgba(13,24,41,.22);
  box-shadow: 0 1px 2px rgba(13,24,41,.05), 0 12px 28px -14px rgba(13,24,41,.22);
}
.shr-proof-quote .stars {
  font-size: 14px; color: #FBBF24; letter-spacing: 1px; margin-bottom: 10px;
}
.shr-proof-quote .metric {
  font-family: var(--font-h); font-size: 14px; font-weight: 800;
  color: var(--orange); margin: 0 0 12px;
}
.shr-proof-quote blockquote {
  font-family: var(--font-b); font-size: 14.5px; line-height: 1.65;
  color: var(--text); margin: 0 0 18px; flex: 1;
}
.shr-proof-quote .author {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--border);
}
.shr-proof-quote .author img {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
}
.shr-proof-quote .author .name {
  font-family: var(--font-b); font-weight: 700; color: var(--navy); font-size: 14px;
}
.shr-proof-quote .author .role {
  font-family: var(--font-b); font-size: 12px; color: var(--muted);
}
@media (max-width: 960px) { .shr-proof-pane.is-active { grid-template-columns: 1fr; } }

/* ─── S7: PRICING + canonical FAQ ─── */
.shr-faq-wrap { max-width: 820px; margin: 56px auto 0; }
.shr-faq-item {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.shr-faq-item.is-open {
  border-color: rgba(41,171,226,.4);
  box-shadow: 0 6px 20px rgba(7,25,46,.06);
}
.shr-faq-q {
  width: 100%; text-align: left; background: none; border: none;
  padding: 20px 22px;
  font-family: var(--font-h); font-size: 15.5px; font-weight: 700;
  color: var(--navy); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.shr-faq-q .chev {
  width: 22px; height: 22px; flex-shrink: 0;
  transition: transform .25s var(--ease);
}
.shr-faq-q .chev svg { width: 100%; height: 100%; stroke: var(--orange); fill: none; stroke-width: 2.5; }
.shr-faq-item.is-open .shr-faq-q .chev { transform: rotate(180deg); }
.shr-faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .35s var(--ease);
}
.shr-faq-item.is-open .shr-faq-a { max-height: 400px; }
.shr-faq-a-inner {
  padding: 0 22px 22px;
  font-family: var(--font-b); font-size: 14.5px; line-height: 1.65;
  color: var(--muted);
}

/* ─── S8: ADVISOR MATCHMAKING + FINAL CTA ─── */
.shr-advisor-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-bottom: 64px;
}
/* SHARPENED 2026-04-07: 10px radius, minimal shadow, glass backdrop */
.shr-advisor-card {
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);
  backdrop-filter: blur(20px) saturate(1.05);
  border: 1px solid rgba(13,24,41,.10);
  border-radius: 10px;
  padding: 28px 22px 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(13,24,41,.04), 0 6px 18px -10px rgba(13,24,41,.14);
  transition: border-color 140ms ease-out, box-shadow 140ms ease-out, transform 140ms ease-out;
}
.shr-advisor-card:hover {
  transform: translateY(-1px);
  border-color: rgba(13,24,41,.22);
  box-shadow: 0 1px 2px rgba(13,24,41,.05), 0 12px 28px -14px rgba(13,24,41,.22);
}
.shr-advisor-photo {
  width: 110px; height: 110px; border-radius: 50%;
  margin: 0 auto 16px; overflow: hidden;
  border: 4px solid #FFFFFF;
  box-shadow: 0 4px 14px rgba(7,25,46,.12), 0 0 0 1px rgba(41,171,226,.18);
}
.shr-advisor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shr-advisor-name {
  font-family: var(--font-h); font-size: 17px; font-weight: 800;
  color: var(--navy); margin: 0 0 4px; letter-spacing: -.2px;
}
.shr-advisor-role {
  font-family: var(--font-b); font-size: 12.5px; font-weight: 700;
  color: var(--orange); letter-spacing: .8px; text-transform: uppercase;
  margin: 0 0 10px;
}
.shr-advisor-bio {
  font-family: var(--font-b); font-size: 13px; line-height: 1.55;
  color: var(--muted); margin: 0;
}
@media (max-width: 960px) { .shr-advisor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .shr-advisor-grid { grid-template-columns: 1fr; } }

.shr-final-cta {
  text-align: center;
  background: linear-gradient(135deg, #07192E 0%, #0D2B45 100%);
  border-radius: 24px;
  padding: 56px 40px;
  position: relative; overflow: hidden;
}
.shr-final-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(249,115,22,.18), transparent 70%);
  pointer-events: none;
}
.shr-final-cta > * { position: relative; z-index: 1; }
.shr-final-cta h2 {
  font-family: var(--font-h); font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800; color: #fff; margin: 0 0 14px; letter-spacing: -.6px;
}
.shr-final-cta p {
  font-family: var(--font-b); font-size: 16px; line-height: 1.6;
  color: rgba(255,255,255,.84); max-width: 540px; margin: 0 auto 28px;
}
.shr-final-cta .btn-final {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange); color: #fff;
  font-family: var(--font-b); font-size: 16px; font-weight: 700;
  padding: 18px 36px; border-radius: 14px; text-decoration: none;
  box-shadow: 0 6px 22px rgba(249,115,22,.40);
  transition: transform .2s, box-shadow .2s;
}
.shr-final-cta .btn-final:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(249,115,22,.55);
}
.shr-final-cta .btn-final svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.shr-final-cta .btn-final--outline {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,.42);
  box-shadow: none;
}
.shr-final-cta .btn-final--outline:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.72);
}
.shr-final-cta .cta-inner {
  display: flex; justify-content: center; gap: 14px;
  flex-wrap: wrap; align-items: center;
  margin-bottom: 0;
}
.shr-final-cta-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 28px;
  margin-top: 30px;
  font-family: var(--font-b); font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,.78);
}
.shr-final-cta-trust span { display: inline-flex; align-items: center; gap: 6px; }
.shr-final-cta-trust svg { width: 14px; height: 14px; stroke: var(--orange); fill: none; stroke-width: 2.5; }

/* ─── HERO → SERVICES bridge (2026-04-07) ─── */
.hero-services-bridge {
  position: relative;
  height: 140px;
  margin-top: -100px;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(7,25,46,0) 0%,
      rgba(7,25,46,.35) 38%,
      rgba(7,25,46,.82) 72%,
      #07192E 100%);
}
.hero-services-bridge::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 90px;
  background:
    radial-gradient(ellipse 60% 120% at 50% 100%, rgba(249,115,22,.22) 0%, transparent 70%),
    radial-gradient(ellipse 80% 120% at 20% 110%, rgba(41,171,226,.16) 0%, transparent 60%),
    radial-gradient(ellipse 80% 120% at 80% 110%, rgba(232,18,92,.16) 0%, transparent 60%);
  mix-blend-mode: screen;
  opacity: .85;
}
.hero-services-bridge::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 64px;
  background: linear-gradient(180deg, transparent 0%, #FAFBFD 100%);
}
/* Pull services section tight under the bridge fade */
#services.shr-sec--white { margin-top: -1px; }

/* ─── S2 PREMIUM HEADER (2026-04-07) ─── */
#services .shr-head {
  max-width: 840px;
  margin-bottom: 60px;
  position: relative;
}
#services .shr-head .shr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px 9px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg,
    rgba(247,212,76,.14) 0%,
    rgba(249,115,22,.12) 40%,
    rgba(232,18,92,.10) 100%);
  border: 1px solid rgba(249,115,22,.32);
  color: #F97316;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  margin-bottom: 22px;
  box-shadow: 0 1px 2px rgba(13,24,41,.04), 0 6px 20px rgba(249,115,22,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#services .shr-head .shr-eyebrow::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,.22);
  flex-shrink: 0;
}
#services .shr-head h2 {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 1.02;
  letter-spacing: -1.6px;
  color: #0A1528;
  margin: 0 0 20px;
}
#services .shr-head h2 .hl {
  background: linear-gradient(135deg,
    #F7D44C 0%,
    #F07128 26%,
    #E8125C 52%,
    #7B21A2 78%,
    #1779B8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
#services .shr-head p {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(13,24,41,.72);
  max-width: 620px;
  margin: 0 auto;
}
#services .shr-head::after {
  content: '';
  display: block;
  width: 64px; height: 3px;
  margin: 32px auto 0;
  background: linear-gradient(90deg, #F7D44C 0%, #F07128 30%, #E8125C 58%, #7B21A2 100%);
  border-radius: 999px;
  opacity: .72;
}
@media (max-width: 640px) {
  #services .shr-head h2 { letter-spacing: -1.2px; }
  .hero-services-bridge { height: 110px; margin-top: -70px; }
}

/* Hide kill-list classes globally so any leftover stays invisible */
.svc-nav-categorized,
.sh-image-divider,
.sh-services,
.sh-connect,
.sh-advisor,
.sh-cta { display: none !important; }

/* §2 */
/* ══════════════════════════════════════════════════
         FLUID full-section mesh — the #services section IS
         the canvas. Gradient bleeds edge-to-edge, cards float
         on it. Soft top/bottom fades blend into the neighbor
         sections (dark hero above, off-white role-routing below).
         No contained box, no border, no border-radius.
      ══════════════════════════════════════════════════ */
      #services.shr-sec--white {
        background:
          /* Organic asymmetric mesh — orbs scattered off-axis, soft falloff */
          radial-gradient(1100px 820px at 10% 18%, rgba(247,212,76,.32) 0%, transparent 72%),  /* yellow  */
          radial-gradient(1000px 780px at 36% 56%, rgba(240,113,40,.28) 0%, transparent 72%),  /* orange  */
          radial-gradient(1200px 900px at 78% 16%, rgba(232,18,92,.26) 0%, transparent 72%),   /* magenta */
          radial-gradient(1040px 860px at 22% 88%, rgba(123,33,162,.24) 0%, transparent 74%),  /* purple  */
          radial-gradient(1240px 920px at 90% 82%, rgba(23,121,184,.30) 0%, transparent 74%),  /* blue    */
          /* Light cream-slate base */
          linear-gradient(180deg, #FAFBFD 0%, #F1F4F9 55%, #FAFBFD 100%);
        overflow: hidden;
      }
      /* Soft dot pattern — sprinkled across the full section, feathered to center */
      #services.shr-sec--white::before {
        content: '';
        position: absolute; inset: 0;
        background-image: radial-gradient(rgba(13,24,41,.055) 1px, transparent 1.5px);
        background-size: 28px 28px;
        mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, #000 0%, transparent 100%);
        -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, #000 0%, transparent 100%);
        opacity: .55;
        pointer-events: none;
        z-index: 0;
      }
      /* Grain texture — Apple/Stripe premium tell */
      #services.shr-sec--white::after {
        content: '';
        position: absolute; inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 240px 240px;
        mix-blend-mode: multiply;
        opacity: .26;
        pointer-events: none;
        z-index: 0;
      }
      /* All content inside the section sits above the decorative layers */
      #services .shr-inner { position: relative; z-index: 1; }

      /* .svch-cats-wrap — now just a layout container, no visual box */
      .svch-cats-wrap {
        position: relative;
        margin: 48px 0 0;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
      }
      .svch-cats-wrap::before,
      .svch-cats-wrap::after {
        content: none;
      }
      .svch-cats {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        max-width: 1080px;
        margin: 0 auto;
      }
      @media (max-width: 900px) {
        .svch-cats { grid-template-columns: 1fr; gap: 18px; }
      }

      /* Solid white card — crisp, premium, no sunglasses effect */
      .svch-cat {
        position: relative;
        padding: 34px 36px 28px 44px;
        border-radius: 10px;
        isolation: isolate;

        /* Solid white — no glass, no backdrop-filter, no tint bleed */
        background: #FFFFFF;

        /* Crisp thin border, dark-tinted */
        border: 1px solid rgba(13,24,41,.09);

        /* Clean two-layer drop shadow — lifts the card off the mesh */
        box-shadow:
          0 1px 2px rgba(13,24,41,.04),
          0 8px 24px -12px rgba(13,24,41,.18),
          0 16px 40px -20px rgba(13,24,41,.12);

        transition:
          border-color 180ms ease-out,
          box-shadow 180ms ease-out,
          transform 180ms ease-out;
        overflow: hidden;
      }

      /* Subtle corner glow — gives the card material presence without candy */
      .svch-cat::after {
        content: '';
        position: absolute;
        top: -80px; left: -80px;
        width: 280px; height: 280px;
        background: radial-gradient(circle, rgba(var(--cat-rgb), .12) 0%, transparent 65%);
        pointer-events: none;
        z-index: 0;
        opacity: .55;
        transition: opacity 180ms ease-out;
      }
      .svch-cat:hover::after { opacity: 1; }

      /* Large category icon watermark — replaces ghost number, ties corner to category meaning */
      .svch-cat-ghost {
        position: absolute;
        top: 22px; right: 24px;
        width: 68px;
        height: 68px;
        color: var(--cat-color);
        opacity: .14;
        pointer-events: none;
        user-select: none;
        z-index: 0;
        transition: opacity 240ms ease-out, transform 240ms ease-out;
      }
      .svch-cat-ghost svg {
        width: 100%; height: 100%;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.4;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .svch-cat:hover .svch-cat-ghost {
        opacity: .22;
        transform: scale(1.05) rotate(-2deg);
      }
      @media (max-width: 720px) {
        .svch-cat-ghost { width: 52px; height: 52px; top: 18px; right: 18px; }
      }

      /* Make content layer above decorative stuff */
      .svch-cat > *:not(.svch-cat-ghost) { position: relative; z-index: 1; }

      /* Per-category RGB triplet for glow + any rgba() use */
      .svch-cat--01 { --cat-rgb: 23,121,184; }
      .svch-cat--02 { --cat-rgb: 123,33,162; }
      .svch-cat--03 { --cat-rgb: 232,18,92; }
      .svch-cat--04 { --cat-rgb: 16,185,129; }

      /* The signature: a 2px left-edge accent rule in category color */
      .svch-cat::before {
        content: '';
        position: absolute;
        left: 0; top: 20px; bottom: 20px;
        width: 3px;
        background: linear-gradient(
          180deg,
          transparent 0%,
          var(--cat-color, #1779B8) 15%,
          var(--cat-color, #1779B8) 85%,
          transparent 100%
        );
        border-radius: 0 3px 3px 0;
        transition: width 180ms ease-out, top 180ms ease-out, bottom 180ms ease-out;
        z-index: 2;
      }

      .svch-cat:hover {
        border-color: rgba(var(--cat-rgb), .42);
        transform: translateY(-2px);
        box-shadow:
          0 1px 2px rgba(13,24,41,.05),
          0 14px 32px -14px rgba(var(--cat-rgb), .22),
          0 18px 36px -18px rgba(13,24,41,.18);
      }
      .svch-cat:hover::before {
        width: 4px;
        top: 10px;
        bottom: 10px;
      }

      /* Category meta: small monospace-style label */
      .svch-cat-meta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-b);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--cat-color);
        margin-bottom: 10px;
      }
      .svch-cat-meta::after {
        content: '';
        width: 28px;
        height: 1px;
        background: currentColor;
        opacity: .4;
      }

      .svch-cat-title {
        font-family: var(--font-h);
        font-size: 32px;
        font-weight: 800;
        letter-spacing: -.028em;
        color: #0D1829;
        line-height: 1.05;
        margin: 0 0 12px;
      }

      .svch-cat-tag{
        font-family: var(--font-b);
        font-size: 13.5px;
        font-weight: 500;
        color: #5B6B7E;
        line-height: 1.55;
        margin: 0 0 22px;
        max-width: 44ch;
        /* Reserve 3 lines so the service-list divider starts at the same
           height in both columns (longest blurb wraps to 3 lines). */
        min-height: calc(1.55em * 3);
      }

      /* Hairline divider above the service list */
      .svch-cat-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-top: 18px;
        border-top: 1px solid rgba(13,24,41,.06);
        margin-bottom: 18px;
      }

      .svch-cat-row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 8px 10px 0;
        text-decoration: none;
        color: inherit;
        border-radius: 6px;
        transition: background 120ms ease-out, padding 120ms ease-out;
      }
      .svch-cat-row:hover {
        background: rgba(13,24,41,.03);
        padding-left: 8px;
      }
      /* Right-aligned chevron — makes link affordance unambiguous (Linear/Vercel/Stripe pattern) */
      .svch-cat-row-arrow {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px; height: 24px;
        color: #94A3B8;
        opacity: .55;
        flex-shrink: 0;
        transition: opacity 140ms ease-out, color 140ms ease-out, transform 140ms ease-out;
      }
      .svch-cat-row-arrow svg {
        width: 16px; height: 16px;
        fill: none; stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .svch-cat-row:hover .svch-cat-row-arrow {
        opacity: 1;
        color: var(--cat-color);
        transform: translateX(4px);
      }
      .svch-cat-row-ico {
        width: 22px; height: 22px;
        color: #5B6B7E;
        flex-shrink: 0;
        transition: color 120ms ease-out;
      }
      .svch-cat-row:hover .svch-cat-row-ico { color: var(--cat-color); }
      .svch-cat-row-ico svg {
        width: 22px; height: 22px;
        fill: none; stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .svch-cat-row-text {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
      }
      .svch-cat-row-name-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      .svch-row-badge{
        display: inline-flex;
        align-items: center;
        font-family: var(--font-b);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--cat-color);
        background: rgba(var(--cat-rgb), .10);
        border: 1px solid rgba(var(--cat-rgb), .22);
        padding: 2px 7px;
        border-radius: 4px;
        line-height: 1.4;
      }
      .svch-cat-row-name {
        font-family: var(--font-b);
        font-size: 14.5px;
        font-weight: 600;
        color: #0D1829;
        line-height: 1.25;
      }
      .svch-cat-row-desc {
        font-family: var(--font-b);
        font-size: 12.5px;
        font-weight: 500;
        color: #64748B;
        line-height: 1.35;
      }
      .svch-cat-more {
        font-family: var(--font-b);
        font-size: 11.5px;
        font-weight: 500;
        color: #64748B;
        padding: 6px 0 0 22px;
        font-style: normal;
        letter-spacing: .01em;
      }

      /* Footer CTA link */
      .svch-cat-cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-b);
        font-size: 13px;
        font-weight: 700;
        color: var(--cat-color);
        text-decoration: none;
        padding-top: 16px;
        border-top: 1px solid rgba(13,24,41,.06);
        letter-spacing: .01em;
      }
      .svch-cat-cta svg {
        width: 14px; height: 14px;
        fill: none; stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 140ms ease-out;
      }
      .svch-cat-cta:hover svg { transform: translateX(3px); }

      /* Per-category color tokens — same as the index.html insurance module + nav dropdown */
      .svch-cat--01 { --cat-color:#1366A0; } /* Brand blue    */
      .svch-cat--02 { --cat-color: #7B21A2; } /* Violet        */
      .svch-cat--03 { --cat-color: #E8125C; } /* Magenta       */
      .svch-cat--04 { --cat-color: #10B981; } /* Emerald       */

      @media (max-width: 720px) {
        .svch-cat { padding: 26px 22px 22px 30px; }
        .svch-cat-title { font-size: 22px; }
      }
      @media (prefers-reduced-motion: reduce) {
        .svch-cat, .svch-cat::before, .svch-cat-row, .svch-cat-cta svg {
          transition: none !important;
        }
      }

/* §3 */
/* PEO/ASO decision cards — golden card style (solid white + hairline + left-edge accent) */
  #peo-aso .peo-aso-decide {
    max-width: 1080px;
    margin: 48px auto 0;
  }
  #peo-aso .pad-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  @media (max-width: 900px) {
    #peo-aso .pad-grid { grid-template-columns: 1fr; gap: 18px; }
  }
  #peo-aso .pad-card {
    position: relative;
    padding: 32px 34px 30px 42px;
    background: #FFFFFF;
    border: 1px solid rgba(13,24,41,.09);
    border-radius: 10px;
    box-shadow:
      0 1px 2px rgba(13,24,41,.04),
      0 8px 24px -12px rgba(13,24,41,.18),
      0 16px 40px -20px rgba(13,24,41,.12);
    transition:
      border-color 180ms ease-out,
      box-shadow 180ms ease-out,
      transform 180ms ease-out;
    overflow: hidden;
    isolation: isolate;
  }
  /* Left-edge brand accent rule */
  #peo-aso .pad-card::before {
    content: '';
    position: absolute;
    left: 0; top: 20px; bottom: 20px;
    width: 3px;
    background: linear-gradient(
      180deg,
      transparent 0%,
      var(--pad-color, #1779B8) 15%,
      var(--pad-color, #1779B8) 85%,
      transparent 100%
    );
    border-radius: 0 3px 3px 0;
    transition: width 180ms ease-out, top 180ms ease-out, bottom 180ms ease-out;
    z-index: 2;
  }
  /* Corner glow — same material presence treatment as .svch-cat */
  #peo-aso .pad-card::after {
    content: '';
    position: absolute;
    top: -80px; left: -80px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(var(--pad-rgb), .12) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    opacity: .55;
    transition: opacity 180ms ease-out;
  }
  #peo-aso .pad-card:hover {
    border-color: rgba(var(--pad-rgb), .42);
    transform: translateY(-2px);
    box-shadow:
      0 1px 2px rgba(13,24,41,.05),
      0 14px 32px -14px rgba(var(--pad-rgb), .22),
      0 18px 36px -18px rgba(13,24,41,.18);
  }
  #peo-aso .pad-card:hover::before { width: 4px; top: 10px; bottom: 10px; }
  #peo-aso .pad-card:hover::after { opacity: 1; }
  #peo-aso .pad-card > * { position: relative; z-index: 1; }

  /* Per-variant color tokens */
  #peo-aso .pad-card.peo { --pad-color:#1366A0; --pad-rgb: 23,121,184; }  /* brand blue */
  #peo-aso .pad-card.aso { --pad-color: #7B21A2; --pad-rgb: 123,33,162; }  /* violet */

  #peo-aso {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-b);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pad-color);
    background: rgba(var(--pad-rgb), .10);
    border: 1px solid rgba(var(--pad-rgb), .22);
    padding: 4px 10px;
    border-radius: 4px;
    line-height: 1.4;
    margin-bottom: 14px;
  }
  #peo-aso .pad-card-h {
    font-family: var(--font-h);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #0D1829;
    line-height: 1.15;
    margin: 0 0 12px;
  }
  #peo-aso .pad-card-p {
    font-family: var(--font-b);
    font-size: 14.5px;
    font-weight: 500;
    color: #5B6B7E;
    line-height: 1.6;
    margin: 0 0 18px;
  }
  #peo-aso .pad-card-fit {
    font-family: var(--font-b);
    font-size: 13px;
    font-weight: 600;
    color: var(--pad-color);
    padding-top: 16px;
    border-top: 1px solid rgba(13,24,41,.06);
    letter-spacing: .005em;
  }
  #peo-aso .pad-help {
    text-align: center;
    margin: 24px 0 0;
    font-family: var(--font-b);
    font-size: 14px;
    color: #64748B;
  }
  #peo-aso .pad-help a {
    color: #7B21A2;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(123,33,162,.3);
    transition: border-color 140ms ease-out;
  }
  #peo-aso .pad-help a:hover { border-bottom-color: #7B21A2; }

  @media (max-width: 720px) {
    #peo-aso .pad-card { padding: 26px 22px 24px 30px; }
    #peo-aso .pad-card-h { font-size: 20px; }
  }
  @media (prefers-reduced-motion: reduce) {
    #peo-aso .pad-card, #peo-aso .pad-card::before { transition: none !important; }
  }

/* §4 */
@media (max-width: 1024px) {
  .cb-fab, .callback-trigger { bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; }
  .cb-panel, .callback-panel { bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important; width: min(320px, 90vw) !important; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .mob-sticky-cta { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ============================================================
   PAGE-LOCAL MOBILE FIXES — 390px viewport (iPhone 14 Pro)
   Source: mobile-boil-the-lake/page-briefs/services.json
   All rules scoped to max-width: 767.98px so desktop is untouched.
============================================================ */
@media (max-width: 767.98px) {

  /* ── Hero secondary button: 15px → 16px ─────────────── */
  .sh-hero .btn-secondary,
  .sh-hero .btn-hero-secondary {
    font-size: 16px;
  }

  /* ── Role-card body list items: 13px → 16px ─────────── */
  /* Brief: li:nth-of-type(1..14) at 13px — these are .shr-role-card ul li */
  .shr-role-card ul li {
    font-size: 16px;
  }

  /* ── Role-card pain quote and link: 13px → 16px ─────── */
  .shr-role-card .role-pain {
    font-size: 16px;
  }
  .shr-role-card .role-link {
    font-size: 16px;
  }

  /* ── Service-category row names: 14.5px → 16px ──────── */
  /* Brief: span.svch-cat-row-name at 14.5px */
  .svch-cat-row-name {
    font-size: 16px;
  }

  /* ── Service-category row descriptions: 12.5px → 14px ─ */
  /* Brief: span.svch-cat-row-desc at 12.5px — description text, floor at 14px (data-adjacent) */
  .svch-cat-row-desc {
    font-size: 14px;
  }

  /* ── Service-category "more" note: 11.5px → 14px ────── */
  /* Brief: p.svch-cat-more at 11.5px — non-uppercase body note */
  .svch-cat-more {
    font-size: 14px;
  }

  /* ── PEO/ASO card body text: 14.5px → 16px ─────────── */
  /* Brief: p.pad-card-p at 14.5px */
  #peo-aso .pad-card-p {
    font-size: 16px;
  }

  /* ── Quiz option labels: 15px → 16px ────────────────── */
  /* Brief: span (inside .quiz-opt) at 15px */
  .quiz-opt span {
    font-size: 16px;
  }

  /* ── Quiz submit, result CTAs: 15px → 16px ──────────── */
  /* Brief: button.quiz-submit, a.quiz-cta-primary, #quizRetake at 15px */
  .quiz-submit,
  .quiz-cta-primary,
  #quizRetake {
    font-size: 16px;
  }

  /* ── Quiz result services grid: collapse to 1 column ── */
  /* Brief: #quizServices repeat(auto-fit, minmax(180px, 1fr)) — at 390px
     this can produce 2 narrow columns. Force single column. */
  .quiz-result-services {
    grid-template-columns: minmax(0, 1fr);
  }
}