/* ==========================================================================
   Magician KOKI — style.css (2026-10 redesign)

   1. Tokens          8. Profile          15. Light zone (Guide / Flow / FAQ)
   2. Base            9. Scene            16. Contact
   3. Typography     10. Performance      17. Footer / mobile CTA
   4. Buttons/links  11. Works            18. Gallery page
   5. Layout         12. Price            19. Lightbox
   6. Header / nav   13. Animated icons       20. Motion
   7. Hero           14. Brand emblem / photo panels  21. Reduced motion
                     22. Top page photo sections, 23. Hero upgrade (both before 21)
   Breakpoints: 768px (tablet), 1100px (desktop nav)
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --black: #050506;
  --black-warm: #120d0e;
  --black-raise: #191214;
  --red: #b41432;
  --red-deep: #690b20;
  --red-glow: rgba(180, 20, 50, 0.22);
  --gold: #b79558;
  --gold-light: #d9bd7b;
  --ivory: #f6f0e5;
  --white: #fffdf8;
  --ink: #1b1517;
  --ink-soft: #5b5052;

  --text: #f6f0e5;
  --text-soft: rgba(246, 240, 229, 0.74);
  --text-faint: rgba(246, 240, 229, 0.52);
  --line: rgba(246, 240, 229, 0.16);
  --line-strong: rgba(246, 240, 229, 0.3);
  --line-gold: rgba(217, 189, 123, 0.38);
  --line-ink: rgba(27, 21, 23, 0.16);

  --font-en: "Cormorant Garamond", "Times New Roman", serif;
  --font-mincho: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;

  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --header-h: 76px;
  --section-y: clamp(96px, 11vw, 176px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-slow: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 767px) {
  :root {
    --header-h: 64px;
    --section-y: 88px;
  }
}

/* 2. Base ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  background: var(--black);
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background: var(--black);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 2;
  letter-spacing: 0.03em;
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

figure {
  margin: 0;
}

/* Japanese line breaking: keep phrases together (Chromium) and avoid orphans. */
h1,
h2,
h3,
summary,
.hero-copy,
.hero-lead,
.section-lead,
.profile-statement,
.page-hero-copy,
.page-hero-lead,
.hero-facts dd {
  word-break: auto-phrase;
}

p,
li,
dd {
  text-wrap: pretty;
}

h1,
h2,
h3,
p,
dl,
dd,
ol,
ul {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.light-zone :focus-visible {
  outline-color: var(--red);
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  padding: 10px 18px;
  background: var(--ivory);
  color: var(--ink);
  font-size: 14px;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: none;
}

.br-sp {
  display: none;
}

.nw {
  display: inline-block;
}

@media (max-width: 767px) {
  .br-sp {
    display: inline;
  }
}

/* 3. Typography ------------------------------------------------------------ */
.section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  color: var(--gold-light);
}

.section-label .num {
  font-family: var(--font-en);
  font-size: 19px;
  font-style: italic;
  line-height: 1;
}

.section-label .en {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3em;
  line-height: 1;
  text-transform: uppercase;
}

.section-label .en::before {
  content: "";
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.section-title {
  font-family: var(--font-mincho);
  font-size: clamp(27px, 3.1vw, 44px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.06em;
  font-feature-settings: "palt" 1;
}

.section-lead {
  color: var(--text-soft);
  font-size: 15.5px;
  line-height: 2.05;
}

.section-lead p + p {
  margin-top: 1em;
}

.section-head {
  margin-bottom: clamp(48px, 6vw, 88px);
}

.section-head--split {
  display: grid;
  gap: 28px;
}

.section-head--center {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.section-head--center .section-label {
  justify-content: center;
}

.section-head--center .section-lead {
  margin-top: 24px;
}

@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: end;
    gap: clamp(40px, 6vw, 110px);
  }
}

/* 4. Buttons & links ------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease);
}

.btn-large {
  min-height: 58px;
  padding: 16px 34px;
  font-size: 15px;
}

.btn-small {
  min-height: 40px;
  padding: 8px 18px;
  font-size: 13.5px;
}

.btn-primary {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 14px 34px -14px rgba(180, 20, 50, 0.8);
}

.btn-primary:hover {
  background: #c81a3a;
}

.btn-outline {
  border-color: var(--line-strong);
  color: var(--text);
}

.btn-outline:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
}

.btn-line {
  background: #06c755;
  color: #fff;
}

.btn-line:hover {
  background: #05b34c;
}

.btn-text {
  padding-inline: 6px;
  border-radius: 0;
  color: var(--text);
}

.btn-text:hover .arrow,
.text-link:hover .arrow {
  transform: translateX(4px);
}

.arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-gold);
  color: var(--gold-light);
  font-size: 14.5px;
  letter-spacing: 0.08em;
}

.text-link:hover {
  border-color: var(--gold-light);
}

/* 5. Layout ---------------------------------------------------------------- */
.shell {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.media-frame {
  overflow: hidden;
  height: 100%;
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 6. Header / nav ---------------------------------------------------------- */
/* The scrolled background lives on ::before so that backdrop-filter does not
   become the containing block of the fixed mobile menu. */
.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--header-h);
}

.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(5, 5, 6, 0.84);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.site-header.is-scrolled::before {
  opacity: 1;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
  padding-inline: clamp(18px, 3vw, 44px);
}

.brand {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line-gold);
  border-radius: 50%;
  color: var(--red);
  font-size: 15px;
  line-height: 1;
}

.brand-text {
  display: grid;
  line-height: 1;
}

.brand-name {
  font-family: var(--font-en);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.brand-sub {
  margin-top: 5px;
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 30px);
}

.nav-list a {
  position: relative;
  display: grid;
  padding-block: 8px;
  color: var(--text-soft);
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: center;
  transition: color 0.2s ease;
}

.nav-en {
  color: var(--gold);
  font-family: var(--font-en);
  font-size: 10.5px;
  font-style: italic;
  letter-spacing: 0.14em;
}

.nav-list a:hover,
.nav-list a[aria-current] {
  color: var(--white);
}

.nav-list a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 16px;
  height: 1px;
  background: var(--red);
  opacity: 0;
  transform: translateX(-50%) scaleX(0);
  transition: opacity 0.3s ease, transform 0.3s var(--ease);
}

.nav-list a[aria-current]::after,
.nav-list a:hover::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.nav-only-menu,
.nav-menu-foot {
  display: none;
}

.header-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
}

.icon-link {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: var(--text-soft);
  transition: color 0.2s ease;
}

.icon-link:hover {
  color: var(--gold-light);
}

.icon-link svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.icon-link svg .fill {
  fill: currentColor;
  stroke: none;
}

.header-cta {
  min-height: 44px;
  padding: 10px 22px;
  font-size: 13.5px;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 4px 0 10px;
  background: none;
  border: 0;
}

.nav-toggle-lines {
  display: grid;
  gap: 7px;
  width: 26px;
}

.nav-toggle-lines span {
  display: block;
  height: 1px;
  background: var(--text);
  transition: transform 0.35s var(--ease);
}

.nav-toggle-text {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

body.nav-open .nav-toggle-lines span:first-child {
  transform: translateY(4px) rotate(22deg);
}

body.nav-open .nav-toggle-lines span:last-child {
  transform: translateY(-4px) rotate(-22deg);
}

@media (max-width: 1099px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    z-index: 1;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: calc(var(--header-h) + 28px) var(--gutter) calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(105, 11, 32, 0.45), transparent 60%),
      var(--black);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }

  body.nav-open .nav {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease;
  }

  .nav-list {
    display: grid;
    gap: 0;
  }

  .nav-only-menu {
    display: block;
  }

  .nav-list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-family: var(--font-mincho);
    font-size: 19px;
    text-align: left;
  }

  .nav-list a::after {
    display: none;
  }

  .nav-en {
    order: 2;
    font-size: 13px;
  }

  .nav-menu-foot {
    display: grid;
    gap: 12px;
  }
}

@media (max-width: 767px) {
  .header-cta,
  .header-actions .icon-link {
    display: none;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .brand-name {
    font-size: 22px;
  }

  .brand-sub {
    font-size: 9.5px;
    letter-spacing: 0.1em;
  }
}

/* 7. Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: max(100svh, 640px);
  overflow: hidden;
  background: var(--black);
}

.hero-visual {
  position: absolute;
  inset: 0 0 0 auto;
  width: 70%;
  overflow: hidden;
}

.hero-media,
.hero-media img,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media img {
  object-fit: cover;
  object-position: 62% 45%;
  animation: hero-settle 9s var(--ease-slow) both;
}

.hero-video {
  object-fit: cover;
  object-position: 50% 30%;
  background: var(--black);
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero.has-video .hero-video {
  opacity: 1;
}

.hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--black) 0%, rgba(5, 5, 6, 0.86) 12%, rgba(5, 5, 6, 0.4) 30%, rgba(5, 5, 6, 0) 50%),
    linear-gradient(0deg, rgba(5, 5, 6, 0.92) 0%, rgba(5, 5, 6, 0.4) 18%, rgba(5, 5, 6, 0) 34%),
    linear-gradient(180deg, rgba(5, 5, 6, 0.55) 0%, rgba(5, 5, 6, 0) 18%);
}

.hero-content {
  position: relative;
  z-index: 2;
  align-self: center;
  width: min(46%, 620px);
  margin-left: max(var(--gutter), calc((100vw - var(--shell)) / 2));
  padding-block: calc(var(--header-h) + 48px) 170px;
}

.hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  color: var(--gold-light);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.hero-eyebrow .rule {
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.hero-title {
  display: grid;
  gap: 6px;
  font-weight: 400;
}

.hero-title-sub {
  font-family: var(--font-mincho);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.5;
}

.hero-title-main {
  margin-left: -0.04em;
  font-family: var(--font-en);
  font-size: clamp(84px, 10.5vw, 168px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 0.95;
  background: linear-gradient(180deg, var(--white) 30%, #e8dcc4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-copy {
  margin-top: 30px;
  font-family: var(--font-mincho);
  font-size: clamp(19px, 1.75vw, 25px);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.7;
}

.hero-lead {
  max-width: 30em;
  margin-top: 18px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 2;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 38px;
}

.hero-facts {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin: 0 auto 30px;
  border-top: 1px solid var(--line-strong);
}

.hero-facts > div {
  padding: 18px 20px 0 0;
}

.hero-facts > div + div {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.hero-facts dt {
  color: var(--gold);
  font-size: 11.5px;
  letter-spacing: 0.16em;
}

.hero-facts dd {
  margin-top: 4px;
  font-family: var(--font-mincho);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.hero-video-controls {
  position: absolute;
  z-index: 4;
  right: clamp(18px, 3vw, 44px);
  bottom: 128px;
  display: flex;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.hero.video-available .hero-video-controls {
  opacity: 1;
  pointer-events: auto;
}

.media-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(5, 5, 6, 0.5);
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.08em;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.media-btn:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
}

.media-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#heroPlayToggle .icon-play,
#heroPlayToggle[data-state="paused"] .icon-pause {
  display: none;
}

#heroPlayToggle[data-state="paused"] .icon-play {
  display: block;
}

#heroSoundToggle .sound-wave,
#heroSoundToggle[aria-pressed="true"] .sound-slash {
  display: none;
}

#heroSoundToggle[aria-pressed="true"] .sound-wave {
  display: block;
}

#heroSoundToggle[aria-pressed="true"] {
  border-color: var(--gold-light);
  color: var(--gold-light);
}

@keyframes hero-settle {
  from {
    transform: scale(1.07);
  }
  to {
    transform: scale(1);
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .hero-visual {
    width: 78%;
  }

  .hero-content {
    width: min(50%, 470px);
  }

  .hero-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-facts > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .hero-facts > div:nth-child(n + 3) {
    padding-top: 12px;
  }

  .hero-content {
    padding-bottom: 220px;
  }

  .hero-video-controls {
    bottom: 196px;
  }
}

/* Portrait tablets: the frame is tall, so the face would sit behind the copy.
   Stack the copy below the video as on phones. */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  .hero {
    display: block;
    min-height: 0;
  }

  .hero-visual {
    position: relative;
    width: 100%;
    height: min(62svh, 820px);
  }

  .hero-media img {
    object-position: 50% 18%;
  }

  .hero-video {
    object-position: 50% 26%;
  }

  .hero-shade {
    background:
      linear-gradient(180deg, rgba(5, 5, 6, 0.6) 0%, rgba(5, 5, 6, 0) 20%),
      linear-gradient(0deg, var(--black) 0%, rgba(5, 5, 6, 0.7) 14%, rgba(5, 5, 6, 0) 36%);
  }

  .hero-content {
    width: auto;
    max-width: 680px;
    margin: -90px var(--gutter) 0;
    padding: 0;
  }

  .hero-facts {
    position: static;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: auto;
    margin: 56px var(--gutter) 0;
    padding-bottom: 24px;
  }

  .hero-facts > div:nth-child(3) {
    padding-left: 22px;
    border-left: 1px solid var(--line);
  }

  .hero-facts > div:nth-child(n + 3) {
    padding-top: 18px;
  }

  .hero-video-controls {
    top: calc(var(--header-h) + 16px);
    bottom: auto;
  }
}

