:root{
  --ink:#0B0B0D;
  --asphalt:#141417;
  --line:#2A2A30;
  --paper:#F1EEE6;
  --dim:#9B978C;
  --orange:#FF4D00;
  --display:'Anton','Noto Sans JP',sans-serif;
  --body:'Noto Sans JP',sans-serif;
  --util:'Archivo','Noto Sans JP',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.8;
  overflow-x:hidden;
}
/* grain */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:var(--util);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--orange);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--orange)}
h2.sec{
  font-family:var(--display);font-weight:400;
  font-size:clamp(44px,7vw,88px);line-height:.95;letter-spacing:.01em;
  text-transform:uppercase;margin:14px 0 8px;
}
.sec-sub{color:var(--dim);max-width:560px;font-size:14px}
section{padding:110px 0;border-top:1px solid var(--line)}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
  background:rgba(11,11,13,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:transform .28s ease,opacity .28s ease;
}
nav.is-hidden{transform:translateY(-100%);opacity:0}
.logo{font-family:var(--display);font-size:22px;letter-spacing:.06em}
.logo span{color:var(--orange)}
.nav-links{display:flex;gap:26px;font-family:var(--util);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.nav-links a{color:var(--dim);transition:color .2s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--paper)}
.lang-btn{
  font-family:var(--util);font-size:12px;letter-spacing:.14em;
  background:none;border:1px solid var(--line);color:var(--paper);
  padding:7px 14px;cursor:pointer;transition:.2s;
}
.lang-btn:hover{border-color:var(--orange);color:var(--orange)}
.lang-btn b{color:var(--orange);font-weight:700}
@media(max-width:860px){.nav-links{display:none}}

/* ---------- HERO ---------- */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:140px 0 0;position:relative;border-top:none;overflow:hidden;
  background:#050507 url("hero-after2am-poster.jpg") center/cover no-repeat;
}
.hero.video-ready{background-image:none}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(5,5,7,.46),rgba(5,5,7,.76)),
    radial-gradient(circle at 75% 25%,rgba(255,77,0,.12),transparent 35%);
}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:0;transition:opacity .35s ease;
}
.hero.video-ready .hero-bg{opacity:1}
.hero .wrap{position:relative;z-index:2;width:100%}
.sound-btn{
  position:absolute;right:32px;bottom:34px;z-index:3;
  font-family:var(--util);font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;background:rgba(11,11,13,.62);color:var(--paper);
  border:1px solid rgba(241,238,230,.34);padding:13px 18px;
  min-width:142px;text-align:center;
  cursor:pointer;backdrop-filter:blur(10px);transition:.2s;
}
.sound-btn:hover{border-color:var(--orange);color:var(--orange)}
.hero-kicker{margin-bottom:18px}
.hero-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(88px,21vw,290px);line-height:.82;letter-spacing:.005em;
  user-select:none;
}
.hero-title .ch{display:inline-block;transition:transform .35s cubic-bezier(.2,.9,.3,1.4)}
.hero-title .ch:nth-child(1){transform:translateY(-.035em) rotate(-2deg)}
.hero-title .ch:nth-child(2){transform:translateY(.04em) rotate(1.4deg);color:var(--orange)}
.hero-title .ch:nth-child(3){transform:translateY(-.02em) rotate(-1deg)}
.hero-title .ch:nth-child(4){transform:translateY(.055em) rotate(2.2deg)}
.hero-title:hover .ch{transform:none}
.hero-sub{
  display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-end;
  gap:18px;padding:26px 0 34px;border-top:2px solid var(--paper);margin-top:24px;
}
.hero-role{font-family:var(--util);font-weight:700;font-size:clamp(15px,2vw,21px);letter-spacing:.06em;text-transform:uppercase}
.hero-copy{color:var(--dim);font-size:14px;max-width:420px}
.hero-copy strong{color:var(--paper)}
@media(min-width:901px){
  .hero .wrap{margin-left:0;margin-right:0;padding-left:clamp(32px,8vw,120px);max-width:980px}
  .hero-title{font-size:clamp(112px,15vw,230px)}
}
@media(max-width:700px){
  .sound-btn{
    right:18px;top:auto;bottom:18px;width:auto;height:auto;min-width:0;
    padding:8px 10px;border-radius:999px;font-size:8px;letter-spacing:.14em;
    opacity:.72;background:rgba(11,11,13,.42);
    display:flex;align-items:center;justify-content:center;
  }
  .sound-btn:hover{opacity:1}
}

