/* ============================================================
   The Sukhothai Bangkok — Forbes Training Hub · v2 "Editorial"
   Celadon flagship · ivory ground · ink type · gold for achievement
   Full-bleed hotel photography · glass panels · slow luxury motion
   ============================================================ */

:root{
  --celadon:#729C84;
  --celadon-deep:#5F8A72;
  --celadon-light:#8EB09D;
  --celadon-wash:#EFF3EC;
  --charcoal:#22312A;
  --charcoal-2:#2C3E34;
  --ink:#2B2723;
  --ink-soft:#5A544C;
  --ivory:#F6F1E7;
  --paper:#FDFCF7;
  --gold:#A98B4F;
  --gold-light:#C5A96B;
  --sand:#F7F1E6;
  --clay:#A96B4F;
  --clay-wash:#F6ECE6;
  --line:#E3DCCD;
  --serif:"Playfair Display", Georgia, serif;          /* display type — matches the poster suite */
  --serif-q:"Cormorant Garamond", Georgia, serif;      /* italic quotes & flourishes */
  --sans:"Inter", -apple-system, "Segoe UI", sans-serif;
  --shadow:0 1px 2px rgba(43,39,35,.05), 0 10px 30px rgba(43,39,35,.08);
  --shadow-lift:0 4px 10px rgba(43,39,35,.07), 0 18px 44px rgba(43,39,35,.14);
  --radius:16px;
  --glass:rgba(253,252,247,.86);
  --glass-dark:rgba(30,43,36,.62);
  --hairline:rgba(169,139,79,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--celadon-deep)}
h1,h2,h3,.serif{font-family:var(--serif); font-weight:600; line-height:1.12; margin:0}

/* ============ header ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px; gap:16px;
  background:linear-gradient(rgba(18,27,22,.62), rgba(18,27,22,0));
  transition:background .4s ease, box-shadow .4s ease, padding .3s ease;
}
.site-header.solid{
  background:rgba(26,37,30,.9);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(246,241,231,.08), 0 8px 30px rgba(0,0,0,.18);
  padding:10px 26px;
}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; color:#fff; min-width:0}
.brand-logo{height:52px; width:auto; flex:none; transition:height .3s ease}
.site-header.solid .brand-logo{height:44px}
.brand-title{
  font-family:var(--serif); font-size:1.02rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ivory); white-space:nowrap;
  border-left:1px solid rgba(246,241,231,.35); padding-left:14px;
}
.site-nav{display:flex; gap:2px; align-items:center}
.site-nav > a, .dd > button{
  color:rgba(246,241,231,.88); text-decoration:none; font-size:.84rem; font-weight:500;
  padding:9px 14px; border-radius:999px; letter-spacing:.04em; border:none; background:none;
  font-family:var(--sans); cursor:pointer; white-space:nowrap;
}
.site-nav > a:hover, .dd > button:hover{background:rgba(246,241,231,.14); color:#fff}
.site-nav > a.active{background:var(--celadon); color:#fff}
.dd{position:relative}
.dd > button .caret{font-size:.62rem; margin-left:5px; display:inline-block; transition:transform .25s}
.dd.open > button{background:rgba(246,241,231,.14); color:#fff}
.dd.open > button .caret{transform:rotate(180deg)}
.dd-panel{
  position:absolute; top:calc(100% + 12px); right:0; width:520px; max-width:86vw;
  background:var(--glass); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid var(--hairline); border-radius:18px; padding:14px;
  box-shadow:0 24px 70px rgba(15,23,18,.35);
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.dd.open .dd-panel{opacity:1; transform:none; pointer-events:auto}
.dd-item{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:12px;
  text-decoration:none; color:var(--ink);
}
.dd-item:hover{background:var(--celadon-wash)}
.dd-item b{font-size:.85rem; font-weight:600; display:block; line-height:1.2}
.dd-item span{font-size:.72rem; color:var(--ink-soft)}
.dept-mono{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--celadon-wash); border:1px solid var(--celadon-light);
  color:var(--celadon-deep); font-family:var(--serif); font-weight:600; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
}
.nav-toggle{
  display:none; background:none; border:1px solid rgba(246,241,231,.4); color:var(--ivory);
  border-radius:999px; padding:8px 16px; font-family:var(--sans); font-size:.84rem; cursor:pointer;
}

/* mobile menu overlay */
.mobile-menu{
  position:fixed; inset:0; z-index:70; background:rgba(24,34,28,.96);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  padding:26px; overflow-y:auto; color:var(--ivory);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.mobile-menu.open{opacity:1; pointer-events:auto}
.mobile-menu .mm-close{
  position:absolute; top:18px; right:20px; background:none; border:1px solid rgba(246,241,231,.4);
  color:var(--ivory); border-radius:999px; padding:8px 16px; font-size:.84rem; cursor:pointer; font-family:var(--sans);
}
.mm-logo{height:44px; margin:6px 0 22px}
.mobile-menu h4{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-light); margin:26px 0 8px; font-weight:700;
}
.mm-link{
  display:block; text-decoration:none; color:var(--ivory); font-family:var(--serif);
  font-size:1.5rem; padding:9px 0; border-bottom:1px solid rgba(246,241,231,.1);
}
.mm-dept{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ivory);
  padding:9px 0; border-bottom:1px solid rgba(246,241,231,.08); font-size:.95rem;
}
.mm-dept .dept-mono{background:rgba(246,241,231,.1); border-color:rgba(246,241,231,.25); color:var(--ivory)}

/* ============ layout ============ */
.view{min-height:70vh}
.wrap{max-width:1120px; margin:0 auto; padding:0 22px}
.pad-page{padding-top:118px; padding-bottom:90px}
.kicker{
  font-size:.7rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px;
}
.page-head{margin:6px 0 26px}
.page-title{font-size:2.5rem; color:var(--ink)}
.page-sub{color:var(--ink-soft); max-width:660px; margin-top:10px}
.crumbs{font-size:.82rem; color:var(--ink-soft); margin-bottom:16px}
.crumbs a{color:var(--celadon-deep); text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ============ scroll-reveal motion ============ */
.rv{opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1; transform:none; transition:none}
  .hs-bg{animation:none !important}
  html{scroll-behavior:auto}
}

/* ============ landing: hero ============ */
.hs{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; color:var(--ivory)}
.hs-bg{
  position:absolute; inset:-4%; background-size:cover; background-position:center;
  animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{from{transform:scale(1) translateY(0)} to{transform:scale(1.07) translateY(-1.2%)}}
.hs::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,27,22,.32) 0%, rgba(18,27,22,.18) 42%, rgba(18,27,22,.78) 100%);
}
.hs-content{position:relative; z-index:2; width:100%; padding:0 0 9svh}
.hs .kicker{color:var(--gold-light)}
.hs h1{
  color:#fff; font-size:clamp(2.6rem, 6vw, 4.6rem); font-weight:600; max-width:820px;
  letter-spacing:.01em; text-wrap:balance;
}
.hs h1 em{font-style:italic; color:var(--gold-light)}
.hs p.lead{max-width:600px; color:rgba(246,241,231,.9); font-size:1.02rem; margin:18px 0 26px}
.hs-anim > *{opacity:0; transform:translateY(26px); animation:heroin 1.1s cubic-bezier(.2,.6,.2,1) forwards}
.hs-anim > *:nth-child(2){animation-delay:.15s}
.hs-anim > *:nth-child(3){animation-delay:.3s}
.hs-anim > *:nth-child(4){animation-delay:.45s}
.hs-anim > *:nth-child(5){animation-delay:.6s}
@keyframes heroin{to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .hs-anim > *{animation:none; opacity:1; transform:none} }
.hs-stats{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.hs-stat{
  background:rgba(246,241,231,.12); border:1px solid rgba(246,241,231,.28);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-radius:14px; padding:12px 20px; min-width:150px;
}
.hs-stat b{font-family:var(--serif); font-size:1.9rem; color:#fff; display:block; font-weight:600; line-height:1.05}
.hs-stat b .pc{font-size:1.1rem; color:var(--gold-light)}
.hs-stat span{font-size:.72rem; color:rgba(246,241,231,.8); letter-spacing:.08em; text-transform:uppercase}
.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  width:1px; height:52px; background:linear-gradient(rgba(246,241,231,0), rgba(246,241,231,.85));
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.25} 50%{opacity:1}}

/* ============ landing: sections ============ */
.sec{padding:130px 0}
.sec-head{display:flex; align-items:baseline; gap:18px; margin-bottom:34px}
.sec-num{font-family:var(--serif); font-size:1.05rem; color:var(--gold); font-style:italic; flex:none}
.sec-head h2{font-size:clamp(1.8rem, 3.4vw, 2.6rem)}
.sec-head .rule{flex:1; height:1px; background:var(--line); transform-origin:left}
.sec-sub{color:var(--ink-soft); max-width:640px; margin:-22px 0 34px; font-size:.98rem}

/* today card */
.today{display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:stretch}
.today-card{
  background:var(--paper); border:1px solid var(--hairline); border-radius:22px;
  padding:38px 40px; box-shadow:var(--shadow-lift); position:relative; overflow:hidden;
}
.today-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gold), var(--celadon));
}
.today-date{
  display:inline-flex; align-items:center; gap:10px; font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:16px;
}
.today-date b{color:var(--gold)}
.today-card h3{font-size:1.9rem; margin-bottom:12px}
.today-card p.teaser{
  font-family:var(--serif); font-size:1.18rem; font-style:italic; color:var(--ink);
  line-height:1.5; margin:0 0 18px;
}
.today-side{
  border-radius:22px; background-size:cover; background-position:center; position:relative; overflow:hidden; min-height:280px;
}
.today-side::after{content:""; position:absolute; inset:0; background:linear-gradient(200deg, rgba(18,27,22,.05), rgba(18,27,22,.55))}
.today-side .ts-label{
  position:absolute; bottom:18px; left:20px; z-index:2; color:var(--ivory);
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
}

