/* Hammer & Pixel, trade and trade-by-town pages.
   Loaded after style.css and quote.css on every page under websites-for/.
   Self-contained on purpose: nothing here relies on inner.css, and it never
   overwrites a token that style.css owns. Warm off white ground, dark header
   band, yellow used sparingly. British English. No long dashes in this file. */

:root{
  --ground:#f3f3f1;
  --ground-2:#eceae6;
  --card:#fcfcfb;
  --i-ink:#181818;
  --i-ink-2:#54524e;
  --i-ink-3:#67635d;
  --i-hair:rgba(24,24,24,.12);
  --i-hair-soft:rgba(24,24,24,.07);
  --i-accent-text:#8a5200;      /* yellow family, dark enough for AA on paper */
  --i-accent-soft:rgba(245,200,66,.18);
  --r:14px;
  --r-sm:10px;
}

body.trade-page{background:var(--ground);color:var(--i-ink)}
/* style.css already sets a{color:inherit}. Repeating it here with a body class
   would outrank every accent link below, so it is deliberately not repeated. */
body.trade-page a:focus-visible,
body.trade-page button:focus-visible{outline:2px solid var(--i-accent-text);outline-offset:3px}

/* ---------- light fixed nav ---------- */
.nav-light{
  background:linear-gradient(to bottom,rgba(243,243,241,.94),rgba(243,243,241,.72));
  color:var(--i-ink);
}
.nav-light.scrolled{
  background:rgba(252,252,251,.94);
  border-bottom:1px solid var(--i-hair-soft);
}
.nav-light .brand{color:var(--i-ink)}
.nav-light .nav-links a{color:var(--i-ink-2)}
.nav-light .nav-links a:hover{color:var(--i-ink)}
.nav-light .nav-toggle span{background:var(--i-ink)}
.pill-contact{background:var(--accent);color:#141004;border-color:transparent}
.pill-contact:hover{background:var(--accent-deep)}
.pill-contact .arrow{background:#141004;color:var(--accent)}

/* ---------- dark page header band ---------- */
.phead{
  background:var(--page);
  color:var(--ink);
  padding-block:clamp(6.5rem,15vh,9rem) clamp(2.6rem,7vh,4rem);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.phead .eyebrow-pill{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.74rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
  color:#f1f1f1;background:rgba(255,255,255,.06);
  border:1px solid var(--hair);border-radius:999px;padding:.44rem .9rem;
}
.phead .eyebrow-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.phead h1{
  margin-top:1.1rem;
  font-size:clamp(32px,5.2vw,62px);
  font-weight:800;letter-spacing:-.03em;line-height:1.05;
  max-width:19ch;
}
.phead h1 .acc{color:var(--accent)}
.phead .phead-line{
  margin-top:1rem;max-width:60ch;color:#e2e2e2;
  font-size:clamp(1rem,.96rem + .3vw,1.16rem);line-height:1.55;
}
.phead .phead-crumb{margin-top:1.3rem;font-size:.88rem}
.phead .phead-crumb a{
  color:var(--accent);font-weight:640;
  border-bottom:1px solid rgba(245,200,66,.35);
}
.phead .phead-crumb a:hover{border-bottom-color:var(--accent)}
.phead a:focus-visible{outline-color:var(--accent)}

/* ---------- warm bands ---------- */
.band{background:var(--ground);padding-block:clamp(2.8rem,8vh,5rem)}
.band-alt{background:var(--ground-2)}
.band + .band{border-top:1px solid var(--i-hair-soft)}

.sec-head{max-width:66ch}
.sec-head .kicker{
  font-size:.74rem;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--i-ink-3);
}
.band h2{
  margin-top:.6rem;
  font-size:clamp(1.55rem,1.2rem + 2vw,2.4rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.1;
}
.band h3{font-size:clamp(1.08rem,1.02rem + .5vw,1.3rem);font-weight:750;letter-spacing:-.02em;line-height:1.25}
.band p{max-width:66ch;color:var(--i-ink-2);line-height:1.62}
.band .lede{margin-top:.9rem;font-size:clamp(1.02rem,.98rem + .35vw,1.18rem);color:var(--i-ink-2);line-height:1.6}

.tlink{color:var(--i-accent-text);font-weight:640;border-bottom:1px solid var(--i-accent-soft)}
.tlink:hover{border-bottom-color:var(--i-accent-text)}
.micro{margin-top:1.2rem;font-size:.9rem;color:var(--i-ink-3);max-width:66ch}
.micro a{color:var(--i-accent-text);font-weight:640}

/* ---------- buttons on the warm ground ---------- */
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.5rem}
.tbtn{
  display:inline-flex;align-items:center;gap:.55rem;min-height:46px;
  font:650 1rem/1 var(--font);padding:.85rem 1.35rem;border-radius:999px;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease);
}
.tbtn:active{transform:scale(.98)}
.tbtn svg{width:18px;height:18px;flex:none}
.tbtn-accent{background:var(--accent);color:#141004}
.tbtn-accent:hover{background:var(--accent-deep)}
.tbtn-ink{background:var(--i-ink);color:#fff}
.tbtn-ink:hover{background:#000}
.tbtn-ghost{background:transparent;color:var(--i-ink);border-color:var(--i-hair)}
.tbtn-ghost:hover{border-color:var(--i-ink)}
.tbtn-onblack{color:#fff;border-color:rgba(255,255,255,.3)}
.tbtn-onblack:hover{border-color:#fff;background:rgba(255,255,255,.06)}

/* ---------- cards ---------- */
.cards-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.7rem}
.cards-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.7rem}
.tcard{
  background:var(--card);border:1px solid var(--i-hair);border-radius:var(--r);
  padding:1.3rem 1.3rem 1.4rem;
}
.tcard .n{
  display:inline-block;font-size:.78rem;font-weight:750;letter-spacing:.1em;
  color:var(--i-accent-text);margin-bottom:.7rem;
}
.tcard h3{margin-bottom:.5rem}
.tcard p{font-size:.95rem;color:var(--i-ink-2)}

/* ---------- tick list ---------- */
.checks{display:grid;gap:.8rem;margin-top:1.4rem;max-width:60ch}
.checks li{display:flex;gap:.7rem;align-items:flex-start;color:var(--i-ink-2);line-height:1.55}
.checks svg{width:19px;height:19px;flex:none;margin-top:.2rem;color:var(--i-accent-text)}

/* ---------- demo card ---------- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-top:1.7rem}
.shot-link{display:block;min-width:0}
.shot{
  border:1px solid var(--i-hair);border-radius:var(--r);overflow:hidden;background:var(--card);
  box-shadow:0 22px 48px -32px rgba(0,0,0,.45);
  transition:border-color .2s,transform .3s var(--ease);
}
.shot-link:hover .shot{border-color:var(--i-ink);transform:translateY(-3px)}
.shot-bar{
  display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;
  background:var(--ground-2);border-bottom:1px solid var(--i-hair-soft);
}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--i-hair);flex:none}
.shot-bar span{
  margin-left:.6rem;font-size:.76rem;color:var(--i-ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.shot img{width:100%;height:auto}
.shot-body{padding:clamp(1.4rem,4vw,2.4rem) 1.3rem;display:grid;gap:.5rem;justify-items:start}
.shot-name{font-size:clamp(1.15rem,1.05rem + .7vw,1.5rem);font-weight:800;letter-spacing:-.02em;color:var(--i-ink);line-height:1.15}
.shot-sub{font-size:.93rem;color:var(--i-ink-2);max-width:40ch}
.shot-go{margin-top:.5rem;color:var(--i-accent-text);font-weight:700;font-size:.95rem}

.tag-live{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.75rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--i-accent-text);
  background:var(--i-accent-soft);border-radius:999px;padding:.4rem .8rem;margin-bottom:.8rem;
}
.tag-live .dot{width:7px;height:7px;border-radius:50%;background:var(--i-accent-text);flex:none}

.client-quote{margin-top:1.5rem;border-left:3px solid var(--accent);padding-left:1.1rem;max-width:52ch}
.client-quote blockquote p{font-size:clamp(1.02rem,.98rem + .45vw,1.2rem);color:var(--i-ink);line-height:1.45}
.client-quote figcaption{margin-top:.6rem;font-size:.9rem;color:var(--i-ink-3)}
.client-quote figcaption strong{color:var(--i-ink);font-weight:700}

/* ---------- the quote tool band (dark, as on the homepage) ---------- */
body.trade-page .quote{color:var(--ink)}
body.trade-page .quote h2{color:#fff;max-width:20ch}
body.trade-page .quote .quote-card{margin-inline:auto}
body.trade-page .quote a:focus-visible,
body.trade-page .quote button:focus-visible{outline-color:var(--accent)}
body.trade-page .quote .quote-card a:focus-visible,
body.trade-page .quote .quote-card button:focus-visible{outline-color:#8a5200}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.9rem;margin-top:1.7rem;max-width:80ch}
.faq-row{background:var(--card);border:1px solid var(--i-hair);border-radius:var(--r);padding:1.2rem 1.3rem 1.3rem}
.faq-row h3{margin-bottom:.5rem}
.faq-row p{font-size:.95rem;color:var(--i-ink-2);max-width:72ch}

/* ---------- town and trade lists ---------- */
.town-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:1.7rem}
.town-list a{
  display:flex;align-items:center;min-height:52px;
  background:var(--card);border:1px solid var(--i-hair);border-radius:var(--r-sm);
  padding:.75rem 1rem;font-weight:640;font-size:.96rem;line-height:1.35;
  transition:border-color .2s,background .2s;
}
.town-list a:hover{border-color:var(--i-ink)}
/* The "What is included" row is four items, so it gets four columns on a wide
   screen rather than leaving one card on its own. The media queries below
   still drop it to two and then one. */
.town-list-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.trade-list{display:grid;gap:.7rem;margin-top:1.7rem}
.trade-row{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto;
  gap:.6rem 1.5rem;align-items:center;
  background:var(--card);border:1px solid var(--i-hair);border-radius:var(--r);
  padding:1.15rem 1.3rem;transition:border-color .2s,transform .2s var(--ease);
}
.trade-row:hover{border-color:var(--i-ink);transform:translateY(-2px)}
.trade-row-name{font-weight:780;font-size:1.08rem;letter-spacing:-.02em;color:var(--i-ink)}
.trade-row-line{font-size:.94rem;color:var(--i-ink-2);line-height:1.5}
.trade-row-go{display:inline-flex;align-items:center;gap:.4rem;color:var(--i-accent-text);font-weight:700;font-size:.92rem;white-space:nowrap}

/* ---------- closing band ---------- */
.closer{background:var(--page);color:var(--ink);padding-block:clamp(3rem,9vh,5rem);text-align:center}
.closer h2{font-size:clamp(1.45rem,1.2rem + 1.6vw,2.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.14;max-width:26ch;margin-inline:auto}
.closer .micro{color:var(--muted);margin-inline:auto}
.closer .btn-row{justify-content:center}
.hookrow{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.3rem}
.hookrow li{
  font-size:.72rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.5rem .8rem;
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .cards-3,.cards-4,.town-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two{grid-template-columns:1fr}
  .trade-row{grid-template-columns:1fr;gap:.35rem}
  .trade-row-go{justify-content:flex-start;margin-top:.3rem}
}
@media (max-width:700px){
  .nav-light .pill-contact{display:inline-flex;padding:.6rem .6rem .6rem .95rem;font-size:.9rem}
  .cards-3,.cards-4,.town-list{grid-template-columns:1fr}
  .phead{padding-block:6rem 2.4rem}
  .phead h1{max-width:none}
  .btn-row .tbtn{flex:1 1 100%;justify-content:center}
}

/* ================================================================
   The desktop and phone pair under the header band on a trade hub.
   Added with the image wiring, 15 September 2026.
   ================================================================ */
.trade-page .tp-shots{padding-top:2rem;padding-bottom:2rem}
.trade-page .tp-shot-pair{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:1.2rem;align-items:start;
}
.trade-page .tp-shot{margin:0;border-radius:14px;overflow:hidden;background:#fcfcfb;
  border:1px solid rgba(24,24,24,.1);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.trade-page .tp-shot img{display:block;width:100%;height:auto}
.trade-page .tp-shots .micro{margin-top:.9rem}
@media (max-width:820px){
  .trade-page .tp-shot-pair{grid-template-columns:1fr;gap:.9rem}
  .trade-page .tp-shot-phone{max-width:22rem;margin-inline:auto}
}

/* ================================================================
   The deep town layout. Roofers pilot, 16 September 2026.
   Only the twelve researched roofers town pages carry these classes,
   and every rule is scoped under .trade-page so nothing leaks.
   ================================================================ */
.trade-page .deep-band .sec-head{max-width:70ch}
.trade-page .deep-prose{margin-top:1.4rem;display:grid;gap:1rem}
.trade-page .deep-prose p{max-width:68ch;font-size:clamp(1rem,.97rem + .2vw,1.06rem);line-height:1.66}

.trade-page .deep-districts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1rem;margin-top:1.9rem;
}
.trade-page .deep-district h3{margin-bottom:.6rem}
.trade-page .deep-district p{font-size:.94rem;line-height:1.58}
.trade-page .deep-district .deep-district-stock{
  color:var(--i-ink-3);padding-bottom:.7rem;margin-bottom:.7rem;
  border-bottom:1px solid var(--i-hair-soft);
}

.trade-page .deep-searches{display:grid;gap:.8rem;margin-top:1.7rem;max-width:74ch}
.trade-page .deep-searches li{
  background:var(--card);border:1px solid var(--i-hair);border-radius:var(--r-sm);
  padding:1rem 1.15rem 1.1rem;
}
.trade-page .deep-searches .deep-search-q{
  font-weight:750;color:var(--i-ink);font-size:1rem;line-height:1.35;
}
.trade-page .deep-searches .deep-search-why{
  margin-top:.45rem;font-size:.94rem;color:var(--i-ink-2);line-height:1.58;
}

.trade-page .deep-build{max-width:68ch}
.trade-page .deep-build li{font-size:.98rem}

.trade-page .deep-sources{display:grid;gap:.6rem;margin-top:1.6rem;max-width:74ch}
.trade-page .deep-sources li{
  display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline;
  font-size:.9rem;color:var(--i-ink-3);line-height:1.5;
  padding-bottom:.6rem;border-bottom:1px solid var(--i-hair-soft);
}
.trade-page .deep-sources li:last-child{border-bottom:0;padding-bottom:0}
.trade-page .deep-sources a{word-break:break-word;min-width:0}
.trade-page .deep-sources .deep-src-plain{color:var(--i-ink-2)}

@media (max-width:700px){
  .trade-page .deep-districts{grid-template-columns:1fr;gap:.8rem}
}

/* The free live demo button in the deep page header band. Desktop and tablet
   only: under 700px the sticky mobile bar already carries the same link, and
   two of them at the fold reads as clutter. Round 2, 16 September 2026. */
.trade-page .phead-cta{display:none}
@media (min-width:701px){
  .trade-page .phead-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
  .trade-page .phead-cta .tbtn{max-width:100%}
}
.trade-page .deep-demo strong{color:var(--i-ink);font-weight:700}

/* ================================================================
   Two additions for the researched builders town pages, 16 September
   2026: the measured monthly volume under a search phrase, and the
   band that shows the three strongest local sites. Both are scoped
   under .trade-page and both only appear where the research record
   carries the fields, so the roofers pilot pages are untouched.
   ================================================================ */
.trade-page .deep-searches .deep-search-vol{
  margin-top:.35rem;font-size:.86rem;font-weight:650;color:var(--i-ink-3);
  letter-spacing:.01em;line-height:1.45;
}
.trade-page .deep-search-note{max-width:74ch;margin-top:1.1rem}

.trade-page .deep-topsites-band{border-top:1px solid var(--i-hair-soft)}
.trade-page .deep-topsites{margin-top:1.6rem}
.trade-page .deep-topsite h3{margin-bottom:.6rem;font-size:1.02rem;line-height:1.35}
.trade-page .deep-topsite h3 a{word-break:break-word}
.trade-page .deep-topsite .deep-topsite-measured{
  color:var(--i-ink-3);padding-bottom:.7rem;margin-bottom:.7rem;
  border-bottom:1px solid var(--i-hair-soft);
}
.trade-page .deep-topsite-close{max-width:74ch;margin-top:1.2rem}

/* The card for our own build inside "What we would build", round 2,
   16 September 2026. Scoped under .trade-page, image left on wide screens
   and stacked on a phone. */
.trade-page .deep-ourbuild{
  margin-top:1.8rem;display:grid;grid-template-columns:340px 1fr;
  gap:1.4rem;align-items:start;max-width:56rem;
}
.trade-page .deep-ourbuild-shot{
  display:block;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--i-hair);line-height:0;
}
.trade-page .deep-ourbuild-shot img{width:100%;height:auto;display:block}
.trade-page .deep-ourbuild-body .kicker{margin-bottom:.5rem}
.trade-page .deep-ourbuild-body h3{margin-bottom:.5rem;font-size:1.06rem;line-height:1.35}
.trade-page .deep-ourbuild-body p{font-size:.96rem;line-height:1.6}
.trade-page .deep-ourbuild-quote{margin-top:1rem}
@media (max-width:760px){
  .trade-page .deep-ourbuild{grid-template-columns:1fr;gap:1rem}
}

/* A proof card with no screenshot drops the image column rather than leaving a
   340px gap. Round 3, 16 September 2026. */
.trade-page .deep-ourbuild-noshot{grid-template-columns:1fr;max-width:44rem}
.trade-page .deep-ourbuild-go{margin-top:.9rem}

/* ================================================================
   Polish pass, 17 September 2026 (PLAN-polish-taste.md, findings 1,
   3 and 4). The eyebrow pill is gone from the header band and most
   section kickers are gone with it, so the first heading in a block
   now sets its own top edge. The two card walls on the deep town
   pages are ruled lists: one hairline between items, no box.
   ================================================================ */
/* the pill used to hold this space open under the fixed nav */
.phead h1:first-child{margin-top:2.4rem}
.sec-head h2:first-child{margin-top:0}
.band .offer-line .lede:first-child{margin-top:0}

.trade-page .deep-ruled{
  list-style:none;margin:1.6rem 0 0;padding:0;
  max-width:80ch;
  border-top:1px solid var(--i-hair-soft);
}
.trade-page .deep-ruled > li{
  padding:1.15rem 0 1.2rem;
  border-bottom:1px solid var(--i-hair-soft);
}
.trade-page .deep-ruled > li > h3{
  margin:0 0 .45rem;
  font-size:1.02rem;font-weight:750;line-height:1.35;color:var(--i-ink);
}
.trade-page .deep-ruled > li > p{
  margin:0;font-size:.95rem;color:var(--i-ink-2);line-height:1.6;max-width:74ch;
}
.trade-page .deep-ruled > li > p + p{margin-top:.55rem}
.trade-page .deep-topsites > li > .deep-topsite-measured{
  color:var(--i-ink-2);padding-bottom:0;margin-bottom:0;border-bottom:0;
}
.trade-page .deep-faq > li > h3{color:var(--i-ink)}
.trade-page .deep-faq > li:last-child{border-bottom:0;padding-bottom:0}