/* ============================================================
   RENEWAFUEL — homepage
   Brand: #FF7200 orange · #4E5A58 slate · Anybody
   ============================================================ */

:root{
  --o-700:#C74B02;
  --o-600:#E85D04;
  --o-500:#FF7200;
  --o-400:#FF8A2B;
  --o-300:#FBAF3E;
  --o-100:#FFE8D2;

  /* warm neutrals only. No cool grey anywhere except the logo artwork. */
  --ink:#241A12;
  --slate:#5C4A3E;
  --slate-2:#8B786B;
  --line:#F2E5D8;
  --cream:#FFF6EC;
  --paper:#FFFFFF;

  --r-sm:14px;
  --r-md:22px;
  --r-lg:32px;
  --r-xl:44px;

  --hdr-h:84px;
  --wrap:1280px;
  --gutter:clamp(20px, 4vw, 56px);
  --inset:clamp(8px, 1.1vw, 18px);
  --r-block:clamp(24px, 2.8vw, 46px);
  --hdr-pad:clamp(14px, 2vw, 30px);

  --ease:cubic-bezier(.22,.61,.36,1);

  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'RF Sign','Anybody',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  font-size:clamp(15px, .55vw + 13.4px, 17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
svg{display:block}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{
  margin:0;font-weight:800;line-height:1.02;letter-spacing:-.026em;
  text-wrap:balance; /* stops single-word last lines */
}
p,li{text-wrap:pretty}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:inherit}
address{font-style:normal}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- floating rounded blocks ----------
   The coloured sections sit inset from the page edge as rounded slabs,
   the way the original build did it. Their inner gutter is reduced by the
   same inset so text still lines up with the flush sections above/below. */
.hero,.tools,.guarantee,.tmoni{
  margin-inline:var(--inset);
  border-radius:var(--r-block);
  overflow:hidden;
}
/* Once the viewport is wide enough for .wrap to hit its max-width, the block
   inset stops shifting content and no compensation is needed. Below that the
   inset would push the text 8-18px right of the header logo, so take it back. */
@media (max-width:1320px){
  .hero > .wrap,.tools > .wrap,.guarantee > .wrap,.tmoni > .wrap,.hero__tagline{
    padding-inline:calc(var(--gutter) - var(--inset));
  }
}

/* section anchors clear the sticky header */
section[id],[id]{scroll-margin-top:calc(var(--hdr-h) + 28px)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:#fff;padding:14px 22px;border-radius:0 0 var(--r-sm) 0;
  font-weight:700;text-decoration:none;
}
.skip:focus{left:0}

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--o-500);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- shared bits ---------- */

.eyebrow{
  display:flex;align-items:center;gap:9px;
  margin:0 0 18px;
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--o-600);
}
.eyebrow--light{color:rgba(255,255,255,.9)}
.dot{
  width:7px;height:7px;border-radius:50%;
  background:currentColor;flex:none;
}

.shead{max-width:760px;margin:0 0 clamp(40px,5vw,72px)}
.shead__h{
  font-size:clamp(2.1rem, 4.4vw, 3.9rem);
  margin:0 0 20px;
}
.shead__h em{font-style:normal;color:var(--o-500)}
.shead__p{color:var(--slate);font-size:clamp(1rem,1.1vw + .74rem,1.16rem)}

.shead--light .shead__h{color:#fff}
.shead--light .shead__h em{color:var(--o-300)}
.shead--light .shead__p{color:rgba(255,255,255,.76)}

/* buttons */
.btn{
  --bg:var(--o-500); --fg:var(--ink);
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 20px 14px 26px;
  background:var(--bg);color:var(--fg);
  border:0;border-radius:999px;
  font-family:inherit;font-size:.95rem;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .2s linear;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(29,35,34,.45)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:17px 22px 17px 30px;font-size:1rem}
.btn--full{width:100%;justify-content:center}

.btn--solid{--bg:var(--ink);--fg:#fff}
.btn--white{--bg:#fff;--fg:var(--ink)}
.btn--orange{--bg:var(--o-500);--fg:var(--ink)}
.btn--dark{--bg:var(--ink);--fg:#fff}
.btn--ghost{
  --bg:transparent;--fg:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42);
  padding-right:26px;
}
.btn--ghost:hover{--bg:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}

.arw{
  width:30px;height:30px;flex:none;border-radius:50%;
  background:rgba(255,255,255,.18);
  position:relative;
  transition:background .2s linear;
}
.btn--white .arw,.btn--ghost:hover .arw{background:rgba(0,0,0,.08)}
.btn--ghost .arw{background:rgba(255,255,255,.18)}
.arw::before,.arw::after{
  content:'';position:absolute;background:currentColor;
}
/* Shaft + chevron are BOTH vertically centred (top:50% + translateY(-50%)) so
   they share one centreline and stay aligned at ANY circle size. Per-size rules
   below only set horizontal position + thickness — never `top` (that would break
   the centring). */
.arw::before{left:9px;top:50%;width:12px;height:1.6px;transform:translateY(-50%)}
.arw::after{
  right:9px;top:50%;width:7px;height:7px;
  border-right:1.6px solid currentColor;border-top:1.6px solid currentColor;
  transform:translateY(-50%) rotate(45deg);background:none;
}
.btn:hover .arw{background:rgba(255,255,255,.32)}
.btn--white:hover .arw{background:rgba(0,0,0,.14)}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.tags li{
  padding:7px 14px;border-radius:999px;
  background:var(--o-100);color:var(--o-700);
  font-size:.78rem;font-weight:600;letter-spacing:-.01em;
}
.route--dark .tags li{background:rgba(255,255,255,.1);color:rgba(255,255,255,.86)}

/* ============================================================
   UTILITY BAR
   ============================================================ */
.utilbar{background:var(--ink);color:rgba(255,255,255,.82);font-size:.8rem}
.utilbar__in{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:42px;
}
.utilbar__note{display:flex;align-items:center;gap:9px;margin:0;color:rgba(255,255,255,.66)}
.utilbar__note .dot{background:var(--o-400)}
.utilbar__links{display:flex;gap:26px}
.utilbar__links a{text-decoration:none;font-weight:600}
.utilbar__links a:hover{color:var(--o-300)}
@media (max-width:820px){
  .utilbar__note{display:none}
  .utilbar__in{justify-content:center}
  .utilbar__links{gap:18px;font-size:.78rem}
}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:sticky;top:0;z-index:80;
  /* extra room at rest so the nav is not jammed against the top of the
     rounded hero block; it collapses away once the bar sticks */
  padding-top:var(--hdr-pad);
  transition:background .3s linear, box-shadow .3s linear, padding-top .3s var(--ease);
}
.hdr.is-stuck{padding-top:0}
.hdr__in{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);
  min-height:var(--hdr-h);
  flex-wrap:nowrap;
}
.hdr__logo{flex:none;display:block;width:clamp(146px,13vw,182px)}
.hdr__logo img{width:100%}
.logo--dark{display:none}

.nav{display:flex;gap:clamp(12px,1.25vw,18px);margin-inline:auto;min-width:0}
.nav a{
  position:relative;
  text-decoration:none;color:#fff;
  font-size:.88rem;font-weight:600;letter-spacing:-.014em;
  padding:6px 0;
  white-space:nowrap;
}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover::after{transform:scaleX(1)}

.hdr__cta{display:flex;align-items:center;gap:14px;flex:none}
.hdr__cta .btn{padding:12px 14px 12px 20px;font-size:.88rem}
.hdr__cta .btn .arw{width:26px;height:26px}
.hdr__tel{
  display:flex;align-items:center;gap:9px;
  text-decoration:none;color:#fff;font-weight:700;font-size:.92rem;
  white-space:nowrap;
}
.hdr__tel svg{width:19px;height:19px;fill:currentColor;opacity:.85}
.hdr__tel:hover{color:var(--o-100)}
.hdr .btn--solid{--bg:#fff;--fg:var(--ink)}
.hdr .btn--solid .arw{background:rgba(0,0,0,.08)}

/* scrolled state */
.hdr.is-stuck{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line), 0 14px 34px -26px rgba(29,35,34,.5);
}
.hdr.is-stuck .logo--light{display:none}
.hdr.is-stuck .logo--dark{display:block}
.hdr.is-stuck .nav a{color:var(--ink)}
.hdr.is-stuck .nav a:hover{color:var(--o-600)}
.hdr.is-stuck .hdr__tel{color:var(--ink)}
.hdr.is-stuck .hdr__tel:hover{color:var(--o-600)}
.hdr.is-stuck .btn--solid{--bg:var(--o-500);--fg:var(--ink)}
.hdr.is-stuck .btn--solid .arw{background:rgba(36,26,18,.1)}

.burger{
  display:none;
  width:46px;height:46px;flex:none;
  background:rgba(255,255,255,.14);border:0;border-radius:50%;
  cursor:pointer;
  padding:0;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
}
.burger span{display:block;width:19px;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .2s linear}
.hdr.is-stuck .burger{background:var(--o-100)}
.hdr.is-stuck .burger span{background:var(--ink)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* six nav items + phone + CTA stop fitting before the usual tablet breakpoint,
   so the header tightens in stages and drops to the burger at 1160px */
@media (max-width:1320px){
  .nav{gap:clamp(13px,1.5vw,22px)}
  .nav a{font-size:.9rem}
  .hdr__tel span{display:none}
  .hdr__tel{gap:0}
}
@media (max-width:1160px){
  .burger{display:flex}
  .hdr__cta{margin-left:auto}
  /* Anchored to the header itself, not a fixed pixel offset, so the panel
     stays glued to the bar when it sticks and the padding collapses.
     Styled as a floating rounded card to match the inset blocks. */
  .nav{
    position:absolute;top:calc(100% + 6px);
    left:var(--inset);right:var(--inset);
    z-index:90;
    flex-direction:column;gap:0;
    background:#fff;
    border-radius:var(--r-md);
    padding:6px 22px 14px;
    box-shadow:0 26px 50px -24px rgba(70,35,0,.55), 0 0 0 1px var(--line);
    max-height:calc(100vh - var(--hdr-h) - 60px);
    overflow-y:auto;
  }
  .nav a{color:var(--ink);padding:15px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav a:last-child{border-bottom:0}
  .nav a[aria-current="page"]{color:var(--o-600)}
  .nav a::after{display:none}
  .js .nav{display:none}
  .js .nav.is-open{display:flex}
}
@media (max-width:620px){
  /* the fixed bottom action bar carries Call + Book on small screens,
     so the header keeps just the logo and the menu */
  .hdr__cta{display:none}
  .hdr__logo{width:140px}
  /* with the CTA gone, push the burger to the far right (not next to the logo) */
  .burger{margin-left:auto}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  /* sits under the sticky header, but stops short of the very top so the
     rounded block visibly floats instead of butting into the browser edge */
  margin-top:calc(var(--inset) - var(--hdr-h) - var(--hdr-pad));
  /* tighter: less gap under the top bar, and much less space at the bottom so the
     hero content sits close to above-the-fold. */
  padding:calc(var(--hdr-h) + var(--hdr-pad) + clamp(20px,2.8vw,42px)) 0 clamp(38px,4.6vw,72px);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(251,175,62,.95) 0%, rgba(251,175,62,0) 55%),
    radial-gradient(90% 80% at 4% 96%, rgba(199,75,2,.85) 0%, rgba(199,75,2,0) 60%),
    linear-gradient(148deg, #F2650B 0%, #FF7200 46%, #FF9130 100%);
}
/* the compilation reel, ghosted in behind the orange */
.hero__bgvid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  opacity:.1;
  pointer-events:none;
}
@media (max-width:900px){
  .hero__bgvid{display:none}
}

/* slow sunlight drift across the hero */
.hero__bg::before{
  content:'';position:absolute;inset:-25%;
  background:radial-gradient(closest-side, rgba(255,225,170,.5), transparent 70%);
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(-8%, -6%, 0) scale(1)}
  to{transform:translate3d(12%, 8%, 0) scale(1.18)}
}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(65deg, rgba(255,255,255,.035) 0 1px, transparent 1px 84px);
  mask-image:radial-gradient(80% 70% at 60% 40%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(80% 70% at 60% 40%, #000 0%, transparent 78%);
}

.hero__in{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(34px,4.4vw,70px);
  align-items:center;
  position:relative;z-index:2;
}

.hero__h1{
  color:#fff;
  font-size:clamp(2.6rem, 4.9vw, 4.7rem);
  line-height:.95;
  letter-spacing:-.04em;
  margin:0 0 26px;
}
/* keep the intended two-line break: "Take Control" / "of Your Energy." */
.hero__h1 .l1,.hero__h1 .l2{display:block;white-space:nowrap}
.hero__h1 em{font-style:normal;font-weight:300;color:rgba(255,255,255,.72)}

.hero__sub{
  color:rgba(255,255,255,.92);
  font-size:clamp(1.02rem, .8vw + .82rem, 1.22rem);
  line-height:1.5;
  max-width:47ch;
  margin:0 0 26px;
}

.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}

.hero__ticks{display:flex;flex-wrap:wrap;gap:10px 22px}
.hero__ticks li{
  display:flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.86);font-size:.85rem;font-weight:600;
}
.hero__ticks li::before{
  content:'';width:17px;height:17px;flex:none;border-radius:50%;
  background:rgba(255,255,255,.22) var(--tick) center / 10px 10px no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}

