/* Roofers Stoke-on-Trent — palette sampled from the client logo 2026-08-25
   navy #012251 (15.57:1 on white) · charcoal #303139 · orange #E76D10 (3.19:1 on white — FILL ONLY)
   CTA is orange fill with NAVY text (4.89:1). White on orange fails AA and is never used. */

:root{
  --navy:#012251;
  --navy-d:#001A3E;
  --charcoal:#303139;
  --brand:#E76D10;
  --brand-d:#C85B0A;
  --ink:#14181B;
  --body:#3A4048;
  --line:#DFE3E8;
  --bg:#FFFFFF;
  --bg-alt:#F5F7F9;
  --bg-navy:#012251;
  --radius:10px;
  --wrap:1180px;
  --shadow:0 2px 10px rgba(1,34,81,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--body);
  font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{color:var(--navy);line-height:1.22;margin:0 0 .6em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.85rem,4.2vw,2.85rem)}
h2{font-size:clamp(1.4rem,2.9vw,2rem);margin-top:1.6em}
h3{font-size:clamp(1.1rem,2vw,1.32rem);margin-top:1.4em}
h4{font-size:1.05rem}
p,li{font-size:1.0625rem}   /* 17px: body declares 17px and 1rem would silently reset it to 16 */
p{margin:0 0 1.05em}
a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--brand-d)}
strong{color:var(--navy)}
/* Dark bands: the global navy <strong> measured 1.00-1.11:1 against these backgrounds.
   Anything sitting on navy must be light. */
