/* ===== styles-v9.css ===== */
:root{
  --yellow:#ffcf24;
  --orange:#f36b2b;
  --cream:#fff8d7;
  --ink:#121212;
  --white:#fff;
  --muted:#584b3a;
  --display:"Archivo Black",Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  --body:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --pad:clamp(24px,5vw,86px);
  --radius:clamp(24px,3vw,46px);
  --header-h:96px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px)}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;overflow-x:hidden;text-rendering:optimizeLegibility}
body.nav-open{overflow:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit}
figure{margin:0}
::selection{background:var(--orange);color:#fff}
.progress{position:fixed;left:0;right:0;top:0;height:5px;z-index:2000;background:transparent}.progress span{display:block;width:0;height:100%;background:var(--orange)}
.skip-link{position:fixed;left:16px;top:-100px;z-index:3000;background:#fff;border:3px solid var(--ink);padding:12px 18px;font-weight:900}.skip-link:focus{top:16px}
.section-pad{padding:clamp(78px,10vw,150px) var(--pad)}
.eyebrow{margin:0 0 24px;color:var(--orange);font-weight:900;letter-spacing:.14em;font-size:clamp(13px,1vw,16px)}
.display{margin:0;font-family:var(--display);font-size:clamp(54px,7vw,118px);line-height:.91;letter-spacing:-.055em;text-wrap:balance}
.display em{color:var(--orange);font-style:normal}
.display-light{color:#fff}.eyebrow-light{color:var(--yellow)}

.site-header{position:sticky;top:0;z-index:1000;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:10px var(--pad);background:color-mix(in srgb,var(--cream) 93%,transparent);border-bottom:3px solid var(--ink);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:15px;min-width:260px}.brand img{width:68px;height:68px;object-fit:contain;border-radius:50%;background:#fff}.brand-copy{display:grid;line-height:1}.brand-copy strong{font-family:var(--display);font-size:21px;letter-spacing:-.03em}.brand-copy small{margin-top:7px;font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--muted)}
.site-nav{display:flex;align-items:center;gap:clamp(15px,2vw,32px);font-weight:900;font-size:16px}.site-nav a{position:relative;padding:12px 2px}.site-nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:100%;bottom:7px;height:3px;background:var(--orange);transition:right .25s}.site-nav a:hover::after,.site-nav a:focus-visible::after{right:0}.nav-cta{padding:13px 24px!important;background:var(--yellow);border:3px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 var(--ink);transition:transform .2s,box-shadow .2s}.nav-cta:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.menu-toggle{display:none;align-items:center;gap:12px;border:3px solid var(--ink);border-radius:999px;background:var(--yellow);padding:11px 17px;font-weight:900;box-shadow:3px 3px 0 var(--ink);cursor:pointer}.menu-lines{display:grid;gap:4px;width:27px}.menu-lines i{display:block;height:3px;background:var(--ink);border-radius:3px;transition:.25s}.menu-toggle[aria-expanded="true"] .menu-lines i:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu-toggle[aria-expanded="true"] .menu-lines i:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] .menu-lines i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr);align-items:center;gap:clamp(40px,6vw,110px);min-height:calc(100svh - var(--header-h));padding-top:clamp(55px,7vw,100px);padding-bottom:clamp(70px,8vw,120px);overflow:hidden}
.hero::before{content:"";position:absolute;z-index:-2;width:420px;height:420px;border-radius:50%;background:var(--yellow);right:-180px;top:-190px;filter:blur(.2px)}
.hero-copy{position:relative;z-index:3;max-width:900px}.hero-eyebrow{opacity:0;animation:introUp .65s .1s both}.hero h1{margin:0;font-family:var(--display);font-size:clamp(72px,8.4vw,156px);line-height:.84;letter-spacing:-.075em}.hero-line{display:block;width:max-content;max-width:100%;opacity:0;transform:translateY(55px);animation:introUp .85s cubic-bezier(.18,.85,.25,1) both}.hero-line:nth-child(1){animation-delay:.16s}.hero-line:nth-child(2){animation-delay:.26s}.hero-line:nth-child(3){animation-delay:.36s}.hero-line-accent{color:var(--orange)}
.hero-lead{max-width:720px;margin:42px 0 0;font-size:clamp(21px,1.8vw,30px);line-height:1.35;font-weight:500;opacity:0;animation:introUp .75s .5s both}.hero-actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:38px;opacity:0;animation:introUp .75s .62s both}
.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:58px;padding:15px 27px;border:3px solid var(--ink);border-radius:999px;font-weight:900;font-size:18px;transition:transform .22s,box-shadow .22s,background .22s}.button span{font-size:1.25em}.button-dark{background:var(--ink);color:#fff;box-shadow:8px 8px 0 var(--orange)}.button-dark:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 var(--orange)}.button-ghost{background:transparent;box-shadow:0 0 0 var(--ink)}.button-ghost:hover{background:#fff;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.hero-collage{position:relative;min-height:min(760px,72vw);opacity:0;animation:introScale 1s .38s cubic-bezier(.2,.8,.2,1) both}.hero-photo{position:absolute;overflow:hidden;border:3px solid var(--ink);box-shadow:12px 12px 0 var(--ink);will-change:transform}.hero-photo-main{inset:4% 6% 3% 8%;border-radius:48% 48% 28px 28px;transform:rotate(2deg);animation:floatMain 7s 1.2s ease-in-out infinite}.hero-photo-main img{object-position:50% 50%}.hero-photo-small{width:43%;height:34%;right:-2%;bottom:1%;border-radius:50%;transform:rotate(-6deg);box-shadow:8px 8px 0 var(--yellow);animation:floatSmall 6s 1.4s ease-in-out infinite}.hero-badge{position:absolute;z-index:4;left:0;top:8%;width:clamp(120px,12vw,184px);aspect-ratio:1;display:grid;place-content:center;text-align:center;background:var(--yellow);border:3px solid var(--ink);border-radius:50%;box-shadow:7px 7px 0 var(--orange);transform:rotate(-8deg);animation:badgePulse 4.6s 1s ease-in-out infinite}.hero-badge span{font-family:var(--display);font-size:clamp(38px,4vw,64px);line-height:.9}.hero-badge small{font-weight:900;font-size:11px;letter-spacing:.08em;margin-top:7px}.orbit{position:absolute;border:3px solid var(--ink);border-radius:50%;opacity:.14}.orbit-one{width:78%;aspect-ratio:1;left:6%;top:4%;animation:spin 28s linear infinite}.orbit-two{width:42%;aspect-ratio:1;right:1%;bottom:6%;border-style:dashed;animation:spinReverse 20s linear infinite}

.marquee{overflow:hidden;border-block:3px solid var(--ink);background:var(--yellow);padding:15px 0}.marquee-track{display:flex;align-items:center;width:max-content;animation:marquee 23s linear infinite}.marquee span{font-family:var(--display);font-size:clamp(22px,2.2vw,39px);white-space:nowrap}.marquee i{font-style:normal;font-size:28px;margin:0 30px;color:var(--orange)}
.statement{background:#fff}.statement-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:clamp(45px,7vw,130px);align-items:end}.statement-copy{max-width:650px}.statement-copy p{font-size:clamp(21px,1.8vw,30px);line-height:1.38;margin:0 0 32px}.text-link{display:inline-flex;gap:18px;align-items:center;font-weight:900;border-bottom:3px solid var(--ink);padding-bottom:7px;font-size:18px}.text-link span{transition:transform .2s}.text-link:hover span{transform:translateX(8px)}
.section-heading{max-width:1180px;margin-bottom:clamp(52px,7vw,100px)}

.programs{background:var(--cream)}
.program-card{position:relative;display:grid;grid-template-columns:86px minmax(310px,.8fr) minmax(0,1.2fr);min-height:580px;margin-top:34px;border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;box-shadow:10px 10px 0 var(--ink);transform-style:preserve-3d;transition:box-shadow .3s,transform .3s}.program-card:hover{box-shadow:15px 18px 0 var(--ink)}
.program-orange{background:var(--orange);color:#fff}.program-yellow{background:var(--yellow)}.program-cream{background:#fff}
.program-number{display:flex;align-items:flex-start;justify-content:center;padding-top:42px;border-right:3px solid currentColor;font-family:var(--display);font-size:34px}.program-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,5vw,80px)}.card-kicker{font-weight:900;letter-spacing:.12em;font-size:14px;margin:0 0 26px}.program-copy h3{font-family:var(--display);font-size:clamp(44px,4.6vw,78px);line-height:.93;letter-spacing:-.045em;margin:0 0 32px;text-wrap:balance}.program-copy>p:not(.card-kicker){font-size:clamp(19px,1.45vw,25px);line-height:1.43;margin:0;max-width:600px}.program-copy a{width:max-content;margin-top:38px;font-weight:900;border-bottom:3px solid currentColor;padding-bottom:6px;font-size:18px}.program-card figure{position:relative;min-height:580px;border-left:3px solid var(--ink);overflow:hidden}.program-card figure::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 48%,rgba(255,255,255,.42) 50%,transparent 52%);transform:translateX(-140%);transition:transform .8s}.program-card:hover figure::after{transform:translateX(140%)}.program-card figure img{transition:transform .8s cubic-bezier(.2,.75,.2,1)}.program-card:hover figure img{transform:scale(1.055)}.program-yellow figure img{object-position:50% 42%}

.collaboration{display:grid;grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr);gap:clamp(50px,7vw,120px);background:var(--orange);color:#fff;align-items:center}.collab-intro>p:last-child{font-size:clamp(20px,1.5vw,25px);max-width:720px}.collab-wheel{display:grid;grid-template-columns:1fr 1fr;gap:18px;transform:rotate(2deg)}.collab-item{position:relative;min-height:245px;padding:34px;display:flex;flex-direction:column;justify-content:space-between;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:50% 50% 32px 32px;box-shadow:7px 7px 0 var(--yellow);transition:transform .3s}.collab-item:nth-child(even){border-radius:32px 32px 50% 50%;transform:translateY(28px)}.collab-item:hover{transform:translateY(-8px) rotate(-2deg)}.collab-item:nth-child(even):hover{transform:translateY(18px) rotate(2deg)}.collab-item span{font-family:var(--display);color:var(--orange);font-size:20px}.collab-item strong{font-family:var(--display);font-size:clamp(25px,2.2vw,39px);line-height:1.05}

