*,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     font-family: 'Inter', system-ui, sans-serif;
     color: #1e293b;
     background: #fff;
     line-height: 1.65;
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 img {
     max-width: 100%;
 }


 .footer-directory{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:24px;
    margin-top:30px;
}

.directory-column{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:24px;
    box-shadow:0 4px 20px rgba(15,23,42,.06);
    transition:all .25s ease;
}



.directory-column h4{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 18px;
    padding-bottom:14px;
    border-bottom:1px solid #eef2f7;

    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#64748b;
}

.directory-column h4 i{
    font-size:18px;
    color:#2563eb;
}

.city-count{
    margin-left:auto;
    background:#eff6ff;
    color:#2563eb;
    padding:4px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
}

.city-links{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    
}
.city-links a{font-size: 12px;
  padding-top: 4px;}

.city-link{
    display:flex;
    align-items:center;
    gap:6px;

    padding:8px 12px;

    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:10px;

    text-decoration:none;
    color:#334155;
    font-size:14px;
    font-weight:500;

    transition:all .2s ease;
}

.city-link i{
    color:#94a3b8;
    font-size:15px;
}

.city-link:hover{
    background:#eff6ff;
    border-color:#bfdbfe;
    color:#2563eb;
    transform:translateY(-1px);
}

.city-link:hover i{
    color:#2563eb;
}

