/* tokens.css */
/* ─────────────────────────────────────────────────────────────
   Design tokens — the single source of truth for the A-GLOW
   brand system. Values are lifted verbatim from the approved
   design; changing one here changes it everywhere.
   ───────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* Surfaces (darkest → lightest) */
  --c-bg:            #08080A;
  --c-bg-footer:     #0A0A0C;
  --c-surface:       #0C0C0F;
  --c-surface-2:     #101012;
  --c-surface-3:     #101013;
  --c-surface-hover: #141416;
  --c-award-top:     #151011;

  /* Brand */
  --c-brand:         #FF5A18;
  --c-brand-light:   #FF9A63;
  --c-brand-pale:    #FFC2A0;
  --c-brand-glow:    #FFB061;
  --c-kakao:         #FEE500;
  --c-kakao-hover:   #FFF04A;

  /* Text (brightest → dimmest) */
  --c-text:          #F5F5F7;
  --c-text-2:        #E6E6EA;
  --c-text-muted:    #A6A6AE;
  --c-text-dim:      #95959D;
  --c-text-dimmer:   #8E8E96;
  --c-text-faint:    #7C7C84;
  --c-text-fainter:  #6E6E76;
  --c-text-faintest: #5E5E66;

  /* Hairlines & translucent fills */
  --c-line:          rgba(255, 255, 255, .07);
  --c-line-strong:   rgba(255, 255, 255, .08);
  --c-line-soft:     rgba(255, 255, 255, .09);
  --c-fill:          rgba(255, 255, 255, .06);
  --c-fill-strong:   rgba(255, 255, 255, .14);
  --c-border-input:  rgba(255, 255, 255, .12);
  --c-border-pill:   rgba(255, 255, 255, .16);

  --c-brand-a10:     rgba(255, 90, 24, .10);
  --c-brand-a14:     rgba(255, 90, 24, .14);
  --c-brand-a30:     rgba(255, 90, 24, .30);
  --c-brand-a32:     rgba(255, 90, 24, .32);
  --c-brand-a50:     rgba(255, 90, 24, .50);
  --c-brand-a55:     rgba(255, 90, 24, .55);

  --c-nav-idle:      rgba(245, 245, 247, .62);
  --c-header-bg:     rgba(8, 8, 10, .72);
  --c-ink:           #08080A;

  /* Type families */
  --f-display: Anton, Impact, "Arial Narrow Bold", sans-serif;
  --f-ui:      Archivo, "Helvetica Neue", Arial, sans-serif;
  --f-kr:      "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;

  /* Fluid type ramp */
  --t-h1:        clamp(38px, 7.6vw, 112px);
  --t-h1-page:   clamp(38px, 8.4vw, 116px);
  --t-h2:        clamp(32px, 5.4vw, 72px);
  --t-h2-alt:    clamp(30px, 5.4vw, 68px);
  --t-h2-big:    clamp(32px, 7vw, 86px);
  --t-body:      clamp(14px, 1.5vw, 17px);
  --t-body-sm:   clamp(13.5px, 1.5vw, 15px);
  --t-eyebrow:   clamp(10px, 1.1vw, 12px);
  --t-nav:       clamp(12px, 1.35vw, 15px);
  --t-btn:       clamp(14px, 1.5vw, 16px);

  /* Rhythm */
  --gutter:      clamp(16px, 3vw, 28px);
  --shell:       1280px;
  --header-h:    clamp(78px, 10vw, 104px);
  --anchor-off:  clamp(90px, 11vw, 120px);
  --sec-y:       clamp(72px, 10vw, 140px);
  --sec-y-sm:    clamp(56px, 7.5vw, 104px);
  --sec-y-xs:    clamp(46px, 6vw, 84px);
  --gap-card:    clamp(12px, 1.6vw, 20px);

  /* Radii */
  --r-sm:  10px;
  --r-md:  12px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 22px;
  --r-3xl: 24px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.16, .84, .24, 1);
  --dur-reveal: .8s;
  --dur-reveal-fast: .7s;

  /* Elevation */
  --shadow-float: 0 14px 40px rgba(0, 0, 0, .45);

  /* Layering */
  --z-base: 1;
  --z-header: 100;
  --z-kakao: 110;
  --z-progress: 120;
}

/* base.css */
/* ─────────────────────────────────────────────────────────────
   Base — reset, document defaults, accessibility primitives.
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-kr);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--c-brand); text-decoration: none; }
a:hover { color: #FFFFFF; }

img, video { max-width: 100%; }
img { border-style: none; }

::selection { background: var(--c-brand); color: var(--c-ink); }

input, textarea, select, button { font-family: var(--f-kr); }

/* Keyboard focus is visible everywhere; pointer focus stays quiet.
   `:focus-visible` alone would drop the ring in browsers without it,
   so the fallback below keeps a ring and the modern rule refines it. */
:focus { outline: 2px solid var(--c-brand); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; }

/* ── Accessibility helpers ─────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Fixed rather than absolute so it is still on screen if the visitor
   tabs backwards to it after scrolling. */
.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--c-brand);
  color: var(--c-ink);
  font: 700 14px/1 var(--f-kr);
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); color: var(--c-ink); }

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes agRise    { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } }
@keyframes agZoom    { from { transform: scale(1.02); } to { transform: scale(1.14); } }
@keyframes agMarqueeL { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes agMarqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes agGlow    { 0%, 100% { box-shadow: 0 0 0 0 var(--c-brand-a45, rgba(255,90,24,.45)); } 50% { box-shadow: 0 0 42px 6px var(--c-brand-a32); } }
@keyframes agPulse   { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes agBlink   { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes agFloat   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ── Reduced motion ───────────────────────────────────────────
   Honour the OS preference: kill looping/decorative motion and
   land every scroll-reveal in its final state. Content must never
   depend on an animation the user has switched off. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal, .reveal-fast { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none !important; }
  .hero__media { animation: none !important; }
}

/* layout.css */
/* ─────────────────────────────────────────────────────────────
   Layout — page shell, header, navigation, footer, background.
   ───────────────────────────────────────────────────────────── */

/* ── Shell ─────────────────────────────────────────────────── */
.wrap {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--relative { position: relative; }

.page {
  position: relative;
  z-index: var(--z-base);
  padding-top: var(--header-h);
}

/* Repeating brand wallpaper behind everything. */
.wallpaper {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url(/img/aglow-wallpaper.png) center top / min(880px, 90vw) auto repeat;
  opacity: .06;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.35), #000 18%, #000 82%, rgba(0,0,0,.35));
  mask-image: linear-gradient(180deg, rgba(0,0,0,.35), #000 18%, #000 82%, rgba(0,0,0,.35));
}

/* Scroll progress indicator, driven by scripts/motion.js. */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--c-brand), var(--c-brand-glow));
  z-index: var(--z-progress);
  transition: width .1s linear;
}

