/* T.H.E Production — Visibility & Style Overrides */

/* ── Hero background ─────────────────────────────────────── */
section.h-screen.overflow-hidden .z-0 > img {
  filter: brightness(1.48) contrast(1.02) saturate(1.05) !important;
}
section.h-screen.overflow-hidden .z-0 > .bg-gradient-to-t {
  opacity: 0.76 !important;
}
section.h-screen.overflow-hidden .z-0 > .bg-gradient-to-r {
  opacity: 0.62 !important;
}

/* ── Logo ────────────────────────────────────────────────── */
header img[alt="T.H.E Production"] {
  height: 72px !important;
}

/* Mobile full-screen nav — natural case (not desktop uppercase) */
@media (max-width: 1023px) {
  header nav.flex.flex-col.gap-8 a {
    text-transform: none !important;
    letter-spacing: 0.03em !important;
    font-size: clamp(1.85rem, 7.5vw, 2.5rem) !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
  }

  header nav.flex.flex-col.gap-8 a:hover,
  header nav.flex.flex-col.gap-8 a:focus-visible {
    letter-spacing: 0.05em !important;
  }
}
/* ── Header (home page only, not-scrolled) ───────────────── */
html[data-route="/"] header.py-8:not(.the-scrolled) {
  background: rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
html[data-route="/"] header.py-8:not(.the-scrolled) nav a {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55) !important;
}

/* ── Small labels ────────────────────────────────────────── */
.tracking-\[0\.75em\] {
  font-size: 11px !important;
  opacity: 1 !important;
  letter-spacing: 0.8em !important;
}
.tracking-\[0\.45em\].text-white\/45 {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.82) !important;
}
.tracking-\[0\.45em\].text-white\/18 {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ── Goods: full color + square aspect ratio ─────────────── */
img.grayscale {
  filter: none !important;
}
body[data-page="/goods"] .aspect-\[3\/4\],
html[data-route="/goods"] .aspect-\[3\/4\] {
  aspect-ratio: 1 / 1 !important;
}

/* ═══════════════════════════════════════════════════════════
   HERO TEXT
   ═══════════════════════════════════════════════════════════ */

/* Move text block higher up (original justify-end pb-28 ≈ 112px, now 20vh) */
section.h-screen.overflow-hidden .flex.flex-col.justify-end {
  padding-bottom: 20vh !important;
}

/* ── Line 1: 満足を超える ─────────────────────────────────── */
.font-serif.font-light.text-white.leading-\[0\.92\] {
  font-size: 8.5vw !important;
  opacity: 0.88 !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.70), 0 4px 48px rgba(0,0,0,0.50) !important;
}
@media (min-width: 64rem) {
  .font-serif.font-light.text-white.leading-\[0\.92\] {
    font-size: 6.2vw !important;
  }
}

/* ── Line 2: 全てを、持ち帰れ ─────────────────────────────── */
/* Root cause: pl-[6vw] indent + italic synthesis adds extra width beyond overflow-hidden clip.
   Fix: reduce font-size and override padding-left on mobile. */
.text-brand-accent.leading-\[0\.92\] {
  font-size: 8vw !important;
  padding-left: 2vw !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.65), 0 4px 40px rgba(0,0,0,0.45) !important;
  transition: filter 0.4s ease !important;
}
@media (min-width: 64rem) {
  /* min() caps the vw value once the container hits max-w-7xl (1280px).
     Without the cap, 9vw at 1920px = 172px × 8 chars + indent > 1280px → overflow-hidden clips text. */
  .text-brand-accent.leading-\[0\.92\] {
    font-size: min(9vw, 8.5rem) !important;
    padding-left: min(6vw, 5rem) !important;
  }
}
.text-brand-accent.leading-\[0\.92\]:hover {
  filter: brightness(1.22) drop-shadow(0 0 20px rgba(200,169,110,0.40)) !important;
  cursor: default;
}

