/* ============================================================= *
 *  Fluid Button — cursor fill + text slide
 *  https://fluidbutton.framer.website/
 * ============================================================= */

a.btn, button.btn,
a.btn-primary, button.btn-primary,
a.btn-outline, button.btn-outline,
a.btn-ghost, button.btn-ghost,
a.btn-line, button.btn-line,
a.btn-gold-line, button.btn-gold-line,
a.btn-ink, button.btn-ink{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:6px !important;
  -webkit-tap-highlight-color:transparent;
}

.is-fluid{
  --fluid-dur:.65s;
  --fluid-ease:cubic-bezier(.22,1,.36,1);
  --fluid-fill-bg:var(--pearl);
  --fluid-fill-fg:var(--ink);
  --fx:50%;
  --fy:50%;
  transition:
    color .35s var(--fluid-ease),
    border-color .45s var(--fluid-ease),
    box-shadow .5s var(--fluid-ease),
    transform .55s var(--fluid-ease) !important;
}

/* Light backgrounds — solid gold default, pearl hover (previous design) */
.is-fluid.btn-primary,
.is-fluid.btn-primary:focus-visible,
.is-fluid.btn-primary.btn-gold,
.is-fluid.btn-primary.btn-gold:focus-visible{
  --fluid-fill-bg:var(--pearl);
  --fluid-fill-fg:var(--velvet);
  background:var(--gold) !important;
  border-color:var(--gold) !important;
  color:var(--velvet);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
.is-fluid.btn-primary:hover,
.is-fluid.btn-primary.is-filling,
.is-fluid.btn-primary:focus-visible:hover,
.is-fluid.btn-primary.btn-gold:hover,
.is-fluid.btn-primary.btn-gold.is-filling,
.is-fluid.btn-primary.btn-gold:focus-visible:hover{
  background:var(--pearl) !important;
  border-color:var(--gold) !important;
  color:var(--velvet) !important;
}
.propose .is-fluid.btn-primary,
.propose .is-fluid.btn-primary:focus-visible{
  background:linear-gradient(135deg,var(--gold),#c9962a) !important;
  border-color:transparent !important;
}
.is-fluid.btn-ghost,
.is-fluid.btn-ghost:hover,
.is-fluid.btn-ghost:focus-visible{
  --fluid-fill-bg:var(--pearl);
  --fluid-fill-fg:var(--velvet);
  background:transparent !important;
  color:var(--pearl);
}
.is-fluid.btn-ghost:hover,
.is-fluid.btn-ghost:focus-visible,
.is-fluid.btn-ghost.is-filling{
  color:var(--velvet) !important;
  border-color:var(--pearl) !important;
}
.is-fluid.btn-line,
.is-fluid.btn-line:hover,
.is-fluid.btn-line:focus-visible{
  --fluid-fill-bg:var(--purple);
  --fluid-fill-fg:var(--pearl);
  background:transparent !important;
  color:var(--purple);
}
.is-fluid.btn-line:hover,
.is-fluid.btn-line:focus-visible,
.is-fluid.btn-line.is-filling{
  color:var(--pearl) !important;
  border-color:var(--purple) !important;
}
/* Commission cards — gold outline → gold fill; featured purple → pearl (home-style) */
.commission .is-fluid.btn-line,
.commission .is-fluid.btn-line:hover,
.commission .is-fluid.btn-line:focus-visible,
.commission .is-fluid.comm-cta.btn-line,
.commission a.is-fluid.btn-line,
.is-fluid.btn-gold-line,
.is-fluid.btn-gold-line:hover,
.is-fluid.btn-gold-line:focus-visible,
.commission .is-fluid.btn-gold-line{
  --fluid-fill-bg:var(--gold)!important;
  --fluid-fill-fg:var(--velvet)!important;
  background:transparent !important;
  color:var(--gold) !important;
  border-color:var(--gold) !important;
}
.commission .is-fluid.btn-line:hover,
.commission .is-fluid.btn-line:focus-visible,
.commission .is-fluid.btn-line.is-filling,
.commission .is-fluid.comm-cta.btn-line:hover,
.commission .is-fluid.comm-cta.btn-line.is-filling,
.is-fluid.btn-gold-line:hover,
.is-fluid.btn-gold-line:focus-visible,
.is-fluid.btn-gold-line.is-filling{
  color:var(--velvet) !important;
  border-color:var(--gold) !important;
}
/* Recommended purple CTA — pearl pour on hover (same interaction as home gold→pearl) */
.comm-card.is-featured .is-fluid.comm-cta.btn-primary,
.commission .comm-card.is-featured .is-fluid.comm-cta.btn-primary,
.comm-card.is-featured .is-fluid.comm-cta.btn-primary:focus-visible,
.commission .comm-card.is-featured .is-fluid.comm-cta.btn-primary:focus-visible{
  --fluid-fill-bg:var(--pearl);
  --fluid-fill-fg:var(--velvet);
  background:var(--purple) !important;
  border-color:var(--purple) !important;
  color:var(--pearl) !important;
}
.comm-card.is-featured .is-fluid.comm-cta.btn-primary:hover,
.comm-card.is-featured .is-fluid.comm-cta.btn-primary:focus-visible:hover,
.comm-card.is-featured .is-fluid.comm-cta.btn-primary.is-filling,
.commission .comm-card.is-featured .is-fluid.comm-cta.btn-primary:hover,
.commission .comm-card.is-featured .is-fluid.comm-cta.btn-primary:focus-visible:hover,
.commission .comm-card.is-featured .is-fluid.comm-cta.btn-primary.is-filling{
  background:var(--pearl) !important;
  border-color:var(--pearl) !important;
  color:var(--velvet) !important;
}
.is-fluid.btn-ink,
.is-fluid.btn-ink:hover,
.is-fluid.btn-ink:focus-visible{
  --fluid-fill-bg:var(--purple-deep);
  --fluid-fill-fg:var(--pearl);
  background:var(--purple) !important;
  border-color:var(--purple) !important;
  color:var(--pearl);
}
.is-fluid.btn-outline,
.is-fluid.btn-outline:hover,
.is-fluid.btn-outline:focus-visible{
  --fluid-fill-bg:var(--purple);
  --fluid-fill-fg:var(--pearl);
  background:transparent !important;
  color:var(--muted, var(--charcoal));
}
.is-fluid.btn-outline:hover,
.is-fluid.btn-outline:focus-visible,
.is-fluid.btn-outline.is-filling{
  color:var(--pearl) !important;
  border-color:var(--purple) !important;
}
/* Dark cinematic — solid gold primary (match home calculator CTA); glass only on secondary surfaces */
footer.site .is-fluid.btn-primary,
footer.site .is-fluid.btn-primary:focus-visible,
.ctasec .is-fluid.btn-primary,
.ctasec .is-fluid.btn-primary:focus-visible,
.cnav .is-fluid.btn-primary,
.cnav .is-fluid.btn-primary:focus-visible,
.cr-cta .is-fluid.btn-primary,
.cr-cta .is-fluid.btn-primary:focus-visible,
.is-fluid.rg-cta,
.is-fluid.svc-flip-cta,
.is-fluid.sh-card-cta,
.is-fluid.lbox-enquire,
.is-fluid.rg-cta:focus-visible,
.is-fluid.svc-flip-cta:focus-visible,
.is-fluid.sh-card-cta:focus-visible{
  --fluid-fill-bg:var(--pearl);
  --fluid-fill-fg:var(--velvet);
  background:var(--gold) !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-color:var(--gold) !important;
  color:var(--velvet) !important;
  box-shadow:none;
}
/* Inner-page heroes: filled gold primary like #calculator on home */
.phero .is-fluid.btn-primary,
.phero .is-fluid.btn-primary:focus-visible,
.calc-hero .is-fluid.btn-primary,
.calc-hero .is-fluid.btn-primary:focus-visible{
  --fluid-fill-bg:var(--pearl);
  --fluid-fill-fg:var(--velvet);
  background:var(--gold) !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-color:var(--gold) !important;
  color:var(--velvet) !important;
  box-shadow:none;
}
.phero .is-fluid.btn-primary:hover,
.phero .is-fluid.btn-primary.is-filling,
.phero .is-fluid.btn-primary:focus-visible:hover,
.calc-hero .is-fluid.btn-primary:hover,
.calc-hero .is-fluid.btn-primary.is-filling,
.calc-hero .is-fluid.btn-primary:focus-visible:hover{
  background:var(--pearl) !important;
  border-color:var(--pearl) !important;
  color:var(--velvet) !important;
}
footer.site .is-fluid.btn-primary:hover,
footer.site .is-fluid.btn-primary.is-filling,
footer.site .is-fluid.btn-primary:focus-visible:hover,
.ctasec .is-fluid.btn-primary:hover,
.ctasec .is-fluid.btn-primary.is-filling,
.ctasec .is-fluid.btn-primary:focus-visible:hover,
.cnav .is-fluid.btn-primary:hover,
.cnav .is-fluid.btn-primary.is-filling,
.cnav .is-fluid.btn-primary:focus-visible:hover,
.cr-cta .is-fluid.btn-primary:hover,
.cr-cta .is-fluid.btn-primary.is-filling,
.cr-cta .is-fluid.btn-primary:focus-visible:hover,
.is-fluid.rg-cta:hover,
.is-fluid.svc-flip-cta:hover,
.is-fluid.sh-card-cta:hover,
.is-fluid.rg-cta.is-filling,
.is-fluid.svc-flip-cta.is-filling,
.is-fluid.sh-card-cta.is-filling,
.is-fluid.rg-cta:focus-visible:hover,
.is-fluid.svc-flip-cta:focus-visible:hover,
.is-fluid.sh-card-cta:focus-visible:hover,
.is-fluid.lbox-enquire:hover,
.is-fluid.lbox-enquire.is-filling,
.is-fluid.lbox-enquire:focus-visible:hover{
  background:var(--pearl) !important;
  border-color:var(--pearl) !important;
  color:var(--velvet) !important;
}

/* Ghost on light wash — propose gold; footer gold */
.propose .is-fluid.btn-ghost,
footer.site .is-fluid.btn-ghost{
  --fluid-fill-bg:var(--gold);
  --fluid-fill-fg:var(--velvet);
  color:var(--gold);
  border-color:var(--gold) !important;
}
.propose .is-fluid.btn-ghost:hover,
.propose .is-fluid.btn-ghost.is-filling,
.propose .is-fluid.btn-ghost:focus-visible,
footer.site .is-fluid.btn-ghost:hover,
footer.site .is-fluid.btn-ghost.is-filling,
footer.site .is-fluid.btn-ghost:focus-visible{
  color:var(--velvet) !important;
  border-color:var(--gold) !important;
}
.voices .is-fluid.btn-ghost{
  --fluid-fill-bg:var(--purple);
  --fluid-fill-fg:var(--pearl);
  color:var(--purple);
  border-color:rgba(114,49,118,.35) !important;
}
.voices .is-fluid.btn-ghost:hover,
.voices .is-fluid.btn-ghost.is-filling,
.voices .is-fluid.btn-ghost:focus-visible{
  color:var(--pearl) !important;
  border-color:var(--purple) !important;
}
/* Ghost on cinematic dark heroes */
.phero .is-fluid.btn-ghost{
  --fluid-fill-bg:var(--pearl);
  --fluid-fill-fg:var(--velvet);
}
.phero .is-fluid.btn-ghost:hover,
.phero .is-fluid.btn-ghost.is-filling,
.phero .is-fluid.btn-ghost:focus-visible{
  color:var(--velvet) !important;
  border-color:var(--pearl) !important;
}

/* Universal: hover/fill always uses contrast foreground */
.is-fluid:hover:not(:disabled):not([disabled]),
.is-fluid:focus-visible:not(:disabled):not([disabled]),
.is-fluid.is-filling:not(:disabled):not([disabled]){
  color:var(--fluid-fill-fg) !important;
}
.is-fluid:hover:not(:disabled):not([disabled]) .dot,
.is-fluid:focus-visible:not(:disabled):not([disabled]) .dot,
.is-fluid.is-filling:not(:disabled):not([disabled]) .dot{
  background:currentColor;
}

/* Expanding circle fill from cursor */
.is-fluid .fluid-fill{
  position:absolute;
  left:var(--fx);
  top:var(--fy);
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--fluid-fill-bg);
  transform:translate(-50%,-50%) scale(0);
  transition:transform var(--fluid-dur) var(--fluid-ease);
  z-index:0;
  pointer-events:none;
  will-change:transform;
}

.is-fluid:hover:not(:disabled):not([disabled]) .fluid-fill,
.is-fluid:focus-visible:not(:disabled):not([disabled]) .fluid-fill,
.is-fluid.is-filling .fluid-fill{
  transform:translate(-50%,-50%) scale(80);
}

.is-fluid .fluid-mask{
  position:relative;
  z-index:1;
  display:block;
  overflow:hidden;
  height:1.35em;
  line-height:1.35em;
}

.is-fluid .fluid-track{
  display:flex;
  flex-direction:column;
  will-change:transform;
  transition:transform var(--fluid-dur) var(--fluid-ease);
}

.is-fluid .fluid-label{
  display:inline-flex;
  align-items:center;
  justify-content:inherit;
  gap:.7em;
  height:1.35em;
  line-height:1.35em;
  white-space:nowrap;
  flex:0 0 auto;
}

/* Text slides up as the fill expands */
.is-fluid:hover:not(:disabled):not([disabled]) .fluid-track,
.is-fluid:focus-visible:not(:disabled):not([disabled]) .fluid-track,
.is-fluid.is-filling .fluid-track{
  transform:translateY(-50%);
}

.is-fluid:hover:not(:disabled):not([disabled]),
.is-fluid:focus-visible:not(:disabled):not([disabled]){
  transform:scale(1.03);
  box-shadow:0 12px 30px rgba(23,21,26,.16);
}

/* Primary fill: contrast text on hover */
.is-fluid.btn-primary:hover:not(:disabled),
.is-fluid.btn-primary:focus-visible:not(:disabled),
.is-fluid.btn-primary.is-filling:not(:disabled),
.is-fluid.btn-primary.btn-gold:hover:not(:disabled),
.is-fluid.btn-primary.btn-gold.is-filling:not(:disabled){
  color:var(--fluid-fill-fg) !important;
}
.comm-card.is-featured .is-fluid.comm-cta.btn-primary:hover:not(:disabled),
.comm-card.is-featured .is-fluid.comm-cta.btn-primary:focus-visible:not(:disabled),
.comm-card.is-featured .is-fluid.comm-cta.btn-primary.is-filling:not(:disabled),
.commission .comm-card.is-featured .is-fluid.comm-cta.btn-primary:hover:not(:disabled),
.commission .comm-card.is-featured .is-fluid.comm-cta.btn-primary:focus-visible:not(:disabled),
.commission .comm-card.is-featured .is-fluid.comm-cta.btn-primary.is-filling:not(:disabled){
  color:var(--velvet) !important;
}
footer.site .is-fluid.btn-primary:hover:not(:disabled),
footer.site .is-fluid.btn-primary.is-filling:not(:disabled),
.ctasec .is-fluid.btn-primary:hover:not(:disabled),
.ctasec .is-fluid.btn-primary.is-filling:not(:disabled),
.phero .is-fluid.btn-primary:hover:not(:disabled),
.phero .is-fluid.btn-primary.is-filling:not(:disabled),
.cnav .is-fluid.btn-primary:hover:not(:disabled),
.cnav .is-fluid.btn-primary.is-filling:not(:disabled),
.cr-cta .is-fluid.btn-primary:hover:not(:disabled),
.cr-cta .is-fluid.btn-primary.is-filling:not(:disabled),
.calc-hero .is-fluid.btn-primary:hover:not(:disabled),
.calc-hero .is-fluid.btn-primary.is-filling:not(:disabled),
.is-fluid.rg-cta:hover:not(:disabled),
.is-fluid.svc-flip-cta:hover:not(:disabled),
.is-fluid.sh-card-cta:hover:not(:disabled),
.is-fluid.rg-cta.is-filling:not(:disabled),
.is-fluid.svc-flip-cta.is-filling:not(:disabled),
.is-fluid.sh-card-cta.is-filling:not(:disabled){
  color:var(--fluid-fill-fg) !important;
}

/* Preserve hidden / inactive CTA transforms */
.svc-flip-card:not(.is-on) .svc-flip-cta.is-fluid,
.svc-flip-card:not(.is-on) .svc-flip-cta.is-fluid:hover{
  transform:translateY(8px) !important;
  box-shadow:none;
}
.svc-flip-card:not(.is-on) .svc-flip-cta.is-fluid .fluid-fill{
  transform:translate(-50%,-50%) scale(0) !important;
}
.svc-flip-card:not(.is-on) .svc-flip-cta.is-fluid .fluid-track{
  transform:none !important;
}
.rg-panel:not(.is-on) .rg-cta.is-fluid,
.rg-panel:not(.is-on) .rg-cta.is-fluid:hover{
  transform:translateY(10px) !important;
  box-shadow:none;
}
.rg-panel:not(.is-on) .rg-cta.is-fluid .fluid-fill{
  transform:translate(-50%,-50%) scale(0) !important;
}
.rg-panel:not(.is-on) .rg-cta.is-fluid .fluid-track{
  transform:none !important;
}

.is-fluid:active:not(:disabled):not([disabled]){
  transform:scale(.985);
}

@media (prefers-reduced-motion:reduce){
  .is-fluid,
  .is-fluid .fluid-track,
  .is-fluid .fluid-fill{
    transition:none !important;
  }
  .is-fluid:hover:not(:disabled):not([disabled]),
  .is-fluid:focus-visible:not(:disabled):not([disabled]){
    transform:none;
    box-shadow:none;
  }
  .is-fluid:hover .fluid-track,
  .is-fluid:focus-visible .fluid-track,
  .is-fluid.is-filling .fluid-track{
    transform:none;
  }
  .is-fluid:hover .fluid-fill,
  .is-fluid:focus-visible .fluid-fill,
  .is-fluid.is-filling .fluid-fill{
    transform:translate(-50%,-50%) scale(80);
  }
}