/* =====================================================================
   Gagan Rakhra - OPTION B  ("Glass")
   Its own stylesheet - shares nothing with Option A.
   Apple-style: light, airy, big tight type, frosted-glass surfaces over
   soft colour "aurora" blobs, pill buttons, running banners.
   Built to capture leads fast: a quick call-back card sits in the hero.
   ===================================================================== */

:root{
  --bg:#F5F5F7; --surface:#FFFFFF; --ink:#1D1D1F; --ink-2:#424245; --mute:#6E6E73; --hair:rgba(0,0,0,.08);
  --blue:#0071E3; --blue-hover:#0077ED; --blue-ink:#0066CC;
  --navy:#0B2545; --night:#05070D;
  --a1:#2E6BFF; --a2:#7A5CFF; --a3:#00C2D1; --a4:#F5B841;
  --wa:#25D366; --wa-dark:#1EBE5A;
  --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.78); --glass-line:rgba(255,255,255,.7);
  --glass-dark:rgba(255,255,255,.08); --glass-dark-line:rgba(255,255,255,.16);
  --r-sm:14px; --r:22px; --r-lg:30px;
  --shadow:0 2px 6px rgba(0,0,0,.04),0 18px 48px -18px rgba(16,24,40,.18);
  --shadow-lg:0 30px 80px -30px rgba(16,24,40,.35);
  --nav-h:52px; --tick-h:34px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--tick-h) + 12px);-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.011em;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;padding-bottom:86px;overflow-x:hidden;}
@media(min-width:1024px){body{padding-bottom:0;}}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
input,select,textarea{font:inherit;letter-spacing:inherit;}
h1,h2,h3,h4,p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
[hidden]{display:none!important;}

