/* YAJA Website — clean rebuild (v3): consistent left-alignment, less chrome, editorial PERSOL, 3-column masonry */

/* ── Font policy override ───────────────────────────────────────────
   Per brand direction: ALL running text (Latin + Korean) renders in
   Pretendard; only NUMBERS render in Nohemi (Familjen Grotesk substitute).
   Re-pointing --font-latin to Pretendard flips every text element in one
   move; numeric elements opt back in with --font-num. */
:root {
  --font-latin: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-num:   'Nohemi', 'Familjen Grotesk', system-ui, -apple-system, sans-serif;

  /* ── Type scale — ONE size per role, so every section matches ──────
     Legibility floor: ALL-CAPS labels ≥ 12px, body text ≥ 14px.
     Never set a font-size outside this scale. */
  --fs-hero:      clamp(64px, 9vw, 140px);   /* intro h1 + slogan (showpiece) */
  --fs-display:   clamp(52px, 7vw, 116px);   /* EVERY section title           */
  --fs-h2:        clamp(34px, 4vw, 56px);    /* secondary headline            */
  --fs-h3:        clamp(30px, 3.4vw, 44px);  /* sub-item titles (CAMP=PERSOL)  */
  --fs-h4:        clamp(20px, 1.6vw, 24px);  /* card titles                   */
  --fs-lede:      clamp(17px, 1.4vw, 20px);  /* section sub-copy              */
  --fs-body:      15px;                       /* body copy                     */
  --fs-body-sm:   14px;                       /* dense body (floor)            */
  --fs-caption:   13px;                       /* captions / fine print         */
  --fs-eyebrow:   12px;                       /* ALL-CAPS labels (floor)       */

  /* Numbers (Nohemi) — three weights of emphasis */
  --fs-stat-hero: clamp(64px, 8.5vw, 128px); /* the single biggest figure     */
  --fs-stat:      clamp(52px, 5.5vw, 84px);  /* section stat figures          */
  --fs-stat-sm:   clamp(34px, 3.4vw, 46px);  /* inline mini figures           */

  --track-eyebrow: 0.28em;

  /* ── Text color ramp (on dark) — 4 steps, used everywhere ───────── */
  --text-1: #ffffff;                    /* primary text          */
  --text-2: rgba(255,255,255,0.72);     /* secondary / captions  */
  --text-3: rgba(255,255,255,0.55);     /* body / muted labels   */
  --text-4: rgba(255,255,255,0.40);     /* faint meta            */
}

/* Visually-hidden but readable by search engines & screen readers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── Scroll-reveal base states ────────────────────────────────────────
   These elements are animated in by `.is-in`. Without a hidden base they
   render visible first, then `.is-in` re-hides + re-fades them — a double
   "flash". Hiding them up front makes the entrance play exactly once. */
/* Elements that get faded in by `.is-in`. The page-hero trio was here
 * too, but if `.page.is-in` never fires (e.g. IntersectionObserver
 * race on a fast SPA navigation) the title stayed invisible forever
 * and the page looked broken. Page hero elements moved OUT — they
 * are visible by default; the chrIn animation with `both` fill still
 * does its fade-in when `.is-in` does fire, but the safety net is
 * that without `.is-in` the title is still readable. */
.stack-intro__h, .stack-intro__lede,
.proc__h span, .nums__cell, .award {
  opacity: 0;
}
/* Returning to an already-seen section shows it instantly (no replay).
 * Caveat: the * rule below was killing the .proc__col marquee on
 * revisit because its `animation-iteration-count: infinite` still
 * cycled but each iteration finished in 1ms — the marquee froze at a
 * random offset. We exempt the decorative infinite animations below. */
.section.reveal-instant *, .page.reveal-instant * {
  animation-duration: .001ms !important;
  animation-delay: 0s !important;
}
.section.reveal-instant .proc__col--0,
.page.reveal-instant .proc__col--0 { animation-duration: 28s !important; animation-delay: 0s !important; }
.section.reveal-instant .proc__col--1,
.page.reveal-instant .proc__col--1 { animation-duration: 42s !important; animation-delay: -8s !important; }
.section.reveal-instant .proc__col--2,
.page.reveal-instant .proc__col--2 { animation-duration: 34s !important; animation-delay: -16s !important; }
.section.reveal-instant .shimmer,
.page.reveal-instant .shimmer { animation-duration: 4.2s !important; }
.section.reveal-instant .intro__scroll-line,
.page.reveal-instant .intro__scroll-line { animation-duration: 2.4s !important; }
/* Accessibility / print safety — never leave content stuck hidden. */
@media (prefers-reduced-motion: reduce) {
  .stack-intro__h, .stack-intro__lede, .proc__h span, .nums__cell, .award,
  .slogan__line, .page-hero__title, .page-hero__sub, .page-hero__eyebrow,
  .svc-item, .persol, .bcard, .proj-card, .col-row, .news-row, .contact-card,
  .trusted__cell, .proc__tile, .end-mosaic__tile,
  .intro__h .intro__light, .intro__h .intro__bold, .intro__sub {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  /* Freeze the infinite Trusted-by marquee for reduced-motion users. */
  .proc__col, .marquee, .trusted__track { animation: none !important; }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: #000; }
body {
  background: #000;
  color: var(--fg-1-on-dark);
  font-family: var(--font-stack);
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ════════ BACKGROUND ═══════════════════════════════════════════════ */
.bg-stage {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.webgl-stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-stage canvas { display: block; width: 100% !important; height: 100% !important; }
.bg-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(140% 90% at 50% 50%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.62) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, rgba(0,0,0,0.40) 100%);
}

/* ════════ CHROME ═══════════════════════════════════════════════════ */
.site, .page { position: relative; z-index: 2; width: 100%; }

/* Top nav */
.topnav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.topnav > * { pointer-events: auto; }
/* Logo / nav / CTA all scale with viewport so a 2K monitor doesn't
 * make the header look like a postage stamp. clamp() ceilings tuned to
 * roughly 1.6× the prior fixed sizes at >= 1920px width. */
.topnav__brand img {
  height: clamp(36px, 2.8vw, 56px);
  width: auto;
  display: block;
}

.topnav__menu {
  display: flex;
  gap: clamp(28px, 3vw, 56px);
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.topnav__menu a {
  font-family: var(--font-latin);
  font-size: clamp(11px, 0.9vw, 15px);
  font-weight: var(--w-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color var(--t-fast) var(--easing), opacity var(--t-fast) var(--easing);
}
.topnav__menu a:hover { color: #fff; }
.topnav__menu a.is-active { color: var(--yaja-red); }

.topnav__right { display: flex; align-items: center; gap: clamp(10px, 1.1vw, 18px); }
.topnav__lang-btn {
  font-family: var(--font-latin);
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: var(--w-semibold);
  letter-spacing: 0.10em;
  color: var(--text-4);
  background: transparent;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  transition: color var(--t-fast) var(--easing);
}
.topnav__lang-btn:hover { color: rgba(255,255,255,0.85); }
.topnav__lang-btn.is-on { color: var(--yaja-red); font-weight: var(--w-bold); }
.topnav__lang-sep {
  color: rgba(255,255,255,0.32);
  margin: 0 2px;
  font-size: clamp(11px, 0.9vw, 14px);
}
.topnav__cta {
  display: inline-flex;
  align-items: center;
  padding: clamp(8px, 0.8vw, 12px) clamp(16px, 1.6vw, 26px);
  background: var(--yaja-red);
  color: #fff;
  font-family: var(--font-korean);
  font-size: clamp(12px, 1vw, 16px);
  font-weight: var(--w-bold);
  border-radius: 999px;
  text-decoration: none;
  margin-left: 6px;
  transition: opacity var(--t-fast) var(--easing), transform var(--t-fast) var(--easing);
}
.topnav__cta:hover { opacity: 0.9; transform: translateY(-1px); }

/* Mobile hamburger — hidden on desktop */
.topnav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin-left: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.topnav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--t-fast) var(--easing), opacity var(--t-fast) var(--easing);
}
.topnav.is-open .topnav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topnav.is-open .topnav__burger span:nth-child(2) { opacity: 0; }
.topnav.is-open .topnav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Scroll progress hairline */
.progress {
  position: fixed; left: 0; top: 0; z-index: 60;
  height: 2px; background: var(--yaja-red);
  width: 0%; pointer-events: none; transition: width 80ms linear;
}

/* Side rail (right) with moving dot — minimal */
.siderail {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  height: 46vh;
  width: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.siderail__line {
  position: relative;
  width: 1px;
  height: 100%;
  background: rgba(255,255,255,0.16);
}
.siderail__dot {
  position: absolute;
  left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--text-2);
  background: transparent;
  transform: translate(-50%, -50%);
  transition: top 400ms var(--easing);
}

/* Per-section pill — the ONE place a section's index/name appears.
 * Was top:96px which collided with content on tall sections. Moved up
 * to top:22px so the pill rides the upper edge of each section, sitting
 * inside the gap between sections rather than overlapping the
 * section body below. */
.sectiontag {
  position: absolute;
  top: 22px;
  right: 32px;
  z-index: 5;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(10,10,10,0.62);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.10);
  font-family: var(--font-latin);
  font-size: 11px;
  letter-spacing: 0.18em;
  white-space: nowrap;
}
.sectiontag__num   { font-family: var(--font-num); color: var(--yaja-red); font-weight: var(--w-bold); }
.sectiontag__sep   { color: var(--text-4); }
.sectiontag__dash  { color: rgba(255,255,255,0.32); }
.sectiontag__name  { color: #fff; text-transform: uppercase; font-weight: var(--w-semibold); }

/* ════════ SECTION FRAMEWORK ═══════════════════════════════════════ */
.section {
  position: relative;
  width: 100%;
  /* Cap section height on big monitors so the layout doesn't get
   * wasteful empty space between sections at 2k/4k resolution.
   * 100vh on phones (where vh is small) but never more than 1080px. */
  min-height: clamp(560px, 100vh, 1080px);
  padding: clamp(96px, 14vh, 160px) 0 clamp(72px, 10vh, 120px);
  display: flex;
  flex-direction: column;
}
.section--hero   { padding: 0; min-height: 100vh; }
.section--center { justify-content: center; align-items: center; }
.section--end    { padding: 0; min-height: 100vh; overflow: hidden; }
.section--stack  {
  min-height: auto;
  padding: clamp(96px, 14vh, 160px) 0 clamp(112px, 16vh, 180px);
  gap: clamp(80px, 12vh, 140px);
}

/* The ONE inner container — every section uses this */
.page-frame {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
}

/* ════════ 01 — INTRO ═══════════════════════════════════════════════ */
.intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 0 32px;
  position: relative;
}
.intro__h {
  font-family: var(--font-latin);
  /* One size smaller than --fs-hero so each line fits on a phone in one
   * row. 9vw → 7.4vw keeps the cinematic feel while clearing iPhone-mini
   * width with "beyond space." on a single line. */
  font-size: clamp(46px, 7.4vw, 112px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0;
  color: #fff;
  font-weight: var(--w-light);
}
/* Each phrase ("Beyond time," / "beyond space.") is its own block AND
 * its own no-wrap unit so the comma/period never get orphaned. */
.intro__line { display: block; white-space: nowrap; }
.intro__line + .intro__line { margin-top: 8px; }
@media (max-width: 480px) {
  .intro__h { font-size: clamp(40px, 11vw, 64px); }
  .intro__line + .intro__line { margin-top: 6px; }
}
.intro__light { font-weight: var(--w-light); color: rgba(255,255,255,0.88); }
.intro__bold  { font-weight: var(--w-bold); color: #fff; }
.intro__bold em { font-style: normal; color: #fff; }

.intro__h .intro__light,
.intro__h .intro__bold {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: introIn 1100ms var(--easing) forwards;
}
.intro__h .intro__line:nth-child(1) .intro__light { animation-delay: 200ms; }
.intro__h .intro__line:nth-child(1) .intro__bold  { animation-delay: 350ms; }
.intro__h .intro__line:nth-child(2) .intro__light { animation-delay: 550ms; }
.intro__h .intro__line:nth-child(2) .intro__bold  { animation-delay: 700ms; }
@keyframes introIn { to { opacity: 1; transform: translateY(0); } }

.intro__sub {
  margin: 28px 0 0;
  font-family: var(--font-latin);
  font-size: var(--fs-lede);
  letter-spacing: 0.04em;
  color: var(--text-2);
  opacity: 0;
  animation: introIn 1100ms var(--easing) 950ms forwards;
}
.intro__scroll {
  position: absolute;
  bottom: 48px;
  /* Center via auto-margins on left:0 + right:0 + width:max-content,
   * NOT via transform: translateX(-50%) — the keyframe `introIn` ends
   * with `transform: translateY(0)` which would wipe out an inline
   * translateX(-50%) and the cue drifts to the right of viewport center. */
  left: 0; right: 0;
  margin: 0 auto;
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--font-latin);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow);
  color: var(--text-3);
  opacity: 0;
  animation: introIn 1100ms var(--easing) 1200ms forwards;
}
.intro__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
  animation: scrollNudge 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollNudge {
  0%, 100% { transform: scaleY(1); opacity: 0.6; }
  50%      { transform: scaleY(0.4) translateY(20px); opacity: 1; }
}

/* ════════ STACK SECTION INTRO (Originals / Partnerships) ═══════════ */
.stack-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stack-intro__h {
  font-family: var(--font-latin);
  font-size: var(--fs-display);
  font-weight: var(--w-black);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0;
}
.stack-intro__h em { color: var(--yaja-red); font-style: normal; }
.stack-intro__lede {
  font-family: var(--font-korean);
  font-size: var(--fs-lede);
  font-weight: var(--w-light);
  color: var(--text-3);
  margin: 0;
  max-width: 640px;
  letter-spacing: -0.005em;
}

.section.is-in .stack-intro__h { animation: chrIn 1100ms var(--easing) 200ms both; }
.section.is-in .stack-intro__lede { animation: chrIn 900ms var(--easing) 420ms both; }
@keyframes chrIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ════════ 02 — SERVICE ═════════════════════════════════════════════ */
.svc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.svc-item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "head" "media" "body";
  gap: 24px;
  opacity: 0;
  transform: translateY(28px);
}
.section.is-in .svc-item:nth-child(1) { animation: chrIn 1000ms var(--easing) 200ms forwards; }
.section.is-in .svc-item:nth-child(2) { animation: chrIn 1000ms var(--easing) 360ms forwards; }

.svc-item__head { grid-area: head; display: flex; align-items: baseline; gap: 18px; }
.svc-item__num {
  font-family: var(--font-num);
  font-size: clamp(36px, 3.6vw, 52px);
  font-weight: var(--w-bold);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--yaja-red);
}
.svc-item__title {
  font-family: var(--font-latin);
  font-size: var(--fs-h3);
  font-weight: var(--w-bold);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}
.svc-item__media {
  grid-area: media;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,0.08);
}
.svc-item__media img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}
.svc-item__body {
  grid-area: body;
  font-family: var(--font-korean);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-3);
  margin: 0;
  max-width: 540px;
}

