/* ===========================================================
   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:var(--btn-ink,#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:var(--btn-ink,#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}}

/* family B — mirrored split hero (figure left, copy right) */
.hero-b--splitrev .hero-b-figure{order:1}
.hero-b--splitrev .hero-b-copy{order:2}
@media(max-width:880px){.hero-b--splitrev .hero-b-figure{order:2}.hero-b--splitrev .hero-b-copy{order:1}}

/* family B — banner hero (copy-only, left-aligned, no figure) */
.hero-b--banner{padding:74px 0 80px;text-align:left;border-bottom:4px solid var(--brand)}
.hero-b--banner .eyebrow{color:var(--brand-2)}
.hero-b--banner h1{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,4.8vw,3.6rem);line-height:1.04;letter-spacing:-.025em;color:var(--ink);margin:14px 0 0;max-width:760px}
.hero-b--banner h1 .em{color:var(--brand)}
.hero-b--banner .sub{font-size:1.12rem;color:var(--muted);max-width:600px;margin:18px 0 0;line-height:1.6}
.hero-b--banner .hero-b-cta{justify-content:flex-start;margin-top:28px}
.hero-b--banner .hero-b-trust{justify-content:flex-start;gap:20px;margin-top:26px}

/* family B — stack hero (centred copy, framed diagram beneath) */
.hero-b--stack{padding:62px 0 76px}
.hero-b--stack .hero-b-inner{padding-bottom:34px}
.hero-b-stackfig{max-width:640px;margin:0 auto}
.hero-b-stackfig .diagram-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow)}

/* family B — feature hero (copy beside a framed photo; diagram in its own section) */
.hero-b--feature .hero-photo-card{aspect-ratio:4/5;border-radius:22px;background-size:cover;background-position:center;box-shadow:var(--shadow);border:1px solid var(--line);min-height:340px}
@media(max-width:880px){.hero-b--feature .hero-photo-card{aspect-ratio:16/10;min-height:0}}

/* ============================================================
   LAYOUT FAMILY C — third distinct homepage architecture
   ============================================================ */
.wrap.narrow{max-width:760px}
.eyebrow.on-dark{color:rgba(255,255,255,.82)}

/* dark colour-band hero with an overlapping diagram card */
.hero-c{background:var(--brand);padding:62px 0 56px}
.hero-c-inner{max-width:800px;margin:0 auto;text-align:center}
.hero-c h1{color:#fff;font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,4.8vw,3.5rem);line-height:1.05;letter-spacing:-.025em;margin:14px 0 0}
.hero-c h1 .em{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:6px}
.hero-c .sub{color:rgba(255,255,255,.88);font-size:1.12rem;max-width:620px;margin:18px auto 0;line-height:1.6}
.hero-c-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.hero-c-cardwrap{max-width:660px;margin:30px auto 0;position:relative;z-index:3}
.hero-c--center .hero-c-cardwrap{margin-bottom:-96px}
.hero-c--center + section{padding-top:130px}
.hero-c-card{background:#fff;border-radius:22px;padding:20px;box-shadow:0 30px 70px -30px rgba(0,0,0,.5)}

/* split family-C hero: copy left, diagram card right, no overlap */
.hero-c--split .hero-c-split{display:grid;grid-template-columns:1.04fr .96fr;gap:42px;align-items:center}
.hero-c--split .hero-c-copy{text-align:left}
.hero-c--split .sub{margin:18px 0 0}
.hero-c--split .hero-c-cta{justify-content:flex-start}
.hero-c--split .hero-c-card{max-width:none}
@media(max-width:860px){.hero-c--split .hero-c-split{grid-template-columns:1fr;gap:28px}}

/* numbered service list */
.services-c{padding:78px 0}
.svc-list{max-width:880px;margin:0 auto;border-top:1px solid var(--line)}
.svc-item{display:flex;align-items:center;gap:22px;padding:22px 10px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:background .15s,padding .15s}
.svc-item:hover{background:var(--brand-soft);padding-left:18px}
.svc-num{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--brand);min-width:42px}
.svc-text{flex:1}
.svc-text b{display:block;font-family:var(--display);font-size:1.2rem;color:var(--ink);margin-bottom:3px}
.svc-text span{color:var(--muted);font-size:.95rem}
.svc-go{color:var(--brand-2);display:flex}.svc-go svg{width:22px;height:22px}
@media(max-width:560px){.svc-go{display:none}}

/* benefits split */
.benefits-c{padding:72px 0}
.benefits-c-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;max-width:1000px;margin:0 auto}
.benefit-list{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.benefit-list li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:var(--ink);font-size:1.05rem}
.benefit-list svg{width:23px;height:23px;color:var(--brand);flex-shrink:0}
@media(max-width:780px){.benefits-c-grid{grid-template-columns:1fr;gap:28px}}

