/* =========================================================================
   Complete Loft Services
   Workshop Navy, with a second blue so navy-on-navy still separates.
   Archivo for display, Source Sans 3 for body.
   ========================================================================= */

:root{
  /* photographs used as section grounds */
  --hero-img:   url("images/hero.jpg");
  --closer-img: url("images/closer.jpg");

  /* accents, after Loft and Ladders. The second accent is what stops the dark
     sections reading flat, which was the real complaint about the old navy. */
  --orange:      #F37021;
  --orange-dk:   #D85A12;
  /* #F37021 on white is 2.94:1 and AA wants 4.5, so orange TEXT on a light ground
     uses this darker tone instead. It reads as the same orange at body size. */
  --orange-text: #C2450A;
  --orange-tint: #FEF1EA;
  --cyan:        #00AEEF;
  --cyan-dk:     #0090C8;
  --cyan-tint:   #E7F8FE;

  /* grounds */
  --char:        #26292D;
  --char-2:      #303133;
  --char-3:      #3D4247;

  --ink:         #1C1F22;
  --body:        #4A5259;
  --muted:       #6E767E;
  --line:        #E1E5E8;
  --line-2:      #C8CED3;
  --line2:       #C8CED3;
  --tint:        #F5F7F8;
  --white:       #FFFFFF;
  /* the map ground, one shade under --char so the tiles do not flash white while loading */
  --map-ground:  #2A2E32;
  /* semantic, not brand: the crushed-insulation figure in the comparison. Orange is for
     things you click, so the "this is the bad way" number gets its own red. */
  --bad:         #B5382C;

  /* sharper: Ben asked twice */
  --radius:      4px;
  /* Ben picked 5px, 16 Sep. The small radius drops with it so buttons and inputs are
     not left rounder than the cards they sit next to. */
  --radius-lg:   5px;

  --shadow-sm:   0 1px 2px rgba(28,31,34,.05), 0 3px 10px rgba(28,31,34,.05);
  --shadow:      0 2px 6px rgba(28,31,34,.06), 0 14px 32px rgba(28,31,34,.09);

  --wrap:        1200px;
  --gutter:      20px;

  --display:     "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --text:        "Source Sans 3", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--white); color:var(--body);
  font-family:var(--text); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit }

h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); margin:0; text-wrap:balance; letter-spacing:-.018em }
h1{ font-size:clamp(2.1rem, 4.6vw, 3.35rem); line-height:1.06; font-weight:700 }
h2{ font-size:clamp(1.65rem, 3vw, 2.4rem); line-height:1.13; font-weight:700 }
h3{ font-size:1.16rem; line-height:1.3; font-weight:600 }
p{ margin:0 0 1.05em }
p:last-child{ margin-bottom:0 }

.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter) }
.skip{ position:absolute; left:-9999px; top:0; background:var(--char); color:#fff; padding:12px 18px; z-index:200 }
.skip:focus{ left:0 }

:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px; border-radius:4px }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--text); font-weight:600; font-size:1rem;
  padding:14px 24px; border-radius:var(--radius); border:2px solid transparent;
  text-decoration:none; cursor:pointer; transition:background .16s, color .16s, border-color .16s, transform .16s;
  white-space:nowrap;
}
.btn-accent{ background:var(--orange); color:var(--char); border-color:var(--orange) }
.btn-accent:hover{ background:var(--orange-dk); border-color:var(--orange-dk) }
.btn-dark{ background:var(--char); color:#fff; border-color:var(--char) }
.btn-dark:hover{ background:var(--orange); border-color:var(--orange) }
.btn-ghost{ color:#fff; border-color:rgba(255,255,255,.45) }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1) }
.btn-sm{ padding:10px 17px; font-size:.94rem }
.btn-lg{ padding:16px 30px; font-size:1.06rem }
.btn-block{ width:100% }

.link-arrow{
  /* was var(--orange): failed contrast on white */
  display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--orange-text);
  text-decoration:none; font-size:1rem; white-space:nowrap;
}
.link-arrow svg{ width:19px; height:19px; transition:transform .18s }
.link-arrow:hover svg{ transform:translateX(4px) }

/* ---------------------------------------------------------------- top banner */
.topbar{ background:var(--orange); color:#fff; font-size:.94rem }
.topbar .wrap{ display:flex; align-items:center; justify-content:center; gap:10px;
  padding-block:9px; text-align:center; flex-wrap:wrap }
.topbar svg{ width:17px; height:17px; color:var(--orange); flex:none }
.topbar strong{ font-weight:600; color:var(--orange) }
.topbar a{ color:#fff; text-decoration:underline; text-underline-offset:3px }

/* ---------------------------------------------------------------- header */
.site-head{ position:sticky; top:0; z-index:90; background:#fff; border-bottom:1px solid var(--line) }
.bar{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; gap:22px; min-height:74px;
}
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none }
.logo-mark{
  width:38px; height:38px; border-radius:var(--radius); background:var(--char); color:var(--orange);
  display:grid; place-items:center; flex:none;
}
.logo-mark svg{ width:23px; height:23px }
.logo-text{ font-family:var(--display); font-weight:700; font-size:1.06rem; color:var(--ink); line-height:1.1; letter-spacing:-.02em }
.logo-text em{ font-style:normal; display:block; font-weight:500; font-size:.83rem; color:var(--muted); letter-spacing:.01em }

.nav{ margin-left:auto }
.nav-list{ list-style:none; display:flex; gap:2px; margin:0; padding:0 }
.nav-top{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--text); font-size:1rem; font-weight:600; color:var(--ink);
  background:none; border:0; padding:11px 13px; border-radius:var(--radius); cursor:pointer; text-decoration:none;
}
.nav-top:hover{ background:var(--line-soft); color:var(--orange) }
.has-sub > .nav-top::after{
  content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); opacity:.55; transition:transform .18s;
}
.has-sub[data-open="true"] > .nav-top::after{ transform:rotate(-135deg) translate(-3px,-3px) }
.has-sub[data-open="true"] > .nav-top{ background:var(--line-soft); color:var(--orange) }

.sub{
  position:absolute; left:0; right:0; top:100%; background:#fff;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow); display:none; z-index:80;
}
.has-sub[data-open="true"] .sub{ display:block }
.sub-inner{
  max-width:var(--wrap); margin:0 auto; padding:26px var(--gutter) 30px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
}
.sub-h{
  font-family:var(--display); font-size:.78rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin:0 0 11px;
}
.sub-col a{ display:block; padding:6px 0; text-decoration:none; color:var(--body); font-size:1rem }
.sub-col a:hover{ color:var(--orange) }
.sub-feature{
  display:block; background:var(--tint); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 16px !important; text-decoration:none;
}
.sub-feature strong{ display:block; font-family:var(--display); color:var(--ink); font-size:1.02rem; margin-bottom:4px }
.sub-feature span{ display:block; font-size:.9rem; color:var(--muted); line-height:1.45 }
.sub-feature:hover{ border-color:var(--cyan) }

.head-actions{ display:flex; align-items:center; gap:12px; flex:none }
.tel{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--ink); text-decoration:none; font-size:1rem }
.tel svg{ width:19px; height:19px; color:var(--orange) }
.tel:hover{ color:var(--orange) }