/* ════════ 03 — ORIGINALS DETAIL (CAMP + YCN) ═══════════════════════ */
.orig {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 80px;
  align-items: center;
}
.orig--right { grid-template-columns: 1fr 380px; }
.orig--right .orig__visual { order: 2; }
.orig--right .orig__copy { order: 1; }
/* Note: copy is ALWAYS left-aligned, only the visual flips sides */

.orig__visual { display: flex; justify-content: center; }
.orig__phone {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 9/16;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
}
.orig__phone video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* .orig__caption / .orig__caption-ko / .orig__caption-en — removed
 * (overlay caption markup was killed earlier; CSS pruned 2026-06-02). */

.orig__copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.orig__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}
.orig__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.10);
}
.orig__avatar img { width: 100%; height: 100%; object-fit: cover; }
.orig__eyebrow {
  font-family: var(--font-latin);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow);
  color: var(--yaja-red);
  margin-bottom: 6px;
}
.orig__title {
  font-family: var(--font-latin);
  font-size: var(--fs-h3);
  font-weight: var(--w-black);
  line-height: 1;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}
.orig__ko {
  margin: 8px 0 8px;
  font-family: var(--font-korean);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: var(--w-bold);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.4;
  max-width: 600px;
}
.orig__body {
  font-family: var(--font-korean);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-3);
  margin: 0 0 clamp(20px, 3vh, 36px);   /* gap before the stats row — was 0 (stats sat too close to copy) */
  max-width: 560px;
}
/* .orig__rule — removed (divider line was killed earlier;
 * CSS pruned 2026-06-02). */
.orig__stats {
  display: flex;
  gap: 64px;
  align-items: flex-end;
  margin-top: clamp(8px, 1.4vh, 18px);  /* extra breathing room above the big numbers */
}
.orig__stat-label {
  font-family: var(--font-korean);
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.orig__stat-num {
  font-family: var(--font-num);
  font-size: var(--fs-stat);
  font-weight: var(--w-black);
  line-height: 0.9;
  color: var(--yaja-red);
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.orig__stat-num em {
  font-family: var(--font-korean);
  font-size: 0.32em;
  font-style: normal;
  font-weight: var(--w-bold);
  color: var(--yaja-red);
}

/* GPU-promote the reveal targets. The phone holds a playing/decoding
 * <video>; animating translateY on it un-promoted forces a full repaint
 * each frame (the CAMP row stutter, since it reveals mid-scroll while its
 * reel starts decoding). will-change keeps it on its own composite layer. */
.orig__phone { will-change: opacity; }
.orig__copy > * { will-change: transform, opacity; }
/* The phone holds a decoding/playing <video>. Sliding it (translateY)
 * forces a repaint each frame → the CAMP jolt. Fade it instead (opacity
 * is compositor-only, no layout/paint), and keep the slide only on the
 * lightweight text column. */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.section.is-in .orig__phone { animation: fadeIn 900ms var(--easing) 120ms both; }
.section.is-in .orig__copy > * { animation: chrIn 760ms var(--easing) both; }
.section.is-in .orig__copy > *:nth-child(1) { animation-delay: 120ms; }
.section.is-in .orig__copy > *:nth-child(2) { animation-delay: 200ms; }
.section.is-in .orig__copy > *:nth-child(3) { animation-delay: 280ms; }
.section.is-in .orig__copy > *:nth-child(4) { animation-delay: 360ms; }
.section.is-in .orig__copy > *:nth-child(5) { animation-delay: 440ms; }

/* ════════ 04 — PERSOL FEATURED CASE ═══════════════════════════════ */
.persol {
  display: flex;
  flex-direction: column;
  gap: 56px;
  opacity: 0;
  transform: translateY(28px);
}
.persol.is-in { animation: chrIn 1100ms var(--easing) 180ms forwards; }

/* .persol__head retired — tag / brand / lede now live INSIDE the
 * .persol__data copy column above the hero stat, mirroring the
 * .orig__copy structure used by YAJA CAMP / YCN. The legacy class
 * is no longer rendered. */

/* Section tag — "대표 사례" — now an overlay badge pinned to the
 * video's top-left corner. Frosted dark pill with a red dot so it
 * reads as a "featured" flag on the reel itself. */
.persol__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.62);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-latin);
  font-size: 10px;
  font-weight: var(--w-black);
  letter-spacing: 0.2em;
  color: #fff;
  text-transform: uppercase;
}
.persol__tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yaja-red);
  box-shadow: 0 0 8px rgba(255, 72, 72, 0.7);
  flex-shrink: 0;
}
/* Title rendered next to the avatar in the brand row (see
 * .persol__brand below) — matches .orig__title sizing/weight. */
.persol__title {
  font-family: var(--font-latin);
  font-size: var(--fs-h3);
  font-weight: var(--w-black);
  letter-spacing: -0.025em;
  line-height: 1;
  color: #fff;
  margin: 0;
  /* Korean "계정 운영 사례" must break only at spaces, never mid-word
   * (it was splitting 사/례 when the column got narrow on Works). */
  word-break: keep-all;
}
/* On the Works page FeaturedPersolCase is nested inside .works-group
 * which already applies the page-frame padding — so neutralise the
 * persol's own horizontal padding + max-width to avoid doubling it
 * (that double padding narrowed the column and forced extra wrapping,
 * making it not match home). */
.page--works .persol {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
/* (.persol__title em removed — the title is now one uniform string.) */
/* Lede — sized to match .orig__body (the "small descriptive
 * paragraph below the brand block" pattern CAMP/YCN use). Carries
 * the heavy margin-bottom that separates the descriptive block
 * above from the data block (hero + stats) below — same role
 * .orig__body plays one section up. */
.persol__lede {
  font-family: var(--font-korean);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-3);
  /* A touch more bottom margin (was clamp 20-36) so the textual info
   * block above reads as separate from the numeric block (hero +
   * stats) below — just enough whitespace to feel the divide, no
   * hard divider line. */
  margin: 0 0 clamp(30px, 4vh, 48px);
  max-width: 560px;
}

.persol__body {
  /* Mirrors .orig (YAJA CAMP / YCN): 380px phone + 1fr data column,
   * gap 80px, items centered. The earlier 300px / 64px combo made the
   * data column hug the phone with too little air. */
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 80px;
  align-items: start;
}
.persol__phone {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,0.10);
}
.persol__phone video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* .persol__phone-caption / -ko / -en — removed (caption overlay
 * killed earlier; CSS pruned 2026-06-02). */

/* ═════════════════════════════════════════════════════════════════
 * PERSOL DATA BLOCK — premium fact-sheet rhythm
 *
 * Layout (top → bottom):
 *   HERO    — meta row (label LEFT, caption RIGHT) + huge number +
 *             thin red signature line
 *   MINIS   — 3-up; tiny red uppercase labels above big white numbers
 *   COUNTRIES — section eyebrow ("국가별 성과") with count badge,
 *               then a clean 3-col table where labels left-align
 *               and values right-align cell by cell
 *
 * Design rules (top-of-mind):
 *   • One hairline ONLY between major blocks (no stacked dividers)
 *   • Red appears at 3 spots: hero signature rule, mini labels,
 *     section eyebrow count — restrained accent, not decoration
 *   • Numbers font (font-num) for ALL digits; Korean for labels
 *   • Country flag is small, low visual weight; name is the anchor
 *   • Within each metric cell: label top-left / value bottom-right
 *     so the row-above + row-below trailing units form a vertical rail
 * ═════════════════════════════════════════════════════════════════ */
/* Data column rhythm — matches .orig__copy (CAMP / YCN) exactly:
 *   tight 14px flex gap, plus a strategic margin-bottom on the hero
 *   block to mimic .orig__body's gap-before-stats. Result: stats sit
 *   ~40-60px under the hero, and socials sit just 14px under the
 *   stats — same beat as the originals row above. */
.persol__data {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── HERO STAT ──────────────────────────────────────────────────── *
 * Editorial treatment: small metadata row → giant editorial number
 * → short red signature. Sits BETWEEN the lede and the 3-stat row,
 * tight to both — they read as one data block. The body→data
 * "big gap" lives on .persol__lede margin-bottom (above). */
.persol__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.persol__hero-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  gap: 16px;
}
.persol__hero-label {
  font-family: var(--font-latin);
  font-size: 10px;
  font-weight: var(--w-black);
  letter-spacing: 0.28em;
  color: var(--yaja-red);
  text-transform: uppercase;
}
.persol__hero-sub {
  font-family: var(--font-latin);
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: 0.22em;
  color: var(--text-3);
  text-transform: uppercase;
}
.persol__hero-num {
  font-family: var(--font-num);
  font-size: var(--fs-stat-hero);
  font-weight: var(--w-black);
  line-height: 0.88;
  letter-spacing: -0.048em;
  color: #fff;
  white-space: nowrap;
  /* subtle depth — pulls the number off the dark canvas without
   * making it look "glowy". */
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
/* Hero signature — short red rule, slightly thicker than before so
 * it reads as a deliberate brand mark, not a hairline accident. */
.persol__hero-sig {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--yaja-red);
  margin-top: 2px;
  border-radius: 1px;
  box-shadow: 0 0 16px rgba(255, 72, 72, 0.45);
}

/* ── THREE-UP MINIS ─────────────────────────────────────────────── */
.persol__minis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-bottom: clamp(20px, 2.6vh, 32px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.persol__minis li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;   /* label AND value share the left edge — */
}                            /* value sits directly under the label. */
.persol__mini-label {
  font-family: var(--font-latin);
  font-size: 10px;
  font-weight: var(--w-black);
  letter-spacing: 0.22em;
  color: var(--yaja-red);
  text-transform: uppercase;
}
.persol__mini-val {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.persol__mini-val strong {
  font-family: var(--font-num);
  font-size: var(--fs-stat-sm);
  font-weight: var(--w-black);
  letter-spacing: -0.035em;
  color: #fff;
  line-height: 1;
}
.persol__mini-val em {
  font-family: var(--font-korean);
  font-style: normal;
  font-size: 13px;
  font-weight: var(--w-bold);
  color: var(--text-2);
  letter-spacing: 0;
}

/* ── COUNTRY BREAKDOWN ──────────────────────────────────────────── */
.persol__bymarket {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.persol__bymarket-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-latin);
  font-size: 10px;
  font-weight: var(--w-black);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-2);
  padding-bottom: 12px;
}
.persol__bymarket-h em {
  font-family: var(--font-num);
  font-style: normal;
  font-size: 9px;
  font-weight: var(--w-black);
  letter-spacing: 0;
  color: var(--yaja-red);
  background: rgba(255, 72, 72, 0.14);
  border: 1px solid rgba(255, 72, 72, 0.42);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}

