/* ========================================
   TOKENS — Marubishi VIP v1
   White / #333CA8 / #FFF200 + holographic accent
======================================== */

:root {
  --stage-w: 100vw;
  --rail-w: 0px;
  --header-h: 56px;

  --color-ink: #111111;
  --color-chrome: #333ca8;
  --color-charcoal: #2a2525;
  --color-primary: #333ca8;
  --color-accent: #fff200;
  --color-base: #ffffff;
  --color-base-2: #f4f6fb;
  --color-text: #111111;
  --color-muted: #5a6288;
  --color-invert: #ffffff;
  --color-line: rgba(255, 255, 255, 0.34);
  --color-line-dark: rgba(51, 60, 168, 0.22);

  --gut: clamp(18px, calc(var(--stage-w) * 0.052), 26px);
  --pad-t: calc(var(--header-h) + clamp(4px, 1.2dvh, 14px));
  --pad-b: clamp(28px, 5dvh, 48px);
  --section-pad-y: clamp(8px, 2.2dvh, 28px);
  --content-gap: clamp(10px, 2dvh, 24px);
  --zone-bottom: clamp(24px, 4.5dvh, 40px);

  --fs-cap: clamp(10px, calc(var(--stage-w) * 0.028), 12px);
  --fs-body: clamp(13px, calc(var(--stage-w) * 0.034), 15px);
  --fs-head: clamp(22px, calc(var(--stage-w) * 0.07), 34px);

  --ease: cubic-bezier(0.65, 0, 0.2, 1);
  --ease-ecc: cubic-bezier(0.93, -0.03, 0.11, 1);

  --font-display-ja: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body-ja: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-latin: "Archivo Black", "Archivo", "Noto Sans JP", sans-serif;
  --font-ui: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-sans: var(--font-body-ja);
  --font-serif: var(--font-display-ja);
}

@media (min-width: 700px) {
  :root { --stage-w: 480px; }
}

@media (min-width: 1000px) {
  :root { --rail-w: calc((100vw - var(--stage-w)) / 2); }
}

/* ========================================
   RESET / BASE
======================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--color-base);
  color: var(--color-text);
  font-family: var(--font-body-ja);
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
}

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

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

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

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

.u-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.c-crosshair,
.c-node { pointer-events: none; }

.c-crosshair {
  position: absolute;
  width: 42px;
  height: 42px;
}

.c-crosshair::before,
.c-crosshair::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
}

.c-crosshair::before {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}

.c-crosshair::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.c-node {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(255, 242, 0, 0.18);
}

/* ========================================
   DESKTOP SHELL
======================================== */

.l-shell {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--color-base);
}

/* ========================================
   HEADER / SP UI
   SP: Brand + 募集要項 + エントリー (+ compact MENU)
   PC: Brand + MENU only (CTA = Right Rail)
======================================== */

.l-header {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 clamp(10px, 3.2vw, 18px);
  pointer-events: none;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(51, 60, 168, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.l-header__brand,
.l-header__tools,
.l-header__cta,
.l-header__menu { pointer-events: auto; }

.l-header__brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  color: var(--color-primary);
}

.l-header__brand-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.l-header__tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.l-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.l-header__cta .c-button--header {
  width: auto;
  min-height: 32px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.l-header__cta .c-button--ghost {
  background: #ffffff;
  border: 1px solid #333ca8;
  color: #333ca8;
}

.l-header__cta .c-button--entry {
  background: #333ca8;
  color: #ffffff;
  border: 1px solid #333ca8;
  box-shadow: 3px 0 0 var(--color-accent);
}

.l-header__cta .c-button--entry::before {
  width: 3px;
}

.l-header__cta .c-button--entry::after {
  left: 8px;
  right: 8px;
  bottom: 4px;
  background: rgba(255, 242, 0, 0.75);
}

.l-header__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid rgba(51, 60, 168, 0.45);
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-primary);
}

.l-header__menu-bars {
  display: grid;
  gap: 4px;
}

.l-header__menu-bars span {
  display: block;
  width: 14px;
  height: 1px;
  background: currentColor;
}

