/* ============================================================
   左左 VINJO — Design System
   White + Red + Gold. Premium consulting-style education brand.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700;800&display=swap');

:root{
  --white:#FFFFFF;
  --paper:#FAF8F5;
  --ink:#191715;
  --ink-soft:#55504A;
  --ink-faint:#8A847A;
  --red:#C41230;
  --red-deep:#96001F;
  --gold:#B7965B;
  --gold-tint:#EFE7D6;
  --line:#E7E2D9;
  --line-strong:#D8D2C6;

  --font-display:'Archivo', 'Noto Sans SC', sans-serif;
  --font-body:'Inter', 'Noto Sans SC', sans-serif;
  --font-cjk:'Noto Sans SC', 'Archivo', sans-serif;

  --container: 1180px;
  --section-pad: 128px;
  --section-pad-mobile: 64px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-cjk);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

section{
  padding:var(--section-pad) 0;
}
@media (max-width:900px){
  section{padding:var(--section-pad-mobile) 0;}
  .wrap{padding:0 22px;}
}

.bg-paper{background:var(--paper);}
.bg-ink{background:var(--ink); color:var(--white);}
.bg-ink .ink-label, .bg-ink .eyebrow{color:var(--gold);}

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:22px;height:1px;background:var(--gold);
  display:inline-block;
}
h1.display{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(34px,5.4vw,60px);
  line-height:1.14;
  letter-spacing:-.01em;
  color:var(--ink);
}
h2.section-title{
  font-family:var(--font-cjk);
  font-weight:800;
  font-size:clamp(28px,3.6vw,42px);
  line-height:1.28;
  letter-spacing:-.005em;
  color:var(--ink);
}
h3.card-title{
  font-family:var(--font-cjk);
  font-weight:700;
  font-size:21px;
  line-height:1.4;
  color:var(--ink);
}
.lede{
  font-size:19px;
  line-height:1.75;
  color:var(--ink-soft);
  max-width:640px;
}
.body-sm{font-size:15px; color:var(--ink-soft); line-height:1.75;}
.num{
  font-family:var(--font-display);
  color:var(--gold);
  font-weight:700;
}

/* ---------- Header / Logo ---------- */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:transparent;
  border-bottom:1px solid var(--line);
}
header.site-header::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
}
.header-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:18px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  display:flex; flex-direction:column; align-items:flex-start;
  line-height:1;
  gap:2px;
  color:var(--red);
}
.logo .cn{
  font-family:var(--font-cjk);
  font-weight:800;
  font-size:12px;
  letter-spacing:.3em;
}
.logo .en{
  font-family:var(--font-display);
  font-weight:800;
  font-size:26px;
  letter-spacing:-.01em;
}
nav.main-nav{
  display:flex; align-items:center; gap:36px;
}
nav.main-nav a{
  font-size:15px;
  font-weight:500;
  color:var(--ink-soft);
  position:relative;
  padding:4px 0;
  white-space:nowrap;
}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--ink);}
nav.main-nav a.active::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-4px;
  height:2px; background:var(--gold);
}
.header-cta{display:flex; align-items:center; gap:18px;}
.nav-toggle{display:none;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-cjk);
  font-weight:700;
  font-size:15px;
  padding:14px 28px;
  border-radius:3px;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--red); color:var(--white);}
.btn-primary:hover{background:var(--red-deep);}
.btn-secondary{background:var(--white); color:var(--ink); border-color:var(--ink);}
.btn-secondary:hover{border-color:var(--red); color:var(--red);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--gold); color:var(--red);}
.btn-sm{padding:10px 20px; font-size:14px;}
.btn-arrow{transition:transform .2s ease;}
.btn:hover .btn-arrow{transform:translateX(3px);}

/* ---------- Hero ---------- */
.hero{
  padding:110px 0 90px;
  text-align:left;
}
.hero .wrap{max-width:920px;}
.hero .eyebrow{margin-bottom:26px;}
.hero h1{margin-bottom:26px;}
.hero .lede{margin-bottom:44px; max-width:680px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
.hero-meta{
  margin-top:72px;
  padding-top:28px;
  border-top:1px solid var(--line);
  display:flex; gap:48px; flex-wrap:wrap;
}
.hero-meta div{display:flex; flex-direction:column; gap:4px;}
.hero-meta .num{font-size:26px;}
.hero-meta .lbl{font-size:13px; color:var(--ink-faint);}

/* ---------- Progression strip (Section 02) ---------- */
.progression{
  display:flex; align-items:stretch; gap:0; margin-top:56px;
  flex-wrap:wrap;
}
.progression .step{
  flex:1 1 180px;
  padding:26px 22px;
  border:1px solid var(--line);
  border-left:none;
  position:relative;
}
.progression .step:first-child{border-left:1px solid var(--line);}
.progression .step .tag{font-size:13px; color:var(--ink-faint); margin-bottom:10px; display:block;}
.progression .step .label{font-family:var(--font-cjk); font-weight:700; font-size:18px;}
.progression .arrow{
  display:flex; align-items:center; justify-content:center;
  width:34px; color:var(--gold); font-size:18px; flex:0 0 auto;
}
@media (max-width:900px){
  .progression{flex-direction:column;}
  .progression .step{border-left:1px solid var(--line) !important; border-top:none;}
  .progression .step:first-child{border-top:1px solid var(--line);}
  .progression .arrow{transform:rotate(90deg); width:auto; height:24px;}
}

/* ---------- Framework (Section 03) ---------- */
.framework-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:60px;
}
.framework-grid .fw-item{
  background:var(--white);
  padding:36px 26px;
  min-height:260px;
  display:flex; flex-direction:column; gap:16px;
}
.framework-grid .fw-item .num{font-size:34px;}
.framework-grid .fw-item .fw-tag{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);}
.framework-grid .fw-item h3{font-size:19px; font-weight:700; font-family:var(--font-cjk);}
.framework-grid .fw-item p{font-size:14px; color:var(--ink-soft); line-height:1.65;}
@media (max-width:1000px){
  .framework-grid{grid-template-columns:1fr; }
}
.flow-strip{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:40px; flex-wrap:wrap;
  font-family:var(--font-display); font-weight:700; letter-spacing:.05em;
  color:var(--ink-faint); font-size:14px; text-transform:uppercase;
}
.flow-strip span.dot{color:var(--gold);}

/* ---------- Audience cards ---------- */
.audience-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border:1px solid var(--line); border-right:none;
  margin-top:56px;
}
.audience-grid .aud{
  border-right:1px solid var(--line);
  padding:34px 24px;
  display:flex; flex-direction:column; gap:14px;
}
.audience-grid .num{font-size:24px;}
.audience-grid h4{font-family:var(--font-cjk); font-weight:700; font-size:17px;}
.audience-grid p{font-size:14px; color:var(--ink-soft);}
@media (max-width:1000px){
  .audience-grid{grid-template-columns:1fr 1fr;}
  .audience-grid .aud:nth-child(2n){border-right:none;}
}
@media (max-width:600px){
  .audience-grid{grid-template-columns:1fr;}
  .audience-grid .aud{border-right:none !important;}
}

/* ---------- Section header block ---------- */
.section-head{max-width:680px; margin-bottom:56px;}
.section-head .eyebrow{margin-bottom:18px;}
.section-head h2{margin-bottom:18px;}
.section-head-row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
  margin-bottom:56px; flex-wrap:wrap;
}
.section-head-row .section-head{margin-bottom:0;}

/* ---------- Category / solution blocks ---------- */
.category-block{
  border:1px solid var(--line);
  margin-bottom:1px;
}
.category-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 32px;
  cursor:pointer;
  background:var(--white);
  gap:20px; flex-wrap:wrap;
}
.category-head:hover{background:var(--paper);}
.category-head .cat-id{display:flex; align-items:center; gap:20px;}
.category-head .num{font-size:22px;}
.category-head h3{font-family:var(--font-cjk); font-weight:700; font-size:20px;}
.category-head .cat-en{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:4px; display:block;}
.category-body{
  padding:0 32px 32px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px;
}
.mini-course{
  border:1px solid var(--line); padding:22px; border-radius:2px;
}
.mini-course .tag-row{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap;}
.mini-course .pill{
  font-size:11px; padding:4px 10px; border:1px solid var(--gold); color:var(--gold-deep,#8a6a2e); letter-spacing:.03em; border-radius:20px;
}
.mini-course h4{font-family:var(--font-cjk); font-weight:700; font-size:16px; margin-bottom:8px;}
.mini-course p{font-size:13.5px; color:var(--ink-soft); margin-bottom:14px;}
.mini-course a{font-size:13px; font-weight:700; color:var(--red);}

/* ---------- Find your path ---------- */
.path-list{margin-top:50px; border-top:1px solid var(--line);}
.path-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 4px;
  border-bottom:1px solid var(--line);
  gap:24px; flex-wrap:wrap;
  transition:padding-left .2s ease;
}
.path-item:hover{padding-left:14px; background:var(--paper);}
.path-item .path-q{
  font-family:var(--font-cjk); font-weight:700; font-size:20px;
  display:flex; align-items:center; gap:18px;
}
.path-item .path-q .num{font-size:16px;}
.path-item .path-to{
  font-size:14px; color:var(--ink-faint); display:flex; align-items:center; gap:10px;
}
.path-item .path-to .arrow{color:var(--gold);}

/* ---------- Program cards (featured) ---------- */
.program-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px;
}
@media (max-width:960px){.program-grid{grid-template-columns:1fr;}}
.program-card{
  border:1px solid var(--line);
  background:var(--white);
  display:flex; flex-direction:column;
  position:relative;
}
.program-card.flagship{border-top:3px solid var(--gold);}
.program-card .pc-top{padding:28px 28px 20px;}
.program-card .flag-tag{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep,#8a6a2e); background:var(--gold-tint); padding:5px 10px; border-radius:2px;
  display:inline-block; margin-bottom:16px;
}
.program-card h3{margin-bottom:18px;}
.pc-field{margin-bottom:14px;}
.pc-field .k{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:5px; display:block;}
.pc-field .v{font-size:14.5px; color:var(--ink); line-height:1.6;}
.pc-bottom{
  margin-top:auto; padding:20px 28px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.pc-bottom .fmt{font-size:13px; color:var(--ink-faint);}

/* ---------- Why VINJO pillars ---------- */
.pillar-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  margin-top:56px; border-top:1px solid var(--line);
}
.pillar{
  padding:32px 22px 0; border-right:1px solid var(--line);
}
.pillar:last-child{border-right:none;}
.pillar .num{font-size:26px; display:block; margin-bottom:16px;}
.pillar h4{font-family:var(--font-cjk); font-weight:700; font-size:16px; margin-bottom:10px;}
.pillar p{font-size:13.5px; color:var(--ink-soft);}
@media (max-width:960px){
  .pillar-grid{grid-template-columns:1fr 1fr;}
  .pillar{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding-bottom:28px;}
}
@media (max-width:600px){.pillar-grid{grid-template-columns:1fr;}}

/* ---------- Client logo wall ---------- */
.logo-wall{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:50px;
}
.logo-wall .lw-item{
  background:var(--white); height:96px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  color:var(--ink-soft); text-align:center; padding:10px; letter-spacing:.01em;
}
@media (max-width:900px){.logo-wall{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.logo-wall{grid-template-columns:repeat(2,1fr);}}

/* ---------- Proof placeholders ---------- */
.proof-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:50px;}
@media (max-width:900px){.proof-grid{grid-template-columns:1fr;}}
.proof-card{
  border:1px dashed var(--line-strong); padding:32px; min-height:200px;
  display:flex; flex-direction:column; gap:14px; justify-content:center;
  color:var(--ink-faint);
}
.proof-card .ptype{font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.14em; color:var(--gold-deep,#8a6a2e);}
.proof-card p{font-size:14px; color:var(--ink-faint);}

/* ---------- Stats counters ---------- */
.stat-row{display:flex; gap:64px; flex-wrap:wrap; margin-top:44px;}
.stat{display:flex; flex-direction:column; gap:6px;}
.stat .stat-num{font-family:var(--font-display); font-weight:800; font-size:44px; color:var(--red);}
.stat .stat-lbl{font-size:13px; color:var(--ink-faint);}

/* ---------- About / founder ---------- */
.founder-block{
  display:grid; grid-template-columns:280px 1fr; gap:56px; margin-top:56px; align-items:start;
}
@media (max-width:800px){.founder-block{grid-template-columns:1fr;}}
.founder-card{
  border:1px solid var(--line); padding:32px; background:var(--paper);
}
.founder-card .fname{font-family:var(--font-cjk); font-weight:800; font-size:22px; margin-bottom:6px;}
.founder-card .frole{font-size:13px; color:var(--ink-faint); margin-bottom:24px;}
.founder-card ul li{font-size:13.5px; color:var(--ink-soft); padding:8px 0; border-top:1px solid var(--line);}
.founder-card ul li:first-child{border-top:none;}

/* ---------- Final CTA ---------- */
.final-cta{
  text-align:center;
  padding:140px 0;
}
.final-cta .wrap{max-width:720px;}
.final-cta h2{margin-bottom:20px;}
.final-cta p{margin:0 auto 44px; color:var(--ink-faint); font-size:17px;}
.final-cta .hero-ctas{justify-content:center;}

/* ---------- Footer ---------- */
footer.site-footer{
  background:var(--ink); color:var(--white);
  padding:80px 0 32px;
}
.footer-top{
  display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:40px;
  padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.12);
}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr;}}
.footer-top .logo{color:var(--white);}
.footer-top .flog{font-size:13px; color:rgba(255,255,255,.55); margin-top:18px; max-width:280px; line-height:1.7;}
.footer-col h5{font-family:var(--font-cjk); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:18px;}
.footer-col a, .footer-col span{display:block; font-size:14.5px; color:rgba(255,255,255,.82); padding:6px 0;}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:28px; flex-wrap:wrap; gap:12px;
}
.footer-bottom span{font-size:13px; color:rgba(255,255,255,.4);}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding:80px 0 60px; border-bottom:1px solid var(--line);}
.page-hero .eyebrow{margin-bottom:22px;}
.page-hero h1{margin-bottom:20px;}
.breadcrumb{font-size:13px; color:var(--ink-faint); margin-bottom:26px;}
.breadcrumb a{color:var(--ink-faint);}
.breadcrumb a:hover{color:var(--red);}

/* ---------- Course directory ---------- */
.filter-bar{
  display:flex; gap:10px; flex-wrap:wrap; margin:44px 0 8px;
  border-bottom:1px solid var(--line); padding-bottom:32px;
}
.filter-chip{
  font-size:13.5px; font-weight:600; padding:9px 18px; border:1px solid var(--line-strong);
  border-radius:20px; cursor:pointer; color:var(--ink-soft); background:var(--white);
  transition:all .15s ease;
}
.filter-chip:hover{border-color:var(--gold);}
.filter-chip.active{background:var(--ink); color:var(--white); border-color:var(--ink);}

.course-directory-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px;
}
@media (max-width:960px){.course-directory-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.course-directory-grid{grid-template-columns:1fr;}}
.dc-card{
  border:1px solid var(--line); padding:26px; display:flex; flex-direction:column; height:100%;
}
.dc-card .dc-cat{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep,#8a6a2e); margin-bottom:14px;}
.dc-card h4{font-family:var(--font-cjk); font-weight:700; font-size:18px; margin-bottom:12px;}
.dc-field{margin-bottom:10px;}
.dc-field .k{font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em;}
.dc-field .v{font-size:13.5px; color:var(--ink-soft);}
.dc-bottom{margin-top:auto; padding-top:16px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}

/* ---------- Course detail page ---------- */
.detail-hero{
  padding:70px 0 60px; border-bottom:1px solid var(--line);
}
.detail-hero-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:56px;}
@media (max-width:900px){.detail-hero-grid{grid-template-columns:1fr;}}
.detail-facts{border:1px solid var(--line); padding:28px;}
.detail-facts .df-row{padding:14px 0; border-top:1px solid var(--line);}
.detail-facts .df-row:first-child{border-top:none; padding-top:0;}
.detail-facts .k{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:6px;}
.detail-facts .v{font-size:15px; font-weight:600;}
.detail-section{padding:72px 0; border-bottom:1px solid var(--line);}
.detail-section:last-of-type{border-bottom:none;}
.num-block-list{display:flex; flex-direction:column; gap:0; margin-top:40px;}
.num-block{display:flex; gap:28px; padding:28px 0; border-top:1px solid var(--line);}
.num-block:first-child{border-top:none; padding-top:0;}
.num-block .num{font-size:22px; flex:0 0 50px;}
.num-block h4{font-family:var(--font-cjk); font-weight:700; font-size:17px; margin-bottom:8px;}
.num-block p{font-size:14.5px; color:var(--ink-soft);}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
@media (max-width:800px){.two-col{grid-template-columns:1fr;}}
.check-list li{
  padding:12px 0 12px 28px; border-top:1px solid var(--line);
  position:relative; font-size:14.5px; color:var(--ink-soft);
}
.check-list li:first-child{border-top:none;}
.check-list li::before{content:'—'; position:absolute; left:0; color:var(--gold); font-weight:700;}
.faq-item{border-top:1px solid var(--line); padding:24px 0;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item .q{font-family:var(--font-cjk); font-weight:700; font-size:16px; margin-bottom:10px;}
.faq-item .a{font-size:14.5px; color:var(--ink-soft);}
.detail-cta{
  background:var(--ink); color:var(--white); padding:64px; text-align:center; margin-top:0;
}
.detail-cta h3{color:var(--white); font-family:var(--font-cjk); font-size:26px; font-weight:800; margin-bottom:14px;}
.detail-cta p{color:rgba(255,255,255,.65); margin-bottom:32px;}

/* ---------- Corporate page specific ---------- */
.spec-table{width:100%; border-collapse:collapse; margin-top:40px;}
.spec-table tr{border-top:1px solid var(--line);}
.spec-table tr:first-child{border-top:none;}
.spec-table td{padding:20px 0; vertical-align:top;}
.spec-table td:first-child{width:200px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);}
.spec-table td:last-child{font-size:15.5px; color:var(--ink);}

