/* v3 enhancements: colour splash, phone frames, sparkles, brand strip */
:root{--tang:#ff7a45;--pink:#ffb3d1;--sky:#9fdcff;--lime:#d9f56a;--lilac:#cdbdff;--sun:#ffd84d;--sig:"Yellowtail","Caveat",cursive}
body{background:radial-gradient(900px 600px at 8% 4%,#ffe1ec 0,transparent 60%),radial-gradient(800px 600px at 96% 18%,#e3f4ff 0,transparent 60%),radial-gradient(900px 700px at 50% 100%,#efe6ff 0,transparent 60%),var(--paper);background-attachment:fixed}
.spark{display:inline-block;width:1em;height:1em;background:currentColor;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);vertical-align:-.12em}
.tri{display:inline-block;border-left:.75em solid currentColor;border-top:.45em solid transparent;border-bottom:.45em solid transparent;margin-left:.1em}
.page-progress span{background:linear-gradient(90deg,var(--tang),var(--pink),var(--sky))}
/* nav brush */
.site-nav a{position:relative}.site-nav a:not(.nav-contact)::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-3px;height:9px;border-radius:6px;background:var(--lime);z-index:-1;transform:scaleX(0) rotate(-1.5deg);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.site-nav a.is-current::after,.site-nav a:hover::after{transform:scaleX(1) rotate(-1.5deg)}
.nav-contact{background:var(--tang);color:var(--ink)!important;padding:8px 16px;border-radius:40px;transition:transform .2s,background .2s}.nav-contact:hover{transform:rotate(-2deg) scale(1.05);background:var(--sun)}
/* hero */
.hero h1{font-size:clamp(56px,8.4vw,120px);line-height:.95;letter-spacing:-2px;margin:.1em 0 .15em}
.hero h1 .sig{font-family:var(--sig);font-weight:400;color:var(--tang);letter-spacing:0;display:inline-block;transform:rotate(-3deg);margin-right:.08em}
.hero h1 .ser{font-family:var(--serif);font-style:italic;color:var(--plum)}
.hero-sub{font-size:clamp(17px,1.6vw,21px);max-width:30em;font-weight:500;margin:10px 0 6px}
.hero-sub mark{background:linear-gradient(transparent 55%,var(--sun) 55%);color:inherit;padding:0 2px}
.button{transition:transform .2s,background .25s,color .25s,box-shadow .25s}.button-dark:hover{background:var(--tang);color:var(--ink);transform:translateY(-2px) rotate(-1deg);box-shadow:4px 5px 0 var(--ink)}
.hero-social{display:flex;gap:12px;align-items:center;margin-top:26px}.hero-social>span{display:none}
.soc{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border:1.5px solid var(--ink);border-radius:40px;font-weight:600;font-size:14px;background:#fff9;transition:transform .2s,background .2s}
.soc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.soc:hover{transform:translateY(-3px) rotate(-2deg);background:var(--pink)}.soc:nth-child(2):hover{background:var(--sky)}.soc:nth-child(3):hover{background:var(--lime)}
.hero-frame{border-radius:200px 200px 28px 28px;box-shadow:12px 14px 0 var(--pink)}
.hero-stamp{width:124px!important;height:124px!important;padding:0!important;border:0!important;background:var(--sun)!important;color:var(--ink)!important;border-radius:50%!important;display:grid;place-items:center;animation:spin 26s linear infinite;box-shadow:3px 4px 0 var(--ink)}
.hero-stamp svg{width:100%;height:100%}.hero-stamp text{font:700 9.5px var(--sans);fill:var(--ink)}.hero-stamp .sg{font:400 24px var(--sig)}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-sparkle{color:var(--tang)}.hero-sparkle.sparkle-two{color:var(--lilac)}
.intro-band{background:linear-gradient(90deg,var(--lime),var(--sky),var(--pink),var(--lime))}
/* brands */
.brands{padding:46px 0 52px;overflow:hidden}.brands-title{text-align:center;font-size:28px;margin:0 0 20px}
.brand-track{display:flex;width:max-content;animation:slide 38s linear infinite}.brand-track:hover{animation-play-state:paused}.brand-track ul{display:flex;gap:14px;list-style:none;margin:0;padding:0 7px}
@keyframes slide{to{transform:translateX(-50%)}}
.brand-chip{display:inline-block;white-space:nowrap;padding:14px 26px;border-radius:60px;border:1.5px solid var(--ink);font-size:20px;font-weight:700;letter-spacing:-.3px;transition:transform .2s}
a.brand-chip:hover{transform:rotate(-3deg) scale(1.06)}
.brand-chip.k1{background:var(--pink)}.brand-chip.k2{background:var(--sky);font-family:var(--serif);font-weight:400;font-size:23px}.brand-chip.k3{background:var(--lime);font-family:var(--sig);font-weight:400;font-size:26px}.brand-chip.k4{background:var(--lilac);font-style:italic}.brand-chip.k5{background:var(--sun);text-transform:uppercase;letter-spacing:.08em;font-size:15px}
/* sections */
.work-section{background:linear-gradient(160deg,#ffe9d6 0,#fde4f1 45%,#e4ecff 100%)}
.approach-section{background:linear-gradient(135deg,var(--sky),var(--lilac) 70%,var(--pink))}
.section-kicker span:first-child{color:var(--tang);font-size:22px}
.filter-chip{border-color:var(--ink);transition:transform .2s,background .2s}.filter-chip:hover,.filter-chip.is-active{background:var(--tang);color:var(--ink);border-color:var(--ink);transform:rotate(-1.5deg)}
/* phone frames */
.video-grid{grid-template-columns:repeat(4,1fr);gap:40px 22px}
.video-thumb{aspect-ratio:9/17;border:7px solid #1b1a1f;border-radius:36px;box-shadow:6px 8px 0 var(--ink);transition:transform .3s,box-shadow .3s}
.video-card:nth-child(4n+1) .video-thumb{box-shadow:6px 8px 0 var(--pink)}.video-card:nth-child(4n+2) .video-thumb{box-shadow:6px 8px 0 var(--sky)}.video-card:nth-child(4n+3) .video-thumb{box-shadow:6px 8px 0 var(--lime)}.video-card:nth-child(4n) .video-thumb{box-shadow:6px 8px 0 var(--sun)}
.video-thumb:hover{transform:translateY(-6px) rotate(-1deg)}
.video-thumb::before{content:"";position:absolute;z-index:3;top:9px;left:50%;width:30%;height:14px;border-radius:10px;background:#1b1a1f;transform:translateX(-50%)}
.video-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .3s}.video-thumb video.on{opacity:1}
.video-thumb .play-disc{z-index:2}.video-index{display:none}.video-thumb:hover .play-disc{opacity:0}
.video-meta h3{font-size:20px}.video-category{background:var(--lime);padding:3px 8px;border-radius:20px;color:var(--ink)}
.cta-band{margin:56px auto 0;max-width:760px;padding:26px 30px;border:1.5px solid var(--ink);border-radius:90px 90px 90px 24px;background:var(--sun);display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;transform:rotate(-1deg);box-shadow:6px 7px 0 var(--ink)}
.cta-band p{margin:0;font-family:var(--sig);font-size:clamp(26px,3vw,36px);line-height:1.1}.cta-band .button{background:var(--ink);color:#fff}.cta-band .button:hover{background:var(--tang);color:var(--ink)}
/* photos: varied soft shapes */
.photo-item{border-radius:26px;transition:transform .35s,border-radius .35s}.photo-item:nth-child(3n+1){border-radius:160px 160px 26px 26px}.photo-item:nth-child(5n+2){border-radius:26px 90px 26px 90px}.photo-item:nth-child(7n+3){border-radius:50% 50% 26px 26px/40% 40% 26px 26px}
.photo-item:nth-child(odd):hover{transform:rotate(-1.5deg) scale(1.02)}.photo-item:nth-child(even):hover{transform:rotate(1.5deg) scale(1.02)}
/* approach numbers */
.approach-number{font:400 clamp(64px,8vw,112px)/1 var(--serif)!important;color:var(--tang)!important;-webkit-text-stroke:0}.approach-list article:nth-child(2) .approach-number{color:var(--plum)!important}.approach-list article:nth-child(3) .approach-number{color:#fff!important}
.approach-list article{grid-template-columns:minmax(110px,170px) 1fr 40px!important;align-items:center}.approach-mark{color:var(--ink);font-size:28px}
/* contact + footer */
.email-link{font-size:clamp(22px,3vw,38px);border-bottom:4px solid var(--tang)}
.footer-top{flex-wrap:wrap;gap:20px}.footer-email{display:block;width:100%;font:400 clamp(28px,5vw,64px)/1.1 var(--serif);color:var(--sun);margin:10px 0 0;overflow-wrap:anywhere}.footer-email:hover{color:var(--pink)}
.fsoc{display:flex;gap:14px}.fsoc a{width:46px;height:46px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;transition:transform .2s,background .2s,color .2s}.fsoc a:hover{background:var(--sun);color:var(--ink);transform:rotate(-8deg) scale(1.08)}
.fsoc svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}.reveal.in{opacity:1;transform:none}
@media(max-width:900px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.hero h1{font-size:clamp(56px,17vw,84px)}.video-thumb{aspect-ratio:9/16;border-width:5px;border-radius:26px}.video-thumb::before{height:10px;top:6px}.brand-chip{font-size:16px;padding:11px 20px}.approach-list article{grid-template-columns:78px 1fr 28px!important}.approach-number{font-size:52px!important}.cta-band{border-radius:40px 40px 40px 16px;padding:22px}.hero-stamp{width:92px!important;height:92px!important}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.brand-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
.hero-caption{z-index:4}.hero-stamp,.hero-sparkle{z-index:4}
/* ---- v3.1 ---- */
html,body{overflow-x:clip}
.dd{position:absolute;z-index:3;pointer-events:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:bob 6s ease-in-out infinite}.dd:nth-of-type(even){animation-delay:-3s}
@keyframes bob{50%{translate:0 -9px}}
.photo-section,.contact-section{position:relative}
.swirl{position:absolute;left:-6%;top:0;width:112%;height:100%;z-index:0;pointer-events:none;overflow:visible}.swirl path{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.8}.contact-section .swirl path{opacity:.45}
.photo-section>:not(.swirl):not(.dd),.contact-section>:not(.swirl):not(.dd){position:relative;z-index:1}
/* hero phone */
.hero-visual{justify-content:flex-start}.hero-frame{width:min(72%,380px)}
.hero-phone-wrap{position:absolute;right:1%;bottom:2%;z-index:5;width:clamp(112px,12.5vw,160px);transform:rotate(6deg);animation:float 5.5s ease-in-out infinite}
@keyframes float{50%{transform:rotate(3deg) translateY(-14px)}}
.hero-phone{aspect-ratio:9/17;box-shadow:7px 9px 0 var(--sky)}
.phone-tag{display:block;text-align:center;font-size:22px;margin-top:12px;color:var(--plum);transform:rotate(-4deg)}
/* disclaimer */
.work-footnote{display:flex;gap:10px;align-items:center;justify-content:center;text-align:left;max-width:620px;margin:44px auto 0!important;font-size:13px!important;color:#4b463f!important;background:#ffffffb0;border:1px dashed var(--ink);border-radius:60px;padding:12px 22px}
.work-footnote .info{flex:none;width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
/* approach icons */
.approach-mark{width:44px;height:44px;display:grid;place-items:center}.approach-mark svg{width:44px;height:44px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.approach-list article:nth-child(1) .approach-mark svg{color:var(--tang);stroke:var(--tang)}.approach-list article:nth-child(2) .approach-mark svg{stroke:var(--plum)}.approach-list article:nth-child(3) .approach-mark svg{stroke:#fff}
/* what i make */
.make-board{margin-top:64px;padding:42px clamp(22px,4vw,56px) 46px;background:#fffdf7;border:2px solid var(--ink);border-radius:34px;box-shadow:9px 10px 0 var(--ink);position:relative;transform:rotate(-.6deg)}
.make-title{font:400 clamp(44px,6vw,76px)/1 var(--sig);margin:0 0 8px;color:var(--tang)}.make-sub{margin:20px 0 0;font-size:14px;color:#4b463f}
.make-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 14px}
.make-list li{padding:13px 22px;border:2px solid var(--ink);border-radius:50px;font-weight:700;font-size:clamp(15px,1.8vw,20px);transition:transform .2s}.make-list li:hover{transform:rotate(-3deg) scale(1.06)}
.make-list li:nth-child(1){background:var(--pink)}.make-list li:nth-child(2){background:var(--sky);transform:rotate(1.5deg)}.make-list li:nth-child(3){background:var(--lime)}.make-list li:nth-child(4){background:var(--sun);transform:rotate(-1.5deg)}.make-list li:nth-child(5){background:var(--lilac)}.make-list li:nth-child(6){background:#ffc9a8;transform:rotate(1deg)}
/* transcript + faq */
.transcript{margin-top:22px;max-width:760px}.transcript summary{cursor:pointer;font-weight:700;font-size:14px;display:inline-block;padding:8px 16px;border:1.5px solid var(--ink);border-radius:40px;background:#fff9}.transcript p{font-size:14px;line-height:1.75;margin:14px 0 0}
.faq{padding-top:20px;padding-bottom:90px;max-width:860px}.faq h2{font-size:clamp(40px,5vw,64px);margin:0 0 24px}.faq h2 em{color:var(--tang)}
.faq details{border:1.5px solid var(--ink);border-radius:22px;background:#fffdf7;margin-bottom:12px;padding:0 22px}.faq summary{cursor:pointer;font-weight:700;padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:24px;line-height:1;color:var(--tang)}.faq details[open] summary::after{content:"\2212"}.faq details p{margin:0 0 18px;font-size:15px;line-height:1.7}
@media(max-width:640px){.hero-visual{justify-content:flex-start}.hero-frame{width:min(74%,300px)}.hero-phone-wrap{right:-2%;bottom:0;width:104px}.phone-tag{font-size:17px}.dd{transform:scale(.7)}.work-footnote{border-radius:24px;font-size:12px!important}.make-board{box-shadow:6px 7px 0 var(--ink);padding:30px 20px}}
@media(prefers-reduced-motion:reduce){.dd,.hero-phone-wrap{animation:none}}