.nav-cta{ display:none }   /* phone only; the media query below turns it on */
.burger{ display:none; width:44px; height:44px; border:1px solid var(--line); background:#fff; border-radius:var(--radius); cursor:pointer; padding:0 }
.burger span{ display:block; width:20px; height:2px; background:var(--ink); margin:4px auto; transition:transform .2s, opacity .2s }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(10px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-10px) rotate(-45deg) }

/* ---------------------------------------------------------------- hero */
.hero{ position:relative; background:var(--char); color:#fff; overflow:hidden }
/*
 * These were CSS background-images, which meant no alt text, no lazy loading and no way
 * to hand a phone a smaller file: a 375px screen pulled the full 490KB desktop hero.
 * They are real <img> elements now, with the wash moved to ::after on top of them.
 */
.hero-bg{ position:absolute; inset:0; overflow:hidden; background:var(--char) }
.hero-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(30,33,36,.95) 0%, rgba(30,33,36,.86) 40%, rgba(30,33,36,.44) 100%);
}
.hero-inner{
  position:relative; max-width:var(--wrap); margin:0 auto; padding:64px var(--gutter) 72px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center;
}
.hero h1{ color:#fff }
.lede{ font-size:1.12rem; line-height:1.62; color:rgba(255,255,255,.88); margin-top:20px; max-width:56ch }
.hero-points{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:11px }
.hero-points li{
  position:relative; padding-left:20px; color:rgba(255,255,255,.9); font-size:1.02rem;
}
.hero-points li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:2px;
  background:var(--orange);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }

/* the form in the hero */
.hero-form{ position:relative }
.form{
  background:#fff; border-radius:var(--radius-lg); padding:26px 24px 24px;
  box-shadow:0 20px 50px rgba(15,18,20,.34); color:var(--body);
}
/* the same form markup is used in the hero, the closing band and the chat panel */
.field{ margin-bottom:14px }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.field label{ display:block; font-size:.88rem; font-weight:600; color:var(--ink); margin-bottom:5px }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--text); font-size:1rem; color:var(--ink);
  padding:12px 13px; border:1.5px solid var(--line); border-radius:var(--radius); background:#fff;
}
.field textarea{ resize:vertical }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--cyan); outline:none; box-shadow:0 0 0 3px rgba(0,174,239,.16) }
.form-foot{ margin:13px 0 0; text-align:center; font-size:.94rem; color:var(--muted) }
.form-foot a{ color:var(--orange); font-weight:600 }

/* ---------------------------------------------------------------- bands */
.band{ padding:76px 0 }
.band-white{ background:#fff }
.band-tint{ background:var(--tint) }
.band-dark{ background:var(--char); color:rgba(255,255,255,.86) }
.band-dark h2{ color:#fff }

.band-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:22px; margin-bottom:32px; flex-wrap:wrap }
.band-head h2{ max-width:20ch }
.band-head-single{ margin-bottom:34px; max-width:26ch }

/* ------------------------------------------------- service cards, notched */
.cards{
  list-style:none; margin:0; padding:0;
  /* Four cards, not six, since 16 Sep. Three columns left one card stranded on its own
     row, so this is a 2x2 and the cards get bigger for it. */
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
}
.notched{ --notch:56px }
.card-wrap{ position:relative }

.notch-frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  /*
   * NO filter here. A drop-shadow on a masked element renders the mask's alpha edge and
   * leaves a hairline along the straight sides of the card. Proved with a four card test
   * on 16 Sep: shadow off was clean, shadow on showed the line, and correcting the mask
   * path alone did NOT fix it on its own. The cards sit on white and read fine flat.
   */
}

/*
 * The bitten-out corner.
 * A clip-path polygon can only do sharp corners, and the cut has to carry the same
 * softness as the rest of the card, so the card is MASKED instead: the whole box, minus
 * a rounded square at the bottom right, combined with exclude.
 * The radius lives on .notch-frame because a radius and a mask on the same element
 * strand a hairline arc of the old corner inside the cut.
 */
.photo-card.notch{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:232px; padding:22px; text-decoration:none;
  /* no background on this element: it would paint over the negative z-index image layer */
  border-radius:0; overflow:hidden; box-shadow:none;
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M3,0 H60 V60 H0 V3 A3,3 0 0 1 3,0 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000 0 0);
  -webkit-mask-position:100% 100%, 0 0;
  -webkit-mask-size:var(--notch) var(--notch), 100% 100%;
  -webkit-mask-repeat:no-repeat, no-repeat;
  -webkit-mask-composite:xor;
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M3,0 H60 V60 H0 V3 A3,3 0 0 1 3,0 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000 0 0);
  mask-position:100% 100%, 0 0;
  mask-size:var(--notch) var(--notch), 100% 100%;
  mask-repeat:no-repeat, no-repeat;
  mask-composite:exclude;
}
/*
 * The zoom lives on this inner layer, never on the masked element itself.
 * Transforming a masked box makes the browser resample the mask edge, which leaves a
 * one pixel strip along the cut on hover. Ben spotted it on v1. Scaling a child inside
 * an overflow:hidden parent gives the same effect with a stable edge.
 */
.photo-card.notch picture{ position:absolute; inset:0; z-index:0; display:block }
.photo-card.notch .card-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; background-color:var(--char-3);
  transform:scale(1.02); transition:transform .45s ease;
}
/*
 * Cards with no photograph. The free image libraries have nothing usable for ladders,
 * hatches, spray foam or clearance, and a bad photograph costs more than no photograph.
 * These read as a deliberate tile instead: charcoal ground, a soft brand wash off the
 * bottom right corner toward the notch, and a faint diagonal rule so the surface has
 * texture at card size. Swap in a real photo by restoring --img on the anchor.
 */
.photo-card.notch.plain::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-color:var(--char-2);
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 1px, transparent 1px 9px),
    radial-gradient(120% 100% at 100% 100%, rgba(243,112,33,.42) 0%, rgba(243,112,33,.10) 42%, transparent 72%),
    linear-gradient(160deg, var(--char-3) 0%, var(--char) 100%);
  transform:none;
}
.photo-card.notch.plain .scrim{
  background:linear-gradient(to top, rgba(18,20,22,.55) 0%, rgba(18,20,22,.18) 55%, transparent 100%);
}