/* utility */
.center{text-align:center;}
.mt-0{margin-top:0;}
.mx-auto{margin-left:auto;margin-right:auto;}

/* mobile nav */
@media (max-width:960px){
  nav.main-nav{
    position:fixed; inset:var(--hdr-h,64px) 0 0 0; background:var(--white);
    flex-direction:column; align-items:flex-start; padding:32px;
    transform:translateX(100%); transition:transform .3s ease; z-index:99;
    gap:6px; overflow-y:auto;
  }
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav a{font-size:20px; padding:14px 0; width:100%; border-bottom:1px solid var(--line);}
  .header-cta .btn-secondary{display:none;}
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; width:26px; cursor:pointer; background:none; border:none; padding:6px;
  }
  .nav-toggle span{height:2px; background:var(--ink); display:block; width:100%;}
}

/* ============================================================
   V2 — LOGO, PHOTOGRAPHY, MOTION
   ============================================================ */

/* ---------- Real logo ---------- */
.logo img{height:30px; width:auto; display:block;}
.header-inner .logo{gap:0;}
footer .logo img{height:30px;}
@media (max-width:600px){ .logo img{height:24px;} }

/* ---------- Hero v2 ---------- */
.hero-v2{padding:96px 0 0;}
.hero-v2 h1{margin-bottom:26px;}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line-strong); border-radius:40px;
  padding:7px 16px; font-size:13px; color:var(--ink-soft); margin-bottom:28px;
}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--red);}

/* ---------- Marquee (infinite auto-scroll) ---------- */
.marquee{
  overflow:hidden; width:100%; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{
  display:flex; width:max-content; gap:14px;
  animation:marquee-scroll 52s linear infinite;
}
.marquee.reverse .marquee-track{animation-direction:reverse; animation-duration:64s;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.marquee-item{
  flex:0 0 auto; width:340px; height:224px; overflow:hidden;
  position:relative; background:var(--paper);
}
.marquee-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1); filter:saturate(.96);
}
.marquee-item:hover img{transform:scale(1.06);}
.marquee-item .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 14px 11px;
  background:linear-gradient(transparent, rgba(0,0,0,.72));
  color:#fff; font-size:12px; font-weight:600; letter-spacing:.04em;
  opacity:0; transform:translateY(6px); transition:all .35s ease;
}
.marquee-item:hover .cap{opacity:1; transform:translateY(0);}
@media (max-width:700px){
  .marquee-item{width:240px; height:160px;}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;}
}

/* ---------- Image reveal on scroll (clip wipe) ---------- */
.img-reveal{overflow:hidden; position:relative; display:block;}
.img-reveal img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.12); transition:transform 1.3s cubic-bezier(.16,.8,.3,1);
}
.img-reveal::after{
  content:''; position:absolute; inset:0; background:var(--white);
  transform:translateX(0); transition:transform 1s cubic-bezier(.7,0,.2,1);
}
.img-reveal.in img{transform:scale(1);}
.img-reveal.in::after{transform:translateX(101%);}
.bg-ink .img-reveal::after, .img-reveal.on-dark::after{background:var(--ink);}

/* ---------- Proof band (full-bleed, dark) ---------- */
.proof-band{
  background:var(--ink); color:#fff; padding:96px 0 104px; overflow:hidden;
}
.proof-band .section-title{color:#fff;}
.proof-band .stat-num{color:#fff;}
.proof-band .stat-lbl{color:rgba(255,255,255,.5);}
.proof-band .stat-row{margin-bottom:64px;}
.proof-band .marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.band-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:32px; flex-wrap:wrap; margin-bottom:44px;
}

/* ---------- Photo grid (results) ---------- */
.photo-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:48px;
}
@media (max-width:900px){.photo-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.photo-grid{grid-template-columns:1fr;}}
.photo-cell{
  position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--paper);
}
.photo-cell img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1); filter:saturate(.97);
}
.photo-cell:hover img{transform:scale(1.07);}
.photo-cell .plabel{
  position:absolute; left:0; right:0; bottom:0; padding:32px 16px 14px;
  background:linear-gradient(transparent, rgba(0,0,0,.75));
  color:#fff; font-size:13px; font-weight:700; letter-spacing:.03em;
}
.photo-cell.tall{aspect-ratio:3/4;}

/* ---------- Founder block v2 ---------- */
.founder-v2{
  display:grid; grid-template-columns:400px 1fr; gap:64px; align-items:start; margin-top:56px;
}
@media (max-width:860px){.founder-v2{grid-template-columns:1fr; gap:40px;}}
.founder-photo{
  position:relative; background:var(--red); overflow:hidden; aspect-ratio:4/5;
}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.founder-tag{
  position:absolute; left:0; bottom:0; background:var(--ink); color:#fff;
  padding:14px 20px; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.cred-list{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:8px;}
@media (max-width:560px){.cred-list{grid-template-columns:1fr;}}
.cred-list li{
  font-size:14px; color:var(--ink-soft); padding:13px 0 13px 22px;
  border-top:1px solid var(--line); position:relative;
}
.cred-list li::before{content:''; position:absolute; left:0; top:20px; width:8px; height:1px; background:var(--gold);}

/* ---------- Hero photo strip ---------- */
.hero-strip{margin-top:76px; padding-bottom:0;}

/* ---------- Section eyebrow on dark ---------- */
.bg-ink .eyebrow, .proof-band .eyebrow{color:var(--gold);}
.bg-ink .eyebrow::before, .proof-band .eyebrow::before{background:var(--gold);}

/* ---------- Big stat emphasis ---------- */
.stat .stat-num{font-size:clamp(34px,4.4vw,52px); line-height:1;}

/* ---------- Split feature (image + text) ---------- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
@media (max-width:860px){.split{grid-template-columns:1fr; gap:36px;}}
.split .img-reveal{aspect-ratio:4/3;}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important;}
  .img-reveal::after{display:none;}
  .img-reveal img{transform:none !important;}
}

/* ============================================================
   V3 — CONSULTANCY HERO, LASER LINES, CI ALIGNMENT
   ============================================================ */

:root{
  --hero-bg:#F7F8FA;
  --laser:#C41230;
  --laser-gold:#B7965B;
}

/* ---------- WhatsApp / call CTA in header ---------- */
.btn-call{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--red); color:#fff;
  padding:11px 20px; border-radius:40px;
  font-family:var(--font-cjk); font-weight:700; font-size:14px;
  transition:all .2s ease; white-space:nowrap;
}
.btn-call:hover{background:var(--red-deep); transform:translateY(-1px);}
.btn-call svg{width:16px;height:16px;fill:currentColor;flex:0 0 auto;}
.btn-call .pulse{
  width:7px;height:7px;border-radius:50%;background:#4ADE80;
  box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:callpulse 2s infinite;
}
@keyframes callpulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.65);}
  70%{box-shadow:0 0 0 7px rgba(74,222,128,0);}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}
}
@media (max-width:960px){ .btn-call span.lbl{display:none;} .btn-call{padding:11px 14px;} }

/* ---------- LASER LINE SYSTEM ---------- */
.laser-field{
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0;
}
.laser-field .vline,
.laser-field .hline{ position:absolute; background:rgba(25,23,21,.035); }
.laser-field .vline{ top:0; bottom:0; width:1px; }
.laser-field .hline{ left:0; right:0; height:1px; }

/* Travelling beam — precision instrument, not neon.
   1px hairline, no white core, no bloom. Long slow sweep, long dark pause. */
.laser-field .vline::after{
  content:''; position:absolute; left:0; width:1px; height:34%;
  background:linear-gradient(180deg, transparent, rgba(196,18,48,.55) 50%, transparent);
  animation:beam-v 16s linear infinite;
  opacity:0;
}
.laser-field .hline::after{
  content:''; position:absolute; top:0; height:1px; width:26%;
  background:linear-gradient(90deg, transparent, rgba(196,18,48,.5) 50%, transparent);
  animation:beam-h 19s linear infinite;
  opacity:0;
}
.laser-field .gold::after{
  background:linear-gradient(180deg, transparent, rgba(183,150,91,.5) 50%, transparent);
}
.laser-field .hline.gold::after{
  background:linear-gradient(90deg, transparent, rgba(183,150,91,.45) 50%, transparent);
}
/* sweep occupies ~35% of the cycle; the rest is still — reads as instrumentation, not decoration */
@keyframes beam-v{
  0%{top:-34%; opacity:0;}
  4%{opacity:1;}
  30%{opacity:1;}
  36%{top:100%; opacity:0;}
  100%{top:100%; opacity:0;}
}
@keyframes beam-h{
  0%{left:-26%; opacity:0;}
  4%{opacity:1;}
  30%{opacity:1;}
  36%{left:100%; opacity:0;}
  100%{left:100%; opacity:0;}
}
/* on dark sections the static rule is lighter */
.bg-ink .laser-field .vline, .bg-ink .laser-field .hline,
.proof-band .laser-field .vline, .proof-band .laser-field .hline{ background:rgba(255,255,255,.06); }

/* section needs positioning context */
section{position:relative;}
section > .wrap{position:relative; z-index:1;}

@media (prefers-reduced-motion:reduce){
  .laser-field .vline::after, .laser-field .hline::after{animation:none; opacity:0;}
}

/* ---------- HERO V3 (consultancy) ---------- */
.hero-v3{
  background:var(--hero-bg);
  padding:0; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-v3-grid{
  display:grid; grid-template-columns:1.02fr .98fr; gap:40px;
  align-items:center; min-height:640px;
}
.hero-v3-copy{padding:88px 0 96px;}
.hero-v3 .hero-badge{
  background:#fff; border-color:#E3E7EC; box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.hero-v3 h1{
  font-size:clamp(32px,4.5vw,54px); line-height:1.14; letter-spacing:-.015em;
  margin-bottom:24px;
}
.hero-v3 .lede{max-width:560px; margin-bottom:40px;}

/* CTA: outlined pill + circular arrow (consultancy pattern) */
.cta-pair{display:inline-flex; align-items:center; gap:10px;}
.cta-pill{
  display:inline-flex; align-items:center;
  background:#fff; border:1px solid var(--ink);
  border-radius:50px; padding:16px 32px;
  font-family:var(--font-cjk); font-weight:700; font-size:16px; color:var(--ink);
  transition:all .22s ease;
}
.cta-round{
  width:54px; height:54px; border-radius:50%;
  background:var(--red); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:19px; transition:all .22s ease; flex:0 0 auto;
}
.cta-pair:hover .cta-pill{background:var(--ink); color:#fff;}
.cta-pair:hover .cta-round{background:var(--red-deep); transform:rotate(45deg);}
.hero-sub-note{margin-top:22px; font-size:14px; color:var(--ink-faint);}

/* Right: cutout on brand circle + stat card */
.hero-v3-visual{position:relative; align-self:end; min-height:640px;}
.hero-circle{
  position:absolute; right:-4%; bottom:0;
  width:min(560px,92%); aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 42% 34%, #D8213C 0%, #B4102A 55%, #8E0620 100%);
}
.hero-circle::after{
  content:''; position:absolute; inset:-14px; border-radius:50%;
  border:1px solid rgba(196,18,48,.20);
}
.hero-person{
  position:absolute; right:2%; bottom:0; width:min(500px,84%);
  z-index:2; filter:drop-shadow(0 26px 46px rgba(16,24,40,.22));
}
.hero-person img{width:100%; height:auto; display:block;}
.hero-stat{
  position:absolute; left:0; bottom:118px; z-index:3;
  background:var(--ink); color:#fff; padding:20px 30px 22px;
  min-width:270px; overflow:hidden;
}
.hero-stat .sv{
  font-family:var(--font-display); font-weight:800;
  font-size:50px; line-height:1; letter-spacing:-.02em;
}
.hero-stat .sl{
  font-size:13px; letter-spacing:.06em; color:rgba(255,255,255,.72); margin-top:6px; display:block;
}
.hero-stat::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  animation:beam-h 5s linear infinite;
}
@media (max-width:980px){
  .hero-v3-grid{grid-template-columns:1fr; min-height:auto; gap:0;}
  .hero-v3-copy{padding:64px 0 40px;}
  .hero-v3-visual{min-height:480px; margin:0 -22px;}
  .hero-circle{right:-8%; width:min(440px,86%);}
  .hero-person{right:0; width:min(400px,80%);}
  .hero-stat{left:14px; bottom:70px; min-width:210px; padding:16px 20px 18px;}
  .hero-stat .sv{font-size:36px;}
}

/* ---------- Trust strip under hero ---------- */
.trust-strip{
  border-bottom:1px solid var(--line); background:#fff; padding:26px 0;
}
.trust-strip .wrap{
  display:flex; align-items:center; gap:38px; flex-wrap:wrap; justify-content:space-between;
}
.trust-strip .t-item{display:flex; align-items:baseline; gap:10px;}
.trust-strip .t-num{font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--ink);}
.trust-strip .t-lbl{font-size:13px; color:var(--ink-faint);}

/* ---------- Timeline (CI history) ---------- */
.timeline{margin-top:56px; position:relative;}
.tl-row{
  display:grid; grid-template-columns:130px 1fr; gap:32px;
  padding:28px 0; border-top:1px solid var(--line); position:relative;
}
.tl-row:last-child{border-bottom:1px solid var(--line);}
.tl-year{
  font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--red);
  letter-spacing:-.01em;
}
.tl-row h4{font-family:var(--font-cjk); font-weight:700; font-size:18px; margin-bottom:8px;}
.tl-row p{font-size:14.5px; color:var(--ink-soft); max-width:680px;}
@media (max-width:700px){
  .tl-row{grid-template-columns:1fr; gap:8px;}
}

/* ---------- Core values grid ---------- */
.values-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:52px;
}
@media (max-width:860px){.values-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.values-grid{grid-template-columns:1fr;}}
.value-cell{
  background:#fff; padding:34px 28px; position:relative; overflow:hidden;
  transition:background .3s ease;
}
.value-cell:hover{background:var(--paper);}
.value-cell .vnum{font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--gold); letter-spacing:.1em;}
.value-cell h4{font-family:var(--font-cjk); font-weight:800; font-size:19px; margin:14px 0 4px;}
.value-cell .ven{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; display:block;}
.value-cell p{font-size:14px; color:var(--ink-soft); line-height:1.7;}
.value-cell::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  transform:translateX(-101%); transition:transform .55s ease;
}
.value-cell:hover::after{transform:translateX(0);}

/* ---------- Section rule with laser ---------- */
.rule-laser{
  position:relative; height:1px; background:var(--line); overflow:hidden; margin:0;
}
.rule-laser::after{
  content:''; position:absolute; top:0; height:1px; width:22%;
  background:linear-gradient(90deg,transparent,var(--red),#fff,var(--red),transparent);
  box-shadow:0 0 10px 1px rgba(196,18,48,.5);
  animation:beam-h 6s linear infinite;
}

/* ---------- Vision / mission split ---------- */
.vm-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:52px;}
@media (max-width:800px){.vm-grid{grid-template-columns:1fr;}}
.vm-cell{background:#fff; padding:44px 38px;}
.vm-cell .eyebrow{margin-bottom:18px;}
.vm-cell h3{font-family:var(--font-cjk); font-weight:800; font-size:24px; line-height:1.45; margin-bottom:16px;}
.vm-cell p{font-size:15.5px; color:var(--ink-soft); line-height:1.8;}
.vm-cell ol{counter-reset:vm; margin:0; padding:0;}
.vm-cell ol li{
  list-style:none; counter-increment:vm; position:relative;
  padding:12px 0 12px 34px; font-size:14.5px; color:var(--ink-soft); border-top:1px solid var(--line);
}
.vm-cell ol li:first-child{border-top:none;}
.vm-cell ol li::before{
  content:counter(vm,decimal-leading-zero); position:absolute; left:0; top:12px;
  font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--gold);
}