/* photo band with glass tiles */
.band{position:relative; padding:110px 0; background-size:cover; background-position:center 30%; overflow:hidden}
@media (min-width:900px){ .band{background-attachment:fixed} }
.band::after{content:""; position:absolute; inset:0; background:rgba(24,34,28,.55)}
.band .wrap{position:relative; z-index:2}
.band .sec-head h2, .band .sec-num{color:var(--ivory)}
.band .sec-head .rule{background:rgba(246,241,231,.25)}
.band-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.glass-tile{
  background:rgba(253,252,247,.14); border:1px solid rgba(246,241,231,.3);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-radius:18px; padding:24px 22px; text-decoration:none; color:var(--ivory);
  transition:transform .3s ease, background .3s ease; display:block;
}
.glass-tile:hover{transform:translateY(-5px); background:rgba(253,252,247,.22)}
.glass-tile .gt-k{font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-light)}
.glass-tile h3{color:#fff; font-size:1.32rem; margin:8px 0 6px}
.glass-tile p{font-size:.85rem; color:rgba(246,241,231,.85); margin:0 0 14px}
.glass-tile .gt-cta{font-size:.8rem; letter-spacing:.06em; color:#fff; border-bottom:1px solid var(--gold-light); padding-bottom:2px}

/* department photo grid */
.dept-photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}
.dp-tile{
  position:relative; border-radius:18px; overflow:hidden; text-decoration:none;
  aspect-ratio:4/3.1; display:block; box-shadow:var(--shadow);
}
.dp-tile img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.dp-tile:hover img{transform:scale(1.06)}
.dp-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(185deg, rgba(18,27,22,0) 30%, rgba(18,27,22,.82) 100%);
}
.dp-info{position:absolute; left:16px; right:12px; bottom:14px; z-index:2; display:flex; align-items:center; gap:11px}
.dp-info .dept-mono{
  background:rgba(246,241,231,.14); border-color:rgba(246,241,231,.4); color:var(--ivory);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.dp-info b{color:#fff; font-size:.92rem; font-weight:600; display:block; line-height:1.2}
.dp-info span{color:rgba(246,241,231,.75); font-size:.72rem}

/* goal section */
.goal{position:relative; background:var(--charcoal); color:var(--ivory); padding:110px 0; overflow:hidden}
.goal-bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.16}
.goal .wrap{position:relative; z-index:2}
.goal .kicker{color:var(--gold-light)}
.goal h2{color:#fff; font-size:clamp(1.9rem, 3.6vw, 2.8rem); max-width:700px; text-wrap:balance}
.goal-stats{display:flex; gap:40px; margin:44px 0 26px; flex-wrap:wrap}
.gs b{
  font-family:var(--serif); font-size:clamp(3.6rem, 7vw, 5.4rem); color:var(--gold-light);
  font-weight:600; line-height:1; display:block;
}
.gs span{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,231,.85); display:block; margin-top:8px; max-width:220px}
.goal p.gq{font-family:var(--serif); font-style:italic; font-size:1.25rem; color:rgba(246,241,231,.92); max-width:560px}

/* leaders strip */
.leaders-strip{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--paper); border:1px solid var(--hairline); border-radius:20px; padding:26px 30px;
  box-shadow:var(--shadow);
}
.leaders-strip h3{font-size:1.35rem}
.leaders-strip p{color:var(--ink-soft); font-size:.9rem; margin:4px 0 0; max-width:560px}

/* ============ cards & grids (inner pages) ============ */
.grid{display:grid; gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow);
}
.card h3{font-size:1.32rem; margin-bottom:6px}
.card p{margin:.35rem 0; color:var(--ink-soft); font-size:.93rem}
.card.link{cursor:pointer; transition:transform .25s ease, box-shadow .25s ease; text-decoration:none; color:var(--ink); display:block}
.card.link:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.section-title{font-size:1.6rem; margin:36px 0 16px; display:flex; align-items:center; gap:12px}
.section-title::after{content:""; flex:1; height:1px; background:var(--line)}
.diamond{color:var(--gold); font-size:.8em}

/* ============ buttons ============ */
.btn{
  display:inline-block; border:none; cursor:pointer; font-family:var(--sans);
  font-size:.9rem; font-weight:600; border-radius:999px; padding:13px 26px;
  text-decoration:none; text-align:center; transition:background .2s ease, transform .15s, box-shadow .2s;
  letter-spacing:.02em;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--celadon); color:#fff}
.btn-primary:hover{background:var(--celadon-deep); box-shadow:0 8px 24px rgba(95,138,114,.4)}
.btn-dark{background:var(--charcoal); color:#fff}
.btn-dark:hover{background:var(--charcoal-2)}
.btn-gold{background:var(--gold); color:#fff}
.btn-gold:hover{background:#97793F; box-shadow:0 8px 24px rgba(169,139,79,.45)}
.btn-ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink-soft)}
.btn-ivory{background:rgba(246,241,231,.14); color:var(--ivory); border:1px solid rgba(246,241,231,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.btn-ivory:hover{background:rgba(246,241,231,.26)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

/* ============ department pages ============ */
.dept-hero2{
  position:relative; min-height:52svh; display:flex; align-items:flex-end;
  color:var(--ivory); overflow:hidden;
}
.dept-hero2 .dh-bg{position:absolute; inset:0; background-size:cover; background-position:center}
.dept-hero2::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,27,22,.5) 0%, rgba(18,27,22,.24) 45%, rgba(18,27,22,.82) 100%);
}
.dept-hero2 .wrap{position:relative; z-index:2; width:100%; padding-top:110px; padding-bottom:104px}
.dept-hero2.short{min-height:34svh}
.dept-hero2.short .wrap{padding-bottom:44px}
.dept-hero2 h1{text-wrap:balance; max-width:900px; overflow-wrap:break-word}
.dept-hero2 .page-sub{max-width:620px}
.dept-hero2 .kicker{color:var(--gold-light)}
.dept-hero2 h1{color:#fff; font-size:clamp(2.2rem, 4.6vw, 3.6rem)}
.dept-hero2 .page-sub{color:rgba(246,241,231,.88)}
.chip-gold{
  display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ivory); border:1px solid var(--gold-light); border-radius:999px; padding:5px 14px; margin-top:14px;
  background:rgba(169,139,79,.22); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}

/* module grid (dept landing) */
.module-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:-52px; position:relative; z-index:5}
.mod-card{
  background:var(--glass); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid var(--hairline); border-radius:20px; padding:26px 24px 22px;
  text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:8px;
  box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease;
  position:relative; overflow:hidden;
}
.mod-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lift)}
.mod-num{font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--gold)}
.mod-card h3{font-size:1.42rem}
.mod-card p{font-size:.87rem; color:var(--ink-soft); margin:0; flex:1}
.mod-foot{display:flex; align-items:center; justify-content:space-between; margin-top:12px}
.mod-go{font-size:.82rem; font-weight:600; color:var(--celadon-deep); letter-spacing:.04em}
.mod-card:hover .mod-go{text-decoration:underline}

/* tabs (inside modules) */
.subnav{
  display:flex; gap:6px; flex-wrap:wrap; margin:20px 0 26px;
}
.subnav a{
  padding:9px 16px; font-size:.83rem; font-weight:600; color:var(--ink-soft);
  text-decoration:none; border-radius:999px; border:1px solid var(--line); background:var(--paper);
  white-space:nowrap;
}
.subnav a:hover{border-color:var(--celadon); color:var(--celadon-deep)}
.subnav a.active{background:var(--charcoal); color:var(--ivory); border-color:var(--charcoal)}
.subnav a .tag{font-size:.62rem; vertical-align:2px; color:var(--gold); font-weight:700; letter-spacing:.06em; margin-left:4px}

/* learn cards */
.learn-card{margin-bottom:14px}
.learn-card .lc-points{margin:10px 0 0; padding:0; list-style:none}
.learn-card .lc-points li{
  padding:8px 0 8px 24px; position:relative; font-size:.93rem; color:var(--ink); border-top:1px dashed var(--line);
}
.learn-card .lc-points li::before{content:"◆"; position:absolute; left:2px; top:9px; font-size:.58rem; color:var(--celadon)}
.callout{
  background:var(--celadon-wash); border:1px solid var(--celadon-light); border-radius:14px;
  padding:15px 18px; font-size:.92rem; margin:12px 0;
}
.callout.gold{background:var(--sand); border-color:var(--gold-light)}
.callout b{font-weight:600}