.group:hover .photo-card.notch.plain .scrim{
  background:linear-gradient(to top, rgba(18,20,22,.42) 0%, rgba(18,20,22,.10) 58%, transparent 100%);
}
.photo-card.notch .scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(18,20,22,.88) 0%, rgba(18,20,22,.45) 48%, rgba(18,20,22,.12) 100%);
  transition:background .25s ease;
}
.group:hover .photo-card.notch .card-img{ transform:scale(1.075) }
.group:hover .photo-card.notch .scrim{
  background:linear-gradient(to top, rgba(18,20,22,.92) 0%, rgba(18,20,22,.55) 52%, rgba(18,20,22,.2) 100%);
}
.card-title, .slide-h{ position:relative; z-index:2 }
.card-title{
  font-family:var(--display); font-weight:700; font-size:1.42rem; color:#fff;
  line-height:1.18; padding-right:3.4rem; letter-spacing:-.015em;
}

.notch-slot{
  position:absolute; right:0; bottom:0; width:var(--notch); height:var(--notch);
  display:grid; place-items:center; pointer-events:none; color:var(--orange);
  transition:transform .25s ease, color .25s ease;
}
.notch-slot svg{ width:25px; height:25px }
.group:hover .notch-slot{ transform:translate(2px,-2px); color:var(--orange-dk) }

/*
 * The arrow needs something to sit ON when the card is light.
 * The bitten corner earns its keep on the home page because it cuts into a dark
 * photograph and the white page shows through the cut. On a white card sitting on the
 * tint band there is almost no contrast across the cut, so the arrow read as a loose
 * glyph that had fallen out of the card. Ben, 18 Sep: "it just doesn't look right".
 * A solid chip inside the cut gives the corner a reason to be there: the bite is the
 * space the button occupies. Both children take grid-area 1/1 so they stack.
 */
.card-wrap:has(.notch-card) > .notch-slot{ color:#fff }
.card-wrap:has(.notch-card) > .notch-slot::before{
  content:""; grid-area:1/1; width:34px; height:34px; border-radius:var(--radius);
  background:var(--orange); transition:background .25s ease;
}
.card-wrap:has(.notch-card) > .notch-slot svg{ grid-area:1/1; width:17px; height:17px; z-index:1 }
.card-wrap.group:hover:has(.notch-card) > .notch-slot{ color:#fff }
.card-wrap.group:hover:has(.notch-card) > .notch-slot::before{ background:var(--orange-dk) }
@media (max-width:560px){
  .card-wrap:has(.notch-card) > .notch-slot::before{ width:30px; height:30px }
  .card-wrap:has(.notch-card) > .notch-slot svg{ width:16px; height:16px }
}

/* ---------------------------------------------------- feature, on a photo */
.feature{ position:relative; color:#fff; overflow:hidden }
.feature-bg{
  position:absolute; inset:0;
  background-image:linear-gradient(90deg, rgba(28,31,34,.96) 0%, rgba(28,31,34,.9) 52%, rgba(27,70,113,.72) 100%), var(--feature-img, none);
  background-color:var(--char);
  background-size:cover, cover; background-position:center, center;
}
.feature-inner{ position:relative; padding:88px var(--gutter) 92px }
.feature-copy{ max-width:62ch }
.feature-copy h2{ color:#fff; margin-bottom:20px; max-width:22ch }
.feature-copy p{ color:rgba(255,255,255,.86); font-size:1.06rem }
.feature-copy .btn{ margin-top:12px }

/* ---------------------------------------------------------------- map */
.map-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:48px; align-items:center }
#map{ height:470px; border-radius:var(--radius-lg); overflow:hidden; background:var(--map-ground);
  border:1px solid rgba(255,255,255,.14) }
.leaflet-container{ font-family:var(--text) }
.leaflet-popup-content-wrapper{ border-radius:var(--radius) }
.leaflet-popup-content{ margin:11px 14px; font-size:.95rem }
.leaflet-popup-content b{ font-family:var(--display); color:var(--ink); display:block; margin-bottom:2px }
.leaflet-popup-content a{ color:var(--orange); font-weight:600 }
/* This was rgba(255,255,255,.8) on a white band, so the sentence was invisible and
   only the orange link showed. */
.map-cta{ margin-top:16px; font-size:1.04rem; color:var(--body) }
.map-cta a{ color:var(--orange-text); font-weight:600; text-underline-offset:3px }
.pin-dot{ background:var(--cyan); border:2px solid #fff; border-radius:50%; width:13px; height:13px;
  box-shadow:0 1px 5px rgba(0,0,0,.45) }
.pin-dot.base{ background:var(--orange); width:20px; height:20px; border-width:3px }

/* ---------------------------------------------------------------- reviews */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.review{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px }
.stars{ display:flex; gap:3px; margin-bottom:12px }
.stars svg{ width:17px; height:17px; color:var(--orange) }
.review blockquote{ margin:0 0 15px; font-size:1.02rem; color:var(--ink); line-height:1.55 }
.review cite{ font-style:normal; font-size:.93rem; color:var(--muted) }
.review cite b{ display:block; color:var(--ink); font-family:var(--display); font-size:1rem; font-weight:600 }
.review.placeholder{ border-style:dashed; background:var(--tint) }
.review.placeholder blockquote{ color:var(--muted) }
.review.placeholder .stars svg{ color:var(--line2) }

/* ------------------------------------------- the comparison, in place of a wall of text */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px }
.comp{ border-radius:var(--radius-lg); padding:24px; border:1px solid var(--line) }
.comp.bad{ background:var(--tint) }
.comp.good{ background:var(--char); border-color:var(--char); color:rgba(255,255,255,.86) }
.comp h3{ font-size:1.14rem; margin-bottom:14px }
.comp.good h3{ color:#fff }
.comp p{ font-size:1rem; margin:0 }
.comp .num{ font-family:var(--display); font-size:2rem; font-weight:700; line-height:1; display:block; margin-bottom:4px }
.comp.bad .num{ color:var(--bad) }
.comp.good .num{ color:var(--orange) }

/* ---------------------------------------------------------------- faqs */
.faqs{ max-width:840px; margin:0 auto }
.faq{ border-bottom:1px solid var(--line) }
.faq summary{ cursor:pointer; list-style:none; padding:19px 44px 19px 0; position:relative;
  font-family:var(--display); font-weight:600; font-size:1.06rem; color:var(--ink) }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:""; position:absolute; right:8px; top:26px; width:9px; height:9px;
  border-right:2px solid var(--orange); border-bottom:2px solid var(--orange);
  transform:rotate(45deg); transition:transform .2s }
.faq[open] summary::after{ transform:rotate(-135deg); top:30px }
.faq .a{ padding:0 0 20px }
.faq .a p:last-child{ margin-bottom:0 }

/* ---------------------------------------------------------------- steps */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; counter-reset:s }
.steps li{ position:relative; padding-top:14px; border-top:3px solid var(--line) }
.steps li:first-child{ border-top-color:var(--orange) }
.step-n{
  font-family:var(--display); font-size:.82rem; font-weight:700; color:var(--orange-text);
  letter-spacing:.1em; display:block; margin-bottom:9px;
}
.steps h3{ margin-bottom:7px }
.steps p{ font-size:.99rem; color:var(--muted) }