.l-header__menu-label {
  display: none;
  font-family: var(--font-latin);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.l-header__menu[aria-expanded="true"] .l-header__menu-bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.l-header__menu[aria-expanded="true"] .l-header__menu-bars span:nth-child(2) {
  opacity: 0;
}

.l-header__menu[aria-expanded="true"] .l-header__menu-bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 379px) {
  .l-header {
    padding: 0 8px;
    gap: 6px;
  }

  .l-header__brand {
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  .l-header__tools { gap: 4px; }

  .l-header__cta { gap: 4px; }

  .l-header__cta .c-button--header {
    min-height: 30px;
    padding: 3px 7px;
    font-size: 10px;
  }

  .l-header__menu {
    width: 30px;
    min-height: 30px;
  }
}

.l-menu {
  position: fixed;
  z-index: 55;
  inset: 0;
  background: rgba(51, 60, 168, 0.97);
  color: var(--color-invert);
  overflow-y: auto;
  padding: calc(var(--header-h) + 24px) var(--gut) 32px;
}

.l-menu[hidden] { display: none; }

.l-menu__kicker {
  font-family: var(--font-latin);
  font-size: 11px;
  letter-spacing: 0.28em;
  margin-bottom: 16px;
  color: var(--color-accent);
}

.l-menu__list { list-style: none; padding: 0; }

.l-menu__list a {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 15px;
  font-weight: 500;
}

.l-menu__list li:last-child a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.l-menu__list i {
  font-family: var(--font-latin);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

/* ========================================
   LEFT / RIGHT RAIL
======================================== */

.l-side-brand,
.l-side-cta { display: none; }

.l-side-brand__atmosphere,
.l-side-cta__atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.l-side-brand__atmosphere::before {
  content: "";
  position: absolute;
  left: 26%;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

.l-side-brand__atmosphere::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -22%;
  width: min(78%, 340px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  pointer-events: none;
}

.l-side-brand__ring {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

.l-side-brand__ring--lg {
  width: min(92%, 420px);
  aspect-ratio: 1;
  left: 48%;
  top: 54%;
  transform: translate(-50%, -42%);
}

.l-side-brand__ring--md {
  width: min(48%, 220px);
  aspect-ratio: 1;
  left: 22%;
  top: 18%;
  border-color: rgba(255, 255, 255, 0.1);
}

.l-side-brand__wire {
  position: absolute;
  left: 8%;
  right: 18%;
  top: 62%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  pointer-events: none;
}

.l-side-brand__wire::before,
.l-side-brand__wire::after {
  content: "";
  position: absolute;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.l-side-brand__wire::before {
  left: 22%;
  top: -18vh;
  height: 28vh;
}

.l-side-brand__wire::after {
  right: 12%;
  top: -8vh;
  height: 36vh;
  transform: rotate(18deg);
  transform-origin: top;
}

.l-side-brand__node {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(255, 242, 0, 0.14);
}

.l-side-brand__node--a {
  left: 26%;
  top: 62%;
  transform: translate(-50%, -50%);
}

.l-side-brand__node--b {
  right: 22%;
  bottom: 18%;
}

.l-side-brand__cross {
  position: absolute;
  left: 18%;
  top: 28%;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
}

.l-side-brand__cross::before,
.l-side-brand__cross::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.55);
}

.l-side-brand__cross::before {
  left: 50%;
  top: -12px;
  width: 1px;
  height: calc(100% + 24px);
}

.l-side-brand__cross::after {
  top: 50%;
  left: -12px;
  height: 1px;
  width: calc(100% + 24px);
}

.l-side-cta__sensor {
  position: absolute;
  left: 52%;
  top: 7%;
  width: min(200px, 58%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--color-accent) 0 3px, transparent 4px);
}

.l-side-cta__sensor::before,
.l-side-cta__sensor::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.l-side-cta__sensor::after {
  inset: 36%;
  border-color: rgba(255, 255, 255, 0.12);
}

.l-side-cta__wire {
  position: absolute;
  left: 14%;
  right: 22%;
  bottom: 11%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  pointer-events: none;
}

.l-side-cta__wire::before {
  content: "";
  position: absolute;
  left: 18%;
  bottom: 0;
  width: 1px;
  height: 7vh;
  background: rgba(255, 255, 255, 0.12);
}

.l-side-cta__wire::after {
  content: "";
  position: absolute;
  right: 12%;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(255, 242, 0, 0.12);
}

.l-side-brand__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.l-side-brand__en,
.l-side-cta__kicker {
  position: relative;
  z-index: 1;
  font-family: var(--font-latin);
  font-size: 10px;
  letter-spacing: 0.32em;
}

.l-side-brand__en { color: var(--color-accent); }

.l-side-cta__kicker { color: var(--color-accent); }

.l-side-brand__name {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-invert);
  text-align: center;
  line-height: 1.45;
}

.l-side-brand__figure {
  position: absolute;
  z-index: 1;
  bottom: clamp(48px, 12dvh, 96px);
  width: min(120px, 52%);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.l-side-brand__figure .c-crosshair {
  inset: 18px;
  width: auto;
  height: auto;
}

.l-side-brand__figure .c-node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.l-progress {
  position: relative;
  z-index: 1;
  width: min(220px, 100%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-latin);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.6);
}

.l-progress__bar {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  overflow: visible;
}

.l-progress__bar i {
  display: block;
  height: 2px;
  width: 10%;
  margin-top: -0.5px;
  background: linear-gradient(90deg, #7af0ff, #fff200 55%, #ff9ad5);
  transition: width 0.45s var(--ease);
}

.l-progress__bar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  transform: translate(-50%, -50%);
}

.l-side-cta__actions {
  position: relative;
  z-index: 1;
  width: min(220px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ========================================
   MOBILE STAGE
======================================== */

.l-mobile-stage {
  width: 100%;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  background: var(--color-base);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
}

.l-mobile-stage::-webkit-scrollbar { display: none; }

.l-mobile-stage[data-scroll-snap="on"] { scroll-snap-type: y proximity; }
.l-mobile-stage.is-paging { scroll-snap-type: none; }

.section--screen {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.section--auto,
.section--free {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
  scroll-snap-stop: normal;
}

.c-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: clamp(8px, 1.8dvh, 18px);
  padding: var(--pad-t) var(--gut) var(--pad-b);
}

.section--auto .c-page,
.section--free .c-page {
  height: auto;
  min-height: 100dvh;
  justify-content: flex-start;
}

/* ========================================
   HERO
======================================== */

.p-hero {
  padding: 0;
  background: var(--color-primary);
  color: var(--color-invert);
  --fv-overlay-top: 0.28;
  --fv-overlay-mid: 0.12;
  --fv-overlay-bot: 0.32;
}

.p-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-primary);
  pointer-events: none;
}

.p-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
}

.p-hero__video::-webkit-media-controls,
.p-hero__video::-webkit-media-controls-enclosure,
.p-hero__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  pointer-events: none;
}

.p-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(51, 60, 168, var(--fv-overlay-top)) 0%,
    rgba(51, 60, 168, var(--fv-overlay-mid)) 50%,
    rgba(51, 60, 168, var(--fv-overlay-bot)) 100%
  );
}

.c-scroll-cue {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(18px, 3.4dvh, 32px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-invert);
  font-family: var(--font-latin);
  font-size: 9px;
  letter-spacing: 0.28em;
}

