/* WinCustomers — the one stylesheet.
   Lifted verbatim out of index.html on 5 Sep, unchanged, so /setup and /404
   can wear the same brand without a second copy of it. The brand comment
   below is the original and still governs.

   Same rule OG settled in BRAND.md: a page carries no <style> block of its
   own, and a style a page needs goes in here. Two copies drift the first
   time somebody changes a colour on one of them. */

/* ============================================================================
   WinCustomers — "You don't exist."
   Third brand direction, approved 5 September 2026.

   Black, white, and one colour that shouts. No third colour, no green, no
   rounded corners, no soft shadows, no gradients, no tasteful grey. 4px rules,
   never 1px. Anton set huge over plain Barlow. It should read like it was
   printed to be seen across a car park, because the man we are selling to is
   standing in one.
   ========================================================================== */
:root{
  --paper:#FFFFFF;
  --ink:#0A0A0A;
  --ink-inv:#FFFFFF;
  --hot:#FF3B14;        /* the only accent. urgency, and nothing else uses it. */
  --hot-ink:#FFFFFF;
  --band:#0A0A0A;       /* full-bleed bands */
  --band-ink:#FFFFFF;
  --dim:#6E6E6E;
  --line:#0A0A0A;
  --sr:#F1F1F1;         /* the mocked search-results panel */
  --sr-line:#DADCE0;
  --sr-url:#4A4A4A;
  --sr-blue:#1A0DAB;
  --field:#FFFFFF;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0A0A0A; --ink:#FFFFFF; --ink-inv:#0A0A0A;
    --band:#FFFFFF; --band-ink:#0A0A0A;
    --dim:#9A9A9A; --line:#FFFFFF;
    --sr:#151515; --sr-line:#333; --sr-url:#A9A9A9; --sr-blue:#8AB4F8;
    --field:#151515;
  }
}
:root[data-theme="dark"]{
  --paper:#0A0A0A; --ink:#FFFFFF; --ink-inv:#0A0A0A;
  --band:#FFFFFF; --band-ink:#0A0A0A;
  --dim:#9A9A9A; --line:#FFFFFF;
  --sr:#151515; --sr-line:#333; --sr-url:#A9A9A9; --sr-blue:#8AB4F8;
  --field:#151515;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
     font-family:'Barlow',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.5;
     -webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;
     scroll-behavior:auto!important}}
html{scroll-behavior:smooth}
.w{max-width:1120px;margin:0 auto;padding:0 20px}
p{margin:0}
h1,h2,h3{margin:0;font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;
         text-transform:uppercase;line-height:.86;letter-spacing:.004em;text-wrap:balance}
b,strong{font-weight:700}
a{color:inherit}
:focus-visible{outline:3px solid var(--hot);outline-offset:2px}
.lab{font-family:'Barlow',system-ui,sans-serif;font-size:11px;font-weight:700;
     letter-spacing:.14em;text-transform:uppercase}

/* ---- skip link ---- */
.skip{position:absolute;left:-9999px;top:0;background:var(--hot);color:var(--hot-ink);
      padding:12px 18px;z-index:50;font-weight:700}
.skip:focus{left:0}

/* ---- top bar ---- */
.top{border-bottom:4px solid var(--line);padding:14px 0;position:sticky;top:0;
     background:var(--paper);z-index:30}
.top .w{display:flex;align-items:center;justify-content:space-between;gap:16px}
.top .w{min-width:0}
/* 27px flat pushed the Theme button off the right edge of a 320px phone — an
   iPhone SE is still a phone people search on in a van. Let it scale. */
.logo{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-size:clamp(20px,6.2vw,27px);
      text-transform:uppercase;letter-spacing:.01em;line-height:1;text-decoration:none;
      white-space:nowrap;min-width:0}
.logo i{font-style:normal;background:var(--hot);color:var(--hot-ink);padding:0 .16em}
.topr{display:flex;align-items:center;gap:10px}
.topr a.nl{display:none;text-decoration:none;font-weight:700;font-size:14px}
@media(min-width:820px){.topr a.nl{display:inline}}
.tbtn{font-family:'Barlow',system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;
      text-transform:uppercase;background:none;border:2px solid var(--line);
      color:var(--ink);padding:7px 11px;cursor:pointer}

