/* ==========================================================================
   Eliana Capital v9: design refresh
   Loaded after styles.css. Takes its cues from two references:
   - Naturals (naturals-landing.vercel.app): floating pill header, arch-shaped photos,
     self-scrolling feature cards, service cards that stack as you scroll, big rounded surfaces,
     "( parenthetical )" section labels, stat cards.
   - MYLK Co (mylk-co.com): warm cream paper, soft rounded shapes, friendly chunky pills.
   Brand colours (Deep Trust Blue, Growth Green) and the typeface are unchanged.
   ========================================================================== */

:root{
  --paper:#fefdf3;          /* warm cream page */
  --cream:#f6f3e3;          /* card cream */
  --mist:#f4f1e1;           /* replaces the cool lavender tint */
  --leaf:#e8f1dc;
  --sand:#efe9d2;
  --hdr:96px;
  --r-xl:44px; --r-lg:32px; --r-md:22px;
  --gap-card:12px;          /* gap between the big rounded bands */
}
body{background:var(--paper)}
html.foot-reveal main{background:var(--paper);border-radius:0 0 var(--r-xl) var(--r-xl)}

/* ---------- Section labels: ( Like this ) ---------- */
.label{gap:.3em;color:var(--ink);font-size:1rem;letter-spacing:0;margin-bottom:1.2rem}
.label::before{content:"(";width:auto;height:auto;border-radius:0;background:none;color:var(--green-ink);font-weight:600}
.label::after{content:")";color:var(--green-ink);font-weight:600}
.dark .label,.label--light,.phero .label{color:#fff}
.dark .label::before,.dark .label::after,.phero .label::before,.phero .label::after{color:var(--green-lite)}
.sec--green .label{color:var(--deep)}

/* ---------- Floating pill header ---------- */
.hdr{height:auto;padding:14px 0;color:var(--ink);--logo-fg:var(--blue);--logo-cut:#fff}
.hdr .container{
  width:min(1240px,100% - 24px);
  background:rgba(255,254,246,.9);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border-radius:999px;padding:8px 8px 8px 26px;
  box-shadow:0 12px 34px -20px rgba(1,3,149,.4),0 0 0 1px rgba(16,19,64,.07);
  transition:box-shadow .3s,background .3s;
}
.hdr.is-solid,.menu-open .hdr,.menu-open .hdr.is-solid{background:transparent;color:var(--ink);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;--logo-fg:var(--blue);--logo-cut:#fff}
.hdr.is-solid .container{box-shadow:0 16px 40px -18px rgba(1,3,149,.45),0 0 0 1px rgba(16,19,64,.09)}
.menu-btn{border-color:rgba(16,19,64,.22);padding:.62em 1.15em}
.menu-btn:hover{border-color:var(--ink)}
/* the pill is always light, so the full-colour logo is always the one shown */
html body .hdr .logo-on-dark{display:none!important}
html body .hdr .logo-on-light,
html body.menu-open .hdr .logo-on-light,
html body.menu-open .hdr.is-solid .logo-on-light{display:block!important}
.logo img{height:40px}
@media (max-width:560px){.logo img{height:34px}.hdr .container{padding-left:18px}}

/* ---------- Home hero: cream, centred, arch photos ---------- */
.hero.hero--arch{
  background:var(--paper);color:var(--ink);
  min-height:0;justify-content:flex-start;
  padding-top:calc(var(--hdr) + clamp(28px,5vw,72px));
  padding-bottom:clamp(40px,6vw,88px);
}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hb{position:absolute;display:block;border-radius:60% 40% 55% 45%/50% 60% 40% 50%}
.hb1{width:46vw;height:38vw;left:-14vw;top:6%;background:var(--leaf);transform:rotate(-18deg)}
.hb2{width:40vw;height:34vw;right:-12vw;top:30%;background:var(--sand);transform:rotate(22deg)}
.hero-wm{position:absolute;left:50%;top:58%;width:min(120vw,1100px);aspect-ratio:1;margin:calc(min(120vw,1100px) / -2) 0 0 calc(min(120vw,1100px) / -2);fill:rgba(1,3,149,.035);animation:spin 220s linear infinite}
.hero--arch .hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:0}
.chip-live{display:inline-flex;align-items:center;gap:.7em;margin:0 0 clamp(18px,2.4vw,30px);padding:.55em 1.15em;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font-weight:500;font-size:.98rem;color:var(--ink)}
.chip-live i{width:.7em;height:.7em;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(95,160,82,.55);animation:ping 2.4s ease-out infinite}
@keyframes ping{70%,100%{box-shadow:0 0 0 .7em rgba(95,160,82,0)}}
.hero--arch h1{color:var(--ink);font-size:clamp(2.5rem,7vw,6.2rem);letter-spacing:-.04em;line-height:1.02;margin-bottom:.35em;max-width:16ch}
.hero--arch .ln{white-space:normal;text-wrap:balance}
.hero--arch .lead{color:var(--body);margin-inline:auto;text-align:center}
.hero--arch .btn-row{justify-content:center}
.hero--arch .btn-line:hover{background:var(--ink);color:#fff}

.arch-wrap{position:relative;margin-top:clamp(34px,5.5vw,76px)}
.arches{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:clamp(10px,2.4vw,34px);align-items:end;width:min(980px,100%);margin-inline:auto}
.arches .photo{aspect-ratio:3/4;border-radius:999px 999px var(--r-lg) var(--r-lg);box-shadow:0 34px 60px -34px rgba(1,3,149,.5)}
.arches .photo:nth-child(1){rotate:-5deg;animation:bob 7.5s ease-in-out infinite}
.arches .photo:nth-child(2){aspect-ratio:3/4.15;z-index:2;animation:bob 8.5s ease-in-out -2s infinite}
.arches .photo:nth-child(3){rotate:5deg;animation:bob 7s ease-in-out -4s infinite}
@keyframes bob{50%{translate:0 -14px}}
.arches figcaption{max-width:calc(100% - 24px)}
@media (max-width:640px){.arches figcaption{display:none}.arches .photo:nth-child(1){rotate:-4deg}.arches .photo:nth-child(3){rotate:4deg}}

.stamp{position:absolute;right:0;top:-34px;width:clamp(96px,10vw,140px);height:auto;z-index:3;filter:drop-shadow(0 14px 22px rgba(47,106,42,.35))}
.stamp .ring{transform-origin:100px 100px;animation:spin 26s linear infinite}
@media (max-width:760px){.stamp{display:none}}

.hero--arch .hero-facts{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:0;border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--line);margin:clamp(28px,4vw,52px) auto 0;width:min(980px,100%)}
.hero--arch .hero-facts div{padding:20px 26px}
.hero--arch .hero-facts div+div{border-left:1px solid var(--line);padding-left:26px}
.hero--arch .hero-facts dt{color:var(--body);font-size:.92rem;margin-bottom:2px}
.hero--arch .hero-facts dd{color:var(--ink);font-size:clamp(1.05rem,1.8vw,1.45rem)}
@media (max-width:640px){
  .hero--arch .hero-facts{grid-template-columns:1fr}
  .hero--arch .hero-facts div+div{border-left:0;border-top:1px solid var(--line);padding-left:26px}
  .hero--arch .hero-facts div{padding:14px 22px}
}

/* ---------- Feature cards that scroll by themselves ---------- */
.feat-sec{padding-block:clamp(64px,9vw,128px) clamp(40px,6vw,88px)}
.center-head{text-align:center;max-width:820px;margin-inline:auto}
.center-head .label{justify-content:center}
.center-head h2{font-weight:400;letter-spacing:-.04em}
.center-head .lead{margin:1.2rem auto 0;text-align:center}
.fm{overflow:hidden;margin-top:clamp(32px,4.5vw,64px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.fm-track{display:flex;width:max-content;animation:fm 60s linear infinite}
.fm:hover .fm-track,.fm:focus-within .fm-track{animation-play-state:paused}
.fm-group{display:flex;margin:0;padding:0;list-style:none}
.fm-card{flex:none;width:clamp(264px,26vw,340px);margin-right:18px;background:#fff;border-radius:var(--r-lg);padding:28px 28px 32px;box-shadow:0 0 0 1px var(--line);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.fm-card:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--line),0 28px 44px -30px rgba(1,3,149,.45)}
.fm-ico{width:56px;height:56px;border-radius:18px;background:var(--leaf);color:var(--green-ink);display:grid;place-items:center;margin-bottom:22px}
.fm-ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fm-card h3{font-size:1.4rem;font-weight:500;margin-bottom:.55rem}
.fm-card p{margin:0;font-size:1rem}
@keyframes fm{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .fm{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .fm-track{animation:none}
  .fm-group[aria-hidden="true"]{display:none}
}

/* ---------- Who we are: stat cards ---------- */
.stats{gap:14px}
.stat{background:var(--cream);border-top:0;border-radius:var(--r-lg);padding:28px 28px 32px;box-shadow:0 0 0 1px rgba(16,19,64,.05)}
.stat .v{font-size:clamp(2.8rem,5.2vw,4.6rem)}
.sec--mist .stat{background:#fff}

/* ---------- Service cards that stack as you scroll ---------- */
.offer-head{margin-bottom:clamp(32px,5vw,64px);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,4vw,64px);align-items:end;max-width:none}
.offer-head h2{font-weight:400;letter-spacing:-.045em;font-size:clamp(2.4rem,6vw,5.2rem);line-height:1}
.offer-head h2 span{display:block}
.offer-head h2 span+span{padding-left:clamp(0px,9vw,140px)}
.offer-head p{margin:0}
@media (max-width:860px){.offer-head{grid-template-columns:1fr}}

.stack{position:relative}
.stack-card{
  position:sticky;top:calc(var(--hdr) + var(--i) * 16px);
  display:grid;grid-template-columns:1fr minmax(0,.86fr);gap:clamp(20px,4vw,56px);align-items:center;
  background:var(--sand);border-radius:var(--r-xl);padding:clamp(16px,2.4vw,30px);
  margin-bottom:clamp(20px,3vw,36px);
  box-shadow:0 36px 64px -44px rgba(1,3,149,.5),0 0 0 1px rgba(16,19,64,.06);
  transform-origin:50% 0;will-change:transform;
}
.stack-card.c2{background:#fff}
.stack-card.c3{background:var(--leaf)}
.stack-card.c4{background:#e9eafb}
.stack-copy{padding:clamp(8px,2vw,32px) clamp(8px,2vw,28px)}
.stack-copy h3{font-size:clamp(2rem,4.2vw,3.6rem);font-weight:400;letter-spacing:-.04em;line-height:1.04;margin:1.1rem 0 1rem}
.stack-copy p{max-width:42ch;font-size:clamp(1.05rem,1.4vw,1.2rem);margin-bottom:1.6rem}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tags li{border:1.5px solid rgba(16,19,64,.24);border-radius:999px;padding:.35em .95em;font-size:.94rem;font-weight:500;color:var(--ink);background:rgba(255,255,255,.55)}
.stack-media{position:relative;justify-self:end;height:min(66svh,600px);aspect-ratio:4/5;width:auto;max-width:100%;border-radius:var(--r-lg);overflow:hidden;background:var(--blue)}
.stack-media .scene{opacity:1;transform:none}
.stack-media .scene .bg{transform-box:fill-box;transform-origin:50% 50%;animation:offer-drift 16s ease-in-out infinite alternate}
@media (max-width:860px){
  .stack-card{position:relative;top:auto;grid-template-columns:1fr;gap:6px}
  .stack-media{order:-1;justify-self:stretch;height:auto;width:100%}
  .stack-copy{padding:18px 8px 10px}
}

/* ---------- Big rounded bands, like Naturals' contained sections ---------- */
.sec--night{margin-inline:clamp(10px,1.4vw,20px);border-radius:var(--r-xl)}
.vel{margin:var(--gap-card) clamp(10px,1.4vw,20px) 0;border-radius:var(--r-xl)}
.cta{margin:var(--gap-card) clamp(10px,1.4vw,20px) 0;border-radius:var(--r-xl)}
.foot{margin:var(--gap-card) clamp(10px,1.4vw,20px) clamp(10px,1.4vw,20px);border-radius:var(--r-xl)}
.phero{margin:12px clamp(10px,1.4vw,20px) 0;border-radius:var(--r-xl)}
.phero{min-height:min(74svh,680px)}

/* ---------- Rounder surfaces everywhere ---------- */
.photo{border-radius:var(--r-lg)}
.photos .photo.arch{border-radius:999px 999px var(--r-lg) var(--r-lg)}
.photo.has-img figcaption{border-radius:999px}
.panel{border-radius:var(--r-lg)}
.trust li,.spec>div{border-radius:var(--r-lg)}
.contact-card,.form{border-radius:var(--r-xl)}
.field input,.field select,.field textarea{border-radius:18px}
.person{border-radius:var(--r-lg)}
.story-nav a,.facts>div{border-radius:var(--r-md)}
.photo--feature{border-radius:var(--r-xl)}
.stories-grid .story .photo{border-radius:var(--r-xl)}

/* ---------- "People we back": friendly pills instead of outline type ---------- */
.marquee{background:transparent;border:0;padding:clamp(28px,4vw,56px) 0 clamp(8px,1.5vw,16px)}
.marquee-track span{font-size:clamp(1.25rem,2.7vw,2.1rem);padding:.42em 1.15em .46em;margin-right:14px;border-radius:999px;background:#fff;color:var(--ink);border:1.5px solid var(--line);-webkit-text-stroke:0;letter-spacing:-.02em;font-weight:500}
.marquee-track span:nth-child(even){background:var(--blue);border-color:var(--blue);color:#fff;-webkit-text-stroke:0}
.marquee-track span:nth-child(3n){background:var(--green);border-color:var(--green);color:var(--deep)}
.marquee-note{max-width:60ch}

/* ---------- Questions as soft cards ---------- */
.faq details{border:0;background:var(--cream);border-radius:var(--r-lg);margin-bottom:12px;padding:0 clamp(18px,2.4vw,30px)}
.faq details:last-child{border-bottom:0}
.faq details[open]{background:#fff;box-shadow:0 0 0 1px var(--line),0 26px 44px -34px rgba(1,3,149,.4);padding-inline:clamp(18px,2.4vw,30px);border-radius:var(--r-lg)}
.faq summary{padding:22px 0}
.faq .ans{padding-right:56px}
.faq-search{background:#fff;border-color:rgba(16,19,64,.12)}

/* ---------- Buttons: a touch larger, pill-first ---------- */
.btn{padding:1em 1.75em}
.btn-sm{padding:.78em 1.35em}
.btn-blue{box-shadow:0 14px 26px -16px rgba(1,3,149,.7)}

/* Menu: keep the dark overlay, clear the pill header */
.menu{padding-top:calc(var(--hdr) + 28px)}

@media (prefers-reduced-motion:reduce){
  .arches .photo,.hero-wm,.stamp .ring,.chip-live i{animation:none}
  .stack-card{transform:none!important;filter:none!important}
}

/* The menu opens from the Menu button inside the pill */
.menu{clip-path:circle(0 at calc(100% - 68px) 46px)}
.menu-open .menu{clip-path:circle(150% at calc(100% - 68px) 46px)}