/* ===================================================================
   Leicester Home Improvement — shared stylesheet
   Palette from the existing logo: trade blue on graphite.
   System fonts only — no third-party requests, nothing to consent to.
   =================================================================== */

:root{
  --blue:#1E7BE4;
  --blue-dark:#1560B4;
  --blue-wash:#E8F1FD;
  --ink:#16181B;
  --ink-raise:#1D2126;
  --graphite:#3F4348;
  --slate:#5C6167;
  --mute:#8E99A6;
  --line:#DFE4E9;
  --mist:#F4F7FA;
  --paper:#FFFFFF;
  --green:#1E9E5A;
  --green-dark:#17824A;

  --wrap:1120px;
  --pad:clamp(20px,5vw,40px);
  --radius:4px;
  --shadow:0 1px 2px rgba(22,24,27,.05), 0 10px 24px -20px rgba(22,24,27,.30);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; font-weight:300; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.15; letter-spacing:-.015em; font-weight:600}
b,strong{font-weight:500}
h1{font-size:clamp(2rem,5.6vw,3.4rem)}
h2{font-size:clamp(25px,3.4vw,34px)}
h3{font-size:1.125rem; letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:clamp(56px,8vw,80px)}
.section--tight{padding-block:clamp(40px,6vw,64px)}
.section--mist{background:var(--mist); border-block:1px solid var(--line)}
.section--ink{background:var(--mist); color:var(--ink); border-block:1px solid var(--line)}

.head{max-width:58ch; margin-bottom:clamp(28px,4vw,44px)}
.head__kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--blue); margin-bottom:14px; white-space:nowrap;
}
.head__kicker::before{content:""; width:28px; height:1px; background:var(--blue); opacity:.6; flex:none}
@media (max-width:560px){
  .head__kicker{font-size:11px; letter-spacing:.18em; gap:10px; white-space:normal}
}
.head p{margin-top:14px; color:var(--slate); font-size:17.5px; max-width:620px}
.section--ink .head p{color:var(--slate)}
.head--flush{margin-bottom:0}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:4px; border:1px solid transparent;
  font:inherit; font-weight:500; font-size:13.5px; text-decoration:none; cursor:pointer;
  text-transform:uppercase; letter-spacing:.14em; line-height:1.3;
  transition:background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
  min-height:52px;
}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btn--primary{background:var(--blue); color:#fff}
.btn--primary:hover{background:var(--blue-dark)}
.btn--wa{background:var(--green); color:#fff}
.btn--wa:hover{background:var(--green-dark)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--blue); color:var(--blue)}

.btn--sm{padding:11px 20px; min-height:44px; font-size:12px; letter-spacing:.12em}
.btn svg{width:19px; height:19px; flex:none}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}

/* ---------------- header ---------------- */

.header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--line);
}
.header .wrap{display:flex; align-items:center; gap:14px; min-height:74px}

.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.brand__mark{width:46px; height:36px; flex:none}
.brand__name{display:grid; line-height:1.05}
.brand__name b{font-size:1rem; letter-spacing:-.01em}
.brand__name span{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); font-weight:600}

/* The inline nav is never shown — the burger is the only navigation, at
   every width. Kept in the markup so the links are still in the document
   for search engines and for anyone browsing without CSS. */
.nav{display:none}
.nav a{
  text-decoration:none; font-weight:500; font-size:13px; color:var(--graphite);
  text-transform:uppercase; letter-spacing:.16em; padding-block:6px; white-space:nowrap;
}
.nav a:hover{color:var(--blue)}
.nav a[aria-current="page"]{color:var(--blue)}

.header .btn{padding:12px 18px; min-height:46px; font-size:.94rem}
.header__call{display:none}
@media (min-width:640px){ .header__call{display:inline-flex} }

.burger{
  display:inline-grid; place-items:center; width:46px; height:46px; flex:none;
  background:transparent; border:1px solid var(--line); border-radius:4px; cursor:pointer;
}
.burger svg{width:22px; height:22px; color:var(--ink)}

.drawer{
  display:none; border-top:1px solid var(--line); background:var(--paper);
  padding:12px var(--pad) 22px;
}
/* line the drawer up with the rest of the page rather than letting it run
   the full width of a desktop screen */
.drawer > *{max-width:var(--wrap); margin-inline:auto}
.drawer.on{display:block}
.drawer a{
  display:block; padding:14px 4px; text-decoration:none; font-weight:600;
  border-bottom:1px solid var(--line); color:var(--graphite);
}
.drawer a[aria-current="page"]{color:var(--blue)}
.drawer .btn{width:100%; margin-top:16px}

/* ---------------- hero ---------------- */
.hero{position:relative; background:var(--paper); color:var(--ink); overflow:hidden}
.hero .wrap{position:relative; z-index:1; padding-block:clamp(52px,9vw,104px)}
.hero__inner{max-width:44rem}
.hero h1 em{font-style:normal; color:var(--blue)}
.hero__lead{margin-top:20px; font-size:clamp(1.05rem,2.2vw,1.22rem); color:var(--slate); max-width:40rem}
.hero .btn-row{margin-top:30px}
.hero__note{margin-top:18px; font-size:.9rem; color:var(--mute)}

/* compact page header for inner pages */
.pagehead{background:var(--mist); color:var(--ink); position:relative; border-bottom:1px solid var(--line)}
.pagehead .wrap{padding-block:clamp(40px,6vw,72px)}
.pagehead h1{font-size:clamp(1.9rem,4.6vw,2.9rem)}
.pagehead p{margin-top:16px; color:var(--slate); max-width:46rem; font-size:1.06rem}

.crumbs{font-size:.85rem; color:var(--mute); margin-bottom:16px}
.crumbs a{text-decoration:none; color:var(--slate)}
.crumbs a:hover{color:var(--blue)}

.trust{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  margin-top:40px;
}
@media (min-width:680px){ .trust{grid-template-columns:repeat(3,1fr)} }
.trust div{background:var(--paper); padding:18px 20px}
.trust b{display:block; font-size:1rem}
.trust span{font-size:.88rem; color:var(--slate)}

