/* ============================================================
   TLECC — design system per DESIGN.md
   Brand owns colour + type. Custo/T1 own layout + feel.
   ============================================================ */

:root{
  /* Colours */
  --ink:#0A0A0A; --ink-2:#1A1A1A; --ink-3:#3A3A3A;
  --paper:#FFFFFF; --paper-2:#F4F7FB; --paper-3:#E9EFF7;
  --line:#E0E6EF;
  --blue-deep:#1E4D8B; --blue:#2B7DC4; --blue-light:#5DADE2; --blue-pale:#DCEAF7;
  --text:#1F2937; --muted:#5B6577; --green:#2DBC73; --wa:#25D366;

  /* Dark bands (Decision 49). Previously four hardcoded copies of
     linear-gradient(160deg,#0A0F1A,#0A0A0A) — cool at one end, dying into
     neutral black at the other, which read muddy rather than deliberate.
     Now one token, cool the whole way through: --blue-deep taken right down,
     so the dark bands sit in the same hue family as the brand blue. */
  --ink-deep:#0A1524; --ink-deep-2:#0C2036;
  --grad-dark:linear-gradient(160deg,var(--ink-deep-2) 0%,var(--ink-deep) 60%);

  /* Fonts — single family (Decision 50). IBM Plex Mono retired: it was
     deployed on 26 separate elements (every kicker, label, table header,
     footer heading and the stat numerals), and that texture is what read as
     "different fonts fighting" rather than the face count. Small-label roles
     now use Plex Sans uppercase + tracking instead. */
  --font-display:'IBM Plex Sans',sans-serif;
  --font-body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --font-label:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;

  /* Type scale (DESIGN.md v2) */
  --text-caption:.8125rem; --text-body:1rem; --text-subheading:1.25rem;
  --text-heading-sm:1.875rem; --text-heading:2.375rem;

  /* Spacing — single section rhythm (Decision 51, supersedes Decision 17).
     The two-tier 110/72 system was meant to create pacing by alternating
     dense and open sections. In practice varying the gap is what made the
     scroll read inconsistent. Band colour does the pacing now; the gap
     stays constant. Both tokens kept (rather than deleting .minor sitewide)
     so existing markup is untouched — they just resolve to the same value. */
  --gap-major:96px; --gap-minor:96px;
  --section-gap:var(--gap-major);
  --spacing-8:8px; --spacing-12:12px; --spacing-16:16px; --spacing-20:20px;
  --spacing-24:24px; --spacing-32:32px; --spacing-40:40px; --spacing-48:48px;
  --page-max:1240px;

  /* Radius — consolidated (Decision 52). Was 10/12/14/20/48 + pill, which
     put 48px photo corners next to 14px card corners inside the same
     section. Now four steps that visibly relate to each other, and buttons
     go fully pill. */
  --radius:20px; --radius-lg:28px; --radius-sm:12px;
  --radius-input:12px; --radius-button:999px; --radius-pill:999px;
  --radius-photo:28px;
  --radius-blog-img:6px; /* blog imagery reads cleaner near-square (client, 16 Sep) — not applied to service/case photography */

  /* Shadow */
  --shadow-sm:0 1px 2px rgba(10,10,10,.06),0 1px 1px rgba(10,10,10,.04);
  --shadow:0 22px 50px -22px rgba(10,10,10,.30),0 6px 14px -6px rgba(10,10,10,.10);
  --shadow-bar:0 -6px 20px -8px rgba(10,10,10,.14);

  /* Motion (DESIGN.md v2) */
  --ease-out-soft:cubic-bezier(.16,.84,.44,1);
  --dur-reveal:560ms; --dur-bar:220ms; --dur-accordion:320ms;
  --dur-hover:180ms; --dur-press:140ms; --dur-panel:160ms; --dur-step:200ms;
  --stagger:70ms;

  /* Component sizes */
  --sticky-bar-height:64px; --promise-strip-height:56px;
}

@media (max-width:860px){
  :root{ --gap-major:56px; --gap-minor:56px; }
}

*,*::before,*::after{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;overflow-x:clip;width:100%}
body{
  font-family:var(--font-body);color:var(--text);background:var(--paper);
  line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.15;text-wrap:balance}
p{margin:0}

.wrap{max-width:var(--page-max);margin:0 auto;padding-left:clamp(1.2rem,3vw,2rem);padding-right:clamp(1.2rem,3vw,2rem)}

/* ---------- floating pill nav (T1) ---------- */
.nav-shell{position:sticky;top:14px;z-index:100;padding:0 clamp(.8rem,2vw,1.4rem)}
.nav{
  max-width:var(--page-max);margin:0 auto;background:var(--ink);
  border-radius:16px;display:flex;align-items:center;gap:1rem;
  padding:.6rem .7rem .6rem .6rem;
}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo img{height:44px;width:auto;background:var(--paper);border-radius:8px;padding:3px 8px}
.nav-links{display:flex;gap:.15rem;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav-links a{
  color:#C5CCD9;font-size:.9rem;padding:.5rem .75rem;border-radius:8px;transition:.15s;
}
.nav-links a:hover{color:var(--paper);background:var(--ink-2)}
.nav-links a.active{color:var(--paper)}
.nav-links a.nav-cta{
  background:var(--blue-light);color:var(--ink);font-weight:600;font-size:.9rem;
  padding:.6rem 1.1rem;border-radius:var(--radius-button);
  transition:.15s;margin-left:.4rem;white-space:nowrap;
}
.nav-links a.nav-cta:hover{color:var(--ink);background:var(--blue-light);transform:translateY(-1px)}
.nav-burger{display:none;background:none;border:0;color:var(--paper);padding:.5rem;margin-left:auto}
@media (max-width:940px){
  .nav-links{
    display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;
    background:var(--ink);border-radius:16px;flex-direction:column;
    align-items:stretch;padding:.8rem;gap:.2rem;
  }
  .nav{position:relative}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:.7rem 1rem}
  .nav-cta{margin:.4rem 0 0}
  .nav-burger{display:block}
}

