/* Pangbourne A/C - shared site styles. Single source of truth for every page. */

:root{
  --ink:#16232E;
  --ink-55:rgba(22,35,46,.62);
  --ink-30:rgba(22,35,46,.34);
  --hairline:rgba(22,35,46,.16);
  --paper:#F6F5F1;
  --paper-dim:rgba(246,245,241,.62);
  --blue:#2E6CA3;
  --warm:#C7481B;
  --warm-dark:#A93C15;
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* This mock deliberately commits to one look: navy ink on paper, in any viewer theme. */
html,body{background:var(--paper);}
body{
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box;margin:0;}

.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,48px);}

a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

/* ---------- title block (drawing-sheet metadata) ---------- */
.titleblock{border-bottom:1px solid var(--hairline);}
.titleblock .wrap{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:10px;padding-bottom:10px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;
  color:var(--ink-55);
}

/* ---------- header ---------- */
header.site .wrap{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;
  padding-top:26px;padding-bottom:26px;
}
.wordmark{display:flex;flex-direction:column;line-height:1;}
.wm-name{font-family:var(--display);font-weight:500;font-size:1.5rem;letter-spacing:-.01em;color:var(--ink);}
.wm-deg{font-size:.58em;vertical-align:.62em;letter-spacing:0;margin-left:1px;}
.wm-sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.42em;margin-top:6px;color:var(--ink-55);}
.wm-sub b{font-weight:400;color:var(--blue);}
nav.main{display:flex;gap:clamp(14px,2.5vw,30px);font-size:.92rem;}
nav.main a{color:var(--ink);}
nav.main a:hover{color:var(--blue);}

/* ---------- hero ---------- */
.hero .wrap{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,5vw,72px);align-items:center;
  padding-top:clamp(36px,6vw,84px);padding-bottom:clamp(40px,6vw,88px);
}
.eyebrow{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;
  color:var(--blue);
}
.hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.5rem,5.6vw,4rem);line-height:1.04;letter-spacing:-.022em;
  margin-top:18px;text-wrap:balance;
}
.hero .sub{margin-top:22px;max-width:56ch;font-size:1.12rem;color:var(--ink);}
.hero .sub em{font-style:normal;font-family:var(--mono);font-size:.94em;}
.cta-row{display:flex;align-items:center;gap:26px;margin-top:34px;flex-wrap:wrap;}
.btn{
  display:inline-block;background:var(--warm);color:#fff;border:none;cursor:pointer;
  font-family:var(--display);font-weight:500;font-size:1rem;letter-spacing:.02em;
  padding:15px 28px;border-radius:2px;
}
.btn:hover{background:var(--warm-dark);text-decoration:none;}
.cta-quiet{font-weight:600;font-size:.98rem;}

/* photographs, framed like report plates */
.photo{margin:0;}
.photo img{
  width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  border:1px solid var(--hairline);border-radius:2px;height:auto;
}

/* photo plate placeholder - swapped for the real image once generated */
.plate{
  aspect-ratio:4/5;border:1px dashed var(--ink-30);background:rgba(22,35,46,.04);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:18px;border-radius:2px;
}
.plate-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--ink-55);}
.plate-spec{font-family:var(--mono);font-size:.76rem;line-height:1.75;color:var(--ink-55);}

.figcap{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--ink-55);margin-top:10px;
}

/* ---------- trust bar ---------- */
.trust{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);}
.trust .wrap{display:flex;justify-content:space-between;gap:12px;padding-top:18px;padding-bottom:18px;flex-wrap:wrap;}
.trust span{
  font-family:var(--mono);font-size:.85rem;letter-spacing:.03em;
  color:var(--ink);
}

/* ---------- promises band ---------- */
.promises{background:var(--ink);color:var(--paper);}
.promises .wrap{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,8vw,104px);}
.promises .eyebrow{color:#7FA8CB;}
.promises h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.015em;line-height:1.1;
  margin-top:16px;max-width:20ch;text-wrap:balance;
}
.promises ul{
  list-style:none;padding:0;margin:44px 0 0;
  display:flex;flex-direction:column;gap:18px;
}
.promises li{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.3rem,2.5vw,1.95rem);line-height:1.3;letter-spacing:-.01em;
}
.promises .foot{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;
  color:var(--paper-dim);margin-top:48px;
}

