/* ==========================================================================
   UKF — homepage
   Light, restrained system: warm off-white canvas, ink type, one sans at a
   light weight, two-tone headlines, pill controls, rounded photography,
   and scroll-driven scenes.
   ========================================================================== */

:root {
  --bg: #f9f9f8;
  --paper: #ffffff;
  --tray: #f0efeb;
  --chip: #edece9;
  --ink: #181818;
  --ink-hover: #424140;
  --muted: #6e6c68;
  --tone: #8f8d88;
  --line: #e1dfda;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --w-display: 380;
  --w-ui: 400;

  --pad: clamp(20px, 4.5vw, 80px);
  --gap: clamp(12px, 1.6vw, 24px);
  --sec: clamp(96px, 11vw, 168px);
  --nav-h: 56px;

  --r-sm: 8px;
  --r-card: 16px;
  --r-media: 24px;
  --r-tray: 32px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-card: cubic-bezier(0.3, 1, 0.8, 1);
  --ease-nav: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-wipe: cubic-bezier(0.76, 0, 0.24, 1);

  --logo-full: url("https://www.ukf.net/static/images/ukf-full-logo.svg");
  --logo-symbol: url("https://www.ukf.net/static/images/ukf-symbol-logo.svg");
}

/* Colour tokens are registered so the dark chapter can fade every surface together. */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #f9f9f8; }
@property --paper { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --tray { syntax: "<color>"; inherits: true; initial-value: #f0efeb; }
@property --chip { syntax: "<color>"; inherits: true; initial-value: #edece9; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #181818; }
@property --ink-hover { syntax: "<color>"; inherits: true; initial-value: #424140; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #6e6c68; }
@property --tone { syntax: "<color>"; inherits: true; initial-value: #8f8d88; }
@property --line { syntax: "<color>"; inherits: true; initial-value: #e1dfda; }

/* Dark chapter: the film and the numbers sit on ink (toggled by script.js). */
html.is-dark {
  --bg: #111110;
  --paper: #1c1c1b;
  --tray: #1a1a19;
  --chip: #262625;
  --ink: #f2f1ee;
  --ink-hover: #d9d8d4;
  --muted: #a3a19c;
  --tone: #7d7b77;
  --line: rgba(255, 255, 255, 0.12);
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
html {
  transition: --bg 0.9s ease, --paper 0.9s ease, --tray 0.9s ease, --chip 0.9s ease, --ink 0.9s ease,
    --ink-hover 0.9s ease, --muted 0.9s ease, --tone 0.9s ease, --line 0.9s ease;
}
html.motion { overflow-anchor: none; }
html { scrollbar-gutter: stable; }

h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

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

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nav :focus-visible,
.hero :focus-visible,
.eco :focus-visible,
.film :focus-visible,
.cta :focus-visible { outline-color: #fff; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  transform: translate(-50%, -200%);
}
.skip:focus { transform: translate(-50%, 0); }

/* Lenis (from lenis/dist/lenis.css) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Primitives ---------- */

.wrap { padding-inline: var(--pad); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.grid__side { grid-column: 1 / span 3; }
.grid__main { grid-column: 4 / -1; min-width: 0; }

.eyebrow {
  font-size: 14px;
  font-weight: var(--w-ui);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--muted);
  padding-top: 0.55em;
}

.h2 {
  max-width: 15em;
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: var(--w-display);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.tone { color: var(--tone); }
.lede, .hero__sub, .eco__text, .tray__text, .stat__cap, .foot__tag { text-wrap: pretty; }
.events__head .lede { text-wrap: balance; }

.lede {
  max-width: 36em;
  margin-top: clamp(20px, 2.4vw, 32px);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--muted);
}

/* The official UKF marks, coloured by currentColor. */
.logo {
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--logo-full) center / contain no-repeat;
  mask: var(--logo-full) center / contain no-repeat;
}
.logo--full { aspect-ratio: 343.2 / 110.4; height: 32px; }
.logo--mark {
  aspect-ratio: 38.57 / 40.41;
  height: 30px;
  -webkit-mask-image: var(--logo-symbol);
  mask-image: var(--logo-symbol);
}

/* Pill buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: var(--w-ui);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  translate: var(--mx, 0px) var(--my, 0px);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, translate 0.6s var(--ease);
}
.btn--sm { height: 40px; padding: 0 16px; font-size: 15px; }
.btn--lg { height: 56px; padding: 0 28px; font-size: 17px; }

.btn--dark { background: var(--ink); color: var(--bg); }
.btn--dark:hover { background: var(--ink-hover); }
.btn--light { background: #fff; color: #181818; }
.btn--light:hover { background: #edece9; }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { background: var(--chip); }
.btn--glass {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.btn--glass:hover { border-color: rgba(255, 255, 255, 0.8); }
.hero .btn--glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(255, 255, 255, 0.12);
}

/* Button label roll on hover (wrapped by script.js) */
.roll {
  display: inline-grid;
  overflow: hidden;
  line-height: 1.25;
}
.roll > span {
  grid-area: 1 / 1;
  transition: transform 0.55s var(--ease);
}
.roll > span + span { transform: translate3d(0, 105%, 0); }
@media (hover: hover) {
  .btn:hover .roll > span:first-child { transform: translate3d(0, -105%, 0); }
  .btn:hover .roll > span + span { transform: none; }
}

/* Text link: an underline sweeps in on hover. */
.link {
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.5s var(--ease);
}
.link:hover,
.link:focus-visible {
  background-position: 0 100%;
  background-size: 100% 1px;
}

/* ---------- Opening (first visit, motion only) ----------
   1. Dark curtain: the phoenix appears with a light sweep; the wordmark rises;
      a hairline and counter follow the real loading progress.
   2. The wordmark slips away, the first hero photo opens from a small centred
      window to the full frame, and the phoenix glides into the nav.          */

.curtain,
.intro-mark { display: none; }

html.is-intro .curtain {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: block;
  overflow: hidden;
  /* A deep vignette, like a darkened cinema */
  background: radial-gradient(120% 95% at 50% 46%, #1c1c1a 0%, #0f0f0e 58%, #080808 100%);
  color: #fff;
  transition: opacity 0.9s ease;
}
html.is-intro.is-opening .curtain { opacity: 0; transition-delay: 1s; }
/* Very faint moving film grain */
html.is-intro .curtain::before {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  animation: grain 0.9s steps(5) infinite;
  pointer-events: none;
}
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-4%, 3%, 0); }
  40% { transform: translate3d(3%, -5%, 0); }
  60% { transform: translate3d(-6%, -2%, 0); }
  80% { transform: translate3d(5%, 4%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.curtain__word {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 48px);
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: rgba(255, 255, 255, 0.86);
  animation: track-in 2.4s var(--ease) 0.35s forwards;
}
.curtain__word:not(.is-split) { opacity: 0; }
.curtain__word .cl {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 35%, 0);
  animation: focus-in 1.1s var(--ease) forwards;
  animation-delay: calc(0.45s + var(--i, 0) * 0.035s);
}
.curtain.is-leaving .curtain__word .cl {
  animation: none;
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0, -40%, 0);
  transition: opacity 0.45s ease, filter 0.45s ease, transform 0.6s var(--ease-wipe);
  transition-delay: calc(var(--i, 0) * 0.012s);
}
@keyframes focus-in { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes track-in { to { letter-spacing: 0.1em; text-indent: 0.1em; } }

.curtain__foot {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(28px, 5vh, 48px);
  display: flex;
  align-items: center;
  gap: 18px;
  transition: opacity 0.5s ease;
}
.curtain.is-leaving .curtain__foot { opacity: 0; }
.curtain__bar {
  position: relative;
  flex: 1;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}
.curtain__bar span {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.curtain__count {
  min-width: 3ch;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.7);
}

/* The phoenix sits above the opening photo, then flies to the nav logo. */
html.is-intro .intro-mark {
  position: fixed;
  left: 50%;
  top: calc(50% - 10px);
  z-index: 170;
  display: block;
  width: 64px;
  aspect-ratio: 38.57 / 40.41;
  margin: -34px 0 0 -32px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
  -webkit-mask: var(--logo-symbol) center / contain no-repeat;
  mask: var(--logo-symbol) center / contain no-repeat;
  opacity: 0;
  transform-origin: 50% 50%;
  animation: mark-in 1.3s var(--ease) 0.1s forwards, mark-white 0.8s ease 1.3s forwards;
}
/* Light sweep across the mark */
html.is-intro .intro-mark::after {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.95) 50%, transparent 62%);
  transform: translate3d(-70%, 0, 0);
  animation: sweep 1.5s cubic-bezier(0.45, 0, 0.2, 1) 0.4s forwards;
}
html.is-intro .intro-mark.is-flying {
  animation: none;
  opacity: 1;
  background-color: #fff;
  transition: opacity 0.35s ease;
}
html.is-intro .intro-mark.is-landed { opacity: 0 !important; transition: opacity 0.35s ease 0.2s; }
@keyframes mark-in {
  from { opacity: 0; filter: blur(10px); clip-path: inset(100% 0 0 0); transform: translate3d(0, 10px, 0) scale(0.94); }
  60% { opacity: 1; }
  to { opacity: 1; filter: blur(0); clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes mark-white { to { background-color: #fff; } }
@keyframes sweep { to { transform: translate3d(70%, 0, 0); } }

/* The hero photo opens out of a small centred window. */
html.is-intro .hero { z-index: 160; }
html.is-intro .hero__frame {
  clip-path: inset(50% 50% 50% 50% round 4px);
  transition: clip-path 0.7s var(--ease);
}
html.is-intro.is-peek .hero__frame { clip-path: inset(42% 27% 42% 27% round 4px); }
html.is-intro.is-peek-2 .hero__frame { clip-path: inset(38% 25% 38% 25% round 8px); }
html.is-intro.is-peek-3 .hero__frame { clip-path: inset(33% 23% 33% 23% round 14px); }
html.is-intro .hero__slide.is-cut {
  z-index: 5;
  opacity: 1 !important;
  transform: translate3d(var(--cx, 0%), var(--cy, 0%), 0) scale(1.08) !important;
  transition: none !important;
}
html.is-intro.is-opening .hero__frame {
  clip-path: inset(0 0 0 0 round 24px);
  transition: clip-path 1.5s var(--ease-wipe);
}
html.is-intro .hero__zoom { transform: scale(1.3); }
html.is-intro.is-opening .hero__zoom { transform: none; transition: transform 2.6s var(--ease); }
@media (max-width: 760px) {
  html.is-intro.is-peek .hero__frame { clip-path: inset(43% 10% 43% 10% round 4px); }
  html.is-intro.is-peek-2 .hero__frame { clip-path: inset(39% 9% 39% 9% round 8px); }
  html.is-intro.is-peek-3 .hero__frame { clip-path: inset(34% 8% 34% 8% round 12px); }
  html.is-intro.is-opening .hero__frame { clip-path: inset(0 0 0 0 round 20px); }
}
/* The nav appears exactly as the phoenix lands in it. */
html.is-intro .nav,
html.is-intro.is-loaded .nav { opacity: 0; transition: opacity 0.5s ease; }
html.is-intro.nav-in .nav { opacity: 1; }
html.is-intro:not(.is-loaded) { overflow: hidden; }

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 14px var(--pad) 0;
  pointer-events: none;
  color: #fff;
}

/* The bar never changes its layout. Becoming the pill is a background layer
   fading in at the pill's size while the logo and the right-hand group glide
   inward on transforms (script.js measures --pill-l, --nav-sl, --nav-sr, --nav-sk). */
.nav {
  --pill-max: 1120px;
  --pill-pl: 20px;
  --pill-pr: 8px;
}
.nav__bar {
  position: relative;
  isolation: isolate;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  height: var(--nav-h);
  transition: transform 0.6s var(--ease);
}
.nav__bar::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: var(--pill-l, 0px);
  right: var(--pill-l, 0px);
  border-radius: var(--r-card);
  background-color: #181818;
  box-shadow: 0 9px 80px rgba(24, 24, 24, 0.08), 0 2px 18px rgba(24, 24, 24, 0.06), 0 0.6px 5px rgba(24, 24, 24, 0.04);
  opacity: 0;
  transform: scale(0.97, 0.9);
  transition: opacity 0.45s ease, transform 0.8s var(--ease), background-color 0.5s ease;
  will-change: opacity, transform;
}
.nav.is-pill .nav__bar::before { opacity: 1; transform: none; }
.nav.is-hidden .nav__bar { transform: translate3d(0, calc(-100% - 24px), 0); }
html.is-dark .nav__bar::before {
  background-color: rgba(40, 40, 39, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.nav__logo,
.nav__links,
.nav__aside,
.nav__menu { transition: transform 0.8s var(--ease); }
.nav.is-pill .nav__logo { transform: translate3d(var(--nav-sl, 0px), 0, 0); }
.nav.is-pill .nav__links { transform: translate3d(var(--nav-sk, 0px), 0, 0); }
.nav.is-pill .nav__aside,
.nav.is-pill .nav__menu { transform: translate3d(calc(-1 * var(--nav-sr, 0px)), 0, 0); }

.nav__logo { position: relative; flex-shrink: 0; display: block; }
.nav__logo .logo--full { height: 38px; transform-origin: 0 50%; transition: transform 0.8s var(--ease); }
.nav__logo .logo--mark { display: none; }
.nav.is-pill .nav__logo .logo--full { transform: scale(0.9); }

.nav__links,
.nav__aside {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  font-size: 15px;
  font-weight: var(--w-ui);
}
.nav__aside { gap: 4px; }

.nav__links a,
.nav__text {
  padding: 8px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background-color 0.25s ease;
}
.nav__links a:hover,
.nav__text:hover { background-color: rgba(255, 255, 255, 0.12); }

/* Language switch: a two-way segmented control with a sliding thumb. */
.lang {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  flex-shrink: 0;
  padding: 3px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #fff;
}
.lang__opt {
  position: relative;
  min-width: 36px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.4s ease;
}
.lang__opt::after { content: ""; position: absolute; inset: -9px -1px; }
.lang__opt[aria-pressed="true"] { color: #181818; }
.lang__thumb {
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: #fff;
  transition: transform 0.6s var(--ease), background-color 0.4s ease;
}
html.lang-ko .lang__thumb { transform: translate3d(100%, 0, 0); }
.nav .lang { margin-right: 6px; }
/* On light surfaces (menu panel, footer). */
.lang--ink { box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.lang--ink .lang__opt { color: var(--muted); }
.lang--ink .lang__opt[aria-pressed="true"] { color: var(--paper); }
.lang--ink .lang__thumb { background: var(--ink); }
@media (hover: hover) {
  .lang__opt:not([aria-pressed="true"]):hover { color: #fff; }
  .lang--ink .lang__opt:not([aria-pressed="true"]):hover { color: var(--ink); }
}

.nav__progress {
  position: absolute;
  left: calc(var(--pill-l, 0px) + 20px);
  right: calc(var(--pill-l, 0px) + 20px);
  bottom: 0;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.nav__progress span {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
.nav.is-pill .nav__progress { opacity: 1; }

.nav__menu {
  display: none;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
@media (hover: hover) {
  .nav__menu:hover { border-color: rgba(255, 255, 255, 0.8); }
}

@media (max-width: 1279px) {
  .nav { --pill-pl: 16px; }
  .nav__links,
  .nav__aside > :not(.btn):not(.lang) { display: none; }
  .nav__menu { display: inline-flex; }
  .nav__aside { margin-left: auto; }
}
@media (max-width: 559px) {
  .nav { --pill-pl: 14px; padding-top: 10px; }
  .nav__aside > .btn { display: none; }
  .nav__logo .logo--full { display: none; }
  .nav__logo .logo--mark { display: block; }
}

/* Menu panel (below 1280px) */
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  transition: visibility 0s linear 0.8s;
}
.menu.is-open { visibility: visible; transition: none; }

.menu__scrim {
  position: absolute;
  inset: 0;
  background: rgba(24, 24, 24, 0.5);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.menu.is-open .menu__scrim { opacity: 1; }

.menu__panel {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  width: min(440px, calc(100% - 16px));
  padding: 8px 20px 24px;
  overflow-y: auto;
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--ink);
  clip-path: inset(0 0 calc(100% - 64px) calc(100% - 110px) round 16px);
  opacity: 0;
  transition: clip-path 0.8s var(--ease), opacity 0.3s ease;
}
.menu.is-open .menu__panel {
  clip-path: inset(0 0 0 0 round 16px);
  opacity: 1;
}

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
}
.menu__top .logo { height: 30px; }

.menu__nav { margin-top: 28px; }
.menu__nav a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(26px, 7vw, 34px);
  font-weight: var(--w-display);
  line-height: 1.1;
  letter-spacing: -0.03em;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.5s ease, transform 0.8s var(--ease);
}
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.menu.is-open .menu__nav li:nth-child(1) a { transition-delay: 0.1s; }
.menu.is-open .menu__nav li:nth-child(2) a { transition-delay: 0.14s; }
.menu.is-open .menu__nav li:nth-child(3) a { transition-delay: 0.18s; }
.menu.is-open .menu__nav li:nth-child(4) a { transition-delay: 0.22s; }
.menu.is-open .menu__nav li:nth-child(5) a { transition-delay: 0.26s; }
.menu.is-open .menu__nav li:nth-child(6) a { transition-delay: 0.3s; }

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin-top: auto;
  padding-top: 32px;
  font-size: 15px;
}
.menu__foot .nav__lang { padding: 0; }
.menu__foot .nav__lang a:not([aria-current]) { color: var(--muted); }
.menu__foot .btn { width: 100%; }

html.menu-open { overflow: hidden; }

@media (min-width: 1280px) {
  .menu { display: none; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
}

.hero { --hi: 10px; }
.hero__frame {
  position: absolute;
  inset: var(--hi);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-media);
  background: #111;
  color: #fff;
}
@media (max-width: 760px) {
  .hero { --hi: 8px; }
  .hero__frame { border-radius: 20px; }
}

.hero__media {
  position: absolute;
  inset: -2%;
  transform: translate3d(var(--px, 0px), calc(var(--shift, 0px) + var(--py, 0px)), 0) scale(var(--grow, 1));
  will-change: transform;
}
.hero__zoom {
  position: absolute;
  inset: 0;
  transition: transform 2.2s var(--ease);
}
.motion .hero__zoom { transform: scale(1.22); }
.motion.is-loaded .hero__zoom { transform: none; }

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.6s ease, transform 8s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.hero__slide.is-prev { z-index: 1; opacity: 1; }
.hero__slide.is-active { z-index: 2; opacity: 1; transform: scale(1); }

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 34%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.4) 38%, rgba(0, 0, 0, 0) 72%);
}

.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 28px;
  align-items: end;
  padding: 0 calc(var(--pad) - var(--hi)) calc(clamp(28px, 6vh, 64px) + 44px);
  transform: translate3d(0, var(--lift, 0px), 0);
  will-change: transform;
}

.hero__title {
  grid-column: 1 / span 8;
  font-size: clamp(44px, 6.4vw, 108px);
  font-weight: var(--w-display);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
  translate: var(--tx, 0px) var(--ty, 0px);
}
.hero__title .tone { color: rgba(255, 255, 255, 0.72); }

.hero__aside {
  grid-column: 9 / -1;
  padding-bottom: 0.3em;
}
.hero__sub {
  max-width: 30ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.hero__dots {
  position: absolute;
  left: calc(var(--pad) - var(--hi));
  right: calc(var(--pad) - var(--hi));
  bottom: clamp(22px, 4vh, 36px);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

/* Leaving the hero: the copy stays solid and lifts a little faster than the
   page, the photo drifts slower inside the frame and dims. Where scroll-driven
   animations are supported this runs on the compositor, locked to the scroll
   position (touch included); elsewhere script.js sets the same variables.
   Progress 0-100% = scrolling through the hero's own height. */
.hero__shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--dim, 0);
}
@supports (animation-timeline: view()) {
  .motion .hero { view-timeline: --hero block; }
  .motion .hero__media,
  .motion .hero__content,
  .motion .hero__shade::after {
    animation: linear both;
    animation-timeline: --hero;
    animation-range: exit 0% exit 100%;
  }
  .motion .hero__media { transform: translate3d(var(--px, 0px), var(--py, 0px), 0); animation-name: hero-media; }
  .motion .hero__content { transform: none; animation-name: hero-lift; }
  .motion .hero__shade::after { opacity: 0; animation-name: hero-dim; }
}
@keyframes hero-media { to { translate: 0 18svh; scale: 1.06; } }
@keyframes hero-lift { to { translate: 0 -10svh; } }
@keyframes hero-dim { to { opacity: 0.35; } }
.hero__bars { display: flex; gap: 6px; }
.hero__bar {
  position: relative;
  width: 36px;
  height: 44px;
  margin-block: -13px;
}
.hero__bar span {
  position: absolute;
  left: 0;
  right: 0;
  top: 21px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.hero__bar span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.hero__bar.is-done span::after { transform: scaleX(1); }
.hero__bar.is-active span::after { animation: bar-fill var(--slide-ms, 6000ms) linear forwards; }
.hero.is-paused .hero__bar.is-active span::after { animation-play-state: paused; }
/* Without autoplay, the current photo's bar is simply full. */
html:not(.motion) .hero__bar.is-active span::after { animation: none; transform: scaleX(1); }
@keyframes bar-fill { to { transform: scaleX(1); } }

.hero__pause:hover { color: #fff; }
.hero__pause, .roles__toggle, .foot__legal button, .nav__lang a, .foot__cols a { position: relative; }
.hero__pause::after, .roles__toggle::after, .foot__legal button::after {
  content: "";
  position: absolute;
  inset: -12px -6px;
}
.nav__lang a::after { content: ""; position: absolute; inset: -12px -3px; }
.foot__cols a::after { content: ""; position: absolute; inset: -4px -8px; }

.hero__cue {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.01em;
}
.hero__cue span {
  position: relative;
  width: 44px;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.3);
}
.hero__cue span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateX(-100%);
  animation: cue 2.4s var(--ease) 2.4s 3 both;
}
@keyframes cue {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}
@media (max-width: 760px) {
  .hero__cue { display: none; }
}

@media (max-width: 900px) {
  .hero__title,
  .hero__aside { grid-column: 1 / -1; }
  .hero__aside { padding-bottom: 0; }
}

/* ---------- Sections ---------- */

.sec { padding-top: var(--sec); }

@media (max-width: 900px) {
  .grid__side,
  .grid__main { grid-column: 1 / -1; }
  .grid__side { padding-top: 0; margin-bottom: 20px; }
}

/* Who we are */
.sec.intro { padding-top: clamp(96px, 11vw, 160px); }

.chip {
  display: inline-block;
  width: 1.8em;
  height: 0.8em;
  margin-inline: 0.02em;
  overflow: hidden;
  border-radius: 999px;
  vertical-align: -0.05em;
  background: var(--tray);
  transform-origin: 50% 60%;
}
.chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.statement {
  max-width: 22em;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: var(--w-display);
  line-height: 1.16;
  letter-spacing: -0.028em;
  text-wrap: pretty;
}
.intro__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 48px;
  margin-top: clamp(28px, 3.4vw, 44px);
}
.intro__foot .lede { margin-top: 0; max-width: 32em; }

/* Roles ticker (driven by scroll velocity in script.js) */
.roles__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.roles__head .eyebrow { padding-top: 0; }
.roles__toggle { font-size: 14px; color: var(--muted); }
.roles__toggle:hover { color: var(--ink); }

.ticker {
  margin-top: 20px;
  padding-block: clamp(16px, 2vw, 28px);
  overflow: hidden;
  border-block: 1px solid var(--line);
}
.ticker__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.ticker__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}
.ticker__group li {
  display: flex;
  align-items: center;
  font-size: clamp(40px, 5.6vw, 88px);
  font-weight: var(--w-display);
  line-height: 1.12;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.ticker__group li:nth-child(even) { color: var(--tone); }
.ticker__group li { transition: color 0.4s ease; }
@media (hover: hover) {
  .ticker__group li:hover { color: var(--ink); }
}
/* The UKF phoenix as the separator */
.ticker__group li::after {
  content: "";
  width: 0.4em;
  height: 0.42em;
  margin: 0 0.42em;
  background-color: var(--tone);
  -webkit-mask: var(--logo-symbol) center / contain no-repeat;
  mask: var(--logo-symbol) center / contain no-repeat;
}
html:not(.motion) .ticker__track { width: auto; padding-inline: var(--pad); }
html:not(.motion) .ticker__group { flex-wrap: wrap; flex-shrink: 1; }
html:not(.motion) .ticker__group li { font-size: clamp(30px, 4vw, 56px); }
html:not(.motion) .ticker__group[aria-hidden] { display: none; }
html:not(.motion) .roles__toggle { display: none; }

/* Who you'll meet: pinned scatter of photos around the heading */
.scatter { margin-top: clamp(40px, 6vw, 96px); }
.motion .scatter { margin-top: 0; }
.scatter__center { text-align: center; }
.scatter__center .h2,
.scatter__center .lede { margin-inline: auto; }
.scatter__center .eyebrow { padding-top: 0; margin-bottom: 20px; }
.scatter__center .lede { max-width: 30em; }

.scatter__photos li {
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--tray);
}
.scatter__photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
@media (hover: hover) {
  .scatter__photos li:hover img { transform: scale(1.08); }
}

/* Static layout (no motion): heading, then a tidy grid of photos */
html:not(.motion) .scatter__photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 56px;
  padding-inline: var(--pad);
}
html:not(.motion) .scatter__photos li { aspect-ratio: 40 / 41; }

.motion .scatter { height: 180vh; }
.motion .meet + .eco-sec { padding-top: clamp(48px, 6vw, 96px); }
.motion .scatter__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.motion .scatter__photos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.motion .scatter__center {
  position: relative;
  z-index: 2;
  max-width: 980px;
  transform: scale(var(--sc, 1));
}
.motion .scatter__photos li {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: calc(var(--w) * 1vw);
  aspect-ratio: 40 / 41;
  opacity: 0;
  pointer-events: auto;
  will-change: transform, opacity;
}
.motion .scatter__photos li.is-land { aspect-ratio: 458 / 258; }
@media (max-width: 760px) {
  .motion .scatter { height: 150vh; }
  .motion .scatter__photos li { width: calc(var(--w) * 2.6vw); }
  .motion .scatter__photos .scatter__side,
  .motion .scatter__photos .scatter__wide { display: none; }
  html:not(.motion) .scatter__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Ecosystem: expanding cards ---------- */

.eco {
  display: flex;
  gap: 12px;
  height: clamp(520px, 72vh, 700px);
  margin-top: clamp(48px, 6vw, 80px);
}

.eco__card {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-media);
  background: #222;
  color: #fff;
  transition: flex-grow 0.9s var(--ease-card);
}
.eco__card.is-active { flex-grow: 3.2; }

.eco__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eco__card::before,
.eco__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: opacity 0.8s var(--ease-card);
}
.eco__card::before { background: rgba(0, 0, 0, 0.32); }
.eco__card::after {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.48) 38%, rgba(0, 0, 0, 0) 70%);
  opacity: 0;
}
.eco__card.is-active::before { opacity: 0; }
.eco__card.is-active::after { opacity: 1; }

