/* RZEC site hooks for the full yewho-web-effects library.
   Loaded AFTER ymotion.css + scene.css. Maps the liquid-fill flood colour
   (--fill) onto this site's button variants, and a few on-brand tweaks. */

/* liquid-fill flood colour per button type (floods from cursor on hover) */
.btn-primary{--fill:rgba(255,255,255,.18)}
.btn-white{--fill:rgba(200,16,46,.14)}
.btn-ghost{--fill:rgba(255,255,255,.16)}
.btn-outline{--fill:rgba(200,16,46,.10)}
.btn-sm{--fill:rgba(255,255,255,.16)}

/* embers sit behind hero content, above the radial glow */
.page-hero.md-embers .md-embers-cv{z-index:1}
.page-hero .wrap{position:relative;z-index:2}

/* menu hover: keep the page's own single underline (.menu a::after);
   suppress the full-library's extra ::before underline so it isn't doubled */
.menu>a::before,.menu .has-drop>a::before,.menu .has-sub>a::before{display:none!important}

/* ---- mobile nav: the full library hides .nav-cta and full-widths .btn on
   small screens, but THIS site keeps the hamburger inside .nav-cta and uses its
   own responsive header. Restore that so the mobile menu stays usable. ---- */
@media(max-width:820px){
  .nav-cta{display:flex!important}          /* keep the hamburger visible */
}
@media(max-width:560px){
  .nav-cta .btn{width:auto!important}       /* nav button stays inline, not full-width */
}

/* ---- flip service cards: front = full content, back = "Get in touch" CTA.
   Hover flips on desktop; mobile shows the complete front (no info hidden). ---- */
.svc-card.md-flip{padding:0!important;min-height:244px}   /* keep the card's OWN bg + text colours */
.svc-card.md-flip .md-flip-inner{height:100%;min-height:244px}
.svc-card.md-flip .md-flip-front,.svc-card.md-flip .md-flip-back{height:100%;min-height:244px;display:flex;flex-direction:column;justify-content:center;padding:30px 26px;border-radius:var(--radius)}
.svc-card.md-flip .md-flip-front{background:transparent}  /* show the card's own background + native title/body colours */
.svc-card.md-flip .md-flip-back{background:linear-gradient(150deg,#C8102E 0%,#8f0b20 100%)}
.svc-card.md-flip .md-flip-back .fb-in{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.svc-card.md-flip .md-flip-back b{color:#fff;font-family:'Montserrat';font-weight:700;font-size:19px;margin-bottom:10px}
.svc-card.md-flip .md-flip-back span{color:rgba(255,255,255,.92);font-size:14px;line-height:1.55;margin-bottom:18px}
.svc-card.md-flip .md-flip-back .btn{align-self:flex-start;background:#fff;color:var(--red);--fill:rgba(200,16,46,.12)}
.svc-card.md-flip .md-flip-front{position:relative}

/* ---- feature panels: subtle grow + amber highlight on hover ---- */
.fx-panel{transition:transform .32s cubic-bezier(.22,.61,.2,1),box-shadow .32s cubic-bezier(.22,.61,.2,1)!important;will-change:transform}
.fx-panel:hover{transform:scale(1.025);box-shadow:0 26px 64px rgba(20,28,38,.30),0 0 0 1.5px rgba(244,161,0,.6),0 0 34px rgba(244,161,0,.16);z-index:2}
@media(hover:none){.fx-panel:hover{transform:none;box-shadow:none}}
@media(prefers-reduced-motion:reduce){.fx-panel,.fx-panel:hover{transform:none}}

/* reveal should never hide the hero on no-JS; html.js gating already covers JS */

/* iOS Safari zooms the page when a focused field is under 16px. Keep fields >=16px on phones. */
@media(max-width:820px){input,select,textarea{font-size:16px}}