/* ---------- sizing section ---------- */
.sizing .wrap{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(28px,5vw,72px);align-items:center;
  padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,8vw,104px);
}
.sizing h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.6rem);letter-spacing:-.015em;line-height:1.12;
  margin-top:16px;text-wrap:balance;
}
.sizing .body{margin-top:20px;max-width:52ch;}
.factors{
  display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:34px;max-width:480px;
}
.factors span{
  font-family:var(--mono);font-size:.85rem;letter-spacing:.02em;
  border-top:1px solid var(--hairline);padding:12px 0 14px;
}
.roomfig{margin:0;}
.roomfig svg{width:100%;height:auto;display:block;}

/* ---------- where we work (map) ---------- */
.patch{border-top:1px solid var(--hairline);}
.patch .wrap{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(28px,5vw,72px);align-items:center;
  padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(48px,7vw,88px);
}
.patch h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,3.2vw,2.3rem);letter-spacing:-.015em;line-height:1.14;
  margin-top:16px;text-wrap:balance;
}
.patch .body{margin-top:18px;max-width:44ch;}
.mapfig{margin:0;}
.mapfig svg{width:100%;height:auto;display:block;}
.mapfig img{width:100%;height:auto;display:block;}

/* ---------- final CTA ---------- */
.final{border-top:1px solid var(--hairline);}
.final .wrap{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px);}
.final h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.6rem);letter-spacing:-.015em;line-height:1.12;text-wrap:balance;
}
.final p{margin-top:16px;max-width:52ch;}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--hairline);}
footer.site .wrap{
  display:grid;grid-template-columns:2fr 1fr 2fr;gap:32px;
  padding-top:44px;padding-bottom:20px;font-size:.9rem;
}
.f-head{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--ink-55);margin-bottom:12px;}
footer.site ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;}
footer.site a{color:var(--ink);}
.f-villages{font-family:var(--mono);font-size:.78rem;line-height:2;color:var(--ink);}
.f-note{color:var(--ink-55);max-width:36ch;}
.f-contact{font-family:var(--mono);font-size:.78rem;margin-top:14px;color:var(--ink);}
.f-contact .ph{color:var(--ink-55);}
.f-bottom{
  border-top:1px solid var(--hairline);margin-top:36px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--ink-55);
  padding:14px 0 40px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .hero .wrap,.sizing .wrap,.patch .wrap{grid-template-columns:1fr;}
  .plate,.photo{max-width:480px;}
  .mapfig{max-width:540px;}
  .sizing .roomfig{order:2;max-width:560px;}
  .sizing .copy{order:1;}
  .trust .wrap{flex-direction:column;gap:10px;}
  footer.site .wrap{grid-template-columns:1fr;gap:28px;}
}

/* ===================================================================
   INTERIOR PAGES - shared components (masthead, prose, method steps,
   spec lists, form, area index, sub-CTA). The homepage is unaffected:
   every selector below is new. Same survey-sheet language throughout -
   hairlines, mono utility type, no shadows, 2px max radius, no motion.
   =================================================================== */

/* current page in the nav */
nav.main a[aria-current="page"]{color:var(--blue);}
nav.main a[aria-current="page"]:hover{text-decoration:none;cursor:default;}

/* ---------- masthead (page intro) ---------- */
.masthead{border-bottom:1px solid var(--hairline);}
.masthead .wrap{
  padding-top:clamp(40px,6vw,88px);
  padding-bottom:clamp(34px,5vw,60px);
}
.masthead h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.05;letter-spacing:-.022em;
  margin-top:16px;max-width:18ch;text-wrap:balance;
}
.masthead.wide h1{max-width:24ch;}
.lede{
  margin-top:22px;max-width:58ch;font-size:1.15rem;line-height:1.6;color:var(--ink);
}
.lede em{font-style:normal;font-family:var(--mono);font-size:.92em;}

/* ---------- generic section ---------- */
.section .wrap{
  padding-top:clamp(46px,7vw,88px);
  padding-bottom:clamp(46px,7vw,88px);
}
.section.ruled{border-top:1px solid var(--hairline);}
.section h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.015em;line-height:1.12;
  margin-top:14px;text-wrap:balance;
}

