/* =========================================================
   home.css — front page only sections
   ========================================================= */
.hero{
  position: relative;
  height: clamp(360px, 46vw, 620px);
  background: var(--sky-light);
  color:#fff;
  overflow:hidden;
  display:flex; align-items: center; justify-content: center;
}
.hero-bg{ position:absolute; inset:0; will-change: transform; z-index: 0; }
.hero-bg .img-placeholder{
  width:100%; height:115%;
  background:
    linear-gradient(180deg, rgba(180,215,240,.15) 0%, rgba(80,130,180,.3) 55%, rgba(30,74,120,.4) 100%),
    linear-gradient(180deg, #A8CFEC 0%, #7FB0D8 35%, #5590BE 70%, #3E7BA8 100%);
}
.hero-bg .img-placeholder.has-img{ background: var(--navy-deep); }
.hero-bg .img-placeholder.has-img img{ opacity:.85; }
.hero-bg .img-placeholder::before{
  background:
    radial-gradient(ellipse 500px 120px at 15% 20%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(ellipse 400px 100px at 78% 15%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(ellipse 320px 80px at 45% 12%, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(0deg, rgba(19,54,89,.35) 0%, transparent 30%),
    linear-gradient(0deg, rgba(62,123,168,.5) 0%, transparent 25%);
}
.hero-bg .img-placeholder > span{ display:none; }

.hero-inner{
  position: relative; z-index: 2; width:100%;
  text-align: center; padding: 0 var(--pad-x);
}
.hero-title-en{
  font-family: var(--serif-en); font-weight: 400;
  font-size: clamp(52px, 9vw, 130px);
  line-height: .95; letter-spacing: .04em;
  color: #FFFFFF;
  text-shadow: 0 2px 20px rgba(19,54,89,.3);
  margin: 0;
  display: inline-flex; flex-direction: column;
  align-items: flex-start; gap: 0; position: relative;
}
.hero-title-en .l1, .hero-title-en .l2, .hero-title-en .l3{ display: block; overflow: hidden; }
.hero-title-en .l1 > span,
.hero-title-en .l2 > span,
.hero-title-en .l3 > span{
  display: inline-block; transform: translateY(115%);
  transition: transform 1.2s var(--ease2);
  transition-delay: var(--rd, 0ms);
}
.hero.is-in .hero-title-en .l1 > span,
.hero.is-in .hero-title-en .l2 > span,
.hero.is-in .hero-title-en .l3 > span{ transform: translateY(0); }

.hero-title-jp{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-30%, -50%);
  font-family: var(--serif-jp); font-weight: 500;
  font-size: clamp(20px, 2.6vw, 34px);
  color: #FFFFFF; letter-spacing: .18em;
  padding: 6px 24px;
  border-top: 1px solid rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(255,255,255,.9);
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(19,54,89,.35);
  opacity: 0;
  transition: opacity 1s var(--ease) 1s;
}
.hero.is-in .hero-title-jp{ opacity: 1; }
.hero-stack{ position: relative; display: inline-block; }

@media (max-width: 760px){
  .hero{ height: clamp(300px, 60vw, 420px); }
  .hero-title-jp{ transform: translate(-25%, -50%); font-size: 16px; padding: 4px 14px; }
}
@media (max-width: 380px){
  .hero-title-jp{ white-space: normal; text-align:center; max-width: 82vw; }
}

/* TOP NEWS strip */
.top-news{
  background: #FFFFFF;
  padding: clamp(50px, 6vw, 80px) 0;
  border-bottom: 1px solid var(--line-soft);
}
.top-news-inner{
  display: grid; grid-template-columns: 280px 1fr auto;
  gap: clamp(30px, 5vw, 70px); align-items: start;
}
.top-news-head .eyebrow{ margin-bottom: 14px; }
.top-news-head h2{
  font-family: var(--serif-en);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1; color: var(--navy);
  font-weight: 400;
}
.top-news-head h2 .it{ font-style: italic; color: var(--accent); }
.top-news-head .jp{
  margin-top: 12px; font-family: var(--serif-jp);
  font-size: 13px; color: var(--gray-500); letter-spacing: .14em;
}
.top-news-list{ border-top: 1px solid var(--line); }
.top-news-item{
  display: grid; grid-template-columns: 130px 100px 1fr auto;
  gap: 24px; align-items: baseline;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line-soft);
  transition: padding .4s var(--ease), background .4s var(--ease);
}
.top-news-item:hover{ background: var(--sky-pale); padding-left: 16px; padding-right: 16px; }
.top-news-item .d{ font-family: var(--serif-num); font-size: 16px; color: var(--navy); letter-spacing: .08em; }
.top-news-item .cat{
  display: inline-block; padding: 3px 12px;
  font-family: var(--serif-en); font-size: 10px; letter-spacing: .22em;
  border: 1px solid var(--navy); color: var(--navy);
  justify-self: start;
}
.top-news-item .cat.solid{ background: var(--navy); color: #fff; }
.top-news-item .cat.gold{ background: var(--sky); color: #fff; border-color: var(--sky); }
.top-news-item .t{ font-family: var(--serif-jp); font-size: 15px; color: var(--navy-ink); letter-spacing: .06em; line-height: 1.7; font-weight: 500; }
.top-news-item .arrow{ font-family: var(--serif-en); font-style: italic; font-size: 11px; letter-spacing: .18em; color: var(--accent); }
.top-news-more{ display: flex; align-items: flex-start; }
.top-news-more a{
  font-family: var(--serif-en); font-style: italic;
  font-size: 14px; letter-spacing: .12em;
  color: var(--navy); padding-bottom: 4px;
  border-bottom: 1px solid var(--accent);
  transition: color .4s var(--ease);
}
.top-news-more a:hover{ color: var(--accent); }
@media (max-width: 900px){
  .top-news-inner{ grid-template-columns: 1fr; }
  .top-news-item{ grid-template-columns: 90px 80px 1fr; gap: 14px; }
  .top-news-item .arrow{ display: none; }
}
@media (max-width: 560px){
  .top-news-item{ grid-template-columns: 1fr; gap: 8px; padding: 20px 4px; }
}

.mission{ background: #FFFFFF; }
.mission-grid{
  display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.mission-fig .img-placeholder{ aspect-ratio: 4/5; }
.mission-body h2{ margin-top: 32px; }
.mission-body .lead{ margin-top: 32px; }
.mission-list{ margin-top: 46px; border-top: 1px solid var(--line); list-style:none; padding:0; }
.mission-list li{
  display:grid; grid-template-columns: 60px 1fr; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.mission-list .n{ font-family: var(--serif-num); font-size: 22px; color: var(--accent); }
.mission-list .t{ font-family: var(--serif-jp); font-weight:500; font-size: 15px; color: var(--navy); letter-spacing:.06em; }
.mission-list .d{ display:block; font-family: var(--sans-jp); font-size: 13px; color: var(--gray-500); margin-top:4px; letter-spacing:.05em; }
@media (max-width: 900px){ .mission-grid{ grid-template-columns: 1fr; } }

.routes-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.route-card{
  background: var(--white);
  padding: clamp(30px, 3.6vw, 52px) clamp(24px, 2.6vw, 36px);
  display:flex; flex-direction:column; gap: 22px;
  transition: background .5s var(--ease), color .5s var(--ease);
  position:relative; overflow:hidden;
  min-height: 320px;
}
.route-card::before{
  content:""; position:absolute; inset:0; background: var(--navy);
  transform: translateY(101%); transition: transform .7s var(--ease2);
  z-index:0;
}
.route-card > *{ position: relative; z-index: 1; }
.route-card:hover{ color:#fff; }
.route-card:hover::before{ transform: translateY(0); }
.route-card .n{ font-family: var(--serif-num); font-size: 14px; letter-spacing:.24em; color: var(--accent); }
.route-card .en{ font-family: var(--serif-en); font-size: clamp(28px, 3vw, 42px); line-height: 1; }
.route-card .jp{ font-family: var(--serif-jp); font-size: 14px; letter-spacing:.14em; }
.route-card .arrow{
  margin-top: auto; align-self: flex-end;
  width: 42px; height: 42px; border:1px solid currentColor; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  transition: transform .5s var(--ease);
  position:relative;
}
.route-card .arrow::after{ content:""; width: 14px; height:1px; background: currentColor; }
.route-card .arrow::before{
  content:""; width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform: rotate(45deg); position:absolute; right:12px;
}
.route-card:hover .arrow{ transform: rotate(-45deg); }
@media (max-width: 900px){ .routes-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .routes-grid{ grid-template-columns: 1fr; } }

.counters{
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
  color:#fff;
}
.counters-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.counter{
  padding: clamp(40px,4vw,70px) clamp(24px,2.4vw,40px);
  border-right: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.counter:last-child{ border-right: 0; }
.counter .lb{
  font-family: var(--serif-en); font-style: italic; font-size: 12px; letter-spacing: .18em; color: var(--sky-light);
  margin-bottom: 26px;
}
.counter .num{
  font-family: var(--serif-num); font-weight: 400;
  font-size: clamp(56px, 6.5vw, 96px);
  line-height: 1; color: #fff; letter-spacing: -.01em;
}
.counter .num .u{
  font-family: var(--serif-jp); font-size: 15px; letter-spacing: .18em; margin-left: 8px;
  color: rgba(255,255,255,.6);
}
.counter .cap{
  margin-top: 22px;
  font-family: var(--serif-jp); font-size: 13px; letter-spacing: .1em; color: rgba(255,255,255,.75);
}
@media (max-width: 900px){
  .counters-grid{ grid-template-columns: repeat(2, 1fr); }
  .counter:nth-child(2){ border-right: 0; }
}
@media (max-width: 520px){ .counters-grid{ grid-template-columns: 1fr; } .counter{ border-right: 0; } }