/* ==========================================================================
   Synergy Gas & Plumbing — site.css  (v2: high contrast, imagery, lead capture)
   All text meets WCAG AA. Dark navy is used for chrome only, never long copy.
   ========================================================================== */

:root{
  /* --- text colours: all AA or better on their backgrounds --- */
  --ink:#101E2B;          /* body text on white       — 16.1:1 */
  --ink-soft:#3C4C5B;     /* secondary text on white  —  8.3:1 */
  --muted:#4A5A69;        /* labels on white          —  7.2:1 */

  /* --- brand --- */
  --navy:#0B1F33;         /* chrome: header bar, footer */
  --navy-2:#143247;
  --flame:#F26A1B;        /* decorative fills, borders, rules — never text */
  --flame-btn:#C64D09;    /* button/band fill — white text on this is 4.7:1 */
  --flame-text:#B04405;   /* the readable orange for text — 5.4:1 on white */
  --flame-dark:#933804;
  --gas:#0F5F7D;          /* link blue on white       —  6.9:1 */
  --gas-light:#A9E1F8;    /* link blue on navy        — 11.6:1 */
  --safe:#166B3D;

  /* --- surfaces --- */
  --paper:#FFFFFF;
  --paper-2:#F4F7F9;
  --paper-3:#EAF0F4;
  --line:#C9D5DE;
  --line-soft:#DFE7EC;

  --wrap:1180px;
  --gut:clamp(1.15rem,4vw,2.5rem);
  --r:6px;
  --shadow:0 1px 2px rgba(16,30,43,.05),0 10px 28px -14px rgba(16,30,43,.28);
  --shadow-lg:0 24px 60px -30px rgba(11,31,51,.5);

  --display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

*,*::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(--body);font-size:1.125rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gas);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--flame-text)}
:focus-visible{outline:3px solid var(--flame-text);outline-offset:2px;border-radius:3px}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(2.1rem,5vw,3.4rem);letter-spacing:-.03em}
h2{font-size:clamp(1.65rem,3.2vw,2.3rem)}
h3{font-size:clamp(1.2rem,2vw,1.45rem);letter-spacing:-.01em}
h4{font-size:1.05rem;letter-spacing:0}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.25em;padding-left:1.2em}
li{margin-bottom:.5em}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:70ch}
.skip{position:absolute;left:-9999px;top:0;background:var(--flame-btn);color:#fff;padding:.75rem 1.1rem;z-index:999;font-weight:700}
.skip:focus{left:0}

/* --- eyebrow label ------------------------------------------------------- */
.tag{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--flame-text);display:inline-flex;align-items:center;gap:.55rem;margin-bottom:.9rem;
}
.tag::before{content:"";width:24px;height:3px;background:var(--flame);flex:none;border-radius:2px}
.tag--light{color:#FFC58F}
.tag--light::before{background:#FFC58F}

/* --- top utility bar ----------------------------------------------------- */
.util{background:var(--navy);color:#D8E6EF;font-family:var(--mono);font-size:.8rem}
.util .wrap{display:flex;gap:1.2rem;align-items:center;justify-content:space-between;min-height:42px;flex-wrap:wrap}
.util a{color:#fff;text-decoration:none;font-weight:500}
.util a:hover{color:#FFC58F;text-decoration:underline}
.util__status{display:inline-flex;align-items:center;gap:.55rem;color:#fff}
.dot{width:9px;height:9px;border-radius:50%;background:#3FD07E;flex:none;box-shadow:0 0 0 3px rgba(63,208,126,.3)}
.util__links{display:flex;gap:1.3rem;flex-wrap:wrap;align-items:center}
.util__badge{background:rgba(255,255,255,.14);padding:.2rem .55rem;border-radius:3px;color:#fff}

/* --- header -------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--line)}
.hdr .wrap{max-width:none}
.hdr .wrap{display:flex;align-items:center;gap:1rem;min-height:80px}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;margin-right:auto}
.brand img{height:48px;width:auto}
.brand__txt{font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1.15;color:var(--ink);letter-spacing:-.02em}
.brand__txt span{display:block;font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.09em;color:var(--muted);text-transform:uppercase;margin-top:3px;white-space:nowrap}

.nav{display:flex;align-items:center;gap:.35rem}
.nav a{font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;padding:.6rem .7rem;border-radius:var(--r)}
.nav a:hover,.nav a[aria-current="page"]{background:var(--paper-3);color:var(--flame-text)}
.has-sub{position:relative}
.has-sub>button{
  font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--ink);
  background:none;border:0;cursor:pointer;padding:.6rem .7rem;border-radius:var(--r);
  display:inline-flex;align-items:center;gap:.35rem;
}
.has-sub>button:hover{background:var(--paper-3);color:var(--flame-text)}
.has-sub>button::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.sub{position:absolute;top:calc(100% + 8px);left:0;min-width:280px;background:#fff;border:1px solid var(--line);
  border-top:4px solid var(--flame);box-shadow:var(--shadow);padding:.6rem;display:none;border-radius:var(--r);
  color:var(--ink);max-height:70vh;overflow-y:auto}
.has-sub[data-open="true"] .sub{display:block}
.sub a{display:block;font-size:.93rem;font-weight:600;padding:.55rem .65rem;color:var(--ink);border-radius:4px}
.sub a:hover{background:var(--paper-2);color:var(--flame-text)}
.sub--wide{columns:2;column-gap:.4rem;min-width:480px}
.sub--wide a{break-inside:avoid}
.sub__all{border-top:1px solid var(--line-soft);margin-top:.3rem;padding-top:.7rem!important;
  color:var(--flame-text)!important;column-span:all}
.hdr__cta{display:flex;align-items:center;gap:.55rem}
.navtoggle{display:none;background:var(--navy);border:0;color:#fff;padding:.65rem .9rem;border-radius:var(--r);font-family:var(--mono);font-size:.78rem;letter-spacing:.09em;cursor:pointer}

/* --- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  padding:.88rem 1.4rem;border-radius:var(--r);text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .12s ease,background .15s ease,box-shadow .15s ease;line-height:1.2;
}
.btn:hover{transform:translateY(-1px)}
.btn--call{background:var(--flame-btn);color:#fff;box-shadow:0 8px 20px -10px rgba(198,77,9,.9)}
.btn--call:hover{background:#A63D06;color:#fff}
.btn--book{background:var(--navy);color:#fff}
.btn--book:hover{background:var(--navy-2);color:#fff}
.btn--wa{background:#127A3C;color:#fff}
.btn--wa:hover{background:#0D5C2D;color:#fff}
.btn--ghost{border-color:var(--ink);color:var(--ink);background:#fff}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--light{background:#fff;color:var(--flame-dark)}
.btn--light:hover{background:#FFF4EC;color:var(--flame-dark)}
.btn--outline-light{border-color:rgba(255,255,255,.6);color:#fff}
.btn--outline-light:hover{background:rgba(255,255,255,.16);color:#fff}
.btn--sm{padding:.62rem 1rem;font-size:.9rem}
.btn--block{width:100%}

/* --- sections ------------------------------------------------------------ */
.sec{padding:clamp(3rem,7vw,5.5rem) 0}
.sec--tight{padding:clamp(2.2rem,5vw,3.6rem) 0}
.sec--alt{background:var(--paper-2)}
.sec--navy{background:var(--navy);color:#E9F1F6}
.sec--navy h2,.sec--navy h3{color:#fff}
.sec--navy p{color:#C6D9E4}
.sec--navy a{color:var(--gas-light)}
.sec__head{max-width:64ch;margin-bottom:2.3rem}
.sec__head p{color:var(--ink-soft);font-size:1.14rem}

/* --- hero ---------------------------------------------------------------- */
.hero{background:var(--navy) url('/assets/img/hero-vans.jpg') center 68%/cover no-repeat;color:#fff;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,31,51,.94) 0%,rgba(11,31,51,.88) 42%,rgba(11,31,51,.62) 100%),
             radial-gradient(900px 500px at 78% 12%,rgba(242,106,27,.16),transparent 62%),
             radial-gradient(700px 480px at 8% 92%,rgba(15,95,125,.3),transparent 65%);
}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:linear-gradient(90deg,var(--gas),var(--flame) 55%,#FFB703)}
.hero__grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center;padding:clamp(2.6rem,6vw,4.8rem) 0}
.hero h1{color:#fff;margin-bottom:.6rem;text-wrap:balance}
.hero__lead{font-size:clamp(1.12rem,1.7vw,1.28rem);color:#DCE9F1;max-width:54ch}
.hero__actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.7rem}
.hero__trust{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.22);font-family:var(--mono);font-size:.8rem;color:#C6D9E4}
.hero__trust b{display:block;font-family:var(--display);font-size:1.5rem;color:#fff;letter-spacing:-.02em;margin-bottom:2px}

/* --- trust bar ----------------------------------------------------------- */
.trustbar{background:#fff;border-bottom:1px solid var(--line)}
.trustbar .wrap{display:flex;gap:clamp(.5rem,1.6vw,1.3rem);align-items:center;justify-content:space-between;padding:1rem var(--gut);flex-wrap:wrap}
.trustbar__item{display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:700;color:var(--ink);white-space:nowrap}
.trustbar__item svg{width:20px;height:20px}
.trustbar__item svg{flex:none}
.trustbar__item small{display:block;font-family:var(--mono);font-size:.73rem;font-weight:500;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-top:1px}

/* --- the docket ---------------------------------------------------------- */
.docket{background:#fff;color:var(--ink);border:1px solid var(--line);border-top:5px solid var(--flame);border-radius:var(--r);box-shadow:var(--shadow)}
.docket__hd{padding:1.15rem 1.35rem;border-bottom:1px dashed var(--line);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.docket__hd h2,.docket__hd h3{margin:0;font-size:1.2rem}
.docket__ref{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.docket__body{padding:1.25rem 1.35rem 1.5rem}
.docket__row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.68rem 0;border-bottom:1px dotted var(--line);font-size:1rem}
.docket__row:last-of-type{border-bottom:0}
.docket__k{font-family:var(--mono);font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.docket__v{font-weight:800;text-align:right;font-family:var(--display);color:var(--ink)}
.docket__foot{padding:0 1.35rem 1.4rem;display:grid;gap:.6rem}

/* --- LEAD CAPTURE: quote wizard ------------------------------------------ */
.lead{background:#fff;color:var(--ink);border:1px solid var(--line);border-top:5px solid var(--flame);border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden}
.lead__hd{padding:1.2rem 1.4rem 1rem;background:var(--paper-2);border-bottom:1px solid var(--line)}
.lead__hd h2,.lead__hd h3{margin:0 0 .25rem;font-size:1.32rem;color:var(--ink)}
.lead__hd p{margin:0;font-size:.98rem;color:var(--muted)}
.lead__prog{display:flex;gap:5px;margin-top:.95rem}
.lead__prog span{height:5px;flex:1;background:var(--line);border-radius:3px;transition:background .2s ease}
.lead__prog span.on{background:var(--flame)}
.lead__body{padding:1.3rem 1.4rem 1.5rem}
.lead__step{display:none}
.lead__step.on{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.lead__q{font-family:var(--display);font-weight:800;font-size:1.14rem;margin:0 0 .9rem;color:var(--ink)}
.opts{display:grid;gap:.5rem;margin-bottom:1rem}
.opts--2{grid-template-columns:1fr 1fr}
.opt{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;text-align:left;
  background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:.85rem 1rem;
  font-family:var(--body);font-size:1.02rem;font-weight:700;color:var(--ink);cursor:pointer;width:100%;
  transition:border-color .12s ease,background .12s ease;
}
.opt:hover{border-color:var(--flame);background:#FFF7F1}
.opt[aria-pressed="true"]{border-color:var(--flame);background:#FFF1E6}
.opt span{font-family:var(--mono);font-size:.79rem;color:var(--muted);font-weight:500}
.lead__est{background:var(--paper-3);border-left:5px solid var(--gas);padding:1rem 1.1rem;border-radius:var(--r);margin-bottom:1.1rem}
.lead__est strong{display:block;font-family:var(--display);font-size:1.7rem;color:var(--ink);letter-spacing:-.02em;line-height:1.2}
.lead__est small{font-size:.92rem;color:var(--muted);display:block;margin-top:.25rem;line-height:1.5}
.lead__back{background:none;border:0;font-family:var(--mono);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);cursor:pointer;padding:.45rem 0;text-decoration:underline}
.lead__back:hover{color:var(--flame-text)}
.lead__done{text-align:center;padding:.6rem 0}
.lead__done h3{color:var(--safe)}

/* --- callback strip ------------------------------------------------------ */
.callback{background:#FFF1E6;border:1px solid #F0BC93;border-radius:var(--r);padding:1.3rem 1.4rem;margin:2.2rem 0}
.callback h3{margin:0 0 .35rem;font-size:1.2rem}
.callback p{margin:0 0 1rem;color:var(--ink-soft);font-size:1.02rem}
.callback__grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.8rem}
.callback__grid input,.callback__grid select{width:100%;min-width:0;font-family:inherit}
@media (max-width:520px){.callback__grid{grid-template-columns:1fr}}

/* --- cards --------------------------------------------------------------- */
.grid{display:grid;gap:1.2rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.card:hover{border-color:var(--flame);transform:translateY(-3px);box-shadow:var(--shadow)}
.card__img{background:linear-gradient(155deg,var(--paper-3),var(--paper-2));aspect-ratio:16/10;overflow:hidden;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line-soft)}
.card__img img{width:100%;height:100%;object-fit:contain;padding:.7rem}
.svc-icon-tile{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.svc-icon-tile .icn{width:56px;height:56px;border-radius:50%;background:#FFF1E6;border:1px solid #F0BC93;
  display:flex;align-items:center;justify-content:center;color:var(--flame-text)}
.svc-icon-tile .icn svg{width:30px;height:30px}
.svc-figure-tile{background:linear-gradient(155deg,var(--paper-3),var(--paper-2));border:1px solid var(--line);
  border-radius:var(--r);display:flex;align-items:center;justify-content:center;padding:2.4rem;margin:2.2rem 0}
.svc-figure-tile .icn{width:112px;height:112px;border-radius:50%;background:#FFF1E6;border:1px solid #F0BC93;
  display:flex;align-items:center;justify-content:center;color:var(--flame-text)}
.svc-figure-tile .icn svg{width:60px;height:60px}
.card__in{padding:1.3rem 1.35rem 1.4rem;display:flex;flex-direction:column;flex:1}
.card h3{margin-bottom:.45rem;font-size:1.22rem}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--flame-text)}
.card p{color:var(--ink-soft);font-size:1rem;margin-bottom:1rem}
.card__price{display:inline-block;font-family:var(--mono);font-size:.81rem;font-weight:600;letter-spacing:.04em;color:var(--flame-text);background:#FFF1E6;border:1px solid #F0BC93;padding:.28rem .62rem;border-radius:3px;margin-bottom:.85rem;align-self:flex-start}
.card__meta{margin-top:auto;font-family:var(--display);font-size:.98rem;font-weight:700;color:var(--gas);text-decoration:none}
.card__meta::after{content:" →"}
.card__meta:hover{color:var(--flame-text)}

/* --- imagery ------------------------------------------------------------- */
.figure{margin:2.2rem 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.figure img{width:100%}
.figure figcaption{padding:.85rem 1.1rem;font-size:.95rem;color:var(--muted);background:var(--paper-2);border-top:1px solid var(--line-soft)}
.hero__shot{border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06)}
.hero__shot img{width:100%;height:100%;object-fit:contain;padding:1rem}
.boilers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:1.9rem 0}
.boiler{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;text-align:center}
.boiler img{height:150px;width:100%;object-fit:contain;margin-bottom:.85rem}
.boiler h4{margin:0 0 .25rem;font-size:1.05rem}
.boiler .p{font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--flame-text);margin:.25rem 0 0}
.boiler small{font-family:var(--mono);font-size:.73rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.brands{display:flex;gap:clamp(1.2rem,4vw,3rem);align-items:center;justify-content:center;flex-wrap:wrap;padding:.5rem 0}
.brands--text .brand-name{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink-soft);letter-spacing:.01em}
.brands img{height:48px;width:auto;object-fit:contain}

/* --- answer block -------------------------------------------------------- */
.answer{background:var(--paper-2);border:1px solid var(--line);border-left:5px solid var(--gas);padding:1.3rem 1.4rem;margin:0 0 2rem;border-radius:var(--r)}
.answer p{font-size:1.12rem;margin-bottom:0;color:var(--ink)}

/* --- tables -------------------------------------------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:1.7rem}
table{width:100%;border-collapse:collapse;font-size:1.03rem;min-width:420px}
caption{text-align:left;font-family:var(--mono);font-size:.77rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:.95rem 1rem}
th,td{padding:.88rem 1rem;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{background:var(--navy);color:#fff;font-family:var(--mono);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;border-bottom:0}
tbody tr:last-child td{border-bottom:0}
td:last-child,th:last-child{text-align:right;font-family:var(--display);font-weight:800;white-space:nowrap}
tbody tr:nth-child(even){background:var(--paper-2)}

/* --- quick price guide: horizontal trust checks under the docket ---------- */
.trustrow{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;flex-wrap:wrap;gap:.6rem 1rem}
.trustrow li{display:flex;align-items:center;gap:.45rem;font-size:.88rem;font-weight:600;color:var(--ink)}
.trustrow li::before{
  content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--safe);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/60% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/60% no-repeat;
}
.qpg__note{font-size:.85rem;color:var(--muted);margin:0 0 1rem}

/* --- How It Works: 4-step process -------------------------------------- */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;counter-reset:step}
.step4{position:relative;padding-top:.3rem}
.step4__ico{width:56px;height:56px;border-radius:50%;background:#FFF1E6;border:1px solid #F0BC93;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1rem}
.step4__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--flame-text);font-weight:700;margin-bottom:.35rem}
.step4 h3{font-size:1.1rem;margin-bottom:.4rem}
.step4 p{font-size:.95rem;color:var(--ink-soft);margin-bottom:0}
.step4__arrow{display:none}
@media (min-width:901px){
  .step4:not(:last-child)::after{
    content:"";position:absolute;top:28px;left:calc(100% - .3rem);width:calc(1.4rem + .6rem);height:2px;
    background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 11px);
  }
}


/* --- Why us: numbered differentiator grid -------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.why4{border-top:3px solid var(--flame);padding-top:1.1rem}
.why4__n{font-family:var(--display);font-weight:800;font-size:2.3rem;color:var(--line);line-height:1;letter-spacing:-.02em}
.why4 h3{font-size:1.12rem;margin:.5rem 0 .45rem}
.why4 p{color:var(--ink-soft);font-size:.96rem;margin-bottom:0}

/* --- promo blocks: Landlords / New Boiler / Boiler Repairs --------------- */
.promo{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.6rem,4vw,3rem);align-items:center;padding:clamp(2rem,4vw,2.8rem) 0;border-bottom:1px solid var(--line-soft)}
.promo:last-child{border-bottom:0}
.promo:nth-child(even){grid-template-columns:1.15fr .85fr}
.promo:nth-child(even) .promo__visual{order:2}
.promo__visual{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:3.4rem;overflow:hidden}
.promo__body h3{font-size:1.5rem;margin-bottom:.7rem}
.promo__body p{color:var(--ink-soft);font-size:1.02rem}
.promo__body .checks{margin:1rem 0 1.3rem}
@media (max-width:900px){
  .promo,.promo:nth-child(even){grid-template-columns:1fr}
  .promo:nth-child(even) .promo__visual{order:0}
  .promo__visual{aspect-ratio:16/9}
}

.faq{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 1.25rem;font-family:var(--display);font-weight:700;font-size:1.12rem;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--flame-text);font-size:1.6rem;line-height:1;flex:none;font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--flame-text);background:var(--paper-2)}
.faq__a{padding:1rem 1.25rem 1.3rem;max-width:76ch;color:var(--ink-soft)}
.faq__a p:last-child{margin-bottom:0}

/* --- area list ----------------------------------------------------------- */
.arealist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem;list-style:none;padding:0;margin:0}
.arealist a{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;background:#fff;border:1px solid var(--line);padding:.82rem 1rem;text-decoration:none;color:var(--ink);font-weight:700;font-size:1rem;border-radius:var(--r)}
.arealist a:hover{border-color:var(--flame);color:var(--flame-text);background:#FFF7F1}
.arealist span{font-family:var(--mono);font-size:.75rem;color:var(--muted);font-weight:500}
.sec--navy .arealist a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
.sec--navy .arealist a:hover{background:rgba(255,255,255,.16);color:#fff;border-color:#FFC58F}
.sec--navy .arealist span{color:#B4CCDA}

/* --- reviews ------------------------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.quote{background:#fff;border:1px solid var(--line);padding:1.45rem;border-radius:var(--r);display:flex;flex-direction:column}
.quote p{font-size:1.06rem;margin-bottom:1rem;color:var(--ink)}
.stars{color:var(--flame);letter-spacing:.16em;font-size:1.05rem;margin-bottom:.7rem}
.quote cite{margin-top:auto;font-style:normal;font-family:var(--mono);font-size:.79rem;letter-spacing:.04em;color:var(--muted)}

/* --- breadcrumbs & page head --------------------------------------------- */
.crumbs{font-family:var(--mono);font-size:.79rem;color:var(--muted);padding:1rem 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:0}
.crumbs li::after{content:"/";margin-left:.45rem;color:var(--line)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--flame-text)}

.phead{background:var(--navy);color:#fff;position:relative}
.phead::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 88% 10%,rgba(242,106,27,.2),transparent 62%)}
.phead::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:linear-gradient(90deg,var(--gas),var(--flame) 60%,#FFB703)}
.phead>*{position:relative;z-index:1}
.phead .crumbs,.phead .crumbs a{color:#B4CCDA}
.phead .crumbs a:hover{color:#FFC58F}
.phead__in{padding:1.5rem 0 clamp(2.2rem,5vw,3.4rem);display:grid;grid-template-columns:1.35fr .65fr;gap:2rem;align-items:end}
.phead h1{color:#fff;margin-bottom:.45rem}
.phead p{color:#DCE9F1;max-width:56ch;margin:0;font-size:1.1rem}
.phead__side{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}

/* --- prose --------------------------------------------------------------- */
.prose h2{margin-top:2.6rem}
.prose h3{margin-top:1.9rem}
.prose>*:first-child{margin-top:0}
.prose ul li::marker{color:var(--flame)}
.prose p,.prose li{color:var(--ink)}
.checks{list-style:none;padding:0}
.checks li{padding-left:1.9rem;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.6em;width:12px;height:7px;border-left:3px solid var(--safe);border-bottom:3px solid var(--safe);transform:rotate(-45deg)}

/* --- layout -------------------------------------------------------------- */
.cols{display:grid;grid-template-columns:1fr 360px;gap:clamp(1.8rem,4vw,3rem);align-items:start}
.aside{position:sticky;top:100px;display:grid;gap:1.2rem}

/* --- CTA band ------------------------------------------------------------ */
.band{background:linear-gradient(100deg,#9E3D05,#B84709 55%,#C9520C)}
.band .wrap{padding:clamp(2.2rem,4vw,3rem) var(--gut);display:flex;gap:1.6rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band h2{color:#fff;margin:0 0 .35rem}
.band p{margin:0;color:#FFF3EA;max-width:50ch;font-size:1.08rem}
.band__act{display:flex;gap:.6rem;flex-wrap:wrap}

/* --- forms --------------------------------------------------------------- */
.field{display:grid;gap:.4rem;margin-bottom:1rem}
.field label{font-family:var(--mono);font-size:.79rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
input,select,textarea{
  font-family:var(--body);font-size:1.05rem;padding:.8rem .9rem;border:2px solid var(--line);
  border-radius:var(--r);background:#fff;color:var(--ink);width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--gas);outline:3px solid rgba(15,95,125,.2)}
.form-note{font-size:.93rem;color:var(--muted)}

/* --- footer -------------------------------------------------------------- */
.ftr{background:var(--navy);color:#C6D9E4;padding:clamp(2.8rem,5vw,4rem) 0 0;font-size:1rem}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:2.2rem}
.ftr h3{color:#fff;font-size:.86rem;font-family:var(--mono);font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.1rem}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:.55rem}
.ftr a{color:#DCE9F1;text-decoration:none}
.ftr a:hover{color:#FFC58F;text-decoration:underline}
.ftr img{height:56px;width:auto;margin-bottom:1.1rem}
.ftr__legal{margin-top:2.8rem;border-top:1px solid rgba(255,255,255,.18);padding:1.3rem 0 1.6rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.79rem;color:#B4CCDA}
.ftr__legal a{color:#B4CCDA}

/* --- sticky mobile action bar -------------------------------------------- */
.callbar{display:none}
.wa-float{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:85;height:52px;padding:0 1.2rem 0 .9rem;border-radius:999px;
  background:#127A3C;display:flex;align-items:center;gap:.55rem;text-decoration:none;
  box-shadow:0 10px 24px -8px rgba(18,122,60,.55);
  opacity:0;transform:translateY(12px) scale(.95);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,background .15s ease;
}
.wa-float span{font-family:var(--display);font-weight:700;font-size:.95rem;color:#fff;white-space:nowrap}
.wa-float.on{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.wa-float:hover{background:#0D5C2D}
@media (max-width:640px){.wa-float{display:none}}

/* --- responsive ---------------------------------------------------------- */
/* The full nav (logo + wordmark + 7 links + 2 buttons) needs real room to
   breathe. Rather than let it squeeze — and at some widths visibly overlap —
   between 900 and ~1180px, it switches to the hamburger menu earlier, at the
   same point content layout is still comfortably desktop-width. */
@media (max-width:1180px){
  .navtoggle{display:inline-block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;padding:.6rem var(--gut) 1.2rem;box-shadow:var(--shadow);max-height:75vh;overflow-y:auto}
  .nav[data-open="true"]{display:flex}
  .nav a,.has-sub>button{width:100%;text-align:left;padding:.8rem .3rem;border-bottom:1px solid var(--line-soft)}
  .has-sub{position:static}
  .sub{position:static;display:block;border:0;box-shadow:none;padding:.1rem 0 .5rem 1rem;min-width:0}
  .sub--wide{columns:1;min-width:0}
  .sub a{border-bottom:0;padding:.5rem .3rem;font-weight:500}
  .hdr .wrap{position:relative}
  .hdr__cta .btn--book{display:none}
}
@media (max-width:1020px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr}
  .aside{position:static;grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .grid--3,.quotes,.boilers,.steps4,.whygrid{grid-template-columns:1fr 1fr}
  .step4:not(:last-child)::after{display:none}
  .phead__in{grid-template-columns:1fr;align-items:start}
  .phead__side{justify-content:flex-start}
}
@media (max-width:640px){
  body{font-size:1.08rem;padding-bottom:70px}
  .grid--3,.grid--2,.quotes,.aside,.boilers,.opts--2,.steps4,.whygrid{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr}
  .util__links{display:none}
  .brand__txt{display:none}
  .callbar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;position:fixed;bottom:0;left:0;right:0;z-index:90;background:var(--line);border-top:1px solid var(--line)}
  .callbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:.72rem .3rem;text-decoration:none;font-family:var(--display);font-weight:700;font-size:.88rem}
  .callbar a small{font-family:var(--mono);font-size:.63rem;font-weight:500;opacity:.9;letter-spacing:.03em}
  .callbar a:nth-child(1){background:var(--flame-btn);color:#fff}
  .callbar a:nth-child(2){background:#127A3C;color:#fff}
  .callbar a:nth-child(3){background:var(--navy);color:#fff}
}
/* ==========================================================================
   ON-DARK OVERRIDES
   Anything sitting on navy gets an explicitly light colour. These come last
   and are specific enough to beat the light-background defaults, which was
   the bug: .sec__head p and .tag were inheriting dark text onto navy.
   ========================================================================== */
.sec--navy .sec__head p,
.sec--navy .sec__head,
.sec--navy p,
.sec--navy li,
.sec--navy .prose p,
.sec--navy .prose li{color:#D7E7F0}
.sec--navy h1,.sec--navy h2,.sec--navy h3,.sec--navy h4{color:#fff}
.sec--navy .tag,.phead .tag,.hero .tag{color:#FFC58F}
.sec--navy .tag::before,.phead .tag::before,.hero .tag::before{background:#FFC58F}
.sec--navy a:not(.btn):not(.arealist a),
.phead a:not(.btn):not(.crumbs a),
.hero a:not(.btn){color:var(--gas-light);text-decoration:underline}
.sec--navy a:not(.btn):hover,.phead a:not(.btn):hover,.hero a:not(.btn):hover{color:#FFC58F}
.sec--navy .card__meta{color:var(--gas)}          /* cards stay white inside */
.sec--navy .checks li::before{border-color:#5FD99A}
.sec--navy strong{color:#fff}
.sec--navy .form-note{color:#B4CCDA}

/* The orange CTA band: no default blue links on orange */
.band a:not(.btn){color:#fff;text-decoration:underline}
.band a:not(.btn):hover{color:#FFEEE0}

/* Footer links and headings */
.ftr p,.ftr li{color:#D7E7F0}
.ftr .tag{color:#FFC58F}

/* Page-header subtitle and any inline text */
.phead p,.phead li{color:#DFEAF2}
.phead strong{color:#fff}



/* ==========================================================================
   ISLAND COMPONENTS: white/light cards that can appear inside dark sections
   (e.g. the quote wizard sits inside the navy hero). Their own text must
   never inherit the "on dark" colours meant for text sitting directly on
   navy/orange — these rules win the tiebreak by coming last.
   ========================================================================== */
.lead p,.lead li,.lead span,.lead small,.lead strong{color:inherit}
.lead a:not(.btn),
.docket a:not(.btn),
.card a:not(.btn),
.callback a:not(.btn),
.quote a:not(.btn),
.trustbar a:not(.btn),
.answer a:not(.btn),
.faq a:not(.btn),
.boiler a:not(.btn),
.opt{color:var(--gas)}
.lead a:not(.btn):hover,
.docket a:not(.btn):hover,
.card a:not(.btn):hover,
.callback a:not(.btn):hover,
.quote a:not(.btn):hover,
.trustbar a:not(.btn):hover,
.answer a:not(.btn):hover,
.faq a:not(.btn):hover,
.boiler a:not(.btn):hover{color:var(--flame-text)}
.lead__done p{color:var(--ink)}

@media print{.hdr,.util,.callbar,.band,.aside,.lead{display:none}body{background:#fff}}