/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  --stage:   #0E1013;
  --panel:   #17191F;
  --panel-2: #1D2027;
  --line:    #2B2F39;
  --ink:     #ECEDEF;
  --mute:    #90959F;
  --mute-2:  #5C6270;

  --spec-1:  #33C5DE; /* cyan */
  --spec-2:  #8C6BFF; /* violet */
  --spec-3:  #FF4FA0; /* magenta */
  --amber:   #E7A64A;

  --spectrum: linear-gradient(90deg, var(--spec-1), var(--spec-2) 55%, var(--spec-3));

  --display: "Archivo", "Arial Narrow", sans-serif;
  --body:    "IBM Plex Sans", "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", sans-serif;
  --mono:    "IBM Plex Mono", "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", monospace;

  --max: 1280px;
  --edge: clamp(20px, 4vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--stage);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
.mono{ font-family:var(--mono); letter-spacing:0.04em; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--edge);
  mix-blend-mode:normal;
  background:transparent; backdrop-filter:none;
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(14,16,19,0.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.wordmark{ display:flex; align-items:center; gap:12px; }
.wordmark-logo{ height:36px; width:auto; display:block; }
.wordmark-tag{ font-size:10.5px; color:var(--mute); letter-spacing:0.1em; white-space:nowrap; }

.site-nav{ display:flex; gap:32px; }
.site-nav a{
  font-size:13px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--ink); opacity:0.78; position:relative; padding-bottom:4px;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--spectrum); transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease;
}
.site-nav a:hover{ opacity:1; }
.site-nav a:hover::after{ transform:scaleX(1); }

.lang-switch{ position:relative; }
.lang-current{
  display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,0.05); border:1px solid var(--line);
  color:var(--ink); padding:8px 12px; border-radius:2px;
  font-size:12px; cursor:pointer; backdrop-filter:blur(6px);
}
.lang-current svg{ transition:transform .2s ease; }
.lang-current[aria-expanded="true"] svg{ transform:rotate(180deg); }
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0;
  list-style:none; margin:0; padding:6px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:2px;
  min-width:150px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.lang-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-menu li{
  display:flex; justify-content:space-between; gap:16px;
  padding:9px 10px; font-size:13px; cursor:pointer; border-radius:2px;
  color:var(--ink);
}
.lang-menu li:hover{ background:rgba(255,255,255,0.06); }
.lang-menu li.active{ color:var(--spec-1); }
.lang-native{ color:var(--mute); font-size:11px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; height:100svh; min-height:560px; overflow:hidden;
  display:flex; align-items:flex-end;
}
.hero-frame{ position:absolute; inset:0; }
.hero-img{
  position:absolute; inset:0; background-size:cover; background-position:center;
}
.hero-img-a{ opacity:1; }
.hero-img-b{ opacity:0; transition:opacity 4.5s ease-in-out; }
.hero-img-b.show{ opacity:1; }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,11,13,0.55) 0%, rgba(10,11,13,0.08) 30%, rgba(10,11,13,0.15) 60%, rgba(10,11,13,0.88) 100%);
}

.viewfinder{ position:absolute; top:106px; left:18px; right:18px; bottom:18px; pointer-events:none; }
.vf-corner{ position:absolute; width:22px; height:22px; opacity:0.85; }
.vf-tl{ top:0; left:0; border-top:1.5px solid var(--ink); border-left:1.5px solid var(--ink); }
.vf-tr{ top:0; right:0; border-top:1.5px solid var(--ink); border-right:1.5px solid var(--ink); }
.vf-bl{ bottom:0; left:0; border-bottom:1.5px solid var(--ink); border-left:1.5px solid var(--ink); }
.vf-br{ bottom:0; right:0; border-bottom:1.5px solid var(--ink); border-right:1.5px solid var(--ink); }
.vf-readout{
  position:absolute; font-size:11px; color:var(--ink); opacity:0.8;
  text-transform:uppercase;
}
.vf-readout-tl{ top:14px; left:32px; }
.vf-readout-tl::before{ content:"● "; color:var(--spec-3); }
.vf-readout-tr{ top:14px; right:32px; transition:opacity .8s ease; }

.hero-content{
  position:relative; z-index:2; padding:0 var(--edge) 72px;
  max-width:900px;
}
.eyebrow{ font-size:11.5px; color:var(--spec-1); margin-bottom:18px; text-transform:uppercase; }
.hero-title{
  font-weight:800; font-size:clamp(34px, 6.4vw, 76px); line-height:1.03;
  margin-bottom:22px; text-wrap:balance;
}
.hero-sub{
  font-size:clamp(14px, 1.6vw, 17px); color:var(--ink); opacity:0.86;
  max-width:560px; margin-bottom:34px; line-height:1.55;
}
.scroll-cue{ display:inline-flex; align-items:center; gap:10px; }
.scroll-cue .mono{ font-size:11px; letter-spacing:0.12em; color:var(--ink); }
.scroll-line{ width:36px; height:1px; background:var(--spectrum); position:relative; overflow:hidden; }

/* ==========================================================================
   SHARED SECTION LAYOUT
   ========================================================================== */
section{ padding:120px var(--edge); max-width:var(--max); margin:0 auto; }
.section-head{ margin-bottom:56px; display:flex; align-items:baseline; gap:24px; flex-wrap:wrap; }
.section-eyebrow{ font-size:11.5px; color:var(--spec-1); text-transform:uppercase; }
.section-head h2{ font-size:clamp(26px, 3.4vw, 40px); font-weight:700; }

/* ==========================================================================
   STATEMENT
   ========================================================================== */
