/* Logo color inheritance */
header .logo-full, header .logo-micro{color: var(--ink);}

/* Utilities (additional) */
.u-pad-32{padding: 32px;}

/* Utilities (extracted from inline styles) */
.u-row{display: flex; align-items: center;}

/* CSS Custom Properties */
    :root {--navy: #0D2033; --navy-light: #1a3852; --navy-dark: #081629; --gold: #C89E3B; --gold-light: #e6b84d; --gold-dark: #a67d2f; --slate: #1F2937; --slate-light: #374151; --slate-dark: #111827; --ink: #0f172a; --muted: #e5e7eb; --muted-dark: #d1d5db; --bg: #ffffff; --bg-soft: #f8fafc; --bg-softer: #f1f5f9; --radius: 20px; --radius-sm: 12px; --radius-lg: 28px; --shadow-sm: 0 2px 8px rgba(13, 32, 51, 0.08); --shadow-md: 0 4px 16px rgba(13, 32, 51, 0.12); --shadow-lg: 0 8px 32px rgba(13, 32, 51, 0.16); --shadow-xl: 0 12px 48px rgba(13, 32, 51, 0.20); --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --font-system: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --gradient-primary: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); --gradient-gold: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%); --gradient-soft: linear-gradient(180deg, var(--bg-softer) 0%, var(--bg-soft) 50%, var(--bg) 100%);}

    /* Reset and Base Styles */
    *, *::before, *::after {box-sizing: border-box;}

    html {scroll-behavior: smooth;}

    body {margin: 0; font-family: var(--font-system); background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;}

    img {max-width: 100%; height: auto; display: block;}

    a {color: inherit; text-decoration: none; transition: var(--transition);}

    a:hover {text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 2px;}

    /* Readability cap for long text blocks */
    :where(p, li) {max-width: 70ch;}

    /* Layout Components */
    .container {width: min(1200px, 92vw); margin-inline: auto;}

    .grid {display: grid; gap: 32px;}

    .skip-link {position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; background: var(--bg); color: var(--navy); padding: 8px 12px; border: 2px solid var(--gold); border-radius: 8px; font-weight: 600;}

    .skip-link:focus {left: 16px; top: 8px; width: auto; height: auto; z-index: 10000;}

    /* Button Components */
    .btn {display: inline-flex; align-items: center; gap: 0.5rem; background: var(--gradient-primary); color: #fff; border-radius: 14px; padding: 1.1rem 1.8rem; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; box-shadow: var(--shadow-md); transition: var(--transition); border: 2px solid transparent; cursor: pointer; text-decoration: none; position: relative; overflow: hidden;}

    .btn::before {content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--navy-light) 0%, var(--navy-dark) 100%); opacity: 0; transition: var(--transition);}

    .btn:hover::before {opacity: 1;}

    .btn:hover {transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none;}

    .btn > * {position: relative; z-index: 1;}

    .btn:focus {outline: 3px solid var(--gold-light); outline-offset: 2px;}

    .btn:focus-visible {outline: 3px solid var(--gold-light); outline-offset: 2px; box-shadow: var(--shadow-lg), 0 0 0 3px var(--gold-light);}

    .btn.outline::before {background: var(--gradient-primary);}

    .btn.outline:hover {color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md);}

    .btn.secondary::before {background: rgba(13, 32, 51, 0.12);}

    .btn.secondary:hover {transform: translateY(-1px);}

    /* Hero-specific button overrides */
    .hero .btn.secondary {background: rgba(255, 255, 255, 0.15); color: #fff; border: 2px solid rgba(255, 255, 255, 0.3);}

    .hero .btn.secondary::before {background: rgba(255, 255, 255, 0.25);}

    .hero .btn.secondary:hover {background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5);}

    .btn.gold::before {background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);}

    /* Header */
    header {position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(13, 32, 51, 0.08); box-shadow: 0 1px 3px rgba(13, 32, 51, 0.04);}

    .nav {display: flex; align-items: center; justify-content: space-between; padding: 16px 0;}

    .nav a {opacity: 0.9; font-weight: 500; transition: var(--transition-fast);}

    .nav a:hover {opacity: 1; color: var(--navy);}

    .nav a:focus-visible {outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px;}

    .nav-links {display: flex; gap: 32px; align-items: center;}

    .mobile-toggle {display: none; background: transparent; border: 1px solid rgba(13, 32, 51, 0.15); font-size: 18px; cursor: pointer; padding: 8px; border-radius: 10px; align-items: center; justify-content: center; width: 44px; height: 44px;}

    .mobile-toggle:focus {outline: 2px solid var(--gold); outline-offset: 2px;}

    .mobile-toggle:focus-visible {outline: 3px solid var(--gold-light); outline-offset: 2px; box-shadow: 0 0 0 1px var(--gold);}

    /* Enhanced focus indicators for all interactive elements */
    a:focus-visible, button:focus-visible {outline: 2px solid var(--gold-light); outline-offset: 2px; border-radius: 4px;}

    .card:focus-within {transform: translateY(-2px); box-shadow: var(--shadow-lg);}

    .hamburger-icon {width: 18px; height: 14px;}

    .hamburger-icon rect {fill: var(--navy); transition: var(--transition-fast);}

    /* Logo Components */
    .logo-full {display: inline-block; height: 62px;}

    .logo-micro {display: none; height: 44px;}

    /* Hero Section */
    .hero {position: relative; isolation: isolate; color: #fff; background: var(--gradient-primary); border-radius: var(--radius-lg); padding: 96px 40px 80px; margin: 32px 0; overflow: hidden; box-shadow: var(--shadow-xl);}

    .hero::before {content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% -10%, rgba(200, 158, 59, 0.15), transparent 70%), radial-gradient(600px 300px at 15% 110%, rgba(200, 158, 59, 0.08), transparent 60%), repeating-linear-gradient( 45deg, transparent, transparent 60px, rgba(255, 255, 255, 0.02) 60px, rgba(255, 255, 255, 0.02) 62px ); z-index: -2; will-change: transform;}

    .hero::after {content: ""; position: absolute; inset: -20% -20%; background: repeating-linear-gradient( 0deg, transparent, transparent 40px, rgba(255, 255, 255, 0.03) 40px, rgba(255, 255, 255, 0.03) 42px ), repeating-linear-gradient( 90deg, transparent, transparent 40px, rgba(255, 255, 255, 0.02) 40px, rgba(255, 255, 255, 0.02) 42px ); z-index: -1; opacity: 0.6; animation: subtle-float 20s ease-in-out infinite; will-change: transform;}

    @keyframes subtle-float { 0%, 100% {transform: translate(0, 0) rotate(0deg);}
      25% {transform: translate(-5px, -10px) rotate(0.5deg);}
      50% {transform: translate(5px, -5px) rotate(-0.5deg);}
      75% {transform: translate(-3px, 5px) rotate(0.3deg);}
    }

    .hero-wrap {display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 64px; align-items: center;}

    .hero a {color: rgba(255, 255, 255, 0.9); border-bottom: 1px solid rgba(200, 158, 59, 0.4); text-decoration: none;}

    .hero a:hover {color: #fff; border-bottom-color: var(--gold); text-decoration: none;}

    .hero h1, .hero h2, .hero h3, .hero p, .hero .sub, .hero .meta-note {color: #fff;}

    .hero h1 {font-size: clamp(44px, 5.5vw, 68px); line-height: 1.08; margin: 20px 0 24px; letter-spacing: -0.03em; font-weight: 800;}

    .kicker {color: var(--gold); font-weight: 700; letter-spacing: 0.18em; font-size: 0.85rem; text-transform: uppercase; margin-bottom: 16px; position: relative;}

    .kicker::after {content: ''; position: absolute; bottom: -8px; left: 0; width: 48px; height: 2px; background: var(--gradient-gold); border-radius: 2px;}

    .sub {font-size: 1.3rem; margin: 20px 0 40px; line-height: 1.65; max-width: 44rem;}

    .meta {display: flex; gap: 24px; align-items: center; margin-bottom: 20px;}

    .meta-note {font-size: 0.95rem; margin: 16px 0 0;}

    /* Section Styling */
    section {padding: 88px 0; scroll-margin-top: 80px; position: relative;}

    section:nth-child(even) {background: var(--gradient-soft);}

    h2 {font-size: clamp(32px, 3.5vw, 44px); margin: 0 0 20px; color: var(--navy); letter-spacing: -0.02em; font-weight: 800;}

    .eyebrow {color: var(--slate); font-weight: 700; letter-spacing: 0.18em; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 12px; position: relative;}

    .eyebrow::after {content: ''; position: absolute; bottom: -6px; left: 0; width: 32px; height: 2px; background: var(--gradient-gold); border-radius: 2px;}

    /* Hero eyebrow uses brand gold */
    .hero .eyebrow {color: var(--gold);}

    .section-intro {font-size: 1.15rem; color: var(--slate); margin: 16px 0 48px; max-width: 52rem; line-height: 1.7;}

    /* Enhanced Card Components */
    .card {border: 1px solid rgba(13, 32, 51, 0.06); border-radius: var(--radius); padding: 40px; background: #fff; box-shadow: var(--shadow-sm); transition: var(--transition); position: relative; overflow: hidden;}

    .card::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-gold); transform: scaleX(0); transform-origin: left; transition: var(--transition);}

    .card:hover {box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: rgba(200, 158, 59, 0.15);}

    .card:hover::before {transform: scaleX(1);}

    .card h3 {margin: 0 0 20px; font-size: 1.3rem; color: var(--navy); font-weight: 700; line-height: 1.3;}

    .card p {margin: 0 0 24px; color: var(--slate); line-height: 1.65;}

    /* Refined Service Items */
    .service-item {display: flex; align-items: flex-start; gap: 16px; margin: 16px 0; padding: 12px 0; border-bottom: 1px solid rgba(13, 32, 51, 0.04);}

    .service-item:last-child {border-bottom: none;}

    .service-marker {width: 6px; height: 6px; border-radius: 50%; background: var(--gradient-gold); margin-top: 8px; flex-shrink: 0;}

    .service-text {color: var(--slate); line-height: 1.6; font-size: 0.95rem;}

    /* Process Flow Enhancement */
    .process-flow {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative;}

    .process-flow::before {content: ''; position: absolute; top: 50%; left: 15%; right: 15%; height: 2px; background: linear-gradient(to right, var(--gold), transparent, var(--gold)); z-index: -1;}

    .process-step {text-align: center; position: relative;}

    .process-number {display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--gradient-gold); color: var(--navy-dark); border-radius: 50%; font-weight: 700; font-size: 1.1rem; margin-bottom: 20px; box-shadow: var(--shadow-md);}

    /* Integrated Certification Badges */
    .cert-badge {width: 64px; height: 64px; margin: 0 auto 16px; display: block; transition: var(--transition); filter: drop-shadow(0 2px 4px rgba(13, 32, 51, 0.1));}

    .cert-badge-large {width: 80px; height: 80px;}

    .cert-badge:hover {transform: scale(1.05); filter: drop-shadow(0 4px 8px rgba(13, 32, 51, 0.15));}

    /* Enhanced Footer */
    footer {padding: 22px 0 22px; background: linear-gradient(135deg, var(--slate-dark) 0%, var(--slate) 100%); color: rgba(255, 255, 255, 0.8); position: relative; overflow: hidden;}

    footer::before {content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 45deg, transparent, transparent 60px, rgba(255, 255, 255, 0.02) 60px, rgba(255, 255, 255, 0.02) 62px ); z-index: -1;}

    footer a {color: rgba(255, 255, 255, 0.9); transition: var(--transition-fast);}

    footer a:hover {color: #fff; text-decoration-color: var(--gold);}

    /* Generated from inline styles for CSP hardening */
.u-inline-1{position: absolute; left: -9999px; top: -9999px;}
.u-inline-2{display: flex; align-items: center; gap: 14px;}
.u-inline-3{overflow: visible;}
.u-inline-6{background: var(--gradient-soft);}
.u-inline-7{grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; margin-top: 40px;}
.u-inline-8{margin: 4px 0; padding: 4px 0;}
.u-inline-9{margin: 4px 0; padding: 4px 0;}
.u-inline-10{margin: 4px 0; padding: 4px 0;}
.u-inline-11{background: rgba(200, 158, 59, 0.1); padding: 16px; border-radius: 12px; margin-top: 16px;}
.u-inline-12{margin: 0; font-size: 0.9rem; color: var(--navy);}
.u-inline-13{margin: 12px 0 0; font-size: 0.85rem; color: var(--navy);}
.u-inline-14{color: var(--navy); text-decoration: underline;}
.u-inline-15{background: rgba(200, 158, 59, 0.1); padding: 16px; border-radius: 12px; margin-top: 16px;}
.u-inline-16{margin: 0; font-size: 0.9rem; color: var(--navy);}
.u-inline-17{background: rgba(200, 158, 59, 0.1); padding: 16px; border-radius: 12px; margin-top: 16px;}
.u-inline-18{margin: 0; font-size: 0.9rem; color: var(--navy);}
.u-inline-19{background: var(--gradient-primary); color: #fff; border-radius: var(--radius-lg); padding: 40px; margin-top: 40px; text-align: center; box-shadow: var(--shadow-lg); max-width: 1100px; margin-left: auto; margin-right: auto;}
.u-inline-20{margin: 0 0 16px; color: #fff; font-size: 1.4rem;}
.u-inline-21{margin: 0 0 24px; font-size: 1.1rem; opacity: 0.9;}
.u-inline-22{display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;}
.u-inline-23{background: rgba(255, 255, 255, 0.15); color: #fff; border: 2px solid rgba(255, 255, 255, 0.3);}
.u-inline-24{grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 32px;}
.u-inline-25{font-size: 0.75rem; margin-bottom: 4px;}
.u-inline-26{font-size: 0.75rem; margin-bottom: 4px;}
.u-inline-27{font-size: 0.75rem; margin-bottom: 4px;}
.u-inline-28{grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px;}
.u-inline-29{grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px;}
.u-inline-30{text-align: center; padding: 32px 20px;}
.u-inline-31{margin: 0 0 12px; color: var(--navy); font-size: 1.1rem;}
.u-inline-33{margin: 0; color: var(--slate); font-size: 0.9rem;}
.u-inline-34{text-align: center; padding: 32px 20px;}
.u-inline-35{margin: 0 0 12px; color: var(--navy); font-size: 1.1rem;}
.u-inline-37{margin: 0; color: var(--slate); font-size: 0.9rem;}
.u-inline-38{text-align: center; padding: 32px 20px;}
.u-inline-39{margin: 0 0 12px; color: var(--navy); font-size: 1.1rem;}
.u-inline-41{margin: 0; color: var(--slate); font-size: 0.9rem;}
.u-inline-42{background: var(--bg-soft); border-radius: var(--radius); padding: 40px; margin-top: 40px;}
.u-inline-43{margin: 0 0 24px; color: var(--navy);}
.u-inline-44{grid-template-columns: 1fr 1fr; gap: 32px;}
.u-inline-45{margin: 0 0 8px; color: var(--navy); font-size: 1rem;}
.u-inline-46{margin: 0 0 16px; color: var(--slate); font-size: 0.9rem;}
.u-inline-47{margin: 0 0 8px; color: var(--navy); font-size: 1rem;}
.u-inline-48{margin: 0 0 16px; color: var(--slate); font-size: 0.9rem;}
.u-inline-49{margin-top: 32px;}
.u-inline-50{color: var(--slate); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px;}
.u-inline-51{display: flex; flex-wrap: wrap; gap: 12px;}
.u-inline-52{background: rgba(13, 32, 51, 0.06); padding: 6px 14px; border-radius: 16px; font-size: 0.85rem; color: var(--navy);}
.u-inline-53{background: rgba(13, 32, 51, 0.06); padding: 6px 14px; border-radius: 16px; font-size: 0.85rem; color: var(--navy);}
.u-inline-54{background: rgba(13, 32, 51, 0.06); padding: 6px 14px; border-radius: 16px; font-size: 0.85rem; color: var(--navy);}
.u-inline-55{background: rgba(13, 32, 51, 0.06); padding: 6px 14px; border-radius: 16px; font-size: 0.85rem; color: var(--navy);}
.u-inline-57{grid-template-columns: 1.3fr 0.7fr;}
.u-inline-58{display: grid; gap: 32px; text-align: center; padding: 56px 40px;}
.u-inline-59{margin: 0 0 20px; color: var(--navy); font-size: 1.5rem;}
.u-inline-60{margin: 0 0 40px; color: var(--slate);}
.u-inline-61{display: flex; flex-direction: column; gap: 20px; align-items: center;}
.u-inline-62{font-size: 0.85rem;}
.u-inline-63{margin-top: 32px; padding-top: 32px; border-top: 1px solid rgba(13, 32, 51, 0.1);}
.u-inline-64{display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px;}
.u-inline-65{color: var(--gold); font-size: 1.2rem;}
.u-inline-66{color: var(--navy); font-weight: 600; font-size: 1.1rem;}
.u-inline-67{margin: 0; font-size: 0.9rem; color: var(--slate);}
.u-inline-68{display: grid; gap: 24px;}
.u-inline-69{margin: 0; color: var(--navy);}
.u-inline-70{margin: 0; color: var(--slate);}
.u-inline-71{height: 1px; background: rgba(13, 32, 51, 0.1);}
.u-inline-72{margin: 0; color: var(--navy);}
.u-inline-73{margin: 0; color: var(--slate);}
.u-inline-74{height: 1px; background: rgba(13, 32, 51, 0.1);}
.u-inline-75{margin: 0; color: var(--navy);}
.u-inline-76{margin: 0; color: var(--slate);}
.u-inline-77{display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;}
.u-inline-78{display: flex; align-items: center;}
.u-inline-79{height: 96px; width: auto;}
.u-inline-80{display: flex; gap: 20px; color: rgba(255, 255, 255, 0.7); font-size: 0.9rem;}

/* Improve contrast of secondary CTA on dark urgency band */
#urgency .btn.secondary {background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.35);}
#urgency .btn.secondary:hover,
#urgency .btn.secondary:focus-visible {background: rgba(255,255,255,0.18); color: #fff; border-color: rgba(255,255,255,0.5);}

    /* MOBILE RESPONSIVE FIXES - Override utility classes */
    @media (max-width: 980px) { .hero-wrap {grid-template-columns: 1fr; text-align: center; gap: 48px;}
      
      .nav-links {display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); padding: 24px; border-bottom: 1px solid var(--muted); border-radius: 0 0 var(--radius) var(--radius); flex-direction: column; gap: 20px;}
      
      .mobile-toggle {display: inline-flex;}
      
      /* Force single column layout for all grid utility classes */
      .grid,
      .u-inline-7,   /* "Why Now" urgency cards */
      .u-inline-24,  /* Services grid */
      .u-inline-28,  /* 2-column grids (credentials) */
      .u-inline-29,  /* 3-column grids (certifications) */
      .u-inline-44,  /* Experience grid */
      .u-inline-57   /* Contact grid */
      {grid-template-columns: 1fr !important;}
      
      .meta {flex-direction: column; align-items: center; gap: 20px;}

      .process-flow {grid-template-columns: 1fr !important; gap: 32px;}

      .process-flow::before {display: none;}
    }

    @media (max-width: 736px) { .hero {padding: 72px 28px 64px; margin: 20px 0;}
      
      .hero h1 {font-size: clamp(36px, 8.5vw, 48px);}
      
      .sub {font-size: 1.15rem;}
      
      section {padding: 64px 0;}
      
      .card {padding: 32px 24px;}
      
      .service-item {margin: 12px 0; padding: 8px 0;}
    }

    @media (max-width: 420px) { .logo-full {display: none;}
      
      .logo-micro {display: inline-block;}
      
      .btn {padding: 1rem 1.4rem; font-size: 0.9rem;}
      
      .meta {gap: 16px;}
    }

    /* Accessibility Enhancements */
    @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;
  }
}

    /* Print Styles */
    @media print { .hero {background: var(--navy); color: white;}
      
      .btn {border: 2px solid var(--navy); box-shadow: none;}
    }


/* === VN: abstract hero + divider === */
.hero-photo{display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md);}
.hero-photo-wrap{position: relative; display: block;}
.hero-photo-wrap::after{content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg,rgba(13,32,51,.22),rgba(13,32,51,.10)); border-radius: inherit;}
@media (max-width: 780px){ .section-divider{margin: 32px 0;}}


