/* ═══════════════════════════════════════════════════════════════════════════
   wc-page.css — WC template page-specific styles
   Phase 4 extraction 2026-04-17. Aggregates 3 inline <style> blocks that were
   embedded in template-workers-comp.blade.php into a single browser-cacheable
   stylesheet. Zero Blade interpolation, safe for Vite build + HTTP cache.

   CONTAINS:
     §1 — Main WC styles (was L8-L1994 of template, ~75KB)
     §2 — Desktop media query tweak (was L1995-L2002)
     §3 — WC calculator x-cloak + calc-specific styles (was L2238-L2312)

   FUTURE CLEANUP: many rules here are shared with other pages (skip-link,
   nav, footer, typography). Candidate for migration into site.css during
   Phase 4.5 deduplication. For now: WC-only.

   LOAD VIA: template-workers-comp.blade.php explicit <link> near head,
             scoped so it doesn't bleed onto other pages.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ §1 (from inline block) ═══════════════════════════════════ */
/* ── 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; }
    /* ── FAQ ACCORDION ────────────────────────────────── */
    .svc-faq { padding: 80px 32px; background: var(--white); }
    .svc-faq .sec-head { margin-bottom: 48px; text-align: center; }
    .svc-faq .sec-head h2 { font-family: var(--font-h); font-size: clamp(24px,3.2vw,36px); font-weight: 800; color: var(--navy); margin-bottom: 12px; }
    .svc-faq .sec-head p { font-family: var(--font-b); font-size: 16px; color: var(--muted); max-width: 600px; margin: 0 auto; }
    .faq-list { max-width: 760px; margin: 0 auto; }
    .faq-item { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; transition: box-shadow .2s; }
    .faq-item.open { box-shadow: 0 2px 12px rgba(7,25,46,.06); }
    .faq-item.open .faq-chevron { transform: rotate(180deg); }
    .faq-q { width: 100%; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; text-align: left; transition: background .15s; }
    .faq-q:hover { background: var(--off); }
    .faq-q span { font-family: var(--font-b); font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.4; padding-right: 16px; }
    .faq-chevron { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; flex-shrink: 0; transition: transform .2s; }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
    .faq-item.open .faq-a { max-height: 400px; }
    .faq-a p { padding: 0 24px 20px; font-family: var(--font-b); font-size: 14.5px; color: var(--muted); line-height: 1.7; }

    /* ── RELATED SERVICES (CROSS-SELL) ─────────────────── */
    .sec-cross { background: var(--off); padding: 80px 32px; }
    .sec-cross .wrap { max-width: 1000px; margin: 0 auto; }
    .sec-cross .sec-label {
      font-family: var(--font-b); font-size: 11px; font-weight: 700;
      letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue-dark);
      margin-bottom: 10px; text-align: center;
    }
    .sec-cross .sec-h2 {
      font-family: var(--font-h); font-size: clamp(24px, 3.2vw, 36px);
      font-weight: 800; color: var(--navy); text-align: center; margin-bottom: 40px;
    }
    .cross-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .cross-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: 16px; padding: 28px 24px;
      text-decoration: none; display: block;
      position: relative; overflow: hidden;
      transition: all .3s cubic-bezier(.22,1,.36,1);
    }
    .cross-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      border-radius: 16px 16px 0 0;
      background: linear-gradient(90deg, var(--blue), var(--blue-dark));
      transition: height .3s cubic-bezier(.22,1,.36,1);
    }
    .cross-card:nth-child(2)::before { background: linear-gradient(90deg, var(--orange), #EA580C); }
    .cross-card:nth-child(3)::before { background: linear-gradient(90deg, #38B2AC, var(--blue)); }
    .cross-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 40px rgba(7,25,46,.10), 0 4px 12px rgba(7,25,46,.06);
      border-color: transparent;
    }
    .cross-card:hover::before { height: 4px; }
    /* Premium gradient SVG art slot — foreground */
    .cross-card-icon {
      width: 56px; height: 56px;
      display: inline-flex; align-items: center; justify-content: center;
      margin-bottom: 16px;
      background: none;
      border-radius: 0;
      transition: transform .32s cubic-bezier(.34,1.56,.64,1);
    }
    .cross-card:hover .cross-card-icon { transform: scale(1.06); }
    .cross-card-icon svg { width: 100%; height: 100%; overflow: visible; }
    .cross-card h3 {
      font-family: var(--font-h); font-size: 17px; font-weight: 700;
      color: var(--navy); margin-bottom: 8px;
    }
    .cross-card p {
      font-family: var(--font-b); font-size: 14px; color: var(--muted);
      line-height: 1.65; margin-bottom: 14px;
    }
    .cross-link {
      font-family: var(--font-b); font-size: 13px; font-weight: 600;
      color: var(--blue); display: inline-flex; align-items: center; gap: 4px;
      transition: gap .2s;
    }
    .cross-card:hover .cross-link { color: var(--blue-dark); gap: 8px; }
    @media (max-width: 900px) {
      .cross-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    }

    @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). */
    :root {
      --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);
      --mini-shadow:
        0 0 0 0.5px rgba(255,255,255,.7),
        0 0 0 1px rgba(0,0,0,.02),
        0 2px 8px rgba(7,25,46,.05),
        0 12px 36px rgba(7,25,46,.07);
    }

    /* ── 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%);
    }

    /* ── INLINE QUOTE FORM ─────────────────────────────── */
    .inline-quote-form { max-width: 600px; margin: 32px auto 0; }
    .iq-form { display: flex; gap: 12px; flex-wrap: wrap; }
    .iq-input {
      flex: 1; min-width: 150px; padding: 14px 18px;
      border: 1.5px solid rgba(255,255,255,.2);
      border-radius: 12px; background: rgba(255,255,255,.08);
      color: #fff; font-size: 15px; font-family: var(--font-b);
    }
    .iq-input::placeholder { color: rgba(255,255,255,.76); }
    .iq-input:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(41,171,226,.2);
      outline: none;
    }
    .iq-submit {
      padding: 14px 28px; border: none; border-radius: 12px;
      background: var(--orange); color: #fff;
      font-family: var(--font-h); font-size: 15px; font-weight: 700;
      cursor: pointer; box-shadow: 0 4px 14px rgba(249,115,22,.25);
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .iq-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249,115,22,.35); }
    .iq-note { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 12px; text-align: center; }

    /* ── 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 */

    /* ── BUTTON STYLES ─────────────────────────────────── */
    .btn-hero-primary, .btn-primary {
      font-family: var(--font-b); font-size: 15.5px; font-weight: 700;
      color: #fff; background: var(--orange);
      padding: 15px 32px; border-radius: 12px; text-decoration: none;
      transition: all .2s var(--ease); min-height: 52px;
      display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none;
      box-shadow: 0 4px 14px rgba(249,115,22,.18);
    }
    .btn-hero-primary:hover, .btn-primary:hover { background: #EA6C10; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249,115,22,.35); }
    .btn-hero-secondary, .btn-secondary {
      font-family: var(--font-b); font-size: 15.5px; font-weight: 700;
      color: #fff; background: transparent;
      padding: 15px 32px; border-radius: 12px; text-decoration: none;
      transition: all .2s var(--ease); min-height: 52px;
      display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
      border: 2px solid rgba(255,255,255,.4);
    }
    .btn-hero-secondary:hover, .btn-secondary:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(255,255,255,.08); }
    .btn-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

    /* ── SECTION UTILITY ────────────────────────────────── */
    .sec { padding: 80px 32px; }
    .sec-inner { max-width: 1080px; margin: 0 auto; }
    .sec-960 { max-width: 960px; margin: 0 auto; }
    .sec-720 { max-width: 720px; margin: 0 auto; text-align: center; }
    .eyebrow {
      font-family: var(--font-b); font-size: 0.75rem; font-weight: 600;
      letter-spacing: 2px; text-transform: uppercase;
      color: var(--orange); margin-bottom: 12px;
    }
    .sec-h2 {
      font-family: var(--font-h); font-weight: 800; font-size: 2.25rem;
      color: var(--navy); line-height: 1.15; margin-bottom: 16px;
    }
    .sec-h2-white { color: #fff; }
    .sec-sub {
      font-family: var(--font-b); font-size: 1.0625rem; font-weight: 400;
      color: var(--muted); line-height: 1.7; max-width: 640px;
    }
    .sec-sub-white { color: rgba(255,255,255,.75); }

    /* ── GRADIENT SECTION DIVIDER ──────────────────────── */
    .sec-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, var(--border) 15%, var(--border) 85%, transparent 100%);
      margin: 0 auto;
      max-width: 1200px;
    }

    /* ══════════════════════════════════════════════════════
       SECTION 1: HERO
    ══════════════════════════════════════════════════════ */
    /* ── SVG LINE-ART DRAW ANIMATION ──────────────────── */
    .wc-hero {
      background-image:
        radial-gradient(rgba(41,171,226,.06) 1px, transparent 1px),
        radial-gradient(ellipse 70% 50% at 50% 40%, rgba(41,171,226,.08), transparent 70%),
        radial-gradient(ellipse 80% 60% at 50% 40%, var(--navy-2) 0%, var(--navy) 70%);
      background-size: 20px 20px, 100% 100%, 100% 100%;
      padding: 48px 32px 48px;
      position: relative;
      overflow: hidden;
    }
    .wc-hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(41,171,226,.06) 1px, transparent 1px);
      background-size: 32px 32px;
      pointer-events: none;
    }

    /* ── Ken Burns hero background image ──────────────── */
    .wc-hero-bg-img {
      position: absolute; inset: 0;
      background: image-set(url('/generated-images/hero-workers-comp.avif') type('image/avif'), url('/generated-images/hero-workers-comp.webp') type('image/webp'), url('/generated-images/hero-workers-comp.jpeg') type('image/jpeg')) center center / cover no-repeat;
      animation: kenBurnsWC 20s ease-in-out infinite alternate;
      will-change: transform; z-index: 0; opacity: 0.62;
    }
    .wc-hero::after {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(90deg,
          rgba(7,25,46,0.78) 0%,
          rgba(7,25,46,0.60) 40%,
          rgba(7,25,46,0.40) 70%,
          rgba(7,25,46,0.22) 100%),
        linear-gradient(180deg, rgba(7,25,46,0) 0%, rgba(7,25,46,0.35) 75%, rgba(7,25,46,0.58) 100%);
      pointer-events: none;
      z-index: 1;
    }
    @keyframes kenBurnsWC {
      0% { transform: scale(1); }
      100% { transform: scale(1.05); }
    }
    @media (prefers-reduced-motion: reduce) {
      .wc-hero-bg-img { animation: none; }
    }

    /* ── Image divider between major sections ─────────── */
    .wc-img-divider {
      width: 100%; height: 350px;
      background: image-set(url('/generated-images/section-workers-comp-team.avif') type('image/avif'), url('/generated-images/section-workers-comp-team.webp') type('image/webp'), url('/generated-images/section-workers-comp-team.jpeg') type('image/jpeg')) center center / cover no-repeat;
      position: relative;
    }
    .wc-img-divider::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(7,25,46,0.25) 0%, rgba(7,25,46,0.55) 100%);
    }
    @media (max-width: 1024px) { .wc-img-divider { height: 220px; } }

    /* ── Gradient orb animation ────────────────────────── */
    @keyframes orbDriftMain {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.06; }
      33% { transform: translate(25px, -18px) scale(1.08); opacity: 0.09; }
      66% { transform: translate(-18px, 12px) scale(0.95); opacity: 0.07; }
    }
    .wc-hero-orb-main {
      position: absolute; width: 400px; height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(41,171,226,.12) 0%, transparent 70%);
      animation: orbDriftMain 12s ease-in-out infinite;
      pointer-events: none; z-index: 0; right: 12%; top: 8%;
    }
    @media (prefers-reduced-motion: reduce) { .wc-hero-orb-main { animation: none; } }

    .wc-hero-inner {
      max-width: 720px; margin: 0 auto;
      text-align: center; position: relative; z-index: 2;
    }
    .wc-hero h1 {
      font-family: var(--font-h); font-weight: 900;
      font-size: 32px;
      font-size: clamp(32px, 4.5vw, 52px); line-height: 1.1; letter-spacing: -1.5px;
      color: #fff; margin-bottom: 16px;
    }
    .wc-hero h1 .hl { color: var(--orange); }
    .wc-hero-sub {
      font-family: var(--font-b); font-size: 1.125rem; font-weight: 400;
      color: rgba(255,255,255,.8); line-height: 1.72;
      max-width: 600px; margin: 0 auto 20px;
    }
    .wc-hero-ctas {
      display: flex; gap: 14px; flex-wrap: wrap;
      justify-content: center; align-items: center;
      margin-bottom: 24px;
    }
    .wc-trust-strip {
      display: flex; flex-wrap: wrap; gap: 12px;
      justify-content: center;
    }
    .wc-trust-chip {
      display: flex; align-items: center; gap: 10px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 12px;
      padding: 12px 18px;
      font-family: var(--font-b); font-size: 0.875rem; font-weight: 600;
      color: #fff;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: background .25s, border-color .25s;
    }
    .wc-trust-chip:hover {
      background: rgba(255,255,255,.12);
      border-color: rgba(255,255,255,.2);
    }
    .wc-trust-chip svg {
      width: 20px; height: 20px; stroke: var(--blue); fill: none; stroke-width: 2;
      flex-shrink: 0;
    }

    /* ══════════════════════════════════════════════════════
       SECTION 2: PROBLEM AGITATION
    ══════════════════════════════════════════════════════ */
    .wc-problem { background: var(--off); }
    .wc-problem-grid {
      display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px;
      align-items: start;
    }
    .wc-problem-copy h2 { margin-bottom: 24px; }
    .wc-problem-copy p {
      font-family: var(--font-b); font-size: 1rem; font-weight: 400;
      color: var(--text); line-height: 1.75; margin-bottom: 20px;
    }
    .wc-problem-copy p strong { color: var(--navy); font-weight: 600; }
    .wc-stat-card {
      background: linear-gradient(145deg, rgba(255,255,255,.94) 0%, rgba(247,251,255,.84) 55%, rgba(255,253,252,.88) 100%);
      backdrop-filter: blur(32px) saturate(1.6);
      -webkit-backdrop-filter: blur(32px) saturate(1.6);
      border: 1px solid rgba(226,236,244,.72);
      border-radius: 20px;
      box-shadow: var(--glass-shadow);
      padding: 32px;
    }
    .wc-stat-row {
      padding: 20px 0;
      border-bottom: 1px solid var(--border);
    }
    .wc-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
    .wc-stat-row:first-child { padding-top: 0; }
    .wc-stat-num {
      font-family: var(--font-h); font-weight: 700; font-size: 2rem;
      color: var(--blue); line-height: 1.2;
    }
    .wc-stat-label {
      font-family: var(--font-b); font-size: 0.875rem; font-weight: 400;
      color: var(--muted); line-height: 1.5; margin-top: 4px;
    }

    /* ══════════════════════════════════════════════════════
       SECTION 3: HOW IT WORKS
    ══════════════════════════════════════════════════════ */
    .wc-how { background: var(--white); }
    .wc-how .sec-sub { margin: 0 auto 48px; }
    /* ── Flow Diagram ─────────────────────────────────── */
    .flow-grid {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 0;
      padding: 48px 0;
      position: relative;
    }
    .flow-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      flex: 1;
      max-width: 240px;
      padding: 0 16px;
    }
    .flow-icon {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      background: var(--blue);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      box-shadow: 0 4px 14px rgba(41,171,226,.2);
    }
    .flow-icon svg {
      width: 28px;
      height: 28px;
      stroke: #fff;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .flow-node h3 {
      font-family: var(--font-h);
      font-size: 16px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 8px;
    }
    .flow-node p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.5;
    }
    /* Connector line between nodes */
    .flow-node:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 32px;
      right: -16px;
      width: 32px;
      height: 2px;
      background: linear-gradient(90deg, var(--blue), rgba(41,171,226,.3));
    }
    /* Step number */
    .flow-step-num {
      font-family: var(--font-h);
      font-size: 12px;
      font-weight: 700;
      color: var(--blue);
      margin-bottom: 8px;
      letter-spacing: 0.05em;
    }
    @media (max-width: 1024px) {
      .flow-grid {
        flex-direction: column;
        align-items: center;
      }
      .flow-node { max-width: 100%; padding: 16px 0; }
      .flow-node:not(:last-child)::after {
        top: auto; bottom: -8px; right: auto;
        left: 50%; width: 2px; height: 16px;
        transform: translateX(-50%) rotate(90deg);
      }
    }
    .wc-how-cta { text-align: center; }

    /* ══════════════════════════════════════════════════════
       SECTION 4: MASTER POLICY ADVANTAGES
    ══════════════════════════════════════════════════════ */
    .wc-advantages {
      background: radial-gradient(ellipse 80% 60% at 50% 40%, var(--navy-2) 0%, var(--navy) 70%);
      position: relative;
      overflow: hidden;
    }
    .wc-advantages::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(41,171,226,.04) 1px, transparent 1px);
      background-size: 32px 32px;
      pointer-events: none;
    }
    .wc-adv-grid {
      display: grid; grid-template-columns: 2fr 3fr; gap: 56px;
      align-items: start;
      position: relative; z-index: 1;
    }
    .wc-adv-copy h2 { color: #fff; margin-bottom: 20px; }
    .wc-adv-copy p {
      font-family: var(--font-b); font-size: 1rem; font-weight: 400;
      color: rgba(255,255,255,.75); line-height: 1.75;
    }
    .wc-adv-cards {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    }
    .wc-adv-card {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 16px;
      padding: 24px;
      transition: all .3s var(--ease);
    }
    .wc-adv-card:hover {
      background: rgba(255,255,255,.08);
      border-color: rgba(41,171,226,.2);
      transform: translateY(-2px);
    }
    .wc-adv-card-icon {
      width: 44px; height: 44px; margin-bottom: 12px;
    }
    .wc-adv-card-icon svg {
      width: 32px; height: 32px; stroke: var(--blue); fill: none; stroke-width: 1.5;
    }
    .wc-adv-card h3 {
      font-family: var(--font-h); font-weight: 600; font-size: 1rem;
      color: #fff; margin-bottom: 8px;
    }
    .wc-adv-card p {
      font-family: var(--font-b); font-size: 0.875rem; font-weight: 400;
      color: rgba(255,255,255,.7); line-height: 1.6;
    }

    /* ══════════════════════════════════════════════════════
       SECTION 5: PROOF & RESULTS
    ══════════════════════════════════════════════════════ */
    .wc-proof { background: var(--off); }
    .wc-outcome-stats {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
      margin-bottom: 48px;
    }
    .wc-outcome {
      text-align: center; padding: 24px;
    }
    .wc-outcome-num {
      font-family: var(--font-h); font-weight: 700; font-size: 3rem;
      color: var(--navy); line-height: 1.1; margin-bottom: 8px;
    }
    .wc-outcome-label {
      font-family: var(--font-b); font-size: 0.875rem; font-weight: 400;
      color: var(--muted); line-height: 1.5;
    }
    .wc-testimonial {
      background: linear-gradient(145deg, rgba(255,255,255,.94) 0%, rgba(247,251,255,.84) 55%, rgba(255,253,252,.88) 100%);
      backdrop-filter: blur(32px) saturate(1.6);
      -webkit-backdrop-filter: blur(32px) saturate(1.6);
      border: 1px solid rgba(226,236,244,.72);
      border-radius: 20px;
      box-shadow: var(--glass-shadow);
      padding: 40px;
      position: relative;
      margin-bottom: 48px;
    }
    .wc-testi-quote-mark {
      font-family: Georgia, serif; font-size: 6rem; line-height: 1;
      color: var(--blue); opacity: 0.15;
      position: absolute; top: 16px; left: 32px;
    }
    .wc-testi-text {
      font-family: var(--font-b); font-size: 1.125rem; font-weight: 400;
      font-style: italic; color: var(--text); line-height: 1.75;
      position: relative; z-index: 1; margin-bottom: 20px;
    }
    .wc-testi-attr {
      display: flex; align-items: center; gap: 14px;
    }
    .wc-testi-avatar {
      width: 52px; height: 52px; border-radius: 50%;
      background: var(--off); border: 2px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .wc-testi-avatar svg {
      width: 24px; height: 24px; stroke: var(--muted); fill: none; stroke-width: 1.5;
    }
    .wc-testi-name {
      font-family: var(--font-b); font-weight: 600; font-size: 0.9375rem;
      color: var(--navy);
    }
    .wc-testi-role {
      font-family: var(--font-b); font-weight: 400; font-size: 0.8125rem;
      color: var(--muted);
    }
    .wc-testi-headshot {
      width: 52px; height: 52px; border-radius: 50%;
      object-fit: cover; flex-shrink: 0;
      border: 2px solid var(--border);
    }
    .wc-testi-metric {
      display: inline-block;
      background: linear-gradient(135deg, rgba(41,171,226,.10), rgba(23,121,184,.08));
      border: 1px solid rgba(41,171,226,.18);
      border-radius: 10px; padding: 8px 16px;
      font-family: var(--font-h); font-size: 13px; font-weight: 700;
      color: var(--blue-dark); margin-bottom: 16px;
    }
    .wc-trust-badges {
      display: flex; flex-wrap: wrap; gap: 32px;
      justify-content: center; align-items: center;
    }
    .wc-trust-badges img {
      height: 40px; width: auto;
      filter: grayscale(100%); opacity: 0.6;
      transition: filter .3s, opacity .3s;
    }
    .wc-trust-badges img:hover {
      filter: grayscale(0%); opacity: 1;
    }

    /* ══════════════════════════════════════════════════════
       SECTION 6: INDUSTRIES MINI-GRID
    ══════════════════════════════════════════════════════ */
    .wc-industries { background: var(--white); }
    .wc-industries .sec-sub { margin-bottom: 48px; }
    .wc-ind-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
      margin-bottom: 32px;
    }
    .wc-ind-card {
      background: linear-gradient(145deg, rgba(255,255,255,.94) 0%, rgba(247,251,255,.84) 55%, rgba(255,253,252,.88) 100%);
      backdrop-filter: blur(32px) saturate(1.6);
      -webkit-backdrop-filter: blur(32px) saturate(1.6);
      border: 1px solid rgba(226,236,244,.72);
      border-radius: 16px;
      box-shadow: var(--glass-shadow);
      padding: 28px;
      transition: all .35s var(--ease);
    }
    .wc-ind-card:hover {
      box-shadow: var(--glass-shadow-hover);
      transform: translateY(-3px);
    }
    .wc-ind-icon {
      width: 40px; height: 40px; margin-bottom: 14px;
    }
    .wc-ind-icon svg {
      width: 44px; height: 44px; stroke: var(--blue); fill: none; stroke-width: 1.5;
    }
    .wc-ind-card h3 {
      font-family: var(--font-h); font-weight: 600; font-size: 1rem;
      color: var(--navy); margin-bottom: 6px;
    }
    .wc-ind-card .wc-ind-desc {
      font-family: var(--font-b); font-size: 0.875rem; font-weight: 400;
      color: var(--muted); line-height: 1.55; margin-bottom: 12px;
    }
    .wc-ind-rate {
      display: inline-block;
      background: var(--off); border-radius: 8px;
      padding: 4px 10px;
      font-family: var(--font-b); font-size: 0.8125rem; font-weight: 500;
      color: var(--navy);
    }
    .wc-ind-footnote {
      text-align: center;
      font-family: var(--font-b); font-size: 0.9375rem; font-weight: 400;
      color: var(--muted);
    }
    .wc-ind-footnote a {
      color: var(--blue); font-weight: 600;
      text-decoration: underline; text-underline-offset: 3px;
    }
    .wc-ind-footnote a:hover { color: var(--blue-dark); }

    /* ══════════════════════════════════════════════════════
       SECTION 7: YOUR TEAM OF SPECIALISTS
    ══════════════════════════════════════════════════════ */
    .wc-advisor { background: var(--off); }
    .wc-adv-layout {
      display: grid; grid-template-columns: 45fr 55fr; gap: 56px;
      align-items: center;
    }
    .wc-adv-photo-wrap {
      display: flex; justify-content: center; position: relative;
    }
    .wc-adv-photo-bg {
      position: absolute;
      width: 280px; height: 280px;
      border-radius: 50%;
      background: rgba(41,171,226,.10);
      top: 50%; left: 50%;
      transform: translate(calc(-50% + 20px), calc(-50% + 20px));
    }
    .wc-adv-photo {
      width: 280px; height: 280px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--off) 0%, #fff 100%);
      border: 2px solid var(--blue);
      box-shadow: var(--glass-shadow);
      display: flex; align-items: center; justify-content: center;
      position: relative; z-index: 1;
      overflow: hidden;
    }
    .wc-adv-photo svg {
      width: 96px; height: 96px; stroke: var(--muted); fill: none; stroke-width: 1;
      opacity: 0.5;
    }
    .wc-adv-text h2 { margin-bottom: 24px; }
    .wc-adv-text p {
      font-family: var(--font-b); font-size: 1rem; font-weight: 400;
      color: var(--text); line-height: 1.75; margin-bottom: 16px;
    }
    .wc-adv-pullquote {
      font-family: var(--font-h); font-weight: 600; font-size: 1.25rem;
      color: var(--navy); line-height: 1.45;
      padding-left: 20px;
      border-left: 3px solid var(--orange);
      margin: 24px 0;
    }
    .wc-adv-micro {
      display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px;
    }
    .wc-adv-micro-item {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--font-b); font-size: 0.875rem; font-weight: 500;
      color: var(--navy);
    }
    .wc-adv-micro-item svg {
      width: 18px; height: 18px; stroke: var(--green); fill: none; stroke-width: 2.5;
      flex-shrink: 0;
    }

    /* ══════════════════════════════════════════════════════
       SECTION 8: FINAL CTA
    ══════════════════════════════════════════════════════ */
    .wc-final-cta {
      background: radial-gradient(ellipse 80% 60% at 50% 40%, var(--navy-2) 0%, var(--navy) 70%);
      position: relative;
      overflow: hidden;
    }
    .wc-final-cta::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(41,171,226,.04) 1px, transparent 1px);
      background-size: 32px 32px;
      pointer-events: none;
    }
    .wc-final-inner {
      max-width: 720px; margin: 0 auto;
      text-align: center; position: relative; z-index: 1;
    }
    .wc-final-inner h2 {
      font-family: var(--font-h); font-weight: 800; font-size: 2.5rem;
      color: #fff; line-height: 1.15; margin-bottom: 16px;
    }
    .wc-final-inner .wc-final-sub {
      font-family: var(--font-b); font-size: 1.125rem; font-weight: 400;
      color: rgba(255,255,255,.75); line-height: 1.7;
      max-width: 560px; margin: 0 auto 36px;
    }
    .btn-cta-large {
      font-family: var(--font-b); font-size: 1.0625rem; font-weight: 700;
      color: #fff; background: var(--orange);
      padding: 18px 40px; border-radius: 12px; text-decoration: none;
      transition: all .2s var(--ease);
      display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none;
      box-shadow: 0 4px 14px rgba(249,115,22,.18);
      margin-bottom: 20px;
    }
    .btn-cta-large:hover { background: #EA6C10; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249,115,22,.35); }
    .wc-final-phone {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      font-family: var(--font-b); font-size: 1rem; font-weight: 500;
      color: #fff; text-decoration: none;
      margin-bottom: 10px;
      transition: color .15s;
    }
    .wc-final-phone:hover { color: var(--blue); }
    .wc-final-phone svg {
      width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2;
    }
    .wc-final-email {
      display: block;
      font-family: var(--font-b); font-size: 0.875rem; font-weight: 400;
      color: rgba(255,255,255,.76); text-decoration: none; margin-bottom: 24px;
      transition: color .15s;
    }
    .wc-final-email:hover { color: var(--blue); }
    .wc-final-micro {
      font-family: var(--font-b); font-size: 0.75rem; font-weight: 400;
      color: rgba(255,255,255,.72);
    }

    /* ── STICKY MOBILE CTA BAR ──────────────────────────── */
    .mob-cta-bar {
      display: none; position: fixed; bottom: 0; left: 0; right: 0;
      z-index: 200;
      background: var(--navy);
      border-top: 1px solid rgba(255,255,255,.1);
      padding: 10px 16px;
      gap: 10px;
      box-shadow: 0 -4px 24px rgba(7,25,46,.2);
      transform: translateY(100%);
      transition: transform .35s var(--ease);
    }
    .mob-cta-bar.visible {
      transform: translateY(0);
    }
    .mob-cta-bar a {
      flex: 1; text-align: center;
      font-family: var(--font-b); font-size: 14px; font-weight: 700;
      padding: 12px 16px; border-radius: 10px;
      text-decoration: none;
      display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .mob-bar-quote { background: var(--orange); color: #fff; }
    .mob-bar-quote:hover { background: #EA6C10; }
    .mob-bar-call { background: var(--blue); color: #fff; }
    .mob-bar-call:hover { background: var(--blue-dark); }

    /* ── EXIT INTENT MODAL ───────────────────────────────── */
    .exit-overlay {
      display: none; position: fixed; inset: 0; z-index: 500;
      background: rgba(7,25,46,.6);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      align-items: center; justify-content: center;
      opacity: 0; transition: opacity .3s;
    }
    .exit-overlay.open { display: flex; opacity: 1; }
    .exit-modal {
      background: #fff; border-radius: 20px;
      box-shadow: var(--shadow-xl);
      max-width: 440px; width: 90%;
      padding: 40px 36px;
      text-align: center;
      position: relative;
    }
    .exit-modal-close {
      position: absolute; top: 14px; right: 14px;
      width: 32px; height: 32px;
      border: 1px solid var(--border); background: var(--off);
      border-radius: 8px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; color: var(--muted);
      transition: all .15s; font-family: system-ui;
    }
    .exit-modal-close:hover { background: var(--border); color: var(--text); }
    .exit-modal h2,
    .exit-modal h3 {
      font-family: var(--font-h); font-weight: 800; font-size: 1.5rem;
      color: var(--navy); margin-bottom: 10px;
    }
    .exit-modal p {
      font-family: var(--font-b); font-size: 0.9375rem;
      color: var(--muted); line-height: 1.6; margin-bottom: 24px;
    }
    .exit-form {
      display: flex; gap: 10px;
    }
    .exit-form input {
      flex: 1; padding: 14px 16px;
      font-family: var(--font-b); font-size: 0.9375rem;
      border: 1px solid var(--border); border-radius: 10px;
      background: var(--off); color: var(--text);
      outline: none;
      transition: border-color .2s;
    }
    .exit-form input:focus { border-color: var(--blue); }
    .exit-form button {
      font-family: var(--font-b); font-size: 0.875rem; font-weight: 700;
      color: #fff; background: var(--orange);
      padding: 14px 24px; border-radius: 10px;
      border: none; cursor: pointer;
      transition: background .15s;
      white-space: nowrap;
    }
    .exit-form button:hover { background: #EA6C10; }

    /* ── 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,.30); 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,.26); 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 — no reveal delay above fold */
    .wc-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; }

    /* ── WP/Elementor overrides ──────────────────────────── */
    a.btn-hero-primary,
a.btn-primary,
a.btn-cta-large,
a.btn-nav-primary { color: #fff !important; text-decoration: none !important; }
    a.btn-hero-secondary, a.btn-secondary { color: #fff !important; text-decoration: none !important; }

    /* ══════════════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════════════ */
    @media (max-width: 1024px) {
      .wc-adv-grid { grid-template-columns: 1fr; }
      .wc-adv-copy { text-align: center; }
      .wc-adv-copy p { margin: 0 auto 32px; max-width: 600px; }
    }

    @media (max-width: 1024px) {
      /* Header */
      nav { display: none; }
      .btn-nav-ghost { display: none; }
      .ham { display: flex; }
      .mob-overlay { display: block; }
      .mob-cta-bar { display: flex; }

      /* Sections */
      .sec { padding: 72px 24px; }

      /* Hero */
      .wc-hero { padding: 40px 24px 40px; }
      .wc-hero h1 { font-size: 2rem; letter-spacing: -0.5px; }
      .wc-hero-sub { font-size: 1rem; }
      .wc-trust-strip { gap: 10px; }
      .wc-trust-chip { padding: 12px 16px; font-size: 0.8125rem; }

      /* Problem */
      .wc-problem-grid { grid-template-columns: 1fr; gap: 32px; }

      /* Flow diagram handled by its own @media block */

      /* Advantages */
      .wc-adv-cards { grid-template-columns: 1fr; }

      /* Proof */
      .wc-outcome-stats { grid-template-columns: 1fr; gap: 16px; }
      .wc-outcome-num { font-size: 2.5rem; }

      /* Industries */
      .wc-ind-grid { grid-template-columns: 1fr; }

      /* Advisor */
      .wc-adv-layout { grid-template-columns: 1fr; gap: 32px; }
      .wc-adv-photo { width: 200px; height: 200px; }
      .wc-adv-photo-bg { width: 200px; height: 200px; }
      .wc-adv-micro { flex-direction: column; gap: 12px; }

      /* Final CTA */
      .wc-final-inner h2 { font-size: 2rem; }
      .wc-final-cta { padding: 60px 24px; }

      /* Footer */
      .ft-top { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }

      /* Exit form */
      .exit-form { flex-direction: column; }
    }

    @media (max-width: 480px) {
      .wc-trust-strip { display: grid; grid-template-columns: 1fr 1fr; }
      .ft-top { grid-template-columns: 1fr; }
      .wc-hero h1 { font-size: 1.75rem; }
      .btn-cta-large { width: 100%; justify-content: center; }
      .wc-adv-cards { grid-template-columns: 1fr; }
      .wc-ind-grid { grid-template-columns: 1fr; }
    }

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

    /* ── 1. HERO: Animated Gradient Orbs ───────────────── */
    .wc-hero-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
      z-index: 0;
      will-change: transform;
    }
    .wc-hero-orb--1 {
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(41,171,226,.18) 0%, transparent 70%);
      top: -10%; left: -8%;
      animation: orbDrift1 18s ease-in-out infinite alternate;
    }
    .wc-hero-orb--2 {
      width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(249,115,22,.14) 0%, transparent 70%);
      bottom: -15%; right: -5%;
      animation: orbDrift2 22s ease-in-out infinite alternate;
    }
    .wc-hero-orb--3 {
      width: 350px; height: 350px;
      background: radial-gradient(circle, rgba(23,121,184,.12) 0%, transparent 70%);
      top: 30%; right: 20%;
      animation: orbDrift3 15s ease-in-out infinite alternate;
    }
    .wc-hero-orb--4 {
      width: 280px; height: 280px;
      background: radial-gradient(circle, rgba(249,115,22,.10) 0%, transparent 70%);
      top: 60%; left: 15%;
      animation: orbDrift4 20s ease-in-out infinite alternate;
    }
    @keyframes orbDrift1 {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(60px, 40px) scale(1.15); }
    }
    @keyframes orbDrift2 {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(-50px, -30px) scale(1.1); }
    }
    @keyframes orbDrift3 {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(-40px, 50px) scale(1.2); }
    }
    @keyframes orbDrift4 {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(30px, -40px) scale(1.1); }
    }

    /* ── 1b. HERO: Headline Shimmer ────────────────────── */
    .wc-hero h1 {
      background: linear-gradient(
        90deg,
        #fff 0%, #fff 40%,
        rgba(41,171,226,.9) 50%,
        #fff 60%, #fff 100%
      );
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: headlineShimmer 6s ease-in-out infinite;
    }
    .wc-hero h1 .hl {
      -webkit-text-fill-color: var(--orange);
    }
    @keyframes headlineShimmer {
      0%, 100% { background-position: 100% 0; }
      50% { background-position: -100% 0; }
    }

    /* ── 2. STATS: Animated Counter Gradient Text ──────── */
    .wc-outcome-num.counter-animated {
      background: linear-gradient(135deg, var(--blue) 0%, var(--orange) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .wc-stat-num.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 Polish ─────────────────── */
    .wc-ind-card {
      position: relative;
      overflow: hidden;
    }
    .wc-ind-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;
    }
    .wc-ind-card:hover::after {
      transform: translateX(100%);
    }
    .wc-ind-card:hover {
      box-shadow: var(--glass-shadow-hover), 0 0 0 1px rgba(41,171,226,.12);
    }

    .wc-adv-card {
      position: relative;
      overflow: hidden;
    }
    .wc-adv-card::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(110deg, transparent 30%, rgba(41,171,226,.08) 50%, transparent 70%);
      transform: translateX(-100%);
      transition: transform .6s var(--ease);
      pointer-events: none;
    }
    .wc-adv-card:hover::after {
      transform: translateX(100%);
    }
    .wc-adv-card:hover {
      box-shadow: 0 0 24px rgba(41,171,226,.15), 0 0 0 1px rgba(41,171,226,.2);
    }

    .flow-icon {
      transition: box-shadow .35s var(--ease);
    }

    /* ── 4. TRUST BADGES: Auto-Scrolling Marquee ───────── */
    .wc-trust-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%);
    }
    .wc-trust-marquee-track {
      display: flex;
      align-items: center;
      gap: 48px;
      width: max-content;
      animation: marqueeScroll 20s linear infinite;
    }
    .wc-trust-marquee-track img {
      height: 40px; width: auto;
      filter: grayscale(100%); opacity: 0.5;
      transition: filter .3s, opacity .3s;
      flex-shrink: 0;
    }
    .wc-trust-marquee-track img:hover {
      filter: grayscale(0%); opacity: 1;
    }
    @keyframes marqueeScroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ── 5. CTA BUTTONS: Micro-Interactions ─────────────── */
    .btn-hero-primary,
