/* 100 Local Directory — public pages. These pages carry their own complete design. */
html{-webkit-text-size-adjust:100%}
body.l100{margin:0}
.l100 img{max-width:100%}
.l100 [hidden]{display:none!important}

/* Layout: light, warm page with a soft peach hero (search + US tile map), category rail and
   listing cards, then one charcoal band for business owners and a charcoal footer. */
:root{
  --bg:#ffffff; --surface:#f8f5f2; --card:#ffffff; --line:#e9e3dd; --line-strong:#d3cbc3;
  --fg:#1c1917; --muted:#5f5750;
  --accent:#F96000; --accent-ink:#1a0d04; --accent-text:#b94700; --accent-strong:#e05500; --accent-soft:#fff1e7;
  --hero-bg:#fff8f2; --glow:rgba(249,96,0,.16);
  --ink:#1c1917; --ink-line:#3a332d; --ink-fg:#ffffff; --ink-muted:#cfc7bf;
  --tile:#efe8e1; --tile-fg:#6b625a;
  --flag-red:#B22234; --flag-blue:#3C3B6E; --flag-white:#ffffff; --flag-deep:#232247; --flag-soft:#d3d2ea; --flag-rose:#ffb3bd;
  --ok:#1a7f4b; --ok-soft:#e6f4ec; --warn:#8a5a00; --warn-soft:#fdf2d9; --bad:#b3261e;
  --shadow:0 1px 2px rgba(28,25,23,.05),0 10px 30px rgba(28,25,23,.07);
  --display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --body:"Figtree","Helvetica Neue",Helvetica,Arial,sans-serif;
  --r:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11100f; --surface:#191715; --card:#1d1a18; --line:#302b27; --line-strong:#463f39;
    --fg:#f5f2ef; --muted:#aea69e;
    --accent:#F96000; --accent-ink:#1a0d04; --accent-text:#ff9150; --accent-strong:#ff8a45; --accent-soft:#2c1b10;
    --hero-bg:#1a1512; --glow:rgba(249,96,0,.2);
    --ink:#1d1a17; --ink-line:#3a332d; --ink-fg:#ffffff; --ink-muted:#cfc7bf;
    --tile:#2b2521; --tile-fg:#a9a199;
    --ok:#5fd093; --ok-soft:#12261b; --warn:#f0c060; --warn-soft:#2a2110; --bad:#ff8a80;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#11100f; --surface:#191715; --card:#1d1a18; --line:#302b27; --line-strong:#463f39;
  --fg:#f5f2ef; --muted:#aea69e;
  --accent:#F96000; --accent-ink:#1a0d04; --accent-text:#ff9150; --accent-strong:#ff8a45; --accent-soft:#2c1b10;
  --hero-bg:#1a1512; --glow:rgba(249,96,0,.2);
  --ink:#1d1a17; --ink-line:#3a332d; --ink-fg:#ffffff; --ink-muted:#cfc7bf;
  --tile:#2b2521; --tile-fg:#a9a199;
  --ok:#5fd093; --ok-soft:#12261b; --warn:#f0c060; --warn-soft:#2a2110; --bad:#ff8a80;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.eyebrow{font:600 .9375rem/1.3 var(--body);color:var(--accent-text)}
.band .eyebrow{color:var(--accent)}
.display{font-family:var(--display);font-weight:600;letter-spacing:-.015em;line-height:1.1;text-wrap:balance}
.h2{font-size:clamp(1.75rem,3.4vw,2.375rem)}
.lede{color:var(--muted);max-width:62ch}
.band{background:var(--ink);color:var(--ink-fg)}
.band .lede{color:var(--ink-muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:999px;border:1px solid transparent;font-weight:600;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--fg)}
.btn-ghost:hover{border-color:var(--fg)}
.btn-danger{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn-sm{min-height:36px;padding:6px 14px;font-size:.9375rem}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none}

/* Header */
.top{background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;padding-block:14px}
.mark{display:inline-flex;align-items:center;gap:9px;font:800 1.3125rem/1 var(--body);letter-spacing:-.015em;text-decoration:none;color:var(--fg)}
.mark svg{width:27px;height:33px;flex:none}
.mark .pin{fill:var(--accent)}
.mark .roof{fill:var(--accent-ink)}
.band .mark{color:var(--ink-fg)}
.mark i{font-style:normal;color:var(--accent-text)}
.band .mark i{color:var(--accent)}
.nav{display:flex;gap:4px 22px;flex-wrap:wrap;margin-left:auto;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-weight:500;padding-block:6px}
.nav a:hover{color:var(--fg)}
.nav a.btn-primary,.nav a.btn-primary:hover{color:var(--accent-ink)}
.top .phone{font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums;user-select:all}

/* Hero */
.hero{background:radial-gradient(ellipse 60% 85% at 92% 0%,var(--glow),transparent 65%),var(--hero-bg);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(36px,6vw,72px)}
.hero-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.hero h1{font-size:clamp(2.375rem,5.4vw,3.875rem)}
.hero h1 em{font-style:italic;color:var(--accent-strong)}
.swap{display:block}
.hero .lede{font-size:1.125rem}
.stats{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.stats b{color:var(--fg);font-weight:700}
.search{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,.9fr) auto;gap:10px;background:var(--card);color:var(--fg);padding:14px;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow)}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label,.field .lab{font:600 .875rem/1.3 var(--body);color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:46px;padding:10px 12px;border-radius:10px;border:1px solid var(--line-strong);background:var(--bg);color:var(--fg)}
.field textarea{min-height:120px;resize:vertical}
.field .hint{font-size:.875rem;color:var(--muted)}
.tel{display:flex;align-items:stretch}
.tel span{display:grid;place-items:center;padding-inline:12px;border:1px solid var(--line-strong);border-right:0;border-radius:10px 0 0 10px;background:var(--surface);color:var(--muted);font-weight:600}
.field .tel input{border-radius:0 10px 10px 0;min-width:0}
.search .btn{align-self:end}

.map{display:flex;flex-direction:column;gap:12px;min-width:0}
.map-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.map-head h2{font:600 1.0625rem/1.2 var(--body);color:var(--fg)}
.map-head span{font-size:.875rem;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;max-width:480px;width:100%}
.tile{aspect-ratio:1;border:0;border-radius:6px;padding:0;background:var(--flag-blue);color:var(--flag-white);font:600 clamp(.5625rem,1.15vw,.75rem)/1 var(--body);display:grid;place-items:center}
.tile:hover{box-shadow:inset 0 0 0 2px var(--flag-white)}
.tile.s0{background:var(--flag-red);color:var(--flag-white)}