/* numbered how-it-works cards */
.steps-c{padding:74px 0}
.steps-c-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1040px;margin:0 auto}
.step-c{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 22px;text-align:center}
.step-c-num{display:inline-flex;width:48px;height:48px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-family:var(--display);font-weight:800;font-size:1.35rem;align-items:center;justify-content:center;margin-bottom:14px}
.step-c h3{font-family:var(--display);font-size:1.12rem;margin:0 0 6px;color:var(--ink)}
.step-c p{color:var(--muted);font-size:.92rem;margin:0;line-height:1.5}
@media(max-width:820px){.steps-c-row{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.steps-c-row{grid-template-columns:1fr}}

/* areas band */
.areas-c{padding:66px 0}
.areas-c h2{color:#fff;margin:8px 0 0}
.areas-c-cols{columns:3;column-gap:30px;max-width:840px;margin:20px 0 0}
.areas-c-cols span{display:block;color:rgba(255,255,255,.82);padding:5px 0;font-weight:500}
.areas-c-note{color:rgba(255,255,255,.72);margin-top:20px}
@media(max-width:680px){.areas-c-cols{columns:2}}

/* featured testimonial + minis */
.reviews-c{padding:74px 0}
.reviews-c-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:34px;max-width:1000px;margin:0 auto;align-items:start}
.feat-review{font-family:var(--display);font-size:1.4rem;line-height:1.42;color:var(--ink);background:var(--brand-soft);border-radius:22px;padding:34px;margin:0}
.feat-review cite{display:block;font-family:var(--body);font-style:normal;font-weight:700;font-size:.92rem;color:var(--brand-2);margin-top:18px}
.mini-reviews{display:grid;gap:18px}
.mini-review{border:1px solid var(--line);border-radius:16px;padding:20px}
.mini-review p{margin:0 0 10px;color:var(--ink);line-height:1.55}
.mini-review .who b{color:var(--ink)}
.mini-review .who span{color:var(--muted);font-size:.85rem;margin-left:6px}
@media(max-width:820px){.reviews-c-grid{grid-template-columns:1fr;gap:22px}}

/* family C footer */
footer.foot-c{background:var(--brand-ink);color:rgba(255,255,255,.8)}
.foot-c-cta{background:var(--brand);text-align:center;padding:52px 0}
.foot-c-cta h2{color:#fff;font-family:var(--display);font-size:1.9rem;margin:0}
.foot-c-cta p{color:rgba(255,255,255,.9);margin:8px 0 22px}
.foot-c-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.foot-c-mid{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:34px 0 18px}
.foot-c-links{display:flex;flex-wrap:wrap;gap:16px}
.foot-c-links a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.9rem}
.foot-c-links a:hover{color:#fff}
.foot-c-contact{display:flex;gap:26px;flex-wrap:wrap;padding:15px 0;margin-top:6px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.foot-c-contact a{color:rgba(255,255,255,.82);text-decoration:none}
.foot-c .foot-bottom{padding:16px 0;border:0}
.foot-c .foot-disclaimer{color:rgba(255,255,255,.5);padding-top:0}

/* family-C banner hero (copy-only dark band) + standalone diagram section */
.hero-c--banner{padding:64px 0 70px}
.hero-c--banner .hero-c-inner{max-width:840px}
.hero-c-trust{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:center;margin-top:26px}
.hero-c-trust span{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.85);font-weight:600;font-size:.95rem}
.hero-c-trust svg{width:18px;height:18px;color:#fff;flex-shrink:0}
.diagram-c{padding:74px 0}
.diagram-c-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:42px;align-items:center;max-width:1000px;margin:0 auto}
.diagram-c-copy h2{font-family:var(--display);font-size:clamp(1.5rem,3vw,2rem);color:var(--ink);margin:8px 0 12px;letter-spacing:-.02em}
.diagram-c-copy p{color:var(--muted);line-height:1.65}
@media(max-width:860px){.diagram-c-grid{grid-template-columns:1fr;gap:26px}}

/* family-C splitrev hero (mirror of split: card left, copy right) */
.hero-c--splitrev .hero-c-split{grid-template-columns:.96fr 1.04fr}
@media(max-width:860px){.hero-c--splitrev .hero-c-split{grid-template-columns:1fr}.hero-c--splitrev .hero-c-cardcol{order:2}.hero-c--splitrev .hero-c-copy{order:1}}

/* family-C feature hero (copy beside a framed photo) */
.hero-c--feature .hero-c-photo{aspect-ratio:4/5;border-radius:18px;background-size:cover;background-position:center;min-height:330px;box-shadow:0 30px 70px -30px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14)}
@media(max-width:860px){.hero-c--feature .hero-c-photo{aspect-ratio:16/10;min-height:0}}

/* ============================================================
   LAYOUT FAMILY D — fourth distinct homepage architecture
   ============================================================ */
/* editorial light hero, typographic, with an inline stat row */
.hero-d{background:var(--brand-soft);border-bottom:1px solid var(--line);padding:66px 0 0}
.hero-d .wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:end;padding-bottom:44px}
.hero-d-copy{border-left:5px solid var(--brand);padding-left:26px}
.hero-d-kicker{display:inline-block;font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-2)}
.hero-d h1{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5vw,3.7rem);line-height:1.02;letter-spacing:-.03em;color:var(--ink);margin:14px 0 0}
.hero-d h1 .em{color:var(--brand)}
.hero-d .sub{font-size:1.14rem;color:var(--muted);max-width:620px;margin:18px 0 0;line-height:1.6}
.hero-d-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero-d-stats{display:flex;flex-direction:column;gap:18px;border-left:1px solid var(--line);padding-left:28px}
.hd-stat b{display:block;font-family:var(--display);font-weight:800;font-size:1.9rem;color:var(--brand);line-height:1}
.hd-stat span{display:block;color:var(--muted);font-size:.9rem;margin-top:4px}
@media(max-width:880px){.hero-d .wrap{grid-template-columns:1fr;gap:30px}.hero-d-stats{flex-direction:row;flex-wrap:wrap;border-left:0;padding-left:0;gap:24px}.hd-stat{flex:1;min-width:120px}}

