/* Shutterbloom: night lagoon collage, paper prints, tape, rotated cards */
:root{
  --ground:#071A1F; --surface:#0E2A31; --ink:#EEF5F3; --primary:#3FE0C5; --accent:#FF7AB6; --muted:#A3BDBB;
  --paper:#F4EEDF; --paper-ink:#10262B; --paper-muted:#4B5F61; --tape:rgba(232,193,90,.62); --gold:#E8C15A;
  --fh:'Rubik Mono One',ui-monospace,'Courier New',monospace; --fb:'Manrope',system-ui,sans-serif; --wrap:1260px;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.15 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.65 var(--fb);overflow-x:hidden;background-image:radial-gradient(900px 600px at 85% -10%,rgba(63,224,197,.14),transparent 60%),radial-gradient(700px 500px at -10% 40%,rgba(255,122,182,.08),transparent 60%)}
img{max-width:100%;display:block}
a{color:var(--primary);text-underline-offset:3px}
h1,h2,h3,.h3{font-family:var(--fh);font-weight:400;line-height:1.14;margin:0 0 .55em;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.35rem,2.8vw,2.1rem)}
h3,.h3{font-size:1.05rem;line-height:1.3}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--primary);color:var(--ground);padding:10px 16px;z-index:100;font-weight:700}
.skip:focus{top:56px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.small{font-size:.86rem;color:var(--muted)}
.lead{font-size:1.1rem;color:#C9DAD8;max-width:58ch}
.center{text-align:center}
.label{display:inline-block;font:800 .78rem/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--primary);margin-bottom:16px;padding-left:28px;position:relative}
.label::before{content:"";position:absolute;left:0;top:50%;width:18px;height:2px;background:currentColor}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 24px;background:var(--primary);color:var(--ground);font:800 .98rem/1 var(--fb);text-decoration:none;border:2px solid var(--primary);cursor:pointer;border-radius:4px;transform:rotate(-1deg);transition:transform .2s,box-shadow .2s;box-shadow:4px 4px 0 var(--accent)}
.btn:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:6px 6px 0 var(--accent)}
.btn.line{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none;transform:rotate(1deg)}
.btn.line:hover{background:rgba(255,255,255,.06)}
.btn.sm{min-height:44px;padding:10px 18px;font-size:.92rem}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}