/* ---------------------------------------------------------------- areas */
.areas-lede{ margin:16px 0 26px; font-size:1.06rem; max-width:44ch }

/* ---------------------------------------------------------------- slider */
.slider{
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:6px;
}
.slider::-webkit-scrollbar{ display:none }
.slides{
  list-style:none; margin:0; display:flex; gap:18px;
  /* line the first card up with .wrap, and keep the same air at the end */
  padding-block:6px 4px;
  padding-inline:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
}
.slider{ scroll-padding-inline-start:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) }
.slide{ flex:0 0 340px; scroll-snap-align:start }
.slide{ position:relative }
.slide-h{
  font-family:var(--display); font-weight:700; font-size:1.19rem; color:#fff;
  line-height:1.24; padding-right:3.2rem; letter-spacing:-.015em;
}

.slider-nav{ display:flex; gap:8px }
.sl-btn{
  width:46px; height:46px; border-radius:var(--radius-lg); border:1.5px solid var(--line);
  background:#fff; color:var(--orange); cursor:pointer; display:grid; place-items:center;
  transition:border-color .16s, background .16s, color .16s;
}
.sl-btn svg{ width:22px; height:22px }
.sl-btn:hover:not(:disabled){ border-color:var(--orange); background:var(--orange); color:#fff }
.sl-btn:disabled{ opacity:.35; cursor:default }

/* ---------------------------------------------------------------- closer */
.closer{ position:relative; color:#fff; overflow:hidden; text-align:center }
.closer-bg{ position:absolute; inset:0; overflow:hidden; background:var(--char) }
.closer-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.closer-bg::after{ content:""; position:absolute; inset:0; background:rgba(30,33,36,.94) }
.closer-inner{
  position:relative; padding:80px var(--gutter) 84px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; text-align:left;
}
.closer h2{ color:#fff; margin:0 0 16px; max-width:19ch }
.closer p{ color:rgba(255,255,255,.85); font-size:1.08rem; max-width:50ch; margin:0 0 26px }
.closer-cta{ display:flex; gap:13px; flex-wrap:wrap }

/* ---------------------------------------------------------------- footer */
.site-foot{ background:var(--char); color:rgba(255,255,255,.72); padding:64px 0 28px; font-size:.98rem }
/*
 * Base is the four link columns. The brand block spans the full row above them,
 * except on a wide screen where the min-width rule at the bottom of this file puts
 * it back on the same row. The old base declared SIX columns for five children, so
 * one was always empty and Company ended up orphaned on a row of its own with a
 * dead gap beside it at around 1000px.
 */
.foot-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:34px; padding-bottom:40px }
.foot-brand{ grid-column:1 / -1; max-width:52ch }
.foot-brand p{ margin:16px 0 18px; line-height:1.6; max-width:34ch }
.logo-foot .logo-mark{ background:rgba(255,255,255,.1) }
.logo-foot .logo-text{ color:#fff }
.logo-foot .logo-text em{ color:rgba(255,255,255,.62) }
.tel-foot{ color:#fff; font-size:1.16rem; font-family:var(--display); font-weight:700 }
.foot-h{
  font-family:var(--display); font-size:.78rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:#fff; margin:0 0 12px;
}
.foot-col a{ display:block; padding:5px 0; text-decoration:none; color:rgba(255,255,255,.72) }
.foot-col a:hover{ color:#fff }
.foot-areas{ border-top:1px solid rgba(255,255,255,.14); padding:26px 0 22px }
.foot-areas p{ line-height:2; margin:0; color:rgba(255,255,255,.55); font-size:.95rem }
.foot-areas a{ text-decoration:none; color:rgba(255,255,255,.72) }
.foot-areas a:hover{ color:#fff }
.foot-base{
  border-top:1px solid rgba(255,255,255,.14); padding-top:22px;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.93rem;
}
.foot-base p{ margin:0 }
.foot-legal{ display:flex; gap:20px }
.foot-legal a{ text-decoration:none; color:rgba(255,255,255,.72) }
.foot-legal a:hover{ color:#fff }

/* ---------------------------------------------------------------- chat */
.chat{ position:fixed; right:20px; bottom:20px; z-index:120; display:flex; flex-direction:column; align-items:flex-end; gap:12px }
.chat-fab{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--char); color:#fff; border:0; border-radius:99px; padding:14px 20px;
  font-family:var(--text); font-weight:600; font-size:1rem;
  box-shadow:0 8px 26px rgba(28,31,34,.34); transition:background .16s, transform .16s;
}
.chat-fab:hover{ background:var(--orange); transform:translateY(-2px) }
.chat-fab svg{ width:22px; height:22px; color:var(--orange) }
.chat-panel{
  width:min(380px, calc(100vw - 32px));
  background:#fff; border-radius:var(--radius-lg); box-shadow:0 22px 60px rgba(15,18,20,.34);
  border:1px solid var(--line); overflow:hidden;
  transform-origin:bottom right; animation:pop .18s ease;
}
@keyframes pop{ from{ opacity:0; transform:translateY(8px) scale(.97) } to{ opacity:1; transform:none } }
.chat-head{ background:var(--char); color:#fff; padding:16px 18px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px }
.chat-title{ font-family:var(--display); font-weight:700; font-size:1.06rem; margin:0; color:#fff }
.chat-sub{ margin:2px 0 0; font-size:.9rem; color:rgba(255,255,255,.72) }
.chat-x{ background:none; border:0; color:rgba(255,255,255,.8); cursor:pointer; padding:2px; line-height:0 }
.chat-x:hover{ color:#fff }
.chat-x svg{ width:21px; height:21px }
.chat-body{ max-height:min(64vh, 520px); overflow-y:auto }
.chat-body .form{ box-shadow:none; border-radius:0; padding:16px }

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .foot-grid{ grid-template-columns:repeat(4, 1fr); gap:28px }
  .sub-inner{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:960px){
  .hero-inner{ grid-template-columns:1fr; gap:26px; padding-block:34px 40px }
  .steps{ grid-template-columns:1fr 1fr; gap:24px }
  .cards{ grid-template-columns:1fr 1fr }
}
@media (max-width:860px){
  .burger{ display:block }
  .tel span{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
             overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
  /*
   * The menu used to be inset:74px 0 0, which assumed the header always sat at the very
   * top. It does not: the promo bar runs to two lines on a phone and pushes the header
   * down to about 126px, so the panel covered the logo, the phone and the Free survey
   * button. main.js now sets --nav-top to the header's real bottom edge on open.
   * Height is auto as well, so it stops at the last item instead of painting 470px of
   * empty white below About.
   */
  .nav{
    position:fixed; left:0; right:0; top:var(--nav-top, 74px);
    max-height:calc(100dvh - var(--nav-top, 74px)); height:auto;
    background:#fff; overflow-y:auto; padding:8px var(--gutter) 20px;
    display:none; border-top:1px solid var(--line);
    box-shadow:0 20px 44px rgba(15,18,20,.20);
  }
  .nav[data-open="true"]{ display:block }
  body[data-nav-open="true"]{ overflow:hidden }

  /* Calling is the highest intent action on the page and it vanished while the menu was
     open, because the header behind it was covered. */
  .nav-cta{
    display:grid; gap:10px; margin-top:18px; padding-top:18px;
    border-top:1px solid var(--line);
  }
  .nav-cta .btn{ width:100%; justify-content:center }

  /*
   * The header row is logo + phone + CTA + burger and at 390px it came to 374px inside
   * 358px of usable width, so the burger was clipped off the right edge. Tightening the
   * gaps and the button keeps all four on one line without dropping the CTA.
   */
  .bar{ gap:10px }
  .head-actions{ gap:8px }
  .btn-sm{ padding-inline:12px; font-size:.92rem }
  @media (max-width:360px){ .logo-text{ display:none } }

  /* The number is hidden here, so the icon alone was a 19x19 target. 44 is the minimum
     both Apple and Google publish, and the label moves to a screen reader only span. */
  .tel{
    width:44px; height:44px; justify-content:center; flex:none;
    border:1px solid var(--line); border-radius:var(--radius);
  }
  .tel svg{ width:20px; height:20px }
  .nav-list{ flex-direction:column; gap:0 }
  .nav-top{ width:100%; justify-content:space-between; padding:15px 4px; border-bottom:1px solid var(--line-soft); border-radius:0; font-size:1.06rem }
  .sub{ position:static; display:none; box-shadow:none; border:0; background:var(--tint); border-radius:var(--radius) }
  .has-sub[data-open="true"] .sub{ display:block }
  .sub-inner{ grid-template-columns:1fr; gap:18px; padding:16px }
  .band{ padding:56px 0 }
  .feature-inner, .closer-inner{ padding-block:60px 64px }
}
@media (max-width:640px){
  body{ font-size:16px }
  :root{ --gutter:16px; --notch:50px }
  .cards{ grid-template-columns:1fr; gap:14px }
  .steps{ grid-template-columns:1fr }
  .field-row{ grid-template-columns:1fr }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:26px }
  .slide{ flex:0 0 min(300px, 82vw) }
  .chat-fab .chat-label{ display:none }
  .chat-fab{ padding:16px; border-radius:50% }
  .form{ padding:22px 18px 20px }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
  .slider{ scroll-behavior:auto }
}

/* ------------------------------------------------- responsive, new sections */
@media (max-width:960px){
  .map-grid{ grid-template-columns:1fr; gap:30px }
  .closer-inner{ grid-template-columns:1fr; gap:34px; text-align:left }
}

@media (max-width:900px){
  .reviews{ grid-template-columns:1fr }
  .compare{ grid-template-columns:1fr }
  #map{ height:380px }
}

/* ---------------------------------------------------------------- trust strip */
.trust{ background:var(--tint); border-bottom:1px solid var(--line) }
.trust .wrap{ display:flex; align-items:center; justify-content:center;
  gap:14px 44px; padding-block:16px; flex-wrap:wrap; text-align:center }
.trust-i{ display:inline-flex; align-items:center; gap:9px; font-size:.97rem; color:var(--body) }
.trust-i b{ color:var(--ink); font-weight:600 }
.trust-i > svg{ width:20px; height:20px; color:var(--orange); flex:none }
.stars{ display:inline-flex; gap:2px; color:var(--orange) }
.stars svg{ width:15px; height:15px }

/* the closing form sits flat on the band rather than in a card, for variety */
.closer .form{ background:none; box-shadow:none; padding:0; color:rgba(255,255,255,.85) }
.closer .form-t{ color:#fff }
.closer .field label{ color:rgba(255,255,255,.82) }
.closer .field input, .closer .field select, .closer .field textarea{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.26); color:#fff }
.closer .field input::placeholder, .closer .field textarea::placeholder{ color:rgba(255,255,255,.45) }
.closer .field select option{ color:var(--ink) }
/* Scoped to wide screens on purpose. Unconditional, it sat AFTER the max-width:960px
   rule and beat it, so the closing form stayed two column on a phone and pushed the
   page 61px wider than the viewport. */
@media (min-width:961px){ .closer-inner{ grid-template-columns:1fr 1fr; gap:60px } }
.form-t{ font-family:var(--display); font-size:1.2rem; font-weight:700; color:var(--ink); margin:0 0 14px }

/* proper teardrop map pins */
.pin-mark{ width:26px; height:34px; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)) }
.pin-mark.base{ width:34px; height:44px }

/* a richer footer, following The Loft Boys and Loft and Ladders */
/* Same trap as .closer-inner: unconditional and placed after the responsive rules, so it
   beat them and kept a five column footer on a phone. Scoped to wide screens. */
@media (min-width:1081px){
  .foot-grid{ grid-template-columns:1.5fr repeat(4, 1fr) }
  .foot-brand{ grid-column:auto }   /* wide enough to sit beside the link columns */
}
.foot-badges{ display:flex; gap:9px; flex-wrap:wrap; margin-top:18px }
.foot-badge{ border:1px solid rgba(255,255,255,.22); border-radius:var(--radius);
  padding:7px 11px; font-size:.82rem; color:rgba(255,255,255,.78) }
.foot-areas{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px 26px }
.foot-areas .foot-h{ grid-column:1 / -1 }
.foot-areas a{ display:block; padding:4px 0; text-decoration:none; color:rgba(255,255,255,.62); font-size:.94rem }
.foot-areas a:hover{ color:var(--orange) }
.foot-col a:hover{ color:var(--orange) }

@media (max-width:1080px){ .foot-areas{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){
  /* Ben's worry: the trust strip must not become a tall column on a phone */
  .trust .wrap{ gap:10px 22px }
  .trust-i{ font-size:.88rem; gap:7px }
  .trust-i > svg{ width:17px; height:17px }
  .stars svg{ width:13px; height:13px }
  .foot-areas{ grid-template-columns:1fr 1fr }
}

/*
 * Ben, 17 Sep: the banner goes orange so the discount stands out. Text is charcoal, the
 * same pairing as .btn-accent, because white on this orange fails contrast (about 2.9:1).
 */
.topbar{ background:var(--orange); color:var(--char) }
.topbar strong{ color:var(--char); font-weight:700 }
.topbar svg{ color:var(--char) }
.topbar a{ color:var(--char) }

/* CC BY 2.0 attribution. Quiet, but it has to be visible and it has to link out. */
.foot-credits{
  margin:14px 0 0; font-size:.78rem; line-height:1.5;
  color:rgba(255,255,255,.42); max-width:70ch;
}
.foot-credits a{ color:rgba(255,255,255,.6); text-decoration:underline }
.foot-credits a:hover{ color:#fff }

/* standfirst under a band heading */
.band-sub{ max-width:64ch; margin:-4px 0 30px; color:var(--muted); font-size:1.06rem }


/* ------------------------------------------------- the word behind the heading */
/*
 * Borrowed from The Loft Guys. About 200px at 5% opacity, so it registers as texture
 * rather than as something to read. It is a pseudo element on the band, so it costs no
 * markup and no request. The band needs position:relative and overflow:hidden, which
 * .band-wm adds, or the word spills into the next section.
 */
.band-wm{ position:relative; overflow:hidden; isolation:isolate }
.band-wm > .wrap{ position:relative; z-index:1 }
.band-wm::before{
  content:attr(data-word);
  /* Aligned to the TOP of the band, not its middle. Centred, it sat behind the dark
     service cards where a 5% wash is invisible. It belongs behind the heading. */
  /* Ben, 17 Sep: the tops of the letters were clipped by the band. The box is shorter
     than the glyphs (line-height .78), so the ink starts above the box. Nudge it back
     down so the caps touch the top edge instead of being cut by it. */
  position:absolute; left:-.035em; top:0; transform:translateY(-4%);
  font-family:var(--display); font-weight:700; line-height:.78; letter-spacing:-.04em;
  font-size:clamp(4.5rem,15vw,10.5rem);
  color:rgba(38,41,45,.05);
  pointer-events:none; user-select:none; white-space:nowrap; z-index:0;
}
.band-wm.on-dark::before{ color:rgba(255,255,255,.045) }
@media (max-width:640px){ .band-wm::before{ font-size:clamp(3.6rem,22vw,6rem) } }

/* ------------------------------------------------- which ladder */
.ladders{
  --notch:44px;
  list-style:none; margin:30px 0 0; padding:0;
  display:grid; gap:16px; grid-template-columns:1fr;
}
@media (min-width:700px){ .ladders{ grid-template-columns:repeat(2,1fr) } }
.lad{
  /* Ben, 18 Sep: the tall image made these look like a column of cutlery. Ladder on the
     left, words on the right, and the card carries the same bitten corner as the home
     page service cards.
     ⚠ The right and bottom padding are NOT decoration. The cut corner is var(--notch)
     square at the bottom right, and text that runs into it collides with the arrow.
     Ben caught exactly that on the next step panels. */
  display:grid; grid-template-columns:104px minmax(0,1fr); gap:18px; align-items:center;
  text-align:left; height:100%; min-height:128px;
  padding:16px calc(var(--notch) - 8px) 16px 16px; text-decoration:none;
  transition:transform .2s ease;
}
.lad picture{ display:block; width:104px; margin:0 }
.lad-img{
  /* contain, not cover: a ladder is a tall thin object and a crop beheads it.
     height:auto is load bearing: the img carries height="711" and without this the
     attribute wins over aspect-ratio and the card renders 700px tall. */
  width:100%; height:auto; aspect-ratio:3/4; object-fit:contain; background:var(--tint);
  border-radius:var(--radius); padding:6px;
}
.lad-t{ min-width:0 }
.lad b{ font-family:var(--display); color:var(--ink); font-size:1.08rem; display:block }
.lad .lad-d{
  font-size:.94rem; color:var(--muted); margin-top:5px; display:block;
}
/* Two lines' worth of room whether the words need it or not, but only once the cards sit
   side by side. They are vertically centred, so a description that wrapped pushed its
   title half a line up and the two titles in a row stopped lining up: measured 12.0px
   out, exactly half the 24.064px line box. line-height here is 1.6, so two lines is
   3.2em. In one column there is no neighbour to line up with, and the reserved line
   would just make every card taller on a phone. */
@media (min-width:700px){ .lad .lad-d{ min-height:3.2em } }

/* =========================================================================
   NOTCH CARD, site wide. Ben, 18 Sep: "all the cards adopt the same button off
   corner design as the ones on the home page". Same mask as .photo-card.notch,
   reusable on any card that is a link. The radius stays on .notch-frame, and the
   card carries no border, because a border would be cut open by the mask.
   ========================================================================= */
.notch-card{
  position:relative; border-radius:0; overflow:hidden; box-shadow:none;
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M3,0 H60 V60 H0 V3 A3,3 0 0 1 3,0 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000 0 0);
  -webkit-mask-position:100% 100%, 0 0;
  -webkit-mask-size:var(--notch) var(--notch), 100% 100%;
  -webkit-mask-repeat:no-repeat, no-repeat;
  -webkit-mask-composite:xor;
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M3,0 H60 V60 H0 V3 A3,3 0 0 1 3,0 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000 0 0);
  mask-position:100% 100%, 0 0;
  mask-size:var(--notch) var(--notch), 100% 100%;
  mask-repeat:no-repeat, no-repeat;
  mask-composite:exclude;
}
/* contrast either way round, since these cards sit on both band colours */
.band-white .notch-card, .page-hero .notch-card{ background:var(--tint) }
.band-tint .notch-card{ background:var(--white) }
.group:hover .notch-card{ transform:translateY(-2px) }

/* the two panel next step, now a notch card as well */
.next{ --notch:46px }
.next .card-wrap{ height:100% }
.next-card{
  display:block; text-decoration:none; height:100%;
  /* clearance for the cut corner, same reason as .lad above */
  padding:26px calc(var(--notch) + 4px) 30px 26px;
}
.next-card strong{ display:block; font-family:var(--display); font-size:1.12rem; color:var(--ink); margin-bottom:7px }
.next-card span{ display:block; color:var(--muted); font-size:.98rem }

@media (max-width:560px){
  .lad{ grid-template-columns:88px minmax(0,1fr); gap:14px; padding:14px calc(var(--notch) - 10px) 14px 14px }
  .lad picture{ width:88px }
  .next-card{ padding:22px calc(var(--notch) + 2px) 26px 22px }
}

/* ------------------------------------------------- rotating word in the H1 */
/*
 * The H1 ships complete in the HTML and is what a crawler reads. main.js only animates
 * this span after load, and every word it cycles is a service we actually sell, so the
 * rendered text stays true. Do not move the wording out of the markup into the script.
 */
/*
 * Ben, 17 Sep: the word FLIPS rather than types. main.js adds .rot-out, swaps the text
 * once the word has turned edge on, then adds .rot-in. Inline-block so the transform
 * applies; perspective on the span itself so the H1 layout is untouched.
 */
.rot{
  color:var(--orange); display:inline-block;
  transform-origin:50% 60%; backface-visibility:hidden;
  transition:transform .32s cubic-bezier(.55,0,.45,1), opacity .32s ease;
}
.rot.rot-out{ transform:perspective(600px) rotateX(90deg); opacity:0 }
.rot.rot-pre{ transform:perspective(600px) rotateX(-90deg); opacity:0; transition:none }
@media (prefers-reduced-motion:reduce){ .rot{ transition:none } }


/* ------------------------------------------------- compact form, label inside */
/*
 * The label moves into the field as a placeholder, which takes a line of type and a 5px
 * gap out of every row. On the hero form that is six rows, so the form loses roughly
 * 130px and the hero comes down with it.
 *
 * The <label> stays in the markup and is only hidden visually. A placeholder is not an
 * accessible name: on its own it leaves the field unlabelled for a screen reader and it
 * vanishes the moment someone types.
 */
.form-compact .field{ margin-bottom:10px }
.form-compact .field label{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.form-compact .field input,
.form-compact .field select,
.form-compact .field textarea{ padding:13px 14px }
.form-compact .field textarea{ min-height:76px }
.form-compact .field input::placeholder,
.form-compact .field textarea::placeholder{ color:var(--muted); opacity:1 }
/* a select has no placeholder, so its first option carries the label and greys out */
.form-compact .field select:has(option[value=""]:checked){ color:var(--muted) }

/* ------------------------------------------------- the H1 rotating line */
/*
 * The rotating word sits at the end of its own line. Without the break, every character
 * it typed pushed "across Cambridgeshire..." left and right and the whole headline
 * jittered. Now only the word itself changes.
 */
.hero h1 .rot{ display:inline }

/* the article slider's standfirst, under the title */
.slide-d{
  position:relative; z-index:2; display:block; margin-top:7px;
  color:rgba(255,255,255,.82); font-size:.94rem; line-height:1.45; padding-right:2.6rem;
}
.sl-btn:disabled{ opacity:.38; cursor:default }
.sl-btn:disabled:hover{ border-color:var(--line); background:#fff; color:var(--orange) }

/* a source line under a statistic. Quiet, but it has to be readable: every number we
   publish carries where it came from and when it was pulled. */
.src-note{ display:block; margin-top:6px; font-size:.86rem; color:var(--muted) }

/* Under every submit button. Not decoration: a form that collects a name, email, phone and
   postcode has to say what happens to them, and the footer link alone is not where a person
   looks at the moment they press the button. Added 21 Sep. */
.form-note{ margin:10px 0 0; font-size:.84rem; line-height:1.5; color:var(--muted) }

/* The statutory company disclosure. A UK limited company must show its registered name,
   number and place of registration on its website. The REGISTERED OFFICE is the fourth
   required item and it is deliberately NOT here: Ben's standing rule puts it low down on
   /terms/ and nowhere else, so /terms/ is a launch requirement, not a nicety. */
.foot-company{ margin:6px 0 0; font-size:.82rem; line-height:1.55; color:var(--muted); max-width:52ch }
.form-note a{ color:inherit }
/* ⚠ Only .closer is dark. The chat PANEL is white (.chat-panel{background:#fff}); only its
   HEAD is dark, and the form sits in .chat-body. Lightening the note for .chat-panel put
   white text on white and made it invisible, which is the same fault this project has hit
   before. The dark band gets the light note; everything else keeps --muted. */
.closer .form-note{ color:rgba(255,255,255,.72) }
.closer .form-note a{ color:rgba(255,255,255,.9) }

/* ------------------------------------------------- values, in place of the process */
.values li{ border-top-color:var(--orange); padding-top:18px }

/* =========================================================================
   SERVICE PAGE COMPONENTS
   Ben, 18 Sep: three sections in a row used the same bordered list and it read
   as a template. Each of these does a different job and looks different doing it.
   ========================================================================= */

/* ---- page hero: photo behind, one column, no form. The home hero keeps its own layout */
.page-hero{ position:relative; background:var(--char); color:#fff; overflow:hidden }
.page-hero .hero-bg::after{
  background:linear-gradient(90deg, rgba(28,31,34,.93) 0%, rgba(28,31,34,.8) 52%, rgba(28,31,34,.5) 100%);
}
.page-hero .wrap{ position:relative; padding-block:76px 80px; max-width:var(--wrap) }
.page-hero h1{ color:#fff; max-width:18ch }
.page-hero .page-lede{ color:rgba(255,255,255,.88); font-size:1.14rem; line-height:1.6; max-width:56ch; margin:20px 0 0 }
.page-hero .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:28px }
.page-hero .link-arrow{ color:#fff }
.page-hero .link-arrow:hover{ color:var(--orange) }

/* ---- the day, as a timeline. Numbers on a rule, not four boxes in a row */
.timeline{ list-style:none; margin:34px 0 0; padding:0; position:relative }
.timeline::before{
  content:""; position:absolute; left:23px; top:14px; bottom:14px; width:2px; background:var(--line);
}
.timeline li{ position:relative; padding:0 0 30px 74px }
.timeline li:last-child{ padding-bottom:0 }
.timeline .t-n{
  position:absolute; left:0; top:-2px; width:48px; height:48px; border-radius:50%;
  background:var(--white); border:2px solid var(--line-2); color:var(--ink);
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  display:grid; place-items:center; z-index:1;
}
.timeline li:first-child .t-n{ border-color:var(--orange); color:var(--orange-text) }
.timeline h3{ margin-bottom:6px }
.timeline p{ color:var(--body); max-width:62ch }

/* ---- price factors: a heading column that stays put, and rows with hairlines */
.split{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:46px; align-items:start }
.split-head{ position:sticky; top:104px }
.split-head p{ color:var(--muted); margin-top:12px; max-width:38ch }
.rows{ list-style:none; margin:0; padding:0 }
.rows li{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:baseline;
  padding:18px 0; border-top:1px solid var(--line);
}
.rows li:last-child{ border-bottom:1px solid var(--line) }
.rows h3{ font-size:1.05rem; margin-bottom:5px }
.rows p{ color:var(--muted); font-size:.98rem; margin:0; max-width:52ch }
.rows .tag{
  font-family:var(--display); font-size:.76rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--orange-text); white-space:nowrap; padding-top:3px;
}

/* ---- exclusions: a dark band, because this is the section nobody else publishes */
.excl-band{ background:var(--char); color:rgba(255,255,255,.84) }
.excl-band h2{ color:#fff }
.excl-band .band-sub{ color:rgba(255,255,255,.8) }
.excl{ list-style:none; margin:34px 0 0; padding:0; display:grid; gap:2px; grid-template-columns:1fr 1fr }
.excl li{ background:var(--char-2); padding:22px 24px; position:relative }
.excl h3{ color:#fff; font-size:1.06rem; margin-bottom:6px; padding-left:30px }
.excl p{ color:rgba(255,255,255,.72); font-size:.97rem; margin:0; padding-left:30px }
.excl h3::before{
  content:"+"; position:absolute; left:24px; top:20px;
  font-family:var(--display); font-weight:700; font-size:1.2rem; color:var(--orange); line-height:1.1;
}
.excl-foot{ margin-top:26px; color:rgba(255,255,255,.8) }
.excl-foot strong{ color:#fff }

/* ---- the EPC figures, drawn to the scale. Bars, because six councils is a comparison */
.stat-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:46px; align-items:center }
.stat-big{ font-family:var(--display); font-weight:700; font-size:clamp(3rem,7vw,4.6rem); line-height:1; color:var(--ink); letter-spacing:-.03em }
.stat-big span{ display:block; font-size:1rem; font-weight:600; letter-spacing:0; color:var(--muted); margin-top:12px; max-width:34ch }
.bars{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.bars li{ display:grid; grid-template-columns:150px minmax(0,1fr) 62px; gap:14px; align-items:center; font-size:.96rem }
/* NOT .bar: that is the header nav bar, and it sets display:flex. Named collisions
   like that are silent, so this one is called .meter. */
.bars .meter{ height:14px; border-radius:2px; background:var(--orange-tint); overflow:hidden; display:block }
.bars .meter span{ display:block; height:100%; background:var(--orange); border-radius:2px }
.bars .v{ font-variant-numeric:tabular-nums; text-align:right; color:var(--ink); font-weight:600 }

/* ---- next steps: two panels, not another list */
.next{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px }


@media (max-width:860px){
  .split{ grid-template-columns:1fr; gap:26px }
  .split-head{ position:static }
  .stat-grid{ grid-template-columns:1fr; gap:26px }
  .excl{ grid-template-columns:1fr }
  .next{ grid-template-columns:1fr }
}
@media (max-width:560px){
  .page-hero .wrap{ padding-block:52px 56px }
  .timeline li{ padding-left:60px }
  .timeline::before{ left:19px }
  .timeline .t-n{ width:40px; height:40px; font-size:.95rem }
  .bars li{ grid-template-columns:110px minmax(0,1fr) 54px; gap:10px; font-size:.9rem }
  .rows li{ grid-template-columns:1fr; gap:6px }
  .rows .tag{ padding-top:0 }
}

/* ---- breadcrumbs. No competitor page in the 47 we studied has a trail at all */
.crumbs{ margin-bottom:20px }
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; font-size:.9rem }
.crumbs li{ display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.66) }
.crumbs li + li::before{ content:"/"; color:rgba(255,255,255,.35) }
.crumbs a{ color:rgba(255,255,255,.82); text-decoration:none }
.crumbs a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px }
.crumbs [aria-current="page"]{ color:#fff }
/* on a light band the same trail needs the ink colours instead */
.band-white .crumbs li, .band-tint .crumbs li{ color:var(--muted) }
.band-white .crumbs a, .band-tint .crumbs a{ color:var(--body) }
.band-white .crumbs [aria-current="page"], .band-tint .crumbs [aria-current="page"]{ color:var(--ink) }

/* ---- what IS included. The light twin of .excl-band, ticks instead of plus signs */
.incl{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:2px; grid-template-columns:1fr 1fr }
.incl li{ background:var(--white); border:1px solid var(--line); padding:20px 22px 20px 52px; position:relative }
.incl li::before{
  content:""; position:absolute; left:22px; top:24px; width:14px; height:8px;
  border-left:2.5px solid var(--orange); border-bottom:2.5px solid var(--orange);
  transform:rotate(-45deg);
}
.incl h3{ font-size:1.04rem; margin-bottom:5px }
.incl p{ color:var(--muted); font-size:.97rem; margin:0 }
@media (max-width:860px){ .incl{ grid-template-columns:1fr } }

/* ---- a pull quote, used once on a page, for a fact that carries more weight than ours */
.pullquote{
  margin:30px 0 0; padding:26px 30px; background:var(--orange-tint);
  border-radius:var(--radius-lg); max-width:72ch;
}
.pullquote p{
  font-family:var(--display); font-size:clamp(1.15rem,2.2vw,1.45rem); line-height:1.4;
  color:var(--ink); margin:0 0 12px; letter-spacing:-.015em;
}
.pullquote cite{ font-style:normal; font-size:.93rem; color:var(--body); display:block }
.pullquote cite a{ color:var(--orange-text) }

/* ---- spec comparison. Ben asked for it on each ladder type page, with that page's own
   row picked out so the reader sees where their choice sits. Scrolls on a phone. */
.spec-wrap{ overflow-x:auto; margin-top:28px; -webkit-overflow-scrolling:touch }
.spec{ width:100%; border-collapse:collapse; font-size:.97rem; min-width:620px }
.spec th, .spec td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top }
.spec thead th{
  font-family:var(--display); font-size:.78rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); border-bottom:2px solid var(--line-2);
}
.spec tbody th{ font-family:var(--display); font-weight:600; color:var(--ink); font-size:1rem; white-space:nowrap }
.spec td{ color:var(--body); font-variant-numeric:tabular-nums }
.spec tr.is-this{ background:var(--orange-tint) }
.spec tr.is-this th{ color:var(--orange-text) }