/* v4 hero (2026-10-15): "Your website should be booking you leads." + Dana's text thread on a glowing phone.
   Loads after v4.css and v4-mobile.css so it wins. Test page: hero-phone.html. Old cube hero: _local/archive/2026-10-15-pre-phone-hero/ */
/* 2026-10-15 (Gerald): no liquid. Near-black, the phone is the light in the room. */
.reach{background:radial-gradient(120% 90% at 50% 120%,rgba(6,48,59,.35),transparent 60%),var(--ink)!important}
.reach{place-items:stretch;text-align:left;padding:0!important}
.reach .inner{position:relative;z-index:2;pointer-events:none;width:min(1240px,92vw);margin:0 auto;height:100%;
  display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:min(84px,6vw);padding:min(70px,9svh) 0 min(40px,5svh)}
.reach .inner a,.reach .inner button{pointer-events:auto}
.reach .copy{text-align:left;max-width:min(700px,56vw)}
.reach h1{font-size:min(5.6vw,10svh);line-height:.96;letter-spacing:-.045em;font-weight:700;margin:0}
.reach p.pre{margin:0 0 min(16px,2svh);padding:0;max-width:none}
.reach p.hero-sub{margin:min(20px,2.6svh) 0 0;max-width:30em;padding:0;font-size:clamp(16px,min(1.5vw,2.6svh),22px);line-height:1.4;font-weight:600;color:#e6eef3}
.reach p.hero-sub b{color:var(--teal);font-weight:700}
.reach .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:min(30px,3.6svh)}
.reach .cta-row a.go{margin:0;display:inline-block;background:var(--teal);color:var(--ink);padding:16px 26px;border-radius:999px;font-weight:800;text-decoration:none;font-size:17px}
.reach .cta-row a.how{margin:0;background:none;padding:0;border-radius:0;border:0;color:var(--pale);font-weight:700;text-decoration:none;font-size:16px;border-bottom:1px solid rgba(189,239,249,.35)}
.reach h1,.reach p.pre,.reach p.hero-sub{text-shadow:0 2px 30px rgba(0,0,0,.7),0 0 2px rgba(0,0,0,.5)}
.reach .word{opacity:0;transform:translateY(46px) scale(.97);filter:blur(12px);transition:opacity .8s,transform .9s cubic-bezier(.16,1,.3,1),filter .8s}
.reach.in .word{opacity:1;transform:none;filter:none}

/* the phone: rises out of the impact, sits on the sauce with a glow under it */
.stagep{position:relative;justify-self:center;display:grid;justify-items:center;isolation:isolate}
.reach .phone{--ph:min(560px,72svh);opacity:0;transform:translateY(60px) scale(.9);filter:blur(6px);
  transition:opacity .7s,transform 1.1s cubic-bezier(.16,1,.3,1),filter .7s;box-shadow:0 0 0 calc(var(--pw) * .025) #14181f,0 40px 90px rgba(0,0,0,.6),0 0 80px rgba(34,199,234,.28)}
.reach.up .phone{opacity:1;transform:none;filter:none}
.halo{position:absolute;left:50%;top:46%;width:230%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.6);border-radius:50%;z-index:-2;pointer-events:none;
  background:radial-gradient(closest-side,rgba(34,199,234,.34),rgba(24,157,187,.14) 45%,transparent 72%);filter:blur(10px);opacity:0;
  transition:opacity 1.2s,transform 1.4s cubic-bezier(.16,1,.3,1)}
.reach.up .halo{opacity:1;transform:translate(-50%,-50%) scale(1);animation:breathe 6s ease-in-out 1.4s infinite}
@keyframes breathe{50%{opacity:.78}}
.ring{position:absolute;left:50%;top:46%;width:120%;aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none;border:2px solid rgba(34,199,234,.75);
  box-shadow:0 0 30px rgba(34,199,234,.5),inset 0 0 30px rgba(34,199,234,.3);transform:translate(-50%,-50%) scale(.55);opacity:0}
.stagep.pulse .ring{animation:ring 1.6s cubic-bezier(.2,.7,.3,1)}
.stagep.pulse .halo{animation:flare 1.4s ease-out}
@keyframes ring{0%{opacity:.95;transform:translate(-50%,-50%) scale(.55)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}}
@keyframes flare{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.12);filter:blur(10px) brightness(1.6)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.stagep::after{content:"";position:absolute;left:50%;bottom:-6%;width:130%;height:16%;transform:translateX(-50%);border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(34,199,234,.45),transparent);filter:blur(14px);opacity:0;transition:opacity 1s .3s}
.reach.up .stagep::after{opacity:1}
.reach p.cap{max-width:none;padding:0;margin:0;margin-top:min(18px,2.4svh);font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--pale);text-align:center;opacity:0;transition:opacity .6s;
  text-shadow:0 2px 16px rgba(0,0,0,.8)}
.reach p.cap b{color:var(--teal)}
.reach.up p.cap{opacity:1;transition-delay:.8s}
.bb.pop{animation:bbPop .32s cubic-bezier(.3,1.7,.5,1) both}
@keyframes bbPop{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}
.reach .ph-banner{transform:translateY(-160%);opacity:0;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.reach .ph-banner.on{transform:none;opacity:1}
.reach .ph-chat{transition:opacity .35s}
.reach .ph-chat.fade{opacity:0}

@media (max-width:760px){
  .reach .inner{grid-template-columns:1fr;align-content:center;gap:min(22px,2.6svh);padding:min(64px,8svh) 20px 66px;width:100%}   /* 66px: room for the "Swipe or tap" arrow */
  .reach .copy{text-align:center;max-width:none}
  .reach h1{font-size:min(9.6vw,5.4svh)}
  .reach p.pre{margin-bottom:10px}
  .reach p.hero-sub{font-size:min(4vw,2.1svh);margin:12px auto 0;max-width:24em}
  .reach .cta-row a.how{display:none}
  .reach .cta-row{justify-content:center;margin-top:min(20px,2.4svh)}
  .reach .cta-row a.go{padding:14px 22px;font-size:16px}
  .reach .phone{--ph:min(400px,37svh)}
  .reach p.cap{font-size:12px}
  }
@media (prefers-reduced-motion:reduce){.reach .word,.reach .phone{transition:none}.bb.pop{animation:none}}

@media (max-width:760px) and (max-height:720px){ .reach .phone{--ph:32svh} .reach p.cap{display:none} }