/* Ottawa Poly-B — stylesheet
   Palette is drawn from the material itself: polybutylene grey, oxidised-copper
   patina for actions, brass for cautions, drywall-white paper. */

:root{
  color-scheme: light;

  --ink:      #16202a;   /* deep blue-slate: text + dark sections */
  --ink-soft: #44535f;
  --paper:    #f2f4f3;   /* cool off-white */
  --white:    #ffffff;
  --pipe:     #9aa3a5;   /* Poly B grey */
  --pipe-pale:#dfe4e4;
  --patina:   #17726b;   /* copper oxide — primary action */
  --patina-dk:#0f4f4a;
  --patina-pale:#e3efed;
  --brass:    #b8862f;   /* caution / flags */
  --brass-pale:#fbf1dc;
  --rust:     #9d3f2e;   /* failure, leaks — used sparingly */
  --rust-pale:#f8e8e4;

  --measure: 66ch;
  --wrap: 1140px;
  --r: 4px;
  --r-lg: 10px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --shadow: 0 1px 2px rgba(22,32,42,.06), 0 8px 24px -12px rgba(22,32,42,.18);
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% ; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-feature-settings:"cv05" 1,"ss01" 1;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.012em;
  line-height:1.14;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.05rem, 1.35rem + 2.7vw, 3.5rem) }
h2{ font-size:clamp(1.6rem, 1.25rem + 1.4vw, 2.25rem) }
h3{ font-size:1.2rem; font-family:var(--sans); font-weight:650; letter-spacing:-.01em; line-height:1.3 }
h4{ font-size:1rem;   font-family:var(--sans); font-weight:650; letter-spacing:-.005em }
p{ margin:0 0 1.1em }
a{ color:var(--patina-dk); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px }
a:hover{ color:var(--patina) }
strong{ font-weight:650 }
img,svg{ max-width:100% }
hr{ border:0; border-top:1px solid var(--pipe-pale); margin:2.5rem 0 }

:focus-visible{ outline:3px solid var(--brass); outline-offset:2px; border-radius:2px }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px }
.measure{ max-width:var(--measure) }
.skip{ position:absolute; left:-9999px }
.skip:focus{ left:12px; top:12px; z-index:99; background:var(--white); padding:10px 14px; border-radius:var(--r) }

/* ---------- header ---------- */
.eyebrow-bar{
  background:var(--ink); color:rgba(255,255,255,.72);
  font-size:12.5px; letter-spacing:.01em; padding:7px 0;
}
.eyebrow-bar b{ color:#fff; font-weight:600 }
.eyebrow-in{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.eyebrow-tel{
  flex:0 0 auto; color:#fff; font-weight:600; text-decoration:none;
  white-space:nowrap; letter-spacing:.01em;
}
.eyebrow-tel::before{ content:"\260E"; margin-right:6px; opacity:.75 }
.eyebrow-tel:hover{ color:#fff; text-decoration:underline }
@media (max-width:640px){ .eyebrow-in > span{ display:none } .eyebrow-in{ justify-content:center } }

.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(242,244,243,.975);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--pipe-pale);
}
.head-in{ display:flex; align-items:center; gap:18px; min-height:66px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); margin-right:auto }
.brand:hover{ color:var(--ink) }
.brand-mark{ flex:0 0 auto }
.brand-name{ font-family:var(--serif); font-size:1.22rem; font-weight:600; line-height:1.05; letter-spacing:-.02em }
.brand-sub{ display:block; font-family:var(--sans); font-size:11px; font-weight:500; color:var(--ink-soft); letter-spacing:.02em }

.nav{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0 }
.nav a{ display:block; padding:8px 11px; font-size:14.5px; font-weight:500; color:var(--ink); text-decoration:none; border-radius:var(--r) }
.nav a:hover{ background:var(--pipe-pale) }
.nav .sub{ position:relative }
.nav .sub > ul{
  position:absolute; left:0; top:100%; min-width:268px; margin:0; padding:7px;
  list-style:none; background:var(--white); border:1px solid var(--pipe-pale);
  border-radius:var(--r-lg); box-shadow:var(--shadow); display:none;
}
.nav .sub:hover > ul, .nav .sub:focus-within > ul{ display:block }
.nav .sub > ul a{ font-size:14px; padding:8px 10px }
.nav-toggle{
  display:none; background:none; border:1px solid var(--pipe); color:var(--ink);
  border-radius:var(--r); padding:7px 11px; font-size:15px; cursor:pointer;
}