/* ---------------- grids & cards ---------------- */
.grid{display:grid; gap:14px}
@media (min-width:640px){ .grid--2,.grid--3{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .grid--3{grid-template-columns:repeat(3,1fr)} }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:26px 24px; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card:hover{border-color:#BFD6F2; transform:translateY(-2px); box-shadow:var(--shadow)}
.card__icon{
  width:44px; height:44px; border-radius:4px; background:var(--blue-wash); color:var(--blue);
  display:grid; place-items:center; margin-bottom:16px;
}
.card__icon svg{width:23px; height:23px}
.card h3{margin-bottom:8px}
.card p{color:var(--slate); font-size:.96rem}
.card ul{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:6px}
.card li{font-size:.9rem; color:var(--slate); padding-left:18px; position:relative}
.card li::before{
  content:""; position:absolute; left:0; top:.55em; width:7px; height:7px;
  border-radius:2px; background:var(--blue); opacity:.55;
}
a.card{text-decoration:none; display:block}
.card__more{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  color:var(--blue); font-weight:700; font-size:.93rem;
}
.card__more svg{width:16px; height:16px}

/* the two arms of the business */
.arms{display:grid; gap:16px}
@media (min-width:860px){ .arms{grid-template-columns:1fr 1fr} }
.arm{
  position:relative; overflow:hidden; text-decoration:none; display:block;
  border:1px solid var(--line); border-radius:var(--radius); padding:clamp(28px,4vw,40px);
  background:var(--paper); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.arm:hover{border-color:#BFD6F2; transform:translateY(-2px); box-shadow:var(--shadow)}
.arm__tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue); margin-bottom:14px;
}
.arm h3{font-size:clamp(1.35rem,2.6vw,1.7rem); margin-bottom:12px}
.arm p{color:var(--slate)}
.arm ul{margin:18px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.arm li{
  font-size:.85rem; padding:6px 12px; border-radius:4px;
  background:var(--mist); border:1px solid var(--line); color:var(--graphite);
}

/* ---------------- steps ---------------- */
.steps{display:grid; gap:14px; counter-reset:s}
@media (min-width:820px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{padding:28px 24px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius)}
.step::before{
  counter-increment:s; content:counter(s);
  display:grid; place-items:center; width:38px; height:38px; border-radius:9px;
  background:var(--ink); color:#fff; font-weight:700; font-size:1rem; margin-bottom:16px;
}
.step h3{margin-bottom:8px}
.step p{color:var(--slate); font-size:.96rem}

/* ---------------- split ---------------- */
.split{display:grid; gap:clamp(28px,5vw,60px); align-items:center}
@media (min-width:900px){ .split{grid-template-columns:1.05fr .95fr} }
.split--form{align-items:start}
.tick{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px}
.tick li{display:flex; gap:12px; align-items:flex-start; font-size:1rem}
.tick svg{width:20px; height:20px; flex:none; color:var(--blue); margin-top:3px}
.panel{
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:clamp(24px,4vw,34px); box-shadow:var(--shadow);
}
.section--ink .panel{background:var(--paper); border-color:var(--line); box-shadow:none}
.section--mist .panel{box-shadow:none}

/* ---------------- past work ---------------- */
.filters{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px}
.filter{
  font:inherit; font-size:.92rem; font-weight:600; cursor:pointer;
  padding:10px 17px; border-radius:4px; border:1px solid var(--line);
  background:var(--paper); color:var(--graphite); transition:all .15s ease;
}
.filter:hover{border-color:var(--blue); color:var(--blue)}
.filter[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}

.jobs{display:grid; gap:16px}
@media (min-width:640px){ .jobs{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .jobs{grid-template-columns:repeat(3,1fr)} }
.job{
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  background:var(--paper); display:flex; flex-direction:column;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.job:hover{border-color:#BFD6F2; transform:translateY(-2px); box-shadow:var(--shadow)}
.job[hidden]{display:none}
.job__shot{
  aspect-ratio:4/3; background:var(--mist); border-bottom:1px solid var(--line);
  display:grid; place-items:center; text-align:center; padding:16px;
  color:var(--mute); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.job__body{padding:22px 22px 26px}
.job__cat{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); display:block; margin-bottom:8px;
}
.job h3{margin-bottom:7px; font-size:1.05rem}
.job p{color:var(--slate); font-size:.93rem}
.job__meta{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  font-size:.85rem; color:var(--mute); display:flex; gap:14px; flex-wrap:wrap;
}
.empty{
  display:none; padding:44px 24px; text-align:center; color:var(--slate);
  border:1px dashed var(--line); border-radius:var(--radius); background:var(--mist);
}
.empty.on{display:block}

/* ---------------- pricing ---------------- */
.prices{display:grid; gap:14px}
@media (min-width:760px){ .prices{grid-template-columns:repeat(2,1fr)} }
.price{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
  padding:26px 24px; display:flex; flex-direction:column; gap:6px;
}
.price__top{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap}
.price h3{font-size:1.05rem}
.price__fig{font-size:1.3rem; font-weight:700; color:var(--blue); white-space:nowrap; letter-spacing:-.02em}
.price__unit{font-size:.82rem; font-weight:600; color:var(--mute); display:block; text-align:right}
.price p{color:var(--slate); font-size:.94rem; margin-top:6px}

.callout{
  border-left:4px solid var(--blue); background:var(--blue-wash);
  padding:22px 24px; border-radius:0 10px 10px 0; margin-bottom:32px;
}
.callout b{display:block; margin-bottom:6px}
.callout p{color:var(--graphite); font-size:.97rem}

/* ---------------- stepped card form ---------------- */
.stepper{max-width:640px}
.stepper__bar{
  height:6px; border-radius:999px; background:var(--line); overflow:hidden; margin-bottom:12px;
}
.stepper__fill{
  height:100%; width:20%; background:var(--blue); border-radius:999px;
  transition:width .28s cubic-bezier(.4,0,.2,1);
}
.stepper__count{font-size:.85rem; color:var(--slate); font-weight:600; margin-bottom:18px}

.qcard{
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:clamp(26px,4vw,38px); box-shadow:var(--shadow);
}
.qcard[hidden]{display:none}
.qcard__q{font-size:clamp(1.25rem,3vw,1.6rem); font-weight:700; letter-spacing:-.02em}
.qcard__hint{margin-top:10px; color:var(--slate); font-size:.96rem}
.qcard__body{margin-top:24px; display:grid; gap:14px}
.qcard__nav{display:flex; gap:12px; align-items:center; margin-top:26px; flex-wrap:wrap}
.qcard__back{
  background:none; border:none; font:inherit; font-weight:600; color:var(--slate);
  cursor:pointer; padding:10px 4px; text-decoration:underline; text-underline-offset:3px;
}
.qcard__back:hover{color:var(--ink)}

input,select,textarea{
  font:inherit; font-weight:300; font-size:16px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:4px; padding:13px 14px; width:100%;
}
textarea{min-height:130px; resize:vertical; font-size:1rem}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,123,228,.15);
}
label{font-size:.9rem; font-weight:600; display:block; margin-bottom:7px}

/* choice chips used for service + timeframe */
.choices{display:grid; gap:10px}
@media (min-width:560px){ .choices--2{grid-template-columns:1fr 1fr} }
.choice{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  border:1px solid var(--line); border-radius:4px; padding:15px 17px;
  font-weight:600; font-size:.98rem; transition:all .14s ease; background:var(--paper);
}
.choice:hover{border-color:var(--blue); background:var(--blue-wash)}
.choice input{
  width:20px; height:20px; flex:none; accent-color:var(--blue); margin:0; padding:0;
}
.choice:has(input:checked){border-color:var(--blue); background:var(--blue-wash)}

.errline{color:#C22B2B; font-size:.9rem; font-weight:600; display:none}
.errline.on{display:block}

.done{text-align:center; padding:clamp(30px,5vw,44px)}
.done__mark{
  width:60px; height:60px; border-radius:50%; background:var(--blue-wash); color:var(--blue);
  display:grid; place-items:center; margin:0 auto 20px;
}
.done__mark svg{width:30px; height:30px}
.done h3{font-size:1.5rem; margin-bottom:12px}
.done p{color:var(--slate)}
.done .btn-row{justify-content:center; margin-top:26px}

.summary{
  margin-top:26px; text-align:left; background:var(--mist); border:1px solid var(--line);
  border-radius:4px; padding:20px 22px; font-size:.94rem; color:var(--graphite);
}
.summary dl{margin:0; display:grid; gap:10px}
.summary div{display:flex; gap:12px; flex-wrap:wrap}
.summary dt{font-weight:700; min-width:104px; color:var(--ink)}
.summary dd{margin:0; color:var(--slate)}

/* ---------------- areas ---------------- */
.areas{display:grid; gap:10px}
@media (min-width:700px){ .areas{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .areas{grid-template-columns:repeat(3,1fr)} }
.area{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:14px 18px; background:var(--paper); border:1px solid var(--line); border-radius:4px;
}
.area b{font-weight:600; font-size:.98rem}
.area span{font-size:.85rem; color:var(--slate); white-space:nowrap}

/* ---------------- CTA band ---------------- */
.band{background:var(--blue-wash); color:var(--ink); padding-block:clamp(44px,7vw,80px); text-align:center; border-block:1px solid #CFE0F7}
.band h2{max-width:20ch; margin-inline:auto}
.band p{margin-top:16px; color:var(--slate); max-width:52ch; margin-inline:auto}
.band .btn-row{justify-content:center; margin-top:30px}

/* ---------------- footer ---------------- */
.footer{background:var(--ink); color:#AEB6BF; padding-block:clamp(44px,6vw,72px); font-size:.94rem}
.footer a{color:#fff; text-decoration:none}
.footer a:hover{color:var(--blue)}
.footer__grid{display:grid; gap:32px}
@media (min-width:820px){ .footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr} }
.footer h4{margin:0 0 14px; color:#fff; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.footer__base{
  margin-top:36px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:.85rem; color:#7D8792;
}
.footer .brand__name b{color:#fff}
.footer .brand__name span{color:#7D8792}

/* ---------------- sticky mobile call bar ---------------- */
.callbar{
  position:fixed; inset:auto 0 0 0; z-index:70; display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:rgba(0,0,0,.12);
  box-shadow:0 -6px 20px -10px rgba(0,0,0,.4);
}
@media (min-width:900px){
  /* on a wide screen a full-bleed bar looks like an error, so it becomes a
     pill sitting bottom-right, still always visible */
  .callbar{
    inset:auto 20px 20px auto; width:min(360px,90vw); border-radius:6px;
    overflow:hidden; box-shadow:0 10px 30px -12px rgba(0,0,0,.45);
  }
}
.callbar a{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 10px; text-decoration:none; font-weight:700; font-size:1rem; color:#fff;
}
.callbar a:first-child{background:var(--blue)}
.callbar a:last-child{background:var(--green)}
.callbar svg{width:19px; height:19px}
/* stays put at every width — it's the whole point of the thing */
body{padding-bottom:56px}

.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:100; background:#fff; padding:12px 16px; border-radius:8px}

/* ===================================================================
   Brand badge, hub page, feature rows, stage timeline,
   job progression, glass hero.
   =================================================================== */

/* ---------------- brand badge (remade mark) ---------------- */
.brand__badge{
  width:46px; height:46px; flex:none; border-radius:11px; overflow:hidden;
  box-shadow:0 1px 2px rgba(22,24,27,.14);
}
.brand__name b{font-size:1.04rem; letter-spacing:-.015em}
.brand__name .wordmark{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--slate); font-weight:700;
}
.footer .brand__name .wordmark{color:#7D8792}

/* ---------------- hub page ---------------- */
.hub{display:grid; gap:18px}
@media (min-width:900px){ .hub{grid-template-columns:1fr 1fr} }
.hubcard{
  position:relative; overflow:hidden; text-decoration:none; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:4px; background:var(--paper);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  min-height:380px;
}
.hubcard:hover{border-color:#BFD6F2; transform:translateY(-3px); box-shadow:var(--shadow)}
.hubcard__art{
  position:relative; aspect-ratio:4/3; flex:none; overflow:hidden;
  background:var(--mist); border-bottom:1px solid var(--line);
}
.hubcard__art svg{position:absolute; inset:0; width:100%; height:100%}
.hubcard__inner{padding:clamp(24px,3.4vw,34px); display:flex; flex-direction:column; flex:1}
.hubcard__tag{
  font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--blue); margin-bottom:12px;
}
.hubcard h3{font-size:clamp(1.4rem,2.8vw,1.8rem); margin-bottom:12px}
.hubcard p{color:var(--slate)}
.hubcard ul{margin:20px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.hubcard li{
  font-size:.85rem; padding:6px 12px; border-radius:4px;
  background:var(--mist); border:1px solid var(--line); color:var(--graphite);
}
.hubcard__go{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:24px;
  color:var(--blue); font-weight:700; font-size:.98rem;
}
.hubcard__go svg{width:17px; height:17px; transition:transform .18s ease}
.hubcard:hover .hubcard__go svg{transform:translateX(4px)}

/* ---------------- alternating feature rows ---------------- */
.feature{
  display:grid; gap:clamp(26px,4vw,56px); align-items:center;
  padding-block:clamp(34px,5vw,60px);
}
@media (min-width:920px){
  .feature{grid-template-columns:1fr 1fr}
  .feature--flip .feature__art{order:2}
}
.feature + .feature{border-top:1px solid var(--line)}
/* The frame shrink-wraps the photo instead of holding a fixed 4:3 box.
   Most of these are phone-portrait, so a fixed box left grey bars down
   both sides; capping the height and letting the width follow keeps the
   whole photo — nothing cropped — with no empty space around it. */
.feature__art{
  position:relative; border-radius:4px; overflow:hidden;
  background:var(--mist); border:1px solid var(--line);
  width:fit-content; max-width:100%; margin-inline:auto;
}
.feature__art img{
  display:block; width:auto; height:auto;
  max-width:100%; max-height:clamp(300px,44vw,470px);
}
/* Sits on the photo now rather than on a blank panel, so it needs to hold
   up against whatever is behind it. */
.feature__num{
  position:absolute; left:18px; top:10px; z-index:2;
  font-size:clamp(3rem,7vw,4.6rem); font-weight:800; line-height:1;
  color:rgba(255,255,255,.92); letter-spacing:-.04em; pointer-events:none;
  text-shadow:0 2px 14px rgba(12,17,22,.55), 0 1px 3px rgba(12,17,22,.4);
}
.feature h3{font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:14px}
.feature p{color:var(--slate); font-size:1.03rem}
.feature ul{margin:20px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.feature li{display:flex; gap:11px; align-items:flex-start; font-size:.98rem; color:var(--graphite)}
.feature li svg{width:19px; height:19px; flex:none; color:var(--blue); margin-top:3px}

/* ---------------- stage timeline ---------------- */
.stages{position:relative; margin-top:12px}
.stages::before{
  content:""; position:absolute; left:19px; top:8px; bottom:8px; width:2px;
  background:var(--line); border-radius:2px;
}
.stages__fill{
  position:absolute; left:19px; top:8px; width:2px; height:0; border-radius:2px;
  background:var(--blue); transition:height .25s linear;
}
.stage{position:relative; padding:0 0 34px 58px}
.stage:last-child{padding-bottom:0}
.stage__dot{
  position:absolute; left:8px; top:2px; width:24px; height:24px; border-radius:50%;
  background:var(--paper); border:2px solid var(--line); display:grid; place-items:center;
  font-size:.72rem; font-weight:800; color:var(--slate); z-index:1; transition:all .25s ease;
}
.stage.on .stage__dot{border-color:var(--blue); background:var(--blue); color:#fff}
.stage h3{font-size:1.08rem; margin-bottom:7px}
.stage p{color:var(--slate); font-size:.97rem}
.section--ink .stages::before{background:var(--line)}
.section--ink .stage__dot{background:var(--paper); border-color:var(--line); color:var(--slate)}
.section--ink .stage p{color:var(--slate)}

/* ---------------- job progression ---------------- */
.job__stage{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--mist); border-bottom:1px solid var(--line)}
.job__frame{position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .3s ease}
.job__frame.on{opacity:1}
.job__frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
/* The stage controls sit under the photo, not over it — nothing covers
   the work itself. */
.job__controls{
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
  padding:16px 18px; border-bottom:1px solid var(--line); background:var(--paper);
  overflow-x:auto; scrollbar-width:none;
}
.job__controls::-webkit-scrollbar{display:none}
.job__tab{flex:none}
.job__tab{
  font:inherit; font-size:.68rem; font-weight:500; letter-spacing:.05em;
  text-transform:uppercase; padding:9px 14px; border-radius:4px; line-height:1;
  border:1px solid var(--line); background:var(--paper); color:var(--slate);
  cursor:pointer; transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.job__tab:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-wash)}
.job__tab[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff}
.job__tab:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.job__count{
  margin-left:auto; font-size:.72rem; font-weight:500; color:var(--mute);
  letter-spacing:.06em; white-space:nowrap;
}
/* in a three-across grid the labels wrap; keep the count on its own line so
   it never gets stranded mid-row */



/* ---------------- glass / water hero (window cleaning) ---------------- */
.glass{position:relative; background:var(--paper); overflow:hidden}
.glass__scene{position:absolute; inset:0; z-index:0}
.glass__pane{
  position:absolute; inset:0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(160deg, #E7F0F8 0%, #FFFFFF 58%);
}
.glass__grid{position:absolute; inset:0; opacity:.5}
.glass__grid::before,.glass__grid::after{
  content:""; position:absolute; background:rgba(22,24,27,.09);
}
.glass__grid::before{left:50%; top:0; bottom:0; width:2px}
.glass__grid::after{top:46%; left:0; right:0; height:2px}
.glass__canvas{position:absolute; inset:0; width:100%; height:100%}
.glass .wrap{position:relative; z-index:2}
.glass__inner{max-width:44rem}
.glass h1{color:var(--ink)}
.glass .hero__lead{color:var(--slate)}
.glass__hint{
  position:absolute; right:20px; bottom:18px; z-index:2; font-size:.76rem;
  color:var(--mute); letter-spacing:.06em;
}
@media (max-width:700px){ .glass__hint{display:none} }

/* squeegee streak that sweeps once on load */
.squeegee{
  position:absolute; top:0; bottom:0; width:120px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(30,123,228,.05),rgba(255,255,255,.85),rgba(30,123,228,.05),transparent);
  transform:translateX(-160px) skewX(-8deg); animation:sweep 2.4s cubic-bezier(.6,0,.3,1) .35s 1 forwards;
}
@keyframes sweep{ to{ transform:translateX(120vw) skewX(-8deg) } }
@media (prefers-reduced-motion:reduce){ .squeegee{display:none} }

/* ---------------- scroll reveal (used sparingly) ---------------- */
/* No entrance animations anywhere. Content is simply there when the page
   loads and when you scroll to it — the only motion left is on hover and on
   the slideshow, both of which answer something the visitor did. */

/* ---------------- pull quote / big statement ---------------- */
.statement{
  font-size:clamp(1.5rem,4vw,2.5rem); font-weight:700; letter-spacing:-.025em;
  line-height:1.22; max-width:22ch;
}
.statement em{font-style:normal; color:var(--blue)}
.statement + p{margin-top:20px; color:var(--slate); font-size:1.05rem; max-width:46ch}
.section--ink .statement + p{color:var(--slate)}

/* glass hero needs more room than a standard page header */
.glass .wrap{padding-block:clamp(66px,11vw,134px)}
.glass .head__kicker{color:var(--blue)}
.glass .head__kicker::before{background:var(--blue)}

/* ---------------- wordmark, matching the letterhead hierarchy ----------------
   Blue "Leicester" over spaced "HOME IMPROVEMENT", the way the original
   logo sets it. Live text, so it stays sharp and readable at any size. */
.brand__badge{width:auto; height:46px; border-radius:0; box-shadow:none}
.brand__name b{
  font-size:1.24rem; letter-spacing:-.02em; color:var(--blue); line-height:1;
}
.brand__name .wordmark{
  font-size:.63rem; letter-spacing:.185em; text-transform:uppercase;
  color:var(--graphite); font-weight:700; margin-top:3px;
}
.footer .brand__name b{color:#fff}
.footer .brand__name .wordmark{color:#8B95A0}
@media (max-width:420px){
  .brand__badge{height:38px}
  .brand__name b{font-size:1.08rem}
  .brand__name .wordmark{font-size:.56rem; letter-spacing:.15em}
}

/* ---------------- split hero ----------------
   Headline one side, a real photo the other. The .hero__shot div is a
   placeholder — swap it for <img> when the job photos land. */
.hero--split .wrap{padding-block:clamp(44px,7vw,84px)}
.hero__grid{display:grid; gap:clamp(30px,5vw,60px); align-items:center}
@media (min-width:960px){
  .hero__grid{grid-template-columns:1.02fr .98fr}
  .hero--split .hero__inner{max-width:none}
}
.hero__media{position:relative}
.hero__shot{
  position:relative; aspect-ratio:4/3; border-radius:4px; overflow:hidden;
  background:var(--mist); border:1px solid var(--line);
  display:grid; place-items:center; text-align:center; padding:24px;
  color:var(--mute); font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 20px 50px -34px rgba(22,24,27,.55);
}
.hero__shot img{width:100%; height:100%; object-fit:cover}
@media (min-width:960px){ .hero__shot{aspect-ratio:5/6} }

/* small floating card over the photo */
.hero__flag{
  position:absolute; left:-14px; bottom:26px; z-index:2;
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:16px 20px; box-shadow:var(--shadow); max-width:15rem;
}
.hero__flag b{display:block; font-size:.98rem; letter-spacing:-.01em}
.hero__flag span{display:block; font-size:.85rem; color:var(--slate); margin-top:3px}
@media (max-width:640px){ .hero__flag{left:12px; bottom:12px; padding:13px 16px} }

/* second flag, top right, for the other side of the business */
.hero__flag--top{top:24px; bottom:auto; left:auto; right:-14px}
@media (max-width:640px){ .hero__flag--top{display:none} }

/* ---------------- bigger hero ---------------- */
.hero--split .wrap{padding-block:clamp(56px,9vw,120px)}
.hero--split h1{font-size:clamp(2.3rem,6.2vw,4.2rem); line-height:1.05}
.hero--split .hero__lead{font-size:clamp(1.1rem,2.3vw,1.34rem); margin-top:24px}
.hero--split .btn-row{margin-top:34px}
.hero--split .btn{padding:17px 28px; min-height:58px; font-size:1.05rem}
.hero .trust{margin-top:clamp(44px,6vw,68px)}
@media (min-width:960px){ .hero__shot{aspect-ratio:4/5} }

/* ---------------- expandable service list ---------------- */
.acc{border-top:1px solid var(--line)}
.acc:last-of-type{border-bottom:1px solid var(--line)}
.acc__head{
  width:100%; display:flex; align-items:flex-start; gap:18px; text-align:left;
  background:none; border:none; font:inherit; cursor:pointer;
  padding:24px 4px; color:var(--ink); transition:color .15s ease;
}
.acc__head:hover{color:var(--blue)}
.acc__num{
  flex:none; font-size:.78rem; font-weight:800; letter-spacing:.06em; color:var(--mute);
  padding-top:6px; width:26px;
}
.acc__text{flex:1; min-width:0}
.acc__t{display:block; font-size:clamp(1.08rem,2.2vw,1.32rem); font-weight:700; letter-spacing:-.02em}
.acc__s{display:block; margin-top:6px; font-size:.95rem; color:var(--slate); font-weight:400}
.acc__i{
  flex:none; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line);
  display:grid; place-items:center; margin-top:2px; transition:all .2s ease;
}
.acc__i svg{width:16px; height:16px; transition:transform .2s ease}
.acc__head:hover .acc__i{border-color:var(--blue); color:var(--blue)}
.acc__head[aria-expanded="true"] .acc__i{background:var(--blue); border-color:var(--blue); color:#fff}
.acc__head[aria-expanded="true"] .acc__i svg{transform:rotate(45deg)}

.acc__body{padding:0 4px 30px 62px}
.acc__body[hidden]{display:none}
.acc__body p{color:var(--slate); max-width:62ch}
.acc__body ul{margin:18px 0 0; padding:0; list-style:none; display:grid; gap:10px}
@media (min-width:760px){ .acc__body ul{grid-template-columns:1fr 1fr; gap:10px 26px} }
.acc__body li{display:flex; gap:11px; align-items:flex-start; font-size:.96rem; color:var(--graphite)}
.acc__body li svg{width:18px; height:18px; flex:none; color:var(--blue); margin-top:3px}
.acc__body .btn{margin-top:22px}
@media (max-width:560px){ .acc__body{padding-left:4px} .acc__num{display:none} }

/* ---------------- big logo lockup on a page ---------------- */
.lockup{display:grid; place-items:center; text-align:center; gap:18px; margin-bottom:clamp(30px,5vw,48px)}
.lockup img{width:clamp(140px,22vw,210px); height:auto}
.lockup__name{display:grid; line-height:1}
.lockup__name b{font-size:clamp(2rem,5vw,3rem); color:var(--blue); letter-spacing:-.03em}
.lockup__name span{
  font-size:clamp(.7rem,1.6vw,.9rem); letter-spacing:.28em; text-transform:uppercase;
  color:var(--graphite); font-weight:700; margin-top:8px;
}

/* ---------------- quote-on-enquiry note ---------------- */
.quotebox{
  border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:0 4px 4px 0;
  background:var(--blue-wash); padding:clamp(24px,3.5vw,32px);
}
.quotebox h3{font-size:1.2rem; margin-bottom:10px}
.quotebox p{color:var(--graphite); font-size:.99rem; max-width:60ch}

/* ===================================================================
   Burton & Derby pass — the treatments carried over from that build,
   in Leicester blue on white rather than gold on black.
   =================================================================== */

/* ---------------- hero lockup ----------------
   The logo lockup IS the h1, so the company name is still real text for
   search and screen readers rather than a decorative image standing in
   for a heading. */
.hero--lockup{text-align:center}
.hero--lockup .wrap{padding-block:clamp(56px,9vw,96px)}
.lockup-h1{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin:0 0 30px; letter-spacing:normal;
}
.lockup-h1 img{width:clamp(150px,20vw,230px); height:auto; margin-bottom:10px}
.lockup-h1__name{
  font-size:clamp(30px,6vw,58px); font-weight:600; letter-spacing:-.02em;
  line-height:1.05; color:var(--blue);
}
.lockup-h1__sub{
  display:flex; align-items:center; gap:clamp(8px,2vw,14px);
  font-size:clamp(9.5px,1.6vw,13px); font-weight:500; text-transform:uppercase;
  letter-spacing:.4em; color:var(--graphite);
}
.lockup-h1__sub::before,.lockup-h1__sub::after{
  content:""; height:1px; width:clamp(20px,6vw,40px); flex:none;
  background:var(--blue); opacity:.7;
}
@media (max-width:380px){ .lockup-h1__sub{letter-spacing:.28em} }

.hero--lockup .hero__lead{margin-inline:auto; max-width:660px; margin-top:0}
.hero--lockup .btn-row{justify-content:center; margin-top:34px}
.hero--lockup .trust{margin-top:clamp(44px,6vw,64px); text-align:left}

/* Burton's stretcher bond, lifted straight across: one 240x64 tile, two
   courses at roughly real brick proportions with the lower offset by half a
   brick, tiled edge to edge behind the hero and nowhere else. Only change is
   gold to Leicester blue. Dial it with the opacity value inside the SVG. */
.hero--lockup::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='64'%3E%3Cg fill='none' stroke='%231E7BE4' stroke-width='1' opacity='0.1'%3E%3Cpath d='M0 .5h240M0 32.5h240'/%3E%3Cpath d='M60 0v32M180 0v32M0 32v32M120 32v32M240 32v32'/%3E%3C/g%3E%3C/svg%3E");
}
.hero--lockup .wrap{position:relative; z-index:1}

/* One straight line where the hero stops. */
.hero--lockup{border-bottom:2px solid var(--blue)}

/* ---------------- work slideshow ---------------- */
.slideshow{max-width:900px; margin-inline:auto}
.slideshow__stage{
  position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:4px;
  border:1px solid var(--line); background:var(--mist);
}
.slideshow__slide{
  position:absolute; inset:0; width:100%; height:100%;
  display:grid; place-items:center; text-align:center; padding:20px;
  opacity:0; transition:opacity .45s ease-out; pointer-events:none;
  color:var(--mute); font-size:.8rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
}
.slideshow__slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.slideshow__slide.is-current{opacity:1}
@media (prefers-reduced-motion:reduce){ .slideshow__slide{transition:none} }

/* Arrows sit under the image, not on it — square, on the page rather than
   floating over someone's work. */
.slideshow__nav{display:flex; align-items:center; gap:8px; flex:none}
.slideshow__arrow{
  display:grid; place-items:center; width:42px; height:42px;
  border:1px solid var(--line); border-radius:4px; background:var(--paper);
  color:var(--graphite); cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.slideshow__arrow:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-wash)}
.slideshow__arrow:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.slideshow__arrow svg{width:20px; height:20px}
@media (max-width:480px){ .slideshow__arrow{width:38px; height:38px} }

.slideshow__foot{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-top:20px; flex-wrap:wrap;
}
.slideshow__cap{font-size:.97rem; color:var(--slate)}
.slideshow__cap b{color:var(--ink); font-weight:500}
.slideshow__count{
  margin-right:4px; font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); white-space:nowrap;
}
/* One block per job rather than a filling bar — you can see how many there
   are, which one you're on, and jump straight to any of them. */
.slideshow__blocks{display:flex; gap:6px; margin-top:18px}
.slideshow__block{
  flex:1; height:4px; padding:0; border:none; cursor:pointer;
  background:var(--line); transition:background .2s ease, transform .2s ease;
}
.slideshow__block:hover{background:#B9CFE9; transform:scaleY(1.8)}
.slideshow__block[aria-current="true"]{background:var(--blue)}
.slideshow__block:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
@media (max-width:560px){ .slideshow__blocks{gap:4px} .slideshow__block{height:5px} }

/* trust strip in its mid-page home: stacked rows rather than three columns,
   since it now sits in a half-width column */
.trust--inline{margin-top:26px; grid-template-columns:1fr}
@media (min-width:680px){ .trust--inline{grid-template-columns:1fr} }
.areas--stack{grid-template-columns:1fr}
@media (min-width:700px){ .areas--stack{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .areas--stack{grid-template-columns:1fr 1fr} }

/* ===================================================================
   Home page — sections given their own shape rather than three
   identical cards in a row over and over.
   =================================================================== */

/* ---------------- the two sides ----------------
   Symmetric because the business genuinely is two halves. Each side
   leads with photographs of that half's work — they say more than the
   brick/water patterns that used to sit here. */
.duo{display:grid; gap:18px}
@media (min-width:880px){ .duo{grid-template-columns:1fr 1fr} }

.duo__side{
  display:flex; flex-direction:column; text-decoration:none;
  border:1px solid var(--line); background:var(--paper);
  transition:border-color .18s ease, transform .18s ease;
}
.duo__side:hover{border-color:#BFD6F2; transform:translateY(-2px)}
/* A band of real photographs at the head of each side — one lead shot and
   two stacked beside it. `cover` rather than `contain` here: these cells are
   landscape, the photos are phone-portrait, and a teaser can crop where a
   job record on past-work cannot. */
.duo__shots{
  display:grid; grid-template-columns:1.5fr 1fr; grid-template-rows:1fr 1fr;
  gap:2px; background:var(--line); height:clamp(180px,25vw,248px); flex:none;
}
.duo__shot{position:relative; overflow:hidden; background:var(--mist)}
.duo__shot:first-child{grid-row:1 / span 2}
.duo__shot img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.duo__side:hover .duo__shot img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){ .duo__side:hover .duo__shot img{transform:none} }

.duo__body{padding:clamp(24px,3.4vw,34px); display:flex; flex-direction:column; flex:1}
.duo__tag{
  font-size:11.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue); margin-bottom:12px;
}
.duo__side h3{font-size:clamp(1.3rem,2.6vw,1.6rem); margin-bottom:10px}
.duo__side p{color:var(--slate); font-size:1rem}
.duo__list{
  margin:18px 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:7px 14px; font-size:.92rem; color:var(--graphite);
}
.duo__list li{position:relative; padding-left:13px}
.duo__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:4px; height:4px;
  background:var(--blue); opacity:.6;
}
.duo__go{
  margin-top:auto; padding-top:22px; display:inline-flex; align-items:center; gap:8px;
  color:var(--blue); font-weight:500; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.14em;
}
.duo__go svg{width:15px; height:15px; transition:transform .18s ease}
.duo__side:hover .duo__go svg{transform:translateX(4px)}

/* ---------------- how it works ----------------
   Numbered markers threaded on a single line so the three read as one
   sequence rather than three separate tiles, and each step says who
   actually does it. */
.flow{display:grid; gap:clamp(26px,4vw,52px)}
@media (min-width:900px){ .flow{grid-template-columns:.8fr 1.2fr; align-items:start} }

.flow__rows{display:grid; gap:0}
/* the thread runs marker to marker, not the full height of the column —
   otherwise it trails off below the last step */
.flow__row:not(:last-child)::before{
  content:""; position:absolute; left:21px; top:50px; bottom:-2px; width:1px;
  background:var(--line);
}

.flow__row{
  position:relative; display:grid; grid-template-columns:auto 1fr;
  gap:20px; padding:0 0 30px;
}
.flow__row:last-child{padding-bottom:0}

.flow__n{
  position:relative; z-index:1;
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--blue); background:var(--paper); color:var(--blue);
  font-size:14px; font-weight:600; letter-spacing:.04em;
}
/* last marker filled in — the sequence has an end */
.flow__row:last-child .flow__n{background:var(--blue); color:#fff}
@media (max-width:560px){
  .flow__n{width:36px; height:36px; font-size:12.5px}
  .flow__row{gap:14px}
  .flow__row:not(:last-child)::before{left:17px; top:42px}
}

.flow__who{
  display:inline-block; margin-bottom:8px;
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue); border:1px solid #CFE0F7; background:var(--blue-wash);
  padding:3px 9px;
}
.flow__row h3{font-size:1.08rem; margin-bottom:5px}
.flow__row p{color:var(--slate); font-size:.96rem; max-width:44ch}
.flow__row > div{padding-top:1px}

/* ---------------- areas: a contents page, not a stack of boxes ----------------
   Name on the left, distance on the right, dotted leader between them — the
   question is "how far am I", so the page should answer it at a glance. */
.leaders{list-style:none; margin:0; padding:0; display:grid}
.leaders li{
  display:flex; align-items:baseline; gap:10px;
  padding:13px 0; border-bottom:1px solid var(--line); font-size:1rem;
}
.leaders li:first-child{border-top:1px solid var(--line)}
.leaders__dots{
  flex:1; height:1px; align-self:center; min-width:18px;
  background-image:radial-gradient(circle, var(--mute) 1px, transparent 1px);
  background-size:6px 1px; background-repeat:repeat-x; opacity:.55;
}
.leaders__d{color:var(--slate); font-size:.92rem; white-space:nowrap; font-variant-numeric:tabular-nums}
.leaders__base .leaders__d{color:var(--blue); font-weight:500}
.leaders__more{margin-top:18px; font-size:.93rem; color:var(--slate)}
.leaders__more a{color:var(--blue); font-weight:500}

/* ---------------- fact list ----------------
   Sits beside the areas column. Deliberately not another bordered box —
   a small blue square, a bold line, a muted line, and air. */
.facts{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:18px}
.facts li{display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:start}
.facts li::before{
  content:""; width:8px; height:8px; background:var(--blue); margin-top:.52em;
  grid-column:1; grid-row:1;
}
/* both lines share column two, stacked — otherwise each becomes its own
   grid item and the label drifts off on its own row */
.facts b{grid-column:2; grid-row:1; font-weight:500; font-size:1rem; letter-spacing:-.01em}
.facts span{grid-column:2; grid-row:2; color:var(--slate); font-size:.94rem; margin-top:2px}

/* ===================================================================
   Page-load entrance

   Deliberately NOT a CSS keyframe animation with fill-mode. That pins
   the from-state whenever animations don't actually run — a frozen
   renderer, an odd browser — and the top of the page stays invisible.
   Instead JS applies the from-state and takes it straight off again:
   if the script or the transition fails, the content is simply there.
   =================================================================== */
@media (prefers-reduced-motion:no-preference){
  .enter{
    transition:opacity .6s cubic-bezier(.22,.61,.36,1),
               transform .6s cubic-bezier(.22,.61,.36,1);
  }
  .enter--from{opacity:0; transform:translateY(14px)}
}

/* header: the phone number and the wordmark must never wrap — with five
   nav items they were both breaking onto two lines around 1050-1250px */
.header__call{white-space:nowrap}
.brand__name b,.brand__name .wordmark{white-space:nowrap}

/* ===================================================================
   Video behind the hero

   Drops in the moment work/hero.mp4 exists. Until then the <video>
   renders nothing and the brickwork shows through exactly as before —
   so a missing or broken file costs nothing.
   =================================================================== */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none;
  /* knocked back and pulled towards the brand blue so it reads as
     background rather than as footage playing on the page */
  filter:saturate(.55) contrast(.95);
}

/* The lockup has to stay readable over whatever is moving underneath,
   so the scrim is heaviest in the middle where the text sits. Over the
   plain white hero it's invisible, which is why it can stay in place
   whether or not a video ever loads. */
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(125% 95% at 50% 46%,
      rgba(255,255,255,.93) 0%,
      rgba(255,255,255,.85) 48%,
      rgba(255,255,255,.70) 100%),
    linear-gradient(180deg, rgba(30,123,228,.10) 0%, rgba(30,123,228,.03) 100%);
}
.hero--lockup .wrap{z-index:2}

/* ===================================================================
   Video hero — the dark treatment

   Only applied once footage is confirmed running (JS adds .hero--playing).
   If the video is missing, blocked or still loading, the hero stays exactly
   as it was: white, with the brickwork. Nothing to fall back from.

   With real footage a white wash bleaches it to nothing, so this goes the
   other way — the shot reads properly and the lockup sits on it in white.
   =================================================================== */
.hero--playing{background:#12161A}
.hero--playing::before{opacity:0}                 /* brickwork out of the way */
.hero--playing .hero__video{
  filter:saturate(.85) contrast(1.02);
  /* the sky is the top third and the work is the bottom — crop low */
  object-position:center 78%;
}
.hero--playing .hero__scrim{
  background:
    linear-gradient(180deg, rgba(10,14,18,.62) 0%, rgba(10,14,18,.34) 42%, rgba(10,14,18,.72) 100%),
    radial-gradient(80% 60% at 50% 46%, rgba(10,14,18,.45) 0%, rgba(10,14,18,0) 70%);
}
.hero--playing .lockup-h1__name{color:#fff}
.hero--playing .lockup-h1__sub{color:rgba(255,255,255,.88)}
.hero--playing .lockup-h1__sub::before,
.hero--playing .lockup-h1__sub::after{background:#8CC0F8; opacity:.9}
.hero--playing .hero__lead{color:rgba(255,255,255,.9)}
.hero--playing .btn--ghost{color:#fff; border-color:rgba(255,255,255,.55)}
.hero--playing .btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.hero--playing .trust{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.16)}
.hero--playing .trust div{background:rgba(10,14,18,.55); backdrop-filter:blur(3px)}
.hero--playing .trust b{color:#fff}
.hero--playing .trust span{color:rgba(255,255,255,.75)}
.hero--playing{border-bottom-color:#8CC0F8}

/* header: five nav items plus a CTA button is tight — stop the brand and the
   nav from ever growing into each other */
.header .wrap{flex-wrap:nowrap}
.brand{min-width:0; flex-shrink:1}
.brand__name{min-width:0}
.nav{flex-shrink:0}
.header .btn{flex-shrink:0; white-space:nowrap}

/* two stacked clips crossfading — the incoming one is raised and faded in */
.hero__video{opacity:0; transition:opacity .8s linear}
#heroA{opacity:1; z-index:1}
#heroB{z-index:0}

/* over footage the outline button loses itself against bright areas of the
   shot — give it a slight backdrop so it stays legible whatever is behind */
.hero--playing .btn--ghost{
  background:rgba(10,14,18,.32); backdrop-filter:blur(2px);
  border-color:rgba(255,255,255,.7);
}
.hero--playing .btn--ghost:hover{background:rgba(10,14,18,.5); border-color:#fff}

/* The hero uses the same two-tone mark as the header, but its graphite
   rooflines and tool row sit very close to the dark scrim and were getting
   lost in the footage. A soft shadow lifts the whole mark off the shot
   without touching the logo itself. Only over footage — on the white pages
   the mark needs nothing. */
.hero--playing .lockup-h1__mark{
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55)) drop-shadow(0 0 2px rgba(0,0,0,.4));
}

/* the two What we offer cards carry real job photos now, not drawn panels */
.hubcard__art img{width:100%; height:100%; object-fit:cover; display:block}


/* ---------------- photos are shown whole, not cropped ----------------
   The set is overwhelmingly phone-portrait, so cropping everything into
   landscape frames was cutting the tops and bottoms off jobs. Frames now
   contain the image on a light ground: the past-work frame is portrait to
   suit the majority, the What we offer cards are 4:3 because those two
   photos are exactly 4:3 and fill them edge to edge. */

/* ---------------- bricks being laid: building page header ----------------
   Mirrors the water-on-glass hero on the cleaning page. The canvas sits
   behind the text and rests as a faint wall once the courses are up. */
.pagehead--bricks{overflow:hidden}
.pagehead__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.pagehead--bricks .wrap{position:relative; z-index:1}
.pagehead--bricks .wrap{padding-block:clamp(52px,8vw,92px)}