/* ---------- Full-name lockup ---------- */
.brand-lockup{display:flex; flex-direction:column; gap:3px;}
.brand-lockup .bl-en{font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.18em; color:var(--ink-faint); text-transform:uppercase;}

/* ---------- V3.1 hero refinements ---------- */
.hero-v3 h1{font-size:clamp(32px,4.1vw,50px);}
.hero-v3-grid{min-height:690px;}
.hero-circle{width:min(600px,96%); right:-6%;}
.hero-person{width:min(530px,88%); right:0;}
.hero-stat{left:-6%; bottom:64px; padding:22px 32px 24px;}
.hero-stat .sv{font-size:46px;}
@media (max-width:1200px){ .hero-stat{left:0;} }
@media (max-width:980px){
  .hero-v3-grid{min-height:auto;}
  .hero-stat{left:10px; bottom:48px;}
}

/* ---------- V3.2 hero proportion fix (headroom above subject) ---------- */
.hero-v3-grid{min-height:756px;}
.hero-person{width:min(482px,84%);}
.hero-circle{width:min(556px,94%); right:-4%;}
.hero-stat{bottom:72px;}
@media (max-width:980px){
  .hero-v3-grid{min-height:auto;}
  .hero-v3-visual{min-height:520px;}
  .hero-person{width:min(360px,74%);}
  .hero-circle{width:min(400px,82%);}
}

/* ============================================================
   V4 — CORPORATE REFINEMENT LAYER
   Premium through typography, grid and hierarchy — not effects.
   ============================================================ */

:root{
  --ink:#15130F;
  --ink-soft:#4A463F;
  --ink-faint:#8A8378;
  --line:#E4E0D8;
  --line-strong:#CFC9BE;
  --paper:#FAFAF8;
  --radius:2px;
}

/* ---------- TYPOGRAPHY: square, structured, corporate ---------- */
body{
  font-size:16.5px;
  line-height:1.62;
  letter-spacing:.005em;
}
h1.display{
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.1;
}
h2.section-title{
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.22;
}
h3.card-title{ font-weight:700; letter-spacing:-.01em; line-height:1.34; }
.lede{
  font-size:17.5px; line-height:1.68; color:var(--ink-soft); letter-spacing:.003em;
}
.body-sm{font-size:14.5px; line-height:1.65;}
strong{font-weight:700; color:var(--ink);}

/* Section label system: ENGLISH TERM + 中文 */
.sec-label{
  display:flex; flex-direction:column; gap:5px; margin-bottom:20px;
}
.sec-label .en{
  font-family:var(--font-display);
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red);
}
.sec-label .cn{
  font-family:var(--font-cjk);
  font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--ink-faint);
}
.sec-label.on-dark .en{color:var(--gold);}
.sec-label.on-dark .cn{color:rgba(255,255,255,.5);}

