/* ============================================================
   OKINOWA — Motion / Trust layer
   Adds: intro loader, side rails, scroll progress, custom cursor,
   hero orb+glow+mesh, marquee, refined section-heads, inverted blocks
   ============================================================ */

/* ---------- Intro loader ---------- */
.intro {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  background: var(--paper);
  transition: opacity 900ms var(--ease-out), visibility 0s linear 900ms;
}
.intro.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.intro .mark {
  width: 84px; height: 84px;
  opacity: 0; transform: scale(.82);
  animation: introMark 720ms var(--ease-snap) 80ms forwards;
}
.intro .wordmark {
  font: 800 28px/1 var(--font-display);
  letter-spacing: .12em;
  color: var(--ink-900);
  opacity: 0;
  animation: introWord 600ms var(--ease-out) 360ms forwards;
}
.intro .line {
  width: 0; height: 1px;
  background: var(--brand);
  animation: introLine 1100ms cubic-bezier(.6,.04,.3,1) 520ms forwards;
}
@keyframes introMark { to { opacity: 1; transform: scale(1); } }
@keyframes introWord { to { opacity: 1; } }
@keyframes introLine { to { width: 220px; } }
@media (prefers-reduced-motion: reduce) {
  .intro { transition: none; }
  .intro .mark, .intro .wordmark { animation: none; opacity: 1; transform: none; }
  .intro .line { animation: none; width: 220px; }
}

/* ---------- Scroll progress bar ---------- */
.progress {
  position: fixed; top: 0; left: 0;
  width: 0%; height: 2px;
  background: var(--grad-brand);
  z-index: 50;
  transition: width 80ms linear;
}

/* ---------- Side rails (desktop only) ---------- */
.rail {
  position: fixed; top: 0; bottom: 0;
  width: 60px; z-index: 6;
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: center;
  padding: 28px 0 32px;
  pointer-events: none;
}
.rail.l { left: 220px; }                 /* sits just inside the sidebar */
.rail.r { right: 0; }
.rail .top, .rail .bot {
  font: 600 10px/1 var(--font-mono);
  color: var(--ink-500);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.rail .vert {
  writing-mode: sideways-lr;
  text-orientation: mixed;
  font: 500 12px/1 var(--font-jp);
  letter-spacing: .5em;
  color: var(--ink-500);
}
.rail .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(79,148,228,0.16);
}
.rail .stack { display: flex; flex-direction: column; align-items: center; gap: 12px; }
@media (max-width: 1180px) { .rail.l { display: none; } }
@media (max-width: 960px)  { .rail { display: none; } }