.c-scroll-cue i {
  display: block;
  width: 1px;
  height: 22px;
  background: var(--color-accent);
  animation: cue 1.9s infinite;
}

/* ========================================
   SWIPE 1 — MESSAGE (Editorial Typography)
   Hierarchy: Label → Catch → Lead → Body → Key → Closing
======================================== */

.p-swipe1 {
  --plate-fill: rgba(255, 255, 255, 0.9);
  --plate-tilt-lead: -10deg;
  --plate-skew-lead: -10deg;
  --plate-tilt-body: 10deg;
  --plate-skew-body: 10deg;
  --plate-tilt-copy: -6deg;
  --plate-skew-copy: -6deg;
  --plate-tilt-key: 8deg;
  --plate-skew-key: 8deg;
  background: var(--color-base);
  color: var(--color-ink);
  overflow: hidden;
}

.p-swipe1__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 52% at 78% 108%, rgba(122, 240, 255, 0.18), transparent 64%),
    radial-gradient(ellipse 70% 42% at 12% 92%, rgba(255, 242, 0, 0.1), transparent 62%),
    linear-gradient(180deg, #f4f7ff 0%, #ffffff 38%, #eef6ff 100%);
}

.p-swipe1__bg::before {
  content: "";
  position: absolute;
  right: -16%;
  bottom: -12%;
  top: auto;
  width: 88%;
  height: 58%;
  background:
    radial-gradient(circle at 72% 42%, rgba(122, 240, 255, 0.22), transparent 56%),
    radial-gradient(circle at 28% 78%, rgba(255, 242, 0, 0.12), transparent 50%),
    radial-gradient(circle at 58% 92%, rgba(51, 60, 168, 0.08), transparent 52%);
  pointer-events: none;
}

.p-swipe1__bg::after {
  content: "";
  position: absolute;
  left: -18%;
  bottom: 4%;
  top: auto;
  width: 64%;
  height: 42%;
  background: radial-gradient(circle at 42% 52%, rgba(122, 240, 255, 0.16), transparent 64%);
  pointer-events: none;
}

