/* UVX Productions — the business site (productions.theuvx.com).
   Same brand colours and fonts as the club site, but a calm "dark theatre" look:
   no dust, torch cursor, glitch or blacklight switch; big stage photos, quiet type, lots of space. */
:root {
  --void: #08080E; --void-2: #0E0B16; --white: #F0F0FF; --violet: #B000E0; --cyan: #00FFFF; --pink: #FF66FF; --lime: #AAFF00;
  --dim: rgba(240,240,255,.62); --faint: rgba(240,240,255,.14); --line: rgba(240,240,255,.1); --edge: rgba(240,240,255,.28);
  --f-display: "Montserrat", system-ui, sans-serif; --f-mono: "Space Mono", "Zen Kaku Gothic New", ui-monospace, monospace;
  --f-jp: "Zen Kaku Gothic New", "Montserrat", sans-serif;
  --gutter: clamp(16px, 5vw, 72px); --max: 1240px; --ease: cubic-bezier(.2,.7,.2,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; overflow-x: clip; background: var(--void); color: var(--white); font: 400 16px/1.65 var(--f-display); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
html:not([data-lang="ja"]) l-ja, html[data-lang="ja"] l-en { display: none; }
html[data-lang="ja"] body { word-break: auto-phrase; line-break: strict; }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; z-index: 99; padding: 10px 14px; background: var(--white); color: var(--void); }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sec { padding-block: clamp(80px, 11vw, 150px); }
.eyebrow { margin: 0 0 18px; font: 700 11px/1 var(--f-mono); letter-spacing: .28em; text-transform: uppercase; color: var(--pink); }
.eyebrow::before { content: ""; display: inline-block; width: 26px; height: 1px; margin-right: 12px; vertical-align: middle; background: currentColor; }
.h2 { margin: 0; font: 300 clamp(34px, 4.6vw, 62px)/1.08 var(--f-display); letter-spacing: -.01em; }
.h2 b { font-weight: 800; }
html[data-lang="ja"] .h2 { font-family: var(--f-jp); font-weight: 500; line-height: 1.3; letter-spacing: .02em; }
.lead { margin: 22px 0 0; max-width: 640px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; color: var(--dim); }
.head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: clamp(36px, 5vw, 64px); }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 2px; font: 700 12px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s; }
.btn i { font-style: normal; transition: transform .3s var(--ease); } .btn:hover i { transform: translateX(4px); }
.btn--main { background: var(--white); color: var(--void); }
.btn--main:hover { background: var(--pink); box-shadow: 0 0 30px rgba(255,102,255,.35); }
.btn--line { border: 1px solid var(--edge); }
.btn--line:hover { border-color: var(--white); }