/* ============ quiz engine ============ */
.quiz-wrap{max-width:760px; margin:0 auto}
.progress{height:5px; background:var(--line); border-radius:99px; margin:14px 0 24px; overflow:hidden}
.progress i{display:block; height:100%; background:linear-gradient(90deg, var(--celadon), var(--celadon-deep)); border-radius:99px; transition:width .4s ease}
.q-count{font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}
.q-text{font-family:var(--serif); font-size:1.55rem; font-weight:600; margin:12px 0 20px; line-height:1.28}
.scenario-box{
  background:var(--paper); border-left:3px solid var(--celadon); border-radius:0 14px 14px 0;
  padding:18px 20px; margin:0 0 20px; font-size:.96rem; box-shadow:var(--shadow);
}
.scenario-box .sb-label{font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--celadon-deep); display:block; margin-bottom:7px}
.scenario-box p{margin:.4rem 0}
.choices{display:flex; flex-direction:column; gap:10px}
.choice{
  background:var(--paper); border:1.5px solid var(--line); border-radius:14px;
  padding:14px 18px; text-align:left; font-size:.95rem; cursor:pointer; font-family:var(--sans);
  transition:border-color .15s ease, background .15s ease, transform .15s ease; color:var(--ink); line-height:1.5;
}
.choice:hover{border-color:var(--celadon); transform:translateX(3px)}
.choice.picked{border-color:var(--celadon-deep); background:var(--celadon-wash)}
.choice.correct{border-color:var(--celadon-deep); background:var(--celadon-wash)}
.choice.correct::after{content:"  ✓"; color:var(--celadon-deep); font-weight:700}
.choice.wrong{border-color:var(--clay); background:var(--clay-wash)}
.choice.wrong::after{content:"  ✕"; color:var(--clay); font-weight:700}
.choice[disabled]{cursor:default}
.choice[disabled]:hover{transform:none}
.explain{
  border-radius:14px; padding:16px 18px; margin-top:16px; font-size:.93rem; line-height:1.55;
  animation:fadeup .3s ease;
}
.explain.good{background:var(--celadon-wash); border:1px solid var(--celadon-light)}
.explain.bad{background:var(--clay-wash); border:1px solid #D9B49E}
.explain b{font-family:var(--serif); font-size:1.06rem}
.explain .src{display:block; margin-top:8px; font-size:.78rem; color:var(--ink-soft); font-style:italic}
@keyframes fadeup{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* results */
.result-card{text-align:center; padding:44px 28px}
.score-ring{
  width:140px; height:140px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:2.1rem; font-weight:700; color:var(--ink);
  background:conic-gradient(var(--celadon) calc(var(--pct)*1%), var(--line) 0);
  position:relative; animation:ringin 1s cubic-bezier(.2,.6,.2,1);
}
@keyframes ringin{from{transform:scale(.85); opacity:0} to{transform:none; opacity:1}}
.score-ring::before{content:""; position:absolute; inset:10px; background:var(--paper); border-radius:50%}
.score-ring span{position:relative}
.score-ring.gold{background:conic-gradient(var(--gold) calc(var(--pct)*1%), var(--line) 0)}
.result-verdict{font-family:var(--serif); font-size:1.6rem; margin-bottom:4px}
.result-sub{color:var(--ink-soft); font-size:.92rem}
.review-list{text-align:left; margin-top:28px}
.review-item{border-top:1px solid var(--line); padding:14px 2px; font-size:.9rem}
.review-item .ri-q{font-weight:600}
.review-item .ri-a{color:var(--ink-soft); margin-top:3px}
.review-item.ok .ri-mark{color:var(--celadon-deep); font-weight:700}
.review-item.no .ri-mark{color:var(--clay); font-weight:700}

/* ============ listening ============ */
.audio-slot{
  background:var(--charcoal); color:var(--ivory); border-radius:16px; padding:20px 22px; margin:16px 0;
}
.audio-slot b{font-family:var(--serif); font-size:1.08rem}
.audio-slot p{font-size:.85rem; color:rgba(246,241,231,.78); margin:6px 0 0}
.audio-slot audio{width:100%; margin-top:12px}
.badge{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; background:var(--sand); color:var(--gold); border:1px solid var(--gold-light);
}
.badge.soon{background:var(--clay-wash); color:var(--clay); border-color:#D9B49E}
.badge.live{background:var(--celadon-wash); color:var(--celadon-deep); border-color:var(--celadon-light)}
.transcript{margin-top:14px}
.transcript .t-line{display:flex; gap:12px; padding:8px 0; border-top:1px dashed var(--line); font-size:.94rem}
.transcript .t-who{flex:none; width:96px; font-weight:600; font-size:.78rem; color:var(--celadon-deep); text-transform:uppercase; letter-spacing:.05em; padding-top:3px}
details.reveal{margin:12px 0}
details.reveal summary{cursor:pointer; font-weight:600; color:var(--celadon-deep); font-size:.92rem}

/* ============ roleplay ============ */
.persona-card{display:flex; gap:20px; align-items:flex-start}
.persona-avatar{
  flex:none; width:68px; height:68px; border-radius:50%; background:var(--charcoal); color:var(--ivory);
  font-family:var(--serif); font-size:1.6rem; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--gold-light);
}
.criteria-list{margin:8px 0 0; padding:0; list-style:none}
.criteria-list li{padding:7px 0 7px 26px; position:relative; font-size:.92rem; border-top:1px dashed var(--line)}
.criteria-list li::before{content:"✓"; position:absolute; left:2px; color:var(--celadon); font-weight:700}
.agent-slot{margin-top:16px}

/* ============ print corner ============ */
.print-sheet{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px; margin-top:16px}
.print-sheet h2{font-size:1.4rem}
.print-q{margin:16px 0 4px; font-weight:600; font-size:.95rem}
.print-choices{margin:4px 0 0 6px; padding:0; list-style:none; font-size:.92rem}
.print-choices li{padding:3px 0}
.print-choices .abc{display:inline-block; width:22px; font-weight:600; color:var(--celadon-deep)}
.answer-key{border-top:2px solid var(--charcoal); margin-top:28px; padding-top:14px}
.print-meta{display:flex; gap:26px; font-size:.9rem; margin:10px 0 4px; color:var(--ink-soft)}
.print-meta span{border-bottom:1px solid var(--ink-soft); min-width:150px; display:inline-block}

/* ============ dashboard ============ */
.gate-card{max-width:440px; margin:30px auto; text-align:center; padding:38px 32px}
.gate-card input{
  width:100%; padding:14px 16px; font-size:1.05rem; text-align:center; letter-spacing:.14em;
  border:1.5px solid var(--line); border-radius:14px; font-family:var(--sans); margin:16px 0 4px;
  background:#fff; color:var(--ink);
}
.gate-card input:focus{outline:none; border-color:var(--celadon)}
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:18px 0}
.stat{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow)}
.stat b{font-family:var(--serif); font-size:1.8rem; display:block; color:var(--ink)}
.stat span{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.table-wrap{overflow-x:auto; background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow)}
table.data{width:100%; border-collapse:collapse; font-size:.88rem; min-width:640px}
table.data th{
  text-align:left; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  padding:13px 15px; border-bottom:2px solid var(--line); white-space:nowrap;
}
table.data td{padding:12px 15px; border-bottom:1px solid var(--line); vertical-align:top}
table.data tr:last-child td{border-bottom:none}
table.data tr.clickable{cursor:pointer}
table.data tr.clickable:hover{background:var(--celadon-wash)}
.pct-pill{display:inline-block; min-width:52px; text-align:center; font-weight:600; border-radius:999px; padding:3px 10px; font-size:.82rem}
.pct-good{background:var(--celadon-wash); color:var(--celadon-deep)}
.pct-mid{background:var(--sand); color:var(--gold)}
.pct-low{background:var(--clay-wash); color:var(--clay)}
.muted{color:var(--ink-soft)}
.small{font-size:.82rem}

/* ============ modal ============ */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(24,34,28,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-backdrop[hidden]{display:none !important}
.modal{
  background:var(--paper); border-radius:22px; max-width:440px; width:100%; padding:30px;
  box-shadow:0 30px 90px rgba(0,0,0,.35); border:1px solid var(--hairline);
  animation:fadeup .35s ease;
}
.modal-title{font-size:1.55rem}
.modal-sub{font-size:.9rem; color:var(--ink-soft); margin:8px 0 18px}
.field{display:block; margin-bottom:13px}
.field span{font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:5px}
.field input, .field select{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px;
  font-size:1rem; font-family:var(--sans); background:#fff; color:var(--ink); appearance:auto;
}
.field input:focus, .field select:focus{outline:none; border-color:var(--celadon)}
.field-error{color:var(--clay); font-size:.84rem}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:18px}
.modal-fine{font-size:.76rem; color:var(--ink-soft); margin-top:14px; text-align:center}

/* identity chip */
.id-chip{
  display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line);
  border-radius:999px; padding:7px 15px; font-size:.82rem; color:var(--ink-soft); margin-top:10px;
}
.id-chip b{color:var(--ink)}
.id-chip button{background:none; border:none; color:var(--celadon-deep); cursor:pointer; font-size:.8rem; text-decoration:underline; padding:0}

