:root {
--color-primary:         #0037FF;
      --color-primary-dark:    #0027B6;
      --color-hero-from:       #05118B;
      --color-hero-to:         #12062C;
      --color-text-primary:    #111111;
      --color-text-secondary:  #555555;
      --color-text-muted:      #888888;
      --color-white:           #ffffff;
      --color-black:           #000000;
      --color-border:          #C2C7D5;
      --color-border-tertiary: #D1D1D1;
      --color-table-header:    #454545;
      --color-subheader-bg:    #EEF3FF;
      --color-badge-bg:        #DCE4FF;
      --color-badge-text:      #0027B6;
      --color-dc-pill:         #E7E7E7;
      --color-filter-bg:       #F5F7FF;
      --color-body-grad-start: #EFF6FF;
      --color-body-grad-mid:   #EEF2FF;
      --color-body-grad-end:   #FAF5FF;
      --color-card-bg:         #FFFFFF;
 
      /* radii */
      --radius-sm:  4px;
      --radius-md:  8px;
      --radius-lg:  12px;
      --radius-xl:  20px;
      --radius-full:50px;
 
      /* shadows */
      --shadow-card: 0 2px 8px rgba(0,0,0,.10);
      --shadow-sm:   0 1px 4px rgba(0,0,0,.06);
 
      /* spacing */
      --page-gutter: 224px;
      --page-width:  1280px;
    }
 
    /* ═══════════════════════════════════════════════════════
       RESET & BASE
    ═══════════════════════════════════════════════════════ */

 .content-wrap {
    width: 100%;
    max-width: 100%;
}

    .container {
      max-width: var(--page-width);
      margin:    0 auto;
      padding:   0 var(--page-gutter);
    }
 
   
    /* ═══════════════════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════════════════ */
    .hero {
      background: linear-gradient(160.5deg, var(--color-hero-from) 0%, var(--color-hero-to) 100%);
      padding:    72px 0 80px;
      text-align: center;
      position:   relative;
      overflow:   hidden;
    }
 
    /* subtle dot-grid overlay */
    .hero::before {
      content:  '';
      position: absolute;
      inset:    0;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px);
      background-size: 32px 32px;
      pointer-events:  none;
    }
 
    .hero-inner {
      position: relative;
      z-index:  1;
    }
 .section-title>span {
    display: none;
}
.zw-template-inner .content-wrap h1 {
    padding: 0 0 20px;
}
    .hero-icon {
      width:          80px;
      height:         80px;
      margin:         0 auto 28px;
      background:     rgba(255,255,255,.08);
      border-radius:  var(--radius-xl);
      display:        flex;
      align-items:    center;
      justify-content:center;
    }
 .accordion-body-text {
    padding-top: 20px;
}
    .hero h1 {
      font-size:      70px;
      font-family:    var(--zf-secondary-semibold);
      line-height:    1.1;
      letter-spacing: -1.6px;
      color:          var(--color-white);
    max-width: 1100px;
    margin: 0 auto 20px;
    }
 
    .hero-subtitle {
      font-size:      20px;
      line-height:    1.5;
      letter-spacing: -0.4px;
      color:          var(--color-white);
max-width: 740px;
      margin:         0 auto 12px;
    }
 
    .hero-date {
      font-size:      16px;
      font-family:    var(--zf-secondary-bold);
      letter-spacing: -0.32px;
      color:          var(--color-white);
    }
 
    /* ═══════════════════════════════════════════════════════
       BODY GRADIENT WRAPPER
    ═══════════════════════════════════════════════════════ */
    .body-section {
      background: linear-gradient(128.5deg,
        var(--color-body-grad-start) 0%,
        var(--color-body-grad-mid)   50%,
        var(--color-body-grad-end)   100%);
      padding-bottom: 80px;
    }
 
    /* ═══════════════════════════════════════════════════════
       STATS CARDS
    ═══════════════════════════════════════════════════════ */
    .stats-section {
      padding:    48px 0 0;
      max-width:  calc(var(--page-width) + var(--page-gutter));
      margin:     0 auto;
      padding-left:  var(--page-gutter);
      padding-right: var(--page-gutter);
    }
 
    .stats-grid {
      display:               grid;
      grid-template-columns: repeat(3, 1fr);
      gap:                   24px;
    }
 
    .stat-card {
      background:    var(--color-card-bg);
      border:        1px solid var(--color-border-tertiary);
      border-radius: var(--radius-lg);
      box-shadow:    var(--shadow-card);
      padding:       48px 48px 40px;
      position:      relative;
      overflow:      hidden;
      min-height:    240px;
    }
 
    .stat-card-badge {
      position:       absolute;
      top:            0;
      right:          0;
      background:     var(--color-primary);
      color:          var(--color-white);
      font-size:      12px;
      font-family:    var(--zf-secondary-semibold);
      letter-spacing: 0.6px;
      text-transform: uppercase;
      padding:        5px 12px;
      border-radius:  0 var(--radius-lg) 0 var(--radius-md);
    }
 
    .stat-icon-wrap {
      width:         72px;
      height:        72px;
      border-radius: var(--radius-xl);
      display:       flex;
      align-items:   center;
      justify-content: center;
      margin-bottom: 20px;
    }
 
    .stat-label {
      font-size:      22px;
      font-family:    var(--zf-secondary-medium);
      letter-spacing: -0.44px;
      color:          var(--color-black);
      margin-bottom:  6px;
    }
 
    .stat-value {
      font-size:      52px;
      font-family:    var(--zf-secondary-bold);
      line-height:    1;
      letter-spacing: -1px;
      color:          var(--color-black);
    }
 
    /* ═══════════════════════════════════════════════════════
       INFO ACCORDION
    ═══════════════════════════════════════════════════════ */
    .info-section {
      max-width:  calc(var(--page-width) + var(--page-gutter) * 2);
      margin:     40px auto 0;
      padding:    0 var(--page-gutter);
    }
 
    .accordion-list { display: flex; flex-direction: column; gap: 10px; }
 
    .accordion-item {
      background:    var(--color-white);
      border-radius: var(--radius-md);
      overflow:      hidden;
      box-shadow:    var(--shadow-sm);
    }
 
    .accordion-trigger {
      width:           100%;
      display:         flex;
      align-items:     center;
      justify-content: space-between;
      padding:         22px 28px;
      cursor:          pointer;
      border:          none;
      background:      transparent;
      font-size:       24px;
      font-family:    var(--zf-secondary-semibold);
      letter-spacing: -0.48px;
      color:           var(--color-text-primary);
      text-align:      left;
      transition:      background .15s;
    }
 
    .accordion-trigger:hover { background: #fafafa; }
 
    .accordion-chevron {
      width:       24px;
      height:      24px;
      flex-shrink: 0;
      transition:  transform .25s ease;
      opacity:     .5;
    }
 
    .accordion-item.open .accordion-chevron { transform: rotate(180deg); opacity: 1; }
 
    .accordion-body {
      display:    none;
      padding:    0 28px 28px;
      border-top: 1px solid #f0f0f0;
    }
 
    .accordion-item.open .accordion-body { display: block; }
 
    .accordion-body-title {
      font-size:      20px;
      font-family:    var(--zf-secondary-semibold);
      letter-spacing: -0.4px;
      color:          var(--color-text-primary);
      margin-bottom:  10px;
      padding-top:    20px;
    }
 
    .accordion-body-text {
      font-size:      17px;
      line-height:    1.65;
      letter-spacing: -0.34px;
      color:          var(--color-text-secondary);
    }
 
    /* ═══════════════════════════════════════════════════════
       DIRECTORY SECTION
    ═══════════════════════════════════════════════════════ */
    .directory-section {
      max-width:  calc(var(--page-width) + var(--page-gutter) * 2);
      margin:     56px auto 0;
      padding:    0 var(--page-gutter);
    }
 
    .directory-heading {
      font-size:      38px;
      font-family:    var(--zf-secondary-semibold);
      letter-spacing: -0.76px;
      color:          var(--color-black);
      margin-bottom:  28px;
    }
 
    /* ── Filter bar ──────────────────────────────────────── */
    .filter-bar {
      display:       flex;
      align-items:   center;
      gap:           0;
      background:    var(--color-white);
      border:        1px solid #e0e3ee;
      border-radius: var(--radius-md);
      box-shadow:    var(--shadow-sm);
      height:        62px;
      overflow:      hidden;
      margin-bottom: 16px;
    }
 
    .filter-search {
      display:     flex;
      align-items: center;
      gap:         10px;
      padding:     0 20px;
      flex:        1 1 0;
      min-width:   0;
      height:      100%;
      border-right:1px solid #e0e3ee;
    }
 
    .filter-search svg { flex-shrink: 0; color: var(--color-text-muted); }
 
    .filter-search input {
      flex:        1;
      border:      none;
      outline:     none;
      font-size:   15px;
      font-family:    var(--zf-secondary-medium);
      color:       var(--color-text-secondary);
      background:  transparent;
      min-width:   0;
    }
 
    .filter-search input::placeholder { color: #aaa; }
 
    .filter-dropdowns {
      display:     flex;
      align-items: stretch;
      height:      100%;
    }
 
    .filter-select-wrap {
      display:      flex;
      align-items:  center;
      gap:          8px;
      padding:      0 18px;
      height:       100%;
      cursor:       pointer;
      position:     relative;
      border-right: 1px solid #e0e3ee;
    }
 
    .filter-select-wrap:last-of-type { border-right: none; }
 
    .filter-select-wrap svg { flex-shrink: 0; color: var(--color-text-muted); }
 
    .filter-select-wrap select {
      border:      none;
      outline:     none;
      font-size:   15px;
      font-family:    var(--zf-secondary-medium);
      color:       var(--color-text-secondary);
      background:  transparent;
      cursor:      pointer;
      appearance:  none;
      -webkit-appearance: none;
      padding-right: 20px;
    }
 
    .select-chevron {
      position: absolute;
      right:    10px;
      pointer-events: none;
      color:    var(--color-text-muted);
    }
 
    /* ── Reset button ────────────────────────────────────── */
    .btn-reset {
      display:     flex;
      align-items: center;
      gap:         6px;
      height:      100%;
      padding:     0 20px;
      border:      none;
      border-left: 1px solid #e0e3ee;
      background:  transparent;
      font-size:   14px;
      font-family:    var(--zf-secondary-semibold);
      color:       var(--color-primary);
      cursor:      pointer;
      white-space: nowrap;
      letter-spacing: -0.28px;
      transition:  background .15s, color .15s;
    }
 
    .btn-reset:hover { background: #f0f4ff; }
    .btn-reset svg   { flex-shrink: 0; }
 
    /* ── Results count ───────────────────────────────────── */
    .results-meta {
      display:     flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      min-height:  22px;
    }
 
    #resultsCount {
      font-size:      15px;
      letter-spacing: -0.3px;
      color:          var(--color-text-secondary);
    }
 
    #resultsCount b {       font-family:    var(--zf-secondary-bold); color: var(--color-text-primary); }
 
    /* ═══════════════════════════════════════════════════════
       DIRECTORY OUTPUT — classes consumed by directory.js
    ═══════════════════════════════════════════════════════ */
 
    /* Section block wrapper (one per table type) */
    .section-block { margin-bottom: 40px; }
 
    .section-title {
      display:     flex;
      align-items: center;
      gap:         10px;
      font-size:   18px;
      font-family:    var(--zf-secondary-semibold);
      color:       var(--color-text-primary);
      margin-bottom: 12px;
      letter-spacing: -0.36px;
    }
 
    .section-tag {
      font-size:      11px;
      font-family:    var(--zf-secondary-bold);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      padding:        3px 10px;
      border-radius:  var(--radius-full);
    }
 
    .tag-1 { background: #DCE4FF; color: var(--color-primary-dark); }
    .tag-2 { background: #FFE8D9; color: #B84D00; }
    .tag-3 { background: #D1EFFF; color: #005EA8; }
 
    /* Outer dir-table */
    .dir-table {
      width:           100%;
      border-collapse: collapse;
      table-layout:    fixed;
    }
 
    .dir-table thead tr {
      background: var(--color-table-header);
      border-radius: var(--radius-md) var(--radius-md) 0 0;
    }
 
    .dir-table thead th {
      padding:        18px 24px;
      font-size:      16px;
      font-family:    var(--zf-secondary-bold);
      letter-spacing: -0.32px;
      color:          var(--color-white);
      text-align:     left;
    }
 
    .dir-table thead th:first-child { border-radius: var(--radius-md) 0 0 0; }
    .dir-table thead th:last-child  { border-radius: 0 var(--radius-md) 0 0; }
 
    /* Clickable provider row */
    .sp-row {
      cursor:     pointer;
      border-bottom: 1px solid var(--color-border);
      background: var(--color-white);
      transition: background .15s;
    }
 
    .sp-row:hover { background: #f8f9ff; }
 
    .sp-row td {
      padding:    16px 24px;
      vertical-align: middle;
    }
 
    .sp-name-cell {
      display:     flex;
      align-items: center;
      gap:         10px;
    }
 
    .chevron-sm {
      display:         inline-flex;
      align-items:     center;
      justify-content: center;
      width:           20px;
      height:          20px;
      font-size:       25px;
      transition:      transform .25s ease, color .15s;
      flex-shrink:     0;
      user-select:     none;
color: #000;
    top: -3px;
    position: relative;
    }
 
    .chevron-sm.open {
      transform: rotate(90deg);
      color:     var(--color-primary);
    }
 
    /* Service count badge on outer row */
    .svc-badge {
      display:        inline-flex;
      align-items:    center;
      background:     var(--color-badge-bg);
      color:          var(--color-badge-text);
      font-size:      13px;
      font-family:    var(--zf-secondary-bold);
      letter-spacing: 0.4px;
      text-transform: uppercase;
      padding:        6px 14px;
      border-radius:  var(--radius-md);
    }
 
    /* Collapsible sub-table row */
    .sub-table-wrap {
      display: none;        /* hidden by default */
    }
 
    .sub-table-wrap.open {
      display: table-row;
    }
 
    /* Inner detail table */
    .sub-inner-table {
      width:           100%;
      border-collapse: collapse;
      table-layout:    fixed;
    }
 
    .sub-inner-table thead tr {
      background: var(--color-subheader-bg);
      border-bottom: 1px solid var(--color-border);
    }
 
    .sub-inner-table thead th {
      padding:        11px 16px;
      font-size:      13px;
      font-family:    var(--zf-secondary-bold);
      letter-spacing: -0.26px;
      color:          var(--color-text-secondary);
      text-align:     left;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
 
    .sub-inner-table tbody tr {
      border-bottom: 1px solid #f0f2f8;
      background:    var(--color-white);
    }
 
    .sub-inner-table tbody tr:last-child { 1px solid var(--color-border)}
    .sub-inner-table tbody tr:hover      { background: #fafbff; }
 .dir-table>tbody>tr:nth-last-child(2){
    border-bottom: 0;
}
    .sub-inner-table tbody td {
      padding:        12px 16px;
      font-size:      14px;
      line-height:    1.55;
      vertical-align: top;
    }
 
    /* Row number bubble */
    .row-num {
      display:         inline-flex;
      align-items:     center;
      justify-content: center;
      width:           20px;
      height:          20px;
      border-radius:   50%;
      background:      #eef0ff;
      color:           var(--color-primary-dark);
      font-size:       11px;
      font-family:    var(--zf-secondary-bold);
      margin-right:    8px;
      flex-shrink:     0;
    }
 
    /* DC pill chips */
    .dc-pill {
      display:        inline-flex;
      align-items:    center;
      justify-content:center;
      min-width:      36px;
      padding:        3px 8px;
      background:     var(--color-dc-pill);
      border-radius:  var(--radius-sm);
      font-size:      12px;
      font-family:    var(--zf-secondary-semibold);
      color:          var(--color-text-primary);
      margin:         2px 3px 2px 0;
    }
 
    .dc-pill.highlight {
      background: var(--color-primary);
      color:      var(--color-white);
    }
 
    /* No-results / loading state */
    .empty-state {
      padding:    60px 24px;
      text-align: center;
      color:      var(--color-text-muted);
      font-size:  16px;
      background: var(--color-white);
      border-radius: var(--radius-md);
      border:     1px dashed var(--color-border-tertiary);
    }
 
/* ── Allow dropdown panels to escape the bar ──────────────────── */
.filter-bar { overflow: visible; }

/* ── Multi-select sits flush inside the filter bar ────────────── */
.filter-multiselect {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 100%;
  border-right: 1px solid #e0e3ee;
}

.filter-multiselect:last-of-type {
  border-right: none;
}

/* Trigger button — flat, matches the original .filter-select-wrap look */
.ms-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 32px 0 18px;        /* extra right padding for chevron */
  background: transparent;
  border: none;
  font-size: 15px;
      font-family:    var(--zf-secondary-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  min-width: 0;
  transition: background .15s;
}

.ms-trigger:hover { background: #fafbff; }

.ms-trigger > svg:first-of-type {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.ms-trigger .select-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
  transition: transform .2s ease;
}

.ms-trigger[aria-expanded="true"] .select-chevron {
  transform: translateY(-50%) rotate(180deg);
}

.ms-label {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-count {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  font-size: 11px;
      font-family:    var(--zf-secondary-bold);
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

/* ── Floating dropdown panel ──────────────────────────────────── */
.ms-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  z-index: 100;
  padding: 6px;
}

.ms-panel[hidden] { display: none; }

/* Anchor the last dropdown to the right so it doesn't overflow */
.filter-multiselect:last-of-type .ms-panel {
  left: auto;
  right: 0;
}

.ms-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
      font-family:    var(--zf-secondary-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  transition: background .12s;
}

.ms-option:hover { background: var(--color-filter-bg); }

.ms-option input[type="checkbox"] {
  margin: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.ms-empty {
  padding: 16px;
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
}
.zwc-notes-sec {
    padding: 60px 0 0;
}

.zwc-notes-sec .content-wrap {
    width: 95%;
    max-width: 1280px;
    margin: 0 auto;
}
.zwc-notes-sec ul li{
margin-bottom:15px;
}
.zwc-notes-sec ul {
list-style: disc;
    padding-left: 20px;
}

.content-wrap .row{
    display:none;
}
/* ═══════════════════════════════════════════════════════
   DROPDOWN TRANSITIONS
   Override [hidden]'s display:none so opacity/transform can animate
═══════════════════════════════════════════════════════ */
.ms-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transform-origin: top left;
  transition:
    opacity   .22s cubic-bezier(0.16, 1, 0.3, 1),
    transform .22s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

.filter-multiselect:last-of-type .ms-panel {
  transform-origin: top right;
}

.ms-panel[hidden] {
  display: block;                /* override the UA default of display:none */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.97);
  pointer-events: none;
  transition:
    opacity   .18s ease,
    transform .18s ease,
    visibility 0s linear .18s;   /* delay visibility until fade-out finishes */
}

/* Accordion chevron already has a transition — add one for the body too */
.accordion-trigger { transition: background .15s ease, color .15s ease; }

/* ═══════════════════════════════════════════════════════
   TABLE BOTTOM RADIUS
   Belt-and-braces: round the last row's outer corners directly
═══════════════════════════════════════════════════════ */
.dir-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-md);
}
.dir-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-md);
}
.dir-table tbody tr:last-child td {
  border-bottom: none;           /* avoid double border at wrapper edge */
}

/* When the last visible row is a collapsed sub-table-wrap, round the row above it */
.dir-table tbody tr.sub-table-wrap:not(.open) + tr.sp-row:last-child td:first-child,
.dir-table tbody tr.sp-row:last-child td:first-child {
  border-bottom-left-radius: var(--radius-md);
}

/* Inner detail table — round its last row too */
.sub-inner-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-sm);
}
.sub-inner-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
/* Multi-value cells — each item on its own line with a soft separator */
.sub-inner-table .multi-item {
  display: block;
}
.sub-inner-table .multi-item + .multi-item {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e8eaf0;
}

/* HTML tags from JSON content */
.sub-inner-table tbody td strong {
  color: var(--color-text-primary);
      font-family:    var(--zf-secondary-semibold);
}
.sub-inner-table tbody td em { font-style: italic; }
.sub-inner-table tbody td a {
  color: var(--color-primary);
  text-decoration: underline;
}
.sub-inner-table tbody td a:hover { color: var(--color-primary-dark); }

/* Tighter spacing inside multi-items on small screens */

/* ── Large desktop and below ─────────────────────────── */
@media (max-width: 1440px) {
  :root { --page-gutter: 120px; }
  .hero h1 { font-size: 64px;         max-width: 940px;}
}

/* ── Small desktop / large tablet ────────────────────── */
@media (max-width: 1200px) {
  :root { --page-gutter: 64px; }
  .hero { padding: 56px 0 64px; }
  .hero h1 { font-size: 56px; letter-spacing: -1.2px; max-width: 840px;}
  .hero-subtitle { font-size: 18px; }
  .stat-card { padding: 36px 32px 32px; min-height: 220px; }
  .stat-value { font-size: 44px; }
  .stat-label { font-size: 20px; }
  .accordion-trigger { font-size: 20px; padding: 20px 24px; }
  .accordion-body { padding: 0 24px 24px; }
  .directory-heading { font-size: 32px; }
}

/* ── Tablet ──────────────────────────────────────────── */
@media (max-width: 992px) {
  :root { --page-gutter: 40px; }

  .hero { padding: 48px 0 56px; }
  .hero-icon { width: 72px; height: 72px; margin-bottom: 20px; }
  .hero-icon svg { width: 80px; height: 80px; }
  .hero h1 { font-size: 44px; letter-spacing: -0.8px; }
  .hero-subtitle { font-size: 16px; max-width: 480px; }
  .hero-date { font-size: 14px; }

  /* Stats: 3 → 1 col, keep card visual interest */
  .stats-section { padding-top: 36px; }
  .stats-grid { grid-template-columns: 1fr; gap: 16px; }
  .stat-card { min-height: 0; padding: 32px 28px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  .stat-icon-wrap { margin-bottom: 0; width: 64px; height: 64px; flex-shrink: 0; }
  .stat-icon-wrap svg { width: 30px; height: 30px; }
  .stat-card > p { width: 100%; flex: 1 0 auto; }
  .stat-label { margin-bottom: 4px; font-size: 18px; }
  .stat-value { font-size: 36px; }

  .directory-heading { font-size: 28px; margin-bottom: 20px; }

  /* Filter bar stacks: search on top, controls below */
  .filter-bar {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
  }
  .filter-search {
    height: 54px;
    border-right: none;
    border-bottom: 1px solid #e0e3ee;
    flex: 0 0 auto;
  }
  .filter-dropdowns { flex-wrap: wrap; height: auto; }
  .filter-multiselect,
  .filter-multiselect:last-of-type {
    flex: 1 1 50%;
    min-width: 0;
    border-right: 1px solid #e0e3ee;
    border-bottom: 1px solid #e0e3ee;
  }
  .ms-trigger { height: 50px; }
  .btn-reset {
    height: 50px;
    width: 100%;
    justify-content: center;
    border-left: none;
    border-top: 1px solid #e0e3ee;
  }
}

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 767px) {
  :root { --page-gutter: 20px; }

  .hero { padding: 40px 0 48px; }
  .hero-icon { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 16px; }
  .hero-icon svg { width: 64px; height: 64px; }
  .hero h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 14px; }
  .hero h1 br { display: none; }
  .hero-subtitle { font-size: 15px; line-height: 1.5; padding: 0 8px; }
  .hero-date { font-size: 13px; }

  .stat-card { padding: 24px 20px; gap: 18px; }
  .stat-icon-wrap { width: 56px; height: 56px; border-radius: 14px; }
  .stat-icon-wrap svg { width: 26px; height: 26px; }
  .stat-label { font-size: 16px; }
  .stat-value { font-size: 30px; }
  .stat-card-badge { font-size: 10px; padding: 4px 10px; letter-spacing: 0.4px; }

  .info-section { margin-top: 32px; }
  .accordion-trigger { font-size: 17px; padding: 18px 18px; gap: 12px; line-height: 1.3; }
  .accordion-chevron { width: 20px; height: 20px; }
  .accordion-body { padding: 0 18px 20px; }
  .accordion-body-text { font-size: 15px; line-height: 1.6; }

  .directory-section { margin-top: 36px; }
  .directory-heading { font-size: 24px; letter-spacing: -0.4px; }

  /* Filter controls stack fully on mobile */
  .filter-dropdowns { flex-direction: column; }
  .filter-multiselect,
  .filter-multiselect:last-of-type {
    flex: 1 1 100%;
    border-right: none;
    border-bottom: 1px solid #e0e3ee;
  }
  .filter-multiselect:last-of-type .ms-panel { left: 0; right: auto; }
  .ms-panel { min-width: 100%; }

  /* Tables: enable horizontal scroll inside the rounded wrapper */
  #directoryOutput > .section-block > div[style*="border-radius"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .dir-table { min-width: 700px; }
  .dir-table thead th { padding: 14px 16px; font-size: 14px; }
  .sp-row td { padding: 14px 16px; }
  .svc-badge { font-size: 11px; padding: 5px 10px; }
  .sub-inner-table { min-width: 700px; }
  .sub-inner-table thead th { padding: 10px 12px; font-size: 11px; }
  .sub-inner-table tbody td { padding: 10px 12px; font-size: 13px; }

  .section-title { font-size: 15px; flex-wrap: wrap; }
  #resultsCount { font-size: 13px; }
  .sub-inner-table .multi-item + .multi-item {
    margin-top: 8px;
    padding-top: 8px;
  }
}

/* ── Small mobile ────────────────────────────────────── */
@media (max-width: 380px) {
  .hero h1 { font-size: 28px; }
  .hero-subtitle { font-size: 14px; }
  .stat-card { flex-direction: column; align-items: flex-start; text-align: left; }
  .stat-icon-wrap { margin-bottom: 4px; }
  .directory-heading { font-size: 22px; }
}