.directory-page { background: var(--paper); }

.directory-hero { min-height: 650px; position: relative; display: flex; align-items: center; overflow: hidden; color: white; }
.directory-hero-photo { position: absolute; inset: 0; background: url('/assets/school-bar.jpg') center 45% / cover no-repeat; filter: brightness(.8) saturate(.8); transform: scale(1.02); }
.directory-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,20,29,.98) 0%, rgba(3,29,40,.9) 50%, rgba(3,27,38,.57) 78%, rgba(2,18,27,.68) 100%); }
.directory-hero-content { position: relative; padding: 120px 0 76px; }
.directory-hero h1 { max-width: 820px; margin-bottom: 18px; }
.directory-hero p { max-width: 710px; color: rgba(255,255,255,.8); }
.directory-hero .directory-deck { color: white; font-size: 21px; }

.service-area-section { background: var(--cream); }
.service-area-controls { display: grid; gap: 18px; margin: 28px 0 42px; }
.service-area-reset, .service-area-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.service-area-region { padding-top: 17px; border-top: 1px solid var(--line); }
.service-area-region-title { margin: 0 0 10px; color: var(--navy); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.service-area-button { min-height: 46px; padding: 10px 17px; border: 1px solid rgba(8,43,58,.22); border-radius: 99px; background: var(--paper); color: var(--navy); font: 700 13px/1.25 var(--sans); cursor: pointer; transition: .2s ease; }
.service-area-button:hover { transform: translateY(-2px); border-color: var(--teal); }
.service-area-button.is-active { border-color: var(--teal); background: var(--teal); color: white; box-shadow: 0 10px 24px rgba(12,113,129,.18); }
.service-area-button:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; }