.p-swipe1__art {
  position: absolute;
  z-index: 1;
  width: 88%;
  max-width: none;
  right: -28%;
  top: -8%;
  bottom: auto;
  filter: grayscale(1) contrast(1.24) brightness(1.04);
  mix-blend-mode: multiply;
  opacity: 0.86;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(114deg, transparent 0 34%, #000 52%, #000 78%, transparent 96%),
    linear-gradient(180deg, #000 0 36%, rgba(0, 0, 0, 0.5) 52%, transparent 74%),
    linear-gradient(155deg, #000 0 66%, transparent 100%);
  mask-image:
    linear-gradient(114deg, transparent 0 34%, #000 52%, #000 78%, transparent 96%),
    linear-gradient(180deg, #000 0 36%, rgba(0, 0, 0, 0.5) 52%, transparent 74%),
    linear-gradient(155deg, #000 0 66%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.p-swipe1__sphere {
  position: absolute;
  z-index: 0;
  width: 148%;
  max-width: none;
  right: -28%;
  top: auto;
  bottom: -34%;
  opacity: 0.3;
  mix-blend-mode: multiply;
  filter: saturate(1.2) contrast(1.06) brightness(1.04);
  pointer-events: none;
}

.p-swipe1__ribbon {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0.5;
}

.p-swipe1__ribbon img {
  position: absolute;
  width: 340%;
  max-width: none;
}

.p-swipe1__ribbon--a {
  width: 140%;
  height: 14%;
  left: -40%;
  top: 20%;
  transform: rotate(-16deg);
}

.p-swipe1__ribbon--a img { top: 8%; left: -20%; }

.p-swipe1__ribbon--b {
  width: 88%;
  height: 8%;
  left: -12%;
  top: 62%;
  transform: rotate(10deg);
  opacity: 0.4;
}

.p-swipe1__ribbon--b img { top: 42%; left: -10%; }

.p-swipe1__ribbon--c {
  width: 68%;
  height: 7%;
  right: -16%;
  bottom: 18%;
  transform: rotate(-18deg);
  opacity: 0.42;
}

.p-swipe1__ribbon--c img { top: 60%; left: -30%; }

.p-swipe1__cross {
  position: absolute;
  z-index: 3;
  right: 11%;
  bottom: 8%;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(51, 60, 168, 0.42);
  border-radius: 50%;
}

.p-swipe1__cross::before,
.p-swipe1__cross::after {
  content: "";
  position: absolute;
  background: var(--color-accent);
}

.p-swipe1__cross::before {
  left: 50%;
  top: -8px;
  width: 1px;
  height: calc(100% + 16px);
}

.p-swipe1__cross::after {
  top: 50%;
  left: -8px;
  height: 1px;
  width: calc(100% + 16px);
}

.p-swipe1__ring {
  position: absolute;
  z-index: 1;
  left: -22%;
  top: 36%;
  width: 58%;
  aspect-ratio: 1;
  border: 1px solid rgba(51, 60, 168, 0.2);
  border-radius: 50%;
  pointer-events: none;
}

.p-swipe1__ring::before,
.p-swipe1__ring::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(51, 60, 168, 0.14);
  border-radius: 50%;
}

.p-swipe1__ring::before {
  inset: 16%;
}

.p-swipe1__ring::after {
  inset: 32%;
  border-color: rgba(255, 242, 0, 0.35);
}

.p-swipe1__hash {
  position: absolute;
  z-index: 1;
  left: 8%;
  top: 48%;
  width: 28px;
  height: 28px;
  pointer-events: none;
}

.p-swipe1__hash::before,
.p-swipe1__hash::after {
  content: "";
  position: absolute;
  background: var(--color-accent);
}

.p-swipe1__hash::before {
  left: 50%;
  top: -10px;
  width: 1px;
  height: calc(100% + 20px);
}

.p-swipe1__hash::after {
  top: 50%;
  left: -10px;
  height: 1px;
  width: calc(100% + 20px);
}

.p-swipe1__page {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  justify-content: stretch;
  justify-items: stretch;
  gap: 0;
  height: 100%;
  padding-top: calc(var(--header-h) + 50px);
  padding-right: var(--gut);
  padding-bottom: clamp(12px, 2.4dvh, 24px);
  padding-left: var(--gut);
  overflow: hidden;
}

.p-swipe1__top {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-height: 0;
  padding-bottom: clamp(4px, 1dvh, 10px);
}

.p-swipe1__head {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(3px, 0.7dvh, 8px);
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
}

.p-swipe1__label {
  font-family: var(--font-latin);
  font-size: clamp(10px, calc(var(--stage-w) * 0.027), 11px);
  letter-spacing: 0.26em;
  color: var(--color-primary);
  text-shadow:
    0 0 10px #fff,
    0 0 18px rgba(255, 255, 255, 0.95);
}

.p-swipe1__catch {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  font-family: var(--font-display-ja);
  font-size: clamp(42px, 11vw, 44px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.04em;
  text-align: left;
  color: var(--color-primary);
  text-shadow:
    0 0 8px #fff,
    0 0 16px #fff,
    0 0 28px rgba(255, 255, 255, 0.9),
    1px 0 0 rgba(255, 255, 255, 0.85),
    -1px 0 0 rgba(255, 255, 255, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.85),
    0 -1px 0 rgba(255, 255, 255, 0.55);
}

.p-swipe1__catch-line {
  display: block;
  position: relative;
}

.p-swipe1__catch-line--1 {
  display: block;
  width: max-content;
  max-width: 100%;
}

.p-swipe1__catch-line--2 {
  margin-top: 0.12em;
  margin-left: 0;
  font-size: 1.04em;
  white-space: nowrap;
}

.p-swipe1__middle {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: clamp(16px, 2.8dvh, 32px);
  min-height: 0;
  width: 100%;
  padding-top: clamp(8px, 1.6dvh, 20px);
  padding-bottom: clamp(8px, 1.6dvh, 20px);
  overflow: visible;
}

.p-swipe1__middle::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4%;
  width: 28%;
  height: 1px;
  background: linear-gradient(90deg, rgba(122, 240, 255, 0.45), transparent);
  pointer-events: none;
}

.p-swipe1__middle::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 42%;
  bottom: 28%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(51, 60, 168, 0.22), transparent);
  pointer-events: none;
}

.p-swipe1__lead,
.p-swipe1__body-a,
.p-swipe1__body-b,
.p-swipe1__key {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-body-ja);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
}

.p-swipe1__line {
  display: block;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: -1px;
  padding: 0.36em 0.5em 0.3em;
  background: var(--plate-fill);
  color: var(--color-primary);
  white-space: nowrap;
  box-shadow: 3px 4px 0 #5c6278;
}

.p-swipe1__line:first-child {
  padding-top: 0.62em;
}

.p-swipe1__line:last-child {
  padding-bottom: 0.62em;
}

.p-swipe1__plate {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  transform-origin: left top;
}

.p-swipe1__plate--lead {
  align-self: flex-start;
  transform-origin: left bottom;
  transform: rotate(var(--plate-tilt-lead)) skewX(var(--plate-skew-lead));
}

.p-swipe1__plate--body {
  align-self: flex-end;
  transform-origin: right top;
  transform: rotate(var(--plate-tilt-body)) skewX(var(--plate-skew-body));
}

.p-swipe1__plate--copy {
  align-self: flex-start;
  max-width: 100%;
  transform-origin: left bottom;
  transform: rotate(var(--plate-tilt-copy)) skewX(var(--plate-skew-copy));
}

.p-swipe1__plate--copy .p-swipe1__line {
  letter-spacing: 0;
}

.p-swipe1__plate--key {
  align-self: flex-end;
  z-index: 3;
  transform-origin: right top;
  transform: rotate(var(--plate-tilt-key)) skewX(var(--plate-skew-key));
}

.p-swipe1__key .p-swipe1__line:last-child {
  margin-left: 0.7em;
}

.p-swipe1__mark {
  font-weight: 900;
  font-size: 1.12em;
  background-image: linear-gradient(transparent 58%, var(--color-accent) 58%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.04em;
}

.p-swipe1__foot {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  max-width: none;
  min-height: 0;
  padding-top: clamp(4px, 1dvh, 10px);
  padding-bottom: clamp(4px, 1dvh, 10px);
}

.p-swipe1__close {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: var(--font-display-ja);
  font-weight: 800;
  font-size: clamp(18px, calc(var(--stage-w) * 0.052), 22px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--color-primary);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
}

.p-swipe1__close-line {
  display: block;
  white-space: nowrap;
}

/* ========================================
   SWIPE 2 — CHECK
======================================== */

.p-swipe2 {
  isolation: isolate;
  background: var(--color-base);
  color: var(--color-ink);
}

.p-swipe2__bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.p-swipe2__sphere {
  position: absolute;
  z-index: 0;
  width: 142%;
  max-width: none;
  right: -28%;
  top: auto;
  bottom: -26%;
  opacity: 0.28;
  mix-blend-mode: multiply;
  filter: saturate(1.2) contrast(1.06) brightness(1.04);
}

.p-swipe2__strip {
  position: absolute;
  overflow: hidden;
  width: 70%;
  height: 10%;
  left: -8%;
  bottom: 12%;
  transform: rotate(-8deg);
  mix-blend-mode: screen;
  opacity: 0.55;
}

.p-swipe2__strip img {
  position: absolute;
  width: 280%;
  max-width: none;
  top: 20%;
  left: -20%;
}

.p-swipe2__cross {
  position: absolute;
  right: 10%;
  top: 10%;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(51, 60, 168, 0.28);
  border-radius: 50%;
}

.p-swipe2__cross::before,
.p-swipe2__cross::after {
  content: "";
  position: absolute;
  background: rgba(51, 60, 168, 0.45);
}

.p-swipe2__cross::before {
  left: 50%;
  top: -8px;
  width: 1px;
  height: calc(100% + 16px);
}

.p-swipe2__cross::after {
  top: 50%;
  left: -8px;
  height: 1px;
  width: calc(100% + 16px);
}

.p-swipe2__page {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  justify-content: stretch;
  gap: clamp(8px, 1.6dvh, 16px);
  padding-top: calc(var(--header-h) + var(--section-pad-y));
  padding-bottom: var(--zone-bottom);
}

.p-swipe2__head {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.9dvh, 10px);
}

.p-swipe2__label {
  font-family: var(--font-latin);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--color-primary);
}

.p-swipe2__catch {
  font-family: var(--font-display-ja);
  font-size: clamp(26px, calc(var(--stage-w) * 0.084), 40px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--color-primary);
}

.p-swipe2__list {
  list-style: none;
  padding: 2px 0 0;
  margin: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.p-swipe2__list li {
  display: grid;
  grid-template-columns: 1.15em 2.1em 1fr;
  align-items: baseline;
  gap: 6px;
  padding: clamp(5px, 1.15dvh, 12px) 0;
  border-bottom: 1px solid rgba(51, 60, 168, 0.16);
  font-size: clamp(14px, calc(var(--stage-w) * 0.038), 16px);
  font-weight: 500;
  line-height: 1.35;
}

.p-swipe2__mark {
  font-size: 0.95em;
  line-height: 1;
  color: var(--color-primary);
}

.p-swipe2__no {
  font-family: var(--font-latin);
  font-size: 0.92em;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.p-swipe2__foot {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.9dvh, 10px);
  margin-top: 0;
  font-size: clamp(14.5px, calc(var(--stage-w) * 0.038), 16px);
  line-height: 1.55;
}

.p-swipe2__mood {
  list-style: none;
  padding: 4px 0 2px;
  margin: 0;
  font-family: var(--font-display-ja);
  font-size: clamp(16px, calc(var(--stage-w) * 0.046), 20px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}

.p-swipe2__mood li:nth-child(2) { padding-left: 0.45em; }
.p-swipe2__mood li:nth-child(3) { padding-left: 0.9em; }

.p-swipe2__close {
  position: relative;
  margin-top: 2px;
  padding-left: 12px;
  font-weight: 700;
  font-size: clamp(15px, calc(var(--stage-w) * 0.04), 17px);
}

.p-swipe2__close::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
}

/* ========================================
   SWIPE 3 — WHAT WE DO
======================================== */

.p-swipe3 {
  background: #f7f8fc;
  color: var(--color-ink);
  overflow: hidden;
}

.p-swipe3__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.p-swipe3__city {
  position: absolute;
  width: 118%;
  max-width: none;
  right: -16%;
  bottom: -4%;
  height: auto;
  opacity: 0.42;
  mix-blend-mode: multiply;
}

.p-swipe3__bg::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 11%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(51, 60, 168, 0.45), transparent);
}