/* numbered section index — corporate structure */
.sec-index{
  display:flex; align-items:baseline; gap:16px; margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.sec-index .n{
  font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:.14em; color:var(--gold);
}
.sec-index .t{
  font-family:var(--font-display); font-size:11.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
}
.bg-ink .sec-index, .proof-band .sec-index{border-bottom-color:rgba(255,255,255,.14);}
.bg-ink .sec-index .t, .proof-band .sec-index .t{color:rgba(255,255,255,.5);}

/* legacy eyebrow — retune to match the new system */
.eyebrow{
  font-size:11.5px; letter-spacing:.2em; font-weight:700;
}
.eyebrow::before{width:18px; background:var(--gold);}

/* ---------- BUTTONS: square, corporate ---------- */
.btn{border-radius:var(--radius); font-size:14.5px; padding:15px 30px; letter-spacing:.02em;}
.btn-sm{padding:11px 20px; font-size:13.5px;}
.btn-primary{background:var(--red); border-color:var(--red);}
.btn-primary:hover{background:var(--red-deep); border-color:var(--red-deep);}
.btn-secondary{border-color:var(--ink); background:#fff;}
.btn-secondary:hover{background:var(--ink); color:#fff; border-color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink); color:var(--ink);}

/* header CTA — squared, not a pill */
.btn-call{
  border-radius:var(--radius); padding:12px 20px; font-size:13.5px; letter-spacing:.02em;
}
.btn-call:hover{transform:none; background:var(--red-deep);}
.btn-call .pulse{
  width:6px; height:6px; background:#fff; opacity:.9; box-shadow:none; animation:none;
}

/* hero CTA — one decisive corporate button */
.cta-pair{gap:0;}
.cta-pill{
  border-radius:var(--radius) 0 0 var(--radius);
  padding:17px 30px; font-size:15px; letter-spacing:.02em;
  border-right:none;
}
.cta-round{
  width:auto; height:auto; border-radius:0 var(--radius) var(--radius) 0;
  padding:17px 20px; font-size:15px; align-self:stretch;
  display:inline-flex; align-items:center;
}
.cta-pair:hover .cta-round{transform:none; background:var(--red-deep);}

/* hero badge — squared tag with gold rule */
.hero-badge{
  border-radius:0; border:none; border-left:2px solid var(--gold);
  background:transparent; box-shadow:none;
  padding:2px 0 2px 14px; font-size:12.5px; letter-spacing:.05em;
  color:var(--ink-soft);
}
.hero-v3 .hero-badge{background:transparent; border-left:2px solid var(--gold); box-shadow:none;}
.hero-badge .dot{display:none;}

/* chips / pills → squared tags */
.filter-chip{border-radius:var(--radius); letter-spacing:.02em; font-size:13px;}
.mini-course .pill{border-radius:var(--radius); letter-spacing:.06em; text-transform:uppercase; font-size:10.5px;}
.program-card .flag-tag{border-radius:0; letter-spacing:.14em;}

/* ---------- REDUCE EFFECTS ---------- */
.hero-circle{
  background:#B4102A;
}
.hero-circle::after{inset:-16px; border-color:rgba(21,19,15,.10);}
.hero-person{filter:drop-shadow(0 20px 34px rgba(21,19,15,.16));}
.hero-stat{padding:24px 32px 26px;}
.hero-stat::before{
  background:var(--gold); height:2px; animation:none; opacity:.9;
}
.hero-stat .sv{letter-spacing:-.03em;}
.rule-laser::after{box-shadow:none; background:linear-gradient(90deg,transparent,rgba(196,18,48,.5),transparent);}
.value-cell::after{background:var(--red); height:1px;}
.program-card, .dc-card, .mini-course, .detail-facts, .founder-card, .proof-card{border-radius:var(--radius);}
.marquee-item img, .photo-cell img{filter:none;}

/* ---------- EXECUTIVE PROFILE (founder metrics) ---------- */
.exec-metrics{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin:36px 0 32px;
}
@media (max-width:820px){.exec-metrics{grid-template-columns:1fr 1fr;}}
.exec-metrics .em{
  padding:26px 24px 26px 0; border-right:1px solid var(--line);
}
.exec-metrics .em:last-child{border-right:none;}
@media (max-width:820px){
  .exec-metrics .em:nth-child(2n){border-right:none;}
  .exec-metrics .em:nth-child(-n+2){border-bottom:1px solid var(--line);}
}
.exec-metrics .emv{
  font-family:var(--font-display); font-weight:800; font-size:34px;
  letter-spacing:-.03em; color:var(--ink); line-height:1; display:block;
}
.exec-metrics .emk{
  font-family:var(--font-display); font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red);
  margin-top:12px; display:block;
}
.exec-metrics .emd{font-size:13px; color:var(--ink-faint); margin-top:5px; display:block;}

/* credentials as a structured register, not a bullet list */
.cred-register{
  display:grid; grid-template-columns:1fr 1fr; gap:0 40px; margin-top:8px;
}
@media (max-width:620px){.cred-register{grid-template-columns:1fr;}}
.cred-register li{
  display:flex; align-items:baseline; gap:14px;
  padding:13px 0; border-top:1px solid var(--line);
  font-size:14px; color:var(--ink-soft);
}
.cred-register li .cn-i{
  font-family:var(--font-display); font-size:10.5px; font-weight:700;
  color:var(--gold); letter-spacing:.1em; flex:0 0 auto;
}

/* ---------- TRUST STRIP: tighter, more corporate ---------- */
.trust-strip{padding:22px 0; background:var(--ink); border-bottom:none;}
.trust-strip .t-num{font-size:22px; color:#fff; letter-spacing:-.02em;}
.trust-strip .t-lbl{color:rgba(255,255,255,.5); font-size:12px; letter-spacing:.04em;}
.trust-strip .t-item{gap:9px;}

/* ---------- Framework: editorial, less card-like ---------- */
.framework-grid{border-color:var(--line); background:var(--line);}
.framework-grid .fw-item{padding:34px 26px 30px;}
.framework-grid .fw-item .num{font-size:12px; letter-spacing:.14em;}
.framework-grid .fw-item .fw-tag{
  font-size:10.5px; letter-spacing:.18em; color:var(--red); font-weight:700;
  font-family:var(--font-display);
}
.framework-grid .fw-item h3{font-size:17px; letter-spacing:-.01em;}
.framework-grid .fw-item p{font-size:13.5px; line-height:1.62;}
.flow-strip{font-size:11.5px; letter-spacing:.2em; color:var(--ink-faint);}

/* ---------- Progression strip ---------- */
.progression .step .tag{font-family:var(--font-display); font-size:10.5px; letter-spacing:.16em; color:var(--gold); font-weight:700;}
.progression .step .label{font-size:16px; letter-spacing:-.01em;}
.progression .arrow{color:var(--line-strong);}

/* ---------- Audience / pillars: tighter type ---------- */
.audience-grid .num, .pillar .num{font-size:11.5px; letter-spacing:.16em;}
.audience-grid h4{font-size:16px; letter-spacing:-.005em;}
.audience-grid p, .pillar p{font-size:13.5px; line-height:1.62;}
.pillar h4{font-size:15.5px;}

/* ---------- Values ---------- */
.value-cell h4{font-size:18px; letter-spacing:-.01em;}
.value-cell .ven{font-size:10.5px; letter-spacing:.18em; color:var(--red); font-weight:700; font-family:var(--font-display);}
.value-cell .vnum{font-size:11px; letter-spacing:.16em;}
.value-cell p{font-size:13.5px; line-height:1.65;}

/* ---------- Timeline ---------- */
.tl-year{font-size:19px; letter-spacing:-.01em;}
.tl-row h4{font-size:16.5px; letter-spacing:-.005em;}
.tl-row p{font-size:14px; line-height:1.65;}

/* ---------- Program cards ---------- */
.pc-field .k{font-family:var(--font-display); font-size:10.5px; letter-spacing:.16em; color:var(--red); font-weight:700;}
.pc-field .v{font-size:14px; line-height:1.55;}
.program-card h3{font-size:19px;}

/* ---------- Nav ---------- */
nav.main-nav a{font-size:14.5px; letter-spacing:.01em; font-weight:500;}
nav.main-nav a.active{font-weight:700;}
nav.main-nav a.active::after{height:2px; background:var(--red); bottom:-6px;}

/* ---------- Footer ---------- */
.footer-col h5{font-family:var(--font-display); font-size:10.5px; letter-spacing:.2em;}
.footer-col a, .footer-col span{font-size:14px;}
.footer-bottom span{font-size:12px; letter-spacing:.03em;}
.footer-top .flog{font-size:13.5px; line-height:1.7;}

/* ---------- Section rhythm ---------- */
:root{--section-pad:124px;}
.section-head{margin-bottom:52px;}
.section-head h2{margin-bottom:16px;}

/* ---------- Logo wall: quieter ---------- */
.logo-wall .lw-item{font-size:13.5px; letter-spacing:.02em; color:var(--ink-faint);}

/* ---------- Path list ---------- */
.path-item .path-q{font-size:18px; letter-spacing:-.01em;}
.path-item .path-q .num{font-size:11.5px; letter-spacing:.14em;}
.path-item .path-to{font-size:13px; letter-spacing:.02em;}
.bg-ink .sec-label .en, .proof-band .sec-label .en{color:var(--gold);}
.bg-ink .sec-label .cn, .proof-band .sec-label .cn{color:rgba(255,255,255,.5);}
.detail-hero .sec-label, .page-hero .sec-label{margin-bottom:22px;}

/* ---------- V4.1 exec metrics alignment ---------- */
.exec-metrics .emv{
  white-space:nowrap; font-size:clamp(24px,2.3vw,32px);
}
.exec-metrics .emk{min-height:2.6em; display:flex; align-items:flex-start;}
.exec-metrics .emd{margin-top:2px;}
@media (max-width:820px){ .exec-metrics .emk{min-height:0;} }

/* ============================================================
   V5 — READABILITY & PRESENCE
   V4 compressed the type too far. Chinese needs more size and
   more leading than Latin, not less. This restores legibility
   and gives headings real presence.
   ============================================================ */

:root{
  /* robust CJK stack — site stays correct even if Google Fonts is blocked */
  --font-cjk:'Noto Sans SC','PingFang SC','Microsoft YaHei','Hiragino Sans GB','Source Han Sans SC','Heiti SC',sans-serif;
  --font-display:'Archivo','Inter','Helvetica Neue',var(--font-cjk),sans-serif;
  --font-body:'Inter','Helvetica Neue',var(--font-cjk),sans-serif;
}

/* ---------- BASE: bigger, with breathing room ---------- */
body{
  font-size:18px;
  line-height:1.8;
  letter-spacing:.01em;
}

/* ---------- HEADINGS: real presence ---------- */
h1.display{
  font-size:clamp(38px,5.2vw,64px);
  line-height:1.16;
  letter-spacing:-.02em;
}
h2.section-title{
  font-size:clamp(30px,4.2vw,48px);
  line-height:1.3;
  letter-spacing:-.015em;
  margin-bottom:22px;
}
h3.card-title{font-size:23px; line-height:1.45;}
.hero-v3 h1{font-size:clamp(36px,4.6vw,58px); line-height:1.18;}

/* ---------- BODY COPY ---------- */
.lede{font-size:19.5px; line-height:1.82; max-width:660px;}
.body-sm{font-size:16px; line-height:1.78;}
p{letter-spacing:.005em;}

/* ---------- SECTION LABELS: readable, not micro ---------- */
.sec-label{gap:7px; margin-bottom:22px;}
.sec-label .en{font-size:13px; letter-spacing:.18em;}
.sec-label .cn{font-size:15px; font-weight:600; letter-spacing:.04em;}
.eyebrow{font-size:13px; letter-spacing:.18em;}

/* ---------- HERO ---------- */
.hero-badge{font-size:14.5px; letter-spacing:.03em; padding:3px 0 3px 15px;}
.hero-sub-note{font-size:15.5px;}
.cta-pill{font-size:16.5px; padding:19px 34px;}
.cta-round{font-size:17px; padding:19px 22px;}
.hero-stat .sv{font-size:54px;}
.hero-stat .sl{font-size:14.5px;}

/* ---------- TRUST STRIP ---------- */
.trust-strip{padding:26px 0;}
.trust-strip .t-num{font-size:25px;}
.trust-strip .t-lbl{font-size:13.5px;}

/* ---------- BUTTONS ---------- */
.btn{font-size:16px; padding:16px 32px;}
.btn-sm{font-size:15px; padding:13px 24px;}
.btn-call{font-size:15px; padding:13px 22px;}

/* ---------- NAV ---------- */
nav.main-nav a{font-size:16px;}
nav.main-nav{gap:32px;}

/* ---------- FRAMEWORK ---------- */
.framework-grid .fw-item{padding:38px 28px 34px; min-height:290px; gap:14px;}
.framework-grid .fw-item .num{font-size:13px; letter-spacing:.16em;}
.framework-grid .fw-item .fw-tag{font-size:12px; letter-spacing:.16em;}
.framework-grid .fw-item h3{font-size:21px; line-height:1.4;}
.framework-grid .fw-item p{font-size:15.5px; line-height:1.78;}
.flow-strip{font-size:13px; letter-spacing:.18em;}

/* ---------- PROGRESSION ---------- */
.progression .step{padding:28px 24px;}
.progression .step .tag{font-size:12px; letter-spacing:.14em;}
.progression .step .label{font-size:18px; line-height:1.45;}

/* ---------- AUDIENCE / PILLARS ---------- */
.audience-grid .aud{padding:36px 26px;}
.audience-grid .num, .pillar .num{font-size:13px; letter-spacing:.14em;}
.audience-grid h4{font-size:19px; line-height:1.45;}
.audience-grid p{font-size:15.5px; line-height:1.75;}
.pillar{padding:34px 24px 0;}
.pillar h4{font-size:18px;}
.pillar p{font-size:15px; line-height:1.75;}

/* ---------- VALUES ---------- */
.value-cell{padding:38px 30px;}
.value-cell h4{font-size:21px;}
.value-cell .ven{font-size:12px; letter-spacing:.16em;}
.value-cell .vnum{font-size:12.5px; letter-spacing:.14em;}
.value-cell p{font-size:15.5px; line-height:1.8;}

/* ---------- TIMELINE ---------- */
.tl-row{padding:32px 0;}
.tl-year{font-size:23px;}
.tl-row h4{font-size:19px; margin-bottom:10px;}
.tl-row p{font-size:16px; line-height:1.8;}

/* ---------- VISION / MISSION ---------- */
.vm-cell{padding:48px 42px;}
.vm-cell h3{font-size:26px; line-height:1.55;}
.vm-cell p{font-size:16.5px; line-height:1.85;}
.vm-cell ol li{font-size:16px; line-height:1.8; padding:16px 0 16px 36px;}
.vm-cell ol li::before{font-size:13px; top:16px;}

/* ---------- PROGRAM CARDS ---------- */
.program-card .pc-top{padding:32px 30px 24px;}
.program-card h3{font-size:22px;}
.pc-field .k{font-size:12px; letter-spacing:.14em;}
.pc-field .v{font-size:16px; line-height:1.7;}
.pc-bottom{padding:22px 30px;}
.pc-bottom .fmt{font-size:14.5px;}
.program-card .flag-tag{font-size:12px; letter-spacing:.12em; padding:6px 12px;}

/* ---------- CATEGORY / MINI COURSE ---------- */
.category-head{padding:30px 34px;}
.category-head h3{font-size:22px;}
.category-head .cat-en{font-size:13px; letter-spacing:.1em;}
.category-head .num{font-size:24px;}
.category-body{padding:0 34px 34px;}
.mini-course{padding:26px;}
.mini-course h4{font-size:18px; margin-bottom:10px;}
.mini-course p{font-size:15.5px; line-height:1.78; margin-bottom:16px;}
.mini-course a{font-size:15px;}
.mini-course .pill{font-size:11.5px; padding:5px 11px;}

/* ---------- PATH LIST ---------- */
.path-item{padding:32px 4px;}
.path-item .path-q{font-size:21px;}
.path-item .path-q .num{font-size:13px; letter-spacing:.14em;}
.path-item .path-to{font-size:15px;}

/* ---------- STATS ---------- */
.stat .stat-num{font-size:clamp(38px,4.6vw,56px);}
.stat .stat-lbl{font-size:14.5px;}

/* ---------- EXEC METRICS ---------- */
.exec-metrics .emv{font-size:clamp(28px,2.7vw,38px);}
.exec-metrics .emk{font-size:11.5px; letter-spacing:.14em; margin-top:14px;}
.exec-metrics .emd{font-size:14.5px;}
.cred-register li{font-size:15.5px; padding:15px 0;}
.cred-register li .cn-i{font-size:11.5px;}

/* ---------- DIRECTORY / DETAIL ---------- */
.dc-card{padding:30px;}
.dc-card h4{font-size:20px; margin-bottom:14px;}
.dc-card .dc-cat{font-size:12px; letter-spacing:.12em;}
.dc-field .k{font-size:12px; letter-spacing:.1em;}
.dc-field .v{font-size:15.5px; line-height:1.7;}
.filter-chip{font-size:15px; padding:11px 22px;}
.detail-facts{padding:32px;}
.detail-facts .k{font-size:12px; letter-spacing:.12em;}
.detail-facts .v{font-size:16.5px; line-height:1.6;}
.num-block{padding:32px 0; gap:30px;}
.num-block .num{font-size:24px;}
.num-block h4{font-size:19px; margin-bottom:10px;}
.num-block p{font-size:16px; line-height:1.8;}
.check-list li{font-size:16px; line-height:1.75; padding:14px 0 14px 30px;}
.faq-item{padding:28px 0;}
.faq-item .q{font-size:18px; margin-bottom:12px;}
.faq-item .a{font-size:16px; line-height:1.8;}
.spec-table td{padding:22px 0;}
.spec-table td:first-child{font-size:13px; letter-spacing:.1em;}
.spec-table td:last-child{font-size:16.5px; line-height:1.7;}
.detail-cta h3{font-size:29px;}
.detail-cta p{font-size:16.5px;}

/* ---------- FOOTER ---------- */
.footer-col h5{font-size:12px; letter-spacing:.16em; margin-bottom:20px;}
.footer-col a, .footer-col span{font-size:15.5px; padding:8px 0;}
.footer-top .flog{font-size:15px; line-height:1.85; max-width:320px;}
.footer-bottom span{font-size:13.5px;}

/* ---------- MISC ---------- */
.logo-wall .lw-item{font-size:15px; height:104px;}
.photo-cell .plabel{font-size:14px;}
.marquee-item .cap{font-size:13px;}
.breadcrumb{font-size:14.5px;}
.proof-card .ptype{font-size:13px; letter-spacing:.14em;}
.proof-card p{font-size:15.5px; line-height:1.78;}
.founder-card .fname{font-size:24px;}
.founder-card .frole{font-size:14.5px; line-height:1.6;}
.final-cta p{font-size:18px; line-height:1.85;}
.section-head{margin-bottom:56px;}
.band-head{margin-bottom:48px;}

/* ---------- MOBILE: keep hierarchy, avoid cramping ---------- */
@media (max-width:760px){
  body{font-size:17px; line-height:1.82;}
  h1.display{font-size:clamp(30px,7.4vw,40px); line-height:1.24;}
  .hero-v3 h1{font-size:clamp(29px,7.2vw,38px); line-height:1.26;}
  h2.section-title{font-size:clamp(25px,6.2vw,32px); line-height:1.36;}
  .lede{font-size:17.5px; line-height:1.82;}
  .vm-cell{padding:36px 26px;}
  .vm-cell h3{font-size:22px;}
  .category-head{padding:24px 22px;}
  .category-body{padding:0 22px 26px;}
  .path-item .path-q{font-size:18px;}
  .hero-stat .sv{font-size:38px;}
}

/* ---------- V5.1 hero headline fit ---------- */
.hero-v3-grid{grid-template-columns:1.14fr .86fr;}
.hero-v3 h1{font-size:clamp(30px,3.5vw,46px); line-height:1.24;}
.hero-v3 .lede{max-width:585px;}
@media (max-width:980px){
  .hero-v3-grid{grid-template-columns:1fr;}
  .hero-v3 h1{font-size:clamp(28px,6.8vw,36px); line-height:1.3;}
}

/* ---------- V5.2 logo wall: no grey gaps on partial rows ---------- */
.logo-wall{
  grid-template-columns:repeat(6,1fr);
  gap:0; background:var(--white);
  border:none; border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.logo-wall .lw-item{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--white);
}
@media (max-width:900px){ .logo-wall{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .logo-wall{grid-template-columns:repeat(2,1fr);} }

/* ============================================================
   V6 — IA / DISCOVERY / CONVERSION
   Red = action only. Gold = premium accent. Ink/white = structure.
   ============================================================ */

/* ---------- RED DISCIPLINE: labels move off red ---------- */
.sec-label .en{color:var(--ink);}
.sec-label .cn{color:var(--ink-faint);}
.framework-grid .fw-item .fw-tag{color:var(--gold);}
.pc-field .k{color:var(--ink-faint);}
.value-cell .ven{color:var(--gold);}
.exec-metrics .emk{color:var(--gold);}
.dc-card .dc-cat{color:var(--ink-faint);}
.eyebrow{color:var(--ink);}
.progression .step .tag{color:var(--ink-faint);}
.mini-course a{color:var(--ink); border-bottom:1px solid var(--red); padding-bottom:2px;}
.mini-course a:hover{color:var(--red);}

/* ---------- SQUARE OFF ---------- */
:root{--radius:0px;}
.program-card,.dc-card,.mini-course,.detail-facts,.founder-card,.proof-card,
.btn,.btn-call,.cta-pill,.cta-round,.filter-chip,.mini-course .pill{border-radius:0;}

/* ---------- 02 TRUST (compact) ---------- */
.trust-strip .wrap{justify-content:flex-start; gap:56px;}

/* ---------- 03 SEGMENTATION: two doors ---------- */
.segment-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--line); border-right:none;
}
@media (max-width:800px){.segment-grid{grid-template-columns:1fr; border-right:1px solid var(--line);}}
.segment-door{
  border-right:1px solid var(--line);
  padding:52px 44px 46px; background:#fff;
  display:flex; flex-direction:column;
  transition:background .25s ease;
  position:relative;
}
@media (max-width:800px){
  .segment-door{border-right:none; border-bottom:1px solid var(--line);}
}
.segment-door:hover{background:var(--paper);}
.segment-door .sd-tag{
  font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:18px;
}
.segment-door h3{
  font-family:var(--font-cjk); font-weight:800; font-size:27px;
  letter-spacing:-.015em; line-height:1.35; margin-bottom:14px;
}
.segment-door p{font-size:16px; color:var(--ink-soft); line-height:1.78; margin-bottom:26px;}
.segment-door ul{margin-bottom:32px;}
.segment-door ul li{
  font-size:15px; color:var(--ink-soft); padding:10px 0 10px 22px;
  border-top:1px solid var(--line); position:relative;
}
.segment-door ul li:first-child{border-top:none;}
.segment-door ul li::before{
  content:''; position:absolute; left:0; top:19px; width:8px; height:1px; background:var(--gold);
}
.segment-door .sd-go{
  margin-top:auto; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-cjk); font-weight:700; font-size:16px; color:var(--ink);
}
.segment-door .sd-go .ar{
  width:30px; height:30px; border:1px solid var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .2s ease; font-size:14px;
}
.segment-door:hover .sd-go{color:var(--red);}
.segment-door:hover .sd-go .ar{background:var(--red); border-color:var(--red); color:#fff;}

/* ---------- 04 FIND YOUR PATH (finder) ---------- */
.finder{border:1px solid var(--line); background:#fff;}
.finder-head{
  padding:30px 36px; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
}
.finder-head .fq{font-family:var(--font-cjk); font-weight:800; font-size:21px; letter-spacing:-.01em;}
.finder-head .fh{font-size:15px; color:var(--ink-faint);}
.finder-body{display:grid; grid-template-columns:1fr 1fr;}
@media (max-width:900px){.finder-body{grid-template-columns:1fr;}}
.finder-options{border-right:1px solid var(--line);}
@media (max-width:900px){.finder-options{border-right:none; border-bottom:1px solid var(--line);}}
.finder-opt{
  display:flex; align-items:flex-start; gap:18px; width:100%;
  padding:24px 34px; background:#fff; border:none; border-bottom:1px solid var(--line);
  cursor:pointer; text-align:left; font-family:var(--font-cjk);
  transition:background .18s ease;
}
.finder-opt:last-child{border-bottom:none;}
.finder-opt:hover{background:var(--paper);}
.finder-opt.active{background:var(--ink);}
.finder-opt .oi{
  font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:.14em; color:var(--gold); padding-top:5px; flex:0 0 auto;
}
.finder-opt .ot{font-size:17.5px; font-weight:600; color:var(--ink); line-height:1.55;}
.finder-opt .os{display:block; font-size:14px; color:var(--ink-faint); margin-top:5px; font-weight:400;}
.finder-opt.active .ot{color:#fff;}
.finder-opt.active .os{color:rgba(255,255,255,.6);}
.finder-result{padding:36px 40px; background:var(--paper); display:flex; flex-direction:column;}
.finder-result .fr-empty{color:var(--ink-faint); font-size:16px; line-height:1.8;}
.fr-cat{
  font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:14px;
}
.fr-title{font-family:var(--font-cjk); font-weight:800; font-size:25px; letter-spacing:-.015em; margin-bottom:16px; line-height:1.35;}
.fr-desc{font-size:16px; color:var(--ink-soft); line-height:1.8; margin-bottom:22px;}
.fr-meta{border-top:1px solid var(--line-strong); margin-bottom:26px;}
.fr-meta div{
  display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--line);
  font-size:15px;
}
.fr-meta div span:first-child{
  flex:0 0 96px; color:var(--ink-faint); font-size:13px; letter-spacing:.06em;
}
.fr-meta div span:last-child{color:var(--ink);}
.fr-actions{margin-top:auto; display:flex; gap:12px; flex-wrap:wrap;}

/* ---------- 07 CORPORATE SOLUTIONS ---------- */
.solutions-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border:1px solid var(--line); border-right:none; margin-top:52px;
}
@media (max-width:1000px){.solutions-grid{grid-template-columns:1fr 1fr; border-right:1px solid var(--line);}}
@media (max-width:600px){.solutions-grid{grid-template-columns:1fr;}}
.sol-cell{
  border-right:1px solid var(--line); padding:34px 26px 32px; background:#fff;
}
@media (max-width:1000px){.sol-cell{border-bottom:1px solid var(--line);}}
.sol-cell .sn{font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--gold);}
.sol-cell .se{
  display:block; font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:16px 0 8px;
}
.sol-cell h4{font-family:var(--font-cjk); font-weight:700; font-size:18px; line-height:1.45; margin-bottom:10px;}
.sol-cell p{font-size:14.5px; color:var(--ink-soft); line-height:1.72;}

/* ---------- 08 CASE STUDIES ---------- */
.case-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px;}
@media (max-width:1000px){.case-grid{grid-template-columns:1fr;}}
.case-card{border:1px solid var(--line); background:#fff; display:flex; flex-direction:column;}
.case-card .cc-img{aspect-ratio:16/10; overflow:hidden; background:var(--paper);}
.case-card .cc-img img{width:100%;height:100%;object-fit:cover;display:block;}
.case-card .cc-body{padding:28px 28px 26px; display:flex; flex-direction:column; flex:1;}
.case-card .cc-sector{
  font-family:var(--font-display); font-size:11.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:12px;
}
.case-card h4{font-family:var(--font-cjk); font-weight:800; font-size:19px; line-height:1.45; margin-bottom:18px;}
.cc-row{border-top:1px solid var(--line); padding:13px 0;}
.cc-row .k{
  display:block; font-family:var(--font-display); font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:5px;
}
.cc-row .v{font-size:14.5px; color:var(--ink-soft); line-height:1.65;}
.cc-row.outcome .v{color:var(--ink-faint); font-style:normal;}
.cc-clients{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-faint); line-height:1.6;
}

