/* Homepage hover and background options, 8 Oct 2026.
   Local review candidate on production 7578dc7c. Option classes on <html>:
   hv-a / hv-b  button wipe speed (default .6s; hv-b .9s)
   sh-g / sh-b  chooser heading tint, green (default) or blue
   Scoped to the three homepages. */

/* ---------- h1  slower button wipe ---------- */
html{--hv-wipe:.6s}
html.hv-b{--hv-wipe:.9s}
html.hv-old{--hv-wipe:.26s}
/* the original wipe rules sit in @layer vx, where !important outranks unlayered rules, so this joins that layer */
@layer vx{
@media (hover:hover){
html:not(._) .hs-btn-line::before,html:not(._) .hs-btn-sm::before,
html:not(._) .hs-btn-fill::before,html:not(._) .hr-call::before{
  transition:transform calc(var(--hv-wipe)*.7) cubic-bezier(.4,.05,.25,1)!important;
}
html:not(._) .hs-btn-line:hover::before,html:not(._) .hs-btn-line:focus-visible::before,
html:not(._) .hs-btn-sm:hover::before,html:not(._) .hs-btn-sm:focus-visible::before,
html:not(._) .hs-btn-fill:hover::before,html:not(._) .hs-btn-fill:focus-visible::before,
html:not(._) .hr-call:hover::before,html:not(._) .hr-call:focus-visible::before{
  transition:transform var(--hv-wipe) cubic-bezier(.4,.05,.25,1)!important;
}
/* the label turns light while the fill is passing under it, not before */
html:not(._) .hs-btn-line:hover,html:not(._) .hs-btn-line:focus-visible,
html:not(._) .hs-btn-sm:hover,html:not(._) .hs-btn-sm:focus-visible,
html:not(._) .hr-call:hover,html:not(._) .hr-call:focus-visible{
  transition:color .3s ease calc(var(--hv-wipe)*.3),border-color .3s ease,background-color .2s ease!important;
}
html:not(._) .hs-btn-line:hover>span,html:not(._) .hs-btn-line:focus-visible>span,
html:not(._) .hs-btn-sm:hover>span,html:not(._) .hs-btn-sm:focus-visible>span,
html:not(._) .hr-call:hover>span,html:not(._) .hr-call:hover>svg,
html:not(._) .hr-call:focus-visible>span,html:not(._) .hr-call:focus-visible>svg,
html:not(._) .hs-btn-fill:hover>span,html:not(._) .hs-btn-fill:focus-visible>span{
  transition:color .3s ease calc(var(--hv-wipe)*.3)!important;
}
}
@media (prefers-reduced-motion:reduce){
html:not(._) .hs-btn-line::before,html:not(._) .hs-btn-sm::before,
html:not(._) .hs-btn-fill::before,html:not(._) .hr-call::before{transition:none!important}
}
}

/* ---------- h2  "Start with your symptoms" heading tint ---------- */
html:not(._):not(.__) body.home.home main#main:not(#vx-none) details.hs-ihave>summary{
  background:#edf0e4!important;border-radius:19px;
}
html:not(._):not(.__) body.home.home main#main:not(#vx-none) details.hs-ihave[open]>summary{
  border-radius:19px 19px 0 0;border-bottom:1px solid rgba(24,61,105,.12);
}
html.sh-b:not(._):not(.__) body.home.home main#main:not(#vx-none) details.hs-ihave>summary{background:var(--fg-surface,rgba(250,248,242,.62))!important}

/* ---------- h4  Front / Back of the eye lists: same blue hover as the symptom list ---------- */
html:not(._) #two-specialties .hs-path .hs-links li a{
  margin:0 -8px;padding:10px 8px;border-radius:12px;border-bottom-color:transparent;
  transition:background-color .22s ease,color .22s ease;
}
html:not(._) #two-specialties .hs-path .hs-links li{border-bottom:1px solid rgba(24,61,105,.16)}
html:not(._) #two-specialties .hs-path .hs-links li:last-child{border-bottom:0}
html:not(._) #two-specialties .hs-path .hs-links li a .hs-ar{transition:color .22s ease}
@media (hover:hover){
html:not(._) #two-specialties .hs-path .hs-links li a:hover{background:#285581!important;color:#fff!important}
html:not(._) #two-specialties .hs-path .hs-links li a:hover span{color:#fff!important;text-decoration:none!important}
}
html:not(._) #two-specialties .hs-path .hs-links li a:focus-visible{background:#285581!important;color:#fff!important;outline:2px solid #15314f;outline-offset:2px}
html:not(._) #two-specialties .hs-path .hs-links li a:focus-visible span{color:#fff!important}