/* ── Header ────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: var(--c-header-bg);
  border-bottom: 1px solid var(--c-line);
}

/* Browsers without backdrop-filter get a near-opaque bar so the nav is
   never unreadable over the moving hero artwork behind it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(8, 8, 10, .94); }
}

.site-header__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 28px);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.site-header__logo {
  height: clamp(28px, 3.9vw, 38px);
  width: auto;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(11px, 2.1vw, 32px);
}

/* An author `display` declaration outranks the UA rule for [hidden], so
   the collapsed mobile panel has to opt out explicitly. */
.nav[hidden] { display: none; }

.nav__link {
  font: 700 var(--t-nav)/1 var(--f-ui);
  letter-spacing: .13em;
  color: var(--c-nav-idle);
  text-transform: uppercase;
  padding: 8px 0;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav__link:hover { color: var(--c-text); }

/* The active page is marked with aria-current in the markup, so the
   highlight ships in the HTML instead of being painted in by script. */
.nav__link[aria-current="page"] {
  color: var(--c-brand);
  border-bottom-color: var(--c-brand);
}
.nav__link[aria-current="page"]:hover { color: var(--c-brand); }

.nav__cta {
  font: 700 var(--t-nav)/1 var(--f-kr);
  letter-spacing: .02em;
  color: var(--c-ink);
  background: var(--c-brand);
  padding: 12px clamp(13px, 1.8vw, 20px);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background .2s var(--ease);
}
.nav__cta:hover { background: #FFFFFF; color: var(--c-ink); }

/* Hidden until the viewport is too narrow for the full nav. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--c-border-pill);
  border-radius: var(--r-md);
  background: var(--c-fill);
  color: var(--c-text);
  cursor: pointer;
}

.nav-toggle__bars {
  display: block;
  width: 20px;
  height: 14px;
  position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 6px; }
.nav-toggle__bars::after { top: 12px; }

[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }
[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Below 640px the six-item nav needs about 580px and gets clipped by
   the body's overflow-x:hidden, which makes RECORD / SUPPORT / 지원하기
   unreachable. It collapses into a disclosure panel instead; the
   desktop layout above this width is untouched. */
@media (max-width: 639.98px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 18px;
    background: rgba(8, 8, 10, .97);
    border-bottom: 1px solid var(--c-line);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav__link {
    padding: 16px 2px;
    border-bottom: 1px solid var(--c-line-strong);
    font-size: 14px;
  }
  .nav__link[aria-current="page"] { border-bottom-color: var(--c-brand); }

  .nav__cta {
    margin-top: 16px;
    text-align: center;
    padding: 16px 20px;
    font-size: 14px;
  }
}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: var(--z-base);
  border-top: 1px solid var(--c-line-strong);
  background: var(--c-bg-footer);
  padding: clamp(44px, 6vw, 72px) 0 clamp(30px, 4vw, 44px);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 60px);
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer__brand { flex: 1 1 260px; }

.site-footer__mark {
  height: 26px;
  width: auto;
  display: block;
  margin-bottom: 18px;
  filter: grayscale(1) brightness(1.85) contrast(.92);
}

.site-footer__tagline {
  margin: 0 0 6px;
  font: 700 15px/1.6 var(--f-kr);
  color: var(--c-text);
}

.site-footer__about {
  margin: 0;
  font: 400 13.5px/1.8 var(--f-kr);
  color: var(--c-text-faint);
}

.site-footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
}

.site-footer__heading {
  /* Rendered as <h2> for document structure; UA margins zeroed. */
  margin: 0 0 14px;
  font: 600 11px/1 var(--f-ui);
  letter-spacing: .2em;
  color: var(--c-text-fainter);
}

.site-footer__list { display: grid; gap: 10px; }

.site-footer__link {
  font: 500 14px/1 var(--f-kr);
  color: var(--c-text-muted);
  transition: color .2s var(--ease);
}
.site-footer__link:hover { color: var(--c-brand); }
.site-footer__link--latin { font-family: var(--f-ui); }

.site-footer__bottom {
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}

.site-footer__legal {
  font: 400 12px/1.6 var(--f-ui);
  color: var(--c-text-faintest);
}

.site-footer__motto {
  font: 400 12px/1.6 var(--f-ui);
  letter-spacing: .14em;
  color: var(--c-text-faintest);
  text-transform: uppercase;
}

/* ── Floating KakaoTalk button ─────────────────────────────── */
.kakao-fab {
  position: fixed;
  right: clamp(14px, 2.5vw, 26px);
  bottom: clamp(14px, 2.5vw, 26px);
  z-index: var(--z-kakao);
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 20px 0 16px;
  border-radius: var(--r-pill);
  background: var(--c-kakao);
  color: var(--c-ink);
  box-shadow: var(--shadow-float);
  transition: background .2s var(--ease);
}
.kakao-fab:hover { color: var(--c-ink); background: var(--c-kakao-hover); }

.kakao-fab__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(8, 8, 10, .12);
  font: 700 14px/1 var(--f-kr);
}

.kakao-fab__ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(8, 8, 10, .4);
  animation: agPulse 2.4s ease-out infinite;
}

.kakao-fab__label {
  font: 700 14px/1 var(--f-kr);
  white-space: nowrap;
}

/* components.css */
/* ─────────────────────────────────────────────────────────────
   Components — every repeating pattern in the design, named once.
   Declarations are lifted verbatim from the approved artboards;
   only the literals are swapped for tokens.
   ───────────────────────────────────────────────────────────── */

/* ── Section shells ────────────────────────────────────────── */
.section { position: relative; }
.section--y-lg { padding: var(--sec-y) 0; }
.section--y-md { padding: var(--sec-y-sm) 0; }
.section--y-sm { padding: var(--sec-y-xs) 0; }
.section--clip { overflow: hidden; }
.section--rule-t { border-top: 1px solid var(--c-line); }

/* Page-intro band used at the top of every inner page. */
.section--intro {
  position: relative;
  padding: clamp(50px, 7vw, 96px) 0 clamp(30px, 4vw, 50px);
  overflow: hidden;
  border-bottom: 1px solid var(--c-line);
}