/* Country breakdown — 3-col rows aligned with the minis above. Col 1
 * is the row identifier (flag + name, white uppercase letter-spaced —
 * clearly a row label, not a data label). Col 2 + 3 each hold a
 * metric cell with label ABOVE number. */
.persol__countries {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.persol__countries li {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* Outer edges of the country list have no dividers — they'd visually
 * detach the block from its 국가별 성과 eyebrow above (looks like an
 * orphan rule) and from the social-link row below. Only INTER-row
 * dividers remain. */
.persol__countries li:first-child { border-top: 0; }
.persol__countries li:last-child  { border-bottom: 0; }
.persol__country-flag {
  display: inline-block;
  margin-right: 10px;
  font-size: 20px;
  line-height: 1;
  vertical-align: -2px;
  opacity: 0.92;
  filter: saturate(0.85);
}
.persol__country-name {
  font-family: var(--font-latin);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: var(--w-bold);
  color: #fff;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: baseline;
}
.persol__country-label {
  text-transform: uppercase;
}
/* Each metric cell: label on top + number directly underneath, BOTH
 * left-aligned. The whole cell stacks neatly on the left edge so
 * label-and-number read as one pair. */
.persol__country-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.persol__country-metric span {
  font-family: var(--font-latin);
  font-size: 10px;
  font-weight: var(--w-black);
  letter-spacing: 0.22em;
  color: var(--text-3);
  text-transform: uppercase;
  white-space: nowrap;
}
.persol__country-metric b {
  font-family: var(--font-num);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: var(--w-black);
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.persol__country-metric b em {
  font-family: var(--font-korean);
  font-style: normal;
  font-weight: var(--w-bold);
  font-size: clamp(11px, 0.9vw, 13px);
  color: var(--text-2);
  letter-spacing: 0;
}

/* ════════ 04b — BRAND WORK ROW ═══════════════════════════════════ */
.bwork__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bcard {
  position: relative;
  background: #0a0a0a;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 13;
  opacity: 0;
  transform: translateY(40px);
}
.section.is-in .bcard { animation: chrIn 1000ms var(--easing) var(--delay, 0ms) forwards; }
.bcard__media { position: absolute; inset: 0; z-index: 0; }
.bcard__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcard__placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1a1a1a, #050505);
  display: flex; align-items: center; justify-content: center;
}
.bcard__placeholder img {
  width: 60%; max-width: 220px;
  filter: grayscale(0.2) brightness(1.1);
  opacity: 0.7;
}
.bcard__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.62);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-latin);
  font-size: 10px;
  font-weight: var(--w-black);
  letter-spacing: 0.14em;
  color: #fff;
  text-transform: uppercase;
}
.bcard__tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yaja-red);
  box-shadow: 0 0 8px rgba(255, 72, 72, 0.7);
  flex-shrink: 0;
}
.bcard__shade {
  position: absolute; inset: 0;
  z-index: 1;
  /* Smooth, gradual fade — never hits pure black so the bottom of
   * the reel keeps a hint of the footage instead of reading as a
   * solid black block (the "black background" the darker Dr Pepper /
   * Samsung videos used to show). Caps at 0.86 with a gentle ramp.
   * Text legibility on the brighter Vaseline reel is preserved by
   * the 0.60 mid-stop + the description's own drop-shadow. */
  background: linear-gradient(180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.00) 30%,
    rgba(0,0,0,0.30) 62%,
    rgba(0,0,0,0.62) 84%,
    rgba(0,0,0,0.86) 100%);
}
.bcard__body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bcard__top { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
/* Logo-above-title pattern. No white pill — the logo lives directly on
 * the dark/video background as a brand mark, then the brand name follows
 * BIG and left-aligned underneath. The title is the eye-catcher. */
.bcard__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.bcard__brandmark {
  width: auto;
  max-width: 96px;
  height: clamp(22px, 2.4vw, 30px);
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)) brightness(1.05);
}
.bcard__name {
  font-family: var(--font-latin);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: var(--w-black);
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
  line-height: 1.02;
  text-align: left;
  /* Legibility insurance on the softer gradient. */
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.bcard__desc {
  font-family: var(--font-korean);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.bcard__desc strong { color: #fff; font-weight: var(--w-bold); }
.bcard__bottom {
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.bcard__sign {
  font-family: var(--font-latin);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: 0.18em;
  color: var(--text-3);
}

/* ════════ 05 — TRUSTED BY ═════════════════════════════════════════ */
.trusted {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.trusted__h {
  font-family: var(--font-latin);
  font-size: var(--fs-display);
  font-weight: var(--w-black);
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
  line-height: 1;
}
.trusted__h em { color: var(--yaja-red); font-style: normal; }
.trusted__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.trusted__cell {
  background: #fff;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7%;
  opacity: 0;
  transform: translateY(24px);
  transition: transform 220ms var(--easing);
  overflow: hidden;
}
.section.is-in .trusted__cell {
  animation: chrIn 700ms var(--easing) var(--delay, 0ms) forwards;
}
.trusted__cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.trusted__cell:hover { transform: translateY(-3px); }

/* ════════ 07 — WHAT WE OFFER (Process) ═════════════════════════════
 * Cinematic asymmetric layout: copy column anchored to the page-frame's
 * left edge (so it lines up vertically with every other section above
 * it), marquee bleeds to the viewport's right edge. Capped at 1440px
 * on ultra-wide so 4K monitors don't blow the thumbs up to billboard
 * size.
 *
 * Why this layout and not 50/50 inside the bounded frame: the marquee
 * is the section's photo wall — visual punch comes from it feeling
 * larger than the surrounding content, not perfectly framed. The left
 * padding stays locked to the page-frame so the COPY (which the eye
 * reads) still respects the global grid. */
.proc {
  position: relative;
  overflow: hidden;
  /* Left padding tracks the page-frame's left edge so the copy column
   * aligns with every other section. Resolves to:
   *   viewport ≤ 1280  →  64px (matches .page-frame padding-left)
   *   viewport > 1280  →  (viewport - 1280)/2 + 64 (centred frame
   *                       left + frame's inner padding)
   * Mobile override drops to 24px to match .page-frame mobile. */
  padding-left: max(64px, calc((100vw - 1280px) / 2 + 64px));
  padding-right: 0;
}
.proc__inner {
  width: 100%;
  /* Cap on ultra-wide so the marquee doesn't grow unbounded.
   * 1440px = 1280 page-frame + 160 right-of-frame breathing room. */
  max-width: 1440px;
  margin-right: 0;
  margin-left: 0;
  display: grid;
  /* Asymmetric: copy is the priority reading column, marquee fills
   * whatever space is left. */
  grid-template-columns: minmax(320px, 460px) 1fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: stretch;
}
.proc__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  /* Tighter max-width forces the steps text to break cleanly rather
   * than spreading thin across a wide column. */
  max-width: 460px;
}
.proc__h {
  font-family: var(--font-latin);
  font-size: var(--fs-display);
  font-weight: var(--w-black);
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: #fff;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
}
.proc__h span { display: block; }
.proc__h em { font-style: normal; color: var(--yaja-red); }
.proc__sub {
  font-family: var(--font-korean);
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--text-2);
  margin: 0 0 clamp(28px, 4vh, 44px);
  line-height: 1.6;
  max-width: 100%;
}
.proc__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Subtle left rail so the 3 steps read as a connected sequence,
   * not 3 unrelated rows. */
  border-left: 1px solid rgba(255,255,255,0.10);
  padding-left: clamp(20px, 2vw, 28px);
}
.proc__steps li {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 20px);
  font-family: var(--font-korean);
  color: rgba(255,255,255,0.78);
  padding: clamp(18px, 2.4vh, 24px) 0;
  position: relative;
}
.proc__steps li + li { border-top: 1px solid rgba(255,255,255,0.08); }
/* Red dot anchored to the left rail at each step's title row. */
.proc__steps li::before {
  content: '';
  position: absolute;
  left: calc(clamp(20px, 2vw, 28px) * -1 - 4px);
  top: clamp(22px, 3vh, 30px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yaja-red);
  box-shadow: 0 0 0 4px rgba(255, 72, 72, 0.16);
}
.proc__steps span {
  font-family: var(--font-num);
  font-weight: var(--w-bold);
  letter-spacing: 0.24em;
  color: var(--yaja-red);
  flex-shrink: 0;
  font-size: 11px;
  padding-top: 6px;
  min-width: 24px;
}

.section.is-in .proc__h span { animation: lineIn 1100ms var(--easing) both; }
.section.is-in .proc__h span:nth-child(1) { animation-delay: 200ms; }
.section.is-in .proc__h span:nth-child(2) { animation-delay: 360ms; }
.section.is-in .proc__h span:nth-child(3) { animation-delay: 520ms; }
@keyframes lineIn {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: none; }
}

/* ── 3-column vertical marquee ────────────────────────────────────
 * Fixed-height window through which the columns scroll. Each .proc__col
 * is a track that translates translateY 0 → −50% (its content is
 * duplicated below, so −50% lands on the duplicate and the loop is
 * seamless). Columns each have their own speed + negative delay so
 * they look like three independent flows. */
.proc__marquee {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  /* Visible window — tracks loop inside this. */
  height: clamp(580px, 76vh, 860px);
  overflow: hidden;
  z-index: 1;
  /* Soft top/bottom dissolve into the LED background. Slightly more
   * generous fade-zone than before (16% vs 14%) so the columns feel
   * like they're emerging FROM the canvas rather than being stamped
   * onto it. */
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    #000 16%,
    #000 84%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    #000 16%,
    #000 84%,
    transparent 100%);
  opacity: 1;
}
/* Soft left-edge fade — the marquee's left column shouldn't slam
 * against the copy column. ::before puts a small gradient veil over
 * the first 80px of the marquee that fades the leftmost photos into
 * the canvas. */
.proc__marquee::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 64px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.30) 50%,
    rgba(0,0,0,0) 100%);
}
.proc__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  will-change: transform;
  animation-name: procColUp;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.proc__col img {
  width: 100%;
  aspect-ratio: 9 / 14;
  object-fit: cover;
  border-radius: 6px;
  background: #0a0a0a;
  display: block;
}
@keyframes procColUp {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
.proc__col--0 { animation-duration: 28s; }
.proc__col--1 { animation-duration: 42s; animation-delay: -8s; }
.proc__col--2 { animation-duration: 34s; animation-delay: -16s; }

/* Mobile: marquee drops below the copy so the text reads first.
 * Three columns become a single visual band (still 3 cols) with
 * smaller thumbs. */
@media (max-width: 880px) {
  /* Override the desktop bleed: revert .proc to standard mobile
   * padding so the section sits inside .page-frame's bounds on
   * narrow viewports. */
  .proc { padding-left: 24px; padding-right: 24px; }
  .proc__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: 0;
    padding: 0;
    max-width: 100%;
  }
  .proc__copy { padding: 0; max-width: 100%; }
  .proc__marquee {
    height: 360px;
    gap: 8px;
  }
  .proc__marquee::before { display: none; }   /* no left fade on stacked layout */
  .proc__col { gap: 8px; }
  .proc__col img { border-radius: 4px; }
}

/* ════════ 06 — NUMBERS (now precedes WHAT-WE-OFFER) ════════════════
 * Six cells: 3×2 on desktop, 3×2 on tablet, 2×3 on phone. The eyebrow
 * makes it read "NUMBERS." parallel to "TRUSTED BY." / "BRAND
 * PARTNERSHIPS." etc. */
