/* Self-hosted fonts. Archivo ships as one variable file covering 400 to 700;
   Zilla Slab is a single static weight (600, used for all headings). No requests to Google: both files live in public/fonts/. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonts/archivo-latin-variable.woff2") format("woff2");
}
@font-face{
  font-family:'Zilla Slab';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/zilla-slab-latin-600.woff2") format("woff2");
}

:root{
  --esp:#1c140f;--esp2:#271c15;--brown:#3a2a1f;
  --stone:#f1ebe1;--paper:#faf7f1;--ln:#ddd3c3;
  --ink:#1c140f;--m:#62564a;
  --brass:#c69a5b;--bronze:#8a5a2b;--cream:#efe6d6;
  --serif:'Zilla Slab',Georgia,serif;
  /* HERO PHOTO SLOT: public/images/hero-roof.jpg
     Full-bleed background behind the dark hero gradient. Suggested shot:
     landscape, your crew mid-job (re-roof / loft conversion / extension),
     daylight, UK residential setting. ~3:2, deliver ~1600px wide, JPEG,
     under 250KB. Current file is a compressed Unsplash placeholder: swap
     for your own photography. */
  --photo:url("images/hero-roof.jpg");
}
*{box-sizing:border-box;margin:0;padding:0;}html{scroll-behavior:smooth;}
body{font-family:'Archivo',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ink);background:var(--stone);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;}
.c{width:min(1160px,90%);margin:0 auto;}a{color:var(--bronze);}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}
h1,h2,.pp,.si .n,#how .sp2 .n{font-family:var(--serif);font-weight:600;}
h3{font-weight:600;letter-spacing:-.005em;}
#form,.hero{scroll-margin-top:88px;}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}

/* nav */
nav{background:rgba(250,247,241,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--ln);position:sticky;top:0;z-index:50;}
.ni{display:flex;align-items:center;justify-content:space-between;padding:18px 0;}
.b{display:flex;gap:12px;align-items:center;font-family:var(--serif);font-size:24px;color:var(--ink);text-decoration:none;}
.mk{width:34px;height:34px;background:var(--esp);color:var(--brass);display:grid;place-items:center;font-size:18px;}
.nl{display:flex;gap:32px;font-weight:500;font-size:15px;}.nl a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s;}.nl a:hover{border-color:var(--brass);}
.nc{background:var(--esp);color:var(--cream);padding:11px 20px;min-height:44px;display:inline-flex;align-items:center;font-weight:600;font-size:14px;text-decoration:none;letter-spacing:.01em;transition:background .2s;}.nc:hover{background:var(--brown);}

/* hero: photo placeholder under an espresso wash */
.hero{position:relative;color:var(--cream);padding:96px 0 120px;background:linear-gradient(90deg,rgba(28,20,15,.97) 0%,rgba(28,20,15,.92) 44%,rgba(28,20,15,.5) 100%),var(--photo) center/cover,var(--esp);}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:repeating-linear-gradient(90deg,var(--brass) 0 1px,transparent 1px 60px) bottom/100% 14px no-repeat,repeating-linear-gradient(90deg,rgba(198,154,91,.5) 0 1px,transparent 1px 12px) bottom/100% 7px no-repeat;}
.hg{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center;}
.tag{display:inline-flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:28px;}
.tag:before{content:"";width:40px;height:1px;background:var(--brass);}
h1{font-size:clamp(38px,5.2vw,68px);line-height:1.06;letter-spacing:-.015em;margin-bottom:26px;color:#fff;}
.sp{font-size:clamp(16px,1.7vw,19px);color:rgba(239,230,214,.82);max-width:32em;margin-bottom:36px;}
.ha{display:flex;gap:14px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:15px 28px;font-weight:600;font-size:16px;border:1px solid transparent;cursor:pointer;text-decoration:none;font-family:inherit;transition:background .2s,color .2s,border-color .2s;}
.bl,.ba,.bb{background:var(--brass);color:var(--esp);}.bl:hover,.ba:hover,.bb:hover{background:#d6ad72;}
.bg{background:transparent;color:var(--cream);border-color:rgba(239,230,214,.4);}.bg:hover{border-color:var(--cream);}
.be{background:var(--esp);color:var(--cream);}.be:hover{background:var(--brown);}
.bo{background:transparent;color:var(--esp);border-color:var(--esp);}.bo:hover{background:var(--esp);color:var(--cream);}
.hp{margin-top:40px;font-size:14px;color:rgba(239,230,214,.72);}
.hp b{color:var(--cream);font-weight:600;}
.st{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;border-top:1px solid rgba(198,154,91,.35);}
.si{padding:20px 20px 0 0;}.si+.si{padding-left:20px;border-left:1px solid rgba(198,154,91,.35);}
.si .n{font-size:34px;line-height:1.1;color:var(--brass);}.si .l{font-size:12px;color:rgba(239,230,214,.7);text-transform:uppercase;letter-spacing:.08em;margin-top:6px;}

/* form card */
.ac{background:var(--paper);padding:36px 34px;color:var(--ink);border-top:3px solid var(--brass);box-shadow:0 40px 90px rgba(0,0,0,.45);}
.ac h3{font-family:var(--serif);font-weight:600;font-size:30px;margin-bottom:6px;}
.ac p{color:var(--m);font-size:14px;margin-bottom:22px;}
.ac label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;display:block;color:var(--m);}
.ac input,.ac select{width:100%;min-height:48px;padding:12px 14px;line-height:1.3;border:1px solid var(--ln);background:#fff;margin-bottom:14px;font:inherit;font-size:15px;color:var(--ink);border-radius:0;}
.ac input::placeholder{color:var(--m);opacity:1;}
.ac input:focus,.ac select:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--bronze);}
.ac .fn{font-size:13px;margin:14px 0 0;text-align:center;color:var(--m);}
.ac .fn2{font-size:12px;margin:8px 0 0;text-align:center;color:var(--m);}
.ac .fn2 a{color:var(--bronze);}