/* ---------- kicker: mono label + 4px blue square (T1) ---------- */
.kicker{
  font-family:var(--font-label);font-weight:500;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);display:flex;align-items:center;gap:.55rem;
  margin-bottom:1.1rem;
}
.kicker::before{content:"";width:4px;height:4px;background:var(--blue);flex-shrink:0}
.kicker.on-dark{color:#8fa3bd}

/* social embed — Instagram's own oEmbed widget styles itself (fixed white
   card, its own shadow), so this just centres and constrains it rather than
   fighting its inline styles */
.social-embed{display:flex;flex-direction:column;align-items:center;text-align:center}
.social-embed .instagram-media{margin-left:auto !important;margin-right:auto !important}

/* ---------- sections ---------- */
.section{padding:var(--gap-major) 0}
.section.minor{padding:var(--gap-minor) 0}
.section-divider{border-top:1px solid var(--line)}
.section.tint.section-divider{border-bottom:1px solid var(--line)}
.section.tint{background:var(--paper-2)}
.section.bluetint{background:linear-gradient(180deg,var(--blue-pale) 0%,var(--paper-2) 100%)}
.section.dark{background:var(--grad-dark);color:#C5CCD9}
.section.dark h2,.section.dark h3{color:var(--paper)}
.section.dark .lede{color:#C5CCD9}
.section.photo{position:relative;color:#C5CCD9;overflow:hidden}
.section.photo .photo-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.section.photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,10,18,.94) 0%,rgba(7,10,18,.82) 55%,rgba(30,77,139,.55) 100%);
}
.section.photo .wrap{position:relative;z-index:2}
.section.photo h2{color:var(--paper)}
.section.photo .lede{color:#D3DAE6}

/* two-column text block (Custo) */
.twocol{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
@media (max-width:800px){.twocol{grid-template-columns:1fr}}

.h-display{font-size:clamp(2.2rem,4.6vw,3.8rem);letter-spacing:-.035em;line-height:1.05}
.h-lg{font-size:clamp(1.9rem,3.2vw,2.4rem)}
.h-md{font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.25}
.lede{font-size:1.1rem;color:var(--muted);max-width:58ch}
.section.dark .lede{color:#C5CCD9}

/* ---------- hero ---------- */
.hero{
  background:var(--grad-dark);
  color:var(--paper);position:relative;overflow:hidden;
  padding:clamp(64px,8vw,120px) 0 clamp(64px,7vw,100px);
  margin-top:-72px;padding-top:calc(clamp(64px,8vw,120px) + 72px);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(40% 60% at 90% 10%,rgba(93,173,226,.16),transparent 60%),
    radial-gradient(50% 40% at 0% 90%,rgba(30,77,139,.2),transparent 60%);
}
.hero .wrap{position:relative;z-index:2}

/* full-bleed ambient photo background — sits behind the hero content, with a
   dark scrim (::after) for text legibility over moving imagery */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg .hero-cf-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;animation:heroCrossfade 40s ease-in-out infinite;
}
/* first (LCP) hero image — set in CSS, not inline, so the mobile media query
   below can swap in a 960px-wide variant instead of shipping the 1920px one
   to phones. This is the page's LCP element, so its weight dominates mobile LCP. */
/* Frame 1 is a real <img>, not a background-image (Decision 54). A CSS
   background can't be preloaded or given fetchpriority, so the browser only
   discovers the LCP element after CSS parses. As a real element it's
   discoverable in the initial HTML scan, preloadable, and can carry srcset
   so phones get the 960px file instead of the 1920px one. */
.hero-bg .hero-cf-1{opacity:1;animation-name:heroCrossfadeFirst}
.hero-bg .hero-cf-1 img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.hero-bg .hero-cf-img:nth-child(2){animation-delay:8s}
.hero-bg .hero-cf-img:nth-child(3){animation-delay:16s}
.hero-bg .hero-cf-img:nth-child(4){animation-delay:24s}
.hero-bg .hero-cf-img:nth-child(5){animation-delay:32s}
@media (max-width:700px){
  /* on a narrow crop, "center" cuts off the subject in both source photos —
     nudge toward where the person/action actually sits in each frame */
  .hero-bg .hero-cf-img{background-position:22% center}
  .hero-bg .hero-cf-1 img{object-position:22% center}
  .hero-bg .hero-cf-img:nth-child(2){background-position:72% center}
  .hero-bg .hero-cf-img:nth-child(3){background-position:center 25%}
  .hero-bg .hero-cf-img:nth-child(4){background-position:center 30%}
  .hero-bg .hero-cf-img:nth-child(5){background-position:15% center}
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,rgba(7,10,18,.94) 0%,rgba(7,10,18,.86) 45%,rgba(10,15,26,.7) 100%);
}
.hero h1{color:var(--paper);font-size:clamp(2.4rem,5.2vw,4.2rem);letter-spacing:-.035em;line-height:1.02;max-width:20ch;font-weight:600}
.hero h1 .hi{color:var(--blue)}
.hero .sub{color:#C5CCD9;font-size:1.08rem;margin-top:1.4rem;max-width:56ch}
.hero .sub strong{color:var(--paper);font-weight:600}
.hero-ctas{display:flex;gap:.9rem;margin-top:2.2rem;flex-wrap:wrap;align-items:center}

/* hero grid w/ photo */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,4vw,4rem);align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
.hero-photo{border-radius:var(--radius-photo);overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* ambient photo crossfade keyframes — slow, continuous rotation with a gentle
   zoom. Not a carousel: no arrows, no dots, no discrete user-facing slides, nothing
   to click or navigate. Purely a quiet "this place is alive" effect. Used by
   .hero-bg (full-bleed hero background, see below). */
@keyframes heroCrossfade{
  0%{opacity:0;transform:scale(1.04)}
  8%{opacity:1}
  42%{opacity:1;transform:scale(1.12)}
  50%{opacity:0;transform:scale(1.12)}
  100%{opacity:0;transform:scale(1.04)}
}
/* First frame starts VISIBLE (Decision 54). It previously shared the curve
   above, which opens at opacity:0 and doesn't reach 1 until 8% of a 40s
   loop — i.e. the LCP element was deliberately invisible for the first 3.2
   seconds. No amount of image compression can beat that floor; this was the
   dominant cause of the 5.0s mobile LCP, not file weight. Same shape as the
   original, just phase-shifted so it opens at 1 and loops back seamlessly. */
@keyframes heroCrossfadeFirst{
  0%{opacity:1;transform:scale(1.04)}
  42%{opacity:1;transform:scale(1.12)}
  50%{opacity:0;transform:scale(1.12)}
  92%{opacity:0;transform:scale(1.04)}
  100%{opacity:1;transform:scale(1.04)}
}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:clamp(2.4rem,4vw,3.6rem)}
@media (max-width:800px){.stats{grid-template-columns:repeat(2,1fr)}}
/* Stat numerals sit on the display face at 700, not the label face. They were
   the one place mono was doing real damage: the headline numbers were the
   lightest, most incidental-looking type on the page. */
.stat b{display:block;font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.4rem);color:var(--paper);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.stat span{font-size:.85rem;color:#8fa3bd}
.section .stat b{color:var(--ink)}
.section .stat span{color:var(--muted)}

/* ---------- buttons ----------
   Pill + circular icon chip (Decision 53), structure borrowed from
   freedom-energy.co.uk: asymmetric padding (generous on the label side, tight
   on the chip side) so the chip sits flush inside the pill rather than
   floating in the middle of it. The chip is a CSS ::after, so the arrow is
   NOT in the markup — literal "→" was stripped from button text sitewide.
   Deliberate deviation from the reference: label stays 1rem sentence case
   rather than 12px uppercase, which reads friendlier for a domestic trade
   audience than it does for their commercial-energy one. */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;border:0;font-weight:600;
  font-size:1rem;padding:.85rem 1.7rem;border-radius:var(--radius-button);
  transition:background var(--dur-hover) var(--ease-out-soft),
             color var(--dur-hover) var(--ease-out-soft),
             transform var(--dur-hover) var(--ease-out-soft);
  font-family:var(--font-body);
}
.btn-primary{
  background:var(--blue-light);color:var(--ink);
  padding:.55rem .55rem .55rem 1.5rem;gap:.85rem;
}
.btn-primary:not(.btn-plain)::after{
  content:"";flex-shrink:0;width:34px;height:34px;border-radius:50%;
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/17px no-repeat;
  transition:transform var(--dur-hover) var(--ease-out-soft);
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary:not(.btn-plain):hover::after{transform:translateX(3px)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}
/* opt-out for primaries where a forward arrow would be wrong (cookie accept,
   postcode check, 404 back-to-home) — pill stays, chip and its asymmetric
   padding do not */
.btn-primary.btn-plain{padding:.85rem 1.7rem;gap:.5rem}
/* on dark bands the chip inverts so it doesn't disappear into the band */
.hero .btn-primary::after,.cta-band .btn-primary::after,
.section.dark .btn-primary::after,.page-hero .btn-primary::after{
  background-color:var(--blue-deep);
}
.btn-ghost{
  background:transparent;border:1.5px solid var(--ink);color:var(--ink);
  border-radius:var(--radius-pill);font-weight:500;
}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-ghost.on-dark{border-color:var(--paper);color:var(--paper)}
.btn-ghost.on-dark:hover{background:var(--paper);color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{transform:translateY(-1px)}

/* accreditation strip */
.accred{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.4rem 0;background:var(--paper)}
.accred .wrap{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap;justify-content:space-between}
.accred-label{font-family:var(--font-label);font-weight:500;font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.accred-items{display:flex;gap:clamp(1.4rem,3vw,2.6rem);flex-wrap:wrap;align-items:center}
.accred-items span{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:.95rem}
.accred-items img{height:28px;width:auto;object-fit:contain}
.accred-items img.tall{height:34px}
.accred-items img.gas-safe{height:38px}

/* ---------- cards ---------- */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.4rem,2.4vw,1.8rem);box-shadow:var(--shadow-sm);
}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
@media (max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* service tile */
/* service card image — angular blue backing plate sits behind a slightly
   rotated photo, so the card reads as a composed object rather than a
   photo with a caption (Decision 48). Needs light, tidy photography to
   work: a dark image sits ON the shape instead of floating above it. */
.svc-img{
  position:relative;display:grid;place-items:center;
  aspect-ratio:4/3;margin:0 0 .9rem;overflow:visible;
}
.svc-img::before{
  content:"";position:absolute;inset:11% 7% 7% 11%;
  background:var(--blue);border-radius:var(--radius-sm);
  transform:rotate(-6deg);transition:transform var(--dur-hover) var(--ease-out-soft);
}
.svc-img picture{position:relative;width:85%;display:block}
.svc-img img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;
  box-shadow:0 14px 30px -14px rgba(10,10,10,.45);
  transform:rotate(1.5deg);transition:transform var(--dur-hover) var(--ease-out-soft);
}
a.svc:hover .svc-img img{transform:rotate(0deg) scale(1.03)}
a.svc:hover .svc-img::before{transform:rotate(-9deg)}
.svc{display:flex;flex-direction:column;gap:.6rem;transition:.18s;position:relative}
a.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue-light)}
.svc-num{font-family:var(--font-label);font-weight:500;font-size:.78rem;color:var(--blue-deep);letter-spacing:.08em}
.svc h2,.svc h3{font-size:1.25rem;font-weight:600}
.svc p{color:var(--muted);font-size:.94rem;flex:1}
.svc-more{font-size:.9rem;font-weight:600;color:var(--blue-deep);display:inline-flex;align-items:center;gap:.35rem}

/* why list */
.why{display:grid;gap:0}
.why-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:1.2rem;padding:1.4rem 0;border-top:1px dashed var(--line);align-items:baseline}
.why-row:last-child{border-bottom:1px dashed var(--line)}
.why-num{font-family:var(--font-label);font-weight:500;color:var(--blue-deep);font-size:.9rem}
.why-row b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--ink);margin-bottom:.25rem}
.why-row p{color:var(--muted);font-size:.95rem;max-width:60ch}

