@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Noto+Serif+SC:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;600;700;800&display=swap");

/* =============================================================
 * Carbon Nexus 鈥?Design Language Bible v2 (DO NOT VIOLATE)
 *
 *   鎬绘皵璐細椤剁偣绾ф満鏋?+ 缂栬緫绾ф潅蹇?+ 绮惧瘑绉戞妧宸ュ叿銆? *           鍙傝€?Apex Brand System / Lazard / Sullivan & Cromwell /
 *           Deloitte-style institutional sans / Bloomberg Terminal銆? *
 *   COLOR PROPORTIONS 鈥?70 / 20 / 8 / 2 涓ユ牸鎵ц
 *     70%  Deep Void / Obsidian         鍏ㄧ珯鑳屾櫙
 *     20%  Vellum / Platinum / Stone    鏂囧瓧涓庝腑鎬? *      8%  Champagne Gold               寮鸿皟鑹诧紙CTA / 楂樹寒 / 鏍囩嚎锛? *      2%  涓氬姟绾胯壊锛坈arbon/finance/tech/trade锛?浠呯湁棰?+ 缁嗙嚎
 *
 *   TYPOGRAPHY 寰峰嫟寮忕粺涓€鏃犺‖绾? *     Display  : Open Sans + Noto Sans SC             鏈烘瀯绾ф爣棰? *     Label/UI : Open Sans + Noto Sans SC             鐪夐 / 鎸夐挳 / 鏍囩
 *     Body     : Open Sans + Noto Sans SC             姝ｆ枃 / 娈佃惤
 *     姝ｆ枃鏈€澶у 720px锛屽己鍒堕槄璇昏垝閫傚害銆? *
 *   COLOR DISCIPLINE 閾佸緥
 *     脳 棣欐閲戝ぇ闈㈢Н閾哄簳锛堥摵婊＄珛鍗冲彉澶嶅彜瑁呴グ椋庯級
 *     脳 棣欐閲戦厤浜簳锛堥噾鑹插湪娴呰壊搴曞け鍘婚噾灞炶川鎰燂級
 *     脳 鍚屽睆瓒呰繃 8 澶勯噾鑹插厓绱狅紙绋€閲婄█缂烘€э級
 *     脳 寮曞叆钃?缁?绱?绾㈠仛瑁呴グ锛堜笟鍔＄嚎瀛愯壊闄ゅ锛? *     脳 妯′豢 EY / McKinsey / PwC 鐨勮壊褰╃瓥鐣? *
 *   DESIGN PROHIBITIONS
 *     脳 閫氱瘒缁胯壊 / 妫灄 / 鍦扮悆鎵嬫崸 / 鎶借薄缁跨悆
 *     脳 绱摑娓愬彉 / 绉戞妧鐐厜 / 澶ч潰绉矑瀛? *     脳 鍦嗘鼎瀛椾綋 / 娓告垙鎰熷瓧浣? *     脳 SaaS 鍗＄墖鍫嗗彔锛堟瘡灞?6 鍗?+ 涓€鍙ヨ瘽锛? *     脳 閲嶅鏃犳剰涔夌殑鏃嬭浆銆佽疆鎾垨鍔ㄧ敾
 *     脳 鍗＄墖澶у渾瑙?(>8px)
 *
 *   DESIGN RECOMMENDATIONS
 *     娓彛 / 宸ュ巶 / 鐭夸骇 / 鐢熶骇绾?/ 璐告槗鑸嚎 / 鐪熷疄杞欢鐣岄潰銆? *     鍒嗙珷鐢?hairline 鏋佺粏绾?(1px / 閲戣壊 rgba 18-28%)銆傚姩鏁堝厠鍒躲€? * ============================================================= */

:root {
  /* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲
   *  Carbon Nexus 鈥?Design Language v3
   *
   *  姘旇川锛氱簿瀵嗗伐涓?+ 鎴樼暐鏅哄簱 + 缂栬緫绾у彊浜?   *  鍙傝€冿細Bloomberg Terminal + Lazard + Sullivan & Cromwell
   *
   *  COLOR PROPORTIONS 鈥?涓ユ牸鎵ц
   *    70%  Deep Void / Obsidian         鍏ㄧ珯鑳屾櫙
   *    22%  Vellum / Platinum            鏂囧瓧涓庝腑鎬у眰娆?   *     6%  Champagne Gold               鍝佺墝淇″彿锛堜粎 CTA / em / 娲昏穬鎬侊級
   *     2%  Photography                  Hero / 妯″潡鎽勫奖
   *
   *  GOLD DISCIPLINE 鈥?閾佸緥
   *     鉁?浠呯敤浜庯細em寮鸿皟 / CTA鎸夐挳 / 娲昏穬鐘舵€?/ 1px鍒嗗壊绾?   *     鉁?绂佹锛氬ぇ闈㈢Н鑳屾櫙娓愬彉 / 瓒呰繃6澶勫悓灞?/ 瑁呴グ鎬order
   * 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 */

  /* 鈹€鈹€ Deep Void Foundation 70% 鈹€鈹€ */
  --void:       #1A1B22;
  --obsidian:   #22242C;
  --obsidian-2: #2A2C35;
  --obsidian-3: #32343E;
  --obsidian-4: #3E404E;

  /* 鈹€鈹€ EY Inkwell: for selective dark bands (kept for compatibility) 鈹€鈹€ */
  --inkwell:    #1A1B22;
  --inkwell-2:  #222330;

  /* 鈹€鈹€ Neutral Scale 22% 鈹€鈹€ */
  --vellum:     #FFFFFF;
  --parchment:  #F0F0F0;
  --platinum:   #C8C8C8;
  --warm-grey:  #9A9A9A;
  --stone:      #666666;
  --steel-dark: #444455;

  /* 鈹€鈹€ Champagne Gold 6% 鈥?content signals ONLY 鈹€鈹€ */
  --gold:         #7A6018;
  --gold-mid:     #B8882A;
  --gold-lt:      #D4A438;
  --gold-bright:  #E8BC50;
  --gold-pale:    #F4E0A0;
  --gold-glow:    rgba(212, 164, 56, 0.06);
  --gold-line:    rgba(212, 164, 56, 0.14);

  /* 鈹€鈹€ Business Lines 2% 鈥?eyebrow labels only 鈹€鈹€ */
  --carbon-line:  #3D7A57;
  --finance-line: #B8944A;
  --tech-line:    #5A7ABA;
  --trade-line:   #7A5AB8;

  /* 鈹€鈹€ Semantic 鈹€鈹€ */
  --deadline:   #c84a2a;
  --status-ok:  #52C87A;

  /* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲
   *  ALIAS LAYER
   * 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 */

  --ink:    var(--vellum);
  --navy:   var(--void);
  --navy-2: var(--obsidian);
  --steel:  var(--stone);
  --muted:  var(--warm-grey);
  --mist:   var(--platinum);
  --silver: var(--warm-grey);
  --line:   var(--obsidian-4);
  --paper:  var(--void);
  --white:  var(--vellum);
  --pure:   var(--obsidian);

  --bone:       var(--obsidian);
  --bone-line:  var(--obsidian-4);
  --paper-cool: var(--obsidian-2);

  --cyan:      var(--gold-lt);
  --cyan-dark: var(--gold-mid);
  --orange:    var(--gold-lt);
  --amber:     var(--gold-bright);
  --copper:       var(--gold-mid);
  --copper-lt:    var(--gold-lt);
  --copper-pale:  var(--gold-pale);
  --copper-glow:  var(--gold-glow);
  --teal:         var(--gold-mid);
  --teal-lt:      var(--gold-lt);
  --teal-pale:    var(--gold-pale);
  --teal-glow:    var(--gold-glow);

  /* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲
   *  TYPOGRAPHY
   * 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 */

  --font-display: "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --font-serif:   "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --font-label:   "Open Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  --font-sans:    "Open Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  --font-body:    "Open Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Consolas", monospace;

  --serif: var(--font-display);
  --sans:  var(--font-label);
  --body:  var(--font-body);

  /* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲
   *  SPACING / RHYTHM / LINES
   * 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 */

  --shadow:        0 24px 70px rgba(0, 0, 0, 0.45);
  --shadow-md:     0 8px 32px rgba(0, 0, 0, 0.32);
  --hairline:      1px solid var(--gold-line);
  --hairline-dark: 1px solid rgba(255, 255, 255, 0.10);
  --hairline-gold: 1px solid var(--gold-line);
  --radius:        4px;
  --max:           1180px;
  --max-readable:  720px;
  --section-pad:   128px;

  --tint-blue:   rgba(80, 110, 180, 0.08);
  --tint-purple: rgba(140, 110, 200, 0.06);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* clip, not hidden: hidden turns body into a scroll container and kills
   * every position:sticky descendant (the industry chapter rail). */
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--vellum);
  background: var(--void);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "kern", "liga", "ss01";
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tabular numerals 鈥?for almanac, tables, time stamps */
.tnum,
.almanac-item strong,
.evidence-item strong,
.proof-item strong,
.market-row,
.deadline-cell time {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Hairline divider 鈥?magazine chapter rule */
.hairline {
  height: 1px;
  width: 100%;
  background: rgba(13, 21, 32, 0.10);
  border: 0;
}
.dark .hairline,
.section.dark .hairline {
  background: rgba(255, 255, 255, 0.14);
}

/* Readable text width 鈥?720px guard for body copy */
.read-cap {
  max-width: var(--max-readable);
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  max-width: 100%;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid rgba(212, 164, 56, 0.12);
  background: rgba(6, 7, 10, 0.88);
  color: var(--vellum);
  backdrop-filter: blur(12px);
}

.nav-shell {
  width: 100%;
  height: 72px;
  margin: 0;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.brand {
  display: flex;
  align-items: center;
  min-width: 190px;
}

.brand strong {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--platinum);
}

.brand span {
  display: none;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.main-nav a {
  color: var(--silver);
  padding: 9px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--platinum);
  border-color: var(--gold-lt);
}

.nav-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 8px 20px;
  border: 1px solid rgba(212, 164, 56, 0.38);
  border-radius: 0;
  background: transparent;
  color: var(--gold-lt);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.nav-cta:hover {
  background: var(--gold-glow);
  border-color: var(--gold-lt);
  color: var(--gold-pale);
}

.lang-toggle {
  opacity: 0.42;
  transform: scale(0.84);
}

.button.dark {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.button.ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.38);
}

.menu-button {
  display: none;
  width: 42px;
  height: 42px;
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font-size: 20px;
}

.hero {
  position: relative;
  min-height: 100svh;
  padding: 150px 0 70px;
  color: var(--white);
  overflow: hidden;
  background: var(--navy);
}

.hero.page-hero {
  min-height: 620px;
  padding-bottom: 80px;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  filter: contrast(1.04);
}

/* Abstract (non-industrial) page heroes 鈥?A/B/C/D/E archetypes. */
.hero-media-abstract { background: var(--navy); }

.hero-media-abstract .media-slot {
  position: absolute;
  inset: 0;
  margin: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.hero-media-abstract .media-slot img {
  opacity: 1;
  filter: none;
}

/* Caption + attribution from media.js are noise inside a page-hero 鈥?hide. */
.hero-media-abstract .media-caption,
.hero-media-abstract .media-attribution { display: none; }

.hero-media-product-strategy {
  background: #0a111b;
}

.hero-media-product-strategy .media-poster {
  display: none;
}

.hero-media-product-strategy video,
.hero-media-product-strategy .media-poster {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  filter: saturate(0.9) contrast(1.04) brightness(0.86);
}

/* Archetype-specific tinting. Each archetype gets its own gradient temperament:
 *   A bright sculpture            鈫?dark left wedge, image breathes on the right
 *   B abstract macro (modernist)  鈫?balanced wash, slightly cooler
 *   C editorial people            鈫?warm vignette, shimmer along edges
 *   D data-as-image (already dark)鈫?minimal overlay so the wave reads
 *   E editorial cover             鈫?bone-tinted, almost no overlay, type leads */
.hero-media-a .media-slot img { filter: brightness(1.02) contrast(1.04); }
.hero-media-b .media-slot img { filter: brightness(0.96) contrast(1.06); }
.hero-media-c .media-slot img { filter: brightness(0.90) contrast(1.04); }
.hero-media-d .media-slot img { filter: brightness(0.94) contrast(1.08); }
.hero-media-e .media-slot img { filter: grayscale(0.15) saturate(0.82) brightness(0.96); }

/* Archetype C 窄屏补偿。
 * C 换成工业黑白片之后，窄屏下 .hero::after 的横向遮罩基本失效
 * （文字铺满整幅，而遮罩是为"左文右图"设计的），眉标掉到 1.77:1。
 * 逐像素实测：正文一项在换图前就只有 2.01:1，是旧账；眉标 7.27→1.77
 * 是换图带来的，因为旧图恰好在那个位置是深棕。两处一并压掉。
 * 只作用于 archetype C 与窄屏，不影响其它首屏。 */
@media (max-width: 900px) {
  .hero-media-c .media-slot img { filter: brightness(0.42) contrast(1.10) grayscale(1); }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7, 12, 20, 0.94), rgba(9, 16, 26, 0.72) 43%, rgba(9, 16, 26, 0.22) 78%),
    linear-gradient(0deg, rgba(7, 12, 20, 0.88), rgba(7, 12, 20, 0.05) 42%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.93fr) minmax(0, 0.78fr);
  align-items: end;
  gap: 56px;
  min-width: 0;
}

.page-hero .hero-inner {
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--platinum);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.012em;
}

h1 {
  max-width: 880px;
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 72px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.04;
  overflow-wrap: anywhere;
}

h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-lt);
}

h2 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.015em;
}

h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-lt);
}

h3 em {
  font-style: italic;
  color: var(--gold-lt);
}

.hero-lede {
  max-width: var(--max-readable);
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
  max-width: 760px;
}

.proof-item {
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  padding-top: 16px;
}

.proof-item strong {
  display: block;
  font-size: 26px;
}

.proof-item span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

.product-console {
  min-width: 0;
  background: rgba(9, 17, 29, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.console-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.console-grid {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.console-row,
.console-panel {
  background: rgba(12, 23, 38, 0.93);
  padding: 18px;
}

.console-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}

.console-label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

.console-value {
  margin-top: 4px;
  color: var(--white);
  font-weight: 750;
}

.risk {
  color: var(--amber);
}

.metric-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
}

.bar {
  height: 8px;
  margin-top: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  width: var(--w, 60%);
  background: linear-gradient(90deg, var(--cyan), var(--amber));
}

.agent-prompt {
  margin: 18px;
  padding: 16px;
  border-left: 2px solid var(--amber);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
}

.section {
  padding: var(--section-pad) 0;
}

.section.dark {
  background: var(--void);
  color: var(--vellum);
}

.section.white {
  background: var(--void);
  color: var(--vellum);
}

.section.alt {
  background: var(--obsidian);
  color: var(--vellum);
}

.section.pure {
  background: var(--void);
  color: var(--vellum);
}

/* Editorial chapter 鈥?obsidian variant */
.section.bone {
  background: var(--obsidian);
  color: var(--vellum);
}

.section.bone .hairline {
  background: var(--gold-line);
}

.section.bone .eyebrow,
.section.bone .section-head p {
  color: var(--warm-grey);
}

/* paper-cool 鈥?obsidian-2 variant */
.section.paper-cool {
  background: var(--obsidian-2);
  color: var(--vellum);
}

/* McKinsey "blue line treatment" 鈥?浠讳綍 figure 鍔犱笂杩欎釜绫伙紝
 *   绔嬪埢鑾峰緱缁熶竴鐨勭伆搴﹀幓楗卞拰 + 钃濈传杈圭紭娓愭煋锛? *   浣垮叏绔欑収鐗囧儚鍚屼竴瀹跺叕鍙歌€屼笉鏄浘搴撱€? *   渚濊禆 figure 涓婃湁 ::before / ::after 妲戒綅锛屽凡涓?media-slot 鍏煎銆?*/
.media-mck-treatment { position: relative; isolation: isolate; }

.media-mck-treatment img {
  filter: brightness(1.0) contrast(1.02);
}

.media-mck-treatment::before,
.media-mck-treatment::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.media-mck-treatment::before {
  background: transparent;
  display: none;
}

.media-mck-treatment::after {
  background: linear-gradient(180deg, rgba(8, 16, 28, 0.06) 0%, transparent 40%, rgba(8, 16, 28, 0.18) 100%);
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: no-preference) {
  .media-mck-treatment.kenburns img {
    transform: scale(1.04);
    animation: mckKenBurns 22s ease-in-out infinite alternate;
  }
}

@keyframes mckKenBurns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1.2%, -0.8%, 0); }
}

.wrap {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(280px, 0.44fr);
  gap: 44px;
  align-items: end;
  margin-bottom: 46px;
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.08;
}

.section-head p {
  margin: 0;
  max-width: 380px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.dark .section-head p,
.dark .muted {
  color: rgba(255, 255, 255, 0.68);
}

.editorial-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 34px;
}

.feature-text {
  padding: 8px 0;
}

.feature-text p {
  max-width: 720px;
  margin: 0 0 22px;
  color: var(--steel);
  font-size: 20px;
}

.quote-line {
  border-left: 3px solid var(--orange);
  padding-left: 22px;
  font-size: 27px;
  line-height: 1.32;
  font-weight: 750;
}

.evidence-grid,
.six-grid,
.module-grid,
.industry-grid,
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.evidence-item,
.lane,
.module,
.industry,
.article,
.method-step,
.form-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
}

.evidence-item,
.lane,
.module,
.industry,
.article,
.method-step {
  padding: 24px;
}

.dark .lane,
.dark .module,
.dark .industry,
.dark .article {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

.evidence-item strong {
  display: block;
  color: var(--navy);
  font-size: 42px;
  line-height: 1;
}

.evidence-item span {
  display: block;
  margin-top: 12px;
  color: var(--steel);
}

.source-note {
  margin-top: 22px;
  color: var(--muted);
  font-size: 12px;
}

.lane-number {
  color: var(--orange);
  font-size: 12px;
  font-weight: 800;
}

.lane h3,
.module h3,
.industry h3,
.article h3,
.method-step h3 {
  margin-top: 12px;
  font-size: 21px;
}

.lane p,
.module p,
.industry p,
.article p,
.method-step p {
  margin: 12px 0 0;
  color: var(--steel);
}

.dark .lane p,
.dark .module p,
.dark .industry p,
.dark .article p {
  color: rgba(255, 255, 255, 0.66);
}

.dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.dual-panel {
  padding: 34px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
}

.dual-panel.dark-panel {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.dual-panel ul,
.clean-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
}

.dual-panel li,
.clean-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.dual-panel li::before,
.clean-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--orange);
  flex: 0 0 auto;
}

.workflow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.workflow div {
  min-height: 126px;
  padding: 22px;
  background: var(--white);
}

.workflow strong {
  display: block;
  font-size: 13px;
  color: var(--orange);
}

.workflow span {
  display: block;
  margin-top: 14px;
  font-weight: 750;
}

.cta-band {
  position: relative;
  overflow: hidden;
  padding: 86px 0;
  color: var(--white);
  background: linear-gradient(135deg, #0b1320, #172538);
}

.cta-band .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) auto;
  gap: 34px;
  align-items: center;
}

.cta-band h2 {
  font-size: 38px;
}

.cta-band p {
  max-width: 710px;
  color: rgba(255, 255, 255, 0.72);
}

.site-footer {
  background: #07101d;
  color: rgba(255, 255, 255, 0.76);
  padding: 54px 0 28px;
}

.footer-grid {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 28px;
}

.footer-grid h4 {
  margin: 0 0 14px;
  color: var(--white);
}

.footer-grid a,
.footer-grid span {
  display: block;
  margin: 8px 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
}

.footer-bottom {
  width: min(var(--max), calc(100% - 40px));
  margin: 34px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.46);
  font-size: 12px;
}

.page-content {
  background: var(--paper);
}

.split-section {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 52px;
  align-items: start;
}

.sticky-note {
  position: sticky;
  top: 110px;
  padding: 30px;
  border-left: 3px solid var(--orange);
  background: var(--white);
  box-shadow: var(--shadow);
}

.detail-list {
  display: grid;
  gap: 16px;
}

.detail-list .module {
  background: var(--white);
}

.form-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 34px;
}

.form-panel {
  padding: 30px;
}

.lead-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field {
  display: grid;
  gap: 7px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  color: var(--steel);
  font-size: 13px;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

.field textarea {
  min-height: 118px;
  resize: vertical;
}

.form-status {
  grid-column: 1 / -1;
  min-height: 24px;
  color: var(--cyan-dark);
  font-weight: 700;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.hero .reveal {
  opacity: 1;
  transform: none;
}

/* --- Homepage featured insights journal: 1 lead + 2 side cards --- */
.home-insights-journal {
  background: #292A33;
  color: var(--vellum);
  padding: 64px max(40px, calc((100vw - var(--max)) / 2)) 68px;
}

.home-insights-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  margin-bottom: 36px;
}

.home-insights-eyebrow {
  position: relative;
  margin: 0 0 20px;
  padding-left: 58px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  color: rgba(212, 164, 56, 0.72);
}

.home-insights-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.home-insights-head h2 {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0;
}

.home-insights-head h2 em {
  margin-left: 12px;
  color: #FFFFFF;
  font-style: italic;
  font-weight: 300;
}

.home-insights-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--warm-grey);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.home-insights-all span {
  transition: transform 180ms ease;
}

.home-insights-all:hover span {
  transform: translateX(4px);
}

.home-insights-all:hover {
  color: var(--gold-lt);
  border-bottom-color: rgba(212, 164, 56, 0.44);
}

.home-insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr);
  grid-template-rows: auto auto;
  align-items: start;
  gap: 14px;
  background: transparent;
}

.insight-journal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #15161D;
  color: var(--vellum);
  border: 1px solid rgba(255, 255, 255, 0.045);
  overflow: hidden;
  transition: border-color 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.insight-journal-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgba(212, 164, 56, 0.84);
  z-index: 2;
}

.insight-journal-card:hover {
  border-color: rgba(212, 164, 56, 0.16);
  transform: translateY(-2px);
}

.insight-journal-card.featured-main {
  grid-row: 1 / 3;
  align-self: start;
}

.insight-journal-image {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 110px;
  margin: 0;
  overflow: hidden;
  background: #101118;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.insight-journal-card.featured-main .insight-journal-image {
  flex: 0 0 auto;
  height: clamp(196px, 32vw, 328px);
}

.insight-journal-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(18%) brightness(0.9) contrast(1.04);
  transform: scale(1);
  transition: filter 520ms ease, transform 720ms ease;
}

.insight-journal-card:hover .insight-journal-image img {
  filter: grayscale(10%) brightness(1) contrast(1.03);
  transform: scale(1.035);
}

.insight-image-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.12) 56%, rgba(9, 9, 13, 0.34) 100%),
    linear-gradient(135deg, rgba(0, 0, 0, 0.1), transparent 48%);
  mix-blend-mode: normal;
}

.insight-journal-body {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  min-height: 0;
  padding: 16px 22px 14px;
  background: #171820;
  transition: background-color 220ms ease;
}

.insight-journal-card.featured-main .insight-journal-body {
  flex: 0 0 auto;
}

.insight-journal-card:hover .insight-journal-body {
  background: #54555F;
}

.side-card .insight-journal-body {
  min-height: 0;
  padding: 14px 20px 12px;
}

.insight-journal-tag {
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.46);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.insight-journal-card h3 {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-display);  font-size: 22px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.side-card h3 {
  font-size: 18px;
  line-height: 1.24;
  -webkit-line-clamp: 2;
}

.insight-journal-desc {
  margin: 8px 0 0;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--font-sans);  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.insight-journal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-sans);
  font-size: 12px;
}

.insight-journal-arrow {
  flex: 0 0 auto;
  color: rgba(212, 164, 56, 0.48);
  font-size: 18px;
  transition: transform 180ms ease;
}

.insight-journal-card:hover .insight-journal-arrow {
  color: var(--gold-lt);
  transform: translateX(4px);
}

@media (max-width: 1080px) {
  .home-insights-journal {
    padding: 56px 28px 60px;
  }

  .home-insights-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 16px;
  }

  .insight-journal-card.featured-main {
    grid-row: auto;
  }

  .insight-journal-card.featured-main .insight-journal-image {
    height: 200px;
  }

  .insight-journal-image {
    height: 110px;
  }
}

@media (max-width: 720px) {
  .home-insights-journal {
    padding: 48px 20px 52px;
  }

  .home-insights-head {
    display: grid;
    gap: 22px;
    margin-bottom: 28px;
  }

  .home-insights-grid {
    gap: 14px;
  }

  .home-insights-head h2 {
    font-size: 40px;
  }

  .home-insights-head h2 em {
    display: block;
    margin: 4px 0 0;
  }

  .insight-journal-card.featured-main .insight-journal-image,
  .insight-journal-image {
    height: 218px;
  }

  .insight-journal-body,
  .side-card .insight-journal-body {
    min-height: 0;
    padding: 26px 22px 24px;
  }

  .insight-journal-card h3,
  .side-card h3 {
    font-size: 24px;
  }

  .insight-journal-desc {
    font-size: 14px;
  }
}

@media (max-width: 1080px) {
  .main-nav {
    display: none;
    position: absolute;
    inset: 74px 0 auto 0;
    padding: 18px 20px 24px;
    background: rgba(9, 17, 29, 0.97);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    flex-direction: column;
    align-items: flex-start;
    white-space: normal;
  }

  .main-nav.open {
    display: flex;
  }

  .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-cta {
    display: none;
  }

  .hero-inner,
  .section-head,
  .editorial-grid,
  .dual-grid,
  .split-section,
  .form-grid,
  .cta-band .wrap {
    grid-template-columns: 1fr;
  }

  .product-console {
    max-width: 650px;
  }

  .evidence-grid,
  .six-grid,
  .module-grid,
  .industry-grid,
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .workflow {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .nav-shell {
    width: min(100% - 28px, var(--max));
  }

  .brand {
    min-width: 0;
  }

  .brand span {
    display: none;
  }

  .hero,
  .hero.page-hero {
    min-height: auto;
    padding: 118px 0 54px;
  }

  h1 {
    font-size: 34px;
    word-break: break-all;
  }

  .hero-lede {
    word-break: break-all;
  }

  .console-row {
    grid-template-columns: 1fr;
  }

  .hero-lede {
    font-size: 16px;
  }

  .hero-proof,
  .evidence-grid,
  .six-grid,
  .module-grid,
  .industry-grid,
  .article-grid,
  .workflow,
  .lead-form,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 66px 0;
  }

  .section-head h2,
  .cta-band h2 {
    font-size: 30px;
  }

  .quote-line {
    font-size: 22px;
  }

  .cta-band .wrap {
    gap: 20px;
  }
}

/* =============================================================
 * Magazine-lift additions
 * ============================================================= */

/* --- Editor's Brief --- */
.editor-brief {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start;
}

.editor-body {
  margin: 22px 0 0;
  color: var(--steel);
  font-size: 19px;
  max-width: 720px;
}

.editor-body strong {
  color: var(--orange);
}

.editor-tag {
  margin-top: 18px;
  color: var(--muted);
  font-style: italic;
  font-size: 14px;
}

.ask-agent {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow);
}

.ask-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px dashed var(--line);
}

.ask-row:first-of-type {
  border-top: 0;
  padding-top: 14px;
}

.ask-row > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
}

.ask-row p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}

/* --- Trade-Carbon Almanac --- */
.almanac {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.almanac-item {
  padding: 22px 20px;
  border-top: 2px solid var(--orange);
  background: var(--white);
  box-shadow: var(--shadow);
}

.almanac-item strong {
  display: block;
  color: var(--navy);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.12;
}

.almanac-item p {
  margin: 12px 0 0;
  color: var(--steel);
  font-size: 13px;
}

.almanac-item small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
}

/* --- Three Strategic Forces --- */
.strategic-forces {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.force {
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius);
}

.force h3 {
  margin-top: 12px;
  font-size: 24px;
  color: var(--white);
}

.force-claim {
  margin: 16px 0 18px;
  font-size: 17px;
  font-weight: 750;
  color: var(--amber);
  line-height: 1.4;
}

.force ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.force ul li {
  position: relative;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.55;
}

.force ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 1px;
  background: var(--orange);
}

.force-apply {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
}

.force-apply strong {
  color: var(--amber);
}

/* --- Workflow variants 鈥?different node counts --- */
.workflow.os-flow {
  grid-template-columns: repeat(8, 1fr);
}

.workflow.agent-chain {
  grid-template-columns: repeat(10, 1fr);
  margin-top: 34px;
}

.workflow.method-flow {
  grid-template-columns: repeat(6, 1fr);
}

.workflow.method-flow div {
  min-height: 168px;
}

.workflow.method-flow small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* --- Hero 4 trust pillars --- */
.hero-pillars {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.hero-pillars li {
  position: relative;
  padding-left: 16px;
}

.hero-pillars li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 1px;
  background: var(--amber);
}

.proof-item small {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}

/* --- Trade Exposure Map --- */
.trade-map {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.trade-route {
  padding: 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius);
  background: var(--white);
}

.trade-route h3 {
  font-size: 20px;
  color: var(--navy);
}

.trade-route p {
  margin: 14px 0;
  color: var(--steel);
  font-size: 14px;
  line-height: 1.6;
}

.trade-route small {
  color: var(--muted);
  font-size: 12px;
}

/* --- Carbon Market Watch --- */
.market-watch {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  overflow: hidden;
}

.market-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.5fr;
  gap: 22px;
  align-items: center;
  padding: 18px 24px;
  background: rgba(12, 23, 38, 0.94);
}

.market-name strong {
  display: block;
  color: var(--white);
  font-size: 17px;
  font-weight: 750;
}

.market-name span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.market-trend {
  color: var(--amber);
  font-weight: 700;
  font-size: 14px;
}

.market-note {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.dark .source-note {
  color: rgba(255, 255, 255, 0.48);
}

/* --- Industry cards --- */
.industry-card {
  display: block;
  padding: 32px 28px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius);
  color: var(--ink);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.industry-card:hover {
  transform: translateY(-4px);
  border-color: var(--orange);
  box-shadow: var(--shadow);
}

.industry-en {
  display: block;
  color: var(--orange);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.industry-card h3 {
  margin-top: 8px;
  font-size: 24px;
  color: var(--navy);
}

.industry-card p {
  margin: 14px 0 18px;
  color: var(--steel);
  font-size: 14px;
  line-height: 1.6;
}

.industry-cta {
  color: var(--cyan-dark);
  font-size: 13px;
  font-weight: 700;
}

/* --- Industry sub-page hero + pains ---
 * The hero h1 must remain the largest type on the page; a flat 40px let the
 * section h2 (52px) outrank it and inverted the whole hierarchy. */
.industry-hero h1 {
  font-size: clamp(38px, calc(20px + 3.6vw), 76px);
}

.industry-pains {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

/* --- Whitepaper chapter + roadmap --- */
.chapter-card .lane-number {
  color: var(--cyan-dark);
  font-size: 20px;
}

.roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.roadmap-phase {
  padding: 28px;
  border-top: 3px solid var(--orange);
  background: var(--white);
  box-shadow: var(--shadow);
}

.roadmap-phase h3 {
  color: var(--navy);
  font-size: 22px;
}

.roadmap-phase ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.roadmap-phase li {
  position: relative;
  padding-left: 16px;
  color: var(--steel);
  font-size: 14px;
}

.roadmap-phase li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 1px;
  background: var(--orange);
}

/* --- Closing CTA --- */
.cta-band.closing-cta {
  padding: 110px 0;
}

.closing-cta .wrap {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.closing-cta h2 {
  font-size: 38px;
  line-height: 1.2;
}

.closing-cta p {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  font-size: 15px;
}

.closing-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 240px;
}

/* --- Magazine columns subtitle --- */
.six-grid.magazine {
  grid-template-columns: repeat(3, 1fr);
}

.six-grid.magazine .lane h3 {
  margin-top: 12px;
  font-size: 22px;
  line-height: 1.32;
}

.muted-sub {
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

/* --- Responsive overrides for new sections --- */
@media (max-width: 1080px) {
  .almanac {
    grid-template-columns: repeat(3, 1fr);
  }

  .strategic-forces,
  .roadmap,
  .industry-pains,
  .trade-map {
    grid-template-columns: 1fr;
  }

  .workflow.os-flow,
  .workflow.agent-chain,
  .workflow.method-flow {
    grid-template-columns: repeat(2, 1fr);
  }

  .market-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .editor-brief {
    grid-template-columns: 1fr;
  }

  .closing-cta .wrap {
    grid-template-columns: 1fr;
  }

  .six-grid.magazine {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .almanac {
    grid-template-columns: 1fr;
  }

  .six-grid.magazine {
    grid-template-columns: 1fr;
  }

  .industry-card h3 {
    font-size: 22px;
  }

  .closing-cta h2 {
    font-size: 28px;
  }

  .closing-actions {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }
}

/* =============================================================
 * V2 鈥?Top-Tier Magazine Lift (Verdict / Doors / Editor / Magazine cards)
 * ============================================================= */

/* --- Nav dropdown groups (Industries / Insights) --- */
.nav-group {
  position: relative;
}

.nav-group > .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 0;
  color: var(--silver);
  border-bottom: 1px solid transparent;
  cursor: pointer;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font: inherit;
}

.nav-group > .nav-trigger::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.7;
  transition: transform 0.18s ease;
}

.nav-group:hover > .nav-trigger,
.nav-group:focus-within > .nav-trigger,
.nav-group.active > .nav-trigger {
  color: var(--platinum);
  border-bottom-color: var(--gold-lt);
}

.nav-group:hover > .nav-trigger::after,
.nav-group:focus-within > .nav-trigger::after {
  transform: rotate(225deg) translateY(2px);
}

.nav-menu {
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  transform: translateX(-50%) translateY(-6px);
  min-width: 280px;
  padding: 14px 0;
  background: rgba(6, 7, 10, 0.96);
  border: 1px solid rgba(212, 164, 56, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48);
  border-radius: 4px;
  display: grid;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease;
  backdrop-filter: blur(20px);
  z-index: 30;
}

.nav-group:hover > .nav-menu,
.nav-group:focus-within > .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-menu a {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 10px 22px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  border-bottom: 0;
  white-space: nowrap;
}

.nav-menu a:hover,
.nav-menu a:focus {
  background: rgba(255, 255, 255, 0.05);
  color: var(--vellum);
}

.nav-menu a span:first-child {
  color: var(--platinum);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.nav-menu a span:last-child {
  color: inherit;
}

.nav-menu a small {
  display: block;
  grid-column: 2;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.40);
  font-size: 11px;
}

/* --- Hero verdict 鈥?single-thesis editorial layout --- */
.hero.verdict-hero {
  min-height: 100svh;
  padding: 168px 0 100px;
}

.hero.verdict-hero .hero-inner {
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
}

.verdict-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
}

.verdict-eyebrow::before {
  content: "";
  width: 56px;
  height: 1px;
  background: var(--amber);
}

.verdict-h1 {
  max-width: 900px;
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.18;
  color: var(--white);
}

.verdict-h1 em {
  font-style: italic;
  color: var(--amber);
}

.verdict-sub {
  margin-top: 28px;
  max-width: var(--max-readable);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.55;
  font-style: italic;
}

.verdict-sub-en {
  margin-top: 16px;
  max-width: var(--max-readable);
  color: rgba(255, 255, 255, 0.54);
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  font-style: italic;
}

/* Verdict deadline strip 鈥?3 hard dates */
.verdict-deadlines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 920px;
}

.verdict-deadlines .deadline {
  display: grid;
  gap: 8px;
}

.verdict-deadlines time {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--deadline);
}

.verdict-deadlines strong {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
}

.verdict-deadlines small {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

/* The middle deadline ("CBAM Certificate 鐪熸浠橀挶鏃?) is the most painful
 * one for chairmen 鈥?give it a faint amber underline so the eye lands there. */
.verdict-deadlines .deadline-accent strong {
  position: relative;
  padding-bottom: 6px;
}
.verdict-deadlines .deadline-accent strong::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--deadline);
}
.verdict-deadlines .deadline-accent strong em {
  display: block;
  margin-top: 4px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0;
}

.verdict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 44px;
}

/* --- Brand Statement 鈥?McKinsey-style centered mission block --- */
.brand-statement {
  background: #0a1628;
  padding: clamp(80px, 12vw, 160px) 0 clamp(48px, 6vw, 80px);
  text-align: center;
}

.brand-statement .wrap {
  max-width: 960px;
}

.brand-statement-text {
  font-family: var(--font-serif, Georgia, "Times New Roman", serif);
  font-size: clamp(22px, 2.8vw, 38px);
  line-height: 1.52;
  font-weight: 400;
  font-style: italic;
  color: rgba(255, 255, 255, 0.90);
  letter-spacing: -0.005em;
  margin: 0;
}

.brand-statement-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
}

.brand-nav-label {
  color: rgba(255, 255, 255, 0.50);
  margin-right: 8px;
}

.brand-statement-nav a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  padding: 4px 0;
  transition: color 0.2s;
}

.brand-statement-nav a:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

.brand-nav-sep {
  margin: 0 10px;
  color: rgba(255, 255, 255, 0.25);
  user-select: none;
}

@media (max-width: 720px) {
  .brand-statement-text {
    font-size: clamp(18px, 5vw, 26px);
    line-height: 1.48;
  }
  .brand-statement-nav {
    gap: 4px 0;
  }
  .brand-nav-sep {
    margin: 0 6px;
  }
}

