/* Risky Ricky — fx layer (v7.6): 3D layered type, scroll-scrubbed depth, kinetic word bands.
   transform/opacity only; everything is visible with JS off; prefers-reduced-motion = no motion. */

/* ---------- Hero headline: words rise out of the page on load ---------- */
.fx .hero h1{perspective:900px}
.fx .hero h1 .w{display:inline-block;transform-origin:50% 100% -40px;animation:fxWord .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*55ms + 120ms)}
@keyframes fxWord{from{opacity:0;transform:translate3d(0,.55em,-120px) rotateX(-75deg)}to{opacity:1;transform:none}}
.fx .hero .lead,.fx .hero .actions,.fx .hero .eyebrow,.fx .hero .kicker,.fx .hero .proof,.fx .hero ul{animation:fxUp .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:.55s}
.fx .hero .actions{animation-delay:.7s}
@keyframes fxUp{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.fx .hero .hero-portrait{animation:fxPortrait 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:.25s}
@keyframes fxPortrait{from{opacity:0;transform:perspective(1100px) rotateY(-18deg) translate3d(30px,20px,-80px)}to{opacity:1;transform:none}}

/* ---------- Layered (extruded) hero type: two echo layers behind the H1 that split apart on scroll ---------- */
.fx-h1{position:relative;transform-origin:0 100%}
.fx-echo{position:absolute;inset:0;pointer-events:none;z-index:-1;margin:0;font:inherit;line-height:inherit;letter-spacing:inherit;max-width:inherit;will-change:transform}
.fx-echo.e1{color:transparent;-webkit-text-stroke:1.5px rgba(184,117,85,.55)}
.fx-echo.e2{color:rgba(184,117,85,.14)}
.fx-echo .w{animation:none!important}

/* ---------- Section headings: scroll-scrubbed 3D fold with copper extrusion ---------- */
.fx-fold{display:inline-block;transform-origin:50% 100%;will-change:transform}
.fx-scrub .section-head h2,.fx-scrub h2.fx-target{perspective:800px}

/* ---------- Coverage band (v8.4): static, centered, no scroll motion ---------- */
.fx-band{position:relative;padding:clamp(1.6rem,3.2vw,2.4rem) 1rem;background:var(--stone,#F5F0E8);border-top:1px solid rgba(184,117,85,.28);border-bottom:1px solid rgba(184,117,85,.28);text-align:center}
.fx-band.dark{background:var(--plum-900,#2A1D30);border-color:rgba(211,154,124,.22)}
.fx-band .fx-stack{max-width:1180px;margin:0 auto;transform:none!important}
.fx-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:.35em;column-gap:0;transform:none!important;font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,1.9vw,1.55rem);line-height:1.3;letter-spacing:0}
.fx-row span{display:inline-flex;align-items:center;white-space:nowrap}
.fx-row span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--copper,#B87555);margin:0 .9em;opacity:.85}
.fx-row span:last-child::after{display:none}
.fx-row span.fx-dup{display:none}
.fx-row.outline{font-family:var(--body);font-weight:700;font-size:clamp(.68rem,1vw,.8rem);letter-spacing:.2em;text-transform:uppercase;margin-top:.9rem}
.fx-row.outline span::after{width:3px;height:3px;margin:0 1.1em}
.fx-row.solid{color:var(--plum,#38273F)}
.fx-row.outline{color:var(--copper,#B87555)}
.fx-band.dark .fx-row.solid{color:var(--stone,#F5F0E8)}
.fx-band.dark .fx-row.outline{color:var(--copper-2,#D39A7C)}
@media (max-width:600px){.fx-row span::after{margin:0 .6em}.fx-row.outline{letter-spacing:.14em}}

/* ---------- Cards / tiles: depth on hover (desktop pointers) ---------- */
@media (hover:hover) and (pointer:fine){
  .fx .card,.fx .tile{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
  .fx .card.fx-tilt,.fx .tile.fx-tilt{box-shadow:0 28px 50px -30px rgba(42,29,48,.55)}
}

/* ---------- Kicker rules draw in ---------- */
.fx .kicker::before,.fx .eyebrow::before{transform-origin:left center;animation:fxRule .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:.2s}
@keyframes fxRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Steps: numerals pop on reveal ---------- */
.fx .steps li.in::before,.fx .step.in .n{animation:fxPop .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes fxPop{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){
  .fx *{animation:none!important;transition:none!important}
  .fx-echo{display:none}
  .fx-row,.fx-fold,.fx-stack{transform:none!important}
}

/* ---------- Quote form safety net: never leave a HighLevel form hidden ---------- */
iframe.fx-force{opacity:1!important;visibility:visible!important;pointer-events:auto!important;position:relative!important;left:auto!important;width:100%!important;min-height:600px;display:block}

/* ---------- Top utility bar (v8.4b): spaced, divided, readable ---------- */
.top{padding:.6rem 0!important;font-size:.82rem!important;letter-spacing:.01em;border-bottom:1px solid rgba(211,154,124,.18)}
.top .wrap{align-items:center;gap:.75rem 2rem!important}
.top .tb-hours{opacity:.85}
.top .tb-links{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 0}
.top .tb-i{display:inline-flex;align-items:center;gap:.5rem;padding:0 1.25rem;border-left:1px solid rgba(217,207,221,.22);white-space:nowrap}
.top .tb-i:first-child{border-left:0;padding-left:0}
.top .tb-i:last-child{padding-right:0}
.top .tb-i em{font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-2,#D39A7C)}
@media(max-width:700px){.top .tb-links{justify-content:center;width:100%}.top .tb-i{padding:0 .75rem}.top .tb-i:last-child{display:none}}
/* v8.5 CTA pop: top-bar call pills + 4-button mobile call bar */
.top .tb-i a.tb-call{display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .85rem;border-radius:999px;font-weight:800;font-size:.86rem;letter-spacing:.01em;line-height:1;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.top .tb-i a.tb-call svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.top .tb-i a.tb-call.ricky{background:var(--copper,#B5704F);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.18) inset,0 6px 16px -8px rgba(181,112,79,.9)}
.top .tb-i a.tb-call.lizzy{background:#fff;color:var(--espresso,#2B1D1A);box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}
.top .tb-i a.tb-call:hover,.top .tb-i a.tb-call:focus-visible{transform:translateY(-1px);color:inherit}
.top .tb-i a.tb-call.ricky:hover{background:var(--copper-700,#9A5E42);color:#fff}
.top .tb-i a.tb-call.lizzy:hover{background:#F4E9DF;color:var(--espresso,#2B1D1A)}
@media(max-width:700px){
  .top{padding:.5rem 0!important}
  .top .tb-links{gap:.5rem!important}
  .top .tb-i{padding:0!important;border-left:0!important;flex-direction:column;gap:.2rem!important}
  .top .tb-i em{font-size:.62rem}
  .top .tb-i a.tb-call{font-size:.9rem;padding:.5rem .9rem;min-height:40px}
  .mbar{grid-template-columns:1fr 1fr .8fr 1.1fr!important;min-height:64px;box-shadow:0 -10px 24px -10px rgba(0,0,0,.55)}
  .mbar a{flex-direction:column;gap:.18rem!important;min-height:64px!important;font-size:.74rem!important;font-weight:800!important;line-height:1.1;text-align:center;padding:.35rem .2rem}
  .mbar a svg{width:21px!important;height:21px!important;stroke-width:2.1!important}
  .mbar a small{display:block;font-size:.6rem;font-weight:600;opacity:.85;letter-spacing:.02em}
  .mbar a.call-ricky{background:var(--copper,#B5704F)!important;color:#fff}
  .mbar a.call-lizzy{background:#fff!important;color:var(--espresso,#2B1D1A)!important}
  .mbar a.hot{background:var(--plum,#5B2A4E)!important;color:#fff}
  .mbar a:active{filter:brightness(.92)}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))!important}
}
/* v8.5: phone CTAs in .actions become real buttons */
.actions .btn.ghost[href^="tel:"]{display:inline-flex;align-items:center;gap:.55rem;border:2px solid currentColor!important;border-radius:var(--r,10px);padding:.85rem 1.25rem!important;font-weight:800!important;text-decoration:none;background:rgba(255,255,255,.06)}
.actions .btn.ghost[href^="tel:"] svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;flex:none}
.actions .btn.ghost[href^="tel:"]:hover{background:rgba(181,112,79,.12)}
@media(max-width:700px){.actions .btn,.actions .btn.ghost[href^="tel:"]{width:100%;justify-content:center;min-height:52px}}