/* === VN: hero tuning v2 === */
@media (min-width: 1200px){ .hero .hero-wrap{display: grid; grid-template-columns: 1fr min(42vw, 680px); align-items: center; gap: 56px;}
  .hero .hero-photo{max-height: clamp(460px, 50vh, 600px);}
}
.hero-photo-wrap::after{background: linear-gradient(0deg, rgba(13,32,51,.28), rgba(13,32,51,.14));}
.hero-photo{border: 1px solid rgba(200,158,59,.18); box-shadow: var(--shadow-md);}
/* Optional toggle presets */
body.tint-dark .hero-photo-wrap::after{background: linear-gradient(0deg, rgba(13,32,51,.34), rgba(13,32,51,.18));}
body.tint-light .hero-photo-wrap::after{background: linear-gradient(0deg, rgba(13,32,51,.18), rgba(13,32,51,.08));}



/* === VN: hero tuning v3 (deeper overlay, mobile spacing, fade-in, button centering) === */
.hero-photo{object-position: center center; animation: heroFade .6s ease-out .1s both;}
@keyframes heroFade{ from{opacity: 0; transform: translateY(4px) scale(0.995);}
  to{opacity: 1; transform: none;}
}
@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;
  }
}
/* Ensure button text is truly centered across browsers */
.btn{line-height: 1; justify-content: center;}
/* Mobile/Tablet spacing & layout */
@media (max-width: 780px){ .hero{padding: 72px 24px 64px;}
  .hero .hero-wrap{display: grid; grid-template-columns: 1fr; gap: 40px;}
  .hero .meta{display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start;}
  .hero .btn{padding: 1rem 1.4rem;}
}