/* ---- hero ---- */
.hero{padding:52px 0 20px}
.kill{font-size:clamp(66px,16.5vw,190px);line-height:.86;letter-spacing:-.012em}
/* Block line, inline-block highlight. An inline background paints to the font's
   content box and ignores line-height, so with tight leading it climbs over the
   line above — which is exactly what it did on 5 Sep. Boxes stack; inlines cannot. */
.kill .l{display:block}
.kill .hot{display:inline-block;background:var(--hot);color:var(--hot-ink);
           line-height:.96;padding:.1em .07em .06em;margin-top:.04em}
.stand{margin-top:26px;font-size:clamp(20px,2.7vw,30px);font-weight:600;
       max-width:22ch;line-height:1.14}
.stand em{font-style:normal;border-bottom:5px solid var(--hot)}
.strap{margin-top:16px;font-size:18px;color:var(--dim);max-width:52ch}
.herocta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
/* Stacked full width on a phone on purpose. Left to size themselves they wrapped
   to two lines each and pushed the proof device below the fold, which is the one
   thing on this page that has to be seen. */
@media(max-width:600px){.herocta{flex-direction:column}.herocta .btn{width:100%}}

/* ---- buttons ---- */
.btn{display:inline-block;text-align:center;background:var(--ink);color:var(--ink-inv);
     font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-size:21px;text-transform:uppercase;
     letter-spacing:.02em;padding:15px 22px;text-decoration:none;border:4px solid var(--ink);
     cursor:pointer;font-size:clamp(17px,4.4vw,21px)}
