/* Nasnails_ottawa: "Ten Tiny Canvases". Bagel Fat One + Urbanist. white / night #1E1433 / fuchsia #B0127A */
@font-face{font-family:'Bagel Fat One';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/BagelFatOne-normal-400.woff2) format('woff2')}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/Urbanist-normal-400.woff2) format('woff2')}
:root{--night:#1E1433;--fuch:#B0127A;--blush:#FBE3EF;--white:#fff;--muted:#4A3F5C;--s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:96px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;scroll-padding-bottom:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:'Urbanist',system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;color:var(--night);background:var(--white)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:'Bagel Fat One',system-ui,sans-serif;font-weight:400;line-height:1.05;margin:0 0 var(--s2)}
h1{font-size:clamp(2.6rem,7vw,4.8rem)}h2{font-size:clamp(1.95rem,4.2vw,3rem)}h3{font-size:1.4rem}
h1 em{font-style:normal;color:var(--fuch)}
p{margin:0 0 var(--s2)}
.num{white-space:nowrap}
a{color:var(--fuch)}
:focus-visible{outline:3px solid var(--fuch);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--night);color:#fff;padding:12px 16px;z-index:50}
.skip:focus{left:8px}
.wrap,.top,.hero,.steps,.work,.words,.visit{width:min(1160px,100% - 40px);margin-inline:auto}
/* header */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--s2);padding:var(--s2) 0}
.brand{font-family:'Bagel Fat One';font-size:1.5rem;color:var(--night);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.brand span{color:var(--fuch)}
.top nav{display:flex;gap:var(--s1)}
.top nav a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;color:var(--night);font-weight:600;text-decoration:none;border-radius:22px}
.top nav a:hover{background:var(--blush)}
/* buttons */
.actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.btn{display:inline-flex;gap:.35em;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:999px;font-weight:800;text-decoration:none;white-space:nowrap;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn-main{background:var(--fuch);color:#fff}
.btn-ghost{border:2px solid var(--night);color:var(--night)}
.btn-light{background:#fff;color:var(--night);border:2px solid var(--night)}
/* hero */
.hero{display:grid;gap:var(--s4);padding:var(--s4) 0 var(--s5);align-items:center}
.eyebrow{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;color:var(--muted)}
.lede{font-size:1.2rem;max-width:34em}
.hero-art{position:relative;padding-bottom:var(--s4)}
.tiles{width:100%;height:auto;overflow:visible}
.tiles .row>g>g{transform-box:fill-box}
.tiles .row>g{animation:drop .6s cubic-bezier(.3,1.5,.6,1) both}
.tiles .row>g:nth-child(2){animation-delay:.05s}.tiles .row>g:nth-child(3){animation-delay:.1s}.tiles .row>g:nth-child(4){animation-delay:.15s}.tiles .row>g:nth-child(5){animation-delay:.2s}.tiles .row>g:nth-child(6){animation-delay:.25s}.tiles .row>g:nth-child(7){animation-delay:.3s}.tiles .row>g:nth-child(8){animation-delay:.35s}.tiles .row>g:nth-child(9){animation-delay:.4s}.tiles .row>g:nth-child(10){animation-delay:.45s}
@keyframes drop{from{translate:0 -18px}to{translate:0 0}}
.tiles .pop{animation:pop .45s ease}
@keyframes pop{50%{translate:0 -10px}}
.hero-photo{margin:-20px auto 0;width:min(70%,380px);position:relative}
.hero-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:50% 50% 24px 24px/38% 38% 24px 24px;border:6px solid #fff;box-shadow:0 0 0 3px var(--fuch)}
@media (min-width:900px){.hero{grid-template-columns:1.05fr 1fr}.hero-photo{width:380px;margin-top:-40px}}
/* steps */
.steps{padding:var(--s5) 0;border-top:3px dotted var(--fuch)}
.steps ol{list-style:none;padding:0;margin:var(--s4) 0 0;display:grid;gap:var(--s4)}
.steps li{position:relative;padding-left:72px}
.steps .n{position:absolute;left:0;top:0;width:52px;height:68px;border-radius:26px 26px 10px 10px;background:var(--night);color:#fff;font-family:'Bagel Fat One';font-size:1.6rem;display:flex;align-items:center;justify-content:center}
.steps li:nth-child(2) .n{background:var(--fuch)}
@media (min-width:768px){.steps ol{grid-template-columns:repeat(3,1fr)}.steps li:nth-child(2){margin-top:var(--s4)}.steps li:nth-child(3){margin-top:calc(var(--s4)*2)}}
/* gallery */
.work{padding:var(--s5) 0}
.work-head{max-width:40em}
.gallery{list-style:none;padding:0;margin:var(--s4) 0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.gallery img{width:100%;aspect-ratio:3/4.4;object-fit:cover;border-radius:50% 50% 18px 18px/34% 34% 18px 18px;background:var(--blush)}
.gallery li:nth-child(even){margin-top:var(--s4)}
.gallery li:last-child{grid-column:1/-1;width:60%;margin-inline:auto}
@media (min-width:900px){.gallery{grid-template-columns:repeat(5,1fr)}.gallery li:last-child{grid-column:auto;width:auto}}
.more{margin-top:var(--s2)}
/* reviews */
.words{padding:var(--s5) 0;display:grid;gap:var(--s4)}
.words figure{margin:0;background:var(--night);color:#fff;padding:var(--s4) var(--s3);border-radius:40px 40px 12px 12px}
.words figure:nth-of-type(2){background:var(--blush);color:var(--night)}
.words blockquote{margin:0;font-size:1.25rem;font-weight:600}
.words figcaption{margin-top:var(--s2);font-weight:800}
@media (min-width:900px){.words{grid-template-columns:1fr 1fr;align-items:start}.words h2{grid-column:1/-1}.words figure:nth-of-type(2){margin-top:var(--s5)}}
/* visit */
.visit{margin-bottom:var(--s5);padding:var(--s5) var(--s3);background:var(--fuch);color:#fff;border-radius:48px 48px 16px 16px}
.visit .btn-main{background:var(--night)}
.visit p{max-width:36em;font-size:1.15rem}
.foot{text-align:center;padding:var(--s4) 20px 120px;background:var(--night);color:#fff}
.foot p{margin:0}
/* sticky bar on phones */
.bar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:var(--s1);padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);box-shadow:0 -2px 12px rgba(30,20,51,.15);z-index:20}
.bar .btn{flex:1;padding:12px 10px;font-size:1rem}
@media (min-width:900px){.bar{display:none}.foot{padding-bottom:var(--s4)}}
@media (max-width:359px){.bar .btn{font-size:.9rem;padding:12px 6px}.btn{padding:12px 18px}}