/* === VN: hero tuning v4 (fix wrapping + centering) === */
@media (min-width: 1200px){ .hero .hero-wrap{display: grid; grid-template-columns: minmax(640px, 1fr) minmax(480px, 620px); gap: 56px; align-items: center;}
}
@media (min-width: 992px) and (max-width: 1199px){ .hero .hero-wrap{grid-template-columns: minmax(560px, 1fr) minmax(420px, 560px); gap: 48px;}
}
/* Strengthen centering in buttons across engines */
.btn{display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; padding-inline: 1.8rem;}
.hero .meta{display: flex; gap: 16px; align-items: center;}
/* Keep hero paragraph from feeling cramped on mid widths */
.hero p.sub{max-width: 70ch;}



/* === VN: hero tuning v5 (image focus up to align with tagline) === */
@media (min-width: 992px){ /* lift the visible portion slightly so key lines align with the tagline block */
  .hero .hero-photo{object-position: 50% 42%;}
  /* Ensure both columns are vertically centered */
  .hero .hero-wrap{align-items: center;}
}



/* === VN: hero tuning v6 (larger image & visual centering) === */
@media (min-width: 1200px){ .hero .hero-wrap{grid-template-columns: minmax(660px, 1fr) minmax(520px, 720px); gap: 60px;}
  .hero .hero-photo{max-height: clamp(520px, 58vh, 640px);}
}
@media (min-width: 992px) and (max-width: 1199px){ .hero .hero-wrap{grid-template-columns: minmax(600px, 1fr) minmax(460px, 640px); gap: 52px;}
  .hero .hero-photo{max-height: clamp(480px, 54vh, 600px);}
}
@media (min-width: 992px){ /* place the image column at the visual midpoint relative to the left copy block */
  .hero .hero-wrap > div:last-child{align-self: center;}
  /* Fine-tune the perceived center so it sits between the tagline and the small meta-note */
  .hero .hero-photo-wrap{transform: translateY(-6px);}
}