.btn.hot{background:var(--hot);border-color:var(--hot);color:var(--hot-ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn:disabled{opacity:.5;cursor:default}
.btn.block{display:block;width:100%}

/* ---- the device: two search results ---- */
.proof{padding:44px 0 8px}
.srgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:4px solid var(--line)}
@media(max-width:900px){.srgrid{grid-template-columns:1fr}}
/* Every grid child gets min-width:0. Without it a child's min-width is `auto`,
   which is the width of its longest unbreakable run — one email address
   (hello@daveroofing.co.uk) dragged the whole two-column device 29px past the
   right edge of a 320px screen and gave the page a sideways scroll. */
.srgrid > *,.threes > *,.fives > *,.lotgrid > *,.shots > *,.ways > *,.cgrid > *{min-width:0}
.srcol{padding:0;display:flex;flex-direction:column;min-width:0}
.srcol + .srcol{border-left:4px solid var(--line)}
@media(max-width:900px){.srcol + .srcol{border-left:0;border-top:4px solid var(--line)}}
.srhead{font-family:'Anton',Impact,'Arial Narrow',sans-serif;text-transform:uppercase;font-size:19px;
        letter-spacing:.02em;padding:13px 18px;border-bottom:4px solid var(--line)}
.srhead.bad{background:var(--ink);color:var(--ink-inv)}
.srhead.good{background:var(--hot);color:var(--hot-ink)}
.srbody{background:var(--sr);padding:20px 18px;flex:1;display:flex;flex-direction:column;gap:14px}
.q{background:var(--paper);border:2px solid var(--sr-line);padding:10px 14px;
   font-size:15px;color:var(--dim);display:flex;align-items:center;gap:9px}
.q b{color:var(--ink);font-weight:600}
.res{background:var(--paper);border:2px solid var(--sr-line);padding:14px}
.res .u{font-size:12.5px;color:var(--sr-url);letter-spacing:.01em;overflow-wrap:anywhere}
.q b{overflow-wrap:anywhere}
.res .t{font-size:19px;color:var(--sr-blue);font-weight:500;margin-top:3px;line-height:1.2}
.res .d{font-size:13.5px;color:var(--dim);margin-top:5px;line-height:1.45}
.res .stars{margin-top:7px;font-size:13px;color:var(--ink);font-weight:600}
.res .stars i{font-style:normal;color:#E7A400;letter-spacing:1px}
.res .chips{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.res .chip{font-size:12px;font-weight:700;border:2px solid var(--ink);padding:5px 9px;
           text-transform:uppercase;letter-spacing:.04em}
.res .chip.hot{background:var(--hot);border-color:var(--hot);color:var(--hot-ink)}
.nothing{border:3px dashed var(--sr-line);padding:26px 18px;text-align:center;color:var(--dim);
         font-size:15px;line-height:1.5}
.nothing b{display:block;font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-size:23px;
           text-transform:uppercase;color:var(--ink);margin-bottom:7px;letter-spacing:.02em}
.srfoot{padding:14px 18px;border-top:4px solid var(--line);font-size:14.5px;font-weight:600}
.srfoot.bad{background:var(--ink);color:var(--ink-inv)}
.srfoot.good{background:var(--hot);color:var(--hot-ink)}

/* ---- tools (free checkers) ---- */
.tool{padding:52px 0}
.tool h2{font-size:clamp(32px,5.2vw,58px)}
.toolsub{margin-top:14px;font-size:18px;color:var(--dim);max-width:56ch}
.panel{border:4px solid var(--line);margin-top:26px}
.panelhead{padding:13px 18px;border-bottom:4px solid var(--line);background:var(--ink);
           color:var(--ink-inv)}
.panelbody{padding:22px 20px}
.row{display:flex;flex-wrap:wrap;gap:10px}
.row > *{flex:1 1 190px}
.row > .fixed{flex:0 0 auto}
input,textarea{font-family:'Barlow',system-ui,sans-serif;font-size:16px;color:var(--ink);
      background:var(--field);border:3px solid var(--line);padding:13px 14px;width:100%}
input::placeholder,textarea::placeholder{color:var(--dim)}
textarea{min-height:104px;resize:vertical}
.msg{margin-top:12px;font-size:15px;font-weight:600}
.fine{margin-top:12px;font-size:13.5px;color:var(--dim);line-height:1.5}

/* score */
.score{margin-top:22px;border-top:4px solid var(--line);padding-top:20px}
.scorerow{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.scorenum{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-size:clamp(60px,11vw,104px);
          line-height:.8;font-variant-numeric:tabular-nums}
.scoreof{font-size:15px;font-weight:700;color:var(--dim);padding-bottom:8px}
.bar{height:22px;border:3px solid var(--line);margin-top:16px;background:var(--paper)}
.barfill{height:100%;background:var(--hot);width:0;transition:width .5s ease}
.band-lab{margin-top:12px;font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-size:19px;
          text-transform:uppercase;letter-spacing:.02em}
.verdict{margin-top:12px;font-size:17px;max-width:62ch}
.gate{margin-top:20px;border:4px solid var(--hot);padding:18px 18px 20px}
.gate .gl{font-weight:700;font-size:17px;margin-bottom:12px}
ul.advice{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:0;
          border:4px solid var(--line)}
ul.advice li{padding:14px 16px;font-size:16px;line-height:1.45;display:flex;gap:11px}
ul.advice li + li{border-top:3px solid var(--line)}
ul.advice .dot{font-family:'Anton',Impact,'Arial Narrow',sans-serif;color:var(--hot);flex:none}

/* domain results */
.clab{font-family:'Anton',Impact,'Arial Narrow',sans-serif;text-transform:uppercase;font-size:16px;
      letter-spacing:.03em;color:var(--dim)}
.dom{display:flex;justify-content:space-between;align-items:center;gap:12px;
     border:3px solid var(--line);padding:12px 14px;margin-top:8px;flex-wrap:wrap}
.dom .n{font-weight:600;font-size:16px;word-break:break-all}
.tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
     border:2px solid var(--dim);color:var(--dim);padding:5px 9px;white-space:nowrap}
.tag.ok{background:var(--hot);border-color:var(--hot);color:var(--hot-ink)}
.tag.no{border-color:var(--dim);color:var(--dim);text-decoration:line-through}

/* ---- black band: the three ---- */
.bandsec{background:var(--band);color:var(--band-ink);padding:60px 0;margin-top:20px}
.bandsec h2{font-size:clamp(38px,6.6vw,74px);line-height:.85}
.bandsec h2 span{color:var(--hot)}
.bandsec .lead{margin-top:18px;font-size:19px;max-width:48ch;opacity:.82}
.threes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;
        border:4px solid var(--band-ink)}
@media(max-width:900px){.threes{grid-template-columns:1fr}}
.thing{padding:24px 22px 26px;display:flex;flex-direction:column}
.thing + .thing{border-left:4px solid var(--band-ink)}
@media(max-width:900px){.thing + .thing{border-left:0;border-top:4px solid var(--band-ink)}}
.thing .num{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-size:15px;color:var(--hot);
            letter-spacing:.08em}
.thing h3{font-size:31px;margin:9px 0 4px}
.thing .price{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-size:27px;color:var(--hot);
              margin-bottom:12px;font-variant-numeric:tabular-nums}
.thing .does{font-size:16px;line-height:1.45;opacity:.86}
.thing .does b{color:var(--hot);font-weight:700}
.thing .then{margin-top:14px;padding-top:12px;border-top:2px solid rgba(128,128,128,.45);
             font-size:14.5px;opacity:.72;line-height:1.45}
.thing .buy{margin-top:auto;padding-top:18px}
.thing .buy .btn{background:var(--band-ink);color:var(--band);border-color:var(--band-ink);
                 display:block;font-size:18px;padding:12px 14px}

/* ---- two-up: bundle and the lot ---- */
.lot{padding:56px 0}
.lotgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:4px solid var(--line)}
@media(max-width:820px){.lotgrid{grid-template-columns:1fr}}
.lotcard{padding:28px 26px;display:flex;flex-direction:column}
.lotcard + .lotcard{border-left:4px solid var(--line)}
@media(max-width:820px){.lotcard + .lotcard{border-left:0;border-top:4px solid var(--line)}}
.lotcard.best{background:var(--hot);color:var(--hot-ink)}
.lotcard h3{font-size:clamp(30px,4.2vw,44px)}
.lotcard .amt{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-size:clamp(52px,8vw,80px);
              line-height:.84;font-variant-numeric:tabular-nums;margin-top:14px}
.lotcard .per{font-size:15px;font-weight:600;margin-top:9px;opacity:.9}
.lotcard ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.lotcard li{display:flex;gap:11px;font-size:16px;line-height:1.4}
.lotcard li .x{font-family:'Anton',Impact,'Arial Narrow',sans-serif;color:var(--hot);flex:none}
.lotcard.best li .x{color:var(--hot-ink)}
.lotcard .go{margin-top:auto;padding-top:22px}
.lotcard.best .go .btn{background:var(--hot-ink);color:var(--hot);border-color:var(--hot-ink)}
.subprice{margin-top:10px;font-size:14px;font-weight:600;opacity:.85}
.bill{display:flex;gap:0;margin-top:22px;border:4px solid var(--line);width:max-content;max-width:100%}
.bill button{font-family:'Barlow',system-ui,sans-serif;font-size:13px;font-weight:700;
             letter-spacing:.1em;text-transform:uppercase;background:none;border:0;
             color:var(--ink);padding:11px 16px;cursor:pointer}
.bill button + button{border-left:4px solid var(--line)}
.bill button.active{background:var(--hot);color:var(--hot-ink)}
.billnote{margin-top:12px;font-size:15px;color:var(--dim)}
.billnote a{color:var(--ink);font-weight:700}

/* ---- your one-page site ---- */
.site{border-top:4px solid var(--line);padding:56px 0}
.site h2{font-size:clamp(32px,5.2vw,58px)}
.fives{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:28px;
       border:4px solid var(--line)}
@media(max-width:1000px){.fives{grid-template-columns:repeat(2,1fr)}
  .five:nth-child(2n){border-right:0}
  .five:nth-child(-n+4){border-bottom:4px solid var(--line)}}
@media(max-width:560px){.fives{grid-template-columns:1fr}
  .five{border-right:0!important}
  .five:not(:last-child){border-bottom:4px solid var(--line)}}
.five{padding:20px 18px;border-right:4px solid var(--line)}
.five:last-child{border-right:0}
.five .n{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-size:14px;color:var(--hot);
         letter-spacing:.08em}
.five h3{font-size:22px;margin:8px 0 7px}
.five p{font-size:14.5px;line-height:1.45;color:var(--dim)}
.notegallery{margin-top:22px;border-left:8px solid var(--hot);padding:4px 0 4px 18px;
             font-size:16px;max-width:66ch;line-height:1.55}

/* photo slots — deliberately empty until the real shot lands */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:28px;border:4px solid var(--line)}
@media(max-width:760px){.shots{grid-template-columns:1fr}}
.shot{background:var(--ink);color:var(--ink-inv);padding:26px 22px;min-height:230px;
      display:flex;flex-direction:column;justify-content:flex-end}