/* ============ footer ============ */
.site-footer{background:var(--charcoal); color:var(--ivory); padding:54px 22px}
.footer-inner{max-width:1120px; margin:0 auto; display:flex; gap:26px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.footer-brand{display:flex; gap:18px; align-items:center}
.footer-logo{height:52px; filter:none; opacity:.95}
.footer-inner p{font-size:.85rem; color:rgba(246,241,231,.85); margin:0}
.footer-inner .muted{color:rgba(246,241,231,.55)}
.footer-nav{display:flex; gap:18px; flex-wrap:wrap}
.footer-nav a{color:rgba(246,241,231,.75); text-decoration:none; font-size:.82rem; letter-spacing:.04em}
.footer-nav a:hover{color:#fff}

/* ============ responsive ============ */
@media (max-width:960px){
  .band-tiles{grid-template-columns:1fr 1fr}
  .module-grid{grid-template-columns:1fr 1fr}
  .today{grid-template-columns:1fr}
  .today-side{min-height:200px}
}
@media (max-width:820px){
  .grid-3{grid-template-columns:1fr 1fr}
  .site-nav{display:none}
  .nav-toggle{display:block}
}
@media (max-width:600px){
  .grid-3,.grid-2,.band-tiles,.module-grid{grid-template-columns:1fr}
  .page-title{font-size:1.9rem}
  .brand-logo{height:42px}
  .site-header.solid .brand-logo{height:38px}
  .brand-title{font-size:.78rem; letter-spacing:.14em}
  .sec{padding:80px 0}
  .today-card{padding:28px 24px}
  .module-grid{margin-top:-36px}
  .wrap{padding:0 16px}
  .pad-page{padding-top:96px}
}

/* ============ print ============ */
@media print{
  .site-header,.site-footer,.subnav,.btn,.crumbs,.no-print,.scroll-cue,.mobile-menu{display:none !important}
  body{background:#fff}
  .view,.wrap{padding:0; max-width:none}
  .print-sheet{border:none; padding:0}
  .answer-key{page-break-before:always}
  .dept-hero2{min-height:0; background:#fff; color:#000}
  .dept-hero2 .dh-bg,.dept-hero2::after{display:none}
  .dept-hero2 h1{color:#000}
  .dept-hero2 .page-sub{color:#333}
}

/* ============================================================
   v2.1 OPULENCE LAYER — mirror golds, deep blacks, interludes,
   ribbon, sheen sweeps, ghost numerals, richer motion
   ============================================================ */
:root{
  --black:#101612;
  --black-2:#1A241E;
  --gold-deep:#8C6F3C;
  --gold-pale:#E8D5A4;
  --gold-grad:linear-gradient(115deg, var(--gold-deep) 0%, var(--gold-light) 32%, var(--gold-pale) 50%, var(--gold-light) 68%, var(--gold-deep) 100%);
}

/* mirror-gold text */
.gold-text{
  background:var(--gold-grad); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.shimmer{animation:shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:200% center}}
@media (prefers-reduced-motion: reduce){ .shimmer{animation:none} }

/* metallic hairline for glass cards */
.mod-card, .today-card, .glass-tile{border-color:var(--hairline)}
.mod-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg, rgba(197,169,107,.55), rgba(197,169,107,0) 38%, rgba(197,169,107,0) 62%, rgba(114,156,132,.4));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

/* light-sweep on hover */
.sheen{position:relative; overflow:hidden}
.sheen::before{
  content:""; position:absolute; top:-10%; bottom:-10%; left:-70%; width:45%;
  background:linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,.3), rgba(255,255,255,0));
  transform:skewX(-18deg); pointer-events:none; z-index:4; transition:left .9s cubic-bezier(.2,.6,.2,1);
}
.sheen:hover::before{left:140%}
@media (prefers-reduced-motion: reduce){ .sheen::before{display:none} }

/* reveal variants */
.rv{transition-property:opacity, transform, filter}
.rv.bl{filter:blur(12px)}
.rv.bl.in{filter:blur(0)}
.rv.sc{transform:translateY(20px) scale(.96)}
.rv.sc.in{transform:none}
/* drawn gold rule */
.sec-head .rule{transform:scaleX(0); transition:transform 1.3s .25s cubic-bezier(.2,.6,.2,1)}
.sec-head.in .rule{transform:scaleX(1)}
.sec-head .rule.gold{background:linear-gradient(90deg, var(--gold-light), var(--line))}

/* ghost numerals behind section heads */
.sec-head{position:relative; z-index:0}
.sec-ghost{
  position:absolute; left:-14px; top:-4.9rem; z-index:-1; pointer-events:none;
  font-family:var(--serif); font-style:italic; font-weight:600; font-size:8.4rem; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(169,139,79,.22);
}
.band .sec-ghost{-webkit-text-stroke-color:rgba(246,241,231,.16)}

/* hero atmosphere orbs */
.hs-orb{position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:1; opacity:.38}
.orb1{width:440px; height:440px; right:6%; top:10%;
  background:radial-gradient(circle, rgba(197,169,107,.6), transparent 70%);
  animation:drift1 17s ease-in-out infinite alternate}
.orb2{width:560px; height:560px; left:-6%; bottom:-8%;
  background:radial-gradient(circle, rgba(142,176,157,.55), transparent 70%);
  animation:drift2 22s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-46px, 34px) scale(1.1)}}
@keyframes drift2{to{transform:translate(54px, -28px) scale(1.06)}}
@media (prefers-reduced-motion: reduce){ .hs-orb{animation:none} }

/* principles ribbon (slow marquee) */
.ribbon{
  overflow:hidden; background:var(--black); border-top:1px solid rgba(197,169,107,.25);
  border-bottom:1px solid rgba(197,169,107,.25); padding:17px 0;
}
.ribbon-track{display:flex; width:max-content; animation:ribbon 70s linear infinite}
.ribbon-track span{
  font-size:.74rem; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(246,241,231,.72); white-space:nowrap; padding-right:64px;
}
.ribbon-track span i{color:var(--gold-light); font-style:normal; padding-right:64px}
@keyframes ribbon{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .ribbon-track{animation:none} }

/* photo interludes */
.interlude{
  position:relative; min-height:46svh; display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center; overflow:hidden;
}
@media (min-width:900px){ .interlude{background-attachment:fixed} }
.interlude::after{content:""; position:absolute; inset:0; background:rgba(16,22,18,.5)}
.interlude blockquote{
  position:relative; z-index:2; margin:0; padding:80px 22px; text-align:center; max-width:840px;
}
.interlude blockquote p{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem, 3.4vw, 2.6rem);
  color:var(--ivory); line-height:1.3; margin:0; text-wrap:balance;
}
.interlude blockquote cite{
  display:block; margin-top:18px; font-style:normal; font-family:var(--sans);
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-light);
}
.interlude .in-diamond{color:var(--gold-light); font-size:.9rem; display:block; margin-bottom:16px}

/* deeper dark sections */
.goal{background:linear-gradient(170deg, var(--black-2) 0%, var(--black) 100%)}
.goal::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(900px 400px at 80% 0%, rgba(197,169,107,.1), transparent 65%);
}
.goal .wrap{z-index:3}
.gs b{background:var(--gold-grad); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent}
.site-footer{background:var(--black)}

/* count-up numerals hold width */
[data-count]{font-variant-numeric:tabular-nums}

/* dept quote strip spacing */
.dept-quote{margin-top:84px}

/* landing rhythm: more air */
.sec-sub{margin:-16px 0 44px}
.sec-head{margin-bottom:44px}
.today{gap:30px}
@media (max-width:600px){
  .sec-ghost{font-size:5.6rem; top:-3.3rem}
  .interlude{min-height:34svh}
  .dept-quote{margin-top:56px}
}

/* ============================================================
   v2.2 RICHNESS LAYER — ambient video hero, crossfades, story
   rows with people, detail strips, silk gradients, edge fades
   ============================================================ */

/* quote voices use Cormorant italic; display stays Playfair */
.today-card p.teaser, .interlude blockquote p, .goal p.gq{font-family:var(--serif-q)}
.mod-num, .sec-num, .sec-ghost{font-family:var(--serif-q)}
.hs h1{letter-spacing:0; font-weight:600}

/* ambient video hero */
.hs-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none}
@media (min-width:900px){ .hs-video{display:block} .hs-video ~ .hs-bg, .hs-video ~ .hs-bg2{display:none} }
@media (prefers-reduced-motion: reduce){ .hs-video{display:none !important} .hs-video ~ .hs-bg{display:block !important} }

/* photo crossfade layers */
.hs-bg2{
  position:absolute; inset:-4%; background-size:cover; background-position:center;
  opacity:0; transition:opacity 2.4s ease; animation:kenburns 22s ease-in-out infinite alternate;
}
.hs-bg2.show{opacity:1}

/* editorial story rows (image + text, alternating) */
.story{display:grid; grid-template-columns:.92fr 1.08fr; gap:64px; align-items:center; margin:96px 0}
.story:first-of-type{margin-top:0}
.story.flip{grid-template-columns:1.08fr .92fr}
.story.flip .story-img{order:2}
.story-img{position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lift)}
.story-img img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/4.6; display:block; transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.story:hover .story-img img{transform:scale(1.04)}
.story-img::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(169,139,79,.25); border-radius:20px}
.story-img .cap{
  position:absolute; left:16px; bottom:14px; z-index:2; color:var(--ivory); font-size:.68rem;
  letter-spacing:.22em; text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.story-body .kicker{margin-bottom:12px}
.story-body h3{font-size:clamp(1.7rem, 3vw, 2.4rem); margin-bottom:14px; text-wrap:balance}
.story-body p{color:var(--ink-soft); font-size:.98rem; max-width:460px}
.story-body .gt-cta{
  display:inline-block; margin-top:16px; font-size:.82rem; letter-spacing:.08em; font-weight:600;
  color:var(--celadon-deep); border-bottom:1px solid var(--gold-light); padding-bottom:2px; text-decoration:none;
}
.story-body .gt-cta:hover{color:var(--gold)}

/* detail strip — three quiet close-ups */
.details3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:26px 0 0}
.det{display:block; text-decoration:none; margin:0}
.det .det-img{border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.det img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform 1s cubic-bezier(.2,.6,.2,1)}
/* only LINKS invite interaction — plain figures stay still */
a.det:hover img{transform:scale(1.05)}
.story-img{display:block}
.story:hover .story-img img{transform:none}
a.story-img:hover img{transform:scale(1.04)}
.det figcaption{
  margin-top:10px; text-align:center; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft);
}
.det figcaption i{color:var(--gold); font-style:normal; margin-right:8px}

/* silk — slow moving warm gradient behind a section */
.silk{
  background:linear-gradient(120deg, var(--ivory) 0%, var(--celadon-wash) 30%, var(--sand) 55%, var(--ivory) 100%);
  background-size:280% 280%; animation:silk 30s ease-in-out infinite;
}
@keyframes silk{0%,100%{background-position:0% 40%} 50%{background-position:100% 60%}}
@media (prefers-reduced-motion: reduce){ .silk{animation:none} }

/* soft edge-fade utility for photos sitting on ivory */
.img-fade{
  -webkit-mask-image:radial-gradient(140% 140% at 50% 40%, #000 62%, transparent 98%);
  mask-image:radial-gradient(140% 140% at 50% 40%, #000 62%, transparent 98%);
}

/* dept gallery band */
.dept-gallery{margin-top:60px}
.dept-gallery .sec-head{margin-bottom:30px}

@media (max-width:860px){
  .story, .story.flip{grid-template-columns:1fr; gap:22px; margin:60px 0}
  .story.flip .story-img{order:0}
  .story-img img{aspect-ratio:16/10}
  .details3{grid-template-columns:1fr 1fr}
  .details3 .det:last-child{grid-column:1/-1}
}

/* ============================================================
   v2.3 ROLEPLAY LAYER — live adaptive sessions (employee stage,
   desk-system ticket, trainer view with reveal + live transcript)
   ============================================================ */

/* --- employee stage --- */
.rp-stage{margin-top:16px}
.rp-session{
  background:linear-gradient(170deg, var(--charcoal-2) 0%, var(--black-2) 100%);
  color:var(--ivory); border-radius:20px; padding:22px 24px;
  border:1px solid rgba(197,169,107,.3); box-shadow:var(--shadow-lift);
  position:relative; overflow:hidden;
}
.rp-session::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--gold), var(--celadon));
}
.rp-topline{display:flex; align-items:center; gap:12px}
.rp-topline b{font-family:var(--serif); font-weight:600; font-size:1.06rem; flex:1}
.rp-dot{
  flex:none; width:11px; height:11px; border-radius:50%;
  background:rgba(246,241,231,.35);
}
.rp-dot.live{background:var(--celadon-light); animation:rp-pulse 1.8s ease-in-out infinite}
@keyframes rp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(142,176,157,.5)} 50%{box-shadow:0 0 0 7px rgba(142,176,157,0)}}
@media (prefers-reduced-motion: reduce){ .rp-dot.live{animation:none} }
.rp-hang{
  color:var(--ivory); border-color:rgba(246,241,231,.45); padding:9px 18px; font-size:.82rem;
}
.rp-hang:hover{border-color:var(--clay); color:#fff; background:rgba(169,107,79,.3)}

/* --- desk-system ticket (slides in after the briefing) --- */
.rp-ticket{
  margin-top:18px; background:rgba(16,22,18,.55); border:1px solid rgba(197,169,107,.35);
  border-radius:14px; padding:16px 18px;
}
.rp-slidein{animation:rp-slidein .6s cubic-bezier(.2,.6,.2,1)}
@keyframes rp-slidein{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .rp-slidein{animation:none} }
.rp-ticket-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px}
.rp-sys{
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-light);
}
.rp-stamp{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,231,.6)}
.rp-rows{display:flex; flex-direction:column}
.rp-row{
  display:flex; gap:14px; padding:7px 0; border-top:1px dashed rgba(246,241,231,.16);
  font-size:.9rem; align-items:baseline;
}
.rp-row span{flex:none; width:110px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,231,.55); padding-top:2px}
.rp-row b{font-weight:500; color:var(--ivory); font-variant-numeric:tabular-nums}
.rp-note{font-size:.82rem; color:rgba(246,241,231,.75); margin:10px 0 0; font-style:italic}
.rp-fine{font-size:.74rem; color:rgba(246,241,231,.5); margin:12px 0 0}
.rp-fine code{color:rgba(246,241,231,.7)}