/* ---------- Custom cursor (desktop hover-capable only) ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 999;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 200ms;
}
.cursor-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--brand-strong);
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(53,122,208,0.7);
  transform: translate(-50%, -50%);
  transition: width 240ms var(--ease-out), height 240ms var(--ease-out),
              border-color 240ms, opacity 200ms;
}
.cursor-ring.hover {
  width: 64px; height: 64px;
  border-color: var(--brand);
}
.cursor-ring.click { width: 32px; height: 32px; }
@media (hover: hover) {
  body.has-cursor .cursor-dot,
  body.has-cursor .cursor-ring { opacity: 1; }
  body.has-cursor { cursor: none; }
  body.has-cursor a, body.has-cursor button,
  body.has-cursor [data-cursor-hover] { cursor: none; }
}
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- Hero layers (orb + glow + mesh) ---------- */
.hero { isolation: isolate; }
.hero-fx {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  overflow: hidden;
}
.hero-fx .space {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 23% 42%, rgba(255,255,255,1) 0%, rgba(238,247,255,0.88) 29%, rgba(169,203,238,0.42) 49%, transparent 64%),
    radial-gradient(circle at 70% 42%, rgba(78,151,230,0.36) 0%, rgba(18,44,88,0.24) 28%, rgba(5,13,34,0.76) 64%),
    linear-gradient(115deg, #F6FAFF 0%, #DCEEFF 22%, #49698F 47%, #111F3E 69%, #050B1D 100%);
  opacity: .98;
}
.hero-fx .stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.88) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(159,210,255,0.72) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,0.55) 0 1px, transparent 1.5px);
  background-size: 150px 150px, 230px 230px, 310px 310px;
  background-position: 18px 36px, 90px 20px, 30px 120px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 28%, #000 54%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 28%, #000 54%, #000 100%);
  opacity: .86;
  animation: starDrift 44s linear infinite;
}
.hero-fx .sparkles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 11% 22%, rgba(255,255,255,0.86) 0 1px, transparent 1.8px),
    radial-gradient(circle at 24% 68%, rgba(181,222,255,0.76) 0 1px, transparent 1.8px),
    radial-gradient(circle at 37% 34%, rgba(255,255,255,0.58) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 49% 76%, rgba(255,255,255,0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 57% 18%, rgba(207,235,255,0.7) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 66% 52%, rgba(255,255,255,0.92) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 74% 28%, rgba(165,214,255,0.78) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 72%, rgba(255,255,255,0.86) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 91% 39%, rgba(255,255,255,0.62) 0 1px, transparent 2px),
    radial-gradient(circle at 96% 84%, rgba(157,209,255,0.7) 0 1.2px, transparent 2.2px);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.45) 34%, #000 58%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.45) 34%, #000 58%, #000 100%);
  opacity: .92;
  animation: sparkleTwinkle 5.8s var(--ease-in-out) infinite;
}
.hero-fx .milky-way {
  position: absolute;
  top: -12%;
  right: -8%;
  width: 118vmin;
  height: 154vmin;
  transform: rotate(35deg);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.82) 0%, rgba(180,220,255,0.48) 16%, rgba(107,139,225,0.3) 34%, transparent 66%),
    repeating-radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.5) 0 1px, transparent 1px 5px);
  filter: blur(6px);
  opacity: .9;
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0,0,0,.75) 40%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0,0,0,.75) 40%, transparent 72%);
  animation: milkyWayDrift 22s var(--ease-in-out) infinite;
}
.hero-fx .galaxy {
  position: absolute;
  top: 18%;
  right: -8%;
  width: 62vmin;
  height: 34vmin;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.46) 0%, rgba(118,178,238,0.26) 18%, rgba(104,126,224,0.12) 42%, transparent 72%),
    repeating-radial-gradient(ellipse at center, rgba(255,255,255,0.18) 0 1px, transparent 1px 10px);
  filter: blur(10px);
  transform: rotate(-18deg);
  opacity: .46;
  mix-blend-mode: screen;
  animation: galaxyPulse 13s var(--ease-in-out) infinite;
}
.hero-fx .mesh {
  display: none;
}
.hero-fx .glow {
  position: absolute;
  top: 50%; left: 68%;
  width: 110vmin; height: 110vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(79,148,228,0.26) 0%, rgba(79,148,228,0.0) 60%);
  filter: blur(40px);
  animation: glowPulse 8s var(--ease-in-out) infinite;
}
@keyframes glowPulse { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
@keyframes starDrift {
  to { background-position: 168px 86px, 270px 70px, 210px 170px; }
}
@keyframes sparkleTwinkle {
  0%, 100% { opacity: .42; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  30% { opacity: .72; filter: drop-shadow(0 0 5px rgba(180,222,255,0.50)); }
  55% { opacity: 1.0;  filter: drop-shadow(0 0 10px rgba(160,215,255,0.80)); }
  75% { opacity: .58; filter: drop-shadow(0 0 4px rgba(180,222,255,0.40)); }
}
@keyframes milkyWayDrift {
  0%, 100% { opacity: .74; transform: rotate(35deg) translate3d(0, 0, 0) scale(.98); }
  50% { opacity: .96; transform: rotate(32deg) translate3d(-1.5%, 1%, 0) scale(1.04); }
}
@keyframes galaxyPulse {
  0%, 100% { opacity: .36; transform: rotate(-18deg) scale(.96); }
  50% { opacity: .55; transform: rotate(-15deg) scale(1.04); }
}

/* ---------- Nebula (purple-blue atmospheric glow) ---------- */
.hero-fx .nebula {
  position: absolute;
  top: 4%; right: 12%;
  width: 48vmin; height: 64vmin;
  border-radius: 999px;
  transform: rotate(18deg);
  background:
    radial-gradient(ellipse at 40% 30%, rgba(140, 80, 255, 0.13) 0%, transparent 55%),
    radial-gradient(ellipse at 72% 68%, rgba(60, 140, 255, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 70%, rgba(80, 180, 255, 0.07) 0%, transparent 45%);
  filter: blur(22px);
  opacity: 0.78;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: nebulaBreath 20s var(--ease-in-out) infinite;
}
@keyframes nebulaBreath {
  0%, 100% { opacity: .62; transform: rotate(18deg) scale(.97); }
  50%       { opacity: .88; transform: rotate(16deg) scale(1.05); }
}

/* ---------- Shooting stars ---------- */
.hero-fx .shooting-stars {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-fx .shooting-stars span {
  position: absolute;
  display: block;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(to left,
    rgba(255,255,255,0)   0%,
    rgba(180,220,255,.60) 40%,
    rgba(255,255,255,.95) 100%);
  opacity: 0;
}
/* 20 shooting stars — top to bottom, right-side dark space */
.hero-fx .shooting-stars span:nth-child(1)  { top: 8%;  left: 52%; width: 148px; animation: shootA  7.8s  0.5s linear infinite; }
.hero-fx .shooting-stars span:nth-child(2)  { top: 22%; left: 65%; width:  92px; animation: shootB 10.2s  3.1s linear infinite; }
.hero-fx .shooting-stars span:nth-child(3)  { top: 5%;  left: 76%; width: 122px; animation: shootA 13.5s  6.8s linear infinite; }
.hero-fx .shooting-stars span:nth-child(4)  { top: 36%; left: 82%; width:  76px; animation: shootB  9.0s  1.9s linear infinite; }
.hero-fx .shooting-stars span:nth-child(5)  { top: 48%; left: 58%; width: 108px; animation: shootC 11.8s  8.4s linear infinite; }
.hero-fx .shooting-stars span:nth-child(6)  { top: 63%; left: 72%; width:  86px; animation: shootD  8.6s  4.6s linear infinite; }
.hero-fx .shooting-stars span:nth-child(7)  { top: 16%; left: 88%; width: 128px; animation: shootA 14.2s 10.0s linear infinite; }
.hero-fx .shooting-stars span:nth-child(8)  { top: 42%; left: 92%; width:  65px; animation: shootE  7.4s  2.7s linear infinite; }
.hero-fx .shooting-stars span:nth-child(9)  { top: 74%; left: 55%; width: 100px; animation: shootB 12.6s  5.3s linear infinite; }
.hero-fx .shooting-stars span:nth-child(10) { top: 28%; left: 86%; width:  84px; animation: shootC  9.8s  7.2s linear infinite; }
.hero-fx .shooting-stars span:nth-child(11) { top: 56%; left: 79%; width: 138px; animation: shootD 15.4s 11.5s linear infinite; }
.hero-fx .shooting-stars span:nth-child(12) { top: 82%; left: 62%; width:  75px; animation: shootA  8.2s  3.8s linear infinite; }
.hero-fx .shooting-stars span:nth-child(13) { top: 12%; left: 61%; width: 114px; animation: shootE 10.8s  0.2s linear infinite; }
.hero-fx .shooting-stars span:nth-child(14) { top: 68%; left: 85%; width:  90px; animation: shootB 13.2s  9.1s linear infinite; }
.hero-fx .shooting-stars span:nth-child(15) { top: 38%; left: 70%; width: 102px; animation: shootC 11.0s  5.8s linear infinite; }
.hero-fx .shooting-stars span:nth-child(16) { top: 78%; left: 90%; width:  68px; animation: shootD  7.6s 12.4s linear infinite; }
.hero-fx .shooting-stars span:nth-child(17) { top: 20%; left: 77%; width:  86px; animation: shootA  9.4s  1.3s linear infinite; }
.hero-fx .shooting-stars span:nth-child(18) { top: 52%; left: 67%; width: 118px; animation: shootE 16.0s  7.9s linear infinite; }
.hero-fx .shooting-stars span:nth-child(19) { top: 86%; left: 74%; width:  79px; animation: shootB  8.8s  4.1s linear infinite; }
.hero-fx .shooting-stars span:nth-child(20) { top: 44%; left: 50%; width: 133px; animation: shootC 12.0s 13.6s linear infinite; }

@keyframes shootA {
  0%   { opacity: 0;   transform: rotate(-28deg) translateX(0); }
  4%   { opacity: .92; }
  22%  { opacity: 0;   transform: rotate(-28deg) translateX(-300px); }
  100% { opacity: 0;   transform: rotate(-28deg) translateX(-300px); }
}
@keyframes shootB {
  0%   { opacity: 0;   transform: rotate(-38deg) translateX(0); }
  4%   { opacity: .82; }
  22%  { opacity: 0;   transform: rotate(-38deg) translateX(-220px); }
  100% { opacity: 0;   transform: rotate(-38deg) translateX(-220px); }
}
@keyframes shootC {
  0%   { opacity: 0;   transform: rotate(-22deg) translateX(0); }
  4%   { opacity: .88; }
  22%  { opacity: 0;   transform: rotate(-22deg) translateX(-260px); }
  100% { opacity: 0;   transform: rotate(-22deg) translateX(-260px); }
}
@keyframes shootD {
  0%   { opacity: 0;   transform: rotate(-44deg) translateX(0); }
  4%   { opacity: .78; }
  22%  { opacity: 0;   transform: rotate(-44deg) translateX(-180px); }
  100% { opacity: 0;   transform: rotate(-44deg) translateX(-180px); }
}
@keyframes shootE {
  0%   { opacity: 0;   transform: rotate(-16deg) translateX(0); }
  4%   { opacity: .95; }
  22%  { opacity: 0;   transform: rotate(-16deg) translateX(-200px); }
  100% { opacity: 0;   transform: rotate(-16deg) translateX(-200px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fx .shooting-stars span { animation: none; }
  .hero-fx .nebula { animation: none; }
}
.earth-canvas {
  position: absolute;
  top: 52%; left: 70%;
  width: 64vmin; height: 64vmin;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.hero-fx.globe-ready .earth-canvas { opacity: .96; }
.hero-fx.globe-ready .orb { opacity: 0; }
.hero-fx .orb-rings {
  display: none;
}
.hero-fx .orb-rings span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(100, 180, 255, 0.50);
  box-shadow:
    0 0 18px  rgba(79, 148, 228, 0.28),
    0 0 60px  rgba(79, 148, 228, 0.14),
    inset 0 0 28px rgba(255, 255, 255, 0.20),
    inset 0 0 60px rgba(100, 180, 255, 0.08);
  animation: rippleOrbit 9s var(--ease-in-out) infinite;
}
.hero-fx .orb-rings span:nth-child(2) {
  inset: 7%;
  border-color: rgba(255,255,255,0.52);
  animation-duration: 12s;
  animation-delay: -3s;
}
.hero-fx .orb-rings span:nth-child(3) {
  inset: 14%;
  border-color: rgba(34,79,136,0.24);
  animation-duration: 15s;
  animation-delay: -6s;
}
.hero-fx .orb {
  position: absolute;
  top: 52%; left: 70%;
  width: 64vmin; height: 64vmin;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  opacity: .9;
  z-index: 1;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(126deg, transparent 0 35%, rgba(255,255,255,0.18) 36% 43%, transparent 44% 100%),
    conic-gradient(from 218deg at 52% 52%, rgba(27,63,108,0.26), rgba(87,158,225,0) 24%, rgba(255,255,255,0.16) 38%, rgba(32,103,180,0.16) 58%, rgba(255,255,255,0) 74%, rgba(27,63,108,0.26)),
    radial-gradient(circle at 65% 65%, rgba(53,122,208,0.55) 0%, rgba(53,122,208,0) 55%),
    radial-gradient(circle at 50% 50%, #D8F0FF 0%, #4FA7E5 48%, #1555A3 100%);
  box-shadow:
    inset -30px -60px 120px rgba(11,30,60,0.45),
    inset 50px 50px 120px rgba(255,255,255,0.18),
    0 50px 140px rgba(34,79,136,0.30);
  animation: orbFloat 18s var(--ease-in-out) infinite;
  transition: opacity 500ms var(--ease-out);
}
.hero-fx .orb::before {
  content: '';
  position: absolute;
  inset: 3%;
  border-radius: 999px;
  background-image: url('assets/earth-map.jpg');
  background-size: 260% 130%;
  background-position: 50% 45%;
  background-repeat: repeat-x;
  opacity: .98;
  mix-blend-mode: normal;
  animation: earthRotate 42s linear infinite;
}
.hero-fx .orb::after {
  content: ''; position: absolute; inset: -2%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0) 30%),
    radial-gradient(circle at 72% 72%, rgba(5,31,74,0.34) 0%, rgba(5,31,74,0) 46%),
    conic-gradient(from 0deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 40%, rgba(255,255,255,0.08) 75%, rgba(255,255,255,0));
  mix-blend-mode: overlay;
}
@keyframes orbFloat { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 18px)); } }
@keyframes earthRotate {
  from { background-position: 50% 45%; }
  to { background-position: -50% 45%; }
}
@keyframes rippleOrbit {
  0%, 100% { opacity: .36; transform: scale(.94) rotateZ(0deg); }
  45% { opacity: .72; transform: scale(1.04) rotateZ(7deg); }
  70% { opacity: .24; transform: scale(1.1) rotateZ(12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fx .glow, .hero-fx .orb, .hero-fx .orb-rings span, .hero-fx .orb::before { animation: none; }
}

/* Larger hero — full viewport height */
.hero { min-height: 92vh; padding-top: 140px; padding-bottom: 96px; }
.hero-content { position: relative; z-index: 2; }
.hero-blobs { display: none; } /* superseded by .hero-fx */

/* Big monogram backdrop letter behind hero heading */
.hero .monogram {
  position: absolute;
  bottom: -6%; left: -2%;
  font: 800 clamp(84px, 13vw, 190px)/0.82 var(--font-display);
  letter-spacing: -0.08em;
  color: rgba(255,255,255,0.18);
  text-shadow: 0 0 42px rgba(111,176,238,0.22);
  pointer-events: none;
  user-select: none;
  z-index: 1;
  white-space: nowrap;
}
@media (max-width: 960px) {
  .hero-fx .space {
    background:
      radial-gradient(circle at 16% 32%, rgba(255,255,255,0.94) 0%, rgba(226,242,255,0.72) 28%, rgba(92,139,190,0.18) 55%, transparent 70%),
      radial-gradient(circle at 100% 48%, rgba(70,143,222,0.3) 0%, rgba(18,44,88,0.2) 26%, rgba(5,13,34,0.76) 64%),
      linear-gradient(105deg, #F7FBFF 0%, #DCEEFF 34%, #1C2E54 72%, #050B1D 100%);
  }
  .hero-fx .stars {
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 44%, #000 78%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 44%, #000 78%, #000 100%);
    opacity: .72;
  }
  .hero-fx .sparkles {
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 36%, #000 70%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 36%, #000 70%, #000 100%);
    opacity: .78;
  }
  .hero-fx .milky-way {
    right: -76%;
    width: 132vmin;
    height: 168vmin;
    opacity: .54;
  }
  .hero-fx .galaxy {
    right: -42%;
    opacity: .26;
  }
  .hero-fx .glow {
    top: 54%;
    left: calc(100% - 40vmin);
    opacity: .6;
  }
  .hero-fx .orb-rings {
    top: 56%;
    left: calc(100% - 36vmin);
    width: 84vmin;
    height: 84vmin;
    opacity: .34;
  }
  .hero-fx .orb {
    top: 56%;
    left: calc(100% - 36vmin);
    width: 72vmin;
    height: 72vmin;
    opacity: .56;
  }
  .earth-canvas {
    top: 56%;
    left: calc(100% - 36vmin);
    width: 72vmin;
    height: 72vmin;
    opacity: 0;
  }
  .hero-fx.globe-ready .earth-canvas { opacity: .72; }
  .hero .monogram {
    bottom: -2%;
    font-size: clamp(56px, 22vw, 128px);
  }
}

/* ---------- Section-head pattern (number / JA / EN / line) ---------- */
.sec-head {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 18px;
  margin-bottom: 32px;
}
.sec-head .ja {
  font: 500 13px/1 var(--font-jp);
  color: var(--ink-900);
  letter-spacing: .5em;
  white-space: nowrap;
}
.sec-head .en {
  font: 600 11px/1 var(--font-sans);
  color: var(--ink-500);
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sec-head .line {
  height: 1px;
  background: linear-gradient(90deg, var(--border-1) 0%, transparent 100%);
}
@media (max-width: 600px) {
  .sec-head { grid-template-columns: auto 1fr; gap: 12px; }
  .sec-head .en { display: none; }
}

/* ---------- Marquee strip ---------- */
.marquee {
  position: relative;
  padding: 28px 0;
  overflow: hidden;
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  background: var(--bg-1);
  margin-top: 0;
}
.marquee-track {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: marqueeScroll 40s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 24px;
  font: 800 28px/1 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
  white-space: nowrap;
}
.marquee-item .sep {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--brand);
  opacity: 0.7;
}
.marquee-item .sub {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-left: 12px;
}
@keyframes marqueeScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}
.marquee::before, .marquee::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 120px;
  z-index: 1; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg-1), transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--bg-1), transparent); }

