/*
Theme Name: Shree Vedic Aim
Theme URI: https://wordpress.shreevedicaim.com
Author: Shree Vedic Aim Jyotishalaya
Version: 8.4
Text Domain: sva
*/

/* ACCESSIBILITY — prefers-reduced-motion. Visitors who've told their
   OS they get motion sickness or vestibular discomfort from animation
   were previously getting the full experience regardless: the
   rotating zodiac wheel, drifting galaxies, parallax, page-transition
   curtain, hover transforms, all of it. This doesn't remove content
   or functionality, only the motion — everything still works, it
   just stops moving. The continuous canvas-drawn animations (the
   zodiac wheel's rotation, galaxy drift) are stopped via JS checking
   the same media query, since CSS alone can't reach into canvas
   drawing loops — see main.js and sva-galaxies.js. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
  #sva-page-curtain{display:none!important;}
}

/* NUCLEAR: Kill ALL external backgrounds */
*,html,body,#page,#content,.site,.site-content,.wp-site-blocks,
main,article,section,aside,header,footer,div,span,nav,
.elementor,.elementor-section,.elementor-container,
.elementor-widget-wrap,.e-con,.e-con-inner,
[class*="elementor"],[class*="wp-block"],
.entry-content,#primary,#secondary,.content-area,
.hfeed,.hentry,.site-header,.site-footer,
.ast-container,.ast-row,.fl-row,.fl-col,
[class*="ast-"],[class*="fl-"],[class*="fusion-"],[class*="et_"] {
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
html{background:#060D1E!important;}
body{background:#060D1E!important;}

/* The universal * selector above (needed to strip theme-builder plugin
   backgrounds) was also wiping out WordPress's own admin toolbar
   styling for logged-in users, since #wpadminbar and its children match
   "*" too. revert doesn't work here (it skips past WP core's own CSS
   straight to the browser's bare default, which is transparent) — so
   this hardcodes WordPress's actual default admin-bar colors instead. */
#wpadminbar{background:#1d2327!important;}
#wpadminbar .ab-sub-wrapper,#wpadminbar .ab-submenu{background:#32373c!important;}
#wpadminbar .ab-item,#wpadminbar a.ab-item,#wpadminbar .ab-label,#wpadminbar .ab-icon{background:transparent!important;}

/* The site header is position:fixed;top:0, which (correctly, per CSS
   spec) ignores WordPress's html{margin-top:32px} admin-bar offset,
   since fixed positioning is relative to the viewport, not the
   document. That made it sit on top of / overlapping the admin bar for
   logged-in users. WP adds body.admin-bar automatically, so this only
   ever applies for admins/editors, never for actual site visitors. */
body.admin-bar #sva-hdr{top:32px;}
@media screen and (max-width:782px){
  body.admin-bar #sva-hdr{top:46px;}
}

.floating-planet,[class*="planet-float"],[class*="float-planet"],
img[src*="jupiter"],img[src*="saturn"],img[src*="navagraha"],
[class*="graha"],[class*="planet-img"]{display:none!important;}

/* BUTTON RESCUE — the nuclear reset above wipes background from `*`
   with !important. Re-assert the refined bordered gold buttons with
   equal force. Dark semi-transparent base, gold border + text — far
   more refined than the old solid-gold slab look. */
.sva-btn-g{
  background:rgba(6,13,30,0.55)!important;
  background-color:rgba(6,13,30,0.55)!important;
  color:#D4AF37!important;
  opacity:1!important;visibility:visible!important;
}
.sva-btn-g:hover{
  background:rgba(212,175,55,0.18)!important;
  background-color:rgba(212,175,55,0.18)!important;
  color:#F0DC8A!important;
}
/* DIVIDER RESCUE — same nuclear-reset problem as the button above: the
   gold gradient line flanking the lotus icon is a `background`, so the
   `*{background:transparent!important}` reset was wiping it out
   completely, leaving only the icon with no visible line at all. */
.sva-divider span{
  background:linear-gradient(90deg,transparent,rgba(212,175,55,0.75),transparent)!important;
}

/* JUMP-NAV DOT RESCUE — same nuclear-reset problem again: the dots'
   fill (resting tint, hover tint, and the solid active fill) are all
   plain `background` properties, so the reset above was wiping every
   one of them out, leaving only the border visible — a hollow ring
   that never actually filled in on hover, click/tap, or scroll-active,
   on ANY device (desktop dots and the mobile pill bar both use the
   same classes). Re-asserted here with equal force. */
.sva-jumpdot{background:rgba(212,175,55,0.2)!important;}
.sva-jumpdot:hover,.sva-jumpdot:focus-visible{background:rgba(212,175,55,0.35)!important;}
.sva-jumpdot.active{background:var(--gold)!important;}
.sva-jumpdot:active{background:rgba(212,175,55,0.35)!important;}
@media(max-width:900px){
  .sva-jumpdot{background:transparent!important;}
  .sva-jumpdot.active{background:var(--gold)!important;}
  .sva-jumpdot:active{background:rgba(212,175,55,0.35)!important;}
}

/* NEW-ELEMENTS RESCUE — same nuclear-reset problem again: the "Most
   Popular" badge fill, the reading-progress bar, and the skeleton
   shimmer gradient are all `background`, so without this they'd all
   render invisibly just like the button/divider/dot bugs before them. */
.sva-svc-popular,.sva-svcf-popular{background:var(--gold)!important;}
#sva-read-progress{background:var(--gold)!important;}
.sva-testi-wrap:not(.sva-ready),#sva-awd-track:not(.sva-ready){
  background:linear-gradient(90deg,rgba(212,175,55,0.04) 25%,rgba(212,175,55,0.11) 37%,rgba(212,175,55,0.04) 63%)!important;
  background-size:400% 100%!important;
}

/* -- SITE-WIDE POLISH ADDITIONS -- */

/* 1. PAGE TRANSITIONS — a plain solid-colour curtain that covers the
   page and fades away, instead of hiding <body> itself. The previous
   body-opacity approach caused a visible glitch where old decorative
   content (the fixed-position galaxies) briefly showed through during
   the hide/reveal — this curtain is a single flat div with nothing
   else on it, sitting ABOVE everything, so there's nothing underneath
   it that can flash or leak through. The @keyframes animation makes
   it disappear automatically even with JavaScript fully disabled —
   main.js (below) just replaces that timing with a proper managed
   fade once the page is truly ready, and reuses the same element for
   the fade-out when leaving the page. */
#sva-page-curtain{
  position:fixed;inset:0;z-index:999999;background:#060D1E!important;
  opacity:1;pointer-events:none;
  animation:sva-curtain-out .45s ease .1s forwards;
}
@keyframes sva-curtain-out{to{opacity:0;visibility:hidden;}}

/* 2. Image lazy blur-up */
.sva-blurup{filter:blur(10px);opacity:0;transition:filter .5s ease,opacity .5s ease;}
.sva-blurup.sva-blurup-loaded{filter:blur(0);opacity:1;}

/* 3. Blog reading-progress bar */
#sva-read-progress{position:fixed;top:0;left:0;height:3px;background:var(--gold)!important;z-index:10000;width:0%;box-shadow:0 0 8px rgba(212,175,55,0.6);}

/* 4. Success-message checkmark/pulse micro-interaction */
@keyframes sva-msg-pulse{0%{transform:scale(1);}30%{transform:scale(1.06);}100%{transform:scale(1);}}
.sva-msg-pulse{animation:sva-msg-pulse .4s ease;}
.sva-msg-pulse::before{content:'\2713\A0';} /* checkmark + space, prepended via CSS so no markup change needed */

/* 6. Skeleton shimmer while sliders initialize */
@keyframes sva-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.sva-testi-wrap:not(.sva-ready),#sva-awd-track:not(.sva-ready){
  background:linear-gradient(90deg,rgba(212,175,55,0.04) 25%,rgba(212,175,55,0.11) 37%,rgba(212,175,55,0.04) 63%);
  background-size:400% 100%;animation:sva-shimmer 1.4s ease infinite;border-radius:4px;
}

/* 7. Back-to-top scroll-progress ring around the arrow icon */
.sva-top-ring{flex-shrink:0;transform:rotate(-90deg);}
.sva-top-ring circle{fill:none;stroke-width:2;}
.sva-top-ring .sva-top-ring-bg{stroke:rgba(212,175,55,0.25)!important;}
.sva-top-ring .sva-top-ring-fg{stroke:var(--gold)!important;stroke-linecap:round;transition:stroke-dashoffset .1s linear;}

/* 8. "Most Popular" badge on the first service card */
.sva-svc-popular,.sva-svcf-popular{
  position:absolute;top:-1px;right:14px;
  background:var(--gold)!important;color:var(--navy)!important;
  font-family:var(--fh);font-size:11px;letter-spacing:1.3px;
  padding:5px 11px;border-radius:0 0 4px 4px;
  text-transform:uppercase;font-weight:700;
  box-shadow:0 3px 8px rgba(0,0,0,0.3);
}
.sva-svc{position:relative;}
.sva-svcf{position:relative;}

/* VARIABLES */
:root{
  --navy:#060D1E;--navy2:#0A122A;
  --gold:#D4AF37;--gold2:rgba(212,175,55,0.15);
  --stone:#E8DCC0;--ivory:#F5F0E8;--muted:#DCCFA6;--dim:#A9976C;
  --fh:'Cinzel',Georgia,serif;
  --fs:'Cormorant Garamond',Georgia,serif;
  --fb:'Lato',Arial,sans-serif;
  --trans:all 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* BASE */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{color:var(--ivory);font-family:var(--fb);font-size:17px;line-height:1.75;margin:0;overflow-x:hidden;}
a{color:var(--gold)!important;text-decoration:none;transition:color .3s;}
a:hover{color:var(--stone);}
img{max-width:100%;height:auto;display:block;}
ul{list-style:none;margin:0;padding:0;}
button{cursor:pointer;font-family:inherit;border:none;}
input,select,textarea{font-family:inherit;}
h1,h2,h3,h4,h5{margin:0;}
p{margin:0 0 14px;}

/* FIXED BG — stars canvas on EVERY page */
#sva-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;
}
#sva-glow{display:none!important;} /* legacy id, kept only in case something else still references it — fully hidden */
.sva-wrap{position:relative;z-index:2;}

