/* Milk Run · concept by Brand Evolution */
:root{
  --cream:#FFF8E7; --milkbg:#FFFDF6; --sky:#8FD3F4; --sky-soft:#CDEFFF; --sky-deep:#1E6FA8; --grass:#5DB560; --grass-deep:#2F7D3B;
  --ink:#1F3347; --ink-soft:#4A6178; --sun:#FFD25E;
  --r:24px; --display:"Baloo 2", system-ui, sans-serif; --body:"Mulish", system-ui, sans-serif;
  --milk:#FFF3D3; --milk-top:#FFFCF2; --cap1:#8FD0F6; --cap2:#2F7FC4;
}
html[data-variant="buffalo"]{ --milk:#FFFFFF; --milk-top:#EEF7FF; --cap1:#9FDB8E; --cap2:#2E7D32; }
.milk{fill:var(--milk); transition:fill .7s ease}
.milk-top{fill:var(--milk-top); transition:fill .7s ease}
.s-cap1{stop-color:var(--cap1); transition:stop-color .7s} .s-cap2{stop-color:var(--cap2); transition:stop-color .7s}
.stream-edge{fill:none; stroke:#D9C9A0; stroke-opacity:.55; stroke-width:17; stroke-linecap:round}
.stream{fill:none; stroke:var(--milk); stroke-width:13; stroke-linecap:round; transition:stroke .7s}
.stream-hi{fill:none; stroke:#fff; stroke-width:3.5; stroke-linecap:round; opacity:.9; transform:translateX(-3px)}
.splash circle{fill:var(--milk); stroke:#fff; stroke-width:1.5}
.lbl{fill:#fff; opacity:.93}
.lbl-t1{font:700 22px var(--display); fill:var(--sky-deep)}
.lbl-t2{font:800 11px var(--body); letter-spacing:.12em; fill:var(--cap2); transition:fill .7s}
.c-k{font:800 13px var(--body); letter-spacing:.16em; fill:var(--sky-deep)}
.c-name{font:700 30px var(--display); fill:var(--ink)}
.c-var{font:600 14px var(--body); fill:#2C4A63}
.c-price{font:800 50px var(--display); fill:var(--ink)}
.c-pill{font:800 14px var(--body); fill:#fff}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font:400 1.05rem/1.62 var(--body); color:var(--ink); background:var(--cream); overflow-x:hidden}
svg{display:block}
h1,h2,h3{font-family:var(--display); line-height:1.02; margin:0 0 .45em; font-weight:700}
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.2rem, 5.4vw, 4.4rem); letter-spacing:-.01em}
.kicker{font:800 .8rem/1.3 var(--body); letter-spacing:.15em; text-transform:uppercase; color:var(--sky-deep); margin-bottom:1rem}
.lead{font-size:clamp(1.05rem,1.6vw,1.24rem); max-width:33em}
.tiny{font-size:.9rem; color:var(--ink-soft); margin-top:1.4rem}
.fine{font-size:.92rem; opacity:.85; margin-top:1.2rem}

.btn{display:inline-flex; align-items:center; font:700 1.05rem var(--display); text-decoration:none; color:#fff; background:var(--ink);
  padding:.7em 1.5em .6em; border-radius:999px; box-shadow:0 6px 0 rgba(31,51,71,.25); transition:background .2s, box-shadow .2s; will-change:transform}
.btn:hover{background:var(--sky-deep)}
.btn:active{box-shadow:0 2px 0 rgba(31,51,71,.25)}
.btn-ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2.5px var(--ink)}
.btn-ghost:hover{background:rgba(31,51,71,.08)}
.btn-small{padding:.5em 1.15em .42em; font-size:.98rem}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:1.6rem}

.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,253,246,.84); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:999px; box-shadow:0 6px 24px rgba(31,51,71,.12)}
.logo{display:flex; align-items:center; gap:8px; text-decoration:none; font:800 1.3rem var(--display)}
.logo svg{width:30px; height:30px}
.nav nav{display:flex; gap:22px}
.nav nav a{text-decoration:none; font-weight:700; font-size:.95rem}
.nav nav a:hover{color:var(--sky-deep)}

/* 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:#fff; opacity:.92}
.sec::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.3; 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 .3 0 0 0 0 .4 0 0 0 0 .5 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.hero{--bg:var(--sky-soft); background:linear-gradient(180deg, #E4F6FF 0%, #BFE8FB 60%, #A6DEF7 100%); min-height:100vh; display:flex; align-items:center; overflow:hidden; padding-top:120px; padding-bottom:150px}
.story{--bg:var(--grass-deep); background:var(--grass-deep); color:#FFFDF6}
.story .kicker{color:#CDEFBF}
.how{--bg:var(--cream); background:var(--cream)}
.areas{--bg:var(--milkbg); background:var(--milkbg)}
.plans{--bg:var(--sky-deep); background:var(--sky-deep); color:#fff}
.plans .kicker{color:#CDEFFF}
.foot{--bg:var(--ink); background:var(--ink); color:#FFFDF6; 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.6rem, 6.6vw, 5.6rem); font-weight:800}
.hero h1 .ch{display:inline-block; will-change:transform}
.cloud{position:absolute; height:46px; border-radius:40px; background:#fff; z-index:1; opacity:.95; box-shadow:inset 0 -8px 0 rgba(160,210,240,.45)}
.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:5%; top:16%; animation:drift 40s linear infinite alternate}
.c2{width:120px; right:26%; top:10%; animation:drift 48s linear infinite alternate-reverse}
.c3{width:100px; right:4%; top:44%; opacity:.7; animation:drift 36s linear infinite alternate}
@keyframes drift{to{translate:90px 0}}
.hill{position:absolute; left:0; right:0; bottom:0; width:100%; height:150px; z-index:1}
.hero-art{position:relative; justify-self:center; width:min(36vw, 420px); z-index:2}
.dock{position:relative; aspect-ratio:1; width:100%}
.dock-side{width:min(34vw, 380px); justify-self:center}
.dock-card{width:min(40vw, 460px); margin:0 auto}
.dock .static{width:100%; height:100%; overflow:visible}
html.fly .dock .static{visibility:hidden}

#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}

/* Clover the cow */
.cow{position:absolute; left:-30%; bottom:-14%; width:56%; border:0; padding:0; background:none; cursor:pointer; z-index:3; transform-origin:50% 100%}
.cow svg{width:100%; height:auto; overflow:visible; filter:drop-shadow(0 10px 14px rgba(31,51,71,.18))}
.cow .ear{transform-box:fill-box}
.cow .earL{transform-origin:100% 20%} .cow .earR{transform-origin:0% 20%}
.cow .eye{transform-box:fill-box; transform-origin:50% 50%}
.cow .bell{transform-box:fill-box; transform-origin:50% 0}
.cow .bubble{position:absolute; left:58%; top:-30%; font:800 clamp(20px,2.4vw,30px)/1 var(--display); color:var(--ink); background:#fff; padding:12px 18px 8px;
  border-radius:22px; white-space:nowrap; box-shadow:0 7px 0 rgba(31,51,71,.1), 0 14px 28px rgba(31,51,71,.16); transform-origin:0% 100%}
.cow .bubble::after{content:""; position:absolute; left:16px; 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,253,246,.1); border-radius:18px; padding:14px; box-shadow:inset 0 0 0 1.5px rgba(255,253,246,.25)}
.stats b{display:block; font:800 clamp(1.7rem,3vw,2.4rem)/1 var(--display); color:var(--sun)}
.stats span{font-size:.88rem}

