@import "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css";:root{--cream:#fcf8f1;--orange:#f04f23;--orange-dark:#d8410f;--navy:#241640;--ink:#212121;--body-text:#505050;--muted:#777;--white:#fff;--line:#2121211a;--font:"Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif;--ease:cubic-bezier(.16, 1, .3, 1);--page-x:80px;--container:1280px;--inner-x:32px;--header-h:60px}@media (width<=1199px){:root{--page-x:40px}}@media (width<=900px){:root{--page-x:20px;--inner-x:0px}}*{box-sizing:border-box}html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}body{background:var(--cream);color:var(--body-text);font-family:var(--font);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;margin:0;overflow-x:clip}img{max-width:100%}a{color:inherit}button{font:inherit;cursor:pointer}:focus-visible{outline-offset:3px;border-radius:2px;outline:2px solid}.section{padding:140px var(--page-x);scroll-margin-top:var(--header-h);overflow-x:clip}@media (width<=900px){.section{padding:80px var(--page-x)}}.container{width:100%;max-width:var(--container);padding:0 var(--inner-x);margin:0 auto}.sec-head.center{text-align:center;margin-bottom:64px}.sec-head.split{justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;display:flex}.sec-eyebrow{letter-spacing:.02em;color:var(--muted);margin:0;font-size:13px}.projects .sec-eyebrow,.detail-next .sec-eyebrow{color:#fffc}.sec-title{color:var(--ink);margin:12px 0 0;font-size:clamp(28px,3.6vw,40px);font-weight:700;line-height:1.2}.sec-title.on-orange{color:var(--white)}.sec-title.dark{margin:0}.btn-outline{border:1px solid var(--orange);color:var(--orange);transition:background .25s var(--ease), color .25s var(--ease);background:0 0;border-radius:4px;flex:none;padding:16px 32px;font-size:15px;font-weight:500;text-decoration:none;display:inline-block}.btn-outline:hover{background:var(--orange);color:var(--white)}.circle-link{color:inherit;transition:gap .25s var(--ease);align-items:center;gap:10px;font-size:15px;font-weight:500;text-decoration:none;display:inline-flex}.circle-link:hover{gap:16px}.circle{border:1px solid;border-radius:50%;flex:none;justify-content:center;align-items:center;width:36px;height:36px;display:inline-flex}.progress{background:var(--orange);transform-origin:0;z-index:120;height:3px;position:fixed;inset:0 0 auto}.header{z-index:100;height:var(--header-h);padding:0 var(--page-x);color:var(--navy);transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);background:0 0;border-bottom:1px solid #0000;position:fixed;inset:0 0 auto}.header[data-dark=true]{color:var(--white)}.header[data-stuck=true]{background:var(--cream);color:var(--orange);border-bottom-color:var(--line)}.header .container{align-items:center;gap:40px;height:100%;display:flex}.logo{white-space:nowrap;color:inherit;font-size:20px;font-weight:800;line-height:1.2;text-decoration:none}.navbar{align-items:center;gap:28px;margin-right:auto;display:flex}.navbar a{white-space:nowrap;font-size:15px;font-weight:500;line-height:1.2;text-decoration:none;position:relative}.navbar a:after{content:"";transform-origin:0;height:2px;transition:transform .25s var(--ease);background:currentColor;position:absolute;bottom:-6px;left:0;right:0;transform:scaleX(0)}.navbar a:hover:after{transform:scaleX(1)}@media (width<=900px){.header .container{gap:12px}.navbar{scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:18px;overflow-x:auto}.navbar::-webkit-scrollbar{display:none}.navbar a{padding:13px 0;font-size:14px}.logo{font-size:16px}}.hero{text-align:center;height:100vh;min-height:600px;color:var(--navy);justify-content:center;align-items:center;padding:0 24px;display:flex;position:relative;overflow:hidden}.hero .hero-bg{background:radial-gradient(70% 60% at 88% 92%,#f04f2329,#0000 62%),radial-gradient(60% 50% at 6% 6%,#24164014,#0000 60%),linear-gradient(#fcf8f1 0%,#f7efe3 100%)}.hero .hero-grid{opacity:.1;background-image:linear-gradient(#24164080 1px,#0000 1px),linear-gradient(90deg,#24164080 1px,#0000 1px);-webkit-mask-image:radial-gradient(110% 90% at 20% 0,#000,#0000 72%);mask-image:radial-gradient(110% 90% at 20% 0,#000,#0000 72%)}.hero-bg{background:radial-gradient(60% 55% at 88% 108%,#f04f2342,#0000 62%),linear-gradient(#150d2b 0%,#241640 100%);position:absolute;inset:0}.hero-grid{opacity:.09;background-image:linear-gradient(#fff9 1px,#0000 1px),linear-gradient(90deg,#fff9 1px,#0000 1px);background-size:44px 44px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(120% 100% at 80% 0,#000,#0000 70%);mask-image:radial-gradient(120% 100% at 80% 0,#000,#0000 70%)}.hero .container{max-width:900px;padding:0;position:relative}.hero-kicker{letter-spacing:.22em;color:var(--orange);text-transform:uppercase;margin:0 0 22px;font-size:14px;font-weight:600}.hero .headline{color:var(--navy);word-break:keep-all;flex-direction:column;gap:8px;margin:0;font-size:clamp(34px,5vw,60px);font-weight:700;line-height:1.25;display:flex}.hero .headline b{color:var(--orange);font-weight:800}.hero .headline .row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.hero-scroll{color:var(--navy);animation:2s ease-in-out infinite bob;position:absolute;bottom:36px;left:50%}@keyframes bob{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,8px)}}.intro{text-align:center}.intro-lead{letter-spacing:.02em;color:var(--orange);margin:0;font-size:clamp(26px,3vw,34px);font-weight:400;line-height:1.2}.intro-list{max-width:760px;color:var(--body-text);flex-direction:column;gap:14px;margin:28px auto 0;padding:0;font-size:16px;line-height:1.7;list-style:none;display:flex}.intro-list b{color:var(--ink);font-weight:700}.intro .btn-outline{margin-top:40px}.skill-grid{grid-template-columns:repeat(5,1fr);justify-items:center;gap:clamp(16px,2.4vw,32px);display:grid}.skill{aspect-ratio:1;border:1px solid var(--line);background:var(--white);width:100%;max-width:186px;transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:24px;padding:24px;display:flex}.skill:hover{border-color:var(--orange);transform:translateY(-6px);box-shadow:0 14px 30px -18px #24164073}.skill img{object-fit:contain;width:48px;height:48px}.skill img.wide{width:100%;max-width:143px;height:56px}.skill span{color:var(--ink);text-align:center;text-transform:capitalize;font-size:clamp(13px,1.2vw,16px);font-weight:600;line-height:1.2}@media (width<=900px){.skill-grid{grid-template-columns:repeat(3,1fr);gap:16px}.skill{gap:16px;padding:16px}}@media (width<=520px){.skill-grid{grid-template-columns:repeat(2,1fr)}}.projects{background:var(--orange);color:var(--white);padding-bottom:100px}.projects .step{height:60px;margin:-140px calc(var(--page-x) * -1) 100px;background:var(--cream)}.projects .step span{background:var(--orange);width:50%;height:100%;display:block}@media (width<=900px){.projects .step{display:none}}.feature{align-items:center;gap:40px;margin-top:56px;display:flex}.feature.flip .f-body{order:2}.f-body{flex-direction:column;flex:1;align-items:flex-start;gap:0;min-width:0;display:flex}.f-no{letter-spacing:.12em;color:#ffffffa6;margin:0 0 12px;font-size:15px;font-weight:700}.f-title{background:var(--white);color:var(--orange);border-radius:4px;margin:0;padding:6px 14px;font-size:clamp(20px,2.4vw,30px);font-weight:700;line-height:1.3;display:inline-block}.f-bullets{color:#ffffffc7;margin:28px 0 0;padding-left:20px;font-size:16px;line-height:1.7;list-style:outside}.f-meta{color:#fff9;margin:10px 0 0;font-size:13px;line-height:1.5}.f-body .circle-link{margin-top:28px}.f-links{flex-wrap:wrap;gap:8px 24px;margin-top:20px;display:flex}.f-links a{color:#ffffffd9;text-underline-offset:3px;transition:opacity .2s var(--ease);align-items:center;gap:10px;font-size:13px;line-height:1.5;text-decoration:underline;display:inline-flex}.f-links a:hover{opacity:.7}.f-links img{filter:brightness(0)invert();flex:none;width:18px;height:18px}.f-links img.yt{filter:none;width:22px;height:22px}.f-media{flex:1;justify-content:center;align-items:center;min-width:0;min-height:380px;display:flex;position:relative}.f-disc{background:#00000024;border-radius:50%;width:300px;height:300px;position:absolute}.f-card{width:62%;min-width:240px;height:auto;transition:transform .35s var(--ease);border-radius:4px;position:absolute;box-shadow:0 14px 34px #24164047}.f-card.back{transform:rotate(-6deg)translate(-16%,-12%)}.f-card.front{transform:rotate(6deg)translate(16%,14%)}.f-media:hover .f-card.back{transform:rotate(-8deg)translate(-19%,-14%)}.f-media:hover .f-card.front{transform:rotate(8deg)translate(19%,16%)}@media (width<=900px){.feature,.feature.flip{flex-direction:column;align-items:stretch;gap:28px}.feature.flip .f-body{order:0}.f-media{min-height:300px}.f-card{width:72%}}.cases{background:var(--cream)}.case-grid{grid-template-columns:repeat(2,1fr);gap:24px;display:grid}.case{background:var(--white);border:1px solid var(--line);transition:transform .25s var(--ease), box-shadow .25s var(--ease);border-radius:4px;flex-direction:column;justify-content:space-between;gap:24px;padding:32px;display:flex}.case:hover{transform:translateY(-4px);box-shadow:0 16px 32px -20px #24164080}.case-body{color:var(--body-text);margin:0;font-size:15px;line-height:1.6}.case-foot{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding-top:20px;display:flex}.case-id{align-items:center;gap:12px;min-width:0;display:flex}.case-id img{object-fit:cover;border-radius:4px;flex:none;width:60px;height:60px}.case-name{color:var(--ink);margin:0;font-size:15px;font-weight:600}.case-date{color:var(--muted);margin:2px 0 0;font-size:13px}.case-more{border:1px solid var(--orange);width:36px;height:36px;color:var(--orange);transition:background .25s var(--ease), color .25s var(--ease);border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}.case-more:hover{background:var(--orange);color:var(--white)}@media (width<=900px){.case-grid{grid-template-columns:1fr}.sec-head.split{flex-direction:column;align-items:flex-start}}.contact{background:var(--navy);color:var(--white)}.contact .container{align-items:center;gap:40px;min-height:480px;display:flex}.contact-copy{flex:1;min-width:0}.contact h2{color:var(--cream);margin:0;font-size:clamp(48px,8vw,100px);font-weight:800;line-height:1}.contact-lines{color:#fcf8f199;flex-direction:column;gap:12px;margin-top:32px;font-size:clamp(16px,2vw,22px);font-weight:600;display:flex}.contact-lines p{margin:0}.contact-lines a{color:var(--white);text-decoration:none}.contact-lines a:hover{text-underline-offset:4px;text-decoration:underline}.contact-stack{flex:1;justify-content:center;align-items:center;min-height:340px;display:flex;position:relative}.cs-disc{aspect-ratio:1;background:var(--cream);border-radius:50%;width:min(460px,100%);position:absolute}.cs-art{width:min(320px,70%);height:auto;position:relative}.to-top{z-index:50;background:var(--white);width:52px;height:52px;color:var(--navy);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s var(--ease), transform .25s var(--ease);border:0;border-radius:50%;justify-content:center;align-items:center;display:flex;position:fixed;bottom:24px;right:24px;transform:translateY(8px);box-shadow:0 4px 16px #2416402e}.to-top[data-show=true]{opacity:1;pointer-events:auto;transform:none}.to-top[data-show=true]:hover{transform:translateY(-3px)}@media (width<=900px){.contact .container{flex-direction:column;align-items:flex-start;padding-top:20px}.contact-stack{width:100%}}.footer{background:var(--orange);color:var(--white);padding:0 var(--page-x);scroll-margin-top:var(--header-h)}.footer .container{justify-content:space-between;align-items:center;gap:24px;min-height:120px;display:flex}.foot-lines{font-size:13px;line-height:1.7}.foot-lines a{color:var(--white);text-decoration:underline}.detail-head{padding-top:calc(var(--header-h) + 120px);color:var(--white);padding-bottom:100px;position:relative;overflow:hidden}.detail-head .container{position:relative}.back{color:var(--white);transition:gap .25s var(--ease);align-items:center;gap:10px;margin-bottom:40px;font-size:15px;font-weight:500;text-decoration:none;display:inline-flex}.back:hover{gap:16px}.back .circle svg{transform:rotate(180deg)}.detail-title{max-width:22ch;color:var(--white);margin:0 0 20px;font-size:clamp(30px,4.4vw,48px);font-weight:800;line-height:1.25}.detail-meta{color:#ffffffb3;margin:0;font-size:14px}.detail-bullets{color:#ffffffc7;margin:20px 0 0;padding-left:20px;font-size:16px;line-height:1.8;list-style:outside}.detail-body{color:#ffffffc7;max-width:78ch;margin:20px 0 0;font-size:16px;line-height:1.8}.detail-links{margin-top:28px}.slides{background:var(--cream);padding:0;overflow-x:clip}.slides .container{max-width:1440px;padding:0;display:block}.slide{box-shadow:none;background:0 0;border:0;border-radius:0;margin:0}.slide img{width:100%;height:auto;margin-bottom:-1px;display:block}.detail-next{background:var(--navy);color:var(--white)}.detail-next .container{flex-direction:column;gap:12px;display:flex}.next-link{width:max-content;max-width:100%;color:var(--white);transition:opacity .2s var(--ease);font-size:clamp(24px,2.8vw,32px);font-weight:700;text-decoration:none}.next-link:hover{opacity:.7;text-underline-offset:6px;text-decoration:underline}.detail-empty{min-height:60vh;padding-top:calc(var(--header-h) + 100px);color:var(--orange);align-content:center;gap:24px;display:grid}.link-buttons{flex-wrap:wrap;gap:10px;margin-top:32px;display:flex}.link-buttons a{color:var(--white);transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);border:1px solid #ffffff47;border-radius:999px;align-items:center;gap:10px;padding:12px 18px;font-size:14px;font-weight:500;text-decoration:none;display:inline-flex}.link-buttons a:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-2px)}.link-buttons img{filter:brightness(0)invert();flex:none;width:18px;height:18px}.link-buttons img.yt{filter:none;width:20px;height:20px}.link-buttons a:hover img.yt{filter:brightness(0)invert()}
