/* contact-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; }
    @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; }
      .glass, .quote-form-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, .92) !important;
      }
    }

    /* ── PAGE-UNIQUE TOKENS ─────────────────────────────── */
    /* Removed redundant tokens already defined in site.css (verified 2026-05-05).
       Page-unique kept: --red (form errors), --glow-blue, --glow-orange. */
    :root {
      --red:        #EF4444;
      --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);
    }

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

    /* ── 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);
      position: relative;
    }
    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 */

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

    /* ── HERO SECTION — Premium glass pattern (matches services-hub) ── */
    .contact-hero {
      position: relative;
      overflow: hidden;
      padding: 88px 32px 96px;
      background:
        linear-gradient(180deg, rgba(234,243,252,.94) 0%, rgba(220,234,249,.90) 55%, rgba(210,226,244,.86) 100%);
      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);
    }
    /* ── PHOTO HERO (2026-06-03) — real office photo + navy scrim, matching the
       sitewide info-page hero system. Light glass → navy; text flips to light.
       Form card + phone button already read on dark. ── */
    .contact-hero.contact-hero--photo{background:#0E1934 !important;border-bottom:none !important;box-shadow:none !important;}
    .contact-hero.contact-hero--photo::before{display:none !important;}
    .contact-hero--photo .contact-dot-grid,.contact-hero--photo .hero-line-grid{display:none !important;}
    .contact-hero--photo .contact-hero-photo{position:absolute;inset:0;z-index:0;background-position:center right;background-size:cover;background-repeat:no-repeat;}
    .contact-hero--photo .contact-hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,25,52,.96) 0%,rgba(14,25,52,.88) 36%,rgba(14,25,52,.64) 66%,rgba(14,25,52,.42) 100%);}
    .contact-hero--photo .contact-hero-inner{position:relative;z-index:2;}
    .contact-hero--photo .contact-h1{color:#fff !important;}
    .contact-hero--photo .contact-sub{color:#C9D2E8 !important;}
    .contact-hero--photo .contact-eyebrow{color:#fff !important;background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.22) !important;}
    .contact-hero--photo .hero-trust-item strong{color:#fff !important;}
    .contact-hero--photo .hero-trust-item .hero-trust-sub{color:#AFC0DC !important;}
    .contact-hero--photo .hero-trust-item svg{stroke:#F9A56A !important;}
    @media (max-width:680px){.contact-hero--photo .contact-hero-photo{background-position:center;}.contact-hero--photo .contact-hero-scrim{background:linear-gradient(180deg,rgba(14,25,52,.80),rgba(14,25,52,.93));}}
    /* Vivid mesh gradient orbs — opacity bumped from 8% to 28-32% */
    .contact-hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 78% 88% at -6% 8%,  rgba(41,171,226,.32) 0%, transparent 58%),
        radial-gradient(ellipse 62% 72% at 108% 88%, rgba(249,115,22,.24) 0%, transparent 54%),
        radial-gradient(ellipse 42% 48% at 52% 46%, rgba(123,33,162,.08) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }
    /* Dot-grid pattern overlay */
    .contact-dot-grid {
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(7,25,46,.05) 1px, transparent 1px);
      background-size: 32px 32px;
      z-index: 1;
      pointer-events: none;
      -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 40%, transparent 100%);
      mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 40%, transparent 100%);
    }
    /* Line-grid overlay */
    .hero-line-grid {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(41,171,226,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(41,171,226,.08) 1px, transparent 1px);
      background-size: 64px 64px;
      -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 35%, transparent 100%);
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 35%, transparent 100%);
      z-index: 1;
      pointer-events: none;
    }
    /* Legacy elements — hidden in favor of ::before mesh */
    .contact-hero-bg,
    .contact-lobby-bg,
    .contact-hero-orbs { display: none; }

    /* ── SOCIAL PROOF STRIP ───────────────────────────── */
    .social-proof-strip {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(41,171,226,.06);
      border: 1px solid rgba(41,171,226,.14);
      border-radius: 12px;
      padding: 12px 20px;
      margin-bottom: 0;
      width: fit-content;
    }
    .social-proof-count {
      font-family: var(--font-h);
      font-size: 22px;
      font-weight: 700;
      background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      white-space: nowrap;
    }
    .social-proof-label {
      font-family: var(--font-b);
      font-size: 13.5px;
      font-weight: 500;
      color: var(--muted);
      line-height: 1.3;
    }
    .social-proof-faces {
      display: flex;
      align-items: center;
    }
    .social-proof-face {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
      border: 2px solid white;
      margin-left: -8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 700;
      color: white;
      flex-shrink: 0;
    }
    .social-proof-face:first-child { margin-left: 0; }

    /* Floating gradient orbs */
    .contact-hero-orbs {
      position: absolute; inset: 0;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
    }
    .contact-orb {
      position: absolute;
      border-radius: 9999px;
      animation: orbDriftContact var(--orb-dur, 14s) ease-in-out infinite;
      animation-delay: var(--orb-delay, 0s);
      filter: blur(2px);
    }
    @keyframes orbDriftContact {
      0%, 100% { transform: translateY(0) translateX(0); }
      33% { transform: translateY(-16px) translateX(6px); }
      66% { transform: translateY(8px) translateX(-5px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .contact-orb { animation: none; }
    }
    /* Lobby background behind form area */
    .contact-lobby-bg {
      position: absolute;
      top: 0; right: 0;
      width: 55%;
      height: 100%;
      background: image-set(url('/generated-images/nb-pro-contact.avif') type('image/avif'), url('/generated-images/nb-pro-contact.webp') type('image/webp'), url('/generated-images/nb-pro-contact.jpeg') type('image/jpeg')) center/cover no-repeat;
      opacity: 0.04;
      z-index: 0;
      pointer-events: none;
      mask-image: linear-gradient(to left, rgba(0,0,0,.6) 0%, transparent 100%);
      -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.6) 0%, transparent 100%);
    }
    .contact-hero-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(440px, 1fr) minmax(520px, 1fr);
      gap: 64px;
      align-items: start;
      position: relative;
      z-index: 2;
    }
    .contact-hero-left {
      display: flex;
      flex-direction: column;
      gap: 22px;
      padding-top: 8px;
    }
    .contact-hero-right {
      position: relative;
    }
    /* Eyebrow badge */
    .contact-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 16px;
      border-radius: 999px;
      background: rgba(249,115,22,.10);
      border: 1px solid rgba(249,115,22,.20);
      color: var(--orange);
      font-family: var(--font-b);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      width: fit-content;
    }
    .contact-eyebrow-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--orange);
      animation: pulse 2.5s ease-in-out infinite;
      flex-shrink: 0;
    }
    .contact-h1 {
      font-family: var(--font-h);
      font-size: clamp(40px, 5vw, 60px);
      font-weight: 800;
      line-height: 1.04;
      letter-spacing: -1.6px;
      color: var(--navy);
      margin-bottom: 0;
      max-width: 620px;
    }
    .contact-sub {
      font-family: var(--font-b);
      font-size: 18px;
      font-weight: 400;
      color: var(--muted);
      line-height: 1.62;
      max-width: 540px;
      margin-bottom: 8px;
    }
    /* Primary phone CTA — premium glow treatment */
    .contact-hero-phone {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 22px 14px 18px;
      border-radius: 14px;
      background: linear-gradient(135deg, #29ABE2 0%, #1779B8 100%);
      color: #fff;
      font-family: var(--font-h);
      font-size: 16px;
      font-weight: 700;
      text-decoration: none;
      letter-spacing: -.2px;
      border: 1.5px solid rgba(255,255,255,.22);
      box-shadow: var(--glow-blue), 0 14px 36px rgba(41,171,226,.28);
      transition: transform .2s var(--spring), box-shadow .25s var(--ease);
      width: fit-content;
      margin-top: 6px;
    }
    .contact-hero-phone:hover {
      transform: translateY(-2px);
      box-shadow: var(--glow-blue), 0 18px 46px rgba(41,171,226,.38);
    }
    .contact-hero-phone svg {
      width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.4;
    }
    .contact-hero-phone .phone-sub {
      display: block;
      font-family: var(--font-b);
      font-size: 11.5px;
      font-weight: 500;
      color: rgba(255,255,255,.82);
      letter-spacing: .3px;
      margin-top: 2px;
    }

    /* ── GLASS FORM CARD — premium pattern ──────────────── */
    .quote-form-card {
      position: relative;
      width: 100%;
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(28px) saturate(1.8);
      -webkit-backdrop-filter: blur(28px) saturate(1.8);
      border: 1px solid rgba(226,236,244,.6);
      border-radius: 24px;
      padding: 44px 42px 38px;
      box-shadow: var(--glass-shadow);
      transition: box-shadow .35s var(--ease), transform .35s var(--ease);
    }
    .quote-form-card::before {
      content: '';
      position: absolute;
      top: 0; left: 24px; right: 24px;
      height: 2px;
      background: linear-gradient(90deg, transparent 0%, rgba(41,171,226,.45) 30%, rgba(249,115,22,.5) 70%, transparent 100%);
      border-radius: 2px;
      pointer-events: none;
    }
    .quote-form-card:focus-within {
      box-shadow:
        0 0 0 0.5px rgba(255,255,255,.8),
        0 0 0 1px rgba(41,171,226,.10),
        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(41,171,226,.08);
    }
    /* Eyebrow label above progress */
    .quote-form-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-b);
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 6px;
    }
    .quote-form-eyebrow::before {
      content: '';
      width: 24px;
      height: 2px;
      background: var(--orange);
      border-radius: 2px;
    }
    .quote-form-title {
      font-family: var(--font-h);
      font-size: 22px;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -.4px;
      margin-bottom: 4px;
    }
    .quote-form-kicker {
      font-family: var(--font-b);
      font-size: 14px;
      color: var(--muted);
      margin-bottom: 28px;
      line-height: 1.5;
    }

    /* ── PROGRESS BAR ──────────────────────────────────── */
    .form-progress {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32px;
      position: relative;
    }
    .form-progress::before {
      content: '';
      position: absolute;
      top: 16px;
      left: 40px;
      right: 40px;
      height: 3px;
      background: var(--border);
      border-radius: 2px;
      z-index: 0;
    }
    .progress-fill {
      position: absolute;
      top: 16px;
      left: 40px;
      height: 3px;
      background: linear-gradient(90deg, var(--blue) 0%, #38B2AC 50%, var(--orange) 100%);
      border-radius: 2px;
      z-index: 1;
      transition: width 0.5s var(--ease);
      width: 0%;
      box-shadow: 0 0 8px rgba(41,171,226,.3);
    }
    .step-indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      z-index: 2;
      position: relative;
    }
    .step-dot {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--white);
      border: 2.5px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-b);
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
      transition: all 0.3s var(--ease);
      box-shadow: 0 0 0 5px #fff;
    }
    .step-indicator.active .step-dot {
      border-color: var(--blue);
      color: var(--blue);
      background: #EBF7FD;
      box-shadow: 0 0 0 5px #fff, 0 0 0 9px rgba(41,171,226,.10);
      animation: step-dot-glow 2s ease-in-out infinite;
    }
    @keyframes step-dot-glow {
      0%, 100% { box-shadow: 0 0 0 5px #fff, 0 0 0 9px rgba(41,171,226,.10); }
      50% { box-shadow: 0 0 0 5px #fff, 0 0 0 11px rgba(41,171,226,.18), 0 0 16px rgba(41,171,226,.12); }
    }
    .step-indicator.completed .step-dot {
      border-color: var(--green);
      background: var(--green);
      color: #fff;
      box-shadow: 0 0 0 5px #fff;
      animation: step-complete-pop .4s var(--spring);
    }
    @keyframes step-complete-pop {
      0% { transform: scale(1); }
      40% { transform: scale(1.25); }
      100% { transform: scale(1); }
    }
    .step-label {
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: var(--muted);
      transition: color 0.3s;
      white-space: nowrap;
    }
    .step-indicator.active .step-label { color: var(--blue); }
    .step-indicator.completed .step-label { color: var(--green); }

    /* ── FORM FIELDS ───────────────────────────────────── */
    .form-step {
      display: none;
      opacity: 0;
      transform: translateX(30px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .form-step.active {
      display: block;
      opacity: 1;
      transform: translateX(0);
    }
    .form-step.slide-out-left {
      display: block;
      opacity: 0;
      transform: translateX(-30px);
    }
    .form-step.slide-out-right {
      display: block;
      opacity: 0;
      transform: translateX(30px);
    }
    .form-step.slide-enter-left {
      transform: translateX(-30px);
    }
    .form-step.slide-enter-right {
      transform: translateX(30px);
    }

    .field-group {
      margin-bottom: 14px;
      position: relative;
    }
    .field-group label {
      display: block;
      font-family: var(--font-b);
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 6px;
      transition: color .2s, transform .2s, font-size .2s;
    }
    .field-group label .req {
      color: var(--red);
      margin-left: 2px;
    }
    /* Floating label effect: label moves up and shrinks on focus-within */
    .field-group:focus-within label {
      color: var(--blue-dark);
      transform: translateY(-2px);
      font-size: 12px;
    }
    .field-group input[type="text"],
    .field-group input[type="email"],
    .field-group input[type="tel"],
    .field-group select,
    .field-group textarea {
      width: 100%;
      height: 48px;
      padding: 0 16px;
      font-family: var(--font-b);
      font-size: 15px;
      color: var(--text);
      background: var(--off);
      border: 1.5px solid var(--border);
      border-radius: 12px;
      transition: border-color 0.25s, box-shadow 0.25s, background 0.2s, transform 0.15s;
      -webkit-appearance: none;
      appearance: none;
    }
    .field-group textarea {
      height: auto;
      min-height: 90px;
      padding: 14px 16px;
      resize: vertical;
      line-height: 1.5;
    }
    .field-group select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235E7A93' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 40px;
      cursor: pointer;
    }
    .field-group input:focus,
    .field-group select:focus,
    .field-group textarea:focus {
      outline: none;
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(41,171,226,.15), 0 4px 12px rgba(41,171,226,.08);
      background: var(--white);
      animation: focus-ring-pulse 1.5s ease-in-out;
    }
    @keyframes focus-ring-pulse {
      0% { box-shadow: 0 0 0 0px rgba(41,171,226,.3), 0 4px 12px rgba(41,171,226,.08); }
      50% { box-shadow: 0 0 0 5px rgba(41,171,226,.10), 0 4px 12px rgba(41,171,226,.06); }
      100% { box-shadow: 0 0 0 3px rgba(41,171,226,.15), 0 4px 12px rgba(41,171,226,.08); }
    }
    .field-group input.error,
    .field-group select.error,
    .field-group textarea.error {
      border-color: var(--red);
      box-shadow: 0 0 0 3px rgba(239,68,68,.10);
      animation: field-shake .4s var(--ease);
    }
    @keyframes field-shake {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-6px); }
      40% { transform: translateX(5px); }
      60% { transform: translateX(-4px); }
      80% { transform: translateX(2px); }
    }
    .field-error {
      display: none;
      font-family: var(--font-b);
      font-size: 13px;
      color: var(--red);
      margin-top: 5px;
    }
    .field-group input.error + .field-error,
    .field-group select.error + .field-error,
    .field-group textarea.error + .field-error {
      display: block;
    }
    /* State autocomplete dropdown */
    .state-dropdown {
      display: none; position: absolute; top: 100%; left: 0; right: 0;
      background: #fff; border: 1.5px solid var(--border); border-top: none;
      border-radius: 0 0 12px 12px; max-height: 200px; overflow-y: auto;
      z-index: 50; box-shadow: 0 8px 24px rgba(7,25,46,.12);
    }
    .state-dropdown.open { display: block; }
    .state-opt {
      padding: 10px 16px; font-family: var(--font-b); font-size: 14px;
      color: var(--navy); cursor: pointer; transition: background .1s;
    }
    .state-opt:hover, .state-opt.highlighted { background: rgba(41,171,226,.08); color: var(--blue); }
    .state-opt:last-child { border-radius: 0 0 10px 10px; }
    .state-dropdown::-webkit-scrollbar { width: 4px; }
    .state-dropdown::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

    .field-group input::placeholder,
    .field-group textarea::placeholder {
      color: #9CB0C4;
    }

    /* Character counter */
    .char-count {
      text-align: right;
      font-family: var(--font-b);
      font-size: 12px;
      color: var(--muted);
      margin-top: 4px;
    }

    /* ── CHECKBOX GROUP ────────────────────────────────── */
    .checkbox-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }
    .checkbox-item {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      padding: 7px 10px;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      background: var(--off);
      transition: all 0.2s;
      user-select: none;
    }
    .checkbox-item:hover {
      border-color: var(--blue);
      background: rgba(41,171,226,.04);
    }
    .checkbox-item.checked {
      border-color: var(--blue);
      background: rgba(41,171,226,.08);
    }
    .checkbox-item input[type="checkbox"] {
      display: none;
    }
    .check-box {
      width: 20px;
      height: 20px;
      border-radius: 5px;
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s var(--spring);
      flex-shrink: 0;
    }
    .checkbox-item.checked .check-box {
      background: var(--blue);
      border-color: var(--blue);
      transform: scale(1.05);
    }
    .check-box svg {
      width: 12px;
      height: 12px;
      stroke: #fff;
      stroke-width: 3;
      fill: none;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.15s var(--spring);
    }
    .checkbox-item.checked .check-box svg {
      opacity: 1;
      transform: scale(1);
    }
    .check-label {
      font-family: var(--font-b);
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.3;
    }

    /* ── FORM NAVIGATION ───────────────────────────────── */
    .form-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 28px;
      gap: 12px;
    }
    .btn-back {
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 600;
      color: var(--muted);
      background: none;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 4px;
      transition: color 0.15s;
    }
    .btn-back:hover { color: var(--text); }
    .btn-back svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

    .btn-next {
      font-family: var(--font-b);
      font-size: 14.5px;
      font-weight: 700;
      color: var(--blue);
      background: rgba(41,171,226,.08);
      border: 1.5px solid rgba(41,171,226,.2);
      border-radius: 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 12px 24px;
      transition: all 0.2s var(--ease);
      margin-left: auto;
    }
    .btn-next:hover {
      background: rgba(41,171,226,.14);
      border-color: var(--blue);
      box-shadow: var(--glow-blue);
      transform: translateY(-1px);
    }
    .btn-next svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

    /* ── SUBMIT BUTTON ─────────────────────────────────── */
    .submit-btn {
      position: relative;
      background: var(--orange);
      color: white;
      font-family: var(--font-h);
      font-weight: 700;
      font-size: 17px;
      letter-spacing: 0.2px;
      padding: 16px 36px;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      width: 100%;
      box-shadow: 0 4px 14px rgba(249,115,22,.18);
      transition: all 0.25s var(--ease);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 56px;
    }
    .submit-btn:hover {
      background: #EA680C;
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(249,115,22,.35);
    }
    .submit-btn:active { transform: translateY(0); }
    .submit-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }
    .submit-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
    /* Submit button shimmer sweep */
    .submit-btn {
      overflow: hidden;
    }
    .submit-btn::after {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
      transform: translateX(-200%) skewX(-20deg);
      animation: shimmer-sweep 3.5s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes shimmer-sweep {
      0% { transform: translateX(-200%) skewX(-20deg); }
      60%, 100% { transform: translateX(380%) skewX(-20deg); }
    }

    .form-fine-print {
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .fine-print-line {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-b);
      font-size: 13px;
      color: var(--muted);
    }
    .fine-print-line svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    /* ── SUCCESS STATE ─────────────────────────────────── */
    .form-success {
      display: none;
      text-align: center;
      padding: 20px 0;
      animation: fadeSlideIn 0.5s var(--ease);
      position: relative;
      overflow: hidden;
    }
    .form-success.active { display: block; }

    /* Confetti burst - CSS only */
    .form-success.active::before,
    .form-success.active::after {
      content: '';
      position: absolute;
      top: 30px;
      left: 50%;
      width: 6px;
      height: 6px;
      border-radius: 2px;
    }
    .form-success.active::before {
      box-shadow:
        -60px -30px 0 #29ABE2, -40px -50px 0 #F97316, -20px -20px 0 #22C55E,
        0px -55px 0 #E8125C, 20px -25px 0 #7B21A2, 40px -45px 0 #29ABE2,
        60px -35px 0 #F97316, -50px -60px 0 #22C55E, 50px -55px 0 #E8125C,
        -30px -70px 0 #F97316, 30px -65px 0 #29ABE2, 70px -40px 0 #22C55E,
        -70px -50px 0 #7B21A2;
      animation: confetti-pop .8s var(--ease) forwards;
    }
    .form-success.active::after {
      box-shadow:
        -55px -40px 0 #F97316, -35px -55px 0 #22C55E, -15px -30px 0 #7B21A2,
        5px -60px 0 #29ABE2, 25px -35px 0 #E8125C, 45px -50px 0 #22C55E,
        65px -30px 0 #F97316, -45px -65px 0 #29ABE2, 55px -60px 0 #7B21A2,
        -65px -45px 0 #E8125C;
      animation: confetti-pop .8s var(--ease) forwards .1s;
      opacity: 0;
    }
    @keyframes confetti-pop {
      0% {
        transform: translateY(0) scale(0);
        opacity: 0;
      }
      30% {
        transform: translateY(-20px) scale(1);
        opacity: 1;
      }
      100% {
        transform: translateY(60px) scale(.5);
        opacity: 0;
      }
    }

    .success-check {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--green);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
      animation: scaleSpring 0.5s var(--spring);
      box-shadow: 0 8px 24px rgba(34,197,94,.3);
      position: relative;
      z-index: 2;
    }
    @keyframes scaleSpring {
      from { transform: scale(0) rotate(-45deg); }
      60% { transform: scale(1.15) rotate(5deg); }
      to { transform: scale(1) rotate(0deg); }
    }
    /* Animated SVG stroke for the checkmark */
    .success-check svg {
      width: 40px; height: 40px;
      stroke: #fff;
      stroke-width: 2.5;
      fill: none;
      stroke-dasharray: 40;
      stroke-dashoffset: 40;
      animation: draw-check .6s var(--ease) .3s forwards;
    }
    @keyframes draw-check {
      to { stroke-dashoffset: 0; }
    }
    .success-title {
      font-family: var(--font-h);
      font-size: 22px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 20px;
      animation: success-bounce-in .6s var(--spring) .2s both;
    }
    @keyframes success-bounce-in {
      0% { opacity: 0; transform: translateY(20px) scale(.9); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    .success-steps {
      text-align: left;
      margin: 0 auto;
      max-width: 360px;
    }
    .success-step {
      display: flex;
      gap: 14px;
      margin-bottom: 16px;
      align-items: flex-start;
      animation: success-bounce-in .5s var(--spring) both;
    }
    .success-step:nth-child(1) { animation-delay: .4s; }
    .success-step:nth-child(2) { animation-delay: .55s; }
    .success-step:nth-child(3) { animation-delay: .7s; }
    .success-step-num {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(41,171,226,.1);
      color: var(--blue);
      font-family: var(--font-b);
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .success-step-text {
      font-family: var(--font-b);
      font-size: 15px;
      color: var(--text);
      line-height: 1.5;
    }
    .success-phone {
      margin-top: 24px;
      font-family: var(--font-b);
      font-size: 14px;
      color: var(--muted);
    }
    .success-phone a {
      color: var(--blue);
      font-weight: 600;
      text-decoration: none;
    }

    /* ── HERO TRUST BULLETS (left col, below subhead) ──── */
    .hero-trust-stack {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 18px;
      margin-top: 6px;
      max-width: 560px;
    }
    .hero-trust-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-family: var(--font-b);
      font-size: 14px;
      color: var(--text);
      line-height: 1.45;
    }
    .hero-trust-item svg {
      width: 18px; height: 18px;
      flex-shrink: 0;
      stroke: var(--blue-dark);
      fill: none;
      stroke-width: 2.4;
      margin-top: 1px;
    }
    .hero-trust-item strong {
      font-weight: 700;
      color: var(--navy);
      display: block;
      font-size: 14px;
    }
    .hero-trust-item .hero-trust-sub {
      display: block;
      font-size: 13px;
      color: var(--muted);
      margin-top: 1px;
    }

    /* ══════════════════════════════════════════════════════
       SHARED SECTION SHELL — matches services-hub .shr-sec
    ══════════════════════════════════════════════════════ */
    .cq-sec { position: relative; padding: 96px 32px; }
    .cq-sec--off { background: var(--off); }
    .cq-sec--white { background: #FFFFFF; }
    .cq-sec--navy { background: linear-gradient(145deg, #07192E 0%, #0D2B45 60%, #0E3155 100%); color: #fff; }
    .cq-inner { max-width: 1200px; margin: 0 auto; position: relative; }
    .cq-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
    .cq-eyebrow {
      display: inline-block;
      font-family: var(--font-b); font-size: 11.5px; font-weight: 800;
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--orange); margin-bottom: 14px;
    }
    .cq-eyebrow.blue { color: var(--blue-dark); }
    .cq-head h2 {
      font-family: var(--font-h); font-weight: 800;
      font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08; letter-spacing: -.8px;
      color: var(--navy); margin: 0 0 14px;
    }
    .cq-sec--navy .cq-head h2 { color: #fff; }
    .cq-head p {
      font-family: var(--font-b); font-size: 17px; line-height: 1.65;
      color: var(--muted); margin: 0;
    }
    .cq-sec--navy .cq-head p { color: rgba(255,255,255,.78); }
    .sec-heading { font-family: var(--font-h); font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; color: var(--navy); text-align: center; margin-bottom: 48px; letter-spacing: -.6px; }

    /* ══════════════════════════════════════════════════════
       YOUR TEAM SPOTLIGHT — reuse services-hub pattern
    ══════════════════════════════════════════════════════ */
    .cq-advisor-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
      margin-bottom: 56px;
    }
    .cq-advisor-card {
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(20px) saturate(1.3);
      -webkit-backdrop-filter: blur(20px) saturate(1.3);
      border: 1px solid rgba(226,236,244,.7);
      border-radius: 18px;
      padding: 32px 24px 26px;
      text-align: center;
      box-shadow: var(--glass-shadow);
      transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
      position: relative;
    }
    .cq-advisor-card::before {
      content: '';
      position: absolute;
      top: 0; left: 20%; right: 20%; height: 2px;
      background: linear-gradient(90deg, transparent, rgba(249,115,22,.5), transparent);
      border-radius: 2px;
      opacity: 0; transition: opacity .3s var(--ease);
    }
    .cq-advisor-card:hover {
      transform: translateY(-6px);
      border-color: rgba(41,171,226,.3);
      box-shadow: var(--glass-shadow-hover, 0 0 0 1px rgba(41,171,226,.12), 0 28px 72px rgba(7,25,46,.12), 0 48px 96px rgba(41,171,226,.08));
    }
    .cq-advisor-card:hover::before { opacity: 1; }
    .cq-advisor-photo {
      width: 118px; height: 118px; border-radius: 50%;
      margin: 0 auto 18px; overflow: hidden;
      border: 4px solid #FFFFFF;
      box-shadow: 0 6px 20px rgba(7,25,46,.14), 0 0 0 1.5px rgba(41,171,226,.22);
      transition: transform .3s var(--spring);
    }
    .cq-advisor-card:hover .cq-advisor-photo { transform: scale(1.04); }
    .cq-advisor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cq-advisor-name {
      font-family: var(--font-h); font-size: 18px; font-weight: 800;
      color: var(--navy); margin: 0 0 4px; letter-spacing: -.3px;
    }
    .cq-advisor-role {
      font-family: var(--font-b); font-size: 11.5px; font-weight: 800;
      color: var(--orange); letter-spacing: 1px; text-transform: uppercase;
      margin: 0 0 12px;
    }
    .cq-advisor-bio {
      font-family: var(--font-b); font-size: 13.5px; line-height: 1.55;
      color: var(--muted); margin: 0 0 16px;
    }
    .cq-advisor-book {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-b); font-size: 13px; font-weight: 700;
      color: var(--blue-dark); text-decoration: none;
      padding: 8px 14px; border-radius: 10px;
      background: rgba(41,171,226,.08);
      border: 1px solid rgba(41,171,226,.22);
      transition: all .2s var(--ease);
    }
    .cq-advisor-book:hover {
      background: rgba(41,171,226,.14);
      border-color: var(--blue);
      transform: translateY(-1px);
      box-shadow: var(--glow-blue);
    }
    .cq-advisor-book svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; }

    /* ══════════════════════════════════════════════════════
       ALT CONTACT METHODS — 3 glass cards
    ══════════════════════════════════════════════════════ */
    .cq-contact-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
    .cq-contact-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 18px;
      padding: 32px 30px 30px;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(20px) saturate(1.3);
      -webkit-backdrop-filter: blur(20px) saturate(1.3);
      border: 1px solid rgba(226,236,244,.7);
      border-radius: 20px;
      box-shadow: var(--glass-shadow);
      text-decoration: none;
      color: inherit;
      position: relative;
      overflow: hidden;
      transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
    }
    .cq-contact-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 100% 60% at 0% 0%, rgba(41,171,226,.08), transparent 60%);
      opacity: 0; transition: opacity .3s var(--ease);
      pointer-events: none;
    }
    .cq-contact-card:hover {
      transform: translateY(-4px);
      border-color: rgba(41,171,226,.28);
      box-shadow: 0 0 0 1px rgba(41,171,226,.10), 0 18px 48px rgba(7,25,46,.10), 0 32px 80px rgba(41,171,226,.06);
    }
    .cq-contact-card:hover::before { opacity: 1; }
    .cq-contact-card--orange:hover {
      border-color: rgba(249,115,22,.32);
      box-shadow: 0 0 0 1px rgba(249,115,22,.12), 0 18px 48px rgba(7,25,46,.10), 0 32px 80px rgba(249,115,22,.08);
    }
    .cq-contact-ico {
      width: 56px; height: 56px;
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, rgba(41,171,226,.14) 0%, rgba(41,171,226,.06) 100%);
      border: 1px solid rgba(41,171,226,.18);
      position: relative;
      z-index: 1;
    }
    .cq-contact-card--orange .cq-contact-ico {
      background: linear-gradient(135deg, rgba(249,115,22,.14) 0%, rgba(249,115,22,.06) 100%);
      border-color: rgba(249,115,22,.22);
    }
    .cq-contact-ico svg { width: 26px; height: 26px; stroke: var(--blue-dark); fill: none; stroke-width: 2; }
    .cq-contact-card--orange .cq-contact-ico svg { stroke: var(--orange); }
    .cq-contact-label {
      font-family: var(--font-b); font-size: 11px; font-weight: 800;
      letter-spacing: 1.4px; text-transform: uppercase;
      color: var(--muted);
      position: relative; z-index: 1;
    }
    .cq-contact-primary {
      font-family: var(--font-h); font-size: 22px; font-weight: 800;
      color: var(--navy); letter-spacing: -.4px;
      line-height: 1.2;
      margin: -6px 0 0;
      position: relative; z-index: 1;
    }
    .cq-contact-secondary {
      font-family: var(--font-b); font-size: 14px;
      color: var(--muted); line-height: 1.55;
      margin: 0;
      position: relative; z-index: 1;
    }
    .cq-contact-foot {
      margin-top: auto;
      padding-top: 8px;
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-b); font-size: 13px; font-weight: 700;
      color: var(--blue-dark);
      position: relative; z-index: 1;
    }
    .cq-contact-card--orange .cq-contact-foot { color: var(--orange); }
    .cq-contact-foot svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; }

    /* ══════════════════════════════════════════════════════
       COMPLIANCE TRUST STRIP
    ══════════════════════════════════════════════════════ */
    .cq-trust-strip {
      background: var(--off);
      padding: 56px 32px;
      border-top: 1px solid rgba(226,236,244,.7);
      border-bottom: 1px solid rgba(226,236,244,.7);
    }
    .cq-trust-strip-inner {
      max-width: 1100px; margin: 0 auto;
      display: flex; flex-direction: column; align-items: center; gap: 24px;
    }
    .cq-trust-strip-label {
      font-family: var(--font-b); font-size: 11.5px; font-weight: 800;
      letter-spacing: 1.6px; text-transform: uppercase;
      color: var(--muted);
    }
    .cq-trust-logos {
      display: flex; align-items: center; justify-content: center;
      gap: 40px 56px; flex-wrap: wrap;
    }
    .cq-trust-logos .cq-trust-item {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--font-b); font-size: 14px; font-weight: 700;
      color: var(--muted);
      filter: grayscale(1);
      opacity: .72;
      transition: opacity .3s var(--ease), filter .3s var(--ease), transform .3s var(--ease);
    }
    .cq-trust-logos .cq-trust-item:hover {
      filter: grayscale(0);
      opacity: 1;
      transform: translateY(-2px);
      color: var(--navy);
    }
    .cq-trust-logos .cq-trust-item svg { width: 26px; height: 26px; stroke: var(--blue-dark); fill: none; stroke-width: 1.8; }

    /* ══════════════════════════════════════════════════════
       FAQ MINI — quote-intent questions
    ══════════════════════════════════════════════════════ */
    .cq-faq-list {
      max-width: 800px; margin: 0 auto;
      display: flex; flex-direction: column; gap: 14px;
    }
    .cq-faq-item {
      background: #FFFFFF;
      border: 1px solid rgba(226,236,244,.8);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(7,25,46,.04), 0 8px 24px rgba(7,25,46,.04);
      transition: border-color .2s var(--ease), box-shadow .25s var(--ease);
    }
    .cq-faq-item[open] {
      border-color: rgba(41,171,226,.32);
      box-shadow: 0 1px 3px rgba(7,25,46,.04), 0 12px 32px rgba(41,171,226,.10);
    }
    .cq-faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 22px 26px;
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      font-family: var(--font-h); font-size: 16.5px; font-weight: 700;
      color: var(--navy);
      letter-spacing: -.2px;
    }
    .cq-faq-item summary::-webkit-details-marker { display: none; }
    .cq-faq-item summary::after {
      content: '';
      width: 14px; height: 14px;
      border-right: 2.5px solid var(--blue-dark);
      border-bottom: 2.5px solid var(--blue-dark);
      transform: rotate(45deg);
      transition: transform .25s var(--ease);
      flex-shrink: 0;
    }
    .cq-faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 5px; }
    .cq-faq-a {
      padding: 0 26px 22px;
      font-family: var(--font-b); font-size: 15px; line-height: 1.65;
      color: var(--muted);
    }
    .cq-faq-a a { color: var(--blue-dark); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgba(41,171,226,.3); }
    .cq-faq-a a:hover { border-bottom-color: var(--blue-dark); }

    /* ══════════════════════════════════════════════════════
       CLOSING CTA BAND — navy gradient with glow
    ══════════════════════════════════════════════════════ */
    .cq-final-cta {
      text-align: center;
      background: linear-gradient(145deg, #07192E 0%, #0D2B45 60%, #0E3155 100%);
      border-radius: 28px;
      padding: 72px 48px 68px;
      position: relative; overflow: hidden;
      border: 1.5px solid rgba(249,115,22,.25);
      box-shadow: 0 32px 96px rgba(7,25,46,.22), 0 16px 48px rgba(249,115,22,.12);
    }
    .cq-final-cta::before {
      content: ''; position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 70% 48% at 50% 0%, rgba(249,115,22,.26), transparent 65%),
        radial-gradient(ellipse 50% 60% at 100% 100%, rgba(41,171,226,.18), transparent 60%);
      pointer-events: none;
    }
    .cq-final-cta::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 64px 64px;
      -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
      pointer-events: none;
    }
    .cq-final-cta > * { position: relative; z-index: 1; }
    .cq-final-cta .cq-eyebrow { color: #FBB377; }
    .cq-final-cta h2 {
      font-family: var(--font-h); font-size: clamp(30px, 4vw, 46px);
      font-weight: 800; color: #fff; margin: 0 0 16px; letter-spacing: -.8px;
      line-height: 1.08;
    }
    .cq-final-cta p {
      font-family: var(--font-b); font-size: 17px; line-height: 1.6;
      color: rgba(255,255,255,.82); max-width: 580px; margin: 0 auto 32px;
    }
    .cq-final-cta-buttons {
      display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
    }
    .cq-btn-primary {
      display: inline-flex; align-items: center; gap: 10px;
      background: linear-gradient(135deg, #29ABE2 0%, #1779B8 100%);
      color: #fff;
      font-family: var(--font-h); font-size: 16px; font-weight: 700;
      padding: 18px 32px; border-radius: 14px; text-decoration: none;
      border: 1.5px solid rgba(255,255,255,.22);
      box-shadow: var(--glow-blue), 0 14px 36px rgba(41,171,226,.28);
      transition: transform .2s var(--spring), box-shadow .25s var(--ease);
    }
    .cq-btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: var(--glow-blue), 0 20px 48px rgba(41,171,226,.42);
    }
    .cq-btn-primary svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; }
    .cq-btn-ghost {
      display: inline-flex; align-items: center; gap: 10px;
      background: rgba(255,255,255,.04);
      color: #fff;
      font-family: var(--font-h); font-size: 16px; font-weight: 700;
      padding: 18px 32px; border-radius: 14px; text-decoration: none;
      border: 1.5px solid rgba(249,115,22,.5);
      transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--spring);
    }
    .cq-btn-ghost:hover {
      background: rgba(249,115,22,.12);
      border-color: var(--orange);
      transform: translateY(-2px);
    }
    .cq-btn-ghost svg { width: 18px; height: 18px; stroke: var(--orange); fill: none; stroke-width: 2.4; }
    .cq-final-cta-trust {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px;
      margin-top: 36px;
      font-family: var(--font-b); font-size: 12.5px; font-weight: 600;
      color: rgba(255,255,255,.72);
    }
    .cq-final-cta-trust span { display: inline-flex; align-items: center; gap: 6px; }
    .cq-final-cta-trust svg { width: 14px; height: 14px; stroke: #FBB377; fill: none; stroke-width: 2.6; }

    /* ══════════════════════════════════════════════════════
       CLIENT QUICK LINKS (light, minimal)
    ══════════════════════════════════════════════════════ */
    .cq-client-sec {
      background: var(--off);
      padding: 72px 32px 88px;
    }
    .cq-client-inner {
      max-width: 780px;
      margin: 0 auto;
      text-align: center;
    }
    .cq-client-heading {
      font-family: var(--font-h);
      font-size: 22px;
      font-weight: 800;
      color: var(--navy);
      margin-bottom: 28px;
      letter-spacing: -.3px;
    }
    .cq-client-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
    }
    .cq-client-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 22px;
      border: 1px solid rgba(226,236,244,.9);
      border-radius: 12px;
      background: #FFFFFF;
      color: var(--text);
      font: 600 14px/1 var(--font-b);
      text-decoration: none;
      box-shadow: 0 1px 3px rgba(7,25,46,.04), 0 4px 16px rgba(7,25,46,.04);
      transition: all .2s var(--ease);
    }
    .cq-client-link:hover {
      border-color: rgba(41,171,226,.4);
      color: var(--blue-dark);
      transform: translateY(-2px);
      box-shadow: var(--glow-blue);
    }
    .cq-client-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }

    /* ── 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 */
    .contact-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; }

    /* ── RESPONSIVE ──────────────────────────────────────── */
    @media (max-width: 1180px) {
      .contact-hero-inner {
        /* S2 audit fix (2026-05-13): was `1fr` which let implicit
           min-width:auto on the grid item exceed the column. minmax(0, 1fr)
           caps the column so .contact-hero-left can't overflow at 375. */
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
      }
      .contact-hero-left { min-width: 0; }
      .contact-hero-right { position: static; }
      .quote-form-card { max-width: 640px; margin: 0 auto; }
      .cq-advisor-grid { grid-template-columns: repeat(2, 1fr); }
      .cq-contact-grid { grid-template-columns: repeat(2, 1fr); }
      .hero-trust-stack { max-width: 100%; }
    }
    @media (max-width: 1024px) {
      nav { display: none; }
      .btn-nav-ghost { display: none; }
      .ham { display: flex; }
      .mob-overlay { display: block; }

      .contact-hero { padding: 56px 20px 56px; }
      .contact-hero-inner { gap: 36px; }
      .contact-sub { font-size: 16px; }

      .quote-form-card { padding: 32px 24px 28px; border-radius: 20px; }
      .checkbox-grid { grid-template-columns: 1fr; }

      .cq-sec { padding: 64px 20px; }
      .cq-head { margin-bottom: 40px; }

      .cq-advisor-grid { gap: 16px; }
      .cq-contact-grid { grid-template-columns: 1fr; gap: 16px; }

      .cq-final-cta { padding: 56px 28px 52px; border-radius: 22px; }
      .cq-final-cta-buttons { width: 100%; flex-direction: column; }
      .cq-btn-primary, .cq-btn-ghost { width: 100%; justify-content: center; }

      .cq-trust-strip { padding: 40px 20px; }
      .cq-trust-logos { gap: 20px 36px; }

      .cq-client-sec { padding: 56px 20px 64px; }
      .cq-client-links { flex-direction: column; align-items: stretch; }

      footer { padding: 48px 20px 24px; }
      .ft-top { grid-template-columns: 1fr; gap: 32px; }
    }
    @media (max-width: 640px) {
      .cq-advisor-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto 40px; }
      .contact-hero-phone { width: 100%; justify-content: center; }
      .hero-trust-stack { grid-template-columns: 1fr; gap: 14px; }
    }
    @media (max-width: 480px) {
      .form-progress { gap: 0; }
      .step-label { font-size: 10px; }
      .cq-trust-logos { gap: 16px 24px; }
      .cq-faq-item summary { padding: 18px 22px; font-size: 15px; }
      .cq-faq-a { padding: 0 22px 18px; font-size: 14.5px; }
    }

    /* ── SPINNER ────────────────────────────────────────── */
    .spinner {
      display: inline-block;
      width: 18px;
      height: 18px;
      border: 2.5px solid rgba(255,255,255,.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: .5; transform: scale(.85); }
    }

    /* ── 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;
      }
    }
    /* P0 fix 2026-04-15 (reality-check) — `overflow:hidden` clipped the
       cycled accent word on mobile. Per-page rule removed 2026-04-15
       (reality-check-v2). Shared CSS in assets/site.css (V2-1) now
       handles hero cycle wraps globally. */

    /* ── 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-nav-primary:active,
    .btn-next: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);
    }
  /*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; }

    /* GOLDEN-CARD-ABOUT-PATCH v1 */
    /* Shell-only golden-card overrides for the about section.
       Covers: background, border, radius, shadow, left accent rule,
       ghost watermark, hover state. Does NOT touch typography,
       icons, badges, or internal layouts — those are per-page. */
    
    /* .cq-advisor-card — golden-card shell */
    .cq-advisor-card {
      position: relative !important;
      background: #FFFFFF !important;
      border: 1px solid rgba(13,24,41,.09) !important;
      border-radius: 10px !important;
      padding: 28px 24px 24px 32px !important;
      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) !important;
      transition:
        border-color 180ms ease-out,
        box-shadow 180ms ease-out,
        transform 180ms ease-out !important;
      overflow: hidden !important;
      isolation: isolate !important;
      --card-color:#1366A0;
      --card-rgb: 23,121,184;
    }
    .cq-advisor-card:nth-child(4n+1){--card-color:#1366A0;--card-rgb:23,121,184}
    .cq-advisor-card:nth-child(4n+2){--card-color:#7B21A2;--card-rgb:123,33,162}
    .cq-advisor-card:nth-child(4n+3){--card-color:#E8125C;--card-rgb:232,18,92}
    .cq-advisor-card:nth-child(4n+4){--card-color:#10B981;--card-rgb:16,185,129}
    .cq-advisor-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 18px;
      bottom: 18px;
      width: 3px;
      background: linear-gradient(180deg,
        transparent 0%,
        var(--card-color) 15%,
        var(--card-color) 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;
      pointer-events: none;
    }
    .cq-advisor-card::after {
      content: '';
      position: absolute;
      top: -80px;
      left: -80px;
      width: 240px;
      height: 240px;
      background: radial-gradient(circle,
        rgba(var(--card-rgb), .12) 0%,
        transparent 65%);
      pointer-events: none;
      z-index: 0;
      opacity: .55;
      transition: opacity 180ms ease-out;
    }
    .cq-advisor-card:hover {
      transform: translateY(-2px) !important;
      border-color: rgba(var(--card-rgb), .42) !important;
      box-shadow:
        0 1px 2px rgba(13,24,41,.05),
        0 14px 32px -14px rgba(var(--card-rgb), .22),
        0 18px 36px -18px rgba(13,24,41,.18) !important;
    }
    .cq-advisor-card:hover::before {
      width: 4px;
      top: 10px;
      bottom: 10px;
    }
    .cq-advisor-card:hover::after {
      opacity: 1;
    }
    .cq-advisor-card > * {
      position: relative;
      z-index: 1;
    }
    
    /* .cq-contact-card — golden-card shell */
    .cq-contact-card {
      position: relative !important;
      background: #FFFFFF !important;
      border: 1px solid rgba(13,24,41,.09) !important;
      border-radius: 10px !important;
      padding: 32px 28px 28px 36px !important;
      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) !important;
      transition:
        border-color 180ms ease-out,
        box-shadow 180ms ease-out,
        transform 180ms ease-out !important;
      overflow: hidden !important;
      isolation: isolate !important;
      --card-color:#1366A0;
      --card-rgb: 23,121,184;
    }
    .cq-contact-card:nth-child(3n+1){--card-color:#1366A0;--card-rgb:23,121,184}
    .cq-contact-card:nth-child(3n+2){--card-color:#0D2B45;--card-rgb:13,43,69}
    .cq-contact-card:nth-child(3n+3){--card-color:#F97316;--card-rgb:249,115,22}
    .cq-contact-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 20px;
      bottom: 20px;
      width: 3px;
      background: linear-gradient(180deg,
        transparent 0%,
        var(--card-color) 15%,
        var(--card-color) 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;
      pointer-events: none;
    }
    .cq-contact-card::after {
      content: '';
      position: absolute;
      top: -80px;
      left: -80px;
      width: 240px;
      height: 240px;
      background: radial-gradient(circle,
        rgba(var(--card-rgb), .12) 0%,
        transparent 65%);
      pointer-events: none;
      z-index: 0;
      opacity: .55;
      transition: opacity 180ms ease-out;
    }
    .cq-contact-card:hover {
      transform: translateY(-2px) !important;
      border-color: rgba(var(--card-rgb), .42) !important;
      box-shadow:
        0 1px 2px rgba(13,24,41,.05),
        0 14px 32px -14px rgba(var(--card-rgb), .22),
        0 18px 36px -18px rgba(13,24,41,.18) !important;
    }
    .cq-contact-card:hover::before {
      width: 4px;
      top: 12px;
      bottom: 12px;
    }
    .cq-contact-card:hover::after {
      opacity: 1;
    }
    .cq-contact-card > * {
      position: relative;
      z-index: 1;
    }
    
    @media (prefers-reduced-motion: reduce) {
      .cq-advisor-card,
      .cq-contact-card {
        transition: none !important;
        animation: none !important;
      }
      .cq-advisor-card::before,
      .cq-contact-card::before {
        transition: none !important;
      }
      .cq-advisor-card::after,
      .cq-contact-card::after {
        transition: none !important;
      }
    }
    /* END GOLDEN-CARD-ABOUT-PATCH v1 */

/* §2 */
@media(max-width:768px){.sec-visit-hq > div{grid-template-columns:1fr !important;}}

/* §3 — mobile-boil-the-lake pass: contact page-local fixes (390px viewport) */
@media (max-width: 767.98px) {
  /* smallText: contact-sub 15px -> 16px (reading body copy) */
  p.contact-sub {
    font-size: 16px !important;
  }

  /* smallText: char-count 12px -> 14px (data/counter label — 14px floor) */
  div.char-count {
    font-size: 14px !important;
  }

  /* smallText: submit button label 15.5px -> 16px */
  #submitBtn {
    font-size: 16px !important;
  }

  /* smallText: success-step-text 15px -> 16px (body-level reading text) */
  .success-step-text {
    font-size: 16px !important;
  }

  /* smallText: cq-advisor-role 11.5px -> 12px (uppercase chip — below 12px floor) */
  .cq-advisor-role {
    font-size: 12px !important;
  }

  /* smallText: office-address 14.5px -> 16px (address reading text) */
  address.office-address {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* smallText: office-hours 13px -> 14px (label/descriptor — 14px floor) */
  .office-hours {
    font-size: 14px !important;
  }

  /* grid: hero-trust-stack — ensure 2-col uses fluid fractions, not
     fixed-pixel tracks, so the grid never bleeds at narrow viewports */
  .hero-trust-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}