/* HEADER */
#sva-hdr{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  min-height:60px;display:flex;align-items:center;
  justify-content:space-between;padding:0 36px;
  transform:translateY(-100%);
  will-change:transform;
  transition:transform .32s cubic-bezier(.4,0,.2,1),background .32s;
}
#sva-hdr.sva-show{
  transform:translateY(0);
  background:rgba(6,13,30,0.96)!important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:.5px solid rgba(212,175,55,0.15);
}
.sva-logo{display:flex;align-items:center;gap:10px;}
.sva-logo img{height:42px;width:auto;}
.sva-logo-name{font-family:var(--fh);font-size:14px;color:#F4E4B8;letter-spacing:2px;display:block;text-shadow:0 0 10px rgba(244,228,184,0.5);}
.sva-logo-tag{font-size:13.5px;color:#D2C4A0;letter-spacing:1.2px;text-transform:uppercase;display:block;}
nav.sva-nav{display:flex;align-items:center;gap:18px;}
.sva-nav-ul{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0;}
.sva-nav-ul li a{font-family:var(--fh);font-size:15px;letter-spacing:2px;color:#E4D7BA;text-transform:uppercase;transition:color .3s,text-shadow .3s;}
.sva-nav-ul li a:hover{color:#FFC94D;text-shadow:0 0 12px rgba(255,201,77,0.75);}
.sva-nav-cta{font-family:var(--fh);font-size:13.5px;letter-spacing:1.6px;padding:7px 15px;border:1px solid var(--gold);color:var(--gold);background:transparent;border-radius:2px;transition:var(--trans);white-space:nowrap;}
.sva-nav-cta:hover{background:#F4D65C!important;color:var(--navy);}
.sva-ham{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;}
.sva-ham span{display:block;width:22px;height:1.5px;background:var(--gold);transition:var(--trans);}
.sva-mob{display:none;position:fixed;inset:0;background:rgba(6,13,30,.97);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:22px;}
.sva-mob.open{display:flex;}
.sva-mob a{font-family:var(--fh);font-size:16px;letter-spacing:3px;color:#E4D7BA;transition:color .3s,text-shadow .3s;}
.sva-mob a:hover{color:#FFC94D;text-shadow:0 0 12px rgba(255,201,77,0.75);}
.sva-mob-x{position:absolute;top:18px;right:24px;background:none;color:var(--gold);font-size:22px;cursor:pointer;}

/* BUTTONS */
.sva-btn-g{
  display:inline-block;font-family:var(--fh);font-size:14px;font-weight:500;letter-spacing:1.8px;
  padding:13px 30px;background:rgba(6,13,30,0.55);color:var(--gold);
  border:1.5px solid rgba(212,175,55,0.6);border-radius:3px;cursor:pointer;
  animation:glow-pulse 4s ease-in-out infinite;
  transition:background .25s,transform .2s,box-shadow .25s,color .2s,border-color .2s;text-transform:uppercase;
}
.sva-btn-g:hover{background:rgba(212,175,55,0.14);border-color:rgba(212,175,55,0.85);transform:translateY(-2px);color:#F0DC8A;}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,0);}50%{box-shadow:0 0 14px 3px rgba(212,175,55,0.18);}}
.sva-btn-o{
  display:inline-block;font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:2px;
  padding:12px 30px;background:transparent;color:var(--gold);
  border:1.5px solid var(--gold);border-radius:2px;cursor:pointer;
  transition:var(--trans);text-transform:uppercase;
}
.sva-btn-o:hover{background:rgba(212,175,55,0.1)!important;transform:translateY(-2px);color:var(--gold);}
@media(max-width:600px){
  .sva-btn-g,.sva-btn-o{font-size:15px;letter-spacing:1.6px;padding:14px 26px;}
}

/* DIVIDER */
.sva-divider{display:flex;align-items:center;justify-content:center;padding:0 5%;position:relative;z-index:2;gap:0;}
.sva-divider span{width:70px;flex:none;height:1.5px;border-radius:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,0.75),transparent)!important;box-shadow:0 0 8px rgba(212,175,55,0.35);}
@media(max-width:600px){
  .sva-divider span{width:44px;}
  .sva-divider{gap:0;}
}
.sva-div-lotus{font-size:15px;color:rgba(212,175,55,0.55);padding:0;white-space:nowrap;font-style:normal;}

/* HERO — smaller h1, no hero-only background color */
.sva-hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#sva-zodiac-canvas{position:absolute;top:0;left:0;width:100%;height:100%;}
.sva-hero-body{position:relative;z-index:2;text-align:center;padding:40px 24px;max-width:660px;display:flex;flex-direction:column;align-items:center;}
.sva-hero-logo{margin:0 auto 16px;}
.sva-hero-logo img{height:118px;width:auto;margin:0 auto;filter:drop-shadow(0 0 22px rgba(212,175,55,0.5));}
.sva-om{font-family:var(--fs);font-size:17px;color:var(--gold);letter-spacing:8px;opacity:.9;margin-bottom:10px;}
.sva-eye{font-family:var(--fh);font-size:14.5px;letter-spacing:5px;color:#FFF6DE;text-transform:uppercase;margin-bottom:16px;margin-top:-16px;text-shadow:0 0 18px rgba(255,246,222,0.85),0 0 4px rgba(255,246,222,0.6);}
/* REDUCED h1 size */
.sva-h1{font-family:var(--fh);font-size:clamp(20px,2.6vw,32px);color:var(--ivory);letter-spacing:3px;line-height:1.15;margin-bottom:14px;margin-top:16px;}
.sva-tag{font-family:var(--fs);font-style:italic;font-weight:500;font-size:19px;color:var(--stone);line-height:1.7;margin-bottom:28px;max-width:460px;margin-left:auto;margin-right:auto;}
.sva-hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;width:100%;text-align:center;}
.sva-scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:3px;color:var(--muted);animation:bounce 2.2s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(5px);}}

/* COUNTERS */
.sva-counters{display:grid;grid-template-columns:repeat(3,1fr);position:relative;z-index:2;border-top:.5px solid rgba(212,175,55,0.2);border-bottom:.5px solid rgba(212,175,55,0.2);}
.sva-cnt-cell{padding:24px 16px;text-align:center;border-right:.5px solid rgba(212,175,55,0.1);transition:var(--trans);}
.sva-cnt-cell:last-child{border-right:none;}
.sva-cnt-cell:hover{background:rgba(212,175,55,0.04)!important;}
.sva-cn{font-family:var(--fh);font-size:26px;color:var(--gold);font-weight:600;line-height:1;}
.sva-cl{font-size:13.5px;letter-spacing:2px;color:var(--muted);margin-top:6px;text-transform:uppercase;}

/* SECTIONS — all same navy, no purple/different hue */
.sva-sec{padding:62px 5%;position:relative;z-index:2;}
.sva-eyebrow{font-family:var(--fh);font-size:14.5px;letter-spacing:3.4px;color:var(--gold);text-align:center;text-transform:uppercase;margin-bottom:10px;}
.sva-h2{font-family:var(--fh);font-size:clamp(17px,2.2vw,25px);color:var(--ivory);text-align:center;letter-spacing:2px;margin-bottom:10px;}
.sva-sub{font-family:var(--fs);font-style:italic;font-weight:500;font-size:19px;color:#E4D7BA;text-align:center;max-width:500px;margin:0 auto 36px;line-height:1.7;}

/* ABOUT */
.sva-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;max-width:1080px;margin:0 auto;}
/* Once .sva-about-grid / .sva-chart-grid stack to a single column
   (≤900px — see the grid-template-columns:1fr rule further down), the
   text and buttons inside them were keeping their desktop LEFT
   alignment, which made sense beside an image but looks lopsided once
   the column is full-width and centered on the page. Centered instead,
   for tablets and phones alike. */
@media(max-width:900px){
  .sva-about-text,.sva-chart-cta{text-align:center;}
  .sva-about-text .sva-eyebrow,.sva-about-text h2{text-align:center!important;}
  .sva-about-list{display:inline-block;text-align:left;margin-left:auto;margin-right:auto;}
  .sva-about-text>a.sva-btn-o,.sva-chart-cta>a.sva-btn-g{display:inline-block;}
}
.sva-yantra-wrap{
  position:relative;
  width:100%;
  max-width:420px;   /* reduced — was the full ~514px grid column */
  margin:0 auto;     /* stay centered in the column */
  aspect-ratio:1761.2/1748.2;
  border:none!important;
  background:transparent!important;
  overflow:visible!important;
  cursor:crosshair;
}
.sva-yantra-svg-bg{
  width:100%;height:100%;display:block;
  background-color:#FFFFFF!important;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  transition:background-color 0.4s ease,transform 0.5s ease;
  transform-origin:center center;
  will-change:transform,background-color;
  opacity:0.62;
}
.sva-yantra-wrap:hover .sva-yantra-svg-bg,
.sva-yantra-wrap.sva-yantra-touch-active .sva-yantra-svg-bg{
  background-color:#D4AF37!important;
}
#sva-yantra-canvas{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:3;
}
#sva-yantra-label{
  display:block;
  margin:12px auto 0;   /* centered on the yantra's own axis */
  max-width:420px;      /* matches the reduced yantra width */
  min-height:52px;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.35s ease;
}
#sva-yantra-label.visible{opacity:1;}
#sva-yantra-label strong{
  display:block;
  font-family:'Cinzel',Georgia,serif;
  font-size:17px;
  font-weight:700;
  letter-spacing:3px;
  color:#FFE566;
  margin-bottom:6px;
  text-transform:uppercase;
  text-align:center;
}
#sva-yantra-label span{
  display:block;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:16px;
  color:#C8B99A;
  line-height:1.65;
  text-align:center;
}
.sva-yantra-glow{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 50% 50%,rgba(212,175,55,0.06) 0%,transparent 68%)!important;
  animation:yantra-pulse 4s ease-in-out infinite;
}
@keyframes yantra-pulse{0%,100%{opacity:0.3;}50%{opacity:0.85;}}
.sva-about-text .sva-eyebrow{text-align:left;}
.sva-about-text h2{font-family:var(--fh);font-size:clamp(15px,2vw,22px);color:var(--ivory);letter-spacing:2px;margin-bottom:13px;text-align:left;}
.sva-about-text p{font-family:var(--fs);font-weight:500;font-size:19px;color:var(--stone);line-height:1.8;margin-bottom:12px;}
.sva-about-list{margin:16px 0 24px;}
.sva-about-list li{display:flex;align-items:flex-start;gap:10px;padding:6px 0;border-bottom:.5px solid rgba(212,175,55,0.07);font-size:16px;color:var(--stone);transition:color .3s;}
.sva-about-list li:hover{color:var(--ivory);}
.sva-about-list li::before{content:'✦';color:var(--gold);font-size:9px;margin-top:4px;flex-shrink:0;}

