/* Hammer & Pixel, inner pages.
   Loaded after style.css on about, services, work, contact and 404.
   Warm off white ground lifted from the live site, new typography (Inter),
   yellow used sparingly. British English. No long dashes in this file. */

:root{
  /* warm ground, lifted from site/assets/site.css */
  --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.inner{background:var(--ground);color:var(--i-ink)}

/* ---------- light fixed nav ---------- */
.nav-light{
  background:rgba(243,243,241,.97);backdrop-filter:blur(10px);
  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-links a[aria-current="page"]{color:var(--i-ink);font-weight:700}
.nav-light .nav-toggle span{background:var(--i-ink)}
.nav-light a:focus-visible,.nav-light button:focus-visible{outline-color:var(--i-accent-text)}

.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);
}
.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;
}
.eyebrow-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.phead h1{
  margin-top:1.1rem;
  font-size:clamp(34px,5.4vw,66px);
  font-weight:800;letter-spacing:-.03em;line-height:1.04;
  max-width:17ch;
}
.phead h1 .acc{color:var(--accent)}
.phead .phead-line{
  margin-top:1rem;max-width:58ch;color:#e2e2e2;
  font-size:clamp(1rem,.96rem + .3vw,1.16rem);line-height:1.55;
}

/* ---------- 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:64ch}
.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.6rem,1.2rem + 2vw,2.5rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.08;
}
.band h3{font-size:clamp(1.1rem,1.02rem + .5vw,1.34rem);font-weight:750;letter-spacing:-.02em;line-height:1.2}
.band p{max-width:64ch;color:var(--i-ink-2);line-height:1.6}
.band .lede{margin-top:.9rem;font-size:clamp(1.02rem,.98rem + .4vw,1.2rem);color:var(--i-ink-2);line-height:1.55}
.prose{display:grid;gap:1.05rem;margin-top:1.2rem;max-width:64ch}
.prose p{color:var(--i-ink-2)}

.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:1rem;font-size:.9rem;color:var(--i-ink-3);max-width:64ch}
.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)}
body.inner a:focus-visible,body.inner button:focus-visible{outline:2px solid var(--i-accent-text);outline-offset:3px}
.phead a:focus-visible{outline-color:var(--accent)}

/* ---------- numbered cards ---------- */
.cards-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.6rem}
.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.6rem;max-width:74ch}
.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)}

/* ---------- browser frame shot ---------- */
.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);
}
.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}

