:root{--y:#FDB813;--b:#3EC6F0;--p:#EC1E79;--g:#7BC74D;--v:#8B3FD9;--ink:#141210;--paper:#F7F1E5}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:'Space Grotesk',sans-serif;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;z-index:50;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E")}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.hand{font-family:Caveat;font-size:28px;color:var(--p)}
em{font-family:Fraunces;font-style:italic;font-weight:400}

/* nav */
nav{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:3px solid var(--ink)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:10px;font-family:'Archivo Black';font-size:24px;text-decoration:none}
.logo img{width:40px}
nav ul{display:flex;gap:28px;list-style:none;font-weight:700;align-items:center}
nav ul a{text-decoration:none;padding:4px 6px}
nav ul a:hover{background:var(--y)}
.btn{display:inline-block;font:inherit;font-weight:700;padding:15px 28px;border:3px solid var(--ink);background:var(--p);color:#fff;text-decoration:none;border-radius:999px;box-shadow:6px 6px 0 var(--ink);transition:.15s;cursor:pointer}
.btn:hover{transform:translate(3px,3px) rotate(-1deg);box-shadow:3px 3px 0 var(--ink)}
.btn.alt{background:#fff;color:var(--ink)}
.btn.sm{padding:9px 18px;box-shadow:4px 4px 0 var(--ink)}

/* hero */
.hero{position:relative;padding:90px 0 110px;text-align:center;overflow:hidden}
.blob{position:absolute;opacity:.9;mix-blend-mode:multiply;animation:float 14s ease-in-out infinite;z-index:0}
.blob.a{width:360px;left:-70px;top:10px;fill:var(--y)}
.blob.b{width:280px;right:-50px;top:40px;fill:var(--b);animation-delay:-4s}
.blob.c{width:220px;left:14%;bottom:-60px;fill:var(--p);animation-delay:-8s}
.blob.d{width:170px;right:18%;bottom:10px;fill:var(--g);animation-delay:-2s}
@keyframes float{50%{transform:translate(18px,-22px) rotate(8deg) scale(1.05)}}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-family:'Archivo Black';font-size:clamp(48px,9vw,128px);line-height:.95;letter-spacing:-2px;margin-top:14px}
.hero h1 .hl{background:var(--y);border:3px solid var(--ink);padding:0 14px;display:inline-block;transform:rotate(-2deg);box-shadow:6px 6px 0 var(--ink)}
.hero h1 em{font-size:1.05em;letter-spacing:-1px}
.u{position:relative;display:inline-block}
.u svg{position:absolute;left:-2%;bottom:-10px;width:104%;height:30px;stroke:var(--p);stroke-width:8;fill:none;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.6s .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero p{max-width:580px;margin:34px auto 38px;font-size:20px;line-height:1.55}
.cta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.sticker{position:absolute;z-index:3;border:3px solid var(--ink);font-family:'Archivo Black';display:grid;place-items:center;text-align:center}
.s1{right:7%;top:40px;width:140px;height:140px;border-radius:50%;background:var(--b);font-size:15px;animation:spin 18s linear infinite}
.s2{left:6%;bottom:40px;padding:10px 18px;background:var(--g);transform:rotate(-7deg);font-size:17px}
@keyframes spin{to{transform:rotate(360deg)}}

.marquee{background:var(--ink);color:var(--y);overflow:hidden;border-block:3px solid var(--ink);font-family:'Archivo Black';font-size:28px;white-space:nowrap;transform:rotate(-1.2deg);margin:0 -10px}
.marquee div{display:inline-block;padding:16px 0;animation:mq 24s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}

section{padding:110px 0;position:relative}
h2{font-family:'Archivo Black';font-size:clamp(38px,5.5vw,72px);line-height:1;letter-spacing:-1px;margin:6px 0 50px}
h2 em{font-size:1.06em}

/* services */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.card{border:3px solid var(--ink);border-radius:26px;padding:30px;box-shadow:8px 8px 0 var(--ink);transition:.25s;position:relative;overflow:hidden}
.card:hover{transform:rotate(-1.5deg) translateY(-6px)}
.card .dot{width:64px;height:64px;border:3px solid var(--ink);border-radius:46% 54% 60% 40%/50% 40% 60% 50%;background:#fff;transition:.5s;margin-bottom:22px}
.card:hover .dot{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;transform:scale(1.15) rotate(30deg)}
.card .n{position:absolute;right:22px;top:16px;font-family:'Archivo Black';font-size:44px;opacity:.25}
.card h3{font-family:Fraunces;font-weight:800;font-size:28px;margin-bottom:10px;line-height:1.1}
.card p{line-height:1.55}
.c1{background:var(--y)}.c2{background:var(--b)}.c3{background:var(--p);color:#fff}.c4{background:var(--g)}

/* about */
.about{background:var(--ink);color:var(--paper);border-block:3px solid var(--ink)}
.about .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center}
.about p{font-family:Fraunces;font-size:21px;line-height:1.65;margin-bottom:18px}
.frame{position:relative;aspect-ratio:4/5;border-radius:220px 220px 26px 26px;border:3px solid var(--paper);background:conic-gradient(from 200deg,var(--y),var(--p),var(--v),var(--b),var(--g),var(--y));display:grid;place-items:center;animation:hue 12s linear infinite}
.frame img{width:52%;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.stat{border:3px solid var(--paper);border-radius:18px;padding:14px 20px;font-weight:700}
.stat b{display:block;font-family:'Archivo Black';font-size:30px;color:var(--y)}

/* reviews */
.reviews{columns:3 300px;column-gap:26px}
.rv{break-inside:avoid;margin-bottom:28px;padding:30px;background:#fff;border:3px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 var(--ink);position:relative}
.rv:nth-child(odd){transform:rotate(-1deg)}.rv:nth-child(even){transform:rotate(1deg)}
.rv::before{content:"“";font-family:Fraunces;font-weight:800;font-size:90px;position:absolute;top:-38px;left:18px;color:var(--p)}
.rv p{font-family:Fraunces;font-style:italic;font-size:18px;line-height:1.55;margin-top:10px}
.rv b{display:block;margin-top:14px;font-family:Caveat;font-size:28px}
.rv:nth-child(1) b{color:var(--p)}.rv:nth-child(2) b{color:var(--b)}.rv:nth-child(3) b{color:var(--g)}.rv:nth-child(4) b{color:var(--v)}.rv:nth-child(5) b{color:#d99a00}.rv:nth-child(6) b{color:var(--p)}

/* contact */
.contact{background:var(--y);border-top:3px solid var(--ink);overflow:hidden}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;position:relative;z-index:2}
.big{font-family:Fraunces;font-size:clamp(26px,3.2vw,40px);line-height:1.3;margin-bottom:12px}
.big a{text-decoration-color:var(--p);text-decoration-thickness:4px}
form{display:grid;gap:14px;background:#fff;border:3px solid var(--ink);border-radius:26px;padding:28px;box-shadow:10px 10px 0 var(--ink)}
input,textarea,select{font:inherit;padding:14px 16px;border:3px solid var(--ink);border-radius:14px;background:var(--paper);outline:none}
input:focus,textarea:focus,select:focus{background:#fff;border-color:var(--p)}
.contact .blob{width:320px;right:-80px;bottom:-90px;fill:var(--p);opacity:.6}

footer{background:var(--ink);color:var(--paper);padding:30px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

#cur{position:fixed;width:24px;height:24px;border-radius:50%;background:var(--p);border:2px solid var(--ink);mix-blend-mode:multiply;pointer-events:none;z-index:60;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .4s}
@media(hover:none){#cur{display:none}}
@media(max-width:820px){
  nav ul li:not(:last-child){display:none}
  .hero{padding:60px 0 100px}.sticker.s1{width:96px;height:96px;font-size:11px;right:4%;top:8px}.s2{font-size:13px;left:4%;bottom:22px}
  .blob.a{width:200px}.blob.b{width:150px}.blob.c{width:140px}.blob.d{width:100px}
  .about .wrap,.contact .wrap{grid-template-columns:1fr}.frame{max-width:320px;margin:0 auto}
  .marquee{font-size:20px}
}

/* shared extras */
.pf{background:#fff;border:3px solid var(--ink);border-radius:26px;padding:10px;box-shadow:10px 10px 0 var(--ink);min-height:420px}
.news{background:var(--b);border-block:3px solid var(--ink);padding:60px 0}
.news .wrap{display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.news h3{font-family:'Archivo Black';font-size:clamp(26px,3.5vw,40px);line-height:1.05}
.doc{padding:80px 0 110px}
.doc .wrap{max-width:820px}
.doc h1{font-family:'Archivo Black';font-size:clamp(40px,6vw,72px);line-height:1;margin:8px 0 14px}
.doc .upd{opacity:.7;margin-bottom:40px}
.doc h2{font-family:Fraunces;font-weight:800;font-size:28px;margin:40px 0 12px;letter-spacing:0}
.doc p,.doc li{font-size:17px;line-height:1.7;margin-bottom:12px}
.doc ul{padding-left:22px}
.doc .box{background:#fff;border:3px solid var(--ink);border-radius:22px;padding:24px;box-shadow:6px 6px 0 var(--ink);margin-top:30px}
footer a{text-decoration:none}footer a:hover{text-decoration:underline}

/* Korean */
html[lang=ko] body{font-family:'Pretendard','Noto Sans KR','Space Grotesk',sans-serif;word-break:keep-all}
html[lang=ko] .hero h1,html[lang=ko] h2{font-family:'Black Han Sans','Archivo Black',sans-serif;letter-spacing:0;font-weight:400}
html[lang=ko] em,html[lang=ko] .card h3,html[lang=ko] .about p,html[lang=ko] .rv p,html[lang=ko] .big{font-family:'Gowun Batang',Fraunces,serif}
html[lang=ko] .hand{font-family:'Nanum Pen Script',Caveat,cursive;font-size:32px}
html[lang=ko] .hero h1{line-height:1.2}

/* more services chips + faq + newsletter */
.more{margin-top:56px}
.more h3{font-family:Fraunces;font-weight:800;font-size:26px;margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chips span{border:3px solid var(--ink);border-radius:999px;padding:9px 18px;font-weight:700;background:#fff;box-shadow:3px 3px 0 var(--ink)}
.chips span:nth-child(5n+1){background:var(--y)}.chips span:nth-child(5n+2){background:var(--b)}.chips span:nth-child(5n+4){background:var(--g)}
.faq details{border:3px solid var(--ink);border-radius:20px;background:#fff;margin-bottom:16px;box-shadow:5px 5px 0 var(--ink);overflow:hidden}
.faq summary{cursor:pointer;padding:20px 24px;font-family:Fraunces;font-weight:800;font-size:21px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-family:'Archivo Black';font-size:26px;line-height:1;color:var(--p)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 24px 22px;font-size:17px;line-height:1.65}
.news .tf{background:#fff;border:3px solid var(--ink);border-radius:22px;padding:14px;box-shadow:6px 6px 0 var(--ink);min-width:min(420px,100%)}
.social{display:inline-flex;gap:10px;margin-left:6px}
.subf{display:flex;gap:10px;flex-wrap:wrap}
.subf input{flex:1 1 220px;font:inherit;padding:14px 16px;border:3px solid var(--ink);border-radius:999px;background:#fff;outline:none}
.subf input:focus{border-color:var(--p)}
.subf .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.submsg{margin-top:12px;font-weight:700;min-height:1.4em}