/* how */
.how{overflow:visible}
.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(143,211,244,.35), 0 12px 26px rgba(31,51,71,.07)}
.steps h3{font-size:1.3rem; margin:0 0 .1em}
.steps p{margin:0; color:var(--ink-soft)}
.num{flex:none; min-width:58px; height:40px; padding:0 10px; border-radius:999px; display:grid; place-items:center; font:800 1rem var(--display); color:var(--ink);
  background:radial-gradient(circle at 35% 30%, #fff, var(--sky) 80%)}
.pool-clip{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; display:none}
html.fly .pool-clip{display:block}
.pool{position:absolute; left:0; right:0; bottom:0; height:34%; background:var(--milkbg)}
.pool svg{position:absolute; left:0; bottom:100%; width:200%; height:46px; margin-bottom:-1px; fill:var(--milkbg); animation:wave 7s linear infinite}
@keyframes wave{to{transform:translateX(-50%)}}

/* areas */
.chips{list-style:none; padding:0; margin:0 0 1.2rem; display:flex; flex-wrap:wrap; gap:8px}
.chips li{background:var(--sky-soft); border-radius:999px; padding:6px 14px; font-weight:700; font-size:.95rem; transition:transform .2s, background .2s}
.chips li:hover{transform:translateY(-3px) rotate(-2deg); background:var(--sky)}
.map{position:relative; aspect-ratio:1; width:min(100%, 440px); justify-self:center; background:#E4F3D2; border-radius:28px;
  box-shadow:inset 0 0 0 3px rgba(31,51,71,.08), 0 16px 34px rgba(31,51,71,.14)}
.map > svg{position:absolute; inset:0; width:100%; height:100%; border-radius:28px; overflow:hidden}
.lake{fill:#9ED6F2}
.river{fill:none; stroke:#9ED6F2; stroke-width:2.4; stroke-linecap:round}
.road{fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round}
.route{fill:none; stroke:var(--sky-deep); stroke-width:.9; stroke-linecap:round}
.pin{position:absolute; transform:translate(-50%,-7px); 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(--sky-deep); box-shadow:0 0 0 4px rgba(30,111,168,.22); animation:pulse 2.4s ease-out infinite}
.pin.home::before{background:var(--grass-deep); box-shadow:0 0 0 5px rgba(47,125,59,.3)}
.pin span{display:block; font:700 .82rem var(--display); white-space:nowrap; margin-top:2px}
.pin em{position:absolute; left:50%; bottom:100%; transform:translate(-50%,4px); font:800 .76rem var(--body); font-style:normal; background:var(--ink); color:#fff;
  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(30,111,168,0)}}

/* plans */
.plans-grid{display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"dock head" "dock cards"; gap:22px clamp(24px,5vw,72px); align-items:start}
.plans-head{grid-area:head}
.card-dock{grid-area:dock; align-self:start; padding-top:clamp(0px,3vw,36px)}
.plans-grid .cards{grid-area:cards}
.switch{position:relative; display:inline-grid; grid-template-columns:1fr 1fr; background:#15507D; 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:#fff; font:700 1.05rem var(--display); padding:.55em 1.4em .45em; 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%, #fff, var(--cap1) 85%);
  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="buffalo"] .switch .knob{transform:translateX(100%)}
.note{max-width:30em; margin:12px 0 0; font-size:.95rem}
.cards{display:grid; gap:14px}
.card{position:relative; display:block; width:100%; text-align:left; font:inherit; color:var(--ink); background:var(--cream); border:0; border-radius:var(--r); padding:20px 24px;
  cursor:pointer; box-shadow:0 8px 0 rgba(0,0,0,.14), 0 18px 34px rgba(10,30,50,.25); transition:transform .25s ease-out, background .25s}
.card > span{display:block}
.card .plan-name{font:700 1.5rem/1.1 var(--display); margin-bottom:.2em}
.card[aria-checked="true"]{background:#FFF2C2; box-shadow:0 0 0 4px var(--sun), 0 8px 0 rgba(0,0,0,.14), 0 18px 34px rgba(10,30,50,.25)}
.tag{position:absolute; right:18px; top:-12px; background:var(--grass-deep); color:#fff; font:700 .8rem var(--display); padding:4px 12px 2px; border-radius:999px}
.price{font:800 1.8rem var(--display); margin-top:.3em}
.price small{font:700 .95rem var(--body); opacity:.7}
.plans .fine{color:#fff}

/* footer */
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(20px,4vw,56px); align-items:center}
.foot .display{font-size:clamp(1.9rem,3.8vw,3rem)}
.foot .btn{background:var(--sun); color:var(--ink)}
.foot .btn:hover{background:#FFE48F}
.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:800 .78rem var(--body); text-decoration:none; color:#fff; background:rgba(31,51,71,.9); padding:7px 12px; border-radius:999px}
.badge:hover{background:var(--sky-deep)}

@media (max-width:860px){
  .nav nav{display:none}
  .two,.hero-grid,.foot-grid{grid-template-columns:1fr}
  .plans-grid{grid-template-columns:1fr; grid-template-areas:"head" "dock" "cards"}
  .card-dock{padding-top:0}
  .hero{min-height:auto; padding-top:110px}
  .hero-art{width:min(54vw, 260px); margin:24px 0 0 34%}
  .cow{left:-52%; width:62%}
  .dock-side{width:min(62vw, 290px)}
  .story .two > .dock{order:-1}
  .dock-card{width:min(86vw, 360px)}
  .stats{gap:8px} .stats li{padding:10px}
  .map{width:min(100%, 360px)}
}
@media (max-width:760px){
  .sec:not(.hero){padding:84px 0 72px}
  .dock-side{width:min(52vw, 220px)}
  .story .two, .how .two{gap:0}
  .story .dock-side{margin:-20px auto -10px}
}
@media (max-width:420px){ .stats span{font-size:.78rem} .switch button{padding:.5em 1em .4em} }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important; transition:none !important} }
.hero .kicker{color:#15507D}

/* photo thumbnails in the plan cards */
.card.card-ph{padding-left:calc(16px + 120px + 20px)}
.card-ph .card-thumb{position:absolute;left:14px;top:14px;bottom:14px;width:120px;height:calc(100% - 28px);object-fit:cover;border-radius:calc(var(--r) - 8px);display:block}
@media (max-width:760px){
  .card.card-ph{padding-left:calc(12px + 88px + 16px)}
  .card-ph .card-thumb{left:12px;top:12px;bottom:12px;width:88px;height:calc(100% - 24px)}
}
/* drawings -> photos: Clover is a real Gir cow photo once it loads (the drawn cow stays as fallback) */
.cow-ph{display:none}
.cow.ph-on svg{display:none}
.cow.ph-on .cow-ph{display:block;width:78%;margin:0 0 0 auto;height:auto;filter:drop-shadow(0 10px 14px rgba(31,51,71,.22))}
/* phone journey (JS adds .mlane only under 760px): the bottle 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}
html.mlane .story .dock-side{margin:-20px auto 28px}
html.mlane .how .dock-side{margin-top:84px}