/* ---------- h5  "How does the planning differ by operation?" tabs ---------- */
html:not(._) .hr-tfold .hr-tab{
  transition:background-color .22s ease,color .22s ease,border-color .22s ease,translate .2s;
}
@media (hover:hover){
html:not(._):not(.__) body.home.home main#main:not(#vx-none) :is(li#vr-expertise,button[id^='hr-tab-']).hr-tab:hover{
  background:#285581!important;border-color:#285581!important;color:#fff!important;
}
html:not(._):not(.__) body.home.home main#main:not(#vx-none) :is(li#vr-expertise,button[id^='hr-tab-']).hr-tab:hover *{color:#fff!important}
}
/* the selected operation stays dark blue, not only while hovered */
html:not(._):not(.__) body.home.home main#main:not(#vx-none) :is(li#vr-expertise,button[id^='hr-tab-']).hr-tab[aria-selected="true"]{
  background:#285581!important;border-color:#285581!important;color:#fff!important;
}
html:not(._):not(.__) body.home.home main#main:not(#vx-none) :is(li#vr-expertise,button[id^='hr-tab-']).hr-tab[aria-selected="true"] *{color:#fff!important}
html:not(._):not(.__) body.home.home main#main:not(#vx-none) :is(li#vr-expertise,button[id^='hr-tab-']).hr-tab:focus-visible{
  background:#285581!important;border-color:#285581!important;color:#fff!important;outline:2px solid #15314f;outline-offset:2px;
}
@media (hover:none){
html:not(._):not(.__) body.home.home main#main:not(#vx-none) :is(li#vr-expertise,button[id^='hr-tab-']).hr-tab:not([aria-selected="true"]):hover{
  background:rgba(255,248,232,.56)!important;border-color:rgba(24,61,105,.16)!important;color:#183d69!important;
}
}
@media (prefers-reduced-motion:reduce){
html:not(._) #two-specialties .hs-path .hs-links li a,html:not(._) .hr-tfold .hr-tab{transition:none}
}

/* ---------- g1  desktop gold, option B layout, lightened to variant 1.5 (gold x0.55, blue x0.60, base #f6f2e8) ---------- */
@media (min-width:761px){
html:not(._):not(.__):not(.___):not(.____) body.home.home main#main:not(#vx-none):not(#wq-x):not(#wq-y){
  background-color:#f6f2e8!important;background-image:radial-gradient(48% 36% at 8% 17%, rgba(116,146,176,0.096) 0%, rgba(116,146,176,0) 72%),radial-gradient(44% 34% at 90% 23%, rgba(96,124,150,0.072) 0%, rgba(96,124,150,0) 72%),radial-gradient(50% 38% at 73% 74%, rgba(203,168,104,0.209) 0%, rgba(203,168,104,0) 72%),radial-gradient(46% 34% at 13% 66%, rgba(116,146,176,0.072) 0%, rgba(116,146,176,0) 72%),radial-gradient(52% 30% at 50% 38%, rgba(214,182,118,0.165) 0%, rgba(214,182,118,0) 72%),radial-gradient(46% 26% at 20% 90%, rgba(222,190,128,0.187) 0%, rgba(222,190,128,0) 72%),radial-gradient(40% 24% at 80% 8%, rgba(206,174,112,0.165) 0%, rgba(206,174,112,0) 72%),radial-gradient(40% 22% at 35% 52%, rgba(200,186,164,0.143) 0%, rgba(200,186,164,0) 72%),radial-gradient(44% 26% at 62% 58%, rgba(230,202,150,0.154) 0%, rgba(230,202,150,0) 72%)!important;background-size:auto!important;background-repeat:no-repeat!important
}
}