/* CardiNova Heart Care - site styles
   Loaded from <helmet> via <link rel="stylesheet">; the DC runtime clones
   helmet <link> nodes into document.head, so the relative href resolves
   against the document just like ./support.js does. */
:root{
  --navy-deep:#07182d;--navy:#0e2745;--navy-2:#0b2038;
  --red:#b61f35;--red-dark:#8f1729;--red-bright:#e04a5c;
  --soft-blue:#eaf3f8;--off-white:#f7f9fb;--white:#fff;
  --charcoal:#20262e;--muted:#66717e;--border:rgba(14,39,69,.12);--wa:#25d366;
  --ease:cubic-bezier(.22,1,.36,1);
  --d-micro:.2s;--d-btn:.26s;--d-card:.4s;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--charcoal);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--red)}a:hover{color:var(--red-dark)}
::selection{background:var(--navy);color:#fff}
@media(max-width:919px){#dsk-nav,#dsk-cta{display:none!important}#mob-btn{display:inline-flex!important}}

/* ---- Small screens ----
   Section padding, headline size and the heart canvas all scale via clamp() in
   their inline styles; these are the few things clamp can't express. */
@media(max-width:520px){
  /* Decorative pills sit absolutely over the heart — at this width the canvas is
     small enough that they overlap it and each other. The section is aria-hidden
     and they carry no information not stated elsewhere, so drop them. */
  .h-badge{display:none}
  /* Keep long unbroken strings (URLs, emails) from forcing a horizontal overflow */
  body{overflow-wrap:anywhere}
}
/* Comfortable tap targets for the inline text links in the contact column */
@media(max-width:520px){
  .tap-row{min-height:44px;display:inline-flex;align-items:center}
}

/* ---- Accessibility: consistent, visible focus ---- */
:where(a,button,[tabindex],input,summary):focus-visible{outline:2px solid var(--red-bright);outline-offset:3px;border-radius:8px}

/* ---- Fine-grain film texture over the whole page (very subtle, static) ---- */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E")}

/* ---- Scroll progress rail (top) — GPU transform, no JS, no reflow ---- */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--red),var(--red-bright));z-index:100;pointer-events:none}
@supports (animation-timeline:scroll()){@media(prefers-reduced-motion:no-preference){
  .scroll-prog{animation:sp auto linear;animation-timeline:scroll(root)}
}}
@keyframes sp{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- Nav link underline + hover lift ---- */
.nav-link{position:relative;transition:color var(--d-micro) var(--ease)}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;border-radius:2px;
  background:var(--red-bright);transition:right var(--d-micro) var(--ease)}
.nav-link:hover::after,.nav-link:focus-visible::after{right:0}

/* ---- Section eyebrow label: fixed accent line before the text ---- */
.eyebrow{display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor;opacity:.6}

/* ---- Scroll-driven reveal (progressive enhancement; default = fully visible) ---- */
@media(prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  [data-reveal]{opacity:0;animation:rev auto var(--ease) both;animation-timeline:view();animation-range:entry 2% cover 22%}
}}
/* animate the independent `translate` property (not `transform`) so a card's
   forwards-filled reveal never blocks its :hover transform lift */
@keyframes rev{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}

/* ---- Staggered group reveal ----
   A scroll-driven timeline has no time delay, so the stagger is expressed along
   the scroll axis instead: each child's entry range opens a little later, which
   makes a grid row resolve left-to-right as it comes up. Works for sc-for output
   too, since the index comes from :nth-child rather than the template. */
@media(prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  [data-stagger]>*{opacity:0;animation:rev auto var(--ease) both;animation-timeline:view();animation-range:entry 2% cover 18%}
  [data-stagger]>*:nth-child(2){animation-range:entry 2% cover 22%}
  [data-stagger]>*:nth-child(3){animation-range:entry 2% cover 26%}
  [data-stagger]>*:nth-child(4){animation-range:entry 2% cover 30%}
  [data-stagger]>*:nth-child(5){animation-range:entry 2% cover 34%}
  [data-stagger]>*:nth-child(6){animation-range:entry 2% cover 38%}
  [data-stagger]>*:nth-child(7){animation-range:entry 2% cover 42%}
  [data-stagger]>*:nth-child(n+8){animation-range:entry 2% cover 46%}
}}

/* ---- Portrait reveal: a soft wipe + settle, so the photo lands rather than blinks ---- */
@media(prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  .photo-reveal{animation:photoIn auto var(--ease) both;animation-timeline:view();animation-range:entry 4% cover 34%}
}}
@keyframes photoIn{
  from{opacity:0;clip-path:inset(14% 0 0 0 round 16px);translate:0 30px;scale:1.04}
  to{opacity:1;clip-path:inset(0 0 0 0 round 16px);translate:0 0;scale:1}
}

