@font-face {
  font-family: "Yuji Syuku Signature";
  src: url("assets/fonts/yuji-syuku-signature.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --night: #03111e;
  --paper: #f8f5ed;
  --mist: #d9e9ef;
  --cyan: #72e9ff;
  --pink: #efb7c9;
  --gold: #f3d0cd;
  --line: rgba(226, 244, 248, 0.3);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* scroll-behavior:smooth here used to break a hash link's initial jump
   (e.g. an Instagram bio link to /#dispatch landed at the very top on
   desktop) — Chrome doesn't reliably animate a fragment scroll on first
   load. Smooth scrolling for in-page anchor clicks is added by JS
   instead (site-nav.js), which only runs after the page has settled. */
html, body { min-height: 100%; overflow-x: clip; background: #061722; }
body.menu-open { overflow: hidden; }

/*
  Japanese line breaking, applied everywhere.
  Default wrapping breaks by character count, so a sentence splits as
  "大丈夫で / す。" — correct by the spec, but it reads as a typo.
  auto-phrase breaks at phrase boundaries instead. Browsers without it
  simply fall back to the old behaviour, so this is safe to ship.
  strict additionally keeps small kana and long vowel marks off line starts.
*/
p, li, dd, dt, figcaption, blockquote, td, th, label, small, span, strong, em, b, i, a, button, textarea {
  line-break: strict;
  word-break: auto-phrase;
}

h1, h2, h3, h4 {
  line-break: strict;
  word-break: auto-phrase;
}

body {
  color: var(--paper);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a { color: inherit; }

.preview-service .hero,
.preview-service .news { display: none; }

.preview-about .hero,
.preview-about .news,
.preview-about .portals { display: none; }

.preview-clients .hero,
.preview-clients .news,
.preview-clients .portals,
.preview-clients .about { display: none; }

.preview-travel .hero,
.preview-travel .news,
.preview-travel .portals,
.preview-travel .about,
.preview-travel .clients { display: none; }

.preview-dispatch .hero,
.preview-dispatch .news,
.preview-dispatch .portals,
.preview-dispatch .about,
.preview-dispatch .clients,
.preview-dispatch .travel { display: none; }

.preview-contact .hero,
.preview-contact .news,
.preview-contact .portals,
.preview-contact .about,
.preview-contact .clients,
.preview-contact .travel,
.preview-contact .dispatch { display: none; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: max(720px, 100svh);
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--night);
}

.hero__scene,
.hero__scene img,
.hero__veil,
.hero__scan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__scene { z-index: -4; }
.hero__scene img { display: block; object-fit: cover; object-position: center; }

.hero__veil {
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(1, 11, 22, 0.9) 0%, rgba(1, 11, 22, 0.7) 28%, rgba(1, 11, 22, 0.18) 54%, rgba(1, 11, 22, 0.03) 77%),
    linear-gradient(180deg, rgba(1, 11, 22, 0.22), transparent 52%, rgba(1, 11, 22, 0.7));
}

.hero__scan {
  z-index: -2;
  opacity: 0.3;
  background: linear-gradient(105deg, transparent 42%, rgba(114, 233, 255, 0.18) 49.7%, rgba(255, 140, 203, 0.13) 50.3%, transparent 58%);
  background-size: 240% 100%;
  animation: sky-scan 8s ease-in-out infinite;
}

.header {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  min-height: 80px;
  padding: 0 clamp(30px, 5vw, 74px);
  display: flex;
  align-items: center;
  gap: 34px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(2, 14, 26, 0.5), rgba(2, 14, 26, 0.08));
}

.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; }

.brand__logo {
  width: 40px;
  height: auto;
  display: block;
  flex: 0 0 auto;
  filter: invert(1);
  opacity: 0.94;
}

.brand__text { display: grid; gap: 2px; }
.brand__text strong { font-size: 16px; line-height: 1.1; font-weight: 500; }
.brand__text small { font: 8px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.2em; opacity: 0.72; }

.menu-toggle {
  min-width: 78px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
  border: 0;
  color: var(--paper);
  background: transparent;
  cursor: pointer;
}

.menu-toggle__icon { position: relative; width: 26px; height: 15px; display: block; }
.menu-toggle__icon i { position: absolute; right: 0; width: 26px; height: 1px; background: currentColor; transition: width 240ms ease, background-color 240ms ease; }
.menu-toggle__icon i:first-child { top: 3px; }
.menu-toggle__icon i:last-child { bottom: 3px; width: 17px; }
.menu-toggle__label { font: 9px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.18em; }
.menu-toggle:hover .menu-toggle__icon i:first-child,
.menu-toggle:focus-visible .menu-toggle__icon i:first-child { width: 17px; background: var(--cyan); }
.menu-toggle:hover .menu-toggle__icon i:last-child,
.menu-toggle:focus-visible .menu-toggle__icon i:last-child { width: 26px; background: var(--pink); }

.site-menu[hidden] { display: none; }
.site-menu { position: fixed; z-index: 200; inset: 0; }
.site-menu__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(0, 8, 15, 0.74);
  cursor: pointer;
  opacity: 1;
}
.site-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(440px, calc(100vw - 24px));
  height: 100%;
  min-height: 100svh;
  padding: 25px 38px 34px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-left: 1px solid rgba(114, 233, 255, 0.28);
  color: var(--paper);
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 140, 203, 0.12), transparent 28%),
    linear-gradient(162deg, #061d2d 0%, #03111e 58%, #081922 100%);
  box-shadow: -22px 0 54px rgba(0, 5, 10, 0.28);
  transform: translateX(0);
}
.site-menu__top { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(222, 241, 243, 0.16); }
.site-menu__top p { font-size: 14px; letter-spacing: 0.12em; }
.site-menu__close {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  color: var(--paper);
  background: transparent;
  cursor: pointer;
}
.site-menu__close i { position: absolute; top: 21px; left: 10px; width: 24px; height: 1px; background: currentColor; transform: rotate(45deg); }
.site-menu__close i:last-child { transform: rotate(-45deg); }
.site-menu__close:hover i,
.site-menu__close:focus-visible i { background: var(--cyan); }
.site-menu__nav { margin-top: clamp(30px, 6vh, 58px); display: grid; }
.site-menu__nav a {
  position: relative;
  min-height: 62px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(222, 241, 243, 0.13);
  text-decoration: none;
  font-size: 25px;
  line-height: 1.4;
  transition: color 220ms ease, padding-left 260ms cubic-bezier(.2,.75,.2,1);
}
.site-menu__nav a::after { content: ""; position: absolute; right: 2px; width: 20px; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--pink)); }
.site-menu__nav a:hover,
.site-menu__nav a:focus-visible { padding-left: 9px; color: var(--gold); }
.site-menu__nav a[aria-current="page"] { color: var(--gold); }
.site-menu__nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -13px;
  width: 4px;
  height: 4px;
  border: 1px solid var(--cyan);
  transform: rotate(45deg);
  box-shadow: 0 0 9px rgba(114, 233, 255, 0.5);
}
.site-menu__contact {
  min-height: 52px;
  margin-top: 28px;
  padding: 0 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(222, 241, 243, 0.34);
  text-decoration: none;
  font-size: 16px;
  transition: border-color 220ms ease, background-color 220ms ease;
}
.site-menu__contact:hover,
.site-menu__contact:focus-visible { border-color: #b35c78; background: rgba(167, 78, 107, 0.24); }
.site-menu__note { margin-top: auto; padding-top: 30px; color: rgba(226, 242, 242, 0.56); font-size: 13px; line-height: 1.8; }

.copy {
  width: min(100% - 48px, 1320px);
  margin: 48px auto 90px;
  padding-left: clamp(0px, 3.2vw, 46px);
  position: relative;
  z-index: 3;
}

.copy h1 {
  max-width: 890px;
  font-size: clamp(52px, 5.45vw, 78px);
  font-weight: 500;
  line-height: 1.28;
  text-shadow: 0 5px 30px rgba(0, 0, 0, 0.46);
}
.copy h1 em { color: var(--gold); font-style: normal; }
.copy p { margin-top: 28px; max-width: 650px; color: rgba(248, 245, 237, 0.9); font-size: 16px; line-height: 2.05; text-shadow: 0 3px 22px rgba(0, 0, 0, 0.5); }

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

.prism-button {
  position: relative;
  isolation: isolate;
  min-height: 54px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  text-decoration: none;
  font-size: 15px;
}

.prism-button::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(110deg, var(--cyan), rgba(255,255,255,.75) 32%, var(--pink) 65%, var(--gold));
}
.prism-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  clip-path: inherit;
  background: rgba(3, 22, 38, 0.88);
  transition: background 240ms ease;
}
.prism-button:hover::after, .prism-button:focus-visible::after { background: rgba(6, 38, 58, 0.7); }
.prism-button:focus-visible,
.header a:focus-visible,
.menu-toggle:focus-visible,
.site-menu button:focus-visible,
.site-menu a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.prism-button--primary { min-width: 224px; }
.prism-button--secondary { min-width: 210px; }

.prism-button__signal {
  width: 13px;
  height: 13px;
  border: 1px solid var(--cyan);
  transform: rotate(45deg);
  box-shadow: 0 0 13px rgba(114, 233, 255, 0.58), inset 0 0 7px rgba(255, 140, 203, 0.38);
}

.arrow { position: relative; width: 26px; height: 9px; flex: 0 0 auto; }
.arrow::before, .arrow::after { content: ""; position: absolute; right: 0; }
.arrow::before { top: 4px; width: 26px; height: 1px; background: currentColor; }
.arrow::after { top: 1px; width: 7px; height: 7px; border-top: 1px solid currentColor; transform: rotate(45deg); }

.signal-note {
  position: absolute;
  z-index: 2;
  right: clamp(24px, 8vw, 118px);
  display: flex;
  align-items: center;
  gap: 8px;
  font: 9px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.2em;
  color: rgba(236, 249, 250, 0.68);
}
.signal-note b { width: 5px; height: 5px; border: 1px solid currentColor; transform: rotate(45deg); box-shadow: 0 0 9px var(--cyan); }
.signal-note--one { top: 27%; }
.signal-note--two { top: 43%; right: clamp(80px, 19vw, 280px); }
.signal-note--three { top: 62%; right: clamp(32px, 13vw, 190px); }

@keyframes sky-scan { 0%, 22% { background-position: 125% 0; } 64%, 100% { background-position: -120% 0; } }

@media (max-width: 767px) {
  .hero { min-height: max(720px, 100svh); align-items: flex-start; }
  .hero__scene img { object-position: center; }
  .hero__veil { background: linear-gradient(180deg, rgba(1, 11, 22, .72) 0%, rgba(1, 11, 22, .52) 43%, rgba(1, 11, 22, .08) 69%, rgba(1, 11, 22, .72) 100%); }
  .header { min-height: 66px; padding-inline: 16px; gap: 12px; }
  .brand { gap: 9px; }
  .brand__logo { width: 34px; }
  .brand__text strong { font-size: 14px; }
  .brand__text small { font-size: 7px; }
  .menu-toggle { min-width: 72px; gap: 9px; }
  .site-menu__panel { width: calc(100vw - 16px); padding: 18px 24px 26px; }
  .site-menu__nav { margin-top: 28px; }
  .site-menu__nav a { min-height: 54px; font-size: 21px; }
  .site-menu__contact { margin-top: 22px; }
  .site-menu__note { padding-top: 24px; }
  .copy { width: calc(100% - 34px); margin-top: clamp(125px, 17svh, 155px); margin-bottom: 92px; padding-left: 0; }
  .copy h1 { font-size: clamp(35px, 10vw, 45px); line-height: 1.36; }
  .copy p { margin-top: 21px; font-size: 16px; line-height: 1.85; }
  .actions { gap: 14px; margin-top: 28px; }
  .prism-button { min-height: 48px; padding-inline: 17px; font-size: 14px; }
  .prism-button--primary { min-width: 203px; }
  .prism-button--secondary { min-width: 190px; }
  .signal-note { display: none; }
}

@media (max-width: 370px) {
  .brand__text small { display: none; }
  .copy h1 { font-size: 34px; }
  .copy p { font-size: 15px; }
}

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

/* News: a quiet hand-off from the cinematic hero to the service story. */
.news {
  position: relative;
  z-index: 4;
  color: #132734;
  background: #f4f3ee;
  border-bottom: 1px solid rgba(14, 48, 62, 0.12);
}

