/* Concept: dark-first agency-style one-pager. Motion: loader count, char reveal, cursor-trail tiles, marquee, stacked cards, scramble hover, full-screen menu. */
:root{
  --bg:#0D1411; --surface:#141D18; --surface-2:#1C2822; --fg:#EEF2EE; --muted:#9FAEA6; --line:rgba(238,242,238,.16);
  --hl:#F2B632; --accent:#F2B632; --accent-ink:#14231D; --forest:#1E5B47; --mint:#BFE3D2;
  --f-display:'Black Han Sans','Noto Sans KR',sans-serif;
  --f-body:'IBM Plex Sans KR',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono','IBM Plex Sans KR',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#EDF1EC; --surface:#FFFFFF; --surface-2:#DFE7E0; --fg:#0F1F19; --muted:#4F5F58; --line:rgba(15,31,25,.18); --hl:#1E5B47;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#EDF1EC; --surface:#FFFFFF; --surface-2:#DFE7E0; --fg:#0F1F19; --muted:#4F5F58; --line:rgba(15,31,25,.18); --hl:#1E5B47;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.lock,html.is-loading{overflow:hidden}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:17px;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--hl);outline-offset:3px}
h1,h2,h3,p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
.wrap{width:100%;max-width:1360px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.h2{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,6vw,84px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.sec{padding-block:clamp(72px,11vw,160px)}
.sec__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(32px,5vw,64px)}
.sec__head .h2{max-width:14em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:1.5px solid var(--line);border-radius:999px;font-weight:500;font-size:15px;transition:background .3s,color .3s,border-color .3s}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn--solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--line);border-radius:50%;transition:background .3s,color .3s,border-color .3s}
.icon-btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.burger span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .4s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* header */
.edge{position:fixed;top:0;left:0;right:0;height:calc(110px + env(safe-area-inset-top,0px));z-index:40;pointer-events:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)}
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(14px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 14px max(20px,env(safe-area-inset-left,0px))}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:22px;line-height:1}
.logo i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-style:normal;font-size:20px}
.ctl{display:flex;align-items:center;gap:10px}
.ctl .btn{min-height:44px;padding:0 20px}

/* menu */
.menu{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;justify-content:flex-end;overflow:auto;background:var(--surface);visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .75s cubic-bezier(.76,0,.24,1),visibility 0s .75s;padding:calc(110px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.menu.open{visibility:visible;clip-path:inset(0);transition:clip-path .75s cubic-bezier(.76,0,.24,1),visibility 0s}
.menu__list{margin-bottom:40px}
.menu__a{display:flex;align-items:baseline;gap:20px;overflow:hidden;padding:4px 0;font-family:var(--f-display);font-size:clamp(44px,9vw,120px);line-height:1.12}
.menu__a .n{font-family:var(--f-mono);font-size:14px;color:var(--muted)}
.menu__a .t{display:inline-block;transform:translateY(110%);transition:transform .7s var(--ease),color .3s}
.menu.open .menu__a .t{transform:none;transition-delay:calc(.25s + var(--i)*.07s),0s}
.menu__a:hover .t{color:var(--hl)}
.menu__meta{display:flex;flex-wrap:wrap;gap:8px 32px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px}

/* loader */
.ld{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;justify-content:space-between;background:var(--bg);padding:calc(24px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));animation:ldfail .01s linear 7s forwards}
.has-motion .ld{display:flex}
.ld__top{font-family:var(--f-display);font-size:22px}
.ld__mid{overflow:hidden;font-family:var(--f-display);font-size:clamp(56px,13vw,200px);line-height:1.1}
.ld__bot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;color:var(--muted)}
.ld__count{font-family:var(--f-display);font-size:clamp(64px,12vw,160px);line-height:1;color:var(--fg)}
@keyframes ldfail{to{visibility:hidden}}

