/* TAIYO Studio. Theme tokens switch with html.is-night and html.lang-* */

@property --j1 { syntax: '<color>'; inherits: true; initial-value: #FBF8F1 }
@property --j2 { syntax: '<color>'; inherits: true; initial-value: #EEF2E2 }
@property --j3 { syntax: '<color>'; inherits: true; initial-value: #E0ECD4 }
@property --j4 { syntax: '<color>'; inherits: true; initial-value: #D9ECEA }
@property --j5 { syntax: '<color>'; inherits: true; initial-value: #D8E6F3 }
@property --j6 { syntax: '<color>'; inherits: true; initial-value: #F0E3D3 }
@property --j7 { syntax: '<color>'; inherits: true; initial-value: #EAE0F0 }
@property --j8 { syntax: '<color>'; inherits: true; initial-value: #DDD0EA }
@property --sky0 { syntax: '<color>'; inherits: true; initial-value: #78AEEA }
@property --sky1 { syntax: '<color>'; inherits: true; initial-value: #D6E8F6 }
@property --hz-sky { syntax: '<color>'; inherits: true; initial-value: #F9DDB7 }
@property --hz-sea { syntax: '<color>'; inherits: true; initial-value: #A9CBE3 }
@property --tl { syntax: '<color>'; inherits: true; initial-value: #242424 }
@property --tlm { syntax: '<color>'; inherits: true; initial-value: #4F4D49 }
@property --acl { syntax: '<color>'; inherits: true; initial-value: #A6001E }

:root {
  --sky0: #78AEEA; --sky1: #D6E8F6;
  --j1: #FBF8F1; --j2: #EEF2E2; --j3: #E0ECD4; --j4: #D9ECEA; --j5: #D8E6F3; --j6: #F0E3D3; --j7: #EAE0F0; --j8: #DDD0EA;
  --hz-sky: #F9DDB7; --hz-sea: #A9CBE3; --tl: #242424; --tlm: #4F4D49; --acl: #A6001E;
  --line-l: rgba(36,36,36,.14); --line-2: rgba(36,36,36,.22); --card: rgba(255,255,255,.66); --spot: rgba(255,250,235,.85);
  --chip: rgba(36,36,36,.04); --field: rgba(36,36,36,.26); --err: #B0102C;
  --hd-bg: rgba(251,248,241,.82); --hero-scrim: none;
  --orb: radial-gradient(circle at 50% 38%, #FFF4D4 0%, #F7C75A 52%, #EE9B3B 100%); --orb-sh: 0 0 90px 26px rgba(246,178,80,.45);
  --orb-ref: #FBE3A6; --hz-haze: rgba(255,236,204,.6); --hz-line: rgba(255,255,255,.85);
  --arc-a: #A6001E; --arc-b: #E0702E; --arc-c: #E2A21C; --mk: #FBF8F1;
  --frame: #1E1F24; --frame-sh: 0 50px 100px -60px rgba(36,36,36,.6); --ring: rgba(36,36,36,.12); --lbl-sh: rgba(251,248,241,.95);

  --f-disp: 'DM Sans'; --f-body: 'Inter'; --f-lab: 'Inter';
  --wd: 500; --wd3: 500; --ls: -0.04em; --ls3: -0.02em; --lh: 1.02; --k: 1; --k3: 1; --lhb: 1.62; --lsb: 0px; --feat: normal; --mwk: 1;
  --sp: clamp(120px, 13vw, 210px);
  --px: clamp(20px, 5vw, 80px);

  transition: --j1 .9s ease, --j2 .9s ease, --j3 .9s ease, --j4 .9s ease, --j5 .9s ease, --j6 .9s ease, --j7 .9s ease, --j8 .9s ease,
    --sky0 .9s ease, --sky1 .9s ease, --hz-sky .9s ease, --hz-sea .9s ease, --tl .9s ease, --tlm .9s ease, --acl .9s ease;
}
:root.is-night {
  --sky0: #0B0918; --sky1: #221D3E;
  --j1: #1A1526; --j2: #1A1526; --j3: #1A1526; --j4: #1A1526; --j5: #1A1526; --j6: #1A1526; --j7: #1A1526; --j8: #1A1526;
  --hz-sky: #2C2648; --hz-sea: #221D3A; --tl: #F7F4EE; --tlm: #BDB8AE; --acl: #F4CB5C;
  --line-l: rgba(247,244,238,.14); --line-2: rgba(247,244,238,.24); --card: rgba(255,255,255,.045); --spot: rgba(244,203,92,.10);
  --chip: rgba(247,244,238,.05); --field: rgba(247,244,238,.28); --err: #FF8A8A;
  --hd-bg: rgba(26,21,38,.78); --hero-scrim: linear-gradient(0deg, rgba(16,12,26,.55) 0%, rgba(16,12,26,0) 58%);
  --orb: radial-gradient(circle closest-side, #120F1C 0 88%, #FFE9B5 93%, #F4CB5C 97%, rgba(244,203,92,0) 100%); --orb-sh: 0 0 80px 18px rgba(244,203,92,.32);
  --orb-ref: rgba(244,203,92,.7); --hz-haze: rgba(112,96,164,.25); --hz-line: rgba(255,233,181,.4);
  --arc-a: #A6001E; --arc-b: #F08A4B; --arc-c: #F4CB5C; --mk: #1A1526;
  --frame: #120F1C; --frame-sh: 0 0 0 1px rgba(247,244,238,.08), 0 50px 100px -60px rgba(0,0,0,.8); --ring: rgba(247,244,238,.12); --lbl-sh: rgba(26,21,38,.95);
}
:root.lang-fr { --k: .9; --k3: .95 }
:root.lang-ja {
  --f-disp: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo;
  --f-body: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo;
  --f-lab: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo;
  --wd: 600; --wd3: 600; --ls: 0.02em; --ls3: 0.02em; --lh: 1.36; --k: .6; --k3: .8; --lhb: 1.95; --lsb: 0.04em; --feat: "palt"; --mwk: 2.2;
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body { margin: 0; background: var(--j8); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
html.menu-open { overflow: hidden }
a { color: inherit; text-decoration: none }
a:hover { color: inherit }
::selection { background: #F4CB5C; color: #242424 }
input, select, textarea, button { font: inherit; color: inherit }
:focus-visible { outline: 2px solid #F4CB5C; outline-offset: 3px }
main:focus { outline: none }
[hidden] { display: none !important }

/* Until the first render, keep the footer out of view (the inline head script adds .js) */
.js:not(.ready) main { min-height: 100vh }

.root {
  position: relative; min-height: 100vh;
  background: linear-gradient(180deg, var(--j1) 0, var(--j1) 90vh, var(--j2) 24%, var(--j3) 40%, var(--j4) 54%, var(--j5) 67%, var(--j6) 80%, var(--j7) 91%, var(--j8) 100%);
  color: var(--tl); font-family: var(--f-body), sans-serif; letter-spacing: var(--lsb); font-feature-settings: var(--feat);
  overflow-x: clip;
}
.lang-ja .root { word-break: auto-phrase; line-break: strict }
@supports not (overflow: clip) { body { overflow-x: hidden } }

/* ---------- shared pieces ---------- */
.wrap { max-width: 1440px; margin: 0 auto }
.stack-28 { display: grid; gap: 28px }
.stack-14 { display: grid; gap: 14px }
.acc { color: var(--acl) }
.mw { max-width: calc(var(--mw) * var(--mwk)) }
.bal { text-wrap: balance }
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-lab), sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--acl);
}
.eyebrow::before { content: ''; width: 10px; height: 10px; flex: none; border-radius: 50%; background: #F4CB5C; box-shadow: 0 0 0 4px rgba(244,203,92,.22) }
.display {
  margin: 0; font-family: var(--f-disp), sans-serif; font-weight: var(--wd);
  font-size: calc(var(--k) * var(--fs, clamp(36px, 4.8vw, 80px))); line-height: var(--lh); letter-spacing: var(--ls);
}
.ln { display: block; overflow: hidden; padding: 0 .04em .12em 0; margin-bottom: -.12em }
.ln > span { display: block }
.num { font-family: var(--f-lab), sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--acl); font-variant-numeric: tabular-nums }
.lead { margin: 0; font-size: clamp(17px, 1.25vw, 19px); line-height: var(--lhb); color: var(--tlm); text-wrap: pretty }
.shead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 64px; margin-bottom: clamp(44px, 5vw, 80px) }
.shead--flush { margin-bottom: 0 }
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 40px clamp(24px, 3vw, 48px) }

/* ---------- header ---------- */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 110; color: var(--tl) }
.hd__bg {
  position: absolute; inset: 0; background: var(--hd-bg); border-bottom: 1px solid var(--line-l);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  opacity: 0; visibility: hidden; transition: opacity .45s ease, background-color .6s ease, visibility 0s linear .45s;
}
.hd.is-solid .hd__bg { opacity: 1; visibility: visible; transition: opacity .45s ease, background-color .6s ease, visibility 0s }
.hd__in {
  position: relative; height: 92px; max-width: 1600px; margin: 0 auto; padding: 0 clamp(16px, 3.4vw, 48px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.hd__brand { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px) }
.brand { display: flex; align-items: center; gap: 14px }
.emb { position: relative; display: block; width: 54px; height: 54px; flex: none }
.emb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .6s ease }
.emb .emb__night, .is-night .emb .emb__day { opacity: 0 }
.is-night .emb .emb__night { opacity: 1 }
.brand__word { display: flex; align-items: baseline; gap: 9px }
.brand__word img { display: block; width: 92px; height: 24px }
.brand__studio { font-family: Arial, Arimo, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12.5px; line-height: 1; letter-spacing: .04em; color: #A6001E }

.mode-btn {
  width: 42px; height: 42px; padding: 0; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: transparent;
  display: grid; place-items: center; cursor: pointer; color: inherit; transition: transform .5s cubic-bezier(.2,.7,.1,1);
}
.mode-btn svg { display: block; overflow: visible }
.ecl__moon { transform: translate(15px, -15px); transition: transform .8s cubic-bezier(.6,0,.2,1) }
.is-night .ecl__moon { transform: translate(0, 0) }
.ecl__rays { stroke: #E3A51F; transform-origin: 12px 12px; transform: rotate(0deg) scale(1); opacity: 1; transition: transform .8s cubic-bezier(.6,0,.2,1), opacity .5s ease .15s, stroke .5s ease }
.is-night .ecl__rays { stroke: #F4CB5C; transform: rotate(22.5deg) scale(.86); opacity: .5; transition: transform .8s cubic-bezier(.6,0,.2,1), opacity .5s ease, stroke .5s ease }
.ecl__disc { fill: #E9AE2A; transform-origin: 12px 12px; transform: scale(.8); transition: transform .8s cubic-bezier(.6,0,.2,1), fill .5s ease }
.is-night .ecl__disc { fill: #F4CB5C; transform: scale(1) }
.ecl__glow { stroke: #F4CB5C; opacity: 0; transition: opacity .3s ease }
.is-night .ecl__glow { opacity: .28; transition: opacity .6s ease .3s }
.ecl__bead { fill: #FFF3CF; opacity: 0; transition: opacity .2s ease }
.is-night .ecl__bead { opacity: 1; transition: opacity .4s ease .55s }

.hd__wide { display: none; align-items: center; gap: clamp(20px, 2.6vw, 40px) }
.hd__narrow { display: flex; align-items: center; gap: 10px }
@media (min-width: 1000px) {
  .hd__wide { display: flex }
  .hd__narrow { display: none }
}
.hd__nav { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 38px); font-size: 15px; font-weight: 500 }
.hd__nav a { position: relative; padding: 8px 0 6px; border-bottom: 1px solid transparent; transition: border-color .3s ease }
.hd__nav a[aria-current="page"] { border-bottom-color: currentColor }
.langs { display: flex; align-items: center; gap: 2px; font-family: var(--f-lab), sans-serif; font-size: 12px; letter-spacing: .06em }
.langs__sep { opacity: .3 }
.lang-b {
  border: 0; background: transparent; cursor: pointer; padding: 6px 5px; color: inherit; font-family: inherit; font-size: inherit; letter-spacing: inherit;
  font-weight: 400; opacity: .55; text-decoration: none; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.lang-b[aria-pressed="true"] { font-weight: 600; opacity: 1; text-decoration: underline }

.pill { position: relative; overflow: hidden; display: inline-flex; align-items: center; border-radius: 999px; background: #F4CB5C; color: #242424; font-weight: 600 }
.pill__label { position: relative }
.pill__arrow { position: relative; border-radius: 50%; background: #A6001E; color: #FFFFFF; display: grid; place-items: center }
.pill--hd { gap: 12px; padding: 8px 8px 8px 22px; font-size: 14.5px; box-shadow: 0 10px 30px -12px rgba(200,140,20,.75); transition: transform .3s cubic-bezier(.2,.7,.1,1), box-shadow .3s }
.pill--hd .pill__arrow { width: 30px; height: 30px; font-size: 13px }
.pill--lg { gap: 18px; padding: 10px 10px 10px 32px; font-size: 17px; box-shadow: 0 20px 60px -20px rgba(214,150,30,.75); transition: transform .35s cubic-bezier(.2,.7,.1,1), box-shadow .35s }
.pill--lg .pill__arrow { width: 52px; height: 52px; font-size: 18px }
.sheen {
  position: absolute; top: -10%; bottom: -10%; left: -30%; width: 22%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0)); transform: skewX(-20deg); pointer-events: none;
}
.sheen--lg { width: 20% }

.round-cta { width: 44px; height: 44px; border-radius: 50%; background: #F4CB5C; color: #242424; display: grid; place-items: center; font-size: 15px; box-shadow: 0 8px 24px -10px rgba(200,140,20,.8) }
.menu-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; display: grid; place-items: center; cursor: pointer; color: inherit }
.menu-btn__bars { display: grid; gap: 5px }
.menu-btn__bars span { display: block; height: 1.5px }
.menu-btn__bars span:first-child { width: 18px; background: currentColor }
.menu-btn__bars span:last-child { width: 11px; background: #A6001E; justify-self: end }

.menu {
  position: fixed; inset: 0; z-index: 105; background: var(--j1); color: var(--tl); padding: 120px 24px 32px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 36px; overflow: auto; overscroll-behavior: contain;
  animation: menu-in .28s ease both;
}
@keyframes menu-in { from { opacity: 0 } }
.menu__nav { display: grid; gap: 14px; font-family: var(--f-disp), sans-serif; font-weight: var(--wd); font-size: calc(var(--k) * 44px); line-height: 1.1; letter-spacing: var(--ls) }
.menu__langs { display: flex; gap: 10px; font-family: var(--f-lab), sans-serif; font-size: 13px }
@media (min-width: 1000px) { .menu { display: none !important } }
/* Phones: the export's header was wider than the screen and pushed the menu button off the edge */
@media (max-width: 480px) {
  .hd__in { gap: 10px }
  .hd__brand { gap: 10px }
  .brand { gap: 10px }
  .emb { width: 44px; height: 44px }
  .brand__word img { width: 80px; height: 21px }
  .brand__studio { font-size: 11px }
  .mode-btn { width: 38px; height: 38px }
}
@media (max-width: 370px) { .round-cta { display: none } }
@media (max-width: 359px) { .brand__studio { display: none } }

@media (hover: hover) {
  .mode-btn:hover { transform: rotate(18deg) }
  .pill--hd:hover { transform: translateY(-1px); box-shadow: 0 0 0 5px rgba(244,203,92,.28), 0 14px 34px -12px rgba(200,140,20,.9); color: #242424 }
  .pill--lg:hover { transform: translateY(-2px); box-shadow: 0 0 0 8px rgba(244,203,92,.2), 0 26px 70px -20px rgba(214,150,30,.9); color: #242424 }
}

/* ---------- hero ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; color: var(--tl);
  background: linear-gradient(180deg, var(--sky0) 0%, var(--sky1) 60%, var(--j1) 100%);
}
.hero--about { height: 92vh; height: 92svh }
.hero--worlds { height: 88vh; height: 88svh; min-height: 620px }
.hero > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.hero__scrim { position: absolute; inset: 0; background: var(--hero-scrim); pointer-events: none }
.hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, rgba(0,0,0,0), var(--j1)); pointer-events: none }
.hero--home .hero__fade { height: 20% }
.hero__in {
  position: relative; z-index: 2; height: 100%; max-width: 1440px; margin: 0 auto;
  padding: 124px var(--px) clamp(40px, 7vh, 80px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(24px, 4vh, 40px);
}
.hero--home .hero__in { padding-bottom: clamp(30px, 5vh, 56px); gap: clamp(26px, 4.2vh, 44px) }
.hero__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 56px }
.hero--home .hero__foot { gap: 28px 56px }
.hero__foot--worlds { gap: 24px 56px }
.hero__sub { margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; font-weight: 450; text-wrap: pretty }
.hero__sub--about { line-height: 1.6 }
.hero__sub strong { font-weight: 600 }
.scrollcue { display: flex; align-items: center; gap: 12px; font-family: var(--f-lab), sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase }
.scrollcue__bar { position: relative; display: block; width: 1px; height: 40px; overflow: hidden; background: var(--line-l) }
.scrollcue__bar span { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: currentColor }

/* ---------- home ---------- */
.approach { position: relative; padding: var(--sp) var(--px); color: var(--tl) }
.approach__in { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px clamp(48px, 7vw, 140px) }
.approach__side { flex: 1 1 340px; max-width: 540px; align-self: stretch }
@media (min-width: 1000px) { .approach__sticky { position: sticky; top: 140px } }
.approach__list { flex: 1.5 1 460px; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line-l) }
.approach__item { display: grid; grid-template-columns: minmax(44px, 72px) minmax(0, 1fr); gap: 10px 24px; padding: clamp(30px, 3.4vw, 48px) 0; border-top: 1px solid var(--line-l) }
.approach__n { padding-top: .75em }
.approach__h { margin: 0; font-family: var(--f-disp), sans-serif; font-weight: var(--wd3); font-size: calc(var(--k3) * clamp(24px, 2.3vw, 36px)); line-height: 1.16; letter-spacing: var(--ls3); text-wrap: balance }
.approach__t { margin: 0; font-size: 17px; line-height: var(--lhb); color: var(--tlm); text-wrap: pretty }

.roles-sec { position: relative; padding: 0 var(--px) var(--sp); color: var(--tl) }
.roles { position: relative }
.roles__spot {
  position: absolute; left: 0; top: 0; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--spot), rgba(255,255,255,0) 72%); opacity: 0; transition: opacity .45s ease;
  pointer-events: none; z-index: 0; will-change: transform;
}
.roles__list { position: relative; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line-l) }
.roles__item {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 40px;
  padding: clamp(18px, 2vw, 28px) 0; border-top: 1px solid var(--line-l);
}
.roles__name { display: flex; align-items: baseline; gap: clamp(16px, 2vw, 28px); min-width: 0; transition: transform .5s cubic-bezier(.2,.7,.1,1) }
.roles__name .num { flex: none }
.roles__h { font-family: var(--f-disp), sans-serif; font-weight: var(--wd); font-size: calc(var(--k3) * clamp(26px, 3.1vw, 48px)); line-height: 1.1; letter-spacing: var(--ls) }
.roles__t { flex: 0 1 380px; font-size: 16px; line-height: 1.55; color: var(--tlm); text-wrap: pretty }
@media (hover: hover) { .roles__name:hover { transform: translateX(12px) } }

.hzsec { position: relative; color: var(--tl) }
.hzsec__body { padding: clamp(56px, 7vw, 112px) var(--px) var(--sp) }
.hzsec__in { display: grid; gap: clamp(56px, 7vw, 104px) }
.hzsec .shead { gap: 28px 64px }
.hzsec__head { max-width: 1000px }
.tcard { display: grid; align-content: start; gap: 14px; padding-top: 26px; border-top: 1px solid var(--line-l) }
.tcard__name { font-family: var(--f-disp), sans-serif; font-weight: var(--wd3); font-size: calc(var(--k3) * clamp(26px, 2.6vw, 40px)); line-height: 1.08; letter-spacing: var(--ls3) }
.tcard__t { font-size: 16px; line-height: 1.55; color: var(--tlm) }

/* Horizon: a sun setting or rising into the sea, driven by scroll */
.hz { position: relative; height: clamp(300px, 46vh, 520px); overflow: hidden }
.hz--sm { height: clamp(260px, 40vh, 460px) }
.hz__sky { position: absolute; left: 0; right: 0; top: 0; height: 62%; overflow: hidden; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--hz-sky) 100%) }
.hz__orb {
  position: absolute; left: 50%; bottom: 0; width: clamp(130px, 15vw, 230px); aspect-ratio: 1; border-radius: 50%;
  background: var(--orb); box-shadow: var(--orb-sh); will-change: transform;
}
.hz--sm .hz__orb { width: clamp(120px, 13vw, 200px) }
.hz__haze { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, rgba(0,0,0,0), var(--hz-haze)) }
.hz__sea { position: absolute; left: 0; right: 0; top: 62%; bottom: 0; background: linear-gradient(180deg, var(--hz-sea) 0%, rgba(0,0,0,0) 100%) }
.hz__rp { position: absolute; left: 50%; border-radius: 2px; background: linear-gradient(90deg, rgba(0,0,0,0), var(--orb-ref), rgba(0,0,0,0)) }
.hz__line { position: absolute; left: 0; right: 0; top: 62%; height: 1px; background: linear-gradient(90deg, rgba(0,0,0,0), var(--hz-line), rgba(0,0,0,0)) }

/* ---------- CTA ---------- */
.cta { position: relative; overflow: hidden; padding: clamp(110px, 13vw, 210px) var(--px); color: var(--tl) }
.cta__glow {
  position: absolute; right: -14vw; bottom: -30vw; width: 64vw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244,203,92,.24), rgba(244,203,92,0) 70%); pointer-events: none;
}
.cta__in { position: relative; display: grid; gap: clamp(40px, 4.5vw, 64px) }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 56px }

/* ---------- about ---------- */
.ctx { position: relative; padding: var(--sp) var(--px); color: var(--tl) }
.ctx__in { display: grid; gap: clamp(64px, 8vw, 120px) }
.ctx__top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px clamp(48px, 7vw, 140px) }
.ctx__side { flex: 1 1 340px; max-width: 560px }
.ctx__list { flex: 1.3 1 440px; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line-l) }
.ctx__list li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 24px 0;
  border-top: 1px solid var(--line-l); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4;
}
.map { position: relative; width: 100%; aspect-ratio: 360 / 136 }
.map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.map__lbl {
  position: absolute; font-family: var(--f-lab), sans-serif; font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 0 10px var(--lbl-sh), 0 0 3px var(--lbl-sh); color: var(--tlm);
}
.map__lbl--l { transform: translate(calc(-100% - 14px), -50%) }
.map__lbl--r { transform: translate(14px, -50%) }
.map__city { display: none }
@media (min-width: 1000px) { .map__city { display: block } }
.map__hq { left: 50.65%; top: 22.16%; transform: translate(18px, -50%); display: flex; gap: 8px; font-weight: 600; color: var(--acl) }

.road { position: relative; padding: clamp(48px, 6vw, 96px) var(--px) var(--sp); color: var(--tl) }
.road__in { display: grid; gap: clamp(40px, 5vw, 72px) }
.road__year { font-family: var(--f-disp), sans-serif; font-size: clamp(56px, 9vw, 150px); font-weight: 500; line-height: .8; letter-spacing: -.04em; color: var(--acl); font-variant-numeric: tabular-nums }
.arc { position: relative; width: 100%; aspect-ratio: 1000 / 380; color: var(--tl) }
.arc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.arc__mk { stroke: var(--arc-c); fill: var(--mk) }
.arc__mk.is-lit { fill: var(--arc-c) }
.arc__y { position: absolute; font-family: var(--f-lab), sans-serif; font-size: clamp(11px, 1.2vw, 14px); font-weight: 600; letter-spacing: .1em; color: var(--acl) }
.phase { display: grid; align-content: start; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line-l); transition: opacity .5s ease }
.phase.is-dim { opacity: .36 }
.phase__y { font-family: var(--f-lab), sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--acl) }
.phase__h { margin: 0; font-family: var(--f-disp), sans-serif; font-weight: var(--wd3); font-size: calc(var(--k3) * clamp(22px, 2vw, 30px)); line-height: 1.15; letter-spacing: var(--ls3) }
.phase__t { margin: 0; font-size: 16px; line-height: var(--lhb); color: var(--tlm) }

/* ---------- worlds ---------- */
.wnav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-family: var(--f-lab), sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase }
.wnav a { display: flex; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid currentColor }
.wsec { position: relative; padding: clamp(60px, 7vw, 110px) var(--px); color: var(--tl) }
.wsec--first { padding-top: var(--sp) }
.wsec--last { padding-bottom: var(--sp) }
.wsec__in { display: flex; flex-wrap: wrap; align-items: center; gap: 56px clamp(48px, 7vw, 128px) }
.wsec--rev .wsec__in { flex-direction: row-reverse }
.wfig { flex: 1 1 420px; max-width: 600px; margin: 0 auto; display: grid; justify-items: center; gap: 26px }
.wfig__box { position: relative; width: 100%; aspect-ratio: 1 }
.wfig__ring { position: absolute; inset: -3.5%; border-radius: 50%; border: 1px solid var(--ring) }
.wfig__frame { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--frame); box-shadow: var(--frame-sh) }
.wfig__frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.wtxt { flex: 1 1 340px; max-width: 520px; display: grid; gap: 22px }
.wtxt__n { font-family: var(--f-lab), sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--acl) }
.wtxt__lede {
  margin: 0; font-family: var(--f-disp), sans-serif; font-weight: var(--wd3); font-size: calc(var(--k3) * clamp(21px, 1.8vw, 27px));
  line-height: 1.28; letter-spacing: var(--ls3); color: var(--acl); text-wrap: balance;
}
.wtxt__t { margin: 0; font-size: clamp(16px, 1.2vw, 18px); line-height: var(--lhb); color: var(--tlm); text-wrap: pretty }
.fmts { margin: 6px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line-l) }
.fmts li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line-l); font-size: 15.5px }
.fmts li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #F4CB5C; box-shadow: 0 0 0 3px rgba(244,203,92,.22) }
.fmts--games li::before { border-radius: 0 }
.fmts--digital li::before { width: 7px; height: 7px; background: none; box-shadow: none; border: 1.5px solid #F4CB5C }
.collab { position: relative; padding: clamp(48px, 6vw, 96px) var(--px) var(--sp); color: var(--tl) }
.collab__in { display: grid; gap: clamp(56px, 7vw, 104px) }
.collab__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 48px clamp(32px, 4vw, 64px) }
.ccard { display: grid; align-content: start; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line-l) }
.ccard h3 { margin: 0; font-family: var(--f-disp), sans-serif; font-weight: var(--wd3); font-size: calc(var(--k3) * clamp(24px, 2.2vw, 32px)); line-height: 1.15; letter-spacing: var(--ls3); text-wrap: balance }
.ccard p { margin: 0; font-size: 16.5px; line-height: var(--lhb); color: var(--tlm); text-wrap: pretty }

/* ---------- contact ---------- */
.contact {
  position: relative; padding: clamp(140px, 17vh, 190px) var(--px) var(--sp); color: var(--tl);
  background: linear-gradient(180deg, var(--sky1) 0px, rgba(0,0,0,0) 560px);
}
.contact__in { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 64px clamp(48px, 6vw, 112px) }
.contact__side { flex: 1 1 360px; max-width: 560px; display: grid; gap: 32px }
.contact__sub { margin: 0; max-width: calc(40ch * var(--mwk)); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--tlm); text-wrap: pretty }
.contact__meta { display: grid; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line-l) }
.contact__social { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px }
.mini-l { font-family: var(--f-lab), sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tlm) }
.contact__mail { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tlm) }
.contact__mail a { color: var(--tl); border-bottom: 1px solid var(--line-2) }
.socials { display: flex; gap: 8px }
.soc {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--tl);
  transition: background .3s, color .3s, border-color .3s;
}
.socials--lg { gap: 10px }
.socials--lg .soc { width: 46px; height: 46px }
@media (hover: hover) { .soc:hover { background: #F4CB5C; color: #242424; border-color: #F4CB5C } }

.fcard {
  position: relative; flex: 1.2 1 460px; max-width: 780px; margin: 0; padding: clamp(26px, 3.4vw, 52px); border-radius: 10px;
  background: var(--card); border: 1px solid var(--line-l); box-shadow: 0 60px 120px -70px rgba(36,36,36,.45);
}
.fcard__in, .fcard__body { display: grid; gap: 32px }
.fsteps { display: grid; gap: 14px }
.fsteps__row { display: flex; justify-content: space-between; gap: 12px; font-family: var(--f-lab), sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase }
.fsteps__s { display: flex; gap: 10px; opacity: .42; transition: opacity .3s ease }
.fsteps__s.is-on { opacity: 1 }
.fsteps__bar { position: relative; height: 2px; background: var(--line-l); overflow: hidden }
.fsteps__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, #A6001E, #F4CB5C);
  transform-origin: 0 50%; transition: transform .6s cubic-bezier(.2,.7,.1,1);
}
.fpanel { display: grid; gap: 30px }
.fpanel--msg { gap: 24px }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 26px 28px }
.fld { display: grid; gap: 4px }
.fld--full { grid-column: 1 / -1 }
.fld--msg { gap: 6px }
.fld__l { font-family: var(--f-lab), sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tlm) }
.fld__l--row { display: flex; justify-content: space-between; gap: 12px }
.fld__opt { text-transform: none; letter-spacing: 0; font-weight: 400 }
.fld__count { font-variant-numeric: tabular-nums; font-weight: 500 }
.fld__i {
  width: 100%; padding: 12px 0; background: transparent; border: 0; border-bottom: 1px solid var(--field); border-radius: 0;
  color: var(--tl); font-size: 17px; outline: none; transition: border-color .2s;
}
.fld__ta { resize: vertical; min-height: 200px; line-height: 1.55; font-family: inherit; border: 1px solid var(--field); border-radius: 6px; padding: 14px 16px }
.fld__i:focus { border-color: var(--tl) }
.fld__i.is-err { border-color: var(--err) }
.fld__sel { appearance: none; -webkit-appearance: none; cursor: pointer }
.fld__sel.is-empty { color: var(--tlm) }
.fld__sel option { color: #242424; background: #FBF8F1 }
.sel { position: relative; display: block }
.sel__arrow { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--acl) }
.fld__e { font-size: 13px; color: var(--err) }
.fld__e--consent { padding-left: 30px }
.chips-blk { display: grid; gap: 12px }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 17px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--chip); color: var(--tl); font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.chip[aria-pressed="true"] { border-color: #F4CB5C; background: #F4CB5C; color: #242424 }
.consent-blk { display: grid; gap: 6px }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--tlm); cursor: pointer }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #A6001E; flex: none }
.consent a { color: var(--tl); border-bottom: 1px solid var(--line-2) }
.factions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px }
.btn-ghost { display: inline-block; padding: 15px 22px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--tl); font-size: 14.5px; font-weight: 500; line-height: normal; cursor: pointer }
.btn-ghost--again { padding: 14px 22px }
.btn-go {
  display: inline-flex; align-items: center; gap: 14px; padding: 8px 8px 8px 26px; border-radius: 999px; border: 0; background: #F4CB5C; color: #242424;
  font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 14px 40px -16px rgba(200,140,20,.85); transition: transform .3s, box-shadow .3s;
}
.btn-go[disabled] { cursor: progress }
.btn-go__arrow { width: 40px; height: 40px; border-radius: 50%; background: #A6001E; color: #FFFFFF; display: grid; place-items: center }
@media (hover: hover) {
  .btn-ghost:hover { border-color: var(--tl) }
  .btn-ghost--again:hover { border-color: #F4CB5C }
  .btn-go:not([disabled]):hover { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(244,203,92,.25), 0 18px 46px -16px rgba(200,140,20,.95) }
}
.ffail { display: grid; gap: 14px; justify-items: start; padding: 18px 20px; border-radius: 8px; border: 1px solid var(--err); font-size: 14.5px; line-height: 1.5 }
.ffail p { margin: 0 }
.sent { display: grid; gap: 22px; justify-items: start; padding: 16px 0 }
.sent h2:focus { outline: none }
.emb--lg { width: 84px; height: 84px }
.sent__t { margin: 0; font-size: 18px; line-height: 1.55; color: var(--tlm) }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden }

.clocks { position: relative; padding: clamp(40px, 5vw, 80px) var(--px) clamp(80px, 9vw, 140px); color: var(--tl) }
.clocks__in { display: grid; gap: clamp(40px, 5vw, 64px) }
.clocks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 48px 28px }
.clock { display: grid; justify-items: start; gap: 18px; padding-top: 24px; border-top: 1px solid var(--line-l) }
.clock canvas { width: 88px; height: 88px; display: block }
.clock__txt { display: grid; gap: 6px }
.clock__city { font-family: var(--f-lab), sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tlm) }
.clock__time { font-family: var(--f-disp), sans-serif; font-weight: 400; font-size: clamp(34px, 3.4vw, 50px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.clock__off { font-family: var(--f-lab), sans-serif; font-size: 11.5px; letter-spacing: .08em; color: var(--tlm); font-variant-numeric: tabular-nums }

/* ---------- legal ---------- */
.legal {
  position: relative; padding: clamp(140px, 17vh, 190px) var(--px) var(--sp); color: var(--tl);
  background: linear-gradient(180deg, var(--sky1) 0px, rgba(0,0,0,0) 520px);
}
.legal__in { max-width: 880px; margin: 0 auto; display: grid; gap: clamp(64px, 7vw, 104px) }
.legal__head { display: grid; gap: 26px }
.legal__upd { font-family: var(--f-lab), sans-serif; font-size: 12px; letter-spacing: .06em; color: var(--tlm) }
.legal__blk { display: grid; gap: 28px }
.h2s { margin: 0; font-family: var(--f-disp), sans-serif; font-weight: var(--wd3); font-size: calc(var(--k3) * clamp(28px, 2.6vw, 40px)); line-height: 1.1; letter-spacing: var(--ls3) }
.legal__intro { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--tlm); text-wrap: pretty }
.kv { margin: 0; display: grid; border-bottom: 1px solid var(--line-l) }
.kv__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 6px 32px; padding: 18px 0; border-top: 1px solid var(--line-l) }
.kv__row--p { padding: 20px 0 }
.kv__k { margin: 0; font-family: var(--f-lab), sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tlm); padding-top: 3px }
.kv__v { margin: 0; font-size: 16.5px; line-height: 1.5 }
.kv__p { margin: 0; font-size: 16px; line-height: 1.65; text-wrap: pretty }
.legal__ip { display: grid; gap: 10px; padding-top: 8px }
.legal__ip h3 { margin: 0; font-size: 18px; font-weight: 600 }
.legal__ip p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--tlm); text-wrap: pretty }