/* header */
.top { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.top.is-solid { background: rgba(8,8,14,.88); backdrop-filter: blur(12px); border-color: var(--line); }
.top__in { display: flex; align-items: center; gap: 28px; height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand svg { width: 64px; fill: var(--white); }
.brand span { padding-left: 12px; border-left: 1px solid var(--faint); font: 700 11px/1 var(--f-mono); letter-spacing: .32em; }
.menu { display: flex; gap: 26px; margin-left: auto; font: 700 11px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.menu a:hover { color: var(--white); }
.langs { display: flex; gap: 6px; font: 700 11px/1 var(--f-mono); }
.langs b { padding: 6px 8px; color: var(--dim); font-weight: 700; }
html:not([data-lang="ja"]) .langs [data-l="en"], html[data-lang="ja"] .langs [data-l="ja"] { color: var(--white); border-bottom: 1px solid var(--pink); }
.top .btn { padding: 12px 18px; }
.menu__extra { display: none; }
.langs b { min-height: 32px; display: inline-flex; align-items: center; }
.more > summary { padding: 18px 0; }
.contact__side a.mail, .foot a { display: inline-block; padding-block: 10px; }
.burger { display: none; width: 40px; height: 40px; }
.burger span { display: block; width: 22px; height: 1.5px; margin: 6px auto; background: var(--white); transition: transform .3s; }
.top.is-open .burger span:first-child { transform: translateY(3.75px) rotate(45deg); } .top.is-open .burger span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* hero */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 120px 0 clamp(48px, 8vw, 96px); overflow: hidden; isolation: isolate; }
.hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; animation: slowzoom 24s ease-out both; }
@keyframes slowzoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8,8,14,.95) 0%, rgba(8,8,14,.72) 42%, rgba(8,8,14,.15) 75%), linear-gradient(0deg, var(--void) 0%, transparent 40%); }
.hero h1 { margin: 0; max-width: 820px; font: 300 clamp(42px, 6.6vw, 96px)/1.02 var(--f-display); letter-spacing: -.02em; }
.hero h1 b { font-weight: 800; background: linear-gradient(90deg, var(--white), var(--pink) 70%, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-lang="ja"] .hero h1 { font-family: var(--f-jp); font-weight: 500; line-height: 1.2; font-size: clamp(36px, 5.4vw, 76px); }
.hero .lead { max-width: 560px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.facts { display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 56px); margin-top: clamp(42px, 6vw, 72px); padding-top: 26px; border-top: 1px solid var(--faint); max-width: 820px; }
.facts div { display: grid; gap: 6px; }
.facts b { font: 300 clamp(26px, 3vw, 38px)/1 var(--f-display); }
.facts span { font: 700 10px/1.3 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }

/* clients */
.clients { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.client { display: grid; align-content: start; gap: 14px; padding: clamp(24px, 3vw, 38px); background: var(--void); transition: background .4s; }
.client:hover { background: var(--void-2); }
.client__no { font: 700 11px/1 var(--f-mono); color: var(--pink); letter-spacing: .2em; }
.client h3 { margin: 0; font: 700 20px/1.25 var(--f-display); }
.client p { margin: 0; color: var(--dim); font-size: 15px; }
.client ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.client li::before { content: "— "; color: var(--pink); }

/* the show: pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); }
.pillar { display: grid; gap: 18px; }
.pillar__img { aspect-ratio: 4/5; overflow: hidden; }
.pillar__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.pillar:hover img { transform: scale(1.04); }
.pillar h3 { margin: 0; font: 700 20px/1.2 var(--f-display); }
.pillar h3 small { display: block; margin-top: 6px; font: 500 13px/1 var(--f-jp); color: var(--pink); letter-spacing: .12em; }
.pillar p { margin: 0; color: var(--dim); font-size: 15px; }

/* showreel */
.reel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.film { position: relative; aspect-ratio: 9/16; overflow: hidden; background: #000; }
.film video, .film img { width: 100%; height: 100%; object-fit: cover; }
.film__play { position: absolute; inset: auto 16px 16px 16px; display: flex; align-items: center; gap: 12px; font: 700 11px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.film__play::before { content: "▶"; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--void); font-size: 12px; padding-left: 3px; }
.film::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(8,8,14,.85)); pointer-events: none; }
.film.is-playing::after, .film.is-playing .film__play { display: none; }

/* formats */
.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.fmt { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); transition: border-color .4s; }
.fmt:hover { border-color: rgba(255,102,255,.45); }
.fmt__img { aspect-ratio: 16/10; overflow: hidden; } .fmt__img img { width: 100%; height: 100%; object-fit: cover; }
.fmt__txt { display: grid; align-content: start; gap: 10px; padding: 22px 24px 26px; }
.fmt h3 { margin: 0; font: 700 19px/1.25 var(--f-display); }
.fmt p { margin: 0; color: var(--dim); font-size: 15px; }
.fmt small { font: 700 10px/1.5 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
.fmt a { margin-top: 6px; font: 700 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.fmt a:hover { color: var(--pink); }

/* packages */
.light { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 26px 30px; margin-bottom: 18px; border: 1px solid var(--line); }
.light h3 { margin: 0 0 4px; font: 700 18px/1.3 var(--f-display); }
.light p { margin: 0; color: var(--dim); font-size: 14px; }
.price { font: 300 clamp(22px, 2.4vw, 30px)/1 var(--f-display); white-space: nowrap; }
.price small { display: block; margin-top: 6px; font: 700 9px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); }
.plans .price { white-space: normal; font-size: clamp(20px, 1.8vw, 26px); }
.plan dd, .plan > p { overflow-wrap: anywhere; }
.plan { display: grid; align-content: start; gap: 16px; padding: 26px 22px 30px; border-right: 1px solid var(--line); }
.plan:last-child { border-right: 0; }
.plan.is-pick { background: linear-gradient(180deg, rgba(176,0,224,.16), transparent 70%); box-shadow: inset 0 2px 0 var(--pink); }
.plan h3 { margin: 0; font: 800 18px/1.2 var(--f-display); letter-spacing: .02em; }
.plan > p { margin: 0; min-height: 3em; font-size: 14px; color: var(--dim); }
.plan dl { margin: 0; display: grid; gap: 12px; }
.plan dt { font: 700 9px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.plan dd { margin: 4px 0 0; font-size: 14px; line-height: 1.45; }
.plan .btn { justify-content: center; padding: 13px 14px; margin-top: 4px; }
.fine { margin: 16px 0 0; font: 700 10px/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }

.plan__note { margin: 0; font-size: 12px; line-height: 1.55; color: var(--dim); }
.h3 { margin: clamp(48px, 6vw, 72px) 0 22px; font: 700 clamp(20px, 2vw, 26px)/1.3 var(--f-display); }
html[data-lang="ja"] .h3 { font-family: var(--f-jp); }
.vcard__lbl { margin: 18px 0 10px; font: 700 10px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }

/* AI concept-image label (as in the catalog) and "new" tag */
.ai { position: absolute; left: 10px; top: 10px; padding: 5px 8px; background: rgba(8,8,14,.72); font: 700 9px/1 var(--f-mono); letter-spacing: .1em; color: var(--dim); }
.new { position: absolute; right: 10px; top: 10px; padding: 5px 8px; background: var(--lime); color: var(--void); font: 700 9px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.fmt__img, figure { position: relative; }
figure { margin: 0; }

/* light package (with photo) */
.light2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(48px, 6vw, 72px); }
.light2 img { width: 100%; aspect-ratio: 1088/660; object-fit: cover; }
.light2__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px; margin: 10px 0 0; font: 700 clamp(20px, 2vw, 26px)/1.2 var(--f-display); color: var(--lime); }
.light2__main .price { color: var(--pink); font-weight: 700; font-size: 18px; }
.addons { margin: 0; display: grid; gap: 10px; }
.addons div { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.addons dt { font-weight: 700; color: var(--lime); } .addons dd { margin: 0; color: var(--dim); font-size: 14px; }

/* conditions, services, tiers, ideas: text blocks with a top rule */
.conds, .svc, .tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 4vw, 56px); }
.tiers { grid-template-columns: repeat(3, 1fr); }
.cond { padding: 22px 0 24px; border-top: 1px solid var(--faint); }
.cond h4 { margin: 0 0 8px; font: 700 17px/1.35 var(--f-display); color: var(--lime); }
.svc--ideas .cond h4, .cond:nth-child(4n+2) h4, .cond:nth-child(4n+3) h4 { color: var(--pink); }
.cond h4 .n { margin-right: 6px; font: 300 22px/1 var(--f-display); color: var(--pink); }
.cond p { margin: 0; color: var(--dim); font-size: 15px; }
.callout { margin: 18px 0 0; padding: 16px 20px; border-left: 3px solid var(--lime); background: rgba(170,255,0,.05); font-size: 14px; color: var(--dim); }

