/* Values measured from the original site at 1440px; fluid sizes scale from there. */
:root {
  --ink: #010103;
  --cream: #f6f3ec;
  --white: #fff;
  --body: #333;
  --g: 20px;                                   /* page gutter */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);        /* Framer appear ease */
  --spring: cubic-bezier(0.22, 1, 0.36, 1);      /* ≈ spring stiffness 500 / damping 60 (no overshoot) */
  --sans: 'Pretendard', 'Pretendard Variable', -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --switzer: 'Switzer', var(--sans);
  --mono: 'Azeret Mono', ui-monospace, monospace;
  --h1: clamp(44px, 6.95vw, 100px);
  --h2: clamp(40px, 5.56vw, 80px);
  --big: clamp(34px, 5.56vw, 80px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); background: var(--ink); color: var(--white); word-break: keep-all; -webkit-font-smoothing: antialiased; }
body.cream { background: var(--cream); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img, video, iframe { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-transform: inherit; }
ul { list-style: none; }
[hidden] { display: none !important; }

.small { font-size: 13px; line-height: 13px; letter-spacing: -0.01em; text-transform: uppercase; }
.mono { font-family: var(--mono); font-size: 13px; line-height: 13px; letter-spacing: -0.01em; }
.h1 { font-weight: 700; font-size: var(--h1); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.h1.light { font-weight: 400; font-size: clamp(40px, 6.46vw, 93px); }
.h2 { font-weight: 700; font-size: var(--h2); line-height: 1; letter-spacing: -0.03em; }
.white { color: var(--white); }

/* ---------- motion ---------- */
.mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.mask.block { display: block; }
.mask > [data-r] { display: inline-block; }
.js [data-r] { transition: transform 1.5s var(--ease) var(--d, 0s), opacity 0.6s linear var(--d, 0s); }
.js [data-r="up"]:not(.in) { transform: translateY(var(--y, 90px)); }
.js [data-r="fade"]:not(.in) { opacity: 0; }
.js [data-r="rise"] { transition-duration: 2s; }
.js [data-r="rise"]:not(.in) { opacity: 0; transform: translateY(140px); }

/* text roll: hover slides the label up to reveal data-t */
.roll { display: inline-block; overflow: hidden; vertical-align: top; height: 1.2em; line-height: 1.2em; margin: -0.1em 0; }
.roll > span { display: block; transition: transform 0.45s var(--spring); }
.roll > span::after { content: attr(data-t); display: block; }
a:hover .roll > span, button:hover .roll > span, .card:hover .roll > span { transform: translateY(-50%); }

/* scroll hint arrow loops downward */
.arrow { display: inline-block; overflow: hidden; height: 13px; vertical-align: top; font-family: var(--mono); margin-left: 6px; }
.arrow > span { display: block; animation: arrow 1.6s var(--ease) infinite; }
.arrow > span::before { content: '↓'; display: block; }
@keyframes arrow { from { transform: translateY(-13px); } to { transform: translateY(0); } }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: 61px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--g); color: var(--white); background: rgba(1, 1, 3, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.6s var(--ease); }
.js .site-header { transform: translateY(-64px); }
.js .site-header.show { transform: none; }
.cream .site-header { background: rgba(246, 243, 236, 0.8); color: var(--ink); }
.cream .site-header .logo img { filter: invert(1); }
.logo img { width: 78px; height: auto; }
.tagline { position: absolute; left: 50%; transform: translateX(-50%); }
.menu-btn { position: relative; z-index: 2; }
body.menu-open .site-header { background: transparent; backdrop-filter: none; color: var(--white); transform: none; }
body.menu-open .site-header .logo img { filter: none; }
body.menu-open .tagline { opacity: 0; }

.menu { position: fixed; inset: 0; z-index: 40; background: var(--ink); color: var(--white); display: flex; flex-direction: column; justify-content: center; padding: var(--g); visibility: hidden; opacity: 0; transition: opacity 0.4s linear, visibility 0s 0.4s; }
.menu.open { visibility: visible; opacity: 1; transition: opacity 0.3s linear; }
.menu-links .mask { display: block; }
.menu-links a { display: block; font-size: clamp(48px, 6.95vw, 100px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; transition: opacity 0.3s; }
.menu-links:hover a:not(:hover) { opacity: 0.3; }
.menu-foot { position: absolute; left: var(--g); bottom: var(--g); }

/* ---------- sticky background video (home / about) ---------- */
main { position: relative; }
.sticky-bg { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; z-index: 0; }
.sticky-bg video, .sticky-bg img { width: 100%; height: 100%; object-fit: cover; }
.gap { height: 100vh; }
main > section, main > .gap { position: relative; z-index: 1; }

/* ---------- hero ---------- */
.hero { min-height: 630px; height: 70vh; background: var(--ink); color: var(--cream); padding: 144px var(--g) var(--g); display: flex; flex-direction: column; }
.hero .row { display: flex; align-items: center; gap: 0 0.12em; flex-wrap: wrap; }
.hero .row .mask { padding: 0; margin: 0; }
.pill-mask { height: 0.76em; }
.pill { width: 1.2em; height: 0.76em; object-fit: cover; margin: 0 0.06em; }
.hero .sub { margin-top: 12px; font-size: clamp(16px, 1.53vw, 22px); line-height: 1.4; }
.hint { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; }
.hero-about { justify-content: flex-end; color: var(--white); }
.hero-about .hint { margin-top: 52px; }
.hero-404 { height: 100vh; justify-content: center; gap: 40px; color: var(--white); }

/* ---------- sheets (opaque sections over the video) ---------- */
.sheet { background: var(--cream); color: var(--ink); padding: 100px var(--g) 20px; }
.dark-sheet { background: var(--ink); color: var(--white); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 70px; }
.section-head .h2 .mask { margin-right: 0.22em; }
.link { display: inline-block; font-size: 13px; line-height: 13px; text-transform: uppercase; letter-spacing: -0.01em; }
.row-end { display: flex; justify-content: flex-end; margin-top: 22px; }

/* selected work: 3 columns of 346px, staggered placement */
.works { padding-bottom: 490px; }
.works .section-head { display: grid; grid-template-columns: 1fr; margin-bottom: 10px; }
.works .section-head > [data-r] { justify-self: end; margin-top: 70px; }
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 31px; width: 79.4%; margin-left: 10.7%; }
.works-grid .card:nth-child(4) { grid-column: 1; }
.works-grid .card:nth-child(5) { grid-column: 3; }
.works-grid .card:nth-child(6) { grid-column: 1; }
.works-grid .card:nth-child(7) { grid-column: 2; }
.card { display: block; }
.card-label { display: flex; gap: 6px; font-size: 13px; line-height: 13px; text-transform: uppercase; margin-bottom: 17px; }
.card-label .num { white-space: nowrap; }
.card-media { display: block; aspect-ratio: 346 / 337; overflow: hidden; background: #e7e3d9; }
.card-media > * { width: 100%; height: 100%; object-fit: cover; }

/* news cards: title over the image, 50% → 100% on hover */
.journal { padding-top: 21px; padding-bottom: 120px; }
.journal .section-head { margin-bottom: 43px; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.news-card { position: relative; display: block; aspect-ratio: 448 / 326; overflow: hidden; background: #222; }
.news-card img { width: 100%; height: 100%; object-fit: cover; }
.news-title { position: absolute; left: 0; right: 0; bottom: 31px; text-align: center; color: var(--white); font-size: 13px; line-height: 13px; text-transform: uppercase; opacity: 0.5; transition: opacity 0.4s; }
.news-card:hover .news-title { opacity: 1; }

/* about teaser */
.about-teaser { padding-top: 21px; padding-bottom: 242px; }
.about-teaser .section-head { margin-bottom: 80px; }
.about-cols { display: grid; grid-template-columns: 283px 501px 1fr; gap: 45px; align-items: start; }
.about-img img { width: 283px; aspect-ratio: 1; object-fit: cover; }
.about-text p { font-family: var(--switzer); font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.about-list { display: flex; flex-direction: column; min-height: 202px; padding-left: 10px; }
.about-list li { font-weight: 500; font-size: 19px; line-height: 1.3; }
.about-list .link { align-self: flex-end; margin-top: auto; }

/* ---------- CTA (transparent: shows the video on home/about) ---------- */
.cta { position: relative; z-index: 1; padding: 20px var(--g); min-height: 514px; display: flex; flex-direction: column; }
.cream .cta { color: var(--ink); }
.cta > div:first-child { margin-bottom: 10px; }
.big { display: flex; align-items: flex-start; gap: 10px; width: fit-content; font-family: var(--switzer); font-size: var(--big); line-height: 1; letter-spacing: -0.05em; padding: 5px 0; }
.big .small { line-height: 26px; }
.chars { display: inline-flex; flex-wrap: wrap; }
.ch { display: inline-block; overflow: hidden; height: 1em; }
.ch > span { display: block; transition: transform 0.9s var(--ease) calc(var(--i) * 0.025s); }
.ch > span::after { content: attr(data-t); display: block; }
.js .cta:not(.in) .ch > span { transform: translateY(105%); }
.big:hover .ch > span { transform: translateY(-50%); transition-duration: 0.5s; }
.foot { display: flex; justify-content: space-between; margin-top: auto; }
.cta-plain { min-height: 0; }

/* ---------- about page ---------- */
.split { display: grid; grid-template-columns: 464px 1fr; padding: 40px 14px 40px 34px; }
.body-cream { color: var(--cream); font-size: 18px; line-height: 1.4; letter-spacing: -0.01em; max-width: 623px; }
.facts { display: grid; gap: 50px; padding-bottom: 60px; }
.fact { display: grid; grid-template-columns: 296px 400px; gap: 115px; min-height: 81px; }
.fact h3 { font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
.refs { padding-bottom: 80px; }
.ref-list { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.ref-row { display: grid; grid-template-columns: 399px 587px 1fr auto; padding: 6px 0; font-size: 13px; line-height: 13px; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, 0.15); transition: opacity 0.3s, padding 0.4s var(--ease); }
.ref-list:hover .ref-row:not(:hover) { opacity: 0.35; }
a.ref-row:hover { padding-left: 12px; }
.reel { height: 5000px; background: var(--ink); }
.reel-sticky { position: sticky; top: 80px; height: calc(100vh - 160px); perspective: 1200px; display: flex; align-items: center; }
.reel-media { width: 100%; height: 100%; transform-origin: 50% 50%; }
.reel-media video, .reel-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- contact page ---------- */
.contact-page { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; }
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-inner { position: relative; width: 100%; padding: 160px var(--g) 40px; }
.contact-inner > [data-r] { margin: 18px 0 80px; }
.contact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; font-size: 22px; line-height: 1.4; }
.contact-cols .small { margin-bottom: 18px; }
.addr { display: table; }

/* ---------- cream pages ---------- */
.page-head { padding: 287px var(--g) 40px; }
.page-head .h1 { display: flex; align-items: flex-start; }
.count { font-family: var(--switzer); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -0.03em; margin-left: 10px; }
.case-study { position: relative; max-width: 1160px; margin: 0 auto; padding: 0 0 120px; }
.view-toggle { display: flex; justify-content: flex-end; margin: -56px 0 140px; }
.view-toggle button[aria-pressed="false"] { opacity: 0.2; }
.cards-3, .next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px 20px; }
.cards-3 .card-media { aspect-ratio: 373 / 264; }
.list { border-top: 1px solid currentColor; }
.list-row { display: grid; grid-template-columns: 1fr 260px 60px; align-items: center; padding: 14px 0; border-bottom: 1px solid currentColor; transition: opacity 0.3s; }
.list:hover .list-row:not(:hover) { opacity: 0.3; }
.list-title { font-size: clamp(28px, 4.2vw, 60px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.list-row .mono { text-align: right; }
.preview { position: fixed; z-index: 30; top: 0; left: 0; width: 320px; aspect-ratio: 4 / 3; pointer-events: none; clip-path: inset(100% 0 0 0); transition: clip-path 0.6s var(--ease); }
.preview.on { clip-path: inset(0 0 0 0); }
.preview img { width: 100%; height: 100%; object-fit: cover; }
.index-page { padding: 140px var(--g) 120px; min-height: 100vh; }

/* portfolio detail */
.detail-head { padding-bottom: 40px; }
.tags { display: flex; gap: 10px; margin-bottom: 10px; }
.detail-hero > * { width: 100%; height: clamp(320px, 52.8vw, 760px); object-fit: cover; }
.embed iframe { width: 100%; height: 100%; border: 0; }
.info { display: grid; grid-template-columns: 680px 1fr; gap: 23px; padding: 179px var(--g) 20px; color: var(--body); }
.info-left .mono { display: block; margin-bottom: 15px; color: var(--ink); }
.info h5 { font-weight: 600; font-size: 18px; line-height: 1.4; margin-bottom: 20px; }
.info-left p { font-weight: 500; font-size: 17px; line-height: 1.75; letter-spacing: -0.01em; margin-bottom: 19px; }
.info-right .mono { color: var(--ink); margin-bottom: 15px; }
.info-right .val { display: table; font-size: 22px; line-height: 1; color: var(--ink); margin-bottom: 53px; }
.images { padding: 80px var(--g) 20px; display: grid; gap: 20px; }
.img-wide, .img-cell { overflow: hidden; }
.img-wide img { width: 100%; height: clamp(240px, 53vw, 764px); object-fit: cover; }
.img-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.img-cell img { width: 100%; aspect-ratio: 683 / 802; object-fit: cover; }
[data-scroll="zoom"] { will-change: transform; }
.next { padding: 140px var(--g) 80px; }
.next .section-head { margin-bottom: 50px; }
.next-grid .card-media { aspect-ratio: 448 / 271; }

/* news detail */
.article-head { padding-bottom: 40px; }
.article-title { font-size: var(--h2); text-transform: none; }
.article-head .hint { margin-top: 60px; }
.article-img { overflow: hidden; padding: 0 var(--g); }
.article-img img { width: 100%; height: clamp(280px, 50vw, 720px); object-fit: cover; transform-origin: 50% 50%; }
.article { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding: 120px var(--g); color: var(--body); }
.sticky-col { position: sticky; top: 100px; display: grid; gap: 20px; justify-items: start; color: var(--ink); }
.article-body h2 { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.35; font-weight: 600; color: var(--ink); margin-bottom: 30px; letter-spacing: -0.02em; }
.article-body p { font-weight: 500; font-size: 17px; line-height: 1.75; margin-bottom: 19px; }

/* ---------- tablet 810–1199 ---------- */
@media (max-width: 1199px) {
  .about-cols { grid-template-columns: 220px 1fr; }
  .about-list { grid-column: 2; }
  .about-img img { width: 220px; }
  .split { grid-template-columns: 1fr 2fr; padding: 40px var(--g); gap: 20px; }
  .fact { grid-template-columns: 1fr 1.3fr; gap: 30px; }
  .ref-row { grid-template-columns: 1.2fr 2fr 1fr auto; gap: 10px; }
  .info { grid-template-columns: 1.4fr 1fr; }
  .case-study { padding-left: var(--g); padding-right: var(--g); }
}
/* ---------- phone ≤ 809 ---------- */
@media (max-width: 809px) {
  .tagline { display: none; }
  .hero { height: auto; min-height: 100svh; padding-top: 120px; }
  .works { padding-bottom: 120px; }
  .works-grid, .cards-3, .next-grid, .news-grid { grid-template-columns: 1fr; }
  .works-grid .card:nth-child(n) { grid-column: auto; }
  .works-grid { width: auto; margin-left: 0; gap: 40px; }
  .about-teaser { padding-bottom: 120px; }
  .section-head { margin-bottom: 30px; }
  .about-cols, .split, .fact, .info, .article, .contact-cols, .img-pairs { grid-template-columns: 1fr; gap: 20px; }
  .about-list { grid-column: auto; padding: 0; }
  .ref-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .ref-row span:nth-child(2) { grid-column: 1 / -1; order: 3; text-transform: none; }
  .ref-row span:nth-child(3) { display: none; }
  .reel { height: 2400px; }
  .page-head { padding-top: 160px; }
  .view-toggle { margin: 0 0 30px; }
  .list-row { grid-template-columns: 1fr auto; }
  .list-row .small { display: none; }
  .info { padding-top: 60px; }
  .article { padding: 60px var(--g); }
  .sticky-col { position: static; }
  .preview { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}