/* sections */
section{padding:112px 0;}
.ey{display:inline-flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);margin-bottom:18px;}
.ey:before,.t .ey:after{content:"";width:32px;height:1px;background:currentColor;}
h2{font-size:clamp(30px,3.8vw,48px);letter-spacing:-.01em;line-height:1.12;margin-bottom:20px;}
.ld{max-width:42em;color:var(--m);font-size:18px;margin-bottom:48px;}
.t{text-align:center;}.t h2{max-width:22em;margin-left:auto;margin-right:auto;}.t .ld{margin-left:auto;margin-right:auto;}

/* why: open columns under a rule */
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px;}
.cd{border-top:1px solid var(--ink);padding-top:28px;}
.ic{width:48px;height:48px;border:1px solid var(--bronze);color:var(--bronze);display:grid;place-items:center;margin-bottom:22px;}
.cd h3{font-size:20px;line-height:1.3;margin-bottom:10px;}
.cd p{color:var(--m);}

/* mechanism: blueprint band */
#proof{background-color:var(--esp2);background-image:linear-gradient(rgba(198,154,91,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(198,154,91,.07) 1px,transparent 1px);background-size:36px 36px;color:var(--cream);}
#proof h2{color:#fff;}#proof .ey{color:var(--brass);}#proof .ld{color:rgba(239,230,214,.75);}
.g3s{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px;text-align:left;}
.mech{gap:0;border:1px solid rgba(198,154,91,.4);}
.mech .sp2{padding:36px 32px;}.mech .sp2+.sp2{border-left:1px solid rgba(198,154,91,.4);}
.mech .n{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:22px;}
.mech h3{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.2;color:#fff;margin-bottom:14px;}
.mech p{font-size:15px;color:rgba(239,230,214,.75);}

/* how: numbered steps */
#how .sp2{border-left:1px solid var(--bronze);padding:4px 0 4px 28px;}
#how .sp2 .n{font-size:40px;line-height:1;color:var(--bronze);margin-bottom:18px;}
#how .sp2 h3{font-size:20px;margin-bottom:8px;}#how .sp2 p{color:var(--m);}

/* audit: ruled spec sheet */
#audit-offer{background:var(--paper);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);}
#audit-offer .g3{gap:1px;background:var(--ln);border:1px solid var(--ln);}
#audit-offer .cd{background:var(--paper);border-top:none;padding:32px 28px;}
.ao{text-align:center;margin-top:48px;}
.ao p{max-width:44em;margin:0 auto 26px;color:var(--m);font-size:16px;}

/* pricing: the loudest thing on the page */
.pri{background:var(--stone);}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:32px;max-width:960px;margin:24px auto 0;align-items:start;}
.pl{background:var(--paper);border:1px solid var(--esp);padding:48px 40px 40px;position:relative;box-shadow:0 30px 70px rgba(28,20,15,.12);}
.pl.ft{background:var(--esp);color:var(--cream);border-color:var(--brass);box-shadow:0 50px 100px rgba(28,20,15,.45);}
.bd{position:absolute;top:-1px;right:40px;transform:translateY(-50%);background:var(--brass);color:var(--esp);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:7px 14px;}
.pn{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--bronze);}
.pp{font-size:76px;letter-spacing:-.02em;line-height:1;margin:18px 0 12px;color:var(--ink);}.pp span{font-family:'Archivo',sans-serif;font-size:16px;font-weight:500;color:var(--m);letter-spacing:0;margin-left:4px;}
.pr{font-size:14px;color:var(--m);margin-bottom:26px;padding-bottom:26px;border-bottom:1px solid var(--ln);}
.pl ul{list-style:none;margin-bottom:34px;}
.pl li{padding:9px 0 9px 30px;position:relative;font-size:15px;}
.pl li strong{font-weight:600;}
.pl li:before{content:"";position:absolute;left:0;top:14px;width:16px;height:16px;background:var(--bronze);-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat;}
:root{--tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");}
.pl.ft .pn{color:var(--brass);}.pl.ft .pp{color:#fff;}
.pl.ft .pr,.pl.ft .pp span{color:rgba(239,230,214,.7);}.pl.ft .pr{border-color:rgba(198,154,91,.3);}
.pl.ft li:before{background:var(--brass);}
.bw{width:100%;}
@media(min-width:861px){.pl.ft{transform:translateY(-20px);}}

/* faq */
.faq{background:var(--paper);border-top:1px solid var(--ln);}
.faq .c{max-width:860px;}
.faq details{border-bottom:1px solid var(--ln);padding:24px 0;}
.faq summary{font-weight:600;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:after{content:"+";font-family:var(--serif);font-size:28px;line-height:1;color:var(--bronze);}
.faq details[open] summary:after{content:"−";}
.faq p{padding-top:12px;color:var(--m);max-width:48em;}

/* closer */
.cl{text-align:center;padding:128px 0;color:var(--cream);background:linear-gradient(rgba(28,20,15,.88),rgba(28,20,15,.94)),url("images/closer-roof.jpg") center/cover,var(--esp);}
.cl h2{color:#fff;max-width:20em;margin:0 auto 22px;}.cl p{max-width:40em;margin:0 auto 34px;color:rgba(239,230,214,.8);font-size:18px;}
/* CLOSER PHOTO SLOT: public/images/closer-roof.jpg
   Same treatment as the hero, different shot so the page doesn't repeat
   itself: a finished job or another angle on the crew. Same spec: ~1600px
   wide landscape, under 250KB JPEG. Placeholder only. */

/* trust */
.tr{padding:44px 0;background:var(--stone);border-bottom:1px solid var(--ln);}
.tl{display:flex;flex-wrap:wrap;gap:18px 44px;justify-content:center;}
.ti{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--ink);font-size:15px;}
.ti span{color:var(--bronze);display:flex;}.ti svg.i{width:18px;height:18px;stroke-width:2;}

/* footer */
footer{background:var(--esp);color:rgba(239,230,214,.72);padding:72px 0 40px;}
.fg{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;}
footer h4{color:var(--brass);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px;}
footer .fb{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--cream);}
footer a{color:var(--cream);}
.fg ul{list-style:none;}.fg li{margin-bottom:10px;}
.fo{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding-top:28px;margin-top:40px;border-top:1px solid rgba(198,154,91,.25);font-size:13px;color:rgba(239,230,214,.55);}
.fo a{color:rgba(239,230,214,.85);}

/* one-off pages: thanks / privacy / 404 */
.page{padding:112px 0;max-width:640px;}
.page h1{font-size:clamp(30px,4vw,44px);color:var(--ink);margin-bottom:20px;}
.page p{color:var(--m);font-size:17px;margin-bottom:18px;}
.page a{color:var(--bronze);}
.errwrap{min-height:100vh;display:grid;place-items:center;text-align:center;background:var(--esp);color:var(--cream);padding:32px;}
.errwrap h1{font-family:var(--serif);font-weight:600;font-size:clamp(28px,5vw,44px);margin-bottom:16px;color:#fff;}
.errwrap a{color:var(--brass);font-weight:600;}

@media(max-width:860px){
  .hero{background:linear-gradient(180deg,rgba(28,20,15,.9),rgba(28,20,15,.97)),var(--photo) center/cover,var(--esp);padding:64px 0 88px;}
  .hg{grid-template-columns:1fr;gap:48px;}.nl{display:none;}.fg{grid-template-columns:1fr;}
  .mech .sp2+.sp2{border-left:none;border-top:1px solid rgba(198,154,91,.4);}
  section{padding:80px 0;}
}
@media(max-width:520px){.st{grid-template-columns:1fr;}.si+.si{padding-left:0;border-left:none;border-top:1px solid rgba(198,154,91,.25);}.si{padding:16px 0;}.nc{padding:10px 14px;font-size:13px;}.pl{padding:40px 24px 32px;}.pp{font-size:60px;}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;}}