/* ---------- two column proof ---------- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-top:1.6rem}
.tag-live{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.75rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#6b4000;
  background:rgba(245,200,66,.22);border-radius:999px;padding:.4rem .8rem;margin-bottom:.8rem;
}
.tag-live .dot{width:7px;height:7px;border-radius:50%;background:#6b4000;flex:none}
.city-card .tag-live{align-self:flex-start}
.client-quote{
  margin-top:1.4rem;border-left:3px solid var(--accent);padding-left:1.1rem;max-width:56ch;
}
.client-quote blockquote p{font-size:clamp(1.05rem,1rem + .5vw,1.28rem);color:var(--i-ink);line-height:1.45}
.client-quote figcaption{margin-top:.7rem;font-size:.9rem;color:var(--i-ink-3)}
.client-quote figcaption strong{color:var(--i-ink);font-weight:700}

/* ---------- city grid ---------- */
.city-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:1.8rem}
.city-card{background:var(--card);border:1px solid var(--i-hair);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.city-card .shot{border:0;border-radius:0;box-shadow:none}
.city-card .shot img{aspect-ratio:16/10;object-fit:cover;object-position:top center}
.city-card .body{padding:1.1rem 1.15rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.city-card h3{font-size:1.08rem}
.city-card p{font-size:.93rem}
.city-card ul{display:grid;gap:.5rem;margin-top:.2rem}
.city-card ul li{display:flex;gap:.55rem;align-items:flex-start;font-size:.88rem;color:var(--i-ink-2);line-height:1.5}
.city-card ul svg{width:16px;height:16px;flex:none;margin-top:.18rem;color:var(--i-accent-text)}
.city-card .go{margin-top:auto;padding-top:.6rem;color:var(--i-accent-text);font-weight:650;font-size:.92rem}
.city-card .go:hover{text-decoration:underline}

/* ---------- area board ---------- */
.areas{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.areas div{
  display:inline-flex;align-items:center;gap:.6rem;min-height:44px;
  background:var(--card);border:1px solid var(--i-hair);border-radius:999px;padding:0 1rem;
  font-size:.93rem;
}
.areas b{font-weight:700}
.areas .st{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--i-ink-3)}
.areas .st-live{color:var(--i-accent-text)}

/* ---------- range cards ---------- */
.range-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:1.6rem}
.range-card{background:var(--card);border:1px solid var(--i-hair);border-radius:var(--r);overflow:hidden;display:block;transition:border-color .2s}
.range-card:hover{border-color:var(--i-ink)}
.range-card img{width:100%;height:auto}
.range-card .meta{padding:.9rem 1.05rem 1.1rem}
.range-card .meta b{display:block;font-weight:750}
.range-card .meta span{display:block;margin-top:.25rem;font-size:.88rem;color:var(--i-ink-2)}

/* ---------- contact cards ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.6rem}
.contact-card{background:var(--card);border:1px solid var(--i-hair);border-radius:var(--r);padding:1.3rem}
.contact-card .ico{width:26px;height:26px;color:var(--i-accent-text);margin-bottom:.8rem}
.contact-card b{display:block;font-size:1.05rem;font-weight:750}
.contact-card .sub{display:block;margin:.35rem 0 .9rem;font-size:.9rem;color:var(--i-ink-2)}
.contact-card .big{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--i-accent-text);font-weight:700;font-size:1rem;overflow-wrap:anywhere;
}
.contact-card .big:hover{text-decoration:underline}

/* ---------- form ---------- */
.tform{max-width:660px;margin-top:1.5rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.tfield{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.tfield label{font-weight:650;font-size:.92rem;color:var(--i-ink)}
.tfield .opt{font-weight:400;color:var(--i-ink-3)}
.tfield input,.tfield select,.tfield textarea{
  font:400 1rem/1.45 var(--font);color:var(--i-ink);background:var(--card);
  border:1px solid var(--i-hair);border-radius:var(--r-sm);padding:.75rem .9rem;width:100%;min-height:46px;
}
.tfield textarea{min-height:120px;resize:vertical}
.tfield input:focus-visible,.tfield select:focus-visible,.tfield textarea:focus-visible{
  outline:2px solid var(--i-accent-text);outline-offset:1px;border-color:var(--i-accent-text);
}
.botcheck{display:none}
.tmsg{margin-top:1rem;font-size:.96rem;color:var(--i-ink);max-width:52ch}
.tmsg[hidden]{display:none}
.tmsg a{color:var(--i-accent-text);font-weight:650}

/* ---------- closing band ---------- */
.closer{background:var(--page);color:var(--ink);padding-block:clamp(3rem,9vh,5rem);text-align:center}
.closer h2{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.3rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;max-width:22ch;margin-inline:auto}
.closer .btn-row{justify-content:center}
.closer .micro{color:var(--muted);margin-inline:auto}
.closer .micro a{color:var(--accent)}
.closer .hookrow{justify-content:center;margin-top:1.2rem}
.hookrow{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.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;
}

/* ---------- 404 ---------- */
.e404{min-height:56vh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(3rem,10vh,6rem)}
.e404 .code{font-size:.86rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--i-accent-text);margin-bottom:.9rem}
.e404 h1{font-size:clamp(2rem,1.5rem + 3vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;max-width:16ch}
.e404 p{margin-top:1rem;font-size:clamp(1.02rem,1rem + .3vw,1.18rem);color:var(--i-ink-2);max-width:46ch}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .cards-3,.city-grid,.range-grid,.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two{grid-template-columns:1fr}
}
@media (max-width:700px){
  .nav-light .pill-contact{display:inline-flex;padding:.6rem .6rem .6rem .95rem;font-size:.9rem}
  .cards-3,.city-grid,.range-grid,.contact-grid{grid-template-columns:1fr}
  .frow{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}
}

/* Polish pass, 17 September 2026: the eyebrow pill and most section kickers
   are gone, so the first heading in a block sets its own top edge. */
/* 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}

/* the offer band list, on the paper ground of the inner pages */
.offer-list li{border-top-color:var(--i-hair)}
.offer-list li:last-child{border-bottom-color:var(--i-hair)}
@media (max-width:640px){.offer-list li{font-size:.98rem}}