.head-tel a{
  font-weight:700; font-size:15px; color:var(--patina-dk);
  text-decoration:none; white-space:nowrap;
}
.head-tel a:hover{ background:var(--pipe-pale); color:var(--patina-dk) }

@media (max-width:960px){
  .nav-toggle{ display:block; order:3 }
  .nav{
    order:4; display:none; width:100%; flex-direction:column; align-items:stretch;
    gap:0; padding:8px 0 16px; border-top:1px solid var(--pipe-pale);
  }
  .nav.open{ display:flex }
  .head-in{ flex-wrap:wrap }
  .nav a{ padding:11px 6px; font-size:16px }
  .nav .sub > ul{ position:static; display:block; box-shadow:none; border:0; padding:0 0 0 14px; min-width:0; background:none }
  .head-cta{ order:2 }
  .head-tel a{ font-size:17px; padding:11px 6px }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:15px; font-weight:600; line-height:1;
  padding:13px 20px; border-radius:var(--r); border:1px solid transparent;
  background:var(--patina); color:#fff; text-decoration:none; cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{ background:var(--patina-dk); color:#fff }
.btn--lg{ font-size:16.5px; padding:16px 26px }
.btn--full{ width:100% }
.btn--line{ background:transparent; color:var(--ink); border-color:var(--ink) }
.btn--line:hover{ background:var(--ink); color:#fff }
.btn--onink{ background:#fff; color:var(--ink) }
.btn--onink:hover{ background:var(--pipe-pale); color:var(--ink) }
.btn--ghostink{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5) }
.btn--ghostink:hover{ background:rgba(255,255,255,.12); color:#fff }
.btn[disabled]{ opacity:.45; cursor:not-allowed }

/* ---------- sections ---------- */
.sec{ padding:clamp(46px, 3vw + 34px, 76px) 0 }
.sec--tight{ padding:34px 0 }
.sec--ink{ background:var(--ink); color:rgba(255,255,255,.86) }
.sec--ink h2,.sec--ink h3,.sec--ink h4{ color:#fff }
.sec--ink a{ color:#fff }
.sec--white{ background:var(--white) }
.sec--patina{ background:var(--patina-pale) }
.sec + .sec{ border-top:1px solid var(--pipe-pale) }
.sec--ink + .sec, .sec + .sec--ink{ border-top:0 }
.lede{ font-size:1.16rem; line-height:1.55; color:var(--ink-soft); max-width:62ch }
.sec--ink .lede{ color:rgba(255,255,255,.8) }

/* ---------- hero: the specimen identifier ---------- */
.hero{ background:var(--ink); color:#fff; padding:clamp(38px,3vw+26px,64px) 0 }
.hero h1{ color:#fff; max-width:19ch }
.hero-kicker{ font-size:13.5px; font-weight:600; color:var(--brass); margin:0 0 14px }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:46px; align-items:start }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:30px } }
.hero-copy p{ color:rgba(255,255,255,.82); max-width:52ch }

.specimens{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0 0; padding:0; list-style:none }
@media (max-width:560px){ .specimens{ grid-template-columns:1fr } }
.specimen{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-lg); padding:12px 12px 10px; color:#fff;
  font-family:var(--sans); transition:border-color .15s ease, background .15s ease;
}
.specimen:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.45) }
.specimen[aria-pressed="true"]{ border-color:var(--brass); background:rgba(184,134,47,.16) }
.specimen svg{ display:block; width:100%; height:auto }
.specimen b{ display:block; font-size:14.5px; font-weight:650; margin-top:8px }
.specimen span{ display:block; font-size:12.5px; color:rgba(255,255,255,.65); line-height:1.35 }

.verdict{
  margin-top:18px; border-radius:var(--r-lg); padding:18px 20px;
  background:#fff; color:var(--ink); border-left:5px solid var(--pipe);
}
.verdict[hidden]{ display:none }
.verdict h3{ margin-bottom:.35em }
.verdict p{ color:var(--ink-soft); margin-bottom:.7em; max-width:52ch }
.verdict.is-polyb{ border-left-color:var(--rust) }
.verdict.is-kitec{ border-left-color:var(--brass) }
.verdict.is-ok{ border-left-color:var(--patina) }
.verdict .btn{ margin-top:4px }

/* ---------- year band (real data, not decoration) ---------- */
.band{ margin:28px 0 0 }
.band-track{ position:relative; height:46px; border-radius:var(--r); background:var(--pipe-pale); overflow:hidden }
.band-risk{ position:absolute; top:0; bottom:0; left:27%; right:42%; background:var(--rust); opacity:.86 }
.band-risk span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:650 }
.band-ticks{ display:flex; justify-content:space-between; font-size:12px; color:var(--ink-soft); margin-top:6px }
.sec--ink .band-track{ background:rgba(255,255,255,.14) }
.sec--ink .band-ticks{ color:rgba(255,255,255,.6) }

