/* ==========================================================================
   Eliana Capital v10: the hands come alive
   Loaded after v9.css. Takes its cue from mylk-co.com, where the cup is the star and keeps moving.
   Here the star is our logo: the four hands.
   - A big hands mark sits in the home hero, assembles itself on load, keeps reaching, then lifts off
     as you scroll and docks at the left edge, turning as you read (js/v10.js).
   - Ripple rings, floating chips and drifting colour blobs keep the hero alive.
   - Big hand marks turn slowly behind the dark band and the call-to-action band.
   Everything is switched off or made still for visitors who ask for reduced motion.
   ========================================================================== */

/* ---------- The travelling hands mark (one fixed element, driven by js/v10.js) ----------
   It travels between "stations": the .hero-slot and every .mk-slot, each reserved in the layout beside its text. */
.mk{position:fixed;left:0;top:0;width:100px;height:100px;z-index:45;pointer-events:none;opacity:0;
  transform-origin:0 0;will-change:transform,opacity;
  --h1:var(--blue);--h2:var(--green);--h3:var(--blue);--h4:var(--green)}
.mk.is-ready{opacity:1}
.mk svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 22px 26px rgba(1,3,149,.22))}
.mk-h{transform-box:fill-box;transform-origin:50% 50%}
.mk-h1 use{fill:var(--h1)}.mk-h2 use{fill:var(--h2)}.mk-h3 use{fill:var(--h3)}.mk-h4 use{fill:var(--h4)}
.mk-h use{transition:fill .6s var(--ease)}
.mk.on-dark{--h1:#fff;--h2:var(--green-lite);--h3:#fff;--h4:var(--green-lite)}
.mk.on-dark svg{filter:drop-shadow(0 18px 24px rgba(0,0,40,.35))}
.mk.on-green{--h1:var(--blue);--h2:#fff;--h3:var(--blue);--h4:#fff}
.mk.on-green svg{filter:drop-shadow(0 18px 24px rgba(0,1,56,.3))}

/* ---------- Home hero: headline, then the stage where the mark lives ---------- */
.hero--v10{padding-bottom:clamp(28px,4vw,56px)}
.hero--v10 h1{font-size:clamp(2.3rem,6.4vw,5.6rem);max-width:none;line-height:1.02;margin-bottom:0}
@media (min-width:760px){.hero--v10 .ln{white-space:nowrap}}
.hero--v10 h1 .ln:nth-child(2){margin-top:-.02em}
.swoosh{position:relative;display:inline-block;font-style:normal;color:var(--green-ink)}
.swoosh svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.2em;overflow:visible}
.swoosh path{fill:none;stroke:var(--green);stroke-width:5;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;vector-effect:non-scaling-stroke;animation:draw 1.1s .9s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.hero-stage{display:grid;grid-template-columns:1fr var(--slot) 1fr;align-items:center;column-gap:clamp(16px,3vw,48px);
  width:min(1240px,100%);margin:clamp(4px,1.6vh,20px) auto 0;--slot:clamp(250px,42vh,420px)}
.hs-left{justify-self:end;max-width:31ch;text-align:left}
.hs-left .lead,.hero--v10 .hs-left .lead{margin:0;text-align:left;font-size:clamp(1rem,1.2vw,1.18rem)}
.hs-right{justify-self:start;max-width:30ch}
.hs-right .btn-row{display:flex;flex-direction:column;align-items:flex-start;gap:12px;justify-content:flex-start}
.hs-note{margin:14px 0 0;font-size:.95rem;color:var(--body);text-align:left}
.hero-slot{position:relative;width:var(--slot);aspect-ratio:1;justify-self:center}

/* ripples that grow out from behind the mark, like a seed taking hold */
.rp{position:absolute;inset:6%;border-radius:50%;border:2px solid var(--green);opacity:0;animation:ripple 5.4s var(--ease) infinite}
.rp2{animation-delay:1.8s;border-color:var(--blue)}
.rp3{animation-delay:3.6s}
@keyframes ripple{0%{transform:scale(.55);opacity:0}15%{opacity:.5}100%{transform:scale(1.55);opacity:0}}
.hero-slot::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(166,221,153,.75),rgba(166,221,153,0) 72%);animation:glow 6s ease-in-out infinite}
@keyframes glow{50%{transform:scale(1.12);opacity:.75}}

/* chips orbiting the mark; they lean away from the pointer */
.orbit{position:absolute;white-space:nowrap;padding:.5em 1.05em;border-radius:999px;background:#fff;color:var(--ink);font-weight:500;font-size:.9rem;
  box-shadow:0 0 0 1px var(--line),0 16px 28px -18px rgba(1,3,149,.5);
  translate:calc(var(--px,0) * -16px) calc(var(--py,0) * -12px);animation:float 6.5s ease-in-out infinite}
.orbit::before{content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--green);margin-right:.6em}
.o1{top:-9%;right:-8%}
.o2{bottom:4%;left:-30%;animation-delay:-2.2s}.o2::before{background:var(--blue)}
.o3{top:52%;right:-22%;animation-delay:-4s;display:none}
@keyframes float{50%{transform:translateY(-10px)}}

