/* ═══════════════════════════════════════════════════════════════════════
   Motion + imagery layer. Everything here is additive on top of
   cardiogenesis.css — no existing rule is overridden destructively.
   Every animation is disabled under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ink-cg:#0E2422;
  --gold-cg:#C49A6C;
  --paper-cg:#F7F3EC;
  --ease-cg:cubic-bezier(.22,.61,.36,1);
}

/* ── 1. Preloader ─────────────────────────────────────────────────────── */
#cg-loader{
  position:fixed;inset:0;z-index:9999;background:var(--ink-cg);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px;
  transition:opacity .7s var(--ease-cg),visibility .7s;
}
#cg-loader.done{opacity:0;visibility:hidden}
.cg-load-mark{width:210px;height:96px;overflow:visible}
.cg-load-mark path{
  stroke:var(--gold-cg);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  animation:cg-draw 1.9s var(--ease-cg) forwards;
}
.cg-load-mark .cg-pulse-dot{
  fill:var(--gold-cg);stroke:none;opacity:0;
  animation:cg-dot 1.4s ease-in-out .9s infinite;
}
@keyframes cg-draw{to{stroke-dashoffset:0}}
@keyframes cg-dot{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
.cg-load-word{
  font-family:'Fraunces',Georgia,serif;font-size:15px;letter-spacing:.42em;
  text-transform:uppercase;color:rgba(247,243,236,.55);
  opacity:0;animation:cg-fade .9s ease .5s forwards;
}
.cg-load-bar{width:180px;height:1px;background:rgba(196,154,108,.22);overflow:hidden}
.cg-load-bar i{display:block;height:100%;width:0;background:var(--gold-cg);animation:cg-bar 1.9s var(--ease-cg) forwards}
@keyframes cg-bar{to{width:100%}}
@keyframes cg-fade{to{opacity:1}}

/* ── 2. Scroll reveals ────────────────────────────────────────────────── */
[data-cg-reveal]{
  opacity:0;transform:translateY(30px);
  transition:opacity .85s var(--ease-cg),transform .85s var(--ease-cg);
  will-change:opacity,transform;
}
[data-cg-reveal].in{opacity:1;transform:none}
[data-cg-reveal="left"]{transform:translateX(-34px)}
[data-cg-reveal="scale"]{transform:scale(.96)}
[data-cg-reveal].in{transform:none}

/* ── 3. Hero motion ───────────────────────────────────────────────────── */
.cg-hero-media{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.cg-hero-media img{
  width:100%;height:120%;object-fit:cover;opacity:.20;
  transform:scale(1.08);animation:cg-kenburns 22s ease-in-out infinite alternate;
}
@keyframes cg-kenburns{from{transform:scale(1.06) translateY(0)}to{transform:scale(1.16) translateY(-2%)}}
.cg-hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--ink-cg) 12%,rgba(14,36,34,.86) 46%,rgba(14,36,34,.55) 100%);
}
.hero .wrap-wide{position:relative;z-index:2}

/* Animated EKG that draws itself, then travels */
.cg-ekg{position:absolute;left:0;right:0;bottom:12%;height:120px;z-index:1;opacity:.5;pointer-events:none}
.cg-ekg path{
  fill:none;stroke:var(--gold-cg);stroke-width:1.4;
  stroke-dasharray:2600;stroke-dashoffset:2600;
  animation:cg-draw 3.4s var(--ease-cg) .4s forwards;
}

/* Floating orbs */
.cg-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:1;filter:blur(1px)}
.cg-orb-a{width:9px;height:9px;background:var(--gold-cg);opacity:.5;top:22%;right:16%;animation:cg-float 7s ease-in-out infinite}
.cg-orb-b{width:5px;height:5px;background:#FF6B35;opacity:.65;top:62%;right:31%;animation:cg-float 9s ease-in-out 1.2s infinite}
.cg-orb-c{width:14px;height:14px;border:1px solid rgba(196,154,108,.45);background:transparent;top:38%;right:8%;animation:cg-float 11s ease-in-out .6s infinite}
@keyframes cg-float{0%,100%{transform:translate(0,0)}33%{transform:translate(-14px,-20px)}66%{transform:translate(10px,-9px)}}

/* ── 4. Service cards: imagery + lift ─────────────────────────────────── */
.services-grid .service{
  overflow:hidden;padding:0 0 30px;
  transition:transform .5s var(--ease-cg),box-shadow .5s var(--ease-cg),border-color .5s;
}
.services-grid .service:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 48px -20px rgba(14,36,34,.30);
  border-color:rgba(196,154,108,.5);
}
.cg-card-media{position:relative;height:190px;overflow:hidden;margin-bottom:26px}
.cg-card-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-cg);
}
.services-grid .service:hover .cg-card-media img{transform:scale(1.07)}
.cg-card-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,36,34,.30),transparent 55%);
}
.services-grid .service > .tag,
.services-grid .service > h3,
.services-grid .service > p{padding-left:30px;padding-right:30px}

