/* Mango Grove · concept by Brand Evolution */
:root{
  --sun:#FFC93C; --sun-soft:#FFE7A3; --mango:#F7A10E; --leaf:#2F7A44; --leaf-deep:#1F4D30; --leaf-lite:#7ACB60;
  --terra:#B2472F; --terra-deep:#8E3522; --cream:#FFF6E2; --ink:#3A2414; --ink-soft:#6B4A2E; --sea:#9ED8DB;
  --r:22px; --display:"Fredoka", "Nunito", system-ui, sans-serif; --body:"Nunito", system-ui, sans-serif;
  /* variant colours (mango skin) */
  --m1:#FFF0A0; --m2:#FFB627; --m3:#E0701B; --blush:#E2462B; --rim:#FFE9A8;
}
html[data-variant="kesar"]{ --m1:#F7F6A6; --m2:#D3C53A; --m3:#7F9A2C; --blush:#F59A1E; --rim:#F4F7B8; }
.s-m1{stop-color:var(--m1)} .s-m2{stop-color:var(--m2)} .s-m3{stop-color:var(--m3)} .s-blush{stop-color:var(--blush)}
.s-m1,.s-m2,.s-m3,.s-blush{transition:stop-color .7s ease}
.rim{fill:var(--rim); opacity:.75; transition:fill .7s ease}
.skin{fill:none; stroke:#B9B03A; stroke-width:5; stroke-linejoin:round}
.stamp{font:700 15px var(--display); fill:var(--terra-deep); letter-spacing:.06em}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font:400 1.06rem/1.6 var(--body); color:var(--ink); background:var(--cream); overflow-x:hidden}
img,svg{display:block}
h1,h2,h3{font-family:var(--display); line-height:1.05; margin:0 0 .5em; font-weight:600}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink); outline-offset:3px; border-radius:8px}
.skip{position:absolute; left:-999px; top:8px; background:#fff; padding:8px 14px; border-radius:10px; z-index:100}
.skip:focus{left:12px}
.wrap{width:min(1180px, 100% - 32px); margin:0 auto; position:relative; z-index:2}
.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,72px); align-items:center}
.display{font-size:clamp(2.1rem, 5.2vw, 4.2rem); letter-spacing:-.01em}
.kicker{font:600 .82rem/1.3 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:1rem}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem); max-width:34em}
.tiny{font-size:.9rem; color:var(--ink-soft); margin-top:1.4rem}
.fine{font-size:.92rem; opacity:.85; margin-top:1.4rem}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5em; font:600 1.02rem var(--display); text-decoration:none; color:var(--cream);
  background:var(--ink); padding:.85em 1.5em; border-radius:999px; box-shadow:0 6px 0 rgba(58,36,20,.25); transition:box-shadow .2s, background .2s; will-change:transform}
.btn:hover{background:var(--terra-deep)}
.btn:active{box-shadow:0 2px 0 rgba(58,36,20,.25)}
.btn-ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2.5px var(--ink)}
.btn-ghost:hover{background:rgba(58,36,20,.08)}
.btn-small{padding:.6em 1.15em; font-size:.95rem}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:1.6rem}