.shot + .shot{border-left:4px solid var(--line)}
@media(max-width:760px){.shot + .shot{border-left:0;border-top:4px solid var(--line)}}
.shot .n{font-family:'Barlow',system-ui,sans-serif;font-size:11px;font-weight:700;
         letter-spacing:.14em;text-transform:uppercase;color:var(--hot)}
.shot h3{font-size:25px;margin:9px 0 8px}
.shot p{font-size:14.5px;line-height:1.5;opacity:.8}
.shot img{width:100%;height:auto;display:block}

/* ---- reach ---- */
.reach{background:var(--band);color:var(--band-ink);padding:56px 0}
.reach h2{font-size:clamp(30px,4.6vw,50px)}
.ways{display:flex;flex-wrap:wrap;gap:0;margin-top:24px;border:4px solid var(--band-ink)}
.way{flex:1 1 180px;padding:18px 20px;border-right:4px solid var(--band-ink)}
.way:last-child{border-right:0}
@media(max-width:700px){.way{flex:1 1 100%;border-right:0;border-bottom:4px solid var(--band-ink)}
  .way:last-child{border-bottom:0}}
.way .n{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-size:22px;text-transform:uppercase}
.way.first{background:var(--hot);color:var(--hot-ink)}
.way .s{font-size:14px;margin-top:5px;opacity:.85;line-height:1.4}
.stat{margin-top:22px;font-size:17px;max-width:62ch;line-height:1.55}
.stat b{background:var(--hot);color:var(--hot-ink);padding:.06em .2em;font-weight:700;
        box-decoration-break:clone;-webkit-box-decoration-break:clone}
