/* Supreme VA site styles (Hark) */
/* base */
html{scroll-behavior:smooth}
#day-with-and-without-support,#how-it-works,#why-choose-supreme-va{background:#fff}
#real-estate-va-services,#support-plans{background:#faf7f0}
#real-estate-va-services .block-background,#support-plans .block-background{background:#faf7f0!important}
.grid-button{transition:transform .25s ease,box-shadow .25s ease}
.grid-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
@media(max-width:767px){
main section:not(#why-choose-supreme-va) .block-layout{grid-template-rows:none!important;grid-auto-rows:auto!important;min-height:0!important;row-gap:7px!important;padding-top:40px!important;padding-bottom:40px!important}
#hero-section .block-layout{padding-top:44px!important;padding-bottom:44px!important;row-gap:12px!important}
#real-estate-va-services .block-layout,#support-plans .block-layout{row-gap:10px!important}
#why-choose-supreme-va .block-layout{padding-top:40px!important;padding-bottom:40px!important}
}
@media(max-width:767px){#why-choose-supreme-va h3,#zmSR7m h3{font-size:24px!important;line-height:1.2!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.grid-button{transition:none}.grid-button:hover{transform:none}}
body:not(:has(#hero-section)) main :is(h2,h3,h4,h2 *,h3 *,h4 *){font-family:"Inter Tight",sans-serif!important;letter-spacing:0!important;text-transform:none!important}
body:not(:has(#hero-section)) main :is(p,p span,li,li span){font-family:Inter,"Inter Tight",sans-serif!important;font-stretch:normal!important}
#zCC1Q_ :is(h1,h2,h3,h4,p,span,a){font-family:"Inter Tight",sans-serif!important}

/* motion layer v1 */
:root{--sva-ease:cubic-bezier(.16,1,.3,1);--sva-dur:1.1s}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* Apple-style reveals: restyle the builder's own entrance animations */
@media (prefers-reduced-motion:no-preference){
 .transition.transition--fade:not(.transition--root-hidden),
 .transition.transition--slide:not(.transition--root-hidden),
 .transition.transition--rise:not(.transition--root-hidden),
 .transition.transition--scale:not(.transition--root-hidden),
 .transition.transition--slide-left:not(.transition--root-hidden),
 .transition.transition--slide-right:not(.transition--root-hidden),
 .sva-reveal{
  opacity:0;transform:translate3d(0,48px,0) scale(.985);filter:blur(10px);
  transition-property:opacity,transform,filter!important;
  transition-duration:var(--sva-dur)!important;
  transition-timing-function:var(--sva-ease)!important;
  will-change:opacity,transform,filter}
 .transition.transition--slide-left:not(.transition--root-hidden){transform:translate3d(-56px,0,0)}
 .transition.transition--slide-right:not(.transition--root-hidden){transform:translate3d(56px,0,0)}
 .transition.transition--scale:not(.transition--root-hidden){transform:scale(.92)}
 .transition:not(.transition--root-hidden)[data-animation-state=active],
 .transition.sva-in,
 .sva-reveal.sva-in{
  opacity:1!important;transform:none!important;filter:none!important;
  transition-delay:var(--sva-delay,var(--user-animation-delay,0s))!important}

 /* hero: content drifts back as you scroll */
 #hero-section .block-layout{transform-origin:50% 0;will-change:transform,opacity}

 /* images ease in from a slight zoom */
 .sva-zoom{overflow:hidden}
 .sva-zoom img{transform:scale(var(--sva-z,1.08));transition:transform .2s linear;will-change:transform}
}

/* frosted sticky nav */
.top-blocks--sticky .block-header{transition:background-color .5s var(--sva-ease),box-shadow .5s var(--sva-ease),backdrop-filter .5s var(--sva-ease)}
html.sva-scrolled .top-blocks--sticky .block-header{
  background-color:rgba(255,255,255,.72)!important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 1px 0 rgba(0,0,0,.06)}
html.sva-scrolled .top-blocks--sticky .block-header .background{opacity:0}

/* buttons and cards: softer, springier hover */
.grid-button{transition:transform .5s var(--sva-ease),box-shadow .5s var(--sva-ease),background-color .3s ease,color .3s ease!important}
.grid-button:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 30px rgba(86,60,0,.18)}
.grid-button:active{transform:scale(.98)}
.hover--lift{transition:transform .6s var(--sva-ease),box-shadow .6s var(--sva-ease)!important}
.layout-element__component--GridCard{transition:transform .6s var(--sva-ease),box-shadow .6s var(--sva-ease)}
.layout-element__component--GridCard:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,0,0,.08)}

/* thin progress line in the brand gold */
#sva-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:rgb(173,121,0);z-index:9999;pointer-events:none}

/* accents layer v2 */
:root{--sva-gold:173,121,0;--sva-gold-lt:218,194,140;--sva-cream:240,230,209;--sva-brown:86,60,0}
/* 1. Hero: CSS-only drifting gold light + dot grid (survives builder re-render) */
#hero-section{position:relative;isolation:isolate;overflow:hidden}
#hero-section>.block-background{overflow:hidden}
#hero-section>.block-background::before,#hero-section>.block-background::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;will-change:transform;z-index:0}
#hero-section>.block-background::before{width:46vw;height:46vw;left:-8vw;top:-4vw;opacity:.6;background:radial-gradient(circle,rgba(var(--sva-gold-lt),.8),rgba(var(--sva-gold-lt),0) 70%);animation:svaDrift1 22s ease-in-out infinite alternate}
#hero-section>.block-background::after{width:52vw;height:40vw;right:-10vw;top:-8vw;opacity:.7;background:radial-gradient(circle at 35% 40%,rgba(var(--sva-cream),1),rgba(var(--sva-cream),0) 60%),radial-gradient(circle at 70% 75%,rgba(var(--sva-gold),.3),rgba(var(--sva-gold),0) 45%);animation:svaDrift2 26s ease-in-out infinite alternate}
#hero-section::before{content:"";position:absolute;inset:0;z-index:14;pointer-events:none;background-image:radial-gradient(rgba(var(--sva-brown),.13) 1px,transparent 1.2px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,#000 0%,transparent 75%);mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,#000 0%,transparent 75%)}
#hero-section::after{content:"";position:absolute;inset:0;z-index:14;pointer-events:none;opacity:0;transition:opacity .8s ease;background:radial-gradient(420px circle at var(--sva-mx,50%) var(--sva-my,40%),rgba(var(--sva-gold-lt),.3),transparent 60%)}
#hero-section:hover::after{opacity:1}
#hero-section>.block-layout{z-index:15}
@keyframes svaDrift1{to{transform:translate3d(12vw,8vw,0) scale(1.15)}}
@keyframes svaDrift2{to{transform:translate3d(-12vw,8vw,0) scale(.9)}}

/* 2. Headline: gold sheen on the second sentence */
.sva-gold-text{background:linear-gradient(100deg,rgb(var(--sva-brown)) 0%,rgb(var(--sva-gold)) 35%,rgb(var(--sva-gold-lt)) 50%,rgb(var(--sva-gold)) 65%,rgb(var(--sva-brown)) 100%);
 background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;animation:svaSheen 7s ease-in-out infinite}
@keyframes svaSheen{0%,100%{background-position:100% 0}50%{background-position:0% 0}}

/* 3. Section titles: gold rule draws in */
.sva-h2{position:relative}
.sva-h2::after{content:"";display:block;height:2px;width:56px;margin:14px auto 0;border-radius:2px;
 background:linear-gradient(90deg,rgba(var(--sva-gold),0),rgb(var(--sva-gold)),rgba(var(--sva-gold),0));
 transform:scaleX(0);transition:transform 1.2s cubic-bezier(.16,1,.3,1) .25s}
.sva-h2.sva-left::after{margin-left:0;background:linear-gradient(90deg,rgb(var(--sva-gold)),rgba(var(--sva-gold),0));transform-origin:0 50%}
.sva-h2.sva-drawn::after{transform:scaleX(1)}

/* 4. Cards: soft gold spotlight + hairline that follows the cursor */
.layout-element__component--GridCard{position:relative}
.layout-element__component--GridCard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s ease;
 background:radial-gradient(320px circle at var(--cx,50%) var(--cy,50%),rgba(var(--sva-gold-lt),.22),transparent 65%);
 box-shadow:inset 0 0 0 1px rgba(var(--sva-gold),.28)}
.layout-element__component--GridCard:hover::after{opacity:1}

/* 5. Primary buttons: a quiet light sweep every few seconds */
.grid-button--primary{position:relative;overflow:hidden;isolation:isolate}
.grid-button--primary::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-0;pointer-events:none;
 background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:svaSweep 6s ease-in-out infinite 2s}
@keyframes svaSweep{0%{left:-60%}22%,100%{left:130%}}

/* 6. Warm the gray services band and add gentle section depth */
#real-estate-va-services>.block-background{background:linear-gradient(180deg,#faf7f0 0%,#f3eee3 100%)!important}

/* 7. Film grain for a printed, premium feel */
#sva-grain{position:fixed;inset:-50%;pointer-events:none;z-index:9998;opacity:.035;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
 animation:svaGrain 1.2s steps(4) infinite}
@keyframes svaGrain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

@media (max-width:920px){#hero-section>.block-background::before,#hero-section>.block-background::after{filter:blur(45px)}#hero-section::after{display:none}}
@media (prefers-reduced-motion:reduce){#hero-section>.block-background::before,#hero-section>.block-background::after,.sva-gold-text,.grid-button--primary::before,#sva-grain{animation:none!important}}