/* hero media */
.hero__media{position:relative}
.shot{
  margin:0;overflow:hidden;
  border-radius:var(--r-xl);
  box-shadow:0 40px 80px -40px rgba(70,25,0,.6), 0 0 0 1px rgba(255,255,255,.16);
}
.shot img,.shot__vid{width:100%;aspect-ratio:4 / 3.06;object-fit:cover;display:block}

/* ---- hero video ---- */
.shot--video{position:relative;background:#3A1D00}
.shot__mute{
  position:absolute;right:14px;bottom:14px;z-index:3;
  width:38px;height:38px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(20,10,2,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  opacity:0;transition:opacity .3s linear, background .2s linear;
}
.shot--video:hover .shot__mute,.shot__mute:focus-visible{opacity:1}
.shot__mute:hover{background:rgba(20,10,2,.75)}
/* two bars = pause; the paused class swaps them for a play triangle */
.shot__mute-i{
  width:11px;height:12px;
  border-left:3.5px solid #fff;border-right:3.5px solid #fff;
}
.shot__mute.is-paused .shot__mute-i{
  width:0;height:0;margin-left:3px;
  border-left:11px solid #fff;border-right:0;
  border-top:7px solid transparent;border-bottom:7px solid transparent;
}

/* ---- chips drift gently so the hero never feels static ---- */
@keyframes bob{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,-9px,0)}
}
.js .chip{animation:bob 4.4s ease-in-out infinite alternate}
.js .chip--b{animation-duration:5.6s;animation-delay:-1.4s}
.js .chip--c{animation-duration:5s;animation-delay:-2.6s}

.chip{
  position:absolute;z-index:3;
  display:flex;flex-direction:column;gap:2px;
  padding:16px 20px;
  border-radius:var(--r-md);
  box-shadow:0 20px 46px -22px rgba(70,25,0,.55);
  max-width:206px;
}
.chip strong{font-size:1.85rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.chip sup{font-size:.55em;top:-.55em;font-weight:700}
.chip span{font-size:.74rem;line-height:1.32;font-weight:500}

.chip--white{background:#fff;color:var(--ink)}
.chip--white span{color:var(--slate-2)}
.chip--dark{
  background:rgba(23,28,27,.76);color:#fff;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 20px 46px -22px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12);
}
.chip--dark span{color:rgba(255,255,255,.72)}
.chip--amber{background:var(--o-300);color:#4A2600}
.chip--amber strong{font-size:1.4rem}
.chip--amber span{color:rgba(74,38,0,.72)}

.chip--a{top:-26px;left:-34px}
.chip--b{bottom:64px;right:-30px}
.chip--c{bottom:-26px;left:34px}

.hero__wordmark{
  /* ghost text sits UP behind the body copy (and under the right of the video
     box), not down at the foot — frees the bottom so the tagline can sit below
     the video card without a big empty band. */
  position:absolute;left:50%;top:38%;transform:translateX(-50%);
  margin:0;z-index:-1;
  font-size:clamp(6rem,17vw,15rem);
  font-weight:800;letter-spacing:-.05em;line-height:.8;
  color:rgba(255,255,255,.11);
  white-space:nowrap;pointer-events:none;
  user-select:none;
}
.hero__tagline{
  position:relative;z-index:2;
  /* keep the tagline clearly BELOW the video card + its overhanging "10 yrs"
     chip (chip--c hangs ~86px under the grid). */
  margin:clamp(64px,7vw,104px) 0 0;
  text-align:right;
  color:rgba(255,255,255,.9);
  font-size:clamp(1rem,1.5vw,1.35rem);
  font-weight:300;letter-spacing:-.02em;
  padding-inline:var(--gutter);
  max-width:var(--wrap);
  margin-inline:auto;
}

@media (max-width:980px){
  .hero__in{grid-template-columns:1fr;gap:44px}
  .hero__sub{max-width:none}
  .hero__tagline{text-align:left;margin-top:clamp(24px,5vw,40px)}
  /* Once the hero stacks, the floating stat chips become a FIXED (non-moving),
     stacked set directly under the video — no more bobbing over the photo, the
     tagline or each other. */
  .hero__media{display:flex;flex-direction:column;gap:10px}
  /* the source video is landscape, so show it landscape (16:9) rather than a tall
     crop that shoves the content below it way down the page */
  .shot,.shot img,.shot__vid{aspect-ratio:16 / 9;height:auto}
  .chip,.chip--white,.chip--dark,.chip--amber{
    position:static;inset:auto;max-width:none;
    flex-direction:row;align-items:center;gap:12px;
    padding:14px 18px;
    background:rgba(255,255,255,.16);
    color:#fff;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
    border-radius:var(--r-sm);
  }
  .chip strong{font-size:1.4rem;flex:none;min-width:74px;color:#fff}
  .chip span,.chip--white span,.chip--dark span,.chip--amber span{
    font-size:.85rem;line-height:1.3;color:rgba(255,255,255,.9);
  }
  /* stacked chips are a list, not floating objects, so they stop bobbing */
  .js .chip{animation:none;translate:none}
}
/* On small screens the floating chips smother the photo, so they drop
   underneath it as a static row instead. */
@media (max-width:640px){
  .hero__actions .btn{width:100%;justify-content:space-between}
  .hero__actions .btn--ghost{justify-content:center}
}

/* ============================================================
   ACCREDITATIONS
   ============================================================ */
.accred{background:var(--paper);padding:clamp(38px,4.4vw,60px) 0}
.accred__lab{
  text-align:center;margin:0 0 26px;
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--slate-2);
}
.accred__row{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(12px,2.2vw,34px);
  align-items:center;
}
.accred__row img{
  width:100%;max-width:132px;margin-inline:auto;
  opacity:.78;
  transition:opacity .3s linear, transform .3s var(--ease);
}
.accred__row li:hover img{opacity:1;transform:scale(1.05)}
/* HIES + Approved Code lockup: one tile across two columns, full strength (HIES rules: used as supplied, never on its own) */
.accred__row li:has(img[src*="hies-acs"]){grid-column:span 2}
.accred__row li:has(img[src*="hies-acs"]) img{max-width:300px;opacity:1}
@media (max-width:720px){
  /* 3 per row, last row centred; the HIES lockup takes two slots */
  .accred__row{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
  .accred__row li{flex:0 0 calc((100% - 44px) / 3)}
  .accred__row li:has(img[src*="hies-acs"]){flex-basis:calc((100% - 44px) / 3 * 2 + 22px)}
}

/* ============================================================
   LOCATION TICKER
   ============================================================ */
.ticker{
  background:var(--o-500);color:#fff;
  padding:18px 0;overflow:hidden;
  display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);
}
.ticker__lab{
  flex:none;margin:0;padding-left:var(--gutter);
  font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.ticker__mask{flex:1;min-width:0;overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
}
/* the track holds two identical sets and shifts by exactly half, so the loop
   is seamless with no gap at the wrap point */
.ticker__track{display:flex;width:max-content;animation:slide 34s linear infinite}
.ticker__set{display:flex;align-items:center}
.ticker__set li{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);
  padding-right:clamp(16px,2.4vw,34px);
  font-size:clamp(1.05rem,1.5vw,1.5rem);font-weight:800;letter-spacing:-.03em;
  white-space:nowrap;
}
.ticker__set li::after{
  content:'';width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.5);flex:none;
}
@keyframes slide{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
.ticker:hover .ticker__track{animation-play-state:paused}

@media (max-width:700px){
  .ticker{flex-direction:column;align-items:stretch;gap:10px}
  .ticker__lab{padding-left:0;text-align:center}
}

/* ============================================================
   SAVINGS ESTIMATOR
   ============================================================ */
.calc{padding:clamp(64px,8vw,116px) 0;background:var(--cream);border-bottom:1px solid var(--line)}
.calc__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(32px,4.6vw,72px);align-items:center;
}
.calc__copy p{color:var(--slate);max-width:46ch}
.calc__copy .shead__h{margin-bottom:20px}
.calc__note{margin-top:1em;font-size:.92rem;color:var(--slate-2)}

.calc__panel{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,38px);
  box-shadow:0 34px 70px -46px rgba(70,35,0,.42);
}
.calc__field label{
  display:block;margin-bottom:6px;
  font-size:.82rem;font-weight:700;color:var(--slate);
}
.calc__bill{
  display:flex;align-items:baseline;gap:9px;margin:0 0 14px;
  font-size:clamp(2.2rem,3.4vw,3rem);font-weight:800;
  letter-spacing:-.045em;color:var(--o-600);line-height:1;
  font-variant-numeric:tabular-nums;
}
.calc__bill span::before{content:'\00A3'}
.calc__bill small{font-size:.9rem;font-weight:600;color:var(--slate-2);letter-spacing:0}

/* range input, styled the same in both engines */
.calc__field input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:10px;margin:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg, var(--o-500) 0 var(--pct,22%), var(--line) var(--pct,22%) 100%);
}
.calc__field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:30px;height:30px;border-radius:50%;
  background:#fff;border:4px solid var(--o-500);
  box-shadow:0 5px 14px -4px rgba(70,35,0,.5);cursor:grab;
}
.calc__field input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:#fff;border:4px solid var(--o-500);
  box-shadow:0 5px 14px -4px rgba(70,35,0,.5);cursor:grab;
}
.calc__scale{
  display:flex;justify-content:space-between;
  margin:9px 0 0;font-size:.76rem;color:var(--slate-2);font-weight:600;
}

.calc__result{
  margin:26px 0 22px;border-radius:var(--r-md);overflow:hidden;
}
.calc__row{
  background:linear-gradient(135deg, #FF7200 0%, #E85D04 100%);
  color:#fff;padding:20px 22px;
}
.calc__row--alt{background:var(--ink);padding:16px 22px}
.calc__lab{
  display:block;font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:6px;
}
.calc__big{
  display:block;font-size:clamp(1.6rem,2.6vw,2.15rem);font-weight:800;
  letter-spacing:-.04em;line-height:1.04;font-variant-numeric:tabular-nums;
}
.calc__mid{
  display:block;font-size:clamp(1.15rem,1.7vw,1.45rem);font-weight:800;
  letter-spacing:-.03em;color:var(--o-300);font-variant-numeric:tabular-nums;
}
.calc__sub{display:block;margin-top:5px;font-size:.8rem;color:rgba(255,255,255,.76)}

.calc__cta .btn{margin-bottom:12px}
.calc__alt{
  display:block;text-align:center;
  font-size:.85rem;font-weight:600;color:var(--o-600);
}
.calc__small{margin:18px 0 0;font-size:.74rem;line-height:1.55;color:var(--slate-2)}

@media (max-width:900px){
  .calc__in{grid-template-columns:1fr;gap:36px}
  .calc__copy p{max-width:none}
}

/* ============================================================
   STATS
   ============================================================ */
.stats{background:var(--cream);padding:clamp(58px,7vw,104px) 0;border-block:1px solid var(--line)}
.stats__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,3vw,46px);
}
.stat{position:relative;padding-top:26px}
.stat__bar{
  position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--line);border-radius:2px;overflow:hidden;
}
.stat__bar::after{
  content:'';position:absolute;inset:0;
  background:var(--o-500);transform-origin:left;transform:scaleX(0);
  transition:transform 1.1s var(--ease);
}
.stat.is-in .stat__bar::after{transform:scaleX(1)}
.stat:nth-child(2) .stat__bar::after{transition-delay:.1s}
.stat:nth-child(3) .stat__bar::after{transition-delay:.2s}
.stat:nth-child(4) .stat__bar::after{transition-delay:.3s}

