/* Styles for the homeowner tool pages: roof-cost-calculator.html and neighbour-offer.html.

   The first half (fonts to WhatsApp button) is the site chrome, copied from the inline
   <style> in index.html, which is the canonical copy: change it there first, then here.
   URLs are root-absolute because these pages are served at /roof-cost-calculator and
   /neighbour-offer. The second half is the tools' own components, ported from the saved
   pages in _reference/ and re-pointed at the site's tokens. */

/* ---------- fonts (as index.html) ---------- */
@font-face{font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap; src:url(/assets/fonts/fraunces-600-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap; src:url(/assets/fonts/fraunces-600-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap; src:url(/assets/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap; src:url(/assets/fonts/inter-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --charcoal-950:#101113;
  --charcoal-900:#1B1D21;
  --charcoal-800:#2A2D32;
  --charcoal-700:#3A3D43;
  --gold:#C9A24B;
  --gold-light:#E4C878;
  /* Gold for small text on paper: --gold is only 2.2:1 there, this is 4.9:1. */
  --gold-ink:#866518;
  --paper:#F5F3EF;
  --ink:#1E2023;
  --slate:#6B6F76;
  --radius:2px;
  --header-h:78px;
  /* Tool pages only: light rules and raised panels on the paper background. */
  --line:#DAD6CE;
  --card:#FBFAF7;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-0.01em;
}

a{color:inherit; text-decoration:none;}

.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.02em;
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 28px;
}

/* ---------- header ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(16,17,19,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--charcoal-700);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 28px;
  max-width:1120px;
  margin:0 auto;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--paper);
}

.brand svg{width:34px; height:34px; flex-shrink:0;}
.brand img{height:36px; width:auto; flex-shrink:0; display:block;}

.brand-name{
  font-family:'Fraunces', serif;
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:0.01em;
}

header .btn{white-space:nowrap;}

.brand-sub{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.62rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
  margin-top:2px;
  white-space:nowrap;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:18px;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--paper);
  font-size:0.88rem;
  font-weight:500;
  white-space:nowrap;
}

.nav-link:hover,
.nav-link[aria-current="page"]{color:var(--gold-light);}

.nav-link svg{display:none; width:20px; height:20px;}

.phone-link{
  color:var(--paper);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.9rem;
  display:none;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  background:var(--gold);
  color:var(--charcoal-950);
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:0.88rem;
  border-radius:var(--radius);
  border:1px solid var(--gold);
  transition:background 0.15s ease, color 0.15s ease;
  cursor:pointer;
}

.btn:hover{
  background:var(--gold-light);
  border-color:var(--gold-light);
}

/* ---------- footer ---------- */
footer{
  background:var(--charcoal-950);
  color:#8A8E94;
  padding:44px 0 32px;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:20px;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--paper);
}

.footer-brand svg{width:22px; height:22px;}
.footer-brand img{height:24px; width:auto; display:block;}

.footer-brand span{
  font-family:'Fraunces', serif;
  font-weight:600;
}

footer .fine{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  margin-top:6px;
}

footer .fine a:hover{color:var(--gold-light);}

.footer-legal{
  flex:0 0 100%;
  border-top:1px solid rgba(255,255,255,0.12);
  margin-top:28px;
  padding-top:20px;
  display:grid;
  gap:10px;
  color:#9AA0A6;
  font-size:0.74rem;
  line-height:1.6;
}

.footer-legal p{max-width:80ch;}

.cookie-settings{
  background:none;
  border:0;
  padding:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
}

.cookie-settings:hover{color:var(--gold-light);}

/* ---------- cookie consent (js/analytics.js) ---------- */
.consent-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  background:var(--charcoal-950);
  color:var(--paper);
  border-top:1px solid var(--gold);
  box-shadow:0 -10px 30px rgba(0,0,0,0.3);
  padding:14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
}

.consent-banner[hidden]{display:none;}

.consent-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 32px;
}

.consent-copy{flex:1 1 320px;}

.consent-banner .eyebrow{font-size:0.68rem; margin-bottom:2px;}

.consent-banner p{
  font-size:0.86rem;
  line-height:1.5;
  color:#C7C9CE;
}

