/* One stable search field; only its position animates when the directory opens. */
.hero-search-hint button{border:0;background:none;color:rgba(255,255,255,.85);font:inherit;cursor:pointer;padding:8px}
.search-mode-heading,#searchCategories{display:none}
.directory-open>section[hidden],.directory-open .ff-footer{display:none!important}
.directory-open .hero{position:sticky;top:0;z-index:25;min-height:0;padding:80px 24px 0;background:#102d24;overflow:visible}
.directory-open .hero-bg,.directory-open .hero-shade,.directory-open .hero-grid,.directory-open .hero::before,.directory-open .hero::after{display:none}
.directory-open .hero-inner{max-width:1360px;width:100%;display:flex;flex-direction:column;text-align:left}
.directory-open .hero-inner>.hero-eyebrow,.directory-open .hero h1,.directory-open .hero-subtitle,.directory-open .hero-proof,.directory-open .hero-apps,.directory-open .hero-search-hint{display:none}
.directory-open .search-mode-heading{display:flex;order:-1;align-items:center;justify-content:space-between;gap:16px;margin:0 0 12px;color:#aac5b8;font-size:12px}
.search-mode-heading button{background:none;border:0;color:#d6e8de;cursor:pointer;font:inherit;padding:6px 0}
.directory-open .search-container{width:100%;max-width:760px;margin:0;z-index:2}
.directory-open #search{padding-block:15px;border-radius:12px;background:#fff;color:#153d30;border:1px solid transparent;animation:none;box-shadow:none;font-size:16px}
.directory-open #search:focus{border-color:#92d5b7;box-shadow:0 0 0 3px #71c89c35}
.directory-open #search::placeholder{color:#67786e}
.directory-open .search-icon,.directory-open .search-clear{color:#426b5c}
#search::-webkit-search-cancel-button{display:none}
.directory-open #searchCategories{display:flex;gap:22px;margin-top:15px;overflow-x:auto;scrollbar-width:none}
#searchCategories button{display:flex;align-items:center;gap:7px;flex-shrink:0;padding:11px 2px 13px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:#a8c0b3;cursor:pointer;font:inherit;font-size:13px;min-height:44px}
#searchCategories button[aria-pressed=true]{color:#fff;border-bottom-color:#96dbb7}
#searchCategories button:hover{color:#fff}
#searchCategories small{font-size:10px;opacity:.75;font-variant-numeric:tabular-nums}
.directory-open #search-results{display:grid;grid-template-columns:210px minmax(0,1fr);align-items:start;gap:32px;max-width:1408px;margin:30px auto 64px;min-height:60vh;padding:0 24px;animation:directory-arrive .22s ease .12s both}
.directory-filters{position:sticky;top:260px;min-width:0}
.directory-filters>summary{display:none}
.directory-filter-body{display:flex;flex-direction:column;gap:20px}
.directory-filter-body h2{font-size:13px;font-weight:700;margin:4px 0 2px;color:var(--text)}
.directory-filter-body label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--muted)}
.directory-filter-body input,.directory-filter-body select{font:inherit;font-size:13px;width:100%;min-height:44px;border:1px solid var(--stroke);border-radius:9px;background:var(--panel);color:var(--text);padding:10px}
.directory-filter-body button{align-self:flex-start;border:0;background:none;color:var(--accent);font:inherit;font-size:12px;padding:4px 0;cursor:pointer}
.directory-filter-body button[hidden]{display:none}
.directory-main{min-width:0}
.directory-toolbar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:0 0 14px;border-bottom:1px solid var(--stroke)}
.directory-toolbar h2{font-size:17px;line-height:1.4;letter-spacing:-.015em;margin:0;color:var(--text);overflow-wrap:anywhere}
.directory-toolbar p{white-space:nowrap;font-size:12px;color:var(--muted);margin:0;font-variant-numeric:tabular-nums}
#search-results .results-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 20px;padding-top:20px;scroll-margin-top:260px}
.directory-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--stroke);border-radius:16px;background:var(--panel);text-decoration:none;color:var(--text);transition:border-color .18s,box-shadow .18s}
.directory-card:hover{border-color:var(--accent);box-shadow:0 6px 20px #123b2412}
.directory-card-visual{width:100%;aspect-ratio:4/3;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;background:var(--surface-2);color:var(--accent);font-size:40px}
.directory-photo-missing{font-size:11px;color:var(--muted)}
.directory-card-visual.has-photo>i,.directory-card-visual.has-photo>.directory-photo-missing{visibility:hidden}
.directory-card-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s;background:#f5f7f3}
.directory-card-visual[data-fit="contain"] img{object-fit:contain;padding:12px;background:#fff}
.directory-card:hover .directory-card-visual img{transform:scale(1.035)}
.directory-card-body{min-width:0;flex:1;padding:16px 42px 16px 16px;position:relative}
.directory-card-category{color:var(--muted);font-size:11px}
.directory-card h3{font-size:18px;margin:5px 0 7px;line-height:1.3;overflow-wrap:anywhere}
.directory-card p{color:var(--muted);font-size:12px;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.directory-card-action{position:absolute;right:16px;top:36px;font-size:20px;color:var(--accent)}
.directory-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.directory-pagination[hidden]{display:none}
.directory-pagination button,.directory-empty button{padding:11px 16px;border:1px solid var(--stroke);border-radius:9px;color:var(--text);background:var(--panel);font:inherit;cursor:pointer;min-height:44px}
.directory-pagination button:disabled{opacity:.35;cursor:default}
.directory-empty{grid-column:1/-1;text-align:center;padding:60px 12px;color:var(--muted);font-size:14px}
.directory-empty h3{color:var(--text);font-size:20px}
.directory-empty button{margin-top:10px}
.directory-open button:focus-visible,.directory-open summary:focus-visible,.directory-card:focus-visible,.directory-filter-body :is(select,input):focus-visible{outline:3px solid #55b996;outline-offset:3px}
#search-results[aria-busy=true] .results-list{opacity:.5}
@keyframes directory-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:761px) and (max-width:1080px){#search-results .results-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:761px){.directory-filters:not([open])>.directory-filter-body{display:flex}.directory-filters::details-content{content-visibility:visible}}
@media(max-width:760px){
  .directory-open .hero{padding:76px 20px 0}
  .directory-open .search-mode-heading{font-size:11px;margin-bottom:10px}
  .directory-open #searchCategories{gap:0;justify-content:space-between;margin-top:10px}
  #searchCategories button{font-size:12px;gap:4px}
  #searchCategories small{font-size:9px}
  .directory-open #search-results{display:flex;flex-direction:column;gap:20px;margin-top:20px;padding:0 20px}
  .directory-filters{position:static;width:100%;border-bottom:1px solid var(--stroke);padding-bottom:14px}
  .directory-filters>summary{display:flex;align-items:center;justify-content:space-between;min-height:32px;cursor:pointer;font-size:13px;color:var(--text);list-style:none}
  .directory-filters>summary::-webkit-details-marker{display:none}
  .directory-filters>summary::after{content:'+';font-size:20px}.directory-filters[open]>summary::after{content:'−'}
  #filterCount{margin-left:8px;margin-right:auto;font-size:11px;color:var(--accent)}
  .directory-filter-body{padding:18px 0 8px;gap:16px}
  .directory-filter-body h2{display:none}
  .directory-main{width:100%}
  .directory-toolbar{gap:10px}.directory-toolbar h2{font-size:16px}
  #search-results .results-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;scroll-margin-top:245px;padding-top:16px}
  .directory-card{border-radius:12px}.directory-card h3{font-size:15px}
  .directory-card-body{padding:12px}
  .directory-card-visual{font-size:30px}
  .directory-card-category{font-size:10px}.directory-card p{font-size:11px}
  .directory-card-action{display:none}
  .directory-card-visual[data-fit="contain"] img{padding:7px}
}
@media(max-width:360px){#searchCategories small{display:none}.search-mode-heading>span{max-width:150px}.directory-pagination{gap:6px;font-size:11px}.directory-pagination button{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.directory-card,.directory-card-visual img{transition:none}.directory-open #search-results{animation:none}}