.p-swipe3__bg::after {
  content: "";
  position: absolute;
  left: 18%;
  bottom: 6%;
  width: 28%;
  height: 28%;
  border: 1px solid rgba(51, 60, 168, 0.18);
  border-radius: 50%;
  pointer-events: none;
}

.p-swipe3__ribbon {
  position: absolute;
  overflow: hidden;
  width: 64%;
  height: 8%;
  left: -10%;
  top: 18%;
  transform: rotate(-14deg);
  mix-blend-mode: multiply;
  opacity: 0.35;
}

.p-swipe3__ribbon img {
  position: absolute;
  width: 300%;
  max-width: none;
  top: 10%;
  left: -15%;
}

.p-swipe3__orbs {
  position: absolute;
  z-index: 1;
  right: 14px;
  top: calc(var(--header-h) + 6px);
  width: 86px;
  height: 70px;
  pointer-events: none;
}

.p-swipe3__orbs i {
  position: absolute;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(51, 60, 168, 0.5);
  border-radius: 50%;
  box-sizing: border-box;
}

.p-swipe3__orbs i:first-child {
  left: 0;
  top: 12px;
  background: rgba(120, 210, 255, 0.1);
}

.p-swipe3__orbs i:last-child {
  right: 0;
  top: 0;
  background: rgba(255, 230, 120, 0.12);
  mix-blend-mode: multiply;
}

.p-swipe3__orbs::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 16px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(90, 220, 255, 0.55), rgba(255, 242, 0, 0.42) 48%, rgba(196, 120, 255, 0.5));
  opacity: 0.72;
  pointer-events: none;
}

.p-swipe3__page {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  justify-content: stretch;
  gap: clamp(6px, 1.4dvh, 14px);
  padding-top: calc(var(--header-h) + var(--section-pad-y));
  padding-bottom: var(--zone-bottom);
}

.p-swipe3__head {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.8dvh, 8px);
}

.p-swipe3__mid {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4dvh, 14px);
}

.p-swipe3__eyebrow {
  font-family: var(--font-latin);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--color-primary);
}

.p-swipe3__label {
  font-family: var(--font-display-ja);
  font-size: clamp(20px, calc(var(--stage-w) * 0.056), 25px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1.15;
  color: var(--color-primary);
  white-space: nowrap;
}

.p-swipe3__lead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: clamp(11.5px, calc(var(--stage-w) * 0.03), 13px);
  line-height: 1.55;
  max-width: 36em;
}