.consent-banner a{
  color:var(--gold-light);
  text-decoration:underline;
  text-underline-offset:2px;
}

.consent-banner .consent-current{
  margin-top:4px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  color:#9AA0A6;
}

.consent-actions{display:flex; gap:10px;}

/* Accept and Reject share one style on purpose: equal prominence. */
.consent-btn{
  min-width:112px;
  min-height:44px;
  padding:10px 20px;
  background:transparent;
  color:var(--paper);
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:0.88rem;
  border:1px solid color-mix(in srgb, var(--paper) 55%, transparent);
  border-radius:var(--radius);
  cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease;
}

.consent-btn:hover{
  background:var(--charcoal-800);
  border-color:var(--gold);
}

.has-consent-banner body{padding-bottom:var(--consent-h, 0px);}

@media (max-width:640px){
  .consent-banner{padding-top:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));}
  .consent-actions{width:100%;}
  .consent-btn{flex:1;}
}

@media (max-width:640px) and (max-height:700px){
  .consent-banner{padding-top:10px; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));}
  .consent-banner .consent-inner{padding:0 20px; gap:8px;}
  .consent-banner .eyebrow{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  .consent-banner p{font-size:0.8rem;}
  .consent-btn{min-height:40px; padding:8px 16px;}
}

/* ---------- floating WhatsApp button ---------- */
.wa-float{
  position:fixed;
  right:calc(20px + env(safe-area-inset-right, 0px));
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  z-index:55;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,0.22);
  animation:wa-fade-in 0.4s ease 1s backwards;
  transition:opacity 0.2s ease, visibility 0.2s ease;
}

.wa-float svg{width:30px; height:30px; display:block;}

.wa-float:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  box-shadow:0 0 0 3px var(--charcoal-950);
}

.wa-float.is-tucked{opacity:0; visibility:hidden;}

.has-consent-banner .wa-float{display:none;}

.wa-float-label{display:none;}

@media (hover:hover) and (min-width:768px){
  .wa-float-label{
    position:absolute;
    right:calc(100% + 12px);
    top:50%;
    transform:translateY(-50%);
    padding:6px 12px;
    background:var(--charcoal-950);
    color:#fff;
    font-family:'Inter', sans-serif;
    font-size:0.8rem;
    font-weight:500;
    white-space:nowrap;
    border-radius:var(--radius);
    box-shadow:0 4px 14px rgba(0,0,0,0.22);
  }

  .wa-float:hover .wa-float-label,
  .wa-float:focus-visible .wa-float-label{display:block;}
}