/* process steps — numbered flow with real photos per step (Decision 44) */
.process-flow{display:flex;align-items:flex-start;gap:1.4rem}
@media (max-width:820px){.process-flow{flex-direction:column;align-items:stretch}}

.process-step{flex:1;min-width:0}
.process-step-text{padding-top:.2rem}
.process-num{
  font-family:var(--font-display);font-weight:700;font-size:2.6rem;line-height:1;
  color:var(--blue);display:block;margin-bottom:.5rem;letter-spacing:-.02em;
}
.process-photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;margin-bottom:.9rem;background:var(--paper-2)}
.process-photo img{width:100%;height:100%;object-fit:cover}
.process-num.on-photo{
  position:absolute;top:.7rem;left:.7rem;margin:0;color:var(--paper);
  text-shadow:0 2px 10px rgba(10,10,10,.55);font-size:2.1rem;z-index:2;
}
.process-step b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--ink);margin-bottom:.35rem}
.process-step p{color:var(--muted);font-size:.92rem}

.process-arrow{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--blue-pale);
  color:var(--blue-deep);display:flex;align-items:center;justify-content:center;
  margin-top:1.4rem;
}
.process-arrow svg{width:16px;height:16px}
@media (max-width:820px){.process-arrow{display:none}}

/* testimonial — authentic Google review card format */
.quote-card{display:flex;flex-direction:column;gap:.9rem}
.quote-stars{color:var(--green);letter-spacing:.12em;font-size:1.05rem}
.quote-card blockquote{margin:0;font-size:.97rem;color:var(--text);flex:1}
.quote-who{display:flex;align-items:center;gap:.8rem}
.quote-ava{
  width:40px;height:40px;border-radius:50%;background:var(--blue-pale);color:#FFFFFF;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;flex-shrink:0;
}
.quote-who b{display:block;font-size:.92rem;color:var(--ink)}
.quote-clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.quote-clamp.expanded{display:block;overflow:visible}
.quote-toggle{background:none;border:0;color:var(--blue);font-weight:600;font-size:.85rem;padding:0;margin-top:.5rem;text-align:left;cursor:pointer;align-self:flex-start}
.quote-card{position:relative}
.quote-foot{margin-top:auto}
.quote-who span{font-size:.8rem;color:var(--muted)}

