/* ==========================================================================
   Pandit Vijay Ram — Vedic Astrologer (Canada)
   Design system · "Royal Saffron & Maroon" · tokens per SITE-BUILD-KIT §4
   Fonts: Marcellus (display) + Mulish (body) + Noto Sans Devanagari
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------- */
:root{
  /* surfaces */
  --cream:#FFF6E9; --cream-2:#FBE7C9; --blush:#F6D8AE; --white:#FFFFFF;
  /* ink / text */
  --ink:#34170E; --ink-2:#6E4A38; --ink-3:#9A7B68;
  /* accent — saffron */
  --saffron:#E8821E; --saffron-2:#F4A62A; --saffron-deep:#C2641A; --gold:#C99A2E;
  /* deep / dark */
  --maroon:#6E1320; --maroon-deep:#4A0C16; --dark:#1E0A0A;
  /* support */
  --green:#1FA463; --green-2:#157B4A;
  --line:rgba(52,23,14,.10); --line-2:rgba(52,23,14,.16);
  /* radii */
  --r-lg:22px; --r-md:14px; --r-pill:999px;
  /* shadows — soft amber-tinted */
  --sh-1:0 2px 10px rgba(110,19,32,.07);
  --sh-2:0 14px 40px rgba(110,19,32,.12);
  --sh-3:0 26px 70px rgba(74,12,22,.18);
  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t:.45s var(--ease);
  /* layout */
  --maxw:1200px; --gutter:clamp(1rem,4vw,2rem);
  --topbar-h:38px; --header-h:78px;
  /* fonts */
  --f-display:"Marcellus", "Cormorant Garamond", Georgia, serif;
  --f-body:"Mulish", "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --f-deva:"Noto Sans Devanagari", var(--f-body);
}

/* ---------- Reset / base ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%; overflow-x:hidden}
body{
  margin:0; font-family:var(--f-body); color:var(--ink);
  background:var(--cream); line-height:1.65; font-size:17px;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; width:100%; max-width:100%;
}
img,svg,video{max-width:100%; display:block}
/* Inline icon SVGs ship without width/height attrs; without this they balloon to the
   replaced-element default (~300px) and break mobile layout. Sized contexts
   (.btn/.pill/.fab/.caret) override this via later, equal/higher-specificity rules. */
svg:not([width]){width:1.2em; height:1.2em; flex:none}
a{color:var(--maroon); text-decoration:none; transition:color .25s var(--ease)}
a:hover{color:var(--saffron-deep)}
ul,ol{padding-left:1.2em}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--saffron); outline-offset:2px; border-radius:4px}
::selection{background:var(--saffron-2); color:var(--maroon-deep)}
hr{border:0; border-top:1px solid var(--line); margin:2rem 0}