/* === VN: hero tuning v7 (image focus up +5%) === */
@media (min-width: 992px){ .hero .hero-photo{object-position: 50% 37%;}
}



/* === VN: Proactive Advantage block — grid overlay + centering === */
section.proactive{position: relative; isolation: isolate; text-align: center;}
section.proactive .container.centered{text-align: center;}
section.proactive::before{content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); pointer-events: none; opacity: 0.28 /* subtle grid */; background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 8%, rgba(0,0,0,0.04) 100%), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: auto, 64px 64px, 64px 64px; background-position: center; mix-blend-mode: overlay;}
section.proactive h3, section.proactive h2, section.proactive p{margin-left: auto; margin-right: auto;}
section.proactive .meta{display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;}



/* === VN: Divider lattice strip (CSS-only) === */
.divider-strip{position: relative; margin: 48px 0; height: 104px; border-radius: var(--radius); background: linear-gradient(135deg, #0D2033 0%, #102b42 100%); box-shadow: var(--shadow-sm); isolation: isolate;}
.divider-strip::before{content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 64px 64px, 64px 64px; background-position: center; mix-blend-mode: overlay; opacity: .22;}
.divider-strip::after{content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 2px; border-radius: 2px; background: rgba(200,158,59,.35);}
@media (max-width:780px){ .divider-strip{height: 88px; margin: 32px 0;} }



/* === VN: Divider — animated diagonal lattice (CSS only) === */
.divider-lattice-animated{position: relative; margin: 56px 0; height: 120px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #0D2033 0%, #0F2A44 100%); box-shadow: var(--shadow-sm); overflow: hidden; isolation: isolate;}
.divider-lattice-animated::before{/* cross-hatch lattice */; content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 28px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 28px); background-size: 100% 100%; opacity: .9; animation: lattice-drift 18s linear infinite;}
.divider-lattice-animated::after{/* subtle gold inner glow at the top edge */; content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(200,158,59,.22), rgba(200,158,59,0) 40%); mix-blend-mode: screen;}
@keyframes lattice-drift{ 0%   {background-position: 0 0, 0 0;}
  100% {background-position: 56px 0, -56px 0;}
}
@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;
  }
}
@media (max-width: 780px){ .divider-lattice-animated{height: 96px; margin: 40px 0;}
}