/* bento service grid */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:18px}
.bento-tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s}
.bento-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.bento-feature{grid-row:span 2;grid-column:span 1;background:var(--brand-soft);border-color:transparent}
.bento-ic{display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:12px;background:var(--brand);color:#fff;margin-bottom:16px}
.bento-ic svg{width:24px;height:24px}
.bento-tile h3{font-family:var(--display);font-size:1.16rem;margin:0 0 8px;color:var(--ink)}
.bento-tile p{color:var(--muted);font-size:.95rem;line-height:1.55;margin:0 0 16px;flex:1}
.bento-feature h3{font-size:1.5rem}
.bento-go{display:inline-flex;align-items:center;gap:6px;color:var(--brand-2);font-weight:700;font-size:.92rem}
.bento-go svg{width:18px;height:18px}
@media(max-width:820px){.bento{grid-template-columns:1fr 1fr}.bento-feature{grid-row:auto;grid-column:1/-1}}
@media(max-width:520px){.bento{grid-template-columns:1fr}}

/* why split + benefit chips */
.why-d-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.why-d-copy h2{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.2rem);color:var(--ink);margin:8px 0 14px;letter-spacing:-.02em}
.why-d-copy p{color:var(--muted);line-height:1.7}
.benefit-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.benefit-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-weight:600;font-size:.9rem;color:var(--ink)}
.benefit-chip svg{width:17px;height:17px;color:var(--brand)}
.why-d-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow)}
@media(max-width:880px){.why-d-grid{grid-template-columns:1fr;gap:30px}}

