/* home-bands.css
   Two homepage bands added 17 September 2026: the trades and towns proof band
   (after Mark's quote, before the quote tool) and the client reviews band
   (after the pricing slab, before About).

   Loaded by index.html only. Tokens, type scale and band rhythm are the ones
   already set in style.css: same dark page, same accent, same Inter, same
   card treatment as .cred-stats, same hairline as .slab.
   British English. No long dashes in this file. */

/* ================================================================
   1. THE TRADES AND TOWNS BAND
   ================================================================ */

.tt{background:var(--page);padding-block:clamp(3rem,8vh,5rem);border-top:1px solid var(--hair-soft)}
.tt h2{
  margin-top:.55rem;
  font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.08;max-width:20ch;
}
.tt-lead{margin-top:.9rem;color:var(--muted);font-size:.95rem;max-width:62ch}
.tt-row + .tt-row{margin-top:clamp(2.2rem,5vh,3.2rem)}

/* the card grids. Five cards, so five cells and no empty ones: a six column
   track carries three two-wide cards, then two three-wide cards. Both rows
   run the full width. */
.tt-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.9rem;margin-top:1.1rem;
}
.tt-grid > li{grid-column:span 2}
.tt-grid > li:nth-child(4),
.tt-grid > li:nth-child(5){grid-column:span 3}
.tt-card{
  display:flex;flex-direction:column;gap:.5rem;
  border:1px solid rgba(255,255,255,.12);border-radius:14px;
  padding:1.1rem 1.15rem;background:rgba(255,255,255,.02);
  transition:border-color .25s var(--ease);
}
.tt-card:hover,.tt-card:focus-within{border-color:rgba(255,255,255,.3)}
.tt-card .tt-name{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:1.08rem;font-weight:750;letter-spacing:-.02em;color:#fff;
  border-bottom:2px solid rgba(245,200,66,.42);align-self:flex-start;
  transition:border-color .2s,color .2s;
}
.tt-card .tt-name:hover{border-bottom-color:var(--accent);color:var(--accent)}
.tt-card .tt-count{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:650}
.tt-card .tt-fact{font-size:.9rem;line-height:1.5;color:#dcdcdc}
.tt-card .tt-src{font-size:.8rem;color:var(--muted)}
.tt-card .tt-read{
  margin-top:auto;display:inline-flex;align-items:center;min-height:44px;
  font-size:.9rem;font-weight:700;color:var(--accent);align-self:flex-start;
}
.tt-card .tt-read:hover{text-decoration:underline}

/* the two expands. Native details, so the links inside are in the HTML and
   crawlable whether or not the expand is open. */
.tt-more{margin-top:1rem;border-top:1px solid var(--hair-soft);padding-top:.7rem}
.tt-more > summary{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  font-size:.95rem;font-weight:700;color:#fff;cursor:pointer;list-style:none;
}
.tt-more > summary::-webkit-details-marker{display:none}
.tt-more > summary::before{
  content:"";width:9px;height:9px;flex:none;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.tt-more[open] > summary::before{transform:rotate(-135deg)}
.tt-more > summary:hover{color:var(--accent)}

.tt-hubs{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 .3rem}
.tt-hubs a{
  display:inline-flex;align-items:center;min-height:44px;
  border:1px solid var(--hair);border-radius:999px;padding:0 1.05rem;
  font-size:.92rem;font-weight:650;color:#e8e8e8;
  transition:border-color .2s,background .2s,color .2s;
}
.tt-hubs a:hover{border-color:var(--accent);background:rgba(245,200,66,.1);color:#fff}

.tt-how{margin:.6rem 0 .2rem;display:grid;gap:.45rem;max-width:66ch}
.tt-how li{font-size:.92rem;line-height:1.5;color:#dcdcdc;padding-left:1rem;position:relative}
.tt-how li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.tt-how-link{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.92rem;font-weight:700;color:var(--accent);
}
.tt-how-link:hover{text-decoration:underline}

/* ================================================================
   3. RESPONSIVE
   ================================================================ */

@media (max-width:1000px){
  .tt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tt-grid > li,
  .tt-grid > li:nth-child(4),
  .tt-grid > li:nth-child(5){grid-column:auto}
  .tt-grid > li:nth-child(5){grid-column:1 / -1}
}
@media (max-width:700px){
  .tt-grid{grid-template-columns:1fr}
  .tt-grid > li:nth-child(5){grid-column:auto}
  .tt h2{max-width:none}
  .tt-hubs a{width:100%;justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .tt-card,.tt-more > summary::before{transition:none}
}