:root { --navy:#102a48; --navy-deep:#081d34; --blue:#1d63ad; --cyan:#079db8; --ice:#f5f9fd; --pale:#eaf4fc; --white:#fff; --muted:#5e6f82; --line:#cfdae8; --shell:min(1240px,calc(100% - 96px)); --header-height:92px; --ease:cubic-bezier(.22,1,.36,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:142px; }
body { margin:0; color:var(--navy); background:var(--white); font-family:"DM Sans","Noto Sans TC",sans-serif; line-height:1.8; -webkit-font-smoothing:antialiased; }
body.menu-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
img { display:block; max-width:100%; }
small, sub, sup { font-size:inherit; }
:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.container { width:var(--shell); margin-inline:auto; }
.skip-link { position:fixed; z-index:2000; top:10px; left:10px; padding:9px 16px; color:var(--white); background:var(--navy); transform:translateY(-160%); transition:transform .2s; }
.skip-link:focus { transform:none; }
.eyebrow { margin:0; color:var(--cyan); font-size:14px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.eyebrow.light { color:#8bd5e1; }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s ease,transform .75s var(--ease); }
.reveal.is-visible { opacity:1; transform:none; }

/* Header */
.site-header { position:fixed; z-index:1000; inset:0 0 auto; height:var(--header-height); border-bottom:1px solid rgba(16,42,72,.14); background:rgba(255,255,255,.78); backdrop-filter:blur(16px); transition:height .3s,background .3s,box-shadow .3s; }
.site-header.is-scrolled { height:74px; background:rgba(255,255,255,.95); box-shadow:0 8px 30px rgba(16,42,72,.08); }
.header-inner { display:flex; align-items:center; gap:36px; width:min(calc(100% - 64px),1380px); height:100%; margin:auto; }
.brand { width:176px; flex:0 0 auto; }
.main-nav { display:flex; align-items:center; gap:clamp(20px,2.15vw,34px); margin-left:auto; }
.main-nav a { position:relative; display:flex; align-items:baseline; gap:5px; padding:27px 0; white-space:nowrap; }
.main-nav a::after { position:absolute; right:100%; bottom:19px; left:0; height:1px; background:var(--blue); content:""; transition:right .3s var(--ease); }
.main-nav a:hover::after,.main-nav a.active::after { right:0; }
.main-nav b { font-size:14px; font-weight:600; letter-spacing:.03em; }
.main-nav span { color:var(--muted); font-size:14px; }
.header-tools { display:flex; align-items:center; gap:16px; padding-left:22px; border-left:1px solid var(--line); white-space:nowrap; }
.language { display:flex; gap:7px; padding:0; border:0; background:none; font-size:14px; cursor:pointer; }
.language span { color:#8a98a7; }
.group-link { display:inline-flex; align-items:center; gap:15px; min-height:40px; padding:8px 14px; border:1px solid var(--line); font-size:14px; }
.group-link i { font-style:normal; }
.menu-toggle { display:none; width:42px; height:42px; padding:0; border:0; background:transparent; cursor:pointer; }
.menu-toggle i,.menu-toggle i::before,.menu-toggle i::after { display:block; width:24px; height:1px; background:currentColor; transition:transform .25s,opacity .25s; }
.menu-toggle i { position:relative; margin:auto; }
.menu-toggle i::before,.menu-toggle i::after { position:absolute; left:0; content:""; }
.menu-toggle i::before { top:-7px; }
.menu-toggle i::after { top:7px; }
.menu-open .menu-toggle i { background:transparent; }
.menu-open .menu-toggle i::before { top:0; transform:rotate(45deg); }
.menu-open .menu-toggle i::after { top:0; transform:rotate(-45deg); }

/* Hero */
.hero { position:relative; min-height:820px; padding-top:var(--header-height); overflow:hidden; background:var(--pale); }
.hero-media,.hero-wash { position:absolute; inset:var(--header-height) 0 0; }
.hero-media { background:url("../images/banner.png") center / cover no-repeat; transform:scale(1.015); animation:heroScale 14s ease-out forwards; }
.hero-wash { background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.97) 31%,rgba(234,244,252,.75) 59%,rgba(234,244,252,.07) 85%),linear-gradient(0deg,rgba(16,42,72,.18),transparent 50%); }
.hero-circles { position:absolute; z-index:1; right:7vw; bottom:-270px; width:720px; height:720px; border:1px solid rgba(255,255,255,.5); border-radius:50%; box-shadow:0 0 0 110px rgba(255,255,255,.08),0 0 0 220px rgba(255,255,255,.04); }
.hero-inner { position:relative; z-index:2; display:flex; align-items:center; min-height:calc(820px - var(--header-height)); padding:80px 0 110px; }
.hero-copy { width:min(900px,76%); }
.hero h1 { margin:23px 0 43px; font-size:clamp(68px,7.3vw,108px); font-weight:400; line-height:.94; letter-spacing:-.065em; }
.hero h1 em { color:var(--blue); font-style:normal; }
.hero-statement { display:grid; grid-template-columns:minmax(0,600px) 130px; gap:45px; max-width:790px; padding-top:28px; border-top:1px solid rgba(16,42,72,.22); }
.hero-statement h2 { margin:0; font-size:20px; font-weight:500; line-height:1.7; }
.hero-statement>p { margin:0; color:var(--blue); font-size:14px; line-height:1.6; text-transform:uppercase; }
.hero-statement>p span { color:var(--muted); font-size:14px; }
.scroll-cue { position:absolute; z-index:3; bottom:0; left:50%; display:flex; align-items:center; flex-direction:column; color:rgba(16,42,72,.62); font-size:14px; letter-spacing:.2em; transform:translateX(-50%); }
.scroll-cue i { width:1px; height:48px; margin-top:12px; background:currentColor; animation:scrollLine 1.8s ease-in-out infinite; transform-origin:top; }

/* Sticky navigation */
.section-nav { position:sticky; z-index:800; top:74px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.95); backdrop-filter:blur(15px); }
.section-nav-inner { display:flex; overflow-x:auto; scrollbar-width:none; }
.section-nav-inner::-webkit-scrollbar { display:none; }
.section-nav a { position:relative; flex:1 0 auto; min-width:190px; padding:19px 18px 17px; border-right:1px solid var(--line); color:var(--muted); font-size:14px; text-align:center; white-space:nowrap; transition:color .25s,background .25s; }
.section-nav a:first-child { border-left:1px solid var(--line); }
.section-nav a span { margin-right:9px; color:#94a7ba; font-size:14px; }
.section-nav a::after { position:absolute; right:50%; bottom:-1px; left:50%; height:2px; background:var(--blue); content:""; transition:right .3s var(--ease),left .3s var(--ease); }
.section-nav a:hover,.section-nav a.active { color:var(--navy); background:var(--ice); }
.section-nav a.active::after { right:18px; left:18px; }

/* Shared headings */
.section-heading,.numbers-heading,.areas-heading { display:grid; grid-template-columns:150px minmax(0,650px) 1fr; gap:40px; align-items:end; margin-bottom:76px; }
.section-index { display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:center; color:#91a4b7; font-size:14px; letter-spacing:.14em; }
.section-index i { height:1px; background:var(--line); }
.section-index small { grid-column:1 / -1; font-size:14px; }
.section-heading h2,.numbers-heading h2,.areas-heading h2 { margin:19px 0 0; font-size:clamp(42px,4.25vw,64px); font-weight:400; line-height:1.17; letter-spacing:-.045em; }
.section-heading h2 em,.numbers-heading h2 em,.areas-heading h2 em { color:var(--blue); font-style:normal; }

/* Commitment */
.commitment-section { position:relative; padding:132px 0; overflow:hidden; background:var(--white); }
.commitment-section::after { position:absolute; right:-70px; bottom:-80px; color:rgba(29,99,173,.035); font-size:300px; font-weight:600; line-height:.8; content:"PURPOSE"; pointer-events:none; }
.commitment-layout { position:relative; z-index:1; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(70px,10vw,150px); padding-top:40px; border-top:1px solid var(--line); }
.commitment-quote { position:relative; padding-top:55px; }
.commitment-quote>span { position:absolute; top:18px; left:-9px; color:var(--cyan); font-size:80px; line-height:1; }
.commitment-quote p { margin:0; font-size:clamp(30px,3.1vw,45px); font-weight:400; line-height:1.5; letter-spacing:-.03em; }
.commitment-copy { padding-top:55px; }
.commitment-copy p { margin:0 0 25px; color:var(--muted); font-size:15px; line-height:2.05; }

/* Numbers */
.numbers-section { padding:132px 0; background:var(--ice); }
.stats { display:grid; grid-template-columns:repeat(3,1fr); margin-top:15px; border-top:1px solid rgba(16,42,72,.28); border-bottom:1px solid rgba(16,42,72,.2); }
.stat { min-height:260px; padding:34px 30px 30px; border-right:1px solid rgba(16,42,72,.18); }
.stat:last-child { border-right:0; }
.stat>span { color:#91a4b7; font-size:14px; }
.stat strong { display:block; margin-top:40px; color:var(--blue); font-size:clamp(38px,4.2vw,62px); font-weight:400; line-height:1; letter-spacing:-.055em; }
.stat strong sup { font-size:14px; vertical-align:super; letter-spacing:0; }
.stat p { margin:29px 0 0; color:var(--muted); font-size:14px; }
.data-note { margin:13px 0 0; color:#8292a3; font-size:14px; text-align:right; }

/* Areas */
.areas-section { padding:132px 0; color:var(--white); background:var(--navy); }
.light-index { color:rgba(255,255,255,.43); }
.light-index i { background:rgba(255,255,255,.2); }
.areas-heading h2 em { color:#83d2df; }
.areas-heading>p { max-width:360px; margin:0 0 6px auto; color:rgba(255,255,255,.55); font-size:14px; line-height:2; }
.areas-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.17); }
.area-card { position:relative; min-height:250px; padding:28px 29px; background:var(--navy); transition:background .3s,transform .3s; }
.area-card:hover { z-index:1; background:var(--blue); transform:translateY(-6px); }
.area-card>span { color:rgba(255,255,255,.4); font-size:14px; }
.area-card>i { position:absolute; top:25px; right:26px; display:grid; width:34px; height:34px; border:1px solid rgba(255,255,255,.24); border-radius:50%; place-items:center; font-style:normal; transition:transform .25s; }
.area-card:hover>i { transform:translate(3px,-3px); }
.area-card p { margin:50px 0 5px; color:#80d2df; font-size:14px; text-transform:uppercase; }
.area-card h3 { margin:0; font-size:24px; font-weight:500; }
#areasTitle { text-wrap: nowrap; }

/* Legacy */
.legacy-section { position:relative; min-height:760px; color:var(--white); overflow:hidden; }
.legacy-bg,.legacy-overlay { position:absolute; inset:0; }
.legacy-bg { background:url("../images/banner.png") center / cover no-repeat; transform:scale(1.04); }
.legacy-overlay { background:linear-gradient(90deg,rgba(8,29,52,.96),rgba(16,42,72,.86) 50%,rgba(29,99,173,.42)); }
.legacy-content { position:relative; z-index:1; padding:120px 0; }
.legacy-index { width:260px; margin-bottom:70px; color:rgba(255,255,255,.44); }
.legacy-index i { background:rgba(255,255,255,.2); }
.legacy-content h2 { margin:22px 0 38px; font-size:clamp(54px,6vw,88px); font-weight:400; line-height:1.07; letter-spacing:-.055em; }
.legacy-content h2 em { color:#86d4e0; font-style:normal; }
.legacy-copy { display:grid; grid-template-columns:1fr 1fr; gap:60px; max-width:900px; padding-top:32px; border-top:1px solid rgba(255,255,255,.25); }
.legacy-copy p { margin:0; color:rgba(255,255,255,.66); font-size:14px; line-height:2; }
.legacy-copy strong { display:block; margin-top:14px; font-size:18px; font-weight:500; line-height:1.7; }
.legacy-link { display:flex; align-items:center; justify-content:space-between; width:300px; margin-top:47px; padding:18px 0; border-top:1px solid rgba(255,255,255,.4); border-bottom:1px solid rgba(255,255,255,.4); }
.legacy-link span { font-size:14px; font-weight:500; }
.legacy-link small { color:rgba(255,255,255,.55); font-size:14px; font-weight:400; }
.legacy-link i { font-size:19px; font-style:normal; transition:transform .25s; }
.legacy-link:hover i { transform:translate(3px,-3px); }

/* Footer */
.site-footer { padding:78px 0 22px; background:var(--white); }
.footer-main { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:60px; padding-bottom:68px; }
.footer-brand img { width:170px; }
.footer-brand p { margin:30px 0 0; color:var(--blue); font-size:18px; line-height:1.3; }
.footer-column h3 { margin:0 0 18px; color:#8292a3; font-size:14px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.footer-column a { display:block; margin-bottom:8px; color:var(--muted); font-size:14px; }
.footer-column a:hover { color:var(--blue); }
.footer-bottom { display:flex; justify-content:space-between; padding-top:19px; border-top:1px solid var(--line); color:#8292a3; font-size:14px; letter-spacing:.08em; }
.footer-bottom p { margin:0; }

@keyframes heroScale { to { transform:scale(1.08); } }
@keyframes scrollLine { 0%,100% { opacity:.35; transform:scaleY(.55); } 50% { opacity:1; transform:scaleY(1); } }

@media (max-width:1180px) {
  :root { --shell:min(100% - 52px,1240px); }
  .header-inner { width:min(calc(100% - 44px),1380px); gap:22px; }
  .brand { width:150px; }
  .main-nav { gap:20px; }
  .main-nav span,.language { display:none; }
  .section-heading,.numbers-heading,.areas-heading { grid-template-columns:115px minmax(0,610px) 1fr; }
}

@media (max-width:900px) {
  :root { --header-height:76px; --shell:calc(100% - 48px); }
  html { scroll-padding-top:122px; }
  .site-header,.site-header.is-scrolled { height:var(--header-height); }
  .brand { width:155px; }
  .header-tools { margin-left:auto; padding:0; border:0; }
  .group-link { display:none; }
  .menu-toggle { display:block; }
  .main-nav { position:fixed; inset:var(--header-height) 0 0; display:flex; align-items:stretch; flex-direction:column; gap:0; margin:0; padding:38px 24px; background:rgba(255,255,255,.98); visibility:hidden; opacity:0; transform:translateY(-10px); transition:opacity .25s,transform .25s,visibility .25s; }
  .menu-open .main-nav { visibility:visible; opacity:1; transform:none; height: 100vh; }
  .main-nav a { justify-content:space-between; width:100%; padding:18px 4px; border-bottom:1px solid var(--line); }
  .main-nav a::after { display:none; }
  .main-nav b { font-size:21px; font-weight:400; }
  .main-nav span { display:inline; margin-left:auto; font-size:14px; }
  .hero { min-height:770px; }
  .hero-media,.hero-wash { top:var(--header-height); }
  .hero-inner { min-height:calc(770px - var(--header-height)); }
  .hero h1 { font-size:clamp(66px,11vw,92px); }
  .section-nav { top:var(--header-height); }
  .section-nav a { min-width:160px; }
  .section-heading,.numbers-heading,.areas-heading { grid-template-columns:90px 1fr; }
  .areas-heading>p { grid-column:2; margin:0; }
  .commitment-layout { grid-template-columns:1fr; gap:10px; }
  .commitment-copy { display:grid; grid-template-columns:1fr 1fr; gap:35px; }
  .stats { grid-template-columns:1fr; }
  .stat { border-right:0; border-bottom:1px solid rgba(16,42,72,.18); }
  .stat:last-child { border-bottom:0; }
  .areas-grid { grid-template-columns:repeat(2,1fr); }
  .footer-main { grid-template-columns:1.2fr 1fr 1fr; }
  .footer-column:last-child { display:none; }
}

@media (max-width:600px) {
  :root { --shell:calc(100% - 36px); }
  .header-inner { width:calc(100% - 32px); }
  .brand { width:140px; }
  .hero { min-height:760px; }
  .hero-inner {min-height:calc(760px - var(--header-height)); padding:80px 0 100px; }
  .hero-copy { width:100%; }
  .hero-media { background-position:62% center; }
  .hero-wash { background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(234,244,252,.86)); }
  .hero-circles { opacity:.5; }
  .eyebrow { font-size:14px; }
  .hero h1 { margin:18px 0 28px; font-size:clamp(54px,15vw,64px); line-height:.98; }
  .hero-statement { grid-template-columns:1fr; gap:13px; padding-top:20px; }
  .hero-statement h2 { font-size:16px; }
  .scroll-cue { display:none; }
  .commitment-section,.numbers-section,.areas-section { padding:78px 0; }
  .section-heading,.numbers-heading,.areas-heading { display:block; margin-bottom:48px; }
  .section-index { margin-bottom:42px; }
  .section-heading h2,.numbers-heading h2,.areas-heading h2 { font-size:39px; }
  .areas-heading>p { margin-top:23px; }
  .commitment-layout { padding-top:0; border-top:0; }
  .commitment-quote { padding-top:45px; border-top:1px solid var(--line); }
  .commitment-quote p { font-size:31px; }
  .commitment-copy { display:block; padding-top:35px; }
  .commitment-copy p { font-size:14px; }
  .stat { min-height:200px; padding:27px 18px; }
  .stat strong { margin-top:25px; font-size:42px; }
  .areas-grid { grid-template-columns:1fr; }
  .area-card { min-height:200px; padding:25px 23px; }
  .area-card p { margin-top:20px; }
  .legacy-section { min-height:760px; }
  .legacy-content { padding:85px 0; }
  .legacy-index { margin-bottom:52px; }
  .legacy-content h2 { font-size:49px; }
  .legacy-copy { grid-template-columns:1fr; gap:25px; }
  .legacy-copy p { font-size:14px; }
  .legacy-link { width:100%; }
  .footer-main { grid-template-columns:1fr; gap:35px; padding:60px 0 48px; }
  .footer-brand { padding-bottom:10px; }
  .footer-column { padding-top:22px; border-top:1px solid var(--line); }
  .footer-column:last-child { display:block; }
  .footer-bottom { align-items:flex-start; flex-direction:column; gap:10px; }
  .stat p { margin: 10px 0 0; }
  #areasTitle { text-wrap: wrap; }
}

@media (max-width:560px) {
  .hero { height:auto; min-height:700px; max-height:none; }
  .hero-inner { min-height:calc(700px - var(--header-height)); }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}