/* (Removed legacy hybrid absolute mosaic block to simplify: now using pure flex layout) */
/* Base Reset / Typography */
* { box-sizing: border-box; }
html { font-family: 'Inter', system-ui, Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body { margin:0; color:#222;  font-family: Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans CJK SC, WenQuanYi Micro Hei, Arial, sans-serif;}
img { max-width:100%; display:block; }
a { color:#c40000; text-decoration:none; }
a:hover { text-decoration:underline; }

:root {
  --brand:#c40000;
  --brand-dark:#960000;
  --bg:#ffffff;
  --bg-alt:#f2f4f7;
  --text:#1e2227;
  --radius:14px;
  --max-width:1160px;
  --shadow:0 4px 10px -2px rgba(0,0,0,.08),0 2px 4px -1px rgba(0,0,0,.04);
  --gradient:linear-gradient(135deg,#c40000,#ff4d4d);
}

.container { width:100%; margin:0 auto; max-width:var(--max-width); padding:0 1.25rem; }
.flex { display:flex; }
.between { justify-content:space-between; }
.center-v { align-items:center; }

/* Header */
.site-header { position:sticky; top:0; z-index:30; }
.site-header.minimal { background:#fff; border-bottom:1px solid #ededed; }
.site-header.minimal .inner {margin:0 auto; height:48px; padding:0 1.1rem 0 2.2rem; display:flex; align-items:center; justify-content:flex-end; }
.top-links a { line-height:48px; display:inline-flex; align-items:center; }
.logo { font-weight:700; font-size:1.35rem; letter-spacing:.5px; color:#c40000; }
.top-links { display:flex; gap:2.2rem; font-size:.8rem; font-weight:600; letter-spacing:.4px; }
.top-links a { color:#222; padding:0; position:relative; text-decoration:none; font-weight:600; transition:color .25s; }
.top-links a::after { display:none; }
.top-links a:hover { color:#000; text-decoration:none; }
.top-links a.active { font-weight:700; }
.main-nav { position:relative; }
.nav-toggle { display:none; background:none; border:1px solid #ccc; padding:.4rem .7rem; border-radius:8px; font-size:1rem; cursor:pointer; }
.nav-list { list-style:none; display:flex; gap:1.25rem; padding:0; margin:0; }
.nav-list a { font-weight:500; padding:.5rem .25rem; border-radius:6px; }
.nav-list a:hover, .nav-list a:focus { background:#f4f4f4; text-decoration:none; }
.nav-list a.active { background:#ffe5e5; color:#a20000; }

/* Mobile header fix: allow wrapping instead of clipping (original fixed 48px height caused cut off when links wrapped) */
@media (max-width:560px){
  .site-header.minimal .inner { height:auto; padding:.25rem .9rem .4rem; flex-wrap:wrap; justify-content:flex-start; }
  .top-links { flex-wrap:wrap; gap:.6rem 1.1rem; font-size:.72rem; }
  .top-links a { line-height:1.15; padding:.35rem 0; }
}
@media (max-width:400px){
  .top-links { gap:.5rem .9rem; font-size:.68rem; }
}

/* Hero */
.hero.full-bleed { position:relative; min-height:760px; display:flex; align-items:center; background:#000 url('../assets/img/hero-ship.jpg') center/cover no-repeat; }
.hero.full-bleed .hero-overlay { position:absolute; inset:0; background:
  linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.25),rgba(0,0,0,.25)),
  url('../assets/img/Vessel_HK1.jpg') center/cover no-repeat; }
.hero-content { position:relative; max-width:760px; width:100%; padding:3.5rem 2.5rem 4rem; margin-left:18%; color:#fff; }
.pre-head { font-size:1.5rem; letter-spacing:.5px; font-weight:500; margin:0 0 1rem; color:#e0e0e0; }
.hero-heading { margin:0; font-size:4rem; line-height:1.05; font-weight:400; display:flex; flex-direction:column; gap:.35rem; }
@media (max-width:1000px){ .hero-heading { font-size:3rem; } }
@media (max-width:760px){ .hero.full-bleed { min-height:460px; } .hero-content { padding:4.5rem 1.5rem 3rem; margin-left:0; } .hero-heading { font-size:2.4rem; } }

/* Buttons */
.btn { --btn-bg:#e2e2e2; --btn-color:#222; display:inline-block; padding:.75rem 1.25rem; border-radius:10px; font-weight:600; font-size:.95rem; line-height:1; border:2px solid transparent; cursor:pointer; transition:.25s; }
.btn:hover { filter:brightness(.95); text-decoration:none; }
.btn.primary { --btn-bg:var(--brand); --btn-color:#fff; background:var(--btn-bg); color:var(--btn-color); }
.btn.primary:hover { background:var(--brand-dark); }
.btn.outline { background:#fff; border-color:var(--brand); color:var(--brand); }
.btn.outline:hover { background:#ffe5e5; }
.btn.small { padding:.55rem .9rem; font-size:.8rem; }

/* About */
.about { padding:4rem 0 2rem; background:#fff; min-height:768px; display:flex; align-items:center; }
.about-inner { width:100%; }
.about-inner.redesigned { max-width:1200px; margin:0 auto; padding:0 3rem; display:grid; grid-template-columns:460px 1fr; gap:2.8rem; align-items:center; }
.about-inner.redesigned.top { align-items:flex-start; }
.about-inner.redesigned.shifted { transform:none; }
.about-inner.redesigned .col { position:relative; }
.about-heading.large { font-size:3.4rem; font-weight:400; letter-spacing:.5px; color:#876a53; margin:0 0 2.2rem; line-height:1.05; }
.about-p { font-size:1.25rem; line-height:1.5; margin:0 0 24px; max-width:520px; letter-spacing:.3px; font-weight:400; }
/* Apply same size to any paragraph inside .about-text container */
.about-text p { font-size:1.25rem; line-height:1; }
@media (max-width:640px){ .about-p { font-size:18px; line-height:1.42; } }
.about-watch { margin-top:.5rem; padding:1rem 3rem; }
.about-video .video-frame { position:relative; width:100%; max-width:880px; aspect-ratio:16/9; background:#000; display:flex; align-items:center; justify-content:center; overflow:hidden; }
/* Fixed requested size variant */
.about-video .video-frame.fixed-607 { width:607px; height:405px; max-width:none; aspect-ratio:auto; }
@media (max-width:660px){
  .about-video .video-frame.fixed-607 { width:100%; height:auto; aspect-ratio:607/405; }
}
.about-video-el { width:100%; height:100%; object-fit:cover; display:block; }
.inline-play { position:absolute; inset:0; margin:auto; width:210px; height:210px; background:#000; color:#fff; border:0; border-radius:50%; font-size:3.2rem; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:.92; transition:.4s; box-shadow:0 12px 30px -10px rgba(0,0,0,.45); }
.inline-play:hover { transform:scale(1.05); opacity:1; }
.inline-play:focus-visible { outline:4px solid var(--brand); outline-offset:4px; }
/* Bottom custom video controls */
.video-frame { position:relative; }
.video-controls { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:.75rem; padding:.55rem .85rem; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.75) 100%); backdrop-filter:blur(2px); }
.video-controls .vc-btn { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3); width:44px; height:38px; border-radius:10px; font-size:1.15rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.25s; }
.video-controls .vc-btn:hover, .video-controls .vc-btn:focus-visible { background:rgba(255,255,255,.22); outline:none; }
.video-controls .vc-btn:active { transform:scale(.9); }
.video-controls .vc-progress { flex:1; appearance:none; -webkit-appearance:none; height:6px; border-radius:4px; background:rgba(255,255,255,.35); cursor:pointer; position:relative; }
.video-controls .vc-progress::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px rgba(0,0,0,.4); cursor:pointer; transition:.2s; }
.video-controls .vc-progress::-webkit-slider-thumb:hover { transform:scale(1.12); }
.video-controls .vc-progress::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:#fff; border:none; box-shadow:0 0 0 2px rgba(0,0,0,.4); cursor:pointer; transition:.2s; }
.video-controls .vc-progress:focus { outline:none; }
@media (max-width:660px){
  .video-controls { gap:.55rem; padding:.45rem .6rem; }
  .video-controls .vc-btn { width:38px; height:34px; font-size:1rem; }
  .video-controls .vc-progress { height:5px; }
}
@media (max-width:1200px){ .about-inner.redesigned { grid-template-columns:420px 1fr; gap:2.4rem; } .about-heading.large { font-size:3rem; } }
@media (max-width:980px){ .about-inner.redesigned { grid-template-columns:1fr; gap:3rem; padding:0 2rem; } .about-video .video-frame { max-width:100%; } .about-heading.large { font-size:2.8rem; } .about-p { max-width:100%; }
  .inline-play { width:160px; height:160px; font-size:2.6rem; }
}
@media (max-width:640px){ .about-heading.large { font-size:2.3rem; } .inline-play { width:130px; height:130px; font-size:2.2rem; } .about { min-height:640px; } }
@media (max-width:460px){ .about-heading.large { font-size:2rem; } .about-p { font-size:.95rem; } .inline-play { width:110px; height:110px; font-size:1.9rem; } }
.about-inner { max-width:var(--max-width); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:3.5rem; padding:4rem 2.5rem 3rem; align-items:center; }
.about-heading { font-size:2.4rem; font-weight:400; letter-spacing:.5px; color:#876a53; margin:0 0 1.5rem; }
.about-text p { margin:0 0 1.35rem; font-size:1.25rem; max-width:400px; }
.pill-btn { background:linear-gradient(135deg,#d22d3f,#c11c30); color:#fff; border:0; padding:1rem 3.2rem; font-weight:600; border-radius:40px; cursor:pointer; font-size:.9rem; margin-top:.5rem; letter-spacing:.3px; box-shadow:0 6px 14px -6px rgba(193,28,48,.55); transition:.35s; }
.pill-btn:hover { filter:brightness(.95); }
.about-media { display:flex; justify-content:center; }
.about-video-thumb { position:relative; max-width:560px; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:0; }
.about-video-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.play-btn { position:absolute; inset:0; margin:auto; width:140px; height:140px; background:#000; border:0; border-radius:50%; color:#fff; font-size:2.6rem; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:.9; transition:.4s; }
.play-btn:hover { transform:scale(1.06); opacity:1; }
.play-icon { transform:translateX(4px); }
@media (max-width:900px){ .about-inner { padding:3.5rem 1.5rem 2.5rem; } .about-heading { font-size:2.1rem; } .play-btn { width:110px; height:110px; font-size:2.2rem; } }
@media (max-width:600px){ .about-inner { gap:2rem; } .pill-btn { width:100%; text-align:center; } }

/* Programs */
.programs { padding:4rem 0; background:var(--bg-alt); }
.programs h2 { margin-top:0; font-size:2.1rem; }
.section-intro { margin:.35rem 0 2rem; color:#555; font-size:.95rem; }
.program-detail { display:grid; grid-template-columns:520px 1fr; gap:4rem; align-items:start; margin:3rem 0 4.5rem; }
.program-detail.reverse { grid-template-columns:1fr 520px; }
.program-detail.reverse .media-stack { order:2; }
.program-detail.reverse .detail-text { order:1; }
.media-stack { display:flex; flex-direction:column; gap:1.1rem; }
.stack-img { width:100%; aspect-ratio:16/9; overflow:hidden; background:#ddd; }
.stack-img img { width:100%; height:100%; object-fit:cover; display:block; }
.detail-text { max-width:640px; }
.detail-heading { font-size:2.8rem; font-weight:400; color:#876a53; margin:0 0 2rem; letter-spacing:.5px; line-height:1.1; }
.detail-meta { font-weight:500; margin:0 0 2rem; }
.detail-text p { margin:0 0 1.6rem; }
.pill-btn.alt { display:inline-flex; align-items:center; justify-content:center; min-width:200px; }
@media (max-width:1200px){ .program-detail { grid-template-columns:420px 1fr; gap:3rem; } .detail-heading { font-size:2.4rem; } }
@media (max-width:900px){ .program-detail, .program-detail.reverse { grid-template-columns:1fr; } .media-stack { flex-direction:row; } .stack-img { flex:1; aspect-ratio:4/3; } }
@media (max-width:600px){ .media-stack { flex-direction:column; } .detail-heading { font-size:2.1rem; } }
.program-split { display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); margin-bottom:3rem; }
.program-block { background:#fff; border-radius:28px; padding:2rem 2.2rem 2.25rem; position:relative; box-shadow:0 6px 18px -6px rgba(0,0,0,.12),0 2px 6px -2px rgba(0,0,0,.08); overflow:hidden; }
.program-block:hover { transform:translateY(-4px); box-shadow:0 10px 26px -8px rgba(0,0,0,.18),0 4px 10px -2px rgba(0,0,0,.08); transition:.4s cubic-bezier(.4,.7,.2,1); }
.program-block:not(:hover) { transition:.4s cubic-bezier(.4,.7,.2,1); }
.program-block::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(150deg,rgba(255,255,255,0) 40%,rgba(255,230,230,.55)); mix-blend-mode:overlay; opacity:.6; }
.program-block-head h3 { margin:0 0 .4rem; font-size:1.4rem; }
.program-block-head .sub { margin:0 0 1rem; font-weight:500; font-size:.8rem; letter-spacing:.5px; text-transform:uppercase; color:#a22; }
.program-body p { margin:0 0 1rem; }
.bullets { margin:0 0 1.1rem 1.2rem; padding:0; }
.bullets li { margin:0 0 .4rem; }
.inline-cta { font-weight:600; }
.text-link { color:var(--brand); font-weight:600; }
.text-link:hover { text-decoration:underline; }
/* Offer Tiles Section */
.offer-tiles { margin:0 0 2.5rem; position:relative; width:100%; }
.offer-band { background:#000; padding:0 60px 0; min-height:486px; display:flex; align-items:center; }
.offer-band .tiles-wrapper { max-width:1400px; }
.offer-heading-bar { background:#fff; padding:0 3rem 100px 3rem; padding-bottom:3rem; margin:0 auto; max-width:1200px; }
.offer-heading { font-size:3.2rem; font-weight:400; color:#876a53; margin:0; line-height:1.07; margin-left:0; }
.tiles-wrapper { display:grid; grid-template-columns:repeat(3,1fr); width:100%; min-height:486px; position:relative; max-width:1400px; margin:0 auto; }
@media (max-width:1500px){ .offer-band { padding:50px 40px 70px; } }
@media (max-width:1100px){ .offer-heading-bar { padding:120px 3rem 80px; } }
@media (max-width:900px){ .offer-band { padding:40px 20px 60px; min-height:0; } .offer-heading-bar { padding:90px 2rem 60px; max-width:100%; } .offer-heading { font-size:3rem; } }
@media (max-width:640px){ .offer-heading-bar { padding:70px 1.5rem 46px; max-width:100%; } .offer-heading { font-size:2.5rem; } }
.offer-tile { position:relative; display:flex; align-items:flex-end; justify-content:flex-start; text-decoration:none; color:#fff; overflow:hidden; min-height:440px; }
.offer-tile .tile-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.68); transition:.7s ease; }
.offer-tile .tile-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,.15)); }
.offer-tile .tile-text { position:relative; padding:0 2.8rem 3.4rem; z-index:2; }
.offer-tile h3 { margin:0 0 .3rem; font-size:2rem; font-weight:700; letter-spacing:.5px; line-height:1.1; }
.offer-tile h3 br { display:none; }
.offer-tile.exec h3 br { display:inline !important; }
.tile-sub { margin:0; font-size:2rem; font-weight:700; letter-spacing:.3px; }
.offer-tile::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,0) 0 60%,rgba(255,255,255,.18)); opacity:0; mix-blend-mode:overlay; transition:.6s; }
.offer-tile:hover .tile-bg { transform:scale(1.08); filter:brightness(.85); }
.offer-tile:hover::after { opacity:1; }
@media (max-width:1250px){ .offer-heading { font-size:3rem; } .offer-tile { min-height:400px; } }
@media (max-width:1100px){ .offer-tile h3 { font-size:1.8rem; } }
@media (max-width:900px){ .tiles-wrapper { grid-template-columns:1fr; } .offer-tile { min-height:360px; } .offer-tile .tile-text { padding:0 2rem 2.6rem; } }
@media (max-width:640px){ .offer-heading { font-size:2.6rem; } }

/* Events */

/* FAQ */
.faq { padding:5rem 0 4rem; background:#fff; }
.faq-inner { max-width:880px; margin:0 auto; padding:0 1.25rem; }
.faq-heading { text-align:center; font-size:1.5rem; letter-spacing:.5px; font-weight:600; color:#7c6756; text-transform:none; margin:0 0 2.5rem; }
.faq-subheading { font-size:1.05rem; font-weight:600; color:#7c6756; letter-spacing:.4px; margin:-.5rem 0 1.2rem; text-align:left; }
.faq-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem; }
.faq-item { background:#f5f5f5; border-radius:0; padding:0; overflow:hidden; }
.faq-q { background:transparent; border:0; width:100%; text-align:left; font:500 1rem/1.45 'Inter',sans-serif; padding:1rem .85rem 1rem 1.1rem; cursor:pointer; display:flex; align-items:flex-start; gap:.5rem; position:relative; }
.faq-q .num { font-weight:500; width:1.4rem; flex-shrink:0; }
.faq-q[aria-expanded="true"] { background:#eee; font-weight:600; }
.faq-a { padding:0 2.9rem 1.3rem 2.55rem; font-size:.95rem; line-height:1.55; animation:faqopen .35s ease; }
@keyframes faqopen { from { opacity:0; transform:translateY(-4px);} to { opacity:1; transform:translateY(0);} }
.faq-item:not(.open) .faq-a { display:none; }
.faq-item.open .faq-q { background:#eee; }
.faq-q:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
@media (max-width:600px){ .faq-a { padding:0 1.9rem 1.1rem 2.3rem; } }

/* CTA */
.apply-cta { padding:4.5rem 0; text-align:center; background:linear-gradient(135deg,#fff,#ffe5e5); }
.apply-cta h2 { margin:.2rem 0 1rem; font-size:2rem; }
.apply-cta p { font-size:1.05rem; margin:0 0 1.25rem; }
.cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* Footer */
.site-footer { background:#1e1e24; color:#d9d9df; padding:2.5rem 0; font-size:.85rem; }
.footer-inner { display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:space-between; }
.foot-brand { font-weight:700; letter-spacing:1px; }
.foot-meta, .foot-legal a { color:#a7a7b0; }
.foot-legal a { margin-right:.5rem; }
.foot-legal a:hover { color:#fff; }

/* Mega Footer */
.mega-footer { position:relative; background:#303030; color:#e5e5e5; padding:4.5rem 0 2rem; margin-top:0; }
.mega-inner { max-width:1600px; margin:0 auto; padding:0 3rem; }
.mega-footer.shift-right .mega-inner { padding-left:8rem; }
@media (min-width:1400px){ .mega-footer.shift-right .mega-inner { padding-left:10rem; } }
@media (max-width:900px){ .mega-footer.shift-right .mega-inner { padding-left:3rem; } }
.footer-cols { display:grid; grid-template-columns:300px 300px 1fr; gap:4rem 3.5rem; align-items:start; }
.f-col { font-size:.9rem; }
.f-title { color: #fff; font-size: 24px; padding-top: 20px; margin-bottom: 12px; font-weight:600; letter-spacing:.4px; }
.f-links { color: #999999;
  font-size: 16px;
  line-height: 30px;list-style:none; padding:0; margin:0; display:flex; flex-direction:column; }
.f-links a { color:#999999; text-decoration:none; line-height:1.35; }
.f-links a:hover { color:#fff; }
.f-feature { grid-column:3; position:relative; max-width:100%; }
.feature-heading { font-size:2.6rem; line-height:1.1; font-weight:400; margin:0 0 1.5rem; color:#fff; text-align: center;}
@media (min-width:1100px){
  /* Align feature heading vertically with .f-title which has padding-top:40px */
  .f-feature .feature-heading { padding-top:40px; }
}
.feature-text { font-size:.95rem; line-height:1.6; margin:0 0 1.3rem; max-width:540px; }
.feature-bullets { list-style:none; padding:0; margin:0 0 1.75rem; font-size:.9rem; line-height:1.55; }
.feature-bullets li { position:relative; padding-left:1.1rem; margin:0 0 .4rem; }
.feature-bullets li::before { content:'•'; position:absolute; left:0; color:#ff4d4d; }
.app-shot { margin-top:1.2rem; }
.phone-frame { width:200px; height:420px; border-radius:28px; background:#111; border:3px solid #444; display:flex; align-items:center; justify-content:center; font-size:.85rem; color:#aaa; }
.foot-bottom { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:center; border-top:1px solid #3a3a3a; margin-top:3.5rem; padding-top:1.35rem; font-size:.78rem; }
.legal-links a { color:#bbb; margin-right:1rem; text-decoration:none; }
.legal-links a:last-child { margin-right:0; }
.legal-links a:hover { color:#fff; text-decoration:underline; }

/* === Enhanced Feature App (footer) === */
.feature-heading.big {font-size:2.6rem; line-height:1.08; font-weight:400; letter-spacing:.5px;}
@media (max-width:1300px){ .feature-heading.big {font-size:2.4rem;} }
@media (max-width:980px){ .feature-heading.big {font-size:2.2rem;} }
.feature-app-wide {position:relative; max-width:660px; width:fit-content; margin:0 auto 0 0;}
/* Ensure text stays on the left and phone image on the right for wide screens */
.feature-app-grid {display:flex; align-items:flex-start; justify-content:flex-start; gap:56px; flex-wrap:wrap;}
@media (min-width:900px){ .feature-app-grid {flex-wrap:nowrap;} }
.feature-app-textcol {flex:1 1 460px; max-width:300px; order:1;}
.feature-app-textcol .feature-text.centered {color: #fff; text-align:center; font-size:16px; line-height:30px; margin:0 0 1.6rem; font-weight:500; max-width:600px; margin-left:auto; margin-right:auto;}
.feature-bullets.wide {max-width:600px; margin:0 auto; font-size:.9rem; line-height:1.6; padding:0 0 0 1.1rem;}
.feature-bullets.wide li {position:relative; padding-left:1.05rem; color:#cfd0d2; margin:0 0 .55rem;}
.feature-bullets.wide li::before {content:'·'; position:absolute; left:0; top:0; line-height:1; color:#cfd0d2; font-weight:600;}
.feature-app-phone {flex:0 0 auto; order:2;}
.phone-frame.real {display:none;}
.phone-img {width:160px; height:auto; object-fit:cover; border-radius:14px; box-shadow:0 16px 40px -18px rgba(0,0,0,.45),0 6px 16px -8px rgba(0,0,0,.35);}
/* Inline bullet paragraph variant */
.feature-text-description {color:#999999; font-size:16px; line-height:30px; max-width:600px; margin:0 auto 0; text-align:left; white-space:normal;}
.feature-text-description br {line-height:1.55;}
@media (max-width:1100px){
  .phone-img {width:150px;}
}
@media (max-width:840px){
  .phone-img {width:140px;}
}
@media (max-width:640px){
  .phone-img {width:140px;}
}
@media (max-width:640px){
  .feature-heading.big {font-size:2rem;}
  .phone-img {width:120px; height:auto;}
}
@media (max-width:640px){
  .feature-heading.big {font-size:2rem;}
  /* phone frame removed, size handled by .phone-img */
}

/* Feedback tab & top button */

@media (max-width:1400px){ .feature-heading { font-size:2.3rem; } .footer-cols { grid-template-columns:repeat(3,240px) minmax(360px,1fr); } }
@media (max-width:1100px){ .footer-cols { grid-template-columns:repeat(2,240px) 1fr; } .f-feature { grid-column:1 / -1; } }
@media (max-width:820px){ .footer-cols { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2.5rem 2rem; } .feature-heading { font-size:2rem; } .feature-text { max-width:100%; } }
@media (max-width:600px){ .mega-inner { padding:0 1.5rem; } .phone-frame { width:160px; height:340px; } }

/* Additional RWD refinements */
@media (max-width:960px){
  .hero-content { padding:4rem 1.75rem 3rem; }
  .hero-heading { font-size:2.8rem; }
  .program-detail { margin:2.5rem 0 4rem; }
}
@media (max-width:720px){
  .hero-heading { font-size:2.2rem; }
  .about-heading { font-size:1.95rem; }
  .detail-heading { font-size:2rem; }
  .offer-heading { font-size:2.2rem; }
  .feature-heading { font-size:1.85rem; }
  .programs h2 { font-size:1.8rem; }
  .top-links { gap:1.2rem; }
}
@media (max-width:520px){
  .hero-content { padding:3.5rem 1.25rem 2.5rem; }
  .hero-heading { font-size:1.95rem; }
  .pre-head { font-size:.8rem; }
  .about-inner { grid-template-columns:1fr; }
  .offer-tile h3 { font-size:1.55rem; }
  .offer-tile .tile-text { padding:0 1.4rem 1.9rem; }
  .program-detail { margin:2rem 0 3.5rem; }
  .detail-heading { font-size:1.75rem; }
  .detail-text p { font-size:.92rem; }
  .faq { padding:4rem 0 3rem; }
  .faq-heading { font-size:.9rem; margin-bottom:2rem; }
  .feature-text { font-size:.9rem; }
  .feature-bullets { font-size:.85rem; }
}
@media (max-width:420px){
  .hero-heading { font-size:1.7rem; }
  .pill-btn { padding:.9rem 2.2rem; }
  .pill-btn.alt { min-width:0; width:100%; }
  .program-detail { gap:2rem; }
  .media-stack { gap:.75rem; }
  .stack-img { aspect-ratio:3/2; }
  .phone-frame { width:140px; height:300px; }
}

/* Modal */
.modal[aria-hidden="true"] { display:none; }
.modal { position:fixed; inset:0; z-index:100; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); }
.modal-dialog { position:relative; background:#fff; width:min(860px,90%); margin:5vh auto; border-radius:18px; padding:1.75rem 1.5rem 2rem; box-shadow:0 10px 30px -4px rgba(0,0,0,.25); animation:pop .4s ease; }
@keyframes pop { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
.modal-close { position:absolute; top:.65rem; right:.65rem; background:#f2f2f5; border:0; width:40px; height:40px; border-radius:12px; font-size:1.35rem; cursor:pointer; }
.modal-close:hover { background:#e4e4e9; }
.video-wrapper { margin-top:1rem; }
.ratio-box { background:#111; color:#fff; aspect-ratio:16/9; border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:600; }

/* Reveal animations */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.4,.7,.2,1), transform .9s cubic-bezier(.4,.7,.2,1); }
.reveal.in { opacity:1; transform:translateY(0); }

/* Nav responsive */
@media (max-width: 860px) {
  .nav-toggle { display:inline-block; }
  .nav-list { position:absolute; top    :110%; right:0; background:#fff; flex-direction:column; padding:1rem 1.2rem; border:1px solid #eee; border-radius:14px; box-shadow:var(--shadow); min-width:200px; opacity:0; pointer-events:none; transform:translateY(-8px); transition:.3s; }
  .nav-list.open { opacity:1; transform:translateY(0); pointer-events:auto; }
}

/* Accessibility focus outline */
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

/* Utilities */
.hero-art { position:relative; }

/* Dark mode (optional) */
@media (prefers-color-scheme: dark) {
  body { background:#121214; color:#e8e8ee; }
  .site-header { background:rgba(24,24,28,.9); border-color:#2a2a32; }
  .about, .events { background:#18181c; }
  .programs, .faq, .apply-cta { background:#202026; }
  .program-card { background:#26262d; }
  .accordion-item { background:#26262d; border-color:#333; }
  .events-table th { background:#2a2a32; }
  .events-table td, .events-table th { border-color:#2f2f37; }
  .btn.outline { background:transparent; }
  .placeholder-img { background:#333; color:#bbb; }
  .modal-dialog { background:#1f1f24; }
  .ratio-box { background:#000; }
  .foot-meta, .foot-legal a { color:#808096; }
  .foot-legal a:hover { color:#fff; }
}

/* MT Program Specific */
/* Unified MT & EMT hero styles */
.mt-hero, .emt-hero { position:relative; min-height:760px; background:#000 url("../assets/img/Vessel_HK4.jpg") center/cover no-repeat; display:flex; align-items:center; }
.mt-hero::before, .emt-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.35)); }
.mt-hero-inner, .emt-hero-inner { position:relative; padding:3.5rem 2.5rem 4rem; max-width:760px; width:100%; margin-left:18%; color:#fff; }
.mt-hero-logo, .emt-hero-logo { font-size:2.2rem; font-weight:700; letter-spacing:1px; color:#ff4d4d; margin:0 0 2rem; }
/* Hero logos unified (Home / MT / EMT) */
.emt-hero, .mt-hero { position:relative; }
.emt-hero-logo-img, .mt-hero-logo-img, .home-hero-logo-img {
  position:absolute;
  top:1.6rem;
  left:calc(18% + 2.5rem);
  width:125px;
  height:auto;
  display:block;
  margin:0;
  z-index:2;
}
/* Unify home hero logo responsive positioning with MT/EMT */
@media (max-width:1100px){ .emt-hero-logo-img, .mt-hero-logo-img, .home-hero-logo-img { left:8%; } }
@media (max-width:860px){ .emt-hero-logo-img, .mt-hero-logo-img, .home-hero-logo-img { width:125px; top:1.3rem; left:6%; } }
@media (max-width:640px){ .emt-hero-logo-img, .mt-hero-logo-img, .home-hero-logo-img { width:125px; top:1.15rem; left:1.4rem; } }
@media (max-width:480px){ .emt-hero-logo-img, .mt-hero-logo-img, .home-hero-logo-img { width:115px; top:1rem; left:1.2rem; } }
.mt-hero-pre, .emt-hero-pre { margin:0 0 1.6rem; font-weight:600; letter-spacing:.8px; font-size:1.55rem; }
/* Larger, responsive hero heading unified */
.mt-hero-heading, .emt-hero-heading { margin:0 0 2.4rem; font-size:clamp(3.2rem,6vw + .4rem,5.8rem); line-height:1.06; font-weight:300; letter-spacing:.6px; }
/* EMT specific requested fixed font size override */
.emt-hero-heading { font-size:3.6rem; }
@media (min-width:1600px){ .mt-hero-heading, .emt-hero-heading { font-size:3.6rem; } }
@media (max-width:1100px){ .mt-hero-heading, .emt-hero-heading { font-size:clamp(2.8rem,6.2vw,4.8rem); } .mt-hero-pre, .emt-hero-pre { font-size:1.3rem; } }
@media (max-width:860px){ .mt-hero-heading, .emt-hero-heading { font-size:clamp(2.4rem,7vw,4rem); } .mt-hero-pre, .emt-hero-pre { font-size:1.15rem; margin-bottom:1.2rem; } }
@media (max-width:640px){ .mt-hero-heading, .emt-hero-heading { font-size:2.2rem; } .mt-hero-pre, .emt-hero-pre { font-size:1rem; } }
/* Unified apply button style (hero + selection process) */
.mt-apply-btn,
.emt-apply-btn,
.sp-apply-btn { 
  font-size:1.15rem; 
  padding:1rem 3.8rem .95rem; /* wider horizontal padding */
  min-width:260px; /* enforce base width */
  text-align:center; 
  border-radius:12px; 
  font-weight:600; 
  letter-spacing:.5px; 
  background:#d42e41; 
  color:#fff; 
  box-shadow:none; 
  transition:.25s ease; 
  display:inline-block;
}
.mt-apply-btn:hover,
.emt-apply-btn:hover,
.sp-apply-btn:hover { 
  background:#c02637; 
  text-decoration:none; 
}
.mt-apply-btn:active,
.emt-apply-btn:active,
.sp-apply-btn:active { 
  background:#aa1f2f; 
}
@media (max-width:640px){ 
  .mt-apply-btn, .emt-apply-btn, .sp-apply-btn { font-size:1.02rem; padding:.9rem 2.6rem .85rem; min-width:0; }
}
@media (max-width:1100px){ .mt-hero-inner, .emt-hero-inner { margin-left:8%; } }
@media (max-width:860px){ .mt-hero-heading, .emt-hero-heading { font-size:3.2rem; } .mt-hero-inner, .emt-hero-inner { margin-left:6%; padding:5rem 2rem 3.2rem; } }
@media (max-width:640px){ .mt-hero-heading, .emt-hero-heading { font-size:2.5rem; } .mt-hero-logo, .emt-hero-logo { font-size:1.9rem; margin-bottom:1.4rem; } }
@media (max-width:480px){ .mt-hero, .emt-hero { min-height:460px; } .mt-hero-heading, .emt-hero-heading { font-size:2.05rem; } .mt-hero-inner, .emt-hero-inner { margin-left:0; padding:4.5rem 1.35rem 2.8rem; } }
/* EMT Intro Section */
.emt-intro { position:relative; background:#fff; display:flex; flex-direction:column; overflow:visible; }
/* Shifted further right (+2rem more) */
.emt-intro-inner { padding:6.5rem 4rem 0 28rem; position:relative; }
.emt-intro-heading { margin:0 0 1.8rem; font-size:3rem; font-weight:400; letter-spacing:.5px; line-height:1.08; color:rgb(181, 0, 42); }
.emt-intro-heading { position:relative; }
.emt-intro-heading::after { content:""; display:block; width:100%; height:4px; background:#876a53; margin:1.4rem 0 1.8rem; border-radius:2px; }
.emt-intro-text { margin:0; font-size:1.3rem; line-height:1.55; letter-spacing:.2px; max-width:960px; }
.emt-intro-visual { width:100%; height:310px; background:url('../assets/img/people.jpg') center 52%/cover no-repeat; margin-top:2.6rem; }
@media (min-width:1400px){ .emt-intro-visual { height:330px; } }
@media (max-width:1100px){ .emt-intro-inner { padding:5.5rem 3rem 0; } .emt-intro-visual { height:260px; margin-top:2.2rem; background-position:center 55%; } }
@media (max-width:780px){ .emt-intro-heading { font-size:2.8rem; } .emt-intro-inner { padding:4.8rem 2rem 2.4rem; } }
@media (max-width:560px){ .emt-intro-heading { font-size:2.3rem; } .emt-intro-text { font-size:.95rem; } }
@media (max-width:420px){ .emt-intro-inner { padding:4rem 1.4rem 2.2rem; } .emt-intro-heading { font-size:2rem; } }

/* Program Structure */
.program-structure { background:#fff; padding:2rem 0 4.5rem; }
.ps-inner { max-width:1400px; margin:0 auto; padding:0 2.5rem; }
.ps-heading { font-size:2.6rem; font-weight:400; color:#876a53; margin: 3.5rem; letter-spacing:.5px; }
.ps-pillar { text-align:center; position:relative; padding:0 1rem 1.5rem; }
.ps-pillar-top { min-height:64px; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:.35rem; }
.ps-icon { font-size:1.15rem; }
.ps-meta { font-size:.85rem; margin:0; font-weight:500; letter-spacing:.3px; }
.ps-ship { width:130px; height:auto; display:block; margin:.7rem auto 1.2rem; }
.ps-ship::after { content:none; }
.ps-pillar-title { margin:.2rem 0 1rem; font-size:1.25rem; letter-spacing:1px; font-weight:700; }
.ps-list { list-style:disc; margin:.25rem 0 0 1.2rem; padding:0; font-size:.92rem; line-height:1.55; text-align:left; }
.ps-wave { position:relative; width:100%; max-width:1200px; margin:2.2rem auto 2.6rem; pointer-events:none; z-index:1; overflow:hidden; }
.ps-wave img { width:140%; max-width:none; height:auto; display:block; filter:brightness(.92); /* Adjust horizontal shift: negative = move graphic left (shows later section), positive = move right (shows earlier section) */ transform:translateX(-4%); }
/* If the airplane is an element inside the SVG with id or class containing 'plane', hide it */
.ps-wave svg [id*="plane"], .ps-wave svg [class*="plane"] { display:none !important; }
.ps-banner { position:relative; background:#b81e24; color:#fff; margin:3.5rem auto 2.5rem; text-align:center; padding:1.1rem 2rem; font-size:1.05rem; font-weight:500; max-width:820px; border-radius:0; clip-path:polygon(0 0, calc(100% - 70px) 0, 100% 50%, calc(100% - 70px) 100%, 0 100%); }
.ps-banner p { margin:0; }
.ps-banner strong { font-weight:700; }
.ps-benefits { display:flex; flex-wrap:wrap; gap:1.4rem 1.6rem; justify-content:center; max-width:1400px; margin:0 auto; }
.ps-benefit { background:#b81e24; color:#fff; padding:1.1rem 2.4rem 1.05rem; border-radius:60px; font-size:.9rem; font-weight:500; letter-spacing:.3px; position:relative; box-shadow:0 8px 18px -8px rgba(184,30,36,.55); }
.ps-benefit:hover { filter:brightness(.95); }
/* === EMT simplified program structure variant === */
.emt-program-structure.simple { background:#fdfbfb; padding:3rem 0 4.5rem; }
.emt-program-structure.simple .emt-ps-heading { font-size:3.2rem; font-weight:400; color:#876a53; text-align:left; margin:0 0 2.6rem; letter-spacing:.5px; padding:0 2.5rem; }
.emt-program-structure.simple .emt-ps-grid { max-width:1280px; margin:0 auto 2.8rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:2.4rem 3.2rem; padding:0 2.5rem; }
.emt-program-structure.simple .emt-ps-card { background:rgb(245, 245, 245); border-radius:46px; padding:1.6rem 2.2rem; display:flex; align-items:center; gap:1.4rem; box-shadow:0 8px 22px -10px rgba(0,0,0,.12),0 4px 10px -4px rgba(0,0,0,.08); position:relative; width:410px; height:141px; box-sizing:border-box; }
.emt-program-structure.simple .emt-ps-card:hover { box-shadow:0 12px 28px -10px rgba(0,0,0,.18),0 6px 16px -6px rgba(0,0,0,.1); transform:translateY(-4px); transition:.45s cubic-bezier(.4,.7,.2,1); }
.emt-program-structure.simple .emt-ps-card:not(:hover) { transition:.45s cubic-bezier(.4,.7,.2,1); }
.emt-program-structure.simple .ps-card-icon { width:84px; height:84px; flex:0 0 auto; background:rgb(245, 245, 245); border-radius:26px; display:flex; align-items:center; justify-content:center; font-size:2.1rem; color:#b81e24; box-shadow:0 4px 10px -4px rgba(0,0,0,.15); }
.emt-program-structure.simple .ps-card-icon.img { background:rgb(245, 245, 245); background-size:cover; background-position:center; background-repeat:no-repeat; font-size:0; border-radius:0; }
/* Remove shadow for image variant */
.emt-program-structure.simple .ps-card-icon.img { box-shadow:none; }
.emt-program-structure.simple .ps-card-title { margin:0; font-size:1.25rem; line-height:1.35; font-weight:500; letter-spacing:.4px; color:#373737; text-align:center; }
.emt-program-structure.simple .ps-card-body { flex:1 1 auto; display:flex; align-items:center; justify-content:center; text-align:center; }
.emt-program-structure.simple .emt-ps-bannerline { text-align:center; font-size:1.5rem; margin:0 auto 2.2rem; font-weight:500; letter-spacing:.4px; color:#222; max-width:900px; }
.emt-program-structure.simple .emt-ps-bannerline strong { font-weight:700; }
.emt-program-structure.simple .emt-ps-pill-row {
  display:flex;
  flex-wrap:wrap;
  gap:1.4rem 1.8rem; /* row-gap col-gap */
  justify-content:center; /* center whole line when fewer items */
  max-width:1500px;
  margin:0 auto;
  padding:0 2.5rem;
}
/* Pill base width so 5 items fit in large screens (with gaps) */
.emt-program-structure.simple .emt-ps-pill-row .ps-pill { flex:0 0 230px; }
/* 3+2 stage: width between 1345px and 981px (can no longer fit 5 with padding+gaps, must show 3+2) */
@media (max-width:1345px) and (min-width:981px){
  .emt-program-structure.simple .emt-ps-pill-row {
    /* exact width of 3 pills + 2 gaps ensures first row has 3, second row auto centers 2 */
    width:calc((230px * 3) + (1.8rem * 2));
    padding:0; /* remove side padding so 3 can fit earlier */
  }
}
/* 2+1+2 stage: below 981px but above single-column threshold */
@media (max-width:980px) and (min-width:641px){
  /* Stable 2 + 1 + 2: container exactly two columns wide; third pill centered via left margin */
  .emt-program-structure.simple .emt-ps-pill-row {
    width:calc((230px * 2) + 1.8rem); /* two pill widths + one horizontal gap */
    padding:0;
    justify-content:flex-start; /* so pills occupy natural slots */
  }
  .emt-program-structure.simple .emt-ps-pill-row .ps-pill { flex:0 0 230px; margin:0; }
  /* Center the lone middle pill (3rd) inside two-column width */
  .emt-program-structure.simple .emt-ps-pill-row .ps-pill:nth-child(3){
    margin-left:calc(((230px * 2) + 1.8rem - 230px)/2); /* (container - pill)/2 */
  }
}
.emt-program-structure.simple .ps-pill { 
  width:230px; 
  height:70px; 
  background:#b81e24; 
  color:#fff; 
  border-radius:60px; 
  font-size:1rem; 
  font-weight:500; 
  letter-spacing:.35px; 
  box-shadow:0 8px 18px -8px rgba(184,30,36,.55); 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  text-align:center; 
  padding:0 1.1rem; 
  line-height:1.25; 
  overflow-wrap:break-word; 
  word-break:normal; 
}
.emt-program-structure.simple .ps-pill:hover { filter:brightness(.95); }
@media (max-width:1100px){ .emt-program-structure.simple .ps-pill { font-size:1rem; } }
/* Single column stage: <=640px show 1 per row (reset hacks) */
@media (max-width:640px){
  .emt-program-structure.simple .emt-ps-pill-row { gap:1.1rem 1.2rem; width:100%; padding:0 1.2rem; }
  .emt-program-structure.simple .emt-ps-pill-row .ps-pill { flex:0 0 100%; width:100%; max-width:100%; margin:0 !important; left:0; transform:none; }
}
@media (max-width:1100px){ .emt-program-structure.simple .emt-ps-heading { font-size:2.8rem; } }
@media (max-width:860px){ .emt-program-structure.simple .emt-ps-grid { gap:1.8rem 2rem; } .emt-program-structure.simple .emt-ps-heading { font-size:2.5rem; } }
@media (max-width:640px){ .emt-program-structure.simple .emt-ps-heading { font-size:2.1rem; padding:0 1.4rem; } .emt-program-structure.simple .emt-ps-grid { padding:0 1.4rem; } .emt-program-structure.simple .emt-ps-card { padding:1.8rem 1.9rem 2rem; border-radius:36px; }
  .emt-program-structure.simple .ps-card-icon { width:70px; height:70px; font-size:1.8rem; border-radius:20px; }
  .emt-program-structure.simple .ps-card-title { font-size:1.1rem; }
  .emt-program-structure.simple .emt-ps-bannerline { font-size:1.3rem; padding:0 1.4rem; }
  .emt-program-structure.simple .emt-ps-pill-row { padding:0 1.4rem; }
  .emt-program-structure.simple .ps-pill { height:70px; font-size:1rem; }
}
/* === EMT Program Structure adjustments: fixed 2x2 grid & left-shift heading === */
.emt-program-structure.simple .emt-ps-grid { grid-template-columns:repeat(2,410px); justify-content:center; }
@media (max-width:1040px){ .emt-program-structure.simple .emt-ps-grid { grid-template-columns:repeat(2,410px); } }
@media (max-width:860px){ .emt-program-structure.simple .emt-ps-grid { grid-template-columns:repeat(2, minmax(300px,1fr)); } .emt-program-structure.simple .emt-ps-card { width:100%; } }
@media (max-width:760px){ .emt-program-structure.simple .emt-ps-grid { grid-template-columns:1fr; } .emt-program-structure.simple .emt-ps-card { width:100%; height:auto; } }
.emt-program-structure.simple .emt-ps-heading { margin-left:22%; }
@media (max-width:1300px){ .emt-program-structure.simple .emt-ps-heading { margin-left:17%; } }
@media (max-width:1040px){ .emt-program-structure.simple .emt-ps-grid { grid-template-columns:repeat(2,minmax(300px,1fr)); } }
@media (max-width:820px){ .emt-program-structure.simple .emt-ps-heading { margin-left:0; } }
@media (max-width:760px){ .emt-program-structure.simple .emt-ps-grid { grid-template-columns:1fr; } }
/* === Program Structure Mosaic (Optimized Flex Version) === */
/* Variables centralizing legacy magic numbers */
.program-structure.mosaic {padding:4rem 0 4rem;}
.program-structure.mosaic .ps-mosaic {max-width:1500px;margin:0 auto;padding:0 2.5rem;}
.program-structure.mosaic .ps-mosaic-grid { 
  --ps-gap:16px; 
  --ps-gap-m:16px; 
  --ps-gap-s:12px; 
  --ps-heading-w:316px; 
  --ps-trade-w:316px; 
  --ps-benefits-w:480px; 
  --ps-regions-w:180px; 
  --ps-banner-w:380px; 
  --ps-logistics-w:380px; 
  --ps-ops-w:356px; 
  --ps-min-h-row:220px; 
  display:flex; flex-wrap:wrap; gap:var(--ps-gap); max-width:1168px; margin:0 auto; align-items:stretch;
}
/* Prevent unintended flex shrinking on wide screens */
.program-structure.mosaic .ps-mosaic-grid > .ps-tile {flex-grow:0;}
@media (min-width:1400px){
  /* Center the whole block visually under very wide viewports */
  .program-structure.mosaic .ps-mosaic-grid {margin-left:auto;margin-right:auto;}
}
/* Base flex items (desktop original layout) */
.program-structure.mosaic .ps-tile {flex:0 0 auto; display:flex;}
.program-structure.mosaic .ps-tile.heading {flex-basis:var(--ps-heading-w); min-height:var(--ps-min-h-row);}
.program-structure.mosaic .ps-tile.image.trade {flex-basis:var(--ps-trade-w); min-height:var(--ps-min-h-row);}
.program-structure.mosaic .ps-tile.benefits {flex-basis:var(--ps-benefits-w); min-height:var(--ps-min-h-row); align-items:center;}
/* Desktop (>=1260px) we now use absolute positioning again via .mosaic-abs; below that pure flex still applies with these bases. */
.program-structure.mosaic .ps-tile.image.regions {flex-basis:var(--ps-regions-w); min-height:calc(var(--ps-min-h-row) + 142px);} 
.program-structure.mosaic .ps-tile.banner {flex-basis:var(--ps-banner-w); min-height:154px;}
.program-structure.mosaic .ps-tile.image.logistics {flex-basis:var(--ps-logistics-w); min-height:192px;} /* keep taller height */
.program-structure.mosaic .ps-tile.image.operations {flex-basis:var(--ps-ops-w); min-height:calc(var(--ps-min-h-row) + 142px);} 
.program-structure.mosaic .ps-tile.blank {display:none;} /* hidden in flex mode */
/* Stacking logic (maintain legacy second-row grouping order) */
.program-structure.mosaic .ps-tile.image.regions {order:10;}
.program-structure.mosaic .ps-tile.banner {order:11;}
.program-structure.mosaic .ps-tile.image.logistics {order:12;}
.program-structure.mosaic .ps-tile.image.operations {order:13;}

/* Absolute desktop layout (single definitive 16px gap version) */
@media (min-width:1260px){
  .program-structure.mosaic.mosaic-abs .ps-mosaic-grid {position:relative; min-height:610px; max-width:none; width:1144px;}
  .program-structure.mosaic.mosaic-abs .ps-mosaic {display:flex; justify-content:center;}
  .program-structure.mosaic.mosaic-abs .ps-mosaic-grid .ps-tile {position:absolute; margin:0; flex:none;}
  /* Row 1 */
  .program-structure.mosaic.mosaic-abs .ps-tile.heading {left:0; top:0; width:316px; height:220px;}
  .program-structure.mosaic.mosaic-abs .ps-tile.image.trade {left:332px; top:0; width:316px; height:220px;}
  .program-structure.mosaic.mosaic-abs .ps-tile.benefits {left:664px; top:0; width:480px; height:220px; display:flex; align-items:center;}
  /* Row 2 */
  .program-structure.mosaic.mosaic-abs .ps-tile.image.regions {left:0; top:236px; width:180px; height:362px;}
  .program-structure.mosaic.mosaic-abs .ps-tile.banner {left:196px; top:236px; width:380px; height:154px;}
  .program-structure.mosaic.mosaic-abs .ps-tile.image.logistics {left:196px; top:406px; width:380px; height:192px;}
  .program-structure.mosaic.mosaic-abs .ps-tile.image.operations {left:592px; top:236px; width:356px; height:362px;}
  /* Increase Operations→Blank gap to 48px (was 32px). Shift right +16px and reduce width 16px to maintain total span. */
  .program-structure.mosaic.mosaic-abs .ps-tile.blank {left:965px; top:236px; width:180px; height:362px; background:#f4f2f2; display:block;}
}
@media (max-width:480px){
  .program-structure.mosaic .ps-tile.image .tile-label {font-size:1.55rem;}
}
/* End optimized mosaic */

/* Tile base */
.ps-tile {position:relative;background:#f4f2f2;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ps-tile.heading {background:#f4f2f2;grid-column:1 / span 1;grid-row:1 / span 1;}
.ps-mosaic-heading {margin:0;font-size:3.2rem;line-height:1.05;font-weight:400;color:#876a53;letter-spacing:.5px;}
@media (max-width:900px){.ps-mosaic-heading {font-size:2.6rem;} }
@media (max-width:640px){.ps-mosaic-heading {font-size:2.2rem;} }

/* Benefits tile */
.ps-tile.benefits {background:rgb(190, 26, 52);color:#fff;grid-column:3 / span 3;grid-row:1 / span 1;display:flex;justify-content:flex-start;align-items:center;padding:0 1.8rem;max-width:480px;width:480px;}
.benefit-list {margin:0;padding:0 0 0 1.2rem;list-style:disc;display:flex;flex-direction:column;gap:.6rem;font-size:1.4rem;line-height:1;font-weight:500;}
.benefit-list li {margin:0;}
@media (max-width:1200px){.ps-tile.benefits {grid-column:span 4;} }
@media (max-width:900px){.ps-tile.benefits {grid-column:span 4;grid-row:span 2;} .benefit-list {font-size:.95rem;} }
@media (max-width:640px){
  .ps-tile.benefits {grid-column:span 2; width:100%; max-width:100%; }
  .benefit-list {font-size:.9rem;}
}

/* Images */
.ps-tile.image {cursor:default;flex-direction:column;justify-content:flex-end;align-items:flex-start;}
.ps-tile.image .tile-img {position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.85);transition:.6s;}
.ps-tile.image .tile-label {position:relative;z-index:2;color:#fff;font-size:2.2rem;font-weight:400;letter-spacing:.5px;padding:0 1.2rem 1.1rem;text-align:right;margin-left:auto;}
.ps-tile.image.trade {grid-column:2 / span 1;grid-row:1 / span 1;}
.ps-tile.image.regions {grid-column:1 / span 1;grid-row:2 / span 2;width:180px;max-width:180px;justify-self:start;}
  .ps-tile.image.logistics {grid-column:2 / span 2;grid-row:3 / span 1;/* removed negative margin for flex version */margin-left:0;width:380px;max-width:380px;}
  .ps-tile.image.operations {grid-column:4 / span 1;grid-row:2 / span 2;/* removed negative margin for flex version */margin-left:0;width:356px;max-width:356px;}
.ps-tile.image:hover .tile-img {transform:scale(1.06);filter:brightness(.95);} 
@media (max-width:900px){
  .ps-tile.image {grid-column:span 2;grid-row:span 2;}
  .ps-tile.image .tile-label {font-size:1.9rem;}
}
@media (max-width:640px){
  .ps-tile.image {grid-row:span 2;}
  .ps-tile.image .tile-label {font-size:1.6rem;}
}

/* Banner */
.ps-tile.banner {font-size: 1.5rem;  background:#876a53;color:#fff;display:flex;align-items:center;justify-content:center;grid-column:2 / span 2;grid-row:2 / span 1;padding:0 1.2rem;text-align:left;line-height:1.4;font-weight:400;margin-left:0;width:380px;max-width:380px;}
.ps-tile.banner .em {font-weight:600;}
@media (max-width:1200px){.ps-tile.banner {grid-column:span 2;} }
@media (max-width:900px){.ps-tile.banner {grid-column:span 4;grid-row:span 2;font-size:1rem;} }
@media (max-width:640px){.ps-tile.banner {grid-column:span 2;grid-row:span 2;font-size:.95rem;} }

/* Blank spacer tile only when absolute mosaic variant is active */
.program-structure.mosaic.mosaic-abs .ps-tile.blank {background:#efe9e9;grid-column:5 / span 1;grid-row:2 / span 2;/* removed legacy negative margin */}


@media (max-width:1200px){  .ps-wave { display:none; } }
@media (max-width:760px){ .ps-heading { font-size:2.2rem; margin-bottom:2.8rem; } .ps-pillar-title { font-size:1.15rem; } }
@media (max-width:620px){  .ps-ship { width:90px; height:auto; margin:.5rem auto 1rem; } .ps-banner { font-size:.95rem; padding:.95rem 1.4rem; clip-path:polygon(0 0, calc(100% - 46px) 0, 100% 50%, calc(100% - 46px) 100%, 0 100%); } .ps-benefit { padding:.9rem 1.6rem .85rem; font-size:.82rem; } }
@media (max-width:480px){  .ps-heading { font-size:1.9rem; } }

/* Career Path */
.career-path { background:#fff; padding:5rem 0 5.5rem; min-height:768px; /* 改为最小高度，允许内容（含箭头行）在窄屏自动增高，避免溢出 */ }
/* 当内容在更窄屏幕换行时允许自由增长高度 */
@media (max-width:1100px){ .career-path { min-height:0; } }
/* 如果仍出现箭头跌出，可再根据需要增加底部内边距：
  .career-path { padding-bottom:6.5rem; } */
.cp-inner { max-width:1600px; margin:0 auto; padding:0 3rem; }
.cp-heading { text-align:center; font-size:3.5rem; font-weight:400; color:#876a53; margin:0 0 8rem; letter-spacing:.5px; }
/* Centered heading variant when heading is direct child of section */
.career-path > .cp-heading {width:100%; text-align:center;}
.cp-grid { display:grid; grid-template-columns:520px 1fr; gap:4rem; align-items:start; }
.cp-left { font-size:.95rem; line-height:1.6; }
.cp-label { font-size:1.5rem; letter-spacing:.5px; font-weight:700; color:#c43447; margin:0 0 1.3rem; }
.cp-text { font-size: 1.25rem; margin:0; max-width:460px; }
.cp-right { position:relative; display:flex; gap:3.5rem; }
.cp-steps { position:relative; display:grid; grid-template-columns:repeat(7,1fr); align-items:end; gap:.35rem; flex:1; padding:0 0 2.8rem; }
.cp-step { position:relative; background:repeating-linear-gradient( 90deg, #b82028 0 6px, #a31921 6px 12px ); color:#fff; font-size:.62rem; font-weight:600; letter-spacing:.3px; padding:.5rem .35rem .55rem; line-height:1.15; text-align:center; display:flex; align-items:flex-end; justify-content:center; min-height:70px; box-shadow:0 6px 12px -6px rgba(184,32,40,.55); }
.cp-step:nth-child(1){ min-height:60px; }
.cp-step:nth-child(2){ min-height:90px; }
.cp-step:nth-child(3){ min-height:120px; }
.cp-step:nth-child(4){ min-height:150px; }
.cp-step:nth-child(5){ min-height:180px; }
.cp-step:nth-child(6){ min-height:210px; }
.cp-step:nth-child(7){ min-height:240px; }
.cp-step::after { content:attr(data-rank); position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:flex-start; justify-content:center; padding:.45rem .25rem 0; font-size:.55rem; line-height:1.05; text-transform:none; pointer-events:none; }
.cp-logo { position:absolute; right:12px; bottom:6px; font-size:1.9rem; font-weight:700; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.35); }
.cp-arrow { position:relative; width:300px; }
.cp-arrow-body { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.cp-arrow-mid { margin-top:0; background:#cfd3d8; padding:7.5rem 2rem 4rem; width:220px; clip-path:polygon(50% 0,100% 25%,100% 100%,0 100%,0 25%); font-size:.85rem; font-weight:600; line-height:1.25; color:#541a1a; text-align:center; display:flex; align-items:flex-start; justify-content:flex-start; }
.cp-arrow-base { margin-top:-3.2rem; background:#e2e6ea; padding:4.5rem 1.2rem 2rem; width:150px; clip-path:polygon(50% 0,100% 30%,100% 100%,0 100%,0 30%); font-size:.62rem; line-height:1.2; font-weight:600; color:#541a1a; text-align:center; display:flex; align-items:flex-start; justify-content:flex-start; }
.cp-step, .cp-arrow-mid, .cp-arrow-base { transition:transform .9s cubic-bezier(.4,.7,.2,1), opacity .9s; opacity:0; transform:translateY(26px); }
.career-path.inited .cp-step, .career-path.inited .cp-arrow-mid, .career-path.inited .cp-arrow-base { opacity:1; transform:translateY(0); }

/* Career Path new layout */
.cp-flex { display:flex; gap:0; align-items:flex-start; flex-wrap:wrap; max-width:1400px; margin:0 auto; }
.cp-left { flex:1 1 300px; }
.cp-left { margin-left:6rem; }
/* 已移除 1000px 下 career path 文本居中规则，应由 900px 断点及以下接管 */
@media (max-width: 1000px){ .cp-left { margin-left:0; } }
/* 900px 补充：继承 1000px 下的居中与纵向排列效果（需放在 900px 原始 margin-left 覆盖之后） */
@media (max-width:1000px){
  .cp-flex { flex-direction:column; align-items:center; }
  .cp-left { margin:0 auto 2rem; text-align:center; max-width:680px; }
  .cp-right-new { width:100%; margin-left:0; }
}
.cp-label.primary { color:var(--brand); font-weight:600; }
.cp-text { margin-top:1rem; line-height:1.6; }
.cp-right-new { flex:1 1 500px; display:flex; flex-direction:column; align-items:center; margin-left:-2rem; }
@media (max-width:1100px){ .cp-right-new { margin-left:0; } }
.ship-row { display:flex; gap:4.5rem; justify-content:center; margin:0 0 0; padding:0; }
/* New textual tier labels */
.ship-row .ship-item { font-size:1.25rem; font-weight:500; letter-spacing:.5px; color:#111; font-family:'Inter',system-ui,Arial,sans-serif; position:relative; }
/* RWD: 中屏 / 小屏逐级缩小 (MT 页面) */
@media (max-width:1200px){ .mt-page .ship-row .ship-item { font-size:1.15rem; } }
/* 移除 1000px 下 ship-row 字体放大；保持 1200px 规则，下面 900px/820px 继续生效 */
/* 820px 以下已有更细 clamp 规则，再往下将继续被后续小屏规则覆盖 */

/* === 进一步：随屏宽缩小 ship 标签之间的水平间距与字间距 === */
@media (max-width:1200px){
  /* 调整：1200px 阶段字距从 .2px 改为 .4px，避免过窄造成“拥挤”视觉 */
  /* 间距放大：1.8rem -> 2.1rem */
  .mt-page .ship-row { gap:3.1rem; }
  .mt-page .ship-row .ship-item { letter-spacing:.8px; }
}
/* 移除 1000px 下 gap 调整 */
/* 900px 以下：按需求稍微加大标签间距（相比 1000px 的 2.2rem 增至 2.6rem） */
@media (max-width:1000px){
  .mt-page .ship-row { gap:5.6rem; }
}
/* 1000px ~ 821px 区间：将 MT 页面 ship-item 间距放大 5 倍 */
@media (max-width:1000px) and (min-width:821px){
  .mt-page .ship-row { gap:6rem !important; }
}
/* 820 以下等分布局，继续按一半缩减字距 */
@media (max-width:820px){ .mt-page .ship-row .ship-item { letter-spacing:.15px; font-size:1.5rem; } }
@media (max-width:640px){ .mt-page .ship-row .ship-item { letter-spacing:.125px; } }
@media (max-width:460px){ .mt-page .ship-row .ship-item { letter-spacing:.1px; } }
/* Ship figures (added) */
/* Responsive single-row scaling: ships always stay in one horizontal line (no wrap) and scale down proportionally */
.ship-figures { 
  position:relative; width:100%; max-width:1200px; margin:0 auto .6rem; 
  display:flex; justify-content:center; align-items:flex-end; gap:0; flex-wrap:nowrap; overflow:hidden;
  /* Base dimensions (px) – slightly enlarged per request */
  --ship-1:360; --ship-2:320; --ship-3:240; --ship-4:170;
  /* Base overlaps (negative values) – widened again (less negative) */
  --ship-gap-2:-170; --ship-gap-3:-135; --ship-gap-4:-90;
  /* Scale factor adjusted via media queries */
  --ship-scale:1;
}
.ship-fig { display:block; height:auto; object-fit:contain; position:relative; pointer-events:none; flex:0 0 auto; }
/* Apply scaling using variables; keep last ship flipped */
.ship-fig.ship-1 { width:calc(var(--ship-1) * var(--ship-scale) * 1px); z-index:1; }
.ship-fig.ship-2 { width:calc(var(--ship-2) * var(--ship-scale) * 1px); margin-left:calc(var(--ship-gap-2) * var(--ship-scale) * 1px); z-index:2; }
.ship-fig.ship-3 { width:calc(var(--ship-3) * var(--ship-scale) * 1px); margin-left:calc(var(--ship-gap-3) * var(--ship-scale) * 1px); z-index:3; }
.ship-fig.ship-4 { width:calc(var(--ship-4) * var(--ship-scale) * 1px); margin-left:calc(var(--ship-gap-4) * var(--ship-scale) * 1px); transform:scaleX(-1); z-index:4; }
/* === 调整: 让 第三艘船 更靠近第二艘船（加大左移重叠）=== */
/* Extra pull for ship 3 (softened further to match new wider baseline) */
.ship-fig.ship-3 { margin-left:calc(-160 * var(--ship-scale) * 1px); }
/* Adjust scale + overlap reductions at breakpoints to fit safely within viewport */
@media (max-width:1300px){ .ship-figures { --ship-scale:.92; } }
@media (max-width:1180px){ .ship-figures { --ship-scale:.86; } }
@media (max-width:1100px){ .ship-figures { --ship-scale:.8; } }
/* 移除 1000px 下 ship-figures scale 变更，保持 1100->.8 之后过渡到 900px (仍有 900px 规则) */
@media (max-width:1000px){ .ship-figures { --ship-scale:1.02; } }
/* 820 以下整体再放大 0.5 倍 (×1.5)，保持逐级递减 */
@media (max-width:820px){ .ship-figures { --ship-scale:1.02; } }
@media (max-width:760px){ .ship-figures { --ship-scale:.93; } }
@media (max-width:700px){ .ship-figures { --ship-scale:.87; } }
@media (max-width:640px){ .ship-figures { --ship-scale:.81; } }
@media (max-width:600px){ .ship-figures { --ship-scale:.75; } }
@media (max-width:560px){ .ship-figures { --ship-scale:.69; } }
@media (max-width:520px){ .ship-figures { --ship-scale:.63; } }
@media (max-width:480px){ .ship-figures { --ship-scale:.585; } }
@media (max-width:440px){ .ship-figures { --ship-scale:.555; } }
@media (max-width:410px){ .ship-figures { --ship-scale:.525; } }
@media (max-width:380px){ .ship-figures { --ship-scale:.495; } }
/* If horizontal overflow still occurs on very narrow devices, slightly reduce overlaps */
/* 移除小屏单独 gap 缩减，保持与大屏一致的重叠间距 */
/* (原先 560px / 440px 下修改 --ship-gap-* 已删除) */
/* Optional baseline alignment tweak */
.cp-right-new { align-items:center; }
.arrow-row { margin-top: 10px; display:flex; gap:0; justify-content:center; align-items:center; margin-top:1.5rem; width:100%; max-width:1100px; }
/* === EMT 固定箭头间距：在所有尺寸下保持与桌面一致的均匀间距 === */
.emt-arrow-row.arrow-row { 
  gap:.04rem !important;            /* 再对半：0.08 -> 0.04 (极限紧凑) */
  margin-top:1.5rem !important; 
}
@media (max-width:760px){ .emt-arrow-row.arrow-row { gap:.03rem !important; } } /* 0.06 -> 0.03 */
@media (max-width:560px){ .emt-arrow-row.arrow-row { gap:.02rem !important; } }  /* 0.04 -> 0.02 */
.arrow { height: 100px; display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:600; }

/* 调整三个箭头长度比例，可按需要微调下面百分比 */
.arrow.primary {  text-align: center; /* Responsive font: desktop up to 1.28rem, down to .9rem on very small */
  font-size:clamp(.9rem, 0.55vw + .75rem, 1.28rem); height: 89px; background:#8a2b2e; color:#fff; flex:0 0 38%; max-width:38%; padding:1rem 2.5rem; clip-path: polygon(
    0% 50%,                 /* 左侧尖点 */
    15% 0%,                 /* 左上 */
    calc(100% - 5px) 0%,   /* notch 外上缘 */
    calc(100% - 40px) 50%,  /* notch 内尖端 */
    calc(100% - 5px) 100%, /* notch 外下缘 */
    15% 100%                /* 左下 */
  ); }

 .arrow.secondary { text-align: center; /* Slightly smaller responsive range */
  font-size:clamp(.85rem, 0.5vw + .68rem, 1.18rem); height: 89px; margin-left: -30px;background:#cfd3d8; color:#541a1a; flex:0 0 34%; max-width:34%; padding:1rem 2.2rem; clip-path: polygon(
  0% 50%,
  15% 0%,
  calc(100% - 5px) 0%,
  calc(100% - 40px) 50%,
  calc(100% - 5px) 100%,
  15% 100%
); }

 .arrow.tertiary {  height: 89px; margin-left: -25px;background:#f5efef; color:#541a1a; flex:0 0 17%; max-width:28%; padding:1rem 2rem; clip-path: polygon(
  0% 50%,
  26% 0%,
  calc(100% - 10px) 0%,
  calc(100% - 40px) 50%,
  calc(100% - 10px) 100%,
  26% 100%
); }
  /* 1000px 与 900px 下统一使用更窄左侧切口 17% 的形状 */
  /* 仅保留 900px 以下的 tertiary clip-path 形状；1000px 规则已移除 */
  @media (max-width:1000px){
    .mt-page .arrow.tertiary { clip-path:polygon(0% 50%,17% 0%,calc(100% - 5px) 0%,calc(100% - 40px) 50%,calc(100% - 5px) 100%,17% 100%); }
  }
.arrow.quaternary { background:transparent; color:#8a2b2e; flex:1; padding:0.6rem 1.5rem; clip-path:polygon(15% 0%, 100% 0%, 100% 100%, 15% 100%, 0% 50%); }
/* EMT page specific arrow color scheme (navy -> mid grey -> light blue) */
.emt-page .arrow.primary { background:#173679; color:#fff; }
.emt-page .arrow.secondary { background:#d2d2d2; color:#0f2a55; }
.emt-page .arrow.tertiary { background:#d9e3f1; color:#0f2a55; }
/* EMT career path text explicit size (inherits 1.25rem from .cp-text but kept for clarity) */
.emt-cp-text { font-size:1.25rem; }
@media (max-width:1250px){ .cp-grid { grid-template-columns:440px 1fr; } }
@media (max-width:1080px){ .cp-grid { grid-template-columns:1fr; } .cp-right { flex-direction:column; align-items:flex-start; } .cp-arrow { width:100%; height:260px; } .cp-arrow-body { position:relative; padding-top:2rem; } .cp-arrow-mid { margin:0 auto; } .cp-arrow-base { margin:-2.4rem auto 0; } }
@media (max-width:640px){ .cp-heading { font-size:2.2rem; } .cp-inner { padding:0 1.6rem; } .cp-steps { grid-template-columns:repeat(7,minmax(42px,1fr)); } .cp-step { min-height:60px !important; } .cp-step:nth-child(n){ min-height:0; } }
@media (max-width:480px){ .cp-heading { font-size:1.9rem; } .cp-label { font-size:1.25rem; } .cp-text { font-size:1.25rem; } .cp-step { font-size:.5rem; } .cp-step::after { font-size:.5rem; } }
/* ≤480px: 加宽三个箭头的可视宽度（增大 flex-basis 与水平内边距，减小重叠负 margin） */
@media (max-width:480px){
  .arrow.primary { flex-basis:46%; max-width:46%; padding:1rem 2.9rem; }
  .arrow.secondary { flex-basis:34%; max-width:34%; margin-left:-16px; padding:1rem 2.6rem; }
  .arrow.tertiary { flex-basis:22%; max-width:22%; margin-left:-18px; padding:1rem 2.5rem; }
  /* 若总行宽溢出，可进一步把 primary/secondary/tertiary 调整为 47% / 34% / 23% 或移除部分 padding */
  /* 480px 及以下：更新 tertiary 箭头 clip-path 左侧切口为 29% */
  .arrow.tertiary { clip-path:polygon(0% 50%, 29% 0%, calc(100% - 5px) 0%, calc(100% - 40px) 50%, calc(100% - 5px) 100%, 29% 100%); }
}

/* RWD: ship-row wrap into two centered lines (Champion Driver / Achiever Contributor) */
@media (max-width: 820px){
  /* 两行布局：第1/2 + 第3/4 */
  .ship-row { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 2.4rem; justify-items:center; }
  .ship-row .ship-item { text-align:center; width:100%; }
}
@media (max-width: 560px){
  .ship-row { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem 1.2rem; }
  .ship-row .ship-item { font-size:1.05rem; }
}

/* === Override: 始终保持 ship-row 横向单行，不再换行/分两行 === */
@media (max-width:820px){
  .ship-row { display:flex !important; flex-wrap:nowrap !important; justify-content:center; gap:2.2rem !important; }
  .ship-row .ship-item { width:auto !important; text-align:center; font-size:clamp(.85rem,1.9vw,1.05rem); white-space:nowrap; }
}
@media (max-width:640px){
  .ship-row { gap:1.6rem !important; }
  .ship-row .ship-item { font-size:clamp(.78rem,2.2vw,.95rem); }
}
@media (max-width:520px){
  .ship-row { gap:1.05rem !important; }
  .ship-row .ship-item { font-size:clamp(.7rem,2.6vw,.9rem); }
}
@media (max-width:460px){
  .ship-row { gap:.75rem !important; }
  .ship-row .ship-item { font-size:clamp(.66rem,2.9vw,.82rem); letter-spacing:.3px; }
}
@media (max-width:1000px){
  .ship-row { gap:.55rem !important; }
  .ship-row .ship-item { font-size:clamp(.6rem,3.1vw,.78rem); }
}
/* === MT 页面 RWD: 小屏下缩小 ship-row 字体并让每个标签正下方对齐对应船只 === */
@media (max-width:820px){
  /* 仅保留标签行布局；船的重叠间距使用与大屏相同的变量计算 */
  .mt-page .ship-row { display:grid !important; grid-template-columns:repeat(4,1fr); gap:0 !important; padding:0; width:100%; }
  .mt-page .ship-row .ship-item { font-size:clamp(.75rem,2.2vw,.95rem); white-space:nowrap; }
}
@media (max-width:640px){
  .mt-page .ship-row { padding:0; }
  .mt-page .ship-row .ship-item { font-size:clamp(.7rem,3vw,.9rem); }
}
@media (max-width:460px){
  .mt-page .ship-row .ship-item { font-size:clamp(.65rem,3.4vw,.85rem); }
}
/* 如果极窄仍溢出，可启用缩放（按需解开注释）
.ship-row { transform:scale(.92); transform-origin:center; }
*/

/* Career Path: mobile layout place arrows at bottom centered */
@media (max-width: 820px){
  .cp-flex { flex-direction:column; align-items:center; }
  .cp-left { text-align:center; font-size:1.08rem; line-height:1.65; }
  .cp-right-new { order:2; width:100%; transform:translateY(-40px); }
  .ship-row { order:1; }
  .arrow-row { order:3; margin-top:1.8rem; justify-content:center; width:100%; }
  .arrow-row .arrow { flex:0 0 auto; }
  .arrow.primary, .arrow.secondary, .arrow.tertiary { flex:0 0 auto; max-width:none; }
  .arrow.primary { flex-basis:44%; }
  .arrow.secondary { flex-basis:36%; }
  .arrow.tertiary { flex-basis:20%; }
}
/* === MT 页面箭头宽度微调：缩窄 secondary，扩大 tertiary (桌面) === */
.mt-page .arrow.secondary { flex:0 0 30%; max-width:30%; margin-left:-24px; }
.mt-page .arrow.tertiary { flex:0 0 24%; max-width:24%; margin-left:-28px; }
/* === MT 页面：进一步缩小箭头之间的间距（加大重叠） === */
/* === 统一 MT 页面箭头之间的间距：secondary 与 tertiary 使用相同的重叠值，避免出现更宽/更窄的白色夹层 === */
.mt-page .arrow.secondary { margin-left:-30px; }
.mt-page .arrow.tertiary { margin-left:-30px; clip-path:polygon(0% 50%, 20% 0%, calc(100% - 5px) 0%, calc(100% - 40px) 50%, calc(100% - 5px) 100%, 20% 100%); }
/* 保持 primary 不变 (38%)，总和仍约 89% 与原布局留白一致 */
/* 小屏断点下的比例重新分配为 44% / 32% / 24% 占满 100% */
@media (max-width:820px){
  .mt-page .arrow.secondary { flex-basis:32% !important; }
  .mt-page .arrow.tertiary { flex-basis:24% !important; }
}
/* 移除 MT 页面箭头行上方的额外间距 */
.mt-page .arrow-row { margin-top:.5rem !important; }
@media (max-width:820px){ .mt-page .arrow-row { margin-top:.5rem !important; } }
/* Fine-tune vertical position around 750px breakpoint: lift ships + arrows more */
@media (max-width:750px){
  .cp-right-new { transform:translateY(-70px); }
  .ship-row { margin-top:.2rem; }
  .arrow-row { margin-top:1.2rem; }
}


/* Eligibility Criteria */
.eligibility { background:#faf8f8; padding:4.5rem 0 5rem; }
.elig-inner { max-width:1400px; margin:0 auto; padding:0 3rem; display:grid; grid-template-columns:560px 1fr; gap:5rem; align-items:center; justify-content:center; }
.elig-media { display:flex; flex-direction:column; gap:1.4rem; }
.elig-img { width:100%; aspect-ratio:16/9; overflow:hidden; background:#ddd; }
.elig-img img { width:100%; height:100%; object-fit:cover; display:block; }
.elig-heading { margin:0 0 2rem; font-size:2.5rem; font-weight:400; color:#876a53; letter-spacing:.5px; }
/* EMT page specific: adjust eligibility heading size */
#emt-elig-title { font-size:2.5rem; }
@media (max-width:640px){ #emt-elig-title { font-size:2.2rem; } }
@media (max-width:460px){ #emt-elig-title { font-size:1.9rem; } }
.elig-intro { margin:0 0 1.5rem; font-size:.98rem; line-height:1.55; }
.elig-intro strong { color:#c43447; font-size:1.5rem; letter-spacing:.4px; }
.elig-list { margin:0; padding:0 0 0 1.2rem; list-style:disc; line-height:1; font-size:1.25rem; font-weight:400; letter-spacing:.15px; display:flex; flex-direction:column; gap:.55rem; }
.elig-list li { margin:0; padding:0; }
.elig-list li::marker { font-size:.9rem; }

@media (max-width:1200px){ .elig-inner { grid-template-columns:480px 1fr; gap:3.5rem; } }
@media (max-width:980px){ .elig-inner { grid-template-columns:1fr; } .elig-media { flex-direction:row; } .elig-img { flex:1; aspect-ratio:4/3; } }
@media (max-width:640px){ .elig-inner { padding:0 1.6rem; gap:2.2rem; } .elig-media { flex-direction:column; } .elig-heading { font-size:2.2rem; } .elig-list { font-size:.95rem; line-height:1.45; gap:.5rem; } }
@media (max-width:460px){ .elig-heading { font-size:1.9rem; } .elig-intro { font-size:.9rem; } }

/* Limit width when eligibility text已显现 */
.elig-text.reveal.in { max-width:594px; }

/* Successful Stories - Infinite Slider */
.stories { background:#fdfafa; padding:4.5rem 0 3.2rem; position:relative; }
.stories-inner { max-width:1600px; margin:0 auto; padding:0 3rem; }
.stories-heading { text-align:center; font-size:2.6rem; font-weight:400; color:#876a53; margin:0 0 2.6rem; letter-spacing:.5px; }
.stories-loop {position:relative; overflow:hidden; }
.stories-track {display:flex; align-items:stretch; gap:0; user-select:none; will-change:transform;}
.stories-track.dragging {cursor:grabbing;}
.mt-story {flex:0 0 auto; display:flex; background:#fff; box-shadow:0 6px 18px -10px rgba(0,0,0,.22); margin:0;}
.mt-story.photo {flex-direction:column; width:300px; position:relative; background:#000; color:#fff; overflow:hidden;}
.mt-story.photo { height:380px; }
.mt-story.photo img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.92);}
.mt-story.photo .photo-meta {position:relative; margin-top:auto; background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.2)); padding:1.3rem .9rem 1.5rem; font-size:.78rem; text-align:center; letter-spacing:.3px;}
.photo-meta .s-name {margin:0 0 .45rem; font-size:1.05rem; font-weight:600; letter-spacing:.5px;}
.photo-meta .s-role {margin:0 0 .4rem; font-weight:500; line-height:1.25;}
.photo-meta .s-intake {margin:0; font-weight:500; opacity:.9;}
.mt-story.quote {overflow-y: auto; width:800px; padding:4.6rem 2.8rem 2.8rem 3rem; font-size:.98rem; line-height:1.58; position:relative; display:flex; background:#f5f5f5; height:400px;}
.mt-story.quote .q-mark { 
  /* 图片尺寸减半：3.3rem -> 1.65rem */
  width:1.65rem; 
  height:1.65rem; 
  flex:0 0 1.65rem; 
  margin-right:.9rem; /* 间距略缩以匹配更小图标 */
  /* 修正路径：styles.css 与 assets 同级，因此不需要 ../ */
  background:url("../assets/img/icon-prefix.png") center/contain no-repeat; 
  font-size:0; 
  line-height:0; 
  color:transparent; 
  position:relative; 
}
/* 若 HTML 中仍保留 ❝ 字符，利用 font-size:0 + color:transparent 隐藏；也可后续把内部内容清空。 */
.mt-story.quote .q-body p {margin:0 0 1.1rem;}
.mt-story.quote .q-body p:last-child {margin:0;}
/* 垂直居中 .q-body 内文字 */
.mt-story.quote .q-body { 
  display:flex; 
  flex-direction:column; 
  justify-content:center; /* 让段落在可用高度内垂直居中 */
}
.stories-fade {position:absolute; top:0; bottom:0; width:160px; z-index:3; pointer-events:none;}
.stories-fade.left {left:0; background:linear-gradient(90deg,#fdfafa 0%,rgba(253,250,250,0));}
.stories-fade.right {right:0; background:linear-gradient(270deg,#fdfafa 0%,rgba(253,250,250,0));}
.stories-bar {height:5px; background:#e3e3e3; border-radius:3px; overflow:hidden; margin:1.8rem auto 0; max-width:1100px; position:relative;}
.stories-bar .bar {position:absolute; inset:0; width:0; background:rgba(0,0,0,.5); transition:width .35s ease;}
/* === Swiper Container -> Match .stories Section Styling === */
/* 目的：无需改动 HTML 结构，让已有 <div class="swiper-container"> 外观、间距、卡片排列 与 section.stories 一致 */
/* 结构映射：
   stories-inner  -> 使用 .swiper-container 自身的水平内边距 + 最大宽度
   stories-loop   -> 等价为 .swiper-container (overflow hidden)
   stories-track  -> 对应 .swiper-wrapper (flex 水平排列)
*/
.swiper-container { background:#fdfafa; padding:4.5rem 3rem 3.2rem; position:relative; max-width:1600px; margin:0 auto; overflow:hidden; }
.swiper-container .swiper-wrapper { width:100%; box-sizing:border-box; display:flex; align-items:stretch; gap:0; }
/* 单个 slide 与 .stories 中的 .mt-story 一样保持并排且不再有 swiper 默认宽度限制（使用内容自身宽度） */
.swiper-container .swiper-slide { width:auto !important; flex:0 0 auto; display:flex; margin:0; padding:0; box-sizing:border-box; }
/* 右侧白色渐隐蒙层（与 .stories-fade.right 一致） */
.swiper-container::after { content:""; position:absolute; top:0; right:0; width:160px; bottom:0; pointer-events:none; background:linear-gradient(270deg,#fdfafa 0%,rgba(253,250,250,0)); }
/* 响应式内边距与原 stories 保持一致 */
@media (max-width:980px){ .swiper-container { padding:4.5rem 2rem 3.2rem; } }
@media (max-width:640px){ .swiper-container { padding:4.5rem 1.2rem 3.2rem; } }
/* 分页器位置调整为类似进度条（若使用） */
.swiper-container .swiper-pagination { position:relative; bottom:auto; margin-top:1.8rem; }
/* 默认小圆点样式微调以融入风格 */
.swiper-container .swiper-pagination-bullet { background:rgba(0,0,0,.3); opacity:1; }
.swiper-container .swiper-pagination-bullet-active { background:rgba(0,0,0,.55); }
/* 进度条 (模仿 .stories-bar) */
.swiper-progress-bar {height:5px; background:#e3e3e3; border-radius:3px; overflow:hidden; margin:1.8rem auto 0; max-width:1100px; position:relative;}
.swiper-progress-bar .bar {position:absolute; inset:0; width:0; background:rgba(0,0,0,.5); transition:width .35s ease;}

/* 移除 1000px 箭头高度覆盖，保留 900px */
@media (max-width:980px){
  .stories-inner {padding:0 2rem;}
  .mt-story.photo {width:240px;}
  .mt-story.quote {width:540px; padding:2.3rem 2.3rem 2.5rem 2.7rem;}
}
@media (max-width:780px){
  .mt-story.photo {width:210px;}
  .mt-story.quote {width:480px; font-size:.94rem;}
  .stories-heading {font-size:2.3rem; margin-bottom:2.2rem;}
  .stories-fade {width:110px;}
}
@media (max-width:640px){
  .stories-inner {padding:0 1.2rem;}
  .mt-story.photo {width:180px;}
  .mt-story.quote {width:420px; padding:2rem 1.8rem 2.2rem 2.3rem;}
  .stories-fade {width:90px;}
  .stories-heading {font-size:2.05rem;}
}
@media (max-width:480px){
  .mt-story.photo {width:150px;}
  .mt-story.quote {width:340px; padding:1.8rem 1.5rem 2rem 2.1rem;}
  .stories-fade {width:70px;}
}

/* Selection Process */
.selection-process { position:relative; background:#000 url('../assets/img/Vessel_HK2.JPG') center/cover no-repeat; color:#fff; padding:5.5rem 0 4.5rem; text-align:center; overflow:hidden; }
.selection-process::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.55)); }
.selection-process .sp-inner { position:relative; margin:0 auto; padding:0 2.5rem; }
.sp-heading { margin:0 0 2.8rem; font-size:3rem; font-weight:400; letter-spacing:.5px; }
/* Responsive timeline: remove fixed 1386px width to prevent horizontal overflow */
.sp-timeline { 
  position:relative; 
  height:220px; 
  width:100%; /* fluid */
  --sp-bar:100%; /* used in interval calc */
  margin:0 auto 3.2rem; 
  --sp-steps:6; 
  --sp-bubble-width:240px; 
  --sp-offset:-24px; /* global left shift; adjust (-/+px) if needed */
  --sp-interval: calc(var(--sp-bar) / (var(--sp-steps) + 1));
}
/* EMT page: 8 steps; reduce default bubble width a bit for density */
.emt-page .sp-timeline { --sp-steps:8; --sp-bubble-width:220px; }
/* Bar centers inside its own fixed-width container */
.sp-line { position:absolute; top:50%; left:0; width:100%; height:4px; background:#fff; transform:translateY(-50%); }
/* Step wrapper sizing kept flexible; width defines horizontal spacing anchor */
/* === Selection Process Layout Fix === */
/* Variables (can move to :root if reused elsewhere) */
 .sp-timeline { --sp-node-size:16px; --sp-connector:60px; --sp-gap:26px; }
/* Position each step with its center on the horizontal line */
/* Even edge + internal spacing: each gap (including ends) = bar/(steps+1); step index i=0..5 placed at interval*(i+1) */
.sp-step { position:absolute; top:0; left:calc(var(--sp-interval) * (var(--i) + 1) + var(--sp-offset)); width:var(--sp-bubble-width); pointer-events:none; height:100%; transform:translateX(-50%); }
/* Node sits centered on the line */
.sp-node { position:absolute; left:50%; top:50%; width:var(--sp-node-size); height:var(--sp-node-size); margin-top:calc(-1 * var(--sp-node-size) / 2); transform:translateX(-50%); background:#fff; border-radius:50%; box-shadow:0 0 0 4px rgba(255,255,255,.25); }
/* Connector base style (drawn from line toward bubble) */
.sp-step .sp-connector { position:absolute; left:50%; width:2px; background:#fff; transform:translateX(-50%); }
/* NOTE: .sp-line is a preceding sibling <div>, so actual visual step indices shift by +1 for :nth-of-type.
  Therefore: visual steps 1,3,5 correspond to :nth-of-type(even); visual steps 2,4,6 correspond to :nth-of-type(odd). */
/* Visual steps 1,3,5 (even nth-of-type): bubble BELOW the line */
.sp-step:nth-of-type(even) .sp-connector { top:50%; height:var(--sp-connector); }
/* Visual steps 2,4,6 (odd nth-of-type): bubble ABOVE the line */
.sp-step:nth-of-type(odd) .sp-connector { top:calc(50% - var(--sp-connector)); height:var(--sp-connector); }
/* Bubble base */
.sp-bubble { position:absolute; background:#fff; color:#111; border-radius:40px; padding:.8rem 1.6rem .75rem; box-shadow:0 8px 20px -6px rgba(0,0,0,.32); font-size:1rem; font-weight:500; letter-spacing:.25px; line-height:1.15; width:var(--sp-bubble-width); min-width:var(--sp-bubble-width); text-align:center; }
/* Downward bubbles for visual steps 1,3,5 (even nth-of-type) */
/* Apply consistent horizontal bubble shift so connector visually centered */
.sp-step:nth-of-type(even) .sp-bubble { top:calc(40% + var(--sp-connector) + var(--sp-gap)); transform:translate(-50%,-50%); }
/* Upward bubbles for visual steps 2,4,6 (odd nth-of-type) */
.sp-step:nth-of-type(odd) .sp-bubble { top:calc(40% - var(--sp-connector) - var(--sp-gap)); transform:translate(-50%,-50%); }
.sp-label { margin:0; white-space:nowrap; }
.sp-apply-btn { margin:2.2rem auto 1.6rem; font-size:1.05rem; padding:.95rem 2.6rem; border-radius:14px; letter-spacing:.5px; }
.sp-deadline { margin:0; font-size:.95rem; font-weight:500; letter-spacing:.3px; opacity:.9; }

/* Reveal overrides for selection process */
/* Reveal animation adjustments */
.selection-process .sp-step, .selection-process .sp-line, .selection-process .sp-bubble, .selection-process .sp-node, .selection-process .sp-apply-btn, .selection-process .sp-deadline { opacity:0; transition:opacity .9s cubic-bezier(.4,.7,.2,1), transform .9s cubic-bezier(.4,.7,.2,1); }
.selection-process .sp-step { transform:translate(-50%,12px); }
.selection-process .sp-bubble { transform:translate(-50%,12px); }
.selection-process .sp-node, .selection-process .sp-apply-btn, .selection-process .sp-deadline { transform:translate(-50%,12px); }
.selection-process.in .sp-line { opacity:1; }
.selection-process.in .sp-step { opacity:1; transform:translate(-50%,0); }
.selection-process.in .sp-bubble { opacity:1; transform:translate(-50%,0); }
.selection-process.in .sp-node, .selection-process.in .sp-apply-btn, .selection-process.in .sp-deadline { opacity:1; transform:translate(-50%,0); }
.selection-process.in .sp-apply-btn, .selection-process.in .sp-deadline { transform:translateY(0); }

/* Adaptive bubble width shrink to avoid overflow before mobile column layout kicks in */
@media (max-width:1450px){ .sp-timeline { --sp-bubble-width:230px; } .emt-page .sp-timeline { --sp-bubble-width:210px; } }
@media (max-width:1300px){ .sp-timeline { --sp-bubble-width:220px; } .emt-page .sp-timeline { --sp-bubble-width:200px; } }
@media (max-width:1180px){ .sp-timeline { --sp-bubble-width:205px; } .emt-page .sp-timeline { --sp-bubble-width:188px; } }
@media (max-width:1080px){ .sp-heading { font-size:2.8rem; } .sp-timeline { --sp-bubble-width:190px; } .emt-page .sp-timeline { --sp-bubble-width:176px; } }
@media (max-width:900px){ .sp-timeline { height:auto; display:flex; flex-direction:column; gap:2.5rem; }
  .sp-line { display:none; }
  .sp-step { position:relative; left:auto; width:100%; transform:none !important; padding:0 0 1.2rem; }
  .sp-step .sp-connector, .sp-node { display:none; }
  .sp-bubble { position:relative; transform:none !important; top:auto !important; left:auto; margin:0 auto; }
  .selection-process.in .sp-bubble { transform:none; }
}
@media (max-width:640px){ .selection-process { padding:5rem 0 4.5rem; } .sp-heading { font-size:2.3rem; margin-bottom:2.6rem; } .selection-process .sp-inner { padding:0 1.6rem; } .sp-bubble { font-size:1rem; padding:1.4rem 1.4rem 1.3rem; } .sp-deadline { font-size:.9rem; } }
@media (max-width:460px){ .sp-heading { font-size:2rem; } .sp-bubble { font-size:.95rem; } }

/* === Extra Small MT Page RWD Enhancements === */
@media (max-width:400px){
  .mt-hero-heading { font-size:1.85rem; }
  .mt-hero-pre { font-size:.92rem; }
  .ps-heading, .cp-heading, .elig-heading, .stories-heading { font-size:1.75rem; }
  .ps-banner { font-size:.85rem; padding:.75rem 1rem; clip-path:polygon(0 0, calc(100% - 40px) 0, 100% 50%, calc(100% - 40px) 100%, 0 100%); }
  .ps-benefit { padding:.75rem 1.2rem .75rem; font-size:.75rem; }
  .cp-steps { grid-template-columns:repeat(7,minmax(38px,1fr)); }
  .cp-step { font-size:.46rem; }
  .cp-step::after { font-size:.46rem; }
  .cp-arrow-mid { width:200px; padding:6rem 1.2rem 3rem; font-size:.7rem; }
  .cp-arrow-base { width:130px; padding:3.6rem 1rem 1.6rem; font-size:.55rem; }
  .elig-heading { margin-bottom:1.5rem; }
  .elig-intro { font-size:.85rem; }
  .elig-list { font-size:.85rem; }
  .stories-track { gap:1.6rem; }
  .story-avatar { width:140px; height:140px; }
  .story-card { width:46%; min-width:150px; }
  .selection-process { padding:4rem 0 4rem; }
  .sp-heading { font-size:1.85rem; }
  .sp-bubble { font-size:.9rem; padding:1.1rem 1.1rem 1rem; }
  .sp-apply-btn { width:100%; padding:.9rem 1.8rem; }
  .sp-deadline { font-size:.8rem; }
}
@media (max-width:380px){
  .mt-hero-heading { font-size:1.7rem; }
  .ps-benefit { font-size:.7rem; padding:.65rem 1rem .65rem; }
  .ps-pillar-title { font-size:1rem; }
  /* 保持与 ≤480px 规则一致：不再缩小 cp-label / cp-text */
  .cp-label { font-size:1.25rem; }
  .cp-text { font-size:1.25rem; }
  .stories-heading { font-size:1.6rem; }
  .story-avatar { width:125px; height:125px; }
  .story-card { width:100%; }
  .sp-bubble { font-size:.85rem; }
}
/* === EMT 页面修复：窄宽度(≈590px) 下 ships 容器上移覆盖文字问题 ===
   原因：在 820px / 750px 断点对 .cp-right-new 应用 translateY(-40px / -70px)，
         当文字换行增高时（~590px 视口），上移导致遮挡上一段说明文本。
   方案：在更窄视口撤销上移，恢复自然文档流间距，仅 EMT 页面生效。 */
@media (max-width: 620px){
  .emt-page .cp-right-new,
  .emt-page .emt-cp-right-new { 
    transform:none !important; /* 取消负位移 */
    margin-top:0 !important; 
    padding-top:.5rem; /* 补一点间距，避免紧贴正文 */
  }
  /* 如果还想更紧凑，可改成 padding-top:0; */
}
/* MT 页面在 ~630px 宽度也会出现上移覆盖：提前在 660px 以下撤销位移 */
@media (max-width: 660px){
  .mt-page .cp-right-new { 
    transform:none !important; 
    margin-top:0 !important; 
    padding-top:.5rem; 
  }
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce){
  .reveal, .cp-step, .cp-arrow-mid, .cp-arrow-base, .selection-process .sp-step, .selection-process .sp-bubble, .selection-process .sp-node { transition:none !important; transform:none !important; }
}

.ship-item { text-align:center; }
.ship-item p { margin:0.5rem 0 0; font-weight:500; }

/* ================= New Footer (.ft-*) ================= */
.mega-footer.ft-new {background:#262626;color:#e5e5e5;font-size:14px;line-height:1.55;font-family:'Inter',system-ui,Arial,sans-serif;}
.ft-inner {max-width:1340px;margin:0 auto;padding:0 32px;}
.ft-grid {display:grid;gap:48px 40px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:start;padding-bottom:40px;}
@media (min-width:1100px){
  .ft-grid {grid-template-columns:repeat(4,minmax(180px,220px)) 1fr;}
  .ft-app {grid-column:5/span 1;}
}
.ft-col-group {font-size:13px;}
.ft-title {font-size:15px;font-weight:600;color:#fff;margin:0 0 10px;letter-spacing:.5px;}
.ft-title.sub {margin-top:28px;}
.ft-links {list-style:none;margin:0;padding:0;display:grid;gap:4px;}
.ft-links a {color:#cfd2d6;text-decoration:none;display:inline-block;padding:2px 0;transition:color .2s ease,transform .2s ease;}
.ft-links a:focus-visible,.ft-links a:hover {color:#fff;}
.ft-links a:active {transform:scale(.96);}

/* App Feature Column */
.ft-app {position:relative;display:flex;flex-direction:column;}
.ft-app-heading {font-size:20px;line-height:1.25;font-weight:600;color:#fff;margin:0 0 12px;}
@media (min-width:1280px){.ft-app-heading {font-size:24px;}}
.ft-app-text {margin:0 0 14px;color:#d2d5d9;font-size:13px;}
.ft-app-bullets {margin:0 0 18px 18px;padding:0;font-size:13px;color:#cfd2d6;line-height:1.45;}
.ft-app-bullets li {margin:4px 0;}
.ft-phone-shot {width:170px;height:340px;border:2px solid #444;border-radius:28px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;color:#888;margin:0 0 18px;background:linear-gradient(145deg,#2f2f2f,#232323);box-shadow:0 6px 16px -4px rgba(0,0,0,.45);}
@media (min-width:1400px){.ft-phone-shot {position:absolute;right:0;top:0;margin:0;}}
.ft-qr-badges {display:flex;flex-direction:column;gap:14px;}
.ft-qr-grid {display:grid;grid-template-columns:repeat(3,72px);gap:10px;}
.ft-qr-grid .qr {width:72px;height:72px;background:#1d1d1d;border:1px solid #3a3a3a;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#666;font-size:11px;font-weight:600;letter-spacing:.5px;}
.ft-badges {display:flex;flex-wrap:wrap;gap:10px;}
.store-badge {background:#303030;border:1px solid #3a3a3a;color:#ddd;padding:6px 10px;border-radius:6px;font-size:12px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;line-height:1.1;transition:background .25s ease,color .25s ease,transform .25s ease;}
.store-badge:hover,.store-badge:focus-visible {background:#3a3a3a;color:#fff;}
.store-badge:active {transform:translateY(1px);}
.ft-commit {align-self:flex-start;margin-top:4px;background:#c40000;color:#fff;padding:10px 18px;border-radius:30px;font-size:13px;font-weight:600;text-decoration:none;letter-spacing:.5px;box-shadow:0 6px 14px -5px rgba(196,0,0,.55);transition:background .25s ease,box-shadow .25s ease,transform .25s ease;}
.ft-commit:hover,.ft-commit:focus-visible {background:#e00000;box-shadow:0 8px 18px -6px rgba(224,0,0,.65);} 
.ft-commit:active {transform:translateY(1px);}
.ft-social {display:flex;gap:10px;margin-top:6px;}
.soc {width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#303030;border:1px solid #3a3a3a;border-radius:50%;color:#bbb;font-size:11px;font-weight:600;text-decoration:none;transition:background .25s ease,color .25s ease,transform .25s ease;}
.soc:hover,.soc:focus-visible {background:#3d3d3d;color:#fff;}
.soc:active {transform:scale(.92);} 

/* Legal Bar */
.ft-legal-bar {border-top:1px solid #343434;padding:18px 0 36px;margin-top:8px;display:flex;flex-direction:column;gap:14px;font-size:12px;color:#b9bcc0;}
@media (min-width:900px){.ft-legal-bar {flex-direction:row;align-items:center;justify-content:space-between;}}
.ft-copy {opacity:.85;}
.ft-legal-links {display:flex;flex-wrap:wrap;gap:14px;}
.ft-legal-links a {color:#cfd2d6;text-decoration:none;position:relative;padding:2px 0;}
.ft-legal-links a:hover,.ft-legal-links a:focus-visible {color:#fff;}
.ft-legal-links a:active {top:1px;}

/* High contrast mode respect */
@media (prefers-contrast: more){
  .ft-commit {box-shadow:none;}
  .soc,.store-badge {border-color:#555;}
}

/* Reduced motion adjustments */
@media (prefers-reduced-motion: reduce){
  .ft-links a,.store-badge,.soc,.ft-commit {transition:none;}
}

/* Narrow layout stacking for app column */
@media (max-width:1099.98px){
  .ft-app {grid-column:1 / -1;}
  .ft-phone-shot {order:2;width:150px;height:300px;}
  .ft-qr-badges {order:3;}
}

/* === EMT 页面时间轴气泡水平校正 ===
   需求：emt 页面所有 .sp-bubble 向右移动，让“气泡中心”落在竖直连接线(sp-node所在的竖线) 的端点上。
   原始布局：竖线(node) 位于 step 宽度中点，而气泡整体向左偏移 50%（transform: translate(-50%, ...))，
             竖线落在气泡的右侧中心位置（即气泡的右“半径”处）。
   目标：把气泡整体右移自身宽度的一半，让气泡中心与竖线重合。
   方法：覆盖 translateX，从 -50% 改为 0（仅 EMT 页面生效）。
   注意：进入动画(in 状态) 也有 transform，需要同步覆盖。 */
/* EMT + MT 页面均应用 */
.emt-page .sp-step .sp-bubble,
.mt-page .sp-step .sp-bubble { 
  transform:translate(0,-50%) !important; /* 初始/未触发 in 状态：保持垂直 -50% 居中，只去掉水平 -50% */
}
.emt-page .selection-process.in .sp-bubble,
.mt-page .selection-process.in .sp-bubble { 
  transform:translate(0,0) !important; /* 动画完成态：与原来 translate(-50%,0) 对应，改为水平对齐 */
}

/* ================== OVERRIDES: ship-row font-size lock (641px–820px) ==================
   说明: 之前在较后位置存在 clamp 或其它媒体查询覆盖导致 1.5rem 失效。
         在文件末尾追加此规则并使用 !important 以保证生效。 */
@media (min-width:641px) and (max-width:820px){
  /* gap 由 1.2rem 再缩窄三分之一 => 约 0.8rem */
  .mt-page .ship-row { gap:.8rem !important; }
  .mt-page .ship-row .ship-item { font-size:1.25rem !important; }
}
/* 全局：MT 页面 ship-row 宽度 85% 居中 */
.mt-page .ship-row { width:85%; margin-left:auto; margin-right:auto; }
/* 可选：若希望 <=640px 再缩小，可追加：
@media (max-width:640px){ .mt-page .ship-row .ship-item { font-size:1.15rem !important; } }
*/