/* COLOUR 介绍＋招聘网站
   品牌：黑白为底，五色为主角。字体：Montserrat（品牌字）＋ Noto Sans SC（思源黑体）。 */

@font-face { font-family: 'Montserrat'; src: url(../fonts/7ff59df9fe55323caefd.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url(../fonts/f97ec889d73a7cd3f13c.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url(../fonts/0849d7b0b97f9df6e508.woff2) format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'COLOUR Sans SC'; src: url(../fonts/73e72c9794491278fd3f.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --red: #FF4366;
  --blue: #3EBFFF;
  --orange: #F7931E;
  --green: #00DD9E;
  --purple: #8045F4;
  --black: #111111;
  --white: #FFFFFF;
  --paper: #F4F2EC;
  --grey: #8A8A8A;
  --line: rgba(10, 10, 10, .14);

  --font: 'Montserrat', 'COLOUR Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-in-out: cubic-bezier(.7, 0, .2, 1);
  --gutter: clamp(20px, 3.4vw, 56px);
  --maxw: 1680px;
  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
body.is-loading { overflow: hidden; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--black); color: var(--white);
  display: grid; place-items: center;
  transition: clip-path 900ms var(--ease-in-out);
  clip-path: inset(0 0 0 0);
}
.loader.is-done { clip-path: inset(0 0 100% 0); }
/* JKR 式：一条竖线由上往下长，颜色依品牌五色接力 */
.loader-line { position: absolute; left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.loader-line i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--white); transition: background-color 200ms; }
.loader-status {
  position: absolute; left: var(--gutter); bottom: var(--gutter);
  font-size: 13px; color: var(--grey); font-variant-numeric: tabular-nums;
}
.loader-count { position: absolute; right: var(--gutter); bottom: var(--gutter); font-size: 13px; color: var(--grey); font-variant-numeric: tabular-nums; }

/* ---------- 导航 ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: flex-end; align-items: center;
  /* 10/27：与子页 .cp-nav-jk 用同一条 72px 高的横条，菜单文字在各页位置一致 */
  min-height: var(--nav-h); padding: 0 var(--gutter);
  color: var(--white); background: transparent;
  transition: transform 500ms var(--ease), background-color 300ms, color 300ms;
}
.nav.is-solid { background: var(--nav-bg, transparent); }
.nav.is-hidden { transform: translateY(-100%); }
.nav.on-light { color: var(--black); }
.nav-logo .lk-black { display: none; }
.nav.on-light .nav-logo .lk-white { display: none; }
.nav.on-light .nav-logo .lk-black { display: block; }
.nav-logo img { height: clamp(26px, 2.4vw, 36px); width: auto; }
.nav-links { display: flex; gap: clamp(16px, 2.4vw, 40px); font-weight: 700; font-size: 15px; }
.nav-links a { position: relative; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 400ms var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; background: var(--black); color: var(--white);
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: end;
  overflow: hidden;
}
/* Koto 式：全屏 showreel，左下两色字 */
.hero-media { position: absolute; inset: 0; background: var(--black); }
.hero-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  /* 10/28：成片自带上下黑边（画面约 2.2:1 装在 16:9 档里，上下各约 8.3%，个别镜头到 9.3%）。
     等比放大 1.23 倍刚好把黑边裁到画外，画面铺满整屏；再放大就会明显裁到内容，所以只取「刚好」。 */
  transform: scale(1.23); transform-origin: center;
  opacity: 0; transition: opacity 1600ms var(--ease);
}
.is-ready .hero-media video { opacity: .62; }
.hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,.78) 56%, rgba(0,0,0,.96) 74%, #000 100%); }
.hero-copy { position: relative; padding: 0 var(--gutter) clamp(48px, 9vh, 112px); width: 100%; display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.hero-we { font-weight: 900; font-size: clamp(40px, 6.2vw, 104px); line-height: 1.02; letter-spacing: -.02em; }
.hero-tagline {
  font-weight: 500; letter-spacing: -.02em; color: rgba(255, 255, 255, .5);
  font-size: clamp(32px, 5vw, 84px); line-height: 1.04; max-width: 14em;
}
.hero-reel {
  display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px;
  opacity: 0; transition: opacity 1000ms 700ms var(--ease);
}
.is-ready .hero-reel { opacity: 1; }
.hero-reel i { width: 52px; height: 52px; border-radius: 50%; background: var(--white); display: grid; place-items: center; transition: transform 400ms var(--ease), background-color 300ms; }
.hero-reel i::before { content: ''; border-left: 13px solid var(--black); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.hero-reel:hover i { transform: scale(1.12); background: var(--orange); }
.hero-note { position: absolute; top: 84px; right: var(--gutter); max-width: 340px; font-size: 12px; line-height: 1.5; color: var(--white); background: var(--black); border-left: 3px solid var(--orange); padding: 8px 10px; }

/* 全屏播放 */
.reel-player { position: fixed; inset: 0; z-index: 95; background: var(--black); display: none; align-items: center; justify-content: center; }
.reel-player.is-open { display: flex; }
.reel-player video { width: 100%; height: 100%; object-fit: contain; }
.reel-player button { position: absolute; top: 18px; right: 24px; color: var(--white); font-size: 32px; z-index: 2; }
.hero-tagline .w { display: inline-block; overflow: hidden; vertical-align: top; }
.hero-tagline .w > span { display: inline-block; transform: translateY(105%); transition: transform 1000ms var(--ease); }
.is-ready .hero-tagline .w > span { transform: none; }
.hero-tagline .c { transition: color 300ms; cursor: default; }
.hero-zh {
  margin-top: clamp(20px, 3vh, 36px);
  font-size: clamp(18px, 1.6vw, 26px); font-weight: 500; color: rgba(255, 255, 255, .78);
  opacity: 0; transition: opacity 1000ms 500ms var(--ease);
}
.is-ready .hero-zh { opacity: 1; }

/* ---------- 职能名单（makemake 式） ---------- */
.roles { background: var(--paper); padding: clamp(96px, 16vh, 200px) 0; text-align: center; }
.roles-lead { font-size: clamp(18px, 1.5vw, 24px); font-weight: 500; margin-bottom: 18px; }
.roles-list { list-style: none; margin: 0; padding: 0; font-weight: 900; font-size: clamp(26px, 3.4vw, 54px); line-height: 1.22; letter-spacing: -.01em; }
.roles-list li { overflow: hidden; }
.roles-list li > span { display: inline-block; transform: translateY(100%); opacity: 0; transition: transform 900ms var(--ease), opacity 600ms var(--ease); }
.roles.is-in .roles-list li > span { transform: none; opacity: 1; }
.roles-tail { margin-top: 36px; display: flex; justify-content: center; }
.roles-tail img { height: clamp(40px, 5vw, 72px); width: auto; }

/* ---------- 宣言（JKR 式逐词点亮） ---------- */
.manifesto { background: var(--black); color: var(--white); }
.manifesto-pin { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; }
.manifesto-text {
  max-width: 1280px; font-weight: 700; letter-spacing: -.01em;
  font-size: clamp(28px, 3.9vw, 64px); line-height: 1.28;
}
.manifesto-text .mw { color: rgba(255, 255, 255, .16); transition: color 240ms linear; }
.manifesto-text .mw.on { color: var(--white); }
.chip {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  height: .92em; margin: 0 .12em; transform: translateY(-.06em);
  opacity: .2; transition: opacity 300ms;
}
.chip.on { opacity: 1; }
.chip-img { height: 1em; border-radius: .14em; overflow: hidden; }
.chip-img img { height: 100%; width: auto; max-width: none; }
.book-covers button { display: block; }
.chip-btn { width: 2.1em; background: var(--red); border-radius: .16em; box-shadow: 0 .12em 0 var(--red); transition: opacity 300ms, transform 160ms, box-shadow 160ms; }
.chip-btn.on.press { transform: translateY(.02em); box-shadow: 0 0 0 var(--red); }
.chip-grid { width: .92em; display: grid; grid-template-columns: repeat(3, 1fr); gap: .06em; }
.chip-grid i { aspect-ratio: 1; border-radius: 50%; }
.chip-book { height: 1.3em; width: auto; transform: translateY(-.12em); }
.chip-book img { height: 100%; width: auto; }
.chip-cursor { width: .7em; }
.chip-cursor svg { width: 100%; height: auto; }
.manifesto-spacer { height: 120vh; }

/* ---------- 案例 ---------- */
.cases-head { padding-top: clamp(96px, 14vh, 180px); padding-bottom: clamp(40px, 6vh, 72px); }
.cases-title { font-weight: 900; font-size: clamp(44px, 7.4vw, 128px); line-height: .98; letter-spacing: -.02em; }
.cases-title span { color: var(--grey); }
.case {
  position: sticky; top: 0; min-height: 100svh;
  background: var(--c); color: var(--ink);
  padding: clamp(84px, 11vh, 120px) 0 clamp(64px, 8vh, 96px);
  transform-origin: 50% 0;
  will-change: transform;
}
.case-grid {
  display: grid; gap: clamp(20px, 2.6vw, 44px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: 'name name' 'info hero';
  align-items: start;
}
.case-name { grid-area: name; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.case-name h3 { font-weight: 900; font-size: clamp(48px, 7vw, 120px); line-height: .95; letter-spacing: -.02em; }
.case-name .en { font-weight: 700; font-size: clamp(14px, 1.2vw, 18px); opacity: .7; }
.case-info { grid-area: info; display: flex; flex-direction: column; gap: 22px; }
.case-line { font-size: clamp(22px, 2.1vw, 34px); font-weight: 700; line-height: 1.3; }
.case-meta { font-size: 15px; font-weight: 500; opacity: .75; }
.case-note { font-size: 13px; font-weight: 700; color: inherit; opacity: .9; border-left: 3px solid currentColor; padding-left: 10px; }
.case-hiring { display: inline-flex; gap: 10px; align-items: center; font-weight: 700; font-size: 15px; border-bottom: 2px solid currentColor; padding-bottom: 2px; align-self: flex-start; }
.case-hiring:hover { opacity: .7; }
.case-hero { grid-area: hero; }
.case-hero .frame { aspect-ratio: 16 / 9; }
.case-thumbs { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; align-items: start; margin-top: auto; }
.case-thumbs .thumb { width: 100%; }
.case-thumbs .thumb.frame { padding: 8px; }
.case-thumbs button.thumb { overflow: hidden; background: rgba(0, 0, 0, .08); }
.case-thumbs button.thumb img { width: 100%; height: auto; transition: transform 500ms var(--ease); }
.case-thumbs button.thumb:hover img { transform: scale(1.04); }
.case-thumbs .thumb.frame { aspect-ratio: 2 / 3; }

/* ---------- 待交占位框 ---------- */
.frame {
  position: relative; width: 100%;
  border: 1.5px dashed currentColor;
  background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(127, 127, 127, .10) 14px 15px);
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 16px; gap: 6px; color: inherit;
}
.frame b { font-size: clamp(14px, 1.1vw, 17px); font-weight: 900; }
.frame small { font-size: 12px; font-weight: 500; opacity: .75; line-height: 1.5; }
.frame.sm b { font-size: 12px; }
.frame.sm small { font-size: 11px; }

/* ---------- 我们做什么 ---------- */
.caps { padding: clamp(96px, 14vh, 180px) 0; }
.caps-title { font-weight: 900; font-size: clamp(40px, 5.6vw, 96px); line-height: 1; letter-spacing: -.02em; margin-bottom: clamp(40px, 6vh, 72px); }
.cap {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 48px; align-items: center;
  padding: clamp(22px, 3vh, 36px) var(--gutter); margin: 0 calc(var(--gutter) * -1);
  border-top: 1px solid var(--line);
  transition: background-color 500ms var(--ease), color 500ms var(--ease);
}
.cap:last-child { border-bottom: 1px solid var(--line); }
.cap-word { font-weight: 900; font-size: clamp(48px, 8.4vw, 148px); line-height: .9; letter-spacing: -.03em; color: var(--c); transition: color 500ms var(--ease); }
.cap-word small { display: block; font-size: clamp(16px, 1.3vw, 20px); letter-spacing: 0; margin-top: 10px; color: var(--black); font-weight: 700; transition: color 500ms var(--ease); }
.cap p { font-size: clamp(16px, 1.25vw, 19px); max-width: 34em; }
.cap .pending { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; border-left: 3px solid currentColor; padding-left: 10px; }
.cap:hover { background: var(--c); color: var(--black); }
.cap:hover .cap-word { color: var(--black); }

/* ---------- 规范画册 ---------- */
.book { background: var(--black); color: var(--white); padding: clamp(96px, 14vh, 180px) 0; }
.book-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 72px); align-items: end; }
.book-covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 24px); }
.book-covers img { width: 100%; height: auto; }
.book-copy h2 { font-weight: 900; font-size: clamp(36px, 4.4vw, 76px); line-height: 1.04; letter-spacing: -.02em; margin-bottom: 24px; }
.book-copy p { font-size: clamp(16px, 1.25vw, 19px); color: rgba(255, 255, 255, .8); max-width: 26em; }
.book-copy .pending { margin-top: 28px; font-size: 13px; font-weight: 700; color: var(--orange); border-left: 3px solid var(--orange); padding-left: 10px; }