/* Dark sections keep their own treatment */
.manifesto .services-grid .service,
.cta-section .services-grid .service{background:rgba(255,255,255,.03)}

/* ── 5. Full-bleed photo bands ────────────────────────────────────────── */
.cg-band{position:relative;height:clamp(320px,46vh,520px);overflow:hidden}
.cg-band img{width:100%;height:118%;object-fit:cover;will-change:transform}
.cg-band::after{content:"";position:absolute;inset:0;background:rgba(14,36,34,.55)}
.cg-band-copy{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 24px;color:var(--paper-cg);
}
.cg-band-copy .cg-eyebrow{
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold-cg);margin-bottom:16px;
}
.cg-band-copy h3{
  font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(28px,4vw,52px);line-height:1.14;max-width:19ch;margin:0;
}
.cg-band-copy h3 em{color:var(--gold-cg);font-style:italic}

/* ── 6. Tenet cards ───────────────────────────────────────────────────── */
.tenet{transition:transform .45s var(--ease-cg),background .45s,border-color .45s}
.tenet:hover{transform:translateY(-5px);background:rgba(196,154,108,.07);border-color:rgba(196,154,108,.42)}
.tenet .n{transition:color .45s}
.tenet:hover .n{color:var(--gold-cg)}

/* ── 7. Marquee of therapies ──────────────────────────────────────────── */
.cg-marquee{
  background:var(--ink-cg);border-top:1px solid rgba(196,154,108,.16);
  border-bottom:1px solid rgba(196,154,108,.16);
  padding:24px 0;overflow:hidden;white-space:nowrap;
}
.cg-marquee-track{display:inline-flex;gap:52px;animation:cg-marquee 34s linear infinite}
.cg-marquee span{
  font-family:'Fraunces',Georgia,serif;font-size:19px;color:rgba(247,243,236,.62);
  display:inline-flex;align-items:center;gap:52px;
}
.cg-marquee span::after{content:"◆";color:var(--gold-cg);font-size:9px}
@keyframes cg-marquee{to{transform:translateX(-50%)}}

/* ── 8. Buttons + nav ─────────────────────────────────────────────────── */
.btn{transition:transform .3s var(--ease-cg),box-shadow .3s,background .3s,color .3s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(255,107,53,.65)}
.btn-ghost:hover{transform:translateY(-2px)}
nav{transition:background .4s var(--ease-cg),box-shadow .4s,padding .4s}
nav.cg-stuck{background:rgba(247,243,236,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(14,36,34,.08)}
.nav-links a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;
  background:var(--gold-cg);transition:width .35s var(--ease-cg);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}

/* ── 9. Scroll progress ───────────────────────────────────────────────── */
#cg-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:9998;
  background:linear-gradient(90deg,var(--gold-cg),#FF6B35);
  transition:width .12s linear;
}

@media (max-width:860px){
  .cg-card-media{height:160px}
  .cg-ekg{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-cg-reveal]{opacity:1!important;transform:none!important}
  #cg-loader{display:none}
}

/* ── 10. Fixes ─────────────────────────────────────────────────────────── */

/* The dark framework section had no display-size rule, so its <h2> fell back
   to a 24px default while the CTA rendered at 168px. Match the CTA scale. */
.manifesto h2{
  font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-size:clamp(42px,6.4vw,104px);line-height:1.02;
  letter-spacing:-.02em;color:var(--paper-cg);margin:14px 0 0;
}
.manifesto h2 em{color:var(--gold-cg);font-style:italic}
.manifesto .lede{color:rgba(247,243,236,.66);font-size:17px;line-height:1.7}
.manifesto .cta-eyebrow{margin-bottom:6px}

/* Lazy images used to pop in from bare white. Give every media slot a tinted
   placeholder and fade the photo in once it decodes. */