/* ── Bottom row: Take Home Everything + 詳しく見る ──────── */
section.h-screen.overflow-hidden .flex.items-center.gap-8:has(.whitespace-nowrap) {
  gap: 1.6rem !important;
  margin-top: 2.2rem !important;
}
section.h-screen.overflow-hidden .flex.items-center.gap-8:has(.whitespace-nowrap) .h-px {
  display: block !important;
  background: rgba(255,255,255,0.22) !important;
  max-width: 48px !important;
  flex: 0 0 48px !important;
}
section.h-screen.overflow-hidden .text-white\/20.whitespace-nowrap {
  color: rgba(255, 255, 255, 0.62) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.62) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
  font-size: clamp(0.65rem, 1.2vw, 1rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  display: inline !important;
  flex: unset !important;
  white-space: nowrap !important;
  padding-left: 0 !important;
  opacity: 1 !important;
}

/* ── Footer ──────────────────────────────────────────────── */
footer .text-white\/20 { color: rgba(255,255,255,.62) !important; }
footer .text-white\/22 { color: rgba(255,255,255,.65) !important; }
footer .text-white\/28 { color: rgba(255,255,255,.70) !important; }
footer .text-white\/30 { color: rgba(255,255,255,.70) !important; }
footer .text-white\/35 { color: rgba(255,255,255,.76) !important; }
footer .text-white\/40 { color: rgba(255,255,255,.80) !important; }
footer .text-white\/45 { color: rgba(255,255,255,.84) !important; }

/* ── All dark-bg sections and divs (section + div) ──────── */
.bg-brand-dark .text-white\/18 { color: rgba(255,255,255,.62) !important; }
.bg-brand-dark .text-white\/20 { color: rgba(255,255,255,.62) !important; }
.bg-brand-dark .text-white\/22 { color: rgba(255,255,255,.65) !important; }
.bg-brand-dark .text-white\/25 { color: rgba(255,255,255,.68) !important; }
.bg-brand-dark .text-white\/28 { color: rgba(255,255,255,.72) !important; }
.bg-brand-dark .text-white\/30 { color: rgba(255,255,255,.72) !important; }
.bg-brand-dark .text-white\/35 { color: rgba(255,255,255,.78) !important; }
.bg-brand-dark .text-white\/40 { color: rgba(255,255,255,.82) !important; }
.bg-brand-dark .text-white\/45 { color: rgba(255,255,255,.86) !important; }
.bg-brand-dark .text-brand-muted\/40 { color: rgba(165,165,165,.85) !important; }

/* ── Light background marquee (bg-[#f2f2f0]) ────────────── */
.bg-\[#f2f2f0\] .marquee-inner span[class*="text-brand-dark"] {
  color: rgba(10, 10, 10, 0.72) !important;
}
.bg-\[#f2f2f0\] .marquee-inner .text-brand-accent {
  opacity: 0.90 !important;
}

/* ── Dark background marquee ─────────────────────────────── */
.bg-brand-dark .marquee-inner span[class*="text-white"],
.marquee-inner span[class*="text-white"] {
  color: rgba(255, 255, 255, 0.62) !important;
}
.marquee-inner span[class*="text-brand-accent"] {
  opacity: 1 !important;
  color: rgba(200, 169, 110, 0.80) !important;
}

/* ══════════════════════════════════════════════════════════
   LIVE MOMENTS — Marquee Gallery
   ══════════════════════════════════════════════════════════ */

.the-gallery {
  background: #060606;
  padding: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
  margin-top: -80px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 90px);
  mask-image: linear-gradient(to bottom, transparent 0px, black 90px);
}

.the-gallery__hd {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 5.5rem clamp(1.5rem, 6vw, 5rem) 2.2rem;
}
.the-gallery__hd-label {
  font-size: 10px;
  letter-spacing: 0.65em;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.85);
  white-space: nowrap;
  margin: 0;
}
.the-gallery__hd-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

.the-gallery__rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.the-gallery__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
}
.the-gallery__strip {
  display: flex;
  gap: 0.6rem;
  width: max-content;
}
.the-gallery__row--fwd .the-gallery__strip { animation: tg-fwd 44s linear infinite; }
.the-gallery__row--rev .the-gallery__strip { animation: tg-rev 52s linear infinite; }