.news__inner {
  width: min(calc(100% - 48px), 1240px);
  min-height: 112px;
  margin: 0 auto;
  padding-block: 26px;
  display: grid;
  grid-template-columns: auto minmax(70px, 1fr) minmax(420px, 2fr) auto;
  align-items: center;
  gap: 28px;
}

.news__list {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.news h2 {
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.news__line {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, rgba(20, 68, 82, 0.35), rgba(20, 68, 82, 0.04));
}

.news__line i,
.news__line b {
  position: absolute;
  top: 50%;
  display: block;
  transform: translateY(-50%) rotate(45deg);
}

.news__line i { left: 0; width: 7px; height: 7px; border: 1px solid #1897ad; background: #f4f3ee; }
.news__line b { right: 12%; width: 4px; height: 4px; background: #ff8ccb; box-shadow: 0 0 10px rgba(255, 140, 203, 0.72); }

.news__item {
  min-width: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}

.news__item time {
  color: #a74e6b;
  font: 10px/1 ui-sans-serif, system-ui, sans-serif;
}

.news__item a {
  overflow: hidden;
  font-size: 16px;
  line-height: 1.6;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news__item a:hover,
.news__item a:focus-visible { color: #087f98; }

.news__all {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #385e68;
  font-size: 14px;
  text-decoration: none;
}

.news__all .arrow { width: 20px; }
.news__all .arrow::before { width: 20px; }
.news__all:hover,
.news__all:focus-visible { color: #087f98; }
.news a:focus-visible { outline: 2px solid #087f98; outline-offset: 4px; }

/* Services: three genuinely different windows, held by one material system. */
.portals {
  position: relative;
  isolation: isolate;
  min-height: max(820px, 100svh);
  padding: 96px 24px 84px;
  overflow: hidden;
  color: var(--paper);
  background: #020d16;
}

.portals::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  width: min(1180px, 92vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(114, 233, 255, 0.42), rgba(255, 140, 203, 0.26), transparent);
}

.portals::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 95px;
  right: -12vw;
  width: 62vw;
  height: 430px;
  border-top: 1px solid rgba(137, 221, 231, 0.15);
  border-radius: 50%;
  transform: rotate(-9deg);
}

.portals__backdrop,
.portals__backdrop::before,
.portals__backdrop::after,
.portals__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.portals__backdrop { z-index: 0; overflow: hidden; pointer-events: none; }

.portals__backdrop::before,
.portals__backdrop::after { content: ""; }

.portals__backdrop::before {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 34%, transparent 0 19%, rgba(1, 10, 17, 0.26) 58%, rgba(1, 8, 14, 0.66) 100%),
    linear-gradient(180deg, rgba(2, 12, 21, 0.42), rgba(3, 15, 24, 0.58) 54%, rgba(2, 11, 19, 0.82));
}

.portals__backdrop::after {
  z-index: 2;
  opacity: 0.5;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.82) 0 0.8px, transparent 1px);
  background-size: 3px 3px;
}

.portals__video {
  z-index: 0;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.78) contrast(1.04) brightness(0.9);
  transform: scale(1.035);
}

.portals__sky { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.portals__sky span { position: absolute; width: 3px; height: 3px; background: #2a9caf; transform: rotate(45deg); }
.portals__sky span:nth-child(1) { top: 9%; left: 11%; }
.portals__sky span:nth-child(2) { top: 16%; right: 9%; background: #f088ba; box-shadow: 0 0 12px rgba(240, 136, 186, 0.55); }
.portals__sky span:nth-child(3) { top: 42%; left: 4%; width: 5px; height: 5px; border: 1px solid #c3904f; background: transparent; }
.portals__sky span:nth-child(4) { right: 4%; bottom: 25%; }
.portals__sky span:nth-child(5) { bottom: 8%; left: 32%; width: 4px; height: 4px; background: #c3904f; }

.portals__intro {
  position: relative;
  z-index: 2;
  width: min(100%, 1240px);
  margin: 0 auto 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 48px;
}

.portals__intro-copy { min-width: 0; }

.portals__intro h2 {
  max-width: 720px;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.38;
}

.portals__intro p {
  max-width: 520px;
  margin-top: 18px;
  color: rgba(231, 244, 245, 0.82);
  font-size: 16px;
  line-height: 1.95;
}

/* A small signal diagram: the service promise, kept decorative and quiet. */
.service-flow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 8px 12px 0;
  color: rgba(234, 246, 246, 0.88);
  white-space: nowrap;
}

.service-flow__node {
  min-width: 112px;
  min-height: 54px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(114, 233, 255, 0.34);
  background: rgba(3, 23, 37, 0.48);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-align: center;
}

.service-flow__node--output {
  min-width: 132px;
  border-color: rgba(255, 140, 203, 0.5);
  color: #ffd3e4;
}

.service-flow__core {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(114, 233, 255, 0.78);
  background: rgba(9, 45, 57, 0.7);
  box-shadow: 0 0 18px rgba(114, 233, 255, 0.2), inset 0 0 15px rgba(255, 140, 203, 0.18);
  transform: rotate(45deg);
}

.service-flow__core span {
  color: #b9f5fb;
  font: 14px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.06em;
  transform: rotate(-45deg);
}

.service-flow__connector {
  position: relative;
  width: 38px;
  height: 1px;
  flex: 0 0 38px;
  background: linear-gradient(90deg, rgba(114, 233, 255, 0.52), rgba(255, 140, 203, 0.74));
}

.service-flow__connector::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -1px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #ffb8d8;
  border-right: 1px solid #ffb8d8;
  transform: rotate(45deg);
}

.service-flow__connector i {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 9px var(--cyan);
  animation: service-flow-pulse 3.8s ease-in-out infinite;
}

.service-flow__connector:nth-of-type(4) i { animation-delay: 1.9s; background: var(--pink); box-shadow: 0 0 9px var(--pink); }

@keyframes service-flow-pulse {
  0%, 12% { transform: translateX(0); opacity: 0; }
  24% { opacity: 1; }
  78% { transform: translateX(33px); opacity: 0.82; }
  100% { transform: translateX(36px); opacity: 0; }
}

@keyframes service-flow-pulse-compact {
  0%, 12% { transform: translateX(0); opacity: 0; }
  24% { opacity: 1; }
  78% { transform: translateX(21px); opacity: 0.82; }
  100% { transform: translateX(24px); opacity: 0; }
}

@keyframes service-flow-pulse-mobile {
  0%, 12% { transform: translateX(0); opacity: 0; }
  24% { opacity: 1; }
  78% { transform: translateX(15px); opacity: 0.82; }
  100% { transform: translateX(18px); opacity: 0; }
}

.portals__grid {
  position: relative;
  z-index: 2;
  width: min(100%, 1240px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 22px;
  align-items: stretch;
}

.portal--build { grid-row: 1 / 3; }

.portals__grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 24px;
  right: 4%;
  left: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(114, 233, 255, 0.32), rgba(255, 140, 203, 0.22), rgba(255, 213, 138, 0.3), transparent);
  box-shadow: 0 0 24px rgba(114, 233, 255, 0.16);
}

.portal {
  --portal-shape: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 25px 100%, 0 calc(100% - 25px));
  position: relative;
  min-width: 0;
  display: flex;
  --portal-edge-angle: 118deg;
  background: linear-gradient(var(--portal-edge-angle), rgba(114, 233, 255, 0.9), rgba(226, 244, 248, 0.15) 30%, rgba(226, 244, 248, 0.15) 68%, rgba(255, 140, 203, 0.76));
  clip-path: var(--portal-shape);
  filter: drop-shadow(0 18px 28px rgba(0, 8, 15, 0.2));
  transition: transform 380ms cubic-bezier(.2,.75,.2,1), filter 380ms ease;
}

.portal--tools { --portal-shape: polygon(21px 0, calc(100% - 21px) 0, 100% 21px, 100% 100%, 0 100%, 0 21px); --portal-edge-angle: 208deg; }
.portal--agent { --portal-shape: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); --portal-edge-angle: 298deg; }

.portal:hover { transform: translateY(-7px); filter: drop-shadow(0 25px 34px rgba(0, 8, 15, 0.3)) drop-shadow(0 0 18px rgba(114, 233, 255, 0.18)); }

.portal__link {
  position: relative;
  min-height: 374px;
  margin: 1px;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  color: var(--paper);
  background:
    linear-gradient(158deg, rgba(13, 45, 63, 0.68), rgba(3, 18, 31, 0.82) 56%, rgba(2, 13, 24, 0.91) 100%);
  backdrop-filter: blur(3px) saturate(1.08);
  clip-path: var(--portal-shape);
  text-decoration: none;
}

.portal__link::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: -55%;
  width: 48%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #fff, var(--cyan), transparent);
  transition: left 620ms cubic-bezier(.2,.75,.2,1);
}

.portal:hover .portal__link::before,
.portal__link:focus-visible::before { left: 108%; }
.portal__link:focus-visible { outline: 3px solid #0f7890; outline-offset: 5px; }

.portal__visual {
  position: relative;
  height: 140px;
  flex: 0 0 140px;
  overflow: hidden;
  border-bottom: 1px solid rgba(219, 239, 242, 0.16);
  background: rgba(3, 19, 32, 0.62);
}

.portal__visual::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 15px;
  width: 34px;
  height: 8px;
  border-right: 1px solid rgba(227, 246, 248, 0.4);
  border-bottom: 1px solid rgba(227, 246, 248, 0.4);
}

.portal__body {
  min-height: 234px;
  padding: 23px 26px 27px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* 主役=丸投げ。残る2つは従属として軽くし、絵を持たない */
.portal--tools .portal__visual,
.portal--agent .portal__visual { display: none; }

.portal--tools .portal__link,
.portal--agent .portal__link { min-height: 0; }

.portal--tools .portal__body,
.portal--agent .portal__body { min-height: 0; padding: 20px 24px 22px; }

.portal--build .portal__link { min-height: 470px; }
.portal--build .portal__visual { height: 178px; flex-basis: 178px; }
.portal--build h3 { font-size: clamp(27px, 2.3vw, 33px); }

.portal__mode {
  align-self: flex-start;
  padding-bottom: 7px;
  color: #91dce8;
  border-bottom: 1px solid rgba(114, 233, 255, 0.35);
  font-size: 13px;
  line-height: 1;
}

.portal h3 {
  min-height: 82px;
  margin-top: 15px;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.48;
}

.portal h3 em { color: var(--gold); font-style: normal; }
.portal p { color: rgba(237, 246, 244, 0.86); font-size: 14px; line-height: 1.8; }

.portal__reasons {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  color: rgba(237, 246, 244, 0.9);
  font-size: 14px;
  line-height: 1.7;
  list-style: none;
}

.portal__reasons li {
  position: relative;
  padding-left: 15px;
}

.portal__reasons li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 1px;
  width: 5px;
  height: 5px;
  background: #91dce8;
  box-shadow: 0 0 8px rgba(114, 233, 255, 0.5);
  transform: translateY(-50%) rotate(45deg);
}

/* Window 1: an unformed request becomes a stable shape. */
.portal__visual--build {
  background:
    linear-gradient(145deg, rgba(10, 51, 67, 0.8), rgba(4, 20, 33, 0.95));
}

.build-path,
.build-node,
.build-form { position: absolute; display: block; }
.build-path { height: 1px; transform-origin: left; background: linear-gradient(90deg, transparent, var(--cyan), rgba(255, 140, 203, 0.76)); }
.build-path--one { top: 68px; left: 11%; width: 45%; transform: rotate(18deg); }
.build-path--two { top: 130px; left: 25%; width: 40%; transform: rotate(-21deg); }
.build-node { width: 8px; height: 8px; border: 1px solid var(--cyan); transform: rotate(45deg); box-shadow: 0 0 13px rgba(114, 233, 255, 0.34); }
.build-node--one { top: 53px; left: 12%; }
.build-node--two { top: 112px; left: 48%; border-color: var(--pink); }
.build-node--three { top: 69px; left: 65%; border-color: var(--gold); }
.build-form { top: 48px; right: 12%; width: 80px; height: 93px; border: 1px solid rgba(236, 249, 250, 0.4); clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%); }
.build-form::before,
.build-form::after { content: ""; position: absolute; left: 15px; height: 1px; background: rgba(229, 244, 246, 0.38); }
.build-form::before { top: 28px; width: 46px; box-shadow: 0 15px 0 rgba(229, 244, 246, 0.25), 0 30px 0 rgba(229, 244, 246, 0.18); }
.build-form::after { right: 15px; bottom: 0; background: linear-gradient(90deg, var(--cyan), var(--pink)); transform: scaleX(0); transform-origin: left; transition: transform 520ms ease 80ms; }
.portal--build:hover .build-form::after { transform: scaleX(1); }