.btn-primary,
.btn-cta-large {
      position: relative;
      overflow: hidden;
    }
    /* Old ::before hover-shine replaced by shimmer-slide ::after below */
    @keyframes ctaPulse {
      0%, 100% { box-shadow: 0 4px 14px rgba(249,115,22,.18); }
      50% { box-shadow: 0 4px 24px rgba(249,115,22,.45), 0 0 48px rgba(249,115,22,.15); }
    }
    .btn-hero-primary, .btn-primary {
      animation: ctaPulse 3s ease-in-out infinite;
    }
    .btn-hero-primary:hover,
.btn-primary:hover,
.btn-cta-large:hover {
      animation: none;
    }
    .btn-hero-primary .btn-icon,
.btn-primary .btn-icon,
.btn-cta-large .btn-icon {
      transition: transform .25s var(--ease);
    }
    .btn-hero-primary:hover .btn-icon,
.btn-primary:hover .btn-icon,
.btn-cta-large:hover .btn-icon {
      transform: translateX(4px);
    }

    /* ── 6. SECTION TRANSITIONS: Wave Dividers ──────────── */
    .wc-wave-divider {
      position: relative;
      height: 64px;
      overflow: hidden;
      line-height: 0;
    }
    .wc-wave-divider svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .wc-wave-divider--light-to-dark svg { fill: var(--off); }
    .wc-wave-divider--dark-to-light svg { fill: var(--navy); }
    .wc-wave-divider--white-to-off svg { fill: var(--white); }
    .wc-wave-divider--off-to-white svg { fill: var(--off); }

    /* Gradient fade between sections */
    .wc-problem::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 80px;
      background: linear-gradient(180deg, var(--white) 0%, transparent 100%);
      pointer-events: none;
      z-index: 1;
    }
    .wc-problem { position: relative; }

    /* ── 7. TESTIMONIAL: Enhanced Decorative Elements ──── */
    .wc-testimonial {
      border-left: 4px solid var(--blue);
      transition: all .35s var(--ease);
    }
    .wc-testimonial:hover {
      transform: translateY(-4px);
      box-shadow: var(--glass-shadow-hover), 0 0 0 1px rgba(41,171,226,.12);
      border-left-color: var(--orange);
    }
    .wc-testi-quote-mark {
      font-size: 8rem;
      opacity: 0.08;
      color: var(--blue);
      top: 8px;
      left: 24px;
    }
    .wc-testi-stars {
      display: block;
      font-size: 18px;
      letter-spacing: 4px;
      color: #F7D44C;
      margin-bottom: 12px;
    }

    /* ── 8. PROCESS/FLOW: Icon hover ────────────────────── */
    .flow-icon svg {
      transition: transform .35s var(--spring);
    }
    .flow-node:hover .flow-icon svg {
      transform: scale(1.12);
    }
    .flow-node:hover .flow-icon {
      box-shadow: 0 6px 20px rgba(41,171,226,.35);
    }

    /* ── STAT CARD: Enhanced ───────────────────────────── */
    .wc-stat-card {
      transition: all .35s var(--ease);
    }
    .wc-stat-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--glass-shadow-hover);
    }

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

    /* ── FINAL CTA: Orbs ──────────────────────────────── */
    .wc-final-cta-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      pointer-events: none;
      z-index: 0;
    }
    .wc-final-cta-orb--1 {
      width: 300px; height: 300px;
      background: radial-gradient(circle, rgba(249,115,22,.12) 0%, transparent 70%);
      top: -10%; right: 10%;
      animation: orbDrift3 16s ease-in-out infinite alternate;
    }
    .wc-final-cta-orb--2 {
      width: 250px; height: 250px;
      background: radial-gradient(circle, rgba(41,171,226,.10) 0%, transparent 70%);
      bottom: -10%; left: 5%;
      animation: orbDrift4 19s ease-in-out infinite alternate;
    }

    /* ── 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-cta-large: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);
    }

    /* ══════════════════════════════════════════════════════
       21ST.DEV PREMIUM VISUAL EFFECTS
    ══════════════════════════════════════════════════════ */

    /* ── 2. GRADIENT MESH ORBS ───────────────────────────── */
    .wc-hero-mesh {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .wc-mesh-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      pointer-events: none;
    }
    .wc-mesh-orb--1 {
      top: -20%;
      left: -10%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(41,171,226,.14) 0%, rgba(41,171,226,.06) 40%, transparent 70%);
      animation: meshOrb1 16s ease-in-out infinite alternate;
    }
    .wc-mesh-orb--2 {
      bottom: -15%;
      right: -8%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(249,115,22,.12) 0%, rgba(249,115,22,.04) 40%, transparent 70%);
      animation: meshOrb2 20s ease-in-out infinite alternate;
    }
    @keyframes meshOrb1 {
      0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
      50% { transform: translate(40px, 20px) scale(1.1); opacity: 1; }
      100% { transform: translate(-20px, 40px) scale(0.95); opacity: 0.8; }
    }
    @keyframes meshOrb2 {
      0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
      50% { transform: translate(-30px, -20px) scale(1.15); opacity: 1; }
      100% { transform: translate(20px, -30px) scale(0.9); opacity: 0.8; }
    }
    @media (prefers-reduced-motion: reduce) {
      .wc-mesh-orb--1,
      .wc-mesh-orb--2 { animation: none; }
    }

    /* ── 3. DOT-GRID SVG PATTERN OVERLAY ────────────────── */
    .wc-dot-grid {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: 0.4;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1' fill='rgba(41,171,226,0.15)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(0,0,0,.6) 0%, transparent 70%);
      mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(0,0,0,.6) 0%, transparent 70%);
    }

    /* ── 5. SHIMMER-SLIDE EFFECT ON CTA BUTTONS ─────────────
       .btn-primary shimmer now in buttons-v2.css (sitewide).
       Kept .btn-hero-primary / .btn-cta-large / .iq-submit since
       those aren't covered by buttons-v2.css. --- */
    @keyframes shimmerSlide {
      0% { transform: translateX(-100%) skewX(-15deg); }
      100% { transform: translateX(200%) skewX(-15deg); }
    }
    .btn-hero-primary::after,
