/* Mobile Mechanic 247 · Option B premium layer (21/10/2026). Loaded after variant-b.css on every /b/ page. */
body.v-b{--pm-ink:#14161c;--pm-ink-2:#4b4f5a;--pm-red:#c41d10;--pm-red-2:#e2382a;--pm-bg:#f5f5f2;--pm-card:#fff;--pm-line:rgba(20,22,28,.08);--pm-ease:cubic-bezier(.32,.72,0,1);--pm-shadow:0 30px 70px -32px rgba(20,22,28,.35);background:var(--pm-bg);-webkit-font-smoothing:antialiased}
body.v-b:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.v-b a,body.v-b .bbtn,body.v-b .btn{transition:transform .6s var(--pm-ease),background .6s var(--pm-ease),color .6s var(--pm-ease),box-shadow .6s var(--pm-ease)}

/* floating island header */
body.v-b .head{position:sticky;top:12px;z-index:20;width:min(1240px,calc(100% - 2*var(--gut)));margin:12px auto 0;padding:.55rem .55rem .55rem 1.2rem;border:1px solid rgba(255,255,255,.8);border-radius:999px;background:rgba(255,255,255,.74);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 14px 40px -20px rgba(20,22,28,.4),inset 0 1px 0 #fff}
body.v-b .nav a{border-radius:999px;padding:.55rem .9rem}
body.v-b .nav a:hover{background:rgba(20,22,28,.06)}
body.v-b .head__call,body.v-b .btn.btn--red{border-radius:999px!important;padding:.5rem .5rem .5rem 1.2rem!important;display:inline-flex;align-items:center;gap:.7rem;background:var(--pm-ink);color:#fff;font-size:.98rem!important;box-shadow:0 14px 30px -14px rgba(20,22,28,.6)}
body.v-b .head__call:after{content:"↗";display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--pm-red);font-size:.9rem;transition:transform .6s var(--pm-ease)}
body.v-b .head__call:hover:after{transform:translate(2px,-2px) scale(1.06)}

/* island buttons */
body.v-b .bbtn{border-radius:999px!important;padding:.85rem 1.4rem;font-weight:700;letter-spacing:-.01em}
body.v-b .bbtn:active,body.v-b .btn:active{transform:scale(.98)}
body.v-b .bbtn--xl{display:inline-flex;align-items:center;gap:.9rem;padding:.6rem .6rem .6rem 1.6rem}
body.v-b .bbtn--xl:after{content:"↗";display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:rgba(0,0,0,.2);transition:transform .6s var(--pm-ease)}
body.v-b .bbtn--xl:hover:after{transform:translate(3px,-3px) scale(1.06)}
body.v-b .bbtn--red{background:linear-gradient(180deg,var(--pm-red-2),var(--pm-red));box-shadow:0 18px 40px -16px rgba(196,29,16,.7),inset 0 1px 0 rgba(255,255,255,.25)}
body.v-b .bbtn--white.bbtn--xl:after{background:var(--pm-red);color:#fff}
body.v-b .bbtn--line,body.v-b .bbtn--outline{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);backdrop-filter:none}
body.v-b .bbtn--dark{background:var(--pm-ink);box-shadow:0 12px 26px -14px rgba(20,22,28,.6)}

/* hero: framed cinematic panel instead of edge-to-edge */
body.v-b .bhero{width:min(1360px,calc(100% - 2*var(--gut)));margin:14px auto 0;min-height:min(78vh,44rem);border-radius:36px;box-shadow:var(--pm-shadow)}
body.v-b .bhero__img{transform:scale(1.04);animation:pm-kb 18s var(--pm-ease) infinite alternate}
@keyframes pm-kb{to{transform:scale(1.1) translate(-1%,-1%)}}
body.v-b .bhero:before{content:"Mobile Mechanic 247 · Dublin";position:absolute;z-index:2;top:clamp(1.5rem,4vw,3rem);left:clamp(1.5rem,4vw,3.2rem);padding:.45rem .9rem;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
body.v-b .bhero__in{padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,3.2rem)}
body.v-b .bhero__h{font-size:clamp(2.6rem,1rem + 5vw,5.8rem);letter-spacing:-.045em;line-height:.94}

/* facts: floating glass shelf overlapping the hero */
body.v-b .bfacts{position:relative;z-index:3;width:min(1240px,calc(100% - 2*var(--gut) - 2rem));margin:-3.2rem auto 0;padding:7px;border-radius:30px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px var(--pm-line),var(--pm-shadow);border:0}
body.v-b .bfacts ul{border-radius:24px;overflow:hidden;background:#fff;gap:0}
body.v-b .bfacts li{border:0!important;padding:1.3rem 1.5rem}
body.v-b .bfacts li+li{box-shadow:inset 1px 0 0 var(--pm-line)}
body.v-b .bfacts b{font-size:1.05rem;letter-spacing:-.02em}

/* sections */
body.v-b .bsec{padding-block:clamp(5rem,9vw,8.5rem)}
body.v-b .bsec--tint{background:transparent}
body.v-b .bsec--tint>*{position:relative}
body.v-b .bh2{font-size:clamp(2.2rem,1rem + 3.4vw,4.2rem);letter-spacing:-.045em;line-height:.98;max-width:none;text-wrap:balance}
body.v-b .bh2:before{content:attr(data-eyebrow);display:none}

/* service cards: double bezel */
body.v-b .bcards{gap:14px}
body.v-b .bcard{position:relative;border:0!important;border-radius:30px;padding:clamp(1.4rem,2.4vw,2rem);background:var(--pm-card);box-shadow:0 0 0 7px rgba(255,255,255,.55),0 0 0 8px var(--pm-line),var(--pm-shadow);transition:transform .8s var(--pm-ease),box-shadow .8s var(--pm-ease)}
body.v-b .bcard:hover{transform:translateY(-6px)}
body.v-b .bcard__ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:rgba(196,29,16,.08);color:var(--pm-red)}
body.v-b .bcard__ico .ico{stroke-width:1.3}
body.v-b .bcard h3{font-size:1.45rem;letter-spacing:-.03em}
body.v-b .bcard .bbtn{width:auto}
body.v-b .bcards .bcard:first-child{background:linear-gradient(160deg,#1d2028,#101217);color:#fff}
body.v-b .bcards .bcard:first-child p{color:rgba(255,255,255,.75)}
body.v-b .bcards .bcard:first-child .bcard__ico{background:rgba(255,255,255,.1);color:#ff7466}
body.v-b .bcards .bcard:first-child .bbtn--dark{background:#fff;color:var(--pm-ink)}
body.v-b .bcards .bcard:first-child .bcard__call{color:#ff8a7e}

/* steps */
body.v-b #how{background:var(--pm-ink);color:#fff;border-radius:44px;width:min(1360px,calc(100% - 2*var(--gut)));margin-inline:auto}
body.v-b #how .bh2{color:#fff}
body.v-b .bsteps{gap:12px}
body.v-b .bsteps li{padding:1.6rem;border-radius:26px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .7s var(--pm-ease),transform .7s var(--pm-ease)}
body.v-b .bsteps li:hover{background:rgba(255,255,255,.08);transform:translateY(-4px)}
body.v-b .bsteps b{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--pm-red);color:#fff}
body.v-b .bsteps p{color:rgba(255,255,255,.68)}

/* real jobs: bento */
body.v-b .bphotos{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(130px,13vw,200px);gap:14px}
body.v-b .bphotos figure{position:relative;margin:0;padding:6px;border-radius:30px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px var(--pm-line),var(--pm-shadow);overflow:hidden;grid-column:span 3;grid-row:span 2}
body.v-b .bphotos figure:nth-child(1){grid-column:span 6;grid-row:span 4}
body.v-b .bphotos img{width:100%;height:100%;object-fit:cover;border-radius:24px;aspect-ratio:auto!important;transition:transform 1.6s var(--pm-ease)}
body.v-b .bphotos figure:hover img{transform:scale(1.05)}
body.v-b .bphotos figcaption{position:absolute;left:18px;bottom:18px;right:18px;margin:0;padding:.55rem .9rem;border-radius:999px;width:max-content;max-width:calc(100% - 36px);background:rgba(20,22,28,.72);color:#fff;font-size:.8rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* faq */
body.v-b .faqlist details{border:0!important;border-radius:22px;background:#fff;margin-bottom:10px;box-shadow:inset 0 0 0 1px var(--pm-line);transition:box-shadow .6s var(--pm-ease)}
body.v-b .faqlist details[open]{box-shadow:inset 0 0 0 1px rgba(196,29,16,.3),0 18px 40px -26px rgba(20,22,28,.4)}
body.v-b .faqlist summary{padding:1.15rem 1.3rem}
body.v-b .faqlist details>*:not(summary){padding-inline:1.3rem}

/* nct, know, guides */
body.v-b .nctpair{border-radius:34px;background:#fff;box-shadow:0 0 0 7px rgba(255,255,255,.55),0 0 0 8px var(--pm-line),var(--pm-shadow);padding:clamp(1.5rem,3vw,2.5rem)}
body.v-b .bknow{gap:14px}
body.v-b .bknow__c{border:0!important;border-radius:28px;background:#fff;padding:1.8rem;box-shadow:inset 0 0 0 1px var(--pm-line),var(--pm-shadow);transition:transform .8s var(--pm-ease)}
body.v-b .bknow__c:hover{transform:translateY(-5px)}
body.v-b .bknow__c b{font-size:clamp(2.2rem,1rem + 2.6vw,3.4rem);letter-spacing:-.05em;color:var(--pm-red)}
body.v-b .bguides{gap:14px}
body.v-b .bguide{border:0!important;border-radius:28px;background:#fff;padding:1.8rem;box-shadow:inset 0 0 0 1px var(--pm-line);transition:transform .8s var(--pm-ease),box-shadow .8s var(--pm-ease)}
body.v-b .bguide:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px var(--pm-line),var(--pm-shadow)}
body.v-b .bareas{border-radius:40px;background:#fff;padding:clamp(1.5rem,4vw,3.5rem);box-shadow:inset 0 0 0 1px var(--pm-line),var(--pm-shadow)}

/* cta, footer, inner */
body.v-b .bcta{width:min(1360px,calc(100% - 2*var(--gut)));margin:0 auto clamp(2.5rem,5vw,4.5rem);border-radius:44px;background:radial-gradient(120% 140% at 0% 0%,#e2382a,#b4180c 50%,#6e0d06);box-shadow:0 40px 90px -40px rgba(180,24,12,.75)}
body.v-b .bcta h2{letter-spacing:-.045em}

body.v-b .callband{border-radius:36px;width:min(1360px,calc(100% - 2*var(--gut)));margin-inline:auto}
body.v-b .card,body.v-b .glance{border-radius:26px}
body.v-b .pfig img{border-radius:28px}
body.v-b .callbar{left:12px;right:12px;bottom:12px;border-radius:999px;overflow:hidden;box-shadow:0 20px 40px -16px rgba(0,0,0,.5)}

/* reveal */
body.v-b .rv{opacity:0;transform:translateY(36px);filter:blur(8px);transition:opacity 1s var(--pm-ease),transform 1s var(--pm-ease),filter 1s var(--pm-ease)}
body.v-b .rv.in{opacity:1;transform:none;filter:none}

@media(max-width:47.99rem){
  body.v-b .head{top:8px;padding-left:1rem}
  body.v-b .bhero{border-radius:28px;min-height:34rem}
  body.v-b .bhero:before{top:1.2rem;left:1.2rem;font-size:.62rem}
  body.v-b .bfacts{width:calc(100% - 2*var(--gut));margin-top:-2rem}
  body.v-b .bfacts li+li{box-shadow:inset 0 1px 0 var(--pm-line)}
  body.v-b #how{border-radius:30px}
  body.v-b .bphotos{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
  body.v-b .bphotos figure:nth-child(1){grid-column:span 2;grid-row:span 2}
  body.v-b .bphotos figure:nth-child(n+2){grid-column:span 1;grid-row:span 1}
  body.v-b .bphotos figcaption{display:none}
  body.v-b .bcta{border-radius:30px}
}
@media(prefers-reduced-motion:reduce){body.v-b *{animation:none!important}body.v-b .rv{opacity:1;transform:none;filter:none}}
body.v-b .menu summary{border-radius:50%}
/* AI imagery (21/10): service card photos, areas banner, discreet label */
body.v-b .ai-note{position:absolute;z-index:3;right:12px;bottom:12px;padding:.25rem .6rem;border-radius:999px;background:rgba(20,22,28,.55);color:rgba(255,255,255,.85);font-size:.62rem;letter-spacing:.06em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}
body.v-b .ai-note--hero{right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,1.6rem)}
body.v-b .bcard--img{padding-top:clamp(.5rem,.8vw,.6rem)}
body.v-b .bcard__fig{position:relative;margin:0 0 1.2rem;border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:#e9e8e3}
body.v-b .bcard__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--pm-ease)}
body.v-b .bcard:hover .bcard__fig img{transform:scale(1.06)}
body.v-b .bcard--img .bcard__ico{position:absolute;top:1.4rem;left:1.4rem;z-index:2;background:rgba(255,255,255,.9);backdrop-filter:blur(6px)}
body.v-b .bcards .bcard:first-child .bcard__ico{background:rgba(20,22,28,.7)}
body.v-b .bareas__photo{position:relative;margin:0 auto 14px;max-width:var(--max);border-radius:40px;overflow:hidden;box-shadow:var(--pm-shadow);aspect-ratio:21/8}
body.v-b .bareas__photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:47.99rem){body.v-b .bareas__photo{border-radius:26px;aspect-ratio:16/9}}

/* 22/10: hide internal "confirm" placeholders until Cameron sends the details */
.ph, .price--ph { display: none !important; }