/* Mockup N: Nike visual language (awesome-design/nike) on the site's dark palette.
   Photography first, one raised surface, pill CTAs, flat cards.
   Only colour outside the footage: Korea rose / Japan haze, always as a pair.
   Graphic device: the triangle from the logo's colon. */
:root{
  --ink:#f1eff8;--canvas:#0c0a1c;--cloud:#15122a;
  --charcoal:#cfcbe0;--mute:#9a96b4;--hair:rgba(189,182,242,.22);--hair-soft:rgba(189,182,242,.12);
  --kr:#ff8fb1;--jp:#bdb6f2;
  --display:"Archivo",sans-serif;
  --text:"Archivo","Noto Sans JP",system-ui,sans-serif;
  --g:clamp(16px,3.5vw,48px);--max:1440px;--sec:56px;--bar:60px;
  --beat:.484s; /* one beat at 124 BPM */
}
html{color-scheme:dark;scrollbar-color:var(--cloud) var(--canvas)}
::selection{background:#3d3bff;color:var(--ink)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--canvas);color:var(--ink);font:400 16px/1.6 var(--text);-webkit-font-smoothing:antialiased;caret-color:var(--jp)}
html:lang(ja){line-break:strict;word-break:auto-phrase}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--g)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--ink);color:var(--canvas)}
.skip:focus{left:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}
.logo{display:block;background:currentColor;-webkit-mask:url(../img/logo.svg) center/contain no-repeat;mask:url(../img/logo.svg) center/contain no-repeat;aspect-ratio:1470/370}
.tri{display:inline-block;flex:none;width:12px;height:7px;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%)}
.kr{color:var(--kr)}.jp{color:var(--jp)}

.display{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.9}
.h-xl{font-weight:500;font-size:clamp(24px,2.4vw,32px);line-height:1.25}
.cap{font-weight:500;font-size:14px;color:var(--mute)}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 32px;border-radius:30px;font:500 16px/1 var(--text);white-space:nowrap;transition:opacity .15s}
.pill:hover{opacity:.75}
.pill:active{transform:scale(.97)}
.pill--ink{background:var(--ink);color:var(--canvas)}
.pill--line{border:1px solid rgba(189,182,242,.6);color:var(--ink)}
.pill--line:hover{opacity:1;border-color:var(--ink)}
.pill--sm{min-height:44px;padding:0 22px;font-size:15px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:9999px;border:1px solid var(--hair);font-weight:500;font-size:14px}
.tlink{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hair)}
.tlink:hover{text-decoration-color:currentColor}

/* header */
.nav-bar{position:sticky;top:0;z-index:20;background:rgba(12,10,28,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 -1px 0 var(--hair-soft)}
.nav-bar .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:var(--bar)}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand .logo{width:88px}
.nav{display:flex;gap:4px;font-weight:500;font-size:15px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-bottom:2px solid transparent}
.nav a:hover,.nav a:focus-visible{border-color:var(--ink)}
.hd-right{justify-self:end;display:flex;align-items:center;gap:8px}
.hd-lang{display:inline-flex;min-height:44px;align-items:center;padding:0 8px;font-weight:500;font-size:14px}