/* workshops */
/* the card with a photo on the left, the two text cards stacked beside it */
.ws { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(16px, 2.4vw, 28px); margin-bottom: clamp(40px, 5vw, 64px); }
.wsm { display: grid; align-content: center; gap: 10px; padding: 24px; border: 1px solid var(--line); }
.wsm:has(figure) { grid-column: 1; grid-row: 1 / span 2; align-content: start; }
.wsm figure { margin: -24px -24px 8px; } .wsm img { width: 100%; aspect-ratio: 975/555; object-fit: cover; }
.wsm h3 { margin: 0; font: 700 19px/1.3 var(--f-display); color: var(--lime); }
.wsm:nth-child(2) h3 { color: var(--pink); }
.wsm p { margin: 0; color: var(--dim); font-size: 15px; }
.ws2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); margin-bottom: 36px; }
.aud { margin: 0; display: grid; }
.aud div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--faint); }
.aud dt { font-weight: 700; color: var(--lime); } .aud div:nth-child(even) dt { color: var(--pink); }
.aud dd { margin: 0; color: var(--dim); font-size: 15px; }
.flow { list-style: none; counter-reset: f; margin: 0; padding: 0; display: grid; gap: 0; }
.flow li { counter-increment: f; display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; padding: 14px 0; border-top: 1px solid var(--faint); }
.flow li::before { content: "0" counter(f); grid-row: span 2; font: 300 30px/1 var(--f-display); color: var(--lime); }
.flow li:nth-child(even)::before { color: var(--pink); }
.flow b { font-size: 16px; } .flow span { color: var(--dim); font-size: 14px; }
.flow--4 { grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(36px, 5vw, 56px); }
.flow--4 li { grid-template-columns: 1fr; padding-top: 18px; } .flow--4 li::before { grid-row: auto; margin-bottom: 12px; font-size: 40px; }