.nums {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vh, 56px);
}
.nums__h {
  font-family: var(--font-latin);
  font-size: var(--fs-display);
  font-weight: var(--w-black);
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
  line-height: 1;
}
.nums__h em { color: var(--yaja-red); font-style: normal; }
.nums__sub {
  font-family: var(--font-korean);
  font-size: clamp(14px, 1.1vw, 17px);
  color: var(--text-3);
  margin: -16px 0 8px;
  max-width: 60ch;
}
.nums__note,
.about-stats__note {
  font-family: var(--font-korean);
  font-size: clamp(11px, 0.85vw, 12px);
  line-height: 1.5;
  color: var(--text-4);
  margin: clamp(16px, 2vh, 24px) 0 0;
  max-width: 64ch;
  word-break: keep-all;
}
.about-stats__note { padding: 0 clamp(20px, 5vw, 64px); }
.nums__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: clamp(20px, 2.4vw, 36px) clamp(28px, 3vw, 56px);
  width: 100%;
}
.nums__cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.nums__digit {
  font-family: var(--font-num);
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: var(--w-black);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: #fff;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.nums__digit em {
  font-family: var(--font-korean);
  font-style: normal;
  font-weight: var(--w-regular);
  font-size: 0.34em;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0;
}
.nums__label {
  font-family: var(--font-korean);
  font-size: clamp(12px, 0.9vw, 13px);
  font-weight: var(--w-bold);
  letter-spacing: 0.04em;
  color: var(--text-3);
}
@media (max-width: 880px) {
  .nums__grid { grid-template-columns: repeat(2, 1fr); gap: 8px 24px; }
  .nums__digit { font-size: clamp(36px, 12vw, 58px); }
}

.award {
  position: relative;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  padding: 28px 36px 22px;
  border: 1px solid rgba(255,160,80,0.42);
  background: linear-gradient(180deg, rgba(255,160,80,0.04), rgba(255,160,80,0));
  text-align: center;
}
.award__star {
  font-family: var(--font-latin);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow);
  color: rgba(255,180,90,0.95);
  margin-bottom: 12px;
}
.award__title {
  font-family: var(--font-latin);
  font-size: var(--fs-h3);
  font-weight: var(--w-bold);
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.award__sub {
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-eyebrow);
  color: rgba(255,255,255,0.85);
  margin-bottom: 10px;
}
.award__caption {
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-eyebrow);
  color: var(--text-3);
}
.award__corner {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid rgba(255,180,90,0.85);
}
.award__corner--tl { top: -1px; left: -1px;   border-right: 0; border-bottom: 0; }
.award__corner--tr { top: -1px; right: -1px;  border-left: 0; border-bottom: 0; }
.award__corner--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.award__corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.section.is-in .nums__cell:nth-child(1) { animation: chrIn 900ms var(--easing) 100ms both; }
.section.is-in .nums__cell:nth-child(2) { animation: chrIn 900ms var(--easing) 200ms both; }
.section.is-in .nums__cell:nth-child(3) { animation: chrIn 900ms var(--easing) 300ms both; }
.section.is-in .nums__cell:nth-child(4) { animation: chrIn 900ms var(--easing) 400ms both; }
.section.is-in .nums__cell:nth-child(5) { animation: chrIn 900ms var(--easing) 500ms both; }
.section.is-in .nums__cell:nth-child(6) { animation: chrIn 900ms var(--easing) 600ms both; }
.section.is-in .award { animation: chrIn 1100ms var(--easing) 720ms both; }

/* ════════ 08 — NEWS HOME (replaces the old Slogan section) ═════════ */
.news-home {}
.news-home__head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'h    all'
    'sub  all';
  align-items: end;
  gap: 4px 24px;
  margin-bottom: clamp(28px, 3.6vh, 44px);
}
.news-home__h {
  grid-area: h;
  font-family: var(--font-latin);
  font-size: var(--fs-display);
  font-weight: var(--w-black);
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
  line-height: 1;
}
.news-home__h em { color: var(--yaja-red); font-style: normal; }
.news-home__sub {
  grid-area: sub;
  font-family: var(--font-korean);
  font-size: clamp(13px, 1vw, 15px);
  color: var(--text-3);
  margin: 0;
}
.news-home__all {
  grid-area: all;
  align-self: end;
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow);
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(10,10,10,0.42);
  transition: border-color 220ms var(--easing), color 220ms var(--easing), transform 220ms var(--easing);
}
.news-home__all:hover {
  border-color: var(--yaja-red);
  color: var(--yaja-red);
  transform: translateY(-2px);
}
.news-home__all i { font-style: normal; transition: transform 220ms var(--easing); }
.news-home__all:hover i { transform: translateX(3px); }

.news-home__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.news-home__card {
  display: flex;
  flex-direction: column;
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateY(24px);
  transition: transform 240ms var(--easing), border-color 240ms var(--easing);
}
.section.is-in .news-home__card { animation: chrIn 900ms var(--easing) var(--delay, 0ms) both; }
.news-home__card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,72,72,0.55);
}
.news-home__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a0a0a;
}
.news-home__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms ease;
}
.news-home__card:hover .news-home__media img { transform: scale(1.04); }
.news-home__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 20px;
}
.news-home__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.news-home__date { color: var(--text-3); }
.news-home__cat  { color: var(--yaja-red); }
.news-home__title {
  font-family: var(--font-korean);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: var(--w-bold);
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-home__cta {
  margin-top: auto;
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
}
.news-home__cta i { font-style: normal; }
@media (max-width: 880px) {
  .news-home__head {
    grid-template-columns: 1fr;
    grid-template-areas: 'h' 'sub' 'all';
    gap: 8px;
  }
  .news-home__all { justify-self: flex-start; }
  .news-home__grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ════════ 09 — CTA + FOOTER ═════════════════════════════════════════
 * The section now hosts logo → tag → twin CTAs → 4-column footer.
 * Min-height stays so the section feels weighty on big monitors, but
 * we allow it to grow naturally on smaller viewports so the footer
 * doesn't get clipped. */
.section--end {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: #000;
  min-height: 100vh;
  height: auto !important;
  max-height: none !important;
}
.section--end .sectiontag { z-index: 10; }
.end-mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 2px;
  z-index: 0;
}
.end-mosaic__tile {
  background: #0a0a0a;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.92);
}
.end-mosaic__tile image-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.section.is-in .end-mosaic__tile {
  animation: endTileIn 1200ms var(--easing) var(--delay, 0ms) forwards;
}
@keyframes endTileIn { to { opacity: 1; transform: scale(1); } }
.end-mosaic__overlay {
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.78) 100%);
  z-index: 1;
  pointer-events: none;
}
.end {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(80px, 12vh, 140px) clamp(24px, 5vw, 64px) clamp(40px, 6vh, 80px);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  gap: 0;
}
.end__logo {
  width: clamp(260px, 28vw, 420px);
  height: auto;
  filter: drop-shadow(0 4px 30px rgba(255,72,72,0.4));
}
.end__tag {
  margin: 22px 0 0;
  font-family: var(--font-korean);
  font-size: clamp(13px, 1vw, 15px);
  color: var(--text-2);
  text-align: center;
}

/* Twin-CTA row — RECRUIT (outline) + CONTACT (red fill).
 * Refined typography: bigger label, smaller/tighter eyebrow with
 * a hairline divider below it (badge feel), arrow upgraded to a
 * weighted SVG, more generous padding, soft scale on hover. */
.end__cta-row {
  margin-top: clamp(28px, 4.4vh, 44px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 720px;
}
.end__cta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'eyebrow arrow'
    'label   arrow';
  align-items: end;
  gap: 14px 18px;
  padding: clamp(26px, 3.2vh, 34px) clamp(26px, 3vw, 36px);
  border-radius: 14px;
  text-decoration: none;
  font-family: var(--font-latin);
  cursor: pointer;
  transition:
    transform 260ms var(--easing),
    background 260ms var(--easing),
    border-color 260ms var(--easing),
    box-shadow 260ms var(--easing);
  overflow: hidden;
}
/* Eyebrow now sits as a small "badge" — short hairline under it
 * reads as a separator and gives the eyebrow a distinct stratum
 * from the label. */
.end__cta-eyebrow {
  grid-area: eyebrow;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: var(--w-black);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.78;
  align-self: start;
}
.end__cta-eyebrow::after {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.end__cta-label {
  grid-area: label;
  font-family: var(--font-korean);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: var(--w-bold);
  letter-spacing: -0.012em;
  text-align: left;
  line-height: 1.2;
}
/* Arrow ring — circular halo around a unicode arrow so it reads as
 * an explicit "go" affordance instead of a floating glyph. */
.end__cta-arrow {
  grid-area: arrow;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 3.4vw, 44px);
  height: clamp(38px, 3.4vw, 44px);
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1;
  transition: transform 280ms var(--easing), background 280ms var(--easing);
}
.end__cta:hover .end__cta-arrow {
  transform: translateX(4px);
}

/* RECRUIT — outline / talent funnel. White text on dark, hovers to red. */
.end__cta--recruit {
  background: rgba(10,10,10,0.58);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  backdrop-filter: blur(4px);
}
.end__cta--recruit:hover {
  border-color: var(--yaja-red);
  background: rgba(255,72,72,0.10);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -18px rgba(255,72,72,0.35);
}
.end__cta--recruit:hover .end__cta-arrow {
  background: var(--yaja-red);
  border-color: var(--yaja-red);
  color: #fff;
}

/* CONTACT — solid red fill / sales funnel. The visual climax of the
 * page so it gets a slightly stronger lift + extra red bloom. */
.end__cta--contact {
  background: var(--yaja-red);
  border: 1px solid var(--yaja-red);
  color: #fff;
  box-shadow: 0 16px 44px -16px rgba(255,72,72,0.55);
}
.end__cta--contact:hover {
  background: #ff6363;
  border-color: #ff6363;
  transform: translateY(-4px);
  box-shadow: 0 22px 56px -18px rgba(255,72,72,0.8);
}
.end__cta--contact .end__cta-arrow {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.45);
}
.end__cta--contact:hover .end__cta-arrow {
  background: #fff;
  border-color: #fff;
  color: var(--yaja-red);
}

@media (max-width: 560px) {
  .end__cta-row { grid-template-columns: 1fr; gap: 12px; }
}

/* ════════ FOOTER — structural ════════════════════════════════════
 * 4-column upper deck on desktop, stacked on phone. Lives BELOW the
 * twin-CTA row so the conversion buttons stay above the fold; the
 * footer is the polite "and if you scroll further, here's the rest". */
.site-footer {
  width: 100%;
  margin-top: clamp(48px, 8vh, 80px);
  padding-top: clamp(32px, 4vh, 48px);
  border-top: 1px solid rgba(255,255,255,0.14);
  text-align: left;
}
/* Standalone footer on subpages — gives itself the page gutter + a
 * little bottom breathing room (on home it inherits these from .end). */