@media (max-width: 767px) {
  .hero {
    display: block;
    min-height: 0;
  }

  .hero-visual {
    position: relative;
    width: 100%;
    height: min(62svh, 560px);
    min-height: 400px;
  }

  .hero-media img {
    object-position: 50% 18%;
  }

  .hero-video {
    object-position: 50% 26%;
  }

  .hero-shade {
    background:
      linear-gradient(180deg, rgba(5, 5, 6, 0.6) 0%, rgba(5, 5, 6, 0) 22%),
      linear-gradient(0deg, var(--black) 0%, rgba(5, 5, 6, 0.75) 16%, rgba(5, 5, 6, 0) 42%);
  }

  .hero-content {
    width: auto;
    margin: -120px var(--gutter) 0;
    padding: 0;
  }

  .hero-eyebrow {
    margin-bottom: 16px;
    font-size: 11.5px;
    letter-spacing: 0.24em;
  }

  .hero-title-sub {
    font-size: 16px;
    letter-spacing: 0.18em;
  }

  .hero-title-main {
    font-size: clamp(64px, 21vw, 88px);
  }

  .hero-copy {
    margin-top: 20px;
    font-size: 18px;
    letter-spacing: 0.08em;
  }

  .hero-lead {
    font-size: 14.5px;
  }

  .hero-actions {
    margin-top: 28px;
  }

  .hero-actions .btn-primary {
    width: 100%;
  }

  .hero-facts {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
    margin: 40px var(--gutter) 0;
  }

  .hero-facts > div {
    padding: 14px 10px 14px 0;
  }

  .hero-facts > div + div {
    padding-left: 0;
    border-left: 0;
  }

  .hero-facts > div:nth-child(even) {
    padding-left: 16px;
    border-left: 1px solid var(--line);
  }

  .hero-facts > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .hero-facts dt {
    font-size: 10.5px;
    letter-spacing: 0.1em;
  }

  .hero-facts dd {
    font-size: 15px;
  }

  .hero-video-controls {
    top: calc(var(--header-h) + 12px);
    right: 12px;
    bottom: auto;
    gap: 8px;
  }

  .media-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    justify-content: center;
    padding: 0;
  }

  .media-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 359px) {
  .hero-facts dd {
    font-size: 13.5px;
  }

  /* Keep the menu button fully on screen on the narrowest phones. */
  .header-inner {
    gap: 12px;
    padding-inline: 14px;
  }

  .nav-toggle-text {
    display: none;
  }
}

/* 8. Profile --------------------------------------------------------------- */
.profile {
  padding-top: calc(var(--section-y) * 0.9);
  background:
    radial-gradient(60% 50% at 85% 20%, rgba(105, 11, 32, 0.2), transparent 70%),
    var(--black);
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(48px, 7vw, 120px);
  padding-right: max(var(--gutter), calc((100vw - var(--shell)) / 2));
}

.profile-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 92vh;
}

.profile-photo img {
  object-position: 50% 35%;
}

.profile-photo-note {
  position: absolute;
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(20px, 3vw, 40px);
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.note-en {
  color: var(--gold-light);
  font-family: var(--font-en);
  font-size: clamp(30px, 3.2vw, 46px);
  font-style: italic;
  line-height: 1;
}

.note-jp {
  font-family: var(--font-mincho);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.profile-statement {
  margin-top: 30px;
  padding-left: 22px;
  border-left: 1px solid var(--red);
  font-family: var(--font-mincho);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.85;
}

.profile-text {
  max-width: 38em;
  margin-top: 32px;
  color: var(--text-soft);
}

/* The source photos are 1080px wide; keep the banner from stretching past ~1.3x. */
@media (min-width: 1441px) {
  .scene-banner::after {
    background:
      linear-gradient(90deg, rgba(5, 5, 6, 0.88) 0%, rgba(5, 5, 6, 0.6) 26%, rgba(5, 5, 6, 0) 50%),
      linear-gradient(270deg, var(--black) 0%, rgba(5, 5, 6, 0) 10%),
      linear-gradient(180deg, var(--black) 0%, rgba(5, 5, 6, 0) 14%, rgba(5, 5, 6, 0) 86%, var(--black) 100%);
  }
}

.profile-text p + p {
  margin-top: 1.1em;
}

.profile-data {
  margin-top: 40px;
  border-top: 1px solid var(--line);
}

.profile-data > div {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.75;
}

.profile-data dt {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.1em;
}

.profile-honors,
.record-honors {
  margin-top: 40px;
}

.record-honors {
  margin-top: clamp(80px, 11vw, 160px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.honors-title {
  margin-bottom: 14px;
  color: var(--text-faint);
  font-size: 13px;
  letter-spacing: 0.14em;
}

.honors-list {
  display: grid;
  gap: 10px;
}

.record-honors .honors-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 14px;
}

.honors-list li {
  display: grid;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid var(--line-gold);
  border-left: 3px solid var(--gold);
  background: linear-gradient(90deg, rgba(183, 149, 88, 0.08), transparent 70%);
}

.honor-en {
  color: var(--gold);
  font-family: var(--font-en);
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.14em;
}

.honor-jp {
  font-family: var(--font-mincho);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.6;
  word-break: auto-phrase;
}

.profile-body .text-link {
  margin-top: 36px;
}

@media (max-width: 899px) {
  .profile-grid {
    grid-template-columns: 1fr;
    padding-right: 0;
  }

  .profile-photo {
    width: calc(100% - var(--gutter));
    max-height: none;
  }

  .profile-body {
    padding-inline: var(--gutter);
  }
}

@media (max-width: 767px) {
  .profile-data > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* 9. Scene ----------------------------------------------------------------- */
.scene {
  padding-top: calc(var(--section-y) * 0.55);
  background: var(--black);
}

.scene-feature {
  position: relative;
  display: grid;
  max-width: 1500px;
  margin-inline: auto;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  margin-bottom: clamp(88px, 10vw, 150px);
}

.scene-feature-media {
  grid-row: 1;
  aspect-ratio: 16 / 10;
}

.scene-feature-text {
  position: relative;
  z-index: 2;
  grid-row: 1;
  margin-bottom: clamp(-64px, -4vw, -32px);
  padding: clamp(32px, 3.6vw, 56px);
  background: var(--black-warm);
  border-top: 1px solid var(--red);
}

.scene-feature--corporate .scene-feature-media {
  grid-column: 1 / 9;
}

.scene-feature--corporate .scene-feature-media img {
  object-position: 40% 50%;
}

.scene-feature--corporate .scene-feature-text {
  grid-column: 8 / 12;
}

.scene-feature--wedding .scene-feature-media {
  grid-column: 5 / 13;
}

.scene-feature--wedding .scene-feature-media img {
  object-position: 50% 30%;
}

.scene-feature--wedding .scene-feature-text {
  grid-column: 2 / 6;
}

.scene-index {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--gold);
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.scene-index span {
  color: var(--gold-light);
  font-size: 22px;
  font-style: italic;
  letter-spacing: 0;
}

.scene-feature h3,
.scene-banner h3 {
  font-family: var(--font-mincho);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.scene-feature-text > p:last-child,
.scene-banner-text > p:last-child {
  margin-top: 16px;
  color: var(--text-soft);
  font-size: 15px;
}

.scene-banner {
  position: relative;
  display: grid;
  max-width: 1440px;
  min-height: clamp(520px, 72vh, 760px);
  margin: clamp(40px, 6vw, 80px) auto 0;
}

.scene-banner-media {
  position: absolute;
  inset: 0;
}

.scene-banner-media img {
  object-position: 55% 40%;
}

.scene-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 5, 6, 0.88) 0%, rgba(5, 5, 6, 0.6) 26%, rgba(5, 5, 6, 0) 50%),
    linear-gradient(180deg, var(--black) 0%, rgba(5, 5, 6, 0) 14%, rgba(5, 5, 6, 0) 86%, var(--black) 100%);
}

.scene-banner-text {
  position: relative;
  z-index: 2;
  align-self: center;
  width: min(420px, 38%);
  margin-left: max(var(--gutter), calc((min(100vw, 1440px) - var(--shell)) / 2));
}

.scene-banner-text > p:last-child {
  color: rgba(246, 240, 229, 0.86);
}

.scene-more {
  display: grid;
  gap: 18px;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.scene-more-title {
  color: var(--text-faint);
  font-size: 13px;
  letter-spacing: 0.14em;
}

.scene-more-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.scene-more-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mincho);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.scene-more-list a:hover {
  color: var(--gold-light);
  border-color: var(--line-gold);
}

.scene-more-list a:hover .arrow {
  transform: translateX(4px);
}

.scene-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scene-tags li {
  padding: 8px 16px;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .scene-more {
    grid-template-columns: 12em minmax(0, 1fr);
    align-items: center;
  }
}

@media (max-width: 899px) {
  .scene-feature {
    display: block;
    margin-bottom: 72px;
  }

  .scene-feature-media {
    width: calc(100% - var(--gutter));
  }

  .scene-feature--wedding .scene-feature-media {
    margin-left: auto;
  }

  .scene-feature-text {
    width: calc(100% - var(--gutter) * 2);
    margin: -48px 0 0 auto;
    padding: 28px 24px 30px;
  }

  .scene-feature--wedding .scene-feature-text {
    margin-left: var(--gutter);
  }

  .scene-banner {
    display: block;
    min-height: 0;
    margin-top: 0;
  }

  .scene-banner-media {
    position: relative;
    aspect-ratio: 4 / 3;
  }

  .scene-banner::after {
    display: none;
  }

  .scene-banner-text {
    width: auto;
    margin: 28px var(--gutter) 0;
  }

  .scene-more-list {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* 10. Performance ---------------------------------------------------------- */
.performance {
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(105, 11, 32, 0.55), transparent 70%),
    linear-gradient(180deg, var(--black) 0%, var(--black-warm) 100%);
}

.performance::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: clamp(48px, 6vw, 88px);
  background: linear-gradient(180deg, transparent, var(--gold));
}

.performance-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold);
}