/* --- intro card --- */
.rp-intro .criteria-list li{border-top-style:dashed}

/* --- trainer view --- */
.tr-wrap{display:grid; grid-template-columns:280px 1fr; gap:18px; align-items:start}
.tr-aside{position:sticky; top:96px}
.tr-sess{
  display:block; width:100%; text-align:left; background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; margin-bottom:8px; cursor:pointer; font-family:var(--sans);
  transition:border-color .2s ease, transform .2s ease;
}
.tr-sess:hover{border-color:var(--celadon); transform:translateX(2px)}
.tr-sess.active{border-color:var(--celadon-deep); background:var(--celadon-wash)}
.tr-sess-top{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:.9rem}
.tr-sess-sub{display:block; font-size:.78rem; color:var(--ink-soft); margin-top:3px}
.tr-waiting{text-align:center; padding:44px 24px}
.tr-waiting .rp-dot{display:inline-block}
.tr-reveal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.tr-reveal code{font-size:.8em; background:var(--celadon-wash); padding:1px 6px; border-radius:6px; color:var(--celadon-deep)}
.tr-cast{font-size:.95rem; margin:10px 0 4px}
.tr-dials{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; margin-top:10px}
.tr-dial{
  background:var(--celadon-wash); border:1px solid var(--line); border-radius:10px; padding:8px 12px;
}
.tr-dial span{display:block; font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft)}
.tr-dial b{font-size:.88rem; font-weight:600; color:var(--ink)}
.tr-nuggets{margin-top:14px; padding-top:12px; border-top:1px dashed var(--line)}
.tr-nuggets-label{
  display:block; font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px;
}
.tr-nugget{
  display:inline-block; background:var(--sand); border:1px solid var(--gold-light); color:var(--gold);
  font-size:.8rem; font-weight:600; border-radius:999px; padding:5px 13px; margin:0 6px 6px 0; cursor:help;
}
.tr-transcript{
  max-height:420px; overflow-y:auto; margin-top:8px; padding-right:6px;
}
.tr-transcript .t-line{align-items:baseline}
.tr-transcript .t-who.emp{color:var(--gold)}
.tr-transcript .t-who.adm{color:var(--ink-soft)}
@media (max-width:860px){
  .tr-wrap{grid-template-columns:1fr}
  .tr-aside{position:static}
  .rp-row span{width:88px}
}

/* READABILITY FIX — cards rendered INSIDE the dark session panel keep ink
   text. .rp-session sets color:ivory for its own dark chrome; the paper
   cards inside (trainer reveal + live transcript) must not inherit it. */
.rp-session .card{color:var(--ink)}
.rp-session .card .muted{color:var(--ink-soft)}
.rp-session .card .rp-fine{color:var(--ink-soft)}
.rp-session .card .rp-fine code{color:var(--celadon-deep)}

/* ============ live indicators (trainer, during the call) ============ */
.lt-card .lt-note{font-size:.74rem; color:var(--ink-soft); margin:2px 0 10px}
.lt-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:6px 14px}
.lt-item{display:flex; gap:9px; align-items:baseline; font-size:.88rem; padding:5px 0; border-top:1px dashed var(--line)}
.lt-item .lt-mark{flex:none; width:20px; font-weight:700; text-align:center}
.lt-item.yes .lt-mark{color:var(--celadon-deep)}
.lt-item.no .lt-mark{color:var(--clay)}
.lt-item.pend .lt-mark{color:var(--line)}
.lt-item .lt-detail{display:block; font-size:.74rem; color:var(--ink-soft)}
.lt-count{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink)}

/* ============ official post-call result ============ */
.res-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.res-score{font-family:var(--serif); font-size:2rem; font-weight:700; color:var(--ink)}
.res-pct{font-size:1.05rem; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.res-band{font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; border-radius:999px; padding:5px 12px}
.res-band.above{background:var(--celadon-wash); color:var(--celadon-deep); border:1px solid var(--celadon)}
.res-band.approaching{background:var(--sand); color:var(--ink-soft); border:1px solid var(--line)}
.res-band.coaching{background:var(--clay-wash); color:var(--clay); border:1px solid var(--clay)}
.res-band.incomplete{background:var(--sand); color:var(--ink-soft); border:1px solid var(--line)}
.res-bar{position:relative; height:8px; border-radius:99px; background:var(--sand); margin:12px 0 4px; overflow:visible}
.res-bar .res-fill{position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:var(--celadon)}
.res-bar .res-goal{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--gold)}
.res-goal-label{font-size:.68rem; color:var(--gold); letter-spacing:.12em; text-transform:uppercase}
.res-crit{margin-top:14px}
.res-crit .rc-row{display:flex; gap:10px; align-items:baseline; padding:7px 0; border-top:1px dashed var(--line); font-size:.9rem}
.res-crit .rc-mark{flex:none; width:20px; font-weight:700; text-align:center}
.res-crit .rc-row.ok .rc-mark{color:var(--celadon-deep)}
.res-crit .rc-row.fail .rc-mark{color:var(--clay)}
.res-crit .rc-row.unknown .rc-mark{color:var(--line)}
.res-crit .rc-row details{flex:1}
.res-crit .rc-row summary{cursor:pointer; font-weight:600; color:var(--ink); font-size:.88rem; list-style:none}
.res-crit .rc-row summary::after{content:" ▸"; color:var(--ink-soft); font-size:.75em}
.res-crit .rc-row details[open] summary::after{content:" ▾"}
.res-crit .rc-why{font-size:.82rem; color:var(--ink-soft); margin-top:4px}
.res-fields{margin-top:14px; border-top:1px solid var(--line); padding-top:10px}
.res-fields h4{font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin:10px 0 4px}
.res-fields p{font-size:.86rem; color:var(--ink); margin:2px 0; white-space:pre-wrap}
.res-wait{display:flex; gap:10px; align-items:center; font-size:.85rem; color:var(--ink-soft)}

/* ============ leaders dashboard — roleplay analytics ============ */
.an-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:14px 0}
.an-tile{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.an-tile b{display:block; font-family:var(--serif); font-size:1.6rem; color:var(--ink); font-variant-numeric:tabular-nums}
.an-tile span{font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.an-critbar{display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px dashed var(--line); font-size:.86rem}
.an-critbar .cb-label{flex:none; width:210px}
.an-critbar .cb-track{flex:1; height:7px; border-radius:99px; background:var(--sand); position:relative; overflow:hidden}
.an-critbar .cb-fill{position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:var(--celadon)}
.an-critbar.weak .cb-fill{background:var(--clay)}
.an-critbar .cb-pct{flex:none; width:74px; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-soft); font-size:.8rem}
.an-sess{width:100%; text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin-top:8px; cursor:pointer; font-family:var(--sans); font-size:.88rem; transition:border-color .2s ease}
.an-sess:hover{border-color:var(--celadon)}
.an-sess .as-top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.an-sess .as-sub{display:block; font-size:.76rem; color:var(--ink-soft); margin-top:2px}
.an-detail{margin-top:10px}
@media (max-width:640px){ .an-critbar .cb-label{width:130px; font-size:.78rem} }


/* ============================================================
   v3 PREVIEW "Straight Path" — landing restructure (LOCAL ONLY)
   ============================================================ */

/* slightly tighter rhythm for the two orientation sections */
.sec-tight{padding:96px 0}
.sec-tight + .sec-tight{padding-top:0}

/* --- the path: three step cards --- */
.path-grid{display:grid; grid-template-columns:1fr 34px 1fr 34px 1fr; gap:10px; align-items:stretch}
.step-card{
  position:relative; text-align:left; background:var(--paper); border:1px solid var(--line);
  border-radius:20px; padding:28px 26px 24px; display:flex; flex-direction:column; gap:8px;
  text-decoration:none; color:var(--ink); box-shadow:var(--shadow); cursor:pointer;
  font-family:var(--sans); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow:hidden;
}
.step-card::after{content:""; position:absolute; inset:0; border-radius:20px; box-shadow:inset 0 0 0 1px rgba(169,139,79,.14); pointer-events:none}
.step-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:var(--celadon-light)}
.step-card .kicker{color:var(--celadon-deep); margin-bottom:2px}
.step-card h3{font-size:1.45rem; line-height:1.15}
.step-card p{font-size:.88rem; color:var(--ink-soft); margin:0; flex:1; line-height:1.55}
.step-num{
  position:absolute; top:16px; right:22px; font-family:var(--serif); font-style:italic;
  font-size:2.4rem; line-height:1; color:var(--celadon); opacity:.32; pointer-events:none;
}
.step-go{font-size:.84rem; font-weight:600; color:var(--celadon-deep); letter-spacing:.04em; margin-top:14px}
.step-card:hover .step-go{text-decoration:underline}
.step-arrow{
  align-self:center; font-family:var(--serif); font-size:1.5rem; color:var(--celadon);
  opacity:.55; text-align:center; padding-bottom:6px;
}