@media (max-width:768px){
    .footer-directory{
        grid-template-columns:1fr;
    }
    .nav-brand img {
  width: 100px;
}
}

 /* ── NAVBAR ─────────────────────────────────────── */
 .nav {
     background: #0f2557;
     padding: 0 2rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 90px;
     position: sticky;
     top: 0;
     z-index: 100;
 }

 .nav-brand {
     display: flex;
     align-items: center;
     gap: .6rem;
     color: #fff;
     font-weight: 700;
     font-size: 1rem;
 }

 .nav-brand img {
     height: auto;
 }

 .nav-links {
     display: flex;
     align-items: center;
     gap: 1.5rem;
 }

 .nav-links a {
     color: #bae6fd;
     font-size: .875rem;
     font-weight: 500;
 }

 .nav-links a:hover {
     color: #fff;
 }

 .nav-cta {
     background-image: linear-gradient(to right, #195475 0%, #1b5093 51%, #193868 100%);
     color: #fff !important;
     padding: .45rem 1.1rem;
     border-radius: 7px;
     font-weight: 600 !important;
 }
 .nav-cta:hover{background-position: right center;}

 /* ── HERO ───────────────────────────────────────── */
 .hero {
     background: linear-gradient(135deg, #0f2557 0%, #1e4976 55%, #155e75 100%);
     padding: 5rem 2rem 4rem;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(125, 211, 252, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 211, 252, .04) 1px, transparent 1px);
     background-size: 40px 40px;
 }

 .hero-inner {
     position: relative;
     max-width: 760px;
     margin: 0 auto;
 }

 .hero-eyebrow {
     display: inline-block;
     background: rgba(125, 211, 252, .15);
     border: 1px solid rgba(125, 211, 252, .3);
     color: #7dd3fc;
     font-size: .75rem;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     padding: .3rem .9rem;
     border-radius: 20px;
     margin-bottom: 1.25rem;
 }

 .hero h1 {
     font-size: clamp(1.6rem, 4vw, 2.6rem);
     font-weight: 800;
     color: #fff;
     line-height: 1.2;
     margin-bottom: 1rem;
 }

 .hero h1 span {
     color: #7dd3fc;
 }

 .hero p {
     font-size: 1rem;
     color: #bae6fd;
     max-width: 580px;
     margin: 0 auto 2rem;
 }

 .hero-btns {
     display: flex;
     gap: 1rem;
     justify-content: center;
     flex-wrap: wrap;
 }

 .btn-primary {
     background: linear-gradient(135deg, #1d4ed8, #6d28d9);
     color: #fff;
     padding: .75rem 1.75rem;
     border-radius: 9px;
     font-weight: 700;
     font-size: .95rem;
     transition: opacity .15s;
 }

 .btn-primary:hover {
     opacity: .88;
     color: #fff;
 }

 .btn-outline {
     border: 2px solid rgba(255, 255, 255, .35);
     color: #fff;
     padding: .7rem 1.5rem;
     border-radius: 9px;
     font-weight: 600;
     font-size: .95rem;
 }

 .btn-outline:hover {
     background: rgba(255, 255, 255, .08);
 }

 .hero-stats {
     display: flex;
     gap: 2.5rem;
     justify-content: center;
     flex-wrap: wrap;
     margin-top: 3rem;
     padding-top: 2rem;
     border-top: 1px solid rgba(255, 255, 255, .1);
 }

 .hero-stat-num {
     font-size: 1.75rem;
     font-weight: 800;
     color: #fff;
 }

 .hero-stat-lbl {
     font-size: .78rem;
     color: #94a3b8;
     margin-top: .2rem;
 }

 /* ── SECTION WRAPPER ────────────────────────────── */
 .section {
     padding: 4rem 2rem;
 }

 .section-alt {
     background: #f8fafc;
 }

 .container {
     max-width: 1100px;
     margin: 0 auto;
 }

 .section-tag {
     font-size: .72rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .12em;
     color: #1d4ed8;
     margin-bottom: .5rem;
 }

 .section-title {
     font-size: clamp(1.35rem, 3vw, 1.9rem);
     font-weight: 800;
     color: #0f172a;
     margin-bottom: .75rem;
 }

 .section-sub {
     font-size: .95rem;
     color: #64748b;
     max-width: 620px;
     line-height: 1.7;
 }

 /* ── BREADCRUMB ─────────────────────────────────── */
 .breadcrumb {
     background: #f1f5f9;
     padding: .65rem 2rem;
     font-size: .8rem;
     color: #64748b;
 }

 .breadcrumb a {
     color: #1d4ed8;
 }

 .breadcrumb span {
     margin: 0 .4rem;
 }

 /* ── OVERVIEW ───────────────────────────────────── */
 .overview-text {
     font-size: .975rem;
     color: #334155;
     line-height: 1.8;
 }

 #overview {
     position: relative;
     overflow: hidden;
     background: #fff;
 }

 #overview::before,
 #overview::after {
     content: '';
     position: absolute;
     pointer-events: none;
     z-index: 0;
 }

 /* Top Right SVG */
 #overview::before {
     width: 400px;
     height: 400px;
     top: -100px;
     right: -100px;
     opacity: 0.05;
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='90' fill='%230066ff'/%3E%3C/svg%3E") no-repeat center;
     background-size: contain;
 }

 /* Bottom Left SVG */
 #overview::after {
     width: 350px;
     height: 350px;
     bottom: -120px;
     left: -120px;
     opacity: 0.04;
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%2300b894' d='M42.7,-73.2C55.6,-66.2,66.5,-55.8,74.8,-42.8C83.1,-29.8,88.8,-14.9,88.4,-0.2C88,14.4,81.5,28.9,72.7,41.5C63.9,54.1,52.8,64.9,39.8,72.5C26.8,80.1,11.9,84.5,-2.8,88.9C-17.6,93.3,-35.1,97.8,-48.7,91.6C-62.3,85.4,-72,68.5,-79.3,51.6C-86.6,34.7,-91.5,17.4,-91.4,0.1C-91.3,-17.2,-86.1,-34.4,-77.5,-48.2C-68.9,-62,-56.9,-72.4,-43.2,-78.7C-29.5,-85,-14.7,-87.2,0.1,-87.4C14.9,-87.6,29.8,-85.8,42.7,-73.2Z' transform='translate(100 100)'/%3E%3C/svg%3E") no-repeat center;
     background-size: contain;
 }

 #overview .container {
     position: relative;
     z-index: 1;
 }

 /* ── ASSESSMENT MODULES ─────────────────────────── */
 .modules-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
     gap: 1rem;
     margin-top: 2rem;
 }

 .module-card {
     background: #fff;
     border: 1px solid #e2e8f0;
     border-top: 3px solid #1d4ed8;
     border-radius: 10px;
     padding: 1.1rem 1.2rem;
 }

 .module-card:nth-child(2n) {
     border-top-color: #6d28d9;
 }

 .module-card:nth-child(3n) {
     border-top-color: #059669;
 }

 .module-card:nth-child(4n) {
     border-top-color: #d97706;
 }

 .module-icon {
     font-size: 1.4rem;
     margin-bottom: .5rem;
 }

 .module-title {
     font-size: .9rem;
     font-weight: 700;
     color: #0f172a;
 }

 .module-check {
     color: #059669;
     margin-right: .35rem;
 }

 /* ── INDUSTRIES ─────────────────────────────────── */
 .industries-grid {
     display: flex;
     flex-wrap: wrap;
     gap: .65rem;
     margin-top: 1.5rem;
 }

 .industry-tag {
     background: #dbeafe;
     color: #1e40af;
     font-size: .82rem;
     font-weight: 600;
     padding: .4rem .85rem;
     border-radius: 20px;
 }

 /* ── PROCESS ────────────────────────────────────── */