.performance-item {
  padding: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 44px) clamp(40px, 4vw, 60px);
}

.performance-item + .performance-item {
  border-left: 1px solid var(--line);
}

.performance-visual {
  width: clamp(80px, 7vw, 100px);
  margin-bottom: 26px;
}

.performance-num {
  margin-right: 12px;
  color: var(--gold-light);
  font-size: 18px;
  letter-spacing: 0.08em;
}

.performance-en {
  color: var(--gold);
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.performance-item h3 {
  margin-top: 6px;
  font-family: var(--font-mincho);
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.performance-item > p:last-child {
  margin-top: 18px;
  color: var(--text-soft);
  font-size: 15px;
}

.performance-note {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  max-width: 640px;
  margin: 44px auto 0;
  color: var(--text-soft);
  font-size: 15px;
  text-align: center;
}

.performance-note-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-light);
  font-family: var(--font-en);
  font-size: 16px;
  font-style: italic;
  letter-spacing: 0.12em;
}

@media (max-width: 899px) {
  .performance-list {
    grid-template-columns: 1fr;
  }

  .performance-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 18px;
    padding: 32px 0;
  }

  .performance-item + .performance-item {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .performance-visual {
    grid-row: span 3;
    width: 72px;
    margin: 0;
  }

  .performance-note {
    justify-content: flex-start;
    text-align: left;
  }
}

/* 11. Works (top page) ----------------------------------------------------- */
.works {
  background: var(--black);
}

.works-stage {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: clamp(36px, 5vw, 80px);
}

.works-visual {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.works-visual-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--black-warm);
}

.works-visual-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.8s ease, transform 2.4s var(--ease-slow);
}

.works-visual-frame img.is-active {
  opacity: 1;
  transform: scale(1);
}

.works-visual-frame img[data-work-image="corporate"] {
  object-position: 82% 50%;
}

.works-visual-frame img[data-work-image="home-party"] {
  object-position: 50% 38%;
}

.works-visual-frame img[data-work-image="banquet"] {
  object-position: 50% 50%;
}

.works-visual-frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(5, 5, 6, 0.78), rgba(5, 5, 6, 0));
}

.works-caption {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 2.4vw, 32px);
  bottom: clamp(16px, 2vw, 26px);
  display: grid;
  gap: 2px;
}

.works-caption-en {
  color: var(--gold-light);
  font-family: var(--font-en);
  font-size: 15px;
  font-style: italic;
  letter-spacing: 0.12em;
}

.works-caption-jp {
  font-family: var(--font-mincho);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.works-list {
  border-top: 1px solid var(--line);
}

.work-item {
  border-bottom: 1px solid var(--line);
}

.work-heading {
  font-weight: inherit;
}

.work-trigger {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: 0;
  text-align: left;
  transition: color 0.2s ease;
}

.work-num {
  color: var(--gold);
  font-family: var(--font-en);
  font-size: 16px;
  font-style: italic;
}

.work-name {
  word-break: auto-phrase;
  font-family: var(--font-mincho);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.work-en {
  color: var(--text-faint);
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.work-icon {
  position: relative;
  width: 14px;
  height: 14px;
  justify-self: end;
}

.work-icon::before,
.work-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}

.work-icon::after {
  transform: rotate(90deg);
}

.work-trigger[aria-expanded="true"] .work-icon::after {
  transform: rotate(0deg);
}

/* The list column is narrowest beside the photo; drop the English label there. */
@media (min-width: 900px) and (max-width: 1199px) {
  .work-trigger {
    grid-template-columns: 34px minmax(0, 1fr) 22px;
  }

  .work-en {
    display: none;
  }
}

.work-trigger[aria-expanded="true"] .work-name,
.work-trigger:hover .work-name {
  color: var(--gold-light);
}

.work-panel {
  padding: 0 0 24px 48px;
  color: var(--text-soft);
  font-size: 14.5px;
  animation: panel-in 0.5s var(--ease) both;
}

.works-more {
  margin-top: 36px;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (max-width: 899px) {
  .works-stage {
    grid-template-columns: 1fr;
  }

  .works-visual {
    position: relative;
    top: auto;
  }

  .works-more {
    width: 100%;
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .works-visual {
    margin-inline: calc(var(--gutter) * -1);
  }

  .work-trigger {
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    padding: 18px 0;
  }

  .work-en {
    display: none;
  }

  .work-panel {
    padding-left: 44px;
  }
}

/* 12. Price ---------------------------------------------------------------- */
.price {
  background:
    linear-gradient(115deg, rgba(105, 11, 32, 0.35) 0%, rgba(105, 11, 32, 0) 45%),
    var(--black-warm);
  border-top: 1px solid var(--line);
}

.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 110px);
  align-items: start;
}

.price-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line-gold);
}

.price-amount {
  font-family: var(--font-en);
  font-size: clamp(72px, 9vw, 132px);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 0.95;
}