.i{width:1.25rem;height:1.25rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.i-sm{width:1rem;height:1rem;} .i-fill{fill:currentColor;stroke:none;}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px;}
.wrap-narrow{max-width:860px;}
@media(min-width:768px){.wrap{padding:0 32px;}}
.sec{position:relative;padding:88px 0;}
@media(min-width:1024px){.sec{padding:120px 0;}}
.sec-white{background:var(--surface);}
.sec-dark{background:var(--night);color:#F5F5F7;}
.center{text-align:center;}

/* ---------- Type (Apple-ish: big, tight, gradient accents) ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--blue-ink);margin-bottom:14px;}
.sec-dark .eyebrow{color:#2997FF;}
.h-xl{font-size:clamp(44px,7.2vw,88px);line-height:1.02;letter-spacing:-.045em;font-weight:700;}
.h-lg{font-size:clamp(34px,5vw,64px);line-height:1.05;letter-spacing:-.035em;font-weight:700;}
.h-md{font-size:clamp(26px,3.2vw,40px);line-height:1.1;letter-spacing:-.025em;font-weight:700;}
.h-sm{font-size:21px;line-height:1.2;letter-spacing:-.015em;font-weight:600;}
.lead{font-size:clamp(19px,1.8vw,24px);line-height:1.38;letter-spacing:-.015em;color:var(--ink-2);font-weight:500;}
.sec-dark .lead{color:#A1A1A6;}
.body{color:var(--ink-2);}
.sec-dark .body{color:#A1A1A6;}
.mute{color:var(--mute);}
.small{font-size:13px;line-height:1.5;color:var(--mute);}
.sec-dark .small{color:#86868B;}
.grad{background:linear-gradient(90deg,var(--a1),var(--a2) 50%,var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent;}
.grad-warm{background:linear-gradient(90deg,#2997FF,#A78BFA 55%,var(--a4));-webkit-background-clip:text;background-clip:text;color:transparent;}
.sec-head{max-width:760px;margin:0 auto 56px;text-align:center;}
.sec-head .lead{margin-top:18px;}

/* ---------- Buttons (pills) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:980px;
  font-size:17px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.btn:active{transform:scale(.97);}
.btn-blue{background:var(--blue);color:#fff;}
.btn-blue:hover{background:var(--blue-hover);}
.btn-line{border:1px solid var(--blue);color:var(--blue-ink);}
.btn-line:hover{background:var(--blue);color:#fff;}
.btn-glass{background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:var(--ink);}
.btn-glass:hover{background:var(--glass-strong);}
.btn-wa{background:var(--wa);color:#fff;}
.btn-wa:hover{background:var(--wa-dark);}
/* Call + Email: colourful pills in the same style as WhatsApp (solid colour, white text + icon) */
.btn-call{background:linear-gradient(135deg,#2E6BFF 0%,#7A5CFF 100%);color:#fff;box-shadow:0 6px 18px -8px rgba(76,92,255,.6);}
.btn-call:hover{background:linear-gradient(135deg,#1F5AF0 0%,#6847F5 100%);}
.btn-mail{background:linear-gradient(135deg,#FF8A3D 0%,#FF3D7F 100%);color:#fff;box-shadow:0 6px 18px -8px rgba(255,80,110,.6);}
.btn-mail:hover{background:linear-gradient(135deg,#F57A2C 0%,#F02D6E 100%);}
.btn-wa{box-shadow:0 6px 18px -8px rgba(37,211,102,.6);}
.btn-white{background:#fff;color:var(--ink);}
.btn-white:hover{background:#E8E8ED;}
.btn-sm{min-height:34px;padding:6px 16px;font-size:14px;}
.btn-block{width:100%;}
.link{color:var(--blue-ink);display:inline-flex;align-items:center;gap:4px;font-weight:500;}
.link:hover{text-decoration:underline;}
.sec-dark .link{color:#2997FF;}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.row.center{justify-content:center;}

/* ---------- Glass ---------- */
.glass{background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  border-radius:var(--r-lg);box-shadow:var(--shadow);}
.glass-dark{background:var(--glass-dark);border:1px solid var(--glass-dark-line);-webkit-backdrop-filter:saturate(160%) blur(24px);backdrop-filter:saturate(160%) blur(24px);border-radius:var(--r-lg);}

/* Aurora: soft colour blobs that sit behind glass */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.aurora span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 22s ease-in-out infinite alternate;}
.aurora .b1{width:520px;height:520px;background:var(--a1);top:-160px;left:-120px;opacity:.35;}
.aurora .b2{width:460px;height:460px;background:var(--a2);top:40px;right:-140px;opacity:.3;animation-delay:-6s;}
.aurora .b3{width:420px;height:420px;background:var(--a3);bottom:-180px;left:30%;opacity:.28;animation-delay:-12s;}
.aurora .b4{width:260px;height:260px;background:var(--a4);bottom:10%;right:12%;opacity:.25;animation-delay:-3s;}
.sec-dark .aurora span{opacity:.32;}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(40px,30px,0) scale(1.12)}}
.z1{position:relative;z-index:1;}

/* ---------- Nav (frosted) + ticker ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;}
.nav-bar{height:var(--nav-h);background:rgba(251,251,253,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--hair);}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;min-width:0;}
.brand img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;}
.brand b{font-size:17px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;}
.brand small{display:none;font-size:12px;color:var(--mute);font-weight:500;white-space:nowrap;}
@media(min-width:420px){.brand small{display:inline;margin-left:6px;}}
.nav-links{display:none;}
.nav-cta{display:flex;align-items:center;gap:8px;flex:none;}
.nav-cta .hide-m{display:none;}
.wa-mini{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--wa);color:#fff;}
.wa-mini .i{width:18px;height:18px;}
@media(min-width:1024px){
  .nav-links{display:flex;gap:28px;}
  .nav-links a{font-size:13px;color:rgba(0,0,0,.8);transition:color .2s ease;}
  .nav-links a:hover,.nav-links a.active{color:var(--blue-ink);}
  .nav-cta .hide-m{display:inline-flex;}
  .wa-mini{display:none;}
}
.ticker{height:var(--tick-h);display:flex;align-items:center;background:rgba(245,245,247,.6);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair);font-size:12.5px;font-weight:500;color:var(--ink-2);}
.ticker .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none;}
.ticker b{font-weight:600;color:var(--ink);}

/* ---------- Marquee (running banners) ---------- */
.marquee{position:relative;overflow:hidden;white-space:nowrap;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.marquee-track{display:inline-flex;width:max-content;animation:marq var(--speed,45s) linear infinite;}
.marquee-track.rev{animation-direction:reverse;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-group{display:inline-flex;align-items:center;flex:none;}
.m-item{display:inline-flex;align-items:center;gap:10px;padding:0 18px;}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Pill banner of services */
.pills-band{position:relative;padding:28px 0;background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.pills-band .m-item{padding:0 6px;}
.chip{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:980px;background:var(--bg);border:1px solid var(--hair);font-size:16px;font-weight:600;color:var(--ink);}
.chip .ic{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2));}
.chip .ic .i{width:16px;height:16px;}
.chip.alt .ic{background:linear-gradient(135deg,var(--a3),var(--a1));}

/* Big dark statement banner */
.big-band{display:block;background:var(--night);color:#F5F5F7;padding:30px 0;font-size:clamp(28px,4.4vw,56px);font-weight:700;letter-spacing:-.035em;}
.big-band .m-item{gap:22px;padding:0 22px;}
.big-band .sep{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a3));flex:none;}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + var(--tick-h) + 36px) 0 72px;background:linear-gradient(180deg,#FBFBFD 0%,var(--bg) 100%);}
@media(min-width:1024px){.hero{padding:calc(var(--nav-h) + var(--tick-h) + 64px) 0 104px;}}
.hero-grid{position:relative;z-index:1;display:grid;gap:40px;align-items:center;}
@media(min-width:1024px){.hero-grid{grid-template-columns:1.08fr .92fr;gap:56px;}}
.status{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:980px;font-size:13px;font-weight:600;color:var(--ink-2);
  background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 1px 2px rgba(0,0,0,.04);}
.status-dot{width:8px;height:8px;border-radius:50%;background:#A1A1A6;flex:none;}
.is-open .status-dot{background:#30D158;animation:pulse 2s ease-out infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(48,209,88,.55)}70%{box-shadow:0 0 0 8px rgba(48,209,88,0)}100%{box-shadow:0 0 0 0 rgba(48,209,88,0)}}
.hero h1{margin:22px 0 0;}
.hero .who{margin-top:22px;font-size:clamp(19px,1.8vw,23px);line-height:1.4;color:var(--ink-2);font-weight:500;max-width:34em;}
.hero .who b{color:var(--ink);font-weight:600;}
.hero .row{margin-top:30px;}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;font-size:14px;color:var(--mute);}
.hero-meta span{display:inline-flex;align-items:center;gap:6px;}
.hero-meta .i{width:16px;height:16px;color:var(--blue-ink);}

/* Portrait with floating glass badges */
.portrait{position:relative;max-width:460px;margin:0 auto;width:100%;}
.portrait-frame{position:relative;border-radius:36px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/4.6;background:#5A6068;}
.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;}
.float{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:18px;font-size:13px;font-weight:600;line-height:1.25;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 12px 30px -12px rgba(16,24,40,.35);animation:bob 6s ease-in-out infinite;}
.float small{display:block;font-weight:500;color:var(--mute);font-size:11.5px;}
.float .ic{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2));flex:none;}
.float .ic .i{width:17px;height:17px;}
.float-1{left:-14px;top:12%;}
.float-2{right:-14px;bottom:14%;animation-delay:-3s;}
.float-2 .ic{background:linear-gradient(135deg,var(--a3),var(--a1));}
@media(max-width:520px){.float-1{left:8px;}.float-2{right:8px;}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- Quick lead card (in the hero) ---------- */
.quick{padding:24px;margin-top:-56px;position:relative;z-index:2;max-width:460px;margin-left:auto;margin-right:auto;}
@media(min-width:1024px){.quick{margin-top:-72px;}}
.quick h2{font-size:22px;font-weight:700;letter-spacing:-.02em;}
.quick .sub{font-size:14px;color:var(--mute);margin-top:4px;}
.q-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 12px;}
.q-chips label{position:relative;}
.q-chips input{position:absolute;opacity:0;pointer-events:none;}
.q-chips span{display:inline-block;padding:8px 14px;border-radius:980px;font-size:14px;font-weight:500;background:rgba(255,255,255,.75);border:1px solid var(--hair);cursor:pointer;transition:all .18s ease;}
.q-chips input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff;}
.q-chips input:focus-visible+span{outline:3px solid rgba(0,113,227,.5);outline-offset:2px;}
.q-row{display:grid;gap:10px;}
@media(min-width:480px){.q-row{grid-template-columns:1fr 1fr;}}
.inp{width:100%;height:48px;padding:0 16px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.9);color:var(--ink);font-size:16px;outline:none;transition:border-color .2s ease,box-shadow .2s ease;}
.inp:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.15);}
textarea.inp{height:auto;min-height:104px;padding:12px 16px;resize:vertical;}
select.inp{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E6E73' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--mute);margin:12px 0 14px;}
.consent input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--blue);}
.consent a{color:var(--blue-ink);text-decoration:underline;}
.quick .alt{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;font-size:14px;}
.quick .alt a{display:inline-flex;align-items:center;gap:6px;color:var(--blue-ink);font-weight:500;}
.quick .alt a.wa{color:#128C4A;}
.form-status{font-size:14px;font-weight:500;margin-top:10px;}
.form-status.ok{color:#1A7F37;} .form-status.err{color:#D70015;}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

/* ---------- Bento cards ---------- */
.bento{display:grid;gap:20px;}
@media(min-width:768px){.bento.c2{grid-template-columns:repeat(2,1fr);}.bento.c3{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1024px){.bento.c4{grid-template-columns:repeat(4,1fr);}}
@media(min-width:640px) and (max-width:1023px){.bento.c4{grid-template-columns:repeat(2,1fr);}}
.card{position:relative;background:var(--surface);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;}
.card:hover{transform:translateY(-4px) scale(1.005);box-shadow:var(--shadow-lg);}
.sec-white .card{background:var(--bg);box-shadow:none;}
.sec-white .card:hover{box-shadow:var(--shadow);}
.card .num{font-size:56px;font-weight:700;letter-spacing:-.05em;line-height:1;}
.card h3{margin-top:18px;}
.card p{margin-top:10px;color:var(--ink-2);}
.ic-round{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2));box-shadow:0 10px 20px -10px rgba(46,107,255,.7);}
.ic-round .i{width:26px;height:26px;}
.ic-round.t2{background:linear-gradient(135deg,var(--a3),var(--a1));box-shadow:0 10px 20px -10px rgba(0,194,209,.7);}
.ic-round.t3{background:linear-gradient(135deg,var(--a2),#C084FC);}
.ic-round.t4{background:linear-gradient(135deg,var(--a4),#FF8A3D);box-shadow:0 10px 20px -10px rgba(245,184,65,.8);}
.card .tag{display:inline-block;margin-top:14px;font-size:12px;font-weight:600;color:var(--blue-ink);background:rgba(0,113,227,.08);padding:4px 10px;border-radius:980px;}
.card.dark{background:var(--night);color:#F5F5F7;}
.card.dark p{color:#A1A1A6;}
.card.blue{background:linear-gradient(140deg,var(--a1),var(--a2));color:#fff;}
.card.blue p{color:rgba(255,255,255,.85);}
.pull{max-width:820px;margin:56px auto 0;text-align:center;font-size:clamp(24px,3vw,34px);line-height:1.25;letter-spacing:-.025em;font-weight:600;}

/* ---------- Meet ---------- */
.meet{display:grid;gap:48px;align-items:center;}
@media(min-width:1024px){.meet{grid-template-columns:.9fr 1.1fr;gap:72px;}}
.meet-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.meet-photo img{width:100%;}
.meet-photo .glass{position:absolute;left:16px;right:16px;bottom:16px;padding:14px 18px;border-radius:20px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;font-weight:600;}
.meet-photo .glass span{display:inline-flex;align-items:center;gap:6px;}
.meet-photo .glass .i{width:15px;height:15px;color:var(--blue-ink);}
.meet .body p+p{margin-top:16px;}

/* ---------- Dark glass grid ---------- */
.gcard{padding:30px;}
.gcard .ic-round{margin-bottom:18px;}
.gcard h3{color:#F5F5F7;}
.gcard p{margin-top:8px;color:#A1A1A6;font-size:16px;}

/* Bundle equation */
.eq{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:22px;}
.eq .t{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:20px;background:var(--glass-dark);border:1px solid var(--glass-dark-line);color:#fff;}
.eq .t .i{width:30px;height:30px;}
.eq .op{color:#86868B;font-size:26px;font-weight:300;}
.eq .save{font-size:44px;font-weight:700;letter-spacing:-.04em;}
.checks li{position:relative;padding-left:34px;color:var(--ink-2);}
.checks li+li{margin-top:16px;}
.checks li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a2));}
.checks li::after{content:"";position:absolute;left:7px;top:8px;width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);}
.checks b{color:var(--ink);font-weight:600;}
.split{display:grid;gap:48px;align-items:center;}
@media(min-width:1024px){.split{grid-template-columns:1.1fr .9fr;gap:72px;}}

/* ---------- Get started ---------- */
.big{display:block;padding:36px;border-radius:var(--r-lg);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;}
.big:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.big .k{font-size:14px;font-weight:600;color:var(--mute);}
.big .v{display:block;margin-top:8px;font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.035em;line-height:1.08;}
.big .link{margin-top:18px;}
.big.light{background:var(--surface);box-shadow:var(--shadow);}
.big.night{background:var(--night);color:#F5F5F7;}
.big.night .k{color:#86868B;}
.tiles{display:grid;gap:12px;margin-top:20px;}
@media(min-width:768px){.tiles{grid-template-columns:repeat(3,1fr);}}
.tile{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-radius:18px;background:var(--surface);font-size:15px;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:box-shadow .2s ease;}
.tile:hover{box-shadow:var(--shadow);}
.tile .i{color:var(--blue-ink);width:16px;height:16px;}
.phone-xl{display:inline-block;margin-top:28px;font-size:clamp(40px,6vw,72px);font-weight:700;letter-spacing:-.045em;}

/* ---------- Visit ---------- */
.visit{display:grid;gap:20px;}
@media(min-width:1024px){.visit{grid-template-columns:1.4fr 1fr;}}
.map{position:relative;min-height:380px;border-radius:var(--r-lg);overflow:hidden;background:#E8E8ED;display:flex;flex-direction:column;}
.map iframe{border:0;flex:1;width:100%;min-height:380px;}
.map-ph{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;text-align:center;position:relative;
  background:radial-gradient(circle at 50% 45%,rgba(0,113,227,.14),transparent 55%),repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 40px),repeating-linear-gradient(90deg,rgba(0,0,0,.035) 0 1px,transparent 1px 40px),#EEF0F4;}
.map-ph .pin{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--blue);box-shadow:0 0 0 12px rgba(0,113,227,.14),0 0 0 26px rgba(0,113,227,.06);}
.map-ph .pin .i{width:28px;height:28px;}
.map-ph address{font-style:normal;font-weight:600;font-size:19px;letter-spacing:-.015em;line-height:1.35;}
.hours{padding:30px;}
.hours table{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px;}
.hours td{padding:11px 0;border-bottom:1px solid var(--hair);}
.hours td:last-child{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.hours tr:last-child td{border-bottom:0;}
.hours tr.today td{font-weight:600;color:var(--blue-ink);}
.hours .closed{color:var(--mute)!important;}

/* ---------- FAQ (hairline accordion) ---------- */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--hair);}
.faq details{border-bottom:1px solid var(--hair);}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 0;font-size:clamp(18px,1.8vw,21px);font-weight:600;letter-spacing:-.015em;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .pm{position:relative;width:18px;height:18px;flex:none;}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--blue-ink);border-radius:2px;transition:transform .25s ease;}
.faq summary .pm::after{transform:rotate(90deg);}
.faq details[open] summary .pm::after{transform:rotate(0);}
.faq .ans{padding:0 0 24px;color:var(--ink-2);max-width:680px;}
.faq .ans a{color:var(--blue-ink);}
.faq .ans a:hover{text-decoration:underline;}

/* ---------- Contact ---------- */
.contact{display:grid;gap:20px;position:relative;z-index:1;}
@media(min-width:1024px){.contact{grid-template-columns:.85fr 1.15fr;}}
.c-side{padding:32px;}
.c-list{margin-top:24px;}
.c-list a,.c-list div{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.07);}
.c-list>:last-child{border-bottom:0;}
.c-list .ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:rgba(0,113,227,.1);color:var(--blue-ink);flex:none;}
.c-list .ic.wa{background:var(--wa);color:#fff;}
.c-list b{display:block;font-weight:600;font-size:16px;line-height:1.25;}
.c-list small{display:block;color:var(--mute);font-size:13px;}
.c-list a:hover b{color:var(--blue-ink);}
.langs{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.langs span{padding:6px 14px;border-radius:980px;background:rgba(255,255,255,.7);border:1px solid var(--hair);font-size:14px;font-weight:600;}
.c-form{padding:32px;}
.c-form .grid2{display:grid;gap:12px;}
@media(min-width:560px){.c-form .grid2{grid-template-columns:1fr 1fr;}}
.c-form .stack>*+*{margin-top:12px;}
.lbl{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px;}
.seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(118,118,128,.12);}
.seg label{flex:1;position:relative;}
.seg input{position:absolute;opacity:0;pointer-events:none;}
.seg span{display:block;text-align:center;padding:8px 6px;border-radius:9px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;}
.seg input:checked+span{background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);font-weight:600;}
.seg input:focus-visible+span{outline:3px solid rgba(0,113,227,.5);}
.counter{text-align:right;font-size:12px;color:var(--mute);margin-top:4px;}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:rgba(245,184,65,.14);color:#7A5300;font-size:13px;line-height:1.45;}
.note .i{width:16px;height:16px;margin-top:1px;}

/* ---------- Claims strip ---------- */
.claims{padding:64px 0;text-align:center;}

/* ---------- Footer (Apple-style fine print) ---------- */
.foot{background:var(--bg);border-top:1px solid var(--hair);padding:48px 0 120px;font-size:12px;line-height:1.6;color:var(--mute);}
@media(min-width:1024px){.foot{padding-bottom:40px;}}
.foot-top{display:grid;gap:28px;padding-bottom:28px;border-bottom:1px solid var(--hair);}
@media(min-width:768px){.foot-top{grid-template-columns:1.4fr 1fr 1fr;}}
.foot h4{font-size:12px;font-weight:600;color:var(--ink);margin:0 0 10px;}
.foot li+li{margin-top:6px;}
.foot a:hover,.foot button:hover{color:var(--ink);text-decoration:underline;}
.foot button{font-size:12px;color:var(--mute);}
.foot .name{font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--ink);}
.foot .legal{padding-top:20px;}
.foot .legal p+p{margin-top:8px;}
.pending{display:inline-block;padding:0 6px;border-radius:6px;background:rgba(245,184,65,.2);color:#7A5300;font-weight:600;}

/* ---------- Mobile tab bar (frosted) ---------- */
.tabbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:50;height:64px;border-radius:22px;
  display:flex;align-items:center;justify-content:space-around;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);box-shadow:0 12px 36px -10px rgba(16,24,40,.35);}
@media(min-width:1024px){.tabbar{display:none;}}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:20%;height:100%;color:var(--mute);font-size:10.5px;font-weight:600;}
.tab .i{width:22px;height:22px;transition:transform .2s ease;}
.tab.active{color:var(--blue-ink);}
.tab.active .i{transform:translateY(-1px);}
.tab-main{position:absolute;top:-18px;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--a1),var(--a2));box-shadow:0 10px 24px -8px rgba(46,107,255,.8);border:3px solid rgba(255,255,255,.9);}
.tab-main .i{width:24px;height:24px;}
.tab .main-lbl{margin-top:32px;color:var(--blue-ink);}

/* ---------- Back to top ---------- */
#toTop{position:fixed;left:16px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:60;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--glass-strong);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--ink);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s ease;}
#toTop.show{opacity:1;visibility:visible;transform:none;}
@media(min-width:1024px){#toTop{bottom:24px;}}

/* ---------- WhatsApp FAB + invite (same behaviour as Option A) ---------- */
.wa-fab{position:fixed;right:16px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:60;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--wa);color:#fff;box-shadow:0 12px 30px -8px rgba(0,0,0,.4);transition:transform .25s ease,background-color .2s ease;}
.wa-fab .i{width:28px;height:28px;}
.wa-fab:hover{background:var(--wa-dark);transform:scale(1.07);}
@media(min-width:1024px){.wa-fab{bottom:24px;right:24px;width:60px;height:60px;}}
.wa-fab::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;animation:waPulse 2.8s ease-out infinite;}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes waNudge{0%,100%{transform:scale(1) rotate(0)}15%{transform:scale(1.14) rotate(-8deg)}30%{transform:scale(1.06) rotate(6deg)}45%{transform:scale(1.12) rotate(-4deg)}60%{transform:scale(1.03) rotate(2deg)}}
.wa-fab.nudge{animation:waNudge 1.15s ease 2;}
.wa-bubble{position:fixed;right:16px;bottom:calc(160px + env(safe-area-inset-bottom,0px));z-index:61;width:min(280px,calc(100vw - 32px));border-radius:20px;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  box-shadow:0 24px 50px -16px rgba(0,0,0,.4);opacity:0;transform:translateY(12px) scale(.95);pointer-events:none;transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1);}
.wa-bubble.show{opacity:1;transform:none;pointer-events:auto;}
@media(min-width:1024px){.wa-bubble{bottom:98px;right:24px;}}
.wa-bubble a{display:flex;gap:12px;align-items:flex-start;padding:16px;}
.wa-bubble img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--wa);}
.wa-bubble b{display:block;font-size:15px;line-height:1.3;}
.wa-bubble small{display:block;font-size:13px;color:var(--mute);margin-top:3px;line-height:1.35;}
.wa-close{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:16px;}
.wa-close:hover{background:rgba(0,0,0,.06);color:var(--ink);}

