/* ============================================================================
   Avancé Vein Care — R73.1 · LIQUID GLASS THEME (homepage only)
   ----------------------------------------------------------------------------
   A scoped visual layer over the shared R70 stylesheet. Nothing here applies
   unless <body> carries the class  avc-liquid-glass.

   ROLLBACK (three hooks, all in /index.html):
     1. remove the <link> to this file (and the small <style id="avc-liquid-glass-clip">),
     2. remove the class  avc-liquid-glass  from <body>,
     3. remove the <svg id="avc-liquid-glass-defs"> block.
   Any one of 1 or 2 alone already returns the page to plain R72.

   WHAT IT TOUCHES
     §1 tokens            one switchboard; every fallback only re-points these
     §2 chrome            #site-header and the mobile Call/Book bar
     §3 hero light        two decorative pools behind the hero copy (one pass)
     §4 hero frame        .mx-hero-slot, its photo, the squircle corners
     §5 hero badge        .mx-hero-badge
     §6 hero CTAs         spring lift on hover, press response
     §7 fallbacks         no backdrop-filter · solid surfaces · reduced
                          transparency · more contrast · forced colours ·
                          reduced motion · hidden tab · print

   RULES KEPT
     Brand navy #001B3D and gold #CFB63D only (plus neutral white highlights).
     backdrop-filter on three surfaces: header, mobile bar, hero badge.
     No full-viewport blur, no render loop, no animated blur or shadow,
     no will-change, no translateZ. Motion is transform-only.
   ========================================================================== */

/* ---- §1 tokens ---------------------------------------------------------- */
html body.avc-liquid-glass{
  --lqg-navy:0 27 61;                 /* #001B3D */
  --lqg-gold:207 182 61;              /* #CFB63D */
  --lqg-ink:0 16 32;                  /* shadow navy */
  /* --gg-tint is the site's existing glass-tint preference (0.05–0.20, default 0.10). */
  --lqg-chrome-fill:rgb(var(--lqg-navy) / calc(.62 + var(--gg-tint,.1)));
  --lqg-chrome-fill-scrolled:rgb(var(--lqg-navy) / calc(.72 + var(--gg-tint,.1)));
  --lqg-dock-fill:rgb(var(--lqg-navy) / calc(.78 + var(--gg-tint,.1)));
  --lqg-chrome-sheen:linear-gradient(180deg,rgb(255 255 255 / .07),rgb(255 255 255 / 0) 44%);
  --lqg-chrome-filter:blur(30px) saturate(150%);
  --lqg-frame-fill:rgb(var(--lqg-navy) / .52);
  --lqg-frame-sheen:linear-gradient(180deg,rgb(255 255 255 / .10),rgb(255 255 255 / .02) 30%,rgb(var(--lqg-gold) / .06));
  --lqg-badge-fill:rgb(var(--lqg-navy) / .74);
  --lqg-badge-sheen:linear-gradient(180deg,rgb(255 255 255 / .10),rgb(255 255 255 / 0) 62%);
  --lqg-badge-filter:blur(12px) saturate(140%);
  --lqg-rim:rgb(255 255 255 / .20);
  --lqg-spec:rgb(255 255 255 / .42);
  --lqg-warm:rgb(var(--lqg-gold) / .26);
  --lqg-pools:block;
  /* Damped spring, mass 1 · stiffness 300 · damping 20 (ζ 0.577), 440 ms. */
  --lqg-spring-time:440ms;
  --lqg-spring:cubic-bezier(.3,1.4,.5,1);
}
@supports (transition-timing-function:linear(0,1)){
  html body.avc-liquid-glass{
    --lqg-spring:linear(0,.0522,.18,.346,.5213,.6857,.8266,.9381,1.0189,1.0712,1.0993,1.1084,1.1039,1.0907,1.073,1.0539,1.0359,1.0203,1.0078,.9987,.9928,.9895,1);
  }
}
/* Compact chrome (the full-width header bar and the floating Call/Book bar): lighter blur, darker scrim. */
@media (max-width:1023px){
  html body.avc-liquid-glass{
    --lqg-chrome-filter:blur(14px) saturate(150%);
    --lqg-chrome-fill:rgb(var(--lqg-navy) / calc(.72 + var(--gg-tint,.1)));
    --lqg-chrome-fill-scrolled:rgb(var(--lqg-navy) / calc(.80 + var(--gg-tint,.1)));
  }
}

/* ---- §2 chrome ---------------------------------------------------------- */
/* body#top (the homepage's existing id) is in these selectors on purpose: R70 styles the header
   and the Call/Book bar through :is(#site-header, …) lists, which carry id-level specificity. */