.price-unit {
  color: var(--gold-light);
  font-family: var(--font-mincho);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.price-text {
  margin-top: 28px;
  max-width: 36em;
  color: var(--text-soft);
}

.price-factors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.price-factors li {
  padding: 6px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.6;
}

.price-body .text-link {
  margin-top: 36px;
}

.price-visual {
  width: clamp(150px, 15vw, 210px);
  margin-top: clamp(28px, 4vw, 52px);
}

@media (max-width: 899px) {
  .price-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .price-visual {
    width: 140px;
    margin: 20px 0 16px;
  }
}

/* 13. Animated icons --------------------------------------------------------
   Original inline SVGs. Each drawing is complete without motion; the loop runs
   only while the icon is on screen (main.js adds .is-playing) and never under
   prefers-reduced-motion. */
.ico {
  --l: var(--gold-light);
  --g: var(--gold);
  --r: var(--red);
  --p: var(--ivory);
  --d: var(--black-raise);
  --dur: 4.8s;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.light-zone .ico {
  --l: var(--ink);
  --p: var(--white);
  --d: var(--ink);
}

.ico .s {
  fill: none;
  stroke: var(--l);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico .fg { fill: var(--g); }
.ico .fr { fill: var(--r); }
.ico .fp { fill: var(--p); }
.ico .fd { fill: var(--d); }
.ico .fl { fill: var(--l); }
.ico .fx { fill: var(--red-deep); }
.ico .red { stroke: var(--r); }
.ico .thin { stroke-width: 1.4; opacity: 0.55; }
.ico .thick { stroke-width: 4.2; }
.ico .dash { stroke-dasharray: 3 4; opacity: 0.6; }
.ico .wand { stroke-width: 4.5; }
.ico .wand-tip { stroke: var(--p); stroke-width: 5; }
.ico .shade { opacity: 0.16; }
.ico .dots { opacity: 0.35; }
.ico .beam { opacity: 0.3; }
.ico .lens { fill-opacity: 0.55; }
.ico .a-shine { fill: rgba(255, 253, 248, 0.2); transform: translateX(-40px) skewX(-18deg); }

.ico [class*="a-"] {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.ico [pathLength] { stroke-dasharray: 1 1; }

/* Resting states that differ from the drawing order */
.ico .a-back,
.ico .a-page,
.ico .a-ex { opacity: 0; }
.ico-mental .a-wave { opacity: 0; }
.ico-mental .a-wave:first-child { opacity: 0.3; transform: scale(1.3); }
.ico .a-wand { transform-origin: 0% 100%; }
.ico .a-left,
.ico .a-right,
.ico .a-c1,
.ico .a-c2,
.ico [class^="a-p"] { transform-origin: 50% 100%; }
.ico .a-c1 { transform: rotate(-18deg); }
.ico .a-c2 { transform: rotate(18deg); }
.ico .a-ticket { transform: rotate(-3deg); }
.ico .a-page,
.ico .a-beam { transform-origin: 50% 0%; }
.ico .a-cl { transform-origin: 0% 50%; }
.ico .a-cr { transform-origin: 100% 50%; }
.ico .a-bubble { transform-origin: 20% 100%; }

.ico-toast { --dur: 4.4s; }
.ico-mental { --dur: 5.2s; }
.ico-table,
.ico-tiny { --dur: 3.4s; }
.ico-price { --dur: 6s; }
.ico-people { --dur: 2.4s; }
.ico-spot,
.ico-scan { --dur: 4s; }
.ico-phone { --dur: 3.6s; }
.ico-faq { --dur: 5.6s; }

.ico.is-playing [class*="a-"] {
  animation-duration: var(--dur);
  animation-iteration-count: infinite;
  animation-timing-function: var(--ease);
}

/* Shared sparkle */
.ico.is-playing .a-spark { animation-name: k-spark; }
.ico.is-playing > :nth-child(3n) .a-spark { animation-delay: 0.18s; }
.ico.is-playing > :nth-child(3n + 1) .a-spark { animation-delay: 0.34s; }

/* Stage magic: wand taps, a card rises from the hat */
.ico-stage.is-playing .a-wand { animation-name: k-wand; }
.ico-stage.is-playing .a-card { animation-name: k-card; }

/* Mentalism: the card turns over to reveal the prediction */
.ico-mental.is-playing .a-flip { animation-name: k-flip; animation-timing-function: ease-in-out; }
.ico-mental.is-playing .a-back { animation-name: k-back; animation-timing-function: linear; }
.ico-mental.is-playing .a-face { animation-name: k-face; animation-timing-function: linear; }
.ico-mental.is-playing .a-wave { animation: k-wave 2.6s ease-out infinite; }
.ico-mental.is-playing .a-wave:nth-child(2) { animation-delay: 0.87s; }
.ico-mental.is-playing .a-wave:nth-child(3) { animation-delay: 1.74s; }

/* Corporate entertainment: a toast and confetti */
.ico-toast.is-playing .a-left { animation-name: k-left; }
.ico-toast.is-playing .a-right { animation-name: k-right; }
.ico-toast.is-playing .a-clink { animation-name: k-clink; }
.ico-toast.is-playing .a-conf { animation: k-conf 3.2s linear infinite; }
.ico-toast.is-playing .a-conf:nth-child(2) { animation-delay: -0.7s; }
.ico-toast.is-playing .a-conf:nth-child(3) { animation-delay: -1.4s; }
.ico-toast.is-playing .a-conf:nth-child(4) { animation-delay: -2.1s; }
.ico-toast.is-playing .a-conf:nth-child(5) { animation-delay: -2.7s; }

/* Table: cards fan out */
.ico-table.is-playing .a-c1 { animation-name: k-c1; }
.ico-table.is-playing .a-c2 { animation-name: k-c2; }

/* Price: a show ticket */
.ico-price.is-playing .a-ticket { animation-name: k-ticket; animation-timing-function: ease-in-out; }
.ico-price.is-playing .a-line { animation-name: k-draw; }
.ico-price.is-playing .a-line:nth-of-type(4) { animation-delay: 0.15s; }
.ico-price.is-playing .a-line:nth-of-type(5) { animation-delay: 0.3s; }
.ico-price.is-playing .a-star { animation: k-spin 9s linear infinite; }
.ico-price.is-playing .a-shine { animation-name: k-shine; animation-timing-function: ease-in-out; }

/* Guide */
.ico-cal.is-playing .a-page { animation-name: k-page; animation-timing-function: ease-in-out; }
.ico-cal.is-playing .a-mark { animation-name: k-mark; }
.ico-people.is-playing [class^="a-p"] { animation-name: k-hop; }
.ico-people.is-playing .a-p2 { animation-delay: 0.22s; }
.ico-people.is-playing .a-p3 { animation-delay: 0.44s; }
.ico-spot.is-playing .a-beam { animation-name: k-beam; animation-timing-function: ease-in-out; }
.ico-spot.is-playing .a-star { animation-name: k-twinkle; animation-timing-function: ease-in-out; }
.ico-check.is-playing .a-tick { animation-name: k-tick; }
.ico-check.is-playing .a-tick:nth-child(7) { animation-delay: 0.45s; }
.ico-check.is-playing .a-tick:nth-child(10) { animation-delay: 0.9s; }

/* Flow */
.ico-phone.is-playing .a-bubble { animation-name: k-bubble; }
.ico-phone.is-playing .a-dot { animation: k-blink 1s ease-in-out infinite; }
.ico-phone.is-playing .a-dot:nth-child(2) { animation-delay: 0.15s; }
.ico-phone.is-playing .a-dot:nth-child(3) { animation-delay: 0.3s; }
.ico-scan.is-playing .a-lens { animation-name: k-lens; animation-timing-function: ease-in-out; }
.ico-env.is-playing .a-letter { animation-name: k-letter; }
.ico-curtain.is-playing .a-cl,
.ico-curtain.is-playing .a-cr { animation-name: k-curtain; animation-timing-function: ease-in-out; }
.ico-curtain.is-playing .a-cstar { animation-name: k-pop; }

/* FAQ: a question rises from the hat and turns into an answer */
.ico-faq.is-playing .a-mark { animation-name: k-rise; }
.ico-faq.is-playing .a-q { animation-name: k-q; animation-timing-function: linear; }
.ico-faq.is-playing .a-ex { animation-name: k-ex; animation-timing-function: linear; }

/* Contact steps */
.ico-form.is-playing .a-type { animation-name: k-draw; }
.ico-form.is-playing .a-type + .a-type { animation-delay: 0.4s; }
.ico-form.is-playing .a-caret { animation: k-blink 1s steps(2, jump-none) infinite; }
.ico-copy.is-playing .a-sheet { animation-name: k-sheet; }
.ico-send.is-playing .a-plane { animation-name: k-plane; }
.ico-send.is-playing .a-trail { animation-name: k-draw; }

@keyframes k-spark {
  0%, 32% { opacity: 0; transform: scale(0) rotate(0deg); }
  42% { opacity: 1; transform: scale(1.25) rotate(30deg); }
  58% { opacity: 1; transform: scale(1) rotate(45deg); }
  72%, 100% { opacity: 0; transform: scale(0) rotate(60deg); }
}
@keyframes k-wand {
  0%, 4% { transform: rotate(0deg); }
  9% { transform: rotate(-16deg); }
  14% { transform: rotate(10deg); }
  20%, 100% { transform: rotate(0deg); }
}
@keyframes k-card {
  0%, 14% { transform: translateY(31px); }
  34% { transform: translateY(-3px); }
  40%, 80% { transform: none; }
  94%, 100% { transform: translateY(31px); }
}
@keyframes k-flip {
  0% { transform: scaleX(1); }
  8% { transform: scaleX(0); }
  16%, 52% { transform: scaleX(1); }
  60% { transform: scaleX(0); }
  68%, 100% { transform: scaleX(1); }
}
@keyframes k-back {
  0%, 7.9% { opacity: 0; }
  8%, 59.9% { opacity: 1; }
  60%, 100% { opacity: 0; }
}
@keyframes k-face {
  0%, 7.9% { opacity: 1; }
  8%, 59.9% { opacity: 0; }
  60%, 100% { opacity: 1; }
}
@keyframes k-wave {
  0% { opacity: 0; transform: scale(0.7); }
  20% { opacity: 0.55; }
  100% { opacity: 0; transform: scale(1.9); }
}
@keyframes k-left {
  0%, 8% { transform: rotate(0deg); }
  22% { transform: rotate(6.5deg); }
  26% { transform: rotate(4.5deg); }
  30% { transform: rotate(6.5deg); }
  50%, 100% { transform: rotate(0deg); }
}
@keyframes k-right {
  0%, 8% { transform: rotate(0deg); }
  22% { transform: rotate(-6.5deg); }
  26% { transform: rotate(-4.5deg); }
  30% { transform: rotate(-6.5deg); }
  50%, 100% { transform: rotate(0deg); }
}
@keyframes k-clink {
  0%, 21% { opacity: 0; transform: scale(0); }
  28% { opacity: 1; transform: scale(1.3) rotate(20deg); }
  44% { opacity: 1; transform: scale(1) rotate(40deg); }
  56%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes k-conf {
  0% { opacity: 0; transform: translateY(-6px) rotate(0deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(58px) rotate(320deg); }
}
@keyframes k-c1 {
  0%, 15% { transform: rotate(0deg); }
  40%, 80% { transform: rotate(-18deg); }
  100% { transform: rotate(0deg); }
}
@keyframes k-c2 {
  0%, 15% { transform: rotate(0deg); }
  40%, 80% { transform: rotate(18deg); }
  100% { transform: rotate(0deg); }
}
@keyframes k-ticket {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(-1deg); }
}
@keyframes k-draw {
  0%, 10% { stroke-dashoffset: 1; }
  32%, 85% { stroke-dashoffset: 0; }
  95%, 100% { stroke-dashoffset: 1; }
}
@keyframes k-spin {
  to { transform: rotate(360deg); }
}
@keyframes k-shine {
  0%, 55% { transform: translateX(-40px) skewX(-18deg); }
  85%, 100% { transform: translateX(170px) skewX(-18deg); }
}
@keyframes k-page {
  0% { opacity: 1; transform: scaleY(1); }
  20% { opacity: 1; transform: scaleY(0); }
  20.1%, 86% { opacity: 0; transform: scaleY(0); }
  86.1% { opacity: 1; transform: scaleY(0); }
  100% { opacity: 1; transform: scaleY(1); }
}
@keyframes k-mark {
  0%, 24% { stroke-dashoffset: 1; }
  44%, 86% { stroke-dashoffset: 0; }
  87%, 100% { stroke-dashoffset: 1; }
}
@keyframes k-hop {
  0%, 34%, 100% { transform: none; }
  16% { transform: translateY(-6px); }
}
@keyframes k-beam {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(18deg); }
}
@keyframes k-twinkle {
  0%, 15%, 35%, 65%, 85%, 100% { transform: scale(1); }
  25%, 75% { transform: scale(1.2); }
}
@keyframes k-tick {
  0%, 8% { stroke-dashoffset: 1; }
  22%, 85% { stroke-dashoffset: 0; }
  95%, 100% { stroke-dashoffset: 1; }
}
@keyframes k-bubble {
  0%, 6% { opacity: 0; transform: scale(0.4); }
  16% { opacity: 1; transform: scale(1.06); }
  22%, 86% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: scale(0.9); }
}
@keyframes k-blink {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@keyframes k-lens {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-14px, -18px); }
  50% { transform: translate(-4px, -26px); }
  75% { transform: translate(-16px, -6px); }
}
@keyframes k-letter {
  0%, 10% { transform: translateY(13px); }
  34% { transform: translateY(-3px); }
  40%, 82% { transform: none; }
  96%, 100% { transform: translateY(13px); }
}
@keyframes k-curtain {
  0%, 12% { transform: scaleX(1.62); }
  34%, 80% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(1.62); }
}
@keyframes k-pop {
  0%, 30% { opacity: 0; transform: scale(0) rotate(-30deg); }
  42% { opacity: 1; transform: scale(1.2) rotate(10deg); }
  50%, 80% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes k-rise {
  0%, 8% { opacity: 0; transform: translateY(30px); }
  26% { opacity: 1; transform: translateY(-4px); }
  32%, 84% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(30px); }
}
@keyframes k-q {
  0%, 52% { opacity: 1; }
  53%, 100% { opacity: 0; }
}
@keyframes k-ex {
  0%, 52% { opacity: 0; }
  53%, 100% { opacity: 1; }
}
@keyframes k-sheet {
  0%, 10% { transform: translate(-7px, -5px); }
  35%, 85% { transform: none; }
  100% { transform: translate(-7px, -5px); }
}
@keyframes k-plane {
  0% { opacity: 0; transform: translate(-6px, 6px); }
  15% { opacity: 1; }
  55%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate(8px, -8px); }
}

/* Where the icons sit */
.step-icon {
  display: grid;
  width: 68px;
  height: 68px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 50%;
  background: rgba(180, 20, 50, 0.07);
}

.step-icon .ico {
  width: 50px;
}

.flow-list .step-icon {
  margin-bottom: 14px;
}

.ico-mini {
  width: 30px;
}

/* 14. Brand emblem & photo panels -------------------------------------------
   The emblem (spade + rotating ring) appears in the header, the footer and as
   faint "ghost" marks behind sections. Photo panels put a word on the photo
   only where the frame is ceiling or wall, never over faces, hands or cards. */
.svg-sprite {
  position: absolute;
  overflow: hidden;
}

.koki-emblem,
.koki-mini {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.koki-emblem .em-ring {
  fill: none;
  stroke: var(--line-gold);
  stroke-width: 1;
}

.koki-emblem .em-dash,
.koki-mini .em-dash {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-dasharray: 1.2 6.4;
  stroke-linecap: round;
}

.koki-emblem .em-text {
  fill: var(--gold-light);
  font-family: var(--font-en);
  font-size: 14.5px;
  font-weight: 600;
}

.koki-emblem .em-spade,
.koki-mini .em-spade {
  fill: var(--red);
  stroke: var(--gold-light);
  stroke-width: 1.6;
}

.koki-mini .em-spade {
  stroke-width: 2.4;
}

.em-sweep {
  fill: rgba(255, 238, 205, 0.55);
  transform: translateX(-80px) skewX(-18deg);
}

.em-star {
  fill: var(--gold-light);
}

.em-spin,
.em-spin-rev,
.em-core {
  transform-box: view-box;
  transform-origin: 100px 100px;
}

.em-star,
.em-sweep {
  transform-box: fill-box;
  transform-origin: center;
}

.koki-emblem.is-playing .em-spin,
.koki-mini .em-spin {
  animation: em-spin 46s linear infinite;
}

.koki-emblem.is-playing .em-spin-rev {
  animation: em-spin 80s linear infinite reverse;
}

.koki-emblem.is-playing .em-sweep,
.koki-mini .em-sweep {
  animation: em-sweep 6.5s var(--ease) infinite;
}

.koki-emblem.is-playing .em-core {
  animation: em-float 7s ease-in-out infinite;
}

.koki-emblem.is-playing .em-star {
  animation: em-twinkle 3.6s ease-in-out infinite;
}

.koki-emblem.is-playing .em-star--late {
  animation-delay: 1.8s;
}

.koki-mini .em-spin {
  animation-duration: 22s;
}

.brand:hover .koki-mini .em-core,
.brand:focus-visible .koki-mini .em-core {
  animation: em-flip 0.9s var(--ease);
}

@keyframes em-spin {
  to { transform: rotate(360deg); }
}

@keyframes em-sweep {
  0%, 62% { transform: translateX(-80px) skewX(-18deg); }
  88%, 100% { transform: translateX(110px) skewX(-18deg); }
}

@keyframes em-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes em-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.6) rotate(0); }
  50% { opacity: 1; transform: scale(1.15) rotate(45deg); }
}

@keyframes em-flip {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(-1); }
  100% { transform: scaleX(1); }
}

/* Header mark: the centre of the footer seal (gold ring + spade), so the
   header, footer, favicon and app icon all share one mark. */
.brand-mark {
  width: 38px;
  height: 38px;
  border: 0;
}

.koki-mini .em-ring {
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 6;
  opacity: 0.85;
}