/* === VN: Divider — "north-chevron" motif (CSS + inline SVG) === */
.divider-chevron-north{position: relative; margin: 56px 0; height: 120px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #0D2033 0%, #0F2A44 100%); box-shadow: var(--shadow-sm); overflow: hidden; isolation: isolate;}
/* Chevron pattern layer */
.divider-chevron-north::before{content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none /* inline svg pattern (upward chevrons) */; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cpath id='c' d='M24 8 L40 24 L34 24 L24 14 L14 24 L8 24 Z'/%3E%3C/defs%3E%3Cg fill='rgba(255,255,255,0.08)'%3E%3Cuse href='%23c'/%3E%3Cuse href='%23c' x='-24'/%3E%3Cuse href='%23c' x='24'/%3E%3Cuse href='%23c' y='24'/%3E%3Cuse href='%23c' y='24' x='-24'/%3E%3Cuse href='%23c' y='24' x='24'/%3E%3C/g%3E%3C/svg%3E"); background-size: 48px 48px; background-repeat: repeat; background-position: center; opacity: .85; transform: translateY(0); animation: chevron-drift 22s linear infinite; mix-blend-mode: overlay;}
/* Subtle gold sheen from the top */
.divider-chevron-north::after{content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(200,158,59,.18), rgba(200,158,59,0) 40%); mix-blend-mode: screen;}
@keyframes chevron-drift{ 0%   {background-position: 0 0;}
  100% {background-position: 0 -48px;} /* slow upward movement = "north" */
}
@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;
  }
}
@media (max-width: 780px){ .divider-chevron-north{height: 96px; margin: 40px 0;}
}



/* === VN: Divider v11 — compact north-chevron (1/3 height) === */
.divider-chevron-north{height: 40px /* was 120px */; margin: 36px 0 /* was 56px */; border-radius: var(--radius);}
/* Resize pattern & soften */
.divider-chevron-north::before{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cpath id='c' d='M24 8 L40 24 L34 24 L24 14 L14 24 L8 24 Z'/%3E%3C/defs%3E%3Cg fill='rgba(255,255,255,0.06)'%3E%3Cuse href='%23c'/%3E%3Cuse href='%23c' x='-24'/%3E%3Cuse href='%23c' x='24'/%3E%3Cuse href='%23c' y='24'/%3E%3Cuse href='%23c' y='24' x='-24'/%3E%3Cuse href='%23c' y='24' x='24'/%3E%3C/g%3E%3C/svg%3E"); background-size: 32px 32px /* tighter cadence for short band */; opacity: .7 /* slightly fainter */; animation: chevron-drift-compact 20s linear infinite;}
.divider-chevron-north::after{background: linear-gradient(180deg, rgba(200,158,59,.14), rgba(200,158,59,0) 55%);}
@keyframes chevron-drift-compact{ 0%   {background-position: 0 0;}
  100% {background-position: 0 -32px;}
}
@media (max-width: 780px){ .divider-chevron-north{height: 32px; margin: 28px 0;}
}



/* === VN: Divider v12 — ultra-minimal gold rule === */
.divider-rule{position: relative; height: 0 /* collapse section height */; margin: 40px 0 /* breathing room around the rule */; border-top: 2px solid rgba(200,158,59,.45) /* gold */; border-radius: 0;}
.divider-rule::after{/* centered marker bead */; content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 999px; background: rgba(200,158,59,.85); box-shadow: 0 0 0 3px rgba(200,158,59,.18);}
@media (max-width: 780px){ .divider-rule{margin: 28px 0; border-top-width: 2px;}
  .divider-rule::after{width: 8px; height: 8px; top: -4px; box-shadow: 0 0 0 2px rgba(200,158,59,.18);}
}



/* === Alignment fix: Why This Matters Now === */
#urgency .container.centered {text-align: left;}
#urgency .eyebrow, 
#urgency h2, 
#urgency .section-intro {margin-left: 0;}



/* === Urgency alignment hard fix === */
#urgency, #urgency .container{text-align: left !important;}
#urgency .eyebrow{display: inline-block; margin-left: 0; margin-right: 0;}
#urgency .eyebrow::after{left: 0; margin-left: 0; transform: none;}

/* === Footer FAQ refinements === */
footer #faq .container{max-width: 820px; margin-inline: auto; padding-inline: 16px;}
footer #faq h2.eyebrow{text-align: center; margin-bottom: 8px;}
footer #faq h2.eyebrow::after{content: ""; display: block; width: 56px; height: 4px; margin: 10px auto 0; background: var(--gold); border-radius: 2px;}
footer #faq .faq{margin-top: 16px; display: grid; gap: 12px; counter-reset: q;}
footer #faq summary{position: relative; padding-left: 36px;}
footer #faq summary::before{counter-increment: q; content: counter(q, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-weight: 600; font-size: .85rem; opacity: .6;}
/* switch to plus/minus indicator */
footer #faq summary::after{content: "+"; font-weight: 700;}
footer #faq details[open] summary::after{content: "–"; color: var(--gold);}

@media (min-width:1100px){ footer #faq .faq{grid-template-columns: 1fr 1fr; gap: 14px 18px;}
  footer #faq details{margin: 0;}
}

/* CTA row */
footer #faq .faq-cta{text-align: center; margin-top: 18px; opacity: .95;}
footer #faq .btn--sm{padding: 8px 12px; font-size: .95rem; border-radius: 10px;}
footer #faq .btn--sm.btn--ghost{background: transparent; border: 1px solid rgba(255,255,255,.4);}



/* === In-page anchor polish === */
#how-we-work, #coverage, #next-steps {scroll-margin-top: 96px;} /* offset for sticky header */
footer .footer-links{text-align: center; margin-top: 8px;}
footer .footer-links .faq-link{opacity: .9; font-weight: 600; padding: 2px 6px; border-radius: 8px;}
footer .footer-links .faq-link:hover{text-decoration: underline; opacity: 1;}
@media (max-width: 740px){ #how-we-work, #coverage, #next-steps {scroll-margin-top: 76px;}
}



/* Footer height tightened to match header rhythm */
footer .container{display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;}
footer .container > *{margin: 0;}



/* === Remove hero animation & offsets === */
.hero-photo{animation: none !important;}
.hero-photo-wrap{transform: none !important;}

/* === Footer height: strip utility spacing inside footer === */
footer [class^="u-inline-"],
footer [class*=" u-inline-"]{margin: 0 !important; padding: 0 !important;}

/* Footer base padding to match header rhythm (approx) */
footer{padding-top: 18px !important; padding-bottom: 18px !important;}
footer .container{min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;}
footer .logo, footer .brand, footer .copyright {margin: 0 !important;}



/* === Footer final height normalization === */
footer{padding-top: 12px !important; padding-bottom: 12px !important;}
footer .container{min-height: 56px !important;}
footer .u-inline-77{gap: 12px !important;}



/* === Resilient eyebrow/kicker underline === */
.eyebrow{display: inline-grid; grid-template-rows: auto 4px; row-gap: .5rem;}
.eyebrow::after{content: ""; height: 4px; width: min(7rem, 40%); background: var(--gold); border-radius: 2px; justify-self: start;}



/* === Tablet scannability: 2-column on mid breakpoints === */
@media (min-width:740px) and (max-width:1100px){ .cards.grid, .u-inline-7, .process-flow{grid-template-columns: 1fr 1fr !important;}
  .cards.grid > *{min-width: 0;}
}



/* Final centering clamp for the Proactive Advantage block */
.u-inline-19{max-width: 960px !important; width: auto !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box;}


/* --- Final, specific overrides to ensure they take in cascade --- */
@media (max-width: 480px){ }


/* FINAL OVERRIDES */
@media (max-width:480px){ }


/* OVERRIDES v6 — visual alignment & footer sizing */
@media (max-width:480px){ }

/* === Hero alignment improvements === */
@media (min-width: 992px) {
  .hero-wrap { align-items: stretch; }
  .hero-media { height: 100%; }
  .hero-media picture, .hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .hero { min-height: clamp(520px, 60vh, 680px); }
}

/* === Proactive Advantage panel canonical centering === */
.u-inline-19 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 48px 40px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}
.u-inline-22 { display: flex !important; justify-content: center !important; gap: 24px !important; flex-wrap: wrap !important; }
.u-inline-20, .u-inline-21 { margin-left: auto !important; margin-right: auto !important; }