/* ---------- 09 MISSION PILLARS ---------- */
.pillars-3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid var(--line); border-right:none; margin-top:48px;
}
@media (max-width:800px){.pillars-3{grid-template-columns:1fr; border-right:1px solid var(--line);}}
.pillar-3{border-right:1px solid var(--line); padding:38px 32px; background:#fff;}
@media (max-width:800px){.pillar-3{border-right:none; border-bottom:1px solid var(--line);}}
.pillar-3 .p3e{
  font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.pillar-3 h4{font-family:var(--font-cjk); font-weight:800; font-size:21px; margin:14px 0 10px; letter-spacing:-.01em;}
.pillar-3 p{font-size:15.5px; color:var(--ink-soft); line-height:1.78;}

/* ---------- section index numbering ---------- */
.sec-num{
  font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:.18em; color:var(--gold); display:block; margin-bottom:10px;
}

/* ---------- keep animation minimal ---------- */
.reveal{transition:opacity .5s ease, transform .5s ease;}

/* ---------- V6.1 fix: closed mobile nav must not extend the document ---------- */
html{overflow-x:hidden;}
@media (max-width:960px){
  nav.main-nav{
    visibility:hidden; pointer-events:none;
    transition:transform .3s ease, visibility 0s linear .3s;
  }
  nav.main-nav.open{
    visibility:visible; pointer-events:auto;
    transition:transform .3s ease, visibility 0s linear 0s;
  }
}

/* ============================================================
   V7 — MEGA MENU / LEAD CAPTURE / RESOURCES
   ============================================================ */

/* ---------- Dropdown navigation ---------- */
.nav-item{position:relative;}
.nav-item > a{
  display:inline-flex; align-items:center; gap:6px;
}
.nav-item > a .cx{
  width:9px; height:9px; flex:0 0 auto; transition:transform .2s ease;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
}
.nav-item.open > a .cx{transform:rotate(-135deg) translate(-2px,-2px);}
.nav-panel{
  position:absolute; top:calc(100% + 18px); left:-22px;
  min-width:320px; background:#fff;
  border:1px solid var(--line); border-top:2px solid var(--red);
  box-shadow:0 18px 44px rgba(21,19,15,.10);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index:120; padding:10px 0;
}
.nav-item.open .nav-panel{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}
.nav-panel a{
  display:block; padding:13px 26px; font-size:15.5px; font-weight:600;
  color:var(--ink); white-space:nowrap; transition:background .15s ease;
}
.nav-panel a span{
  display:block; font-size:13px; font-weight:400; color:var(--ink-faint);
  margin-top:3px; white-space:normal; max-width:290px; line-height:1.55;
}
.nav-panel a:hover{background:var(--paper); color:var(--red);}
.nav-panel .np-div{height:1px; background:var(--line); margin:8px 0;}
.nav-panel .np-head{
  padding:8px 26px 10px; font-family:var(--font-display);
  font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
}
/* wide two-column panel */
.nav-panel.wide{min-width:560px; display:grid; grid-template-columns:1fr 1fr; padding:14px 0;}
.nav-panel.wide .np-head{grid-column:1/-1;}

@media (max-width:960px){
  .nav-item{width:100%;}
  .nav-panel{
    position:static; opacity:1; visibility:visible; transform:none;
    border:none; box-shadow:none; min-width:0; padding:0 0 10px 0;
    display:none;
  }
  .nav-panel.wide{grid-template-columns:1fr; min-width:0;}
  .nav-item.open .nav-panel{display:block;}
  .nav-item.open .nav-panel.wide{display:block;}
  .nav-panel a{padding:11px 0 11px 16px; font-size:16px; border-bottom:none;}
  .nav-panel a span{font-size:13.5px;}
  .nav-panel .np-head{padding:12px 0 6px;}
  .nav-item > a{justify-content:space-between; width:100%;}
}

/* ---------- Contact page ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line);}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-form-col{padding:48px 44px; border-right:1px solid var(--line);}
@media (max-width:900px){.contact-form-col{border-right:none; border-bottom:1px solid var(--line); padding:36px 26px;}}
.contact-info-col{padding:48px 44px; background:var(--paper);}
@media (max-width:900px){.contact-info-col{padding:36px 26px;}}

.field{margin-bottom:22px;}
.field label{
  display:block; font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:9px;
}
.field label .req{color:var(--red);}
.field input, .field select, .field textarea{
  width:100%; padding:14px 15px; border:1px solid var(--line-strong);
  font-family:var(--font-cjk); font-size:16px; color:var(--ink); background:#fff;
  border-radius:0; transition:border-color .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--ink);
}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; cursor:pointer;}
.field textarea{resize:vertical; min-height:110px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:600px){.field-row{grid-template-columns:1fr;}}
.consent{display:flex; gap:12px; align-items:flex-start; margin-bottom:26px;}
.consent input{width:17px; height:17px; margin-top:3px; flex:0 0 auto; accent-color:var(--red);}
.consent label{font-size:14px; color:var(--ink-soft); line-height:1.65; letter-spacing:0; text-transform:none; font-family:var(--font-cjk); font-weight:400;}

.contact-line{padding:20px 0; border-top:1px solid var(--line);}
.contact-line:first-of-type{border-top:none; padding-top:0;}
.contact-line .cl-k{
  font-family:var(--font-display); font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:7px; display:block;
}
.contact-line .cl-v{font-size:16.5px; color:var(--ink); line-height:1.6;}
.contact-line .cl-v a{border-bottom:1px solid var(--line-strong);}
.contact-line .cl-v a:hover{color:var(--red); border-color:var(--red);}
.contact-line .cl-note{font-size:14px; color:var(--ink-faint); margin-top:5px;}

/* ---------- Resource / download cards ---------- */
.res-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px;}
@media (max-width:1000px){.res-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.res-grid{grid-template-columns:1fr;}}
.res-card{border:1px solid var(--line); background:#fff; padding:32px 30px 28px; display:flex; flex-direction:column;}
.res-card .rc-type{
  font-family:var(--font-display); font-size:10.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;
}
.res-card h4{font-family:var(--font-cjk); font-weight:800; font-size:20px; line-height:1.4; margin-bottom:12px;}
.res-card p{font-size:15px; color:var(--ink-soft); line-height:1.75; margin-bottom:20px;}
.res-card .rc-meta{
  font-size:13px; color:var(--ink-faint); padding:12px 0; border-top:1px solid var(--line);
  margin-bottom:20px; display:flex; gap:14px; flex-wrap:wrap;
}
.res-card .rc-go{margin-top:auto;}

/* ---------- Download gate modal ---------- */
.dl-overlay{
  position:fixed; inset:0; background:rgba(21,19,15,.55);
  display:none; align-items:center; justify-content:center; z-index:400; padding:24px;
}
.dl-overlay.open{display:flex;}
.dl-modal{
  background:#fff; width:100%; max-width:520px; border-top:3px solid var(--red);
  max-height:90vh; overflow-y:auto;
}
.dl-modal-head{padding:30px 34px 0; position:relative;}
.dl-modal-head .dl-close{
  position:absolute; top:22px; right:26px; background:none; border:none;
  font-size:26px; line-height:1; color:var(--ink-faint); cursor:pointer; padding:4px;
}
.dl-modal-head .dl-close:hover{color:var(--ink);}
.dl-modal-head .dl-type{
  font-family:var(--font-display); font-size:10.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:12px;
}
.dl-modal-head h3{font-family:var(--font-cjk); font-weight:800; font-size:23px; line-height:1.4; margin-bottom:10px;}
.dl-modal-head p{font-size:15px; color:var(--ink-soft); line-height:1.7;}
.dl-modal-body{padding:26px 34px 34px;}
.dl-success{padding:34px; text-align:center;}
.dl-success .ds-ic{
  width:52px;height:52px;border:2px solid var(--red); color:var(--red);
  display:flex;align-items:center;justify-content:center; margin:0 auto 20px; font-size:24px;
}
.dl-success h4{font-family:var(--font-cjk); font-weight:800; font-size:21px; margin-bottom:12px;}
.dl-success p{font-size:15.5px; color:var(--ink-soft); line-height:1.75; margin-bottom:24px;}

/* ---------- FAQ accordion ---------- */
.acc-item{border-top:1px solid var(--line);}
.acc-item:last-child{border-bottom:1px solid var(--line);}
.acc-q{
  width:100%; background:none; border:none; text-align:left; cursor:pointer;
  padding:26px 44px 26px 0; position:relative;
  font-family:var(--font-cjk); font-weight:700; font-size:18px; color:var(--ink); line-height:1.55;
}
.acc-q::after{
  content:''; position:absolute; right:8px; top:34px;
  width:10px; height:10px; border-right:1.5px solid var(--ink-faint); border-bottom:1.5px solid var(--ink-faint);
  transform:rotate(45deg); transition:transform .22s ease;
}
.acc-item.open .acc-q::after{transform:rotate(-135deg);}
.acc-item.open .acc-q{color:var(--red);}
.acc-a{display:none; padding:0 0 26px; font-size:16px; color:var(--ink-soft); line-height:1.8; max-width:780px;}
.acc-item.open .acc-a{display:block;}

/* ============================================================
   V8 — TIGHTEN THE SYSTEM
   The label stack (num / EN / CN / H2) read as four loose
   fragments. Collapse it into one disciplined eyebrow line.
   ============================================================ */

/* ---------- One-line section eyebrow ---------- */
.sec-num{
  display:inline; margin:0;
  font-size:12px; letter-spacing:.16em; color:var(--gold);
}
.sec-label{
  display:flex; flex-direction:row; align-items:baseline; gap:10px;
  margin-bottom:18px; flex-wrap:wrap;
}
.sec-label .en{
  font-size:12px; letter-spacing:.18em; color:var(--ink);
}
.sec-label .cn{
  font-size:12.5px; font-weight:500; letter-spacing:.06em; color:var(--ink-faint);
}
.sec-label .cn::before{
  content:''; display:inline-block; width:14px; height:1px;
  background:var(--line-strong); vertical-align:middle; margin-right:10px;
}
/* number sits inline, ahead of the label, on one rule */
.section-head .sec-num + .sec-label{margin-top:-22px; padding-left:30px;}
.section-head .sec-num{
  position:relative; top:0; display:inline-block; width:0; overflow:visible;
}
.sec-label.on-dark .en, .bg-ink .sec-label .en, .proof-band .sec-label .en{color:#fff;}
.bg-ink .sec-label .cn::before, .proof-band .sec-label .cn::before{background:rgba(255,255,255,.28);}

/* ---------- Page hero: remove the triple-title redundancy ---------- */
.page-hero{padding:64px 0 56px;}
.page-hero .breadcrumb{margin-bottom:20px;}
.page-hero .sec-label{margin-bottom:14px;}
/* when the page hero already has an H1, the CN half of the label is noise */
.page-hero .sec-label .cn{display:none;}
.page-hero h1{margin-bottom:18px;}
.page-hero .lede{max-width:620px;}

/* ---------- Section head rhythm: tighter, less floaty ---------- */
.section-head{margin-bottom:44px;}
.section-head h2{margin-bottom:14px;}
.section-head .lede{margin-top:0;}
:root{--section-pad:104px;}
@media (max-width:900px){:root{--section-pad:60px;}}

/* ---------- DROPDOWN REDESIGN ----------
   Flush to the header, no floating gap, no harsh red edge. */
.nav-panel{
  top:100%; left:-24px;
  border:1px solid var(--line); border-top:none;
  box-shadow:0 14px 30px rgba(21,19,15,.07);
  padding:6px 0 8px;
  transform:none;
  transition:opacity .16s ease, visibility 0s linear .16s;
}
.nav-item.open .nav-panel{
  transform:none;
  transition:opacity .16s ease, visibility 0s linear 0s;
}
/* the trigger reads as a tab connected to its panel */
.nav-item.open > a{color:var(--ink);}
.nav-item.open > a::before{
  content:''; position:absolute; left:-24px; right:-24px; bottom:-19px;
  height:2px; background:var(--red); z-index:121;
}
.nav-panel a{
  padding:11px 24px; font-size:15px; font-weight:600;
}
.nav-panel a span{font-size:12.5px; margin-top:2px; line-height:1.5; color:var(--ink-faint);}
.nav-panel a:hover{background:var(--paper); color:var(--ink);}
.nav-panel a:hover span{color:var(--ink-soft);}
.nav-panel .np-head{
  padding:12px 24px 8px; font-size:10px; letter-spacing:.2em; color:var(--ink-faint);
  border-bottom:1px solid var(--line); margin-bottom:6px;
}
.nav-panel.wide{min-width:540px; column-gap:0;}
.nav-panel.wide .np-head{margin-bottom:8px;}
.header-inner{padding:16px 32px;}
nav.main-nav a{padding:6px 0;}

@media (max-width:960px){
  .nav-item.open > a::before{display:none;}
  .nav-panel{border:none; box-shadow:none; padding:0 0 8px;}
  .nav-panel .np-head{border-bottom:none; padding:10px 0 4px;}
}

/* ---------- HERO VIDEO ---------- */
.video-band{
  position:relative; overflow:hidden; background:var(--ink);
  min-height:520px; display:flex; align-items:center;
}
.video-band video, .video-band .vb-poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.video-band::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(12,11,9,.90) 0%, rgba(12,11,9,.72) 46%, rgba(12,11,9,.42) 100%);
}
.video-band .wrap{position:relative; z-index:2; padding-top:84px; padding-bottom:84px;}
.video-band .section-title{color:#fff;}
.video-band .lede{color:rgba(255,255,255,.72);}
.video-band .sec-label .en{color:#fff;}
.video-band .sec-label .cn{color:rgba(255,255,255,.5);}
.video-band .sec-label .cn::before{background:rgba(255,255,255,.28);}
.vb-stats{
  display:flex; gap:56px; flex-wrap:wrap; margin-top:40px;
  padding-top:30px; border-top:1px solid rgba(255,255,255,.16);
}
.vb-stats div{display:flex; flex-direction:column; gap:6px;}
.vb-stats .n{font-family:var(--font-display); font-weight:800; font-size:32px; color:#fff; letter-spacing:-.02em;}
.vb-stats .l{font-size:13.5px; color:rgba(255,255,255,.55);}
.vb-note{
  position:absolute; right:24px; bottom:20px; z-index:2;
  font-size:11.5px; letter-spacing:.1em; color:rgba(255,255,255,.4);
  font-family:var(--font-display); text-transform:uppercase;
}
@media (max-width:900px){
  .video-band{min-height:420px;}
  .video-band::after{background:linear-gradient(180deg, rgba(12,11,9,.86) 0%, rgba(12,11,9,.78) 100%);}
  .vb-stats{gap:32px;}
  .vb-stats .n{font-size:25px;}
}
@media (prefers-reduced-motion:reduce){
  .video-band video{display:none;}
}

/* ---------- V8.1 dropdown: indicator on the trigger, not a floating bar ---------- */
.nav-item > a{position:relative;}
.nav-item.open > a::before{
  content:''; position:absolute; left:0; right:16px; bottom:-2px;
  height:2px; background:var(--red);
}
.nav-panel{border-top:1px solid var(--line);}

/* ============================================================
   V9 — ACCESSIBILITY & COMPONENT REFACTOR
   Nav + accordion behaviour follow the W3C ARIA Authoring
   Practices Guide (W3C Software and Document License).
   Icons: Lucide (ISC) — SVG paths inlined, no package installed.
   ============================================================ */

/* ---------- Focus visibility (WCAG 2.4.7) ---------- */
:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:1px;
}
.btn:focus-visible, .btn-call:focus-visible, .cta-pill:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px;
}
.bg-ink :focus-visible, .proof-band :focus-visible, .video-band :focus-visible{
  outline-color:var(--gold);
}
/* restore the indicator removed by the old form reset */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:2px solid var(--red); outline-offset:1px; border-color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; }

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:500;
  background:var(--ink); color:#fff; padding:14px 22px;
  font-family:var(--font-cjk); font-weight:700; font-size:15px;
}
.skip-link:focus{ left:0; }

/* ---------- Nav trigger is now a <button> ---------- */
.nav-trigger{
  background:none; border:none; padding:6px 0; cursor:pointer;
  font-family:var(--font-cjk); font-size:16px; font-weight:500;
  color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px;
  position:relative; white-space:nowrap;
}
.nav-trigger:hover{ color:var(--ink); }
.nav-item .nav-trigger .cx{
  width:9px; height:9px; flex:0 0 auto; transition:transform .2s ease;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
}
.nav-trigger[aria-expanded="true"]{ color:var(--ink); }
.nav-trigger[aria-expanded="true"] .cx{ transform:rotate(-135deg) translate(-2px,-2px); }
.nav-trigger[aria-expanded="true"]::before{
  content:''; position:absolute; left:0; right:16px; bottom:-2px;
  height:2px; background:var(--red);
}
.nav-item.open > .nav-trigger::before{ content:''; }

/* ---------- Panel links now carry an icon ---------- */
.nav-panel a{
  display:flex; align-items:flex-start; gap:13px;
  padding:11px 24px;
}
.np-ic{
  width:19px; height:19px; flex:0 0 auto; margin-top:2px;
  color:var(--ink-faint); transition:color .15s ease;
}
.nav-panel a:hover .np-ic{ color:var(--red); }
.np-txt{ display:block; }
.np-txt span{
  display:block; font-size:12.5px; font-weight:400; color:var(--ink-faint);
  margin-top:2px; line-height:1.5; white-space:normal; max-width:250px;
}
.nav-panel a:hover .np-txt span{ color:var(--ink-soft); }

/* ---------- Native <details> accordion ---------- */
details.acc-item{ border-top:1px solid var(--line); }
details.acc-item:last-of-type{ border-bottom:1px solid var(--line); }
summary.acc-q{
  list-style:none; cursor:pointer; position:relative;
  padding:26px 46px 26px 0;
  font-family:var(--font-cjk); font-weight:700; font-size:18px;
  color:var(--ink); line-height:1.55;
}
summary.acc-q::-webkit-details-marker{ display:none; }
summary.acc-q::after{
  content:''; position:absolute; right:8px; top:33px;
  width:10px; height:10px;
  border-right:1.5px solid var(--ink-faint); border-bottom:1.5px solid var(--ink-faint);
  transform:rotate(45deg); transition:transform .22s ease;
}
details.acc-item[open] summary.acc-q{ color:var(--red); }
details.acc-item[open] summary.acc-q::after{
  transform:rotate(-135deg); border-color:var(--red);
}
details.acc-item .acc-a{
  display:block; padding:0 0 26px;
  font-size:16px; color:var(--ink-soft); line-height:1.8; max-width:820px;
}