/* Footer emblem */
.footer {
  position: relative;
}

.footer-emblem {
  width: clamp(112px, 11vw, 148px);
  margin-bottom: 22px;
}

/* Ghost marks behind sections. The section is its own stacking context, so
   z-index -1 sits above the section background and below its content. */
.has-marks {
  isolation: isolate;
}

.bg-marks {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-mark {
  position: absolute;
  width: clamp(300px, 44vw, 680px);
  color: var(--gold);
  opacity: 0.06;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

.bg-mark--r { top: 6%; right: clamp(-260px, -14vw, -90px); }
.bg-mark--l { top: 14%; left: clamp(-280px, -16vw, -100px); }
.bg-mark--rb { right: clamp(-220px, -12vw, -80px); bottom: -18%; }
.bg-mark--fr { top: -30%; right: clamp(-200px, -10vw, -60px); width: clamp(300px, 36vw, 520px); }

.koki-emblem--ghost .em-ring,
.koki-emblem--ghost .em-dash {
  stroke: currentColor;
}

.koki-emblem--ghost .em-text,
.koki-emblem--ghost .em-star {
  fill: currentColor;
}

.koki-emblem--ghost .em-spade {
  fill: currentColor;
  stroke: none;
}

.koki-emblem--ghost .em-sweep {
  display: none;
}

.koki-emblem--ghost.is-playing .em-spin {
  animation-duration: 120s;
}

.koki-emblem--ghost.is-playing .em-spin-rev {
  animation-duration: 160s;
}

.light-zone .bg-mark {
  color: var(--red-deep);
  opacity: 0.06;
}

/* Card suits drifting behind dark sections */
.bg-suits {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.suit {
  position: absolute;
  width: clamp(26px, 3vw, 46px);
  fill: var(--gold);
  opacity: 0.1;
}

.suit--s1 { top: 12%; left: 8%; }
.suit--s2 { top: 30%; right: 9%; width: clamp(20px, 2.2vw, 34px); fill: var(--red); opacity: 0.22; }
.suit--s3 { top: 64%; left: 4%; width: clamp(18px, 2vw, 30px); }
.suit--s4 { top: 80%; right: 18%; }
.suit--s5 { top: 48%; left: 46%; width: clamp(16px, 1.6vw, 24px); opacity: 0.08; }
.suit--s6 { top: 8%; right: 30%; width: clamp(16px, 1.6vw, 26px); fill: var(--red); opacity: 0.2; }

.bg-suits.is-playing .suit {
  animation: suit-drift 26s ease-in-out infinite alternate;
}

.bg-suits.is-playing .suit--s2 { animation-duration: 31s; animation-delay: -6s; }
.bg-suits.is-playing .suit--s3 { animation-duration: 23s; animation-delay: -11s; }
.bg-suits.is-playing .suit--s4 { animation-duration: 35s; animation-delay: -3s; }
.bg-suits.is-playing .suit--s5 { animation-duration: 29s; animation-delay: -15s; }
.bg-suits.is-playing .suit--s6 { animation-duration: 33s; animation-delay: -20s; }

@keyframes suit-drift {
  0% { transform: translate(0, 0) rotate(-10deg); }
  50% { transform: translate(18px, -34px) rotate(6deg); }
  100% { transform: translate(-14px, -70px) rotate(14deg); }
}

/* Photo ribbon (decorative): photos drift left, words drift right */
.photo-ribbon {
  overflow: hidden;
  padding-block: clamp(36px, 5vw, 64px);
  background: var(--black);
  border-top: 1px solid var(--line);
}

.ribbon-row {
  overflow: hidden;
}

.ribbon-track {
  display: flex;
  width: max-content;
}

.ribbon-row--photos .ribbon-track {
  gap: 14px;
  padding-right: 14px;
}

.ribbon-photo {
  overflow: hidden;
  width: clamp(220px, 24vw, 360px);
  height: clamp(150px, 16vw, 240px);
  flex-shrink: 0;
  border: 1px solid var(--line);
}

.ribbon-photo.is-tall {
  width: clamp(130px, 13vw, 190px);
}

.ribbon-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
  transition: filter 0.5s ease, transform 0.8s var(--ease);
}

.ribbon-row--photos:hover img {
  filter: saturate(1);
}

.ribbon-row--words {
  margin-top: clamp(20px, 2.6vw, 34px);
}

.ribbon-row--words .ribbon-track {
  align-items: center;
  gap: clamp(22px, 3vw, 44px);
  padding-right: clamp(22px, 3vw, 44px);
  font-family: var(--font-en);
  font-size: clamp(40px, 6.4vw, 96px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.1;
  white-space: nowrap;
}

.ribbon-row--words span {
  color: transparent;
  -webkit-text-stroke: 1px var(--line-gold);
}

.ribbon-row--words span:nth-of-type(3n + 1) {
  color: rgba(246, 240, 229, 0.9);
  -webkit-text-stroke: 0;
}

.ribbon-row--words i {
  color: var(--red);
  font-size: 0.4em;
  font-style: normal;
}

.photo-ribbon.is-playing .ribbon-row--photos .ribbon-track {
  animation: ribbon-left 70s linear infinite;
}

.photo-ribbon.is-playing .ribbon-row--words .ribbon-track {
  animation: ribbon-right 60s linear infinite;
}

.photo-ribbon:hover .ribbon-track {
  animation-play-state: paused;
}

@keyframes ribbon-left {
  to { transform: translateX(-50%); }
}

@keyframes ribbon-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* Words placed on photos */
.photo-word {
  position: absolute;
  z-index: 1;
  top: clamp(12px, 1.6vw, 22px);
  left: clamp(16px, 2vw, 28px);
  color: var(--ivory);
  font-family: var(--font-en);
  font-size: clamp(30px, 3.2vw, 48px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.photo-word::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  margin-top: 10px;
  background: var(--gold-light);
}

/* Performance cards */
.performance-list {
  gap: clamp(16px, 2vw, 28px);
  border: 0;
}

.performance-item {
  --pad: clamp(22px, 2.4vw, 36px);
  position: relative;
  padding: 0 var(--pad) clamp(32px, 3vw, 44px);
  background: rgba(255, 253, 248, 0.025);
  border: 1px solid var(--line);
  transition: border-color 0.4s ease, transform 0.6s var(--ease);
}

.performance-item + .performance-item {
  border-left: 1px solid var(--line);
}

.performance-item:hover {
  border-color: var(--line-gold);
  transform: translateY(-4px);
}

.performance-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0 calc(var(--pad) * -1);
}

.performance-photo .media-frame::after,
.price-photo .media-frame::after,
.side-photo .media-frame::after,
.faq-photo .media-frame::after,
.contact-photo .media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 6, 0.42) 0%, rgba(5, 5, 6, 0) 26%);
  pointer-events: none;
}

.performance-photo .media-frame,
.price-photo .media-frame,
.side-photo .media-frame,
.faq-photo .media-frame,
.contact-photo .media-frame {
  position: relative;
}

.performance-item:hover .performance-photo img {
  transform: scale(1.04);
}

.performance-photo img {
  transition: transform 1.2s var(--ease-slow);
}

.performance-visual {
  position: relative;
  z-index: 1;
  display: grid;
  width: 88px;
  height: 88px;
  margin: -44px 0 18px;
  padding: 12px;
  place-items: center;
  background: var(--black-warm);
  border: 1px solid var(--line-gold);
  border-radius: 50%;
}

/* Price */
.price-grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
}

.price-photo {
  position: relative;
  aspect-ratio: 4 / 5;
}

.price-photo .photo-word {
  font-size: clamp(36px, 4vw, 60px);
}

.price-visual {
  position: absolute;
  z-index: 1;
  right: clamp(-36px, -2.4vw, -16px);
  bottom: clamp(-36px, -2.4vw, -16px);
  width: clamp(130px, 13vw, 180px);
  margin: 0;
  padding: 8px 10px;
  background: var(--black-warm);
  border: 1px solid var(--line-gold);
}

.price-body .section-title {
  margin-bottom: clamp(26px, 3vw, 40px);
}

/* Guide / Flow: photo beside the content */
.side-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}

.side-layout--flip {
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}

.side-photo {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  aspect-ratio: 3 / 4;
}

/* hero.jpg holds a card at top left, so the word sits on the black at top right */
.side-photo--flow .photo-word {
  right: clamp(16px, 2vw, 28px);
  left: auto;
  text-align: right;
}

.side-photo--flow .photo-word::after {
  margin-left: auto;
}

/* FAQ / Contact photo cards */
.faq-photo,
.contact-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-top: clamp(28px, 3vw, 40px);
}

.faq .section-head {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  margin-bottom: 0;
}

.faq-visual {
  position: absolute;
  z-index: 1;
  right: -14px;
  bottom: -30px;
  width: clamp(92px, 8vw, 116px);
  margin: 0;
  padding: 6px 8px 2px;
  background: var(--ivory);
  border: 1px solid var(--line-ink);
  border-radius: 50%;
}

.contact-photo {
  margin-top: 36px;
}