/* --- Trust strip 鈥?6 institutions hairline bar --- */
.trust-strip {
  padding: 26px 0;
  background: var(--obsidian);
  border-top: var(--hairline-gold);
  border-bottom: var(--hairline-gold);
}

.trust-strip .wrap {
  display: grid;
  grid-template-columns: minmax(260px, 0.6fr) 1fr;
  gap: 36px;
  align-items: center;
}

.trust-strip-label {
  font-family: var(--font-serif);
  font-size: 12px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.02em;
}

.trust-strip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-strip-list li {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.005em;
}

.trust-strip-list li + li {
  position: relative;
  padding-left: 28px;
}

.trust-strip-list li + li::before {
  content: "路";
  position: absolute;
  left: 8px;
  color: rgba(255, 255, 255, 0.22);
}

/* --- Trust-strip 2nd row: "Trusted by 浼佷笟" anonymized client silhouettes ---
 * Until clients sign logo-use rights, we show a row of tag-shaped silhouettes
 * (industry + scale + region) instead of bitmap logos. */
.trust-strip-2row {
  padding: 22px 0 26px;
}

.trust-strip-2row .wrap {
  grid-template-columns: 1fr;
  gap: 18px;
}

.trust-row {
  display: grid;
  grid-template-columns: minmax(260px, 0.6fr) 1fr;
  gap: 36px;
  align-items: center;
}

.trust-row-clients {
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}

.trust-clients {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-client {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding: 8px 0;
}

.client-silhouette {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  background: var(--navy);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.client-silhouette::before,
.client-silhouette::after {
  content: "";
  position: absolute;
  background: var(--mist);
  opacity: 0.35;
}
.client-silhouette::before {
  left: 4px; right: 4px;
  top: 14px; height: 2px;
}
.client-silhouette::after {
  left: 4px; right: 4px;
  top: 20px; height: 2px;
  opacity: 0.22;
}

.client-tag {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.005em;
  line-height: 1.2;
}

.client-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

@media (max-width: 920px) {
  .trust-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* --- Doors block 鈥?4 destination cards after hero --- */
.doors-section {
  padding: 96px 0 32px;
  background: var(--paper);
}

.doors-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 36px;
}

.doors-head h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--navy);
  max-width: 540px;
  letter-spacing: -0.012em;
}

.doors-head .doors-eyebrow {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}

.doors-head .doors-aside {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--muted);
  font-size: 14px;
  max-width: 280px;
  text-align: right;
}

.doors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.door-card {
  display: grid;
  align-content: space-between;
  gap: 16px;
  padding: 36px 28px 32px;
  background: var(--white);
  color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease;
  min-height: 280px;
}

.door-card:hover {
  background: var(--navy);
  color: var(--white);
}

.door-card:hover .door-num,
.door-card:hover .door-cue {
  color: var(--amber);
}

.door-card:hover .door-meta {
  color: rgba(255, 255, 255, 0.6);
}

.door-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--orange);
}

.door-cue {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--steel);
  line-height: 1.45;
  transition: color 0.2s ease;
}

.door-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.12;
}

.door-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(13, 21, 32, 0.10);
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.door-card:hover .door-meta {
  border-top-color: rgba(255, 255, 255, 0.18);
}

.door-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.door-card:hover .door-arrow {
  transform: translateX(4px);
}

/* --- Editor's Note 鈥?single column editorial pull-quote --- */
.editor-note .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
  gap: 60px;
}

.editor-note .editor-meta {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--orange);
  border-top: 2px solid var(--ink);
  padding-top: 16px;
}

.editor-note .editor-meta small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.editor-quote {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.22;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.012em;
  max-width: var(--max-readable);
}

.editor-quote em {
  font-style: italic;
  color: var(--orange);
}

.editor-prose {
  margin-top: 28px;
  max-width: var(--max-readable);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
}

.editor-prose + .editor-prose {
  margin-top: 18px;
}

.editor-prose strong {
  color: var(--ink);
  font-weight: 600;
}

.editor-citations {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: var(--hairline);
  list-style: none;
  padding-left: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.editor-citations sup {
  color: var(--orange);
  font-weight: 700;
  margin-right: 6px;
}

/* --- Almanac V2 鈥?slim numerals row --- */
.almanac-v2 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.almanac-v2 .cell {
  padding: 32px 22px 28px;
  background: var(--white);
  display: grid;
  align-content: start;
  gap: 14px;
}

.almanac-v2 .cell strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.05;
  color: var(--navy);
  letter-spacing: -0.018em;
}

.almanac-v2 .cell p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--steel);
}

.almanac-v2 .cell small {
  margin-top: auto;
  padding-top: 12px;
  border-top: var(--hairline);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- OS Map 鈥?operating system spine, single big diagram --- */
.os-map {
  margin-top: 18px;
  display: grid;
  gap: 36px;
}

.os-spine {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.os-node {
  position: relative;
  padding: 30px 18px 28px;
  border-right: 1px solid var(--line);
  text-align: left;
}

.os-node:last-child {
  border-right: 0;
}

.os-node .node-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--orange);
}

.os-node .node-label {
  display: block;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.008em;
  line-height: 1.25;
}

.os-node .node-module {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.45;
}

.os-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding-top: 18px;
}

.os-callout p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--steel);
}

.os-callout .os-cta {
  align-self: end;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-dark);
}

.os-callout .os-cta::after {
  content: "鈫?;
  font-family: var(--font-sans);
  font-size: 16px;
  transition: transform 0.2s ease;
}

.os-callout .os-cta:hover::after {
  transform: translateX(4px);
}

/* --- Industry Magazine cards (cover-style 8 industries) --- */
.industry-magazine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.mag-card {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 24px;
  padding: 36px 28px 32px;
  min-height: 320px;
  background: var(--white);
  color: var(--ink);
  transition: background 0.25s ease, color 0.25s ease;
  overflow: hidden;
}

.mag-card:nth-child(odd) {
  background: var(--pure);
}

.mag-card:hover {
  background: var(--navy);
  color: var(--white);
}

.mag-card:hover .mag-num,
.mag-card:hover .mag-cta {
  color: var(--amber);
}

.mag-card:hover .mag-en,
.mag-card:hover .mag-strategy {
  color: rgba(255, 255, 255, 0.66);
}

.mag-card:hover .mag-meta {
  border-top-color: rgba(255, 255, 255, 0.18);
}

.mag-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--orange);
}

.mag-en {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.mag-card h3 {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.05;
}

.mag-strategy {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--steel);
  max-width: 92%;
}

.mag-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: var(--hairline);
}

.mag-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-dark);
}

.mag-arrow {
  font-family: var(--font-sans);
  font-size: 18px;
  color: inherit;
  transition: transform 0.2s ease;
}

.mag-card:hover .mag-arrow {
  transform: translateX(4px);
}

/* --- Method spine V2 (6 step horizontal) --- */
.method-spine {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.method-spine .step {
  position: relative;
  padding: 32px 22px 30px;
  border-right: 1px solid var(--line);
  display: grid;
  align-content: start;
  gap: 14px;
}

.method-spine .step:last-child {
  border-right: 0;
}

.method-spine .step .step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--orange);
}

.method-spine .step .step-en {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--navy);
  line-height: 1.05;
}

.method-spine .step .step-zh {
  color: var(--steel);
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.method-spine .step .step-text {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--steel);
}

/* =============================================================
 * P0 (May 14) 鈥?Homepage swagger layer
 *
 *   .mag-served       鈥?industry card "宸叉湇鍔?X 瀹? stat row
 *   .method-rail      鈥?collapsed 6-step verb spine (homepage)
 *   .dual-teaser      鈥?white paper + monthly issue side-by-side
 *   .os-personas      鈥?4 working surfaces (homepage osMap replacement)
 *   .magazine-calendar 鈥?magazine.html 12-issue annual grid
 * ============================================================= */

/* --- Industry served stat row (industryFilesIndex) --- */
.mag-served {
  display: grid;
  grid-template-columns: 8px auto auto;
  align-items: baseline;
  column-gap: 10px;
  margin: 14px 0 18px;
  padding: 10px 12px 10px 10px;
  background: var(--paper);
  border-left: 2px solid var(--deadline);
}

.mag-served-dot {
  width: 6px;
  height: 6px;
  background: var(--deadline);
  border-radius: 50%;
  align-self: center;
}

.mag-served-zh {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.005em;
}

.mag-served-en {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 720px) {
  .mag-served {
    grid-template-columns: 8px 1fr;
  }
  .mag-served-en {
    grid-column: 2;
  }
}

/* --- Homepage method rail 鈥?verb-only (collapsed) --- */
.method-section-collapsed { padding: 80px 0; }

.method-rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: 36px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.rail-step {
  padding: 22px 18px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 4px;
  border-right: 1px solid var(--line);
  background: var(--white);
  transition: background 0.18s ease;
}

.rail-step:last-child { border-right: 0; }
.rail-step:hover { background: var(--paper); }

.rail-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mist);
}

.rail-en {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.005em;
}

.rail-zh {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--steel);
}

.method-cta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

@media (max-width: 920px) {
  .method-rail {
    grid-template-columns: repeat(3, 1fr);
  }
  .rail-step:nth-child(3n) { border-right: 0; }
  .rail-step:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 520px) {
  .method-rail { grid-template-columns: repeat(2, 1fr); }
  .rail-step { border-right: 1px solid var(--line) !important; }
  .rail-step:nth-child(2n) { border-right: 0 !important; }
}

/* --- Dual teaser: white paper + monthly issue --- */
.dual-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 36px;
}

.teaser-card {
  position: relative;
  padding: 28px 28px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.teaser-whitepaper { background: var(--white); }
.teaser-magazine   { background: var(--paper); border-color: var(--navy); }

.teaser-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}

.teaser-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
}

.teaser-tag-mono { color: var(--deadline); }

.teaser-stripe {
  width: 48px;
  height: 4px;
  background: var(--deadline);
}

.teaser-pulse {
  display: inline-flex;
  gap: 4px;
}
.teaser-pulse .pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--deadline);
  border-radius: 50%;
  animation: pulse-fade 1.4s ease-in-out infinite;
}
.teaser-pulse .pulse-dot:nth-child(2) { animation-delay: 0.2s; }
.teaser-pulse .pulse-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse-fade {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

.teaser-card h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

.teaser-sub {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--steel);
  margin: 0 0 18px;
}

.mag-columns-list,
.wp-chapters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--steel);
  flex: 1;
}

.mag-columns-list li,
.wp-chapters li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: baseline;
}

.mag-columns-list strong,
.wp-chapters strong {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--navy);
  text-transform: uppercase;
}

.teaser-foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.teaser-foot-en {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

@media (max-width: 920px) {
  .dual-teaser {
    grid-template-columns: 1fr;
  }
}

/* --- OS Personas 鈥?4 working surfaces (homepage osMap v2) --- */
.os-personas-section { padding: 96px 0; }

.os-personas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 40px;
  border: 1px solid var(--line);
}

.persona-card {
  padding: 28px 24px 26px;
  background: var(--white);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 0.18s ease;
}

.persona-card:last-child { border-right: 0; }
.persona-card:hover { background: var(--paper); }

.persona-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.persona-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.persona-titles {
  display: grid;
  gap: 2px;
}

.persona-role {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.005em;
}

.persona-role-en {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.persona-question {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.45;
  font-style: italic;
  color: var(--ink);
  margin: 0;
}

.persona-question em {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--deadline);
  font-size: 18px;
  font-weight: 700;
  margin: 0 2px;
}

.persona-gets {
  font-size: 13px;
  line-height: 1.55;
  color: var(--steel);
  margin: 0;
  flex: 1;
}

.persona-gets small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.persona-metric {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
}

.persona-metric-dot {
  color: var(--deadline);
  font-size: 11px;
}

.persona-metric-text {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}

@media (max-width: 920px) {
  .os-personas {
    grid-template-columns: repeat(2, 1fr);
  }
  .persona-card:nth-child(2n) { border-right: 0; }
  .persona-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 520px) {
  .os-personas { grid-template-columns: 1fr; }
  .persona-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .persona-card:last-child { border-bottom: 0; }
}

/* --- Magazine annual calendar (magazine.html) --- */
.magazine-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  margin-top: 36px;
  background: var(--line);
  border: 1px solid var(--line);
  gap: 1px;
}

.cal-issue {
  padding: 22px 20px 20px;
  background: var(--white);
  display: grid;
  gap: 12px;
  position: relative;
}

.cal-issue-past    { opacity: 0.72; }
.cal-issue-current { background: var(--paper); }
.cal-issue-current::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--deadline);
}

.cal-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.cal-num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.cal-meta time {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.cal-issue h3 {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.cal-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cal-issue-current .cal-status {
  color: var(--deadline);
  font-weight: 700;
}

/* --- Closing Briefing 鈥?editorial sign-off --- */
.closing-briefing {
  padding: 140px 0 120px;
  background: var(--ink);
  color: var(--white);
}

.closing-briefing .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: 80px;
  align-items: end;
}

.closing-briefing .closing-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  border-top: 1px solid rgba(255, 255, 255, 0.34);
  padding-top: 18px;
}

.closing-briefing h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--white);
}

.closing-briefing .closing-prose {
  margin-top: 26px;
  max-width: var(--max-readable);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.closing-briefing .closing-actions {
  display: grid;
  gap: 12px;
  min-width: 280px;
}

.closing-briefing .button {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
}

.closing-briefing .button.ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.34);
}

.closing-briefing .button.ghost:hover {
  border-color: var(--amber);
  color: var(--amber);
}

/* --- V2 responsive --- */
@media (max-width: 1080px) {
  .doors,
  .industry-magazine,
  .almanac-v2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .doors-head,
  .editor-note .wrap,
  .closing-briefing .wrap,
  .trust-strip .wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .doors-head .doors-aside {
    text-align: left;
    max-width: 100%;
  }

  .verdict-deadlines {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .os-spine,
  .method-spine {
    grid-template-columns: repeat(2, 1fr);
  }

  .os-node,
  .method-spine .step {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .os-callout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .os-callout .os-cta {
    justify-self: start;
  }

  .nav-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: rgba(255, 255, 255, 0.04);
    border: 0;
    box-shadow: none;
    margin-top: 8px;
    width: 100%;
  }

  .nav-group > .nav-trigger::after {
    display: none;
  }
}

@media (max-width: 720px) {
  .doors,
  .industry-magazine,
  .almanac-v2 {
    grid-template-columns: 1fr;
  }

  .hero.verdict-hero {
    padding: 130px 0 64px;
  }

  .verdict-h1 {
    font-size: clamp(34px, 8vw, 44px);
  }

  .editor-quote {
    font-size: 24px;
  }

  .mag-card h3 {
    font-size: 28px;
  }

  .closing-briefing {
    padding: 90px 0;
  }
}

/* =============================================================
 * Consulting V2 鈥?The Boardroom (Page 3)
 * Voice anchor: "Reports expire. Systems compound."
 * ============================================================= */

/* Hero 鈥?slightly more institutional than Home (deliverable pills) */
.hero.consulting-hero {
  padding: 168px 0 96px;
}

.hero.consulting-hero::after {
  background:
    linear-gradient(90deg, rgba(7, 12, 20, 0.96), rgba(9, 16, 26, 0.82) 50%, rgba(9, 16, 26, 0.42) 88%),
    linear-gradient(0deg, rgba(7, 12, 20, 0.92), rgba(7, 12, 20, 0.10) 48%);
}

.hero-product-strategy-ai::after {
  background:
    linear-gradient(90deg, rgba(9, 16, 24, 0.94), rgba(11, 17, 28, 0.76) 47%, rgba(11, 17, 28, 0.34) 82%),
    linear-gradient(0deg, rgba(5, 8, 12, 0.90), rgba(5, 8, 12, 0.18) 52%);
}

.consulting-lede {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.82);
  max-width: var(--max-readable);
}

.consulting-lede strong {
  color: var(--amber);
  font-weight: 600;
}

/* 3 deliverable pills under hero (Strategy / System / Runtime) */
.deliverable-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 44px;
  max-width: 760px;
}

.deliverable-pills .pill {
  padding: 22px 22px 20px;
  border-top: 2px solid var(--amber);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}

.deliverable-pills .pill strong {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--white);
}

.deliverable-pills .pill span {
  display: block;
  margin-top: 4px;
  color: var(--amber);
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.deliverable-pills .pill small {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12.5px;
  line-height: 1.55;
}

/* 搂2 Service Charters 鈥?McKinsey-style 6 project charters */
.service-charters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.charter {
  padding: 36px 32px 28px;
  background: var(--white);
  display: grid;
  align-content: space-between;
  gap: 24px;
}

.charter-head {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: start;
  gap: 18px;
}

.charter-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: var(--orange);
  line-height: 1;
  letter-spacing: -0.02em;
}

.charter-en {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.charter-head h3 {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.014em;
  line-height: 1.15;
}

.charter-body {
  display: grid;
  gap: 16px;
}

.charter-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: start;
  padding: 14px 0;
  border-top: var(--hairline);
}

.charter-row:first-child {
  padding-top: 4px;
  border-top: 0;
}

.charter-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.charter-label small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.charter-row p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--steel);
}

.charter-foot {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* 搂4 Big-4 Comparison Table 鈥?7-row 3-col, dramatic side-by-side */
.bigfour-table {
  margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  overflow: hidden;
}

.bigfour-row {
  display: grid;
  grid-template-columns: 0.55fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  align-items: stretch;
}

.bigfour-row:first-child {
  border-top: 0;
}

.bigfour-row > div {
  padding: 22px 26px;
  display: flex;
  align-items: center;
}

.bigfour-row .cell-key {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  background: rgba(0, 0, 0, 0.26);
  letter-spacing: -0.005em;
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}

.bigfour-row .cell-old {
  color: rgba(255, 255, 255, 0.50);
  font-family: var(--font-serif);
  font-size: 15px;
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}

.bigfour-row .cell-old s {
  text-decoration-color: rgba(200, 74, 42, 0.8);
  text-decoration-thickness: 2px;
}

.bigfour-row .cell-new {
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  background: rgba(216, 117, 44, 0.12);
  border-left: 2px solid var(--amber);
}

.bigfour-row .cell-new strong {
  color: var(--amber);
}

.bigfour-head .cell-key,
.bigfour-head .cell-old,
.bigfour-head .cell-new {
  padding-top: 18px;
  padding-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(0, 0, 0, 0.34);
  border-bottom: 1px solid var(--amber);
}

.bigfour-head .cell-new {
  color: var(--amber);
}

/* 搂5 Boardroom Brief Mock 鈥?A4-aspect inline mockup */
.boardroom-mock {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 32px 80px rgba(16, 27, 45, 0.12);
  border-radius: 4px;
  overflow: hidden;
}

.mock-cover {
  padding: 36px 40px 32px;
  background: linear-gradient(135deg, #0d1726, #182740);
  color: var(--white);
}

.mock-cover-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.mock-org {
  color: var(--amber);
}

.mock-conf {
  color: var(--deadline);
}

.mock-title {
  margin: 14px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.06;
}

.mock-summary {
  margin: 0;
  max-width: 720px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.mock-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}

.mock-panel {
  padding: 28px 30px 24px;
  background: var(--white);
}

.mock-panel h4 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.005em;
}

/* Heatmap 鈥?5 products x 4 markets */
.heatmap {
  display: grid;
  gap: 4px;
}

.heat-corner {
  background: transparent;
}

.heat-col {
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 4px;
}

.heat-row-label {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink);
  text-align: right;
  padding-right: 10px;
  align-self: center;
}

.heat-cell {
  height: 26px;
  border-radius: 2px;
  background: var(--line);
}