.founding-state, .area-empty-state { padding: clamp(34px, 6vw, 64px); border: 1px solid rgba(12,113,129,.2); border-radius: 28px 5px; background: linear-gradient(135deg, white, #f5eee4); box-shadow: 0 22px 54px rgba(8,43,58,.08); }
.founding-state > p, .area-empty-state > p { max-width: 720px; color: var(--muted); font-size: 17px; }
.founding-state h2, .area-empty-state h2 { margin: 10px 0 18px; font-size: clamp(36px, 4.5vw, 54px); }
.state-kicker { color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.customer-note { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.customer-note h3 { margin: 0 0 5px; color: var(--navy); font-family: var(--serif); font-size: 24px; }
.customer-note p { max-width: 690px; margin: 0; color: var(--muted); }
.compact-heading { margin-bottom: 28px; }

.provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.provider-card { overflow: hidden; border: 1px solid var(--line); border-radius: 4px 24px; background: white; box-shadow: 0 18px 42px rgba(8,43,58,.07); }
.provider-card-media img { width: 100%; height: 220px; object-fit: cover; }
.provider-card-body { padding: 30px; }
.provider-type { color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.provider-name { margin: 10px 0 20px; color: var(--navy); font-family: var(--serif); font-size: 30px; }
.provider-location { margin: 0 0 18px; }
.provider-location > div { display: grid; grid-template-columns: 76px 1fr; gap: 8px; padding: 6px 0; }
.provider-location dt { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.provider-location dd { margin: 0; color: var(--navy); font-size: 14px; font-weight: 600; }
.provider-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.provider-tags span { padding: 6px 10px; border-radius: 99px; background: rgba(12,113,129,.09); color: var(--teal); font-size: 11px; font-weight: 700; }
.provider-description { color: var(--muted); }
.provider-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.provider-links .detail-link { margin: 0; }

.how-it-works { background: var(--paper); }
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.how-grid article { padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.how-grid article > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(12,113,129,.1); color: var(--teal); font-family: var(--serif); font-weight: 700; }
.how-grid h3 { margin: 18px 0 8px; color: var(--navy); font-family: var(--serif); font-size: 26px; }
.how-grid p { margin: 0; color: var(--muted); }

.join-network { background: var(--navy); color: white; }
.join-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: start; }
.join-copy { position: sticky; top: 24px; }
.join-copy h2 { color: white; }
.join-copy p, .join-copy li { color: rgba(255,255,255,.72); }
.join-lead { color: white !important; font-size: 19px; }
.join-copy li + li { margin-top: 8px; }
.directory-review-note { margin-top: 28px; border-color: var(--copper); color: white; font-size: 14px; }

.network-form { padding: clamp(28px, 5vw, 46px); border-radius: 4px 26px; background: var(--paper); color: var(--ink); box-shadow: 0 28px 70px rgba(0,0,0,.18); }
.form-heading { margin-bottom: 30px; }
.form-heading > span { color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.form-heading h3 { margin: 7px 0; color: var(--navy); font-family: var(--serif); font-size: 34px; }
.form-heading p { margin: 0; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.form-grid label, .form-block, .other-area { display: flex; flex-direction: column; gap: 7px; }
.form-wide { grid-column: 1 / -1; }
.network-form label > span, .form-fieldset legend { color: var(--navy); font-size: 13px; font-weight: 800; }
.network-form small { color: var(--muted); font-size: 11px; font-weight: 500; }
.network-form input[type="text"], .network-form input[type="email"], .network-form input[type="tel"], .network-form input[type="url"], .network-form select, .network-form textarea { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid rgba(23,48,57,.26); border-radius: 9px; background: white; color: var(--ink); font: inherit; }
.network-form textarea { resize: vertical; min-height: 120px; }
.network-form input:focus, .network-form select:focus, .network-form textarea:focus { outline: 3px solid rgba(209,132,75,.38); border-color: var(--copper); }
.form-fieldset { margin: 24px 0; padding: 0; border: 0; }
.form-fieldset legend { margin-bottom: 10px; }
.form-fieldset legend small { display: block; margin-top: 2px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.checkbox-grid label { display: flex; align-items: flex-start; gap: 9px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: white; cursor: pointer; }
.checkbox-grid input, .acknowledgement input { width: 18px; height: 18px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--teal); }
.checkbox-grid label > span { font-size: 12px; }
.other-area { margin-top: 12px; }
.form-block { margin-top: 18px; }
.acknowledgement { display: flex; align-items: flex-start; gap: 12px; margin: 26px 0; padding: 18px; border: 1px solid rgba(209,132,75,.34); border-radius: 12px; background: #fbf4ea; cursor: pointer; }
.acknowledgement span { font-size: 12px !important; font-weight: 600 !important; line-height: 1.55; }
.form-submit { width: 100%; border: 0; cursor: pointer; font: 800 14px/1 var(--sans); }
.form-submit:disabled { cursor: wait; opacity: .72; }
.form-help, .form-status { color: var(--muted); font-size: 12px; }
.form-status:not(:empty) { padding: 12px; border-radius: 9px; background: rgba(12,113,129,.09); color: var(--teal); font-weight: 700; }
.form-status[data-state="error"] { background: rgba(143,47,35,.09); color: #8f2f23; }
.form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-success { padding: 12px 0; }
.form-success > span { color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.form-success h1, .form-success h3 { margin: 9px 0 12px; color: var(--navy); font-family: var(--serif); font-size: 34px; }
.form-success p { color: var(--muted); }
.form-success:focus { outline: 3px solid rgba(209,132,75,.38); outline-offset: 6px; }

.directory-disclaimer { padding-top: 70px; padding-bottom: 70px; background: #061f2a; color: white; }
.disclaimer-card { display: grid; grid-template-columns: .4fr 1.6fr; gap: 46px; align-items: start; }
.disclaimer-card h2 { margin: 0; color: white; font-size: 30px; }
.disclaimer-card p { margin: 0; color: rgba(255,255,255,.66); font-size: 13px; }

@media (min-width: 901px) and (max-width: 1080px) {
  .directory-page nav, nav { gap: 11px; }
  nav a { font-size: 12px; }
  .brand { gap: 8px; }
}

@media (max-width: 900px) {
  .directory-hero { min-height: 600px; }
  .directory-hero-content { padding: 105px 0 66px; }
  .join-grid { grid-template-columns: 1fr; gap: 42px; }
  .join-copy { position: static; }
  .provider-grid { grid-template-columns: 1fr; }
  .disclaimer-card { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 620px) {
  .directory-hero { min-height: 650px; align-items: flex-end; }
  .directory-hero-content { padding: 115px 0 44px; }
  .directory-hero h1 { font-size: clamp(43px, 13vw, 62px); }
  .directory-hero .directory-deck { font-size: 18px; }
  .service-area-controls { gap: 16px; }
  .service-area-buttons { gap: 8px; }
  .service-area-button { flex: 1 1 calc(50% - 8px); min-width: 0; overflow-wrap: anywhere; }
  .service-area-reset .service-area-button, .service-area-region:nth-of-type(n+3) .service-area-button { flex-basis: 100%; }
  .how-grid, .form-grid, .checkbox-grid { grid-template-columns: 1fr; }
  .founding-state, .area-empty-state { padding: 30px 22px; }
  .network-form { padding: 28px 20px; }
  .provider-card-body { padding: 24px 20px; }
  .provider-location > div { grid-template-columns: 68px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .service-area-button { transition: none; }
}