.stat__n{
  font-size:clamp(2.3rem,3.6vw,3.3rem);
  font-weight:800;letter-spacing:-.045em;line-height:1;
  color:var(--o-600);margin:0 0 14px;
  font-variant-numeric:tabular-nums;
}
.stat__t{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;line-height:1.25}
.stat__d{color:var(--slate);font-size:.9rem;line-height:1.55;margin:0}

@media (max-width:880px){.stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.stats__grid{grid-template-columns:1fr}}

/* ============================================================
   ROUTES
   ============================================================ */
.routes{padding:clamp(70px,9vw,132px) 0}

.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---- sliding service strips ---- */
.slides{
  display:flex;gap:12px;
  height:clamp(440px,52vw,580px);
}
.slide{
  flex:1 1 0;min-width:0;
  border-radius:var(--r-lg);overflow:hidden;
  position:relative;
  transition:flex-grow .55s var(--ease);
}
/* the open panel. CSS hover drives it so it works without JS; the .is-open
   class is only there to set the initial panel and to support touch taps. */
.slide.is-open{flex-grow:2.6}
.slides:hover .slide.is-open{flex-grow:1}
.slides:hover .slide:hover,
.slides .slide:focus-within{flex-grow:2.6}

.slide__link{
  position:absolute;inset:0;
  display:block;text-decoration:none;color:#fff;
}
.slide__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
/* Collapsed strips read as flat orange with the photo just showing through.
   The open panel drops the orange back so the photograph carries it, with a
   scrim underneath so the white copy always has something to sit on. */
.slide__link::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(200deg, var(--c2) 0%, var(--c) 100%);
  opacity:.92;
  transition:opacity .55s var(--ease);
}
.slide__link::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, rgba(48,18,0,.82) 0%, rgba(48,18,0,.28) 42%, transparent 68%);
  opacity:0;transition:opacity .55s var(--ease);
}
.slide.is-open .slide__link::after{opacity:.5}
.slide.is-open .slide__link::before{opacity:1}
.slides:hover .slide.is-open .slide__link::after{opacity:.92}
.slides:hover .slide.is-open .slide__link::before{opacity:0}
.slides:hover .slide:hover .slide__link::after,
.slides .slide:focus-within .slide__link::after{opacity:.5}
.slides:hover .slide:hover .slide__link::before,
.slides .slide:focus-within .slide__link::before{opacity:1}

.slide__spine,.slide__body,.slide__go{z-index:2}
.slide:hover .slide__img{transform:scale(1.06)}

/* collapsed: the rotated spine label */
.slide__spine{
  position:absolute;left:0;right:0;bottom:96px;top:34px;
  display:flex;align-items:flex-end;justify-content:center;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:clamp(1.15rem,1.5vw,1.5rem);font-weight:800;letter-spacing:-.02em;
  color:#fff;white-space:nowrap;
  opacity:1;transition:opacity .35s linear;
}
/* white on the pale amber strip is only ~1.9:1, so that one takes dark text */
.slide--light .slide__spine{color:#4A2600}
.slide.is-open .slide__spine{opacity:0}
.slides:hover .slide.is-open .slide__spine{opacity:1}
.slides:hover .slide:hover .slide__spine,
.slides .slide:focus-within .slide__spine{opacity:0}

/* open: the full copy block */
.slide__body{
  position:absolute;left:34px;right:34px;bottom:104px;
  display:flex;flex-direction:column;align-items:flex-start;
  opacity:0;transform:translateY(14px);
  transition:opacity .45s linear .12s, transform .5s var(--ease) .12s;
  pointer-events:none;
}
.slide.is-open .slide__body{opacity:1;transform:none}
.slides:hover .slide.is-open .slide__body{opacity:0;transform:translateY(14px);transition-delay:0s}
.slides:hover .slide:hover .slide__body,
.slides .slide:focus-within .slide__body{opacity:1;transform:none;transition-delay:.12s}

.slide__lede{
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-bottom:12px;
}
.slide__h{
  font-size:clamp(1.9rem,2.7vw,2.7rem);font-weight:800;
  letter-spacing:-.035em;line-height:1;margin-bottom:14px;
}
.slide__p{
  font-size:1rem;line-height:1.5;color:rgba(255,255,255,.94);
  max-width:34ch;margin-bottom:18px;
}
.slide .tags{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.slide .tags > span{
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.2);color:#fff;
  font-size:.76rem;font-weight:600;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}

.slide__go{
  position:absolute;left:34px;bottom:34px;
  display:grid;place-items:center;
  width:52px;height:52px;border-radius:50%;
  background:#fff;color:var(--o-700);
  transition:transform .35s var(--ease);
}
.slide__go .arw{width:52px;height:52px;background:none}
.slide__go .arw::before{left:17px;width:16px;height:2px}
.slide__go .arw::after{right:17px;width:9px;height:9px;border-width:2px}
.slide:hover .slide__go{transform:translateX(5px)}

/* On mobile the copy stops sitting on top of the photograph. Text over a
   bright roof shot is unreadable at any scrim strength, so each card splits
   into a photo and a solid colour panel underneath. */
@media (max-width:900px){
  .slides{flex-direction:column;height:auto;gap:16px}
  .slide,.slide.is-open,.slides:hover .slide,.slides:hover .slide:hover{flex:none}
  .slide{height:auto}

  .slide__link{position:relative;display:block;background:var(--c)}
  .slide__link::after,.slide__link::before,
  .slides:hover .slide .slide__link::after,
  .slides:hover .slide .slide__link::before{display:none}

  .slide__img{position:static;width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover}
  .slide:hover .slide__img{transform:none}
  .slide__spine,.slides:hover .slide__spine{display:none}

  .slide__body,
  .slides:hover .slide .slide__body,
  .slides:hover .slide:hover .slide__body{
    position:static;opacity:1;transform:none;
    padding:24px 24px 22px;
  }
  .slide__p{max-width:none;margin-bottom:16px}

  .slide__go{
    position:static;margin:18px 24px 24px;
    width:auto;height:auto;border-radius:999px;
    display:inline-flex;align-items:center;gap:10px;
    padding:13px 18px 13px 22px;
    font-size:.92rem;font-weight:700;
  }
  .slide__go .vh{
    position:static;width:auto;height:auto;margin:0;
    clip-path:none;white-space:normal;overflow:visible;
    order:-1;
  }
  .slide__go .arw{width:28px;height:28px;background:rgba(0,0,0,.08)}
  .slide__go .arw::before{left:8px;width:12px;height:1.8px}
  .slide__go .arw::after{right:8px;width:8px;height:8px;border-width:1.8px}
  .slide:hover .slide__go{transform:none}

  /* the pale amber card takes dark type throughout */
  .slide--light .slide__body,
  .slide--light .slide__lede,
  .slide--light .slide__p{color:#3B1F00}
  .slide--light .slide__lede{color:rgba(59,31,0,.72)}
  .slide--light .tags > span{background:rgba(59,31,0,.14);color:#3B1F00}
}

/* ============================================================
   TOOLS
   ============================================================ */
.tools{
  background:linear-gradient(170deg, #2E2116 0%, #241A12 60%, #3A2413 100%);
  color:#fff;
  padding:clamp(70px,9vw,132px) 0;
  position:relative;overflow:hidden;
}
.tools::before{
  content:'';position:absolute;inset:auto -10% -40% 40%;height:70%;
  background:radial-gradient(closest-side, rgba(255,114,0,.3), transparent 70%);
  pointer-events:none;
}
.tools .wrap{position:relative;z-index:1}

.tools__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
  perspective:1100px;
}
.tool{
  --rx:0deg; --ry:0deg;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  display:flex;flex-direction:column;
  padding:clamp(24px,2.4vw,32px);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  transition:background .3s linear, transform .4s var(--ease), border-color .3s linear;
}
.tool:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,138,43,.5);
  transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(22px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
.tool > *{transform:translateZ(18px)}
.tool__t{
  display:inline-flex;align-self:flex-start;
  margin:0 0 20px;padding:5px 12px;
  border-radius:999px;background:rgba(255,138,43,.18);color:var(--o-300);
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.tool__h{font-size:1.22rem;letter-spacing:-.022em;margin:0 0 12px;line-height:1.18}
.tool__p{color:rgba(255,255,255,.7);font-size:.9rem;line-height:1.58;margin:0 0 24px;flex:1}
.tlink{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--o-300);font-weight:700;font-size:.9rem;text-decoration:none;
}
.tlink .arw{width:26px;height:26px;background:rgba(255,138,43,.18)}
.tlink:hover{color:#fff}
.tlink:hover .arw{background:rgba(255,255,255,.2)}

@media (max-width:860px){.tools__grid{grid-template-columns:1fr}}
@media (max-width:560px){.tools__grid{grid-template-columns:1fr}}

/* ============================================================
   WHO WE ARE
   ============================================================ */
.who{padding:clamp(70px,9vw,132px) 0}
.who__in{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(36px,5vw,84px);align-items:center;
}
.who__media{position:relative;padding-bottom:70px}
.shot--tall{border-radius:var(--r-lg);box-shadow:0 40px 80px -46px rgba(29,35,34,.5)}
.shot--tall img{aspect-ratio:4 / 3.4}
.shot--inset{
  position:absolute;right:-14px;bottom:0;width:52%;
  border-radius:var(--r-md);
  box-shadow:0 26px 50px -26px rgba(29,35,34,.55), 0 0 0 8px #fff;
}
.shot--inset img{aspect-ratio:4 / 2.7}
.who__copy p{color:var(--slate);max-width:56ch}
.who__copy .shead__h{margin-bottom:24px}
.who__copy .btn{margin-top:14px}

@media (max-width:900px){
  .who__in{grid-template-columns:1fr;gap:48px}
  .who__media{padding-bottom:56px}
}

/* ============================================================
   STEPS
   ============================================================ */
.steps{background:var(--cream);padding:clamp(70px,9vw,132px) 0;border-block:1px solid var(--line)}
.steps__list{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,36px);
  position:relative;
}
.steps__list::before{
  content:'';position:absolute;top:26px;left:6%;right:6%;height:1px;
  background:repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 14px);
}
.step{position:relative;padding-top:70px}
.step__n{
  position:absolute;top:0;left:0;
  width:54px;height:54px;margin:0;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--o-500);color:var(--ink);
  font-size:1rem;font-weight:800;letter-spacing:-.02em;
  box-shadow:0 0 0 8px var(--cream);
}
.step__h{font-size:1.14rem;letter-spacing:-.022em;margin:0 0 10px;line-height:1.24}
.step__p{color:var(--slate);font-size:.92rem;line-height:1.58;margin:0}

@media (max-width:900px){
  .steps__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps__list::before{display:none}
}
@media (max-width:520px){.steps__list{grid-template-columns:1fr}}

/* ============================================================
   GUARANTEE
   ============================================================ */
.guarantee{
  padding:clamp(64px,8vw,116px) 0;
  background:linear-gradient(140deg, #C74B02 0%, #FF7200 58%, #FF9130 100%);
  color:#fff;position:relative;overflow:hidden;
}
.guarantee::after{
  content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(120deg, rgba(255,255,255,.05) 0 1px, transparent 1px 70px);
  pointer-events:none;
}
.guarantee__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(32px,5vw,72px);align-items:center;
}
.guarantee__h{font-size:clamp(2rem,4vw,3.4rem);margin:0 0 20px}
.guarantee__h em{font-style:normal;color:rgba(255,255,255,.62);font-weight:300}
.guarantee__p{font-size:clamp(1.05rem,1.2vw,1.28rem);max-width:52ch;margin:0 0 16px}
.guarantee__note{color:rgba(255,255,255,.78);font-size:.98rem;max-width:52ch;margin:0}

.guarantee__badge{
  flex:none;width:clamp(150px,16vw,208px);aspect-ratio:1;
  display:grid;place-content:center;text-align:center;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.guarantee__badge span{
  display:block;font-size:clamp(3rem,5.4vw,4.6rem);font-weight:800;
  letter-spacing:-.05em;line-height:.9;
}
.guarantee__badge em{
  display:block;font-style:normal;margin-top:6px;
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.8);
}
@media (max-width:820px){
  .guarantee__in{grid-template-columns:1fr;justify-items:start}
}

/* ============================================================
   INSTALLS
   ============================================================ */
.installs{padding:clamp(70px,9vw,132px) 0}
.installs__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px);
}
.install{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  background:var(--cream);
}
.install--wide{grid-column:span 2}
.install img{
  width:100%;height:100%;aspect-ratio:4 / 3;object-fit:cover;
  transition:transform .7s var(--ease);
}
.install--wide img{aspect-ratio:8 / 4.5}
.install:hover img{transform:scale(1.05)}
.install__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:36px 20px 18px;
  background:linear-gradient(rgba(15,19,18,0), rgba(15,19,18,.62) 42%, rgba(15,19,18,.9));
  color:#fff;text-shadow:0 1px 14px rgba(15,19,18,.45);
}
.install__cap strong{display:block;font-size:1.02rem;font-weight:700;letter-spacing:-.02em}
.install__cap span{font-size:.8rem;color:rgba(255,255,255,.76)}
.installs__cta{margin-top:clamp(30px,3.4vw,46px)}

