html,body{margin:0}

/* Layout concept: a calm sunrise story. Hero with a "circle of care" (dotted rings echoing the logo) around an arched window onto a human moment, then a pinned four-chapter scroll story, a full-bleed zoom band, and soft rounded sections. */
/* Theme: Caregiver Saathi plum (#4F0A4B, from the logo) and white. Token names are kept from the first concept:
   --teal is the primary brand colour, --sun and --rose are lighter plum accents. */
:root{
  --bg:#FFFFFF; --fg:#2E062C; --muted:#6E5A6C; --line:#ECE1EB; --card:#FFFFFF; --soft:#F6EFF5; --sage:#F1E7F0; --rosel:#FAF4F9;
  --teal:#4F0A4B; --teal-ink:#FFFFFF; --sun:#A8749F; --rose:#7A3A76;
  --sky1:#FFFFFF; --sky2:#F4EAF3; --ring:#D9BFD6; --ring-dot:#A06A9B; --ring-fill:#F0E2EE;
  --band:#3D0839; --on-band:#FFFFFF; --on-band-muted:#D9C3D7; --shadow:0 30px 60px -30px rgba(46,6,44,.32);
  --logo-filter:none;
  --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif; --deva:'Noto Serif Devanagari','Fraunces',serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1A0618; --fg:#F7EEF6; --muted:#C3AEC1; --line:#3A1A37; --card:#240B21; --soft:#2C0F29; --sage:#2A0E27; --rosel:#301230;
  --teal:#D9B3D5; --teal-ink:#2E062C; --sun:#C79BC3; --rose:#D7A9D3; --sky1:#1A0618; --sky2:#2E0E2B; --ring:#4A1E46; --ring-dot:#8E5A8A; --ring-fill:#2A0D27;
  --band:#12040F; --shadow:0 30px 60px -30px rgba(0,0,0,.6); --logo-filter:brightness(0) invert(1); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1A0618; --fg:#F7EEF6; --muted:#C3AEC1; --line:#3A1A37; --card:#240B21; --soft:#2C0F29; --sage:#2A0E27; --rosel:#301230;
  --teal:#D9B3D5; --teal-ink:#2E062C; --sun:#C79BC3; --rose:#D7A9D3; --sky1:#1A0618; --sky2:#2E0E2B; --ring:#4A1E46; --ring-dot:#8E5A8A; --ring-fill:#2A0D27;
  --band:#12040F; --shadow:0 30px 60px -30px rgba(0,0,0,.6); --logo-filter:brightness(0) invert(1); color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.015em}
p{margin:0}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:20px}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
em{font-style:italic}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.art{position:absolute;inset:0}
.art svg{display:block;width:100%;height:100%}