.the-gallery__item {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  width: 340px;
  height: 260px;
  cursor: default;
}
.the-gallery__item--wide { width: 460px; }
.the-gallery__item--port { width: 175px; }
@media (max-width: 768px) {
  .the-gallery__item       { width: 230px; height: 170px; }
  .the-gallery__item--wide { width: 320px; }
  .the-gallery__item--port { width: 120px; }
}
.the-gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  filter: brightness(0.84) saturate(0.88);
}

@keyframes tg-fwd {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes tg-rev {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ══════════════════════════════════════════════════════════
   SUB-PAGE HERO BACKGROUNDS
   React-proof: JS sets both body[data-page] and html[data-route] on
   every navigation (html mirrors route if body attrs are touched).
   ══════════════════════════════════════════════════════════ */

/* ── NOTICE / EVENT ─────────────────────────────────────────
   R4/L4 headers use bg-gradient-to-br from-brand-dark via-brand-dark
   = fully opaque (#0a0a0a → #1c0005). Override to semi-transparent
   so the ::before image shows through.                         */
body[data-page="/notice"] .pt-44.bg-brand-dark.overflow-hidden .bg-gradient-to-br,
html[data-route="/notice"] .pt-44.bg-brand-dark.overflow-hidden .bg-gradient-to-br,
body[data-page="/event"]  .pt-44.bg-brand-dark.overflow-hidden .bg-gradient-to-br,
html[data-route="/event"]  .pt-44.bg-brand-dark.overflow-hidden .bg-gradient-to-br,
body[data-page="/contact"] .the-contact-hero .bg-gradient-to-br,
html[data-route="/contact"] .the-contact-hero .bg-gradient-to-br,
body[data-page="/contact"] .pt-44.bg-brand-dark.overflow-hidden .bg-gradient-to-br,
html[data-route="/contact"] .pt-44.bg-brand-dark.overflow-hidden .bg-gradient-to-br {
  background-image: linear-gradient(
    to bottom,
    rgba(5, 5, 5, 0.2) 0%,
    rgba(5, 5, 5, 0.02) 42%,
    rgba(5, 5, 5, 0.48) 100%
  ) !important;
  background-color: transparent !important;
}

@media (max-width: 767px) {
  body[data-page="/contact"] .the-contact-hero .bg-gradient-to-br,
  html[data-route="/contact"] .the-contact-hero .bg-gradient-to-br,
  body[data-page="/contact"] .pt-44.bg-brand-dark.overflow-hidden .bg-gradient-to-br,
  html[data-route="/contact"] .pt-44.bg-brand-dark.overflow-hidden .bg-gradient-to-br {
    background-image: linear-gradient(
      to bottom,
      rgba(5, 5, 5, 0.16) 0%,
      rgba(5, 5, 5, 0.01) 38%,
      rgba(5, 5, 5, 0.42) 100%
    ) !important;
  }
}

body[data-page="/notice"] .pt-44.bg-brand-dark.overflow-hidden::before,
html[data-route="/notice"] .pt-44.bg-brand-dark.overflow-hidden::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/media/concert-crowd-red.webp') center 30% / cover no-repeat;
  filter: brightness(0.82) contrast(1.06) saturate(1.05);
  z-index: 0;
}

body[data-page="/event"] .pt-44.bg-brand-dark.overflow-hidden::before,
html[data-route="/event"] .pt-44.bg-brand-dark.overflow-hidden::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/media/performer-silhouette-green.webp') center 30% / cover no-repeat;
  filter: brightness(0.76) contrast(1.06) saturate(1.05);
  z-index: 0;
}

/* ── ABOUT / CONTACT hero backgrounds
   ══════════════════════════════════════════════════════════ */

