/* ════════════════════════════════════════════════════════════════
   RESCU — CLINICAL CINEMA LAYER v48  (additive, phone-safe)
   ════════════════════════════════════════════════════════════════
   Thesis: a med spa decorates; an ER measures. This layer gives the
   site its physician voice — pulse-line dividers that draw on scroll,
   monospace telemetry labels, condensed display type — on top of the
   proven-safe v45 architecture:

   · Content is ALWAYS visible. No opacity:0 base states without an
     @supports guard. No JS gating. No full-screen overlays.
   · Scroll-driven effects use CSS animation-timeline: view() inside
     @supports — non-supporting browsers get a static, complete page.
   · Scroll-triggered only (brand rule). prefers-reduced-motion off-switch.
   ════════════════════════════════════════════════════════════════ */

/* ── 0. TOKENS ─────────────────────────────────────────────────── */
:root{
  --cc-ox-deep:#2B0F1C;          /* cinema-depth oxblood-black        */
  --cc-pulse:#E7714D;            /* the vitals trace = tangerine      */
  --cc-mono:'JetBrains Mono',ui-monospace,monospace;
  --cc-display:'Bebas Neue','Montserrat',sans-serif;
}

/* ── 1. SIGNATURE: THE PULSE LINE ──────────────────────────────
   An EKG trace between sections. The SVG path draws itself as the
   divider scrolls through the viewport. Base state = fully drawn
   (visible), so without scroll-timeline support it's simply a
   complete, elegant pulse line. Never invisible. */
.cc-pulse{
  display:block;width:min(720px,86%);height:44px;margin:0 auto;
  overflow:visible;
}
.cc-pulse path{
  fill:none;stroke:var(--cc-pulse);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.85;
  filter:drop-shadow(0 0 6px rgba(231,113,77,.45));
}
.cc-pulse .cc-grid{stroke:rgba(186,165,192,.18);stroke-width:1;filter:none}
.cc-pulse-wrap{padding:34px 0 10px;position:relative}
.cc-pulse-wrap::after{ /* faint baseline continuing the trace */
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(231,113,77,.12) 18%,rgba(231,113,77,.12) 82%,transparent);
  pointer-events:none;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference){
    .cc-pulse path:not(.cc-grid){
      stroke-dasharray: 1200;
      stroke-dashoffset: 1200;
      animation: ccDraw 1s linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 46%;
    }
  }
}
@keyframes ccDraw{ to{ stroke-dashoffset:0; } }

/* ── 2. TELEMETRY EYEBROWS ─────────────────────────────────────
   Section eyebrows become clinical readouts: monospace, tracking,
   tangerine tick. Additive class .cc-tel on existing .ey spans. */
.ey.cc-tel{
  font-family:var(--cc-mono)!important;
  font-size:11px!important;letter-spacing:.28em!important;
  text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;
}
.ey.cc-tel::before{
  content:"";width:22px;height:2px;flex:none;
  background:linear-gradient(90deg,var(--cc-pulse),transparent);
}
.ey.cc-tel .cc-id{ color:var(--cc-pulse); opacity:.95; }

/* ── 3. DISPLAY TYPE ACTIVATION ────────────────────────────────
   Bebas Neue for the big section headlines — tall, condensed,
   kin to the rescu logotype. Applied via .cc-disp so nothing
   changes unless the class is present. */
.cc-disp{
  font-family:var(--cc-display)!important;
  font-weight:400!important;
  letter-spacing:.012em!important;
  line-height:.94!important;
}

/* ── 4. LAMINATE DEPTH ON CARDS (scroll-enter sheen) ───────────
   A one-time light sweep when a card enters view — clinical-glass
   feel. Scroll-triggered (brand rule), not hover/looped. Base
   state: cards look normal. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .svc-card, .path-card, .bundle-card, .ww-card{
      position:relative; overflow:hidden;
    }
    .svc-card::after, .path-card::after, .bundle-card::after, .ww-card::after{
      content:"";position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(115deg,transparent 38%,rgba(249,227,219,.16) 50%,transparent 62%);
      transform:translateX(-130%);
      animation:ccSheen 1s ease-out both;
      animation-timeline: view();
      animation-range: entry 12% entry 78%;
    }
  }
}
@keyframes ccSheen{ to{ transform:translateX(130%); } }

/* ── 5. HERO DEPTH POLISH ──────────────────────────────────────
   Deepen the cinematic floor under the hero so the 3D ring scene
   reads with more contrast; vignette stays additive. */
#s-hero{ isolation:isolate; }
#s-hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:34%;
  background:linear-gradient(180deg,transparent,rgba(43,15,28,.55));
  z-index:2;pointer-events:none;
}
#canvas-hero{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;opacity:.55;
}

