/* Redline Lighting — design tokens from docs/ux + the design canvas */
:root {
  --dusk-900:#0f1620; --dusk-800:#18212e; --dusk-700:#243044; --dusk-line:#3c4759;
  --amber:#e8a33d; --amber-deep:#c9822a; --amber-dark:#a3762a; --glow:#f0bd6c;
  --paper:#f7f4ee; --paper-2:#efeae0; --card:#fffdf9; --line:#e0d9cc; --line-soft:#e8e2d7;
  --ink:#1c2430; --ink-2:#4c5566; --muted:#75808f; --muted-2:#8b95a4; --dim:#93a0b4;
  --green:#2f6b4a; --green-bg:#f4f8f5; --green-line:#d4e3d8;
  --red:#b4483c; --warm-bg:#fbf5e9; --warm-line:#e8d9bd;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Karla','Helvetica Neue',Helvetica,Arial,sans-serif;
  --wrap:390px;
  --gutter:24px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.13;text-wrap:pretty}
p{margin:0}
img,svg{max-width:100%}
a{color:var(--amber-deep);text-decoration:none}
a:hover{color:var(--amber-dark);text-decoration:underline}
:focus-visible{outline:3px solid var(--amber-deep);outline-offset:2px;border-radius:3px}
[tabindex="-1"]:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--amber);color:#14100a;padding:12px 18px;font-weight:700}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.lede{margin-top:8px;font-size:15px;line-height:1.55;color:var(--muted)}

