:root{--ocean:#0b3954;--lagoon:#e6f4f1;--reef:#12867a;--sun:#f59f00;--sunset:#e8590c;--white:#fff;--ink-soft:#3e5c6e;--display:"Bricolage Grotesque", system-ui, sans-serif;--body:"Atkinson Hyperlegible", system-ui, sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--lagoon);color:var(--ocean);font:18px/1.6 var(--body);margin:0}a{color:var(--sunset)}a:focus-visible,.button:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}img{display:block}.bar{justify-content:space-between;align-items:center;gap:16px;max-width:1180px;margin:0 auto;padding:18px 24px;display:flex}.brand{color:var(--ocean);font:800 26px/1 var(--display);letter-spacing:-.02em;align-items:center;gap:10px;text-decoration:none;display:flex}.bar nav{align-items:center;gap:22px;display:flex}.bar nav a{color:var(--ocean);font-size:16px;font-weight:700;text-decoration:none}.bar nav a:hover{color:var(--sunset)}.nav-cta{background:var(--ocean);border-radius:999px;padding:9px 16px;color:var(--white)!important}.nav-cta:hover{background:var(--sunset)}main{max-width:1180px;margin:0 auto;padding:0 24px}.hero{grid-template-columns:1fr 1.05fr;align-items:center;gap:40px;padding:40px 0 72px;display:grid}.hero h1{font:800 clamp(40px, 5.6vw, 72px)/1.02 var(--display);letter-spacing:-.035em;max-width:14ch;margin:0 0 22px}.lede{color:var(--ink-soft);max-width:34em;margin:0 0 16px;font-size:20px}.hero-note{color:var(--reef);margin:0;font-size:15px;font-weight:700}.route{background:var(--ocean);border-radius:28px;margin:0;padding:18px 18px 14px}.route svg{width:100%;height:auto;display:block;overflow:visible}.route figcaption{color:#9cc3cf;padding:4px 8px 2px;font-size:14px}.reef{fill:none;stroke:#1e5a78;stroke-width:26px;stroke-linecap:round}.road{fill:none;stroke:#6fa7ba;stroke-width:3px;stroke-dasharray:2 9;stroke-linecap:round}.trip{fill:none;stroke:var(--sun);stroke-width:5px;stroke-linecap:round;stroke-dasharray:520;stroke-dashoffset:520px;animation:4.5s cubic-bezier(.45,0,.25,1) .6s forwards draw}@keyframes draw{to{stroke-dashoffset:0}}.place circle{fill:#6fa7ba}.place text{fill:#9cc3cf;font:600 19px var(--display)}.water{fill:#2c6b88;font:600 italic 22px var(--display);letter-spacing:.02em}.pin circle{stroke:var(--ocean);stroke-width:4px}.pin.shop circle{fill:var(--white)}.pin.home circle{fill:var(--sun)}.pin text{fill:var(--white);font:700 21px var(--body)}.rider circle{fill:var(--sunset);stroke:var(--white);stroke-width:3px}.rider text{fill:var(--white);font:800 16px var(--display)}.how{padding:24px 0 72px}.how h2,.shops h2,.drive h2{font:800 clamp(30px, 3.4vw, 44px)/1.08 var(--display);letter-spacing:-.025em;margin:0 0 28px}.steps{counter-reset:s;border-top:3px solid var(--ocean);grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0;list-style:none;display:grid}.steps li{counter-increment:s;padding:20px 22px 8px 0;position:relative}.steps li:before{content:counter(s);font:800 44px/1 var(--display);color:var(--sun);margin-bottom:10px;display:block}.steps h3{font:800 21px/1.2 var(--display);margin:0 0 8px}.steps p{color:var(--ink-soft);margin:0;font-size:17px}.aside{border-left:4px solid var(--reef);color:var(--ocean);max-width:46em;margin:28px 0 0;padding-left:16px}.drive{background:var(--ocean);color:var(--white);border-radius:32px;grid-template-columns:1fr 1.2fr;align-items:center;gap:48px;margin-bottom:72px;padding:56px;display:grid}.drive-figure{flex-direction:column;display:flex}.pct{font:800 clamp(96px, 14vw, 180px)/.85 var(--display);letter-spacing:-.05em;color:var(--sun)}.pct-label{font:700 22px/1.3 var(--display);max-width:12em;margin-top:14px}.drive p{color:#cfe3ea;max-width:34em}.drive .small{color:#9cc3cf;margin-top:18px;font-size:14px}.button{background:var(--sun);color:var(--ocean);font:800 18px var(--display);border-radius:999px;margin-top:8px;padding:14px 26px;text-decoration:none;display:inline-block}.button:hover{background:var(--white)}.shops{max-width:46em;padding:0 0 72px}.shops p{color:var(--ink-soft);font-size:19px}.foot{max-width:1180px;color:var(--ink-soft);border-top:1px solid #bfdcd6;align-items:center;gap:14px;margin:0 auto;padding:28px 24px 40px;font-size:15px;display:flex}.foot p{margin:0}@media (width<=900px){.hero{grid-template-columns:1fr;padding-top:16px}.steps{grid-template-columns:1fr 1fr}.drive{grid-template-columns:1fr;gap:24px;padding:36px 26px}}@media (width<=560px){body{font-size:17px}.bar nav a:not(.nav-cta){display:none}.steps{grid-template-columns:1fr}.steps li{padding-right:0}}@media (prefers-reduced-motion:reduce){.trip{stroke-dashoffset:0;animation:none}.rider{display:none}}