/* hero */
.hero{position:relative;overflow:hidden;padding-top:calc(150px + env(safe-area-inset-top,0px));padding-bottom:clamp(48px,7vw,96px)}
.hero .wrap{position:relative;z-index:1}
.pill{display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:0 18px;border:1.5px solid var(--line);border-radius:999px;font-family:var(--f-mono);font-size:13px;letter-spacing:.04em}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.hero h1{margin-top:28px;font-family:var(--f-display);font-weight:400;font-size:clamp(64px,14.5vw,210px);line-height:1.02;letter-spacing:-.02em}
.line{display:block;overflow:hidden;padding:.06em 0;margin:-.06em 0}
.ch{display:inline-block;will-change:transform}
.hero h1 em{font-style:normal;color:var(--hl)}
.hero__row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 40px;margin-top:clamp(32px,5vw,64px)}
.hero__p{max-width:30em;font-size:19px;color:var(--muted)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.trail{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.tile{position:absolute;left:0;top:0;display:flex;align-items:flex-end;width:clamp(84px,9vw,148px);aspect-ratio:3/4;padding:10px;border-radius:6px;font-weight:600;font-size:clamp(13px,1.1vw,16px);line-height:1.2;opacity:0;will-change:transform,opacity}
.t1{background:#F2B632;color:#14231D}
.t2{background:#1E5B47;color:#FFFFFF}
.t3{background:#BFE3D2;color:#14231D}
.t4{background:#EEF1EC;color:#14231D}

/* marquee */
.mq{overflow:hidden;padding:clamp(16px,2.6vw,36px) 0;border-block:1px solid var(--line)}
.mq__track{display:flex;width:max-content;animation:mq 38s linear infinite}
.mq__grp{display:flex;flex:none}
.mq__it{flex:none;padding-right:.45em;font-family:var(--f-display);font-size:clamp(56px,10vw,150px);line-height:1.1;white-space:nowrap}
.mq__it:nth-child(even){color:transparent;-webkit-text-stroke:1.5px var(--fg)}
.mq__it .sl{margin-left:.25em;color:var(--hl);-webkit-text-stroke:0;font-weight:400}
@keyframes mq{to{transform:translateX(-50%)}}

/* about */
.about__top{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px 64px}
.about__lbl{flex:0 0 200px}
.about__stmt{flex:1 1 520px;min-width:0;font-family:var(--f-display);font-size:clamp(28px,4.4vw,64px);line-height:1.32;letter-spacing:-.01em}
.about__stmt .w{display:inline-block}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 32px;margin-top:clamp(48px,7vw,96px)}
.fact{padding:20px 0 28px;border-top:1px solid var(--line)}
.fact dd{margin-top:10px;font-size:20px;line-height:1.5}

/* stacked cards */
.stack{display:flex;flex-direction:column;gap:20px}
.card{position:sticky;top:calc(96px + var(--i)*16px);display:flex;min-height:clamp(380px,62vh,520px);border-radius:14px;overflow:hidden;transform-origin:50% 0}
.c1{background:var(--accent);color:var(--accent-ink)}
.c2{background:var(--forest);color:#FFFFFF}
.c3{background:var(--mint);color:#14231D}
.c4{background:var(--fg);color:var(--bg)}
.card__in{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;gap:24px 40px;width:100%;padding:clamp(24px,3.6vw,48px)}
.card__main{display:flex;flex:1 1 320px;flex-direction:column;justify-content:space-between;gap:28px;min-width:0}
.card .eyebrow{color:inherit;opacity:.75}
.card__t{font-family:var(--f-display);font-weight:400;font-size:clamp(32px,5vw,72px);line-height:1.12;letter-spacing:-.01em}
.card__d{max-width:28em;margin-top:14px;font-size:18px;opacity:.9}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border:1.5px solid currentColor;border-radius:999px;font-family:var(--f-mono);font-size:13px}
.card__vis{display:grid;flex:0 1 320px;place-items:center;min-width:0}
.card__vis svg{width:100%;max-width:320px;height:auto}

/* strengths */
.rows{border-top:1px solid var(--line)}
.row{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}
.row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:translateY(101%);transition:transform .5s var(--ease)}
.row:hover::before,.row:focus-within::before{transform:none}
.row__in{display:grid;grid-template-columns:72px minmax(0,1.1fr) minmax(0,1.4fr) 36px;align-items:center;gap:16px 32px;padding:clamp(24px,3vw,40px) 0;transition:color .4s,padding .5s var(--ease)}
.row:hover .row__in{padding-left:20px;padding-right:20px;color:var(--accent-ink)}
.row__n{font-family:var(--f-mono);font-size:14px;opacity:.7}
.row__t{font-family:var(--f-display);font-weight:400;font-size:clamp(32px,4.6vw,64px);line-height:1.15}
.row__d{color:var(--muted);transition:color .4s}
.row:hover .row__d{color:inherit}
.row__a{display:grid;place-items:center}

/* process */
.proc__bar{position:relative;height:2px;margin-bottom:40px;background:var(--line)}
.proc__bar i{position:absolute;inset:0;background:var(--hl);transform-origin:0 50%}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px 32px}
.step__n{display:grid;place-items:center;width:52px;height:52px;margin-bottom:20px;border:1.5px solid var(--line);border-radius:50%;font-family:var(--f-mono);font-weight:500}
.step:last-child .step__n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.step h3{margin-bottom:8px;font-family:var(--f-display);font-weight:400;font-size:clamp(26px,2.6vw,36px);line-height:1.2}
.step p{color:var(--muted)}

/* contact */
.ct__big{margin-top:24px;font-family:var(--f-display);font-weight:400;font-size:clamp(40px,8.4vw,128px);line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
.ct__big em{font-style:normal;color:var(--hl)}
.ct__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 32px;margin-top:clamp(40px,6vw,80px)}
.ct__item{padding:20px 0 28px;border-top:1px solid var(--line)}
.ct__item dd{margin-top:10px;font-size:20px}

/* footer */
.ft{overflow:hidden;padding-block:clamp(40px,6vw,72px) 32px;border-top:1px solid var(--line)}
.ft__mark{margin-bottom:32px;font-family:var(--f-display);font-size:clamp(64px,17vw,260px);line-height:1;letter-spacing:-.03em;white-space:nowrap}
.ft__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;color:var(--muted);font-size:14px}

@media (max-width:860px){
  .card{position:relative;top:auto}
}
@media (max-width:760px){
  .row__in{grid-template-columns:48px minmax(0,1fr)}
  .row__d{grid-column:1/-1}
  .row__a{display:none}
}
@media (max-width:560px){
  .ctl .btn{display:none}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .mq__track,.dot{animation:none}
  .menu,.menu__a .t,.row::before,.row__in{transition:none}
}