/* ==========================================================================
   Wellness Clean — redesign v2
   BLUE x PEOPLE x ACTIVE x CLEAN
   Photo-first, generous white space, blue as the brand colour.
   Palette:  Primary Blue #019FE8 (logo)  /  Deep Blue #0B5CAB  /  Light Blue #EAF6FE  /  White
   The logo's red (#E70012) appears only as a tiny "you are here" dot.
   ========================================================================== */

:root{
  --blue:#019FE8;          /* Primary Blue (logo) */
  --deep:#0B5CAB;          /* Deep Blue — headings, buttons, links */
  --deep-2:#083F7A;        /* Deeper blue — hover, footer */
  --light:#EAF6FE;         /* Light Blue — section ground */
  --mist:#F5FAFE;
  --sky:#CDE8FA;
  --ink:#12324F;           /* body text (blue-black) */
  --muted:#4B6780;
  --line:#D6E7F3;
  --sun:#E70012;           /* logo red — micro accent only */
  --white:#fff;

  --font-jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --font-en:"Jost","Helvetica Neue",Arial,sans-serif;

  --maxw:1240px;
  --gutter:32px;
  --header:76px;
  --r-xl:32px;
  --r-lg:24px;
  --r-md:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 1px 2px rgba(11,60,110,.05),0 18px 40px -18px rgba(11,60,110,.28);
  color-scheme:light;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 24px);scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-jp);font-size:16px;line-height:1.9;letter-spacing:.02em;-webkit-font-smoothing:antialiased;word-break:auto-phrase;line-break:strict}