/* bon odori */
.bon { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.bon__img img { width: 100%; aspect-ratio: 1400/796; object-fit: cover; }
.bon__pts { display: grid; gap: 4px; margin-top: 26px; }
.bon__pts div { padding: 14px 0; border-top: 1px solid var(--faint); }
.bon__pts h4 { margin: 0 0 6px; font: 700 17px/1.3 var(--f-display); color: var(--lime); } .bon__pts div:nth-child(2) h4 { color: var(--pink); }
.bon__pts p { margin: 0; color: var(--dim); font-size: 15px; }
.reveal { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(48px, 6vw, 80px); }
.reveal img { width: 100%; aspect-ratio: 1400/590; object-fit: cover; }

/* ===== Visual layer: text on pictures, fine print folded away ===== */
.tiles { display: grid; gap: clamp(10px, 1.4vw, 16px); }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tile { position: relative; display: grid; align-items: end; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; background: var(--void-2); }
.tiles--2 .tile { aspect-ratio: 16 / 10; }
.tile > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(8,8,14,.55) 62%, rgba(8,8,14,.94)); }
.tile:hover > img { transform: scale(1.05); }
.tile__txt { display: grid; gap: 6px; padding: clamp(16px, 2vw, 24px); }
.tile__txt small { font: 700 9px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pink); }
.tile__txt h3 { margin: 0; font: 800 clamp(17px, 1.6vw, 22px)/1.2 var(--f-display); }
.tiles--2 .tile__txt h3 { font-size: clamp(22px, 2.4vw, 32px); }
html[data-lang="ja"] .tile__txt h3 { font-family: var(--f-jp); font-weight: 700; }
.tile__txt p { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(240,240,255,.8); }
a.tile .tile__txt h3::after { content: " →"; color: var(--pink); opacity: 0; transition: opacity .3s; } a.tile:hover .tile__txt h3::after { opacity: 1; }

/* a wide picture with its headline written on it */
.banner { position: relative; display: grid; align-items: end; min-height: clamp(360px, 46vw, 560px); margin: 0; overflow: hidden; isolation: isolate; }
.banner > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,8,14,.92) 0%, rgba(8,8,14,.55) 45%, transparent 75%), linear-gradient(0deg, rgba(8,8,14,.7), transparent 50%); }
.banner figcaption { max-width: 560px; padding: clamp(24px, 4vw, 52px); }
.banner figcaption p { margin: 14px 0 0; font-size: clamp(15px, 1.3vw, 18px); color: rgba(240,240,255,.85); }
.banner figcaption .chips { margin-top: 18px; }
.banner .chip { cursor: default; background: rgba(8,8,14,.5); }
.banner--light { margin-top: clamp(48px, 6vw, 80px); }
.banner--light .price { display: inline; font: 700 inherit; color: var(--pink); } .banner--light .price small { display: none; }
.banner--reveal { min-height: clamp(260px, 36vw, 440px); margin-top: clamp(16px, 2vw, 24px); }
.banner--reveal::after { background: linear-gradient(0deg, rgba(8,8,14,.88), transparent 55%); }
.banner--reveal figcaption { max-width: none; }
.banner__lbl { position: absolute; top: 12px; padding: 5px 9px; background: rgba(8,8,14,.7); font: 700 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.banner__lbl--l { left: 25%; transform: translateX(-50%); } .banner__lbl--r { left: 75%; transform: translateX(-50%); color: var(--cyan); }
.banner .ai { top: auto; bottom: 10px; left: auto; right: 10px; }

/* plans: 3 key numbers instead of a long list */
.keys { list-style: none; margin: 0; padding: 14px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border-block: 1px solid var(--line); }
.keys li { display: grid; gap: 4px; }
.keys b { font: 300 clamp(18px, 1.6vw, 22px)/1 var(--f-display); }
.keys span { font: 700 9px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }

/* folded details */
.more { margin-top: 22px; border-top: 1px solid var(--line); }
.more > summary { cursor: pointer; list-style: none; padding: 16px 0; font: 700 11px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: " +"; color: var(--pink); } .more[open] > summary::after { content: " −"; }
.more > summary:hover { color: var(--white); }
.more--plan { margin-top: 0; border-top: 0; } .more--plan > summary { padding: 4px 0 8px; }
.more--plan dl { margin-bottom: 12px; }

/* workshops / bon odori: chips and 4 short steps */
.chips--aud { margin: 18px 0 0; } .chips--aud .chip { cursor: default; }
.flow4 { list-style: none; counter-reset: f; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.flow4 li { counter-increment: f; display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--faint); font: 700 15px/1.3 var(--f-display); }
.flow4 li::before { content: "0" counter(f); font: 300 30px/1 var(--f-display); color: var(--lime); }
.flow4 li:nth-child(even)::before { color: var(--pink); }
.svc4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(16px, 2.4vw, 28px); }
@media (max-width: 1100px) { .tiles--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .svc4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .tiles--3, .tiles--5 { grid-template-columns: 1fr 1fr; } .tiles--2 { grid-template-columns: 1fr; }
  .flow4 { grid-template-columns: 1fr 1fr; }
  .banner::after { background: linear-gradient(0deg, rgba(8,8,14,.95) 20%, rgba(8,8,14,.4) 70%, transparent); }
}
@media (max-width: 480px) { .tile__txt p { display: none; } .tiles--3 .tile, .tiles--5 .tile { aspect-ratio: 3 / 4; } .svc4 { grid-template-columns: 1fr; } }