/* Hide the original kakaotalk image on these pages */
body[data-page="/about"] img[src*="kakaotalk"],
html[data-route="/about"] img[src*="kakaotalk"],
body[data-page="/contact"] img[src*="kakaotalk"],
html[data-route="/contact"] img[src*="kakaotalk"] {
  visibility: hidden !important;
}

/* ABOUT → artists-bow-audience */
body[data-page="/about"] .pt-44.bg-brand-dark.overflow-hidden::before,
html[data-route="/about"] .pt-44.bg-brand-dark.overflow-hidden::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/media/artists-bow-audience.webp') center 30% / cover no-repeat;
  filter: brightness(0.72) contrast(1.06) saturate(1.05);
  z-index: 0;
}

/* CONTACT → artist-blue-performance (matches Event / Notice hero shell: pt-44 + gradient-to-br from L4) */
body[data-page="/contact"] .the-contact-hero::before,
html[data-route="/contact"] .the-contact-hero::before,
body[data-page="/contact"] .pt-44.bg-brand-dark.overflow-hidden::before,
html[data-route="/contact"] .pt-44.bg-brand-dark.overflow-hidden::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/media/artist-blue-performance.webp') center 30% / cover no-repeat;
  filter: brightness(0.96) contrast(1.02) saturate(1.1);
  z-index: 0;
}

/* Mobile: subject is left in photo — use lower % to shift them right on screen */
@media (max-width: 767px) {
  body[data-page="/contact"] .the-contact-hero::before,
  html[data-route="/contact"] .the-contact-hero::before,
  body[data-page="/contact"] .pt-44.bg-brand-dark.overflow-hidden::before,
  html[data-route="/contact"] .pt-44.bg-brand-dark.overflow-hidden::before {
    background-position: 28% 28%;
  }
}

/* ══════════════════════════════════════════════════════════
   HEADER: semi-transparent on all pages except / and /goods
   Uses html[data-route] set by nav.js — same semi-opaque
   dark tint as the main page hero header (rgba 0,0,0,0.08).
   ══════════════════════════════════════════════════════════ */

/* ── not-scrolled state: match main page exactly ─────────── */
html[data-route]:not([data-route="/"]):not([data-route="/goods"]) header:not(.the-scrolled) {
  background-color: rgba(0, 0, 0, 0.08) !important;
  background-image: none !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-shadow: none !important;
  border-bottom-color: transparent !important;
  transition: background-color 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease !important;
}
/* ── Nav links ───────────────────────────────────────────── */
html[data-route]:not([data-route="/"]):not([data-route="/goods"]) header:not(.the-scrolled) nav a {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55) !important;
}

/* ── Logo → white ────────────────────────────────────────── */
html[data-route]:not([data-route="/"]):not([data-route="/goods"]) header:not(.the-scrolled) img[alt="T.H.E Production"] {
  filter: brightness(0) invert(1) !important;
}

/* ── Language toggle: match home-page transparent style ──── */
html[data-route]:not([data-route="/"]):not([data-route="/goods"]) header:not(.the-scrolled) button[aria-label="Switch language"] {
  background: rgba(255, 255, 255, 0.10) !important;
}
/* pill slider */
html[data-route]:not([data-route="/"]):not([data-route="/goods"]) header:not(.the-scrolled) button[aria-label="Switch language"] span[class*="absolute"] {
  background-color: white !important;
}
/* active lang label (text-white in g=false state) → dark on white pill */
html[data-route]:not([data-route="/"]):not([data-route="/goods"]) header:not(.the-scrolled) button[aria-label="Switch language"] span[class*="text-white"] {
  color: rgba(15, 15, 15, 0.85) !important;
}
/* inactive lang label (text-brand-dark/40) → white */
html[data-route]:not([data-route="/"]):not([data-route="/goods"]) header:not(.the-scrolled) button[aria-label="Switch language"] span[class*="text-brand-dark"] {
  color: rgba(255, 255, 255, 0.50) !important;
}

