/*
Theme Name: Shree Vedic Aim
Theme URI: https://wordpress.shreevedicaim.com
Author: Shree Vedic Aim Jyotishalaya
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 */
/* Legacy element, no longer printed by single.php (#sva-prog already
   covers every page). Kept correct in case anything still renders it:
   it now sits BELOW the header instead of slicing across it. */
#sva-read-progress{position:fixed;top:var(--sva-hdr-off,60px);left:0;height:3px;background:var(--gold)!important;z-index:999;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;}
/* Site title vs tagline.
   The title was 14px and the tagline 13.5px — half a pixel apart — and the
   tagline is UPPERCASE in the body font while the title is mixed-case Cinzel,
   which has a small x-height. The result was a tagline that read as the
   larger, more important line of the two, which is backwards.
   The title is now clearly the bigger line and bold; the tagline is smaller
   and regular weight, so the hierarchy matches what they actually are. */
.sva-logo-name{font-family:var(--fh);font-size:16px;color:#F4E4B8;letter-spacing:2px;display:block;text-shadow:0 0 10px rgba(244,228,184,0.5);}
.sva-logo-tag{font-size:12.5px;font-weight:400;color:#D2C4A0;letter-spacing:1.2px;text-transform:uppercase;display:block;}

/* ── THE BUSINESS NAME — ONE TREATMENT, SITE-WIDE ──────────────────
   "Shree Vedic Aim" appears in the header, in the hero, in the footer and
   on inner pages, and each spot had grown its own styling: different
   weights, different letter-spacing, one in caps and one not. It read as
   three different brands rather than one.
   Every place the business name is printed now shares this single rule,
   so changing the brand's look is a one-line edit rather than a hunt.
   Weight is 600 — present, but not heavy. Size still varies by context,
   because a footer credit and a page header shouldn't be the same size;
   it's the STYLE that's shared. */
.sva-logo-name,
.sva-ftr-bn,
.sva-eye{
  font-family:var(--fh)!important;
  font-weight:600!important;
  letter-spacing:2px!important;
  text-transform:none!important;
}
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;}
/* SCROLL CUE — this sat at 12px in --muted (#DCCFA6) with no weight and
   no glow, over a starfield. Against that background a thin, low-contrast
   line at 12px effectively disappears, which is why it was hard to see on
   every screen size rather than just small ones.
   Brighter ivory, semi-bold, a size up, and a soft warm glow so it reads
   against the sky instead of sinking into it. The !important flags are
   needed because a blanket `p{...!important}` rule further down the file
   re-colours and re-sizes every paragraph on phones and tablets — this is
   a <p>, so it was being caught by that too. */
.sva-scroll-cue{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-size:14px!important;
  font-weight:600!important;
  letter-spacing:3.4px;
  color:#F7EDD2!important;
  text-shadow:0 0 14px rgba(212,175,55,0.75),0 0 4px rgba(6,13,30,0.9);
  animation:bounce 2.2s ease-in-out infinite;
}
@media(max-width:900px){
  .sva-scroll-cue{font-size:15px!important;letter-spacing:3.8px;}
}
@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{
  /* THE YANTRA MUST NOT MOVE.
     This was min-height:52px, so a longer zone description wrapping onto a
     second line made the label taller, which made the whole left column
     taller — and .sva-about-grid is align-items:center, so the yantra got
     pushed up or down as you moved the cursor between zones.
     The height is now FIXED, so the label's contents can be one line or
     three and the box it sits in never changes size. Nothing above it can
     shift. Overflow stays visible rather than hidden, so an unusually long
     description still reads in full instead of being clipped — it simply
     has no effect on layout. */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  margin:12px auto 0;   /* centered on the yantra's own axis */
  max-width:420px;      /* matches the reduced yantra width */
  height:96px;          /* FIXED — never min-height */
  overflow:visible;
  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-ch-h9{fill:var(--ch-h9,#D4AF37);}
.sva-ch-colourful .sva-ch-h10{fill:var(--ch-h10,#D98C6B);}
.sva-ch-colourful .sva-ch-h11{fill:var(--ch-h11,#7FA8C9);}
.sva-ch-colourful .sva-ch-h12{fill:var(--ch-h12,#8FAE7D);}
.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);}
/* The last link in that column isn't another service — it's the way through
   to all of them. Bold sets it apart from the five names above it. */
.sva-ftr-links a.sva-ftr-more{font-weight:700;color:var(--stone);}
.sva-ftr-links a.sva-ftr-more:hover{color:var(--gold);}
.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-yantra-label{height:112px;}
  .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;}
  /* SQUASHED WHEEL FIX (tablet). This used to stretch the canvas to the
     hero's full box — width:100%, height:100% of a 100vh-tall section —
     i.e. a tall rectangle. Any disagreement between that box and the
     canvas's pixel buffer (they are set from different places, and the
     buffer lags by a frame on URL-bar collapse and orientation change)
     shows up as the circle being drawn as an oval.
     A square box and a square buffer cannot disagree about their aspect,
     so the wheel is round no matter what the timing does. */
  #sva-zodiac-canvas{position:absolute!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;inset:auto!important;transform:translate(-50%,-50%)!important;width:100%!important;height:auto!important;aspect-ratio:1/1!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;}
  /* 100vw includes the scrollbar gutter, the hero does not — using 100%
     of the hero keeps the canvas (and therefore the wheel drawn at its
     midpoint) exactly centred. main.js overrides both with measured px. */
  #sva-zodiac-canvas{position:absolute!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:100%!important;height:auto!important;aspect-ratio:1/1!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;}
}

/* aspect-ratio has been around a while but is not universal on older
   Android WebView / Samsung Internet builds. Where it is missing,
   `height:auto` on a <canvas> falls back to the ratio of its width/height
   ATTRIBUTES — which is exactly how an oval appears. Pin the height to the
   width explicitly there. */
@supports not (aspect-ratio: 1 / 1){
  @media(max-width:900px){
    #sva-zodiac-canvas{height:100vw!important;}
  }
}

@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;}
  /* THE ELLIPSE BUG: the canvas was position:relative, stacked in the
     document flow above .sva-hero-body. JS writes a square (vw × vw) but
     the hero clips it at its available height, so only a short rectangular
     slice was visible — a wide, flat oval instead of a circle.
     Fixed: absolute, centred, exactly as in the 601-900px block above. */
  /* The canvas is a square. Centering it vertically in the full hero put
     its lower half over the hero-body text. Anchor it to the top and
     center it horizontally — it sits naturally in the upper space above
     the bottom-pinned text block with no overlap. */
  #sva-zodiac-canvas{position:absolute!important;top:0!important;left:50%!important;bottom:auto!important;right:auto!important;transform:translateX(-50%)!important;width:100%!important;height:auto!important;aspect-ratio:1/1!important;}
  .sva-hero-body{position:relative;z-index:3;margin-top:auto;width:100%;padding:18px 16px 16px;background:linear-gradient(0deg,rgba(6,13,30,0.9) 55%,rgba(6,13,30,0) 100%)!important;}
  .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;}
  /* Narrower column means the same description wraps onto more lines.
     Still a fixed height, just a taller one — the yantra stays put here too. */
  #sva-yantra-label{height:128px;}
  .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:7px;height:7px;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:14px;right:14px;}
  .sva-jumpdot{
    width:11px!important;height:11px!important;
    min-height:0!important;max-height:11px!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{
    /* FULLY OPAQUE on phones and tablets.
       Two reasons this was showing the page through itself:
       (1) the value was rgba(...,0.96) — 4% transparent, which is enough
           for bright hero artwork underneath to read through as ghosting;
       (2) it was only ever set via the `background` SHORTHAND, while the
           nuclear reset at the top of this file kills `background-color`
           with a LONGHAND !important. Setting the longhand back, also with
           !important, leaves nothing for a stylesheet injected later (a
           translate widget, a plugin) to sneak past.
       backdrop-filter is kept for the desktop-style frosting but is now
       purely decorative — the header no longer depends on it to be
       readable, so a browser that ignores it loses nothing. */
    background:#060D1E!important;
    background-color:#060D1E!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. */
  /* Same hierarchy on small screens — the old values here had the tagline
     at 14px against a 15px title, which put them right back on top of each
     other on exactly the widths where the header is tightest. */
  .sva-logo-name{font-size:15.5px!important;}
  .sva-logo-tag{font-size:12px!important;font-weight:400!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;}
  /* ABOUT SECTION ONLY — the rule directly above sweeps every paragraph on
     the site up to 18.5px at weight 500. On a serif that reads as heavy,
     and the About block is the longest stretch of prose on the page, so it
     took the worst of it. Dialled back here and here alone: a size down,
     regular weight instead of medium, and a colour a step off the brightest
     ivory — still clearly readable on the dark sky, without glaring.
     Nothing else in that selector list is touched. */
  .sva-about-text p,
  .sva-about-list li{
    font-size:16.5px!important;
    font-weight:400!important;
    line-height:1.72!important;
    color:#D9CDB2!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 -- */
/* ── TESTIMONIAL AVATARS + GOOGLE REVIEWS ───────────────────────────
   The circle is only ever drawn when a real photo exists: no photo
   means the .sva-testi-ava element is never printed at all (see
   sva_testi_avatar_html()), so there is nothing here to hide and the
   card closes up on its own. That's deliberate — an empty gold ring or
   a grey silhouette would look worse than no picture.
   The nuclear reset near the top of this file strips backgrounds from
   everything, hence the !important on the ones that must survive. */
.sva-testi-ava{
  width:64px;height:64px;flex-shrink:0;
  margin:0 auto 14px;
  border-radius:50%;overflow:hidden;
  border:1px solid rgba(212,175,55,0.42);
  box-shadow:0 0 18px rgba(212,175,55,0.18);
  background:rgba(255,255,255,0.05)!important;
}
.sva-testi-ava img{
  width:100%;height:100%;display:block;
  object-fit:cover;border-radius:50%;
}
@media(max-width:600px){
  .sva-testi-ava{width:54px;height:54px;margin-bottom:11px;}
}

/* Star row under a review (site testimonials carry a rating too). */
.sva-testi-stars{display:block;font-size:13px;letter-spacing:2px;margin:-4px 0 8px;line-height:1;}
.sva-testi-star{color:rgba(255,255,255,0.2);}
.sva-testi-star.on{color:#F5B301;}

/* "Review on Google" tag, shown only on Google-sourced slides. */
.sva-testi-src{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  font-family:var(--fh);font-size:11.5px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  transition:var(--trans);
}
a.sva-testi-src:hover{color:var(--gold)!important;}
.sva-testi-src-g{
  font-family:Arial,sans-serif;font-weight:700;font-size:12px;
  color:#4285F4;background:#fff!important;
  width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

.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, on EVERY page.
   Progresses left→right as the user scrolls down; recedes as they
   scroll up.

   The old `top:60px` was a guess at the header's height, and the header
   is `min-height:60px` — the moment the logo block wrapped to two lines
   (narrow phones, longer site name, larger fonts, or a logged-in admin
   bar) the real header grew past 60px and the bar ended up drawn ACROSS
   it. `--sva-hdr-off` is now measured live from the header's own bottom
   edge in header.php, so the bar sits exactly under it at every width,
   on every page, admin bar or not.

   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:var(--sva-hdr-off,60px);left:0;right:0;z-index:999;
  height:var(--prog-h,2px);overflow:hidden;pointer-events:none;
  /* Rides with the header: hidden (and tucked up out of sight) until the
     header has actually dropped in, so it can never float over the page
     on its own or land halfway across the bar. */
  transform:translateY(-100%);opacity:0;
  transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .2s ease,top .2s ease;
}
body.sva-hdr-shown #sva-prog{transform:none;opacity:1;}
#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 WHEEL — HORIZONTAL CENTRING (phones + tablets) ──────────
   The wheel was drifting off-centre because three different rules were
   each sizing the canvas their own way: the inline width:100%/height:100%
   in front-page.php, `width:100vw!important` here, and main.js writing
   pixel sizes from the viewport. 100vw INCLUDES the scrollbar gutter
   while the hero it sits in does not, so the canvas ended up a few
   pixels wider than its container and hung off one side — and the wheel
   is drawn at the canvas's own midpoint, so the whole wheel shifted with
   it. main.js now measures the hero and writes the canvas box itself
   (inline + !important, so it is the single authority), and these rules
   make sure whatever it writes is centred rather than left-aligned. */
@media(max-width:900px){
  #sva-zodiac-canvas{
    margin-left:auto!important;margin-right:auto!important;
    max-width:100%!important;
  }
}

/* Zodiac canvas: constrain on very small screens */
@media(max-width:400px){
  #sva-zodiac-canvas{
    max-width:100%!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;
}