@font-face{font-family:Fredoka;src:url(fonts/fredoka.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fonts/dmsans.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{--bg:#FBF4E8;--card:#FFFFFF;--pink:#E8006F;--pinkt:#B8005A;--lime:#B8F000;--green:#3B6600;--ink:#1B1622;--cream:#1B1622;--paper:#FFFFFF;--smoke:#5E5868;--line:#E6D9C5;--ease:cubic-bezier(.34,1.56,.64,1)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--cream);font:400 1.06rem/1.65 "DM Sans",system-ui,sans-serif;overflow-x:hidden}
a{color:var(--pinkt)}a:hover{color:var(--pink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
img,svg{max-width:100%}
.wrap{width:min(1180px,92vw);margin:0 auto}.narrow{max-width:760px}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--lime);color:#000;padding:.5rem 1rem}.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.035;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 baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.leash{position:fixed;left:10px;top:0;bottom:0;width:3px;z-index:40;pointer-events:none;background:#1b162212}
.leash span{display:block;height:100%;background:var(--pink);box-shadow:0 0 10px var(--pink);transform-origin:top;transform:scaleY(0)}
.h-xl,.h-lg,.h-md,.walk-h{font-family:Fredoka,ui-rounded,system-ui,sans-serif;font-weight:700;line-height:1.08;letter-spacing:-.01em;margin:.2em 0 .4em}
.h-xl{font-size:clamp(2.5rem,6.4vw,5.4rem)}.h-lg{font-size:clamp(2rem,4.2vw,3.4rem)}.h-md{font-size:1.6rem;margin-top:2rem}
.h-sm{font:700 .85rem "DM Sans";text-transform:uppercase;letter-spacing:.12em;color:var(--pinkt);margin:0 0 .6rem}
.kicker{font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;color:var(--pinkt);margin:0}
.lede{font-size:1.18rem;max-width:40em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1.5rem;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;transition:transform .25s var(--ease),box-shadow .25s;cursor:pointer;font-size:1rem;font-family:inherit}
.btn:hover{transform:translateY(-3px) rotate(-1deg)}
.btn-pink{background:var(--pinkt);color:#fff;box-shadow:0 0 0 0 var(--pink),0 8px 30px #ff2e8855}.btn-pink:hover{color:#fff;box-shadow:0 0 24px var(--pink)}
.btn-ghost{border-color:var(--cream);color:var(--cream)}.btn-ghost:hover{border-color:var(--pinkt);color:var(--pinkt)}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.paw{width:1em;height:1em;fill:currentColor;flex:none}
.stk{display:inline-block;background:var(--paper);color:var(--ink);font:700 .9rem/1 "DM Sans";text-transform:uppercase;letter-spacing:.06em;padding:.55rem .8rem;border-radius:10px;box-shadow:4px 4px 0 var(--ink),0 0 0 2px var(--ink);transform:rotate(var(--r,0deg));text-decoration:none}
a.stk:hover{color:#000;background:var(--lime)}
/* header */
.hdr{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;padding:.7rem 4vw;background:#FBF4E8e6;backdrop-filter:blur(8px);border-bottom:1px solid #1b162214}
.logo{display:flex;align-items:center;gap:.45rem;font-family:Fredoka,ui-rounded,system-ui,sans-serif;font-size:1.35rem;font-weight:700;color:var(--cream);text-decoration:none;margin:0}
.logo .paw{color:var(--pink);filter:drop-shadow(0 0 6px var(--pink))}.logo b{font-weight:700;color:var(--pinkt)}
.hdr nav{margin-left:auto}.hdr ul{display:flex;gap:1.1rem;list-style:none;margin:0;padding:0}
.hdr nav a{color:var(--cream);text-decoration:none;font-weight:700;font-size:.95rem}.hdr nav a:hover,.hdr nav a[aria-current]{color:var(--pinkt)}
.hdr-call{min-height:42px;padding:.5rem 1.1rem}
@media(max-width:1020px){.hdr nav{display:none}.hdr-call{margin-left:auto}}
@media(max-width:560px){.hdr-call{display:none}}
/* hero */
.hero{position:relative;padding:clamp(2rem,6vw,5rem) 0 4rem;overflow:hidden}
.hero:before{content:"";position:absolute;inset:auto -10% -40% 30%;height:80%;background:radial-gradient(closest-side,#ff2e8822,transparent);pointer-events:none}
.hero-grid,.ihero-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:2rem;align-items:center}
.hero h1{text-shadow:3px 3px 0 #ff2e8826}
.hero-art{position:relative}.hero-pup{width:100%;filter:drop-shadow(0 10px 24px #e8006f33)}
.hero-stk{position:absolute;top:8%;left:0}.hero-stk2{position:absolute;bottom:12%;right:4%;background:var(--lime)}
.hp-head{transform-origin:150px 180px;animation:tilt 4s ease-in-out infinite}.hp-tongue{animation:pant .5s ease-in-out infinite alternate;transform-origin:150px 168px}
.ear-l{transform-origin:92px 94px;animation:earL 4s ease-in-out infinite}.ear-r{transform-origin:208px 94px;animation:earR 4s ease-in-out infinite}
.eyes{animation:blink 5s infinite;transform-origin:150px 124px}
@keyframes tilt{0%,100%{transform:rotate(0)}40%{transform:rotate(-7deg)}60%{transform:rotate(-7deg)}}
@keyframes pant{to{transform:scaleY(1.25)}}@keyframes earL{40%,60%{transform:rotate(10deg)}}@keyframes earR{40%,60%{transform:rotate(-6deg)}}
@keyframes blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
.scroll-hint{display:inline-flex;gap:.4rem;align-items:center;margin:2.5rem 0 0 4vw;color:var(--smoke);text-decoration:none;font-weight:700;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
@media(max-width:820px){.hero-grid,.ihero-grid{grid-template-columns:1fr}.hero-art{max-width:300px;margin:0 auto;order:-1}.ihero-art{max-width:360px}}
/* the walk */
.walk{position:relative;z-index:2;background:radial-gradient(ellipse at 50% 60%,#FFE3EE,var(--bg) 70%)}
.walk-pin{position:relative;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding:4.6rem 0 1.25rem;overflow:hidden;background:inherit}
@media(max-width:820px){.walk-pin{padding:4.2rem 0 5.5rem}}
.walk-copy{position:relative;z-index:3}.walk-h{font-size:clamp(1.6rem,3vw,2.6rem);margin:.1em 0 .2em}
.caps{list-style:none;padding:0;margin:0 0 .6rem;font:700 clamp(1rem,1.8vw,1.35rem)/1.3 "DM Sans";color:var(--cream)}
.cap{overflow:hidden}.cap.c3{color:var(--green)}
.stage{position:relative;flex:0 0 auto;width:min(1100px,96vw,calc((100vh - 380px)*1.43));width:min(1100px,96vw,calc((100svh - 380px)*1.43));margin:0 auto;overflow:hidden;border-radius:18px}
@media(max-width:820px){.stage{width:min(96vw,calc((100svh - 430px)*1.43))}}
.sky{position:absolute;left:-10%;width:120%;top:0;height:45%;fill:#EADCC6;opacity:1}
.cam{position:relative;aspect-ratio:10/7;transform-origin:0 0;will-change:transform}
.map{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map .grid line{stroke:#E2D3BC;stroke-width:2}.map .blocks rect{fill:#F1E5D2;stroke:#E4D4BB}
.route,.route-glow{fill:none;stroke:var(--pink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.route-glow{stroke-width:16;opacity:.28}
.park .ring{fill:none;stroke:var(--green);stroke-width:4;opacity:.7}
.door-glow{opacity:.8}
.heart{opacity:0}
.stop{position:absolute;translate:-50% -175%;transform:rotate(var(--r));white-space:nowrap;font-size:clamp(.45rem,1.3vw,.95rem);padding:.45em .65em;z-index:2}
.walk-end{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1rem;padding-bottom:.4rem;position:relative;z-index:3;flex:0 0 auto}
.pup-body .legs rect{transform-box:fill-box;transform-origin:50% 0}
.trot .l1,.trot .l3{animation:leg .28s ease-in-out infinite alternate}.trot .l2,.trot .l4{animation:leg .28s ease-in-out infinite alternate-reverse}
.trot .tail{animation:wag .18s ease-in-out infinite alternate}
.tail{transform-box:fill-box;transform-origin:100% 100%}
@keyframes leg{from{transform:rotate(28deg)}to{transform:rotate(-28deg)}}@keyframes wag{from{transform:rotate(-20deg)}to{transform:rotate(25deg)}}
.wiggle .pup-body{animation:wig .3s ease-in-out infinite alternate}.wiggle .tail{animation:wag .1s infinite alternate}
@keyframes wig{from{transform:rotate(-8deg) translateY(-3px)}to{transform:rotate(8deg)}}
.js .walk .cap{clip-path:inset(0 0 100% 0)}
/* sections */
.sec{padding:clamp(3.5rem,8vw,6.5rem) 0}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.6rem;margin-top:2rem}
.stk-card{display:block;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:1.6rem;color:var(--cream);text-decoration:none;transform:rotate(var(--r));transition:transform .3s var(--ease),border-color .3s}
.stk-card:hover{transform:rotate(0) translateY(-6px);border-color:var(--pink);color:var(--cream)}
.stk-card .stk{margin-bottom:1rem;transform:rotate(calc(var(--r) * -2))}.stk-card .more{color:var(--pinkt);font-weight:700}
.strip{overflow:hidden;margin-top:2rem}.strip-track{display:flex;gap:1.4rem;padding:1rem 4vw;width:max-content}
.card-ph{margin:0;width:min(300px,70vw);position:relative}.card-ph svg{display:block;border-radius:18px;border:2px solid var(--line)}
.card-ph figcaption{position:absolute;bottom:-12px;left:14px}
.card-ph .tail{animation:wag .4s ease-in-out infinite alternate}
.steps{list-style:none;padding:0 0 0 2.2rem;margin:2rem 0 0;display:grid;gap:1.6rem;border-left:3px dashed #e8006f88;counter-reset:s}
.step{position:relative;transition:opacity .4s}.step h3{font:700 1.3rem "DM Sans";margin:.1rem 0}.step p{margin:0;color:#3E3846}
.step .num{position:absolute;left:-3.25rem;top:0;width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--card);border:2px solid var(--pinkt);color:var(--ink);transition:all .4s var(--ease)}
.step.lit .num{background:var(--lime);border-color:var(--lime);color:#000;box-shadow:0 0 0 3px var(--ink);transform:scale(1.12)}
.hoods{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:2rem}.hood{display:inline-flex;gap:.5rem;align-items:center;font-size:1.05rem;padding:.9rem 1.2rem}.hood .paw{color:var(--pink)}
.price-tease{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2rem;background:var(--card);border-radius:24px;padding:2.5rem;border:2px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;font:700 1.15rem "DM Sans";padding:1.1rem 2rem 1.1rem 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";position:absolute;right:.3rem;color:var(--pink);font-size:1.6rem;line-height:1;transition:transform .3s var(--ease)}
.faq[open] summary:after{transform:rotate(45deg)}.faq div{padding:0 0 1rem}.faq[open] div{animation:spring .4s var(--ease)}
@keyframes spring{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.band{background:linear-gradient(135deg,#FFE6EF,#F3F9DC);border-top:2px solid #e8006f33}
.band-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:2.5rem}.band-cta{text-align:center}.band-cta .cta-row{justify-content:center}
@media(max-width:820px){.band-grid{grid-template-columns:1fr}}
.book{display:grid;gap:1rem;background:var(--card);padding:1.6rem;border-radius:20px;border:2px solid var(--line)}
.book label{display:grid;gap:.3rem;font-weight:700;font-size:.95rem}
.book input,.book select,.book textarea{font:inherit;color:var(--cream);background:#FFFDF9;border:2px solid #CBBBA3;border-radius:12px;padding:.7rem .8rem;min-height:48px}
.book input:focus,.book select:focus,.book textarea:focus{border-color:var(--pink);outline:none}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:560px){.f2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px}.form-msg{margin:0;font-weight:700}
.ihero{padding:clamp(2rem,6vw,4.5rem) 0 1rem}.ihero-art{position:relative;text-align:center}
.big-stk{font-size:clamp(1.3rem,3vw,2rem);padding:1rem 1.4rem}.side-pup{width:220px;display:block;margin:1.5rem auto 0}
.side-pup .legs rect{animation:leg .35s ease-in-out infinite alternate}.side-pup .l2,.side-pup .l4{animation-direction:alternate-reverse!important}.side-pup .tail{animation:wag .25s infinite alternate}
.mini{width:100%;border-radius:20px;background:#F6ECDD;border:2px solid var(--line)}.mini .grid line{stroke:#E2D3BC;stroke-width:3}.mini-r{stroke-width:8}
.pulse{animation:pls 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}@keyframes pls{from{transform:scale(.5);opacity:1}to{transform:scale(1.6);opacity:0}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:3rem}@media(max-width:820px){.two{grid-template-columns:1fr}}
.pawlist{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}.pawlist li{display:flex;gap:.7rem;align-items:flex-start}.pawlist .paw{color:var(--pink);margin-top:.35em;filter:drop-shadow(0 0 4px var(--pink))}
.steps-v{margin-top:1rem}.small{color:var(--smoke);font-size:.9rem}.near{margin-top:2rem}
.inline{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;list-style:none;padding:0}
.ftr{border-top:2px solid var(--line);padding:3.5rem 0 6rem;margin-top:0}.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}.ftr a{color:var(--cream)}.ftr a:hover{color:var(--pinkt)}
.ftr-legal{display:flex;justify-content:space-between;flex-wrap:wrap;color:var(--smoke);margin-top:2rem;font-size:.9rem}.ftr-legal a{color:var(--smoke)}
@media(max-width:820px){.ftr-grid{grid-template-columns:1fr 1fr}}
.mob-cta{display:none}
@media(max-width:820px){.mob-cta{display:flex;gap:.6rem;position:fixed;right:14px;bottom:14px;z-index:45}
.pill{min-height:52px;min-width:84px;display:grid;place-items:center;border-radius:999px;font-weight:700;text-decoration:none;color:#000;box-shadow:3px 3px 0 #000}
.pill-pink{background:var(--pinkt);color:#fff!important;box-shadow:0 0 18px #ff2e8888,3px 3px 0 #000}.pill-lime{background:var(--lime)}.pill:hover{color:#000}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* South OC coastal motifs */
.hero,.ihero{position:relative;overflow:hidden}
.palm-shadow{position:absolute;inset:-10% -5% auto auto;width:min(620px,70vw);aspect-ratio:1;pointer-events:none;opacity:.06;filter:blur(6px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-120 -120 240 240'%3E%3Cg fill='none' stroke='%231B1622' stroke-width='14' stroke-linecap='round'%3E%3Cpath d='M0 0 q-40 -10 -100 20'/%3E%3Cpath d='M0 0 q-30 30 -70 80'/%3E%3Cpath d='M0 0 q40 -10 100 20'/%3E%3Cpath d='M0 0 q30 30 70 80'/%3E%3Cpath d='M0 0 q-10 -50 -30 -100'/%3E%3Cpath d='M0 0 q20 -50 40 -100'/%3E%3Cpath d='M0 0 q6 60 -6 120' stroke-width='18'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(0,0) rotate(-4deg)}to{transform:translate(-30px,20px) rotate(5deg)}}
.wave{line-height:0;margin-bottom:-1px;overflow:hidden}.wave svg{width:110%;height:46px;display:block}
.wave .w1{fill:#F3E6D2;animation:sway 9s ease-in-out infinite alternate}.wave .w2{fill:#FFE3EE;animation:sway 7s ease-in-out infinite alternate-reverse}
@keyframes sway{to{transform:translateX(-5%)}}
.wave+.band,.wave+.ftr{border-top:0}.wave+.ftr{background:#FFE3EE}
.map .ocean,.mini .ocean{fill:#CFE9E6}.map .wv,.mini .wv{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;opacity:.9}
.palm .trunk{fill:none;stroke:#8A6A4A;stroke-width:9;stroke-linecap:round}.palm .fronds path{fill:none;stroke:#3B6600;stroke-width:8;stroke-linecap:round}
.sky-palm .trunk,.sky-palm .fronds path{stroke:#1B1622;opacity:.75}
.sky{fill:none}.sun{filter:drop-shadow(0 0 18px #FFB36B)}
.map .waves{animation:sway 6s ease-in-out infinite alternate}
.inline-p a{margin-right:.2rem}
/* channel run */
.run{background:radial-gradient(ellipse at 50% 60%,#DDF4F1,var(--bg) 70%)}
.run .cam{overflow:hidden;border-radius:18px;box-shadow:0 0 0 2px var(--ink),6px 6px 0 var(--ink);background:#FBF4E8}
.scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene .bank{fill:#EAD6B2;stroke:#9A8C78;stroke-width:3;stroke-dasharray:6 5}
.scene .gl{stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:.55}
.scene .glints{animation:sway 5s ease-in-out infinite alternate}
.scene .wk{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-dasharray:26 16;animation:wk .9s linear infinite;opacity:.9}
.scene .w3,.scene .w4{stroke-width:4;opacity:.7}
.scene .foam{fill:#fff;opacity:.8}
.scene .hull{animation:bob 2.6s ease-in-out infinite alternate}
@keyframes wk{to{stroke-dashoffset:-42}}
@keyframes bob{from{transform:translateY(0) rotate(-.6deg)}to{transform:translateY(-4px) rotate(.6deg)}}
.mm{position:absolute;right:2%;top:3%;width:clamp(90px,20%,200px);height:auto;filter:drop-shadow(3px 3px 0 #1B1622);z-index:2}
.run .stop{translate:0 0;font-size:clamp(.5rem,1.3vw,.9rem)}
.hero-boat{max-width:420px;margin:auto;display:block}
.bridge-art{background:var(--card);border-radius:18px;padding:1rem;box-shadow:0 0 0 2px var(--ink),6px 6px 0 var(--ink)}
.bridge-art .mini{width:100%;height:auto;display:block}
html:not(.js) .run .stop,.no-motion .run .stop{opacity:1}