/* ── Mobile hamburger lines → white ─────────────────────── */
html[data-route]:not([data-route="/"]):not([data-route="/goods"]) header:not(.the-scrolled) button[aria-label="Open menu"] span,
html[data-route]:not([data-route="/"]):not([data-route="/goods"]) header:not(.the-scrolled) button[aria-label="Close menu"] span {
  background-color: rgba(255, 255, 255, 0.85) !important;
}

/* ── scrolled state: restore all to original ─────────────── */
html[data-route]:not([data-route="/"]):not([data-route="/goods"]) header.the-scrolled {
  background-color: rgba(255, 255, 255, 0.97) !important;
  background-image: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
/* scrolled: only restore what CSS explicitly changed — let React/Tailwind handle the rest */
html[data-route]:not([data-route="/"]):not([data-route="/goods"]) header.the-scrolled nav a {
  color: inherit !important;
  text-shadow: none !important;
}
html[data-route]:not([data-route="/"]):not([data-route="/goods"]) header.the-scrolled img[alt="T.H.E Production"] {
  filter: brightness(0) !important;
}
/* lang toggle + hamburger: no restore needed — not-scrolled rules use :not(.the-scrolled),
   so React/Tailwind g=false classes (bg-brand-dark pill, text-white active, bg-brand-dark lines) apply naturally */

/* ── Keep body.dark-hero-page as JS fallback ─────────────── */
body.dark-hero-page header:not(.the-scrolled) {
  background-color: rgba(0, 0, 0, 0.08) !important;
  background-image: none !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-shadow: none !important;
  border-bottom-color: transparent !important;
}
body.dark-hero-page header:not(.the-scrolled) nav a {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55) !important;
}
body.dark-hero-page header.the-scrolled {
  background-color: rgba(255, 255, 255, 0.97) !important;
  background-image: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.dark-hero-page header.the-scrolled nav a {
  color: inherit !important;
  text-shadow: none !important;
}

/* ── Marquee ticker text ─────────────────────────────────── */
.marquee-inner span[class*="text-brand-dark"] {
  color: rgba(10, 10, 10, 0.55) !important;
}

/* ── Hide legacy public inbox — link + orphaned parent label ── */
a[href="mailto:info@theproduction.jp"],
a[href^="mailto:info@theproduction.jp"] {
  display: none !important;
}
/* Footer: hide Contact section (mailto hidden → label orphaned) */
.bg-brand-dark div:has(> a[href^="mailto:"]) {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   CONTACT PAGE — hero height + Web3Forms
   ══════════════════════════════════════════════════════════ */

/* Title left like Notice/Event; form centered below with extra breathing room */
html[data-route="/contact"] .the-contact-hero,
body[data-page="/contact"] .the-contact-hero {
  min-height: 0 !important;
}

.the-contact-form-region {
  margin-top: 3.5rem;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .the-contact-form-region {
    margin-top: 4.5rem;
  }
}
@media (min-width: 1024px) {
  .the-contact-form-region {
    margin-top: 5rem;
  }
}

/* Mobile: use full hero width (avoid double side padding) */
@media (max-width: 767px) {
  html[data-route="/contact"] .the-contact-hero,
  body[data-page="/contact"] .the-contact-hero {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #the-contact-form-mount,
  .the-contact-form,
  .the-contact-form__card {
    width: 100%;
    max-width: 100%;
  }

  html[data-route="/contact"] .the-contact-form__card,
  body[data-page="/contact"] .the-contact-form__card {
    padding: 1.35rem 1.15rem !important;
    border-radius: 1rem;
  }

  html[data-route="/contact"] .the-contact-form__form,
  body[data-page="/contact"] .the-contact-form__form {
    gap: 1.05rem !important;
  }

  html[data-route="/contact"] .the-contact-form__input,
  body[data-page="/contact"] .the-contact-form__input,
  html[data-route="/contact"] .the-contact-form__textarea,
  body[data-page="/contact"] .the-contact-form__textarea {
    padding: 0.85rem 1rem !important;
    font-size: 16px !important;
  }

  .the-contact-form__check {
    font-size: 0.8125rem;
    line-height: 1.5;
    min-height: 2.75rem;
  }

  .the-contact-form__check input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
  }

  .the-contact-form[data-lang="ja"] .the-contact-form__submit,
  .the-contact-form__submit {
    font-size: 0.875rem;
    min-height: 3rem;
    letter-spacing: 0.08em;
  }

  .the-contact-form__success-panel {
    max-width: 100%;
  }
}

html[data-route="/contact"] .the-contact-form__card,
body[data-page="/contact"] .the-contact-form__card {
  padding: clamp(1.1rem, 2.5vw, 1.75rem) clamp(1rem, 2.4vw, 1.65rem) !important;
}

html[data-route="/contact"] .the-contact-form__form,
body[data-page="/contact"] .the-contact-form__form {
  gap: 0.95rem !important;
}

html[data-route="/contact"] .the-contact-form__label,
body[data-page="/contact"] .the-contact-form__label,
html[data-route="/contact"] .the-contact-form__form legend.the-contact-form__label,
body[data-page="/contact"] .the-contact-form__form legend.the-contact-form__label {
  margin-bottom: 0.45rem !important;
}

html[data-route="/contact"] .the-contact-form__input,
body[data-page="/contact"] .the-contact-form__input,
html[data-route="/contact"] .the-contact-form__textarea,
body[data-page="/contact"] .the-contact-form__textarea {
  padding: 0.7rem 0.95rem !important;
}

html[data-route="/contact"] .the-contact-form__textarea,
body[data-page="/contact"] .the-contact-form__textarea {
  min-height: 5rem !important;
}

html[data-route="/contact"] .the-contact-form__checks,
body[data-page="/contact"] .the-contact-form__checks {
  gap: 0.5rem 0.85rem !important;
}

#the-contact-form-mount {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(48rem, 100%);
  margin-left: auto;
  margin-right: auto;
}

.the-contact-form {
  width: 100%;
}

/* Form panel — minimal glass (hero image shows through clearly) */
.the-contact-form__card {
  position: relative;
  margin-top: 0.25rem;
  padding: clamp(1.75rem, 4.5vw, 2.75rem) clamp(1.35rem, 3.8vw, 2.5rem);
  border-radius: 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.022) 0%,
    rgba(255, 255, 255, 0.01) 55%,
    rgba(255, 255, 255, 0.004) 100%
  );
  backdrop-filter: blur(2px) saturate(1.01);
  -webkit-backdrop-filter: blur(2px) saturate(1.01);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.the-contact-form__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 169, 110, 0.28) 50%,
    transparent 100%
  );
  pointer-events: none;
}