.stat a{opacity:.7}

/* ---- faq ---- */
.faq{padding:56px 0}
.faq h2{font-size:clamp(30px,4.6vw,50px)}
.qs{margin-top:26px;border:4px solid var(--line)}
.qa{padding:20px 20px}
.qa + .qa{border-top:4px solid var(--line)}
.qa h3{font-size:21px;margin-bottom:8px}
.qa p{font-size:16px;line-height:1.5;color:var(--dim);max-width:70ch}

/* ---- contact ---- */
.contact{background:var(--band);color:var(--band-ink);padding:56px 0}
.contact h2{font-size:clamp(32px,5.2vw,58px)}
.contact .toolsub{color:inherit;opacity:.8}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
@media(max-width:700px){.cgrid{grid-template-columns:1fr}}
.contact input,.contact textarea{background:var(--band);color:var(--band-ink);
      border-color:var(--band-ink)}
.contact input::placeholder,.contact textarea::placeholder{color:var(--band-ink);opacity:.55}
.contact .btn{background:var(--hot);border-color:var(--hot);color:var(--hot-ink);margin-top:12px}
.full{grid-column:1/-1}

footer{border-top:4px solid var(--line);padding:30px 0 60px;font-size:14.5px;color:var(--dim);
       line-height:1.65}
footer b{color:var(--ink)}
footer a{color:var(--ink);font-weight:600}