/* ---------- Reduced motion: honour it globally ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ============================================================
   V10 — FULL-WIDTH MEGA MENU + SINGLE-ROW HEADER
   Disclosure/keyboard contract still follows the W3C ARIA
   Authoring Practices Guide (W3C Software and Document License).
   Layout, type and colour are VINJO's own.
   ============================================================ */

:root{ --container-wide:1320px; --hdr-h:72px; }

/* ---------- Header: everything on one row ---------- */
.header-inner{
  max-width:var(--container-wide);
  padding:15px 34px;
  gap:26px;
  flex-wrap:nowrap;
}
.logo{flex:0 0 auto;}
@media (min-width:961px){
  nav.main-nav{
    flex:1 1 auto;
    flex-wrap:nowrap;
    justify-content:center;
    gap:26px;
  }
}
@media (min-width:961px){
  nav.main-nav > a,
  nav.main-nav .nav-trigger{
    display:inline-flex; align-items:center;
    height:32px; padding:0;
    font-size:15px;
    font-weight:500;
    letter-spacing:.02em;
    line-height:1;
    white-space:nowrap;
    color:var(--ink-soft);
  }
  nav.main-nav > a.active{font-weight:700; color:var(--ink);}
  nav.main-nav .nav-trigger .cx{margin-top:-2px;}
}
.header-cta{flex:0 0 auto; gap:14px;}
.header-cta .btn-call{font-size:14px; padding:11px 18px; white-space:nowrap;}

@media (max-width:1240px) and (min-width:961px){
  .header-inner{padding:15px 24px; gap:18px;}
  nav.main-nav{gap:19px;}
  nav.main-nav > a, nav.main-nav .nav-trigger{font-size:14.5px;}
  .header-cta .btn-call{font-size:13.5px; padding:10px 15px;}
}
@media (max-width:1080px) and (min-width:961px){
  nav.main-nav{gap:15px;}
  nav.main-nav > a, nav.main-nav .nav-trigger{font-size:14px;}
  .header-cta .btn-call .lbl{display:none;}
  .header-cta .btn-call{padding:10px 12px;}
}

/* ---------- Mega panel ---------- */
.nav-panel.mega{
  position:fixed;
  top:var(--hdr-h); left:0; right:0; width:100%;
  min-width:0; max-width:none;
  display:block; padding:0;
  background:#fff;
  border:none; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 26px 44px -22px rgba(21,19,15,.22);
  z-index:130;
}
.mega-inner{
  max-width:var(--container-wide);
  margin:0 auto;
  padding:34px 34px 30px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr 336px;
  gap:0;
  align-items:stretch;
}
.mega-col{
  padding:2px 30px 0;
  border-right:1px solid var(--line);
  min-width:0;
}
.mega-col:first-child{padding-left:0;}
.mega-head{
  display:flex; flex-direction:column; gap:4px;
  padding-bottom:12px; margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.mega-head .en{
  font-family:var(--font-display); font-size:9.5px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--red);
}
.mega-head .cn{
  font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--ink);
}
.mega-col a{
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 10px 11px 0;
  font-size:15px; font-weight:600; color:var(--ink);
  border-bottom:1px solid transparent;
  transition:background .14s ease, padding-left .14s ease;
}
.mega-col a:hover, .mega-col a:focus-visible{
  background:var(--paper); padding-left:8px; color:var(--ink);
}
.mega-col a .np-ic{margin-top:3px;}
.mega-col .np-txt span{
  font-size:12.5px; font-weight:400; line-height:1.55;
  color:var(--ink-faint); margin-top:3px; max-width:230px; white-space:normal;
}
.mega-col a:hover .np-txt span{color:var(--ink-soft);}

/* ---------- Feature block: real training photo + brand line ---------- */
.mega-feature{
  position:relative; overflow:hidden;
  background:var(--ink);
  margin-left:30px;
  min-height:296px;
}
.mega-feature img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  opacity:.82; filter:grayscale(.08) contrast(1.04) brightness(1.04);
}
.mega-feature::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,11,9,.94) 46%, rgba(12,11,9,.34) 78%, rgba(12,11,9,.06) 100%);
}
.mf-body{
  position:relative; z-index:2;
  height:100%; min-height:296px;
  padding:24px 24px 22px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.mf-kicker{
  font-family:var(--font-display); font-size:9.5px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  margin-bottom:12px;
}
.mf-kicker::after{
  content:''; display:block; width:26px; height:1px;
  background:var(--gold); margin-top:9px;
}
.mf-quote{
  font-size:16.5px; font-weight:700; line-height:1.68;
  color:#fff; margin:0 0 12px;
}
.mf-meta{
  font-size:11.5px; letter-spacing:.14em; color:rgba(255,255,255,.62);
  margin-bottom:14px;
}
.mf-link{
  font-size:12.5px; font-weight:700; letter-spacing:.06em;
  color:#fff; border-top:1px solid rgba(255,255,255,.22);
  padding-top:13px; display:inline-flex; gap:8px; align-items:center;
  transition:color .15s ease;
}
.mf-link:hover{color:var(--gold);}
.mega-feature :focus-visible{outline-color:var(--gold);}

/* hover bridge — stops the panel closing as the cursor crosses the header padding */
.nav-item-mega.open::after{
  content:''; position:fixed; left:0; right:0;
  top:calc(var(--hdr-h) - 26px); height:28px; z-index:118;
}

/* page dimmer behind the mega panel */
.mega-scrim{
  position:fixed; inset:0; z-index:90;
  background:rgba(21,19,15,.28);
  opacity:0; visibility:hidden;
  transition:opacity .18s ease, visibility 0s linear .18s;
}
.mega-scrim.on{opacity:1; visibility:visible; transition:opacity .18s ease, visibility 0s linear 0s;}

@media (max-width:1240px){
  .mega-inner{grid-template-columns:1fr 1fr 1fr 290px; padding:28px 24px 26px;}
  .mega-col{padding:2px 22px 0;}
  .mega-feature{margin-left:22px;}
}
@media (max-width:1080px) and (min-width:961px){
  .mega-inner{grid-template-columns:1fr 1fr 1fr;}
  .mega-feature{display:none;}
  .mega-col:last-of-type{border-right:none;}
}

/* ---------- Mobile: mega degrades to stacked groups ---------- */
@media (max-width:960px){
  .nav-panel.mega{
    position:static; width:auto; border:none; box-shadow:none;
    padding:0; background:transparent;
  }
  .mega-inner{display:block; padding:0; max-width:none;}
  .mega-col{padding:0; border-right:none; border-bottom:1px solid var(--line);}
  .mega-col:last-of-type{border-bottom:none;}
  .mega-head{padding:12px 0 8px; margin-bottom:2px; border-bottom:none;}
  .mega-col a{padding:10px 0 10px 14px; font-size:15.5px;}
  .mega-col a:hover{padding-left:14px;}
  .mega-feature{display:none;}
  .nav-item-mega.open::after{display:none;}
  .mega-scrim{display:none;}
}

/* ---------- Sticky mobile CTA bar ---------- */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  display:none; grid-template-columns:1fr 1fr;
  background:var(--ink); border-top:1px solid rgba(255,255,255,.14);
  transform:translateY(100%); transition:transform .28s ease;
}
.mobile-cta.on{transform:translateY(0);}
.mobile-cta a{
  padding:15px 10px; text-align:center;
  font-size:14.5px; font-weight:700; letter-spacing:.03em; color:#fff;
}
.mobile-cta a + a{border-left:1px solid rgba(255,255,255,.14);}
.mobile-cta a.primary{background:var(--red);}
@media (max-width:760px){
  .mobile-cta{display:grid;}
  body{padding-bottom:0;}
}
@media (prefers-reduced-motion:reduce){
  .mobile-cta{transition:none;}
}

/* ---------- Course filter: pressed state + empty state ---------- */
.filter-chip[aria-pressed="true"]{border-color:var(--ink); background:var(--ink); color:#fff;}
.filter-empty{
  display:none; padding:44px 0; text-align:center;
  color:var(--ink-faint); font-size:16px; line-height:1.8;
  border:1px dashed var(--line-strong);
}
.filter-empty.on{display:block;}

/* ============================================================
   V11 — ONE DESIGN SYSTEM
   Container · 8px spacing scale · heading system · cards ·
   buttons · decoration removal · colour ratio.
   This layer is deliberately last: it is the single source of
   truth for anything that must look identical site-wide.
   ============================================================ */

:root{
  --container:1280px;
  --container-wide:1360px;
  --gutter:32px;

  /* 8px spacing scale */
  --s8:8px;   --s16:16px; --s24:24px; --s32:32px;
  --s48:48px; --s64:64px; --s80:80px; --s96:96px; --s120:120px;

  --section-pad:112px;
  --section-pad-mobile:72px;
}

/* ---------- Container: every section shares one boundary ---------- */
.wrap{max-width:var(--container); padding-left:var(--gutter); padding-right:var(--gutter);}
@media (max-width:900px){ .wrap{padding-left:24px; padding-right:24px;} }
.hero .wrap, .final-cta .wrap{max-width:var(--container);}

/* ---------- Vertical rhythm (8px multiples only) ---------- */
section{padding:var(--section-pad) 0;}
.detail-section{padding:var(--s96) 0;}
.page-hero{padding:var(--s80) 0 var(--s64);}
.detail-hero{padding:var(--s80) 0 var(--s64);}
.final-cta{padding:var(--s120) 0;}
.proof-band{padding:var(--section-pad) 0;}
@media (max-width:900px){
  section{padding:var(--section-pad-mobile) 0;}
  .detail-section{padding:var(--s64) 0;}
  .page-hero, .detail-hero{padding:var(--s48) 0 var(--s32);}
  .final-cta{padding:var(--s80) 0;}
}

/* ---------- Heading system ----------
   EN LABEL / 中文标签  →  中文 H2  →  一句说明
   Same size, weight, leading, tracking and rhythm everywhere. */
.section-head{max-width:900px; margin-bottom:var(--s48);}
.section-head .sec-num{margin-bottom:var(--s16);}
.section-head .sec-label{margin-bottom:var(--s16);}

h2.section-title{
  font-family:var(--font-display);
  font-size:50px;
  font-weight:800;
  line-height:1.30;
  letter-spacing:-.015em;
  max-width:none;          /* headings run on one line when there is room */
  margin:0 0 var(--s16);
  text-wrap:balance;
}
.section-head .lede{
  font-size:18px;
  line-height:1.78;
  color:var(--ink-soft);
  max-width:680px;
  margin:0;
}
.bg-ink .section-head .lede,
.proof-band .section-head .lede,
.video-band .section-head .lede{color:rgba(255,255,255,.72);}

h3{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:-.005em;
}
.program-card h3, .dc-card h3, .fw-item h3, .cs-card h3, .mod-card h3{
  font-size:24px; font-weight:700; line-height:1.45; letter-spacing:-.005em;
}

@media (max-width:900px){
  h2.section-title{font-size:34px; line-height:1.36;}
  .section-head{margin-bottom:var(--s32);}
  .section-head .lede{font-size:16.5px; line-height:1.75;}
  h3{font-size:23px;}
  .program-card h3, .dc-card h3, .fw-item h3, .cs-card h3, .mod-card h3{font-size:22px;}
}

/* ---------- Buttons: corporate, not SaaS ---------- */
.btn, .btn-call, .btn-sm{border-radius:3px;}
.btn-primary{background:var(--red); border-color:var(--red); color:#fff;}
.btn-secondary{background:#fff; border-color:var(--ink); color:var(--ink);}
.btn-secondary:hover{background:var(--ink); color:#fff;}
.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; color:var(--ink);
  border-bottom:1px solid var(--line-strong); padding-bottom:4px;
}
.link-arrow:hover{color:var(--red); border-color:var(--red);}

/* ---------- Cards: white, 1px border, almost no shadow ---------- */
.program-card, .dc-card, .fw-item, .cs-card, .mod-card, .card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  padding:var(--s32);
}
.program-card:hover, .dc-card:hover, .cs-card:hover, .mod-card:hover{
  border-color:var(--ink);
  box-shadow:none;
  transform:none;
}

/* ---------- Decoration removal ----------
   If an element does not serve information, navigation,
   hierarchy or the brand, it is gone. */
.laser-field, .vline, .rule-laser, .glow, .orb, .floating-deco{display:none !important;}
.btn-call .pulse{display:none;}
.marquee-row::before, .marquee-row::after{box-shadow:none;}

/* keep the brand device (cutout on the red disc) but flatten the gradient */
.hero-circle{background:var(--red-deep); background-image:none;}

/* flat scrims instead of gradients where a gradient was purely decorative */
.video-band::after{background:rgba(12,11,9,.82); background-image:none;}
.mega-feature::after{background:rgba(12,11,9,.80); background-image:none;}

/* ---------- Colour ratio: white 75-80 / charcoal 15-20 / red 3-5 / gold 1-2 ----------
   Red is reserved for action and current state. */
.sec-label .en{color:var(--ink-faint);}
.mega-head .en{color:var(--ink-faint);}
.bg-ink .sec-label .en, .proof-band .sec-label .en, .video-band .sec-label .en{color:var(--gold);}
.sec-num{color:var(--ink-faint);}

/* ---------- V11 mega menu: executive consulting navigation ----------
   Three columns, hairline dividers, no shadow stack, no glass,
   no gradient, no rounded card grid. */
.nav-panel.mega{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 10px 18px -14px rgba(21,19,15,.16);
}
.mega-inner{
  grid-template-columns:1fr 1fr 1fr;
  max-width:var(--container);
  padding:var(--s48) var(--gutter) var(--s32);
  column-gap:0;
}
.mega-col{padding:0 var(--s48); border-right:1px solid var(--line);}
.mega-col:first-child{padding-left:0;}
.mega-col:last-child{padding-right:0; border-right:none;}
.mega-feature{display:none;}

.mega-head{
  display:flex; align-items:baseline; gap:10px; flex-direction:row; flex-wrap:wrap;
  padding-bottom:10px; margin:0 0 var(--s8);
  border-bottom:1px solid var(--line);
}
.mega-head + a + .mega-head{margin-top:var(--s32);}
.mega-head .tnum{
  font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:.1em; color:var(--red);
}
.mega-head .en{
  font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint);
}
.mega-head .cn{font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--ink);}

.mega-col > a{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 8px 14px 0; margin:0;
  font-size:16px; font-weight:700; color:var(--ink);
  border-bottom:none; background:none;
  transition:color .14s ease;
}
.mega-col > a:hover{background:none; padding-left:0; color:var(--red);}
.mega-col > a:hover .np-ic{color:var(--red);}
.mega-col .np-txt span{
  font-size:13px; font-weight:400; line-height:1.6;
  color:var(--ink-faint); margin-top:4px; max-width:260px;
}

/* 05 GROWTH sits a tier above the other four */
.mega-col-growth{background:var(--paper);
  margin:calc(var(--s48) * -1) calc(var(--gutter) * -1) calc(var(--s32) * -1) 0;
  padding:var(--s48) var(--gutter) var(--s32) var(--s48);
  border-left:1px solid var(--line); border-right:none;}
.growth-item{display:block; padding:var(--s16) 0 0;}
.gi-tier{
  display:inline-block; font-family:var(--font-display);
  font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold-tint);
  padding:5px 10px; margin-bottom:var(--s16);
}
.gi-name{display:block; font-family:var(--font-display); font-size:22px; font-weight:800;
  line-height:1.4; color:var(--ink); margin-bottom:6px;}
.gi-sub{display:block; font-size:12.5px; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:12px;}
.gi-desc{display:block; font-size:13.5px; line-height:1.7; color:var(--ink-soft); margin-bottom:var(--s16);}
.gi-go{display:inline-flex; gap:8px; align-items:center; font-size:13.5px; font-weight:700;
  color:var(--ink); border-bottom:1px solid var(--line-strong); padding-bottom:4px;}
.growth-item:hover .gi-go{color:var(--red); border-color:var(--red);}
.growth-item:hover .gi-name{color:var(--red);}

.mega-foot{
  border-top:1px solid var(--line); background:#fff;
}
.mega-foot{display:flex; gap:var(--s32); justify-content:flex-end;
  max-width:var(--container); margin:0 auto; padding:var(--s16) var(--gutter);}
.mega-foot a{font-size:13.5px; font-weight:700; letter-spacing:.03em; color:var(--ink-soft);
  display:inline-flex; gap:8px; align-items:center;}
.mega-foot a:hover{color:var(--red);}