/* ---------- Motion ---------- */
.js .rv{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);}
.js .rv.in{opacity:1;transform:none;}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* ---------- Accessibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid rgba(0,113,227,.6);outline-offset:3px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:16px;top:16px;z-index:200;background:#fff;color:var(--blue-ink);padding:10px 16px;border-radius:12px;box-shadow:var(--shadow);font-weight:600;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .rv{opacity:1;transform:none;transition:none;}
  .aurora span,.float,.wa-fab::after,.wa-fab.nudge,.is-open .status-dot{animation:none!important;}
  .marquee-track{animation:none;}
  .marquee{white-space:normal;-webkit-mask-image:none;mask-image:none;}
  .marquee-group[aria-hidden="true"]{display:none;}
  .marquee-group{flex-wrap:wrap;justify-content:center;row-gap:10px;}
  .card:hover,.big:hover{transform:none;}
}

/* ---------- Inner pages ---------- */
.page{padding:calc(var(--nav-h) + 72px) 0 96px;}
.prose{max-width:720px;margin:0 auto;color:var(--ink-2);}
.prose h2{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:40px 0 10px;}
.prose p+p,.prose ul{margin-top:12px;}
.prose ul{list-style:disc;padding-left:22px;}
.prose li+li{margin-top:6px;}
.prose a{color:var(--blue-ink);text-decoration:underline;}
.todo{background:rgba(245,184,65,.22);color:#7A5300;border-radius:6px;padding:0 6px;font-weight:600;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* =====================================================================
   PREMIUM / MULTI-PAGE ADDITIONS
   ===================================================================== */
/* Inner-page hero: same aurora + glass, quick card sits beside the copy */
.page-hero{padding-bottom:64px;}
.page-hero .quick{margin-top:0;}
@media(min-width:1024px){.page-hero{padding-bottom:96px;}.page-hero .hero-grid{grid-template-columns:1.1fr .9fr;}}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute);margin-bottom:18px;flex-wrap:wrap;}
.crumbs a{color:var(--blue-ink);}
.crumbs a:hover{text-decoration:underline;}
.crumbs [aria-current]{color:var(--ink-2);font-weight:500;}
a.card{display:block;color:inherit;}
.sm-list li+li{margin-top:10px;}