.site-footer--standalone {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 64px;
  padding-right: 64px;
  padding-bottom: clamp(40px, 6vh, 64px);
  box-sizing: border-box;
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 56px);
  margin-bottom: 48px;
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.site-footer__col--brand { padding-right: 16px; }
.site-footer__logo {
  width: 132px;
  height: auto;
  margin-bottom: 4px;
}
.site-footer__tagline {
  font-family: var(--font-korean);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
  max-width: 32ch;
}
.site-footer__addr {
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.7;
  margin: 0;
}
.site-footer__h {
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: var(--w-black);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--yaja-red);
  margin-bottom: 4px;
}
.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer__list a {
  font-family: var(--font-korean);
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  transition: color 180ms var(--easing);
}
.site-footer__list a:hover { color: #fff; }

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.site-footer__legal {
  margin-left: 16px;
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.site-footer__legal:hover { color: #fff; }
@media (max-width: 880px) {
  /* Kill the 100vh floor on phones — it was centring the shorter
   * content and leaving a long empty band below the footer. Let the
   * section be exactly as tall as its content, and drop the inherited
   * 80px section padding-bottom that stacked under the footer. */
  .section.section--end { min-height: auto; justify-content: flex-start; padding-bottom: 0; }
  .end { padding-bottom: 28px; }
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .site-footer__col--brand { grid-column: span 2; }
  .site-footer--standalone { padding-left: 20px; padding-right: 20px; }
  .site-footer__bottom {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SUBPAGES (About / Projects / Column / News / Contact)
   ═══════════════════════════════════════════════════════════════════ */

.page {
  min-height: 100vh;
  /* No bottom padding — the standalone <SiteFooter> now closes every
   * subpage. The old 120px left a black, contentless scroll band. */
  padding: 0;
}
.page-hero {
  width: 100%;
  padding: 180px 0 80px;
}
.page-hero__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.page-hero__eyebrow {
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow);
  color: var(--text-3);
  text-transform: uppercase;
}
.page-hero__eyebrow em { color: var(--yaja-red); font-style: normal; margin-right: 8px; }
.page-hero__title {
  font-family: var(--font-latin);
  font-size: var(--fs-display);
  font-weight: var(--w-black);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.page-hero__accent { font-style: normal; color: var(--yaja-red); }
.page-hero__sub {
  font-family: var(--font-korean);
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: rgba(255,255,255,0.65);
  max-width: 720px;
  margin: 8px 0 0;
  /* Korean must break only at word/phrase boundaries — without this it
   * wraps character-by-character and splits words mid-syllable (the
   * "謎の改行" / weird line break). */
  word-break: keep-all;
}
.page.is-in .page-hero__title   { animation: chrIn 1100ms var(--easing) 200ms both; }
.page.is-in .page-hero__sub     { animation: chrIn 1100ms var(--easing) 400ms both; }
.page.is-in .page-hero__eyebrow { animation: chrIn 1100ms var(--easing) 100ms both; }

/* About */
.about-stats { padding: 40px 0 80px; }
/* About stats grid — mirrors the home NUMBERS section: 6 cells in
 * a 3×2 grid, dividers per cell, red units. One visual treatment
 * across both pages. */
.about-stats__row {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: clamp(20px, 2.4vw, 36px) clamp(28px, 3vw, 56px);
}
.about-stats__cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.about-stats__num {
  font-family: var(--font-num);
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: var(--w-black);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: #fff;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.about-stats__num em {
  font-family: var(--font-korean);
  font-style: normal;
  font-weight: var(--w-regular);
  font-size: 0.34em;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0;
}
.about-stats__label {
  font-family: var(--font-korean);
  font-size: clamp(12px, 0.9vw, 13px);
  font-weight: var(--w-bold);
  letter-spacing: 0.04em;
  color: var(--text-3);
}
@media (max-width: 880px) {
  .about-stats__row { grid-template-columns: repeat(2, 1fr); gap: 8px 24px; }
  .about-stats__num { font-size: clamp(36px, 12vw, 58px); }
}

/* ── WHO WE ARE — mission/manifesto, 2-col (headline | body) ──────── */
/* WHO WE ARE — single-column editorial mission block (was a cramped
 * 2-col grid with a too-small headline, which read as inconsistent
 * with the rest of the site). Now: a display-scale headline matching
 * the site's section titles, then the manifesto in a comfortable
 * single measure. Centered block, left-aligned text. */
.about-who {
  width: 100%;
  /* Match the PageHero inner box exactly (1280 / 64px gutter) so the
   * eyebrow + headline left-align to the same edge as "01 — ABOUT YAJA". */
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(56px, 8vh, 104px) 64px clamp(36px, 5vh, 64px);
  display: flex;
  flex-direction: column;
}
.about-who .eyebrow {
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow);
  color: var(--yaja-red);
  margin-bottom: 20px;
}
.about-who__h {
  font-family: var(--font-latin);
  /* Matches the Works section titles ("01 — YAJA Originals",
   * .works-group__h) so it carries proper section-title weight. */
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: var(--w-black);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 clamp(24px, 3vh, 40px);
}
/* Desktop: the explicit breaks aren't needed — let it sit on one line.
 * Mobile keeps the breaks (they look better stacked). */
@media (min-width: 881px) {
  .about-who__h .who-br { display: none; }
}
.about-who__body {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vh, 30px);
  max-width: 70ch;
}
/* Lede — the punchy opener. Larger + brighter, red left rail so it
 * reads as the mission's first beat. */
.about-who__lede {
  font-family: var(--font-korean);
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: var(--w-bold);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
  padding-left: 20px;
  border-left: 3px solid var(--yaja-red);
  word-break: keep-all;
}
.about-who__p {
  font-family: var(--font-korean);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.85;
  color: var(--text-2);
  margin: 0;
  word-break: keep-all;
}
/* Closing line — the resolution. Brighter, a touch larger than body. */
.about-who__close {
  font-family: var(--font-korean);
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: var(--w-bold);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  word-break: keep-all;
}

/* ── COMPANY — spec sheet (was FACT SHEET), centered card ─────────── */
.about-company {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(32px, 4vh, 56px) 64px clamp(64px, 9vh, 110px);
}
.about-company__inner {
  padding: 28px 32px 26px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(10,10,10,0.5);
}
.about-company__h {
  font-family: var(--font-latin);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow);
  color: var(--yaja-red);
  margin-bottom: 20px;
}
.about-company__dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  row-gap: 14px;
  column-gap: 28px;
  font-family: var(--font-latin);
  font-size: 14px;
}
.about-company__dl dt {
  font-family: var(--font-korean);
  color: var(--text-4);
  font-weight: var(--w-regular);
}
.about-company__dl dd {
  color: #fff;
  font-weight: var(--w-bold);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Projects / Column / News legacy classes (.proj-*, .col-*, .news-row*, .news-list)
 * — removed 2026-06-02. Superseded by .account-card, .work-card, .news-card. */


/* Contact */
.contact-grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 64px 80px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.contact-card {
  padding: 32px 32px 28px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: rgba(10,10,10,0.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(28px); /* match chrIn from */
  transition: border-color 240ms var(--easing), transform 240ms var(--easing);
}
.page.is-in .contact-card:nth-child(1) { animation: chrIn 800ms var(--easing) 200ms both; }
.page.is-in .contact-card:nth-child(2) { animation: chrIn 800ms var(--easing) 320ms both; }
.page.is-in .contact-card:nth-child(3) { animation: chrIn 800ms var(--easing) 440ms both; }
.page.is-in .contact-card:nth-child(4) { animation: chrIn 800ms var(--easing) 560ms both; }
.contact-card:hover { border-color: var(--yaja-red); transform: translateY(-2px); }
.contact-card__eyebrow {
  font-family: var(--font-latin);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow);
  color: var(--yaja-red);
}
.contact-card h3 {
  font-family: var(--font-latin);
  font-size: var(--fs-h4);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.contact-card a {
  font-family: var(--font-latin);
  font-size: 17px;
  font-weight: var(--w-bold);
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 2px;
  width: fit-content;
}
.contact-card a:hover { color: var(--yaja-red); border-color: var(--yaja-red); }
.contact-card p {
  font-family: var(--font-korean);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  margin: 0;
}
.contact-card address {
  font-style: normal;
  font-family: var(--font-korean);
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
}
.contact-card__socials {
  display: flex;
  gap: 18px;
  margin-top: 8px;
}
.contact-card__socials a {
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 0.18em;
  border: 0;
  padding-bottom: 0;
}

/* ── Contact inquiry form ── aligns to the contact-grid box (1200/64). */
.contact-form-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(8px, 1vh, 16px) 64px clamp(72px, 10vh, 120px);
}
.contact-form__head { margin-bottom: clamp(22px, 3vh, 34px); }
.contact-form__head .contact-card__eyebrow { display: block; margin-bottom: 12px; }
.contact-form__h {
  font-family: var(--font-latin);
  font-weight: var(--w-black);
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 10px;
}
.contact-form__sub {
  font-family: var(--font-korean);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
  color: var(--text-3);
  margin: 0;
  word-break: keep-all;
}
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 880px;
}
.contact-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.contact-field--full { grid-column: 1 / -1; }
.contact-field > span {
  font-family: var(--font-korean);
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 0.04em;
  color: var(--text-2);
}
.contact-field > span em { font-style: normal; font-weight: var(--w-regular); color: var(--text-4); }
.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 13px 14px;
  color: #fff;
  font-family: var(--font-korean);
  font-size: 15px;
  transition: border-color 160ms ease, background 160ms ease;
}
.contact-field textarea { resize: vertical; min-height: 124px; line-height: 1.6; }
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: rgba(255,255,255,0.30); }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--yaja-red);
  background: rgba(255,255,255,0.06);
}
.contact-field select {
  appearance: none; -webkit-appearance: none;
  color-scheme: dark;
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.contact-form__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 4px;
}
.contact-form__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 30px;
  background: var(--yaja-red);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: var(--font-latin);
  font-size: 13px;
  font-weight: var(--w-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 6px;
  transition: transform 200ms ease, background 200ms ease;
}
.contact-form__btn:hover { transform: translateY(-2px); background: #ff6464; }
.contact-form__btn i { font-style: normal; font-size: 16px; }
.contact-form__to {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--text-4);
}
/* "How did you hear about us" — multi-select chips. */
.contact-sources { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-sources__legend {
  display: block;
  font-family: var(--font-korean);
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 0.04em;
  color: var(--text-2);
  margin-bottom: 12px;
}
.contact-sources__legend em { font-style: normal; font-weight: var(--w-regular); color: var(--text-4); margin-left: 6px; }
.contact-sources__opts { display: flex; flex-wrap: wrap; gap: 9px; }
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  font-family: var(--font-korean);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  user-select: none;
}
.contact-chip:hover { border-color: rgba(255,255,255,0.34); }
.contact-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.contact-chip::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
  transition: border-color 150ms ease, background 150ms ease;
}
.contact-chip.is-on {
  border-color: var(--yaja-red);
  background: rgba(255, 72, 72, 0.12);
  color: #fff;
}
.contact-chip.is-on::before {
  border-color: var(--yaja-red);
  background: var(--yaja-red) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M1.5 5l2.5 2.5L8.5 2.5' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/9px no-repeat;
}