.cg-card-media,.cg-band{background:linear-gradient(135deg,#16302d,#0E2422)}
.cg-card-media img,.cg-band img{opacity:0;transition:opacity .7s var(--ease-cg)}
.cg-card-media img.cg-loaded,.cg-band img.cg-loaded{opacity:1}
.cg-band img{opacity:0}

/* Tighter, more considered card typography */
.services-grid .service h3{margin-top:2px}
.services-grid .service > .tag{color:var(--gold-cg);letter-spacing:.22em;font-size:11px}

/* ── 11. Hero rebuild ──────────────────────────────────────────────────── */
/* The base hero centres ~100vh of content, which left a dead band under the
   buttons; the EKG sat at bottom:12% and ran straight through them; and the
   photo at 20% opacity read as a smudge rather than an image. */

.hero{
  min-height:min(92vh,940px);
  padding:clamp(150px,17vh,210px) 0 clamp(90px,11vh,130px);
  align-items:center;
}
.hero-grid{
  grid-template-columns:1.25fr .85fr;
  gap:clamp(48px,6vw,96px);
  align-items:center;
}
.hero h1{font-size:clamp(56px,8.2vw,132px);line-height:.94}

/* Photo now reads as a photograph on the right, falling away to ink at the
   headline so type never sits on busy pixels. */
.cg-hero-media img{
  opacity:.5;
  object-position:72% 42%;
  -webkit-mask-image:linear-gradient(95deg,transparent 26%,rgba(0,0,0,.55) 46%,#000 74%);
  mask-image:linear-gradient(95deg,transparent 26%,rgba(0,0,0,.55) 46%,#000 74%);
}
.cg-hero-media::after{
  background:
    radial-gradient(120% 92% at 78% 44%,rgba(14,36,34,.05) 0%,rgba(14,36,34,.72) 62%,var(--ink-cg) 100%),
    linear-gradient(100deg,var(--ink-cg) 20%,rgba(14,36,34,.72) 52%,rgba(14,36,34,.30) 100%);
}

/* EKG moved below the action row and dimmed so it reads as texture. */
.cg-ekg{bottom:auto;top:auto;left:0;right:0;height:150px;opacity:.28;z-index:0;
  top:50%;transform:translateY(120px)}
.cg-ekg path{stroke-width:1.1}

.hero-aside{padding-bottom:0}
.hero .lede{font-size:clamp(18px,1.35vw,22px);line-height:1.5;max-width:34ch;color:rgba(247,243,236,.8)}
.hero-actions{margin-top:clamp(36px,4.4vh,52px);gap:14px;z-index:3}
.hero .btn{padding:15px 30px;font-size:14px}

/* Scroll cue fills the space that used to be dead. */
.cg-scroll{
  position:absolute;left:50%;bottom:38px;transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(247,243,236,.4);pointer-events:none;
}
.cg-scroll i{display:block;width:1px;height:44px;background:linear-gradient(rgba(196,154,108,.7),transparent);animation:cg-cue 2.4s ease-in-out infinite}
@keyframes cg-cue{0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* ── 12. Marquee, resized ─────────────────────────────────────────────── */
.cg-marquee{padding:15px 0}
.cg-marquee-track{gap:0;animation-duration:46s}
.cg-marquee span{
  font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,243,236,.5);gap:34px;padding-right:34px;
}
.cg-marquee span::after{font-size:6px;opacity:.75}

/* ── 13. Section rhythm ───────────────────────────────────────────────── */
.services{padding:clamp(90px,11vh,140px) 0}
.manifesto{padding:clamp(96px,12vh,150px) 0 clamp(96px,12vh,150px)}
.cta-section{padding:clamp(100px,13vh,160px) 0}
.services-head{margin-bottom:clamp(44px,5.5vh,68px)}
.services-grid{gap:20px}
.tenets-row{gap:18px}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:34px;align-items:start}
  .hero{min-height:auto;padding:132px 0 76px}
  .cg-hero-media img{-webkit-mask-image:none;mask-image:none;opacity:.26}
  .cg-scroll{display:none}
}

/* ── 14. Hero, second pass ────────────────────────────────────────────── */
/* The EKG was still crossing the word "rebuilt." Drop it into the empty band
   under the buttons so it reads as a floor line rather than a strikethrough. */
.cg-ekg{top:auto;bottom:132px;transform:none;height:120px;opacity:.34}
.cg-scroll{bottom:52px}
.cg-scroll span{opacity:.75}

/* Give the right column an anchored feel instead of floating mid-air. */
.hero-aside{
  border-left:1px solid rgba(196,154,108,.22);
  padding-left:clamp(24px,2.4vw,40px);
}
.hero-aside .hero-eyebrow{margin-top:24px}

@media (max-width:980px){
  .hero-aside{border-left:none;padding-left:0}
  .cg-ekg{display:none}
}