/* horizontal connected stepper */
.stepper{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:14px}
.stepper-line{position:absolute;top:23px;left:12%;right:12%;height:2px;background:var(--line);z-index:0}
.stepper-node{position:relative;z-index:1;text-align:center;padding:0 6px}
.stepper-dot{display:inline-flex;width:48px;height:48px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--display);font-weight:800;font-size:1.25rem;align-items:center;justify-content:center;border:4px solid #fff}
.stepper-node h3{font-family:var(--display);font-size:1.06rem;margin:14px 0 6px;color:var(--ink)}
.stepper-node p{color:var(--muted);font-size:.9rem;line-height:1.5;margin:0}
@media(max-width:820px){.stepper{grid-template-columns:1fr;gap:22px;max-width:420px;margin:14px auto 0}.stepper-line{left:23px;right:auto;top:10%;bottom:10%;width:2px;height:auto}.stepper-node{display:grid;grid-template-columns:48px 1fr;text-align:left;gap:4px 18px;align-items:start}.stepper-node .stepper-dot{grid-row:span 2}.stepper-node h3{margin:6px 0 4px}}

/* bordered areas panel */
.areas-d{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:22px;padding:36px}
.areas-d-head h2{font-family:var(--display);font-size:1.7rem;color:var(--ink);margin:8px 0 12px}
.areas-d-head p{color:var(--muted);line-height:1.6;font-size:.96rem}
.areas-d-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px}
.areas-d-list span{display:flex;align-items:center;gap:7px;color:var(--ink);font-weight:500;font-size:.94rem}
.areas-d-list svg{width:15px;height:15px;color:var(--brand-2);flex-shrink:0}
@media(max-width:820px){.areas-d{grid-template-columns:1fr;gap:24px;padding:26px}.areas-d-list{grid-template-columns:1fr 1fr}}

/* two-up quote-mark reviews */
.rev-d-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.rev-d{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 30px 24px;margin:0;overflow:hidden}
.rev-mark{position:absolute;top:2px;left:18px;font-family:var(--display);font-weight:800;font-size:5rem;line-height:1;color:var(--brand-soft)}
.rev-d blockquote{position:relative;margin:0 0 16px;color:var(--ink);font-size:1.05rem;line-height:1.6}
.rev-d figcaption b{color:var(--ink)}
.rev-d figcaption span{color:var(--muted);font-size:.86rem;margin-left:8px}
@media(max-width:720px){.rev-d-grid{grid-template-columns:1fr}}

/* branded quote band */
.quote-d{background:var(--brand);padding:56px 0}
.quote-d-inner{max-width:900px;margin:0 auto}

/* asymmetric FAQ */
.faq-d-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
.faq-d-head{position:sticky;top:96px}
.faq-d-head h2{font-family:var(--display);font-size:1.8rem;color:var(--ink);margin:8px 0 12px;letter-spacing:-.02em}
.faq-d-head p{color:var(--muted);line-height:1.6}
.faq-d-head a{color:var(--brand-2);font-weight:700}
@media(max-width:820px){.faq-d-grid{grid-template-columns:1fr;gap:22px}.faq-d-head{position:static}}