.heat-0 { background: #d4e7d8; }
.heat-1 { background: #f1d68a; }
.heat-2 { background: #e9a04a; }
.heat-3 { background: #c84a2a; }

.heat-legend {
  display: flex;
  gap: 16px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.heat-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.heat-legend .heat-cell {
  width: 16px;
  height: 12px;
  border-radius: 2px;
}

/* Waterfall 鈥?bars with positive/negative tracks */
.waterfall {
  display: grid;
  gap: 14px;
}

.bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 56px;
  gap: 14px;
  align-items: center;
}

.bar-label {
  font-size: 12.5px;
  color: var(--steel);
}

.bar-track {
  position: relative;
  height: 12px;
  background: var(--paper);
  border-radius: 2px;
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  background: var(--cyan);
  border-radius: 2px;
}

.bar-base .bar-fill { background: var(--navy); }
.bar-pos  .bar-fill { background: #4a7e5e; }
.bar-neg  .bar-fill { background: var(--deadline); }

.bar-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bar-base .bar-val { color: var(--navy); }
.bar-pos  .bar-val { color: #4a7e5e; }
.bar-neg  .bar-val { color: var(--deadline); }

.bar-foot {
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* Priority list at bottom of mock */
.mock-priority {
  border-top: 1px solid var(--line);
}

.priority-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.priority-list li {
  display: grid;
  grid-template-columns: 36px 1fr 96px;
  gap: 16px;
  align-items: start;
  padding: 14px 0;
  border-top: var(--hairline);
}

.priority-list li:first-child {
  padding-top: 4px;
  border-top: 0;
}

.prio-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--orange);
  line-height: 1;
  letter-spacing: -0.012em;
}

.priority-list li strong {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.priority-list li p {
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--steel);
  line-height: 1.5;
}

.prio-when {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cyan-dark);
  text-align: right;
  text-transform: uppercase;
}

.mock-foot {
  padding: 16px 30px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* 搂6 Briefing CTA 鈥?extends closing-briefing with extra trust line */
.briefing-trust {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  max-width: var(--max-readable);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.58);
  text-transform: uppercase;
}

/* h2 em accent for consulting */
.bigfour-table + p,
.consulting-hero h1 em,
.section-head h2 em {
  font-style: italic;
  color: var(--amber);
}

.section.dark .section-head h2 em { color: var(--amber); }
.section.white      .section-head h2 em,
.section.alt        .section-head h2 em,
.section.pure       .section-head h2 em,
.section.bone       .section-head h2 em,
.section.paper-cool .section-head h2 em { color: var(--orange); }

/* Consulting V2 responsive */
@media (max-width: 1080px) {
  .service-charters {
    grid-template-columns: 1fr;
  }

  .deliverable-pills {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .bigfour-row {
    grid-template-columns: 1fr;
  }

  .bigfour-row > div {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .bigfour-row .cell-old { border-bottom-color: rgba(255, 255, 255, 0.08); }
  .bigfour-row .cell-new { border-left: 0; border-top: 1px solid var(--amber); }

  .mock-grid {
    grid-template-columns: 1fr;
  }

  .priority-list li {
    grid-template-columns: 36px 1fr;
  }

  .prio-when {
    grid-column: 2 / 3;
    text-align: left;
    margin-top: 4px;
  }
}

@media (max-width: 720px) {
  .charter-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .charter-label {
    font-size: 12px;
  }

  .mock-cover {
    padding: 24px 22px 22px;
  }

  .mock-panel {
    padding: 22px;
  }

  .heat-row-label {
    font-size: 11px;
  }

  .bar-row {
    grid-template-columns: 88px 1fr 48px;
    gap: 8px;
  }
}

/* ============================================================
 * v3 鈥?Architecture additions
 *   - .verdict-grid + .platform-pulse  (Hero right rail)
 *   - .doors-5 + .door-tags             (5 doors with module + service tags)
 *   - .trust-pillars-section            (mid-page 6-pillar credibility strip)
 *   - .deliverables                     (4-card deliverables gallery + minis)
 *   - .mag-chain                        (industry card 3-step chain hint)
 *   - .os-cta-row                       (dual-engine OS Map CTAs)
 *   - .consulting-hub                   (Consulting hero universal-link strip)
 *   - .wp-teaser                        (homepage whitepaper teaser)
 *   - .form-section-label               (consultation form section dividers)
 * ============================================================ */

/* ---- Hero right rail: Platform Pulse ---- */
.hero.verdict-hero .verdict-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: 56px;
  align-items: center;
  width: 100%;
}

.platform-pulse {
  background: rgba(11, 14, 17, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 22px 22px 18px;
  color: var(--ink-on-dark);
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 13px;
  letter-spacing: 0.01em;
  border-radius: 0;
}

.platform-pulse .pulse-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  padding-bottom: 10px;
}

.platform-pulse .pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber, #d97706);
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.18);
  animation: pulseDot 2.4s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.42; }
}

.platform-pulse .pulse-rows {
  display: flex; flex-direction: column;
}

.platform-pulse .pulse-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}

.platform-pulse .pulse-row:last-of-type { border-bottom: 0; }

.platform-pulse .pulse-k {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.platform-pulse .pulse-v {
  font-weight: 600;
  color: #fff;
  font-feature-settings: "tnum" 1;
}

.platform-pulse .pulse-v small {
  color: rgba(255, 255, 255, 0.50);
  font-weight: 400;
  margin-left: 3px;
  font-size: 10px;
}

.platform-pulse .pulse-row-sum {
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 0;
  padding-top: 12px;
}

.platform-pulse .pulse-row-sum .pulse-v {
  color: var(--amber, #f59e0b);
}

.platform-pulse .pulse-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.54);
}

.platform-pulse .pulse-foot a {
  color: var(--amber, #f59e0b);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---- Door additions: 5 cols + module/service tags ---- */
.doors.doors-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--ink-3, #d6d3cf);
  border-bottom: 1px solid var(--ink-3, #d6d3cf);
}

.doors.doors-5 .door-card {
  border-right: 1px solid var(--ink-3, #d6d3cf);
  padding: 28px 22px 26px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

.doors.doors-5 .door-card:last-child { border-right: 0; }

.door-tags {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 14px;
}

.door-tag {
  display: inline-block;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.01em;
  line-height: 1.45;
  padding: 4px 8px 5px;
  border-radius: 0;
  border: 1px solid currentColor;
}

.door-tag.tag-platform {
  color: #475569;
  border-color: rgba(71, 85, 105, 0.32);
  background: rgba(71, 85, 105, 0.05);
}

.door-tag.tag-consult {
  color: var(--orange, #c2410c);
  border-color: rgba(194, 65, 12, 0.30);
  background: rgba(194, 65, 12, 0.04);
}

.doors-section h3 em {
  color: var(--orange, #c2410c);
  font-style: italic;
  font-weight: 500;
  font-family: var(--font-serif, Georgia, serif);
}

/* ---- Trust Pillars (mid-page) ---- */
/* trust-pillars uses the new --bone token so it joins the unified rhythm. */
.trust-pillars-section { background: var(--bone); }

.trust-pillars {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--ink-3, #d6d3cf);
  border-bottom: 1px solid var(--ink-3, #d6d3cf);
  margin-top: 36px;
}

.trust-pillars .pillar {
  padding: 28px 22px 26px;
  border-right: 1px solid var(--ink-3, #d6d3cf);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trust-pillars .pillar:last-child { border-right: 0; }

.trust-pillars .pillar-num {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-5, #57534e);
  font-weight: 600;
}

.trust-pillars .pillar h4 {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ink-7, #1c1917);
  margin: 0;
}

.trust-pillars .pillar h4 small {
  display: block;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink-5, #57534e);
  text-transform: uppercase;
  margin-top: 4px;
}

.trust-pillars .pillar p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-6, #44403c);
  margin: 0;
}

/* ---- Deliverables Gallery ---- */
.deliverables-section { background: var(--bone); }

.deliverables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--ink-3, #d6d3cf);
  border: 1px solid var(--ink-3, #d6d3cf);
  margin-top: 36px;
}

.deliverable-card {
  border-right: 0;
  padding: 0;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  background: #fff;
  transition: background 220ms ease;
}

.deliverable-card:hover { background: var(--ink-1, #fafaf9); }

.deliverable-card .deliv-header {
  padding: 18px 22px 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.deliv-tag {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--orange, #c2410c);
  border: 1px solid var(--orange, #c2410c);
  padding: 2px 6px 3px;
}

.deliv-en {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-5, #57534e);
}

.deliv-mock {
  margin: 18px 22px 14px;
  height: 124px;
  background: var(--ink-1, #fafaf9);
  border: 1px solid var(--ink-2, #e7e5e4);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 14px;
  position: relative;
}

.deliv-body {
  padding: 4px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.deliv-body h3 {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ink-7, #1c1917);
  margin: 6px 0 8px;
}

.deliv-body p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-6, #44403c);
  flex: 1;
}

/* The "brag unit" on each card 鈥?one hard number a chairman would read.
 * ZH lead + EN sub on a hairline-bordered slab. No emoji, no green. */
.deliv-metric {
  margin-top: 14px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 14px 1fr;
  column-gap: 10px;
  row-gap: 2px;
  align-items: baseline;
  background: var(--paper);
  border-left: 2px solid var(--deadline);
}

.deliv-metric-bullet {
  grid-row: 1 / span 2;
  align-self: start;
  color: var(--deadline);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0;
}

.deliv-metric-zh {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.005em;
  line-height: 1.3;
}

.deliv-metric-en {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.deliv-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--ink-3, #d6d3cf);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-5, #57534e);
  text-transform: uppercase;
}

.deliv-arrow {
  color: var(--orange, #c2410c);
  font-weight: 700;
  font-size: 14px;
}

.deliverables-section h2 em {
  color: var(--orange, #c2410c);
  font-style: italic;
  font-weight: 500;
  font-family: var(--font-serif, Georgia, serif);
}

/* ---- Mini deliverable mockups (CSS only) ---- */
.mini { width: 100%; height: 100%; display: flex; }

.mini-brief {
  flex-direction: column;
  gap: 5px;
  align-items: stretch;
  position: relative;
}
.mini-brief .mini-row {
  height: 5px;
  background: var(--ink-3, #d6d3cf);
}
.mini-brief .mini-row-tall { height: 9px; background: var(--ink-7, #1c1917); width: 70%; }
.mini-brief .mini-row-half { width: 56%; }
.mini-brief .mini-bars {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  align-items: end;
  height: 50px;
}
.mini-brief .mini-bars span {
  background: var(--orange, #c2410c);
  display: block;
}

.mini-water {
  align-items: end;
  gap: 6px;
  justify-content: space-between;
}
.mini-bar {
  width: 14%;
  display: block;
}
.mini-bar-base { background: var(--ink-7, #1c1917); }
.mini-bar-neg  { background: rgba(194, 65, 12, 0.78); }
.mini-bar-pos  { background: rgba(5, 105, 90, 0.78); }

.mini-list {
  flex-direction: column;
  justify-content: space-around;
  gap: 8px;
}
.mini-line {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 14px;
}
.mini-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.mini-dot-good { background: #057a55; }
.mini-dot-mid  { background: #d97706; }
.mini-dot-bad  { background: #b91c1c; }
.mini-bar-h {
  height: 5px;
  background: var(--ink-7, #1c1917);
  display: block;
}

.mini-heat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  width: 100%;
  height: 100%;
}
.mini-cell { display: block; }
.mini-cell.h0 { background: #f5f5f4; }
.mini-cell.h1 { background: #fde68a; }
.mini-cell.h2 { background: #f59e0b; }
.mini-cell.h3 { background: #b91c1c; }

.mini-finance {
  align-items: end;
  justify-content: space-between;
  gap: 8px;
}

.risk-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 9px;
  color: var(--ink-5, #57534e);
}

.risk-column span {
  width: 100%;
  display: block;
  background: var(--ink-7, #1c1917);
}

.risk-column.high span { height: 76%; background: #b91c1c; }
.risk-column.mid span { height: 52%; background: #d97706; }
.risk-column.low span { height: 30%; background: #057a55; }

.mini-network {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
  align-items: stretch;
}

.mini-network span,
.mini-network strong {
  display: grid;
  place-items: center;
  border: 1px solid var(--ink-3, #d6d3cf);
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 10px;
  color: var(--ink-6, #44403c);
  text-align: center;
}

.mini-network strong {
  grid-column: 1 / -1;
  background: var(--ink-7, #1c1917);
  color: #fff;
  letter-spacing: 0.04em;
}

.mini-buyer .mini-line em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 10px;
  color: var(--ink-5, #57534e);
}

/* ---- Industry magazine card: 3-step chain hint ---- */
.mag-chain {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 12px 0 0;
  margin-top: auto;
  border-top: 1px dashed var(--ink-3, #d6d3cf);
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--ink-6, #44403c);
}

.mag-chain .chain-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mag-chain .chain-step small {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-5, #57534e);
  text-transform: uppercase;
  font-weight: 600;
}

.mag-chain .chain-arrow {
  align-self: center;
  color: var(--orange, #c2410c);
  font-weight: 700;
  flex-shrink: 0;
}

/* ---- OS Map dual-engine CTA row ---- */
.os-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 18px;
}

.os-callout strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-serif, Georgia, serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-7, #1c1917);
}

.os-cta.os-cta-alt {
  color: var(--orange, #c2410c);
}

/* ---- CIO integration map ---- */
/* Integration section sits in the bone rhythm row, with a very subtle
 *   vertical wash so the integration map has surface depth without breaking
 *   the section family. */
.integration-section {
  background:
    linear-gradient(180deg, var(--bone), #f3efe3 100%);
}

.integration-map {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(220px, 0.7fr) minmax(300px, 1fr);
  gap: 28px;
  align-items: stretch;
  margin-top: 36px;
}

.integration-systems,
.integration-controls {
  display: grid;
  gap: 10px;
}

.integration-systems article,
.integration-controls article {
  padding: 14px 16px;
  border-top: 1px solid var(--ink-3, #d6d3cf);
  background: rgba(255, 255, 255, 0.62);
}

.integration-systems strong,
.integration-controls strong {
  display: block;
  font-family: var(--font-display, Arial, sans-serif);
  font-size: 15px;
  color: var(--ink-7, #1c1917);
}

.integration-systems span,
.integration-controls span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-6, #44403c);
}

.integration-core {
  position: relative;
  min-height: 260px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--ink-7, #1c1917);
  background: var(--ink-7, #1c1917);
  color: #fff;
}

.integration-core::before,
.integration-core::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 28px;
  height: 1px;
  background: var(--orange, #c2410c);
}

.integration-core::before { left: -28px; }
.integration-core::after { right: -28px; }

.integration-core span {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber, #d97706);
}

.integration-core strong {
  display: block;
  margin-top: 16px;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 500;
}

/* ---- Consulting Hero hub strip ---- */
.consulting-hub {
  margin-top: 28px;
  padding: 18px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.consulting-hub .hub-label {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
  margin-right: 10px;
}

.consulting-hub .hub-pill {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  text-decoration: none;
  color: var(--ink-on-dark, #fafaf9);
  transition: background 200ms ease, border-color 200ms ease;
}

.consulting-hub .hub-pill:hover {
  background: rgba(217, 119, 6, 0.16);
  border-color: var(--amber, #d97706);
}

.consulting-hub .hub-pill strong {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: #fff;
}

.consulting-hub .hub-pill span {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.62);
}

/* Consulting Hero sub: HTML allowed */
.consulting-hero .verdict-sub-en em {
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-weight: 500;
  color: var(--amber, #f59e0b);
}

.consulting-hero .verdict-sub-en .sub-en {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.58);
}

/* ---- Homepage Whitepaper teaser ---- */
.wp-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink-3, #d6d3cf);
  border-bottom: 1px solid var(--ink-3, #d6d3cf);
  margin-top: 36px;
}

.wp-teaser-meta {
  padding: 36px 38px 32px;
  background: var(--ink-7, #1c1917);
  color: var(--ink-on-dark, #fafaf9);
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}

.wp-teaser-meta .wp-tag {
  display: inline-block;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--amber, #f59e0b);
  border: 1px solid var(--amber, #f59e0b);
  padding: 3px 10px 4px;
  align-self: flex-start;
}

.wp-teaser-meta h3 {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.wp-teaser-meta p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

.wp-teaser-meta .button.dark {
  align-self: flex-start;
  margin-top: 10px;
  background: var(--amber, #f59e0b);
  color: var(--ink-7, #1c1917);
  border-color: var(--amber, #f59e0b);
}

.wp-chapters {
  list-style: none;
  margin: 0;
  padding: 28px 36px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  align-content: center;
  background: var(--ink-1, #fafaf9);
}

.wp-chapters li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-7, #1c1917);
  border-bottom: 1px dashed var(--ink-3, #d6d3cf);
  padding-bottom: 8px;
}

.wp-chapters li:last-child,
.wp-chapters li:nth-last-child(2) {
  border-bottom: 0;
}

.wp-chapters li strong {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--orange, #c2410c);
  min-width: 24px;
}

/* ---- Consultation form section labels ---- */
.form-section-label {
  grid-column: 1 / -1;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-5, #57534e);
  border-bottom: 1px solid var(--ink-3, #d6d3cf);
  padding-bottom: 6px;
  margin-top: 14px;
  font-weight: 600;
}

.form-section-label:first-of-type { margin-top: 0; }

.form-aside {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed var(--ink-3, #d6d3cf);
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-5, #57534e);
}

/* ---- v3 responsive ---- */
@media (max-width: 1180px) {
  .doors.doors-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .doors.doors-5 .door-card:nth-child(3n) { border-right: 0; }
  .doors.doors-5 .door-card:nth-child(-n+3) { border-bottom: 1px solid var(--ink-3, #d6d3cf); }

  .trust-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust-pillars .pillar:nth-child(3n) { border-right: 0; }
  .trust-pillars .pillar:nth-child(-n+3) { border-bottom: 1px solid var(--ink-3, #d6d3cf); }

  .integration-map {
    grid-template-columns: 1fr;
  }

  .integration-core {
    min-height: 180px;
  }

  .integration-core::before,
  .integration-core::after {
    left: 50%;
    right: auto;
    width: 1px;
    height: 28px;
  }

  .integration-core::before {
    top: -28px;
  }

  .integration-core::after {
    top: auto;
    bottom: -28px;
  }

  .hero.verdict-hero .verdict-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .platform-pulse { max-width: 480px; }
}

@media (max-width: 820px) {
  .doors.doors-5 { grid-template-columns: 1fr; }
  .doors.doors-5 .door-card { border-right: 0; border-bottom: 1px solid var(--ink-3, #d6d3cf); }
  .doors.doors-5 .door-card:last-child { border-bottom: 0; }

  .trust-pillars { grid-template-columns: 1fr; }
  .trust-pillars .pillar { border-right: 0; border-bottom: 1px solid var(--ink-3, #d6d3cf); }
  .trust-pillars .pillar:last-child { border-bottom: 0; }

  .deliverables { grid-template-columns: 1fr; }

  .wp-teaser { grid-template-columns: 1fr; }
  .wp-chapters { grid-template-columns: 1fr; padding: 24px 28px; }
  .wp-chapters li:nth-last-child(2) { border-bottom: 1px dashed var(--ink-3, #d6d3cf); }

  .mag-chain {
    flex-wrap: wrap;
    gap: 8px;
  }
  .mag-chain .chain-step { flex: 0 0 100%; }
  .mag-chain .chain-arrow { transform: rotate(90deg); flex: 0 0 100%; text-align: left; }

  .integration-core {
    min-height: 160px;
  }

  .integration-core strong {
    font-size: 22px;
  }
}

@media (max-width: 720px) {
  .consulting-hub .hub-pill { padding: 6px 10px 7px; }
  .consulting-hub .hub-pill strong { font-size: 10px; }

  .platform-pulse {
    padding: 18px 16px 14px;
    font-size: 12px;
  }
}

/* --- Decision radar: dynamic EY/McKinsey-style judgment field --- */
.decision-radar {
  --radar-gold: var(--gold-lt);
  position: relative;
  min-height: 780px;
  overflow: hidden;
  background: #08090c;
  color: var(--vellum);
  isolation: isolate;
}

.decision-radar-bg,
.decision-radar-photo,
.decision-radar-shade,
.decision-radar-signal {
  position: absolute;
  inset: 0;
}

.decision-radar-photo {
  opacity: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  filter: grayscale(8%) brightness(.90) contrast(1.04) saturate(1.04);
  transition: opacity 700ms ease, transform 1600ms cubic-bezier(.22,1,.36,1), filter 700ms ease;
}

.decision-radar-photo.is-active {
  opacity: 1;
  transform: scale(1);
  filter: grayscale(0%) brightness(.96) contrast(1.03) saturate(1.08);
}

.decision-radar-shade {
  z-index: 1;
  background:
    radial-gradient(circle at var(--active-x) 42%, rgba(24,32,46,.26), transparent 0 20%),
    linear-gradient(90deg, rgba(4,5,8,.68) 0%, rgba(5,6,9,.32) 34%, rgba(5,6,9,.13) 66%, rgba(4,5,8,.42) 100%),
    linear-gradient(180deg, rgba(4,5,8,.24) 0%, rgba(4,5,8,.05) 38%, rgba(4,5,8,.54) 100%),
    radial-gradient(circle at 50% 44%, transparent 0 50%, rgba(4,5,8,.24) 100%);
}

.decision-radar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    radial-gradient(circle, rgba(245,248,252,.12) 1px, transparent 1.5px);
  background-size: 18vw 100%, 18vw 100%, 32px 32px;
  opacity: .24;
  pointer-events: none;
}

.decision-radar-signal {
  z-index: 3;
  pointer-events: none;
}

.decision-radar-orbit {
  position: absolute;
  left: 4vw;
  right: 4vw;
  bottom: 170px;
  height: 210px;
  border-top: 1px solid rgba(245,248,252,.10);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: skewX(-10deg);
  opacity: .58;
}

.decision-radar-orbit::before,
.decision-radar-orbit::after {
  content: "";
  position: absolute;
  inset: 18px 8vw auto;
  height: 120px;
  border-top: 1px solid rgba(245,248,252,.065);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.decision-radar-orbit::after {
  inset: 46px 16vw auto;
  border-color: rgba(245,248,252,.045);
}

.decision-radar-scan {
  position: absolute;
  left: var(--active-scan-x);
  bottom: 128px;
  width: min(26vw, 440px);
  height: min(26vw, 440px);
  border: 1px solid rgba(245,248,252,.12);
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: translateX(-25%) rotate(42deg);
  transition: left 420ms cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 70px rgba(0,0,0,.30);
}

.decision-radar-pulse {
  position: absolute;
  left: var(--active-pulse-x);
  bottom: 330px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--radar-gold);
  box-shadow: 0 0 0 12px rgba(212,164,56,.10), 0 0 42px rgba(212,164,56,.48);
  transition: left 420ms cubic-bezier(.22,1,.36,1);
}

.decision-radar-inner {
  position: relative;
  z-index: 4;
  min-height: 780px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 92px;
  padding-bottom: 74px;
}

.decision-radar-head {
  display: grid;
  grid-template-columns: minmax(320px, 1.02fr) minmax(320px, .98fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
  max-width: 1180px;
}

.decision-radar-kicker {
  grid-column: 1 / -1;
  margin: 0 0 20px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(212,164,56,.55);
}

.decision-radar-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(52px, 5.5vw, 88px);
  font-weight: 300;
  line-height: .95;
  letter-spacing: 0;
  color: rgba(255,255,255,.94);
  text-shadow: 0 2px 26px rgba(0,0,0,.42);
}

.decision-radar-head p:last-child {
  margin: 10px 0 0;
  max-width: 620px;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 400;
  line-height: 1.86;
  color: rgba(255,255,255,.78);
  text-shadow: 0 1px 18px rgba(0,0,0,.38);
}

.decision-radar-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(8,10,12,.24);
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}

.decision-radar-card {
  position: relative;
  min-height: 318px;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 28px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid rgba(255,255,255,.20);
  background: rgba(8,10,12,.26);
  transition: background 220ms ease, box-shadow 220ms ease;
}

.decision-radar-card:last-child { border-right: none; }

.decision-radar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 38%, rgba(0,0,0,.16));
  opacity: .34;
  transition: opacity 220ms ease;
}

.decision-radar-card.is-active,
.decision-radar-card:hover,
.decision-radar-card:focus-visible {
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 16px 40px rgba(0,0,0,.16);
}

.decision-radar-card.is-active::before,
.decision-radar-card:hover::before,
.decision-radar-card:focus-visible::before { opacity: .62; }

.decision-radar-num,
.decision-radar-label,
.decision-radar-card strong,
.decision-radar-question,
.decision-radar-deliverable,
.decision-radar-arrow {
  position: relative;
  z-index: 1;
}

.decision-radar-num,
.decision-radar-label {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.decision-radar-num {
  color: var(--radar-gold);
  margin-bottom: 18px;
}

.decision-radar-label {
  color: rgba(255,255,255,.54);
  margin-bottom: 22px;
}

.decision-radar-card strong {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.55vw, 42px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: 0;
  color: rgba(255,255,255,.95);
  margin-bottom: 22px;
}

.decision-radar-question,
.decision-radar-deliverable {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.82;
  color: rgba(255,255,255,.74);
}

.decision-radar-deliverable {
  margin-top: auto;
  padding-top: 24px;
  color: rgba(255,255,255,.64);
}

.decision-radar-arrow {
  margin-top: 26px;
  color: var(--radar-gold);
  font-size: 26px;
  line-height: 1;
  transition: transform 180ms ease;
}

.decision-radar-card:hover .decision-radar-arrow,
.decision-radar-card:focus-visible .decision-radar-arrow { transform: translateX(8px); }

@media (max-width: 1100px) {
  .decision-radar { min-height: auto; }
  .decision-radar-inner {
    min-height: auto;
    gap: 70px;
  }
  .decision-radar-head { grid-template-columns: 1fr; }
  .decision-radar-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decision-radar-card:nth-child(2) { border-right: none; }
  .decision-radar-card:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.20); }
}

@media (max-width: 720px) {
  .decision-radar-inner {
    padding-top: 70px;
    padding-bottom: 64px;
    gap: 46px;
  }
  .decision-radar-head h2 { font-size: clamp(40px, 11vw, 52px); }
  .decision-radar-rail { grid-template-columns: 1fr; }
  .decision-radar-card,
  .decision-radar-card:nth-child(2) {
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.20);
    padding: 28px 24px;
  }
  .decision-radar-card:last-child { border-bottom: none; }
  .decision-radar-scan {
    width: 240px;
    height: 240px;
    bottom: 40%;
  }
  .decision-radar-orbit {
    bottom: 44%;
    height: 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .decision-radar-photo,
  .decision-radar-scan,
  .decision-radar-pulse,
  .decision-radar-card,
  .decision-radar-arrow {
    transition: none;
  }
}

/* =====================================================================
 * R1 鈥?i18n + Unsplash + restraint pass
 *   - Language toggle button in nav
 *   - Hero photo backdrop using .media-slot
 *   - Single-language render (P0 dual ZH+EN rows collapsed via L())
 *   - Lang-conditional helpers (.zh-only / .en-only) for any future tweaks
 * ===================================================================== */

/* ---- Language toggle button (nav corner) ---- */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 14px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono, "IBM Plex Mono", "Source Code Pro", monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
  user-select: none;
}

.lang-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 8px;
  font: inherit;
  letter-spacing: inherit;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  border-radius: 999px;
  transition: color .15s ease, background .15s ease;
}

.lang-btn:hover { color: rgba(255, 255, 255, 0.9); }

.lang-btn.active {
  color: var(--ink, #1c2433);
  background: var(--white, #fff);
}

.lang-divider {
  color: rgba(255, 255, 255, 0.25);
  font-weight: 400;
}

@media (max-width: 920px) {
  .lang-toggle { margin-left: 8px; padding: 3px 4px; font-size: 10px; }
  .lang-btn { padding: 3px 6px; }
}

/* ---- Generic .media-slot host ---- */
.media-slot {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  background: var(--ink-2, #f4f1ec);
  border-radius: 2px;
}

.media-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--media-fit, cover);
  object-position: center;
}

.media-caption,
.media-attribution {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.media-caption {
  position: absolute;
  left: 24px;
  bottom: 22px;
  max-width: 60%;
  padding: 6px 10px;
  background: rgba(8, 18, 36, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-left: 2px solid rgba(255, 255, 255, 0.22);
  font-size: 11px;
}

.media-attribution {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
}

.media-attribution a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.media-attribution a:hover { color: var(--white, #fff); }

/* Fallback slab when API/network/key is unavailable */
.media-slot-fallback {
  background: linear-gradient(135deg, #1c2433 0%, #2a3447 100%);
}

.media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.media-fallback-mark { color: var(--gold-lt); }

/* ---- Hero photographic backdrop ---- */
/*  The hero section becomes a layered surface: photo behind, copy in front. */
.verdict-hero {
  position: relative;
  isolation: isolate;
}

.verdict-hero .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: 0;
  background: var(--navy, #0f1b32);
}

.verdict-hero .hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  /* Slight desaturation + lift to keep mood consistent across photos. */
  filter: saturate(0.78) contrast(1.04) brightness(0.88);
}

/* Dark gradient overlay so copy stays readable on any photo. */
.verdict-hero .hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 18, 36, 0.62) 0%, rgba(8, 18, 36, 0.40) 28%, rgba(8, 18, 36, 0.72) 78%, rgba(8, 18, 36, 0.92) 100%),
    linear-gradient(90deg, rgba(8, 18, 36, 0.55) 0%, rgba(8, 18, 36, 0.10) 65%);
  pointer-events: none;
}

.verdict-hero .hero-photo .media-caption {
  bottom: 16px;
  left: 18px;
  font-size: 10px;
}

.verdict-hero .hero-photo .media-attribution {
  bottom: 8px;
  right: 10px;
  font-size: 8.5px;
}

.verdict-hero .hero-inner {
  position: relative;
  z-index: 4;
}

/* In ZH the deadline "small" line wraps long; in EN it's tighter. */
.is-en .deadline small { letter-spacing: 0.04em; }

/* ---- Collapsed deliv-metric (single-language) ---- */
.deliv-metric-text {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink, #1c2433);
  font-weight: 600;
}

/* Hide the legacy paired rows in case any leftover markup still references them. */
.deliv-metric-zh,
.deliv-metric-en,
.mag-served-zh,
.mag-served-en,
.persona-role-en,
.teaser-foot-en {
  display: none !important;
}

/* Promote single text to plain rendering */
.mag-served-text {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3, #4c5566);
}

/* ---- trustStrip collapsed back to single row ---- */
/* The two-row P0 markup is gone, but in case any cached copy still serves
 * the .trust-strip-2row class, normalize it back to single-row layout. */
.trust-strip-2row .trust-row-clients,
.trust-strip-2row .trust-clients,
.trust-strip-2row .trust-client { display: none !important; }

/* ---- EN-mode typography refinements ----
 *  Latin glyphs at the same px size look heavier than Han characters.
 *  Compensate slightly so EN doesn't feel "shouty". */
.is-en .verdict-h1 { letter-spacing: -0.012em; }
.is-en .editor-quote { letter-spacing: -0.005em; }
.is-en .editor-prose { letter-spacing: 0.005em; }

/* ---- Optional helper classes for future per-language tweaks ---- */
.zh-only { display: initial; }
.en-only { display: none; }
.is-en .zh-only { display: none !important; }
.is-en .en-only { display: initial !important; }

@media (max-width: 720px) {
  .verdict-hero .hero-photo img { object-position: center 28%; }
  .verdict-hero .hero-photo .media-caption { display: none; }
}

/* =====================================================================
 * R1.1 鈥?visible executive homepage cover
 * This deliberately overrides the previous "platform pulse" first screen.
 * The homepage must feel like a company website, not a product dashboard.
 * ===================================================================== */

.hero.verdict-hero.executive-cover {
  min-height: 100svh;
  padding: 0;
  display: grid;
  align-items: stretch;
  background: #07101d;
  position: relative;
  overflow: hidden;
}

.executive-cover .hero-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.executive-cover .hero-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: brightness(0.82) contrast(1.06) saturate(1.08);
}

.executive-cover .hero-bg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(7, 16, 29, 0.88) 0%,
      rgba(7, 16, 29, 0.68) 35%,
      rgba(7, 16, 29, 0.30) 60%,
      rgba(7, 16, 29, 0.10) 100%),
    linear-gradient(180deg,
      rgba(7, 16, 29, 0.40) 0%,
      rgba(7, 16, 29, 0.05) 40%,
      rgba(7, 16, 29, 0.50) 100%);
  pointer-events: none;
}

.hero.verdict-hero.executive-cover .hero-inner {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  padding: 120px clamp(24px, 6vw, 72px) clamp(110px, 16vh, 150px);
  position: relative;
  z-index: 4;
}

.executive-cover .hero-text-overlay {
  max-width: 860px;
}

/* 鏉傚織鏈熷彿鍓湁 鈥?Economist / HBR 椋庛€? *   浠呭嚭鐜板湪 hero 涓婃柟锛岀揣璐?kicker 涔嬪悗銆?*/
.exec-issue-line {
  display: block;
  margin-top: 4px;
  margin-bottom: clamp(16px, 2.5vh, 28px);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.38);
}

.exec-issue-line em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.88);
}

.executive-hero-kicker {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.44);
}

.executive-cover .verdict-eyebrow {
  color: var(--amber);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.42);
}

.executive-cover .verdict-eyebrow::before {
  display: none;
}

.executive-cover .verdict-h1 {
  max-width: 900px;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.98);
  text-wrap: balance;
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.58);
}

.executive-cover .verdict-h1 em {
  color: inherit;
  font-style: normal;
}

.executive-cover .verdict-sub {
  max-width: 780px;
  margin-top: 14px;
  padding-left: 14px;
  border-left: 3px solid var(--amber);
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.42;
  font-weight: 500;
  font-style: normal;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.45);
}

.hero-proof-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  max-width: 620px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.hero-proof-line span {
  position: relative;
  padding-right: 18px;
}

.hero-proof-line span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0.15em;
  width: 1px;
  height: 1em;
  background: rgba(255, 255, 255, 0.25);
}

.executive-cover .verdict-actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.executive-cover .button {
  min-height: 46px;
  padding: 0 22px;
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.94);
  color: #0b1220;
}

.executive-cover .button.ghost {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.25);
}

.executive-cover .button.ghost:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
}

.executive-cover .hero-photo img {
  object-position: 62% center;
  filter: saturate(0.7) contrast(1.08) brightness(0.82);
  transform: scale(1.02);
  animation: heroImageBreath 18s ease-in-out infinite alternate;
}

.executive-cover .hero-photo::after {
  background:
    linear-gradient(90deg, rgba(4, 11, 22, 0.94) 0%, rgba(4, 11, 22, 0.78) 34%, rgba(4, 11, 22, 0.30) 72%, rgba(4, 11, 22, 0.10) 100%),
    linear-gradient(180deg, rgba(4, 11, 22, 0.48) 0%, rgba(4, 11, 22, 0.12) 42%, rgba(4, 11, 22, 0.86) 100%);
}

/* ============================================================
 *  Archetype A 鈥?Conceptual Sculpture cover (homepage)
 *  Bright abstract image on the right, dark text wedge on the left.
 *  McKinsey Insights / Bain Brief cover language.
 * ============================================================ */

/* archetype variants removed 鈥?single hero-bg-image approach */

.executive-cover .media-caption {
  left: auto;
  right: clamp(18px, 4vw, 64px);
  bottom: 44px;
  max-width: 360px;
  border-left: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  padding: 12px 0 0;
  color: rgba(255, 255, 255, 0.68);
}

.executive-cover .media-attribution {
  right: clamp(18px, 4vw, 64px);
}

@keyframes heroImageBreath {
  from { transform: scale(1.02); }
  to { transform: scale(1.075); }
}

@media (max-width: 860px) {
  .hero.verdict-hero.executive-cover .hero-inner {
    padding: 122px 22px 56px;
  }

  .executive-cover .hero-text-overlay {
    max-width: 100%;
  }

  .executive-cover .verdict-h1 {
    font-size: clamp(28px, 7vw, 42px);
    letter-spacing: -0.015em;
    line-height: 1.18;
  }

  .executive-cover .verdict-sub {
    max-width: 100%;
  }

  .hero-proof-line {
    gap: 8px 10px;
    letter-spacing: 0.1em;
  }

  .hero-proof-line span {
    padding-right: 0;
  }

  .hero-proof-line span::after {
    display: none;
  }
}

/* =====================================================================
 * R1.2 鈥?Two more photographic surfaces on the homepage
 *   - Editor's Note gets a full-bleed reading-desk band on top
 *   - Closing Briefing gets a boardroom backdrop with dark scrim
 *   This is where "鍥介檯鍏徃鐨勪弗鑲冩€т笓涓氭€? actually shows up visually.
 * ===================================================================== */

.editor-note.editor-note-illustrated {
  padding-top: clamp(32px, 4vw, 56px);
}

.editor-note.editor-note-illustrated > .wrap {
  display: grid;
  width: min(1120px, calc(100% - 56px));
  grid-template-columns: minmax(360px, 0.82fr) minmax(420px, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  align-items: start;
}

.editor-note-photo {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(300px, 40vw, 520px);
  background: #0c1422;
  border-radius: 6px;
  overflow: hidden;
  order: 1;
}

@media (max-width: 860px) {
  .editor-note.editor-note-illustrated > .wrap {
    grid-template-columns: 1fr;
  }
  .editor-note-photo {
    height: clamp(200px, 50vw, 320px);
    order: -1;
  }
}

.editor-note-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.55) contrast(1.05) brightness(0.86);
}

.editor-note-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 14, 24, 0.10) 0%, rgba(255, 255, 255, 0.0) 55%, rgba(255, 255, 255, 0.92) 100%);
  pointer-events: none;
}

.editor-note-photo .media-caption {
  bottom: 36px;
  left: clamp(24px, 8vw, 96px);
  background: rgba(8, 14, 24, 0.62);
  border-left: 2px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.9);
}

.editor-note-photo .media-attribution {
  right: clamp(24px, 8vw, 96px);
  bottom: 16px;
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
 *  Closing E 鈥?Editorial Cover archetype.
 *  Typography is the design. No photograph. One amber stroke.
 *  Reads like the inside back cover of a McKinsey / Economist issue.
 * ============================================================ */

.closing-briefing.closing-editorial-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #07101d;
  color: #fff;
  padding: clamp(100px, 12vw, 140px) 0 clamp(80px, 10vw, 120px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Very subtle paper-grain via diagonal hairlines so the dark surface
 *   doesn't feel like a flat color 鈥?closer to ink on heavy paper. */
.closing-briefing.closing-editorial-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(60, 90, 140, 0.10), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(216, 117, 44, 0.06), transparent 64%);
  z-index: 0;
}

.closing-briefing.closing-editorial-cover > .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(48px, 8vw, 100px);
}

.closing-issue-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.closing-issue-mark .ce-stroke {
  flex: 0 0 56px;
  height: 2px;
  background: var(--amber);
}

.closing-briefing.closing-editorial-cover .closing-meta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 28px;
}

.closing-briefing.closing-editorial-cover h2 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-weight: 300;
  max-width: 20ch;
  color: #fff;
  text-wrap: balance;
  margin: 0;
}

.closing-briefing.closing-editorial-cover h2 em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--amber);
}

.closing-briefing.closing-editorial-cover .closing-prose {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.72;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 26px;
}

.closing-briefing.closing-editorial-cover .closing-actions {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 0;
  flex-shrink: 0;
}

.closing-briefing.closing-editorial-cover .button {
  min-height: 46px;
  padding: 0 22px;
}

.closing-briefing.closing-editorial-cover .button.ghost {
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.04);
}

.closing-briefing.closing-editorial-cover .button.ghost:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.10);
}

.closing-colophon {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: clamp(40px, 6vw, 88px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.closing-colophon .ce-dot {
  color: var(--amber);
  font-size: 14px;
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .closing-briefing.closing-editorial-cover {
    padding: 80px 0 64px;
  }
  .closing-briefing.closing-editorial-cover > .wrap {
    grid-template-columns: 1fr;
  }
  .closing-briefing.closing-editorial-cover h2 {
    font-size: clamp(36px, 9vw, 56px);
  }
  .closing-briefing.closing-editorial-cover .closing-actions {
    flex-direction: row;
    width: 100%;
  }
}

/* Closing band (legacy illustrated variant 鈥?kept for any subpage still using it). */
.closing-briefing.closing-illustrated {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #07101d;
  padding: clamp(120px, 16vw, 200px) 0;
}

.closing-briefing.closing-illustrated > .wrap {
  position: relative;
  z-index: 1;
}

.closing-briefing.closing-illustrated h2,
.closing-briefing.closing-illustrated .closing-meta,
.closing-briefing.closing-illustrated .closing-prose {
  color: #fff;
}

.closing-briefing.closing-illustrated h2 em {
  color: #f0c98a;
  font-style: normal;
}

.closing-briefing.closing-illustrated .closing-prose {
  color: rgba(255, 255, 255, 0.78);
}

.closing-briefing.closing-illustrated .button.ghost {
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
}

.closing-briefing.closing-illustrated .button.ghost:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.14);
}

.closing-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: #07101d;
  z-index: 0;
}

.closing-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(0.55) contrast(1.06) brightness(0.55);
}

.closing-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 16, 29, 0.55) 0%, rgba(7, 16, 29, 0.78) 60%, rgba(7, 16, 29, 0.92) 100%),
    linear-gradient(90deg, rgba(7, 16, 29, 0.85) 0%, rgba(7, 16, 29, 0.42) 65%, rgba(7, 16, 29, 0.20) 100%);
  pointer-events: none;
}

.closing-photo .media-caption {
  bottom: 24px;
  left: clamp(24px, 5vw, 64px);
  background: rgba(7, 16, 29, 0.5);
  border-left: 2px solid rgba(255, 255, 255, 0.22);
}

.closing-photo .media-attribution {
  bottom: 10px;
  right: clamp(24px, 5vw, 64px);
}

@media (max-width: 720px) {
  .editor-note-photo {
    height: clamp(180px, 56vw, 280px);
    margin-bottom: 56px;
  }
  .editor-note-photo .media-caption,
  .editor-note-photo .media-attribution {
    display: none;
  }

  .closing-briefing.closing-illustrated {
    padding: 96px 0 88px;
  }
}

/* =====================================================================
 * EDITORIAL GEOMETRY LAYER
 *   4 reusable primitives applied on top of editorial photography.
 *   The aesthetic vocabulary McKinsey/EY use as a "judgment layer":
 *   corner-mark, slash-block, mega-numeral, line-glyph.
 *   Plus chapter transitions (horizon band) and section photo hosts.
 * ===================================================================== */

/* ---- 1) Corner mark 鈥?1px amber L, anchors every editorial frame ---- */
.corner-mark {
  position: absolute;
  width: 36px;
  height: 36px;
  pointer-events: none;
  z-index: 5;
}
.corner-mark::before,
.corner-mark::after {
  content: "";
  position: absolute;
  background: var(--amber);
}
.corner-mark::before { /* horizontal arm */
  top: 0;
  left: 0;
  width: 36px;
  height: 1px;
}
.corner-mark::after { /* vertical arm */
  top: 0;
  left: 0;
  width: 1px;
  height: 36px;
}
.corner-mark.cm-tr  { right: 24px; top: 24px; transform: scaleX(-1); }
.corner-mark.cm-tl  { left:  24px; top: 24px; }
.corner-mark.cm-br  { right: 24px; bottom: 24px; transform: scale(-1, -1); }
.corner-mark.cm-bl  { left:  24px; bottom: 24px; transform: scaleY(-1); }
.corner-mark.cm-light::before,
.corner-mark.cm-light::after { background: rgba(255, 255, 255, 0.55); }

/* ---- 2) Slash block 鈥?small navy block, 8deg tilt, visual anchor ---- */
.slash-block {
  position: absolute;
  width: 96px;
  height: 14px;
  background: var(--navy);
  transform: rotate(-8deg);
  z-index: 3;
  pointer-events: none;
}
.slash-block.sb-amber { background: var(--amber); }
.slash-block.sb-light { background: rgba(255, 255, 255, 0.12); }

/* ---- 3) Mega numeral 鈥?oversized roman/digit chapter number ---- */
.mega-numeral {
  position: absolute;
  font-family: var(--font-serif, Georgia, serif);
  font-weight: 700;
  font-style: italic;
  line-height: 0.85;
  font-size: clamp(120px, 14vw, 220px);
  color: rgba(13, 21, 32, 0.06);
  letter-spacing: -0.04em;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
.mega-numeral.mn-light { color: rgba(255, 255, 255, 0.06); }
.mega-numeral.mn-amber { color: rgba(216, 138, 44, 0.12); }

/* ---- 4) Line glyph 鈥?1px amber svg holder for editorial covers ---- */
.line-glyph {
  display: inline-block;
  width: 56px;
  height: 56px;
  color: var(--amber);
}
.line-glyph svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1;
  fill: none;
  vector-effect: non-scaling-stroke;
}

/* =====================================================================
 *  HERO geometric overlay 鈥?adds the editorial layer on top of the
 *  existing executive-cover background photograph and text.
 * ===================================================================== */

/* =====================================================================
 *  APEX HERO ENGINE 鈥?ported from hero.html
 *  Full-screen slides, Ken Burns background, staged text entrance,
 *  right-side progress dots, counter, bottom progress line.
 * ===================================================================== */

.apex-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--void);
  color: var(--vellum);
  isolation: isolate;
}

.apex-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.apex-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.apex-slide-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--void);
}

.apex-slide-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 0s;
  filter: none;
}

.apex-slide.is-active .apex-slide-bg img {
  transform: scale(1.0);
  transition: transform 11s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.apex-slide-1 .apex-slide-bg img { object-position: center 40%; }
.apex-slide-2 .apex-slide-bg img { object-position: center 60%; }
.apex-slide-3 .apex-slide-bg img { object-position: center 55%; }

.apex-slide-overlay {
  position: absolute;
  inset: 0;
}

.apex-slide-1 .apex-slide-overlay {
  background:
    linear-gradient(180deg, rgba(6, 7, 10, 0.28) 0%, rgba(6, 7, 10, 0.10) 35%, rgba(6, 7, 10, 0.55) 65%, rgba(6, 7, 10, 0.92) 100%),
    linear-gradient(90deg, rgba(6, 7, 10, 0.65) 0%, transparent 55%);
}

.apex-slide-2 .apex-slide-overlay {
  background:
    linear-gradient(90deg, rgba(6, 7, 10, 0.88) 0%, rgba(6, 7, 10, 0.55) 45%, rgba(6, 7, 10, 0.10) 100%),
    linear-gradient(180deg, rgba(6, 7, 10, 0.20) 0%, rgba(6, 7, 10, 0.45) 100%);
}

.apex-slide-3 .apex-slide-overlay {
  background:
    linear-gradient(180deg, rgba(6, 7, 10, 0.30) 0%, rgba(6, 7, 10, 0.15) 40%, rgba(6, 7, 10, 0.70) 75%, rgba(6, 7, 10, 0.94) 100%),
    linear-gradient(90deg, rgba(6, 7, 10, 0.60) 0%, transparent 50%);
}

.apex-slide-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  opacity: 0;
  background: linear-gradient(180deg, transparent 20%, var(--slide-accent) 60%, transparent 100%);
  transition: opacity 1.2s 0.4s ease;
}

.apex-slide.is-active .apex-slide-accent { opacity: 1; }

.apex-slide-content {
  position: absolute;
  left: clamp(32px, 6vw, 72px);
  bottom: clamp(108px, 17vh, 152px);
  z-index: 4;
  max-width: 640px;
}

.apex-slide-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
}

.apex-slide-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

.apex-slide-h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(48px, 5.7vw, 86px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.045em;
  color: var(--vellum);
  opacity: 0;
  transform: translateY(18px);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.apex-slide-h1 a {
  color: inherit;
  text-decoration: none;
}

.apex-slide-h1 a:hover em {
  color: var(--gold-bright);
}

.apex-slide-h1 em {
  font-style: normal;
  color: var(--gold-lt);
  font-weight: 600;
}

.apex-slide-sub {
  max-width: 520px;
  margin: 0 0 34px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--warm-grey);
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(14px);
}

.apex-slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212, 164, 56, 0.32);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: 0;
  transform: translateY(10px);
  transition: border-color 0.25s, color 0.25s, opacity 0.7s 1.0s ease, transform 0.7s 1.0s ease;
}

.apex-slide-cta:hover {
  color: var(--vellum);
  border-bottom-color: var(--gold-lt);
}

.apex-slide-cta svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s;
}

.apex-slide-cta:hover svg { transform: translateX(4px); }

.apex-slide.is-active .apex-slide-eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s 0.45s ease, transform 0.7s 0.45s ease;
}

.apex-slide.is-active .apex-slide-h1 {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s 0.7s ease, transform 0.8s 0.7s ease;
}

.apex-slide.is-active .apex-slide-sub {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.75s 0.85s ease, transform 0.75s 0.85s ease;
}

.apex-slide.is-active .apex-slide-cta {
  opacity: 1;
  transform: translateY(0);
}

.apex-slide-meta {
  position: absolute;
  left: clamp(32px, 6vw, 72px);
  right: clamp(32px, 6vw, 72px);
  bottom: clamp(58px, 8vh, 78px);
  z-index: 4;
  display: none;
  align-items: center;
  gap: 18px;
  border-top: 1px solid rgba(212, 164, 56, 0.18);
  padding-top: 14px;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(212, 207, 200, 0.26);
}

.apex-slide-meta em {
  color: var(--platinum);
  font-style: normal;
}

.apex-hero-dots {
  position: absolute;
  right: clamp(24px, 4vw, 50px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.apex-hero-dot {
  position: relative;
  width: 3px;
  height: 30px;
  border: 0;
  border-radius: 2px;
  padding: 0;
  background: rgba(212, 207, 200, 0.16);
  overflow: hidden;
  cursor: pointer;
}

.apex-hero-dot.is-active { background: rgba(212, 207, 200, 0.10); }
.apex-hero-dot:not(.is-active):hover { background: rgba(212, 207, 200, 0.30); }

.apex-dot-fill {
  position: absolute;
  inset: 0;
  height: 0;
  border-radius: 2px;
  background: var(--gold-lt);
}

.apex-hero-dot.is-active .apex-dot-fill {
  height: 100%;
  transition: height 10s linear;
}

.apex-hero-counter {
  position: absolute;
  right: clamp(24px, 4vw, 50px);
  bottom: clamp(90px, 15vh, 120px);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(212, 207, 200, 0.25);
}

.apex-counter-current {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  color: rgba(212, 164, 56, 0.55);
}

.apex-counter-sep {
  width: 24px;
  height: 1px;
  background: rgba(212, 207, 200, 0.18);
}

.apex-hero-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  z-index: 8;
  background: rgba(212, 207, 200, 0.06);
}

.apex-hero-progress-fill {
  width: 0;
  height: 100%;
  background: var(--gold);
}

.apex-scroll-nudge {
  position: absolute;
  left: clamp(32px, 6vw, 72px);
  bottom: 34px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(212, 207, 200, 0.26);
  animation: apexNudgeFloat 2.8s ease-in-out infinite;
}

.apex-nudge-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, transparent, rgba(212, 207, 200, 0.32));
}

@keyframes apexNudgeFloat {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50% { opacity: 0.8; transform: translateY(5px); }
}

.apex-hero-tabs-fallback {
  display: none;
}

.home-capabilities-strip {
  background: #292A33;
  border-top: 1px solid rgba(212,164,56,.2);
  padding: 78px clamp(24px, 5vw, 64px) 84px;
  color: var(--vellum);
}

.home-cap-strip-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 52px;
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

.home-cap-strip-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: rgba(245, 248, 252, 0.16);
  flex-shrink: 0;
}

.home-cap-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(212,164,56,.84);
}

/* EY-inspired inkwell cards: black base, grey-violet content hover. */
.home-cap-strip-card {
  position: relative;
  min-height: 430px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #15161D;
  border: 1px solid rgba(255,255,255,.045);
  border-top: 0;
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), border-color 0.22s ease;
}

.home-cap-strip-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gold-lt);
  transition: opacity 0.22s;
  z-index: 1;
}

.home-cap-strip-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(212,164,56,.04) 0%, transparent 34%);
  opacity: 0;
  transition: opacity 0.22s;
}

.home-cap-strip-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,164,56,.16);
}

.home-cap-strip-card:hover::after { opacity: 1; }

/* Middle card 鈥?keep the same EY-style base, only a touch stronger line. */
.home-cap-strip-card:nth-child(2) {
  background: #15161D;
  border-color: rgba(255,255,255,.055);
}

.home-cap-strip-card:nth-child(2)::before {
  background: var(--gold-lt);
}

/* Remove the inline .home-cap-line element (kept for compatibility) */
.home-cap-line { display: none; }

.home-cap-image {
  position: relative;
  width: 100%;
  height: clamp(190px, 17vw, 250px);
  margin: 0;
  overflow: hidden;
  background: #101118;
  border-bottom: 1px solid rgba(255,255,255,.055);
  z-index: 1;
}

.home-cap-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(18%) brightness(0.9) contrast(1.04);
  transform: scale(1);
  transition: filter 520ms ease, transform 760ms cubic-bezier(.22,1,.36,1);
}

.home-cap-strip-card:hover .home-cap-image img {
  filter: grayscale(10%) brightness(1) contrast(1.03);
  transform: scale(1.035);
}

.home-cap-image-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.14) 54%, rgba(9,9,13,.36) 100%),
    linear-gradient(135deg, rgba(0,0,0,.12), transparent 48%);
  mix-blend-mode: normal;
}

.home-cap-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 34px 36px 34px;
  background: #171820;
  transition: background-color 0.22s ease;
}

.home-cap-strip-card:hover .home-cap-content {
  background: #54555F;
}

.home-cap-sub {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-label);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.46);
  position: relative;
  z-index: 1;
}

.home-cap-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--gold-lt);
  position: relative;
  z-index: 1;
}

@media (max-width: 1080px) {
  .home-cap-strip-grid {
    grid-template-columns: 1fr;
  }

  .home-cap-strip-card {
    min-height: 0;
  }

  .home-cap-image {
    height: 300px;
  }
}

@media (max-width: 720px) {
  .home-capabilities-strip {
    padding: 64px 20px 68px;
  }

  .home-cap-strip-eyebrow {
    margin-bottom: 34px;
    letter-spacing: 0.18em;
  }

  .home-cap-image {
    height: 218px;
  }

  .home-cap-content {
    padding: 28px 24px 30px;
  }

  .home-cap-title {
    font-size: 26px;
  }
}

.home-cap-desc {
  max-width: 340px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(255,255,255,.7);
  flex: 1;
  position: relative;
  z-index: 1;
}

.home-cap-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
  transition: color 0.2s, gap 0.2s;
  position: relative;
  z-index: 1;
}