/* ---------- Stats row ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 48px 0 0;
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  overflow: hidden;
}
.stats > div {
  padding: 28px 24px;
  border-right: 1px solid var(--border-2);
  display: flex; flex-direction: column; gap: 6px;
}
.stats > div:last-child { border-right: 0; }
.stats .v {
  font: 800 44px/1 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--ink-900);
}
.stats .v sup {
  font: 600 16px/1 var(--font-display);
  color: var(--brand-strong);
  margin-left: 4px;
  top: -.6em;
}
.stats .k {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats > div:nth-child(2) { border-right: 0; }
  .stats > div:nth-child(1), .stats > div:nth-child(2) { border-bottom: 1px solid var(--border-2); }
}

/* ---------- Active nav highlight ---------- */
.header nav a { opacity: .65; transition: opacity var(--dur-base) var(--ease-out), color var(--dur-base), background var(--dur-base); }
.header nav a.active, .header nav a:hover { opacity: 1; }

/* ---------- Hero badge animation already in style.css ---------- */

/* ---------- Inverted "Promise" section (between services and news) ---------- */
.promise {
  background: var(--ink-900);
  color: #fff;
  padding: 120px 32px;
  position: relative;
  overflow: hidden;
  margin: 96px 0;
}
.promise .inner { max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; }
.promise .bignum {
  position: absolute;
  top: -40px; right: -20px;
  font: 800 clamp(180px, 22vw, 320px)/1 var(--font-display);
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.04);
  pointer-events: none;
  z-index: 0;
}
.promise .sec-head .ja { color: #fff; }
.promise .sec-head .en { color: rgba(255,255,255,0.55); }
.promise .sec-head .line { background: linear-gradient(90deg, rgba(255,255,255,0.18), transparent); }
.promise .sec-head .num { color: var(--blue-300); }
.promise h2 {
  font: 800 clamp(36px, 5vw, 64px)/1.18 var(--font-display);
  letter-spacing: -0.025em;
  margin: 0; max-width: 18ch;
}
.promise h2 .accent { color: var(--blue-300); }
.promise .grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 64px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.promise .pill {
  padding: 36px 28px 36px 0;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.promise .pill:last-child { border-right: 0; padding-right: 0; }
.promise .pill .label {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-300);
  margin-bottom: 14px;
}
.promise .pill h3 {
  font: 700 22px/1.3 var(--font-display);
  margin: 0 0 12px;
  color: #fff;
}
.promise .pill p {
  font: 400 14px/1.8 var(--font-sans);
  color: rgba(255,255,255,0.78);
  margin: 0;
}
@media (max-width: 900px) {
  .promise .grid { grid-template-columns: 1fr; }
  .promise .pill { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.12); padding-right: 0; }
  .promise .pill:last-child { border-bottom: 0; }
}