.legend{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:.875rem;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--flag-blue)}
.legend i.on{background:var(--flag-red)}

/* Directory */
.directory{padding-block:clamp(36px,5vw,64px)}
.dir-head{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.dir-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start}
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--card)}
/* Category tiles */
.catsec{padding-block:clamp(36px,5vw,60px) 0}
.catgrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;margin-bottom:18px}
@media (max-width:1100px){.catgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cat{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 8px 14px;font-size:.9375rem;overflow-wrap:anywhere;border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--fg);font-weight:600;text-align:center;min-width:0}
.cat:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.cat svg{width:30px;height:30px;color:var(--accent-text)}
.cat .n{font-size:.8125rem;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.cat[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}

/* Covers: a photo when one is stored, otherwise illustrated art for the category */
.cover{position:relative;overflow:hidden;background:var(--surface)}
.cover>img,.cover>.art{position:absolute;inset:0;width:100%;height:100%}
.cover>img{object-fit:cover;display:block}
.art{display:grid;place-items:center;color:var(--art-fg);background:var(--art-bg)}
.art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 12%,var(--art-glow),transparent 58%)}
.art svg{width:38%;max-width:92px;height:auto;position:relative;z-index:1}
.a0{--art-bg:linear-gradient(135deg,#ff9a55,#F96000);--art-fg:#1a0d04;--art-glow:rgba(255,255,255,.4)}
.a1{--art-bg:linear-gradient(135deg,#2e2823,#15120f);--art-fg:#ff8a45;--art-glow:rgba(249,96,0,.32)}
.a2{--art-bg:linear-gradient(135deg,#ffe6d3,#ffc79f);--art-fg:#8a3500;--art-glow:rgba(255,255,255,.65)}
.a3{--art-bg:linear-gradient(135deg,#ffbf5e,#ff7a1a);--art-fg:#2b1503;--art-glow:rgba(255,255,255,.4)}
.a4{--art-bg:linear-gradient(135deg,#5d4838,#2c221b);--art-fg:#ffd5b5;--art-glow:rgba(249,96,0,.28)}

/* Hero collage */
.collage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start;max-width:500px;width:100%;justify-self:end}
.ctile{position:relative;aspect-ratio:3/4;border:0;padding:0;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--surface)}
.ctile:nth-child(3n+2){margin-top:28px}
.ctile .cover{position:absolute;inset:0}
.ctile .lab{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);background:var(--card);color:var(--fg);border-radius:999px;padding:4px 11px;font-weight:600;font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2}
.results{display:flex;flex-direction:column;gap:16px;min-width:0}
.bar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.count{font-weight:600;font-variant-numeric:tabular-nums}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 12px;font-size:.875rem;font-weight:500}
.chip button{border:0;background:transparent;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;color:var(--muted)}
.chip button:hover{color:var(--fg);background:var(--line)}
.sort{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:.9375rem;color:var(--muted)}
.sort select{min-height:36px;padding:4px 10px;border-radius:8px;border:1px solid var(--line-strong);background:var(--bg);color:var(--fg)}
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.card{display:grid;grid-template-columns:210px minmax(0,1fr);background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:0;cursor:pointer}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.card .cover{min-height:176px}
.card-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px;min-width:0}
.card-top{display:flex;gap:12px;align-items:flex-start}
.ico{flex:none;width:46px;height:46px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center}
.ico svg{width:22px;height:22px}
.card h3{font:600 1.1875rem/1.25 var(--display);letter-spacing:-.005em;overflow-wrap:anywhere}
.meta{font-size:.9375rem;color:var(--muted)}
.card p.desc{color:var(--muted);font-size:.9375rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.unc{display:inline-block;font-size:.75rem;font-weight:600;border:1px solid var(--line-strong);border-radius:999px;padding:0 8px;margin-left:8px;color:var(--muted);white-space:nowrap}
.claim{background:var(--surface);border-radius:10px;padding:10px 14px}
.claim a{color:var(--accent-text);font-weight:600}
.more{justify-self:center;margin-top:6px}
.tag{font-size:.8125rem;font-weight:500;background:var(--surface);border-radius:6px;padding:3px 8px;color:var(--fg)}
.card .open{margin-top:auto;align-self:flex-start;background:transparent;border:0;padding:6px 0;color:var(--accent-text);font-weight:600}
.card .open:hover{text-decoration:underline}
.state-msg{border:1px dashed var(--line-strong);border-radius:var(--r);padding:32px 24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.state-msg h3{font:600 1.25rem/1.3 var(--display)}
.state-msg p{color:var(--muted);max-width:56ch}

/* Business band */
.biz .wrap{padding-block:clamp(40px,6vw,76px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px)}
.biz-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.steps{display:flex;flex-direction:column;gap:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding-block:16px;border-top:1px solid var(--ink-line)}
.steps li::before{content:counter(s);font:600 1.875rem/1.1 var(--display);color:var(--accent)}
.steps b{display:block;font-weight:600}
.steps span{color:var(--ink-muted);font-size:.9375rem}
.why{display:grid;gap:14px}
.why li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px}
.why svg{width:20px;height:20px;color:var(--accent);margin-top:3px}
.why b{font-weight:600}
.why span{color:var(--ink-muted)}

/* Form */
.add{padding-block:clamp(40px,6vw,72px);background:var(--surface)}
.add .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,56px);align-items:start}
.add-copy{display:flex;flex-direction:column;gap:14px}
.form{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:clamp(16px,3vw,28px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form .full{grid-column:1/-1}
.form-foot{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}
.note{font-size:.9375rem;color:var(--muted)}
.msg{font-weight:600}
.msg.ok{color:var(--ok)} .msg.err{color:var(--bad)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--bad)}

/* Review queue */
.queue{padding-block:clamp(32px,5vw,56px)}
.queue-head{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.pill{display:inline-block;font-family:var(--body);letter-spacing:0;vertical-align:middle;font-size:.8125rem;font-weight:600;border-radius:999px;padding:2px 10px;background:var(--warn-soft);color:var(--warn)}
.q-list{display:grid;gap:12px}
.q-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--card)}
.q-item h3{font:600 1.0625rem/1.3 var(--body);overflow-wrap:anywhere}
.q-item p{color:var(--muted);font-size:.9375rem;overflow-wrap:anywhere}
.q-actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-gap{margin-top:48px}
.setting{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;max-width:600px}
.setting .field{flex:1 1 260px}
.contact{background:var(--bg);min-height:62vh}
.back{color:var(--accent-text);font-weight:600;text-decoration:none}
.back::before{content:"\2190\00a0"}
.back:hover{text-decoration:underline}

/* Footer */
.foot .wrap{padding-block:40px 28px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px 40px}
.foot h3{font:600 1rem/1.2 var(--body);color:var(--ink-fg);margin-bottom:10px}
.foot li,.foot p{color:var(--ink-muted)}
.foot li{padding-block:3px}
.foot a{color:var(--ink-fg)}
.foot .sel{user-select:all;color:var(--ink-fg);font-variant-numeric:tabular-nums}
.foot .legal{grid-column:1/-1;border-top:1px solid var(--ink-line);padding-top:18px;font-size:.875rem}
.foot-brand{display:flex;flex-direction:column;gap:12px;max-width:40ch}

/* Detail dialog */
dialog{border:1px solid var(--line);border-radius:16px;padding:0;background:var(--card);color:var(--fg);width:min(640px,calc(100vw - 32px));max-height:min(86vh,760px)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.dlg{display:flex;flex-direction:column;gap:18px;padding:clamp(18px,4vw,28px)}
.dlg-cover{height:210px;border-radius:12px;flex:none}
.dlg-top{display:flex;gap:14px;align-items:flex-start}
.dlg-top h2{font:600 1.625rem/1.2 var(--display);letter-spacing:-.01em;overflow-wrap:anywhere}
.dlg .x{margin-left:auto;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;display:grid;place-items:center}
.dlg .x:hover{border-color:var(--fg)}
.dlg p.body{white-space:pre-line;overflow-wrap:anywhere}
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;border-top:1px solid var(--line);padding-top:16px}
.facts dt{font:600 .9375rem/1.6 var(--body);color:var(--muted)}
.facts dd{margin:0;overflow-wrap:anywhere;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.facts .sel{user-select:all;font-variant-numeric:tabular-nums}
.facts a{color:var(--accent-text);font-weight:600}
.copy{border:1px solid var(--line-strong);background:transparent;border-radius:6px;padding:2px 8px;font-size:.8125rem;font-weight:600}
.dlg-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Featured grid, logos, filters, US map */
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid3 .card{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
.grid3 .card .cover{min-height:0;height:170px}
.center{display:flex;justify-content:center;margin-top:26px}
.logo{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;overflow:hidden;font:700 1rem/1 var(--body);letter-spacing:.02em;color:var(--art-fg);background:var(--art-bg)}
.logo img{width:100%;height:100%;object-fit:contain;background:var(--flag-white)}
.trust{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:600}
.trust svg{width:36px;height:auto;flex:none;border-radius:3px;box-shadow:0 0 0 1px var(--line)}
.filters{display:grid;gap:12px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.check{display:flex;align-items:center;gap:8px;font-weight:500}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.states{background-color:var(--flag-deep);background-image:radial-gradient(circle,rgba(255,255,255,.13) 1.4px,transparent 1.9px);background-size:28px 28px;color:var(--flag-white);padding-block:0 clamp(36px,5vw,60px)}
.stripes{height:18px;background:repeating-linear-gradient(180deg,var(--flag-red) 0 3px,var(--flag-white) 3px 6px);margin-bottom:clamp(32px,5vw,56px)}
.states-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,56px);align-items:center}
.states-copy{display:flex;flex-direction:column;gap:16px;align-items:flex-start;min-width:0}
.states .eyebrow{color:var(--flag-rose)}
.states .lede{color:var(--flag-soft)}
.topstates{display:grid;gap:8px;width:100%}
.ts{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:9px 12px;color:var(--flag-white);text-align:left;font-weight:600}
.ts:hover{background:rgba(255,255,255,.17)}
.ts .n{font-variant-numeric:tabular-nums;color:var(--flag-soft);font-weight:500}
.ts .bar{grid-column:1/-1;height:4px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}
.ts .bar i{display:block;height:100%;background:var(--flag-rose);border-radius:2px}
.btn-light{background:var(--flag-white);color:var(--flag-deep)}
.states .tiles{gap:6px}
.states .tile{border-radius:8px;font-size:clamp(.625rem,1.2vw,.9375rem)}
.states .tile.s1{background:var(--flag-white);color:var(--flag-deep)}
.tiles .tile:hover{box-shadow:0 0 0 2px var(--accent)}
.tiles .tile[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 2px var(--flag-white)}
.canton{grid-column:2/7;grid-row:1/3;background:var(--flag-blue);border-radius:8px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.25em;color:var(--flag-white);font-size:clamp(.75rem,1.7vw,1.375rem);line-height:1;letter-spacing:.55em;padding-left:.55em;overflow:hidden}
.poplab{font-weight:600;color:var(--flag-soft);font-size:.9375rem;margin-bottom:-6px}
.pop{display:flex;flex-wrap:wrap;gap:8px}
.popchip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:7px 14px;color:var(--flag-white);font-weight:600;font-size:.9375rem}
.popchip:hover{background:rgba(255,255,255,.22)}
.tagbtn{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 14px;font-weight:600;color:var(--fg)}
.tagbtn:hover{border-color:var(--line-strong)}
.tagbtn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.posts .more{grid-column:1/-1}
.states .legend{color:var(--flag-soft)}
.states .legend i{box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.usmap{position:relative;width:100%;max-width:940px;margin-inline:auto;aspect-ratio:16/10}
.usmap.tilemode{aspect-ratio:auto;max-width:none}
.usmap .tiles{max-width:none}
.usmap text{font-family:var(--body);font-weight:600;pointer-events:none}
.hoverinfo{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:600 .875rem/1.3 var(--body);box-shadow:var(--shadow);white-space:nowrap}
.states .legend{justify-content:center;margin-top:10px}
/* CTA, blog, reviews, dashboard */
.cta{padding-block:clamp(36px,5vw,64px)}
.cta-box{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;border-radius:24px;padding:clamp(24px,5vw,56px);color:var(--accent-ink);background:radial-gradient(circle at 88% 10%,rgba(255,255,255,.45),transparent 46%),linear-gradient(135deg,#ffa565,#F96000)}
.cta-copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.cta-eyebrow{font-weight:700}
.cta-copy p{max-width:48ch;font-size:1.0625rem}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.btn-dark{background:var(--accent-ink);color:var(--flag-white)}
.btn-line{border-color:var(--accent-ink);color:var(--accent-ink)}
.cta-points{display:grid;gap:12px;font-weight:600}
.cta-points li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
.cta-points svg{width:22px;height:22px}
.blogsec{padding-block:clamp(36px,5vw,64px) 0}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--fg);text-align:left;padding:0;min-width:0}
.pcard:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.pcard .cover{height:170px;flex:none;width:100%}
.pbody{display:flex;flex-direction:column;gap:8px;padding:16px 18px}
.pbody h3{font:600 1.1875rem/1.3 var(--display)}
.pbody .desc{color:var(--muted);font-size:.9375rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ptag{align-self:flex-start;font-size:.8125rem;font-weight:600;color:var(--accent-text);background:var(--accent-soft);border-radius:999px;padding:2px 10px}
.post{max-width:720px;margin-inline:auto;display:flex;flex-direction:column;gap:16px}
.post h1{font:600 clamp(1.9rem,4vw,2.6rem)/1.15 var(--display);letter-spacing:-.015em;text-wrap:balance}
.post h2{font:600 1.4rem/1.3 var(--display);margin-top:8px}
.post .cover{height:clamp(180px,34vw,320px);border-radius:var(--r)}
.post p,.post li{font-size:1.0625rem;line-height:1.7;overflow-wrap:anywhere}
.post ul{list-style:disc;padding-left:22px;display:grid;gap:6px}
.rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.9375rem;font-weight:600}
.stars{color:var(--accent);letter-spacing:1px}
.reviews{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);padding-top:16px}
.review{display:grid;gap:2px}
.review p{overflow-wrap:anywhere}
.rv-form{gap:8px}
.h3{font:600 1.25rem/1.3 var(--display)}
.dash{padding-block:clamp(28px,4vw,48px) clamp(40px,6vw,72px)}
.tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:24px}
.tab{flex:none;background:transparent;border:0;border-bottom:3px solid transparent;padding:10px 14px;font-weight:600;color:var(--muted);display:inline-flex;gap:8px;align-items:center}
.tab:hover{color:var(--fg)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.badge{background:var(--accent);color:var(--accent-ink);border-radius:999px;font-size:.75rem;padding:1px 7px;font-variant-numeric:tabular-nums}
.pane{display:flex;flex-direction:column;gap:18px}
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--card)}
.stat b{display:block;font:600 2rem/1.1 var(--display);font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:.9375rem}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.bars{display:grid;gap:8px;margin-top:12px}
.brow{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:.9375rem}
.brow .track{height:10px;border-radius:5px;background:var(--surface);overflow:hidden}
.brow .track i{display:block;height:100%;background:var(--accent);border-radius:5px}
.brow .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.toolbar .field{flex:1 1 180px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.tbl{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:660px}
.tbl th{text-align:left;font-weight:600;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface);white-space:nowrap}
.tbl td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl select{min-height:36px;padding:4px 8px;border-radius:8px;border:1px solid var(--line-strong);background:var(--bg);color:var(--fg);max-width:210px}
.tbl .sel{user-select:all;font-variant-numeric:tabular-nums;white-space:nowrap}
.linkbtn{background:transparent;border:0;padding:0;color:var(--fg);font-weight:600;text-align:left}
.linkbtn:hover{color:var(--accent-text);text-decoration:underline}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.switch{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--card)}
.switch input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent);flex:none}
.switch span{color:var(--muted)}
.switch b{display:block;color:var(--fg)}
.pill.live{background:var(--ok-soft);color:var(--ok)}
@media (max-width:900px){
  .states-grid,.cta-box,.two{grid-template-columns:minmax(0,1fr)}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .posts{grid-template-columns:minmax(0,1fr)}
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brow{grid-template-columns:minmax(0,110px) minmax(0,1fr) 36px}
}
@media (max-width:900px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .side{order:-1}
  .side .map{display:none}
  .filters{margin-bottom:0;padding-bottom:0;border-bottom:0}
}
@media (max-width:640px){
  .grid3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .hero .wrap,.biz .wrap,.add .wrap{grid-template-columns:minmax(0,1fr)}
  .dir-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .side{position:static}
  .collage{justify-self:start}
  .foot .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:640px){
  .search,.form{grid-template-columns:minmax(0,1fr)}
  .card{grid-template-columns:minmax(0,1fr)}
  .card .cover{min-height:0;height:168px}
  .ctile:nth-child(n+4){display:none}
  .catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .search .btn{width:100%}
  .nav{margin-left:0;width:100%}
  .q-item{grid-template-columns:minmax(0,1fr)}
  .sort{margin-left:0}
  .foot .wrap{grid-template-columns:minmax(0,1fr)}
}
@keyframes rise{from{opacity:.3;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes swapin{from{opacity:0;transform:translateY(.3em)}to{opacity:1;transform:none}}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-9px)}}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .btn,.tile{transition:box-shadow .15s,border-color .15s,filter .15s,transform .15s}
  .btn-primary:hover{transform:translateY(-1px)}
  .card,.cat{transition:box-shadow .2s,border-color .2s,transform .2s}
  .card:hover,.cat:hover{transform:translateY(-3px)}
  .cover>img,.art svg{transition:transform .6s ease}
  .card:hover .cover>img,.card:hover .art svg,.ctile:hover .cover>img,.ctile:hover .art svg{transform:scale(1.07)}
  .hero-copy>*{animation:rise .6s ease both}
  .hero-copy>*:nth-child(2){animation-delay:.06s}
  .hero-copy>*:nth-child(3){animation-delay:.12s}
  .hero-copy>*:nth-child(4){animation-delay:.18s}
  .hero-copy>*:nth-child(5){animation-delay:.24s}
  .swap.in{animation:swapin .45s ease both}
  .ctile{animation:float 5s ease-in-out infinite alternate}
  .ctile:nth-child(2){animation-delay:-1.6s}
  .ctile:nth-child(3){animation-delay:-3.1s}
  .ctile:nth-child(4){animation-delay:-2.3s}
  .ctile:nth-child(5){animation-delay:-.8s}
  .ctile:nth-child(6){animation-delay:-3.9s}
  .card{animation:rise .45s ease both}
}

