/* ===========================================================
   London Loft Insulation — stylesheet
   Palette: petrol teal + warm ember on cool off-white
   Type: Bricolage Grotesque (display) + Inter (body)
   =========================================================== */

:root{
  --ink:#16211d;
  --brand:#0e3b3a;
  --brand-2:#17585a;
  --brand-ink:#092625;
  --brand-soft:#e6efeb;
  --mist:#f3f7f5;
  --paper:#ffffff;
  --ember:#df5f37;
  --ember-2:#c64d27;
  --muted:#5d6b66;
  --line:#dde7e2;
  --shadow:0 18px 50px -24px rgba(9,38,37,.45);
  --shadow-sm:0 8px 24px -16px rgba(9,38,37,.5);
  --radius:18px;
  --radius-sm:12px;
  --maxw:1180px;
  --display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--brand-2);text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);line-height:1.05;margin:0;color:var(--ink);font-weight:700;letter-spacing:-.02em}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{
  font-family:var(--body);font-weight:700;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember-2);display:inline-block;margin-bottom:14px;
}
.eyebrow.light{color:var(--htick)}
.lede{font-size:1.18rem;color:var(--muted);max-width:60ch}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:700;font-size:1rem;padding:15px 26px;border-radius:999px;
  border:2px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  font-family:var(--body);text-align:center;
}
.btn-primary{background:var(--ember);color:#fff;box-shadow:0 12px 28px -12px rgba(223,95,55,.7)}
.btn-primary:hover{background:var(--ember-2);transform:translateY(-2px)}
.btn-dark{background:var(--brand);color:#fff}
.btn-dark:hover{background:var(--brand-ink);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:var(--brand);color:var(--brand)}
.btn-ghost:hover{background:var(--brand);color:#fff}
.btn-ghost.on-dark{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost.on-dark:hover{background:#fff;color:var(--brand)}
.btn-lg{padding:17px 32px;font-size:1.05rem}
.btn-block{width:100%}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:26px;height:74px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;text-decoration:none}
.brand-mark{height:44px;width:44px;object-fit:contain;display:block;flex-shrink:0}
.brand-text .bname{font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.brand-text .bname b{color:var(--brand)}
.brand-text .bsub{display:block;font-family:var(--body);font-weight:600;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.brand.brand-on-dark .bname{color:#fff}
.brand.brand-on-dark .bname b{color:var(--htl)}
.brand.brand-on-dark .bsub{color:rgba(255,255,255,.62)}

.nav-links{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav-links a{color:var(--ink);font-weight:600;font-size:.95rem;padding:9px 13px;border-radius:9px;transition:background .15s,color .15s}
.nav-links a:hover{background:var(--mist);color:var(--brand)}
.nav-links a.active{color:var(--brand)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav-phone{font-family:var(--display);font-weight:700;color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:7px;font-size:1.02rem}
.nav-phone .dot{color:var(--ember)}

/* dropdown */
.has-drop{position:relative}
.drop-toggle{display:flex;align-items:center;gap:5px;cursor:pointer}
.drop-toggle svg{width:11px;height:11px;transition:transform .2s}
.drop-menu{
  position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:8px;min-width:264px;opacity:0;visibility:hidden;
  transform:translateY(6px);transition:.16s ease;
}
.has-drop:hover .drop-menu,.has-drop:focus-within .drop-menu{opacity:1;visibility:visible;transform:none}
.has-drop:hover .drop-toggle svg{transform:rotate(180deg)}
.drop-menu a{display:block;padding:10px 12px;border-radius:9px;font-size:.92rem}
.drop-menu a span{display:block;font-size:.76rem;color:var(--muted);font-weight:500}
.drop-menu .lead-link{color:var(--brand);font-weight:700}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.2s}

/* ---------- top notice bar ---------- */
.topbar{background:var(--brand);color:var(--htl);font-size:.83rem;text-align:center;padding:8px 16px;font-weight:500}
.topbar b{color:#fff}
.topbar .sep{opacity:.4;margin:0 10px}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--mist) 0%,var(--paper) 100%);padding:64px 0 72px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero-grid.mirror{grid-template-columns:.95fr 1.05fr}
.hero-grid.mirror>*:first-child{order:2}
.hero-grid.mirror>*:last-child{order:1}
.hero h1{font-size:clamp(2.5rem,5.2vw,4rem);letter-spacing:-.03em}
.hero h1 .em{color:var(--ember)}
.hero h1 .tl{color:var(--brand)}
.hero p.sub{font-size:1.2rem;color:var(--muted);margin:22px 0 28px;max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.hero-ticks{display:flex;flex-wrap:wrap;gap:10px 22px}
.tick{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.95rem}
.tick svg{width:20px;height:20px;flex-shrink:0;color:var(--brand)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:.84rem;font-weight:600;box-shadow:var(--shadow-sm)}
.chip.green{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand-ink)}
.chip.ember{background:#fdeee8;border-color:#f6cdbd;color:var(--ember-2)}
/* photo-backed home hero (team photo + transparent overlay) */
.hero-photo{background-color:var(--brand-ink);background-size:cover;background-position:center;color:#fff}
.hero-photo h1{color:#fff}
.hero-photo h1 .tl{color:var(--htl)}
.hero-photo h1 .em{color:var(--hem)}
.hero-photo p.sub{color:rgba(255,255,255,.9)}
.hero-photo .tick{color:#fff}
.hero-photo .tick svg{color:var(--htick)}
.hero-photo .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.hero-photo .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* thermal house signature */
.thermal-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:22px}
.thermal-card .tc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.thermal-card .tc-head b{font-family:var(--display);font-size:1rem}
.thermal-card .tc-head span{font-size:.78rem;color:var(--muted);font-weight:600}
.thermal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.thermal-stats .ts{background:var(--mist);border-radius:12px;padding:12px 10px;text-align:center}
.thermal-stats .ts b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--brand);line-height:1}
.thermal-stats .ts span{font-size:.72rem;color:var(--muted);font-weight:600;display:block;margin-top:5px}

/* ---------- sections ---------- */
section{padding:74px 0}
.sec-sm{padding:52px 0}
.bg-mist{background:var(--mist)}
.bg-brand{background:var(--brand);color:var(--htl)}
.bg-brand h1,.bg-brand h2,.bg-brand h3{color:#fff}
.bg-soft{background:var(--brand-soft)}
.sec-head{max-width:640px;margin-bottom:42px}
.sec-head.center{margin-left:auto;margin-right:auto}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.sec-head p{color:var(--muted);font-size:1.1rem;margin-top:14px}
.bg-brand .sec-head p{color:var(--htick)}

/* ---------- service grid ---------- */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.svc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s;display:flex;flex-direction:column}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand-soft)}
.svc-ico{width:52px;height:52px;border-radius:13px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--brand)}
.svc-ico svg{width:27px;height:27px}
.svc-card h3{font-size:1.25rem;margin-bottom:9px}
.svc-card p{color:var(--muted);font-size:.96rem;flex-grow:1}
.svc-card .more{margin-top:16px;font-weight:700;color:var(--ember-2);display:inline-flex;align-items:center;gap:6px;font-size:.92rem}
.svc-card:hover .more{gap:10px}
.svc-card .more svg{width:17px;height:17px;flex-shrink:0}
/* service cards with a photo on top (home page) */
.svc-card.has-photo{padding:0;overflow:hidden}
.svc-card.has-photo .svc-photo{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--mist)}
.svc-card.has-photo .svc-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.svc-card.has-photo:hover .svc-photo img{transform:scale(1.05)}
.svc-card.has-photo .svc-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 26px}
.more svg{width:17px;height:17px;flex-shrink:0;vertical-align:middle}
/* swappable photo frames (drop replacement images into assets/img/) */
.media-photo{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--mist);border:1px solid var(--line)}
.media-photo img{display:block;width:100%;height:100%;object-fit:cover}
.media-3x2{aspect-ratio:3/2}
.media-4x3{aspect-ratio:4/3}
.media-wide{aspect-ratio:16/7}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step}
.step{position:relative;padding-top:8px}
.step .num{font-family:var(--display);font-size:2.6rem;color:var(--ember);line-height:1;opacity:.85}
.step h3{font-size:1.15rem;margin:10px 0 8px}
.step p{color:var(--muted);font-size:.94rem}
.bg-brand .step p{color:var(--htick)}

/* ---------- feature split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.split.flip .split-media{order:2}
.split-media{border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:var(--brand-soft);min-height:340px;display:flex;align-items:center;justify-content:center}
.feat-list{list-style:none;padding:0;margin:22px 0 0}
.feat-list li{display:flex;gap:13px;padding:11px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.feat-list li:last-child{border-bottom:0}
.feat-list svg{width:22px;height:22px;color:var(--brand);flex-shrink:0;margin-top:2px}
.feat-list b{display:block}
.feat-list span{color:var(--muted);font-size:.94rem}

/* ---------- stat band ---------- */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.statband .s b{font-family:var(--display);font-size:clamp(2rem,4vw,2.9rem);color:var(--brand);display:block;line-height:1}
.bg-brand .statband .s b{color:#fff}
.statband .s span{color:var(--muted);font-weight:600;font-size:.92rem;display:block;margin-top:7px}
.bg-brand .statband .s span{color:var(--htick)}

/* ---------- reviews ---------- */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column}
.stars{color:#e8a13c;font-size:1.05rem;letter-spacing:2px;margin-bottom:12px}
.review p{font-size:.98rem;flex-grow:1;margin:0 0 18px}
.review .who{display:flex;align-items:center;gap:12px}
.review .avatar{width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700}
.review .who b{display:block;font-size:.94rem}
.review .who span{font-size:.82rem;color:var(--muted)}

/* ---------- areas ---------- */
.area-cloud{display:flex;flex-wrap:wrap;gap:11px}
.area-cloud a,.area-cloud span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 17px;font-weight:600;font-size:.9rem;color:var(--ink);transition:.15s}
.area-cloud a:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;padding:20px 22px;font-weight:700;font-family:var(--display);font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--ember);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 20px;color:var(--muted);margin:0}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--brand) 0%,var(--brand-ink) 100%);border-radius:26px;padding:52px;color:#fff;display:grid;grid-template-columns:1.4fr 1fr;gap:34px;align-items:center}
.cta-band h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.4rem)}
.cta-band p{color:var(--htick);margin:14px 0 0;font-size:1.08rem}
.cta-band .cta-actions{display:flex;flex-direction:column;gap:12px}