/* ── 6. SECTION RHYTHM ─────────────────────────────────────────
   Slightly deeper breathing room around pulse dividers so the
   signature has air. Safe additive spacing only. */
.cc-pulse-wrap + section, section + .cc-pulse-wrap{ margin-top:0; }

/* ── 7. REDUCED MOTION: full stop ───────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .cc-pulse path{ stroke-dashoffset:0!important; animation:none!important; }
  .svc-card::after,.path-card::after,.bundle-card::after,.ww-card::after{ animation:none!important; transform:translateX(130%)!important; }
}

/* ── 8. MOBILE NAV FIX (site-wide) ─────────────────────────────
   The nav has a second .nl link group outside .nav-links that the
   ≤1100px rules never hid — causing overflowing links on phones.
   The hamburger + drawer handle navigation at this width. */
@media(max-width:1100px){
  #nav .nl{ display:none !important; }
}

/* ════════════════════════════════════════════════════════════════
   v49 ADDENDUM — heroes, 3D presence, scroll signatures
   ════════════════════════════════════════════════════════════════ */

/* ── 9. 3D PRESENCE: stronger ring scene on the homepage hero ── */
#canvas-hero{ opacity:.72; }

/* ── 10. HERO PARALLAX (homepage): content drifts up slightly as
       you scroll away — depth without JS. Base state = static. ── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px){
    #s-hero .hero-inner{
      animation: ccHeroDrift 1s linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}
@keyframes ccHeroDrift{ to{ transform:translateY(-56px); opacity:.55; } }

/* ── 11. SCROLL-DRAWN HEADLINE UNDERLINE: every sec-h2 gets a
       tangerine rule that draws as it enters view. Base = drawn. ── */
.sec-h2.cc-disp{ position:relative; padding-bottom:14px; }
.sec-h2.cc-disp::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:92px;
  background:linear-gradient(90deg,var(--cc-pulse),rgba(231,113,77,.25));
  border-radius:2px;
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .sec-h2.cc-disp::after{
      animation: ccRule .8s ease-out both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }
  }
}
@keyframes ccRule{ from{ width:0; } to{ width:92px; } }

/* ── 12. LOCATION & SERVICE HERO TYPE: cinematic display scale ── */
.cc-hero, h1[data-cc="hero"]{
  font-family:var(--cc-display)!important;
  font-weight:400!important;
  letter-spacing:.014em!important;
  line-height:.92!important;
  font-size:clamp(54px,9vw,128px)!important;
}
h1[data-cc="hero"]{ text-shadow:0 2px 30px rgba(43,15,28,.45); }
.cc-hero span{ color:var(--cc-pulse); }

/* ── 13. SERVICE-PAGE HERO AURORA: layered oxblood-tangerine depth
       behind the first .sec on lp pages, drifting with scroll. ── */
body:has(h1[data-cc="hero"]) section.sec:first-of-type{
  position:relative; isolation:isolate;
}
body:has(h1[data-cc="hero"]) section.sec:first-of-type::before{
  content:"";position:absolute;inset:-10% -20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 38% at 78% 18%, rgba(231,113,77,.16), transparent 70%),
    radial-gradient(42% 36% at 16% 70%, rgba(186,165,192,.12), transparent 70%),
    radial-gradient(60% 50% at 50% 110%, rgba(43,15,28,.55), transparent 70%);
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    body:has(h1[data-cc="hero"]) section.sec:first-of-type::before{
      animation: ccAurora 1s linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}
@keyframes ccAurora{ to{ transform:translateY(-40px) scale(1.04); } }

/* ── 14. REDUCED MOTION: addendum off-switch ── */
@media (prefers-reduced-motion: reduce){
  #s-hero .hero-inner, .sec-h2.cc-disp::after,
  body:has(h1[data-cc="hero"]) section.sec:first-of-type::before{ animation:none!important; }
}

/* ── 12b. LP HERO TYPE (direct id target — no markup dependency) ── */
h1#lp-h1{
  font-family:var(--cc-display)!important;
  font-weight:400!important;
  letter-spacing:.012em!important;
  text-shadow:0 2px 30px rgba(43,15,28,.45);
}
body:has(h1#lp-h1) section.sec:first-of-type{ position:relative; isolation:isolate; }
body:has(h1#lp-h1) section.sec:first-of-type::before{
  content:"";position:absolute;inset:-10% -20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 38% at 78% 18%, rgba(231,113,77,.16), transparent 70%),
    radial-gradient(42% 36% at 16% 70%, rgba(186,165,192,.12), transparent 70%);
}