.eco__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  background: rgba(18, 18, 18, 0.42);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  font-size: 15px;
  white-space: nowrap;
  transition: opacity 0.5s ease;
}
.eco__card.is-active .eco__tag { opacity: 0; }
.eco__n { margin-right: 8px; opacity: 0.6; font-variant-numeric: tabular-nums; }

/* Collapsed bodies stay in the accessibility tree and keyboard order;
   focusing the link expands its card (script.js). */
.eco__body {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(520px, 46vw);
  padding: clamp(24px, 3vw, 40px);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.4s ease, transform 0.9s var(--ease-card);
}
.eco__card.is-active .eco__body {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.6s ease 0.25s, transform 0.9s var(--ease-card) 0.2s;
}

.eco__title {
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: var(--w-display);
  line-height: 1;
  letter-spacing: -0.032em;
}
.eco__text {
  max-width: 34ch;
  margin-top: 14px;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.eco__link { margin-top: 24px; }

@media (max-width: 900px) {
  .eco { flex-direction: column; height: auto; }
  .eco__card,
  .eco__card.is-active {
    flex: none;
    aspect-ratio: 4 / 5;
  }
  .eco__card::before { opacity: 0; }
  .eco__card::after {
    opacity: 1;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.58) 42%, rgba(0, 0, 0, 0) 74%);
  }
  .eco__tag { display: none; }
  /* The text sits in flow at the bottom, and the card grows past its usual 4:5 shape whenever the text
     needs more room (long copy, Korean, larger system text), so the title can never be pushed off the top. */
  .eco { container-type: inline-size; }
  .eco__card,
  .eco__card.is-active {
    aspect-ratio: auto;
    min-height: calc((100vw - 40px) * 1.25);
    min-height: 125cqw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .eco__body {
    position: relative;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}
@media (min-width: 600px) and (max-width: 900px) {
  .eco__card,
  .eco__card.is-active { min-height: calc((100vw - 80px) * 0.6875); min-height: 68.75cqw; }
}

/* ---------- Film ---------- */

.film {
  position: relative;
  overflow: hidden;
  background: #111;
  color: #fff;
}
.film__media {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
}
.film__poster,
.film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Show the whole film whatever the frame shape (the phone cut is 9:16). */
.film video { object-fit: contain; background: #000; }
.film__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 42%), rgba(0, 0, 0, 0.14);
}