/* concept ribbon + nav */
.ribbon{background:var(--band);color:var(--on-band-muted);font-size:12.5px;text-align:center;padding:8px 16px}
.ribbon b{color:#fff;font-weight:600}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:68px}
.mark{display:flex;align-items:center}
.mark img{display:block;height:38px;width:auto;filter:var(--logo-filter)}
.nav nav{display:flex;gap:26px;margin-left:auto;font-size:15px;color:var(--muted);font-weight:500}
.nav nav a:hover{color:var(--fg)}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 15.5px/1 var(--sans);padding:16px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .25s,background .25s,box-shadow .25s}
.btn-primary{background:var(--teal);color:var(--teal-ink);box-shadow:0 10px 24px -12px var(--teal)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-line{border-color:var(--fg);color:var(--fg)}
.btn-line:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.nav .btn{padding:12px 20px;font-size:14.5px}
@media(max-width:860px){.nav nav{display:none}.nav .btn{margin-left:auto}}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky1),var(--sky2));padding-block:clamp(44px,6vw,88px) clamp(96px,11vw,150px)}
.hero-edge{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(36px,5vw,80px);display:block;z-index:3;fill:var(--bg)}
.petals{position:absolute;inset:0;pointer-events:none}
.petal{position:absolute;display:block;will-change:transform}
.petal path{fill:currentColor}
.p1{left:3%;top:10%;width:34px;rotate:-28deg;color:var(--sun);opacity:.55}
.p2{left:47%;top:7%;width:22px;rotate:24deg;color:var(--rose);opacity:.4}
.p3{right:3%;bottom:24%;width:30px;rotate:62deg;color:var(--ring-dot);opacity:.6}
.p4{left:44%;bottom:9%;width:18px;rotate:-70deg;color:var(--sun);opacity:.45}
.p5{left:1.5%;top:52%;width:20px;rotate:40deg;color:var(--rose);opacity:.35}
.p6{right:12%;top:4%;width:16px;rotate:-15deg;color:var(--ring-dot);opacity:.55}
.p7{left:30%;bottom:6%;width:24px;rotate:95deg;color:var(--ring-dot);opacity:.45}
.p8{right:1%;top:40%;width:14px;rotate:-50deg;color:var(--teal);opacity:.3}
/* drifting petals move on their own; scroll petals (data-lag) own transform, so these animate transform only */
.drift{animation:drift-a var(--dur,12s) ease-in-out var(--del,0s) infinite alternate}
.d1{left:8%;bottom:14%;width:22px;rotate:20deg;color:var(--sun);opacity:.5;--dur:11s}
.d2{left:50%;top:72%;width:18px;rotate:-35deg;color:var(--rose);opacity:.4;--dur:14s;--del:-4s;animation-name:drift-b}
.d3{right:6%;top:18%;width:20px;rotate:75deg;color:var(--sun);opacity:.45;--dur:9s;--del:-2s;animation-name:drift-c}
.d4{right:18%;bottom:12%;width:16px;rotate:-80deg;color:var(--teal);opacity:.3;--dur:13s;--del:-7s}
.d5{left:22%;top:3%;width:14px;rotate:10deg;color:var(--ring-dot);opacity:.5;--dur:16s;--del:-9s;animation-name:drift-b}
@keyframes drift-a{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(14px,-16px) rotate(14deg)}100%{transform:translate(-6px,-30px) rotate(-8deg)}}
@keyframes drift-b{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(-18px,10px) rotate(-18deg)}100%{transform:translate(8px,24px) rotate(10deg)}}
@keyframes drift-c{0%{transform:translate(0,0) rotate(0)}33%{transform:translate(10px,12px) rotate(22deg)}66%{transform:translate(-12px,4px) rotate(-12deg)}100%{transform:translate(4px,-14px) rotate(6deg)}}
@media(max-width:900px){.p1,.p4,.p5,.p7,.d2,.d5{display:none}.p2{left:auto;right:6%;top:2%}.p3{bottom:8%}.p6{right:22%;top:1%}.d3{top:30%}}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:clamp(46px,7.4vw,104px);font-weight:400;margin-top:18px;max-width:10em}
.hero h1 em{color:var(--teal)}
.hero .lede{max-width:30em;margin-top:24px;font-size:clamp(18px,1.9vw,21px);color:var(--muted)}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero .meta{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14.5px;color:var(--muted)}
.hero .meta span{display:inline-flex;align-items:center;gap:8px}
.hero .meta span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rose)}
.hero-art{position:relative;display:flex;justify-content:center}
.rings{position:absolute;left:50%;top:50%;width:min(150%,720px);aspect-ratio:1;translate:-50% -50%;z-index:0;pointer-events:none;will-change:transform}
.rings svg{display:block;width:100%;height:100%;overflow:visible}
.r-fill{fill:var(--ring-fill)}
.r-dots{fill:none;stroke:var(--ring-dot);stroke-width:4;stroke-linecap:round;stroke-dasharray:.1 16}
.r-line{fill:none;stroke:var(--ring);stroke-width:1.5}
.orbit{transform-box:view-box;transform-origin:50% 50%;animation:orbit 70s linear infinite}
.orbit circle{fill:var(--teal)}.orbit .alt{fill:var(--sun)}
.o2{animation-duration:110s;animation-direction:reverse}
@keyframes orbit{to{transform:rotate(360deg)}}
.arch{position:relative;z-index:1;width:min(100%,460px);aspect-ratio:4/5;border-radius:999px 999px 30px 30px;overflow:hidden;background:var(--soft);box-shadow:var(--shadow);border:6px solid color-mix(in srgb,var(--card) 80%,transparent)}
.chip{position:absolute;z-index:4;background:var(--card);color:var(--fg);border-radius:18px;padding:11px 16px;box-shadow:0 18px 36px -18px rgba(46,6,44,.4);display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:600;line-height:1.25;will-change:transform}
.chip i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;font-style:normal;font-size:15px;color:#fff}
.chip small{display:block;font-weight:500;font-size:12.5px;color:var(--muted)}
.c1{left:-6%;top:14%}.c1 i{background:var(--teal);color:var(--teal-ink)}
.c2{right:-4%;top:64%}.c2 i{background:var(--sun)}
.c3{left:2%;bottom:14%}.c3 i{background:var(--rose)}
@media(max-width:560px){.c1{left:-2%}.c2{right:-2%}}