/* ===== SVG animations (UV light, never club effects). All still with prefers-reduced-motion (top of file). ===== */
/* hero: the UVX mark draws itself in neon, then glows; two UV beams sweep slowly across the photo */
.hero .wrap { position: relative; z-index: 1; }
.hero__mark { display: block; width: clamp(90px, 9vw, 130px); margin-bottom: 26px; overflow: visible;
  fill: transparent; stroke: var(--pink); stroke-width: 6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 2.2s .3s var(--ease) forwards, markfill 1.2s 2.2s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes markfill { to { fill: var(--white); stroke: var(--violet); filter: drop-shadow(0 0 10px rgba(255,102,255,.7)); } }
.beams { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: .7; }
.beams__a { animation: sweep 14s ease-in-out infinite alternate; }
.beams__b { animation: sweep 19s 2s ease-in-out infinite alternate-reverse; opacity: .7; }
@keyframes sweep { from { transform: translateX(150px); } to { transform: translateX(1150px); } }

/* section labels: the little line before each label draws in */
.head.rv .eyebrow::before { width: 0; transition: width .9s .25s var(--ease); }
.head.rv.is-in .eyebrow::before { width: 26px; }

/* plan icons draw themselves when the plan appears */
.keys li { position: relative; }
.ico { width: 20px; height: 20px; margin-bottom: 4px; fill: none; stroke: var(--pink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ico * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s .3s var(--ease); }
.plan.is-in .ico * { stroke-dashoffset: 0; }
.keys li:nth-child(2) .ico { stroke: var(--cyan); } .keys li:nth-child(3) .ico { stroke: var(--lime); }

/* 4 steps: a neon line runs across them as they appear */
.flow4 { position: relative; }
.flow4__line { position: absolute; left: 0; top: 0; width: 100%; height: 2px; overflow: visible; pointer-events: none; }
.flow4__line line { stroke: var(--pink); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px var(--pink)); transition: stroke-dashoffset 1.8s .2s var(--ease); }
.flow4.is-in .flow4__line line { stroke-dashoffset: 0; }
.flow4 li { opacity: .25; transition: opacity .6s var(--ease); }
.flow4.is-in li { opacity: 1; }
.flow4.is-in li:nth-child(3) { transition-delay: .5s; } .flow4.is-in li:nth-child(4) { transition-delay: .9s; } .flow4.is-in li:nth-child(5) { transition-delay: 1.3s; }
@media (max-width: 760px) { .flow4__line { display: none; } .flow4 li { opacity: 1; } }

/* UV reveal: a blacklight scan bar sweeps across the before / after picture */
.scan { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.scan rect { animation: scan 5s ease-in-out infinite; }
@keyframes scan { 0%, 10% { transform: translateX(0); } 55%, 65% { transform: translateX(100px); } 100% { transform: translateX(0); } }

/* plan switcher: one card, five plans */
.pswitch { border: 1px solid var(--line); }
.pswitch__tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.pswitch__tabs::-webkit-scrollbar { display: none; }
.pswitch__tabs button { flex: 1 0 auto; display: grid; gap: 4px; padding: 18px 22px; text-align: left; border-right: 1px solid var(--line);
  font: 800 16px/1.1 var(--f-display); color: var(--dim); transition: color .25s, background .25s, box-shadow .25s; }
.pswitch__tabs button:last-child { border-right: 0; }
.pswitch__tabs small { font: 700 9px/1 var(--f-mono); letter-spacing: .2em; color: var(--pink); }
.pswitch__tabs button:hover { color: var(--white); }
.pswitch__tabs button[aria-selected="true"] { color: var(--white); background: linear-gradient(180deg, rgba(176,0,224,.22), transparent); box-shadow: inset 0 -2px 0 var(--pink); }
.pcard2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.pcard2__img { position: relative; margin: 0; min-height: 100%; }
.pcard2__img img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.pcard2__img .ai { top: auto; bottom: 10px; }
.pcard2__body { display: grid; align-content: start; gap: 14px; padding: clamp(22px, 3.4vw, 44px); }
.pcard2__body .eyebrow { margin: 0; }
.pcard2 h3 { margin: 0; font: 800 clamp(32px, 4vw, 52px)/1 var(--f-display); }
.pcard2__tag { margin: 0; color: var(--dim); font-size: 16px; }
.pcard2__dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.pcard2__dl dt { font: 700 9px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.pcard2__dl dd { margin: 5px 0 0; font-size: 14px; line-height: 1.45; }
.pcard2__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.pcard2__foot .price { font: 300 24px/1 var(--f-display); }
.pcard2__foot .price small { display: block; margin-top: 4px; font: 700 9px/1 var(--f-mono); letter-spacing: .16em; color: var(--dim); }
.pcard2.is-swap .pcard2__body, .pcard2.is-swap .pcard2__img img { animation: swapIn .5s var(--ease) both; }
@keyframes swapIn { from { opacity: 0; transform: translateY(10px); } }
.pcard2 .ico * { animation: draw 1.2s .25s var(--ease) forwards; }
@media (max-width: 760px) {
  .pcard2 { grid-template-columns: 1fr; }
  .pcard2__img img { min-height: 0; aspect-ratio: 16 / 10; object-position: 50% 30%; }
  .pcard2__dl { grid-template-columns: 1fr; }
  .pswitch__tabs button { padding: 14px 16px; font-size: 14px; }
  .pcard2__foot .btn { width: 100%; justify-content: center; }
}

/* reduced motion: show every animated thing in its finished state */
@media (prefers-reduced-motion: reduce) {
  .hero__mark { stroke-dashoffset: 0; fill: var(--white); stroke: var(--violet); }
  .beams, .scan { display: none; }
  .ico *, .flow4__line line { stroke-dashoffset: 0; }
  .flow4 li { opacity: 1; }
}

/* process */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); counter-reset: s; list-style: none; margin: 0; padding: 0; }
.steps li { counter-increment: s; padding-top: 22px; border-top: 1px solid var(--faint); }
.steps li::before { content: "0" counter(s); display: block; margin-bottom: 16px; font: 300 44px/1 var(--f-display); color: var(--pink); }
.steps h3 { margin: 0 0 8px; font: 700 19px/1.3 var(--f-display); }
.steps p { margin: 0; color: var(--dim); font-size: 15px; }

/* contact */
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.contact__side p { color: var(--dim); }
.contact__side a.mail { display: inline-block; margin-top: 10px; font: 700 13px/1 var(--f-mono); letter-spacing: .08em; border-bottom: 1px solid var(--pink); padding-bottom: 6px; }
.form { display: grid; gap: 20px; padding: clamp(24px, 3.6vw, 44px); border: 1px solid var(--line); background: var(--void-2); }
.form fieldset { border: 0; margin: 0; padding: 0; }
.form legend, .form label > span { display: block; margin-bottom: 10px; font: 700 10px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 10px 14px; border: 1px solid var(--edge); font-size: 13px; transition: .2s; }
.chip:hover { border-color: var(--white); }
.chip[aria-pressed="true"] { background: var(--white); color: var(--void); border-color: var(--white); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form input, .form textarea, .form select { width: 100%; padding: 14px 16px; border: 1px solid var(--edge); border-radius: 0; background: var(--void);
  color: var(--white); font: 400 16px/1.4 var(--f-display); color-scheme: dark; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--pink); }
.form textarea { resize: vertical; }
.form .btn { justify-content: center; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.done { margin: 0; padding: 14px 16px; border: 1px solid var(--lime); color: var(--lime); font-size: 14px; }
.done.is-bad { border-color: var(--pink); color: var(--pink); }

/* footer */
.foot { padding: 48px 0 60px; border-top: 1px solid var(--line); font: 700 10px/1.8 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
.foot a:hover { color: var(--white); }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plan:nth-child(3) { border-right: 0; } .plan:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .clients { grid-template-columns: 1fr 1fr; } .reel { grid-template-columns: 1fr 1fr; }
  .formats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .menu, .top .btn--main { display: none; }
  .burger { display: block; margin-left: auto; }
  .top.is-open { background: var(--void); }
  .top.is-open .menu { display: grid; position: fixed; inset: 76px 0 0; align-content: start; gap: 0; padding: 12px var(--gutter); background: var(--void); font-size: 14px; }
  .top.is-open .menu { overflow-y: auto; padding-bottom: calc(32px + env(safe-area-inset-bottom)); counter-reset: m; }
  .top.is-open .menu > a { counter-increment: m; display: flex; align-items: baseline; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line);
    font: 300 clamp(26px, 7.5vw, 34px)/1.1 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--white); }
  html[data-lang="ja"] .top.is-open .menu > a { font-family: var(--f-jp); font-weight: 500; }
  .top.is-open .menu > a::before { content: "0" counter(m); font: 700 10px/1 var(--f-mono); letter-spacing: .14em; color: var(--pink); }
  .top.is-open .menu__extra { display: grid; gap: 14px; margin-top: 26px; }
  .top.is-open .menu__extra .btn { display: inline-flex; justify-content: center; padding: 18px; }
  .menu__mail { justify-self: center; padding: 10px; font: 700 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--dim); }
  .langs--big { justify-self: center; gap: 10px; padding: 6px; border: 1px solid var(--line); border-radius: 99px; }
  .langs--big b { padding: 10px 16px; font-size: 13px; }
  .top .langs { min-height: 44px; }
  .langs { margin-left: auto; } .burger { margin-left: 0; }
  .pillars, .formats, .steps, .contact, .light2, .ws, .ws2, .bon, .reveal, .conds, .svc, .tiers { grid-template-columns: 1fr; }
  .flow--4 { grid-template-columns: 1fr 1fr; }
  .head { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .clients, .plans { grid-template-columns: 1fr; } .plan { border-right: 0; border-bottom: 1px solid var(--line); }
  .row, .light { grid-template-columns: 1fr; }
  .flow--4, .aud div, .addons div { grid-template-columns: 1fr; }
  .brand span { display: none; }
  .hero::after { background: linear-gradient(0deg, var(--void) 10%, rgba(8,8,14,.78) 55%, rgba(8,8,14,.35)); }
}