.film__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 24px 0 8px;
  border-radius: 999px;
  background: #fff;
  color: #181818;
  font-size: 17px;
  transform: translate(-50%, -50%);
  translate: var(--mx, 0px) var(--my, 0px);
  transition: background-color 0.2s ease, translate 0.6s var(--ease);
}
.film__play:hover { background: #edece9; }
.film__icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #181818;
}
.film__icon::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 13px;
  width: 12px;
  height: 14px;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.film__meta {
  position: absolute;
  left: calc(var(--fl, 0px) + clamp(20px, 2.4vw, 32px));
  bottom: calc(var(--fb, 0px) + clamp(18px, 2vw, 28px));
  z-index: 2;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.88);
}
.film.is-playing .film__media,
.film.is-playing .film__shade,
.film.is-playing .film__play,
.film.is-playing .film__meta { display: none; }

/* Static: an inset rounded card */
html:not(.motion) .film-pin__stage { padding-inline: var(--pad); }
html:not(.motion) .film { aspect-ratio: 16 / 9; border-radius: var(--r-media); }
@media (max-width: 760px) {
  html:not(.motion) .film { aspect-ratio: 4 / 5; }
}

/* Motion: the window grows from an inset card to full-bleed, then holds */
.motion .film-sec { padding-top: 0; }
.motion .film-pin { height: 170vh; }
.film:not(.is-playing) { cursor: pointer; }
.motion .film-pin__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}
.motion .film {
  position: absolute;
  inset: 0;
  clip-path: inset(var(--ft, 0px) var(--fr, 0px) var(--fb, 0px) var(--fl, 0px) round var(--frad, 0px));
}