/* story: pinned scroll scenes */
.story{position:relative;background:var(--bg)}
.story .chap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,80px);align-items:center;max-width:1180px;margin-inline:auto;padding:clamp(48px,7vw,96px) 20px}
.chap-text h2{font-size:clamp(38px,5.2vw,72px);margin-top:14px}
.chap-text p{margin-top:20px;font-size:clamp(18px,1.8vw,21px);color:var(--muted);max-width:26em}
.chap-art{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:16/13;box-shadow:var(--shadow);background:var(--soft)}
@media(max-width:860px){.story .chap{grid-template-columns:minmax(0,1fr)}.chap-art{order:-1;aspect-ratio:16/11}}
.story.pin{height:500svh;height:500vh}
@supports (height:1svh){.story.pin{height:calc(var(--n,4) * 100svh + 100svh)}}
.story.pin .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding-top:68px}
.story.pin .chap{position:absolute;inset:68px 0 0 0;padding-block:0;align-content:center;will-change:opacity,transform}
@media(max-width:860px){.story.pin .chap{align-content:center;gap:22px}.story.pin .chap-art{max-height:36vh;aspect-ratio:16/10}}
.dots{position:absolute;right:max(16px,calc((100vw - 1180px)/2));top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:12px;z-index:3}
.story.pin .dots{display:flex}
.dots button{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:var(--line);cursor:pointer;transition:background .3s,transform .3s}
.dots button.on{background:var(--teal);transform:scale(1.5)}
@media(max-width:860px){.dots{right:10px}}

/* zoom band */
.band{padding-block:clamp(36px,6vw,84px)}
.band-card{position:relative;border-radius:36px;overflow:hidden;height:clamp(360px,52vw,600px);display:grid;place-items:center;text-align:center;will-change:transform;background:var(--rose)}
.band-card .art{inset:-6% 0}
.band-card::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(46,6,44,.45),rgba(46,6,44,.6))}
.band-card .inner{position:relative;z-index:2;padding:24px;color:#fff;max-width:900px}
.band-card h2{font-size:clamp(40px,7vw,96px);font-weight:400;color:#fff}
.band-card p{margin-top:18px;font-size:clamp(17px,1.8vw,21px);color:#F3E6F2}

/* common sections */
section.s{padding-block:clamp(60px,8vw,110px)}
.sec-head{margin-bottom:44px;max-width:20em}
.sec-head h2{font-size:clamp(34px,4.8vw,62px);margin-top:14px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}

/* moments */
.moment{display:flex;flex-direction:column;gap:14px;will-change:transform}
.moment .pic{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/3;background:var(--soft);box-shadow:var(--shadow)}
.moment .t{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--rose);text-transform:uppercase}
.moment h3{font-size:25px}
.moment p{color:var(--muted);font-size:16px}

/* paths */
.paths{background:var(--soft)}
.path{background:var(--card);border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:12px;transition:transform .35s,box-shadow .35s}
.path:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.path .face{position:relative;width:132px;height:132px;border-radius:50%;overflow:hidden;background:var(--soft)}.path h3{font-size:29px;margin-top:10px}
.path p{color:var(--muted)}
.path .go{margin-top:auto;padding-top:14px;font-weight:700;color:var(--teal);display:flex;gap:8px;align-items:center}
.path .go span{transition:transform .3s}
.path:hover .go span{transform:translateX(6px)}

/* services */
.svc{border-radius:26px;padding:28px;display:flex;flex-direction:column;gap:12px;min-height:250px;transition:transform .35s}
.svc:hover{transform:translateY(-6px)}
.svc.a{background:var(--soft)}.svc.b{background:var(--sage)}.svc.c{background:var(--rosel)}
.svc svg{width:44px;height:44px;stroke:var(--teal);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc h3{font-size:27px}
.svc p{color:var(--muted);font-size:16.5px}
.svc .tag{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--teal)}

/* organisations */
.org{background:var(--band);color:var(--on-band);position:relative;overflow:hidden}
.org .eyebrow{color:#E6CFE4}
.org-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:860px){.org-grid{grid-template-columns:minmax(0,1fr)}}
.org h2{font-size:clamp(36px,5vw,66px);margin-top:14px}
.org .lede{margin-top:20px;color:var(--on-band-muted);font-size:19px;max-width:28em}
.org ul{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:0}
.org li{padding:16px 0;border-top:1px solid rgba(255,255,255,.14);font-family:var(--serif);font-size:23px}
.org li span{font:400 15.5px/1.5 var(--sans);color:var(--on-band-muted);display:block}
.org .arch{width:min(100%,420px);margin-inline:auto;background:#5A1F56;border-color:rgba(255,255,255,.12)}

/* privacy */
.priv{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:8px}
.priv div{border-top:3px solid var(--sun);padding-top:18px}
.priv h3{font-size:24px}.priv p{margin-top:8px;color:var(--muted);font-size:16.5px}
.badge{display:inline-flex;gap:8px;align-items:center;border:1.5px solid var(--line);padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--muted)}
.badge::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sun)}