@media (max-width: 1099px) {
  .side-layout,
  .side-layout--flip {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .side-layout--flip {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

@media (max-width: 899px) {
  .performance-list {
    gap: 22px;
  }

  .performance-item,
  .performance-item + .performance-item {
    display: block;
    padding: 0 var(--pad) 30px;
    border: 1px solid var(--line);
  }

  .performance-photo {
    aspect-ratio: 16 / 10;
  }

  .performance-visual {
    width: 78px;
    height: 78px;
    margin: -39px 0 14px;
  }

  .price-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .price-photo {
    aspect-ratio: 16 / 10;
    margin-right: 18px;
  }

  .price-photo img {
    object-position: 80% 40% !important;
  }

  .price-visual {
    right: -18px;
    bottom: -30px;
    width: 104px;
    padding: 4px 6px;
  }

  .side-layout,
  .side-layout--flip {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .side-photo {
    position: relative;
    top: auto;
    aspect-ratio: 16 / 9;
  }

  .side-layout--flip .side-photo {
    order: -1;
  }

  .side-photo--flow img {
    object-position: 50% 4% !important;
  }

  .side-photo--guide img {
    object-position: 50% 12% !important;
  }

  .faq .section-head {
    position: static;
    margin-bottom: 52px;
  }

  .faq-photo {
    aspect-ratio: 16 / 9;
    margin-right: 14px;
  }

  .faq-visual {
    width: 84px;
    right: -14px;
    bottom: -26px;
  }

  .contact-photo {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 599px) {
  .side-photo,
  .faq-photo,
  .contact-photo {
    aspect-ratio: 4 / 3;
  }

  .bg-mark {
    width: 320px;
    opacity: 0.06;
  }
}

/* 15. Light zone (Guide / Flow / FAQ) -------------------------------------- */
.light-zone {
  background: var(--ivory);
  color: var(--ink);
}

.light-zone .section-label {
  color: var(--red-deep);
}

.light-zone .section-lead {
  color: var(--ink-soft);
}

.light-zone .section + .section {
  padding-top: 0;
}

.guide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.guide-item {
  padding: 28px 24px 32px;
  background: var(--white);
  border-top: 2px solid var(--red);
  box-shadow: 0 24px 50px -38px rgba(27, 21, 23, 0.45);
}

.guide-en {
  color: var(--red-deep);
  font-family: var(--font-en);
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0.1em;
}

.guide-item h3 {
  margin-top: 6px;
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.guide-item > p:last-child {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.95;
}

.flow-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 36px;
  counter-reset: flow;
}

.flow-list li {
  position: relative;
  padding: 30px 28px 0 0;
  border-top: 1px solid var(--line-ink);
}

.flow-list li::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
}

.flow-step {
  color: var(--red-deep);
  font-family: var(--font-en);
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0.12em;
}

.flow-list h3 {
  margin-top: 6px;
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.flow-list p {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.95;
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(36px, 6vw, 110px);
  align-items: start;
}

.faq-list {
  border-top: 1px solid var(--line-ink);
}

.faq-list details {
  border-bottom: 1px solid var(--line-ink);
}

.faq-list summary {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 20px;
  align-items: baseline;
  gap: 12px;
  padding: 24px 0;
  cursor: pointer;
  font-family: var(--font-mincho);
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.7;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  justify-self: end;
  color: var(--red);
  font-family: var(--font-en);
  font-size: 24px;
  line-height: 1;
  transition: transform 0.3s var(--ease);
}

.faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.faq-q {
  color: var(--red);
  font-family: var(--font-en);
  font-size: 20px;
  font-style: italic;
}

.faq-list details p {
  max-width: calc(40em + 72px);
  padding: 0 32px 26px 40px;
  color: var(--ink-soft);
  font-size: 15px;
}

@media (max-width: 1099px) {
  .guide-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .flow-list {
    grid-template-columns: 1fr;
    border-left: 1px solid var(--line-ink);
    margin-left: 4px;
  }

  .flow-list li {
    padding: 0 0 32px 28px;
    border-top: 0;
  }

  .flow-list li::before {
    top: 8px;
    left: -5px;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .flow-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 32px;
    margin-left: 0;
    border-left: 0;
  }

  .flow-list li {
    padding: 30px 0 0;
    border-top: 1px solid var(--line-ink);
  }

  .flow-list li::before {
    top: -5px;
    left: 0;
  }
}

@media (max-width: 599px) {
  .guide-list {
    grid-template-columns: 1fr;
  }

  .faq-list details p {
    padding: 0 0 24px 40px;
  }
}

/* 16. Contact -------------------------------------------------------------- */
.contact {
  background:
    radial-gradient(60% 60% at 0% 0%, rgba(105, 11, 32, 0.5), transparent 70%),
    var(--black-warm);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.contact-copy > p {
  margin-top: 24px;
  color: var(--text-soft);
}

.contact-steps {
  display: grid;
  gap: 12px;
  margin-top: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.7;
}

.contact-steps li {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contact-steps span {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  place-items: center;
  border: 1px solid var(--line-gold);
  border-radius: 50%;
}

.contact-steps .ico {
  width: 26px;
}

.contact-channels {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}

.contact-form {
  padding: clamp(26px, 3.6vw, 48px);
  background: rgba(255, 253, 248, 0.035);
  border: 1px solid var(--line);
}

.form-help {
  padding: 14px 18px;
  border-left: 2px solid var(--gold);
  background: rgba(217, 189, 123, 0.07);
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.85;
}

.form-help strong {
  color: var(--text);
  font-weight: 700;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 20px;
  margin-top: 28px;
}

.field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.field-wide {
  grid-column: 1 / -1;
}

.field label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.req,
.opt {
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.req {
  background: var(--red);
  color: var(--white);
}

.opt {
  border: 1px solid var(--line-strong);
  color: var(--text-faint);
}

.field input,
.field select,
.field textarea,
.manual-copy textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: rgba(5, 5, 6, 0.55);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.field textarea,
.manual-copy textarea {
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-faint);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold-light);
  background: rgba(5, 5, 6, 0.8);
  outline: none;
  box-shadow: 0 0 0 3px rgba(217, 189, 123, 0.22);
}

.field [aria-invalid="true"] {
  border-color: #ff6b81;
}

.field-error {
  color: #ff8fa0;
  font-size: 13px;
  line-height: 1.5;
}

.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--text-soft);
  border-bottom: 1px solid var(--text-soft);
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.field select {
  padding-right: 40px;
  appearance: none;
  -webkit-appearance: none;
}

.field select option {
  background: var(--black-warm);
  color: var(--text);
}

.form-actions {
  margin-top: 28px;
}

.form-actions .btn {
  width: 100%;
}

.form-result {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--line-gold);
  background: rgba(217, 189, 123, 0.06);
}

.form-result.is-error {
  border-color: rgba(255, 107, 129, 0.6);
  background: rgba(180, 20, 50, 0.1);
}

.form-message {
  font-size: 14.5px;
  line-height: 1.85;
}

.form-message:focus {
  outline: none;
}

.manual-copy {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.manual-copy label {
  color: var(--text-soft);
  font-size: 13px;
}

.manual-copy .btn {
  justify-self: start;
}

.form-next {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.form-next .btn {
  white-space: normal;
}

@media (max-width: 899px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 599px) {
  .form-grid,
  .form-next {
    grid-template-columns: 1fr;
  }

  .contact-form {
    margin-inline: calc(var(--gutter) * -0.5);
  }
}

/* 17. Footer / mobile CTA -------------------------------------------------- */
.footer {
  padding: 72px 0 40px;
  background: var(--black);
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto;
  gap: 32px 48px;
  align-items: start;
}

/* Same lockup as the header (KOKI + line), one size up. */
.footer-brand {
  display: inline-grid;
  line-height: 1;
}

.footer-brand .brand-name {
  font-size: 34px;
}

.footer-brand .brand-sub {
  margin-top: 9px;
  font-size: 12px;
}

.footer-brand-block p {
  margin-top: 16px;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1.9;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 6px 40px;
  font-size: 13.5px;
}

.footer-nav a,
.footer-sns a {
  display: inline-block;
  padding-block: 9px;
  color: var(--text-soft);
  transition: color 0.2s ease;
}

.footer-nav a:hover,
.footer-sns a:hover {
  color: var(--gold-light);
}

.footer-sns {
  display: grid;
  gap: 0;
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: 0.12em;
}

.footer-copy {
  grid-column: 1 / -1;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.14em;
}

.mobile-cta {
  display: none;
}

@media (max-width: 767px) {
  .footer {
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .mobile-cta {
    position: fixed;
    z-index: 90;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(5, 5, 6, 0.9);
    border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transform: translateY(110%);
    transition: transform 0.4s var(--ease);
  }

  .mobile-cta.is-visible {
    transform: none;
  }

  .mobile-cta .btn {
    min-height: 46px;
  }

  .mobile-cta .btn-line {
    padding-inline: 22px;
  }
}

/* 18. Gallery page --------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  max-width: 1920px;
  min-height: max(86svh, 600px);
  margin-inline: auto;
  overflow: hidden;
}

.page-hero-media {
  position: absolute;
  inset: 0;
}

.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 40%;
  animation: hero-settle 9s var(--ease-slow) both;
}

.page-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 5, 6, 0.92) 0%, rgba(5, 5, 6, 0.74) 32%, rgba(5, 5, 6, 0) 62%),
    linear-gradient(0deg, var(--black) 0%, rgba(5, 5, 6, 0) 30%),
    linear-gradient(180deg, rgba(5, 5, 6, 0.6) 0%, rgba(5, 5, 6, 0) 20%);
}

@media (min-width: 1921px) {
  .page-hero-shade {
    background:
      linear-gradient(90deg, rgba(5, 5, 6, 0.92) 0%, rgba(5, 5, 6, 0.74) 32%, rgba(5, 5, 6, 0) 62%),
      linear-gradient(270deg, var(--black) 0%, rgba(5, 5, 6, 0) 10%),
      linear-gradient(0deg, var(--black) 0%, rgba(5, 5, 6, 0) 30%),
      linear-gradient(180deg, rgba(5, 5, 6, 0.6) 0%, rgba(5, 5, 6, 0) 20%);
  }
}

.page-hero-content {
  position: relative;
  z-index: 2;
  align-self: end;
  width: min(560px, 46%);
  margin-left: max(var(--gutter), calc((min(100vw, 1920px) - var(--shell)) / 2));
  padding-block: calc(var(--header-h) + 40px) clamp(64px, 9vh, 110px);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--text-faint);
  font-size: 12.5px;
  letter-spacing: 0.08em;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 10px;
  color: var(--gold);
}

.breadcrumb a:hover {
  color: var(--gold-light);
}

.page-hero-title {
  font-family: var(--font-mincho);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.page-hero-copy {
  margin-top: 18px;
  color: var(--gold-light);
  font-family: var(--font-mincho);
  font-size: clamp(17px, 1.6vw, 22px);
  letter-spacing: 0.12em;
}

.page-hero-lead {
  margin-top: 18px;
  color: var(--text-soft);
  font-size: 15px;
}

.privacy-note {
  padding-left: 14px;
  border-left: 1px solid var(--gold);
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1.8;
}

.record-index {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: -32px;
}

.record-index a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.record-index a:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
}

.record-index span {
  color: var(--gold);
  font-family: var(--font-en);
  font-style: italic;
}

.record-list {
  display: grid;
  gap: clamp(80px, 11vw, 160px);
  margin-top: clamp(64px, 8vw, 110px);
}

.record-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: 0 clamp(24px, 3vw, 48px);
  padding-right: max(var(--gutter), calc((100vw - var(--shell)) / 2));
}

.record-row--reverse {
  padding-right: 0;
  padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2));
}

.record-media {
  position: relative;
  display: block;
  grid-column: 1 / 8;
  padding: 0;
  overflow: hidden;
  background: var(--black-warm);
  border: 0;
  cursor: zoom-in;
}

.record-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.2s var(--ease-slow);
}

.record-media:hover img {
  transform: scale(1.03);
}

.record-row--wide .record-media {
  grid-column: 1 / 9;
}

.record-row--wide .record-media img {
  aspect-ratio: 3 / 2;
}

.record-row--banquet .record-media img {
  object-position: 46% 50%;
}

.record-copy {
  grid-column: 8 / 13;
}

.record-row--wide .record-copy {
  grid-column: 9 / 13;
}

.record-row--reverse .record-media {
  grid-column: 6 / 13;
  grid-row: 1;
}

.record-row--reverse.record-row--wide .record-media {
  grid-column: 5 / 13;
}

.record-row--reverse .record-copy {
  grid-column: 1 / 6;
  grid-row: 1;
}

.record-row--reverse.record-row--wide .record-copy {
  grid-column: 1 / 5;
}

.record-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-column: 1 / 8;
  align-items: end;
  gap: clamp(12px, 1.6vw, 24px);
}

.record-pair .record-media {
  grid-column: auto;
}

.record-pair .record-media img {
  aspect-ratio: 3 / 4;
}

.record-pair .record-media:last-child {
  margin-bottom: clamp(-60px, -5vw, -24px);
}

.record-num {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--gold);
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.record-num span {
  color: var(--gold-light);
  font-size: clamp(44px, 4.4vw, 64px);
  font-style: italic;
  letter-spacing: 0;
  line-height: 1;
}

.record-copy h3 {
  margin-top: 16px;
  font-family: var(--font-mincho);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.55;
}

.record-copy > p:last-child {
  max-width: 38em;
  margin-top: 18px;
  color: var(--text-soft);
}

.moments {
  background: var(--black-warm);
}

.moments-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(64px, 8vw, 116px);
  gap: clamp(10px, 1.4vw, 18px);
}

.moment {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--black);
  border: 0;
  cursor: zoom-in;
}

.moment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-slow);
}

.moment:hover img {
  transform: scale(1.04);
}

.moment::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(0deg, rgba(5, 5, 6, 0.7), rgba(5, 5, 6, 0));
  opacity: 0.85;
  pointer-events: none;
}

.moment-label {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 12px;
  color: var(--ivory);
  font-family: var(--font-en);
  font-size: 15px;
  font-style: italic;
  letter-spacing: 0.1em;
}

.moment--a { grid-column: 1 / 9; grid-row: 1 / 5; }
.moment--b { grid-column: 9 / 13; grid-row: 1 / 7; }
.moment--c { grid-column: 1 / 5; grid-row: 5 / 8; }
.moment--d { grid-column: 5 / 9; grid-row: 5 / 8; }
.moment--e { grid-column: 1 / 9; grid-row: 8 / 12; }
.moment--f { grid-column: 9 / 13; grid-row: 7 / 12; }
.moment--g { grid-column: 1 / 6; grid-row: 12 / 15; }
.moment--h { grid-column: 6 / 13; grid-row: 12 / 15; }

.moment--b img { object-position: 50% 20%; }
.moment--f img { object-position: 50% 30%; }
.moment--d img { object-position: 50% 25%; }
.moment--c img { object-position: 40% 50%; }

.booking {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-y);
  background: var(--black);
}

.booking-media {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 46%;
}

.booking-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  opacity: 0.75;
}

.booking-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--black) 0%, rgba(5, 5, 6, 0.3) 45%, rgba(5, 5, 6, 0.1) 100%);
}

.booking-content > p {
  max-width: 30em;
  margin-top: 22px;
  color: var(--text-soft);
}

.booking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

@media (max-width: 899px) {
  .page-hero {
    display: block;
    min-height: 0;
  }

  .page-hero-media {
    position: relative;
    height: 62svh;
    min-height: 360px;
  }

  .page-hero-media img {
    object-position: 97% 40%;
  }

  .page-hero-shade {
    inset: 0 0 auto;
    height: 62svh;
    min-height: 360px;
    background:
      linear-gradient(0deg, var(--black) 0%, rgba(5, 5, 6, 0) 40%),
      linear-gradient(180deg, rgba(5, 5, 6, 0.6) 0%, rgba(5, 5, 6, 0) 24%);
  }

  .page-hero-content {
    width: auto;
    margin: -64px var(--gutter) 0;
    padding: 0 0 24px;
  }

  .record-index {
    margin-top: -16px;
  }

  .record-row,
  .record-row--reverse {
    display: block;
    padding: 0;
  }

  .record-media,
  .record-pair {
    width: calc(100% - var(--gutter));
  }

  .record-row--reverse .record-media {
    margin-left: auto;
  }

  .record-pair .record-media {
    width: 100%;
  }

  .record-pair .record-media:last-child {
    margin-bottom: -28px;
  }

  .record-copy {
    margin: 32px var(--gutter) 0;
  }

  .record-row--pair .record-copy {
    margin-top: 56px;
  }

  .moments-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  .moment {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }

  .moment--a,
  .moment--e,
  .moment--g {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }

  .moment--b,
  .moment--f {
    aspect-ratio: 3 / 4;
  }

  .moment--a { order: 1; }
  .moment--b { order: 2; }
  .moment--f { order: 3; }
  .moment--e { order: 4; }
  .moment--c { order: 5; }
  .moment--d { order: 6; }
  .moment--g { order: 7; }
  .moment--h { order: 8; grid-column: 1 / -1; aspect-ratio: 16 / 10; }

  .moment-label {
    left: 12px;
    bottom: 8px;
    font-size: 13px;
  }

  .booking-media {
    width: 100%;
  }

  .booking-media img {
    opacity: 0.4;
  }

  .booking-media::after {
    background: linear-gradient(0deg, var(--black) 10%, rgba(5, 5, 6, 0.55) 60%, rgba(5, 5, 6, 0.3) 100%);
  }
}

@media (max-width: 599px) {
  .booking-actions .btn {
    width: 100%;
  }
}

/* 19. Lightbox ------------------------------------------------------------- */
.lightbox {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 16px clamp(16px, 5vw, 96px) 28px;
  background: rgba(5, 5, 6, 0.96);
  animation: fade-in 0.3s ease both;
}

.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
}

.lightbox-count {
  color: var(--text-faint);
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: 0.16em;
}

.lightbox-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  font-size: 13.5px;
  letter-spacing: 0.1em;
}

.lightbox-close span {
  font-size: 20px;
  line-height: 1;
}

.lightbox-close:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
}

.lightbox-figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: 14px;
  min-height: 0;
  padding-top: 12px;
}

.lightbox-figure img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
}

.lightbox-figure figcaption {
  font-family: var(--font-mincho);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-align: center;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(5, 5, 6, 0.6);
  font-size: 20px;
  transform: translateY(-50%);
}

.lightbox-nav:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
}

.lightbox-prev {
  left: clamp(8px, 2vw, 28px);
}

.lightbox-next {
  right: clamp(8px, 2vw, 28px);
}

@media (max-width: 767px) {
  .lightbox {
    padding: 12px 12px calc(92px + env(safe-area-inset-bottom));
  }

  .lightbox-nav {
    top: auto;
    bottom: calc(24px + env(safe-area-inset-bottom));
    transform: none;
  }

  .lightbox-prev {
    left: calc(50% - 64px);
  }

  .lightbox-next {
    right: calc(50% - 64px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* 20. Motion --------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js .reveal-media img {
  transform: scale(1.08);
  transition: transform 1.8s var(--ease-slow);
}

.js .reveal-media.is-visible img {
  transform: scale(1);
}

.js .reveal-media.reveal {
  transform: none;
}

.js .hero-content > *,
.js .page-hero-content > * {
  animation: rise-in 1s var(--ease) both;
}

.js .hero-content > :nth-child(2),
.js .page-hero-content > :nth-child(2) { animation-delay: 0.08s; }
.js .hero-content > :nth-child(3),
.js .page-hero-content > :nth-child(3) { animation-delay: 0.16s; }
.js .hero-content > :nth-child(4),
.js .page-hero-content > :nth-child(4) { animation-delay: 0.24s; }
.js .hero-content > :nth-child(5),
.js .page-hero-content > :nth-child(5) { animation-delay: 0.32s; }

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* 22. Top page: photo-led sections ------------------------------------------
   Honors marquee, counting stats, flipping scene cards, a pinned horizontal
   works reel and a short portrait block. Long copy lives on the sub pages. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page-home .hero-content {
  padding-bottom: clamp(72px, 12vh, 120px);
}

/* Honors marquee */
.t-marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(22px, 2.6vw, 34px);
  background: var(--black-warm);
  border-block: 1px solid var(--line-gold);
}

.t-marquee-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.t-marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3.4vw, 56px);
  width: max-content;
}

.t-marquee.is-playing .t-marquee-track {
  animation: ribbon-left 48s linear infinite;
}

.t-marquee:hover .t-marquee-track {
  animation-play-state: paused;
}

.t-marquee-item {
  display: grid;
  gap: 2px;
  white-space: nowrap;
}

.t-marquee-item em {
  color: var(--gold);
  font-family: var(--font-en);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.16em;
}

.t-marquee-item b {
  font-family: var(--font-mincho);
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.t-marquee-item small {
  color: var(--text-faint);
  font-size: 12.5px;
  letter-spacing: 0.08em;
}

.t-marquee-track i {
  color: var(--red);
  font-size: 14px;
  font-style: normal;
}

/* Stats on a photo */
.t-stats {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(96px, 12vw, 180px);
  background: var(--black);
}

.t-stats-media {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 64%;
}

.t-stats-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 92% 38%;
}

.t-stats-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--black) 0%, rgba(5, 5, 6, 0.86) 34%, rgba(5, 5, 6, 0.2) 70%, rgba(5, 5, 6, 0) 100%),
    linear-gradient(0deg, var(--black) 0%, rgba(5, 5, 6, 0) 26%);
}