/* ════════ RESPONSIVE ═════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .topnav { padding: 14px 20px; }
  .topnav__burger { display: flex; }
  .topnav__menu {
    display: none;
    position: fixed;
    left: 0; right: 0; top: 64px;
    transform: none;
    flex-direction: column;
    gap: 0;
    background: rgba(8,8,8,0.97);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 8px 20px 16px;
  }
  .topnav.is-open .topnav__menu { display: flex; }
  .topnav__menu li { width: 100%; }
  .topnav__menu a {
    display: block;
    width: 100%;
    padding: 16px 2px;
    font-size: 15px;
    letter-spacing: 0.16em;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .sectiontag { right: 20px; top: 72px; }
  .page-frame { padding: 0 24px; }
  .section { padding-top: 110px; padding-bottom: 80px; }
  .section--stack { padding-top: 110px; padding-bottom: 100px; gap: 80px; }

  .svc__grid { grid-template-columns: 1fr; gap: 56px; }
  .svc-item__media { aspect-ratio: 16/10; }

  /* Mobile YAJA CAMP / YCN — PERSOL × YAJA-style left-aligned stack.
   * Order (top→bottom):
   *   logo (avatar) → eyebrow ("YAJA ORIGINALS") → title (handle)
   *   → VIDEO → headline → body → rule → stats
   * The brand block (logo + eyebrow + title) is left-aligned vertical;
   * the video sits right after the title so the user reads who, then
   * watches them. The deeper body + stats follow. */
  .orig, .orig--right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    text-align: left;
  }
  .orig__copy { display: contents; }
  .orig__brand {
    order: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
  }
  .orig__avatar { width: 52px; height: 52px; }
  .orig__visual { order: 2; max-width: 100%; width: 100%; margin: 4px 0 6px; }
  .orig__phone  { margin: 0 auto; }
  .orig--right .orig__visual { order: 2; }
  .orig__ko     { order: 3; margin: 0; text-align: left; }
  .orig__body   { order: 4; text-align: left; }
  .orig__rule   { order: 5; margin: 4px 0; }
  .orig__stats  { order: 6; }
  /* SocialLinks renders <ul class="socials-text"> as a child of
   * orig__copy. With display:contents on orig__copy the ul becomes a
   * direct flex child of .orig — without `order:` it defaults to 0
   * and pops above .orig__brand (order: 1). Pin to the end. */
  .orig__copy .socials-text { order: 7; margin-top: 6px; }

  .persol__body { grid-template-columns: 1fr; gap: 40px; }
  .persol__phone { max-width: 280px; margin: 0 auto; }
  .persol__hero { gap: 18px; align-items: flex-start; flex-direction: column; }
  /* persol__minis on mobile is handled by the dedicated block lower in
   * the file (single-column label-left / value-right rows). Old
   * `grid-template-columns: repeat(3, 1fr)` removed to avoid conflict.
   * .persol__countries layout for ≤720px lives in the next breakpoint. */

  .bwork__grid { grid-template-columns: 1fr; }
  /* Tall portrait on mobile (was 16/10 — too short, so the overlaid
   * body filled the whole card and the logo collided with the top tag).
   * 4/5 gives the body room at the bottom with video breathing above. */
  .bcard { aspect-ratio: 4 / 5; }

  .trusted__grid { grid-template-columns: repeat(2, 1fr); }

  /* (.proc layout for mobile is fully defined in the .proc--marquee
   * media block — single-col stack with the marquee dropping below.) */

  .nums__row { grid-template-columns: 1fr; gap: 56px; }

  .page-hero { padding: 130px 0 60px; }
  .page-hero__inner { padding: 0 20px; }
  .about-stats__row { padding: 36px 20px 0; grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .about-who { padding: 44px 20px 28px; max-width: 100%; }
  .about-who__h { font-size: clamp(32px, 9vw, 48px); margin-bottom: 24px; }
  .about-company { padding: 20px 20px 56px; }
  .about-company__inner { padding: 22px 20px 20px; }
  .about-company__dl { grid-template-columns: minmax(80px, auto) 1fr; column-gap: 18px; }
  .proj-grid { grid-template-columns: 1fr; padding: 30px 20px 60px; }
  .col-list, .news-list, .contact-grid { padding-left: 20px; padding-right: 20px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form-wrap { padding-left: 20px; padding-right: 20px; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form__foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .news-row { grid-template-columns: 100px 92px 1fr 16px; gap: 16px; }

  /* .end__footer — retired, see .site-footer block above. */
}
@media (max-width: 720px) {
  .siderail { display: none; }
  /* .slogan__line — slogan section retired, rule removed. */
  /* .end__footer — old footer retired, replaced by .site-footer; rule removed. */
  .topnav { padding: 12px 16px; }
  .topnav__cta { padding: 7px 14px; font-size: 12px; }
  .persol__hero-num { font-size: clamp(44px, 13vw, 84px); }
  .award { padding: 22px 20px 18px; }

  /* persol__minis at <720px: see the single-column "label-left,
   * value-right" rules in the persol__data block lower down. We only
   * keep the hero-num scale here. */

  /* Mobile country block — 3 cols won't fit on a phone, so each
   * country becomes a sub-block instead: name on top spanning full
   * width, then the 2 metrics in a 1fr 1fr row underneath.
   * Achieved with grid-column: 1/-1 on the name; metric divs fall
   * into auto-placement (row 2 col 1, row 2 col 2). */
  .persol__countries li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    align-items: end;
  }
  .persol__country-name {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    color: #fff;
  }
  .persol__country-flag { font-size: 22px; margin-right: 10px; vertical-align: -1px; }
  .persol__country-metric {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
  }
  .persol__country-metric span {
    font-size: 10px !important;
    color: var(--text-3);
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .persol__country-metric b { font-size: 22px; }
  .persol__country-metric b em { font-size: 12px; }

  /* CAMP / YCN stats — label left, giant number right, divided rows */
  .orig__stats { flex-direction: column; gap: 0; width: 100%; align-items: stretch; }
  .orig__stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .orig__stat:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
  .orig__stat-label { margin-bottom: 0; font-size: 13px; line-height: 1.3; max-width: 48%; }
  .orig__stat-num { font-size: clamp(52px, 17vw, 92px); }
  .news-row { grid-template-columns: 1fr; gap: 8px; }
  .news-row__arrow { display: none; }
  .about-stats__row { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
 * WORKS page (replaces Projects)
 * Two top-level groups (Originals + Partnerships), each split into
 * "Accounts" and "Works" sub-sections.
 * ════════════════════════════════════════════════════════════════════ */
.page--works { padding-bottom: 0; }

.works-group {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(48px, 7vh, 96px) clamp(20px, 4vw, 64px);
}
.works-group + .works-group {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.works-group__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: baseline;
  margin-bottom: clamp(40px, 6vh, 72px);
}
.works-group__num {
  font-family: var(--font-num);
  font-weight: var(--w-black);
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--yaja-red);
  font-variant-numeric: tabular-nums;
}
.works-group__h {
  font-family: var(--font-latin);
  font-weight: var(--w-black);
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 8px;
}
.works-group__lede {
  font-family: var(--font-korean);
  font-size: clamp(13px, 1vw, 16px);
  color: var(--text-3);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0;
}
.works-sub {
  margin-top: clamp(32px, 5vh, 56px);
}
.works-sub__h {
  font-family: var(--font-latin);
  /* Sub-section header ("계정" / "작품") sits one rung above the
   * cards' own eyebrows in the hierarchy, so size it accordingly:
   * group label LARGER than per-card eyebrow. */
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: var(--w-black);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 72, 72, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.works-accounts {
  display: grid;
  /* Match the Works grid template below so account cards and work
   * cards line up at the same column boundaries. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}
.account-card {
  background: linear-gradient(180deg, rgba(28, 28, 28, 0.6), rgba(15, 15, 15, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: clamp(24px, 2.8vw, 36px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(28px); /* match chrIn from */
  animation: chrIn 900ms var(--easing) var(--delay, 0ms) forwards;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
}
.account-card__head {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 20px);
}
/* All account cards (CAMP / YCN / PERSOL APAC) now use the round
 * .account-card__avatar; the rect .account-card__logo treatment was
 * retired with the PERSOL avatar swap. */
.account-card__avatar {
  width: clamp(64px, 5.2vw, 84px);
  height: clamp(64px, 5.2vw, 84px);
  flex-shrink: 0;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}
.account-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-card__eyebrow {
  font-family: var(--font-latin);
  /* Per-card eyebrow lives BELOW the sub-section header in hierarchy,
   * so keep it small + delicate. */
  font-size: clamp(9px, 0.7vw, 11px);
  font-weight: var(--w-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--yaja-red);
  opacity: 0.85;
  margin-bottom: 6px;
}
.account-card__handle {
  font-family: var(--font-latin);
  font-weight: var(--w-black);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1;
  color: #fff;
  margin: 0;
  letter-spacing: -0.025em;
}
.account-card__sub {
  font-family: var(--font-korean);
  font-size: clamp(13px, 1vw, 15px);
  color: var(--text-3);
  margin: 0;
  line-height: 1.55;
}
/* Two stat pairs laid out as two vertical columns:
 *   col 1: dt1 (label)   col 2: dt2 (label)
 *   col 1: dd1 (value)   col 2: dd2 (value)
 * Mirrors the home page .orig__stat — label above, big red number
 * below, two of them side by side. Explicit grid placement keeps the
 * pairs strictly aligned regardless of label/value text length. */
.account-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(20px, 2.4vw, 40px);
  row-gap: 6px;
  margin: 0;
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  align-items: end;
}
.account-card__stats dt:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.account-card__stats dd:nth-of-type(1) { grid-column: 1; grid-row: 2; }
.account-card__stats dt:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.account-card__stats dd:nth-of-type(2) { grid-column: 2; grid-row: 2; }
.account-card__stats dt {
  font-family: var(--font-korean);
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.02em;
  color: var(--text-3);
  margin: 0;
}
.account-card__stats dd {
  margin: 0;
  font-family: var(--font-num);
  font-weight: var(--w-black);
  font-size: clamp(34px, 3.4vw, 56px);
  color: var(--yaja-red);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}
.work-card {
  background: rgba(15, 15, 15, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px); /* match chrIn from */
  animation: chrIn 900ms var(--easing) var(--delay, 0ms) forwards;
  display: flex;
  flex-direction: column;
}
.work-card__media {
  position: relative;
  aspect-ratio: 9 / 14;
  background: #000;
  overflow: hidden;
}
.work-card__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.work-card__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
/* Logo overlay — NO white box, brand colours kept as-is (per request),
 * enlarged, top-left of the video. A layered drop-shadow gives every
 * mark a soft dark halo so it separates from the footage on any frame
 * without recolouring it. */
.work-card__chip {
  position: absolute;
  bottom: 18px; left: 18px;
  z-index: 2;
  /* The logos are pre-trimmed flush, so the chip box == the glyph and
   * it sits flush in the bottom-left corner (tag chip owns top-left).
   * Per-logo height comes in via --lhm (mobile) / --lh (desktop). */
  height: var(--lhm, 52px);
  pointer-events: none;
}
.work-card__chip img {
  height: 100%;
  width: auto;
  max-width: min(260px, 68vw);
  object-fit: contain;
  object-position: left bottom;
  display: block;
  filter:
    drop-shadow(0 1px 4px rgba(0,0,0,0.55))
    drop-shadow(0 3px 14px rgba(0,0,0,0.45));
}
/* Square app icons (Wippy / Modudoc) — round the corners. */
.work-card__chip--round img { border-radius: 21%; }
/* Dark / wordmark logos sit on a white plate so they read on any frame.
 * height stays the glyph size (content-box); the plate padding grows the
 * box around it. */
.work-card__chip--plate {
  background: #fff;
  border-radius: 6px;
  /* Tight margin like the home Samsung pill — logo dominates the plate. */
  padding: clamp(4px, 0.5vw, 6px) clamp(7px, 0.8vw, 10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
}
.work-card__chip--plate img { filter: none; }
@media (min-width: 881px) {
  .work-card__chip { height: var(--lh, 44px); }
}
/* Category tag — top-left chip, same treatment as the home brand cards. */
.work-card__flag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 28px);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.62);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-latin);
  font-size: 10px;
  font-weight: var(--w-black);
  letter-spacing: 0.12em;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.work-card__flag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--yaja-red);
  box-shadow: 0 0 8px rgba(255, 72, 72, 0.7);
  flex-shrink: 0;
}
.work-card__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.work-card__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.work-card__year {
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: var(--w-bold);
  color: var(--text-4);
  letter-spacing: 0.1em;
}
.work-card__title {
  font-family: var(--font-latin);
  font-weight: var(--w-black);
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
}
.work-card__desc {
  font-family: var(--font-korean);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-3);
  margin: 0;
}
.work-card__meta {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.work-card__meta li {
  font-family: var(--font-num);
  font-size: 10.5px;
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.78);
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
}

/* ════════════════════════════════════════════════════════════════════
 * RECRUIT page
 * ════════════════════════════════════════════════════════════════════ */
