@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

:root{font-family:'Inter','Noto Sans KR',sans-serif;color:#f5f5f3;background:#111214;font-synthesis:none;scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:2px solid #f4ac48;outline-offset:4px}
::selection{background:#efa846;color:#151515}
.container{width:min(100% - 48px,1120px);margin-inline:auto}
.skip-link{position:absolute;left:16px;top:-100px;z-index:30;padding:12px 18px;background:#f2a943;color:#111214;font-weight:700}
.skip-link:focus{top:16px}
.orange{color:#f2ab4d}

.site-header{position:absolute;inset:0 0 auto;z-index:10;border-bottom:1px solid #ffffff19}
.header-inner{height:76px;display:flex;align-items:center;gap:42px}
.brand{font-size:22px;font-weight:800;letter-spacing:-.07em;white-space:nowrap}
.brand span{font-weight:600}
.brand i{font-style:normal;color:#f2ab4d}
.site-header nav{display:flex;gap:34px;margin-left:auto}
.site-header nav a{font-size:13px;font-weight:600;color:#e7e6e2b3;transition:color .2s}
.site-header nav a:hover{color:#fff}
.header-cta{display:inline-flex;align-items:center;gap:17px;background:#f1aa49;color:#191714;border-radius:9px;padding:12px 18px;font-size:12px;font-weight:800;transition:background .2s,transform .2s}
.header-cta:hover,.primary-button:hover{background:#ffbb60;transform:translateY(-2px)}

.hero{position:relative;min-height:690px;height:min(760px,100svh);display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center;background:#171819}
.hero-image,.hero-shade{position:absolute;inset:0}
.hero-image{background-image:url('./hero-workspace.png');background-position:center center;background-size:cover;filter:saturate(.8)}
.hero-shade{background:linear-gradient(90deg,#0b0c0de0,#0b0c0d93 27%,#0b0c0d91 70%,#0b0c0de0),linear-gradient(0deg,#101113 0%,transparent 29%,#0a0b0d73 100%)}
.hero-content{position:relative;z-index:2;padding:112px 0 88px}
.eyebrow-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid #e8ab563e;border-radius:100px;padding:9px 15px;background:#efa84612;color:#f4b55f;font-size:10px;font-weight:800;letter-spacing:.16em}
.pulse{width:6px;height:6px;border-radius:50%;background:#f2ab4d;box-shadow:0 0 0 4px #f2ab4d24}
.hero h1{font-size:clamp(50px,6.4vw,88px);line-height:1.18;letter-spacing:-.082em;font-weight:800;margin:28px 0 23px;text-wrap:balance;text-shadow:0 3px 30px #0008}
.hero h1 span{color:#f2ab4d}
.hero-description{color:#c3c4c6;font-size:clamp(14px,1.45vw,17px);font-weight:400;line-height:1.95;letter-spacing:-.025em;margin:0 0 36px}
.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:29px;min-width:216px;border-radius:11px;background:#f1aa49;color:#1b1812;padding:18px 21px;font-size:14px;font-weight:800;box-shadow:0 12px 35px #0006;transition:background .2s,transform .2s}
.primary-button span{font-size:21px;line-height:0}
.hero-scroll{position:absolute;left:50%;bottom:27px;transform:translateX(-50%);z-index:2;color:#b8b9b84d;font-size:9px;font-weight:800;letter-spacing:.17em;white-space:nowrap}
.hero-scroll span{margin-left:8px}

.projects-section{padding:105px 0 110px;background:#111214}
.section-kicker{display:flex;align-items:center;gap:12px;color:#f0a947;font-size:10px;font-weight:800;letter-spacing:.25em}
.kicker-line{width:22px;height:1px;background:#f0a947}
.section-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:30px;margin-top:20px}
.section-title-row h2,.about-section h2{font-size:clamp(34px,4.3vw,54px);font-weight:800;letter-spacing:-.065em;line-height:1.3;margin:0}
.section-count{font-size:11px;color:#71767e;font-weight:800;letter-spacing:.12em;white-space:nowrap}
.section-description{font-size:15px;line-height:1.8;color:#8f939b;margin:15px 0 39px;letter-spacing:-.025em}
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:18px}
.project-card{min-height:302px;display:flex;flex-direction:column;padding:32px 33px 29px;border:1px solid #2c2e33;border-radius:17px;background:linear-gradient(150deg,#1d1f23,#1a1c20);transition:border-color .22s,background .22s,transform .22s,box-shadow .22s}
.project-card:hover{border-color:#8b6338;background:linear-gradient(150deg,#29241f,#1b1c20);transform:translateY(-4px);box-shadow:0 18px 45px #0003}
.card-top{display:flex;align-items:flex-start;justify-content:space-between}
.project-icon{font-size:31px;line-height:1}
.card-number{font-size:11px;font-weight:800;letter-spacing:.1em;color:#555961}
.card-meta{display:flex;align-items:center;gap:10px;margin-top:27px;min-height:24px}
.type-chip{border:1px solid #7c5a31;background:#f2ac4916;border-radius:6px;color:#ecaa55;font-size:10px;font-weight:800;letter-spacing:.08em;padding:4px 7px}
.card-subtitle{font-size:11px;color:#ba8a52;font-weight:700;letter-spacing:.01em}
.card-title{font-size:23px;line-height:1.35;font-weight:800;letter-spacing:-.055em;margin:16px 0 9px}
.card-description{font-size:14px;line-height:1.8;color:#9c9fa6;letter-spacing:-.03em;margin:0 0 25px;max-width:470px}
.card-bottom{margin-top:auto;border-top:1px solid #303238;padding-top:18px}
.card-action{font-size:12px;font-weight:700;color:#777b82}
.card-action:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#747981;margin-right:9px;vertical-align:2px}
.card-action--live{color:#f2ac4c}
.card-action--live:before{background:#f2ac4c}
.next-note{display:flex;align-items:center;gap:9px;color:#777b82;font-size:12px;margin:28px 0 0}
.next-note span{display:grid;place-items:center;width:21px;height:21px;border:1px solid #5f6269;border-radius:50%;font-size:15px;line-height:1}

.about-section{border-top:1px solid #25272b;background:#17191c;padding:100px 0 107px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:end}
.about-section h2{margin-top:20px}
.about-copy{padding-bottom:2px}
.about-copy p{color:#a7aab0;font-size:15px;line-height:2;letter-spacing:-.03em;margin:0 0 15px}
.about-copy p:last-child{margin:0}
.site-footer{border-top:1px solid #27292d;background:#111214}
.footer-inner{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:18px;color:#777b81;font-size:10px;font-weight:700;letter-spacing:.1em}
.footer-inner a{color:#cbccd0;transition:color .2s}
.footer-inner a:hover{color:#f2ab4d}

@media(max-width:700px){.container{width:min(100% - 36px,1120px)}.header-inner{height:68px;gap:15px}.brand{font-size:19px}.site-header nav{gap:18px}.site-header nav a{font-size:12px}.header-cta{display:none}.hero{min-height:655px;height:100svh}.hero-image{background-position:center center}.hero-shade{background:linear-gradient(90deg,#0b0c0dcf,#0b0c0d7a 40%,#0b0c0dcf),linear-gradient(0deg,#101113 0%,transparent 32%,#0a0b0d82 100%)}.hero-content{padding:100px 0 74px}.hero h1{font-size:clamp(45px,9.3vw,69px);margin:25px 0 22px}.hero-description{font-size:14px;line-height:1.85}.hero-description br{display:none}.primary-button{padding:16px 18px;min-width:200px}.projects-section{padding:73px 0 80px}.section-title-row{display:block}.section-title-row h2{font-size:38px}.section-count{display:block;margin-top:8px}.section-description{font-size:14px;margin-bottom:27px}.project-grid{gap:14px}.project-card{min-height:278px;padding:28px}.about-section{padding:74px 0 80px}.about-grid{grid-template-columns:1fr;gap:28px}.about-section h2{font-size:36px}.about-copy p{font-size:14px}.footer-inner{min-height:87px}.footer-inner>span:nth-child(2){display:none}}
@media(max-width:390px){.brand{font-size:17px}.site-header nav{gap:12px}.hero h1{font-size:43px}.hero-description{font-size:13px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}