/* ---------- quote form ---------- */
.quote-shell{display:grid;grid-template-columns:.85fr 1.15fr;gap:46px;align-items:start}
.quote-aside .eyebrow{color:var(--ember-2)}
.quote-aside h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.quote-aside .lede{margin:16px 0 24px}
.qbenefits{list-style:none;padding:0;margin:0 0 26px}
.qbenefits li{display:flex;gap:11px;align-items:center;padding:9px 0;font-weight:600}
.qbenefits svg{width:21px;height:21px;color:var(--brand);flex-shrink:0}
.talk-card{background:var(--mist);border:1px solid var(--line);border-radius:18px;padding:24px;text-align:center}
.talk-card .t-label{font-family:var(--display);font-weight:700;margin-bottom:8px}
.talk-card .t-phone{font-family:var(--display);font-size:1.7rem;color:var(--ember-2);font-weight:700}
.talk-card .t-meta{font-size:.86rem;color:var(--muted);margin-top:8px}
.talk-card .t-meta a{color:var(--brand-2)}

.form-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px;box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:7px}
.field label .req{color:var(--ember)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;font-family:var(--body);
  font-size:1rem;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,59,58,.12)}
.field textarea{resize:vertical;min-height:104px}
.field input::placeholder,.field textarea::placeholder{color:#9aa8a3}
.form-tiny{font-size:.8rem;color:var(--muted);margin-top:14px;text-align:center}
.form-error{color:#c0392b;font-size:.85rem;margin-top:6px;display:none}
.field.invalid input,.field.invalid select{border-color:#c0392b}
.field.invalid .form-error{display:block}
.form-status{display:none;padding:13px 16px;border-radius:11px;margin-bottom:18px;font-weight:600;font-size:.92rem}
.form-status.err{display:block;background:#fdecea;color:#b03a2e;border:1px solid #f5c6c0}

/* ---------- generic content / article ---------- */
.prose{max-width:760px}
.prose p{margin:0 0 18px;color:#2c3a35}
.prose h2{font-size:1.7rem;margin:38px 0 14px}
.prose h3{font-size:1.28rem;margin:28px 0 10px}
.prose ul{margin:0 0 20px;padding-left:4px;list-style:none}
.prose ul li{position:relative;padding:7px 0 7px 30px}
.prose ul li::before{content:"";position:absolute;left:0;top:14px;width:13px;height:13px;border-radius:3px;background:var(--brand-soft);border:2px solid var(--brand)}
.callout{background:var(--brand-soft);border-left:4px solid var(--brand);border-radius:0 14px 14px 0;padding:20px 24px;margin:26px 0}
.callout p{margin:0;color:var(--brand-ink)}
.callout.note{background:#fff6ec;border-left-color:var(--ember-2)}
.callout.note p{color:#7a3d22;font-size:.95rem}

.pagehead{background:var(--brand);color:#fff;padding:56px 0}
.pagehead .eyebrow{color:var(--htick)}
.pagehead h1{font-size:clamp(2.1rem,4.4vw,3.2rem);color:#fff}
.pagehead p{color:var(--htick);font-size:1.15rem;margin-top:14px;max-width:62ch}
.crumbs{font-size:.83rem;color:var(--htick);margin-bottom:16px}
.crumbs a{color:var(--htl)}

/* price strip on service pages */
.svc-meta{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0}
.svc-meta .m{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 18px;min-width:130px}
.svc-meta .m b{display:block;font-family:var(--display);color:var(--brand);font-size:1.15rem}
.svc-meta .m span{font-size:.8rem;color:var(--muted);font-weight:600}

/* blog */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post .thumb{height:120px;background:linear-gradient(120deg,var(--brand),var(--brand-2));display:flex;align-items:flex-end;padding:16px;color:#fff}
.post .thumb span{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.16);padding:4px 10px;border-radius:999px}
.post .pbody{padding:22px;flex-grow:1;display:flex;flex-direction:column}
.post h3{font-size:1.16rem;margin-bottom:9px}
.post p{color:var(--muted);font-size:.92rem;flex-grow:1}
.post .more{margin-top:14px;color:var(--ember-2);font-weight:700;font-size:.9rem}

/* ---------- thank you ---------- */
.thanks{min-height:64vh;display:flex;align-items:center;text-align:center;padding:70px 0}
.thanks .tick-big{width:88px;height:88px;border-radius:50%;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 26px}
.thanks .tick-big svg{width:46px;height:46px;color:var(--brand)}
.thanks h1{font-size:clamp(2.2rem,4.5vw,3.2rem)}
.thanks p{font-size:1.18rem;color:var(--muted);max-width:54ch;margin:18px auto 0}
.next-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:760px;margin:42px auto 0;text-align:left}
.next-steps .ns{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.next-steps .ns b{display:block;font-family:var(--display);margin-bottom:6px}
.next-steps .ns span{font-size:.9rem;color:var(--muted)}

/* ---------- footer ---------- */
.site-footer{background:var(--brand-ink);color:var(--htick);padding:62px 0 28px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:42px}
.site-footer .brand-logo{height:42px}
.foot-about{margin-top:16px;max-width:34ch}
.foot-col h4{color:#fff;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;font-family:var(--body);font-weight:700}
.foot-col a{display:block;color:var(--htick);padding:5px 0;transition:color .15s}
.foot-col a:hover{color:#fff}
.foot-contact div{margin-bottom:12px}
.foot-contact b{color:#fff;display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:3px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:#7e9b92}
.foot-bottom a{color:var(--htick)}
.foot-disclaimer{font-size:.76rem;color:#6f8c83;margin-top:14px;max-width:90ch;line-height:1.5}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid,.split,.quote-shell,.cta-band{grid-template-columns:1fr}
  .hero-grid.mirror>*{order:initial}
  .split.flip .split-media{order:0}
  .g3,.g4,.steps,.review-grid,.post-grid,.statband,.next-steps{grid-template-columns:repeat(2,1fr)}
  .thermal-card{max-width:520px}
  .cta-band{text-align:center}
  .cta-band .cta-actions{align-items:center}
}
@media (max-width:760px){
  .nav-links,.nav-phone{display:none}
  .nav-toggle{display:block;margin-left:auto}
  .nav-links.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);padding:12px;gap:2px;box-shadow:var(--shadow)}
  .nav-links.open a{padding:13px}
  .nav-links.open .has-drop{display:flex;flex-direction:column}
  .nav-links.open .drop-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 12px;min-width:0}
  .form-row{grid-template-columns:1fr}
  .g3,.g4,.steps,.review-grid,.post-grid,.statband,.next-steps,.g2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .cta-band{padding:34px}
  section{padding:54px 0}
}
@media (max-width:480px){
  .foot-grid{grid-template-columns:1fr}
  .thermal-stats{grid-template-columns:repeat(3,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   LAYOUT FAMILY B — structurally distinct homepage + footer
   ============================================================ */
.hero-b{padding:64px 0 0;background:var(--brand-soft);overflow:hidden}
.hero-b-inner{max-width:820px;margin:0 auto;text-align:center;padding-bottom:54px}
.hero-b-inner .eyebrow{color:var(--brand-2)}
.hero-b h1{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.04;letter-spacing:-.025em;color:var(--ink);margin:14px 0 0}
.hero-b h1 .em{color:var(--brand)}
.hero-b .sub{font-size:1.12rem;color:var(--muted);max-width:640px;margin:20px auto 0;line-height:1.6}
.hero-b-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.hero-b-trust{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:30px;color:var(--ink)}
.hero-b-trust span{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.86rem}
.hero-b-trust svg{width:17px;height:17px;color:var(--brand-2)}
.hero-b-strip{height:300px;background-size:cover;background-position:center;border-top:4px solid var(--brand)}
@media(max-width:900px){.hero-b-strip{height:200px}}

.metrics-b{background:var(--brand-ink);padding:30px 0}
.metrics-b .statband{margin:0}
.metrics-b .statband .s b{color:#fff}
.metrics-b .statband .s span{color:rgba(255,255,255,.72)}
.metrics-b .statband .s{border-color:rgba(255,255,255,.14)}

.services-b{padding:76px 0}
.svc-row{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:40px;align-items:center;max-width:980px;margin:0 auto 30px;padding:18px;border-radius:20px}
.svc-row:nth-child(even){background:var(--brand-soft)}
.svc-row.flip .svc-row-media{order:2}
.svc-row-media{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:3/2;background:var(--brand-soft)}
.svc-row-media img{width:100%;height:100%;object-fit:cover;display:block}
.svc-row-ic{display:inline-flex;width:46px;height:46px;border-radius:12px;background:var(--brand);color:#fff;align-items:center;justify-content:center;margin-bottom:14px}
.svc-row-ic svg{width:24px;height:24px}
.svc-row-body h3{font-family:var(--display);font-size:1.4rem;color:var(--ink);margin:0 0 8px}
.svc-row-body p{color:var(--muted);line-height:1.6;margin:0 0 12px}
@media(max-width:760px){.svc-row{grid-template-columns:1fr;gap:18px}.svc-row.flip .svc-row-media{order:0}}

.local-b{padding:72px 0}
.local-b-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:50px;align-items:start;max-width:1040px;margin:0 auto}
.area-card{background:var(--brand-soft);border-radius:20px;padding:28px}
.area-card h4{font-family:var(--display);font-size:1.05rem;color:var(--ink);margin:0 0 14px}
.chip-areas{display:flex;flex-wrap:wrap;gap:8px}
.chip-area{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:.82rem;font-weight:600;color:var(--brand-2)}
.area-note{font-size:.85rem;color:var(--muted);margin-top:16px;line-height:1.55}
@media(max-width:820px){.local-b-grid{grid-template-columns:1fr;gap:32px}}

.steps-b{padding:74px 0}
.timeline{list-style:none;max-width:760px;margin:0 auto;padding:0;position:relative}
.timeline:before{content:"";position:absolute;left:23px;top:10px;bottom:10px;width:2px;background:rgba(255,255,255,.22)}
.tl-item{display:grid;grid-template-columns:48px 1fr;gap:22px;align-items:start;margin-bottom:22px;position:relative}
.tl-node{width:48px;height:48px;border-radius:50%;background:var(--ember);color:#fff;font-family:var(--display);font-weight:800;font-size:1.15rem;display:flex;align-items:center;justify-content:center;z-index:1}
.tl-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:18px 22px}
.tl-card h3{color:#fff;font-family:var(--display);font-size:1.2rem;margin:0 0 6px}
.tl-card p{color:rgba(255,255,255,.82);margin:0;line-height:1.55}

.diagram-b{padding:76px 0}
.diagram-b-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;max-width:1040px;margin:0 auto}
.diagram-b-media{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow)}
.mini-stats{display:flex;gap:26px;margin-top:24px;flex-wrap:wrap}
.mini-stats b{display:block;font-family:var(--display);font-size:1.7rem;color:var(--brand)}
.mini-stats span{font-size:.82rem;color:var(--muted)}
@media(max-width:820px){.diagram-b-grid{grid-template-columns:1fr;gap:30px}}

.reviews-b{padding:72px 0}
.faq-2col{columns:2;column-gap:26px;max-width:980px;margin:0 auto}
.faq-2col .faq{break-inside:avoid}
.faq-2col details{break-inside:avoid;margin-bottom:12px}
@media(max-width:760px){.faq-2col{columns:1}}

/* family B footer */
.foot-b .foot-b-cta{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot-b .foot-b-cta h2{color:#fff;font-family:var(--display);font-size:1.8rem;margin:6px 0 0;max-width:520px}
.foot-b-cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.foot-b-mid{display:grid;grid-template-columns:1.1fr 2fr;gap:40px;align-items:start}
.foot-b-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.foot-b-navcol{display:flex;flex-direction:column;gap:9px}
.foot-b-navcol>span:first-child{font-family:var(--display);font-weight:700;color:#fff;font-size:1rem;margin-bottom:4px}
.foot-b-navcol a,.foot-b-hours{color:rgba(255,255,255,.72);font-size:.9rem;text-decoration:none}
.foot-b-navcol a:hover{color:#fff}
@media(max-width:820px){.foot-b-mid{grid-template-columns:1fr;gap:28px}.foot-b-nav{grid-template-columns:1fr 1fr}}

/* family B — split hero variant (left copy + framed diagram) */
.hero-b--split{padding:60px 0}
.hero-b-split{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center}
.hero-b--split .hero-b-copy{text-align:left}
.hero-b--split .hero-b-copy .eyebrow{color:var(--brand-2)}
.hero-b--split h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.05;letter-spacing:-.025em;color:var(--ink);margin:12px 0 0}
.hero-b--split h1 .em{color:var(--brand)}
.hero-b--split .sub{font-size:1.1rem;color:var(--muted);margin:18px 0 0;line-height:1.6;max-width:540px}
.hero-b--split .hero-b-cta{justify-content:flex-start}
.hero-b--split .hero-b-trust{justify-content:flex-start;gap:18px}
.hero-b-figure .diagram-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow)}
@media(max-width:880px){.hero-b-split{grid-template-columns:1fr;gap:30px}.hero-b--split .hero-b-trust{gap:14px}}

/* the primary-button glow was hardcoded orange; keep it neutral so it suits every palette */
.btn-primary{box-shadow:0 12px 28px -12px rgba(0,0,0,.38)}
.brand-mark{height:44px;width:44px;object-fit:contain;display:block;flex-shrink:0}

/* ===========================================================
   2026 update — team block, case study, sticky mobile CTA
   =========================================================== */
/* hero photograph sits behind the copy, for the families that shipped without one.
   The overlay is the site's own brand-ink, so the tint always matches the logo. */
.hero-bgphoto{background-color:var(--brand-ink) !important;background-size:cover;background-position:center 42%;background-repeat:no-repeat;color:#fff !important}
.hero-bgphoto h1,.hero-bgphoto h2,.hero-bgphoto h3,.hero-bgphoto p,.hero-bgphoto span,.hero-bgphoto b,
.hero-bgphoto strong,.hero-bgphoto li,.hero-bgphoto div,.hero-bgphoto small,.hero-bgphoto figcaption{color:#fff !important}
.hero-bgphoto .em,.hero-bgphoto .tl,.hero-bgphoto h1 .em,.hero-bgphoto h1 .tl{color:var(--htl) !important}
.hero-bgphoto .eyebrow,.hero-bgphoto [class*="kicker"],.hero-bgphoto [class*="-kick"]{color:#fff !important;opacity:.96}
.hero-bgphoto .sub,.hero-bgphoto .lede,.hero-bgphoto [class*="stat"] span{color:rgba(255,255,255,.94) !important}
/* the two families that already shipped a photo hero used a slightly dim sub-heading */
.hero-photo .sub,.hero-photo .lede,.hero-photo p{color:rgba(255,255,255,.95) !important}
.hero-bgphoto [class*="stat"] b,.hero-bgphoto [class*="stat"] strong{color:var(--htl) !important}
.hero-bgphoto .btn-ghost{color:#fff !important;border-color:rgba(255,255,255,.55) !important;background:transparent}
.hero-bgphoto .btn-ghost:hover{border-color:#fff !important;background:rgba(255,255,255,.08)}
.hero-bgphoto .btn-ghost svg{color:#fff !important}
.hero-bgphoto .tick svg,.hero-bgphoto .feat-list svg{color:var(--htick) !important}
.hero-bgphoto [class*="rail"],.hero-bgphoto [class*="stats"],.hero-bgphoto [class*="trust"],
.hero-bgphoto [class*="copy"],.hero-bgphoto [class*="card"]{border-color:rgba(255,255,255,.28) !important}
.hero-bgphoto .chip{background:rgba(255,255,255,.14);color:#fff !important;border-color:rgba(255,255,255,.3) !important}
.team-c{padding:72px 0}
.team-c-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.team-c-photo{margin:0}
.team-c-photo img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
.team-c-photo figcaption{margin-top:12px;font-size:14px;color:var(--muted);line-height:1.5}
.team-c-copy h2{margin:.2em 0 .35em}
.team-c-copy p{color:var(--muted)}
.team-c-points{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.team-c-points li{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.team-c-points svg{width:20px;height:20px;flex:0 0 20px;margin-top:2px;color:var(--brand-2)}
.team-c-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

.case-c{padding:72px 0}
.case-c-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.case-shot{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm)}
.case-shot img{width:100%;height:auto}
.case-shot figcaption{padding:12px 14px;font-size:14px;color:var(--muted);line-height:1.5}
.case-shot b{display:block;color:var(--ink);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.case-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0 0;padding:0;list-style:none}
.case-facts li{background:var(--brand-soft);border-radius:var(--radius-sm);padding:16px 18px}
.case-facts b{display:block;font-family:var(--display);font-size:20px;color:var(--brand)}
.case-facts span{display:block;font-size:13.5px;color:var(--muted);margin-top:4px}
.case-note{margin-top:26px;padding:16px 18px;border-left:3px solid var(--brand-2);background:var(--mist);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:15px;color:var(--muted)}
.case-teaser{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.case-teaser img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}

.midcta{margin:44px auto;padding:26px 28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--brand-soft);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.midcta p{margin:0;font-weight:600;max-width:52ch}
.midcta .btn{flex:0 0 auto}

/* contact bar: fixed to the bottom of every page, at every screen size, always visible */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:saturate(1.2) blur(6px);border-top:1px solid var(--line);box-shadow:0 -8px 26px -18px rgba(0,0,0,.55)}
.sticky-cta .btn{min-height:48px;max-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16px;line-height:1;padding:0 22px;flex:0 0 auto}
.sticky-cta .btn svg{width:18px;height:18px;flex:0 0 18px}
.sticky-cta-note{font-weight:600;color:var(--muted);font-size:14.5px;margin:0 6px 0 0}
body{padding-bottom:78px}
/* phone numbers never break across lines, anywhere */
a[href^="tel:"]{white-space:nowrap}
/* several site families never sized the icons inside buttons, so the phone icon
   ballooned and pushed the number onto two or three lines */
.btn svg{width:18px;height:18px;flex:0 0 18px}
.btn-lg svg{width:20px;height:20px;flex:0 0 20px}
.btn{white-space:nowrap}

@media (max-width:900px){
  .team-c-grid{grid-template-columns:1fr;gap:26px}
  .case-teaser{grid-template-columns:1fr;gap:24px}
  .case-facts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .case-c-grid{grid-template-columns:1fr}
  .team-c,.case-c{padding:52px 0}
  .midcta{flex-direction:column;align-items:flex-start}
  .midcta .btn{width:100%;justify-content:center}
  .sticky-cta{gap:10px;padding-left:12px;padding-right:12px}
  .sticky-cta .btn{flex:1 1 0;padding:0 12px}
  .sticky-cta-note{display:none}
  body{padding-bottom:78px}
}
@media (max-width:480px){
  .case-facts{grid-template-columns:1fr}
}

/* Header: the menu gained an item, and the display font is wider than any
   fallback, so give the header row more room and never let an item wrap.
   Below 1100px the burger menu takes over. */
.site-header .wrap.nav{max-width:1340px}
.nav-links a{white-space:nowrap}
.nav-phone{white-space:nowrap}
.btn{white-space:nowrap}
@media (min-width:1101px){
  .nav{gap:16px}
  .nav-links{flex:0 1 auto;min-width:0;flex-wrap:nowrap}
  .nav-links a{padding:9px 11px;font-size:.93rem}
  .nav-right{gap:14px}
}
@media (max-width:1100px){
  .nav{gap:12px}
  .nav .brand{min-width:120px;flex:1 1 auto;overflow:hidden}
  .nav .brand-text,.nav .brand>span{min-width:0;overflow:hidden}
  .nav .bname,.nav .bsub{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-links,.nav-phone{display:none}
  .nav-links.open{display:flex}
  .nav-right{margin-left:auto;gap:10px;flex:0 0 auto}
  .nav-toggle{display:block;margin-left:0;flex:0 0 auto}
}
@media (max-width:430px){
  .nav-right .btn{padding:9px 12px;font-size:.9rem}
  .nav .bsub{display:none}
}
/* menu open: the sticky bar must not sit on top of the menu, and the panel
   must stay inside the viewport */
body.menu-open .sticky-cta{display:none}
/* while the quote form is on screen the bar steps aside so it cannot cover the
   submit button - a mis-tap there reloads the page and loses the enquiry */
body.form-in-view .sticky-cta{transform:translateY(120%);pointer-events:none}
.sticky-cta{transition:transform .22s ease}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}
@media (max-width:1100px){
  .nav-toggle{min-width:44px;min-height:44px}
  .nav-links.open{box-sizing:border-box;max-width:100vw;overflow-x:hidden}
  .nav-links.open .drop-menu{box-sizing:border-box;max-width:100%}
}
/* hero and footer grids on some layout variants never collapsed on small screens */
@media (max-width:880px){
  .hero-d .wrap,.hero-d--railrev .wrap,.hero-d--rail .wrap,
  .hero-c .wrap,.hero-c--railband .wrap{grid-template-columns:1fr}
  .foot-d-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .foot-d-cols{grid-template-columns:1fr}
}
/* stat rails on the narrower hero variants wrap instead of overflowing */
@media (max-width:520px){
  .hero-d-stats,.hero-c-rail{gap:14px}
  .hd-stat,.rstat{min-width:0}
}