/* Decorative radial glows. Positioned per instance with modifiers. */
.orb {
  position: absolute;
  pointer-events: none;
}
.orb--intro {
  top: -40%;
  right: -8%;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle, rgba(255, 90, 24, .18), transparent 62%);
}
.orb--intro-left {
  top: -40%;
  left: -8%;
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  background: radial-gradient(circle, rgba(255, 90, 24, .18), transparent 62%);
}
.orb--reel {
  top: -30%;
  left: -10%;
  width: 56vw;
  height: 56vw;
  max-width: 640px;
  max-height: 640px;
  background: radial-gradient(circle, rgba(255, 90, 24, .13), transparent 62%);
}
.orb--roster {
  top: -30%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 760px;
  max-height: 760px;
  background: radial-gradient(circle, rgba(255, 90, 24, .2), transparent 62%);
}

/* Outlined display word sitting behind a section. */
.ghost-word {
  position: absolute;
  font-family: var(--f-display);
  font-weight: 400;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .06);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.ghost-word--why     { top: 6%; right: -4%; font-size: clamp(120px, 22vw, 320px); }
.ghost-word--message { bottom: -6%; left: -6%; font-size: clamp(100px, 18vw, 260px); -webkit-text-stroke-color: rgba(255, 255, 255, .05); }
.ghost-word--history { top: 4%; right: -6%; font-size: clamp(100px, 18vw, 270px); -webkit-text-stroke-color: rgba(255, 255, 255, .055); }

/* ── Scroll reveal ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.reveal-fast {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-reveal-fast) var(--ease), transform var(--dur-reveal-fast) var(--ease);
}
.reveal.is-in, .reveal-fast.is-in { opacity: 1; transform: none; }

/* No-JS must never hide content. */
.no-js .reveal, .no-js .reveal-fast { opacity: 1; transform: none; }

/* ── Eyebrow (rule + label) ────────────────────────────────── */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Also used on <p>/<h2>, so the UA margin is zeroed explicitly. */
  margin: 0 0 16px;
}
.eyebrow__bar {
  width: 26px;
  height: 2px;
  background: var(--c-brand);
  flex: 0 0 auto;
}
.eyebrow__text {
  font: 600 var(--t-eyebrow)/1 var(--f-ui);
  letter-spacing: .22em;
  color: var(--c-brand);
  text-transform: uppercase;
}

/* The wide variant is a section label with no trailing gap. */
.eyebrow--wide { gap: 14px; margin-bottom: 0; }
.eyebrow--wide .eyebrow__bar { width: 34px; }

.eyebrow--sm { gap: 10px; margin: 20px 0 10px; }
.eyebrow--sm .eyebrow__bar { width: 20px; }
.eyebrow--sm .eyebrow__text {
  font: 400 12px/1 var(--f-ui);
  letter-spacing: .2em;
}

/* ── Headings ──────────────────────────────────────────────── */
.h-hero {
  margin: 0 0 clamp(14px, 1.9vw, 22px);
  font: 400 var(--t-h1)/0.86 var(--f-display);
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--c-text);
}
.h-page {
  margin: 0 0 18px;
  font: 400 var(--t-h1-page)/0.88 var(--f-display);
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--c-text);
}
.h-sec {
  margin: 0 0 16px;
  font: 400 var(--t-h2)/0.96 var(--f-display);
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--c-text);
}
.h-sec--alt {
  margin: 0 0 16px;
  font: 400 var(--t-h2-alt)/0.96 var(--f-display);
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--c-text);
}
.h-sec--big {
  margin: 0;
  font: 400 var(--t-h2-big)/0.92 var(--f-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--c-text);
}
.h-block {
  margin: 0;
  font: 700 clamp(16px, 2.1vw, 26px)/1.2 var(--f-ui);
  letter-spacing: .1em;
  color: var(--c-text);
  text-transform: uppercase;
}
.accent { color: var(--c-brand); }

/* ── Prose ─────────────────────────────────────────────────── */
.lede {
  margin: 0;
  font: 400 var(--t-body)/1.8 var(--f-kr);
  color: var(--c-text-muted);
  text-wrap: pretty;
}
.lede--narrow { max-width: 620px; }
.lede--wide { max-width: 640px; }
.lede--col { max-width: 400px; font-size: clamp(14px, 1.5vw, 16px); }
.lede--tight { max-width: 420px; font: 400 clamp(13px, 1.4vw, 15px)/1.75 var(--f-kr); color: var(--c-text-dimmer); }

.body-sm {
  margin: 0;
  font: 400 13.5px/1.75 var(--f-kr);
  color: var(--c-text-dim);
}
.body-sm--pretty { text-wrap: pretty; }

.note {
  margin: 0;
  font: 400 12px/1.7 var(--f-kr);
  color: var(--c-text-fainter);
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--r-pill);
  font: 700 var(--t-btn)/1 var(--f-kr);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn__arrow { font: 400 18px/1 var(--f-ui); }

.btn--primary { background: var(--c-brand); color: var(--c-ink); }
.btn--primary:hover { background: #FFFFFF; color: var(--c-ink); }
.btn--glow { animation: agGlow 3.4s ease-in-out infinite; }

.btn--ghost {
  background: var(--c-fill);
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--c-text);
}
.btn--ghost:hover { background: var(--c-fill-strong); border-color: var(--c-brand); color: var(--c-text); }

.btn--ghost-warm {
  background: var(--c-fill);
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--c-text);
}
.btn--ghost-warm:hover { border-color: var(--c-brand); background: rgba(255, 90, 24, .12); color: var(--c-text); }

/* Buttons that sit on the solid orange CTA band. */
.btn--on-brand {
  gap: 10px;
  min-height: 58px;
  padding: 0 28px;
  background: var(--c-ink);
  color: #FFFFFF;
}
.btn--on-brand:hover { background: #FFFFFF; color: var(--c-ink); }

.btn--on-brand-outline {
  gap: 10px;
  min-height: 58px;
  padding: 0 28px;
  background: transparent;
  border: 1.5px solid rgba(8, 8, 10, .55);
  color: var(--c-ink);
}
.btn--on-brand-outline:hover { background: rgba(8, 8, 10, .1); color: var(--c-ink); }

.btn--md { gap: 10px; min-height: 52px; padding: 0 24px; font-size: 14.5px; }
.btn--lg { gap: 10px; min-height: 54px; padding: 0 26px; font-size: 15px; }

/* In-page anchor chips under a page intro. */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--c-fill);
  border: 1px solid var(--c-border-pill);
  color: var(--c-text);
  font: 700 13.5px/1 var(--f-kr);
  transition: border-color .2s var(--ease);
}
.chip:hover { border-color: var(--c-brand); color: var(--c-text); }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(26px, 3.4vw, 38px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--c-brand-a10);
  border: 1px solid var(--c-brand-a32);
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-xl);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.card--pad { padding: clamp(22px, 2.4vw, 30px); }
.card--pad-flat { padding: 24px; }
.card--lift:hover { border-color: var(--c-brand-a55); background: var(--c-surface-hover); }
.card--outline:hover { border-color: var(--c-brand-a55); }