/* .process-steps {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 1.25rem;
     margin-top: 2rem;
     counter-reset: step;
 }*/

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 3.2rem;
  margin-top: 2rem;
  counter-reset: step;
}

 .process-step {
     background: #fff;
     border-radius: 10px;
     padding: 1.2rem;
     position: relative;
     text-align: center;
 }

 .step-num {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     background: #0f2557;
     color: #fff;
     border-radius: 50%;
     font-size: .8rem;
     font-weight: 700;
     margin-bottom: .7rem;
 }

 .step-title {
     font-size: .875rem;
     font-weight: 700;
     color: #0f172a;
 }

 /* ── BENEFITS ───────────────────────────────────── */
 .benefits-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
     gap: 1rem;
     margin-top: 2rem;
 }

 .benefit-item {
     display: flex;
     gap: .85rem;
     align-items: flex-start;
     padding: 1rem;
     background: #fff;
     border: 1px solid #e2e8f0;
     border-radius: 10px;
 }

 .benefit-icon {
     width: 36px;
     height: 36px;
     border-radius: 8px;
     background: #dbeafe;
     color: #1d4ed8;
     display: grid;
     place-items: center;
     font-size: 1.1rem;
     flex-shrink: 0;
 }

 .benefit-title {
     font-size: .875rem;
     font-weight: 700;
     color: #0f172a;
     margin-bottom: .2rem;
 }

 .benefit-desc {
     font-size: .8rem;
     color: #64748b;
     line-height: 1.55;
 }

 /* ── FAQ ────────────────────────────────────────── */
 .faq-list {
     margin-top: 2rem;
 }

 .faq-item {
     border: 1px solid #e2e8f0;
     border-radius: 10px;
     margin-bottom: .75rem;
     overflow: hidden;
 }

 .faq-q {
     width: 100%;
     text-align: left;
     background: #fff;
     padding: 1rem 1.25rem;
     font-size: .925rem;
     font-weight: 600;
     color: #0f172a;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border: none;
 }

 .faq-q:hover {
     background: #f8fafc;
 }

 .faq-icon {
     font-size: 1.1rem;
     color: #64748b;
     transition: transform .2s;
 }

 .faq-a {
     padding: 0 1.25rem 1rem;
     font-size: .875rem;
     color: #475569;
     line-height: 1.7;
 }

 details[open] .faq-icon {
     transform: rotate(45deg);
 }

 /* ── CTA BANNER ─────────────────────────────────── */
 .cta-section {
     background: linear-gradient(135deg, #0f2557, #312e81);
     padding: 4rem 2rem;
     text-align: center;
 }

 .cta-eyebrow {
     color: #7dd3fc;
     font-size: .78rem;
     font-weight: 700;
     letter-spacing: .12em;
     text-transform: uppercase;
     margin-bottom: .75rem;
 }

 .cta-title {
     font-size: clamp(1.5rem, 3vw, 2.2rem);
     font-weight: 800;
     color: #fff;
     margin-bottom: 1rem;
 }

 .cta-sub {
     color: #bae6fd;
     font-size: .95rem;
     margin-bottom: 2rem;
 }

 .cta-contact {
     margin-top: 2rem;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 2rem;
 }

 .cta-contact-item {
     text-align: center;
 }

 .cta-contact-icon {
     font-size: 1.4rem;
     color: #7dd3fc;
     display: block;
     margin-bottom: .3rem;
 }

 .cta-contact-lbl {
     font-size: .7rem;
     text-transform: uppercase;
     letter-spacing: .1em;
     color: #94a3b8;
 }

 .cta-contact-val {
     font-size: .9rem;
     font-weight: 700;
     color: #e0f2fe;
     margin-top: .15rem;
 }

 /* ── FOOTER ─────────────────────────────────────── */
 .footer {
     background: #0d1b3e;
     padding: 1.5rem 2rem;
     text-align: center;
 }

 .footer p {
     font-size: .78rem;
     color: #64748b;
 }

 .footer a {
     color: #7dd3fc;
 }

 .footer-links {
     display: flex;
     justify-content: center;
     gap: 1.5rem;
     margin-bottom: .75rem;
     flex-wrap: wrap;
 }

 .footer-links a {
     font-size: .8rem;
     color: #94a3b8;
 }

 .footer-links a:hover {
     color: #7dd3fc;
 }

 /* ── OTHER CITIES ───────────────────────────────── */
 .cities-grid {
     display: flex;
     flex-wrap: wrap;
     gap: .65rem;
     margin-top: 1.5rem;
 }

 .city-pill {
     background: #fff;
     border: 1px solid #e2e8f0;
     color: #334155;
     font-size: .82rem;
     font-weight: 600;
     padding: .4rem 1rem;
     border-radius: 20px;
     transition: background .15s, border-color .15s;
 }

 .city-pill:hover {
     background: #dbeafe;
     border-color: #93c5fd;
     color: #1e40af;
 }

 @media (max-width: 640px) {
     .hero {
         padding: 3rem 1.25rem 2.5rem;
     }

     .section {
         padding: 3rem 1.25rem;
     }

     .nav-links {
         display: none;
     }
       .nav-cta{font-size: 12px;
  padding: 9px 8px 9px 9px;}
  .city-links a{font-size: 12px;}
 }





 .state-section {
     margin-bottom: 2.5rem
 }

 .state-title {
     font-size: 1rem;
     font-weight: 700;
     color: #0f2557;
     
     padding-bottom: .5rem;
     margin-bottom: 1rem;
     display: flex;
     align-items: center;
     gap: .5rem;
     border: 1px solid #eef6fb;
  background: #eef6fb;
  width: 100%;
  padding: 15px;
 }







 .tier-badge {
     display: inline-block;
     font-size: .68rem;
     font-weight: 700;
     padding: .15rem .5rem;
     border-radius: 10px;
     letter-spacing: .04em
 }

 .tier-1 {
     background: #dbeafe;
     color: #1e40af
 }

 .tier-2 {
     background: #d1fae5;
     color: #065f46
 }

 .tier-3 {
     background: #f1f5f9;
     color: #475569
 }

 .hero-stat span {
     font-size: .7rem;
     color: #7dd3fc;
     text-transform: uppercase;
     letter-spacing: .05em;
 }


 .filter-row {
     display: flex;
     gap: .5rem;
     flex-wrap: wrap;
     margin-bottom: 1.5rem;
 }

 .filter-btn {
     font-size: .75rem;
     font-weight: 600;
     padding: .3rem .85rem;
     border-radius: 20px;
     border: 1.5px solid #e2e8f0;
     background: var(--color-background-primary);
     color: var(--color-text-secondary);
     cursor: pointer;
     transition: all .15s;
 }

 .filter-btn.active,
 .filter-btn:hover {
    border-color: #1a5376;
  color: #1a5376;
  background: #eff6ff;
 }

.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    padding: 20px 14px;
    margin-bottom: 25px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    transition: all 0.2s ease;
}