/* ---------- 奖项 ---------- */
.awards { padding: clamp(96px, 14vh, 180px) 0; }
.awards-title { font-weight: 900; font-size: clamp(40px, 5.6vw, 96px); line-height: 1; letter-spacing: -.02em; margin-bottom: clamp(32px, 5vh, 56px); }
.award {
  display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 5fr) minmax(0, 4fr); gap: 24px; align-items: baseline;
  padding: 22px 0; border-top: 1px solid var(--line); font-size: clamp(18px, 1.6vw, 26px); font-weight: 700;
}
.award:last-of-type { border-bottom: 1px solid var(--line); }
.award .y { color: var(--grey); font-variant-numeric: tabular-nums; }
.award .work { font-weight: 500; font-size: clamp(15px, 1.15vw, 18px); }
.award.is-empty { color: var(--grey); }
.award.is-empty .slot { display: inline-block; min-width: 6em; border-bottom: 1.5px dashed currentColor; }
.awards-spec { margin-top: 20px; font-size: 13px; font-weight: 700; border-left: 3px solid var(--red); padding-left: 10px; }

/* ---------- 小组 ---------- */
.teams { padding: 0 0 clamp(96px, 14vh, 180px); }
.teams-title { font-weight: 900; font-size: clamp(40px, 5.6vw, 96px); line-height: 1; letter-spacing: -.02em; margin-bottom: clamp(32px, 5vh, 56px); }
.teams-bar { display: flex; height: clamp(260px, 42vh, 420px); }
.team {
  flex: var(--grow) 1 0; min-width: 0; background: var(--c); color: var(--ink);
  padding: clamp(16px, 2vw, 28px); display: flex; flex-direction: column; justify-content: space-between;
  transform-origin: left; transform: scaleX(0); transition: transform 1100ms var(--ease);
}
.teams.is-in .team { transform: none; }
.team h3 { font-weight: 900; font-size: clamp(28px, 3.6vw, 60px); line-height: 1; letter-spacing: -.02em; }
.team p { font-size: 15px; font-weight: 700; }
.teams-note { margin-top: 16px; font-size: 13px; font-weight: 700; border-left: 3px solid var(--blue); padding-left: 10px; }

/* ---------- 负责人一句话（Pepsi 招聘页开场） ---------- */
.leader { padding: clamp(96px, 14vh, 180px) 0; background: var(--red); color: var(--black); }
.leader-big { font-weight: 900; font-size: clamp(48px, 8vw, 140px); line-height: 1.04; letter-spacing: -.03em; margin-bottom: clamp(40px, 6vh, 72px); }
.leader-quote { font-weight: 700; font-size: clamp(24px, 2.6vw, 42px); line-height: 1.32; max-width: 22em; }
.leader-quote .slot { border-bottom: 2px dashed currentColor; }
.leader-who { margin-top: 24px; font-size: 15px; font-weight: 700; }