.card__index {
  margin: 0;
  font: 400 13px/1 var(--f-ui);
  letter-spacing: .2em;
  color: var(--c-brand);
}
.card__title {
  margin: 18px 0 10px;
  font: 700 clamp(17px, 1.9vw, 21px)/1.4 var(--f-kr);
  color: var(--c-text);
}
.card__title--tight { margin: 16px 0 12px; }
.card__text {
  margin: 0;
  font: 400 14px/1.8 var(--f-kr);
  color: var(--c-text-dim);
  text-wrap: pretty;
}

.card__logo {
  height: 34px;
  width: auto;
  display: block;
  margin-bottom: 18px;
}
.card__logo--rounded { border-radius: 8px; }
.card__heading {
  margin: 0 0 8px;
  font: 700 16px/1.4 var(--f-kr);
  color: var(--c-text);
}

/* Card with a full-bleed image or background at the top. */
.media-card {
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface-2);
  transition: border-color .3s var(--ease);
}
.media-card:hover { border-color: var(--c-brand-a55); }
.media-card__figure {
  height: clamp(190px, 24vw, 260px);
  background-size: cover;
  background-repeat: no-repeat;
}
.media-card__figure--sm {
  position: relative;
  height: clamp(170px, 21vw, 230px);
  background: var(--c-bg);
}
.media-card__body { padding: 24px; }
.media-card__kicker {
  font: 400 12px/1 var(--f-ui);
  letter-spacing: .2em;
  color: var(--c-brand);
  margin: 0 0 12px;
}
.media-card__title {
  margin: 0 0 10px;
  font: 700 clamp(17px, 1.9vw, 20px)/1.45 var(--f-kr);
  color: var(--c-text);
}
.media-card__title--sm {
  margin: 0 0 10px;
  font: 700 clamp(16px, 1.8vw, 19px)/1.45 var(--f-kr);
  color: var(--c-text);
}

.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cover--t20 { object-position: center 20%; }
.cover--t25 { object-position: center 25%; }
.cover--t30 { object-position: center 30%; }
.cover--t40 { object-position: center 40%; }
.cover--t45 { object-position: center 45%; }
.cover--c   { object-position: center center; }
.cover--l44 { object-position: 44% center; }

/* ── Grids ─────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--gap-card); }
.grid--cards   { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.grid--wide    { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--media   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--tiles   { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.grid--split   { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 60px); align-items: start; }
.grid--roster  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 206px), 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.grid--pair    { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }

/* Section header: title block on the left, supporting copy on the right. */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(30px, 4vw, 46px);
}
.sec-head--tight { gap: 16px; margin-bottom: clamp(20px, 2.6vw, 30px); }
.sec-head--loose { gap: 20px; margin-bottom: clamp(30px, 4vw, 50px); }

/* ── Stat strip ────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 138px), 1fr));
  gap: 1px;
  margin-top: clamp(20px, 2.6vw, 32px);
  background: var(--c-line-soft);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat { background: rgba(8, 8, 10, .72); padding: 18px 20px; }
.stat__value {
  font: 400 clamp(22px, 3vw, 34px)/1 var(--f-display);
  color: var(--c-text);
}
.stat__value--brand { color: var(--c-brand); }
.stat__value--sm { font-size: clamp(17px, 2.3vw, 27px); line-height: 1.05; }
.stat__label {
  margin-top: 6px;
  font: 500 12px/1.5 var(--f-kr);
  color: var(--c-text-dimmer);
}

/* ── Marquee ───────────────────────────────────────────────── */
.marquee { overflow: hidden; }
.marquee--brand {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-brand);
  padding: 13px 0;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: agMarqueeL 26s linear infinite;
}
.marquee__group {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  font: 400 clamp(15px, 2vw, 22px)/1 var(--f-display);
  letter-spacing: .04em;
  color: var(--c-ink);
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-ink);
  flex: 0 0 auto;
}
.marquee__chip img { width: 16px; height: 16px; object-fit: contain; }

/* Photo wall (creators page) */
.wall {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: agMarqueeL 58s linear infinite;
}
.wall--reverse { animation: agMarqueeR 62s linear infinite; }
.wall--gap { margin-bottom: 12px; }
.wall img {
  width: clamp(96px, 12vw, 150px);
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--r-lg);
  opacity: .62;
}

/* Brand logo belt */
.logo-belt__track {
  display: flex;
  align-items: center;
  gap: clamp(50px, 7vw, 104px);
  padding-right: clamp(50px, 7vw, 104px);
}
.logo-belt img {
  width: auto;
  opacity: .85;
  flex: 0 0 auto;
}

/* ── Creator card ──────────────────────────────────────────── */
.creator__frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  aspect-ratio: 5/6;
  background: var(--c-surface-2);
  transition: border-color .3s var(--ease);
}
.creator:hover .creator__frame { border-color: var(--c-brand); }
.creator__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.creator:hover .creator__img { transform: scale(1.06); }
.creator__body { padding: 14px 4px 0; }
.creator__role {
  margin: 0;
  font: 400 11px/1 var(--f-ui);
  letter-spacing: .16em;
  color: var(--c-brand);
  text-transform: uppercase;
}
.creator__name {
  margin: 8px 0 0;
  font: 700 16px/1.3 var(--f-kr);
  color: var(--c-text);
}
.creator__socials { display: flex; gap: 8px; margin-top: 12px; }

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--c-fill);
  border: 1px solid var(--c-border-input);
  transition: border-color .2s var(--ease);
}
.social-link:hover { border-color: var(--c-brand); }
.social-link img { width: 16px; height: 16px; object-fit: contain; }
.social-link img.is-rounded { border-radius: 4px; }

/* ── Executive card ────────────────────────────────────────── */
/* Executive cards reuse the .media-card shell; only the inner parts differ. */
.exec__photo { position: relative; aspect-ratio: 4/5; background: var(--c-bg); }
.exec__body { padding: 22px; }
.exec__role {
  margin: 0;
  font: 400 11.5px/1 var(--f-ui);
  letter-spacing: .18em;
  color: var(--c-brand);
  text-transform: uppercase;
}
.exec__name {
  margin: 10px 0 0;
  font: 700 18px/1.35 var(--f-kr);
  color: var(--c-text);
}
.exec__bio {
  margin: 10px 0 0;
  font: 400 13.5px/1.75 var(--f-kr);
  color: var(--c-text-dim);
}