/* buttons — 44px minimum target, 54 for primaries */
.btn{display:flex;align-items:center;justify-content:center;min-height:54px;padding:12px 18px;border-radius:4px;border:0;font-family:var(--sans);font-size:16px;font-weight:700;text-align:center;cursor:pointer;width:100%}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--amber);color:#14100a}
.btn-primary:hover{background:var(--glow);color:#14100a}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:#2b3646;color:var(--paper)}
.btn-ghost{background:transparent;border:1px solid var(--dusk-line);color:#dbe2ec;min-height:48px;font-weight:500;font-size:15px}
.btn-ghost:hover{background:var(--dusk-700);color:#fff}
.btn-outline{background:transparent;border:1px solid #d8d0c2;color:var(--ink-2);min-height:50px;font-weight:600;font-size:15px}
.btn-outline:hover{background:var(--paper-2);color:var(--ink)}
.btn[disabled]{opacity:.4;cursor:not-allowed}

/* header */
.site-head{background:var(--dusk-900)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;padding-block:2px}
/* 44px minimum tap target (WCAG 2.5.8). These are standalone navigation links, not links
   inside a sentence, so the inline exception does not cover them. The bars above lost the
   padding these gain, so no header changes height. */
.mark{display:flex;align-items:center;gap:8px;min-height:44px}
.mark-icon{display:block;width:24px;height:auto}
.mark span{font-family:var(--serif);font-size:13px;letter-spacing:.15em;color:var(--paper)}
.mark:hover{text-decoration:none}
.head-link{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:var(--dim)}
.head-link:hover{color:var(--glow)}

/* hero */
.hero{background:var(--dusk-900);color:var(--paper)}
.hero svg{display:block;width:100%;height:300px}
.hero-body{padding:4px var(--gutter) 30px}
.hero h1{font-size:38px;line-height:1.06;color:var(--paper)}
.hero h1 span{display:block}
.hero .kicker{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--amber)}
.hero p{margin-top:14px;font-size:15px;line-height:1.55;color:#b6c0d0}
.hero .actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}

.proof{background:var(--dusk-800);color:var(--dim);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.proof-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;padding-block:13px}
.proof-inner span:nth-of-type(even){text-align:right}
.proof i{display:none;color:var(--dusk-line);font-style:normal}

section{padding:34px 0}
/* :where() so the responsive sizes below — deliberately kept at zero specificity — can
   reach it. A bare `section h2` outweighs them and pins every heading at 25px. */
:where(section) h2{font-size:25px}
.band{background:var(--paper-2)}
.band-dark{background:var(--dusk-900);color:#b6c0d0}

.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.shot{border-radius:3px;overflow:hidden;background:#16202e}
.shot svg{display:block;width:100%;height:auto;aspect-ratio:160/108;object-fit:cover}
.shot p{padding:8px 10px;font-size:11px;letter-spacing:.03em;color:var(--dim)}
.more{display:inline-flex;align-items:center;min-height:44px;margin-top:3px;font-size:14px;font-weight:600}

.steps{display:flex;flex-direction:column;gap:20px;margin-top:20px}
.step{display:flex;gap:14px;align-items:flex-start}
.step .n{font-family:var(--serif);font-size:22px;color:var(--amber-deep);line-height:1;width:22px;flex-shrink:0}
.step b{display:block;font-size:15px}
.step span{display:block;margin-top:3px;font-size:14px;color:var(--muted)}

.trust{display:flex;flex-direction:column;gap:17px;margin-top:18px}
.trust div{display:flex;gap:13px;align-items:flex-start}
.trust svg{flex-shrink:0;margin-top:2px}
.trust b{display:block;font-size:15px}
.trust span{display:block;margin-top:3px;font-size:14px;color:var(--muted)}

.callout{padding:18px 20px;border-radius:6px;border:1px solid var(--line);background:var(--card)}
.callout h2{font-size:16px}
.callout p{margin-top:6px;font-size:14px;color:var(--muted)}
.area h2{font-size:20px}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips span{padding:7px 13px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--ink-2)}

/* closing conversion moment + the roofline-light brand signature */
.closing-cta{position:relative;overflow:hidden;background:var(--dusk-900);color:var(--paper);text-align:center;isolation:isolate}
.closing-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 10%,rgba(232,163,61,.08),transparent 42%);z-index:-1}
.roofline-signature{display:block;width:min(620px,115vw);margin:-16px auto 8px;opacity:.82}
.closing-cta-inner{position:relative;z-index:1}
.closing-copy{max-width:560px;margin:0 auto}
.closing-kicker{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--amber)}
.closing-cta h2{margin-top:7px;font-size:33px;color:var(--paper)}
.closing-lede{margin-top:14px;color:#b6c0d0;font-size:15px;line-height:1.6}
.closing-cta .btn{margin-top:24px}
.closing-fine{margin-top:12px;color:var(--dim);font-size:11px;letter-spacing:.03em}

.site-foot{background:var(--dusk-900);color:var(--dim);padding:24px 0 34px;font-size:13px}
.site-foot a{color:var(--amber)}
.site-foot .rule{height:1px;background:var(--dusk-700);margin:18px 0}
.foot-link{margin-top:6px}

/* ---------- estimator ---------- */
.flow{min-height:100dvh;display:flex;flex-direction:column;background:var(--paper)}
.flow-head{padding:16px 24px 0}
.flow-top{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.back{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-12px;background:none;border:0;cursor:pointer;color:var(--ink-2)}
.count{font-size:12px;letter-spacing:.06em;color:var(--muted)}
.bars{display:flex;gap:5px;margin-top:8px}
.bars i{flex:1;height:3px;border-radius:2px;background:var(--line);transition:background .2s}
.bars i.on{background:var(--amber-deep)}
.flow-body{padding:24px 24px 0;flex:1}
.flow-body h1{font-size:29px}
.flow-body .lede{color:var(--muted)}
.flow-foot{padding:18px 24px 26px;border-top:1px solid var(--line-soft);background:var(--paper)}
.flow-foot .fine{margin-top:11px;text-align:center;font-size:12px;color:var(--muted-2);line-height:1.5}

.group-label{display:flex;align-items:center;gap:9px;margin-top:22px}
.group-label b{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:400}
.group-label i{flex:1;height:1px;background:var(--line-soft)}
.group-label em{font-style:normal;font-size:11px;font-weight:700;color:var(--green)}

/* NOT A TWO-COLUMN GRID. It is 2 / 3 / 4 columns as the viewport widens (see the media
   queries below) and exists for the estimator's option pills, where that is right. Borrowing
   it for a pair of cards puts them in 2 of 4 columns on a desktop and squashes them to a
   quarter width. That has now happened once, on /service-area/. The name is the trap. */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:13px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:11px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:11px}
.stack{display:flex;flex-direction:column;gap:9px;margin-top:13px}

/* selectable option — a real checkbox/radio underneath */
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.opt .box{display:block;border:1px solid var(--line);border-radius:5px;background:var(--card);padding:11px 11px 12px;min-height:44px;transition:border-color .12s,box-shadow .12s}
.opt input:checked+.box{border:2px solid var(--amber-deep);padding:10px 10px 11px}
.opt input:focus-visible+.box{outline:3px solid var(--amber-deep);outline-offset:2px}
.opt .box svg{display:block;width:100%;height:40px}
.opt .box b{display:block;margin-top:7px;font-size:13px;line-height:1.2}
.opt .tick{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:999px;background:var(--amber-deep);display:none;align-items:center;justify-content:center}
.opt input:checked~.tick{display:flex}

.opt.row .box{display:flex;align-items:center;gap:14px;padding:12px 15px}
.opt.row .box svg{width:auto;flex-shrink:0}
.opt.row .box b{margin-top:0;font-size:15px}
.opt.row .box span{display:block;margin-top:2px;font-size:13px;color:var(--muted);font-weight:400}
.opt.pill .box{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;font-size:15px;font-weight:600;color:var(--ink-2)}
.opt.pill input:checked+.box{color:var(--ink);font-weight:700}
.opt.tall .box{display:flex;flex-direction:column;align-items:center;gap:9px;padding:12px 8px}
.opt.tall .box svg{width:60px;height:54px}
.opt.tall .box b{margin-top:0;font-size:16px}
.opt.card .box{padding:18px}
.opt.card .box svg{height:50px;width:120px}
.opt.card .box b{margin-top:13px;font-size:17px}
.opt.card .box span{display:block;margin-top:6px;font-size:14px;color:var(--muted);font-weight:400;line-height:1.5}

.note{display:flex;gap:10px;align-items:flex-start;margin-top:11px;padding:12px 14px;border-radius:5px;background:var(--paper-2)}
.note svg{flex-shrink:0;margin-top:1px}
.note p{font-size:13px;color:var(--ink-2);line-height:1.45}
.note.dashed{border:1px dashed #d3ccbe;background:transparent}
.note.info{background:#f1f6f8;border:1px solid #dfe6ea}
.note.info p{color:#3f5a66}

.field{margin-top:11px}
.field label:not(.opt){display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.field input,.field textarea{width:100%;min-height:50px;padding:13px 15px;border:1px solid var(--line);border-radius:5px;background:var(--card);font-family:var(--sans);font-size:16px;color:var(--ink)}
.field textarea{min-height:88px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:#aeb6c0}

.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border-radius:5px;border:1px solid var(--line);background:var(--card);cursor:pointer}
.toggle b{font-size:15px}
.toggle span{display:block;margin-top:3px;font-size:13px;color:var(--muted-2);line-height:1.4}
.toggle .sw{width:46px;height:27px;border-radius:999px;background:#ddd6c8;position:relative;flex-shrink:0;transition:background .15s}
.toggle .sw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:999px;background:var(--card);transition:transform .15s}
.toggle input{position:absolute;opacity:0}
.toggle input:checked~.sw{background:var(--green)}
.toggle input:checked~.sw::after{transform:translateX(19px)}

/* result */
.price{border-radius:6px;background:var(--dusk-900);color:var(--paper);padding:24px 22px 22px;margin-top:22px}
.price .ctx{font-size:13px;color:var(--dim);line-height:1.5;text-align:center}
.price .lab{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.price .lab.after{color:#7fc8a0}
.price .big{margin-top:6px;font-family:var(--serif);font-size:42px;line-height:1;color:var(--glow);letter-spacing:-.02em}
.price .med{margin-top:6px;font-family:var(--serif);font-size:34px;line-height:1;color:var(--paper);letter-spacing:-.02em}
.price .sub{margin-top:8px;font-size:13px;color:var(--dim);line-height:1.5}
.price .divide{margin-top:18px;padding-bottom:18px;border-bottom:1px solid #26313f}
.panel{margin-top:16px;border-radius:6px;background:var(--card);border:1px solid var(--line-soft);padding:20px}
.panel h3{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--sans);font-weight:400}
.panel ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.panel li{font-size:14px}
/* Only the icon items are flex rows. Applied to every li, the bold lead-in of a
   `<li><b>Materials — paid once…</b> description</li>` becomes its own flex item, and so
   its own column — about 90px of it on a phone, with the sentence wrapping down five
   lines beside the description it introduces. /pricing/ and /already-have-lights/. */
.panel li:has(> svg){display:flex;gap:10px;align-items:flex-start}
.panel li svg{flex-shrink:0;margin-top:2px}
.panel.warm{background:var(--warm-bg);border-color:var(--warm-line)}
.panel.warm h3{color:var(--amber-dark)}
.panel.flat{background:var(--paper-2);border-color:transparent}
.panel.flat ul li{color:var(--ink-2);line-height:1.45}

.hidden{display:none !important}

/* ---------- wider screens ---------- */
@media (min-width:700px){
  :root{--wrap:720px;--gutter:32px}
  /* fixed height + slice crops hard on a wide viewport; letting width follow
     the aspect ratio means slice has nothing to crop and the dusk fills the sides */
  .hero svg{width:auto;height:380px;margin:0 auto}
  .hero h1{font-size:52px}
  .hero .actions{flex-direction:row}
  .hero .actions .btn{width:auto;min-width:240px}
  .proof-inner{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .proof-inner span:nth-of-type(even){text-align:left}
  .proof i{display:inline}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .flow-body h1{font-size:36px}
  .flow-foot{position:sticky;bottom:0}
  .flow-foot .btn{max-width:420px;margin-left:auto;margin-right:auto}
  .grid2{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1040px){
  :root{--wrap:1184px;--gutter:32px}
  .site-home section{padding-block:60px}
  /* :where() keeps this at zero specificity so per-block heading sizes win without !important */
  :where(.site-home section) h2{font-size:38px;line-height:1.08}
  .site-head .bar{padding-block:8px}
  .mark span{font-size:14px}
  .head-link{font-size:14px}
  .hero{display:grid;grid-template-columns:minmax(32px,1fr) minmax(0,560px) minmax(0,560px) minmax(32px,1fr);align-items:center;padding-block:52px 68px}
  .hero>svg{grid-column:3;grid-row:1;width:100%;height:auto;aspect-ratio:390/300;margin:0;border-radius:8px}
  .hero-body{grid-column:2;grid-row:1;max-width:none;padding:0 64px 0 32px}
  .hero h1{font-size:58px;line-height:1.01;letter-spacing:-.025em}
  .hero .kicker{font-size:12px}
  .hero p{max-width:520px;margin-top:20px;font-size:17px;line-height:1.6}
  .hero .actions{margin-top:30px;gap:12px}
  .hero .actions .btn{min-width:0;flex:1}
  .proof-inner{padding-block:16px}
  .proof{font-size:12px}
  .gallery{margin-top:28px;gap:18px}
  .shot{border-radius:6px}
  .shot p{padding:11px 13px;font-size:12px}
  .more{margin-top:20px;font-size:15px}
  .site-home .trust-section{padding-block-start:34px}
  .trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
  /* Three across assumes the full wrap. Inside a band the block already occupies one
     column of a two-column section, so thirds of that come out around 210px — narrow
     enough to break the headings mid-phrase. One column, full measure. */
  .band .trust{grid-template-columns:minmax(0,1fr);gap:26px}
  .trust div{gap:16px}
  .trust b{font-size:16px}
  .trust span{margin-top:6px;font-size:15px;line-height:1.55}
  .band section,
  .chapter{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1.6fr);gap:72px;align-items:start}
  .chapter>h2{margin-top:0}
  .chapter>.story{max-width:none}
  .chapter>.story>:first-child{margin-top:0}
  /* prose keeps a readable measure; the panels, lists and cards beside it fill the column */
  .chapter>.story>p{max-width:66ch}
  /* Only the home page's band, where .steps is a direct child of the grid section and fills
     the column beside the heading. In a .chapter the steps sit inside .story and stay a
     plain list: two columns of a prose measure is not a layout, and with an even number of
     steps :last-child spans a row of its own and leaves a hole beside the step before it.
     /how-it-works/ has six. Scoping by .band alone no longer separates the two, because a
     banded chapter is inside .band as well. */
  .band>section>.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 46px;margin-top:0}
  .band>section>.steps>.step:last-child{grid-column:1/-1;max-width:560px}
  .step b{font-size:16px}
  .step span{font-size:15px;line-height:1.55}
  .support-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:64px;align-items:center}
  .callout{padding:30px 32px;border-radius:8px}
  .callout h2{font-size:25px}
  .callout p{margin-top:9px;font-size:15px;line-height:1.55}
  .area h2{font-size:26px}
  .chips{gap:10px;margin-top:18px}
  .chips span{padding:8px 14px;font-size:14px}
  .site-home section.closing-cta{padding-block:82px 86px;text-align:left}
  .closing-cta::before{background:radial-gradient(circle at 77% 50%,rgba(232,163,61,.1),transparent 34%)}
  .roofline-signature{position:absolute;z-index:0;width:min(46vw,620px);right:max(20px,calc((100vw - 1184px)/2));top:50%;transform:translateY(-50%);margin:0;opacity:.88}
  .closing-copy{max-width:560px;margin:0}
  .closing-cta h2{font-size:46px}
  .closing-lede{margin-top:18px;font-size:17px;max-width:530px}
  .closing-cta .btn{display:inline-flex;width:auto;min-width:290px;margin-top:28px}
  .closing-fine{font-size:12px}
  .site-foot{padding-block:38px 46px;font-size:14px}
  .foot-grid{display:grid;grid-template-columns:minmax(0,.8fr) 1px minmax(0,1.2fr);gap:42px;align-items:center}
  .site-foot .rule{width:1px;height:100%;min-height:58px;margin:0}
  .gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid2{grid-template-columns:repeat(4,minmax(0,1fr))}
  .price .big{font-size:56px}
  .flow .wrap{max-width:720px}
}
@media (min-width:700px) and (max-width:1039px){
  .site-home section{padding-block:52px}
  :where(.site-home section) h2{font-size:32px}
  /* The closing heading is the loudest thing on the page at every other width — 33 against
     25 on a phone, 46 against 38 on a desktop. It had no size of its own in this band, so
     once the section headings above started scaling here it landed on 33 against 32. */
  .closing-cta h2{font-size:38px}
  .hero-body{padding-block:14px 44px}
  .trust{gap:22px}
  .support-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important;animation:none !important}}

/* icon colouring reacts to selection */
.opt .box{--icon:#aab2c1}
.opt input:checked+.box{--icon:var(--amber-deep)}
.struct{stroke:#c8cedb}
.amt{margin-top:24px}
.amt .hd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.amt .hd b{font-size:15px}
.amt .hd span{font-size:12px;color:var(--muted-2)}
.result-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.tick svg{display:block}

/* ---------- customer portal (/my) and about ---------- */
.portal-head{background:var(--dusk-900)}
/* 10px, not the 2px the site header uses: this bar also carries the two-line name and
   address, which is taller than the 44px mark, so the arithmetic is different.
   10 + 44 + 10 = 64, the height it had. */
.portal-head .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.portal-head .who{font-size:12px;color:var(--dim);text-align:right}
.greet{padding-top:26px}
.portal-grid{padding-block-end:40px}
.greet h1{font-size:30px}
.greet p{margin-top:7px;font-size:15px;color:var(--muted)}

.state{margin-top:20px;border-radius:6px;overflow:hidden;background:var(--card);border:1px solid var(--line-soft)}
.state .photo svg{display:block;width:100%;height:auto}
.state .inner{padding:20px 18px 22px}
.flag{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:#fbf0dc;font-size:12px;font-weight:700;color:var(--amber-dark)}
.flag::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--amber-deep)}
.state h2{margin-top:13px;font-size:24px;line-height:1.16}
.state .scope{margin-top:9px;font-size:14px;color:var(--muted);line-height:1.55}
.state .btn{margin-top:18px}
.state .alt{margin-top:14px;text-align:center;font-size:14px;font-weight:600}

.lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.rows{margin-top:12px;border:1px solid var(--line-soft);border-radius:5px;overflow:hidden}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--card)}
.row + .row{border-top:1px solid #f0ebe1}
.row b{font-size:15px;font-weight:600}
.row span{display:block;margin-top:2px;font-size:13px;color:var(--muted-2)}
.row .amt-v{font-size:14px;color:var(--muted);white-space:nowrap}
.kit{margin-top:12px;padding:15px 16px;border-radius:5px;background:var(--paper-2)}
.kit p + p{margin-top:6px;font-size:13px;color:var(--muted-2);line-height:1.5}
.kit .sep{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}

.tl{display:flex;flex-direction:column;margin-top:22px}
.tl-item{display:flex;gap:14px}
.tl-rail{display:flex;flex-direction:column;align-items:center;width:20px;flex-shrink:0}
.tl-dot{width:13px;height:13px;border-radius:999px;background:var(--green)}
.tl-dot.todo{background:var(--paper);border:2px solid #d8d0c2}
.tl-line{flex-grow:1;width:2px;background:#d8d0c2}
.tl-line.done{background:var(--green)}
.tl-body{padding-bottom:22px}
.tl-body b{font-size:15px}
.tl-body span{display:block;margin-top:2px;font-size:13px;color:var(--muted-2)}
.tl-item.todo .tl-body b{color:var(--muted-2);font-weight:600}

.crew{display:flex;align-items:center;gap:14px;margin-top:24px;padding:17px 18px;border-radius:6px;background:var(--card);border:1px solid var(--line-soft)}
.crew .av{width:46px;height:46px;border-radius:999px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;flex-shrink:0}

.big-opts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.big-opt .box{display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 16px}
/* Explicit, because this <b> sits inside the wrapper span that keeps the box to a single
   flex item — and that wrapper matches the muted rule below, which the <b> would inherit. */
.big-opt .box b{font-size:16px;color:var(--ink)}
.big-opt .box span{display:block;margin-top:2px;font-size:13px;color:var(--muted);font-weight:400}

.about-hero{background:var(--dusk-900);color:var(--paper);padding-block:44px 40px}
.about-hero h1{font-size:36px;color:var(--paper)}
.about-hero p{margin-top:16px;font-size:16px;line-height:1.6;color:#b6c0d0}
.story p{margin-top:16px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.story p:first-child{margin-top:0}
.pull{margin-block:26px;padding-left:20px;border-left:3px solid var(--amber-deep);font-family:var(--serif);font-size:22px;line-height:1.35;color:var(--ink)}

.err{min-height:70dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-block:60px}
.err h1{font-size:34px}
.err p{margin-top:12px;font-size:16px;color:var(--muted);max-width:44ch}
.err .actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.err .actions .btn{width:auto;min-width:220px}

@media (min-width:700px){
  .greet h1{font-size:38px}
  .about-hero h1{font-size:48px}
  .about-hero p{font-size:18px;max-width:60ch}
  .story{max-width:64ch}
  .big-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1040px){
  .portal-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:52px;align-items:start}
  .portal-aside{padding-top:8px}
  .state h2{font-size:28px}
  .tl,.crew{max-width:560px}
  .pull{font-size:26px}
  /* The lede moves alongside the headline instead of sitting under it in a half-width
     column. align-items:end sits it on the headline's last line however many it runs to. */
  .about-hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:72px;align-items:end}
  .about-hero .kicker{grid-column:1/-1}
  .about-hero h1{grid-column:1;margin:0}
  .about-hero p{grid-column:2;max-width:44ch;margin-top:0;padding-bottom:9px}
}

/* --- the estimator's submit path -------------------------------------------------------
   Two components, two new class names. Reusing an existing one is how three defects got
   into this stylesheet (CLAUDE.md); `.hp` and `.sendfail` are used nowhere else. */

/* The honeypot. Off-screen rather than display:none — some bots skip anything hidden. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sendfail {
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid #d8b4ac;
  border-left: 3px solid #a8412c;
  border-radius: 7px;
  background: #fdf4f2;
  color: #7a3325;
  font-size: 15px;
  line-height: 1.5;
}

/* --- the FAQ's disclosure list ---------------------------------------------------------
   `.qa`, not a reuse of `.panel` or `.rows`: this is the only place on the site with
   expandable content, and borrowing a class for it is how `.shot`, `.field label` and
   `.row span` each produced a defect (CLAUDE.md). */
.qa {
  margin-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.qa details {
  border-bottom: 1px solid var(--line-soft);
}

.qa summary {
  padding: 15px 30px 15px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
}

.qa summary::-webkit-details-marker { display: none; }

/* A chevron drawn from two borders. `translateY(-50%)` before the rotation is what keeps it
   put: it centres the box on `top` so the rotation happens about a fixed point, rather than
   swinging the visible corner up and left when the panel opens. */
.qa summary::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 25px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--amber-deep);
  border-bottom: 2px solid var(--amber-deep);
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
  transition: transform .18s ease;
}

.qa details[open] summary::after {
  transform: translateY(-50%) rotate(225deg);
}

.qa details p {
  margin: 0;
  padding: 0 30px 18px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* On a wide screen the question list fills the content column, which left the chevron
   stranded — around 630px right of a four-word question like "Are you insured?", with
   nothing between the two. Inline, it stays with the text at any length. The row and its
   rule still run the full column, so the list keeps its right edge with everything else
   on the page; only the marker moves. */
@media (min-width:1040px) {
  .qa summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 0;
  }

  /* static, so it is laid out after the text instead of pinned to the box. translateY is
     dropped with it — that existed to centre an absolutely positioned box on `top`. */
  .qa summary::after {
    position: static;
    flex: none;
    right: auto;
    top: auto;
    margin-top: -4px;
    transform: rotate(45deg);
  }

  .qa details[open] summary::after {
    transform: rotate(225deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qa summary::after { transition: none; }
}

/* --- footer navigation -----------------------------------------------------------------
   The pages exist to be found from a search result, but a page nothing links to is a page
   nothing crawls either. `.foot-nav` rather than `.foot-link`, which is already a paragraph
   style and would collapse these into a single line. */
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  /* No row gap: the links carry their own 12px block padding, so consecutive rows meet at
     exactly 44px pitch. A row gap on top of that would space them further than the eye
     wants; a gap instead of the padding would leave the targets 20px tall. */
  gap: 0 20px;
  margin-block: -12px;
}

.foot-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 12px;
  font-size: 13px;
  color: var(--dim);
}

.foot-nav a:hover {
  color: var(--amber);
}

/* --- a pair of cards, genuinely two across --------------------------------------------
   Its own class rather than `.grid2`, which despite the name goes to four columns on a
   desktop. Reusing a class for a new component is the anti-pattern CLAUDE.md names, and
   this is the fourth defect from it after `.shot`, `.field label` and `.row span`. */
.town-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 26px;
}

@media (min-width: 700px) {
  .town-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

/* The footer's second row: the site nav, full width, below the two-column block.
   `.foot-grid` is a three-column template and putting the nav inside it made five children,
   which grid auto-placed across two rows. */
/* The divider is this element's own border, NOT a `.rule` child. `.rule` is 1px HIGH on
   mobile and 1px WIDE at 700px up, because it doubles as the middle column of
   `.foot-grid`'s three-column template — so borrowing it here drew a short vertical bar. */
.foot-tail {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--dusk-700);
}

/* --- the /my/service/ photo picker -----------------------------------------------------
   `.photo-pick`, not a reuse: it is an .opt box laid out as a centred icon-and-label row,
   and `.opt .box svg` sets `width:100%;height:40px` for the icon-above-label options. That
   won over the svg's own width/height attributes and stretched a 20px camera to 237px,
   which took the row's width and wrapped the label onto two lines. `.opt.row` already
   opts out of that rule the same way; this is the second place that needs to. */
.photo-pick .box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  font-weight: 600;
  color: var(--ink-2);
}

.photo-pick .box svg {
  width: auto;
  height: auto;
  flex-shrink: 0;
}

/* --- tap targets that sit inside a line of text ----------------------------------------
   The links above could simply grow, because each owns its line. These cannot: "[PHONE] ·
   [EMAIL]" is one line with text between the two, and a 44px inline-flex box would drag the
   link off the baseline of the words beside it. So the hit area is an absolutely positioned
   pseudo-element instead — the link keeps its 15px box and the tappable region around it is
   44px tall, with no effect on layout.

   No horizontal expansion: "[PHONE] · [EMAIL]" separates its two links by about ten pixels,
   and widening both would make them overlap. Overlapping targets are a worse bug than small
   ones, because the tap that misses looks like the tap that hit. */
.foot-link a,
.state .alt a,
.row b a {
  position: relative;
}

.foot-link a::after,
.state .alt a::after,
.row b a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}