h1,h2,h3,p,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3{line-height:1.4;text-wrap:balance;font-feature-settings:"palt" 1}
p{text-wrap:pretty}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed;opacity:.55}
[hidden]{display:none!important}
::selection{background:var(--sky);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.join :focus-visible,.site-footer :focus-visible{outline-color:#fff}
.modal-open,.menu-open{overflow:hidden}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{display:inline-block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.skip-link{position:fixed;top:-80px;left:16px;z-index:300;background:var(--ink);color:#fff;padding:12px 16px;border-radius:0 0 10px 10px}
.skip-link:focus{top:0}
.noscript-note{padding:14px 24px;background:var(--sky);font-size:14px;text-align:center}

.container{width:min(var(--maxw),calc(100% - var(--gutter)*2));margin-inline:auto}
.section{padding-block:clamp(80px,10vw,144px)}

/* ---------- Shared type ---------- */
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:500 13px/1.4 var(--font-en);letter-spacing:.24em;text-transform:uppercase;color:var(--deep)}
.eyebrow::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;border:2.5px solid var(--blue);background:#fff}
.sec-title{font:800 clamp(2.2rem,4.4vw,3.9rem)/1.25 var(--font-jp);letter-spacing:.02em;color:var(--deep)}
.sec-desc{margin-top:18px;color:var(--muted);line-height:2.05;max-width:34em}
.small-note{font-size:12px;line-height:1.8;color:var(--muted);letter-spacing:.03em}
.sec-head{margin-bottom:clamp(36px,4.5vw,60px)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:22px;min-height:58px;padding:0 0 0 30px;border-radius:999px;background:var(--deep);color:#fff;font-weight:700;font-size:16px;line-height:1.4;letter-spacing:.05em;overflow:hidden;transition:background .2s,transform .25s var(--ease),box-shadow .25s}
.btn-arrow{align-self:stretch;display:grid;place-items:center;width:60px;border-left:1px solid rgba(255,255,255,.32);flex:none}
.btn-arrow .icon{transition:transform .25s var(--ease)}
.btn:hover{background:var(--deep-2);transform:translateY(-2px);box-shadow:0 16px 26px -14px rgba(8,63,122,.7)}
.btn:hover .btn-arrow .icon{transform:translateX(4px)}
.btn-white{background:#fff;color:var(--deep)}
.btn-white .btn-arrow{border-left-color:rgba(11,92,171,.22)}
.btn-white:hover{background:var(--light);color:var(--deep-2)}
.btn-line{background:transparent;color:var(--deep);border:1.5px solid var(--deep)}
.btn-line .btn-arrow{border-left-color:var(--deep)}
.btn-line:hover{background:var(--deep);color:#fff}
.btn-line:hover .btn-arrow{border-left-color:rgba(255,255,255,.35)}

.text-link,.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding:8px 0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat}
.text-link .icon,.link-arrow .icon{width:18px;height:18px;transition:transform .25s var(--ease)}
.text-link:hover .icon,.link-arrow:hover .icon{transform:translateX(4px)}
.text-link,.link-arrow{color:var(--deep)}

/* ---------- Photo frame (image slot + built-in placeholder) ---------- */
.photo{position:relative;overflow:hidden;isolation:isolate;background:var(--sky);border-radius:var(--r-lg)}
.photo>img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);opacity:0;transition:opacity .6s,transform .9s var(--ease)}
.photo>img.is-loaded{opacity:1}
.photo-ph{position:absolute;inset:0;width:100%;height:100%}
.photo-tag{position:absolute;right:12px;bottom:10px;z-index:0;font:500 10px/1.4 var(--font-en);letter-spacing:.1em;color:rgba(18,50,79,.5);pointer-events:none}
.photo.has-photo .photo-tag{display:none}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:80;height:var(--header);background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.site-header.is-scrolled{box-shadow:0 8px 24px -16px rgba(11,60,110,.4)}
.header-inner{height:100%;width:min(1380px,calc(100% - var(--gutter)*2));margin:auto;display:flex;align-items:center;gap:20px}

.desktop-nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav-item{position:relative}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;font-size:14px;white-space:nowrap;transition:color .2s}
.nav-link .icon{width:14px;height:14px}
.nav-link::after{content:"";position:absolute;left:50%;bottom:2px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--sun);transform:scale(0);transition:transform .25s var(--ease)}
.nav-link:hover{color:var(--deep)}
.nav-link[aria-current="location"]::after{transform:scale(1)}
.nav-submenu{position:absolute;top:100%;left:-16px;min-width:200px;padding:10px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow);visibility:hidden;opacity:0;transform:translateY(6px);transition:.2s var(--ease)}
.nav-item:hover .nav-submenu,.nav-item:focus-within .nav-submenu{visibility:visible;opacity:1;transform:none}
.nav-submenu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;font-size:14px;font-weight:500}
.nav-submenu a::before{content:"";width:8px;height:8px;border-radius:50%;border:2px solid var(--blue)}
.nav-submenu a:hover{background:var(--light);color:var(--deep)}
.contact-header{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;border-radius:999px;background:var(--deep);color:#fff;font-size:14px;font-weight:700;white-space:nowrap;transition:background .2s,transform .25s var(--ease)}
.contact-header:hover{background:var(--deep-2);transform:translateY(-1px)}
.menu-toggle{display:none;width:46px;height:46px;flex:none;border-radius:50%;border:1.5px solid var(--deep);align-items:center;justify-content:center;flex-direction:column;gap:6px}
.menu-toggle span{width:20px;height:2px;border-radius:2px;background:var(--deep);transition:transform .25s var(--ease)}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* Mobile sheet */
.sheet{position:fixed;inset:var(--header) 0 0 0;z-index:70;background:#fff;overflow:auto;padding:12px var(--gutter) 40px;animation:sheet .35s var(--ease)}
.sheet nav{position:relative}
.sheet nav::before{content:"";position:absolute;left:6px;top:36px;bottom:36px;width:2px;background:var(--sky)}
.sheet a{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px 4px 20px 36px;font:800 26px/1.3 var(--font-jp);letter-spacing:.03em;border-bottom:1px solid var(--line);color:var(--deep)}
.sheet a::before{content:"";position:absolute;left:0;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;border:3px solid var(--blue);background:#fff}
.sheet a:last-child::before{background:var(--sun);border-color:var(--sun)}
.sheet a .icon{color:var(--blue)}
.sheet p{margin-top:28px;font-size:14px;color:var(--muted)}
@keyframes sheet{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* Page rail (wide screens) */
.rail{position:fixed;left:22px;top:50%;z-index:60;display:none;flex-direction:column;gap:30px;transform:translateY(-50%)}
.rail::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:rgba(1,159,232,.4)}
.rail a{position:relative;display:flex;align-items:center;gap:12px;height:12px;font:500 10px/1 var(--font-en);letter-spacing:.18em;color:var(--ink)}
.rail a::before{content:"";position:relative;z-index:1;flex:none;width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--blue);transition:.25s var(--ease)}
.rail a span{opacity:0;transform:translateX(-4px);transition:.2s;white-space:nowrap;padding:4px 8px;border-radius:6px;background:#fff;box-shadow:var(--shadow)}
.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:none}
.rail a[aria-current="location"]::before{background:var(--sun);border-color:#fff;box-shadow:0 0 0 2px var(--sun),0 0 0 7px rgba(231,0,18,.16)}
@media (min-width:1360px){.rail{display:flex}}

.back-top{position:fixed;right:24px;bottom:24px;z-index:60;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--deep);color:#fff;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s var(--ease)}
.back-top .icon{transform:rotate(-90deg)}
.back-top.is-visible{opacity:1;visibility:visible;transform:none}
.back-top:hover{background:var(--deep-2)}

/* ==========================================================================
   Hero — the photo is the visual; type sits in the sky
   ========================================================================== */
.hero{position:relative;height:clamp(620px,calc(100svh - var(--header) - 72px),860px);overflow:hidden;background:var(--sky)}
.hero-photo{position:absolute;inset:0;border-radius:0}
.hero-photo>img{object-position:62% 40%}
.hero-inner{position:absolute;inset:0;width:min(1320px,calc(100% - var(--gutter)*2));margin:auto;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(28px,7vh,76px) 0 clamp(24px,5vh,48px)}
.hero-copy{max-width:min(760px,54%);container-type:inline-size}
.hero .eyebrow{margin-bottom:22px;font-size:14px;letter-spacing:.34em}
.hero h1{font:600 min(clamp(2.8rem,5.7vw,7rem),9.9cqw)/1.02 var(--font-en);letter-spacing:-.005em;text-transform:uppercase;color:var(--deep)}
.hero h1 span{display:block;white-space:nowrap}
.hero h1 .l2{width:max-content;padding-right:.06em;background:linear-gradient(90deg,#0A72C6 0%,#019FE8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero h1 .w{display:inline}
.hero-kicker{margin-top:clamp(22px,3.4vh,36px);font:700 clamp(1.05rem,1.55vw,1.5rem)/1.6 var(--font-jp);letter-spacing:.28em;color:var(--deep)}
.hero-tagline{margin-top:8px;font:500 clamp(.95rem,1.15vw,1.15rem)/1.9 var(--font-jp);letter-spacing:.14em;color:var(--deep)}
.hero-panel{align-self:flex-start;max-width:540px;padding:24px 28px 26px;border-radius:var(--r-lg);background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 20px 44px -22px rgba(8,63,122,.5)}
.hero-desc{font-size:15px;line-height:2;color:var(--ink)}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px;margin-top:20px}

.hero-strip{border-bottom:1px solid var(--line);background:#fff}
.hero-strip-inner{display:flex;align-items:center;gap:20px 40px;width:min(1320px,calc(100% - var(--gutter)*2));margin:auto;padding:20px 0}
.route{display:flex;align-items:center;flex:1 1 auto;max-width:640px}
.route li{display:flex;align-items:center;gap:10px;flex:1;font:500 13px/1 var(--font-en);letter-spacing:.2em;white-space:nowrap;color:var(--deep)}
.route li:last-child{flex:none}
.route li::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;border:2.5px solid var(--blue);background:#fff}
.route li:not(:last-child)::after{content:"";flex:1;min-width:14px;height:2px;margin-inline:2px 6px;background:var(--sky);transform-origin:left;animation:draw 1.2s .6s var(--ease) both}
.route li:last-child::before{background:var(--sun);border-color:#fff;box-shadow:0 0 0 2px var(--sun)}
.hero-note{margin-left:auto;font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--deep)}
.hero-note br{display:none}
.hero-scroll{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--font-en);letter-spacing:.2em;white-space:nowrap;color:var(--muted)}
.hero-scroll .icon{width:16px;height:16px;transform:rotate(90deg);animation:nudge 1.8s ease-in-out infinite}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes nudge{50%{transform:rotate(90deg) translateX(5px)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-copy>*,.hero-panel{animation:rise .8s var(--ease) both}
.hero-copy>:nth-child(1){animation-delay:.05s}.hero-copy>:nth-child(2){animation-delay:.14s}.hero-copy>:nth-child(3){animation-delay:.26s}.hero-copy>:nth-child(4){animation-delay:.34s}
.hero-panel{animation-delay:.46s}

/* ==========================================================================
   About — big photo, flush to the left edge
   ========================================================================== */
.about{padding-block:0}
.about-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,104px);align-items:center;padding:clamp(80px,10vw,144px) max(var(--gutter),calc((100% - var(--maxw))/2)) clamp(80px,10vw,144px) 0}
.about-media{position:relative;margin-bottom:56px}
.about-photo{aspect-ratio:6/7;max-height:840px;width:100%;border-radius:0 var(--r-xl) var(--r-xl) 0}
.about-sub{position:absolute;right:-56px;bottom:-56px;z-index:2;width:42%;aspect-ratio:4/3;border:8px solid #fff;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.about-title{font:800 clamp(2.2rem,4.4vw,3.9rem)/1.25 var(--font-jp);letter-spacing:.02em;color:var(--deep)}
.about-tagline{margin:24px 0 16px;font:800 clamp(1.4rem,2.5vw,1.95rem)/1.6 var(--font-jp);color:var(--blue)}
.about-text{max-width:32em;color:var(--muted);line-height:2.15}
.venn{width:min(100%,440px);margin:32px 0 6px}
.venn svg{width:100%;height:auto;overflow:visible}
.venn text{font:700 17px var(--font-jp);letter-spacing:.06em;text-anchor:middle}
.about-links{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;margin-top:28px}

/* ==========================================================================
   Activities
   ========================================================================== */
.activities{background:var(--light)}
.activities-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.side-note{padding-bottom:6px;font-weight:700;color:var(--deep)}
.finder{margin:0 0 24px;padding:26px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.finder-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px}
.finder-label{display:flex;align-items:center;gap:10px;font-weight:700;white-space:nowrap}
.finder-label .icon{color:var(--blue);width:22px;height:22px}
.select-wrap{position:relative}
.select-wrap select{appearance:none;-webkit-appearance:none;width:100%;height:58px;padding:0 52px 0 24px;border:1.5px solid var(--line);border-radius:999px;background:var(--mist);color:var(--ink);font-size:16px;cursor:pointer;transition:border-color .2s}
.select-wrap select:hover{border-color:var(--blue)}
.select-wrap .icon{position:absolute;right:20px;top:50%;margin-top:-10px;pointer-events:none;color:var(--blue)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:18px;border-top:1px dashed var(--sky)}
.chip{min-height:40px;padding:0 20px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:14px;font-weight:700;transition:.2s}
.chip:hover{border-color:var(--blue);color:var(--deep)}
.chip[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:#fff}
.search-status{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px;font-size:14px;font-weight:700}
.reset-search{font-size:13px;color:var(--deep);text-decoration:underline;text-underline-offset:3px}

.event-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.event-card{display:flex;flex-direction:column;width:100%;padding:0;overflow:hidden;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);transition:transform .3s var(--ease),box-shadow .3s var(--ease);animation:rise .6s var(--ease) both}
.event-card:nth-child(2){animation-delay:.06s}.event-card:nth-child(3){animation-delay:.12s}.event-card:nth-child(n+4){animation-delay:.18s}
.event-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.event-card:hover .photo>img.is-loaded{transform:scale(1.05)}
.event-media{position:relative}
.event-media .photo{aspect-ratio:3/2;border-radius:0}
.date-tile{position:absolute;left:16px;top:16px;z-index:3;display:grid;justify-items:center;gap:4px;min-width:68px;padding:10px 10px 11px;border-radius:16px;background:#fff;font-family:var(--font-en);line-height:1;box-shadow:0 8px 18px -8px rgba(8,63,122,.45)}
.dt-ym{font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--muted)}
.dt-d{font:700 34px/1 var(--font-en);letter-spacing:-.01em;color:var(--deep);font-variant-numeric:tabular-nums}
.dt-w{padding:3px 8px;border-radius:999px;background:var(--blue);color:#fff;font-size:10px;font-weight:600;letter-spacing:.12em}
.event-status{position:absolute;right:16px;top:16px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:5px 14px 5px 12px;border-radius:999px;background:rgba(8,63,122,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:700;line-height:1.6}
.event-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sun)}
.event-body{display:flex;flex:1;flex-direction:column;padding:22px 24px 24px}
.event-area{display:flex;align-items:center;gap:9px;margin-bottom:8px;font-size:13px;font-weight:700;color:var(--deep)}
.event-area::before{content:"";width:10px;height:10px;border-radius:50%;border:2.5px solid var(--blue);flex:none}
.event-body h3{min-height:3.2em;margin-bottom:14px;font:800 18px/1.6 var(--font-jp);letter-spacing:.03em}
.event-meta{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.8;color:var(--muted)}
.event-meta .icon{width:16px;height:16px;color:var(--blue)}
.event-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:16px;border-top:1px dashed var(--sky)}
.event-body>.event-meta:last-of-type{margin-bottom:18px}
.event-tag{padding:3px 14px;border-radius:999px;background:var(--light);color:var(--deep);font-size:12px;font-weight:700}
.event-more{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--deep)}
.event-more .icon{width:18px;height:18px;transition:transform .25s var(--ease)}
.event-card:hover .event-more .icon{transform:translateX(4px)}
.empty-state{grid-column:1/-1;padding:48px 24px;text-align:center;border:1.5px dashed var(--blue);border-radius:var(--r-lg);background:#fff}
.empty-state .icon{width:36px;height:36px;color:var(--blue)}
.empty-state h3{margin:12px 0 4px;font-size:18px}
.empty-state p{font-size:14px;color:var(--muted)}
.activity-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:40px}

/* ==========================================================================
   Stories — one large feature, two more below
   ========================================================================== */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px 40px}
.story-card{display:block;width:100%;padding:0;text-align:left;min-width:0}
.story-card .photo{aspect-ratio:16/10;border-radius:var(--r-xl)}
.story-card:hover .photo>img.is-loaded{transform:scale(1.05)}
.story-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4.5vw,64px);align-items:center}
.story-category{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:24px 0 10px;font:500 13px/1.4 var(--font-en);letter-spacing:.2em;color:var(--blue)}
.story-card:first-child .story-category{margin-top:0}
.story-category span{padding-left:12px;border-left:1.5px solid var(--sky);font:500 12px var(--font-jp);letter-spacing:.06em;color:var(--muted)}
.story-card h3{font:800 20px/1.7 var(--font-jp);letter-spacing:.03em;color:var(--ink)}
.story-card:first-child h3{font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1.55}
.story-info{margin-top:10px;font-size:14px;line-height:1.9;color:var(--muted)}
.story-link{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-bottom:10px;border-bottom:1.5px solid var(--deep);font-size:13px;font-weight:700;color:var(--deep)}
.story-link .icon{width:18px;height:18px;transition:transform .25s var(--ease)}
.story-card:hover .story-link .icon{transform:translateX(5px)}
.story-card:hover h3{color:var(--deep)}
.stories-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.pill-links{display:flex;flex-wrap:wrap;gap:10px}
.pill-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:1.5px solid var(--deep);border-radius:999px;font-size:13px;font-weight:700;color:var(--deep);transition:.2s}
.pill-link .icon{width:16px;height:16px;transition:transform .25s var(--ease)}
.pill-link:hover{background:var(--deep);color:#fff}
.pill-link:hover .icon{transform:translateX(3px)}

/* ==========================================================================
   Join & Collaborate — the strongest blue moment
   ========================================================================== */
.join{background:var(--blue);color:var(--ink)}
.join .eyebrow{color:var(--ink)}
.join .eyebrow::before{border-color:var(--ink);background:transparent}
.join-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px clamp(32px,6vw,88px);align-items:end;margin-bottom:44px}
.join .sec-title{color:var(--ink);font-size:clamp(2rem,5vw,4.25rem);line-height:1.2;white-space:nowrap}
.join .sec-desc{margin:0;color:var(--ink);max-width:none;font-size:16px;font-weight:500}
.join-photo{aspect-ratio:2/1;margin-bottom:64px;border-radius:var(--r-xl)}
.doors{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:44px}
.doors::before{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:var(--ink)}
.door{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:340px;padding:32px 28px 28px;text-align:left;color:var(--ink);background:#fff;border-radius:var(--r-lg);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.door::before{content:"";position:absolute;left:28px;top:-41px;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--ink)}
.door::after{content:"";position:absolute;left:37px;top:-22px;width:2px;height:22px;background:var(--ink)}
.door:last-child::before{background:var(--sun);border-color:var(--ink)}
.door:hover{transform:translateY(-6px);box-shadow:0 26px 40px -22px rgba(4,50,100,.65)}
.door-icon{display:grid;place-items:center;width:68px;height:68px;margin-bottom:26px;border-radius:50%;background:var(--light);color:var(--deep)}
.door-icon .icon{width:38px;height:38px;stroke-width:1.5}
.door-kicker{margin-bottom:8px;font:500 12px/1.4 var(--font-en);letter-spacing:.2em;color:var(--deep)}
.door h3{margin-bottom:10px;font:800 clamp(1.25rem,1.9vw,1.5rem)/1.55 var(--font-jp);letter-spacing:.03em}
.door p{font-size:14px;line-height:2;color:var(--muted)}
.door-go{display:flex;align-items:center;justify-content:flex-end;gap:14px;width:100%;margin-top:auto;padding-top:26px;font-size:14px;font-weight:700}
.door-go .arrow-sq{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--deep);color:#fff;flex:none;transition:transform .25s var(--ease)}
.door:hover .arrow-sq{transform:translateX(4px)}
.door-feature{background:var(--deep);color:#fff}
.door-feature .door-icon{background:rgba(255,255,255,.12);color:#9BDCFB}
.door-feature .door-kicker{color:#9BDCFB}
.door-feature p{color:#CFE6F6}
.door-feature .door-go{justify-content:space-between}
.door-feature .arrow-sq{background:var(--blue);color:var(--ink)}
.join-partner{display:flex;justify-content:center;margin-top:44px}
.join .text-link{color:var(--ink)}

/* ==========================================================================
   News
   ========================================================================== */
.news-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(32px,6vw,88px)}
.news-heading .sec-title{font-size:clamp(2rem,3.2vw,2.8rem)}
.news-heading .text-link{margin-top:26px}
.news-list{border-top:1.5px solid var(--deep)}
.news-row{display:grid;grid-template-columns:104px 108px minmax(0,1fr) 24px;align-items:center;gap:18px;width:100%;padding:26px 8px;text-align:left;border-bottom:1px solid var(--line);transition:background .25s,padding .25s var(--ease)}
.news-row:hover{background:var(--mist);padding-inline:18px}
.news-date{font:500 14px/1 var(--font-en);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--deep)}
.news-tag{justify-self:start;padding:3px 14px;border-radius:999px;background:var(--light);color:var(--deep);font-size:12px;font-weight:700;line-height:1.7}
.news-tag.media-tag{background:#DDF0FC}
.news-tag.notice-tag{background:#E5EFF8;color:#2F5573}
.news-title{font-size:15px;font-weight:500}
.news-row .icon{width:20px;height:20px;color:var(--blue);transition:transform .25s var(--ease)}
.news-row:hover .icon{transform:translateX(4px)}
.news-demo{margin-top:16px}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--deep-2);color:#EAF5FD;padding:clamp(56px,7vw,88px) 0 0}
.footer-sign strong{display:block;font:600 clamp(1rem,1.6vw,1.25rem)/1.7 var(--font-en);letter-spacing:.14em;text-transform:uppercase}
.footer-sign strong .l2{color:#8ED2F8}
.footer-tagline{display:block;margin-top:4px;font:700 clamp(1rem,1.6vw,1.25rem)/1.7 var(--font-jp);letter-spacing:.1em}
.footer-route{position:relative;height:2px;margin:clamp(40px,5vw,64px) 0;background:rgba(255,255,255,.24)}
.footer-route::after{content:"";position:absolute;right:0;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 5px rgba(231,0,18,.28)}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(32px,5vw,72px);padding-bottom:56px}
.socials{display:flex;gap:10px}
.social-btn{display:grid;place-items:center;width:46px;height:46px;border:1.5px solid rgba(255,255,255,.38);border-radius:50%;transition:background .2s,border-color .2s}
.social-btn:hover{background:rgba(255,255,255,.14);border-color:#fff}
.social-btn .icon{width:18px;height:18px}
.social-btn .line-word{font:700 10px var(--font-en);letter-spacing:-.02em}
.footer-col h2{margin-bottom:16px;font:500 13px/1.4 var(--font-en);letter-spacing:.22em;color:#8ED2F8}
.footer-col a,.footer-col button{display:block;padding:6px 0;text-align:left;font-size:15px;color:#DCEDFA;transition:color .2s}
.footer-col a:hover,.footer-col button:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.footer-contact{display:inline-flex!important;align-items:center;gap:18px;margin-top:16px;padding:11px 22px!important;border:1.5px solid rgba(255,255,255,.5);border-radius:999px}
.footer-contact .icon{width:18px;height:18px}
.footer-legal{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px 0 96px;border-top:1px solid rgba(255,255,255,.18)}
.policy-links{display:flex;flex-wrap:wrap;gap:6px 24px}
.policy-links button{padding:0;font-size:12px;color:#B7D5EA}
.policy-links button:hover{color:#fff;text-decoration:underline}
.copyright{font:400 12px/1.8 var(--font-en);letter-spacing:.08em;color:#9FC4DD;white-space:nowrap}

/* ==========================================================================
   Dialog (shared by every modal page)
   ========================================================================== */
.site-dialog{width:min(680px,calc(100% - 32px));max-height:86vh;padding:0;border:0;border-radius:var(--r-lg);background:#fff;color:var(--ink);box-shadow:0 40px 100px rgba(6,26,48,.5);overscroll-behavior:contain}
.site-dialog[open]{animation:pop .3s var(--ease)}
.site-dialog::backdrop{background:rgba(6,40,78,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.dialog-header{position:sticky;top:0;z-index:5;padding:26px 72px 18px 30px;background:#fff;border-bottom:1px solid var(--line)}
.dialog-header .eyebrow{margin-bottom:8px;font-size:11px}
.dialog-header h2{font:800 22px/1.6 var(--font-jp);letter-spacing:.03em;color:var(--deep)}
.dialog-close{position:absolute;right:20px;top:22px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--deep);color:var(--deep);transition:.2s}
.dialog-close:hover{background:var(--deep);color:#fff}
.dialog-body{padding:26px 30px 34px;font-size:15px;line-height:2}
.dialog-body p+p{margin-top:14px}
.dialog-body h3{margin:26px 0 10px;font:800 17px/1.6 var(--font-jp)}
.dialog-body .btn{margin-top:16px}
.dialog-body .text-link{margin-top:14px}
.demo-notice{margin-bottom:20px;padding:12px 16px;border-radius:14px;background:var(--light);color:var(--deep-2);font-size:13px;line-height:1.8}
.dialog-body .detail-image{height:240px;margin-bottom:22px;border-radius:var(--r-md)}
.detail-table{width:100%;margin:16px 0 26px;border-collapse:collapse;font-size:14px}
.detail-table th,.detail-table td{padding:12px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.9}
.detail-table th{width:112px;background:var(--light);font-weight:700}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{position:relative;padding:18px 36px 18px 0;list-style:none;font-weight:700;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:0;top:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--light);font-size:18px;line-height:1;color:var(--deep)}
.faq-item[open] summary::after{content:"−"}
.faq-item p{padding:0 0 20px;font-size:14px;color:var(--muted)}
.contact-form{display:grid;gap:16px}
.form-field label{display:block;margin-bottom:6px;font-size:14px;font-weight:700}
.required{margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--light);font-size:10px;font-weight:700;color:var(--deep)}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:12px 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--mist);font-size:15px;color:var(--ink);transition:border-color .2s,background .2s}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--blue);background:#fff;outline:0;box-shadow:0 0 0 4px rgba(1,159,232,.18)}
.form-field textarea{min-height:120px;resize:vertical}
.form-note{font-size:12px;color:var(--muted)}
.form-feedback{padding:14px 16px;border-radius:14px;background:var(--light);border:1.5px solid var(--blue);font-size:14px}
.mini-list button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:16px 0;text-align:left;border-bottom:1px solid var(--line);font-size:14px;transition:padding .25s var(--ease),color .2s}
.mini-list button:hover{padding-left:8px;color:var(--deep)}
.mini-list .icon{color:var(--blue)}
.asset-credit{font-size:13px;line-height:2.1}
.asset-credit a{color:var(--deep);text-decoration:underline;overflow-wrap:anywhere}
.operator-card{display:flex;align-items:center;gap:22px;margin-bottom:24px;padding:22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--mist)}
.operator-card h3{margin:0 0 6px;font:700 22px/1.4 var(--font-en)}
.operator-card p{margin:0!important;font-size:14px;line-height:1.9}
.operator-slogan{margin-bottom:8px;font:600 28px/1.2 var(--font-en);letter-spacing:-.005em;text-transform:uppercase;color:var(--deep)}

/* ==========================================================================
   Scroll reveal (light touch) & reduced motion
   ========================================================================== */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .desktop-nav{gap:20px}
  .contact-header{padding:0 18px}
}
@media (max-width:1080px){
  :root{--header:70px}
  .desktop-nav{display:none}
  .menu-toggle{display:flex}
  .contact-header{margin-left:auto}
}
@media (max-width:1000px){
  .event-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:900px){
  :root{--gutter:24px}
  /* hero: text on white, then the photo full-bleed */
  .hero{display:flex;flex-direction:column;height:auto;background:linear-gradient(#fff,var(--light))}
  .hero-inner{position:relative;inset:auto;order:1;display:block;width:min(1320px,calc(100% - var(--gutter)*2));padding:36px 0 32px}
  .hero-copy{max-width:none}
  .hero h1{font-size:min(clamp(2.8rem,9.6vw,5.6rem),9.9cqw)}
  .hero-panel{max-width:none;margin-top:26px;padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero-photo{position:relative;inset:auto;order:2;height:auto;aspect-ratio:16/10}
  .hero-photo>img{object-position:72% 40%}
  .hero-scroll{display:none}
  .hero-strip-inner{flex-wrap:wrap;padding:18px 0}
  .hero-note{margin-left:0}
  .about-grid{grid-template-columns:1fr;gap:40px;padding:0 var(--gutter) 80px 0}
  .about-photo{aspect-ratio:1/1;max-height:none;width:calc(100% + var(--gutter))}
  .about-sub{right:calc(var(--gutter) + 8px);bottom:-40px;width:44%;border-width:6px}
  .about-copy{padding-left:var(--gutter)}
  .story-card:first-child{grid-template-columns:1fr;gap:0}
  .story-card:first-child .story-category{margin-top:24px}
  .join-head{grid-template-columns:1fr}
  .join-photo{aspect-ratio:16/10;margin-bottom:56px}
  .doors{grid-template-columns:1fr;gap:44px;padding-top:0;padding-left:34px}
  .doors::before{top:0;bottom:0;left:9px;right:auto;width:2px;height:auto}
  .door{min-height:0}
  .door::before{left:-34px;top:28px}
  .door::after{left:-24px;top:37px;width:24px;height:2px}
  .news-grid{grid-template-columns:1fr;gap:24px}
  .news-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
  .news-heading .text-link{margin-top:0}
  .activities-top .side-note{display:none}
}
@media (max-width:640px){
  :root{--gutter:20px;--header:66px}
  body{font-size:15px}
  .contact-header span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .contact-header{width:46px;height:46px;padding:0;justify-content:center}
  .sheet a{font-size:22px}
  .hero-inner{padding:28px 0 26px}
  .hero .eyebrow{font-size:12px;letter-spacing:.24em;margin-bottom:16px}
  .hero h1{font-size:min(clamp(2.4rem,12.8vw,4.4rem),14.4cqw);line-height:1.04}
  .hero h1 .l2 .w{display:block}
  .hero-kicker{font-size:1.05rem;letter-spacing:.24em}
  .hero-tagline{font-size:.95rem;letter-spacing:.08em}
  .hero-desc{font-size:14px}
  .hero-actions{margin-top:18px}
  .hero-photo{aspect-ratio:4/5}
  .photo>img{object-position:var(--pos-m,var(--pos,50% 50%))}
  .about-photo{aspect-ratio:5/6}
  .join-photo{aspect-ratio:4/3}
  .hero-photo>img{object-position:84% 40%}
  .route li{gap:6px;font-size:10px;letter-spacing:.08em}
  .route li::before{width:10px;height:10px;border-width:2px}
  .route li:not(:last-child)::after{min-width:6px;margin-inline:0 2px}
  .hero-note{font-size:13px;letter-spacing:.08em}
  .hero-note br{display:none}
  .finder{padding:18px}
  .finder-row{grid-template-columns:1fr;gap:12px}
  .finder-row .btn{width:100%;justify-content:space-between}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-18px;padding-inline:18px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .event-grid{grid-template-columns:1fr;gap:22px}
  .event-body h3{min-height:0}
  .activity-bottom,.stories-bottom{flex-direction:column-reverse;align-items:flex-start}
  .activity-bottom .btn{width:100%;justify-content:space-between}
  .story-grid{grid-template-columns:1fr;gap:44px}
  .news-row{grid-template-columns:auto minmax(0,1fr) 20px;grid-template-areas:"date tag arrow" "title title arrow";gap:8px 14px;padding:20px 4px}
  .news-date{grid-area:date}.news-tag{grid-area:tag}.news-title{grid-area:title}.news-row>.icon{grid-area:arrow;align-self:center}
  .news-row:hover{padding-inline:8px}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-legal{flex-direction:column;gap:14px}
  .back-top{right:16px;bottom:16px;width:50px;height:50px}
  .dialog-header{padding:22px 64px 16px 22px}
  .dialog-header h2{font-size:19px}
  .dialog-body{padding:22px}
  .dialog-close{right:14px;top:18px}
  .dialog-body .detail-image{height:190px}
  .detail-table th{width:88px}
  .detail-table th,.detail-table td{padding:10px 8px;font-size:13px}
  .operator-card{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:380px){
  .route li{font-size:9.5px}
  .footer-links{grid-template-columns:1fr;gap:0}
}