/* Option B: direct and commercial. Loaded only when the B variant is on. Overrides option A. */
body.v-b{--paper:#FFFFFF;--paper-2:#F4F3EF;--sheet:#FFFFFF;--hair:rgba(27,30,38,.14);background:#fff}
body.v-b .head{border-bottom:1px solid var(--hair);padding-block:.9rem}
body.v-b .logo{font-stretch:105%}
body.v-b .btn,body.v-b .bbtn{border-radius:8px}
body.v-b .btn:hover{box-shadow:none;transform:none;filter:brightness(1.08)}
body.v-b .head__call{border-radius:8px;font-size:1.05rem;padding:.8rem 1.3rem}
body.v-b .nav a{background:none}

/* hero: photo in colour, big phone */
.bhero{position:relative;min-height:min(86vh,46rem);display:grid;align-items:end;background:#1B1E26;color:#fff;overflow:hidden}
.bhero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% 55%;opacity:.9}
.bhero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,30,38,.92) 0%,rgba(27,30,38,.78) 38%,rgba(27,30,38,.15) 75%),linear-gradient(0deg,rgba(27,30,38,.7),transparent 45%)}
.bhero__in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;width:100%;padding:clamp(3rem,8vw,6rem) var(--gut)}
.bhero__h{font-family:var(--display);font-stretch:108%;font-weight:800;font-size:clamp(2.3rem,1rem + 4.4vw,4.9rem);line-height:1;letter-spacing:-.02em;margin:0;max-width:50rem;text-wrap:balance}
.bhero__p{font-size:clamp(1.1rem,1rem + .5vw,1.4rem);max-width:32rem;margin:1.2rem 0 0;line-height:1.4;color:#e8e6e0}
.bhero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:2rem 0 0}
.bbtn{display:inline-flex;align-items:center;justify-content:center;min-height:3.2rem;padding:.85rem 1.4rem;border-radius:8px;font:700 1.05rem/1 var(--display);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:filter .2s,background .2s}
.bbtn:hover{filter:brightness(1.1)}
.bbtn--xl{min-height:3.8rem;font-size:1.3rem;padding:1rem 1.8rem}
.bbtn--red{background:var(--red);color:#fff}
.bbtn--line{border-color:#fff;color:#fff}
.bbtn--dark{background:var(--ink);color:#fff}
.bbtn--white{background:#fff;color:var(--ink)}
.bbtn--outline{border-color:#fff;color:#fff}

/* facts strip */
.bfacts{border-bottom:1px solid var(--hair)}
.bfacts ul{list-style:none;margin:0 auto;padding:0;max-width:var(--max);display:grid;grid-template-columns:repeat(2,1fr)}
.bfacts li{padding:1.2rem var(--gut);border-top:1px solid var(--hair);display:grid;gap:.1rem}
.bfacts b{font-size:1.05rem}
.bfacts span{color:var(--muted);font-size:.92rem}
.is-staging .bfacts__live{display:none}
.is-clean .bfacts__live{display:inline!important}
@media (min-width:62rem){.bfacts ul{grid-template-columns:repeat(4,1fr)}.bfacts li{border-top:0;border-left:1px solid var(--hair);padding-block:1.6rem}.bfacts li:first-child{border-left:0}}

/* sections */
.bsec{max-width:none;padding:clamp(3.5rem,7vw,6rem) var(--gut)}
.bsec>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.bsec--tint{background:var(--paper-2)}
.bh2{font-family:var(--display);font-stretch:105%;font-weight:800;font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem);line-height:1.05;letter-spacing:-.015em;margin:0 auto 2rem}
.bcards{display:grid;gap:1.2rem}
.bcard{border:1px solid var(--hair);border-radius:14px;padding:1.5rem;display:grid;gap:.7rem;align-content:start;background:#fff}
.bcard h3{margin:0;font-size:1.4rem;font-stretch:105%;font-weight:800;line-height:1.1}
.bcard p{margin:0;color:var(--ink-2)}
.bcard__price{font-weight:700}
.bcard .bbtn{margin-top:.6rem}
.bcard__call{font-weight:700;color:var(--red);text-decoration:none;text-align:center;padding:.3rem 0}
.bcard__call:hover{text-decoration:underline}
@media (min-width:48rem){.bcards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:62rem){.bcards{grid-template-columns:repeat(4,1fr)}}
.bsteps{list-style:none;padding:0;display:grid;gap:1.6rem}
.bsteps li{display:grid;gap:.3rem}
.bsteps b{display:grid;place-content:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--red);color:#fff;font-size:1.2rem}
.bsteps h3{margin:.4rem 0 0;font-size:1.2rem}
.bsteps p{margin:0;color:var(--ink-2)}
@media (min-width:62rem){.bsteps{grid-template-columns:repeat(4,1fr);gap:2rem}}
.bphotos{display:grid;gap:1.2rem}
.bphotos figure{margin:0}
.bphotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.bphotos figcaption{font-size:.9rem;color:var(--muted);margin-top:.6rem}
@media (min-width:48rem){.bphotos{grid-template-columns:repeat(3,1fr)}}
body.v-b .faqlist details{border-color:var(--hair)}
body.v-b .faqlist details:last-child{border-color:var(--hair)}
.btext{font-weight:700}
.bcta{background:var(--red);color:#fff;padding:clamp(3rem,7vw,5.5rem) var(--gut);text-align:center;display:grid;gap:1.2rem;justify-items:center}
.bcta h2{margin:0;font-stretch:105%;font-weight:800;font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem);line-height:1.05}
.bcta .bbtn{min-width:min(100%,22rem)}

/* inner pages in B: lighter, no heavy rules or shadows */
body.v-b .pagehead__title,body.v-b .pagehead h1{font-stretch:105%;font-size:clamp(2rem,1.2rem + 3.6vw,4rem)}
body.v-b .pagebody{border-top:1px solid var(--hair)}
body.v-b .card{border-radius:14px;box-shadow:none;border:1px solid var(--hair);background:var(--paper-2)}
body.v-b .pfig img{aspect-ratio:16/9;border:0;border-radius:14px;box-shadow:none;filter:none}
body.v-b .callband{background:var(--red)}
body.v-b .foot{background:#14171d}
@media (max-width:520px){body.v-b .head__call{padding:.65rem .6rem;font-size:.85rem;min-height:2.7rem}.bhero{min-height:34rem}}

/* ---- option B: icons, NCT diagram, guides, areas, glance, related ---- */
.bcard__ico{display:grid;place-content:center;width:3rem;height:3rem;border-radius:12px;background:rgba(180,24,12,.1);color:var(--red)}
.bcards{grid-template-columns:1fr}
@media (min-width:48rem){.bcards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:62rem){.bcards{grid-template-columns:repeat(3,1fr)}}
body.v-b .nctpair{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:1.4rem}
body.v-b .nctlist li{border-color:var(--hair)}
body.v-b .nctlist b{border-radius:50%}
.bguides{display:grid;gap:1.2rem}
.bguide{display:grid;gap:.4rem;align-content:start;padding:1.4rem;border-radius:14px;background:#fff;border:1px solid var(--hair);text-decoration:none}
.bguide span{font-size:.85rem;color:var(--muted)}
.bguide strong{font-size:1.2rem;font-stretch:105%;line-height:1.2}
.bguide em{font-style:normal;color:var(--ink-2)}
.bguide:hover strong{color:var(--red)}
@media (min-width:48rem){.bguides{grid-template-columns:repeat(3,1fr)}}
.bareas{display:grid;gap:2rem;align-items:center}
.bareas__map{max-width:30rem;color:var(--ink)}
@media (min-width:62rem){.bareas{grid-template-columns:1fr 1fr;gap:4rem}}
body.v-b .glance{border:1px solid var(--hair);border-radius:12px;background:var(--paper-2);overflow:hidden}
body.v-b .glance div{border-color:var(--hair)}
body.v-b .related{border-top:1px solid var(--hair)}
body.v-b .prose .nctpair{box-shadow:none}

.bknow{display:grid;gap:1.2rem;margin-bottom:1.6rem}
.bknow__c{display:grid;gap:.4rem;align-content:start;padding:1.5rem;border-radius:14px;background:#fff;border:1px solid var(--hair)}
.bknow__c b{font-size:2.4rem;font-stretch:105%;font-weight:800;color:var(--red);line-height:1}
.bknow__c span{color:var(--ink-2)}
.bknow__c a,.bknow__c em{font-size:.85rem;color:var(--muted);font-style:normal}
@media (min-width:48rem){.bknow{grid-template-columns:repeat(2,1fr)}}
@media (min-width:62rem){.bknow{grid-template-columns:repeat(4,1fr)}}
body.v-b .know{border-color:var(--hair)}