/* Window 2: a shelf of ready-made tools responds to the visitor. */
.portal__visual--tools {
  background:
    linear-gradient(155deg, rgba(17, 48, 67, 0.92), rgba(4, 19, 32, 0.98));
}

.tool-slot {
  position: absolute;
  left: 15%;
  width: 70%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border: 1px solid rgba(211, 239, 242, 0.22);
  color: rgba(229, 245, 246, 0.7);
  background: rgba(10, 42, 57, 0.42);
  font: 9px/1 ui-sans-serif, system-ui, sans-serif;
  transition: transform 340ms cubic-bezier(.2,.75,.2,1), border-color 340ms ease, color 340ms ease;
}

.tool-slot b { font-weight: 500; }
.tool-slot i { width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); }
.tool-slot--one { top: 36px; }
.tool-slot--two { top: 84px; left: 20%; }
.tool-slot--three { top: 132px; }
.portal--tools:hover .tool-slot--one { transform: translateX(10px); }
.portal--tools:hover .tool-slot--two { transform: translateX(-8px); color: var(--gold); border-color: rgba(255, 213, 138, 0.6); }
.portal--tools:hover .tool-slot--three { transform: translateX(7px); }
.tool-cursor { position: absolute; z-index: 2; top: 99px; right: 14%; width: 13px; height: 13px; border-right: 1px solid var(--pink); border-bottom: 1px solid var(--pink); transform: rotate(45deg); filter: drop-shadow(0 0 5px rgba(255, 140, 203, 0.62)); transition: transform 340ms ease; }
.portal--tools:hover .tool-cursor { transform: translate(-12px, 1px) rotate(45deg); }

/* Window 3: a persistent core stays connected to its work. */
.portal__visual--agent {
  background:
    linear-gradient(145deg, rgba(11, 43, 63, 0.85), rgba(3, 16, 29, 0.98));
}

.agent-orbit,
.agent-core,
.agent-signal { position: absolute; display: block; }
.agent-orbit { top: 50%; left: 50%; border: 1px solid rgba(170, 224, 231, 0.28); border-radius: 50%; transform: translate(-50%, -50%) rotate(-12deg); }
.agent-orbit--one { width: 156px; height: 76px; }
.agent-orbit--two { width: 104px; height: 150px; transform: translate(-50%, -50%) rotate(52deg); border-color: rgba(255, 140, 203, 0.26); }
.agent-core { top: 50%; left: 50%; width: 50px; height: 50px; border: 1px solid rgba(114, 233, 255, 0.7); transform: translate(-50%, -50%) rotate(45deg); box-shadow: inset 0 0 22px rgba(114, 233, 255, 0.12); transition: transform 460ms cubic-bezier(.2,.75,.2,1), box-shadow 460ms ease; }
.agent-core i,
.agent-core b { position: absolute; display: block; border-radius: 50%; }
.agent-core i { inset: 18px; background: var(--gold); box-shadow: 0 0 15px rgba(255, 213, 138, 0.9); }
.agent-core b { top: 7px; right: 7px; width: 4px; height: 4px; background: var(--pink); box-shadow: 0 0 9px var(--pink); }
.portal--agent:hover .agent-core { transform: translate(-50%, -50%) rotate(135deg) scale(1.08); box-shadow: inset 0 0 26px rgba(114, 233, 255, 0.24), 0 0 24px rgba(114, 233, 255, 0.12); }
.agent-signal { width: 5px; height: 5px; border: 1px solid var(--cyan); transform: rotate(45deg); }
.agent-signal--one { top: 51px; left: 24%; }
.agent-signal--two { right: 22%; bottom: 43px; border-color: var(--pink); }

@media (max-width: 980px) {
  .news__inner { grid-template-columns: auto minmax(40px, 1fr) minmax(0, 3fr) auto; gap: 20px; }
  .news__item { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .portals { padding-top: 88px; }
  .portals__intro { gap: 28px; }
  .service-flow { gap: 8px; padding-right: 0; }
  .service-flow__node { min-width: 96px; min-height: 48px; padding-inline: 10px; font-size: 16px; }
  .service-flow__node--output { min-width: 112px; }
  .service-flow__core { width: 46px; height: 46px; }
  .service-flow__core span { font-size: 16px; }
  .service-flow__connector { width: 26px; flex-basis: 26px; }
  .service-flow__connector::after { width: 5px; height: 5px; }
  .service-flow__connector i { animation-name: service-flow-pulse-compact; }
  .portals__grid { grid-template-columns: 1fr; gap: 16px; }
  .portal--tools { transform: none; }
  .portal:hover,
  .portal--tools:hover { transform: translateY(-5px); }
  .portal__link { min-height: 280px; display: grid; grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr); }
  .portal__visual { height: auto; min-height: 280px; border-right: 1px solid rgba(219, 239, 242, 0.16); border-bottom: 0; }
  .portal__body { min-height: 280px; }
  .portal h3 { min-height: 74px; }
}

@media (max-width: 767px) {
  .news__inner {
    width: calc(100% - 34px);
    min-height: 128px;
    padding: 22px 0;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "title line all" "item item item";
    gap: 18px 14px;
  }
  .news h2 { grid-area: title; font-size: 15px; }
  .news__line { grid-area: line; }
  .news__list { grid-area: item; gap: 12px; }
  .news__item { grid-template-columns: 82px minmax(0, 1fr); gap: 12px; }
  .news__item a { font-size: 15px; white-space: normal; line-height: 1.5; }
  .news__all { grid-area: all; min-height: 30px; font-size: 16px; }
  .news__all .arrow { display: none; }
  .portals { min-height: 0; padding: 70px 17px 70px; }
  .portals::after { top: 110px; right: -45vw; width: 130vw; height: 300px; }
  .portals__intro { display: block; margin-bottom: 34px; }
  .portals__intro h2 { font-size: 34px; line-height: 1.46; }
  .portals__intro p { font-size: 15px; line-height: 1.85; }
  .service-flow {
    justify-content: center;
    gap: 6px;
    margin-top: 25px;
    padding: 0;
  }
  .service-flow__node { min-width: 96px; min-height: 48px; padding: 8px 9px; font-size: 16px; }
  .service-flow__node--output { min-width: 112px; }
  .service-flow__core { width: 46px; height: 46px; }
  .service-flow__core span { font-size: 16px; }
  .service-flow__connector { width: 20px; flex-basis: 20px; }
  .service-flow__connector i { animation-name: service-flow-pulse-mobile; }
  .portals__grid { width: calc(100vw - 34px); max-width: 100%; gap: 15px; }
  .portal { width: 100%; max-width: 100%; }
  .portal__link {
    width: calc(100% - 2px);
    min-height: 0;
    display: flex;
    clip-path: var(--portal-shape);
  }
  .portal__visual { height: 118px; min-height: 118px; flex-basis: 118px; border-right: 0; border-bottom: 1px solid rgba(219, 239, 242, 0.16); }
  .portal__body { min-height: 214px; padding: 19px 21px 22px; }
  .portal h3 { min-height: 66px; margin-top: 13px; font-size: 25px; line-height: 1.42; }
  .portal p { font-size: 14px; line-height: 1.75; }
  .portal__reasons { gap: 7px; line-height: 1.68; }
  .build-path--one { top: 44px; }
  .build-path--two { top: 84px; }
  .build-node--one { top: 34px; }
  .build-node--two { top: 71px; }
  .build-node--three { top: 45px; }
  .build-form { top: 20px; height: 78px; }
  .tool-slot { height: 31px; }
  .tool-slot--one { top: 10px; }
  .tool-slot--two { top: 44px; }
  .tool-slot--three { top: 78px; }
  .tool-cursor { top: 56px; }
}

@media (max-width: 340px) {
  .service-flow { gap: 4px; }
  .service-flow__node { min-width: 84px; min-height: 44px; padding-inline: 6px; font-size: 14px; }
  .service-flow__node--output { min-width: 98px; }
  .service-flow__core { width: 40px; height: 40px; }
  .service-flow__core span { font-size: 14px; }
  .service-flow__connector { width: 15px; flex-basis: 15px; }
}

/* About: a quiet statement of purpose on paper, without promotional framing. */
.about {
  position: relative;
  isolation: isolate;
  min-height: max(860px, 100svh);
  padding: 132px 24px 120px;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #17303a;
  background: #f7f8f4;
  border-top: 1px solid rgba(31, 83, 91, 0.14);
}

.about::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: min(1240px, calc(100% - 48px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(32, 122, 137, 0.44), rgba(255, 140, 203, 0.24), transparent);
}

.about::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: 0.7;
  background:
    linear-gradient(112deg, transparent 0 66%, rgba(86, 151, 158, 0.07) 66.1%, transparent 66.24%),
    linear-gradient(72deg, transparent 0 81%, rgba(255, 180, 132, 0.07) 81.1%, transparent 81.24%);
}

.about__inner {
  width: min(100%, 1240px);
  margin: 0 auto;
}

.about__opening {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.about__story h2 {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(52px, 4.1vw, 60px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.055em;
}

.about__copy {
  max-width: 700px;
  margin: 72px auto 0;
  color: #465f66;
  font-size: 16px;
  line-height: 2.55;
  letter-spacing: 0.04em;
}

.about__copy p { text-wrap: pretty; }
.about__copy p + p { margin-top: 46px; }
.about__copy .about__lead { color: #294851; font-size: 17px; }

.about__signature {
  position: relative;
  margin-top: 100px;
  color: #21434b;
  font-family: "Yuji Syuku Signature", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(58px, 4.4vw, 64px);
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}

.about__signature::before {
  content: "";
  width: 88px;
  height: 1px;
  margin: 0 auto 28px;
  display: block;
  background: linear-gradient(90deg, transparent, rgba(38, 104, 115, 0.4), transparent);
}

.about__author {
  position: absolute;
  z-index: 1;
  right: clamp(36px, 6vw, 96px);
  bottom: clamp(36px, 5vh, 58px);
  color: #667b80;
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: 0.12em;
  text-align: right;
}

.about__author span { display: block; }
.about__author span:last-child { color: #3e585f; font-size: 16px; letter-spacing: 0.16em; }

@media (max-width: 980px) {
  .about { padding-block: 112px 104px; }
  .about__story h2 { font-size: 44px; }
  .about__copy { max-width: 660px; }
  .about__signature { font-size: 52px; }
}

@media (max-width: 767px) {
  .about { min-height: max(820px, 100svh); padding: 96px 26px 88px; }
  .about__story h2 { font-size: clamp(28px, 7.95vw, 31px); line-height: 1.7; letter-spacing: 0.04em; }
  .about__copy { margin-top: 52px; font-size: clamp(14px, 3.85vw, 15px); line-height: 2.5; letter-spacing: 0.025em; }
  .about__copy p + p { margin-top: 40px; }
  .about__copy .about__lead { font-size: clamp(15px, 4.1vw, 16px); }
  .about__signature { margin-top: 72px; font-size: clamp(32px, 10.25vw, 40px); }
  .about__signature::before { width: 80px; margin-bottom: 26px; }
  .about__author { right: 26px; bottom: 26px; font-size: 14px; line-height: 1.8; }
  .about__author span:last-child { font-size: 14px; }
}

/* Clients: quiet proof, designed to grow one relationship at a time. */
.clients {
  position: relative;
  padding: 88px 24px 82px;
  color: #19303a;
  background: #eef2ef;
  border-top: 1px solid rgba(35, 76, 82, 0.12);
  border-bottom: 1px solid rgba(35, 76, 82, 0.14);
}

.clients__inner {
  width: min(100%, 980px);
  margin: 0 auto;
  text-align: center;
}

.clients h2 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.55;
}

.clients h2::after {
  content: "";
  width: 42px;
  height: 1px;
  margin: 20px auto 0;
  display: block;
  background: rgba(31, 103, 112, 0.42);
}

.clients__list {
  max-width: 700px;
  margin: 38px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 68px;
}

.client {
  min-width: 0;
  height: 78px;
  padding: 8px 12px;
  display: grid;
  place-items: center;
  text-decoration: none;
}

.client img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: none;
  opacity: 1;
  transition: filter 280ms ease, opacity 280ms ease, transform 280ms ease;
}

.client--cinnamil img { max-width: 176px; max-height: 54px; }
.client--apria img { max-width: 238px; max-height: 46px; }
.client:hover img,
.client:focus-visible img {
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}

.client:focus-visible {
  outline: 2px solid #177d8d;
  outline-offset: 3px;
}

@media (max-width: 980px) {
  .clients__list { gap: 28px; }
}

@media (max-width: 767px) {
  .clients { padding: 64px 12px 58px; }
  .clients h2 { font-size: 26px; }
  .clients__list {
    width: 100%;
    max-width: 390px;
    margin-top: 32px;
    grid-template-columns: 0.95fr 1.25fr;
    gap: 20px;
  }
  .client {
    height: 70px;
    padding: 5px 0;
  }
  .client img { filter: none; opacity: 1; }
  .client--cinnamil img { max-width: 136px; max-height: 46px; }
  .client--apria img { max-width: 166px; max-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .client img { transition: none; }
  .service-flow__connector i { animation: none; opacity: 0.72; }
}

/* Travel memo: the brand's imagined dawn becomes a real road. */
.travel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #20363a;
  background: #e8dec9;
}

.travel__gateway {
  position: relative;
  isolation: isolate;
  height: clamp(282px, 24vw, 330px);
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--paper);
  background: #061826;
}

.travel__scene,
.travel__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.travel__scene { z-index: -3; object-fit: cover; object-position: center; }
.travel__veil {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(2, 14, 24, 0.92) 0%, rgba(2, 14, 24, 0.69) 34%, rgba(2, 14, 24, 0.13) 65%, rgba(2, 14, 24, 0.12)),
    linear-gradient(180deg, rgba(2, 14, 24, 0.18), transparent 42%, rgba(2, 14, 24, 0.78));
}