/* SERVICES — 3D tilt + bounce */
.sva-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1080px;margin:0 auto;perspective:1200px;}
.sva-svc{
  border:.5px solid rgba(212,175,55,0.18);border-radius:4px;border-top:2.5px solid var(--svc-accent,#D4AF37);
  padding:24px 18px 20px;text-align:center;
  display:flex;flex-direction:column;color:inherit;text-decoration:none;
  cursor:pointer;
  background:rgba(20,28,52,0.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.sva-svc:hover{color:inherit;}
.sva-svc-icon{font-size:26px;display:block;margin-bottom:10px;color:var(--svc-accent,#D4AF37);transition:transform .4s cubic-bezier(0.34,1.56,0.64,1);}
.sva-svc:hover .sva-svc-icon{transform:scale(1.3) rotate(-6deg);}
.sva-svc-name{font-family:var(--fh);font-size:15.5px;color:var(--ivory);letter-spacing:1.4px;margin-bottom:8px;}
.sva-svc-desc{font-family:var(--fs);font-style:italic;font-weight:500;font-size:18px;color:#B9C4D6;line-height:1.55;}
.sva-svc-price{display:block;font-family:var(--fh);font-size:17px;font-weight:700;color:var(--svc-accent,#D4AF37);letter-spacing:1px;}
/* Rotating accent palette — gives each card its own colour instead of
   every card looking identically gold/beige. Cycles every 6 cards. */
.sva-svc-grid>a:nth-child(6n+1){--svc-accent:#D4AF37;}
.sva-svc-grid>a:nth-child(6n+2){--svc-accent:#D98C6B;}
.sva-svc-grid>a:nth-child(6n+3){--svc-accent:#7FA8C9;}
.sva-svc-grid>a:nth-child(6n+4){--svc-accent:#8FAE7D;}
.sva-svc-grid>a:nth-child(6n+5){--svc-accent:#B9A6DC;}
.sva-svc-grid>a:nth-child(6n+6){--svc-accent:#D9A05B;}
/* Price + disclaimer + button now travel together as ONE group, pinned
   to the same bottom position on every card in a row via margin-top:auto
   on the group itself — not on the button alone. This is what keeps the
   button a fixed distance below the price/disclaimer regardless of how
   long or short that card's description happens to be, instead of the
   whole cluster drifting up/down together based on content length. */
.sva-svc-foot{display:flex;flex-direction:column;align-items:center;margin-top:auto;padding-top:10px;}
.sva-svc-more{font-family:var(--fh);font-size:14.5px;letter-spacing:1.6px;color:var(--gold);display:block;margin-top:10px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;text-transform:uppercase;}
/* Pinned to the same bottom edge on every card in a row, regardless of
   how long that card's description happens to be — margin-top:auto
   pushes it down to fill any remaining space in the flex column, and
   grid rows already stretch every card to equal height by default. */
.sva-svc:hover .sva-svc-more,.sva-svcf:hover .sva-svc-more{opacity:1;transform:translateY(0);}

/* BIRTH CHART */
.sva-chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;max-width:880px;margin:0 auto;}
.sva-chart-svg-wrap{max-width:360px;margin:0 auto;}
.sva-chart-house{cursor:pointer;fill:transparent;transition:fill .25s;}
/* Colourful resting tints — one per house, driven by Customizer
   (Birth Chart section). Each --ch-hN falls back to a sensible colour
   so the chart is colourful out of the box even before any customizing.
   fill-opacity keeps the tints subtle so numbers stay readable. */
.sva-ch-colourful .sva-ch-h1{fill:var(--ch-h1,#D4AF37);}
.sva-ch-colourful .sva-ch-h2{fill:var(--ch-h2,#D98C6B);}
.sva-ch-colourful .sva-ch-h3{fill:var(--ch-h3,#7FA8C9);}
.sva-ch-colourful .sva-ch-h4{fill:var(--ch-h4,#8FAE7D);}
.sva-ch-colourful .sva-ch-h5{fill:var(--ch-h5,#B9A6DC);}
.sva-ch-colourful .sva-ch-h6{fill:var(--ch-h6,#D9A05B);}
.sva-ch-colourful .sva-ch-h7{fill:var(--ch-h7,#C98A9B);}
.sva-ch-colourful .sva-ch-h8{fill:var(--ch-h8,#6FB0A6);}
.sva-ch-colourful .sva-chart-house{fill-opacity:var(--ch-tint,.14);}
/* Hover / tap highlight — sits on top of the resting tint */
.sva-chart-house.sva-ch-on{fill:var(--ch-hover,var(--gold,#D4AF37))!important;fill-opacity:var(--ch-hover-op,.30)!important;}
/* Frame lines, centre ring, Sun, numbers & planet glyphs — all recolourable */
.sva-ch-frame{stroke:var(--ch-frame,#D4AF37);}
.sva-ch-ring{stroke:var(--ch-ring,var(--ch-frame,#D4AF37));}
.sva-ch-sun{fill:var(--ch-sun,#F2A93B);}
.sva-ch-num{fill:var(--ch-num,#E8C877);}
.sva-ch-mars{fill:var(--ch-mars,#E0603A);}
.sva-ch-jupiter{fill:var(--ch-jupiter,#E8C24A);}
.sva-ch-venus{fill:var(--ch-venus,#F2E3C8);}
.sva-ch-moon{fill:var(--ch-moon,#DDE3EC);}
.sva-ch-saturn{fill:var(--ch-saturn,#8FB4D6);}
#sva-chart-info{display:block;text-align:center;font-size:15px;letter-spacing:1.5px;color:#E8DCC0;margin-top:12px;font-family:var(--fh);min-height:18px;}
.sva-ch3{font-family:var(--fh);font-size:17px;color:var(--gold);letter-spacing:2px;margin-bottom:6px;}
.sva-clede{font-family:var(--fs);font-style:italic;font-weight:500;font-size:18.5px;color:var(--muted);margin-bottom:20px;line-height:1.6;}
.sva-field{width:100%;background:rgba(255,255,255,0.04)!important;border:.5px solid rgba(212,175,55,0.22)!important;border-radius:2px;color:var(--ivory);font-size:16px;padding:10px 12px;outline:none;margin-bottom:9px;transition:border-color .2s;display:block;}
.sva-field:focus{border-color:rgba(212,175,55,0.55);}
.sva-field::placeholder{color:var(--dim);}
.sva-field option{background:var(--navy);color:var(--ivory);}
.sva-flabel{display:block;font-family:var(--fh);font-size:14px;letter-spacing:1.5px;color:#E4D7BA;text-transform:uppercase;margin-bottom:5px;}
/* Date/Time fields: plain typeable text input (auto-formatted by JS as
   you type — DD-MM-YYYY / HH:MM) plus a small icon that optionally opens
   the browser's native picker, synced back into the text field. Native
   date/time inputs alone were inconsistent across browsers and didn't
   always allow free typing — this keeps typing always available. */
.sva-dt-wrap{position:relative;}
.sva-dt-wrap .sva-field{padding-right:38px;}
.sva-dt-btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;font-size:16.5px;line-height:1;
  padding:6px;color:var(--gold);opacity:.75;transition:opacity .2s;
}
.sva-dt-btn:hover{opacity:1;}
.sva-dt-native{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;opacity:0;pointer-events:none;border:none;padding:0;margin:0;
}
.sva-field.sva-dt-error{border-color:#e44!important;}
#sva-fields-locked:disabled,#sva-fields-locked[disabled]{pointer-events:none;}
#sva-fields-locked{opacity:0.4;}

/* TESTIMONIALS — ALL NAVY, solar system canvas, canvas centered+right inside section */
.sva-testi-sec{
  position:relative;overflow:hidden;
  min-height:440px;display:flex;align-items:center;justify-content:center;
  z-index:2;
  background:#060D1E!important;
}
#sva-planet-canvas{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  display:block;z-index:0;
}
.sva-testi-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,13,30,0.5) 0%,rgba(6,13,30,0.32) 38%,rgba(6,13,30,0.14) 70%,rgba(6,13,30,0) 100%)!important;
}
.sva-testi-body{position:relative;z-index:2;text-align:center;padding:56px 5%;width:100%;max-width:580px;margin:0 auto;margin-left:8%;padding-left:6%;}
.sva-testi-item{opacity:0;position:absolute;inset:0;pointer-events:none;transition:opacity .8s;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 24px;}
.sva-testi-item.active{opacity:1;position:relative;pointer-events:auto;}
.sva-testi-q{font-size:40px;color:var(--gold);opacity:.22;line-height:1;margin-bottom:10px;}
.sva-testi-txt{font-family:var(--fs);font-size:19px;font-style:italic;font-weight:500;color:var(--stone);line-height:1.75;margin-bottom:16px;}
.sva-testi-auth{font-family:var(--fh);font-size:14px;letter-spacing:1.6px;color:var(--gold);}
/* Note under the "Share Your Experience" button — styled like the site's
   other subtitles (.sva-sub): brighter ivory-gold, larger, italic serif,
   instead of the old small muted grey. Colour + size are Customizer-driven
   (Testimonials section) and override these defaults via #sva-cust-css. */
.sva-testi-note{font-family:var(--fs);font-style:italic;font-weight:500;color:#E4D7BA;font-size:17px;line-height:1.6;max-width:460px;margin:12px auto 0;}
.sva-testi-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:12px;}
.sva-testi-arr{background:none;border:.5px solid rgba(212,175,55,0.3);color:var(--gold);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--trans);font-size:15px;}
.sva-testi-arr:hover{background:var(--gold)!important;color:var(--navy);}
.sva-testi-dots{display:flex;gap:7px;}
.sva-testi-dot{position:relative;width:5px;height:5px;border-radius:50%;background:rgba(212,175,55,0.22)!important;border:none;padding:0;cursor:pointer;transition:background .3s;flex-shrink:0;}
.sva-testi-dot::before{content:'';position:absolute;inset:-13px;border-radius:50%;}
.sva-testi-dot.on{background:var(--gold)!important;}

/* BLOG — with hover effects matching service cards */
.sva-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1080px;margin:0 auto;}
.sva-post{
  border:.5px solid rgba(212,175,55,0.14);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;color:inherit;text-decoration:none;
  cursor:pointer;
}
.sva-post-thumb{width:100%;height:148px;object-fit:cover;display:block;transition:transform .5s ease;}
.sva-post:hover .sva-post-thumb{transform:scale(1.07);}
.sva-post-img-wrap{overflow:hidden;}
.sva-post-noimg{width:100%;height:148px;display:block;position:relative;overflow:hidden;}
.sva-post-noimg canvas{position:absolute;inset:0;width:100%;height:100%;}
.sva-post-body{padding:16px 14px 20px;display:flex;flex-direction:column;flex:1;}
.sva-post-cat{font-family:var(--fh);font-size:12.5px;letter-spacing:1.8px;color:var(--post-accent,var(--gold));text-transform:uppercase;margin-bottom:7px;}
.sva-post-h{font-family:var(--fh);font-size:14.5px;color:var(--ivory);letter-spacing:1px;line-height:1.4;margin-bottom:8px;transition:color .3s;}
.sva-post:hover .sva-post-h{color:var(--post-accent,var(--gold));}
/* Same accent palette as the service cards, so colour language is consistent site-wide */
.sva-blog-grid>a:nth-child(6n+1){--post-accent:#D4AF37;}
.sva-blog-grid>a:nth-child(6n+2){--post-accent:#D98C6B;}
.sva-blog-grid>a:nth-child(6n+3){--post-accent:#7FA8C9;}
.sva-blog-grid>a:nth-child(6n+4){--post-accent:#8FAE7D;}
.sva-blog-grid>a:nth-child(6n+5){--post-accent:#B9A6DC;}
.sva-blog-grid>a:nth-child(6n+6){--post-accent:#D9A05B;}
.sva-post-exc{font-size:16.5px;color:#D6CBAE;line-height:1.75;margin-bottom:12px;}
.sva-read{font-family:var(--fh);font-size:13px;letter-spacing:1.6px;color:var(--gold);text-transform:uppercase;align-self:flex-start;margin-top:auto;}

/* BLOG ARCHIVE PAGE */
.sva-blog-page{position:relative;}
#sva-blog-planet-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;}
.sva-blog-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(6,13,30,0.6)!important;}
.sva-blog-content{position:relative;z-index:2;padding:0 5% 56px;}
.sva-arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1080px;margin:0 auto;}
.sva-no-posts{text-align:center;padding:40px 24px;color:var(--muted);font-family:var(--fs);font-style:italic;font-weight:500;font-size:18.5px;}

/* SOCIAL — show logos */
.sva-soc-sec{border-top:.5px solid rgba(212,175,55,0.12)!important;padding:28px 24px;text-align:center;position:relative;z-index:2;}
.sva-soc-sec>p{font-family:var(--fh);font-size:12.5px;letter-spacing:2.6px;color:var(--muted);margin-bottom:14px;text-transform:uppercase;}
.sva-soc-row{display:flex;justify-content:center;gap:12px;}
.sva-soc-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .3s,box-shadow .3s;text-decoration:none;}
.sva-soc-icon:hover{transform:translateY(-4px) scale(1.1);}
.sva-soc-icon svg{width:26px;height:26px;display:block;}

/* FOOTER — compact, reduced height */
.sva-footer{
  border-top:.5px solid rgba(212,175,55,0.14);
  padding:32px 5% 0;position:relative;z-index:2;
}
.sva-ftr-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:28px;padding-bottom:26px;max-width:1100px;margin:0 auto;}
.sva-ftr-logo img{height:64px;width:auto;margin-bottom:10px;}
.sva-ftr-bn{font-family:var(--fh);font-size:15px;color:var(--gold);letter-spacing:1.4px;margin-bottom:8px;}
.sva-ftr-desc{font-size:18px;color:#E4D7BA;line-height:1.7;margin-bottom:12px;font-family:var(--fs);font-style:italic;font-weight:500;}
.sva-ftr-h{font-family:var(--fh);font-size:14px;letter-spacing:2.2px;color:var(--gold);text-transform:uppercase;margin-bottom:10px;padding-bottom:6px;border-bottom:.5px solid rgba(212,175,55,0.1);}
.sva-ftr-links{display:flex;flex-direction:column;gap:6px;}
.sva-ftr-links a{font-size:16px;color:var(--muted);transition:color .2s;}
.sva-ftr-links a:hover{color:var(--stone);}
.sva-ftr-ci{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;}
.sva-ftr-ci-icon{color:var(--gold);font-size:15px;flex-shrink:0;width:15px;text-align:center;line-height:1.5;margin-top:1px;}
.sva-ftr-ci-text{font-size:16px;color:var(--muted);line-height:1.6;overflow-wrap:break-word;}
.sva-ftr-ci-text a{color:var(--muted);font-size:16px;}
.sva-ftr-ci-text a:hover{color:var(--stone);}
.sva-ftr-bot{border-top:.5px solid rgba(212,175,55,0.07);padding:14px 0 16px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:10px;max-width:1100px;margin:0 auto;}
.sva-ftr-copy{font-size:16px;color:var(--stone);letter-spacing:0.6px;text-align:left;margin:0;}
.sva-ftr-legal{display:flex;gap:16px;}
.sva-ftr-legal a{font-size:14.5px;color:var(--stone);transition:color .2s;}
.sva-ftr-legal a:hover{color:var(--gold);}

/* INNER PAGES — reduced page hero height */
.sva-page-hero{padding:90px 5% 40px;text-align:center;position:relative;z-index:2;}
.sva-page-hero .sva-eyebrow{margin-bottom:10px;}
.sva-page-hero h1{font-family:var(--fh);font-size:clamp(18px,2.8vw,30px);color:var(--ivory);letter-spacing:3px;margin-bottom:10px;}
.sva-page-hero p{font-family:var(--fs);font-style:italic;font-weight:500;font-size:19px;color:var(--stone);max-width:480px;margin:0 auto;}
.sva-page-body{max-width:820px;margin:0 auto;padding:0 5% 56px;position:relative;z-index:2;}
.sva-page-body p{color:var(--stone);line-height:1.9;font-size:16.5px;margin-bottom:16px;}
.sva-page-body h2{font-family:var(--fh);font-size:17px;color:var(--gold);letter-spacing:2px;margin:26px 0 10px;}

/* SERVICES full page */
.sva-svcfull-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1080px;margin:0 auto;padding:0 5% 56px;position:relative;z-index:2;perspective:1200px;}
@keyframes svcfAppear{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
.sva-svcf-name{font-family:var(--fh);font-size:15.5px;color:var(--ivory);letter-spacing:1.4px;margin-bottom:8px;}
.sva-svcf-desc{font-family:var(--fs);font-style:italic;font-weight:500;font-size:18px;color:#B9C4D6;line-height:1.55;}
.sva-svcf-price{display:block;font-family:var(--fh);font-size:17px;font-weight:700;color:var(--svc-accent,#D4AF37);letter-spacing:1px;}
.sva-svcf-foot{display:flex;flex-direction:column;align-items:center;margin-top:auto;padding-top:12px;}
/* Services page full cards — PIXEL-FOR-PIXEL identical to homepage .sva-svc */
.sva-svcf{
  position:relative;
  border:.5px solid rgba(212,175,55,0.18);border-radius:4px;border-top:2.5px solid var(--svc-accent,#D4AF37);
  padding:24px 18px 20px;text-align:center;
  display:flex;flex-direction:column;color:inherit;text-decoration:none;
  cursor:pointer;
  background:rgba(20,28,52,0.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
/* Same rotating accent palette as the homepage cards, so the two grids feel consistent */
.sva-svcfull-grid>a:nth-child(6n+1){--svc-accent:#D4AF37;}
.sva-svcfull-grid>a:nth-child(6n+2){--svc-accent:#D98C6B;}
.sva-svcfull-grid>a:nth-child(6n+3){--svc-accent:#7FA8C9;}
.sva-svcfull-grid>a:nth-child(6n+4){--svc-accent:#8FAE7D;}
.sva-svcfull-grid>a:nth-child(6n+5){--svc-accent:#B9A6DC;}
.sva-svcfull-grid>a:nth-child(6n+6){--svc-accent:#D9A05B;}
/* Same bottom-pinning as the homepage cards: this pushes down to fill
   whatever space is left in the column, so "Book Consultation" always
   sits on the same line across every card in a row. */
.sva-svcf-cta{display:inline-block;margin-top:14px;font-size:13.5px;padding:9px 18px;}
.sva-svcf:hover{color:inherit;}
.sva-svcf-icon{font-size:26px;display:block;margin-bottom:10px;color:var(--svc-accent,#D4AF37);transition:transform .4s cubic-bezier(0.34,1.56,0.64,1);}
.sva-svcf:hover .sva-svcf-icon{transform:scale(1.3) rotate(-6deg);}


/* CONTACT page */
.sva-contact-wrap{max-width:1180px;margin:0 auto;padding:0 5% 56px;position:relative;z-index:2;}
.sva-contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;}
/* When UPI-QR is the default (and only) payment method, reserve a middle
   column for the QR code so it sits beside the form instead of stacking
   below it. Present (not collapsed) from page load so its "Step 2" label
   is visible as a roadmap — only the QR content inside is empty at first. */
.sva-contact-grid.sva-qr-layout{grid-template-columns:1.1fr 300px 1fr;gap:40px;}
.sva-qr-col{min-width:0;}
.sva-step-label{
  font-family:var(--fh);font-size:13.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--dim);margin-bottom:10px;border-bottom:1px solid rgba(212,175,55,.15);padding-bottom:8px;
  opacity:.4;transition:opacity .35s ease,color .35s ease;
}
.sva-step-label.sva-step-active{color:var(--gold);opacity:1;border-bottom-color:rgba(212,175,55,.25);}
.sva-ci h3{margin-bottom:16px;}
.sva-cd{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;}
.sva-cd-ic{color:var(--gold);font-size:15px;flex-shrink:0;width:16px;text-align:center;margin-top:1px;line-height:1.5;}
.sva-cd-lbl{font-size:13.5px;letter-spacing:1.6px;color:var(--muted);text-transform:uppercase;margin-bottom:2px;display:block;}
.sva-cd-v{font-size:16px;color:var(--stone);}
.sva-cd-v a{color:var(--stone);font-size:16px;}
.sva-faq-item{border-bottom:.5px solid rgba(212,175,55,0.1);}
.sva-faq-q{padding:11px 0;cursor:pointer;font-size:16px;color:var(--stone);display:flex;justify-content:space-between;align-items:center;gap:12px;transition:color .3s;}
.sva-faq-q:hover{color:var(--ivory);}
.sva-faq-q::after{content:'+';color:var(--gold);font-size:17px;flex-shrink:0;}
.sva-faq-item.open .sva-faq-q::after{content:'-';}
.sva-faq-a{max-height:0;overflow:hidden;padding:0;font-size:16px;color:var(--muted);line-height:1.75;transition:max-height .38s ease,padding .38s ease;}
.sva-faq-item.open .sva-faq-a{padding:0 0 11px;}

/* SINGLE POST */
.sva-single-wrap{max-width:740px;margin:0 auto;padding:110px 5% 60px;position:relative;z-index:2;}
.sva-single-wrap h1{font-family:var(--fh);font-size:clamp(17px,2.6vw,28px);color:var(--ivory);letter-spacing:2px;margin-bottom:10px;}
.sva-single-meta{font-size:16px;color:var(--muted);margin-bottom:28px;}
.sva-single-body{font-family:var(--fs);font-size:19px;font-weight:500;color:var(--stone);line-height:1.85;}
.sva-single-body h2{font-family:var(--fh);font-size:17px;color:var(--gold);margin:28px 0 10px;letter-spacing:2px;}
.sva-single-body p{margin-bottom:16px;}

/* SCROLL REVEAL */
/* Scroll reveal: content always visible, JS adds animation class */
[data-reveal]{transition:opacity .7s cubic-bezier(0.16,1,0.3,1),transform .7s cubic-bezier(0.16,1,0.3,1);}
[data-reveal].sva-in-prep{opacity:0!important;}
[data-reveal="up"].sva-in-prep{transform:translateY(28px);}
[data-reveal="left"].sva-in-prep{transform:translateX(-28px);}
[data-reveal="right"].sva-in-prep{transform:translateX(28px);}
[data-reveal="zoom"].sva-in-prep{transform:scale(0.93);}
[data-reveal].sva-in{opacity:1!important;}
[data-reveal].sva-in:not(.sva-svc):not(.sva-post):not(.sva-svcf){transform:none;}

/* PAGINATION */
.nav-links{display:flex;gap:7px;justify-content:center;padding:24px 0;position:relative;z-index:2;}
.page-numbers{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:.5px solid rgba(212,175,55,0.2);border-radius:2px;font-family:var(--fh);font-size:13.5px;color:var(--muted);transition:var(--trans);}
.page-numbers:hover,.page-numbers.current{border-color:var(--gold);color:var(--gold);}

/* SCROLL TO TOP — refined pill, centered bottom of page, all devices */
#sva-top-btn{
  position:fixed;
  bottom:32px;
  left:50%;
  transform:translateX(-50%) translateY(16px);
  padding:0 22px;
  height:36px;
  border-radius:18px;
  background:rgba(6,13,30,0.88);
  border:1.5px solid rgba(212,175,55,0.7);
  color:#F4D65C;
  font-family:var(--fh);
  font-size:13px;
  letter-spacing:2.2px;
  text-transform:uppercase;
  white-space:nowrap;
  display:flex;align-items:center;gap:7px;
  cursor:pointer;z-index:997;
  opacity:0;pointer-events:none;
  transition:opacity 0.35s,transform 0.35s,background 0.25s,border-color 0.25s;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 4px 24px rgba(0,0,0,0.35);
}
#sva-top-btn.visible{
  opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
#sva-top-btn:hover{
  background:rgba(212,175,55,0.15);
  border-color:rgba(212,175,55,0.9);
}
#sva-top-btn svg{width:16px;height:16px;flex-shrink:0;}

/* RESPONSIVE */
/* MOBILE NAV — full screen overlay, ham visible */
@media(max-width:900px){
  .sva-ham{display:flex!important;} nav.sva-nav{display:none!important;}
  .sva-mob{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(6,13,30,0.97);z-index:9999;flex-direction:column;align-items:center;justify-content:center;gap:22px;}
  .sva-mob.open{display:flex!important;}
  .sva-about-grid,.sva-chart-grid,.sva-contact-grid,.sva-contact-grid.sva-qr-layout,.sva-contact-grid.sva-qr-layout.sva-qr-active{grid-template-columns:1fr;gap:28px;}
  .sva-svc-grid,.sva-blog-grid,.sva-arch-grid{grid-template-columns:1fr 1fr;}
  .sva-counters{grid-template-columns:repeat(3,1fr);}
  .sva-svcfull-grid{grid-template-columns:1fr;}
  /* Hero: kept as a genuine phone-only treatment (≤700px), see below —
     tablets are wide enough for the full centered desktop layout and
     get it restored just after this block. */
  .sva-testi-sec{min-height:360px;}
  #sva-planet-canvas{opacity:0.38!important;}
  .sva-yantra-wrap{max-width:380px;margin:0 auto;}
  .sva-svc{padding:22px 14px 18px;}
  /* Brighter text for tablet */
  .sva-tag,.sva-sub{color:#E8DCC0!important;}
  .sva-svc-name,.sva-svcf-name,.sva-post-h{color:#FFFFFF!important;}
  .sva-about-text p,.sva-about-list li{color:#E4D7BA!important;}
  .sva-svc,.sva-svcf,.sva-post{border-color:rgba(212,175,55,0.42)!important;}
  .sva-svc,.sva-svcf{border-top-color:var(--svc-accent,#D4AF37)!important;}
  /* Footer 2-col centered */
  .sva-ftr-grid{grid-template-columns:1fr 1fr;gap:20px;}
  .sva-ftr-grid>*{text-align:center;}
  .sva-ftr-logo{display:flex;flex-direction:column;align-items:center;}
  .sva-ftr-links{align-items:center;}
  .sva-ftr-ci{justify-content:center;}
  .sva-soc-row{justify-content:center;}
}

/* TABLET HERO (701–900px) — the screen is plenty wide for the full
   desktop-style centered hero (wheel behind, logo/title/tagline
   floating centered on top). The bottom-anchored, gradient-cropped
   phone treatment above (min-height:100svh; align-items:flex-end) was
   being forced on tablets too, which is what looked cramped/cut off.
   These rules restore the desktop hero geometry at tablet width. */
@media(min-width:701px) and (max-width:900px){
  .sva-hero{min-height:100vh;align-items:center;padding-bottom:0;}
  #sva-zodiac-canvas{position:absolute!important;inset:0!important;top:0!important;left:0!important;right:auto!important;bottom:auto!important;transform:none!important;width:100%!important;height:100%!important;}
  .sva-hero-body{position:relative;z-index:2;margin-top:0;background:none;padding:40px 24px;max-width:660px;width:auto;border-radius:0;}
  .sva-hero-logo img{height:100px;}
  .sva-svc-grid,.sva-svcfull-grid{grid-template-columns:1fr 1fr!important;}
}

@media(max-width:700px){
  /* The bottom-anchored, gradient-cropped hero — genuinely phone-only now
     (tablets get the desktop-style centered hero, restored above). */
  .sva-hero{min-height:100svh;align-items:flex-end;padding-bottom:32px;}
  #sva-zodiac-canvas{position:absolute!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:100vw!important;height:100vw!important;}
  .sva-hero-body{position:relative;z-index:3;margin-top:auto;background:linear-gradient(0deg,rgba(6,13,30,0.95) 65%,rgba(6,13,30,0) 100%)!important;padding:28px 20px 16px;max-width:100%;width:100%;border-radius:0;}
  .sva-hero-logo img{height:80px;}
}

@media(max-width:600px){
  #sva-hdr{padding:0 14px;}
  .sva-svc-grid,.sva-blog-grid,.sva-arch-grid,.sva-svcfull-grid{grid-template-columns:1fr;}
  .sva-hero{flex-direction:column;align-items:center;padding-top:0;min-height:100svh;}
  #sva-zodiac-canvas{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;display:block;width:100vw!important;height:100vw!important;flex-shrink:0;margin:0 auto;}
  .sva-hero-body{width:100%;padding:18px 16px 16px;background:linear-gradient(0deg,rgba(6,13,30,0.9) 55%,rgba(6,13,30,0) 100%)!important;margin-top:-8px;}
  .sva-hero-logo img{height:64px;}
  .sva-h1{font-size:clamp(18px,5vw,26px);}
  .sva-tag{font-size:16px;color:#E8DCC0!important;}
  .sva-hero-btns{flex-direction:column;align-items:center;gap:10px;}
  .sva-btn-g,.sva-btn-o{width:100%;text-align:center;box-sizing:border-box;}
  .sva-counters{grid-template-columns:repeat(3,1fr);}
  .sva-cn{font-size:20px;}
  /* Brighter colors mobile */
  .sva-stone,.sva-muted,p.sva-sub,p.sva-tag,.sva-svc-desc,.sva-svcf-desc,.sva-post-exc,.sva-testi-txt,.sva-about-text p,.sva-about-list li,.sva-single-body{color:#E8DCC0!important;}
  .sva-h2,.sva-svc-name,.sva-svcf-name,.sva-post-h{color:#F5F0E8!important;}
  .sva-svc,.sva-svcf,.sva-post{border-color:rgba(212,175,55,0.48)!important;}
  .sva-svc,.sva-svcf{border-top-color:var(--svc-accent,#D4AF37)!important;}
  .sva-cl,.sva-eyebrow{color:var(--gold)!important;}
  /* Zodiac wheel — brighter constellation stars handled in JS */
  .sva-yantra-wrap{max-width:280px;margin:0 auto 20px;}
  .sva-testi-sec{min-height:auto;padding:28px 0;}
  .sva-testi-body{margin-left:0;padding:22px 18px;}
  .sva-testi-txt{font-size:16px;color:#E8DCC0!important;}
  .sva-contact-grid,.sva-contact-grid.sva-qr-layout,.sva-contact-grid.sva-qr-layout.sva-qr-active{grid-template-columns:1fr;}
  .sva-ftr-grid{grid-template-columns:1fr;gap:16px;}
  .sva-ftr-grid>*{text-align:center;}
  .sva-ftr-logo{display:flex;flex-direction:column;align-items:center;}
  .sva-ftr-links{align-items:center;}
  .sva-ftr-ci{justify-content:center;}
  .sva-ftr-bot{flex-direction:column;justify-content:center;align-items:center;gap:8px;padding-left:4%;padding-right:4%;}
  .sva-ftr-copy{text-align:center;}
  .sva-ftr-legal{justify-content:center;}
  .sva-page-hero{padding:80px 5% 28px;}
  .sva-sec{padding:40px 4%;}
  .sva-svcfull-grid{padding:0 4% 40px;}
  #sva-wa-float{bottom:70px;right:14px;width:48px;height:48px;}
  #sva-top-btn{bottom:24px;}
}
#sva-wa-float{
  position:fixed;
  bottom:80px;right:24px;
  width:56px;height:56px;
  background:transparent;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#25D366;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  z-index:998;
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
#sva-wa-float:hover{transform:scale(1.15);}
@media(max-width:600px){
  #sva-wa-float{bottom:70px;right:16px;width:50px;height:50px;}
}

/* GTranslate (flag/EN switcher) has no positioning of its own from the
   plugin's default. Pin it to the opposite (left) corner from the
   WhatsApp float so the two never collide. Covers the common GTranslate
   wrapper class names across versions. */
@media(max-width:900px){
  .gtranslate_wrapper,.gt_float_switcher,#gtranslate_wrapper,.gt-widget-wrapper{
    position:fixed!important;left:10px!important;right:auto!important;
    bottom:16px!important;top:auto!important;z-index:901!important;
  }
}

/* ============================================================
   FIXES v4 — header behavior + repairs for the "NUCLEAR reset"
   ============================================================ */

/* 1. HEADER — control now lives ONLY in main.js, which runs the same
   code on every page (the homepage-only hero branch was removed there;
   it was the cause of the stuck-halfway header on mobile). Below:
   restore the shown header's background (the nuclear reset above
   wipes it) and use a shorter mobile transition so heavy home-page
   canvases can't make the slide look stuck. */
#sva-hdr.sva-show{
  background:rgba(6,13,30,0.96)!important;
  backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;
}

/* 2. HAMBURGER — the "NUCLEAR" reset at the top of this file sets
   background:transparent!important on ALL spans, which painted the
   3 bars invisible (the button was there — tapping worked — the bars
   just had no color). Restore them with !important. */
.sva-ham span{background:var(--gold)!important;}
@media(max-width:900px){
  .sva-ham{display:flex!important;visibility:visible!important;opacity:1!important;}
}

/* 3. MOBILE MENU overlay — transparent for the same reason (`nav` is
   in the nuclear reset), which is why the site showed through behind
   the open menu. Restore a near-opaque backdrop. */
.sva-mob{background:rgba(6,13,30,0.98)!important;}
.sva-mob.open{display:flex!important;}

/* 4. Capsule back-to-top: restore its pill background too */
#sva-top-btn{background:rgba(6,13,30,0.88)!important;}
#sva-top-btn:hover{background:rgba(212,175,55,0.15)!important;}

/* 5. Remove the OLD/duplicate back-to-top widget on mobile — only the
   capsule (#sva-top-btn) stays. Covers the common theme/plugin IDs. */
@media(max-width:900px){
  #toTop,#totop,#back-to-top,.back-to-top,#backtotop,.backtotop,
  #scroll-top,.scroll-top,.scroll-to-top,#scrollup,.scrollup,
  #ast-scroll-top,#wpfront-scroll-top-container,.smoothscroll-top,
  #go-top,.go-top,.to-top,#sva-totop,.sva-totop,#sva-back-top,
  /* wildcard net: any plugin/theme top-button naming we haven't listed,
     but NEVER our capsule */
  [id*="scrolltop" i]:not(#sva-top-btn),
  [class*="scrolltop" i]:not(#sva-top-btn),
  [id*="backtotop" i]:not(#sva-top-btn),
  [class*="backtotop" i]:not(#sva-top-btn),
  [class*="back-to-top" i]:not(#sva-top-btn),
  [id*="back-to-top" i]:not(#sva-top-btn),
  [class*="scroll-to-top" i]:not(#sva-top-btn){
    display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;
  }
}

/* 7. FORM FIELDS (birth chart section + contact page) were illegible:
   placeholders used --dim (#3A3020, nearly invisible on navy) and the
   boxes were barely outlined. Brighter background, border, placeholder
   and label. On mobile, 16px font also stops iOS zooming into fields. */
.sva-field{
  background:rgba(255,255,255,0.09)!important;
  border:1px solid rgba(212,175,55,0.5)!important;
  color:var(--ivory)!important;
  font-size:15px!important;
}
.sva-field:focus{border-color:rgba(212,175,55,0.9)!important;background:rgba(255,255,255,0.12)!important;}
/* Placeholders — .sva-ph is the placeholder span inside the custom
   Service / Gender dropdown boxes, so it always matches the real
   input placeholders. Desktop & tablet: dimmer but clearly readable.
   Phones (<=600px): brighter for small-screen legibility.
   (When a value is chosen, JS sets an inline ivory color on the span,
   which correctly overrides the non-!important .sva-ph rule.) */
.sva-field::placeholder{color:#988B6F!important;opacity:1!important;}
.sva-ph{color:#988B6F;}
/* DATE & TIME FIELDS — the native "dd-mm-yyyy" / "--:--" hint text and
   the calendar/clock icon are drawn by the browser, not by CSS
   placeholder rules, so they were inconsistently grey/near-invisible
   depending on device. Forced to match the same muted-gold placeholder
   tone as every other field, with the same brighter mobile variant. */
input.sva-field[type="date"],input.sva-field[type="time"]{color-scheme:dark;}
input.sva-field[type="date"]::-webkit-datetime-edit,
input.sva-field[type="date"]::-webkit-datetime-edit-fields-wrapper,
input.sva-field[type="date"]::-webkit-datetime-edit-text,
input.sva-field[type="date"]::-webkit-datetime-edit-month-field,
input.sva-field[type="date"]::-webkit-datetime-edit-day-field,
input.sva-field[type="date"]::-webkit-datetime-edit-year-field,
input.sva-field[type="time"]::-webkit-datetime-edit,
input.sva-field[type="time"]::-webkit-datetime-edit-fields-wrapper,
input.sva-field[type="time"]::-webkit-datetime-edit-text,
input.sva-field[type="time"]::-webkit-datetime-edit-hour-field,
input.sva-field[type="time"]::-webkit-datetime-edit-minute-field,
input.sva-field[type="time"]::-webkit-datetime-edit-ampm-field{
  color:#988B6F!important;
}
input.sva-field[type="date"]:focus::-webkit-datetime-edit-month-field,
input.sva-field[type="date"]:focus::-webkit-datetime-edit-day-field,
input.sva-field[type="date"]:focus::-webkit-datetime-edit-year-field,
input.sva-field[type="time"]:focus::-webkit-datetime-edit-hour-field,
input.sva-field[type="time"]:focus::-webkit-datetime-edit-minute-field{
  color:var(--ivory)!important; /* once a real value is picked, read clearly */
}
input.sva-field[type="date"]::-webkit-calendar-picker-indicator,
input.sva-field[type="time"]::-webkit-calendar-picker-indicator{
  filter:invert(70%) sepia(28%) saturate(500%) hue-rotate(1deg) brightness(95%);
  opacity:0.85;cursor:pointer;
}
@media(max-width:600px){
  input.sva-field[type="date"]::-webkit-datetime-edit,
  input.sva-field[type="date"]::-webkit-datetime-edit-fields-wrapper,
  input.sva-field[type="date"]::-webkit-datetime-edit-text,
  input.sva-field[type="date"]::-webkit-datetime-edit-month-field,
  input.sva-field[type="date"]::-webkit-datetime-edit-day-field,
  input.sva-field[type="date"]::-webkit-datetime-edit-year-field,
  input.sva-field[type="time"]::-webkit-datetime-edit,
  input.sva-field[type="time"]::-webkit-datetime-edit-fields-wrapper,
  input.sva-field[type="time"]::-webkit-datetime-edit-text,
  input.sva-field[type="time"]::-webkit-datetime-edit-hour-field,
  input.sva-field[type="time"]::-webkit-datetime-edit-minute-field,
  input.sva-field[type="time"]::-webkit-datetime-edit-ampm-field{
    color:#CDBFA2!important;
  }
}
@media(max-width:600px){
  .sva-field::placeholder{color:#CDBFA2!important;}
  .sva-ph{color:#CDBFA2;}
}
.sva-field option{background:#0B1428!important;color:var(--ivory)!important;}
.sva-flabel{color:#D8C9A3!important;font-size:13.5px!important;font-weight:600;}
/* Trust note — sits directly above both booking submit buttons */
.sva-trust-note{
  font-family:var(--fh);font-size:13.5px;letter-spacing:0.6px;
  color:#C9BB9E;text-align:center;margin:12px 0 10px;line-height:1.7;
}
@media(max-width:600px){
  .sva-trust-note{font-size:14.5px;color:#E4D7BA;}
}
/* Required-fields explanation shown at the top of both booking forms */
.sva-req-note{
  font-family:var(--fh);font-size:14.5px;letter-spacing:1.2px;
  color:#D8CBA8;margin:0 0 12px;line-height:1.6;
}
@media(max-width:600px){
  .sva-req-note{font-size:14.5px;color:#D8CBA8;}
}
@media(max-width:900px){
  .sva-field{font-size:17px!important;padding:11px 13px!important;}
  .sva-flabel{font-size:14px!important;color:#E4D7BA!important;}
}

/* 9. TINY ROTATING GALAXIES — decorative, side gutters only
   (About / Blog / Services; injected by js/sva-galaxies.js) */
.sva-galaxy{
  position:absolute;z-index:1;pointer-events:none;
  opacity:.85;filter:drop-shadow(0 0 18px rgba(80,110,200,.12));
}
@media(max-width:1024px){
  .sva-galaxy{opacity:.28;filter:none;}
}
.sva-galaxy svg{display:block;width:100%;height:100%;}
.sva-galaxy-rot{transform-origin:100px 100px;animation:svaGalaxySpin 26s linear infinite;}
.sva-galaxy-tilt svg{transform:rotate(-16deg) scaleY(.62);}
@keyframes svaGalaxySpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sva-galaxy-rot{animation:none;}}

/* 9b. SMALL GOLD SRI YANTRA — About page hero, just before the H1.
   Theme-gold at half opacity. NOTE: it must NOT carry data-reveal —
   the reveal system ends every animation with opacity:1!important,
   which was snapping it back to full brightness after page load. */
.sva-page-yantra{
  width:62px;height:62px;
  margin:2px auto 14px;
  background-color:var(--gold, #D4AF37)!important;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  opacity:.5!important;
  filter:none;
}
@media(max-width:600px){
  /* phones: a touch brighter than the desktop .5 — still subtle */
  .sva-page-yantra{width:50px;height:50px;opacity:.68!important;}
}

/* Radio pills — deliverable & language selectors on the booking forms.
   Backgrounds carry !important deliberately: the nuclear reset at the
   top of this file strips background from * with !important. */
.sva-radio-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.sva-radio-caption{
  font-family:var(--fh);font-size:13.5px;letter-spacing:1.8px;
  text-transform:uppercase;color:#DCCFAE;margin-right:2px;
}
.sva-radio-pill{cursor:pointer;display:inline-block;}
.sva-radio-pill input{position:absolute;opacity:0;pointer-events:none;}
.sva-radio-pill span,.sva-check-pill span{
  display:inline-block;padding:9px 16px;border-radius:2px;
  border:1px solid rgba(212,175,55,0.35);
  background:rgba(6,13,30,0.6)!important;
  color:#E0D3AE;font-family:var(--fs);font-weight:500;font-size:17px;
  transition:background .25s,color .25s,border-color .25s;
  line-height:1;
}
.sva-radio-pill:hover span,.sva-check-pill:hover span{border-color:rgba(212,175,55,0.7);color:var(--ivory);}
.sva-radio-pill input:checked+span,.sva-check-pill input:checked+span{
  background:#D4AF37!important;color:#060D1E!important;
  border-color:#D4AF37;font-weight:600;
}
.sva-radio-pill input:focus-visible+span,.sva-check-pill input:focus-visible+span{outline:2px solid rgba(212,175,55,0.6);outline-offset:2px;}
.sva-check-pill{cursor:pointer;display:inline-block;}
.sva-check-pill input{position:absolute;opacity:0;pointer-events:none;}
.sva-field-note{
  font-family:var(--fs);font-style:italic;font-weight:500;font-size:18px;
  color:#E0D3AE;margin:2px 0 8px;line-height:1.6;
}
@media(max-width:600px){
  .sva-radio-pill span,.sva-check-pill span{padding:11px 15px;font-size:16px;}
  .sva-field-note{color:#D4C6A5;font-size:15px;}
}

/* 9c. FOUNDER / TRUST BLOCK — About page */
.sva-founder{
  display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center;
  border:1px solid rgba(212,175,55,0.28);border-radius:4px;
  padding:22px 26px;margin:0 0 44px;
}
.sva-founder-col{display:flex;flex-direction:column;align-items:center;gap:12px;}
.sva-founder-photo{
  width:150px;height:150px;border-radius:50%;overflow:hidden;
  border:1px solid rgba(212,175,55,0.55);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 26px rgba(212,175,55,0.15);
}
.sva-founder-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.sva-founder-mono{
  font-size:50px;color:rgba(212,175,55,0.75);line-height:1;
  font-family:Georgia,serif;
}
.sva-founder-name{
  font-family:var(--fh);font-size:clamp(15px,1.9vw,20px);
  color:var(--ivory);letter-spacing:2px;margin:0 0 5px;text-align:left;
}
.sva-founder-cred{
  font-family:var(--fh);font-size:13px;letter-spacing:1.5px;
  color:var(--gold);text-transform:uppercase;margin:0 0 11px;
}
.sva-founder-bio{
  font-family:var(--fs)!important;font-style:italic!important;font-weight:500!important;font-size:18px!important;
  color:#B9C4D6!important;line-height:1.6!important;margin:0!important;
}
/* "Watch Introduction" — sits under the photo, opens the modal below */
.sva-founder-video-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:transparent;border:1px solid rgba(212,175,55,0.5);border-radius:20px;
  color:var(--gold);font-family:var(--fh);font-size:11px;letter-spacing:1.1px;
  text-transform:uppercase;padding:8px 14px;cursor:pointer;
  transition:background .25s,border-color .25s;
  max-width:150px;width:100%;box-sizing:border-box;text-align:center;white-space:normal;line-height:1.4;
}
.sva-founder-video-btn:hover{background:rgba(212,175,55,0.12)!important;border-color:rgba(212,175,55,0.8);}
.sva-founder-play{font-size:9px;}
/* Video modal — hidden by default; JS toggles .open and injects the iframe */
.sva-video-modal{
  position:fixed;inset:0;z-index:9999;
  background:rgba(4,8,18,0.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .3s ease;padding:5vw;
}
.sva-video-modal.open{opacity:1;visibility:visible;}
.sva-video-modal-inner{position:relative;width:100%;max-width:860px;}
.sva-video-modal-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000!important;border-radius:4px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.6);}
.sva-video-modal-frame iframe,.sva-video-modal-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000!important;}
.sva-video-err{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:30px 34px;color:var(--ivory);font-family:var(--fb);font-size:15px;line-height:1.7;
  text-align:left;overflow-y:auto;
}
.sva-video-err strong{color:#e0554d;}
.sva-video-modal-close{
  position:absolute;top:-38px;right:0;background:none;border:none;
  color:var(--ivory);font-size:26px;line-height:1;cursor:pointer;padding:4px 8px;
}
.sva-video-modal-close:hover{color:var(--gold);}
@media(max-width:700px){
  .sva-founder{grid-template-columns:1fr;text-align:center;gap:16px;padding:20px 18px;}
  .sva-founder-photo{margin:0 auto;width:120px;height:120px;}
  .sva-founder .sva-eyebrow,.sva-founder-name{text-align:center!important;}
  .sva-founder-bio{color:#B9C4D6!important;font-size:17px!important;font-weight:500!important;}
  .sva-video-modal-close{top:-34px;}
}

/* AWARDS & RECOGNITION SLIDER — dark, elegant framing: soft gold glow
   instead of a hard border, a subtle vignette over each photo so mixed
   source photos (bright backgrounds, phone snapshots, scan of a
   certificate) all read as belonging to the same dark theme, and a
   simple caption line underneath rather than an overlay (keeps text
   legible regardless of the photo behind it). Swipe on touch, click
   arrows/dots on desktop. */
.sva-awd-wrap{
  margin:0 0 48px;text-align:center;
  /* Full-bleed breakout on the OUTER wrap only — .sva-page-body caps
     the text column at 820px, which was silently overriding the Max
     Width Customizer setting no matter how high it was set. This lets
     the slider's available space extend past that 820px ceiling.
     Safe because body already has overflow-x:hidden. The track below
     then pulls itself back in to the configured size, so slides stay
     a contained card rather than stretching edge-to-edge. */
  width:100vw;max-width:100vw;
  position:relative;left:50%;right:50%;
  margin-left:-50vw;margin-right:-50vw;
}
.sva-awd-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  gap:0;margin:6px auto 0;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* Hug the configured slide size (+ a little breathing room) instead
     of stretching to the full-bleed wrap's viewport width — this is
     what keeps each slide feeling like a contained card. */
  max-width:calc(var(--awd-maxw,460px) + 80px);
}
.sva-awd-track::-webkit-scrollbar{display:none;}
.sva-awd-slide{
  flex:0 0 100%;scroll-snap-align:center;
  display:flex;flex-direction:column;align-items:center;
  padding:0 6px;
}
.sva-awd-img{
  width:100%;max-width:var(--awd-maxw,460px);aspect-ratio:var(--awd-ratio,3/4);
  border-radius:6px;overflow:hidden;position:relative;
  border:1px solid rgba(212,175,55,0.35);
  box-shadow:0 0 30px rgba(212,175,55,0.14);
  background:#0B1428!important;
}
.sva-awd-img img{width:100%;height:100%;object-fit:contain;display:block;}
.sva-awd-img::after{
  /* soft vignette so mismatched source photos blend into the dark theme */
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 50px 12px rgba(6,13,30,0.55);
}
.sva-awd-cap{
  font-family:var(--fs);font-style:italic;font-weight:500;font-size:17.5px;
  color:var(--stone);margin:14px 0 0;max-width:var(--awd-maxw,460px);
}
.sva-awd-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px;}
.sva-awd-arrow{
  background:transparent;border:1px solid rgba(212,175,55,0.4);border-radius:50%;
  width:34px;height:34px;color:var(--gold);font-size:18px;line-height:1;
  cursor:pointer;transition:background .25s,border-color .25s;
}
.sva-awd-arrow:hover{background:rgba(212,175,55,0.12)!important;border-color:rgba(212,175,55,0.7);}
.sva-awd-dots{display:flex;gap:7px;}
.sva-awd-dot{position:relative;width:7px;height:7px;border-radius:50%;border:none;background:rgba(212,175,55,0.25)!important;cursor:pointer;padding:0;flex-shrink:0;}
.sva-awd-dot::before{content:'';position:absolute;inset:-13px;border-radius:50%;}
.sva-awd-dot.active{background:var(--gold)!important;}
@media(max-width:700px){
  .sva-awd-cap{color:#E4D7BA;font-size:16px;}
}

/* ABOUT PAGE VISUAL ANCHORS — breaks up the long philosophy text with
   an occasional photo, same dark-elegant framing as the awards slider. */
.sva-abt-visual{margin:32px 0;text-align:center;}
.sva-abt-visual img{
  width:100%;max-height:420px;object-fit:cover;border-radius:6px;
  border:1px solid rgba(212,175,55,0.3);
  box-shadow:0 0 30px rgba(212,175,55,0.12);
  display:block;
}
.sva-abt-visual figcaption{
  font-family:var(--fs);font-style:italic;font-weight:500;font-size:17.5px;
  color:var(--muted);margin-top:10px;
}
@media(max-width:700px){
  .sva-abt-visual img{max-height:280px;}
  .sva-abt-visual figcaption{color:#C4B49A;}
}

/* MODERN & INTUITIVE READINGS — a quieter, clearly-labelled subsection so
   Tarot is never visually shoulder-to-shoulder with classical Jyotisha. */
.sva-modern-sub{text-align:center;margin-top:44px;padding-top:30px;border-top:.5px solid rgba(212,175,55,0.15);}
/* Tarot card sits alone but must be the SAME rectangle as a single card
   in the 3-col services grid above — so its width tracks one grid column
   at every breakpoint (3-col > 900px, 2-col 601–900px, 1-col ≤600px),
   centred via flex, instead of a fixed 350px that looked squished. */
.sva-modern-grid2{max-width:1080px;margin:0 auto;display:flex;justify-content:center;}
.sva-modern-grid2 > .sva-svc{width:calc((100% - 28px)/3);}
@media(max-width:900px){ .sva-modern-grid2 > .sva-svc{width:calc((100% - 14px)/2);} }
@media(max-width:600px){ .sva-modern-grid2 > .sva-svc{width:100%;} }
.sva-modern-tag{
  font-family:var(--fh);font-size:14.5px;letter-spacing:2.8px;text-transform:uppercase;
  color:#C4B0E8;margin-bottom:18px;
}
.sva-svc-modern,.sva-svcf-modern{
  border-color:rgba(156,135,196,0.35)!important;border-top-color:rgba(156,135,196,0.7)!important;
}
.sva-svc-modern .sva-svc-price,.sva-svcf-modern .sva-svcf-price,
.sva-svc-modern .sva-svc-icon,.sva-svcf-modern .sva-svcf-icon{color:#B9A6DC!important;}
/* End-of-blog-post CTA */
.sva-post-cta{
  margin-top:40px;padding:26px 24px;text-align:center;
  border:1px solid rgba(212,175,55,0.3);border-radius:4px;
  background:rgba(212,175,55,0.04);
}
.sva-post-cta p{
  font-family:var(--fs);font-style:italic;font-weight:500;font-size:19px;
  color:var(--stone);margin:0 0 16px;
}
/* Deliverable clarification, directly under every price */
.sva-svc-incl,.sva-svcf-incl{
  font-family:var(--fs);font-style:italic;font-weight:500;font-size:17.5px;
  color:#E8DCC0;margin:5px 0 0;line-height:1.65;
}
.sva-svc-modern:hover,.sva-svcf-modern:hover{border-color:rgba(156,135,196,0.6)!important;}
.sva-svcf-modern .sva-btn-o,.sva-svc-modern .sva-btn-o{border-color:rgba(156,135,196,0.55)!important;color:#B9A6DC!important;}
.sva-svcf-modern .sva-btn-o:hover,.sva-svc-modern .sva-btn-o:hover{background:rgba(156,135,196,0.12)!important;}

/* IN-PAGE JUMP NAV — homepage only. Minimal floating dots on the
   right edge (desktop); the currently-visible section's dot glows
   gold and expands to show its label. On touch devices this becomes
   a horizontal row along the bottom edge instead — small side dots
   are hard to tap accurately with a thumb, so the layout adapts
   rather than just shrinking. */
.sva-jumpnav{
  position:fixed;top:50%;right:22px;transform:translateY(-50%);
  z-index:900;display:flex;flex-direction:column;gap:14px;
  pointer-events:none; /* re-enabled per-dot below */
}
.sva-jumpdot{
  pointer-events:auto;
  position:relative;display:flex;align-items:center;justify-content:flex-end;
  width:9px;height:9px;border-radius:50%;
  background:rgba(212,175,55,0.2);border:1px solid rgba(212,175,55,0.5);
  transition:background .25s,border-color .25s,box-shadow .25s,transform .25s;
  transform-origin:center;
  text-decoration:none;
}
.sva-jumpdot::before{content:'';position:absolute;inset:-13px;border-radius:50%;}
/* HOVER (and keyboard focus) — zoom + brighten the outline only.
   Not yet selected, so it should NOT fill solid. */
.sva-jumpdot:hover,.sva-jumpdot:focus-visible{
  border-color:var(--gold);background:rgba(212,175,55,0.35);
  box-shadow:0 0 8px rgba(212,175,55,0.4);
  transform:scale(1.6);
}
/* ACTIVE — the section we're currently in (via scroll) or just
   clicked/tapped. This is the only state that fills solid. */
.sva-jumpdot.active{
  background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 12px rgba(212,175,55,0.8);
  transform:scale(1.6);
}
.sva-jumpdot:active{transform:scale(1.3);} /* the instant of a click/tap itself */
.sva-jumpdot-label{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-family:var(--fh);font-size:12.5px;letter-spacing:1.2px;white-space:nowrap;
  color:var(--ivory);background:rgba(6,13,30,0.9);
  padding:5px 10px;border-radius:2px;border:1px solid rgba(212,175,55,0.25);
  opacity:0;visibility:hidden;transition:opacity .2s;pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
  .sva-jumpdot:hover .sva-jumpdot-label{opacity:1;visibility:visible;}
}
/* Touch devices: shown briefly via JS-added class on tap (see main.js),
   not via :hover — touch browsers simulate a "stuck" hover state on tap
   that CSS alone has no way to release. */
.sva-jumpdot.sva-label-flash .sva-jumpdot-label{opacity:1;visibility:visible;transition:opacity .2s;}
@media(max-width:900px){
  /* Touch-friendly sizing only — same vertical dot style as desktop,
     no more horizontal capsule bar (that used to occupy the bottom
     edge of the screen full-width and collide with other floating
     elements there). Dots stay at the right edge, larger tap targets. */
  .sva-jumpnav{gap:18px;right:14px;}
  .sva-jumpdot{
    width:16px!important;height:16px!important;
    min-height:0!important;max-height:16px!important;
    flex-shrink:0;
    background:rgba(212,175,55,0.38)!important;
    border-color:var(--gold)!important;
    box-shadow:0 0 8px rgba(212,175,55,0.45);
  }
  .sva-jumpdot.active{
    box-shadow:0 0 16px rgba(212,175,55,0.95);
  }
  .sva-jumpdot::before{inset:-16px;}
  .sva-jumpdot-label{font-size:13.5px;padding:6px 10px;}
}

/* 10. CARD READABILITY — service cards had NO background, so the
   star field ran straight through the text. Frosted navy panel
   (with graceful fallback where backdrop-filter is unsupported). */
.sva-svc,.sva-svcf{
  background:rgba(9,16,34,0.72)!important;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.sva-svc:hover,.sva-svcf:hover{background:rgba(13,22,44,0.82)!important;}

/* 11. MOBILE HEADER — same hide/show-on-scroll behavior as desktop
   (per request): hidden on landing, drops down on scroll, slides back
   up at the top. Position is controlled ONLY by the v6 script in
   header.php; this block just keeps the shown header's backdrop. */
@media(max-width:900px){
  #sva-hdr.sva-show{
    background:rgba(6,13,30,0.96)!important;
    backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
    border-bottom:.5px solid rgba(212,175,55,0.15);
  }
}

/* 12. MOBILE MENU — compact dropdown under the header instead of a
   full-screen takeover: only as tall as its items, tighter spacing,
   page remains visible below it. */
@media(max-width:900px){
  .sva-mob{
    position:fixed!important;
    top:60px!important;bottom:auto!important;left:0!important;right:0!important;
    height:auto!important;min-height:0!important;
    padding:12px 0 16px!important;gap:6px!important;
    justify-content:flex-start!important;
    background:rgba(6,13,30,0.98)!important;
    border-bottom:.5px solid rgba(212,175,55,0.3);
    box-shadow:0 14px 34px rgba(0,0,0,0.5);
  }
  .sva-mob a{font-size:14.5px!important;padding:6px 0;letter-spacing:2.5px;}
  .sva-mob .sva-btn-g{margin-top:8px!important;}
  .sva-mob-x{top:8px!important;right:14px!important;font-size:17px!important;}
}

/* 6. While the mobile menu is open, hide the WhatsApp float and the
   back-to-top button. GTranslate is intentionally NOT touched — it
   stays visible at all times.
   Note: #sva-wa-float uses inline display:flex!important, so we hide
   via visibility/opacity (not set inline), which stylesheet rules win. */
body.sva-menu-open #sva-wa-float,
body.sva-menu-open #sva-top-btn,
body:has(.sva-mob.open) #sva-wa-float,
body:has(.sva-mob.open) #sva-top-btn{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
/* ============================================================
   APP-LIKE POLISH — MOBILE & TABLET ONLY (≤1024px)
   Desktop (>1024px) is completely untouched by this block; every
   rule below lives inside this single media query. Goal: the site
   should feel like a native mobile/tablet app — comfortable tap
   targets, no accidental double-tap zoom, no iOS input auto-zoom,
   no horizontal overflow/jank, smoother native-feeling scrolling,
   and safe-area padding for notches / home-indicator bars.
   ============================================================ */
@media(max-width:1024px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
  html,body{overflow-x:hidden;max-width:100%;}
  *{-webkit-tap-highlight-color:transparent;}
  body{-webkit-touch-callout:default;scroll-behavior:smooth;}

  /* Comfortable native-app tap targets (Apple/Google both recommend
     ≥44px). Applied broadly to interactive elements without
     overriding their existing colors/typography.
     .sva-jumpdot is intentionally excluded: it's a small round
     indicator whose real hit area is the invisible ::before
     (inset:-13px) halo around it, not the visible dot itself — giving
     the dot itself a 44px min-height stretched it into an oval. */
  a:not(.sva-jumpdot),button:not(.sva-testi-dot):not(.sva-awd-dot),.sva-btn-g,.sva-btn-o,.sva-nav-cta,.sva-faq-q,.page-numbers,
  .sva-mob a,.sva-ham,.sva-mob-x,.sva-testi-arr,.sva-awd-arrow,
  #sva-wa-float,#sva-top-btn{
    min-height:44px;
  }
  .sva-testi-arr,.sva-awd-arrow{min-width:44px;width:44px;height:44px;}
  .sva-btn-g,.sva-btn-o,.sva-nav-cta{
    min-height:46px;display:inline-flex;align-items:center;justify-content:center;
  }
  .sva-ham{min-width:44px;justify-content:center;}
  .page-numbers{min-width:44px;}

  /* Prevent iOS Safari auto-zoom-on-focus (triggers below 16px). This
     only changes the mobile/tablet computed size — desktop keeps its
     own 15px via the un-media-queried rule above. */
  .sva-field,input,select,textarea{font-size:17px!important;}

  /* Native-app style momentum scrolling for any internal scroll areas */
  .sva-mob,.sva-contact-grid,.sva-faq-a{-webkit-overflow-scrolling:touch;}

  /* Safe-area padding so content/floating buttons never sit under a
     notch, dynamic island, or the home-indicator bar. */
  #sva-hdr{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));}
  #sva-wa-float{right:max(16px,env(safe-area-inset-right));}
  #sva-top-btn{bottom:max(24px,env(safe-area-inset-bottom));}
  .sva-jumpnav{right:max(12px,env(safe-area-inset-right));}
  .sva-ftr-bot{padding-bottom:max(10px,env(safe-area-inset-bottom));}

  /* Slightly larger base line-height/readability for touch reading
     distance, and remove any residual desktop hover-only affordances
     that don't make sense with touch (hover glow stays, just isn't
     the only feedback — :active gives instant tap feedback instead). */
  body{line-height:1.8;}
  a:active,button:active,.sva-btn-g:active,.sva-btn-o:active,.sva-svc:active,.sva-svcf:active{
    opacity:0.85;
  }

  /* Cards/sections: consistent comfortable side padding so nothing
     ever touches the screen edge on narrow devices. */
  .sva-sec,.sva-page-hero{padding-left:5%;padding-right:5%;box-sizing:border-box;}

  /* Kill any stray element wider than the viewport (common cause of
     horizontal scroll bugs on phones/tablets — images, tables, iframes
     that don't inherit responsive sizing). */
  img,video,iframe,table{max-width:100%;height:auto;}

  /* Sticky header should never let content sit underneath it; give
     anchor targets breathing room so in-page jumps land below the
     header instead of partially behind it. */
  [id]{scroll-margin-top:70px;}
}

/* ============================================================
   MOBILE + TABLET GLOBAL PASS (≤900px only)
   Center everything, dial the type scale down a notch across the
   whole site (every template shares these classes: header, footer,
   hero, sections, cards, single posts), and make the primary
   jump/CTA buttons bigger and brighter so they read clearly on a
   small, bright-sunlight-viewed screen. Nothing here touches
   min-width:901px, so the desktop layout is exactly as it was.
   ============================================================ */
@media(max-width:900px){

  /* -- CENTER EVERYTHING -- catch-all for text blocks across every
     template (header, footer, hero, about/services/testimonials/
     contact/blog/single-post), then a couple of narrow left-aligned
     exceptions (bulleted lists, form fields) are restored right after
     so they stay readable rather than centered word-by-word. */
  body,.sva-wrap,.sva-sec,.sva-page-hero,
  h1,h2,h3,h4,h5,p,li,
  .sva-h1,.sva-h2,.sva-tag,.sva-sub,.sva-eyebrow,
  .sva-about-text,.sva-about-text p,.sva-about-list,
  .sva-svc,.sva-svc-name,.sva-svc-desc,
  .sva-svcf,.sva-svcf-name,.sva-svcf-desc,
  .sva-post,.sva-post-h,.sva-post-exc,
  .sva-single-body,.sva-testi-body,.sva-testi-txt,
  .sva-contact-grid,.sva-chart-cta,
  .sva-ftr-grid,.sva-ftr-links,.sva-ftr-ci,.sva-ftr-bot,.sva-ftr-copy,.sva-ftr-legal,
  .sva-logo,.sva-logo-name,.sva-logo-tag,
  .sva-nav-ul,.sva-mob,
  .sva-faq-q,.sva-faq-a{
    text-align:center!important;
  }
  .sva-logo{justify-content:center!important;}
  .sva-about-list,.sva-faq-a{
    /* keep bullet/answer text left-aligned WITHIN its own centered box,
       so lines of a list or paragraph don't each individually center */
    text-align:left!important;
    margin-left:auto!important;margin-right:auto!important;
  }
  .sva-field,input,select,textarea{text-align:left!important;}

  /* -- SMALLER TYPE ACROSS THE WHOLE SITE -- every page template
     shares these classes, so this single block covers header, footer,
     hero, all section headings/body copy, cards and single-post body. */
  .sva-logo-name{font-size:15px!important;}
  .sva-logo-tag{font-size:14px!important;color:#E8DCC0!important;}
  .sva-nav-ul li a{font-size:16px!important;}
  .sva-h1{font-size:clamp(19px,5vw,25px)!important;}
  .sva-h2{font-size:clamp(17px,4vw,21px)!important;}
  .sva-eyebrow{font-size:14.5px!important;letter-spacing:2.2px!important;}
  .sva-tag,.sva-sub{font-size:19px!important;font-weight:500!important;line-height:1.7!important;color:#EFE4C8!important;}
  .sva-svc-name,.sva-svcf-name,.sva-post-h{font-size:17px!important;}
  .sva-svc-desc,.sva-svcf-desc,.sva-post-exc,.sva-single-body,.sva-testi-txt,
  .sva-about-text p,.sva-about-list li,p{font-size:18.5px!important;font-weight:500!important;line-height:1.75!important;color:#E8DCC0!important;}
  .sva-cn{font-size:19px!important;}
  .sva-cl{font-size:14.5px!important;color:#DCCFA6!important;}
  .sva-ftr-links li,.sva-ftr-ci,.sva-ftr-copy,.sva-ftr-legal{font-size:16px!important;}
  .sva-ftr-links a,.sva-ftr-ci-text,.sva-ftr-ci-text a,.sva-ftr-copy{color:#DCCFA6!important;}
  .sva-svc-incl,.sva-svcf-incl,.sva-cd-lbl,.sva-cd-v,.sva-cd-v a,.sva-faq-a,#sva-chart-info,.sva-single-meta{font-size:16px!important;color:#DCCFA6!important;}
  .sva-faq-q{font-size:17px!important;}
  .sva-svc-more{opacity:1!important;transform:none!important;font-size:16px!important;margin-top:12px!important;}

  /* -- BIG, BRIGHT JUMP / CTA BUTTONS -- */
  .sva-btn-g,.sva-btn-o,.sva-nav-cta{
    font-size:16px!important;
    padding:15px 30px!important;
    letter-spacing:1.6px!important;
  }
  .sva-btn-g{
    background:#F4D65C!important;
    color:var(--navy)!important;
    box-shadow:0 0 18px rgba(244,214,92,0.55)!important;
  }
  .sva-btn-o{
    border-width:2px!important;
    color:#FFDD70!important;
    border-color:#FFDD70!important;
  }
  #sva-top-btn{font-size:13px!important;height:40px!important;}

  /* -- FADE BACKGROUND STARFIELD -- keep it as soft atmosphere rather
     than competing with foreground content (canvas alpha already dialed
     back in js/main.js; this trims any residual visual weight further). */
  #sva-bg{opacity:0.95!important;}
  html,body{background:#152A5C!important;}
}

/* ============================================================
   GEMINI-REVIEW UPGRADES — all toggled from the Customizer.
   Cosmetic effects switch via body classes (sva-fx-*) so nothing
   is hardcoded; defaults keep the site looking as before.
   NOTE: backgrounds & box-shadows use !important on purpose — the
   "NUCLEAR" reset near the top of this file wipes background/box-shadow
   from * with !important, so re-asserting with equal force is required
   (same pattern as the existing BUTTON RESCUE block).
   ============================================================ */

/* -- Glassmorphic card depth (testimonials + blog cards) -- */
body.sva-fx-glass .sva-testi-item.active{
  background:rgba(18,26,48,0.34)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(212,175,55,0.18);
  border-radius:14px;padding:26px 26px;
}
body.sva-fx-glass .sva-post{
  background:rgba(18,26,48,0.35)!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}

/* -- Soft celestial glow behind primary buttons -- */
body.sva-fx-glow .sva-btn-g,body.sva-fx-glow .sva-btn-o{
  transition:box-shadow .4s ease,transform .3s,background .3s,color .3s,border-color .3s;
}
body.sva-fx-glow .sva-btn-g{box-shadow:0 2px 26px -10px var(--cta-glow,#D4AF37)!important;}
body.sva-fx-glow .sva-btn-g:hover{box-shadow:0 6px 34px -6px var(--cta-glow,#D4AF37)!important;}
body.sva-fx-glow .sva-btn-o:hover{box-shadow:0 4px 28px -8px var(--cta-glow,#D4AF37)!important;}

/* -- Card hover micro-interactions (lift + accent border) -- */
body.sva-fx-micro .sva-svc,body.sva-fx-micro .sva-svcf,body.sva-fx-micro .sva-post{
  transition:transform .35s cubic-bezier(.34,1.4,.64,1),border-color .35s,box-shadow .35s;
}
body.sva-fx-micro .sva-svc:hover,body.sva-fx-micro .sva-svcf:hover{
  transform:translateY(-6px);
  border-color:var(--svc-accent,var(--gold))!important;
  box-shadow:0 16px 36px -20px rgba(0,0,0,.75)!important;
}
body.sva-fx-micro .sva-post:hover{
  transform:translateY(-6px);
  border-color:var(--post-accent,var(--gold))!important;
  box-shadow:0 16px 36px -20px rgba(0,0,0,.75)!important;
}

/* -- Gold line-art service icons (SVG option) -- */
.sva-svc-icon .sva-svc-svg,.sva-svcf-icon .sva-svc-svg{width:34px;height:34px;display:inline-block;vertical-align:middle;}
.sva-svcf-icon{color:var(--svc-accent,#D4AF37);}

/* -- "View Sample Report" lead-magnet button -- */
.sva-sample-wrap{margin:2px 0 16px;}
.sva-sample-btn{display:inline-block;}

/* -- Google Reviews trust badge -- */
.sva-grev-wrap{display:flex;justify-content:center;margin:2px 0 20px;}
.sva-grev-link{text-decoration:none;display:inline-block;}
.sva-grev{display:inline-flex;align-items:center;gap:12px;background:rgba(18,26,48,0.55)!important;border:1px solid rgba(212,175,55,0.22);border-radius:40px;padding:8px 18px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.sva-grev-g{font-family:Arial,sans-serif;font-weight:700;font-size:18px;color:#4285F4;background:#fff!important;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sva-grev-main{display:flex;flex-direction:column;line-height:1.15;}
.sva-grev-rate{font-family:var(--fh);font-size:15px;color:var(--ivory);font-weight:700;}
.sva-grev-stars{font-size:12px;letter-spacing:1px;}
.sva-grev-star{color:rgba(255,255,255,0.22);}
.sva-grev-star.on{color:#F5B301;}
.sva-grev-cnt{font-family:var(--fb);font-size:12px;color:var(--muted);align-self:center;}

/* -- Mobile sticky bottom bar (WhatsApp + Book) -- */
.sva-mbar{display:none;}
@media(max-width:768px){
  .sva-mbar{display:flex!important;position:fixed;left:0;right:0;bottom:0;z-index:997;box-shadow:0 -4px 18px rgba(0,0,0,.45)!important;}
  .sva-mbar-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 8px;font-family:var(--fh);font-size:14px;letter-spacing:1px;text-decoration:none;border:none;}
  .sva-mbar-wa{background:#25D366!important;color:#05351b!important;}
  .sva-mbar-book{background:var(--gold,#D4AF37)!important;color:#0a0f22!important;}
  body.sva-has-mbar{padding-bottom:54px;}
  body.sva-has-mbar #sva-wa-float{display:none!important;}
}

/* -- Panchang ticker -- */
.sva-panchang{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:8px 16px;background:rgba(212,175,55,0.06)!important;border-bottom:1px solid rgba(212,175,55,0.14);font-family:var(--fb);font-size:13px;color:var(--muted);letter-spacing:.4px;position:relative;z-index:5;}
.sva-pan-ic{color:var(--gold);}
.sva-pan-date{color:var(--stone);font-weight:600;}
.sva-pan-sep{opacity:.5;}
.sva-pan-note{font-style:italic;opacity:.75;font-size:12px;}
@media(max-width:600px){.sva-pan-note{width:100%;text-align:center;}}

/* -- Rashi quick-preview widget -- */
.sva-lagna-box{max-width:440px;margin:24px auto 0;display:flex;flex-direction:column;gap:12px;align-items:center;}
.sva-lagna-box .sva-field{width:100%;max-width:300px;}
/* When the preview sits beside the chart (right column) it fills the
   column and left-aligns instead of centring. */
.sva-lagna-beside{max-width:none;margin:0;align-items:stretch;text-align:left;}
.sva-lagna-beside .sva-field{max-width:none;}
.sva-lagna-beside .sva-btn-o,.sva-lagna-beside .sva-btn-g{width:100%;box-sizing:border-box;text-align:center;}
.sva-lagna-book{margin-top:4px;}
.sva-lagna-beside .sva-sample-wrap{margin:0;text-align:center;}
.sva-lagna-result{margin-top:6px;min-height:8px;width:100%;}
.sva-lagna-out{background:rgba(18,26,48,0.5)!important;border:1px solid rgba(212,175,55,0.22);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:8px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.sva-lagna-sign{font-family:var(--fh);font-size:20px;color:var(--gold);letter-spacing:1px;}
.sva-lagna-trait{font-family:var(--fs);font-style:italic;font-size:17px;color:var(--stone);}
.sva-lagna-cta{font-size:13px;color:var(--muted);line-height:1.6;}
.sva-lagna-err{color:#E0876B;font-size:14px;}

/* -- Video testimonial link -- */
.sva-testi-video{display:inline-block;margin-top:12px;font-family:var(--fh);font-size:12.5px;letter-spacing:1.4px;color:var(--gold);text-transform:uppercase;text-decoration:none;border:1px solid rgba(212,175,55,0.4);border-radius:30px;padding:6px 16px;transition:var(--trans);}
.sva-testi-video:hover{background:var(--gold)!important;color:var(--navy)!important;}

/* -- Language switcher docked into the header (opt-in) -- */
body.sva-lang-in-nav .sva-lang-slot{display:inline-flex;align-items:center;margin-left:14px;}
body.sva-lang-in-nav .sva-lang-slot > *{position:static!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;box-shadow:none!important;}
@media(max-width:900px){body.sva-lang-in-nav .sva-lang-slot{margin-left:8px;}}

/* -- Booking form: carded sections (opt-in, visual only) -- */
body.sva-book-cards #sva-svc-dropdown-wrap,
body.sva-book-cards #sva-fields-locked{
  background:rgba(24,34,62,0.68)!important;
  border:1px solid rgba(212,175,55,0.28)!important;
  border-radius:14px!important;
  padding:22px 20px!important;
  margin-bottom:18px!important;
  box-shadow:0 10px 30px -18px rgba(0,0,0,0.8)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
/* STACKING FIX — #sva-fields-locked ("2. Your Details" card) creates a
   stacking context (backdrop-filter + opacity), and being LATER in DOM
   order it painted ON TOP of the service dropdown panel: the dropdown's
   z-index:50 is trapped inside its own wrap's stacking context, which
   sat at z-index:auto — same level as the fieldset's, so DOM order won.
   Raising the wraps' z-index lifts their entire stacking contexts above
   the card, letting the dropdown panel paint over everything below it. */
#sva-svc-dropdown-wrap{z-index:90!important;}
#sva-gender-dropdown-wrap{z-index:90!important;}

/* subtle gold rule under each step's number label so the "steps" read clearly */
body.sva-book-cards #sva-fields-locked > .sva-flabel:first-child,
body.sva-book-cards #sva-svc-dropdown-wrap > .sva-flabel:first-child{
  display:block;padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px solid rgba(212,175,55,0.18);
  color:var(--gold);
}

/* -- Service & Gender dropdown panels: explicitly excluded from the nuclear
   reset above via :not(), AND re-declared here for belt-and-suspenders. -- */
#sva-svc-options,#sva-gender-options{
  background:rgba(8,14,30,0.97)!important;
  background-color:rgba(8,14,30,0.97)!important;
  -webkit-backdrop-filter:blur(14px)!important;backdrop-filter:blur(14px)!important;
  border:.5px solid rgba(212,175,55,0.4)!important;
  box-shadow:0 12px 30px rgba(0,0,0,0.7)!important;
}
#sva-svc-options .sva-svc-opt:hover,#sva-gender-options .sva-gender-opt:hover{
  background:rgba(212,175,55,0.16)!important;
  background-color:rgba(212,175,55,0.16)!important;
}
#sva-svc-display,#sva-gender-display{
  background:rgba(8,14,30,0.72)!important;
  background-color:rgba(8,14,30,0.72)!important;
}

/* -- Birth chart: static per-house text elements -- */
.sva-ch-glyph{pointer-events:none;}
.sva-ch-sname{pointer-events:none;}
.sva-ch-num{pointer-events:none;}

/* -- Rashi highlight on the birth chart (triggered by the quick preview) -- */
@keyframes svaChGlow{
  0%,100%{fill-opacity:.28}
  50%{fill-opacity:.55}
}
@keyframes svaGlyphPulse{
  0%,100%{opacity:.88}
  50%{opacity:1}
}
.sva-chart-house.sva-ch-active{
  fill:var(--ch-active,#E8C84A)!important;
  animation:svaChGlow 1.8s ease-in-out infinite;
}
/* The bold name overlay (#sva-ch-signlabel <g>) pulses in brightness.
   The group contains two <text> children; the filter+animation applies
   to the whole group so both lines glow together. */
#sva-ch-signlabel{
  animation:svaGlyphPulse 1.6s ease-in-out infinite;
  filter:drop-shadow(0 0 5px rgba(255,220,100,.85)) drop-shadow(0 0 10px rgba(255,200,80,.45));
  pointer-events:none;
}
.sva-ch-svg-glow{
  filter:drop-shadow(0 0 7px rgba(255,214,92,.95));
}
.sva-ch-signlabel{
  pointer-events:none;
}

/* -- Language switcher docked in nav: belt-and-braces neutralisation so
   the GTranslate widget can never overlap the menu -- */
body.sva-lang-in-nav .sva-lang-slot{display:inline-flex;align-items:center;margin-left:16px;}
body.sva-lang-in-nav .sva-lang-slot,
body.sva-lang-in-nav .sva-lang-slot *{
  position:static!important;inset:auto!important;top:auto!important;right:auto!important;
  bottom:auto!important;left:auto!important;float:none!important;transform:none!important;box-shadow:none!important;
}

/* ── SCROLL PROGRESS BAR ────────────────────────────────────────────
   Thin gold bar fixed just below the site header. Progresses
   left→right as the user scrolls down; recedes as they scroll up.
   Appears on every page including the homepage.
   z-index 999 sits just below the header (1000) so it always tucks
   under, never over the nav. Uses translateX(-100%→0%) instead of
   width% so the browser can GPU-composite it without triggering
   layout — smoother on mobile. ─────────────────────────────────── */
#sva-prog{
  position:fixed;top:60px;left:0;right:0;z-index:999;
  height:var(--prog-h,2px);overflow:hidden;pointer-events:none;
}
body.admin-bar #sva-prog{top:92px;}
@media screen and (max-width:782px){body.admin-bar #sva-prog{top:106px;}}
#sva-prog::after{
  content:'';display:block;height:100%;
  background:linear-gradient(90deg,rgba(212,175,55,0.6),var(--prog-col,#D4AF37),rgba(212,175,55,0.6))!important;
  transform:translateX(-100%);
  transition:transform .08s linear;
  will-change:transform;
}
/* JS sets --prog-pct (0–100) on <html>; this reads it */
#sva-prog::after{
  transform:translateX(calc(-100% + var(--sva-prog, 0%) ));
}

/* ── BUTTON HOVER GLOWS ─────────────────────────────────────────────
   Refined bordered-gold buttons: semi-transparent dark base, gold
   border + text, subtle fill on hover. Much more mellow than the
   old solid-gold slab. !important beats nuclear reset. */
.sva-btn-g{
  border-radius:3px!important;
  letter-spacing:1.8px!important;
  font-weight:500!important;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease!important;
  cursor:pointer!important;
  border:1.5px solid rgba(212,175,55,0.6)!important;
  background:rgba(6,13,30,0.55)!important;
  color:#D4AF37!important;
}
.sva-btn-g:hover,.sva-btn-g:focus-visible{
  background:rgba(212,175,55,0.14)!important;
  background-color:rgba(212,175,55,0.14)!important;
  border-color:rgba(212,175,55,0.88)!important;
  color:#F0DC8A!important;
  transform:translateY(-2px)!important;
  box-shadow:0 0 var(--btn-glow-r,14px) rgba(212,175,55,0.35),0 4px 14px rgba(0,0,0,0.35)!important;
  outline:none!important;
}
.sva-btn-g:active{
  transform:translateY(0)!important;
  box-shadow:0 0 6px rgba(212,175,55,0.2)!important;
}
/* Contact page submit button — same mellow refined look */
#sva-contact-form button[type=submit]{
  background:rgba(6,13,30,0.55)!important;
  color:#D4AF37!important;
  border:1.5px solid rgba(212,175,55,0.6)!important;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease!important;
  border-radius:3px!important;
}
#sva-contact-form button[type=submit]:hover{
  background:rgba(212,175,55,0.14)!important;
  border-color:rgba(212,175,55,0.88)!important;
  color:#F0DC8A!important;
  transform:translateY(-2px)!important;
  box-shadow:0 0 var(--btn-glow-r,14px) rgba(212,175,55,0.35),0 4px 14px rgba(0,0,0,0.35)!important;
}
#sva-contact-form button[type=submit]:active{
  transform:translateY(0)!important;
}

/* ── DROPDOWN PANEL: .sva-dd-bg child carries the visual background ── */
#sva-svc-options .sva-dd-bg,#sva-gender-options .sva-dd-bg{
  background:rgba(8,14,30,0.97)!important;
  background-color:rgba(8,14,30,0.97)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  backdrop-filter:blur(14px)!important;
}

/* ── FULL RESPONSIVE AUDIT ──────────────────────────────────────────
   Prevent any element from overflow-scrolling horizontally;
   ensure charts, grids, text all stay within the viewport.
   Center-justify content on small screens. ────────────────────────── */
html,body{max-width:100%;overflow-x:hidden;}

/* SVG birth chart: scale down on small screens */
.sva-chart-svg-wrap{
  overflow:visible;
  max-width:100%;
}
#sva-chart-svg,svg.sva-chart-svg{
  max-width:100%!important;
  height:auto!important;
  width:100%!important;
}

/* Service grid: single column on phones */
@media(max-width:600px){
  .sva-modern-grid,.sva-svc-grid{
    grid-template-columns:1fr!important;
  }
  .sva-modern-grid2{
    grid-template-columns:1fr!important;
    max-width:100%!important;
  }
}

/* Contact form grid: stack on small phones */
@media(max-width:500px){
  #sva-fields-locked > div[style*="grid-template-columns:1fr 1fr"],
  .sva-contact-grid > div > form div[style*="grid-template-columns:1fr 1fr"]{
    display:block!important;
  }
  #sva-fields-locked > div[style*="grid-template-columns:1fr 1fr"] > div,
  .sva-contact-grid > div > form div[style*="grid-template-columns:1fr 1fr"] > div{
    margin-bottom:9px;
  }
}

/* Contact/QR layout: single column on phones */
@media(max-width:700px){
  .sva-contact-grid{
    grid-template-columns:1fr!important;
  }
  .sva-qr-col{margin-top:24px;}
}

/* Hero sections: prevent text overflow */
.sva-page-hero h1,.sva-hero-h1,.sva-h1{
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
}
.sva-eyebrow,.sva-logo-name,.sva-logo-tag{
  overflow-wrap:break-word;
  word-break:break-word;
}

/* Zodiac canvas: constrain on very small screens */
@media(max-width:400px){
  #sva-zodiac-canvas{
    max-width:100vw!important;
    max-height:100vw!important;
  }
}

/* Solar system canvas: fill container, no overflow */
#sva-solar,canvas[id^="sva-solar"]{
  max-width:100%!important;
  display:block!important;
}

/* Panchang ticker: prevent overflow on narrow screens */
.sva-panchang{
  white-space:nowrap;
  overflow:hidden;
}
@media(max-width:500px){
  .sva-panchang .sva-pan-inner{font-size:12px!important;}
}

/* Mobile bottom bar: full width, safe area padding */
.sva-mbar{
  padding-bottom:max(10px,env(safe-area-inset-bottom))!important;
}

/* FAQ accordion: text should wrap */
.sva-faq-q,.sva-faq-a{
  overflow-wrap:break-word;
  word-break:break-word;
}

/* Testimonials section: stack on mobile */
@media(max-width:700px){
  .sva-testi-grid{
    grid-template-columns:1fr!important;
  }
  .sva-lagna-beside{
    flex-direction:column!important;
  }
  .sva-lagna-beside > *{
    width:100%!important;
    max-width:100%!important;
  }
}

/* Page sections: horizontal padding on small screens */
@media(max-width:600px){
  .sva-sec,.sva-section,.sva-wrap > section,.sva-wrap > div.sva-sec{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .sva-contact-wrap{
    padding-left:14px!important;
    padding-right:14px!important;
  }
}

/* Nav on small tablets: tighten gap */
@media(max-width:900px){
  #sva-hdr{padding:0 16px!important;}
  nav.sva-nav{display:none;}
}

/* Center-justify everything small-screen */
@media(max-width:500px){
  .sva-page-hero{text-align:center!important;}
  .sva-page-hero .sva-eyebrow{text-align:center!important;}
}

/* Prevent images from overflowing their containers */
img{max-width:100%;height:auto;}

/* Radio/checkbox pill rows: wrap on small screens */
.sva-radio-row,.sva-check-row{
  flex-wrap:wrap!important;
  gap:8px!important;
}