.directory-body { background: #f8f7f4; color: #202420; --dir-accent: #a53d26; --dir-muted: #687067; --dir-line: #e3e5df; }
.dir-shell { width: min(1320px, calc(100% - 64px)); margin: 0 auto; padding: 116px 0 116px; }
.dir-eyebrow { color: var(--dir-accent); font: 700 11px/1.5 Arial,sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.dir-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; padding: 30px 0 38px; border-bottom: 1px solid var(--dir-line); }
.dir-hero h1 { font: 400 clamp(38px, 5vw, 65px)/1.04 Georgia,serif; letter-spacing: -.045em; max-width: 750px; margin: 14px 0 18px; }
.dir-hero h1 em { color: var(--dir-accent); font-weight: 400; }
.dir-intro { max-width: 600px; color: var(--dir-muted); font-size: 15px; line-height: 1.75; margin: 0; }
.dir-hero-aside { text-align: right; padding-bottom: 5px; }
.dir-hero-count { display: block; font: 400 52px/1.1 Georgia,serif; letter-spacing: -.04em; }
.dir-hero-aside small { display: block; color: var(--dir-muted); font-size: 12px; margin-top: 8px; }
.dir-hero-aside a { display: inline-block; margin-top: 23px; color: var(--dir-accent); font-size: 12px; font-weight: 700; text-underline-offset: 4px; }
.dir-sectors { display: flex; gap: 8px; flex-wrap: wrap; margin: 26px 0 20px; }
.dir-sector { display: inline-flex; gap: 10px; align-items: center; border: 1px solid var(--dir-line); background: #fff; color: #51584f; border-radius: 100px; padding: 11px 18px; font: 600 13px/1.3 Arial,sans-serif; cursor: pointer; }
.dir-sector span { color: #848a81; font-size: 11px; }
.dir-sector[aria-pressed="true"] { background: #202c24; border-color: #202c24; color: white; }
.dir-sector[aria-pressed="true"] span { color: #cad3c8; }
.dir-search-wrap { display: flex; align-items: center; gap: 14px; background: white; border: 1px solid #cdd2c8; border-radius: 12px; padding: 6px 20px; box-shadow: 0 6px 22px #20242004; }
.dir-search-wrap svg { flex: 0 0 23px; width: 23px; height: 23px; color: #70796c; }
.dir-search-wrap input { width: 100%; min-width: 0; height: 57px; border: 0; outline: 0; background: transparent; font: 400 16px/1.5 Arial,sans-serif; color: #202420; }
.dir-search-wrap:focus-within { border-color: var(--dir-accent); box-shadow: 0 0 0 3px #a53d2612; }
.dir-search-hint { color: var(--dir-muted); font-size: 11px; margin: 10px 0 24px 2px; }
.dir-layout { display: grid; grid-template-columns: 226px minmax(0,1fr); gap: 30px; align-items: start; }
.dir-filters { position: sticky; top: 90px; padding: 17px 0; }
.dir-filter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 23px; }
.dir-filter-head h2 { font: 700 14px/1.5 Arial,sans-serif; margin: 0; }
.dir-reset { border: 0; background: none; color: var(--dir-accent); font: 600 11px/1.5 Arial,sans-serif; cursor: pointer; padding: 5px 0; }
.dir-field { display: grid; gap: 9px; margin-bottom: 21px; }
.dir-field > span, .dir-tag-heading { font: 700 10px/1.5 Arial,sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #687067; }
.dir-field select { width: 100%; border: 1px solid #dce0d6; background: white; border-radius: 7px; min-height: 42px; padding: 9px; font: 12px/1.4 Arial,sans-serif; color: #263026; }
.dir-filter-note { color: #7c8379; font-size: 11px; line-height: 1.6; margin: -8px 0 24px; }
.dir-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.dir-tag { border: 1px solid #e0e4dc; background: #fff; color: #596252; border-radius: 5px; padding: 6px 8px; font: 500 11px/1.3 Arial,sans-serif; cursor: pointer; text-align: left; }
.dir-tag[aria-pressed="true"] { background: #f0ded6; border-color: #d9ac98; color: #8b3623; }
.dir-tag small { margin-left: 5px; opacity: .7; font-size: 10px; }
.dir-check { display: flex; gap: 9px; align-items: center; margin-top: 22px; font-size: 12px; color: #596252; }
.dir-check input { accent-color: #a53d26; }
.dir-filter-toggle { display: none; }
.dir-results-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 62px; }
.dir-results-head p { font-size: 13px; margin: 0; color: #626b5e; }
.dir-results-head select { border: 0; background: transparent; padding: 8px 0; font: 12px Arial,sans-serif; color: #687067; }
.dir-active { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dir-active:empty { display: none; }
.dir-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.dir-card { background: #fff; border: 1px solid #e1e5dc; border-radius: 12px; padding: 23px; display: flex; flex-direction: column; min-width: 0; transition: border-color .18s, box-shadow .18s, transform .18s; }
.dir-card:hover { border-color: #c3ccb9; box-shadow: 0 12px 25px #23302608; transform: translateY(-2px); }
.dir-card-head { display: flex; align-items: flex-start; gap: 15px; }
.dir-logo { width: 62px; height: 62px; flex: 0 0 62px; display: grid; place-items: center; border: 1px solid #ecede8; border-radius: 10px; background: #fff; overflow: hidden; font: 600 21px Georgia,serif; color: #67745a; }
.dir-logo img { width: 100%; height: 100%; padding: 7px; object-fit: contain; }
.dir-logo.has-fallback { background: #eef1e8; }
.dir-logo.dir-logo-dark { background: #253829; }
.directory-body .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.dir-card-heading { flex: 1; min-width: 0; }
.dir-card-category { margin: 1px 0 6px; font: 700 9px/1.5 Arial,sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--dir-accent); }
.dir-card h3 { font: 400 21px/1.2 Georgia,serif; margin: 0; letter-spacing: -.025em; overflow-wrap: anywhere; }
.dir-card-summary { font: 13px/1.7 Arial,sans-serif; color: #687067; margin: 17px 0 13px; min-height: 44px; }
.dir-sector-labels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.dir-industry { font: 500 10px/1.2 Arial,sans-serif; color: #4f6753; border: 0; background: #edf3ea; border-radius: 4px; padding: 5px 6px; cursor: pointer; }
.dir-location { display: flex; gap: 6px; align-items: flex-start; font-size: 11px; color: #747d70; margin: 0 0 14px; line-height: 1.5; }
.dir-location svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }
.dir-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 20px; }
.dir-card-tags .dir-tag { font-size: 10px; padding: 5px 7px; background: #fafbf8; }
.dir-card-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid #eef0e8; margin-top: auto; }
.dir-card-action { color: #7c3623; font: 700 12px/1.5 Arial,sans-serif; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.dir-card-contact { color: #64705e; font: 500 11px/1.5 Arial,sans-serif; text-decoration: none; }
.dir-empty { grid-column: 1/-1; background: white; border: 1px solid var(--dir-line); border-radius: 12px; padding: 55px 24px; text-align: center; }
.dir-empty h3 { font: 400 27px/1.2 Georgia,serif; }
.dir-empty p { color: var(--dir-muted); font-size: 14px; }
.dir-more { display: block; margin: 25px auto; padding: 12px 24px; border: 1px solid #cbd2c3; border-radius: 7px; background: white; color: #35432e; font-weight: 700; cursor: pointer; }
.dir-more[hidden] { display: none; }
.dir-note { color: #7b8376; font-size: 11px; line-height: 1.7; margin-top: 20px; }
.dir-ad { margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--dir-line); }
.dir-infeed-ad { grid-column: 1/-1; min-height: 0; border-radius: 12px; }
.dir-submit { margin-top: 56px; border-top: 1px solid var(--dir-line); padding-top: 28px; }
.dir-submit > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 8px 0; list-style: none; }
.dir-submit > summary h2 { font: 400 26px/1.2 Georgia,serif; margin: 0; }
.dir-submit > summary span { color: #8b3e28; font-size: 12px; }
.dir-submit p { color: var(--dir-muted); font-size: 13px; }
.dir-submit form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 25px; }
.dir-submit label { display: grid; gap: 7px; font-size: 12px; color: #596252; }
.dir-submit input, .dir-submit textarea, .dir-submit select { width: 100%; min-height: 44px; border: 1px solid var(--dir-line); border-radius: 6px; padding: 10px; background: white; font: inherit; color: #263026; }
.dir-submit button { background: #263b2a; color: white; border: 0; border-radius: 6px; padding: 14px; cursor: pointer; font-weight: 700; }
.dir-dialog { width: min(820px,calc(100% - 28px)); max-height: calc(100svh - 40px); padding: 0; border: 0; border-radius: 16px; color: #253025; box-shadow: 0 30px 100px #0003; }
.dir-dialog::backdrop { background: #15201799; backdrop-filter: blur(3px); }
.dir-dialog-bar { display: flex; justify-content: space-between; align-items: center; padding: 18px 28px; border-bottom: 1px solid #e8ebe3; background: #f9faf6; }
.dir-dialog-bar span { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: #687067; }
.dir-close { min-width: 44px; min-height: 38px; border: 1px solid #d8dfd0; background: white; border-radius: 7px; color: #394a31; cursor: pointer; }
.dir-dialog-content { padding: 30px; }
.dir-dialog-title { display: flex; gap: 20px; align-items: center; margin-bottom: 26px; }
.dir-dialog-title .dir-logo { width: 86px; height: 86px; flex-basis: 86px; }
.dir-dialog h2 { font: 400 34px/1.1 Georgia,serif; letter-spacing: -.035em; margin: 5px 0 8px; }
.dir-detail-columns { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; }
.dir-detail-section { margin-bottom: 25px; }
.dir-detail-section h3 { font: 700 11px/1.5 Arial,sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6d7568; margin: 0 0 12px; }
.dir-detail-section p, .dir-detail-section li { font-size: 13px; line-height: 1.75; color: #616e5b; }
.dir-detail-section ul { padding-left: 18px; }
.dir-detail-links { display: grid; gap: 10px; }
.dir-detail-links a { display: block; padding: 12px 13px; background: #f1f5ec; border: 1px solid #e4e9df; color: #37572f; font-size: 12px; text-decoration: none; border-radius: 6px; overflow-wrap: anywhere; }
.dir-contact-role { font-size: 11px !important; color: #818a79 !important; }
.dir-detail-source { font-size: 11px; color: #8b3e28; text-underline-offset: 3px; }
.dir-dialog details { border-top: 1px solid #e8ebe3; padding-top: 13px; }
.dir-dialog details summary { font-size: 12px; cursor: pointer; color: #626f5c; }
.dir-region-list { max-height: 200px; overflow-y: auto; }
.directory-body :is(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid #bc8065; outline-offset: 3px; }
@media(max-width:1050px) { .dir-shell { width: calc(100% - 40px); } .dir-layout { grid-template-columns: 200px minmax(0,1fr); gap: 20px; } .dir-card { padding: 18px; } .dir-logo { width: 50px; height: 50px; flex-basis: 50px; } .dir-card h3 { font-size: 19px; } }
@media(max-width:800px) { .dir-shell { width: calc(100% - 32px); padding-top: 96px; } .dir-hero { grid-template-columns: 1fr; gap: 20px; padding-top: 14px; } .dir-hero-aside { display: flex; align-items: baseline; gap: 10px; text-align: left; } .dir-hero-count { font-size: 27px; } .dir-hero-aside a { margin: 0 0 0 auto; } .dir-hero h1 { font-size: clamp(36px,7vw,54px); max-width: 600px; } .dir-hero-aside small { margin: 0; } .dir-layout { display: block; } .dir-filters { display: none; position: static; margin: 12px 0 20px; padding: 20px; background: #fff; border: 1px solid var(--dir-line); border-radius: 10px; } .dir-filters.is-open { display: block; } .dir-filter-toggle { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d9dfd0; border-radius: 6px; padding: 9px 14px; background: white; color: #3d5133; font-size: 12px; cursor: pointer; } .dir-search-hint { margin-bottom: 17px; } .dir-field { margin-bottom: 15px; } }
@media(max-width:520px) { .dir-grid { grid-template-columns: 1fr; gap: 13px; } .dir-card { padding: 22px; } .dir-logo { width: 62px; height: 62px; flex-basis: 62px; } .dir-card h3 { font-size: 23px; } .dir-card-summary { min-height: 0; } .dir-hero h1 { font-size: 40px; } .dir-hero-count { font-size: 23px; } .dir-hero-aside a { font-size: 11px; } .dir-sector { font-size: 12px; padding: 10px 12px; gap: 7px; } .dir-sector span { font-size: 10px; } .dir-search-wrap { padding: 3px 13px; gap: 10px; } .dir-search-wrap input { font-size: 14px; height: 52px; } .dir-results-head select { max-width: 145px; font-size: 11px; } .dir-results-head p { font-size: 12px; } .dir-submit form, .dir-detail-columns { grid-template-columns: 1fr; } .dir-submit > summary h2 { font-size: 21px; } .dir-submit > summary span { font-size: 10px; } .dir-dialog-content { padding: 22px; } .dir-dialog-bar { padding: 14px 22px; } .dir-dialog h2 { font-size: 28px; } .dir-dialog-title { gap: 14px; align-items: flex-start; } .dir-dialog-title .dir-logo { width: 64px; height: 64px; flex-basis: 64px; } }
@media(prefers-reduced-motion:reduce) { .dir-card { transition: none; } .dir-card:hover { transform: none; } }

/* Readable directory: pure black text on light surfaces, including selected controls. */
.dir-shell, .dir-shell *, .dir-dialog, .dir-dialog * { color: #000 !important; }
.dir-shell input::placeholder, .dir-shell textarea::placeholder { color: #000; opacity: 1; }
.dir-sector[aria-pressed="true"] { background: #dfead9; border-color: #6a7b61; box-shadow: inset 0 0 0 1px #6a7b61; }
.dir-submit button { background: #dfead9; border: 1px solid #6a7b61; }
.dir-tag small { opacity: 1; font-size: 12px; }
.dir-field > span, .dir-tag-heading, .dir-card-category, .dir-dialog-bar span, .dir-detail-section h3 { font-size: 12px; letter-spacing: .04em; }
.dir-field select, .dir-results-head select, .dir-check, .dir-card-contact, .dir-detail-links a { font-size: 14px; }
.dir-intro, .dir-card-summary, .dir-detail-section p, .dir-detail-section li { font-size: 15px; line-height: 1.75; }
.dir-search-hint, .dir-filter-note, .dir-note, .dir-detail-source, .dir-contact-role, .dir-hero-aside small { font-size: 13px !important; line-height: 1.65; }
.dir-tag, .dir-card-tags .dir-tag, .dir-industry, .dir-location, .dir-reset { font-size: 12px; }
.dir-shell a:hover, .dir-dialog a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dir-filters { max-height: calc(100svh - 110px); overflow-y: auto; scrollbar-gutter: stable; padding-right: 8px; }
@media(max-width:800px) { .dir-filters { max-height: none; overflow: visible; padding-right: 20px; } }