/* Tabs (Apple segmented control) */
.tabs-list{max-width:620px;margin:0 auto 24px;}
.tabs-list button{flex:1;padding:10px 8px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink-2);transition:all .2s ease;}
.tabs-list button[aria-selected="true"]{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);}
@media(max-width:520px){.tabs-list button{font-size:12.5px;padding:9px 4px;}}
.tab-panel{max-width:820px;margin:0 auto;}

/* Social row - live links and presentation placeholders */
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.soc{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:#fff;border:1px solid var(--hair);color:var(--ink);transition:transform .2s ease,background-color .2s ease,color .2s ease;}
.soc .i{width:18px;height:18px;}
a.soc:hover{transform:translateY(-2px);background:var(--ink);color:#fff;}
.soc.is-placeholder{border:1.5px dashed rgba(0,0,0,.25);background:transparent;color:var(--mute);cursor:help;}

/* Mega footer */
.mega{background:var(--surface);border-top:1px solid var(--hair);padding:56px 0 120px;font-size:14px;color:var(--ink-2);}
@media(min-width:1024px){.mega{padding-bottom:40px;}}
.mega-cta{display:flex;flex-direction:column;gap:20px;padding:28px 32px;border-radius:var(--r-lg);margin-bottom:48px;
  background:radial-gradient(circle at 0% 0%,rgba(46,107,255,.14),transparent 50%),radial-gradient(circle at 100% 100%,rgba(0,194,209,.14),transparent 50%),var(--bg);}
@media(min-width:900px){.mega-cta{flex-direction:row;align-items:center;justify-content:space-between;}}
.mega-grid{display:grid;gap:36px;grid-template-columns:1fr 1fr;padding-bottom:36px;border-bottom:1px solid var(--hair);}
.mega-brand{grid-column:1/-1;}
@media(min-width:1024px){.mega-grid{grid-template-columns:1.6fr 1fr 1fr 1.1fr 1.1fr;}.mega-brand{grid-column:auto;}}
.mega-h{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:12px;}
.mega ul li+li{margin-top:9px;}
.mega ul a{color:var(--ink-2);}
.mega ul a:hover{color:var(--blue-ink);text-decoration:underline;}
.mega address{font-style:normal;margin-top:10px;color:var(--mute);}
.mega-langs{display:flex;flex-wrap:wrap;gap:8px;padding:22px 0;border-bottom:1px solid var(--hair);}
.mega-langs span{padding:6px 14px;border-radius:980px;background:var(--bg);font-weight:600;font-size:13px;}
.mega .legal{padding-top:22px;font-size:12px;line-height:1.6;color:var(--mute);}
.mega .legal p+p{margin-top:8px;}
.legal-row{display:flex;flex-direction:column;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--hair);}
@media(min-width:900px){.legal-row{flex-direction:row;justify-content:space-between;align-items:center;}}
.legal-row nav{display:flex;flex-wrap:wrap;gap:6px 18px;}
.legal-row a:hover{color:var(--ink);text-decoration:underline;}

/* ---------- Polish ---------- */
@media(min-width:1024px){.hero .h-xl{font-size:clamp(52px,5vw,74px);}}
.ticker .m-item{display:inline-block;}
.ticker .dot{display:inline-block;margin-right:8px;vertical-align:middle;position:relative;top:-1px;}
.quick{background:rgba(255,255,255,.84);}
@media(min-width:1024px){.hero:not(.page-hero) .quick{margin-top:-48px;}}

/* =====================================================================
   VERSION D (FINAL) - B + C hybrid
   Option B's glass site with Version C's scroll film on the home page (HD),
   and no forms: every lead goes to Gagan's Allstate quote page.
   ===================================================================== */
:root{--film:#08204F;--film-2:#0B2D6B;--gold:#F5C46B;--cyan:#5FD4FF;}

/* ---------- Scroll film ---------- */
.story{position:relative;height:620vh;background:var(--film);color:#fff;}
@media(max-width:767px){.story{height:560vh;}}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,32,79,.55) 0%,rgba(8,32,79,0) 24%),linear-gradient(0deg,rgba(8,32,79,.94) 0%,rgba(8,32,79,.55) 26%,rgba(8,32,79,0) 52%);}
@media(min-width:768px){.shade{background:linear-gradient(180deg,rgba(8,32,79,.5) 0%,rgba(8,32,79,0) 20%),linear-gradient(0deg,rgba(8,32,79,.85) 0%,rgba(8,32,79,0) 46%),linear-gradient(90deg,rgba(8,32,79,.5) 0%,rgba(8,32,79,0) 45%);}}
.loader{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);font-size:12px;color:rgba(255,255,255,.6);letter-spacing:.08em;transition:opacity .4s ease;}
.loader.done{opacity:0;}
.chapters{position:absolute;inset:0;pointer-events:none;}
.chap{position:absolute;left:0;right:0;bottom:calc(9vh + 74px);padding:0 22px;opacity:0;will-change:opacity,transform;}
@media(min-width:768px){.chap{bottom:12vh;left:max(32px,calc((100vw - 1120px)/2 + 32px));right:auto;max-width:640px;padding:0;}}
.chap.is-live{pointer-events:auto;}
.story .eyebrow{color:var(--cyan);text-transform:uppercase;letter-spacing:.14em;font-size:13px;}
.story .eyebrow.gold{color:var(--gold);}
.story .h-xl,.story .h-lg{color:#fff;text-shadow:0 2px 30px rgba(4,16,46,.6);}
.story .lead{color:rgba(255,255,255,.86);margin-top:14px;max-width:34em;text-shadow:0 1px 16px rgba(4,16,46,.7);}
.story .fine{font-size:13px;color:rgba(255,255,255,.65);margin-top:10px;}
.story .row{margin-top:24px;}
.glow-text{background:linear-gradient(92deg,#fff 0%,var(--cyan) 55%,var(--gold) 110%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.chap-intro{text-align:center;}
.chap-intro .lead{margin-left:auto;margin-right:auto;}
.chap-intro .tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px;}
@media(min-width:768px){.chap-intro{text-align:left;bottom:16vh;}.chap-intro .lead{margin-left:0;}.chap-intro .tags{justify-content:flex-start;}.chap-intro .cue{align-items:flex-start;}}
.story .tag{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:980px;font-size:13px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
.story .tag .i{width:15px;height:15px;color:var(--cyan);}
.cue{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);}
.cue span{width:22px;height:36px;border-radius:12px;border:2px solid rgba(255,255,255,.55);position:relative;}
.cue span::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--cyan);animation:wheel 1.8s ease-in-out infinite;}
@keyframes wheel{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@media(max-width:767px){.cue{display:none;}}
.rail{position:absolute;right:22px;top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:14px;}
@media(min-width:1024px){.rail{display:flex;}}
.rail button{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:transparent;transition:color .3s ease;}
.rail button i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);transition:all .3s ease;}
.rail button.on{color:rgba(255,255,255,.85);}
.rail button.on i{background:var(--gold);box-shadow:0 0 12px var(--gold);transform:scale(1.4);}
.rail button:hover{color:#fff;}
.progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.1);}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--gold));}
.no-js .story{height:auto;}
.no-js .stage{position:relative;height:auto;min-height:100svh;background:url(../img/story-poster.webp) center/cover;}
.no-js .chap{position:relative;opacity:1;}
.btn-gold{background:linear-gradient(135deg,#FFD98A,var(--gold) 60%,#E9A93A);color:#1A1405;box-shadow:0 10px 30px -10px rgba(245,196,107,.8);}
.btn-gold:hover{filter:brightness(1.05);}
.btn-onfilm{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
.btn-onfilm:hover{background:rgba(255,255,255,.24);}
.btn-lg{min-height:56px;font-size:17px;font-weight:600;}

/* The header sits over the film; give the film's top edge room on phones. */
.story .stage{padding-top:0;}

/* ---------- After the film: one-tap quote ---------- */
.after-film{padding-top:72px;}
@media(min-width:1024px){.after-film{padding-top:100px;}}
.after-film .hero-grid{position:relative;z-index:1;}
.hero-meta .js-status{display:inline-flex;align-items:center;gap:6px;}

/* ---------- Quote card (replaces every form) ---------- */
.quick{margin-top:0!important;}
.q-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1A7F37;margin-bottom:8px;}
.q-eyebrow .i{width:14px;height:14px;}
.q-steps{list-style:none;margin:18px 0 18px;padding:0;display:grid;gap:10px;}
.q-steps li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink-2);}
.q-steps b{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;border-radius:50%;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2));}
.q-steps strong{color:var(--ink);}
.q-note{font-size:12px;line-height:1.45;color:var(--mute);margin-top:14px;text-align:center;}
.quote-panel{display:flex;flex-direction:column;justify-content:center;}
.q-types{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0;}
.q-types span{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:980px;background:rgba(255,255,255,.75);border:1px solid var(--hair);font-size:14px;font-weight:600;}
.q-types .i{width:16px;height:16px;color:var(--blue-ink);}