/* icon */
.search-bar i {
    color: #94a3b8;
    font-size: 18px;
}

/* input */
.search-bar input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 14px;
    color: #0f172a;
    background: transparent;
}

/* focus state (modern UX feel) */
.search-bar:focus-within {
    border-color: #6366f1;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.15);
}

/* subtle hover */
.search-bar:hover {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

 /* FILTER */
 .filter-row {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-bottom: 20px
 }

 .filter-btn {
     border: 1px solid #e2e8f0;
     background: #fff;
     padding: 6px 12px;
     border-radius: 999px;
     font-size: .8rem;
     cursor: pointer
 }

 .filter-btn.active {
     background: #1a5376;
     color: #fff;
     border-color: #1a5376
 }

 /* STATE */
 .state-section {
     margin-bottom: 30px
 }

 .state-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px
 }

 .state-title {
     font-weight: 700
 }

 /* CITY GRID */
 .city .cities-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     gap: 10px
 }

.city-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: .2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.city-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

 .city-name {
     font-weight: 300;
  font-size: 14px;
 }

 .city-arrow {
     color: #94a3b8
 }

 /* BADGES */
 .tier-badge {
     font-size: .7rem;
     padding: 2px 8px;
     border-radius: 999px;
     display: inline-block;
     margin-top: 4px
 }

 .t1 {
     background: #dbeafe;
     color: #1e40af
 }

 .t2 {
     background: #dcfce7;
     color: #166534
 }

 .t3 {
     background: #f1f5f9;
     color: #475569
 }