:root {
  color-scheme: light;
  --paper: #f7f7f4;
  --white: #fff;
  --ink: #111110;
  --muted: #64645e;
  --line: #d8d8d1;
  --hot: #f20a72;
  --teal: #00a99d;
  --teal-dark: #087f79;
  --display: 'Space Grotesk', 'Noto Sans TC', sans-serif;
  --body: 'DM Sans', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --shell: min(1440px, calc(100% - 112px));
  --ease: cubic-bezier(.2, .72, .15, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body[data-language="en"] .lang-zh, body[data-language="zh"] .lang-en { display: none !important; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
::selection { color: var(--white); background: var(--hot); }
.section-shell { width: var(--shell); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 16px; background: var(--ink); color: var(--white); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.topline { height: 30px; display: flex; align-items: center; gap: 14px; padding-inline: 28px; color: var(--paper); background: var(--ink); font: 600 9px/1 var(--display); letter-spacing: .13em; }
.topline-line { height: 1px; flex: 1; background: #777771; }
.topline-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hot); }
.site-header { width: var(--shell); min-height: 108px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 26px; border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand-official { display: block; width: 190px; height: 100px; overflow: hidden; position: relative; }
.brand-official .official-logo { width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(17px, 2.8vw, 44px); margin-left: auto; }
.main-nav a, .language-toggle { font-size: 12px; font-weight: 700; letter-spacing: -.01em; }
.main-nav a { position: relative; padding: 9px 0; }
.main-nav a::after { content: ''; position: absolute; right: 100%; bottom: 4px; left: 0; height: 2px; background: var(--hot); transition: right .25s var(--ease); }
.main-nav a:hover::after, .main-nav a:focus-visible::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.language-toggle { display: inline-flex; align-items: center; border: 0; padding: 10px 0; background: transparent; cursor: pointer; }
.language-toggle > span:first-child { color: var(--hot); }
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 54px; padding: 0 23px; border: 1px solid transparent; font: 700 13px/1.25 var(--body); transition: transform .2s var(--ease), background-color .2s, color .2s, box-shadow .2s; }
.button span span[aria-hidden="true"] { display: inline-block; margin-left: 11px; font-size: 16px; transition: transform .2s var(--ease); }
.button:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); }
.button:hover span span[aria-hidden="true"] { transform: translate(2px, -2px); }
.button-small { min-height: 42px; padding-inline: 16px; font-size: 11px; }
.button-ink { color: var(--white); background: var(--ink); }
.button-hot { color: var(--ink); background: var(--hot); }
.menu-toggle { display: none; }

.hero { min-height: min(760px, calc(100svh - 110px)); display: grid; grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr); align-items: center; gap: 3.5%; padding-block: clamp(55px, 8vw, 112px) 80px; position: relative; }
.hero-copy { position: relative; z-index: 3; padding-block: 20px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 21px; color: #343430; font: 700 10px/1.35 var(--display); letter-spacing: .105em; text-transform: uppercase; }
.eyebrow-square { width: 10px; height: 10px; display: inline-block; flex: 0 0 auto; background: var(--teal); transform: rotate(45deg); }
.hero-title { max-width: 710px; margin: 0; font: 700 clamp(50px, 6.15vw, 89px)/.93 var(--display); letter-spacing: -.078em; }
.title-line { display: block; white-space: nowrap; }
.title-accent { color: var(--hot); }
.period { color: var(--ink); }
.title-outline { margin-top: 11px; color: transparent; -webkit-text-stroke: 1.6px var(--ink); }
.hero-zh { margin: 16px 0 0; color: var(--hot); font-size: 16px; font-weight: 700; line-height: 1.5; }
.hero-subtitle { margin: 25px 0 8px; font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; line-height: 1.35; }
.hero-deck { max-width: 470px; margin: 0; color: var(--muted); font-size: 14px; }
.hero-cta { margin-top: 26px; min-width: 196px; }
.hero-footnote { display: flex; align-items: center; gap: 12px; margin-top: 35px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .025em; }
.footnote-rule { width: 27px; height: 2px; display: inline-block; background: var(--teal); }
.hero-art { min-height: 510px; position: relative; isolation: isolate; }
.hero-art-backdrop { position: absolute; top: 5%; right: 5%; bottom: 3%; left: 6%; background: #e9e8e1; clip-path: polygon(8% 0, 100% 0, 100% 82%, 84% 100%, 0 100%, 0 10%); z-index: -2; }
.hero-photo-frame { position: absolute; top: 0; right: 7%; bottom: 10%; left: 0; overflow: hidden; background: #d1d1c9; clip-path: polygon(8% 0, 100% 0, 100% 83%, 85% 100%, 0 100%, 0 11%); }
.hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.photo-shard { position: absolute; z-index: 1; pointer-events: none; }
.photo-shard-pink { top: 0; right: 0; width: 35%; height: 33%; background: var(--hot); clip-path: polygon(100% 0, 100% 100%, 0 0); mix-blend-mode: multiply; opacity: .9; }
.photo-shard-teal { bottom: 0; left: 0; width: 28%; height: 30%; background: var(--teal); clip-path: polygon(0 0, 0 100%, 100% 100%); mix-blend-mode: multiply; opacity: .95; }
.hero-caption { position: absolute; right: 0; bottom: 4%; width: 178px; min-height: 125px; display: flex; flex-direction: column; justify-content: space-between; padding: 17px 17px 15px; color: var(--white); background: var(--ink); font: 700 15px/1.25 var(--display); }
.caption-mark { color: var(--teal); font-size: 10px; letter-spacing: .14em; }
.caption-arrow { position: absolute; right: 16px; bottom: 14px; color: var(--hot); font-size: 22px; }
.hero-stamp { position: absolute; top: 9%; left: -7%; width: 91px; height: 91px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); font: 700 9px/1.3 var(--display); letter-spacing: .08em; transform: rotate(-11deg); }
.stamp-cross { color: var(--hot); font-size: 16px; line-height: .9; }
.hero-stamp i { position: absolute; right: -12px; bottom: 8px; width: 20px; height: 20px; background: var(--teal); border-radius: 50%; }
.hero-coordinate { position: absolute; top: 2%; right: -3%; writing-mode: vertical-rl; color: var(--muted); font: 600 8px/1 var(--display); letter-spacing: .16em; }
.hero-bottom-line { position: absolute; right: 0; bottom: 25px; left: 0; display: flex; align-items: center; gap: 18px; }
.hero-bottom-line > span:first-child { height: 1px; flex: 1; background: var(--line); }
.hero-bottom-label { color: var(--muted); font: 600 9px/1 var(--display); letter-spacing: .11em; }

.mission { overflow: hidden; padding: 29px clamp(24px, 6vw, 88px) 22px; color: var(--white); background: var(--ink); position: relative; }
.mission::before { content: ''; position: absolute; top: -90px; right: 10%; width: 280px; height: 280px; border: 1px solid #31312f; border-radius: 50%; }
.mission-topline { display: flex; align-items: center; justify-content: space-between; padding-bottom: 28px; border-bottom: 1px solid #393936; }
.section-index { display: block; color: #777771; font: 700 9px/1.3 var(--display); letter-spacing: .16em; }
.mission-kicker { display: flex; align-items: center; gap: 9px; color: #b7b7b0; font: 600 10px/1.2 var(--display); letter-spacing: .08em; }
.pink-dot { width: 7px; height: 7px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: var(--hot); }
.mission-grid { display: grid; grid-template-columns: 1fr .83fr; gap: 10%; padding-block: clamp(46px, 7vw, 96px) 74px; }
.eyebrow-light { color: #b7b7b0; }
.eyebrow-light .eyebrow-square { background: var(--hot); }
.mission-heading h2 { max-width: 660px; margin: 0; font: 700 clamp(48px, 6.3vw, 84px)/.98 var(--display); letter-spacing: -.07em; }
.mission-heading h2 em, .section-head h2 em, .services h2 em, .closing h2 em { color: var(--teal); font-style: normal; }
.mission-connector { display: flex; align-items: center; width: min(400px, 90%); margin-top: 34px; }
.mission-connector span:nth-child(1), .mission-connector span:nth-child(3) { width: 12px; height: 12px; flex: 0 0 auto; border: 2px solid var(--teal); border-radius: 50%; }
.mission-connector span:nth-child(3) { border-radius: 0; border-color: var(--hot); transform: rotate(45deg); }
.mission-connector span:nth-child(2) { height: 1px; flex: 1; background: linear-gradient(90deg, var(--teal), var(--hot)); }
.mission-copy { max-width: 500px; padding-top: 10px; color: #bdbdb7; font-size: 13px; }
.mission-copy p { margin: 0 0 17px; }
.mission-copy .mission-lead { color: var(--white); font-size: 16px; font-weight: 600; line-height: 1.65; }
.mission-quote { position: relative; margin-top: 30px; padding: 22px 24px 21px; border-left: 2px solid var(--hot); background: #1a1a19; }
.quote-symbol { position: absolute; top: 10px; right: 15px; color: var(--teal); font: 700 36px/1 var(--display); }
.mission-quote p { max-width: 400px; margin: 0 0 13px; color: var(--white); font: 600 17px/1.42 var(--display); letter-spacing: -.03em; }
.quote-byline { color: #96968f; font-size: 10px; }
.mission-bottom { display: flex; align-items: center; gap: 18px; padding-top: 16px; border-top: 1px solid #393936; }
.mission-bottom-label { color: #83837d; font: 600 8px/1 var(--display); letter-spacing: .15em; white-space: nowrap; }
.mission-progress { height: 2px; flex: 1; background: #393936; }
.mission-progress span { width: 38%; height: 100%; display: block; background: linear-gradient(90deg, var(--hot), var(--teal)); }

.engine, .ecosystem, .services { padding-block: clamp(86px, 11vw, 154px); }
.section-head { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8%; margin-bottom: 55px; }
.section-head .eyebrow, .services-intro .eyebrow { margin-top: 23px; }
.section-head-main { display: grid; grid-template-columns: 1fr .57fr; align-items: end; gap: 8%; }
.section-head h2, .services h2 { margin: 0; font: 700 clamp(48px, 6.5vw, 85px)/.95 var(--display); letter-spacing: -.075em; }
.section-head h2 em { color: var(--hot); }
.section-intro { max-width: 250px; margin: 0 0 7px; color: var(--muted); font-size: 13px; }
.engine-rail { display: flex; align-items: center; gap: 10px; margin: 0 8% 25px; }
.rail-start, .rail-end { width: 9px; height: 9px; display: block; border-radius: 50%; background: var(--hot); }
.rail-end { border-radius: 0; background: var(--teal); transform: rotate(45deg); }
.rail-line { height: 1px; flex: 1; background: var(--line); }
.rail-join { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; color: var(--hot); background: var(--paper); font: 700 10px/1 var(--display); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.step-card { min-height: 320px; padding: 27px 28px 23px; border-top: 1px solid var(--ink); background: transparent; position: relative; transition: background-color .3s, transform .3s var(--ease); }
.step-card:hover { background: #eeeee8; transform: translateY(-5px); }
.step-top { display: flex; align-items: flex-start; justify-content: space-between; }
.step-number { color: #898982; font: 700 10px/1 var(--display); letter-spacing: .12em; }
.shape { width: 67px; height: 67px; display: grid; place-items: center; color: var(--ink); font: 700 24px/1 var(--display); }
.shape-circle { border-radius: 50%; background: var(--hot); }
.shape-square { background: var(--teal); }
.shape-triangle { width: 74px; height: 70px; padding-top: 19px; background: var(--ink); color: var(--white); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.shape-triangle span { transform: translateY(8px); }
.step-card h3 { margin: 24px 0 3px; font: 700 27px/1.1 var(--display); letter-spacing: -.04em; }
.step-bridge { margin: 0 0 13px; color: var(--teal-dark); font-size: 11px; font-weight: 700; }
.step-bridge b { color: var(--hot); }
.step-card > p:last-of-type { max-width: 320px; margin: 0; color: var(--muted); font-size: 12px; }
.step-mark { position: absolute; right: 25px; bottom: 22px; color: #a8a8a1; font: 700 9px/1 var(--display); letter-spacing: .1em; }
.engine-foot { display: flex; align-items: center; gap: 12px; margin-top: 36px; color: var(--muted); font-size: 11px; font-weight: 600; }
.engine-foot-shape { width: 13px; height: 13px; display: block; flex: 0 0 auto; background: var(--hot); transform: rotate(45deg); }
.engine-foot-line { height: 1px; flex: 1; margin-left: 10px; background: var(--line); }
.engine-foot-tag { color: var(--ink); font: 700 8px/1 var(--display); letter-spacing: .12em; }

.ecosystem { position: relative; padding-inline: max(calc((100% - 1440px)/2), 56px); color: var(--white); background: var(--teal); }
.ecosystem::before { content: ''; position: absolute; top: 0; right: 11%; width: 18%; height: 11px; background: var(--hot); }
.ecosystem .section-index { color: rgba(0,0,0,.5); }
.ecosystem .eyebrow { color: rgba(0,0,0,.72); }
.ecosystem .eyebrow-square { background: var(--white); }
.ecosystem-head { margin-bottom: 52px; }
.ecosystem .section-head h2 em { color: var(--white); }
.ecosystem .section-intro { color: rgba(0,0,0,.72); }
.wins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(0,0,0,.24); border: 1px solid rgba(0,0,0,.24); }
.win-card { min-height: 400px; display: flex; align-items: flex-start; flex-direction: column; padding: 30px clamp(24px, 4vw, 56px) 28px; color: var(--ink); background: var(--paper); position: relative; transition: background-color .25s, transform .25s var(--ease); }
.win-card:hover { z-index: 1; background: var(--white); transform: translateY(-3px); }
.win-card-young { background: var(--hot); }
.win-card-wisdom { background: #f7f7f4; }
.win-card-corporate { background: var(--ink); color: var(--white); }
.win-card-community { background: #d9f0ed; }
.win-card-top { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.win-index { font: 700 9px/1 var(--display); letter-spacing: .15em; opacity: .65; }
.win-symbol { width: 38px; height: 38px; display: grid; place-items: center; color: var(--ink); font: 500 22px/1 var(--display); }
.win-symbol-circle { border-radius: 50%; background: var(--teal); }
.win-card-young .win-symbol-circle { background: var(--paper); }
.win-symbol-square { background: var(--hot); }
.win-symbol-triangle { background: var(--teal); clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 10px; }
.win-symbol-outline { border: 1px solid var(--ink); background: transparent; font-size: 34px; }
.win-label { margin: 0 0 9px; font: 700 9px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.win-card h3 { margin: 0 0 18px; font: 700 clamp(26px, 3.3vw, 42px)/1.02 var(--display); letter-spacing: -.06em; }
.win-copy { max-width: 470px; margin: 0 0 26px; color: inherit; opacity: .82; font-size: 12px; line-height: 1.7; }
.text-link { display: inline-flex; align-items: center; gap: 14px; margin-top: auto; border-bottom: 1px solid currentColor; padding-bottom: 5px; font-size: 11px; font-weight: 700; }
.text-link span[aria-hidden="true"] { color: var(--hot); transition: transform .2s var(--ease); }
.text-link:hover span[aria-hidden="true"] { transform: translate(3px, -3px); }
.win-card-corporate .text-link span[aria-hidden="true"] { color: var(--teal); }
.wins-bottom-rule { display: flex; align-items: center; justify-content: center; gap: 16px; padding-top: 22px; color: rgba(0,0,0,.7); font-size: 11px; font-weight: 700; }
.wins-bottom-rule span:first-child, .wins-bottom-rule span:last-child { width: 30px; height: 1px; background: rgba(0,0,0,.35); }

.services { display: grid; grid-template-columns: .68fr 1.32fr; gap: 10%; }
.services-intro { position: relative; }
.services h2 { margin-bottom: 25px; }
.services h2 em { color: var(--hot); }
.services .section-intro { max-width: 295px; font-size: 14px; }
.services-side-note { display: flex; align-items: center; gap: 12px; margin-top: 67px; color: #85857e; font: 600 8px/1.7 var(--display); letter-spacing: .1em; }
.services-side-line { width: 35px; height: 1px; background: var(--teal); }
.service-list { display: flex; flex-direction: column; gap: 13px; }
.service-card { border: 1px solid var(--line); background: var(--white); transition: border-color .2s, box-shadow .25s, transform .25s var(--ease); }
.service-card-pink:hover, .service-card-pink:focus-within, .service-card-pink[open] { border-color: var(--hot); box-shadow: 0 0 0 2px rgba(242,10,114,.11), 7px 7px 0 rgba(242,10,114,.1); }
.service-card-teal:hover, .service-card-teal:focus-within, .service-card-teal[open] { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(0,169,157,.12), 7px 7px 0 rgba(0,169,157,.1); }
.service-card-black:hover, .service-card-black:focus-within, .service-card-black[open] { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(17,17,16,.1), 7px 7px 0 rgba(17,17,16,.08); }
.service-card summary { display: grid; grid-template-columns: 38px 1fr 42px; align-items: start; gap: 18px; padding: 24px 27px; list-style: none; cursor: pointer; }
.service-card summary::-webkit-details-marker { display: none; }
.service-count { padding-top: 5px; color: #86867f; font: 700 10px/1 var(--display); letter-spacing: .1em; }
.service-main { display: flex; flex-direction: column; align-items: flex-start; }
.service-category { margin-bottom: 9px; color: var(--teal-dark); font: 700 9px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.service-title { font: 700 clamp(24px, 3vw, 35px)/1.04 var(--display); letter-spacing: -.06em; }
.service-teaser { margin-top: 11px; color: var(--muted); font-size: 11px; }
.service-open { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font: 500 21px/1 var(--display); transition: color .2s, background-color .2s, transform .2s; }
.service-card[open] .service-open { color: var(--white); background: var(--ink); transform: rotate(45deg); }
.service-detail { padding: 0 27px 25px 83px; animation: reveal-detail .28s var(--ease); }
.service-detail > p { margin: 0 0 19px; color: var(--muted); font-size: 12px; }
.service-examples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 21px; }
.service-examples > div { padding: 13px 14px; background: var(--paper); }
.service-examples > div:last-child { grid-column: 1 / -1; }
.service-examples b, .service-feature b, .camp-flow b { display: block; margin-bottom: 6px; font: 700 11px/1.4 var(--display); }
.service-examples p, .service-feature p, .camp-flow p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.service-feature { display: grid; grid-template-columns: 36px 1fr; gap: 12px; margin: 20px 0; padding: 17px; background: #e6f5f2; }
.feature-spark { display: grid; place-items: center; width: 30px; height: 30px; color: var(--ink); background: var(--teal); font-size: 18px; }
.camp-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 21px 0; }
.camp-flow > div { padding-top: 11px; border-top: 1px solid var(--line); }
.flow-number { display: block; margin-bottom: 12px; color: var(--hot); font: 700 10px/1 var(--display); }
.service-detail .text-link { margin-top: 5px; }

.closing { overflow: hidden; min-height: 610px; display: flex; align-items: center; padding: clamp(62px, 9vw, 120px) clamp(30px, 9vw, 128px) 92px; color: var(--white); background: var(--ink); position: relative; }
.closing-content { max-width: 790px; position: relative; z-index: 2; }
.closing .section-index { margin-bottom: 27px; color: #8c8c84; }
.closing .eyebrow { color: #c8c8c2; }
.closing h2 { max-width: 860px; margin: 0; font: 700 clamp(48px, 7.3vw, 96px)/.97 var(--display); letter-spacing: -.075em; }
.closing h2 em { color: var(--hot); }
.closing-copy { max-width: 650px; margin: 25px 0 0; color: #bdbdb7; font-size: 13px; line-height: 1.8; }
.closing-cta { margin-top: 28px; }
.closing-shape { position: absolute; pointer-events: none; }
.closing-circle { top: 11%; right: 13%; width: 180px; height: 180px; border: 1px solid #363633; border-radius: 50%; }
.closing-square { right: 7%; bottom: 21%; width: 74px; height: 74px; background: var(--teal); opacity: .9; }
.closing-triangle { top: 10%; right: 2%; width: 91px; height: 84px; background: var(--hot); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.closing-side-note { position: absolute; top: 50%; right: 27px; display: flex; align-items: center; gap: 12px; writing-mode: vertical-rl; color: #777771; font: 600 8px/1 var(--display); letter-spacing: .15em; transform: translateY(-50%); }
.closing-note-line { height: 70px; width: 1px; background: linear-gradient(var(--hot), var(--teal)); }
.closing-bottom { position: absolute; right: clamp(30px, 9vw, 128px); bottom: 25px; left: clamp(30px, 9vw, 128px); display: flex; align-items: center; justify-content: space-between; padding-top: 13px; border-top: 1px solid #393936; color: #777771; font: 600 8px/1.4 var(--display); letter-spacing: .11em; }
.closing-bottom b { color: var(--hot); font-size: 15px; }

.site-footer { padding-block: 56px 17px; background: var(--paper); }
.footer-main { display: grid; grid-template-columns: 1fr 1.15fr .5fr; gap: 8%; padding-bottom: 52px; }
.brand-footer.brand-official { width: 230px; height: 115px; }
.brand-footer.brand-official .official-logo { width: 100%; }
.footer-brand-block > p { margin: 16px 0 17px; color: var(--muted); font-size: 12px; }
.footer-location { color: #85857e; font: 600 8px/1 var(--display); letter-spacing: .13em; }
.newsletter-kicker { display: flex; align-items: center; gap: 9px; font: 700 13px/1.3 var(--display); }
.newsletter > p { max-width: 360px; margin: 11px 0 15px; color: var(--muted); font-size: 11px; }
.newsletter-form { display: flex; max-width: 420px; border-bottom: 1px solid var(--ink); }
.newsletter-form input { width: 100%; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.newsletter-form input:focus-visible { box-shadow: inset 0 -2px 0 var(--teal); }
.newsletter-form button { width: 46px; height: 42px; flex: 0 0 auto; border: 0; background: var(--hot); cursor: pointer; font-size: 17px; transition: background-color .2s, color .2s; }
.newsletter-form button:hover { color: var(--white); background: var(--ink); }
.newsletter .form-note { min-height: 17px; margin: 7px 0 0; color: #85857e; font-size: 9px; }
.newsletter .form-note.status-notice { color: var(--teal-dark); font-weight: 700; }
.footer-links { display: flex; align-items: flex-start; flex-direction: column; gap: 9px; }
.footer-label { margin-bottom: 6px; color: #777771; font: 700 8px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.footer-links a { display: flex; align-items: center; gap: 9px; font: 600 11px/1.2 var(--display); }
.footer-links a span { color: var(--teal-dark); transition: transform .2s; }
.footer-links a:hover span { transform: translate(2px, -2px); }
.footer-bottom { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 12px; border-top: 1px solid var(--line); color: #777771; font-size: 9px; }
.footer-language { color: var(--muted); font-size: 9px; }
.footer-language span:first-child { color: var(--muted); }
.footer-language .lang-zh { color: var(--hot); }
.back-to-top { display: inline-flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 700; }
.back-to-top span[aria-hidden="true"] { color: var(--hot); font-size: 14px; }

.reveal { opacity: 0; transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.from-left { transform: translate3d(-34px, 0, 0); }
.reveal.from-right { transform: translate3d(34px, 0, 0); }
.reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.step-card:nth-child(2), .win-card:nth-child(2), .win-card:nth-child(4) { transition-delay: .08s; }
@keyframes reveal-detail { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }

@media (max-width: 1040px) {
  :root { --shell: min(100% - 60px, 1000px); }
  .site-header { gap: 17px; }
  .main-nav { gap: 18px; }
  .header-actions { gap: 12px; }
  .hero { gap: 2%; }
  .hero-title { font-size: clamp(48px, 6.5vw, 72px); }
  .hero-art { min-height: 455px; }
  .hero-caption { width: 155px; min-height: 112px; }
  .mission-grid { gap: 6%; }
  .ecosystem { padding-inline: 30px; }
  .services { gap: 6%; }
}

@media (max-width: 760px) {
  :root { --shell: calc(100% - 40px); }
  html { scroll-padding-top: 72px; }
  .topline { height: 27px; gap: 9px; padding-inline: 20px; font-size: 7px; }
  .site-header { min-height: 82px; gap: 12px; }
  .brand-official { width: 150px; height: 78px; }
  .brand-official .official-logo { width: 100%; }
  .brand-footer.brand-official { width: 205px; height: 108px; }
  .brand-footer.brand-official .official-logo { width: 100%; }
  .menu-toggle { width: 37px; height: 37px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; margin-left: auto; border: 1px solid var(--line); background: transparent; cursor: pointer; }
  .menu-toggle span { width: 15px; height: 1px; display: block; background: var(--ink); transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .main-nav { position: absolute; top: 68px; right: 0; left: 0; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 9px 18px 16px; border: 1px solid var(--line); border-top: 0; background: var(--paper); box-shadow: 0 12px 20px rgba(0,0,0,.08); }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 11px 0; border-bottom: 1px solid var(--line); }
  .main-nav a:last-child { border-bottom: 0; }
  .main-nav a::after { display: none; }
  .header-actions { gap: 11px; }
  .header-actions .button { display: none; }
  .language-toggle { font-size: 10px; }
  .hero { min-height: unset; display: flex; flex-direction: column; align-items: stretch; gap: 27px; padding-block: 53px 56px; }
  .hero-copy { padding: 0; }
  .eyebrow { margin-bottom: 16px; font-size: 9px; }
  .hero-title { font-size: clamp(50px, 11.7vw, 78px); }
  .title-outline { -webkit-text-stroke-width: 1.2px; }
  .hero-zh { margin-top: 13px; font-size: 14px; }
  .hero-subtitle { margin-top: 17px; font-size: 16px; }
  .hero-deck { font-size: 12px; }
  .hero-cta { margin-top: 20px; }
  .hero-footnote { margin-top: 20px; font-size: 9px; }
  .hero-art { min-height: min(104vw, 440px); margin: 0 5px 14px 13px; }
  .hero-art-backdrop { top: 4%; right: 2%; bottom: 1%; left: 4%; }
  .hero-photo-frame { right: 5%; bottom: 8%; }
  .hero-caption { right: -5px; bottom: 1%; width: 130px; min-height: 92px; padding: 11px; font-size: 12px; }
  .caption-arrow { right: 11px; bottom: 8px; font-size: 17px; }
  .hero-stamp { top: 6%; left: -6%; width: 72px; height: 72px; font-size: 7px; }
  .hero-coordinate { right: -3%; font-size: 7px; }
  .hero-bottom-line { bottom: 17px; }
  .mission { width: 100%; padding: 23px 20px 18px; }
  .mission-topline { padding-bottom: 18px; }
  .mission-kicker { font-size: 8px; }
  .mission-grid { grid-template-columns: 1fr; gap: 31px; padding-block: 43px 41px; }
  .mission-heading h2 { font-size: clamp(45px, 10vw, 68px); }
  .mission-copy { padding-top: 0; font-size: 12px; }
  .mission-copy .mission-lead { font-size: 14px; }
  .mission-quote { margin-top: 23px; padding: 18px; }
  .mission-quote p { font-size: 15px; }
  .mission-bottom { gap: 9px; }
  .mission-bottom-label { font-size: 7px; letter-spacing: .09em; }
  .engine, .ecosystem, .services { padding-block: 79px; }
  .section-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 38px; }
  .section-head .eyebrow, .services-intro .eyebrow { margin-top: 15px; }
  .section-head-main { grid-template-columns: 1fr; gap: 15px; }
  .section-head h2, .services h2 { font-size: clamp(48px, 10.8vw, 75px); }
  .section-intro { max-width: 390px; font-size: 12px; }
  .engine-rail { margin-inline: 3%; }
  .steps { grid-template-columns: 1fr; gap: 5px; }
  .step-card { min-height: 265px; padding: 22px; border-top: 1px solid var(--line); }
  .step-card h3 { margin-top: 17px; font-size: 24px; }
  .shape { width: 56px; height: 56px; }
  .shape-triangle { width: 63px; height: 59px; }
  .step-card > p:last-of-type { max-width: 400px; }
  .engine-foot { flex-wrap: wrap; font-size: 10px; }
  .engine-foot-line { min-width: 30px; }
  .engine-foot-tag { font-size: 7px; }
  .ecosystem { width: 100%; padding-inline: 20px; }
  .ecosystem::before { right: 20px; }
  .ecosystem-head { margin-bottom: 31px; }
  .wins-grid { grid-template-columns: 1fr; }
  .win-card { min-height: 350px; padding: 25px 23px; }
  .win-card h3 { font-size: clamp(30px, 8vw, 41px); }
  .win-copy { font-size: 11px; }
  .wins-bottom-rule { gap: 9px; font-size: 9px; text-align: center; }
  .wins-bottom-rule span:first-child, .wins-bottom-rule span:last-child { width: 16px; flex: 0 0 auto; }
  .services { grid-template-columns: 1fr; gap: 37px; }
  .services-intro { max-width: 510px; }
  .services-side-note { margin-top: 25px; }
  .service-card summary { grid-template-columns: 27px 1fr 34px; gap: 10px; padding: 18px 15px; }
  .service-title { font-size: clamp(24px, 6vw, 32px); }
  .service-teaser { font-size: 10px; }
  .service-open { width: 30px; height: 30px; }
  .service-detail { padding: 0 15px 19px 52px; }
  .service-detail > p { font-size: 11px; }
  .service-examples { grid-template-columns: 1fr; }
  .service-examples > div:last-child { grid-column: auto; }
  .camp-flow { grid-template-columns: 1fr; gap: 10px; }
  .camp-flow > div { display: grid; grid-template-columns: 31px 1fr; gap: 0 9px; padding-top: 10px; }
  .flow-number { grid-row: span 2; margin: 2px 0 0; }
  .camp-flow b { margin-bottom: 3px; }
  .closing { width: 100%; min-height: 650px; padding: 67px 25px 90px; }
  .closing h2 { font-size: clamp(49px, 10.6vw, 76px); }
  .closing-copy { font-size: 12px; }
  .closing-cta { align-items: flex-start; max-width: min(100%, 350px); padding: 15px 18px; text-align: left; }
  .closing-circle { top: 7%; right: 10%; width: 105px; height: 105px; }
  .closing-square { right: 9%; bottom: 14%; width: 40px; height: 40px; }
  .closing-triangle { top: 12%; right: 1%; width: 49px; height: 46px; }
  .closing-side-note { right: 9px; font-size: 6px; }
  .closing-bottom { right: 25px; left: 25px; gap: 10px; font-size: 7px; }
  .site-footer { padding-block: 43px 14px; }
  .footer-main { grid-template-columns: 1fr; gap: 34px; padding-bottom: 34px; }
  .footer-brand-block > p { margin-block: 12px; }
  .newsletter > p { font-size: 10px; }
  .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
  .footer-label { grid-column: 1 / -1; }
  .footer-links a { font-size: 10px; }
  .footer-bottom { flex-wrap: wrap; padding-top: 13px; font-size: 8px; }
}

@media (max-width: 390px) {
  :root { --shell: calc(100% - 32px); }
  .topline { padding-inline: 16px; font-size: 6px; }
  .topline span:nth-of-type(3) { display: none; }
  .hero-title { font-size: 47px; }
  .hero-art { min-height: 340px; }
  .hero-caption { width: 114px; min-height: 86px; font-size: 11px; }
  .mission { padding-inline: 16px; }
  .ecosystem { padding-inline: 16px; }
  .service-card summary { grid-template-columns: 22px 1fr 29px; gap: 8px; padding-inline: 12px; }
  .service-detail { padding-inline: 12px; }
  .service-title { font-size: 23px; }
  .closing-bottom { right: 20px; left: 20px; font-size: 6px; }
  .section-shell { width: var(--shell); }
}

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


/* Readability and accessibility refinements for visitors across age groups. */
:root { --muted: #55554f; }
.topline { font-size: 10px; letter-spacing: .06em; }
.main-nav a, .language-toggle { font-size: 15px; }
.language-toggle > span:first-child { color: #c8005c; }
.button { font-size: 15px; }
.button-small { font-size: 13px; }
.eyebrow, .section-index, .mission-kicker, .mission-bottom-label,
.win-index, .win-label, .step-number, .step-mark, .engine-foot-tag,
.service-count, .service-category, .flow-number, .closing-side-note,
.closing-bottom, .footer-location, .footer-label { font-size: 11px; }
.hero-deck, .mission-copy, .section-intro, .step-card > p:last-of-type,
.win-copy, .service-detail > p, .service-examples p, .service-feature p,
.camp-flow p, .closing-copy, .footer-brand-block > p, .newsletter > p { font-size: 15px; }
.hero-footnote, .caption-mark, .quote-byline, .step-bridge, .engine-foot,
.service-teaser, .service-examples b, .service-feature b, .camp-flow b,
.newsletter .form-note, .footer-links a, .footer-bottom, .back-to-top,
.footer-language { font-size: 13px; }
.text-link, .newsletter-form input { font-size: 15px; }
.hero-stamp { font-size: 11px; }
.hero-coordinate { font-size: 10px; }
.hero-bottom-label { font-size: 11px; }
.engine-foot-tag, .services-side-note { font-size: 11px; }
.mission-bottom-label { color: #bdbdb7; }
.step-mark { color: #55554f; }
.ecosystem .section-index { color: #052b28; }
.ecosystem .eyebrow, .ecosystem .section-intro { color: #052b28; }
.closing .section-index, .closing-side-note, .closing-bottom { color: #bdbdb7; }
.footer-location, .footer-label, .footer-bottom { color: #55554f; }
.win-index { opacity: .9; }
.wins-bottom-rule { font-size: 13px; }
.service-card summary { grid-template-columns: 38px minmax(0, 1fr) 128px 42px; }
.service-thumb { width: 128px; height: 92px; object-fit: cover; border: 1px solid var(--line); }

@media (max-width: 1040px) {
  .service-card summary { grid-template-columns: 27px minmax(0, 1fr) 94px 34px; }
  .service-thumb { width: 94px; height: 76px; }
}

@media (max-width: 760px) {
  .topline { font-size: 10px; }
  .eyebrow, .section-index, .mission-kicker, .mission-bottom-label,
  .win-index, .win-label, .step-number, .step-mark, .engine-foot-tag,
  .service-count, .service-category, .flow-number, .closing-side-note,
  .closing-bottom, .footer-location, .footer-label { font-size: 11px; }
  .hero-deck, .mission-copy, .section-intro, .step-card > p:last-of-type,
  .win-copy, .service-detail > p, .service-examples p, .service-feature p,
  .camp-flow p, .closing-copy, .footer-brand-block > p, .newsletter > p { font-size: 15px; }
  .hero-footnote, .caption-mark, .quote-byline, .step-bridge, .engine-foot,
  .service-teaser, .service-examples b, .service-feature b, .camp-flow b,
  .newsletter .form-note, .footer-links a, .footer-bottom, .back-to-top,
  .footer-language { font-size: 13px; }
  .engine-foot-tag { font-size: 11px; }
  .service-card summary { grid-template-columns: 25px minmax(0, 1fr) 74px 30px; gap: 8px; }
  .service-thumb { width: 74px; height: 68px; }
  .service-title { font-size: clamp(22px, 5.8vw, 29px); }
}

@media (max-width: 390px) {
  .topline { font-size: 10px; }
  .service-card summary { grid-template-columns: 22px minmax(0, 1fr) 68px 28px; gap: 7px; }
  .service-thumb { width: 68px; height: 64px; }
}


.service-thumb-placeholder {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 128px;
  height: 92px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #f0efe8;
  color: #111110;
}
.service-photo-geometry {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hot);
  opacity: .78;
  transform: translate(-70%, -50%);
}
.service-photo-geometry::after {
  position: absolute;
  top: 8px;
  left: 29px;
  width: 30px;
  height: 30px;
  background: var(--teal);
  content: '';
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.service-photo-label {
  padding: 3px 6px;
  background: #f0efe8;
  font: 700 11px/1.2 var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
}
@media (max-width: 1040px) {
  .service-thumb-placeholder { width: 94px; height: 76px; }
}
@media (max-width: 760px) {
  .service-thumb-placeholder { width: 74px; height: 68px; }
}
@media (max-width: 390px) {
  .service-thumb-placeholder { width: 68px; height: 64px; }
}


/* Entry point to the restricted GenCo:Lab content editor. */
.cms-editor-link { color: var(--muted); font-size: 13px; font-weight: 700; text-underline-offset: 3px; }
.cms-editor-link:hover, .cms-editor-link:focus-visible { color: var(--hot); }