/* family D footer: oversized wordmark */
footer.foot-d{background:var(--brand-ink);color:rgba(255,255,255,.78);overflow:hidden}
.foot-d-cta{border-bottom:1px solid rgba(255,255,255,.12)}
.foot-d-cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:40px 0}
.foot-d-cta h2{color:#fff;font-family:var(--display);font-size:1.7rem;margin:6px 0 0}
.foot-d-actions{display:flex;gap:12px;flex-wrap:wrap}
.foot-d-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding:44px 0 10px}
.foot-d-contact{margin:16px 0 0;line-height:1.9;font-size:.92rem}
.foot-d-contact a{color:rgba(255,255,255,.82);text-decoration:none}
.foot-d-group h4{color:#fff;font-family:var(--display);font-size:1rem;margin:0 0 14px}
.foot-d-group a{display:block;color:rgba(255,255,255,.72);text-decoration:none;font-size:.92rem;padding:4px 0}
.foot-d-group a:hover{color:#fff}
.foot-d-word{font-family:var(--display);font-weight:800;font-size:clamp(4rem,15vw,11rem);line-height:.8;color:rgba(255,255,255,.05);letter-spacing:-.04em;text-align:center;padding:10px 0 0;user-select:none}
.foot-d .foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:16px 0;margin-top:6px}
.foot-d .foot-disclaimer{color:rgba(255,255,255,.5)}

/* family D: quote form sits on the cobalt brand band, so its aside text is light */
.quote-d .quote-aside .eyebrow{color:rgba(255,255,255,.82)}
.quote-d .quote-aside h2{color:#fff}
.quote-d .quote-aside .lede{color:rgba(255,255,255,.88)}
.quote-d .qbenefits li{color:#fff}
.quote-d .qbenefits svg{color:#fff}

/* family-D split hero: copy beside a framed photo, stats as a strip beneath */
.hero-d--split .wrap{padding-bottom:0}
.hero-d-splitgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:8px 0 40px}
.hero-d--split .hero-d-copy{border-left:5px solid var(--brand);padding-left:26px}
.hero-d-photo{aspect-ratio:16/12;border-radius:20px;background-size:cover;background-position:center;box-shadow:var(--shadow);border:1px solid var(--line)}
.hero-d .wrap.hero-d-statstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 44px;border-top:1px solid var(--line);padding:22px 0 34px}
.hero-d-statstrip .hd-stat b{display:block;font-family:var(--display);font-weight:800;font-size:1.7rem;color:var(--brand);line-height:1}
.hero-d-statstrip .hd-stat span{display:block;color:var(--muted);font-size:.9rem;margin-top:4px}
@media(max-width:880px){.hero-d-splitgrid{grid-template-columns:1fr;gap:26px}.hero-d-photo{aspect-ratio:16/10}}
@media(max-width:560px){.hero-d .wrap.hero-d-statstrip{grid-template-columns:1fr}}

/* family-D centered hero: centred copy, full-width stat strip beneath */
.hero-d--center{padding-bottom:0}
.hero-d .wrap.hero-d-centerwrap{display:block;text-align:center;max-width:900px;padding-top:8px;padding-bottom:34px}
.hero-d--center .hero-d-centerwrap h1{margin:14px auto 0}
.hero-d--center .hero-d-centerwrap .sub{margin:18px auto 0}
.hero-d--center .hero-d-cta{justify-content:center}
.hero-d--center .hd-stat{text-align:center}

/* family-D diagram hero (diagram card beside copy) + solo why-section */
.hero-d-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.hero-d--diagram .hero-d-cardcol{align-self:center}
.why-d-solo{max-width:820px;margin:0 auto;text-align:center}
.why-d-solo h2{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.2rem);color:var(--ink);margin:8px 0 14px;letter-spacing:-.02em}
.why-d-solo p{color:var(--muted);line-height:1.7}
.why-d-solo .benefit-chips{justify-content:center;margin-top:22px}

/* family-D railrev hero: stat rail on the left, copy right-aligned on the right */
.hero-d--railrev .wrap{grid-template-columns:.65fr 1.35fr}
.hero-d--railrev .hero-d-stats{border-left:0;border-right:1px solid var(--line);padding-left:0;padding-right:28px;order:1}
.hero-d--railrev .hero-d-copy{border-left:0;border-right:5px solid var(--brand);padding-left:0;padding-right:26px;text-align:right;order:2}
.hero-d--railrev .hero-d-cta{justify-content:flex-end}
@media(max-width:880px){.hero-d--railrev .hero-d-copy{border-right:0;padding-right:0;text-align:left;order:1}.hero-d--railrev .hero-d-cta{justify-content:flex-start}.hero-d--railrev .hero-d-stats{border-right:0;order:2}}

/* ============================================================
   FAMILY E — editorial "broadsheet": rules, section numbers,
   index lists, newspaper columns, framed panels (squared corners)
   ============================================================ */
.sec-e{padding:64px 0}
.bg-sand{background:var(--brand-soft)}
.head-e{max-width:760px}
.kick-e{display:inline-block;font-family:var(--display);font-weight:800;letter-spacing:.02em;color:var(--brand);font-size:.9rem;margin-bottom:10px}
.head-e h2{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.08;letter-spacing:-.01em;margin:0}
.lead-e{color:var(--muted);font-size:1.05rem;margin-top:12px;max-width:66ch}

/* hero masthead */
.hero-e{padding:40px 0 0}
.mast-top{display:flex;justify-content:space-between;gap:16px;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:700;color:var(--muted);border-top:3px solid var(--ink);border-bottom:1px solid var(--line);padding:12px 0}
.mast-h1{font-family:var(--display);font-weight:800;font-size:clamp(2.5rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.02em;margin:28px 0 6px;max-width:16ch}
.mast-h1 .em{color:var(--brand)}
.mast-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:52px;padding:20px 0 30px;border-bottom:1px solid var(--line);align-items:start}
.mast-lead .sub{font-size:1.16rem;line-height:1.55;color:var(--muted);max-width:48ch;margin:0}
.mast-cta{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap}
.mast-index{border-left:1px solid var(--line);padding-left:26px}
.mast-index-label{display:block;font-family:var(--display);font-weight:800;color:var(--brand);font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}
.mast-index ol{list-style:none;margin:0;padding:0}
.mast-index li{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:.98rem}
.mast-index li:last-child{border-bottom:0}
.mi-num{font-family:var(--display);font-weight:800;color:var(--brand);font-size:.85rem;min-width:22px}
.mast-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:24px 0 44px}
.mast-stats .hd-stat{padding:2px 24px;border-right:1px solid var(--line)}
.mast-stats .hd-stat:first-child{padding-left:0}
.mast-stats .hd-stat:last-child{border-right:0}
.mast-stats .hd-stat b{display:block;font-family:var(--display);font-weight:800;font-size:2rem;line-height:1;color:var(--brand)}
.mast-stats .hd-stat span{display:block;color:var(--muted);font-size:.9rem;margin-top:6px}