.the-contact-form__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(200, 169, 110, 0.03);
}

.the-contact-form__form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.the-contact-form__group {
  margin: 0;
  padding: 0;
  border: 0;
}

.the-contact-form__label,
.the-contact-form__form legend.the-contact-form__label {
  display: block;
  margin-bottom: 0.65rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

.the-contact-form__label span,
.the-contact-form__form legend span {
  color: rgba(255, 255, 255, 0.85);
}

.the-contact-form__checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 1.25rem;
}
@media (min-width: 640px) {
  .the-contact-form__checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .the-contact-form__checks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.the-contact-form__check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.the-contact-form__check input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: #c8a96e;
  cursor: pointer;
}

.the-contact-form__input,
.the-contact-form__textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.025);
  color: #fff;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.the-contact-form__input::placeholder,
.the-contact-form__textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.the-contact-form__input:hover,
.the-contact-form__textarea:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

.the-contact-form__input:focus,
.the-contact-form__textarea:focus {
  outline: none;
  border-color: rgba(200, 169, 110, 0.65);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.1);
}

.the-contact-form__input.is-invalid,
.the-contact-form__textarea.is-invalid,
#the-contact-type-group.is-invalid .the-contact-form__checks {
  border-color: rgba(245, 184, 184, 0.55);
}

.the-contact-form__input.is-invalid,
.the-contact-form__textarea.is-invalid {
  background: rgba(255, 120, 120, 0.08);
  box-shadow: 0 0 0 2px rgba(245, 184, 184, 0.2);
}