/* === Hero: remove forced tall section; rely on content height === */
@media (min-width: 992px) {
  .hero { min-height: unset !important; }
}

/* === Proactive Advantage: ensure visible vertical centering space === */
@media (min-width: 992px) {
  .u-inline-19 { min-height: clamp(280px, 36vh, 420px) !important; }
}

/* === Gold button visibility/consistency === */
.btn.gold { color: #fff !important; border-color: transparent !important; }
.btn.gold::before { opacity: 1 !important; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%) !important; }
.btn.gold:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* === Button stacking fix: ensure text sits above gradient overlay === */
.btn { isolation: isolate; }
.btn.gold::before { z-index: -1 !important; opacity: 1 !important; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%) !important; }

/* === Gold button text color: dark for contrast === */
.btn.gold { color: #0D2033 !important; } /* brand navy as 'black' */

/* === Footer height normalization to header === */
@media (min-width: 992px) {
  footer .container {
    min-height: auto !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    flex-wrap: nowrap !important;
  }
}
/* Mobile/tablet keep comfortable rhythm but not oversized */
@media (max-width: 991.98px) {
  footer .container {
    min-height: auto !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}

/* === Footer tighter than header (final pass) === */
@media (min-width: 992px) {
  footer .container {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    gap: 8px !important;
  }
  footer .container > * { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* === Gold button legibility (weight + ensure dark text persists) === */
.btn.gold { color: #0D2033 !important; font-weight: 600 !important; }
.btn.gold:hover, .btn.gold:focus-visible, .btn.gold:active { color: #0D2033 !important; }

/* === Footer logo/date spacing refinement === */
@media (min-width: 992px) {
  .u-inline-79 { height: 32px !important; width: auto !important; }   /* logo size */
  .u-inline-80 { gap: 12px !important; align-items: center !important; white-space: nowrap !important; }
  .u-inline-77 { gap: 8px !important; } /* container child gap */
}
@media (max-width: 991.98px) {
  .u-inline-79 { height: 28px !important; width: auto !important; }
  .u-inline-80 { gap: 8px !important; }
}

/* === Footer horizontal alignment like header === */
@media (min-width: 992px) {
  footer .container { justify-content: space-between !important; }
  .u-inline-78 { align-items: center !important; }
  .u-inline-80 { margin-left: auto !important; justify-content: flex-end !important; text-align: right !important; }
}
@media (max-width: 991.98px) {
  footer .container { justify-content: center !important; }
  .u-inline-80 { margin-left: 0 !important; justify-content: center !important; text-align: center !important; }
}

/* === Footer container width & alignment fix (match page wrap) === */
@media (min-width: 992px) {
  footer .container {
    width: min(1200px, 92vw) !important;
    max-width: 1200px !important;
    margin-inline: auto !important;
    padding-inline: 24px !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  footer .u-inline-80 { margin-left: auto !important; text-align: right !important; }
}

/* --- Trust ribbon (moved from min build) --- */
.trust-ribbon { padding: 16px 0 8px; background: transparent; }
.trust-ribbon .container { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.trust-logos img { height: 28px; width: auto; display: block; opacity: 0.9; filter: saturate(0.85) contrast(1.05); }
@media (min-width: 992px) { .trust-logos img { height: 32px; } }
.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; }

@media (min-width: 992px){ .hero-media picture{ aspect-ratio: 2 / 3; } }

/* === Canonical layout clamps (final, security-safe) === */
@media (min-width: 992px){
  /* Proactive Advantage panel */
  .u-inline-19{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    min-height:clamp(280px,36vh,420px) !important;
  }
  /* Footer sizing, alignment, and wrap */
  footer .container{
    width: min(1200px, 92vw) !important;
    max-width: 1200px !important;
    margin-inline: auto !important;
    padding-inline: 24px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  /* Footer right block alignment */
  .u-inline-80{
    margin-left: auto !important;
    text-align: right !important;
    gap: 12px !important;
  }
  /* Footer logo sizing */
  .u-inline-79{ height: 32px !important; width: auto !important; }
}
@media (max-width: 991.98px){
  .u-inline-79{ height: 28px !important; width: auto !important; }
  footer .container{
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}

/* === Canonical centering for Proactive Advantage (high-specificity, CSP-safe) === */


/* Footer sizing: icon fills 70% of footer row height */
footer{
  --footer-row: clamp(56px, 8vh, 96px);      /* overall row height */
  --footer-pad: clamp(8px, 1.6vh, 16px);     /* vertical padding */
  --footer-icon-scale: 0.70;                 /* 70% of row height */
}
footer .u-inline-77{
  min-height: var(--footer-row);
  padding-block: var(--footer-pad);
  display:flex; align-items:center;
}
/* Keep Proactive band clamp */
#urgency .u-inline-19{ max-width:1100px; margin-left:auto; margin-right:auto; text-align:center; }


/* --- CTA hotfix: visible label + gold always wins --- */
.btn{ position: relative; isolation: isolate; }
.btn::before{ z-index: 0; }
.btn, .btn *, .btn::after{ color: inherit; }

a.btn.gold{
  background: var(--gradient-gold) !important;
  color: var(--navy-dark) !important;
  text-decoration: none !important;
}
a.btn.gold::before{
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  opacity: .25;
}

/* Ensure nav doesn’t dim CTAs */
header .nav a.btn{ opacity: 1 !important; }


/* Footer icon 70% of total row */
/* CTA secondary contrast fix */
a.btn.secondary{ 
  color: #fff !important; 
  border-color: var(--gold) !important;
  text-decoration: none;
}
a.btn.secondary::before{
  background: rgba(255,255,255,0.08);  /* subtle sheen that doesn't ink text */
  opacity: 1;
}


/* Brand lockup: scales with footer row */
footer .brand-lockup{
  height: calc((var(--footer-row) + (2 * var(--footer-pad))) * var(--footer-icon-scale));
  width: auto;
  display: block;
}


/* Step 6 (repo) — Footer wordmark sizing */
footer .brand-lockup--footer { height: 48px; max-height: 48px; width: auto; }
@media (min-width: 768px) { footer .brand-lockup--footer { height: 56px; max-height: 56px; } }
footer { padding-block: 16px; }
@media (min-width: 768px) { footer { padding-block: 20px; } }
footer .container { align-items: center; }


/* Footer brand lockup: icon + text (composed) */
footer .brand-lockup--footer {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #FFFFFF;
}
footer .brand-lockup--footer .brand-icon {
  height: 72px;
  width: auto;
}
@media (min-width: 768px) {
  footer .brand-lockup--footer .brand-icon {
    height: 88px;
  }
}
footer .brand-lockup--footer .brand-word {
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  font-size: 18px;
     margin-left:-21px; }
@media (min-width: 768px) {
  footer .brand-lockup--footer .brand-word {
    font-size: 20px;
       margin-left:-21px; }
}


/* Step 6 — Mobile-safe footer brand (responsive clamps) */
footer .brand-lockup--footer{
  white-space: nowrap;
  flex-wrap: nowrap;
  gap: clamp(2px, 0.6vw, 6px);
}
footer .brand-lockup--footer .brand-word{
  /* previously -21px; scale with type size */
  margin-left: clamp(-18px, -2.2ch, -21px);
}
footer .brand-lockup--footer .brand-icon{
  /* desktop ~88px, mobile can shrink as needed */
  height: clamp(56px, 12vw, 88px);
  width: auto;
}
@media (max-width: 360px){
  footer .brand-lockup--footer .brand-word{ margin-left: max(-16px, -2ch); }
  footer .brand-lockup--footer .brand-icon{ height: 64px; }
}


/* Step 8 — CTA inline form inside contact card (scoped) */
#contact .card .cta-form .row{ display:grid; gap:10px; grid-template-columns: 1fr 1fr; align-items:start; }
#contact .card .cta-form .row label{ display:block; }
#contact .card .cta-form .row .full{ grid-column: 1 / -1; }
#contact .card .cta-form input, 
#contact .card .cta-form textarea, 
#contact .card .cta-form select{
  width:100%; padding:10px 12px; border-radius:8px;
  border:1px solid rgba(0,0,0,.2); background:#fff; color:#0d1a2a;
}
#contact .card .cta-form textarea{ min-height: 84px; }
#contact .card .cta-form .btn{ justify-self:start; }
#contact .card .cta-form .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
#contact .card .cta-form .sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
@media (max-width: 768px){
  #contact .card .cta-form .row{ grid-template-columns: 1fr; }
}

/* Multi-select tweaks */
#contact .card .cta-form select[multiple]{ min-height: 110px; }

/* Ghost button variant for subtle secondary actions */
.btn.btn-ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn.btn-ghost:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }

/* Visibility fixes for ghost button on light contact card */
#contact .card .btn.btn-ghost{
  color: var(--ink);
  border-color: rgba(13,26,42,.28);
  margin-top: 8px;
}
#contact .card .btn.btn-ghost:hover{
  background: rgba(13,26,42,.06);
  border-color: rgba(13,26,42,.44);
}
#contact .card .btn.btn-ghost::before{
  content: none !important; /* neutralize any gradient overlay from base .btn */
}

/* Contact section: tighten layout & reduce empty space */
#contact .grid{ align-items: start; }
#contact .card{ min-height: auto !important; height: auto; padding-block: 20px; }
#contact .card .cta-form{ margin-top: 6px; }
#contact .card .cta-form .row{ gap: 12px; grid-template-columns: 1fr 1fr; }
#contact .card .cta-form textarea{ min-height: 128px; }
#contact .card .cta-form select[multiple]{ min-height: 160px; }
@media (max-width: 960px){
  #contact .card .cta-form .row{ grid-template-columns: 1fr; }
  #contact .card .cta-form textarea{ min-height: 112px; }
}

/* Align bottoms: reduce extra space and surface turnaround note closer to actions */
#contact .card{ padding-block-end: 14px; }
#contact .card .cta-form .turnaround{
  margin-top: 8px;
  font-size: 0.95rem;
  color: rgba(13,26,42,.72);
}
/* Ensure any stray bottom divider inside contact card stays hidden */
#contact .card hr{ display:none; }

/* Contact: end the card at the divider line */
#contact .card hr{ display:none; } /* hide generic card dividers */
#contact .card hr.card-end{ display:block !important; border:0; border-top:1px solid rgba(13,26,42,.12); margin:16px 0 0; }
#contact .card hr.card-end ~ *{ display:none !important; }
#contact .card{ padding-bottom: 8px; }

/* Contact: hide any layout blocks after the form within the left card */
#contact .card .cta-form ~ *{ display:none !important; }
/* Reduce bottom padding to minimum */
#contact .card{ padding-bottom: 4px; }

/* Email row: left align and ensure only the intended icon shows */
.u-inline-64{ display:flex; align-items:center; gap:12px; justify-content:flex-start; }
.u-inline-63 > .u-inline-65{ display:none; } /* guard against stray icon placement */
/* Tighter bottom for left contact card */
.card.u-inline-58{ padding-bottom: 24px; }

/* CONTACT: remove orphan bottom row and bottom margin that add height */
#contact .card.u-inline-58 > .u-inline-63{ display:none !important; }
#contact .card.u-inline-58 p:last-child{ margin-bottom: 0; }
#contact .card.u-inline-58{ padding-bottom: 16px; }

/* Desktop-only bottom alignment tweak: lower left contact card slightly */
@media (min-width: 992px){
  #contact .card.u-inline-58{ padding-bottom: 28px; } /* +12px from prior */
}

/* Desktop: move the bottom of the left contact card down by +30px */
@media (min-width: 992px){
  #contact .card.u-inline-58{ padding-bottom: 58px; } /* 28px + 30px */
}

/* Desktop: nudge bottom UP by 2px (56px padding) */
@media (min-width: 992px){
  #contact .card.u-inline-58{ padding-bottom: 56px !important; }
}


/* --- Contact form layout refinements (Step 9) --- */
#contact .card .cta-form .row{ gap:16px; }
@media (min-width: 768px){
  #contact .card .cta-form .row{ grid-template-columns: 1fr 1fr; gap:20px; }
}
@media (min-width: 1100px){
  #contact .card .cta-form .row{ gap:24px; }
}
/* Make labels visible inside the contact form */
#contact .card .cta-form label .sr{
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0;
  margin: 0 0 6px 0;
  clip: auto !important;
  overflow: visible;
  display: block;
  font-weight: 600;
  color: var(--ink);
  opacity: .92;
}
/* Field sizing */
#contact .card .cta-form textarea{ min-height: 120px; }
/* Buttons row alignment */
#contact .card .cta-form .btn{ align-self: start; }
#contact .card .cta-form .btn-ghost{ align-self: center; }
/* Turnaround hint */
#contact .card .cta-form .turnaround{
  margin-top: 8px;
  font-size: .95rem;
  color: rgba(13,26,42,.72);
}


/* --- Center buttons below message box; hide stray rule (Step 10) --- */
#contact .card .cta-form .btn,
#contact .card .cta-form .btn-ghost{ justify-self:center; }

/* Desktop: keep them side-by-side centered under textarea */
@media (min-width:768px){
  #contact .card .cta-form label.block{ grid-column:1 / -1; }
  #contact .card .cta-form .btn.gold{ grid-column:1; justify-self:end; }
  #contact .card .cta-form .btn-ghost{ grid-column:2; justify-self:start; margin-left:16px; }
  #contact .card .cta-form .turnaround{ grid-column:1 / -1; text-align:center; }
}

/* Safety: if any hr sneaks in, hide it inside the contact form */
#contact .card .cta-form .card-end{ display:none !important; }


/* --- Step 11: nudge buttons + response line 15px down --- */
#contact .card .cta-form .btn,
#contact .card .cta-form .btn-ghost{
  margin-top: 15px;
}
#contact .card .cta-form .turnaround{
  margin-top: 23px; /* previous +15px (was 8px) */
}