.fields{background:var(--cream)}.fields-head{max-width:1050px}.fields-head>p:last-child{font-size:clamp(20px,1.45vw,25px);margin-top:30px;max-width:900px}.field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:70px}.field-card{min-height:360px;background:#fff;border:3px solid var(--ink);border-radius:32px;padding:40px;box-shadow:8px 8px 0 var(--yellow);transition:box-shadow .25s,transform .25s;transform-style:preserve-3d}.field-card:hover{box-shadow:12px 16px 0 var(--yellow)}.field-icon{display:grid;place-items:center;width:78px;height:78px;background:var(--yellow);border:2px solid var(--ink);border-radius:50%;font-size:34px}.field-card h3{font-family:var(--display);font-size:clamp(29px,2.4vw,42px);margin:35px 0 18px;line-height:1}.field-card p{font-size:19px;margin:0}.study-strip{margin-top:70px;border-top:3px solid var(--ink);padding-top:45px}.study-list{display:flex;flex-wrap:wrap;gap:14px}.study-list span{background:var(--orange);color:#fff;border:2px solid var(--ink);border-radius:999px;padding:13px 21px;font-weight:900;font-size:17px;box-shadow:3px 3px 0 var(--ink);transition:transform .2s}.study-list span:hover{transform:translateY(-4px) rotate(-1deg)}

.journey{background:#fff}.journey-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.journey-step figure{height:clamp(360px,31vw,510px);margin:0 0 24px;border:3px solid var(--ink);border-radius:160px 160px 24px 24px;overflow:hidden}.journey-step:nth-child(even) figure{border-radius:24px 24px 160px 160px}.journey-step figure img{transition:transform .75s cubic-bezier(.2,.75,.2,1)}.journey-step:hover figure img{transform:scale(1.06)}.journey-step span{font-family:var(--display);color:var(--orange)}.journey-step h3{font-family:var(--display);font-size:clamp(24px,2vw,34px);line-height:1.05;margin:8px 0}

.gallery{background:var(--ink);color:#fff}.gallery-head{display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:end;margin-bottom:60px}.gallery-head>p{font-size:18px;text-align:right}.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:270px;gap:16px}.gallery-item{padding:0;border:0;background:#222;overflow:hidden;border-radius:26px;cursor:zoom-in;position:relative}.gallery-item::after{content:"↗";position:absolute;right:16px;top:16px;width:50px;height:50px;display:grid;place-items:center;border:3px solid var(--ink);border-radius:50%;background:var(--yellow);color:#111;font-size:26px;font-weight:900;opacity:0;transform:scale(.55) rotate(-20deg);transition:.25s}.gallery-item:hover::after{opacity:1;transform:scale(1) rotate(0)}.gallery-item img{transition:transform .75s}.gallery-item:hover img{transform:scale(1.06)}.gallery-item.wide{grid-column:span 2}.gallery-item.tall{grid-row:span 2}

.director{display:grid;grid-template-columns:minmax(390px,.85fr) minmax(0,1.15fr);gap:clamp(55px,8vw,150px);align-items:center;background:var(--yellow)}.director-photo{height:min(760px,71vw);max-height:760px;border:3px solid var(--ink);border-radius:50% 50% 30px 30px;overflow:hidden;box-shadow:12px 12px 0 var(--ink)}.director-photo img{object-position:50% 40%;transition:transform .8s}.director-photo:hover img{transform:scale(1.035)}.director-copy h2{font-family:var(--display);font-size:clamp(52px,6vw,100px);line-height:.93;letter-spacing:-.05em;margin:0}.director-copy h2 span{color:var(--orange)}.director-copy>p:last-child{font-size:clamp(20px,1.55vw,26px);max-width:700px;margin-top:35px}

.contact{background:var(--cream);display:grid;grid-template-columns:1.05fr .95fr;gap:26px}.contact-card,.contact-map{border:3px solid var(--ink);border-radius:42px;overflow:hidden;box-shadow:9px 9px 0 var(--ink)}.contact-card{background:var(--orange);color:#fff;padding:clamp(45px,6vw,90px);display:flex;flex-direction:column;justify-content:center}.contact-card .eyebrow{color:var(--yellow)}.contact-card>p:not(.eyebrow){font-size:clamp(20px,1.5vw,25px)}.contact-card .button-ghost{background:#fff;color:#111}.contact-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}.contact-map{min-height:650px}.contact-map iframe{width:100%;height:100%;border:0;filter:saturate(.75) contrast(1.08)}

.site-footer{background:var(--ink);color:#fff;padding:45px var(--pad);display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center}.footer-brand{display:flex;align-items:center;gap:18px}.footer-brand img{width:70px;height:70px;object-fit:contain;background:#fff;border-radius:50%}.footer-brand div{display:grid}.footer-brand strong{font-family:var(--display);font-size:23px}.footer-brand small{font-size:15px;color:#bbb;margin-top:5px}.footer-links{display:flex;gap:24px;font-weight:800;font-size:16px}.site-footer>p{grid-column:1/-1;border-top:1px solid #444;padding-top:24px;margin:0;color:#aaa;font-size:15px}

.reveal{opacity:0;transform:translateY(46px) scale(.985);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}.reveal.from-left{transform:translateX(-46px)}.reveal.from-right{transform:translateX(46px)}.reveal.is-visible{opacity:1;transform:none}
.lightbox{width:min(92vw,1300px);height:min(90vh,900px);padding:0;border:0;border-radius:25px;background:#111;box-shadow:0 30px 100px rgba(0,0,0,.55)}.lightbox::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(8px)}.lightbox img{width:100%;height:100%;object-fit:contain}.lightbox-close{position:absolute;right:16px;top:16px;width:54px;height:54px;border:3px solid #111;border-radius:50%;background:var(--yellow);font-size:34px;font-weight:900;cursor:pointer;z-index:2}

@keyframes introUp{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
@keyframes introScale{from{opacity:0;transform:scale(.92) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes floatMain{0%,100%{transform:rotate(2deg) translateY(0)}50%{transform:rotate(.5deg) translateY(-12px)}}
@keyframes floatSmall{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-3deg) translateY(13px)}}
@keyframes badgePulse{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(-3deg) scale(1.05)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinReverse{to{transform:rotate(-360deg)}}

@media (max-width:1180px){
  :root{--header-h:88px}
  .site-header{height:var(--header-h)}.brand img{width:58px;height:58px}.brand-copy strong{font-size:18px}.brand-copy small{display:none}.site-nav{gap:14px;font-size:14px}
  .hero{grid-template-columns:1fr;min-height:auto}.hero-copy{max-width:1000px}.hero h1{font-size:clamp(82px,12vw,145px)}.hero-collage{min-height:680px;max-width:900px;width:100%;margin:0 auto}
  .statement-grid,.collaboration,.director,.contact{grid-template-columns:1fr}.collab-wheel{max-width:900px}.program-card{grid-template-columns:74px minmax(300px,.9fr) minmax(0,1.1fr)}.program-card figure{min-height:540px}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.journey-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-head{grid-template-columns:1fr}.gallery-head>p{text-align:left}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-map{min-height:500px}
}

@media (max-width:820px){
  :root{--pad:22px;--header-h:78px}
  body{font-size:17px}.site-header{height:var(--header-h);padding:8px 14px}.brand{min-width:0;gap:10px}.brand img{width:52px;height:52px}.brand-copy strong{font-size:16px;line-height:.92}.menu-toggle{display:flex;min-height:48px;padding:9px 15px}.site-nav{position:fixed;inset:calc(var(--header-h) + 10px) 14px auto 14px;display:grid;gap:0;padding:18px;background:var(--yellow);border:3px solid var(--ink);border-radius:24px;box-shadow:8px 8px 0 var(--ink);transform:translateY(-24px) scale(.97);opacity:0;pointer-events:none;transition:.25s}.site-nav.open{opacity:1;transform:none;pointer-events:auto}.site-nav a{font-family:var(--display);font-size:23px;padding:12px;border-bottom:2px solid rgba(0,0,0,.14)}.nav-cta{margin-top:10px;text-align:center;border-radius:14px!important;background:var(--orange);color:#fff;box-shadow:none!important}
  .section-pad{padding-block:82px}.hero{display:block;padding-top:56px;padding-bottom:72px}.hero::before{width:240px;height:240px;right:-120px;top:-120px}.hero-copy{max-width:none}.hero-eyebrow{font-size:12px;line-height:1.4;margin-bottom:24px}.hero h1{font-size:clamp(53px,14.2vw,78px);line-height:.88;letter-spacing:-.065em}.hero-line{width:auto;max-width:none;white-space:nowrap}.hero-lead{font-size:20px;line-height:1.42;margin-top:30px}.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}.button{min-height:54px;padding:12px 17px;font-size:16px}.button-dark{box-shadow:6px 6px 0 var(--orange)}
  .hero-collage{min-height:480px;margin-top:62px}.hero-photo-main{inset:3% 4% 6% 3%;border-radius:48% 48% 24px 24px;box-shadow:8px 8px 0 var(--ink)}.hero-photo-small{width:46%;height:34%;right:-1%;bottom:0}.hero-badge{left:-2%;top:2%;width:108px;box-shadow:5px 5px 0 var(--orange)}.hero-badge span{font-size:34px}.hero-badge small{font-size:9px}.orbit-one{width:85%;left:2%}.orbit-two{width:45%}
  .display{font-size:clamp(43px,12.5vw,68px);line-height:.94;letter-spacing:-.052em}.statement-grid{grid-template-columns:1fr;gap:38px}.statement-copy p{font-size:20px}.section-heading{margin-bottom:48px}
  .program-card{grid-template-columns:1fr;min-height:auto;border-radius:28px;box-shadow:7px 7px 0 var(--ink);margin-top:26px;transform:none!important}.program-number{position:absolute;z-index:3;top:14px;left:14px;width:58px;height:58px;display:grid;place-items:center;padding:0;border:3px solid var(--ink);border-radius:50%;background:var(--yellow);color:var(--ink);font-size:22px}.program-copy{padding:92px 24px 38px}.program-copy h3{font-size:clamp(42px,11.5vw,62px);margin-bottom:24px}.program-copy>p:not(.card-kicker){font-size:19px}.program-copy a{margin-top:30px;font-size:17px}.program-card figure{min-height:0;height:auto;aspect-ratio:16/10;border-left:0;border-top:3px solid var(--ink)}
  .collaboration{gap:55px}.collab-wheel{grid-template-columns:1fr;transform:none}.collab-item,.collab-item:nth-child(even){min-height:175px;border-radius:30px;transform:none}.collab-item:hover,.collab-item:nth-child(even):hover{transform:none}.collab-item strong{font-size:30px}
  .field-grid{grid-template-columns:1fr;margin-top:48px}.field-card{min-height:0;padding:32px;transform:none!important}.field-card h3{font-size:34px}.study-strip{margin-top:54px}.study-list span{font-size:15px;padding:11px 16px}
  .journey-grid{grid-template-columns:1fr}.journey-step figure{height:auto;aspect-ratio:4/5;border-radius:120px 120px 24px 24px}.journey-step:nth-child(even) figure{border-radius:24px 24px 120px 120px}.journey-step h3{font-size:31px;margin-bottom:26px}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:auto}.gallery-item,.gallery-item.wide,.gallery-item.tall{grid-column:auto;grid-row:auto;aspect-ratio:4/3}.gallery-item::after{opacity:1;transform:scale(.8)}
  .director{gap:60px}.director-photo{height:auto;aspect-ratio:3/4;max-height:none;border-radius:50% 50% 26px 26px;box-shadow:8px 8px 0 var(--ink)}.director-copy h2{font-size:clamp(45px,11.7vw,65px)}.director-copy>p:last-child{font-size:20px}
  .contact-card{padding:42px 24px}.contact-actions{display:grid}.contact-map{min-height:390px}.site-footer{grid-template-columns:1fr;padding:42px 22px}.footer-links{flex-wrap:wrap;gap:16px}.footer-brand strong{font-size:19px}.footer-brand small{font-size:13px}
}

@media (max-width:480px){
  :root{--pad:18px}
  .brand-copy strong{font-size:15px}.menu-toggle b{font-size:15px}.menu-lines{width:24px}
  .hero{padding-top:46px}.hero h1{font-size:clamp(46px,12vw,62px)}.hero-line{white-space:nowrap}.hero-lead{font-size:18px}.hero-actions{grid-template-columns:1fr}.hero-collage{min-height:410px;margin-top:50px}.hero-photo-main{inset:2% 1% 7% 2%}.hero-photo-small{width:45%;height:31%}.hero-badge{width:96px}.hero-badge span{font-size:30px}
  .program-copy h3{font-size:40px}.program-copy>p:not(.card-kicker){font-size:18px}.collab-item strong{font-size:27px}.contact-map{min-height:330px}
}

@media (hover:none){.tilt-card{transform:none!important}.program-card:hover,.field-card:hover{box-shadow:8px 8px 0 var(--ink)}.program-card:hover figure img,.journey-step:hover figure img,.gallery-item:hover img{transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee-track,.hero-photo-main,.hero-photo-small,.hero-badge,.orbit,.hero-eyebrow,.hero-line,.hero-lead,.hero-actions,.hero-collage{animation:none!important;opacity:1!important;transform:none!important}.reveal{opacity:1;transform:none;transition:none}*{transition:none!important}}


/* =========================================================
   V3 — desktop/mobile refinement and lightweight animation
   ========================================================= */
:root{--page-max:1680px}
main{overflow:clip}
.hero,.statement,.programs,.collaboration,.fields,.journey,.gallery,.director,.contact,.site-footer{
  width:100%;max-width:var(--page-max);margin-inline:auto
}
.site-header{max-width:none}
.hero-copy,.hero h1,.hero-line{min-width:0;max-width:100%}
.hero{
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  gap:clamp(36px,5vw,86px)
}
.hero h1{
  width:100%;
  font-size:clamp(64px,6.15vw,112px);
  line-height:.88;
  letter-spacing:-.065em
}
.hero-line{
  display:block;
  width:100%;
  max-width:100%;
  white-space:normal;
  overflow:visible
}
.hero-lead{max-width:660px}
.hero-collage{
  min-height:clamp(500px,48vw,720px);
  max-height:760px
}
.hero-spark{
  position:absolute;
  z-index:2;
  font-family:var(--display);
  color:var(--orange);
  line-height:1;
  pointer-events:none;
  animation:v3SparkFloat 4.8s ease-in-out infinite
}
.hero-spark-one{
  top:14%;left:47%;
  font-size:clamp(28px,3vw,54px);
  animation-delay:.25s
}
.hero-spark-two{
  right:3.5%;bottom:14%;
  font-size:clamp(22px,2.2vw,40px);
  color:var(--yellow);
  text-shadow:2px 2px 0 var(--ink);
  animation-delay:1.1s
}
.program-card{max-width:1500px;margin-inline:auto}
.program-card::before,.field-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 34%);
  opacity:0;
  transition:opacity .25s
}
.program-card:hover::before,.field-card:hover::before{opacity:1}
.program-card.is-visible figure img{
  animation:v3ImageReveal .9s cubic-bezier(.2,.8,.2,1) both
}
.program-copy a span,.button span{
  display:inline-block;
  animation:v3ArrowNudge 1.8s ease-in-out infinite
}
.field-card{position:relative;overflow:hidden}
.field-card.is-visible .field-icon{
  animation:v3IconBounce .7s .22s cubic-bezier(.2,.9,.2,1) both
}
.journey-step.is-visible figure{
  animation:v3SoftRise .8s cubic-bezier(.2,.8,.2,1) both
}
.gallery-item.is-visible{
  animation:v3GalleryPop .72s cubic-bezier(.2,.85,.2,1) both
}
.contact-card.is-visible{
  animation:v3ContactGlow 1.1s ease-out both
}

@keyframes v3SparkFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  50%{transform:translate3d(0,-14px,0) rotate(12deg) scale(1.08)}
}
@keyframes v3ImageReveal{
  from{opacity:.72;transform:scale(1.08)}
  to{opacity:1;transform:scale(1)}
}
@keyframes v3ArrowNudge{
  0%,65%,100%{transform:translate(0,0)}
  78%{transform:translate(5px,5px)}
}
@keyframes v3IconBounce{
  from{opacity:0;transform:translateY(16px) scale(.7) rotate(-12deg)}
  to{opacity:1;transform:none}
}
@keyframes v3SoftRise{
  from{opacity:.5;transform:translateY(24px) scale(.98)}
  to{opacity:1;transform:none}
}
@keyframes v3GalleryPop{
  from{opacity:0;transform:translateY(22px) scale(.965)}
  to{opacity:1;transform:none}
}
@keyframes v3ContactGlow{
  0%{box-shadow:9px 9px 0 var(--ink)}
  55%{box-shadow:15px 15px 0 var(--yellow)}
  100%{box-shadow:9px 9px 0 var(--ink)}
}

@media (min-width:821px) and (max-width:1180px){
  .hero h1{font-size:clamp(72px,9.7vw,112px)}
  .hero-collage{min-height:620px}
}

@media (max-width:1020px){
  .program-card{
    grid-template-columns:76px minmax(0,1fr);
    min-height:0
  }
  .program-card figure{
    grid-column:1/-1;
    border-left:0;
    border-top:3px solid var(--ink);
    min-height:0;
    aspect-ratio:16/9
  }
  .program-copy{padding:58px clamp(28px,5vw,60px)}
  .program-number{grid-row:1;border-right:3px solid currentColor}
  .field-grid{grid-template-columns:1fr}
}

@media (max-width:820px){
  :root{
    --pad:clamp(18px,5vw,26px);
    --header-h:72px
  }
  body{font-size:16px}
  .site-header{
    height:var(--header-h);
    padding:7px 12px;
    gap:10px
  }
  .brand{gap:8px;min-width:0;flex:1}
  .brand img{width:46px;height:46px;flex:0 0 46px}
  .brand-copy strong{
    font-size:14px;
    line-height:.92;
    letter-spacing:-.02em
  }
  .brand-copy small{display:none}
  .menu-toggle{
    display:flex;
    flex:0 0 auto;
    min-height:44px;
    padding:8px 13px;
    gap:9px;
    box-shadow:2px 2px 0 var(--ink)
  }
  .menu-toggle b{font-size:14px}
  .menu-lines{width:22px;gap:3px}
  .menu-lines i{height:2.5px}
  .site-nav{
    inset:calc(var(--header-h) + 8px) 12px auto 12px;
    max-height:calc(100svh - var(--header-h) - 24px);
    overflow:auto
  }
  .section-pad{padding-block:clamp(64px,16vw,90px)}
  .hero{
    display:grid;
    grid-template-columns:1fr;
    min-height:auto;
    padding-top:34px;
    padding-bottom:62px;
    gap:0
  }
  .hero-copy{width:100%;max-width:100%}
  .hero-eyebrow{
    margin-bottom:18px;
    font-size:11px;
    line-height:1.35;
    letter-spacing:.11em
  }
  .hero h1{
    width:100%;
    font-size:clamp(47px,12.8vw,68px);
    line-height:.91;
    letter-spacing:-.055em
  }
  .hero-line{
    display:block;
    width:100%;
    max-width:100%;
    white-space:normal;
    overflow:visible
  }
  .hero-lead{
    max-width:34ch;
    margin-top:24px;
    font-size:clamp(17px,4.8vw,20px);
    line-height:1.42
  }
  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:27px
  }
  .button{
    width:100%;
    min-height:52px;
    padding:12px 18px;
    font-size:16px
  }
  .hero-collage{
    width:100%;
    min-height:clamp(360px,90vw,480px);
    margin-top:44px
  }
  .hero-photo-main{
    inset:3% 3% 8% 3%;
    border-radius:42% 42% 22px 22px;
    box-shadow:7px 7px 0 var(--ink)
  }
  .hero-photo-small{
    width:43%;
    height:30%;
    right:0;
    bottom:1%;
    box-shadow:5px 5px 0 var(--yellow)
  }
  .hero-badge{
    left:0;
    top:0;
    width:92px;
    box-shadow:4px 4px 0 var(--orange)
  }
  .hero-badge span{font-size:29px}
  .hero-badge small{font-size:8px}
  .hero-spark-one{
    top:48%;
    left:auto;
    right:3%;
    font-size:28px
  }
  .hero-spark-two{display:none}
  .orbit-one{width:80%;left:7%}
  .orbit-two{width:42%}
  .display{
    font-size:clamp(39px,10.9vw,59px);
    line-height:.97;
    letter-spacing:-.045em
  }
  .statement-grid{gap:28px}
  .statement-copy p{font-size:18px}
  .program-card{
    grid-template-columns:1fr;
    min-height:0;
    margin-top:22px;
    border-radius:24px;
    box-shadow:6px 6px 0 var(--ink);
    overflow:hidden;
    transform:none!important
  }
  .program-number{
    position:absolute;
    top:13px;
    left:13px;
    width:52px;
    height:52px;
    padding:0;
    display:grid;
    place-items:center;
    border:3px solid var(--ink);
    border-radius:50%;
    background:var(--yellow);
    color:var(--ink);
    font-size:20px;
    z-index:3
  }
  .program-copy{padding:82px 21px 32px}
  .card-kicker{
    margin-bottom:19px;
    font-size:11px;
    line-height:1.4
  }
  .program-copy h3{
    margin-bottom:20px;
    font-size:clamp(36px,10.6vw,48px);
    line-height:.98
  }
  .program-copy>p:not(.card-kicker){
    font-size:17px;
    line-height:1.48
  }
  .program-copy a{
    margin-top:25px;
    font-size:16px
  }
  .program-card figure{
    grid-column:auto;
    min-height:0;
    aspect-ratio:4/3;
    border-left:0;
    border-top:3px solid var(--ink)
  }
  .program-yellow figure img{object-position:50% 50%}
  .collaboration{gap:42px;padding-inline:var(--pad)}
  .collab-item,.collab-item:nth-child(even){
    min-height:145px;
    padding:24px;
    border-radius:24px;
    transform:none
  }
  .collab-item strong{
    font-size:25px;
    line-height:1.03
  }
  .fields-head>p:last-child{font-size:17px}
  .field-grid{
    grid-template-columns:1fr;
    gap:17px;
    margin-top:38px
  }
  .field-card{
    min-height:0;
    padding:26px;
    box-shadow:5px 5px 0 var(--ink);
    transform:none!important
  }
  .field-card h3{font-size:29px}
  .study-strip{margin-top:44px;padding-top:26px}
  .study-list{gap:9px}
  .study-list span{font-size:14px;padding:9px 13px}
  .journey-grid{grid-template-columns:1fr;gap:28px}
  .journey-step figure{
    height:auto;
    aspect-ratio:16/11;
    border-radius:72px 72px 20px 20px
  }
  .journey-step:nth-child(even) figure{
    border-radius:20px 20px 72px 72px
  }
  .journey-step h3{
    margin-bottom:18px;
    font-size:27px
  }
  .gallery{padding-inline:var(--pad)}
  .gallery-grid{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    gap:14px
  }
  .gallery-item,.gallery-item.wide,.gallery-item.tall{
    grid-column:auto;
    grid-row:auto;
    aspect-ratio:4/3;
    border-radius:20px
  }
  .director{grid-template-columns:1fr;gap:44px}
  .director-photo{
    width:100%;
    max-width:520px;
    height:auto;
    aspect-ratio:3/4;
    margin-inline:auto
  }
  .director-copy h2{
    font-size:clamp(38px,10.5vw,55px)
  }
  .director-copy>p:last-child{
    margin-top:25px;
    font-size:18px
  }
  .contact{
    grid-template-columns:1fr;
    gap:18px
  }
  .contact-card,.contact-map{
    border-radius:25px;
    box-shadow:6px 6px 0 var(--ink)
  }
  .contact-card{padding:36px 22px}
  .contact-card>p:not(.eyebrow){font-size:17px}
  .contact-actions{display:grid}
  .contact-map{min-height:320px}
  .site-footer{
    grid-template-columns:1fr;
    padding:34px 18px
  }
  .footer-brand img{width:54px;height:54px}
  .footer-links{font-size:14px}
}

@media (max-width:420px){
  .hero h1{font-size:clamp(43px,12.2vw,53px)}
  .hero-lead{font-size:17px}
  .brand-copy strong{font-size:13px}
  .menu-toggle{padding-inline:11px}
  .menu-toggle b{font-size:13px}
  .hero-collage{min-height:350px}
  .program-copy h3{font-size:36px}
}

@media (hover:none){
  .program-card::before,.field-card::before{display:none}
  .program-card.is-visible,.field-card.is-visible{
    animation:v3MobileCardIn .68s cubic-bezier(.18,.85,.25,1) both
  }
  .button:active,.menu-toggle:active{transform:scale(.97)}
}
@keyframes v3MobileCardIn{
  from{opacity:0;transform:translateY(25px) scale(.98)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .hero-spark,
  .program-card.is-visible figure img,
  .program-copy a span,
  .button span,
  .field-card.is-visible .field-icon,
  .journey-step.is-visible figure,
  .gallery-item.is-visible,
  .contact-card.is-visible{
    animation:none!important
  }
}


/* V4 — gallery supplied by the user */
.departure-gallery .gallery-item img{object-position:center}
.departure-gallery .gallery-item:nth-child(1) img{object-position:center 42%}
.departure-gallery .gallery-item:nth-child(2) img{object-position:center 48%}
.departure-gallery .gallery-item:nth-child(3) img{object-position:center 45%}
.departure-gallery .gallery-item:nth-child(4) img{object-position:center 48%}
.departure-gallery .gallery-item:nth-child(5) img{object-position:center 48%}
.program-yellow figure img{object-position:center 48%}

@media (max-width:820px){
  .departure-gallery{gap:18px}
  .departure-gallery .gallery-item,
  .departure-gallery .gallery-item.wide,
  .departure-gallery .gallery-item.tall{
    aspect-ratio:4/3;
    min-height:0;
    border:2px solid rgba(255,255,255,.08)
  }
  .program-yellow figure{aspect-ratio:16/9}
}


/* =========================================================
   V5 — text fitting and four-language selector
   ========================================================= */
.language-switcher{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:#fff;
  box-shadow:3px 3px 0 var(--ink);
}
.language-button{
  min-width:40px;
  min-height:34px;
  padding:5px 8px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  font-family:var(--body);
  font-size:12px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
}
.language-button:hover,
.language-button:focus-visible{background:var(--cream)}
.language-button.is-active{
  background:var(--orange);
  color:#fff;
}
.language-button:active{transform:scale(.94)}

/* Keep all four collaboration labels inside their shapes. */
.collab-wheel{
  align-items:stretch;
}
.collab-item{
  min-width:0;
  min-height:238px;
  padding:30px 30px 34px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  align-items:start;
  overflow:hidden;
}
.collab-item span{
  position:relative;
  z-index:1;
  line-height:1;
}
.collab-item strong{
  position:relative;
  z-index:1;
  align-self:center;
  width:100%;
  max-width:100%;
  margin:0;
  font-size:clamp(22px,1.7vw,31px);
  line-height:1.04;
  letter-spacing:-.035em;
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

/* The contact title previously exceeded its orange box. */
.contact-card{
  min-width:0;
  padding:clamp(42px,4.8vw,76px);
}
.contact-card .display{
  width:100%;
  max-width:100%;
  font-size:clamp(43px,4.6vw,76px);
  line-height:.96;
  letter-spacing:-.045em;
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
}
.contact-card>p:not(.eyebrow){
  max-width:720px;
}

/* Chinese pages use native system CJK fonts for clearer rendering. */
html[data-language="tw"] body,
html[data-language="cn"] body{
  font-family:"Noto Sans TC","Noto Sans SC","PingFang TC","PingFang SC",
              "Microsoft JhengHei","Microsoft YaHei",system-ui,sans-serif;
}
html[data-language="tw"] .display,
html[data-language="tw"] h1,
html[data-language="tw"] h2,
html[data-language="tw"] h3,
html[data-language="tw"] .collab-item strong,
html[data-language="tw"] .brand-copy strong,
html[data-language="cn"] .display,
html[data-language="cn"] h1,
html[data-language="cn"] h2,
html[data-language="cn"] h3,
html[data-language="cn"] .collab-item strong,
html[data-language="cn"] .brand-copy strong{
  font-family:"Noto Sans TC","Noto Sans SC","PingFang TC","PingFang SC",
              "Microsoft JhengHei","Microsoft YaHei",system-ui,sans-serif;
  font-weight:900;
  letter-spacing:-.035em;
}
html[data-language="en"] .collab-item strong{
  font-size:clamp(19px,1.43vw,27px);
  line-height:1.08;
}
html[data-language="en"] .contact-card .display{
  font-size:clamp(40px,4vw,67px);
}
html[data-language="tw"] .collab-item strong,
html[data-language="cn"] .collab-item strong{
  font-size:clamp(25px,1.8vw,34px);
  line-height:1.18;
}
html[data-language="tw"] .contact-card .display,
html[data-language="cn"] .contact-card .display{
  font-size:clamp(45px,4.25vw,70px);
  line-height:1.12;
}

@media (max-width:1180px) and (min-width:821px){
  .site-nav{gap:13px;font-size:14px}
  .language-button{min-width:35px;padding-inline:6px}
  .collaboration{
    grid-template-columns:minmax(0,.74fr) minmax(480px,1.26fr);
    gap:45px;
  }
  .collab-item{min-height:220px;padding:27px}
  .collab-item strong{font-size:clamp(20px,2.05vw,28px)}
  html[data-language="en"] .collab-item strong{font-size:clamp(18px,1.7vw,23px)}
}

@media (max-width:820px){
  .site-nav{
    padding-bottom:20px;
  }
  .language-switcher{
    width:100%;
    justify-content:space-between;
    margin-top:8px;
    padding:6px;
    box-shadow:4px 4px 0 var(--ink);
  }
  .language-button{
    flex:1;
    min-height:42px;
    font-size:13px;
  }
  .collab-item,
  .collab-item:nth-child(even){
    min-height:160px;
    padding:23px 24px 26px;
    display:grid;
    grid-template-rows:auto 1fr;
  }
  .collab-item strong{
    align-self:center;
    font-size:clamp(25px,7.4vw,31px);
    line-height:1.03;
  }
  html[data-language="en"] .collab-item strong{
    font-size:clamp(21px,6.1vw,27px);
    line-height:1.06;
  }
  html[data-language="tw"] .collab-item strong,
  html[data-language="cn"] .collab-item strong{
    font-size:clamp(26px,7.5vw,32px);
    line-height:1.16;
  }
  .contact-card .display{
    font-size:clamp(39px,10.4vw,52px);
    line-height:.98;
  }
  html[data-language="en"] .contact-card .display{
    font-size:clamp(36px,9.4vw,47px);
  }
  html[data-language="tw"] .contact-card .display,
  html[data-language="cn"] .contact-card .display{
    font-size:clamp(39px,10vw,50px);
    line-height:1.12;
  }
}

@media (max-width:420px){
  .collab-item strong{font-size:25px}
  html[data-language="en"] .collab-item strong{font-size:21px}
  .contact-card .display{font-size:38px}
  html[data-language="en"] .contact-card .display{font-size:34px}
}


/* =========================================================
   V6 — foundation/director names and visible collaboration numbers
   ========================================================= */
.brand-copy strong{
  display:block;
  max-width:190px;
  line-height:.9;
  text-wrap:balance;
}
html[data-language="en"] .brand-copy strong{
  font-size:clamp(17px,1.42vw,23px);
  line-height:.94;
}
html[data-language="tw"] .brand-copy strong,
html[data-language="cn"] .brand-copy strong{
  font-size:clamp(19px,1.55vw,26px);
  line-height:1.08;
  white-space:nowrap;
}

/* Show every sequence number as a clear badge, including 01 and 03. */
.collab-item{
  position:relative;
  overflow:visible;
  grid-template-rows:1fr;
  padding-top:48px;
}
.collab-item span{
  position:absolute;
  top:20px;
  left:24px;
  width:42px;
  height:42px;
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  border:2px solid var(--ink);
  border-radius:50%;
  background:var(--yellow);
  color:var(--ink);
  font-family:var(--display);
  font-size:15px;
  line-height:1;
  box-shadow:3px 3px 0 var(--ink);
  z-index:5;
}
.collab-item strong{
  align-self:center;
  padding:10px 8px 0;
}

/* Director's Mandarin name is shorter, so keep it visually balanced. */
html[data-language="tw"] .director-copy h2,
html[data-language="cn"] .director-copy h2{
  font-size:clamp(58px,6.4vw,105px);
  line-height:1.05;
  letter-spacing:-.035em;
}
html[data-language="tw"] .director-copy h2 span,
html[data-language="cn"] .director-copy h2 span{
  font-family:var(--body);
  font-size:.42em;
  letter-spacing:.02em;
}

/* Footer foundation name follows the selected language. */
.footer-brand strong{
  display:block;
  max-width:260px;
}
html[data-language="tw"] .footer-brand strong,
html[data-language="cn"] .footer-brand strong{
  font-family:"Noto Sans TC","Noto Sans SC","PingFang TC","PingFang SC",
              "Microsoft JhengHei","Microsoft YaHei",system-ui,sans-serif;
  font-weight:900;
}

@media (max-width:820px){
  .brand-copy strong{max-width:150px}
  html[data-language="en"] .brand-copy strong{
    font-size:12px;
    line-height:1;
  }
  html[data-language="tw"] .brand-copy strong,
  html[data-language="cn"] .brand-copy strong{
    font-size:14px;
    line-height:1.05;
  }
  .collab-item,
  .collab-item:nth-child(even){
    padding-top:53px;
  }
  .collab-item span{
    top:16px;
    left:18px;
    width:38px;
    height:38px;
    font-size:13px;
  }
  html[data-language="tw"] .director-copy h2,
  html[data-language="cn"] .director-copy h2{
    font-size:clamp(48px,13vw,66px);
  }
}


/* =========================================================
   V7 — localized academic degree titles
   ========================================================= */
html[data-language="en"] .director-copy h2{
  font-size:clamp(47px,5.25vw,88px);
  line-height:.98;
}
html[data-language="en"] .director-copy h2 span{
  display:block;
  margin-top:18px;
  font-family:var(--body);
  font-size:clamp(17px,1.35vw,23px);
  font-weight:800;
  line-height:1.35;
  letter-spacing:0;
}
html[data-language="tw"] .director-copy h2 span,
html[data-language="cn"] .director-copy h2 span{
  display:block;
  margin-top:18px;
  font-size:.38em;
  line-height:1.42;
}

@media (max-width:820px){
  html[data-language="en"] .director-copy h2{
    font-size:clamp(38px,10.4vw,50px);
  }
  html[data-language="en"] .director-copy h2 span{
    margin-top:14px;
    font-size:15px;
    line-height:1.35;
  }
  html[data-language="tw"] .director-copy h2 span,
  html[data-language="cn"] .director-copy h2 span{
    margin-top:14px;
    font-size:.34em;
  }
}


/* =========================================================
   V8 — visible and reliable animation on mobile/iOS
   ========================================================= */
@media (max-width:820px){
  html.js-ready.motion-enabled .site-header{
    animation:v8HeaderDrop .62s cubic-bezier(.2,.8,.2,1) both;
  }

  html.js-ready.motion-enabled .hero-eyebrow{
    opacity:0;
    animation:v8FadeUp .6s .08s cubic-bezier(.2,.8,.2,1) both;
  }
  html.js-ready.motion-enabled .hero-line{
    opacity:0;
    animation:v8TitleIn .72s cubic-bezier(.18,.86,.22,1) both;
  }
  html.js-ready.motion-enabled .hero-line:nth-child(1){animation-delay:.14s}
  html.js-ready.motion-enabled .hero-line:nth-child(2){animation-delay:.24s}
  html.js-ready.motion-enabled .hero-line:nth-child(3){animation-delay:.34s}
  html.js-ready.motion-enabled .hero-lead{
    opacity:0;
    animation:v8FadeUp .68s .44s cubic-bezier(.2,.8,.2,1) both;
  }
  html.js-ready.motion-enabled .hero-actions{
    opacity:0;
    animation:v8FadeUp .68s .54s cubic-bezier(.2,.8,.2,1) both;
  }
  html.js-ready.motion-enabled .hero-collage{
    opacity:0;
    animation:v8CollageIn .9s .30s cubic-bezier(.18,.86,.22,1) both;
  }

  /* Continuous, subtle movement so the mobile page does not feel static. */
  html.js-ready.motion-enabled .hero-photo-main{
    animation:v8MainFloat 6.5s 1.2s ease-in-out infinite;
  }
  html.js-ready.motion-enabled .hero-photo-small{
    animation:v8SmallFloat 5.4s 1.35s ease-in-out infinite;
  }
  html.js-ready.motion-enabled .hero-badge{
    animation:v8BadgePulse 4s 1.2s ease-in-out infinite;
  }
  html.js-ready.motion-enabled .orbit-one{
    animation:spin 18s linear infinite;
  }
  html.js-ready.motion-enabled .orbit-two{
    animation:spinReverse 14s linear infinite;
  }
  html.js-ready.motion-enabled .marquee-track{
    animation-duration:20s;
  }

  /* Mobile scroll reveals: keyframes are clearer than the earlier transitions. */
  html.js-ready.motion-enabled .reveal{
    opacity:0;
    transform:translate3d(0,38px,0) scale(.975);
    transition:none!important;
    will-change:opacity,transform;
  }
  html.js-ready.motion-enabled .reveal.from-left,
  html.js-ready.motion-enabled .reveal.from-right{
    transform:translate3d(0,38px,0) scale(.975);
  }
  html.js-ready.motion-enabled .reveal.is-visible{
    animation:v8MobileReveal .72s var(--reveal-delay,0ms) cubic-bezier(.18,.86,.22,1) both;
  }

  html.js-ready.motion-enabled .program-card.is-visible figure img{
    animation:v8PhotoZoom .9s calc(var(--reveal-delay,0ms) + 120ms) cubic-bezier(.2,.8,.2,1) both;
  }
  html.js-ready.motion-enabled .collab-item.is-visible{
    animation:v8ShapePop .72s var(--reveal-delay,0ms) cubic-bezier(.18,.9,.25,1) both;
  }
  html.js-ready.motion-enabled .field-card.is-visible .field-icon{
    animation:v8IconPop .72s calc(var(--reveal-delay,0ms) + 120ms) cubic-bezier(.18,.9,.25,1) both;
  }
  html.js-ready.motion-enabled .journey-step.is-visible figure,
  html.js-ready.motion-enabled .gallery-item.is-visible{
    animation:v8PhotoReveal .78s calc(var(--reveal-delay,0ms) + 80ms) cubic-bezier(.18,.86,.22,1) both;
  }

  .button.is-pressed,
  .language-button.is-pressed,
  .menu-toggle.is-pressed{
    transform:scale(.96)!important;
  }

  .site-nav.open{
    animation:v8MenuOpen .32s cubic-bezier(.2,.8,.2,1) both;
  }

  /* Improve rendering and scrolling performance on phones. */
  .statement,.programs,.collaboration,.fields,.journey,.gallery,.director,.contact{
    content-visibility:auto;
    contain-intrinsic-size:1px 900px;
  }

  html[data-language="en"] .program-yellow .card-kicker{
    max-width:36ch;
    font-size:10px;
    line-height:1.35;
  }
}

@keyframes v8HeaderDrop{
  from{opacity:0;transform:translate3d(0,-20px,0)}
  to{opacity:1;transform:none}
}
@keyframes v8FadeUp{
  from{opacity:0;transform:translate3d(0,24px,0)}
  to{opacity:1;transform:none}
}
@keyframes v8TitleIn{
  from{opacity:0;transform:translate3d(-22px,20px,0) scale(.96)}
  to{opacity:1;transform:none}
}
@keyframes v8CollageIn{
  from{opacity:0;transform:translate3d(0,44px,0) scale(.94)}
  to{opacity:1;transform:none}
}
@keyframes v8MobileReveal{
  from{opacity:0;transform:translate3d(0,38px,0) scale(.975)}
  to{opacity:1;transform:none}
}
@keyframes v8PhotoZoom{
  from{opacity:.55;transform:scale(1.12)}
  to{opacity:1;transform:scale(1)}
}
@keyframes v8ShapePop{
  0%{opacity:0;transform:translate3d(0,34px,0) scale(.92) rotate(-1.5deg)}
  72%{opacity:1;transform:translate3d(0,-4px,0) scale(1.012) rotate(.4deg)}
  100%{opacity:1;transform:none}
}
@keyframes v8IconPop{
  from{opacity:0;transform:translate3d(0,18px,0) scale(.65) rotate(-12deg)}
  to{opacity:1;transform:none}
}
@keyframes v8PhotoReveal{
  from{opacity:0;transform:translate3d(0,22px,0) scale(.94)}
  to{opacity:1;transform:none}
}
@keyframes v8MenuOpen{
  from{opacity:0;transform:translate3d(0,-12px,0) scale(.98)}
  to{opacity:1;transform:none}
}
@keyframes v8MainFloat{
  0%,100%{transform:rotate(1.2deg) translate3d(0,0,0)}
  50%{transform:rotate(.2deg) translate3d(0,-10px,0)}
}
@keyframes v8SmallFloat{
  0%,100%{transform:rotate(-4deg) translate3d(0,0,0)}
  50%{transform:rotate(-2deg) translate3d(0,9px,0)}
}
@keyframes v8BadgePulse{
  0%,100%{transform:rotate(-7deg) scale(1)}
  50%{transform:rotate(-3deg) scale(1.055)}
}

@media (prefers-reduced-motion:reduce){
  html.js-ready .reveal,
  html.js-ready .hero-eyebrow,
  html.js-ready .hero-line,
  html.js-ready .hero-lead,
  html.js-ready .hero-actions,
  html.js-ready .hero-collage{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
}


/* V9: lightweight animations for Chrome, Safari, Firefox, Samsung Internet and in-app browsers. */
html.motion-lite .site-header{animation:v9Header .5s cubic-bezier(.2,.8,.2,1) both}
html.motion-lite .hero-eyebrow{animation:v9Up .5s .05s cubic-bezier(.2,.8,.2,1) both}
html.motion-lite .hero-line{animation:v9Title .62s cubic-bezier(.18,.86,.22,1) both}
html.motion-lite .hero-line:nth-child(1){animation-delay:.10s}
html.motion-lite .hero-line:nth-child(2){animation-delay:.18s}
html.motion-lite .hero-line:nth-child(3){animation-delay:.26s}
html.motion-lite .hero-lead{animation:v9Up .55s .31s cubic-bezier(.2,.8,.2,1) both}
html.motion-lite .hero-actions{animation:v9Up .55s .38s cubic-bezier(.2,.8,.2,1) both}
html.motion-lite .hero-collage{animation:v9Collage .72s .17s cubic-bezier(.18,.86,.22,1) both}
html.motion-lite .hero-photo-main{animation:v9FloatMain 7s 1s ease-in-out infinite}
html.motion-lite .hero-photo-small{animation:v9FloatSmall 6s 1.1s ease-in-out infinite}
html.motion-lite .hero-badge{animation:v9FloatBadge 5s 1s ease-in-out infinite}
html.motion-lite .reveal{opacity:0;transform:translate3d(0,26px,0) scale(.986);transition:none!important;will-change:opacity,transform}
html.motion-lite .reveal.is-visible{animation:v9Reveal .6s var(--reveal-delay,0ms) cubic-bezier(.18,.86,.22,1) both}
html.motion-lite .program-card.is-visible figure img,html.motion-lite .gallery-item.is-visible img{animation:v9Image .7s ease-out both}
html.motion-lite .field-card.is-visible .field-icon{animation:v9Icon .55s .06s cubic-bezier(.18,.9,.25,1) both}
html.motion-lite .collab-item.is-visible{animation:v9Pop .6s cubic-bezier(.18,.9,.25,1) both}
html.motion-lite .button span,html.motion-lite .program-copy a span{animation:v9Arrow 2.4s ease-in-out infinite}
.director-photo img{object-position:center 33%}
@media(max-width:820px){
 html.motion-lite .reveal{transform:translate3d(0,22px,0) scale(.99)}
 html.motion-lite .reveal.is-visible{animation-duration:.56s}
 .director-photo{aspect-ratio:4/5;max-width:430px}
 .director-photo img{object-position:center 28%}
}
@media(prefers-reduced-motion:reduce){
 html.motion-lite .hero-photo-main,html.motion-lite .hero-photo-small,html.motion-lite .hero-badge,html.motion-lite .button span,html.motion-lite .program-copy a span{animation:none!important}
 html.motion-lite .reveal.is-visible,html.motion-lite .site-header,html.motion-lite .hero-eyebrow,html.motion-lite .hero-line,html.motion-lite .hero-lead,html.motion-lite .hero-actions,html.motion-lite .hero-collage{animation-duration:.2s!important}
}
@keyframes v9Header{from{opacity:0;transform:translate3d(0,-14px,0)}to{opacity:1;transform:none}}
@keyframes v9Up{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes v9Title{from{opacity:0;transform:translate3d(-16px,14px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes v9Collage{from{opacity:0;transform:translate3d(0,28px,0) scale(.96)}to{opacity:1;transform:none}}
@keyframes v9Reveal{from{opacity:0;transform:translate3d(0,26px,0) scale(.986)}to{opacity:1;transform:none}}
@keyframes v9Image{from{opacity:.75;transform:scale(1.055)}to{opacity:1;transform:scale(1)}}
@keyframes v9Icon{from{opacity:0;transform:translate3d(0,12px,0) scale(.78) rotate(-7deg)}to{opacity:1;transform:none}}
@keyframes v9Pop{0%{opacity:0;transform:translate3d(0,22px,0) scale(.965)}75%{opacity:1;transform:translate3d(0,-2px,0) scale(1.004)}100%{opacity:1;transform:none}}
@keyframes v9FloatMain{0%,100%{transform:rotate(1deg) translate3d(0,0,0)}50%{transform:rotate(.25deg) translate3d(0,-7px,0)}}
@keyframes v9FloatSmall{0%,100%{transform:rotate(-3deg) translate3d(0,0,0)}50%{transform:rotate(-1.5deg) translate3d(0,6px,0)}}
@keyframes v9FloatBadge{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(-3deg) scale(1.03)}}
@keyframes v9Arrow{0%,72%,100%{transform:translate3d(0,0,0)}82%{transform:translate3d(4px,4px,0)}}


/* ===== styles-v25-additions.css ===== */

/* ============================================================
   V11 ADDITIONS ONLY
   The original V9 stylesheet remains the base design.
   Nothing from the original site is intentionally removed.
   ============================================================ */

/* --- Requested mobile text-fit fix for the ORIGINAL collaboration cards --- */
.collab-item,
.collab-item strong { min-width: 0; }

@media (max-width:820px){
  .collab-item,
  .collab-item:nth-child(even){
    overflow:hidden !important;
    padding-left:20px;
    padding-right:20px;
  }
  .collab-item strong{
    width:100%;
    max-width:100%;
    min-width:0;
    padding-left:0;
    padding-right:0;
    font-size:clamp(21px,6.25vw,27px) !important;
    line-height:1.07 !important;
    letter-spacing:-.04em;
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:normal;
    hyphens:auto;
    text-wrap:balance;
  }
}
@media (max-width:390px){
  .collab-item strong{
    font-size:clamp(19px,5.9vw,23px) !important;
  }
}

/* --- New industry internship module; visually follows V9 cards --- */
.industry-addon{
  margin-top:clamp(72px,9vw,130px);
  padding-top:clamp(58px,7vw,94px);
  border-top:3px solid var(--ink);
}
.industry-addon-head{max-width:1180px;margin-bottom:clamp(38px,5vw,64px)}
.industry-display{font-size:clamp(48px,6.2vw,98px)}
.industry-addon-grid{
  display:grid;
  grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,74px);
  align-items:stretch;
}
.industry-cover{
  min-height:580px;
  overflow:hidden;
  border:3px solid var(--ink);
  border-radius:48% 48% 28px 28px;
  box-shadow:10px 10px 0 var(--orange);
}
.industry-cover img{width:100%;height:100%;object-fit:cover}
.industry-info{
  padding:clamp(32px,4.4vw,64px);
  background:#fff;
  border:3px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:10px 10px 0 var(--yellow);
}
.industry-lead{
  margin:0;
  font-size:clamp(20px,1.55vw,26px);
  line-height:1.43;
}
.industry-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:34px 0;
}
.industry-facts article{
  min-width:0;
  padding:18px;
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:22px;
  box-shadow:4px 4px 0 var(--ink);
}
.industry-facts strong,.industry-facts span{display:block}
.industry-facts strong{
  font-family:var(--display);
  font-size:clamp(21px,2vw,31px);
  line-height:1;
  overflow-wrap:anywhere;
}
.industry-facts span{
  margin-top:8px;
  font-size:14px;
  font-weight:900;
  color:var(--muted);
}
.industry-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;
  margin-bottom:32px;
}
.industry-detail-grid h3{
  margin:0 0 12px;
  font-family:var(--display);
  font-size:24px;
  line-height:1.05;
}
.industry-detail-grid ul{
  margin:0;
  padding-left:22px;
}
.industry-detail-grid li{margin:8px 0;line-height:1.45}

/* --- New 3+4 facility gallery --- */
.facility-addon{
  margin-top:clamp(72px,9vw,120px);
  padding-top:clamp(58px,7vw,90px);
  border-top:3px solid var(--ink);
}
.facility-addon-head{max-width:1120px;margin-bottom:46px}
.facility-display{font-size:clamp(48px,6.3vw,100px)}
.facility-addon-head>p:last-child{
  max-width:900px;
  margin-top:28px;
  font-size:clamp(19px,1.45vw,24px);
}
.facility-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:20px;
}
.facility-card{
  grid-column:span 4;
  min-width:0;
  margin:0;
  overflow:hidden;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:30px;
  box-shadow:8px 8px 0 var(--yellow);
  transition:transform .28s,box-shadow .28s;
}
.facility-card.facility-wide{grid-column:span 8}
.facility-card img{
  width:100%;
  height:clamp(250px,25vw,390px);
  object-fit:cover;
  border-bottom:3px solid var(--ink);
  transition:transform .75s cubic-bezier(.2,.75,.2,1);
}
.facility-card figcaption{
  display:grid;
  gap:7px;
  padding:20px 22px 23px;
}
.facility-card figcaption strong{
  font-family:var(--display);
  font-size:clamp(22px,2.1vw,34px);
  line-height:1;
}
.facility-card figcaption span{
  font-size:16px;
  line-height:1.45;
}
.facility-card:hover{
  transform:translate(-3px,-3px);
  box-shadow:12px 14px 0 var(--orange);
}
.facility-card:hover img{transform:scale(1.045)}

/* New cards still use the original V9 reveal system. */
html.motion-lite .industry-cover.is-visible img,
html.motion-lite .facility-card.is-visible img{
  animation:v9Image .7s ease-out both;
}

@media (max-width:1000px){
  .industry-addon-grid{grid-template-columns:1fr}
  .industry-cover{min-height:0;aspect-ratio:5/3;border-radius:34px}
  .facility-card,.facility-card.facility-wide{grid-column:span 6}
}
@media (max-width:820px){
  .industry-addon{margin-top:70px;padding-top:60px}
  .industry-display,.facility-display{font-size:clamp(42px,11.5vw,62px)}
  .industry-addon-grid{gap:24px}
  .industry-cover{aspect-ratio:1/1;border-radius:28px;box-shadow:7px 7px 0 var(--orange)}
  .industry-info{padding:26px 22px;border-radius:28px;box-shadow:7px 7px 0 var(--yellow)}
  .industry-lead{font-size:18px}
  .industry-facts{gap:10px;margin:27px 0}
  .industry-facts article{padding:14px;border-radius:18px}
  .industry-facts strong{font-size:clamp(18px,5.7vw,24px)}
  .industry-facts span{font-size:12px}
  .industry-detail-grid{grid-template-columns:1fr;gap:18px}
  .industry-detail-grid h3{font-size:22px}
  .facility-addon{margin-top:68px;padding-top:58px}
  .facility-grid{grid-template-columns:1fr;gap:17px}
  .facility-card,.facility-card.facility-wide{grid-column:auto}
  .facility-card{border-radius:25px;box-shadow:7px 7px 0 var(--yellow)}
  .facility-card img{height:auto;aspect-ratio:4/3}
}
@media (max-width:460px){
  .industry-facts{grid-template-columns:1fr}
  .industry-cover{aspect-ratio:4/3}
}

/* Keep motion light on phones; do not disable original animation. */
@media (hover:none){
  .facility-card:hover{transform:none;box-shadow:8px 8px 0 var(--yellow)}
  .facility-card:hover img{transform:none}
}


/* ============================================================
   V12 ORGANIZATION UPDATE
   - Program 01 now shows Hotel + Industry with two photos.
   - Detailed/private industry panel from V11 is removed from HTML.
   - Internship positions now have photos and are grouped by pathway.
   - Taiwan industry is added to collaboration.
   ============================================================ */

/* Program 01: two-photo panel while preserving original program-card geometry */
.program-card-dual .program-dual-photo{
  display:grid;
  grid-template-rows:1fr 1fr;
  height:100%;
  min-height:430px;
  margin:0;
  overflow:hidden;
  position:relative;
}
.program-card-dual .program-photo-half{
  position:relative;
  min-height:0;
  overflow:hidden;
}
.program-card-dual .program-photo-half + .program-photo-half{
  border-top:3px solid var(--ink);
}
.program-card-dual .program-photo-half img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.75,.2,1);
}
.program-card-dual:hover .program-photo-half img{transform:scale(1.035)}
.program-card-dual .program-photo-half span{
  position:absolute;
  left:16px;
  bottom:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--yellow);
  color:var(--ink);
  font-family:var(--display);
  font-size:11px;
  letter-spacing:.05em;
  box-shadow:3px 3px 0 var(--ink);
}
.program-mini-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 4px;
}
.program-mini-pills span{
  padding:6px 10px;
  border:2px solid currentColor;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  line-height:1.1;
}

/* Collaboration item 05 */
.collab-item.collab-industry{
  grid-column:1/-1;
  justify-self:center;
  width:min(100%, 430px);
}

/* Internship position organization */
.internship-position-block{
  margin-top:clamp(38px,5vw,62px);
}
.internship-position-block + .internship-position-block{
  margin-top:clamp(58px,7vw,88px);
  padding-top:clamp(42px,5vw,60px);
  border-top:2px solid var(--ink);
}
.internship-position-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.7fr);
  gap:28px;
  align-items:end;
  margin-bottom:24px;
}
.internship-position-head h3{
  margin:7px 0 0;
  font-family:var(--display);
  font-size:clamp(34px,4.5vw,64px);
  line-height:.98;
}
.internship-position-head > p{
  margin:0;
  font-size:17px;
  line-height:1.5;
}