/* hero: the logo is the motion graphic */
.hero{position:relative;height:min(78vh,760px);min-height:540px;overflow:hidden;background:radial-gradient(120% 80% at 70% 110%,#1d1840 0%,var(--canvas) 60%)}
.beams{position:absolute;inset:0;pointer-events:none}
.beams i{position:absolute;bottom:-6%;width:46vmax;height:130%;transform-origin:50% 100%;filter:blur(28px);mix-blend-mode:screen;clip-path:polygon(47% 100%,53% 100%,100% 0,0 0)}
.beams .b1{left:48%;background:linear-gradient(to top,rgba(255,143,177,.55),rgba(255,143,177,0) 75%);transform:rotate(-24deg)}
.beams .b2{left:62%;background:linear-gradient(to top,rgba(189,182,242,.55),rgba(189,182,242,0) 75%);transform:rotate(22deg)}
.beams .b3{left:55%;background:linear-gradient(to top,rgba(61,59,255,.5),rgba(61,59,255,0) 70%);transform:rotate(2deg);width:30vmax}
.hero-copy{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:0 var(--g) clamp(32px,5vw,56px);max-width:var(--max);margin:0 auto}
.hero-logo{position:relative;font-size:clamp(48px,8vw,96px);line-height:1;width:clamp(300px,62vw,1000px);color:var(--ink)}
.hero-logo svg{display:block;width:100%;height:auto;overflow:visible}
.lg-word{fill:currentColor}
.lg-tri{fill:var(--kr);transform-box:fill-box;transform-origin:50% 50%}
.glint{position:absolute;inset:0;pointer-events:none;opacity:0;
  -webkit-mask:url(../img/logo.svg) 0 0/100% 100% no-repeat;mask:url(../img/logo.svg) 0 0/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 38%,var(--kr) 46%,#fff 50%,var(--jp) 54%,transparent 62%) 160% 0/300% 100% no-repeat}
.tagline{display:flex;flex-wrap:wrap;align-items:center;column-gap:.2em;margin-top:clamp(18px,2.4vw,28px);font-size:clamp(30px,4.2vw,56px)}
.swap{display:inline-grid;gap:.09em;width:.42em}
.swap i{display:block;height:.2em;clip-path:polygon(0 0,100% 50%,0 100%)}
.swap i:last-child{clip-path:polygon(100% 0,0 50%,100% 100%)}
.hero p{max-width:34em;margin:16px 0 24px;color:var(--charcoal)}
.hero .row{display:flex;flex-wrap:wrap;gap:12px}
/* play / stop for every looping motion on the page (WCAG 2.2.2) */
.motion-btn{position:absolute;z-index:2;right:var(--g);bottom:clamp(32px,5vw,56px);display:none;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 14px;border-radius:30px;border:1px solid rgba(189,182,242,.6);background:rgba(12,10,28,.6);font-size:14px;font-weight:500}
.motion-btn:hover{border-color:var(--ink)}
.motion-btn svg{width:12px;height:12px;fill:currentColor}
.motion-btn .i-play,.motion-off .motion-btn .i-stop{display:none}
.motion-off .motion-btn .i-play{display:block}
.motion-off .hero *,.motion-off .hero *::before,.motion-off .hero *::after{animation-play-state:paused!important}
/* stopped = a clean still frame: colon at rest, no light caught mid-sweep */
.motion-off .lg-tri,.motion-off .glint{animation:none!important}
.tile .motion-btn{top:auto;bottom:16px;right:16px}
.hero .motion-btn{width:44px;padding:0;justify-content:center}
.hero .motion-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* proof strip: the four credits a booker checks first */
.proof{border-bottom:1px solid var(--hair-soft)}
.proof ul{display:grid;grid-template-columns:repeat(4,1fr)}
.proof li{display:grid;gap:4px;padding:24px 24px 24px 0}
.proof li+li{padding-left:24px;border-left:1px solid var(--hair-soft)}
.proof .yr{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--mute)}
.proof strong{font-weight:500;font-size:17px;line-height:1.35}

section{padding-top:calc(var(--sec)*1.5);scroll-margin-top:var(--bar)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px}
.sec-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;font-size:clamp(40px,5vw,64px);line-height:.9}
.sec-title .en{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.9}
.sec-title .ja{font-size:18px;font-weight:500;color:var(--charcoal)}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.about figure{background:var(--cloud);aspect-ratio:1}
.about figure img{width:100%;height:100%;object-fit:cover}
.about-copy{background:var(--cloud);padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.about-copy p{margin-top:16px;color:var(--charcoal);line-height:1.85;max-width:38em}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* career: grouped, marked by country, no rule under every row */
.legend{display:flex;gap:16px;font-size:14px;font-weight:500}
.legend span{display:inline-flex;align-items:center;gap:6px}
.career{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.career h3{font-size:18px;font-weight:500;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--hair)}
.career li{display:grid;grid-template-columns:12px 84px 1fr;align-items:baseline;gap:14px;padding:10px 0}
.career li.noyr{grid-template-columns:12px 1fr}
.career li .tri{align-self:center}
.career .yr{color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.career .ev{display:flex;justify-content:space-between;gap:16px;font-weight:500}
.career .pl{flex:none;font-size:14px;font-weight:400}
.career .block+.block{margin-top:40px}
.more-btn{display:none}

/* mixes: the K-POP x House mix leads; the rest stay compact */
.mixes{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px}
.feature{display:grid;gap:16px}
.feature .card-img{aspect-ratio:16/9}
.feature .t{font-size:clamp(20px,2vw,26px);line-height:1.3}
.feature .play{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font-weight:500}
.feature .play::before{content:"";width:14px;height:14px;background:var(--kr);clip-path:polygon(0 0,100% 50%,0 100%)}
.mix-list{display:grid;gap:20px;align-content:space-between}
.card .play{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500}
.card .play::before,.feature .play::before{content:"";width:12px;height:12px;background:var(--kr);clip-path:polygon(0 0,100% 50%,0 100%)}
.mix-list .tlink{justify-self:start}
.card{display:grid;grid-template-columns:160px 1fr;gap:20px;align-items:center}
.card-img{background:var(--cloud);aspect-ratio:1;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.card:hover .card-img img,.feature:hover .card-img img{transform:scale(1.04)}
.card-meta{display:grid;gap:4px}
.card-meta .tag{font-size:14px;font-weight:500;color:var(--mute)}
.card-meta .t{font-weight:500;line-height:1.4}
.card-meta .m{color:var(--mute);font-variant-numeric:tabular-nums}

/* videos: one editorial tile, then a 2-up; details sit under the image */
.tile{position:relative;display:block;overflow:hidden;color:var(--ink);background:var(--cloud)}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(12,10,28,0) 40%,rgba(12,10,28,.72))}
.tile-copy{position:absolute;z-index:1;left:0;bottom:0;padding:clamp(20px,3vw,40px)}
.tile-copy .display{font-size:clamp(48px,8vw,96px);margin-bottom:20px}
.tile-copy .h-xl{margin-bottom:16px}
.tile .pill{min-height:40px;padding:0 22px;font-size:15px}
.tile--wide{aspect-ratio:16/7}
.tile--tall{aspect-ratio:4/5}
.vcap{padding-top:10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.ig-link{display:none}

/* booking */
.booking{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}
.booking .tile{min-height:520px}
.booking .tile::after{display:none}
.book-copy{background:var(--cloud);padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:24px}
.book-copy>p{color:var(--charcoal);line-height:1.85}
.book-copy .row{display:flex;flex-wrap:wrap;gap:12px}
.addr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.addr a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:clamp(18px,2vw,22px);word-break:break-all;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--hair)}
.copy-btn{min-height:44px;padding:0 4px;font-size:15px;font-weight:500;color:var(--jp);text-decoration:underline;text-underline-offset:4px}
.copy-btn[data-state="done"]{color:var(--ink);text-decoration:none}
.copy-status{font-size:14px;color:var(--charcoal);margin-top:-16px}
.copy-status:empty{display:none}
.book-copy h3{font-size:14px;font-weight:500;color:var(--mute);margin-bottom:8px}
.asks{display:grid;gap:2px}
.asks li{display:flex;align-items:baseline;gap:12px;padding:6px 0}
.asks .tri{color:var(--mute);transform:translateY(-2px)}
.book-notes{display:grid;gap:4px;font-size:15px;color:var(--charcoal)}
.book-notes a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hair)}
/* LINE / Instagram in-app browsers: mailto often does nothing, so the address and copy come first */
.inapp>p:first-child{order:-2}
.inapp .addr,.inapp .copy-status,.inapp .tpl{order:-1}
.tpl{width:100%;min-height:9.5em;padding:12px;border:1px solid var(--hair);border-radius:12px;background:var(--canvas);color:var(--ink);font:15px/1.6 var(--text);resize:none}
.inapp .row .pill--ink{background:none;border:1px solid rgba(189,182,242,.6);color:var(--ink)}
.inapp .copy-btn{min-height:44px;padding:0 20px;border-radius:30px;background:var(--ink);color:var(--canvas);text-decoration:none}