.trust strong,.hero strong,.imgband strong,.ftr strong,.ftr__disc strong,
.trust b,.hero b,.imgband b,.ftr b,.ftr__disc b{color:#fff}
.hero a,.ftr__disc a,.imgband a{color:#fff}
.hero a:hover,.ftr__disc a:hover,.imgband a:hover{color:var(--brand)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
/* Body text fills the container. There is no reading-measure cap: capping it left a wide
   empty gutter on the right while the text wrapped early, which is what the client saw on
   the home, service and location pages. Every section now uses the same frame and the text
   runs the full width of it. */
.narrow{max-width:var(--wrap)}
.prose>.tablewrap,.prose>figure{max-width:none}
/* centred display blocks stay centred, so they have no left-aligned gap to close */
.cta--navy .wrap,.imgband>*{max-width:900px;margin-left:auto;margin-right:auto}
section{padding:52px 0}
section.alt{background:var(--bg-alt)}
.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;background:var(--navy);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* ---------- Buttons: orange fill, NAVY text (white fails AA at 3.19:1) ---------- */
.btn{
  display:inline-block;white-space:nowrap;border:2px solid transparent;
  padding:13px 22px;border-radius:var(--radius);font-weight:700;font-size:1rem;
  text-decoration:none;cursor:pointer;text-align:center;line-height:1.2;
}
.btn--primary{background:var(--brand);color:var(--navy);border-color:var(--brand)}
.btn--primary:hover{background:var(--brand-d);border-color:var(--brand-d);color:var(--navy)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-d);color:#fff}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff}
.btn--onnavy{background:var(--brand);color:var(--navy);border-color:var(--brand)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}

/* ---------- Header: WHITE bar (logo has an opaque white ground) ---------- */
.hdr{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.hdr__in{display:flex;align-items:center;gap:18px;min-height:88px;padding:8px 20px;max-width:var(--wrap);margin:0 auto}
.hdr__logo{flex:0 0 auto;display:block;text-decoration:none}
.hdr__logo img{height:66px;width:auto}
.hdr__spacer{flex:1 1 auto}
/* header CTAs live OUTSIDE the nav list so .nav__links>li>a can never override them */
.hdr__cta{display:flex;gap:10px;flex:0 0 auto;align-items:stretch}
/* both header CTAs render at identical width and height regardless of label length */
.hdr__cta .btn{padding:11px 16px;font-size:.93rem;min-width:186px;display:inline-flex;align-items:center;justify-content:center}
.nav{flex:0 0 auto}
.nav__links{list-style:none;display:flex;gap:4px;margin:0;padding:0}
.nav__links>li{position:relative}
.nav__links>li>a{
  display:block;padding:10px 12px;color:var(--navy);text-decoration:none;
  font-weight:600;font-size:.95rem;border-radius:8px;white-space:nowrap;
}
.nav__links>li>a:hover,.nav__links>li>a[aria-current="page"]{background:var(--bg-alt);color:var(--navy)}
/* caret: 0-3-3 specificity so the nav descendant rule cannot swallow the label */
.nav .nav__links>li.has-sub>a.nav__toplink{padding-right:30px;position:relative}
.nav .nav__links>li.has-sub>a.nav__toplink::after{
  content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
  transform:translateY(-70%) rotate(45deg);
}
.sub{
  list-style:none;margin:0;padding:8px;position:absolute;left:0;top:100%;min-width:265px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  display:none;z-index:120;
}
.has-sub:hover>.sub,.has-sub:focus-within>.sub,.sub.open{display:block}
.sub a{display:block;padding:9px 12px;color:var(--navy);text-decoration:none;font-size:.94rem;border-radius:6px}
.sub a:hover{background:var(--bg-alt)}
.navtoggle{display:none;background:#fff;border:2px solid var(--navy);color:var(--navy);border-radius:8px;padding:9px 13px;font-weight:700;cursor:pointer}

/* mobile nav at 1024px: the 900-1024 band cramps and wraps the CTAs */
@media (max-width:1024px){
  .navtoggle{display:block;order:3}
  .hdr__spacer{display:none}
  .hdr__in{flex-wrap:wrap;gap:10px;justify-content:space-between}
  .nav{order:4;flex-basis:100%;display:none}
  .nav.open{display:block}
  .nav__links{flex-direction:column;gap:0;padding:8px 0 12px}
  .nav__links>li>a{padding:12px 6px;border-bottom:1px solid var(--line);border-radius:0}
  .nav .nav__links>li.has-sub>a.nav__toplink::after{right:8px}
  .sub{position:static;display:block;border:0;box-shadow:none;padding:0 0 8px 14px}
  .sub a{padding:8px 6px;font-size:.92rem}
  .hdr__cta{order:2}
  .hdr__cta .btn{padding:10px 12px;font-size:.88rem;min-width:150px}
}
@media (max-width:420px){ .hdr__cta .btn--ghost{display:none} .hdr__cta .btn{min-width:0}
  .hdr__logo img{height:52px} .hdr__in{min-height:72px} }

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--bg-navy);color:#fff;padding:64px 0;isolation:isolate}
/* the image is set inline on the element so url() resolves against the DOCUMENT.
   Inside a custom property consumed here it would resolve against /css/ and 404. */
.hero--img{background-size:cover;background-position:center;background-repeat:no-repeat}
.hero--img::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(1,26,62,.93) 0%,rgba(1,34,81,.82) 55%,rgba(1,34,81,.62) 100%)}
.hero h1{color:#fff;margin-bottom:.35em}
.hero p{color:#E8EDF3;font-size:1.09rem;max-width:none}
.hero__eyebrow{display:inline-block;background:var(--brand);color:var(--navy);font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:99px;margin-bottom:16px}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:start}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr;gap:26px}}

/* ---------- Trust strip ---------- */
.trust{background:var(--navy-d);color:#DCE4EE;padding:0}
.trust ul{list-style:none;margin:0;padding:14px 20px;display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:center;max-width:var(--wrap);margin:0 auto}
.trust li{font-size:.93rem;font-weight:600}
.trust b{color:var(--brand)}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid--3,.grid--2{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.card--img{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card--img img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card--img .card__body{padding:18px}
.card__price{display:inline-block;background:var(--bg-alt);border:1px solid var(--line);color:var(--navy);font-weight:700;font-size:.88rem;padding:4px 10px;border-radius:99px;margin-bottom:10px}


/* ---------- Quote checklist (homepage) ---------- */
.checklist{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:12px}
.checklist li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:0 var(--radius) var(--radius) 0;padding:14px 18px;font-size:1rem}
.checklist li strong{display:block;margin-bottom:3px}

/* ---------- Steps ---------- */
.steps{counter-reset:s;display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:20px 20px 20px 62px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.step::before{
  counter-increment:s;content:counter(s);position:absolute;left:18px;top:18px;
  width:32px;height:32px;border-radius:50%;background:var(--brand);color:var(--navy);
  font-weight:800;display:grid;place-items:center;font-size:1rem;
}
.step h3{margin:0 0 .35em;font-size:1.06rem}
.step p{margin:0;font-size:.96rem}

/* ---------- Price list ---------- */
.prices{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.prices li{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.prices li:last-child{border-bottom:0}
.prices li:nth-child(odd){background:var(--bg-alt)}
.prices .job{font-weight:600;color:var(--navy);flex:1 1 260px;min-width:0}
/* NOT nowrap: several figures carry a descriptive clause ("£150 to £400 from a ladder,
   £400 to £700 if a scaffold is needed") and nowrap clipped them on mobile. */
.prices .fig{font-weight:700;color:var(--navy);flex:1 1 auto;min-width:0;text-align:right;overflow-wrap:anywhere}
@media (max-width:560px){
  .prices li{flex-direction:column;gap:2px}
  .prices .fig{text-align:left}
}
.note{font-size:.93rem;color:var(--charcoal);background:var(--bg-alt);border-left:4px solid var(--brand);padding:14px 16px;border-radius:0 var(--radius) var(--radius) 0;margin:20px 0}

/* ---------- Prose ---------- */
.prose h2{border-top:1px solid var(--line);padding-top:1.1em}
.prose h2:first-child{border-top:0;padding-top:0;margin-top:0}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.1em}
.prose li{margin-bottom:.45em}
.answer{background:var(--bg-alt);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:0 var(--radius) var(--radius) 0;padding:18px 20px;margin:0 0 28px}
.answer p{margin:0;font-size:1.03rem}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;background:#fff}
.faq summary{cursor:pointer;padding:15px 18px;font-weight:700;color:var(--navy);list-style:none;position:relative;padding-right:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:translateY(-70%) rotate(45deg)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .faq__a{padding:0 18px 16px}
.faq .faq__a p:last-child{margin-bottom:0}

/* ---------- Areas ---------- */
.arealist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.arealist a{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 14px;font-size:.93rem;text-decoration:none;color:var(--navy);font-weight:600}
.arealist a:hover{border-color:var(--navy);background:var(--bg-alt)}

/* ---------- Forms ---------- */
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 6px 24px rgba(0,0,0,.16)}
.formcard h2{margin-top:0;font-size:1.3rem}
.field{margin-bottom:13px}
.field label{display:block;font-weight:600;color:var(--navy);font-size:.92rem;margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;padding:11px 12px;border:1px solid #B9C2CC;border-radius:8px;font:inherit;font-size:.97rem;color:var(--ink);background:#fff;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);outline:2px solid var(--brand);outline-offset:1px}
.hp{position:absolute!important;left:-9999px!important}
.formnote{font-size:.85rem;color:var(--charcoal);margin:10px 0 0}

/* ---------- Footer ---------- */
.ftr{background:var(--navy);color:#C9D6E6;padding:44px 0 22px;margin-top:20px}
.ftr h2{color:#fff;font-size:1rem;margin:0 0 .8em;margin-top:0;text-transform:uppercase;letter-spacing:.05em}
.ftr a{color:#C9D6E6;text-decoration:none;font-size:.95rem}
.ftr a:hover{color:var(--brand);text-decoration:underline}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:7px}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__grid{grid-template-columns:1fr}}
.ftr__addr{font-size:.92rem;color:#A9BCD4;margin-top:10px}
.ftr__disc{background:var(--navy-d);color:#B9C8DC;font-size:.9rem;padding:14px 0;text-align:center}
.ftr__bot{border-top:1px solid rgba(255,255,255,.16);margin-top:26px;padding-top:16px;font-size:.87rem;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}


/* ---------- Closing CTA band: navy, so the page never ends on a third grey block ---------- */
.cta--navy{background:var(--navy);color:#E8EDF3}
.cta--navy h2{color:#fff}
.cta--navy p{color:#E8EDF3}
.cta--navy a:not(.btn){color:#fff}
.cta--navy .btn--ghost{color:#fff;border-color:#fff;background:transparent}
.cta--navy .btn--ghost:hover{background:#fff;color:var(--navy)}

.stamp{font-size:.92rem;color:var(--charcoal);border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:22px}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.87rem;padding:12px 0 0;color:var(--charcoal)}
.crumbs a{color:var(--charcoal)}
.crumbs span{opacity:.6;padding:0 5px}

/* ---------- Tables that must scroll rather than push the page ---------- */
.tablewrap{overflow-x:auto;margin:0 0 1.2em}
.tablewrap table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
.tablewrap th,.tablewrap td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.tablewrap th{background:var(--bg-alt);color:var(--navy)}

.imgband{position:relative;min-height:230px;background-size:cover;background-position:center;border-radius:var(--radius);overflow:hidden;display:grid;place-items:center;text-align:center;padding:34px 22px}
.imgband::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,26,62,.72),rgba(1,26,62,.86))}
.imgband>*{position:relative;z-index:1}
.imgband h2,.imgband p{color:#fff}
.imgband h2{margin-top:0}

@media print{.hdr,.ftr,.btn-row,.navtoggle{display:none}}