/* ---------- Impact ---------- */

.impact__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 48px;
}
.impact__head {
  grid-column: 1 / span 5;
  align-self: start;
  position: sticky;
  top: 112px;
}
.impact__head .eyebrow { padding-top: 0; margin-bottom: 20px; }
.impact__media {
  position: relative;
  margin-top: clamp(32px, 4vw, 48px);
  aspect-ratio: 4 / 3;
  max-width: 560px;
  overflow: hidden;
  border-radius: var(--r-media);
  background: var(--tray);
}
.impact__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.impact__toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
  font-size: 13px;
  transition: background-color 0.2s ease;
}
.impact__toggle:hover { background: rgba(18, 18, 18, 0.72); }

.stats { grid-column: 6 / -1; }

.stat {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 16px clamp(20px, 2.6vw, 40px);
  padding: clamp(24px, 2.6vw, 36px) 0;
}
.stat:first-child { padding-top: 0; }
/* Hairline that draws in under each row */
.stat::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  transform-origin: 0 50%;
}
.motion .stat::after { transform: scaleX(0); transition: transform 1.4s var(--ease) 0.2s; }
.motion .stat.is-in::after { transform: none; }

.stat__num {
  min-width: 2.2em;
  font-size: clamp(64px, 8.4vw, 136px);
  font-weight: var(--w-display);
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat__num > [aria-hidden] { display: inline-flex; }
.stat__copy { max-width: 30ch; padding-bottom: 0.5em; }
.stat__label { font-size: 18px; font-weight: var(--w-ui); letter-spacing: -0.02em; }
.stat__cap {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}

/* Odometer digits */
.odo { display: inline-flex; }
.odo__digit {
  display: block;
  height: 1em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.odo__col {
  display: block;
  transform: translate3d(0, 0, 0);
  transition: transform 2.2s var(--ease);
}
.odo__col span { display: block; height: 1em; line-height: 1; }

@media (max-width: 900px) {
  .impact__head,
  .stats { grid-column: 1 / -1; }
  .impact__head { position: static; }
}
@media (max-width: 560px) {
  .stat { grid-template-columns: minmax(0, 1fr); }
  .stat__copy { padding-bottom: 0; }
}

/* ---------- Why join: tray ---------- */

.tray {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 12px;
  margin-top: clamp(48px, 6vw, 80px);
  padding: 12px;
  border-radius: var(--r-tray);
  background: var(--tray);
}

.tray__photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-media);
  background: var(--chip);
}
.tray__photo img {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0);
}
.tray__img {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s var(--ease-wipe) 1.1s;
}
.tray__img.is-active {
  z-index: 1;
  clip-path: inset(0 0 0 0);
  transition-delay: 0s;
}