/* --- department section: module legend + "your department" --- */
.legend-row{display:flex; flex-wrap:wrap; gap:8px; margin:-16px 0 30px}
.legend-chip{
  font-size:.74rem; color:var(--ink-soft); border:1px solid var(--line); background:var(--paper);
  border-radius:999px; padding:6px 14px; white-space:nowrap;
}
.legend-chip b{color:var(--ink); font-weight:600}
.mine-chip{
  position:absolute; top:12px; left:12px; z-index:3; background:var(--celadon); color:#fff;
  font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border-radius:999px; padding:5px 12px; box-shadow:0 2px 10px rgba(34,49,42,.35);
}
.dp-tile.mine{box-shadow:0 0 0 2px var(--celadon), var(--shadow-lift)}

/* --- header: departments button is the primary affordance --- */
.site-nav .dd > button{
  background:var(--celadon); color:#fff; font-weight:600;
}
.site-nav .dd > button:hover, .dd.open > button{background:var(--celadon-deep); color:#fff}
.dd-pin{background:var(--celadon-wash); border-bottom:1px solid var(--line)}
.dd-pin .dept-mono{color:var(--celadon-deep); border-color:var(--celadon-light); background:#fff}
.dd-pin b{color:var(--celadon-deep)}
.mm-pin{color:var(--celadon-light); font-weight:600}

/* --- editorial tail divider --- */
.ed-divider{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:78px 22px 0; text-align:center;
}
.ed-divider .lbl{
  font-size:.7rem; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-soft);
}
.ed-divider .dia{color:var(--gold-light); font-size:.7rem}

/* --- dept module cards: what kind of module is this --- */
.mod-type{
  display:inline-block; width:max-content; font-size:.62rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--celadon-deep); background:var(--celadon-wash);
  border:1px solid rgba(114,156,132,.35); border-radius:999px; padding:3px 10px; margin-top:2px;
}

/* --- responsive --- */
@media (max-width:1000px){
  .path-grid{grid-template-columns:1fr}
  .step-arrow{display:none}
  .sec-tight{padding:72px 0}
}

/* ============================================================
   ★ VARIANT A — "LIQUID CELADON" · frosted liquid-glass system
   Layered celadon glass over the hotel's photography: cursor-
   tracked speculars, huge glass numerals, aurora edges, ripple
   rings. Appended last — later rules deliberately override
   earlier equal-specificity declarations.
   ============================================================ */

@property --lqcA{syntax:"<angle>"; initial-value:0deg; inherits:false;}
:root{
  --lqc-edge:rgba(255,255,255,.55);
  --lqc-spring:cubic-bezier(.30,1.45,.45,1);
  --lqc-glide:cubic-bezier(.22,.61,.36,1);
}

/* ---------- A1 · injected glass furniture (built by fx.js) ---------- */
.lqc-glow{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,38%),
    rgba(255,255,255,.85), rgba(142,176,157,.30) 42%, rgba(142,176,157,0) 72%);
  opacity:0; will-change:opacity;
}
.lqc-sweep{
  position:absolute; top:-24%; bottom:-24%; left:-72%; width:50%;
  transform:translateX(0) skewX(-16deg);
  background:linear-gradient(100deg, rgba(114,156,132,0), rgba(114,156,132,.14) 30%,
    rgba(255,255,255,.6) 52%, rgba(255,255,255,0) 78%);
  pointer-events:none; z-index:2; opacity:0;
}
.lqc-aura{position:absolute; inset:0; pointer-events:none; z-index:0}
.lqc-aura i{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; will-change:transform}
.lqc-aura i:nth-child(1){width:400px; height:400px; left:2%; top:-10%;
  background:radial-gradient(circle, rgba(114,156,132,.52), transparent 70%)}
.lqc-aura i:nth-child(2){width:320px; height:320px; right:6%; top:26%;
  background:radial-gradient(circle, rgba(142,176,157,.5), transparent 70%)}
.lqc-aura i:nth-child(3){width:360px; height:360px; left:40%; bottom:-14%;
  background:radial-gradient(circle, rgba(95,138,114,.4), transparent 70%)}
#pathSec{position:relative; overflow:hidden}
#pathSec > .wrap{position:relative; z-index:1}
.lqc-holder{position:relative}
.lqc-holder > :not(.lqc-aura){position:relative; z-index:1}
.lqc-holder > .module-grid{z-index:5}
.lqc-holder .lqc-aura{top:-80px; bottom:auto; height:560px; overflow:hidden}
.lqc-holder .lqc-aura i{opacity:.38; filter:blur(85px)}

/* ---------- A2 · the path step cards — the frosted hero moment ---------- */
.path-grid .step-card{
  background:linear-gradient(155deg, rgba(253,252,247,.76), rgba(253,252,247,.44) 52%, rgba(239,243,236,.64));
  -webkit-backdrop-filter:blur(18px) saturate(1.35); backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid var(--lqc-edge);
  box-shadow:0 1px 2px rgba(43,39,35,.04), 0 14px 36px rgba(60,84,70,.13);
}
.path-grid .step-card::after{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.22),
             inset 0 -14px 30px -20px rgba(95,138,114,.4);
}
.step-card h3, .step-card p, .step-card .kicker, .step-card .step-go{position:relative; z-index:3}
.step-card:hover{transform:none; border-color:rgba(142,176,157,1);
  -webkit-backdrop-filter:blur(22px) saturate(1.65); backdrop-filter:blur(22px) saturate(1.65);
  box-shadow:0 8px 18px rgba(60,84,70,.12), 0 34px 70px rgba(60,84,70,.26)}
.step-card:hover .lqc-glow{opacity:.65}

/* huge translucent glass numerals, layered behind the text */
.path-grid .step-card .step-num{
  top:auto; right:10px; bottom:-10px; z-index:0; pointer-events:none;
  font-family:var(--serif-q); font-style:italic; font-weight:600;
  font-size:7.6rem; line-height:1; opacity:1;
  color:transparent;
  background:linear-gradient(172deg, rgba(114,156,132,.60) 12%, rgba(114,156,132,.14) 80%);
  -webkit-background-clip:text; background-clip:text;
  filter:blur(2.5px);
  transform:translate(0,0) scale(1); will-change:transform;
}

/* module-card numerals — same glass spirit, smaller */
.mod-card .mod-num{
  position:absolute; top:4px; right:14px; z-index:0; pointer-events:none;
  font-size:3.4rem; line-height:1; font-style:italic;
  color:transparent;
  background:linear-gradient(172deg, rgba(114,156,132,.52), rgba(114,156,132,.10) 82%);
  -webkit-background-clip:text; background-clip:text;
  filter:blur(1.6px);
  transform:translate(0,0) scale(1); will-change:transform;
}
.mod-card h3, .mod-card p, .mod-card .mod-type, .mod-card .mod-foot{position:relative; z-index:3}
.mod-card .mod-foot{flex-wrap:wrap; gap:6px 10px}

/* section ghost numerals become poured glass (fx.js drifts them on scroll) */
.sec-ghost{
  -webkit-text-stroke:1px rgba(95,138,114,.30);
  color:transparent;
  background:linear-gradient(178deg, rgba(114,156,132,.30), rgba(114,156,132,.05) 76%);
  -webkit-background-clip:text; background-clip:text;
  filter:url(#lqcRefract);
}
.band .sec-ghost{
  -webkit-text-stroke:1px rgba(246,241,231,.32);
  background:linear-gradient(178deg, rgba(246,241,231,.36), rgba(246,241,231,.05) 76%);
  -webkit-background-clip:text; background-clip:text;
}

/* ---------- A3 · department tiles — frosted info bars ---------- */
.dp-info{
  left:10px; right:10px; bottom:10px; padding:9px 12px 9px 9px;
  background:rgba(18,27,22,.34);
  -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid rgba(255,255,255,.24); border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.dp-tile::after{background:linear-gradient(185deg, rgba(18,27,22,0) 42%, rgba(18,27,22,.6) 100%)}
.dp-tile:hover .dp-info{border-color:rgba(255,255,255,.68); background:rgba(18,27,22,.44);
  -webkit-backdrop-filter:blur(18px) saturate(1.9); backdrop-filter:blur(18px) saturate(1.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38)}
.dp-tile:hover{box-shadow:0 10px 24px rgba(34,49,42,.18), 0 26px 60px rgba(34,49,42,.30)}
.dp-tile:hover img{transform:scale(1.08)}

/* your-department tile: gently animated celadon glass edge */
.dp-tile.mine{box-shadow:0 0 0 1px rgba(114,156,132,.55), var(--shadow-lift)}
.dp-tile.mine::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; z-index:3; pointer-events:none;
  background:conic-gradient(from var(--lqcA,0deg),
    rgba(142,176,157,.9), rgba(114,156,132,.15) 25%, rgba(142,176,157,.7) 50%,
    rgba(114,156,132,.12) 75%, rgba(142,176,157,.9));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

/* ---------- A4 · hotel-wide band tiles — thicker glass on hover ---------- */
.glass-tile{
  position:relative; overflow:hidden;
  -webkit-backdrop-filter:blur(16px) saturate(1.25); backdrop-filter:blur(16px) saturate(1.25);
  border-color:rgba(246,241,231,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
}
.glass-tile h3, .glass-tile p, .glass-tile .gt-k, .glass-tile .gt-cta{position:relative; z-index:3}
.glass-tile:hover{
  transform:none; background:rgba(253,252,247,.24); border-color:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.75); backdrop-filter:blur(24px) saturate(1.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 18px 44px rgba(16,22,18,.35);
}
.glass-tile:hover .lqc-glow{opacity:.4}

/* ---------- A5 · module cards & the Live Roleplay crown jewel ---------- */
.mod-card{
  background:linear-gradient(155deg, rgba(253,252,247,.82), rgba(253,252,247,.6) 55%, rgba(239,243,236,.74));
  -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.55);
}
.mod-card:hover{transform:none; box-shadow:0 10px 24px rgba(60,84,70,.10), 0 26px 56px rgba(60,84,70,.18)}
.mod-card:hover .lqc-glow{opacity:.45}

.mod-card.live-rp{
  background:linear-gradient(158deg, rgba(34,49,42,.92) 6%, rgba(44,62,52,.88) 48%, rgba(95,138,114,.66) 120%);
  -webkit-backdrop-filter:blur(20px) saturate(1.3); backdrop-filter:blur(20px) saturate(1.3);
  color:var(--ivory); border-color:rgba(142,176,157,.65);
  box-shadow:0 12px 30px rgba(34,49,42,.32), 0 26px 64px rgba(95,138,114,.34);
  scale:1.025; z-index:6;
}
.mod-card.live-rp h3{color:#fff}
.mod-card.live-rp p{color:rgba(246,241,231,.85)}
.mod-card.live-rp .mod-go{color:var(--celadon-light)}
.mod-card.live-rp .mod-num{
  background:linear-gradient(172deg, rgba(246,241,231,.52), rgba(246,241,231,.08) 82%);
  -webkit-background-clip:text; background-clip:text;
}
.mod-card.live-rp .mod-type{
  color:var(--ivory); background:rgba(246,241,231,.13); border-color:rgba(246,241,231,.38);
  display:inline-flex; align-items:center; gap:7px;
}
.mod-card.live-rp .mod-type::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--celadon-light); box-shadow:0 0 8px rgba(142,176,157,.9);
}
.mod-card.live-rp .lqc-glow{
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,38%),
    rgba(142,176,157,.6), rgba(142,176,157,0) 68%);
}
.mod-card.live-rp:hover .lqc-glow{opacity:.6}
/* slowly rotating aurora border (overrides the metallic hairline) */
.mod-card.live-rp::after{
  padding:2px;
  background:conic-gradient(from var(--lqcA,0deg),
    rgba(170,205,185,1), rgba(142,176,157,.10) 25%, rgba(120,165,140,.8) 50%,
    rgba(142,176,157,.08) 75%, rgba(170,205,185,1));
}