@media (max-width:1240px){
  .mega-inner{padding:var(--s32) 24px var(--s24);}
  .mega-col{padding:0 var(--s32);}
  .mega-col-growth{margin:calc(var(--s32) * -1) -24px calc(var(--s24) * -1) 0;
    padding:var(--s32) 24px var(--s24) var(--s32);}
}
@media (max-width:960px){
  .mega-inner{display:block; padding:0;}
  .mega-col{padding:0; border-right:none; border-bottom:1px solid var(--line);}
  .mega-col-growth{margin:0; padding:var(--s16) 0; background:transparent; border-left:none;}
  .mega-head{padding:14px 0 8px; border-bottom:none;}
  .mega-head + a + .mega-head{margin-top:0;}
  .mega-col > a{padding:10px 0 10px 14px; font-size:15.5px;}
  .mega-foot{display:flex; justify-content:flex-start; gap:var(--s24); padding:var(--s16) 0; flex-wrap:wrap;}
}

/* ---------- V11 header CTA: one primary action ---------- */
.header-cta{gap:12px;}
.btn-wa{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid var(--line-strong); border-radius:3px;
  color:var(--ink-soft); transition:border-color .15s ease, color .15s ease;
}
.btn-wa svg{width:17px; height:17px; fill:currentColor;}
.btn-wa:hover{border-color:var(--ink); color:var(--ink);}
.nav-cta{padding:11px 22px; font-size:14.5px; white-space:nowrap;}
@media (max-width:1080px) and (min-width:961px){ .nav-cta{padding:10px 16px; font-size:13.5px;} }
@media (max-width:520px){ .btn-wa{display:none;} }

/* ============================================================
   V11 — CREDENTIALS PAGE (view-only certificates)
   ============================================================ */
.cred-notice{
  display:flex; gap:10px; align-items:flex-start;
  margin-top:var(--s24); padding:14px 18px;
  border:1px solid var(--line); background:var(--paper);
  font-size:14.5px; line-height:1.7; color:var(--ink-soft); max-width:760px;
}
.cred-notice .cn-ico{color:var(--ink-faint); flex:0 0 auto;}
.cred-notice a{color:var(--ink); border-bottom:1px solid var(--line-strong);}
.cred-notice a:hover{color:var(--red); border-color:var(--red);}

.cred-block{display:grid; grid-template-columns:1fr 380px; gap:var(--s64); align-items:start;}
@media (max-width:900px){.cred-block{grid-template-columns:1fr; gap:var(--s32);}}

.cred-dl{margin:0 0 var(--s32); border-top:1px solid var(--line);}
.cred-dl > div{display:grid; grid-template-columns:150px 1fr; gap:var(--s24);
  padding:14px 0; border-bottom:1px solid var(--line);}
.cred-dl dt{font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--ink-faint);}
.cred-dl dd{margin:0; font-size:16px; line-height:1.6; color:var(--ink);}
@media (max-width:560px){.cred-dl > div{grid-template-columns:1fr; gap:4px;}}
.mono{font-family:var(--font-display); font-weight:700; letter-spacing:.06em;}

.cred-verify, .cred-means{padding-top:var(--s24); border-top:1px solid var(--line); margin-bottom:var(--s24);}
.cred-verify h3, .cred-means h3{font-size:17px; font-weight:700; margin-bottom:10px;}
.cred-verify p, .cred-means p{font-size:15.5px; line-height:1.8; color:var(--ink-soft); margin-bottom:14px;}

.cred-figure{margin:0;}
.cred-shot{
  display:block; width:100%; padding:0; cursor:zoom-in; position:relative;
  background:#fff; border:1px solid var(--line);
}
.cred-shot img{display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; pointer-events:none;}
.cred-zoom{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px; text-align:center;
  font-size:12.5px; letter-spacing:.1em; color:#fff; background:rgba(21,19,15,.82);
  opacity:0; transition:opacity .16s ease;
}
.cred-shot:hover .cred-zoom, .cred-shot:focus-visible .cred-zoom{opacity:1;}
.cred-figure figcaption{
  margin-top:12px; font-size:12.5px; line-height:1.6; color:var(--ink-faint);
}

.cred-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line);}
@media (max-width:900px){.cred-grid{grid-template-columns:1fr;}}
.cred-card{padding:var(--s32); border-right:1px solid var(--line);}
.cred-card:last-child{border-right:none;}
@media (max-width:900px){.cred-card{border-right:none; border-bottom:1px solid var(--line);}
  .cred-card:last-child{border-bottom:none;}}
.cc-label{font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:.22em; color:var(--ink-faint); margin-bottom:14px;}
.cred-card h3{font-size:21px; margin-bottom:12px;}
.cred-card p{font-size:15px; line-height:1.8; color:var(--ink-soft); margin-bottom:10px;}
.cc-note{font-size:13px !important; color:var(--ink-faint) !important;}

.cred-numbers{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s48);}
@media (max-width:900px){.cred-numbers{grid-template-columns:1fr; gap:var(--s32);}}
.cn-item{border-top:2px solid var(--ink); padding-top:var(--s24);}
.cn-num{display:block; font-family:var(--font-display); font-size:40px; font-weight:800;
  letter-spacing:-.02em; color:var(--ink); line-height:1.1;}
.cn-lbl{display:block; font-size:14px; font-weight:700; color:var(--ink-soft); margin:10px 0 14px;}
.cn-item p{font-size:14.5px; line-height:1.8; color:var(--ink-faint); margin:0;}
.cred-foot{margin-top:var(--s48); padding-top:var(--s24); border-top:1px solid var(--line);
  font-size:14.5px; line-height:1.8; color:var(--ink-faint); max-width:860px;}

/* ---- certificate viewer ---- */
.cert-overlay{
  position:fixed; inset:0; z-index:300; display:none;
  background:rgba(12,11,9,.90); padding:32px;
  align-items:center; justify-content:center;
}
.cert-overlay.open{display:flex;}
.cert-modal{background:#fff; max-width:820px; width:100%; max-height:92vh;
  display:flex; flex-direction:column; border:1px solid var(--line-strong);}
.cert-head{display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; border-bottom:1px solid var(--line);}
.cert-head h3{font-size:17px; font-weight:700; margin:0;}
.cert-close{background:none; border:none; font-size:28px; line-height:1; cursor:pointer; color:var(--ink-soft);}
.cert-close:hover{color:var(--red);}
.cert-stage{position:relative; overflow:auto; padding:24px; background:var(--paper);}
.cert-stage img{display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none;}
.cert-guard{position:absolute; inset:0;}   /* blocks drag-save on the image */
.cert-note{margin:0; padding:14px 24px; border-top:1px solid var(--line);
  font-size:12.5px; letter-spacing:.06em; color:var(--ink-faint); text-align:center;}
@media (max-width:600px){.cert-overlay{padding:14px;} .cert-stage{padding:12px;}}

/* ---------- V11 capability tracks ---------- */
.track-list{border-top:1px solid var(--line);}
.track-row{
  display:grid; grid-template-columns:64px 1fr 40px;
  gap:var(--s24); align-items:start;
  padding:var(--s32) 0; border-bottom:1px solid var(--line);
  color:var(--ink); background:#fff;
  transition:background .15s ease;
}
a.track-row:hover{background:var(--paper);}
.tr-num{font-family:var(--font-display); font-size:13px; font-weight:700;
  letter-spacing:.14em; color:var(--ink-faint); padding-top:4px;}
.tr-main{display:block;}
.tr-en{font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); margin-right:10px;}
.tr-cn{font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--ink-soft);}
.tr-name{display:block; font-family:var(--font-display); font-size:24px; font-weight:800;
  line-height:1.45; margin:10px 0 6px;}
.tr-sub{display:block; font-size:13.5px; letter-spacing:.03em; color:var(--ink-faint); margin-bottom:12px;}
.tr-goal{display:block; font-size:16.5px; line-height:1.8; color:var(--ink-soft); max-width:720px;}
.tr-body{display:block; font-size:15.5px; line-height:1.85; color:var(--ink-soft);
  max-width:760px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
.tr-meta{display:block; font-size:13px; line-height:1.7; color:var(--ink-faint); margin-top:12px;}
.tr-go{font-size:20px; color:var(--ink-faint); text-align:right; padding-top:2px;}
a.track-row:hover .tr-go, a.track-row:hover .tr-name{color:var(--red);}
.tr-cta{grid-column:2; justify-self:start; margin-top:var(--s16);
  font-size:14px; font-weight:700; color:var(--ink);
  border-bottom:1px solid var(--line-strong); padding-bottom:4px;
  display:inline-flex; gap:8px; align-items:center;}
.tr-cta:hover{color:var(--red); border-color:var(--red);}
.track-row-static{grid-template-columns:64px 1fr 40px;}
.track-row-flagship{background:var(--paper); border-left:2px solid var(--gold); padding-left:var(--s32);}
.track-row-flagship .tr-name{font-size:28px;}
.tr-tier{display:inline-block; font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold-tint); padding:5px 10px; margin-bottom:14px;}
@media (max-width:760px){
  .track-row{grid-template-columns:44px 1fr; gap:var(--s16); padding:var(--s24) 0;}
  .tr-go{display:none;}
  .tr-name{font-size:21px;}
  .track-row-flagship{padding-left:var(--s16);}
  .track-row-flagship .tr-name{font-size:23px;}
}

/* trust strip item that links out to the credential */
.t-item-link{display:flex; flex-direction:column; color:inherit;}
.t-item-link .t-lbl{border-bottom:1px solid transparent; transition:border-color .15s ease;}
.t-item-link:hover .t-lbl{border-color:currentColor;}

/* ---------- V11 spacing exceptions (named, not inline) ---------- */
.detail-section{padding-top:var(--s96); padding-bottom:var(--s96);}
.detail-section-last{border-bottom:none;}
.section-flush-top{padding-top:0;}
.section-flush-bottom{padding-bottom:0;}
.section-tight-top{padding-top:var(--s64);}
@media (max-width:900px){
  .detail-section{padding-top:var(--s64); padding-bottom:var(--s64);}
  .section-tight-top{padding-top:var(--s48);}
}

/* ---------- V11 H3 scale: three tiers, documented ----------
   section 26px · card 24px · UI chrome 18px */
.detail-cta h3, .section-head + * h3{font-size:26px; font-weight:700; line-height:1.45; letter-spacing:-.005em;}
.program-card h3, .dc-card h3, .fw-item h3, .cs-card h3, .mod-card h3,
.cred-card h3, .card-title, .pc-top .card-title{
  font-size:24px; font-weight:700; line-height:1.45; letter-spacing:-.005em;
}
.dl-modal-head h3, .cert-head h3, .cred-verify h3, .cred-means h3{
  font-size:18px; font-weight:700; line-height:1.5; letter-spacing:0;
}
@media (max-width:900px){
  .detail-cta h3{font-size:23px;}
  .program-card h3, .dc-card h3, .fw-item h3, .cs-card h3, .mod-card h3,
  .cred-card h3, .card-title{font-size:22px;}
  .dl-modal-head h3, .cert-head h3, .cred-verify h3, .cred-means h3{font-size:17px;}
}

/* H3 tier enforcement where older, more specific rules still win */
.framework-grid .fw-item h3, .cred-grid .cred-card h3,
.pc-top .card-title, .dc-grid .dc-card h3{
  font-size:24px; font-weight:700; line-height:1.45; letter-spacing:-.005em;
}
@media (max-width:900px){
  .framework-grid .fw-item h3, .cred-grid .cred-card h3,
  .pc-top .card-title, .dc-grid .dc-card h3{font-size:22px;}
}

/* section-head variants (replacing former inline styles) */
.section-head-inline{margin-bottom:0;}
.section-head-tight{margin-bottom:var(--s24);}
.section-head-row{display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s32); margin-bottom:var(--s48); flex-wrap:wrap;}
.video-band .section-head{max-width:660px;}