/* backdrop patterns (drawn, used everywhere) */
.bd-studio{background:linear-gradient(#FBFAF6 0 72%,#E3DED2 72%)}
.bd-blush{background:radial-gradient(circle at 25% 30%,#F49AB6 0 9px,transparent 10px),radial-gradient(circle at 70% 65%,#FFE3EA 0 11px,transparent 12px),radial-gradient(circle at 75% 20%,#E86F96 0 7px,transparent 8px),radial-gradient(circle at 30% 80%,#FBCFDB 0 10px,transparent 11px),radial-gradient(circle at 50% 50%,#F7B8CA 0 8px,transparent 9px),#F9D3DE;background-size:44px 44px}
.bd-lagoon{background:radial-gradient(circle,#7CF5E0 0 1.6px,transparent 2.6px) 0 0/9px 9px,radial-gradient(circle,#2CB3A6 0 1.8px,transparent 2.8px) 4.5px 4.5px/9px 9px,linear-gradient(160deg,#0F5A5E,#05343B)}
.bd-gold{background:linear-gradient(90deg,rgba(80,50,0,.28) 1px,transparent 1px) 0 0/14px 14px,linear-gradient(rgba(80,50,0,.28) 1px,transparent 1px) 0 0/14px 14px,linear-gradient(135deg,#FBE7A4,#C4922F 45%,#F6DA83 60%,#B07D22)}
.bd-neon{background:radial-gradient(ellipse 22px 9px at 30% 30%,#1E7A4C 60%,transparent 64%),radial-gradient(ellipse 9px 22px at 75% 70%,#145C39 60%,transparent 64%),radial-gradient(ellipse 18px 8px at 80% 20%,#28925C 60%,transparent 64%),radial-gradient(ellipse 8px 18px at 20% 75%,#1A6B43 60%,transparent 64%),#04170F;background-size:70px 70px}
.bd-aso{background:repeating-linear-gradient(90deg,#22336B 0 18px,#B5562B 18px 30px,#F1E6CE 30px 36px,#22336B 36px 44px,#E8C15A 44px 48px,#F1E6CE 48px 52px)}
.bd-balloon{background:radial-gradient(circle at 20% 30%,#FFB1CB 0 16px,transparent 17px),radial-gradient(circle at 60% 25%,#FFFFFF 0 13px,transparent 14px),radial-gradient(circle at 45% 70%,#FF8EB7 0 18px,transparent 19px),radial-gradient(circle at 85% 65%,#FFD7E5 0 14px,transparent 15px),#FDE7EF;background-size:80px 80px}
.bd-disco{background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.8),transparent 30%),repeating-conic-gradient(#DDE5E8 0 25%,#8E9CA2 0 50%) 0 0/14px 14px}

/* tape and paper */
.tape{position:absolute;z-index:3;top:-13px;left:50%;width:96px;height:28px;margin-left:-48px;background:var(--tape);transform:rotate(-4deg);clip-path:polygon(3% 0,97% 4%,100% 22%,97% 45%,100% 70%,96% 100%,4% 96%,0 75%,3% 50%,0 25%);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.snap{position:relative;margin:0;background:var(--paper) var(--noise);padding:10px 10px 40px;box-shadow:0 22px 40px -18px rgba(0,0,0,.7),0 2px 0 rgba(0,0,0,.2);transform:rotate(var(--r,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.snap:hover{transform:rotate(0deg) scale(1.02);z-index:5}
.snap-ph{aspect-ratio:4/5;overflow:hidden}
.snap-ph img{width:100%;height:100%;object-fit:cover;color:transparent;font-size:0}
.snap figcaption{position:absolute;left:0;right:0;bottom:9px;text-align:center;color:var(--paper-ink);font:800 .9rem/1 var(--fb);font-style:italic;letter-spacing:.02em}
.snap.big .snap-ph{aspect-ratio:4/3}
.note{position:relative;background:var(--paper) var(--noise);color:var(--paper-ink);padding:22px 22px 18px;transform:rotate(var(--r,-1.2deg));box-shadow:0 16px 30px -18px rgba(0,0,0,.7);font-size:.98rem}
.note b{display:block;font:800 .82rem/1.2 var(--fb);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.note.big{font-size:1.05rem;padding:30px}

/* header: split nav around a centred logo */
.hd{position:sticky;top:0;z-index:50;background:rgba(7,26,31,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px dashed rgba(244,238,223,.18);transition:background .25s}
.hd.is-scrolled{background:rgba(7,26,31,.96)}
.hd-in{max-width:var(--wrap);margin:0 auto;padding:12px 22px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.nav{display:flex;align-items:center;gap:4px}
.nav-r{justify-content:flex-end}
.nav a:not(.btn){color:var(--ink);text-decoration:none;font-weight:700;font-size:.94rem;padding:10px 12px;position:relative}
.nav a:not(.btn)[aria-current]::after,.nav a:not(.btn):hover::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:8px;background:var(--tape);transform:rotate(-2deg);z-index:-1}
.nav .btn{margin-left:10px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo-mark{width:40px;height:40px;border-radius:50%;border:5px solid var(--primary);display:grid;place-items:center;transform:rotate(-8deg)}
.logo-mark i{width:12px;height:12px;border-radius:50%;background:var(--accent)}
.logo-word{font:400 1.15rem/1 var(--fh)}
.logo-word b{font-weight:400;color:var(--accent)}
.menu-btn{display:none;width:48px;height:48px;border:2px solid var(--ink);background:transparent;cursor:pointer;position:relative;justify-self:end;transform:rotate(3deg)}
.menu-btn i{position:absolute;left:11px;right:11px;height:3px;background:var(--ink)}
.menu-btn i:nth-of-type(1){top:16px}.menu-btn i:nth-of-type(2){top:26px;right:17px}
.menu{position:fixed;inset:0;z-index:60;background:rgba(3,12,14,.7);opacity:0;transition:opacity .2s}
.menu.on{opacity:1}
.menu-in{position:absolute;left:14px;right:14px;top:66px;background:var(--paper) var(--noise);color:var(--paper-ink);padding:64px 24px 24px;transform:rotate(-1.5deg) translateY(-10px);transition:transform .25s;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.menu.on .menu-in{transform:rotate(-1deg) translateY(0)}
.menu-in::before{content:"";position:absolute;top:-12px;left:30px;width:90px;height:26px;background:var(--tape);transform:rotate(-6deg)}
.menu-in nav{display:grid;gap:4px;margin-bottom:18px}
.menu-in nav a{font:400 1.2rem/1.2 var(--fh);color:var(--paper-ink);text-decoration:none;padding:10px 4px;border-bottom:1px dashed rgba(16,38,43,.25)}
.menu-in nav a[aria-current]{color:#B0215E}
.menu-x{position:absolute;right:14px;top:12px;width:48px;height:48px;border:2px solid var(--paper-ink);background:transparent;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--paper-ink)}
.menu-in .btn{width:100%}
.menu-in .small{color:var(--paper-muted)}
body.menu-on{overflow:hidden}

/* sections */
.sec{padding:clamp(60px,8vw,110px) 0;position:relative}
.sec+.sec{padding-top:clamp(24px,4vw,56px)}
.sec.paper{background:var(--paper) var(--noise);color:var(--paper-ink);margin:40px 0;padding-top:clamp(60px,8vw,100px)}
.sec.paper::before,.sec.paper::after{content:"";position:absolute;left:0;right:0;height:14px;background:conic-gradient(from -45deg at bottom,var(--paper) 90deg,transparent 0) 50%/24px 100%}
.sec.paper::before{top:-14px}
.sec.paper::after{bottom:-14px;transform:scaleY(-1)}
.paper .label{color:#B0215E}
.paper .lead,.paper .small{color:var(--paper-muted)}
.paper .btn.line{color:var(--paper-ink);border-color:var(--paper-ink)}
.sec-h{max-width:760px;margin-bottom:40px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.split.top{align-items:start}

/* reveals */
.js:not(.rm) .rv{opacity:0;transform:translateY(24px) rotate(var(--r,0deg));transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.js:not(.rm) .rv.in{opacity:1;transform:translateY(0) rotate(var(--r,0deg))}

/* hero collage */
.hero{padding:clamp(40px,6vw,80px) 0 clamp(60px,7vw,90px);overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center}
.hero-tags{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.hero-tags li{border:1px dashed rgba(244,238,223,.4);padding:8px 14px;font-weight:700;font-size:.9rem}
.hero-collage{position:relative;height:600px}
.hero-collage .snap{position:absolute}
.h1{width:52%;left:4%;top:4%;--r:-6deg}
.h2{width:42%;right:2%;top:0;--r:5deg}
.h3{width:40%;left:30%;top:46%;--r:3deg;z-index:2}
.h4{width:30%;right:0;top:56%;--r:-8deg}
.h-strip{position:absolute;left:0;top:52%;width:22%;background:var(--paper);padding:8px 8px 28px;display:grid;gap:6px;transform:rotate(-12deg);box-shadow:0 20px 30px -14px rgba(0,0,0,.7);z-index:3}
.h-strip span{aspect-ratio:4/3;display:grid;place-items:end center;overflow:hidden}
.ppl{width:70%;height:auto}
.h-strip b{position:absolute;bottom:7px;left:0;right:0;text-align:center;color:var(--paper-ink);font:800 .7rem/1 var(--fb);font-style:italic}
.sticker{position:absolute;z-index:4;margin:0;font:400 .82rem/1.1 var(--fh);color:var(--ground);padding:14px;border-radius:50%;width:110px;height:110px;display:grid;place-items:center;text-align:center}
.s1{background:var(--accent);right:30%;top:-2%;transform:rotate(-12deg)}
.s2{background:var(--primary);right:4%;bottom:0;transform:rotate(10deg);width:96px;height:96px}
.js:not(.rm) .hero-collage .snap{animation:drop .9s cubic-bezier(.2,.8,.2,1) both}
.js:not(.rm) .hero-collage .h2{animation-delay:.12s}.js:not(.rm) .hero-collage .h3{animation-delay:.24s}.js:not(.rm) .hero-collage .h4{animation-delay:.36s}
.js:not(.rm) .sticker{animation:pop .6s .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes drop{from{opacity:0;transform:translateY(-40px) rotate(calc(var(--r) * 3))}to{opacity:1;transform:translateY(0px) rotate(var(--r))}}
@keyframes pop{from{opacity:0;scale:.4}to{opacity:1;scale:1}}

/* tape band marquee */
.tape-band{overflow:hidden;padding:18px 0}
.tb-track{display:flex;width:max-content;gap:18px;transform:rotate(-1.5deg)}
.tb-track span{background:var(--tape);color:var(--paper-ink);font:400 1rem/1 var(--fh);padding:12px 22px;clip-path:polygon(2% 0,98% 6%,100% 50%,98% 100%,1% 94%,0 50%)}
.tb-track span:nth-child(3n+2){background:rgba(255,122,182,.8)}
.tb-track span:nth-child(3n){background:rgba(63,224,197,.85)}
.js:not(.rm) .tb-track{animation:mq 45s linear infinite}
@keyframes mq{to{transform:translateX(-50%) rotate(-1.5deg)}}

/* backdrop wall */
.bd-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-bottom:36px}
.bd-tile{position:relative;aspect-ratio:1;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;text-decoration:none;border:10px solid var(--paper);border-bottom-width:44px;box-shadow:0 18px 30px -16px rgba(0,0,0,.7);transform:rotate(var(--r,0deg));transition:transform .3s}
.bd-tile:nth-child(4n+1){--r:-3deg}.bd-tile:nth-child(4n+2){--r:2deg}.bd-tile:nth-child(4n+3){--r:-1deg}.bd-tile:nth-child(4n){--r:3deg}
.bd-tile:hover{transform:rotate(0) scale(1.04);z-index:2}
.bd-name{position:absolute;left:0;right:0;bottom:-34px;text-align:center;color:var(--paper-ink);font:800 .9rem/1.1 var(--fb)}
.bd-price{align-self:flex-start;background:var(--ground);color:var(--ink);font:700 .78rem/1 var(--fb);padding:6px 10px}

/* steps */
.how{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:40px;align-items:start}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 30px}
.steps.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.steps li{border-top:2px dashed currentColor;padding-top:18px}
.num{display:block;font:400 2.2rem/1 var(--fh);color:var(--accent);margin-bottom:12px}
.paper .num{color:#B0215E}

/* packages */
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-bottom:22px;align-items:start}
.pack{position:relative;background:var(--paper) var(--noise);color:var(--paper-ink);padding:34px 28px 28px;box-shadow:0 24px 40px -22px rgba(0,0,0,.8);transform:rotate(var(--r))}
.p-a{--r:-1.5deg}.p-b{--r:1deg;margin-top:30px;background-color:#FCE1EC}.p-c{--r:-.6deg;background-color:#D9F6F0}
.pack-p{font-size:.95rem;color:var(--paper-muted)}
.pack-p b{display:block;font:400 2rem/1.1 var(--fh);color:var(--paper-ink)}
.pack ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:8px}
.pack li{padding-left:24px;position:relative;font-size:.95rem}
.pack li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border:2px solid #B0215E;border-radius:50%}
.pack .btn{box-shadow:4px 4px 0 var(--paper-ink);background:var(--paper-ink);color:var(--paper);border-color:var(--paper-ink)}

/* pin wall */
.pin-wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:start}
.pw1{--r:-4deg}.pw2{--r:3deg;margin-top:40px}.pw3{--r:-2deg}.pw4{--r:5deg;margin-top:60px}.pw5{--r:-3deg;margin-top:10px}

/* reviews */
.revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.rev{position:relative;margin:0;background:var(--paper) var(--noise);color:var(--paper-ink);padding:32px 26px 22px;box-shadow:0 20px 34px -20px rgba(0,0,0,.8)}
.r0{--r:-2deg}.r1{--r:1.5deg;background-color:#FCE1EC}.r2{--r:-1deg;background-color:#D9F6F0}
.rev blockquote{margin:0 0 14px;font-size:1.04rem;font-weight:600}
.rev figcaption{font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--paper-muted)}
.paper .rev{box-shadow:0 14px 26px -16px rgba(16,38,43,.5)}

/* cta */
.cta{position:relative;background:var(--accent);color:#2A0A18;padding:clamp(34px,6vw,70px);transform:rotate(-1deg);box-shadow:10px 10px 0 var(--primary)}
.cta .tape{left:12%}.cta .t2{left:auto;right:8%;transform:rotate(6deg)}
.cta-art{position:absolute;right:6%;top:50%;width:220px;height:240px;transform:translateY(-50%)}
.cta-art span{position:absolute;width:120px;aspect-ratio:4/5;border:8px solid var(--paper);border-bottom-width:26px;display:grid;place-items:end center;overflow:hidden;box-shadow:0 14px 24px -12px rgba(0,0,0,.6)}
.cta-art span:nth-child(1){left:0;top:0;transform:rotate(-10deg)}.cta-art span:nth-child(2){left:70px;top:40px;transform:rotate(6deg)}.cta-art span:nth-child(3){left:20px;top:100px;transform:rotate(-3deg)}
.cta-art .ppl{width:70%}
.cta h2{max-width:20ch}.cta p{max-width:52ch;font-size:1.08rem}
.cta .btn{background:#2A0A18;color:#fff;border-color:#2A0A18;box-shadow:4px 4px 0 #fff}
.cta .btn.line{background:transparent;color:#2A0A18;border-color:#2A0A18;box-shadow:none}

/* page head */
.phead{padding:clamp(40px,6vw,80px) 0 30px;overflow:hidden}
.phead-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:30px;align-items:center}
.phead-snaps{position:relative;height:340px}
.phead-snaps .snap{position:absolute;width:56%}
.ph1{left:0;top:10px;--r:-6deg}.ph2{right:0;top:70px;--r:7deg}
.js:not(.rm) .phead-snaps .snap{animation:drop .9s cubic-bezier(.2,.8,.2,1) both}
.js:not(.rm) .phead-snaps .ph2{animation-delay:.15s}

/* picker */
.picker{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.pk-stage{position:sticky;top:110px}
.pk-frame{position:relative;background:var(--paper) var(--noise);padding:14px 14px 14px;box-shadow:0 30px 50px -24px rgba(0,0,0,.85);transform:rotate(-1deg)}
.pk-bd{position:relative;aspect-ratio:5/4;overflow:hidden;display:grid;place-items:end center;transition:filter .4s}
.pk-bd.swap{animation:swap .45s ease}
@keyframes swap{0%{clip-path:inset(0 0 0 100%)}100%{clip-path:inset(0 0 0 0)}}
.pk-neon{position:absolute;top:14%;left:6%;right:6%;text-align:center;font:400 clamp(1.1rem,3vw,2rem)/1.2 var(--fh);color:#FFE9F4;text-shadow:0 0 6px #FF7AB6,0 0 16px #FF7AB6,0 0 32px #FF3D95;overflow-wrap:anywhere}
.js:not(.rm) .pk-neon{animation:flick 5s infinite}
@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.5}95%{opacity:1}96%{opacity:.6}}
.pk-ppl{width:52%}
.pk-ppl .ppl{width:100%}
.pk-frame[data-booth=spin] .pk-bd::after{content:"";position:absolute;left:12%;right:12%;bottom:-8%;height:22%;border-radius:50%;background:radial-gradient(#cfd8da,#5d6a6e);box-shadow:0 0 0 4px rgba(63,224,197,.6)}
.pk-frame[data-booth=mirror] .pk-bd{border-radius:120px 120px 8px 8px;box-shadow:inset 0 0 0 8px #C9A44A}
.pk-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.pk-frame.flash .pk-flash{animation:flash .6s ease-out}
@keyframes flash{0%{opacity:0}10%{opacity:.95}100%{opacity:0}}
.pk-cap{margin:18px 0 14px;color:#C9DAD8;font-weight:600;min-height:3.2em}
.pk-print{display:flex;gap:22px;align-items:flex-start}
.pp{--border:#F4EEDF;background:var(--border);padding:8px;display:grid;gap:6px;box-shadow:0 14px 24px -12px rgba(0,0,0,.7);transform:rotate(3deg);transition:all .35s}
.pp span{display:grid;place-items:end center;overflow:hidden}
.pp .ppl{width:62%}
.pp b{font:800 .72rem/1.2 var(--fb);text-align:center;font-style:italic;padding:4px 2px;overflow-wrap:anywhere}
.pp-strip{width:110px;grid-template-columns:1fr}.pp-strip span{aspect-ratio:4/3}
.pp-card{width:210px;grid-template-columns:1fr 1fr}.pp-card span{aspect-ratio:4/3}.pp-card span:nth-child(3){grid-column:1/-1;aspect-ratio:2/1}.pp-card b{grid-column:1/-1}
.pp-square{width:170px;grid-template-columns:1fr}.pp-square span{aspect-ratio:1}.pp-square span:nth-child(n+2){display:none}
.tray{display:flex;flex-wrap:wrap;gap:4px;margin-top:18px;min-height:20px}
.mini{--border:#F4EEDF;width:64px;aspect-ratio:4/5;border:5px solid var(--border);border-bottom-width:16px;position:relative;transform:rotate(var(--r));box-shadow:0 8px 14px -8px rgba(0,0,0,.8)}
.js:not(.rm) .mini{animation:dropm .55s cubic-bezier(.3,1.4,.5,1)}
@keyframes dropm{from{opacity:0;transform:translateY(-60px) rotate(calc(var(--r) * -3))}to{opacity:1;transform:translateY(0) rotate(var(--r))}}
.mini span{position:absolute;bottom:-15px;left:0;right:0;font:700 .5rem/1.4 var(--fb);color:var(--paper-ink);text-align:center;white-space:nowrap;overflow:hidden}
.pk-ctrl{display:grid;gap:18px}
.pk-set{border:1px dashed rgba(244,238,223,.3);padding:18px;margin:0;min-width:0}
.pk-set legend{font:400 .95rem/1 var(--fh);padding:0 8px;color:var(--primary)}
.pk-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sw{position:relative;aspect-ratio:1;border:6px solid var(--paper);border-bottom-width:30px;cursor:pointer;padding:0;transition:transform .2s;min-height:44px}
.sw span{position:absolute;left:-4px;right:-4px;bottom:-26px;font:800 .62rem/1.1 var(--fb);color:var(--paper-ink);text-align:center}
.sw small{position:absolute;top:4px;left:4px;font:700 .6rem/1 var(--fb);background:var(--ground);color:var(--ink);padding:3px 5px}
.sw[aria-checked=true]{outline:3px solid var(--accent);outline-offset:3px;transform:rotate(-3deg) scale(1.04)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{min-height:44px;padding:10px 14px;border:2px solid rgba(244,238,223,.35);background:transparent;color:var(--ink);font:700 .88rem/1.2 var(--fb);cursor:pointer;text-align:left}
.seg button small{display:block;font-weight:600;color:var(--muted)}
.seg button[aria-checked=true]{background:var(--primary);color:var(--ground);border-color:var(--primary)}
.seg button[aria-checked=true] small{color:var(--ground)}
.lbl{font-weight:700;font-size:.9rem;margin:16px 0 8px}
.borders{display:flex;gap:10px}
.borders button{width:44px;height:44px;border-radius:50%;background:var(--c);border:3px solid rgba(244,238,223,.4);cursor:pointer}
.borders button[aria-checked=true]{outline:3px solid var(--accent);outline-offset:3px}
.check{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600}
.check input{width:22px;height:22px;accent-color:var(--accent)}
.pk-sum{background:var(--paper) var(--noise);color:var(--paper-ink);padding:24px;transform:rotate(.6deg);box-shadow:0 20px 34px -20px rgba(0,0,0,.8)}
.pk-sum dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:0 0 14px}
.pk-sum dd{margin:0;font-weight:800;text-align:right}
.pk-sum .tot{font:400 1.1rem/1.3 var(--fh);border-top:2px dashed var(--paper-ink);padding-top:10px}
.pk-sum .btn.line{color:var(--paper-ink);border-color:var(--paper-ink)}
.pk-sum .small{color:var(--paper-muted);margin:12px 0 0}

/* backdrop list */
.bd-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px}
.bd-card{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:center;padding:16px 0;border-bottom:1px dashed rgba(16,38,43,.3)}
.bd-sw{aspect-ratio:1;border:7px solid #fff;box-shadow:0 10px 18px -10px rgba(0,0,0,.5);transform:rotate(-3deg)}
.bd-card:nth-child(2n) .bd-sw{transform:rotate(3deg)}
.bd-card h3{margin-bottom:6px}
.bd-card p{margin:0 0 6px}

/* table */
.tbl-wrap{position:relative;overflow-x:auto;background:#fff;box-shadow:0 18px 30px -20px rgba(16,38,43,.5)}
.tbl{width:100%;border-collapse:collapse;min-width:640px;color:var(--paper-ink)}
.tbl th,.tbl td{padding:14px 18px;text-align:left;border-bottom:1px dashed rgba(16,38,43,.2)}
.tbl thead th{font:400 .85rem/1.2 var(--fh);background:var(--paper-ink);color:var(--paper)}
.tbl tbody th{font-weight:800}
.addons{list-style:none;padding:0;margin:0 0 16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.addons li{display:flex;justify-content:space-between;gap:12px;padding:18px 20px;border:2px dashed rgba(244,238,223,.35);font-weight:700}
.addons b{color:var(--primary)}

/* booths */
.booth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:center}
.booth.flip .booth-ph{order:2}
.booth-ph .snap{--r:-2deg;max-width:560px}
.booth.flip .booth-ph .snap{--r:2deg;margin-left:auto}
.ticks{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:9px;border-left:3px solid var(--primary);border-bottom:3px solid var(--primary);transform:rotate(-45deg)}
.from b{font:400 1.4rem/1 var(--fh);color:var(--primary)}
.needs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.need:nth-child(2n) .note{--r:1.4deg}

/* events */
.ev-list{display:grid;gap:70px}
.ev{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,70px);align-items:center}
.ev:nth-child(2n) .ev-ph{order:2;--r:3deg}
.ev-ph{--r:-3deg}
.ev-ph .snap-ph{aspect-ratio:4/3}
.ev-txt .note{max-width:420px;margin-top:20px}

/* about */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stat{border-top:2px dashed var(--primary);padding-top:16px}
.stat b{display:block;font:400 clamp(1.6rem,3.4vw,2.6rem)/1 var(--fh);color:var(--primary);margin-bottom:8px}
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.polaroid{aspect-ratio:4/5;border:10px solid #fff;border-bottom-width:34px;display:grid;place-items:center;margin-bottom:16px;box-shadow:0 14px 24px -14px rgba(16,38,43,.6);transform:rotate(-3deg)}
.person:nth-child(2n) .polaroid{transform:rotate(3deg)}
.polaroid span{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;font:400 1.8rem/1 var(--fh);color:var(--paper-ink)}
.role{font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#B0215E;margin-bottom:6px}

/* faq */
.faq details{border-bottom:1px dashed rgba(244,238,223,.3)}
.paper .faq details{border-color:rgba(16,38,43,.3)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-weight:800;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:12px;font:400 1.4rem/1 var(--fh);color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:0 0 18px}

/* forms */
.panel{position:relative;background:var(--paper) var(--noise);color:var(--paper-ink);padding:clamp(22px,4vw,38px);box-shadow:0 24px 44px -24px rgba(0,0,0,.85);transform:rotate(.5deg)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.fld{margin-bottom:16px;min-width:0}
.fld label{display:block;font-weight:800;font-size:.9rem;margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;min-height:50px;padding:12px 14px;border:2px solid var(--paper-ink);background:#fff;font:inherit;color:var(--paper-ink);border-radius:0}
.pk-set .fld label{color:var(--ink)}
.pk-set .fld input{border-color:rgba(244,238,223,.5)}
.fld textarea{min-height:120px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:3px solid var(--accent);outline-offset:1px}
.err{display:none;color:#A1123F;font-size:.86rem;font-weight:700;margin:6px 0 0}
.fld.bad .err{display:block}
.fld.bad input,.fld.bad textarea{border-color:#A1123F}
.panel .btn{box-shadow:4px 4px 0 var(--accent);background:var(--paper-ink);color:var(--paper);border-color:var(--paper-ink)}
.thanks h3{font-size:1.3rem}
.thanks .small{color:var(--paper-muted)}
.dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:20px 0}
.dl dt{font-weight:800}.dl dd{margin:0}
.mapbox{position:relative;border:10px solid var(--paper);transform:rotate(-1deg);box-shadow:0 20px 34px -20px rgba(0,0,0,.8)}
.mapbox svg{display:block;width:100%;height:auto}

/* footer */
.ft{padding:70px 0 110px;margin-top:60px;border-top:1px dashed rgba(244,238,223,.25)}
.ft-strip{display:flex;gap:10px;margin:-110px 0 50px;justify-content:center}
.ft-strip span{width:80px;aspect-ratio:4/5;border:6px solid var(--paper);border-bottom-width:20px;box-shadow:0 12px 20px -10px rgba(0,0,0,.8)}
.ft-strip span:nth-child(odd){transform:rotate(-6deg)}.ft-strip span:nth-child(even){transform:rotate(5deg) translateY(10px)}
.ft-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.ft-logo{font:400 1.5rem/1 var(--fh);margin-bottom:14px}
.ft-logo b{font-weight:400;color:var(--accent)}
.ft-h{font:400 .9rem/1 var(--fh);margin-bottom:14px;color:var(--primary)}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ft ul a{color:var(--ink);display:inline-block;padding:4px 0}
.ft-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px dashed rgba(244,238,223,.2);margin-top:40px;padding-top:20px;font-size:.86rem;color:var(--muted)}
.ft-base p{margin:0}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;align-items:center;gap:8px;background:var(--primary);color:var(--ground);font-weight:800;text-decoration:none;padding:10px 18px 10px 12px;min-height:52px;transform:rotate(-2deg);box-shadow:4px 4px 0 var(--accent)}
.wa-float svg{width:30px;height:30px}

@media (max-width:1060px){
  .hd-in{grid-template-columns:auto 1fr}
  .nav{display:none}.menu-btn{display:block}
  .logo{grid-column:1}
  .bd-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pin-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pin-wall .snap:nth-child(n+4){display:none}
  .picker{grid-template-columns:minmax(0,1fr)}
  .pk-stage{position:static}
  .steps.five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .needs,.team,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .addons{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){.cta-art{opacity:.35;right:-40px}}
@media (max-width:820px){
  .hero-in,.phead-in,.split,.how,.booth,.ev{grid-template-columns:minmax(0,1fr)}
  .booth.flip .booth-ph,.ev:nth-child(2n) .ev-ph{order:0}
  .hero-collage{height:460px}
  .packs,.revs,.bd-list{grid-template-columns:minmax(0,1fr)}
  .p-b{margin-top:0}
  .phead-snaps{height:230px;max-width:420px}
  .ft-in{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .hd-in{padding:10px 16px}
  .logo-word{font-size:1rem}
  .hero-collage{height:400px}
  .h1{width:58%}.h2{width:46%}.h3{width:48%;left:24%;top:50%}.h4{width:36%;top:60%}
  .h-strip{width:26%;top:56%}
  .sticker{width:84px;height:84px;font-size:.66rem;padding:8px}.s2{width:76px;height:76px}
  .steps,.steps.five,.two,.needs,.addons{grid-template-columns:minmax(0,1fr)}
  .pin-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pin-wall .snap:nth-child(3){display:none}
  .pk-swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
  .sw{aspect-ratio:3/2}
  .bd-card{grid-template-columns:84px minmax(0,1fr)}
  .pk-print{flex-wrap:wrap}
  .ft-in{grid-template-columns:minmax(0,1fr)}
  .ft-strip span{width:56px}
  .wa-float span{display:none}.wa-float{padding:10px}
  .cta{transform:none;box-shadow:6px 6px 0 var(--primary)}
  .cta-art{display:none}
}