/* Google-format specifics: gold stars (matches the real Google Reviews widget —
   a deliberate, scoped exception to the site's green-star rule, since authenticity
   of the embedded-review format is the point here) + Google "G" mark */
.quote-stars.google{color:#FBBC04}
.quote-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.2rem}
.google-g{width:18px;height:18px;flex-shrink:0}

/* "Verified" pill on Google reviews — these are real reviews carried in the page's
   Review schema, so the claim is factual, not decorative */
.verified-badge{
  display:inline-flex;align-items:center;gap:.28rem;font-family:var(--font-body);
  font-size:.68rem;font-weight:600;letter-spacing:.01em;color:var(--blue-deep);
  background:var(--blue-pale);padding:.16rem .45rem .16rem .38rem;
  border-radius:var(--radius-pill);margin-left:.45rem;white-space:nowrap;
  vertical-align:middle;
}
.verified-badge svg{width:11px;height:11px;flex-shrink:0}
.quote-who b{display:flex;align-items:center;flex-wrap:wrap}

/* ---------- scroll-driven motion (Decision 47) ----------
   Photos ease from slightly over-scaled and dimmed to full size as they travel
   up through the viewport, so the page feels alive while scrolling rather than
   just fading blocks in. Pure progressive enhancement: gated behind @supports,
   so browsers without native scroll-driven animation keep the existing
   IntersectionObserver .rv reveal and lose nothing. No JS, no library. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes photoRise{
      from{transform:scale(1.055) translateY(16px);opacity:.7}
      to{transform:scale(1) translateY(0);opacity:1}
    }
    .case-photo picture,.process-photo picture,
    .svc-img picture,.ba-figure picture{
      display:block;animation:photoRise linear both;
      animation-timeline:view();animation-range:entry 8% cover 40%;
    }
    /* section headings drift up a touch as their band scrolls through */
    @keyframes headingRise{
      from{transform:translateY(18px)}
      to{transform:translateY(0)}
    }
    .twocol > div > .h-lg{
      animation:headingRise linear both;
      animation-timeline:view();animation-range:entry 5% cover 30%;
    }
  }
}

/* ---------- hover feedback (Decision 46) ----------
   Every photo and card the cursor can land on gives a small, consistent
   "you're on this" response: the container lifts, the image inside eases up
   in scale. Same easing/duration tokens as the existing .svc card hover so
   the whole page reacts in one language. */
.case-photo,.process-photo,.hero-photo,.ba-figure{overflow:hidden}
.case-photo img,.process-photo img,.hero-photo img,.ba-figure img{
  transition:transform var(--dur-hover) var(--ease-out-soft);
}
.case-photo:hover img,.process-photo:hover img,
.hero-photo:hover img,.ba-figure:hover img{transform:scale(1.045)}

/* .card.quote-card (0,2,0) deliberately outspecifies the later .rv rule (0,1,0),
   which would otherwise clobber this transition list and leave hover un-eased.
   opacity stays on the slow reveal duration so the scroll-in fade is unchanged. */
.card.quote-card{
  transition:opacity var(--dur-reveal) var(--ease-out-soft),
             transform var(--dur-hover) var(--ease-out-soft),
             box-shadow var(--dur-hover) var(--ease-out-soft),
             border-color var(--dur-hover) var(--ease-out-soft);
}
.quote-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue-light)}
.case:hover .case-photo,.process-step:hover .process-photo{box-shadow:var(--shadow)}
.process-photo,.case-photo{transition:box-shadow var(--dur-hover) var(--ease-out-soft)}