.field-grid-photo .field-card-photo{
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.field-card-photo figure{
  margin:0;
  height:220px;
  overflow:hidden;
  border-bottom:3px solid var(--ink);
  background:#ddd;
}
.field-card-photo figure img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .65s cubic-bezier(.2,.75,.2,1);
}
.field-card-photo:hover figure img{transform:scale(1.045)}
.field-card-copy{
  padding:22px 22px 25px;
}
.field-card-copy .field-icon{margin-bottom:18px}
.field-card-copy h3{margin-top:0}

.industry-position-card{
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);
  padding:0;
  overflow:hidden;
  min-height:380px;
}
.industry-position-card > figure{
  margin:0;
  min-height:380px;
  border-right:3px solid var(--ink);
  overflow:hidden;
}
.industry-position-card > figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.75,.2,1);
}
.industry-position-card:hover > figure img{transform:scale(1.035)}
.industry-position-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(28px,4vw,54px);
}
.industry-position-tag{
  align-self:flex-start;
  padding:7px 10px;
  margin-bottom:16px;
  background:var(--yellow);
  border:2px solid var(--ink);
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
}
.industry-position-copy h3{
  margin:0;
  font-family:var(--display);
  font-size:clamp(36px,4.7vw,70px);
  line-height:.95;
}
.industry-position-copy p{
  margin:20px 0 0;
  max-width:700px;
  font-size:17px;
  line-height:1.52;
}
.industry-position-pills{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:24px;
}
.industry-position-pills span{
  padding:8px 11px;
  background:var(--orange);
  border:2px solid var(--ink);
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  box-shadow:2px 2px 0 var(--ink);
}

@media(max-width:900px){
  .internship-position-head{grid-template-columns:1fr;align-items:start}
  .industry-position-card{grid-template-columns:1fr}
  .industry-position-card > figure{
    min-height:0;
    aspect-ratio:16/9;
    border-right:0;
    border-bottom:3px solid var(--ink);
  }
}
@media(max-width:820px){
  .program-card-dual .program-dual-photo{
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr;
    min-height:260px;
  }
  .program-card-dual .program-photo-half + .program-photo-half{
    border-top:0;
    border-left:3px solid var(--ink);
  }
  .program-card-dual .program-photo-half span{
    left:10px;
    bottom:10px;
    font-size:10px;
    padding:6px 8px;
  }
  .collab-item.collab-industry{grid-column:auto;width:auto}
  .internship-position-head h3{font-size:clamp(32px,9vw,48px)}
  .field-card-photo figure{height:auto;aspect-ratio:16/10}
  .industry-position-copy{padding:27px 22px 30px}
  .industry-position-copy h3{font-size:clamp(34px,10vw,52px)}
}
@media(max-width:520px){
  .program-card-dual .program-dual-photo{min-height:220px}
  .industry-position-card > figure{aspect-ratio:4/3}
}


/* ============================================================
   V13: Partner lists, hotel star ratings, new industry photo
   ============================================================ */