.home-cap-strip-card:hover .home-cap-arrow {
  color: var(--gold-lt);
  gap: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .apex-slide,
  .apex-slide-bg img,
  .apex-slide-eyebrow,
  .apex-slide-h1,
  .apex-slide-sub,
  .apex-slide-cta,
  .apex-dot-fill,
  .apex-scroll-nudge {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 1024px) {
  .apex-slide-content {
    left: 32px;
    right: 32px;
    bottom: 104px;
    max-width: none;
  }
  .apex-hero-dots,
  .apex-hero-counter {
    right: 24px;
  }
  .apex-scroll-nudge {
    left: 32px;
  }
}

@media (max-width: 760px) {
  .apex-slide-h1 {
    font-size: clamp(36px, 10vw, 56px);
  }
  .apex-slide-sub {
    max-width: calc(100vw - 72px);
  }
  .apex-slide-meta {
    display: none;
  }
  .apex-hero-dots,
  .apex-hero-counter {
    display: none;
  }
  .home-cap-strip-grid {
    grid-template-columns: 1fr;
  }
}

.hero-carousel {
  position: relative;
  min-height: 100svh;
  background: #050b14;
  overflow: hidden;
  isolation: isolate;
}

.hero-carousel .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(22px);
  pointer-events: none;
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

.hero-carousel .hero-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 2;
}

.hero-carousel .hero-slide.has-link {
  cursor: pointer;
}

.hero-carousel .hero-slide-hitarea {
  position: absolute;
  inset: 0 0 clamp(92px, 12vh, 136px) 0;
  z-index: 3;
  display: block;
  color: inherit;
  text-decoration: none;
}

.hero-carousel .hero-slide-hitarea:focus-visible {
  outline: 1px solid var(--amber);
  outline-offset: -12px;
}

.hero-carousel .hero-slide.has-link .hero-inner,
.hero-carousel .hero-slide.has-link .hero-geom {
  pointer-events: none;
}

.hero-carousel .hero-slide .hero-bg-image img {
  transform: scale(1.012);
  transition: transform 7000ms linear;
}

.hero-carousel .hero-slide.is-active .hero-bg-image img {
  transform: scale(1);
}

.hero-carousel .hero-slide:nth-child(2) .hero-bg-image img {
  object-position: center center;
  filter: saturate(0.95) contrast(1.06) brightness(0.9);
}

.hero-carousel .hero-slide:nth-child(3) .hero-bg-image img {
  object-position: center center;
  filter: saturate(0.86) contrast(1.08) brightness(0.86);
}

.hero-carousel .hero-geom .hero-baseline {
  bottom: clamp(84px, 10vh, 116px);
}

.hero-carousel-ui {
  position: absolute;
  left: clamp(24px, 6vw, 72px);
  right: clamp(24px, 6vw, 72px);
  bottom: clamp(18px, 3vh, 34px);
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(18px, 3vw, 36px);
  pointer-events: none;
}

.hero-carousel-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  max-width: 620px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: auto;
}

.hero-carousel-tab {
  position: relative;
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  padding: 16px 18px 0 0;
  cursor: pointer;
  min-height: 48px;
  transition: color 0.22s ease;
}

.hero-carousel-tab:last-child {
  border-right: 0;
}

.hero-carousel-tab:hover,
.hero-carousel-tab.is-active {
  color: #fff;
}

.hero-carousel-tab:focus-visible,
.hero-carousel-control:focus-visible {
  outline: 1px solid var(--amber);
  outline-offset: -2px;
}

.hero-carousel-tab .tab-progress {
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--amber);
  opacity: 0;
}

.hero-carousel-tab.is-active .tab-progress {
  opacity: 1;
  animation: heroTabProgress 7000ms linear forwards;
}

.hero-carousel-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.hero-carousel-control {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(7, 16, 29, 0.56);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.hero-carousel-control:hover {
  color: var(--amber);
  border-color: var(--amber);
  background: rgba(7, 16, 29, 0.82);
}

@keyframes heroTabProgress {
  from { width: 0; }
  to { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel .hero-slide,
  .hero-carousel .hero-slide .hero-bg-image img,
  .hero-carousel-tab .tab-progress {
    transition: none;
    animation: none !important;
  }
}

@media (max-width: 760px) {
  .hero-carousel-ui {
    grid-template-columns: 1fr;
    bottom: 18px;
  }
  .hero-carousel-tabs {
    max-width: none;
    grid-template-columns: 1fr;
  }
  .hero-carousel-tab {
    min-height: 36px;
    padding-top: 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  .hero-carousel-controls {
    justify-content: flex-start;
  }
}

.executive-cover .hero-inner {
  /* Allow absolutely-positioned geometric children. */
  position: relative;
}

.executive-cover .hero-geom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.executive-cover .hero-geom .mega-numeral {
  top: 14vh;
  left: clamp(16px, 4vw, 64px);
  font-size: clamp(140px, 18vw, 280px);
  color: rgba(255, 255, 255, 0.05);
}

.executive-cover .hero-geom .hero-baseline {
  position: absolute;
  bottom: clamp(28px, 5vh, 56px);
  left: clamp(24px, 6vw, 72px);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 6;
}

.hero-carousel .hero-geom .hero-baseline {
  bottom: clamp(88px, 11vh, 122px) !important;
}

.executive-cover .hero-geom .hero-baseline-line {
  width: clamp(60px, 7vw, 96px);
  height: 1px;
  background: var(--amber);
}

.executive-cover .hero-geom .hero-baseline-tick {
  width: 1px;
  height: 10px;
  background: var(--amber);
}

.executive-cover .hero-geom .hero-issue-line {
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.executive-cover .hero-geom .hero-issue-line em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.95);
}

/* =====================================================================
 *  TRANSITION HORIZON band 鈥?between chapters, uses the user-purchased
 *  navy + light-streak photo. 240px tall, single line of editorial type.
 * ===================================================================== */

.transition-horizon {
  position: relative;
  height: clamp(180px, 22vw, 260px);
  background: #060c18;
  overflow: hidden;
  isolation: isolate;
}

.transition-horizon-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.85) contrast(1.04) saturate(0.7);
  z-index: 0;
}

.transition-horizon-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(6, 12, 24, 0.92) 0%,
      rgba(6, 12, 24, 0.45) 40%,
      rgba(6, 12, 24, 0.45) 60%,
      rgba(6, 12, 24, 0.92) 100%);
}

.transition-horizon-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.transition-horizon-mark {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.transition-horizon-mark .num {
  color: var(--amber);
  font-weight: 600;
}

.transition-horizon-mark .bar {
  width: 56px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

.transition-horizon-rule {
  position: absolute;
  left: clamp(24px, 6vw, 72px);
  right: clamp(24px, 6vw, 72px);
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
  z-index: 3;
}
.transition-horizon-rule.top { top: 22px; }
.transition-horizon-rule.bottom { bottom: 22px; }

/* =====================================================================
 *  SOLUTION SPREAD 鈥?navy band with boardroom photo column
 *  Inject a vertical narrow image into the existing os-personas section.
 * ===================================================================== */

.os-personas-section.os-with-photo {
  position: relative;
  background:
    linear-gradient(180deg, #07111f 0%, #0a1626 100%);
  color: #f7f4ed;
  overflow: hidden;
}

.os-personas-section.os-with-photo .wrap {
  position: relative;
  z-index: 2;
}

.os-personas-section.os-with-photo .section-head .eyebrow {
  color: var(--amber);
}

.os-personas-section.os-with-photo .section-head h2 {
  color: #fff;
}

.os-personas-section.os-with-photo .section-head p,
.os-personas-section.os-with-photo .os-callout p {
  color: rgba(247, 244, 237, 0.78);
}

.os-personas-section.os-with-photo .persona-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
}

.os-personas-section.os-with-photo .persona-role,
.os-personas-section.os-with-photo .persona-question,
.os-personas-section.os-with-photo .persona-gets {
  color: rgba(247, 244, 237, 0.88);
}

.os-personas-section.os-with-photo .persona-icon {
  color: var(--amber);
}

.os-personas-section.os-with-photo .os-cta {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.os-personas-section.os-with-photo .os-cta:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.solution-photo-rail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(180px, 22vw, 320px);
  z-index: 1;
  overflow: hidden;
}

.solution-photo-rail .media-slot {
  width: 100%;
  height: 100%;
}

.solution-photo-rail .media-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) brightness(0.55) contrast(1.05);
}

.solution-photo-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg,
      rgba(7, 17, 31, 0.0) 0%,
      rgba(7, 17, 31, 0.45) 60%,
      rgba(7, 17, 31, 0.95) 100%);
  pointer-events: none;
}

.solution-photo-rail .media-caption,
.solution-photo-rail .media-attribution {
  display: none;
}

@media (max-width: 1100px) {
  .solution-photo-rail { display: none; }
}

/* =====================================================================
 *  CLOSING 鈥?add Hong Kong IFC photo as 18% overlay behind the navy
 *  back cover, plus a corner mark and an updated baseline.
 * ===================================================================== */

.closing-briefing.closing-editorial-cover.with-backdrop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.closing-briefing.closing-editorial-cover.with-backdrop .closing-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.closing-briefing.closing-editorial-cover.with-backdrop .closing-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) brightness(0.45) contrast(1.15) saturate(0.4);
  opacity: 0.32;
}

.closing-briefing.closing-editorial-cover.with-backdrop .closing-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(7, 16, 29, 0.95) 0%,
      rgba(7, 16, 29, 0.75) 50%,
      rgba(7, 16, 29, 0.95) 100%);
}

.closing-briefing.closing-editorial-cover.with-backdrop .wrap {
  position: relative;
  z-index: 2;
}

/* =====================================================================
 *  EDITORIAL SPREAD 鈥?earth photo treatment.
 *  The existing .editor-note-photo styles apply; we add a softer
 *  filter that suits the ISS Earth image and keep a clean caption.
 * ===================================================================== */

.editor-note-photo.editor-note-earth img {
  filter: grayscale(0.42) brightness(0.74) contrast(1.12);
}

.editor-note-photo.editor-note-earth::after {
  background:
    linear-gradient(180deg,
      rgba(6, 7, 10, 0.55) 0%,
      rgba(6, 7, 10, 0.05) 35%,
      rgba(6, 7, 10, 0.05) 65%,
      rgba(6, 7, 10, 0.82) 100%);
}

.editor-note-photo.editor-note-earth .media-caption {
  background: rgba(6, 7, 10, 0.78);
  border-left: 2px solid rgba(245, 248, 252, 0.20);
  color: rgba(255, 255, 255, 0.90);
}

.editor-note-photo.editor-note-boardroom {
  aspect-ratio: 5 / 4 !important;
  align-self: center;
}

.editor-note-photo.editor-note-boardroom img {
  filter: grayscale(0.18) brightness(0.94) contrast(1.03);
  object-position: center;
}

.editor-note-photo.editor-note-boardroom::after {
  background:
    linear-gradient(90deg, rgba(243, 240, 232, 0.03), rgba(243, 240, 232, 0.00) 52%, rgba(17, 17, 21, 0.10)),
    linear-gradient(180deg, rgba(17, 17, 21, 0.02) 0%, rgba(17, 17, 21, 0.00) 58%, rgba(17, 17, 21, 0.42) 100%);
}

.editor-note-photo.editor-note-boardroom .media-caption {
  background: rgba(17, 17, 21, 0.70);
  border-left: 2px solid rgba(245, 248, 252, 0.20);
  color: rgba(255, 255, 255, 0.90);
}

/* =====================================================================
 *  EDITOR'S NOTE 鈥?Big Four board-center treatment.
 *  Light editorial surface, sober typography, practical boardroom image.
 * ===================================================================== */

.editor-note {
  background: #FFFFFF !important;
  color: #111115;
  border-top: 1px solid rgba(17,17,21,.08);
  border-bottom: 1px solid rgba(17,17,21,.08);
  padding-top: clamp(36px, 4vw, 58px) !important;
  padding-bottom: clamp(36px, 4vw, 58px) !important;
}

/* Eyebrow inside text column */
.editor-meta {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  font-family: var(--font-label) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(17, 17, 21, 0.44) !important;
  border-top: none !important;
  padding-top: 0 !important;
  margin-bottom: 14px;
}

.editor-meta::before {
  content: "";
  width: 22px;
  height: 1px;
  background: rgba(17, 17, 21, 0.24);
  opacity: .78;
  flex-shrink: 0;
}

.editor-meta small {
  display: none !important;
}

/* Main quote 鈥?serif italic gold keyword */
.editor-quote {
  color: #111115 !important;
  font-weight: 300 !important;
  font-size: clamp(25px, 2.45vw, 36px) !important;
  margin-bottom: 14px;
}

.editor-quote em {
  font-style: italic;
  color: var(--gold-lt) !important;
}

/* Numbered judgment list 鈥?鍑犱綍 philosophy__pt style */
.editor-judgments {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  border-top: 1px solid rgba(17,17,21,.12);
}

.editor-judgments li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(17,17,21,.10);
  align-items: start;
}

.judgment-num {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--platinum);
  padding-top: 3px;
}

.judgment-text {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.75;
  color: #34343b;
}

/* Prose body text */
.editor-prose {
  color: #626058 !important;
  font-size: 12.5px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
}

/* Image column 鈥?4/5 aspect with bottom gold line */
.editor-note-photo {
  aspect-ratio: 4/3 !important;
  min-width: 420px;
  height: auto !important;
  border-radius: 0 !important;
  border: 0;
  box-shadow: 0 18px 46px rgba(17,17,21,.10);
}

.editor-note-photo::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(to right, transparent, rgba(17,17,21,.20), transparent);
}

/* =====================================================================
 *  BRAND STATEMENT 鈥?era-defining thesis variant.
 *  Replaces the in-page navigation with one giant question.
 * ===================================================================== */

.brand-statement.brand-statement-thesis {
  position: relative;
  padding: clamp(120px, 16vw, 220px) 0 clamp(120px, 16vw, 220px);
  background:
    linear-gradient(180deg, #07101d 0%, #0a1626 100%);
  isolation: isolate;
  overflow: hidden;
}

.brand-statement.brand-statement-thesis::before,
.brand-statement.brand-statement-thesis::after {
  content: "";
  position: absolute;
  left: 50%;
  width: clamp(160px, 22vw, 320px);
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  transform: translateX(-50%);
}
.brand-statement.brand-statement-thesis::before { top: clamp(80px, 10vw, 140px); }
.brand-statement.brand-statement-thesis::after { bottom: clamp(80px, 10vw, 140px); }

.brand-statement.brand-statement-thesis .wrap {
  max-width: 1180px;
  position: relative;
}

.brand-statement.brand-statement-thesis .brand-statement-text {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(42px, 6.4vw, 96px);
  line-height: 1.04;
  font-weight: 500;
  font-style: normal;
  color: #f7f4ed;
  letter-spacing: -0.025em;
}

.brand-statement.brand-statement-thesis .brand-statement-text::after {
  content: "";
  display: block;
  width: clamp(40px, 6vw, 72px);
  height: 2px;
  background: var(--amber);
  margin: clamp(36px, 5vw, 64px) auto 0;
}

/* ===== Editorial three judgments 鈥?replace anxiety-list visual ===== */

.editor-judgments {
  list-style: none;
  padding: 0;
  margin: clamp(24px, 4vw, 40px) 0 clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
}

.editor-judgments li {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: baseline;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(13, 21, 32, 0.12);
}

.editor-judgments .judgment-num {
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--amber);
  letter-spacing: 0;
}

.editor-judgments .judgment-text {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.42;
  color: #111115;
  letter-spacing: -0.005em;
}

/* =====================================================================
 *  CAPABILITY THESIS 鈥?EY "Confidence to reimagine. Capability to realize."
 *  Two-block layout: left rail = eyebrow / brand mark, right block =
 *  giant serif headline + "EY teams give you..." subcopy + Start CTA.
 *  Below: an inverse rhetorical hook ("shape the future or be shaped").
 * ===================================================================== */

.capability-thesis {
  position: relative;
  background: var(--bone, #f7f4ed);
  padding: clamp(96px, 12vw, 160px) 0 clamp(96px, 12vw, 160px);
  isolation: isolate;
  overflow: hidden;
}

.capability-thesis::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(24px, 6vw, 72px);
  right: clamp(24px, 6vw, 72px);
  height: 1px;
  background: rgba(13, 21, 32, 0.12);
}

.capability-thesis::after {
  content: "Carbon Nexus";
  position: absolute;
  bottom: -6vw;
  right: -2vw;
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-size: clamp(180px, 26vw, 380px);
  line-height: 1;
  color: rgba(13, 21, 32, 0.035);
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.04em;
  user-select: none;
}

.capability-thesis .wrap {
  position: relative;
  z-index: 1;
  max-width: 1280px;
}

.cap-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.cap-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  border-top: 2px solid var(--ink);
  width: 220px;
}

.cap-eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.cap-side-sub {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(13, 21, 32, 0.52);
}

.cap-main {
  max-width: 920px;
}

.cap-lead {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(36px, 5.4vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.026em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 clamp(28px, 3.6vw, 44px);
  max-width: 16em;
}

.cap-sub {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.6;
  letter-spacing: -0.003em;
  color: rgba(13, 21, 32, 0.82);
  margin: 0 0 clamp(32px, 4vw, 48px);
  max-width: 64ch;
}

.cap-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 18px 28px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.cap-cta:hover {
  background: var(--ink);
  color: var(--bone);
}

/* Inverse rhetorical hook 鈥?EY's "Will you shape the future or be shaped" */
.cap-hook {
  position: relative;
  margin-top: clamp(80px, 10vw, 140px);
  padding-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid rgba(13, 21, 32, 0.16);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.cap-hook-mark {
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(32px, 3vw, 44px);
  color: var(--amber);
  line-height: 1;
}

.cap-hook-text {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  max-width: 18em;
}

.cap-hook-sub {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: rgba(13, 21, 32, 0.72);
  margin: 0 0 clamp(18px, 2vw, 28px);
  max-width: 64ch;
}

.cap-hook-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
}

.cap-hook-link:hover {
  color: var(--amber);
  border-color: var(--ink);
}

@media (max-width: 900px) {
  .cap-grid,
  .cap-hook {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .cap-side { border-top: none; padding-top: 0; }
  .cap-eyebrow::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--ink);
    vertical-align: middle;
    margin-right: 12px;
  }
  .capability-thesis::after { font-size: 60vw; bottom: -6vw; }
  .cap-lead { font-size: clamp(32px, 9vw, 56px); }
  .cap-hook-text { font-size: clamp(26px, 8vw, 44px); }
}

/* =====================================================================
 *  AUTHORITY STRIP 鈥?EY "400,000+ people across 150+ countries"
 *  hard numerical capability proof. Hairline above and below.
 * ===================================================================== */

.authority-strip {
  position: relative;
  background: #F4F1EA;
  color: #111111;
  padding: clamp(64px, 9vw, 96px) 0 clamp(56px, 7vw, 96px);
  border-top: 1px solid rgba(17, 17, 17, 0.10);
  border-bottom: 1px solid rgba(17, 17, 17, 0.10);
}

.authority-strip .wrap {
  max-width: 1280px;
}

.authority-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.authority-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0 40px 0 0;
  border-right: 1px solid rgba(17, 17, 17, 0.10);
  position: relative;
}

.authority-stat:nth-child(n+2) { padding-left: 40px; }
.authority-stat:last-child { border-right: none; padding-right: 0; }

/* Gold rule line above number 鈥?鍑犱綍 metric__rule */
.authority-stat::before {
  content: "";
  width: 18px;
  height: 2px;
  background: #111111;
  opacity: .18;
  margin-bottom: 20px;
  display: block;
  flex-shrink: 0;
}

.authority-num {
  font-family: var(--font-label);
  font-weight: 800;
  font-size: clamp(48px, 5vw, 70px);
  line-height: 1;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  color: #111111;
  margin-bottom: 12px;
}

.authority-label {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(17, 17, 17, 0.64);
  line-height: 1.65;
}

.authority-sep { display: none; }

.authority-caption {
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid rgba(17, 17, 17, 0.12);
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.42);
  text-align: right;
}

/* =====================================================================
 *  DIFFERENTIATION 鈥?category separation without cards.
 * ===================================================================== */

/* 鈹€鈹€ Differentiation 鈫?鍑犱綍 Mission Band: centered gold rule + serif declaration 鈹€鈹€ */
.differentiation-section {
  background: #141418;
  color: var(--vellum);
  padding: clamp(64px, 8vw, 96px) 0;
  border-top: 1px solid rgba(245,248,252,.08);
  border-bottom: 1px solid rgba(245,248,252,.08);
}

.diff-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

.diff-side { display: none; }

.diff-main {
  max-width: 780px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Gold rule line 鈥?鍑犱綍 mission__rule */
.diff-main::before {
  content: "";
  width: 40px;
  height: 1px;
  background: rgba(245,248,252,.18);
  opacity: .6;
  display: block;
}

.diff-compare {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* The last <p> in diff-compare becomes the main declaration */
.diff-compare p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--vellum);
}

.diff-compare p:first-child {
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.diff-compare p em,
.diff-compare p:last-child em {
  font-style: italic;
  color: var(--gold-lt);
}

.diff-thesis { display: none; }

.diff-footnote {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  line-height: 1.7;
  text-transform: uppercase;
  color: rgba(245,248,252,.30);
}

/* =====================================================================
 *  DRILLDOWN BAR 鈥?three editorial links, no cards.
 * ===================================================================== */

/* 鈹€鈹€ Drilldown Bar 鈫?鍑犱綍 Services section: photography-led service cards 鈹€鈹€ */
.drilldown-bar {
  background: #EDE9E2;
  color: #0D0D10;
  padding: clamp(80px, 10vw, 120px) 0;
}

.drilldown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: none;
  border-bottom: none;
}

.drilldown-item {
  padding: 0 44px 0 0;
  border-right: 1px solid rgba(0,0,0,.10);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #0D0D10;
  transition: none;
}

.drilldown-item:nth-child(n+2) { padding-left: 44px; }
.drilldown-item:last-child { border-right: none; padding-right: 0; }

/* Section header 鈥?鍑犱綍 services__head */
.drilldown-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(0,0,0,.10);
  margin-bottom: 56px;
}

.drilldown-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 300;
  line-height: 1.12;
  color: #0D0D10;
}

.drilldown-h2 em {
  font-style: italic;
  color: #9A7418;
}

.drilldown-sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.8;
  color: #4A4A52;
  max-width: 320px;
  text-align: right;
}

/* Photography image block */
.drilldown-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #141418;
  margin-bottom: 28px;
  border: 1px solid rgba(13, 13, 16, .16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.drilldown-img::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 1px;
  z-index: 1;
  background: rgba(154,116,24,.72);
}

.drilldown-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at calc(100% - 16px) 16px, rgba(154,116,24,.92) 0 2px, transparent 2.5px),
    linear-gradient(to top, rgba(7,7,9,.54) 0%, rgba(7,7,9,.08) 58%, transparent 100%);
  pointer-events: none;
}

.drilldown-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(48%) brightness(.78) contrast(1.06) saturate(.72);
  transition: transform 8s cubic-bezier(0.22,1,0.36,1), filter 0.4s;
  display: block;
}

.drilldown-item:hover .drilldown-img img {
  transform: scale(1.04);
  filter: grayscale(28%) brightness(.9) contrast(1.04) saturate(.82);
}

/* Series number */
.drilldown-n {
  margin: 0 0 10px;
  font-family: var(--font-label);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(154,116,24,.7);
}

.drilldown-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: #0D0D10;
  margin-bottom: 14px;
}

.drilldown-desc {
  display: block;
  margin-top: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: 0;
  text-transform: none;
  color: #4A4A52;
  flex: 1;
}

.drilldown-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  align-self: flex-start;
  font-family: var(--font-label);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7A7A84;
  border-bottom: none;
  padding-bottom: 0;
  transition: color 0.2s, gap 0.2s;
}

.drilldown-item:hover .drilldown-cta {
  color: #9A7418;
  gap: 13px;
}

@media (max-width: 900px) {
  .authority-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
  }
  .diff-grid,
  .drilldown-grid {
    grid-template-columns: 1fr;
  }
  .diff-side {
    border-top: 0;
  }
  .drilldown-item {
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,.10);
    padding: 0 0 48px;
  }
  .drilldown-item:nth-child(n+2) { padding-left: 0; }
  .drilldown-item:last-child { border-bottom: 0; padding-bottom: 0; }
  .drilldown-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .drilldown-sub { text-align: left; max-width: 100%; }
}

@media (max-width: 540px) {
  .authority-row {
    grid-template-columns: 1fr;
  }
}

/* --- Engagement path: spatial project map, not image cards --- */
.engagement-path {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(154,116,24,.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(154,116,24,.045) 1px, transparent 1px),
    #f2efe8;
  background-size: 72px 72px, 72px 72px, auto;
}

.engagement-path::before {
  content: "";
  position: absolute;
  inset: 18% 8% auto auto;
  width: min(620px, 42vw);
  height: min(620px, 42vw);
  border: 1px solid rgba(154,116,24,.12);
  transform: rotateX(62deg) rotateZ(-24deg);
  pointer-events: none;
}

.engagement-path .wrap {
  position: relative;
  z-index: 1;
}

.drilldown-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 50px 0 8px;
}

.drilldown-map-line {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 74px;
  height: 1px;
  background: linear-gradient(90deg, rgba(154,116,24,.18), rgba(154,116,24,.85), rgba(154,116,24,.18));
}

.drilldown-step {
  position: relative;
  color: #0d0d10;
  text-decoration: none;
  min-width: 0;
  perspective: 900px;
}

.drilldown-node {
  position: relative;
  z-index: 2;
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  margin: 0 0 28px;
  border: 1px solid rgba(154,116,24,.55);
  background: #f8f6f0;
  color: #9a7418;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  box-shadow: 0 12px 30px rgba(13,13,16,.08);
}

.drilldown-panel {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  border: 1px solid rgba(13,13,16,.12);
  background: rgba(248,246,240,.78);
  box-shadow: 0 24px 70px rgba(13,13,16,.08);
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease, border-color 220ms ease;
}

.drilldown-panel::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px auto;
  width: 38px;
  height: 1px;
  background: rgba(154,116,24,.65);
}

.drilldown-step:hover .drilldown-panel {
  background: rgba(255,253,247,.92);
  border-color: rgba(154,116,24,.35);
  box-shadow: 0 32px 90px rgba(13,13,16,.12);
  transform: translateY(-8px);
}

.drilldown-question {
  display: block;
  margin: 0 0 22px;
  color: #33333a;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.78;
}

.drilldown-deliverable {
  display: block;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(13,13,16,.10);
  color: #6a665d;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.72;
}

.engagement-path .drilldown-cta {
  color: #9a7418;
}

@media (max-width: 1100px) {
  .drilldown-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }

  .drilldown-map-line {
    display: none;
  }
}

@media (max-width: 720px) {
  .engagement-path {
    background-size: 44px 44px, 44px 44px, auto;
  }

  .drilldown-map {
    display: block;
    padding-top: 28px;
  }

  .drilldown-step {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 16px;
    margin-bottom: 18px;
  }

  .drilldown-step::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 54px;
    bottom: -18px;
    width: 1px;
    background: rgba(154,116,24,.28);
  }

  .drilldown-step:last-child::before {
    display: none;
  }

  .drilldown-node {
    margin: 0;
  }

  .drilldown-panel {
    min-height: 0;
    padding: 24px 22px 24px;
  }
}

/* =====================================================================
 *  METHODOLOGY PAGE 鈥?Vertical Carbon Decision Intelligence
 *
 *  Design logic philosophy (11 principles from reference redesign):
 *
 *  1. 闄ゆ澘鍘熷垯        鈥?No frosted-glass plates; dual-layer gradient overlay
 *  2. 缁嗕綋澹版湜瀛楀瀷瀛? 鈥?weight 300 serif = authority; weight 600 = marketing
 *  3. 鍝佺墝娓╁害婊ら暅    鈥?brightness(0.55) saturate(0.75) on all images
 *  4. 寰汗鐞嗘劅鐭ュ眰    鈥?2% gold grid ::before on text panels (not flat gray)
 *  5. 娓愬彉缂濆悎        鈥?gradient overlay dissolves image/text hard cut
 *  6. 骞界伒閿氱偣        鈥?80px italic roman @ 12% opacity as visual anchor
 *  7. 杩炵画浣?vs 瀛ゅ矝  鈥?gap:2px card grouping creates unified body
 *  8. 瀹屾暣浜や簰浣撳師鍒? 鈥?CTA: fill + padding + radius + icon + hover gap-move
 *  9. 瀹ｈ█閿氬畾        鈥?closing in left/right grid, not floating center
 * 10. 鐪夐绾挎潯瑙勮寖    鈥?line + uppercase text, not plain text prefix
 * 11. 鑷瘖鏂枃鍖?     鈥?decisions documented inline as 鉁?before / 鉁?fix
 * ===================================================================== */

.methodology-page {
  /* 鈹€鈹€ Typography: three-tier hierarchy 鈹€鈹€
   * 鉁?Display serif for authority statements 鈥?weight 300 italic = EY/McKinsey credibility
   * 鉁?Using heavy sans for headings collapses to H5 marketing energy */
  --m-font-display: "Cormorant Garamond", "Source Serif 4", Georgia, "Noto Serif SC", serif;
  --m-font-sans:    "Open Sans", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --m-font-body:    "Noto Sans SC", "Open Sans", "Microsoft YaHei", system-ui, sans-serif;

  /* 鈹€鈹€ Color system 鈥?mapped to global design token layer 鈹€鈹€ */
  --m-void:      var(--void);         /* #06070A 鈥?deepest background */
  --m-ink:       var(--obsidian);     /* #0D0E12 鈥?page body background */
  --m-ink-2:     var(--obsidian-2);   /* #141519 鈥?text panel background */
  --m-ink-3:     var(--obsidian-3);   /* #1C1D24 鈥?hover state */
  --m-gold:      var(--gold-lt);      /* #D4A438 鈥?primary accent */
  --m-gold-lt:   var(--gold-bright);  /* #E8BC50 鈥?em / italic emphasis */
  --m-gold-dim:  var(--gold-glow);    /* rgba dim for backgrounds */
  --m-white:     var(--vellum);       /* #F5F2EC 鈥?warm white, not cold */
  --m-silver:    var(--warm-grey);    /* #A8A49C 鈥?secondary text */
  --m-steel:     var(--stone);        /* #6B6860 鈥?meta text */

  display: block;
  background: var(--m-ink);
  color: var(--m-white);
  overflow-x: hidden;
}

/* Methodology sits on a dark institutional canvas; keep the shared footer
 * visually continuous with the page body. */
body[data-page="methodology"] .site-footer {
  background: var(--void);
  color: rgba(255, 255, 255, 0.76);
  border-top: 1px solid rgba(212,164,56,0.15);
}
body[data-page="methodology"] .footer-grid h4 {
  color: var(--vellum);
}
body[data-page="methodology"] .footer-grid a,
body[data-page="methodology"] .footer-grid span {
  color: rgba(255, 255, 255, 0.62);
}
body[data-page="methodology"] .footer-bottom {
  color: rgba(255, 255, 255, 0.42);
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* =====================================================================
 * HERO 鈥?Entry point
 *
 * 鉁?涔嬪墠: 灞呬腑瀵归綈 + 鍗曞眰 to-top 钂欏眰 + title weight:600 + text-shadow
 *         + 鏃犵湁棰?+ 鏃?CTA 鎸夐挳
 * 鉁?淇:
 *   1. align-items:flex-end 鈥?搴曢儴宸﹀榻愬缓绔嬮噸閲忔劅锛堥潪灞呬腑娴姩锛? *   2. 鍙屽眰娓愬彉锛氬乏鍙筹紙0.88鈫?.20锛変繚鎶ゆ枃瀛楀尯 + 搴曢《锛?.95鈫? @70%锛夌數褰辨檿褰? *   3. filter:brightness(0.55)saturate(0.75) 鏇夸唬 opacity:0.8
 *      opacity 浠呴檷浜紝涓嶅鐞嗚壊娓╋紱filter 鍚屾椂閿佹俯+闄嶉ケ鍜? *   4. title weight:300 琛嚎缁嗕綋锛岀Щ闄?text-shadow锛坱ext-shadow=闅愬舰鑳屾櫙鏉匡級
 *   5. 鐪夐锛?8px 閲戠嚎 + 3px 瀛楄窛 uppercase锛堢墿鐞嗛噸閲忥級
 *   6. 瀹屾暣 CTA锛歠ill+padding+radius+icon锛宧over 鏃?gap 寰Щ
 * ===================================================================== */
.methodology-page .method-hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: flex-end; /* 鉁?搴曢儴閿氬畾 */
  overflow: hidden;
  background: var(--m-void);
}

/* 鉁?宸紓鐐?: 鍝佺墝娓╁害缁熶竴婊ら暅 */
.methodology-page .method-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  filter: brightness(0.58) saturate(0.62) contrast(0.9) sepia(0.08);
  /* 鍥剧墖鍔犺浇澶辫触鏃堕殣钘?alt 鏂囧瓧锛堣鐩栧眰宸叉彁渚涙殫鑹蹭繚鎶わ級 */
  color: transparent;
}

/* 鉁?宸紓鐐?: 鍙屽眰娓愬彉钂欏眰 */
.methodology-page .method-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to right,
      rgba(6,7,10,0.90) 0%,
      rgba(6,7,10,0.66) 38%,
      rgba(88,54,24,0.36) 62%,
      rgba(6,7,10,0.28) 100%
    ),
    linear-gradient(
      to top,
      rgba(6,7,10,0.95) 0%,
      rgba(6,7,10,0.50) 44%,
      rgba(6,7,10,0.12) 72%,
      transparent 100%
    );
  pointer-events: none;
}

/* 鏆栧厜寰厜 鈥?涓庡浘鐗囪壊璋冨懠搴?*/
.methodology-page .method-hero-warm {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      ellipse at 62% 42%,
      rgba(212,164,56,0.10) 0%,
      rgba(212,164,56,0.04) 28%,
      transparent 46%
    ),
    radial-gradient(
      ellipse at 50% 86%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 48%
    );
  pointer-events: none;
}

.methodology-page .method-hero-inner {
  position: relative;
  z-index: 2;
  padding: 0 60px 80px;
  max-width: 700px;
}

/* 鉁?宸紓鐐?0: 鐪夐绾挎潯瑙勮寖 */
.methodology-page .method-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.methodology-page .method-hero-eyebrow-line {
  width: 28px;
  height: 1px;
  background: var(--m-gold);
  flex-shrink: 0;
}
.methodology-page .method-hero-eyebrow-text {
  font-family: var(--m-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--m-gold);
}

/* 鉁?宸紓鐐?: 缁嗕綋澹版湜瀛楀瀷瀛?鈥?weight 300, no text-shadow */
.methodology-page .method-hero-title {
  font-family: var(--m-font-display);
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--m-white);
  margin: 0;
}

/* 鉁?鏂滀綋閲戣壊鎴愬鍘熷垯: em 鍚屾椂瑙﹀彂 italic + gold-lt */
.methodology-page .method-hero-title em {
  font-style: italic;
  color: var(--m-gold-lt);
  display: block;
  margin-bottom: 24px;
}

.methodology-page .method-hero-sub {
  font-family: var(--m-font-body);
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.75;
  max-width: 420px;
  margin-bottom: 36px;
}

/* 鉁?宸紓鐐?: 瀹屾暣浜や簰浣撳師鍒?鈥?dark ghost CTA */
.methodology-page .method-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--m-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--m-gold-lt);
  background: transparent;
  border: 1px solid rgba(212,164,56,0.38);
  padding: 13px 28px;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, gap 0.2s;
}
.methodology-page .method-hero-cta:hover {
  background: var(--m-gold-dim);
  border-color: var(--m-gold);
  gap: 16px; /* 绠ご寰Щ */
}
.methodology-page .method-hero-cta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* =====================================================================
 * INTRO / THESIS BLOCK
 *
 * 鉁?涔嬪墠: border-bottom 纭嚎 + 绾枃瀛?stat
 * 鉁?淇: 绾靛悜閲戣壊鍒嗗壊鍣?+ weight 300 琛嚎寮曡█鏍囬 + em 鏂滀綋閲戣壊
 * ===================================================================== */
.methodology-page .method-intro {
  background: var(--m-ink);
  padding: 100px 60px;
  text-align: center;
}

.methodology-page .method-intro-inner {
  max-width: 900px;
  margin: 0 auto;
}

.methodology-page .method-intro-heading {
  font-family: var(--m-font-display);
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--m-white);
  margin-bottom: 40px;
}
.methodology-page .method-intro-heading em {
  font-style: italic;
  color: var(--m-gold-lt);
}

.methodology-page .method-intro-divider {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--m-gold), transparent);
  margin: 0 auto 40px;
}

.methodology-page .method-intro-text {
  font-family: var(--m-font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--m-silver);
  line-height: 1.8;
  max-width: 560px;
  margin: 0 auto;
}
.methodology-page .method-intro-text strong {
  color: var(--m-white);
  font-weight: 400;
}

/* =====================================================================
 * SPLIT BLOCKS 鈥?Image / Text alternating chapters
 *
 * 鉁?涔嬪墠:
 *   1. 鍥剧墖鍘熻壊鎻掑叆锛屼笌鏆楄壊鍝佺墝绯荤粺鑹插僵鑴辫妭
 *   2. 鍥炬枃涔嬮棿 CSS 甯冨眬纭垏鍓茬嚎
 *   3. 鏂囧瓧渚х函骞虫繁鑹诧紝鏈畬宸ュ崰浣嶆劅
 *   4. 鐪夐浠呮枃瀛楋紝鏃犵墿鐞嗛噸閲? *   5. 鏍囬 weight:600锛岃惀閿€鎰? * 鉁?淇:
 *   1. brightness(0.55) saturate(0.75) 鍝佺墝娓╁害缁熶竴
 *   2. 娓愬彉缂濆悎鍙犲眰婧惰В纭垏鍓? *   3. ::before 2% 閲戣壊缃戞牸寰汗鐞? *   4. 鐪夐 ::before 绾挎潯
 *   5. 鏍囬 weight:300 缁嗚‖绾?+ em 鏂滀綋閲戣壊鎴愬
 * ===================================================================== */