@media (max-width:900px){
  .installs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .install--wide{grid-column:span 2}
}
@media (max-width:520px){
  .installs__grid{grid-template-columns:1fr}
  .install--wide{grid-column:span 1}
  .install--wide img{aspect-ratio:4 / 3}
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tmoni{
  background:linear-gradient(215deg, #FF9130 0%, #FF7200 44%, #E85D04 100%);
  color:#fff;padding:clamp(70px,9vw,132px) 0;
  position:relative;
}
.tmoni::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(60deg, rgba(255,255,255,.05) 0 1px, transparent 1px 78px);
}
.tmoni .wrap{position:relative;z-index:1}
.tmoni .shead__h em{color:rgba(255,255,255,.62);font-weight:300}
.tmoni .shead__p{color:rgba(255,255,255,.86)}
.tmoni__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);
}
.vid{position:relative;border-radius:var(--r-md);overflow:hidden;background:#000}
.vid__btn{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  position:relative;color:#fff;text-align:left;font-family:inherit;
}
.vid__btn img{width:100%;aspect-ratio:16 / 9;object-fit:cover;transition:transform .7s var(--ease),opacity .3s linear;opacity:.82}
.vid__btn:hover img{transform:scale(1.05);opacity:.95}
.vid__play{
  position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;
  background:var(--o-500);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.7);
  transition:transform .3s var(--ease), background .2s linear;
}
.vid__play::after{
  content:'';position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);
  border-left:17px solid #fff;
  border-top:11px solid transparent;border-bottom:11px solid transparent;
}
.vid__btn:hover .vid__play{transform:translate(-50%,-50%) scale(1.09);background:var(--o-400)}
.vid__meta{
  position:absolute;left:0;right:0;bottom:0;
  display:block;padding:44px 20px 18px;
  background:linear-gradient(transparent, rgba(10,13,12,.9));
}
.vid__meta strong{display:block;font-size:1rem;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.vid__meta span{font-size:.8rem;color:rgba(255,255,255,.72)}
.vid iframe{width:100%;aspect-ratio:16 / 9;border:0;display:block}

@media (max-width:880px){.tmoni__grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}

/* Testimonial edit bar (edit mode only; injected input sits below the card) */
.vid__editbar{display:block;padding:12px 14px;background:rgba(245,243,239,.05);border-top:1px solid rgba(245,243,239,.16)}
.vid__editbar .cc-hidden-edit{margin-top:0}

/* ============================================================
   HERO VIDEO / POSTER EDITOR CARD (edit mode only)
   ============================================================ */
/* one clean line: label + url field + Media Library button, hint wraps beneath */
.cc-hero-edit{margin:14px 0 4px;display:flex;align-items:center;flex-wrap:wrap;gap:9px 12px}
.cc-hero-edit__label{font-weight:700;font-size:.82rem;letter-spacing:.01em;flex:none;margin:0;color:var(--o-500)}
.cc-hero-edit__url{flex:1 1 300px;min-width:200px;max-width:520px;padding:7px 11px;border-radius:6px;background:rgba(245,243,239,.08);border:1px solid rgba(245,243,239,.24);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-hero-edit__hint{flex:1 0 100%;font-size:.76rem;opacity:.7;margin:0}
.cc-hero-edit .cc-media-btn{flex:none}

/* ============================================================
   SURVEY
   ============================================================ */
.survey{padding:clamp(70px,9vw,132px) 0;background:var(--cream);border-top:1px solid var(--line)}
.survey__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(34px,5vw,78px);align-items:start;
}
.survey__copy p{color:var(--slate);max-width:48ch}
.survey__copy .shead__h{margin-bottom:20px}
.survey__pts{margin:26px 0 26px;display:flex;flex-direction:column;gap:12px}
.survey__pts li{
  display:flex;gap:12px;align-items:flex-start;
  font-weight:600;font-size:.96rem;letter-spacing:-.012em;
}
.survey__pts li::before{
  content:'';flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:var(--o-500) var(--tick) center / 12px 12px no-repeat;
}
.survey__tel{font-weight:600}
.survey__tel a{color:var(--o-600);font-weight:700}

.survey__form{
  background:#fff;padding:clamp(24px,2.8vw,38px);
  border-radius:var(--r-lg);border:1px solid var(--line);
  box-shadow:0 34px 70px -46px rgba(29,35,34,.4);
}
.survey__ftitle{font-size:1.3rem;letter-spacing:-.024em;margin:0 0 22px}
.field{margin-bottom:16px}
.field label{
  display:block;margin-bottom:7px;
  font-size:.82rem;font-weight:700;letter-spacing:-.008em;color:var(--slate);
}
.opt{font-weight:500;color:var(--slate-2)}
.field input,.field select{
  width:100%;padding:14px 16px;
  font-family:inherit;font-size:.96rem;color:var(--ink);
  background:var(--cream);
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .2s linear, background .2s linear;
}
.field input:focus,.field select:focus{background:#fff;border-color:var(--o-500)}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),linear-gradient(135deg,var(--slate) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size:6px 6px, 6px 6px;background-repeat:no-repeat;
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.survey__form .btn{margin-top:8px}
.survey__small{margin:14px 0 0;font-size:.78rem;color:var(--slate-2);text-align:center}

@media (max-width:900px){
  .survey__in{grid-template-columns:1fr}
}

/* ============================================================
   INNER PAGES
   ============================================================ */

/* ---- page hero (shorter than the homepage one) ---- */
.phero{
  position:relative;isolation:isolate;overflow:hidden;
  margin-inline:var(--inset);border-radius:var(--r-block);
  margin-top:calc(var(--inset) - var(--hdr-h) - var(--hdr-pad));
  padding:calc(var(--hdr-h) + var(--hdr-pad) + clamp(40px,5vw,72px)) 0 clamp(48px,6vw,86px);
}
.phero__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(30px,4vw,64px);align-items:center;position:relative;z-index:2;
}
.phero__h1{
  color:#fff;font-size:clamp(2.4rem,5vw,4.1rem);
  line-height:.96;letter-spacing:-.04em;margin:0 0 12px;
}
.phero__lede{
  color:#fff;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.12;margin:0 0 18px;
}
.phero__lede em{font-style:normal;font-weight:300;color:rgba(255,255,255,.72)}
.phero__sub{
  color:rgba(255,255,255,.92);font-size:clamp(1rem,.7vw,1.12rem);
  line-height:1.55;max-width:44ch;margin:0 0 30px;
}
.phero__media .shot img{aspect-ratio:4 / 3.2}
@media (max-width:900px){
  .phero__in{grid-template-columns:minmax(0,1fr);gap:40px}
  .phero__copy{min-width:0}
  .phero .btn{white-space:normal;text-align:left}
  .phero .btn > span{min-width:0;flex:0 1 auto}
  .phero .btn .arw{flex:none}
  .phero__sub{max-width:none}
  .phero .btn{width:100%;justify-content:space-between}
  .phero .btn--ghost{justify-content:center}
}
@media (max-width:1320px){
  .phero > .wrap{padding-inline:calc(var(--gutter) - var(--inset))}
}

/* ---- split copy + image ---- */
.split{padding:clamp(64px,8vw,116px) 0}
.split__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(32px,4.6vw,76px);align-items:center;
}
.split--rev .split__media{order:-1}
.split__copy p{color:var(--slate);max-width:52ch}
.split__copy .shead__h{margin-bottom:20px}
.split__media .shot img{aspect-ratio:4 / 3.3}
@media (max-width:900px){
  .split__in{grid-template-columns:1fr;gap:36px}
  .split--rev .split__media{order:0}
  .split__copy p{max-width:none}
}

/* ---- ticked benefit list ---- */
.blist{margin-top:26px;display:flex;flex-direction:column;gap:11px}
.blist li{
  display:flex;gap:12px;align-items:flex-start;
  font-weight:600;font-size:.97rem;letter-spacing:-.012em;
}
.blist li::before{
  content:'';flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:var(--o-500) var(--tick) center / 12px 12px no-repeat;
}