@media (max-width:767px){
  .wa-float{
    width:52px;
    height:52px;
    right:calc(16px + env(safe-area-inset-right, 0px));
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .wa-float svg{width:28px; height:28px;}
}

@keyframes wa-fade-in{from{opacity:0;}}

/* ---------- chrome: responsive ---------- */
@media (min-width:641px){
  .phone-link{display:inline;}
}

/* The full tagline doesn't fit beside the nav and "Call now" below tablet width. */
@media (max-width:767px){
  .brand-sub{display:none;}
}

/* Phones: "Roof calculator" becomes an icon button (its text stays for screen readers),
   and the header tightens so the brand name stays on one line down to 320px. */
@media (max-width:559px){
  .header-inner{padding:14px 16px;}
  .brand{gap:10px;}
  .header-actions{gap:8px;}
  header .btn{padding:10px 16px;}
  .nav-link{
    width:40px;
    height:40px;
    border:1px solid var(--charcoal-700);
    border-radius:var(--radius);
  }
  .nav-link svg{display:block;}
  .nav-link-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
}

@media (max-width:359px){
  .header-inner{padding:14px 12px;}
  .brand-name{font-size:0.95rem;}
  header .btn{padding:10px 12px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
  .wa-float{animation:none;}
}


/* =====================================================================
   Tool pages: shared bits
   ===================================================================== */

[hidden]{display:none !important;}

.tool button, .tool input, .tool select{font:inherit;}

.tool a:focus-visible,
.tool summary:focus-visible,
.tool input:focus-visible,
.tool select:focus-visible{
  outline:2px solid var(--gold-ink);
  outline-offset:4px;
}

.overline{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold-ink);
}

.overline::before{
  content:'';
  width:25px;
  height:2px;
  background:var(--gold);
}

.plain-link{text-decoration:underline; text-underline-offset:3px;}


/* =====================================================================
   Roof cost calculator (roof-cost-calculator.html)
   ===================================================================== */

.intro{padding:44px 0 28px;}

.intro h1{
  margin:12px 0 10px;
  font-size:clamp(2.3rem, 4.4vw, 3.5rem);
  letter-spacing:-0.02em;
}

.intro p{
  font-size:1rem;
  line-height:1.6;
  color:var(--slate);
  max-width:68ch;
}

.noscript{
  padding:14px;
  margin-bottom:20px;
  border:1px solid var(--gold-ink);
  background:var(--card);
}

.noscript a{text-decoration:underline;}

.board{
  display:grid;
  grid-template-columns:minmax(0, 1.07fr) minmax(0, 1fr);
  align-items:start;
  gap:24px;
}

.drawing-card,
.controls{border-radius:6px; overflow:hidden;}

/* ---- diagram + estimate (dark card) ---- */
.drawing-card{
  background:var(--charcoal-900);
  color:var(--paper);
  box-shadow:0 3px 10px rgba(16,17,19,0.08);
}

.diagram{
  position:relative;
  background-color:var(--charcoal-800);
  background-image:
    linear-gradient(rgba(228,200,120,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228,200,120,0.07) 1px, transparent 1px),
    linear-gradient(rgba(228,200,120,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228,200,120,0.035) 1px, transparent 1px);
  background-size:80px 80px, 80px 80px, 16px 16px, 16px 16px;
  padding:17px 23px 11px;
}

.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#C7C9CE;
}

.technical,
.code-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.66rem;
  letter-spacing:0.11em;
  text-transform:uppercase;
}

.toolbar .technical{display:flex; align-items:center; gap:7px;}

.toolbar .technical::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
}

.code-tag{font-size:0.6rem; color:#9AA0A6;}

.diagram #drawing{
  display:block;
  width:100%;
  height:clamp(200px, 19vw, 248px);
  margin:0 auto;
}

.diagram-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:13px;
  border-top:1px solid rgba(255,255,255,0.12);
  padding-top:9px;
}

.diagram-foot span{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.66rem;
  line-height:1.4;
  color:#D5D7DB;
}

.datum{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:17px;
  height:17px;
  margin-right:6px;
  border-radius:3px;
  background:var(--gold);
  color:var(--charcoal-950);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.66rem;
  font-style:normal;
  font-weight:600;
  vertical-align:1px;
}

.diagram-foot .datum{
  min-width:15px;
  height:15px;
  margin-right:4px;
  background:transparent;
  color:var(--gold-light);
  border:1px solid rgba(228,200,120,0.5);
  vertical-align:0;
}

.estimate{padding:22px 26px 25px; scroll-margin-top:calc(var(--header-h) + 14px);}

.result-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.estimate .eyebrow{color:var(--gold-light); letter-spacing:0.14em;}

.area-tag{
  padding:3px 7px;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:4px;
  color:#E3E4E6;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  line-height:1.45;
}

.amount{
  margin:8px 0 4px;
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:clamp(2.6rem, 4.4vw, 3.8rem);
  line-height:1.12;
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}

.amount.message{font-size:clamp(1.65rem, 3.4vw, 2.6rem);}