.methodology-page .method-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 580px;
}

/* 鍥剧墖渚?*/
.methodology-page .method-split-media {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  /* 鉁?闃叉鍥剧墖鍔犺浇澶辫触鏃舵祻瑙堝櫒榛樿鐧借壊鍗犱綅鑳屾櫙 */
  background: var(--m-void);
}

/* 鉁?宸紓鐐?: 鍝佺墝娓╁害缁熶竴婊ら暅 */
.methodology-page .method-split-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(0.75);
  transition: filter 0.6s ease, transform 0.8s ease;
  /* 闅愯棌鍥剧墖鍔犺浇澶辫触鏃剁殑 alt 鏂囧瓧锛堥伩鍏嶇櫧鑹插崰浣?榛戝瓧锛?*/
  color: transparent;
}
.methodology-page .method-split-media:hover img {
  filter: brightness(0.65) saturate(0.85);
  transform: scale(1.02);
}

/* 鉁?宸紓鐐?: 娓愬彉缂濆悎 鈥?姝ｅ簭锛堝浘鍦ㄥ彸锛夛細浠庡浘鐗囧乏杈圭紭鍚戝乏娑堣瀺鑷虫枃瀛楄儗鏅壊 */
.methodology-page .method-split-img-fade {
  position: absolute;
  top: 0; left: 0;
  width: 30%; height: 100%;
  background: linear-gradient(to left, transparent, var(--m-ink-2));
  pointer-events: none;
  z-index: 1;
}
/* 鍙嶅簭锛堝浘鍦ㄥ乏锛夛細浠庡浘鐗囧彸杈圭紭鍚戝彸娑堣瀺 */
.methodology-page .method-split-reverse .method-split-img-fade {
  left: auto; right: 0;
  background: linear-gradient(to right, transparent, var(--m-ink-2));
}

/* 搴曢儴閲戣壊绾挎潯瑁呴グ 鈥?閲戣壊绔缁堟湞鍚戞枃瀛楀垪 */
.methodology-page .method-split-img-line {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(to right, var(--m-gold), transparent);
  opacity: 0.6;
  z-index: 1;
}
.methodology-page .method-split-reverse .method-split-img-line {
  background: linear-gradient(to left, var(--m-gold), transparent);
}

/* 鏂囧瓧渚?*/
.methodology-page .method-split-content {
  background: var(--m-ink-2);
  padding: 72px 64px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* 鉁?宸紓鐐?: 寰汗鐞嗘劅鐭ュ眰 鈥?2% 閲戣壊缃戞牸锛屼汉鐪兼劅鐭ユ繁搴︿笉鎰熺煡绾圭悊鏈韩 */
.methodology-page .method-split-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212,164,56,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,164,56,0.02) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.methodology-page .method-split-text {
  position: relative;
  z-index: 1;
  max-width: 420px;
}

/* 鉁?宸紓鐐?0: 鐪夐绾挎潯瑙勮寖 鈥?::before 浼厓绱犵嚎鏉★紝鏃犻渶棰濆 DOM */
.methodology-page .method-split-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--m-font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--m-gold);
  margin-bottom: 20px;
}
.methodology-page .method-split-eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--m-gold);
  flex-shrink: 0;
}

/* 鉁?宸紓鐐?: 缁嗕綋澹版湜瀛楀瀷瀛?*/
.methodology-page .method-split-title {
  font-family: var(--m-font-display);
  font-weight: 300;
  font-size: clamp(32px, 3.5vw, 52px);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--m-white);
  margin: 0 0 24px 0;
}
.methodology-page .method-split-title em {
  font-style: italic;
  color: var(--m-gold-lt);
  display: block;
}

.methodology-page .method-split-sub {
  font-family: var(--m-font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--m-silver);
  line-height: 1.8;
  margin: 0 0 24px 0;
}

.methodology-page .method-split-cite {
  font-family: var(--m-font-sans);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--m-steel);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 16px;
}

/* Reverse: keep explicit order (media=DOM-first stays left) */
.methodology-page .method-split-reverse .method-split-media { order: 1; }
.methodology-page .method-split-reverse .method-split-content { order: 2; }

/* =====================================================================
 * PRINCIPLES / CODA 鈥?Three first-mover pillars
 *
 * 鉁?涔嬪墠:
 *   1. gap:48px 鈥?涓変釜瀛ゅ矝锛屾潈濞佹劅鍒嗘暎
 *   2. pillar-num 24px weight:600 鈥?灏忔爣绛撅紝鏃犺瑙夌┖闂撮敋鐐? *   3. coda-cta opacity hover 鈥?鏃犵澶村井绉? * 鉁?淇:
 *   1. gap:2px + 瀹瑰櫒鑳屾櫙闇插嚭妯℃嫙鍒嗗壊绾?鈥?杩炵画鏁翠綋
 *   2. 骞界伒閿氱偣锛?0px 鏂滀綋缃楅┈鏁板瓧 @ 12% 閫忔槑搴? *   3. 鑳屾櫙涓酱瑁呴グ绾? * ===================================================================== */
.methodology-page .method-coda {
  background: var(--m-void);
  padding: 100px 60px;
  position: relative;
  overflow: hidden;
}

/* 鑳屾櫙涓酱绾胯楗?*/
.methodology-page .method-coda::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: calc(100% + 400px);
  background: linear-gradient(to bottom, transparent, rgba(212,164,56,0.08), transparent);
  pointer-events: none;
}

.methodology-page .method-coda-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* 鉁?宸紓鐐?0: 鐪夐閲戣壊 */
.methodology-page .method-coda-eyebrow {
  display: block;
  font-family: var(--m-font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--m-gold);
  text-align: center;
  margin-bottom: 20px;
}

/* 鉁?宸紓鐐?: 缁嗕綋鏍囬 */
.methodology-page .method-coda-title {
  font-family: var(--m-font-display);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -1.5px;
  color: var(--m-white);
  text-align: center;
  margin: 0 0 80px 0;
}

/* 鉁?宸紓鐐?: 杩炵画浣?鈥?gap:2px + 鑳屾櫙闇插嚭妯℃嫙鍒嗗壊绾匡紝闈?border */
.methodology-page .method-coda-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(212,164,56,0.06); /* 闂撮殭棰滆壊 = 閲戣壊缃戞牸绾?*/
  border: 1px solid rgba(212,164,56,0.10);
  border-radius: 4px;
  overflow: hidden;
}

.methodology-page .method-coda-pillar {
  background: var(--m-ink-2);
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background 0.3s;
}
.methodology-page .method-coda-pillar:hover {
  background: var(--m-ink-3);
}

/* 鉁?宸紓鐐?: 骞界伒閿氱偣
 * 鉁?涔嬪墠: 24px weight:600 gold 鈥?灏忚楗版爣绛撅紝鏃犵┖闂撮敋瀹氭晥鏋? * 鉁?淇: 80px weight:300 italic @ 12% 鈥?澶у瀷骞界伒鍏冪礌浣滃簳灞傝瑙夐噸蹇? *         璐?margin-bottom 鍙犲叆涓嬫柟鍐呭锛屼笅娌変负鑳屾櫙瑁呴グ闈炵嫭绔嬭 */
.methodology-page .method-coda-pillar-num {
  font-family: var(--m-font-display);
  font-size: 80px;
  font-weight: 300;
  font-style: italic;
  color: rgba(212,164,56,0.12);
  line-height: 1.0;
  letter-spacing: -4px;
  margin-bottom: -16px;
  display: block;
  transition: color 0.3s;
}
.methodology-page .method-coda-pillar:hover .method-coda-pillar-num {
  color: rgba(212,164,56,0.22);
}

.methodology-page .method-coda-pillar-tag {
  font-family: var(--m-font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--m-gold);
  margin-bottom: 12px;
  display: block;
}

.methodology-page .method-coda-pillar-name {
  font-family: var(--m-font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--m-white);
  margin: 0 0 14px 0;
  letter-spacing: -0.3px;
}

.methodology-page .method-coda-pillar-sub {
  font-family: var(--m-font-display);
  font-size: 15px;
  font-style: italic;
  color: var(--m-gold-lt);
  line-height: 1.4;
  margin-bottom: 20px;
  letter-spacing: -0.2px;
}

.methodology-page .method-coda-pillar-copy {
  font-family: var(--m-font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--m-silver);
  line-height: 1.75;
  margin: 0 0 24px 0;
  flex: 1;
}

.methodology-page .method-coda-pillar-cite {
  font-family: var(--m-font-sans);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--m-steel);
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 14px;
  line-height: 1.5;
}

/* Old tick hidden 鈥?replaced by ghost number as visual rhythm anchor */
.methodology-page .method-coda-pillar-tick { display: none; }

/* =====================================================================
 * CLOSING STATEMENT
 *
 * 鉁?涔嬪墠: flex 琛岋紝瀹ｈ█鏂囧瓧涓?CTA 骞舵帓 鈥?瀛ょ珛娴姩锛屾棤缁撴瀯閿氱偣
 *         CTA 浠?opacity:0.9 hover 鈥?鏃犵澶村井绉诲彲渚涙€? * 鉁?淇:
 *   1. 瀹屾暣瀹ｈ█鍖哄潡锛氱湁棰?+ 涓绘爣棰?em鏂滀綋閲戣壊) + 鍓枃妗堝乏閿? *   2. grid 1fr/auto 鈥?鏂囨宸?+ CTA 鍙筹紝鍙屾爮缁欏瑷€鍒跺害鎬ч噸閲? *   3. CTA gap 寰Щ鍔ㄦ晥 + SVG 绠ご
 * ===================================================================== */
.methodology-page .method-closing {
  background: var(--m-ink);
  padding: 120px 60px;
  position: relative;
  overflow: hidden;
}

/* 鏆栧厜鑳屾櫙 */
.methodology-page .method-closing::before {
  content: '';
  position: absolute;
  bottom: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(212,164,56,0.06) 0%, transparent 65%);
  pointer-events: none;
}

/* 鉁?宸紓鐐?: 瀹ｈ█閿氬畾 鈥?宸﹀彸鍙屾爮缁撴瀯 */
.methodology-page .method-closing-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 80px;
  align-items: center;
}

/* 鉁?宸紓鐐?0: 鐪夐绾挎潯瑙勮寖 */
.methodology-page .method-closing-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--m-font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--m-gold);
  margin-bottom: 20px;
}
.methodology-page .method-closing-eyebrow::before {
  content: '';
  width: 20px; height: 1px;
  background: var(--m-gold);
}

/* 鉁?宸紓鐐?: weight:300 瀹ｈ█鏍囬 */
.methodology-page .method-closing-h {
  font-family: var(--m-font-display);
  font-size: clamp(36px, 4.5vw, 66px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -2px;
  color: var(--m-white);
  margin-bottom: 20px;
}
.methodology-page .method-closing-h em {
  font-style: italic;
  color: var(--m-gold-lt);
}

.methodology-page .method-closing-sub {
  font-family: var(--m-font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--m-silver);
  line-height: 1.8;
  max-width: 500px;
}

.methodology-page .method-closing-cta-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

/* 鉁?宸紓鐐?: 瀹屾暣浜や簰浣?+ 绠ご寰Щ 鈥?dark ghost CTA */
.methodology-page .method-closing-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--m-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--m-gold-lt);
  background: transparent;
  border: 1px solid rgba(212,164,56,0.38);
  padding: 16px 32px;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, gap 0.2s;
}
.methodology-page .method-closing-cta:hover {
  background: var(--m-gold-dim);
  border-color: var(--m-gold);
  gap: 16px;
}
.methodology-page .method-closing-cta svg {
  width: 14px; height: 14px; flex-shrink: 0;
}

.methodology-page .method-closing-cta-note {
  font-family: var(--m-font-sans);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--m-steel);
  text-align: right;
}

/* =====================================================================
 * REVEAL ANIMATIONS
 * ===================================================================== */
.methodology-page .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--pillar-delay, 0ms);
}
.methodology-page .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .methodology-page .reveal {
    opacity: 1; transform: none; transition: none;
  }
}

/* =====================================================================
 * RESPONSIVE
 * ===================================================================== */
@media (max-width: 992px) {
  .methodology-page .method-hero-inner {
    padding: 0 24px 60px;
  }
  .methodology-page .method-intro {
    padding: 72px 24px;
  }
  .methodology-page .method-split {
    grid-template-columns: 1fr;
  }
  .methodology-page .method-split-reverse .method-split-media,
  .methodology-page .method-split-reverse .method-split-content {
    order: unset;
  }
  .methodology-page .method-split-content {
    padding: 48px 24px;
  }
  .methodology-page .method-split-media {
    min-height: 320px;
  }
  .methodology-page .method-split-img-fade,
  .methodology-page .method-split-reverse .method-split-img-fade {
    display: none; /* no seam needed in stacked layout */
  }
  .methodology-page .method-coda {
    padding: 72px 24px;
  }
  .methodology-page .method-coda-grid {
    grid-template-columns: 1fr;
  }
  .methodology-page .method-closing {
    padding: 80px 24px;
  }
  .methodology-page .method-closing-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .methodology-page .method-closing-cta-wrap {
    align-items: flex-start;
  }
}

/* --- EY-inspired role hub, case studies and subscription band --- */
.role-hub {
  background: #f3f0e8;
  color: #101014;
  padding: clamp(82px, 9vw, 124px) 0 clamp(84px, 9vw, 130px);
  border-top: 1px solid rgba(17, 17, 21, 0.08);
}

.role-hub .wrap,
.featured-cases .wrap,
.insights-subscribe .wrap {
  width: min(var(--max), calc(100vw - 80px));
}

.role-hub-head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.65fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: end;
  margin-bottom: 46px;
}

.role-kicker,
.case-kicker,
.subscribe-kicker {
  position: relative;
  margin: 0 0 22px;
  padding-left: 50px;
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212, 164, 56, 0.55);
}

.role-kicker::before,
.case-kicker::before,
.subscribe-kicker::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 28px;
  height: 1px;
  background: rgba(17, 17, 21, 0.18);
}

.role-hub h2,
.featured-cases h2,
.insights-subscribe h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: 0;
  color: #101014;
}

.role-hub-head > p {
  margin: 0 0 8px;
  color: #66635c;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.85;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(17, 17, 21, 0.14);
  border-left: 1px solid rgba(17, 17, 21, 0.14);
}

.role-card {
  position: relative;
  min-height: 310px;
  display: flex;
  flex-direction: column;
  padding: 32px 30px 30px;
  color: #101014;
  background: rgba(248, 246, 240, 0.72);
  border-right: 1px solid rgba(17, 17, 21, 0.14);
  border-bottom: 1px solid rgba(17, 17, 21, 0.14);
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.role-card:hover {
  background: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(17, 17, 21, 0.09);
}

.role-label {
  margin-bottom: 22px;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212, 164, 56, 0.55);
}

.role-card h3 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 300;
  line-height: 1.18;
  color: #101014;
}

.role-question,
.role-answer {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.75;
}

.role-question { color: #2c2c31; }

.role-answer {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(17, 17, 21, 0.10);
  color: #6b6860;
}

.role-arrow {
  margin-top: auto;
  padding-top: 26px;
  color: rgba(212, 164, 56, 0.55);
  font-size: 22px;
  transition: transform 180ms ease;
}

.role-card:hover .role-arrow { transform: translateX(5px); }

.featured-cases {
  background: #111217;
  color: #f8f6f0;
  padding: clamp(82px, 9vw, 126px) 0 clamp(86px, 9vw, 132px);
}

.featured-cases-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 48px;
}

.featured-cases h2 {
  max-width: 820px;
  color: #f8f6f0;
}

.featured-cases-head a {
  flex: 0 0 auto;
  color: var(--gold-lt);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(197, 154, 45, 0.5);
  padding-bottom: 6px;
}

.featured-cases-head a span {
  display: inline-block;
  transition: transform 180ms ease;
}

.featured-cases-head a:hover span { transform: translateX(4px); }

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.case-card {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  background: #30313A;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
}

.case-card:hover {
  transform: translateY(-4px);
  background: #363741;
  border-color: rgba(255, 255, 255, 0.12);
}

.case-image {
  position: relative;
  height: 250px;
  margin: 0;
  overflow: hidden;
  background: #30313A;
}

.case-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(17, 18, 23, 0.00) 45%, rgba(17, 18, 23, 0.45) 100%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 46%);
  pointer-events: none;
}

.case-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(38%) brightness(0.82) contrast(1.04);
  transform: scale(1);
  transition: filter 520ms ease, transform 720ms ease;
}

.case-card:hover .case-image img {
  filter: grayscale(18%) brightness(0.92) contrast(1.03);
  transform: scale(1.035);
}

.case-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 30px 30px 32px;
}

.case-body span {
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.46);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

.case-body h3 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 300;
  line-height: 1.22;
  color: #FFFFFF;
}

.case-body p {
  margin: auto 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.66);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.8;
}

.insights-subscribe {
  background: #f3f0e8;
  color: #101014;
  padding: clamp(76px, 8vw, 112px) 0;
  border-top: 1px solid rgba(17, 17, 21, 0.10);
}

.insights-subscribe-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.65fr);
  gap: clamp(34px, 6vw, 96px);
  align-items: center;
}

.subscribe-copy p {
  margin: 0;
  color: #625f58;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.85;
}

.subscribe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.subscribe-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid #101014;
  background: #101014;
  color: #f8f6f0;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.subscribe-button:hover {
  background: var(--gold-lt);
  border-color: var(--gold-lt);
}

.subscribe-button.ghost {
  background: transparent;
  color: #101014;
}

.subscribe-button.ghost:hover {
  background: #101014;
  border-color: #101014;
  color: #f8f6f0;
}

@media (max-width: 1080px) {
  .role-hub .wrap,
  .featured-cases .wrap,
  .insights-subscribe .wrap {
    width: min(var(--max), calc(100vw - 56px));
  }

  .role-hub-head,
  .insights-subscribe-grid {
    grid-template-columns: 1fr;
  }

  .role-grid,
  .case-grid {
    grid-template-columns: 1fr;
  }

  .role-card,
  .case-card {
    min-height: 0;
  }

  .case-image {
    height: 300px;
  }
}

@media (max-width: 720px) {
  .role-hub .wrap,
  .featured-cases .wrap,
  .insights-subscribe .wrap {
    width: calc(100vw - 40px);
  }

  .role-kicker,
  .case-kicker,
  .subscribe-kicker {
    padding-left: 38px;
    letter-spacing: 0.14em;
  }

  .role-kicker::before,
  .case-kicker::before,
  .subscribe-kicker::before {
    width: 22px;
  }

  .role-hub h2,
  .featured-cases h2,
  .insights-subscribe h2 {
    font-size: 36px;
  }

  .role-card {
    padding: 28px 22px 26px;
  }

  .featured-cases-head {
    display: grid;
    gap: 24px;
    align-items: start;
  }

  .case-image {
    height: 218px;
  }

  .case-body {
    padding: 26px 22px 28px;
  }

  .subscribe-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* --- Service pathway glass rail + EY-style case carousel --- */
.service-path-glass {
  position: relative;
  min-height: clamp(520px, 58vh, 640px);
  overflow: hidden;
  isolation: isolate;
  background: #101116;
  color: #fff;
}

.service-path-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(26%) brightness(0.62) contrast(1.08) blur(2px);
  transform: scale(1.04);
  transition: transform 900ms ease, filter 500ms ease;
  z-index: -3;
}

.service-path-glass:hover .service-path-bg {
  transform: scale(1.06);
  filter: grayscale(18%) brightness(0.68) contrast(1.06) blur(1.5px);
}

.service-path-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(6, 8, 12, 0.88), rgba(6, 8, 12, 0.50) 44%, rgba(6, 8, 12, 0.70)),
    linear-gradient(180deg, rgba(6, 8, 12, 0.42), rgba(6, 8, 12, 0.30) 44%, rgba(6, 8, 12, 0.84));
}

.service-path-map {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.28;
  background:
    radial-gradient(circle at 72% 34%, rgba(197, 154, 45, 0.20) 0 1px, transparent 1.5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 16.66%),
    linear-gradient(100deg, transparent 0 42%, rgba(197, 154, 45, 0.20) 42.2%, transparent 44%, rgba(197, 154, 45, 0.14) 45%, transparent 48%);
  background-size: 34px 34px, 100% 100%, 100% 100%;
  mix-blend-mode: screen;
}

.service-path-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: inherit;
  padding: clamp(46px, 5vw, 64px) clamp(24px, 4vw, 72px) clamp(34px, 4vw, 48px);
}

.service-path-head {
  display: grid;
  grid-template-columns: minmax(260px, 0.44fr) minmax(0, 0.82fr);
  gap: clamp(22px, 5vw, 80px);
  align-items: end;
  max-width: 1260px;
}

.service-path-kicker {
  grid-column: 1 / -1;
  margin: 0 0 6px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(197, 154, 45, 0.86);
}

.service-path-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.8vw, 76px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.92);
}

.service-path-head p {
  margin: 0;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-body);
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.78;
}

.service-path-rail {
  display: flex;
  min-height: clamp(250px, 28vh, 300px);
  margin-top: clamp(44px, 7vh, 70px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(5px);
}

.service-path-card {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  min-height: clamp(250px, 28vh, 300px);
  padding: 24px 22px 24px;
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03));
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.10);
  transition: flex 320ms cubic-bezier(.22,1,.36,1), background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.service-path-card:hover,
.service-path-card:focus-visible {
  flex: 2.15 1 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.08));
  transform: translateY(-4px);
  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.18), 0 24px 54px rgba(0, 0, 0, 0.24);
}

.service-path-index {
  color: rgba(197, 154, 45, 0.86);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 18px;
}

.service-path-label {
  margin-bottom: auto;
  color: rgba(255, 255, 255, 0.56);
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.service-path-card h3 {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.96);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.25vw, 36px);
  font-weight: 300;
  line-height: 1.14;
}

.service-path-route {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-body);
  font-size: 14px;
}

.service-path-question,
.service-path-answer {
  display: block;
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.72;
}

.service-path-detail {
  display: block;
  overflow: hidden;
  max-height: 72px;
  opacity: 0.86;
  transition: max-height 260ms ease, opacity 220ms ease;
}

.service-path-answer {
  display: block;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.82);
}

.service-path-card:not(:hover):not(:focus-visible) .service-path-answer {
  opacity: 0;
}

.service-path-card:not(:hover):not(:focus-visible) .service-path-detail {
  max-height: 48px;
}

.service-path-card:hover .service-path-detail,
.service-path-card:focus-visible .service-path-detail {
  max-height: 160px;
  opacity: 1;
}

.service-path-arrow {
  margin-top: 22px;
  color: var(--platinum);
  font-size: 22px;
  transition: transform 180ms ease;
}

.service-path-card:hover .service-path-arrow,
.service-path-card:focus-visible .service-path-arrow {
  transform: translateX(5px);
}

.case-carousel {
  background: #2f3038;
  padding: clamp(72px, 7vw, 108px) 0 54px;
  overflow: hidden;
}

.case-carousel-shell {
  width: 100%;
}

.case-carousel .featured-cases-head {
  width: min(var(--max), calc(100vw - 80px));
  margin: 0 auto 54px;
}

.case-carousel #featured-cases-title {
  max-width: none;
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1;
  white-space: nowrap;
}

.case-carousel-viewport {
  width: 100%;
  overflow: visible;
}

.case-carousel-track {
  --case-index: 0;
  display: flex;
  gap: clamp(18px, 2vw, 30px);
  transform: translateX(calc(50vw - (min(1760px, 92vw) / 2) - (var(--case-index) * (min(1760px, 92vw) + clamp(18px, 2vw, 30px)))));
  transition: transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.case-slide {
  flex: 0 0 min(1760px, 92vw);
  opacity: 0.46;
  transform: scale(0.985);
  transition: opacity 360ms ease, transform 360ms ease;
}

.case-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.case-slide-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.95fr);
  gap: clamp(36px, 6vw, 92px);
  align-items: center;
  min-height: clamp(460px, 46vw, 640px);
  padding: clamp(46px, 5vw, 82px);
  color: #fff;
  background: #171820;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.case-slide-copy {
  max-width: 760px;
}

.case-slide-tag {
  display: block;
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-body);
  font-size: 18px;
}

.case-slide-copy h3 {
  margin: 0 0 28px;
  color: var(--vellum);
  font-family: var(--font-display);
  font-size: clamp(34px, 3.5vw, 62px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: 0;
}

.case-slide-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-family: var(--font-body);
  font-size: clamp(17px, 1.35vw, 23px);
  line-height: 1.7;
}

.case-slide-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 38px;
  color: #fff;
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 800;
  border-bottom: 2px solid rgba(255, 255, 255, 0.8);
}

.case-slide-image {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e8e4da;
}

.case-slide-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(18%) brightness(0.94) contrast(1.02);
  transform: scale(1);
  transition: transform 720ms ease, filter 520ms ease;
}

.case-slide-card:hover .case-slide-image img {
  filter: grayscale(4%) brightness(1.02) contrast(1.02);
  transform: scale(1.035);
}

.case-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 38px;
}

.case-control {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.case-control:hover {
  background: #fff;
  color: #171820;
  transform: translateY(-2px);
}

.case-dots {
  display: inline-flex;
  align-items: center;
  gap: 22px;
}

.case-dot {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  cursor: pointer;
}

.case-dot.is-active {
  width: 26px;
  height: 26px;
  background: #fff;
}

.case-pause {
  font-family: var(--font-label);
  font-size: 18px;
}

@media (max-width: 1080px) {
  .service-path-head {
    grid-template-columns: 1fr;
  }

  .service-path-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-slide-card {
    grid-template-columns: 1fr;
  }

  .case-slide-image {
    order: -1;
  }
}

@media (max-width: 720px) {
  .service-path-glass {
    min-height: 0;
  }

  .service-path-inner {
    padding: 58px 20px 48px;
  }

  .service-path-head h2 {
    font-size: 48px;
  }

  .service-path-rail {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    margin-top: 54px;
    border: 0;
    scroll-snap-type: x mandatory;
  }

  .service-path-card {
    flex: 0 0 84vw;
    min-height: 300px;
    scroll-snap-align: start;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
  }

  .service-path-card:hover,
  .service-path-card:focus-visible {
    flex-basis: 84vw;
  }

  .case-carousel {
    padding-top: 62px;
  }

  .case-carousel .featured-cases-head {
    width: calc(100vw - 40px);
  }

  .case-carousel #featured-cases-title {
    font-size: 36px;
    line-height: 1.12;
    white-space: normal;
  }

  .case-carousel-track {
    transform: translateX(calc(20px - (var(--case-index) * (calc(100vw - 40px) + 18px))));
    gap: 18px;
  }

  .case-slide {
    flex-basis: calc(100vw - 40px);
  }

  .case-slide-card {
    min-height: 0;
    padding: 0;
    gap: 0;
  }

  .case-slide-copy {
    padding: 28px 22px 30px;
  }

  .case-slide-copy h3 {
    font-size: 30px;
  }

  .case-slide-copy p {
    font-size: 15px;
  }

  .case-slide-image {
    aspect-ratio: 16 / 10;
  }

  .case-carousel-controls {
    gap: 14px;
  }

  .case-control {
    width: 44px;
    height: 44px;
  }

  .case-dots {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-path-bg,
  .service-path-card,
  .case-carousel-track,
  .case-slide,
  .case-slide-image img {
    transition: none !important;
  }
}

/* --- Role spine agenda v3: Deloitte-register editorial list --- */
.role-spine-agenda.service-path-glass {
  min-height: 0;
  overflow: visible;
}

.role-spine-agenda {
  --rsa-accent:       #D4A438;
  --rsa-accent-dim:   rgba(212, 164, 56, 0.62);
  --rsa-accent-glow:  rgba(212, 164, 56, 0.07);
  --rsa-line:         rgba(255, 255, 255, 0.08);
  --rsa-row-pad:      22px;
  background: var(--void);
  padding: clamp(56px, 6.5vw, 84px) 0;
  min-height: 0;
  position: relative;
}

.role-spine-agenda .service-path-inner {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 880px;
  min-height: 0;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* Short accent bar above the heading 鈥?Deloitte anchor motif */
.role-spine-agenda .service-path-head {
  display: block;
  max-width: 100%;
  padding-top: 22px;
  border-top: 3px solid var(--rsa-accent);
}

.role-spine-agenda .service-path-kicker {
  margin-bottom: 10px;
  color: var(--rsa-accent-dim);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.role-spine-agenda .service-path-head h2 {
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1;
  max-width: none;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--vellum);
}

.role-spine-agenda .service-path-head p {
  max-width: 100%;
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--warm-grey);
}
.role-spine-agenda .service-path-rail {
  display: flex;
  flex-direction: column;
  margin-top: clamp(36px, 4.2vw, 48px);
  border-top: 1.5px solid var(--rsa-accent-dim);
  min-height: 0;
  backdrop-filter: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  gap: 0;
}

.role-spine-agenda .service-path-card {
  display: grid;
  grid-template-columns: 48px 1fr 32px;
  gap: 0 18px;
  align-items: center;
  flex: 0 0 auto;
  min-height: 88px;
  padding: var(--rsa-row-pad) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 2px solid transparent;
  border-right: 0;
  color: var(--vellum);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
  text-decoration: none;
  transition:
    border-left-color 180ms ease,
    background 200ms ease,
    padding-left 200ms ease;
}

.role-spine-agenda .service-path-card:last-child {
  border-bottom: 0;
}

.role-spine-agenda .service-path-card:hover,
.role-spine-agenda .service-path-card:focus-visible,
.role-spine-agenda .service-path-card.is-active {
  align-items: start;
  min-height: 0;
  padding: 26px 0 26px 12px;
  border-left-color: var(--rsa-accent);
  background: var(--rsa-accent-glow);
  flex: 0 0 auto;
  box-shadow: none;
}

/* Reset horizontal flex compression from base :has() rules */
.role-spine-agenda .service-path-rail:has(.service-path-card.is-active) .service-path-card {
  flex: 0 0 auto;
}

.role-spine-agenda .service-path-index {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--rsa-accent-dim);
  padding-top: 0;
  margin-bottom: 0;
  align-self: center;
  transition: color 180ms ease;
}

.role-spine-agenda .service-path-card:hover .service-path-index,
.role-spine-agenda .service-path-card.is-active .service-path-index {
  color: var(--rsa-accent);
}

.role-spine-agenda .service-path-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.role-spine-agenda .service-path-row-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.role-spine-agenda .service-path-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.55vw, 22px);
  font-weight: 300;
  line-height: 1.28;
  color: rgba(245, 248, 252, 0.88);
  opacity: 1;
  max-height: none;
  transition: color 180ms ease;
}

.role-spine-agenda .service-path-card:hover h3,
.role-spine-agenda .service-path-card.is-active h3 {
  color: var(--vellum);
}

.role-spine-agenda .service-path-label {
  font-family: var(--font-label);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(168, 164, 160, 0.45);
  margin-bottom: 0;
  min-height: 0;
  max-height: none;
  opacity: 1;
  align-self: center;
}

.role-spine-agenda .service-path-route {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 10px 0 0;
  padding: 9px 0 9px 12px;
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rsa-accent-dim);
  border-left: 2px solid var(--rsa-accent-dim);
  transition: color 180ms ease, border-color 180ms ease;
}

.role-spine-agenda .service-path-route::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(212, 164, 56, 0.52) 0%,
    rgba(212, 164, 56, 0.16) 58%,
    transparent 100%
  );
}

.role-spine-agenda .service-path-card:hover .service-path-route,
.role-spine-agenda .service-path-card.is-active .service-path-route {
  color: var(--rsa-accent);
  border-left-color: var(--rsa-accent);
}

.role-spine-agenda .service-path-detail {
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  padding-left: 10px;
  border-left: 1px solid transparent;
  transition:
    max-height 270ms ease,
    opacity 230ms ease,
    margin-top 200ms ease,
    border-color 200ms ease;
}

.role-spine-agenda .service-path-card:hover .service-path-detail,
.role-spine-agenda .service-path-card:focus-visible .service-path-detail,
.role-spine-agenda .service-path-card.is-active .service-path-detail {
  max-height: 220px;
  opacity: 1;
  margin-top: 14px;
  padding-left: 12px;
  border-left-color: rgba(212, 164, 56, 0.22);
}

/* Override base non-hover collapse selectors */
.role-spine-agenda .service-path-card:not(:hover):not(:focus-visible) .service-path-detail {
  max-height: 0;
  opacity: 0;
}

.role-spine-agenda .service-path-card:not(:hover):not(:focus-visible) .service-path-answer {
  opacity: 1;
}

.role-spine-agenda .service-path-question {
  display: block;
  color: rgba(200, 212, 226, 0.68);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.68;
}

.role-spine-agenda .service-path-answer {
  display: block;
  margin-top: 8px;
  color: rgba(168, 164, 160, 0.72);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.68;
}

.role-spine-agenda .service-path-artifact {
  display: none;
}

.role-spine-agenda .service-path-short {
  display: none;
}

.role-spine-agenda .service-path-arrow {
  font-size: 16px;
  color: var(--rsa-accent-dim);
  padding-top: 0;
  margin-top: 0;
  align-self: center;
  transition: transform 160ms ease, color 160ms ease;
}

.role-spine-agenda .service-path-card:hover .service-path-arrow,
.role-spine-agenda .service-path-card:focus-visible .service-path-arrow,
.role-spine-agenda .service-path-card.is-active .service-path-arrow {
  align-self: start;
  margin-top: 2px;
  transform: translateX(5px);
  color: var(--rsa-accent);
}

/* Reset :has() collapse animations for horizontal layout */
.role-spine-agenda .service-path-rail:has(.service-path-card.is-active) .service-path-card:not(.is-active) .service-path-label,
.role-spine-agenda .service-path-rail:has(.service-path-card.is-active) .service-path-card:not(.is-active) h3,
.role-spine-agenda .service-path-rail:has(.service-path-card.is-active) .service-path-card:not(.is-active) .service-path-route {
  opacity: 1;
  max-height: none;
  margin: unset;
}

