/* ABI Landing Pages — matches approved mockup design */
:root{
  --blue:#1b2fd9;
  --blue-dark:#1322a8;
  --blue-light:#eef1ff;
  --red:#e02b20;
  --ink:#10131a;
  --ink-soft:#3c4250;
  --line:#e3e6ee;
  --bg:#ffffff;
  --radius:12px;
  --shadow:0 10px 30px rgba(16,19,26,.18);
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --script:'Caveat',cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1240px,92%);margin-inline:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;border:none;cursor:pointer;border-radius:10px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;font-family:inherit}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(27,47,217,.35)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dark)}

/* ── Top offer bar ───────────────────────── */
.topbar{background:var(--blue);color:#fff;text-align:center;padding:.55rem 1rem;font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* ── Header ──────────────────────────────── */
.hdr{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.hdr-in{display:flex;align-items:center;gap:1rem;padding:.7rem 0;width:min(1400px,94%);margin-inline:auto}
.logo{display:flex;align-items:baseline;gap:.5rem;flex-shrink:0}
.logo-abi{font-size:2.1rem;font-weight:800;color:var(--blue);letter-spacing:-.03em;line-height:1}
.logo-words{font-size:.8rem;font-weight:700;color:var(--blue);line-height:1.15;text-transform:uppercase;letter-spacing:.02em}
.hdr-phones{display:flex;gap:.8rem;margin-left:auto;align-items:center}
.phone-pill{display:inline-flex;align-items:center;gap:.5rem;border:1.6px solid var(--blue,#1b2fd9);border-radius:999px;padding:.5rem 1.05rem;font-weight:800;font-size:.92rem;white-space:nowrap;color:var(--blue,#1b2fd9);transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.phone-pill:hover{background:var(--blue,#1b2fd9);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(27,47,217,.3)}
.phone-pill:hover svg{color:#fff}
.phone-pill svg{flex-shrink:0;color:var(--blue)}
.btn-call{padding:.65rem 2rem;font-size:.95rem}
.hamburger{background:none;border:none;cursor:pointer;padding:.4rem;display:flex;flex-direction:column;gap:5px}
.hamburger span{width:24px;height:2.5px;background:var(--ink);border-radius:2px}
.nav-drawer{display:none;background:#fff;border-bottom:1px solid var(--line)}
.nav-drawer.open{display:block}
.nav-drawer a{display:block;padding:.8rem 0;border-top:1px solid var(--line);font-weight:500}

/* ── Urgency strip ───────────────────────── */
.urgency{text-align:center;padding:.9rem 1rem .2rem}
.urgency-flame{color:var(--red);font-weight:700;font-size:1.15rem;letter-spacing:.02em}
.urgency-sub{font-size:.98rem;color:var(--ink)}
.startpill-wrap{display:flex;justify-content:center;padding:.7rem 1rem 1rem}
.startpill{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--line);border-radius:999px;padding:.55rem 1.4rem;font-size:.95rem;font-weight:600;box-shadow:0 2px 10px rgba(16,19,26,.06)}
.startpill .dot{color:var(--blue)}
.startpill b{color:var(--blue)}

/* ── Hero ────────────────────────────────── */
.hero{position:relative;background:var(--ink);color:#fff}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:1}
.hero-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hero-in{z-index:2}
/* Real animated ABI logo (abi-logo.gif) — interactive/alive */
.logo-img{height:48px;width:auto;display:block;transition:transform .25s ease,filter .25s ease}
.logo{display:inline-flex;align-items:center}
.logo:hover .logo-img{transform:scale(1.04);filter:drop-shadow(0 4px 14px rgba(27,63,217,.4))}
@media (max-width:768px){.logo-img{height:40px}}
@media (max-width:400px){.logo-img{height:34px}}
.foot-logo{height:52px;width:auto;background:#fff;padding:6px 10px;border-radius:8px;margin-bottom:1rem;display:block}
/* Schedule page */
.date-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-top:1.4rem}
.date-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1rem;text-align:center;box-shadow:0 4px 16px rgba(15,20,32,.06);position:relative}
.date-card .d-mo{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);font-weight:800}
.date-card .d-day{display:block;font-family:'Oswald',sans-serif;font-size:2.4rem;font-weight:700;line-height:1.1;color:var(--ink,#0f1420)}
.date-card .d-dow{display:block;font-size:.82rem;color:#6b7280}
.date-card .d-tag{display:inline-block;margin-top:.4rem;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:var(--gold);color:#1a1205;padding:.2rem .6rem;border-radius:50px}
.date-card.date-next{outline:2px solid var(--gold);box-shadow:0 8px 26px rgba(229,160,25,.3)}
.campus-head{color:#fff;font-size:1.25rem;margin:0 0 1rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem}
.campus-head span{font-size:.9rem;font-weight:600;color:var(--gold-bright,#f4c44a)}
.campus-head a{color:var(--gold-bright,#f4c44a)}
.visit-card-lite{background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:14px;padding:1.3rem}
.visit-card-lite h3{margin:0 0 .3rem}
.visit-card-lite a{color:var(--blue);font-weight:700}
@media (max-width:560px){.date-card .d-day{font-size:2rem}}
/* Feature grid (Why Choose ABI) */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:1.4rem}
.feature{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:14px;padding:1.4rem;box-shadow:0 4px 16px rgba(15,20,32,.06);border-top:3px solid var(--blue)}
.feature h3{margin:0 0 .4rem;font-size:1.1rem}
.feature p{margin:0;color:#4b5563}
/* Mobile Call Now → English/Spanish chooser */
.mobile-cta .call{display:flex;align-items:center;justify-content:center;gap:.45rem;background:var(--ink,#0f1420);color:#fff;border:none;cursor:pointer;font:inherit;font-size:1rem;font-weight:800}
.call-sheet{position:fixed;left:8px;right:8px;bottom:64px;z-index:95;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 -10px 34px rgba(0,0,0,.28);padding:.7rem;display:grid;gap:.45rem;animation:csIn .2s ease}
.call-sheet[hidden]{display:none}
@keyframes csIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.call-sheet-h{margin:.2rem .4rem;font-size:.74rem;font-weight:800;color:#6b7280;text-transform:uppercase;letter-spacing:.07em}
.call-sheet a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.1rem;border-radius:12px;background:var(--blue-light,#eef0ff);color:var(--blue);text-decoration:none}
.call-sheet a:active{background:var(--blue);color:#fff}
.cs-lang{font-weight:800}.cs-num{font-variant-numeric:tabular-nums;font-weight:700}
/* ═══════════ v29 — hamburger-only nav, icon socials, bigger theme switcher ═══════════ */
/* Hide inline nav on ALL widths — everything lives in the hamburger menu */
.mainnav{display:none!important}
.hamburger{display:flex!important;margin-left:1.1rem;width:44px;height:40px;align-items:center;justify-content:center;gap:5px;border-radius:10px;transition:background .2s ease}
.hamburger:hover{background:rgba(27,63,217,.08)}
.hamburger span{width:26px;height:3px;background:var(--ink,#0f1420);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* Mobile menu: OPAQUE panel (no bleed-through), internally SCROLLABLE, and padded so the
   last item always clears the fixed 3-button sticky CTA. JS sets an exact max-height on open. */
.nav-drawer{position:absolute;left:0;right:0;top:100%;z-index:80;background:#fff;box-shadow:0 18px 44px rgba(0,0,0,.28);max-height:calc(100dvh - 116px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.nav-drawer .container{display:flex;flex-direction:column;width:min(1100px,94%);margin-inline:auto;padding:.4rem 0 calc(84px + env(safe-area-inset-bottom))}
.nav-drawer a{font-size:1.06rem;font-weight:600;padding:.95rem .4rem;border-top:1px solid rgba(15,20,32,.08);color:var(--ink,#0f1420)}
.nav-drawer a:first-child{border-top:none}
.nav-drawer a:hover{color:var(--blue)}
/* Hide the floating chat bubble on mobile — the 3-action sticky bar (Call/Text/Apply) covers
   contact and the bubble was overlapping it. Phone numbers stay visible in the header row. */
@media (max-width:1080px){.bubble,.bubble-tip{display:none!important}}
/* Mobile header phones: clean centered row (numbers only, labels hidden) below logo row. */
@media (max-width:768px){.hdr-phones{justify-content:center}.hdr-phones .phone-pill{font-size:.86rem;padding:.45rem .9rem}}
/* Social icons — bigger, interactive, pop to link */
.socials{display:flex;gap:.55rem;margin-top:1rem}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);transition:transform .2s cubic-bezier(.2,.7,.2,1),background .2s ease}
.socials a svg{width:22px;height:22px}
.socials a:hover{transform:translateY(-4px) scale(1.14);background:var(--gold)}
.socials a:hover svg{color:#1a1205}
/* Theme switcher — bigger, glowing, with a popping sweep on change */
.theme-dots{gap:11px}
.tdot{width:22px;height:22px;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 8px 1px currentColor}
.tdot:hover{transform:scale(1.35)}
.tdot[aria-pressed="true"]{outline:3px solid #fff;outline-offset:2px;transform:scale(1.18)}
@media (max-width:840px){.theme-dots{display:flex!important;gap:9px}.tdot{width:18px;height:18px}}
.theme-sweep{position:fixed;inset:0;z-index:9999;pointer-events:none;background:radial-gradient(circle at var(--sx,50%) 0%,var(--blue) 0%,transparent 55%);opacity:0;animation:themeSweep .62s ease forwards;filter:brightness(1.4)}
@keyframes themeSweep{0%{opacity:0;transform:scale(.4)}35%{opacity:.55}100%{opacity:0;transform:scale(1.6)}}
body,.hdr,.btn-gold,.btn-blue,.trust-strip,.cta-band,.foot-cta,.topbar{transition:background-color .5s ease,color .45s ease,box-shadow .4s ease}
.hero-grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,16,.82) 0%,rgba(8,10,16,.45) 55%,rgba(8,10,16,.25) 100%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;padding:3.2rem 0 3.6rem;align-items:start}
.hero-copy{padding-top:1.2rem}
.hero-h1{font-size:clamp(2.4rem,5vw,4.1rem);font-weight:800;line-height:1.06;letter-spacing:-.02em}
.hero-h1 .accent{color:var(--blue);filter:brightness(1.35)}
.hero-script{font-family:var(--script);font-size:clamp(2.6rem,5vw,4.2rem);font-weight:700;display:inline-block;position:relative;padding-bottom:.35rem;line-height:1}
.hero-script::after{content:"";position:absolute;left:0;right:14%;bottom:0;height:5px;background:var(--blue);border-radius:3px;filter:brightness(1.35)}
.hero-sub{margin-top:1.3rem;font-size:1.08rem;max-width:34rem;color:#e8eaf2}
.hero-sub b{color:#fff}
.features{margin-top:1.8rem;display:grid;grid-template-columns:repeat(3,1fr);max-width:42rem}
.features .feature{display:flex;gap:.7rem;align-items:flex-start;padding:.9rem .9rem .9rem 0;font-size:.85rem;line-height:1.35;border-top:1px solid rgba(255,255,255,.25)}
.features .feature:nth-child(-n+3){border-top:none;border-bottom:1px solid rgba(255,255,255,.25)}
.features .feature+.feature{border-left:1px solid rgba(255,255,255,.25);padding-left:.9rem}
.features .feature:nth-child(4){border-left:none;padding-left:0}
.features .feature svg{flex-shrink:0;color:var(--blue);filter:brightness(1.6);margin-top:.1rem}

/* ── Form card ───────────────────────────── */
.formcard{background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem 1.7rem 1.7rem}
.formcard-head{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1rem}
.formcard-ico{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.formcard-title{font-size:1.35rem;font-weight:700;line-height:1.2}
.formcard-sub{font-size:.86rem;color:var(--ink-soft);margin-top:.15rem}
.field{margin-bottom:.85rem}
.field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.3rem}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:.65rem .8rem;font-size:.92rem;font-family:inherit;color:var(--ink);background:#fff;appearance:none}
.field input::placeholder{color:#9aa0ad}
.field input:focus,.field select:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.field.has-ico{position:relative}
.field.has-ico svg{position:absolute;left:.8rem;bottom:.78rem;color:#9aa0ad;pointer-events:none}
.field.has-ico input{padding-left:2.3rem}
.field.select{position:relative}
.field.select::after{content:"";position:absolute;right:1rem;bottom:1.05rem;width:8px;height:8px;border-right:2px solid #7c8290;border-bottom:2px solid #7c8290;transform:rotate(45deg);pointer-events:none}
.btn-submit{width:100%;padding:.95rem;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;margin-top:.4rem}
.form-consent{font-size:.7rem;color:#8a90a0;margin-top:.7rem;line-height:1.4}
.form-success{display:none;text-align:center;padding:2.5rem 1rem}
.form-success.show{display:block}
.form-success h3{font-size:1.3rem;margin:.8rem 0 .4rem}
.form-error{display:none;color:var(--red);font-size:.85rem;margin-top:.6rem;text-align:center}

/* ── Trust bar ───────────────────────────── */
.trust{border-top:1px solid var(--line);background:#fff}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.6rem 0}
.trust-item{display:flex;gap:.9rem;align-items:center;justify-content:center;font-size:.92rem;font-weight:600;line-height:1.35;padding:0 1rem}
.trust-item+.trust-item{border-left:1px solid var(--line)}
.trust-item svg{flex-shrink:0;color:var(--blue)}

/* ── Generic sections ────────────────────── */
.sec{padding:3.6rem 0}
.sec-alt{background:#f7f8fc}
.eyebrow{color:var(--blue);font-weight:700;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase}
.sec h2{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:800;letter-spacing:-.01em;margin:.4rem 0 1rem}
.sec .lead{color:var(--ink-soft);max-width:46rem}
.prose p{margin-bottom:1rem;color:var(--ink-soft);max-width:50rem}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start}
.split img{border-radius:var(--radius)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.45rem 1rem;font-size:.85rem;font-weight:500}
.chip::before{content:"";color:var(--blue)}

/* curriculum accordion */
.acc{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.acc-item+.acc-item{border-top:1px solid var(--line)}
.acc-btn{width:100%;display:flex;align-items:center;gap:1rem;background:none;border:none;padding:1.1rem 1.3rem;font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;text-align:left;color:var(--ink)}
.acc-num{color:var(--blue);font-weight:800;font-size:.9rem}
.acc-btn .chev{margin-left:auto;transition:transform .2s}
.acc-item.open .chev{transform:rotate(180deg)}
.acc-body{display:none;padding:0 1.3rem 1.2rem 3.3rem}
.acc-item.open .acc-body{display:block}
.acc-body li{color:var(--ink-soft);margin-bottom:.35rem;font-size:.94rem}

/* tuition */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem}
.plan{border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.5rem;background:#fff;position:relative;display:flex;flex-direction:column}
.plan.popular{border:2px solid var(--blue);box-shadow:0 12px 32px rgba(27,47,217,.14)}
.plan-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .9rem;border-radius:999px;white-space:nowrap}
.plan-name{font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.plan-sched{font-weight:600;margin:.5rem 0 .2rem}
.plan-hours{font-size:.85rem;color:var(--ink-soft)}
.plan-price{font-size:2.3rem;font-weight:800;margin:.9rem 0 .2rem;color:var(--ink)}
.plan-terms{font-size:.88rem;color:var(--ink-soft);margin-bottom:1.2rem}
.plan .btn{margin-top:auto;padding:.75rem;font-size:.9rem}
.plans-note{font-size:.82rem;color:var(--ink-soft);margin-top:1.4rem;max-width:48rem}

/* requirements */
.reqs{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 2rem;margin-top:1.6rem;max-width:52rem}
.req-item{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem}
.req-item svg{flex-shrink:0;color:var(--blue);margin-top:.2rem}

/* why bullets (location pages) */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.why-item{border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;background:#fff;font-size:.93rem}
.why-item svg{color:var(--blue);margin-bottom:.6rem}
.why-item b{display:block;margin-bottom:.3rem}

/* campus card */
.campus{border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;background:#fff;max-width:30rem}
.campus h3{font-size:1.15rem;margin-bottom:.4rem}
.campus p{color:var(--ink-soft);font-size:.94rem;margin-bottom:.3rem}
.campus a.maplink{color:var(--blue);font-weight:600;font-size:.9rem}

/* testimonials */
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem}
.testi-card{border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;background:#fff}
.stars{color:#f5a623;letter-spacing:.15em;margin-bottom:.7rem}
.testi-card p{font-size:.92rem;color:var(--ink-soft);margin-bottom:1rem}
.testi-who{display:flex;align-items:center;gap:.7rem;font-size:.85rem}
.testi-av{width:38px;height:38px;border-radius:50%;background:var(--blue-light);color:var(--blue);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.8rem}
.testi-who b{display:block}
.testi-who span{color:var(--ink-soft)}

/* steps (splash) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem}
.step{border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;background:#fff}
.step-num{font-size:2rem;font-weight:800;color:var(--blue);opacity:1}
.step b{display:block;margin:.5rem 0 .3rem;font-size:1.05rem}
.step p{font-size:.92rem;color:var(--ink-soft)}

/* earnings (splash) */
.earn{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem}
.earn-card{border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;background:#fff;position:relative}
.earn-card.mid{border:2px solid var(--blue)}
.earn-yr{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.earn-amt{font-size:1.7rem;font-weight:800;color:var(--blue);margin:.5rem 0 .2rem}
.earn-card p{font-size:.88rem;color:var(--ink-soft)}
.earn-note{font-size:.75rem;color:#8a90a0;margin-top:1.2rem;max-width:46rem}

/* countdown */
.count{display:flex;gap:1rem;justify-content:center;margin:1.6rem 0}
.count-cell{background:#fff;border:1px solid var(--line);border-radius:10px;min-width:84px;padding:.9rem .6rem;text-align:center}
.count-cell b{display:block;font-size:1.9rem;font-weight:800;color:var(--blue)}
.count-cell span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* closing CTA */
.closing{background:var(--ink);color:#fff;text-align:center;padding:4rem 0}
.closing h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;margin-bottom:.7rem}
.closing p{color:#c9cdd9;max-width:38rem;margin:0 auto 1.8rem}
.closing .btn{padding:.95rem 2.4rem;font-size:1rem}
.closing .tel{display:inline-flex;margin-left:1rem;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:.95rem 2rem;font-weight:600}

/* footer */
.ftr{background:#0b0d12;color:#b9bec9;font-size:.85rem;padding:2.6rem 0 5.5rem}
.ftr-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem}
.ftr h4{color:#fff;font-size:.95rem;margin-bottom:.7rem}
.ftr a{display:block;padding:.18rem 0}
.ftr a:hover{color:#fff}
.ftr-legal{margin-top:2rem;padding-top:1.4rem;border-top:1px solid #23262e;font-size:.74rem;color:#7b8090}

/* sticky mobile bar */
/* Premium 3-action sticky bar (Call / Text / Apply) — dark bar, rounded pill buttons,
   icons, generous tap targets. Mirrors the polished 10-site sticky-call treatment. */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:8px;padding:9px 11px calc(9px + env(safe-area-inset-bottom,0));background:#0d1017;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -10px 30px rgba(0,0,0,.5)}
.mbar a{flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:12px;font-weight:800;font-size:clamp(.6rem,2.7vw,.82rem);letter-spacing:.01em;text-transform:uppercase;line-height:1;white-space:nowrap;text-decoration:none;transition:transform .15s ease,filter .15s ease}
.mbar a:active{transform:translateY(1px)}
.mbar a:hover{filter:brightness(1.06)}
.mbar a svg{flex-shrink:0;width:16px;height:16px}
.mbar .mbar-call{background:transparent;color:#fff;border:1.6px solid rgba(255,255,255,.55)}
.mbar .mbar-text{background:var(--blue,#1b2fd9);color:#fff}
.mbar .mbar-cta{background:var(--gold,#e5a019);color:#1a1205}
@media (max-width:340px){.mbar a{gap:4px;font-size:.56rem}.mbar a svg{width:13px;height:13px}}

/* chat-style bubble → scrolls to form */
.bubble{position:fixed;right:1.4rem;bottom:1.6rem;z-index:80;width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;border:none;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;transition:transform .15s}
.bubble:hover{transform:scale(1.07)}
.bubble-tip{position:fixed;right:5.6rem;bottom:2rem;z-index:80;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:.9rem 1.1rem;font-size:.88rem;max-width:230px;display:none}
.bubble-tip.show{display:block}
.bubble-tip .tip-x{position:absolute;top:.35rem;right:.55rem;border:none;background:none;cursor:pointer;font-size:.9rem;color:#9aa0ad}

/* exit intent */
.exit{position:fixed;inset:0;z-index:90;background:rgba(10,12,18,.6);display:none;align-items:center;justify-content:center;padding:1rem}
.exit.show{display:flex}
.exit-card{background:#fff;border-radius:var(--radius);max-width:430px;padding:2.2rem;text-align:center;position:relative}
.exit-card h3{font-size:1.45rem;margin-bottom:.6rem}
.exit-card p{color:var(--ink-soft);font-size:.95rem;margin-bottom:1.4rem}
.exit-x{position:absolute;top:.7rem;right:1rem;border:none;background:none;font-size:1.3rem;cursor:pointer;color:#9aa0ad}

/* reveal on scroll (only when JS is running) */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── Responsive ──────────────────────────── */
@media (max-width:1080px){
  .hero-in{grid-template-columns:1fr;gap:2.2rem}
  .hero-grad{background:linear-gradient(180deg,rgba(8,10,16,.85) 0%,rgba(8,10,16,.55) 100%)}
  .hdr-phones .phone-pill span.lbl{display:none}
}
/* v16.3 — Mobile hero (per client mockup): the bright white-walled barbershop
   portrait shows at NATURAL aspect (538x800), anchored to the TOP of the hero,
   spanning full mobile width. No stretching, no awkward cropping. Below the
   photo the hero fades into solid dark navy so the headline overlay near the
   photo's bottom reads cleanly. The kenburns pan is disabled on mobile so the
   image stays put. */
@media (max-width:768px){
  .hero{background-color:#0a1020}
  .hero .hero-bg{
    background-image:url('/assets/img/hero-barber-clinic-2.jpg')!important;
    background-size:contain!important;          /* show whole image, no crop */
    background-position:top center!important;   /* anchor at top */
    background-repeat:no-repeat!important;
    background-color:#0a1020;
    animation:none!important;
    transform:none!important;
  }
  html.js .hero-bg{animation:none!important;transform:none!important}
  /* Soft gradient: nearly transparent over the photo's top/middle, deepening to
     solid dark at the bottom so the headline overlay sits readable on the
     photo's lower portion. */
  .hero .hero-grad{
    background:linear-gradient(180deg,
      rgba(8,10,16,.05) 0%,
      rgba(8,10,16,.05) 50%,
      rgba(8,10,16,.45) 75%,
      rgba(8,10,16,.92) 95%,
      #0a1020 100%
    )!important;
  }
  /* Push hero copy down so the H1 overlays the bottom ~30% of the photo,
     matching the mockup. Image height = 100vw * (800/538) ≈ 148.7vw; we want
     copy to start around 65–70% down the image = ~100vw from the top. */
  .hero-in{padding-top:0!important}
  .hero-copy{padding-top:100vw!important}
  /* Mobile order (client v135): PHOTO+H1 → sub → trust list → countdown → FORM.
     .hero-copy becomes display:contents so its children join the hero-in
     flex flow and the formcard can slot in after them. The 100vw photo
     spacer stays on the H1 since a contents box has no padding. */
  .hero-in{display:flex;flex-direction:column;gap:0}
  .hero-copy{display:contents}
  .hero-h1{order:1;padding-top:68vw}
  .hero-sub{order:2;margin-top:.9rem}
  .hero-copy .features{order:3;margin-top:1.6rem}
  .hero-copy .hero-cd{order:4;margin-top:1.4rem}
  .hero-in .formcard{order:5;margin-top:1.6rem}
}
@media (max-width:840px){
  .topbar{font-size:.68rem;letter-spacing:.1em}
  .btn-call{display:none}
  .hdr-phones{gap:.5rem}
  .phone-pill{padding:.5rem .8rem;font-size:.85rem}
  .trust-in{grid-template-columns:repeat(2,1fr);gap:1.4rem 0}
  .trust-item{justify-content:flex-start}
  .trust-item:nth-child(3){border-left:none}
  .split,.plans,.testi,.why,.steps,.earn{grid-template-columns:1fr}
  .reqs{grid-template-columns:1fr}
  .features{grid-template-columns:repeat(2,1fr)}
  .features .feature{border:none!important;padding-left:0!important}
  .features .feature{border-bottom:1px solid rgba(255,255,255,.2)!important}
  .mbar{display:flex}
  .ftr{padding-bottom:7.5rem}
  .bubble{bottom:5.2rem}
  .bubble-tip{bottom:5.6rem}
  .ftr-in{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hdr-phones{flex-direction:column;gap:.35rem;align-items:stretch}
  .phone-pill{justify-content:center}
  .formcard{padding:1.3rem 1.2rem}
}

/* ── Full main nav on landing pages ───────── */
.mainnav{display:flex;gap:1.5rem;justify-content:center;align-items:center;border-top:1px solid var(--line);padding:.55rem 1rem;font-size:.92rem;font-weight:500;flex-wrap:wrap}
.mainnav>a:hover{color:var(--blue)}
.mn-sub{position:relative}
.mn-sub>a{display:inline-flex;align-items:center;gap:.25rem}
.mn-sub>a svg{margin-top:1px}
.mn-drop{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:.5rem 0;min-width:220px;z-index:85}
.mn-sub:hover .mn-drop,.mn-sub:focus-within .mn-drop{display:block}
.mn-drop a{display:block;padding:.45rem 1.2rem;white-space:nowrap}
.mn-drop a:hover{background:var(--blue-light);color:var(--blue)}
.mn-lang{border:1px solid var(--line);border-radius:8px;padding:.2rem .65rem;font-weight:600;color:#8a90a0}
.mn-lang a:hover{color:var(--blue)}
@media (max-width:1080px){.mainnav{display:none}}

/* ── Multiple themes (synced with interior pages via abi-theme) ── */
html[data-theme="midnight"]{--blue:#c9a227;--blue-dark:#a98b1f;--blue-light:#faf3dd;--on-accent:#14110a}
html[data-theme="classic"]{--blue:#b22234;--blue-dark:#8e1b2a;--blue-light:#fdeef0;--on-accent:#ffffff}
html[data-theme="emerald"]{--blue:#0e8f62;--blue-dark:#0a6e4b;--blue-light:#e8f7f1;--on-accent:#ffffff}
html[data-theme="noir"]{--blue:#c8102e;--blue-dark:#a00d25;--blue-light:#fdecef;--on-accent:#ffffff}
:root{--on-accent:#ffffff}
.btn-blue,.mbar .mbar-cta,.btn-submit,.formcard-ico{color:var(--on-accent)}
.btn-blue{color:var(--on-accent)}

/* theme dots in topbar */
.topbar{position:relative}
.theme-dots{position:absolute;right:1rem;top:50%;transform:translateY(-50%);display:flex;gap:7px;align-items:center}
.tdot{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.75);cursor:pointer;padding:0;transition:transform .15s}
.tdot:hover{transform:scale(1.25)}
.tdot[aria-pressed="true"]{outline:2px solid #fff;outline-offset:1px}
.tdot-blue{background:#1b2fd9}.tdot-midnight{background:#c9a227}.tdot-classic{background:#b22234}.tdot-emerald{background:#0e8f62}.tdot-noir{background:#c8102e}
@media (max-width:840px){.theme-dots{display:none}}

/* ── Glassmorphism ───────────────────────── */
.hdr{background:rgba(255,255,255,.78);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5)}
.mainnav{background:rgba(255,255,255,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.formcard{background:rgba(255,255,255,.88);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.65)}
.startpill{background:rgba(255,255,255,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.count-cell{background:rgba(255,255,255,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chip{background:rgba(255,255,255,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.exit-card{background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.bubble-tip{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* keep theme dots clear of topbar text */
.topbar{padding-left:8.5rem;padding-right:8.5rem}
@media (max-width:840px){.topbar{padding-left:1rem;padding-right:1rem}}

/* ── Enrichment: videos, gallery, start dates, FAQ ── */
.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.yt{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;aspect-ratio:16/9;background:#000;border:none;padding:0;display:block;width:100%}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.88;display:block}
.yt .play{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .15s}
.yt:hover .play{transform:scale(1.1)}
.yt .play::after{content:"";margin-left:4px;border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-cap{font-size:.85rem;color:var(--ink-soft);margin-top:.5rem}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:2rem}
.gal a{border-radius:10px;overflow:hidden;display:block;aspect-ratio:4/3}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.gal a:hover img{transform:scale(1.06)}
.dates{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.date-pill{border:1px solid var(--line);border-radius:999px;padding:.5rem 1.1rem;font-size:.9rem;font-weight:600;background:rgba(255,255,255,.8)}
.date-pill.next{background:var(--blue);color:var(--on-accent);border-color:var(--blue)}
.greview{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;font-weight:600;color:var(--blue)}
.f-social{margin-top:.9rem;font-size:.85rem}
.f-social a{display:inline !important;padding:0 !important}
@media (max-width:840px){.videos{grid-template-columns:1fr}.gal{grid-template-columns:repeat(2,1fr)}}

/* ══ ALIVE: glow + motion + deep glass ══ */
/* hero photo slow ken-burns */
html.js .hero-bg{animation:kenburns 24s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
/* script underline draws itself */
html.js .hero-script::after{animation:draw 1.2s .4s ease both}
@keyframes draw{from{right:100%}to{right:14%}}
/* topbar shimmer */
.topbar{background:linear-gradient(100deg,var(--blue) 0%,var(--blue-dark) 35%,var(--blue) 60%,var(--blue-dark) 100%);background-size:220% 100%;animation:shimmer 9s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}
/* glowing accents */
.btn-blue:hover{box-shadow:0 6px 26px color-mix(in srgb,var(--blue) 55%,transparent)}
html.js .btn-submit{animation:glowpulse 2.6s ease-in-out infinite}
@keyframes glowpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--blue) 45%,transparent)}50%{box-shadow:0 0 22px 2px color-mix(in srgb,var(--blue) 45%,transparent)}}
.tdot{box-shadow:0 0 7px 1px currentColor}
.hero-h1 .accent{text-shadow:0 0 34px color-mix(in srgb,var(--blue) 65%,transparent)}
.startpill b{text-shadow:0 0 14px color-mix(in srgb,var(--blue) 40%,transparent)}
html.js .bubble{animation:ring 3s ease-out infinite}
@keyframes ring{0%{box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 0 color-mix(in srgb,var(--red) 55%,transparent)}70%{box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 16px transparent}100%{box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 0 transparent}}
/* glass cards everywhere + lift on hover */
.plan,.testi-card,.why-item,.step,.earn-card,.acc,.campus{background:rgba(255,255,255,.72);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3)}
.plan,.testi-card,.why-item,.step,.earn-card{transition:transform .25s ease,box-shadow .25s ease}
.plan:hover,.testi-card:hover,.why-item:hover,.step:hover,.earn-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px color-mix(in srgb,var(--blue) 18%,rgba(16,19,26,.12))}
.sec-alt{background:linear-gradient(180deg,#f7f8fc 0%,color-mix(in srgb,var(--blue) 4%,#f7f8fc) 100%)}
/* skills ticker marquee */
.ticker{background:var(--ink);color:#fff;overflow:hidden;padding:.7rem 0;white-space:nowrap}
.ticker-track{display:inline-block;animation:ticker 36s linear infinite}
.ticker span{margin:0 1.1rem;font-weight:600;font-size:.92rem;letter-spacing:.04em}
.ticker .sc{color:var(--blue);filter:brightness(1.6)}
@keyframes ticker{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}
/* animated stats band */
.stats{background:var(--blue);color:var(--on-accent);padding:2.6rem 0;transition:background .3s}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.stat b{display:block;font-size:2.4rem;font-weight:800;line-height:1.1}
.stat span{font-size:.85rem;opacity:.92}
@media (max-width:840px){.stats-in{grid-template-columns:repeat(2,1fr);gap:1.6rem 0}}
@media (prefers-reduced-motion:reduce){
  html.js .hero-bg,.topbar,html.js .btn-submit,html.js .bubble,.ticker-track,html.js .hero-script::after{animation:none}
}

/* ── Responsive hardening (all devices) ── */
html,body{overflow-x:clip}
.ticker{max-width:100%}
@media (max-width:560px){
  .hdr-in{flex-wrap:wrap;row-gap:.45rem;padding-bottom:.6rem}
  .hdr-phones{order:3;flex:1 1 100%;flex-direction:row;justify-content:center;gap:.5rem;align-items:center}
  .phone-pill{flex:1 1 0;min-width:0;justify-content:center;font-size:.8rem;padding:.45rem .4rem;white-space:nowrap}
  .logo-abi{font-size:1.7rem}
  .logo-words{font-size:.66rem}
}

/* ───────────────────────── Client revision pack (v13) ───────────────────────── */
/* Bigger logo, one-line institute name */
.logo{align-items:center;gap:.55rem}
.logo-abi{font-size:2.5rem}
.logo-words{white-space:nowrap;font-size:.95rem;line-height:1.1}
/* Both phone numbers centered in the header, bigger + bolder */
.hdr-phones{margin-left:auto;margin-right:auto;gap:1.1rem}
.phone-pill{font-size:1.05rem;font-weight:700;border-width:2px;color:var(--blue)}
.phone-pill .lbl{font-weight:800}
/* Header "Request a Call" CTA — bolder, brighter */
.btn-call{font-weight:800;box-shadow:0 5px 16px rgba(27,47,217,.45);white-space:nowrap}
/* Bigger nav tabs + bigger EN/ES toggle */
.mainnav{font-size:1.08rem;font-weight:600;gap:2rem}
.mn-lang{font-size:1.05rem;font-weight:800;padding:.3rem .85rem}
.mn-lang a{font-weight:800}
/* All large CTAs bolder/brighter */
.btn-lg{font-weight:800}
.btn-gold{font-weight:800}
.hero-value{display:inline-block;color:#fff;background:rgba(27,47,217,.35);border:1px solid rgba(255,255,255,.35);border-radius:50px;padding:.5rem 1.2rem;font-weight:700;font-size:.95rem;letter-spacing:.02em;margin:.2rem 0 1.1rem}
/* ── Instructors page ── */
.inst-hero{background:linear-gradient(120deg,rgba(16,22,42,.86),rgba(12,18,36,.80)),url(../img/abi-students-105.jpg);background-size:cover;background-position:center;color:#fff;text-align:center;padding:3.6rem 1rem 3rem}
.inst-hero h1{color:#fff;margin:.3rem 0 .6rem}
.inst-hero .kicker{color:var(--gold-bright)}
.inst-hero-sub{max-width:680px;margin:0 auto 1.4rem;opacity:.94;font-size:1.08rem}
.inst-feature{display:grid;grid-template-columns:340px 1fr;gap:2.4rem;align-items:start;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:2rem;margin-top:1.4rem}
.inst-feature h3{font-size:1.8rem;margin:.3rem 0 .8rem}
.inst-stat-row{display:flex;gap:1.6rem;margin:.6rem 0 1rem}
.inst-stat-row strong{display:block;font-size:1.9rem;color:var(--blue);font-weight:800;line-height:1}
.inst-stat-row span{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:#6b7280}
.inst-tag{display:inline-block;background:var(--blue-light,#eef0ff);color:var(--blue);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;padding:.3rem .7rem;border-radius:6px}
.inst-pill{display:inline-block;margin-top:.8rem;border:1px solid var(--line);border-radius:50px;padding:.3rem .9rem;font-weight:600;font-size:.82rem;color:#374151}
.inst-diff-head{font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;color:var(--blue);margin:1rem 0 .5rem}
.inst-diff{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.inst-diff li{position:relative;padding-left:1.5rem;font-size:.95rem;line-height:1.45}
.inst-diff li::before{content:"✓";position:absolute;left:0;color:var(--blue,#1b2fd9)}
.inst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.4rem;margin-top:1.4rem}
.inst-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.6rem;box-shadow:0 4px 18px rgba(15,20,32,.06);display:flex;flex-direction:column;gap:.6rem}
.inst-card h3{font-size:1.25rem;margin:.4rem 0 .2rem}
.inst-philosophy{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:1.4rem}
.phil-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.6rem}
.phil-num{font-family:'Oswald',sans-serif;font-size:1.6rem;font-weight:700;color:var(--gold-bright,#caa14a)}
.phil-card h3,.phil-card h4{margin:.4rem 0 .4rem;font-size:1.1rem}
.inst-reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin-top:1.4rem}
.inst-reviews blockquote{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:12px;padding:1.4rem;margin:0}
.inst-reviews cite{display:block;margin-top:.8rem;font-style:normal;font-weight:700;color:var(--blue);font-size:.88rem}
@media (max-width:760px){.inst-feature{grid-template-columns:1fr;padding:1.4rem}}
/* Gallery — brighter, enhanced images */
.gallery-grid img,.gal img{filter:brightness(1.08) contrast(1.05) saturate(1.06);transition:filter .2s ease,transform .2s ease}
.gallery-grid a:hover img,.gal a:hover img{filter:brightness(1.16) contrast(1.08) saturate(1.1);transform:scale(1.02)}
/* Visit Us in Person + 360 walkthrough */
.visit360{background:#0f1420;color:#fff;padding:3.4rem 1rem}
.visit360 .kicker{color:var(--gold-bright)}
.visit360 h2{color:#fff}
.visit360-lead{opacity:.9;max-width:640px;margin:.4rem 0 1.6rem}
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1rem}
.visit-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:1.6rem}
.visit-card h3{color:#fff;margin:.1rem 0 .3rem;font-size:1.3rem}
.visit-card .addr{opacity:.88;margin:0 0 1rem;line-height:1.5}
.visit-card a{color:var(--gold-bright);font-weight:700;text-decoration:none}
.visit-card a:hover{text-decoration:underline}
.visit-card .vc-phone{display:block;margin-top:.5rem;color:#fff;font-weight:700}
.tour360{display:inline-flex;align-items:center;gap:.6rem;background:var(--gold);color:#1a1205;font-weight:800;padding:.85rem 1.6rem;border-radius:50px;text-decoration:none;margin-top:1.2rem}
.tour360:hover{filter:brightness(1.06)}
@media (max-width:680px){.visit-grid{grid-template-columns:1fr}}
/* Back-to-top button */
.to-top{position:fixed;left:24px;bottom:28px;z-index:90;width:46px;height:46px;border-radius:50%;border:none;background:rgba(15,20,32,.82);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease,background .2s ease;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--blue)}
@media (max-width:1080px){.to-top{bottom:70px;left:16px;width:42px;height:42px}}
/* Micro-interaction polish */
.trust-item strong{transition:transform .2s ease}
.trust-strip .trust-item:hover strong{transform:scale(1.08)}

/* ═══════════ v16.0 — Clean white background, light-blue accents ═══════════
   Per client direction: remove ALL background photographs site-wide.
   Body is solid white. Section photos and gallery photos remain in their
   own cards/grids. Page-hero is now a light-blue → white gradient (no photo). */
body{background:#ffffff}
body::before{content:none!important;background:none!important}
/* Page-hero: light-blue/white gradient banner, dark navy text (no photo) */
.page-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#eaf2ff 0%,#dfeaff 55%,#ffffff 100%);color:#0a1020;padding:3.4rem 1rem 3rem;border:none;border-bottom:1px solid #e3ecf8}
.page-hero h1{color:#0a1020!important;text-shadow:none}
.page-hero p,.page-hero .crumbs,.page-hero .crumbs a,.page-hero a{color:#3a4763!important;text-shadow:none}
.page-hero .crumbs a{opacity:1}
@media (max-width:768px){
  body{background-attachment:scroll!important}
  .page-hero{background:linear-gradient(135deg,#eaf2ff 0%,#dfeaff 55%,#ffffff 100%)}
}
/* Glassmorphism — header + cards */
.hdr{background:rgba(255,255,255,.62)!important;backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7);border-bottom:1px solid rgba(255,255,255,.5)}
.mainnav{background:rgba(255,255,255,.45)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.phone-pill{background:rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.card,.quote,.plan,.inst-card,.phil-card,.glance>div,.visit-card{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card,.quote,.plan,.inst-card,.phil-card{background:rgba(255,255,255,.82)!important;border:1px solid rgba(255,255,255,.65);box-shadow:0 8px 30px rgba(15,20,32,.10)}
.card:hover,.quote:hover,.inst-card:hover,.plan:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(27,47,217,.18);transition:transform .25s ease,box-shadow .25s ease}
/* Brighter, bolder CTAs with glow */
.btn-gold{background:linear-gradient(135deg,#ffc83d,#e5a019)!important;color:#1a1205!important;font-weight:800;box-shadow:0 6px 22px rgba(229,160,25,.5)}
.btn-gold:hover{box-shadow:0 10px 30px rgba(229,160,25,.7);filter:brightness(1.05)}
.btn-blue{box-shadow:0 6px 20px rgba(27,47,217,.45)}
.btn-blue:hover{box-shadow:0 10px 28px rgba(27,47,217,.6)}
.btn-lg{letter-spacing:.01em}
.cta-band,.foot-cta{position:relative;overflow:hidden}
/* Clean navy CTA band (no photo) */
.cta-band{background:linear-gradient(120deg,#0f1726 0%,#142a4d 100%)!important}
.cta-band .kicker{color:var(--gold-bright,#f4c44a)}
.cta-band h2,.cta-band p{color:#fff}
/* Clean content surfaces (photos live in dedicated bands, not behind every section) */
section:not(.dark):not(.alt):not(.trust-strip):not(.visit360):not(.inst-hero):not(.cta-band):not(.photo-band):not(.hero):not(.stats):not(.trust):not(.res-hero):not(.res-sec):not(.res-cta):not(.icl-sec):not(.bg-hero):not(.zero-sec):not(.sec-photo){background:rgba(255,255,255,.70);backdrop-filter:blur(7px) saturate(1.05);-webkit-backdrop-filter:blur(7px) saturate(1.05)}
section.alt{background:rgba(246,248,252,.60)!important;backdrop-filter:blur(7px) saturate(1.05);-webkit-backdrop-filter:blur(7px) saturate(1.05)}
/* Gallery lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,11,18,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox img{max-width:88vw;max-height:84vh;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.6);animation:lbIn .25s ease}
@keyframes lbIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;cursor:pointer;border-radius:50%;width:52px;height:52px;font-size:1.8rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s}
.lightbox button:hover{background:rgba(255,255,255,.28)}
.lb-close{top:22px;right:22px;width:46px;height:46px}
.lb-prev{left:3vw;top:50%;transform:translateY(-50%)}
.lb-next{right:3vw;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#fff;font-weight:700;letter-spacing:.05em;background:rgba(0,0,0,.4);padding:.35rem 1rem;border-radius:50px}
.gallery-grid a{cursor:zoom-in}
@media (max-width:560px){.lb-prev{left:6px}.lb-next{right:6px}.lightbox button{width:42px;height:42px}}
/* ═══════════ v18 — embedded maps, animated logo, glow/3D ═══════════ */
/* Google Maps virtual-tour embeds */
.map-embed{margin:.2rem 0 1rem;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 32px rgba(0,0,0,.4)}
.map-embed iframe{width:100%;height:240px;border:0;display:block;filter:saturate(1.08) contrast(1.02)}
/* Interactive, continuously rolling barber-pole logo (New-ABI-logo: ruler + pole + wordmark) */
.logo-text{display:contents}
.logo-mark{flex-shrink:0;height:44px;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.logo-stripes{animation:barberRoll 1.7s linear infinite}
@keyframes barberRoll{from{transform:translateY(-12px)}to{transform:translateY(0)}}
.logo-ruler{transition:filter .25s ease}
.logo{transition:transform .25s ease}
.logo:hover{transform:scale(1.03)}
.logo:hover .logo-mark{filter:drop-shadow(0 0 8px rgba(27,63,217,.5))}
.logo:hover .logo-stripes{animation-duration:.7s}
.logo:hover .logo-ruler{filter:drop-shadow(0 0 5px rgba(244,196,74,.7))}
.logo:focus-visible{outline:3px solid var(--gold-bright,#f4c44a);outline-offset:3px;border-radius:6px}
@media (max-width:560px){.logo-mark{height:36px}}
/* Glow / 3D polish */
.btn-gold{position:relative}
.btn-gold:hover{transform:translateY(-2px) scale(1.02)}
.trust-item:hover strong{text-shadow:0 0 16px rgba(229,160,25,.6)}
.cta-band h2,.foot-cta h3{text-shadow:0 2px 18px rgba(0,0,0,.25)}
.card,.quote,.inst-card,.plan,.visit-card{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
.desk-cta{box-shadow:0 12px 32px rgba(27,47,217,.5),0 0 0 0 rgba(27,47,217,.4)}
.desk-cta:hover{box-shadow:0 14px 38px rgba(27,47,217,.65)}
/* Respect reduced-motion */
@media (prefers-reduced-motion:reduce){
  .logo-stripes{animation:none}
  .desk-cta{animation:none}
}
.btn:hover{box-shadow:0 8px 22px rgba(27,47,217,.4)}
/* Floating desktop sticky CTA */
.desk-cta{position:fixed;right:24px;bottom:28px;z-index:90;display:inline-flex;align-items:center;gap:.55rem;background:var(--blue);color:#fff;font-weight:800;padding:.95rem 1.5rem;border-radius:50px;box-shadow:0 12px 32px rgba(27,47,217,.48);text-decoration:none;animation:deskPulse 2.6s ease-in-out infinite}
.desk-cta:hover{background:var(--blue-dark);color:#fff}
@keyframes deskPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* Footer conversion CTA band */
.foot-cta{background:linear-gradient(105deg,var(--blue) 0%,var(--blue-dark) 100%);color:#fff;text-align:center;padding:3.2rem 1rem}
.foot-cta h3{font-family:'Oswald',sans-serif;font-size:2.1rem;text-transform:uppercase;letter-spacing:.02em;margin:0 0 .5rem}
.foot-cta p{opacity:.92;margin:0 0 1.5rem;font-size:1.05rem}
.foot-cta-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
/* Trust-signal strip */
.trust-strip{background:#0f1420}
.trust-strip .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:2.4rem;padding:1.7rem 1rem}
.trust-item{display:flex;flex-direction:column;align-items:center;color:#fff;min-width:118px}
.trust-item strong{font-size:1.75rem;color:var(--gold-bright);font-weight:800;line-height:1}
.trust-item span{font-size:.8rem;opacity:.85;text-transform:uppercase;letter-spacing:.07em;margin-top:.35rem;text-align:center}
/* Mobile: keep hamburger pinned right, hide desktop sticky CTA */
@media (max-width:1080px){
  .hamburger{margin-left:auto;order:9}
  .desk-cta{display:none}
  .hdr-phones{margin-right:.6rem}
}
@media (max-width:560px){
  .logo-abi{font-size:1.9rem}
  .logo-words{font-size:.7rem;white-space:nowrap}
  .foot-cta h3{font-size:1.6rem}
  .trust-strip .wrap{gap:1.4rem}
  .trust-item{min-width:30%}
  .trust-item strong{font-size:1.4rem}
}
/* ═══════════════ v19 — monogram instructors, jobs two-track, embedded tour, depth ═══════════════ */
/* "Every Employee, a Graduate" creed */
.inst-creed{max-width:660px;margin:0 auto 1.5rem;font-size:1rem;line-height:1.6;color:#eef1ff;opacity:.95}
.inst-creed span{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-bright);font-weight:700;font-size:.92rem;margin-bottom:.35rem}
/* Monogram avatars (no-face, premium gradient discs) */
.inst-avatar{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;
  font-family:'Oswald',sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:.02em;color:#fff;
  box-shadow:0 6px 18px rgba(15,20,32,.22),inset 0 1px 0 rgba(255,255,255,.35);
  border:2px solid rgba(255,255,255,.55);align-self:flex-start;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.inst-avatar--lg{width:84px;height:84px;font-size:2rem;margin-bottom:.4rem}
.inst-avatar--gold{background:linear-gradient(140deg,#e8a13a 0%,#c87d22 55%,#9a5d12 100%)}
.inst-avatar--blue{background:linear-gradient(140deg,#3a63d8 0%,#1f3fb0 55%,#16307e 100%)}
.inst-card:hover .inst-avatar{transform:rotate(-4deg) scale(1.06);box-shadow:0 10px 26px rgba(27,47,217,.32),inset 0 1px 0 rgba(255,255,255,.4)}
/* Subtle 3D lift already on cards; add gold edge glow on featured */
.inst-feature{position:relative;overflow:hidden}
.inst-feature::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 0% 0%,rgba(232,161,58,.10),transparent 60%);pointer-events:none}
/* ── Jobs: two-track (barbers vs shop owners) ── */
.jobs-tracks{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.4rem}
.jobs-track{position:relative;border-radius:18px;padding:1.8rem;background:rgba(255,255,255,.9);border:1px solid var(--line);box-shadow:0 8px 30px rgba(15,20,32,.10);overflow:hidden}
.jobs-track--owners{background:linear-gradient(160deg,#10182b 0%,#0c1424 100%);color:#fff;border-color:rgba(255,255,255,.12)}
.jobs-track--owners h3,.jobs-track--owners p,.jobs-track--owners label,.jobs-track--owners .f{color:#fff}
.jobs-track-icon{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,#e8a13a,#c87d22);color:#fff;margin-bottom:.9rem}
.jobs-track--owners .jobs-track-icon{background:linear-gradient(140deg,#3a63d8,#1f3fb0)}
.jobs-track h3{font-size:1.5rem;margin:.2rem 0 .5rem}
.jobs-benefits{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.1rem 0 0;padding:0;list-style:none}
.jobs-benefits li{background:rgba(15,20,32,.04);border-radius:10px;padding:.8rem .9rem}
.jobs-benefits b{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:.86rem;color:var(--blue);margin-bottom:.2rem}
@media (max-width:760px){.jobs-tracks{grid-template-columns:1fr}.jobs-benefits{grid-template-columns:1fr}}
/* ── Virtual tour: campus tabs + embed frame ── */
.tour-wrap{margin-top:1.4rem}
.tour-tabs{display:inline-flex;gap:.35rem;padding:.35rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:50px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin-bottom:1.1rem}
.tour-tab{appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;padding:.6rem 1.3rem;border-radius:50px;cursor:pointer;transition:background .2s ease,color .2s ease;min-height:44px}
.tour-tab[aria-selected="true"]{background:var(--gold-bright,#f4c44a);color:#161616}
.tour-tab:focus-visible{outline:3px solid var(--gold-bright,#f4c44a);outline-offset:2px}
.tour-panel{display:none}
.tour-panel.is-active{display:block;animation:tourFade .35s ease both}
@keyframes tourFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tour-frame{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.2);box-shadow:0 18px 46px rgba(0,0,0,.45)}
.tour-frame iframe{width:100%;height:clamp(320px,52vh,520px);border:0;display:block;filter:saturate(1.06) contrast(1.02)}
.tour-meta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-top:1rem}
.tour-meta .btn{margin:0}
/* ── Extra depth/glow polish (reduced-motion gated below) ── */
.btn-gold,.btn-blue{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,filter .25s ease}
.btn-gold:hover{box-shadow:0 12px 30px rgba(232,161,58,.45),0 0 0 1px rgba(255,255,255,.2) inset}
.gallery-grid a{border-radius:12px;overflow:hidden;position:relative}
.gallery-grid a::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 rgba(244,196,74,0);transition:box-shadow .3s ease;border-radius:12px;pointer-events:none}
.gallery-grid a:hover::after{box-shadow:inset 0 0 0 3px rgba(244,196,74,.8),0 0 22px rgba(244,196,74,.35)}
@media (prefers-reduced-motion:reduce){
  .inst-avatar,.inst-card:hover .inst-avatar,.btn-gold,.btn-blue,.tour-panel.is-active{transition:none;animation:none;transform:none}
}

/* ============================================================
   REV v31 — SPLASH/LANDING LEGIBILITY + LOGO UPGRADE
   Goal: every line of text clearly visible & glowing over the
   hero image and across all color themes; logo more prominent.
   ============================================================ */

/* --- Hero: stronger scrim so text never sits over a bright patch --- */
.hero-bg{opacity:1}
.hero-grad{background:none}
@media (max-width:900px){
  .hero-grad{background:none}
}

/* --- Hero headline + subhead: bright + glow --- */
.hero-h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.8)}
.hero-h1 .accent{color:#7d8bff;filter:none;text-shadow:0 0 24px rgba(80,110,255,.85),0 2px 6px rgba(0,0,0,.6)}
.hero-script{color:#fff;text-shadow:0 0 26px rgba(80,110,255,.55),0 2px 6px rgba(0,0,0,.6)}
.hero-script::after{background:#7d8bff;filter:none;box-shadow:0 0 14px rgba(80,110,255,.9)}
.hero-sub{color:#f4f6ff;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.hero-sub b{color:#fff}

/* --- Hero feature bullets: explicit bright white + glow + crisp dividers --- */
.hero .feature,.hero .feature span{color:#fff!important;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.hero .feature{border-color:rgba(255,255,255,.4)!important}
.hero .feature svg{color:#9aa6ff!important;filter:drop-shadow(0 0 6px rgba(120,140,255,.8))!important}

/* --- Trust band: force opaque high-contrast surface (beat the translucent section rule) --- */
section.trust{background:#0f1420!important;border-top:1px solid rgba(255,255,255,.08);backdrop-filter:none!important}
.trust-item{color:#fff!important;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.trust-item+.trust-item{border-left:1px solid rgba(255,255,255,.18)}
.trust-item svg{color:#f4c44a!important;filter:drop-shadow(0 0 6px rgba(244,196,74,.7))}

/* --- Skills ticker: solid dark band, bright legible text --- */
.ticker{background:#0b0e16;color:#fff}
.ticker span{font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.ticker .sc{color:#f4c44a;filter:drop-shadow(0 0 5px rgba(244,196,74,.7))}

/* --- Stats band: keep accent bg but guarantee white reads on every theme --- */
.stats{position:relative}
.stats::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,14,.30),rgba(6,8,14,.42));pointer-events:none}
.stats-in{position:relative;z-index:1}
.stat b{color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.55),0 0 18px rgba(255,255,255,.12)}
.stat span{color:#fff!important;opacity:1;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* --- Start pill + urgency: keep readable on any theme --- */
.startpill{background:rgba(255,255,255,.92)!important;color:#10131a}
.startpill b,.startpill .dot{color:#1b2fd9}

/* --- LOGO upgrade: bigger + always-on glow so it pops on any header --- */
.logo-img{height:60px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.28))}
.logo:hover .logo-img{transform:scale(1.05);filter:drop-shadow(0 4px 16px rgba(27,63,217,.55))}
@media (max-width:768px){.logo-img{height:48px}}
@media (max-width:400px){.logo-img{height:40px}}

/* ============================================================
   REV v32 — RESOURCES COMPONENTS + MOBILE TYPE NORMALIZATION
   ============================================================ */

/* --- Resources: reference lists inside feature cards --- */
.res-list{margin:.6rem 0 0;padding-left:1.15rem;list-style:disc}
.res-list li{color:var(--ink-soft);margin:.35rem 0;font-size:.96rem;line-height:1.5}

/* --- Resources: responsive state-board directory (no fixed columns) --- */
.state-grid{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:.65rem}
.state-grid li{background:rgba(255,255,255,.92);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:10px;padding:.7rem .9rem;font-size:.93rem;line-height:1.4;color:var(--ink);box-shadow:0 2px 8px rgba(15,20,32,.05)}
.state-grid li.state-hl{border-left-color:var(--gold,#e5a019);background:linear-gradient(90deg,rgba(244,196,74,.16),rgba(255,255,255,.92));font-weight:700}
.state-grid li.state-hl b{color:var(--blue)}

/* ------------------------------------------------------------
   MOBILE TYPE NORMALIZATION — readable, consistent "medium"
   sizing on phones (iPhone + Android). No line under ~13px.
   ------------------------------------------------------------ */
@media (max-width:640px){
  body{font-size:16px}
  p,li{font-size:1rem;line-height:1.62}
  .lead{font-size:1.04rem;line-height:1.6}
  .feature p,.card p,.res-list li,.prose p,.acc-body li,.step p,.testi-card p,.campus p,.inst-card p{font-size:.98rem;line-height:1.55}
  .state-grid{grid-template-columns:1fr}
  .state-grid li{font-size:.96rem}
  /* raise micro-labels/legal/tags to a legible ~13px floor */
  .crumbs,.form-note,.form-consent,.earn-note,.plans-note,.hero-note,.card-meta,
  .trust-item span,.stat span,.plan-name,.plan-hours,.plan-terms,.testi-who span,
  .ftr-legal,.count-cell span,.earn-yr,.inst-tag,.plan-tag,.date-card .d-tag,
  .call-sheet-h,.kicker,.card-hours,.d-mo{font-size:.82rem!important;letter-spacing:.04em}
  .ticker span{font-size:.92rem}
  .topbar{font-size:.74rem;letter-spacing:.05em}
  /* temper oversized headings so nothing is jarringly large */
  .hero-h1{font-size:clamp(2rem,8vw,2.4rem)}
  .page-hero h1{font-size:clamp(1.9rem,7.5vw,2.3rem)}
  .section-head h2,h2{font-size:clamp(1.5rem,6.2vw,1.9rem)}
  .stat b{font-size:2.05rem}
  /* comfortable section padding on phones */
  section{padding-top:2.4rem;padding-bottom:2.4rem}
  .page-hero{padding:2.6rem 1rem 2.2rem}
}
@media (max-width:400px){
  .hero-h1{font-size:1.9rem}
  .page-hero h1{font-size:1.8rem}
}

/* v32 supplement — countdown labels + price notes (defined in style.css) */
@media (max-width:640px){
  .countdown span{font-size:.72rem!important;letter-spacing:.1em}
  .countdown b{font-size:1.5rem!important}
  .price small{font-size:.8rem!important;letter-spacing:.02em}
  .menu-item b,.menu-item .p{font-size:1rem}
}

/* ============================================================
   REV v33 — DESIGN-UPGRADE BRANCH
   Urgency badge · overlay z-index scale & safe-area ·
   reduced-motion · focus states · tap targets · section rhythm
   ============================================================ */

/* --- Documented z-index scale ---------------------------------
   base content        : 0–2
   sticky header (.hdr) : 60
   mobile bar (.mbar)   : 70
   nav drawer           : 88   (above chat bubble)
   chat bubble/tip      : 80
   call-sheet popover   : 95
   exit modal           : 120  (desktop only)
   theme sweep fx       : 9999
--------------------------------------------------------------- */
.nav-drawer{z-index:88}
.exit{z-index:120}
body.nav-open .bubble,body.nav-open .bubble-tip{display:none!important}

/* --- Urgency: styled pill instead of emoji text --- */
.urgency-flame{
  display:inline-flex;align-items:center;gap:.45rem;
  background:linear-gradient(90deg,rgba(229,160,25,.16),rgba(229,160,25,.06));
  border:1px solid rgba(229,160,25,.5);color:var(--gold-bright,#f4c44a);
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.82rem;
  padding:.4rem .9rem;border-radius:999px;line-height:1}
.urgency-flame::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--red,#d9272e);box-shadow:0 0 0 0 rgba(217,39,46,.6);animation:pulseDot 1.8s ease-out infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(217,39,46,.55)}70%{box-shadow:0 0 0 8px rgba(217,39,46,0)}100%{box-shadow:0 0 0 0 rgba(217,39,46,0)}}

/* --- Sticky mobile bar: safe-area + never hide footer --- */
@media (max-width:840px){
  .mbar{padding-bottom:env(safe-area-inset-bottom,0)}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0))}
  .bubble{bottom:calc(5.4rem + env(safe-area-inset-bottom,0))}
  .bubble-tip{bottom:calc(5.8rem + env(safe-area-inset-bottom,0))}
}

/* --- Touch targets: min 44px for primary interactive elements --- */
.mbar a{min-height:56px}
.nav-drawer a,.mn-lang a{min-height:48px;display:flex;align-items:center}
.phone-pill{min-height:44px}
.btn,.btn-gold,.btn-blue,.btn-ghost{min-height:44px}

/* --- Visible keyboard focus everywhere (accessibility) --- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible{
  outline:3px solid var(--gold-bright,#f4c44a);outline-offset:2px;border-radius:6px}

/* --- Section rhythm: consistent vertical spacing on the splash/landing --- */
.sec{padding-block:clamp(2.6rem,6vw,5.5rem)}
.sec-alt{background:rgba(255,255,255,.04)}

/* --- Global reduced-motion: honor user preference site-wide --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .urgency-flame::before,html.js .bubble,.ticker-track,.marquee-track{animation:none!important}
}

/* ============================================================
   REV v34 — READABILITY + MOBILE BG + SOCIAL + THEME-DOTS + EN/ES
   ============================================================ */

/* --- Ghost buttons: readable on LIGHT by default; white only on dark --- */
.btn-ghost{color:var(--ink,#10131a);border:1.5px solid rgba(16,19,26,.30);background:transparent}
.btn-ghost:hover{border-color:var(--blue,#1b2fd9);color:var(--blue,#1b2fd9);background:rgba(27,47,217,.06)}
.hero .btn-ghost,.page-hero .btn-ghost,section.dark .btn-ghost,.dark .btn-ghost,
.cta-band .btn-ghost,.visit360 .btn-ghost,.jobs-track--owners .btn-ghost,.inst-hero .btn-ghost{
  color:#fff;border-color:rgba(255,255,255,.55);background:transparent}
.hero .btn-ghost:hover,.page-hero .btn-ghost:hover,section.dark .btn-ghost:hover,.dark .btn-ghost:hover,
.cta-band .btn-ghost:hover,.visit360 .btn-ghost:hover,.inst-hero .btn-ghost:hover{
  border-color:var(--gold-bright,#f4c44a);color:var(--gold-bright,#f4c44a);background:rgba(255,255,255,.10)}

/* --- Mobile backgrounds: STILL (no parallax/zoom) + properly fitted --- */
@media (max-width:820px){
  body::before{background-attachment:scroll!important;background-position:center top!important}
  html.js .hero-bg{animation:none!important;transform:none!important}
  .hero-bg{background-position:center center;background-attachment:scroll}
  .page-hero{background-attachment:scroll!important;background-position:center top}
}

/* --- Social icons: centered (mobile + desktop) --- */
.socials{justify-content:center;flex-wrap:wrap}

/* --- Cards never touch: consistent gaps + rounded corners --- */
.feature-grid,.cards,.tuition-grid,.plans,.why,.testi,.steps,.earn,.date-grid,.jobs-tracks,.inst-grid,.quotes,.videos,.visit-grid{gap:1.3rem}
.feature,.card,.tuition,.plan,.quote,.visit-card-lite,.date-card,.res-card{border-radius:16px}
@media (max-width:560px){
  .feature-grid,.cards,.tuition-grid,.plans,.quotes,.jobs-tracks{gap:1rem}
}

/* --- Theme switcher: own row on mobile, never overlapping promo text --- */
@media (max-width:840px){
  .topbar{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:center;gap:.3rem .6rem;line-height:1.3}
  .topbar .theme-dots{flex:0 0 100%;display:flex!important;justify-content:center;gap:10px;margin-top:.25rem}
}

/* --- EN/ES header toggle pill (beside logo) --- */
.lang-toggle{display:inline-flex;align-items:center;margin-left:.7rem;border:1.6px solid var(--blue,#1b2fd9);border-radius:999px;overflow:hidden;font-weight:800;font-size:.78rem;line-height:1;flex-shrink:0}
.lang-toggle a{padding:.4rem .62rem;color:var(--blue,#1b2fd9);text-decoration:none;min-height:auto;transition:background .2s ease,color .2s ease}
.lang-toggle a+a{border-left:1.6px solid var(--blue,#1b2fd9)}
.lang-toggle a.is-active,.lang-toggle a:hover{background:var(--blue,#1b2fd9);color:#fff}
@media (max-width:400px){.lang-toggle{margin-left:.4rem;font-size:.72rem}.lang-toggle a{padding:.36rem .5rem}}

/* ===== Approved header layout: banner (promo line + EN/ES number pills) → row (rounded white
   logo+address plate · EN|ES toggle · hamburger). Mirrors the client-approved reference image. ===== */
.topbar{display:block}
.tb-promo{font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;text-align:center}
.tb-calls{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:.6rem}
.tb-call{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:min(300px,88%);padding:.55rem 1.1rem;min-height:46px;border-radius:999px;border:2px solid rgba(255,255,255,.72);color:#fff;font-weight:800;font-size:1rem;background:rgba(0,0,0,.18);white-space:nowrap;transition:background .2s,transform .2s}
.tb-call:hover{background:rgba(0,0,0,.36);transform:translateY(-1px)}
.tb-flag{display:inline-grid;place-items:center;min-width:32px;height:24px;padding:0 .4rem;border:1.6px solid currentColor;border-radius:999px;font-size:.72rem;font-weight:900;letter-spacing:.06em}
.tb-num{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.brand-plate{display:inline-flex;align-items:center;gap:.6rem;background:#fff;border-radius:14px;padding:.5rem .8rem;box-shadow:0 4px 16px rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.06);flex-shrink:0}
.brand-plate .logo-img{height:44px;flex-shrink:0}
.brand-addr{font-size:.58rem;line-height:1.42;color:#1a2230;font-weight:600;text-align:left;white-space:nowrap}
.hdr-right{display:flex;align-items:center;gap:.65rem;margin-left:auto;flex-shrink:0}
.hdr-in{flex-wrap:nowrap}
@media (max-width:560px){.brand-plate{gap:.4rem;padding:.4rem .6rem}.brand-plate .logo-img{height:42px}.tb-calls{gap:8px}.tb-call{font-size:.84rem;padding:.5rem .7rem;gap:.4rem}.hdr-right{gap:.5rem}.lang-toggle{font-size:.74rem}.lang-toggle a{padding:.34rem .54rem}}
@media (max-width:400px){.tb-call{font-size:.78rem;padding:.48rem .6rem}.tb-flag{min-width:26px;height:22px;font-size:.66rem}}
@media (max-width:389px){.brand-plate .logo-img{height:36px}}
@media (max-width:340px){.brand-plate .logo-img{height:32px}}

/* ============ REFERENCE HEADER STRUCTURE (blue palette, dark header row) ============ */
/* Banner pills: side-by-side, centered, equal. Label shows on desktop only. */
.tb-calls{display:flex!important;flex-direction:row!important;flex-wrap:nowrap;justify-content:center;align-items:center;gap:14px;margin-top:.6rem}
.tb-call{flex:0 1 auto;width:auto!important;min-width:0;justify-content:center}
.tb-call .tb-label{display:none}
.tb-num{white-space:nowrap}
/* Dark header row (overrides theme glass). White plate + light nav pop against it. */
.hdr{background:#0e1117!important;border-bottom:1px solid rgba(255,255,255,.1)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.hdr-in{display:flex;align-items:center;gap:1rem;flex-wrap:nowrap}
.brand-plate{flex-shrink:0}
/* Glassy EN|ES toggle */
.lang-toggle{border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06)}
.lang-toggle a{color:#cfd6e6}
.lang-toggle a+a{border-left:1px solid rgba(255,255,255,.2)}
.lang-toggle a.is-active,.lang-toggle a:hover{background:linear-gradient(135deg,#2b6bff,#19c6e6);color:#fff}
/* Cyan hamburger on the dark header */
.hamburger span{background:#7fe0ff!important}
/* "Become a Barber" CTA (blue) */
.header-cta{display:none;align-items:center;gap:.45rem;background:var(--blue,#1b2fd9);color:#fff;font-weight:800;font-size:.95rem;padding:.62rem 1.25rem;border-radius:999px;white-space:nowrap;text-decoration:none;transition:filter .2s,transform .2s}
.header-cta:hover{filter:brightness(1.12);transform:translateY(-1px);color:#fff}
/* DESKTOP (>=1200): inline horizontal nav + CTA, no hamburger, labeled pills */
@media (min-width:1200px){
  .mainnav{display:flex!important;position:static!important;flex:1;justify-content:center;align-items:center;gap:1.05rem;background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;max-height:none!important;overflow:visible!important;opacity:1!important;visibility:visible!important;transform:none!important}
  .mainnav a{color:#e7ebf5;border:0!important;padding:.4rem .15rem;font-size:.9rem;white-space:nowrap;min-height:auto}
  .mainnav a:hover{color:#5b8bff;background:transparent}
  .header-cta{display:inline-flex}
  .hamburger{display:none!important}
  .tb-call .tb-label{display:inline}
  .tb-call{font-size:1rem;padding:.55rem 1.3rem}
}
/* MOBILE / TABLET (<1200): hamburger + drawer; inline nav and CTA hidden */
@media (max-width:1199px){
  .mainnav{display:none!important}
  .hamburger{display:flex!important}
  .header-cta{display:none!important}
}
@media (max-width:380px){.tb-call{font-size:.82rem;gap:.4rem}}

/* ============================================================
   REV v36 — HERO FEATURE CHIPS (no overlap) + page-hero scrim
   ============================================================ */
/* The 6 hero benefit bullets → distinct rounded chips with real gaps */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;max-width:46rem;margin-top:1.8rem}
.features .feature{
  display:flex;align-items:flex-start;gap:.55rem;
  background:rgba(10,14,30,.62)!important;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.3)!important;
  border-radius:12px;padding:.8rem .85rem;font-size:.85rem;line-height:1.35;
  text-shadow:0 1px 6px rgba(0,0,0,.7)}
/* kill the old divider borders that made them look cramped/overlapping */
.features .feature:nth-child(-n+3),.features .feature:nth-child(4),.features .feature+.feature{
  border:1px solid rgba(255,255,255,.18)!important;border-left:1px solid rgba(255,255,255,.18)!important;
  border-bottom:1px solid rgba(255,255,255,.18)!important;padding-left:.85rem!important}
.features .feature svg{margin-top:.05rem}
@media (max-width:900px){.features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.features{grid-template-columns:1fr;max-width:none}}

/* v36 — full-bleed content photo band for text-heavy pages */
.photo-band{padding:0;line-height:0;border:none}
.photo-band img{width:100%;height:clamp(190px,42vw,360px);object-fit:cover;display:block;filter:saturate(1.03)}

/* ============================================================
   REV v39 — footer social icons align with the column content
   ============================================================ */
.ftr .socials,.ftr-in .socials{justify-content:center;margin-top:1.1rem;gap:.7rem}
.ftr .socials a{background:rgba(255,255,255,.12)}
@media (max-width:760px){
  /* on stacked mobile footer, center them under the heading for balance */
  .ftr-in{text-align:center}
  .ftr .socials,.ftr-in .socials{justify-content:center}
}

/* ============================================================
   REV v41 — PARTNERS PAGE
   ============================================================ */
.partner-row{align-items:center;gap:2.6rem}
.partner-row.reverse{direction:rtl}
.partner-row.reverse > *{direction:ltr}
.partner-media{display:flex;align-items:center;justify-content:center;border-radius:18px;overflow:hidden;min-height:240px;background:#0f1420;box-shadow:0 10px 30px rgba(15,20,32,.18)}
.partner-media img{width:100%;height:100%;object-fit:cover;display:block}
.partner-media.partner-logo{background:#fff;padding:2.2rem}
.partner-media.partner-logo img{width:auto;max-width:80%;max-height:200px;object-fit:contain}
.partner-tag{display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);background:rgba(27,47,217,.10);border:1px solid rgba(27,47,217,.25);padding:.34rem .8rem;border-radius:999px;margin-bottom:.7rem}
.partner-body h3{font-size:1.7rem;margin:.1rem 0 .6rem}
.partner-body p{color:var(--ink-soft);line-height:1.6;margin-bottom:.7rem}
.partner-tagline{font-style:italic;font-weight:600;color:var(--ink)!important}
.partner-meta{font-size:.92rem;color:var(--ink-soft)}
.partner-meta a{color:var(--blue);font-weight:600;text-decoration:none}
.partner-meta a:hover{text-decoration:underline}
@media (max-width:760px){
  .partner-row{gap:1.3rem}
  .partner-row.reverse{direction:ltr}
  .partner-media{min-height:180px}
  .partner-media.partner-logo{padding:1.5rem}
  .partner-media.partner-logo img{max-height:140px}
  .partner-body h3{font-size:1.4rem}
}

/* ============================================================
   REV v42 — INSTRUCTOR PHOTOS + JOB OPPORTUNITIES BOARD
   ============================================================ */
/* real instructor photos in place of monogram avatars */
/* Instructor photos: large, centered circular headshots, consistent across cards */
.inst-photo{width:150px;height:150px;border-radius:50%;object-fit:cover;object-position:center top;display:block;border:3px solid rgba(27,47,217,.2);box-shadow:0 6px 20px rgba(15,20,32,.22);align-self:center;transform:none!important}
.inst-avatar--lg.inst-photo{width:172px;height:172px;margin-bottom:.4rem}
.inst-group-photo{width:100%;height:auto;max-height:540px;object-fit:contain;border-radius:18px;margin:0 0 1.6rem;box-shadow:0 12px 34px rgba(15,20,32,.18);display:block}
/* center the photo, role badge and name; keep bio text left-aligned for readability */
.inst-card{align-items:center;text-align:center}
.inst-card .inst-tag,.inst-card h3{align-self:center}
.inst-card p,.inst-card ul,.inst-card .inst-diff,.inst-card .inst-diff-head{text-align:left;align-self:stretch}
.inst-card:hover .inst-photo{transform:scale(1.05)!important}
@media(max-width:560px){.inst-photo{width:132px;height:132px}.inst-avatar--lg.inst-photo{width:148px;height:148px}.inst-group-photo{max-height:360px}}

/* job opportunities board */
.job-tools{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin:1.2rem 0}
.job-search{flex:1;min-width:240px;height:48px;border:1.5px solid var(--line);border-radius:12px;padding:0 16px;font:inherit;font-size:1rem;background:#fff;color:var(--ink)}
.job-count{font-size:.92rem;color:var(--ink-soft);font-weight:600}
.job-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem;margin-top:1rem}
.job-card{background:rgba(255,255,255,.92);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:12px;padding:1rem 1.1rem;box-shadow:0 3px 10px rgba(15,20,32,.06)}
.job-card h3{font-size:1.05rem;margin:0 0 .25rem;line-height:1.25}
.job-loc{font-size:.82rem;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem}
.job-card p{font-size:.9rem;color:var(--ink-soft);margin:.15rem 0;line-height:1.4}
.job-card a{color:var(--blue);font-weight:600;text-decoration:none}
.job-card a:hover{text-decoration:underline}
.job-none{display:none;color:var(--ink-soft);padding:1rem 0}

/* ============================================================
   REV v43 — DEFINITIVELY hide theme switcher on mobile
   (it was position:absolute over the promo text → overlap).
   Desktop keeps the switcher; phones never show it.
   ============================================================ */
@media (max-width:840px){
  /* Theme switcher stays VISIBLE but drops to its own centered row below the
     promo text — it was position:absolute (overlapping); force it back into flow. */
  .topbar{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:center;gap:.15rem .6rem;padding:.5rem 1rem;text-align:center}
  .topbar .theme-dots,.theme-dots{position:static!important;flex:0 0 100%!important;display:flex!important;justify-content:center;gap:12px;margin-top:.4rem;transform:none!important}
  .topbar .tdot,.tdot{width:16px;height:16px}
}

/* ============================================================
   REV v44 — TASTEFUL PREMIUM EFFECTS (additive, reduced-motion safe)
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .feature,.card,.tuition,.plan,.quote,.res-card,.job-card,.inst-card,.partner-media{
    transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease;will-change:transform}
  .feature:hover,.card:hover,.tuition:hover,.plan:hover,.quote:hover,.res-card:hover,.job-card:hover,.inst-card:hover{
    transform:translateY(-6px) perspective(900px) rotateX(2.2deg);
    box-shadow:0 18px 40px rgba(15,20,32,.16)}
  .partner-media{overflow:hidden}
  .partner-media img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .partner-row:hover .partner-media img{transform:scale(1.05)}
  /* gallery zoom */
  .gallery-grid a,.gal a{overflow:hidden}
  .gallery-grid img,.gal img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .gallery-grid a:hover img,.gal a:hover img{transform:scale(1.08)}
  /* video cover hover */
  .videos .yt img,.vt img{transition:transform .5s ease,filter .3s ease}
  .videos .yt:hover img,.vt:hover img{transform:scale(1.05);filter:brightness(1.05)}
  /* instructor photo subtle pop */
  .inst-card:hover .inst-photo{transform:scale(1.06);box-shadow:0 8px 22px rgba(27,47,217,.3)}
  .inst-photo{transition:transform .25s ease,box-shadow .25s ease}
}
/* gentle scroll-reveal for sections (CSS scroll-driven where supported) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:861px){
    section .wrap > .section-head,.feature,.partner-row,.job-card{
      animation:revealUp .7s ease both;animation-timeline:view();animation-range:entry 0% entry 38%}
  }
}
@keyframes revealUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .feature,.card,.tuition,.plan,.quote,.res-card,.job-card,.inst-card,.partner-media,
  .gallery-grid img,.gal img,.videos .yt img,.vt img,.inst-photo{transition:none!important;animation:none!important;transform:none!important}
}

/* ============================================================
   REV v45 — TUITION CALCULATOR + COMPARISON TABLE
   ============================================================ */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:1.6rem;align-items:start}
.calc-controls{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:16px;padding:1.6rem;box-shadow:0 6px 20px rgba(15,20,32,.07)}
.calc-lbl{display:block;font-size:.82rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .4rem}
.calc-select{width:100%;height:52px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;font:inherit;font-size:1rem;background:#fff;color:var(--ink);margin-bottom:1.1rem}
.calc-foot-note{font-size:.82rem;color:var(--ink-soft);line-height:1.5;margin-top:.4rem}
.calc-result{background:linear-gradient(160deg,#0f1830,#0c1424);color:#fff;border-radius:16px;padding:1.7rem;box-shadow:0 14px 36px rgba(15,20,32,.28)}
.calc-prog-name{font-size:1.25rem;font-weight:800;font-family:var(--font-display,inherit)}
.calc-meta{font-size:.86rem;color:#aab3c5;margin-top:.25rem}
.calc-total-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:1.1rem 0 1rem;flex-wrap:wrap}
.calc-total-amt{font-size:2.8rem;font-weight:900;line-height:1;color:var(--gold-bright,#f4c44a);display:block}
.calc-total-lbl{font-size:.8rem;color:#aab3c5;text-transform:uppercase;letter-spacing:.06em}
.calc-dur{font-size:.9rem;color:#cfd6e4;font-weight:600}
.calc-break{display:flex;align-items:center;gap:1rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:1rem;margin-bottom:.9rem}
.calc-break-item{flex:1;text-align:center}
.cb-amt{display:block;font-size:1.5rem;font-weight:800;color:#fff}
.cb-lbl{font-size:.78rem;color:#aab3c5}
.calc-break-x{font-size:1.3rem;color:#7d8aa3;font-weight:700}
.calc-plan-note{font-size:.85rem;color:#cfd6e4;line-height:1.55;margin-bottom:1.1rem}
.calc-call{display:block;text-align:center;color:#aab3c5;font-size:.9rem;margin-top:.7rem;text-decoration:none}
.calc-call:hover{color:#fff}
@media(max-width:760px){.calc{grid-template-columns:1fr}.calc-total-amt{font-size:2.3rem}}

/* comparison table → responsive cards on mobile */
.cmp-wrap{overflow-x:auto;margin-top:1.4rem}
.cmp{width:100%;border-collapse:collapse;background:rgba(255,255,255,.92);border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(15,20,32,.07)}
.cmp th{background:var(--ink,#10131a);color:#fff;text-align:left;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;padding:.9rem 1rem}
.cmp td{padding:.9rem 1rem;border-top:1px solid var(--line);font-size:.95rem;color:var(--ink-soft);vertical-align:top}
.cmp td b{color:var(--ink)}
.cmp tbody tr:hover{background:rgba(27,47,217,.04)}
@media(max-width:720px){
  .cmp,.cmp thead,.cmp tbody,.cmp tr,.cmp td{display:block}
  .cmp thead{display:none}
  .cmp tr{border:1px solid var(--line);border-radius:12px;margin-bottom:1rem;background:rgba(255,255,255,.92);overflow:hidden}
  .cmp td{border:none;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;text-align:right}
  .cmp td:last-child{border-bottom:none}
  .cmp td::before{content:attr(data-l);font-weight:800;color:var(--ink);text-transform:uppercase;font-size:.72rem;letter-spacing:.04em;text-align:left;align-self:center}
}

/* ===== v47 — Social icons: clear branded boxes + hover effects ===== */
.socials{gap:.6rem}
.socials a.soc{
  position:relative;width:46px;height:46px;border-radius:13px;          /* boxes, not circles */
  display:inline-flex;align-items:center;justify-content:center;          /* icon centered */
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.22);
  color:#fff;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  overflow:hidden;isolation:isolate;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .25s ease,background .25s ease;
}
.socials a.soc svg{width:21px;height:21px;position:relative;z-index:1;transition:transform .25s cubic-bezier(.2,.7,.2,1),color .2s ease}
/* brand color wash slides up from bottom on hover */
.socials a.soc::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;transform:translateY(38%);
  background:var(--soc,#caa14a);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.2,1);
}
.socials a.soc:hover,.socials a.soc:focus-visible{
  transform:translateY(-5px) scale(1.06);
  border-color:transparent;color:#fff;
  box-shadow:0 12px 26px -6px var(--soc,#caa14a),0 0 0 1px rgba(255,255,255,.12) inset;
}
.socials a.soc:hover::before,.socials a.soc:focus-visible::before{opacity:1;transform:translateY(0)}
.socials a.soc:hover svg{transform:scale(1.12)}
.socials a.soc:active{transform:translateY(-2px) scale(1.02)}
/* per-provider brand colors */
.socials a.soc-fb{--soc:#1877F2}
.socials a.soc-ig::before{background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fd5949 45%,#d6249f 70%,#285AEB 100%)}
.socials a.soc-ig{--soc:#d6249f}
.socials a.soc-x{--soc:#000}
.socials a.soc-x:hover,.socials a.soc-x:focus-visible{box-shadow:0 12px 26px -6px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.35) inset}
.socials a.soc-yt{--soc:#FF0000}
.socials a.soc-pin{--soc:#E60023}
@media (prefers-reduced-motion:reduce){
  .socials a.soc,.socials a.soc svg,.socials a.soc::before{transition:none}
  .socials a.soc:hover{transform:none}
}

/* ===== v48 — Home content from client mobile reference (responsive) ===== */
/* Hero urgency + schedule chips */
.hero-urgency{display:inline-flex;align-items:center;gap:.4rem;margin:.9rem auto 0;padding:.4rem .9rem;border-radius:999px;
  background:rgba(227,185,78,.16);border:1px solid rgba(227,185,78,.5);color:#ffe9b0;font-weight:700;font-size:.86rem;letter-spacing:.01em}
.hero-urgency .hu-flame{filter:saturate(1.2)}
.hero-sched{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:.7rem auto 0}
.hero-sched span{padding:.34rem .85rem;border-radius:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-weight:800;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}

/* What You Get — badge grid */
.succeed-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.succeed-badge{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;
  background:var(--paper-2,#efe7d8);border:1px solid var(--line,rgba(0,0,0,.1));border-radius:13px;padding:1rem .6rem;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease,border-color .2s ease}
.succeed-badge .sb-ico{font-size:1.5rem;line-height:1}
.succeed-badge b{font-size:.8rem;font-weight:800;color:var(--text-dark,#1c2025);line-height:1.25}
.succeed-badge:hover{transform:translateY(-4px);border-color:var(--gold,#c9a227);box-shadow:0 12px 26px -10px rgba(0,0,0,.28)}

/* Career Earnings tiers (on .dark) */
.earn-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.earn-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:1.4rem 1.2rem}
.earn-card.is-feat{border-color:var(--gold-bright,#e3b94e);border-width:2px;background:rgba(227,185,78,.08)}
.earn-stage{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-bright,#e3b94e);margin-bottom:.5rem}
.earn-amt{display:block;font-family:'Oswald',sans-serif;font-size:2rem;font-weight:700;color:#fff;line-height:1;margin-bottom:.55rem}
.earn-card p{font-size:.9rem;color:var(--text-on-dark-mute,#9aa0a8);line-height:1.5;margin:0}
.earn-dis{font-size:.74rem;color:rgba(255,255,255,.4);line-height:1.5;margin:1.1rem auto 0;max-width:760px;text-align:center}

/* Graduate stats + shop chips */
.grad-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.6rem}
.grad-stat{background:var(--paper-2,#efe7d8);border:1px solid var(--line,rgba(0,0,0,.1));border-radius:12px;padding:1.1rem .6rem;text-align:center}
.grad-stat b{display:block;font-family:'Oswald',sans-serif;font-size:1.7rem;color:var(--gold,#c9a227);line-height:1}
.grad-stat span{display:block;font-size:.78rem;color:var(--text-mute,#5a6068);margin-top:.3rem}
.shop-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-top:1.2rem}
.shop-chips span{background:var(--ink,#101316);color:#fff;font-size:.78rem;font-weight:700;padding:.5rem .95rem;border-radius:999px}

/* Final CTA band */
.final-cta{background:var(--ink,#101316);padding:clamp(2.4rem,6vw,3.6rem) 0;text-align:center;
  border-top:3px solid var(--gold,#c9a227)}
.final-cta h2{color:#fff;margin:0 0 .6rem}
.final-cta p{color:var(--text-on-dark-mute,#9aa0a8);max-width:620px;margin:0 auto 1.4rem;line-height:1.55}

/* Responsive */
@media(max-width:840px){
  .succeed-grid{grid-template-columns:repeat(3,1fr)}
  .earn-tiers{grid-template-columns:1fr}
}
@media(max-width:520px){
  .succeed-grid{grid-template-columns:repeat(2,1fr);gap:.55rem}
  .succeed-badge{padding:.85rem .5rem}
  .succeed-badge b{font-size:.74rem}
  .grad-stats{grid-template-columns:1fr 1fr}
  .grad-stat:last-child{grid-column:1/-1}
  .earn-amt{font-size:1.7rem}
}
@media (prefers-reduced-motion:reduce){.succeed-badge{transition:none}.succeed-badge:hover{transform:none}}

/* cf3d — black cinematic 3D coverflow gallery */
.cf3d-stage{position:relative;margin:8px 0 10px}
.cf3d-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:46px 44vw;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cf3d-track::-webkit-scrollbar{display:none}
.cf3d-card{flex:0 0 auto;width:300px;aspect-ratio:3/4;scroll-snap-align:center;position:relative;border:0;padding:0;cursor:pointer;background:#0b0e14;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.6);transition:opacity .2s ease;will-change:transform}
.cf3d-card img{width:100%;height:100%;object-fit:cover;display:block}
.cf3d-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:120;width:52px;height:52px;border-radius:50%;border:1px solid rgba(217,164,65,.5);background:rgba(11,14,20,.7);color:#d9a441;font-size:30px;cursor:pointer;backdrop-filter:blur(6px)}
.cf3d-arrow.prev{left:12px}.cf3d-arrow.next{right:12px}
.cf3d-sub{color:#9aa3b2;margin:.3rem 0 1rem}
.cf3d-reels{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x mandatory;scrollbar-width:none}
.cf3d-reels::-webkit-scrollbar{display:none}
.cf3d-reel{position:relative;flex:0 0 auto;width:190px;aspect-ratio:9/16;scroll-snap-align:start;border:1px solid rgba(217,164,65,.25);cursor:pointer;background:linear-gradient(160deg,#15110a,#0b0e14);border-radius:16px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.55);transition:transform .2s ease,border-color .2s ease}
.cf3d-reel:hover{transform:translateY(-5px);border-color:rgba(217,164,65,.7)}
.cf3d-reel video{width:100%;height:100%;object-fit:cover;display:block}
.cf3d-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;color:#d9a441;background:radial-gradient(circle,rgba(0,0,0,.1),rgba(0,0,0,.55))}
.cf3d-lb{position:fixed;inset:0;z-index:300;background:rgba(2,3,6,.96);display:none;align-items:center;justify-content:center;padding:20px}
.cf3d-lb.on{display:flex}
.cf3d-lb img{max-width:94vw;max-height:90vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.8)}
.cf3d-lb-x{position:absolute;top:14px;right:20px;font-size:34px;color:#d9a441;background:0;border:0;cursor:pointer;line-height:1}
@media(max-width:640px){.cf3d-track{padding:36px 30vw}.cf3d-card{width:230px}}
@media(prefers-reduced-motion:reduce){.cf3d-card,.cf3d-reel{transition:none}}

/* ============================================================================
   v10.1 AUDIT FIXES  (appended — later rules win; neutralizes earlier duplicates)
   Refs: _audit/01-header-nav, 02-text-bg, 03-instructors, 05-schedule
   ========================================================================== */

/* contrast-correct brand tokens (royal-blue anchor + on-dark variants) */
:root{
  --blue-deep:#0f1b7a;
  --blue-on-dark:#8b9bff;   /* accent text on dark/ink ~5.6:1 */
  --blue-bright:#6e80ff;
  --surface:#ffffff;
  --surface-alt:#f5f7fb;
  --page-tint-a:#f5f7fb;
  --page-tint-b:#eef2f9;
}

/* ---- 02: kill the full-page photo bleed; flat legible page tint ---- */
body{background:linear-gradient(180deg,var(--page-tint-a),var(--page-tint-b)) !important;}
body::before{content:none !important;}          /* remove fixed page-wide photo */
/* opaque content surfaces so nothing shows through behind text */
.sec, section.sec, .alt, .sec-alt, .feature, .formcard, .prose, .closing-wrap{background:var(--surface);} 
.sec.alt, .sec-alt, section.alt{background:var(--surface-alt) !important;}
.feature{background:var(--surface) !important;}

/* ---- 02: hero accent + script underline legible on dark ---- */
.hero-h1 .accent{color:var(--blue-on-dark) !important;filter:none !important;}
.hero-script::after{background:var(--blue-bright) !important;}
.hero-grad{background:linear-gradient(90deg,rgba(8,10,16,.86) 0%,rgba(8,10,16,.62) 55%,rgba(8,10,16,.5) 100%) !important;}

/* ---- 02: re-skin gold CTA to on-brand blue gradient ---- */
.btn-gold{background:linear-gradient(135deg,#2742ff,#1b2fd9) !important;color:#fff !important;border:0 !important;}
.btn-gold:hover{background:linear-gradient(135deg,#1b2fd9,#1322a8) !important;}

/* ---- 01: ONE-LINE main nav, clean hamburger switch (defeats leaked flex-wrap:wrap) ---- */
@media (max-width:1199px){
  .mainnav{display:none !important;}
  .hamburger{display:flex !important;}
  .header-cta{display:none !important;}
}
@media (min-width:1200px){
  .mainnav{display:flex !important;flex-wrap:nowrap !important;position:static !important;
           flex:1 1 auto;justify-content:center;align-items:center;
           gap:clamp(.3rem,.7vw,.7rem);background:transparent !important;border:0 !important;
           padding:0 !important;box-shadow:none !important;max-height:none !important;
           overflow:visible !important;opacity:1 !important;visibility:visible !important;
           transform:none !important;white-space:nowrap;}
  .mainnav a{white-space:nowrap;flex:0 0 auto;border:0 !important;padding:.4rem .25rem;
             font-size:clamp(.7rem,.85vw,.86rem);min-height:auto;}
  .hamburger{display:none !important;}
  .header-cta{display:inline-flex !important;}
}

/* ---- 03: instructors — single clean class, BIGGER circular headshots that fit faces ---- */
.inst-photo, .inst-avatar.inst-photo, .inst-avatar--lg.inst-photo{
  width:clamp(160px,22vw,220px) !important;height:auto !important;aspect-ratio:1/1 !important;
  border-radius:50% !important;object-fit:cover !important;object-position:50% 25%;
  display:block !important;margin:0 auto .9rem !important;background:#dfe4f0 !important;
  border:0 !important;transform:none !important;
  box-shadow:0 0 0 4px #fff,0 0 0 7px var(--blue),0 14px 30px rgba(16,19,26,.22) !important;
}
.inst-feature .inst-photo, .inst-photo--lg, .inst-avatar--lg.inst-photo{
  width:clamp(220px,30vw,320px) !important;
  box-shadow:0 0 0 5px #fff,0 0 0 9px var(--blue),0 18px 40px rgba(16,19,26,.28) !important;
}
.inst-card{align-items:center;text-align:center;}
.inst-card .inst-tag{margin:0 auto .35rem;}
.inst-card p, .inst-card ul, .inst-card .inst-diff{text-align:left;align-self:stretch;}
.inst-card:hover .inst-photo{transform:translateY(-3px) !important;transition:transform .25s ease;}
.inst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.6rem;}
.inst-group-photo img, .inst-group-photo{object-fit:contain !important;max-height:none !important;height:auto !important;width:100%;border-radius:18px;background:#0e1117;}
@media (max-width:560px){
  .inst-photo{width:clamp(150px,52vw,180px) !important;}
  .inst-feature .inst-photo{width:clamp(190px,60vw,240px) !important;}
}

/* ---- 05: schedule date-grid tighter floor on small phones ---- */
@media (max-width:560px){
  .date-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr)) !important;gap:.75rem !important;}
}
.card-body p, .tuition .when, .date-card{overflow-wrap:anywhere;}

/* ============================================================================
   v10.5 — white header + new blended logo, theme LOCKED to blue, black type
   ========================================================================== */
/* theme switcher removed — blue only */
.theme-dots,.tdot{display:none!important}

/* HEADER: solid white, crisp blue top border, black nav, logo blended (no plate) */
.topbar{border-top:4px solid #0a2fd6}
.hdr{background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
     border-bottom:1px solid #e6e8ef!important;box-shadow:0 2px 14px rgba(16,19,26,.07)}
.hdr .logo,.hdr .logo.brand-plate,.brand-plate{background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important}
.logo-img{filter:none!important}
.logo:hover .logo-img{filter:none!important;transform:scale(1.03)}
.mainnav a{color:#0a0a0a!important;font-weight:600}
.mainnav a:hover,.mainnav a.is-active,.mainnav a[aria-current]{color:var(--blue)!important}
.hamburger span{background:#0a0a0a!important}
.lang-toggle{border-color:#d6d9e3!important}
.lang-toggle a{color:#0a0a0a!important}
.lang-toggle a.is-active{color:#fff!important;background:var(--blue)!important}

/* TYPOGRAPHY: near-black headings, dark-grey body, blue eyebrows (multiple shades + sizes) */
.sec h2,.section-head h2,.prose h2,.abi-h2,.campus h3,.acc-btn,.feature h3,.card h3,
.tuition h3,.inst-card h3,.phil-card h3,.res-card h3,.campus-name,.section-head h3{
  color:#0a0c10!important;letter-spacing:-.012em}
.sec h3,.prose h3{color:#1b1f27!important}
.sec p,.prose p,.prose li,.feature p,.card p,.lead,.abi-lead,.acc-body li,.res-list li,.inst-card p{
  color:#34383f!important}
.lead,.abi-lead{color:#2a2e36!important}
.eyebrow,.kicker,.abi-eyebrow{color:var(--blue)!important;font-weight:700;letter-spacing:.14em}
/* keep text WHITE on dark surfaces */
.hero-h1,.hero-sub,.hero .feature,.hero .feature span,
section.dark h2,section.dark h3,section.dark p,section.dark li,
.closing h2,.closing p,section.trust,section.trust *,
.cta-band h2,.cta-band p,.foot-cta h2,.foot-cta p{color:#fff!important}
.cta-band .kicker,.closing .kicker,section.dark .kicker{color:#bcd0ff!important}

/* HOME right-section images */
.split-media{display:flex;align-items:center}
.home-shot{width:100%;height:100%;max-height:460px;object-fit:cover;border-radius:18px;
  box-shadow:0 18px 42px rgba(16,19,26,.18);display:block}
@media (max-width:860px){.home-shot{max-height:320px}}

/* GALLERY — AI video reels grid */
.ai-reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-top:1.4rem}
.ai-reel{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:9/16;background:#0a0e1a;
  box-shadow:0 12px 28px rgba(16,19,26,.16);border:1px solid #e6e8ef}
.ai-reel video{width:100%;height:100%;object-fit:cover;display:block}
.ai-reel figcaption{position:absolute;left:0;right:0;bottom:0;padding:.6rem .7rem;font-size:.78rem;
  color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);font-weight:600}

.ai-reel{aspect-ratio:16/9!important}

/* footer logo: new white-bg logo on dark footer -> clean white badge */
.foot-logo{background:#fff;border-radius:10px;padding:9px 13px;height:auto!important;max-width:230px;width:auto;box-shadow:0 6px 18px rgba(0,0,0,.25)}

/* ============================================================================
   v10.6 — home full-width background-image banners (static, group photos, text overlaid)
   ========================================================================== */
/* v16.0 — light-blue/white banner (was dark photo) */
.home-banner{position:relative;background-size:cover;background-position:center center;
  padding:clamp(3.4rem,8vw,6rem) 0;color:#0a1020;border-top:1px solid #e3ecf8}
.home-banner__in{max-width:780px}
.home-banner h2{color:#0a1020!important;font-size:clamp(1.75rem,3.6vw,2.7rem);letter-spacing:-.012em;margin:.2rem 0 .6rem}
.home-banner .eyebrow{color:#1b2fd9!important;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.home-banner .lead,.home-banner .prose,.home-banner .prose p,.home-banner .prose li,.home-banner p{color:#3a4763!important}
.home-banner .prose ul{margin:1.1rem 0 0;padding:0;list-style:none;display:grid;gap:.55rem}
.home-banner .prose li{position:relative;padding-left:1.7rem;font-weight:500}
.home-banner .prose li::before{content:"\2713";position:absolute;left:0;top:0;color:#1b2fd9;font-weight:700}

/* partner photo (Untouchable Cutz fixed: was an invisible white logo) */
.partner-media:not(.partner-logo) img{width:100%;height:100%;object-fit:cover}

/* ============================================================================
   v10.8 — Google reviews badge (real ABI NYC 4.6 / 100+ rating + live link)
   ========================================================================== */
/* ============================================================
   v14.1 — In-hero countdown (left column, under the feature chips,
   fills the empty space beside the lead-form) + faded hero-image bg
   on the three text-only sections (Why ABI, Zero to Pro, Earnings).
   ============================================================ */
.hero-cd{
  margin:1.6rem 0 0;
  padding:1.3rem 1.3rem 1.4rem;
  max-width:34rem;
  background:rgba(8,12,28,.42);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  backdrop-filter:blur(8px) saturate(1.05);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);
  box-shadow:0 18px 44px rgba(0,0,0,.4);
}
/* v16.0 — title + date render inline on one row, wrapping gracefully on mobile */
.hero-cd-h{
  margin:0 0 .5rem;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.15rem,2.2vw,1.7rem);font-weight:400;line-height:1.2;
  color:#fff!important;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;
}
.hero-cd-h-label{color:#fff!important;font-weight:400}
.hero-cd-h-date{color:#5fb8ff!important;font-weight:500;text-shadow:0 1px 10px rgba(0,0,0,.4)}
@media (max-width:520px){
  .hero-cd-h{font-size:clamp(1rem,4.2vw,1.25rem);gap:.3rem;justify-content:flex-start}
  .hero-cd-h-date{white-space:nowrap}
}
.hero-cd-sub{
  margin:0 0 1rem;
  font-size:.92rem;font-weight:500;color:#e8eaf2!important;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.hero-cd-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.55rem;
}
.hero-cd-cell{
  border:1.5px solid rgba(255,255,255,.65);
  border-radius:14px;
  padding:.7rem .3rem .55rem;
  text-align:center;
  background:transparent;
}
.hero-cd-cell b{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.3rem,2.4vw,1.85rem);font-weight:400;line-height:1;
  color:#fff!important;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.hero-cd-cell span{
  display:block;margin-top:.35rem;
  font-size:.62rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.92)!important;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
@media (max-width:520px){
  .hero-cd{padding:1rem 1rem 1.05rem;margin-top:1.1rem}
  .hero-cd-cell{padding:.55rem .25rem .45rem}
  .hero-cd-cell span{font-size:.58rem;letter-spacing:.12em}
}

/* Three sections gain a clearly-visible hero-image background — photo shows
   through ~55%, text stays readable via softer wash + text-shadow */
/* v15.0.4 — per-section background photos on the homepage.
   FINAL: the v14.6 dark scrim + dark glass cards have been REMOVED. Photos
   show naturally. Cards revert to light translucent glass. Text reverts to
   default dark colors. Per-section photo selection is unchanged. This is
   the settled state — see memory rule abi-dont-touch-images. */
.sec-photo{
  position:relative;isolation:isolate;
  background-size:cover!important;
  background-position:center!important;
  background-attachment:scroll!important;
  background-repeat:no-repeat!important;
}
/* Cards over photos get a light translucent glass surface so the photo
   shows around the cards while card content stays readable in default dark text. */
.sec-photo .feature,
.sec-photo .zero-step,
.sec-photo .earn-card,.sec-photo .earn>div,
.sec-photo .plan,
.sec-photo .testi-card,
.sec-photo .faq details,
.sec-photo .yt,
.sec-photo .gal-reel,
.sec-photo .video-card{
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  border:1px solid rgba(255,255,255,.6)!important;
}

/* v16.0 — per-section background photos REMOVED. Clean white surface
   throughout; cards and gallery photos remain. */
body.page-splash .sec--pills,
body.page-splash .sec--steps,
body.page-splash .sec--zero,
body.page-splash .sec--earnings,
body.page-splash .sec--tuition,
body.page-splash .sec--videos,
body.page-splash .sec--gallery,
body.page-splash .sec--testi,
body.page-splash .sec--faq{
  background-image:none!important;
  background:#ffffff!important;
}

/* v13.7 — Haircuts hero: centered layout with periwinkle pill CALL button
   matching client screenshot 1:1 */
.hair-hero{text-align:center}
.hair-hero-in{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.4rem;padding:2.2rem 1rem 2.6rem}
.hair-kicker{
  margin:0 0 .6rem;
  font-size:.82rem;font-weight:800;
  letter-spacing:.32em;text-transform:uppercase;
  color:#9aa4ff!important;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.hair-h1{
  margin:0 0 1rem;
  font-size:clamp(2.4rem,5.8vw,4.6rem);
  font-weight:900;line-height:1.05;
  color:#fff!important;
  text-shadow:0 2px 22px rgba(0,0,0,.65);
}
.hair-lead{
  margin:0 auto 1.6rem;max-width:48rem;
  font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.55;
  color:#e8eaf2!important;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.hair-call-eyebrow{
  margin:1.5rem 0 .9rem;
  font-size:.78rem;font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.78)!important;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.hair-call-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.85rem;
  padding:1.1rem 2.6rem;
  background:#7c84ff;
  color:#fff!important;
  text-decoration:none;
  font-size:clamp(1.5rem,3vw,2.3rem);
  font-weight:800;letter-spacing:.01em;
  border-radius:9999px;
  box-shadow:0 14px 40px rgba(124,132,255,.45),0 0 0 1px rgba(255,255,255,.12) inset;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.hair-call-btn:hover{
  background:#8a91ff;
  transform:translateY(-2px);
  box-shadow:0 18px 48px rgba(124,132,255,.6),0 0 0 1px rgba(255,255,255,.18) inset;
}
.hair-call-dot{
  flex-shrink:0;
  width:9px;height:9px;border-radius:50%;
  background:#ff4d4f;
  box-shadow:0 0 10px rgba(255,77,79,.65);
}
.hair-call-icon{
  width:clamp(28px,3.4vw,42px);height:clamp(28px,3.4vw,42px);
  flex-shrink:0;color:#fff;
}
.hair-call-num{white-space:nowrap}

@media (max-width:560px){
  .hair-h1{font-size:clamp(2rem,8vw,2.6rem)}
  .hair-call-btn{padding:.95rem 1.6rem;gap:.6rem;font-size:1.35rem}
  .hair-call-icon{width:26px;height:26px}
}

/* v13.5 — Softer Google Reviews badge: no dark-blue dominance, true rounded corners,
   light-airy aesthetic so the card breathes against the gallery photo bg. */
.greviews-badge{
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  background:#fff;
  border:0!important;
  border-radius:22px!important;
  padding:1.25rem 1.55rem;margin:1.6rem auto 1rem;
  max-width:680px;
  box-shadow:0 18px 44px rgba(16,19,26,.10),0 1px 0 rgba(16,19,26,.04);
}
.greviews-badge .g-mark{flex:0 0 auto;line-height:0}
.greviews-badge .g-meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;gap:.05rem}
.greviews-badge .g-top{display:flex;align-items:center;gap:.55rem}
.greviews-badge .g-score{font-size:2rem;font-weight:800;color:#1a1d24}
.greviews-badge .g-stars{color:#fbbc05;font-size:1.2rem;letter-spacing:1px}
.greviews-badge .g-count{font-size:.88rem;color:#5a6070;font-weight:500;margin-top:.2rem}
.greviews-badge .g-cta{
  margin-left:auto;white-space:nowrap;
  background:#f4f6fc!important;
  color:#1f2433!important;
  border:1px solid #e5e8f0!important;
  border-radius:14px!important;
  padding:.7rem 1.15rem!important;
  font-weight:700!important;font-size:.9rem!important;
  box-shadow:none!important;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.greviews-badge .g-cta:hover{
  background:#eaf0fb!important;
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(16,19,26,.08)!important;
}

/* Soft chips — no harsh blue border */
.g-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin:.4rem auto 1.7rem;max-width:780px}
.g-chip{
  background:#f4f6fc!important;
  color:#3a4660!important;
  border:0!important;
  border-radius:999px!important;
  padding:.5rem 1rem!important;
  font-size:.84rem!important;font-weight:600!important;
  box-shadow:0 1px 0 rgba(16,19,26,.04);
  transition:background .18s ease;
}
.g-chip:hover{background:#eaf0fb!important}

@media (max-width:600px){
  .greviews-badge{flex-direction:column;text-align:center;padding:1.1rem 1.2rem}
  .greviews-badge .g-cta{margin:.5rem 0 0;width:100%;text-align:center}
  .greviews-badge .g-meta{align-items:center}
}

/* ============================================================================
   v10.9 — side-by-side sky-blue gradient cards (replaces the old image banners)
   ========================================================================== */
.duo-sec{padding:clamp(3rem,7vw,5rem) 0}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
.duo-card{position:relative;overflow:hidden;border-radius:22px;
  padding:clamp(1.6rem,3vw,2.5rem);
  background:linear-gradient(155deg,#f5faff 0%,#e4f1ff 55%,#d7e9ff 100%);
  border:1px solid #c8ddff;
  box-shadow:0 20px 46px rgba(27,47,217,.14),inset 0 1px 0 #fff;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.duo-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,#1b2fd9,#3ad0ff,#1b2fd9);background-size:200% 100%;animation:duoBar 8s linear infinite}
@keyframes duoBar{to{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.duo-card::before{animation:none}}
.duo-card:hover{transform:perspective(1000px) translateY(-8px) rotateX(2.5deg);
  box-shadow:0 32px 64px rgba(27,47,217,.24)}
.duo-eb{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#1786b3;margin-bottom:.5rem}
.duo-h{font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.14;margin:0 0 .7rem;font-weight:800;
  background:linear-gradient(95deg,#1b2fd9,#2f6fe0,#1b2fd9);-webkit-background-clip:text;background-clip:text;color:transparent}
.duo-lead{color:#3a4660!important;margin:0 0 1.15rem;font-size:.98rem;line-height:1.55}
.duo-list{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
.duo-list li{position:relative;padding-left:2.1rem;color:#1f2a44;font-weight:600;line-height:1.42}
.duo-list li::before{content:"\2713";position:absolute;left:0;top:0;width:1.45rem;height:1.45rem;
  display:grid;place-items:center;border-radius:50%;font-size:.78rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#1b2fd9,#3ad0ff);box-shadow:0 3px 9px rgba(27,47,217,.42)}
@media (max-width:760px){.duo{grid-template-columns:1fr}}

/* v10.10 — earnings figures: home cards are white, so force the amount BLACK (a later
   .earn-amt rule for the dark inner-page tiers was leaking white-on-white) */
.earn .earn-amt{color:#0a0c10!important}

/* ============================================================================
   v10.12 — multi-section gallery (AI film, masonry, coverflow, reel wall,
            people grid, class carousel, full-bleed banners). Mobile + desktop.
   ========================================================================== */
.section-head.center{text-align:center}
.section-head.center .kicker{justify-content:center}

/* AI brand film + showcase strip */
.gal-film-sec{padding-top:20px}
.gal-film{position:relative;max-width:1000px;margin:0 auto;border-radius:20px;overflow:hidden;background:#0b0e14;box-shadow:0 30px 80px rgba(0,0,0,.32);aspect-ratio:16/9}
.gal-film video{width:100%;height:100%;object-fit:cover;display:block}
.gal-aistrip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:18px}
.gal-aitile{position:relative;border-radius:14px;overflow:hidden;background:#0b0e14;aspect-ratio:9/16;box-shadow:0 14px 34px rgba(0,0,0,.26)}
.gal-aitile video{width:100%;height:100%;object-fit:cover;display:block}
.gal-aitile figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 10px 8px;font-size:.72rem;line-height:1.2;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.78));font-weight:600}

/* hairstyle masonry */
.gallery-grid.gal-masonry{display:block;column-count:4;column-gap:14px;grid-template-columns:none}
.gallery-grid.gal-masonry a{display:block;margin:0 0 14px;break-inside:avoid;border-radius:14px;overflow:hidden;aspect-ratio:auto;background:#0b0e14}
.gallery-grid.gal-masonry img{width:100%;height:auto;display:block;object-fit:contain}

/* floor reel wall (autoplay video[data-src] handled by upgrade.js) */
.gal-reelwall{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.gal-reel{position:relative;border-radius:16px;overflow:hidden;background:#0b0e14;aspect-ratio:9/16;box-shadow:0 18px 44px rgba(0,0,0,.3)}
.gal-reel video{width:100%;height:100%;object-fit:cover;display:block}
.gal-reel figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 10px;font-size:.78rem;line-height:1.25;color:#fff;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.8))}

/* people portrait grid */
.gallery-grid.gal-people{grid-template-columns:repeat(4,1fr)}
.gallery-grid.gal-people a{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5}
.gallery-grid.gal-people img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-grid.gal-people span{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;font-size:.78rem;line-height:1.25;color:#fff;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.82));opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}
.gallery-grid.gal-people a:hover span{opacity:1;transform:none}

/* class carousel (horizontal snap) */
.gallery-grid.gal-carousel{display:flex;grid-template-columns:none;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;scrollbar-width:none}
.gallery-grid.gal-carousel::-webkit-scrollbar{display:none}
.gallery-grid.gal-carousel a{flex:0 0 auto;width:min(82vw,520px);aspect-ratio:4/3;scroll-snap-align:center;border-radius:16px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.22)}
.gallery-grid.gal-carousel img{width:100%;height:100%;object-fit:cover;display:block}

/* full-bleed shop banners */
.gallery-grid.gal-banners{display:grid;grid-template-columns:1fr;gap:16px}
.gallery-grid.gal-banners a{aspect-ratio:16/9;border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.22)}
.gallery-grid.gal-banners img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:940px){
  .gal-aistrip,.gal-reelwall{grid-template-columns:repeat(3,1fr)}
  .gallery-grid.gal-masonry{column-count:3}
  .gallery-grid.gal-people{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .gal-aistrip,.gal-reelwall{grid-template-columns:repeat(2,1fr)}
  .gallery-grid.gal-masonry{column-count:2}
  .gallery-grid.gal-people{grid-template-columns:repeat(2,1fr)}
  .gallery-grid.gal-people span{opacity:1;transform:none}
  .gallery-grid.gal-banners a{aspect-ratio:16/10}
}

/* ============================================================================
   v11.0 — FINAL REVISIONS: header nav (visible/CAPS/bigger/spaced), bigger logo,
   blue urgency, two-campus bar + spinning barber pole, lighter hero overlay,
   footer name, cohesive blue boxes + decompressed spacing. Loads last → wins.
   ========================================================================== */

/* ---- Inline main nav: visible ≥1200px, hamburger below ---- */
@media (min-width:1200px){
  header.hdr nav.mainnav{display:flex!important;flex-wrap:nowrap;justify-content:center;align-items:center;
    gap:1.15rem;border-top:1px solid var(--line);padding:.7rem 1rem;background:#fff}
  /* v16.1 — Jobs and FAQs are wrapped in <span class="nav-drop"> so the direct-child
     selector misses them. Apply the SAME look to the nav-drop trigger too. */
  header.hdr nav.mainnav>a,
  header.hdr nav.mainnav>.nav-drop>.nav-drop-trigger{
    font-size:.92rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:#0c1020;white-space:nowrap;padding:.25rem .1rem;position:relative;transition:color .2s ease;
    text-decoration:none;display:inline-block}
  header.hdr nav.mainnav>a:hover,
  header.hdr nav.mainnav>.nav-drop>.nav-drop-trigger:hover{color:var(--blue)}
  header.hdr nav.mainnav>a::after,
  header.hdr nav.mainnav>.nav-drop>.nav-drop-trigger::after{
    content:"";position:absolute;left:0;right:0;bottom:-.35rem;height:2px;
    background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
  header.hdr nav.mainnav>a:hover::after,
  header.hdr nav.mainnav>a[aria-current="page"]::after,
  header.hdr nav.mainnav>.nav-drop:hover>.nav-drop-trigger::after,
  header.hdr nav.mainnav>.nav-drop>.nav-drop-trigger[aria-current="page"]::after{transform:scaleX(1)}
  header.hdr .hamburger{display:none!important}
}
@media (max-width:1199px){
  header.hdr nav.mainnav{display:none!important}
  header.hdr .hamburger{display:flex!important}
}

/* ---- Logo slightly bigger ---- */
.logo-img{height:60px!important}
@media (max-width:768px){.logo-img{height:48px!important}}
@media (max-width:400px){.logo-img{height:40px!important}}

/* ---- Urgency line in ABI blue (both lines) ---- */
.urgency{padding:1.1rem 1rem .3rem}
.urgency-flame{color:var(--blue)!important;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.urgency-sub{color:var(--blue)!important;font-weight:700}

/* ---- Two-campus bar (replaces single start pill) ---- */
.campusbar{padding:1rem 1rem 1.4rem}
.campusbar-in{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;width:min(1100px,94%);margin-inline:auto}
.campus-card{flex:1 1 320px;max-width:520px;display:flex;align-items:center;gap:.9rem;text-decoration:none;
  padding:.9rem 1.15rem;border-radius:16px;border:1px solid rgba(27,47,217,.18);
  background:linear-gradient(135deg,#f4f7ff 0%,#e9eeff 100%);
  box-shadow:0 6px 22px rgba(27,47,217,.10);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.campus-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(27,47,217,.20);border-color:rgba(27,47,217,.45)}
.campus-info{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.campus-name{font-weight:800;font-size:1.02rem;color:#0c1020;letter-spacing:.01em}
.campus-addr{font-size:.84rem;color:#4a5163;line-height:1.3}
.campus-next{font-size:.8rem;font-weight:800;color:var(--blue);letter-spacing:.03em;text-transform:uppercase;margin-top:.15rem}
.campus-card::after{content:"→";margin-left:auto;color:var(--blue);font-size:1.2rem;font-weight:700;transition:transform .2s ease}
.campus-card:hover::after{transform:translateX(4px)}
@media (max-width:560px){.campus-card{flex:1 1 100%}}

/* ---- Hero: let the photo show (lighter overlay, keep text readable) ---- */
.hero-grad{background:linear-gradient(90deg,rgba(7,11,24,.78) 0%,rgba(7,11,24,.52) 42%,rgba(7,11,24,.18) 100%)!important}
@media (max-width:860px){.hero-grad{background:linear-gradient(180deg,rgba(7,11,24,.55),rgba(7,11,24,.78))!important}}

/* ---- Footer name (logo removed) ---- */
.foot-name{font-family:inherit;font-weight:800;font-size:1.25rem;letter-spacing:.02em;color:#fff;margin:0 0 .6rem}

/* ---- Decompress spacing site-wide (8pt rhythm, roomier sections) ---- */
section{padding-block:clamp(2.6rem,5vw,4.6rem)}
.section-head{margin-bottom:2rem}
.wrap.split{gap:clamp(1.8rem,4vw,3.4rem)}
.gallery-grid{gap:18px}
.checks li{margin-bottom:.5rem}

/* ---- Cohesive blue card treatment (inner-page .card + home .feature) ---- */
.card,.feature{border:1px solid rgba(27,47,217,.14)!important;
  background:linear-gradient(145deg,#ffffff 0%,#f3f6ff 100%)!important;
  border-radius:16px!important;box-shadow:0 6px 20px rgba(16,19,26,.06)!important;
  transition:transform .22s ease,box-shadow .22s ease}
.card:hover,.feature:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(27,47,217,.16)!important}

/* ---- v11.0 — Class start dates + federal holidays section ---- */
.sec-dates .date-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin:1.8rem 0}
.date-card{background:linear-gradient(145deg,#ffffff,#eef2ff);border:1px solid rgba(27,47,217,.16);border-radius:18px;padding:1.5rem 1.6rem;box-shadow:0 8px 26px rgba(27,47,217,.08)}
.date-yr{font-size:1.5rem;font-weight:800;color:var(--blue);margin:0 0 1rem;letter-spacing:.02em}
.date-list,.hol-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.date-row{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;padding-bottom:.55rem;border-bottom:1px dashed rgba(27,47,217,.14)}
.date-row:last-child{border-bottom:0}
.date-mo{font-weight:800;color:#0c1020;min-width:2.6rem;text-transform:uppercase;font-size:.8rem;letter-spacing:.05em}
.date-day{color:#3a4256;font-weight:600}
.date-row.is-holiday{background:rgba(244,196,74,.16);border-radius:10px;padding:.55rem .65rem;border-bottom:0}
.date-flag{flex-basis:100%;font-size:.74rem;color:#8a5a00;font-weight:700;margin-top:.2rem}
.hol-row{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.5rem;border-bottom:1px dashed rgba(27,47,217,.14)}
.hol-row:last-child{border-bottom:0}
.hol-name{font-weight:700;color:#0c1020;font-size:.92rem}
.hol-day{color:#3a4256;font-weight:600;text-align:right;white-space:nowrap;font-size:.88rem}
.date-note{background:linear-gradient(135deg,#eef2ff,#e3e9ff);border-left:4px solid var(--blue);border-radius:12px;padding:1.05rem 1.3rem;color:#1c2333;font-weight:600;margin:1.6rem 0 2.8rem}
.date-hol-h{margin-top:.5rem}
@media (max-width:900px){.sec-dates .date-grid{grid-template-columns:1fr}}

/* ---- v11.0 — About: class schedule cards ---- */
.sched-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:2rem 0 1rem}
.sched-card{position:relative;overflow:hidden;background:linear-gradient(150deg,#ffffff,#eef2ff);border:1px solid rgba(27,47,217,.18);border-radius:20px;padding:1.7rem 1.6rem;box-shadow:0 10px 30px rgba(27,47,217,.10);display:flex;flex-direction:column;gap:.5rem;transition:transform .22s ease,box-shadow .22s ease}
.sched-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(27,47,217,.20)}
.sched-card--feature{border-color:var(--blue);box-shadow:0 14px 38px rgba(27,47,217,.22)}
.sched-card h3{font-size:1.5rem;margin:.2rem 0 0;color:#0c1020}
.sched-when{font-weight:700;color:var(--blue);font-size:.92rem;margin:0}
.sched-list{list-style:none;margin:.6rem 0 1.1rem;padding:0;display:flex;flex-direction:column;gap:.55rem}
.sched-list li{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.55rem;border-bottom:1px dashed rgba(27,47,217,.16);font-size:.95rem}
.sched-list li:last-child{border-bottom:0}
.sched-list span{color:#4a5163}
.sched-list b{color:#0c1020;font-weight:800;text-align:right}
.sched-card .btn{margin-top:auto;width:100%;text-align:center}
.sched-note{font-size:.84rem;color:#5a6172;margin-top:1.2rem;line-height:1.5}
@media (max-width:860px){.sched-grid{grid-template-columns:1fr}}

/* ============================================================================
   v11.1 — Haircuts page, AI chatbot, subtle backgrounds, 12-item nav
   ========================================================================== */

/* 12-item nav: tighten so it stays on one line */
@media (min-width:1200px){
  header.hdr nav.mainnav{gap:.92rem}
  header.hdr nav.mainnav>a{font-size:.85rem;letter-spacing:.04em}
}
@media (min-width:1200px) and (max-width:1340px){
  header.hdr nav.mainnav>a{font-size:.8rem;letter-spacing:.02em}
}

/* hide legacy chat bubble + tip (replaced by AI chatbot) */
.bubble,.bubble-tip{display:none!important}

/* ---- Haircuts page ---- */
.price-callout{display:flex;align-items:baseline;gap:.8rem;margin-top:1.4rem;padding:1rem 1.3rem;border-radius:16px;background:linear-gradient(135deg,#eef2ff,#e3e9ff);border:1px solid rgba(27,47,217,.18);flex-wrap:wrap}
.price-amt{font-size:2.8rem;font-weight:900;color:var(--blue);line-height:1}
.price-note{color:#3a4256;font-weight:600}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--blue),#3a4ff0);color:#fff;font-weight:800;font-size:1.1rem;margin-bottom:.6rem}
.styles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem;margin-top:1.4rem}
.style-chip{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-radius:12px;font-weight:700;color:#0c1020;background:linear-gradient(145deg,#fff,#f3f6ff);border:1px solid rgba(27,47,217,.16);box-shadow:0 4px 14px rgba(16,19,26,.05);transition:transform .2s ease,box-shadow .2s ease}
.style-chip:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(27,47,217,.16)}
.style-chip::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:2px;background:var(--blue)}

/* ---- Subtle background imagery (text stays fully readable) ---- */
.sec-alt,.section.alt,section.alt{position:relative;isolation:isolate}
.sec-alt::before,.section.alt::before,section.alt::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url('/assets/img/gallery/shop-01.jpg') center/cover fixed;opacity:.05;pointer-events:none}
.cta-band{position:relative;isolation:isolate;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:url('/assets/img/gallery/cut-05.jpg') center/cover;opacity:.14;pointer-events:none;mix-blend-mode:luminosity}
@media (max-width:860px){.sec-alt::before,.section.alt::before,section.alt::before{background-attachment:scroll}}

/* ---- AI chatbot widget ---- */
.abibot{position:fixed;right:20px;bottom:20px;z-index:300;font-family:inherit}
.abibot-fab{position:relative;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--blue),#3a4ff0);color:#fff;box-shadow:0 10px 30px rgba(27,47,217,.45);
  display:flex;align-items:center;justify-content:center;transition:transform .2s ease,box-shadow .2s ease}
.abibot-fab svg{width:28px;height:28px}
.abibot-fab:hover{transform:scale(1.06);box-shadow:0 14px 38px rgba(27,47,217,.55)}
.abibot-fab.is-open{transform:scale(.92)}
.abibot-fab-dot{position:absolute;top:8px;right:9px;width:11px;height:11px;border-radius:50%;background:#23d160;border:2px solid #fff}
.abibot-fab.abibot-nudge{animation:abibotNudge 1.4s ease-in-out 3}
@keyframes abibotNudge{0%,100%{transform:translateY(0)}30%{transform:translateY(-9px)}60%{transform:translateY(-2px)}}
.abibot-panel{position:absolute;right:0;bottom:74px;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 130px));
  background:#fff;border-radius:20px;box-shadow:0 26px 70px rgba(8,11,18,.34);display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(27,47,217,.14)}
.abibot-head{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;background:linear-gradient(135deg,var(--blue),#3a4ff0);color:#fff}
.abibot-ava{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.85rem;letter-spacing:.03em;flex:0 0 auto}
.abibot-head b{display:block;font-size:.98rem;line-height:1.1}
.abibot-head span{font-size:.74rem;opacity:.85}
.abibot-close{margin-left:auto;background:0;border:0;color:#fff;font-size:1.2rem;cursor:pointer;opacity:.85;line-height:1}
.abibot-close:hover{opacity:1}
.abibot-log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:#f6f8ff}
.abibot-msg{max-width:84%;padding:.65rem .85rem;border-radius:14px;font-size:.92rem;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.abibot-bot{align-self:flex-start;background:#fff;color:#15192340;color:#161b27;border:1px solid rgba(27,47,217,.12);border-bottom-left-radius:4px}
.abibot-user{align-self:flex-end;background:linear-gradient(135deg,var(--blue),#3a4ff0);color:#fff;border-bottom-right-radius:4px}
.abibot-typing{display:flex;gap:4px;align-items:center}
.abibot-typing span{width:7px;height:7px;border-radius:50%;background:var(--blue);opacity:.5;animation:abibotDot 1s infinite}
.abibot-typing span:nth-child(2){animation-delay:.2s}.abibot-typing span:nth-child(3){animation-delay:.4s}
@keyframes abibotDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.abibot-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem .8rem;background:#f6f8ff;border-top:1px solid rgba(27,47,217,.08)}
.abibot-chip{border:1px solid rgba(27,47,217,.3);background:#fff;color:var(--blue);border-radius:999px;padding:.4rem .8rem;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .15s ease,color .15s ease}
.abibot-chip:hover{background:var(--blue);color:#fff}
.abibot-input{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid rgba(27,47,217,.12);background:#fff}
.abibot-input input{flex:1;border:1px solid rgba(27,47,217,.22);border-radius:999px;padding:.6rem .95rem;font-size:.9rem;outline:none}
.abibot-input input:focus{border-color:var(--blue)}
.abibot-input button{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--blue),#3a4ff0);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.abibot-input button svg{width:18px;height:18px}
@media (max-width:560px){
  .abibot{right:14px;bottom:78px}
  .abibot-panel{bottom:70px;height:min(72vh,520px)}
}
.abibot-panel[hidden]{display:none!important}

/* ============================================================================
   v11.2 — fix chatbot/call overlap + label AI, gallery polish, vertical Space
   ========================================================================== */

/* --- AI chatbot fab: labeled pill, clearly an AI assistant --- */
.abibot-fab{width:auto;min-width:60px;height:58px;border-radius:30px;padding:0 18px 0 14px;gap:.5rem}
.abibot-fab-label{font-weight:800;font-size:.92rem;letter-spacing:.01em;white-space:nowrap}
.abibot-fab-badge{position:absolute;top:-6px;right:-4px;background:#23d160;color:#06381a;font-size:.62rem;font-weight:900;letter-spacing:.04em;padding:2px 6px;border-radius:999px;border:2px solid #fff}
.abibot-fab.is-open .abibot-fab-label{display:none}
.abibot-fab.is-open{width:58px;padding:0;justify-content:center}
@media (max-width:560px){.abibot-fab .abibot-fab-label{display:none}.abibot-fab{width:58px;min-width:58px;padding:0;justify-content:center}}

/* --- Separate the floating "Request a Call" (inner pages) from the AI fab --- */
.desk-cta{bottom:92px!important;right:20px!important;z-index:295!important;background:#fff!important;color:var(--blue)!important;border:2px solid var(--blue);box-shadow:0 10px 26px rgba(27,47,217,.28)!important;animation:none!important}
.desk-cta:hover{background:var(--blue)!important;color:#fff!important}
.abibot{right:20px;bottom:20px}
@media (max-width:980px){.desk-cta{display:none}}

/* --- Gallery: "American Barber Institute, in motion" on one line --- */
.gal-film-sec .section-head h2{white-space:nowrap;font-size:clamp(1.15rem,4.2vw,2rem)}

/* --- Gallery brightness + motion polish (multiple methods) --- */
.gal-masonry img,.cf3d-card img,.gal-people img,.gal-carousel img,.gal-reel video,.gal-vscroll img{
  filter:brightness(1.06) contrast(1.04) saturate(1.07)}
.gal-masonry a img,.gal-people a img,.gal-carousel a img{transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s ease}
.gal-masonry a:hover img,.gal-people a:hover img,.gal-carousel a:hover img{transform:scale(1.06);filter:brightness(1.12) contrast(1.05) saturate(1.1)}
.gallery-grid.gal-masonry a,.gallery-grid.gal-people a,.gal-vscroll a{position:relative}
.gallery-grid.gal-people a::after{content:"";position:absolute;inset:0;border-radius:14px;box-shadow:inset 0 0 0 0 rgba(27,47,217,0);transition:box-shadow .3s ease;pointer-events:none}
.gallery-grid.gal-people a:hover::after{box-shadow:inset 0 0 0 3px rgba(27,47,217,.7)}
/* gradient accent on gallery section eyebrows */
.gal-film-sec .kicker,#reviews .eyebrow{background:linear-gradient(90deg,var(--blue),#5a6cff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* --- The Space: vertical scroller (vertical, not horizontal) --- */
.gal-vscroll{max-height:600px;overflow-y:auto;scroll-snap-type:y proximity;display:flex;flex-direction:column;gap:16px;
  padding:14px;border-radius:20px;background:linear-gradient(160deg,#0b0e14,#11162a);box-shadow:inset 0 0 40px rgba(0,0,0,.5);scrollbar-width:thin;scrollbar-color:var(--blue) #1a2030}
.gal-vscroll::-webkit-scrollbar{width:9px}
.gal-vscroll::-webkit-scrollbar-thumb{background:var(--blue);border-radius:6px}
.gal-vscroll::-webkit-scrollbar-track{background:#1a2030;border-radius:6px}
.gal-vscroll a{flex:0 0 auto;scroll-snap-align:start;border-radius:14px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 10px 28px rgba(0,0,0,.4)}
.gal-vscroll img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gal-vscroll a:hover img{transform:scale(1.05)}
.gal-vscroll::after{content:"↓ scroll";position:sticky;bottom:0;align-self:center;font-size:.72rem;color:#9aa3b8;background:rgba(11,14,20,.8);padding:3px 12px;border-radius:999px;pointer-events:none}

/* ============================================================================
   v11.3 — REBUILT class-dates + holidays (sky-blue, animated, mobile-clear).
   auto-fit grid → never cramped on mobile. Replaces old .date-grid/.sec-dates.
   ========================================================================== */
.scal-sec{background:linear-gradient(165deg,#ecf6ff 0%,#dbe9ff 100%)}
.scal-sec .eyebrow{color:#0ea5e9}
.scal-sec h2,.scal-hol-h{color:#0c4a6e}
.scal-sec .lead{color:#345}
.scal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:1.8rem 0}
.scal-holhead{margin-top:2.8rem}
.scal-hol-h{margin:0 0 .4rem}
.scal-card{background:linear-gradient(160deg,#ffffff 0%,#eaf4ff 100%);border:1px solid #bfdbfe;border-radius:20px;
  padding:1.5rem 1.55rem;box-shadow:0 12px 32px rgba(14,165,233,.14);transition:transform .25s ease,box-shadow .25s ease}
.scal-card:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(14,165,233,.26)}
.scal-card--hol{background:linear-gradient(160deg,#ffffff 0%,#e7f6ff 100%);border-color:#a5e0fb}
.scal-yr{font-size:1.7rem;font-weight:900;margin:0 0 1rem;color:#0284c7;letter-spacing:.01em;display:flex;align-items:center;gap:.55rem}
.scal-yr::before{content:"";width:10px;height:26px;border-radius:4px;background:linear-gradient(180deg,#38bdf8,#0284c7)}
.scal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
/* two locked columns: label/name on the left (wraps), date pinned right & aligned.
   minmax(0,1fr) lets the name shrink/wrap so the nowrap date never overflows. */
.scal-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:.8rem;
  padding:.62rem .15rem;border-bottom:1px solid rgba(14,165,233,.16)}
.scal-row:last-child{border-bottom:0}
.scal-mo{font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#0ea5e9}
.scal-hname{font-weight:700;color:#0f2747;font-size:.9rem;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.scal-day{font-weight:700;color:#0b3a63;font-size:.86rem;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.scal-row--hol{padding:.55rem .15rem}
@media (max-width:430px){.scal-hname{font-size:.86rem}.scal-day{font-size:.8rem}}
/* entrance animation (in addition to data-reveal stagger) */
@media (prefers-reduced-motion:no-preference){
  .scal-card{will-change:transform}
  .scal-card[data-reveal]:not(.is-in){opacity:0;transform:translateY(26px)}
  .scal-card.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
}

/* v11.3 — new gallery sections (Color & Creativity, Shaves & Grooming) */
.gallery-grid.gal-color{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.gallery-grid.gal-color a{aspect-ratio:4/5;border-radius:16px;overflow:hidden;position:relative;box-shadow:0 12px 30px rgba(16,19,26,.14)}
.gallery-grid.gal-color img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(1.07) contrast(1.05) saturate(1.12);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gallery-grid.gal-color a:hover img{transform:scale(1.07)}
.gallery-grid.gal-color a::after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 0 rgba(27,47,217,0);transition:box-shadow .3s ease;pointer-events:none}
.gallery-grid.gal-color a:hover::after{box-shadow:inset 0 0 0 3px rgba(27,47,217,.75),0 0 24px rgba(27,47,217,.3)}
@media (max-width:560px){.gallery-grid.gal-color{grid-template-columns:repeat(2,1fr)}}

/* ============ v11.5 — A Personal Welcome (sky-blue interactive) ============ */
.welcome-sec{background:linear-gradient(165deg,#eef7ff 0%,#dcebff00 0%);background:linear-gradient(165deg,#eef7ff 0%,#d8ecff 100%)}
.welcome-card{display:grid;grid-template-columns:200px 1fr;gap:0;border-radius:24px;overflow:hidden;
  background:#fff;border:1px solid #c9e3ff;box-shadow:0 26px 60px rgba(14,108,180,.18);max-width:980px;margin-inline:auto}
.welcome-aside{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  background:linear-gradient(160deg,#0ea5e9 0%,#1b2fd9 100%);color:#fff;padding:2rem 1rem}
.welcome-mono{font-family:'Poppins',sans-serif;font-weight:800;font-size:2.6rem;letter-spacing:.04em;
  text-shadow:0 2px 10px rgba(0,0,0,.25)}
.welcome-body{padding:2.4rem 2.6rem}
.welcome-eb{color:#0ea5e9}
.welcome-h{color:#0c4a6e;margin:.2rem 0 1rem}
.welcome-quote{font-family:'Caveat',cursive;font-size:1.7rem;line-height:1.25;color:#1b2fd9;margin:0 0 1.1rem;font-weight:700}
.welcome-body p{color:#33485f;line-height:1.7;margin:0 0 1rem}
.welcome-sig{margin-top:1.4rem;padding-top:1.1rem;border-top:2px solid #e0f0ff;display:flex;flex-direction:column}
.welcome-sig-name{font-weight:800;color:#0c4a6e;font-size:1.02rem}
.welcome-sig-role{color:#0ea5e9;font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;margin-top:.15rem}
@media (max-width:760px){.welcome-card{grid-template-columns:1fr}.welcome-aside{flex-direction:row;padding:1.4rem}
  .welcome-mono{font-size:2rem}.welcome-body{padding:1.6rem 1.4rem}.welcome-quote{font-size:1.45rem}}

/* ============ v11.5 — Zero to Pro (sky-blue numbered journey) ============ */
.zero-sec{background:linear-gradient(180deg,#f4fbff 0%,#e4f2ff 100%)}
.zero-head{text-align:center;max-width:720px;margin-inline:auto}
.zero-sec .eyebrow{color:#0ea5e9}
.zero-title{color:#0c4a6e}
.zero-sec .lead{color:#345}
.zero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:2rem}
.zero-step{position:relative;background:linear-gradient(160deg,#ffffff 0%,#eaf5ff 100%);border:1px solid #bfe0ff;
  border-radius:20px;padding:2.4rem 1.6rem 1.6rem;box-shadow:0 12px 30px rgba(14,108,180,.12);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.zero-step:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(14,165,233,.26);border-color:#0ea5e9}
.zero-num{position:absolute;top:-22px;left:1.4rem;width:52px;height:52px;display:grid;place-items:center;border-radius:14px;
  font-family:'Poppins',sans-serif;font-weight:800;font-size:1.25rem;color:#fff;
  background:linear-gradient(150deg,#38bdf8,#1b2fd9);box-shadow:0 10px 22px rgba(27,47,217,.34)}
.zero-h{color:#0c4a6e;margin:.3rem 0 .55rem;font-size:1.18rem}
.zero-step p{color:#3a5169;line-height:1.6;margin:0}
@media (prefers-reduced-motion:no-preference){
  .zero-step[data-reveal]:not(.is-in){opacity:0;transform:translateY(26px)}
  .zero-step.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}}

/* ============ v11.7 — Resources page: clean sky-blue, NO images, high contrast ============ */
/* Opaque sections so the faint full-page photo never bleeds behind the text. */
.res-hero{padding:clamp(3rem,7vw,5.2rem) 0 clamp(2.4rem,5vw,3.6rem);color:#fff;
  background:linear-gradient(135deg,#0ea5e9 0%,#1b2fd9 100%)}
.res-hero .crumbs{color:#dbeafe;font-size:.85rem;margin:0 0 1.1rem}
.res-hero .crumbs a{color:#fff;text-decoration:none;font-weight:600}.res-hero .crumbs span{opacity:.55;margin:0 .35rem}
.res-kicker{display:inline-block;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.76rem;
  color:#0c4a6e;background:#fff;padding:.4rem .9rem;border-radius:999px;margin-bottom:1rem}
.res-hero h1{font-size:clamp(2rem,5vw,3rem);line-height:1.1;margin:0 0 .9rem;color:#fff}
.res-hero-sub{max-width:660px;color:#eaf4ff;font-size:1.06rem;line-height:1.65;margin:0 0 2rem}
.res-hero-stats{display:flex;flex-wrap:wrap;gap:1rem}
.res-stat{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:14px;padding:.9rem 1.2rem}
.res-stat strong{display:block;font-family:'Poppins',sans-serif;font-size:1.5rem;color:#fff;line-height:1}
.res-stat span{font-size:.8rem;color:#eaf4ff}

.res-sec{padding:clamp(2.8rem,6vw,4.4rem) 0;background:#ffffff}
.res-sec--alt{background:linear-gradient(180deg,#eaf4ff 0%,#dcecff 100%)}
.res-head{max-width:720px;margin:0 auto 2.4rem;text-align:center}
.res-eyebrow{display:inline-block;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.76rem;color:#0284c7;margin-bottom:.5rem}
.res-head h2{font-size:clamp(1.55rem,3.5vw,2.2rem);color:#0c2740;margin:0 0 .6rem}
.res-lead{color:#3a5169;font-size:1.04rem;line-height:1.6;margin:0}
.res-lead a{color:#0284c7;font-weight:700}

.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;max-width:1120px;margin-inline:auto}
.res-grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.res-card{position:relative;background:#fff;border:1px solid #bfe0fb;border-top:4px solid #0ea5e9;
  border-radius:16px;padding:1.9rem 1.6rem;box-shadow:0 10px 26px rgba(12,71,110,.08);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;display:flex;flex-direction:column;text-decoration:none}
.res-sec--alt .res-card{background:#fff}
.res-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(14,165,233,.22);border-top-color:#1b2fd9}
.res-num{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:1rem;
  font-family:'Poppins',sans-serif;font-weight:800;font-size:1.15rem;color:#fff;background:linear-gradient(150deg,#38bdf8,#1b2fd9)}
.res-card h3{color:#0c2740;font-size:1.16rem;margin:0 0 .55rem}
.res-card p{color:#41566b;line-height:1.6;margin:0 0 1rem}
.res-points,.res-checks{list-style:none;margin:0 0 1.1rem;padding:0;display:flex;flex-direction:column;gap:.55rem}
.res-points li,.res-checks li{position:relative;padding-left:1.6rem;color:#33485f;font-size:.93rem;line-height:1.45}
.res-points li::before,.res-checks li::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:2px;
  background:#0ea5e9;transform:translateY(-50%)}
.res-link{margin-top:auto;align-self:flex-start;font-weight:800;color:#0284c7;font-size:.92rem;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.res-link span{transition:transform .25s ease;display:inline-block}
.res-card:hover .res-link span{transform:translateX(5px)}
.res-card--list h3{padding-bottom:.7rem;border-bottom:2px solid #e0f0ff;margin-bottom:.9rem}
.res-card--link .res-badge{align-self:flex-start;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.68rem;
  color:#1b2fd9;background:#e2f1ff;border:1px solid #bae6fd;padding:.25rem .6rem;border-radius:999px;margin-bottom:.8rem}

.res-cta{padding:clamp(2.8rem,6vw,4.2rem) 0;color:#fff;text-align:center;background:linear-gradient(135deg,#1b2fd9 0%,#0c4a6e 100%)}
.res-cta .res-eyebrow--light{color:#bae6fd}
.res-cta h2{font-size:clamp(1.6rem,4vw,2.3rem);margin:.3rem 0 .8rem;color:#fff}
.res-cta p{max-width:640px;margin:0 auto 1.6rem;color:#eaf4ff;line-height:1.65}
.res-cta-btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

.res-states{list-style:none;margin:1.4rem auto 0;padding:0;max-width:1120px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.7rem}
.res-states li{background:#fff;border:1px solid #cfe6ff;border-left:4px solid #38bdf8;border-radius:10px;padding:.75rem .95rem;color:#33485f;font-size:.9rem;line-height:1.35;
  transition:transform .2s ease,box-shadow .2s ease}
.res-states li:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(14,108,180,.16)}
.res-state--hl{background:linear-gradient(135deg,#0ea5e9,#1b2fd9)!important;border-left-color:#0c4a6e!important;color:#fff!important;display:flex;flex-direction:column}
.res-state--hl b{font-size:1rem}.res-state--hl span{font-size:.82rem;color:#eaf4ff}
@media (max-width:560px){.res-hero-stats{gap:.6rem}.res-stat{flex:1 1 42%}}

/* ============ v11.5 — Instructors: In the Classroom ============ */
.icl-sec{background:linear-gradient(180deg,#f3faff 0%,#e6f3ff 100%)}
.icl-feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2rem;align-items:center;
  max-width:1080px;margin:0 auto 2.4rem}
.icl-feature .yt{box-shadow:0 22px 50px rgba(14,108,180,.24);border-radius:18px}
.icl-feature-txt h3{color:#0c4a6e;font-size:1.5rem;margin:0 0 .7rem}
.icl-feature-txt p{color:#3a5169;line-height:1.7;margin:0 0 1rem}
.icl-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.icl-bullets li{position:relative;padding-left:1.8rem;color:#33485f;font-weight:600;line-height:1.45}
.icl-bullets li::before{content:"";position:absolute;left:0;top:.1rem;width:20px;height:20px;border-radius:6px;
  background:linear-gradient(150deg,#38bdf8,#1b2fd9);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12 4 4 10-10'/%3E%3C/svg%3E") center/70% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12 4 4 10-10'/%3E%3C/svg%3E") center/70% no-repeat}
.icl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;max-width:1080px;margin-inline:auto}
.icl-shot{position:relative;margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 14px 32px rgba(14,108,180,.16);transform-style:preserve-3d;background:#dbeafe}
.icl-shot img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(1.06) saturate(1.05);
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.icl-shot:hover img{transform:scale(1.07)}
.icl-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .8rem;color:#fff;font-weight:700;font-size:.92rem;
  background:linear-gradient(180deg,transparent,rgba(8,28,54,.82));display:flex;flex-direction:column;gap:.35rem}
.icl-tag{align-self:flex-start;font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  background:linear-gradient(150deg,#38bdf8,#1b2fd9);padding:.2rem .55rem;border-radius:999px}
@media (max-width:780px){.icl-feature{grid-template-columns:1fr;gap:1.3rem}}

/* ============ v11.6 — lift AI fab above the mobile action bar (.mbar shows <=840px) ============
   .mbar is ~74px tall + iOS safe-area; the AI fab must clear it on every width where the bar shows. */
@media (max-width:840px){
  .abibot{right:16px;bottom:calc(82px + env(safe-area-inset-bottom,0px))}
  .abibot-panel{bottom:72px}
}
@media (max-width:560px){
  .abibot{right:12px;bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}

/* ============================================================
   v12.4 — surgical client edits: kill campusbar+trust-strip,
   EN|ES toggle besides Become-a-Barber on all viewports, chatbot gate
   ============================================================ */
.campusbar,.campusbar-in,.campus-card,.trust-strip,section.trust{display:none!important}

/* ============================================================
   v13.4 — Universal sound button injected by video-sound.js on every <video>
   ============================================================ */
.vs-btn{
  position:absolute;top:.65rem;right:.65rem;z-index:25;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.62);color:#fff;
  display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  transition:background .15s ease,transform .15s ease;
  padding:0;
}
.vs-btn svg{width:20px;height:20px;display:block}
.vs-btn:hover{background:#1b2fd9;transform:scale(1.08)}
.vs-btn.vs-muted{background:rgba(0,0,0,.55)}
.vs-btn.vs-muted:hover{background:#1b2fd9}
@media (max-width:560px){
  .vs-btn{width:34px;height:34px;top:.5rem;right:.5rem}
  .vs-btn svg{width:17px;height:17px}
}

/* ============================================================
   v13.2 — Student-voices reel section (portrait 9:16 testimonial video,
   uncropped, hover-to-play). Replaces old .abi-brandband band.
   ============================================================ */
/* v16.0 — clean white card on white page, light-blue accents (was dark navy) */
.abi-reel{
  position:relative;z-index:1;
  margin:3rem auto;width:min(1240px,94%);
  background:#ffffff;
  border:1px solid #e3ecf8;
  border-radius:22px;overflow:hidden;
  box-shadow:0 12px 32px rgba(15,30,80,.08),0 2px 0 rgba(255,255,255,.65) inset;
}
.abi-reel__frame{
  display:grid;grid-template-columns:1fr;gap:1.4rem;
  padding:1.4rem;align-items:center;
}
.abi-reel__media{
  position:relative;width:min(340px,80vw);margin:0 auto;
  aspect-ratio:9/16;
  border-radius:18px;overflow:hidden;
  background:#000;
  box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.10) inset;
  cursor:pointer;
}
.abi-reel__video{
  width:100%;height:100%;
  object-fit:contain;       /* show ENTIRE video — no cropping */
  display:block;background:#000;
}
/* v16.6 — Center play/pause control. Visible & large when paused (call to action),
   smaller and semi-transparent while playing so it doesn't block the video — yet
   still tappable to pause. Hover/touch restores full visibility. Matches the
   Instagram / TikTok / X reel UX pattern. */
.abi-reel__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.95);color:#0a1020;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 32px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.05);
  transition:opacity .25s ease,transform .25s ease,background .2s ease;
  z-index:3;
}
.abi-reel__play:hover{background:#fff;transform:translate(-50%,-50%) scale(1.06)}
.abi-reel__play:focus-visible{outline:3px solid #5fb8ff;outline-offset:3px}
.abi-reel__play svg{width:32px;height:32px;fill:currentColor;pointer-events:none}
.abi-reel__icon-play{margin-left:4px}        /* triangle is visually off-center, nudge */
.abi-reel__icon-pause{display:none}
.abi-reel__media.is-playing .abi-reel__icon-play{display:none}
.abi-reel__media.is-playing .abi-reel__icon-pause{display:block}
/* v2.9 play-hide-only — button vanishes immediately on play.
   When the video stops or pauses, .is-playing is removed and the
   default styles re-appear. No other side effects. */
.abi-reel__media.is-playing .abi-reel__play,
.abi-reel__media.is-playing .abi-reel__play:hover{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate(-50%,-50%) scale(.5)!important;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
@media (hover:none){
  .abi-reel__media.is-playing .abi-reel__play{
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  }
}

/* v13.8 — Reel testimonial: ONE simple blue (#93c5fd) for all text.
   No gradients, no chip backgrounds, no glow — just clean readable blue. */
.abi-reel__copy{padding:.2rem .6rem 1rem;text-align:center;color:#93c5fd}
.abi-reel__kicker{
  margin:0 0 .5rem;font-weight:800;font-size:.88rem;
  letter-spacing:.24em;text-transform:uppercase;
  color:#93c5fd!important;
}
.abi-reel__title{
  margin:0 0 .75rem;
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  font-weight:900;line-height:1.08;letter-spacing:-.01em;
  color:#93c5fd!important;
  -webkit-text-fill-color:initial!important;
  background:none!important;
  text-shadow:none!important;
  filter:none!important;
}
.abi-reel__sub{
  margin:0 auto 1.2rem;max-width:38rem;
  color:#93c5fd!important;
  font-size:1.06rem;line-height:1.55;font-weight:500;
}
.abi-reel__points{
  list-style:none;padding:0;margin:0 auto;max-width:36rem;
  display:grid;gap:.55rem;text-align:left;
}
.abi-reel__points li{
  display:flex;align-items:flex-start;gap:.7rem;
  color:#93c5fd!important;
  font-size:1rem;line-height:1.5;font-weight:600;
  padding:0;background:none!important;border:0!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
.abi-reel__bullet-mark{
  flex-shrink:0;display:inline-block;
  width:8px;height:8px;border-radius:50%;
  margin-top:.55em;
  background:#93c5fd;
  box-shadow:none!important;
}

/* Desktop: video LEFT, copy CENTER, video RIGHT (v16.0 — twin testimonials) */
@media (min-width:880px){
  .abi-reel__frame{
    grid-template-columns:minmax(260px,320px) 1fr minmax(260px,320px);
    gap:1.8rem;padding:1.6rem 2rem;align-items:center;
  }
  .abi-reel__media{margin:0;width:100%;max-width:320px}
  .abi-reel__copy{text-align:center;padding:.4rem .6rem}
  .abi-reel__points{margin:0 auto}
}

/* ============================================================
   v13.0 — shrink mainnav so EN|ES + Become-a-Barber fit on desktop
   ============================================================ */
@media (min-width:1200px){
  .hdr-in{gap:.45rem!important;padding-left:.5rem;padding-right:.5rem}
  .mainnav{gap:clamp(.1rem,.35vw,.45rem)!important;flex:0 1 auto!important}
  .mainnav a,header.hdr nav.mainnav>a{
    font-size:clamp(.62rem,.7vw,.76rem)!important;
    padding:.32rem .18rem!important;
    letter-spacing:.04em!important;
  }
  .header-cta{
    font-size:.72rem!important;
    padding:.45rem .85rem!important;
    max-width:160px;
  }
  .hdr-in > .lang-toggle{font-size:.72rem!important;margin-left:.35rem!important}
  .hdr-in > .lang-toggle a{padding:.36rem .55rem!important}
  .brand-plate .logo-img{height:62px!important;width:auto!important}
}
@media (min-width:1400px){
  .mainnav a,header.hdr nav.mainnav>a{font-size:.82rem!important;padding:.4rem .25rem!important}
  .header-cta{font-size:.78rem!important;padding:.5rem 1rem!important;max-width:180px}
  .hdr-in > .lang-toggle{font-size:.78rem!important}
  .hdr-in > .lang-toggle a{padding:.4rem .68rem!important}
}

/* ============================================================
   v12.9 — Header order: logo → nav → EN|ES → Become-a-Barber → hamburger
   .lang-toggle is now a top-level flex child of .hdr-in (no wrapper)
   ============================================================ */
.hdr-in > .lang-toggle{
  display:inline-flex!important;flex-shrink:0;order:3;
  background:#ffffff!important;
  border:2px solid #1b2fd9!important;
  border-radius:999px!important;
  font-size:.84rem!important;font-weight:800!important;
  overflow:hidden!important;
  margin-left:.5rem;
}
.hdr-in > .lang-toggle a{
  color:#1b2fd9!important;
  padding:.42rem .7rem!important;
  text-decoration:none!important;
  transition:background .2s,color .2s!important;
}
.hdr-in > .lang-toggle a.is-active,
.hdr-in > .lang-toggle a:hover{
  background:#1b2fd9!important;color:#fff!important;
}
.hdr-in > .lang-toggle a+a{border-left:2px solid #1b2fd9}
.hdr-in > .header-cta{order:4}
.hdr-in > .hdr-right{order:5}

@media (max-width:1199px){
  /* on tablet/mobile, nav becomes hamburger drawer; keep EN|ES + hamburger visible */
  .hdr-in > .lang-toggle{margin-left:auto}
}
@media (max-width:560px){
  .hdr-in > .lang-toggle{font-size:.74rem!important}
  .hdr-in > .lang-toggle a{padding:.34rem .54rem!important}
}

/* FAQs nav dropdown (FAQs → FAQs / Schedules) */
.nav-drop{position:relative;display:inline-block}
.nav-drop-trigger{cursor:pointer}
.nav-drop-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-4px);
  display:flex;flex-direction:column;
  background:#0a1020;border:1px solid rgba(127,217,255,.28);border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  padding:.35rem;min-width:170px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
  z-index:120;
}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(2px);
  transition-delay:0s;
}
.nav-drop-menu a{
  display:block;padding:.55rem .8rem;color:#cfe6ff!important;font-size:.86rem!important;
  white-space:nowrap;border-radius:8px;text-decoration:none;
}
.nav-drop-menu a:hover{background:rgba(127,217,255,.14);color:#fff!important}
@media (max-width:1199px){
  .nav-drop-menu{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;background:transparent;border:0;box-shadow:none;padding:0 0 0 1rem}
}

/* AI chatbot pre-chat gate — collect contact info before any Q&A */
.abibot-gate{background:linear-gradient(135deg,#0a1245,#1322a8);color:#fff;padding:1rem;border-radius:14px;margin:.4rem 0;box-shadow:0 4px 18px rgba(8,12,42,.35)}
.abibot-gate-h{margin:0 0 .8rem;font-size:.94rem;font-weight:600;line-height:1.4;color:#fff}
.abibot-gate-form{display:flex;flex-direction:column;gap:.55rem}
.abibot-gate-form input{border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.96);color:#0a1020;border-radius:10px;padding:.65rem .9rem;font-size:.92rem;outline:none}
.abibot-gate-form input:focus{border-color:#7fd9ff;box-shadow:0 0 0 3px rgba(127,217,255,.28)}
.abibot-gate-btn{background:#7fd9ff;color:#0a1020;border:0;border-radius:999px;padding:.7rem 1.1rem;font-weight:800;cursor:pointer;margin-top:.25rem;transition:filter .2s}
.abibot-gate-btn:hover{filter:brightness(1.08)}
.abibot-gate-note{margin:.5rem 0 0;font-size:.72rem;line-height:1.4;color:rgba(255,255,255,.78)}

/* ═══════════ v15.1.0 — Student Voices + universal video posters ═════════════
   Student Voices text: previous sky-blue (#93c5fd) was unreadable on the
   white-glass section surface. Override to near-black so it pops cleanly. */
.abi-reel__copy,
.abi-reel__kicker,
.abi-reel__title,
.abi-reel__sub,
.abi-reel__points li{
  color:#0a0c10!important;
  -webkit-text-fill-color:#0a0c10!important;
  background:none!important;
  text-shadow:none!important;
}
.abi-reel__bullet-mark{background:#0a0c10!important}

/* Every <video> gets a dark-navy bg fallback (not pure black) so when the
   poster image hasn't loaded yet or the video file fails on a slow / blocked
   network, the box never renders as a stark black rectangle. */
video{background-color:#1a1f2e}
.abi-reel__video, .abi-clip__video,
.gal-reel video, .gal-aitile video, .gal-film video{background-color:#1a1f2e}

/* TCPA consent checkboxes (v2.1) */
.form-consent-block { margin: 1rem 0 .9rem; padding: .9rem; background: #f7f8fc; border: 1px solid #e2e6f0; border-radius: 10px; display: flex; flex-direction: column; gap: .65rem; }
.form-consent-row { display: grid; grid-template-columns: 22px 1fr; gap: .65rem; align-items: start; cursor: pointer; font-size: .78rem; line-height: 1.45; color: #5b6473; }
.form-consent-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: .15rem; cursor: pointer; }
.form-consent-row:hover { color: #1a1f2e; }


/* v2.10 — countdown sub on one line on mobile (strict 2-line header) */
@media (max-width:520px){
  .hero-cd-sub{
    font-size:clamp(.66rem, 2.85vw, .85rem);
    line-height:1.3;
    white-space:nowrap;
    overflow:visible;
    margin:0 0 .85rem;
    letter-spacing:-.005em;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   v3.8 — Site-wide "Limited Seats Available / Enrollment Now Open" banner
   Same visual as the landing-funnel .lf-seats block. Renders directly
   below the main header (<header class="hdr">) on every marketing page.
   ═════════════════════════════════════════════════════════════════════ */
/* v3.9 — two text lines, no boxed banner background */
.site-seats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: .65rem;
  row-gap: .15rem;
  padding: .9rem 1rem .8rem;
  background: transparent;
  border: 0;
  text-align: center;
}
.site-seats__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #e23d3d;
  box-shadow: 0 0 0 5px rgba(226, 61, 61, .20);
  animation: site-seats-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes site-seats-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(226, 61, 61, .20); }
  50%      { box-shadow: 0 0 0 10px rgba(226, 61, 61, .06); }
}
.site-seats__kicker {
  font-weight: 900;
  letter-spacing: .06em;
  color: #8a6500;
  text-transform: uppercase;
  font-size: clamp(1rem, 4vw, 1.35rem);
  line-height: 1.15;
}
.site-seats__lead {
  flex-basis: 100%;
  font-weight: 800;
  letter-spacing: .04em;
  color: #8a6500;
  text-transform: uppercase;
  font-size: clamp(.85rem, 3.4vw, 1.1rem);
  line-height: 1.2;
}
@media (max-width: 520px) {
  .site-seats { padding: .8rem .6rem; column-gap: .5rem; }
  .site-seats__dot { width: 10px; height: 10px; }
}

/* ═══════════ v125 — EXACT client-reference mobile header (home pages, body.mhx-on) ═══════════
   Order: white rounded card (logo · EN|ES · MN|BX · menu) → blue headline band →
   3 phone pills (EN / HAIRCUT / ES) → star seats strip. Blue palette. Desktop untouched. */
.mhx{display:none}
.loc-toggle{display:none;align-items:center;border:1.6px solid var(--blue,#1b2fd9);border-radius:999px;overflow:hidden;font-weight:800;font-size:.78rem;line-height:1;flex-shrink:0}
.loc-toggle a{padding:.4rem .62rem;color:var(--blue,#1b2fd9);text-decoration:none;min-height:auto;transition:background .2s ease,color .2s ease}
.loc-toggle a+a{border-left:1.6px solid var(--blue,#1b2fd9)}
.loc-toggle a.is-active,.loc-toggle a:hover{background:var(--blue,#1b2fd9);color:#fff}

@media (max-width:768px){
  body.mhx-on .topbar{display:none!important}
  body.mhx-on .site-seats{display:none}
  body.mhx-on .header-cta{display:none!important}

  /* header row → white rounded card on blue band (bigger logo + toggles, finger-safe spacing) */
  body.mhx-on .hdr{background:var(--blue,#1b2fd9);border-bottom:0;padding:.5rem .45rem .35rem}
  body.mhx-on .hdr-in{width:100%;margin:0;background:#fff;border:2px solid var(--blue-dark,#1322a8);border-radius:16px;padding:.55rem .5rem;gap:.3rem;box-shadow:0 6px 18px rgba(0,0,0,.22)}
  body.mhx-on .brand-plate{background:transparent;box-shadow:none;border:0;border-radius:0;padding:.1rem 0}
  body.mhx-on .brand-plate .logo-img{height:50px!important}
  body.mhx-on .lang-toggle{margin-left:auto}
  body.mhx-on .lang-toggle,body.mhx-on .loc-toggle{font-size:.9rem!important}
  body.mhx-on .lang-toggle a{padding:.56rem .68rem!important}
  body.mhx-on .loc-toggle a{padding:.56rem .68rem!important}
  body.mhx-on .loc-toggle{display:inline-flex;margin-left:.75rem;order:3}
  body.mhx-on .hamburger{margin-left:.35rem!important}
  body.mhx-on .nav-drawer{border-radius:0 0 14px 14px}

  /* block under the card */
  body.mhx-on .mhx{display:block;background:var(--blue,#1b2fd9);padding:.6rem .75rem 0;color:#fff}
  .mhx-promo{text-align:center;font-weight:800;font-size:.9rem;letter-spacing:.07em;text-transform:uppercase;line-height:1.45;padding:.1rem .2rem .65rem}
  .mhx-promo b{color:#ffd35c;font-weight:900}
  /* three pills in ONE row on every mobile width — row 1 = number, row 2 = icon + word */
  .mhx-phones{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:520px;margin:0 auto;padding-bottom:.85rem}
  .mhx-phone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:45px;padding:.4rem .12rem;border:1.6px solid rgba(255,255,255,.85);border-radius:15px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.24));box-shadow:0 3px 10px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);color:#fff;font-weight:800;white-space:nowrap;text-decoration:none;transition:background .2s,transform .2s,box-shadow .2s}
  .mhx-phone:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.18);color:#fff}
  .mhx-num{text-align:center;font-variant-numeric:tabular-nums;letter-spacing:0;font-size:.72rem;line-height:1.2}
  .mhx-lab{display:inline-flex;align-items:center;gap:4px;font-size:.54rem;font-weight:900;letter-spacing:.12em;color:#ffd35c;line-height:1;text-transform:uppercase}
  .mhx-lab svg{width:10px;height:10px;flex-shrink:0}
  .mhx-seats{display:flex;align-items:center;justify-content:center;gap:.7rem;background:var(--bg,#faf8f2);margin:0 -0.8rem;padding:.85rem 1rem;text-align:left}
  .mhx-star{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#10131a;color:#ffd35c;border:2px solid #8a6500;flex-shrink:0}
  .mhx-seats-t{display:flex;flex-direction:column;line-height:1.25}
  .mhx-seats-t b{font-weight:900;letter-spacing:.05em;color:#10131a;text-transform:uppercase;font-size:1.02rem}
  .mhx-seats-t i{font-style:normal;font-weight:800;letter-spacing:.04em;color:#8a6500;text-transform:uppercase;font-size:.84rem}
}
/* roomier pills on wider mobile / small tablets */
@media (min-width:600px) and (max-width:768px){
  .mhx-phones{gap:10px}
  .mhx-phone{min-height:56px}
  .mhx-num{font-size:.92rem}
  .mhx-lab{font-size:.64rem}
  .mhx-lab svg{width:12px;height:12px}
}
/* big phones (Pro Max / Plus / large Android) — slightly larger */
@media (min-width:412px) and (max-width:599px){
  .mhx-num{font-size:.76rem}
  .mhx-lab{font-size:.56rem}
  .mhx-lab svg{width:11px;height:11px}
}
/* ultra-narrow (320px-class): keep one row */
@media (max-width:350px){
  .mhx-phones{gap:4px}
  .mhx-phone{padding:.4rem .08rem;border-radius:12px;min-height:46px}
  .mhx-num{font-size:.67rem}
  .mhx-lab{font-size:.49rem;letter-spacing:.1em;gap:3px}
  .mhx-lab svg{width:9px;height:9px}
}
/* red status dot removed site-wide per client */
.site-seats__dot{display:none!important}
/* kill ANY decoration that could render as a dot inside the phone boxes —
   no pseudo-elements, no injected children besides number + label, no animations */
.mhx-phone{overflow:hidden;position:relative}
.mhx-phone::before,.mhx-phone::after,
.mhx-num::before,.mhx-num::after,
.mhx-lab::before,.mhx-lab::after,
.mhx-phones::before,.mhx-phones::after{content:none!important;display:none!important;background:none!important;box-shadow:none!important;animation:none!important}
.mhx-phone>*:not(.mhx-num):not(.mhx-lab){display:none!important}
.mhx-num>*:not(svg),.mhx-num{animation:none!important}
.mhx-phone .glare,.mhx-phone .abi-tilt__glare{display:none!important}
/* compact card on narrow phones so logo + EN|ES + MN|BX + menu fit one row
   (!important needed: legacy .logo-img / .hdr-in > .lang-toggle rules use it too) */
@media (max-width:430px){
  body.mhx-on .brand-plate .logo-img{height:42px!important}
  body.mhx-on .lang-toggle,body.mhx-on .loc-toggle{font-size:.8rem!important}
  body.mhx-on .lang-toggle a{padding:.48rem .54rem!important}
  body.mhx-on .loc-toggle a{padding:.48rem .54rem!important}
  body.mhx-on .loc-toggle{margin-left:.6rem}
  body.mhx-on .hamburger{width:40px;margin-left:.2rem!important}
  body.mhx-on .hdr-in{padding:.5rem .45rem;gap:.25rem}
  .mhx-promo{font-size:.84rem;letter-spacing:.06em}
}
@media (max-width:400px){
  body.mhx-on .lang-toggle a{padding:.46rem .38rem!important}
  body.mhx-on .loc-toggle a{padding:.46rem .38rem!important}
  body.mhx-on .loc-toggle{margin-left:.4rem}
  body.mhx-on .hdr-in{gap:.18rem;padding:.5rem .4rem}
  body.mhx-on .hdr{padding:.45rem .35rem .3rem}
  body.mhx-on .hamburger{width:38px;margin-left:.1rem!important}
}
@media (max-width:360px){
  body.mhx-on .brand-plate .logo-img{height:37px!important}
  body.mhx-on .lang-toggle,body.mhx-on .loc-toggle{font-size:.72rem!important}
  body.mhx-on .lang-toggle a{padding:.4rem .38rem!important}
  body.mhx-on .loc-toggle a{padding:.4rem .38rem!important}
  body.mhx-on .loc-toggle{margin-left:.45rem}
  body.mhx-on .hamburger{width:34px;padding:.25rem;margin-left:.1rem!important}
  body.mhx-on .hamburger span{width:22px}
  body.mhx-on .hdr-in{padding:.42rem .4rem;gap:.2rem}
  body.mhx-on .hdr{padding:.45rem .4rem .3rem}
}
@media (max-width:330px){
  body.mhx-on .brand-plate .logo-img{height:32px!important}
  body.mhx-on .lang-toggle,body.mhx-on .loc-toggle{font-size:.66rem!important}
  body.mhx-on .lang-toggle a{padding:.36rem .34rem!important}
  body.mhx-on .loc-toggle a{padding:.36rem .34rem!important}
  body.mhx-on .loc-toggle{margin-left:.35rem}
}

/* ═══════════ v133 — DESKTOP header mirrors the approved mobile design (body.mhx-on) ═══════════
   Row 1: white card — logo · menu · EN|ES · MN|BX (Become a Barber removed)
   Row 2: blue band promo (single line) · Row 3: 3 phone pills · Row 4: star seats strip */
@media (min-width:769px){
  body.mhx-on .topbar{display:none!important}
  body.mhx-on .site-seats{display:none!important}
  body.mhx-on .header-cta{display:none!important}
  body.mhx-on .hdr{background:var(--blue,#1b2fd9);border-bottom:0;padding:.65rem .9rem .45rem;backdrop-filter:none;-webkit-backdrop-filter:none}
  body.mhx-on .hdr-in{width:min(1400px,100%);margin:0 auto;background:#fff;border:2px solid var(--blue-dark,#1322a8);border-radius:18px;padding:.55rem 1.1rem;gap:.9rem;box-shadow:0 8px 22px rgba(0,0,0,.24);display:flex;align-items:center}
  body.mhx-on .brand-plate{background:transparent;box-shadow:none;border:0;border-radius:0;padding:.1rem 0}
  body.mhx-on .brand-plate .logo-img{height:52px!important}
  body.mhx-on .mainnav{background:transparent!important}
  body.mhx-on .mainnav a{color:var(--ink,#10131a)}
  body.mhx-on .mainnav a:hover{color:var(--blue,#1b2fd9)}
  body.mhx-on .hdr-in > .lang-toggle,body.mhx-on .lang-toggle{margin-left:auto;font-size:.88rem!important}
  body.mhx-on .hdr-in > .lang-toggle a,body.mhx-on .lang-toggle a{padding:.52rem .7rem!important}
  body.mhx-on .loc-toggle{display:inline-flex;margin-left:.9rem;font-size:.88rem!important;order:4}
  body.mhx-on .loc-toggle a{padding:.52rem .7rem!important}
  body.mhx-on .hdr-right{order:5}
  body.mhx-on .mhx{display:block;background:var(--blue,#1b2fd9);padding:1.15rem 1.2rem 0;color:#fff}
  body.mhx-on .mhx-seats{position:relative;z-index:2}
  body.mhx-on .mhx-promo{text-align:center;font-weight:800;font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:.12em;text-transform:uppercase;line-height:1.4;padding:.2rem .5rem 1.15rem;white-space:nowrap;text-shadow:0 2px 8px rgba(0,0,0,.25)}
  body.mhx-on .mhx-promo b{color:#ffd35c;font-weight:900}
  body.mhx-on .mhx-phones{display:grid;grid-template-columns:repeat(3,minmax(230px,330px));justify-content:center;gap:clamp(16px,2.4vw,30px);padding-bottom:1.35rem}
  body.mhx-on .mhx-phone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:70px;padding:.7rem .8rem;border:2px solid rgba(255,255,255,.85);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(0,0,0,.26));box-shadow:0 4px 14px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.2);color:#fff;font-weight:800;white-space:nowrap;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
  body.mhx-on .mhx-phone:hover{transform:translateY(-3px);background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(0,0,0,.2));box-shadow:0 10px 24px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.2);color:#fff}
  body.mhx-on .mhx-num{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.2;font-variant-numeric:tabular-nums}
  body.mhx-on .mhx-lab{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:900;letter-spacing:.18em;color:#ffd35c;line-height:1;text-transform:uppercase}
  body.mhx-on .mhx-lab svg{width:14px;height:14px}
  body.mhx-on .mhx-seats{display:flex;align-items:center;justify-content:center;gap:.8rem;background:var(--bg,#faf8f2);margin:0 -1rem;padding:.95rem 1rem;text-align:left}
  body.mhx-on .mhx-star{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#10131a;color:#ffd35c;border:2px solid #8a6500;flex-shrink:0}
  body.mhx-on .mhx-seats-t{display:flex;flex-direction:column;line-height:1.25}
  body.mhx-on .mhx-seats-t b{font-weight:900;letter-spacing:.06em;color:#10131a;text-transform:uppercase;font-size:1.25rem}
  body.mhx-on .mhx-seats-t i{font-style:normal;font-weight:800;letter-spacing:.05em;color:#8a6500;text-transform:uppercase;font-size:1rem}
}
@media (min-width:1200px){
  body.mhx-on .brand-plate .logo-img{height:60px!important}
}


/* ═══════════ v136 — HERO REBUILT FROM SCRATCH (reference flyer, blue palette) ═══════════
   .hx — clinic photo full-bleed; left: 500 HOUR / BARBER OPERATOR / Start Today.,
   copy, 6 chips (2×3), Next Starting Date bar with countdown; right: compact contact box. */
.hx{position:relative;background:#0a1020!important;color:#fff;overflow:hidden}
.hx-bg{position:absolute;top:0;left:0;right:0;height:66.2vw;background:url('/assets/img/hero-barber-clinic-2.jpg') top center/cover no-repeat}
.hx-grad{position:absolute;top:0;left:0;right:0;height:66.4vw;background:radial-gradient(115% 95% at 6% 100%,rgba(5,8,17,.96) 0%,rgba(5,8,17,.68) 40%,rgba(5,8,17,0) 70%),linear-gradient(180deg,rgba(5,8,17,.12) 0%,rgba(5,8,17,.06) 40%,rgba(5,8,17,.5) 66%,rgba(5,8,17,.94) 88%,#0a1020 100%)}
.hx-in{position:relative;width:min(1400px,94%);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(330px,368px);gap:2.4rem;padding:49.6vw 0 2.8rem;align-items:start}
.hx-h1{margin:0;line-height:1;text-transform:uppercase;font-weight:800;letter-spacing:-.01em}
.hx-l1{display:block;font-size:clamp(2.5rem,4.6vw,4.4rem);color:#fff;text-shadow:0 3px 24px rgba(0,0,0,.9),0 1px 4px rgba(0,0,0,.6)}
.hx-l2{display:block;font-size:clamp(2.5rem,4.6vw,4.4rem);color:#4d78ff;text-shadow:0 3px 24px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.55)}
.hx-script{display:block;font-family:'Caveat',cursive;text-transform:none;font-weight:700;font-size:clamp(2.3rem,3.6vw,3.5rem);line-height:1.05;margin:.35rem 0 0;color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.6)}
.hx-script::after{content:"";display:block;width:min(240px,58%);height:5px;margin-top:.15rem;border-radius:99px;background:#4d78ff}
.hx-sub{margin:1.15rem 0 1.35rem;max-width:33rem;font-size:1.02rem;line-height:1.55;color:#fff;font-weight:500;text-shadow:0 2px 16px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.6)}
.hx-sub b{color:#7ba0ff}
.hx-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;max-width:46rem}
.hx-chip{display:flex;gap:.6rem;align-items:flex-start;background:rgba(9,13,28,.78);border:1px solid rgba(130,150,255,.3);border-radius:12px;padding:.75rem .8rem;font-size:.82rem;line-height:1.35;font-weight:600;color:#f2f4fa;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hx-chip svg{flex-shrink:0;color:#9db4ff;margin-top:.1rem}
.hx-chip--fin b{display:block;font-size:.76rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;line-height:1.3}
.hx-chip--fin i{display:block;font-style:normal;font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-top:.25rem;color:#c9d3ee}
.hx-next{display:grid;grid-template-columns:1fr auto;column-gap:1.4rem;align-items:center;margin-top:.9rem;max-width:46rem;background:rgba(9,13,28,.78);border:1px solid rgba(130,150,255,.3);border-radius:14px;padding:1rem 1.15rem;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hx-next-label{display:block;font-size:1.02rem;font-weight:600;color:#fff}
.hx-next-date{display:block;margin-top:.1rem;font-size:clamp(1.25rem,1.9vw,1.65rem);font-weight:800;color:#4d78ff}
.hx-next-sub{display:block;margin-top:.3rem;font-size:.8rem;color:#ccd4e8}
.hx-cells{display:grid;grid-template-columns:repeat(4,minmax(68px,84px));gap:.55rem}
.hx-cell{border:1.5px solid rgba(255,255,255,.5);border-radius:12px;background:rgba(6,10,24,.55);text-align:center;padding:.65rem .25rem .5rem}
.hx-cell b{display:block;font-size:1.5rem;font-weight:800;line-height:1;color:#fff}
.hx-cell span{display:block;margin-top:.32rem;font-size:.6rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#c8d0e4}
/* compact contact box (desktop right column) */
@media (min-width:769px){
  .hx-in .formcard{padding:1.1rem 1.15rem 1.2rem}
  .hx-in .formcard-head{margin-bottom:.65rem;gap:.6rem}
  .hx-in .formcard-ico{transform:scale(.85)}
  .hx-in .formcard-title{font-size:1.1rem}
  .hx-in .formcard-sub{font-size:.78rem}
  .hx-in .field{margin-bottom:.5rem}
  .hx-in .field label{font-size:.7rem;margin-bottom:.15rem}
  .hx-in .field input,.hx-in .field select{padding:.48rem .65rem;font-size:.84rem}
  .hx-in .field.has-ico input{padding-left:2.1rem}
  .hx-in .field.has-ico svg{left:.7rem;bottom:.62rem}
  .hx-in .field textarea{padding:.48rem .65rem;font-size:.84rem;min-height:52px}
  .hx-in .form-consent-block .form-consent-row{font-size:.66rem;line-height:1.35;gap:.5rem}
  .hx-in .form-consent{font-size:.6rem;margin-top:.5rem}
  .hx-in .btn-submit{padding:.62rem 1rem;font-size:.95rem}
}
/* MOBILE: full-width photo on top → headline → copy → chips → countdown → contact box */
@media (max-width:768px){
  .hx-bg{height:66.2vw;background:url('/assets/img/hero-barber-clinic-2.jpg') top center/cover no-repeat;background-color:#0a1020}
  .hx-grad{height:66.4vw;background:radial-gradient(130% 90% at 15% 100%,rgba(5,8,17,.94) 0%,rgba(5,8,17,.6) 45%,rgba(5,8,17,0) 75%),linear-gradient(180deg,rgba(6,9,18,.05) 0%,rgba(6,9,18,.02) 34%,rgba(6,9,18,.55) 62%,rgba(6,9,18,.94) 86%,#0a1020 100%)}
  .hx-in{display:flex;flex-direction:column;gap:0;padding:49.6vw 0 2.2rem}
  .hx-l1,.hx-l2{font-size:clamp(2.1rem,10vw,2.7rem)}
  .hx-script{font-size:clamp(2rem,9vw,2.5rem)}
  .hx-sub{font-size:.98rem;max-width:none}
  .hx-chips{grid-template-columns:1fr;gap:.6rem;max-width:none}
  .hx-next{grid-template-columns:1fr;row-gap:.9rem;max-width:none;margin-top:1rem}
  .hx-cells{grid-template-columns:repeat(4,1fr)}
  .hx-in .formcard{margin-top:1.6rem}
}

/* ═══════════ v139 — tighter vertical rhythm on home pages (client: reduce big gaps) ═══════════ */
body.mhx-on .hx{padding:0!important}
body.mhx-on .hx-in{padding-bottom:1.4rem}
body.mhx-on .abi-reel{margin:1rem auto;padding:0!important}
body.mhx-on .sec{padding-block:clamp(1.8rem,3.4vw,3rem)!important}
body.mhx-on .cta-band{padding-block:clamp(2rem,3.6vw,3.2rem)!important}
@media (max-width:768px){
  body.mhx-on .hx-in{padding-bottom:1.1rem}
  body.mhx-on .abi-reel{margin:.85rem auto}
}

/* ═══════════ v140 — close remaining seams (Life at ABI, Tuition, duo/zero sections…) ═══════════ */
body.mhx-on .duo-sec{padding-block:clamp(1.5rem,3vw,3rem)!important}
body.mhx-on .stats{padding-block:1.4rem!important}
@media (max-width:768px){
  body.mhx-on .sec{padding-block:1.3rem!important}
  body.mhx-on .duo-sec{padding-block:1.3rem!important}
  body.mhx-on .abi-reel__frame{padding:1rem;gap:1rem}
  body.mhx-on .abi-reel{margin:.6rem auto}
  body.mhx-on .hx-in{padding-bottom:.8rem}
  body.mhx-on .ftr{padding-top:1.8rem}
}

/* ═══════════ v141 — ROW 1: flat full-width bar (no rounded card, no border), enlarged, one line always ═══════════ */
@media (max-width:768px){
  body.mhx-on .hdr{background:#fff;padding:0;border-bottom:0}
  body.mhx-on .hdr-in{background:#fff;border:0!important;border-radius:0!important;box-shadow:0 3px 12px rgba(0,0,0,.14);padding:.6rem .7rem;width:100%;flex-wrap:nowrap}
  body.mhx-on .brand-plate .logo-img{height:54px!important}
  body.mhx-on .nav-drawer{border-radius:0}
}
@media (max-width:430px){
  body.mhx-on .brand-plate .logo-img{height:44px!important}
  body.mhx-on .hdr-in{padding:.55rem .55rem}
}
@media (max-width:400px){
  body.mhx-on .hdr{padding:0}
  body.mhx-on .hdr-in{padding:.5rem .45rem;gap:.18rem}
}
@media (max-width:360px){
  body.mhx-on .brand-plate .logo-img{height:39px!important}
  body.mhx-on .hdr-in{padding:.45rem .4rem}
}
@media (max-width:330px){
  body.mhx-on .brand-plate .logo-img{height:33px!important}
}
@media (min-width:769px){
  body.mhx-on .hdr{background:#fff;padding:0}
  body.mhx-on .hdr-in{width:100%;max-width:none;margin:0;background:#fff;border:0!important;border-radius:0!important;box-shadow:0 4px 16px rgba(0,0,0,.1);padding:.75rem 1.4rem;flex-wrap:nowrap}
  body.mhx-on .brand-plate .logo-img{height:58px!important}
  body.mhx-on .mainnav,body.mhx-on .mainnav a{white-space:nowrap}
}
@media (min-width:1200px){
  body.mhx-on .brand-plate .logo-img{height:64px!important}
}
@media (min-width:1200px) and (max-width:1459px){
  body.mhx-on .mainnav{gap:.8rem!important}
  body.mhx-on .mainnav a{font-size:.85rem}
}

/* ═══════════ v145 — /bronx GOLDEN THEME (body.bx-gold) — blue → gold everywhere ═══════════ */
body.bx-gold{--blue:#c9971f;--blue-dark:#9c7414;--blue-light:#fbf3dd}
body.bx-gold .hx{background:#0e0b05!important}
body.bx-gold .hx-grad{background:radial-gradient(115% 95% at 6% 100%,rgba(14,11,4,.96) 0%,rgba(14,11,4,.68) 40%,rgba(14,11,4,0) 70%),linear-gradient(180deg,rgba(14,11,4,.12) 0%,rgba(14,11,4,.06) 40%,rgba(14,11,4,.5) 66%,rgba(14,11,4,.94) 88%,#0e0b05 100%)}
body.bx-gold .hx-l2,body.bx-gold .hx-next-date{color:#e3b34e}
body.bx-gold .hx-script::after{background:#e3b34e}
body.bx-gold .hx-sub b{color:#ecc25f}
body.bx-gold .hx-chip,body.bx-gold .hx-next{background:rgba(22,17,6,.78);border-color:rgba(224,187,98,.38)}
body.bx-gold .hx-chip svg{color:#e0bb62}
body.bx-gold .hx-chip--fin i{color:#d9c9a1}
body.bx-gold .hx-cell{background:rgba(14,11,4,.55)}
body.bx-gold .mhx-promo b{color:#241a04}
body.bx-gold .cta-band{background:linear-gradient(120deg,#161003 0%,#40300b 100%)!important}
@media (max-width:768px){
  body.bx-gold .hx-bg{background-color:#0e0b05}
  body.bx-gold .hx-grad{background:radial-gradient(130% 90% at 15% 100%,rgba(14,11,4,.94) 0%,rgba(14,11,4,.6) 45%,rgba(14,11,4,0) 75%),linear-gradient(180deg,rgba(16,12,4,.05) 0%,rgba(16,12,4,.02) 34%,rgba(16,12,4,.55) 62%,rgba(16,12,4,.94) 86%,#0e0b05 100%)}
}
body.bx-gold .lang-toggle a.is-active,body.bx-gold .lang-toggle a:hover{background:var(--blue)!important;color:#fff}
body.bx-gold .lang-toggle{border-color:var(--blue)!important}
body.bx-gold .lang-toggle a{color:var(--blue)}
body.bx-gold .lang-toggle a.is-active{color:#fff}
body.bx-gold .hdr-in > .lang-toggle a+a,body.bx-gold .lang-toggle a+a{border-left-color:var(--blue)!important}
body.bx-gold .hdr-in > .lang-toggle a{color:var(--blue)!important}
body.bx-gold .hdr-in > .lang-toggle a.is-active{background:var(--blue)!important;color:#fff!important}

/* ═══════════ v148 — bx-gold: theme Zero-to-Pro section + hardcoded hover shadows ═══════════ */
body.bx-gold .zero-sec{background:linear-gradient(180deg,#fdf8ed 0%,#f5ecd5 100%)}
body.bx-gold .zero-sec .eyebrow{color:#b8860b}
body.bx-gold .zero-title,body.bx-gold .zero-h{color:#5c4a1e}
body.bx-gold .zero-step{background:linear-gradient(160deg,#fff 0%,#fdf5e1 100%);border-color:#e8d5a0}
body.bx-gold .zero-step:hover{box-shadow:0 24px 50px rgba(180,140,30,.22);border-color:#c9971f}
body.bx-gold .zero-num{background:linear-gradient(150deg,#e8c84a,#c9971f);box-shadow:0 10px 22px rgba(156,116,20,.34)}
body.bx-gold .zero-step p{color:#5c4a1e}
body.bx-gold .btn:hover{box-shadow:0 12px 28px rgba(180,140,30,.35)}
body.bx-gold .phone-pill:hover{box-shadow:0 6px 18px rgba(180,140,30,.3)}

/* ═══════════ v147 — GHL form: force visible (don't depend on iframe-resizer handshake).
   form_embed.js parks the iframe at -9999px until a postMessage handshake; when that
   handshake is slow/blocked the form never appears. Our !important overrides its inline styles. */
.ghl-form-wrap{min-height:940px}
.ghl-form-wrap .ep-iFrameContainer,.ghl-form-wrap .ep-wrapper{height:auto!important;min-height:940px}
.ghl-form-wrap iframe{position:static!important;left:0!important;top:0!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;display:block!important;width:100%!important;min-height:940px}

/* ═══════════ v148 — chat widget: proper placement, no overlap ═══════════ */
chat-widget{position:fixed!important;bottom:20px!important;right:20px!important;z-index:9999!important}
@media(max-width:768px){chat-widget{bottom:140px!important;right:12px!important}}