/* Hammer & Pixel, the four service pages under /services/.
   Loaded after style.css and inner.css (and quote.css on the quote tool page).
   inner.css already owns the light nav, the dark header band, the warm bands,
   .cards-3, .checks, .two, .shot, .closer and the buttons. Everything here is
   the extra furniture those four pages need, and every rule is scoped under
   body.service-page so nothing can leak onto another page.
   British English. No long dashes in this file. */

/* ---------- four across ---------- */
body.service-page .cards-4{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.7rem;
}

/* ---------- the checklist pull box ---------- */
body.service-page .pullbox{
  margin-top:1.8rem;background:var(--card);
  border:1px solid var(--i-hair);border-left:4px solid var(--accent);
  border-radius:var(--r);padding:1.35rem 1.4rem 1.5rem;max-width:72ch;
}
body.service-page .pullbox h3{
  font-size:clamp(1.02rem,.98rem + .4vw,1.2rem);font-weight:780;letter-spacing:-.02em;
  margin-bottom:.35rem;color:var(--i-ink);
}
body.service-page .pullbox .pull-sub{font-size:.92rem;color:var(--i-ink-3);max-width:62ch}
body.service-page .pullbox .checks{margin-top:1.1rem;gap:.7rem}
body.service-page .pullbox .checks li{font-size:.96rem}

/* ---------- the day by day list ---------- */
body.service-page .daylist{display:grid;gap:.7rem;margin-top:1.7rem;max-width:76ch}
body.service-page .daylist li{
  display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:.4rem 1.2rem;
  background:var(--card);border:1px solid var(--i-hair);border-radius:var(--r-sm);
  padding:1rem 1.15rem;align-items:baseline;
}
body.service-page .daylist b{
  font-size:.78rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
  color:var(--i-accent-text);
}
body.service-page .daylist span{font-size:.96rem;color:var(--i-ink-2);line-height:1.55}

/* ---------- see a real one ---------- */
body.service-page .shot-link{display:block;min-width:0}
body.service-page .shot-link:hover .shot{border-color:var(--i-ink);transform:translateY(-3px)}
body.service-page .shot{transition:border-color .2s,transform .3s var(--ease)}
body.service-page .shot-plain .shot-body{
  padding:clamp(1.4rem,4vw,2.4rem) 1.3rem;display:grid;gap:.5rem;justify-items:start;
}
body.service-page .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;
}
body.service-page .shot-sub{font-size:.93rem;color:var(--i-ink-2);max-width:40ch}
body.service-page .shot-go{margin-top:.5rem;color:var(--i-accent-text);font-weight:700;font-size:.95rem}

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

/* ---------- sibling service links ---------- */
body.service-page .svc-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:1.7rem}
body.service-page .svc-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;
}
body.service-page .svc-list a:hover{border-color:var(--i-ink)}

/* ---------- breadcrumb on the dark band ---------- */
body.service-page .phead .phead-crumb{margin-top:1.3rem;font-size:.88rem}
body.service-page .phead .phead-crumb a{
  color:var(--accent);font-weight:640;border-bottom:1px solid rgba(245,200,66,.35);
}
body.service-page .phead .phead-crumb a:hover{border-bottom-color:var(--accent)}

/* ---------- ghost button on the dark closer ---------- */
body.service-page .tbtn-onblack{color:#fff;border-color:rgba(255,255,255,.3)}
body.service-page .tbtn-onblack:hover{border-color:#fff;background:rgba(255,255,255,.06)}

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

/* ---------- responsive ---------- */
@media (max-width:1000px){
  body.service-page .cards-4,
  body.service-page .svc-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  body.service-page .cards-4,
  body.service-page .svc-list{grid-template-columns:1fr}
  body.service-page .daylist li{grid-template-columns:1fr;gap:.3rem}
}

/* The manifest screenshot at the top of the "See a real one" card.
   Added with the image wiring, 15 September 2026. */
.service-page .svc-shot{
  margin:0 0 1.4rem;border-radius:14px;overflow:hidden;background:#fcfcfb;
  border:1px solid rgba(24,24,24,.1);box-shadow:0 12px 30px rgba(0,0,0,.07);
}
.service-page .svc-shot img{display:block;width:100%;height:auto}
.service-page .svc-shot figcaption{
  font-size:.82rem;color:#54524e;padding:.6rem .85rem .75rem;line-height:1.5;
}