.role-spine-agenda .service-path-rail:has(.service-path-card.is-active) .service-path-card:not(.is-active) .service-path-detail {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.role-spine-agenda .service-path-rail:has(.service-path-card.is-active) .service-path-card.is-active .service-path-detail {
  max-height: 220px;
  opacity: 1;
  margin-top: 14px;
  padding-left: 12px;
  border-left-color: rgba(212, 164, 56, 0.22);
}

@media (max-width: 1080px) {
  .role-spine-agenda .service-path-card {
    grid-template-columns: 44px 1fr 32px;
    gap: 0 16px;
  }
}

@media (max-width: 720px) {
  .role-spine-agenda .service-path-inner {
    max-width: 100%;
    padding: 0 20px;
  }

  .role-spine-agenda .service-path-head h2 {
    font-size: 26px;
  }

  .role-spine-agenda .service-path-rail {
    overflow-x: initial;
    scroll-snap-type: none;
    padding-bottom: 0;
    margin-top: 28px;
  }

  .role-spine-agenda .service-path-card {
    grid-template-columns: 36px 1fr 28px;
    gap: 0 14px;
    padding: 18px 0;
    flex: 0 0 auto;
    min-height: 76px;
    border-bottom: 1px solid rgba(245, 248, 252, 0.10);
    scroll-snap-align: none;
    backdrop-filter: none;
  }

  .role-spine-agenda .service-path-card:hover,
  .role-spine-agenda .service-path-card:focus-visible,
  .role-spine-agenda .service-path-card.is-active {
    flex: 0 0 auto;
  }

  .role-spine-agenda .service-path-rail:has(.service-path-card.is-active) .service-path-card,
  .role-spine-agenda .service-path-rail:has(.service-path-card.is-active) .service-path-card.is-active {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .role-spine-agenda .service-path-card,
  .role-spine-agenda .service-path-detail,
  .role-spine-agenda .service-path-arrow {
    transition: none !important;
  }
}

/* --- Homepage role agenda: Radix Themes Card, surface + asChild ---
 * MIT component relationship: one interactive surface with a flush Inset.
 * The final asChild anchor is owned directly by this vanilla renderer; only
 * the Card/Inset material relationship is translated into Carbon Nexus tokens. */
.role-agenda-section {
  --role-agenda-teal: #63C5B2;
  --role-agenda-card: var(--obsidian);
  --role-agenda-inset: var(--obsidian-2);
  --role-agenda-card-border: rgba(242, 244, 247, 0.12);
  position: relative;
  scroll-margin-top: 16px;
  padding: 78px 0 88px;
  background: var(--void);
  border-top: 1px solid rgba(242, 244, 247, 0.08);
  border-bottom: 1px solid rgba(242, 244, 247, 0.08);
}

.role-agenda-inner {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
}

.role-agenda-head {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.58fr);
  grid-template-rows: auto auto;
  column-gap: clamp(48px, 6vw, 84px);
  align-items: end;
  max-width: none;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(242, 244, 247, 0.09);
}

.role-agenda-kicker {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 10px;
  color: var(--stone);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.role-agenda-head h2 {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  color: var(--vellum);
  font-family: var(--font-display);
  font-size: clamp(38px, 3.1vw, 44px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.role-agenda-intro {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  max-width: 520px;
  margin: 0 0 3px;
  color: var(--warm-grey);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
}

.role-agenda-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 24px;
  margin-top: 24px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.role-agenda-grid-item {
  display: flex;
  min-width: 0;
  height: 100%;
}

.role-agenda-card {
  --role-agenda-pad-inline: 28px;
  display: flex;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-width: 0;
  min-height: 354px;
  width: 100%;
  height: 100%;
  padding: 0;
  flex-direction: column;
  color: #F4F6F8;
  background: var(--role-agenda-card);
  border: 1px solid var(--role-agenda-card-border);
  border-radius: 8px;
  box-shadow: none;
  text-decoration: none;
  transform: translateY(0);
  transition:
    transform 240ms ease,
    border-color 240ms ease;
}

.role-agenda-card-inset {
  display: flex;
  padding: 28px var(--role-agenda-pad-inline) 22px;
  flex-direction: column;
  flex: 0 0 auto;
  background: var(--role-agenda-inset);
  border-bottom: 1px solid rgba(242, 244, 247, 0.08);
}

.role-agenda-card-body {
  display: flex;
  min-width: 0;
  padding: 19px var(--role-agenda-pad-inline) 22px;
  flex: 1 1 auto;
  flex-direction: column;
  background: var(--role-agenda-card);
}

.role-agenda-line {
  display: block;
  width: 32px;
  height: 2px;
  margin-bottom: 18px;
  flex: 0 0 auto;
  background: var(--role-agenda-teal);
  transition: width 240ms ease;
}

.role-agenda-register {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: baseline;
  min-width: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.role-agenda-number {
  display: block;
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.role-agenda-english {
  display: block;
  margin: 0;
  color: var(--role-agenda-teal);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.16em;
  text-align: right;
  text-transform: uppercase;
}

.role-agenda-card h3 {
  margin: 22px 0 0;
  color: #F4F6F8;
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
  transition: color 240ms ease;
}

.role-agenda-thesis {
  margin: 10px 0 0;
  padding-left: 0;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.58;
  text-wrap: balance;
  border-left: 0;
}

.role-agenda-thesis-segment {
  white-space: nowrap;
}

.role-agenda-issues {
  display: grid;
  gap: 6px;
  margin: 0 0 17px;
  padding: 0;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  list-style: none;
  border-top: 0;
}

.role-agenda-issues li {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  column-gap: 11px;
  align-items: start;
  padding: 0;
  border: 0;
}

.role-agenda-issues li::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-top: 0.74em;
  background: rgba(255, 255, 255, 0.34);
}

.role-agenda-cta {
  display: inline-flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  padding: 16px 0 0;
  color: #F4F6F8;
  background: transparent;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  border-top: 0;
  transition: color 240ms ease;
}

.role-agenda-cta > span {
  display: inline-block;
  width: auto;
  min-height: 0;
  align-self: auto;
  flex: 0 0 auto;
  color: var(--role-agenda-teal);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 400;
  border-left: 0;
}

@media (hover: hover) {
  .role-agenda-card:hover {
    color: #F4F6F8;
    background: var(--role-agenda-card);
    border-color: rgba(99, 197, 178, 0.38);
    box-shadow: none;
    transform: translateY(-4px);
  }

  .role-agenda-card:hover .role-agenda-line {
    width: 72px;
  }

  .role-agenda-card:hover h3,
  .role-agenda-card:hover .role-agenda-cta {
    color: #FFFFFF;
  }
}

.role-agenda-card:focus-visible {
  outline: 2px solid var(--role-agenda-teal);
  outline-offset: 3px;
}

@media (max-width: 1120px) {
  .role-agenda-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  .role-agenda-card {
    --role-agenda-pad-inline: 24px;
    min-height: 336px;
  }

  .role-agenda-card-inset {
    padding-top: 24px;
    padding-bottom: 20px;
  }

  .role-agenda-card-body {
    padding-top: 18px;
    padding-bottom: 20px;
  }
}

@media (max-width: 900px) {
  .role-agenda-head {
    display: block;
  }

  .role-agenda-intro {
    max-width: 720px;
    margin: 18px 0 0;
  }
}

@media (max-width: 700px) {
  .role-agenda-section {
    padding: 58px 0 66px;
  }

  .role-agenda-head h2 {
    font-size: 34px;
  }

  .role-agenda-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 28px;
  }

  .role-agenda-card {
    --role-agenda-pad-inline: 22px;
    min-height: 330px;
  }

  .role-agenda-card h3 {
    font-size: 27px;
  }

  .role-agenda-thesis {
    padding-left: 0;
  }

}

/* Keep the two Surface layers optically registered at the widths where
 * longer role names or theses wrap. The minimums only equalise the Inset;
 * the lower agenda surface remains content-led. */
@media (min-width: 1121px) {
  .role-agenda-card-inset {
    min-height: 211px;
  }

  html[lang="en"] .role-agenda-card-inset {
    min-height: 238px;
  }
}

@media (min-width: 801px) and (max-width: 1120px) {
  html[lang="en"] .role-agenda-card-inset {
    min-height: 199px;
  }
}

@media (min-width: 701px) and (max-width: 800px) {
  .role-agenda-card-inset {
    min-height: 205px;
  }

  html[lang="en"] .role-agenda-card-inset {
    min-height: 232px;
  }
}

@media (max-width: 430px) {
  .role-agenda-card-inset {
    min-height: 197px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .role-agenda-card,
  .role-agenda-line,
  .role-agenda-card h3,
  .role-agenda-cta {
    transition: none !important;
  }

  .role-agenda-card:hover {
    transform: none;
  }
}

/* =============================================================
 * EY reference refinement
 * -------------------------------------------------------------
 * Learned from the downloaded EY homepage:
 * - confident black first, light panels only as deliberate contrast
 * - accent color as a signal, not decoration
 * - enterprise cards: thin borders, strong imagery, quiet hover
 * - fixed navigation becomes a glassy institutional bar
 *
 * This layer intentionally preserves Carbon Nexus copy and structure.
 * It only tightens color, spacing, cards, and navigation.
 * ============================================================= */

:root {
  --ey-black: #111118;
  --ey-black-2: #171820;
  --ey-black-3: #20212A;
  --ey-grey-panel: #EAEAF2;
  --ey-light-panel: #F4F1EA;
  --ey-border: rgba(255, 255, 255, 0.075);
  --ey-border-strong: rgba(255, 255, 255, 0.13);
  --ey-ink: #111111;
  --ey-muted: rgba(255, 255, 255, 0.62);
  --ey-gold-signal: #D4A438;
}

/* Navigation: EY-style fixed institutional bar */
.site-header {
  height: 76px;
  background: rgba(17, 17, 24, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav-shell {
  height: 76px;
  padding-inline: clamp(24px, 4.6vw, 72px);
}

.brand strong {
  color: var(--vellum);
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.34em;
}

.main-nav {
  gap: clamp(18px, 2.3vw, 34px);
}

.main-nav a,
.nav-trigger {
  color: rgba(255, 255, 255, 0.66);
}

.main-nav a:hover,
.main-nav a.active,
.nav-group.active .nav-trigger,
.nav-trigger:hover {
  color: var(--vellum);
  border-color: var(--ey-gold-signal);
}

.nav-cta {
  border-color: rgba(212, 164, 56, 0.34);
  background: transparent;
  color: var(--ey-gold-signal);
}

.nav-cta:hover {
  background: rgba(212, 164, 56, 0.08);
  border-color: rgba(212, 164, 56, 0.62);
}

/* Hero: keep the carousel, make the typography more institutional */
.apex-slide-overlay {
  background:
    linear-gradient(90deg, rgba(5, 5, 8, 0.86) 0%, rgba(5, 5, 8, 0.54) 42%, rgba(5, 5, 8, 0.22) 72%, rgba(5, 5, 8, 0.56) 100%),
    linear-gradient(180deg, rgba(5, 5, 8, 0.18) 0%, rgba(5, 5, 8, 0.82) 100%);
}

.apex-slide-eyebrow {
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.apex-slide-h1 {
  max-width: 760px;
  font-weight: 300;
  letter-spacing: -0.035em;
}

.apex-slide-sub {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.66);
}

.apex-slide-cta {
  border-bottom-color: rgba(212, 164, 56, 0.52);
  color: var(--vellum);
}

/* Shared section language: thin rules, confident dark, controlled accent */
.home-insights-journal,
.home-capabilities-strip,
.featured-cases,
.service-path-glass,
.differentiation-section {
  background: var(--ey-black);
  border-top: 1px solid var(--ey-border);
  border-bottom: 1px solid var(--ey-border);
}

.home-insights-journal,
.home-capabilities-strip {
  padding-top: clamp(78px, 8vw, 118px);
  padding-bottom: clamp(82px, 8vw, 126px);
}

.home-insights-eyebrow,
.home-cap-strip-eyebrow,
.case-kicker,
.service-path-kicker,
.subscribe-kicker {
  color: rgba(212, 164, 56, 0.72);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.home-insights-head h2,
.featured-cases h2,
.insights-subscribe h2 {
  font-weight: 300;
  letter-spacing: -0.025em;
}

/* Enterprise cards: EY-like quiet black cards */
.insight-journal-card,
.home-cap-strip-card,
.case-slide-card {
  background: var(--ey-black-2);
  border: 1px solid var(--ey-border);
  box-shadow: none;
}

.insight-journal-card::before,
.home-cap-strip-card::before {
  background: rgba(212, 164, 56, 0.66);
}

.insight-journal-card:hover,
.home-cap-strip-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 164, 56, 0.22);
}

.insight-journal-body,
.home-cap-content {
  background: var(--ey-black-2);
}

.insight-journal-card:hover .insight-journal-body,
.home-cap-strip-card:hover .home-cap-content {
  background: var(--ey-black-3);
}

.insight-journal-tag,
.home-cap-sub,
.case-slide-tag {
  color: rgba(255, 255, 255, 0.52);
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.insight-journal-card h3,
.home-cap-title,
.case-slide-copy h3 {
  color: var(--vellum);
  font-weight: 300;
}

.home-cap-title {
  color: var(--ey-gold-signal);
}

.insight-journal-desc,
.home-cap-desc,
.case-slide-copy p {
  color: rgba(255, 255, 255, 0.68);
}

.insight-journal-image img,
.home-cap-image img,
.case-slide-image img {
  filter: grayscale(28%) brightness(0.84) contrast(1.05);
}

.insight-journal-card:hover .insight-journal-image img,
.home-cap-strip-card:hover .home-cap-image img,
.case-slide-card:hover .case-slide-image img {
  filter: grayscale(12%) brightness(0.96) contrast(1.04);
}

/* Light contrast panels: use sparingly, EY-like grey/ivory */
.authority-strip,
.insights-subscribe {
  background: var(--ey-grey-panel);
  color: var(--ey-ink);
  border-top: 1px solid rgba(17, 17, 17, 0.10);
  border-bottom: 1px solid rgba(17, 17, 17, 0.10);
}

.authority-num,
.authority-label,
.authority-caption,
.subscribe-copy p,
.insights-subscribe h2 {
  color: var(--ey-ink);
}

.authority-label,
.subscribe-copy p {
  opacity: 0.68;
}

.subscribe-button {
  background: var(--ey-ink);
  border-color: var(--ey-ink);
  color: #fff;
}

.subscribe-button:hover {
  background: var(--ey-gold-signal);
  border-color: var(--ey-gold-signal);
  color: var(--ey-ink);
}

.subscribe-button.ghost {
  color: var(--ey-ink);
  border-color: rgba(17, 17, 17, 0.28);
}

.subscribe-button.ghost:hover {
  background: var(--ey-ink);
  border-color: var(--ey-ink);
  color: #fff;
}

/* Closing: more corporate, less decorative */
.closing-briefing.closing-editorial-cover.with-backdrop::before {
  background:
    linear-gradient(90deg, rgba(8, 8, 12, 0.90), rgba(8, 8, 12, 0.52) 52%, rgba(8, 8, 12, 0.84)),
    linear-gradient(180deg, rgba(8, 8, 12, 0.08), rgba(8, 8, 12, 0.92));
}

.closing-briefing.closing-editorial-cover h2 {
  font-weight: 300;
  letter-spacing: -0.03em;
}

@media (max-width: 720px) {
  .site-header,
  .nav-shell {
    height: 68px;
  }

  .home-insights-head,
  .featured-cases-head {
    align-items: flex-start;
  }
}
/* =====================================================================
 * Platform OS page — OpenAI-inspired product surface + 3D trade network
 * ===================================================================== */

body[data-page="platform"] {
  background: #05070a;
}

body[data-page="platform"] .site-footer {
  background: #05070a;
}

.platform-os-page {
  color: #f4f7f8;
  background:
    radial-gradient(circle at 78% 12%, rgba(42, 78, 130, 0.26), transparent 34rem),
    linear-gradient(180deg, #05070a 0%, #0a0d12 42%, #f6f5f0 42%, #f6f5f0 62%, #07090d 62%, #05070a 100%);
  overflow: hidden;
}

.platform-os-hero {
  position: relative;
  min-height: 100vh;
  padding: 116px 0 54px;
  isolation: isolate;
}

.platform-os-bg,
.platform-os-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}

.platform-os-bg {
  background:
    radial-gradient(circle at 68% 35%, rgba(138, 166, 220, 0.18), transparent 20rem),
    radial-gradient(circle at 35% 68%, rgba(212, 164, 56, 0.10), transparent 22rem),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 34%);
}

.platform-os-grid {
  z-index: -1;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 62% 32%, black, transparent 68%);
}

.platform-os-hero-inner,
.platform-os-wrap {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.platform-os-hero-inner {
  min-height: calc(100vh - 170px);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 34px 40px;
}

.platform-os-copy {
  position: relative;
  z-index: 3;
  max-width: 610px;
}

.platform-os-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: rgba(244, 247, 248, 0.64);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.platform-os-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(244, 247, 248, 0.32);
}

.platform-os-copy h1 {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-label);
  font-size: 68px;
  font-weight: 650;
  line-height: 1.03;
  letter-spacing: 0;
}

.platform-os-copy p {
  max-width: 560px;
  margin: 26px 0 0;
  color: rgba(244, 247, 248, 0.72);
  font-size: 18px;
  line-height: 1.78;
}

.platform-os-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.platform-os-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,0.84);
  border-radius: 999px;
  background: #f7f7f2;
  color: #090b0f;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.platform-os-button:hover,
.platform-os-button:focus-visible {
  transform: translateY(-2px);
  background: #ffffff;
}

.platform-os-button.ghost {
  background: rgba(255,255,255,0.04);
  color: #f7f7f2;
  border-color: rgba(255,255,255,0.20);
}

.platform-os-button.ghost:hover,
.platform-os-button.ghost:focus-visible {
  border-color: rgba(255,255,255,0.50);
  background: rgba(255,255,255,0.10);
}

.platform-os-visual {
  position: relative;
  min-height: 610px;
  z-index: 2;
}

.platform-globe {
  position: absolute;
  inset: -44px -56px -10px -30px;
  min-height: 560px;
  opacity: 1;
}

.platform-globe canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter: saturate(1.15) contrast(1.08);
}

.platform-globe-fallback {
  position: absolute;
  inset: 7% 5% 3%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 36%, rgba(210,226,255,0.22), transparent 5rem),
    radial-gradient(circle at 50% 50%, #101a2c 0%, #101a2c 38%, rgba(19,28,43,0.62) 39%, rgba(4,7,12,0.08) 66%, transparent 67%);
  box-shadow: inset -34px -26px 70px rgba(0,0,0,0.64), 0 0 70px rgba(93,132,220,0.16);
  animation: platformGlobeFloat 9s ease-in-out infinite;
}

.platform-globe.is-webgl .platform-globe-fallback {
  opacity: 0;
}

.fallback-orbit,
.fallback-node {
  position: absolute;
  display: block;
}

.fallback-orbit {
  inset: 17%;
  border: 1px solid rgba(216,226,255,0.20);
  border-radius: 50%;
  transform: rotate(var(--rot, 0deg));
}

.orbit-a { --rot: 28deg; }
.orbit-b { --rot: -22deg; inset: 24%; }
.orbit-c { --rot: 62deg; inset: 30%; border-color: rgba(212,164,56,0.32); }

.fallback-node {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f6c85f;
  box-shadow: 0 0 20px rgba(246,200,95,0.78);
  animation: platformPulse 2.4s ease-in-out infinite;
}

.node-a { left: 63%; top: 28%; }
.node-b { left: 36%; top: 48%; animation-delay: 0.4s; }
.node-c { left: 72%; top: 61%; animation-delay: 0.9s; }

.platform-risk-card {
  position: absolute;
  right: 0;
  bottom: 38px;
  width: min(360px, 78%);
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 14px;
  background: rgba(7, 10, 15, 0.78);
  box-shadow: 0 30px 70px rgba(0,0,0,0.42);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.platform-risk-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 45%, transparent 58%);
  transform: translateX(-120%);
  animation: platformScan 4.2s ease-in-out infinite;
}

.risk-card-top,
.risk-card-metric,
.risk-bars span {
  position: relative;
  z-index: 1;
}

.risk-card-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: rgba(244,247,248,0.56);
  font-size: 10px;
  font-family: var(--font-label);
}

.risk-card-top strong {
  color: #f6c85f;
  font-weight: 700;
}

.platform-risk-card h2 {
  position: relative;
  z-index: 1;
  margin: 18px 0;
  color: #ffffff;
  font-size: 17px;
  font-family: var(--font-label);
  letter-spacing: 0;
}

.risk-card-metric {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  color: rgba(244,247,248,0.58);
  font-size: 12px;
}

.risk-card-metric strong {
  color: #ffffff;
}

.risk-bars {
  display: grid;
  gap: 12px;
}

.risk-bars span {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  color: rgba(244,247,248,0.72);
  font-size: 11px;
}

.risk-bars span::after {
  content: "";
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f6c85f var(--bar), rgba(255,255,255,0.16) var(--bar));
}

.risk-bars em {
  font-style: normal;
}

.platform-agent-command {
  grid-column: 1 / -1;
  width: min(920px, 100%);
  margin: 4px auto 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 10px 10px 18px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 20px 80px rgba(0,0,0,0.34);
  backdrop-filter: blur(18px);
}

.command-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f6c85f;
  box-shadow: 0 0 18px rgba(246,200,95,0.72);
}

.platform-agent-command input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ffffff;
  font-family: var(--font-label);
  font-size: 15px;
}

.platform-agent-command button {
  min-width: 72px;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #090b0f;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.platform-os-section {
  position: relative;
  padding: 118px 0;
}

.platform-os-how,
.platform-os-audit {
  background: #f6f5f0;
  color: #101216;
}

.platform-os-modules,
.platform-os-scenario {
  background: #07090d;
  color: #f4f7f8;
}

.platform-os-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.58fr);
  gap: 60px;
  align-items: end;
  margin-bottom: 52px;
}

.platform-os-section-head .platform-os-kicker {
  color: rgba(16,18,22,0.52);
}

.platform-os-modules .platform-os-kicker,
.platform-os-scenario .platform-os-kicker,
.platform-os-cta .platform-os-kicker {
  color: rgba(244,247,248,0.58);
}

.platform-os-section-head h2,
.platform-os-cta h2 {
  margin: 0;
  font-family: var(--font-label);
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 650;
}

.platform-os-section-head p {
  margin: 0;
  color: rgba(16,18,22,0.62);
  font-size: 16px;
  line-height: 1.78;
}

.platform-os-modules .platform-os-section-head p,
.platform-os-scenario .platform-os-section-head p,
.platform-os-cta p {
  color: rgba(244,247,248,0.66);
}

.platform-os-workflow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid rgba(16,18,22,0.12);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.52);
}

.platform-os-workflow article {
  min-height: 280px;
  padding: 26px 22px;
  border-right: 1px solid rgba(16,18,22,0.10);
  display: flex;
  flex-direction: column;
}

.platform-os-workflow article:last-child {
  border-right: 0;
}

.platform-os-workflow span,
.platform-module-num,
.platform-scenario-table span,
.platform-audit-stack span {
  color: #9b741f;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 800;
}

.platform-os-workflow h3 {
  margin: auto 0 14px;
  color: #101216;
  font-family: var(--font-label);
  font-size: 24px;
  letter-spacing: 0;
}

.platform-os-workflow p {
  margin: 0;
  color: rgba(16,18,22,0.62);
  font-size: 14px;
  line-height: 1.72;
}

.platform-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.platform-module-card {
  position: relative;
  min-height: 258px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)),
    #10131a;
  overflow: hidden;
  transition: transform 0.26s ease, border-color 0.26s ease, background 0.26s ease;
  transition-delay: var(--delay);
}

.platform-module-card::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, #f6c85f, transparent);
  opacity: 0.52;
}

.platform-module-card:hover {
  transform: translateY(-6px);
  border-color: rgba(246,200,95,0.38);
  background:
    radial-gradient(circle at 80% 10%, rgba(246,200,95,0.12), transparent 11rem),
    linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)),
    #10131a;
}

.platform-module-card strong {
  display: block;
  margin: 26px 0 8px;
  color: rgba(244,247,248,0.58);
  font-family: var(--font-label);
  font-size: 11px;
}

.platform-module-card h3 {
  margin: 0 0 16px;
  color: #ffffff;
  font-family: var(--font-label);
  font-size: 22px;
  letter-spacing: 0;
}

.platform-module-card p,
.platform-module-card small {
  display: block;
  margin: 0;
  color: rgba(244,247,248,0.68);
  font-size: 13px;
  line-height: 1.72;
}

.platform-module-card small {
  margin-top: 16px;
  color: rgba(244,247,248,0.46);
}

.platform-scenario-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.62fr);
  gap: 30px;
}

.platform-scenario-grid .platform-os-section-head {
  grid-column: 1 / -1;
}

.platform-code-panel {
  align-self: start;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: rgba(255,255,255,0.055);
  box-shadow: 0 28px 80px rgba(0,0,0,0.36);
  overflow: hidden;
}

.code-panel-top {
  display: flex;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  color: rgba(244,247,248,0.54);
  font-family: var(--font-mono);
  font-size: 12px;
}

.code-panel-top em {
  color: #f6c85f;
  font-style: normal;
}

.platform-code-panel pre {
  margin: 0;
  padding: 22px;
  color: #dce8ff;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 2;
  white-space: pre-wrap;
}

.platform-scenario-table {
  display: grid;
  gap: 10px;
}

.platform-scenario-table article {
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.045);
}

.platform-scenario-table strong {
  display: block;
  margin: 6px 0;
  color: #ffffff;
  font-family: var(--font-label);
  font-size: 16px;
}

.platform-scenario-table p {
  margin: 0;
  color: rgba(244,247,248,0.58);
  font-size: 13px;
  line-height: 1.62;
}

.platform-audit-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(340px, 0.66fr);
  gap: 64px;
  align-items: start;
}

.platform-audit-grid .platform-os-section-head {
  display: block;
  margin-bottom: 0;
}

.platform-audit-grid .platform-os-section-head p {
  margin-top: 24px;
}

.platform-audit-stack {
  display: grid;
  gap: 12px;
}

.platform-audit-stack article {
  padding: 22px;
  border: 1px solid rgba(16,18,22,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.62);
}

.platform-audit-stack strong {
  display: block;
  margin-top: 10px;
  color: #101216;
  font-family: var(--font-label);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.5;
}

.platform-os-cta {
  padding: 132px 0;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(96,122,170,0.28), transparent 24rem),
    #05070a;
}

.platform-os-cta .platform-os-wrap {
  max-width: 820px;
}

.platform-os-cta .platform-os-kicker {
  justify-content: center;
}

.platform-os-cta .platform-os-kicker::before {
  display: none;
}

.platform-os-cta h2 {
  color: #ffffff;
}

.platform-os-cta p {
  margin: 22px auto 0;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.76;
}

.platform-os-cta .platform-os-actions {
  justify-content: center;
}

@keyframes platformGlobeFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

@keyframes platformPulse {
  0%, 100% { transform: scale(1); opacity: 0.82; }
  50% { transform: scale(1.72); opacity: 1; }
}

@keyframes platformScan {
  0% { transform: translateX(-120%); opacity: 0; }
  24% { opacity: 1; }
  48%, 100% { transform: translateX(120%); opacity: 0; }
}

@media (max-width: 1020px) {
  .platform-os-hero {
    padding-top: 106px;
  }

  .platform-os-hero-inner {
    grid-template-columns: 1fr;
  }

  .platform-os-copy h1 {
    font-size: 54px;
  }

  .platform-os-visual {
    min-height: 520px;
  }

  .platform-os-section-head,
  .platform-scenario-grid,
  .platform-audit-grid {
    grid-template-columns: 1fr;
  }

  .platform-os-workflow,
  .platform-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-os-workflow article {
    border-bottom: 1px solid rgba(16,18,22,0.10);
  }
}

@media (max-width: 680px) {
  .platform-os-page {
    background: #05070a;
  }

  .platform-os-hero {
    padding: 98px 0 42px;
    min-height: auto;
  }

  .platform-os-hero-inner,
  .platform-os-wrap {
    width: min(100% - 32px, 1180px);
  }

  .platform-os-copy h1 {
    font-size: 40px;
    line-height: 1.08;
  }

  .platform-os-copy p {
    font-size: 16px;
  }

  .platform-os-visual {
    min-height: 390px;
  }

  .platform-globe {
    inset: -12px -32px 50px -32px;
    min-height: 340px;
  }

  .platform-risk-card {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
  }

  .platform-agent-command {
    border-radius: 22px;
    grid-template-columns: auto 1fr;
    padding: 14px;
  }

  .platform-agent-command button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .platform-agent-command input {
    font-size: 13px;
    text-overflow: ellipsis;
  }

  .platform-os-section {
    padding: 76px 0;
  }

  .platform-os-section-head {
    gap: 22px;
    margin-bottom: 34px;
  }

  .platform-os-section-head h2,
  .platform-os-cta h2 {
    font-size: 34px;
  }

  .platform-os-workflow,
  .platform-module-grid {
    grid-template-columns: 1fr;
  }

  .platform-os-workflow article {
    min-height: 210px;
    border-right: 0;
  }

  .platform-module-card {
    min-height: auto;
  }

  .platform-code-panel pre {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-globe-fallback,
  .fallback-node,
  .platform-risk-card::before,
  .platform-module-card,
  .platform-os-button {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================================
 * Platform OS v2 — Codex-style light product launch page
 * ===================================================================== */

body[data-page="platform"] {
  background: #ffffff;
  color: #0f1115;
}

body[data-page="platform"] .site-header {
  background: rgba(13, 17, 27, 0.74);
  color: rgba(248, 250, 252, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

body[data-page="platform"] .nav-link,
body[data-page="platform"] .brand,
body[data-page="platform"] .lang-toggle {
  color: rgba(248, 250, 252, 0.92);
}

body[data-page="platform"] .brand strong,
body[data-page="platform"] .nav-menu a,
body[data-page="platform"] .nav-link,
body[data-page="platform"] .menu-button,
body[data-page="platform"] .hamburger,
body[data-page="platform"] .hamburger::before,
body[data-page="platform"] .hamburger::after {
  color: rgba(248, 250, 252, 0.92);
}

body[data-page="platform"] .hamburger,
body[data-page="platform"] .hamburger::before,
body[data-page="platform"] .hamburger::after {
  background: rgba(248, 250, 252, 0.92);
}

body[data-page="platform"] .site-footer {
  background: #ffffff;
  color: #0f1115;
  border-top-color: rgba(15, 17, 21, 0.10);
}

.platform-os-page {
  color: #0f1115;
  background: #ffffff;
}

.platform-os-hero {
  --mx: 50%;
  --my: 30%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --shift-x: 0px;
  --shift-y: 0px;
  --mock-x: 0px;
  --mock-y: 0px;
  --bg-x: 0px;
  --bg-y: 0px;
  min-height: auto;
  padding: 122px 0 0;
  background:
    radial-gradient(circle at 18% 2%, rgba(76, 98, 145, 0.30), transparent 28rem),
    radial-gradient(circle at 80% 6%, rgba(95, 103, 154, 0.20), transparent 28rem),
    radial-gradient(circle at 50% 40%, rgba(232, 238, 246, 0.82), transparent 34rem),
    linear-gradient(180deg, #101522 0%, #171d2a 22%, #dfe5f2 66%, #f7f8f8 100%);
  overflow: hidden;
}

.platform-os-hero::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,0.10), transparent 18rem),
    radial-gradient(circle at 62% 38%, rgba(146,160,198,0.06), transparent 20rem);
  opacity: 0.32;
}

.platform-os-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,14,22,0.08) 0%, rgba(18,24,36,0.16) 18%, rgba(247,248,248,0.80) 74%, #f7f8f8 100%),
    radial-gradient(circle at 50% 25%, rgba(245,247,250,0.30), transparent 20rem);
  pointer-events: none;
  z-index: 0;
}

.platform-os-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.18;
  filter: blur(0.9px) saturate(0.55);
  overflow: hidden;
  transform: translate3d(var(--bg-x), var(--bg-y), 0);
}

.platform-dot-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.24;
  mix-blend-mode: screen;
  overflow: hidden;
  mask-image: linear-gradient(180deg, black 0%, black 58%, transparent 92%);
}

.platform-dot-field canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: saturate(0.55) contrast(0.9);
}

.platform-os-grid {
  display: none;
}

.platform-os-hero-inner {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: block;
  width: min(1120px, calc(100% - 48px));
  padding-bottom: 88px;
  text-align: center;
}

.platform-ascii-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
}

.platform-ascii-field pre {
  position: absolute;
  margin: 0;
  color: rgba(214,221,232,var(--ascii-opacity));
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.48;
  letter-spacing: 0.34em;
  white-space: pre;
  text-shadow: none;
  user-select: none;
  will-change: transform, opacity;
  transition: transform 0.18s ease-out, opacity 0.22s ease;
}

.ascii-cloud {
  left: -5%;
  top: 3%;
  width: 54vw;
  min-width: 720px;
  opacity: 1;
  transform:
    translate3d(var(--ascii-x), var(--ascii-y), 0)
    skewX(var(--ascii-skew));
  mask-image: linear-gradient(90deg, black 0%, black 78%, transparent 100%);
}

.ascii-stream {
  left: 60%;
  top: 20%;
  opacity: 0.18;
  color: rgba(199,207,218,0.24);
  transform:
    translate3d(var(--ascii-stream-x), var(--ascii-stream-y), 0)
    skewX(var(--ascii-stream-skew));
}

.ascii-route {
  right: 8%;
  top: 25%;
  opacity: 0.16;
  color: rgba(199,207,218,0.22);
  transform:
    translate3d(var(--ascii-route-x), var(--ascii-route-y), 0)
    skewX(var(--ascii-route-skew));
}

.platform-os-copy {
  max-width: 760px;
  margin: 0 auto;
}

.platform-product-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.88), rgba(255,255,255,0.08) 34%),
    radial-gradient(circle at 80% 82%, rgba(212,164,56,0.28), transparent 34%),
    linear-gradient(135deg, #1d2638, #35425f 52%, #1a2131);
  box-shadow: 0 18px 42px rgba(12, 18, 32, 0.28), 0 0 38px rgba(112, 132, 180, 0.12);
}

.platform-product-icon span {
  color: #ffffff;
  font-family: var(--font-label);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}

.platform-os-copy h1 {
  color: #171b22;
  font-family: var(--font-label);
  font-size: clamp(54px, 7vw, 86px);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: 0;
}

.platform-os-copy h1 span {
  display: block;
  white-space: nowrap;
}

.platform-os-copy p {
  max-width: 780px;
  margin: 22px auto 0;
  color: rgba(23,27,34,0.70);
  font-size: 18px;
  line-height: 1.72;
}

.platform-os-actions {
  justify-content: center;
  margin-top: 28px;
}

.platform-os-button {
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #050505;
  color: #ffffff;
  box-shadow: none;
}

.platform-os-button:hover,
.platform-os-button:focus-visible {
  background: #242424;
  transform: translateY(-1px);
}

.platform-os-button.ghost {
  background: rgba(23,27,34,0.075);
  color: #15171b;
  border: 0;
}

.platform-os-button.ghost:hover,
.platform-os-button.ghost:focus-visible {
  background: rgba(15,17,21,0.12);
}

.platform-os-availability {
  margin-top: 22px !important;
  color: rgba(15,17,21,0.54) !important;
  font-size: 13px !important;
}