.range-line{font-size:0.9rem; color:#C7C9CE;}

.range-line strong{color:var(--paper); font-weight:600;}

.results-note{
  margin:8px 0 14px;
  font-size:0.8rem;
  line-height:1.5;
  color:#AEB2B8;
}

.quote{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:44px;
  padding:10px 16px;
  border-radius:var(--radius);
  background:var(--gold);
  color:var(--charcoal-950);
  font-size:0.9rem;
  font-weight:600;
  transition:background 0.15s ease;
}

.quote:hover{background:var(--gold-light);}

.quote svg{width:18px; height:18px;}

.tool .quote:focus-visible{outline-color:var(--paper);}

.mobile-edit{display:none;}

/* ---- measurements (light card) ---- */
.controls{
  padding:24px 26px 21px;
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:0 3px 10px rgba(16,17,19,0.03);
  scroll-margin-top:calc(var(--header-h) + 12px);
}

.section-title{display:flex; align-items:center; gap:10px; margin-bottom:12px;}

.section-title h2{font-size:1.35rem; line-height:1.22;}

.step{
  padding:5px 6px;
  border:1px solid var(--line);
  border-radius:4px;
  background:#EFECE6;
  color:var(--slate);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.66rem;
  line-height:1;
}

.controls p{color:var(--slate); font-size:0.82rem;}

.segment{
  display:flex;
  gap:4px;
  margin:14px 0;
  padding:4px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#EDEAE4;
}

.segment label,
.choice{position:relative; cursor:pointer;}

.segment label{flex:1; min-width:0;}

.segment input,
.choice input{
  position:absolute;
  left:12px;
  top:50%;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
}

.segment span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:36px;
  border:1px solid transparent;
  border-radius:4px;
  color:var(--slate);
  font-size:0.82rem;
  font-weight:600;
  line-height:1.2;
  text-align:center;
}

.segment svg{width:19px; height:17px;}

.segment input:checked + span{
  background:var(--card);
  border-color:#CFC9BE;
  color:var(--ink);
  box-shadow:0 1px 3px rgba(16,17,19,0.06);
}

.segment input:focus-visible + span,
.choice input:focus-visible + .choice-body{outline:2px solid var(--gold-ink); outline-offset:1px;}

.fields{display:grid; grid-template-columns:1fr 1fr; column-gap:12px;}

.field{min-width:0;}

.select-label{display:block; margin-bottom:5px; font-size:0.82rem; font-weight:600;}

/* Badge in its own column, so a wrapped label (B is often two lines on phones)
   flows beside it and the badge stays centred on the first line. */
.field label{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  margin-bottom:5px;
  font-size:0.82rem;
  font-weight:600;
  line-height:1.3;
}

.field label .datum{margin-top:calc((0.82rem * 1.3 - 17px) / 2);}

/* A and B share label, input and help rows, so the inputs and help texts line
   up when only one label wraps. Labels sit on the bottom of their row. */
@supports (grid-template-rows:subgrid){
  .fields{grid-template-rows:auto auto auto;}
  .field{display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0;}
  .field label{align-self:end;}
}

/* No subgrid: reserve two lines for every label instead. */
@supports not (grid-template-rows:subgrid){
  .field label{min-height:2.6em; align-content:end;}
}

.field-shell{
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid #BDB7AC;
  border-radius:4px;
  background:#fff;
}

.field-shell:focus-within{border-color:var(--gold-ink); box-shadow:0 0 0 2px rgba(201,162,75,0.3);}

.field-shell input{
  width:100%;
  min-width:0;
  padding:9px 3px 9px 12px;
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:1.25rem;
  font-weight:500;
  line-height:1.2;
  outline:none;
  appearance:textfield;
  -moz-appearance:textfield;
}

.field-shell input::-webkit-inner-spin-button{appearance:none;}

.field-shell span{
  padding:0 13px 0 3px;
  color:var(--slate);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.82rem;
}