.p-swipe3__flow {
  list-style: none;
  padding: 4px 0 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.4dvh, 14px) 12px;
  position: relative;
  flex: 1;
  min-height: 0;
}

.p-swipe3__flow > li {
  position: relative;
  min-height: clamp(56px, 11dvh, 108px);
  padding: 10px 10px 12px;
  border: 1px solid rgba(51, 60, 168, 0.38);
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.p-swipe3__flow > li:nth-child(even) { margin-top: 10px; }
.p-swipe3__flow > li:nth-child(odd) { margin-bottom: 10px; }

.p-swipe3__flow > li::before {
  content: "";
  position: absolute;
  background: rgba(51, 60, 168, 0.45);
  pointer-events: none;
}

.p-swipe3__flow > li:nth-child(odd)::before {
  right: -13px;
  top: 16px;
  width: 13px;
  height: 1px;
}

.p-swipe3__flow > li:nth-child(even)::before {
  left: 18px;
  bottom: -11px;
  width: 1px;
  height: 20px;
}

.p-swipe3__flow > li:nth-child(even):last-child::before { display: none; }

.p-swipe3__flow > li::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-top: 1px solid rgba(51, 60, 168, 0.45);
  border-right: 1px solid rgba(51, 60, 168, 0.45);
}

.p-swipe3__num {
  font-family: var(--font-latin);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--color-primary);
}

.p-swipe3__num::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: 8px;
}

.p-swipe3__step {
  font-size: clamp(12px, calc(var(--stage-w) * 0.032), 13.5px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.p-swipe3__close {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0;
  padding: clamp(10px, 1.6dvh, 14px) clamp(12px, 3.2vw, 16px);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.7);
  font-size: clamp(12px, calc(var(--stage-w) * 0.032), 13.5px);
  line-height: 1.5;
  color: var(--color-ink);
}

.p-swipe3__close p:last-child { font-weight: 700; }

/* ========================================
   PLACEHOLDER SECTIONS
======================================== */

.p-check,
.p-point,
.p-gallery,
.p-company { background: var(--color-base); }

.p-check,
.p-gallery,
.p-entry { background: var(--color-base-2); }

.c-section-number {
  font-family: var(--font-latin);
  font-size: var(--fs-cap);
  letter-spacing: 0.2em;
  color: var(--color-muted);
}

.c-heading {
  font-family: var(--font-display-ja);
  font-size: var(--fs-head);
  font-weight: 900;
  line-height: 1.3;
}

.c-body {
  font-size: var(--fs-body);
  line-height: 1.75;
  max-width: 36em;
}

.c-media-ph {
  width: 100%;
  height: clamp(120px, 28dvh, 240px);
  background: repeating-linear-gradient(135deg, #ddd, #ddd 10px, #e8e8e8 10px, #e8e8e8 20px);
}

.c-steps,
.c-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body);
}

.c-chips li,
.c-steps li {
  padding: 8px 12px;
  border: 1px solid var(--color-accent);
}

.c-h-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.c-h-scroll::-webkit-scrollbar { display: none; }

.c-h-scroll .c-media-ph {
  flex: 0 0 70%;
  scroll-snap-align: center;
  height: clamp(140px, 32dvh, 260px);
}

.c-dl {
  width: 100%;
  display: grid;
  grid-template-columns: 7em 1fr;
}

.c-dl dt,
.c-dl dd {
  font-size: var(--fs-body);
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.c-dl dt { font-weight: 700; }

.c-form-ph {
  min-height: 280px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--color-accent);
  letter-spacing: 0.16em;
  color: var(--color-muted);
}

/* ========================================
   BUTTONS
======================================== */

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 14px;
  width: 100%;
  max-width: 100%;
  background: #fff;
  color: var(--color-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.c-button--ghost {
  background: transparent;
  color: var(--color-invert);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.c-button--entry {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-invert);
  border: 1px solid var(--color-primary);
  box-shadow: 4px 0 0 var(--color-accent);
}

.c-button--entry::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-accent);
  pointer-events: none;
}

.c-button--entry::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 1px;
  background: rgba(255, 242, 0, 0.7);
  pointer-events: none;
}

.c-button--entry span { position: relative; z-index: 1; }

/* ========================================
   ANIMATIONS — grouped block fade
======================================== */

@keyframes cue {
  0%, 100% { transform: scaleY(1); transform-origin: top; opacity: 0.9; }
  50% { transform: scaleY(0.35); transform-origin: top; opacity: 1; }
}

.p-hero .c-scroll-cue {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.6s var(--ease) 0.2s, transform 0.6s var(--ease) 0.2s;
}