/* only three button styles exist: primary, secondary, text link */
.btn-ghost{background:#fff; border:1px solid var(--ink); color:var(--ink); border-radius:3px;}
.btn-ghost:hover{background:var(--ink); color:#fff;}
.bg-ink .btn-ghost, .proof-band .btn-ghost, .video-band .btn-ghost{
  background:transparent; border-color:rgba(255,255,255,.5); color:#fff;}
.bg-ink .btn-ghost:hover, .proof-band .btn-ghost:hover, .video-band .btn-ghost:hover{
  background:#fff; color:var(--ink); border-color:#fff;}

.sec-label-sub{margin-bottom:var(--s16);}
.sec-label-spaced{margin-top:var(--s32);}
.cred-notice{max-width:860px;}

/* growth column must stack, not inherit the flex row used by link rows */
.mega-col > a.growth-item{display:block; padding:var(--s16) 0 0; font-size:inherit; font-weight:400;}
.mega-col > a.growth-item:hover{background:none; color:inherit;}
.mega-col-growth{
  margin:0; padding:0 0 0 var(--s48);
  background:transparent; border-left:1px solid var(--line); border-right:none;
}
.mega-col-growth .growth-item{
  background:var(--paper); border:1px solid var(--line);
  padding:var(--s24); margin-top:var(--s16);
}
.mega-col-growth .growth-item:hover{border-color:var(--ink);}
@media (max-width:1240px){ .mega-col-growth{padding-left:var(--s32);} }
@media (max-width:960px){
  .mega-col-growth{padding:0; border-left:none;}
  .mega-col-growth .growth-item{padding:var(--s16); margin:0 0 var(--s16);}
}

/* the panel-wide `.nav-panel a span` rule outranks the .gi-* classes — restate them */
.nav-panel .growth-item .gi-tier{
  display:inline-block; font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold-tint); padding:5px 10px; margin:0 0 var(--s16);
  max-width:none; line-height:1.4;
}
.nav-panel .growth-item .gi-name{
  display:block; font-family:var(--font-display); font-size:22px; font-weight:800;
  line-height:1.4; color:var(--ink); margin:0 0 6px; max-width:none; letter-spacing:-.01em;
}
.nav-panel .growth-item .gi-sub{
  display:block; font-size:12.5px; font-weight:400; letter-spacing:.03em;
  color:var(--ink-faint); margin:0 0 12px; max-width:none; line-height:1.6;
}
.nav-panel .growth-item .gi-desc{
  display:block; font-size:13.5px; font-weight:400; line-height:1.7;
  color:var(--ink-soft); margin:0 0 var(--s16); max-width:none;
}
.nav-panel .growth-item .gi-go{
  display:inline-flex; gap:8px; align-items:center; width:auto; max-width:none;
  font-size:13.5px; font-weight:700; color:var(--ink);
  border-bottom:1px solid var(--line-strong); padding-bottom:4px; margin:0; line-height:1.4;
}
.nav-panel .growth-item:hover .gi-name,
.nav-panel .growth-item:hover .gi-go{color:var(--red);}
.nav-panel .growth-item:hover .gi-go{border-color:var(--red);}
.mega-col .np-txt span{max-width:none; word-break:keep-all; line-break:strict;}

/* ============================================================
   V12 — mega menu: training photo + all copy in solid black
   ============================================================ */
.mega-inner{grid-template-columns:1fr 1fr 1.05fr 296px;}

/* every word in the panel reads black and heavier */
.mega-head .en{color:var(--ink); font-weight:700;}
.mega-head .cn{color:var(--ink); font-weight:800;}
.mega-col > a{color:var(--ink); font-weight:800;}
.mega-col .np-txt span{color:var(--ink); font-weight:600;}
.mega-col > a:hover .np-txt span{color:var(--ink);}
.mega-col .np-ic{color:var(--ink);}
.nav-panel .growth-item .gi-name{color:var(--ink); font-weight:800;}
.nav-panel .growth-item .gi-sub{color:var(--ink); font-weight:700;}
.nav-panel .growth-item .gi-desc{color:var(--ink); font-weight:600;}
.nav-panel .growth-item .gi-go{color:var(--ink); font-weight:800;}
.mega-foot a{color:var(--ink); font-weight:800;}
.np-head{color:var(--ink); font-weight:800;}
.nav-panel a{color:var(--ink); font-weight:700;}
.nav-panel a .np-txt span{color:var(--ink); font-weight:600;}

/* photo rail */
.mega-col-photo{padding-left:var(--s48); border-left:1px solid var(--line); border-right:none;}
.mega-photo{margin:var(--s16) 0 0;}
.mega-photo img{display:block; width:100%; height:186px; object-fit:cover; object-position:50% 42%;}
.mega-photo figcaption{
  margin-top:10px; font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--ink);
}
.mega-col-photo .mega-head .tnum{color:var(--ink-faint);}
@media (max-width:1240px){
  .mega-inner{grid-template-columns:1fr 1fr 1fr 240px;}
  .mega-col-photo{padding-left:var(--s32);}
  .mega-photo img{height:158px;}
}
@media (max-width:1080px) and (min-width:961px){
  .mega-inner{grid-template-columns:1fr 1fr 1fr;}
  .mega-col-photo{display:none;}
}
@media (max-width:960px){
  .mega-col-photo{padding-left:0; border-left:none;}
  .mega-photo img{height:160px;}
}

/* the generic `.nav-panel a span` rule also caught `.np-txt` itself —
   restate the two tiers with enough specificity to win */
.nav-panel a > .np-txt{
  color:var(--ink); font-weight:800; font-size:16px; line-height:1.5; letter-spacing:0;
  max-width:none;
}
.nav-panel a > .np-txt > span{
  color:var(--ink); font-weight:600; font-size:13px; line-height:1.65;
  margin-top:5px; max-width:none;
}
.nav-panel .mega-col > a, .nav-panel > a{color:var(--ink); font-weight:800;}
.nav-panel .mega-col > a:hover > .np-txt,
.nav-panel > a:hover > .np-txt{color:var(--red);}
.nav-panel .mega-col > a:hover > .np-txt > span,
.nav-panel > a:hover > .np-txt > span{color:var(--ink);}

/* WhatsApp quick-message confirmation */
.wa-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 16px);
  z-index:400; max-width:min(92vw, 460px);
  background:var(--ink); color:#fff;
  padding:14px 20px; font-size:14.5px; font-weight:700; line-height:1.6;
  border-radius:3px; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.wa-toast.on{opacity:1; transform:translate(-50%, 0);}
@media (max-width:760px){ .wa-toast{bottom:76px;} }
@media (prefers-reduced-motion:reduce){ .wa-toast{transition:none;} }

/* ============================================================
   V13 — mega menu: 3 columns, photo inside the flagship card,
   black titles with grey supporting copy
   ============================================================ */
.mega-inner{grid-template-columns:1fr 1fr 1.25fr;}
.mega-col-photo{display:none;}

/* titles stay black, explanations go back to grey so the panel reads calmly */
.nav-panel a > .np-txt{color:var(--ink); font-weight:800;}
.nav-panel a > .np-txt > span{color:var(--ink-faint); font-weight:400;}
.nav-panel .mega-col > a:hover > .np-txt > span{color:var(--ink-soft);}
.nav-panel > a:hover > .np-txt > span{color:var(--ink-soft);}
.mega-head .en{color:var(--ink-faint); font-weight:700;}
.mega-head .cn{color:var(--ink); font-weight:800;}
.np-head{color:var(--ink-faint); font-weight:700;}
.mega-foot a{color:var(--ink-soft); font-weight:700;}
.mega-foot a:hover{color:var(--red);}
.nav-panel .growth-item .gi-sub{color:var(--ink-faint); font-weight:400;}
.nav-panel .growth-item .gi-desc{color:var(--ink-soft); font-weight:400;}

/* the flagship card now carries the training photo */
.nav-panel .growth-item .gi-photo{display:block; margin:0 0 var(--s16);}
.nav-panel .growth-item .gi-photo img{
  display:block; width:100%; height:150px; object-fit:cover; object-position:50% 42%;
}
.nav-panel .growth-item .gi-cap{
  display:block; font-size:11.5px; font-weight:400; letter-spacing:.03em;
  color:var(--ink-faint); margin:0 0 var(--s16); max-width:none; line-height:1.6;
}
.mega-col-growth .growth-item{padding:var(--s16) var(--s16) var(--s24);}
@media (max-width:1240px){
  .mega-inner{grid-template-columns:1fr 1fr 1.2fr;}
  .nav-panel .growth-item .gi-photo img{height:126px;}
}
@media (max-width:1080px) and (min-width:961px){
  .mega-inner{grid-template-columns:1fr 1fr 1.2fr;}
}
@media (max-width:960px){
  .nav-panel .growth-item .gi-photo img{height:150px;}
}
.nav-panel .growth-item .gi-photo{max-width:none; width:100%;}
.nav-panel .growth-item .gi-photo picture{display:block; width:100%;}

/* controlled line breaks in the hero headline (no <br>, still responsive) */
.hero-v3-copy h1 .hl{display:block;}
@media (max-width:760px){ .hero-v3-copy h1 .hl{display:inline;} }

/* ============================================================
   V13 — VINJO Framework explorer (philosophy page)
   Five stages, one rail, one panel. The connector fills as the
   visitor moves down the stages — motion that carries meaning,
   not decoration. Zero dependencies.
   ============================================================ */
.fwx{display:grid; grid-template-columns:340px 1fr; gap:var(--s64); align-items:start;}
@media (max-width:960px){.fwx{grid-template-columns:1fr; gap:var(--s32);}}

/* ---- rail ---- */
.fwx-rail{position:relative; list-style:none; margin:0; padding:0 0 0 var(--s32);}
.fwx-track{
  position:absolute; left:9px; top:14px; bottom:14px; width:2px;
  background:var(--line-strong);
}
.fwx-fill{
  position:absolute; left:0; top:0; width:100%; height:0;
  background:var(--red); transition:height .45s cubic-bezier(.4,0,.2,1);
}
.fwx-rail li{margin:0;}
.fwx-node{
  position:relative; display:flex; align-items:flex-start; gap:16px;
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:18px 12px 18px 0; margin:0;
  border-bottom:1px solid var(--line);
  transition:padding-left .2s ease;
}
.fwx-rail li:last-child .fwx-node{border-bottom:none;}
.fx-dot{
  position:absolute; left:-32px; top:24px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:2px solid var(--line-strong);
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.fwx-node.is-active .fx-dot{border-color:var(--red); background:var(--red); transform:scale(1.12);}
.fwx-node.is-done .fx-dot{border-color:var(--red);}
.fx-txt{display:block;}
.fx-n{
  font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:.14em; color:var(--ink-faint); margin-right:10px;
}
.fx-en{
  font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint);
}
.fx-cn{display:block; font-size:18px; font-weight:700; color:var(--ink-soft); margin-top:6px; line-height:1.45;}
.fwx-node:hover .fx-cn{color:var(--ink);}
.fwx-node.is-active .fx-cn{color:var(--ink);}
.fwx-node.is-active .fx-n{color:var(--red);}

/* ---- panel ---- */
.fwx-panel{position:relative;}
.fwx-pane[hidden]{display:none;}
.fwx-pane{animation:fxIn .34s cubic-bezier(.4,0,.2,1) both;}
@keyframes fxIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.fx-fig{margin:0 0 var(--s24);}
.fx-fig img{display:block; width:100%; height:auto; border:1px solid var(--line);}
.fx-fig figcaption{margin-top:10px; font-size:12.5px; color:var(--ink-faint); letter-spacing:.02em;}
.fx-head{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.fx-badge{
  font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.12em;
  color:#fff; background:var(--ink); padding:5px 10px;
}
.fx-label{font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint);}
.fwx-panel h3{margin:0 0 14px;}
.fx-lead{font-size:17px; line-height:1.85; color:var(--ink-soft); max-width:720px; margin:0 0 var(--s24);}
.fx-keys{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s24);}
.fx-key{
  font-size:13px; font-weight:600; color:var(--ink-soft);
  border:1px solid var(--line-strong); padding:7px 12px; background:#fff;
}
@media (max-width:960px){
  .fwx-rail{display:flex; gap:0; overflow-x:auto; padding:0 0 0 0;
    border-bottom:1px solid var(--line); -webkit-overflow-scrolling:touch;}
  .fwx-track{display:none;}
  .fwx-rail li{flex:0 0 auto;}
  .fwx-node{padding:14px 18px; border-bottom:3px solid transparent; white-space:nowrap;}
  .fwx-node.is-active{border-bottom-color:var(--red);}
  .fx-dot{display:none;}
  .fx-cn{font-size:16px; margin-top:4px;}
  .fx-lead{font-size:16px;}
}
@media (prefers-reduced-motion:reduce){
  .fwx-pane{animation:none;}
  .fwx-fill{transition:none;}
}

/* animated LEARN · BUILD · SYSTEMIZE · SCALE strip */
.flow-strip .fs-step{opacity:.28; transition:opacity .5s ease, color .5s ease;}
.flow-strip.on .fs-step{opacity:1;}
.flow-strip.on .fs-step:nth-child(1){transition-delay:0s;}
.flow-strip.on .fs-step:nth-child(3){transition-delay:.18s;}
.flow-strip.on .fs-step:nth-child(5){transition-delay:.36s;}
.flow-strip.on .fs-step:nth-child(7){transition-delay:.54s;}

/* ============================================================
   V14 — framework intro (team photo + typed line)
   ============================================================ */
.fwi{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s64); align-items:center;}
@media (max-width:960px){.fwi{grid-template-columns:1fr; gap:var(--s32);}}
.fwi-copy .section-title{margin-bottom:var(--s16);}
.fwi-type{
  font-family:var(--font-display); font-size:22px; font-weight:700; line-height:1.6;
  color:var(--ink); margin:0 0 var(--s24); min-height:1.6em;
}
.tw{display:inline;}
.tw-text{color:var(--red);}
.tw-caret{
  display:inline-block; width:2px; height:1em; background:var(--red);
  margin-left:3px; vertical-align:-.12em; animation:twBlink 1s step-end infinite;
}
@keyframes twBlink{0%,100%{opacity:1;} 50%{opacity:0;}}
.fwi-stats{display:flex; gap:var(--s48); margin-top:var(--s32); flex-wrap:wrap;}
.fwi-stats > div{display:flex; flex-direction:column; gap:6px;}
.fwi-stats .v{font-family:var(--font-display); font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1;}
.fwi-stats .k{font-size:13px; color:var(--ink-faint); letter-spacing:.03em;}
.fwi-photo{margin:0;}
.fwi-photo img{display:block; width:100%; height:auto; border:1px solid var(--line);}
.fwi-photo figcaption{margin-top:10px; font-size:12.5px; color:var(--ink-faint);}
@media (max-width:900px){
  .fwi-type{font-size:19px;}
  .fwi-stats{gap:var(--s24);}
  .fwi-stats .v{font-size:25px;}
}
@media (prefers-reduced-motion:reduce){ .tw-caret{animation:none;} }

/* framework pane: photo beside the copy so a ~930px source stays sharp */
@media (min-width:1100px){
  .fwx-pane{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s32); align-items:start;}
  .fx-fig{margin:0;}
  .fx-body{min-width:0;}
  .fwx-panel h3{margin-top:0;}
}
/* avoid single-character orphans at the end of a paragraph */
.lede, .fx-lead, p.body-sm{text-wrap:pretty;}

/* ============================================================
   V14 — MOBILE POLISH
   Two rules, applied everywhere: no label under 12.5px, and no
   tap target under 44px.
   ============================================================ */
@media (max-width:900px){
  /* --- legibility floor --- */
  .sec-label .en, .mega-head .en, .np-head, .fx-label, .fx-en,
  .cc-label, .gi-tier, .tr-en, .tr-tier, .em .emk, .cc-sector,
  .vb-note, .founder-tag, .fw-tag, .sol-cell .se, .pc-field .k,
  .cc-row .k, .cred-dl dt, .footer-col h5{
    font-size:12.5px; letter-spacing:.14em;
  }
  .tr-cn, .mega-head .cn, .sec-label .cn{font-size:13.5px;}
  .fx-key{font-size:13.5px; padding:9px 13px;}
  .fx-fig figcaption, .fwi-photo figcaption, .cred-figure figcaption,
  .gi-cap, .cn-item p, .cred-foot, .footer-bottom span{font-size:13px; line-height:1.7;}
  .fwi-stats .k, .t-lbl, .vb-stats .l{font-size:13px;}
  .np-txt span, .mega-col .np-txt span{font-size:13.5px;}
  .breadcrumb{font-size:13px;}

  /* --- 44px minimum touch target --- */
  .nav-toggle{width:44px; height:44px; justify-content:center; align-items:center; padding:0;}
  .nav-toggle span{width:24px;}
  .logo{min-height:44px; justify-content:center;}
  .link-arrow{min-height:44px; align-items:center; padding-bottom:0;}
  .footer-col a, .footer-bottom a{min-height:44px; display:flex; align-items:center;}
  .filter-chip{min-height:44px;}
  .mobile-cta a{min-height:52px; display:flex; align-items:center; justify-content:center;}
  nav.main-nav > a, nav.main-nav .nav-trigger{min-height:52px; display:flex; align-items:center;}
  .mega-col > a, .nav-panel > a{min-height:48px;}
  .fwx-node{min-height:48px;}
  .cred-shot{min-height:44px;}
  .btn-wa{width:44px; height:44px;}
}
@media (max-width:900px){
  .framework-grid .fw-item .fw-tag{font-size:12.5px;}
  .field label, form label{font-size:13px;}
  .tr-cta, .cc-clients a, .contact-line a, .cl-v a{min-height:44px; display:inline-flex; align-items:center;}
  .contact-line a, .cl-v a{padding:4px 0;}
}

/* Mobile legibility floor.
   These are eyebrow / label styles set by many older, more specific
   rules; !important is used deliberately so the floor cannot be
   undercut by an earlier layer. Desktop sizing is untouched. */
@media (max-width:900px){
  .cc-sector, .cl-k, .dc-cat, .rc-type, .p3e, .fw-tag, .tr-en, .tr-tier,
  .pc-field .k, .cc-row .k, .detail-facts .k, .spec-table td:first-child,
  .em .emk, .vb-note, .founder-tag, .sol-cell .se, .sec-label .en,
  .mega-head .en, .np-head, .fx-label, .fx-en, .cc-label, .gi-tier,
  .cred-dl dt, .footer-col h5, .dc-card .k, .fr-cat, .ven{
    font-size:12.5px !important;
    letter-spacing:.12em;
  }
  .breadcrumb a, .cc-clients a{min-height:44px; display:inline-flex; align-items:center;}
}

/* ============================================================
   V15 — HERO: real class behind the founder
   The class photo is pre-blurred and downscaled in the asset
   itself, so no attendee name or number exists in the file that
   ships. Black scrim on top, founder and red disc in front.
   ============================================================ */
.hero-v3{position:relative; overflow:hidden; background:#0B0A09;}
.hero-bg{position:absolute; inset:0; z-index:0; display:block;}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center; opacity:.58;}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:rgba(8,7,6,.66);
}
.hero-v3 > .wrap{position:relative; z-index:2;}

.hero-v3 h1{color:#fff;}
.hero-v3 .lede{color:rgba(255,255,255,.84);}
.hero-v3 .hero-badge{
  color:rgba(255,255,255,.88);
  border-left-color:var(--gold);
  background:transparent;
}
.hero-v3 .hero-sub-note{color:rgba(255,255,255,.62);}
.hero-v3 .btn-secondary{
  background:transparent; border-color:rgba(255,255,255,.55); color:#fff;
}
.hero-v3 .btn-secondary:hover{background:#fff; border-color:#fff; color:var(--ink);}
.hero-v3 :focus-visible{outline-color:var(--gold);}

/* the red disc reads stronger on black — keep it, tighten the ring */
.hero-v3 .hero-circle::after{border-color:rgba(255,255,255,.14);}
/* stat block sits on dark now, so it needs its own edge */
.hero-v3 .hero-stat{
  background:rgba(10,9,8,.86);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:none;
}
.hero-v3 .hero-stat .sl{color:rgba(255,255,255,.7);}

@media (max-width:900px){
  .hero-bg img{opacity:.5;}
  .hero-scrim{background:rgba(8,7,6,.72);}
}
@media (prefers-reduced-motion:reduce){ .hero-bg img{opacity:.5;} }
.hero-v3 .lede{max-width:620px;}
@media (max-width:900px){ .hero-v3 .lede{max-width:none;} }

/* V15.1 — show the class clearly; keep the headline legible with a
   left-weighted scrim rather than one flat wash over everything */
.hero-bg img{opacity:.92;}
.hero-scrim{
  background:
    linear-gradient(90deg, rgba(8,7,6,.92) 0%, rgba(8,7,6,.86) 34%, rgba(8,7,6,.55) 62%, rgba(8,7,6,.34) 100%),
    linear-gradient(180deg, rgba(8,7,6,.30) 0%, rgba(8,7,6,0) 34%);
}
@media (max-width:900px){
  .hero-bg img{opacity:.85;}
  .hero-scrim{background:linear-gradient(180deg, rgba(8,7,6,.86) 0%, rgba(8,7,6,.80) 52%, rgba(8,7,6,.62) 100%);}
}
@media (max-width:900px){
  .hero-bg img{opacity:.92;}
  .hero-scrim{background:linear-gradient(180deg, rgba(8,7,6,.80) 0%, rgba(8,7,6,.72) 50%, rgba(8,7,6,.52) 100%);}
}