/* --- Step 12: raise bottom of contact card by ~70px --- */
#contact .card{ padding-bottom: 0; }              /* -32px */
#contact .card p:last-child{ margin-bottom: 0; }  /* -24px */
#contact .card .u-inline-64{ margin-bottom: 0; padding-bottom: 0; } /* safety */


/* --- Step 13: even the bottoms of the two cards in the contact row --- */
#contact .grid.u-inline-57{ align-items: stretch; }
#contact .grid.u-inline-57 > .card{ height: 100%; display: flex; flex-direction: column; }
/* restore comfortable bottom padding on the contact card for proper spacing */
#contact .card{ padding-bottom: 32px; }



/* === Toast (post-submit notice) === */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9999;pointer-events:none}
.toast[hidden]{display:none!important}
.toast-inner{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:rgba(13,32,51,.98);color:#fff;box-shadow:var(--shadow-lg);border:1px solid rgba(200,158,59,.35);backdrop-filter:blur(6px)}
.toast-icon{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;background:var(--gold);color:var(--navy-dark);font-weight:800;line-height:1}
.toast-text{font-size:.95rem}
.toast-close{background:transparent;border:0;color:#fff;opacity:.9;font-size:20px;line-height:1;padding:2px 6px;border-radius:8px;cursor:pointer}
.toast-close:hover,.toast-close:focus-visible{opacity:1;outline:2px solid var(--gold-light);outline-offset:2px}
@media (max-width:520px){.toast-inner{max-width:92vw}}



/* === Spacing between Why This Matters Now and Proactive band === */
section#proactive, .proactive-band, .u-inline-19 { margin-top: clamp(48px, 6vh, 80px) !important; }

/* disable hero load animation for brand-safe launch */
.hero-photo{animation:none !important;}

/* === Toast error variant === */
.toast.is-error .toast-inner{ background: rgba(120,20,20,.98); border-color: rgba(255,120,120,.45); }
.toast.is-error .toast-icon{ background: #ff6363; color: #2b0b0b; }


/* === Disable hero animations and transitions (explicit) === */
section.hero, section.hero * {
  animation: none !important;
  transition: none !important;
}



/* === Focus visibility & invalid state === */
:root{ --focus-ring: 2px solid rgba(200,158,59,.9); --focus-offset: 2px; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.summary-card:focus-visible, .btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
input:invalid, select:invalid, textarea:invalid {
  box-shadow: 0 0 0 2px rgba(200,20,20,.2);
  border-color: rgba(200,20,20,.55);
}
.form-status:empty { display:none; }
.form-status { margin-top:.5rem; font-size:.95rem; }


/* === Generated from inline style refactor (STRICT CSP safe) === */
.u-inl-1{ --footer-h:32px; min-height:var(--footer-h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:6px 0; gap:8px; }
.u-inl-2{ display:inline-flex; align-items:center; gap:24px; }
.u-inl-3{ height:27.5px !important; width:auto; display:inline-block; vertical-align:middle; transform:scale(2.723); transform-origin:left center; }
.u-inl-4{ font-size:16px; font-weight:700; letter-spacing:.2px; line-height:27.5px; margin-left:10px; }
.u-inl-5{ justify-self:end; text-align:right; justify-self:end; text-align:right; }