/* ---- grant / accolade band ---- */
.grant{
  margin-inline:var(--inset);border-radius:var(--r-block);overflow:hidden;
  background:linear-gradient(140deg, #C74B02 0%, #FF7200 58%, #FF9130 100%);
  color:#fff;padding:clamp(50px,6vw,90px) 0;position:relative;
}
.grant--alt{background:linear-gradient(140deg, #241A12 0%, #3A2413 60%, #5A2E00 100%)}
.grant::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(120deg, rgba(255,255,255,.05) 0 1px, transparent 1px 70px);
}
.grant__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.grant__fig{
  flex:none;width:clamp(140px,15vw,200px);aspect-ratio:1;
  display:grid;place-content:center;text-align:center;border-radius:50%;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32);
}
.grant__fig span{
  font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:800;letter-spacing:-.045em;
}
.grant__h{font-size:clamp(1.7rem,3.1vw,2.7rem);margin:0 0 16px}
.grant__h em{font-style:normal;font-weight:300;color:rgba(255,255,255,.66)}
.grant__p{max-width:56ch;margin:0 0 24px;color:rgba(255,255,255,.9)}
@media (max-width:1320px){.grant > .wrap{padding-inline:calc(var(--gutter) - var(--inset))}}
@media (max-width:760px){.grant__in{grid-template-columns:1fr}}

/* ---- qualify checklist ---- */
.qualify{background:var(--cream);padding:clamp(64px,8vw,116px) 0;border-block:1px solid var(--line)}
.qlist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.qlist li{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px 22px;
}
.qlist__n{
  display:inline-grid;place-items:center;
  width:42px;height:42px;border-radius:50%;margin-bottom:16px;
  background:var(--o-100);color:var(--o-700);
  font-size:.85rem;font-weight:800;letter-spacing:-.02em;
}
.qlist p{margin:0;font-weight:600;font-size:.96rem;line-height:1.45;letter-spacing:-.012em}
.qualify__note{margin-top:28px;color:var(--slate);max-width:62ch;font-size:1.02rem}
@media (max-width:900px){.qlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.qlist{grid-template-columns:1fr}}

/* ---- radio chip groups inside calculators ---- */
.chips{border:0;padding:0;margin:0 0 20px;min-width:0}
/* the bill slider's scale labels need air before the first question */
.calc__field + .chips{margin-top:22px}
.chips legend{
  padding:0;margin-bottom:10px;
  font-size:.82rem;font-weight:700;color:var(--slate);
}
.chips label{display:inline-block;margin:0 6px 6px 0;cursor:pointer}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips span{
  display:inline-block;padding:9px 15px;border-radius:999px;
  background:var(--cream);border:1.5px solid var(--line);
  font-size:.82rem;font-weight:600;letter-spacing:-.01em;color:var(--slate);
  transition:background .2s linear, border-color .2s linear, color .2s linear;
}
.chips label:hover span{border-color:var(--o-400)}
.chips input:checked + span{background:var(--o-500);border-color:var(--o-500);color:var(--ink)}
.chips input:focus-visible + span{outline:3px solid var(--o-500);outline-offset:3px}

.field__help{margin:6px 0 0;font-size:.76rem;color:var(--slate-2);line-height:1.45}
.field textarea{
  width:100%;padding:14px 16px;font-family:inherit;font-size:.96rem;color:var(--ink);
  background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r-sm);
  resize:vertical;
}
.field textarea:focus{background:#fff;border-color:var(--o-500)}

/* ---- heat loss block ---- */
.hloss{padding:clamp(64px,8vw,116px) 0;background:var(--paper)}
.hloss__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(32px,4.6vw,72px);align-items:start;
}
@media (max-width:900px){.hloss__in{grid-template-columns:1fr;gap:36px}}

/* ---- case studies ---- */
.cases{padding:clamp(64px,8vw,116px) 0}
.cases__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.case{
  display:flex;flex-direction:column;
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--cream);border:1px solid var(--line);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.case:hover{transform:translateY(-5px);box-shadow:0 30px 60px -34px rgba(70,35,0,.4)}
.case__img{margin:0;overflow:hidden}
.case__img img{width:100%;aspect-ratio:4 / 3;object-fit:cover;transition:transform .7s var(--ease)}
.case:hover .case__img img{transform:scale(1.05)}
.case__body{display:flex;flex-direction:column;flex:1;padding:24px}
.case__loc{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--o-600);
}
.case__h{font-size:1.18rem;letter-spacing:-.024em;line-height:1.22;margin:0 0 10px}
.case__p{color:var(--slate);font-size:.92rem;line-height:1.55;margin:0 0 20px;flex:1}
.case__go{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--o-600);font-weight:700;font-size:.88rem;text-decoration:none;
}
.case__go .arw{width:26px;height:26px;background:var(--o-100)}
.case__go:hover{color:var(--o-700)}
@media (max-width:1000px){.cases__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cases__grid{grid-template-columns:1fr}}

/* ---- contact cards ---- */
.ccards{padding:clamp(56px,7vw,100px) 0;background:var(--cream);border-bottom:1px solid var(--line)}
.ccards__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.ccard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px);
}
.ccard__lab{
  margin:0 0 14px;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--o-600);
}
.ccard__big{
  display:block;margin-bottom:14px;
  font-size:1.42rem;font-weight:800;letter-spacing:-.032em;line-height:1.15;
  color:var(--ink);text-decoration:none;overflow-wrap:break-word;
}
a.ccard__big:hover{color:var(--o-600)}
.ccard__big--sm{font-size:1.02rem;line-height:1.45;letter-spacing:-.018em}
.ccard__p{margin:0;font-size:.86rem;line-height:1.55;color:var(--slate)}
.hours{margin-bottom:14px;display:flex;flex-direction:column;gap:7px}
.hours li{
  display:flex;justify-content:space-between;gap:12px;
  font-size:.88rem;font-weight:600;letter-spacing:-.01em;
}
.hours li span:last-child{color:var(--o-700)}
@media (max-width:1000px){.ccards__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ccards__grid{grid-template-columns:1fr}}

/* ---- legal pages ---- */
.lhero{
  margin-top:calc(var(--inset) - var(--hdr-h) - var(--hdr-pad));
  padding:calc(var(--hdr-h) + var(--hdr-pad) + clamp(40px,5vw,72px)) 0 clamp(34px,4vw,54px);
  background:var(--cream);border-bottom:1px solid var(--line);
}
.lhero .eyebrow{margin-top:0}
.lhero__h1{font-size:clamp(2.1rem,4vw,3.2rem);margin:0 0 16px}
.lhero__p{color:var(--slate);max-width:58ch;font-size:1.05rem;margin:0}
.hdr:not(.is-stuck) .lhero ~ * {}
/* the legal pages have a light hero, so the header needs dark type from the top */
body:has(.lhero) .hdr .nav a,
body:has(.lhero) .hdr .hdr__tel{color:var(--ink)}
body:has(.lhero) .hdr .logo--light{display:none}
body:has(.lhero) .hdr .logo--dark{display:block}
body:has(.lhero) .hdr .btn--solid{--bg:var(--o-500);--fg:var(--ink)}
body:has(.lhero) .hdr .burger{background:var(--o-100)}
body:has(.lhero) .hdr .burger span{background:var(--ink)}

.legal{padding:clamp(56px,7vw,100px) 0}
.legal__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);
  gap:clamp(32px,4.4vw,68px);align-items:start;
}
.legal__body h2{font-size:clamp(1.25rem,1.9vw,1.6rem);margin:34px 0 12px}
.legal__body h2:first-child{margin-top:0}
.legal__body p{color:var(--slate);max-width:64ch}
.legal__body a[href^="tel:"]{white-space:nowrap}
.legal__body a{color:var(--o-600);font-weight:600}
.legal__todo{
  margin:38px 0 0;padding:24px 26px;
  background:var(--o-100);border-radius:var(--r-md);
  border-left:5px solid var(--o-500);
}
.legal__todo h2{margin:0 0 8px;font-size:1.05rem;color:var(--o-700)}
.legal__todo p{margin:0;color:var(--slate);font-size:.94rem}
.legal__aside{
  background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(22px,2.4vw,30px);
  position:sticky;top:calc(var(--hdr-h) + 20px);
}
.legal__asideh{font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-2);margin:0 0 18px}
.legal__dl{margin:0 0 18px;display:grid;gap:12px}
.legal__dl dt{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2)}
.legal__dl dd{margin:3px 0 0;font-weight:600;font-size:.92rem;line-height:1.45;overflow-wrap:break-word}
.legal__dl a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--o-500);text-decoration-thickness:2px;text-underline-offset:3px}
.legal__asidep{margin:0;font-size:.78rem;line-height:1.55;color:var(--slate-2)}
@media (max-width:900px){
  .legal__in{grid-template-columns:1fr}
  .legal__aside{position:static}
}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--ink);color:rgba(255,255,255,.74);padding:clamp(60px,7vw,96px) 0 40px;font-size:.92rem}
.ftr__top{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,3fr);
  gap:clamp(32px,4vw,60px);
  padding-bottom:clamp(36px,4vw,54px);
}
.ftr__brand img{width:170px;margin-bottom:18px}
.ftr__tag{color:rgba(255,255,255,.56);font-size:.9rem;font-weight:300;max-width:24ch;margin-bottom:22px}
.social{display:flex;gap:10px}
.social a{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.08);
  transition:background .2s linear, transform .25s var(--ease);
}
.social svg{width:19px;height:19px;fill:#fff}
.social a:hover{background:var(--o-500);transform:translateY(-2px)}

/* the contact column carries the email and address, so it gets more room */
.ftr__cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.5fr);
  gap:clamp(16px,1.8vw,26px);
}
.ftr__contact{font-size:.88rem}
.ftr__col h3{
  font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;margin:0 0 16px;
}
.ftr__col ul{display:flex;flex-direction:column;gap:11px}
.ftr__col a{text-decoration:none;transition:color .2s linear}
.ftr__col a:hover{color:var(--o-300)}
.ftr__contact address{line-height:1.6;color:rgba(255,255,255,.6)}