html body#top.avc-liquid-glass.avc-r70 #site-header,
html body#top.avc-liquid-glass.avc-r70 #site-header.scrolled{
  background:var(--lqg-chrome-sheen),var(--lqg-chrome-fill);
  -webkit-backdrop-filter:var(--lqg-chrome-filter);
  backdrop-filter:var(--lqg-chrome-filter);
  border-bottom-color:var(--lqg-rim);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .28),inset 0 -1px 0 var(--lqg-warm),0 14px 32px -16px rgb(var(--lqg-ink) / .66);
  transition:background-color .24s ease,border-color .24s ease;
}
html body#top.avc-liquid-glass.avc-r70 #site-header.scrolled{
  background:var(--lqg-chrome-sheen),var(--lqg-chrome-fill-scrolled);
}
@media (min-width:1024px){
  html body#top.avc-liquid-glass.avc-r70 #site-header,
  html body#top.avc-liquid-glass.avc-r70 #site-header.scrolled{
    border-color:var(--lqg-rim);
    box-shadow:inset 0 1px 0 var(--lqg-spec),inset 0 -1px 0 var(--lqg-warm),0 18px 44px -18px rgb(var(--lqg-ink) / .64),0 6px 16px -8px rgb(var(--lqg-ink) / .46);
  }
  /* The R66 rim ring, re-lit: specular along the top edge, warm reflection along the bottom. */
  html body#top.avc-liquid-glass.avc-r70 #site-header::after{
    background:linear-gradient(180deg,rgb(255 255 255 / .58),rgb(255 255 255 / .08) 36%,rgb(255 255 255 / .04) 64%,rgb(var(--lqg-gold) / .46));
  }
}
@media (max-width:1023px){
  html body#top.avc-liquid-glass.avc-r70 .mobile-cta-bar{
    background:var(--lqg-chrome-sheen),var(--lqg-dock-fill);
    -webkit-backdrop-filter:var(--lqg-chrome-filter);
    backdrop-filter:var(--lqg-chrome-filter);
    border-color:var(--lqg-rim);
    box-shadow:inset 0 1px 0 var(--lqg-spec),inset 0 -1px 0 var(--lqg-warm),0 16px 36px -14px rgb(var(--lqg-ink) / .72),0 4px 12px -6px rgb(var(--lqg-ink) / .5);
  }
}

/* ---- §3 hero light: two decorative pools, behind the content ------------ */
/* .mx-hero is position:relative · overflow:hidden · isolation:isolate (R70), so z-index:-1
   keeps the pools inside the hero and under everything in it. Pseudo-elements with empty
   content are not exposed to assistive technology. */
html body.avc-liquid-glass.avc-r70 .mx-hero::before,
html body.avc-liquid-glass.avc-r70 .mx-hero::after{
  content:"";
  display:var(--lqg-pools);
  position:absolute;
  z-index:-1;
  max-width:none;
  aspect-ratio:auto;
  border-radius:0;
  opacity:1;
  pointer-events:none;
  animation:none;
}
html body.avc-liquid-glass.avc-r70 .mx-hero::before{   /* blue pool */
  inset:-18% auto auto -14%;
  width:76%;
  height:96%;
  background:radial-gradient(closest-side,rgb(46 98 176 / .34),rgb(24 64 132 / .16) 52%,rgb(var(--lqg-navy) / 0));
}
html body.avc-liquid-glass.avc-r70 .mx-hero::after{    /* restrained gold reflection */
  inset:4% -10% auto auto;
  width:58%;
  height:74%;
  background:radial-gradient(closest-side,rgb(var(--lqg-gold) / .15),rgb(var(--lqg-gold) / .05) 55%,rgb(var(--lqg-gold) / 0));
}
@media (max-width:900px){
  html body.avc-liquid-glass.avc-r70 .mx-hero::before{inset:-8% auto auto -40%;width:150%;height:52%}
  html body.avc-liquid-glass.avc-r70 .mx-hero::after{inset:50% -45% auto auto;width:130%;height:44%}
}
@keyframes avc-lqg-pool-blue{from{transform:translate(-5%,4%) scale(1.1)}to{transform:translate(0,0) scale(1)}}
@keyframes avc-lqg-pool-gold{from{transform:translate(6%,-5%) scale(.92)}to{transform:translate(0,0) scale(1)}}
/* One slow settling pass. The copy, the CTAs and the photo are never part of it. */
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="reduced"]) body.avc-liquid-glass.avc-r70 .mx-hero::before{animation:avc-lqg-pool-blue 4.8s cubic-bezier(.22,.8,.3,1) 1}
  html:not([data-motion="reduced"]) body.avc-liquid-glass.avc-r70 .mx-hero::after{animation:avc-lqg-pool-gold 4.8s cubic-bezier(.22,.8,.3,1) 1}
  html[data-motion-paused]:not([data-motion="reduced"]) body.avc-liquid-glass.avc-r70 .mx-hero::before,
  html[data-motion-paused]:not([data-motion="reduced"]) body.avc-liquid-glass.avc-r70 .mx-hero::after{animation-play-state:paused}
}