/* Five across on desktop; the design's fixed 5-column track is far too
   narrow on phones, so it steps down instead of squeezing. */
.grid--execs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.3vw, 16px); }
@media (max-width: 1023.98px) { .grid--execs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599.98px)  { .grid--execs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── CEO message ───────────────────────────────────────────── */
.quote-mark {
  font: 400 clamp(56px, 7vw, 96px)/0.7 var(--f-display);
  color: var(--c-brand-a32);
  margin-bottom: 8px;
}
.quote-lead {
  margin: 0 0 22px;
  font: 700 clamp(19px, 2.6vw, 30px)/1.5 var(--f-kr);
  color: var(--c-text);
  text-wrap: pretty;
}
.quote-body {
  margin: 0;
  font: 400 clamp(14px, 1.5vw, 16.5px)/1.9 var(--f-kr);
  color: var(--c-text-muted);
  text-wrap: pretty;
}
.quote-body--strong {
  font: 700 clamp(15px, 1.7vw, 18px)/1.8 var(--f-kr);
  color: var(--c-text);
}
.quote-sign {
  margin-top: clamp(26px, 3.4vw, 38px);
  padding-top: 22px;
  border-top: 1px solid var(--c-line-strong);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.portrait-card {
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface-2);
  max-width: 340px;
}
.portrait-card__frame { position: relative; aspect-ratio: 1/1; background: var(--c-bg); }
.portrait-card__body { padding: 18px 20px; }
.portrait-card__name { font: 700 16px/1.4 var(--f-kr); color: var(--c-text); }
.portrait-card__role {
  margin-top: 5px;
  font: 500 12.5px/1.5 var(--f-ui);
  letter-spacing: .1em;
  color: var(--c-brand-light);
}

/* ── History timeline ──────────────────────────────────────── */
.timeline {
  margin-top: clamp(30px, 4vw, 52px);
  border-radius: var(--r-3xl);
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
  padding: clamp(22px, 3vw, 34px);
}
.timeline__kicker {
  font: 600 11.5px/1 var(--f-ui);
  letter-spacing: .2em;
  color: var(--c-brand);
  margin: 0 0 6px;
}
.timeline__year-row {
  display: grid;
  grid-template-columns: minmax(76px, 110px) 1fr;
  gap: clamp(14px, 2.4vw, 28px);
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-top: 1px solid var(--c-line-strong);
}
.timeline__year {
  font: 400 clamp(22px, 3vw, 34px)/1 var(--f-display);
  color: var(--c-brand);
}
.timeline__items { display: grid; gap: 14px; }
.timeline__item {
  display: grid;
  grid-template-columns: minmax(42px, 52px) 1fr;
  gap: clamp(10px, 1.4vw, 18px);
  align-items: baseline;
}
.timeline__month {
  font: 700 13.5px/1.5 var(--f-ui);
  letter-spacing: .04em;
  color: var(--c-text-dimmer);
}
.timeline__text {
  font: 500 clamp(14px, 1.5vw, 15.5px)/1.6 var(--f-kr);
  color: var(--c-text-2);
  text-wrap: pretty;
}

/* ── Award card ────────────────────────────────────────────── */
.award {
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--c-brand-a30);
  background: linear-gradient(180deg, var(--c-award-top), var(--c-surface) 60%);
  transition: border-color .3s var(--ease);
}
.award:hover { border-color: var(--c-brand); }
.award__media {
  position: relative;
  height: clamp(160px, 20vw, 220px);
  background: var(--c-bg);
}
.award__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: rgba(8, 8, 10, .78);
  border: 1px solid var(--c-brand-a55);
  pointer-events: none;
}
.award__year { font: 400 13px/1 var(--f-display); color: var(--c-brand); }
.award__sep { width: 1px; height: 11px; background: rgba(255, 255, 255, .22); }
.award__tag {
  font: 600 10px/1 var(--f-ui);
  letter-spacing: .2em;
  color: var(--c-brand-pale);
}
.award__body { padding: 22px; border-top: 2px solid var(--c-brand-a50); }
.award__title {
  margin: 0 0 8px;
  font: 700 clamp(15.5px, 1.7vw, 18px)/1.45 var(--f-kr);
  color: var(--c-text);
}
.award__desc {
  margin: 0;
  font: 400 13.5px/1.7 var(--f-kr);
  color: var(--c-text-dim);
  text-wrap: pretty;
}

/* ── Showreel ──────────────────────────────────────────────── */
.reel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 330px));
  gap: clamp(24px, 3.2vw, 44px);
  justify-content: center;
  align-items: start;
}
.reel__frame {
  position: relative;
  aspect-ratio: 406/720;
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--c-line-soft);
  background: #000;
}
.reel__frame--alt { aspect-ratio: 332/720; }
.reel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  display: block;
}
.reel__title {
  margin: 0 0 8px;
  font: 700 clamp(18px, 2.1vw, 23px)/1.4 var(--f-kr);
  color: var(--c-text);
}

/* The second showreel card is deliberately pinned narrower than its grid
   column: the two clips have different aspect ratios (406/720 and
   332/720), and this width lands both phone mockups at the same height.
   min()/max-width keep it from overflowing a narrower column. */
.reel-card--pinned { width: min(271px, 100%); height: 703px; }
.reel__title--pinned { width: 286px; height: 64px; }

@media (max-width: 359.98px) {
  .reel-card--pinned { height: auto; }
  .reel__title--pinned { width: 100%; height: auto; }
}

/* ── Support / team tiles ──────────────────────────────────── */
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: clamp(34px, 4vw, 52px) 24px;
  border-radius: var(--r-xl);
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface-2);
  min-height: 210px;
}

.partner__name { font: 600 13px/1 var(--f-kr); color: var(--c-text-dimmer); }

/* ── Contact form ──────────────────────────────────────────── */
.form-panel {
  min-width: 0;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-3xl);
  padding: clamp(20px, 2.6vw, 32px);
}

.tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 6px;
  padding: 5px;
  background: var(--c-bg);
  border: 1px solid var(--c-line-strong);
  border-radius: 16px;
  margin-bottom: clamp(22px, 3vw, 30px);
}
.tab {
  min-height: 48px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-text-dimmer);
  font: 700 13.5px/1.3 var(--f-kr);
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.tab[aria-selected="true"] { background: var(--c-brand); color: var(--c-ink); }

.form { display: grid; gap: 16px; }

.field { display: grid; gap: 8px; }
.field__label {
  font: 600 12px/1 var(--f-kr);
  letter-spacing: .06em;
  color: var(--c-text-dimmer);
}

