/* Contact button pinned to the bottom of every page (replaces the header button).
   Built to hold up in in-app browsers (Instagram, Facebook, TikTok, Gmail) and older
   phones: every modern feature has a plain fallback declared first, and the animated
   border only turns on where conic gradients are supported.
   Phones: compact bar centred above the browser toolbar. Desktop: pill, bottom right. */
.sticky-cta{position:fixed;z-index:900;display:flex;align-items:center;justify-content:center;gap:10px;
box-sizing:border-box;overflow:hidden;isolation:isolate;white-space:nowrap;
color:#03594a;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12.5px;line-height:1;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;text-decoration:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;
-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;
/* fallback look: solid mint with a green border */
background:#e6f5f0;border:2px solid rgba(6,122,100,.45);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
-webkit-transition:color .18s,-webkit-transform .18s;transition:color .18s,transform .18s}
.sticky-cta svg{width:16px;height:16px;flex:0 0 16px}
.sticky-cta:focus-visible{outline:2px solid #067a64;outline-offset:3px}

/* animated border light, only where supported */
@property --cta-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@supports (background:conic-gradient(red,blue)){
.sticky-cta{border-color:transparent;
background:
 linear-gradient(120deg,#e1f3ee,#f8fcfb 45%,#d4eee6) padding-box,
 conic-gradient(from var(--cta-a,0deg),rgba(6,122,100,.3) 0deg,rgba(6,122,100,.3) 70deg,#067a64 130deg,#2fd1ad 160deg,#ffffff 172deg,rgba(6,122,100,.3) 185deg,
  rgba(6,122,100,.3) 250deg,#067a64 310deg,#2fd1ad 340deg,#ffffff 352deg,rgba(6,122,100,.3) 360deg) border-box;
animation:cta-ring 3.6s linear infinite}
}
@keyframes cta-ring{to{--cta-a:360deg}}
/* soft light sweeping across the button */
.sticky-cta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;z-index:-1;pointer-events:none;
background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.75) 50%,rgba(255,255,255,0));
-webkit-transform:translateX(-120%);transform:translateX(-120%);animation:cta-sheen 5s ease-in-out infinite}
@keyframes cta-sheen{0%,55%{-webkit-transform:translateX(-120%);transform:translateX(-120%)}85%,100%{-webkit-transform:translateX(260%);transform:translateX(260%)}}

/* desktop */
@media(min-width:769px){
.sticky-cta{right:28px;bottom:28px;padding:14px 26px;border-radius:999px}
}
@media(min-width:769px) and (hover:hover){
.sticky-cta:hover{color:#023f35;-webkit-transform:translateY(-2px);transform:translateY(-2px)}
}

/* phones and tablets: centred bar above the browser / in-app toolbar */
@media(max-width:768px){
.sticky-cta{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);
bottom:12px;bottom:calc(12px + constant(safe-area-inset-bottom));bottom:calc(12px + env(safe-area-inset-bottom));
width:240px;width:62vw;max-width:240px;min-width:190px;height:48px;padding:0 16px;border-radius:14px}
body{padding-bottom:72px;padding-bottom:calc(72px + constant(safe-area-inset-bottom));padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
/* first section fills the screen on phones so the floating button sits inside its lined
   background; spare height goes mostly to the top (up to 44px), the rest sits above the button */
@media(max-width:768px){
.hero{padding-top:14px;padding-bottom:76px;padding-bottom:calc(76px + env(safe-area-inset-bottom));
min-height:calc(100vh - var(--hdr,100px));min-height:calc(100svh - var(--hdr,100px));box-sizing:border-box;
display:flex;flex-direction:column}
.hero::before{content:"";flex:3 1 0;max-height:44px;order:0}
.hero > .wrap{width:100%;order:1}
.hero::after{content:"";flex:1 1 0;order:2}
}
/* hero buttons stack full width on phones */
@media(max-width:640px){.hero .btn-row{display:grid;grid-template-columns:1fr;gap:10px;max-width:420px;margin-left:auto;margin-right:auto}
.hero .btn-row .btn{padding:15px 8px;font-size:11px;letter-spacing:.09em;white-space:nowrap;min-width:0}}
/* very narrow phones (320px) */
@media(max-width:340px){.sticky-cta{font-size:11.5px;letter-spacing:.11em;min-width:176px}}
/* phones in landscape: shorter bar */
@media(max-width:932px) and (max-height:480px) and (orientation:landscape){
.sticky-cta{left:auto;right:16px;right:calc(16px + env(safe-area-inset-right));-webkit-transform:none;transform:none;width:auto;min-width:0;max-width:none;
height:40px;padding:0 20px;border-radius:999px;bottom:10px;bottom:calc(10px + env(safe-area-inset-bottom))}
body{padding-bottom:60px}
}

@media(prefers-reduced-motion:reduce){.sticky-cta,.sticky-cta::after{animation:none}}
body.modal-open .sticky-cta{opacity:0;pointer-events:none;visibility:hidden}
@media print{.sticky-cta{display:none}}