@media (prefers-reduced-motion:reduce){.cue span::after{animation:none;}}

/* ---------- Header fix (phones / small tablets) ----------
   The "Allstate Sales Agent" subtitle collided with the WhatsApp + Free quote
   buttons on phones (e.g. iPhone 16 Pro Max, 440 px). Below 1024 px it is hidden,
   the brand may shrink, and the name truncates with an ellipsis instead of overlapping. */
@media(max-width:1023px){
  .brand small{display:none!important;}
  .brand{flex:1 1 auto;overflow:hidden;}
  .brand span{min-width:0;overflow:hidden;}
  .brand b{display:block;overflow:hidden;text-overflow:ellipsis;}
  .nav-cta{flex:none;}
}
@media(max-width:360px){.nav-cta .btn-sm{padding:6px 12px;font-size:13px;}}
/* Small phones: keep the full name visible - tighter button, no external-link icon, slightly smaller name. */
@media(max-width:389px){
  .nav-in{gap:8px;}
  .brand{gap:8px;}
  .brand b{font-size:15.5px;}
  .nav-cta{gap:6px;}
  .nav-cta .btn-sm{padding:6px 12px;font-size:13.5px;}
  .nav-cta .btn-sm .i{display:none;}
  .wa-mini{width:32px;height:32px;}
}
@media(max-width:340px){.brand img{width:28px;height:28px;}.brand b{font-size:14.5px;}}