/* ---------- prose + two-column with sticky rail ---------- */
.split{ display:grid; grid-template-columns:minmax(0,1fr) 368px; gap:54px; align-items:start }
@media (max-width:1000px){ .split{ grid-template-columns:1fr; gap:34px } }
.rail{ position:sticky; top:86px }
@media (max-width:1000px){ .rail{ position:static } }

.prose{ max-width:var(--measure) }
.prose h2{ margin-top:2em }
.prose h2:first-child{ margin-top:0 }
.prose h3{ margin-top:1.9em }
.prose ul,.prose ol{ padding-left:1.25em; margin:0 0 1.2em }
.prose li{ margin-bottom:.5em }
.prose li::marker{ color:var(--pipe) }

/* ---------- cards, facts, tables ---------- */
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--pipe-pale); border:1px solid var(--pipe-pale); border-radius:var(--r-lg); overflow:hidden; margin:0 0 8px }
.fact{ background:var(--white); padding:20px }
.fact b{ display:block; font-family:var(--serif); font-size:2rem; font-weight:600; line-height:1; letter-spacing:-.02em }
.fact span{ display:block; font-size:13.5px; color:var(--ink-soft); margin-top:7px; line-height:1.4 }
.sec--ink .fact{ background:#1d2a35 }
.sec--ink .facts{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.1) }
.sec--ink .fact span{ color:rgba(255,255,255,.66) }
.src{ font-size:12.5px; color:var(--ink-soft) }
.sec--ink .src{ color:rgba(255,255,255,.55) }

.cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:24px; margin:26px 0 }
.col-item{ border-top:2px solid var(--ink); padding-top:14px }
.col-item h3{ margin-bottom:.4em }
.col-item p{ font-size:15.5px; color:var(--ink-soft); margin:0 }
.sec--ink .col-item{ border-top-color:var(--brass) }
.sec--ink .col-item p{ color:rgba(255,255,255,.74) }

.steps{ counter-reset:s; list-style:none; padding:0; margin:26px 0 0 }
.steps li{ counter-increment:s; position:relative; padding:0 0 22px 52px; border-left:1px solid var(--pipe-pale); margin-left:16px }
.steps li:last-child{ border-left-color:transparent; padding-bottom:0 }
.steps li::before{
  content:counter(s); position:absolute; left:-16px; top:-2px; width:32px; height:32px;
  display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#fff;
  font-size:14px; font-weight:650; font-family:var(--sans);
}
.steps h3{ margin-bottom:.3em }
.steps p{ font-size:15.5px; color:var(--ink-soft); margin:0 }

.table-scroll{ overflow-x:auto; margin:22px 0; border:1px solid var(--pipe-pale); border-radius:var(--r-lg); background:var(--white) }
table{ width:100%; border-collapse:collapse; font-size:15px; min-width:560px }
caption{ text-align:left; font-size:13px; color:var(--ink-soft); padding:12px 16px 0 }
th,td{ text-align:left; padding:12px 16px; border-bottom:1px solid var(--pipe-pale); vertical-align:top }
thead th{ background:var(--paper); font-size:13px; font-weight:650; letter-spacing:.01em }
tbody tr:last-child td{ border-bottom:0 }
td b{ white-space:nowrap }