.input, .select, .textarea {
  border-radius: var(--r-md);
  background: var(--c-bg);
  border: 1px solid var(--c-border-input);
  color: var(--c-text);
  font: 400 15px/1 var(--f-kr);
  transition: border-color .2s ease;
  width: 100%;
}
.input, .select { min-height: 52px; }
.input { padding: 0 16px; }
.select { padding: 0 14px; }
.textarea {
  padding: 14px 16px;
  line-height: 1.7;
  resize: vertical;
  min-height: 120px;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--c-brand);
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}

/* Validation styling only after the field has been touched, so an
   untouched required field is never shown as an error. */
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: #FF4D4D;
}
.field__error {
  margin: 0;
  font: 500 12px/1.5 var(--f-kr);
  color: #FF8A7A;
}
.field__error:empty { display: none; }

.file-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 16px;
  border-radius: var(--r-md);
  background: var(--c-bg);
  border: 1px dashed rgba(255, 255, 255, .24);
  transition: border-color .2s ease;
}
.file-label:hover .file-drop { border-color: var(--c-brand); }
.file-label input:focus-visible + .file-drop { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.file-drop__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--c-brand-a14);
  color: var(--c-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 16px/1 var(--f-ui);
}
.file-drop__name {
  min-width: 0;
  font: 500 13.5px/1.5 var(--f-kr);
  color: var(--c-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.submit {
  min-height: 58px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-brand);
  color: var(--c-ink);
  font: 700 16px/1 var(--f-kr);
  cursor: pointer;
  transition: background .2s ease;
}
.submit:hover { background: #FFFFFF; }
.submit[disabled] { opacity: .6; cursor: progress; }

.form-success { text-align: center; padding: clamp(30px, 5vw, 60px) 10px; }
.form-success__check {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--c-brand-a14);
  border: 1px solid rgba(255, 90, 24, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 26px/1 var(--f-ui);
  color: var(--c-brand);
}
.form-success__title {
  margin: 0 0 10px;
  font: 700 clamp(18px, 2.2vw, 24px)/1.5 var(--f-kr);
  color: var(--c-text);
}
.form-success__text {
  margin: 0 0 24px;
  font: 400 14px/1.8 var(--f-kr);
  color: var(--c-text-dim);
}
.form-success__reset {
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  background: var(--c-fill);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--c-text);
  font: 700 14px/1 var(--f-kr);
  cursor: pointer;
}

/* ── Contact sidebar ───────────────────────────────────────── */
.contact-aside { min-width: 0; display: grid; gap: 14px; }

.contact-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--r-xl);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.contact-link--kakao { background: var(--c-kakao); color: var(--c-ink); }
.contact-link--kakao:hover { color: var(--c-ink); transform: translateY(-2px); }
.contact-link--ig {
  background: var(--c-surface-2);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--c-text);
}
.contact-link--ig:hover { border-color: var(--c-brand); color: var(--c-text); }
.contact-link__badge {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--r-lg);
  background: rgba(8, 8, 10, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 20px/1 var(--f-kr);
}
.contact-link__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: var(--r-md);
}
.contact-link__title { display: block; font: 700 16px/1.4 var(--f-kr); }
.contact-link__meta { display: block; margin-top: 4px; font: 500 13px/1.5 var(--f-kr); color: rgba(8, 8, 10, .66); }
.contact-link__meta--brand { font-family: var(--f-ui); color: var(--c-brand-light); }

.faq {
  padding: 22px;
  border-radius: var(--r-xl);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
}
.faq__kicker {
  font: 600 11.5px/1 var(--f-ui);
  letter-spacing: .2em;
  color: var(--c-brand);
  margin: 0 0 16px;
}
.faq__list { display: grid; gap: 14px; }
.faq__q { margin: 0; font: 700 14px/1.5 var(--f-kr); color: var(--c-text); }
.faq__a { margin: 5px 0 0; font: 400 13.5px/1.7 var(--f-kr); color: var(--c-text-dim); }
.faq__rule { height: 1px; background: var(--c-line-strong); }

/* ── Misc ──────────────────────────────────────────────────── */
.stack { display: grid; gap: 8px; }
.stack--lg { gap: 18px; }

/* ─────────────────────────────────────────────────────────────
   Per-instance modifiers. Each one carries only the declarations
   that differ from its base class in the approved design.
   ───────────────────────────────────────────────────────────── */

/* Display headings at sizes used on one page only. */
.h-page--about    { font-size: clamp(40px, 9vw, 124px); }
.h-page--creators { font-size: clamp(42px, 10vw, 140px); line-height: 0.86; }
.h-page--contact  { margin-bottom: 16px; font-size: clamp(40px, 9vw, 120px); }
.h-sec--30        { font-size: clamp(30px, 5.4vw, 72px); }
.h-sec--68b       { margin-bottom: 18px; font-size: clamp(32px, 5.4vw, 68px); }
.h-sec--msg       { margin-bottom: 20px; font-size: clamp(30px, 5.4vw, 68px); }
.h-sec--flush     { margin-bottom: 0; font-size: clamp(30px, 5.4vw, 72px); }

/* Lede variants. */
.lede--contact { max-width: 600px; }
.lede--sm      { font-size: clamp(13.5px, 1.5vw, 17px); }
.lede--sm16    { font-size: clamp(13.5px, 1.5vw, 16px); }
.lede--col-sm  { max-width: 400px; font-size: clamp(13.5px, 1.5vw, 16px); }

.body-sm--fluid { font-size: clamp(13.5px, 1.5vw, 15px); line-height: 1.8; text-wrap: pretty; }

/* Grid spacing. */
.grid--why { margin-top: clamp(34px, 4.4vw, 56px); }

.sec-head--history { gap: 20px; margin-bottom: clamp(28px, 3.6vw, 46px); }

/* Card / tile title sizes. */
.media-card__title--21     { margin: 0 0 10px; font: 700 clamp(17px, 1.9vw, 21px)/1.45 var(--f-kr); color: var(--c-text); }
.media-card__kicker--tight { margin-bottom: 10px; }
.tile__title               { margin: 0 0 8px; font: 700 16px/1.45 var(--f-kr); color: var(--c-text); }

/* Kickers. */
.timeline__kicker--flush  { margin: 0; font-weight: 400; }

/* Signature line under the CEO message. */
.quote-sign__by { font: 500 13px/1.6 var(--f-kr); color: var(--c-text-dimmer); }

/* Brand belt logos: shared box, per-brand height in pages.css. */
.logo-belt__logo { width: auto; opacity: .85; flex: 0 0 auto; }