/* ---- Hero depth: decorative layers drift and fade as the hero scrolls away ---- */
@supports (animation-timeline:scroll()){@media(prefers-reduced-motion:no-preference){
  .hero-par{animation:heroPar auto linear;animation-timeline:scroll(root);animation-range:0 100vh}
  .hero-par-slow{animation:heroParSlow auto linear;animation-timeline:scroll(root);animation-range:0 100vh}
}}
@keyframes heroPar{to{translate:0 70px;opacity:.25}}
@keyframes heroParSlow{to{translate:0 34px;opacity:.2}}

/* ---- Hero badges: staggered entrance, then an endless gentle bob.
   `hr` drives opacity/transform and `bob` drives `translate` — separate
   properties, so the two animations coexist without one clobbering the other. */
@media(prefers-reduced-motion:no-preference){
  .h-badge{opacity:0;animation:hr .8s var(--ease) forwards calc(var(--i,0)*.14s + .95s),
                              bob 7s ease-in-out infinite calc(var(--i,0)*.55s + 2s)}
}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}}

/* ---- Trust row: the accent dot pulses in sync with the heart's beat ---- */
@media(prefers-reduced-motion:no-preference){
  .trust-dot{animation:tdot 2.6s ease-in-out infinite calc(var(--i,0)*.32s)}
}
@keyframes tdot{0%,72%,100%{transform:scale(1);opacity:1}12%{transform:scale(1.55);opacity:.75}24%{transform:scale(1);opacity:1}34%{transform:scale(1.32);opacity:.85}}

/* ---- Accordion: animates open AND closed ----
   The body stays mounted and the row track animates 0fr <-> 1fr, because an
   sc-if unmounts its children the instant the state flips — there is no element
   left to run an exit animation on, so collapsing would always snap shut. The
   0fr/1fr pair is what lets this transition without hard-coding a pixel height,
   so each panel collapses correctly whatever its content length. */
.acc-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}
.acc-clip{overflow:hidden;min-height:0}           /* min-height:0 lets the grid row actually shrink */
.acc-in{transition:opacity .26s var(--ease)}
.acc-mark{transition:transform .34s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .acc-wrap,.acc-in,.acc-mark{transition:none}
}

/* ---- Hero entrance (time-based, once; default = visible for reduced-motion) ---- */
.hero-line{display:block;overflow:hidden}
.hero-line>span{display:block}
@media(prefers-reduced-motion:no-preference){
  .hero-line>span{transform:translateY(112%);animation:hl .95s var(--ease) forwards;animation-delay:calc(var(--i,0)*.13s + .1s)}
  .hero-rise{opacity:0;transform:translateY(16px);animation:hr .85s var(--ease) forwards;animation-delay:calc(var(--i,0)*.11s + .28s)}
}
@keyframes hl{to{transform:none}}
@keyframes hr{to{opacity:1;transform:none}}

/* ---- Premium interaction polish (desktop pointers only; touch stays static) ---- */
@media(hover:hover){
  .lift{transition:transform var(--d-card) var(--ease),border-color var(--d-card) var(--ease),box-shadow var(--d-card) var(--ease)}
  .lift:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(7,24,45,.45)}
  .cta-primary .cta-ico,.cta-arrow{transition:transform var(--d-btn) var(--ease)}
  .cta-primary:hover{transform:translateY(-1px)}
  .cta-primary:hover .cta-ico{transform:translateX(3px)}
  .cta-arrow-link:hover .cta-arrow{transform:translateX(4px)}
}
.cta-primary,.cta-ghost,.lift{transition:transform var(--d-btn) var(--ease),background var(--d-btn) var(--ease),border-color var(--d-btn) var(--ease),color var(--d-btn) var(--ease),box-shadow var(--d-btn) var(--ease)}
.cta-primary:active{transform:translateY(0) scale(.985)}

/* ---- Floating WhatsApp: one calm entrance, gentle idle breath ---- */
@media(prefers-reduced-motion:no-preference){
  .wa-fab{animation:waIn .6s var(--ease) both .8s}
  .wa-fab::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:waPulse 3.4s ease-out infinite 1.6s}
}
@keyframes waIn{from{opacity:0;transform:translateY(14px) scale(.85)}to{opacity:1;transform:none}}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%,100%{box-shadow:0 0 0 16px rgba(37,211,102,0)}}