.partner-showcase{
  margin-top:clamp(70px,9vw,118px);
  padding-top:clamp(56px,7vw,88px);
  border-top:3px solid var(--ink);
}
.partner-showcase-head{
  max-width:1040px;
  margin-bottom:clamp(30px,4vw,52px);
}
.partner-showcase-head h3{
  margin:8px 0 18px;
  max-width:940px;
  font-family:var(--display);
  font-size:clamp(44px,5.5vw,84px);
  line-height:.96;
  letter-spacing:-.045em;
}
.partner-showcase-head>p:last-child{
  max-width:840px;
  margin:0;
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.5;
}
.partner-columns{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
  gap:22px;
  align-items:start;
}
.partner-panel{
  min-width:0;
  overflow:hidden;
  padding:clamp(24px,3.2vw,40px);
  border:3px solid var(--ink);
  border-radius:32px;
  box-shadow:8px 8px 0 var(--yellow);
}
.partner-panel-hotel{background:#fff}
.partner-panel-industry{background:var(--orange)}
.partner-panel-title{
  display:flex;
  gap:16px;
  align-items:center;
  margin-bottom:24px;
}
.partner-panel-title .eyebrow{margin:0 0 5px}
.partner-panel-title h4{
  margin:0;
  font-family:var(--display);
  font-size:clamp(28px,3vw,42px);
  line-height:1;
}
.partner-symbol{
  flex:0 0 auto;
  width:54px;height:54px;
  display:grid;place-items:center;
  border:3px solid var(--ink);
  border-radius:50%;
  background:var(--yellow);
  font-size:26px;
  line-height:1;
}
.partner-symbol-industry{background:#fff}
.hotel-partner-list{
  display:grid;
  gap:10px;
}
.hotel-partner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  min-width:0;
  padding:14px 16px;
  border:2px solid var(--ink);
  border-radius:17px;
  background:var(--cream);
}
.hotel-partner>div{min-width:0}
.hotel-partner strong,
.hotel-partner span{display:block}
.hotel-partner strong{
  font-family:var(--display);
  font-size:clamp(17px,1.45vw,22px);
  line-height:1.05;
  overflow-wrap:anywhere;
}
.hotel-partner>div>span{
  margin-top:5px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.star-rating{
  white-space:nowrap;
  font-size:clamp(16px,1.5vw,22px);
  letter-spacing:1px;
  color:#e39b00;
  text-shadow:1px 1px 0 var(--ink);
}
.partner-note{
  margin:18px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
  font-weight:700;
}
.partner-industry-photo{
  margin:0 0 20px;
  overflow:hidden;
  border:3px solid var(--ink);
  border-radius:24px;
  background:#fff;
}
.partner-industry-photo img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}
.industry-partner-list{
  display:grid;
  gap:10px;
}
.industry-partner{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:14px 16px;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:17px;
}
.industry-partner span{
  width:35px;height:35px;
  display:grid;place-items:center;
  border:2px solid var(--ink);
  border-radius:50%;
  background:var(--yellow);
  font-family:var(--display);
  font-size:12px;
}
.industry-partner strong{
  font-family:var(--display);
  font-size:clamp(17px,1.5vw,23px);
  line-height:1.08;
  overflow-wrap:anywhere;
}

/* Make the user-supplied industry participant photo fit naturally in V12 cards */
.program-photo-half img[src*="industry-interns-2026"],
.industry-position-card img[src*="industry-interns-2026"]{
  object-position:center center;
}

@media(max-width:980px){
  .partner-columns{grid-template-columns:1fr}
}
@media(max-width:620px){
  .partner-showcase{margin-top:62px;padding-top:52px}
  .partner-showcase-head h3{
    font-size:clamp(38px,10.8vw,52px);
  }
  .partner-panel{
    padding:20px 16px;
    border-radius:25px;
    box-shadow:6px 7px 0 var(--yellow);
  }
  .partner-panel-title{align-items:flex-start}
  .hotel-partner{
    grid-template-columns:1fr;
    gap:8px;
  }
  .star-rating{font-size:19px}
  .partner-industry-photo img{aspect-ratio:4/3}
}


/* ============================================================
   V14 refinements
   - AI generated standalone Operator Produksi visual
   - Industry partners become text-only rows like hotel partners
   - 3+4 choices and facilities are one compact section
   ============================================================ */

/* Operator Produksi generated visual */
.industry-position-card figure img[src*="operator-produksi-generated"]{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Industry partner rows: same compact logic as hotel list, no photo */
.partner-panel-industry{
  background:#fff;
}

.partner-industry-photo{
  display:none !important;
}

.industry-partner-list-simple{
  display:grid;
  gap:10px;
}

.industry-partner-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  min-width:0;
  padding:14px 16px;
  border:2px solid var(--ink);
  border-radius:17px;
  background:var(--cream);
}

.industry-partner-row>div{
  min-width:0;
}

.industry-partner-row strong,
.industry-partner-row>div>span{
  display:block;
}

.industry-partner-row strong{
  font-family:var(--display);
  font-size:clamp(17px,1.45vw,22px);
  line-height:1.05;
  overflow-wrap:anywhere;
}

.industry-partner-row>div>span{
  margin-top:5px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.industry-row-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:2px solid var(--ink);
  border-radius:50%;
  background:var(--yellow);
  font-family:var(--display);
  font-size:11px;
}

/* Make Program 3+4 choices and facilities feel like ONE section */
.facility-addon{
  margin-top:clamp(62px,7vw,92px) !important;
  padding-top:clamp(48px,5vw,70px) !important;
}

.facility-addon-head{
  margin-bottom:28px !important;
}

.study-strip-integrated{
  margin:clamp(26px,3vw,38px) 0 0 !important;
  padding:clamp(20px,2.4vw,30px) 0 0 !important;
  border-top:2px solid var(--ink);
  border-bottom:0 !important;
}

.study-strip-integrated .study-list{
  margin-top:14px;
}

/* Prevent inherited spacing from the old standalone strip */
.facility-addon .study-strip{
  min-height:0 !important;
}

@media(max-width:620px){
  .industry-partner-row{
    grid-template-columns:1fr auto;
    gap:10px;
    padding:13px 14px;
  }

  .facility-addon{
    margin-top:48px !important;
    padding-top:40px !important;
  }

  .facility-addon-head{
    margin-bottom:20px !important;
  }

  .study-strip-integrated{
    margin-top:22px !important;
    padding-top:18px !important;
  }

  .study-strip-integrated .study-list{
    gap:8px;
  }
}


/* V15 partner thumbnails + sharper production image */
.industry-position-card figure img[src*="operator-produksi-hq"]{
  width:100%;height:100%;object-fit:cover;object-position:center center;image-rendering:auto;
}
.hotel-partner{
  grid-template-columns:64px minmax(0,1fr) auto !important;
  gap:14px !important;min-height:82px;
}
.industry-partner-row{
  grid-template-columns:64px minmax(0,1fr) !important;
  gap:14px !important;min-height:82px;
}
.partner-row-copy{min-width:0}
.partner-row-copy>strong,.partner-row-copy>span{display:block}
.partner-row-copy>strong{
  font-family:var(--display);font-size:clamp(16px,1.35vw,21px);line-height:1.05;overflow-wrap:anywhere;
}
.partner-row-copy>span{
  margin-top:6px;color:var(--muted);font-size:12px;font-weight:800;line-height:1.25;
}
.partner-row-copy>span i{margin:0 6px;font-style:normal;color:var(--orange)}
.partner-thumb-wrap{
  position:relative;width:64px;height:58px;overflow:hidden;display:grid;place-items:center;
  border:2px solid var(--ink);border-radius:13px;background:var(--yellow);
}
.partner-thumb-fallback{
  position:absolute;inset:0;display:grid;place-items:center;font-size:24px;
  background:linear-gradient(135deg,var(--cream),var(--yellow));
}
.partner-thumb-wrap img{
  position:relative;z-index:2;width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .35s cubic-bezier(.2,.75,.2,1);
}
.hotel-partner:hover .partner-thumb-wrap img,
.industry-partner-row:hover .partner-thumb-wrap img{transform:scale(1.08)}
.industry-row-icon{display:none !important}
.partner-panel-industry{background:#fff !important}
.director-copy h2 span{
  display:block;margin-top:10px;font-size:.36em;line-height:1.18;letter-spacing:-.02em;
}
@media(max-width:720px){
  .hotel-partner{grid-template-columns:56px minmax(0,1fr) !important}
  .hotel-partner .star-rating{grid-column:2;justify-self:start;margin-top:-3px}
  .industry-partner-row{grid-template-columns:56px minmax(0,1fr) !important}
  .partner-thumb-wrap{width:56px;height:54px;border-radius:11px}
}


/* ============================================================
   V16 — Larger partner photos
   Photos are intentionally much larger so hotels/companies
   can be visually evaluated at a glance.
   ============================================================ */

.hotel-partner,
.industry-partner-row{
  min-height:124px !important;
  align-items:center !important;
}

.hotel-partner{
  grid-template-columns:128px minmax(0,1fr) auto !important;
  gap:18px !important;
  padding:14px 18px !important;
}

.industry-partner-row{
  grid-template-columns:128px minmax(0,1fr) !important;
  gap:18px !important;
  padding:14px 18px !important;
}

.partner-thumb-wrap{
  width:128px !important;
  height:92px !important;
  border-radius:16px !important;
  border-width:2px !important;
}

.partner-thumb-wrap img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

.partner-row-copy > strong{
  font-size:clamp(18px,1.55vw,24px) !important;
  line-height:1.06 !important;
}

.partner-row-copy > span{
  margin-top:8px !important;
  font-size:13px !important;
}

.star-rating{
  font-size:clamp(19px,1.7vw,25px) !important;
}

/* Give both partner panels more breathing room */
.partner-panel{
  padding:clamp(24px,2.8vw,38px) !important;
}

@media(max-width:980px){
  .hotel-partner,
  .industry-partner-row{
    min-height:112px !important;
  }

  .hotel-partner{
    grid-template-columns:112px minmax(0,1fr) auto !important;
  }

  .industry-partner-row{
    grid-template-columns:112px minmax(0,1fr) !important;
  }

  .partner-thumb-wrap{
    width:112px !important;
    height:82px !important;
  }
}

@media(max-width:720px){
  .hotel-partner,
  .industry-partner-row{
    min-height:108px !important;
    padding:12px !important;
  }

  .hotel-partner{
    grid-template-columns:96px minmax(0,1fr) !important;
    gap:12px !important;
  }

  .industry-partner-row{
    grid-template-columns:96px minmax(0,1fr) !important;
    gap:12px !important;
  }

  .partner-thumb-wrap{
    width:96px !important;
    height:76px !important;
    border-radius:13px !important;
  }

  .hotel-partner .star-rating{
    grid-column:2 !important;
    justify-self:start !important;
    margin-top:0 !important;
  }
}

@media(max-width:430px){
  .hotel-partner{
    grid-template-columns:88px minmax(0,1fr) !important;
  }

  .industry-partner-row{
    grid-template-columns:88px minmax(0,1fr) !important;
  }

  .partner-thumb-wrap{
    width:88px !important;
    height:72px !important;
  }

  .partner-row-copy > strong{
    font-size:16px !important;
  }

  .partner-row-copy > span{
    font-size:11px !important;
  }

  .star-rating{
    font-size:18px !important;
  }
}


/* ============================================================
   V17 — zoom-out / ultra-wide viewport stability
   Prevents sections from visually breaking apart when browser
   zoom is reduced or when the viewport becomes very wide.
   ============================================================ */

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/* Keep major content sections as one continuous full-width block. */
main > section,
.fields,
.partner-showcase,
.facility-addon {
  box-sizing: border-box;
  width: 100%;
}

/* Nested sections inside .fields should never escape the parent width. */
.fields > .partner-showcase,
.fields > .facility-addon {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Keep partner columns balanced at large widths and avoid stretched gaps. */
@media (min-width: 1600px) {
  .partner-showcase,
  .facility-addon,
  .internship-position-block,
  .fields-head {
    max-width: 1540px;
    margin-left: auto;
    margin-right: auto;
  }

  .partner-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

/* At very wide effective viewports created by zooming out,
   preserve readable card widths instead of allowing content to look detached. */
@media (min-width: 2100px) {
  .partner-showcase,
  .facility-addon,
  .internship-position-block,
  .fields-head {
    max-width: 1720px;
  }

  .partner-panel {
    min-height: 100%;
  }
}


/* ============================================================
   V18 — cleaner copy + second hero circle
   ============================================================ */

/* Two compact circular badges beside the hero collage */
.hero-badge-group{
  position:absolute;
  right:clamp(-6px,1vw,12px);
  bottom:clamp(16px,3vw,38px);
  z-index:8;
  display:flex;
  align-items:center;
  gap:14px;
}

.hero-badge-group .hero-badge{
  position:relative !important;
  right:auto !important;
  bottom:auto !important;
  inset:auto !important;
  flex:0 0 auto;
}

.hero-badge-internship{
  width:clamp(118px,10.5vw,158px) !important;
  height:clamp(118px,10.5vw,158px) !important;
  padding:16px !important;
  background:var(--orange) !important;
  color:#fff !important;
}

.hero-badge-internship span{
  font-size:clamp(36px,4.2vw,58px) !important;
  line-height:.9 !important;
}

.hero-badge-internship small{
  max-width:105px;
  text-align:center;
  line-height:1.05;
  font-size:clamp(9px,.75vw,12px) !important;
}

/* Cleaner section heads after removing repetitive copy */
.internship-position-head{
  grid-template-columns:1fr !important;
  align-items:start !important;
  margin-bottom:20px !important;
}

.partner-showcase-head{
  margin-bottom:clamp(24px,3vw,40px) !important;
}

.fields-head{
  max-width:980px;
}

/* Mobile placement */
@media(max-width:820px){
  .hero-badge-group{
    right:10px;
    bottom:14px;
    gap:8px;
  }

  .hero-badge-group .hero-badge{
    width:92px !important;
    height:92px !important;
  }

  .hero-badge-internship{
    width:102px !important;
    height:102px !important;
    padding:11px !important;
  }

  .hero-badge-internship span{
    font-size:34px !important;
  }

  .hero-badge-internship small{
    font-size:8px !important;
    max-width:78px;
  }
}

@media(max-width:480px){
  .hero-badge-group{
    right:5px;
    bottom:8px;
    gap:6px;
  }

  .hero-badge-group .hero-badge{
    width:78px !important;
    height:78px !important;
  }

  .hero-badge-internship{
    width:88px !important;
    height:88px !important;
  }

  .hero-badge-internship span{
    font-size:29px !important;
  }

  .hero-badge-internship small{
    font-size:7px !important;
    max-width:68px;
  }
}


/* ============================================================
   V19 — badges no longer cover hero photos
   Passport photo replaces the old small departure image
   ============================================================ */

/* Badge row is now part of the text column, not an overlay on the collage. */
.hero-copy .hero-badge-group{
  position:relative !important;
  inset:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  margin-top:clamp(22px,2.5vw,34px);
  width:max-content;
  max-width:100%;
}

/* Keep both badges compact enough to sit neatly below the hero buttons. */
.hero-copy .hero-badge-group .hero-badge{
  position:relative !important;
  inset:auto !important;
  flex:0 0 auto;
  width:clamp(108px,8.5vw,138px) !important;
  height:clamp(108px,8.5vw,138px) !important;
}

/* The new passport image is vertical; frame it so passports remain visible. */
.hero-photo-small img[src*="passport-hands"]{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* Disable the old overlay positioning rules inside the collage. */
.hero-collage > .hero-badge-group{
  display:none !important;
}

@media(max-width:820px){
  .hero-copy .hero-badge-group{
    margin-top:20px;
    gap:9px;
  }

  .hero-copy .hero-badge-group .hero-badge{
    width:90px !important;
    height:90px !important;
  }

  .hero-copy .hero-badge-internship{
    width:98px !important;
    height:98px !important;
  }
}

@media(max-width:480px){
  .hero-copy .hero-badge-group{
    flex-wrap:wrap;
    gap:8px;
  }

  .hero-copy .hero-badge-group .hero-badge{
    width:82px !important;
    height:82px !important;
  }

  .hero-copy .hero-badge-internship{
    width:90px !important;
    height:90px !important;
  }
}


/* ============================================================
   V20 — Cute Taiwan internship partner map
   Inserted between partner heading and the existing partner lists.
   Existing hotel/industry lists are unchanged.
   ============================================================ */

.cute-partner-map{
  margin:clamp(30px,4vw,52px) 0 clamp(42px,5vw,68px);
  padding:clamp(18px,2.2vw,28px);
  background:linear-gradient(180deg,#dff8ff 0%,#c9f1fb 42%,#e9fbff 100%);
  border:3px solid var(--ink);
  border-radius:34px;
  box-shadow:10px 10px 0 var(--yellow);
  overflow:hidden;
}

.cute-map-toolbar{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:22px;
  padding:6px 8px 18px;
}

.cute-map-toolbar h4{
  margin:5px 0 0;
  max-width:760px;
  font-family:var(--display);
  font-size:clamp(28px,3.8vw,52px);
  line-height:.98;
  letter-spacing:-.035em;
}

.cute-map-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:9px;
}

.cute-map-legend > span{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.legend-pin{
  width:20px;
  height:20px;
  display:block;
  border:2px solid var(--ink);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:2px 2px 0 rgba(0,0,0,.14);
}
.legend-hotel{background:var(--yellow)}
.legend-industry{background:var(--orange)}

.cute-map-stage{
  position:relative;
  min-height:clamp(600px,67vw,920px);
  overflow:hidden;
  border:3px solid var(--ink);
  border-radius:28px;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.92) 0 5%,transparent 5.5%),
    radial-gradient(circle at 84% 22%,rgba(255,255,255,.9) 0 4%,transparent 4.5%),
    linear-gradient(180deg,#75d8f0 0%,#94e3ef 65%,#78d4e8 100%);
}

.taiwan-island-wrap{
  position:absolute;
  left:50%;
  top:5%;
  width:min(52%,460px);
  height:90%;
  transform:translateX(-50%);
  z-index:2;
  filter:drop-shadow(0 16px 0 rgba(35,36,25,.18));
}

.taiwan-island-svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.island-shadow{
  fill:rgba(22,22,22,.16);
  transform:translate(8px,10px);
}
.island-main{stroke:var(--ink);stroke-width:7;stroke-linejoin:round}
.mountain{opacity:.76;stroke:rgba(22,22,22,.22);stroke-width:2}
.island-highlight{pointer-events:none}

.map-cloud{
  position:absolute;
  z-index:1;
  width:110px;
  height:36px;
  background:rgba(255,255,255,.86);
  border-radius:999px;
  filter:drop-shadow(0 5px 0 rgba(0,0,0,.06));
  animation:cloudDrift 7s ease-in-out infinite alternate;
}
.map-cloud::before,.map-cloud::after{
  content:"";
  position:absolute;
  background:inherit;
  border-radius:50%;
}
.map-cloud::before{width:46px;height:46px;left:18px;top:-22px}
.map-cloud::after{width:60px;height:60px;right:14px;top:-30px}
.map-cloud-a{left:7%;top:20%}
.map-cloud-b{right:8%;top:57%;animation-delay:-3s}

.map-wave{
  position:absolute;
  z-index:1;
  color:rgba(255,255,255,.85);
  font-size:44px;
  letter-spacing:-10px;
  transform:rotate(-7deg);
  animation:waveWiggle 4s ease-in-out infinite;
}
.map-wave-a{left:7%;top:72%}
.map-wave-b{right:8%;top:32%;animation-delay:-1.5s}

.map-pin{
  --pin-color:var(--yellow);
  position:absolute;
  left:var(--x);
  top:var(--y);
  z-index:6;
  width:46px;
  height:54px;
  transform:translate(-50%,-100%);
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
  animation:pinBounce 2.4s ease-in-out infinite;
  animation-delay:calc(var(--y) * -0.015s);
}

.pin-industry{--pin-color:var(--orange)}

.pin-core{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:var(--pin-color);
  color:#111;
  border:3px solid var(--ink);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:5px 6px 0 rgba(0,0,0,.18);
  font-family:var(--display);
  font-size:17px;
}
.pin-core > *{transform:rotate(45deg)}
.map-pin .pin-core{font-size:0}
.map-pin .pin-core::after{
  content:"★";
  transform:rotate(45deg);
  font-size:17px;
  line-height:1;
}
.map-pin.pin-industry .pin-core::after{content:"⚙"}

.pin-tooltip{
  position:absolute;
  left:50%;
  bottom:60px;
  width:max-content;
  max-width:210px;
  transform:translate(-50%,8px) scale(.96);
  opacity:0;
  pointer-events:none;
  padding:8px 11px;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:12px;
  box-shadow:4px 4px 0 var(--yellow);
  font-size:11px;
  font-weight:900;
  line-height:1.2;
  transition:.2s ease;
}

.map-pin:hover,
.map-pin:focus-visible{
  z-index:20;
  animation-play-state:paused;
}
.map-pin:hover .pin-tooltip,
.map-pin:focus .pin-tooltip,
.map-pin:focus-visible .pin-tooltip{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}

.taiwan-float-icon{
  position:absolute;
  z-index:4;
  object-fit:contain;
  filter:drop-shadow(0 8px 4px rgba(0,0,0,.12));
  pointer-events:none;
  animation:taiwanFloat 4.8s ease-in-out infinite;
}
.icon-temple{width:112px;left:4%;top:6%;animation-delay:-.7s}
.icon-taipei101{width:78px;right:8%;top:7%;animation-delay:-2s}
.icon-bubbletea{width:72px;right:7%;top:38%;animation-delay:-1.2s}
.icon-train{width:150px;left:2%;bottom:6%;animation-delay:-3s}
.icon-bear{width:110px;right:4%;bottom:7%;animation-delay:-2.4s}
.icon-food{width:104px;left:5%;top:43%;animation-delay:-1.8s}

.cute-map-note{
  position:absolute;
  left:50%;
  bottom:14px;
  z-index:8;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 28px);
  padding:8px 12px;
  background:rgba(255,255,255,.9);
  border:2px solid var(--ink);
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  text-align:center;
}

@keyframes pinBounce{
  0%,100%{transform:translate(-50%,-100%) translateY(0) rotate(0)}
  50%{transform:translate(-50%,-100%) translateY(-8px) rotate(-2deg)}
}
@keyframes taiwanFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-12px) rotate(3deg)}
}
@keyframes cloudDrift{
  from{transform:translateX(-9px)}
  to{transform:translateX(12px)}
}
@keyframes waveWiggle{
  0%,100%{transform:rotate(-7deg) translateX(0)}
  50%{transform:rotate(-4deg) translateX(12px)}
}

@media(max-width:900px){
  .cute-map-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .cute-map-legend{justify-content:flex-start}
  .cute-map-stage{min-height:720px}
  .taiwan-island-wrap{width:min(62%,420px)}
  .icon-temple{width:86px}
  .icon-taipei101{width:62px}
  .icon-train{width:120px}
  .icon-bear{width:90px}
  .icon-food{width:82px}
}

@media(max-width:620px){
  .cute-partner-map{
    padding:12px;
    border-radius:25px;
    box-shadow:6px 7px 0 var(--yellow);
  }
  .cute-map-toolbar{padding:4px 3px 14px}
  .cute-map-toolbar h4{font-size:clamp(30px,9.5vw,43px)}
  .cute-map-legend > span{font-size:10px;padding:7px 9px}
  .cute-map-stage{min-height:650px;border-radius:20px}
  .taiwan-island-wrap{width:72%;top:7%;height:86%}
  .map-pin{width:39px;height:46px}
  .pin-core{width:36px;height:36px}
  .map-pin .pin-core::after{font-size:14px}
  .pin-tooltip{max-width:150px;font-size:9px;bottom:52px}
  .icon-temple{width:68px;left:2%;top:4%}
  .icon-taipei101{width:52px;right:3%;top:6%}
  .icon-bubbletea{width:54px;right:2%;top:37%}
  .icon-train{width:94px;left:0;bottom:8%}
  .icon-bear{width:70px;right:0;bottom:8%}
  .icon-food{width:67px;left:1%;top:45%}
  .cute-map-note{font-size:9px;bottom:9px}
}

@media(prefers-reduced-motion:reduce){
  .map-pin,.taiwan-float-icon,.map-cloud,.map-wave{animation:none!important}
}


/* ============================================================
   V21 — Move 3+4 and 1–2 badges onto the RIGHT hero photo area
   Position: top-left of the hero collage, away from faces and
   away from the passport photo in the lower-right.
   ============================================================ */

.hero-collage{
  position:relative;
}

.hero-collage > .hero-badge-group{
  display:flex !important;
  position:absolute !important;
  left:clamp(-24px,-1.5vw,-8px) !important;
  top:clamp(14px,2vw,28px) !important;
  right:auto !important;
  bottom:auto !important;
  inset:auto !important;
  transform:none !important;
  z-index:12 !important;
  align-items:center;
  gap:10px;
  margin:0 !important;
  width:max-content;
  max-width:88%;
  pointer-events:none;
}

.hero-collage > .hero-badge-group .hero-badge{
  position:relative !important;
  inset:auto !important;
  width:clamp(104px,8.3vw,136px) !important;
  height:clamp(104px,8.3vw,136px) !important;
  flex:0 0 auto;
  box-shadow:7px 8px 0 rgba(0,0,0,.18) !important;
}

.hero-collage > .hero-badge-group .hero-badge-internship{
  width:clamp(112px,8.7vw,142px) !important;
  height:clamp(112px,8.7vw,142px) !important;
}

/* Neutralize V19 rule that hid badge groups inside the collage. */
.hero-collage > .hero-badge-group{
  visibility:visible !important;
  opacity:1 !important;
}

/* No badge group remains in the text column. */
.hero-copy > .hero-badge-group{
  display:none !important;
}

/* Keep text legible but compact. */
.hero-collage > .hero-badge-group .hero-badge span{
  line-height:.88 !important;
}

.hero-collage > .hero-badge-group .hero-badge small{
  max-width:88px;
  text-align:center;
  line-height:1.02 !important;
}

/* Tablet */
@media(max-width:980px){
  .hero-collage > .hero-badge-group{
    left:8px !important;
    top:10px !important;
    gap:8px;
    max-width:94%;
  }

  .hero-collage > .hero-badge-group .hero-badge{
    width:96px !important;
    height:96px !important;
  }

  .hero-collage > .hero-badge-group .hero-badge-internship{
    width:104px !important;
    height:104px !important;
  }
}

/* Mobile: still top-left of the photo, not under the buttons */
@media(max-width:620px){
  .hero-collage > .hero-badge-group{
    left:6px !important;
    top:7px !important;
    gap:6px;
    max-width:96%;
  }

  .hero-collage > .hero-badge-group .hero-badge{
    width:78px !important;
    height:78px !important;
    padding:8px !important;
    box-shadow:4px 5px 0 rgba(0,0,0,.16) !important;
  }

  .hero-collage > .hero-badge-group .hero-badge-internship{
    width:86px !important;
    height:86px !important;
  }

  .hero-collage > .hero-badge-group .hero-badge span{
    font-size:28px !important;
  }

  .hero-collage > .hero-badge-group .hero-badge-internship span{
    font-size:27px !important;
  }

  .hero-collage > .hero-badge-group .hero-badge small{
    font-size:7px !important;
    max-width:64px;
  }
}


/* ============================================================
   V22 — Premium Taiwan partner map
   Clean composition inspired by modern tourism maps.
   Existing partner lists below remain unchanged.
   ============================================================ */

.cute-partner-map{display:none!important}

.taiwan-partner-map{
  margin:clamp(28px,4vw,48px) 0 clamp(46px,6vw,72px);
  padding:clamp(18px,2.2vw,28px);
  background:#fff9e6;
  border:3px solid var(--ink);
  border-radius:34px;
  box-shadow:10px 10px 0 var(--yellow);
}

.taiwan-map-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:26px;
  padding:4px 6px 20px;
}

.taiwan-map-top h4{
  margin:5px 0 0;
  max-width:800px;
  font-family:var(--display);
  font-size:clamp(30px,4vw,58px);
  line-height:.98;
  letter-spacing:-.04em;
}

.taiwan-map-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:9px;
}

.taiwan-map-legend>span{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:#fff;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.legend-dot{
  width:16px;height:16px;border-radius:50%;border:2px solid var(--ink);display:block;
}
.hotel-dot{background:var(--yellow)}
.industry-dot{background:var(--orange)}

.taiwan-map-canvas{
  position:relative;
  min-height:clamp(660px,62vw,930px);
  overflow:hidden;
  border:3px solid var(--ink);
  border-radius:28px;
  background:
    radial-gradient(circle at 14% 20%,rgba(255,255,255,.92) 0 4%,transparent 4.4%),
    radial-gradient(circle at 84% 26%,rgba(255,255,255,.88) 0 3.5%,transparent 4%),
    linear-gradient(180deg,#cceef1 0%,#bce4e7 100%);
}

.taiwan-map-island{
  position:absolute;
  left:50%;
  top:4%;
  width:min(35%,390px);
  height:91%;
  transform:translateX(-50%);
  z-index:2;
  filter:drop-shadow(0 16px 0 rgba(22,22,22,.16));
}
.taiwan-map-island svg{width:100%;height:100%;display:block;overflow:visible}
.tw-shadow{fill:rgba(0,0,0,.12);transform:translate(9px,11px)}

.sea-lines{
  position:absolute;z-index:1;width:170px;height:55px;opacity:.42;
  background:
    radial-gradient(ellipse at center,transparent 48%,#fff 50%,#fff 54%,transparent 56%) 0 0/55px 18px repeat-x;
}
.sea-lines-a{left:5%;top:31%;transform:rotate(-5deg)}
.sea-lines-b{right:4%;bottom:27%;transform:rotate(4deg)}

.map-sticker{
  position:absolute;
  z-index:3;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 8px 5px rgba(0,0,0,.11));
  animation:mapFloat 5.4s ease-in-out infinite;
}
.sticker-temple{left:4%;top:5%;width:95px;animation-delay:-1s}
.sticker-bubbletea{right:5%;top:9%;width:64px;animation-delay:-2.4s}
.sticker-food{left:5%;bottom:7%;width:90px;animation-delay:-3.2s}
.sticker-train{right:3%;bottom:5%;width:125px;animation-delay:-1.8s}
.sticker-bear{right:5%;top:45%;width:82px;animation-delay:-.4s}

.region-card{
  position:absolute;
  z-index:7;
  width:min(28%,310px);
  padding:14px 16px 15px;
  background:rgba(255,255,255,.96);
  border:2px solid var(--ink);
  border-radius:18px;
  box-shadow:6px 6px 0 rgba(22,22,22,.12);
}
.region-card::after{
  content:"";
  position:absolute;
  width:64px;
  height:2px;
  background:var(--ink);
  opacity:.55;
}
.region-kicker{
  display:block;
  margin-bottom:4px;
  color:var(--orange);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}
.region-card>strong{
  font-family:var(--display);
  font-size:24px;
  line-height:1;
}
.region-card>strong small{
  font-family:var(--body);
  font-size:11px;
  font-weight:900;
}
.region-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:10px;
}
.region-tags span{
  padding:5px 7px;
  border:1.6px solid var(--ink);
  border-radius:999px;
  background:#fff;
  font-size:9px;
  font-weight:850;
  line-height:1.1;
}
.region-tags .tag-hotel{box-shadow:inset 4px 0 0 var(--yellow)}
.region-tags .tag-industry{box-shadow:inset 4px 0 0 var(--orange)}

.region-north{right:5%;top:13%}
.region-north::after{left:-64px;top:50%}
.region-keelung{right:6%;top:34%;width:min(24%,260px)}
.region-keelung::after{left:-64px;top:50%}
.region-tainan{left:5%;top:48%}
.region-tainan::after{right:-64px;top:50%}
.region-kaohsiung{left:6%;top:66%;width:min(24%,270px)}
.region-kaohsiung::after{right:-64px;top:50%}
.region-pingtung{right:6%;bottom:8%}
.region-pingtung::after{left:-64px;top:40%}

.tw-pin{
  position:absolute;
  z-index:9;
  width:40px;height:48px;
  padding:0;border:0;background:transparent;
  transform:translate(-50%,-100%);
  cursor:pointer;
  animation:pinPulse 2.8s ease-in-out infinite;
}
.tw-pin>span{
  width:38px;height:38px;
  display:grid;place-items:center;
  border:3px solid var(--ink);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:4px 5px 0 rgba(0,0,0,.16);
  font-size:0;
}
.tw-pin>span::after{transform:rotate(45deg);font-size:14px}
.pin-hotel>span{background:var(--yellow)}
.pin-hotel>span::after{content:"★"}
.pin-industry>span{background:var(--orange)}
.pin-industry>span::after{content:"⚙"}

.tw-pin:hover,.tw-pin:focus-visible{z-index:15;animation-play-state:paused;transform:translate(-50%,-100%) scale(1.14)}
.tw-pin:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Approximate visual positions on the decorative Taiwan illustration */
.tw-pin-tamsui{left:49.5%;top:10%}
.tw-pin-beitou{left:51.5%;top:12.4%}
.tw-pin-xinyi{left:54%;top:14.5%}
.tw-pin-xizhi{left:55.7%;top:13.7%}
.tw-pin-qidu{left:56.7%;top:12.2%}

