@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
:root{--bg:#f4f3ef;--ink:#11110f;--muted:#696760;--line:rgba(17,17,15,.16);--dark:#11110f;--light:#f4f3ef}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,'Pretendard',sans-serif;overflow-x:hidden}
a{color:inherit}
.site-header{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:24px 30px;mix-blend-mode:difference;color:#fff}
.brand{font-weight:800;text-decoration:none}.nav{display:flex;gap:28px}.nav a{text-decoration:none;font-size:11px}
.section{position:relative}.section-pad{padding:130px 32px}.eyebrow{margin:0 0 32px;font-size:11px;letter-spacing:.12em;font-weight:800}
.hero{min-height:100vh;padding:125px 32px 42px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.hero-copy{position:relative;z-index:5;max-width:60vw}.hero h1{margin:0;font-size:clamp(72px,8.3vw,140px);line-height:.88;letter-spacing:-.07em;font-weight:800}
.hero-kicker{margin:34px 0 0;font-family:'Pretendard',sans-serif;font-size:clamp(16px,1.55vw,24px);line-height:1.55;letter-spacing:-.025em}
.hero-system{position:absolute;right:1.5vw;bottom:2vh;width:min(56vw,880px);aspect-ratio:1.62/1}
.hero-svg{width:100%;height:100%}.hero-lines line{stroke:var(--ink);stroke-width:1.5;opacity:.35;stroke-dasharray:520;stroke-dashoffset:520}
.hero-nodes{fill:var(--ink)}.hero-nodes .outline{fill:none;stroke:var(--ink);stroke-width:2}.hero-nodes rect,.hero-nodes polygon,.hero-nodes path{fill:none;stroke:var(--ink);stroke-width:2}
.hero-label{position:absolute;font-size:11px;letter-spacing:.08em;background:var(--bg);padding:4px 6px}.label-brand{left:13%;top:13%}.label-content{right:5%;top:14%}.label-space{left:12%;bottom:12%}.label-tech{right:2%;bottom:12%}.label-people{left:47%;bottom:-1%}
.hero-center{position:absolute;left:51%;top:50%;transform:translate(-50%,-50%);color:var(--bg);font-weight:800;font-size:18px;z-index:2}
.hero-link{position:absolute;left:32px;bottom:38px;z-index:6;font-size:12px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}.scroll-cue{position:absolute;right:32px;bottom:38px;font-size:10px}
.section-heading,.why-copy{display:grid;grid-template-columns:minmax(150px,.5fr) 1.5fr;gap:40px;align-items:start;margin-bottom:80px}
.section-heading h2,.why-copy h2{margin:0;font-size:clamp(52px,6.8vw,108px);line-height:.96;letter-spacing:-.065em;font-weight:800}
.service-list{border-top:1px solid var(--ink)}.service-row{display:grid;grid-template-columns:70px minmax(300px,1fr) 1fr;gap:20px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}
.service-row h3{margin:0;font-size:clamp(28px,3.6vw,56px)}.service-row p{margin:0;color:var(--muted);font-family:'Pretendard',sans-serif;font-size:15px;line-height:1.75}
.section-dark{background:var(--dark);color:var(--light)}.why-copy h2 span{display:block}.why-copy h2 span+span{margin-top:.28em}
.structure-demo{display:grid;grid-template-columns:1fr 60px 1fr;gap:20px;align-items:center}.demo-label{font-size:10px;opacity:.6}
.chaos-stage,.order-stage{position:relative;min-height:430px;border:1px solid rgba(244,243,239,.22);overflow:hidden}.chaos-stage svg{position:absolute;inset:0;width:100%;height:100%}.chaos-stage path{fill:none;stroke:rgba(244,243,239,.35)}
.client-chip,.partner-chip{position:absolute;border:1px solid rgba(244,243,239,.65);padding:9px 12px;font-size:10px;background:var(--dark);z-index:2}
.client-chip{top:26px;left:50%;transform:translateX(-50%)}.p1{left:8%;top:34%}.p2{right:8%;top:28%}.p3{left:18%;bottom:10%}.p4{right:10%;bottom:12%}.p5{left:43%;bottom:3%}
.structure-arrow{text-align:center;font-size:30px}.order-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px}
.flow-box{border:1px solid rgba(244,243,239,.75);padding:16px 30px;text-align:center;min-width:210px}.pride-box{background:var(--light);color:var(--dark);font-weight:700}.flow-line{height:50px;width:1px;background:rgba(244,243,239,.55)}
.partner-grid{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.partner-grid div{padding:18px 10px;text-align:center;font-size:10px;border:1px solid rgba(244,243,239,.35)}
.section-statement{
  margin:110px 0 0 auto;
  max-width:880px;
  font-family:'Pretendard',sans-serif;
  font-size:clamp(24px,2.7vw,42px);
  line-height:1.55;
  letter-spacing:-.035em;
  font-weight:500;
  text-align:right;
}
.process{position:relative;border-top:1px solid var(--ink)}.process-line{position:absolute;left:28px;top:0;bottom:0;width:1px;background:var(--ink);transform-origin:top;transform:scaleY(0)}
.process-step{display:grid;grid-template-columns:60px .8fr 1.2fr;gap:20px;padding:34px 0;border-bottom:1px solid var(--line)}.process-step h3{margin:0;font-size:clamp(30px,4.7vw,72px)}.process-step p{font-family:'Pretendard',sans-serif;color:var(--muted);font-size:15px;line-height:1.75}
.difference{padding-top:190px;padding-bottom:210px}.difference-stack{display:flex;flex-direction:column;gap:70px;max-width:100%;margin-top:50px}.difference-line{display:flex;align-items:center;gap:24px;flex-wrap:wrap;max-width:92%}.difference-line.second{justify-content:flex-end;align-self:flex-end;max-width:88%}
.difference-line span{font-size:clamp(52px,8vw,126px);line-height:.9;letter-spacing:-.075em;font-weight:800}.difference-line b{font-size:clamp(28px,3.2vw,50px)}
.difference-copy{
  margin:110px 0 0 auto;
  max-width:620px;
  font-family:'Pretendard',sans-serif;
  font-size:clamp(20px,2.15vw,34px);
  line-height:1.6;
  letter-spacing:-.035em;
  text-align:left;
}
.project-grid{display:grid;gap:28px}.project-visual{min-height:500px;display:flex;align-items:flex-end;padding:28px}.visual-one{background:linear-gradient(135deg,#d8d3c7,#8e9387 55%,#3b443f);color:#fff}.visual-two{background:linear-gradient(115deg,#101010,#4c4c4c 45%,#c7c3ba);color:#fff;min-height:360px}
.project-meta{display:flex;justify-content:space-between;border-top:1px solid var(--ink);padding-top:16px}.project-meta h3{margin:0}.project-meta p{margin:5px 0;color:var(--muted)}
.brand-statement{min-height:88vh;padding:8vw 3vw;display:flex;flex-direction:column;justify-content:center}.brand-statement p{margin:0;font-size:clamp(58px,9.7vw,158px);line-height:.86;font-weight:800}.brand-statement p:last-child{text-align:right}
.contact h2{
  margin:70px 0 120px;
  max-width:1450px;
  font-size:clamp(48px,7vw,108px);
  line-height:1.04;
  letter-spacing:-.055em;
}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:28px 34px;max-width:1180px}
.field{display:flex;flex-direction:column;gap:10px}.field-full{grid-column:1/-1}.field label{font-size:10px;letter-spacing:.12em;color:#d8d4ca}
.field input,.field select,.field textarea{width:100%;border:0;border-bottom:1px solid rgba(244,243,239,.35);background:transparent;color:var(--light);padding:12px 0 14px;font-family:'Pretendard',sans-serif;font-size:18px;outline:none}
.form-actions{display:flex;justify-content:space-between;align-items:center;margin-top:12px}.form-actions button{background:var(--light);color:var(--dark);border:0;padding:16px 22px;font-weight:700}
.form-actions a{color:var(--light);text-decoration:none;border-bottom:1px solid rgba(244,243,239,.45)}footer{margin-top:140px;padding-top:20px;border-top:1px solid rgba(244,243,239,.32);display:flex;justify-content:space-between;font-size:10px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal.is-visible{opacity:1;transform:none}
@media(max-width:900px){.site-header{padding:18px 20px}.nav{gap:14px}.nav a:nth-child(2){display:none}.section-pad{padding:100px 20px}.hero{padding:105px 20px 34px}.hero-copy{max-width:100%}.hero-system{width:100vw;right:-20vw;bottom:7vh;opacity:.6}.section-heading,.why-copy{grid-template-columns:1fr}.service-row{grid-template-columns:45px 1fr}.service-row p{grid-column:2}.structure-demo{grid-template-columns:1fr}.structure-arrow{transform:rotate(90deg)}.process-step{grid-template-columns:45px 1fr}.process-step p{grid-column:2}.difference-line,.difference-line.second{justify-content:flex-end;align-self:flex-end;max-width:88%}.contact-form{grid-template-columns:1fr}.field-full{grid-column:auto}.form-actions,footer{flex-direction:column;align-items:flex-start;gap:16px}}

@media(max-width:900px){
  .contact h2{margin:48px 0 80px;font-size:clamp(44px,13vw,78px);line-height:1.08}
  .section-statement{margin-top:70px;font-size:clamp(22px,6vw,32px);line-height:1.55;text-align:left}
  .difference-stack{gap:34px;margin-top:34px}
  .difference-copy{margin-top:70px;font-size:clamp(20px,5.5vw,28px);text-align:left}
}

/* V4 */
.about-section{padding-top:160px;padding-bottom:160px}
.about-grid{display:grid;grid-template-columns:minmax(150px,.5fr) 1.5fr;gap:40px;align-items:start}
.about-content{max-width:1080px}
.about-content h2{
  margin:0 0 70px;
  font-family:'Pretendard',sans-serif;
  font-size:clamp(46px,6vw,92px);
  line-height:1.08;
  letter-spacing:-.055em;
  font-weight:700
}
.about-lead{
  margin:0 0 28px;
  max-width:780px;
  font-family:'Pretendard',sans-serif;
  font-size:clamp(22px,2.2vw,34px);
  line-height:1.55;
  letter-spacing:-.035em;
  font-weight:500
}
.about-copy{
  margin:0;
  max-width:680px;
  font-family:'Pretendard',sans-serif;
  font-size:16px;
  line-height:1.9;
  color:var(--muted)
}
.about-philosophy{
  margin:80px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:15px
}
.project-visual{position:relative;overflow:hidden}
.project-badge{
  position:absolute;right:24px;top:24px;z-index:2;
  border:1px solid currentColor;padding:8px 10px;
  font-size:10px;letter-spacing:.08em
}
.project-desc{
  max-width:720px;
  margin-top:18px !important;
  font-family:'Pretendard',sans-serif;
  font-size:15px !important;
  line-height:1.8
}
.visual-three{
  min-height:390px;
  color:#fff;
  background:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.15),transparent 18%),
    linear-gradient(125deg,#20201e,#66655f 58%,#b8b3a8)
}
.hidden-field{display:none}
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:18px}
  .about-content h2{margin-bottom:45px}
  .about-philosophy{margin-top:55px;font-size:13px;line-height:1.6}
}