/* ---------- MARQUEE ---------- */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--orange);color:var(--ink);
  overflow:hidden;white-space:nowrap;transform:rotate(-1.2deg) scale(1.02);
}
.marquee-inner{
  display:inline-block;padding:12px 0;
  font-family:var(--display);font-size:22px;letter-spacing:.08em;text-transform:uppercase;
  animation:slide 22s linear infinite;
}
.marquee-inner span{margin:0 28px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee-inner{animation:none}
  html{scroll-behavior:auto}
  .hero-bg{display:none}
}

/* ---------- CASE STUDY ---------- */
.case{position:relative}
.case-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.case-name-jp{
  font-family:var(--body);font-weight:900;font-size:clamp(15px,2vw,20px);
  letter-spacing:.4em;color:var(--dim);margin-top:4px;
}
.cs-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);margin-top:54px;background:var(--asphalt);
}
.cs-stat{
  padding:38px 22px 32px;border-right:1px solid var(--line);position:relative;
  transition:background .25s;
}
.cs-stat:last-child{border-right:none}
.cs-stat:hover{background:#17171b}
.cs-n{
  font-family:var(--display);font-weight:400;line-height:1;
  font-size:clamp(40px,5vw,66px);color:var(--orange);
}
.cs-n small{font-size:.45em;letter-spacing:.04em}
.cs-l{
  font-family:var(--util);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--paper);margin-top:12px;font-weight:600;
}
.cs-s{color:var(--dim);font-size:12px;margin-top:2px}
.case-body{
  display:grid;grid-template-columns:1.2fr .8fr;gap:60px;margin-top:54px;align-items:start;
}
.case-txt p{margin-bottom:20px;font-size:15px}
.case-txt strong{color:var(--orange)}
.case-side-wrap{display:flex;flex-direction:column;gap:18px}
.case-side{border:1px solid var(--line);padding:26px 24px;background:var(--asphalt)}
.case-profile{
  display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:center;
  margin-bottom:26px;padding:18px;background:#101014;border:1px solid var(--line);
  transition:border-color .25s,transform .25s;
}
.case-profile:hover{border-color:var(--orange);transform:translateY(-2px)}
.case-avatar{
  width:88px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  border:2px solid var(--orange);background:#000;
}
.case-avatar img{width:100%;height:100%;object-fit:cover}
.case-profile-name{
  display:block;font-family:var(--display);font-size:28px;line-height:1;text-transform:uppercase;
}
.case-profile-role{display:block;color:var(--dim);font-size:12px;margin-top:8px}
.case-profile-link{
  display:block;margin-top:12px;font-family:var(--util);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange);
}
.case-side-h{
  font-family:var(--util);font-weight:700;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--dim);margin-bottom:16px;
}
.case-side ul{list-style:none}
.case-side li{
  padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px;
  display:flex;justify-content:space-between;gap:14px;
}
.case-side li:last-child{border-bottom:none}
.case-side li span:last-child{color:var(--dim);text-align:right}
.case-actions{display:flex;flex-direction:column;gap:12px;margin:0}
.case-actions .cta,.case-actions .cta2{text-align:center}
@media(max-width:1000px){.cs-stats{grid-template-columns:repeat(2,1fr)}.cs-stat:nth-child(2n){border-right:none}.cs-stat:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:860px){.case-body{grid-template-columns:1fr}}

