/* Leela's Lunches — main-web brand kit (real brand fonts + tokens) */
@font-face{font-family:'Kidsglow';src:url('assets/fonts/Kidsglow.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Rooney';src:url('assets/fonts/RooneySans-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&display=swap');

:root{
  --green:#26B180; --green-light:#49CE99; --green-mint:#61E2AA; --green-deep:#1AAA82; --forest:#117a5e;
  --indigo:#5069A9; --purple:#672069; --coral:#F07550; --yellow:#FFE350;
  --charcoal:#3D3D3C; --cream:#F6F4EC; --cream-alt:#F7F6ED; --pale:#CADEBA; --white:#fff;
  --display:'Kidsglow',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --body:'Rooney','Rooney Sans',system-ui,sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--charcoal);background:var(--cream);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--forest);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--body);text-transform:uppercase;letter-spacing:.18em;font-size:12.5px;color:var(--green-deep);font-weight:500}
.btn{display:inline-block;background:var(--green);color:#fff;padding:13px 26px;border-radius:40px;font-family:var(--body);font-weight:500;font-size:15px;transition:transform .18s,background .18s,box-shadow .18s;box-shadow:0 6px 18px rgba(38,177,128,.22)}
.btn:hover{background:var(--green-deep);transform:translateY(-2px);box-shadow:0 10px 26px rgba(38,177,128,.32)}
.btn.ghost{background:transparent;color:var(--forest);box-shadow:none;border:1.5px solid var(--pale)}
.btn.ghost:hover{background:#fff;border-color:var(--green)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(246,244,236,.82);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid rgba(202,222,186,.6)}
.nav .row{display:flex;align-items:center;gap:18px;height:74px}
.nav .brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.nav .brand img{height:42px;width:42px;border-radius:50%;object-fit:cover}
.nav .brand b{font-family:var(--display);font-size:23px;color:var(--charcoal);font-weight:400}
.nav .brand b span{color:var(--green)}
.nav a.link{font-size:14.5px;color:var(--charcoal);padding:8px 2px;position:relative;transition:color .15s}
.nav a.link::after{content:'';position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--green);transition:right .22s}
.nav a.link:hover{color:var(--green-deep)} .nav a.link:hover::after{right:0}
@media(max-width:980px){.nav a.link{display:none}}

/* footer */
.foot{background:var(--charcoal);color:#e9e7df;margin-top:90px}
.foot .row{display:flex;flex-wrap:wrap;gap:30px;align-items:center;padding:34px 0}
.foot .brand{font-family:var(--display);font-size:22px;color:#fff;margin-right:auto}
.foot .brand span{color:var(--green-mint)}
.foot a{color:var(--green-mint)}
.foot small{color:#a7a59c;font-size:13px}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* floating produce accent */
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(5deg)}}
.float{animation:float 6s ease-in-out infinite}
.float.s{animation-duration:7.5s}

/* section headings */
h1,h2,h3{font-weight:400;line-height:1.08;color:var(--charcoal);margin:0}
.kg{font-family:var(--display)}
.fr{font-family:var(--serif)}

/* ===== shared engagement components (B site) ===== */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--green),var(--yellow));z-index:60;transition:width .1s}
.toTop{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:22px;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(14px);transition:.25s;z-index:55;box-shadow:0 10px 26px rgba(38,177,128,.4);border:0}
.toTop.show{opacity:1;pointer-events:auto;transform:none}
.nav.shrink .row{height:60px}
.nav.shrink .brand img{height:34px;width:34px}
/* hero band shared */
.phero{position:relative;background:linear-gradient(160deg,#26B180,#1AAA82 55%,#117a5e);color:#fff;padding:64px 0 110px;overflow:hidden;text-align:center}
.phero .veg{position:absolute;font-size:46px;opacity:.85}
.phero h1{font-family:var(--display);font-size:clamp(38px,5.6vw,68px);color:#fff;margin:12px 0 0;line-height:1}
.phero h1 .u{color:var(--yellow)}
.phero p{font-size:18px;max-width:34em;margin:18px auto 0;color:#eafaf2}
.phero .wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0}
.phero .wave svg{width:100%;height:84px;display:block}
.sec{padding:64px 0}
.sec h2{font-family:var(--display);font-size:clamp(28px,3.8vw,44px);text-align:center}
.sec .sub{text-align:center;max-width:44em;margin:14px auto 0;color:#4b4b48;font-size:17px}
/* feature cards */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:42px}
@media(max-width:820px){.cards3{grid-template-columns:1fr}.cards2{grid-template-columns:1fr}}
.fc{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 16px 40px rgba(61,61,60,.1);transition:transform .25s,box-shadow .25s}
.fc:hover{transform:translateY(-7px);box-shadow:0 28px 60px rgba(61,61,60,.18)}
.fc .im{height:190px;overflow:hidden}
.fc .im img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.fc:hover .im img{transform:scale(1.08)}
.fc .bd{padding:20px 22px}
.fc h3{font-family:var(--display);font-size:23px;margin:0 0 8px}
.fc p{margin:0;font-size:15px;color:#54544f}
.pill{display:inline-block;background:#eafaf2;color:var(--forest);font-size:12.5px;font-weight:500;padding:5px 13px;border-radius:30px}
/* checklist */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;margin-top:30px;max-width:900px;margin-left:auto;margin-right:auto}
.checks li{list-style:none;display:flex;gap:12px;align-items:flex-start;font-size:16px;color:#454540}
.checks .tick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:14px}
@media(max-width:700px){.checks{grid-template-columns:1fr}}
/* accordion */
.acc{max-width:860px;margin:30px auto 0}
.acc .it{background:#fff;border-radius:16px;margin-bottom:12px;box-shadow:0 8px 24px rgba(61,61,60,.07);overflow:hidden}
.acc .q{padding:18px 22px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-size:19px;color:var(--charcoal)}
.acc .q .ar{color:var(--green);transition:transform .25s;font-size:22px}
.acc .it.open .q .ar{transform:rotate(45deg)}
.acc .a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 22px}
.acc .it.open .a{max-height:600px;padding-bottom:18px}
.acc .a p{margin:0;color:#54544f;font-size:15.5px}
/* marquee */
.marquee{overflow:hidden;margin-top:40px;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:48px;width:max-content;animation:scrollx 32s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee .chip{background:#fff;border:1px solid var(--pale);border-radius:40px;padding:12px 24px;font-weight:500;color:var(--forest);white-space:nowrap;font-size:15px}
@keyframes scrollx{to{transform:translateX(-50%)}}
/* stat tiles (reusable) */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.tile{text-align:center;padding:24px 12px;border-radius:20px;background:#eafaf2}
.tile .n{font-family:var(--display);font-size:40px;color:var(--green-deep);line-height:1}
.tile .l{font-size:13.5px;color:#6b6b67;margin-top:8px}
@media(max-width:760px){.tiles{grid-template-columns:repeat(2,1fr)}}
/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.split img{border-radius:24px;box-shadow:0 24px 54px rgba(61,61,60,.16);width:100%;object-fit:cover}
.split h2{text-align:left}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.appbtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.appbtns a{display:inline-flex;align-items:center;gap:8px;background:var(--charcoal);color:#fff;padding:11px 18px;border-radius:14px;font-size:14px}
.appbtns a:hover{background:#000}

.nav a.link.active{color:var(--green-deep)}
.nav a.link.active::after{right:0}

/* footer layout + TKB byline */
.foot .frow{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;padding:30px 0}
.foot .addr{font-size:13.5px;color:#b8b6ad;margin-right:auto}
.foot .byline{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.foot .byline small{color:#a7a59c;font-size:12.5px}
.foot .tkb{display:inline-flex;align-items:center;gap:9px;color:#cfcdc4;font-size:12.5px;transition:opacity .2s}
.foot .tkb:hover{opacity:.75}
.foot .tkb img{height:24px;width:auto}
.foot .tkb b{font-family:Georgia,serif;color:#fff;font-style:italic}
@media(max-width:700px){.foot .byline{align-items:flex-start}}

/* ===== illustration-forward hero + showcase (white, un-boxed, parallax) ===== */
.herolite{position:relative;overflow:hidden;padding:64px 0 48px;
  background:radial-gradient(1000px 520px at 82% 6%,#eafaf2 0%,var(--cream) 60%)}
.herolite .grid{display:grid;grid-template-columns:1.04fr .96fr;gap:36px;align-items:center}
.herolite h1{font-family:var(--display);font-size:clamp(40px,5.6vw,74px);color:var(--charcoal);line-height:1;margin:12px 0 0}
.herolite h1 .u{color:var(--green-deep)}
.herolite p.lead{font-size:18.5px;color:#4b4b48;max-width:30em;margin:20px 0 0}
.herolite .cta{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.herolite .artwrap{position:relative;display:grid;place-items:center;min-height:420px}
.herolite .blobby{position:absolute;width:430px;height:430px;background:#e7f6ee;border-radius:46% 54% 60% 40%/52% 44% 56% 48%;z-index:0}
.artfloat{width:100%;max-width:470px;display:block;position:relative;z-index:1;mix-blend-mode:multiply}
@media(max-width:840px){.herolite .grid{grid-template-columns:1fr}.herolite .artwrap{min-height:340px}}

.showcase{background:#fff}
.showcase .row{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:58px 0}
.showcase .row+.row{border-top:1px solid #f0efe8}
.showcase .row.rev .txt{order:2}
.showcase .art{display:grid;place-items:center}
.showcase .art img{width:100%;max-width:420px;mix-blend-mode:multiply}
.showcase h2{text-align:left}
.showcase p{font-size:16.5px;color:#4b4b48;margin-top:14px}
@media(max-width:820px){.showcase .row,.showcase .row.rev{grid-template-columns:1fr}.showcase .row.rev .txt{order:0}}

@keyframes tkbpulse{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.06);opacity:1}}
.foot .tkb .tkbimg{height:24px;width:auto;animation:tkbpulse 2.6s ease-in-out infinite}

/* sustainability commitments — un-boxed illustrations on white */
.commit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px;margin-top:46px}
.commit{text-align:center}
.commit img{width:100%;max-width:230px;margin:0 auto 6px;display:block;mix-blend-mode:multiply}
.commit h3{font-family:var(--display);font-size:23px;color:var(--green-deep);margin:0}
.commit p{font-size:15.5px;color:#4b4b48;margin:6px auto 0;max-width:24em}
@media(max-width:820px){.commit-grid{grid-template-columns:1fr}}

/* numbered feature cards */
.numgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.numcard{background:#fff;border-radius:22px;box-shadow:0 16px 40px rgba(61,61,60,.1);padding:28px 26px;border-top:4px solid var(--green)}
.numcard:nth-child(2){border-top-color:var(--coral)}
.numcard:nth-child(3){border-top-color:var(--yellow)}
.numcard .num{font-family:var(--display);font-size:32px;color:var(--green-light);display:block;margin-bottom:8px}
.numcard:nth-child(2) .num{color:var(--coral)}
.numcard:nth-child(3) .num{color:#d8b400}
.numcard p{margin:0;font-size:15px;color:#54544f}
@media(max-width:820px){.numgrid{grid-template-columns:1fr}}

/* curve gap fix + section rhythm */
.phero{margin-bottom:0}
.phero + section,.phero + div{background:#fff;position:relative;z-index:1}
.sec{padding:80px 0}
.showcase .row{padding:72px 0}
.showcase>.wrap{padding:64px 0}
section + section{margin-top:0}
/* clear white vs off-white bands */
.band-cream{background:var(--cream)}
.band-white{background:#fff}

/* payment app CTA — tinted card, blueberry kid */
/* payment app CTA — blue laid out as an L (illustration nested in the cut corner) */
.appL{position:relative;display:grid;grid-template-columns:38% 1fr;align-items:center;min-height:340px}
.appL-bg{position:absolute;inset:0;background:linear-gradient(135deg,#dff1ff,#e7f6ee);border-radius:28px;
  clip-path:polygon(38% 0,100% 0,100% 100%,0 100%,0 50%,38% 50%)}
.appL-kid{position:relative;z-index:2;align-self:start;padding:22px 10px 0 18px}
.appL-kid img{width:100%;max-width:300px;mix-blend-mode:multiply;display:block;margin:0 auto}
.appL-content{position:relative;z-index:2;padding:30px 44px 34px 24px}
.appL-content h2{font-family:var(--display);font-size:clamp(26px,3.4vw,40px)}
@media(max-width:760px){
  .appL{grid-template-columns:1fr;text-align:center;min-height:0}
  .appL-bg{clip-path:none}
  .appL-kid{padding:24px 24px 0}.appL-content{padding:10px 24px 30px}
  .appL-content h2{text-align:center!important}.appL .appbtns{justify-content:center}
}

/* ===== Nurture interactive (nursery) ===== */
#nurture{padding-top:30px}
.chip{display:inline-block;border:1.5px solid var(--pale);background:#fff;color:var(--charcoal);border-radius:30px;padding:8px 15px;font-family:var(--body);font-size:14px;cursor:pointer;transition:.15s;margin:0}
.chip:hover{border-color:var(--green)}
.chip.on{background:var(--green);color:#fff;border-color:var(--green)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
/* served today */
.served{position:relative;overflow:hidden;background:linear-gradient(135deg,#26B180,#117a5e);color:#fff;border-radius:28px;padding:30px 34px;margin-top:36px}
.served .veg{position:absolute;font-size:34px;opacity:.85}
.served-head{position:relative;z-index:2}
.served-head h3{font-family:var(--display);font-size:24px;color:#fff;margin:0}
.served-head p{margin:4px 0 0;color:#eafaf2;font-size:16px}
.served-head b{font-family:var(--display);font-size:22px;color:var(--yellow)}
.served-strip{position:relative;z-index:2;display:flex;gap:14px;overflow-x:auto;margin-top:18px;padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.45) transparent}
.served-strip::-webkit-scrollbar{height:6px}
.served-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4);border-radius:10px}
.served-strip::-webkit-scrollbar-track{background:transparent}
.served-item{flex:0 0 auto;width:210px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:16px;padding:14px 16px}
.served-name{font-family:var(--display);font-size:17px;color:#fff}
.served-yum{font-size:13px;color:#eafaf2;margin-top:5px;line-height:1.5}
/* two cards */
.nurt-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
@media(max-width:860px){.nurt-grid{grid-template-columns:1fr}}
.card-x{background:#fff;border-radius:24px;box-shadow:0 16px 40px rgba(61,61,60,.1);padding:28px 30px}
.card-x h3{font-family:var(--display);font-size:24px;margin:0}
.cx-sub{color:#6b6b67;font-size:14.5px;margin:6px 0 14px}
.step{margin:12px 0}
.step>label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#8a8a8a;font-weight:500}
/* menu builder output */
.mb-out{margin-top:18px;display:grid;gap:10px}
.mb-note{background:#fff8e0;border:1px solid #f0d98a;border-radius:14px;padding:12px 14px;font-size:14px;color:#6b5600}
.mb-meal{display:grid;grid-template-columns:120px 1fr auto;gap:12px;align-items:center;background:#f7fbf8;border:1px solid #e3f0e7;border-radius:14px;padding:12px 16px}
.mb-slot{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--forest);font-weight:500}
.mb-dish b{font-size:16px}
.mb-yum{font-size:13px;color:#6b6b67;margin-top:3px}
.mb-swap{font-size:10px;background:#edf1fb;color:var(--indigo);border-radius:20px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.mb-safe{font-size:12px;font-weight:600;color:#fff;background:var(--green);border-radius:20px;padding:4px 11px}
@media(max-width:560px){.mb-meal{grid-template-columns:1fr auto}.mb-slot{grid-column:1/-1}}
/* nuri bot */
.nuri-feed{background:#f7fbf8;border:1px solid #e3f0e7;border-radius:16px;padding:14px;height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:9px}
.nmsg{max-width:88%;padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.5}
.nmsg.bot{background:#fff;border:1px solid var(--pale);align-self:flex-start;color:#3d3d3c}
.nmsg.me{background:var(--green);color:#fff;align-self:flex-end}
.nuri-input{display:flex;gap:8px;margin-top:12px}
.nuri-input input{flex:1;border:1.5px solid var(--pale);border-radius:14px;padding:11px 14px;font-family:var(--body);font-size:15px}
.nuri-input .btn{padding:11px 20px}

/* payment instructions — sticky image + stacked steps */
.pay-instr{display:grid;grid-template-columns:360px 1fr;gap:46px;align-items:start}
.pay-img{position:sticky;top:92px}
.pay-img img{width:100%;border-radius:24px;box-shadow:0 22px 50px rgba(61,61,60,.16)}
.pay-steps .scard{margin-bottom:16px}
.pay-h{font-family:var(--display);font-size:21px;color:var(--green-deep);margin:26px 0 8px}
@media(max-width:820px){.pay-instr{grid-template-columns:1fr}.pay-img{position:static}.pay-img img{max-width:360px;margin:0 auto;display:block}}

/* live serving badge + fading logo bubbles */
.live-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:30px;padding:6px 14px;font-size:13px;font-weight:500;letter-spacing:.02em}
.live-dot{width:9px;height:9px;border-radius:50%;background:#FFE350;box-shadow:0 0 0 0 rgba(255,227,80,.7);animation:livepulse 1.5s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(255,227,80,.7)}70%{box-shadow:0 0 0 12px rgba(255,227,80,0)}100%{box-shadow:0 0 0 0 rgba(255,227,80,0)}}
.served-bubbles{position:absolute;top:0;left:0;right:0;height:48%;z-index:1;pointer-events:none}
.served-bubbles .bub{position:absolute;width:46px;height:46px;border-radius:50%;background:#fff;object-fit:contain;padding:6px;box-shadow:0 8px 20px rgba(0,0,0,.18);opacity:0;animation:bubfade 9s ease-in-out infinite}
.bub.b1{top:8%;left:30%}.bub.b2{top:18%;left:46%}.bub.b3{top:6%;left:62%}.bub.b4{top:30%;left:38%}
.bub.b5{top:14%;left:78%}.bub.b6{top:40%;left:56%}.bub.b7{top:34%;left:88%}.bub.b8{top:10%;left:90%}
.bub.b9{top:46%;left:72%}.bub.b10{top:24%;left:66%}
.served-bubbles .bub:nth-child(1){animation-delay:0s}.served-bubbles .bub:nth-child(2){animation-delay:.9s}
.served-bubbles .bub:nth-child(3){animation-delay:1.8s}.served-bubbles .bub:nth-child(4){animation-delay:2.7s}
.served-bubbles .bub:nth-child(5){animation-delay:3.6s}.served-bubbles .bub:nth-child(6){animation-delay:4.5s}
.served-bubbles .bub:nth-child(7){animation-delay:5.4s}.served-bubbles .bub:nth-child(8){animation-delay:6.3s}
.served-bubbles .bub:nth-child(9){animation-delay:7.2s}.served-bubbles .bub:nth-child(10){animation-delay:8.1s}
@media(max-width:680px){.served-bubbles .bub{width:34px;height:34px}.bub.b7,.bub.b8,.bub.b9,.bub.b10{display:none}}}