/* ---- §4 hero frame ------------------------------------------------------ */
/* A glass frame without blur of its own (the badge inside carries the only blur here). */
html body.avc-liquid-glass.avc-r70 .mx-hero-slot.lg-card.lg-card{
  background:var(--lqg-frame-sheen),var(--lqg-frame-fill);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:1px solid var(--lqg-rim);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .38),inset 0 -1px 0 rgb(var(--lqg-gold) / .32),inset 0 0 0 1px rgb(255 255 255 / .05),0 28px 60px -22px rgb(var(--lqg-ink) / .74),0 10px 24px -12px rgb(var(--lqg-ink) / .5);
  transition:transform var(--motion-panel,240ms) var(--ease-standard,ease);
}
html body.avc-liquid-glass.avc-r70 .mx-hero-slot>.lg-edge{opacity:.62;transition:none}
/* Continuous corners where the platform draws them. */
@supports (corner-shape:squircle){
  html body.avc-liquid-glass.avc-r70 .mx-hero-slot.lg-card.lg-card,
  html body.avc-liquid-glass.avc-r70 .mx-hero-slot>.lg-edge{border-radius:34px;corner-shape:squircle}
  html body.avc-liquid-glass.avc-r70 .mx-hero-photo.fluid-mask-container{--r67-mask-radius:27px;border-radius:27px;corner-shape:squircle}
}
/* Elsewhere the ordinary radii stay, and the image alone is clipped by the inline SVG clipPath;
   that rule lives next to the SVG in index.html (<style id="avc-liquid-glass-clip">) so the
   #fragment always resolves against the document. */

/* ---- §5 hero badge ------------------------------------------------------ */
html body.avc-liquid-glass.avc-r70 .mx-hero-badge.lg-card.lg-card{
  background:var(--lqg-badge-sheen),var(--lqg-badge-fill);
  -webkit-backdrop-filter:var(--lqg-badge-filter);
  backdrop-filter:var(--lqg-badge-filter);
  border:1px solid rgb(255 255 255 / .22);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .34),inset 0 -1px 0 rgb(var(--lqg-gold) / .24),0 10px 24px -10px rgb(var(--lqg-ink) / .72);
  transition:none;
}

/* ---- §6 hero CTAs: spring lift ----------------------------------------- */
/* Transform is the only animated property. The R66 hover gleam, brightness filter and
   shadow swap are switched off on these two controls so nothing stacks on the spring. */
html body.avc-liquid-glass.avc-r70 .mx-hero-ctas :is(.btn-primary,.mx-textlink){
  transition:transform var(--lqg-spring-time) var(--lqg-spring);
}
html body.avc-liquid-glass.avc-r70 .mx-hero-ctas .btn-primary,
html body.avc-liquid-glass.avc-r70 .mx-hero-ctas .btn-primary:is(:hover,:focus-visible,:active){
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .55),inset 0 -1px 0 rgb(0 0 0 / .12),0 10px 24px -8px rgb(var(--lqg-gold) / .45),0 6px 16px rgb(var(--lqg-ink) / .3);
  filter:none;
  animation:none;
}
html body.avc-liquid-glass.avc-r70 .mx-hero-ctas .mx-textlink:hover{transform:none}
@media (hover:hover) and (pointer:fine){
  html body.avc-liquid-glass.avc-r70 .mx-hero-ctas :is(.btn-primary,.mx-textlink):hover{
    transform:translateY(-2px) scale(1.018);
    animation:none;
  }
}
html body.avc-liquid-glass.avc-r70 .mx-hero-ctas :is(.btn-primary,.mx-textlink):active{
  transform:translateY(0) scale(.985);
  transition:transform 90ms ease-out;
}