.statement{ padding-top:110px; padding-bottom:70px; }
.statement-eyebrow{ font-size:11.5px; color:var(--spec-1); text-transform:uppercase; margin-bottom:22px; display:block; }
.statement h2{
  font-size:clamp(28px, 4.6vw, 52px); font-weight:800; line-height:1.12;
  max-width:820px; margin-bottom:28px;
}
.statement-body{ font-size:clamp(15px, 1.6vw, 18px); color:var(--mute); max-width:640px; line-height:1.7; }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.service-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.service-card{
  background:var(--panel); padding:40px 32px 44px; position:relative;
}
.service-tag{
  font-size:10.5px; color:var(--spec-2); margin-bottom:22px; display:block;
}
.service-card h3{
  font-size:20px; font-weight:700; margin-bottom:16px; line-height:1.28;
}
.service-card p{ font-size:14.5px; color:var(--mute); line-height:1.65; }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.pipeline{
  display:grid; grid-template-columns:repeat(5, 1fr); position:relative;
}
.pipeline::before{
  content:""; position:absolute; top:9px; left:0; right:0; height:1px;
  background:var(--line);
}
.pipeline-step{ position:relative; padding:28px 20px 0 0; }
.pipeline-step::before{
  content:""; position:absolute; top:0; left:0; width:9px; height:9px;
  border-radius:50%; background:var(--stage); border:1.5px solid var(--spec-1);
}
.pipeline-mark{ font-size:10px; color:var(--mute-2); margin-bottom:14px; display:block; }
.pipeline-step h4{ font-size:16px; font-weight:700; margin-bottom:10px; }
.pipeline-step p{ font-size:13px; color:var(--mute); line-height:1.55; }

/* stage 5 — coordination only, visually distinct from active content-production stages */
.pipeline-step-coord::before{
  border-style:dashed; background:transparent; border-color:var(--mute-2);
}
.pipeline-step-coord .pipeline-mark{ color:var(--amber); }
.pipeline-step-coord h4,
.pipeline-step-coord p{ opacity:0.62; }

/* ==========================================================================
   WORK
   ========================================================================== */
.work-group{ margin-bottom:64px; }
.work-group:last-child{ margin-bottom:0; }
.work-group-label{
  font-size:11px; color:var(--mute); text-transform:uppercase; margin-bottom:22px; display:block;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.work-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
.work-item{ margin:0; position:relative; }
.work-item.wide{ grid-column:span 2; }
.work-item img{
  width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--panel);
  filter:grayscale(0.06);
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.work-item.wide img{ aspect-ratio:16/9; }
.work-item:hover img{ transform:scale(1.035); filter:grayscale(0); }
.work-item figcaption{
  margin-top:12px; font-size:12.5px; color:var(--mute); line-height:1.4;
}

/* frame corner brackets, injected via JS into elements with .frame */
.frame{ position:relative; }
.frame .corner{ position:absolute; width:16px; height:16px; opacity:0; transition:opacity .3s ease; z-index:3; }
.frame:hover .corner{ opacity:1; }
.frame .corner.tl{ top:-1px; left:-1px; border-top:1.5px solid var(--spec-1); border-left:1.5px solid var(--spec-1); }
.frame .corner.tr{ top:-1px; right:-1px; border-top:1.5px solid var(--spec-1); border-right:1.5px solid var(--spec-1); }
.frame .corner.bl{ bottom:-1px; left:-1px; border-bottom:1.5px solid var(--spec-1); border-left:1.5px solid var(--spec-1); }
.frame .corner.br{ bottom:-1px; right:-1px; border-bottom:1.5px solid var(--spec-1); border-right:1.5px solid var(--spec-1); }
.service-card.frame .corner{ opacity:0.35; }
.service-card.frame:hover .corner{ opacity:1; }

/* ==========================================================================
   CONTACT / FOOTER
   ========================================================================== */
.contact{
  text-align:left; padding-top:100px; padding-bottom:64px;
  border-top:1px solid var(--line);
}
.contact h2{
  font-size:clamp(30px, 5.4vw, 60px); font-weight:800; margin:22px 0 20px;
}
.contact-body{ font-size:15px; color:var(--mute); max-width:480px; margin-bottom:34px; }

.contact-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:70px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 30px; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase;
  border-radius:2px; transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.btn-primary{ background:var(--amber); color:#161006; }
.btn-primary:hover{ background:#f0b662; transform:translateY(-1px); }
.btn-secondary{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-secondary:hover{ border-color:var(--spec-1); color:var(--spec-1); transform:translateY(-1px); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:11px; color:var(--mute-2); padding-top:24px; border-top:1px solid var(--line);
  text-transform:uppercase;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px){
  .site-nav{ display:none; }
  .wordmark-tag{ display:none; }
  .service-grid{ grid-template-columns:1fr; }
  .pipeline{ grid-template-columns:1fr; row-gap:28px; }
  .pipeline::before{ display:none; }
  .work-grid{ grid-template-columns:repeat(2, 1fr); }
  .work-item.wide{ grid-column:span 2; }
}
@media (max-width: 560px){
  section{ padding:80px var(--edge); }
  .work-grid{ grid-template-columns:1fr; }
  .work-item.wide{ grid-column:span 1; }
  .lang-menu{ right:auto; left:0; }
  .contact-actions{ flex-direction:column; }
  .btn{ width:100%; }
}

/* focus visibility */
a:focus-visible, button:focus-visible, li:focus-visible{
  outline:2px solid var(--spec-1); outline-offset:2px;
}