/* app */
.app{background:var(--sage)}
.app-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:860px){.app-grid{grid-template-columns:minmax(0,1fr)}}
.app h2{font-size:clamp(36px,5vw,66px);margin-top:14px}
.app .lede{margin-top:18px;color:var(--muted);font-size:19px;max-width:28em}
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.store{border:1.5px solid var(--fg);border-radius:14px;padding:11px 20px;font-weight:700;font-size:15px;line-height:1.2}
.store small{display:block;font-weight:500;font-size:11px;color:var(--muted)}
.phone-wrap{display:flex;justify-content:center;position:relative}
.phone{position:relative;width:min(310px,80vw);aspect-ratio:9/18;border-radius:40px;background:#2E062C;padding:12px;box-shadow:var(--shadow)}
.screen{height:100%;border-radius:30px;background:#FFFFFF;color:#2E062C;padding:22px 16px;display:flex;flex-direction:column;gap:11px;overflow:hidden}
.screen small{font-size:11px;font-weight:700;letter-spacing:.1em;color:#6E5A6C;text-transform:uppercase}
.screen h4{font:500 25px/1.1 var(--serif)}
.tk{background:#FAF6FA;border:1px solid #ECE1EB;border-radius:14px;padding:11px 13px;display:flex;gap:11px;align-items:center;font-size:13.5px;line-height:1.3}
.tk b{display:block;font-weight:700}.tk span{color:#6E5A6C;font-size:12px}
.tk i{width:11px;height:11px;border-radius:50%;background:#4F0A4B;flex:none}
.tk.ok i{background:#9C6A99}.tk.w i{background:#C9A6C6}
.ask{margin-top:auto;border-radius:16px;background:#4F0A4B;color:#FFFFFF;padding:12px 14px;font-size:13px;line-height:1.4}
.ask em{font-style:normal;font-weight:700;color:#E6CFE4}

footer{background:var(--band);color:var(--on-band-muted);padding-block:64px 40px;font-size:15px}
footer .cols{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(auto-fit,minmax(140px,1fr));gap:32px}
footer h4{font:700 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 12px}
footer a{display:block;padding:4px 0}footer a:hover{color:#fff}
footer .fine{margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px}
footer .mark img{height:46px;filter:brightness(0) invert(1)}
@media(max-width:700px){footer .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}footer .cols>div:first-child{grid-column:1/-1}}

/* reveal */
.rv-pre{opacity:.2;transform:translateY(34px)}
.rv{transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv-pre{opacity:1;transform:none}
  .petal,.rings,.chip,.moment,.band-card{transform:none!important}
  .orbit,.drift{animation:none}
  *{transition:none!important}
}