/* ---------- MV / CHOREO PACKAGE ---------- */
.pkg-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:60px}
.pkg{
  border:1px solid var(--line);background:var(--asphalt);
  padding:32px 28px;position:relative;transition:border-color .25s,transform .25s;
  display:flex;flex-direction:column;gap:14px;
}
.pkg:hover{border-color:var(--paper);transform:translateY(-4px)}
.pkg-tag{font-family:var(--util);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.pkg-name{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,38px);text-transform:uppercase;line-height:1.02}
.pkg-desc{color:var(--dim);font-size:13.5px;line-height:1.85}
.pkg-desc strong{color:var(--paper)}
.pkg-full{
  grid-column:1/-1;border:1px solid var(--orange);
  background:linear-gradient(135deg,#1a1310,var(--asphalt) 55%);
  padding:40px 34px;
}
.pkg-full:hover{border-color:var(--orange)}
.pkg-full .pkg-tag{color:var(--orange)}
.pkg-full .pkg-name{font-size:clamp(30px,4.6vw,56px)}
.pkg-formula{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  font-family:var(--util);font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;margin-top:4px;
}
.pkg-formula span{border:1px solid var(--line);padding:7px 13px;color:var(--paper)}
.pkg-formula b{color:var(--orange);font-size:16px;font-weight:700}
.pkg-formula .pf-hot{border-color:var(--orange);color:var(--orange)}
.section-cta{
  margin-top:40px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  text-align:center;
}
.section-cta p{color:var(--dim);font-size:13px}
@media(max-width:760px){.pkg-grid{grid-template-columns:1fr}}

/* ---------- WORKS ---------- */
.works-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;margin-top:60px}
.works-subhead{margin-top:54px}
.works-subhead + .works-grid{margin-top:22px}
.works-section-label{
  font-family:var(--util);font-weight:700;font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--orange);
}
.works-section-copy{color:var(--dim);font-size:13px;margin-top:8px;max-width:560px}
.work{
  position:relative;border:1px solid var(--line);background:var(--asphalt);
  overflow:hidden;display:block;transition:border-color .25s,transform .25s;
}
.work:hover{border-color:var(--orange);transform:translateY(-4px)}
.work .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.work .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .4s}
.work:hover .thumb img{transform:scale(1.04)}
.work .thumb::after{
  content:"▶ PLAY";position:absolute;right:0;bottom:0;
  font-family:var(--util);font-size:11px;letter-spacing:.2em;
  background:var(--orange);color:var(--ink);padding:7px 14px;font-weight:700;
}
.work-meta{padding:18px 20px 22px}
.work-tag{font-family:var(--util);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--orange)}
.work-title{
  font-family:var(--display);font-weight:400;font-size:clamp(22px,2.6vw,32px);
  text-transform:uppercase;line-height:1.05;margin:8px 0 6px;
}
.work-desc{color:var(--dim);font-size:13px;line-height:1.7}
.w-big{grid-column:span 7}
.w-med{grid-column:span 5}
.w-third{grid-column:span 4}
.x-thumb{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#141417,#0B0B0D);
}
.x-thumb-label{
  font-family:var(--display);font-size:64px;color:transparent;
  -webkit-text-stroke:1.5px var(--orange);
}
@media(max-width:900px){.w-big,.w-med,.w-third{grid-column:span 12}}