.travel__gateway::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.52;
  background: linear-gradient(108deg, transparent 46%, rgba(114, 233, 255, 0.14) 46.1%, transparent 46.25%);
  background-size: 230% 100%;
  animation: travel-scan 9s ease-in-out infinite;
}

.travel__inner {
  width: min(100% - 48px, 1240px);
  height: 100%;
  margin: 0 auto;
  padding: 30px 0;
  display: flex;
  align-items: center;
}

.travel__copy { max-width: 650px; }
.travel__copy h2 { font-weight: 500; text-shadow: 0 5px 28px rgba(0, 0, 0, 0.4); }
.travel__copy h2 span { display: block; color: rgba(239, 247, 245, 0.72); font-size: 15px; font-weight: 500; line-height: 1.5; }
.travel__copy h2 strong { margin-top: 12px; display: block; font-size: clamp(36px, 3.6vw, 46px); font-weight: 500; line-height: 1.34; }
.travel__lead { margin-top: 18px; color: rgba(239, 247, 245, 0.82); font-size: 17px; letter-spacing: 0.08em; text-shadow: 0 5px 28px rgba(0, 0, 0, 0.4); }

/* The seam between the electronic card shelf above and the 16-bit town
   below. Read top to bottom it is the same 16px grid twice: first as a
   wireframe of cyan lines (electronic), then as filled blocks in the
   town's own palette (matter). The two masks cross over in the middle,
   and the loose blocks there flip between the two states. */
.travel__pixel-gate {
  position: relative;
  height: 152px;
  overflow: hidden;
  image-rendering: pixelated;
  background: linear-gradient(180deg, #03111e 0%, #041723 52%, #03131c 100%);
}

/* Electronic: lines only, no fill. Strongest at the top. */
.travel__pixel-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(114, 233, 255, 0.4) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(180deg, rgba(114, 233, 255, 0.26) 0 1px, transparent 1px 16px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.72) 36%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.72) 36%, transparent 80%);
}

/* Matter: the same grid, filled in the town's greens. Strongest at the
   bottom, where Mori City starts. */
.travel__pixel-gate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 90deg at 1px 1px, #2b4f42 25%, #33594a 0 50%, #274639 0 75%, #2f5445 0);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(180deg, transparent 16%, rgba(0, 0, 0, 0.45) 54%, #000 94%);
  mask-image: linear-gradient(180deg, transparent 16%, rgba(0, 0, 0, 0.45) 54%, #000 94%);
}

/* The blocks caught mid-change, scattered across the crossover band. */
.travel__pixel-gate i {
  position: absolute;
  z-index: 1;
  top: var(--y);
  left: var(--x);
  width: 16px;
  height: 16px;
  display: block;
  animation: gate-materialise 6s steps(1, end) infinite;
  animation-delay: var(--d);
}

.travel__pixel-gate i:nth-child(1) { --x: 9%; --y: 30%; --d: -0.4s; }
.travel__pixel-gate i:nth-child(2) { --x: 21%; --y: 58%; --d: -2.9s; }
.travel__pixel-gate i:nth-child(3) { --x: 33%; --y: 41%; --d: -1.5s; }
.travel__pixel-gate i:nth-child(4) { --x: 44%; --y: 66%; --d: -4.1s; }
.travel__pixel-gate i:nth-child(5) { --x: 52%; --y: 26%; --d: -2.2s; }
.travel__pixel-gate i:nth-child(6) { --x: 63%; --y: 55%; --d: -5.2s; }
.travel__pixel-gate i:nth-child(7) { --x: 74%; --y: 36%; --d: -3.3s; }
.travel__pixel-gate i:nth-child(8) { --x: 84%; --y: 63%; --d: -0.9s; }
.travel__pixel-gate i:nth-child(9) { --x: 92%; --y: 46%; --d: -4.7s; }

@keyframes gate-materialise {
  0% {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(114, 233, 255, 0.8), 0 0 9px rgba(114, 233, 255, 0.45);
  }
  50% {
    background: #33594a;
    box-shadow: inset 0 0 0 1px rgba(51, 89, 74, 0);
  }
  100% {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(114, 233, 255, 0.8), 0 0 9px rgba(114, 233, 255, 0.45);
  }
}

/* Without motion the band still reads top-to-bottom: the blocks simply
   sit on the side of the change their height puts them on. */
@media (prefers-reduced-motion: reduce) {
  .travel__pixel-gate i { animation: none; }
  .travel__pixel-gate i:nth-child(1),
  .travel__pixel-gate i:nth-child(5),
  .travel__pixel-gate i:nth-child(7) {
    box-shadow: inset 0 0 0 1px rgba(114, 233, 255, 0.7);
  }
  .travel__pixel-gate i:nth-child(2),
  .travel__pixel-gate i:nth-child(4),
  .travel__pixel-gate i:nth-child(6),
  .travel__pixel-gate i:nth-child(8),
  .travel__pixel-gate i:nth-child(9) {
    background: #33594a;
  }
}

@media (max-width: 760px) {
  .travel__pixel-gate { height: 112px; }
  .travel__pixel-gate i { width: 12px; height: 12px; }
}

@keyframes travel-scan { 0%, 28% { background-position: 135% 0; } 70%, 100% { background-position: -120% 0; } }

/* Dispatch: a small, original 16-bit travel town. */
.dispatch {
  position: relative;
  isolation: isolate;
  min-height: max(720px, 100svh);
  padding: clamp(28px, 5svh, 52px) 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #eef7f4;
  background:
    radial-gradient(circle at 88% 10%, rgba(114, 233, 255, 0.08), transparent 24%),
    linear-gradient(180deg, #03131c 0%, #08212a 42%, #0d2630 100%);
}
.dispatch::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 5%;
  left: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 213, 138, 0.6), rgba(114, 233, 255, 0.44), transparent);
  pointer-events: none;
}
.dispatch::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 210px;
  background: linear-gradient(180deg, transparent, rgba(1, 12, 18, 0.68));
  pointer-events: none;
}
.dispatch__inner { position: relative; z-index: 1; width: min(100%, 1240px); margin: 0 auto; }