/* case study */
.case{display:flex;flex-direction:column;gap:.7rem}
.case-tags{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.case-tag{
  font-family:var(--font-label);font-weight:500;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  background:var(--blue-pale);color:var(--blue-deep);padding:.25rem .6rem;border-radius:6px;
}
.case-loc{font-family:var(--font-label);font-weight:500;font-size:.78rem;color:var(--muted)}
.case h2,.case h3{font-size:1.3rem;font-weight:600}
.case p{color:var(--muted);font-size:.95rem;flex:1}
.case-meta{
  display:flex;gap:1rem;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:.9rem;
  font-family:var(--font-label);font-weight:500;font-size:.78rem;color:var(--ink-3);
}
.case-photo{border-radius:var(--radius-photo);overflow:hidden;margin-bottom:.4rem}
.case-photo img{width:100%;aspect-ratio:16/10;object-fit:cover}
.grid-3:has(.case){align-items:start}

/* areas chips */
.areas{display:flex;gap:.6rem;flex-wrap:wrap}
.areas span{
  border:1.5px solid var(--line);border-radius:var(--radius-pill);
  padding:.5rem 1.1rem;font-size:.92rem;color:var(--ink-3);background:var(--paper);transition:.15s;
}
.areas span:hover{border-color:var(--blue);color:var(--blue-deep);background:var(--blue-pale)}

/* ---------- accordion (T1 — FAQ only) ---------- */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{
  width:100%;background:none;border:0;display:flex;align-items:center;justify-content:space-between;
  gap:1.4rem;padding:1.5rem .2rem;text-align:left;
}
.acc-head h3{font-size:clamp(1.1rem,1.8vw,1.3rem);font-weight:500;color:var(--ink)}
.acc-q{font-family:var(--font-label);font-weight:500;font-size:.78rem;color:var(--blue-deep);margin-right:.4rem}
.acc-icon{
  width:40px;height:40px;border-radius:var(--radius-pill);border:1.5px solid var(--ink);
  background:var(--paper);display:grid;place-items:center;flex-shrink:0;
  font-size:1.2rem;line-height:1;color:var(--ink);transition:.18s;font-family:var(--font-body);
}
.acc-head:hover .acc-icon{border-color:var(--blue);color:var(--blue)}
.acc-item.open .acc-icon{background:var(--blue-deep);border-color:var(--blue-deep);color:var(--paper)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc-body p{color:var(--muted);font-size:.98rem;max-width:72ch;padding:0 .2rem 1.6rem}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--grad-dark);color:#C5CCD9;
  border-radius:var(--radius-lg);padding:clamp(2.4rem,5vw,4rem);position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(45% 70% at 92% 8%,rgba(93,173,226,.18),transparent 60%);
}
.cta-band>*{position:relative}
.cta-band h2{color:var(--paper)}
.cta-list{display:flex;gap:1.4rem;flex-wrap:wrap;margin:1.4rem 0 1.8rem;padding:0;list-style:none}
.cta-list li{display:flex;align-items:center;gap:.45rem;font-size:.92rem}
.cta-list li::before{content:"✓";color:var(--green);font-weight:700}
.cta-sub{font-size:.9rem;color:#8fa3bd;margin-top:1.2rem}
.cta-sub a{color:var(--blue);font-weight:600}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{font-size:.8rem;font-family:var(--font-label);text-transform:uppercase;letter-spacing:.08em;color:var(--ink);font-weight:500}
.field input,.field select,.field textarea{
  font:inherit;font-family:var(--font-body);font-size:1.05rem;
  border:1.5px solid var(--line);border-radius:var(--radius-input);padding:.95rem 1.05rem;
  background:var(--paper);color:var(--ink);outline:none;transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 4px rgba(43,125,196,.15);
}
.field textarea{resize:vertical;min-height:120px;font-size:1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}

/* option cards */
.options{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
@media (max-width:560px){.options{grid-template-columns:1fr}}
.opt{
  position:relative;border:1.5px solid var(--line);border-radius:var(--radius-input);
  padding:1rem 1.1rem;cursor:pointer;background:var(--paper);transition:.15s;
  display:flex;flex-direction:column;gap:.25rem;
}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt b{display:block;color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:1rem}
.opt span{color:var(--muted);font-size:.85rem}
.opt:hover{border-color:var(--blue-light);background:var(--paper-2)}
.opt.sel{border-color:var(--blue);background:var(--blue-pale);box-shadow:0 0 0 2px rgba(43,125,196,.15)}
.opt.sel::after{
  content:"✓";position:absolute;top:.7rem;right:.9rem;width:22px;height:22px;
  background:var(--blue);color:var(--paper);border-radius:50%;
  display:grid;place-items:center;font-size:.8rem;font-weight:700;
}

/* quote form specifics */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.q-card{background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:clamp(1.4rem,3vw,2.4rem)}
.q-error{display:none;background:var(--paper-3);border:1px solid var(--blue-pale);color:var(--ink);border-radius:var(--radius-input);padding:.9rem 1.1rem;margin-bottom:1.2rem;font-size:.92rem}
.q-error.show{display:block}
.btn[disabled]{opacity:.6;pointer-events:none}
.progress{height:8px;background:var(--paper-3);border-radius:var(--radius-pill);overflow:hidden;margin-bottom:1.8rem}
.progress-fill{height:100%;background:var(--green);width:14%;border-radius:var(--radius-pill);transition:width .35s cubic-bezier(.4,0,.2,1)}
.step-label{font-family:var(--font-label);font-weight:500;font-size:.78rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;text-align:center;margin-bottom:1.6rem}
.step-label b{color:var(--ink);font-weight:600}
.fstep{display:none}
.fstep.active{display:block;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fstep h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin-bottom:.6rem;font-weight:600}
.fstep .help{color:var(--muted);font-size:.95rem;margin-bottom:1.4rem;max-width:50ch}
.step-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.8rem;gap:.8rem}
.btn-back{background:transparent;border:0;color:var(--muted);font-weight:500;padding:.8rem 1rem;border-radius:8px}
.btn-back:hover{color:var(--ink)}

.q-stage{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);
  gap:clamp(1rem,2vw,1.8rem);align-items:start;margin-top:-90px;position:relative;z-index:5;
}
@media (max-width:1000px){.q-stage{grid-template-columns:1fr;margin-top:-70px}}
.sidepanels{display:flex;flex-direction:column;gap:1.2rem}
@media (max-width:1000px){.sidepanels{flex-direction:row;flex-wrap:wrap}.sidepanels .card{flex:1;min-width:280px}}
.panel-row{display:flex;gap:.9rem;align-items:flex-start;padding:.5rem 0}
.panel-row + .panel-row{border-top:1px dashed var(--line)}
.panel-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--blue-pale);color:var(--blue-deep);display:grid;place-items:center;flex-shrink:0;font-weight:700}
.panel-row b{display:block;color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:.98rem;margin-bottom:.15rem}
.panel-row span{color:var(--muted);font-size:.86rem;line-height:1.45}
.trust-pill{
  display:inline-block;background:var(--green);color:var(--paper);
  font-family:var(--font-display);font-weight:700;font-size:.78rem;
  letter-spacing:.04em;padding:.35rem .75rem;border-radius:6px;margin-bottom:1rem;
}
.trust-stars{color:var(--green);font-size:1.6rem;letter-spacing:.15em;margin-bottom:.4rem}
.trust-cap{font-size:.88rem;color:var(--ink-2);font-weight:500}