/* X poster cards */
.x-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:26px}
.x-card{
  border:1px solid var(--line);background:var(--asphalt);
  padding:26px 22px 22px;display:flex;flex-direction:column;justify-content:space-between;
  min-height:220px;position:relative;transition:.25s;
}
.x-card:hover{border-color:var(--orange);transform:translateY(-4px);background:#17171b}
.x-card.with-thumb{padding:0;overflow:hidden}
.x-card-thumb{aspect-ratio:16/9;background:#000;overflow:hidden}
.x-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.x-card.with-thumb:hover .x-card-thumb img{transform:scale(1.04)}
.x-card-body{padding:18px 20px 22px}
.x-num{
  font-family:var(--display);font-size:64px;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px var(--line);transition:.25s;
}
.x-card:hover .x-num{-webkit-text-stroke:1.5px var(--orange)}
.x-card .work-title{font-size:20px;margin-top:14px}
.x-link{
  margin-top:18px;font-family:var(--util);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);display:flex;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:12px;
}
.x-card:hover .x-link{color:var(--orange)}
@media(max-width:1000px){.x-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.x-grid{grid-template-columns:1fr}}

/* ---------- CRED ---------- */
.cred-flex{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:60px}
.cred-h{
  font-family:var(--util);font-weight:700;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--dim);margin-bottom:22px;
  border-bottom:1px solid var(--line);padding-bottom:12px;
}
.badges{display:flex;flex-wrap:wrap;gap:12px}
.badge{
  font-family:var(--util);font-weight:600;font-size:13px;letter-spacing:.08em;
  border:1px solid var(--line);padding:10px 16px;color:var(--paper);
  transition:.2s;cursor:default;
}
.badge:hover{border-color:var(--orange);color:var(--orange)}
.award{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.award-y{font-family:var(--display);color:var(--orange);font-size:18px;min-width:58px}
.award-t{font-weight:700;font-size:15px}
.award-s{color:var(--dim);font-size:12.5px}
.partner-note{margin-top:22px;color:var(--dim);font-size:13px}
@media(max-width:860px){.cred-flex{grid-template-columns:1fr}}

/* ---------- SERVICES ---------- */
.svc-list{margin-top:50px;border-top:1px solid var(--line)}
.svc{
  display:grid;grid-template-columns:80px 1fr 1.2fr;gap:24px;align-items:baseline;
  padding:30px 0;border-bottom:1px solid var(--line);transition:.2s;
}
.svc:hover{padding-left:14px}
.svc:hover .svc-num{color:var(--orange);-webkit-text-stroke:0}
.svc-num{
  font-family:var(--display);font-size:34px;color:transparent;
  -webkit-text-stroke:1.2px var(--dim);transition:.2s;
}
.svc-name{font-family:var(--display);font-size:clamp(20px,2.4vw,28px);text-transform:uppercase;font-weight:400}
.svc-desc{color:var(--dim);font-size:13.5px}
@media(max-width:760px){.svc{grid-template-columns:60px 1fr}.svc-desc{grid-column:2}}

/* ---------- ABOUT ---------- */
.about-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);
  gap:64px;margin-top:60px;align-items:start;
}
.about-txt{max-width:720px}
.about-txt p{margin-bottom:22px;font-size:15px}
.about-txt strong{color:var(--orange)}
.about-lead{
  color:var(--paper);font-size:clamp(18px,2.1vw,24px)!important;
  line-height:1.7;font-weight:700;
}
.about-scope{
  position:relative;border:1px solid var(--line);background:var(--asphalt);
  padding:28px 26px;overflow:hidden;
}
.about-scope::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);
}
.about-scope-k{
  font-family:var(--util);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--orange);margin-bottom:22px;
}
.about-scope ul{list-style:none}
.about-scope li{
  display:grid;grid-template-columns:42px 1fr;gap:16px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.about-scope li:first-child{padding-top:0}
.about-scope li span{
  font-family:var(--display);font-size:22px;color:transparent;
  -webkit-text-stroke:1px var(--dim);
}
.about-scope li b{
  font-family:var(--util);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper);
}
.about-scope-note{color:var(--dim);font-size:12.5px;line-height:1.9;margin-top:22px}
.biz{
  margin-top:26px;border:1px dashed var(--line);padding:20px 22px;
  font-size:12.5px;color:var(--dim);line-height:2;
}
.biz b{color:var(--paper);font-family:var(--util);letter-spacing:.1em}
@media(max-width:860px){
  .about-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:560px){.about-scope{padding:24px 20px}.about-scope li{grid-template-columns:34px 1fr;gap:12px}}

/* ---------- CONTACT ---------- */
.contact{position:relative}
.contact-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(56px,11vw,150px);line-height:.9;margin:18px 0 36px;
}
.contact-title em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--paper)}
.contact-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.cta{
  display:inline-block;font-family:var(--util);font-weight:700;font-size:15px;
  letter-spacing:.12em;text-transform:uppercase;
  background:var(--orange);color:var(--ink);padding:20px 44px;
  transition:.2s;border:1px solid var(--orange);
}
.cta:hover{background:transparent;color:var(--orange)}
.cta2{
  display:inline-block;font-family:var(--util);font-weight:700;font-size:15px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--paper);
  padding:20px 44px;border:1px solid var(--line);transition:.2s;
}
.cta2:hover{border-color:var(--paper)}
.cta.sm,.cta2.sm{padding:15px 30px;font-size:13px}
.contact-note{margin-top:26px;color:var(--dim);font-size:13px}
@media(max-width:560px){.contact-actions{align-items:stretch;flex-direction:column}.contact-actions a{text-align:center;width:100%}}

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--line);padding:30px 0;color:var(--dim);
  font-family:var(--util);font-size:11px;letter-spacing:.14em;
}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}