.field input[aria-invalid=true]{color:#9A362C;}

.field-shell:has([aria-invalid=true]){border-color:#A54432;}

.fields small{display:block; margin-top:5px; color:var(--slate); font-size:0.72rem; line-height:1.4;}

.pitch{margin:11px 0 0;}

.pitch select{
  width:100%;
  min-height:40px;
  padding:4px 7px;
  border:1px solid #BDB7AC;
  border-radius:4px;
  background:#fff;
  color:var(--ink);
}

.controls .error{margin-top:8px; color:#9A362C;}

.help{margin-top:12px;}

.help summary,
.detail summary{
  display:flex;
  align-items:center;
  gap:6px;
  width:fit-content;
  list-style:none;
  cursor:pointer;
  font-size:0.82rem;
  font-weight:600;
}

.help summary::-webkit-details-marker,
.detail summary::-webkit-details-marker{display:none;}

.help summary::before,
.detail summary::after{content:'+'; font-family:'IBM Plex Mono', monospace; font-weight:400;}

.help[open] summary::before,
.detail[open] summary::after{content:'−';}

.help summary{text-decoration:underline; text-underline-offset:3px;}

.help p{margin-top:8px; font-size:0.76rem;}

.separator{border:0; border-top:1px solid var(--line); margin:20px 0 17px;}

.choices{display:grid; grid-template-columns:1fr 1fr; gap:9px;}

.choice-body{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:63px;
  padding:10px 9px;
  border:1px solid var(--line);
  border-radius:5px;
  background:#fff;
  line-height:1.3;
}

.choice input:checked + .choice-body{
  padding:9.5px 8.5px;
  border:1.5px solid var(--gold-ink);
  background:#F6F0E1;
}

.sample{flex:none; width:34px; height:34px; border:1px solid rgba(16,17,19,0.2); border-radius:4px;}

.choice-title{display:block; font-size:0.82rem; font-weight:600;}

.choice-sub{display:block; margin-top:2px; color:var(--slate); font-size:0.66rem;}

.choice-check{
  flex:none;
  width:13px;
  height:13px;
  margin-left:auto;
  border:1px solid #BDB7AC;
  border-radius:50%;
}

.choice input:checked + .choice-body .choice-check{
  border-color:var(--charcoal-900);
  background:var(--charcoal-900);
  box-shadow:inset 0 0 0 3px #F6F0E1;
}

.scope-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:14px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:5px;
  background:#F0EDE7;
  color:var(--slate);
}

.scope-row svg{flex:none; width:16px; height:16px; margin-top:2px;}

.controls .scope-row p{font-size:0.76rem; line-height:1.45;}

.estimate-jump{display:none;}

/* ---- neighbour panel ---- */
.neighbour-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin-top:20px;
  padding:19px 22px;
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:6px;
  background:#EFECE6;
}

.neighbour-banner h2{margin:8px 0 4px; font-size:1.3rem; line-height:1.25;}

.neighbour-banner p{max-width:75ch; color:var(--slate); font-size:0.82rem; line-height:1.5;}

.neighbour-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:none;
  padding:10px 14px;
  border-radius:var(--radius);
  background:var(--charcoal-900);
  color:var(--paper);
  font-size:0.82rem;
  font-weight:600;
  transition:background 0.15s ease;
}

.neighbour-link:hover{background:var(--charcoal-700);}

.neighbour-link svg{width:16px; height:16px;}

/* ---- FAQ accordions ---- */
.details-box{margin:20px 0 48px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

.detail{padding:14px 0;}

.detail + .detail{border-top:1px solid var(--line);}

.detail summary{width:100%; justify-content:space-between; font-size:0.9rem;}

.detail summary::after{
  display:grid;
  place-items:center;
  flex:none;
  width:20px;
  height:20px;
  border:1px solid var(--line);
  border-radius:50%;
}

.detail p{max-width:86ch; margin:8px 0; color:var(--slate); font-size:0.88rem;}

/* ---- calculator: responsive ---- */
@media (max-width:950px){
  .board{gap:16px;}
  .controls{padding:20px 17px;}
  .estimate{padding:19px;}
  .sample{width:26px; height:28px;}
  .choice-check{display:none;}
  .diagram{padding-left:16px; padding-right:16px;}
}

@media (max-width:720px){
  .intro{padding:26px 0 18px;}
  .intro h1{font-size:clamp(2.2rem, 8vw, 3rem);}
  .intro p{font-size:0.9rem; line-height:1.5;}
  .board{grid-template-columns:minmax(0, 1fr); gap:16px;}
  .diagram{padding-top:12px; padding-bottom:8px;}
  .diagram #drawing{height:176px;}
  .estimate{padding:14px 17px 17px;}
  .amount{font-size:2.6rem; margin:3px 0;}
  .result-meta .eyebrow{font-size:0.6rem;}
  .range-line{font-size:0.82rem;}
  .results-note{font-size:0.76rem; margin:5px 0 10px;}
  .mobile-edit{
    display:block;
    margin-top:10px;
    color:#D5D7DB;
    font-size:0.76rem;
    text-align:center;
    text-decoration:underline;
    text-underline-offset:3px;
  }
  .controls{padding:18px;}
  .scope-row{margin-top:12px;}
  .estimate-jump{
    display:block;
    margin-top:15px;
    padding:10px;
    border-radius:var(--radius);
    background:var(--charcoal-900);
    color:var(--paper);
    font-size:0.88rem;
    font-weight:600;
    text-align:center;
  }
  .sample{width:32px; height:32px;}
  .choice-check{display:block;}
  .details-box{margin-bottom:32px;}
  .neighbour-banner{display:block; padding:16px;}
  .neighbour-link{margin-top:12px;}
}

@media (max-width:360px){
  .controls{padding:14px;}
  .choice-check{display:none;}
  .choice-body{gap:5px;}
  .fields{column-gap:8px;}
  .sample{width:25px; height:28px;}
}


/* =====================================================================
   Neighbour roofing discount (neighbour-offer.html)
   ===================================================================== */

.offer-top{padding:32px 0 19px;}

.back{color:var(--slate); font-size:0.82rem; font-weight:600;}

.back:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px;}