.btn-cta-large::after,
.iq-submit::after {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.2) 50%, transparent 100%);
      transform: translateX(-100%) skewX(-15deg);
      pointer-events: none;
      z-index: 2;
    }
    .btn-hero-primary:hover::after,
.btn-cta-large:hover::after,
.iq-submit:hover::after {
      animation: shimmerSlide .9s var(--ease) forwards;
    }
    .iq-submit {
      position: relative;
      overflow: hidden;
    }

    /* ════════════════════════════════════════════════════
       GOD MODE UX/UI POLISH — WORKERS' COMP PAGE
    ════════════════════════════════════════════════════ */

    /* ── 2. STAT COUNTER ANIMATIONS ───────────────────── */
    @keyframes countUp {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .stat-num {
      display: inline-block;
      animation: countUp 0.6s var(--ease) both;
    }
    .wc-outcome:nth-child(1) .stat-num { animation-delay: 0.0s; }
    .wc-outcome:nth-child(2) .stat-num { animation-delay: 0.14s; }
    .wc-outcome:nth-child(3) .stat-num { animation-delay: 0.28s; }

    /* ── 3. BOUNCY ADVANTAGE CARDS ─────────────────────── */
    .wc-adv-card {
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s var(--ease), background 0.2s ease, border-color 0.2s ease !important;
    }
    .wc-adv-card:hover {
      transform: translateY(-6px) scale(0.99) !important;
      box-shadow: 0 12px 32px rgba(41,171,226,.18) !important;
    }

    /* Industry cards also get the bounce */
    .wc-ind-card {
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s var(--ease) !important;
    }
    .wc-ind-card:hover {
      transform: translateY(-6px) scale(0.99) !important;
    }

    /* ── 5. ADDITIONAL SHIMMER on .btn-hero-secondary ─── */
    /* (btn-hero-primary already has shimmer from Phase 3 styles) */
    .btn-hero-secondary, .btn-secondary {
      position: relative;
      overflow: hidden;
    }
    .btn-hero-secondary::after, .btn-secondary::after {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
      transition: left 0.5s ease;
      pointer-events: none;
    }
    .btn-hero-secondary:hover::after, .btn-secondary:hover::after {
      left: 150%;
    }

    /* ── 6. SECTION GRADIENT TRANSITIONS ──────────────── */
    .wc-proof {
      background: linear-gradient(180deg, var(--off) 0%, var(--white) 100%);
    }
    .wc-how {
      background: linear-gradient(180deg, var(--white) 0%, var(--off) 100%);
    }

    /* ── 7. TRUST MARQUEE GRAYSCALE ────────────────────── */
    .wc-trust-marquee-track img {
      filter: grayscale(0.4) opacity(0.7);
      transition: filter 0.2s ease;
    }
    .wc-trust-marquee-track img:hover {
      filter: none;
    }

    /* ── 8. MOBILE RESPONSIVE ENHANCEMENTS ─────────────── */
    @media (max-width: 1024px) {
      .wc-hero-ctas {
        flex-direction: column;
        align-items: stretch;
      }
      .wc-hero-ctas .btn-hero-primary,
.wc-hero-ctas .btn-primary,
.wc-hero-ctas .btn-hero-secondary,
.wc-hero-ctas .btn-secondary {
        width: 100%;
        justify-content: center;
      }
      .wc-adv-cards {
        grid-template-columns: 1fr !important;
      }
      .wc-hero h1 {
        font-size: 26px;
        font-size: clamp(26px, 7vw, 42px);
      }
    }

    /* ── 9. FLOW-NODE STAGGERED FADE-IN ────────────────── */
    #wcSteps .flow-node {
      opacity: 0;
      transform: translateX(-8px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    #wcSteps.revealed .flow-node {
      opacity: 1;
      transform: translateX(0);
    }
    #wcSteps.revealed .flow-node:nth-child(1) { transition-delay: 0.05s; }
    #wcSteps.revealed .flow-node:nth-child(2) { transition-delay: 0.16s; }
    #wcSteps.revealed .flow-node:nth-child(3) { transition-delay: 0.27s; }
    #wcSteps.revealed .flow-node:nth-child(4) { transition-delay: 0.38s; }
  /*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, .small, .tag, .badge, .meta, .label, .desc, [class*="-desc"], [class*="-meta"], [class*="-label"], [class*="-tag"], [class*="-badge"], [class*="-time"], [class*="-name"], [class*="-val"], [class*="-num"], [class*="-txt"], [class*="-trend"], [class*="-sub"], [class*="-item"], [class*="-sep"] {
    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; }

/* faq-q text override (markup has text directly in button, no span) */
.faq-item{background:#fff}
.faq-q{font-family:var(--font-b)!important;font-size:15.5px!important;font-weight:600!important;color:var(--navy)!important;background:#fff!important;line-height:1.45;gap:14px;width:100%;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;text-align:left;transition:background .15s}
.faq-q:hover{background:var(--off)!important}
.faq-q svg{width:18px;height:18px;flex-shrink:0;stroke:var(--blue-dark);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-item.open .faq-a{max-height:600px}
.faq-a-inner{padding:0 24px 22px;font-family:var(--font-b);font-size:15px;line-height:1.65;color:var(--muted)}
.faq-a-inner a{color:var(--blue-dark);text-decoration:underline}
    /* ── BORDER-RADIUS NORMALIZATION ─────────────── */
    .pain-card, .tier1-card, .tier2-card, .diff-card, .cap-card, .cross-card { border-radius: var(--r-md, 12px); }

    /* ══════════════════════════════════════════════════════
       WC POLISH PASS (2026-04-15) — Linear/Stripe-grade polish
       Surgical fixes for rhythm, hierarchy, card specs, photo.
    ══════════════════════════════════════════════════════ */

    /* -- SECTION RHYTHM: consistent vertical spacing ------------ */
    .wc-problem.sec,
    .wc-how.sec,
    .wc-advantages.sec,
    .wc-proof.sec,
    .wc-industries.sec,
    .wc-advisor.sec,
    .wc-final-cta.sec { padding-top: 96px; padding-bottom: 96px; }
    @media (max-width: 1024px) {
      .wc-problem.sec,
      .wc-how.sec,
      .wc-advantages.sec,
      .wc-proof.sec,
      .wc-industries.sec,
      .wc-advisor.sec,
      .wc-final-cta.sec { padding-top: 64px; padding-bottom: 64px; }
    }

    /* -- ADVISOR PHOTO: hold real headshot cleanly --------------- */
    .wc-adv-photo { padding: 0; }
    .wc-adv-photo img {
      width: 100%; height: 100%;
      object-fit: cover;
      border-radius: 50%;
      display: block;
    }
    .wc-adv-photo-fallback {
      background: linear-gradient(145deg, #E9F5FC 0%, #D7EBF7 100%);
      border-radius: 50%;
    }

    /* -- HOW-IT-WORKS: per-step accent colors + premium icon tiles - */
    .flow-node { transition: transform .3s var(--ease); }
    .flow-node:hover { transform: translateY(-4px); }
    .flow-node .flow-icon {
      background: linear-gradient(145deg, var(--flow-c1, var(--blue)) 0%, var(--flow-c2, var(--blue-dark)) 100%);
      box-shadow: 0 6px 18px var(--flow-shadow, rgba(41,171,226,.25)),
                  0 0 0 1px rgba(255,255,255,.08) inset;
    }
    .flow-node:nth-child(1) { --flow-c1: #29ABE2; --flow-c2: #1779B8; --flow-shadow: rgba(41,171,226,.28); }
    .flow-node:nth-child(2) { --flow-c1: #7B21A2; --flow-c2: #55177A; --flow-shadow: rgba(123,33,162,.28); }
    .flow-node:nth-child(3) { --flow-c1: #10B981; --flow-c2: #047857; --flow-shadow: rgba(16,185,129,.28); }
    .flow-node:nth-child(4) { --flow-c1: #F59E0B; --flow-c2: #D97706; --flow-shadow: rgba(245,158,11,.28); }
    .flow-node .flow-step-num { color: var(--flow-c2, var(--blue-dark)); }
    /* Connector: fade between step colors */
    .flow-node:not(:last-child)::after {
      background: linear-gradient(90deg, var(--flow-c1), rgba(13,24,41,.12));
    }

    /* -- INDUSTRIES: add left-edge accent rule per golden-card spec ---- */
    .wc-ind-card {
      position: relative;
      padding-left: 24px;
    }
    .wc-ind-card::before {
      content: '';
      position: absolute;
      left: 0; top: 20px; bottom: 20px;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: linear-gradient(180deg, var(--wc-ind-c1, var(--blue)) 0%, var(--wc-ind-c2, var(--blue-dark)) 100%);
      transition: width .3s var(--ease), box-shadow .3s var(--ease);
      box-shadow: 0 0 10px var(--wc-ind-shadow, rgba(41,171,226,.22));
    }
    .wc-ind-card:hover::before { width: 4px; }
    .wc-ind-card:nth-child(1) { --wc-ind-c1: #F59E0B; --wc-ind-c2: #D97706; --wc-ind-shadow: rgba(245,158,11,.22); }
    .wc-ind-card:nth-child(2) { --wc-ind-c1: #E8125C; --wc-ind-c2: #9F0E41; --wc-ind-shadow: rgba(232,18,92,.22); }
    .wc-ind-card:nth-child(3) { --wc-ind-c1: #F97316; --wc-ind-c2: #EA580C; --wc-ind-shadow: rgba(249,115,22,.22); }
    .wc-ind-card:nth-child(4) { --wc-ind-c1: #7B21A2; --wc-ind-c2: #55177A; --wc-ind-shadow: rgba(123,33,162,.22); }
    .wc-ind-card:nth-child(5) { --wc-ind-c1: #10B981; --wc-ind-c2: #047857; --wc-ind-shadow: rgba(16,185,129,.22); }
    .wc-ind-card:nth-child(6) { --wc-ind-c1: #1779B8; --wc-ind-c2: #0F5485; --wc-ind-shadow: rgba(23,121,184,.22); }
    .wc-ind-card .wc-ind-icon svg { stroke: var(--wc-ind-c2, var(--blue-dark)); }
    .wc-ind-card h3 { letter-spacing: -0.01em; font-size: 1.0625rem; }
    .wc-ind-rate {
      font-feature-settings: "tnum", "lnum";
      font-weight: 600;
      color: var(--wc-ind-c2, var(--navy));
      background: rgba(13,24,41,.04);
      border: 1px solid rgba(13,24,41,.06);
    }

    /* -- ADVANTAGES: elevate card hierarchy w/ hairline accent --- */
    .wc-adv-card { padding-left: 24px; position: relative; }
    .wc-adv-card::before {
      content: '';
      position: absolute;
      left: 0; top: 18px; bottom: 18px;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: linear-gradient(180deg, var(--blue) 0%, rgba(41,171,226,.3) 100%);
      opacity: .7;
      transition: width .3s var(--ease), opacity .3s var(--ease);
    }
    .wc-adv-card:hover::before { width: 4px; opacity: 1; }
    .wc-adv-card h3 { letter-spacing: -0.01em; font-size: 1.0625rem; }

    /* -- PROOF: tabular-lining numerals on stats ---------------- */
    .wc-outcome-num, .wc-stat-num {
      font-feature-settings: "tnum", "lnum";
      letter-spacing: -0.02em;
    }

    /* -- RESULTS: tighter rhythm, outcome cards get depth ------- */
    .wc-outcome {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 32px 20px;
      box-shadow: 0 2px 12px rgba(7,25,46,.04);
      transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
      position: relative;
    }
    .wc-outcome::before {
      content: '';
      position: absolute;
      left: 0; top: 14px; bottom: 14px;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: linear-gradient(180deg, var(--out-c1, var(--blue)) 0%, var(--out-c2, var(--blue-dark)) 100%);
      box-shadow: 0 0 10px var(--out-shadow, rgba(41,171,226,.22));
      transition: width .3s var(--ease);
    }
    .wc-outcome:nth-child(1) { --out-c1: #10B981; --out-c2: #047857; --out-shadow: rgba(16,185,129,.22); }
    .wc-outcome:nth-child(2) { --out-c1: #F59E0B; --out-c2: #D97706; --out-shadow: rgba(245,158,11,.22); }
    .wc-outcome:nth-child(3) { --out-c1: #1779B8; --out-c2: #0F5485; --out-shadow: rgba(23,121,184,.22); }
    .wc-outcome:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 36px rgba(7,25,46,.08), 0 0 0 1px rgba(41,171,226,.14);
    }
    .wc-outcome:hover::before { width: 4px; }

    /* -- TRUST MARQUEE strip: add "Trusted by" label back in slim form -- */
    .wc-trust-marquee-wrap { padding: 20px 0; }
    .wc-trust-marquee-wrap::before {
      content: 'Trusted by'; display: block; text-align: center;
      font-family: var(--font-b); font-size: 11px; font-weight: 700;
      letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
      margin-bottom: 14px;
    }

    /* -- FINAL CTA: polish the inline form -- */
    .wc-final-cta { padding-top: 96px; padding-bottom: 96px; }
    .wc-final-inner h2 { letter-spacing: -1px; }
    .inline-quote-form { max-width: 640px; }

    /* -- Kill legacy ghost-number holdouts -- */
    .ghost-number { display: none !important; }

    @media (max-width: 900px) {
      .wc-outcome { padding: 24px 16px; }
      .wc-outcome-num { font-size: 2.25rem; }
    }

    /* Reduced motion respect */
    @media (prefers-reduced-motion: reduce) {
      .flow-node:hover,
      .wc-outcome:hover { transform: none; }
    }

/* ═══ §2 (from inline block) ═══════════════════════════════════ */
@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); }
}

/* ═══ §3 (from inline block) ═══════════════════════════════════ */
.wc-calc-section [x-cloak] { display: none !important; }
/* 2026-04-16 mobile button fix: something in site.css was giving gate buttons 48px
   top/bottom padding on mobile. Force our compact sizing here. */
.wc-calc-section .lq-cta-primary,
.wc-calc-section .lq-cta-secondary,
.lq-gate .lq-cta-primary,
.lq-gate .lq-cta-secondary {
  padding: 12px 18px !important;
  min-height: 48px !important;
  height: auto !important;
  max-height: none !important;
  line-height: 1.3 !important;
}
.wc-calc-section .lq-cta-primary,
.lq-gate .lq-cta-primary {
  min-height: 52px !important;
  padding: 14px 20px !important;
}
.lq-gate {
  margin-top: 24px;
  background: #fff;
  border-radius: 18px;
  padding: 28px 22px 24px;
  box-shadow: 0 1px 2px rgba(13,24,41,0.04), 0 24px 64px -24px rgba(13,24,41,0.3);
  border: 1px solid rgba(13,24,41,0.08);
  color: #0D1829;
  text-align: left;
  position: relative;
}
.lq-gate-h2 {
  font-family: var(--font-a, Georgia, serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: #0D1829;
  padding-right: 40px;
}
.lq-gate-sub { font-size: 14.5px; line-height: 1.55; color: #2B3A4F; margin: 0 0 18px; }
.lq-gate-close {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: 0; font-size: 26px; line-height: 1;
  color: #8A97A8; cursor: pointer; padding: 6px 10px; border-radius: 6px;
  width: 40px; height: 40px;
}
.lq-gate-close:hover { color: #0D1829; background: rgba(13,24,41,0.05); }
.lq-gate-form { display: flex; flex-direction: column; gap: 14px; }
.lq-lossrun-field { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; }
.lq-lossrun-field legend { padding: 0; margin-bottom: 8px; }
.lq-radio {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: rgba(13,24,41,0.02); border: 1px solid rgba(13,24,41,0.08);
  border-radius: 10px; cursor: pointer; font-size: 14.5px; line-height: 1.4; color: #2B3A4F;
  transition: background 180ms ease-out, border-color 180ms ease-out;
}
.lq-radio:hover { background: rgba(39,71,232,0.03); border-color: rgba(39,71,232,0.2); }
.lq-radio input { accent-color: #2747E8; }
.lq-hint { font-size: 12.5px; color: #5B6B7E; margin: 2px 0 0; }
.lq-gate-success { text-align: center; padding: 12px 0; }
.lq-gate-success h3 { font-family: var(--font-a, Georgia, serif); font-weight: 500; font-size: 22px; margin: 0 0 8px; }
kbd {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px;
  background: rgba(13,24,41,0.06); border: 1px solid rgba(13,24,41,0.1);
  border-radius: 4px; padding: 2px 6px; color: #2B3A4F;
}
@media (min-width: 900px) {
  .wc-calc-section { padding: 72px 24px 88px; }
  .wc-calc-inner { max-width: 760px; }
  .wc-calc-h1 { font-size: 52px; }
  .lq-glass-panel { padding: 36px 32px 32px; }
  .lq-ctas { flex-direction: row; }
  .lq-ctas > * { flex: 1 1 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WORKERS-COMP SIGNATURE DESIGN — 2026-05-19 pass 9.

   This page's signature element is the Alpine WC rate calculator. The
   page's hero CTA "See My Rate Range" jumps the user there. Adding two
   page-specific design touches:
     1. A subtle ambient halo (orange) around the wc-calc-section so the
        widget visually anchors as "the moment" of the page
     2. A breathing glow on the hero primary CTA to draw the eye toward
        the calculator before scroll
   ═══════════════════════════════════════════════════════════════════════════ */

.wc-calc-section {
  position: relative;
  isolation: isolate;
}
.wc-calc-section::before {
  content: '';
  position: absolute;
  inset: -1px;
  background:
    radial-gradient(60% 40% at 50% 100%, rgba(249, 115, 22, 0.10) 0%, transparent 60%),
    radial-gradient(50% 30% at 50% 0%,  rgba(20, 121, 163, 0.12) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}

/* Hero "See My Rate Range" CTA — page-specific pulse points to the
   calculator below. Only fires when the user hasn't scrolled to it yet. */
.svc-hero a[href="#wc-calculator"].btn-primary {
  animation: wc-cta-attract 4s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes wc-cta-attract {
  0%, 100% {
    box-shadow:
      0 1px 2px rgba(234, 88, 12, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      0 0 0 0 rgba(249, 115, 22, 0.35);
  }
  50% {
    box-shadow:
      0 1px 2px rgba(234, 88, 12, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      0 0 0 8px rgba(249, 115, 22, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-hero a[href="#wc-calculator"].btn-primary { animation: none !important; }
}

/* Big "23%" hero stat — boost the avg-premium-cut number wherever it
   appears in proof-bar or logo-strip so it reads as the headline number. */
.wc-page-hero-savings,
.svc-proof__num:has([data-count-target="23"]) {
  position: relative;
}

/* Stronger panel separation: proof bar a hair darker navy (#04101F) than the
   mid-CTA above it (#07192E), so the Ascent Seam divider between them reads as
   two distinct panels rather than one slab. */
#wc-proof { background-color: #04101F; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-BOIL-THE-LAKE — workers-comp page-local fixes
   Viewport: 390x844 (iPhone 14 Pro). Desktop untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* ── smallText: kbd element — raise 11px → 14px (mono/data floor) ── */
  /* Affects the "Press <kbd>Enter</kbd> when done." hint in the calculator */
  kbd {
    font-size: 14px;
  }

  /* ── grids: lq-combo-item — collapse 3-col grid to 2-col at mobile ──
     The 3rd column (.lq-combo-industry) uses white-space:nowrap which
     crushes the label column on a 390px screen. Move industry tag to
     a second row spanning both remaining columns.                        */
  .lq-combo-item {
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto;
    row-gap: 2px;
  }

  .lq-combo-industry {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    white-space: normal;
    font-size: 10px;
    line-height: 1.3;
  }

  .lq-combo-code {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    /* Allow the code pill to shrink slightly on very narrow screens */
    font-size: 11px;
    padding: 2px 4px;
  }

  .lq-combo-label {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
  }
}