/* Best Contractors of Round Rock — directory UI
   Houzz: photo-forward pro cards, award seal, gallery profile
   Yelp:  dual search, left filter rail, dense ranked list, star rows */

:root{
  --ground:#F7F7F4;
  --surface:#FFFFFF;
  --surface-2:#F0F2EC;
  --ink:#15201B;
  --ink-2:#4A5750;
  --ink-3:#74827A;
  --line:#E2E5DD;
  --line-2:#CED4C7;
  --cedar:#2E5C4F;
  --cedar-2:#3F7A69;
  --cedar-wash:#E4EDE8;
  --brass:#9A6B22;
  --brass-2:#C18F3C;
  --brass-wash:#F6EDDC;
  --star:#C9860E;
  --good:#2F6B45;
  --crit:#8E3B2F;
  --shadow-1:0 1px 2px rgba(21,32,27,.06);
  --shadow-2:0 2px 6px rgba(21,32,27,.07), 0 12px 28px -16px rgba(21,32,27,.22);
  --shadow-3:0 4px 14px rgba(21,32,27,.10), 0 24px 48px -24px rgba(21,32,27,.30);
  --r:10px;
  --r-lg:14px;
  --maxw:1200px;
  /* Arial throughout (Kyle, 2026-09-16). Every font on the site runs through
     these three variables, which is why swapping the whole typeface is three
     lines instead of a sweep -- worth keeping that way.
     --serif and --mono keep their NAMES on purpose: ~40 rules reference them,
     and renaming would be a large diff for no visual change. They now describe
     ROLE (display / label) rather than classification.
     Tahoma is a one-line swap here if Arial reads too plain. */
  --sans:Arial,Helvetica,'Helvetica Neue',sans-serif;
  --serif:Arial,Helvetica,'Helvetica Neue',sans-serif;
  --mono:Tahoma,Arial,Helvetica,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#101511;
    --surface:#171E1A;
    --surface-2:#1E2723;
    --ink:#EAEFEA;
    --ink-2:#AEBAB3;
    --ink-3:#818F87;
    --line:#28332E;
    --line-2:#37443E;
    --cedar:#72B59D;
    --cedar-2:#8CC8B2;
    --cedar-wash:#1B2A25;
    --brass:#D3A45B;
    --brass-2:#E2BC77;
    --brass-wash:#2A2115;
    --star:#E0A93C;
    --good:#63B183;
    --crit:#D98878;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 6px rgba(0,0,0,.45), 0 12px 28px -16px rgba(0,0,0,.7);
    --shadow-3:0 4px 14px rgba(0,0,0,.5), 0 24px 48px -24px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#101511; --surface:#171E1A; --surface-2:#1E2723;
  --ink:#EAEFEA; --ink-2:#AEBAB3; --ink-3:#818F87;
  --line:#28332E; --line-2:#37443E;
  --cedar:#72B59D; --cedar-2:#8CC8B2; --cedar-wash:#1B2A25;
  --brass:#D3A45B; --brass-2:#E2BC77; --brass-wash:#2A2115;
  --star:#E0A93C; --good:#63B183; --crit:#D98878;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- prototype banner ---------- */
.protobar{
  background:var(--brass-wash);
  border-bottom:1px solid var(--line);
  color:var(--ink-2);
  font-size:12.5px;
  padding:7px 0;
}
.protobar .wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.protobar b{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  background:var(--brass);color:#fff;padding:2px 7px;border-radius:4px;font-weight:600;
}

/* ---------- header (Yelp: dual search) ---------- */
.masthead{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.masthead-in{display:flex;align-items:center;gap:22px;padding:12px 0;max-width:var(--maxw);margin:0 auto;padding-left:20px;padding-right:20px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
/* The brand lockup (Kyle, 2026-10-02: "use this for the logo in the header and the
   hero image"). Height is capped so the sticky bar does not grow: the masthead is
   sticky, so every pixel it gains is taken off every page on every scroll. The
   .wordmark rules below are kept because the markup may revert to type if the
   lockup proves too detailed at this size.
   56px -> 67px on Kyle's instruction, 2026-10-02 ("make the logo 20% larger in the
   header"); the mobile step keeps the same ratio. The source is 240px tall, so 67px
   is still served at well over 2x and needed no regeneration. */
.brand .wordmark-img{display:block;height:125px;width:auto}   /* 188x125. Kyle asked 200x140, saw it live and took it down a hair to 125. The
      lockup is 3:2, so width follows height rather than being set independently
      and squashing it. 2026-10-02 */
@media (max-width:900px){ .brand .wordmark-img{height:90px} }   /* NOT the proportional 110px: the masthead is sticky, and at 110 the bar eats a third of a phone screen on every scroll. Say the word for 110. */
.brand .wordmark{display:flex;flex-direction:column;line-height:1.05}
.brand .wordmark b{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:-.012em}
.brand .wordmark span{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

/* Yelp-style dual search */
.ysearch{
  display:flex;flex:1;min-width:0;max-width:620px;
  border:1px solid var(--line-2);border-radius:8px;background:var(--surface);
  box-shadow:var(--shadow-1);overflow:hidden;
}
.ysearch .fld{display:flex;align-items:center;gap:7px;flex:1;min-width:0;padding:0 12px}
.ysearch .fld + .fld{border-left:1px solid var(--line)}
.ysearch label{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);flex:none;font-weight:600;
}
.ysearch input{
  border:0;background:transparent;outline:none;color:var(--ink);
  font-size:14px;padding:10px 0;width:100%;min-width:0;
}
.ysearch input::placeholder{color:var(--ink-3)}
/* The Find field is a <select> (Kyle, 2026-10-02). It needs the input rules
   repeated -- a select inherits none of them -- plus appearance:none to drop the
   native chrome, and its own caret so the control still reads as a menu. */
.ysearch select{
  border:0;background:transparent;outline:none;color:var(--ink);
  font-size:14px;padding:10px 22px 10px 0;width:100%;min-width:0;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6b63' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:10px 6px;
}
.ysearch select:invalid,.ysearch select option[value=""]{color:var(--ink-3)}
.ysearch .go{
  border:0;background:var(--cedar);color:#fff;padding:0 16px;cursor:pointer;
  display:grid;place-items:center;flex:none;
}
.ysearch .go:hover{background:var(--cedar-2)}
.ysearch .go svg{width:17px;height:17px;display:block}

.mast-nav{display:flex;align-items:center;gap:4px;flex:none}
.mast-nav a{
  text-decoration:none;color:var(--ink-2);font-size:13.5px;font-weight:500;
  padding:8px 10px;border-radius:6px;white-space:nowrap;
}
.mast-nav a:hover{background:var(--surface-2);color:var(--ink)}
.mast-nav a.cta{
  background:var(--ink);color:var(--ground);font-weight:600;
}
.mast-nav a.cta:hover{background:var(--cedar);color:#fff}
/* The homeowner CTA. It carries .cta as well as .cta-green deliberately: the
   940px rule below hides every nav link that is NOT .cta, so a plain link here
   would disappear on a phone -- which is where most homeowners arrive. */
.mast-nav a.cta-green{background:var(--cedar);color:#fff}
.mast-nav a.cta-green:hover{background:var(--cedar-2);color:#fff}

@media (max-width:940px){
  .masthead-in{flex-wrap:wrap;gap:12px}
  .ysearch{order:3;flex-basis:100%;max-width:none}
  .mast-nav{margin-left:auto}
}
@media (max-width:560px){
  .ysearch{flex-wrap:wrap}
  .ysearch .fld + .fld{border-left:0;border-top:1px solid var(--line)}
  .ysearch .fld{flex-basis:100%}
  .ysearch .go{flex-basis:100%;padding:10px}
  .mast-nav a:not(.cta){display:none}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid transparent;border-radius:7px;padding:10px 16px;
  font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;
  background:var(--cedar);color:#fff;transition:background .13s,border-color .13s;
}
.btn:hover{background:var(--cedar-2)}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--ink-3)}
.btn.brass{background:var(--brass)}
.btn.brass:hover{background:var(--brass-2)}
.btn.sm{padding:7px 12px;font-size:12.5px}
.btn.block{width:100%}

/* ---------- stars (Yelp) ---------- */
.stars{display:inline-flex;gap:1.5px;vertical-align:middle}
.stars svg{width:15px;height:15px;display:block}
.stars.sm svg{width:12.5px;height:12.5px}
.stars.lg svg{width:19px;height:19px}
.stars .f{fill:var(--star)}
.stars .e{fill:var(--line-2)}

/* ---------- badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;padding:3px 8px;border-radius:20px;white-space:nowrap;
  border:1px solid var(--line-2);color:var(--ink-2);background:var(--surface);
}
.badge.award{
  background:linear-gradient(140deg,var(--brass-wash),var(--surface));
  border-color:var(--brass-2);color:var(--brass);
}
.badge.claimed{background:var(--cedar-wash);border-color:transparent;color:var(--cedar)}
.badge.enhanced{background:var(--surface-2);border-color:var(--line-2);color:var(--ink-2)}

/* Houzz-style award seal */
.awardseal{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--brass-2);border-radius:var(--r);
  background:linear-gradient(140deg,var(--brass-wash),var(--surface));
  padding:10px 13px;
}
.awardseal .ring{
  width:40px;height:40px;border-radius:50%;flex:none;
  border:2px solid var(--brass-2);display:grid;place-items:center;
  background:var(--surface);
}
.awardseal .ring svg{width:20px;height:20px;fill:var(--brass)}
.awardseal .t b{display:block;font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.2}
.awardseal .t span{font-size:11.5px;color:var(--ink-2)}

/* ---------- "photos" — CSS-drawn stand-ins, no external assets ---------- */
.photo{
  position:relative;overflow:hidden;background:var(--surface-2);
  border-radius:var(--r);isolation:isolate;
}
.photo::after{
  content:attr(data-cap);position:absolute;left:8px;bottom:7px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.82);text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.ph-roof{background:
  linear-gradient(170deg,#8FB0C4 0%,#B9CBD6 38%,#8FB0C4 38.5%,transparent 39%),
  linear-gradient(200deg,#4A5C66 39%,#3C4C55 62%,#33424A 62.5%),
  linear-gradient(#2E3A41,#2E3A41);}
.ph-int{background:
  linear-gradient(95deg,rgba(255,255,255,.5) 0 22%,transparent 22.4%),
  linear-gradient(175deg,#D8CBB6 0 44%,#C2B39B 44.4% 58%,#8C7B63 58.4%),
  linear-gradient(#B7A88F,#B7A88F);}
.ph-kitch{background:
  linear-gradient(90deg,transparent 0 58%,rgba(28,36,32,.42) 58.4% 63%,transparent 63.4%),
  linear-gradient(185deg,#E6E3DB 0 50%,#4E5B54 50.4% 64%,#CFC9BC 64.4%),
  linear-gradient(#D9D5CA,#D9D5CA);}
.ph-pipe{background:
  linear-gradient(120deg,rgba(255,255,255,.35) 0 30%,transparent 30.4%),
  linear-gradient(0deg,#5E6B72 0 34%,#7E8B91 34.4% 41%,#49555C 41.4%),
  linear-gradient(#68757C,#68757C);}
.ph-hvac{background:
  radial-gradient(circle at 62% 44%,#9AA8AE 0 14%,transparent 14.5%),
  linear-gradient(160deg,#C3CDD2 0 46%,#93A1A8 46.4%),
  linear-gradient(#A8B4BA,#A8B4BA);}
.ph-elec{background:
  linear-gradient(90deg,transparent 0 40%,rgba(201,134,14,.55) 40.4% 44%,transparent 44.4%),
  linear-gradient(200deg,#2F3A42 0 52%,#46535C 52.4%),
  linear-gradient(#39454D,#39454D);}
.ph-deck{background:
  repeating-linear-gradient(97deg,#B98E5E 0 9px,#A87F52 9px 18px),
  linear-gradient(#B98E5E,#B98E5E);}
.ph-yard{background:
  linear-gradient(175deg,#A8C6A0 0 42%,#7FA877 42.4% 66%,#5F8D5A 66.4%),
  linear-gradient(#7FA877,#7FA877);}
.ph-found{background:
  linear-gradient(178deg,#BFC4BD 0 38%,#8E958D 38.4% 52%,#6E756E 52.4%),
  linear-gradient(#8E958D,#8E958D);}
.ph-paint{background:
  linear-gradient(102deg,#DCD3C4 0 48%,#6E8FA8 48.4% 74%,#DCD3C4 74.4%),
  linear-gradient(#DCD3C4,#DCD3C4);}

/* ---------- home hero (Houzz: photo-forward) ---------- */
.hero{
  position:relative;border-bottom:1px solid var(--line);
  background:var(--surface);overflow:hidden;
}
.hero-in{
  max-width:var(--maxw);margin:0 auto;padding:52px 20px 46px;
  display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;
}
.hero h1{
  font-family:var(--serif);font-size:clamp(30px,4.3vw,49px);line-height:1.06;
  letter-spacing:-.025em;margin:0 0 16px;font-weight:600;
}
.hero h1 em{font-style:italic;color:var(--cedar)}
.hero .dek{font-size:16.5px;color:var(--ink-2);margin:0 0 24px;max-width:44ch;line-height:1.5}
/* The single Round Rock photo that replaced the five placeholder tiles
   (Kyle, 2026-10-01). The credit is REQUIRED: the photo is CC BY 2.0, and that
   licence is conditional on visible attribution -- deleting this figcaption
   turns a licensed use into an infringing one. */
.hero-photo{margin:0;position:relative}
.hero-photo .shot{
  display:block;width:100%;height:auto;border-radius:var(--r);
  object-fit:cover;aspect-ratio:16/10;
}
/* Top right, quarter width, on its own white panel (Kyle, 2026-10-01).
   The first attempt put it centred at 62% and it failed on the live page: the
   sky in this photograph is a narrow band, so a centred mark that size landed on
   the roofs. "IN CEDAR PARK" in dark green sat on dark brown shingles and was
   unreadable, and the logo's illustrated houses collided with the photographed
   ones.
   The panel is what makes it reliable rather than lucky: a drop shadow only
   works while whatever is behind the mark stays light, and nothing guarantees
   that if the photo is ever swapped. An opaque ground does.
   alt="" on purpose: the site name is the h1 immediately beside it. */
.hero-photo .mark{
  position:absolute;top:14px;right:14px;
  width:30%;height:auto;max-width:180px;   /* +20%, Kyle 2026-10-02 */
  background:rgba(255,255,255,.93);
  padding:8px 10px;border-radius:8px;
  box-shadow:0 1px 6px rgba(0,0,0,.18);
  pointer-events:none;
}
@media (max-width:900px){ .hero-photo .mark{width:34%;top:10px;right:10px} }
.hero-photo figcaption{
  margin-top:6px;font-size:10.5px;color:var(--ink-3);letter-spacing:.01em;
}
.hero-photo figcaption a{color:inherit;text-decoration:underline}

.hero-mosaic{
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:104px;gap:9px;
}
.hero-mosaic .photo:nth-child(1){grid-column:span 2;grid-row:span 2}
.hero-mosaic .photo:nth-child(4){grid-column:span 2}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:30px;padding-top:36px}
  .hero-mosaic{grid-auto-rows:84px}
}

.standard-strip{
  /* auto-fit, not a fixed 4: the "$0 to be listed" stat was removed on
     2026-10-01 and a hardcoded column count leaves an empty cell whenever the
     number of stats changes.
     The 140px minimum is load-bearing. minmax(0,1fr) with auto-fit generates an
     unbounded run of zero-width tracks -- the computed value came back as three
     real columns followed by hundreds of 0px ones. It happened to render fine
     because browsers collapse gaps on empty tracks, which is luck, not design.
     A real minimum also makes the old 620px override unnecessary: the strip now
     wraps to two columns on a narrow screen on its own. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin-top:26px;
}
.standard-strip .s{background:var(--surface);padding:13px 14px}
.standard-strip .k{display:block;font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.1;color:var(--cedar)}
.standard-strip .l{font-size:11.5px;color:var(--ink-3);line-height:1.3}


/* ---------- sections ---------- */
.sec{padding:46px 0;border-bottom:1px solid var(--line)}
.sec:last-of-type{border-bottom:0}
.sec h2{
  font-family:var(--serif);font-size:clamp(23px,2.8vw,31px);letter-spacing:-.018em;
  margin:0 0 7px;font-weight:600;line-height:1.15;
}
.sec .sub{color:var(--ink-2);margin:0 0 24px;max-width:62ch;font-size:14.5px}

/* Houzz-style category tiles */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}
.cat{
  display:block;text-decoration:none;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);overflow:hidden;box-shadow:var(--shadow-1);
  transition:box-shadow .15s,transform .15s,border-color .15s;
}
.cat:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);border-color:var(--line-2)}
.cat .photo{height:96px;border-radius:0}
.cat .t{padding:11px 13px 13px}
.cat .t b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.008em}
.cat .t span{font-size:12px;color:var(--ink-3);font-family:var(--mono)}
.cat.locked{opacity:.78}          /* dimmed, but it IS a link now -- not disabled */
.cat.locked:hover{opacity:1}
.cat.locked .t span{color:var(--crit)}

/* ---------- directory (Yelp: rail + list) ---------- */
.dirhead{padding:26px 0 18px;border-bottom:1px solid var(--line)}
.crumb{font-size:12px;color:var(--ink-3);margin-bottom:8px}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--cedar);text-decoration:underline}
.dirhead h1{
  font-family:var(--serif);font-size:clamp(26px,3.4vw,37px);letter-spacing:-.022em;
  margin:0 0 8px;font-weight:600;line-height:1.12;
}
.dirhead .sub{color:var(--ink-2);margin:0;max-width:72ch;font-size:14.5px}

.dirgrid{display:grid;grid-template-columns:224px 1fr;gap:30px;padding:22px 0 46px;align-items:start}
@media (max-width:920px){.dirgrid{grid-template-columns:1fr;gap:18px}}

/* Yelp filter rail */
.rail{position:sticky;top:78px}
@media (max-width:920px){.rail{position:static}}
.rail h3{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 9px;font-weight:600;
}
.railgrp{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.railgrp:last-child{border-bottom:0;margin-bottom:0}
.fopt{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;font-size:13.5px;color:var(--ink-2)}
.fopt:hover{color:var(--ink)}
.fopt input{accent-color:var(--cedar);width:15px;height:15px;margin:0;flex:none;cursor:pointer}
.fopt .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}

.listhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rescount{font-size:13px;color:var(--ink-2)}
.rescount b{color:var(--ink)}
.sortwrap{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3)}
.sortwrap select{
  font:inherit;font-size:12.5px;padding:6px 9px;border:1px solid var(--line-2);
  border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer;
}

/* Yelp/Houzz hybrid business card */
.biz{
  display:grid;grid-template-columns:184px 1fr auto;gap:18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;margin-bottom:13px;box-shadow:var(--shadow-1);
  transition:box-shadow .15s,border-color .15s;
}
.biz:hover{box-shadow:var(--shadow-2);border-color:var(--line-2)}
.biz .shot{height:132px;position:relative}
.biz .shot .rk{
  position:absolute;top:8px;left:8px;z-index:2;
  background:rgba(21,32,27,.86);color:#fff;backdrop-filter:blur(3px);
  font-family:var(--mono);font-size:11px;font-weight:600;
  width:26px;height:26px;border-radius:6px;display:grid;place-items:center;
}
.biz .nm{margin:0 0 5px;font-size:18.5px;font-weight:600;letter-spacing:-.014em;line-height:1.25}
.biz .nm a{text-decoration:none}
.biz .nm a:hover{color:var(--cedar);text-decoration:underline}
.biz .badges{display:inline-flex;gap:6px;flex-wrap:wrap;vertical-align:2px;margin-left:2px}
.biz .ratingrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.biz .ratingrow .num{font-size:14px;font-weight:700}
.biz .ratingrow .src{font-size:12.5px;color:var(--ink-3)}
.biz .meta{font-size:12.5px;color:var(--ink-3);margin-bottom:7px}
.biz .meta .dot{margin:0 5px;opacity:.5}
.biz .blurb{font-size:13.5px;color:var(--ink-2);margin:0 0 9px;line-height:1.5}
.biz .tags{display:flex;gap:6px;flex-wrap:wrap}
.biz .tag{
  font-size:11.5px;color:var(--ink-2);background:var(--surface-2);
  border-radius:20px;padding:3px 9px;
}
/* The claimed tag has to read as a STATUS, not as one more grey chip beside the
   phone number -- on a card the eye skims, identical styling makes "Claimed" and
   "Not claimed" look like the same thing said two ways. Deliberately not the
   brass used for merit badges: claiming is free and says nothing about quality,
   so it must not borrow the visual weight of an earned award. */
.biz .tag.claimed{
  color:var(--cedar);background:color-mix(in srgb, var(--cedar) 10%, transparent);
  font-weight:600;
}
@supports not (color: color-mix(in srgb, red 10%, transparent)){
  .biz .tag.claimed{background:var(--surface-2)}
}
.biz .side{display:flex;flex-direction:column;gap:7px;justify-content:center;min-width:132px}
@media (max-width:760px){
  .biz{grid-template-columns:1fr;gap:13px}
  .biz .shot{height:150px}
  .biz .side{min-width:0}
  .biz .side .btn{flex:1}
  .biz .side{flex-direction:row}
}

.emptystate{
  background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r-lg);
  padding:34px 22px;text-align:center;color:var(--ink-2);
}
.emptystate b{display:block;font-size:16px;color:var(--ink);margin-bottom:5px;font-family:var(--serif)}

/* fake map panel (Yelp) */
.mappanel{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--surface);margin-bottom:18px;
}
.mapface{
  height:148px;position:relative;
  background:
    repeating-linear-gradient(0deg,transparent 0 27px,var(--line) 27px 28px),
    repeating-linear-gradient(90deg,transparent 0 38px,var(--line) 38px 39px),
    linear-gradient(150deg,var(--cedar-wash),var(--surface-2));
}
.mapface .pin{
  position:absolute;width:19px;height:19px;border-radius:50% 50% 50% 2px;
  background:var(--cedar);transform:rotate(-45deg);border:2px solid var(--surface);
  box-shadow:var(--shadow-1);
}
.mapface .pin.hot{background:var(--brass)}
.mappanel .mcap{padding:9px 12px;font-size:12px;color:var(--ink-3);border-top:1px solid var(--line)}

/* ---------- profile (Houzz gallery + sidebar) ---------- */
.profhead{padding:24px 0 0}
.gallery{
  display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:112px;gap:8px;margin:16px 0 24px;
}
.gallery .photo:first-child{grid-row:span 2}
@media (max-width:700px){
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:92px}
  .gallery .photo:first-child{grid-column:span 2;grid-row:span 1}
}
.profgrid{display:grid;grid-template-columns:1fr 316px;gap:34px;padding-bottom:48px;align-items:start}
@media (max-width:900px){.profgrid{grid-template-columns:1fr;gap:24px}}

.proftitle{font-family:var(--serif);font-size:clamp(27px,3.6vw,39px);letter-spacing:-.024em;margin:0 0 10px;font-weight:600;line-height:1.1}
.profbadges{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}

/* the two-number rule — the whole point */
.tworate{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:20px 0;
}
@media (max-width:520px){.tworate{grid-template-columns:1fr}}
.tworate .cell{background:var(--surface);padding:15px 17px}
.tworate .lbl{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:7px;display:block;
}
.tworate .big{font-family:var(--serif);font-size:33px;font-weight:600;line-height:1;letter-spacing:-.02em}
.tworate .row{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.tworate .cnt{font-size:12.5px;color:var(--ink-3)}
.tworate .cell.ours{background:var(--cedar-wash)}
.ratenote{
  font-size:12.5px;color:var(--ink-2);background:var(--surface-2);
  border-left:2px solid var(--line-2);padding:10px 13px;border-radius:0 6px 6px 0;margin:-6px 0 22px;
}

.profsec{padding:22px 0;border-top:1px solid var(--line)}
.profsec h2{font-family:var(--serif);font-size:21px;margin:0 0 11px;font-weight:600;letter-spacing:-.015em}
.profsec p{color:var(--ink-2);margin:0 0 11px;font-size:14.5px}
.servicelist{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0}
.servicelist li{background:var(--surface-2);border-radius:6px;padding:6px 11px;font-size:13px;color:var(--ink-2)}

.review{border-top:1px solid var(--line);padding:15px 0}
.review:first-of-type{border-top:0}
.review .rhead{display:flex;align-items:center;gap:9px;margin-bottom:6px;flex-wrap:wrap}
.review .who{font-weight:600;font-size:13.5px}
.review .when{font-size:12px;color:var(--ink-3);font-family:var(--mono)}
.review p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.55}

.sidecard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:17px;box-shadow:var(--shadow-2);
}
/* STICKY BELONGS ON THE WRAPPER, NOT THE CARD (fixed 2026-09-14).
   .sidecard used to be sticky itself. A pinned sticky element still occupies its normal
   flow space, so its FOLLOWING SIBLINGS scroll up underneath it -- and because the card
   has an opaque background and a shadow, it painted straight over the award seal and the
   disclosure box below it. The bug was invisible while only rank-1 pages rendered a seal;
   showing a seal on all 59 badged pages made it obvious. Sticking the whole column moves
   card, seal and disclosure together, so nothing can overlap. max-height keeps the bottom
   of a tall sidebar reachable instead of pinning it off-screen. */
.profgrid aside{position:sticky;top:78px;align-self:start;
  max-height:calc(100vh - 90px);overflow-y:auto;overscroll-behavior:contain}
@media (max-width:900px){
  .profgrid aside{position:static;max-height:none;overflow:visible}
}
.sidecard .btn{margin-bottom:8px}
.factrow{display:flex;gap:11px;padding:9px 0;border-top:1px solid var(--line);font-size:13px}
.factrow:first-of-type{border-top:0}
.factrow .fk{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);width:66px;flex:none;padding-top:2px;font-weight:600;
}
.factrow .fv{color:var(--ink-2)}
.factrow .fv a{color:var(--cedar)}

/* ---------- pricing ---------- */
/* Three tiers as of 2026-09-15 (was two). repeat(3,1fr) at full width, two up
   on tablets so the cards never get narrower than their price, one on phones. */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0}
@media (max-width:980px){.plans{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.plans{grid-template-columns:1fr}}

/* Monthly/yearly switch. Radios, not buttons: it works with no JS, it is
   keyboard-navigable for free, and screen readers announce it as a group. */
.billtoggle{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);
  border-radius:24px;background:var(--surface-2);margin:2px 0 4px}
.billtoggle label{position:relative;font-size:13px;padding:6px 15px;border-radius:20px;
  cursor:pointer;color:var(--ink-2);white-space:nowrap}
.billtoggle input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.billtoggle label:has(input:checked){background:var(--paper,#fff);color:var(--ink);
  box-shadow:var(--shadow-1);font-weight:600}
.billtoggle label:has(input:focus-visible){outline:2px solid var(--cedar);outline-offset:1px}
.savenote{font-size:12.5px;color:var(--ink-3);margin:7px 0 0}
.plan{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;position:relative;box-shadow:var(--shadow-1);
}
.plan.feat{border-color:var(--cedar);box-shadow:var(--shadow-2)}
.plan .flag{
  position:absolute;top:-10px;left:24px;background:var(--cedar);color:#fff;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;font-weight:600;
}
.plan h3{font-family:var(--serif);font-size:21px;margin:0 0 3px;font-weight:600}
.plan .price{font-family:var(--serif);font-size:42px;font-weight:600;line-height:1.05;letter-spacing:-.026em}
.plan .per{font-size:13px;color:var(--ink-3);margin-bottom:17px}
.plan ul{list-style:none;padding:0;margin:0 0 19px}
.plan li{display:flex;gap:9px;padding:6px 0;font-size:13.5px;color:var(--ink-2);align-items:flex-start}
.plan li svg{width:15px;height:15px;flex:none;margin-top:3px;fill:var(--cedar)}
.plan .fine{font-size:12px;color:var(--ink-3);margin-top:11px;line-height:1.45}

/* ---------- method steps ---------- */
.step{display:grid;grid-template-columns:38px 1fr;gap:15px;padding:17px 0;border-top:1px solid var(--line)}
.step:first-of-type{border-top:0}
.step .n{
  width:38px;height:38px;border-radius:50%;background:var(--cedar-wash);color:var(--cedar);
  display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:14px;
}
.step h3{margin:0 0 5px;font-size:16.5px;font-weight:600;letter-spacing:-.012em}
.step p{margin:0;color:var(--ink-2);font-size:14px}
.step .why{
  display:block;margin-top:7px;font-size:12.5px;color:var(--ink-3);
  border-left:2px solid var(--line-2);padding-left:11px;
}

/* ---------- faq (static, per standard) ---------- */
.faq h2{font-family:var(--serif);font-size:19px;margin:24px 0 7px;font-weight:600;letter-spacing:-.012em}
.faq p{color:var(--ink-2);margin:0;font-size:14.5px;max-width:74ch}

/* ---------- disclosure + footer ---------- */
.disclosure{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 16px;font-size:12.5px;color:var(--ink-2);line-height:1.5;
}
.disclosure b{color:var(--ink)}
.sitefoot{
  border-top:1px solid var(--line);background:var(--surface);
  padding:30px 0;margin-top:0;font-size:18.75px;color:var(--ink-3);   /* 12.5 +50%, Kyle 2026-10-02 */
}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px;margin-bottom:22px}
@media (max-width:760px){.footgrid{grid-template-columns:1fr 1fr;gap:20px}}
/* The column headings set their own size, so they do NOT inherit the footer's and
   had to be scaled with it -- left alone they would have stayed 10px while every
   line beneath them grew by half. */
.footgrid h4{
  font-family:var(--mono);font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 9px;font-weight:600;
}
.footgrid a{display:block;color:var(--ink-3);text-decoration:none;padding:3px 0}
.footgrid a:hover{color:var(--cedar)}
.footbase{border-top:1px solid var(--line);padding-top:16px;line-height:1.6}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--cedar);color:#fff;padding:9px 14px;border-radius:6px;z-index:200}

/* ---------- trade landing pages (/contractors/<trade>/) ---------- */
.tradelayout{display:grid;grid-template-columns:1fr 316px;gap:34px;padding:4px 0 48px;align-items:start}
@media (max-width:900px){.tradelayout{grid-template-columns:1fr;gap:24px}}
.tradelayout .biz:first-of-type{border-top:1px solid var(--line)}

/* Full-sentence guidance — not the .servicelist chip row. */
.checklist{list-style:none;padding:0;margin:0}
.checklist li{position:relative;padding:9px 0 9px 26px;font-size:14.5px;color:var(--ink-2);
  border-top:1px solid var(--line);line-height:1.55}
.checklist li:first-child{border-top:0}
.checklist li::before{content:"";position:absolute;left:6px;top:16px;width:7px;height:7px;
  border-radius:50%;background:var(--cedar)}

/* FAQ — question is a real heading, answer a plain paragraph. No accordions, by standard. */
.faq-q{font-family:var(--serif);font-size:16.5px;font-weight:600;letter-spacing:-.01em;
  margin:18px 0 7px;color:var(--ink);line-height:1.3}
.faq-q:first-of-type{margin-top:4px}
.faq-a{color:var(--ink-2);font-size:14.5px;margin:0;line-height:1.62}

.tradelinks{display:flex;flex-wrap:wrap;gap:7px;margin:0}
.tradelinks a{background:var(--surface-2);border:1px solid var(--line-2);border-radius:6px;
  padding:6px 11px;font-size:13px;color:var(--ink-2);text-decoration:none;transition:.14s}
.tradelinks a:hover{border-color:var(--cedar);color:var(--cedar)}

/* ---------- sibling links on business pages ---------- */
.siblist{list-style:none;padding:0;margin:0}
.siblist li{border-top:1px solid var(--line);padding:10px 0;display:flex;
  align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.siblist li:first-child{border-top:0}
.siblist li>a{font-size:14.5px;color:var(--ink);text-decoration:none;font-weight:500}
.siblist li>a:hover{color:var(--cedar);text-decoration:underline}
.sibmeta{font-size:12.5px;color:var(--ink-3);font-family:var(--mono,inherit);white-space:nowrap}

/* ---------- claim / upgrade form (get-listed) ---------- */
.claimform{
  margin:34px 0 8px;padding:26px 26px 24px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);
  scroll-margin-top:96px;
}
.claimform h3{font-family:var(--serif);font-size:23px;font-weight:600;margin:0 0 6px}
.claimform .lede{color:var(--ink-2);font-size:14.5px;line-height:1.55;margin:0 0 18px;max-width:60ch}
.claimform .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.claimform .grid{grid-template-columns:1fr}}
.claimform .row{display:flex;flex-direction:column;gap:5px}
.claimform .row.wide{grid-column:1/-1}
.claimform .row label{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.claimform input,.claimform textarea{
  font:inherit;font-size:14.5px;color:var(--ink);background:var(--ground);
  border:1px solid var(--line-2);border-radius:7px;padding:10px 12px;width:100%;
}
.claimform textarea{min-height:88px;resize:vertical}
.claimform input:focus,.claimform textarea:focus{outline:2px solid var(--cedar-2);outline-offset:1px;border-color:var(--cedar-2)}
.claimform .picks{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.claimform .pick{
  display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line-2);
  border-radius:7px;background:var(--ground);cursor:pointer;font-size:14px;font-weight:500;
}
.claimform .pick input{width:auto;padding:0}
.claimform .pick.on{border-color:var(--cedar);background:var(--cedar-wash);color:var(--ink)}
.claimform .foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.claimform .note{font-size:12.5px;color:var(--ink-3);line-height:1.5;max-width:46ch}
.claimform .msg{margin-top:14px;font-size:14px;line-height:1.55;padding:12px 14px;border-radius:7px;display:none}
.claimform .msg.err{display:block;background:#fdeeeb;border:1px solid #e6bdb4;color:var(--crit)}
.claimform .msg.ok{display:block;background:var(--cedar-wash);border:1px solid var(--cedar-2);color:var(--cedar)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .claimform .msg.err{background:#2a1815;border-color:#5c322a;color:#e8a598}
}
.claimform button[disabled]{opacity:.55;cursor:progress}

.claimform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- tiered listings: enhanced (paid) profile blocks ------------------- */
.suppliedby{font-size:12.5px;color:var(--ink-3);margin:0 0 12px;
  border-left:2px solid var(--brass);padding-left:9px;line-height:1.55}
.badge.claimed{background:var(--brass-10,rgba(176,137,72,.14));
  border-color:var(--brass);color:var(--brass-ink,#6b4f1d)}

.socialrow{display:flex;flex-wrap:wrap;gap:8px}
.soclink{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;
  border:1px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:500;
  color:var(--ink-2);text-decoration:none;background:var(--paper);transition:.15s}
.soclink:hover{border-color:var(--cedar);color:var(--cedar)}

.photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.pcell{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper-2)}
.pcell img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

.svclist{display:grid;gap:12px}
.svc{border:1px solid var(--line);border-left:3px solid var(--cedar);
  border-radius:8px;padding:13px 15px;background:var(--paper)}
.svc h3{margin:0 0 5px;font-size:15.5px;font-weight:600;font-family:var(--sans,inherit)}
.svc p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.6}

@media (max-width:640px){
  .photogrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .socialrow{gap:6px}
  .soclink{padding:6px 11px;font-size:13px}
}
.claimform textarea{width:100%;font:inherit;font-size:14px;padding:9px 11px;
  border:1px solid var(--line);border-radius:7px;background:var(--paper);
  color:var(--ink);resize:vertical;min-height:64px}
.claimform textarea:focus{outline:2px solid var(--cedar);outline-offset:-1px;border-color:var(--cedar)}
.claimform .hint{font-size:12px;color:var(--ink-3);margin:6px 0 0;line-height:1.5}
/* .claimform .row sets display:flex, which outranks the UA [hidden]{display:none}
   rule -- without this the enhanced-only fields show on the free plan. */
.claimform .row[hidden]{display:none}

/* ---------- TIER 1 BADGES (added 2026-09-14) ----------
   Two surfaces, two rules, per the badge program design:
   .badgerow  -- on listing cards. SCARCE: capped at 3 by the generator, denominators KEPT.
   .badgewall -- on the business's own page. The full earned set, each with its denominator
                 and the sentence explaining what it was measured against.
   The embed a contractor puts on their own site drops denominators; that copy lives in
   /badge/ and is deliberately NOT styled by these rules (it must survive on a foreign page). */
.badgerow{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0}
.badgerow .badge{font-size:9.5px;padding:2.5px 7px}
.badge.merit{background:var(--brass-wash);border-color:var(--brass-2);color:var(--brass)}
.badge.vol{background:var(--cedar-wash);border-color:transparent;color:var(--cedar)}
.badge.avail{background:var(--surface-2);border-color:var(--line-2);color:var(--ink-2)}
.badge.loc{background:transparent;border-color:var(--line-2);color:var(--ink-3)}
/* state licence: the only badge sourced from outside Google, so it gets its own
   weight -- solid cedar border rather than .vol's transparent one. */
.badge.lic{background:var(--cedar-wash);border-color:var(--cedar-2);color:var(--cedar);font-weight:700}
/* the licence disclaimer on trade pages: quieter than the lede it follows, and the
   inline .badge sample inside it must not inherit the paragraph's line-height. */
.licnote{margin-top:14px;font-size:13px;color:var(--ink-3);max-width:62ch;line-height:1.6}
.licnote .badge{font-size:9.5px;padding:2px 6px;vertical-align:middle;margin:0 2px}

.badgewall{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.badgewall li{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--surface);
}
.badgewall .ico{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--brass-2);background:var(--brass-wash);
}
.badgewall .ico svg{width:13px;height:13px;fill:var(--brass);display:block}
.badgewall b{display:block;font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.25}
.badgewall span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.5}
.badgenote{font-size:12.5px;color:var(--ink-3);margin:12px 0 0;line-height:1.6}

/* ---------- /badge/ embed builder ---------- */
.embedgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:820px){.embedgrid{grid-template-columns:1fr}}
.embedbox{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:16px}
.embedbox h3{margin:0 0 8px;font-family:var(--serif);font-size:17px;font-weight:600}
.embedbox textarea{
  width:100%;min-height:150px;font-family:var(--mono);font-size:11.5px;line-height:1.6;
  border:1px solid var(--line-2);border-radius:var(--r);padding:10px;background:var(--ground);
  color:var(--ink);resize:vertical;box-sizing:border-box;
}
.embedpick{width:100%;padding:9px 10px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:14px;margin-bottom:10px}
.preview{border:1px dashed var(--line-2);border-radius:var(--r);padding:14px;background:var(--ground);
  display:grid;place-items:center;min-height:150px}
/* Defensive, per the hidden-attribute footgun logged on 2026-09-13: the UA rule
   [hidden]{display:none} is silently defeated by ANY author rule that sets display on the
   same element. Nothing sets display on .embedpick today, but this makes that safe to change. */
.embedpick[hidden]{display:none}

/* ---- tier-1 gate -------------------------------------------------------
   A free listing shows its phone and website as PLAIN TEXT; only the link is
   sold (tiers.py). .nolink must read as ordinary information, NOT as a broken
   or disabled link -- no underline, no pointer, no muted "unavailable" look,
   because the information genuinely is available. user-select stays on so a
   visitor can still copy the number. */
.nolink{color:inherit;text-decoration:none;cursor:text}
/* A tier-1 payer's number IS a link here; give it real affordance. .biz .tag
   carries no border, so hover has to move colour, not border-colour. */
a.tag{text-decoration:none}
a.tag:hover,a.tag:focus-visible{color:var(--brass);background:var(--surface-3,var(--surface-2))}

/* ---- LISTING LOGOS -------------------------------------------------------
   Scraped from each contractor's OWN site, so they arrive in every shape and on
   every background: wide wordmarks, square icons, transparent PNGs, white-on-
   white SVGs. object-fit:contain + padding is what stops a 512x112 wordmark
   being cropped to nothing inside a square tile. The white ground is deliberate
   -- a transparent logo drawn in dark ink vanishes on the dark surface-2 tile. */
.photo .logoimg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:14px;background:#fff;
}
.photo:has(.logoimg)::after{content:none}   /* no "No photo yet" over a real logo */
.photo .logoimg + .rk{z-index:2}

.titlerow{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.titlerow .proftitle{margin:0}
.titlerow .logoimg{
  flex:0 0 auto;width:60px;height:60px;object-fit:contain;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;
}
@media(max-width:560px){
  .titlerow{gap:10px}
  .titlerow .logoimg{width:46px;height:46px}
}

/* A logo drawn in WHITE (built for a dark site header) is invisible on the white
   tile above. These are the business's REAL logo, so we change our background
   rather than throw their mark away. Flagged by hand in data/logo_overrides.py --
   automatic light/dark detection was tried and misfired in both directions. */
.photo .logoimg.logodark,
.titlerow .logoimg.logodark{background:#1f2937}

/* ---- TRADE ICONS on the homepage category tiles -------------------------
   Kyle's artwork, 4 of 10 trades (2026-09-16). The .ph-* classes paint an
   abstract CSS gradient as a stand-in; where a real icon exists we cover that
   and drop the "Sample" caption, so an iconned tile never reads as a mockup.
   Higher specificity than .ph-* on purpose — the placeholder must lose. */
.cat .photo.tradeicon{
  background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
}
.cat .photo.tradeicon::after{content:none}
.cat .photo.tradeicon img{
  width:auto;height:78px;max-width:88%;object-fit:contain;
}