footer{margin-top:calc(var(--sec)*1.5);border-top:1px solid var(--hair)}
.foot{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:40px 0 24px}
.foot h3{font-size:16px;font-weight:500;margin-bottom:4px}
.foot a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:500;color:var(--mute)}
.foot a:hover{color:var(--ink)}
.fine{display:flex;justify-content:space-between;gap:16px;padding:16px 0 32px;border-top:1px solid var(--hair-soft);font-size:13px;color:var(--mute)}

/* the one authored moment: the logo draws itself, the colon drops in and keeps the beat,
   a stage light sweeps across, the two scenes meet. Stop/play button above; static under reduced motion. */
@media (prefers-reduced-motion:no-preference){
  .motion-btn{display:inline-flex}
  .motion-off .lg-word,.motion-off .tagline *{animation-duration:0s!important;animation-delay:0s!important}
  .lg-word{stroke:currentColor;stroke-width:3;stroke-dasharray:1;
    animation:draw 1.9s cubic-bezier(.65,0,.35,1) both,fillin .7s 1.5s ease-out both}
  .lg-tri{animation:drop .8s 1.7s cubic-bezier(.16,1,.3,1) both,beat var(--beat) 2.5s ease-out infinite}
  .glint{animation:sweep 7s 2.2s cubic-bezier(.45,0,.2,1) infinite}
  .beams i{animation:sway 9s ease-in-out infinite alternate}
  .beams .b2{animation-duration:11s;animation-direction:alternate-reverse}
  .beams .b3{animation-duration:13s}
  .tagline .w1{animation:in-l .9s 2.1s cubic-bezier(.16,1,.3,1) both}
  .tagline .w2{animation:in-r .9s 2.1s cubic-bezier(.16,1,.3,1) both}
  .tagline .swap{animation:fade .6s 2.4s ease-out both}
}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes fillin{from{fill-opacity:0}to{fill-opacity:1;stroke-width:0}}
@keyframes drop{from{transform:translateY(-160%);opacity:0}}
@keyframes beat{0%{transform:scale(1.22)}55%,100%{transform:scale(1)}}
@keyframes sweep{0%{opacity:1;background-position:160% 0}22%{opacity:1;background-position:-60% 0}23%,100%{opacity:0;background-position:-60% 0}}
@keyframes sway{to{rotate:14deg}}
@keyframes in-l{from{transform:translateX(-.3em);opacity:0}}
@keyframes in-r{from{transform:translateX(.3em);opacity:0}}
@keyframes fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.pill:active{transform:none}.card-img img,.hd-right .pill{transition:none}}