.platform-os-availability a {
  color: rgba(15,17,21,0.78);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.platform-globe {
  position: absolute;
  right: -18vw;
  top: 0;
  width: 58vw;
  height: 58vw;
  min-height: 520px;
  opacity: 0.20;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.platform-globe canvas {
  filter: blur(1.4px) saturate(0.48) contrast(0.82);
}

.platform-globe-fallback {
  opacity: 0.26;
  background:
    radial-gradient(circle at 42% 36%, rgba(102,129,255,0.22), transparent 5rem),
    radial-gradient(circle at 50% 50%, rgba(92, 113, 236, 0.24) 0%, rgba(105, 121, 244, 0.18) 38%, rgba(255,255,255,0.10) 66%, transparent 67%);
  box-shadow: none;
}

.platform-workspace-mock {
  position: relative;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 360px;
  width: min(980px, 100%);
  min-height: 560px;
  margin: 84px auto 0;
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 14px;
  background: rgba(250,252,253,0.82);
  box-shadow: 0 54px 140px rgba(14, 22, 40, 0.30), 0 0 0 1px rgba(15,17,21,0.05);
  backdrop-filter: blur(24px);
  transform:
    perspective(1400px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translate3d(var(--mock-x), var(--mock-y), 0);
  transform-style: preserve-3d;
  transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.16s ease-out;
}

.platform-os-hero.is-pointer-active .platform-workspace-mock {
  border-color: rgba(255,255,255,0.62);
  box-shadow: 0 62px 150px rgba(14, 22, 40, 0.34), 0 0 0 1px rgba(255,255,255,0.18);
  transform:
    perspective(1400px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translate3d(var(--mock-x), var(--mock-y), 0) !important;
}

.workspace-window-dots {
  position: absolute;
  top: 15px;
  left: 16px;
  display: flex;
  gap: 7px;
  z-index: 4;
}

.workspace-window-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.workspace-window-dots span:nth-child(1) { background: #ff6b5f; }
.workspace-window-dots span:nth-child(2) { background: #f6bf3d; }
.workspace-window-dots span:nth-child(3) { background: #30c76b; }

.workspace-sidebar,
.workspace-chat,
.workspace-diff {
  min-width: 0;
}

.workspace-sidebar {
  padding: 52px 16px 18px;
  background: rgba(224, 230, 239, 0.76);
  border-right: 1px solid rgba(15,17,21,0.08);
  color: #12151a;
}

.workspace-sidebar strong {
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-label);
  font-size: 13px;
}

.workspace-sidebar nav,
.workspace-thread-list {
  display: grid;
  gap: 8px;
}

.workspace-sidebar nav span,
.workspace-thread-list span {
  padding: 9px 10px;
  border-radius: 10px;
  color: rgba(15,17,21,0.72);
  font-size: 13px;
}

.workspace-sidebar .is-active {
  background: rgba(255,255,255,0.72);
  color: #0f1115;
}

.workspace-thread-list {
  margin-top: 28px;
}

.workspace-thread-list small {
  padding: 0 10px;
  color: rgba(15,17,21,0.44);
  font-size: 11px;
}

.workspace-chat {
  padding: 18px 16px;
  background: #ffffff;
  border-right: 1px solid rgba(15,17,21,0.08);
}

.workspace-topbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(15,17,21,0.08);
  color: #0f1115;
  font-size: 13px;
  font-weight: 700;
}

.workspace-topbar em {
  color: rgba(15,17,21,0.42);
  font-style: normal;
  font-weight: 600;
}

.workspace-prompt,
.workspace-response {
  width: 82%;
  margin-top: 24px;
  padding: 15px 17px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.6;
}

.workspace-prompt {
  margin-left: auto;
  background: #eef1f4;
}

.workspace-response {
  background: rgba(250,251,251,0.92);
  border: 1px solid rgba(15,17,21,0.07);
}

.workspace-response strong {
  display: block;
  margin-bottom: 8px;
}

.workspace-response p {
  margin: 0;
  color: rgba(15,17,21,0.72);
}

.workspace-response b {
  color: #0f1115;
}

.workspace-steps {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.workspace-steps span {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f8f9;
  border: 1px solid rgba(15,17,21,0.08);
  color: rgba(15,17,21,0.70);
  font-size: 13px;
}

.platform-agent-command {
  width: 100%;
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 38px;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(15,17,21,0.10);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: none;
  backdrop-filter: none;
}

.platform-agent-command input {
  color: #0f1115;
  font-size: 13px;
}

.platform-agent-command button {
  min-width: 38px;
  min-height: 38px;
  border-radius: 50%;
  background: #111111;
  color: #ffffff;
}

.workspace-diff {
  padding: 18px;
  background: #ffffff;
}

.workspace-status {
  display: flex;
  justify-content: space-between;
  color: rgba(15,17,21,0.66);
  font-size: 13px;
  font-weight: 700;
}

.workspace-status b {
  color: #111111;
}

.workspace-diff article {
  margin-top: 20px;
  padding: 14px;
  border-radius: 12px;
  background: #fbfbfb;
  border: 1px solid rgba(15,17,21,0.07);
}

.workspace-diff strong {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
}

.workspace-diff p {
  margin: 4px 0;
  padding: 5px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
}

.workspace-diff .minus {
  background: #f4e8e8;
  color: #8a3d3d;
}

.workspace-diff .plus {
  background: #e4f0ea;
  color: #2f6650;
}

.platform-role-strip {
  padding: 76px 0 68px;
  background: #ffffff;
}

.platform-role-strip .platform-os-wrap {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  align-items: center;
  text-align: center;
}

.platform-role-strip strong {
  color: #0f1115;
  font-family: var(--font-label);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
}

.platform-credit-band {
  padding: 0 0 110px;
  background: #ffffff;
}

.platform-credit-band .platform-os-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding: 0 28px;
  border-radius: 6px;
  background: #f3f3f1;
}

.platform-credit-band p {
  margin: 0;
  color: rgba(15,17,21,0.74);
  font-size: 14px;
}

.platform-credit-band a {
  flex: 0 0 auto;
  padding: 12px 20px;
  border-radius: 999px;
  background: #050505;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.platform-os-section {
  padding: 100px 0;
}

.platform-os-how,
.platform-os-modules,
.platform-os-scenario,
.platform-os-audit {
  background: #ffffff;
  color: #0f1115;
}

.platform-os-modules {
  scroll-margin-top: 96px;
  position: relative;
  overflow: hidden;
}

.platform-os-modules .platform-os-wrap {
  position: relative;
  z-index: 1;
}

.platform-os-section-head {
  display: block;
  max-width: 860px;
  margin: 0 auto 48px;
  text-align: center;
}

.platform-os-section-head h2,
.platform-os-cta h2 {
  color: #050505;
  font-family: var(--font-label);
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.04;
  font-weight: 650;
  letter-spacing: 0;
}

.platform-os-section-head p {
  max-width: 620px;
  margin: 18px auto 0;
  color: rgba(15,17,21,0.62);
}

.platform-feature-stack {
  display: grid;
  gap: 92px;
}

.platform-feature-block {
  display: grid;
  grid-template-columns: minmax(260px, 0.45fr) minmax(0, 0.55fr);
  gap: 54px;
  align-items: center;
}

.platform-feature-block:nth-child(even) {
  direction: rtl;
}

.platform-feature-block:nth-child(even) > * {
  direction: ltr;
}

.platform-feature-block span,
.platform-module-num,
.platform-scenario-table span,
.platform-audit-stack span {
  color: rgba(15,17,21,0.44);
  font-size: 13px;
}

.platform-feature-block h3 {
  margin: 12px 0 16px;
  color: #050505;
  font-family: var(--font-label);
  font-size: 34px;
  letter-spacing: 0;
}

.platform-feature-block p {
  margin: 0;
  color: rgba(15,17,21,0.74);
  font-size: 18px;
  line-height: 1.62;
}

.platform-feature-block small {
  display: block;
  margin-top: 16px;
  color: rgba(15,17,21,0.54);
  font-size: 15px;
  line-height: 1.7;
}

.platform-feature-block figure {
  margin: 0;
  min-height: 420px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background:
    radial-gradient(circle at 24% 18%, rgba(71, 111, 255, 0.72), transparent 15rem),
    radial-gradient(circle at 80% 20%, rgba(132, 100, 255, 0.54), transparent 14rem),
    linear-gradient(135deg, #4772ff, #e6ebff 72%, #ffffff);
}

.feature-mini-window {
  width: min(310px, 78%);
  padding: 24px;
  border-radius: 20px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 24px 80px rgba(45,62,150,0.18);
}

.feature-mini-window strong,
.feature-mini-window em,
.feature-mini-window span {
  display: block;
}

.feature-mini-window strong {
  color: #0f1115;
  font-size: 16px;
}

.feature-mini-window em {
  margin: 12px 0 22px;
  color: rgba(15,17,21,0.62);
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
}

.feature-mini-window span {
  height: 12px;
  margin-top: 10px;
  border-radius: 999px;
  background: #f0f0f0;
}

.feature-mini-window span:nth-child(3) { width: 94%; }
.feature-mini-window span:nth-child(4) { width: 72%; }
.feature-mini-window span:nth-child(5) { width: 84%; }

.platform-feature-block .platform-feature-visual {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background:
    radial-gradient(circle at 20% 18%, rgba(71, 111, 255, 0.58), transparent 15rem),
    radial-gradient(circle at 78% 16%, rgba(136, 120, 218, 0.36), transparent 14rem),
    linear-gradient(135deg, #587dff, #e8ecff 70%, #ffffff);
}

.platform-feature-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.26) 42%, transparent 58%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 38px);
  opacity: 0.42;
  transform: translateX(-35%);
  animation: platformVisualSweep 7.5s ease-in-out infinite;
}

.feature-agent-card,
.cost-glow-card,
.audit-commit-feed {
  position: relative;
  z-index: 2;
  width: min(360px, 78%);
  border-radius: 20px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 24px 80px rgba(45,62,150,0.18);
  color: #0f1115;
}

.feature-agent-card {
  padding: 24px;
}

.feature-agent-card b,
.cost-glow-card b,
.audit-commit-feed b {
  display: block;
  font-size: 16px;
}

.feature-agent-card p {
  margin: 12px 0 16px;
  color: rgba(15,17,21,0.62);
  font-size: 13px;
}

.feature-agent-card i {
  display: block;
  height: 12px;
  margin-top: 10px;
  border-radius: 999px;
  background: #eceff2;
  transform-origin: left center;
  animation: platformBarRead 2.8s ease-in-out infinite;
}

.feature-agent-card i:nth-of-type(2) {
  width: 72%;
  animation-delay: 0.18s;
}

.feature-agent-card i:nth-of-type(3) {
  width: 84%;
  animation-delay: 0.36s;
}

.agent-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.agent-chip-row span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(15,17,21,0.07);
  color: rgba(15,17,21,0.62);
  font-size: 11px;
}

.access-dot-matrix {
  position: absolute;
  inset: 22px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 18px;
  opacity: 0.62;
}

.access-dot-matrix span {
  width: 6px;
  height: 6px;
  place-self: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  transform: scale(0.72);
  animation: platformDotPulse 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 38ms);
}

.access-scan-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.82), transparent);
  opacity: 0.64;
  animation: platformScanLine 4.8s ease-in-out infinite;
}

.cost-glow-card {
  padding: 26px;
  border: 1px solid rgba(255,255,255,0.58);
}

.cost-glow-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--cost-angle, 0deg), transparent, rgba(255,255,255,0.72), transparent 34%);
  filter: blur(10px);
  opacity: 0.48;
  animation: platformCostAngle 5s linear infinite;
}

.cost-equation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
  color: rgba(15,17,21,0.58);
  font-family: var(--font-mono);
  font-size: 12px;
}

.cost-equation span,
.cost-equation em {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(15,17,21,0.06);
  font-style: normal;
}

.cost-meter {
  height: 10px;
  margin: 18px 0 20px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15,17,21,0.08);
}

.cost-meter i {
  display: block;
  width: 72%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #111827, #8d98b6);
  animation: platformCostMeter 3.8s ease-in-out infinite;
}

.cost-glow-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.cost-glow-card div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(15,17,21,0.56);
  font-size: 12px;
}

.cost-glow-card dt,
.cost-glow-card dd {
  margin: 0;
}

.cost-glow-card dd {
  color: #0f1115;
  font-weight: 700;
}

.platform-feature-block .feature-visual--supply {
  background:
    radial-gradient(circle at 26% 20%, rgba(86, 129, 218, 0.48), transparent 14rem),
    radial-gradient(circle at 76% 70%, rgba(118, 139, 162, 0.28), transparent 16rem),
    linear-gradient(135deg, #dfe7f8, #ffffff 74%);
}

.supply-grid-motion {
  position: absolute;
  inset: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.supply-grid-motion span {
  display: grid;
  place-items: center;
  min-height: 74px;
  border: 1px solid rgba(15,17,21,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.48);
  color: rgba(15,17,21,0.52);
  font-size: 12px;
  animation: platformGridFloat 5.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 120ms);
}

.supply-node-map {
  position: relative;
  width: min(330px, 76%);
  aspect-ratio: 1.45;
}

.supply-node-map .node {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #101522;
  box-shadow: 0 0 0 10px rgba(16,21,34,0.08);
  animation: platformNodePulse 2.8s ease-in-out infinite;
}

.supply-node-map .node-a { left: 12%; top: 48%; }
.supply-node-map .node-b { left: 42%; top: 18%; animation-delay: 0.25s; }
.supply-node-map .node-c { right: 12%; top: 42%; animation-delay: 0.5s; }
.supply-node-map .node-d { left: 52%; bottom: 12%; animation-delay: 0.75s; }

.supply-node-map .route {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(16,21,34,0.46), transparent);
  transform-origin: left center;
  animation: platformRouteFlow 2.6s linear infinite;
}

.supply-node-map .route-a { left: 18%; top: 51%; width: 30%; transform: rotate(-28deg); }
.supply-node-map .route-b { left: 47%; top: 28%; width: 34%; transform: rotate(18deg); animation-delay: 0.35s; }
.supply-node-map .route-c { left: 48%; top: 62%; width: 26%; transform: rotate(-18deg); animation-delay: 0.7s; }

.platform-feature-block .feature-visual--audit {
  background:
    radial-gradient(circle at 22% 18%, rgba(88, 107, 142, 0.42), transparent 15rem),
    linear-gradient(135deg, #eef2f7, #ffffff 72%);
}

.audit-commit-feed {
  display: grid;
  gap: 9px;
  padding: 22px;
  overflow: hidden;
}

.audit-commit-feed p {
  margin: 0;
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(15,17,21,0.045);
  color: rgba(15,17,21,0.68);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(10px);
  animation: platformCommitIn 5.8s ease-in-out infinite;
}

.audit-commit-feed p:nth-child(2) { animation-delay: 0.2s; }
.audit-commit-feed p:nth-child(3) { animation-delay: 0.55s; }
.audit-commit-feed p:nth-child(4) { animation-delay: 0.9s; }
.audit-commit-feed p:nth-child(5) { animation-delay: 1.25s; }
.audit-commit-feed p:nth-child(6) { animation-delay: 1.6s; }

.audit-commit-feed span {
  color: #2f6650;
  font-weight: 800;
}

.platform-feature-block .platform-agent-visual {
  background:
    radial-gradient(circle at 18% 14%, rgba(78, 94, 124, 0.18), transparent 16rem),
    radial-gradient(circle at 82% 20%, rgba(189, 197, 212, 0.30), transparent 18rem),
    linear-gradient(135deg, #eef2f6, #ffffff 76%);
  border: 1px solid rgba(15,17,21,0.06);
}

.platform-feature-block .platform-agent-visual::before {
  background:
    linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.42) 44%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(15,17,21,0.035) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(15,17,21,0.025) 0 1px, transparent 1px 48px);
  opacity: 0.55;
}

.agent-panel {
  position: relative;
  z-index: 2;
  width: min(430px, 82%);
  padding: 18px;
  border: 1px solid rgba(15,17,21,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 28px 90px rgba(26, 35, 54, 0.12);
  color: #11151c;
  backdrop-filter: blur(18px);
}

.agent-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15,17,21,0.07);
}

.agent-panel-top b {
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: 0;
}

.agent-panel-top span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef1f4;
  color: rgba(15,17,21,0.58);
  font-size: 11px;
  font-weight: 700;
}

.scanner-fields,
.cost-input-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.cost-input-grid {
  grid-template-columns: repeat(2, 1fr);
}

.scanner-fields p,
.cost-input-grid p,
.cost-output p {
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  background: #f6f8f9;
  border: 1px solid rgba(15,17,21,0.06);
}

.scanner-fields em,
.cost-input-grid em,
.cost-output em,
.supplier-action span {
  display: block;
  margin-bottom: 5px;
  color: rgba(15,17,21,0.46);
  font-size: 10px;
  font-style: normal;
  text-transform: uppercase;
}

.scanner-fields strong,
.cost-input-grid strong,
.cost-output strong {
  color: #11151c;
  font-size: 12px;
}

.scanner-result {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 6px 10px;
  align-items: center;
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: #11151c;
  color: #ffffff;
}

.scanner-result small {
  grid-column: 2;
  color: rgba(255,255,255,0.66);
  font-size: 11px;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #d8b256;
  box-shadow: 0 0 0 0 rgba(216,178,86,0.36);
  animation: platformStatusPulse 2.2s ease-in-out infinite;
}

.agent-task-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.agent-task-list i {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(15,17,21,0.045);
  color: rgba(15,17,21,0.62);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  animation: platformTaskWake 4.8s ease-in-out infinite;
  animation-delay: var(--d);
}

.cost-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
  font-family: var(--font-mono);
  font-size: 11px;
}

.cost-formula span,
.cost-formula i {
  padding: 7px 8px;
  border-radius: 9px;
  background: rgba(15,17,21,0.055);
  color: rgba(15,17,21,0.64);
  font-style: normal;
}

.cost-output {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cost-output p:first-child strong {
  color: #8a3d3d;
}

.supplier-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding: 12px;
  border-radius: 13px;
  background: #f7f8f9;
  border: 1px solid rgba(15,17,21,0.06);
  animation: platformSupplierFocus 5.8s ease-in-out infinite;
}

.supplier-row:nth-of-type(3) { animation-delay: 0.35s; }
.supplier-row:nth-of-type(4) { animation-delay: 0.7s; }

.supplier-row strong {
  font-size: 12px;
}

.supplier-row span,
.supplier-row em {
  font-size: 11px;
  font-style: normal;
}

.supplier-row span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15,17,21,0.06);
  color: rgba(15,17,21,0.56);
}

.supplier-row em {
  color: rgba(15,17,21,0.46);
}

.supplier-row.is-complete span { background: #e4f0ea; color: #2f6650; }
.supplier-row.is-missing span { background: #f4e8e8; color: #8a3d3d; }

.supplier-action {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: #11151c;
  color: #ffffff;
}

.supplier-action strong {
  display: block;
  font-size: 12px;
  line-height: 1.55;
}

.report-diff {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.report-diff p {
  margin: 0;
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(15,17,21,0.045);
  color: rgba(15,17,21,0.66);
  font-family: var(--font-mono);
  font-size: 11px;
  animation: platformCommitIn 5.8s ease-in-out infinite;
}

.report-diff p:nth-child(2) { animation-delay: 0.32s; }
.report-diff p:nth-child(3) { animation-delay: 0.64s; }

.report-diff span {
  color: #2f6650;
  font-weight: 800;
}

.approval-chain {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.approval-chain i {
  position: relative;
  padding: 9px 6px;
  border-radius: 10px;
  background: #f6f8f9;
  color: rgba(15,17,21,0.56);
  font-size: 10px;
  font-style: normal;
  text-align: center;
  animation: platformApprovalStep 4.6s ease-in-out infinite;
}

.approval-chain i:nth-child(2) { animation-delay: 0.3s; }
.approval-chain i:nth-child(3) { animation-delay: 0.6s; }
.approval-chain i:nth-child(4) { animation-delay: 0.9s; }

.vault-seal {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 13px;
  background: #11151c;
  color: #ffffff;
}

.vault-seal span {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255,255,255,0.48);
  border-radius: 999px;
  background: radial-gradient(circle, #d8b256 0 36%, transparent 38%);
  animation: platformSealPulse 2.8s ease-in-out infinite;
}

.vault-seal strong {
  font-size: 12px;
}

.platform-module-grid {
  position: relative;
  z-index: 2;
  gap: 18px;
}

.platform-grid-motion-bg {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 0;
  width: 150vw;
  height: 760px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 16px;
  transform: translate(-50%, -50%) rotate(-11deg);
  transform-origin: center;
  opacity: 0.24;
  pointer-events: none;
  user-select: none;
  mask-image: radial-gradient(ellipse at center, black 0%, black 54%, transparent 76%);
}

.platform-grid-motion-bg::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 50%, rgba(40,46,60,0.16), transparent 34rem),
    linear-gradient(90deg, rgba(15,17,21,0.03), transparent);
}

.platform-grid-motion-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(220px, 1fr));
  gap: 16px;
  will-change: transform;
}

.platform-grid-motion-item {
  min-height: 148px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 22px;
  border: 1px solid rgba(15,17,21,0.10);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(238,241,244,0.78));
  box-shadow: 0 22px 60px rgba(26,35,54,0.08);
  color: #10141b;
}

.platform-grid-motion-item b {
  font-family: var(--font-label);
  font-size: 18px;
}

.platform-grid-motion-item em {
  color: rgba(15,17,21,0.46);
  font-size: 11px;
  font-style: normal;
}

.platform-module-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.88);
  border-color: rgba(15,17,21,0.08);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(26,35,54,0.06);
  backdrop-filter: blur(14px);
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}

.platform-module-card::before {
  background: linear-gradient(90deg, transparent, rgba(216,178,86,0.48), transparent);
  transform: translateX(-70%);
  animation: platformCardScanner 8s ease-in-out infinite;
  animation-delay: var(--delay);
}

.platform-module-card:hover {
  transform: translateY(-4px);
  border-color: rgba(216,178,86,0.36);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 24px 70px rgba(26,35,54,0.12);
}

.platform-module-card strong,
.platform-module-card p,
.platform-module-card small {
  color: rgba(15,17,21,0.62);
}

.platform-module-card h3 {
  color: #0f1115;
}

.platform-module-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.platform-module-card-top em {
  padding: 5px 9px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 50%, rgba(166,244,207,0.35) 0 3px, transparent 4px),
    #eef1f4;
  color: rgba(15,17,21,0.56);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(15,17,21,0.03);
}

.platform-module-card:hover .platform-module-card-top em {
  background: rgba(216,178,86,0.16);
  color: rgba(15,17,21,0.72);
}

.platform-module-card .module-mini {
  margin: 18px 0 18px;
}

.platform-module-card .module-mini-agent strong,
.platform-module-card .module-mini-agent span,
.platform-module-card .module-mini-agent em {
  background: rgba(15,17,21,0.06);
  color: rgba(15,17,21,0.62);
}

.platform-module-card:hover .module-mini {
  border-color: rgba(216,178,86,0.26);
}

.platform-os-architecture {
  position: relative;
  isolation: isolate;
  min-height: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "policy access market"
    "supplier core cost"
    "vault report board";
  gap: 18px;
  padding: 46px;
  border: 1px solid rgba(59,70,92,0.30);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(216,178,86,0.16), transparent 17rem),
    radial-gradient(circle at 18% 14%, rgba(118,138,172,0.22), transparent 20rem),
    radial-gradient(circle at 82% 84%, rgba(79,95,124,0.18), transparent 20rem),
    linear-gradient(90deg, rgba(73,85,108,0.18) 1px, transparent 1px),
    linear-gradient(0deg, rgba(73,85,108,0.14) 1px, transparent 1px),
    #eef1f3;
  background-size: auto, auto, auto, 44px 44px, 44px 44px, auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.72), 0 32px 120px rgba(31,39,55,0.10);
  overflow: hidden;
}

.platform-os-architecture::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(55,67,90,0.18);
  border-radius: 22px;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(216,178,86,0.24) 48.1% 48.25%, transparent 48.4%),
    linear-gradient(0deg, transparent 0 48%, rgba(216,178,86,0.18) 48.1% 48.25%, transparent 48.4%);
  pointer-events: none;
}

.platform-os-architecture::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.58) 46%, transparent 62%);
  transform: translateX(-65%);
  animation: platformChipScan 9s ease-in-out infinite;
}

.os-shape-grid {
  position: absolute;
  inset: 18px;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  pointer-events: none;
  opacity: 0.76;
}

.os-shape-grid i {
  position: relative;
  border-right: 1px solid rgba(15,17,21,0.025);
  border-bottom: 1px solid rgba(15,17,21,0.025);
}

.os-shape-grid i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(61,75,100,0.24);
  border-radius: 3px;
  transform: translate(-50%, -50%) scale(0.72);
  opacity: 0.35;
  animation: platformShapeWake 8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 55ms);
}

.os-architecture-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.78;
}

.os-architecture-lines span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(49,61,84,0.70), rgba(216,178,86,0.86), transparent);
  transform-origin: left center;
  animation: platformDataLine 4.8s linear infinite;
}

.os-architecture-lines span:nth-child(1) { transform: rotate(0deg); }
.os-architecture-lines span:nth-child(2) { transform: rotate(90deg); animation-delay: 0.7s; }
.os-architecture-lines span:nth-child(3) { transform: rotate(35deg); animation-delay: 1.4s; }
.os-architecture-lines span:nth-child(4) { transform: rotate(145deg); animation-delay: 2.1s; }

.os-core-card,
.os-module-node {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(50,62,84,0.26);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.84), rgba(246,248,249,0.74));
  box-shadow: 0 28px 90px rgba(26,35,54,0.13), inset 0 1px 0 rgba(255,255,255,0.94);
  backdrop-filter: blur(18px);
  color: #10141b;
}

.os-core-card > :not(.os-core-ports):not(.os-core-pinrail),
.os-module-node > *:not(.module-chip-pins) {
  position: relative;
  z-index: 1;
}

.os-module-node::before,
.os-core-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 0%, rgba(216,178,86,0.28) 44%, rgba(255,255,255,0.72) 50%, transparent 62%);
  opacity: 0;
  transform: translateX(-70%);
  pointer-events: none;
  animation: platformCardScanner 7.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 240ms);
}

.os-module-node::after,
.os-core-card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(216,178,86,0.94), transparent);
  opacity: 0.88;
}

.os-core-card {
  grid-area: core;
  align-self: center;
  justify-self: center;
  z-index: 3;
  width: 100%;
  min-height: 300px;
  padding: 28px;
  border-radius: 24px;
  border-color: rgba(216,178,86,0.38);
  background:
    radial-gradient(circle at 50% 0%, rgba(216,178,86,0.13), transparent 12rem),
    linear-gradient(180deg, rgba(17,21,28,0.98), rgba(34,41,55,0.98));
  color: #ffffff;
  box-shadow: 0 34px 130px rgba(18,24,36,0.30), 0 0 0 1px rgba(216,178,86,0.12), inset 0 1px 0 rgba(255,255,255,0.08);
  animation: platformCoreBreathe 4.8s ease-in-out infinite;
}

.os-core-ports {
  position: absolute;
  inset: -7px;
  pointer-events: none;
}

.os-core-ports i {
  position: absolute;
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: rgba(216,178,86,0.52);
  box-shadow: 0 0 18px rgba(216,178,86,0.18);
  animation: platformPortPulse 3.2s ease-in-out infinite;
}

.os-core-ports i:nth-child(1) { left: 28%; top: 0; }
.os-core-ports i:nth-child(2) { right: 28%; bottom: 0; animation-delay: .4s; }
.os-core-ports i:nth-child(3) { left: -11px; top: 52%; width: 3px; height: 26px; animation-delay: .8s; }
.os-core-ports i:nth-child(4) { right: -11px; top: 34%; width: 3px; height: 26px; animation-delay: 1.2s; }

.os-core-pinrail {
  position: absolute;
  display: flex;
  gap: 6px;
  pointer-events: none;
}

.os-core-pinrail i {
  display: block;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(216,178,86,0.68), rgba(139,116,61,0.46));
  box-shadow: 0 0 10px rgba(216,178,86,0.16);
}

.pinrail-top,
.pinrail-bottom {
  left: 24px;
  right: 24px;
  justify-content: center;
}

.pinrail-top { top: -10px; }
.pinrail-bottom { bottom: -10px; }
.pinrail-top i,
.pinrail-bottom i {
  width: 8px;
  height: 14px;
}

.pinrail-left,
.pinrail-right {
  top: 32px;
  bottom: 32px;
  flex-direction: column;
  justify-content: center;
}

.pinrail-left { left: -10px; }
.pinrail-right { right: -10px; }
.pinrail-left i,
.pinrail-right i {
  width: 14px;
  height: 8px;
}

.os-core-card h3,
.os-core-card strong,
.os-core-card p {
  color: inherit;
}

.os-core-card h3 {
  margin: 16px 0 6px;
  font-family: var(--font-label);
  font-size: 27px;
}

.os-core-card > strong {
  display: block;
  color: rgba(255,255,255,0.62);
  font-size: 12px;
}

.os-core-card p {
  margin: 18px 0 0;
  color: rgba(255,255,255,0.66);
  font-size: 12px;
  line-height: 1.6;
}

.os-module-orbit {
  display: contents;
}

.os-module-node {
  width: auto;
  min-height: 230px;
  padding: 18px;
  border-radius: 20px;
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
  animation: platformNodeWake 8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 280ms);
}

.os-module-node:hover {
  z-index: 4;
  transform: translateY(-7px);
  border-color: rgba(216,178,86,0.62);
  box-shadow: 0 38px 110px rgba(26,35,54,0.20), 0 0 0 1px rgba(216,178,86,0.12);
}

.module-chip-pins {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -6px;
  display: flex;
  justify-content: center;
  gap: 7px;
  pointer-events: none;
}

.module-chip-pins i {
  width: 7px;
  height: 10px;
  border-radius: 2px;
  background: rgba(70,82,106,0.28);
}

.module-mini-trade-access-scanner { grid-area: access; }
.module-mini-carbon-cost-engine { grid-area: cost; }
.module-mini-carbon-market-desk { grid-area: market; }
.module-mini-supplier-carbon-hub { grid-area: supplier; }
.module-mini-compliance-report-studio { grid-area: report; }
.module-mini-boardroom-intelligence { grid-area: board; }
.module-mini-policy-radar { grid-area: policy; }
.module-mini-audit-vault { grid-area: vault; }

.os-node-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.os-node-top em {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15,17,21,0.06);
  color: rgba(15,17,21,0.48);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.os-core-card .os-node-top em {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.64);
}

.os-module-node > strong {
  display: block;
  margin-top: 14px;
  color: rgba(15,17,21,0.52);
  font-size: 11px;
}

.os-module-node h3 {
  margin: 6px 0 10px;
  color: #050505;
  font-family: var(--font-label);
  font-size: 17px;
  letter-spacing: 0;
}

.os-module-node p {
  margin: 0;
  color: rgba(15,17,21,0.58);
  font-size: 12px;
  line-height: 1.55;
}

.module-mini {
  position: relative;
  height: 86px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(50,62,84,0.14);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.70), rgba(238,242,246,0.72)),
    repeating-linear-gradient(90deg, rgba(50,62,84,0.06) 0 1px, transparent 1px 22px);
}

.module-mini::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(216,178,86,0.24) 44%, transparent 55%);
  opacity: 0;
  transform: translateX(-80%);
  animation: platformMiniScan 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 120ms);
}

.os-core-card .module-mini {
  height: 116px;
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.07);
}

.module-mini-access,
.module-mini-agent {
  display: grid;
  gap: 6px;
  padding: 12px;
}

.module-mini-access span,
.module-mini-agent span,
.module-mini-agent strong,
.module-mini-agent em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.64);
  color: rgba(15,17,21,0.62);
  font-size: 10px;
  font-style: normal;
}

.module-mini-access strong {
  padding: 7px 8px;
  border-radius: 8px;
  background: #11151c;
  color: #ffffff;
  font-size: 10px;
  box-shadow: inset 0 0 0 1px rgba(216,178,86,0.22);
}

.module-mini-agent strong,
.module-mini-agent span,
.module-mini-agent em {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.72);
}

.module-mini-cost {
  display: grid;
  place-items: center;
  text-align: center;
}

.module-mini-cost p {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  height: 7px;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15,17,21,0.08);
}

.module-mini-cost p span {
  display: block;
  width: 70%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #11151c, #8791a6);
  animation: platformCostMeter 3.8s ease-in-out infinite;
}

.module-mini-cost strong {
  margin-top: 15px;
  color: #8a3d3d;
  font-size: 20px;
}

.module-mini-cost em,
.module-mini-market span,
.module-mini-supplier em,
.module-mini-board em,
.module-mini-radar em {
  position: absolute;
  left: 12px;
  bottom: 10px;
  color: rgba(15,17,21,0.46);
  font-size: 10px;
  font-style: normal;
}

.module-mini-market i {
  position: absolute;
  bottom: 22px;
  width: 2px;
  border-radius: 999px;
  background: #11151c;
  animation: platformMarketBars 3.6s ease-in-out infinite;
}

.module-mini-market i:nth-child(1) { left: 22%; height: 28px; }
.module-mini-market i:nth-child(2) { left: 38%; height: 44px; animation-delay: .2s; }
.module-mini-market i:nth-child(3) { left: 54%; height: 34px; animation-delay: .4s; }
.module-mini-market i:nth-child(4) { left: 70%; height: 52px; animation-delay: .6s; }

.module-mini-supplier {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.module-mini-supplier span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(15,17,21,0.08);
  color: rgba(15,17,21,0.62);
  font-size: 12px;
  font-weight: 800;
}

.module-mini-supplier .ok { background: #e4f0ea; color: #2f6650; }
.module-mini-supplier .warn { background: #f4e8e8; color: #8a3d3d; }

.module-mini-report,
.module-mini-vault {
  display: grid;
  gap: 7px;
  padding: 12px;
}

.module-mini-report span,
.module-mini-vault span {
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(50,62,84,0.12), rgba(50,62,84,0.06));
}

.module-mini-report span:nth-child(1) { width: 78%; }
.module-mini-report span:nth-child(2) { width: 54%; }
.module-mini-report span:nth-child(3) { width: 68%; }

.module-mini-report strong,
.module-mini-vault strong {
  align-self: end;
  color: #2f6650;
  font-size: 10px;
}

.module-mini-board {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 10px;
  padding-bottom: 24px;
}

.module-mini-board i {
  width: 18px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #11151c, #9099aa);
  animation: platformMarketBars 3.8s ease-in-out infinite;
}

.module-mini-radar {
  display: grid;
  place-items: center;
}

.module-mini-radar span {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(15,17,21,0.16);
  border-radius: 999px;
  background:
    radial-gradient(circle, #11151c 0 4px, transparent 5px),
    conic-gradient(from 0deg, rgba(216,178,86,0.34), transparent 36%);
  animation: platformRadarSpin 4.4s linear infinite;
}

.module-mini-vault span:nth-child(1) { width: 62%; }
.module-mini-vault span:nth-child(2) { width: 86%; }
.module-mini-vault span:nth-child(3) { width: 48%; }

.platform-module-card .module-mini-tech {
  height: 118px;
  isolation: isolate;
  border-color: rgba(84, 106, 145, 0.26);
  background:
    radial-gradient(circle at 14% 18%, rgba(100, 139, 255, 0.24), transparent 8rem),
    radial-gradient(circle at 86% 20%, rgba(216, 178, 86, 0.18), transparent 7rem),
    linear-gradient(180deg, #101621 0%, #151b25 58%, #0d1118 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -18px 38px rgba(0,0,0,0.18),
    0 18px 50px rgba(24,35,58,0.16);
  color: rgba(248,250,252,0.92);
}

.platform-module-card .module-mini-tech::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent);
}

.platform-module-card .module-mini-tech::after {
  opacity: 0.55;
  background: linear-gradient(105deg, transparent 0%, rgba(158,184,255,0.20) 42%, rgba(255,255,255,0.42) 49%, transparent 60%);
  animation: platformTechSweep 4.8s ease-in-out infinite;
  animation-delay: var(--delay);
}

.platform-module-card:hover .module-mini-tech {
  border-color: rgba(216,178,86,0.46);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -18px 38px rgba(0,0,0,0.20),
    0 24px 72px rgba(24,35,58,0.24),
    0 0 0 1px rgba(216,178,86,0.10);
}

.platform-module-card .module-mini-tech > * {
  position: relative;
  z-index: 1;
}

.platform-module-card .module-mini-tech span,
.platform-module-card .module-mini-tech strong,
.platform-module-card .module-mini-tech em,
.platform-module-card .module-mini-tech b {
  color: inherit;
  font-family: var(--font-label);
  letter-spacing: 0;
}

.platform-module-card .module-mini-access {
  grid-template-columns: 1fr 0.8fr;
  align-content: end;
  padding: 14px;
}

.platform-module-card .module-mini-access .scan-beam {
  position: absolute;
  inset: 12px auto 12px 12px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(130,166,255,0.92), rgba(216,178,86,0.78), transparent);
  box-shadow: 0 0 22px rgba(130,166,255,0.45);
  animation: platformAccessScan 2.9s ease-in-out infinite;
}

.platform-module-card .module-mini-access span {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.07);
  color: rgba(231,236,245,0.78);
  font-size: 10px;
}

.platform-module-card .module-mini-access strong {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border: 1px solid rgba(216,178,86,0.38);
  background: linear-gradient(90deg, rgba(216,178,86,0.18), rgba(255,255,255,0.05));
  color: #f7d575;
  font-size: 10px;
}

.platform-module-card .module-mini-access i {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(circle, rgba(255,255,255,0.88) 0 3px, transparent 4px),
    conic-gradient(from 120deg, rgba(216,178,86,0.32), transparent 42%);
  animation: platformRadarSpin 5.6s linear infinite;
}

.platform-module-card .module-mini-cost .cost-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  background: conic-gradient(from 20deg, #8fb7ff 0 68%, rgba(255,255,255,0.11) 69% 100%);
  box-shadow: 0 0 34px rgba(110,148,255,0.18);
  animation: platformCostOrbit 6s linear infinite;
}

.platform-module-card .module-mini-cost .cost-orbit::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  background: #121923;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.platform-module-card .module-mini-cost b {
  z-index: 1;
  color: #ffd3d3;
  font-size: 19px;
}

.platform-module-card .module-mini-cost em {
  color: rgba(231,236,245,0.58);
}

.platform-module-card .module-mini-market {
  display: grid;
  place-items: center;
}

.platform-module-card .module-mini-market svg {
  width: 84%;
  height: 72px;
  overflow: visible;
}

.platform-module-card .module-mini-market svg path {
  fill: none;
  stroke: url("#none");
  stroke: #9cbcff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 260;
  filter: drop-shadow(0 0 10px rgba(136,174,255,0.42));
  animation: platformMarketTrace 4.2s ease-in-out infinite;
}

.platform-module-card .module-mini-market span,
.platform-module-card .module-mini-supplier em,
.platform-module-card .module-mini-board em,
.platform-module-card .module-mini-radar em {
  color: rgba(231,236,245,0.58);
}

.platform-module-card .module-mini-supplier {
  gap: 18px;
}

.platform-module-card .module-mini-supplier::before {
  content: "";
  position: absolute;
  left: 23%;
  right: 23%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143,183,255,0.78), rgba(216,178,86,0.56), transparent);
}

.platform-module-card .module-mini-supplier span {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.12);
  color: rgba(248,250,252,0.86);
  box-shadow: 0 0 26px rgba(143,183,255,0.14);
  animation: platformNodePulse 3.2s ease-in-out infinite;
}

.platform-module-card .module-mini-supplier .ok {
  background: rgba(73, 186, 134, 0.22);
  color: #9ff0c8;
}

.platform-module-card .module-mini-supplier .warn {
  background: rgba(205, 89, 89, 0.22);
  color: #ffb3b3;
  animation-delay: .32s;
}

.platform-module-card .module-mini-supplier i {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 48px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #9ff0c8 60%, rgba(255,255,255,0.16) 0);
}

.platform-module-card .module-mini-report b {
  color: rgba(248,250,252,0.88);
  font-size: 11px;
}

.platform-module-card .module-mini-report span {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.10);
}

.platform-module-card .module-mini-report span::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 48%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(143,183,255,0.74), transparent);
  animation: platformReportFlow 2.5s ease-in-out infinite;
}

.platform-module-card .module-mini-report strong,
.platform-module-card .module-mini-vault strong {
  color: #a6f4cf;
}

.platform-module-card .module-mini-board i {
  height: var(--h);
  background: linear-gradient(180deg, #d8b256, #9db8ff 44%, rgba(255,255,255,0.20));
  box-shadow: 0 0 20px rgba(143,183,255,0.18);
  animation: platformBoardPulse 3.1s ease-in-out infinite;
}

.platform-module-card .module-mini-radar span {
  width: 66px;
  height: 66px;
  border-color: rgba(143,183,255,0.28);
  background:
    radial-gradient(circle, #f8fafc 0 4px, transparent 5px),
    repeating-radial-gradient(circle, transparent 0 16px, rgba(143,183,255,0.18) 17px 18px),
    conic-gradient(from 0deg, rgba(216,178,86,0.46), rgba(143,183,255,0.12), transparent 42%);
  box-shadow: 0 0 34px rgba(143,183,255,0.18);
}

.platform-module-card .module-mini-vault {
  align-content: center;
}

.platform-module-card .vault-chain {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 8px;
}

.platform-module-card .vault-chain i {
  height: 22px;
  border: 1px solid rgba(166,244,207,0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(166,244,207,0.86) 0 3px, transparent 4px),
    rgba(255,255,255,0.08);
  box-shadow: 0 0 22px rgba(166,244,207,0.12);
  animation: platformVaultPulse 3.4s ease-in-out infinite;
}

.platform-module-card .vault-chain i:nth-child(2) { animation-delay: .22s; }
.platform-module-card .vault-chain i:nth-child(3) { animation-delay: .44s; }
.platform-module-card .vault-chain i:nth-child(4) { animation-delay: .66s; }

.platform-module-card .module-mini-agent {
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
  align-content: stretch;
  padding: 16px 14px 14px;
}

.platform-module-card .module-mini-agent strong,
.platform-module-card .module-mini-agent span,
.platform-module-card .module-mini-agent em {
  display: flex;
  align-items: center;
  min-height: 0;
  height: 100%;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(90deg, rgba(143,183,255,0.16), rgba(255,255,255,0.06));
  color: rgba(248,250,252,0.82);
  box-shadow: inset 18px 0 26px rgba(143,183,255,0.08);
}

.platform-module-card .module-mini-agent strong::before,
.platform-module-card .module-mini-agent span::before,
.platform-module-card .module-mini-agent em::before {
  content: ">";
  margin-right: 8px;
  color: #d8b256;
  font-weight: 900;
}

.platform-module-card .module-mini-agent i {
  position: absolute;
  right: 16px;
  top: 18px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #a6f4cf;
  box-shadow: 0 0 18px rgba(166,244,207,0.66);
  animation: platformNodePulse 1.8s ease-in-out infinite;
}

.platform-module-card .module-mini-agent::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(166,244,207,0.74), transparent);
  animation: platformAgentTrace 2.4s ease-in-out infinite;
}