.town-game {
  overflow: hidden;
  border: 6px solid #13212a;
  border-radius: 14px;
  background: #152a32;
  box-shadow: 0 28px 74px rgba(0, 7, 12, 0.4), 0 7px 0 rgba(0, 5, 9, 0.52);
  font-family: ui-monospace, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.town-map {
  position: relative;
  height: clamp(620px, calc(100svh - 112px), 760px);
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  image-rendering: pixelated;
  background: #79aa6c;
}
.town-map__location {
  position: absolute;
  z-index: 18;
  top: 18px;
  left: 22px;
  min-width: 168px;
  padding: 10px 18px 9px;
  display: grid;
  gap: 5px;
  border: 4px solid #25342f;
  border-radius: 3px;
  color: #293431;
  background: #f7f0d7;
  box-shadow: 0 0 0 3px #eee5c9, 0 0 0 6px #25342f, 0 7px 18px rgba(22, 40, 32, 0.25);
  text-align: center;
  pointer-events: none;
}
.town-map__location strong { font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; }
.town-map__location small { color: #785463; font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: 0.08em; }
.town-map::before,
.town-map::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.town-map::before {
  inset: 0;
  opacity: 0.42;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(34, 74, 58, 0.12) 50%, transparent 50.5%),
    linear-gradient(transparent 49.5%, rgba(34, 74, 58, 0.12) 50%, transparent 50.5%);
  background-size: 32px 32px;
}
.town-map::after {
  inset: 9px;
  border: 2px solid rgba(226, 239, 196, 0.2);
}
.town-map__ground {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 12% 62%, #e8d37d 0 2px, transparent 3px),
    radial-gradient(circle at 86% 24%, #d88ca8 0 2px, transparent 3px),
    conic-gradient(from 90deg at 1px 1px, #79aa6c 25%, #73a366 0 50%, #82b476 0 75%, #76a669 0);
  background-size: 72px 54px, 86px 68px, 32px 32px;
}

.town-map__river {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 7.5%;
  overflow: hidden;
  border-left: 5px solid #d9c97f;
  background: #4d9aaa;
  box-shadow: inset 7px 0 0 #6ab5bb;
}
.town-map__river::before,
.town-map__river::after,
.town-map__river i {
  content: "";
  position: absolute;
  right: 10%;
  width: 48%;
  height: 3px;
  background: #a8ded5;
  box-shadow: -13px 8px 0 #3f849b;
}
.town-map__river::before { top: 14%; }
.town-map__river::after { top: 58%; right: 28%; }
.town-map__river i:nth-child(1) { top: 34%; }
.town-map__river i:nth-child(2) { top: 76%; right: 34%; }
.town-map__river i:nth-child(3) { top: 90%; }

.town-road {
  position: absolute;
  z-index: 2;
  display: block;
  background:
    linear-gradient(90deg, rgba(132, 104, 62, 0.2) 1px, transparent 1px),
    linear-gradient(rgba(132, 104, 62, 0.16) 1px, transparent 1px),
    #d7c88d;
  background-size: 16px 16px;
  box-shadow: inset 0 0 0 4px #c0b071;
}
.town-road--main { top: 0; bottom: 0; left: 46.5%; width: 8%; }
.town-road--north { top: 40%; right: 7%; left: 0; height: 9%; }
.town-road--south { top: 73%; right: 7%; left: 0; height: 9%; }

.town-map__trees i {
  position: absolute;
  z-index: 4;
  top: var(--y);
  left: var(--x);
  width: 42px;
  height: 48px;
  display: block;
  border-bottom: 7px solid #6c5137;
  transform: translate(-50%, -50%);
}
.town-map__trees i::before,
.town-map__trees i::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.town-map__trees i::before { top: 0; width: 39px; height: 32px; background: #285f4d; filter: drop-shadow(0 4px 0 #194838); }
.town-map__trees i::after { top: 14px; width: 48px; height: 32px; background: #32705a; }

.town-building {
  position: relative;
  z-index: 6;
  width: 23%;
  padding: 0;
  display: block;
  border: 0;
  color: #172c30;
  background: none;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.town-building--instagram { position: absolute; top: 7%; left: 9%; --roof: #b45d73; --wall: #f0d6b5; --accent: #6e405e; }
.town-building--youtube { position: absolute; top: 7%; right: 15%; --roof: #b44e46; --wall: #e8c99e; --accent: #69403b; }
.town-building--note { position: absolute; top: 47%; left: 9%; --roof: #3d796b; --wall: #e5dab9; --accent: #2c5d57; }
.town-building--atem { position: absolute; top: 47%; right: 15%; --roof: #376a86; --wall: #d9d4ba; --accent: #265169; }

.town-building__art {
  position: relative;
  height: clamp(116px, 13vw, 158px);
  display: block;
  transition: filter 160ms ease, transform 160ms steps(2, end);
}
.town-building__art::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 42%;
  right: 10%;
  bottom: 6%;
  left: 10%;
  border: 4px solid #5a4839;
  background:
    linear-gradient(90deg, transparent 15%, rgba(96, 75, 51, 0.13) 15% 17%, transparent 17% 49%, rgba(96, 75, 51, 0.16) 49% 51%, transparent 51% 83%, rgba(96, 75, 51, 0.13) 83% 85%, transparent 85%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 18%),
    var(--wall);
  box-shadow: inset 0 -7px 0 rgba(103, 77, 48, 0.16), 0 7px 0 rgba(45, 65, 45, 0.25);
}
.town-building__art::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
}
.town-building--instagram .town-building__art::after {
  width: 32px;
  height: 23px;
  border: 4px solid #4e3e3a;
  border-radius: 4px;
  background: radial-gradient(circle, #a7e2d2 0 4px, #416d72 5px 7px, #f0d6b5 8px);
  box-shadow: 8px -5px 0 -5px #f5d677;
}
.town-building--youtube .town-building__art::after {
  width: 48px;
  height: 20px;
  border: 4px solid #4e3e3a;
  background:
    radial-gradient(circle at 7px 6px, #f5d677 0 2px, transparent 3px),
    radial-gradient(circle at 20px 6px, #f5d677 0 2px, transparent 3px),
    radial-gradient(circle at 33px 6px, #f5d677 0 2px, transparent 3px),
    #8b4f48;
}
.town-building--note .town-building__art::after {
  width: 38px;
  height: 28px;
  border: 4px solid #4e3e3a;
  background: repeating-linear-gradient(90deg, #d8b960 0 4px, #985f58 4px 8px, #5a8690 8px 12px);
  box-shadow: inset 0 -5px 0 rgba(47, 68, 55, 0.28);
}
.town-building--atem .town-building__art::after {
  width: 29px;
  height: 29px;
  border: 4px solid #3e4544;
  border-radius: 50%;
  background: radial-gradient(circle, #f5f1cf 0 3px, #74d3d0 4px 8px, #376a86 9px 11px, #d9d4ba 12px);
  box-shadow: 0 0 0 4px rgba(114, 233, 255, 0.2);
}
.town-building__roof {
  position: absolute;
  z-index: 3;
  top: 10%;
  right: 0;
  left: 0;
  height: 50%;
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  border-bottom: 6px solid #513d3a;
  background:
    linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, 0.14) 48% 52%, transparent 53%),
    repeating-linear-gradient(90deg, var(--roof) 0 13px, color-mix(in srgb, var(--roof) 82%, black) 13px 16px);
  filter: drop-shadow(0 7px 0 rgba(41, 51, 39, 0.25));
}
.town-building--youtube .town-building__roof { top: 14%; height: 46%; clip-path: polygon(8% 15%, 92% 15%, 100% 100%, 0 100%); }
.town-building--note .town-building__roof { top: 1%; height: 59%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.town-building--atem .town-building__roof { top: 7%; height: 53%; clip-path: polygon(22% 0, 78% 0, 92% 18%, 100% 100%, 0 100%, 8% 18%); }
.town-building__window,
.town-building__door,
.town-building__chimney { position: absolute; z-index: 4; display: block; }
.town-building__window {
  top: 58%;
  left: 22%;
  width: 21%;
  height: 22%;
  border: 4px solid #594538;
  background: #9fe0d2;
  box-shadow: inset -6px -5px 0 #5b9fa0, 0 0 0 3px rgba(255, 223, 139, 0.18);
}
.town-building__window::before,
.town-building__window::after { content: ""; position: absolute; background: rgba(65, 82, 75, 0.58); }
.town-building__window::before { top: 0; bottom: 0; left: 47%; width: 3px; }
.town-building__window::after { top: 46%; right: 0; left: 0; height: 3px; }
.town-building__door {
  right: 24%;
  bottom: 6%;
  width: 21%;
  height: 32%;
  border: 4px solid #523e35;
  background: var(--accent);
  transform-origin: left center;
}
.town-building__door::before { content: ""; position: absolute; right: -7px; bottom: -8px; left: -7px; height: 5px; background: #6d5a48; box-shadow: 0 4px 0 rgba(48, 63, 49, 0.28); }
.town-building__door::after { content: ""; position: absolute; top: 48%; right: 3px; width: 4px; height: 4px; background: #f4d77e; }
.town-building__chimney { top: 3%; right: 18%; width: 12%; height: 29%; border: 4px solid #55453d; background: #8d725d; }
.town-building--instagram .town-building__chimney { right: 14%; width: 10%; height: 24%; background: #87695d; }
.town-building--youtube .town-building__chimney { top: 8%; right: 16%; width: 15%; height: 23%; background: #805a51; }
.town-building--note .town-building__chimney { top: 15%; right: 21%; width: 10%; height: 22%; }
.town-building--atem .town-building__chimney { top: -5%; right: 14%; width: 8%; height: 35%; border-width: 3px; background: #537888; }
.town-building--atem .town-building__chimney::before { content: ""; position: absolute; top: -8px; left: 50%; width: 15px; height: 3px; background: #354747; transform: translateX(-50%); }
.town-building--atem .town-building__chimney::after { content: ""; position: absolute; top: -15px; left: 50%; width: 5px; height: 5px; background: #8fe1dc; box-shadow: 0 0 0 3px #354747; transform: translateX(-50%); }

.town-building__sign {
  position: relative;
  z-index: 8;
  width: fit-content;
  min-width: 126px;
  max-width: 100%;
  margin: -4px auto 0;
  padding: 8px 13px 7px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid #54483a;
  border-radius: 3px;
  color: #2b332f;
  background: #f5e9bd;
  box-shadow: 0 5px 0 rgba(43, 61, 44, 0.32);
}
.town-building__sign strong { font-size: clamp(13px, 1.3vw, 16px); line-height: 1.25; letter-spacing: 0.02em; }
.town-building__sign small { margin-top: 4px; color: #665f4d; font-size: 8px; font-weight: 700; line-height: 1; }
.town-building:hover .town-building__art,
.town-building:focus-visible .town-building__art,
.town-building.is-selected .town-building__art { filter: brightness(1.1) saturate(1.12); transform: translateY(-3px); }
.town-building:focus-visible { outline: 4px solid #fff3b6; outline-offset: 5px; }
.town-building.is-selected .town-building__sign { color: #fff9dc; background: #3d5660; }
.town-building.is-speaking .town-building__sign { animation: town-sign-talk 420ms steps(2, end) 2; }
.town-building.is-entering .town-building__door { animation: town-door-open 480ms steps(4, end) forwards; }
.town-building.is-entering .town-building__art::before { animation: town-building-light 480ms steps(3, end) forwards; }

.town-well {
  position: absolute;
  z-index: 5;
  top: 55%;
  left: 48.1%;
  width: 5%;
  min-width: 46px;
  aspect-ratio: 1;
  border: 6px solid #73624a;
  border-radius: 50%;
  background: #315d6c;
  box-shadow: inset 0 0 0 5px #a8946a, 0 6px 0 rgba(45, 61, 49, 0.28);
  transform: translateX(-50%);
}
.town-well i { position: absolute; top: -18px; left: 50%; width: 4px; height: 21px; background: #6b513a; box-shadow: -15px 5px 0 #6b513a, 15px 5px 0 #6b513a; transform: translateX(-50%); }

.town-traveler {
  --traveler-x: 50%;
  --traveler-y: 91%;
  --traveler-coat: #a94349;
  --traveler-coat-shadow: #712f35;
  --traveler-cap: #8e343b;
  position: absolute;
  z-index: 12;
  top: var(--traveler-y);
  left: var(--traveler-x);
  width: 30px;
  height: 48px;
  pointer-events: none;
  transform: translate(-50%, -100%);
}
.town-traveler__shadow { position: absolute; right: 1px; bottom: -1px; left: 1px; height: 9px; border-radius: 50%; background: rgba(32, 55, 42, 0.38); }
.town-traveler__sprite {
  --sprite-scale: 1;
  position: absolute;
  inset: 0;
  display: block;
  transform: scaleX(var(--sprite-scale));
  transform-origin: center bottom;
}
.town-traveler__sprite::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 2px;
  left: 7px;
  width: 18px;
  height: 17px;
  border: 3px solid #423d37;
  border-radius: 5px 5px 3px 3px;
  background:
    linear-gradient(90deg, transparent 4px, #4b3d35 4px 7px, transparent 7px 11px, #4b3d35 11px 14px, transparent 14px) 0 9px / 100% 3px no-repeat,
    #d4a47e;
  box-shadow: inset 0 5px 0 var(--traveler-cap), inset -3px 0 0 rgba(100, 65, 48, 0.22);
}
.town-traveler__sprite::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 5px;
  width: 22px;
  height: 23px;
  border: 3px solid #3e3c39;
  background: var(--traveler-coat);
  box-shadow: inset 0 -7px 0 #d7c07d, inset 4px 0 0 rgba(255, 255, 255, 0.12), -5px 4px 0 -2px #d4a47e, 5px 4px 0 -2px #d4a47e;
}
.town-traveler__sprite b,
.town-traveler__sprite span { position: absolute; z-index: 0; bottom: 2px; width: 7px; height: 12px; background: #4a4138; }
.town-traveler__sprite b { left: 7px; }
.town-traveler__sprite span { right: 7px; }
.town-traveler[data-facing="up"] .town-traveler__sprite::before {
  background: var(--traveler-cap);
  box-shadow: inset 0 -5px 0 #6b4b3f, inset 4px 0 0 rgba(255, 255, 255, 0.08);
}
.town-traveler[data-facing="up"] .town-traveler__sprite::after {
  background: var(--traveler-coat);
  box-shadow: inset 0 -8px 0 #d7c07d, inset 0 0 0 5px var(--traveler-coat-shadow), inset 4px 0 0 rgba(255, 255, 255, 0.1);
}
.town-traveler[data-facing="left"] .town-traveler__sprite::before,
.town-traveler[data-facing="right"] .town-traveler__sprite::before {
  left: 8px;
  width: 16px;
  background: linear-gradient(90deg, var(--traveler-cap) 0 45%, #d4a47e 45%);
  box-shadow: inset 0 4px 0 var(--traveler-cap);
}
.town-traveler[data-facing="left"] .town-traveler__sprite::after,
.town-traveler[data-facing="right"] .town-traveler__sprite::after { left: 7px; width: 18px; }
.town-traveler[data-facing="left"] .town-traveler__sprite { --sprite-scale: -1; }
.town-traveler.is-walking .town-traveler__sprite { animation: town-walk 170ms steps(2, end) infinite; }
.town-traveler.is-walking .town-traveler__sprite b { animation: town-leg-a 170ms steps(2, end) infinite; }
.town-traveler.is-walking .town-traveler__sprite span { animation: town-leg-b 170ms steps(2, end) infinite; }
.town-traveler.is-entering { animation: town-traveler-enter 480ms steps(4, end) forwards; }

.town-dialog {
  position: absolute;
  z-index: 20;
  right: 22px;
  bottom: 20px;
  left: 22px;
  min-height: 82px;
  padding: 17px 104px 15px 24px;
  border: 4px solid #25342f;
  border-radius: 3px;
  color: #27322f;
  background: #f7f0d7;
  box-shadow: 0 0 0 3px #eee5c9, 0 0 0 7px #25342f, 0 10px 24px rgba(22, 40, 32, 0.3);
  image-rendering: pixelated;
}
.town-dialog__place {
  display: block;
  color: #a14e60;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}
.town-dialog p { margin-top: 10px; display: flex; align-items: center; gap: 12px; }
.town-dialog p strong { font-size: 14px; font-weight: 700; line-height: 1.45; letter-spacing: 0.02em; }
.town-dialog p i {
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #a14e60;
  animation: town-dialog-cursor 760ms steps(2, end) infinite;
}
.town-game__keys {
  position: absolute;
  right: 16px;
  bottom: 13px;
  color: #69716a;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

@keyframes town-walk {
  0% { transform: scaleX(var(--sprite-scale)) translateY(0); }
  50% { transform: scaleX(var(--sprite-scale)) translateY(-3px); }
}
@keyframes town-leg-a { 50% { transform: translateY(-3px); } }
@keyframes town-leg-b { 50% { transform: translateY(3px); } }
@keyframes town-sign-talk {
  50% { transform: translateY(-5px); }
}
@keyframes town-door-open {
  0% { transform: perspective(80px) rotateY(0); filter: brightness(1); }
  50%, 100% { transform: perspective(80px) rotateY(-76deg); filter: brightness(1.55); }
}
@keyframes town-building-light {
  to { filter: brightness(1.28); box-shadow: inset 0 -7px 0 rgba(103, 77, 48, 0.12), 0 7px 0 rgba(45, 65, 45, 0.25), inset 0 0 18px rgba(255, 230, 153, 0.7); }
}
@keyframes town-traveler-enter {
  0% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
  70% { transform: translate(-50%, -118%) scale(0.72); opacity: 1; filter: brightness(1.35); }
  100% { transform: translate(-50%, -124%) scale(0.18); opacity: 0; filter: brightness(1.8); }
}
@keyframes town-dialog-cursor {
  50% { transform: translateX(3px); }
}

/* Contact: the next destination appears where dawn and signal light meet. */
.contact {
  position: relative;
  isolation: isolate;
  padding: 132px 24px;
  overflow: hidden;
  color: #172c30;
  background:
    radial-gradient(circle at 83% 10%, rgba(255, 213, 138, 0.24), transparent 25%),
    radial-gradient(circle at 12% 90%, rgba(255, 140, 203, 0.09), transparent 31%),
    linear-gradient(132deg, #f2e3d1 0%, #ece4e7 58%, #e8d8de 100%);
}
.contact::after { content: ""; position: absolute; z-index: -1; top: 0; left: 7%; width: 86%; height: 1px; background: linear-gradient(90deg, transparent, rgba(114, 233, 255, 0.55), rgba(255, 213, 138, 0.68), transparent); }
.contact__system {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -80px;
  width: min(760px, 62vw);
  aspect-ratio: 1;
  transform: translateY(-50%) rotate(-9deg);
  pointer-events: none;
}
.contact__orbit {
  --orbit-size: 30%;
  --orbit-speed: 12s;
  --planet-size: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--orbit-size);
  aspect-ratio: 1;
  border: 1px solid rgba(24, 72, 76, 0.2);
  border-radius: 50%;
  animation: contact-orbit var(--orbit-speed) linear infinite;
}
.contact__orbit i {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--planet-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #596264 0 5%, #20292a 28%, #05090a 70%, #010303 100%);
  box-shadow: 0 5px 12px rgba(3, 11, 12, 0.3), inset -2px -3px 5px rgba(0, 0, 0, 0.48);
  transform: translate(-50%, -50%);
}
.contact__orbit--1 {
  --orbit-size: 27%;
  --orbit-speed: 11s;
  --planet-size: 9px;
  margin: -13.5% 0 0 -13.5%;
  animation-delay: -4s;
}
.contact__orbit--2 {
  --orbit-size: 48%;
  --orbit-speed: 18s;
  --planet-size: 13px;
  margin: -24% 0 0 -24%;
  border-color: rgba(181, 105, 91, 0.19);
  animation-delay: -13s;
}
.contact__orbit--3 {
  --orbit-size: 70%;
  --orbit-speed: 29s;
  --planet-size: 17px;
  margin: -35% 0 0 -35%;
  border-color: rgba(24, 113, 119, 0.17);
  animation-delay: -7s;
}
.contact__orbit--4 {
  --orbit-size: 92%;
  --orbit-speed: 43s;
  --planet-size: 11px;
  margin: -46% 0 0 -46%;
  border-color: rgba(181, 105, 91, 0.14);
  animation-delay: -31s;
}
.contact__sun {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff8df 0 12%, #f2cf85 34%, #b97761 68%, rgba(185, 119, 97, 0.06) 71%);
  box-shadow: 0 0 20px rgba(242, 207, 133, 0.45), 0 0 54px rgba(185, 119, 97, 0.22);
  transform: translate(-50%, -50%);
}
.contact__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1120px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 224px;
  align-items: center;
  gap: clamp(70px, 10vw, 148px);
}
.contact__copy h2 { font-size: 46px; font-weight: 500; line-height: 1.55; }
.contact-title__mobile-break { display: none; }
.contact__copy > p { margin-top: 28px; max-width: 670px; color: #52686a; font-size: 16px; line-height: 2; }
.contact__line {
  position: relative;
  min-width: 238px;
  min-height: 56px;
  margin-top: 40px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  color: #f7f4eb;
  background: #a74e6b;
  text-decoration: none;
  font-size: 15px;
  overflow: hidden;
  transition: background 240ms ease, transform 240ms ease;
}
.contact__line::before { content: ""; position: absolute; inset: 0; transform: translateX(-115%); background: linear-gradient(108deg, transparent 30%, rgba(114, 233, 255, 0.2) 46%, rgba(255, 140, 203, 0.16) 52%, rgba(255, 213, 138, 0.2) 58%, transparent 72%); transition: transform 620ms cubic-bezier(.16,1,.3,1); }
.contact__line > * { position: relative; z-index: 1; }
.contact__line:hover,
.contact__line:focus-visible { background: #b35c78; transform: translateY(-3px); }
.contact__line:hover::before,
.contact__line:focus-visible::before { transform: translateX(115%); }
.contact__line:focus-visible { outline: 3px solid #a74e6b; outline-offset: 4px; }

.contact__qr {
  position: relative;
  right: 0;
  bottom: -48px;
  align-self: end;
  justify-self: end;
  padding: 18px;
  display: grid;
  gap: 15px;
  border: 1px solid rgba(33, 87, 88, 0.24);
  color: #315c5f;
  background: rgba(248, 245, 237, 0.54);
  text-decoration: none;
  transition: transform 260ms ease, border-color 260ms ease;
}
.contact__qr::before,
.contact__qr::after { content: ""; position: absolute; width: 20px; height: 20px; }
.contact__qr::before { top: -1px; left: -1px; border-top: 1px solid #1c8587; border-left: 1px solid #1c8587; }
.contact__qr::after { right: -1px; bottom: -1px; border-right: 1px solid #c36e83; border-bottom: 1px solid #c36e83; }
.contact__qr:hover,
.contact__qr:focus-visible { transform: translateY(-4px); border-color: rgba(33, 87, 88, 0.5); }
.contact__qr:focus-visible { outline: 3px solid #1b7776; outline-offset: 4px; }
.contact__qr img { width: 100%; display: block; }
.contact__qr span { font: 9px/1 ui-sans-serif, system-ui, sans-serif; text-align: center; }

.site-footer {
  position: relative;
  isolation: isolate;
  padding: 76px 24px 24px;
  overflow: visible;
  color: rgba(239, 246, 241, 0.78);
  background:
    radial-gradient(circle at 82% -22%, rgba(114, 233, 255, 0.11), transparent 34%),
    linear-gradient(158deg, #061722, #09241f);
}
.site-footer::before { content: ""; position: absolute; z-index: 2; top: 0; left: 5%; width: 90%; height: 1px; background: linear-gradient(90deg, rgba(114, 233, 255, 0.9), rgba(226, 244, 248, 0.15) 30%, rgba(226, 244, 248, 0.15) 68%, rgba(255, 140, 203, 0.76)); }
.site-footer__orbs {
  position: absolute;
  z-index: 0;
  top: -180px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

.site-footer__orbs i {
  position: absolute;
  bottom: -12%;
  left: var(--orb-x);
  width: var(--orb-size);
  aspect-ratio: 1;
  border: 1px solid rgba(193, 238, 239, 0.24);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle at 32% 26%, rgba(255, 250, 220, 0.48) 0 5%, rgba(114, 233, 255, 0.15) 28%, rgba(255, 140, 203, 0.06) 58%, transparent 72%);
  box-shadow: inset -3px -5px 10px rgba(4, 20, 28, 0.22), 0 0 18px rgba(114, 233, 255, 0.1);
  animation: footer-orb-rise var(--orb-speed) linear var(--orb-delay) infinite;
}
.site-footer__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1240px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(360px, 0.8fr) minmax(220px, 0.62fr);
  gap: 70px;
}
.site-footer .brand { width: fit-content; color: #f5f3e9; }
.site-footer__brand > p { display: none; }
.site-footer__address {
  margin-top: 24px;
  color: rgba(229, 241, 234, 0.72);
  font-size: 14px;
  font-style: normal;
  line-height: 1.8;
}
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 7px 30px; }
.site-footer__heading {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  color: rgba(229, 241, 234, 0.72);
  font-size: 16px;
  letter-spacing: 0.16em;
}
.site-footer__nav a,
.site-footer__legal a { min-height: 44px; display: inline-flex; align-items: center; color: rgba(235, 243, 238, 0.78); font-size: 14px; text-decoration: none; }
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible,
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible { color: var(--gold); }
.site-footer__nav a:focus-visible,
.site-footer__legal a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.site-footer__legal { display: grid; align-content: start; }
.site-footer a[aria-current="page"] { color: var(--gold); }
.site-footer__bottom {
  position: relative;
  z-index: 1;
  width: min(100%, 1240px);
  min-height: 72px;
  margin: 54px auto 0;
  padding-top: 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid rgba(223, 237, 228, 0.14);
}
.site-footer__bottom small { color: rgba(229, 241, 234, 0.72); font-size: 16px; }

@media (max-width: 980px) {
  .travel__inner { grid-template-columns: minmax(0, 1fr) 190px; gap: 52px; }
  .town-map { min-height: 590px; }
  .contact__inner { grid-template-columns: minmax(0, 1fr) 190px; gap: 44px; }
  .contact__copy h2 { font-size: 38px; }
  .contact-title__mobile-break { display: block; }
  .contact__qr { right: 0; bottom: -30px; padding: 14px; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__legal { grid-column: 2; }
}

@media (max-width: 767px) {
  .travel__gateway { height: 230px; align-items: stretch; }
  .travel__scene { object-position: 82% center; }
  .travel__veil { background: linear-gradient(90deg, rgba(2, 14, 24, 0.84) 0%, rgba(2, 14, 24, 0.57) 50%, rgba(2, 14, 24, 0.2)), linear-gradient(180deg, rgba(2, 14, 24, 0.12), transparent 44%, rgba(2, 14, 24, 0.84)); }
  .travel__inner { width: calc(100% - 34px); padding: 24px 0; }
  .travel__copy h2 span { font-size: 14px; }
  .travel__copy h2 strong { margin-top: 8px; font-size: clamp(25px, 7vw, 28px); line-height: 1.35; }
  .travel__lead { margin-top: 12px; font-size: 15px; }
  .travel__pixel-gate { height: 72px; }
  .travel__pixel-gate::before { background-size: 12px 12px; }

  .dispatch { min-height: max(720px, 100svh); padding: 12px; }
  .town-game { border-width: 4px; border-radius: 12px; }
  .town-map { height: calc(max(720px, 100svh) - 32px); min-height: 0; }
  .town-map__location { top: 14px; left: 13px; min-width: 132px; padding: 8px 11px 7px; gap: 4px; border-width: 3px; box-shadow: 0 0 0 3px #eee5c9, 0 0 0 5px #25342f, 0 6px 14px rgba(22, 40, 32, 0.22); }
  .town-map__location strong { font-size: 14px; }
  .town-map__location small { font-size: 7px; }
  .town-map::before { background-size: 24px 24px; }
  .town-map__ground { background-size: 66px 50px, 72px 60px, 24px 24px; }
  .town-map__river { width: 6%; border-left-width: 3px; }
  .town-road--main { left: 46%; width: 9%; }
  .town-road--north { top: 38%; right: 5%; height: 7%; }
  .town-road--south { top: 72%; right: 5%; height: 7%; }
  .town-map__trees i { width: 32px; height: 38px; }
  .town-map__trees i::before { width: 30px; height: 26px; }
  .town-map__trees i::after { top: 12px; width: 38px; height: 26px; }
  .town-map__trees i:nth-child(3),
  .town-map__trees i:nth-child(4),
  .town-map__trees i:nth-child(10),
  .town-map__trees i:nth-child(11) { display: none; }
  .town-building { width: 39%; }
  .town-building--instagram { top: 7%; left: 3%; }
  .town-building--youtube { top: 7%; right: 7%; }
  .town-building--note { top: 46%; left: 3%; }
  .town-building--atem { top: 46%; right: 7%; }
  .town-building__art { height: 126px; }
  .town-building__sign { min-width: 112px; padding: 7px 9px 6px; }
  .town-building__sign strong { font-size: 13px; }
  .town-building__sign small { font-size: 7px; }
  .town-well { top: 56%; left: 50%; min-width: 34px; border-width: 4px; }
  .town-traveler { width: 27px; height: 45px; }
  .town-dialog { right: 13px; bottom: 14px; left: 13px; min-height: 91px; padding: 16px 72px 16px 17px; border-width: 3px; box-shadow: 0 0 0 3px #eee5c9, 0 0 0 6px #25342f, 0 8px 20px rgba(22, 40, 32, 0.3); }
  .town-dialog__place { font-size: 8px; }
  .town-dialog p { margin-top: 9px; gap: 8px; }
  .town-dialog p strong { font-size: 13px; line-height: 1.55; }
  .town-dialog p i { border-top-width: 5px; border-bottom-width: 5px; border-left-width: 7px; }
  .town-game__keys { right: 10px; bottom: 10px; font-size: 6px; }

  .contact { padding: 96px 17px 102px; }
  .contact__system { top: 66%; right: -315px; width: 560px; opacity: 0.62; }
  .contact__orbit--3 { --planet-size: 14px; }
  .contact__inner { grid-template-columns: 1fr; gap: 52px; }
  .contact__copy h2 { font-size: 31px; line-height: 1.6; }
  .contact-title__mobile-break { display: block; }
  .contact__copy > p { margin-top: 24px; font-size: 15px; line-height: 1.9; }
  .contact__line { width: 100%; margin-top: 32px; }
  .contact__qr { display: none; }

  .site-footer { padding: 62px 17px 20px; }
  .site-footer__orbs { top: -120px; }
  .site-footer__orbs i:nth-child(3),
  .site-footer__orbs i:nth-child(5) { display: none; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 38px; }
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__legal { grid-column: auto; }
  .site-footer__bottom { margin-top: 36px; display: grid; gap: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .travel__gateway::before { animation: none; }
  .town-traveler.is-walking .town-traveler__sprite,
  .town-building.is-speaking .town-building__sign,
  .town-building.is-entering .town-building__door,
  .town-building.is-entering .town-building__art::before,
  .town-traveler.is-entering,
  .town-dialog p i { animation: none; }
  .contact__orbit { animation: none; }
  .site-footer__orbs { display: none; }
  .town-building__art,
  .contact__line::before,
  .contact__line,
  .contact__qr { transition: none; }
}

@keyframes contact-orbit {
  to { transform: rotate(360deg); }
}

@keyframes footer-orb-rise {
  0% { opacity: 0; transform: translate3d(0, 40px, 0) scale(.78); }
  12% { opacity: .44; }
  70% { opacity: .26; }
  100% { opacity: 0; transform: translate3d(24px, -620px, 0) scale(1.12); }
}

/* Stage select: high-density 24-bit scenery carried by a smooth orbital interface. */
.portals[data-stage-select] {
  --stage-accent: #72e9ff;
  --stage-width: min(680px, 60vw);
  position: relative;
  isolation: isolate;
  min-height: max(860px, 100svh);
  padding: clamp(70px, 7.5svh, 92px) 0 50px;
  overflow: hidden;
  color: var(--paper);
  background: #020d16;
}

.portals[data-stage-select]::after { display: none; }

.portals[data-active-stage="02"] { --stage-accent: #f6d675; }
.portals[data-active-stage="03"] { --stage-accent: #e96653; }

.stage-world,
.stage-world__veil {
  position: absolute;
  z-index: -3;
  inset: 0;
  pointer-events: none;
}

.stage-world {
  opacity: 0.2;
  background-image: url("assets/portals/stage-01-delegate-clear-blue-card-v2.jpg");
  background-position: center;
  background-size: cover;
  image-rendering: pixelated;
  filter: blur(5px) saturate(0.88);
  transform: scale(1.045);
  transition: background-image 160ms linear, opacity 520ms ease;
}

[data-active-stage="02"] .stage-world { background-image: url("assets/portals/stage-02-tools-happiness-yellow-card-v3.jpg"); }
[data-active-stage="03"] .stage-world { background-image: url("assets/agent/agent-arrival-salmon-v1.jpg"); }

.stage-world__veil {
  z-index: -2;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(2, 13, 22, 0.22), rgba(2, 13, 22, 0.72) 66%, #020d16 100%),
    linear-gradient(180deg, rgba(2, 13, 22, 0.9) 0%, rgba(2, 13, 22, 0.44) 42%, rgba(2, 13, 22, 0.94) 100%);
}

.portals[data-stage-select] .portals__intro {
  position: relative;
  z-index: 5;
  width: min(calc(100% - 64px), 1240px);
  margin: 0 auto clamp(26px, 3.6svh, 38px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 430px);
  align-items: end;
  gap: 64px;
}

.portals[data-stage-select] .portals__intro h2 {
  max-width: 720px;
  font-size: clamp(40px, 3.9vw, 56px);
  line-height: 1.38;
}

.portals[data-stage-select] .portals__intro p { max-width: 570px; }

.stage-guide {
  position: relative;
  min-height: 54px;
  padding: 7px 0 7px 28px;
  display: flex;
  align-items: center;
  color: rgba(231, 244, 245, 0.8);
  border-left: 1px solid rgba(114, 233, 255, 0.36);
  font-size: 16px;
  line-height: 1.85;
}

.stage-guide i {
  position: absolute;
  top: 50%;
  left: -4px;
  width: 7px;
  height: 7px;
  background: var(--stage-accent);
  box-shadow: 0 0 13px color-mix(in srgb, var(--stage-accent), transparent 30%);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: background-color 320ms ease, box-shadow 320ms ease;
}

.stage-viewport {
  position: relative;
  z-index: 3;
  width: 100%;
  overflow: hidden;
}

.stage-track {
  --stage-gutter: calc((100vw - var(--stage-width)) / 2);
  width: 100%;
  padding: 12px max(24px, var(--stage-gutter)) 38px;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  scroll-padding-inline: max(24px, var(--stage-gutter));
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x pan-y;
  overscroll-behavior-inline: contain;
}

.stage-track::-webkit-scrollbar { display: none; }
.stage-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.stage-track:focus-visible { outline: 2px solid var(--stage-accent); outline-offset: -4px; }

.stage-card {
  position: relative;
  flex: 0 0 var(--stage-width);
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  opacity: 0.48;
  transform: perspective(1300px) rotateY(8deg) scale(0.82);
  filter: saturate(0.72) brightness(0.7);
  transform-origin: center;
  transition: opacity 440ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1), filter 440ms ease;
}

.stage-card.is-before { transform: perspective(1300px) rotateY(9deg) scale(0.82); }
.stage-card.is-after { transform: perspective(1300px) rotateY(-9deg) scale(0.82); }
.stage-card.is-selected {
  z-index: 3;
  opacity: 1;
  filter: none;
  transform: perspective(1300px) rotateY(0) scale(1);
}

.stage-card__link,
.stage-card__frame {
  position: relative;
  display: block;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}

.stage-card__link {
  padding: 1px;
  color: var(--paper);
  background: linear-gradient(128deg, rgba(239, 183, 201, 0.92), rgba(225, 244, 248, 0.2) 34%, rgba(225, 244, 248, 0.18) 68%, color-mix(in srgb, var(--stage-accent), transparent 10%));
  filter: drop-shadow(0 30px 46px rgba(0, 4, 9, 0.46));
  text-decoration: none;
}

.stage-card__link:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }

.stage-card__frame {
  aspect-ratio: 16 / 8.9;
  overflow: hidden;
  background: #061722;
}

.stage-card__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 9, 16, 0.05) 46%, rgba(1, 9, 16, 0.72) 100%);
  pointer-events: none;
}

.stage-card__frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  image-rendering: pixelated;
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1), filter 420ms ease;
}

.stage-card--01 .stage-card__frame img { object-position: 52% center; }
.stage-card--02 .stage-card__frame img { object-position: center; }
.stage-card--03 .stage-card__frame img { object-position: 64% center; }
.stage-card.is-selected:hover .stage-card__frame img { transform: scale(1.025); }

.stage-card__side-title {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 17px;
  left: 22px;
  overflow: hidden;
  color: rgba(248, 245, 237, 0.92);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-card.is-selected .stage-card__side-title { opacity: 0; }

.stage-card__details {
  min-height: 244px;
  padding: 20px 26px 22px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(250px, 0.95fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: 34px;
  color: var(--paper);
  background: rgba(3, 17, 28, 0.96);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 23px 100%, 0 calc(100% - 23px));
  transition: opacity 320ms ease;
}

.stage-card:not(.is-selected) .stage-card__details { opacity: 0.28; }

.stage-card__status {
  grid-column: 1 / -1;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #8be9f5;
  font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
}

.stage-card__status span { display: inline-flex; align-items: baseline; gap: 9px; }
.stage-card__status b { color: #dffbff; font-size: 21px; font-weight: 400; letter-spacing: 0; }
.stage-card--02 .stage-card__status { color: #f7dd7d; }
.stage-card--03 .stage-card__status { color: #f0a08f; }

.stage-card h3 {
  grid-column: 1;
  margin-top: 18px;
  font-size: clamp(26px, 2.25vw, 34px);
  font-weight: 500;
  line-height: 1.48;
}

.stage-card h3 em { color: var(--stage-accent); font-style: normal; }

.stage-card ul {
  grid-column: 2;
  grid-row: 2 / 4;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  color: rgba(237, 246, 244, 0.86);
  font-size: 15px;
  line-height: 1.78;
  list-style: none;
}

.stage-card li { position: relative; padding-left: 15px; }
.stage-card li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 1px;
  width: 5px;
  height: 5px;
  background: var(--stage-accent);
  transform: translateY(-50%) rotate(45deg);
}

.stage-card__enter {
  grid-column: 2;
  align-self: end;
  width: auto;
  min-height: 0;
  margin-top: 12px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
  color: var(--stage-accent);
  font-size: 16px;
  letter-spacing: 0.02em;
  transition: gap 260ms cubic-bezier(.16, 1, .3, 1);
}

.stage-card__link:hover .stage-card__enter,
.stage-card__link:focus-visible .stage-card__enter { gap: 17px; }

.stage-card__enter .arrow { width: 22px; }
.stage-card__enter .arrow::before { width: 22px; }

.stage-card--clone {
  pointer-events: none;
}

.stage-card--clone .stage-card__frame {
  min-height: 440px;
  aspect-ratio: auto;
}

.stage-orbit {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(1280px, 94vw);
  height: 470px;
  border-bottom: 1px solid rgba(114, 233, 255, 0.44);
  border-radius: 0 0 50% 50%;
  transform: translate(-50%, -22%);
  pointer-events: none;
}

.stage-orbit::before {
  content: "";
  position: absolute;
  right: 13%;
  bottom: -4px;
  width: 7px;
  height: 7px;
  background: var(--stage-accent);
  box-shadow: 0 0 15px color-mix(in srgb, var(--stage-accent), transparent 25%);
  transform: rotate(45deg);
  transition: background-color 320ms ease, box-shadow 320ms ease;
}

.stage-orbit i {
  position: absolute;
  bottom: -3px;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(225, 244, 248, 0.48);
  background: #071721;
  transform: rotate(45deg);
}

.stage-orbit i:nth-child(1) { left: 12%; }
.stage-orbit i:nth-child(2) { left: 50%; }
.stage-orbit i:nth-child(3) { right: 12%; }

.stage-controls {
  position: relative;
  z-index: 5;
  width: min(calc(100% - 48px), 620px);
  min-height: 58px;
  margin: -4px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.stage-controls button {
  position: relative;
  min-width: 58px;
  min-height: 48px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border: 0;
  color: rgba(232, 244, 245, 0.62);
  background: transparent;
  font: 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
}

.stage-controls button::after {
  content: "";
  position: absolute;
  right: -15px;
  width: 28px;
  height: 1px;
  background: rgba(225, 244, 248, 0.24);
}

.stage-controls button:nth-of-type(3)::after { display: none; }
.stage-controls button i { position: absolute; bottom: 2px; width: 0; height: 1px; background: var(--stage-accent); transition: width 260ms ease; }
.stage-controls button.is-active { color: #fff; }
.stage-controls button.is-active i { width: 30px; box-shadow: 0 0 10px color-mix(in srgb, var(--stage-accent), transparent 35%); }
.stage-controls button:focus-visible { outline: 2px solid var(--stage-accent); outline-offset: 1px; }
.stage-controls small { margin-left: 22px; color: rgba(139, 233, 245, 0.62); font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; }

.stage-transfer {
  position: fixed;
  z-index: 500;
  inset: 0;
  padding: 24px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 13px;
  color: #f8f5ed;
  background: rgba(1, 9, 16, 0.88);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}

.stage-transfer span { color: var(--stage-accent); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.18em; }
.stage-transfer strong { font-size: clamp(24px, 4vw, 44px); font-weight: 500; }
.stage-transfer > i { width: min(360px, 72vw); height: 1px; overflow: hidden; background: rgba(225, 244, 248, 0.18); }
.stage-transfer > i b { width: 100%; height: 100%; display: block; background: linear-gradient(90deg, transparent, var(--stage-accent), #fff); transform: translateX(-100%); }

.portals.is-entering .stage-transfer { opacity: 1; visibility: visible; transition-delay: 0s; }
.portals.is-entering .stage-transfer > i b { animation: stage-transfer-progress 760ms cubic-bezier(.16, 1, .3, 1) forwards; }
.portals.is-entering .stage-card.is-selected { z-index: 10; opacity: 0; transform: perspective(1300px) translateZ(520px) scale(1.42); filter: brightness(1.28); }

.portals:not(.is-online) .stage-card.is-selected { transform: perspective(1300px) translateY(14px) scale(0.985); }
.portals.is-online .stage-orbit { animation: stage-orbit-arrive 900ms cubic-bezier(.16, 1, .3, 1) both; }

@keyframes stage-transfer-progress { to { transform: translateX(0); } }
@keyframes stage-orbit-arrive { from { opacity: 0; clip-path: inset(0 50% 0 50%); } to { opacity: 1; clip-path: inset(0); } }

@media (max-width: 980px) {
  .portals[data-stage-select] { --stage-width: min(650px, 76vw); }
  .portals[data-stage-select] .portals__intro { width: min(calc(100% - 48px), 900px); grid-template-columns: 1fr; gap: 22px; }
  .stage-guide { max-width: 560px; }
}

@media (max-width: 767px) {
  .portals[data-stage-select] {
    --stage-width: calc(100vw - 72px);
    min-height: 0;
    padding: 78px 0 70px;
  }

  .portals[data-stage-select] .portals__intro {
    width: calc(100% - 34px);
    margin-bottom: 26px;
    gap: 18px;
  }

  .portals[data-stage-select] .portals__intro h2 { font-size: 32px; line-height: 1.43; }
  .portals[data-stage-select] .portals__intro p { font-size: 15px; line-height: 1.85; }
  .stage-guide { min-height: 46px; padding-left: 20px; font-size: 13px; line-height: 1.7; }

  .stage-track {
    --stage-gutter: 36px;
    padding-top: 8px;
    padding-bottom: 28px;
    gap: 14px;
  }

  .stage-card { opacity: 0.44; transform: perspective(900px) rotateY(7deg) scale(0.86); }
  .stage-card.is-before { transform: perspective(900px) rotateY(7deg) scale(0.86); }
  .stage-card.is-after { transform: perspective(900px) rotateY(-7deg) scale(0.86); }
  .stage-card.is-selected { transform: none; }
  .stage-card__link,
  .stage-card__frame { clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 17px 100%, 0 calc(100% - 17px)); }
  .stage-card__frame { aspect-ratio: 16 / 10.5; }
  .stage-card__details {
    min-height: 304px;
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
  }
  .stage-card__status { min-height: 26px; }
  .stage-card__status i { font-size: 7px; }
  .stage-card__status b { font-size: 18px; }
  .stage-card__mode { margin-top: 8px; }
  .stage-card h3 { margin-top: 10px; font-size: 23px; line-height: 1.44; }
  .stage-card ul { margin-top: 13px; gap: 6px; font-size: 13px; line-height: 1.62; }
  .stage-card__enter { width: 100%; min-height: 50px; margin-top: auto; align-self: stretch; justify-self: auto; }
  .stage-card--clone .stage-card__frame { min-height: 500px; }
  .stage-card__side-title { right: 16px; bottom: 14px; left: 16px; font-size: 12px; }

  .stage-orbit { top: 57%; width: 128vw; height: 310px; opacity: 0.72; }
  .stage-controls { width: calc(100% - 28px); margin-top: 2px; gap: 5px; flex-wrap: wrap; }
  .stage-controls button { min-width: 54px; min-height: 48px; font-size: 16px; }
  .stage-controls button::after { right: -7px; width: 14px; }
  .stage-controls small { width: 100%; margin: 7px 0 0; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-world,
  .stage-card,
  .stage-card__frame img,
  .stage-card__details,
  .stage-controls button i,
  .stage-transfer { transition: none; }
  .stage-track { scroll-behavior: auto; }
  .stage-orbit,
  .stage-transfer > i b { animation: none !important; }
  .portals:not(.is-online) .stage-card.is-selected,
  .portals.is-entering .stage-card.is-selected { transform: none; opacity: 1; filter: none; }
}

/* Three-stage board: every destination stays visible; only departure animates. */
.portals[data-stage-select] {
  min-height: max(840px, 100svh);
  padding: clamp(68px, 7svh, 88px) 0 clamp(64px, 7svh, 82px);
  background:
    radial-gradient(ellipse at 15% 48%, rgba(66, 174, 208, 0.08), transparent 31%),
    radial-gradient(ellipse at 84% 44%, rgba(239, 183, 201, 0.07), transparent 30%),
    #020d16;
}

.portals[data-stage-select] .portals__intro {
  margin-bottom: clamp(30px, 4svh, 44px);
}

.stage-viewport {
  width: min(calc(100% - 64px), 1240px);
  margin-inline: auto;
  overflow: visible;
}

.stage-track {
  width: 100%;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(18px, 2vw, 28px);
  overflow: visible;
  scroll-snap-type: none;
  cursor: default;
  touch-action: auto;
}

.stage-track .stage-card {
  position: relative;
  min-width: 0;
  opacity: 1;
  filter: none;
  transform: none;
  transform-origin: center;
  transition: opacity 340ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1);
}

.stage-card--01 { --stage-accent: #72e9ff; }
.stage-card--02 { --stage-accent: #f6d675; }
.stage-card--03 { --stage-accent: #e96653; }

.stage-card__link {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  filter: drop-shadow(0 20px 32px rgba(0, 4, 9, 0.32));
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1), filter 260ms ease;
}

.stage-card__frame {
  aspect-ratio: 16 / 9;
}

.stage-card__frame img {
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1);
}

.stage-track .stage-card .stage-card__details {
  min-height: 350px;
  padding: 22px 23px 24px;
  display: flex;
  flex-direction: column;
  color: var(--paper);
  opacity: 1;
}

.stage-card__status {
  flex: 0 0 auto;
}

.stage-card h3 {
  margin-top: 18px;
  font-size: clamp(25px, 2.15vw, 32px);
  line-height: 1.46;
}

.stage-card ul {
  margin-top: 18px;
  display: grid;
  gap: 12px;
  font-size: 15px;
  line-height: 1.78;
}

.stage-card__enter {
  width: auto;
  min-height: 0;
  margin-top: auto;
  padding-top: 12px;
  align-self: end;
  justify-self: auto;
}

@media (hover: hover) and (pointer: fine) {
  .stage-card__link:hover {
    filter: drop-shadow(0 25px 38px rgba(0, 4, 9, 0.42));
    transform: translateY(-5px);
  }

  .stage-card__link:hover .stage-card__frame img {
    transform: scale(1.025);
  }
}

.portals.is-entering .stage-card:not(.is-departing) {
  opacity: 0.34;
}

.portals.is-entering .stage-card.is-departing {
  z-index: 8;
  opacity: 0;
  transform: scale(1.12);
}

@media (max-width: 980px) {
  .stage-viewport {
    width: min(calc(100% - 48px), 720px);
  }

  .stage-track {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .stage-card__link {
    grid-template-columns: minmax(220px, 38%) minmax(0, 1fr);
    grid-template-rows: 1fr;
  }

  .stage-card__frame {
    height: 100%;
    min-height: 300px;
    aspect-ratio: auto;
  }

  .stage-track .stage-card .stage-card__details {
    min-height: 300px;
  }
}

@media (max-width: 767px) {
  .portals[data-stage-select] {
    min-height: 0;
    padding: 66px 0 70px;
  }

  .portals[data-stage-select] .portals__intro {
    margin-bottom: 28px;
  }

  .stage-viewport {
    width: calc(100% - 34px);
  }

  .stage-track {
    padding: 0;
    gap: 15px;
  }

  .stage-card__link {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .stage-card__frame {
    min-height: 100%;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  }

  .stage-card__frame img {
    object-position: center;
  }

  .stage-card--01 .stage-card__frame img { object-position: 41% center; }
  .stage-card--03 .stage-card__frame img { object-position: 62% center; }

  .stage-card__side-title {
    display: none;
  }

  .stage-track .stage-card .stage-card__details {
    min-height: 284px;
    padding: 16px 16px 17px;
  }

  .stage-card__status {
    min-height: 23px;
  }

  .stage-card__status i {
    display: none;
  }

  .stage-card__status b {
    font-size: 18px;
  }

  .stage-card h3 {
    margin-top: 13px;
    font-size: 23px;
    line-height: 1.46;
  }

  .stage-card ul {
    margin-top: 13px;
    gap: 10px;
    font-size: 15px;
    line-height: 1.68;
  }

  .stage-card li {
    padding-left: 12px;
  }

  .stage-card__enter {
    min-height: 0;
    padding: 8px 0 0;
    font-size: 14px;
  }

  .stage-transfer {
    background: rgba(1, 9, 16, 0.82);
  }
}

@media (max-width: 350px) {
  .stage-card__link {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .stage-track .stage-card .stage-card__details {
    padding-inline: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-track .stage-card,
  .stage-card__link,
  .stage-card__frame img {
    transition: none;
  }

  .portals.is-entering .stage-card,
  .portals.is-entering .stage-card.is-departing {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------------
   Old wooden fence under the travel banner.
   The kind you walk past in an old neighbourhood: vertical planks,
   weathered, with flyers stuck on at whatever angle the hand managed.
   Not a tidy noticeboard — that was the wrong read.
   One screen tall, no scrolling inside. Art goes in the empty slots later.
   ------------------------------------------------------------------ */
.travel-board {
  position: relative;
  z-index: 1;
  padding: clamp(48px, 7svh, 76px) 24px;
  background:
    radial-gradient(circle at 88% 12%, rgba(114, 233, 255, 0.07), transparent 26%),
    radial-gradient(circle at 10% 82%, rgba(255, 140, 203, 0.05), transparent 24%),
    var(--night);
}

.feature-picker {
  width: min(100%, 900px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.feature-card {
  --signal: var(--cyan);
  position: relative;
  isolation: isolate;
  min-height: 210px;
  padding: 32px 28px 22px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 22px;
  overflow: hidden;
  color: rgba(236, 246, 242, 0.9);
  background: linear-gradient(146deg, rgba(13, 39, 52, 0.95), rgba(3, 17, 28, 0.97));
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  box-shadow: 0 22px 43px rgba(0, 4, 9, 0.28);
  text-decoration: none;
  transition: color 240ms ease, transform 320ms cubic-bezier(.16, 1, .3, 1), box-shadow 320ms ease;
}

.feature-card--pink { --signal: var(--pink); }

.feature-card::before,
.feature-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.feature-card::before {
  z-index: -1;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--signal), transparent 58%);
  clip-path: inherit;
}

.feature-card::after {
  z-index: -2;
  top: 0;
  bottom: 0;
  left: -55%;
  width: 46%;
  opacity: 0;
  background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--signal), transparent 70%), transparent);
  transform: skewX(-13deg);
  transition: left 560ms cubic-bezier(.16, 1, .3, 1), opacity 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .feature-card:hover,
  .feature-card:focus-visible {
    color: #fffdf7;
    box-shadow: 0 31px 58px rgba(0, 4, 9, 0.42);
    transform: translateY(-7px);
  }
  .feature-card:hover::after,
  .feature-card:focus-visible::after { left: 112%; opacity: 1; }
}

.feature-card:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 5px;
}

.feature-card__signal {
  position: absolute;
  z-index: 2;
  top: 26px;
  left: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 15px 4px color-mix(in srgb, var(--signal), transparent 62%);
  transform: translate(-50%, -50%);
}

.feature-card__copy {
  display: grid;
  align-content: start;
  gap: 10px;
}

.feature-card__copy small {
  color: rgba(236, 246, 242, 0.58);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.feature-card__copy strong {
  font-size: clamp(21px, 2.1vw, 26px);
  font-weight: 500;
  line-height: 1.42;
}

.feature-card__copy b {
  color: var(--signal);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.feature-card__open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(236, 246, 242, 0.7);
  font-size: 14px;
}

.feature-card__open .arrow { width: 18px; transition: transform 220ms ease; }
.feature-card:hover .feature-card__open .arrow,
.feature-card:focus-visible .feature-card__open .arrow { transform: translateX(4px); }

@media (max-width: 640px) {
  .feature-picker { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card,
  .feature-card::after { transition: none; }
}