/* Film starts below the header now (story.js), so no dark wash over the top of the picture -
   only the bottom shade that keeps chapter text readable. */
.shade{background:linear-gradient(0deg,rgba(8,32,79,.94) 0%,rgba(8,32,79,.55) 26%,rgba(8,32,79,0) 50%)!important;}
@media(min-width:768px){.shade{background:linear-gradient(0deg,rgba(8,32,79,.85) 0%,rgba(8,32,79,0) 46%),linear-gradient(90deg,rgba(8,32,79,.5) 0%,rgba(8,32,79,0) 45%)!important;}}
/* "Always here for you" card (replaces the office-hours table) */
.avail .status{margin:0;}
.avail-actions{display:grid;gap:10px;margin-top:20px;}

/* Call pill - replaces the old open/closed status everywhere: green dot + phone number, tap to call */
.call-pill{display:inline-flex;align-items:center;gap:7px;cursor:pointer;text-decoration:none;transition:transform .15s ease,background-color .2s ease;}
.call-pill:hover{transform:translateY(-1px);}
.call-pill:active{transform:scale(.97);}
.call-pill .i{width:15px;height:15px;}
.story .call-pill{background:rgba(37,211,102,.18);border-color:rgba(37,211,102,.55);font-size:14px;padding:9px 16px;}
.story .call-pill .i{color:#fff;}
.hero-meta .call-pill{color:var(--blue-ink);font-weight:600;}
.status.call-pill{color:var(--ink);}
.status.call-pill:hover{background:#fff;}

/* Opening shot: bigger name (client request) */
.chap-intro .h-xl{font-size:clamp(54px,14vw,100px);line-height:.98;}
.chap-intro .lead{font-size:clamp(18px,4.6vw,24px);}

/* ---------- Final film chapter: centred reverse pyramid ---------- */
.chap-final{text-align:center;}
.chap-final .h-lg{margin-left:auto;margin-right:auto;}
.pyramid{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:26px;}
.pyramid .btn{justify-content:center;min-height:54px;font-size:17px;}
.pyramid .p1{width:min(100%,340px);}
.pyramid .p2{width:min(80%,272px);}
.pyramid .p3{width:min(60%,204px);}
@media(min-width:768px){
  .chap-final{left:0;right:0;max-width:none;}
  .chap-final .h-lg{max-width:760px;}
}

/* ---------- "One tap to your / free quote." - two whole lines, centred on phones ---------- */
.one-tap{font-size:clamp(30px,8.4vw,64px);}
.one-tap .nb{white-space:nowrap;}
@media(max-width:1023px){
  .after-film .hero-grid > div:first-child{text-align:center;}
  .after-film .hero-meta{justify-content:center;}
  .after-film .who{margin-left:auto;margin-right:auto;}
}

.mega-area{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--hair);font-size:13px;color:var(--mute);}
.mega-area strong{color:var(--ink-2);}
.mega-area .i{color:var(--blue-ink);}

/* ---------- Fancy animated buttons: My Profile / Email Me ----------
   Flowing colour gradient + a light sweep across the face. Calm, not flashy;
   both animations stop for visitors who ask for reduced motion. */
.fancy-row{display:grid;gap:14px;margin-top:22px;}
@media(min-width:640px){.fancy-row{grid-template-columns:1fr 1fr;}}
.btn-fancy{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:60px;padding:14px 22px;border-radius:18px;color:#fff;font-size:17px;font-weight:600;letter-spacing:-.01em;
  background:linear-gradient(120deg,#0071E3,#2E6BFF 30%,#7A5CFF 60%,#00C2D1 90%,#0071E3);background-size:300% 300%;
  box-shadow:0 16px 34px -16px rgba(46,107,255,.85);animation:fancyFlow 7s ease-in-out infinite;transition:transform .2s ease,box-shadow .2s ease;}
.btn-fancy.alt{background:linear-gradient(120deg,#00A3C4,#00C2D1 30%,#2E6BFF 60%,#7A5CFF 90%,#00A3C4);background-size:300% 300%;
  box-shadow:0 16px 34px -16px rgba(0,194,209,.85);animation-delay:-3.5s;}
.btn-fancy::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-20deg);animation:fancyShine 3.6s ease-in-out infinite;}
.btn-fancy.alt::after{animation-delay:1.8s;}
.btn-fancy:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px rgba(46,107,255,.95);}
.btn-fancy:active{transform:scale(.98);}
.btn-fancy .i{width:20px;height:20px;}
.btn-fancy .i-sm{width:16px;height:16px;opacity:.85;}
@keyframes fancyFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes fancyShine{0%{left:-60%}55%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){.btn-fancy,.btn-fancy::after{animation:none;}}