/* service index list */
.svc-idx{list-style:none;margin:26px 0 0;padding:0;border-top:2px solid var(--ink)}
.svc-idx li{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;padding:22px 8px;border-bottom:1px solid var(--line);transition:background .15s,padding-left .15s}
.svc-idx li:hover{background:var(--brand-soft);padding-left:16px}
.si-num{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--brand);min-width:40px}
.si-body h3{margin:0;font-size:1.3rem;font-family:var(--display);font-weight:700}
.si-body p{margin:4px 0 0;color:var(--muted)}
.si-go{color:var(--brand);display:flex;opacity:.55}
.si-go svg{width:22px;height:22px}

/* why band */
.why-e{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.why-e-copy p{color:var(--muted);font-size:1.05rem;line-height:1.6;margin:14px 0 0}
.why-e-stats{display:flex;gap:40px;margin-top:24px;border-top:1px solid var(--line);padding-top:20px}
.why-e-stats b{display:block;font-family:var(--display);font-weight:800;font-size:1.9rem;color:var(--brand);line-height:1}
.why-e-stats span{display:block;color:var(--muted);font-size:.9rem;margin-top:4px;max-width:20ch}
.why-e-fig{margin:0}
.frame-e{border:1px solid var(--ink);background:#fff;padding:16px}
.frame-e-cap{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--brand);border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:6px}

/* step spine */
.spine-e{list-style:none;margin:30px 0 0;padding:0}
.spine-e li{position:relative;display:block;padding:0 0 34px 40px;border-left:2px solid var(--line);margin-left:23px}
.spine-e li:last-child{border-left-color:transparent;padding-bottom:0}
.sp-num{position:absolute;left:-24px;top:-4px;width:46px;height:46px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.05rem}
.spine-e h3{margin:2px 0 0;font-size:1.2rem;font-family:var(--display);font-weight:700}
.spine-e p{margin:5px 0 0;color:var(--muted);max-width:60ch}

/* newspaper-column areas */
.areas-e{list-style:none;margin:24px 0 0;padding:22px 0 0;border-top:2px solid var(--ink);columns:4;column-gap:38px}
.areas-e li{display:flex;gap:9px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);break-inside:avoid;font-weight:600;font-size:.95rem}
.ae-dot{width:7px;height:7px;background:var(--brand);flex:0 0 auto}