/* hero background: three blobs that slowly morph and drift */
.hb{animation:morph 18s ease-in-out infinite alternate}
.hb2{animation-duration:23s;animation-delay:-6s}
.hb3{width:30vw;height:26vw;left:56%;top:-8%;background:#dfe3ff;opacity:.7;transform:rotate(12deg);animation:morph 21s ease-in-out -3s infinite alternate}
@keyframes morph{
  0%{border-radius:60% 40% 55% 45%/50% 60% 40% 50%;translate:0 0}
  50%{border-radius:42% 58% 38% 62%/58% 42% 62% 38%;translate:2vw 2vw}
  100%{border-radius:55% 45% 62% 38%/40% 58% 42% 60%;translate:-1.5vw 3vw}}

/* ---------- Phones and tablets: stack the stage, keep the mark in the middle ---------- */
@media (max-width:960px){
  .hero-stage{grid-template-columns:1fr;--slot:min(64vw,300px);row-gap:6px}
  .hero-slot{order:1}
  .hs-left{order:2;justify-self:center;max-width:46ch;text-align:center}
  .hs-left .lead,.hero--v10 .hs-left .lead{text-align:center}
  .hs-right{order:3;justify-self:center;max-width:none;display:flex;flex-direction:column;align-items:center}
  .hs-right .btn-row{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .hs-note{text-align:center}
  .o1{right:-6%}.o2{left:-6%}
}
@media (max-width:640px){.orbit{display:none}}

/* ---------- Big hands that turn with your scrolling behind the dark and call-to-action bands ---------- */
.sec--night,.cta{position:relative;overflow:clip}
.deco-mark{position:absolute;pointer-events:none;z-index:0;width:min(62vw,720px);aspect-ratio:1;fill:rgba(255,255,255,.07);
  rotate:calc(var(--sy,0) * .045deg)}
.sec--night .deco-mark{right:-16vw;top:-8%}
.cta .deco-mark{left:-18vw;bottom:-40%;fill:rgba(255,255,255,.09);rotate:calc(var(--sy,0) * -.05deg)}
.sec--night>*,.cta>.container{position:relative;z-index:1}

/* ---------- Reduced motion: still, but still friendly ---------- */
@media (prefers-reduced-motion:reduce){
  .rp,.orbit,.hb,.hb3,.hero-slot::before{animation:none}
  .rp{display:none}
  .swoosh path{animation:none;stroke-dashoffset:0}
  .deco-mark{rotate:none}
}


/* ==========================================================================
   Stations: reserved spots in the layout where the mark lands (MYLK Co style: the object lives beside the words)
   ========================================================================== */
.mk-slot{position:relative;width:var(--s,200px);height:var(--s,200px);--s:clamp(150px,18vw,230px);--disc:var(--leaf);flex:none}
.mk-slot::before{content:"";position:absolute;inset:6%;border-radius:50%;background:var(--disc);animation:disc 7s ease-in-out infinite}
@keyframes disc{50%{transform:scale(1.07)}}
.mk-slot[data-mk-theme="dark"]{--disc:rgba(255,255,255,.08)}
.mk-slot[data-mk-theme="green"]{--disc:rgba(255,255,255,.26)}

/* a giant word behind the hero mark */
.hero-word{position:absolute;left:50%;top:50%;translate:-50% -52%;z-index:-1;pointer-events:none;user-select:none;
  font-size:calc(var(--slot) * 1.12);font-weight:600;letter-spacing:-.06em;line-height:1;color:rgba(95,160,82,.12);white-space:nowrap}
.hs-left,.hs-right{position:relative;z-index:1}
.hero-slot[data-mk-theme]{--disc:transparent}

/* Why Eliana: the mark stands above the heading */
.mk-slot--c{--s:clamp(130px,15vw,180px);margin:0 auto 18px;--disc:var(--leaf)}

/* Who we are and Questions: the mark sits in the narrow left column under the label */
.gl-left .mk-slot{margin-top:18px;--s:clamp(150px,17vw,230px)}
.mk-slot--l{--disc:var(--sand)}
.grid-label>.gl-left{position:sticky;top:calc(var(--hdr) + 12px);align-self:start}
@media (max-width:860px){.grid-label>.gl-left{position:static}.gl-left .mk-slot{--s:150px;margin:10px 0 4px}}

/* What we offer: above the intro line on the right of the heading */
.oh-r .mk-slot{--s:clamp(150px,16vw,210px);margin:0 0 18px;--disc:#e9eafb}
@media (max-width:860px){.oh-r .mk-slot{--s:140px;margin:6px 0 10px}}

/* Pricing: a sticker on the corner of the receipt */
.rc-wrap{position:relative;max-width:480px;margin-inline:auto}
.rc-wrap .receipt{position:relative;z-index:1}
.mk-slot--sticker{position:absolute;top:-128px;left:-84px;--s:150px;--disc:var(--leaf);z-index:0}
@media (max-width:860px){.mk-slot--sticker{position:relative;top:auto;left:auto;--s:150px;margin:0 auto 14px}}

/* How we work (dark band): beside the heading, white hands */
.sec-head.has-slot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(20px,4vw,64px);max-width:none}
.sec-head.has-slot .mk-slot{--s:clamp(170px,24vw,320px)}
@media (max-width:860px){.sec-head.has-slot{grid-template-columns:1fr}.sec-head.has-slot .mk-slot{--s:170px;justify-self:center}}

/* Call to action (green band): to the right of the headline */
.cta--mk .wrap{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,64px)}
.cta--mk .cta-copy{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.mk-slot--cta{--s:clamp(190px,28vw,360px)}
@media (max-width:760px){.cta--mk .wrap{flex-direction:column;align-items:flex-start}.mk-slot--cta{--s:200px;align-self:center}}

@media (prefers-reduced-motion:reduce){.mk-slot::before{animation:none}}