@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;650;700;800&display=swap');
:root{--ink:#244d78;--muted:#4c6885;--blue:#386aab;--line:#bfd9ed;--paper:#f7fbff}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;color:var(--ink);background:#f4faff;font:16px/1.75 'DM Sans',sans-serif}a{color:inherit}button,input,textarea{font:inherit}.wrap{width:min(1180px,88%);margin:auto}header{display:flex;align-items:center;gap:30px;padding:18px 0}.corner-mascot{display:block;width:120px;margin-right:auto;line-height:0}.corner-mascot img{width:120px;height:90px;object-fit:contain}nav{display:flex;align-items:center;gap:30px}nav a{text-decoration:none;font-weight:600;font-size:14px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;border:2px solid var(--blue);background:var(--blue);color:#fff;text-decoration:none;border-radius:13px;padding:14px 22px;font:600 14px 'DM Sans',sans-serif;cursor:pointer;box-shadow:0 4px 0 #c3daf0}.button:hover{background:#2a5792}.button span{font-size:20px}.small{padding:12px 18px}h1,h2,h3{font-family:'Outfit',sans-serif;font-weight:600;line-height:1.1;letter-spacing:-1.5px}h1{font-size:clamp(45px,5.4vw,76px);margin:22px 0}h1>span{color:#7d6aaf}h2{font-size:clamp(32px,3.5vw,47px);margin:0 0 24px}h3{font-size:21px;letter-spacing:-.5px;margin:0 0 8px}p{margin:0 0 20px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;margin-bottom:20px}.company-name{font:600 clamp(22px,3vw,35px)/1.2 'Outfit',sans-serif;letter-spacing:-.6px;white-space:nowrap;margin-bottom:18px}.neighbourhood-intro{padding:42px 0 38px;position:relative}.neighbourhood-intro:before{content:'';position:absolute;width:150vw;height:760px;left:-50vw;bottom:0;background:radial-gradient(ellipse at 65% 20%,#d4eaff,transparent 65%);z-index:-1;pointer-events:none}.intro{color:var(--muted);max-width:720px;font-size:17px}.street-signpost{display:flex;align-items:stretch;gap:0;margin-top:36px;max-width:780px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.street-signpost a{flex:1;padding:17px 20px 17px 0;display:flex;justify-content:space-between;gap:12px}.street-signpost a+a{padding-left:20px;border-left:1px solid var(--line)}.street-signpost a span{font-size:11px;color:#6c7fa0}.street-signpost a:hover{color:#7d6aaf}.wander-note{font-size:12px;color:#6683a0;margin:16px 0 0}.neighbourhood{position:relative;isolation:isolate}.neighbourhood:before{content:'';position:absolute;top:50px;bottom:35px;left:50%;border-left:2px dashed #a8c9e6;z-index:-1}.street-stop{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;padding:75px 0;position:relative}.street-stop:before{content:'';position:absolute;left:calc(50% - 8px);top:50%;width:12px;height:12px;border:3px solid #86aed4;background:#f4faff;border-radius:50%}.shop-illustration{position:relative;text-align:center;padding:30px 10px 8px;isolation:isolate}.shop-illustration:before{content:'';position:absolute;inset:45px 0 18px;background:#e1effb;border-radius:46% 45% 35% 37%;z-index:-1}.shop-illustration svg{width:100%;height:auto;display:block}.shop-illustration p{font-size:12px;color:#6683a0;margin-top:3px}.address-label{font-size:10px;font-weight:700;letter-spacing:1.7px;background:white;border:1px solid var(--line);border-radius:30px;padding:8px 18px;display:inline-block;transform:rotate(-3deg)}.stop-story>p:not(.eyebrow){color:var(--muted);font-size:15px}.reverse .shop-illustration{grid-column:2;grid-row:1}.reverse .stop-story{grid-column:1;grid-row:1}.reverse .shop-illustration:before{background:#eae3f9}.studio-stop .shop-illustration:before{background:#def0f3}.feature-chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:23px 0}.feature-chips li{font-size:11px;border:1px solid #bcd2e8;background:#ffffffb3;border-radius:30px;padding:6px 12px}.stop-story details{border-top:1px solid var(--line);padding-top:15px;font-size:13px}.stop-story summary{cursor:pointer;font-weight:600}.stop-story details p{color:var(--muted);margin:13px 0 0}.street-aside{text-align:center;padding:30px 0;background:#f4faff}.street-aside span{font-size:12px;color:#6683a0}.street-aside p{font:500 28px 'Outfit',sans-serif;margin:8px 0 0;color:#7d6aaf}.text-link{display:inline-flex;gap:22px;font-size:14px;font-weight:700;text-decoration:none;border-bottom:1px solid #85aaca;padding-bottom:5px}.text-link:hover{color:#7d6aaf}.project-section{padding:75px 0;background:#e2edff;border-block:1px solid #cfdef3}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}.project-grid>div>p:not(.project-status){font-size:14px;color:var(--muted)}.project-status{display:inline-flex;align-items:center;gap:9px;font-size:10px;font-weight:700;letter-spacing:1.3px;background:#fff;border-radius:30px;padding:7px 13px;margin-bottom:22px}.project-status span{width:7px;height:7px;background:#8d79bd;border-radius:50%}.project-grid .small-note{font-size:11px!important;max-width:450px}.project-notebook{background:#fffdf7;border:1px solid #bbcce1;border-radius:12px;transform:rotate(2deg);box-shadow:8px 9px 0 #c9daf0;padding:23px 28px}.notebook-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;border-bottom:1px solid #d5ddea;padding-bottom:15px}.project-notebook ol{list-style:none;padding:0;margin:0}.project-notebook li{display:flex;gap:16px;padding:23px 0;border-bottom:1px solid #d5ddea}.project-notebook li:last-child{border:0;padding-bottom:8px}.project-notebook li>span{font:600 13px 'Outfit',sans-serif;color:#8d79bd;padding-top:5px}.project-notebook h3{font-size:20px}.project-notebook p{font-size:12px;color:var(--muted);margin:0}.possibilities{padding:85px 0}.possibilities-grid{display:grid;grid-template-columns:1fr 1fr;gap:85px}.possibilities-grid p{font-size:15px;color:var(--muted)}.how-section{padding:65px 0;background:#eae5f6}.how-section h2{font-size:35px}.how-list{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;padding:0;list-style:none;margin:35px 0 0}.how-list li{border-top:1px solid #bcafd6;padding-top:20px}.how-list li>span{font-size:12px;color:#7d6aaf;display:block;margin-bottom:18px}.how-list p{font-size:13px;color:var(--muted);margin:0}.contact-section{background:#d7ebfb;padding:85px 0;position:relative;overflow:hidden}.contact-section:before{content:'';position:absolute;width:220px;height:75px;border-radius:100px;background:#ffffffa0;right:12%;top:35px;box-shadow:-65px 25px 0 -10px #ffffffa0,65px 23px 0 -10px #ffffffa0;pointer-events:none}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:85px;position:relative;z-index:1;align-items:center}.contact-grid h2{font-size:58px}.contact-grid>div>p:not(.eyebrow){color:var(--muted);max-width:370px}.pink-text{color:#8d79bd}.contact-scribble{display:block;font:italic 25px Georgia,serif;transform:rotate(-5deg);margin-top:35px}form{background:white;border:1px solid #b9d5ed;border-radius:22px;box-shadow:7px 7px 0 #bdd8ee;padding:28px}label{display:block;font-size:12px;font-weight:700;margin-bottom:5px}label span{font-weight:400}input,textarea{width:100%;font-size:14px;color:var(--ink);padding:11px 12px;background:#f5faff;border:1px solid #bfd7ec;border-radius:8px;margin-bottom:14px}input::placeholder,textarea::placeholder{color:#607a94}textarea{resize:vertical}.form-note{font-size:11px;color:var(--muted);line-height:1.6}#form-status{font-size:13px;margin:18px 0 0}#form-status:empty{display:none}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 0}.footer-brand{font:700 18px 'Outfit',sans-serif;text-decoration:none;letter-spacing:-.5px}footer p,footer>span{font-size:11px;color:var(--muted);margin:0}a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #8d79bd;outline-offset:4px}
@media(max-width:950px){.street-stop{gap:55px}.project-grid,.possibilities-grid,.contact-grid{gap:45px}.street-signpost{width:100%}.stop-story h2{font-size:34px}nav{gap:18px}}
@media(max-width:650px){.wrap{width:88%}header{gap:12px;padding:12px 0}.corner-mascot,.corner-mascot img{width:88px}.corner-mascot img{height:68px}header nav{gap:12px}header nav>a:not(.button){display:none}.small{padding:10px 14px}.neighbourhood-intro{padding:28px 0 30px}.company-name{font-size:26px}.eyebrow{font-size:9px;letter-spacing:1.2px}h1{font-size:43px;letter-spacing:-1.7px}.intro{font-size:15px}.intro br{display:none}.street-signpost{flex-direction:column;gap:0;margin-top:26px}.street-signpost a{font-size:13px;padding:12px 0}.street-signpost a+a{padding:12px 0;border-left:0;border-top:1px solid var(--line)}.neighbourhood:before{left:7%;top:25px;bottom:20px}.street-stop{grid-template-columns:1fr;gap:22px;padding:38px 0 38px 22px}.street-stop:before{left:-1px;top:58px;width:9px;height:9px}.shop-illustration{max-width:440px;width:100%;margin:auto;padding-top:15px}.shop-illustration svg{max-height:310px}.reverse .shop-illustration,.reverse .stop-story{grid-column:auto;grid-row:auto}.stop-story h2{font-size:35px}.stop-story>p:not(.eyebrow){font-size:14px}.street-aside{padding:20px 0 15px 22px;text-align:left}.street-aside p{font-size:24px}.street-aside span{font-size:11px}.project-grid,.possibilities-grid,.contact-grid{grid-template-columns:1fr;gap:30px}.project-section{padding:50px 0}.project-notebook{transform:rotate(1deg);padding:20px}.possibilities{padding:55px 0}.possibilities h2{margin-bottom:0}.possibilities-grid{gap:20px}.how-section{padding:45px 0}.how-section h2{font-size:32px}.how-list{grid-template-columns:1fr;gap:25px}.how-list li>span{margin-bottom:12px}.contact-section{padding:55px 0}.contact-grid h2{font-size:47px}.contact-scribble{display:none}form{padding:22px}.contact-section:before{width:160px;height:55px;right:18%;top:35px}footer{flex-direction:column;align-items:flex-start;gap:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{overflow-x:clip}.neighbourhood-intro:before{width:100vw;left:calc((100% - 100vw)/2)}

/* Deliberately slow scroll entrances; content remains readable at rest. */
@media(prefers-reduced-motion:no-preference){
 .scroll-reveal{opacity:0;transform:translate3d(0,52px,0);transition:opacity 1.6s cubic-bezier(.22,.61,.36,1),transform 1.8s cubic-bezier(.16,1,.3,1)}
 .scroll-reveal.is-revealed{opacity:1;transform:translate3d(0,0,0)}
 .stop-story.scroll-reveal{transition-delay:140ms}
 .how-list li:nth-child(2).scroll-reveal{transition-delay:160ms}
 .how-list li:nth-child(3).scroll-reveal{transition-delay:320ms}
 .scroll-reveal.reveal-immediately{transition:none}
}
@media(prefers-reduced-motion:reduce){.scroll-reveal{opacity:1;transform:none;transition:none}}
@media print{.scroll-reveal{opacity:1!important;transform:none!important;transition:none!important}}
/* A fuller opening: introduction and an illustrated overview of the neighbourhood. */
.neighbourhood-intro{padding-top:32px;padding-bottom:24px}
.opening-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:35px;align-items:center}
.opening-copy{min-width:0}.opening-copy h1{font-size:clamp(42px,4.6vw,64px)}
.opening-copy .intro{font-size:16px;line-height:1.8;margin-bottom:16px}.opening-copy .intro br{display:none}
.opening-extra{font-size:14px;color:var(--muted);line-height:1.8;max-width:540px;margin-bottom:0}
.opening-neighbourhood{position:relative;min-width:0;text-align:center;padding-top:20px}
.opening-street{width:100%;height:auto;display:block;overflow:visible}
.opening-handnote{font:italic 18px/1.5 Georgia,serif;color:#6b77a2;margin:0 0 -20px;transform:rotate(-5deg)}
.opening-caption{font-size:10px;letter-spacing:.5px;color:#6683a0;margin:0}
.street-signpost{max-width:none;margin-top:36px;background:#ffffff70;border-radius:3px}
.street-signpost a{padding:18px 22px}.street-signpost a+a{padding-left:22px}
.opening-bottom{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-top:18px}.opening-bottom .wander-note{margin:0}.opening-bottom>p:last-child{font-size:11px;color:#6683a0;margin:0;text-align:right}.opening-bottom>p:last-child span{margin-left:16px}
@media(max-width:1000px){.opening-grid{grid-template-columns:1fr;gap:22px}.opening-copy h1{font-size:clamp(43px,6vw,65px)}.opening-copy .intro{max-width:680px}.opening-extra{max-width:680px}.opening-neighbourhood{max-width:620px;width:100%;margin:auto;padding-top:10px}.opening-street{margin-top:-12px}.street-signpost{margin-top:22px}}
@media(max-width:650px){.neighbourhood-intro{padding-top:20px}.opening-copy h1{font-size:43px}.opening-copy .intro{font-size:15px}.opening-extra{font-size:13px}.opening-grid{gap:25px}.opening-handnote{font-size:15px;margin-bottom:-10px}.opening-caption{font-size:9px}.opening-bottom{display:block}.opening-bottom>p:last-child{text-align:left;margin-top:12px;font-size:10px}.opening-bottom>p:last-child span{display:block;margin:2px 0 0}.street-signpost a,.street-signpost a+a{padding:12px}.street-signpost{margin-top:20px}}
/* The neighbourhood is a gentle backdrop to broader services. */
.street-stop{padding-block:48px;gap:85px}
.shop-illustration{max-width:330px;margin:auto;width:100%;padding-top:20px}
.shop-illustration p{font-size:11px}
.address-label{font-size:9px;letter-spacing:1px;padding:7px 12px}
.street-aside{padding-block:15px}
.stop-story>p:not(.eyebrow){max-width:510px}
.opening-caption{font-size:10px}
@media(max-width:950px){.street-stop{gap:45px}.stop-story h2{font-size:32px}}
@media(max-width:650px){.street-stop{padding-block:32px;gap:18px}.shop-illustration{max-width:245px;padding-top:12px}.shop-illustration svg{max-height:205px}.stop-story h2{font-size:32px}.stop-story .eyebrow{margin-bottom:14px}.feature-chips{margin:18px 0 0}.street-aside{padding-block:12px}}
/* A cartoon browser takes the place of the opening shop scene. */
.cartoon-website{padding-top:15px}.website-illustration{display:block;width:100%;height:auto;overflow:visible}.cartoon-website .opening-handnote{margin:0 0 0;font-size:18px}.cartoon-website .opening-caption{margin-top:-4px}
@media(min-width:1001px){.opening-grid{grid-template-columns:1fr 1.1fr;gap:30px}.cartoon-website{margin-right:-12px}}
@media(max-width:1000px){.cartoon-website{max-width:650px}.website-illustration{margin-top:0}}
@media(max-width:650px){.cartoon-website .opening-handnote{font-size:15px}.cartoon-website .opening-caption{margin-top:0}}

.sky-divider{width:min(300px,70%);margin:30px auto 5px;line-height:0}.sky-divider svg{width:100%;height:auto;display:block}


.neighbourhood+.street-aside{padding:16px 0 24px;background:transparent;text-align:center}.neighbourhood+.street-aside p{margin-bottom:0}

/* A looping dotted trail connects the service stops. */
.neighbourhood:before{display:none}
.neighbourhood-trail{position:absolute;left:calc(50% - 55px);top:25px;width:110px;height:calc(100% - 45px);pointer-events:none;z-index:-1;overflow:visible}
.street-stop:before{display:none}
@media(max-width:950px) and (min-width:651px){.neighbourhood-trail{width:70px;left:calc(50% - 35px)}}
@media(max-width:650px){.neighbourhood-trail{width:38px;left:calc(7% - 19px);top:20px;height:calc(100% - 35px)}}
/* Unevenly placed stops and a wide, wandering route. */
.neighbourhood{padding:20px 0 35px}
.neighbourhood-trail{left:3%;top:0;width:94%;height:100%;opacity:.95}
.street-stop{width:min(1180px,88%);gap:70px;padding-block:75px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.street-stop .shop-illustration{max-width:310px}
.street-stop .stop-story{background:#f4faffed;border-radius:26px;padding:22px 26px}
#cafe{margin-left:4%;margin-right:auto;max-width:1000px;transform:rotate(-.5deg)}
#shop{margin-right:3%;margin-left:auto;max-width:1020px;padding-top:110px;padding-bottom:90px;transform:rotate(.4deg)}
#studio{margin-left:7%;margin-right:auto;max-width:1030px;padding-top:100px;transform:rotate(-.3deg)}
@media(min-width:1400px){#cafe{margin-left:6%}#shop{margin-right:5%}#studio{margin-left:10%}}
@media(max-width:950px){.street-stop{gap:30px}.street-stop .stop-story{padding:20px}#cafe{margin-left:3%}#shop{margin-right:3%}#studio{margin-left:5%}.street-stop .shop-illustration{max-width:270px}}
@media(max-width:650px){.neighbourhood{padding:10px 0 20px}.neighbourhood-trail{left:0;width:100%;opacity:.75}.street-stop{width:88%;grid-template-columns:1fr;gap:8px;padding:35px 0!important;transform:none!important}.street-stop .stop-story{padding:22px 20px}.street-stop .shop-illustration{max-width:230px}#cafe{margin-left:3%;margin-right:auto}#shop{margin-left:auto;margin-right:3%}#studio{margin-left:4%;margin-right:auto}}
/* An asymmetrical star cluster with a long, faint zigzag trail. */
.sky-divider{width:min(720px,88%);margin:28px auto 4px 3%;line-height:0;transform:rotate(-3deg)}
.sky-divider svg{width:100%;height:auto;display:block}
@media(max-width:650px){.sky-divider{width:100%;margin:24px 0 0 -3%;transform:rotate(-4deg)}}
/* The trail separates the art and text, then loops through the empty space between stops. */
.neighbourhood-trail{left:0;top:0;width:100%;height:100%;z-index:0}
.street-stop{transform:none!important;position:relative}
.shop-illustration,.stop-story{position:relative;z-index:1}
@media(max-width:650px){.neighbourhood-trail{display:none}.street-stop{gap:24px}.shop-illustration:after{content:'';display:block;width:80%;height:14px;border-bottom:2px dotted #a8c9e6;border-radius:50%;margin:16px auto -10px}}
/* Compact stops leave broad, calm spaces for the trail to double back. */
.neighbourhood{padding:35px 0 70px}
.street-stop{width:min(860px,80%);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:120px;padding:120px 0!important}
.street-stop .shop-illustration{max-width:245px;padding-top:10px}
.street-stop .shop-illustration svg{max-height:210px}
.street-stop .stop-story{padding:14px 8px;background:transparent;border-radius:0}
.stop-story h2{font-size:34px;letter-spacing:-1px;margin-bottom:18px}
.stop-story>p:not(.eyebrow){font-size:14px;line-height:1.8;margin-bottom:17px}
.stop-story .eyebrow{font-size:9px;letter-spacing:1.4px;margin-bottom:15px}
.feature-chips{gap:6px;margin:16px 0 0}.feature-chips li{font-size:10px;padding:5px 10px}
#cafe{margin-left:5%;margin-right:auto;max-width:860px}
#shop{margin-left:auto;margin-right:5%;max-width:860px}
#studio{margin-left:11%;margin-right:auto;max-width:860px}
.neighbourhood-trail path{stroke-width:2;stroke-dasharray:2 7;stroke:#a4c6e1}
@media(min-width:1600px){#cafe{margin-left:8%}#shop{margin-right:7%}#studio{margin-left:15%}}
@media(max-width:1000px) and (min-width:651px){.street-stop{width:88%;gap:82px;padding:100px 0!important}.stop-story h2{font-size:29px}.stop-story>p:not(.eyebrow){font-size:13px}.street-stop .shop-illustration{max-width:220px}.street-stop .shop-illustration svg{max-height:190px}#cafe{margin-left:3%}#shop{margin-right:3%}#studio{margin-left:5%}}
@media(max-width:650px){.neighbourhood{padding:15px 0 25px}.street-stop{width:88%;grid-template-columns:1fr;gap:24px;padding:40px 0!important}.street-stop .stop-story{padding:10px 12px}.stop-story h2{font-size:30px}.stop-story>p:not(.eyebrow){font-size:14px}.feature-chips li{font-size:11px}#cafe{margin-left:3%}#shop{margin-right:3%}#studio{margin-left:4%}}
/* The closing thought is the destination of the dotted trail. */
.neighbourhood .trail-finish{position:relative;z-index:1;width:min(640px,88%);margin:0 auto;padding:52px 0 12px;background:transparent;text-align:center}
.trail-finish span{font-size:13px}.trail-finish p{font-size:34px;line-height:1.25;margin:12px 0 0;color:#7d6aaf}
@media(max-width:650px){.neighbourhood .trail-finish{padding-top:48px}.trail-finish p{font-size:28px}.trail-finish span{font-size:12px}.trail-finish:before{content:'';position:absolute;left:calc(50% - 5px);top:15px;width:8px;height:8px;border:2px solid #96bada;border-radius:50%;background:#f4faff}}
/* Scattered, quiet sky details occupy the open margins and gaps. */
.scattered-stars{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.space-star{position:absolute;width:var(--size);height:var(--size);color:var(--star-fill,#d8cdf3);--star-outline:#aaa0cd;opacity:.7;transform:rotate(var(--angle))}
.star-a{left:4%;top:3%;--size:31px;--angle:-17deg}
.star-b{right:9%;top:9%;--size:45px;--angle:12deg;--star-fill:#ffe6ae;--star-outline:#c9b587}
.star-c{left:22%;top:31%;--size:22px;--angle:28deg;--star-fill:#c3e0f6;--star-outline:#9fbdd7}
.star-d{right:5%;top:39%;--size:29px;--angle:-23deg}
.star-e{left:7%;top:56%;--size:41px;--angle:9deg;--star-fill:#ffe6ae;--star-outline:#c9b587}
.star-f{right:21%;top:65%;--size:21px;--angle:31deg;--star-fill:#c3e0f6;--star-outline:#9fbdd7}
.star-g{right:7%;top:83%;--size:37px;--angle:-12deg}
.star-h{left:24%;top:94%;--size:25px;--angle:19deg;--star-fill:#ffe6ae;--star-outline:#c9b587}
@media(max-width:1000px){.star-a{left:1%;top:2%}.star-b{right:4%;top:5%}.star-c{left:19%;top:32%}.star-d{right:2%;top:34%}.star-e{left:8%;top:60%}.star-f{right:12%;top:61%}.star-g{right:3%;top:87%}.star-h{left:18%;top:95%}}
@media(max-width:650px){.space-star{opacity:.5}.star-a{left:2%;top:1%;--size:22px}.star-b{right:3%;top:3%;--size:29px}.star-c{left:2%;top:33%;--size:18px}.star-d{right:1%;top:35%;--size:23px}.star-e{left:2%;top:64%;--size:27px}.star-f{right:1%;top:66%;--size:17px}.star-g{right:2%;top:90%;--size:24px}.star-h{left:2%;top:95%;--size:18px}}
/* Wider vertical gaps keep long desktop bends open, without squeezed corners. */
@media(min-width:1001px){.street-stop{padding-block:clamp(145px,11vw,230px)!important}}
@media(min-width:651px) and (max-width:1000px){.street-stop{padding-block:120px!important}}

.neighbourhood-trail path{stroke-width:3.2;stroke-dasharray:2 9;stroke-linecap:round}


/* Horizontal decorative separator at every screen size. */
.sky-divider{transform:none}
@media(max-width:650px){.sky-divider{transform:none}}


.sky-divider{width:min(780px,94%);margin:30px auto 10px;transform:none}
@media(max-width:650px){.sky-divider{width:100%;margin:24px auto 8px;transform:none}}

.neighbourhood-trail{overflow:visible}

/* The sky begins at the top edge, with the blue concentrated on the left. */
body{background:radial-gradient(ellipse 1100px 780px at 0 0,#d4e9ff 0%,#e6f2ff 48%,#f4faff 100%) no-repeat,#f4faff}
.neighbourhood-intro:before{display:none}
header{background:transparent}
/* Company name joins the mascot; the opening message becomes the main title. */
header{gap:18px}
header .corner-mascot{margin-right:0;flex:none}
.header-company-name{font:650 clamp(20px,2.2vw,30px)/1.1 'Outfit',sans-serif;letter-spacing:-.8px;text-decoration:none;white-space:nowrap;margin-right:auto}
.opening-copy h1{margin-top:0}
@media(max-width:1000px){header{gap:12px}header nav{gap:15px}.header-company-name{font-size:23px}.corner-mascot,.corner-mascot img{width:95px}.corner-mascot img{height:78px}}
@media(max-width:780px){header{flex-wrap:wrap}.header-company-name{font-size:clamp(20px,4.8vw,25px)}header nav{margin-left:auto}header nav>a:not(.button){display:none}}
@media(max-width:450px){header{column-gap:10px;row-gap:10px}.corner-mascot,.corner-mascot img{width:78px}.corner-mascot img{height:62px}.header-company-name{font-size:clamp(18px,5.2vw,22px)}header nav{flex-basis:100%;justify-content:flex-end}.neighbourhood-intro{padding-top:22px}}
/* Tuck the handwritten caption into the browser illustration's top margin. */
.cartoon-website .opening-handnote{position:relative;z-index:1;margin-bottom:-44px}
@media(max-width:650px){.cartoon-website .opening-handnote{margin-bottom:-26px}}
/* Section navigation lands on the section edge without showing the previous section. */
html{scroll-padding-top:0}
[id]{scroll-margin-top:0}
/* Services: plain explanations, with the same soft sky illustration language. */
.services-section{padding:85px 0;background:#eaf3ff;border-block:1px solid #d7e6f5}
.services-heading,.pricing-heading{max-width:700px;margin-bottom:42px}
.services-heading>p:not(.eyebrow),.pricing-heading>p:not(.eyebrow){font-size:16px;color:var(--muted);max-width:650px}
.service-list{display:grid;grid-template-columns:1fr 1fr;column-gap:65px;row-gap:0}
.service-item{display:flex;align-items:flex-start;gap:18px;border-top:1px solid #bfd4e9;padding:27px 0}
.service-star{display:block;width:31px;height:31px;flex:0 0 31px;color:#d1c3ef;transform:rotate(-12deg);margin-top:3px}
.service-star svg{display:block;width:100%;height:100%}
.service-item:nth-child(3n+2) .service-star{color:#ffe3a1;transform:rotate(14deg)}
.service-item:nth-child(3n) .service-star{color:#badced;transform:rotate(28deg)}
.service-label{font-size:10px;letter-spacing:.9px;font-weight:700;color:#667f9e;margin:0 0 10px;text-transform:uppercase}
.service-item h3{font-size:24px;margin-bottom:12px}
.service-item>div>p:last-child{font-size:14px;color:var(--muted);margin:0;max-width:470px}
.service-item:last-child{grid-column:1/-1}
.service-item:last-child>div>p:last-child{max-width:760px}
.services-footnote{display:flex;justify-content:space-between;gap:25px;border-top:1px solid #bfd4e9;padding-top:28px;margin-top:10px;align-items:center}
.services-footnote p{font-size:14px;color:var(--muted);margin:0}
.pricing-section{padding:85px 0;background:#f5faff;position:relative}
.pricing-heading{max-width:750px}
.build-note{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start;padding:27px 30px;background:#e7eefb;border:1px solid #c8d9ee;border-radius:17px;margin-bottom:38px}
.pricing-step{font-size:10px;letter-spacing:1.5px;font-weight:700;padding-top:7px}
.build-note h3{font-size:25px}.build-note p{font-size:14px;color:var(--muted);margin:0;max-width:680px}
.hosting-heading .eyebrow{margin-bottom:22px}
.pricing-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.price-option{background:#e6f1fd;border:1px solid #c3d9ee;border-radius:20px;padding:28px}
.price-option.handover-option{background:#fff;border-color:#d2dfec}
.price-option.complex-option{background:#eee8fa;border-color:#d8cdee}
.price-option h3{font-size:23px;margin:16px 0 14px}
.price-option .service-label{margin-bottom:19px;font-size:10px}
.price-option>p:not(.service-label):not(.monthly-price){font-size:14px;color:var(--muted);margin-bottom:0}
.monthly-price{font:600 48px/1.1 'Outfit',sans-serif;letter-spacing:-2px;margin:0 0 22px}
.monthly-price span{font:400 13px 'DM Sans',sans-serif;letter-spacing:0;color:var(--muted)}
.price-detail{border-top:1px solid #d1dfed;margin-top:24px;padding-top:17px;font-size:12px!important}
.pricing-clarity{margin:28px 0 24px;max-width:930px}
.pricing-clarity p{font-size:13px;color:var(--muted);margin-bottom:13px}
.pricing-clarity strong{color:var(--ink)}
@media(min-width:781px) and (max-width:1200px){header{flex-wrap:wrap}header nav{flex-basis:100%;justify-content:flex-end;margin-top:4px}}
@media(max-width:950px){.service-list{column-gap:35px}.pricing-options{gap:14px}.price-option{padding:22px}.price-option h3{font-size:21px}.monthly-price{font-size:42px}.services-footnote{align-items:flex-start;flex-direction:column;gap:16px}}
@media(max-width:650px){.services-section,.pricing-section{padding:52px 0}.services-heading,.pricing-heading{margin-bottom:30px}.services-heading>p:not(.eyebrow),.pricing-heading>p:not(.eyebrow){font-size:14px}.service-list{grid-template-columns:1fr}.service-item{gap:14px;padding:23px 0}.service-item h3{font-size:23px}.service-star{width:27px;height:27px;flex-basis:27px}.service-item>div>p:last-child{font-size:13px}.services-footnote p{font-size:13px}.services-footnote .text-link{font-size:13px}.build-note{grid-template-columns:1fr;gap:14px;padding:23px;margin-bottom:30px}.build-note h3{font-size:24px}.build-note p{font-size:13px}.pricing-options{grid-template-columns:1fr;gap:18px}.price-option{padding:25px}.price-option h3{font-size:24px}.monthly-price{font-size:48px}.pricing-clarity p{font-size:12px}}
/* Contact occupies a full screen, while allowing room for longer forms on phones. */
.contact-section{min-height:100svh;display:flex;align-items:center;padding-block:clamp(55px,7vh,110px)}
.contact-grid{width:min(1320px,88%);margin:auto}
@media(min-width:1200px){.contact-grid{gap:100px}.contact-grid h2{font-size:clamp(58px,4.8vw,78px)}.contact-grid form{padding:34px}.contact-grid input,.contact-grid textarea{padding:14px}.contact-grid textarea{min-height:135px}}
@media(max-width:650px){.contact-section{min-height:100svh;padding-block:55px}}
/* Keep the services overview compact enough for a desktop screen. */
@media(min-width:1001px){
 .services-section{padding:38px 0;min-height:100svh;display:flex;align-items:center}
 .services-section>.wrap{width:min(1320px,90%)}
 .services-heading{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:50px;margin-bottom:24px}
 .services-heading .eyebrow{grid-column:1/-1;margin-bottom:12px}
 .services-heading h2{font-size:36px;margin-bottom:0}
 .services-heading>p:not(.eyebrow){font-size:14px;align-self:center;margin:0;max-width:530px}
 .service-list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:30px}
 .service-item{padding:17px 0;gap:12px}
 .service-item h3{font-size:20px;margin-bottom:8px}
 .service-item>div>p:last-child{font-size:12px;line-height:1.65}
 .service-label{font-size:9px;margin-bottom:7px}
 .service-star{width:24px;height:24px;flex-basis:24px}
 .service-item:last-child{grid-column:auto}
 .services-footnote{margin-top:0;padding-top:18px;gap:20px}
 .services-footnote p,.services-footnote .text-link{font-size:12px}
}
@media(min-width:1001px) and (max-height:800px){.services-section{padding:25px 0}.services-heading{margin-bottom:16px}.services-heading h2{font-size:32px}.service-item{padding:12px 0}.service-item h3{font-size:18px}.service-item>div>p:last-child{font-size:11px}.services-footnote{padding-top:12px}}
@media(min-width:651px) and (max-width:1000px){.services-section{padding:35px 0}.services-heading{margin-bottom:24px}.services-heading h2{font-size:32px}.services-heading>p:not(.eyebrow){font-size:14px}.service-list{column-gap:25px}.service-item{padding:17px 0;gap:12px}.service-item h3{font-size:20px}.service-item>div>p:last-child{font-size:12px}.service-star{width:24px;height:24px;flex-basis:24px}.services-footnote{padding-top:18px;gap:12px}}
/* Match the other sections: readable type and a fuller two-column layout. */
@media(min-width:1001px){
 .services-section{min-height:100svh;padding:40px 0;display:flex;align-items:stretch}
 .services-section>.wrap{width:min(1180px,88%);min-height:calc(100svh - 80px);display:flex;flex-direction:column}
 .services-heading{display:block;max-width:760px;margin-bottom:28px}
 .services-heading .eyebrow{margin-bottom:17px}
 .services-heading h2{font-size:clamp(36px,3.2vw,47px);margin-bottom:18px}
 .services-heading>p:not(.eyebrow){font-size:15px;max-width:690px;margin:0}
 .service-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:55px;flex:1;align-content:stretch}
 .service-item{padding:20px 0;gap:17px}
 .service-item h3{font-size:23px;margin-bottom:10px}
 .service-item>div>p:last-child{font-size:14px;line-height:1.7}
 .service-label{font-size:10px;margin-bottom:9px}
 .service-star{width:30px;height:30px;flex-basis:30px}
 .service-item:last-child{grid-column:1/-1}
 .service-item:last-child>div>p:last-child{max-width:850px}
 .services-footnote{margin-top:8px;padding-top:22px}
 .services-footnote p,.services-footnote .text-link{font-size:14px}
}
/* Keep shorter laptop screens readable without forcing a tall layout. */
@media(min-width:1001px) and (max-height:820px){
 .services-section{padding:30px 0}
 .services-section>.wrap{min-height:calc(100svh - 60px)}
 .services-heading{display:grid;grid-template-columns:1fr 1fr;gap:0 45px;max-width:none;margin-bottom:22px}
 .services-heading .eyebrow{grid-column:1/-1;margin-bottom:14px}
 .services-heading h2{font-size:36px;margin:0}
 .services-heading>p:not(.eyebrow){font-size:14px;align-self:center}
 .service-list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:30px}
 .service-item{padding:18px 0;gap:13px}
 .service-item h3{font-size:22px}
 .service-item>div>p:last-child{font-size:13px}
 .service-item:last-child{grid-column:auto}
 .services-footnote{padding-top:18px}
 .services-footnote p,.services-footnote .text-link{font-size:13px}
}

@media(max-width:780px){header nav>a[href='testimonials.html']{display:inline-block}}

/* Every main section is reachable from the top navigation, on all screen sizes. */
header{flex-wrap:wrap;row-gap:22px;padding-bottom:18px}
header nav.section-tabs{display:flex;flex:0 0 100%;width:100%;min-width:0;max-width:100%;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px;margin:0;padding:13px 0;border-top:1px solid #b9d3e8;border-bottom:1px solid #b9d3e8}
header nav.section-tabs>a{display:inline-flex!important;align-items:center;justify-content:center;padding:8px 12px;border:1px solid transparent;border-radius:24px;font-size:12px;line-height:1.4;font-weight:500;white-space:nowrap;text-decoration:none;background:#ffffff50;color:var(--ink)}
header nav.section-tabs>a:hover{background:#e2dcf6;border-color:#cbbfe6}
header nav.section-tabs>a[aria-current=location]{background:#386aab;color:white;border-color:#386aab}
@media(max-width:650px){header{row-gap:15px}header nav.section-tabs{flex-basis:100%;gap:7px;padding:11px 0}header nav.section-tabs>a{font-size:11px;padding:7px 10px}}
/* Each chapter occupies exactly one screen; the neighbourhood remains a long trail. */
:root{--viewport-height:100svh;--masthead-height:0px}
.screen-section{height:var(--viewport-height)!important;min-height:0!important;max-height:none;display:flex!important;align-items:center!important;justify-content:center!important;padding:clamp(22px,4vh,48px) 0!important;box-sizing:border-box;position:relative}
.screen-section.wrap{width:100%;margin:0}
.screen-content{width:100%;flex:none;transform:scale(var(--screen-scale,1));transform-origin:center center;display:flow-root}
.screen-content.screen-width{width:min(1180px,88%)}
#home.screen-section{height:calc(var(--viewport-height) - var(--masthead-height))!important}
.screen-section .services-heading{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;max-width:none;margin-bottom:22px}
.screen-section .services-heading .eyebrow{grid-column:1/-1;margin-bottom:12px}
.screen-section .services-heading h2{font-size:clamp(30px,3.2vw,42px);margin:0}
.screen-section .services-heading>p:not(.eyebrow){font-size:14px;align-self:center}
.screen-section .service-list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:30px;flex:none}
.screen-section .service-item{padding:16px 0;gap:12px}
.screen-section .service-item h3{font-size:21px;margin-bottom:9px}
.screen-section .service-item>div>p:last-child{font-size:13px}
.screen-section .service-item:last-child{grid-column:auto}
.screen-section .services-footnote{padding-top:16px;margin-top:0}
.screen-section .services-footnote p,.screen-section .services-footnote .text-link{font-size:13px}
.screen-section .services-section>.wrap,.services-section.screen-section>.screen-content>.wrap{min-height:0;display:block}
.screen-section .showcase-intro h2{font-size:clamp(32px,3.3vw,44px);margin-bottom:12px}
.screen-section .showcase-intro{padding-bottom:12px}
.screen-section .showcase-intro .eyebrow{margin-bottom:12px}
.screen-section .project-carousel{margin-top:8px}
.screen-section .project-slide{padding-top:8px;padding-bottom:10px;gap:40px}
.screen-section .project-preview img{max-height:340px;object-fit:contain;background:#edf4fb}

.screen-section .carousel-controls{padding-top:14px;margin-bottom:12px}
.screen-section .showcase-invitation{padding-top:22px}
.screen-section .pricing-heading{margin-bottom:25px}
.screen-section .build-note{padding:22px 26px;margin-bottom:25px}
.screen-section .price-option{padding:24px}
.screen-section .pricing-clarity{margin:21px 0 20px}
.screen-section .how-list{margin-top:30px}
@media(min-width:651px) and (max-width:1000px){.screen-section .service-list{grid-template-columns:repeat(2,minmax(0,1fr))}.screen-section .service-item{padding:13px 0}.screen-section .service-item h3{font-size:19px}.screen-section .service-item>div>p:last-child{font-size:12px}.screen-section .services-heading>p:not(.eyebrow){font-size:13px}.screen-section .project-preview img{max-height:260px}}
@media(max-width:650px){
 .screen-section{padding:20px 0!important}
 .screen-section .services-heading{display:block;margin-bottom:18px}
 .screen-section .services-heading h2{font-size:30px;margin-bottom:13px}
 .screen-section .services-heading>p:not(.eyebrow){font-size:12px}
 .screen-section .service-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
 .screen-section .service-item{padding:11px 0;gap:7px}
 .screen-section .service-star{width:19px;height:19px;flex-basis:19px}
 .screen-section .service-label{font-size:8px;letter-spacing:.4px;margin-bottom:6px}
 .screen-section .service-item h3{font-size:16px;margin-bottom:6px;letter-spacing:-.4px}
 .screen-section .service-item>div>p:last-child{font-size:11px;line-height:1.55}
 .screen-section .service-item:last-child{grid-column:1/-1}
 .screen-section .services-footnote{gap:9px;padding-top:13px}
 .screen-section .services-footnote p,.screen-section .services-footnote .text-link{font-size:11px}
 .screen-section .opening-copy h1{font-size:36px}
 .screen-section .opening-copy .intro{font-size:13px}
 .screen-section .opening-extra{font-size:12px}
 .screen-section .opening-grid{gap:14px}
 .screen-section .cartoon-website{max-width:310px}
 .screen-section .opening-handnote{font-size:13px}
 .screen-section .project-slide{gap:16px}
 .screen-section .project-preview img{height:160px;aspect-ratio:auto}
 .screen-section .preview-note{font-size:9px;margin-top:10px}
 .screen-section .project-story h2{font-size:26px;margin-bottom:12px}
 .screen-section .project-description{font-size:12px;margin-bottom:13px}
 .screen-section .project-story .feature-chips{margin:12px 0;gap:5px}
 .screen-section .project-story .feature-chips li{font-size:9px;padding:4px 8px}
 .screen-section .project-story .text-link{font-size:11px}
 .screen-section .owner-feedback{margin-top:15px;padding-top:13px}
 .screen-section .quote-pending{font-size:17px}
 .screen-section .showcase-intro h2{font-size:30px}
 .screen-section .showcase-intro>p:last-child{font-size:12px}
 .screen-section .showcase-invitation{padding-top:16px;gap:10px}
 .screen-section .showcase-invitation p{font-size:18px}
 .screen-section .showcase-invitation .text-link{font-size:12px}
 .screen-section .carousel-bottom{padding-block:10px}
 .screen-section .pricing-heading h2{font-size:31px;margin-bottom:14px}
 .screen-section .pricing-heading>p:not(.eyebrow){font-size:12px}
 .screen-section .build-note{display:block;padding:16px;margin-bottom:19px}
 .screen-section .build-note .pricing-step{display:block;margin-bottom:10px;font-size:9px}
 .screen-section .build-note h3{font-size:21px}
 .screen-section .build-note p{font-size:11px}
 .screen-section .pricing-options{grid-template-columns:1fr 1fr;gap:12px}
 .screen-section .handover-option{grid-column:1/-1}
 .screen-section .price-option{padding:17px}
 .screen-section .handover-option h3{margin:8px 0;font-size:20px}
 .screen-section .price-option h3{font-size:19px;margin:12px 0}
 .screen-section .price-option>p:not(.service-label):not(.monthly-price){font-size:11px}
 .screen-section .price-detail{margin-top:12px;padding-top:10px;font-size:10px!important}
 .screen-section .monthly-price{font-size:36px;margin-bottom:12px}
 .screen-section .monthly-price span{font-size:11px}
 .screen-section .price-option .service-label{font-size:9px;margin-bottom:10px}
 .screen-section .pricing-clarity{margin:16px 0}
 .screen-section .pricing-clarity p{font-size:11px;margin-bottom:8px}
 .screen-section .contact-grid{gap:22px}
 .screen-section .contact-grid h2{font-size:37px;margin-bottom:16px}
 .screen-section .contact-grid>div>p:not(.eyebrow){font-size:13px;margin-bottom:0}
 .screen-section form{padding:20px}
 .screen-section input,.screen-section textarea{padding:9px 10px;margin-bottom:10px;font-size:13px}
 .screen-section textarea{height:80px;min-height:80px}
 .screen-section .form-note{font-size:10px;margin-bottom:13px}
}

.screen-section{overflow:clip}

/* Short sections keep their natural height instead of filling a whole screen. */
.possibilities>.screen-content.screen-width{width:100%;transform:none}
.how-section>.screen-content{transform:none}
.possibilities{padding-block:60px}
.how-section{padding-block:55px}
@media(max-width:650px){.possibilities{padding-block:42px}.how-section{padding-block:42px}}

.monthly-price .price-approx{display:block;font-size:12px;line-height:1.4;margin-bottom:7px;letter-spacing:.3px}

/* Restore navigation beside the brand rather than in a separate tab bar. */
header{flex-wrap:nowrap;gap:18px;row-gap:16px}
header nav.section-tabs{flex:0 1 auto;width:auto;max-width:none;flex-wrap:nowrap;justify-content:flex-end;gap:20px;margin-left:auto;padding:0;border:0}
header nav.section-tabs>a{padding:5px 0;border:0;border-radius:0;background:transparent;font-size:14px;font-weight:600}
header nav.section-tabs>a:hover,header nav.section-tabs>a[aria-current=location]{background:transparent;border:0;color:#8270be}
header nav.section-tabs>a[href="/#contact"]{padding:12px 19px;border:2px solid #386aab;border-radius:13px;background:#386aab;color:white;box-shadow:0 4px 0 #c3daf0}
@media(max-width:1200px){header{flex-wrap:wrap}header nav.section-tabs{flex-basis:100%;justify-content:flex-end;gap:22px}}
@media(max-width:650px){header nav.section-tabs{flex-wrap:wrap;justify-content:flex-start;gap:10px 18px}header nav.section-tabs>a{font-size:12px}header nav.section-tabs>a[href="/#contact"]{padding:8px 13px}}
/* The rocket uses solid outlines rather than the trail's dotted stroke. */
.neighbourhood-trail .trail-traveller{pointer-events:none;filter:drop-shadow(0 2px 2px #315b8617)}
.neighbourhood-trail .trail-traveller path{stroke-dasharray:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.neighbourhood-trail .trail-traveller path{stroke:#315b86}.neighbourhood-trail .trail-traveller path[stroke='none']{stroke:none}



/* Mobile follows its own route around the existing stacked content. */
@media(max-width:650px){.neighbourhood-trail{display:block;left:0;top:0;width:100%;height:100%;opacity:.85}.neighbourhood-trail>path{stroke-width:2.4;stroke-dasharray:2 7}.shop-illustration:after,.trail-finish:before{display:none}}

.enquiry-trap{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#enquiry-form button:disabled{opacity:.65;cursor:wait}#form-status{overflow-wrap:anywhere}

/* First-contact preference uses a single-choice, accessible radio group. */
.contact-preference{border:0;padding:0;margin:4px 0 18px;min-width:0}.contact-preference legend{font-size:12px;font-weight:700;line-height:1.5;margin-bottom:10px}.contact-preference-options{display:flex;gap:12px 24px;flex-wrap:wrap}.contact-preference-options label{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-weight:500;margin:0}.contact-preference-options input{width:17px;height:17px;flex:0 0 17px;padding:0;margin:0;accent-color:var(--blue)}.phone-hint{font-size:11px;line-height:1.5;color:var(--muted);margin:-8px 0 14px}