.tw-pin-yongkang{left:44.3%;top:56.5%}
.tw-pin-east-tainan{left:45.4%;top:58%}
.tw-pin-tehseng{left:43.2%;top:55.3%}
.tw-pin-kaohsiung{left:43%;top:68.5%}
.tw-pin-hresort{left:49%;top:83.5%}
.tw-pin-kenting1{left:49.5%;top:91.5%}
.tw-pin-kenting2{left:52%;top:91.5%}
.tw-pin-cosmos{left:46%;top:74%}

.map-city-label{
  position:absolute;
  z-index:5;
  padding:5px 8px;
  background:rgba(255,255,255,.88);
  border:1.6px solid var(--ink);
  border-radius:999px;
  font-size:9px;
  font-weight:900;
}
.city-taipei{left:55%;top:17%}
.city-tainan{left:40%;top:59%}
.city-kaohsiung{left:38%;top:69%}
.city-pingtung{left:50%;top:79%}

@keyframes pinPulse{
  0%,100%{transform:translate(-50%,-100%) translateY(0)}
  50%{transform:translate(-50%,-100%) translateY(-7px)}
}
@keyframes mapFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-9px) rotate(2deg)}
}

@media(max-width:1000px){
  .taiwan-map-top{align-items:flex-start;flex-direction:column}
  .taiwan-map-legend{justify-content:flex-start}
  .taiwan-map-canvas{min-height:820px}
  .taiwan-map-island{width:min(44%,390px)}
  .region-card{width:min(31%,280px)}
  .region-north{right:3%}
  .region-keelung{right:3%}
  .region-tainan{left:3%}
  .region-kaohsiung{left:3%}
  .region-pingtung{right:3%}
}

@media(max-width:700px){
  .taiwan-partner-map{padding:12px;border-radius:25px;box-shadow:6px 7px 0 var(--yellow)}
  .taiwan-map-top{padding:2px 3px 14px}
  .taiwan-map-top h4{font-size:clamp(30px,9.5vw,44px)}
  .taiwan-map-canvas{min-height:760px;border-radius:20px}
  .taiwan-map-island{width:58%;top:5%;height:88%}
  .region-card{width:42%;padding:10px 11px;border-radius:14px}
  .region-card>strong{font-size:18px}
  .region-tags{display:none}
  .region-card::after{width:28px}
  .region-north::after,.region-keelung::after,.region-pingtung::after{left:-28px}
  .region-tainan::after,.region-kaohsiung::after{right:-28px}
  .region-north{right:2%;top:9%}
  .region-keelung{right:2%;top:27%}
  .region-tainan{left:2%;top:45%}
  .region-kaohsiung{left:2%;top:61%}
  .region-pingtung{right:2%;bottom:5%}
  .tw-pin{width:33px;height:40px}
  .tw-pin>span{width:31px;height:31px}
  .tw-pin>span::after{font-size:11px}
  .sticker-temple{width:66px;left:1%;top:2%}
  .sticker-bubbletea{width:46px;right:1%;top:3%}
  .sticker-food{width:62px;left:1%;bottom:2%}
  .sticker-train{width:86px;right:0;bottom:2%}
  .sticker-bear{width:58px;right:1%;top:42%}
}

@media(prefers-reduced-motion:reduce){
  .map-sticker,.tw-pin{animation:none!important}
}


/* ============================================================
   V23 — Fix 1–2 internship badge text fitting
   ============================================================ */

/* Force "1–2" to stay on a single line and remain inside the circle. */
.hero-collage > .hero-badge-group .hero-badge-internship{
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  text-align:center !important;
}

.hero-collage > .hero-badge-group .hero-badge-internship > span{
  display:block !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  font-size:clamp(38px,3.7vw,52px) !important;
  line-height:.82 !important;
  letter-spacing:-.08em !important;
  transform:none !important;
}

.hero-collage > .hero-badge-group .hero-badge-internship > small{
  display:block !important;
  width:78% !important;
  max-width:90px !important;
  margin:9px auto 0 !important;
  padding:0 !important;
  font-size:clamp(7px,.62vw,10px) !important;
  line-height:1.02 !important;
  letter-spacing:.015em !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
}

/* Tablet */
@media(max-width:980px){
  .hero-collage > .hero-badge-group .hero-badge-internship > span{
    font-size:38px !important;
  }
  .hero-collage > .hero-badge-group .hero-badge-internship > small{
    width:76% !important;
    max-width:74px !important;
    margin-top:7px !important;
    font-size:7.5px !important;
  }
}

/* Mobile */
@media(max-width:620px){
  .hero-collage > .hero-badge-group .hero-badge-internship > span{
    font-size:31px !important;
    letter-spacing:-.09em !important;
  }
  .hero-collage > .hero-badge-group .hero-badge-internship > small{
    width:78% !important;
    max-width:65px !important;
    margin-top:6px !important;
    font-size:6.5px !important;
  }
}


/* ============================================================
   V25 — ORIGINAL TAIWAN MAP
   Entire island illustration is drawn in inline SVG by this build.
   No borrowed/cropped map artwork is used.
   ============================================================ */

.taiwan-partner-map,
.cute-partner-map,
.travel-partner-map{
  display:none !important;
}

.original-taiwan-map{
  margin:clamp(30px,4vw,50px) 0 clamp(46px,5.5vw,72px);
  padding:clamp(18px,2.2vw,28px);
  background:#fff9e8;
  border:3px solid var(--ink);
  border-radius:34px;
  box-shadow:10px 10px 0 var(--yellow);
}

.original-map-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:26px;
  padding:5px 7px 20px;
}

.original-map-header h4{
  margin:5px 0 0;
  max-width:780px;
  font-family:var(--display);
  font-size:clamp(30px,4vw,58px);
  line-height:.98;
  letter-spacing:-.04em;
}

.original-map-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:9px;
}

.original-map-legend>span{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.original-legend-dot{
  width:16px;
  height:16px;
  display:block;
  border:2px solid var(--ink);
  border-radius:50%;
}
.original-legend-dot.hotel-dot{background:var(--yellow)}
.original-legend-dot.industry-dot{background:var(--orange)}

.original-map-scene{
  position:relative;
  min-height:clamp(730px,65vw,980px);
  overflow:hidden;
  border:3px solid var(--ink);
  border-radius:28px;
  background:
    radial-gradient(circle at 14% 17%,rgba(255,255,255,.92) 0 3.8%,transparent 4.2%),
    radial-gradient(circle at 86% 20%,rgba(255,255,255,.88) 0 3.4%,transparent 3.8%),
    linear-gradient(180deg,#bfe8ec 0%,#a9dee4 100%);
}

.original-map-art{
  position:absolute;
  left:50%;
  top:4%;
  z-index:4;
  width:min(60%,620px);
  height:91%;
  transform:translateX(-50%);
}

.original-map-art>svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.taiwan-land{
  transform-origin:center;
}

.landmark,
.map-train{
  transform-box:fill-box;
  transform-origin:center;
}
.map-train{
  animation:tinyTrain 4.6s ease-in-out infinite;
}
.landmark-101{
  animation:landmarkBob 5.6s ease-in-out infinite;
}
.landmark-temple,
.landmark-south{
  animation:landmarkBob 6.2s ease-in-out infinite reverse;
}

.map-cloud{
  position:absolute;
  z-index:2;
  width:100px;
  height:30px;
  background:rgba(255,255,255,.82);
  border-radius:999px;
  animation:cloudDriftV25 7s ease-in-out infinite alternate;
}
.map-cloud::before,
.map-cloud::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:inherit;
}
.map-cloud::before{width:40px;height:40px;left:18px;top:-18px}
.map-cloud::after{width:54px;height:54px;right:13px;top:-26px}
.cloud-one{left:7%;top:17%}
.cloud-two{right:7%;top:55%;animation-delay:-3s}

.map-waves{
  position:absolute;
  z-index:2;
  color:rgba(255,255,255,.85);
  font-size:35px;
  font-weight:900;
  letter-spacing:-4px;
  animation:waveShiftV25 4.8s ease-in-out infinite;
}
.waves-one{left:7%;top:59%}
.waves-two{right:8%;top:31%;animation-delay:-2s}

.original-pin{
  position:absolute;
  left:var(--x);
  top:var(--y);
  z-index:12;
  width:40px;
  height:48px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  transform:translate(-50%,-100%);
  animation:pinBounceV25 2.9s ease-in-out infinite;
}

.original-pin>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:3px solid var(--ink);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:4px 5px 0 rgba(0,0,0,.16);
  font-size:0;
}

.original-pin>span::after{
  transform:rotate(45deg);
  font-size:14px;
}
.original-pin.pin-hotel>span{background:var(--yellow)}
.original-pin.pin-hotel>span::after{content:"★"}
.original-pin.pin-industry>span{background:var(--orange)}
.original-pin.pin-industry>span::after{content:"⚙"}

.original-pin>b{
  position:absolute;
  left:50%;
  bottom:55px;
  width:max-content;
  max-width:220px;
  opacity:0;
  transform:translate(-50%,8px) scale(.96);
  padding:7px 10px;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:11px;
  box-shadow:4px 4px 0 var(--yellow);
  font-size:10px;
  line-height:1.16;
  pointer-events:none;
  transition:.18s ease;
}

.original-pin:hover,
.original-pin:focus-visible{
  z-index:25;
  animation-play-state:paused;
}
.original-pin:hover>b,
.original-pin:focus-visible>b{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}

.original-city{
  position:absolute;
  z-index:9;
  padding:5px 8px;
  background:rgba(255,255,255,.92);
  border:1.7px solid var(--ink);
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  box-shadow:2px 2px 0 rgba(0,0,0,.08);
}
.original-city.city-taipei{left:72%;top:16%}
.original-city.city-keelung{left:75%;top:11%}
.original-city.city-tainan{left:23%;top:58%}
.original-city.city-kaohsiung{left:18%;top:69%}
.original-city.city-pingtung{left:57%;top:79%}

.original-map-help{
  position:absolute;
  left:50%;
  bottom:14px;
  z-index:15;
  transform:translateX(-50%);
  max-width:calc(100% - 28px);
  padding:8px 12px;
  background:rgba(255,255,255,.94);
  border:2px solid var(--ink);
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  text-align:center;
}

@keyframes pinBounceV25{
  0%,100%{transform:translate(-50%,-100%) translateY(0)}
  50%{transform:translate(-50%,-100%) translateY(-6px)}
}
@keyframes cloudDriftV25{
  from{transform:translateX(-10px)}
  to{transform:translateX(12px)}
}
@keyframes waveShiftV25{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(10px)}
}
@keyframes tinyTrain{
  0%,100%{transform:translate(218px,500px)}
  50%{transform:translate(225px,493px)}
}
@keyframes landmarkBob{
  0%,100%{translate:0 0}
  50%{translate:0 -4px}
}

@media(max-width:1000px){
  .original-map-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .original-map-legend{justify-content:flex-start}
  .original-map-scene{min-height:830px}
  .original-map-art{width:min(72%,610px)}
}

@media(max-width:680px){
  .original-taiwan-map{
    padding:12px;
    border-radius:25px;
    box-shadow:6px 7px 0 var(--yellow);
  }
  .original-map-header{
    padding:3px 3px 14px;
  }
  .original-map-header h4{
    font-size:clamp(30px,9.5vw,44px);
  }
  .original-map-legend>span{
    padding:7px 9px;
    font-size:10px;
  }
  .original-map-scene{
    min-height:730px;
    border-radius:20px;
  }
  .original-map-art{
    width:88%;
    top:5%;
    height:87%;
  }
  .original-pin{
    width:33px;
    height:40px;
  }
  .original-pin>span{
    width:31px;
    height:31px;
  }
  .original-pin>span::after{font-size:11px}
  .original-pin>b{
    max-width:150px;
    bottom:46px;
    font-size:8px;
  }
  .original-city{
    font-size:7px;
    padding:3px 6px;
  }
  .original-map-help{
    bottom:8px;
    font-size:8px;
  }
  .map-cloud{opacity:.7;transform:scale(.75)}
  .map-waves{font-size:25px}
}

@media(prefers-reduced-motion:reduce){
  .original-pin,
  .map-cloud,
  .map-waves,
  .map-train,
  .landmark{
    animation:none !important;
  }
}

/* ================================================================
   V26 — Final Taiwan partner map integration
   Uses the approved full infographic image. It is always shown in its
   native aspect ratio: no cover, no fixed-height crop, no clipping.
   ================================================================ */

.partner-showcase{
  position:relative;
}

/* The approved infographic already contains its own heading. Keep the
   HTML section heading accessible without showing a duplicate title. */
.partner-showcase > .partner-showcase-head{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.taiwan-map-final{
  width:100%;
  margin:0 auto clamp(28px,4vw,52px);
  position:relative;
  isolation:isolate;
}

.taiwan-map-final-stage{
  position:relative;
  width:100%;
  max-width:1536px;
  margin-inline:auto;
  overflow:visible;
  opacity:0;
  transform:translateY(24px) scale(.992);
  filter:saturate(.96);
  transition:opacity .8s cubic-bezier(.2,.75,.2,1),
             transform .9s cubic-bezier(.2,.75,.2,1),
             filter .9s ease;
  will-change:opacity,transform;
}

.taiwan-map-final-stage.map-in-view,
.taiwan-map-final.is-visible .taiwan-map-final-stage{
  opacity:1;
  transform:none;
  filter:none;
}

.taiwan-map-final-image{
  display:block;
  width:100%;
  max-width:100%;
  height:auto !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  border:0;
  margin:0;
  user-select:none;
  -webkit-user-drag:none;
}

.taiwan-map-pulses{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.taiwan-map-pulse{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:clamp(16px,1.7vw,28px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,.94);
  border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,181,0,.72), 0 2px 8px rgba(0,0,0,.18);
  opacity:0;
}

.map-in-view .taiwan-map-pulse{
  animation:hanMapPulse 2.8s ease-out infinite;
  animation-delay:var(--d);
}

.taiwan-map-final-stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.18) 42%,transparent 58%);
  transform:translateX(-120%);
  opacity:.8;
}

.taiwan-map-final-stage.map-in-view::after{
  animation:hanMapSheen 1.2s .35s ease-out 1 both;
}

.image-load-fallback{
  object-fit:contain !important;
  background:#f4f4f4;
}

@keyframes hanMapPulse{
  0%,22%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  34%{opacity:.95}
  72%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}
}

@keyframes hanMapSheen{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}

@media (max-width:900px){
  .taiwan-map-final{
    width:calc(100% + 8px);
    margin-left:-4px;
    margin-right:-4px;
  }
  .taiwan-map-final-stage{
    width:100%;
  }
  .taiwan-map-pulse{
    width:clamp(11px,2.25vw,18px);
    border-width:1px;
  }
}