.note{ border-left:4px solid var(--brass); background:var(--brass-pale); padding:16px 20px; border-radius:0 var(--r-lg) var(--r-lg) 0; margin:24px 0; font-size:15.5px }
.note p:last-child{ margin-bottom:0 }
.note--rust{ border-left-color:var(--rust); background:var(--rust-pale) }
.note--patina{ border-left-color:var(--patina); background:var(--patina-pale) }

details.qa{ border-bottom:1px solid var(--pipe-pale); padding:4px 0 }
details.qa summary{ cursor:pointer; padding:14px 34px 14px 0; font-weight:600; font-size:16.5px; position:relative; list-style:none }
details.qa summary::-webkit-details-marker{ display:none }
details.qa summary::after{ content:"+"; position:absolute; right:4px; top:11px; font-size:22px; font-weight:400; color:var(--patina) }
details.qa[open] summary::after{ content:"–" }
details.qa p{ font-size:16px; color:var(--ink-soft); max-width:64ch }

.linklist{ list-style:none; padding:0; margin:20px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--pipe-pale); border:1px solid var(--pipe-pale); border-radius:var(--r-lg); overflow:hidden }
.linklist a{ display:block; background:var(--white); padding:15px 18px; text-decoration:none; font-weight:550; font-size:15.5px; color:var(--ink) }
.linklist a:hover{ background:var(--patina-pale); color:var(--patina-dk) }
.linklist a small{ display:block; font-weight:400; font-size:13px; color:var(--ink-soft) }

/* ---------- quote form ---------- */
.quote{
  color:var(--ink);
  background:var(--white); border:1px solid var(--pipe-pale); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden;
}
.quote-head{ background:var(--ink); color:#fff; padding:17px 22px }
.quote-head h3{ color:#fff; margin:0; font-size:1.1rem }
.quote-head p{ margin:4px 0 0; font-size:13px; color:rgba(255,255,255,.7) }
.quote-body{ padding:20px 22px 22px }
.progress{ height:4px; background:var(--pipe-pale); border-radius:99px; overflow:hidden; margin-bottom:18px }
.progress i{ display:block; height:100%; width:14%; background:var(--patina); transition:width .25s ease }
.step[hidden]{ display:none }
.step > p.q:focus{ outline:none }
.step > p.q{ font-size:16.5px; font-weight:600; margin:0 0 4px; line-height:1.3 }
.step > p.hint{ font-size:13.5px; color:var(--ink-soft); margin:0 0 14px }
.opts{ display:grid; gap:8px; margin-bottom:16px }
.opts--2{ grid-template-columns:1fr 1fr }
.opt{
  display:block; width:100%; text-align:left; cursor:pointer; font-family:var(--sans);
  font-size:15px; font-weight:550; color:var(--ink); background:var(--white);
  border:1px solid var(--pipe); border-radius:var(--r); padding:12px 14px;
  transition:border-color .12s ease, background .12s ease;
}
.opt:hover{ border-color:var(--patina); background:var(--patina-pale) }
.opt[aria-pressed="true"]{ border-color:var(--patina); background:var(--patina-pale); box-shadow:inset 0 0 0 1px var(--patina) }
.opt small{ display:block; font-weight:400; font-size:12.5px; color:var(--ink-soft) }
.field{ margin-bottom:13px }
.field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:5px }
.field input,.field select,.field textarea{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--ink);
  padding:11px 12px; border:1px solid var(--pipe); border-radius:var(--r); background:var(--white);
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--patina); outline:2px solid var(--patina-pale) }
.field textarea{ min-height:80px; resize:vertical }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:11px }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--ink-soft); line-height:1.45; margin:14px 0 16px }
.consent input{ flex:0 0 auto; width:17px; height:17px; margin-top:2px; accent-color:var(--patina) }
.steps-nav{ display:flex; gap:10px; align-items:center; margin-top:4px }
.back{ background:none; border:0; color:var(--ink-soft); font-family:var(--sans); font-size:14px; cursor:pointer; text-decoration:underline; padding:6px 2px }
.err{ color:var(--rust); font-size:13.5px; font-weight:550; margin:0 0 10px }
.err[hidden]{ display:none }
.estimate{ background:var(--patina-pale); border-radius:var(--r); padding:16px 18px; margin:0 0 16px }
.estimate b{ display:block; font-family:var(--serif); font-size:1.85rem; line-height:1; letter-spacing:-.02em }
.estimate span{ font-size:13px; color:var(--ink-soft); display:block; margin-top:6px }
.trust{ list-style:none; margin:16px 0 0; padding:0; font-size:13px; color:var(--ink-soft) }
.trust li{ padding-left:20px; position:relative; margin-bottom:5px }
.trust li::before{ content:"✓"; position:absolute; left:0; color:var(--patina); font-weight:700 }