.success-card{text-align:center;padding:clamp(2rem,4vw,3rem)}
.success-icon{
  width:74px;height:74px;border-radius:50%;background:var(--green);color:var(--paper);
  display:grid;place-items:center;margin:0 auto 1.2rem;box-shadow:0 0 0 8px rgba(45,188,115,.15);
  font-size:2rem;
}
.success-card h2{font-size:1.9rem;margin-bottom:.6rem;font-weight:600}
.success-card p{color:var(--muted);max-width:48ch;margin:0 auto 1.5rem}
.success-meta{
  display:inline-grid;grid-template-columns:auto auto;gap:.5rem 1.5rem;
  background:var(--paper-2);border-radius:var(--radius-input);padding:1rem 1.4rem;text-align:left;
}
.success-meta dt{font-family:var(--font-label);font-weight:500;font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.success-meta dd{margin:0;font-weight:500;color:var(--ink)}

/* contact page */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-rows{display:grid;gap:0}
.contact-row{padding:1.1rem 0;border-top:1px dashed var(--line)}
.contact-row:last-child{border-bottom:1px dashed var(--line)}
.contact-row dt{font-family:var(--font-label);font-weight:500;font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.25rem}
.contact-row dd{margin:0;font-size:1.05rem;color:var(--ink);font-weight:500}
.contact-row dd a:hover{color:var(--blue)}

/* service page proof list */
.proof-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.proof-list li{display:flex;gap:.8rem;align-items:flex-start;color:var(--text);font-size:.98rem}
.proof-list li::before{
  content:"✓";flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:var(--blue-pale);color:var(--blue-deep);display:grid;place-items:center;
  font-size:.8rem;font-weight:700;margin-top:.1rem;
}

/* breadcrumb-ish page hero for inner pages */
.page-hero{
  background:var(--grad-dark);color:var(--paper);
  padding:clamp(48px,6vw,72px) 0 clamp(48px,6vw,72px);position:relative;overflow:hidden;
  margin-top:-72px;padding-top:calc(clamp(48px,6vw,72px) + 86px);
}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 60% at 90% 10%,rgba(93,173,226,.15),transparent 60%);
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{color:var(--paper);font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.03em;max-width:24ch;font-weight:600}
.page-hero .sub{color:#C5CCD9;margin-top:1.1rem;max-width:60ch;font-size:1.05rem}

/* ---------- comparison tables (guide/article pages) ---------- */
.tablewrap{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--line);border-radius:var(--radius)}
.compare-table{border-collapse:collapse;width:100%;min-width:480px;font-size:.92rem}
.compare-table th,.compare-table td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.compare-table thead th{font-family:var(--font-label);font-weight:500;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:var(--paper-2)}
.compare-table tbody tr:last-child td{border-bottom:none}
.compare-table tbody td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}

/* ---------- legal content pages ---------- */
.legal-content{max-width:74ch;padding:clamp(2.5rem,5vw,3.5rem) 0}
.legal-content h2{font-size:1.3rem;margin-top:2.4rem}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{font-size:1.05rem;margin-top:1.6rem}
.legal-content p{color:var(--text);margin-top:.9rem;line-height:1.7}
.legal-content ul{color:var(--text);margin-top:.9rem;line-height:1.7;padding-left:1.3rem}
.legal-content li{margin-top:.4rem}
.legal-content .legal-updated{color:var(--muted);font-size:.85rem;font-family:var(--font-label);font-weight:500}
.legal-content a{color:var(--blue)}

/* ---------- blog ---------- */
.key-takeaways{background:var(--paper-2);border-left:3px solid var(--blue);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:1.5rem 1.7rem;margin:2rem 0}
.key-takeaways .kt-label{font-family:var(--font-label);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--blue-deep);font-weight:600}
.key-takeaways ul{margin:.8rem 0 0;padding-left:1.2rem;color:var(--text);line-height:1.65}
.key-takeaways li{margin-top:.55rem}
.key-takeaways li:first-child{margin-top:0}
.blog-hero-photo{border-radius:var(--radius-blog-img);overflow:hidden;max-width:900px;margin:0 auto}
.blog-hero-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.blog-byline{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;color:var(--muted);font-family:var(--font-label);font-weight:500;font-size:.8rem;margin-top:1.1rem}
.legal-content .blog-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.blog-tags .case-tag{margin-top:0}
.blog-card{padding:0;overflow:hidden;border-radius:var(--radius-sm)}
.blog-card .case-photo{position:relative;margin-bottom:0;border-radius:0}
.blog-card .case-photo img{border-radius:0}
.blog-date-badge{position:absolute;top:14px;right:14px;z-index:2;background:var(--blue-deep);color:var(--paper);border-radius:var(--radius-sm);padding:.5rem .75rem;text-align:center;line-height:1.15;box-shadow:var(--shadow-sm)}
.blog-date-badge .bd-day{display:block;font-family:var(--font-display);font-size:1.25rem;font-weight:700}
.blog-date-badge .bd-month{display:block;font-family:var(--font-label);font-weight:500;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;opacity:.9}
.blog-card-body{padding:1.5rem clamp(1.1rem,2vw,1.5rem) 1.7rem}
.blog-cat{display:inline-flex;align-items:center;gap:.4rem;color:var(--blue-deep);font-family:var(--font-label);font-weight:500;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
.blog-cat svg{width:14px;height:14px;flex-shrink:0}
.blog-card h3{font-size:1.15rem;margin-top:.8rem;line-height:1.35}
.blog-card p{color:var(--muted);margin-top:.5rem;font-size:.95rem;line-height:1.6}
.blog-read-more{display:inline-flex;align-items:center;justify-content:center;margin-top:1.3rem;padding:.62rem 1.35rem;border:1.5px solid var(--ink);border-radius:var(--radius-pill);font-weight:600;font-size:.86rem;color:var(--ink);transition:background var(--dur-hover) var(--ease-out-soft),color var(--dur-hover) var(--ease-out-soft)}
.blog-card:hover .blog-read-more{background:var(--ink);color:var(--paper)}
.blog-related{font-family:var(--font-label);font-weight:500;font-size:.85rem;color:var(--muted);margin:1.6rem 0;padding-left:1rem;border-left:2px solid var(--blue-pale)}
.blog-related a{color:var(--blue)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--paper);padding:clamp(2.5rem,5vw,4rem) 0 2rem;margin-top:var(--section-gap)}
footer.flush{margin-top:0}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-brand img{height:52px;width:auto;margin-bottom:1rem}
.foot-brand p{color:var(--muted);font-size:.9rem;max-width:34ch}
.foot-col .foot-h{font-family:var(--font-label);font-size:.74rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:1rem}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot-col a{color:var(--ink-3);font-size:.92rem}
.foot-col a:hover{color:var(--blue)}
.foot-bottom{
  border-top:1px solid var(--line);margin-top:2.5rem;padding-top:1.4rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  color:var(--muted);font-size:.82rem;
}
.foot-bottom .mono{font-family:var(--font-label);font-weight:500;letter-spacing:.04em}
.foot-legal{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line);display:flex;gap:.5rem;flex-wrap:wrap;font-size:.82rem}
.foot-legal a{color:var(--muted)}
.foot-legal a:hover{color:var(--blue)}
.foot-legal .sep{color:var(--muted);opacity:.5}