/* ---- §7 fallbacks ------------------------------------------------------- */
/* 7.1 No backdrop-filter: opaque navy chrome and badge. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html body.avc-liquid-glass{
    --lqg-chrome-fill:rgb(var(--lqg-navy));
    --lqg-chrome-fill-scrolled:rgb(var(--lqg-navy));
    --lqg-dock-fill:rgb(var(--lqg-navy));
    --lqg-badge-fill:rgb(var(--lqg-navy));
    --lqg-chrome-filter:none;
    --lqg-badge-filter:none;
  }
}
/* 7.2 The site's own "Solid surfaces" setting. */
html[data-glass="solid"] body.avc-liquid-glass{
  --lqg-chrome-fill:rgb(var(--lqg-navy));
  --lqg-chrome-fill-scrolled:rgb(var(--lqg-navy));
  --lqg-dock-fill:rgb(var(--lqg-navy));
  --lqg-frame-fill:rgb(var(--lqg-navy));
  --lqg-badge-fill:rgb(var(--lqg-navy));
  --lqg-chrome-sheen:none;
  --lqg-frame-sheen:none;
  --lqg-badge-sheen:none;
  --lqg-chrome-filter:none;
  --lqg-badge-filter:none;
  --lqg-pools:none;
}
/* 7.3 OS: reduced transparency or increased contrast. */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html body.avc-liquid-glass{
    --lqg-chrome-fill:rgb(var(--lqg-navy));
    --lqg-chrome-fill-scrolled:rgb(var(--lqg-navy));
    --lqg-dock-fill:rgb(var(--lqg-navy));
    --lqg-frame-fill:rgb(var(--lqg-navy));
    --lqg-badge-fill:rgb(var(--lqg-navy));
    --lqg-chrome-sheen:none;
    --lqg-frame-sheen:none;
    --lqg-badge-sheen:none;
    --lqg-chrome-filter:none;
    --lqg-badge-filter:none;
    --lqg-pools:none;
  }
}
@media (prefers-contrast:more){
  html body.avc-liquid-glass{--lqg-rim:rgb(255 255 255 / .7);--lqg-spec:rgb(255 255 255 / .7);--lqg-warm:rgb(255 255 255 / 0)}
  html body.avc-liquid-glass.avc-r70 .mx-hero-badge.lg-card.lg-card{border-color:rgb(255 255 255 / .7)}
}
/* 7.4 Forced colours: system colours, no material. */
@media (forced-colors:active){
  html body.avc-liquid-glass{--lqg-chrome-filter:none;--lqg-badge-filter:none;--lqg-pools:none}
  html body#top.avc-liquid-glass.avc-r70 #site-header,
  html body#top.avc-liquid-glass.avc-r70 #site-header.scrolled,
  html body#top.avc-liquid-glass.avc-r70 .mobile-cta-bar,
  html body.avc-liquid-glass.avc-r70 .mx-hero-slot.lg-card.lg-card,
  html body.avc-liquid-glass.avc-r70 .mx-hero-badge.lg-card.lg-card{
    background:Canvas;
    color:CanvasText;
    border:1px solid CanvasText;
    box-shadow:none;
  }
  html body#top.avc-liquid-glass.avc-r70 #site-header::after{display:none}
}
/* 7.5 Reduced motion (OS or the site's own toggle): no pool pass, no spring. */
html[data-motion="reduced"] body.avc-liquid-glass.avc-r70 .mx-hero::before,
html[data-motion="reduced"] body.avc-liquid-glass.avc-r70 .mx-hero::after{animation:none}
html[data-motion="reduced"] body.avc-liquid-glass.avc-r70 .mx-hero-ctas :is(.btn-primary,.mx-textlink),
html[data-motion="reduced"] body.avc-liquid-glass.avc-r70 .mx-hero-ctas :is(.btn-primary,.mx-textlink):is(:hover,:focus-visible,:active),
html[data-motion="reduced"] body.avc-liquid-glass.avc-r70 .mx-hero-slot.lg-card.lg-card{transition:none;transform:none}
@media (prefers-reduced-motion:reduce){
  html body.avc-liquid-glass.avc-r70 .mx-hero::before,
  html body.avc-liquid-glass.avc-r70 .mx-hero::after{animation:none}
  html body.avc-liquid-glass.avc-r70 .mx-hero-ctas :is(.btn-primary,.mx-textlink),
  html body.avc-liquid-glass.avc-r70 .mx-hero-ctas :is(.btn-primary,.mx-textlink):is(:hover,:focus-visible,:active),
  html body.avc-liquid-glass.avc-r70 .mx-hero-slot.lg-card.lg-card{transition:none;transform:none}
}
/* 7.6 Print: no material, no light. */
@media print{
  html body.avc-liquid-glass{--lqg-chrome-filter:none;--lqg-badge-filter:none;--lqg-pools:none}
}