/* ---------- 规模数字（Pepsi GLOBAL SCALE） ---------- */
.scale { padding: clamp(80px, 12vh, 160px) 0; background: var(--purple); color: var(--white); }
.scale-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.scale-item b { display: block; font-weight: 900; font-size: clamp(64px, 9vw, 160px); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.scale-item b.slot { color: rgba(255,255,255,.35); }
.scale-item span { display: block; margin-top: 12px; font-size: clamp(16px, 1.3vw, 20px); font-weight: 700; }
.scale-note { margin-top: 32px; font-size: 13px; font-weight: 700; border-left: 3px solid var(--white); padding-left: 10px; }

/* ---------- 听团队说 ---------- */
.voices { background: var(--paper); padding: clamp(96px, 14vh, 180px) 0; }
.voices-title { font-weight: 900; font-size: clamp(40px, 5.6vw, 96px); line-height: 1; letter-spacing: -.02em; margin-bottom: clamp(32px, 5vh, 56px); }
.voices-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.voice .frame { aspect-ratio: 4 / 5; }
.voice blockquote { margin: 20px 0 10px; font-size: clamp(18px, 1.5vw, 24px); font-weight: 700; line-height: 1.4; }
.voice .who { font-size: 14px; font-weight: 500; color: #555; }
.voice .slot { border-bottom: 1.5px dashed currentColor; }

/* ---------- 职位 ---------- */
.jobs { padding: clamp(96px, 14vh, 180px) 0; }
.jobs-top { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vh, 48px); }
.jobs-title { font-weight: 900; font-size: clamp(48px, 8vw, 140px); line-height: .92; letter-spacing: -.03em; }
.jobs-title sup { font-size: .32em; vertical-align: top; margin-left: .1em; color: var(--red); letter-spacing: 0; }
.filters { display: flex; flex-direction: column; gap: 8px; font-weight: 700; font-size: 15px; }
.filter-row { display: flex; gap: 18px; flex-wrap: wrap; }
.filter-row button { color: var(--grey); border-bottom: 2px solid transparent; padding-bottom: 2px; transition: color 200ms; }
.filter-row button:hover { color: var(--black); }
.filter-row button[aria-pressed='true'] { color: var(--black); border-bottom-color: var(--black); }
.job {
  position: relative; display: grid; align-items: center; gap: 12px 32px;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr) minmax(0, 3fr) 48px;
  padding: clamp(18px, 2.4vh, 28px) var(--gutter); margin: 0 calc(var(--gutter) * -1);
  border-top: 1px solid var(--line);
  transition: background-color 350ms var(--ease), color 350ms var(--ease);
}
.job:last-child { border-bottom: 1px solid var(--line); }
.job-title { font-weight: 900; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.2; }
.job-title .hot { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 2px 8px; background: var(--red); color: var(--white); font-size: 12px; font-weight: 700; transform: translateY(-.15em); }
.job-sum { font-size: 15px; color: #444; }
.job-meta { font-size: 14px; font-weight: 700; display: flex; gap: 14px; align-items: center; }
.job-meta .sq { width: 12px; height: 12px; background: var(--c); outline: 1px solid rgba(0, 0, 0, .15); }
.job-arrow { justify-self: end; font-size: 26px; font-weight: 700; transition: transform 350ms var(--ease); }
.job:hover { background: var(--c); color: var(--ink); }
.job:hover .job-sum { color: inherit; }
.job:hover .job-arrow { transform: translateX(6px); }
.job.is-hidden { display: none; }
.jobs-foot { margin-top: 36px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 15px; font-weight: 700; }
.jobs-foot a { border-bottom: 2px solid currentColor; }
.jobs-empty { padding: 40px 0; color: var(--grey); font-weight: 700; }

/* ---------- 地点 ---------- */
.offices { padding: 0 0 clamp(96px, 14vh, 180px); }
.offices-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); align-items: start; }
.office h3 { font-weight: 900; font-size: clamp(32px, 4vw, 64px); line-height: 1; margin: 18px 0 6px; }
.office .addr { font-size: 15px; color: #555; }
.office img { width: 100%; height: auto; }
.office .frame { aspect-ratio: 1920 / 831; }

/* ---------- 页尾 ---------- */
.footer { background: var(--black); color: var(--white); padding: clamp(96px, 14vh, 180px) 0 120px; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.footer-closing { font-weight: 900; font-size: clamp(40px, 5.8vw, 100px); line-height: 1.02; letter-spacing: -.02em; }
.footer-art img { width: 100%; height: auto; }
.footer-bottom { margin-top: 72px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 14px; color: rgba(255, 255, 255, .6); }
.footer-bottom img { height: 30px; width: auto; }

/* ---------- 灯箱 ---------- */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(10, 10, 10, .94); display: none; align-items: center; justify-content: center; padding: 48px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox-cap { position: absolute; left: 24px; bottom: 20px; color: var(--white); font-size: 14px; font-weight: 700; }
.lightbox-close { position: absolute; top: 16px; right: 24px; color: var(--white); font-size: 32px; }

/* ---------- 进场 ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.rv.is-in { opacity: 1; transform: none; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .nav-links a:not(.nav-cta) { display: none; }

  .hero-note { display: none; }
  .scale-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case { position: relative; min-height: 0; }
  .case-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'name' 'hero' 'info'; }
  .case-hero .frame { aspect-ratio: 9 / 16; max-height: 70vh; }
  .case-hero .frame.has-landscape { aspect-ratio: 16 / 9; }
  .cap { grid-template-columns: minmax(0, 1fr); }
  .book-grid, .offices-grid, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .award { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .teams-bar { flex-direction: column; height: auto; }
  .team { min-height: 140px; transform-origin: top; transform: scaleY(0); }
  .voices-grid { grid-template-columns: minmax(0, 1fr); }
  .job { grid-template-columns: minmax(0, 1fr) 32px; }
  .job-sum, .job-meta { grid-column: 1; }
  .job-arrow { grid-row: 1; grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .case { position: relative; }
}

/* ---------- 第二轮：宣言 emoji、小组引言、页尾按钮 ---------- */
.manifesto-text .mw.emo { color: inherit; opacity: .18; transition: opacity 240ms linear; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.manifesto-text .mw.emo.on { opacity: 1; }
.teams-intro { max-width: 40em; margin: calc(clamp(32px, 5vh, 56px) * -0.5) 0 clamp(32px, 5vh, 56px); font-size: clamp(16px, 1.3vw, 20px); color: #444; }
.footer-cta { display: inline-flex; margin-top: 32px; padding: 16px 26px; background: var(--white); color: var(--black); font-weight: 900; font-size: 16px; transition: background-color 300ms; }
.footer-cta:hover { background: var(--orange); }
.book-copy h2 { text-wrap: balance; }
/* ---------- 第二轮：案例主视觉＋界面图同栏、标题字母下伸不被裁 ---------- */
.hero-tagline .w { padding-bottom: .16em; margin-bottom: -.16em; }
.case-hero { display: flex; flex-direction: column; gap: 12px; }
.hero-shot { display: block; width: 100%; overflow: hidden; background: rgba(0,0,0,.1); }
.hero-shot img { width: 100%; height: 100%; object-fit: contain; transition: transform 700ms var(--ease); }
.hero-shot:hover img { transform: scale(1.02); }
.case-hero .case-thumbs { margin-top: 0; }
.case-thumbs .thumb.frame { aspect-ratio: 16 / 9; }
.case-thumbs button.thumb { display: block; }
.case-thumbs .thumb.frame small { display: none; }/* 界面图一行等高：宽度按原图比例分配，不裁切 */
.case-hero .case-thumbs { display: flex; gap: 12px; }
.case-hero .case-thumbs > * { flex: var(--ar, 1.7778) 1 0; min-width: 0; aspect-ratio: var(--ar, 1.7778); height: auto; }
.case-hero .case-thumbs button.thumb img { width: 100%; height: 100%; object-fit: contain; }
.footer-closing, .leader-big, .cases-title, .teams-title, .caps-title { text-wrap: balance; }
.footer-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.footer-closing { font-size: clamp(32px, 4.4vw, 76px); }

/* ---------- 第三轮：招聘段照 Pepsi careers ---------- */
.leader { background: var(--white); color: var(--black); padding: clamp(96px, 14vh, 180px) 0 0; }
.leader-big { margin-bottom: clamp(40px, 6vh, 72px); }
.leader-band { background: var(--purple); color: var(--white); padding: clamp(64px, 10vh, 120px) 0; }
.leader-band .leader-quote { color: var(--white); }
.crew { margin: 0; background: var(--black); }
.crew img { width: 100%; height: auto; }

.voices { background: var(--green); color: var(--black); }
.voices-title { font-size: clamp(56px, 9vw, 160px); line-height: .98; margin-bottom: clamp(40px, 6vh, 72px); }
.voice { margin: 0; }
.voice-media { position: relative; display: block; aspect-ratio: 4 / 5; background: rgba(0, 0, 0, .08); }
.voice-media img { width: 100%; height: 100%; object-fit: contain; }
.voice-media .frame { height: 100%; aspect-ratio: auto; }
.voice-play { position: absolute; left: 50%; bottom: 18%; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; background: var(--red); display: grid; place-items: center; }
.voice-play::before { content: ''; border-left: 16px solid var(--white); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 5px; }
.voice figcaption { margin-top: 18px; display: flex; flex-direction: column; gap: 4px; }
.voice figcaption b { font-weight: 900; font-size: clamp(20px, 1.7vw, 28px); letter-spacing: .02em; }
.voice figcaption span { font-size: 15px; font-weight: 500; }

.teams { padding: clamp(96px, 14vh, 180px) 0; }
.teams-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
.teams-copy .teams-title { margin-bottom: 24px; }
.teams-copy .teams-intro { margin: 0; max-width: 30em; }
.teams-photo { margin: 0; }
.teams-photo img { width: 100%; height: auto; }
.teams-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: auto; margin-top: clamp(32px, 5vh, 56px); }
.team { flex: none; transform: none !important; min-height: clamp(160px, 22vh, 220px); transition: transform 400ms var(--ease); }
.team:hover { transform: translateY(-6px) !important; }
.team p { font-size: 15px; font-weight: 700; }

.scale { background: var(--blue); color: var(--black); }
.scale-item b.slot { color: rgba(0, 0, 0, .25); }
.scale-note { border-left-color: var(--black); }

@media (max-width: 900px) {
  .teams-grid { grid-template-columns: minmax(0, 1fr); }
  .teams-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- 第四轮 ---------- */
/* 职能名单：颜色在品牌五色间流动，悬停变英文＋emoji（不可点击） */
@keyframes role-hue { 0% { color: var(--red); } 20% { color: var(--purple); } 40% { color: var(--blue); } 60% { color: var(--orange); } 80% { color: var(--green); } 100% { color: var(--red); } }

.roles-list li > span { cursor: default; }
.roles-list .rl-en { display: none; font-family: 'Montserrat', 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; letter-spacing: -.02em; }
.roles-list li:hover .rl-zh { display: none; }
.roles-list li:hover .rl-en { display: inline; }

/* 专业领域：长单词缩小，不压到右栏 */
.cap-word.is-long { font-size: clamp(36px, 5.2vw, 92px); }
.cap { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.cap-word { overflow-wrap: anywhere; }

/* 案例封面：悬停播放界面动效 */
.hero-shot { position: relative; display: block; }
.hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; opacity: 0; transition: opacity 400ms var(--ease); }
.hero-shot.is-playing .hero-vid { opacity: 1; }
.hero-vx { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; background: rgba(0,0,0,.72); color: #fff; font-size: 12px; font-weight: 700; transition: opacity 300ms; }
.hero-shot.is-playing .hero-vx { opacity: 0; }
.hero-empty { aspect-ratio: 1905 / 969; color: inherit; }
.hero-empty .frame { height: 100%; }
.case-go { align-self: flex-start; font-weight: 900; font-size: 16px; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.case-go:hover { opacity: .7; }

/* 多元团队：照片与文案放大，色块满版整页 */
.teams { padding: clamp(96px, 14vh, 180px) 0 0; }
.teams-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: center; padding-left: var(--gutter); }
.teams-copy .teams-title { font-size: clamp(44px, 6vw, 108px); }
.teams-copy .teams-intro { font-size: clamp(17px, 1.4vw, 22px); }
.teams-photo img { width: 100%; height: auto; }
.teams-bar { display: flex; grid-template-columns: none; height: clamp(320px, 56vh, 560px); margin-top: clamp(48px, 8vh, 96px); }
.teams-bar .team { flex: 1 1 0; min-height: 0; transform: scaleY(0) !important; transform-origin: bottom; transition: transform 1000ms var(--ease); padding: clamp(20px, 2.4vw, 40px); }
.teams.is-in .teams-bar .team { transform: none !important; }
.teams.is-in .teams-bar .team:nth-child(2) { transition-delay: 90ms; }
.teams.is-in .teams-bar .team:nth-child(3) { transition-delay: 180ms; }
.teams.is-in .teams-bar .team:nth-child(4) { transition-delay: 270ms; }
.teams-bar .team h3 { font-size: clamp(32px, 4vw, 72px); overflow-wrap: anywhere; }
.teams-bar .team:hover { filter: brightness(1.06); }

@media (max-width: 900px) {
  .teams-grid { grid-template-columns: minmax(0, 1fr); padding: 0 var(--gutter); }
  .teams-bar { flex-direction: column; height: auto; }
  .teams-bar .team { min-height: 160px; }
}
/* ---------- Loader：COLOUR 拼块一块块转进来，拼好后放大冲出画面 ---------- */
.loader-tiles { display: grid; grid-template-columns: repeat(2, var(--t)); grid-template-rows: repeat(3, var(--t)); --t: clamp(44px, 6vw, 84px); transition: transform 900ms cubic-bezier(.7, 0, .2, 1), opacity 500ms 400ms; }
.lt { display: block; width: var(--t); height: var(--t); transform: scale(0) rotate(-180deg); transition: transform 700ms cubic-bezier(.34, 1.56, .64, 1); }
.loader.is-build .lt { transform: none; }
.loader.is-build .lt2 { transition-delay: 120ms; } .loader.is-build .lt3 { transition-delay: 240ms; }
.loader.is-build .lt4 { transition-delay: 360ms; } .loader.is-build .lt5 { transition-delay: 480ms; } .loader.is-build .lt6 { transition-delay: 600ms; }
.lt1 { background: var(--purple); border-radius: 50%; }
.lt2 { background: var(--red); border-radius: 0 0 0 100%; }
.lt3 { background: var(--red); border-radius: 100% 0 0 0; }
.lt4 { background: radial-gradient(circle at 0 100%, var(--green) 0 70%, var(--orange) 71%); }
.lt5 { background: var(--red); }
.lt6 { background: radial-gradient(circle, var(--blue) 0 49%, var(--purple) 50%); }
.loader.is-wiggle .lt { animation: lt-wiggle 520ms cubic-bezier(.34, 1.56, .64, 1); }
.loader.is-wiggle .lt:nth-child(even) { animation-delay: 80ms; }
@keyframes lt-wiggle { 50% { transform: rotate(90deg) scale(.86); } }
.loader.is-burst .loader-tiles { transform: scale(26) rotate(45deg); opacity: 0; }
.loader-status { transition: opacity 150ms; }
.case-hero .case-thumbs { align-items: flex-start; }
.case-hero .case-thumbs > * { overflow: hidden; min-height: 0; }
.case-hero .case-thumbs > .frame { padding: 0; gap: 0; border: 0; outline: 1.5px dashed currentColor; outline-offset: -1.5px; }

.teams { padding-bottom: 0; }
.offices { padding-top: clamp(96px, 14vh, 180px); }
.voice-media { aspect-ratio: 3 / 2; overflow: hidden; }
.voice-media img { object-fit: contain; }
.voice-play { bottom: auto; top: 50%; margin-top: -32px; background: var(--red); transition: transform 300ms var(--ease); }

.voice figcaption b { text-transform: uppercase; font-size: clamp(22px, 2vw, 32px); letter-spacing: .04em; }
.voice-sample { position: absolute; left: 10px; top: 10px; padding: 3px 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; font-weight: 700; }
.voice-fallback { display: grid; place-items: center; height: 100%; font-size: 13px; font-weight: 700; }/* 第二屏：上一版米色底黑字；悬停那一行才变色＋英文＋emoji */
.roles-list li:nth-child(5n+1) { --hc: var(--red); }
.roles-list li:nth-child(5n+2) { --hc: var(--purple); }
.roles-list li:nth-child(5n+3) { --hc: var(--blue); }
.roles-list li:nth-child(5n+4) { --hc: var(--orange); }
.roles-list li:nth-child(5n+5) { --hc: var(--green); }
.roles-list li:hover > span { color: var(--hc); }
/* ---------- 听听团队怎么说：Pepsi 交互 ---------- */
.voice-media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: rgba(0, 0, 0, .08); cursor: none; }
.voice-hole { position: absolute; inset: 0; }
.voice-hole .frame { height: 100%; }
.voice-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.voice:hover .voice-photo { transform: scale(1.04); }
.voice-play { position: absolute; left: var(--mx, 50%); top: var(--my, 50%); bottom: auto; margin: 0; width: 72px; height: 72px; border-radius: 50%; background: var(--red); display: grid; place-items: center; z-index: 3; pointer-events: none; transform: translate(-50%, -50%); transition: left 120ms linear, top 120ms linear; }
.voice-play::before { content: ''; border-left: 18px solid var(--white); border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 6px; }
.voice-pop { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; background: var(--white); color: var(--black); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; transform: translateY(calc(100% + 20px)); transition: transform 500ms var(--ease); }
.voice:hover .voice-pop, .voice:focus-within .voice-pop { transform: none; }
.voice-pop b { font-weight: 900; font-size: 20px; text-transform: uppercase; letter-spacing: .03em; }
.voice-pop em { font-style: normal; font-size: 13px; font-weight: 700; color: #555; }
.voice-pop q { quotes: '“' '”'; font-size: 15px; font-weight: 700; line-height: 1.5; margin-top: 6px; }
.voice-sample { display: none; }
/* ---------- 开场动画（makemake 式）：彩线画出 → 小字沿弧滑动 → 原版 LOGO 刷出 ---------- */
.loader { background: #fff; }
.intro-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-arcs use { stroke-dasharray: 1; stroke-dashoffset: 1; }
.loader.is-build .intro-arcs use { animation: arc-draw 1100ms cubic-bezier(.6, 0, .2, 1) forwards; }
.loader.is-build .intro-arcs use:nth-child(2) { animation-delay: 140ms; }
.loader.is-build .intro-arcs use:nth-child(3) { animation-delay: 280ms; }
.loader.is-build .intro-arcs use:nth-child(4) { animation-delay: 420ms; }
.loader.is-build .intro-arcs use:nth-child(5) { animation-delay: 560ms; }
@keyframes arc-draw { to { stroke-dashoffset: 0; } }
.intro-words text { opacity: 0; transition: opacity 400ms 700ms; }
.loader.is-build .intro-words text { opacity: 1; }
.loader.is-gather .intro-svg { opacity: 0; transform: scale(.92); transition: opacity 500ms, transform 700ms cubic-bezier(.6, 0, .2, 1); }
.intro-logo { position: relative; width: min(46vw, 520px); clip-path: inset(0 100% 0 0); transition: clip-path 900ms cubic-bezier(.7, 0, .2, 1); }
.intro-logo img { width: 100%; height: auto; display: block; }
.loader.is-logo .intro-logo { clip-path: inset(0 0 0 0); }
.intro-skip { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--grey); letter-spacing: .1em; }
.loader-tiles, .loader-status, .loader-count { display: none; }
/* ---------- 第二屏底部：makemake 式标语＋LOGO＋邀请 ---------- */
.roles-lead { font-style: italic; }
.roles-outro { margin-top: clamp(40px, 6vh, 64px); display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vh, 32px); }
.ro-tag { font-style: italic; font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; line-height: 1.45; }
.ro-logo { width: clamp(200px, 20vw, 300px); height: auto; }
.ro-cta { font-style: italic; font-size: clamp(16px, 1.4vw, 21px); font-weight: 500; line-height: 1.45; border-bottom: 1.5px solid transparent; transition: border-color 300ms, color 300ms; }
.ro-cta:hover { color: var(--red); border-bottom-color: currentColor; }
/* ---------- 听听团队怎么说 B 版：品牌色卡＋160px 圆形头像（小图不放大） ---------- */
.voice-media { background: var(--tint); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.voice-avatar { position: relative; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.35); flex: none; box-shadow: 0 0 0 6px rgba(255,255,255,.9); }
.voice-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voice-avatar-hole { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 13px; font-weight: 900; line-height: 1.3; color: #111; border: 1.5px dashed #111; border-radius: 50%; }
.voice-name { font-weight: 900; font-size: clamp(28px, 2.8vw, 44px); letter-spacing: .02em; text-transform: uppercase; color: #111; }
.voice-photo, .voice-hole { display: none; }.voice-name { display: none; }
.voice-play { left: var(--mx, 84%); top: var(--my, 84%); }/* 满版人像（Pepsi 方卡） */
.voice-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.voice:hover .voice-full { transform: scale(1.04); }
.voice-media > .voice-avatar-hole { inset: 24px; border-radius: 0; color: #111; display: grid; }
.voice-media > .voice-avatar-hole small { font-size: 11px; font-weight: 700; }
/* ---------- COLOUR 的一天（替代规模数字） ---------- */
.scale { background: var(--white); color: var(--black); padding: clamp(96px, 14vh, 180px) 0; }
.day-title { font-weight: 900; font-size: clamp(40px, 5.6vw, 96px); line-height: 1; letter-spacing: -.02em; margin-bottom: clamp(32px, 5vh, 56px); }
.day-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.day-item { position: relative; background: var(--c); color: #111; aspect-ratio: 3 / 4; padding: clamp(16px, 1.6vw, 28px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; cursor: default; }
.day-time { font-weight: 900; font-size: clamp(32px, 3.4vw, 60px); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.day-text { font-weight: 700; font-size: clamp(15px, 1.25vw, 20px); line-height: 1.4; transition: opacity 300ms, transform 400ms var(--ease); }
.day-emo { position: absolute; left: 50%; top: 55%; font-size: clamp(56px, 6vw, 96px); transform: translate(-50%, -50%) scale(.4) rotate(-20deg); opacity: 0; transition: transform 500ms cubic-bezier(.34, 1.56, .64, 1), opacity 250ms; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; }
.day-item:hover .day-emo { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
.day-item:hover .day-text { opacity: 0; transform: translateY(10px); }
@media (max-width: 900px) { .day-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .day-item { aspect-ratio: 1 / 1; } }
/* ---------- 我们是谁（Pepsi About 首屏式） ---------- */
.scale { background: var(--paper); color: var(--black); padding: clamp(96px, 16vh, 200px) 0; }
.ab { position: relative; }
.ab-eyebrow { font-size: 15px; font-weight: 900; letter-spacing: .08em; margin-bottom: clamp(20px, 3vh, 32px); }
.ab-title { font-weight: 900; font-size: clamp(64px, 10vw, 180px); line-height: 1.02; letter-spacing: -.03em; }
.ab-title em { font-style: normal; color: var(--red); }
.ab-slot { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: bottom; }
.ab-track { display: flex; flex-direction: column; animation: ab-roll calc(var(--n) * 2.4s) cubic-bezier(.7, 0, .2, 1) infinite; }
.ab-track > span { height: 1.1em; line-height: 1.1em; }
.ab-title .ab-slot:last-of-type .ab-track { animation-delay: .25s; }
@keyframes ab-roll {
  0%, 20% { transform: translateY(0); }
  25%, 45% { transform: translateY(-1.1em); }
  50%, 70% { transform: translateY(-2.2em); }
  75%, 95% { transform: translateY(-3.3em); }
  100% { transform: translateY(-4.4em); }
}
.ab-body { margin-top: clamp(28px, 4vh, 48px); max-width: 30em; font-size: clamp(18px, 1.5vw, 24px); font-weight: 700; line-height: 1.55; }
.ab-glance { position: absolute; right: var(--gutter); bottom: 0; outline: none; }
.ab-ring { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: var(--black); color: var(--white); font-size: 14px; font-weight: 900; text-align: center; animation: ab-spin 12s linear infinite; cursor: default; }
@keyframes ab-spin { to { transform: rotate(360deg); } }
.ab-glance:hover .ab-ring, .ab-glance:focus .ab-ring { animation-play-state: paused; background: var(--red); }
.ab-pop { position: absolute; right: 0; bottom: calc(100% + 16px); width: 260px; background: var(--white); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.12); opacity: 0; transform: translateY(12px); transition: opacity 300ms, transform 400ms var(--ease); pointer-events: none; }
.ab-pop b { font-size: 18px; font-weight: 900; }
.ab-glance:hover .ab-pop, .ab-glance:focus .ab-pop { opacity: 1; transform: none; }
@media (max-width: 900px) { .ab-glance { position: static; margin-top: 32px; } .ab-pop { left: 0; right: auto; } }
@media (prefers-reduced-motion: reduce) { .ab-track, .ab-ring { animation: none; } }/* 开场视频：media/intro.mp4 存在时播放，否则用 SVG 动画 */
.intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; opacity: 0; transition: opacity 300ms; z-index: 2; }
.loader.has-video .intro-video { opacity: 1; }
.loader.has-video .intro-svg, .loader.has-video .intro-logo { display: none; }.loader.has-video.video-done .intro-logo { display: block; z-index: 3; }
.loader.has-video.video-done .intro-video { opacity: 0; }

@media (max-width: 900px) { .cap { grid-template-columns: minmax(0, 1fr); gap: 12px; } .cap-word.is-long { font-size: clamp(36px, 11vw, 64px); } }
/* 负责人引言（Pepsi「The Strategy of Design」式） */
.leader { padding-top: 0; }
.leader-qt { font-weight: 900; font-size: clamp(40px, 5.6vw, 96px); line-height: 1; letter-spacing: -.02em; color: var(--white); margin-bottom: clamp(28px, 4vh, 48px); }
.leader-band .leader-quote { max-width: 30em; font-size: clamp(22px, 2.2vw, 36px); line-height: 1.45; }
.leader-band .leader-who { font-size: 16px; font-weight: 900; color: var(--white); margin-top: 28px; }
/* ---------- 团队区：我们是谁（左）＋合照（右）＋四色小组 ---------- */
.teams-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
.teams-copy .ab-title { font-size: clamp(56px, 7vw, 128px); }
.teams-copy .ab-body { font-size: clamp(16px, 1.25vw, 20px); font-weight: 500; color: #333; max-width: 28em; }
.teams-photo { position: relative; }
.teams-photo .ab-glance { position: absolute; right: auto; left: -66px; bottom: -66px; z-index: 2; }
/* Pepsi 式圆章：慢慢左右摆动，字始终正向 */
.ab-ring { animation: ab-sway 7s ease-in-out infinite alternate; width: 140px; height: 140px; padding: 18px; line-height: 1.25; }
.ab-ring > span { display: block; }
@keyframes ab-sway { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.ab-pop { left: 0; right: auto; }
/* 导航不再随滚动收起，任何位置都能回首页 */
.nav.is-hidden { transform: none; }
/* 作品区的「跳过作品」 */
.skip-work { position: fixed; right: var(--gutter); bottom: 72px; z-index: 45; padding: 10px 16px; background: var(--black); color: var(--white); font-size: 14px; font-weight: 900; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 300ms, transform 300ms, background-color 300ms; }
.skip-work.is-on { opacity: 1; transform: none; pointer-events: auto; }
.skip-work:hover { background: var(--red); }
@media (max-width: 900px) { .teams-photo .ab-glance { position: static; margin-top: 24px; } }
@media (prefers-reduced-motion: reduce) { .ab-ring { animation: none; } }
/* ---------- 第五轮 ---------- */
/* 精选作品：接在黑底宣言后面，同为黑底，标题加大并带项目色点，衔接下面的彩色叠卡 */
#work { background: var(--black); }
.cases-head { background: var(--black); color: var(--white); padding: clamp(96px, 16vh, 200px) 0 clamp(64px, 10vh, 120px); }
.ch-count { font-size: 14px; font-weight: 900; letter-spacing: .14em; color: var(--grey); margin-bottom: 18px; }
.cases-title.ch-big { font-size: clamp(80px, 15vw, 260px); line-height: .9; letter-spacing: -.04em; color: var(--white); }
.ch-sub { margin-top: 28px; font-size: clamp(18px, 1.6vw, 26px); font-weight: 700; color: rgba(255,255,255,.75); }
.ch-dots { display: flex; gap: 12px; margin-top: 36px; }
.ch-dots i { width: 22px; height: 22px; border-radius: 50%; }
.cases-all { background: var(--black); color: var(--white); padding-top: clamp(48px, 8vh, 80px); padding-bottom: clamp(48px, 8vh, 80px); max-width: none; padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
/* 叠卡缩小时露出的底色改为黑，不再看到白边 */
.case { box-shadow: 0 -1px 0 var(--black); }
/* 听听团队怎么说：标题回到与其他区块一致的大小 */
.voices-title { font-size: clamp(40px, 5.6vw, 96px); line-height: 1; margin-bottom: clamp(32px, 5vh, 56px); }
/* 引言：避免最后一行只剩一个字 */
.leader-quote, .ab-body, .teams-intro, .jk-line, .case-line { text-wrap: pretty; }
.leader-band .leader-quote { max-width: 28em; text-wrap: balance; }
/* 页尾：去掉右侧图形后，文字占满 */
.footer-grid { grid-template-columns: minmax(0, 1fr); }
.ch-dots i { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }

[hidden] { display: none !important; }

/* 团队区：「我们是谁」移到关于页后，只留标题＋链接 */
.teams-more { display: inline-block; margin-top: 32px; padding: 18px 32px; border-radius: 0; background: var(--black); color: #fff; font-weight: 900; font-size: 17px; transition: background-color 300ms; }
.teams-more:hover { background: var(--red); }

/* ---------- 精选作品头部：三种分层（data.js site.workHead） ---------- */
.cases-head { position: relative; }
.ch-copy { position: relative; z-index: 2; }
/* ① 封面叠层：越后面越小越暗，捲动时移动越慢（motion.js 依 data-depth 位移） */
.ch-covers .ch-cv { position: absolute; display: block; object-fit: cover; box-shadow: 0 30px 60px rgba(0,0,0,.4); will-change: transform; }
.ch-cv0 { right: 7vw; bottom: -6vw; width: 50vw; aspect-ratio: 1905 / 969; z-index: 1; }
.ch-cv1 { right: 8.5vw; bottom: 15vw; width: 36.5vw; aspect-ratio: 1905 / 969; filter: brightness(.72); }
.ch-cv2 { right: 6.3vw; bottom: 25vw; width: 29vw; aspect-ratio: 1905 / 969; filter: brightness(.5); }
.ch-covers .ch-cv0 { z-index: 1; }
.ch-covers ~ .ch-copy, .ch-covers { pointer-events: none; }
.wh-covers .cases-head { min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.wh-covers .ch-copy { width: 100%; }
/* ② 标题跨进第一张卡：头部里是白字上 65%，第一张卡顶部留白里是同位置的黑字下 35%。
   第一张卡不另加高度，内容起点与其他卡一致；卡片钉住后下半截淡出（motion.js） */
.wh-split .cases-head { overflow: hidden; padding-bottom: 0; }
.wh-split .cases-head .ch-big { transform: translateY(35%); }
.wh-split .ch-copy { display: flex; flex-direction: column; }
.wh-split .ch-sub { order: -1; margin: 0 0 20px; transform: translateY(calc(clamp(80px, 15vw, 260px) * .315)); }
.ch-split-under { position: absolute; top: 0; left: 0; right: 0; height: 0; overflow: visible; pointer-events: none; }
.ch-split-under .ch-big { display: block; color: var(--ink); transform: translateY(-65%); }
.wh-split .case:first-of-type { overflow: hidden; }
/* ③ 色卡叠层：后面几张作品卡往上露出边缘，越后面越窄 */
.wh-stack .cases-head { padding-bottom: calc(6 * 34px + 48px); }
.ch-stack i { position: absolute; left: calc(var(--k) * 28px); right: calc(var(--k) * 28px); bottom: 0; height: calc(var(--k) * 34px); background: var(--c); z-index: calc(10 - var(--k)); box-shadow: 0 -8px 24px rgba(0,0,0,.25); }
@media (max-width: 900px) {
  .ch-cv0 { right: 16px; width: 86vw; bottom: 14vh; }
  .ch-cv1 { right: 10px; width: 66vw; bottom: calc(14vh + 34vw); }
  .ch-cv2 { right: 4px; width: 52vw; bottom: calc(14vh + 56vw); }
  .wh-covers .cases-head { align-items: flex-start; }
  .wh-stack .cases-head { padding-bottom: calc(6 * 18px + 32px); }
  .ch-stack i { left: calc(var(--k) * 10px); right: calc(var(--k) * 10px); height: calc(var(--k) * 18px); }
}
/* 人物与合照统一暖调胶片，与关于页一致 */
.teams-photo img { filter: contrast(1.08) saturate(.88) sepia(.14) brightness(1.04); }

/* 团队区四色块（品类）：高度缩小，品类名上方放代表该类型的 emoji */
.teams-bar { height: clamp(220px, 32vh, 320px); }
.team-top { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 18px); }
.team-emoji { display: block; width: clamp(48px, 4vw, 72px); aspect-ratio: 1; }
.team-emoji canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) { .teams-bar { height: auto; } .teams-bar .team { min-height: 150px; } }

/* 左上角 LOGO＝回首页（10/19）：首页随导航明暗切换黑白版；作品／项目页为深底用白版 */
.nav { justify-content: space-between; }
.nav-logo { display: block; flex: none; line-height: 0; }
.jk-logo { position: fixed; top: 0; left: var(--gutter); z-index: 21; height: var(--nav-h); display: flex; align-items: center; }
.jk-logo .lk-black { display: none; }

/* 收尾大字：COLOUR 逐字母品牌色；「浩瀚无垠」后面一个手绘无限符号，进入画面时一笔画出（js/text-fx.js） */
.fx-inf { display: inline-block; width: 1.4em; height: .7em; margin-left: .14em; vertical-align: .08em; }
.fx-inf svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx-inf path { fill: none; stroke: var(--orange); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms cubic-bezier(.6, .1, .3, 1) 250ms; }
.fx-inf.is-drawn path { stroke-dashoffset: 0; }

/* 作品卡界面图：固定 4 格等宽 16:9，各卡行高一致；截图等比放进格子、不裁切 */
.case-hero .case-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.case-hero .case-thumbs > * { flex: none; aspect-ratio: 16 / 9; width: 100%; height: auto; }
.case-hero .case-thumbs button.thumb { background: transparent; } /* 10/26：比例不是 16:9 的截图不再露出灰色底边 */
.case-hero .case-thumbs button.thumb img { width: 100%; height: 100%; object-fit: contain; }

/* 「缤纷」：每个字一个品牌色，五色间轮流跳色（直接换色、不渐变），两个字错开、永远不同色 */
.fx-bf > span { color: var(--red); animation: fx-bf 7.5s steps(1, end) infinite; animation-delay: calc(var(--o) * -3s); }
@keyframes fx-bf { 0% { color: var(--red); } 20% { color: var(--blue); } 40% { color: var(--orange); } 60% { color: var(--green); } 80% { color: var(--purple); } }
@media (prefers-reduced-motion: reduce) { .fx-bf > span { animation: none; } .fx-bf > span + span { color: var(--blue); } }

/* 作品卡主画面自动播放的影片：铺满画框 */
.hero-vid--auto { object-fit: cover; }

/* 品类色块小字里的项目连结：不加底线，滑过变淡 */
.team-link { color: inherit; text-decoration: none; transition: opacity 200ms; }
.team-link:hover { opacity: .6; }

/* 研发期：大字后面三个点依序跳动，像载入中 */
.team-dots { display: inline-flex; gap: .12em; margin-left: .14em; vertical-align: baseline; }
.team-dots i { display: block; width: .16em; height: .16em; border-radius: 50%; background: currentColor; animation: team-dot 1.2s ease-in-out infinite; }
.team-dots i:nth-child(2) { animation-delay: .15s; }
.team-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes team-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-.22em); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .team-dots i { animation: none; opacity: 1; } }

/* 作品卡一句话介绍：多行时平均断行，避免最后一行只剩两个字 */
.case-line { text-wrap: balance; }

/* 作品卡一句话介绍：桌面版一行放完，太长就按栏宽缩字；手机版照常断行 */
@media (min-width: 721px) {
  .case-info { container-type: inline-size; }
  .case-line { white-space: nowrap; font-size: min(clamp(22px, 2.1vw, 34px), calc(100cqi / var(--n, 12) * .97)); }
}

/* 首页作品卡项目名不断行：名字长时按卡片宽度缩字（如「暗黑破坏神：不朽」在手机上） */
.case-grid { container-type: inline-size; }
.case-name h3 { white-space: nowrap; font-size: min(clamp(48px, 7vw, 120px), calc(100cqi / var(--n, 4) * .97)); }

/* 品牌拼块画面（js/tile-art.js）：取代员工照片，参照团队介绍简报封面。整组是一张 SVG，宽度填满、高度按格数比例 */
.tile-art { display: block; width: 100%; height: auto; }
.tile-art .ta-q { transform: rotate(var(--rot, 0deg)); transform-box: view-box; transform-origin: 50px 50px; transition: transform 700ms cubic-bezier(.7, 0, .2, 1); }
.tile-art rect, .tile-art path { transition: fill 500ms ease; }
@media (prefers-reduced-motion: reduce) { .tile-art .ta-q, .tile-art rect, .tile-art path { transition: none; } }

/* ---------- 手机版选单（js/mobile-nav.js）：≤900px 时隐藏横排导航，右上角换成方块选单键 ---------- */
.mnav-btn, .mnav { display: none; }
@media (max-width: 900px) {
  /* 打开选单会锁滚动（html.mnav-open 溢出隐藏），先预留滚动条位置，页面和按钮才不会左右跳 */
  html { scrollbar-gutter: stable; }
  .nav .nav-links { display: none !important; }
  nav.cp-nav-jk { min-height: 68px; height: 68px; padding: 0; }
  .nav { min-height: 68px; }
  .jk-logo { height: 68px; }
  nav.cp-nav-jk a { display: none !important; }
  body.jk nav.cp-nav-jk { background: #111; mix-blend-mode: normal; }
  body.jk { padding-top: 68px; } /* 作品页、项目页：内容从横条下方开始，头图不被盖住 */
  .mnav-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; position: fixed; top: 12px; right: 16px; z-index: 90; width: 44px; height: 44px; padding: 0; border: 0; background: var(--black); cursor: pointer; }
  .mnav-btn i { display: block; width: 20px; height: 2px; background: #fff; transition: transform 300ms var(--ease), opacity 200ms; }
  .mnav-btn[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
  .mnav-btn[aria-expanded="true"] i:nth-of-type(2) { opacity: 0; }
  .mnav-btn[aria-expanded="true"] i:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); }
  .mnav { display: block; position: fixed; inset: 0; z-index: 85; background: var(--black); color: #fff; padding: 96px 24px 40px; opacity: 0; transition: opacity 300ms var(--ease); overflow-y: auto; }
  .mnav.is-open { opacity: 1; }
  .mnav[hidden] { display: none; }
  .mnav-list { display: flex; flex-direction: column; }
  .mnav-list a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-weight: 900; font-size: clamp(34px, 10vw, 52px); line-height: 1.1; color: #fff; transform: translateY(16px); opacity: 0; transition: transform 500ms var(--ease), opacity 400ms, color 200ms; }
  .mnav.is-open .mnav-list a { transform: none; opacity: 1; }
  .mnav.is-open .mnav-list a:nth-child(2) { transition-delay: 40ms; }
  .mnav.is-open .mnav-list a:nth-child(3) { transition-delay: 80ms; }
  .mnav.is-open .mnav-list a:nth-child(4) { transition-delay: 120ms; }
  .mnav.is-open .mnav-list a:nth-child(5) { transition-delay: 160ms; }
  .mnav-list a:active, .mnav-list a[aria-current="page"] { color: var(--c); }
  html.mnav-open, html.mnav-open body { overflow: hidden; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .mnav, .mnav-list a, .mnav-btn i { transition: none; } }
/* 10/28：选单里的 LOGO 与页面上那颗位置、大小完全一致，打开选单时不会跳动（同一横条 68px、同一左边距与字高） */
@media (max-width: 900px) {
  .mnav-logo { position: absolute; top: 0; left: var(--gutter); height: 68px; display: flex; align-items: center; line-height: 0; }
  .mnav-logo img { height: clamp(26px, 2.4vw, 36px); width: auto; display: block !important; }
}

/* 选单键三种样式（js/mobile-nav.js） */
@media (max-width: 900px) {
  /* 1 四色方块：2×2 品牌色小方块，像 logo 的拼色；打开时四块转 45° 收成 ✕ 的四只脚 */
  .mnav-btn--1 { display: grid; grid-template-columns: repeat(2, 14px); grid-template-rows: repeat(2, 14px); gap: 4px; place-content: center; background: transparent; }
  .mnav-btn--1 b { display: block; width: 14px; height: 14px; transition: transform 400ms var(--ease), border-radius 400ms var(--ease); }
  .mnav-btn--1 b:nth-child(1) { background: #FF4366; } .mnav-btn--1 b:nth-child(2) { background: #3EBFFF; }
  .mnav-btn--1 b:nth-child(3) { background: #F7931E; } .mnav-btn--1 b:nth-child(4) { background: #00DD9E; }
  .mnav-btn--1:active b { transform: scale(.85); }
  .mnav-btn--1[aria-expanded="true"] b:nth-child(1) { transform: translate(4px, 4px) rotate(45deg) scaleX(.35); }
  .mnav-btn--1[aria-expanded="true"] b:nth-child(2) { transform: translate(-4px, 4px) rotate(-45deg) scaleX(.35); }
  .mnav-btn--1[aria-expanded="true"] b:nth-child(3) { transform: translate(4px, -4px) rotate(-45deg) scaleX(.35); }
  .mnav-btn--1[aria-expanded="true"] b:nth-child(4) { transform: translate(-4px, -4px) rotate(45deg) scaleX(.35); }
  /* 2 彩色三线（10/27 定案）：黑方块里三条等长的品牌色线（红、蓝、绿），打开变白色 ✕ */
  .mnav-btn--2 { align-items: center; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
  .mnav-btn--2 i { width: 20px; } .mnav-btn--2 i:nth-child(1) { background: #FF4366; } .mnav-btn--2 i:nth-child(2) { background: #3EBFFF; } .mnav-btn--2 i:nth-child(3) { background: #00DD9E; }
    .mnav-btn--2[aria-expanded="true"] i { width: 20px; background: #fff; }
  /* 3 拼块底：一格简报封面式拼块当底（橘底紫色四分之一圆），上面压三条黑线；打开时拼块转 90° */
  .mnav-btn--3 { position: fixed; background: transparent; overflow: hidden; }
  .mnav-btn--3 svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 500ms var(--ease); }
  .mnav-btn--3 i { position: relative; background: #111; }
  .mnav-btn--3[aria-expanded="true"] svg { transform: rotate(90deg); }
}

/* 作品区三种排法＋项目详情页。图片一律按原图比例显示，不裁切。 */

.cv { display: block; width: 100%; background: rgba(0, 0, 0, .06); }
.cv img { width: 100%; height: 100%; object-fit: contain; }
.cv-empty { aspect-ratio: 16 / 9; }
.cv-empty .frame { height: 100%; }
.case-note { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; border-left: 3px solid currentColor; padding-left: 10px; opacity: .85; }

/* ---------- A｜Koto 清单式 ---------- */
.wlist { border-top: 1px solid var(--line); }
.wl-row {
  position: relative; display: grid; align-items: baseline; gap: 8px 40px;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) minmax(0, 2fr);
  padding: clamp(20px, 3vh, 34px) var(--gutter); margin: 0 calc(var(--gutter) * -1);
  border-bottom: 1px solid var(--line);
  transition: background-color 400ms var(--ease), color 400ms var(--ease);
}
.wl-name { font-weight: 900; font-size: clamp(36px, 5.6vw, 96px); line-height: 1; letter-spacing: -.02em; }
.wl-line { font-size: clamp(16px, 1.3vw, 20px); font-weight: 700; }
.wl-meta { justify-self: end; font-size: 14px; font-weight: 700; color: var(--grey); transition: color 400ms; }
.wl-cover { display: none; }
.wl-row:hover { background: var(--c); color: var(--ink); }
.wl-row:hover .wl-meta { color: inherit; }
.wl-preview {
  position: fixed; left: 0; top: 0; z-index: 40; width: min(34vw, 520px); pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.9); transition: opacity 300ms var(--ease), transform 400ms var(--ease);
}
.wl-preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.wl-preview img { width: 100%; height: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.wl-preview-empty { display: none; aspect-ratio: 16 / 9; place-items: center; background: var(--black); color: var(--white); font-weight: 900; border: 1.5px dashed rgba(255,255,255,.5); }
.wl-preview.is-empty img { display: none; }
.wl-preview.is-empty .wl-preview-empty { display: grid; }

/* ---------- B｜JKR 大图网格 ---------- */
.wgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px) clamp(16px, 2vw, 32px); }
.wg-item { display: block; }
.wg-media { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c); }
.wg-media .cv { background: transparent; max-height: 100%; transition: transform 800ms var(--ease); }
.wg-media .cv-empty { width: 100%; height: 100%; color: var(--ink); }
.wg-item:hover .wg-media .cv { transform: scale(1.035); }
.wg-cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; margin-top: 18px; align-items: baseline; }
.wg-cap b { font-weight: 900; font-size: clamp(24px, 2.4vw, 40px); line-height: 1.1; }
.wg-cap i { font-style: normal; font-size: 14px; font-weight: 700; color: var(--grey); justify-self: end; grid-row: 1; grid-column: 2; }
.wg-cap > span { grid-column: 1 / -1; font-size: clamp(15px, 1.15vw, 18px); color: #444; }
.wg-item:hover .wg-cap b { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--c); }

/* ---------- C｜Pepsi 全幅式 ---------- */
.wf-item { display: block; background: var(--c); color: var(--ink); padding: clamp(48px, 8vh, 96px) 0; }
.wf-inner { display: block; }
.wf-media { display: block; }
.wf-media .cv { background: rgba(0, 0, 0, .12); transition: transform 900ms var(--ease); }
.wf-item:hover .wf-media .cv { transform: scale(.985); }
.wf-cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 40px; align-items: end; margin-top: clamp(20px, 3vh, 36px); }
.wf-cap b { font-weight: 900; font-size: clamp(48px, 8vw, 140px); line-height: .95; letter-spacing: -.03em; }
.wf-line { font-size: clamp(16px, 1.3vw, 22px); font-weight: 700; max-width: 22em; justify-self: end; text-align: right; }
.wf-line i { display: block; font-style: normal; font-size: 14px; opacity: .7; margin-top: 6px; }
.wf-go { grid-column: 1 / -1; font-weight: 900; font-size: 16px; }

/* ---------- 项目详情页 ---------- */
.cp-hero { background: var(--c); color: var(--ink); padding: clamp(96px, 14vh, 160px) 0 clamp(40px, 6vh, 72px); }
.cp-back { display: inline-block; font-weight: 700; font-size: 15px; margin-bottom: clamp(24px, 4vh, 48px); border-bottom: 2px solid currentColor; }
.cp-title { font-weight: 900; font-size: clamp(56px, 10vw, 180px); line-height: .92; letter-spacing: -.03em; }
.cp-meta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; margin-top: clamp(24px, 4vh, 48px); align-items: start; }
.cp-line { font-size: clamp(22px, 2.2vw, 36px); font-weight: 700; line-height: 1.3; }
.cp-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 24px; font-size: 15px; }
.cp-facts dt { font-weight: 700; opacity: .7; }
.cp-facts dd { margin: 0; font-weight: 700; }
.cp-cover { background: var(--c); padding-bottom: clamp(48px, 8vh, 96px); }
.cp-gallery { padding-top: clamp(48px, 8vh, 96px); padding-bottom: clamp(48px, 8vh, 96px); display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 40px); }
.cp-fig { margin: 0; }
.cp-fig img { width: 100%; height: auto; }
.cp-fig figcaption { margin-top: 10px; font-size: 14px; font-weight: 700; color: #555; }
.cp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); }
.cp-fig .frame { aspect-ratio: 16 / 9; }
.cp-video video { width: 100%; height: auto; display: block; background: var(--black); }
.cp-next { display: block; background: var(--black); color: var(--white); padding: clamp(72px, 12vh, 140px) 0; }
.cp-next small { display: block; font-size: 15px; font-weight: 700; color: var(--grey); margin-bottom: 12px; }
.cp-next b { font-weight: 900; font-size: clamp(48px, 8vw, 140px); line-height: .95; letter-spacing: -.03em; transition: color 400ms; }
.cp-next:hover b { color: var(--c); }

@media (max-width: 900px) {
  .wl-row { grid-template-columns: minmax(0, 1fr); }
  .wl-meta { justify-self: start; }
  .wl-cover { display: block; margin-top: 12px; }
  .wl-preview { display: none; }
  .wgrid { grid-template-columns: minmax(0, 1fr); }
  .wf-cap { grid-template-columns: minmax(0, 1fr); }
  .wf-line { justify-self: start; text-align: left; }
  .cp-meta { grid-template-columns: minmax(0, 1fr); }
  .cp-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 项目详情页：JKR 式 ---------- */
body.jk { background: #111; color: #F2F2F2; }
.cp-nav-jk { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: flex-end; align-items: center; gap: clamp(16px, 2.4vw, 40px); min-height: var(--nav-h); padding: 0 var(--gutter); font-weight: 700; font-size: 15px; color: #fff; mix-blend-mode: difference; }
.jk-hero { background: var(--c); }
.jk-hero img { width: 100%; height: auto; display: block; }
.jk-hero .frame { aspect-ratio: 1905 / 969; color: #111; }
.jk-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 48px; align-items: end; padding: clamp(72px, 12vh, 140px) clamp(20px, 11vw, 160px) clamp(56px, 9vh, 104px); }
.jk-back { display: inline-block; font-size: 14px; font-weight: 700; color: var(--grey); margin-bottom: 28px; }
.jk-back:hover { color: #fff; }
.jk-title { font-weight: 900; font-size: clamp(48px, 6.4vw, 112px); line-height: 1; letter-spacing: -.02em; }
/* 项目名不断行：名字太长时按栏宽缩小字号 */
.jk-col { container-type: inline-size; }
.jk-title { white-space: nowrap; font-size: min(clamp(48px, 6.4vw, 112px), calc(100cqi / var(--n, 4) * .96)); }
.jk-line { margin-top: 20px; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.5; color: #cfcfcf; max-width: 26em; }
.jk-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 28px; font-size: 15px; margin: 0; }
.jk-facts dt { color: var(--grey); font-weight: 700; }
.jk-facts dd { margin: 0; font-weight: 700; }
.jk-body { display: flex; flex-direction: column; gap: 16px; padding: 0 clamp(20px, 11vw, 160px) clamp(72px, 12vh, 140px); }
.jk-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.jk-fig { margin: 0; position: relative; background: #1F1F1F; }
.jk-fig img, .jk-fig video { display: block; width: 100%; height: 100%; object-fit: contain; }
.jk-fig figcaption { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700; opacity: 0; transition: opacity 300ms; }
.jk-fig:hover figcaption { opacity: 1; }
.jk-video { aspect-ratio: 16 / 9; }
.jk-hole { aspect-ratio: 16 / 9; color: #bbb; }
.jk-hole .frame { height: 100%; }
.jk-next { display: block; padding: clamp(72px, 12vh, 140px) clamp(20px, 11vw, 160px); border-top: 1px solid rgba(255,255,255,.12); }
.jk-next small { display: block; font-size: 14px; font-weight: 700; color: var(--grey); margin-bottom: 12px; }
.jk-next b { font-weight: 900; font-size: clamp(48px, 7vw, 120px); line-height: 1; letter-spacing: -.02em; transition: color 400ms; }
.jk-next:hover b { color: var(--c); }
@media (max-width: 900px) {
  .jk-intro { grid-template-columns: minmax(0, 1fr); padding-left: 20px; padding-right: 20px; }
  .jk-body, .jk-next { padding-left: 20px; padding-right: 20px; }
  .jk-pair { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- 首页作品区：JKR /work 式 ---------- */
.jw-page { background: #111; color: #F2F2F2; padding-bottom: clamp(48px, 8vh, 96px); min-height: 100vh; }
.jw-head { padding: clamp(96px, 14vh, 160px) 48px clamp(32px, 5vh, 56px); }
.jw-list { display: flex; flex-direction: column; gap: 24px; padding: 0 48px; }
.jw-card { position: relative; display: block; aspect-ratio: 1905 / 969; overflow: hidden; background: #1F1F1F; cursor: none; }
.jw-media { position: absolute; inset: 0; display: block; opacity: 0; transform: scale(1.2); transition: opacity 1100ms var(--ease), transform 1400ms var(--ease); }
.jw-card.is-in .jw-media { opacity: 1; transform: scale(1); }
.jw-media img, .jw-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.jw-vid { background: #000; opacity: 0; transition: opacity 400ms; }
.jw-card.is-playing .jw-vid { opacity: 1; }
.jw-card::after { content: ''; position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 400ms; pointer-events: none; }
.jw-card:hover::after { opacity: .35; }
.jw-card.is-playing::after { opacity: 0; }
.jw-view { position: absolute; left: var(--mx, 50%); top: var(--my, 50%); z-index: 2; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; font-size: 13px; font-weight: 700; padding: 0 12px; opacity: 0; transform: scale(.6); transition: opacity 300ms, transform 400ms var(--ease); pointer-events: none; }
.jw-view b { font-size: 15px; font-weight: 900; line-height: 1.2; }
.jw-card:hover .jw-view { opacity: 1; transform: scale(1); }
.jw-card.is-empty .jw-media { color: #bbb; }
.jw-card.is-empty .frame { position: absolute; inset: 24px; height: auto; }
.jw-card.is-empty .jw-view { opacity: 1; transform: none; left: auto; top: auto; right: 24px; bottom: 24px; margin: 0; width: auto; height: auto; border-radius: 0; padding: 8px 12px; flex-direction: row; background: rgba(255,255,255,.08); }
.jw-page .cases-title { color: #F2F2F2; }
@media (max-width: 900px) { .jw-head, .jw-list { padding-left: 20px; padding-right: 20px; } .jw-list { gap: 12px; } .jw-view { display: none; } }
.cases-all { padding-top: clamp(40px, 6vh, 64px); padding-bottom: clamp(40px, 6vh, 64px); font-weight: 900; font-size: 18px; }
.cases-all a { border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.cases-all a:hover { color: var(--red); }

/* 项目页：手机竖屏截图三张一排（layout 'third'），等宽等高 */
.jk-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .jk-trio { gap: 8px; } }

/* 项目页：官网链接 */
.jk-site { border-bottom: 2px solid currentColor; padding-bottom: 1px; }
.jk-site:hover { opacity: .7; }
.jk-video video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 项目页片头影片（data.js heroVideo）：16:9 满版、静音循环 */
.jk-hero-vid { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--c); }

/* 项目页右上角的关闭方块（导航下方，固定）：项目色底＋细线 ✕，点了回上一页 */
.jk-return { position: fixed; top: 64px; right: var(--gutter); z-index: 21; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--c); color: #111; --x: 22px; --t: 2px; }
.jk-return i { position: relative; flex: none; width: var(--x); height: var(--x); transition: transform 400ms cubic-bezier(.2,.8,.2,1); }
.jk-return b { position: absolute; left: 50%; top: 50%; width: calc(var(--x) * .72); height: var(--t); margin-top: calc(var(--t) / -2); background: currentColor; transform-origin: 0 50%; }
.jk-return b:nth-child(1) { transform: rotate(45deg); }
.jk-return b:nth-child(2) { transform: rotate(135deg); }
.jk-return b:nth-child(3) { transform: rotate(225deg); }
.jk-return b:nth-child(4) { transform: rotate(315deg); }
.jk-return:hover i { transform: rotate(90deg); }
@media (max-width: 720px) { .jk-return { top: 56px; width: 44px; height: 44px; --x: 18px; } }

/* 手机版：关闭方块排在选单键正下方，左右对齐（选单键 top 12px、right 16px、44px） */
@media (max-width: 900px) { .jk-return { top: 12px; right: 68px; width: 44px; height: 44px; --x: 18px; } } /* 手机：关闭方块在顶条里、选单键左边 */

/* 关于页 about.html（照 design.pepsico.com/about）。数值换算自原站：引导句 7.64vw、巨字 22.15vw、巨字起点 59.1vw、拼块 0.83em */
.about-body { background: var(--paper); }

/* ---------- 首屏：我们是谁 ---------- */
.ap-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 120px var(--gutter) 96px; }
.ap-hero .ab-title { font-size: clamp(64px, 9.4vw, 176px); }
.ap-hero > :not(.ap-hero-photo) { position: relative; max-width: 48vw; }
.ap-hero-photo { position: absolute; top: 120px; right: var(--gutter); bottom: 96px; width: 42vw; margin: 0; }
.ap-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-band { margin: 0; }
.ap-band img { display: block; width: 100%; height: auto; }
.ap-hero .ab-glance { position: absolute; max-width: none; left: auto; right: calc(var(--gutter) + 42vw - 70px); bottom: 64px; z-index: 2; }
.ap-hero .ab-pop { left: auto; right: 0; }

/* ---------- 巨字段 ---------- */
.tm { position: relative; height: 400vh; background: var(--bg); color: var(--ink); }
.tm-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.tm-lead {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0 9.85vw; text-align: center;
  font-weight: 900; font-size: 7.64vw; line-height: 1.2; letter-spacing: -.02em;
}
.tm-holder { position: absolute; inset: 0; display: flex; align-items: center; padding-bottom: 30px; padding-left: 59.1vw; }
.tm-inner {
  margin: 0; display: flex; align-items: center; flex: none; white-space: nowrap;
  font-weight: 900; font-size: 22.15vw; line-height: 1; letter-spacing: -.04em; text-transform: uppercase;
  opacity: 0; will-change: transform, opacity;
}
.tm-tile { display: block; flex: none; width: .83em; height: .83em; margin: 0 .23em; }
.tm-tile svg, .tm-tile img { display: block; width: 100%; height: 100%; }
.tm-tile img { object-fit: cover; }

/* 减少动态：不钉住，直接排出完整句子 */
.is-static .tm { height: auto; }
.is-static .tm-stick { position: static; height: auto; padding: 18vh var(--gutter); }
.is-static .tm-lead { position: static; padding: 0; }
.is-static .tm-holder { position: static; padding: 0; justify-content: center; }
.is-static .tm-inner { opacity: 1; font-size: 9vw; }

/* 导航：不用混色，跟着底下那一段换字色 */
.about-body .cp-nav-jk { mix-blend-mode: normal; color: var(--nav-ink, var(--black)); background: var(--nav-bg, var(--paper)); transition: color 200ms, background-color 200ms; }
.ap-hero .ab-title em { margin-right: .06em; }

/* ---------- 进场：上浮淡入（原站 lift-fade：y30→0，0.7s） ---------- */
.ap-in { opacity: 0; transform: translateY(30px); transition: opacity 680ms cubic-bezier(.37,0,.63,1), transform 700ms cubic-bezier(.37,0,.63,1); }
.ap-in.is-in { opacity: 1; transform: none; }

/* ---------- 设计思维：左侧圆饼钉住，右侧卡片捲过 ---------- */
.dt { --ink: #FFFFFF; background: var(--purple); color: #fff; }
.dt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.dt-stick { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; }
.dt-u { width: min(30vw, 560px); height: auto; overflow: visible; }
.u-c { transition: fill 400ms cubic-bezier(.2, .8, .2, 1); }
.u-h { fill: transparent; }
.u-l { fill: var(--red); }
.u-bl, .u-bm, .u-br { fill: var(--blue); }
.u-r { fill: var(--green); }
.u-grid { stroke: #fff; stroke-width: .014; opacity: 0; transition: opacity 300ms; }
.u-ai { fill: var(--green); opacity: 0; transition: opacity 300ms 150ms; }
.u-user, .u-lens text { font-family: var(--font); font-weight: 900; text-anchor: middle; dominant-baseline: central; }
.u-user { fill: var(--purple); font-size: .42px; letter-spacing: -.01em; opacity: 0; transition: opacity 300ms; }
.u-lens { opacity: 0; transition: opacity 300ms 200ms; }
.u-lens text { fill: #111; font-size: .17px; writing-mode: vertical-rl; }
.u-lens text.u-both { writing-mode: horizontal-tb; fill: var(--purple); font-size: .2px; }
/* 1 设计规范 */
.dt[data-active="1"] .u-c:not(.u-l), .dt[data-active="2"] .u-l, .dt[data-active="2"] .u-r,
.dt[data-active="3"] .u-c:not(.u-r):not(.u-h), .dt[data-active="3"] .u-r { fill: var(--black); }
.dt[data-active="1"] .u-h, .dt[data-active="2"] .u-h, .dt[data-active="3"] .u-h { fill: transparent; }
.dt[data-active="1"] .u-grid { opacity: .85; }
/* 2 生产流程：三块由左往右依序上色 */
.dt[data-active="2"] .u-bm { transition-delay: 120ms; }
.dt[data-active="2"] .u-br { transition-delay: 240ms; }
/* 3 AI 工具：右竖拆成小拼块图样 */
.dt[data-active="3"] .u-ai { opacity: 1; }
/* 4 用户体验：内孔填白写 USER */
.dt[data-active="4"] .u-h { fill: #fff; }
.dt[data-active="4"] .u-user { opacity: 1; }
/* 三个维度：三根立柱＋底部「同时成立」 */
.dt[data-active="-1"] .u-h { fill: var(--blue); }
.dt[data-active="-1"] .u-r { fill: var(--orange); }
.dt[data-active="-1"] .u-bl, .dt[data-active="-1"] .u-bm, .dt[data-active="-1"] .u-br { fill: #fff; }
.dt[data-active="-1"] .u-lens { opacity: 1; }
.dt-mark { display: block; width: clamp(40px, 3vw, 56px); height: auto; aspect-ratio: 1; margin-bottom: 26px; overflow: visible; }
/* 小记号的拼块：换到这一段时依序弹出（--i 为顺序） */
.dt-mark .mk-p > * { transform-box: fill-box; transform-origin: center; }
.dt-card.is-on .dt-mark .mk-p > * { animation: mk-pop 520ms cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i) * 90ms + 160ms); }
@keyframes mk-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dt-card.is-on .dt-mark .mk-p > * { animation: none; } }
.dt-right { height: calc(var(--n) * 80vh); }
.dt-panel { position: sticky; top: 0; height: 100vh; }
.dt-card { position: absolute; left: 0; right: 0; top: 50%; max-width: 40rem; opacity: 0; transform: translateY(calc(-50% + 56px)); transition: opacity 450ms, transform 650ms cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.dt-card.is-on { opacity: 1; transform: translateY(-50%); pointer-events: auto; transition-delay: 120ms; }
/* 没轮到的卡片是透明叠在同一位置，不让它被选取，复制时才不会把看不见的几张一起带走 */
.dt-card:not(.is-on) { user-select: none; }
.is-static .dt-card { user-select: auto; }
.dt-card.is-past { transform: translateY(calc(-50% - 56px)); }
.dt-card h3, .aw-title, .aq-quote, .ac-title { text-wrap: balance; }
.dt-card h3 { margin: 0 0 24px; font-weight: 900; font-size: clamp(34px, 3.1vw, 58px); line-height: 1.12; letter-spacing: -.01em; }
.dt-card p { margin: 0; font-size: clamp(17px, 1.35vw, 22px); font-weight: 500; line-height: 1.65; }
.dt-card:first-child h3 { font-size: clamp(42px, 4.2vw, 80px); }

/* ---------- 负责人引言（原站 centered quote） ---------- */
.aq { padding: clamp(120px, 22vh, 240px) var(--gutter); text-align: center; }
.aq-title { margin: 0 0 24px; font-weight: 900; font-size: clamp(30px, 3.4vw, 60px); line-height: 1.2; color: var(--red); }
.aq-quote { margin: 0 auto; max-width: 22em; font-weight: 900; font-size: clamp(30px, 3.4vw, 60px); line-height: 1.32; letter-spacing: -.01em; }
.aq-who { margin: 40px 0 0; display: flex; flex-direction: column; gap: 4px; }
.aq-who b { font-size: 20px; font-weight: 900; letter-spacing: .04em; }
.aq-who span { font-size: 15px; color: #555; }

/* ---------- 奖项：手风琴＋右侧色块（原站 Design Disciplines） ---------- */
.aw { padding: clamp(120px, 20vh, 220px) var(--gutter); }
.aw-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 120px); max-width: var(--maxw); margin: 0 auto; align-items: start; }
.aw-title { margin: 0 0 24px; font-weight: 900; font-size: clamp(44px, 5vw, 96px); line-height: 1.05; letter-spacing: -.02em; }
.aw-intro { margin: 0 0 clamp(48px, 8vh, 88px); max-width: 30em; font-size: clamp(17px, 1.35vw, 22px); font-weight: 500; line-height: 1.65; }
.aw-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.aw-row { border-bottom: 1px solid var(--line); }
.aw-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; background: none; border: 0; font: inherit; font-size: clamp(20px, 1.7vw, 28px); font-weight: 900; color: inherit; text-align: left; cursor: pointer; }
.aw-head i { font-style: normal; font-size: 1.2em; line-height: 1; color: var(--c); transition: transform 400ms var(--ease); }
.aw-head[aria-expanded="true"] i { transform: rotate(45deg); }
.aw-head:hover > span, .aw-head:focus-visible > span { color: var(--c); }
.aw-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease); }
.aw-head[aria-expanded="true"] + .aw-panel { grid-template-rows: 1fr; }
.aw-panel > div { overflow: hidden; }
.aw .awards-spec { margin-top: 28px; }
.aw-right { position: sticky; top: 15vh; }
.aw-square { position: relative; aspect-ratio: 1; background: var(--c); overflow: hidden; display: grid; place-items: center; }
.aw-wipe { position: absolute; inset: 0; transform: scaleY(0); transform-origin: 50% 100%; }

/* ---------- 收尾 ---------- */
.ac { padding: clamp(120px, 22vh, 240px) var(--gutter); text-align: center; }
.ac-title { margin: 0 0 48px; font-weight: 900; font-size: clamp(36px, 5vw, 88px); line-height: 1.18; letter-spacing: -.02em; }
.ac-cta { display: inline-block; padding: 20px 36px; background: var(--black); color: #fff; font-weight: 900; font-size: 17px; border-radius: 0; transition: background-color 300ms; }
.ac-cta:hover { background: var(--red); }

@media (max-width: 900px) {
  .ap-hero { padding-top: 96px; }
  .ap-hero > :not(.ap-hero-photo) { max-width: none; }
  .ap-hero-photo { position: static; width: 100%; aspect-ratio: 3 / 2; margin-bottom: 32px; order: -1; }
  .ap-hero .ab-glance { position: static; margin-top: 28px; }
  .dt-grid, .aw-grid { grid-template-columns: minmax(0, 1fr); }
  .dt-left { display: contents; } /* 让圆饼以整段为钉住范围 */
  .dt-stick { height: 46vh; top: 0; z-index: 1; background: var(--purple); }
  .dt-u { width: min(64vw, 36vh); }
  .dt-right { height: calc(var(--n) * 60vh); }
  .dt-panel { top: 46vh; height: 54vh; }
  .aw-right { position: static; order: -1; }
}
.is-static .dt-stick, .is-static .aw-right { position: static; }
.is-static .dt-right { height: auto; }
.is-static .dt-panel { position: static; height: auto; display: flex; flex-direction: column; gap: 12vh; padding: 12vh 0; }
.is-static .dt-card { position: static; opacity: 1; transform: none; }
.dt-card p, .ap-hero .ab-body { text-wrap: pretty; }
html.is-record .cp-nav-jk { transition: none; } /* 录制逐帧推进时不要过渡 */
.tm-emoji canvas { display: block; width: 100%; height: 100%; }

/* 负责人引言上方的旋转圆章：外圈文字慢转，中间头像不动 */
.aq-badge { position: relative; width: clamp(150px, 12vw, 220px); aspect-ratio: 1; margin: 0 auto 36px; border-radius: 50%; background: var(--red); }
.aq-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: aq-spin 14s linear infinite; }
.aq-ring text { font-family: var(--font); font-weight: 900; font-size: 17px; fill: #fff; letter-spacing: .04em; }
.aq-face { position: absolute; inset: 22%; width: 56%; height: 56%; border-radius: 50%; object-fit: cover; background: #fff; }
@keyframes aq-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aq-ring { animation: none; } }
html.is-record .aq-ring { animation: none; }
/* 人物与合照统一暖调胶片：略提对比、偏暖、降一点饱和；作品画面不套 */
.ap-hero-photo img, .hv-db-photo img, .ap-band img, .aq-face { filter: contrast(1.08) saturate(.88) sepia(.14) brightness(1.04); }
/* 关于页：LOGO 跟着导航下方那一段切换黑白版，并和导航同一条底色 */
.about-body .jk-logo .lk-white { display: none; }
.about-body .jk-logo .lk-black { display: block; }
.about-body .jk-logo.on-dark .lk-white { display: block; }
.about-body .jk-logo.on-dark .lk-black { display: none; }
.about-body .jk-logo { z-index: 22; } /* 10/28：不再单独下移 12px，与首页／作品页同一条 72px 横条 */

/* 奖项（10/19 填入 2025 GUI 获奖）：每项赛事一行，展开列出获奖作品；右侧方块显示该赛事证书 */
.aw-count { display: flex; align-items: baseline; gap: 14px; margin: 0 0 clamp(28px, 5vh, 48px); }
.aw-count b { font-weight: 900; font-size: clamp(64px, 7vw, 128px); line-height: .9; color: var(--red); letter-spacing: -.03em; }
.aw-count span { font-weight: 900; font-size: clamp(18px, 1.5vw, 24px); }
.aw-head { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: baseline; }
.aw-name small { margin-left: 8px; font-size: .62em; font-weight: 700; color: var(--grey); }
.aw-sum { font-size: clamp(14px, 1vw, 16px); font-weight: 700; color: #555; white-space: nowrap; }
.aw-head i { justify-self: end; }
.aw-items { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aw-items li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 2px 16px; font-size: 16px; }
.aw-lv { grid-row: span 2; align-self: start; padding: 3px 0; text-align: center; font-size: 13px; font-weight: 900; background: var(--c); color: #111; }
.aw-work { font-weight: 900; }
.aw-cat { font-size: 14px; color: var(--grey); font-weight: 700; }
.aw-link { display: inline-block; margin: 0 0 28px; font-weight: 900; font-size: 15px; border-bottom: 2px solid currentColor; }
.aw-cert { position: relative; display: block; max-width: 84%; max-height: 84%; width: auto; height: auto; object-fit: contain; box-shadow: 0 18px 40px rgba(0,0,0,.18); background: #fff; }
.aw-ph { position: relative; padding: 0 12%; text-align: center; font-weight: 900; font-size: clamp(28px, 2.6vw, 48px); line-height: 1.15; color: #111; }
.aw-cert[hidden], .aw-ph[hidden] { display: none; }
@media (max-width: 900px) { .aw-head { grid-template-columns: minmax(0, 1fr) 28px; } .aw-sum { grid-column: 1; grid-row: 2; white-space: normal; } }
/* 奖项方块：边长同时受栏宽与画面高限制（扣掉导航），往上靠，证书再缩一点，整张一定看得完整 */
.aw-right { top: 11vh; }
.aw-square { width: min(100%, calc(89vh - 120px)); margin-left: auto; }
.aw-cert { max-width: 78%; max-height: 78%; }
@media (max-width: 900px) { .aw-square { width: 100%; } }

/* ---------- 奖项证书展示四种方式（js/about-awards.js） ---------- */
.aw-vis { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.aw-vis .aw-cert { position: static; }
/* stack 证书叠层：最前一张正、后面的错开转角；点击把最前一张移到最后 */
.aw-fan { position: relative; width: 78%; height: 78%; cursor: pointer; }
.aw-card { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.22);
  --kk: min(var(--k), 2); /* 后面最多露出两张，张数再多也不会越转越歪 */
  z-index: calc(10 - var(--k)); transform: translate(calc(var(--kk) * 4%), calc(var(--kk) * -3%)) rotate(calc(var(--kk) * 3deg)) scale(calc(1 - var(--kk) * .05));
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), opacity 320ms; }
.aw-card { opacity: clamp(0, calc(3 - var(--k)), 1); } /* 第 4 张起藏在后面 */
.aw-card.is-out { transform: translate(-30%, 12%) rotate(-12deg); opacity: 0; }
.aw-fan-tip { position: absolute; left: 0; right: 0; bottom: -11%; text-align: center; font-weight: 900; font-size: 14px; color: #111; }
/* wall 证书墙：整排证书横向排开，下方列表全宽 */
.aw--wall .aw-wall-head, .aw--wall .aw-wall-list { max-width: var(--maxw); margin: 0 auto; }
.aw--wall .aw-wall-list { margin-top: clamp(40px, 6vh, 72px); }
.aw-wall { display: flex; gap: 18px; overflow-x: auto; padding: 8px 0 20px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scroll-snap-type: x proximity; }
.aw-wcard { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--c); border: 0; cursor: pointer; scroll-snap-align: start; transition: transform 300ms var(--ease); }
.aw-wcard:hover { transform: translateY(-6px); }
.aw-wcard img { display: block; height: clamp(180px, 26vh, 280px); width: auto; background: #fff; }
.aw-wcard span { font-weight: 900; font-size: 14px; color: #111; text-align: left; }
/* hover 跟随鼠标：桌面不留右侧方块，证书浮在鼠标旁 */
.aw--hover:not(.aw--hover-touch) .aw-grid { grid-template-columns: minmax(0, 1fr); max-width: 1100px; }
.aw--hover:not(.aw--hover-touch) .aw-right { display: none; }
.aw--hover .aw-items li { cursor: default; padding: 4px 0; transition: color 200ms; }
.aw--hover .aw-items li:hover .aw-work { color: var(--c); }
.aw-float { position: fixed; left: 0; top: 0; z-index: 30; width: clamp(240px, 22vw, 380px); height: auto; pointer-events: none; opacity: 0; background: #fff; box-shadow: 0 24px 50px rgba(0,0,0,.25); transition: opacity 220ms; }
.aw-float.is-on { opacity: 1; }
.aw-intro { text-wrap: pretty; } /* 「25 项」「认可」用不断行字符黏住（data.js） */
.aw-intro { max-width: 34em; }
.aw-head { grid-template-columns: minmax(0, 1fr) 28px; } /* 右侧小计拿掉后只剩名称＋展开钮 */
.aw-right { position: static; top: auto; } /* 10/22：列表预设收起后很短，方块改成跟着页面一起捲，不再钉住 */

/* 10/22：方块跟着滑鼠上下移动；点开下方的奖项时移到那一项旁边（js/about-awards.js）。
   右栏撑满整列高度当作轨道，方块边长取栏宽与视窗可用高度的较小者，在栏内左右置中 */
.aw-grid { align-items: stretch; }
.aw-right { position: relative; top: auto; height: auto; align-self: stretch; }
.aw-square { width: min(100%, calc(100vh - 200px)); margin: 0 auto; will-change: transform; }
@media (max-width: 900px) { .aw-right { position: static; } .aw-square { width: 100%; transform: none !important; } }

/* 横幅改拼块（不放员工照片） */
.ap-band.is-tiles { margin: 0; }

/* 奖项（手机）：证书放在点开的项目里横向滑动；列表上方的方块不显示 */
.aw-certs-m { display: none; }
.aw-years { white-space: nowrap; }
@media (max-width: 900px) {
  .aw:not(.aw--wall) .aw-right { display: none; }
  .aw-certs-m { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 4px calc(var(--gutter) * -1) 20px; padding: 0 var(--gutter) 6px; -webkit-overflow-scrolling: touch; }
  .aw-certs-m img { flex: none; height: 240px; width: auto; max-width: 82vw; object-fit: contain; scroll-snap-align: start; background: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
}

/* 手机证书横滑：隐藏系统捲轴，改用细进度条＋张数 */
.aw-certs-bar { display: none; }
@media (max-width: 900px) {
  .aw-certs-m { scrollbar-width: none; margin-bottom: 10px; }
  .aw-certs-m::-webkit-scrollbar { display: none; }
  .aw-certs-bar { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
  .aw-certs-track { position: relative; flex: 1; height: 3px; background: rgba(17, 17, 17, .1); overflow: hidden; }
  .aw-certs-track i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c, #111); transition: transform 120ms linear; }
  .aw-certs-n { flex: none; font-size: 12px; font-weight: 900; letter-spacing: .06em; color: #111; font-variant-numeric: tabular-nums; }
}

/* 10/27：手机证书格状版（html.awc-grid），一眼看完不用横滑；没有这个 class 时是横滑＋进度条 */
@media (max-width: 900px) {
  .awc-grid .aw-certs-m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; scroll-snap-type: none; margin: 4px 0 20px; padding: 0; }
  .awc-grid .aw-certs-m img { height: auto; width: 100%; max-width: none; aspect-ratio: 3 / 4; object-fit: contain; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
  .awc-grid .aw-certs-bar { display: none !important; }
}
@media (max-width: 480px) { .awc-grid .aw-certs-m { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 关于页首屏四个方案（js/about-hero.js）。共同原则：全员合照保持 3:2 原比例，不裁切、不放大超过原图 */
.ap-hero.hv > * { max-width: none; }
.hv .hv-tile { display: block; aspect-ratio: 1; }
.hv .hv-tile svg { display: block; width: 100%; height: 100%; }

/* ---------- da 上字下图：大字一行钉住，完整合照往上推、盖过大字 ---------- */
.ap-hero.hv-da { display: block; min-height: 0; padding: 132px 0 0; }
.hv-da .hv-da-top { position: sticky; top: 96px; z-index: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 4vw; padding: 0 var(--gutter) 56px; }
.hv-da .ab-title { margin: 0; font-size: clamp(56px, 8.4vw, 164px); white-space: nowrap; }
.hv-da .ab-body { margin: 0; max-width: 28vw; font-size: clamp(16px, 1.2vw, 20px); }
.hv-da .hv-da-photo { position: relative; z-index: 1; margin: 0; }
.hv-da .hv-da-photo img { display: block; width: 100%; height: auto; }
.hv-da .hv-da-photo .ab-glance { position: absolute; left: var(--gutter); right: auto; top: -70px; bottom: auto; }

/* ---------- db 拼块补位：照片 3:2 靠右贴底，上方一排六块拼块，跟着轮播转 90° 换色 ---------- */
/* 一打开就完整看到：拼块＋照片的总高＝宽 × --art-k（由 js 依照片裁切比例算出），宽度同时受画面宽（56vw）和画面高限制 */
.ap-hero.hv-db { --art-w: min(56vw, calc((100vh - 96px - 64px) / var(--art-k, .8333))); display: grid; grid-template-columns: minmax(0, 1fr) var(--art-w); gap: 3vw; align-items: end; height: 100vh; min-height: 0; padding: 96px var(--gutter) 64px; box-sizing: border-box; }
.hv-db .ab-title { font-size: clamp(48px, min(7.4vw, 12.5vh), 150px); }
.hv-db .hv-db-copy { padding-bottom: 24px; }
.hv-db .hv-db-art { display: flex; flex-direction: column; }
.hv-db .hv-db-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hv-db .hv-q { transform: rotate(var(--rot, 0deg)); transform-box: view-box; transform-origin: 50px 50px; transition: transform 700ms cubic-bezier(.7, 0, .2, 1); }
.hv-db rect, .hv-db path { transition: fill 500ms 200ms; }
.hv-db .hv-tile { overflow: hidden; }
.hv-db .hv-db-photo { position: relative; margin: 0; }
.hv-db .hv-db-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms cubic-bezier(.4, 0, .2, 1); will-change: opacity; } /* 框的比例由 js 写入 aspect-ratio；图片填满框、只裁上下；多张叠在一起轮流淡入 */
.hv-db .hv-db-photo img.is-on { opacity: 1; }
.hv-db .hv-db-photo .ab-glance { position: absolute; left: auto; right: calc((var(--gutter) - 24px) * -1); top: auto; bottom: -40px; } /* 圆章旋转时也不超出页边 */

/* ---------- ca 拼块开幕：两侧被拼块盖住，捲动时逐块翻开（--open 0→1 由 js 写入） ---------- */
.ap-hero.hv-ca { display: block; min-height: 0; height: 220vh; padding: 0; }
.hv-ca .hv-ca-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hv-ca .hv-ca-copy { position: absolute; left: var(--gutter); top: 0; bottom: 0; width: calc(100vw - var(--gutter) * 2 - min(60vw, calc((100vh - 200px) * 1.5)) - 48px); /* 文字停在拼块左边 */ display: flex; flex-direction: column; justify-content: center; will-change: transform, opacity; }
.hv-ca .ab-title { font-size: clamp(52px, 7vw, 134px); }
.hv-ca .hv-ca-photo { --open: 0; position: absolute; right: var(--gutter); top: 50%; width: min(60vw, calc((100vh - 200px) * 1.5)); aspect-ratio: 3 / 2; margin: 0; transform: translate(calc((min(60vw, calc((100vh - 200px) * 1.5)) / 2 + var(--gutter) - 50vw) * var(--open)), -46%); } /* 翻开过程中照片移到画面正中 */
.hv-ca .hv-ca-photo img { display: block; width: 100%; height: 100%; clip-path: inset(0 calc((1 - var(--open)) * 19%) 0 calc((1 - var(--open)) * 19%)); }
.hv-ca .hv-ca-side { position: absolute; top: 0; bottom: 0; width: 19%; display: flex; flex-direction: column; overflow: hidden; pointer-events: none; }
.hv-ca .hv-ca-side.l { left: 0; }
.hv-ca .hv-ca-side.r { right: 0; }
.hv-ca .hv-ca-side .hv-tile { flex: none; width: 100%; will-change: transform, opacity; }
.hv-ca .hv-ca-side.l .hv-tile { transform-origin: 0 0; }
.hv-ca .hv-ca-side.r .hv-tile { transform-origin: 100% 0; }
.hv-ca .hv-ca-photo .ab-glance { position: absolute; left: calc((1 - var(--open)) * 19% - 70px); right: auto; top: auto; bottom: -50px; }

/* ---------- cb 撕贴纸：合照全幅置中，轮播字是五色贴纸，贴在照片上方的天花板 ---------- */
.ap-hero.hv-cb { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 96px var(--gutter) 56px; }
.hv-cb .hv-cb-photo { position: relative; margin: 0; width: min(84vw, calc((100vh - 240px) * 1.5)); }
.hv-cb .hv-cb-photo img { display: block; width: 100%; height: auto; }
.hv-cb .hv-cb-stickers { position: absolute; left: 0; right: 0; top: 2%; height: 26%; }
.hv-cb .hv-cb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hv-cb .ab-body { margin: 32px 0 0; max-width: 46em; text-align: center; font-size: clamp(16px, 1.2vw, 20px); }
.hv-cb .hv-cb-photo .ab-glance { position: absolute; left: auto; right: -50px; top: auto; bottom: -50px; }
.hv-sticker {
  position: absolute; top: 14%; padding: .1em .38em .14em; border-radius: 12px; background: var(--c); color: var(--ink, #fff);
  font-weight: 900; font-size: clamp(30px, 4.4vw, 88px); line-height: 1.1; letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .2); cursor: grab; user-select: none; touch-action: none; overflow: hidden;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--tilt, 0deg));
  animation: hv-slap 460ms cubic-bezier(.34, 1.56, .64, 1) both;
}
.hv-sticker.s0 { left: 7%; }
.hv-sticker.s1 { right: 7%; top: 40%; }
.hv-sticker.is-drag { cursor: grabbing; box-shadow: 0 22px 40px rgba(0, 0, 0, .28); }
.hv-sticker::after { content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 0; background: #F4F2EC; border-top-left-radius: 100%; box-shadow: -4px -4px 10px rgba(0, 0, 0, .18); }
.hv-sticker.is-peel { animation: hv-peel 600ms cubic-bezier(.5, 0, .75, 0) forwards; }
.hv-sticker.is-peel::after { animation: hv-curl 260ms ease-out forwards; }
@keyframes hv-slap { from { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--tilt, 0deg)) scale(1.35); } to { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--tilt, 0deg)) scale(1); } }
@keyframes hv-peel { 0% { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--tilt, 0deg)); } 45% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(-16deg) translate(-40px, -90px) scale(.85); } }
@keyframes hv-curl { to { width: 1em; height: 1em; } }

/* ---------- 手机版 ---------- */
@media (max-width: 900px) {
  .ap-hero.hv-da { padding-top: 96px; }
  .hv-da .hv-da-top { position: static; flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 32px; }
  .hv-da .ab-title { white-space: normal; }
  .hv-da .ab-body { max-width: none; }
  .hv-da .hv-da-photo .ab-glance { position: static; margin: 24px var(--gutter) 0; }
  .ap-hero.hv-db { grid-template-columns: minmax(0, 1fr); height: auto; padding-top: 90px; }
  .hv-db .hv-db-art { order: -1; }
  .hv-db .hv-db-photo .ab-glance { position: static; margin-top: 20px; }
  .ap-hero.hv-ca { height: auto; padding: 90px var(--gutter) 48px; }
  .hv-ca .hv-ca-stick { position: static; height: auto; overflow: visible; display: flex; flex-direction: column; gap: 28px; }
  .hv-ca .hv-ca-copy { position: static; width: auto; transform: none !important; opacity: 1 !important; order: 2; }
  .hv-ca .hv-ca-photo { position: relative; right: auto; top: auto; width: 100%; transform: none; }
  .hv-ca .hv-ca-photo .ab-glance { display: none; }
  .ap-hero.hv-cb { padding-top: 90px; justify-content: flex-start; }
  .hv-cb .hv-cb-photo { width: 100%; }
  .hv-sticker { font-size: 22px; border-radius: 8px; }
  .hv-cb .hv-cb-photo .ab-glance { position: static; margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .hv-sticker, .hv-sticker.is-peel, .hv-db .hv-q { animation: none; transition: none; } }

/* ---------- db 左栏对齐方式（三选一对照） ---------- */
/* 共同：大字放大，高度也受画面高限制 */
.hv-db[data-align] .ab-title { font-size: clamp(56px, min(8.8vw, 16.5vh), 176px); }
.hv-db[data-align=""] .ab-title { font-size: clamp(48px, min(7.4vw, 12.5vh), 150px); }
/* a 上下都对齐：大字顶端＝拼块上缘，内文底边＝照片下缘 */
.hv-db[data-align="a"] { align-items: stretch; align-content: end; } /* 行高＝右侧拼块＋照片的高度 */
.hv-db[data-align="a"] .hv-db-copy { display: flex; flex-direction: column; justify-content: space-between; padding: 0; }
/* b 对齐照片：文字区从照片上缘排到照片下缘，拼块单独在上方 */
.hv-db[data-align="b"] { align-items: stretch; align-content: end; }
.hv-db[data-align="b"] .ab-title { font-size: clamp(48px, min(8.2vw, 13vh), 160px); } /* 文字区只有照片那么高，字级再随画面高收一点 */
.hv-db[data-align="b"] .hv-db-copy { display: flex; flex-direction: column; justify-content: space-between; padding: 0; margin-top: calc(var(--art-w) / 6); }
/* c 置中：左右两块垂直置中 */
.hv-db[data-align="c"] { align-items: center; }
.hv-db[data-align="c"] .hv-db-copy { padding: 0; }
.hv-db[data-align] .ab-title, .hv-db[data-align] .ab-body { margin-top: 0; }
.hv-db[data-align="c"] .ab-body { margin-top: clamp(24px, 4vh, 48px); }
@media (max-width: 900px) { .hv-db[data-align] .hv-db-copy { margin-top: 0; display: block; } .hv-db[data-align] .ab-body { margin-top: 24px; } }

/* 不放照片时：照片框里是 6×3 拼块，填满框 */
.hv-db .hv-db-photo.is-tiles .tile-art { position: absolute; inset: 0; width: 100%; height: 100%; }

.hv-db .hv-db-photo.is-tiles .hv-tile, .hv-db .hv-db-tiles .hv-tile { overflow: visible; }
.hv-db .hv-db-photo.is-tiles .hv-tile svg, .hv-db .hv-db-tiles .hv-tile svg { transform: scale(1.02); }

@media (max-width: 900px) {
  .hv-db .hv-db-photo.is-tiles { aspect-ratio: auto !important; }
  .hv-db .hv-db-photo.is-tiles .tile-art { position: relative; inset: auto; height: auto; }
}

/* 手机上「COLOUR 一览」圆章三种处理（js/about-hero.js 在 html 加 gl-a｜gl-b｜gl-c） */
@media (max-width: 900px) {
  .gl-a .hv-db .hv-db-photo .ab-glance { display: none; }
  .gl-b .hv-db .hv-db-photo.is-tiles { position: relative; }
  .gl-b .hv-db .hv-db-photo .ab-glance { position: absolute; right: -6px; bottom: -28px; margin: 0; z-index: 2; }
  .gl-b .hv-db .hv-db-photo .ab-ring { width: 96px; height: 96px; padding: 10px; font-size: 10px; white-space: nowrap; }
  .gl-b .hv-db .hv-db-photo .ab-pop { right: 0; left: auto; }
  .gl-b .hv-db .hv-db-copy { padding-top: 12px; }
  .gl-c .hv-db .hv-db-photo .ab-glance { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 18px; }
  .gl-c .hv-db .hv-db-photo .ab-ring { all: unset; font-size: 13px; font-weight: 900; letter-spacing: .02em; }
  .gl-c .hv-db .hv-db-photo .ab-ring > span { display: inline; }
  .gl-c .hv-db .hv-db-photo .ab-pop { all: unset; display: contents; }
  .gl-c .hv-db .hv-db-photo .ab-pop b { font-size: 13px; font-weight: 700; padding-left: 14px; border-left: 2px solid var(--red); }
}