/* ---------- CTA band ---------- */
.cta{ background:var(--patina-dk); color:#fff; padding:clamp(40px,3vw+28px,64px) 0; text-align:center }
.cta h2{ color:#fff; max-width:26ch; margin-inline:auto }
.cta p{ color:rgba(255,255,255,.82); max-width:54ch; margin-inline:auto }
.cta-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:rgba(255,255,255,.7); padding:52px 0 26px; font-size:14.5px }
.foot h4{ color:#fff; font-size:13px; font-weight:650; letter-spacing:.03em; margin:0 0 12px }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:28px } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr } }
.foot ul{ list-style:none; margin:0; padding:0 }
.foot li{ margin-bottom:8px }
.foot a{ color:rgba(255,255,255,.76); text-decoration:none }
.foot a:hover{ color:#fff; text-decoration:underline }
.foot-legal{ border-top:1px solid rgba(255,255,255,.14); margin-top:38px; padding-top:20px; font-size:12.5px; color:rgba(255,255,255,.55) }
.foot-legal p{ max-width:none }
.foot-tel{ font-size:15.5px; font-weight:600; margin:14px 0 0 }
.foot-tel a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4) }
.foot-tel a:hover{ color:#fff }
.disclose{ background:rgba(255,255,255,.06); border-radius:var(--r); padding:13px 15px; font-size:12.5px; color:rgba(255,255,255,.66); margin-top:16px }

/* ---------- mobile call bar ---------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:none;
  gap:8px; padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:var(--white); border-top:1px solid var(--pipe-pale);
  box-shadow:0 -6px 20px -10px rgba(22,32,42,.3);
}
.callbar .btn{ flex:1; padding:13px 10px; font-size:15px }
@media (max-width:760px){
  .callbar{ display:flex }
  body{ padding-bottom:74px }
}

/* ---------- aside (home sidebar) ---------- */
.aside{
  background:var(--white); border:1px solid var(--pipe-pale); border-radius:var(--r-lg);
  padding:22px 24px 24px; box-shadow:var(--shadow);
}
.aside h3{ margin-bottom:.7em }
.aside ol{ padding-left:1.15em; margin:0 0 20px; font-size:15px; color:var(--ink-soft) }
.aside li{ margin-bottom:.7em }
.aside li strong{ color:var(--ink) }
.aside li::marker{ color:var(--patina); font-weight:700 }

/* ---------- colour isolation -------------------------------------------
   The form and the aside are dropped into dark sections as well as light
   ones, so nothing inside them inherits a section's text colour. -------- */
.quote p, .aside p, .aside li{ color:var(--ink-soft) }
.quote .q, .quote .field label, .quote .estimate b, .aside h3, .aside strong{ color:var(--ink) }
.quote .err{ color:var(--rust) }
.quote a, .aside a{ color:var(--patina-dk) }
.quote a:hover, .aside a:hover{ color:var(--patina) }
.quote .opt{ color:var(--ink) }
.quote .opt small, .quote .trust, .quote .consent, .quote .hint{ color:var(--ink-soft) }
.aside{ color:var(--ink) }