@media (max-width:960px){
  :root{--sec:36px}
  .nav{gap:0}
  .nav a{padding:0 8px}
  .proof ul{grid-template-columns:1fr 1fr}
  .proof li:nth-child(3){padding-left:0;border-left:0}
  .proof li:nth-child(n+3){border-top:1px solid var(--hair-soft)}
  .about,.career,.booking,.mixes{grid-template-columns:1fr}
  .career>div+div{margin-top:40px}
  .tile--wide{aspect-ratio:4/5}
  .booking .tile{min-height:0;aspect-ratio:16/9}
}
@media (max-width:599px){
  :root{--sec:28px;--bar:104px}
  .nav-bar .wrap{grid-template-columns:1fr auto}
  .nav{grid-column:1/-1;order:3;justify-content:space-between;margin:0 -12px;border-top:1px solid var(--hair-soft)}
  /* header scrolls away (the floating pill covers booking); hero leaves room for the first proof row,
     also inside in-app browsers whose toolbars shorten the screen */
  .nav-bar{position:relative}
  section{scroll-margin-top:0}
  .hero{height:calc(100svh - var(--bar) - 104px);min-height:440px;max-height:640px}
  /* beams hang from the ceiling here, so they never pass behind the copy */
  .beams{-webkit-mask:linear-gradient(#000 35%,transparent 62%);mask:linear-gradient(#000 35%,transparent 62%)}
  .beams i{width:80vmax;bottom:auto;top:-8%;height:75%;transform-origin:50% 0;clip-path:polygon(0 100%,100% 100%,53% 0,47% 0)}
  .beams .b1{left:-10%;background:linear-gradient(to bottom,rgba(255,143,177,.6),rgba(255,143,177,0) 80%)}
  .beams .b2{left:25%;background:linear-gradient(to bottom,rgba(189,182,242,.6),rgba(189,182,242,0) 80%)}
  .beams .b3{left:10%;background:linear-gradient(to bottom,rgba(61,59,255,.55),rgba(61,59,255,0) 75%)}
  .hero-logo{width:100%}
  /* iPhone 16 / 16 Pro (393-402px): both CTAs share one row; pause button moves up out of their way */
  .hero .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero .row .pill{padding:0 10px;font-size:15px}
  .hero .motion-btn{top:16px;bottom:auto}
  .tile .motion-btn{display:none}
  /* icon-only on phones; the label stays for screen readers */
  .hero .motion-btn{width:44px;padding:0;justify-content:center}
  .hero .motion-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mixes .card{grid-template-columns:96px 1fr;gap:14px}
  .proof li,.proof li+li{padding:16px 12px 16px 0}
  .proof li:nth-child(even){padding-left:12px}
  .proof strong{font-size:15px}
  /* booking moves to the thumb zone, shown only between the hero and the booking section.
     backdrop-filter would make the bar the containing block of the fixed pill, so drop it here. */
  .nav-bar{background:var(--canvas);backdrop-filter:none;-webkit-backdrop-filter:none}
  .hd-right .pill{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;min-height:48px;padding:0 26px;font-size:16px;box-shadow:0 8px 24px rgba(12,10,28,.5);transition:opacity .2s,transform .2s}
  .hd-right .pill.away{opacity:0;transform:translateY(12px);pointer-events:none}
  .card{grid-template-columns:96px 1fr;gap:14px}
  .two,.foot{grid-template-columns:1fr}
  .tile--tall{aspect-ratio:1/1}
  .two>div+div{display:none}
  .ig-link{display:block}
  .career li{grid-template-columns:12px 80px 1fr;gap:10px}
  .career li.noyr{grid-template-columns:12px 1fr}
  .career .ev{display:block}
  .career .pl{margin-left:6px}
  /* top five on phones, the rest one tap away */
  .career:not(.all) li.x,.career:not(.all) .x-col{display:none}
  .more-btn{display:inline-flex;margin-top:16px}
  .booking .tile{aspect-ratio:16/7}
}