.page--recruit { padding-bottom: 0; }
.recruit {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(40px, 6vh, 80px) clamp(20px, 4vw, 64px) 0;
}
.recruit__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.recruit__lead { grid-column: 1; }
.recruit__h {
  font-family: var(--font-latin);
  font-weight: var(--w-black);
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 12px 0 24px;
}
.recruit__h em {
  font-style: normal;
  color: var(--yaja-red);
}
.recruit__body {
  font-family: var(--font-korean);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.7;
  color: var(--text-3);
  margin: 0;
  max-width: 56ch;
}
.recruit__facts {
  grid-column: 2;
  grid-row: 1 / -1;     /* span all left-column rows; sticky inside */
  background: rgba(20, 20, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 24px;
  position: sticky;
  top: 96px;
}
.recruit__facts-h {
  font-family: var(--font-latin);
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: 0.28em;
  color: var(--yaja-red);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 72, 72, 0.3);
}
.recruit__facts dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 18px;
}
.recruit__facts dt {
  font-family: var(--font-korean);
  font-size: 11px;
  color: var(--text-4);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.recruit__facts dd {
  margin: 0;
  font-family: var(--font-korean);
  font-size: 13px;
  color: #fff;
  line-height: 1.45;
}
.recruit__block {
  grid-column: 1;
  margin-top: clamp(28px, 4vh, 48px);
}
.recruit__block-h {
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--yaja-red);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 72, 72, 0.3);
}
.recruit__chips {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.recruit__chips li {
  font-family: var(--font-korean);
  font-size: 13px;
  font-weight: var(--w-bold);
  color: #fff;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
}
.recruit__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recruit__list li {
  font-family: var(--font-korean);
  font-size: 13.5px;
  color: var(--text-2);
  padding-left: 18px;
  position: relative;
}
.recruit__list li::before {
  content: "·";
  position: absolute;
  left: 4px; top: -2px;
  color: var(--yaja-red);
  font-weight: var(--w-black);
}
.recruit__cta {
  grid-column: 1;
  margin-top: clamp(32px, 5vh, 56px);
  padding-top: clamp(24px, 4vh, 40px);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.recruit__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  background: var(--yaja-red);
  color: #fff;
  font-family: var(--font-latin);
  font-size: 13px;
  font-weight: var(--w-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 200ms ease, background 200ms ease;
}
.recruit__btn:hover { transform: translateY(-2px); background: #ff6464; }
.recruit__btn i { font-style: normal; font-size: 16px; }
.recruit__alt {
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.recruit__alt-note {
  font-family: var(--font-korean);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
  margin: -4px 0 0;
  max-width: 46ch;
  word-break: keep-all;
}
.recruit__deadline {
  font-family: var(--font-korean);
  font-size: 12px;
  color: var(--text-4);
  margin: 0;
}
.recruit__deadline strong {
  color: #fff;
  font-weight: var(--w-bold);
}

/* ── 모집 분야 — 제작 감독 / 작가 cards ──────────────────────────── */
.recruit__roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.recruit__role {
  padding: 20px 22px 22px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.recruit__role-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.recruit__role-name {
  font-family: var(--font-korean);
  font-size: 18px;
  font-weight: var(--w-black);
  color: #fff;
}
.recruit__role-sub {
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yaja-red);
}
.recruit__role-duties {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.recruit__role-duties li {
  font-family: var(--font-korean);
  font-size: 13.5px;
  color: #fff;
  padding-left: 16px;
  position: relative;
}
.recruit__role-duties li::before {
  content: "";
  position: absolute; left: 2px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--yaja-red);
}
.recruit__role-pref-h {
  font-family: var(--font-korean);
  font-size: 11px;
  font-weight: var(--w-bold);
  color: var(--text-4);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.recruit__role-pref {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.recruit__role-pref li {
  font-family: var(--font-korean);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}

/* ── 지원 자격 — label + chip rows ──────────────────────────────── */
.recruit__qual {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.recruit__qual-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  align-items: start;
}
.recruit__qual-k {
  font-family: var(--font-korean);
  font-size: 12px;
  font-weight: var(--w-bold);
  color: var(--text-4);
  padding-top: 8px;
}
.recruit__chips--ghost li {
  border-style: dashed;
  color: var(--text-2);
  background: transparent;
}

/* ── 지원서 항목 (numbered) ─────────────────────────────────────── */
.recruit__note {
  font-family: var(--font-korean);
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 14px;
}
.recruit__apply {
  list-style: none;
  counter-reset: ap;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.recruit__apply li {
  counter-increment: ap;
  font-family: var(--font-korean);
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  padding-left: 38px;
  position: relative;
}
.recruit__apply li::before {
  content: counter(ap, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: var(--w-black);
  color: var(--yaja-red);
}

/* ── 채용 프로세스 — numbered step rail ─────────────────────────── */
.recruit__process {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.recruit__step {
  padding: 16px 16px 18px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recruit__step-n {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: var(--w-black);
  color: var(--yaja-red);
  letter-spacing: 0.1em;
}
.recruit__step-label {
  font-family: var(--font-korean);
  font-size: 14px;
  font-weight: var(--w-bold);
  color: #fff;
  line-height: 1.35;
}
.recruit__step-note {
  font-family: var(--font-korean);
  font-size: 11.5px;
  color: var(--text-4);
  line-height: 1.45;
}

@media (max-width: 880px) {
  .recruit__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .recruit__lead, .recruit__facts, .recruit__block, .recruit__cta {
    grid-column: 1;
    grid-row: auto;
  }
  .recruit__facts { position: static; }
  .recruit__facts dl { grid-template-columns: 1fr 1.6fr; }
  /* Summary panel sits right under the lead on mobile. */
  .recruit__lead  { order: 1; }
  .recruit__facts { order: 2; }
  .recruit__block { order: 3; }
  .recruit__cta   { order: 4; }
  .recruit__roles { grid-template-columns: 1fr; }
  .recruit__process { grid-template-columns: 1fr 1fr; }
  .recruit__qual-row { grid-template-columns: 64px 1fr; gap: 10px; }
}

/* ════════════════════════════════════════════════════════════════════
 * NEWS page (cards with thumbnails)
 * ════════════════════════════════════════════════════════════════════ */
.page--news .news-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(40px, 5vh, 64px) clamp(20px, 4vw, 64px) clamp(72px, 10vh, 120px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}
.news-card {
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateY(28px); /* match chrIn from */
  animation: chrIn 900ms var(--easing) var(--delay, 0ms) forwards;
  transition: transform 220ms ease, border-color 220ms ease;
}
.news-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 72, 72, 0.4);
}
.news-card__media {
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.news-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms ease;
}
.news-card:hover .news-card__media img { transform: scale(1.04); }
.news-card__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.news-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.news-card__meta time {
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.1em;
  color: var(--text-4);
}
.news-card__cat {
  font-family: var(--font-latin);
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--yaja-red);
  padding: 4px 8px;
  border: 1px solid rgba(255, 72, 72, 0.3);
  border-radius: 4px;
}
.news-card__title {
  font-family: var(--font-korean);
  font-weight: var(--w-bold);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.news-card__sum {
  font-family: var(--font-korean);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
  margin: 0;
  flex: 1;
}
.news-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yaja-red);
  margin-top: 6px;
}
.news-card__cta i { font-style: normal; }

/* ════════════════════════════════════════════════════════════════════
 * Social link components — shared between Originals (avatar style),
 * Brand Partnership account card, and the PERSOL featured-case row.
 * ════════════════════════════════════════════════════════════════════ */
.socials {
  display: inline-flex;
  gap: clamp(8px, 0.7vw, 12px);
  margin: 0;
  padding: 0;
}
.socials__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 2.4vw, 40px);
  height: clamp(32px, 2.4vw, 40px);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.socials__btn svg {
  width: 55%;
  height: 55%;
}
.socials__btn:hover {
  color: #fff;
  background: rgba(255, 72, 72, 0.18);
  border-color: rgba(255, 72, 72, 0.5);
  transform: translateY(-2px);
}
.socials__btn:focus-visible {
  outline: 2px solid var(--yaja-red);
  outline-offset: 2px;
}
.socials--md .socials__btn { width: clamp(36px, 2.8vw, 44px); height: clamp(36px, 2.8vw, 44px); }

/* "View on Instagram / TikTok / YouTube" — used on work cards that
 * point at a single reel/video. Pill-style button with the platform
 * icon on the left. */
.viewon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 14px;
  background: rgba(255, 72, 72, 0.08);
  border: 1px solid rgba(255, 72, 72, 0.35);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease, border-color 200ms ease;
  align-self: flex-start;
}
.viewon:hover {
  background: rgba(255, 72, 72, 0.2);
  border-color: rgba(255, 72, 72, 0.7);
  transform: translateY(-1px);
}
.viewon__icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--yaja-red);
}
.viewon__label {}
.viewon__arrow {
  margin-left: 2px;
  font-style: normal;
  opacity: 0.7;
}

/* On Originals (.orig__copy), socials sit between the body and the
 * stats — give it a touch of breathing room either side. */
.orig__copy .socials {
  margin: 4px 0 4px;
}
.orig__brand-text {
  /* avoid the eyebrow / handle dropping into a hairline column when
   * orig__brand is flex with a small avatar */
  min-width: 0;
}

/* In the PERSOL featured row, the socials show at the top of the data
 * column on desktop. */
.persol__data .socials {
  margin-bottom: 4px;
}

/* Account-card socials sit between sub and stats. */
.account-card .socials {
  margin-top: -4px;
}

/* .end__footer-label — old absolutely-positioned footer label,
 * retired with the rest of .end__footer. See .site-footer__h
 * for the current eyebrow style. */

/* PERSOL mobile reorder: title → video → lede + data, stats right-aligned */
@media (max-width: 880px) {
  /* Mobile order (mirrors CAMP / YCN exactly, with PERSOL's hero
   * dropped in just before the stats):
   *   tag → brand → VIDEO → lede → hero → stats → socials
   * Both .persol__body and .persol__data dissolve via display:contents
   * so every leaf element becomes a direct flex child of .persol,
   * and explicit `order:` puts the video between the brand and the
   * lede. */
  .persol {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .persol__body { display: contents; }
  .persol__data { display: contents; }

  /* The tag is now an absolute overlay INSIDE .persol__phone — it is
   * not a direct flex child of .persol, so it needs no order. */
  .persol__brand  {
    order: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
  }
  /* Title matches .orig__title mobile sizing (one uniform string). */
  .persol__title {
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.15;
  }
  /* Avatar matches .orig__avatar mobile size (52px) for parity. */
  .persol__avatar { width: 52px; height: 52px; }
  /* Video matches .orig__visual / .orig__phone mobile treatment:
   * FULL-WIDTH (up to the 380px base cap), centered — NOT the old
   * 280px narrow box, which was the main inconsistency vs CAMP/YCN. */
  .persol__phone {
    order: 2;
    width: 100%;
    max-width: 380px;
    margin: 4px auto 6px;
  }
  .persol__lede {
    order: 3;
    margin: 0 0 4px;
  }
  .persol__hero   { order: 4; }
  .persol__stats  { order: 5; }
  .persol__data .socials-text { order: 6; margin-top: 4px; }
  /* Mobile hero — label + sub stack on the left, big number on the
   * right (right-aligned). Sig line removed. */
  .persol__hero {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'head num';
    column-gap: 16px;
    align-items: center;
    padding-bottom: 4px;
  }
  .persol__hero-head {
    grid-area: head;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
  }
  .persol__hero-num {
    grid-area: num;
    text-align: right;
    justify-self: end;
  }
  /* Minis — single-column rows: label LEFT, value RIGHT, vertically
   * centered on one line. */
  .persol__minis {
    grid-template-columns: 1fr;
    gap: 0 !important;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .persol__minis li {
    display: flex;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: 12px;
  }
  .persol__minis li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .persol__mini-label {
    font-size: 10px !important;
    letter-spacing: 0.22em;
  }
  .persol__mini-val {
    text-align: right;
  }
  .persol__mini-val strong {
    font-size: clamp(22px, 6vw, 32px) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * Social links — text variant (Instagram / TikTok / YouTube as rows).
 * Used in Originals + Brand Partnership bottoms. The icon stays small
 * to the left as a quiet platform marker. Hover lifts + tints red.
 * ════════════════════════════════════════════════════════════════════ */
/* Horizontal pill row: Instagram / TikTok / YouTube side by side. */
.socials-text {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
.socials-text__row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-latin);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: var(--w-semibold);
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.socials-text__row:hover {
  color: #fff;
  background: rgba(255, 72, 72, 0.18);
  border-color: rgba(255, 72, 72, 0.5);
  transform: translateY(-2px);
}
.socials-text__row:hover .socials-text__arrow {
  color: var(--yaja-red);
  transform: translate(1px, -1px);
}
.socials-text__icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--yaja-red);
  flex-shrink: 0;
}
.socials-text__icon svg { width: 100%; height: 100%; }
.socials-text__arrow {
  font-style: normal;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 2px;
  transition: color 220ms ease, transform 220ms ease;
}

/* ════════════════════════════════════════════════════════════════════
 * Hover-click card variants — entire .bcard / .work-card / .news-card
 * is now an <a> when there's a direct work-piece URL. We use the same
 * lift+border-tint hover as the news card.
 * ════════════════════════════════════════════════════════════════════ */
.bcard--linked,
.work-card--linked {
  position: relative;          /* anchor the VIEW pill */
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition:
    transform 280ms var(--easing),
    border-color 280ms var(--easing),
    box-shadow 280ms var(--easing);
}
/* Stronger lift + red border + dual-layer red glow + harder drop shadow so
 * the card visibly "rises" rather than just tinting. The change must be
 * obvious enough on first hover that a visitor reads it as "this is clickable". */
.bcard--linked:hover,
.work-card--linked:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 72, 72, 0.75);
  box-shadow:
    0 28px 60px -20px rgba(255, 72, 72, 0.42),
    0 18px 36px -12px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 72, 72, 0.35) inset;   /* red ring catches the eye */
}
/* Media zoom — was 1.03, bumped to 1.06 so the motion is felt, not just inferred */
.bcard--linked .bcard__media video,
.bcard--linked .bcard__media img,
.work-card--linked .work-card__media video,
.work-card--linked .work-card__media img {
  transition: transform 700ms ease;
}
.bcard--linked:hover .bcard__media video,
.bcard--linked:hover .bcard__media img,
.work-card--linked:hover .work-card__media video,
.work-card--linked:hover .work-card__media img {
  transform: scale(1.06);
}
/* "VIEW →" pill — appears on hover in the top-right corner of the media well.
 * Generated via ::after on the media wrapper so we don't touch JSX.
 *
 * IMPORTANT: do NOT set position on .bcard__media here. Its base rule is
 * `position: absolute; inset: 0` (the video fills the card as a
 * background). Overriding it to `position: relative` collapsed the media
 * to zero height on LINKED cards (Dr Pepper / Samsung), so the video
 * vanished and the card's black #0a0a0a bg showed — the "black box" bug.
 * The ::after still anchors correctly because an absolutely-positioned
 * .bcard__media is itself a containing block for its abs children.
 * Work cards (.work-card__media is a normal in-flow block) DO need
 * position: relative, so they keep it. */
.work-card--linked .work-card__media {
  position: relative;
  overflow: hidden;
}
.bcard--linked .bcard__media::after,
.work-card--linked .work-card__media::after {
  content: 'VIEW →';
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 6px 10px;
  background: rgba(255, 72, 72, 0.95);
  color: #fff;
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: var(--w-black);
  letter-spacing: 0.14em;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform: translate(6px, -4px);
  transition: opacity 240ms var(--easing), transform 240ms var(--easing);
}
.bcard--linked:hover .bcard__media::after,
.work-card--linked:hover .work-card__media::after {
  opacity: 1;
  transform: translate(0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .bcard--linked,
  .work-card--linked,
  .bcard--linked:hover,
  .work-card--linked:hover { transform: none; }
  .bcard--linked .bcard__media video,
  .work-card--linked .work-card__media video,
  .bcard--linked .bcard__media img,
  .work-card--linked .work-card__media img { transition: none; }
  .bcard--linked:hover .bcard__media video,
  .work-card--linked:hover .work-card__media video,
  .bcard--linked:hover .bcard__media img,
  .work-card--linked:hover .work-card__media img { transform: none; }
}

/* NOTE: the duplicate `.persol__data` + `.persol__lede` blocks that used
 * to live here were STALE leftovers from the old PERSOL structure. As
 * plain (non-media) rules placed AFTER the mobile @media block, they
 * overrode `.persol__data { display: contents }` on phones — forcing
 * the data column back to a flex box (order 0) so the video (order 2)
 * dropped to the very bottom. Removed; the canonical definitions live
 * at .persol__data (line ~770) and .persol__lede (line ~700). */

/* Mobile only: stack PERSOL minis as label-left / value-right rows. */
@media (max-width: 880px) {
  .persol__minis {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-bottom: 14px !important;
  }
  .persol__minis li {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0;
    gap: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .persol__minis li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .persol__mini-label {
    font-size: 13px;
    color: var(--text-3);
    flex-shrink: 0;
  }
  .persol__mini-val {
    text-align: right;
    white-space: nowrap;
  }
  .persol__mini-val strong {
    font-size: clamp(22px, 6vw, 30px);
    color: var(--yaja-red);
  }
  .persol__mini-val em {
    font-size: 0.5em;
    color: var(--yaja-red);
  }
}

/* WORKS layout — page-level size locks done above. (The earlier
 * !important overrides in this block conflicted with the explicit
 * grid placement for .account-card__stats and made dt/dd flow into
 * the wrong cells; removed.) */


/* ═════════════════════════════════════════════════════════════════
   POLISH PASS — June 3, 2026
   PERSOL brand row, bwork CTA, trusted-by size variants, proc line
   gradient, proc step-body typography.
   ═════════════════════════════════════════════════════════════════ */

/* ── PERSOL: avatar + handle row matching OriginalDetail's brand row ──
 * Title was a single "PERSOL × YAJA" h3; now it's a logo on the left,
 * eyebrow + APAC handle on the right (parallel to YAJA CAMP / YCN). */
/* Brand row — matches .orig__brand exactly (CAMP/YCN above):
 *   56px round avatar | small red eyebrow + big black handle.
 * NOTE: align-items lives in the @media (min-width:881px) block below,
 * NOT here. This rule sits AFTER the mobile @media block, so putting
 * `align-items: center` here would override the mobile flex-start
 * (equal specificity, later source wins) and centre the avatar on
 * phones — exactly the bug that made PERSOL not match CAMP/YCN. */
.persol__brand {
  display: flex;
  gap: 14px;
  margin-bottom: 4px;
}
/* Round 56px avatar showing the original PERSOL logo (full P-mark +
 * wordmark) — contained inside the white circle with padding so the
 * logo stays recognizable, per request to restore the original. */
.persol__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.persol__avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.persol__brand-text {
  display: flex;
  flex-direction: column;
}
.persol__eyebrow {
  font-family: var(--font-latin);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow);
  color: var(--yaja-red);
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* PERSOL desktop alignment — match the .orig (CAMP / YCN) row
 * pattern exactly: video and data column centered vertically next
 * to each other. NO height stretch, NO space-between justification —
 * the data column flows naturally with the .orig__copy-equivalent
 * tight gap (14px) and per-element margins. */
@media (min-width: 881px) {
  .persol__body { align-items: center; }
  /* Desktop brand row: avatar BESIDE the eyebrow+title, vertically
   * centered. (On mobile .persol__brand is a left-aligned column —
   * that rule lives in the max-width:880 block and must not be
   * clobbered, so align-items: center is scoped here.) */
  .persol__brand { align-items: center; }
  /* Hero number scale unchanged so the WOW number stays the visual
   * payload, but capped so it never overflows even on narrower
   * desktop widths. */
  .persol__hero-num { font-size: clamp(48px, 6vw, 80px); }
}

/* ── OUR WORKS / ALL NEWS CTA — centered pill ─────────────────────
 * Was display:inline-grid which broke margin:auto centering in
 * non-flex parents (like .page-frame inside News). Now display:grid
 * + width:fit-content makes the auto margins centre it in both flex
 * (BrandWorkRow) and block (NewsHomeSection) parents. */
.bwork__cta {
  margin: clamp(32px, 4vh, 48px) auto 0;
  width: fit-content;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'eyebrow label arrow';
  align-items: center;
  gap: 16px 22px;
  padding: 18px 28px;
  border-radius: 999px;
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(255,255,255,0.20);
  text-decoration: none;
  font-family: var(--font-latin);
  transition:
    background 240ms var(--easing),
    border-color 240ms var(--easing),
    transform 240ms var(--easing),
    box-shadow 240ms var(--easing);
}
.bwork__cta-eyebrow {
  grid-area: eyebrow;
  font-size: 11px;
  font-weight: var(--w-black);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--yaja-red);
}
.bwork__cta-label {
  grid-area: label;
  font-family: var(--font-korean);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: var(--w-bold);
  color: #fff;
  letter-spacing: -0.01em;
}
.bwork__cta-arrow {
  grid-area: arrow;
  font-size: 18px;
  color: #fff;
  transition: transform 240ms var(--easing);
}
.bwork__cta:hover {
  background: rgba(255,72,72,0.12);
  border-color: var(--yaja-red);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -18px rgba(255,72,72,0.45);
}
.bwork__cta:hover .bwork__cta-arrow { transform: translateX(4px); }
.bwork { display: flex; flex-direction: column; align-items: center; }
.bwork__grid { width: 100%; }

/* ── TRUSTED BY size variants ─────────────────────────────────────
 * The aspect-ratio + padding combo gives each cell a fixed visual
 * footprint; the only thing that changes per size is how much of the
 * cell the logo fills. --lg gets the most generous fill, --sm gets the
 * tightest (so small marks don't get blown out into pixel mush). */
.trusted__cell--lg { padding: 4%; }
.trusted__cell--md { padding: 9%; }
.trusted__cell--sm { padding: 15%; }
/* When the grid hosts 10 cards instead of 8 it wraps to 5-cols / row;
 * stop us from going wider than 4. */
.trusted__grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) {
  .trusted__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .trusted__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── PROCESS — gradient Reach / Follow / Convert ───────────────────
 * Three stacked lines: each one is bigger and brighter than the one
 * above, ending on full white Convert. (Old StoryScroll pattern.) */
.proc__h { gap: 4px; }
.proc__line {
  font-family: var(--font-latin);
  font-weight: var(--w-black);
  letter-spacing: -0.045em;
  line-height: 0.96;
  display: block;
}
.proc__line em { font-style: normal; color: var(--yaja-red); }
.proc__line--1 {
  font-size: clamp(36px, 4.8vw, 68px);
  color: rgba(255,255,255,0.55);
}
.proc__line--2 {
  font-size: clamp(44px, 5.6vw, 80px);
  color: rgba(255,255,255,0.78);
}
.proc__line--3 {
  font-size: clamp(54px, 6.8vw, 96px);
  color: #fff;
}
.proc__last em.proc__dot { color: var(--yaja-red); }

/* Step body — title strong + description. Replaces the old single-
 * line summaries. */
.proc__steps li {
  gap: 18px;
  align-items: flex-start;
  padding: 18px 0;
}
.proc__steps span {
  padding-top: 4px;
  font-size: 12px;
  color: var(--yaja-red);
}
.proc__step-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.proc__step-body strong {
  font-family: var(--font-korean);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: var(--w-bold);
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.proc__step-body p {
  font-family: var(--font-korean);
  font-size: clamp(12px, 0.85vw, 13px);
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
  margin: 0;
}
@media (max-width: 880px) {
  .proc__steps li { padding: 14px 0; }
}

/* ═════════════════════════════════════════════════════════════════
   POLISH v2 — June 3, 2026 evening
   ═════════════════════════════════════════════════════════════════ */

/* ── Brand card: optional white pill for dark logos (Samsung) ───── */
.bcard__brandmark-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 6px;
  padding: 5px 10px;
  /* Mirrors the height the bare .bcard__brandmark uses, but with the
   * pill the logo gets a clean white field to sit on. */
  height: clamp(28px, 2.8vw, 36px);
  max-width: 140px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.bcard__brandmark--onwhite {
  height: 100% !important;
  max-width: none !important;
  filter: none !important;     /* kill the drop-shadow on the dark mark — */
  object-fit: contain;          /* the pill already provides separation */
}

/* ── Trusted by — XL variant (push to edges) ───────────────────── */
.trusted__cell--xl { padding: 1.5%; }

/* Marquee desktop sizing now lives in the main .proc__marquee rule
 * (above) since the section uses a bleed-right layout, not a bounded
 * 50/50 grid. No size overrides needed at this breakpoint. */

/* ── NEWS home — strip the old top-right "전체 보기" pill since the
 *   bottom OUR-WORKS-style CTA now lives in its place. */
.news-home__head {
  grid-template-columns: 1fr;
  grid-template-areas: 'h' 'sub';
}
.news-home__all { display: none !important; }
.news-home .bwork__cta { margin-top: clamp(28px, 3.6vh, 44px); }

/* .proc__eyebrow* — retired. The inline copy-column eyebrow was a
 * duplicate of the right-rail SectionTag, removed in the dedup pass. */

/* ═════════════════════════════════════════════════════════════════
   SCROLL-PERF — paint/composite isolation
   The bg-stage runs a Three.js WebGL scene every frame. Without
   isolation it gets repainted whenever the section above/below it
   changes (which happens constantly during scroll-up because the
   intersection observer fires entries). Isolate it on its own GPU
   layer so scroll work doesn't trigger bg recomposition.
   ═════════════════════════════════════════════════════════════════ */
.bg-stage {
  transform: translateZ(0);
  will-change: transform;
  contain: layout style size;
}
.section {
  /* Paint each section independently so a section entering view
   * doesn't force a repaint of every section above + below. */
  contain: layout paint;
}
/* Marquee: GPU-only animation already, but tag it explicitly so the
 * browser keeps it on its own composite layer during scroll. */
.proc__col {
  will-change: transform;
  transform: translateZ(0);
}
.progress {
  will-change: width;
}


/* Utility — force inline content to never wrap. Used by the
 * About markets row where the 14-country list must stay on one line. */
.nowrap { white-space: nowrap; }

/* ═════════════════════════════════════════════════════════════════
 * PERSOL home — 3 stats in a horizontal row using .orig__stat
 * typography (same label + number sizes as CAMP/YCN above). PERSOL
 * just stretches the row to 3 cells. Subtle vertical hairlines
 * between cells form a clean rail without adding heavy chrome.
 * ═════════════════════════════════════════════════════════════════ */
.persol__stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: flex-end;
  /* Mirrors .orig__stats margin-top — small extra breath above the
   * big numbers, no top hairline (the originals row above has none
   * either, and removing it makes the rhythm identical). */
  margin-top: clamp(8px, 1.4vh, 18px);
}
/* Vertical hairline between cells — uses the cell's own ::before to
 * paint a 1px rule on its left edge. First cell omits it. Quietest
 * possible visual cue that these are three discrete metrics. */
.persol__stats .orig__stat {
  position: relative;
  padding-left: clamp(20px, 2.6vw, 40px);
}
.persol__stats .orig__stat:first-child {
  padding-left: 0;
}
.persol__stats .orig__stat:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(255, 255, 255, 0.10);
}
/* Refined label typography — uppercase, tighter tracked, slightly
 * smaller than the default .orig__stat-label so the row reads as
 * one elegant fact-sheet row rather than three independent stacks. */
.persol__stats .orig__stat-label {
  font-family: var(--font-latin);
  font-size: 10px;
  font-weight: var(--w-black);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
@media (max-width: 880px) {
  /* On phones the data column is narrow; 3 in a row pinches the
   * numbers. Fall to a single-column stack with label-left /
   * value-right rows for compactness — matches the CAMP/YCN mobile
   * stat pattern. */
  .persol__stats {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0;            /* desktop's 28-36 top padding off */
    border-top: 0;             /* mobile uses per-row borders instead */
  }
  .persol__stats .orig__stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 0;           /* override desktop's padding-left */
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .persol__stats .orig__stat:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  /* Kill the desktop vertical-hairline divider on mobile. */
  .persol__stats .orig__stat:not(:first-child)::before {
    display: none;
  }
  .persol__stats .orig__stat-label {
    margin-bottom: 0;
  }
}