:root { --dir-navy:#082b58; --dir-deep:#031932; --dir-teal:#10b8be; --dir-violet:#6844c7; --dir-paper:#f4f7fa; --dir-muted:#607286; --dir-line:rgba(8,43,88,.13); }
* { box-sizing: border-box; }
body { margin:0; background:var(--dir-paper); color:#10243a; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; line-height:1.55; }
a { color:inherit; } button,input,select { font:inherit; }
.directory-container { width:min(calc(100% - 40px),1180px); margin-inline:auto; }
.directory-header { position:sticky; top:0; z-index:30; border-bottom:1px solid rgba(255,255,255,.11); background:rgba(3,25,50,.94); backdrop-filter:blur(16px); }
.directory-header-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:26px; }
.directory-brand { display:flex; align-items:center; gap:16px; color:#fff; text-decoration:none; }
.directory-brand img { width:44px; height:44px; object-fit:contain; }
.directory-brand strong,.directory-brand span { display:block; }
.directory-brand span { color:rgba(255,255,255,.58); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.directory-nav { display:flex; align-items:center; gap:22px; color:rgba(255,255,255,.76); font-size:.85rem; font-weight:700; }
.directory-nav a { text-decoration:none; }
.directory-nav a:hover { color:#fff; }
.saved-chip { padding:8px 13px; border:1px solid rgba(255,255,255,.16); border-radius:999px; }
.directory-hero { position:relative; overflow:hidden; padding:95px 0 84px; color:#fff; background:linear-gradient(145deg,var(--dir-deep),#0b3b6d); }
.directory-hero::before { content:""; position:absolute; width:500px; height:500px; right:-120px; top:-200px; border-radius:50%; background:radial-gradient(circle,rgba(104,68,199,.55),transparent 68%); }
.directory-hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr .55fr; gap:70px; align-items:end; }
.directory-eyebrow { color:#7de4e8; font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.directory-hero h1 { max-width:780px; margin:14px 0 22px; font-size:clamp(3.1rem,7vw,6.4rem); line-height:.96; letter-spacing:-.055em; }
.directory-hero p { max-width:690px; color:rgba(255,255,255,.68); font-size:1.08rem; }
.directory-hero-note { padding:25px; border:1px solid rgba(255,255,255,.14); border-radius:20px; background:rgba(255,255,255,.07); }
.directory-hero-note strong { display:block; margin-bottom:8px; color:#fff; }
.directory-search-panel { position:relative; z-index:5; display:grid; grid-template-columns:1.5fr .8fr auto; gap:12px; margin-top:28px; padding:18px; border:1px solid var(--dir-line); border-radius:22px; background:#fff; box-shadow:0 18px 48px rgba(3,25,50,.1); }
.directory-search-panel label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.directory-search-panel input,.directory-search-panel select { min-height:52px; padding:0 16px; border:1px solid #cad7e2; border-radius:13px; background:#f9fbfd; color:#183049; }
.directory-search-panel input:focus,.directory-search-panel select:focus { border-color:var(--dir-teal); outline:3px solid rgba(16,184,190,.17); }
.clear-filters { min-height:52px; padding:0 20px; border:1px solid var(--dir-navy); border-radius:13px; background:#fff; color:var(--dir-navy); font-weight:850; cursor:pointer; }
.clear-filters:hover { background:#eef4f8; }
.directory-main { padding:70px 0 95px; }
.directory-toolbar { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:28px; }
.directory-toolbar h2 { margin:0; color:var(--dir-deep); font-size:clamp(1.7rem,3vw,2.7rem); letter-spacing:-.04em; }
.directory-toolbar p { margin:5px 0 0; color:var(--dir-muted); }
.section-kicker { color:var(--dir-teal)!important; font-size:.7rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.add-listing { padding:11px 16px; border-radius:999px; background:var(--dir-navy); color:#fff; text-decoration:none; font-weight:800; font-size:.82rem; }
.directory-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.listing-card { min-height:460px; display:flex; flex-direction:column; padding:26px; border:1px solid var(--dir-line); border-radius:23px; background:#fff; box-shadow:0 12px 32px rgba(3,25,50,.07); }
.listing-top { display:flex; justify-content:space-between; align-items:start; }
.listing-avatar { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; background:var(--avatar); color:#fff; font-size:.9rem; font-weight:900; letter-spacing:.03em; }
.save-button { width:42px; height:42px; border:1px solid var(--dir-line); border-radius:50%; background:#fff; color:var(--dir-violet); font-size:1.35rem; cursor:pointer; }
.save-button.saved { background:#f0ebff; }
.listing-category { margin:24px 0 8px; color:var(--dir-teal); font-size:.68rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.listing-card h3 { margin:0; color:var(--dir-deep); font-size:1.45rem; line-height:1.15; letter-spacing:-.035em; }
.listing-description { color:var(--dir-muted); }
.listing-card dl { display:grid; gap:10px; margin:5px 0 24px; padding:16px 0; border-top:1px solid var(--dir-line); border-bottom:1px solid var(--dir-line); }
.listing-card dl div { display:grid; grid-template-columns:68px 1fr; gap:9px; }
.listing-card dt { color:var(--dir-muted); font-size:.72rem; font-weight:800; text-transform:uppercase; }
.listing-card dd { margin:0; color:#344b60; font-size:.82rem; }
.listing-actions { margin-top:auto; display:grid; gap:10px; }
.directory-button { min-height:46px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; border-radius:12px; background:var(--dir-navy); color:#fff; text-decoration:none; font-weight:800; }
.contact-link { color:var(--dir-muted); font-size:.76rem; text-decoration:none; overflow-wrap:anywhere; }
.directory-empty { padding:50px; border:1px dashed #a7b7c4; border-radius:22px; text-align:center; color:var(--dir-muted); }
.directory-notice { margin-top:45px; padding:20px; border-left:4px solid var(--dir-teal); border-radius:0 14px 14px 0; background:#e3f6f6; color:#37566b; font-size:.86rem; }
.alphabet-directory { padding:92px 0 105px; border-top:1px solid var(--dir-line); background:#fff; }
.alphabet-heading { display:flex; justify-content:space-between; gap:28px; align-items:end; }
.alphabet-heading h2 { margin:0; color:var(--dir-deep); font-size:clamp(2rem,4vw,3.5rem); line-height:1; letter-spacing:-.045em; }
.alphabet-heading p { margin:9px 0 0; color:var(--dir-muted); }
.alphabet-nav { display:flex; flex-wrap:wrap; gap:7px; margin:25px 0 18px; }
.alphabet-nav button { min-width:35px; height:35px; padding:0 9px; border:1px solid #cbd8e3; border-radius:9px; background:#fff; color:var(--dir-navy); font-size:.76rem; font-weight:900; cursor:pointer; }
.alphabet-nav button:first-child { padding-inline:13px; }
.alphabet-nav button:hover:not(:disabled),.alphabet-nav button.active { border-color:var(--dir-navy); background:var(--dir-navy); color:#fff; }
.alphabet-nav button:disabled { opacity:.32; cursor:not-allowed; }
.list-results { display:flex; justify-content:space-between; gap:20px; margin-bottom:24px; color:var(--dir-muted); font-size:.82rem; }
.list-results p { margin:0; }
.list-results p:first-child { color:var(--dir-deep); font-weight:900; }
.business-list { display:grid; gap:34px; }
.letter-group { display:grid; grid-template-columns:74px minmax(0,1fr); gap:20px; scroll-margin-top:100px; }
.letter-heading span { width:58px; height:58px; display:grid; place-items:center; border-radius:17px; background:var(--dir-navy); color:#fff; font-size:1.6rem; font-weight:900; }
.letter-heading p { margin:9px 0 0; color:var(--dir-muted); font-size:.66rem; line-height:1.2; text-align:center; }
.letter-entries { overflow:hidden; border:1px solid var(--dir-line); border-radius:20px; background:#fff; box-shadow:0 8px 28px rgba(3,25,50,.055); }
.business-entry + .business-entry { border-top:1px solid var(--dir-line); }
.business-entry summary { display:grid; grid-template-columns:minmax(210px,1.2fr) minmax(180px,1fr) auto 20px; gap:22px; align-items:center; min-height:94px; padding:20px 23px; cursor:pointer; list-style:none; }
.business-entry summary::-webkit-details-marker { display:none; }
.business-entry summary:hover { background:#f7fafc; }
.business-name-block { min-width:0; }
.business-name-block strong,.business-name-block small { display:block; }
.business-name-block strong { color:var(--dir-deep); font-size:1.03rem; line-height:1.3; }
.business-name-block small { margin-top:6px; color:var(--dir-teal); font-size:.67rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.business-location { color:#536a7e; font-size:.78rem; line-height:1.45; }
.status-badge { justify-self:start; padding:6px 9px; border-radius:999px; font-size:.64rem; font-weight:900; white-space:nowrap; }
.status-available { background:#e1f5f2; color:#0b6d69; }
.status-pending { background:#fff2d4; color:#805b0c; }
.status-closed { background:#fbe7e7; color:#8d3131; }
.expand-icon { position:relative; width:18px; height:18px; }
.expand-icon::before,.expand-icon::after { content:""; position:absolute; top:8px; left:3px; width:12px; height:2px; border-radius:2px; background:var(--dir-violet); transition:transform .2s ease; }
.expand-icon::after { transform:rotate(90deg); }
.business-entry[open] .expand-icon::after { transform:rotate(0); }
.business-entry[open] summary { background:#f7fafc; }
.business-details { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr); gap:24px 42px; padding:10px 23px 25px; border-top:1px solid var(--dir-line); background:#f9fbfd; }
.business-description p:last-child { margin:8px 0 0; color:#455f75; }
.business-details dl { display:grid; gap:8px; margin:16px 0 0; }
.business-details dl div { display:grid; grid-template-columns:105px 1fr; gap:10px; }
.business-details dt { color:var(--dir-muted); font-size:.67rem; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.business-details dd { margin:0; color:#2f4960; font-size:.79rem; overflow-wrap:anywhere; }
.business-details dd a { color:var(--dir-navy); font-weight:800; }
.business-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:9px; }
.business-actions a { min-height:39px; display:inline-flex; align-items:center; padding:0 13px; border:1px solid #cad7e2; border-radius:10px; background:#fff; color:var(--dir-navy); text-decoration:none; font-size:.72rem; font-weight:900; }
.business-actions a:hover { border-color:var(--dir-navy); }
.business-actions .correction-link { border-color:var(--dir-navy); background:var(--dir-navy); color:#fff; }
.directory-empty[hidden] { display:none; }
.directory-empty h2 { margin-top:0; color:var(--dir-deep); }
.directory-button:focus-visible,.add-listing:focus-visible,.save-button:focus-visible,.clear-filters:focus-visible,.alphabet-nav button:focus-visible,.business-entry summary:focus-visible,.business-actions a:focus-visible,.directory-nav a:focus-visible { outline:3px solid rgba(16,184,190,.55); outline-offset:3px; }
.directory-footer { padding:42px 0; background:var(--dir-deep); color:rgba(255,255,255,.62); font-size:.8rem; }
.directory-footer-inner { display:flex; justify-content:space-between; gap:30px; }
@media(max-width:900px){
  .directory-hero-inner{grid-template-columns:1fr;gap:35px}
  .directory-search-panel{grid-template-columns:1fr 1fr auto}
  .directory-search-panel input{grid-column:1/-1}
  .directory-grid{grid-template-columns:1fr 1fr}
  .business-entry summary{grid-template-columns:minmax(0,1fr) auto 20px;gap:10px 18px}
  .business-location{grid-column:1/2}
  .status-badge{grid-column:2/3;grid-row:1/3}
  .expand-icon{grid-column:3/4;grid-row:1/3}
}
@media(max-width:650px){
  .directory-container{width:min(calc(100% - 28px),1180px)}
  .directory-header-inner{min-height:68px}
  .directory-brand{gap:11px}.directory-brand img{width:38px;height:38px}.directory-brand span{font-size:.62rem}
  .directory-nav a:not(.saved-chip){display:none}
  .saved-chip{padding:7px 10px;font-size:.72rem}
  .directory-hero{padding:68px 0 60px}.directory-hero h1{font-size:clamp(2.8rem,15vw,4.5rem)}
  .directory-main{padding:58px 0 72px}.alphabet-directory{padding:70px 0 80px}
  .directory-search-panel,.directory-grid{grid-template-columns:1fr}
  .directory-search-panel input{grid-column:auto}
  .directory-toolbar,.alphabet-heading,.directory-footer-inner{align-items:flex-start;flex-direction:column}
  .listing-card{min-height:auto}
  .alphabet-nav{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  .alphabet-nav button{min-width:0;width:100%;padding:0}.alphabet-nav button:first-child{grid-column:span 2;padding:0}
  .letter-group{grid-template-columns:1fr;gap:10px}
  .letter-heading{display:flex;align-items:center;gap:12px}.letter-heading span{width:45px;height:45px;border-radius:13px;font-size:1.25rem}.letter-heading p{margin:0;text-align:left}
  .business-entry summary{grid-template-columns:minmax(0,1fr) 20px;gap:12px;min-height:0;padding:18px}
  .business-location{grid-column:1/2}.status-badge{grid-column:1/2;grid-row:auto;width:max-content}.expand-icon{grid-column:2/3;grid-row:1/4}
  .business-details{grid-template-columns:1fr;gap:4px;padding:8px 18px 20px}.business-actions{grid-column:auto}.business-actions a{width:100%;justify-content:center}
  .business-details dl div{grid-template-columns:90px 1fr}
  .list-results{align-items:flex-start;flex-direction:column;gap:2px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.expand-icon::before,.expand-icon::after{transition:none}}