/* ---------- Hero meta tweaks ---------- */
.hero .badge { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ---------- Reveal: stronger entrance ---------- */
.js-reveal .reveal {
  transform: translateY(28px);
  transition: opacity 1100ms cubic-bezier(.2,.7,.2,1), transform 1100ms cubic-bezier(.2,.7,.2,1);
}

/* ---------- Wave section divider (OKINOWA brand motif) ---------- */
.wave-divider {
  position: relative;
  width: 100%;
  height: 96px;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  --wave-back:  rgba(111, 176, 238, 0.32);
  --wave-mid:   rgba(79, 148, 228, 0.42);
  --wave-front: rgba(53, 122, 208, 0.55);
}
.wave-divider svg {
  position: absolute;
  inset: 0;
  width: 200%;
  height: 100%;
  display: block;
}
.wave-divider .wave-path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.wave-divider .wave-back  { stroke: var(--wave-back);  animation: waveSlide 26s linear infinite; }
.wave-divider .wave-mid   { stroke: var(--wave-mid);   animation: waveSlide 18s linear infinite reverse; }
.wave-divider .wave-front { stroke: var(--wave-front); animation: waveSlide 13s linear infinite; }
@keyframes waveSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.wave-divider.on-dark {
  --wave-back:  rgba(255, 255, 255, 0.10);
  --wave-mid:   rgba(156, 203, 246, 0.35);
  --wave-front: rgba(199, 226, 251, 0.60);
}
@media (prefers-reduced-motion: reduce) {
  .wave-divider .wave-path { animation: none; }
}
@media (max-width: 720px) {
  .wave-divider { height: 64px; }
}