/* ---------- Typography --------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--f-display); color:var(--maroon); font-weight:400; line-height:1.12; margin:0 0 .5em; letter-spacing:.2px}
h1{font-size:clamp(2.1rem,5vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}
h4{font-size:1.15rem}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem); color:var(--ink-2); line-height:1.6}
.deva{font-family:var(--f-deva)}
strong,b{color:var(--ink); font-weight:800}
.muted{color:var(--ink-3)}

/* ---------- Layout helpers ---------------------------------------------- */
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding:clamp(3rem,7vw,5.5rem) 0}
.section--tint{background:linear-gradient(180deg,var(--cream-2),var(--cream))}
.section--dark{background:radial-gradient(120% 140% at 50% -10%, #2c0d12 0%, var(--dark) 70%); color:#f6e8df}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
.section--dark .lead,.section--dark p{color:#e8d3c6}
.grid{display:grid; gap:clamp(1rem,2.4vw,1.8rem)}
.center{text-align:center}
.eyebrow{display:inline-flex; align-items:center; gap:.5em; font-family:var(--f-body);
  font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:.74rem;
  color:var(--saffron-deep); margin:0 0 .9rem}
.eyebrow::before{content:"✦"; color:var(--gold); font-size:.8em}
.eyebrow--center{justify-content:center}
.eyebrow--pill{background:var(--white); border:1px solid var(--line-2); padding:.5em 1.1em;
  border-radius:var(--r-pill); box-shadow:var(--sh-1)}
.section-head{max-width:760px; margin:0 auto clamp(1.6rem,4vw,2.6rem)}
.section-head.center{text-align:center}

/* ---------- Buttons ------------------------------------------------------ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--f-body); font-weight:800; font-size:.96rem; letter-spacing:.2px;
  padding:.85em 1.55em; border-radius:var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .25s; white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.1em; height:1.1em}
.btn-primary{background:linear-gradient(135deg,var(--saffron-2),var(--saffron-deep)); color:#fff; box-shadow:0 10px 24px rgba(194,100,26,.32)}
.btn-primary:hover{color:#fff; box-shadow:0 16px 34px rgba(194,100,26,.42)}
.btn-royal{background:linear-gradient(135deg,var(--saffron) 0%, var(--maroon) 100%); color:#fff; box-shadow:0 12px 28px rgba(110,19,32,.34)}
.btn-royal:hover{color:#fff}
.btn-wa{background:linear-gradient(135deg,#25D366,var(--green-2)); color:#fff; box-shadow:0 10px 24px rgba(21,123,74,.3)}
.btn-wa:hover{color:#fff}
.btn-light{background:var(--white); color:var(--maroon); border-color:var(--line-2); box-shadow:var(--sh-1)}
.btn-light:hover{color:var(--maroon); border-color:var(--saffron)}
.btn-outline{background:transparent; color:var(--saffron-deep); border-color:var(--saffron)}
.btn-outline:hover{background:var(--saffron); color:#fff}
.btn-lg{padding:1.02em 1.9em; font-size:1.02rem}
.btn-sm{padding:.6em 1.1em; font-size:.86rem}
.btn-block{width:100%; white-space:normal}
.btn-row{display:flex; flex-wrap:wrap; gap:.8rem}
.btn-row--center{justify-content:center}

/* ---------- Top bar ------------------------------------------------------ */
.topbar{background:linear-gradient(90deg,var(--maroon-deep),var(--maroon)); color:#f7e3cf; font-size:.82rem}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--topbar-h)}
.topbar-list{display:flex; gap:1.4rem; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.topbar-list li{display:flex; align-items:center; gap:.45em; white-space:nowrap}
.topbar-list .sep{color:var(--gold)}
.topbar svg{width:15px; height:15px}
.topbar-phone{color:#fff; font-weight:800; display:inline-flex; align-items:center; gap:.4em; white-space:nowrap}
.topbar-phone:hover{color:var(--saffron-2)}
@media (max-width:820px){ .topbar-list li:nth-child(n+2){display:none} }
@media (max-width:520px){ .topbar-list{display:none} .topbar-inner{justify-content:center} }

/* ---------- Header / nav ------------------------------------------------- */
.site-header{position:sticky; top:0; z-index:60; background:rgba(255,246,233,.72);
  backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent; transition:background .3s var(--ease), box-shadow .3s, border-color .3s}
.site-header.scrolled{background:rgba(255,250,243,.96); box-shadow:var(--sh-1); border-bottom-color:var(--line)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--header-h)}
.brand{display:flex; align-items:center; gap:.7rem}
.brand__medallion{width:50px; height:50px; border-radius:50%; flex:none; box-shadow:0 4px 14px rgba(110,19,32,.28); border:2px solid var(--gold)}
.brand__text{display:flex; flex-direction:column; line-height:1.05}
.brand__eyebrow{font-size:.62rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--saffron-deep)}
.brand__name{font-family:var(--f-display); font-size:1.32rem; color:var(--maroon); letter-spacing:.3px}
.brand__name b{color:var(--saffron-deep); font-weight:400}
.brand__tag{font-size:.66rem; color:var(--ink-3); letter-spacing:.04em}

.nav{display:flex; align-items:center; gap:.2rem}
.nav-link{position:relative; display:inline-flex; align-items:center; gap:.35em; padding:.6em .85em;
  font-weight:700; font-size:.95rem; color:var(--ink); border-radius:var(--r-pill); background:none; border:0}
.nav-link:hover{color:var(--saffron-deep)}
.nav-link[aria-current="page"]{color:var(--saffron-deep)}
.nav-link[aria-current="page"]::after{content:""; position:absolute; left:.85em; right:.85em; bottom:.28em; height:2px; background:var(--saffron); border-radius:2px}
.nav-link .caret{width:.6em; height:.6em; transition:transform .25s var(--ease)}
.has-dropdown{position:relative}
.has-dropdown[aria-expanded="true"] .caret,.has-dropdown.open .caret{transform:rotate(180deg)}

.header-cta{display:flex; align-items:center; gap:.6rem}

/* mega menu */
.dropdown{position:absolute; top:calc(100% + 12px); left:0; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-3); padding:1.1rem;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; z-index:70}
.has-dropdown.open .dropdown,.has-dropdown:hover .dropdown{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown.mega{display:grid; grid-template-columns:repeat(3,minmax(190px,230px)); gap:.4rem 1.4rem; width:max-content; max-width:calc(100vw - 2rem)}
.dropdown.mega--svc{grid-template-columns:repeat(5,minmax(150px,186px))}
.has-dropdown--right .dropdown{left:auto; right:0}
.mega-col h4{font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--saffron-deep); margin:.2rem 0 .5rem; font-family:var(--f-body); font-weight:800}
.mega-col a{display:block; padding:.42em .5em; border-radius:8px; color:var(--ink-2); font-size:.92rem; font-weight:600}
.mega-col a:hover{background:var(--cream-2); color:var(--maroon)}
.mega-foot{grid-column:1/-1; border-top:1px solid var(--line); margin-top:.5rem; padding-top:.7rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.mega-foot a{font-weight:800; color:var(--saffron-deep)}

/* hamburger */
.nav-toggle{display:none; width:46px; height:46px; border:1px solid var(--line-2); border-radius:12px;
  background:var(--white); align-items:center; justify-content:center; flex-direction:column; gap:5px}
.nav-toggle span{width:22px; height:2px; background:var(--maroon); border-radius:2px; transition:.3s var(--ease)}
body.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-backdrop{position:fixed; inset:0; background:rgba(30,10,10,.5); opacity:0; visibility:hidden; transition:.3s; z-index:55}
body.menu-open .menu-backdrop{opacity:1; visibility:visible}

@media (max-width:1024px){
  .nav-toggle{display:flex}
  .nav{position:fixed; top:0; right:0; height:100dvh; width:min(86vw,360px); flex-direction:column;
    align-items:stretch; gap:.2rem; background:var(--white); box-shadow:var(--sh-3); padding:5rem 1.2rem 2rem;
    transform:translateX(105%); transition:transform .35s var(--ease); overflow-y:auto; z-index:58}
  body.menu-open .nav{transform:translateX(0)}
  .nav-link{justify-content:space-between; padding:.85em 1em; border-radius:12px}
  .nav-link:hover{background:var(--cream-2)}
  .dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0;
    border-left:2px solid var(--saffron); border-radius:0; margin:.2rem 0 .4rem .6rem; padding:.3rem .6rem;
    max-height:0; overflow:hidden; transition:max-height .3s var(--ease)}
  .dropdown.mega{display:block; width:auto; max-width:none}
  .has-dropdown.open .dropdown{max-height:1400px}
  .header-cta .btn span{display:none}
}
@media (min-width:1025px){
  .header-cta .btn-call-m{display:none}
  /* Mega menus are ~900px wide; anchored to their nav item they were clipped off the
     right (Services) / left (Locations) edge on laptops up to ~1500px, hiding whole
     columns of links. Anchor them to the header container and centre them so the panel
     is always bounded by the viewport. */
  .header-inner{position:relative}
  .nav .has-dropdown{position:static}
  .nav .dropdown.mega{left:50%; right:auto; transform:translate(-50%,8px);
    max-width:min(980px, calc(100vw - 2rem))}
  .nav .has-dropdown.open .dropdown.mega,
  .nav .has-dropdown:hover .dropdown.mega{transform:translate(-50%,0)}
}
/* Phones: the text-only "Book Consultation" CTA has no <span> to collapse via the rule
   above, so it stays full-width and pushes the hamburger off-screen (menu unopenable).
   Drop it on small screens — the slide-in menu, sticky FAB call/WhatsApp and topbar phone
   keep every contact path one tap away. */
@media (max-width:640px){
  .header-cta{gap:.45rem}
  .header-cta .btn-primary{display:none}
}

/* ---------- Hero --------------------------------------------------------- */
.hero{position:relative; overflow:hidden; background:radial-gradient(120% 120% at 80% 0%, var(--cream-2), var(--cream))}
.hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3rem); align-items:center;
  padding-block:clamp(2.5rem,6vw,4.5rem); position:relative; z-index:2}
.hero-copy{max-width:620px}
.hero h1{margin-bottom:.4em}
.hero h1 em{font-style:normal; color:var(--saffron-deep)}
.hero-features{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.3rem 0}
.pill{display:inline-flex; align-items:center; gap:.4em; background:var(--white); border:1px solid var(--line-2);
  border-radius:var(--r-pill); padding:.42em .9em; font-size:.82rem; font-weight:700; color:var(--ink-2); box-shadow:var(--sh-1)}
.pill svg{width:1em; height:1em; color:var(--saffron)}
.hero-trust{display:flex; align-items:center; gap:.9rem; margin-top:1.6rem}
.avatars{display:flex}
.avatars span{width:38px; height:38px; border-radius:50%; border:2px solid var(--white); margin-left:-12px;
  background:linear-gradient(135deg,var(--saffron-2),var(--maroon)); box-shadow:var(--sh-1); display:grid; place-items:center; color:#fff; font-weight:800; font-size:.8rem}
.avatars span:first-child{margin-left:0}
.hero-trust small{display:block; color:var(--ink-3); font-size:.78rem}
.hero-trust strong{font-size:.95rem}

/* hero slides / image card */
.hero-media{position:relative}
.hero-slides{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3); aspect-ratio:4/5; background:var(--blush)}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 1s var(--ease); transform:scale(1.04)}
.hero-slide.active{opacity:1; transform:scale(1)}
.hero-slide img{width:100%; height:100%; object-fit:cover}
.hero-arrow{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.85); border:0; display:grid; place-items:center; box-shadow:var(--sh-2); z-index:3; color:var(--maroon)}
.hero-arrow:hover{background:#fff}
.hero-arrow.prev{left:10px} .hero-arrow.next{right:10px}
.hero-dots{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:.4rem; z-index:3}
.hero-dots button{width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.6)}
.hero-dots button.active{background:#fff; width:22px; border-radius:6px}
.badge-available{position:absolute; top:14px; left:14px; z-index:3; background:rgba(31,164,99,.95); color:#fff;
  font-size:.74rem; font-weight:800; padding:.4em .8em; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:.4em}
.badge-available::before{content:""; width:7px; height:7px; border-radius:50%; background:#fff; animation:pulse 1.6s infinite}
.rating-overlay{position:absolute; right:14px; bottom:14px; z-index:3; background:rgba(255,255,255,.95);
  border-radius:var(--r-md); padding:.55em .8em; box-shadow:var(--sh-2); text-align:center}
.rating-overlay .stars{color:var(--gold); font-size:.9rem; letter-spacing:1px}
.rating-overlay strong{display:block; font-size:1rem; color:var(--maroon)}
.rating-overlay small{font-size:.68rem; color:var(--ink-3)}

/* particles */
.particles{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.particle{position:absolute; width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.4; animation:float 9s var(--ease) infinite}

@media (max-width:880px){ .hero-inner{grid-template-columns:1fr; text-align:center}
  .hero-copy{margin-inline:auto} .hero-features,.hero-trust,.btn-row{justify-content:center}
  .hero-slides{aspect-ratio:4/4; max-width:460px; margin-inline:auto} }

/* ---------- Marquee ------------------------------------------------------ */
.marquee{background:linear-gradient(90deg,var(--maroon-deep),var(--maroon)); color:#f6e3d0; overflow:hidden; padding:.85rem 0}
.marquee__track{display:flex; gap:3rem; width:max-content; animation:scroll-x 32s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:inline-flex; align-items:center; gap:.6em; font-weight:700; white-space:nowrap; font-size:.92rem}
.marquee__item::before{content:"ॐ"; color:var(--gold); font-family:var(--f-deva)}

/* ---------- Cards / services -------------------------------------------- */
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem;
  box-shadow:var(--sh-1); transition:transform .3s var(--ease), box-shadow .3s var(--ease); height:100%}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh-2)}
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:clamp(1rem,2.2vw,1.5rem)}
.service-card{position:relative; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.7rem; box-shadow:var(--sh-1); transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; height:100%}
.service-card:hover{transform:translateY(-6px); box-shadow:var(--sh-2); border-color:var(--saffron)}
.service-card .ico{width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:1rem;
  background:linear-gradient(135deg,var(--cream-2),var(--blush)); color:var(--maroon); font-size:1.5rem}