/* pages.css */
/* ─────────────────────────────────────────────────────────────
   Page-level compositions — blocks that appear once, named so the
   markup stays readable. Declarations match the design exactly.
   ───────────────────────────────────────────────────────────── */

/* ── Home: hero ────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(62svh, 620px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--c-line);
}
.hero__parallax { position: absolute; inset: -12% 0; z-index: 0; overflow: hidden; }
.hero__media {
  position: absolute;
  inset: 0;
  background: url(/img/bg-hero.jpg) center 30% / cover no-repeat;
  animation: agZoom 26s ease-in-out infinite alternate;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8,8,10,.86) 0%, rgba(8,8,10,.55) 34%, rgba(8,8,10,.92) 88%, #08080A 100%);
}
.hero__glow {
  position: absolute;
  left: -14%;
  bottom: -24%;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  z-index: 1;
  background: radial-gradient(circle, rgba(255,90,24,.22) 0%, rgba(255,90,24,0) 62%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(40px, 5.4vw, 66px) var(--gutter) clamp(24px, 3vw, 38px);
}
.hero__flag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(12px, 1.6vw, 18px);
  animation: agRise .8s var(--ease) both;
}
.hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-brand);
  animation: agBlink 1.8s ease-in-out infinite;
}
.hero__flag-text {
  font: 600 var(--t-eyebrow)/1 var(--f-ui);
  letter-spacing: .24em;
  color: var(--c-brand);
  text-transform: uppercase;
}
.hero__title { animation: agRise .9s var(--ease) .08s both; }
.hero__copy {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 64px);
  align-items: flex-end;
  animation: agRise .9s var(--ease) .18s both;
}
.hero__copy-col { flex: 1 1 320px; max-width: 640px; }
.hero__lead {
  margin: 0 0 10px;
  font: 700 clamp(19px, 2.6vw, 32px)/1.42 var(--f-kr);
  color: var(--c-text);
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(18px, 2.4vw, 28px);
  animation: agRise .9s var(--ease) .26s both;
}
.hero__stats { animation: agRise .9s var(--ease) .34s both; }

/* ── Home: section variants ────────────────────────────────── */
.section--platform {
  position: relative;
  padding: var(--sec-y) 0;
  background: linear-gradient(180deg, var(--c-bg), var(--c-surface) 40%, var(--c-bg));
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.section--perf {
  position: relative;
  padding: var(--sec-y-sm) 0 var(--sec-y);
  border-top: 1px solid var(--c-line);
  overflow: hidden;
}

/* Background-image plates on the performance / activity cards. */
.fig-perf-live    { background-image: url(/img/perf-live.jpg); background-position: center 22%; }
.fig-perf-agency  { background-image: url(/img/perf-agency-award.jpg); background-position: center 30%; }
.fig-perf-awards  { background-image: url(/img/perf-awards.jpg); background-position: center 20%; }
.fig-rank         { height: clamp(170px, 21vw, 230px); background: url(/img/perf-rank2.png) center 30% / cover no-repeat; }
.fig-cup          { height: clamp(170px, 21vw, 230px); background: var(--c-bg) url(/img/w-support-event2.jpg) center / cover no-repeat; }
.fig-edu          { height: clamp(150px, 18vw, 210px); background: url(/img/support-edu.jpg) center / cover no-repeat; }
.fig-support-cup  { height: clamp(150px, 18vw, 210px); background: var(--c-bg) url(/img/w-support-cup2025.jpg) center / cover no-repeat; }

/* Split photo plate (influencer party card). */
.split-figure {
  position: relative;
  height: clamp(170px, 21vw, 230px);
  background: var(--c-bg);
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 3px;
}

/* ── Orange call-to-action band ────────────────────────────── */
.cta-band {
  position: relative;
  padding: clamp(72px, 10vw, 130px) 0;
  background: var(--c-brand);
  overflow: hidden;
}
.cta-band__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.22), transparent 55%);
}
.cta-band__inner {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.cta-band__title {
  margin: 0 0 14px;
  font: 400 clamp(34px, 6.4vw, 90px)/0.9 var(--f-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.cta-band__text {
  margin: 0;
  max-width: 520px;
  font: 500 clamp(14px, 1.6vw, 17px)/1.75 var(--f-kr);
  color: rgba(8, 8, 10, .78);
  text-wrap: pretty;
}

/* ── About ─────────────────────────────────────────────────── */
.section--leaders {
  position: relative;
  padding: clamp(56px, 7vw, 104px) 0;
  background: linear-gradient(180deg, var(--c-bg), var(--c-surface) 40%, var(--c-bg));
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  scroll-margin-top: var(--anchor-off);
}
.section--message {
  position: relative;
  padding: clamp(56px, 7vw, 110px) 0;
  overflow: hidden;
  scroll-margin-top: var(--anchor-off);
}
.section--history {
  position: relative;
  padding: clamp(56px, 7vw, 104px) 0;
  overflow: hidden;
  scroll-margin-top: var(--anchor-off);
}
.message-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.exec-note {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  font: 400 12.5px/1.7 var(--f-kr);
  color: var(--c-text-fainter);
}

/* ── Creators ──────────────────────────────────────────────── */
.section--roster-intro {
  position: relative;
  padding: clamp(56px, 8vw, 110px) 0 clamp(34px, 4vw, 54px);
  overflow: hidden;
  border-bottom: 1px solid var(--c-line);
}
.section--wall {
  padding: clamp(30px, 4vw, 60px) 0;
  overflow: hidden;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface);
}
.roster-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(24px, 3vw, 34px);
  flex-wrap: wrap;
}
.roster-head__title {
  margin: 0;
  font: 400 clamp(26px, 4vw, 48px)/1 var(--f-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--c-text);
}
.roster-head__meta { font: 500 13.5px/1 var(--f-kr); color: var(--c-text-dimmer); }

.roster-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--r-2xl);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
}
.roster-cta__title { font: 700 clamp(17px, 2vw, 22px)/1.5 var(--f-kr); color: var(--c-text); }
.roster-cta__text { margin-top: 6px; font: 400 14px/1.7 var(--f-kr); color: var(--c-text-dim); }

/* ── Record ────────────────────────────────────────────────── */
.section--activity {
  position: relative;
  padding: clamp(52px, 7vw, 92px) 0 clamp(20px, 2.6vw, 34px);
  scroll-margin-top: var(--anchor-off);
}
.section--awards {
  position: relative;
  padding: clamp(28px, 3.4vw, 44px) 0 clamp(76px, 10vw, 130px);
  scroll-margin-top: var(--anchor-off);
}