.tray__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tray__card {
  display: flex;
  flex-direction: column;
  min-height: clamp(240px, 22vw, 300px);
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--r-media);
  background: var(--paper);
  transition: background-color 0.5s ease, color 0.5s ease;
}
.tray__card.is-active { background: #181818; color: #f2f1ee; }
.tray__card.is-active .tray__text { color: rgba(242, 241, 238, 0.72); }
.tray__card.is-active .tray__num { background: #f2f1ee; color: #181818; }
.tray__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--chip);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tray__title {
  margin-top: auto;
  padding-top: 40px;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: var(--w-display);
  line-height: 1.1;
  letter-spacing: -0.028em;
}
.tray__text {
  max-width: 34ch;
  min-height: calc(3 * 1.45em);
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--muted);
  transition: color 0.5s ease;
}

@media (max-width: 900px) {
  .tray { grid-template-columns: minmax(0, 1fr); }
  .tray__photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .tray { border-radius: var(--r-media); padding: 8px; gap: 8px; }
  .tray__photo,
  .tray__card { border-radius: 18px; }
  .tray__list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tray__card { min-height: 0; }
  .tray__title { padding-top: 28px; }
  .tray__text { min-height: 0; }
}

/* ---------- Events ---------- */

.events__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
}
.events__controls {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

.arrow {
  display: grid;
  place-items: center;
  width: 56px;
  height: 40px;
  border-radius: 999px;
  background: var(--chip);
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.arrow svg { width: 16px; height: 16px; }
.arrow:hover { background: #e3e1dd; }
.arrow[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.arrow[aria-disabled="true"]:hover { background: var(--chip); }

.rail { margin-top: clamp(40px, 5vw, 64px); }
.rail__track {
  display: flex;
  gap: 20px;
  margin-block: -8px;
  padding: 8px var(--pad);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track::after { content: ""; flex: 0 0 1px; margin-left: -20px; }
.rail.is-dragging .rail__track { scroll-snap-type: none; cursor: grabbing; }
.rail.is-dragging .ev__link { pointer-events: none; }

.ev {
  flex: 0 0 clamp(280px, 34vw, 480px);
  scroll-snap-align: start;
}
.ev__link { display: block; border-radius: var(--r-card); }
.ev__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-card);
  background: #111;
}
.ev__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.ev__link:hover .ev__media img { transform: scale(1.05); }
.ev__title {
  text-decoration: underline 1px transparent;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.4s ease;
}
.ev__link:hover .ev__title { text-decoration-color: currentColor; }
.ev__media--black { background: #000; }
.ev__media--type {
  display: grid;
  place-items: center;
  background: var(--tray);
  color: var(--ink);
}
.ev__media--type .logo { height: clamp(40px, 4vw, 64px); transition: transform 0.8s var(--ease); }
.ev__link:hover .ev__media--type .logo { transform: scale(1.06); }
.ev__media--contain img { object-fit: contain; }

.ev__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
}
.ev__title {
  display: block;
  margin-top: 6px;
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: var(--w-display);
  line-height: 1.2;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.rail__progress {
  position: relative;
  height: 1px;
  margin: clamp(28px, 3vw, 40px) var(--pad) 0;
  overflow: hidden;
  background: var(--line);
}
.rail__progress span {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(var(--rp, 0.15));
  transform-origin: 0 50%;
}

.events-sec.has-pin,
.events-sec.has-pin + .cta-sec { padding-top: 0; }

/* Pinned horizontal gallery (wide screens with motion; toggled by script.js) */
.hpin.is-pinned .hpin__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hpin.is-pinned .ev { flex-basis: clamp(340px, 34vw, 540px); }
.hpin.is-pinned .rail__track {
  overflow: visible;
  scroll-snap-type: none;
  transform: translate3d(var(--hx, 0px), 0, 0);
  will-change: transform;
}

@media (max-width: 760px) {
  .events__head { flex-direction: column; align-items: flex-start; }
  .ev { flex-basis: 82vw; }
}

/* ---------- Closing CTA ---------- */

.cta {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(480px, 60vw, 720px);
  overflow: hidden;
  border-radius: var(--r-media);
  background: #111;
  color: #fff;
  text-align: center;
}
.motion .cta { clip-path: inset(var(--ci, 0px) round var(--r-media)); }
.cta__media {
  position: absolute;
  inset: 0;
  transform: scale(var(--cs, 1));
}
.cta__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}
.cta__shade {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 12, 0.52);
}
.cta__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 3.4vw, 44px);
  padding: 64px var(--pad);
}
.cta__title {
  max-width: 11em;
  font-size: clamp(40px, 5.6vw, 92px);
  font-weight: var(--w-display);
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.cta__title .tone { color: rgba(255, 255, 255, 0.74); }

/* ---------- Footer ---------- */

.foot {
  margin-top: clamp(80px, 9vw, 128px);
  padding-top: clamp(48px, 6vw, 80px);
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.foot__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 48px;
}
.foot__brand {
  grid-column: 1 / span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  font-size: 15px;
}
.foot__logo .logo { height: 44px; }
.foot__tag { max-width: 26ch; color: var(--muted); }

.foot__cols {
  grid-column: 6 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px var(--gap);
  font-size: 15px;
}
.foot__label {
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: var(--w-ui);
  color: var(--muted);
}
.foot__cols li + li { margin-top: 8px; }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: clamp(64px, 8vw, 112px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.foot__base .nav__lang { padding: 0; font-size: 13px; }
.foot__base .nav__lang a { color: var(--muted); }
.foot__base .nav__lang a[aria-current] { color: var(--ink); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot__base a:hover { color: var(--ink); }

.foot__word {
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0 var(--pad) clamp(12px, 2vw, 28px);
  font-size: 8.7vw;
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--ink);
}
.foot__word .ch {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.foot__word .ch > span { display: inline-block; }
.motion .foot__word .ch > span {
  transform: translate3d(0, 105%, 0);
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.028s);
}
.motion .foot__word.is-in .ch > span { transform: none; }
.foot__word .ch { padding-top: 0.12em; margin-top: -0.12em; }
.foot__word .ch > span { transition: transform 1.1s var(--ease), color 0.4s ease; }
.foot__word.is-done .ch > span { transition-delay: 0s; transition-duration: 0.6s; }
@media (hover: hover) {
  .motion .foot__word.is-done .ch:hover > span { transform: translate3d(0, -0.1em, 0); color: var(--tone); }
}
.foot__legal button { font-size: inherit; color: var(--muted); }
.foot__legal button:hover { color: var(--ink); }

@media (max-width: 900px) {
  .foot__brand,
  .foot__cols { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__base { flex-direction: column; align-items: flex-start; }
}

/* ---------- Motion start states (only when motion is allowed) ---------- */

/* Hero headline lines rise out of masks. */
.motion [data-hero-title]:not(.is-split) { visibility: hidden; }
.line {
  display: block;
  overflow: hidden;
  padding: 0.08em 0.06em 0.12em;
  margin: -0.08em -0.06em -0.12em;
}
@supports (overflow: clip) {
  .line { overflow: visible; overflow-y: clip; }
}
.line__i { display: block; }
.motion .line__i {
  transform: translate3d(0, 110%, 0);
  transition: transform 1.4s var(--ease);
  transition-delay: calc(0.25s + var(--i, 0) * 0.12s);
}
.motion.is-loaded .line__i { transform: none; }

.motion [data-hero-detail] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 1s ease, transform 1.2s var(--ease);
  transition-delay: calc(0.85s + var(--i, 0) * 0.1s);
}
.motion.is-loaded [data-hero-detail] { opacity: 1; transform: none; }

.motion .nav { opacity: 0; transition: opacity 1s ease 0.6s; }
.motion.is-loaded .nav { opacity: 1; }
/* Scrolling during the opening: whatever hasn't started yet arrives quickly. */
html.is-hurried .line__i,
html.is-hurried [data-hero-detail],
html.is-hurried .hero__zoom,
html.is-hurried .nav { transition-duration: 0.45s !important; transition-delay: 0s !important; }

/* Headings: words slide up from masks. */
.motion [data-split]:not(.is-split) { visibility: hidden; }
.w {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding: 0.08em 0.05em 0.12em;
  margin: -0.08em -0.05em -0.12em;
}
@supports (overflow: clip) {
  .w { overflow: visible; overflow-y: clip; }
}
.w__i { display: inline-block; }
.motion .w__i {
  transform: translate3d(0, 110%, 0);
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.035s);
}
.motion .is-in .w__i { transform: none; }

/* Blocks fade up. */
.motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 1s ease, transform 1.2s var(--ease);
}
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion .tray__photo > .tray__img {
  transition: clip-path 1.1s var(--ease-wipe) 1.1s, scale 1.8s var(--ease) var(--d, 0s);
}
.motion .tray__photo > .tray__img.is-active { transition-delay: 0s, var(--d, 0s); }
.motion .tray__card[data-reveal] {
  transition: opacity 1s ease, transform 1.2s var(--ease), background-color 0.5s ease, color 0.5s ease;
}