@keyframes platformTechSweep {
  0%, 34% { opacity: 0; transform: translateX(-85%); }
  48% { opacity: 0.72; }
  74%, 100% { opacity: 0; transform: translateX(95%); }
}

@keyframes platformAccessScan {
  0%, 100% { left: 12px; opacity: 0.45; }
  50% { left: calc(100% - 18px); opacity: 1; }
}

@keyframes platformCostOrbit {
  to { transform: rotate(360deg); }
}

@keyframes platformMarketTrace {
  0% { stroke-dashoffset: 260; opacity: 0.42; }
  45%, 70% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -260; opacity: 0.42; }
}

@keyframes platformNodePulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.18); }
}

@keyframes platformReportFlow {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}

@keyframes platformBoardPulse {
  0%, 100% { transform: scaleY(0.72); opacity: 0.66; }
  50% { transform: scaleY(1); opacity: 1; }
}

@keyframes platformVaultPulse {
  0%, 100% { border-color: rgba(166,244,207,0.22); filter: brightness(0.86); }
  50% { border-color: rgba(216,178,86,0.56); filter: brightness(1.25); }
}

@keyframes platformAgentTrace {
  0% { transform: translateX(-28%); opacity: 0; }
  35%, 65% { opacity: 1; }
  100% { transform: translateX(28%); opacity: 0; }
}

.platform-command-network {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(180px, 230px) minmax(640px, 1fr) minmax(180px, 230px);
  grid-template-rows: auto auto;
  gap: 18px 30px;
  align-items: center;
  width: min(1320px, 100%);
  margin: 56px auto 0;
  padding: 30px;
  border: 1px solid rgba(42, 55, 78, 0.10);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 44%, rgba(141, 205, 255, 0.18), transparent 26rem),
    radial-gradient(circle at 50% 92%, rgba(216,178,86,0.12), transparent 18rem),
    linear-gradient(90deg, rgba(42,55,78,0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(42,55,78,0.045) 1px, transparent 1px),
    rgba(249, 251, 252, 0.88);
  background-size: auto, auto, 38px 38px, 38px 38px, auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 34px 120px rgba(20,31,52,0.09);
  overflow: hidden;
}

.platform-command-network::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,0.82) 50%, transparent 60%),
    radial-gradient(circle at 22% 20%, rgba(112, 197, 255, 0.14), transparent 18rem);
  opacity: 0.72;
  animation: platformCommandSheen 10s ease-in-out infinite;
}

.platform-network-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.platform-network-backdrop span {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(84, 200, 255, 0.54), rgba(216,178,86,0.28), transparent);
  filter: drop-shadow(0 0 6px rgba(84,200,255,0.42));
  opacity: 0.42;
  animation: platformNetworkPulse 4.8s ease-in-out infinite;
}

.platform-network-backdrop span:nth-child(1) { left: 16%; top: 22%; width: 28%; }
.platform-network-backdrop span:nth-child(2) { right: 16%; top: 22%; width: 28%; animation-delay: .5s; }
.platform-network-backdrop span:nth-child(3) { left: 17%; top: 45%; width: 27%; animation-delay: 1s; }
.platform-network-backdrop span:nth-child(4) { right: 17%; top: 45%; width: 27%; animation-delay: 1.5s; }
.platform-network-backdrop span:nth-child(5) { left: 36%; bottom: 26%; width: 16%; transform: rotate(90deg); animation-delay: 2s; }
.platform-network-backdrop span:nth-child(6) { right: 36%; bottom: 26%; width: 16%; transform: rotate(90deg); animation-delay: 2.5s; }

.platform-network-column {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
}

.platform-network-column--left { grid-column: 1; grid-row: 1; }
.platform-network-column--right { grid-column: 3; grid-row: 1; }

.platform-network-row {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 250px));
  justify-content: center;
  gap: 28px;
}

.platform-network-node {
  position: relative;
  min-height: 136px;
  padding: 16px;
  border: 1px solid rgba(44, 59, 85, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.93), rgba(245,248,250,0.88));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 18px 42px rgba(23, 35, 55, 0.10);
  color: #111822;
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.platform-network-node::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, rgba(84,200,255,0.92), transparent);
  filter: drop-shadow(0 0 8px rgba(84,200,255,0.46));
}

.platform-network-node--left::before { right: -34px; }
.platform-network-node--right::before { left: -34px; transform: rotate(180deg); }
.platform-network-node--bottom::before {
  left: 50%;
  top: -24px;
  width: 2px;
  height: 24px;
  background: linear-gradient(180deg, rgba(84,200,255,0.92), transparent);
}

.platform-network-node:hover {
  transform: translateY(-4px);
  border-color: rgba(84, 200, 255, 0.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 26px 70px rgba(23, 35, 55, 0.16),
    0 0 0 1px rgba(84,200,255,0.08);
}

.network-node-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.network-node-head span {
  color: rgba(20, 31, 49, 0.42);
  font-family: var(--font-label);
  font-size: 21px;
  font-weight: 650;
}

.network-node-head i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d8b256;
  box-shadow: 0 0 14px rgba(216,178,86,0.75);
  animation: platformNodePulse 2.4s ease-in-out infinite;
}

.platform-network-node h3 {
  margin: 0;
  color: #162033;
  font-family: var(--font-label);
  font-size: 15px;
  line-height: 1.15;
}

.platform-network-node small {
  display: block;
  margin-top: 3px;
  color: rgba(20, 31, 49, 0.55);
  font-size: 11px;
}

.network-node-screen {
  position: relative;
  min-height: 68px;
  margin-top: 11px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  background:
    radial-gradient(circle at 78% 22%, rgba(84,200,255,0.18), transparent 5rem),
    linear-gradient(180deg, #111c29, #07101a);
  color: #eef6ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.network-node-screen > span,
.network-node-screen > strong,
.network-node-screen > em {
  position: relative;
  z-index: 2;
  display: block;
}

.network-node-screen > span {
  color: rgba(238,246,255,0.58);
  font-size: 10px;
}

.network-node-screen > strong {
  margin-top: 5px;
  color: #ffffff;
  font-family: var(--font-label);
  font-size: 20px;
  font-weight: 620;
}

.network-node-screen > em {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: #d8b256;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.network-node-screen .module-mini {
  position: absolute;
  right: -18px;
  bottom: -20px;
  width: 58%;
  height: 64px;
  margin: 0;
  opacity: 0.36;
  transform: scale(0.82);
  transform-origin: right bottom;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.network-node-screen .module-mini::after,
.network-node-screen .module-mini::before {
  opacity: 0.24;
}

.platform-command-core {
  position: relative;
  z-index: 3;
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  padding: 24px;
  border: 1px solid rgba(132, 196, 255, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(84,200,255,0.18), transparent 16rem),
    radial-gradient(circle at 82% 100%, rgba(216,178,86,0.12), transparent 15rem),
    linear-gradient(180deg, #152233 0%, #0c1521 100%);
  color: #f7fbff;
  box-shadow:
    0 34px 100px rgba(11, 25, 42, 0.34),
    0 0 0 1px rgba(84,200,255,0.10),
    inset 0 1px 0 rgba(255,255,255,0.10);
  overflow: hidden;
}

.platform-command-core::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.42;
  pointer-events: none;
}

.platform-command-core::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 0%, rgba(84,200,255,0.28) 38%, rgba(255,255,255,0.46) 49%, transparent 62%);
  transform: translateX(-92%);
  animation: platformTechSweep 7s ease-in-out infinite;
  pointer-events: none;
}

.command-core-frame i {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: rgba(166, 223, 255, 0.72);
  pointer-events: none;
}

.command-core-frame i:nth-child(1) { left: 10px; top: 10px; border-left: 2px solid; border-top: 2px solid; }
.command-core-frame i:nth-child(2) { right: 10px; top: 10px; border-right: 2px solid; border-top: 2px solid; }
.command-core-frame i:nth-child(3) { left: 10px; bottom: 10px; border-left: 2px solid; border-bottom: 2px solid; }
.command-core-frame i:nth-child(4) { right: 10px; bottom: 10px; border-right: 2px solid; border-bottom: 2px solid; }

.command-core-top,
.command-prompt,
.command-core-grid {
  position: relative;
  z-index: 1;
}

.command-core-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.command-core-top h3 {
  margin: 0;
  color: #f9fbff;
  font-family: var(--font-label);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 560;
}

.command-core-top span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  color: rgba(249,251,255,0.72);
  font-size: 10px;
  font-weight: 800;
}

.command-core-top span i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d8b256;
  box-shadow: 0 0 12px rgba(216,178,86,0.80);
}

.command-prompt {
  display: grid;
  grid-template-columns: 70px 1fr 44px;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 10px 10px 10px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
}

.command-prompt small {
  color: rgba(249,251,255,0.55);
  font-size: 10px;
}

.command-prompt strong {
  color: rgba(249,251,255,0.92);
  font-size: 15px;
  font-weight: 560;
}

.command-prompt button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  font-size: 22px;
}

.command-core-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.82fr;
  grid-template-areas:
    "status status activity"
    "flow log model";
  gap: 12px;
  margin-top: 14px;
}

.command-status-table,
.command-activity-panel,
.command-flow-panel,
.command-log-panel,
.command-model-panel {
  min-width: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(7, 14, 23, 0.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.command-status-table { grid-area: status; padding: 12px; }
.command-activity-panel { grid-area: activity; padding: 12px; }
.command-flow-panel { grid-area: flow; padding: 12px; }
.command-log-panel { grid-area: log; padding: 12px; }
.command-model-panel { grid-area: model; padding: 12px; }

.command-status-table p,
.command-activity-panel p,
.command-model-panel p {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: rgba(249,251,255,0.76);
  font-size: 12px;
}

.command-status-table p:last-child,
.command-activity-panel p:last-child,
.command-model-panel p:last-child {
  border-bottom: 0;
}

.command-status-table b,
.command-activity-panel b,
.command-model-panel b {
  color: #ffffff;
  font-weight: 650;
}

.command-status-table em {
  color: #d8b256;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.command-activity-panel strong,
.command-flow-panel strong,
.command-log-panel strong,
.command-model-panel strong {
  display: flex;
  justify-content: space-between;
  color: rgba(249,251,255,0.82);
  font-size: 11px;
  font-weight: 800;
}

.activity-chart {
  height: 52px;
  display: flex;
  align-items: end;
  gap: 5px;
  margin: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.activity-chart i {
  flex: 1;
  height: var(--h);
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #a6dfff, rgba(166,223,255,0.10));
  animation: platformBoardPulse 3.2s ease-in-out infinite;
}

.flow-lines {
  position: absolute;
  inset: 38px 16px 18px 90px;
  overflow: hidden;
  opacity: 0.88;
}

.flow-lines span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(166,223,255,0.85), transparent);
  transform: translateY(calc(var(--i, 0) * 12px));
  animation: platformNetworkPulse 3.6s ease-in-out infinite;
}

.flow-lines span:nth-child(1) { top: 8%; }
.flow-lines span:nth-child(2) { top: 27%; animation-delay: .25s; }
.flow-lines span:nth-child(3) { top: 47%; animation-delay: .5s; }
.flow-lines span:nth-child(4) { top: 66%; animation-delay: .75s; }
.flow-lines span:nth-child(5) { top: 84%; animation-delay: 1s; }

.command-flow-panel {
  position: relative;
  min-height: 136px;
}

.command-flow-panel p {
  margin: 7px 0 0;
  color: rgba(249,251,255,0.58);
  font-size: 11px;
}

.command-log-panel em {
  color: #a6f4cf;
  font-size: 9px;
  font-style: normal;
}

.command-log-panel p {
  margin: 6px 0 0;
  color: rgba(249,251,255,0.58);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
}

.command-log-panel b {
  color: #8ff1c3;
  font-weight: 600;
}

.command-model-panel p {
  grid-template-columns: 1fr auto;
  padding: 5px 0;
  font-size: 11px;
}

.command-model-panel b {
  color: #8ff1c3;
  font-size: 9px;
}

@keyframes platformCommandSheen {
  0%, 100% { transform: translateX(-12%); opacity: 0.52; }
  50% { transform: translateX(12%); opacity: 0.82; }
}

@keyframes platformNetworkPulse {
  0%, 100% { opacity: 0.18; filter: drop-shadow(0 0 4px rgba(84,200,255,0.20)); }
  50% { opacity: 0.72; filter: drop-shadow(0 0 10px rgba(84,200,255,0.60)); }
}

.platform-scenario-table {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.platform-scenario-table article {
  min-height: 230px;
  padding: 22px;
  border-color: rgba(15,17,21,0.08);
  border-radius: 18px;
  background: #f7f7f5;
}

.platform-scenario-table p {
  margin-top: 34px;
  color: rgba(15,17,21,0.72);
  font-size: 15px;
}

.platform-audit-grid {
  align-items: center;
}

.platform-audit-stack article {
  background: #f7f7f5;
  border-color: rgba(15,17,21,0.08);
}

.platform-os-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 132px 0;
  background:
    #f7f7f5;
}

.platform-cta-aurora {
  position: absolute;
  inset: -16% -8%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 24% 18%, rgba(93, 121, 206, 0.24), transparent 34rem),
    radial-gradient(ellipse at 78% 12%, rgba(137, 126, 191, 0.18), transparent 32rem),
    radial-gradient(ellipse at 52% 80%, rgba(232, 237, 248, 0.72), transparent 34rem);
  filter: blur(18px);
  transform: translate3d(0, 0, 0);
  animation: platformAuroraDrift 12s ease-in-out infinite alternate;
}

@property --cost-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes platformVisualSweep {
  0%, 100% { transform: translateX(-38%); opacity: 0.28; }
  50% { transform: translateX(38%); opacity: 0.48; }
}

@keyframes platformBarRead {
  0%, 100% { transform: scaleX(0.58); opacity: 0.52; }
  45%, 70% { transform: scaleX(1); opacity: 1; }
}

@keyframes platformDotPulse {
  0%, 100% { transform: scale(0.68); opacity: 0.28; }
  42% { transform: scale(1.15); opacity: 0.88; }
}

@keyframes platformScanLine {
  0% { left: 14%; opacity: 0; }
  18% { opacity: 0.64; }
  82% { opacity: 0.64; }
  100% { left: 86%; opacity: 0; }
}

@keyframes platformCostAngle {
  to { --cost-angle: 360deg; }
}

@keyframes platformCostMeter {
  0%, 100% { width: 52%; }
  45%, 70% { width: 82%; }
}

@keyframes platformGridFloat {
  0%, 100% { transform: translateY(0); opacity: 0.60; }
  50% { transform: translateY(-8px); opacity: 0.96; }
}

@keyframes platformNodePulse {
  0%, 100% { transform: scale(0.86); box-shadow: 0 0 0 8px rgba(16,21,34,0.08); }
  50% { transform: scale(1); box-shadow: 0 0 0 16px rgba(16,21,34,0.03); }
}

@keyframes platformRouteFlow {
  0% { opacity: 0.2; clip-path: inset(0 100% 0 0); }
  45% { opacity: 0.85; clip-path: inset(0 0 0 0); }
  100% { opacity: 0.12; clip-path: inset(0 0 0 100%); }
}

@keyframes platformCommitIn {
  0%, 12% { opacity: 0; transform: translateY(10px); }
  22%, 72% { opacity: 1; transform: translateY(0); }
  88%, 100% { opacity: 0; transform: translateY(-5px); }
}

@keyframes platformStatusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216,178,86,0.36); transform: scale(0.9); }
  50% { box-shadow: 0 0 0 8px rgba(216,178,86,0); transform: scale(1); }
}

@keyframes platformTaskWake {
  0%, 100% { background: rgba(15,17,21,0.045); color: rgba(15,17,21,0.55); transform: translateX(0); }
  32%, 58% { background: rgba(216,178,86,0.13); color: rgba(15,17,21,0.78); transform: translateX(4px); }
}

@keyframes platformSupplierFocus {
  0%, 100% { transform: translateX(0); border-color: rgba(15,17,21,0.06); }
  42%, 64% { transform: translateX(3px); border-color: rgba(216,178,86,0.34); }
}

@keyframes platformApprovalStep {
  0%, 100% { background: #f6f8f9; color: rgba(15,17,21,0.50); }
  44%, 68% { background: #11151c; color: #ffffff; }
}

@keyframes platformSealPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.76; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes platformChipScan {
  0%, 100% { transform: translateX(-70%); opacity: 0.12; }
  50% { transform: translateX(70%); opacity: 0.34; }
}

@keyframes platformShapeWake {
  0%, 100% { transform: translate(-50%, -50%) scale(0.72); opacity: 0.18; }
  48%, 62% { transform: translate(-50%, -50%) scale(1); opacity: 0.62; }
}

@keyframes platformDataLine {
  0% { opacity: 0.12; clip-path: inset(0 100% 0 0); }
  42% { opacity: 0.72; clip-path: inset(0 0 0 0); }
  100% { opacity: 0.10; clip-path: inset(0 0 0 100%); }
}

@keyframes platformCardScanner {
  0%, 76%, 100% { opacity: 0; transform: translateX(-75%); }
  18%, 36% { opacity: 0.46; transform: translateX(75%); }
}

@keyframes platformMiniScan {
  0%, 64%, 100% { opacity: 0; transform: translateX(-85%); }
  20%, 34% { opacity: 0.72; transform: translateX(85%); }
}

@keyframes platformPortPulse {
  0%, 100% { opacity: 0.36; transform: scaleX(0.72); }
  50% { opacity: 1; transform: scaleX(1); }
}

@keyframes platformCoreBreathe {
  0%, 100% { box-shadow: 0 28px 90px rgba(26,35,54,0.18), 0 0 0 0 rgba(216,178,86,0.14); }
  50% { box-shadow: 0 34px 120px rgba(26,35,54,0.24), 0 0 0 12px rgba(216,178,86,0.02); }
}

@keyframes platformNodeWake {
  0%, 100% { transform: translateY(0); }
  45%, 60% { transform: translateY(-4px); }
}

@keyframes platformMarketBars {
  0%, 100% { transform: scaleY(0.78); opacity: 0.58; }
  50% { transform: scaleY(1); opacity: 1; }
}

@keyframes platformRadarSpin {
  to { transform: rotate(360deg); }
}

@keyframes platformAuroraDrift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: 0.84; }
  100% { transform: translate3d(2%, 2%, 0) scale(1.04); opacity: 1; }
}

.platform-os-cta p {
  color: rgba(15,17,21,0.64);
}

.platform-cta-command {
  width: min(640px, 100%);
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(15,17,21,0.08);
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  box-shadow: 0 18px 70px rgba(26,35,54,0.10);
  backdrop-filter: blur(18px);
  text-align: left;
}

.platform-cta-command span,
.platform-cta-command em {
  padding: 7px 10px;
  border-radius: 999px;
  background: #eef1f4;
  color: rgba(15,17,21,0.54);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.platform-cta-command strong {
  min-width: 0;
  color: #11151c;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.platform-cta-command em {
  position: relative;
  background: #11151c;
  color: #ffffff;
}

.platform-cta-command em::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 999px;
  background: #d8b256;
  animation: platformStatusPulse 2.2s ease-in-out infinite;
}

.platform-os-cta .platform-os-button.ghost {
  background: rgba(15,17,21,0.08);
  color: #0f1115;
}

@media (max-width: 1080px) {
  .platform-workspace-mock {
    grid-template-columns: 210px 1fr;
  }

  .workspace-diff {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .workspace-status {
    grid-column: 1 / -1;
  }

  .platform-role-strip .platform-os-wrap,
  .platform-scenario-table {
    grid-template-columns: repeat(3, 1fr);
  }

  .platform-feature-block {
    grid-template-columns: 1fr;
  }

  .platform-feature-block:nth-child(even) {
    direction: ltr;
  }

  .platform-command-network {
    grid-template-columns: 1fr;
    width: min(860px, 100%);
    padding: 24px;
  }

  .platform-network-column,
  .platform-network-column--left,
  .platform-network-column--right,
  .platform-command-core,
  .platform-network-row {
    grid-column: 1;
    grid-row: auto;
  }

  .platform-command-core {
    order: 1;
  }

  .platform-network-column--left {
    order: 2;
    grid-template-columns: repeat(3, 1fr);
  }

  .platform-network-column--right {
    order: 3;
    grid-template-columns: repeat(3, 1fr);
  }

  .platform-network-row {
    order: 4;
    grid-template-columns: repeat(3, 1fr);
  }

  .platform-network-node::before,
  .platform-network-backdrop {
    display: none;
  }
}

@media (max-width: 720px) {
  body[data-page="platform"] .site-header {
    background: rgba(238,242,255,0.88);
  }

  .platform-os-hero {
    padding-top: 96px;
  }

  .platform-os-hero-inner {
    width: min(100% - 32px, 1120px);
    padding-bottom: 56px;
  }

  .platform-product-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
  }

  .platform-os-copy h1 {
    font-size: 41px;
  }

  .platform-os-copy p {
    font-size: 16px;
  }

  .platform-workspace-mock {
    margin-top: 48px;
    min-height: auto;
    grid-template-columns: 1fr;
    border-radius: 12px;
  }

  .workspace-sidebar {
    display: none;
  }

  .workspace-chat {
    border-right: 0;
  }

  .workspace-diff {
    grid-template-columns: 1fr;
  }

  .workspace-prompt,
  .workspace-response {
    width: 100%;
  }

  .platform-globe {
    right: -42vw;
    top: 80px;
    width: 95vw;
    height: 95vw;
    min-height: 360px;
    opacity: 0.20;
  }

  .platform-ascii-field {
    display: none;
  }

  .platform-workspace-mock {
    transform: none;
  }

  .platform-role-strip {
    padding: 52px 0;
  }

  .platform-role-strip .platform-os-wrap,
  .platform-scenario-table,
  .platform-module-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .platform-role-strip strong {
    font-size: 18px;
  }

  .platform-credit-band {
    padding-bottom: 72px;
  }

  .platform-credit-band .platform-os-wrap {
    display: grid;
    padding: 18px;
  }

  .platform-os-section {
    padding: 72px 0;
  }

  .platform-os-section-head h2,
  .platform-os-cta h2 {
    font-size: 36px;
  }

  .platform-feature-stack {
    gap: 60px;
  }

  .platform-feature-block figure {
    min-height: 300px;
  }

  .platform-feature-block .platform-feature-visual {
    min-height: 340px;
  }

  .platform-command-network {
    margin-top: 38px;
    padding: 18px;
    border-radius: 22px;
  }

  .platform-command-core {
    min-height: auto;
    padding: 20px;
    border-radius: 14px;
  }

  .command-core-top {
    display: grid;
  }

  .command-prompt {
    grid-template-columns: 1fr 38px;
  }

  .command-prompt small {
    grid-column: 1 / -1;
  }

  .command-core-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "status"
      "activity"
      "log"
      "model"
      "flow";
  }

  .platform-network-column--left,
  .platform-network-column--right,
  .platform-network-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .network-node-screen .module-mini {
    width: 48%;
  }

  .platform-grid-motion-bg {
    display: none;
  }

  .agent-panel {
    width: min(430px, calc(100% - 32px));
  }

  .scanner-fields,
  .cost-input-grid {
    grid-template-columns: 1fr;
  }

  .supplier-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .approval-chain {
    grid-template-columns: repeat(2, 1fr);
  }

  .platform-scenario-table article {
    min-height: 190px;
  }

  .platform-os-architecture {
    min-height: auto;
    padding: 18px;
  }

  .os-architecture-lines {
    display: none;
  }

  .os-core-card,
  .os-module-node,
  .module-mini-trade-access-scanner,
  .module-mini-carbon-cost-engine,
  .module-mini-carbon-market-desk,
  .module-mini-supplier-carbon-hub,
  .module-mini-compliance-report-studio,
  .module-mini-boardroom-intelligence,
  .module-mini-policy-radar,
  .module-mini-audit-vault {
    position: relative;
    width: 100%;
    transform: none;
  }

  .os-core-card {
    min-height: auto;
    margin-bottom: 14px;
  }

  .os-module-orbit {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .os-module-node {
    min-height: 230px;
  }
}

@media (max-width: 460px) {
  .platform-role-strip .platform-os-wrap,
  .platform-scenario-table,
  .platform-module-grid {
    grid-template-columns: 1fr;
  }

  .platform-os-actions {
    display: grid;
  }

  .platform-os-button {
    width: 100%;
  }

  .platform-cta-command {
    grid-template-columns: 1fr;
    border-radius: 18px;
    text-align: center;
  }

  .platform-cta-command strong {
    white-space: normal;
  }

  .platform-module-card .module-mini {
    height: 78px;
  }

  .platform-module-card .module-mini-tech {
    height: 98px;
  }

  .platform-module-card .module-mini * {
    max-width: 100%;
    min-width: 0;
  }

  .platform-module-card .module-mini-agent {
    gap: 5px;
  }

  .platform-module-card .module-mini-agent strong,
  .platform-module-card .module-mini-agent span,
  .platform-module-card .module-mini-agent em,
  .platform-module-card .module-mini-access span,
  .platform-module-card .module-mini-access strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .os-module-orbit {
    grid-template-columns: 1fr;
  }

  .platform-command-network {
    padding: 12px;
  }

  .platform-command-core {
    padding: 16px;
  }

  .command-status-table p {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .command-activity-panel {
    display: none;
  }

  .platform-network-node {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media-product-strategy video {
    display: none !important;
  }

  .hero-media-product-strategy .media-poster {
    display: block;
  }

  .platform-ascii-field,
  .platform-workspace-mock,
  .platform-os-bg,
  .platform-dot-field,
  .platform-feature-visual *,
  .platform-feature-visual::before,
  .cost-glow-card::before,
  .platform-grid-motion-bg,
  .platform-grid-motion-row,
  .platform-command-network,
  .platform-command-network::before,
  .platform-network-backdrop span,
  .platform-command-core,
  .platform-command-core::after,
  .activity-chart i,
  .flow-lines span,
  .platform-os-architecture,
  .platform-os-architecture::after,
  .os-shape-grid i::after,
  .os-architecture-lines span,
  .os-core-card,
  .os-core-card::before,
  .os-core-card::after,
  .os-core-ports i,
  .os-module-node,
  .os-module-node::before,
  .os-module-node::after,
  .module-mini *,
  .module-mini::after,
  .platform-cta-aurora {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .platform-os-hero::before {
    display: none;
  }
}

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .platform-workspace-mock {
    transform:
      perspective(1400px)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y))
      translate3d(var(--mock-x), var(--mock-y), 0);
  }
}

/* Platform modules v3: Codex-like product workspace with command-center orchestration. */
.platform-os-modules .platform-os-wrap {
  width: min(1360px, calc(100% - 48px));
}

.platform-command-network {
  min-height: 760px;
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  padding: 72px 44px 128px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 46%, rgba(78, 178, 255, 0.16), transparent 27rem),
    radial-gradient(circle at 50% 86%, rgba(216, 178, 86, 0.10), transparent 20rem),
    linear-gradient(90deg, rgba(31, 45, 70, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(31, 45, 70, 0.05) 1px, transparent 1px),
    rgba(249, 251, 252, 0.92);
  background-size: auto, auto, 40px 40px, 40px 40px, auto;
  overflow: hidden;
}

.platform-command-network::before {
  opacity: 0.48;
  animation-duration: 14s;
}

.platform-orchestration-lines {
  position: absolute;
  inset: 40px 34px 42px;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.platform-orchestration-lines path {
  fill: none;
  stroke: rgba(76, 196, 255, 0.42);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 10 18;
  filter: drop-shadow(0 0 8px rgba(76,196,255,0.36));
  animation: platformRouteFlow 7.5s linear infinite;
}

.platform-orchestration-lines path:nth-child(2n) {
  animation-delay: -2.2s;
  stroke: rgba(142, 209, 255, 0.32);
}

.platform-orchestration-lines path:nth-child(3n) {
  animation-delay: -4.1s;
  stroke: rgba(216, 178, 86, 0.25);
}

.platform-capability-cloud {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.platform-capability-node {
  position: absolute;
  width: 214px;
  min-height: 86px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(34, 48, 74, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    0 22px 70px rgba(24, 35, 54, 0.10);
  color: #141c2b;
  backdrop-filter: blur(18px);
  pointer-events: auto;
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
  animation: platformCapabilityWake 8.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 260ms);
}

.platform-capability-node:nth-child(1) { left: 2.5%; top: 10%; }
.platform-capability-node:nth-child(2) { left: 1.8%; top: 34%; }
.platform-capability-node:nth-child(3) { left: 2.5%; top: 58%; }
.platform-capability-node:nth-child(4) { right: 2.5%; top: 10%; }
.platform-capability-node:nth-child(5) { right: 1.8%; top: 34%; }
.platform-capability-node:nth-child(6) { right: 2.5%; top: 58%; }
.platform-capability-node:nth-child(7) { left: 25%; bottom: 5%; }
.platform-capability-node:nth-child(8) { left: 50%; bottom: 3.5%; transform: translateX(-50%); }
.platform-capability-node:nth-child(9) { right: 25%; bottom: 5%; }

.platform-capability-node:hover {
  transform: translateY(-4px);
  border-color: rgba(76, 196, 255, 0.34);
  background: rgba(255,255,255,0.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.96),
    0 28px 80px rgba(24, 35, 54, 0.16),
    0 0 0 1px rgba(76,196,255,0.08);
}

.platform-capability-node:nth-child(8):hover {
  transform: translateX(-50%) translateY(-4px);
}

.platform-capability-node > span {
  color: rgba(20, 28, 43, 0.38);
  font-family: var(--font-label);
  font-size: 24px;
  font-weight: 650;
}

.platform-capability-node strong,
.platform-capability-node small,
.platform-capability-node em {
  display: block;
}

.platform-capability-node strong {
  color: #141c2b;
  font-family: var(--font-label);
  font-size: 13px;
  line-height: 1.2;
}

.platform-capability-node small {
  margin-top: 3px;
  color: rgba(20, 28, 43, 0.52);
  font-size: 10px;
}

.platform-capability-node em {
  color: rgba(20, 28, 43, 0.62);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.platform-capability-node i {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d8b256;
  box-shadow: 0 0 14px rgba(216,178,86,0.72);
}

.platform-agent-product {
  position: relative;
  z-index: 4;
  width: min(840px, calc(100% - 430px));
  min-height: 0;
  display: grid;
  grid-template-columns: 190px minmax(300px, 1fr) 270px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.94);
  box-shadow:
    0 48px 140px rgba(20, 31, 52, 0.22),
    0 0 0 1px rgba(255,255,255,0.72);
  backdrop-filter: blur(24px);
}

.agent-product-dots {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 4;
  display: flex;
  gap: 7px;
}

.agent-product-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.agent-product-dots span:nth-child(1) { background: #ff6b5f; }
.agent-product-dots span:nth-child(2) { background: #f6bf3d; }
.agent-product-dots span:nth-child(3) { background: #30c76b; }

.agent-product-sidebar {
  padding: 54px 14px 18px;
  background: rgba(228, 234, 243, 0.82);
  border-right: 1px solid rgba(15,23,42,0.08);
  color: #111827;
}

.agent-product-sidebar strong {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-label);
  font-size: 13px;
}

.agent-product-sidebar nav,
.agent-product-sidebar div {
  display: grid;
  gap: 8px;
}

.agent-product-sidebar span,
.agent-product-sidebar p {
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px;
  color: rgba(17,24,39,0.68);
  font-size: 13px;
}

.agent-product-sidebar .is-active {
  background: rgba(255,255,255,0.72);
  color: #111827;
}

.agent-product-sidebar div {
  margin-top: 28px;
}

.agent-product-sidebar small {
  padding: 0 10px;
  color: rgba(17,24,39,0.42);
  font-size: 11px;
}

.agent-product-sidebar em {
  float: right;
  color: rgba(17,24,39,0.42);
  font-style: normal;
}

.agent-product-main {
  padding: 18px 16px 16px;
  background: #ffffff;
  border-right: 1px solid rgba(15,23,42,0.08);
}

.agent-product-topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}

.agent-product-topbar em {
  color: rgba(17,24,39,0.38);
  font-style: normal;
  font-weight: 700;
}

.agent-chat-bubble {
  width: 86%;
  margin: 24px 0 0 auto;
  padding: 15px 17px;
  border-radius: 18px;
  background: #eef2f6;
  color: #182033;
  font-size: 14px;
  line-height: 1.6;
}

.agent-execution-card {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  background: rgba(250,251,252,0.92);
  box-shadow: 0 20px 54px rgba(20,31,52,0.06);
}

.agent-execution-card strong {
  display: block;
  color: #111827;
  font-family: var(--font-label);
  font-size: 17px;
}

.agent-execution-card ol {
  position: relative;
  display: grid;
  gap: 9px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.agent-execution-card li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px 9px 34px;
  overflow: hidden;
  border-radius: 12px;
  background: #ffffff;
  color: rgba(17,24,39,0.64);
  font-size: 12px;
  animation: platformExecutionStep 8.5s ease-in-out infinite;
  animation-delay: calc(var(--step, 0) * 1s);
}

.agent-execution-card li:nth-child(1) { --step: 0; }
.agent-execution-card li:nth-child(2) { --step: 1; }
.agent-execution-card li:nth-child(3) { --step: 2; }
.agent-execution-card li:nth-child(4) { --step: 3; }
.agent-execution-card li:nth-child(5) { --step: 4; }

.agent-execution-card li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(17,24,39,0.16);
  transform: translateY(-50%);
}

.agent-execution-card li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(76,196,255,0.14), transparent);
  transform: translateX(-110%);
  animation: platformStepSweep 8.5s ease-in-out infinite;
  animation-delay: calc(var(--step, 0) * 1s);
}

.agent-execution-card b {
  color: #111827;
}

.agent-product-command {
  display: grid;
  grid-template-columns: 1fr 38px;
  gap: 10px;
  margin-top: 22px;
  padding: 10px;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 22px;
  background: #ffffff;
}

.agent-product-command input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: rgba(17,24,39,0.54);
  font-size: 13px;
}

.agent-product-command button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
}

.agent-product-output {
  padding: 18px 16px;
  background: #ffffff;
}

.agent-output-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: rgba(17,24,39,0.70);
  font-size: 13px;
  font-weight: 800;
}

.agent-output-top span {
  color: #111827;
}

.agent-product-output article {
  margin-top: 15px;
  padding: 13px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 12px;
  background: #fbfbfb;
}

.agent-product-output article strong {
  display: block;
  margin-bottom: 10px;
  color: #111827;
  font-family: var(--font-label);
  font-size: 13px;
}

.agent-product-output p {
  margin: 7px 0 0;
  padding: 7px 9px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.agent-product-output .plus {
  background: rgba(47, 133, 90, 0.12);
  color: #2f6f52;
}

.agent-product-output .minus {
  background: rgba(151, 64, 64, 0.12);
  color: #894242;
}

@keyframes platformRouteFlow {
  to { stroke-dashoffset: -180; }
}

@keyframes platformCapabilityWake {
  0%, 18%, 100% { border-color: rgba(34,48,74,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 22px 70px rgba(24,35,54,0.10); }
  8% { border-color: rgba(76,196,255,0.38); box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 24px 74px rgba(24,35,54,0.14), 0 0 24px rgba(76,196,255,0.12); }
}

@keyframes platformExecutionStep {
  0%, 16%, 100% { background: #ffffff; color: rgba(17,24,39,0.64); }
  7% { background: rgba(232, 244, 255, 0.96); color: #111827; }
}

@keyframes platformStepSweep {
  0%, 4% { transform: translateX(-110%); opacity: 0; }
  8% { opacity: 1; }
  16%, 100% { transform: translateX(110%); opacity: 0; }
}

@media (max-width: 1180px) {
  .platform-os-modules .platform-os-wrap {
    width: min(1180px, calc(100% - 48px));
  }

  .platform-command-network {
    min-height: auto;
    padding: 32px 22px;
  }

  .platform-orchestration-lines {
    display: none;
  }

  .platform-capability-cloud {
    position: relative;
    inset: auto;
    order: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    margin-top: 18px;
  }

  .platform-capability-node,
  .platform-capability-node:nth-child(n) {
    position: relative;
    inset: auto;
    width: auto;
    transform: none;
  }

  .platform-capability-node:nth-child(8):hover,
  .platform-capability-node:hover {
    transform: translateY(-3px);
  }

  .platform-agent-product {
    width: 100%;
    grid-template-columns: 200px minmax(0, 1fr) 280px;
  }
}

@media (max-width: 820px) {
  .platform-agent-product {
    grid-template-columns: 1fr;
  }

  .agent-product-sidebar {
    display: none;
  }

  .agent-product-main {
    border-right: 0;
  }

  .platform-capability-cloud {
    grid-template-columns: 1fr;
  }

  .agent-chat-bubble {
    width: 100%;
  }
}

@media (max-width: 460px) {
  .platform-command-network {
    padding: 14px;
    border-radius: 20px;
  }

  .agent-product-main,
  .agent-product-output {
    padding: 16px;
  }

  .agent-execution-card li {
    display: grid;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-orchestration-lines path,
  .platform-capability-node,
  .agent-execution-card li,
  .agent-execution-card li::after {
    animation: none !important;
  }
}