/* ---------- A6 · hero + chrome glass ---------- */
.hs-stat{
  background:rgba(246,241,231,.13); border-color:rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.hs .btn-row .btn{position:relative; overflow:hidden}
.hs .btn-row .btn::after{
  content:""; position:absolute; top:-30%; bottom:-30%; left:-55%; width:38%;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.38) 50%, rgba(255,255,255,0));
  transform:translateX(0) skewX(-18deg); opacity:0; pointer-events:none;
}
.site-header.solid{
  -webkit-backdrop-filter:blur(18px) saturate(1.45); backdrop-filter:blur(18px) saturate(1.45);
  box-shadow:0 1px 0 rgba(246,241,231,.1), inset 0 1px 0 rgba(255,255,255,.1), 0 10px 34px rgba(0,0,0,.22);
}
.dd-panel{
  -webkit-backdrop-filter:blur(26px) saturate(1.5); backdrop-filter:blur(26px) saturate(1.5);
  background:rgba(253,252,247,.78); border-color:rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 24px 70px rgba(15,23,18,.35);
}
.legend-chip{
  background:linear-gradient(165deg, rgba(255,255,255,.85), rgba(239,243,236,.6));
  border-color:rgba(114,156,132,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 5px rgba(43,39,35,.05);
}

/* ---------- A7 · interludes — glass-edged quote panel ---------- */
.interlude blockquote{
  background:linear-gradient(165deg, rgba(246,241,231,.10), rgba(16,22,18,.30));
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(246,241,231,.30); border-radius:30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 30px 80px rgba(16,22,18,.35);
  padding:60px 56px; margin:96px 22px;
}

/* ---------- A8 · celadon ripple rings (spawned by fx.js on click) ---------- */
#lqcRippleLayer{position:fixed; inset:0; pointer-events:none; z-index:90}
.lqc-ring{
  position:absolute; width:150px; height:150px; margin:-75px 0 0 -75px; border-radius:50%;
  border:2px solid rgba(114,156,132,.8);
  box-shadow:0 0 24px rgba(114,156,132,.4), inset 0 0 16px rgba(142,176,157,.35);
  transform:scale(.12); opacity:0;
}
.lqc-ring.r2{border-color:rgba(246,241,231,.9); border-width:1px}

/* ---------- A9 · MOTION — every animation gated ---------- */
@media (prefers-reduced-motion: no-preference){
  .path-grid .step-card, .mod-card, .glass-tile, .dp-tile{
    transition:opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1),
      filter .9s cubic-bezier(.2,.6,.2,1),
      translate .55s var(--lqc-spring), scale .55s var(--lqc-spring),
      box-shadow .5s ease, border-color .5s ease, background .5s ease,
      -webkit-backdrop-filter .5s ease, backdrop-filter .5s ease;
  }
  .step-card:hover{translate:0 -6px; scale:1.055}
  .mod-card:hover{translate:0 -6px; scale:1.02}
  .mod-card.live-rp:hover{scale:1.055}
  .glass-tile:hover{translate:0 -6px}
  .dp-tile:hover{translate:0 -6px}
  .lqc-glow{transition:opacity .35s ease}
  .lqc-sweep{transition:transform 1.15s cubic-bezier(.2,.6,.2,1), opacity .4s ease}
  .step-card:hover .lqc-sweep{transform:translateX(460%) skewX(-16deg); opacity:1}
  .step-card .step-num, .mod-card .mod-num{transition:transform .5s var(--lqc-glide), filter .5s ease}
  .step-card:hover .step-num{
    transform:translate(calc(var(--dx,0)*18px - 8px), calc(var(--dy,0)*14px - 12px)) scale(1.5);
    filter:blur(1.2px);
  }
  .mod-card:hover .mod-num{
    transform:translate(calc(var(--dx,0)*10px - 3px), calc(var(--dy,0)*8px - 5px)) scale(1.28);
    filter:blur(1px);
  }
  .dp-info{transition:background .45s ease, border-color .45s ease,
    -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease}
  .lqc-aura i{animation:lqcDrift 18s ease-in-out infinite alternate}
  .lqc-aura i:nth-child(2){animation-duration:23s; animation-delay:-7s}
  .lqc-aura i:nth-child(3){animation-duration:27s; animation-delay:-13s}
  .dp-tile.mine::before{animation:lqcSpin 7s linear infinite}
  .mod-card.live-rp::after{animation:lqcSpin 8s linear infinite}
  .mod-card.live-rp .mod-type::before{animation:lqcDot 1.9s ease-in-out infinite}
  .hs .btn-row .btn::after{animation:lqcPass 7s ease-in-out infinite}
  .hs .btn-row .btn:nth-child(2)::after{animation-delay:1.2s}
  .lqc-ring{animation:lqcRing .8s cubic-bezier(.2,.6,.2,1) forwards}
  .lqc-ring.r2{animation:lqcRing 1.15s cubic-bezier(.2,.6,.2,1) .07s forwards}
}
@keyframes lqcDrift{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(46px,-30px,0) scale(1.14)}}
@keyframes lqcSpin{to{--lqcA:360deg}}
@keyframes lqcDot{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.78)}}
@keyframes lqcPass{
  0%, 56%{transform:translateX(0) skewX(-18deg); opacity:0}
  60%{opacity:.85}
  76%{transform:translateX(500%) skewX(-18deg); opacity:.85}
  77%, 100%{transform:translateX(500%) skewX(-18deg); opacity:0}
}
@keyframes lqcRing{0%{transform:scale(.12); opacity:.95} 100%{transform:scale(1); opacity:0}}

/* keyboard focus stays visible on glass */
.step-card:focus-visible, .mod-card:focus-visible, .dp-tile:focus-visible, .glass-tile:focus-visible{
  outline:2px solid var(--celadon-deep); outline-offset:3px;
}

/* mobile calm */
@media (max-width:600px){
  .path-grid .step-card .step-num{font-size:5rem; bottom:-10px}
  .mod-card .mod-num{font-size:2.6rem}
  .interlude blockquote{padding:40px 24px; margin:70px 14px; border-radius:22px}
}

/* ============================================================
   ★ v5 ITERATION — Monai's punch list on Liquid Celadon
   · Start-here cards: neutral frosted crystal (de-greened)
   · Numerals stand clear of the words, larger and readable
   · Knowledge ⇄ Examinations glass segmented toggle
   · "Why Forbes matters" daily-insight panel + FTG identity
   Appended last — overrides the Variant A block above.
   ============================================================ */

/* ---------- V1 · step cards: frosted crystal over paper, not green glass ---------- */
#pathSec .lqc-aura i{opacity:.26}
.path-grid .step-card{
  background:linear-gradient(155deg, rgba(255,255,255,.86), rgba(253,252,247,.56) 52%, rgba(248,246,241,.72));
  -webkit-backdrop-filter:blur(18px) saturate(1.05); backdrop-filter:blur(18px) saturate(1.05);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 1px 2px rgba(43,39,35,.04), 0 14px 36px rgba(48,52,48,.10);
}
.path-grid .step-card::after{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.35),
             inset 0 -14px 30px -20px rgba(96,100,96,.20);
}
.step-card:hover{
  border-color:rgba(255,255,255,1);
  -webkit-backdrop-filter:blur(24px) saturate(1.15); backdrop-filter:blur(24px) saturate(1.15);
  box-shadow:0 8px 18px rgba(56,60,56,.10), 0 34px 70px rgba(56,60,56,.20);
}
.path-grid .step-card .lqc-glow{
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,38%),
    rgba(255,255,255,.95), rgba(255,255,255,.36) 45%, rgba(255,255,255,0) 72%);
}
.path-grid .step-card .lqc-sweep{
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.14) 30%,
    rgba(255,255,255,.62) 52%, rgba(255,255,255,0) 78%);
}

/* ---------- V2 · numerals stand clear of the words ---------- */
/* section ghosts: no longer hidden behind the heading — they stand
   beside it as poured-glass numerals, larger and clearly readable */