/* ---------- cookie consent banner ---------- */
.cookie-banner{display:none;position:fixed;left:0;right:0;bottom:0;z-index:250;background:var(--ink);padding:1rem 1.2rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom));box-shadow:0 -2px 16px rgba(0,0,0,.2)}
.cookie-banner.show{display:block}
.cookie-banner-inner{max-width:var(--page-max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.cookie-banner p{margin:0;font-size:.85rem;line-height:1.5;color:var(--paper-2);max-width:64ch}
.cookie-banner p a{color:var(--paper);text-decoration:underline}
.cookie-banner-actions{display:flex;gap:.6rem;flex-shrink:0}
.cookie-banner-actions .btn{padding:.55rem 1.1rem;font-size:.85rem;box-shadow:none}
.cookie-banner-actions .btn-ghost{border-color:rgba(255,255,255,.35);color:var(--paper)}
@media (max-width:860px){.cookie-banner{bottom:var(--sticky-bar-height)}}

/* ---------- WhatsApp floating button ---------- */
/* Desktop only ≥861px — below that the sticky bar absorbs WhatsApp (Decision 22) */
.wa-fab{
  position:fixed;right:18px;bottom:18px;z-index:200;
  width:58px;height:58px;border-radius:50%;
  background:var(--wa);color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 24px -6px rgba(10,10,10,.35),0 2px 6px rgba(10,10,10,.2);
  transition:transform var(--dur-hover);
}
.wa-fab:hover{transform:scale(1.08)}
.wa-fab svg{width:32px;height:32px}
@media (max-width:860px){.wa-fab{display:none}}

/* ---------- quiet statement (pattern 7 — the pacing device) ---------- */
.quiet-statement{text-align:center;max-width:44ch;margin:0 auto}
.quiet-statement h2{font-size:clamp(1.6rem,2.8vw,2.1rem)}
.quiet-statement p{color:var(--muted);margin-top:.9rem;font-size:1.05rem}

/* ---------- desktop header phone (nav) ---------- */
.nav-phone{
  display:none;align-items:center;gap:.4rem;font-family:var(--font-label);font-weight:500;font-size:.86rem;
  color:rgba(255,255,255,.85);padding:.5rem .6rem;white-space:nowrap;transition:color var(--dur-hover);
}
.nav-phone svg{width:15px;height:15px;flex-shrink:0}
.nav-phone:hover{color:var(--paper)}
@media (min-width:1024px){.nav-phone{display:inline-flex}}

/* ---------- services mega-panel (Good Energy pattern, desktop only) ---------- */
.nav-services{position:relative}
.mega-panel{
  position:absolute;top:calc(100% + 8px);left:0;min-width:560px;
  background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:1.5rem;display:none;grid-template-columns:1fr 1fr;gap:.4rem 1.5rem;z-index:50;
  opacity:0;transform:translateY(6px);transition:opacity var(--dur-panel),transform var(--dur-panel);
}
.mega-panel.open{display:grid;opacity:1;transform:none}
.mega-item{padding:.7rem .6rem;border-radius:var(--radius-sm);transition:background var(--dur-hover)}
.mega-item:hover,.mega-item:focus-visible{background:var(--paper-2)}
.mega-item b{display:block;color:var(--ink);font-weight:600;font-size:.98rem;font-family:var(--font-body)}
.mega-item span{display:block;color:var(--muted);font-size:.84rem;margin-top:.15rem}
@media (max-width:1023px){.mega-panel{display:none !important}}

/* ---------- promise strip (trust repetition, exactly twice per page) ---------- */
.promise-strip{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  min-height:var(--promise-strip-height);display:flex;align-items:center;
  overflow-x:auto;scrollbar-width:none;
}
.promise-strip::-webkit-scrollbar{display:none}
.promise-strip .wrap{
  display:flex;align-items:center;gap:0;white-space:nowrap;
  font-family:var(--font-label);font-weight:500;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);justify-content:center;min-width:max-content;margin:0 auto;
}
.promise-strip .wrap>span{padding:.9rem 0}
.promise-strip .sep{color:var(--line);margin:0 .75rem}
@media (max-width:640px){
  .promise-strip{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
  .promise-strip .wrap{justify-content:flex-start;padding-left:1.2rem;padding-right:2.5rem}
}

/* ---------- review strip (compact, three fixed placements) ---------- */
.review-strip{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.92rem}
.review-strip .stars{color:#FBBC04;letter-spacing:.1em;font-size:1rem}
.review-strip .rating{font-family:var(--font-label);color:var(--ink);font-weight:500}
.review-strip .sources{color:var(--muted);font-size:.85rem}
.section.dark .review-strip .rating,.hero .review-strip .rating,.cta-band .review-strip .rating{color:var(--paper)}
.section.dark .review-strip .sources,.hero .review-strip .sources,.cta-band .review-strip .sources{color:#B7C2D6}

/* ---------- service quick-link chips (hero) ---------- */
.quick-links-label{font-size:.84rem;color:#9fb0c7;margin-bottom:.6rem}

/* hero trust logos — real platform logos instead of a text summary line */
.trust-logos{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.trust-google{display:flex;align-items:center;gap:.5rem}
.trust-google .stars.gold{color:#FBBC04;font-size:.9rem;letter-spacing:.04em}
.trust-google .g-word{font-family:var(--font-display);font-weight:700;font-size:1.15rem}
.trust-logo-img{height:20px;width:auto;object-fit:contain}
@media (max-width:640px){.trust-logos{gap:1.1rem}.trust-logo-img{height:17px}}
.quick-links{display:flex;gap:.55rem;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.quick-links::-webkit-scrollbar{display:none}
.quick-links a{
  flex-shrink:0;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-pill);
  padding:.5rem .9rem;font-size:.82rem;color:rgba(255,255,255,.9);
  transition:border-color var(--dur-hover),color var(--dur-hover),transform var(--dur-hover);white-space:nowrap;
}
.quick-links a:hover{border-color:var(--paper);color:var(--paper);transform:translateY(-1px)}
@media (max-width:640px){
  .quick-links{-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,#000 90%,transparent 100%)}
  /* mobile hero was carrying too much before any real content — the same 8
     services are one tap away via the nav's Services menu, so drop this
     row on small screens rather than shrinking it illegibly */
  .hero-quicklinks{display:none}
}

/* ---------- postcode checker ---------- */
.postcode-check{max-width:420px}
.postcode-form{display:flex;gap:.6rem}
.postcode-form input{
  flex:1;font:inherit;font-family:var(--font-body);font-size:1rem;
  border:1.5px solid var(--line);border-radius:var(--radius-input);padding:.85rem 1rem;
  background:var(--paper);color:var(--ink);outline:none;transition:border-color var(--dur-hover);
}
.postcode-form input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(43,125,196,.15)}
.postcode-result{margin-top:.9rem;font-size:.95rem;display:none}
.postcode-result.show{display:block}
.postcode-result.match{color:var(--green);font-weight:600}
.postcode-result .btn{margin-top:.8rem}

/* ---------- before / after pair ---------- */
.before-after{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-24)}
@media (max-width:620px){.before-after{grid-template-columns:1fr}}
.ba-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.ba-label{font-family:var(--font-label);font-weight:500;font-size:.8125rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.6rem;display:block}

/* ---------- question heading + lead answer block (AI-SEO structure) ---------- */
.qa-block{max-width:62ch}
.qa-block h2{font-size:var(--text-heading-sm);max-width:24ch}
.qa-block .lead-answer{font-size:var(--text-subheading);color:var(--text);line-height:1.45;margin-top:var(--spacing-16)}
.qa-block .support{font-size:var(--text-body);color:var(--muted);margin-top:var(--spacing-16)}

/* ---------- sticky mobile action bar (≤860px only) ---------- */
.sticky-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;
  height:var(--sticky-bar-height);padding-bottom:env(safe-area-inset-bottom);
  background:var(--paper);border-top:1px solid var(--line);box-shadow:var(--shadow-bar);
  transform:translateY(100%);transition:transform var(--dur-bar) ease-out;
}
.sticky-bar.show{transform:translateY(0)}
@media (max-width:860px){.sticky-bar{display:flex}}
.sticky-bar-inner{display:flex;height:var(--sticky-bar-height);width:100%}
.sticky-bar a{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.86rem;font-weight:600}
.sb-call{color:var(--ink);flex:0 0 auto;padding:0 1rem;border-right:1px solid var(--line)}
.sb-wa{color:var(--ink);flex:0 0 auto;padding:0 1rem;border-right:1px solid var(--line)}
.sb-wa svg{width:18px;height:18px;color:var(--wa)}
.sb-call svg{width:16px;height:16px}
.sb-quote{flex:1 1 auto;background:var(--blue-light);color:var(--ink)}
body.has-sticky-bar{padding-bottom:var(--sticky-bar-height)}
@media (min-width:861px){body.has-sticky-bar{padding-bottom:0}}

/* reveal animation — exact spec: 560ms, custom ease, one-shot via JS unobserve */
.rv{opacity:0;transform:translateY(18px);transition:opacity var(--dur-reveal) var(--ease-out-soft),transform var(--dur-reveal) var(--ease-out-soft)}
.rv.in{opacity:1;transform:none}
/* stagger within a grid — 70ms per child, capped at 6 (DESIGN.md v2 Motion spec) */
.grid-2 .rv:nth-child(1),.grid-3 .rv:nth-child(1),.grid-4 .rv:nth-child(1),.steps .rv:nth-child(1){transition-delay:0ms}
.grid-2 .rv:nth-child(2),.grid-3 .rv:nth-child(2),.grid-4 .rv:nth-child(2),.steps .rv:nth-child(2){transition-delay:70ms}
.grid-2 .rv:nth-child(3),.grid-3 .rv:nth-child(3),.grid-4 .rv:nth-child(3),.steps .rv:nth-child(3){transition-delay:140ms}
.grid-2 .rv:nth-child(4),.grid-3 .rv:nth-child(4),.grid-4 .rv:nth-child(4),.steps .rv:nth-child(4){transition-delay:210ms}
.grid-2 .rv:nth-child(5),.grid-3 .rv:nth-child(5),.grid-4 .rv:nth-child(5),.steps .rv:nth-child(5){transition-delay:280ms}
.grid-2 .rv:nth-child(n+6),.grid-3 .rv:nth-child(n+6),.grid-4 .rv:nth-child(n+6),.steps .rv:nth-child(n+6){transition-delay:350ms}

/* MANDATORY — prefers-reduced-motion (DESIGN.md v2 Decision 33, was missing) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .rv{opacity:1 !important;transform:none !important;transition-delay:0ms !important}
  .card:hover,.btn:hover,a.svc:hover{transform:none !important}
  a.svc:hover .svc-img img{transform:rotate(1.5deg) !important}
  a.svc:hover .svc-img::before{transform:rotate(-6deg) !important}
  .quote-card:hover,.case-photo:hover img,.process-photo:hover img,
  .hero-photo:hover img,.ba-figure:hover img{transform:none !important}
  .sticky-bar{transition:none !important}
  .hero-bg .hero-cf-img{animation:none !important;opacity:0 !important}
  .hero-bg .hero-cf-img:first-child{opacity:1 !important}
}

/* ---------- mobile polish ---------- */
/* Note: --gap-major/--gap-minor already handled at the 860px breakpoint above */
@media (max-width:640px){
  .hero h1{font-size:clamp(2rem,9vw,2.6rem)}
  .hero .sub{font-size:1rem}
  .page-hero h1{font-size:clamp(1.7rem,7.5vw,2.2rem)}
  .h-lg{font-size:clamp(1.55rem,6.4vw,1.9rem)}
  .lede{font-size:1rem}
  .stats{gap:1.2rem .8rem}
  .stat b{font-size:1.5rem}
  .btn{padding:.9rem 1.4rem;font-size:.95rem}
  .hero-ctas .btn{flex:1;justify-content:center;min-width:180px}
  .hero-photo img{aspect-ratio:16/10}
  .accred .wrap{justify-content:flex-start}
  .accred-items{gap:1rem 1.4rem}
  .accred-items span{font-size:.84rem}
  .accred-items img{height:22px}
  .accred-items img.tall{height:26px}
  .accred-items img.gas-safe{height:29px}
  .cta-band{padding:1.8rem 1.4rem}
  .cta-list{gap:.55rem 1.1rem;flex-direction:column;align-items:flex-start}
  .success-meta{grid-template-columns:1fr;gap:.15rem}
  .success-meta dt{margin-top:.6rem}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:.6rem}
  /* mobile photo-radius overrides removed: they existed to tame the old 48px
     photo radius on small screens. With --radius-photo now 28px the base
     value already works at every width, and a separate mobile number was
     exactly the kind of drift this consolidation set out to remove. */
  .acc-head h3{font-size:1.02rem}
  .acc-icon{width:34px;height:34px;font-size:1rem}
  .why-row{grid-template-columns:44px 1fr}
  .step-label{margin-bottom:1.2rem}
  .q-card{padding:1.3rem 1.1rem}
}