.service-card h3{font-size:1.22rem; margin-bottom:.4rem}
.service-card p{color:var(--ink-2); font-size:.95rem; margin-bottom:1rem}
.service-card .more{margin-top:auto; font-weight:800; color:var(--saffron-deep); display:inline-flex; align-items:center; gap:.35em}
.service-card .more::after{content:"→"; transition:transform .25s var(--ease)}
.service-card:hover .more::after{transform:translateX(4px)}
.card-feature{background:linear-gradient(150deg,var(--white),var(--cream-2)); border-color:var(--line-2)}
.promise-card{background:radial-gradient(120% 130% at 0 0, #3a0e14, var(--maroon-deep)); color:#fbe7c9; border:0}
.promise-card h3,.promise-card .big{color:#fff}
.promise-card .big{font-family:var(--f-display); font-size:2.6rem; color:var(--gold)}

/* ---------- Stats -------------------------------------------------------- */
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.stat{text-align:center; padding:1rem}
.stat .num{font-family:var(--f-display); font-size:clamp(2rem,4vw,3rem); color:var(--saffron-deep); line-height:1}
.stat .lab{font-size:.82rem; font-weight:700; color:var(--ink-2); letter-spacing:.04em; text-transform:uppercase; margin-top:.3rem}
@media (max-width:680px){ .stat-strip{grid-template-columns:repeat(2,1fr)} }

/* ---------- Steps / journey --------------------------------------------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.5vw,1.6rem); counter-reset:step}
.step{position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.7rem 1.4rem; box-shadow:var(--sh-1)}
.step::before{counter-increment:step; content:counter(step); position:absolute; top:-18px; left:1.4rem;
  width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--saffron-2),var(--maroon));
  color:#fff; font-family:var(--f-display); font-size:1.3rem; display:grid; place-items:center; box-shadow:var(--sh-1)}
.step h3{margin-top:.7rem; font-size:1.15rem}
.step p{color:var(--ink-2); font-size:.92rem; margin:0}
/* !important so these win over the inline style="grid-template-columns:repeat(3,1fr)"
   used on the "How … Helps" steps across service pages (inline would otherwise keep 3
   columns on phones and push the 3rd card off-screen). */
@media (max-width:780px){ .steps{grid-template-columns:1fr 1fr !important} }
@media (max-width:460px){ .steps{grid-template-columns:1fr !important} }

/* ---------- About split -------------------------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.2rem); align-items:center}
.split--reverse .split__media{order:2}
.split__media{position:relative}
.exp-badge{position:absolute; right:-12px; bottom:-12px; background:linear-gradient(135deg,var(--saffron-2),var(--maroon));
  color:#fff; border-radius:var(--r-md); padding:.9rem 1.1rem; text-align:center; box-shadow:var(--sh-2)}
.exp-badge b{font-family:var(--f-display); font-size:1.9rem; display:block; line-height:1}
.exp-badge small{font-size:.7rem; letter-spacing:.06em}
.cred-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.4rem}
.cred{display:flex; gap:.7rem; align-items:flex-start}
.cred .ic{width:38px; height:38px; flex:none; border-radius:10px; background:var(--cream-2); color:var(--maroon); display:grid; place-items:center}
.cred b{display:block; font-size:.96rem}
.cred small{color:var(--ink-3); font-size:.82rem}
@media (max-width:820px){ .split{grid-template-columns:1fr} .split--reverse .split__media{order:0} .cred-grid{grid-template-columns:1fr} }

/* ---------- Media frame -------------------------------------------------- */
.media-frame{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2); aspect-ratio:4/5; background:var(--blush)}
.media-frame img{width:100%; height:100%; object-fit:cover}
.media-frame.frame::after{content:""; position:absolute; inset:8px; border:1.5px solid rgba(255,255,255,.45); border-radius:calc(var(--r-lg) - 6px); pointer-events:none}
.media-frame--wide{aspect-ratio:16/10}

/* ---------- Testimonials ------------------------------------------------- */
.testi{display:grid; gap:1.4rem}
.testi-row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,3vw,2.4rem); align-items:center}
.testi-row:nth-child(even) .testi-media{order:2}
.testi-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.8rem; box-shadow:var(--sh-1)}
.testi-card .stars{color:var(--gold); letter-spacing:2px; margin-bottom:.6rem}
.testi-card blockquote{margin:0 0 1rem; font-size:1.08rem; color:var(--ink); font-style:italic; line-height:1.6}
.testi-who{display:flex; align-items:center; gap:.7rem}
.testi-who .av{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--saffron-2),var(--maroon)); color:#fff; display:grid; place-items:center; font-weight:800}
.testi-who b{display:block; font-size:.95rem}
.testi-who small{color:var(--ink-3); font-size:.8rem}
@media (max-width:780px){ .testi-row{grid-template-columns:1fr} .testi-row:nth-child(even) .testi-media{order:0} }