.sec-ghost{
  position:static; order:-1; flex:none; z-index:auto;
  font-size:clamp(4.6rem, 7.5vw, 6.8rem); line-height:.72;
  margin-right:6px; align-self:baseline;
  -webkit-text-stroke:1.5px rgba(95,138,114,.45);
  background:linear-gradient(178deg, rgba(114,156,132,.55) 8%, rgba(114,156,132,.14) 84%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.band .sec-ghost{
  -webkit-text-stroke:1.5px rgba(246,241,231,.5);
  background:linear-gradient(178deg, rgba(246,241,231,.55) 8%, rgba(246,241,231,.12) 84%);
  -webkit-background-clip:text; background-clip:text;
}
/* step-card numerals: crisp glass, pinned top-right, words cleared */
.path-grid .step-card .step-num{
  top:20px; right:24px; bottom:auto; z-index:2;
  font-size:4.4rem; line-height:.8; opacity:1; filter:none;
  -webkit-text-stroke:1px rgba(95,138,114,.38);
  background:linear-gradient(172deg, rgba(95,138,114,.9) 10%, rgba(114,156,132,.34) 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.path-grid .step-card .kicker, .path-grid .step-card h3{padding-right:78px}
/* module-card numerals: same clarity, words cleared */
.mod-card .mod-num{
  top:14px; right:16px; font-size:2.9rem; line-height:1; filter:none;
  -webkit-text-stroke:1px rgba(95,138,114,.32);
  background:linear-gradient(172deg, rgba(95,138,114,.82) 10%, rgba(114,156,132,.28) 88%);
  -webkit-background-clip:text; background-clip:text;
}
.mod-card h3{padding-right:58px}
.mod-card.live-rp .mod-num{
  -webkit-text-stroke:1px rgba(246,241,231,.42);
  background:linear-gradient(172deg, rgba(246,241,231,.88) 10%, rgba(246,241,231,.24) 88%);
  -webkit-background-clip:text; background-clip:text;
}

/* ---------- V3 · header menu: the full floor plan ---------- */
.dd-all{grid-column:1/-1; border-top:1px solid var(--line); margin-top:4px; padding-top:12px}
.dd-all .dept-mono{background:var(--celadon-deep); border-color:var(--celadon-deep); color:var(--ivory)}

/* ---------- V4 · Knowledge ⇄ Examinations glass toggle ---------- */
.band-toggle{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  width:min(430px, 100%); margin:-6px 0 34px; padding:5px; border-radius:999px;
  background:rgba(253,252,247,.12); border:1px solid rgba(246,241,231,.38);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 30px rgba(16,22,18,.28);
}
.bt-thumb{
  position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px);
  border-radius:999px; transform:translateX(0);
  background:linear-gradient(165deg, rgba(255,255,255,.94), rgba(253,252,247,.72));
  box-shadow:inset 0 1px 0 #fff, 0 6px 18px rgba(16,22,18,.35);
}
.band-toggle.exam .bt-thumb{
  transform:translateX(100%);
  background:linear-gradient(165deg, rgba(142,176,157,.96), rgba(95,138,114,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 6px 20px rgba(34,49,42,.5);
}
.bt-opt{
  position:relative; z-index:2; background:none; border:none; cursor:pointer;
  padding:11px 10px; border-radius:999px; font-family:var(--sans);
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(246,241,231,.85);
}
.bt-opt.active{color:var(--charcoal)}
.band-toggle.exam .bt-opt.active{color:#fff}
.bt-opt:focus-visible{outline:2px solid var(--celadon-light); outline-offset:2px}
/* the two glass finishes */
.band-tiles{grid-template-columns:repeat(auto-fit, minmax(230px, 1fr))}
.band-tiles.mode-know .gt-exam{display:none}
.band-tiles.mode-exam .gt-know{display:none}
.glass-tile.gt-know{
  background:linear-gradient(165deg, rgba(253,252,247,.30), rgba(253,252,247,.10));
  border-color:rgba(246,241,231,.5);
}
.glass-tile.gt-know:hover{background:linear-gradient(165deg, rgba(253,252,247,.38), rgba(253,252,247,.18))}
.glass-tile.gt-exam{
  background:linear-gradient(165deg, rgba(95,138,114,.46), rgba(28,40,33,.44) 90%);
  border-color:rgba(142,176,157,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 10px 30px rgba(16,22,18,.26);
}
.glass-tile.gt-exam:hover{
  background:linear-gradient(165deg, rgba(95,138,114,.58), rgba(28,40,33,.52) 90%);
  border-color:rgba(170,205,185,.85);
}
.glass-tile.gt-exam .gt-k{color:var(--celadon-light)}
.glass-tile.gt-exam .gt-cta{border-bottom-color:var(--celadon-light)}
/* celadon veil that deepens the whole band in Examinations mode */
.band .band-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:linear-gradient(200deg, rgba(58,92,73,.5), rgba(18,28,22,.42));
}
.band.exam-mode .band-veil{opacity:1}

/* ---------- V5 · "Why Forbes matters" daily insight ---------- */
#insightSec{position:relative; overflow:hidden}
#insightSec::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 300px at 10% 14%, rgba(114,156,132,.13), transparent 70%),
             radial-gradient(560px 320px at 92% 86%, rgba(114,156,132,.09), transparent 70%);
}
#insightSec .wrap{position:relative; z-index:1}
.insight-panel{
  position:relative; display:grid; grid-template-columns:1.55fr .85fr; overflow:hidden;
  border-radius:26px; border:1px solid rgba(255,255,255,.75);
  background:linear-gradient(155deg, rgba(255,255,255,.84), rgba(253,252,247,.6) 55%, rgba(248,246,241,.72));
  -webkit-backdrop-filter:blur(20px) saturate(1.1); backdrop-filter:blur(20px) saturate(1.1);
  box-shadow:0 1px 2px rgba(43,39,35,.05), 0 24px 60px rgba(60,72,66,.14), inset 0 1px 0 rgba(255,255,255,.9);
}
.ins-main{padding:46px 48px 42px}
.ins-date{
  font-size:.68rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--celadon-deep); margin-bottom:18px;
}
.ins-stat{
  font-family:var(--serif-q); font-style:italic; font-weight:600;
  font-size:clamp(3.4rem, 6vw, 4.8rem); line-height:1; margin-bottom:12px;
  color:transparent;
  background:linear-gradient(172deg, rgba(95,138,114,.95) 10%, rgba(114,156,132,.5) 90%);
  -webkit-background-clip:text; background-clip:text;
  font-variant-numeric:tabular-nums;
}
.ins-stat span{font-size:.45em}
.ins-stat.gold{background:var(--gold-grad); background-size:200% auto; -webkit-background-clip:text; background-clip:text}
.ins-main h3{font-size:clamp(1.45rem, 2.6vw, 1.9rem); margin-bottom:10px; text-wrap:balance}
.ins-main p{color:var(--ink-soft); font-size:.97rem; line-height:1.6; max-width:540px; margin:0}
.ins-main p.ins-quote{
  font-family:var(--serif-q); font-style:italic; font-size:1.32rem; line-height:1.5; color:var(--ink);
}
.ins-main cite{
  display:block; margin-top:16px; font-style:normal; font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
.ins-ftg{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:42px 36px; text-align:center; color:var(--ivory);
  background:linear-gradient(170deg, var(--charcoal-2) 0%, var(--black-2) 100%);
  border-left:1px solid rgba(169,139,79,.22);
}
.ftg-mark{
  font-family:var(--serif); font-weight:600; font-size:1rem; line-height:1.9;
  letter-spacing:.4em; text-indent:.4em; text-transform:uppercase; color:var(--ivory);
}
.ftg-stars{color:var(--gold-light); font-size:1.05rem; letter-spacing:.42em; text-indent:.42em; line-height:1}
.ftg-line{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(246,241,231,.65)}
.ftg-btn{
  display:inline-block; margin-top:10px; padding:12px 24px; border-radius:999px;
  font-family:var(--sans); font-size:.8rem; font-weight:600; letter-spacing:.05em; text-decoration:none;
  color:var(--ivory); background:rgba(246,241,231,.10);
  border:1px solid rgba(246,241,231,.45);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.ftg-btn:hover{
  background:rgba(246,241,231,.22); border-color:rgba(246,241,231,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 26px rgba(16,22,18,.4);
}

/* ---------- V6 · odds and ends ---------- */
.section-title{scroll-margin-top:110px}
.pad-page > .legend-row{margin-top:4px}

/* ---------- V7 · motion (all gated) ---------- */
@media (prefers-reduced-motion: no-preference){
  .bt-thumb{transition:transform .5s var(--lqc-spring), background .4s ease, box-shadow .4s ease}
  .bt-opt{transition:color .35s ease}
  .band .band-veil{transition:opacity .8s ease}
  .band-tiles.switched .glass-tile{animation:btTileIn .6s var(--lqc-glide) both}
  .band-tiles.switched .glass-tile:nth-child(2){animation-delay:.07s}
  .band-tiles.switched .glass-tile:nth-child(3){animation-delay:.05s}
  .band-tiles.switched .glass-tile:nth-child(4){animation-delay:.12s}
  .band-tiles.switched .glass-tile:nth-child(5){animation-delay:.19s}
  .ftg-btn{transition:background .3s ease, border-color .3s ease, box-shadow .3s ease}
  /* tamer magnify keeps the numeral inside its corner — never over the words */
  .step-card:hover .step-num{
    transform:translate(calc(var(--dx,0)*10px), calc(var(--dy,0)*8px)) scale(1.16);
    filter:none;
  }
  .mod-card:hover .mod-num{
    transform:translate(calc(var(--dx,0)*7px), calc(var(--dy,0)*6px)) scale(1.12);
    filter:none;
  }
}
@keyframes btTileIn{from{opacity:0; transform:translateY(16px) scale(.96)} to{opacity:1; transform:none}}

/* ---------- V8 · responsive ---------- */
@media (max-width:900px){
  .insight-panel{grid-template-columns:1fr}
  .ins-ftg{border-left:none; border-top:1px solid rgba(169,139,79,.22); padding:32px 26px}
  .ins-main{padding:34px 28px 30px}
}
@media (max-width:600px){
  .path-grid .step-card .step-num{font-size:3.4rem; top:16px; right:18px; bottom:auto}
  .path-grid .step-card .kicker, .path-grid .step-card h3{padding-right:62px}
  .mod-card .mod-num{font-size:2.5rem}
  .sec-ghost{font-size:3.4rem; top:auto}
  .band-toggle{width:100%}
  .bt-opt{font-size:.72rem; letter-spacing:.1em; padding:11px 6px}
}