/* nav */
.nav{position:fixed; top:12px; left:50%; transform:translateX(-50%); width:min(1180px, 100% - 24px); z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 8px 8px 16px;
  background:rgba(255,246,226,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:999px; box-shadow:0 6px 24px rgba(90,52,27,.12)}
.logo{display:flex; align-items:center; gap:8px; text-decoration:none; font:700 1.25rem var(--display)}
.logo svg{width:32px; height:32px}
.nav nav{display:flex; gap:22px}
.nav nav a{text-decoration:none; font-weight:700; font-size:.95rem}
.nav nav a:hover{color:var(--terra)}

/* sections + torn paper */
.sec{scroll-margin-top:80px; position:relative; padding:clamp(96px,12vw,160px) 0 clamp(80px,10vw,140px)}
.tear{position:absolute; left:0; right:0; top:-38px; height:40px; z-index:3; pointer-events:none; color:var(--bg)}
.tear svg{width:100%; height:100%}
.tear-main{fill:currentColor}
.tear-fringe{fill:#FFFBF1; opacity:.9}
.sec::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.35; mix-blend-mode:multiply; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .4 0 0 0 0 .25 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.hero{--bg:#FFE08A; background:radial-gradient(120% 90% at 80% 10%, #FFF3C4 0%, #FFE08A 45%, #FFC94A 100%); min-height:100vh; display:flex; align-items:center; overflow:hidden; padding-top:120px}
.story{--bg:var(--leaf); background:var(--leaf); color:var(--cream)}
.story .kicker{color:#CFEBC0}
.how{--bg:var(--cream); background:var(--cream)}
.boxes{--bg:var(--terra); background:var(--terra); color:var(--cream)}
.boxes .kicker{color:#FFD9C4}
.areas{--bg:#FFD66B; background:#FFD66B}
.foot{--bg:var(--leaf-deep); background:var(--leaf-deep); color:var(--cream); padding-bottom:90px}

/* hero */
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:center}
.hero h1{font-size:clamp(2.5rem, 6.4vw, 5.4rem); font-weight:700}
.hero h1 .ch{display:inline-block; will-change:transform}
.sun{position:absolute; width:46vmax; height:46vmax; right:-12vmax; top:-16vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.75) 0%, rgba(255,240,170,.5) 40%, rgba(255,214,100,0) 70%); z-index:0}
.cloud{position:absolute; height:46px; border-radius:40px; background:#FFF8E6; z-index:1; opacity:.9; box-shadow:inset 0 -8px 0 rgba(255,214,140,.5)}
.cloud::before,.cloud::after{content:""; position:absolute; background:inherit; border-radius:50%}
.cloud::before{width:56px; height:56px; left:22px; top:-28px}
.cloud::after{width:40px; height:40px; left:66px; top:-18px}
.c1{width:150px; left:6%; top:18%; animation:drift 38s linear infinite alternate}
.c2{width:120px; right:30%; top:9%; transform:scale(.8); animation:drift 46s linear infinite alternate-reverse}
@keyframes drift{to{translate:90px 0}}
.hero-art{position:relative; justify-self:center; width:min(40vw, 470px)}
.branch{position:absolute; left:-25%; width:150%; top:0; height:auto; z-index:2; pointer-events:none; overflow:visible}
.branch .leaves path{transform-box:fill-box; transform-origin:0% 50%; animation:rustle 5s ease-in-out infinite alternate}
.branch .leaves path:nth-child(2n){animation-duration:6.5s; animation-delay:-2s}
@keyframes rustle{to{transform:rotate(5deg)}}

/* docks: places the mango lands */
.dock{position:relative; aspect-ratio:1; width:100%}
.dock-side{width:min(36vw, 400px); justify-self:center}
.dock-crate{width:min(38vw, 440px); margin:0 auto}
.dock-foot{width:min(22vw, 220px)}
.dock .static{width:100%; height:100%; overflow:visible}
html.fly .dock .static{visibility:hidden}

/* the travelling object */
#obj{position:relative; width:100%; height:100%; pointer-events:none}
#obj .intro{position:absolute; inset:0}
#obj svg{width:100%; height:100%; overflow:visible}
#obj.flying{position:fixed; left:0; top:0; width:400px; height:400px; z-index:30; transform-origin:0 0; will-change:transform}
.bubble{position:absolute; left:62%; top:2%; margin:0; font:600 26px/1 var(--display); color:var(--ink); background:#fff; padding:14px 20px;
  border-radius:24px; box-shadow:0 8px 0 rgba(58,36,20,.12), 0 14px 30px rgba(90,52,27,.18); white-space:nowrap; transform-origin:10% 100%}
.bubble::after{content:""; position:absolute; left:18px; bottom:-14px; border:10px solid transparent; border-top:16px solid #fff; border-bottom:0; transform:skewX(18deg)}

/* story */
.stats{list-style:none; padding:0; margin:1.6rem 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.stats li{background:rgba(255,246,226,.1); border-radius:18px; padding:14px; box-shadow:inset 0 0 0 1.5px rgba(255,246,226,.25)}
.stats b{display:block; font:700 clamp(1.6rem,3vw,2.3rem)/1 var(--display); color:var(--sun)}
.stats span{font-size:.88rem}
.leaf-float{position:absolute; width:54px; z-index:1; opacity:.55; animation:floaty 9s ease-in-out infinite alternate}
.lf1{left:6%; bottom:12%} .lf2{right:8%; top:18%; animation-delay:-4s; width:40px}
@keyframes floaty{to{transform:translate(30px,-40px) rotate(40deg)}}

/* how */
.how-grid{margin-top:1rem}
.steps{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.steps li{display:flex; gap:16px; align-items:flex-start; background:#fff; border-radius:var(--r); padding:16px 18px;
  box-shadow:0 6px 0 rgba(200,140,60,.18), 0 12px 26px rgba(90,52,27,.08)}
.steps h3{font-size:1.25rem; margin:0 0 .2em}
.steps p{margin:0; color:var(--ink-soft)}
.num{flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font:700 1.2rem var(--display); color:var(--ink);
  background:radial-gradient(circle at 35% 30%, #FFF0A0, #FFB627 60%, #E0701B)}

/* boxes */
.boxes-grid{display:grid; grid-template-columns:.9fr 1.1fr; grid-template-areas:"dock head" "dock cards"; gap:22px clamp(24px,5vw,72px); align-items:start}
.box-head{grid-area:head}
.box-dock{grid-area:dock; align-self:start; padding-top:clamp(0px,4vw,48px)}
.boxes-grid .cards{grid-area:cards}
.switch{position:relative; display:inline-grid; grid-template-columns:1fr 1fr; background:var(--terra-deep); border-radius:999px; padding:6px; margin-top:4px;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.25)}
.switch button{position:relative; z-index:1; border:0; background:none; color:var(--cream); font:600 1.05rem var(--display); padding:.65em 1.5em; border-radius:999px; cursor:pointer; transition:color .3s}
.switch button[aria-pressed="true"]{color:var(--ink)}
.switch .knob{position:absolute; top:6px; bottom:6px; left:6px; width:calc(50% - 6px); border-radius:999px;
  background:radial-gradient(circle at 35% 30%, #FFF6C8, var(--m2) 70%); box-shadow:0 4px 0 rgba(0,0,0,.18); transition:transform .45s cubic-bezier(.5,1.6,.4,1), background .7s}
html[data-variant="kesar"] .switch .knob{transform:translateX(100%)}
.note{max-width:30em; margin:12px 0 0; font-size:.95rem}
.cards{display:grid; gap:16px}
.card{position:relative; background:var(--cream); color:var(--ink); border-radius:var(--r); padding:22px 24px; transform-style:preserve-3d;
  box-shadow:0 8px 0 rgba(0,0,0,.15), 0 18px 34px rgba(60,20,10,.25); transition:transform .25s ease-out}
.card h3{font-size:1.5rem; margin-bottom:.25em}
.card p{margin-bottom:.6em}
.card.hot{background:#FFF1C9}
.tag{position:absolute; right:18px; top:-12px; background:var(--leaf); color:var(--cream); font:600 .8rem var(--display); padding:5px 12px; border-radius:999px}
.price{font:700 1.9rem var(--display); margin:.2em 0 .6em}
.price small{font:600 .95rem var(--body); opacity:.7}

/* areas */
.zones{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:1rem}
.zones div{background:rgba(255,255,255,.55); border-radius:18px; padding:16px}
.zones h3{font-size:1.4rem; margin-bottom:.2em; color:var(--terra-deep)}
.zones p{margin:0}
.map{position:relative; aspect-ratio:4/5; width:min(100%, 440px); justify-self:center; background:#F8E2A4; border-radius:28px; overflow:visible;
  box-shadow:inset 0 0 0 3px rgba(58,36,20,.1), 0 16px 34px rgba(90,52,27,.18)}
.map > svg{position:absolute; inset:0; width:100%; height:100%; border-radius:28px; overflow:hidden}
.sea{fill:var(--sea)}
.routes path{fill:none; stroke:var(--terra); stroke-width:.7; stroke-linecap:round}
.pin{position:absolute; transform:translate(-50%,-50%); border:0; background:none; padding:0; cursor:pointer; font:inherit; color:var(--ink)}
.pin::before{content:""; display:block; width:14px; height:14px; margin:0 auto; border-radius:50%; background:var(--terra); box-shadow:0 0 0 4px rgba(178,71,47,.25); animation:pulse 2.4s ease-out infinite}
.pin.home::before{background:var(--leaf); box-shadow:0 0 0 5px rgba(47,122,68,.3)}
.pin span{display:block; font:600 .85rem var(--display); white-space:nowrap; margin-top:2px}
.pin em{position:absolute; left:50%; bottom:100%; transform:translate(-50%,4px); font:700 .78rem var(--body); font-style:normal; background:var(--ink); color:var(--cream);
  padding:3px 8px; border-radius:8px; opacity:0; transition:.25s; white-space:nowrap; margin-bottom:6px}
.pin:hover em,.pin:focus-visible em{opacity:1; transform:translate(-50%,0)}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(178,71,47,0)}}

/* footer */
.foot-grid{display:grid; grid-template-columns:auto 1.4fr 1fr; gap:clamp(20px,4vw,56px); align-items:center}
.foot .display{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.foot .btn{background:var(--sun); color:var(--ink)}
.foot .btn:hover{background:#FFE07A}
.foot-meta{font-size:.95rem; opacity:.9}
.copy{text-align:center; font-size:.85rem; opacity:.7; margin:48px 0 0; position:relative; z-index:2}

.badge{position:fixed; left:12px; bottom:12px; z-index:70; font:700 .78rem var(--body); text-decoration:none; color:var(--cream);
  background:rgba(58,36,20,.88); padding:7px 12px; border-radius:999px}
.badge:hover{background:var(--terra-deep)}

/* responsive */
@media (max-width:860px){
  .nav nav{display:none}
  .two,.hero-grid,.foot-grid{grid-template-columns:1fr}
  .boxes-grid{grid-template-columns:1fr; grid-template-areas:"head" "dock" "cards"}
  .box-dock{padding-top:0}
  .hero{min-height:auto; padding-top:110px}
  .hero-art{width:min(74vw, 340px); margin-top:30px}
  .dock-side{width:min(64vw, 300px)}
  .story .two > .dock{order:-1}
  .dock-crate{width:min(70vw, 320px)}
  .dock-foot{width:150px}
  .stats{grid-template-columns:1fr 1fr 1fr; gap:8px}
  .stats li{padding:10px}
  .zones{grid-template-columns:1fr}
  .map{width:min(100%, 360px)}
  .bubble{font-size:30px}
}
@media (max-width:760px){
  .sec:not(.hero){padding:84px 0 72px}
  .dock-side{width:min(52vw, 220px)}
  .dock-crate{width:min(58vw, 240px)}
  .story .two, .how .two{gap:0}
  .story .dock-side{margin:-30px auto -20px}
  .bubble{left:auto; right:-4px; top:-6%; font-size:20px; padding:10px 14px}
}
@media (max-width:420px){
  .stats span{font-size:.78rem}
  .switch button{padding:.6em 1.1em}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* photo thumbnails in the price cards */
.card.card-ph{padding-left:calc(16px + 132px + 20px)}
.card-ph .card-thumb{position:absolute;left:16px;top:16px;bottom:16px;width:132px;height:calc(100% - 32px);object-fit:cover;border-radius:calc(var(--r) - 8px);display:block}
@media (max-width:760px){
  .card.card-ph{padding-left:calc(14px + 92px + 16px)}
  .card-ph .card-thumb{left:14px;top:14px;bottom:14px;width:92px;height:calc(100% - 28px)}
}

/* ---------- photo journey: AI photo cut-outs (whole mango, halves, cubed cheeks, crate) replace the drawn mango once they load ---------- */
#obj image.ph,.dock .static image.ph{display:none}
.photo #obj image.ph,.photo .dock .static image.ph{display:inline}
.photo .dock .static use{display:none}
.photo #mWhole > :not(image),.photo #mHalves use,.photo #mHalves .cut,.photo #mSlices .slice,.photo #mCrate use{display:none}
.photo #obj image.ph-k,.photo .dock .static image.ph-k,.photo[data-variant="kesar"] #obj image.ph-a,.photo[data-variant="kesar"] .dock .static image.ph-a{display:none}
.photo[data-variant="kesar"] #obj image.ph-k,.photo[data-variant="kesar"] .dock .static image.ph-k{display:inline}
/* drawings -> photos: the hero branch and the floating leaves are AI photo cut-outs once photos load */
.branch image.ph,.leaf-float image.ph{display:none}
.photo .branch image.ph,.photo .leaf-float image.ph{display:inline}
.photo .branch > path,.photo .branch .leaves,.photo .leaf-float path{display:none}
.photo .leaf-float{opacity:.85}
/* phone journey (JS adds .mlane only under 760px): the mango is page content in a clipped full-page lane, landing only in the image bands */
.m-lane{position:absolute; left:0; top:0; width:100%; overflow:hidden; pointer-events:none; z-index:30}
.m-lane #obj.flying{position:absolute}