:root{--blue:#1F3BFF;--ink:#0B0B0F;--white:#fff;--cloud:#F4F2EC;--sky:#E4EAFF;--sun:#FFD93B;--pink:#FF3D8B;--r:32px;--pad:clamp(1.25rem,4.5vw,4rem);--sec:clamp(3rem,6vw,5rem);--disp:"Bricolage Grotesque",system-ui,sans-serif;--txt:"DM Sans",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--txt);font-size:1rem;line-height:1.5;color:var(--ink);background:var(--white);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--blue)}
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.8rem,10vw,7.5rem)}
h2{font-size:clamp(2rem,5.5vw,4rem)}
h3{font-size:clamp(1.4rem,2.6vw,2rem)}
p{margin:0}
.mark{background:var(--sun);color:var(--ink);padding:0 .14em;border-radius:.22em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mark.sky{background:var(--sky)}
.mark.white{background:var(--white)}
.pill{display:inline-block;font:500 13px/1 var(--txt);text-transform:uppercase;letter-spacing:.08em;padding:.55rem .9rem;border-radius:999px;background:var(--sky);color:var(--ink)}
.pill.pink{background:var(--pink)}
.pill.sun{background:var(--sun)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 2rem;border-radius:999px;border:0;background:var(--blue);color:var(--white);font:800 1.1rem/1 var(--disp);letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:transform .2s ease}
.btn:hover,.btn:focus-visible{transform:scale(1.04)}
.btn.sun{background:var(--sun);color:var(--ink)}
.btn.ghost{background:var(--white);color:var(--ink);border:2px solid var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn.full{width:100%}
.burst{position:absolute;display:grid;place-items:center;width:clamp(96px,16vw,150px);aspect-ratio:1;background:var(--sun);color:var(--ink);font:800 clamp(.95rem,1.6vw,1.25rem)/1.05 var(--disp);text-align:center;padding:1rem;clip-path:polygon(50.0% 0.0%,59.3% 15.2%,75.0% 6.7%,75.5% 24.5%,93.3% 25.0%,84.8% 40.7%,100.0% 50.0%,84.8% 59.3%,93.3% 75.0%,75.5% 75.5%,75.0% 93.3%,59.3% 84.8%,50.0% 100.0%,40.7% 84.8%,25.0% 93.3%,24.5% 75.5%,6.7% 75.0%,15.2% 59.3%,0.0% 50.0%,15.2% 40.7%,6.7% 25.0%,24.5% 24.5%,25.0% 6.7%,40.7% 15.2%);transform:rotate(8deg);transition:transform .3s ease;z-index:2}
.burst.pink{background:var(--pink)}
.burst:hover{animation:wob .6s ease}
@keyframes wob{0%,100%{transform:rotate(8deg)}30%{transform:rotate(14deg)}60%{transform:rotate(2deg)}}
.shape{border-radius:var(--r);overflow:hidden;position:relative}
.shape img{width:100%;height:100%;object-fit:cover}
.shape.pillshape{border-radius:999px 999px var(--r) var(--r)}
header.top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem 1rem;padding:.75rem var(--pad);background:var(--white);position:sticky;top:0;z-index:30;border-bottom:1px solid #0001}
header.top .logo img{height:40px;width:auto}
header.top nav{display:flex;gap:.4rem;justify-content:center;grid-column:1/-1;grid-row:2;overflow-x:auto}
header.top nav a{white-space:nowrap;text-decoration:none;color:var(--ink);font:500 .95rem/1 var(--txt);padding:.65rem 1rem;border-radius:999px}
header.top nav a:hover,header.top nav a[aria-current]{background:var(--sky)}
.basket{grid-column:3;grid-row:1;justify-self:end;display:inline-flex;gap:.5rem;align-items:center;min-height:44px;padding:0 1.1rem;border-radius:999px;border:2px solid var(--ink);background:var(--white);color:var(--ink);font:800 .95rem/1 var(--disp);cursor:pointer}
.basket b{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;border-radius:999px;background:var(--pink);font-size:.8rem}
@media(min-width:860px){header.top{grid-template-columns:auto 1fr auto}header.top nav{grid-column:2;grid-row:1}}
.hero{background:var(--blue);color:var(--white);padding:var(--sec) var(--pad);display:grid;gap:1.5rem 3rem;grid-template-areas:"h" "p" "i" "b";align-content:center}
.hero h1{grid-area:h}
.hero .lead{grid-area:p;font-size:clamp(1.05rem,1.6vw,1.35rem);max-width:34rem}
.hero .shape{grid-area:i;aspect-ratio:16/10}
.hero .cta{grid-area:b}
.hero .cta .btn{width:100%}
.hero .burst{top:-1.2rem;right:-.4rem}
.hero .picwrap{grid-area:i;position:relative}
.hero .picwrap .shape{aspect-ratio:16/10}
@media(min-width:900px){.hero{grid-template-columns:1.05fr 1fr;grid-template-areas:"h i" "p i" "b i";align-items:center;min-height:min(80vh,46rem)}.hero .cta .btn{width:auto}.hero .picwrap .shape{aspect-ratio:4/3.4}.hero .burst{top:-1.6rem;right:-1rem}}
.hero.small{min-height:0}
.sec{padding:var(--sec) var(--pad)}
.sec.cloud{background:var(--cloud)}
.sec.sky{background:var(--sky)}
.sec.sun{background:var(--sun)}
.sec.blue{background:var(--blue);color:var(--white)}
.sec.ink{background:var(--ink);color:var(--white)}
.sechead{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:end;justify-content:space-between;margin-bottom:2rem}
.sechead .pill{margin-bottom:.8rem}
.arrows{display:none;gap:.5rem}
@media(min-width:900px){.arrows{display:flex}}
.arrows button{width:56px;height:56px;border-radius:999px;border:2px solid var(--ink);background:var(--white);font:800 1.4rem/1 var(--disp);cursor:pointer;transition:transform .2s}
.arrows button:hover{transform:scale(1.06)}
.rail{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;margin-right:calc(var(--pad)*-1);padding-right:var(--pad);scrollbar-width:thin}
.tile{flex:0 0 min(76vw,22rem);scroll-snap-align:start;text-decoration:none;color:var(--ink);transition:transform .25s}
.tile:hover{transform:scale(1.03)}
.tile .shape{aspect-ratio:4/5}
.tile .meta{display:flex;gap:.6rem;align-items:center;margin:1rem 0 .4rem}
.tile .num{font:800 1.1rem var(--disp);color:var(--blue)}
.tile p{font-size:1rem}
.split{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:4rem}.split.flip>:first-child{order:2}}
.split .shape{aspect-ratio:4/5}
.split .shape.wide{aspect-ratio:16/10}
.stmt h2{font-size:clamp(2.6rem,8vw,6.5rem)}
.stmt p{font-size:clamp(1.1rem,2vw,1.5rem);margin-top:1.25rem;max-width:30rem}
.picwrap{position:relative}
.picwrap .burst{top:-1rem;left:-.6rem}
.why{display:grid;gap:3rem}
.whyrow{display:grid;gap:1.5rem;align-items:center}
@media(min-width:900px){.whyrow{grid-template-columns:auto 1fr 1fr;gap:3rem}.whyrow.alt{grid-template-columns:1fr 1fr auto}.whyrow.alt .shape{order:-1}.whyrow.alt .numeral{order:3}}
.numeral{display:grid;place-items:center;width:clamp(5.5rem,12vw,9rem);aspect-ratio:1;border-radius:50%;background:var(--sky);color:var(--blue);font:800 clamp(2.5rem,6vw,4.5rem)/1 var(--disp)}
.whyrow .shape{aspect-ratio:16/10}
.whyrow p{margin-top:.6rem;font-size:1.15rem;max-width:26rem}
.closing{padding-top:var(--sec)}
.closing h2{font-size:clamp(2.6rem,8vw,6.5rem)}
.closing .btn{margin-top:2rem}
footer.foot{margin-top:var(--sec);padding-top:2rem;border-top:1px solid #fff3;display:grid;gap:1.25rem;font-size:.95rem}
footer.foot .logopill{display:inline-block;background:var(--white);border-radius:999px;padding:.5rem 1.1rem}
footer.foot .logopill img{height:32px;width:auto}
footer.foot nav{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
footer.foot a{color:var(--white)}
footer.foot a:hover{color:var(--sun)}
@media(min-width:900px){footer.foot{grid-template-columns:auto 1fr auto;align-items:center}}
.chips{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}
.chip{border:2px solid var(--ink);background:var(--white);color:var(--ink);border-radius:999px;padding:.7rem 1.2rem;font:500 .95rem/1 var(--txt);cursor:pointer;text-decoration:none;transition:transform .2s}
.chip:hover{transform:scale(1.04)}
.chip[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:var(--white)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:900px){.grid{grid-template-columns:repeat(3,1fr);gap:1.75rem}}
.card{display:block;text-decoration:none;color:var(--ink);transition:transform .25s}
.card:hover{transform:scale(1.03)}
.card .shape{aspect-ratio:4/5;background:var(--sky)}
.card h3{font-size:1.15rem;margin-top:.8rem}
.card .price{font:800 1.1rem var(--disp);color:var(--blue);margin-top:.2rem}
.card .tag{position:absolute;left:.7rem;top:.7rem}
.empty{border-radius:var(--r);background:var(--sky);padding:clamp(2rem,6vw,4rem);display:grid;gap:1.25rem;justify-items:start}
.bands>section{padding:var(--sec) var(--pad)}
.band-sun .btn{background:var(--blue)}
.nums{display:grid;gap:2rem}
@media(min-width:900px){.nums{grid-template-columns:repeat(3,1fr);gap:3rem}}
.nums .numeral{margin-bottom:1rem;background:var(--white)}
.nums p{font-size:1.1rem;margin-top:.5rem}
.break{position:relative;min-height:min(70vh,34rem);display:grid;align-items:end;padding:var(--pad);background:var(--ink) center/cover no-repeat}
.break .mark{font:800 clamp(2rem,6vw,4.5rem)/1.1 var(--disp);padding:.15em .35em;width:fit-content}
.pdp{display:grid;gap:2rem}
@media(min-width:900px){.pdp{grid-template-columns:1.1fr 1fr;gap:4rem;align-items:start}}
.gallery{display:grid;gap:1rem}
.gallery .main{aspect-ratio:1}
.thumbs{display:flex;gap:.6rem;flex-wrap:wrap}
.thumbs button{width:72px;height:72px;border-radius:18px;border:2px solid transparent;padding:0;overflow:hidden;cursor:pointer;background:var(--sky)}
.thumbs button[aria-pressed=true]{border-color:var(--blue)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.buy .price{font:800 2rem var(--disp);color:var(--blue)}
.buy .was{text-decoration:line-through;margin-left:.6rem;color:#555;font-size:1.1rem}
.buy .desc{margin:1rem 0;max-width:36rem}
.opt{margin:1.25rem 0}
.opt h4{margin:0 0 .6rem;font:800 1rem var(--disp)}
.opt .row{display:flex;gap:.5rem;flex-wrap:wrap}
.choice{border:2px solid var(--ink);background:var(--white);color:var(--ink);border-radius:999px;padding:.65rem 1.1rem;font:500 .95rem/1 var(--txt);cursor:pointer}
.choice[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:var(--white)}
.choice[disabled]{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.qty{display:inline-flex;align-items:center;border:2px solid var(--ink);border-radius:999px;margin:1rem 1rem 1rem 0}
.qty button{width:48px;height:48px;border:0;background:none;font:800 1.3rem var(--disp);cursor:pointer}
.qty span{min-width:2rem;text-align:center;font-weight:500}
.note{margin-top:.8rem;font-size:.95rem}
.err{color:#b00020;margin-top:.8rem}
input.txt{width:100%;min-height:48px;border-radius:999px;border:2px solid var(--ink);padding:0 1.1rem;font:inherit}
.acc{margin-top:1.5rem;border-top:2px solid var(--ink)}
.acc details{border-bottom:2px solid var(--ink);padding:.9rem 0}
.acc summary{font:800 1.1rem var(--disp);cursor:pointer}
.drawer{position:fixed;inset:0;z-index:100;display:none}
.drawer.open{display:block}
.drawer .scrim{position:absolute;inset:0;background:#0b0b0f88}
.drawer aside{position:absolute;right:0;top:0;bottom:0;width:min(100%,26rem);background:var(--white);padding:1.25rem;display:flex;flex-direction:column;gap:1rem;overflow:auto;border-radius:var(--r) 0 0 var(--r)}
.drawer header{display:flex;justify-content:space-between;align-items:center}
.drawer .close{border:2px solid var(--ink);background:var(--white);border-radius:999px;min-height:44px;padding:0 1rem;font:800 .95rem var(--disp);cursor:pointer}
.line{display:grid;grid-template-columns:72px 1fr;gap:.9rem;align-items:center;padding-bottom:1rem;border-bottom:1px solid #0b0b0f22}
.line img{width:72px;height:72px;border-radius:18px;object-fit:cover;background:var(--sky)}
.line .q{display:flex;gap:.5rem;align-items:center;margin-top:.4rem}
.line .q button{border:2px solid var(--ink);background:var(--white);border-radius:999px;width:34px;height:34px;cursor:pointer;font:800 1rem var(--disp)}
.line .rm{border:0;background:none;text-decoration:underline;cursor:pointer;font:inherit;color:var(--ink)}
.sub{display:flex;justify-content:space-between;font:800 1.2rem var(--disp)}
.rv{opacity:1}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s ease;transition-delay:calc(var(--i,0)*60ms)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .rv{opacity:1;transform:none}}
[data-symphony-badge]{font-family:var(--txt)!important;font-size:12px!important;font-weight:500!important;background:#fff!important;color:var(--ink)!important;border:1.5px solid var(--ink)!important;box-shadow:none!important;border-radius:999px!important}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hero :focus-visible,.sec.blue :focus-visible,.sec.ink :focus-visible{outline-color:var(--sun)}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--white);padding:.5rem 1rem;z-index:200}