/* ---------- footer ---------- */
.ft { position: relative; overflow: hidden; padding: clamp(64px, 7vw, 110px) var(--px) clamp(24px, 3vw, 36px); color: var(--tl) }
.ft__in { display: grid; gap: clamp(56px, 7vw, 104px) }
.ft__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 64px }
.ft__nav, .ft__follow { display: grid; gap: 16px }
.ft__follow { justify-items: start }
.ft__label { font-family: var(--f-lab), sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--acl) }
.ft__links { display: flex; flex-wrap: wrap; gap: 10px 32px; font-size: 16px; font-weight: 500 }
.ft__word { position: relative; width: 100%; aspect-ratio: 732 / 188 }
.ft__word img, .intro__word img { position: absolute; display: block }
.ft__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px; padding-top: 22px;
  border-top: 1px solid var(--line-l); font-family: var(--f-lab), sans-serif; font-size: 12.5px; letter-spacing: .02em; color: var(--tlm);
}
.ft__legal { display: flex; flex-wrap: wrap; gap: 22px }
@media (hover: hover) {
  .ft__links a:hover { color: var(--acl) }
  .ft__legal a:hover { color: var(--tl) }
}

/* ---------- overlays ---------- */
.snap { position: fixed; inset: 0; z-index: 94; overflow: hidden; pointer-events: none }
.snap__in { position: absolute; left: 0; top: 0; width: 100%; min-height: 0; transition: none }
.flash { position: fixed; inset: 0; z-index: 300; visibility: hidden; pointer-events: none; opacity: 0 }
.flash canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.grain {
  position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E");
}
.intro { position: fixed; inset: 0; z-index: 400; background: #141416; display: none; place-items: center; cursor: pointer }
.intro-on .intro { display: grid }
.intro__in { display: grid; justify-items: center; gap: clamp(20px, 3.2vh, 36px) }
.intro__emb { width: calc(min(46vw, 400px) * .574); aspect-ratio: 1; display: block; opacity: 0 }
.intro__word { position: relative; width: min(46vw, 400px); aspect-ratio: 732 / 188 }
.intro__word img { opacity: 0 }
.intro__studio { font-family: Arial, Arimo, 'Helvetica Neue', Helvetica, sans-serif; font-size: calc(min(46vw, 400px) * .075); line-height: 1; letter-spacing: .03em; color: #A6001E; opacity: 0 }
.intro__skip {
  position: absolute; right: clamp(20px, 4vw, 48px); bottom: clamp(20px, 4vh, 40px); padding: 8px; border: 0; background: none; cursor: pointer;
  font-family: var(--f-lab), sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8E8A84;
}
.noscript { max-width: 720px; margin: 0 auto; padding: 140px 24px 80px; font-size: 18px; line-height: 1.6 }

@media (prefers-reduced-motion: reduce) {
  .menu { animation: none }
}