/* staggered review cards */
.rev-e{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.rev-e-card{position:relative;border:1px solid var(--ink);border-top:3px solid var(--brand);background:#fff;padding:26px 24px}
.rev-e-card:nth-child(2){margin-top:34px}
.rev-e-mark{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:.4;color:var(--brand);display:block;height:24px}
.rev-e-card blockquote{margin:6px 0 16px;font-size:1rem;line-height:1.55}
.rev-e-card figcaption b{display:block;font-weight:700}
.rev-e-card figcaption span{color:var(--muted);font-size:.88rem}

/* framed quote ticket */
.quote-e-frame{position:relative;border:2px solid var(--ink);background:var(--brand-soft);padding:38px 34px 34px}
.quote-e-tab{position:absolute;top:-15px;left:34px;background:var(--brand);color:#fff;padding:6px 16px;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.74rem}

/* numbered FAQ list */
.faq-e{margin-top:26px;border-top:2px solid var(--ink)}
.faq-e-item{display:grid;grid-template-columns:auto 1fr;gap:26px;padding:22px 4px;border-bottom:1px solid var(--line)}
.fe-num{font-family:var(--display);font-weight:800;color:var(--brand);font-size:1.3rem}
.faq-e-item h3{margin:0;font-size:1.12rem;font-family:var(--display);font-weight:700}
.faq-e-item p{margin:8px 0 0;color:var(--muted);max-width:74ch;line-height:1.55}

/* ruled closing CTA */
.cta-e{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:34px 4px}
.cta-e h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem)}
.cta-e p{margin:6px 0 0;color:var(--muted)}
.cta-e-btns{display:flex;gap:14px;flex-wrap:wrap}

/* masthead footer */
.foot-e{background:var(--brand-ink,#20242a);color:#fff;padding:0 0 30px}
.foot-e .wrap{padding-top:0;padding-bottom:0}
.foot-e-rule{display:flex;justify-content:space-between;gap:16px;text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;font-weight:700;color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.18);padding:20px 0 14px}
.foot-e-top{display:grid;grid-template-columns:1.6fr .9fr;gap:40px;padding:30px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.foot-e-brand p{color:rgba(255,255,255,.68);margin:14px 0 0;max-width:52ch;line-height:1.55}
.foot-e-contact{display:flex;flex-direction:column;gap:6px}
.foot-e-contact a,.foot-e-contact span{color:rgba(255,255,255,.8);text-decoration:none}
.foot-e-contact a:hover{color:#fff}
.foot-e-lab{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:#fff;margin-bottom:4px}
.foot-e-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.foot-e-cols h4{font-family:var(--display);font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 12px;color:#fff}
.foot-e-cols a{display:block;color:rgba(255,255,255,.68);text-decoration:none;padding:5px 0;font-size:.95rem}
.foot-e-cols a:hover{color:#fff}
.foot-e-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 0 0;font-size:.85rem;color:rgba(255,255,255,.55)}
.foot-e-bottom span:last-child{font-family:var(--display);font-weight:800;letter-spacing:.04em;color:rgba(255,255,255,.8)}
.foot-e .foot-disclaimer{color:rgba(255,255,255,.42);font-size:.78rem;line-height:1.5;margin:16px 0 0;max-width:none}

@media(max-width:900px){
  .mast-grid{grid-template-columns:1fr;gap:28px}
  .mast-index{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:18px}
  .why-e{grid-template-columns:1fr;gap:30px}
  .areas-e{columns:2}
  .rev-e{grid-template-columns:1fr;gap:20px}
  .rev-e-card:nth-child(2){margin-top:0}
  .foot-e-top,.foot-e-cols{grid-template-columns:1fr;gap:22px}
}
@media(max-width:560px){
  .mast-stats{grid-template-columns:1fr;gap:14px}
  .mast-stats .hd-stat{border-right:0;border-bottom:1px solid var(--line);padding:10px 0}
  .mast-stats .hd-stat:last-child{border-bottom:0}
  .areas-e{columns:1}
  .svc-idx li{grid-template-columns:auto 1fr;gap:16px}.si-go{display:none}
  .why-e-stats{flex-direction:column;gap:18px}
}

/* family-E "feature" hero: headline + copy left, framed diagram boxed right */
.hero-e--feature .feat-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center;padding:26px 0 30px;border-bottom:1px solid var(--line)}
.feat-lead .mast-index-label{color:var(--brand);margin-bottom:14px}
.feat-h1{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.04;margin:0 0 14px;max-width:none}
.feat-lead .sub{font-size:1.12rem;line-height:1.55;color:var(--muted);max-width:48ch;margin:0}
.feat-lead .mast-cta{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.feat-fig{margin:0}
.why-e--solo{grid-template-columns:1fr;max-width:880px}
@media(max-width:900px){.hero-e--feature .feat-grid{grid-template-columns:1fr;gap:26px}}

/* 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}
}