/* Layout: big-franchise home-service rhythm. Promo bar, navy hero with a dusk house scene and three quick-pick tiles,
   coupon row, then the "what do you need help with" price picker, price board and plain answers on bright white. */
:root{
  --ground:#FFFFFF;
  --tint:#F1F5FA;        /* alternate bands */
  --surface:#FFFFFF;
  --ink:#0E1B2A;
  --ink-soft:#44546A;
  --line:#C9D3DF;
  --amber:#F7B500;       /* fills only on light */
  --amber-text:#7A4E00;
  --on-amber:#0E1B2A;
  --panel:#0C2340;       /* brand navy: hero, board, booking */
  --panel-2:#16365C;
  --panel-ink:#F2F6FB;
  --panel-soft:#B4C3D6;
  --panel-steel:#7F93AC;
  --scene-wall:#24466F; --scene-roof:#081A30; --scene-door:#EEF2F7; --scene-doorline:#A9B8CA; --scene-ground:#07162A; --scene-trim:#3A5E8C;

  --head:"Barlow","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --display:"Barlow Condensed","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,Arial,sans-serif;

  --t-small:0.9375rem;
  --t-body:1.125rem;
  --t-lead:1.25rem;
  --t-h3:1.375rem;
  --t-h2:clamp(1.75rem,1.3rem + 1.9vw,2.5rem);
  --t-h1:clamp(2.125rem,1.4rem + 3vw,3.5rem);
  --gap:clamp(20px,3vw,32px);
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0A1522; --tint:#0F1D2D; --surface:#14263A; --ink:#EAF0F6; --ink-soft:#A9B8C9; --line:#2C3E51;
    --amber:#F7B500; --amber-text:#F7B500; --on-amber:#0E1B2A;
    --panel:#102B4C; --panel-2:#1B3D66; --panel-ink:#F2F6FB; --panel-soft:#B4C3D6; --panel-steel:#8399B3;
    --scene-wall:#2A4F7C; --scene-roof:#06121F; --scene-door:#E6ECF3; --scene-doorline:#A9B8CA; --scene-ground:#06121F; --scene-trim:#3F679A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0A1522; --tint:#0F1D2D; --surface:#14263A; --ink:#EAF0F6; --ink-soft:#A9B8C9; --line:#2C3E51;
  --amber:#F7B500; --amber-text:#F7B500; --on-amber:#0E1B2A;
  --panel:#102B4C; --panel-2:#1B3D66; --panel-ink:#F2F6FB; --panel-soft:#B4C3D6; --panel-steel:#8399B3;
  --scene-wall:#2A4F7C; --scene-roof:#06121F; --scene-door:#E6ECF3; --scene-doorline:#A9B8CA; --scene-ground:#06121F; --scene-trim:#3F679A;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:var(--t-body);line-height:1.55;-webkit-text-size-adjust:100%}
h1,h2,h3,p,dl,dd,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber-text);outline-offset:3px;border-radius:4px}
.on-navy :focus-visible{outline-color:var(--amber)}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1.1;text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);font-weight:700;line-height:1.2}
.big{font-family:var(--display);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.lead{font-size:var(--t-lead);color:var(--ink-soft);max-width:36em}
.label{font-size:var(--t-small);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.prose{max-width:36em}
.prose p + p{margin-top:.9em}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:54px;padding:.6em 1.4em;border-radius:var(--radius);
  font:800 1.0625rem/1.2 var(--head);text-decoration:none;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.btn-go{background:var(--amber);border-color:var(--amber);color:var(--on-amber);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.on-navy .btn{border-color:var(--panel-ink);color:var(--panel-ink)}
.on-navy .btn-go{border-color:var(--amber);color:var(--on-amber)}
.btn:hover{filter:brightness(.95)}


/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--ground);border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(12,35,64,.06)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-height:48px}
.brand svg{flex:none}
.arc{color:var(--amber-text)}
.brand-name{font-family:var(--head);font-weight:800;font-size:1.3125rem;line-height:1}
.brand-name span{display:block;margin-top:3px;font-family:var(--body);font-weight:700;font-size:var(--t-small);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.nav{display:flex;flex-wrap:wrap;gap:0 2px}
.nav a{display:inline-flex;align-items:center;min-height:48px;padding-inline:10px;font:700 1rem/1 var(--head);text-decoration:none}
.nav a:hover{text-decoration:underline;text-underline-offset:5px}
.top-call{display:flex;align-items:center;gap:14px}
.phone{display:inline-flex;flex-direction:column;justify-content:center;min-height:48px;font-family:var(--head);font-weight:800;font-size:1.375rem;line-height:1.1;text-decoration:none;white-space:nowrap}
.phone small{font-family:var(--body);font-size:var(--t-small);font-weight:700;color:var(--ink-soft)}

/* hero */
.hero{background:var(--panel);color:var(--panel-ink);padding-block:clamp(28px,5vw,56px) clamp(28px,4vw,44px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,48px);align-items:center}
.hero-copy{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.hero .label{color:var(--amber)}
.hero .lead{color:var(--panel-soft)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-note{font-size:1rem;color:var(--panel-soft)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(24px,4vw,40px)}
.tile{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 14px;align-items:start;padding:18px;border-radius:var(--radius);background:var(--surface);color:var(--ink);text-decoration:none;border-bottom:4px solid var(--amber)}
.tile svg{grid-row:1 / span 3;color:var(--amber-text)}
.tile h3{font-size:1.25rem}
.tile p{color:var(--ink-soft);font-size:1rem;line-height:1.4}
.tile .go{font:800 1rem/1.3 var(--head);text-decoration:underline;text-underline-offset:4px}
.tile:hover .go{text-decoration-thickness:3px}

/* sections */
.sec{padding-block:clamp(40px,6vw,76px)}
.sec.tinted{background:var(--tint)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:clamp(20px,3vw,32px)}
.sec-head.mid{justify-items:center;text-align:center}

/* offers */
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.offer{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start;padding:22px;border:3px dashed var(--amber-text);border-radius:var(--radius);background:var(--surface)}
.offer .big{font-size:3.5rem;color:var(--ink)}
.offer .big small{font-size:1.5rem;margin-left:.2em}
.offer p{color:var(--ink-soft);font-size:1.0625rem}
.offer .btn{justify-self:start;margin-top:6px}
.fine{margin-top:16px;font-size:1rem;color:var(--ink-soft);text-align:center}

/* picker */
.diag{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,3vw,36px);align-items:start}
.opts{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.opt{min-height:56px;padding:10px 16px;text-align:left;border:2px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:400 1.0625rem/1.25 var(--body);cursor:pointer}
.opt:hover{border-color:var(--ink)}
.opt[aria-pressed="true"]{background:var(--panel);border-color:var(--panel);color:var(--panel-ink);font-weight:700}
.board{background:var(--panel);color:var(--panel-ink);border-radius:var(--radius);padding:clamp(18px,2.6vw,28px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:center}
.door-fig{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.door-fig svg{width:100%;height:auto;display:block}
.door-fig figcaption{font-size:var(--t-small);color:var(--panel-soft)}
.door-panel{fill:var(--panel-2);stroke:var(--panel-steel);stroke-width:1.5}
.floor{stroke:var(--panel-steel);stroke-width:1.5}
.part{stroke:var(--panel-steel);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.part .solid{fill:var(--panel-steel)}
.part.on{stroke:var(--amber);stroke-width:3.5}
.part.on .solid{fill:var(--amber)}
.readout{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.readout .label{color:var(--panel-soft)}
.ro-cause{font:800 var(--t-h3)/1.15 var(--head)}
.ro-price{font-size:4.5rem;color:var(--amber)}
.ro-sub{font-size:1rem;color:var(--panel-soft)}
.ro-now{font-size:1rem}
.ro-now strong{color:var(--amber)}
.board .btn{justify-self:start;margin-top:4px}

/* promises + reviews */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,64px)}
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start}
.promises{display:grid;gap:14px}
.promises li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start}
.promises svg{margin-top:3px;color:var(--amber-text)}
.slot{border:2px dashed var(--line);border-radius:var(--radius);padding:18px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;color:var(--ink-soft);font-size:1rem}
.slot .label{color:var(--amber-text)}
.stars{display:flex;gap:4px;color:var(--line)}

/* price board */
.table-wrap{overflow-x:auto;border-top:4px solid var(--panel)}
table{width:100%;border-collapse:collapse}
caption{text-align:left;caption-side:bottom;padding-top:14px;font-size:1rem;color:var(--ink-soft);max-width:44em}
th,td{text-align:left;vertical-align:top;padding:16px 16px 16px 0;border-bottom:1px solid var(--line)}
thead th{font-size:var(--t-small);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding-block:10px}
tbody th{font:700 1.1875rem/1.3 var(--head);width:30%}
td.inc{color:var(--ink-soft);font-size:1.0625rem}
td.amt,th.amt{text-align:right;padding-right:0;white-space:nowrap}
.price{font-family:var(--display);font-weight:700;line-height:1;font-size:2.25rem;font-variant-numeric:tabular-nums}
.price small{font-family:var(--body);font-size:var(--t-small);font-weight:400;color:var(--ink-soft);margin-right:.35em}
tr.pick th::after{content:"Most common call";display:block;width:max-content;margin-top:6px;padding:2px 8px;background:var(--amber);color:var(--on-amber);font:700 var(--t-small)/1.5 var(--body);border-radius:4px}

.ticks{display:grid;gap:12px}
.ticks li{padding-left:1.4em;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.7em;height:3px;background:var(--amber-text)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:6px 14px;border-radius:999px;background:var(--panel);color:var(--panel-ink);font:700 1rem/1.4 var(--head)}
.areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,44px) clamp(28px,5vw,64px);margin-top:28px}
.area{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start}
.area .label{color:var(--amber-text)}
.faq{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;max-width:44em}
.faq div{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.faq p{color:var(--ink-soft)}

/* booking */
.book{background:var(--panel);color:var(--panel-ink)}
.book .label,.book .lead{color:var(--panel-soft)}
.book-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start}
.book-phone{font-size:clamp(2.25rem,9vw,3.75rem);color:var(--amber);user-select:all}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.f{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0;align-content:start}
.f.wide{grid-column:1 / -1}
.f label{font-size:1rem;font-weight:700}
.f input,.f select,.f textarea{width:100%;min-height:52px;padding:10px 12px;border:2px solid var(--panel-steel);border-radius:8px;background:var(--panel-2);color:var(--panel-ink);font:400 var(--t-body)/1.3 var(--body)}
.f textarea{min-height:96px;resize:vertical}
.f [aria-invalid="true"]{border-color:var(--amber)}
.err{font-size:1rem;color:var(--amber);font-weight:700}
.sent{grid-column:1 / -1;border:2px solid var(--amber);border-radius:var(--radius);padding:16px;display:grid;gap:6px}
.sent strong{color:var(--amber)}

/* footer */
.foot{padding-block:40px 120px;font-size:1rem;color:var(--ink-soft)}
.foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.foot h3{font-size:1.125rem;color:var(--ink);margin-bottom:6px}

.callbar{display:none}

@media (max-width:980px){
  .hero-grid,.two,.book-grid,.diag{grid-template-columns:minmax(0,1fr)}
  .tiles,.offers,.areas,.foot-grid{grid-template-columns:minmax(0,1fr)}
  .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top{position:static}
  .top-call .btn{display:none}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:6;gap:10px;align-items:center;justify-content:space-between;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--panel);color:var(--panel-ink);border-top:1px solid var(--panel-steel)}
  .callbar .phone{color:var(--panel-ink)}
  .callbar .phone small{color:var(--panel-soft)}
  .callbar .btn{min-height:48px;padding-inline:1em}
}
@media (max-width:640px){
  .nav{order:3;width:100%;margin-inline:-10px}
  .top-call .phone{display:none}
  .board,.opts{grid-template-columns:minmax(0,1fr)}
  .door-fig{max-width:260px}
  form{grid-template-columns:minmax(0,1fr)}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding-block:16px;border-bottom:1px solid var(--line)}
  tbody th,tbody td{padding:0;border:0;width:auto}
  tbody th{grid-column:1;grid-row:1}
  td.amt{grid-column:2;grid-row:1}
  td.inc{grid-column:1 / -1;grid-row:2}
}
@media (prefers-reduced-motion:no-preference){
  .part{transition:stroke .2s ease,stroke-width .2s ease}
  html{scroll-behavior:smooth}
}
section[id]{scroll-margin-top:96px}