/* full-width band across the bottom of the footer */
.news{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(22px,3vw,48px);align-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md);
  padding:clamp(22px,2.4vw,32px);
  margin-bottom:clamp(30px,3.4vw,44px);
}
.news__h{font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:-.026em;color:#fff;margin:0 0 8px}
.news__p{font-size:.88rem;color:rgba(255,255,255,.6);margin:0;line-height:1.5;max-width:44ch}
.news__fields{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:12px;align-items:end;
}
.news .field{margin-bottom:0}
.news .field label{color:rgba(255,255,255,.7)}
.news .field input{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff;
}
.news .field input:focus{background:rgba(255,255,255,.12);border-color:var(--o-400)}
.news .btn{white-space:nowrap}

/* form states, set by the HubSpot submit in app.js */
.field.is-bad input,.field.is-bad select{border-color:#C0392B;background:#FFF4F2}
.form__msg{margin:14px 0 0;font-size:.86rem;font-weight:600;line-height:1.45;color:var(--slate)}
.form__msg.is-err{color:#B42318}
.form__msg a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.form__msg:focus,.form__done:focus{outline:none}
.form__done p{margin:0;color:var(--slate);line-height:1.55}
.form__done a{color:var(--o-600);font-weight:700}
.btn[disabled]{opacity:.7;cursor:progress}
.news .form__msg{grid-column:1/-1;margin:0;color:#fff}
.news .form__msg.is-err{color:#FFB4A6}
.news .field.is-bad input{border-color:#FF8F7A;background:rgba(255,120,100,.08)}
.news__fields[hidden]{display:none}
.news__fields[hidden] + .form__msg{grid-column:auto;font-size:1rem}

/* ---------- cookie consent card (renewafuel-site.php), in the site's own card and pill style.
     Accept and reject are the same size and weight, side by side: refusing must be as easy as agreeing. ---------- */
.ck-bar{position:fixed;left:clamp(12px,2vw,28px);bottom:calc(clamp(12px,2vw,28px) + env(safe-area-inset-bottom));z-index:95;
  width:min(440px,calc(100% - 2*clamp(12px,2vw,28px)));background:#fff;color:rgba(36,26,18,.78);border-radius:28px;
  box-shadow:0 30px 70px -24px rgba(36,26,18,.5),0 0 0 1px rgba(36,26,18,.06);
  opacity:0;transform:translateY(24px);transition:transform .35s var(--ease),opacity .35s var(--ease)}
.ck-bar.ck-in{opacity:1;transform:none}
.ck-bar[hidden]{display:none}
.ck-inner{padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;gap:18px}
.ck-bar .ck-h{display:flex;align-items:center;gap:10px;font-size:1.06rem;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--ink);margin:0 0 8px}
.ck-bar .ck-h::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--o-500);flex:none}
.ck-txt p{font-size:.88rem;line-height:1.55;margin:0}
.ck-txt a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--o-500);text-decoration-thickness:2px;text-underline-offset:3px}
.ck-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ck-btn{font-family:inherit;font-size:.92rem;font-weight:700;letter-spacing:-.01em;padding:14px 12px;white-space:nowrap;border-radius:999px;cursor:pointer;border:0;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.ck-yes{background:var(--o-500);color:var(--ink)}
.ck-no{background:var(--ink);color:#fff}
.ck-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(29,35,34,.45)}
.ck-btn:focus-visible{outline:3px solid var(--o-500);outline-offset:3px}
@media (max-width:400px){.ck-acts{grid-template-columns:1fr}}
@media (max-width:720px){.ck-open .mbar{display:none}}

@media (max-width:900px){
  .news{grid-template-columns:1fr;gap:20px}
  .news__p{max-width:none}
}
@media (max-width:560px){
  .news__fields{grid-template-columns:1fr}
  .news .btn{width:100%;justify-content:center}
}

.ftr__legal{padding-top:30px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:18px}
.ftr__legal p{font-size:.74rem;line-height:1.62;color:rgba(255,255,255,.44);margin:0}
.ftr__policy{display:flex;flex-wrap:wrap;gap:8px 26px}
.ftr__policy a{font-size:.8rem;text-decoration:none;color:rgba(255,255,255,.62)}
.ftr__policy a:hover{color:var(--o-300)}

/* break the email on the @ rather than mid-word */
.ftr__contact a{overflow-wrap:break-word;hyphens:none}

@media (max-width:1180px){
  .ftr__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
}
@media (max-width:760px){
  .ftr__top{grid-template-columns:1fr}
}
@media (max-width:420px){
  .ftr__cols{grid-template-columns:1fr;gap:26px}
}

/* ============================================================
   TOUCH TAP TARGETS
   Standalone calls to action need ~44px of height on a phone.
   ============================================================ */
@media (hover:none) and (max-width:900px){
  .case__go,.tlink,.calc__alt,.utilbar__links a{
    min-height:44px;
    display:inline-flex;align-items:center;
  }
  .calc__alt{justify-content:center;text-align:center}
  .case__go{margin-top:2px}
  .ccard__big{min-height:44px;display:flex;align-items:center}
  .ccard__big--sm{display:block;min-height:0}
  address.ccard__big{display:block;min-height:0}
}

/* ============================================================
   MOBILE ACTION BAR
   ============================================================ */
.mbar{display:none}
@media (max-width:720px){
  .mbar{
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    display:grid;grid-template-columns:auto 1fr;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
  }
  .mbar a{
    display:flex;align-items:center;justify-content:center;gap:9px;
    padding:14px 20px;border-radius:999px;
    text-decoration:none;font-weight:700;font-size:.94rem;
  }
  .mbar__call{background:var(--o-100);color:#a83f00}
  .mbar__call svg{width:18px;height:18px;fill:currentColor}
  .mbar__book{background:var(--o-500);color:var(--ink)}
  body{padding-bottom:84px}
}

/* ============================================================
   REVEAL (guarded behind .js so content is never hidden without it)
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(26px)}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms !important;
  }
  /* kill the looping decoration outright rather than running it instantly,
     which would strobe on an infinite animation */
  .ticker__track,.js .chip,.hero__bg::before{animation:none !important}
  .js .reveal{opacity:1;transform:none}
  .tool,.tool:hover{transform:none}
}

/* ============================================================
   EDITOR STATIC PATH
   The engine adds class="static" to <html> in the visual editor. This design
   was built for the web, not PDF, so it has no static path of its own. Force
   every scroll-reveal element fully visible and freeze looping motion, so the
   client sees a clean, stable, fully-populated page to click and edit.
   Public visitors never get .static, so their animations are untouched.
   ============================================================ */
html.static .reveal{opacity:1 !important;transform:none !important;transition:none !important}
html.static .stat__bar::after{transform:scaleX(1) !important}
html.static .ticker__track{animation:none !important}
html.static .chip{animation:none !important;translate:none !important}
html.static .hero__bg::before{animation:none !important}
html.static .nav{display:flex !important}
/* Header must NOT follow the scroll in the editor — only the editor toolbar
   pins. Use `relative` (NOT static) so it still appears normally on load and
   keeps its stacking layer over the hero; it just no longer sticks on scroll. */
html.static .hdr{position:relative !important}
html.static .hdr .logo--light{display:block !important}
html.static .hdr .logo--dark{display:none !important}

/* ============================================================
   FORMAT-BAR HIGHLIGHT (client editor)
   The locked visual editor offers a highlight swatch (brief highlights[]).
   .hl is the orange brand highlight it wraps around selected text.
   ============================================================ */
.hl{background:var(--o-100,#FFE8D2);color:var(--o-700,#C74B02);padding:0 .12em;border-radius:.16em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ============================================================
   SINGLE CASE STUDY (plugin-rendered /case-studies/{slug}/)
   Reuses the site's .phero hero; this styles the body layout.
   ============================================================ */
.cs-main{padding:clamp(48px,6vw,96px) 0;background:var(--paper)}
.cs-main__in{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(32px,4vw,64px);align-items:start}
.cs-block{margin-bottom:clamp(32px,4vw,52px)}
.cs-block:last-child{margin-bottom:0}
.cs-h{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:18px}
.cs-prose{color:var(--slate);font-size:1.02rem;line-height:1.7}
.cs-prose p{margin:0 0 15px}
.cs-prose p:last-child{margin-bottom:0}
.cs-prose a{color:var(--o-600);text-decoration:underline;text-underline-offset:2px}
.cs-prose strong{color:var(--ink)}
.cs-gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:clamp(24px,3vw,36px) 0}
.cs-shot{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--line)}
.cs-shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4 / 3}
.cs-drops{display:flex;flex-direction:column;gap:12px}
.cs-drop{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--cream);overflow:hidden}
.cs-drop summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:700;color:var(--ink);position:relative}
.cs-drop summary::-webkit-details-marker{display:none}
.cs-drop summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--o-500);font-weight:400}
.cs-drop[open] summary::after{content:"\2212"}
.cs-drop .cs-prose{padding:0 20px 18px}
.cs-video{position:relative;padding-top:56.25%;border-radius:var(--r-md);overflow:hidden;background:#000}
.cs-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cs-review{margin:clamp(24px,3vw,36px) 0 0;padding:clamp(24px,3vw,34px);background:var(--ink);color:var(--cream);border-radius:var(--r-lg)}
.cs-review blockquote{margin:0;font-size:1.15rem;line-height:1.6;font-weight:500}
.cs-review .cs-stars{color:#FBAF3E;font-size:1.1rem;letter-spacing:2px;margin:0 0 12px}
.cs-review figcaption{margin-top:14px;color:rgba(255,246,236,.68);font-size:.92rem}
.cs-aside{position:sticky;top:104px;display:flex;flex-direction:column;gap:20px}
.cs-facts{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.cs-facts__h{font-size:1.05rem;font-weight:800;color:var(--ink);margin:0 0 16px}
.cs-facts dl{margin:0}
.cs-fact{padding:12px 0;border-top:1px solid var(--line)}
.cs-fact:first-child{border-top:0;padding-top:0}
.cs-fact dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--slate-2);font-weight:700;margin-bottom:4px}
.cs-fact dd{margin:0;color:var(--ink);font-weight:600;line-height:1.45}
.cs-supplier{margin-top:20px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 18px}
.cs-supplier img{display:block;max-width:150px;max-height:42px;width:auto;height:auto;object-fit:contain}
.cs-cta{background:linear-gradient(145deg,var(--o-600),var(--o-500));color:#fff;border-radius:var(--r-lg);padding:26px}
.cs-cta__h{font-size:1.15rem;font-weight:800;margin:0 0 8px}
.cs-cta__p{margin:0 0 18px;color:rgba(255,255,255,.9);font-size:.95rem;line-height:1.55}
.cs-cta .btn--solid{background:#fff;color:var(--o-700)}
.cs-cta__tel{display:block;text-align:center;margin-top:12px;color:#fff;font-weight:600;font-size:.92rem;text-decoration:none}
@media (max-width:900px){
  .cs-main__in{grid-template-columns:1fr;gap:32px}
  .cs-aside{position:static}
  .cs-gallery{grid-template-columns:1fr}
}

/* ============================================================
   ARROW FIX — small (26px) arrow contexts
   The base .arw shaft + chevron are tuned for the 30px circle; the smaller
   26px contexts only re-set the vertical offset, so the shaft overshot the
   chevron and the arrow read as broken. Scale the shaft width + chevron
   position to the smaller circle so the chevron sits at the shaft tip.
   ============================================================ */
.hdr__cta .btn .arw::before,.tlink .arw::before,.case__go .arw::before{left:8px;width:10px}
.hdr__cta .btn .arw::after,.tlink .arw::after,.case__go .arw::after{right:8px;width:6px;height:6px}

/* ============================================================
   CASE STUDY PREV / NEXT NAV (plugin single pages)
   ============================================================ */
.cs-nav{border-top:1px solid var(--line);background:var(--cream);padding:clamp(26px,4vw,44px) 0}
.cs-nav__in{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
.cs-nav__item{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);max-width:340px}
.cs-nav__prev{text-align:left;justify-self:start}
.cs-nav__next{text-align:right;justify-self:end;align-items:flex-end}
.cs-nav__dir{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:var(--o-600)}
.cs-nav__title{font-weight:700;font-size:1.02rem;line-height:1.35}
.cs-nav__item:hover .cs-nav__title{color:var(--o-600)}
.cs-nav__all{justify-self:center;color:var(--slate);font-weight:600;text-decoration:none;font-size:.92rem;white-space:nowrap}
.cs-nav__all:hover{color:var(--o-600)}
.cs-nav .arw{width:26px;height:26px;background:var(--o-100)}
.cs-nav .arw::before{left:8px;width:10px}
.cs-nav .arw::after{right:8px;width:6px;height:6px}
.arw--back{transform:scaleX(-1)}
@media (max-width:720px){
  .cs-nav__in{grid-template-columns:1fr;gap:20px;text-align:center}
  .cs-nav__prev,.cs-nav__next{text-align:center;align-items:center;justify-self:center;max-width:none}
  .cs-nav__dir{justify-content:center}
  .cs-nav__all{order:3}
}

/* ============================================================
   BLOCK-SECTION / FOOTER GAP
   The inset, rounded "card" sections (.hero/.tools/.guarantee/.tmoni) float on
   the page background. When one is the LAST section before the footer (e.g. the
   Contact page ends on .guarantee), its rounded base butted straight onto the
   dark footer. Give it a gap below so it reads as a floating card, not clipped.
   ============================================================ */
#main > .hero:last-child,
#main > .tools:last-child,
#main > .guarantee:last-child,
#main > .tmoni:last-child{margin-bottom:clamp(44px,6vw,90px)}

/* ============================================================
   FORMAT-BAR TEXT COLOURS (client editor)
   The "Colour" group in the editor wraps selected text in .tc .tc-<key>.
   These paint the words in the site palette (orange / rust / brown / white),
   distinct from the .hl highlight (which adds a background).
   ============================================================ */
.tc-orange{color:var(--o-500) !important}
.tc-rust{color:var(--o-700) !important}
.tc-ink{color:var(--ink) !important}
.tc-white{color:#fff !important}

/* ============================================================
   FINANCE + ACCREDITATIONS PAGES
   ============================================================ */

/* seven nav items no longer fit beside the phone number, so the header phone
   is its icon at every width (the number stays in the bar above) */
.hdr__tel{gap:0}
.hdr__tel span{display:none}

/* ticked list where each point is a bold lead line plus a sentence */
.blist--lead{gap:18px}
.blist--lead li{font-weight:400;font-size:1rem;letter-spacing:0}
.blist--lead li > div{display:flex;flex-direction:column;gap:3px}
.blist--lead strong{font-weight:700;letter-spacing:-.014em;color:var(--ink)}
.blist--lead span{color:var(--slate);line-height:1.55}

/* a split that sits on the cream ground, to break up two splits in a row */
.split--cream{background:var(--cream);border-block:1px solid var(--line)}

/* FCA band: the register link and number */
.grant__p a{color:#fff;font-weight:700;text-underline-offset:3px}
.grant__p strong{font-weight:800;letter-spacing:.01em}

/* Warm Homes Plan: the tools band with several paragraphs per card */
.whp .tool__p{flex:none;margin:0 0 14px}
.whp .tool__p:last-child{margin-bottom:0}
.whp__list{margin:2px 0 18px;display:flex;flex-direction:column;gap:10px}
.whp__list li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.88);
}
.whp__list li::before{
  content:'';flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:var(--o-500) var(--tick) center / 10px 10px no-repeat;
}
.whp__cta{
  margin-top:clamp(22px,2.6vw,32px);
  padding:clamp(24px,2.6vw,34px);
  border-radius:var(--r-md);
  background:linear-gradient(120deg, rgba(255,114,0,.16), rgba(255,255,255,.04) 70%);
  border:1px solid rgba(255,138,43,.32);
  display:flex;align-items:center;justify-content:space-between;
  gap:22px 40px;flex-wrap:wrap;
}
.whp__copy{flex:1 1 420px}
.whp__h{font-size:clamp(1.3rem,1.8vw,1.6rem);letter-spacing:-.024em;line-height:1.15;margin:0 0 8px}
.whp__copy p{margin:0;max-width:62ch;color:rgba(255,255,255,.74);font-size:.95rem}
.whp__acts,.survey__acts{display:flex;flex-wrap:wrap;gap:12px}

/* the second button on the cream survey band */
.btn--outline{
  --bg:transparent;--fg:var(--ink);
  box-shadow:inset 0 0 0 1.5px rgba(36,26,18,.3);
  padding-right:26px;
}
.btn--outline:hover{--bg:rgba(36,26,18,.04);box-shadow:inset 0 0 0 1.5px rgba(36,26,18,.6)}
.survey__acts{margin:28px 0 0}
.survey__copy .survey__fine{
  margin:34px 0 0;padding-top:20px;border-top:1px solid var(--line);
  max-width:60ch;font-size:.8rem;line-height:1.6;color:#6F5E52;
}
@media (max-width:620px){
  .whp__acts,.survey__acts{flex-direction:column;align-items:stretch}
  .whp__acts .btn,.survey__acts .btn{justify-content:space-between}
  .whp__acts .btn--ghost,.survey__acts .btn--outline{justify-content:center}
}

/* ---- accreditation cards ---- */
.acc{padding:clamp(64px,8vw,116px) 0}
.acc__list{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}
.acc__item{
  display:grid;
  grid-template-columns:clamp(150px,14vw,196px) minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(22px,3vw,44px);align-items:center;
  padding:clamp(20px,2.2vw,30px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 34px 70px -56px rgba(70,25,0,.5);
  transition:border-color .3s linear, box-shadow .3s var(--ease);
}
.acc__item:hover{border-color:#F6D3AE;box-shadow:0 34px 70px -46px rgba(70,25,0,.5)}
.acc__logo{
  aspect-ratio:4 / 3;display:grid;place-items:center;
  padding:16px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);
}
.acc__logo img{width:auto;max-width:100%;max-height:92px;object-fit:contain}
/* HIES card: HIES + Approved Code vertical lockup, as supplied (its own padding is the clear space) */
.acc__logo--lockup{aspect-ratio:auto;padding:6px}
.acc__logo--lockup img{max-height:none;width:100%}
.acc__badge{
  width:86px;height:86px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(140deg, #C74B02 0%, #FF7200 70%);
  color:#fff;font-size:1.3rem;font-weight:800;letter-spacing:-.03em;
  box-shadow:0 0 0 6px #fff, 0 16px 30px -16px rgba(199,75,2,.7);
}
.acc__h{font-size:clamp(1.3rem,1.9vw,1.68rem);letter-spacing:-.026em;line-height:1.08;margin:0 0 12px}
.acc__full{display:block;margin-top:6px;font-size:.94rem;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--slate)}
.acc__p{margin:0;color:var(--slate);font-size:.97rem;line-height:1.6}
.acc__means{
  align-self:stretch;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(18px,2vw,26px);border-radius:var(--r-md);
  background:#FFF1E3;
}
.acc__means p{margin:0;font-size:.96rem;line-height:1.55;color:var(--ink)}
.acc__means .acc__ml{
  margin:0 0 6px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#A23D00;
}
@media (max-width:980px){
  .acc__item{grid-template-columns:140px minmax(0,1fr);align-items:start}
  .acc__means{grid-column:1 / -1}
}
@media (max-width:560px){
  .acc__item{grid-template-columns:1fr;gap:18px}
  .acc__logo{width:150px}
}

/* ======================================================================
   Launch QA fixes, 11 Nov 2026 (qa-20261111). One block so it can be
   read, or taken out, in one place.
   ====================================================================== */

/* Contrast. Small orange text and the muted labels pass 4.5:1 on white and
   cream; the orange word in headings passes 3:1 as large text. */
:root{--slate-2:#6F5E52;--o-text:#B84400}
.eyebrow:not(.eyebrow--light),.case__loc,.ccard__lab,.calc__alt,.survey__tel a,
.legal__body a,.cs-prose a,.cs-nav__dir{color:var(--o-text)}
.qlist__n{color:var(--o-text)}
.shead__h em{color:var(--o-600)}
.shead--light .shead__h em{color:var(--o-300)}
.tmoni .shead__h em{color:rgba(255,255,255,.62)}
.chip--amber span{color:#4A2600}
.ticker{background:var(--o-600)}
.ticker__lab{color:var(--ink)}
.ftr__legal p{color:rgba(255,255,255,.52)}

/* No single word left alone on the last line. */
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}

/* Big numbers stay on one line. */
.stat__n{white-space:nowrap}

/* A case study with one gallery photo uses the full width. */
.cs-gallery:has(> :only-child){grid-template-columns:1fr}

/* Case study prev/next: both labels start at the top. */
.cs-nav__in{align-items:start}

/* Case study accordions: a marker you can see. */
.cs-drop summary{padding-right:52px}
.cs-drop summary::after{font-size:1.7rem;font-weight:600;line-height:1;color:var(--o-600)}

/* Burger menu: the current page stays orange once the header sticks. */
@media (max-width:1160px){
  .hdr.is-stuck .nav a[aria-current="page"]{color:var(--o-text)}
}

/* Heat-loss form: the copy stays beside the form while it scrolls. */
@media (min-width:901px){
  .hloss__in > :first-child{position:sticky;top:calc(var(--hdr-h, 80px) + 32px)}
}

/* Short laptop screens (1280x630 and the like): the hero buttons above the fold. */
@media (min-width:1000px) and (max-height:700px){
  .hero{padding-top:calc(var(--hdr-h) + var(--hdr-pad) + 10px)}
  .phero{padding-top:calc(var(--hdr-h) + var(--hdr-pad) + 18px);padding-bottom:40px}
}

/* Phones: button labels on one line, footer links big enough to tap. */
@media (max-width:420px){
  .btn{padding-left:20px;padding-right:14px;gap:10px;font-size:.9rem;letter-spacing:-.02em}
  .btn--lg{padding-left:22px;font-size:.94rem}
  .btn:not(.vid__btn){white-space:nowrap}
  .phero .btn:not(.vid__btn){white-space:normal} /* long page-hero labels wrap; the arrow stays inside */
  .ftr__col ul{gap:2px}
  .ftr__col a{display:inline-block;padding:6px 0}
}

/* Phones: the footer runs down behind the fixed call bar instead of leaving
   a strip of white page between them. */
@media (max-width:720px){
  body{padding-bottom:0}
  .ftr{padding-bottom:calc(40px + 84px + env(safe-area-inset-bottom))}
  .ck-open .ftr{padding-bottom:40px}
}

/* Case study cards: when one location line runs to two lines, the titles in
   that row still line up (each card shares the row's grid lines). */
@supports (grid-template-rows:subgrid){
  .case{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
  .case__body{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .case__loc{align-self:end}
}

/* Blog: the /blog/ cards and a single post (renewafuel-blog.php). Logos and
   graphics are shown whole; a post with no photo shows the logo. */
.case__img--contain img{object-fit:contain;background:#fff}
.case__img--none{background:var(--cream);display:grid;place-items:center;aspect-ratio:4 / 3}
.case__img--none img{width:58%;aspect-ratio:auto;object-fit:contain;opacity:.55}
.case:hover .case__img--none img{transform:none}
.shot--contain img{object-fit:contain;background:#fff}
.post-hero .phero__h1{font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.04;text-wrap:balance}
.post-hero .phero__lede{font-size:1.05rem;font-weight:600}
.post-prose h2{font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.25;letter-spacing:-.02em;color:var(--ink);margin:0 0 16px}
.post-prose h3{font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.3;color:var(--ink);margin:34px 0 10px}
.post-prose h4,.post-prose h5{font-size:1.02rem;color:var(--ink);margin:26px 0 8px}
.post-prose h2:not(:first-child){margin-top:40px}
.post-prose ul,.post-prose ol{margin:0 0 18px;padding-left:1.3em}
.post-prose li{margin:0 0 6px}
.post-prose li::marker{color:var(--o-500)}
.post-prose img{max-width:100%;height:auto;display:block;border-radius:var(--r-md,18px)}
.post-prose p:has(> img:only-child){margin:28px 0 12px}
.post-prose img.post-logo{border-radius:0;width:auto;max-height:70px}
.post-prose blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid var(--o-500);color:var(--ink);font-weight:600}
.post-prose .post-cta{margin-top:26px}
.post-prose .post-cta a{display:inline-flex;align-items:center;padding:14px 24px;border-radius:999px;background:var(--o-500);color:var(--ink);font-weight:700;text-decoration:none;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.post-prose .post-cta a:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(29,35,34,.45)}
.post-prose img.post-badge{width:auto;max-width:min(100%,380px);border-radius:12px}
.post-prose ul{list-style:disc}.post-prose ol{list-style:decimal}

/* ======== Rebuilt old-site pages (11 Nov 2026): EV charging, funding, testimonials, rewards, towns ======== */

/* ---- service ---- */
/* ============================================================
   SERVICE PAGES: EV CHARGING + FUNDING
   Classes are prefixed svc-. Everything else on these pages is the
   site's own (.phero, .split, .grant, .tools, .steps, .qualify,
   .case, .cs-drop, .survey).
   ============================================================ */

/* links inside body copy on a light ground. --o-700 is 4.43:1 on cream
   and --o-600 (.cs-prose a) is lower, so these take a shade darker to
   clear 4.5:1 (5.2:1 on cream) */
:root{--svc-link:color-mix(in srgb, var(--o-700) 90%, #000)}
.svc-rich a{color:var(--svc-link);font-weight:600;text-underline-offset:3px}
.svc-rich a:hover{color:var(--ink)}
.svc-rich a[href^="tel:"]{white-space:nowrap}

/* EV hero: the portrait driveway photo, cropped to the car and the two men
   (beats the phone rule that anchors hero photos to the top) */
.phero__media .shot.svc-hero-shot img{object-position:50% 74%}

/* "Eco+": the site font draws + as a tiny raised dot, so the plus
   takes a system face */
.svc-plus{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:700;margin-left:.03em}

/* a sub-heading inside a split's copy */
.split__copy .svc-h3{
  font-size:clamp(1.12rem,1.5vw,1.3rem);letter-spacing:-.022em;line-height:1.24;
  margin:30px 0 10px;
}

/* a paragraph straight after a tick list */
.split__copy .blist + p{margin-top:24px}
.split__copy .svc-h3 + .blist{margin-top:16px}

/* buttons under split copy and under the app cards */
.svc-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,36px)}

/* charging modes: the video sits between the header and the three cards */
.svc-vid{margin:0 0 clamp(22px,2.6vw,32px)}
.svc-vid video{display:block;width:100%;aspect-ratio:16 / 9;background:#000}
.svc-vid .vid__play{top:50%}
.svc-vid .vid__btn img{opacity:.92}

/* FAQ: heading left, questions right (the town pages' layout, on white) */
.svc-faq{padding:clamp(70px,9vw,132px) 0;border-top:1px solid var(--line)}
.svc-faq__in{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(34px,5vw,78px);align-items:start;
}
.svc-faq__head{margin:0;position:sticky;top:calc(var(--hdr-h) + 28px)}
.svc-faq__head .shead__p{margin-bottom:24px}
.svc-faq .cs-drop summary{padding-right:52px;line-height:1.35;letter-spacing:-.012em}
.svc-faq .cs-prose{font-size:.98rem}
/* the toggle: Anybody draws + and minus as tiny dots, so they take a system face */
.svc-faq .cs-drop summary::after{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:1.5rem;font-weight:500}
@media (max-width:900px){
  .svc-faq__in{grid-template-columns:minmax(0,1fr)}
  .svc-faq__head{position:static}
}

/* related cards: a white band after the cream survey */
.svc-more{border-top:1px solid var(--line)}

@media (max-width:620px){
  .svc-acts{flex-direction:column;align-items:stretch}
  .svc-acts .btn{justify-content:space-between}
}

/* ============================================================
   PROOF PAGES: /testimonials/ and /rewards/ (refer a friend)
   Only what styles.css doesn't already have. Site tokens only.
   ============================================================ */

/* ---- testimonials: Nick & Sue, two up then three up ---- */
.tm-vids{padding:clamp(64px,8vw,116px) 0}
.tm-vids__head{margin-bottom:clamp(30px,3.6vw,52px)}
.tm-vids__grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);
}
.tm-vids__grid > .vid{grid-column:span 2}
.tm-vids__grid > .vid:nth-child(-n+2){grid-column:span 3}
@media (max-width:880px){
  .tm-vids__grid{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}
  .tm-vids__grid > .vid,
  .tm-vids__grid > .vid:nth-child(-n+2){grid-column:auto}
}

/* ---- testimonials: written reviews, each beside a photo of that install ---- */
.tm-revs{
  background:var(--cream);border-block:1px solid var(--line);
  padding:clamp(70px,9vw,132px) 0;
}
.tm-revs__head .shead__p{margin-bottom:24px}
.tm-rev{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(32px,4.6vw,76px);align-items:center;
}
.tm-rev + .tm-rev{
  margin-top:clamp(56px,7vw,104px);padding-top:clamp(56px,7vw,104px);
  border-top:1px solid var(--line);
}
.tm-rev--rev{grid-template-columns:minmax(0,.86fr) minmax(0,1fr)}
.tm-rev--rev .tm-rev__media{order:-1}
.tm-rev__h{
  font-size:clamp(1.3rem,1.9vw,1.65rem);letter-spacing:-.024em;line-height:1.15;
  margin:0 0 16px;color:var(--ink);
}
.tm-rev__fig{margin:0}
.tm-rev__stars{
  margin:0 0 14px;color:var(--o-600);
  font-size:1.2rem;font-weight:800;letter-spacing:3px;line-height:1;
}
.tm-rev__q{margin:0}
.tm-rev__q p{
  margin:0 0 14px;max-width:60ch;
  color:var(--ink);font-size:clamp(1rem,1.05vw,1.08rem);line-height:1.66;
}
.tm-rev__q p:last-child{margin-bottom:0}
.tm-rev__by{
  display:flex;flex-direction:column;gap:3px;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
}
.tm-rev__by strong{font-size:1.02rem;font-weight:800;letter-spacing:-.016em;color:var(--ink)}
.tm-rev__by span{font-size:.92rem;color:var(--slate-2,#6F5E52)}
.tm-rev__by a{color:var(--o-text,#B84400);font-weight:700;text-underline-offset:3px}
.tm-rev__copy .case__go{margin-top:22px;color:var(--o-text,#B84400)}
.tm-rev__media .shot img{aspect-ratio:4 / 3.3}
@media (max-width:900px){
  .tm-rev,.tm-rev--rev{grid-template-columns:minmax(0,1fr);gap:28px}
  .tm-rev__media,.tm-rev--rev .tm-rev__media{order:-1}
  .tm-rev__media .shot img{aspect-ratio:16 / 10}
}

/* ---- rewards: hero ---- */
.phero__sub.raf-hero__p1{margin-bottom:14px}

/* ---- rewards: the reward in numbers ---- */
.raf-stats__head{margin-bottom:clamp(34px,4vw,56px)}
.raf-stats__head .shead__p{margin:0}
.raf-stats .stats__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.raf-stats h3.stat__t{font-size:1.12rem;line-height:1.25;letter-spacing:-.02em}
@media (max-width:760px){.raf-stats .stats__grid{grid-template-columns:minmax(0,1fr)}}

/* ---- rewards: how the scheme works ---- */
.raf-steps .shead__p{max-width:680px}

/* ---- rewards: questions (same layout as the town pages' FAQs) ---- */
.raf-faq{padding:clamp(70px,9vw,132px) 0}
.raf-faq__in{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(34px,5vw,78px);align-items:start;
}
.raf-faq__head{margin:0;position:sticky;top:calc(var(--hdr-h) + 28px)}
.raf-faq__head .shead__h{margin-bottom:24px}
.raf-faq .cs-drop summary{padding-right:52px;line-height:1.35;letter-spacing:-.012em}
.raf-faq .cs-prose{font-size:.98rem}
@media (max-width:900px){
  .raf-faq__in{grid-template-columns:minmax(0,1fr)}
  .raf-faq__head{position:static}
}

/* ---- rewards: closing band sits clear of the footer ---- */
.raf-refer{margin-bottom:clamp(56px,7vw,104px)}

/* ---- towns ---- */
/* ============================================================
   TOWN PAGES (Sheffield, Rotherham, Worksop, Doncaster) + LOCATIONS HUB
   Built from the site's own pieces: .phero, .accred, .split, .cases/.case,
   .svc-band--cream, .cs-drop and .survey. Only the extras below are twn-.
   ============================================================ */

/* hero: town headings run long, so the H1 sits a step below the service pages */
.phero .phero__h1{text-wrap:balance}
.twn-phero .phero__h1{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1;margin-bottom:18px}
.twn-phero .phero__lede{text-wrap:balance}
.twn-phero .phero__sub{max-width:52ch}
@media (max-width:400px){.twn-phero .phero__h1{font-size:2rem}}

/* card rows (services, recent installs, counties, town pages): the site's
   .cases grid; services, counties and towns run four across */
.twn-row .shead{max-width:760px}
.twn-grid4 .cases__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.svc-band--cream.twn-row .case{background:#fff}
.twn-row .case__p,.twn-survey .survey__pts li{text-wrap:balance}
@media (max-width:1100px){.twn-grid4 .cases__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.twn-grid4 .cases__grid{grid-template-columns:minmax(0,1fr)}}

/* place links inside a county card */
.twn-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.twn-pills:last-child{margin-bottom:0}
.twn-pills a{
  display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;
  background:var(--o-100);color:var(--ink);
  font-size:.88rem;font-weight:700;letter-spacing:-.01em;text-decoration:none;
  transition:background .25s linear;
}
.twn-pills a:hover{background:var(--o-500)}

/* FAQs: heading left, questions right, on cream */
.twn-faq{padding:clamp(70px,9vw,132px) 0;background:var(--cream);border-top:1px solid var(--line)}
.twn-faq .cs-drop{background:#fff}
.twn-faq__in{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(34px,5vw,78px);align-items:start;
}
.twn-faq__head{margin:0;position:sticky;top:calc(var(--hdr-h) + 28px)}
.twn-faq__head .shead__p{margin-bottom:24px}
.twn-faq__head a:not(.btn){color:var(--ink);text-decoration-color:var(--o-500);text-decoration-thickness:2px}
.twn-faq__head a:not(.btn):hover{color:var(--o-700)}
.twn-faq .cs-drop summary{padding-right:52px;line-height:1.35;letter-spacing:-.012em}
.twn-faq .cs-prose{font-size:.98rem}
/* quick answers: always open, the question is an H3, above the accordion */
.twn-qa{display:flex;flex-direction:column;gap:12px}
.twn-qa__item{background:#fff;border:1px solid var(--line);border-left:3px solid var(--o-500);border-radius:var(--r-sm);padding:22px 24px 20px}
.twn-qa__q{font-size:1.18rem;line-height:1.25;letter-spacing:-.022em;color:var(--ink);margin:0 0 10px}
.twn-faq .twn-qa__a{padding:0}
.twn-faq__more{display:flex;align-items:center;gap:9px;margin:36px 0 14px;font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
@media (max-width:900px){
  .twn-faq__in{grid-template-columns:minmax(0,1fr)}
  .twn-faq__head{position:static}
}
@media (max-width:620px){.twn-qa__item{padding:18px 18px 16px}}

/* the survey follows a cream band, so it goes white */
.twn-survey{background:#fff}

/* ---- site-wide fixes (11 Nov 2026) ---- */
/* Phones: the stacked .shot frame is 16:9, so the photo inside is too. Before this the
   photo kept its desktop ratio and its bottom was clipped off by the frame. Anchored
   to the top so the crop matches what the pages showed before. */
@media (max-width:980px){
  .phero__media .shot img,.split__media .shot img{aspect-ratio:16 / 9;object-position:50% 0}
}
/* Case card label and link: --o-600 on cream was 3.3:1, --o-text is 5.1:1 */
.case__loc,.case__go{color:var(--o-text)}
.case__go:hover{color:var(--ink)}

/* Live QA round: no one-word last lines in headings or copy, and on the EV and
   funding pages the photo sits at the top of a tall block of copy (and stays in
   view while it scrolls) instead of floating in the middle of a gap */
.shead__h,.phero__h1,.case__loc,.svc-h3{text-wrap:balance}
p,li{text-wrap:pretty}
.cc-page-ev-charging .split__in,.cc-page-funding .split__in{align-items:start}
@media (min-width:901px){
  .cc-page-ev-charging .split__media,.cc-page-funding .split__media{position:sticky;top:calc(var(--hdr-h) + 24px)}
}

/* /case-studies/: the cards follow the logo strip directly, so don't stack a second full section padding */
.cc-page-case-studies .accred + .cases{padding-top:clamp(20px,2.4vw,36px)}

/* ---- live QA round 3 (11 Nov 2026) ---- */
/* FAQ questions and answers are bare text, so the p rules never reach them */
.cs-drop summary{text-wrap:balance}
.cs-drop .cs-prose{text-wrap:pretty}
.survey__pts li,.qlist p{text-wrap:balance}
/* case study titles: what we fitted, small, over the town, big */
.cs-h1__svc{display:block;font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.2;letter-spacing:-.015em;margin:0 0 .3em;text-wrap:balance}
.cs-h1__town{display:block}
.cs-h1__sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* small phones: long grid content and long headings must not push the page sideways */
.cs-body,.cs-aside,.calc__copy,.calc__panel{min-width:0}
@media (max-width:400px){
  .post-hero .phero__h1{font-size:min(2rem,8.5vw)}
  .twn-row .shead__h{font-size:min(2.1rem,8.8vw)}
}
/* live QA round 4: short lines that must not strand a word */
.cs-hero .phero__lede,.cs-fact dd,.install__cap strong,.blist li{text-wrap:balance}
.twn-qa__a,.cs-review blockquote{text-wrap:pretty}
.post-prose a[href*="gov.uk"],.post-prose a[href^="mailto:"]{white-space:nowrap}
.svc-faq .cs-drop summary::after{font-family:inherit;font-size:1.7rem;font-weight:600}
@media (max-width:400px){
  .vid__play{width:48px;height:48px;top:30%}
  .vid__play::after{border-left-width:13px;border-top-width:8px;border-bottom-width:8px}
  .vid__meta{padding:28px 16px 14px}
  .cs-hero .phero__lede{font-size:min(1.3rem,5.6vw)}
  .routes .shead__h{font-size:min(2.1rem,8.6vw)}
}
@media (max-width:340px){
  .btn--lg,.tm-revs__tp{padding:15px 12px 15px 16px;font-size:.84rem}
}
/* home hero below 360: the headline lines are nowrap, so size them to the screen and let the column shrink */
.hero__copy,.hero__media{min-width:0}
@media (max-width:359px){.hero__h1{font-size:11.6vw}}

/* live QA round 5 */
.shead__p,.case__p{text-wrap:balance}
@media (max-width:340px){ .cs-h1__town{font-size:11vw} .tm-revs__tp{padding:15px 10px 15px 14px;font-size:.78rem} .cs-review blockquote{font-size:17px} }
@media (max-width:340px){ .cc-page-funding .phero__h1{font-size:10.8vw} .twn-phero .phero__h1{font-size:min(2rem,9.4vw)} .tm-rev__h{font-size:min(1.3rem,6.3vw)} }