/* ── Support ───────────────────────────────────────────────── */
.section--partners {
  position: relative;
  padding: clamp(76px, 10vw, 132px) 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: linear-gradient(180deg, var(--c-surface), var(--c-surface-3) 50%, var(--c-surface));
  overflow: hidden;
}
.section--team {
  position: relative;
  padding: clamp(56px, 7vw, 104px) 0;
  background: linear-gradient(180deg, var(--c-bg), var(--c-surface) 45%, var(--c-bg));
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.section--brand-support {
  position: relative;
  padding: clamp(56px, 7vw, 104px) 0 clamp(30px, 4vw, 44px);
  overflow: hidden;
  scroll-margin-top: var(--anchor-off);
}
.anchor-offset { scroll-margin-top: var(--anchor-off); }

.ghost-word--partners { top: 2%; left: -5%; font-size: clamp(110px, 20vw, 300px); -webkit-text-stroke-color: rgba(255,255,255,.055); }
.ghost-word--support  { top: 10%; left: -6%; font-size: clamp(110px, 20vw, 300px); -webkit-text-stroke-color: rgba(255,255,255,.05); }

.partners-head {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto clamp(38px, 5vw, 64px);
  padding: 0 var(--gutter);
}
.partners-head__label {
  font: 600 clamp(13px, 1.4vw, 16px)/1 var(--f-ui);
  letter-spacing: .22em;
  color: var(--c-brand);
  text-transform: uppercase;
}
.partners-head__title {
  margin: 0 0 18px;
  font: 400 clamp(34px, 6.6vw, 88px)/0.92 var(--f-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--c-text);
}

.belt-head { display: flex; align-items: center; gap: 14px; }
.belt-head--spaced { margin-bottom: clamp(18px, 2.2vw, 26px); }
.belt-head__title {
  margin: 0;
  font: 700 clamp(15px, 1.9vw, 22px)/1.2 var(--f-kr);
  letter-spacing: -.01em;
  color: var(--c-text);
}
.belt-head__tag {
  font: 600 11px/1 var(--f-ui);
  letter-spacing: .2em;
  color: var(--c-text-faintest);
}
.brands-head {
  position: relative;
  max-width: var(--shell);
  margin: clamp(44px, 5.6vw, 74px) auto clamp(20px, 2.6vw, 32px);
  padding: 0 var(--gutter);
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.partner__logo {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: .92;
}
.partner__logo--jaseng { height: clamp(48px, 6.4vw, 86px); }
.partner__logo--dian   { height: clamp(64px, 8.4vw, 116px); }
.partner__logo--jon    { height: clamp(46px, 6vw, 80px); }

.logo-belt {
  position: relative;
  display: flex;
  width: max-content;
  animation: agMarqueeL 40s linear infinite;
  align-items: center;
}
.logo--puma        { height: clamp(16px, 2.1vw, 28px); }
.logo--newbalance  { height: clamp(34px, 4.4vw, 58px); }
.logo--alo         { height: clamp(32px, 4vw, 52px); }
.logo--cellinffect { height: clamp(18px, 2.4vw, 32px); }
.logo--monpuriel   { height: clamp(15px, 1.9vw, 26px); }
.logo--furriky     { height: clamp(24px, 3.1vw, 42px); }
.logo--dailylabs   { height: clamp(16px, 2vw, 27px); }
.logo--badagolf    { height: clamp(16px, 2.1vw, 28px); }

.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.support-card--wide {
  grid-column: span 2;
  min-width: 0;
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface-2);
}
.support-card {
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface-2);
  display: flex;
  flex-direction: column;
}
.support-card--split {
  border-radius: var(--r-2xl);
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface-2);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* A two-column span cannot fit a single-column track. */
@media (max-width: 599.98px) {
  .support-grid { grid-template-columns: 1fr; }
  .support-card--wide { grid-column: auto; }
}

.team-grid { max-width: 1080px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.benefit-wrap { max-width: 1080px; }
.benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.card--benefit {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
  border-radius: var(--r-xl);
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface-2);
  padding: clamp(24px, 2.8vw, 34px);
}

/* ── Support: commerce teaser ──────────────────────────────── */
.commerce {
  position: relative;
  min-height: min(66svh, 560px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid var(--c-line);
}
.commerce__media { position: absolute; inset: -10% 0; z-index: 0; background: url(/img/bg-commerce.jpg) center / cover no-repeat; }
.commerce__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,8,10,.82), rgba(20,7,2,.88)); }
.commerce__inner {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) var(--gutter);
  width: 100%;
  text-align: center;
}
.commerce__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--c-brand-a14);
  border: 1px solid rgba(255, 90, 24, .42);
  margin-bottom: 24px;
}
.commerce__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-brand); animation: agBlink 1.6s ease-in-out infinite; }
.commerce__badge-text { font: 600 11.5px/1 var(--f-ui); letter-spacing: .2em; color: var(--c-brand-light); }
.commerce__title {
  margin: 0 0 18px;
  font: 400 clamp(34px, 8vw, 110px)/0.9 var(--f-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--c-text);
}
.commerce__lead { margin: 0 auto 8px; max-width: 640px; font: 700 clamp(15px, 1.8vw, 20px)/1.6 var(--f-kr); color: var(--c-text); }
.commerce__text { margin: 0 auto; max-width: 640px; font: 400 clamp(13.5px, 1.5vw, 16px)/1.8 var(--f-kr); color: var(--c-text-muted); text-wrap: pretty; }
.commerce__motto {
  margin-top: 22px;
  font: 400 clamp(14px, 1.6vw, 18px)/1 var(--f-ui);
  letter-spacing: .16em;
  color: var(--c-brand-light);
  font-style: italic;
}

/* ── Contact ───────────────────────────────────────────────── */
.section--contact { padding: clamp(40px, 5vw, 72px) 0 clamp(60px, 8vw, 110px); }
.contact-grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 2.6vw, 34px);
  align-items: start;
}

/* ── Shared one-offs ───────────────────────────────────────── */
.sec-intro { max-width: 700px; margin-bottom: clamp(28px, 3.6vw, 46px); }
.sec-intro--tight { margin-bottom: clamp(26px, 3.4vw, 42px); }
.sec-intro--wide { max-width: 760px; margin-bottom: 0; }
.sec-intro--loose { max-width: 700px; margin-bottom: clamp(30px, 4vw, 50px); }
.min-w-0 { min-width: 0; }
.stat-highlight { color: var(--c-brand-light); font-weight: 700; }
.pill-tag__text { font: 700 13px/1 var(--f-kr); color: var(--c-brand-light); }
.lede--gap { margin: 0 0 22px; }
.timeline__body { display: grid; gap: 0; }