.offer-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:36px;
  padding:9px 0 40px;
}

.offer-hero h1{
  margin:14px 0 16px;
  font-size:clamp(2.3rem, 4.2vw, 3.5rem);
  line-height:1.06;
  letter-spacing:-0.02em;
}

.hero-copy > p{max-width:53ch; color:var(--slate); font-size:1.05rem; line-height:1.6;}

.actions{display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:24px;}

.actions .btn svg{width:17px; height:17px;}

.phone-alt{font-size:0.9rem; font-weight:600; text-decoration:underline; text-underline-offset:3px;}

.phone-alt:hover{color:var(--gold-ink);}

.card{
  margin:0;
  overflow:hidden;
  border:1px solid var(--charcoal-700);
  border-radius:6px;
  background-color:var(--charcoal-800);
  color:var(--paper);
}

.blueprint{
  padding:17px 15px 0;
  background-image:
    linear-gradient(rgba(228,200,120,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228,200,120,0.07) 1px, transparent 1px);
  background-size:19px 19px;
}

.plate{
  display:flex;
  justify-content:space-between;
  color:#C7C9CE;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.64rem;
  line-height:1.3;
  letter-spacing:0.09em;
  text-transform:uppercase;
}

.plate span:first-child{color:var(--gold-light);}

.pair-art{display:block; width:100%; height:auto;}

.card figcaption{padding:10px 16px; background:var(--charcoal-900); color:#C7C9CE; font-size:0.76rem;}

.how{
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:38px;
  padding:32px 0 56px;
  border-top:1px solid var(--line);
}

.how h2{margin-bottom:12px; font-size:clamp(1.5rem, 2.4vw, 2rem); line-height:1.14;}

.how p{color:var(--slate); font-size:0.9rem; line-height:1.65;}

.how ol{list-style:none;}

.how li{display:grid; grid-template-columns:25px 1fr; gap:10px;}

.how li + li{margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}

.how .num{
  width:25px;
  height:22px;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--gold-ink);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.64rem;
  line-height:21px;
  text-align:center;
}

.how h3{margin-bottom:3px; font-size:1.05rem; line-height:1.35;}

.leaflet-link{
  display:inline-block;
  margin:6px 0 2px;
  color:var(--gold-ink);
  font-size:0.82rem;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}

.leaflet-link:hover{color:var(--ink);}

@media (max-width:950px){
  .offer-hero{gap:22px;}
  .hero-copy > p{font-size:0.95rem;}
}

@media (max-width:720px){
  .offer-top{padding:18px 0;}
  .offer-hero{grid-template-columns:1fr; gap:20px; padding:3px 0 28px;}
  .offer-hero h1{max-width:15ch; margin:10px 0 13px; font-size:clamp(2.2rem, 8.5vw, 3rem);}
  .hero-copy > p{font-size:1rem;}
  .actions{margin-top:18px; gap:12px 16px;}
  .pair-art{height:185px;}
  .how{grid-template-columns:1fr; gap:17px; padding:24px 0 40px;}
}