#the-contact-type-group.is-invalid .the-contact-form__checks {
  border-radius: 0.75rem;
  outline: 1px solid rgba(245, 184, 184, 0.45);
  outline-offset: 4px;
}

.the-contact-form__textarea {
  min-height: 10rem;
  resize: vertical;
}

.the-contact-form__hint {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 300;
}

.the-contact-form__error {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: #f5b8b8;
}

.the-contact-form__error--global {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.65rem;
  background: rgba(255, 120, 120, 0.12);
  border: 1px solid rgba(245, 184, 184, 0.35);
}

.the-contact-form__submit {
  margin-top: 0.25rem;
  width: 100%;
  padding: 1rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 9999px;
  background: transparent;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.the-contact-form__submit:hover {
  background: #c8a96e;
  border-color: #c8a96e;
  color: #0a0a0a;
}

.the-contact-form__submit:focus-visible {
  outline: 2px solid #c8a96e;
  outline-offset: 3px;
}

.the-contact-form__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.the-contact-form[data-lang="ja"] .the-contact-form__submit {
  text-transform: none;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}

/* Success screen — no form card; text only on hero */
.the-contact-form--success {
  width: 100%;
}

.the-contact-form__success-panel {
  padding: 0.25rem 0;
  max-width: 36rem;
}

.the-contact-form__success-kicker {
  margin: 0 0 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #c8a96e;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.the-contact-form__success-message {
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.the-contact-form__success-redirect {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.the-contact-form .hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Footer → white on Contact page */
html[data-route="/contact"] .bg-brand-dark.pt-20 {
  background-color: #fff !important;
  color: rgba(10, 10, 10, 0.65) !important;
}
/* Logo: remove invert (white logo → dark logo) */
html[data-route="/contact"] .bg-brand-dark.pt-20 img[alt="T.H.E Production"] {
  filter: brightness(0) !important;
}
/* "Tokyo Higher Entertainment" + tagline */
html[data-route="/contact"] .bg-brand-dark.pt-20 .text-white\/30 {
  color: rgba(10, 10, 10, 0.35) !important;
}
html[data-route="/contact"] .bg-brand-dark.pt-20 .text-white\/40 {
  color: rgba(10, 10, 10, 0.45) !important;
}
html[data-route="/contact"] .bg-brand-dark.pt-20 .text-white\/20 {
  color: rgba(10, 10, 10, 0.30) !important;
}
html[data-route="/contact"] .bg-brand-dark.pt-20 .text-white\/70 {
  color: rgba(10, 10, 10, 0.65) !important;
}
/* Section divider border */
html[data-route="/contact"] .bg-brand-dark.pt-20 .border-white\/8 {
  border-color: rgba(10, 10, 10, 0.08) !important;
}
/* Nav links hover */
html[data-route="/contact"] .bg-brand-dark.pt-20 a.hover\:text-white:hover {
  color: rgba(10, 10, 10, 0.85) !important;
}

/* ══════════════════════════════════════════════════════════
   ABOUT PAGE: hero height + company description
   ══════════════════════════════════════════════════════════ */

/* Match NOTICE/EVENT hero height exactly:
   - pb-24 → pb-20 (1rem less)
   - h1 mb-10 → 0 (NOTICE/EVENT h1 has no bottom margin)
   - divider (h-px w-20) hidden (not present in NOTICE/EVENT)
   - description hidden (not present in NOTICE/EVENT) */
html[data-route="/about"] .pt-44.bg-brand-dark.overflow-hidden {
  padding-bottom: 5rem !important;
}
html[data-route="/about"] .pt-44.bg-brand-dark.overflow-hidden h1 {
  margin-bottom: 0 !important;
}
html[data-route="/about"] .pt-44.bg-brand-dark.overflow-hidden .h-px.w-20.bg-brand-accent {
  display: none !important;
}
html[data-route="/about"] .pt-44.bg-brand-dark.overflow-hidden p.leading-relaxed.max-w-xl {
  display: none !important;
}