@media (max-width:560px){
  .taiwan-map-final{
    width:calc(100% + 16px);
    margin-left:-8px;
    margin-right:-8px;
    margin-bottom:26px;
  }
  .taiwan-map-final-image{
    width:100%;
    height:auto !important;
  }
  .taiwan-map-pulses{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .taiwan-map-final-stage{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .taiwan-map-pulse,
  .taiwan-map-final-stage::after{
    animation:none !important;
  }
}

/* V27 — functional interactive Taiwan map hotspots */
.taiwan-map-hotspots{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}

.taiwan-map-hotspot{
  --ring:rgba(255,190,0,.95);
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:clamp(38px,3.8vw,58px);
  aspect-ratio:1;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  transform:translate(-50%,-50%);
  cursor:pointer;
  pointer-events:auto;
  z-index:5;
  outline:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.taiwan-map-hotspot.industry{--ring:rgba(247,85,35,.96)}
.taiwan-map-hotspot.neutral{--ring:rgba(255,190,0,.82)}

.taiwan-map-hotspot::before,
.taiwan-map-hotspot::after{
  content:"";
  position:absolute;
  inset:14%;
  border-radius:50%;
  pointer-events:none;
}

.taiwan-map-hotspot::before{
  border:3px solid var(--ring);
  box-shadow:0 0 0 3px rgba(255,255,255,.88),0 5px 18px rgba(0,0,0,.22);
  opacity:0;
  transform:scale(.7);
  transition:opacity .2s ease,transform .2s ease;
}

.taiwan-map-hotspot::after{
  border:2px solid var(--ring);
  opacity:0;
}

.map-in-view .taiwan-map-hotspot::after{
  animation:hanMapInteractivePulse 2.6s cubic-bezier(.2,.7,.25,1) infinite;
  animation-delay:var(--d);
}

.taiwan-map-hotspot:hover::before,
.taiwan-map-hotspot:focus-visible::before,
.taiwan-map-hotspot.is-active::before{
  opacity:1;
  transform:scale(1);
}

.taiwan-map-hotspot:hover,
.taiwan-map-hotspot:focus-visible,
.taiwan-map-hotspot.is-active{
  animation:hanMapPinNudge .55s ease both;
}

.taiwan-map-hotspot:focus-visible{
  box-shadow:0 0 0 4px rgba(255,255,255,.98),0 0 0 7px var(--ring);
}

@keyframes hanMapInteractivePulse{
  0%,22%{opacity:0;transform:scale(.55)}
  34%{opacity:.9}
  76%,100%{opacity:0;transform:scale(1.75)}
}

@keyframes hanMapPinNudge{
  0%{transform:translate(-50%,-50%) scale(1)}
  45%{transform:translate(-50%,-57%) scale(1.06)}
  100%{transform:translate(-50%,-50%) scale(1)}
}

.taiwan-map-tooltip{
  --tx:50%;
  --ty:50%;
  position:absolute;
  left:var(--tx);
  top:var(--ty);
  z-index:10;
  width:min(285px,calc(100% - 28px));
  padding:14px 16px 13px;
  border:1px solid rgba(20,35,50,.16);
  border-radius:16px;
  background:rgba(255,255,255,.97);
  color:#152331;
  box-shadow:0 16px 36px rgba(16,40,60,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(22px,-50%) scale(.96);
  transform-origin:left center;
  transition:opacity .18s ease,transform .2s ease,visibility .18s;
}

.taiwan-map-tooltip.tooltip-left{
  transform:translate(calc(-100% - 22px),-50%) scale(.96);
  transform-origin:right center;
}

.taiwan-map-tooltip.tooltip-up{
  margin-top:-12px;
}

.taiwan-map-tooltip.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(22px,-50%) scale(1);
}

.taiwan-map-tooltip.tooltip-left.is-open{
  transform:translate(calc(-100% - 22px),-50%) scale(1);
}

.taiwan-map-tooltip::before{
  content:"";
  position:absolute;
  left:-7px;
  top:50%;
  width:13px;
  height:13px;
  border-left:1px solid rgba(20,35,50,.16);
  border-bottom:1px solid rgba(20,35,50,.16);
  background:rgba(255,255,255,.97);
  transform:translateY(-50%) rotate(45deg);
}

.taiwan-map-tooltip.tooltip-left::before{
  left:auto;
  right:-7px;
  border-left:0;
  border-bottom:0;
  border-right:1px solid rgba(20,35,50,.16);
  border-top:1px solid rgba(20,35,50,.16);
}

.taiwan-map-tooltip-kicker{
  margin-bottom:2px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f05a2a;
}

.taiwan-map-tooltip-title{
  display:block;
  margin-bottom:7px;
  font-size:16px;
  line-height:1.15;
}

.taiwan-map-tooltip-list{
  margin:0;
  padding:0;
  list-style:none;
  font-size:12px;
  line-height:1.35;
}

.taiwan-map-tooltip-list li{
  position:relative;
  padding:4px 0 4px 15px;
}

.taiwan-map-tooltip-list li::before{
  content:"";
  position:absolute;
  left:1px;
  top:.76em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ffc400;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
}

.taiwan-map-tooltip-hint{
  display:block;
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid rgba(20,35,50,.09);
  font-size:9px;
  color:#65727e;
}

/* Retire the old decorative-only pulse overlay if cached markup is ever present. */
.taiwan-map-pulses{display:none!important}

@media (max-width:700px){
  .taiwan-map-hotspot{
    width:clamp(34px,7.5vw,48px);
  }
  .taiwan-map-tooltip{
    position:absolute;
    left:50%!important;
    top:auto!important;
    bottom:18px;
    width:min(310px,calc(100% - 24px));
    margin:0;
    transform:translateX(-50%) translateY(8px) scale(.98)!important;
    transform-origin:center bottom!important;
  }
  .taiwan-map-tooltip.is-open{
    transform:translateX(-50%) translateY(0) scale(1)!important;
  }
  .taiwan-map-tooltip::before{display:none}
  .taiwan-map-tooltip-hint{font-size:10px}
}

@media (prefers-reduced-motion:reduce){
  .taiwan-map-hotspot,
  .taiwan-map-hotspot::after{
    animation:none!important;
  }
  .taiwan-map-tooltip{
    transition:none!important;
  }
}

/* ================================================================
   V28 — CLEAN MAP + REAL HTML/CSS PINS
   Background art contains no city names, no pins, and no side cards.
   City labels, pins, pulse animation, and partner tooltips are live DOM.
   ================================================================ */

.partner-showcase > .partner-showcase-head{
  position:relative !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  margin:0 0 clamp(16px,2.2vw,28px) !important;
  overflow:visible !important;
  clip:auto !important;
  white-space:normal !important;
  border:0 !important;
}

.partner-showcase > .partner-showcase-head .eyebrow{
  margin-bottom:6px;
  color:#f05a2a;
}

.partner-showcase > .partner-showcase-head h3{
  max-width:920px;
  margin:0;
  font-size:clamp(32px,5vw,68px);
  line-height:.98;
  letter-spacing:-.035em;
}

.taiwan-map-final{
  position:relative;
  width:100%;
  max-width:1536px;
  margin:0 auto clamp(34px,4.5vw,58px);
}

.taiwan-map-legend{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:9px;
  margin:0 0 12px;
}

.taiwan-map-legend-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:7px 13px;
  border:1px solid rgba(21,35,49,.26);
  border-radius:999px;
  background:#fff;
  color:#17232d;
  font-size:12px;
  font-weight:800;
  box-shadow:0 5px 14px rgba(23,35,45,.06);
}

.legend-pin{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:#ffc400;
  color:#17232d;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(20,35,50,.16);
  font-size:11px;
  line-height:1;
}
.taiwan-map-legend-item.industry .legend-pin{background:#f45a2b;color:#fff}
.legend-pin::first-letter{transform:rotate(45deg)}

.taiwan-map-final-stage{
  overflow:hidden;
  border-radius:clamp(18px,2.1vw,34px);
  background:#75d5f3;
  box-shadow:0 18px 44px rgba(24,74,101,.13);
}

.taiwan-map-final-image{
  opacity:0;
  transform:scale(.975);
  transform-origin:center center;
  filter:saturate(.92) blur(1.5px);
}

.taiwan-map-final-stage.map-in-view .taiwan-map-final-image{
  animation:hanMapImageReveal 1.05s cubic-bezier(.18,.78,.22,1) both;
}

@keyframes hanMapImageReveal{
  0%{opacity:0;transform:scale(.965);filter:saturate(.88) blur(3px)}
  55%{opacity:1}
  100%{opacity:1;transform:scale(1);filter:saturate(1) blur(0)}
}

/* Interactive pins are fully separate from the artwork. */
.taiwan-map-hotspots{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
}

.taiwan-map-hotspot{
  --pin:#ffc400;
  --ink:#17232d;
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:clamp(42px,4.2vw,66px);
  height:clamp(42px,4.2vw,66px);
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  z-index:7;
  outline:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  opacity:0;
  transform:translate(-50%,-72%) scale(.72);
}
.taiwan-map-hotspot.industry{--pin:#f45a2b;--ink:#fff}
.taiwan-map-hotspot.neutral{--pin:#d9dde1;--ink:#4c5964}

.map-in-view .taiwan-map-hotspot{
  animation:hanMapPinDrop .68s cubic-bezier(.18,.86,.24,1.18) forwards;
  animation-delay:var(--d);
}

@keyframes hanMapPinDrop{
  0%{opacity:0;transform:translate(-50%,-118%) scale(.55)}
  65%{opacity:1;transform:translate(-50%,-42%) scale(1.07)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

.map-marker{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(24px,2.55vw,40px);
  height:clamp(24px,2.55vw,40px);
  display:grid;
  place-items:center;
  border-radius:50% 50% 50% 0;
  background:var(--pin);
  border:clamp(2px,.22vw,4px) solid rgba(255,255,255,.98);
  box-shadow:0 0 0 1px rgba(28,46,58,.28),0 7px 15px rgba(14,44,62,.28);
  transform:translate(-50%,-62%) rotate(-45deg);
  transform-origin:center;
  transition:filter .2s ease,box-shadow .2s ease;
}

.map-marker-icon{
  display:block;
  color:var(--ink);
  font-size:clamp(10px,1.15vw,18px);
  font-weight:900;
  line-height:1;
  transform:rotate(45deg);
}

.taiwan-map-hotspot::before{display:none!important}
.taiwan-map-hotspot::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(24px,2.55vw,40px);
  height:clamp(24px,2.55vw,40px);
  border:2px solid var(--pin);
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-58%) scale(.7);
  pointer-events:none;
}

.map-in-view .taiwan-map-hotspot::after{
  animation:hanMapLivePulse 2.7s cubic-bezier(.15,.72,.25,1) infinite;
  animation-delay:calc(var(--d) + .75s);
}

@keyframes hanMapLivePulse{
  0%,24%{opacity:0;transform:translate(-50%,-58%) scale(.55)}
  38%{opacity:.78}
  78%,100%{opacity:0;transform:translate(-50%,-58%) scale(1.85)}
}

.map-city-label{
  position:absolute;
  left:calc(50% + 24px);
  top:50%;
  z-index:8;
  display:block;
  min-width:max-content;
  max-width:190px;
  padding:5px 9px 6px;
  border:2px solid rgba(255,255,255,.94);
  border-radius:10px;
  background:rgba(255,255,255,.88);
  color:#113f69;
  box-shadow:0 4px 10px rgba(11,55,82,.16);
  font-size:clamp(9px,1vw,14px);
  font-weight:900;
  line-height:1;
  letter-spacing:-.015em;
  white-space:nowrap;
  opacity:0;
  transform:translateY(-50%) translateX(-8px);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  pointer-events:none;
}

.map-in-view .map-city-label{
  animation:hanMapCityReveal .5s ease-out forwards;
  animation-delay:calc(var(--d) + .38s);
}

@keyframes hanMapCityReveal{
  from{opacity:0;transform:translateY(-50%) translateX(-9px)}
  to{opacity:1;transform:translateY(-50%) translateX(0)}
}

.taiwan-map-hotspot.label-left .map-city-label{
  left:auto;
  right:calc(50% + 24px);
  transform:translateY(-50%) translateX(8px);
}
.map-in-view .taiwan-map-hotspot.label-left .map-city-label{
  animation-name:hanMapCityRevealLeft;
}
@keyframes hanMapCityRevealLeft{
  from{opacity:0;transform:translateY(-50%) translateX(9px)}
  to{opacity:1;transform:translateY(-50%) translateX(0)}
}

.taiwan-map-hotspot.label-up .map-city-label{top:22%}
.taiwan-map-hotspot.label-down .map-city-label{top:78%}

.taiwan-map-hotspot:hover .map-marker,
.taiwan-map-hotspot:focus-visible .map-marker,
.taiwan-map-hotspot.is-active .map-marker{
  filter:brightness(1.04) saturate(1.12);
  box-shadow:0 0 0 4px rgba(255,255,255,.78),0 10px 22px rgba(14,44,62,.30);
}

.taiwan-map-hotspot:hover,
.taiwan-map-hotspot:focus-visible,
.taiwan-map-hotspot.is-active{
  animation:hanMapPinHover .42s ease both;
}
@keyframes hanMapPinHover{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-59%) scale(1.06)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

.taiwan-map-hotspot:focus-visible{
  box-shadow:0 0 0 4px rgba(255,255,255,.95),0 0 0 7px var(--pin);
}

.taiwan-map-help{
  width:max-content;
  max-width:calc(100% - 20px);
  margin:12px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 14px;
  border:1px solid rgba(21,35,49,.19);
  border-radius:999px;
  background:#fff;
  color:#33434f;
  box-shadow:0 6px 18px rgba(23,35,45,.08);
  font-size:11px;
  font-weight:700;
  text-align:center;
}
.taiwan-map-help-icon{font-size:16px;color:#f05a2a}

@media (max-width:700px){
  .partner-showcase > .partner-showcase-head h3{font-size:clamp(30px,10vw,48px)}
  .taiwan-map-legend{justify-content:flex-start;gap:6px}
  .taiwan-map-legend-item{min-height:34px;padding:6px 10px;font-size:10px}
  .taiwan-map-hotspot{width:42px;height:42px}
  .map-marker{width:23px;height:23px;border-width:2px}
  .map-marker-icon{font-size:9px}
  .map-city-label{display:none}
  .taiwan-map-help{font-size:10px;padding:7px 11px}
}

@media (prefers-reduced-motion:reduce){
  .taiwan-map-final-image,
  .taiwan-map-hotspot,
  .map-city-label{
    opacity:1!important;
    animation:none!important;
    transition:none!important;
    filter:none!important;
  }
  .taiwan-map-final-image{transform:none!important}
  .taiwan-map-hotspot{transform:translate(-50%,-50%) scale(1)!important}
  .taiwan-map-hotspot::after{animation:none!important}
}


/* V29 — compact world-language selector */
.language-switcher-v29{display:inline-flex!important;align-items:center;gap:.42rem;padding:.3rem .4rem .3rem .55rem;border:1px solid rgba(20,20,20,.16);border-radius:999px;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);max-width:210px}
.language-switcher-v29 .language-globe{font-size:1rem;line-height:1;flex:0 0 auto}
.language-switcher-v29 .language-select{appearance:auto;min-width:0;max-width:170px;border:0!important;outline:0;background:transparent;color:inherit;font:inherit;font-size:.82rem;font-weight:800;line-height:1.2;padding:.25rem .2rem;cursor:pointer}
.language-switcher-v29 .language-select:focus-visible{outline:2px solid currentColor!important;outline-offset:3px;border-radius:8px}
html[data-language="ja"] body,html[data-language="ko"] body,html[data-language="tw"] body,html[data-language="cn"] body{font-family:"DM Sans","Noto Sans CJK JP","Yu Gothic","Meiryo","PingFang TC","PingFang SC","Microsoft JhengHei","Microsoft YaHei","Malgun Gothic",Arial,sans-serif}
html[data-language="ar"] body{font-family:"DM Sans","Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif}
html[dir="rtl"] .taiwan-map-final-stage,html[dir="rtl"] .taiwan-map-hotspots,html[dir="rtl"] .taiwan-map-tooltip{direction:ltr}
html[dir="rtl"] .taiwan-map-tooltip{ text-align:right }
html[dir="rtl"] .taiwan-map-tooltip-list{direction:rtl}
@media (max-width:980px){.language-switcher-v29{max-width:100%;width:100%;justify-content:center}.language-switcher-v29 .language-select{max-width:none;width:100%}}


/* ================================================================
   V30 — CATEGORY-SAFE PARTNER MAP + TRUE FLUID TYPOGRAPHY
   1) Hotel pins contain hotel/resort partners only.
   2) Industry pins contain industry/manufacturing partners only.
   3) Key headings scale to their actual text container, not only viewport.
   ================================================================ */

/* Keep legend symbols upright and immediately recognisable. */
.taiwan-map-legend-item .legend-pin{
  border-radius:50%;
  transform:none;
  font-family:var(--display);
  font-size:11px;
}
.taiwan-map-legend-item.industry .legend-pin{font-size:12px}

/* Tooltip accent follows the category of the active pin. */
.taiwan-map-tooltip.category-industry .taiwan-map-tooltip-list li::before{background:#f45a2b}
.taiwan-map-tooltip.category-industry .taiwan-map-tooltip-kicker{color:#f05a2a}
.taiwan-map-tooltip.category-hotel .taiwan-map-tooltip-list li::before{background:#ffc400}
.taiwan-map-tooltip.category-hotel .taiwan-map-tooltip-kicker{color:#b97a00}

/* The collaboration layout starts stacking earlier, before the left title column becomes cramped. */
@media (max-width:1320px) and (min-width:821px){
  .collaboration{
    grid-template-columns:1fr;
    gap:clamp(40px,5vw,64px);
  }
  .collab-intro{max-width:920px}
  .collab-wheel{
    width:min(100%,960px);
    max-width:960px;
    justify-self:center;
  }
}

/* Container-aware type: text follows the width of the block/card it actually sits in. */
.hero-copy,
.collab-intro,
.partner-showcase > .partner-showcase-head{
  container-type:inline-size;
}
.collab-item{container-type:inline-size}

@supports (font-size:1cqi){
  .hero-copy h1{
    font-size:clamp(46px,13.4cqi,132px);
  }
  .hero-copy .hero-lead{
    font-size:clamp(17px,3.2cqi,30px);
  }
  .collab-intro .display{
    font-size:clamp(40px,11.8cqi,108px);
    line-height:.92;
    overflow-wrap:anywhere;
  }
  .collab-intro > p:last-child{
    font-size:clamp(16px,3cqi,25px);
  }
  .collab-item strong{
    font-size:clamp(18px,8.2cqi,38px) !important;
    line-height:1.06 !important;
  }
  .partner-showcase > .partner-showcase-head h3{
    font-size:clamp(30px,7.2cqi,68px);
  }
}

/* Extra-small windows: never force hero lines to stay on one line. */
@media (max-width:620px){
  .hero-line{
    white-space:normal !important;
    width:100% !important;
    overflow-wrap:anywhere;
  }
  .hero-copy h1{line-height:.9}
}

/* =========================================================
   v37 — Clear square application buttons
   Make internship application links obvious, touch-friendly CTAs.
   ========================================================= */
.application-cta{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:min(100%, 340px);
  min-height:68px;
  margin-top:22px;
  padding:16px 20px;
  border:3px solid var(--ink);
  border-radius:12px;
  font-size:18px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-.01em;
  text-decoration:none;
  box-shadow:7px 7px 0 var(--ink);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.application-cta span:last-child{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:36px;
  height:36px;
  border:2px solid currentColor;
  border-radius:8px;
  font-size:21px;
  line-height:1;
}
.application-cta-hotel{
  background:var(--yellow);
  color:var(--ink);
}
.application-cta-industry{
  background:var(--orange);
  color:#fff;
}
.application-cta:hover,
.application-cta:focus-visible{
  transform:translate(-3px,-3px);
  box-shadow:10px 10px 0 var(--ink);
}
.application-cta:focus-visible{
  outline:4px solid #fff;
  outline-offset:4px;
}
@media(max-width:620px){
  .application-cta{
    width:100%;
    min-height:64px;
    margin-top:18px;
    font-size:17px;
  }
}

/* v43 — prominent apply button in the top navigation */
.scroll-anchor{display:block;position:relative;top:-110px;visibility:hidden;height:0}
.site-nav .nav-apply{background:var(--orange)!important;color:#fff!important;border:3px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 var(--ink);padding:13px 22px!important;white-space:nowrap}
.site-nav .nav-apply::after{display:none!important}
.site-nav .nav-contact{white-space:nowrap}
@media(max-width:1180px) and (min-width:821px){.site-nav{gap:10px!important;font-size:13px!important}.site-nav .nav-apply,.site-nav .nav-contact{padding:11px 15px!important}}
@media(max-width:820px){.site-nav .nav-apply{margin-top:10px;text-align:center;border-radius:14px!important;background:var(--orange)!important;color:#fff!important;box-shadow:none!important}.site-nav .nav-contact{margin-top:4px!important;background:var(--yellow)!important;color:var(--ink)!important}}


/* ===== styles-v31-application.css ===== */
/* V31 — application CTAs, category-safe map controls, and larger section labels */

/* User requested larger labels such as “PERJALANAN PESERTA”. */
.eyebrow{
  font-size:clamp(16px,1.25vw,21px) !important;
  line-height:1.15;
  letter-spacing:.12em;
}
.card-kicker{font-size:clamp(14px,1.08vw,18px) !important;line-height:1.2}

.internship-position-head{
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:end;
}
.application-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:56px;
  padding:14px 22px;
  border:3px solid var(--ink);
  border-radius:999px;
  font-weight:900;
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.1;
  background:var(--yellow);
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .2s ease,box-shadow .2s ease;
  white-space:nowrap;
}
.application-cta:hover,.application-cta:focus-visible{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--ink)}
.application-cta-industry{background:var(--orange);color:#fff}
.application-cta span:last-child{font-size:1.2em}

.program-action-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:18px}
.program-action-row>a{margin:0 !important}
.application-coming-soon{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:9px 15px;
  border:2px dashed var(--ink);
  border-radius:999px;
  background:rgba(255,255,255,.55);
  font-size:14px;
  font-weight:900;
  letter-spacing:.02em;
}

.taiwan-map-filter{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:2px 0 18px;
}
.map-filter{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:8px 15px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:3px 3px 0 rgba(20,20,20,.18);
}
.map-filter.is-active{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--yellow)}
.taiwan-map-hotspot.is-filtered-out{opacity:0!important;pointer-events:none!important;visibility:hidden!important}
.taiwan-map-hotspot.industry .map-marker-icon{font-family:system-ui,sans-serif;font-size:.86em}
.taiwan-map-legend-item.industry .legend-pin{font-family:system-ui,sans-serif;font-size:13px}

/* Make map categories visually impossible to confuse. */
.taiwan-map-hotspot.hotel .map-marker{background:#ffd326!important}
.taiwan-map-hotspot.industry .map-marker{background:#ff6b2c!important;color:#fff!important}
.taiwan-map-tooltip.category-hotel{border-top:8px solid #ffd326}
.taiwan-map-tooltip.category-industry{border-top:8px solid #ff6b2c}

@media(max-width:860px){
  .internship-position-head{grid-template-columns:1fr;align-items:start}
  .application-cta{width:100%;white-space:normal;text-align:center}
  .eyebrow{font-size:clamp(15px,4.2vw,19px)!important}
}


/* ===== styles-v49.css ===== */
/* Han An Hua v48 — responsive collaboration + address picker */

/* The fifth collaboration card must never collapse into a narrow vertical strip. */
.collab-wheel{min-width:0}
.collab-item{min-width:0}
.collab-item.collab-industry{
  grid-column:1 / -1;
  width:min(100%,430px);
  max-width:430px;
  min-width:0;
  justify-self:center;
}
@media (max-width:820px){
  .collab-wheel{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    max-width:none!important;
  }
  .collab-item,
  .collab-item:nth-child(even),
  .collab-item.collab-industry{
    grid-column:1!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    justify-self:stretch!important;
  }
  .collab-item strong{overflow-wrap:normal;word-break:normal}
}

/* Address helper */
.address-helper{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:10px 0 0;
}
.address-map-button,
.address-format-button{
  min-height:44px;
  border:2px solid var(--ink,#151515);
  border-radius:14px;
  padding:9px 14px;
  background:#fff;
  color:var(--ink,#151515);
  font:inherit;
  font-weight:800;
  cursor:pointer;
  box-shadow:3px 3px 0 #e8dfbd;
}
.address-map-button{background:#ffd12b}
.address-map-button:hover,.address-format-button:hover{transform:translateY(-1px)}
.address-example{
  flex-basis:100%;
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:#666;
}
.address-map-dialog{
  width:min(920px,calc(100% - 28px));
  max-height:calc(100% - 28px);
  padding:24px;
  border:3px solid #171717;
  border-radius:26px;
  background:#fffdf4;
  box-shadow:10px 10px 0 #171717;
}
.address-map-dialog::backdrop{background:rgba(0,0,0,.58)}
.address-map-head{padding-right:42px}
.address-map-head h2{margin:2px 0 8px;font-family:var(--display,"Archivo Black",sans-serif);font-size:clamp(25px,4vw,38px)}
.address-map-head p{margin:0 0 18px;color:#5f5b50}
.address-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch}
.address-search-row input{min-width:0;min-height:48px}
.address-search-row button{min-height:48px}
.address-location-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.address-picker-status{min-height:22px;margin:12px 0 0;font-size:14px;font-weight:700;color:#665d42}
.address-results{display:grid;gap:9px;margin:14px 0 0;padding:0;list-style:none}
.address-result{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  border:2px solid #c8bea0;
  border-radius:14px;
  padding:11px 12px;
  background:#fff;
}
.address-result button{min-height:42px;border:2px solid #171717;border-radius:12px;background:#ffd12b;font-weight:900;padding:8px 12px;cursor:pointer}
.address-result strong{display:block;line-height:1.35}
.address-result small{display:block;margin-top:4px;color:#6d685b;line-height:1.35}
.address-map-preview{
  width:100%;
  min-height:300px;
  border:2px solid #171717;
  border-radius:18px;
  margin-top:16px;
  background:#eee;
}
.address-map-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
@media(max-width:620px){
  .address-search-row{grid-template-columns:1fr}
  .address-map-dialog{padding:18px;border-radius:20px}
  .address-result{grid-template-columns:1fr}
  .address-result button{width:100%}
  .address-map-preview{min-height:240px}
  .address-map-actions{display:grid;grid-template-columns:1fr}
  .address-map-actions button{width:100%}
}


/* ===== styles-v55-responsive.css ===== */
/* v55 — robust responsive scaling for browser zoom, tablets and phones. */
:root{--v55-fluid-pad:clamp(16px,4vw,72px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:0;width:100%;max-width:none;overflow-x:hidden}
img,video,svg,canvas{max-width:100%}
main,.site-header,.site-footer,main>section,.hero,.statement,.programs,.collaboration,.fields,.journey,.gallery,.director,.contact{width:100%;max-width:none!important;min-width:0;box-sizing:border-box}
.hero>* ,.statement-grid>* ,.program-card>* ,.collaboration>* ,.collab-wheel>* ,.field-grid>* ,.partner-columns>* ,.facility-grid>* ,.journey-grid>* ,.gallery-grid>* ,.director>* ,.contact-card>*{min-width:0}
.site-header{padding-left:clamp(14px,3.2vw,52px);padding-right:clamp(14px,3.2vw,52px)}
.section-pad{padding-left:var(--v55-fluid-pad);padding-right:var(--v55-fluid-pad)}
.display{font-size:clamp(2.55rem,6.2vw,7.35rem)}
.hero h1{font-size:clamp(3.4rem,7.5vw,9rem)}
.program-copy h3{font-size:clamp(2.45rem,4.6vw,5rem)}
.field-card h3,.industry-position-copy h3{overflow-wrap:break-word;word-break:normal}
.program-card figure img,.field-card img,.gallery-item img,.journey-step img,.director-photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:1180px){
  .site-nav{gap:clamp(8px,1.2vw,18px);font-size:14px}
  .brand{min-width:210px}.brand-copy strong{font-size:18px}
  .hero{grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);gap:clamp(24px,4vw,56px)}
  .collaboration{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}
@media(max-width:980px){
  .site-header{height:auto;min-height:var(--header-h);flex-wrap:wrap;row-gap:8px}
  .hero{grid-template-columns:1fr}.hero-collage{margin-top:34px}
  .collaboration{grid-template-columns:1fr}.collab-wheel{width:100%}
  .partner-columns{grid-template-columns:1fr!important}
  .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .field-grid{grid-template-columns:1fr}
  .hero-line{white-space:normal!important;overflow-wrap:normal}
  .display{font-size:clamp(2.45rem,12vw,4.25rem)}
  .hero h1{font-size:clamp(3rem,14vw,5.25rem)}
  .program-copy h3{font-size:clamp(2.35rem,11vw,4rem)}
  .section-pad{padding-left:clamp(18px,5vw,32px);padding-right:clamp(18px,5vw,32px)}
}
@media(max-width:520px){
  .site-header{padding-inline:12px}.brand-copy small{display:none}
  .hero-actions,.contact-actions{grid-template-columns:1fr!important}
  .button,.nav-cta,.application-button{max-width:100%;white-space:normal;text-align:center}
  .hero h1{font-size:clamp(2.7rem,13.5vw,4.2rem)}
  .display{font-size:clamp(2.2rem,11.8vw,3.65rem)}
}
@media(min-width:1800px){
  :root{--v55-fluid-pad:clamp(72px,6vw,150px)}
  body{font-size:clamp(18px,.9vw,22px)}
}


/* ===== cms-v56.css ===== */
/* Han An Hua v56 — secure admin/CMS UI. Hidden unless Ctrl+Q is used. */
.page-top-anchor{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.cms-admin-shell,.cms-login-dialog,.cms-image-dialog{font-family:"DM Sans",system-ui,sans-serif}
.cms-admin-shell[hidden],.cms-login-dialog[hidden],.cms-image-dialog[hidden]{display:none!important}
.cms-admin-shell{position:fixed;z-index:10000;top:16px;right:16px;width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;background:#fffdf3;border:3px solid #111;border-radius:24px;box-shadow:10px 10px 0 #111;padding:18px;color:#111}
.cms-admin-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;position:sticky;top:-18px;background:#fffdf3;padding:18px 0 12px;z-index:2}
.cms-admin-head h2{margin:0;font:900 24px/1.05 "Archivo Black",sans-serif}.cms-admin-head p{margin:4px 0 0;color:#666;font-size:12px}
.cms-icon-button{width:42px;height:42px;border:2px solid #111;border-radius:50%;background:#fff;cursor:pointer;font-size:20px;font-weight:900}
.cms-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:4px 0 14px}.cms-tab{border:2px solid #111;border-radius:999px;padding:8px 12px;background:#fff;cursor:pointer;font-weight:800}.cms-tab.is-active{background:#ffd12d}
.cms-pane[hidden]{display:none!important}.cms-pane h3{margin:16px 0 8px;font-size:18px}.cms-pane p{font-size:13px;color:#555}
.cms-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.cms-button{appearance:none;border:2px solid #111;border-radius:14px;background:#fff;padding:10px 13px;font-weight:800;cursor:pointer;min-height:42px}.cms-button.primary{background:#ffd12d}.cms-button.danger{background:#fff0ed;color:#a21c0c}.cms-button.dark{background:#111;color:#fff}.cms-button:disabled{opacity:.5;cursor:not-allowed}
.cms-field{display:grid;gap:5px;margin:9px 0}.cms-field label{font-size:12px;font-weight:800}.cms-field input,.cms-field select,.cms-field textarea{width:100%;box-sizing:border-box;border:2px solid #bbb09a;border-radius:12px;padding:10px;background:#fff;font:inherit;min-height:42px}.cms-field textarea{min-height:82px;resize:vertical}
.cms-card{border:2px solid #d6cbaa;border-radius:16px;background:#fff;padding:12px;margin:10px 0}.cms-card-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.cms-card-head strong{overflow-wrap:anywhere}.cms-thumb{width:68px;height:54px;object-fit:cover;border-radius:9px;border:1px solid #bbb;background:#eee}
.cms-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cms-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.cms-status{font-size:12px;font-weight:700;min-height:18px}.cms-status.ok{color:#14783b}.cms-status.error{color:#b52c1a}
.cms-login-dialog,.cms-image-dialog{position:fixed;z-index:10020;inset:0;background:rgba(0,0,0,.52);display:grid;place-items:center;padding:18px}.cms-modal-card{width:min(520px,100%);max-height:90dvh;overflow:auto;background:#fffdf3;border:3px solid #111;border-radius:24px;box-shadow:10px 10px 0 #111;padding:22px}.cms-modal-card h2{font:900 28px/1 "Archivo Black",sans-serif;margin:0 0 8px}.cms-modal-card p{color:#5f5a4d}.cms-search-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.cms-search-result{border:2px solid #111;border-radius:12px;padding:6px;background:#fff;cursor:pointer;text-align:left}.cms-search-result img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}.cms-search-result small{display:block;font-size:10px;line-height:1.25;margin-top:5px;overflow-wrap:anywhere}
.cms-edit-mode [data-i18n],.cms-edit-mode [data-i18n-html],.cms-image-edit-mode img:not(.taiwan-map-final-image):not(.photo-guide-image){outline:2px dashed #f45a2a;outline-offset:3px;cursor:text}
.cms-image-edit-mode img:not(.taiwan-map-final-image):not(.photo-guide-image){cursor:pointer;outline-color:#1478ff}
.cms-edit-mode [contenteditable="true"]:focus{outline:4px solid #ffd12d;background:#fffceb;color:#111;border-radius:4px}
.cms-pin-picking .taiwan-map-final-stage{outline:5px solid #1478ff;cursor:crosshair}.cms-pin-picking .taiwan-map-final-stage::after{content:"Klik posisi pin baru di peta";position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:20;background:#111;color:#fff;padding:9px 13px;border-radius:999px;font-weight:800;font-size:13px;pointer-events:none}
.cms-admin-badge{position:fixed;z-index:9998;right:14px;bottom:14px;background:#111;color:#fff;border:2px solid #fff;border-radius:999px;padding:7px 11px;font:800 11px/1 "DM Sans",sans-serif;box-shadow:0 0 0 2px #111;display:none}.cms-admin-authenticated .cms-admin-badge{display:block}
.cms-fit-target{min-width:0;overflow-wrap:break-word;word-break:normal;text-wrap:balance}
.cms-gallery-row{display:grid;grid-template-columns:80px 1fr;gap:10px;align-items:start}
.cms-privacy-note{margin-top:10px;padding:12px 14px;border:1.5px solid #cabc99;border-radius:13px;background:#fffdf5;font-size:12px;line-height:1.45;color:#4a463c}
@media(max-width:600px){.cms-admin-shell{top:8px;right:8px;max-height:calc(100dvh - 16px)}.cms-grid-2{grid-template-columns:1fr}.cms-search-results{grid-template-columns:1fr 1fr}.cms-modal-card{padding:16px}.cms-admin-head h2{font-size:21px}}
.footer-privacy{max-width:760px;margin:10px 0 0;font-size:12px;line-height:1.5;opacity:.76}


/* ===== styles-v59-map-legibility.css ===== */
/* V59 — Taiwan partner map legibility improvements
   Larger, solid, high-contrast labels and partner popovers.
   Avoid translucent/backdrop-filter text surfaces that can look soft when zoomed. */

.taiwan-map-final{
  width:min(100%,1560px);
  margin-inline:auto;
}

.taiwan-map-final-stage{
  max-width:1560px;
}

.taiwan-map-final-image{
  image-rendering:auto;
  -webkit-font-smoothing:antialiased;
  backface-visibility:visible;
}

.taiwan-map-filter{
  gap:14px;
  margin:6px 0 24px;
}

.map-filter{
  min-height:50px;
  padding:11px 20px;
  border-width:2.5px;
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.15;
  box-shadow:4px 4px 0 rgba(20,20,20,.18);
}

.taiwan-map-hotspot{
  width:clamp(48px,4.2vw,70px);
}

.map-marker{
  width:clamp(32px,3vw,50px);
  height:clamp(32px,3vw,50px);
  border-width:clamp(2px,.24vw,4px);
}

.map-marker-icon{
  font-size:clamp(13px,1.3vw,21px);
}

.map-city-label{
  left:calc(50% + 30px);
  max-width:240px;
  padding:7px 12px 8px;
  border:2px solid #fff;
  border-radius:11px;
  background:#fff;
  color:#0f3d68;
  box-shadow:0 4px 12px rgba(11,55,82,.22),0 0 0 1px rgba(15,61,104,.10);
  font-size:clamp(12px,1.05vw,17px);
  line-height:1.1;
  letter-spacing:0;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.taiwan-map-tooltip{
  width:min(430px,calc(100% - 34px));
  padding:20px 22px 18px;
  border:2px solid rgba(20,35,50,.20);
  border-radius:20px;
  background:#fff;
  color:#111b24;
  box-shadow:0 18px 42px rgba(16,40,60,.28),0 0 0 1px rgba(255,255,255,.8);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}

.taiwan-map-tooltip::before{
  background:#fff;
}

.taiwan-map-tooltip-kicker{
  margin-bottom:5px;
  font-size:13px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:.07em;
}

.taiwan-map-tooltip-title{
  margin-bottom:10px;
  font-size:clamp(21px,1.65vw,28px);
  line-height:1.1;
  letter-spacing:-.01em;
}

.taiwan-map-tooltip-list{
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.45;
  font-weight:650;
}

.taiwan-map-tooltip-list li{
  padding:6px 0 6px 19px;
}

.taiwan-map-tooltip-list li::before{
  left:2px;
  top:.83em;
  width:8px;
  height:8px;
}

.taiwan-map-tooltip-hint{
  margin-top:11px;
  padding-top:9px;
  font-size:12px;
  line-height:1.35;
  color:#58636e;
  font-weight:700;
}

.taiwan-map-help{
  font-size:clamp(13px,.95vw,16px);
  line-height:1.35;
}

@media (max-width:900px){
  .taiwan-map-filter{gap:10px;margin-bottom:18px}
  .map-filter{min-height:46px;padding:9px 15px;font-size:14px}
  .taiwan-map-hotspot{width:clamp(42px,7vw,58px)}
  .map-marker{width:clamp(28px,5.2vw,42px);height:clamp(28px,5.2vw,42px)}
  .map-marker-icon{font-size:clamp(11px,2.3vw,17px)}
  .map-city-label{font-size:clamp(11px,1.8vw,14px);padding:6px 9px 7px;left:calc(50% + 25px)}
}

@media (max-width:700px){
  .taiwan-map-filter{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .map-filter{width:100%;justify-content:center;white-space:normal;text-align:center}
  .taiwan-map-tooltip{
    left:50%!important;
    top:auto!important;
    bottom:14px;
    width:min(440px,calc(100% - 20px));
    padding:17px 18px 15px;
    border-radius:18px;
  }
  .taiwan-map-tooltip-kicker{font-size:12px}
  .taiwan-map-tooltip-title{font-size:21px}
  .taiwan-map-tooltip-list{font-size:15px;line-height:1.42}
  .taiwan-map-tooltip-hint{font-size:11px}
  /* Keep the map uncluttered on a phone; city is repeated clearly in the popover. */
  .map-city-label{display:none!important}
  .taiwan-map-help{font-size:12px}
}

@media (max-width:430px){
  .taiwan-map-filter{grid-template-columns:1fr}
  .map-filter{min-height:48px;font-size:15px}
  .taiwan-map-tooltip{width:calc(100% - 14px);bottom:8px}
}


/* ===== styles-v62-header-stable.css ===== */
/* v62 — stable desktop/tablet header. Text shrinks instead of wrapping/moving. */
@media (min-width:821px){
  .site-header{display:grid!important;grid-template-columns:minmax(155px,clamp(170px,19vw,270px)) minmax(0,1fr)!important;align-items:center!important;flex-wrap:nowrap!important;row-gap:0!important;height:var(--header-h)!important;min-height:var(--header-h)!important;padding-inline:clamp(10px,2.4vw,42px)!important}
  .brand{min-width:0!important;width:auto!important;gap:clamp(7px,.8vw,14px)!important;overflow:hidden}
  .brand img{width:clamp(46px,5vw,68px)!important;height:clamp(46px,5vw,68px)!important;flex:0 0 auto}
  .brand-copy{min-width:0}.brand-copy strong{font-size:clamp(14px,1.55vw,21px)!important;line-height:.95!important;max-width:none!important;white-space:nowrap!important}.brand-copy strong br{display:none}.brand-copy small{display:block!important;margin-top:clamp(3px,.45vw,7px)!important;font-size:clamp(8px,.8vw,12px)!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
  .menu-toggle{display:none!important}
  .site-nav{position:static!important;inset:auto!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-end!important;min-width:0!important;gap:clamp(5px,.9vw,18px)!important;padding:0!important;margin:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;opacity:1!important;pointer-events:auto!important;font-size:clamp(10.5px,1.05vw,16px)!important}
  .site-nav>a{flex:0 0 auto!important;white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;padding:clamp(7px,.8vw,12px) 2px!important;border-bottom:0!important;line-height:1.05!important}
  .site-nav .nav-apply,.site-nav .nav-contact{padding:clamp(8px,.85vw,13px) clamp(10px,1.25vw,24px)!important;border-width:clamp(2px,.22vw,3px)!important;box-shadow:clamp(2px,.35vw,4px) clamp(2px,.35vw,4px) 0 var(--ink)!important}
  .language-switcher{flex:0 1 clamp(122px,14vw,200px)!important;min-width:112px!important;max-width:200px!important;white-space:nowrap!important}.language-select{width:100%!important;min-width:0!important;font-size:clamp(10px,.9vw,14px)!important;padding-right:clamp(20px,2vw,34px)!important}
}
@media (min-width:821px) and (max-width:980px){
  .site-header{grid-template-columns:155px minmax(0,1fr)!important;padding-inline:8px!important}.brand img{width:46px!important;height:46px!important}.brand-copy strong{font-size:13px!important}.brand-copy small{font-size:8px!important}.site-nav{gap:4px!important;font-size:10.5px!important}.site-nav .nav-apply,.site-nav .nav-contact{padding:8px 10px!important;box-shadow:2px 2px 0 var(--ink)!important}.language-switcher{flex-basis:118px!important;min-width:110px!important}.language-select{font-size:10px!important}
}


/* ===== styles-v63-partners.css ===== */
/* Han An Hua v63 — left-aligned internship section + compact expandable partner lists */
/* Keep the first internship section anchored to the same left edge as section padding. */
.fields-head,
.fields > .internship-position-block,
.fields > .partner-showcase{
  margin-left:0 !important;
  margin-right:auto !important;
}
.fields-head{max-width:min(1050px,100%) !important;}
.fields > .internship-position-block,
.fields > .partner-showcase{max-width:min(1540px,100%) !important;}

/* Compact long partner lists. */
.hotel-partner-list:not(.is-expanded) > .partner-extra-item,
.industry-partner-list:not(.is-expanded) > .partner-extra-item{display:none !important;}
.partner-view-more{
  margin:18px auto 0;
  min-width:190px;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--yellow);
  color:var(--ink);
  font:900 14px/1 var(--body);
  box-shadow:4px 5px 0 var(--ink);
  cursor:pointer;
}
.partner-view-more:hover{transform:translate(-1px,-1px);box-shadow:5px 6px 0 var(--ink)}
.partner-view-more span:last-child{font-size:20px;line-height:.7}

/* Partner rows can link to official sites without changing the visual system. */
a.hotel-partner,a.industry-partner-row{text-decoration:none;color:inherit;position:relative;padding-right:46px;}
.partner-public-card.has-website{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease;}
.partner-public-card.has-website:hover{transform:translateY(-2px);box-shadow:4px 5px 0 rgba(18,18,18,.16);background:#fff8cf;}
.partner-public-card.has-website:focus-visible{outline:4px solid var(--orange);outline-offset:3px;}
.partner-site-arrow{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:18px;font-weight:900;color:var(--orange);}
.taiwan-map-tooltip-list a{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;font-weight:850;}
.taiwan-map-tooltip-list a:hover{color:var(--orange);}

@media(max-width:820px){
  .fields-head,.fields > .internship-position-block,.fields > .partner-showcase{max-width:100% !important;}
  .partner-view-more{width:min(100%,280px);}
}

/* ============================================================
   V64 — header + hero wide-screen alignment / title fit
   Minimal override only. Existing page structure and content stay unchanged.
   ============================================================ */

/* Desktop/tablet header: keep the full foundation name visible and
   keep the header content from stretching to the extreme edges on wide screens. */
@media (min-width:821px){
  .site-header{
    grid-template-columns:clamp(240px,18vw,320px) minmax(0,1fr) !important;
    padding-left:max(18px,calc((100vw - 1680px)/2 + 18px)) !important;
    padding-right:max(18px,calc((100vw - 1680px)/2 + 18px)) !important;
  }
  .brand{
    min-width:0 !important;
    overflow:visible !important;
  }
  .brand-copy{
    min-width:0 !important;
    overflow:visible !important;
  }
  .brand-copy strong{
    max-width:none !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    font-size:clamp(13px,1.05vw,18px) !important;
    letter-spacing:-.035em !important;
  }
  .brand-copy small{
    max-width:none !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    font-size:clamp(8px,.66vw,11px) !important;
  }

  /* Hero keeps a comfortable centered reading width on wide monitors. */
  .hero{
    padding-left:max(38px,calc((100vw - 1680px)/2 + 38px)) !important;
    padding-right:max(38px,calc((100vw - 1680px)/2 + 38px)) !important;
  }

  /* Prevent the final letter of “Pendidikan” (or other translated hero lines)
     from dropping to a new line. Font size follows the actual text-column width. */
  .hero-line{
    width:max-content !important;
    max-width:none !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
  }
  @supports (font-size:1cqi){
    .hero-copy h1{
      font-size:clamp(60px,11.6cqi,112px) !important;
      line-height:.86 !important;
    }
  }
}

/* Compact desktop widths: reserve enough room for navigation without clipping the brand. */
@media (min-width:821px) and (max-width:1100px){
  .site-header{
    grid-template-columns:210px minmax(0,1fr) !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .brand{gap:7px !important;}
  .brand img{width:46px !important;height:46px !important;}
  .brand-copy strong{font-size:12px !important;}
  .brand-copy small{font-size:7.5px !important;}
}

@media (min-width:1101px) and (max-width:1350px){
  .site-header{grid-template-columns:245px minmax(0,1fr) !important;}
  .brand img{width:52px !important;height:52px !important;}
  .brand-copy strong{font-size:13px !important;}
  .brand-copy small{font-size:8px !important;}
}

/* ============================================================
   V65 — partner link arrow separation + compact filled gallery
   Minimal CSS-only patch. No HTML/JS/content changes.
   ============================================================ */

/* Hotel cards with official links: give stars and the external-link arrow
   their own grid columns so the arrow never overlaps the rating. */
@media (min-width:721px){
  a.hotel-partner.has-website{
    grid-template-columns:128px minmax(0,1fr) max-content 36px !important;
    column-gap:18px !important;
    padding-right:18px !important;
  }

  a.hotel-partner.has-website .star-rating{
    grid-column:3 !important;
    justify-self:end !important;
    margin:0 !important;
  }

  a.hotel-partner.has-website .partner-site-arrow{
    position:static !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    grid-column:4 !important;
    justify-self:end !important;
    align-self:center !important;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:2px solid var(--ink);
    border-radius:50%;
    background:#fff;
    color:var(--orange);
    font-size:17px;
    line-height:1;
  }
}

/* Keep the same separation on phones/tablets while allowing the rating
   to sit naturally below the hotel name. */
@media (max-width:720px){
  a.hotel-partner.has-website{
    grid-template-columns:96px minmax(0,1fr) 34px !important;
    grid-template-rows:auto auto !important;
    column-gap:12px !important;
    row-gap:3px !important;
    padding-right:12px !important;
  }

  a.hotel-partner.has-website > .partner-thumb-wrap{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
  }

  a.hotel-partner.has-website > .partner-row-copy{
    grid-column:2 !important;
    grid-row:1 !important;
  }

  a.hotel-partner.has-website .star-rating{
    grid-column:2 !important;
    grid-row:2 !important;
    justify-self:start !important;
    margin:0 !important;
  }

  a.hotel-partner.has-website .partner-site-arrow{
    position:static !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    grid-column:3 !important;
    grid-row:1 / span 2 !important;
    justify-self:end !important;
    align-self:center !important;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border:2px solid var(--ink);
    border-radius:50%;
    background:#fff;
    color:var(--orange);
    font-size:16px;
    line-height:1;
  }
}

@media (max-width:430px){
  a.hotel-partner.has-website{
    grid-template-columns:88px minmax(0,1fr) 32px !important;
    column-gap:10px !important;
  }
}

/* Documentation gallery: use a complete 4-column × 2-row mosaic for each
   group of five images. The old pattern left two empty black cells because
   item 5 was wide while item 4 was narrow. This swaps those spans in CSS,
   including dynamically rendered CMS gallery items, without changing HTML. */
@media (min-width:821px){
  .departure-gallery{
    grid-auto-flow:row dense !important;
  }

  .departure-gallery > .gallery-item:nth-child(5n + 4){
    grid-column:span 2 !important;
  }

  .departure-gallery > .gallery-item:nth-child(5n + 5){
    grid-column:span 1 !important;
  }
}

/* ============================================================
   V66 — visual brand lock-up
   Keep “HanAnHua” together as one brand word in Indonesian:
   “Yayasan HanAnHua”. CSS-only so the user's edited HTML/JS is untouched.
   ============================================================ */
html[lang="id"] .site-header .brand-copy strong[data-i18n-html="brand.name"]{
  font-size:0 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
html[lang="id"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  content:"Yayasan HanAnHua";
  display:inline-block;
  font-family:var(--display);
  font-size:clamp(13px,1.05vw,18px);
  line-height:.95;
  letter-spacing:-.035em;
  white-space:nowrap;
}
@media (min-width:821px) and (max-width:1100px){
  html[lang="id"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{font-size:12px;}
}
@media (min-width:1101px) and (max-width:1350px){
  html[lang="id"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{font-size:13px;}
}
@media (max-width:820px){
  html[lang="id"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:clamp(12px,3.5vw,16px);
    letter-spacing:-.04em;
  }
}

/* ============================================================
   V67 — transparent Yayasan seal in the desktop hero
   Decorative CSS-only insertion so the existing HTML/JS remains untouched.
   ============================================================ */
@media (min-width:1181px){
  .hero::after{
    content:"";
    position:absolute;
    z-index:1;
    top:clamp(52px,7.5vh,92px);
    right:clamp(64px,5.2vw,118px);
    width:clamp(138px,10.8vw,188px);
    aspect-ratio:1;
    background:url("/assets/images/yayasan-seal-transparent-v76.webp") center/contain no-repeat;
    opacity:.96;
    pointer-events:none;
    filter:drop-shadow(0 5px 7px rgba(117,34,25,.10));
  }
}

/* Slightly smaller on compact desktop widths so it stays clear of the collage. */
@media (min-width:981px) and (max-width:1180px){
  .hero::after{
    content:"";
    position:absolute;
    z-index:1;
    top:42px;
    right:34px;
    width:112px;
    aspect-ratio:1;
    background:url("/assets/images/yayasan-seal-transparent-v76.webp") center/contain no-repeat;
    opacity:.92;
    pointer-events:none;
  }
}

/* Keep tablet/mobile hero uncluttered. */
@media (max-width:980px){
  .hero::after{display:none!important;}
}

/* ============================================================
   V68 — keep the Yayasan seal visible at every responsive width
   The seal stays in the unused top-right corner of the hero and scales down
   before the hero becomes narrow, so it does not cover the headline, buttons,
   badges, or photo collage.
   ============================================================ */

/* Compact desktop / tablet: the hero becomes a single column at 1180px,
   so keep the seal high in the right corner instead of beside the collage. */
@media (min-width:821px) and (max-width:1180px){
  .hero::after{
    display:block !important;
    content:"";
    position:absolute;
    z-index:2;
    top:12px;
    right:18px;
    width:clamp(72px,8.2vw,92px);
    aspect-ratio:1;
    background:url("/assets/images/yayasan-seal-transparent-v76.webp") center/contain no-repeat;
    opacity:.94;
    pointer-events:none;
    filter:drop-shadow(0 4px 6px rgba(117,34,25,.08));
  }
}

/* Mobile: keep the seal inside the decorative top-right corner.
   Its smaller size keeps it clear of the eyebrow/title and the collage below. */
@media (min-width:481px) and (max-width:820px){
  .hero::after{
    display:block !important;
    content:"";
    position:absolute;
    z-index:2;
    top:8px;
    right:12px;
    width:clamp(60px,10.5vw,72px);
    aspect-ratio:1;
    background:url("/assets/images/yayasan-seal-transparent-v76.webp") center/contain no-repeat;
    opacity:.93;
    pointer-events:none;
    filter:drop-shadow(0 3px 5px rgba(117,34,25,.08));
  }
}

/* Small phones: reduce it once more so the branding remains visible without
   taking space from the headline. */
@media (max-width:480px){
  .hero::after{
    display:block !important;
    content:"";
    position:absolute;
    z-index:2;
    top:6px;
    right:8px;
    width:54px;
    aspect-ratio:1;
    background:url("/assets/images/yayasan-seal-transparent-v76.webp") center/contain no-repeat;
    opacity:.92;
    pointer-events:none;
    filter:drop-shadow(0 3px 5px rgba(117,34,25,.07));
  }
}


/* ============================================================
   V69 — larger multilingual brand lock-up
   Official brand token is always kept as “HanAnHua”.  The legal-form word
   (Yayasan / Foundation / 基金會 / etc.) is separated with a real space and
   the name is never allowed to split inside “HanAnHua”.
   ============================================================ */

/* Retire the older Indonesian pseudo-text workaround now that the i18n
   strings themselves use the correct brand spelling. */
html[lang="id"] .site-header .brand-copy strong[data-i18n-html="brand.name"]{
  font-size:clamp(16px,1.3vw,20px) !important;
}
html[lang="id"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  content:none !important;
  display:none !important;
}

.site-header .brand{
  overflow:visible !important;
  gap:clamp(10px,1vw,16px) !important;
}
.site-header .brand img{
  object-fit:contain !important;
  flex:0 0 auto !important;
}
.site-header .brand-copy{
  min-width:0 !important;
  overflow:visible !important;
}
.site-header .brand-copy strong{
  display:block !important;
  max-width:none !important;
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:.96 !important;
  letter-spacing:-.025em !important;
}
.site-header .brand-copy strong br{display:none !important;}
.site-header .brand-copy small{
  display:block !important;
  max-width:none !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

/* Wide desktop: make the seal and foundation name substantially easier to read. */
@media (min-width:1351px){
  .site-header{
    grid-template-columns:clamp(330px,24vw,390px) minmax(0,1fr) !important;
  }
  .site-header .brand img{
    width:76px !important;
    height:76px !important;
  }
  .site-header .brand-copy strong{
    font-size:20px !important;
  }
  .site-header .brand-copy small{
    margin-top:6px !important;
    font-size:11px !important;
  }
}

/* Normal desktop. */
@media (min-width:1101px) and (max-width:1350px){
  .site-header{
    grid-template-columns:290px minmax(0,1fr) !important;
  }
  .site-header .brand img{
    width:64px !important;
    height:64px !important;
  }
  .site-header .brand-copy strong{
    font-size:16px !important;
  }
  .site-header .brand-copy small{
    margin-top:5px !important;
    font-size:9px !important;
  }
}

/* Compact desktop: keep the name legible without taking space from navigation. */
@media (min-width:981px) and (max-width:1100px){
  .site-header{
    grid-template-columns:235px minmax(0,1fr) !important;
  }
  .site-header .brand img{
    width:54px !important;
    height:54px !important;
  }
  .site-header .brand-copy strong{
    font-size:13px !important;
  }
  .site-header .brand-copy small{
    margin-top:3px !important;
    font-size:7.8px !important;
  }
}

/* Narrow tablet widths still use the desktop nav, so scale the lock-up
   carefully while preserving the whole brand name. */
@media (min-width:821px) and (max-width:980px){
  .site-header{
    grid-template-columns:190px minmax(0,1fr) !important;
  }
  .site-header .brand{gap:7px !important;}
  .site-header .brand img{
    width:46px !important;
    height:46px !important;
  }
  .site-header .brand-copy strong{
    font-size:11px !important;
    letter-spacing:-.035em !important;
  }
  .site-header .brand-copy small{
    margin-top:2px !important;
    font-size:7px !important;
  }
}

/* Mobile header: keep the brand clearly visible beside the menu button. */
@media (max-width:820px){
  .site-header .brand{
    min-width:0 !important;
    max-width:calc(100% - 92px) !important;
  }
  .site-header .brand img{
    width:56px !important;
    height:56px !important;
  }
  .site-header .brand-copy strong{
    font-size:14px !important;
    letter-spacing:-.03em !important;
  }
  .site-header .brand-copy small{
    display:none !important;
  }
}

@media (max-width:420px){
  .site-header .brand img{
    width:50px !important;
    height:50px !important;
  }
  .site-header .brand-copy strong{
    font-size:12.5px !important;
  }
}


/* V69.1 — force the official HanAnHua lock-up visually in EVERY language.
   This final override is CSS-only, so it is safe even if index.html or the
   translation files on the live site have been edited separately. */
.site-header .brand-copy strong[data-i18n-html="brand.name"]{
  font-size:0 !important;
  white-space:nowrap !important;
}
.site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  display:inline-block !important;
  font-family:var(--display) !important;
  font-weight:900 !important;
  line-height:.96 !important;
  letter-spacing:-.025em !important;
  white-space:nowrap !important;
  word-break:keep-all !important;
}

/* Default / Indonesian before language JS finishes loading. */
html:not([data-language]) .site-header .brand-copy strong[data-i18n-html="brand.name"]::before,
html[data-language="id"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  content:"Yayasan HanAnHua" !important;
}
html[data-language="en"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  content:"HanAnHua Foundation" !important;
}
html[data-language="tw"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  content:"韓安華基金會" !important;
}
html[data-language="cn"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  content:"韩安华基金会" !important;
}
html[data-language="ja"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  content:"韓安華財団" !important;
}
html[data-language="ko"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  content:"HanAnHua 재단" !important;
}
html[data-language="es"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  content:"Fundación HanAnHua" !important;
}
html[data-language="fr"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  content:"Fondation HanAnHua" !important;
}
html[data-language="de"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  content:"HanAnHua Stiftung" !important;
}
html[data-language="ar"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  content:"مؤسسة HanAnHua" !important;
}

@media (min-width:1351px){
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{font-size:20px !important;}
}
@media (min-width:1101px) and (max-width:1350px){
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{font-size:16px !important;}
}
@media (min-width:981px) and (max-width:1100px){
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{font-size:13px !important;}
}
@media (min-width:821px) and (max-width:980px){
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{font-size:11px !important;}
}
@media (max-width:820px){
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{font-size:14px !important;}
}
@media (max-width:420px){
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{font-size:12.5px !important;}
}

/* ============================================================
   V70 — fluid brand scaling + larger hero seal
   Applies to every language and adapts to browser/device width.
   HanAnHua remains a single, unbroken brand token through V69.1.
   ============================================================ */

/* Header brand: scale the seal and wording fluidly, not as one fixed desktop size. */
.site-header .brand{
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:min(46vw,560px) !important;
  gap:clamp(10px,1.05vw,18px) !important;
}
.site-header .brand img{
  width:clamp(60px,4.9vw,88px) !important;
  height:clamp(60px,4.9vw,88px) !important;
}
.site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  font-size:clamp(16px,1.42vw,23px) !important;
  letter-spacing:-.025em !important;
}
.site-header .brand-copy small{
  margin-top:clamp(3px,.4vw,6px) !important;
  font-size:clamp(9px,.73vw,12px) !important;
  line-height:1.05 !important;
}

/* Very wide monitors: let the brand breathe and become clearly visible. */
@media (min-width:1600px){
  .site-header .brand{max-width:600px !important;}
  .site-header .brand img{
    width:92px !important;
    height:92px !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:24px !important;
  }
  .site-header .brand-copy small{font-size:12.5px !important;}
}

/* Normal desktop: larger than V69, while still leaving room for navigation. */
@media (min-width:1181px) and (max-width:1599px){
  .site-header .brand img{
    width:clamp(70px,5.1vw,82px) !important;
    height:clamp(70px,5.1vw,82px) !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:clamp(17px,1.35vw,21px) !important;
  }
  .site-header .brand-copy small{
    font-size:clamp(9.5px,.72vw,11.5px) !important;
  }
}

/* Compact desktop: still readable, but protected from the navigation area. */
@media (min-width:981px) and (max-width:1180px){
  .site-header .brand{
    max-width:285px !important;
    gap:9px !important;
  }
  .site-header .brand img{
    width:60px !important;
    height:60px !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:14px !important;
  }
  .site-header .brand-copy small{
    font-size:8px !important;
    margin-top:3px !important;
  }
}

/* Tablet widths with desktop navigation. */
@media (min-width:821px) and (max-width:980px){
  .site-header .brand{
    max-width:235px !important;
    gap:8px !important;
  }
  .site-header .brand img{
    width:54px !important;
    height:54px !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:12.5px !important;
  }
  .site-header .brand-copy small{
    font-size:7.2px !important;
    margin-top:2px !important;
  }
}

/* Phones: menu is collapsed, so the brand can be larger again. */
@media (max-width:820px){
  .site-header .brand{
    max-width:calc(100% - 94px) !important;
    gap:9px !important;
  }
  .site-header .brand img{
    width:clamp(54px,14vw,66px) !important;
    height:clamp(54px,14vw,66px) !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:clamp(13.5px,3.8vw,17px) !important;
  }
}
@media (max-width:420px){
  .site-header .brand img{
    width:52px !important;
    height:52px !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:13px !important;
  }
}

/* Hero decorative Yayasan seal: make it much more prominent and move it
   toward the collage so it visually belongs to the hero composition. */
@media (min-width:1351px){
  .hero::after{
    display:block !important;
    top:clamp(56px,5vw,92px) !important;
    right:clamp(58px,6vw,112px) !important;
    width:clamp(220px,15.5vw,292px) !important;
    opacity:.97 !important;
  }
}

@media (min-width:1181px) and (max-width:1350px){
  .hero::after{
    display:block !important;
    top:40px !important;
    right:clamp(42px,5vw,72px) !important;
    width:clamp(190px,17vw,230px) !important;
    opacity:.97 !important;
  }
}

/* At this width the composition is close to the user's second screenshot:
   enlarge the seal enough that its left edge approaches the photo without
   covering the headline or the collage. */
@media (min-width:821px) and (max-width:1180px){
  .hero::after{
    display:block !important;
    top:clamp(20px,3vw,34px) !important;
    right:clamp(40px,6.5vw,78px) !important;
    width:clamp(172px,21.5vw,232px) !important;
    opacity:.97 !important;
    filter:drop-shadow(0 5px 8px rgba(117,34,25,.09)) !important;
  }
}

/* On mobile, keep the logo visible but deliberately smaller so it cannot
   obstruct translated headlines or the photo collage. */
@media (min-width:481px) and (max-width:820px){
  .hero::after{
    display:block !important;
    top:10px !important;
    right:12px !important;
    width:clamp(72px,12vw,92px) !important;
    opacity:.95 !important;
  }
}
@media (max-width:480px){
  .hero::after{
    display:block !important;
    top:8px !important;
    right:8px !important;
    width:62px !important;
    opacity:.94 !important;
  }
}


/* V71 — official CJK foundation names; keep the full organization name on one line. */
html[data-language="tw"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before,
html[data-language="cn"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before,
html[data-language="ja"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  font-family:"Noto Sans CJK TC","Noto Sans CJK SC","Noto Sans JP","Yu Gothic","Microsoft JhengHei","Microsoft YaHei",sans-serif !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
  word-break:keep-all !important;
}

/* ============================================================
   V72 — substantially larger, readable header brand on every device/language
   The organization name remains one line; HanAnHua never splits.
   This final override deliberately supersedes older V64–V71 sizing rules.
   ============================================================ */
.site-header .brand{
  overflow:visible !important;
}
.site-header .brand-copy{
  overflow:visible !important;
}
.site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  line-height:.94 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  text-rendering:geometricPrecision;
}
.site-header .brand-copy small{
  font-weight:800 !important;
  letter-spacing:.015em !important;
  line-height:1.12 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

/* Large laptops / desktop — this is the main readability fix. */
@media (min-width:1351px){
  :root{--header-h:112px !important;}
  .site-header{
    height:var(--header-h) !important;
    min-height:var(--header-h) !important;
    grid-template-columns:minmax(410px,31vw) minmax(0,1fr) !important;
    padding-top:9px !important;
    padding-bottom:9px !important;
  }
  .site-header .brand{
    max-width:560px !important;
    gap:16px !important;
  }
  .site-header .brand img{
    width:92px !important;
    height:92px !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:28px !important;
    letter-spacing:-.022em !important;
  }
  .site-header .brand-copy small{
    margin-top:6px !important;
    font-size:13px !important;
  }
}

/* Extra-wide monitors: a little larger again instead of looking tiny in empty space. */
@media (min-width:1800px){
  :root{--header-h:120px !important;}
  .site-header{
    grid-template-columns:minmax(455px,29vw) minmax(0,1fr) !important;
  }
  .site-header .brand img{
    width:100px !important;
    height:100px !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:31px !important;
  }
  .site-header .brand-copy small{
    font-size:14px !important;
  }
}

/* Mid-size desktop: still clearly readable while preserving room for navigation. */
@media (min-width:1181px) and (max-width:1350px){
  :root{--header-h:102px !important;}
  .site-header{
    height:var(--header-h) !important;
    min-height:var(--header-h) !important;
    grid-template-columns:340px minmax(0,1fr) !important;
  }
  .site-header .brand{
    max-width:340px !important;
    gap:12px !important;
  }
  .site-header .brand img{
    width:78px !important;
    height:78px !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:21px !important;
    letter-spacing:-.025em !important;
  }
  .site-header .brand-copy small{
    margin-top:5px !important;
    font-size:10.5px !important;
  }
}

/* Compact desktop: avoid overlap with the full navigation, but no tiny brand text. */
@media (min-width:981px) and (max-width:1180px){
  :root{--header-h:94px !important;}
  .site-header{
    height:var(--header-h) !important;
    min-height:var(--header-h) !important;
    grid-template-columns:285px minmax(0,1fr) !important;
  }
  .site-header .brand{
    max-width:285px !important;
    gap:10px !important;
  }
  .site-header .brand img{
    width:66px !important;
    height:66px !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:17px !important;
    letter-spacing:-.03em !important;
  }
  .site-header .brand-copy small{
    margin-top:4px !important;
    font-size:9px !important;
  }
}

/* Tablet with desktop navigation. */
@media (min-width:821px) and (max-width:980px){
  :root{--header-h:88px !important;}
  .site-header{
    height:var(--header-h) !important;
    min-height:var(--header-h) !important;
    grid-template-columns:225px minmax(0,1fr) !important;
  }
  .site-header .brand{
    max-width:225px !important;
    gap:8px !important;
  }
  .site-header .brand img{
    width:58px !important;
    height:58px !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:14.5px !important;
    letter-spacing:-.03em !important;
  }
  .site-header .brand-copy small{
    margin-top:3px !important;
    font-size:8px !important;
  }
}

/* Phones: navigation is collapsed, so make the brand comfortably readable. */
@media (max-width:820px){
  :root{--header-h:88px !important;}
  .site-header{
    height:var(--header-h) !important;
    min-height:var(--header-h) !important;
  }
  .site-header .brand{
    max-width:calc(100% - 92px) !important;
    gap:10px !important;
  }
  .site-header .brand img{
    width:64px !important;
    height:64px !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:16px !important;
    letter-spacing:-.025em !important;
  }
  .site-header .brand-copy small{
    display:block !important;
    margin-top:3px !important;
    font-size:8.5px !important;
  }
}

@media (max-width:520px){
  .site-header .brand img{
    width:58px !important;
    height:58px !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:14.5px !important;
  }
  .site-header .brand-copy small{
    font-size:7.5px !important;
  }
}

@media (max-width:390px){
  .site-header .brand{
    gap:7px !important;
  }
  .site-header .brand img{
    width:54px !important;
    height:54px !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:13.5px !important;
  }
  .site-header .brand-copy small{
    display:none !important;
  }
}

/* ============================================================
   V73 — larger, high-legibility header typography on every language/device
   Enlarges the foundation name, tagline, nav links, CTA buttons and language
   selector while preserving responsive fit. HanAnHua/CJK lock-ups stay intact.
   ============================================================ */
.site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
  font-weight:900 !important;
  line-height:.96 !important;
}
.site-header .site-nav > a{
  font-weight:900 !important;
  line-height:1.05 !important;
}
.site-header .language-select{
  font-weight:800 !important;
}

/* Wide desktop / large laptop */
@media (min-width:1351px){
  :root{--header-h:126px !important;}
  .site-header{
    height:var(--header-h) !important;
    min-height:var(--header-h) !important;
    grid-template-columns:minmax(500px,34vw) minmax(0,1fr) !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }
  .site-header .brand{
    max-width:650px !important;
    gap:18px !important;
  }
  .site-header .brand img{
    width:100px !important;
    height:100px !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:34px !important;
    letter-spacing:-.025em !important;
  }
  .site-header .brand-copy small{
    margin-top:7px !important;
    font-size:15px !important;
    line-height:1.12 !important;
  }
  .site-header .site-nav{
    gap:clamp(10px,1.05vw,19px) !important;
    font-size:18px !important;
  }
  .site-header .site-nav > a:not(.nav-cta){
    padding:13px 2px !important;
  }
  .site-header .site-nav .nav-apply,
  .site-header .site-nav .nav-contact{
    font-size:17px !important;
    padding:13px 23px !important;
  }
  .site-header .language-switcher{
    flex-basis:190px !important;
    min-width:170px !important;
    max-width:210px !important;
  }
  .site-header .language-select{
    font-size:16px !important;
    min-height:48px !important;
  }
}

/* Very wide monitors */
@media (min-width:1800px){
  :root{--header-h:136px !important;}
  .site-header{
    grid-template-columns:minmax(540px,32vw) minmax(0,1fr) !important;
  }
  .site-header .brand img{
    width:110px !important;
    height:110px !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:38px !important;
  }
  .site-header .brand-copy small{font-size:16px !important;}
  .site-header .site-nav{font-size:19px !important;}
  .site-header .site-nav .nav-apply,
  .site-header .site-nav .nav-contact{font-size:18px !important;}
  .site-header .language-select{font-size:17px !important;}
}

/* Standard laptop */
@media (min-width:1181px) and (max-width:1350px){
  :root{--header-h:116px !important;}
  .site-header{
    height:var(--header-h) !important;
    min-height:var(--header-h) !important;
    grid-template-columns:390px minmax(0,1fr) !important;
  }
  .site-header .brand{max-width:390px !important;gap:14px !important;}
  .site-header .brand img{width:86px !important;height:86px !important;}
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:25px !important;
    letter-spacing:-.025em !important;
  }
  .site-header .brand-copy small{font-size:12px !important;margin-top:5px !important;}
  .site-header .site-nav{gap:7px !important;font-size:15.5px !important;}
  .site-header .site-nav > a:not(.nav-cta){padding:11px 1px !important;}
  .site-header .site-nav .nav-apply,
  .site-header .site-nav .nav-contact{font-size:15px !important;padding:11px 15px !important;}
  .site-header .language-switcher{flex-basis:154px !important;min-width:145px !important;max-width:168px !important;}
  .site-header .language-select{font-size:13.5px !important;min-height:44px !important;}
}

/* Compact laptop / landscape tablet with full nav */
@media (min-width:981px) and (max-width:1180px){
  :root{--header-h:106px !important;}
  .site-header{
    height:var(--header-h) !important;
    min-height:var(--header-h) !important;
    grid-template-columns:310px minmax(0,1fr) !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .site-header .brand{max-width:310px !important;gap:10px !important;}
  .site-header .brand img{width:74px !important;height:74px !important;}
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{font-size:20px !important;}
  .site-header .brand-copy small{font-size:10px !important;margin-top:4px !important;}
  .site-header .site-nav{gap:4px !important;font-size:13px !important;}
  .site-header .site-nav > a:not(.nav-cta){padding:9px 1px !important;}
  .site-header .site-nav .nav-apply,
  .site-header .site-nav .nav-contact{font-size:12.5px !important;padding:9px 10px !important;}
  .site-header .language-switcher{flex-basis:128px !important;min-width:122px !important;max-width:138px !important;}
  .site-header .language-select{font-size:11.5px !important;min-height:40px !important;}
}

@media (min-width:821px) and (max-width:980px){
  :root{--header-h:100px !important;}
  .site-header{
    height:var(--header-h) !important;
    min-height:var(--header-h) !important;
    grid-template-columns:245px minmax(0,1fr) !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  .site-header .brand{max-width:245px !important;gap:8px !important;}
  .site-header .brand img{width:68px !important;height:68px !important;}
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{font-size:17px !important;}
  .site-header .brand-copy small{font-size:8.5px !important;}
  .site-header .site-nav{gap:3px !important;font-size:11.5px !important;}
  .site-header .site-nav .nav-apply,
  .site-header .site-nav .nav-contact{font-size:11px !important;padding:8px 8px !important;}
  .site-header .language-switcher{flex-basis:116px !important;min-width:110px !important;max-width:122px !important;}
  .site-header .language-select{font-size:10.5px !important;min-height:38px !important;}
}

/* Mobile menu: make both branding and opened menu clearly readable. */
@media (max-width:820px){
  :root{--header-h:96px !important;}
  .site-header{height:var(--header-h) !important;min-height:var(--header-h) !important;}
  .site-header .brand{max-width:calc(100% - 88px) !important;gap:11px !important;}
  .site-header .brand img{width:70px !important;height:70px !important;}
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{font-size:19px !important;}
  .site-header .brand-copy small{display:block !important;font-size:9.5px !important;margin-top:4px !important;}
  .site-header .menu-toggle b{font-size:16px !important;}
  .site-header .site-nav.open > a{font-size:22px !important;}
  .site-header .site-nav.open .nav-cta{font-size:20px !important;}
  .site-header .site-nav.open .language-select{font-size:17px !important;min-height:48px !important;}
}

@media (max-width:520px){
  .site-header .brand img{width:64px !important;height:64px !important;}
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{font-size:17px !important;}
  .site-header .brand-copy small{font-size:8.5px !important;}
}

@media (max-width:390px){
  .site-header .brand{gap:7px !important;}
  .site-header .brand img{width:58px !important;height:58px !important;}
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{font-size:15.5px !important;}
  .site-header .brand-copy small{display:none !important;}
}


/* ===== styles-v74-layout-responsive.css ===== */
/* Han An Hua v74 — centered wide-screen internship layout + resize performance guard. */

/*
 * v63 deliberately pinned the internship area to the left. On large monitors that
 * makes the whole "Bidang Prioritas" area look offset. Keep a common centered
 * content rail from the section heading through partners and facilities.
 */
.fields > .fields-head,
.fields > .internship-position-block,
.fields > .partner-showcase,
.fields > .facility-addon{
  width:min(100%,1540px) !important;
  max-width:1540px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Preserve a readable text measure while keeping its parent aligned to the cards. */
.fields > .fields-head > p:last-child{
  max-width:900px;
}

/* Ultra-wide screens stay centered instead of stretching toward one edge. */
@media (min-width:2100px){
  .fields > .fields-head,
  .fields > .internship-position-block,
  .fields > .partner-showcase,
  .fields > .facility-addon{
    width:min(100%,1720px) !important;
    max-width:1720px !important;
  }
}

/* During a live browser resize, pause decorative work that is expensive to paint.
 * JS removes this class shortly after resizing stops, so normal motion resumes.
 */
html.is-resizing .site-header{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
html.is-resizing .hero-photo,
html.is-resizing .hero-badge,
html.is-resizing .hero-badge-2,
html.is-resizing .orbit,
html.is-resizing .marquee-track{
  animation-play-state:paused !important;
  transition:none !important;
}

@media (max-width:820px){
  .fields > .fields-head,
  .fields > .internship-position-block,
  .fields > .partner-showcase,
  .fields > .facility-addon{
    width:100% !important;
    max-width:100% !important;
  }
}

/* Reduce the amount of off-screen layout/paint work during live viewport changes.
 * content-visibility is progressive enhancement: unsupported browsers simply ignore it.
 */
@supports (content-visibility:auto){
  .programs,
  .collaboration,
  .journey,
  .gallery,
  .director,
  .contact,
  .fields > .internship-position-block,
  .fields > .partner-showcase,
  .fields > .facility-addon{
    content-visibility:auto;
    contain-intrinsic-size:auto 900px;
  }
  .fields > .partner-showcase,
  .fields > .facility-addon{
    contain-intrinsic-size:auto 1400px;
  }
}


/* =========================================================
   V77 — Unified cute arrow system + lightweight rendering
   ========================================================= */
.han-arrow{
  flex:0 0 auto;display:inline-block;width:30px;height:30px;border:1.25px solid rgba(20,20,20,.42);
  border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef6c2f' stroke-width='2.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M10 7h7v7'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  box-shadow:0 2px 6px rgba(0,0,0,.12);font-size:0!important;line-height:0!important;vertical-align:middle;
  animation:none!important;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.han-arrow-back{transform:rotate(-90deg)}
.button>.han-arrow,.text-link>.han-arrow,.program-copy a>.han-arrow,.application-cta>.han-arrow{font-size:0!important}
.button>span:not(.han-arrow),.program-copy a>span:not(.han-arrow){animation:none!important;transform:none!important}
.text-link>span:not(.han-arrow){transform:none!important}
.text-link:hover .han-arrow,.program-copy a:hover .han-arrow,.button:hover .han-arrow,.application-cta:hover .han-arrow{transform:translate(2px,-2px)}
.program-copy a{display:inline-flex;align-items:center;gap:10px}
.application-cta .han-arrow{width:32px!important;height:32px!important;border:1.25px solid rgba(20,20,20,.42)!important;border-radius:50%!important;background-color:#fff!important;background-size:17px 17px!important;box-shadow:0 2px 6px rgba(0,0,0,.12)!important}
.application-cta-industry .han-arrow{border-color:rgba(20,20,20,.35)!important}
.gallery-item::after{content:""!important;width:42px!important;height:42px!important;border:1.25px solid rgba(20,20,20,.42)!important;border-radius:50%!important;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef6c2f' stroke-width='2.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M10 7h7v7'/%3E%3C/svg%3E") center/21px 21px no-repeat!important;box-shadow:0 3px 9px rgba(0,0,0,.15)!important;color:transparent!important}
.partner-site-arrow{display:grid!important;place-items:center!important;width:30px!important;height:30px!important;border:1.25px solid rgba(20,20,20,.42)!important;border-radius:50%!important;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef6c2f' stroke-width='2.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M10 7h7v7'/%3E%3C/svg%3E") center/16px 16px no-repeat!important;box-shadow:0 2px 6px rgba(0,0,0,.1)!important;font-size:0!important;color:transparent!important}
@media(max-width:640px){.han-arrow{width:29px;height:29px;background-size:15px 15px}.application-cta .han-arrow{width:31px!important;height:31px!important}}
@media(hover:hover) and (pointer:fine){a:hover .han-arrow,button:hover .han-arrow{border-color:#ef6c2f;box-shadow:0 3px 8px rgba(0,0,0,.14)}}
/* Avoid painting long below-the-fold sections until they approach the viewport. */
@supports(content-visibility:auto){.fields,.partner-showcase,.facility-addon,.journey,.gallery,.director,.contact{content-visibility:auto;contain-intrinsic-size:auto 900px}}


/* ============================================================
   V79 — mobile multilingual header + map usability fixes
   1) Header brand + Menu always stay on one row on phones/tablets.
   2) Long translated navigation labels remain contained in the mobile menu.
   3) Mobile map tooltip becomes a viewport-safe sheet so long partner lists
      are never clipped by the illustrated map container.
   ============================================================ */

/* v55 introduced wrapping below 980px. Undo that before the mobile breakpoint
   so translated brand text can never push the Menu control onto a second row. */
@media (max-width:980px){
  .site-header{
    flex-wrap:nowrap !important;
    row-gap:0 !important;
  }
}

@media (max-width:820px){
  :root{--header-h:84px !important;}

  .site-header{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:1fr !important;
    align-items:center !important;
    column-gap:10px !important;
    height:var(--header-h) !important;
    min-height:var(--header-h) !important;
    padding:7px 12px !important;
    overflow:visible !important;
  }

  .site-header .brand{
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    gap:9px !important;
    overflow:hidden !important;
  }

  .site-header .brand img{
    width:58px !important;
    height:58px !important;
    flex:0 0 58px !important;
  }

  .site-header .brand-copy{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .site-header .brand-copy strong[data-i18n-html="brand.name"]{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:clamp(13px,3.55vw,16px) !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  /* Slightly tighten languages whose foundation name is longer in Latin/Arabic script. */
  html[data-language="en"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before,
  html[data-language="es"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before,
  html[data-language="fr"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before,
  html[data-language="de"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before,
  html[data-language="ko"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before,
  html[data-language="ar"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:clamp(12px,3.35vw,15px) !important;
  }

  .site-header .brand-copy small{
    display:block !important;
    min-width:0 !important;
    max-width:100% !important;
    margin-top:3px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:clamp(7px,2vw,8.5px) !important;
  }

  .site-header .menu-toggle{
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:end !important;
    align-self:center !important;
    display:inline-flex !important;
    width:auto !important;
    min-width:0 !important;
    max-width:112px !important;
    min-height:46px !important;
    margin:0 !important;
    padding:8px 12px !important;
    gap:8px !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  .site-header .menu-toggle b{
    font-size:15px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  .site-header .menu-lines{
    width:22px !important;
    flex:0 0 22px !important;
  }

  .site-header .site-nav{
    grid-column:1 / -1 !important;
    inset:calc(var(--header-h) + 8px) 12px auto 12px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - var(--header-h) - 24px) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  .site-header .site-nav.open > a{
    width:100% !important;
    max-width:100% !important;
    font-size:clamp(18px,5.2vw,22px) !important;
    line-height:1.12 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    text-align:center !important;
  }

  .site-header .site-nav.open .nav-cta{
    font-size:clamp(17px,4.8vw,20px) !important;
  }

  .site-header .site-nav.open .language-switcher{
    width:100% !important;
    max-width:100% !important;
  }

  .site-header .site-nav.open .language-select{
    width:100% !important;
    max-width:100% !important;
    min-height:46px !important;
    font-size:16px !important;
  }
}

@media (max-width:430px){
  :root{--header-h:78px !important;}
  .site-header .brand img{
    width:54px !important;
    height:54px !important;
    flex-basis:54px !important;
  }
  .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:13.5px !important;
  }
  html[data-language="en"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before,
  html[data-language="es"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before,
  html[data-language="fr"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before,
  html[data-language="de"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before,
  html[data-language="ko"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before,
  html[data-language="ar"] .site-header .brand-copy strong[data-i18n-html="brand.name"]::before{
    font-size:12.5px !important;
  }
  .site-header .brand-copy small{display:none !important;}
  .site-header .menu-toggle{padding:7px 10px !important;gap:7px !important;min-height:44px !important;}
  .site-header .menu-toggle b{font-size:14px !important;}
}

/* On phones the partner list is a fixed, viewport-safe sheet rather than a
   panel constrained by the map image. This prevents the first/last names from
   being cut off when a city contains many partners. */
@media (max-width:700px){
  .taiwan-map-final-stage{
    overflow:visible !important;
    transform:none !important;
    filter:none !important;
    will-change:auto !important;
  }

  .taiwan-map-tooltip{
    position:fixed !important;
    z-index:10050 !important;
    left:50% !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    width:min(92vw,470px) !important;
    max-width:calc(100vw - 24px) !important;
    max-height:calc(100dvh - 150px) !important;
    margin:0 !important;
    padding:18px 18px 16px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    transform:translate(-50%,-50%) scale(.985) !important;
    transform-origin:center center !important;
    border-radius:20px !important;
    box-shadow:0 22px 55px rgba(10,28,42,.34),0 0 0 1px rgba(255,255,255,.9) !important;
  }

  .taiwan-map-tooltip.is-open{
    transform:translate(-50%,-50%) scale(1) !important;
  }

  .taiwan-map-tooltip::before{display:none !important;}

  .taiwan-map-tooltip-list{
    font-size:14px !important;
    line-height:1.38 !important;
  }

  .taiwan-map-tooltip-list li{
    padding-top:6px !important;
    padding-bottom:6px !important;
  }

  .taiwan-map-tooltip-hint{
    position:sticky;
    bottom:0;
    margin-left:-4px;
    margin-right:-4px;
    padding:10px 4px 2px !important;
    background:#fff;
  }
}


/* ============================================================
   V80 — compact documentation gallery + responsive View more
   Show only a small preview initially; visitors can expand all photos.
   ============================================================ */
.departure-gallery:not(.is-expanded) > .gallery-item.is-gallery-extra{
  display:none!important;
}
.gallery-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:24px;
}
.gallery-view-more{
  min-height:48px;
  padding:11px 20px 11px 22px;
  border:2px solid #fff;
  border-radius:999px;
  background:var(--yellow,#ffcc25);
  color:#111;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:inherit;
  font-size:15px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:4px 4px 0 rgba(255,255,255,.2);
}
.gallery-view-more[hidden]{display:none!important}
.gallery-view-more-icon{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border:1.5px solid #111;
  border-radius:50%;
  font-size:18px;
  line-height:1;
}
@media (hover:hover) and (pointer:fine){
  .gallery-view-more:hover{transform:translateY(-2px)}
}
@media (min-width:821px){
  .departure-gallery:not(.is-expanded){
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-rows:300px!important;
    grid-auto-flow:row!important;
  }
  .departure-gallery:not(.is-expanded) > .gallery-item,
  .departure-gallery:not(.is-expanded) > .gallery-item.wide,
  .departure-gallery:not(.is-expanded) > .gallery-item.tall{
    grid-column:auto!important;
    grid-row:auto!important;
  }
}
@media (max-width:820px){
  .gallery-more-wrap{margin-top:18px}
  .gallery-view-more{min-height:46px;padding:10px 17px;font-size:14px}
}