.t-stats-body {
  position: relative;
}

.t-stats-title {
  max-width: 17em;
  margin-top: 18px;
  font-family: var(--font-mincho);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.t-stats-list {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(40px, 5vw, 64px);
}

.t-stat dt {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.14em;
}

.t-stat dd {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
}

.t-count {
  color: var(--gold-light);
  font-family: var(--font-en);
  font-size: clamp(54px, 6.6vw, 96px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.t-unit {
  font-family: var(--font-mincho);
  font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing: 0.08em;
}

.t-stats-note {
  margin-top: clamp(28px, 3vw, 40px);
  color: var(--text-faint);
  font-size: 13px;
  letter-spacing: 0.08em;
}

/* Scene cards: playing cards that flip from the KOKI back to a photo */
.t-head {
  margin-bottom: clamp(40px, 5vw, 64px);
}

.t-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  perspective: 1600px;
}

.js .t-card.reveal {
  opacity: 1;
  transform: none;
}

.t-card-link {
  display: block;
  border-radius: 14px;
}

.t-card-inner {
  position: relative;
  display: block;
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  transition: transform 1.2s var(--ease-slow);
  transition-delay: calc(var(--i, 0) * 0.12s);
}

.js .t-card:not(.is-visible) .t-card-inner {
  transform: rotateY(180deg);
}

.t-card-back,
.t-card-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--line-gold);
  border-radius: 14px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.t-card-back {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(217, 189, 123, 0.12) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-45deg, rgba(217, 189, 123, 0.12) 0 1px, transparent 1px 12px),
    radial-gradient(circle at 50% 50%, var(--red) 0%, var(--red-deep) 70%);
  transform: rotateY(180deg);
}

.t-card-back::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(217, 189, 123, 0.5);
  border-radius: 9px;
}

.t-card-back svg {
  width: 38%;
  fill: var(--gold-light);
}

.t-card-face {
  background: var(--black-warm);
}

.t-card-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-slow);
}

.t-card-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(5, 5, 6, 0.9) 0%, rgba(5, 5, 6, 0.2) 34%, rgba(5, 5, 6, 0) 52%),
    linear-gradient(180deg, rgba(5, 5, 6, 0.55) 0%, rgba(5, 5, 6, 0) 18%);
}

.t-card-index {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 14px;
  color: var(--ivory);
  font-family: var(--font-en);
  font-size: 22px;
  font-style: italic;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.t-card-text {
  position: absolute;
  z-index: 1;
  inset: auto 14px 16px;
  display: grid;
  gap: 4px;
}

.t-card-en {
  color: var(--gold-light);
  font-family: var(--font-en);
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0.08em;
}

.t-card-jp {
  font-family: var(--font-mincho);
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

.t-card-link:hover .t-card-inner,
.t-card-link:focus-visible .t-card-inner {
  transform: translateY(-8px) rotateZ(-1.2deg);
  transition-delay: 0s;
}

.t-card-link:hover .t-card-face img {
  transform: scale(1.06);
}

.t-more {
  margin-top: clamp(32px, 4vw, 48px);
}

/* Works reel: a sideways row moved by swipe, trackpad or the ← → buttons */
.t-reel {
  position: relative;
  background: var(--black);
}

.t-reel-sticky {
  padding-block: var(--section-y);
}

.t-reel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 32px;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.t-reel-head .section-label {
  flex-basis: 100%;
}

.t-reel-head .text-link {
  margin-left: auto;
}

.t-reel-viewport {
  overflow-x: auto;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--shell)) / 2));
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.t-reel-viewport::-webkit-scrollbar {
  display: none;
}

.t-reel-track {
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  width: max-content;
  padding-inline: max(var(--gutter), calc((100vw - var(--shell)) / 2));
}

.t-shot {
  scroll-snap-align: start;
}

.t-shot-frame {
  height: clamp(240px, 52vh, 520px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--black-warm);
}

.t-shot--tall .t-shot-frame {
  aspect-ratio: 3 / 4;
}

.t-shot-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-slow);
}

.t-shot:hover img {
  transform: scale(1.04);
}