/* ---- multi-page additions ---- */
.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.hero-perks{display:flex;flex-wrap:wrap;gap:8px}
.hero-perks li{padding:5px 12px;border-radius:999px;background:var(--amber);color:var(--on-amber);font:700 1rem/1.4 var(--head)}
.photo{display:grid;gap:8px;margin:0}
.photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.photo figcaption{font-size:1rem;color:var(--ink-soft)}
tbody th a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
tbody th a:hover{text-decoration-color:var(--amber-text)}
.area h3 a{text-decoration:underline;text-underline-offset:4px}
.ro-more{font-size:1rem}
.ro-more a{color:var(--panel-ink);text-underline-offset:4px}

.price-card{background:var(--surface);color:var(--ink);border-radius:var(--radius);border-bottom:6px solid var(--amber);padding:clamp(20px,3vw,30px);display:grid;gap:10px}
.price-card .label{color:var(--ink-soft)}
.price-card .big{font-size:4.25rem;color:var(--ink)}
.price-card .big small{font-family:var(--body);font-size:1.125rem;font-weight:400;color:var(--ink-soft);margin-right:.3em}
.price-card .ticks{gap:8px;font-size:1.0625rem}
.price-card .upd{font-size:var(--t-small);color:var(--ink-soft)}
.article{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,44px);max-width:46em}
.article section{display:grid;gap:12px}
.article p,.article li{color:var(--ink)}
.article p + p{margin-top:.2em}
.article a{text-underline-offset:3px}
.article .ticks{gap:10px}
.related{display:flex;flex-wrap:wrap;gap:10px}
.related a{display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:8px 16px;border:2px solid var(--line);border-radius:var(--radius);background:var(--surface);font:700 1.0625rem/1.2 var(--head);text-decoration:none}
.related a:hover{border-color:var(--ink)}
.related a span{font-family:var(--display);color:var(--amber-text);font-size:1.25rem}
.demo-line{margin-top:28px;font-size:var(--t-small);color:var(--ink-soft)}
.foot a{text-underline-offset:3px}
@media (max-width:980px){.hero-photo{max-width:560px}}

/* photo version of the door figure */
.board:has(.door-photo){grid-template-columns:minmax(0,1fr);align-items:start}
.door-photo{max-width:none!important}
.door-stage{position:relative;border-radius:8px;overflow:hidden}
.door-stage img{display:block;width:100%;height:auto}
.door-marks{position:absolute;inset:0;width:100%;height:100%}
.door-marks .part{opacity:0;fill:rgba(247,181,0,.16);stroke:var(--amber);stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(247,181,0,.7))}
.door-marks .part line{fill:none;stroke-width:9}
.door-marks .part .beam{stroke-width:5;stroke-dasharray:6 18}
.door-marks .part.on{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .door-marks .part{transition:opacity .25s ease}
  .door-marks .part.on{animation:mark 1.8s ease-in-out infinite alternate}
  @keyframes mark{from{stroke-opacity:1}to{stroke-opacity:.55}}
}

[hidden]{display:none!important}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{margin-top:8px;font-size:var(--t-small);color:var(--panel-soft);max-width:40em}
.err.wide{grid-column:1 / -1}
.sent a,.err a{color:inherit}
.btn[disabled]{opacity:.6;cursor:wait}