/* ===== Normal light / Blacklight =====
   Normal light is the default: a bright page (Ghost White + deep black text, UV violet accents).
   html[data-mode="uv"] = Blacklight: the all-dark page above. The switch in the bar flips it (remembered per visitor).
   Photos, films and banners stay dark "UV windows" in both modes: the half-and-half look. */
html:not([data-mode="uv"]) {
  --void: #E4E1F0; --void-2: #D9D5E9; --white: #0E0B16;
  --dim: rgba(8,8,14,.64); --faint: rgba(8,8,14,.16); --line: rgba(8,8,14,.12); --edge: rgba(8,8,14,.26);
  --pink: #B000E0; --lime: #FF0066; --cyan: #B000E0;
}
html:not([data-mode="uv"]) .form input, html:not([data-mode="uv"]) .form textarea, html:not([data-mode="uv"]) .form select { color-scheme: light; background: #F1EFF8; }
html:not([data-mode="uv"]) .top.is-solid { background: rgba(228,225,240,.86); }
html:not([data-mode="uv"]) .btn--main:hover { background: var(--violet); color: #F0F0FF; }
html:not([data-mode="uv"]) .callout { background: rgba(176,0,224,.06); }
html:not([data-mode="uv"]) .pswitch__tabs button[aria-selected="true"] { background: linear-gradient(180deg, rgba(176,0,224,.14), transparent); }
/* the dark UV windows: these keep the Blacklight colours whatever the mode */
html:not([data-mode="uv"]) :is(.hero, .tile, .banner, .film, .pcard2__img, .top:not(.is-solid):not(.is-open)) {
  --void: #08080E; --void-2: #0E0B16; --white: #F0F0FF;
  --dim: rgba(240,240,255,.62); --faint: rgba(240,240,255,.14); --line: rgba(240,240,255,.1); --edge: rgba(240,240,255,.28);
  --pink: #FF66FF; --lime: #AAFF00; --cyan: #00FFFF;
  color: var(--white);
}
/* the fade between the two modes */
body, .top, .form, .form input, .form textarea, .form select, .chip, .pswitch, .pswitch__tabs button, .cond, .more { transition: background-color .6s ease, color .6s ease, border-color .6s ease; }

/* the switch: bulb = Normal light, UV = Blacklight */
.modesw { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 4px; font: 700 10px/1 var(--f-mono); letter-spacing: .16em; color: var(--dim); }
.modesw__track { position: relative; width: 46px; height: 24px; border-radius: 99px; border: 1.5px solid var(--edge); background: rgba(176,0,224,.08); transition: .35s; }
.modesw__knob { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(8,8,14,.25), 0 1px 4px rgba(8,8,14,.25);
  transition: transform .4s var(--ease), background .3s, box-shadow .3s; }
html[data-mode="uv"] .modesw__knob { transform: translateX(22px); background: #F0F0FF; box-shadow: 0 0 10px #F0F0FF, 0 0 22px var(--violet); }
html[data-mode="uv"] .modesw__track { border-color: var(--violet); box-shadow: 0 0 14px var(--violet), inset 0 0 8px rgba(176,0,224,.6); }
html[data-mode="uv"] .modesw { color: var(--white); text-shadow: 0 0 8px var(--violet); }
.modesw__lbl l-en, .modesw__lbl l-ja { white-space: nowrap; }
@media (max-width: 900px) { .top .langs:not(.langs--big) { display: none; } .modesw { margin-left: auto; } }
@media (max-width: 380px) { .modesw__lbl { display: none; } }
/* switching flash: a UV sweep across the screen */
.modeflash { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(176,0,224,.35) 45%, rgba(240,240,255,.55) 50%, rgba(0,255,255,.3) 55%, transparent 70%); background-size: 300% 100%; }
.modeflash.is-on { animation: modeflash .8s ease forwards; }
@keyframes modeflash { 0% { opacity: 1; background-position: 100% 0; } 100% { opacity: 0; background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .modeflash { display: none; } }
/* header fits: no wrapping; the switch label hides on mid-size screens (the switch stays) */
.top__in { gap: 20px; }
.menu { gap: 20px; white-space: nowrap; }
.langs, .top .btn { white-space: nowrap; flex: none; }
@media (max-width: 1320px) and (min-width: 901px) { .modesw__lbl { display: none; } .menu { gap: 16px; } }
/* Normal light, softer: a muted lilac-grey base with a faint UV gradient (violet from the top, cyan from the bottom), not flat white */
html:not([data-mode="uv"]) body {
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(176,0,224,.13), transparent 70%),
    radial-gradient(60% 45% at 0% 55%, rgba(255,102,255,.08), transparent 70%),
    radial-gradient(70% 50% at 20% 100%, rgba(0,255,255,.09), transparent 70%),
    linear-gradient(180deg, #E8E5F3 0%, #E1DDEE 50%, #DCD8EB 100%);
  background-attachment: fixed;
}
html:not([data-mode="uv"]) .form { background: rgba(255,255,255,.35); }
/* phones: EN/日本語 stays in the top bar (logo · language · light switch · menu) */
@media (max-width: 900px) {
  .top .langs:not(.langs--big) { display: flex; margin-left: auto; min-height: 40px; }
  .top .langs:not(.langs--big) b { padding: 6px 7px; }
  .modesw { margin-left: 0; } .modesw__lbl { display: none; }
  .langs--big { display: none; }
}

/* ===== UV reveal slider (normal light ⇄ blacklight) ===== */
.uvs { margin: clamp(16px, 2vw, 24px) 0 0; }
.uvs__view { position: relative; aspect-ratio: 700 / 590; max-height: 72vh; margin-inline: auto; overflow: hidden; touch-action: pan-y; }
.uvs__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.uvs__normal { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.uvs__line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #F0F0FF; box-shadow: 0 0 12px #FF66FF, 0 0 24px #B000E0; pointer-events: none; }
.uvs__line b { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 2px solid #F0F0FF;
  background: rgba(176,0,224,.55); box-shadow: 0 0 18px #FF66FF; backdrop-filter: blur(4px); }
.uvs__line b::before, .uvs__line b::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.uvs__line b::before { left: 6px; border-right-color: #F0F0FF; } .uvs__line b::after { right: 6px; border-left-color: #F0F0FF; }
.uvs__lbl { position: absolute; top: 12px; padding: 6px 10px; font: 700 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.uvs__lbl--l { left: 12px; background: rgba(240,240,255,.85); color: #08080E; } .uvs__lbl--r { right: 12px; background: rgba(8,8,14,.7); color: #00FFFF; }
.uvs .ai { top: auto; bottom: 10px; right: 10px; left: auto; }
.uvs__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.uvs__range:focus-visible + * , .uvs__view:has(.uvs__range:focus-visible) .uvs__line b { outline: 2px solid #00FFFF; outline-offset: 3px; }
.uvs figcaption { padding-top: 18px; }
.uvs__view.is-demo .uvs__normal, .uvs__view.is-demo .uvs__line { animation: uvsDemo 2.4s var(--ease) both; }
@keyframes uvsDemo { 0% { --x: 50%; } 35% { --x: 8%; } 75% { --x: 92%; } 100% { --x: 50%; } }
@property --x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

/* ===== Floating contact button + calm shuriken scroll (Productions) ===== */
.cfab { position: fixed; right: 18px; bottom: 18px; z-index: 45; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px; border-radius: 99px;
  background: var(--white); color: var(--void); font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(8,8,14,.28), 0 0 18px rgba(176,0,224,.3); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .35s, transform .35s var(--ease); }
.cfab.is-on { opacity: 1; transform: none; pointer-events: auto; }
.cfab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html:has(.top.is-open) .cfab, html:has(.top.is-open) .pshuri { display: none; }
.pshuri { position: fixed; right: 16px; top: 120px; z-index: 44; width: 26px; height: calc(100svh - 240px); pointer-events: none; opacity: 0; transition: opacity .4s; }
.pshuri.is-on { opacity: 1; }
.pshuri__track { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--faint); overflow: hidden; }
.pshuri__track i { position: absolute; inset: 0; background: var(--pink); transform-origin: top; transform: scaleY(0); }
.pshuri button { position: absolute; left: 0; top: 0; width: 26px; height: 26px; padding: 0; pointer-events: auto; cursor: pointer; will-change: transform; }
.pshuri svg { width: 100%; height: 100%; fill: var(--void); stroke: var(--pink); stroke-width: 5; }
@media (max-width: 760px) { .pshuri { display: none; } .cfab { right: 12px; bottom: 12px; padding: 0 16px; } }
.contact__meta { display: grid; gap: 6px; margin-top: 18px; font: 700 11px/1.5 var(--f-mono); letter-spacing: .1em; color: var(--dim); }
.contact__meta a { color: var(--white); }