.t-shot figcaption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  font-family: var(--font-mincho);
  font-size: 15px;
  letter-spacing: 0.06em;
}

.t-shot figcaption span {
  color: var(--gold);
  font-family: var(--font-en);
  font-size: 15px;
  font-style: italic;
}

/* Portrait */
.t-portrait-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
}

.t-portrait-media {
  position: relative;
}

.t-portrait-media .media-frame {
  aspect-ratio: 4 / 5;
}

.t-portrait-media img {
  object-position: 50% 22%;
}

/* The card in his raised hand sits top-left, so the word goes bottom-right. */
.t-portrait-media .photo-word {
  top: auto;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(18px, 2.4vw, 32px);
  left: auto;
}

.t-portrait-text {
  max-width: 30em;
  margin-top: 26px;
  color: var(--text-soft);
  line-height: 2;
}

.t-portrait-body .text-link {
  margin-top: 30px;
}

/* Closing booking band */
.booking--top .booking-media img {
  object-position: 46% 30%;
}

.booking-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 22px;
  font-family: var(--font-mincho);
  font-size: 17px;
}

.booking-price span {
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.12em;
}

.booking-price b {
  color: var(--gold-light);
  font-family: var(--font-en);
  font-size: clamp(40px, 4.4vw, 60px);
  font-weight: 500;
  line-height: 1;
}

/* Sub-page hero crops (keep KOKI clear of the text column) */
.page-hero--contact .page-hero-shade {
  background:
    linear-gradient(90deg, rgba(5, 5, 6, 0.95) 0%, rgba(5, 5, 6, 0.86) 40%, rgba(5, 5, 6, 0.3) 66%, rgba(5, 5, 6, 0) 80%),
    linear-gradient(0deg, var(--black) 0%, rgba(5, 5, 6, 0) 30%),
    linear-gradient(180deg, rgba(5, 5, 6, 0.6) 0%, rgba(5, 5, 6, 0) 20%);
}

.page-hero--profile .page-hero-media img { object-position: 64% 40%; }
.page-hero--service .page-hero-media img { object-position: 58% 40%; }
.page-hero--contact .page-hero-media img { object-position: 92% 40%; }

@media (max-width: 1099px) {
  .t-cards {
    display: flex;
    gap: 14px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 6px var(--gutter) 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .t-cards::-webkit-scrollbar {
    display: none;
  }

  .t-card {
    flex: 0 0 clamp(200px, 30vw, 260px);
    scroll-snap-align: start;
  }
}

@media (max-width: 899px) {
  .t-stats {
    padding-top: 0;
  }

  .t-stats-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 56vw;
    max-height: 420px;
    margin-bottom: 8px;
  }

  .t-stats-media img {
    object-position: 88% 40%;
  }

  .t-stats-media::after {
    background: linear-gradient(0deg, var(--black) 0%, rgba(5, 5, 6, 0) 45%);
  }

  .t-stats-list {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .t-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }

  .t-stat dd {
    margin-top: 0;
  }

  .t-count {
    font-size: clamp(44px, 13vw, 60px);
  }

  .t-portrait-grid {
    grid-template-columns: 1fr;
  }

  .t-portrait-media .media-frame {
    aspect-ratio: 4 / 3;
  }

  .t-portrait-media img {
    object-position: 50% 24%;
  }

  /* On phones the closing photo sits above the copy instead of behind it. */
  .booking--top {
    padding-top: 0;
  }

  .booking--top .booking-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 56vw;
    max-height: 420px;
    margin-bottom: 8px;
  }

  .booking--top .booking-media img {
    opacity: 1;
  }

  .booking--top .booking-media::after {
    background: linear-gradient(0deg, var(--black) 0%, rgba(5, 5, 6, 0) 45%);
  }

  .page-hero--profile .page-hero-media img { object-position: 62% 40%; }
  .page-hero--service .page-hero-media img { object-position: 48% 40%; }
  .page-hero--contact .page-hero-media img { object-position: 94% 40%; }
}

@media (max-width: 599px) {
  .t-card {
    flex-basis: 62vw;
  }

  .t-shot-frame {
    height: 58vw;
  }

  .t-shot--tall .t-shot-frame {
    height: 72vw;
  }

  .t-reel-head .text-link {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .t-card:not(.is-visible) .t-card-inner {
    transform: none;
  }

}

/* 23. Hero upgrade: opening card, light sweep, trust line, phone layout ----
   The opening card plays once per visit (html.intro-on is set by a small
   script in <head>) and finishes in about 1.8s. Without JS, with reduced
   motion or blocked storage it never shows. */
.intro {
  display: none;
}

.intro-on .intro {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(45% 35% at 50% 50%, rgba(105, 11, 32, 0.55), transparent 70%),
    var(--black);
  pointer-events: none;
  animation: intro-out 0.6s ease 1.25s forwards;
}

.intro-card {
  width: clamp(124px, 32vw, 176px);
  aspect-ratio: 5 / 7;
  perspective: 1000px;
  animation: intro-card 1.85s var(--ease-slow) both;
}

.intro-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: intro-flip 0.85s var(--ease) 0.3s both;
}

.intro-card-back,
.intro-card-face {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 18px 60px rgba(180, 20, 50, 0.35);
}

.intro-card-back {
  display: grid;
  place-items: center;
  border: 1px solid var(--line-gold);
  background:
    repeating-linear-gradient(45deg, rgba(217, 189, 123, 0.14) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(-45deg, rgba(217, 189, 123, 0.14) 0 1px, transparent 1px 10px),
    radial-gradient(circle at 50% 50%, var(--red) 0%, var(--red-deep) 72%);
  transform: rotateY(180deg);
}

.intro-card-back svg {
  width: 40%;
  fill: var(--gold-light);
}

.intro-card-face {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  background: var(--ivory);
  color: var(--red);
}

.intro-pip {
  width: 42%;
  fill: var(--red);
}

.intro-name {
  color: var(--ink);
  font-family: var(--font-en);
  font-size: clamp(15px, 3.6vw, 19px);
  font-weight: 600;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
}

.intro-corner {
  position: absolute;
  top: 8px;
  left: 9px;
  display: grid;
  justify-items: center;
  font-family: var(--font-en);
  font-size: clamp(17px, 4vw, 22px);
  font-weight: 600;
  line-height: 1;
}

.intro-corner svg {
  width: 12px;
  margin-top: 2px;
  fill: currentColor;
}

.intro-corner--end {
  top: auto;
  right: 9px;
  bottom: 8px;
  left: auto;
  transform: rotate(180deg);
}

@keyframes intro-card {
  0% { opacity: 0; transform: translateY(26px) scale(0.92); }
  16% { opacity: 1; transform: none; }
  68% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}

@keyframes intro-flip {
  from { transform: rotateY(180deg); }
  to { transform: rotateY(0); }
}

@keyframes intro-out {
  to { opacity: 0; visibility: hidden; }
}

/* The hero copy waits for the card before it rises in. */
.intro-on .hero-content > :nth-child(1) { animation-delay: 1.3s; }
.intro-on .hero-content > :nth-child(2) { animation-delay: 1.38s; }
.intro-on .hero-content > :nth-child(3) { animation-delay: 1.46s; }
.intro-on .hero-content > :nth-child(4) { animation-delay: 1.54s; }
.intro-on .hero-content > :nth-child(5) { animation-delay: 1.62s; }
.intro-on .hero-content > :nth-child(6) { animation-delay: 1.7s; }

.js .hero-content > :nth-child(6) { animation-delay: 0.4s; }

/* A gold light passes across KOKI every few seconds. */
.hero-title-main {
  background-image:
    linear-gradient(105deg, rgba(255, 253, 248, 0) 38%, rgba(233, 198, 111, 1) 50%, rgba(255, 253, 248, 0) 62%),
    linear-gradient(180deg, var(--white) 30%, #e8dcc4 100%);
  background-repeat: no-repeat;
  background-size: 260% 100%, 100% 100%;
  background-position: 0% 0, 0 0;
  animation: koki-sweep 7s ease-in-out 1.4s infinite;
}

.intro-on .hero-title-main {
  animation-delay: 2.4s;
}

@keyframes koki-sweep {
  0% { background-position: 0% 0, 0 0; }
  24%, 100% { background-position: 100% 0, 0 0; }
}

/* Trust line under the buttons */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.hero-proof li {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.hero-proof li::before {
  content: "♠";
  color: var(--red);
  font-size: 10px;
}

/* Phones: one full-screen composition. The video fills the upper part (the
   face stays there wherever he moves in the clip) and the copy, buttons and
   trust line fit underneath within the first screen. */
@media (max-width: 767px) {
  .page-home .hero {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }

  .page-home .hero-visual {
    position: relative;
    flex: none;
    width: 100%;
    height: 54svh;
    min-height: 330px;
  }

  .page-home .hero-media img {
    object-position: 50% 16%;
  }

  .page-home .hero-video {
    object-position: 50% 24%;
  }

  .page-home .hero-shade {
    background:
      linear-gradient(180deg, rgba(5, 5, 6, 0.6) 0%, rgba(5, 5, 6, 0) 20%),
      linear-gradient(0deg, var(--black) 0%, rgba(5, 5, 6, 0.8) 18%, rgba(5, 5, 6, 0) 40%);
  }

  .page-home .hero-content {
    margin: -92px var(--gutter) 0;
    padding: 0 0 max(24px, calc(env(safe-area-inset-bottom) + 16px));
  }

  .page-home .hero-eyebrow {
    margin-bottom: 10px;
  }

  .page-home .hero-title-main {
    font-size: clamp(60px, 19vw, 82px);
  }

  .page-home .hero-copy {
    margin-top: 12px;
    font-size: 17px;
  }

  .page-home .hero-lead {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.8;
  }

  .page-home .hero-actions {
    margin-top: 18px;
    gap: 10px 22px;
  }

  .hero-proof {
    gap: 6px 14px;
    margin-top: 16px;
    padding-top: 12px;
    font-size: 11.5px;
    letter-spacing: 0.04em;
  }
}

/* Shorter phones: drop the lead line so everything stays in the first screen. */
@media (max-width: 767px) and (max-height: 799px) {
  .page-home .hero-lead {
    display: none;
  }
}

@media (max-width: 767px) and (max-height: 700px) {
  .page-home .hero-visual {
    height: 52svh;
  }

  .page-home .hero-title-main {
    font-size: clamp(54px, 16vw, 68px);
  }
}

/* 24. Scroll rows: arrow buttons + progress line --------------------------
   The scene cards and the works reel scroll sideways when they do not fit.
   A mouse cannot swipe, so each row gets ← → buttons and a line showing how
   far along it is. The JS shows the bar only while the row actually overflows
   */
.scroll-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}

.scroll-nav[hidden] {
  display: none;
}

.scroll-btn {
  display: grid;
  flex: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line-gold);
  border-radius: 50%;
  background: rgba(5, 5, 6, 0.4);
  color: var(--gold-light);
  font-size: 17px;
  transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.scroll-btn:hover:not(:disabled) {
  border-color: var(--gold-light);
  background: rgba(183, 149, 88, 0.14);
}

.scroll-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.scroll-progress {
  position: relative;
  flex: 1;
  height: 1px;
  overflow: hidden;
  background: var(--line);
}

.scroll-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--seen, 30%);
  background: var(--gold);
  transform: translateX(var(--shift, 0%));
  transition: transform 0.25s ease;
}

.t-cards + .scroll-nav {
  margin-top: 6px;
}

/* 21. Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal,
  .js .reveal-media img {
    opacity: 1;
    transform: none;
  }
}