/* ---------- prose (long-form, About) ---------- */
.prose{max-width:62ch;}
.prose p{margin-top:18px;}
.prose p:first-child{margin-top:0;}
.prose h2{margin-top:40px;}
.prose h2:first-child{margin-top:0;}
.prose h3{
  font-family:var(--display);font-weight:500;font-size:1.2rem;
  margin-top:30px;letter-spacing:-.01em;
}
.prose ul{list-style:none;padding:0;margin:20px 0 0;}
.prose ul li{position:relative;padding-left:26px;margin-top:12px;}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:12px;border-top:1px solid var(--blue);
}

/* ---------- numbered method (How it Works) ---------- */
.steplist{margin-top:6px;border-top:1px solid var(--hairline);}
.step{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,4vw,52px);
  padding:clamp(30px,5vw,52px) 0;
  border-bottom:1px solid var(--hairline);
  align-items:start;
}
.step-n{
  font-family:var(--mono);font-size:.95rem;color:var(--blue);
  letter-spacing:.02em;padding-top:7px;white-space:nowrap;
}
.step-h{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.35rem,2.6vw,1.85rem);letter-spacing:-.012em;line-height:1.16;
}
.step-body{margin-top:14px;max-width:58ch;}
.step-body p{margin-top:14px;}

/* ---------- spec list (labeled hairline rows) ---------- */
.speclist{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin-top:6px;}
.speclist.one{grid-template-columns:1fr;}
.speclist span,.speclist li{
  font-family:var(--mono);font-size:.85rem;letter-spacing:.02em;
  border-top:1px solid var(--hairline);padding:12px 0 13px;list-style:none;
}
.speclist.kv div{
  border-top:1px solid var(--hairline);padding:13px 0;
  display:flex;justify-content:space-between;gap:16px;
  font-family:var(--mono);font-size:.85rem;
}
.speclist.kv .k{color:var(--ink-55);}
.speclist.kv .v{color:var(--ink);text-align:right;}

/* ---------- quiet honest aside ---------- */
.note{
  font-family:var(--mono);font-size:.78rem;line-height:1.7;color:var(--ink-55);
  border-left:1px solid var(--hairline);padding-left:16px;margin-top:24px;max-width:54ch;
}

/* ---------- sub-CTA band ---------- */
.subcta{border-top:1px solid var(--hairline);}
.subcta .wrap{
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px);
}
.subcta h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.015em;line-height:1.12;
  max-width:22ch;text-wrap:balance;
}

/* ---------- area index (Service Area) ---------- */
.arealist{
  columns:3;column-gap:32px;margin-top:22px;
  font-family:var(--mono);font-size:.92rem;line-height:2.15;
}
.arealist span{display:block;break-inside:avoid;color:var(--ink);}
.arealist .tag{color:var(--ink-55);font-size:.82em;}

/* ---------- contact channels (phone-first) ---------- */
.channels{display:flex;flex-direction:column;gap:24px;}
.channel .k{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--ink-55);}
.channel .v,.channel .channel-v{
  font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,3vw,2rem);
  letter-spacing:-.01em;margin-top:4px;color:var(--ink);display:inline-block;
}
a.channel-v:hover{color:var(--blue);text-decoration:none;}

/* ---------- form (Contact) ---------- */
.form{max-width:560px;margin-top:4px;}
.field{margin-top:22px;}
.field:first-child{margin-top:0;}
.field label{
  display:block;font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;
  color:var(--ink-55);margin-bottom:8px;
}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--hairline);border-radius:2px;padding:12px 14px;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink);
}
.field textarea{min-height:120px;resize:vertical;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.field-note{font-family:var(--mono);font-size:.72rem;line-height:1.7;color:var(--ink-55);margin-top:10px;}

/* ---------- interior two-column layouts ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;}
.split.wide-left{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
.split.wide-right{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}

@media (max-width:880px){
  .split,.split.wide-left,.split.wide-right,.field-row{grid-template-columns:1fr;}
  .arealist{columns:2;}
  .subcta .wrap{flex-direction:column;align-items:flex-start;gap:22px;}
  .split.lead-copy>figure{order:2;}
}
@media (max-width:560px){
  .arealist{columns:1;}
  .step{gap:14px;}
}