/* Images wipe open from the bottom while the photo settles. */
.motion [data-reveal-img] {
  clip-path: inset(100% 0 0 0 round var(--r-media));
  transition: clip-path 0.9s var(--ease) var(--d, 0s), flex-grow 0.9s var(--ease-card);
}
.motion [data-reveal-img] > img {
  scale: 1.22;
  transition: scale 1.8s var(--ease) var(--d, 0s);
}
.motion [data-reveal-img].is-in { clip-path: inset(0 0 0 0 round var(--r-media)); }
.motion [data-reveal-img].is-in > img { scale: 1; }

/* ---------- Pointer label ---------- */

.pointer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  pointer-events: none;
}
.pointer__label {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  color: #181818;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.3s ease, transform 0.5s var(--ease);
}
.pointer.is-on .pointer__label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.has-pointer [data-cursor-label],
.has-pointer [data-cursor-label] * { cursor: none; }
.has-pointer [data-cursor-label] :is(a, button) { cursor: pointer; }
@media (hover: none), (pointer: coarse) {
  .pointer { display: none; }
}

/* ---------- Forced colours ---------- */

@media (forced-colors: active) {
  .logo,
  .intro-mark,
  .ticker__group li::after {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
  .hero__bar span::after { forced-color-adjust: none; background: Highlight; }
}

/* ---------- Reduced motion ---------- */

/* ---------- Korean ---------- */

/* Latin stays in Geist; Hangul comes from Pretendard (loaded only for Korean). */
html.lang-ko {
  --sans: "Geist", "Pretendard Variable", Pretendard, ui-sans-serif, system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
/* Korean breaks between words, never inside one. */
html.lang-ko body { word-break: keep-all; overflow-wrap: break-word; }
/* Hangul fills more of the em box than Latin: a little more leading, a little less tracking. */
html.lang-ko .hero__title { line-height: 1.14; letter-spacing: -0.03em; }
html.lang-ko .h2 { line-height: 1.2; letter-spacing: -0.025em; }
html.lang-ko .statement { line-height: 1.34; letter-spacing: -0.02em; }
html.lang-ko .menu__nav a,
html.lang-ko .tray__title,
html.lang-ko .ticker__group li { line-height: 1.25; }
/* Until script.js has put the Korean copy in place. */
html.lang-ko:not(.i18n-ready) [data-i18n] { visibility: hidden; }

/* Switching language: the copy dissolves and re-forms in place; photos stay. */
html.is-relang [data-i18n] {
  opacity: 0 !important;
  filter: blur(6px);
  transition: opacity 0.24s ease, filter 0.24s ease !important;
}
html.is-relang-in [data-i18n] { transition: opacity 0.5s ease, filter 0.6s var(--ease) !important; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero__slide { transform: none !important; }
  html {
    transition: --bg 0.4s ease, --paper 0.4s ease, --tray 0.4s ease, --chip 0.4s ease, --ink 0.4s ease,
      --ink-hover 0.4s ease, --muted 0.4s ease, --tone 0.4s ease, --line 0.4s ease !important;
  }
}