/* review cards grid */
.review-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem}

/* ---------- FAQ ---------------------------------------------------------- */
.faq{display:grid; gap:.7rem; max-width:780px}
.faq__item{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:box-shadow .25s}
.faq__item[open]{box-shadow:var(--sh-1)}
.faq__item summary{list-style:none; cursor:pointer; padding:1.05rem 1.3rem; font-weight:800; color:var(--maroon);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:1.02rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+"; font-family:var(--f-display); font-size:1.5rem; color:var(--saffron-deep); transition:transform .25s var(--ease)}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item .faq__a{padding:0 1.3rem 1.2rem; color:var(--ink-2)}

/* ---------- Forms -------------------------------------------------------- */
.form-card{background:var(--white); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--sh-2)}
.form-card--maroon{background:radial-gradient(130% 130% at 0 0,#3a0e14,var(--maroon-deep)); color:#fbe7c9; border:0}
.form-card--maroon h2,.form-card--maroon h3{color:#fff}
.form-card--maroon .field label{color:#f3d9c6}
.form{display:grid; gap:1rem}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.field{display:flex; flex-direction:column; gap:.35rem; min-width:0}
.field label{font-size:.82rem; font-weight:800; letter-spacing:.02em}
/* width:100% + min-width:0 lets inputs shrink to their grid cell — without this their
   intrinsic (size-based) width forces the two-column row ~467px wide and it overflows phones. */
.field input,.field select,.field textarea{font-family:inherit; font-size:.98rem; padding:.8em .9em; width:100%; min-width:0;
  border:1.5px solid var(--line-2); border-radius:12px; background:var(--white); color:var(--ink); transition:border-color .2s, box-shadow .2s}
@media (max-width:560px){ .form .row{grid-template-columns:1fr} }
.field textarea{min-height:110px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--saffron); box-shadow:0 0 0 3px rgba(232,130,30,.18)}
.field--error input,.field--error select,.field--error textarea{border-color:var(--maroon)}
.field__error{color:#ffd9c9; font-size:.78rem; display:none}
.form-card:not(.form-card--maroon) .field__error{color:var(--maroon)}
.field--error .field__error{display:block}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-success{display:none; text-align:center; padding:1.6rem; background:rgba(31,164,99,.12); border:1px solid rgba(31,164,99,.4); border-radius:var(--r-md); color:var(--green-2)}
.form-success.show{display:block}
.form-success .ic{font-size:2rem}
.form-note{font-size:.74rem; color:var(--ink-3)}
.form-card--maroon .form-note{color:#d9b9a6}

/* ---------- Page banner (inner pages) ------------------------------------ */
.page-banner{position:relative; background:radial-gradient(120% 140% at 80% -20%, #3a0e14, var(--maroon-deep)); color:#fbe7c9; padding:clamp(2.4rem,6vw,4rem) 0 clamp(2rem,5vw,3.2rem); overflow:hidden}
.page-banner::after{content:"ॐ"; font-family:var(--f-deva); position:absolute; right:-2rem; top:50%; transform:translateY(-50%); font-size:14rem; color:rgba(201,154,46,.12)}
.page-banner h1{color:#fff; position:relative}
.page-banner .lead{color:#f0d6c5; position:relative; max-width:680px}
.crumbs{display:flex; gap:.5em; flex-wrap:wrap; font-size:.84rem; color:#e3bda7; margin-bottom:1rem; position:relative}
.crumbs a{color:#f6d8ae}
.crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.6}
.eyebrow--onDark{color:var(--gold)}

/* ---------- Article / blog ----------------------------------------------- */
.article{max-width:780px; margin-inline:auto}
.article h2{margin-top:2rem}
.article h3{margin-top:1.5rem}
.article img,.article figure{margin:1.6rem 0}
.article figure figcaption{font-size:.82rem; color:var(--ink-3); text-align:center; margin-top:.5rem}
.answer-box,.quick-answer{background:linear-gradient(150deg,var(--cream-2),var(--white)); border-left:4px solid var(--saffron);
  border-radius:var(--r-md); padding:1.2rem 1.4rem; margin:1.4rem 0; box-shadow:var(--sh-1)}
.answer-box strong,.quick-answer strong{color:var(--maroon)}
.blog-hero{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2); margin-bottom:1.5rem; aspect-ratio:16/9}
.blog-hero img{width:100%;height:100%;object-fit:cover}
.toc{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:1.1rem 1.3rem; margin:1.4rem 0}
.toc h4{margin:0 0 .5rem; font-family:var(--f-body); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--saffron-deep)}
.toc ol{margin:0; padding-left:1.2em} .toc a{color:var(--ink-2); font-weight:600}
.takeaways{background:var(--cream-2); border-radius:var(--r-md); padding:1.3rem 1.5rem; margin:1.6rem 0}
.takeaways h3{margin-top:0}
.references{font-size:.92rem}
.references a{word-break:break-word}
.related{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem; margin-top:1.5rem}

/* link block (mvr-links) */
.link-block{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-md); padding:1.4rem; margin:1.6rem 0}
.link-block h4{font-family:var(--f-body); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--saffron-deep); margin:0 0 .6rem}
.link-block ul{list-style:none; padding:0; margin:0; display:grid; gap:.4rem}
@media (max-width:640px){ .link-block{grid-template-columns:1fr} }

/* ---------- CTA band ----------------------------------------------------- */
.cta-band{position:relative; background:linear-gradient(135deg,var(--saffron) 0%, var(--maroon) 100%); color:#fff;
  border-radius:var(--r-lg); padding:clamp(2rem,5vw,3.4rem); text-align:center; overflow:hidden; box-shadow:var(--sh-2)}
.cta-band::before{content:"ॐ"; font-family:var(--f-deva); position:absolute; left:-1rem; bottom:-3rem; font-size:11rem; color:rgba(255,255,255,.1)}
.cta-band h2{color:#fff; position:relative}
.cta-band p{color:rgba(255,255,255,.92); position:relative; max-width:620px; margin-inline:auto}
.cta-band .btn-row{position:relative}
.cta-band .btn-light{color:var(--maroon)}

/* ---------- Sadhana dark cards ------------------------------------------- */
.sadhana-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.sadhana-card{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1/1; box-shadow:var(--sh-2)}
.sadhana-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.sadhana-card:hover img{transform:scale(1.06)}
.sadhana-card .cap{position:absolute; inset:auto 0 0 0; padding:1.4rem 1.1rem .9rem; color:#fff;
  background:linear-gradient(transparent, rgba(30,10,10,.85)); font-family:var(--f-display); font-size:1.15rem}
@media (max-width:780px){ .sadhana-grid{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .sadhana-grid{grid-template-columns:1fr} }

/* ---------- Floating action buttons -------------------------------------- */
.fab{position:fixed; bottom:22px; z-index:50; width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  color:#fff; box-shadow:var(--sh-2); animation:pulse-soft 2.4s infinite}
.fab svg{width:26px; height:26px}
.fab.call{left:20px; background:linear-gradient(135deg,var(--saffron-2),var(--saffron-deep))}
.fab.wa{right:20px; background:linear-gradient(135deg,#25D366,var(--green-2)); animation-delay:.6s}
.fab:hover{color:#fff; transform:scale(1.08)}

/* ---------- Footer ------------------------------------------------------- */
.site-footer{background:radial-gradient(120% 120% at 50% 0%, #2c0d12, var(--dark)); color:#e8d3c6; padding-top:clamp(3rem,6vw,4.5rem)}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.5rem 1.8rem}
.footer-brand--full{margin-bottom:2.2rem; max-width:none}
.footer-brand--full p{max-width:62ch}
.footer-col h4{margin-bottom:.85rem}
.footer-brand .brand__name{color:#fff}
.footer-brand p{color:#cbb1a4; font-size:.92rem; margin-top:1rem}
.site-footer h4{color:#fff; font-size:.86rem; text-transform:uppercase; letter-spacing:.12em; font-family:var(--f-body); margin-bottom:1rem}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap:.55rem}
.footer-links a{color:#cbb1a4; font-size:.92rem}
.footer-links a:hover{color:var(--saffron-2)}
.footer-contact li{display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.7rem; color:#cbb1a4; font-size:.92rem; list-style:none}
.footer-contact li svg{width:18px; height:18px; flex:none; margin-top:.15em; color:var(--saffron-2)}
.footer-contact{padding:0; margin:0}
.footer-contact a{color:#f0d6c5}
.footer-contact a[href^="tel:"]{white-space:nowrap}
.socials{display:flex; gap:.6rem; margin-top:1rem}
.socials a{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#f0d6c5}
.socials a:hover{background:var(--saffron-deep); color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem; padding:1.6rem 0; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:#b89a8c}
.disclaimer{background:rgba(0,0,0,.25); color:#c8a89a; font-size:.76rem; line-height:1.6; padding:1.1rem 0; border-top:1px solid rgba(255,255,255,.08)}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr} }

/* ---------- Reveal animation --------------------------------------------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ---------- Keyframes ---------------------------------------------------- */
@keyframes scroll-x{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-26px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)} 70%{box-shadow:0 0 0 8px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes pulse-soft{0%{box-shadow:0 0 0 0 rgba(232,130,30,.45)} 70%{box-shadow:0 0 0 14px rgba(232,130,30,0)} 100%{box-shadow:0 0 0 0 rgba(232,130,30,0)}}

/* ---------- Utilities ---------------------------------------------------- */
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.tac{text-align:center}
.maxw-720{max-width:720px; margin-inline:auto}
.hide{display:none !important}

/* ---------- Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .hero-slide{transition:opacity .3s} .marquee__track{animation:none}
  .particle{display:none}
}

/* service card covers + image galleries (build_service_images.php) */
.service-card__cover{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;margin-bottom:1rem;background:var(--blush)}
.img-gallery{align-items:start}
.img-gallery figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:var(--sh-1);background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column}
.img-gallery figure img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.img-gallery figure.infographic img{object-fit:contain;background:var(--cream-2)}
.img-gallery figcaption{font-size:.82rem;color:var(--ink-3);text-align:center;padding:.6rem .7rem}