.p-hero.is-active .c-scroll-cue {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.p-swipe1__top,
.p-swipe1__middle,
.p-swipe1__foot,
.p-swipe1__art,
.p-swipe1__sphere,
.p-swipe2__head,
.p-swipe2__list,
.p-swipe2__foot,
.p-swipe3__head,
.p-swipe3__mid,
.p-swipe3__close {
  opacity: 0;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

.p-swipe1__top,
.p-swipe1__middle,
.p-swipe1__foot,
.p-swipe2__head,
.p-swipe2__list,
.p-swipe2__foot,
.p-swipe3__head,
.p-swipe3__mid,
.p-swipe3__close {
  transform: translateY(14px);
}

.p-swipe1.is-active .p-swipe1__top,
.p-swipe1.is-active .p-swipe1__middle,
.p-swipe1.is-active .p-swipe1__foot,
.p-swipe2.is-active .p-swipe2__head,
.p-swipe2.is-active .p-swipe2__list,
.p-swipe2.is-active .p-swipe2__foot,
.p-swipe3.is-active .p-swipe3__head,
.p-swipe3.is-active .p-swipe3__mid,
.p-swipe3.is-active .p-swipe3__close {
  opacity: 1;
  transform: none;
}

.p-swipe1.is-active .p-swipe1__art {
  opacity: 0.86;
}

.p-swipe1.is-active .p-swipe1__sphere {
  opacity: 0.3;
}

.p-swipe1__art,
.p-swipe1__top,
.p-swipe2__head,
.p-swipe3__head { transition-delay: 0.02s; }

.p-swipe1__sphere,
.p-swipe1__middle,
.p-swipe2__list,
.p-swipe3__mid { transition-delay: 0.12s; }

.p-swipe1__foot,
.p-swipe2__foot,
.p-swipe3__close { transition-delay: 0.22s; }

/* ========================================
   RESPONSIVE
======================================== */

@media (min-width: 700px) {
  html,
  body { background-color: var(--color-primary); }

  .l-shell { background: var(--color-primary); }

  .l-header,
  .l-menu,
  .l-mobile-stage {
    position: fixed;
    top: 0;
    left: 50%;
    right: auto;
    width: var(--stage-w);
    transform: translateX(-50%);
  }

  .l-mobile-stage {
    z-index: 10;
    height: 100dvh;
    margin: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 24px 60px rgba(20, 28, 90, 0.28);
  }

  .l-header { z-index: 60; }
  .l-menu { z-index: 55; height: 100dvh; }
}

@media (min-width: 1000px) {
  :root { --header-h: 56px; }

  /* PC: CTA lives in Right Rail only — no Header CTA duplication */
  .l-header {
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
  }

  .l-header__cta { display: none; }

  .l-header__brand {
    color: var(--color-invert);
    font-size: 13px;
    letter-spacing: 0.1em;
  }

  body[data-tone="light"] .l-header__brand { color: var(--color-primary); }

  .l-header__menu {
    width: auto;
    min-height: 34px;
    padding: 0 10px 0 8px;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(17, 17, 17, 0.35);
    color: var(--color-invert);
  }

  body[data-tone="light"] .l-header__menu {
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.78);
    color: var(--color-primary);
  }

  .l-header__menu-label { display: inline; }

  .l-side-brand,
  .l-side-cta {
    position: fixed;
    z-index: 20;
    top: 0;
    bottom: 0;
    width: var(--rail-w);
    max-width: var(--rail-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: clamp(40px, 10dvh, 88px) clamp(12px, 2.2vw, 36px) clamp(48px, 12dvh, 96px);
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none;
  }

  .l-side-brand {
    left: 0;
    right: auto;
    background: var(--color-primary);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
  }

  .l-side-cta {
    left: calc(50% + (var(--stage-w) / 2));
    right: auto;
    background: var(--color-primary);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    justify-content: center;
    gap: 20px;
    padding-top: clamp(132px, 24dvh, 228px);
    padding-bottom: clamp(72px, 16dvh, 132px);
  }

  .l-side-cta .c-button--ghost {
    background: transparent;
    color: var(--color-invert);
    border: 1px solid rgba(255, 255, 255, 0.8);
  }

  .l-side-cta .c-button--ghost:hover {
    background: var(--color-invert);
    color: var(--color-primary);
  }

  .l-side-cta .c-button--entry {
    background: var(--color-invert);
    color: var(--color-primary);
    border: 1px solid var(--color-invert);
    box-shadow: 4px 0 0 var(--color-accent);
  }

  .l-side-cta .c-button--entry::before {
    width: 4px;
    background: var(--color-accent);
  }

  .l-side-cta .c-button--entry::after {
    background: rgba(51, 60, 168, 0.18);
  }

  .l-side-brand {
    justify-content: center;
  }

  .l-side-brand__figure,
  .l-side-cta a,
  .l-progress,
  .l-side-cta__actions { pointer-events: auto; }

  .l-side-cta .c-button,
  .l-side-cta .l-progress,
  .l-side-cta__actions { width: min(240px, 100%); }

  .l-side-cta__actions { gap: 16px; }
}

@media (min-width: 1000px) and (max-width: 1300px) {
  .l-side-cta .c-button,
  .l-side-cta .l-progress,
  .l-side-cta__actions { width: min(200px, 100%); }

  .l-side-cta .c-button {
    min-height: 44px;
    font-size: 12px;
  }
}

@media (min-width: 1000px) {
  .p-swipe1__art {
    width: 94%;
    right: -32%;
    top: -6%;
    bottom: auto;
    -webkit-mask-image:
      linear-gradient(114deg, transparent 0 30%, #000 48%, #000 80%, transparent 96%),
      linear-gradient(180deg, #000 0 38%, rgba(0, 0, 0, 0.5) 54%, transparent 76%),
      linear-gradient(155deg, #000 0 66%, transparent 100%);
    mask-image:
      linear-gradient(114deg, transparent 0 30%, #000 48%, #000 80%, transparent 96%),
      linear-gradient(180deg, #000 0 38%, rgba(0, 0, 0, 0.5) 54%, transparent 76%),
      linear-gradient(155deg, #000 0 66%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  .p-swipe1__sphere {
    width: 156%;
    bottom: -36%;
    right: -32%;
  }

  .p-swipe1__page {
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding-bottom: clamp(20px, 3.2dvh, 36px);
  }

  .p-swipe1__catch {
    font-size: 50px;
  }

  .p-swipe1__middle {
    width: 100%;
    padding-top: 24px;
    gap: clamp(18px, 2.6dvh, 32px);
  }

  .p-swipe1__foot {
    width: 100%;
  }

  .p-swipe1__cross {
    right: 13%;
    bottom: 9%;
  }

  .p-swipe3__flow {
    flex: 0 1 auto;
    align-items: start;
    align-content: start;
    gap: 10px 12px;
  }

  .p-swipe3__flow > li {
    min-height: 0;
    padding: 12px 12px 14px;
    justify-content: flex-start;
    gap: 10px;
  }

  .p-swipe3__num {
    font-size: 26px;
  }

  .p-swipe3__step {
    font-size: 16px;
    line-height: 1.4;
  }
}

/* Tall SP / 430: use the full viewport intentionally */
@media (max-width: 999px) and (min-height: 780px) {
  .p-swipe1__art {
    width: 90%;
    right: -30%;
    top: -8%;
    bottom: auto;
  }

  .p-swipe1__middle {
    width: 100%;
  }

  .p-swipe1__cross {
    bottom: 7%;
  }
}

@media (max-width: 999px) and (min-width: 420px) {
  .p-swipe1__art {
    width: 90%;
    right: -30%;
    top: -8%;
    bottom: auto;
  }

  .p-swipe1__middle {
    width: 100%;
  }
}

@media (min-width: 1000px) and (min-height: 820px) {
  .p-swipe2__list li {
    padding-block: clamp(8px, 1.4dvh, 14px);
  }

  .p-swipe2__sphere {
    width: 150%;
    bottom: -30%;
    right: -32%;
  }

  .p-swipe3__city {
    width: 128%;
    bottom: -2%;
    opacity: 0.46;
  }
}

@media (max-height: 700px) {
  .p-swipe1 {
    --plate-tilt-lead: -7deg;
    --plate-skew-lead: -7deg;
    --plate-tilt-body: 7deg;
    --plate-skew-body: 7deg;
    --plate-tilt-copy: -6deg;
    --plate-skew-copy: -6deg;
    --plate-tilt-key: 6deg;
    --plate-skew-key: 6deg;
  }

  .p-swipe1__page {
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding-top: calc(var(--header-h) + 36px);
    padding-bottom: 8px;
  }

  .p-swipe1__catch {
    font-size: clamp(36px, 7.2dvh, 42px);
    line-height: 1.1;
  }

  .p-swipe1__head {
    gap: 2px;
  }

  .p-swipe1__art {
    width: 70%;
    right: -22%;
    top: -6%;
    bottom: auto;
  }

  .p-swipe1__sphere {
    width: 110%;
    bottom: -22%;
    opacity: 0.2;
  }

  .p-swipe1__middle {
    width: 100%;
  }

  .p-swipe1__lead,
  .p-swipe1__body-a,
  .p-swipe1__body-b,
  .p-swipe1__key {
    font-size: 15px;
  }

  .p-swipe1__line {
    padding-inline: 0.55em;
  }

  .p-swipe1__foot {
    width: 100%;
    padding-top: 4px;
  }

  .p-swipe1__close {
    font-size: clamp(15px, 3.6dvh, 18px);
    line-height: 1.3;
  }

  .p-swipe1__cross {
    width: 28px;
    height: 28px;
    bottom: 5%;
  }

  .p-swipe1__middle::before,
  .p-swipe1__middle::after,
  .p-swipe1__bg::after {
    display: none;
  }

  .p-swipe2__mood {
    font-size: clamp(15px, 3.4dvh, 18px);
  }

  .p-swipe3__flow > li {
    min-height: 52px;
    padding: 8px;
  }

  .p-swipe2__page,
  .p-swipe3__page {
    gap: 8px;
    padding-bottom: 28px;
  }
}

/* ========================================
   CTA Noise / Jitter (desktop hover)
======================================== */

@keyframes cta-jitter {
  0%,
  100% {
    transform: translate(0, 0);
    filter: none;
  }
  20% {
    transform: translate(1px, -1px);
  }
  40% {
    transform: translate(-1px, 1px);
    filter: contrast(1.08);
  }
  60% {
    transform: translate(1px, 0);
  }
  80% {
    transform: translate(-1px, -1px);
  }
}

@keyframes cta-noise-line {
  0%,
  100% {
    opacity: 0;
    transform: scaleX(0.2) translateY(0);
  }
  35% {
    opacity: 0.7;
    transform: scaleX(1) translateY(-2px);
  }
  70% {
    opacity: 0.35;
    transform: scaleX(0.85) translateY(2px);
  }
}

.c-button.is-noise {
  position: relative;
  overflow: hidden;
}

.c-button--ghost.is-noise::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 45%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(51, 60, 168, 0.55), transparent);
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .c-button.is-noise:hover {
    animation: cta-jitter 220ms steps(2, end);
  }

  .c-button.is-noise:hover span {
    text-shadow: 1px 0 rgba(255, 242, 0, 0.45), -1px 0 rgba(51, 60, 168, 0.28);
  }

  .c-button.is-noise.c-button--ghost:hover {
    text-shadow: 1px 0 rgba(51, 60, 168, 0.35), -1px 0 rgba(255, 242, 0, 0.35);
  }

  .c-button--ghost.is-noise:hover::after {
    animation: cta-noise-line 220ms linear;
  }

  .c-button--entry.is-noise:hover::after {
    animation: cta-noise-line 220ms linear;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .c-button.is-noise:hover,
  .c-button.is-noise:hover span {
    animation: none !important;
    text-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }

  .p-swipe1__top,
  .p-swipe1__middle,
  .p-swipe1__foot,
  .p-swipe1__art,
  .p-swipe1__sphere,
  .p-swipe2__head,
  .p-swipe2__list,
  .p-swipe2__foot,
  .p-swipe3__head,
  .p-swipe3__mid,
  .p-swipe3__close,
  .p-hero .c-scroll-cue {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .p-hero .c-scroll-cue {
    transform: translateX(-50%) !important;
  }

  .p-swipe1__art {
    opacity: 0.86 !important;
  }

  .p-swipe1__sphere {
    opacity: 0.3 !important;
  }

  .l-mobile-stage { scroll-behavior: auto; }
}