/* ================================================================
   MOBILE.CSS — Responsive layout for viewports ≤ 767px
   Switches every canvas-scaled section from absolute-pixel layout
   to normal document flow so text stays readable on phones.
   ================================================================ */
@media (max-width: 767px) {

  /* ── Shared section / canvas reset ─────────────────────────── */
  section[id] { scroll-margin-top: 70px; }

  /* ── NAV ──────────────────────────────────────────────────── */
  .nav {
    padding: 14px 20px;
    align-items: center;
  }
  .nav__brand { gap: 8px; }
  .nav__logo-mark {
    width:  32px !important;
    height: 38px !important;
  }
  .nav__name    { font-size: 18px; letter-spacing: 1px; }
  .nav__tagline { font-size: 9px;  letter-spacing: 0.2px; margin-top: 4px; }

  /* Collapse center nav links — too many to fit on phone */
  .nav__links { display: none; }

  /* Portal link is surfaced by hero CTA on mobile; hide from nav */
  .nav__portal { display: none; font-size: 10px; letter-spacing: 1.5px; }

  .nav__right { gap: 10px; padding-top: 0; }
  .nav__lang  {
    font-size: 12px;
    /* Expand tap area to 44px tall without shifting layout */
    padding: 12px 8px;
    margin: -12px -8px;
  }
  .nav__two-stars {
    width:  14px !important;
    height: auto !important;
  }

  .site-header::after { height: 40px; }

  /* ── HERO ──────────────────────────────────────────────────── */
  /* Two screens: ring animation fills viewport 1, final reveal in viewport 2.
     User scrolls to discover the final stage — no empty space, natural flow. */
  .section_vision {
    height: 200vh;
    height: 200svh;
    overflow: hidden;
  }
  .vision__canvas {
    position: relative;
    left: 0; top: 0;
    width: 100%;
    height: 100%; /* = 200svh */
    transform: none;
  }
  .vision__bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
  }
  /* Ring scene — centered in first viewport */
  .vision__scene {
    position: absolute;
    top: 50vh;
    top: 50svh;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px; height: 240px;
  }
  .vision__ring {
    position: absolute;
    inset: 0;
    width: 240px !important;
    height: 240px !important;
  }
  .vision__center-text { top: 100px; }
  .vision__phrase {
    font-size: 17px;
    white-space: normal;
    line-height: 1.4;
  }
  /* Final block — centered in second viewport, always visible */
  .vision__final-block {
    position: absolute;
    top: 150vh;
    top: 150svh;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 56px);
    margin: 0;
    text-align: center;
    opacity: 1 !important;   /* CSS overrides GSAP; visible before animation fires */
    pointer-events: auto;    /* restore from main.css pointer-events:none */
  }
  .vision__final-headline {
    font-size: 22px;
    letter-spacing: 1.2px;
    line-height: 1.55;
  }
  .vision__final-sub {
    font-size: 16px;
    line-height: 1.85;
    letter-spacing: 0.2px;
    margin-top: 18px;
  }
  .vision__cta-btn {
    margin-top: 36px;
    padding: 17px 40px;   /* was 14px — now 45px tall (17+17+11lh≈45) */
    font-size: 12px;
    letter-spacing: 2.5px;
  }
  /* Scroll hint — anchored to bottom of first viewport */
  .vision__scroll {
    position: absolute;
    top: calc(100vh - 40px);
    top: calc(100svh - 40px);
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  /* ── WHY ─────────────────────────────────────────────────── */
  .section-why { height: auto; min-height: 100vh; min-height: 100svh; }
  .section-why__canvas {
    position: relative;
    left: 0; top: 0;
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 28px 60px;
  }
  .section-why__line {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    margin-bottom: 44px;
  }

  /* State 1 */
  .why__state1 {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .why__icon {
    position: relative;
    left: auto; top: auto;
    margin: 0 auto 20px;
  }
  .why__text {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 100%;
  }
  .why__spacer-lg,
  .why__spacer-sm { display: none; }
  .why__headline {
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 1.6;
    margin-bottom: 16px;
  }
  .why__body { font-size: 16px; line-height: 1.8; }

  /* State 2 — grid overlay */
  .why__state2 {
    position: absolute;
    inset: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 32px 16px;
    padding: 80px 28px 72px;
    background: inherit;
  }
  .why__col {
    position: relative;
    top: auto; left: auto !important;
    width: calc(50% - 8px);
    max-width: 160px;
    text-align: center;
  }
  .why__col-title {
    font-size: 15px;
    letter-spacing: 0.4px;
    margin-top: 8px;
  }

  /* State 3 — resting (hidden) state; JS adds .is-mobile-active to expand */
  .why__state3 {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 80px 28px 72px;
    overflow-y: visible;   /* no nested scroll */
    background: inherit;
  }
  .why__state3.is-mobile-active {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .why__para {
    position: relative;
    top: auto; left: auto !important;
    width: 100% !important;
    font-size: 15px;
    line-height: 1.75;
    text-align: center;
  }

  /* ── GALLERY ─────────────────────────────────────────────── */
  .section-gallery {
    /* 55vw gives a photographic 1.8:1 ratio; feels intentional not broken */
    height: 55vw;
    min-height: 200px;
    max-height: 360px;
  }

  /* ── COMMITMENT ───────────────────────────────────────────── */
  .section-commitment { height: auto; }
  .section-commitment__canvas {
    position: relative;
    left: 0; top: 0;
    width: 100%;
    height: auto;
    transform: none;
    padding: 64px 28px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* Scroll-down chevron at commitment bottom — no interactive hint here */
  .section-commitment__canvas::after {
    content: '';
    position: absolute;
    bottom: 18px;
    left: 50%;
    margin-left: -5px;
    width: 9px; height: 9px;
    border-right: 1.5px solid rgba(196,168,102,0.45);
    border-bottom: 1.5px solid rgba(196,168,102,0.45);
    transform: rotate(45deg);
    animation: hintPulse 2.2s ease-in-out infinite; /* reuse global keyframe */
  }
  .commitment__headline {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 1.55;
    text-align: center;
    margin-bottom: 24px;
  }
  .commitment__line {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    max-width: 100%;
    margin-bottom: 36px;
  }
  .commitment__col {
    position: relative;
    top: auto; left: auto !important;
    width: 100% !important;
    margin-bottom: 32px;
    text-align: center;
  }
  .commitment__col-title { font-size: 17px; }
  .commitment__col-body  { font-size: 16px; line-height: 1.75; }

  /* ── PARTNERS ─────────────────────────────────────────────── */
  /* On mobile: always-expanded single-column, no JS toggle */
  .section-partners {
    height: auto !important;  /* override JS-set px height */
    overflow: visible;
    cursor: default;
  }
  .section-partners__canvas {
    position: relative;
    left: 0; top: 0;
    width: 100%;
    height: auto;
    transform: none;
    padding: 48px 28px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .partners__title {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    font-size: 18px;
    margin-bottom: 20px;
  }
  .partners__rule--section {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    max-width: 100%;
    margin-bottom: 40px;
  }
  .partners__circle--lg {
    position: relative;
    top: auto !important; left: auto !important;
    width: 160px;
    margin: 0 auto 14px;
  }
  .partners__nm {
    position: relative;
    top: auto !important; left: auto !important;
    width: 100%;
    font-size: 15px;
    margin-bottom: 14px;
  }
  .partners__bio {
    position: relative;
    top: auto !important; left: auto !important;
    width: 100% !important;
    opacity: 1 !important;       /* always show on mobile */
    pointer-events: auto !important;
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 40px;
  }
  .partners__advisory {
    position: relative;
    top: auto !important;
    left: 0;
    width: 100%;
  }
  .partners__subtitle {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    font-size: 18px;
    margin: 0 0 10px;
  }
  .partners__advisory .partners__rule {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    max-width: 100%;
    margin-bottom: 36px;
  }
  .partners__circle--sm {
    position: relative;
    top: auto !important; left: auto !important;
    width: 140px;
    margin: 0 auto 12px;
  }
  .partners__nameplate {
    position: relative;
    top: auto !important; left: auto !important;
    width: 100% !important;
    margin-bottom: 12px;
  }
  .partners__nm-text { font-size: 15px; }
  .partners__rl-text { font-size: 13px; }
  .partners__hint { display: none; }

  /* ── JOURNEY ──────────────────────────────────────────────── */
  .section-journey { height: auto; min-height: 100vh; min-height: 100svh; }
  .section-journey__canvas {
    position: relative;
    left: 0; top: 0;
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 28px 60px;
  }

  /* State 1 */
  .journey__state1 {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }
  .journey__photo-lg {
    position: relative;
    top: auto; left: auto;
    width: 200px; height: 200px;
    flex-shrink: 0;
  }
  .journey__headline {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 1.55;
  }
  .journey__body {
    position: relative;
    top: auto; left: auto;
    width: 100%;
  }
  .journey__body p { font-size: 16px; line-height: 1.8; }
  .journey__stats--s1 {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 100%;
    font-size: 15px;
    gap: 12px;
    flex-wrap: wrap;
    white-space: normal;
    justify-content: center;
    letter-spacing: 0.5px;
  }

  /* State 2 — overlay */
  .journey__state2 {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 80px 28px 72px;
    background: inherit;
  }
  .journey__photo-sm {
    position: relative;
    top: auto; left: auto;
  }
  /* Three small photos in a row */
  .journey__s2p--1,
  .journey__s2p--2,
  .journey__s2p--3 {
    top: auto; left: auto;
    width: 100px; height: 100px;
  }
  .journey__stats--s2 {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 100%;
    font-size: 15px;
    gap: 12px;
    flex-wrap: wrap;
    white-space: normal;
    justify-content: center;
    letter-spacing: 0.5px;
  }
  /* Wrap the three s2 photos in a row */
  .journey__state2 > .journey__photo-sm {
    display: inline-block;
  }

  /* State 3 — in-flow on mobile so section expands naturally.
     JS flips position to relative when state 3 becomes active,
     and hides states 1+2; this CSS is the resting (hidden) state. */
  .journey__state3 {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    padding: 80px 28px 72px;
    gap: 12px;
    overflow-y: visible;   /* no nested scroll — section itself scrolls */
    background: inherit;
  }
  /* When JS marks state 3 as active on mobile, it adds this class */
  .journey__state3.is-mobile-active {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .journey__s3p--1,
  .journey__s3p--2,
  .journey__s3p--3 {
    top: auto; left: auto;
    width: 72px; height: 72px;
    flex-shrink: 0;
  }
  /* Row of three small photos */
  .journey__state3 > .journey__photo-sm {
    display: inline-block;
  }
  .journey__retreat {
    position: relative;
    top: auto; left: auto !important;
    width: 100% !important;
    text-align: start;
  }
  .journey__retreat-hd   { font-size: 15px; }
  .journey__retreat-date { font-size: 14px; margin-bottom: 8px; }
  .journey__retreat-body { font-size: 13px; line-height: 1.75; }
  .journey__stats--s3 {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 100%;
    font-size: 15px;
    gap: 12px;
    flex-wrap: wrap;
    white-space: normal;
    justify-content: center;
    letter-spacing: 0.5px;
  }

  /* ── SECTION HINTS — shown on mobile, raised above state overlays ── */
  .section-hint {
    z-index: 2;
    bottom: 44px;
    font-size: 10px;
    letter-spacing: 3px;
  }

  /* ── FOOTER ──────────────────────────────────────────────── */
  .footer__contact { padding: 40px 20px 40px; }
  .footer__title   { font-size: 22px; letter-spacing: 3px; margin-bottom: 20px; }
  .footer__subtitle { font-size: 14px; line-height: 1.7; }
  .footer__rule { max-width: calc(100% - 40px); }
  .footer__form { width: 100%; max-width: 420px; }

  .footer__success {
    width: calc(100% - 40px);
    min-height: 280px;
    padding: 48px 24px;
  }
  .footer__success-msg { font-size: 15px; letter-spacing: 1.5px; }

  .footer__bar-inner {
    flex-direction: column;
    gap: 28px;
    align-items: center;
    padding: 24px 32px;   /* was 24px 104px — prevents logo overflow */
  }
  .footer__brand-svg,
  .footer__logo-ja {
    width: 100%;
    max-width: 220px;     /* was hard-coded 260px with max-width: none */
  }

  /* Legal links — expand tap area to ~44px tall */
  .footer__legal { gap: 0 8px; padding-bottom: 32px; }
  .footer__legal-link,
  .footer__copy {
    display: inline-block;
    padding: 12px 4px;    /* expands tappable height to ~43px */
  }

} /* end @media (max-width: 767px) */


/* ================================================================
   TABLET (768px – 1023px): scale system works, just tune nav
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav__links {
    gap: 0;
  }
  .nav__sep { padding-inline: calc(4px * var(--canvas-scale)); }
}