/* Photo category tiles and landscape hero collage */
.catgrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.cat{align-items:stretch;gap:0;padding:0;overflow:hidden;text-align:left}
.cat .cover{aspect-ratio:2/1;width:100%}
.cat .art svg{color:inherit}
.cat-row{display:flex;align-items:center;gap:10px;padding:10px 12px 12px;min-width:0}
.cat-ico{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ci)}
.cat-ico svg{width:20px;height:20px;color:var(--flag-white)}
.cat-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.cat-txt b{font-weight:600;overflow-wrap:anywhere}
.cat .n{color:var(--ci-text)}
.c0{--ci:#2563c9;--ci-text:#1d4fa3}
.c1{--ci:#F96000;--ci-text:#b94700}
.c2{--ci:#1f9d55;--ci-text:#17753f}
.c3{--ci:#7c3aed;--ci-text:#6426c9}
.c4{--ci:#e03131;--ci-text:#b42424}
.c5{--ci:#0e9aa7;--ci-text:#0a727c}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .c0{--ci-text:#8fb6ff}
  :root:not([data-theme="light"]) .c1{--ci-text:#ff9150}
  :root:not([data-theme="light"]) .c2{--ci-text:#6fd49a}
  :root:not([data-theme="light"]) .c3{--ci-text:#bfa0ff}
  :root:not([data-theme="light"]) .c4{--ci-text:#ff8f8f}
  :root:not([data-theme="light"]) .c5{--ci-text:#62d2dd}
}
:root[data-theme="dark"] .c0{--ci-text:#8fb6ff}
:root[data-theme="dark"] .c1{--ci-text:#ff9150}
:root[data-theme="dark"] .c2{--ci-text:#6fd49a}
:root[data-theme="dark"] .c3{--ci-text:#bfa0ff}
:root[data-theme="dark"] .c4{--ci-text:#ff8f8f}
:root[data-theme="dark"] .c5{--ci-text:#62d2dd}
.collage{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:520px}
.ctile{aspect-ratio:16/10}
.ctile:nth-child(3n+2){margin-top:0}
.ctile:nth-child(2n){margin-top:26px}
@media (max-width:1100px){.catgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.catgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){
  .catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctile:nth-child(4){display:block}
  .cat-row{padding:8px 10px 10px;gap:8px}
  .cat-ico{width:32px;height:32px}
}

/* Phone layout: sticky header with menu, collapsible filters, larger touch targets */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30}
.nav-links{display:flex;gap:4px 22px;flex-wrap:wrap;align-items:center}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:10px;background:transparent;color:var(--fg);place-items:center;padding:0}
.menu-btn svg{width:22px;height:22px}
section[id],.view{scroll-margin-top:84px}
.flt-btn{display:none}
.band-st{display:none;width:100%}
.states .field label{color:var(--flag-soft)}
@media (max-width:900px){
  .flt-btn{display:inline-flex}
  .side{display:none}
  #listings.filters-open .side{display:block}
  .band-st{display:flex}
}
@media (max-width:760px){
  .top .wrap{flex-wrap:nowrap;padding-block:10px;gap:10px}
  .nav{margin-left:auto;width:auto;flex-wrap:nowrap;gap:8px}
  .menu-btn{display:grid}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:4px 16px 10px}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 4px;border-bottom:1px solid var(--line);font-size:1.0625rem;color:var(--fg)}
  .nav-links a:last-child{border-bottom:0}
  .mark{font-size:1.125rem}
  .mark svg{width:24px;height:29px}
  .back{display:inline-flex;align-items:center;min-height:44px}
  .foot li a{display:inline-block;padding-block:9px}
  .chip button{width:32px;height:32px}
  .popchip,.tagbtn{min-height:42px;display:inline-flex;align-items:center}
  .btn-sm{min-height:42px}
  .copy{min-height:36px;padding:4px 12px}
  .card .open{min-height:44px}
  .linkbtn{min-height:40px}
  .hero .wrap{padding-block:28px 36px}
}
@media (max-width:640px){
  .search{grid-template-columns:repeat(2,minmax(0,1fr))}
  .search .field:first-child,.search .btn{grid-column:1/-1}
  dialog{width:calc(100vw - 16px);max-height:92vh;border-radius:14px}
  .dlg-cover{height:150px}
  .facts{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .facts dd{margin-bottom:8px}
  .tbl{min-width:0}
  .tbl thead{display:none}
  .tbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:12px;border-bottom:1px solid var(--line)}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{padding:0;border:0}
  .tbl td:nth-child(1),.tbl td:nth-child(2){grid-column:1/-1}
  .tbl td:nth-child(3){grid-column:1;grid-row:3;color:var(--muted)}
  .tbl td:nth-child(4){grid-column:1;grid-row:4}
  .tbl td:nth-child(5){grid-column:2;grid-row:3 / span 2;align-self:center}
  .tbl select{max-width:none;width:100%;min-height:44px}
  .tablewrap{overflow-x:visible}
  .toolbar .btn{width:100%}
  .pager{justify-content:space-between}
}

/* ---------- WordPress build: links instead of buttons, real pages instead of views ---------- */
a.cat,a.card,a.pcard,a.ctile,a.tile,a.popchip,.chip a{text-decoration:none}
a.card{color:var(--fg)}
a.ctile{display:block}
a.tile{text-decoration:none}
.card-id{min-width:0}
.card .open{display:inline-flex;align-items:center}
.tiles .tile[aria-current="true"]{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 2px var(--flag-white)}
.chip a{border-radius:50%;width:24px;height:24px;display:grid;place-items:center;color:var(--muted)}
.chip a:hover{color:var(--fg);background:var(--line)}
.chip a svg{width:14px;height:14px}
.popchip{display:inline-flex;align-items:center}
.filters .btn{width:100%}
.msg-actions{display:flex;gap:10px;flex-wrap:wrap}
.pagination{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:10px;font-variant-numeric:tabular-nums}
.pg-now{color:var(--muted);font-weight:500}
.notice{border-radius:10px;padding:12px 14px;font-weight:600;border:1px solid transparent}
.notice.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.notice.err{background:var(--card);color:var(--bad);border-color:var(--bad)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.add .eyebrow,.add-copy .back{align-self:flex-start}
.biz h1.h2{color:var(--ink-fg)}

/* One listing */
.biz-page .wrap{max-width:860px;display:flex;flex-direction:column;gap:18px}
.biz-page .back{align-self:flex-start}
.single-cover{height:clamp(180px,32vw,320px);border-radius:var(--r)}
.biz-page .dlg-top{align-items:center}
.biz-page .dlg-top .logo{width:60px;height:60px;border-radius:14px;font-size:1.25rem}
.biz-page h1{font:600 clamp(1.75rem,4vw,2.375rem)/1.15 var(--display);letter-spacing:-.015em;overflow-wrap:anywhere}
.biz-page .body p{margin:0 0 12px;font-size:1.0625rem;line-height:1.7;overflow-wrap:anywhere}
.biz-page .body p:last-child{margin-bottom:0}
.review .who{font-weight:600}
.form.rv{margin-top:6px}

/* One article */
.post-page{padding-block:clamp(28px,5vw,56px)}
.post .back{align-self:flex-start}
.post .ptag{align-self:flex-start}
.post-body{display:flex;flex-direction:column;gap:16px}
.post-body>*{margin:0}
.post-body h2,.post-body h3{font-family:var(--display);font-weight:600;line-height:1.3;margin-top:8px}
.post-body h2{font-size:1.4rem}
.post-body h3{font-size:1.2rem}
.post-body ul,.post-body ol{padding-left:22px;display:grid;gap:6px}
.post-body ul{list-style:disc}
.post-body ol{list-style:decimal}
.post-body a{color:var(--accent-text);font-weight:600}
.post-body img{height:auto;border-radius:var(--r)}
.post-body blockquote{margin:0;padding-left:16px;border-left:3px solid var(--accent);color:var(--muted)}
.post-cta{display:flex;gap:12px 16px;flex-wrap:wrap;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--surface);margin-top:8px}
.post-cta p{font-weight:600;font-size:1rem}

/* WordPress toolbar for signed-in staff */
.admin-bar .top{top:32px}
@media (max-width:782px){.admin-bar .top{top:46px}}
@media (max-width:600px){.admin-bar .top{top:0}}

@media (max-width:900px){
  #listings-page.filters-open .side{display:block}
}
@media (max-width:760px){
  .chip a{width:32px;height:32px}
  .pagination{justify-content:space-between}
}

/* Category tiles: keep long names such as "Transportation" on whole words */
.cat-row{gap:8px;padding:10px 10px 12px}
.cat-ico{width:36px;height:36px}
.cat-txt b{font-size:.90625rem;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}

/* Listing cards in the list view: a wider picture so the illustration keeps its subject */
@media (min-width:641px){.cards:not(.grid3) .card{grid-template-columns:270px minmax(0,1fr)}}

/* Listing and article pages: the picture sits beside the text at a modest size, never as a wide banner */
.biz-head{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.biz-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.biz-photo .cover{aspect-ratio:3/2;height:auto;border-radius:var(--r);box-shadow:var(--shadow)}
.post-head{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:center}
.post-title{display:flex;flex-direction:column;gap:12px;align-items:flex-start;min-width:0}
.post .post-head .cover{aspect-ratio:3/2;height:auto;border-radius:var(--r);box-shadow:var(--shadow)}
@media (max-width:760px){
  .biz-head,.post-head{grid-template-columns:minmax(0,1fr);gap:16px}
  .biz-photo{order:-1}
  .biz-photo .cover,.post .post-head .cover{aspect-ratio:2/1}
}

/* Search: what + where on the first row, category + state + button on the second */
.search{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
.search .s-where{grid-column:2/4}
@media (max-width:640px){
  .search{grid-template-columns:repeat(2,minmax(0,1fr))}
  .search .s-what,.search .s-where,.search .btn{grid-column:1/-1}
}
.dir-head .lede{font-size:1rem}

/* Footer: legal links, and the Explore heading as a link */
.foot h3 a{text-decoration:none}
.foot h3 a:hover{text-decoration:underline}
.foot .legal{display:flex;justify-content:space-between;align-items:center;gap:6px 24px;flex-wrap:wrap}
.foot .legal p{font-size:.875rem}
.legal-links{display:flex;gap:6px 20px;flex-wrap:wrap}
.agree{font-size:.875rem;color:var(--muted);flex:1 1 220px}
.agree a{color:var(--accent-text);font-weight:600}
.legal-page .post-body h2{margin-top:14px}
@media (max-width:760px){.legal-links a{display:inline-block;padding-block:9px}}
@media (max-width:760px){.foot h3 a{display:inline-block;padding-block:9px}}

/* ---------- Phone pass: shorter pages, compact cards, bigger tap targets, no zoom on focus ---------- */
@media (max-width:640px){
  .field input,.field select,.field textarea,.sort select,.tbl select{font-size:16px}
  .sort select{min-height:44px}
  .foot h3 a,.legal-links a{display:inline-block;padding-block:12px}
  .hero .wrap{padding-block:22px 26px}
  .hero-copy{gap:14px}
  .hero h1{font-size:2.125rem}
  .hero .lede{font-size:1rem}
  .collage{display:none}
  .search{padding:12px;gap:8px 10px}
  #cats:not(.open) .cat:nth-child(n+9){display:none}
  .cards{gap:12px}
  .cards .card,.cards.grid3 .card{grid-template-columns:108px minmax(0,1fr);grid-template-rows:auto}
  .cards .card .cover,.cards.grid3 .card .cover{height:auto;min-height:118px}
  .cards .card-body{padding:12px 14px;gap:5px}
  .cards .card .logo{display:none}
  .cards .card h3{font-size:1.0625rem}
  .cards .card .meta{font-size:.875rem}
  .cards .card .tags{max-height:25px;overflow:hidden}
  .cards .card .tag{white-space:nowrap;line-height:1.4;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .cards .card p.desc{font-size:.875rem}
  .cards a.card .open{display:none}
  .posts{gap:12px}
  .posts .pcard{flex-direction:row}
  .posts .pcard .cover{width:108px;height:auto;min-height:118px;align-self:stretch}
  .posts .pbody{padding:12px 14px;gap:5px;min-width:0}
  .posts .pbody h3{font-size:1.0625rem}
  .posts .pbody .desc{-webkit-line-clamp:2;font-size:.875rem}
  .chip a,.chip button{width:36px;height:36px}
  .facts a{display:inline-block;padding-block:7px}
  .state-msg{padding:22px 16px}
  .cta-box{border-radius:18px}
}

/* Listing page: call, website and email buttons */
.biz-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:640px){
  .biz-actions .btn{flex:1 1 140px;min-height:48px}
  .biz-actions .btn-primary{flex-basis:100%}
}

/* One location box (city, ZIP code or state) instead of a state list */
.search .s-cat{grid-column:1/3}
@media (max-width:640px){.search .s-cat{grid-column:1/-1}}
.band-loc{display:flex;gap:8px;align-items:flex-end;width:100%;max-width:460px}
.band-loc .field{flex:1 1 auto}
.band-loc .btn{min-height:46px}

/* Business account pages */
.acct .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.acct-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.acct .form,.acct-in .form{margin-top:4px}
.acct .form{grid-template-columns:minmax(0,1fr)}
.acct-link{color:var(--accent-text);font-weight:600}
.acct-in .wrap{max-width:860px;display:flex;flex-direction:column;gap:18px}
.acct-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.acct-head>div{display:flex;flex-direction:column;gap:6px}
.acct-sub{margin-top:18px}
.acct-remove{border-style:dashed}
.acct-hint a,.acct-in .note a{color:var(--accent-text);font-weight:600}
.acct-in .back{align-self:flex-start}
.q-item h3 .pill{margin-left:6px}
@media (max-width:900px){.acct .wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .q-item{grid-template-columns:minmax(0,1fr)}
  .acct-in .form-foot .btn{flex:1 1 140px}
}

/* Hero: the flag map of states sits beside the search on wide screens; the lower band takes over on small ones */
.heromap{justify-self:end;width:100%;max-width:520px;border-radius:22px;overflow:hidden;color:var(--flag-white);box-shadow:var(--shadow);background-color:var(--flag-deep);background-image:radial-gradient(circle,rgba(255,255,255,.13) 1.4px,transparent 1.9px);background-size:28px 28px}
.heromap .stripes{height:12px;margin-bottom:0}
.heromap-body{display:flex;flex-direction:column;gap:14px;padding:16px 20px 20px}
.heromap h2{font:600 1.0625rem/1.3 var(--body);color:var(--flag-white)}
.heromap .tiles{max-width:none;gap:5px}
.heromap .tile{border-radius:7px;font-size:clamp(.625rem,.95vw,.8125rem)}
.heromap .tile.s1{background:var(--flag-white);color:var(--flag-deep)}
.heromap .canton{font-size:clamp(.6875rem,1.15vw,1rem);border-radius:7px}
.heromap .pop{gap:6px}
.heromap .popchip{padding:5px 12px;font-size:.875rem}
@media (max-width:900px){.heromap{display:none}}
@media (min-width:901px){.states.only-small{display:none}}

/* Hero map: the card is as tall as the text and search beside it, and the states stretch to fill it */
.hero .wrap.has-map{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch}
.hero .wrap.has-map .hero-copy{align-self:center}
.heromap{max-width:none;height:100%;display:flex;flex-direction:column}
.heromap-body{flex:1 1 auto}
.heromap .tiles{flex:1 1 auto;grid-template-rows:repeat(8,minmax(26px,1fr))}
.heromap .tile{aspect-ratio:auto}

/* A little life: states pop in like a flag unrolling, then sway gently; the stars twinkle */
@keyframes tilepop{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
@keyframes tilewave{0%,100%{translate:0 2px}50%{translate:0 -2px}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.5}}
@media (prefers-reduced-motion:no-preference){
  .heromap{animation:rise .7s ease .1s both}
  .heromap .tile{transition:scale .15s,box-shadow .15s;animation:tilepop .45s cubic-bezier(.2,.8,.3,1.25) backwards,tilewave 4.5s ease-in-out infinite;animation-delay:calc((var(--c,0) + var(--r,0)) * 40ms + .25s),calc(var(--c,0) * -.32s)}
  .states .tile{animation:tilewave 4.5s ease-in-out infinite;animation-delay:calc(var(--c,0) * -.32s)}
  .heromap .tiles:hover .tile,.states .tiles:hover .tile{animation-play-state:paused}
  .heromap .tile:hover{scale:1.14;z-index:2}
  .canton span{animation:twinkle 2.8s ease-in-out infinite}
  .canton span:nth-child(2){animation-delay:-.9s}
  .canton span:nth-child(3){animation-delay:-1.8s}
}

/* Keep the states close to square: the map takes its height from its width, and any spare room is shared out */
.heromap-body{justify-content:space-between}
.heromap .tiles{flex:0 1 auto;aspect-ratio:12/10.5;min-height:0}
@media (max-width:1180px){.hero .wrap.has-map{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:999px){
  .heromap{display:none}
  .hero .wrap.has-map{grid-template-columns:minmax(0,1fr)}
  .states.only-small{display:block}
}

/* The map sits in the hero on every screen size; the separate lower map section is gone */
.states.only-small{display:none!important}
@media (max-width:999px){
  .heromap{display:flex;height:auto;max-width:620px;justify-self:start}
  .hero .wrap.has-map{row-gap:22px}
}
@media (max-width:640px){
  .heromap{border-radius:18px}
  .heromap .stripes{height:9px}
  .heromap-body{padding:12px 12px 14px;gap:10px}
  .heromap h2{font-size:1rem}
  .heromap .tiles{gap:3px}
  .heromap .tile{border-radius:5px;font-size:.6875rem}
  .heromap .canton{font-size:.75rem;border-radius:5px}
  .heromap .popchip{min-height:40px}
}
/* When the map starts below the screen edge, its entrance waits until it scrolls into view */
.heromap.wait,.heromap.wait .tile{animation:none}
.heromap.wait .tile{opacity:0}

/* Map labels and stars scale with the card itself, so they stay readable from small phones to wide desktops */
.heromap{container-type:inline-size}
@supports (font-size:1cqw){
  .heromap .tile{font-size:clamp(.6875rem,2.9cqw,.9375rem)}
  .heromap .canton{font-size:clamp(.75rem,3.5cqw,1.25rem)}
  .heromap h2{font-size:clamp(1rem,3.4cqw,1.125rem)}
}
/* State shortcuts stay on one tidy row: the script hides any that would wrap */
.heromap .popchip.off{display:none}
/* ===== Hero sizes: one deliberate set per device (phone / tablet / desktop) ===== */
.trust-wide{display:none}

/* Tablet and up: text and search on the left, map on the right.
   The map card takes exactly the height of the text column and the full width of its own column,
   and the states stretch to fill it, so no empty space is left around the map. */
@media (min-width:720px){
  .hero .wrap.has-map{align-items:stretch}
  .hero .has-map .hero-copy{align-self:center}
  .hero .has-map .heromap{display:flex;height:auto;min-height:400px;max-width:none;justify-self:stretch;align-self:stretch}
}
@supports (container-type:size){
  @media (min-width:720px){
    .hero .has-map .heromap{container-type:size}
    .hero .has-map .heromap .tiles{flex:1 1 0;aspect-ratio:auto;min-height:0;grid-template-rows:repeat(8,minmax(0,1fr));max-height:calc((100cqw - var(--map-pad,40px)) * var(--tile-shape,.93))}
  }
}

/* Desktop and laptop, 1000px and wider. Sizes follow the screen height as well as its width,
   so the whole top section fits the first screen on short laptop displays. */
@media (min-width:1000px){
  .hero .wrap.has-map{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3.5vw,64px);padding-block:clamp(24px,5.5vh,64px)}
  .hero .has-map .hero-copy{gap:clamp(12px,2.2vh,18px)}
  .hero .has-map h1{font-size:clamp(2.5rem,min(4.4vw,7.4vh),4.75rem)}
  .hero .has-map .lede{font-size:clamp(1rem,2.3vh,1.25rem)}
}
/* Narrow laptops and tablets held sideways: give the "Find" box enough room for its hint */
@media (min-width:1000px) and (max-width:1180px){
  .hero .has-map .search{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr) auto}
}

/* Tablet, 720–999px: the map gets the wider column; the "serving" line runs under both */
@media (min-width:720px) and (max-width:999px){
  .hero .wrap.has-map{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:18px 24px;padding-block:28px}
  .hero .has-map .hero-copy{gap:14px}
  .hero .has-map h1{font-size:clamp(2.125rem,4.9vw,2.875rem)}
  .hero .has-map .lede{font-size:1rem}
  .hero .has-map .hero-copy .trust{display:none}
  .hero .has-map .trust-wide{display:flex;grid-column:1/-1;justify-content:center;font-size:.9375rem}
  .hero .has-map .search{grid-template-columns:minmax(0,1fr) auto;padding:12px;gap:8px 10px}
  .hero .has-map .search .s-what,.hero .has-map .search .s-where{grid-column:1/-1}
  .hero .has-map .search .s-cat{grid-column:1/2}
  .hero .has-map .search .btn{grid-column:2/3;width:auto;min-height:46px}
  .hero .has-map .search input,.hero .has-map .search select{font-size:16px}
  .hero .has-map .heromap{--map-pad:28px;--tile-shape:1.02;--chip-rows:2}
  .hero .has-map .heromap-body{padding:14px 14px 16px;gap:12px}
  .hero .has-map .heromap .tiles{gap:4px}
  .hero .has-map .heromap .pop{gap:8px}
  .hero .has-map .heromap .popchip{min-height:38px;padding:6px 14px;font-size:.9375rem}
}

/* Phone, under 720px: one column — headline, search, map, then the "serving" line.
   The search is tightened (category and button share a row) so the map starts on the first screen. */
@media (max-width:719px){
  .hero .wrap.has-map{grid-template-columns:minmax(0,1fr);gap:12px;padding-block:16px 22px}
  .hero .has-map .hero-copy{gap:12px}
  .hero .has-map .eyebrow{font-size:.875rem}
  .hero .has-map h1{font-size:clamp(1.9375rem,8.6vw,2.5rem)}
  .hero .has-map .lede{font-size:.9375rem;line-height:1.5}
  .hero .has-map .hero-copy .trust{display:none}
  .hero .has-map .trust-wide{display:flex;font-size:.875rem;margin-top:2px}
  .hero .has-map .search{grid-template-columns:minmax(0,1fr) auto;padding:12px;gap:8px 10px}
  .hero .has-map .search .s-what,.hero .has-map .search .s-where{grid-column:1/-1}
  .hero .has-map .search .s-cat{grid-column:1/2}
  .hero .has-map .search .btn{grid-column:2/3;width:auto;min-height:46px;padding-inline:22px}
  .hero .has-map .search input,.hero .has-map .search select{font-size:16px}
  .hero .has-map .heromap{display:flex;height:auto;max-width:480px;justify-self:center;margin-top:4px}
  .hero .has-map .heromap-body{padding:12px 10px 12px;gap:10px}
}
/* Phone: a smaller, more compact map with square state tiles */
@media (max-width:719px){
  .hero .has-map .heromap{max-width:320px;border-radius:16px}
  .hero .has-map .heromap .stripes{height:7px}
  .hero .has-map .heromap-body{padding:10px 10px 11px;gap:8px}
  .hero .has-map .heromap h2{font-size:.9375rem}
  .hero .has-map .heromap .tiles{aspect-ratio:12/8.2;gap:3px;grid-template-rows:repeat(8,minmax(0,1fr))}
  .hero .has-map .heromap .tile{border-radius:4px;font-size:.625rem}
  .hero .has-map .heromap .canton{border-radius:4px;font-size:.6875rem}
  .hero .has-map .heromap .pop{gap:5px}
  .hero .has-map .heromap .popchip{min-height:34px;padding:4px 11px;font-size:.8125rem}
}
/* State letters scale with the map */
@supports (font-size:1cqw){
  .heromap .tile{font-size:clamp(.6875rem,3.2cqw,1.125rem)}
  .heromap .canton{font-size:clamp(.75rem,3.5cqw,1.5rem)}
}
/* Small phones: the logo stays on one line beside the buttons */
.mark span{white-space:nowrap}
@media (max-width:380px){
  .mark{font-size:1rem;gap:7px}
  .mark svg{width:22px;height:27px}
  .top .btn-sm{padding-inline:14px}
}
/* ===== Wider page: less empty space at the sides on laptops and desktops ===== */
.wrap{max-width:1600px;padding-inline:clamp(16px,3vw,40px)}
.biz-page .wrap,.acct-in .wrap{max-width:1120px}
.post{max-width:880px}
@media (min-width:1400px){
  /* listings sit two across beside the filters */
  .dir-grid .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dir-grid .cards:not(.grid3) .card{grid-template-columns:190px minmax(0,1fr)}
  .dir-grid .cards .card p.desc{-webkit-line-clamp:3}
}
/* ===== Listings page: a search bar on top, and the filters always in view ===== */
.lsearch{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;gap:10px;align-items:end;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px;margin-bottom:22px}
.lsearch .btn{min-height:46px;padding-inline:26px}
.side-h{font:600 1.0625rem/1.3 var(--body);color:var(--fg)}
.f-actions{display:flex;flex-direction:column;gap:8px}
.filters .flt-btn{display:none}
.l100-js .filters .f-apply{display:none}
@media (max-width:900px){
  .side{display:block;order:-1;position:static;padding:12px}
  .dir-grid{gap:16px}
  .filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:0;padding:0;border:0;align-items:end}
  .filters .side-h{display:none}
  .filters .f-actions{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  .filters .f-actions:empty{display:none}
  .filters .btn{width:auto}
  .filters .flt-btn{display:inline-flex}
  .filters select{font-size:16px}
  .side .map{display:none;margin-top:14px}
  #listings-page.filters-open .side .map,#listings.filters-open .side .map{display:flex}
}
@media (max-width:640px){
  .lsearch{grid-template-columns:minmax(0,1fr) auto;padding:12px;gap:8px 10px;margin-bottom:14px}
  .lsearch .f-what{grid-column:1/-1}
  .lsearch .btn{padding-inline:20px}
  .lsearch input{font-size:16px}
}