/* Phones (portrait): chapter text starts right under the film's bottom edge (set by story.js),
   so the picture ends at Gagan's jacket button and the text sits directly below it. */
.story.is-tall .chap:not(.chap-final){top:calc(var(--film-bottom, 60vh) + 12px);bottom:auto;}
.story.is-tall .chap-intro .eyebrow{margin-bottom:8px;}

/* Opening tagline under the call button: two lines, same size/style as the old eyebrow */
.story .tagline{display:flex;flex-direction:column;align-items:center;gap:4px;margin:18px 0 0;line-height:1.35;}
@media(min-width:768px){.story .tagline{align-items:flex-start;}}

/* Small phones: slightly tighter opening text so film + text + tab bar all fit */
@media(max-width:400px){.story.is-tall .chap-intro .lead{font-size:16.5px;margin-top:10px;}.story .tagline{margin-top:12px;}.story.is-tall .chap-intro .tags{margin-top:12px;}}

/* Opening text rises over the faded bottom of the film (to the jacket-button line) */
.story.is-tall .chap-intro{top:calc(var(--film-bottom, 60vh) - var(--film-overlap, 72px));}

/* ---------- Colourful tab bar ---------- */
.tab-av{width:24px;height:24px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #2E6BFF;}
.tab.t-auto .i{color:#00A3C4;}
.tab.t-prop .i{color:#F28C28;}
.tab.t-contact .i{color:#7A5CFF;}
.tab.t-auto,.tab.t-prop,.tab.t-contact,.tab.t-home{color:var(--ink-2);}
.tab-main{background:linear-gradient(135deg,#FFB547,#FF6B6B 45%,#7A5CFF);box-shadow:0 10px 24px -8px rgba(255,107,107,.75);}
.tab .main-lbl{background:linear-gradient(90deg,#FF6B6B,#7A5CFF);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;}

/* ---------- Picture tab bar (bigger, image icons) ---------- */
.tabbar.tabbar-pics{height:78px;border-radius:24px;}
.tabbar-pics .tab{gap:4px;font-size:11.5px;font-weight:700;color:var(--ink-2);}
.tab-pic{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#fff;
  box-shadow:0 0 0 2px #fff,0 4px 12px -4px rgba(16,24,40,.45);transition:transform .2s ease;}
.tab:active .tab-pic{transform:scale(.92);}
.tabbar-pics .tab.active .tab-pic{box-shadow:0 0 0 2px #fff,0 0 0 4px #2E6BFF,0 4px 12px -4px rgba(16,24,40,.45);}
.tabbar-pics .tab.active{color:#0066CC;}
/* Free Quote - the hero button: white disc with the Allstate hands, gradient ring, gentle pulse */
.tabbar-pics .tab-main{top:-26px;width:70px;height:70px;padding:0;border:0;
  background:conic-gradient(from 210deg,#FFB547,#FF6B6B,#7A5CFF,#2E6BFF,#00C2D1,#FFB547);
  box-shadow:0 12px 28px -8px rgba(46,107,255,.75);animation:quotePulse 2.6s ease-out infinite;}
.tabbar-pics .tab-main img{width:60px;height:60px;border-radius:50%;background:#fff;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);}
.tabbar-pics .main-lbl{margin-top:44px;font-size:12.5px;font-weight:800;letter-spacing:-.01em;
  background:linear-gradient(90deg,#FF6B6B,#7A5CFF 55%,#2E6BFF);-webkit-background-clip:text;background-clip:text;color:transparent;}
@keyframes quotePulse{0%{box-shadow:0 12px 28px -8px rgba(46,107,255,.75),0 0 0 0 rgba(122,92,255,.45)}70%{box-shadow:0 12px 28px -8px rgba(46,107,255,.75),0 0 0 14px rgba(122,92,255,0)}100%{box-shadow:0 12px 28px -8px rgba(46,107,255,.75),0 0 0 0 rgba(122,92,255,0)}}
@media (prefers-reduced-motion:reduce){.tabbar-pics .tab-main{animation:none;}}
/* illustrated tab icons (Auto / Property / Contact): white disc, a little bigger so the drawings read clearly */
.tab-pic.tab-ico{width:44px;height:44px;object-fit:contain;background:#fff;}
@media(max-width:360px){.tab-pic{width:36px;height:36px;}.tabbar-pics .tab{font-size:10.5px;}}
/* the bar is taller now - keep page content and floating buttons clear of it */
@media(max-width:1023px){body{padding-bottom:104px;}.wa-fab,#toTop{bottom:calc(106px + env(safe-area-inset-bottom,0px));}.wa-bubble{bottom:calc(174px + env(safe-area-inset-bottom,0px));}}

/* ---------- Background music toggle (bottom-left, above back-to-top) ---------- */
.music-btn{position:fixed;left:16px;bottom:calc(158px + env(safe-area-inset-bottom,0px));z-index:61;display:inline-flex;align-items:center;gap:7px;
  height:40px;padding:0 14px 0 12px;border-radius:980px;font-size:13px;font-weight:700;color:var(--ink);
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 10px 26px -12px rgba(16,24,40,.45);transition:transform .2s ease,background-color .2s ease;}
.music-btn:active{transform:scale(.95);}
.music-btn .i{width:18px;height:18px;}
.music-btn .i-on,.music-btn.is-on .i-off{display:none;}
.music-btn.is-on .i-on{display:block;color:#0066CC;}
.music-btn .i-off{color:var(--mute);}
.music-bars{display:none;align-items:flex-end;gap:2px;height:12px;}
.music-btn.is-on .music-bars{display:inline-flex;}
.music-bars i{width:3px;border-radius:2px;background:linear-gradient(#2E6BFF,#7A5CFF);animation:eq 1s ease-in-out infinite;}
.music-bars i:nth-child(1){height:6px;}.music-bars i:nth-child(2){height:12px;animation-delay:-.35s;}.music-bars i:nth-child(3){height:8px;animation-delay:-.7s;}
@keyframes eq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@media(min-width:1024px){.music-btn{bottom:80px;left:24px;}}
@media (prefers-reduced-motion:reduce){.music-bars i{animation:none;}}
/* Phones: compact icon-only music button so it never covers the opening text / call pill */
@media(max-width:1023px){.music-btn{height:40px;padding:0 10px;gap:5px;}.music-btn .music-lbl{display:none;}}